/* =========================================================
   VARIABLES
========================================================= */

:root{

    --navy:#07182d;
    --navy2:#0d2440;

    --red:#e83d47;
    --red-dark:#b92332;

    --blue:#395cff;
    --electric:#6678ff;

    --gold:#e8c56d;
    --cream:#f7f0df;
    --paper:#fffaf0;

    --pink:#f1a0a8;

    --white:#fff;

    --serif:"DM Serif Display", serif;
    --sans:"Manrope", sans-serif;

}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--navy);
    color:white;
    font-family:var(--sans);
    overflow-x:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   GRAIN
========================================================= */

body:before{

    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:9999;

    opacity:.045;

    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

}


/* =========================================================
   NAV
========================================================= */

nav{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    z-index:100;

    padding:30px 5vw;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:13px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:32px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.14em;

}

.nav-book{

    padding:13px 21px;

    background:var(--gold);

    color:var(--navy);

    border-radius:100px;

    font-weight:800;

}


/* =========================================================
   HERO
========================================================= */

.hero{

    min-height:100vh;

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 70% 25%,
            #193e67 0%,
            var(--navy) 45%
        );

    display:flex;

    align-items:center;

    padding:150px 7vw 100px;

}


/* Giant red circle */

.hero:before{

    content:"";

    position:absolute;

    width:70vw;
    height:70vw;

    max-width:950px;
    max-height:950px;

    border-radius:50%;

    background:var(--red);

    right:-25vw;
    top:-20vw;

    opacity:.9;

}

.Marcmetkaart {
    margin-top:85px;
}

/* Gold circle */

.hero:after{

    content:"";

    position:absolute;

    width:330px;
    height:330px;

    border-radius:50%;

    background:var(--gold);

    left:-160px;
    bottom:-140px;

}


/* Hero copy */

.hero-content{

    position:relative;

    z-index:5;

    width:58%;

}

.hero-small{

    color:var(--gold);

    text-transform:uppercase;

    font-size:11px;

    font-weight:700;

    letter-spacing:.2em;

    margin-bottom:30px;

}

.hero h1{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(75px,10vw,155px);

    line-height:.84;

    letter-spacing:-.045em;

}

.hero h1 span{

    display:block;

}

.hero h1 .accent{

    color:var(--gold);

    font-style:italic;

}

.hero-intro{

    max-width:440px;

    margin-top:45px;

    font-size:16px;

    line-height:1.7;

    color:#d6dce6;

}


/* Hero photo */

.hero-photo{

    position:absolute;

    z-index:4;

    right:8vw;

    bottom:7vh;

    width:35vw;

    max-width:530px;

    transform:rotate(5deg);

}

.hero-photo img{

    aspect-ratio:3/4;

    object-fit:cover;

    border:12px solid var(--cream);

    box-shadow:0 35px 80px rgba(0,0,0,.4);

}

.hero-photo:before{

    content:"MARC MORELLI";

    position:absolute;

    z-index:2;

    right:-60px;

    bottom:-25px;

    color:var(--navy);

    background:var(--gold);

    padding:12px 18px;

    font-size:10px;

    font-weight:800;

    letter-spacing:.15em;

    transform:rotate(-5deg);

}


/* =========================================================
   INTRO
========================================================= */

.intro{

    position:relative;

    background:var(--cream);

    color:var(--navy);

    padding:150px 8vw;

    overflow:hidden;

}

.intro:after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:var(--red);

    right:-300px;
    top:80px;

}

.intro-grid{

    display:grid;

    grid-template-columns:1fr 2fr;

    gap:8vw;

    position:relative;

    z-index:2;

}

.intro-label{

    text-transform:uppercase;

    font-size:11px;

    font-weight:800;

    letter-spacing:.18em;

}

.intro h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(60px,8vw,125px);

    line-height:.86;

    letter-spacing:-.045em;

}

.intro h2 em{

    color:var(--red);

}

.intro-copy{

    max-width:560px;

    margin-top:45px;

}

.intro-copy p{

    font-size:19px;

    line-height:1.7;

}

