@import url("https://use.typekit.net/kfr4xyk.css");

:root {
  /* Font sizes */
  --font-size-base: clamp(14px, 1rem + 0.25vw, 20px);
  --font-size-xs: calc(var(--font-size-base) / 1.563);
  --font-size-sm: calc(var(--font-size-base) / 1.25);
  --font-size-lg: calc(var(--font-size-base) * 1.25);
  --font-size-xl: calc(var(--font-size-base) * 1.563);
  --font-size-2xl: calc(var(--font-size-base) * 1.953);
  --font-size-3xl: calc(var(--font-size-base) * 2.441);
  
  /* Line heights */
  --line-height-base: 1.6;
  --line-height-heading: 1.3;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Colours */
  --color-primary: #264653;
  --color-secondary: #3d7a8c;
  --color-white: #FFF;
  --color-cta: #e76f51;
  --color-light-grey: #ececec;
  --color-dark-grey: #2b2b2b;
  
  /* Semantic colour mappings */
  --color-text: var(--color-primary);
  --color-text-inverse: var(--color-white);
  --color-bg: var(--color-white);
  --color-bg-dark: var(--color-primary);
  --color-bg-mid: var(--color-secondary);
    
  --space-xs: 0.5rem;   /* 8px at base */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
}


/* CSS Reset (based on Meyer’s Reset v2.0) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* TYPOGRAPHY */
body {
    font-family: "ofelia-text", "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    background-color: var(--color-bg);
    text-align: center;
}

.fakeh1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
}

.fakeh1 { 
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
    margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
h1 {
    font-size: var(--font-size-sm);
    margin-top: var(--space-xl);
}
h2 { 
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold); 
  margin-bottom: var(--space-lg);
    margin-top: var(--space-xl);

}

h3 { 
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}


h4 { 
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

h5, h6 { 
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
    margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}
h1:first-child, 
h2:first-child, 
h3:first-child {
  margin-top: 0;
}

p {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
    margin-bottom: var(--space-md);
    line-height: var(--line-height-base);
}
p:last-child {
  margin-bottom: 0;
}

ol, ul {
    list-style: none;
    margin-bottom: var(--space-md);
  padding-left: var(--space-lg);

}
ol {
    list-style-type: decimal-leading-zero;
}
ul {
    list-style-type: disc;
}
li {
    font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
    margin-bottom: var(--space-xs);
    line-height: var(--line-height-base);
}

small, .text-sm { 
  font-size: var(--font-size-sm);
}

strong, b {
  font-weight: var(--font-weight-semibold);
}



/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}



blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    padding: var(--space-md);
    font-size: var(--font-size-xs);
}
th {
    font-weight: bold;
    text-align: left;
}
a {
    color: #264653;
    text-decoration: underline;
}
a.lightLink {
    color: var(--color-white);
}
footer a {
    color: var(--font-color-white);
}
.center {
    text-align: center;
}
/*ol, ul {
    margin: 2vh;
    line-height: 2vh;
}
li {
    font-size: 1.5vh;
    line-height: 2.5vh;
    padding: 0.5vh;
    font-weight: 500;
}
ol {
    list-style-type: decimal-leading-zero;
}
ul {
    list-style-type: disc;
}*/

ul.iconList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.iconList li {
    padding: 2rem 0;
    /*padding: 5vh 0;
    border-bottom: 1px solid;*/
}
ul.iconList li.last {
    border-bottom: none;
}
ul.itemList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.itemList li {
    padding: 2rem 0;
}
ul.itemList li.mid {
    border: none;
    border-top: 1px solid var(--color-bg-dark);
    border-bottom: 1px solid var(--color-bg-dark);
}

.emphasis {
    font-weight: var(--font-weight-semibold);
}
p.ctaHolder {
    padding: 2rem 0;
}