.intro-copy p+p{

    margin-top:25px;

}


/* =========================================================
   FULL WIDTH RED BAND
========================================================= */

.red-band{

    background:var(--red);

    color:white;

    padding:70px 6vw;

    overflow:hidden;

}

.red-band-inner{

    display:flex;

    align-items:center;

    gap:70px;

    white-space:nowrap;

    transform:rotate(-2deg) scale(1.05);

}

.red-band span{

    font-size:clamp(65px,9vw,145px);

    font-weight:800;

    line-height:.8;

    letter-spacing:-.07em;

}

.red-band .serif{

    font-family:var(--serif);

    font-weight:400;

    font-style:italic;

}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience{

    background:var(--navy2);

    padding:150px 7vw;

    position:relative;

}

.experience-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:90px;

}

.experience-title{

    max-width:850px;

}

.experience-title small{

    display:block;

    color:var(--gold);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.18em;

    margin-bottom:30px;

}

.experience-title h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(65px,8vw,130px);

    line-height:.84;

    letter-spacing:-.045em;

}

.experience-title h2 em{

    color:var(--pink);

}

.experience-number{

    font-size:12px;

    color:#8190a5;

}


/* Visual composition */

.experience-stage{

    position:relative;

    min-height:650px;

}

.experience-main{

    width:63%;

    margin-left:12%;

    position:relative;

    z-index:2;

}

.experience-main img{

    height:600px;

    object-fit:cover;

}

.experience-main:after{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    /*background:var(--gold);*/

    left:-50px;
    bottom:-50px

    z-index:-1;

}


/* Floating photo */

.experience-small{

    position:absolute;

    width:33%;

    right:2%;

    top:90px;

    z-index:3;

    transform:rotate(7deg);

}

.experience-small img{

    aspect-ratio:4/5;

    object-fit:cover;

    border:9px solid var(--cream);

}


/* Floating note */

.experience-note{

    position:absolute;

    left:0;

    bottom:50px;

    width:300px;

    background:var(--gold);

    color:var(--navy);

    padding:30px;

    transform:rotate(-4deg);

    z-index:5;

}

.experience-note strong{

    display:block;

    font-family:var(--serif);

    font-size:30px;

    line-height:1;

    margin-bottom:15px;

}

.experience-note p{

    font-size:12px;

    line-height:1.6;

}


/* =========================================================
   MAGIC MOMENTS
========================================================= */

.moments{

    background:var(--paper);

    color:var(--navy);

    padding:150px 7vw;

}

.moments-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:100px;

}

.moments-header h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(65px,8vw,125px);

    line-height:.84;

    letter-spacing:-.045em;

}

.moments-header h2 em{

    color:var(--blue);

}

.moments-header p{

    max-width:280px;

    font-size:13px;

    line-height:1.6;

}


/* Cards */

.moments-grid{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:30px;

}

.moment{

    position:relative;

}

.moment:nth-child(2){

    margin-top:80px;

}

.moment:nth-child(3){

    margin-top:-30px;

}

.moment-image{

    position:relative;

    overflow:hidden;

}

.moment-image img{

    height:480px;

    object-fit:cover;

    transition:transform .8s ease;

}

.moment:hover img{

    transform:scale(1.06);

}

.moment-tag{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--gold);

    color:var(--navy);

    padding:9px 13px;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.1em;

}

.moment h3{

    font-family:var(--serif);

    font-weight:400;

    font-size:37px;

    line-height:.98;

    margin-top:25px;

}

.moment p{

    margin-top:15px;

    font-size:13px;

    line-height:1.6;

    color:#59616b;

    max-width:330px;

}
/* =========================================================
   SOCIAL PROOF
========================================================= */

.social-proof{

    background:var(--cream);
    color:var(--navy);

    padding:150px 7vw 190px;

    position:relative;
    overflow:hidden;

}


/* Rode cirkel rechtsboven */

.social-proof:before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:var(--red);

    right:-300px;
    top:-240px;

    opacity:.95;

}


/* Gouden cirkel links */

.social-proof:after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border:2px solid var(--gold);

    border-radius:50%;

    left:-185px;
    bottom:-170px;

}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.social-proof-header{

    position:relative;
    z-index:2;

    display:flex;

    justify-content:space-between;
    align-items:end;

    margin-bottom:95px;

}


.social-proof-header small{

    display:block;

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.2em;

    margin-bottom:30px;

}


.social-proof-header h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(70px,9vw,140px);

    line-height:.8;

    letter-spacing:-.05em;

}


.social-proof-header h2 em{

    color:var(--red);

}


.social-proof-header > p{

    max-width:330px;

    margin-bottom:5px;

    font-size:13px;

    line-height:1.7;

    color:#59616b;

}


/* ---------------------------------------------------------
   QUOTES
--------------------------------------------------------- */

.social-quotes{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    max-width:1120px;

    margin: 0 auto;

}


.social-quote{

    position:relative;

    min-height:360px;

    padding:55px 50px 45px;

    background:var(--cream);

    color:var(--navy);

    transform:rotate(-2deg);

    box-shadow:20px 30px 60px rgba(7,24,45,.18);

}


.social-quote:nth-child(2){

    margin-top:70px;

    transform:rotate(2deg);

    background:var(--cream);

}


/* Grote aanhalingstekens */

.social-quote-mark{

    position:absolute;

    top:12px;
    right:28px;

    font-family:var(--serif);

    font-size:100px;

    line-height:1;

    color:var(--gold);

}


.social-quote-text{

    position:relative;

    z-index:2;

    max-width:570px;

    font-family:var(--serif);

    font-size:clamp(29px,3vw,43px);

    line-height:.98;

    letter-spacing:-.02em;

}


/* Persoon */

.social-person{

    position:absolute;

    left:50px;
    bottom:38px;

    display:flex;

    align-items:center;

    gap:16px;

}


.social-person-photo{

    width:58px;
    height:58px;

    flex-shrink:0;

    border-radius:50%;

    overflow:hidden;

    background:#c7c7c7;

}


.social-person-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.social-person-info strong{

    display:block;

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.14em;

}


.social-person-info span{

    display:block;

    margin-top:6px;

    font-size:9px;

    color:#9ba7b6;

    text-transform:uppercase;

    letter-spacing:.1em;

}


/* ---------------------------------------------------------
   BEDRIJFSLOGO'S
--------------------------------------------------------- */

.social-companies{

    position:relative;

    z-index:2;

    margin-top:125px;

    padding-top:35px;

    border-top:1px solid rgba(7,24,45,.2);

}


.social-companies-label{

    margin-bottom:35px;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:#59616b;

}


.social-company-logos{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:25px;

    align-items:center;

}