.cta {
    background: var(--color-cta);
    color: var(--color-dark-grey);
    border-radius: 0.25rem;
    padding: 0.75rem 2rem;
    text-decoration: none;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.cta:hover {
    background: var(--color-cta);
    color: var(--color-white);
    transition: ease 0.3s;
}
.cta:active {
    background: var(--color-cta); ;
    color: #FFF;
    transition: ease 0.3s;
}
.preamble {
    font-weight: 400;
}

#step1 {
    background: url(/assets/img/step1.svg);
    background-size: 5rem;
    background-repeat: no-repeat;
    background-position: center 2rem;
    padding-top: 9rem;
}
#step2 {
    background: url(/assets/img/step2.svg);
    background-size: 5rem;
    background-repeat: no-repeat;
    background-position: center 2rem;
    padding-top: 9rem;
}
#step3 {
    background: url(/assets/img/step3.svg);
    background-size: 5rem;
    background-repeat: no-repeat;
    background-position: center 2rem;
    padding-top: 9rem;
}
#iconStep1 span, #iconStep2 span, #iconStep3 span{
    display: none;
}




section, footer {
    padding: var(--space-2xl) var(--space-xl);
}


#siteLogo {
    z-index: 1003;
}
#siteLogo img {
    vertical-align: bottom;
}
ul#nav {
    position: absolute;
    width: calc(100% - 8rem);
    top: -10rem;
    /* left: 0; */
    margin: 0;
    padding: 2rem 8rem 2rem 0;
    background: #E76F51;
    list-style: none;
    pointer-events: none;
    transition: top 0.5s ease;
    left: 0;
    z-index: 10;
}

ul#nav.visible {
    top: 7rem;
    pointer-events: auto;
}
#nav li {
    text-align: right;
}
#nav a {
    color: #FFF;
    text-decoration: none;
}

                .hamburger-menu {
                    border: 2px solid var(--border);
                    cursor: pointer;
                    padding: var(--space-sm);
                    border-radius: var(--radius-md);
                    z-index: 1002;
                    background: 0 0;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 4px;
                    width: 44px;
                    height: 44px;
                    transition: all .2s;
                    display: flex;
                    position: relative;
                }
                .hamburger-line {
                    background: #fff;
                    border-radius: 2px;
                    width: 23px;
                    height: 3px;
                    transition: all .3s;
                    display: block;
                }
.visible span.hamburger-line.line1 {
    transform: translateY(5px) rotate(45deg);
}
.visible span.hamburger-line.line2 {
    transition: opacity 0.25s ease;
    opacity: 0;
}
.visible span.hamburger-line.line3 {
    transform: translateY(-6px) rotate(-45deg);
}


h2 span {
    font-size: 6rem;
    display: block;
    color: var(--color-cta);
    animation: statIn 0.8s ease forwards;
}
@keyframes statIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

footer {
    text-align: center;
    background: var(--color-dark-grey);
    color: #FFF;
}
header {
    background: #3D7A8C;
    color: #FFF;
}
#header {
    display: flex;
    justify-content: space-between;
    background: #3D7A8C;
    z-index: 100000;
    position: relative;
    border-bottom: 5px solid #E76F51;
    align-items: anchor-center;
    vertical-align: -webkit-baseline-middle;
    transition: background 0.5s ease, top 0.5s ease;
    padding: var(--space-lg) var(--space-xl);
}
#header.visible {
    background: #E76F51;
    border-bottom: 5px solid #E76F51;
                }
section#problem {
    background: #264653;
    color: #FFF;
    /*background-image: url(/assets/img/outside5-icon-light.svg);
    background-size: contain;
    background-position: 159% center;
    background-repeat: no-repeat;*/
}

section.split .module.primary.text {
    border-bottom: 1px solid var(--color-bg-mid);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
section#proposition {
    background: #3D7A8C;
    color: #FFF;
}
section#steps {
    background: #FFF;
    color: #264653;
    text-align: center;
}
section#review {
    background: #264653;
    color: #FFF;
}
.reviewBody {
    /*display: none;*/
}
article.review {
    margin: var(--space-xl) 0;
    background: var(--color-secondary);
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--space-xs);
}
section#motivation {
    background: var(--color-cta);
    color: var(--color-dark-grey);
    text-align: center;
}
#motivation .cta {
    background: var(--color-white);
    color: var(--color-bg-mid);
}
section#contact {
    background: #FFF;
    color: #264653;
    min-height: 66vh;
}