.social-company-logo{

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px;

    opacity:.55;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.social-company-logo:hover{

    opacity:1;

    transform:translateY(-4px);

}


.social-company-logo img{

    width:auto;
    max-width:150px;
    max-height:45px;

    object-fit:contain;

    filter:grayscale(1);

}


/* ---------------------------------------------------------
   BLAUWE OVERGANG NAAR VOLGENDE SECTIE
--------------------------------------------------------- */

.social-proof-transition{

    position:absolute;

    z-index:5;

    left:0;
    bottom:-1px;

    width:100%;
    height:120px;

    background:var(--navy);

    clip-path:polygon(
        0 45%,
        100% 0,
        100% 100%,
        0 100%
    );

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media(max-width:700px){

    .social-proof{

        padding:100px 20px 160px;

    }


    .social-proof:before{

        width:300px;
        height:300px;

        right:-190px;
        top:-130px;

    }


    .social-proof-header{

        display:block;

        margin-bottom:65px;

    }


    .social-proof-header h2{

        font-size:clamp(65px,18vw,105px);

    }


    .social-proof-header > p{

        margin-top:35px;

        max-width:320px;

    }


    .social-quotes{

        grid-template-columns:1fr;

        gap:35px;

    }


    .social-quote,
    .social-quote:nth-child(2){

        margin-top:0;

        min-height:330px;

        padding:45px 30px 110px;

    }


    .social-quote-text{

        font-size:32px;

    }


    .social-person{

        left:30px;
        bottom:30px;

    }


    .social-companies{

        margin-top:100px;

    }


    .social-company-logos{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }


    .social-company-logo{

        height:65px;

    }


    .social-proof-transition{

        height:90px;

    }

}

/* =========================================================
   BIG BLUE MOMENT
========================================================= */

.blue-section{

    background:var(--navy);

    min-height:90vh;

    padding:130px 7vw;

    position:relative;

    overflow:hidden;

}

.blue-section:before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:var(--electric);

    right:-250px;
    top:8px;

}

.blue-copy{

    position:relative;

    z-index:2;

    max-width:1050px;

}

.blue-copy small{

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.2em;

    font-weight:800;

}

.blue-copy h2{

    font-family:var(--serif);

    font-size:clamp(80px,12vw,190px);

    line-height:.78;

    font-weight:400;

    letter-spacing:-.05em;

    margin-top:40px;

}

.blue-copy h2 em{

    color:var(--gold);

}


/* Quote */

.blue-quote{

    position:absolute;

    right:12vw;

    bottom:12vh;

    width:300px;

    background:var(--cream);

    color:var(--navy);

    padding:35px;

    transform:rotate(-6deg);

    z-index:4;

    box-shadow:20px 30px 60px rgba(0,0,0,.25);

}

.blue-quote p{

    font-family:var(--serif);

    font-size:28px;

    line-height:.98;

}

.blue-quote span{

    display:block;

    margin-top:20px;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.15em;

}


/* =========================================================
   MARC
========================================================= */

.marc{

    background:var(--cream);

    padding:150px 7vw;

    position:relative;

    overflow:hidden;

}

.marc-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:9vw;

    align-items:center;

}

.marc-image{

    position:relative;

}

.marc-image img{

    aspect-ratio:4/5;

    object-fit:cover;

}

.marc-image:after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border:2px solid var(--gold);

    right:-90px;
    bottom:-90px;

    border-radius:50%;

}

.marc-copy{

    position:relative;

    z-index:2;

    color:var(--navy);

}

.marc-copy small{

    display:block;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.2em;

    font-weight:800;

    margin-bottom:30px;

}

.marc-copy h2{

    font-family:var(--serif);

    font-size:clamp(70px,9vw,140px);

    font-weight:400;

    line-height:.8;

    letter-spacing:-.05em;

}

.marc-copy h2 em{

    color:var(--gold);

}

.marc-copy p{

    max-width:450px;

    margin-top:45px;

    font-size:16px;

    line-height:1.7;

}


/* =========================================================
   FOR WHOM
========================================================= */

.for-whom{

    background:var(--navy);

    padding:140px 7vw;

}

.for-whom-header{

    margin-bottom:80px;

}

.for-whom-header small{

    color:var(--gold);

    text-transform:uppercase;

    font-size:11px;

    letter-spacing:.2em;

    font-weight:800;

}

.for-whom-header h2{

    font-family:var(--serif);

    font-size:clamp(65px,8vw,125px);

    font-weight:400;

    line-height:.82;

    letter-spacing:-.05em;

    margin-top:30px;

}

.for-whom-header h2 em{

    color:var(--pink);

}

.whom-list{

    border-top:1px solid rgba(255,255,255,.2);

}

.whom-item{

    display:grid;

    grid-template-columns:80px 1fr 1fr;

    gap:40px;

    padding:35px 0;

    border-bottom:1px solid rgba(255,255,255,.2);

    align-items:center;

}

.whom-number{

    font-family:var(--serif);

    font-size:28px;

    color:var(--gold);

}

.whom-item h3{

    font-size:clamp(25px,3vw,43px);

    letter-spacing:-.04em;

}

.whom-item p{

    color:#9ba7b6;

    font-size:14px;

    line-height:1.6;

    max-width:480px;

}