section#standard {
}

section.sectionElement.firstBlock {
    background: var( --color-primary );
    color: var(--color-white);
}

section.sectionElement.secondBlock {
    background: var( --color-secondary );
    color: var(--color-white);
}
section.sectionElement.loudBlock {
    background: var(--color-cta);
    color: var(--color-white);
}


/* Portfolio */
img.portfolioImage {
    width: 100%;
    height: auto;
}

.mockup-wrap {
    position: relative;
    width: 100%;
    max-width: 90vw;
    padding-bottom: 5rem;
    padding-top: 2rem;
}

.browser-frame {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    overflow: hidden;
}

.browser-bar {
    background: #e8e8e8;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ccc;
}

.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #ffbd2e; }
.browser-dots span:nth-child(3) { background: #28c840; }

.browser-url {
    flex: 1;
    background: #fff;
    border-radius: 4px;
    height: 22px;
    max-width: 300px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    color: var(--color-dark-grey);
    gap: 5px;
}

.browser-url::before {
    /*content: "🔒";
    font-size: 10px;*/
}

.browser-screen img {
    display: block;
    width: 100%;
    height: auto;
}

.phone-frame {
    position: absolute;
    bottom: 0;
    right: -30px;
    width: 160px;
    background: #1a1a1a;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    padding: 12px 6px;
}

.phone-notch {
    width: 50px;
    height: 8px;
    background: #333;
    border-radius: 4px;
    margin: 0 auto 8px;
}

.phone-screen {
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.phone-screen img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    object-position: top;
}

.phone-home {
    width: 40px;
    height: 4px;
    background: #444;
    border-radius: 2px;
    margin: 8px auto 0;
}


.odd{
    background: #ececec;
}
.hidden {
    display: none;
}


/* FORMS */
span.resetForm {
    cursor: pointer;
}
input, select, textarea {
    padding: 1rem;
    font-family: unset;
}

input[type=text], textarea {
    width: calc(100% - 2rem);
    display: block;
}
select {
    width: 100%;
    display: block;
}
textarea {

}
label.radioLabel {
    display: block;
    border: 1px solid var(--color-primary);
    padding: 1rem;
    border-radius: 0.25rem;
    margin: 1rem 0;
    background: var(--color-light-grey);
    color: var(--color-dark-grey);
    cursor: pointer;
}
label.radioLabel.selected {
    background: var(--color-secondary);
    color: var(--color-white);
}
p.error {
    color: red;
    font-weight: 400;
}
p.resetButton {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
/* END FORMS */



/* COOKIES */
#cookie-declaration {
    display: none;
    position: fixed;
    bottom: 0;
    background-color: #f9f9f9;
    padding: 2rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
    border-top: 1px solid #ddd;
    z-index: 1000;
    width: calc(100% - 4rem);
    color: #222;
    font-size: 0.5rem;
    left: 0;
    right: 0;
    margin: auto;
    animation: cookiesIn 0.8s ease forwards;
}
@keyframes cookiesIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
div#cookie-declaration p {
    font-weight: var(--font-weight-light);
}
div#cookie-declaration p#cookie-declaration-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}
div#cookie-update {
    display: none;
    position: fixed;
    bottom: 1rem;
    background-color: rgba(0, 0, 0, .75);
    cursor: pointer;
    z-index: 1000;
    color: #ccc;
    font-size: 1rem;
    padding: 0;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    background: url(/assets/img/cookie.svg);
}
p#cookie-update-title{
    display: none;
}

.cookie-category-header label span {
    width: 90%;
}

.cookie-category {
    /* width: 30%; */
    margin: auto auto var(--space-xs) auto;
    font-size:  var(--font-size-xs);

}

.cookie-category-header {
    display: block;
}