/* =========================================================
   BOOKING
========================================================= */

.booking{

    background:var(--cream);

    color:var(--navy);

    min-height:100vh;

    padding:130px 7vw 80px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    position:relative;

    overflow:hidden;

}

.booking:before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    background:var(--red);

    right:-250px;
    bottom:-300px;

}

.booking-top{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-weight:800;

}

.booking h2{

    position:relative;

    z-index:2;

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(90px,13vw,210px);

    line-height:.76;

    letter-spacing:-.055em;

    max-width:1200px;

}

.booking h2 span{

    display:block;

    color:var(--red);

    font-style:italic;

}

.booking-bottom{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-top:100px;

}

.booking-copy{

    max-width:400px;

    font-size:15px;

    line-height:1.7;

}

.booking-button{

    display:inline-flex;

    align-items:center;

    gap:30px;

    background:var(--navy);

    color:white;

    padding:22px 30px;

    border-radius:100px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-weight:800;

    transition:.3s ease;

}

.booking-button:hover{

    background:var(--red);

    transform:translateY(-5px);

}

/* =========================================================
   CONTACT FORM
========================================================= */

.booking-form{

    width:100%;
    max-width:850px;

    margin-top:80px;

    position:relative;
    z-index:3;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px 30px;

}

.form-field{

    display:flex;

    flex-direction:column;

}

.form-field.full{

    grid-column:1 / -1;

}

.form-field label{

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.16em;

    font-weight:800;

    margin-bottom:9px;

}

.form-field label span{

    color:var(--red);

}

.form-field input,
.form-field textarea{

    width:100%;

    border:0;

    border-bottom:2px solid rgba(7,24,45,.25);

    background:transparent;

    color:var(--navy);

    font-family:var(--sans);

    font-size:15px;

    padding:13px 0;

    outline:none;

    border-radius:0;

    transition:border-color .25s ease;

}

.form-field input:focus,
.form-field textarea:focus{

    border-bottom-color:var(--red);

}

.form-field input::placeholder,
.form-field textarea::placeholder{

    color:#89909a;

}

.form-field textarea{

    min-height:130px;

    resize:vertical;

}


/* Datum + checkbox */

.date-row{

    display:flex;

    align-items:end;

    gap:25px;

}

.date-field{

    flex:1;

}

.date-option{

    display:flex;

    align-items:center;

    gap:9px;

    padding-bottom:14px;

    font-size:11px;

    line-height:1.4;

    color:#4d5661;

    cursor:pointer;

    white-space:nowrap;

}

.date-option input{

    width:17px;
    height:17px;

    accent-color:var(--red);

    cursor:pointer;

}


/* Disabled datum */

.form-field input:disabled{

    opacity:.35;

    cursor:not-allowed;

}


/* Submit */

.form-submit{

    margin-top:35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}

.form-note{

    max-width:340px;

    font-size:11px;

    line-height:1.6;

    color:#66707b;

}

.form-submit button{

    border:0;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    gap:30px;

    background:var(--navy);

    color:white;

    padding:22px 30px;

    border-radius:100px;

    font-family:var(--sans);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-weight:800;

    transition:.3s ease;

}

.form-submit button:hover{

    background:var(--red);

    transform:translateY(-5px);

}


/* ---------------------------------------------------------
   CONTACT FORM MOBILE
--------------------------------------------------------- */

@media(max-width:700px){

    .booking-form{

        margin-top:65px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .form-field.full{

        grid-column:auto;

    }

    .date-row{

        display:block;

    }

    .date-option{

        margin-top:15px;

        padding-bottom:0;

        white-space:normal;

    }

    .form-submit{

        display:block;

    }

    .form-note{

        max-width:100%;

    }

    .form-submit button{

        margin-top:30px;

        width:100%;

        justify-content:center;

    }

}
/* =========================================================
   FOOTER
========================================================= */

footer{

    background:var(--navy);

    padding:50px 7vw 30px;

}

.footer-top{

    display:flex;

    justify-content:space-between;

    align-items:start;

    padding-bottom:70px;

}

.footer-logo{

    font-size:15px;

    font-weight:800;

    letter-spacing:.15em;

}

.footer-links{

    display:flex;

    gap:30px;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.15em;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.15);

    padding-top:20px;

    display:flex;

    justify-content:space-between;

    color:#738094;

    font-size:10px;

}