.cookie-category label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px;
    background-color: #e9e9e9;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cookie-category label:hover {
    background-color: #dcdcdc;
}

.cookie-category .toggle-details {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    color: #333;
    font-weight: bold;
    text-decoration: underline;
}

.cookie-category .toggle-details:hover {
    color: #0056b3;
}
.cookies-details {
    display: none;
}
.cookie-category ul {
    list-style-type: none;
    padding: 10px 0 0;
    margin: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 14px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 14px;
}
.slider.active {
    background-color: #2196F3;
}

.slider.active:before {
    transform: translateX(20px);
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 0;
    bottom: 0;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.button-container {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.button-container button {
    padding: 1rem 2rem;
    font-size: var(--font-size-xs);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: auto;
}

.btn {
    text-transform: uppercase;
}

.btn-primary {
    background-color: #333;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

#status-message {
    display: none;
    margin-top: 10px;
    font-size: 0.9em;
    color: green;
    text-align: center;
}

/* END COOKIES */

@media screen and (min-width: 768px) and (orientation: landscape) {
    
    body {
        text-align: left;
    }
    
    ul#nav {
        width: calc(80%);
        margin: 0;
        padding: 2rem 10% 4rem;
    }

    ul#nav.visible {
        top: 9rem;
    }
    
    
    section, footer {
        padding: var(--space-2xl) 20% !important;
    }
    
        
    section.split {
        display: flex;
        align-items: center;
    }
    
    section.split .module.primary.text {
        width: calc(60%);
        display: inline-block;
        border-bottom: none;
        border-right: 1px solid var(--color-bg-mid);
        padding-right: 2.5rem;
    }
    .module.secondary.image {
        width: 60%;
        /* height: auto; */
        /* DISPLAY: INLINE-BLOCK; */
        /* background-position: right -130px bottom; */
        margin: 0 0 0 4.5rem;
        /* background-repeat: no-repeat; */
        /* border-left: 1px solid var(--color-bg-mid); */
        /* padding: 0 0 0 3.5rem; */
    }
    
    ul.iconList {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    ul.iconList li.mid {
        padding: 0 4rem;
    }

    ul.itemList {
        display: flex;
        justify-content: space-evenly;
        align-items: baseline;
    }
    ul.itemList li {
        padding: 2rem 0;
        width: 33%;
        display: flex;
        flex-direction: column;
    }
    ul.itemList li.mid {
        padding: 0 3rem;
        margin: 0 3rem;
        border: none;
        border-left: 1px solid var(--color-bg-dark);
        border-right: 1px solid var(--color-bg-dark);
    }
    
    .itemList li h3 {
        min-height: 5rem;
        align-items: center;
        display: flex;
    }
    
    article.review {
        margin: var(--space-xl) 0;
        background: var(--color-secondary);
        padding: var(--space-xl) var(--space-2xl);
        border-radius: var(--space-sm);
    }
    .reviewBody {
        display: block;
    }
    
    
    
    
    
    #contact .module.primary.text {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        /* justify-items: right; */
        /* flex-direction: row-reverse; */
    }

    form#enquiry {
        width: 60%;
        padding: 0 0 0 4rem;
    }

    #contact article {
        padding: 0 4rem 0 0;
        width: 50%;
    }
    
    /*.firstBlock div {
       display: flex;
        align-items: center;
        gap: 2rem;
    }

    .firstBlock div p {
        width: calc(50% - 3rem);
        padding: 3rem 0 3rem 3rem;
    }
    .firstBlock div p.fakeh1 {
        width: calc(50% - 3rem);
        padding: 3rem 3rem 3rem 0;
    }
    */
    
    #cookie-declaration {
        width: 30%;
    }
    
    div#cookie-declaration p {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-xs);
    }
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
    section, footer {
        padding: var(--space-2xl) 10% !important;
    }
    ul#nav {
        width: calc(80%);
        margin: 0;
        padding: 2rem 10% 4rem;
    }
    ul#nav.visible {
        top: 11rem;
    }
}