/* =========================================================
   REVEAL
========================================================= */

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:
        opacity 1s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1);

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px) and (min-width:701px){

    .hero-content{
        width:60%;
    }

    .hero-photo{
        width:38vw;
        right:4vw;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    nav{

        position:absolute;

        padding:22px 20px;

    }

    .nav-links a:not(.nav-book){

        display:none;

    }

    .nav-book{

        padding:11px 15px;

        font-size:9px;

    }


    /* -----------------------------------------------------
       HERO MOBILE
    ----------------------------------------------------- */

    .hero{

        min-height:auto;

        display:block;

        padding:115px 20px 70px;

        overflow:hidden;

    }

    /*
       De rode cirkel blijft achter de compositie,
       maar wordt kleiner zodat hij niet over de tekst valt.
    */

    .hero:before{

        width:480px;
        height:480px;

        right:-300px;
        top:160px;

    }

    .hero:after{

        width:180px;
        height:180px;

        left:-100px;
        bottom:-80px;

    }

    .hero-content{

        width:100%;

        position:relative;

        z-index:5;

    }

    .hero-small{

        font-size:9px;

        line-height:1.5;

        max-width:230px;

        margin-bottom:24px;

    }

    .hero h1{

        font-size:clamp(65px,18vw,100px);

        line-height:.82;

        letter-spacing:-.04em;

        max-width:100%;

    }

    /*
       Bewust een nette mobiele regelverdeling.
    */

    .hero h1 span:nth-child(1){

        display:block;

    }

    .hero h1 span:nth-child(2){

        display:block;

    }

    .hero h1 span:nth-child(3){

        display:block;

    }

    .hero-intro{

        font-size:14px;

        line-height:1.65;

        max-width:320px;

        margin-top:30px;

        color:#dbe0e8;

    }


    /*
       Belangrijk:
       de foto is op mobiel NIET meer absolute.
       Hierdoor kan hij nooit meer achter de tekst vallen.
    */

    .hero-photo{

        position:relative;

        right:auto;

        bottom:auto;

        width:82%;

        max-width:none;

        margin:

            65px
            4% 
            10px
            auto;

        transform:rotate(4deg);

        z-index:6;

    }

    .hero-photo img{

        border-width:8px;

        box-shadow:
            0 25px 55px rgba(0,0,0,.45);

    }

    .hero-photo:before{

        right:-35px;

        bottom:-20px;

        padding:9px 12px;

        font-size:8px;

    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .intro{

        padding:100px 20px;

    }

    .intro:after{

        width:280px;
        height:280px;

        right:-190px;

        top:160px;

    }

    .intro-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .intro h2{

        font-size:clamp(60px,17vw,95px);

        line-height:.84;

    }

    .intro-copy{

        margin-top:35px;

    }

    .intro-copy p{

        font-size:16px;

    }


    /* -----------------------------------------------------
       RED BAND
    ----------------------------------------------------- */

    .red-band{

        padding:50px 20px;

    }

    .red-band-inner{

        gap:45px;

    }

    .red-band span{

        font-size:72px;

    }


    /* -----------------------------------------------------
       EXPERIENCE
    ----------------------------------------------------- */

    .experience{

        padding:100px 20px;

    }

    .experience-top{

        display:block;

        margin-bottom:60px;

    }

    .experience-number{

        margin-top:25px;

    }

    .experience-title h2{

        font-size:clamp(62px,17vw,95px);

    }

    .experience-stage{

        min-height:650px;

    }

    .experience-main{

        width:92%;

        margin-left:0;

    }

    .experience-main img{

        height:470px;

    }

    .experience-small{

        width:55%;

        right:0;

        top:260px;

    }

    .experience-small img{

        border-width:6px;

    }

    .experience-note{

        width:250px;

        left:5px;

        bottom:0;

        padding:24px;

    }

    .experience-note strong{

        font-size:26px;

    }


    /* -----------------------------------------------------
       MOMENTS
    ----------------------------------------------------- */

    .moments{

        padding:100px 20px;

    }

    .moments-header{

        display:block;

        margin-bottom:65px;

    }

    .moments-header h2{

        font-size:clamp(60px,17vw,95px);

    }

    .moments-header p{

        margin-top:30px;

    }

    .moments-grid{

        grid-template-columns:1fr;

    }

    .moment:nth-child(2),
    .moment:nth-child(3){

        margin-top:70px;

    }

    .moment-image img{

        height:430px;

    }


    /* -----------------------------------------------------
       BLUE
    ----------------------------------------------------- */

    .blue-section{

        min-height:800px;

        padding:100px 20px;

    }

    .blue-copy h2{

        font-size:clamp(72px,18vw,105px);

    }

    .blue-quote{

        right:20px;

        bottom:50px;

        width:260px;

        padding:28px;

    }

    .blue-quote p{

        font-size:25px;

    }


    /* -----------------------------------------------------
       MARC
    ----------------------------------------------------- */

    .marc{

        padding:100px 20px;

    }

    .marc-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .marc-copy h2{

        font-size:clamp(70px,19vw,110px);

    }


    /* -----------------------------------------------------
       FOR WHOM
    ----------------------------------------------------- */

    .for-whom{

        padding:100px 20px;

    }

    .for-whom-header h2{

        font-size:clamp(62px,17vw,100px);

    }

    .whom-item{

        grid-template-columns:45px 1fr;

        gap:20px;

    }

    .whom-item p{

        grid-column:2;

    }


    /* -----------------------------------------------------
       BOOKING
    ----------------------------------------------------- */

    .booking{

        min-height:800px;

        padding:100px 20px 60px;

    }

    .booking:before{

        width:400px;
        height:400px;

        right:-250px;
        bottom:-180px;

    }

    .booking h2{

        font-size:clamp(78px,20vw,120px);

        line-height:.76;

    }

    .booking-bottom{

        display:block;

        margin-top:80px;

    }

    .booking-button{

        margin-top:40px;

        padding:19px 23px;

    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    footer{

        padding:40px 20px 25px;

    }

    .footer-top{

        display:block;

        padding-bottom:50px;

    }

    .footer-links{

        margin-top:35px;

        flex-wrap:wrap;

        gap:20px;

    }

    .footer-bottom{

        display:block;

    }

    .footer-bottom span{

        display:block;

        margin-top:10px;

    }

}

/* =========================================================
   VIDEO'S
========================================================= */

.videos{

    background:var(--navy);

    color:white;

    padding:150px 7vw;

    position:relative;

    overflow:hidden;

}

.videos:before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:var(--red);

    right:-280px;
    top:-230px;

    opacity:.9;

}

.videos-header{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:90px;

}

.videos-header small{

    display:block;

    color:var(--gold);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.2em;

    margin-bottom:30px;

}

.videos-header h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(65px,8vw,125px);

    line-height:.84;

    letter-spacing:-.045em;

}

.videos-header h2 em{

    color:var(--pink);

}

.videos-header p{

    max-width:280px;

    font-size:13px;

    line-height:1.6;

    color:#9ba7b6;

}


/* Video grid */

.videos-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:30px;

}


/* Video card */

.video-card{

    display:block;

    position:relative;

    overflow:hidden;

    background:var(--navy2);

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease;

}

.video-card:nth-child(2){

    margin-top:70px;

}

.video-card:nth-child(3){

    margin-top:-25px;

}

.video-card:hover{

    transform:translateY(-12px) rotate(-1deg);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}


/* Thumbnail */

.video-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

}

.video-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .8s cubic-bezier(.16,1,.3,1);

}

.video-card:hover .video-image img{

    transform:scale(1.07);

}


/* Dark overlay */

.video-image:after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(7,24,45,.75),
            rgba(7,24,45,0) 60%
        );

}


/* Play button */

.video-play{

    position:absolute;

    z-index:3;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:82px;
    height:82px;

    border-radius:50%;

    background:var(--gold);

    color:var(--navy);

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:24px;

    padding-left:5px;

    transition:
        transform .4s ease,
        background .4s ease;

}

.video-card:hover .video-play{

    transform:translate(-50%,-50%) scale(1.12);

    background:var(--cream);

}


/* Number */

.video-number{

    position:absolute;

    z-index:4;

    top:18px;
    left:18px;

    color:white;

    font-size:10px;

    font-weight:800;

    letter-spacing:.15em;

}


/* Caption */

.video-caption{

    padding:25px 15px 35px;

}

.video-caption h3{

    font-family:var(--serif);

    font-weight:400;

    font-size:36px;

    line-height:.95;

}

.video-caption p{

    margin-top:12px;

    color:#9ba7b6;

    font-size:12px;

    line-height:1.6;

}


/* ---------------------------------------------------------
   VIDEO MOBILE
--------------------------------------------------------- */

@media(max-width:700px){

    .videos{

        padding:100px 20px;

    }

    .videos:before{

        width:300px;
        height:300px;

        right:-190px;
        top:-120px;

    }

    .videos-header{

        display:block;

        margin-bottom:60px;

    }

    .videos-header h2{

        font-size:clamp(60px,17vw,95px);

    }

    .videos-header p{

        margin-top:30px;

    }

    .videos-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .video-card:nth-child(2),
    .video-card:nth-child(3){

        margin-top:0;

    }

    .video-image{

        aspect-ratio:16/10;

    }

    .video-play{

        width:68px;
        height:68px;

        font-size:20px;

    }

    .video-caption{

        padding-bottom:20px;

    }

    .video-caption h3{

        font-size:32px;

    }

}
.form-message {
    margin-top: 24px;
    min-height: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    transition: opacity 0.3s ease;
}

.form-message.success {
    color: #e8c56d;
    background: var(--navy2);
    padding: 21px;
}

.form-message.error {
    color: #e83d47;
    background: var(--navy2);
    padding: 21px;
}

/* FAQ Sectie Styling in Marc Morelli Stijl */
.morelli-faq-section {
    background-color: #ffffff;
    color: #111111;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    padding: 100px 20px;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Grote schermen: links tekst, rechts FAQ */
@media (min-width: 768px) {
    .faq-container {
        flex-direction: row;
    }
    .faq-header {
        flex: 1;
        position: sticky;
        top: 40px;
        height: max-content;
    }
    .faq-list {
        flex: 2;
    }
}

/* Header linkerkant */
.faq-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
    display: block;
    margin-bottom: 10px;
}

.faq-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.faq-intro {
    font-size: 16px;
    color: #555555;
    max-width: 300px;
    line-height: 1.5;
}

/* Accordion lijst */
.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 25px 0;
}

/* Verwijder standaard pijltje in verschillende browsers */
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.faq-question h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding-right: 40px;
    flex: 1;
}

/* Nummering in de stijl van '01 / 03' uit de tekst */
.faq-number {
    font-size: 14px;
    font-weight: 500;
    color: #999999;
    width: 40px;
    display: inline-block;
}

/* Minimalistisch plus/min icoon via CSS */
.faq-icon {
    position: absolute;
    right: 0;
    width: 16px;
    height: 16px;
}
.faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    background-color: #111111;
    transition: transform 0.3s ease;
}
/* Horizontale lijn */
.faq-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}
/* Verticale lijn */
.faq-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 16px;
}

/* Wanneer geopend: roteer de verticale lijn om een 'min' te worden */
.faq-item[open] .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* Antwoord tekst */
.faq-answer {
    padding: 15px 0 0 40px;
    font-size: 16px;
    line-height: 1.6;
    color: #444444;
    animation: fadeIn 0.4s ease;
}

.faq-answer p {
    margin: 0;
}

/* Vloeiende overgang bij openen */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}