/* ================================
   ROOT & RESET
================================ */

:root {
    color-scheme: light only;

    --bg-cream: #f5efe8;
    --bg-beige: #e9dfd2;
    --bg-soft: #f8f4ef;

    --accent: #c96f4a;
    --accent-dark: #a95738;

    --sage: #8fa184;
    --sage-dark: #718367;
    --sage-light: #eef1eb;

    --text-dark: #3e3e3e;
    --text-light: #6f6f6f;

    --white: #ffffff;

    --radius: 16px;
    --shadow-soft: 0 10px 25px rgba(0,0,0,0.08);
    --shadow-strong: 0 20px 50px rgba(0,0,0,0.15);

    
    --cream:#f6f3ee;
    --beige:#f3eee7;
    --gold:#b89a67;
    --text:#2f2f2f;
    --text-light:#666;
    --white:#ffffff;

    --radius:4px;

    --destination-cream: #f4f1eb;
    --destination-warm-white: #faf9f6;
    --destination-text: #30302d;
    --destination-text-light: #66665f;
    --destination-gold: #b89a62;
    --destination-border: rgba(143,161,132,.28);


 
    

   
    

    
    




}



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


body {
    font-family: 'Lato', sans-serif;
    background: var(--bg-cream);
    color: var(--text-dark);
    line-height: 1.6;
}



/* ================================
   LAYOUT
================================ */

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.section {
    padding: 80px 0;
}

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

/* ================================
   TYPOGRAFIE
================================ */

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.2rem; margin-bottom: 30px; text-align: center; }
h3 { font-size: 1.4rem; }

p {
    color: var(--text-light);
    margin-bottom: 15px;
}

/* ================================
   BUTTON
================================ */

.btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--accent);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
}

.btn:hover {
    background: var(--accent-dark);
}

/* ================================
   HEADER
================================ */

.header-logo img,
.header-logo svg {
    /* max-width: clamp(80px, 20vw, 200px); */
    max-height:clamp(50px, 7vw, 85px);
    height: auto;
    display:block;
    transition:
      max-height .4s ease,
      transform .4s ease;
}

/* Smaller on scroll */

.site-header.scrolled .header-logo img,
.site-header.scrolled .header-logo svg {

    max-height:55px;
}

/* ================================
   MENU
================================ */

/* navbar standaard (transparant) */
.navbar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;

    background:transparent;
    transition:0.4s;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;

    /* start transparant */
    background-color: rgba(0,0,0,0);
    box-shadow: none;

    transition:
     padding .4s ease,
     background .4s ease,
     backdrop-filter .4s ease,
     box-shadow .4s ease;

}

.navbar.scrolled{

    background: var(--accent);
    backdrop-filter:blur(14px);
    padding:12px 40px;
    box-shadow:0 2px 10px rgba(0,0,0,0.3);
}



/* LOGO SHRINK */

.navbar.scrolled .header-logo img{

    max-height:55px;

    transform:translateY(-1px)
              scale(0.96);
}

.logo {
    color:white;
    font-size:22px;
    font-weight:bold;
}

.nav-links {
    list-style:none;
    display:flex;
    gap:30px;
    z-index: 1000;
}

.nav-links a {
    color: var(--white);
    text-decoration:none;
    display: inline-block;
    position: relative; 
}

/* lijn onder de link */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--white);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}

/* hover + actieve pagina */
.nav-links a:hover::after,
.nav-links a.active::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
}

.hamburger {
    display: none;
    font-size: 26px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}


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

.hero {
    /* Fullscreen */
    min-height: 100vh;
    min-height: 100dvh;

    background: url('../img/home_banner.jpg') center/cover no-repeat;
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    align-items: center;
    
    padding-top: 150px; /* bepaalt hoe hoog je content staat */
    text-align: center;
    color: white;
    position: relative;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
}

.hero-content {
    position: relative;
    max-width: 700px;
    animation: fadeUp 1s ease forwards;
}

.hero h1 {
    font-size: 3.2rem;
}

.hero p {
    color: #eee;
}

@media (hover: hover) and (pointer: fine) {
    .hero {
        background-attachment: fixed;
    }
}

/* ================================
   HOME - PORTFOLIO
================================ */

.portfolio {
    background: var(--bg-beige);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.portfolio-item{
    cursor:pointer;
    position:relative;
}

.portfolio-item img {
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius);
    transition: 0.3s;
}
/*
.portfolio-item img:hover {
    transform: scale(1.04);
}
*/
.portfolio-item::after{
    content:"+";
    position:absolute;
    top:50%;
    left:50%;
    transform:
        translate(-50%, -50%);
    width:70px;
    height:70px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(6px);
    color:white;
    font-size:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:
        opacity .4s ease,
        transform .4s ease;
    pointer-events:none;
}

.portfolio-item:hover::after{
    opacity:1;
    transform:
        translate(-50%, -50%)
        scale(1.05);
}

.center{
    display:flex;
    justify-content:center;
    margin-top:80px;
}

/* =================================
   LIGHTBOX
================================= */

.lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.94);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .4s ease,
        visibility .4s ease;
    z-index:999999;
}

/* ACTIVE */

.lightbox.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* IMAGE */

.lightbox-image{
    max-width:90vw;
    max-height:88vh;
    object-fit:contain;
    display:block;
    transform:scale(.96);
    transition:transform .5s ease;
    box-shadow:
        0 20px 80px rgba(0,0,0,0.45);
}

/* IMAGE ACTIVE */

.lightbox.active .lightbox-image{

    transform:scale(1);
}

/* =================================
   CLOSE BUTTON
================================= */

.lightbox-close{
    position:absolute;
    top:24px;
    right:34px;
    background:none;
    border:none;
    color:#fff;
    font-size:52px;
    line-height:1;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:
        opacity .3s ease,
        visibility .3s ease;
    z-index:3;
}

/* SHOW */

.lightbox.active .lightbox-close{
    opacity:1;
    visibility:visible;
}
/* HOVER */

.lightbox-close:hover{
    opacity:.7;
}

/* =================================
   NAVIGATION
================================= */

.lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#fff;
    font-size:54px;
    cursor:pointer;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:
        opacity .3s ease,
        transform .3s ease;
    z-index:3;
}

/* SHOW */

.lightbox.active .lightbox-nav{
    opacity:1;
    visibility:visible;
}

/* HOVER */

.lightbox-nav:hover{
    opacity:.7;
    transform:
        translateY(-50%)
        scale(1.08);
}

/* POSITIONS */

.lightbox-nav.prev{
    left:24px;
}

.lightbox-nav.next{
    right:24px;
}

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

@media(max-width:768px){

    .lightbox-image{
        max-width:94vw;
        max-height:82vh;
    }

    .lightbox-close{
        top:18px;
        right:20px;
        font-size:42px;
    }

    .lightbox-nav{
        font-size:38px;
        padding:12px;
    }

    .lightbox-nav.prev{
        left:8px;
    }

    .lightbox-nav.next{
        right:8px;
    }

}
/* ================================
   OVER Mij / INTRO (SAMENGEVOEGD)
================================ */

.about {
    background: var(--bg-soft);
}

.about-header{
    text-align:center;
    max-width:850px;
    margin:0 auto 70px;
}

.about-lead{
    margin-top:20px;
    font-size:20px;
    color:#777;
}

.about-content{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    min-height:700px;
}

.about-portrait{
    width:420px;
    margin:0 auto 80px;
    position:relative;
}

.about-portrait img{
    width:100%;
    display:block;
    border-radius:2px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.12);
}

.about-portrait::before{
    content:"";
    position:absolute;
    inset:-25px;
    border:1px solid rgba(185,158,125,.35);
    z-index:-1;
}

.about img {
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius: var(--radius);
    display:block;
    box-shadow:
        0 20px 60px rgba(0,0,0,.08);
    
}

.about-image{
    position:absolute;
    left:0;
    top:0;
    width:380px;
    z-index:1;
}

.about-image img{
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:var(--radius);
    display:block;
    box-shadow:
        0 25px 70px rgba(0,0,0,.10);
}


/* Editorial frame */

.about-image::after{
    content:"";
    position:absolute;
    top:25px;
    left:25px;
    width:100%;
    height:100%;
    border:1px solid rgba(184,154,120,.35);
    z-index:-1;
}

.about-intro{
    background:#fff;
    padding:40px 50px;
    margin-bottom:35px;
    box-shadow:
        0 15px 40px rgba(0,0,0,.04);
    border-radius:var(--radius);
    line-height:2;
}

.about ul {
    list-style: none;
}

.about li {
    margin-bottom: 10px;
    padding-left: 18px;
    position: relative;
}

.about li::before {
    content: "•";
    color: var(--accent);
    position: absolute;
    left: 0;
}

.about-highlights{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:100px;
}

.about-card{
    background:#faf8f5;
    padding:45px;
    text-align:center;
    border-radius:2px;
    transition:.4s ease;
}

.about-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.06);
}

.about-text{
    position:relative;
    margin-left:260px;
    z-index:2;
}

.about-card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 15px 35px rgba(0,0,0,.06);
}

.about-card h3{
    font-family:
        'Playfair Display',
        serif;
    margin-bottom:12px;
}

.about-story{
    background:#fff;
    padding:50px;
    border-radius:var(--radius);
    box-shadow:
        0 15px 40px rgba(0,0,0,.04);
    max-width:780px;
    margin:0 auto;
    text-align:left;
}


.about-story p{
    font-size:18px;
    font-family:'Playfair Display',serif;
    line-height:2;
    margin-bottom:30px;
}

.about-story p:first-child{
    font-size:36px;
    font-family:'Playfair Display',serif;
    color:var(--accent);
}

.about-signature{
    font-style:italic;
    color:#8f7659;
    font-size:1.05rem;
}

.about-footer{
    text-align:center;
    margin-top:80px;
}

.about-cta{
    text-align:center;
    margin-top:80px;
}

@media(max-width:900px){

    .about-portrait{
        width:280px;
    }

    .about-highlights{
        grid-template-columns:1fr;
    }

    .about-story{
        padding:0 20px;
    }
}


/* ================================
   PROCESS
================================ */

.process{
    text-align:center;
}

/* ================================
   OPTIONAL STEPS
================================ */

.steps{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.step{
    flex:1;
    min-width:120px;
    font-weight:600;
}

/* ================================
   GRID WRAPPER
================================ */

.process-grid{
    width:100%;
}

/* ================================
   IMAGE GRID
================================ */

.process-images{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    width:100%;
    max-width:1100px;
    margin:70px auto 0;
}

/* ================================
   CARD
================================ */

.process-card{
    position:relative;
    aspect-ratio:1 / 1;
    perspective:1400px;
    cursor:pointer;
    overflow:hidden;
}

/* ================================
   INNER
================================ */

.process-card-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .9s cubic-bezier(.22,.61,.36,1);
    transform-style:preserve-3d;
}

/* FLIPPED */

.process-card.flipped .process-card-inner{
    transform:rotateY(180deg);
}

/* ================================
   FRONT + BACK
================================ */

.process-card-front,
.process-card-back{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius:var(--radius);
}

/* ================================
   FRONT
================================ */

.process-card-front{
    background:#eee;
}

/* IMAGE */

.process-card-front img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:var(--radius);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.04);
    transition:
        transform .8s ease,
        filter .8s ease;
}

/* HOVER EFFECT */
/* FIXED: image zooms INSIDE the tile */

.process-card:hover .process-card-front img{

    transform:scale(1.05);

    filter:brightness(1.02);
}

/* ================================
   BACK
================================ */

.process-card-back{
    position:relative;
    background:#f8f4ef;
    color:#111;
    transform:rotateY(180deg);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
    box-sizing:border-box;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.04);
}

/* =================================
   BACKGROUND IMAGE
================================= */

.process-card-back::before{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0.08;
    transform:scale(1.08);
    z-index:0;
}

/* 01 */
.process-card:nth-child(1) .process-card-back::before{
    background-image:url('../img/werkwijze_01a.png');
}

/* 02 */
.process-card:nth-child(2) .process-card-back::before{
    background-image:url('../img/werkwijze_02a.png');
}

/* 03 */
.process-card:nth-child(3) .process-card-back::before{
    background-image:url('../img/werkwijze_03a.png');
}

/* 04 */
.process-card:nth-child(4) .process-card-back::before{
    background-image:url('../img/werkwijze_04a.png');
}

/* 05 */
.process-card:nth-child(5) .process-card-back::before{
    background-image:url('../img/werkwijze_05a.png');
}

/* 06 */
.process-card:nth-child(6) .process-card-back::before{
    background-image:url('../img/werkwijze_06a.png');
}

/* CONTENT ABOVE IMAGE */

.process-card-back span,
.process-card-back h3,
.process-card-back p{
    position:relative;
    z-index:2;
}

/* NUMBER */

.process-card-back span{
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:20px;
    color:#999;
}

/* TITLE */

.process-card-back h3{
    font-size:28px;
    margin-bottom:20px;
    font-family:'Playfair Display', serif;
}

/* TEXT */

.process-card-back p{
    font-size:15px;
    line-height:1.8;
    color:#666;
}

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

@media(max-width:768px){
    .process-images{
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
        margin-top:40px;
    }
    .process-card-back{
        padding:24px;
    }
    .process-card-back h3{
        font-size:20px;
    }
    .process-card-back p{
        font-size:13px;
    }

}

/* ==========================================
   PRICING
========================================== */

.pricing {
    padding: 80px 0 40px;
    background: var(--bg-soft);
    text-align: center;
}

.pricing h2{
    margin-bottom:30px;
}

.pricing-intro{
    max-width:900px;
    margin:0 auto 50px;
    line-height:1.9;
    color:var(--text-light);
}

/* ==========================================
   STANDAARD INBEGREPEN
========================================== */

.pricing-included{
    margin-bottom:60px;
}

.pricing-included h3{
    margin-bottom:20px;
}

.pricing-included ul{
    list-style:none;
    padding:0;
    margin:0;
}

.pricing-included li{
    margin:10px 0;
    line-height:1.8;
}

.pricing-included li::before{
    content:"✓";
    color:var(--accent);
    font-weight:bold;
    margin-right:8px;
}

/* ==========================================
   CARDS
========================================== */

.pricing-cards{

    display:flex;

    justify-content:center;

    align-items:stretch;

    flex-wrap:wrap;

    gap:35px;

}

/* ==========================================
   BASIS KAART
========================================== */

.price-card{
    width:320px;
    min-height:620px;
    background:#f3ebe5;
    border-radius:18px;
    padding:40px 35px;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-soft);
    transition:all .35s ease;
    border:1px solid rgba(0,0,0,.05);
}

.price-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

/* ==========================================
   FEATURED
========================================== */

.price-card.featured{
    background:#e8dcd2;
    border:2px solid var(--accent);
    transform:translateY(-18px) scale(1.04);
    box-shadow:0 25px 60px rgba(0,0,0,.22);
    z-index:2;

}

.price-card.featured:hover{
    transform:translateY(-24px) scale(1.04);
}

/* ==========================================
   BADGE
========================================== */

.badge{
    display:inline-block;
    margin-bottom:15px;
    padding:6px 16px;
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
}

/* ==========================================
   TEKST
========================================== */

.price-card h3{
    margin-bottom:12px;

}

.package-title{
    font-size:1.1rem;
    line-height:1.6;
    color:var(--text-light);
    margin-bottom:25px;

}

.price{

    font-size:2.3rem;

    font-weight:700;

    margin:15px 0;

}

.hours{

    font-size:1rem;

    font-weight:600;

    margin-bottom:25px;

}

.package-text{

    line-height:1.8;

    margin-bottom:30px;

    color:var(--text-light);

}

/* ==========================================
   LIJST
========================================== */

.package-list{

    list-style:none;

    padding:0;

    margin-top:auto;

}

.package-list li{

    margin:14px 0;

    line-height:1.7;

}

.package-list li::before{

    content:"✓";

    color:var(--accent);

    font-weight:bold;

    margin-right:8px;

}

/* ==========================================
   SIGNATURE TEKST
========================================== */

.signature-text{

    margin-top:30px;

    line-height:1.8;

    font-style:italic;

}

/* ==========================================
   EXTRA UUR
========================================== */

.pricing-extra{

    margin-top:80px;

}

.pricing-extra h3{

    margin-bottom:20px;

}

.extra-card{

    max-width:450px;

    margin:0 auto;

    padding:30px;

    border-radius:18px;

    background:#f3ebe5;

    box-shadow:var(--shadow-soft);

}

.extra-card strong{

    display:block;

    font-size:1.2rem;

    margin-bottom:10px;

}

.price-small{

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:20px;

}

/* ==========================================
   BUTTON
========================================== */

.pricing-footer{

    margin-top:60px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1024px){

    .pricing-cards{

        gap:25px;

    }

    .price-card{

        width:300px;

    }

}

@media (max-width:768px){

    .pricing{

        padding:60px 0;

    }

    .pricing-cards{

        flex-direction:column;

        align-items:center;

    }

    .price-card,

    .price-card.featured{

        width:100%;

        max-width:420px;

        min-height:auto;

        transform:none;

    }

    .price-card:hover,

    .price-card.featured:hover{

        transform:translateY(-6px);

    }

}

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

.contact {
    text-align: center;
}

.contact-form {
    max-width: 700px;
    margin: auto;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

input, textarea {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* ================================
   ANIMATIES
================================ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 992px) {

    .about-content {
        grid-template-columns: 1fr;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps {
        flex-direction: column;
        gap: 15px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

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

.bruiloft{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:180px 0 120px;
    background: url('../img/bruiloft.png') center center/cover no-repeat;
    overflow:hidden;
}

.bruiloft-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(20,18,16,.45),
            rgba(20,18,16,.55)
        );
}

/* ==========================================
   CONTENT
========================================== */

.bruiloft-content{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
}

/* ==========================================
   GLASS CARD
========================================== */

.bruiloft-hero-card{
    width:min(92%, 1050px);
    padding:90px 90px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
        0 30px 80px rgba(0,0,0,.25);
    text-align:center;
    color:#fff;
}

/* ==========================================
   KICKER
========================================== */

.bruiloft-hero-kicker{
    display:block;
    margin-bottom:35px;
    letter-spacing:7px;
    text-transform:uppercase;
    font-size:13px;
    color:#D6B16A;
}

/* ==========================================
   TITEL
========================================== */

.bruiloft-hero-card h1{

    font-family:'Playfair Display',serif;

    font-weight:400;

    font-size:clamp(4rem,7vw,6.8rem);

    line-height:.95;

    margin:0 auto 45px;

    max-width:900px;
}

/* ==========================================
   QUOTE
========================================== */

.bruiloft-hero-quote{

    font-family:'Playfair Display',serif;

    font-style:italic;

    font-size:clamp(2rem,3vw,3rem);

    line-height:1.5;

    color:rgba(255,255,255,.96);

    max-width:900px;

    margin:0 auto 45px;
}

/* ==========================================
   DIVIDER
========================================== */

.bruiloft-hero-divider{

    width:120px;

    height:2px;

    background:#D6B16A;

    margin:0 auto 60px;
}

/* ==========================================
   TEKST
========================================== */

.bruiloft-hero-text{

    max-width:820px;

    margin:0 auto;

    text-align:left;
}

.bruiloft-hero-text p{

    color:rgba(255,255,255,.95);

    font-size:19px;

    line-height:2.1;

    margin-bottom:32px;
}

/* Eerste alinea iets groter */

.bruiloft-hero-text p:first-child{

    font-size:24px;

    line-height:1.8;

    font-family:'Playfair Display',serif;

    color:#fff;
}

/* ==========================================
   SLOTTEKST
========================================== */

.bruiloft-hero-ending{

    font-weight:600;

    color:#fff;
}

/* ==========================================
   VRAAG
========================================== */

.bruiloft-hero-question{

    margin-top:50px;

    text-align:center;

    font-family:'Playfair Display',serif;

    font-size:36px;

    color:#D6B16A;
}

/* ==========================================
   BUTTON
========================================== */

.bruiloft .btn{

    margin-top:60px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:991px){

    .bruiloft{

        padding:140px 0 80px;
    }

    .bruiloft-hero-card{

        width:95%;

        padding:60px 40px;
    }

    .bruiloft-hero-text{

        text-align:center;
    }

    .bruiloft-hero-text p{

        font-size:17px;

        line-height:1.9;
    }

    .bruiloft-hero-question{

        font-size:30px;
    }
}

@media (max-width:576px){

    .bruiloft-hero-card{

        padding:45px 25px;

        border-radius:20px;
    }

    .bruiloft-hero-card h1{

        font-size:3.2rem;
    }

    .bruiloft-hero-quote{

        font-size:1.8rem;
    }

    .bruiloft-hero-text p:first-child{

        font-size:20px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .bruiloft {
        background-attachment: fixed;
    }
}

/* ================================
   DESTINATION WEDDING
================================ */

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

.destinationwedding {

    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;

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

    text-align: center;

    padding:
        160px
        30px
        100px;

    background:
        url('../img/destinationwedding.png')
        center center /
        cover
        no-repeat;

    color: #fff;

    overflow: hidden;
}


.destinationwedding-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(20,25,20,.28) 0%,
            rgba(20,25,20,.38) 50%,
            rgba(20,25,20,.58) 100%
        );

    z-index: 1;
}


.destinationwedding-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;
}


.destination-kicker {

    display: block;

    margin-bottom: 25px;

    color: #d7dfd0;

    font-size: 12px;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.destinationwedding h1 {

    max-width: 850px;

    margin:
        0
        auto
        35px;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6.5rem
        );

    font-weight: 400;

    line-height: 1.04;

    letter-spacing: -2px;

    text-wrap: balance;
}


.destination-divider {

    width: 65px;

    height: 1px;

    margin: 0 auto 35px;

    background: var(--sage);
}


.destination-intro {

    max-width: 680px;

    margin: 0 auto;

    color: rgba(255,255,255,.92);

    font-size: 18px;

    line-height: 1.9;
}


.destination-scroll {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    margin-top: 55px;

    color: white;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.destination-scroll span {

    color: var(--sage);

    font-size: 22px;

    line-height: 1;

    animation:
        destinationScroll 2s
        ease-in-out
        infinite;
}


@keyframes destinationScroll {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }

}


/* =========================================================
   GENERAL
========================================================= */

.destination-section {

    position: relative;

    padding:
        130px
        30px;
}


.destination-narrow {

    max-width: 850px;

    margin: 0 auto;
}


.destination-section-kicker {

    display: block;

    margin-bottom: 22px;

    color: var(--sage-dark);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.destination-section h2 {

    max-width: 850px;

    margin:
        0 0 45px;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    font-weight: 400;

    line-height: 1.12;

    color: var(--destination-text);

    letter-spacing: -1px;
}


.destination-section p {

    max-width: 760px;

    margin:
        0 0 27px;

    color: var(--destination-text-light);

    font-size: 17px;

    line-height: 2;
}


.destination-section strong {

    color: var(--destination-text);

    font-weight: 500;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.destination-introduction {

    padding-top: 150px;

    background:
        var(--destination-warm-white);

    text-align: center;
}


.destination-introduction h2 {

    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
}


.destination-introduction p {

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   IMAGE SECTIONS
========================================================= */

.destination-image-section {

    padding:
        20px
        30px
        120px;

    background:
        var(--destination-warm-white);
}


.destination-image-section-alt {

    padding-top: 20px;

    padding-bottom: 130px;
}


.destination-image-placeholder {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e8e5df,
            #f3f0ea
        );

    border: 1px solid
        rgba(143,161,132,.18);
}


.destination-image-placeholder::before {

    content: "FOTO";

    position: absolute;

    top: 50%;
    left: 50%;

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

    color:
        rgba(48,49,46,.28);

    font-size: 10px;

    letter-spacing: 5px;
}


.destination-image-large {

    max-width: 1250px;

    margin: 0 auto;

    aspect-ratio: 16 / 8;
}


.destination-image-wide {

    max-width: 1100px;

    margin: 0 auto;

    aspect-ratio: 16 / 7;
}


.destination-image-portrait {

    aspect-ratio: 4 / 5;
}


/* =========================================================
   STORY GRID
========================================================= */

.destination-chapter {

    background:
        var(--destination-warm-white);
}


.destination-story-grid {

    display: grid;

    grid-template-columns:
        100px
        minmax(0, 820px);

    gap: 55px;

    max-width: 1000px;

    margin: 0 auto;
}


.destination-story-number {

    position: relative;

    padding-top: 10px;

    color: var(--sage);

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size: 42px;

    font-weight: 400;
}


.destination-story-number::after {

    content: "";

    position: absolute;

    top: 75px;
    left: 19px;

    width: 1px;

    height: calc(100% - 75px);

    background:
        linear-gradient(
            to bottom,
            var(--sage),
            rgba(143,161,132,0)
        );
}


.destination-story-content {

    padding-bottom: 20px;
}


/* =========================================================
   SAGE SECTIONS
========================================================= */

.destination-section-sage {

    background:
        var(--sage-light);
}


.destination-section-sage .destination-section-kicker {

    color:
        var(--sage-dark);
}


.destination-section-sage h2 {

    color:
        #30352f;
}


/* =========================================================
   LOCATION
========================================================= */

.destination-location {

    background:
        var(--destination-warm-white);

    padding-top: 150px;

    padding-bottom: 150px;
}


.destination-location-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .75fr);

    gap: 100px;

    align-items: center;
}


.destination-location-content h2 {

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4rem
        );
}


.destination-location-image {

    position: relative;
}


.destination-location-image::before {

    content: "";

    position: absolute;

    width: 70%;

    height: 70%;

    top: -25px;

    right: -25px;

    border-top:
        1px solid
        var(--sage);

    border-right:
        1px solid
        var(--sage);

    opacity: .6;

    pointer-events: none;
}


.destination-highlight {

    position: relative;

    margin-top: 45px !important;

    padding-left: 25px;

    color:
        var(--destination-text) !important;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size: 23px !important;

    line-height: 1.6 !important;
}


.destination-highlight::before {

    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;
    left: 0;

    width: 2px;

    background:
        var(--sage);
}


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

.destination-moments {

    display: grid;

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

    gap: 0;

    margin:
        55px
        0
        65px;
}


.destination-moment {

    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 15px;

    padding:
        25px
        20px;

    border-top:
        1px solid
        rgba(143,161,132,.35);
}


.destination-moment:nth-child(odd) {

    border-right:
        1px solid
        rgba(143,161,132,.35);
}


.destination-moment span {

    color:
        var(--sage-dark);

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size: 20px;
}


.destination-moment p {

    margin: 0;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   EMOTION SECTION
========================================================= */

.destination-emotion {

    background:
        var(--destination-warm-white);
}


.destination-emotion .destination-narrow {

    max-width: 820px;
}


/* =========================================================
   SERVICE SECTION
========================================================= */

.destination-service {

    background:
        var(--destination-cream);

    text-align: center;
}


.destination-service .destination-section-kicker {

    color:
        var(--sage-dark);
}


.destination-service h2 {

    margin-bottom: 45px;
}


.destination-service p {

    margin-left: auto;
    margin-right: auto;
}


.destination-final-line {

    margin-top: 45px !important;

    margin-bottom: 5px !important;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size: 32px !important;

    color:
        var(--destination-text) !important;
}


.destination-final-line + .destination-final-line {

    margin-top: 5px !important;

    color:
        var(--sage-dark) !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.destination-cta {

    position: relative;

    padding:
        150px
        30px;

    text-align: center;

    background:
        var(--destination-warm-white);

    overflow: hidden;
}


.destination-cta::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    top: -250px;
    left: -200px;

    border:
        1px solid
        rgba(143,161,132,.18);

    border-radius: 50%;
}


.destination-cta::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -300px;
    bottom: -350px;

    border:
        1px solid
        rgba(143,161,132,.18);

    border-radius: 50%;
}


.destination-cta .container {

    position: relative;

    z-index: 2;

    max-width: 850px;
}


.destination-cta h2 {

    margin:
        0
        auto
        35px;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    font-weight: 400;

    line-height: 1.1;

    color:
        var(--destination-text);
}


.destination-cta p {

    max-width: 720px;

    margin:
        0
        auto
        25px;

    color:
        var(--destination-text-light);

    font-size: 17px;

    line-height: 1.9;
}


.destination-cta h3 {

    margin:
        55px
        0
        35px;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;

    color:
        var(--destination-text);
}


/* =========================================================
   BUTTON
========================================================= */

.destination-btn {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding:
        15px
        32px;
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.destination-btn:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform:
        translateY(-2px);
    box-shadow:
        0 12px 30px
        rgba(80,90,75,.18);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .destination-location-grid {

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .destination-location-image {

        max-width: 600px;

        margin: 0 auto;

        width: 100%;
    }


    .destination-story-grid {

        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap: 35px;
    }

}


@media (max-width: 768px) {

    .destinationwedding {

        min-height: 90vh;

        padding:
            140px
            22px
            80px;

        background-attachment:
            scroll;
    }


    .destination-kicker {

        font-size: 10px;

        letter-spacing: 4px;
    }


    .destinationwedding h1 {

        font-size:
            clamp(
                2.7rem,
                12vw,
                4.2rem
            );

        letter-spacing:
            -1px;
    }


    .destination-intro {

        font-size: 16px;

        line-height: 1.8;
    }


    .destination-section {

        padding:
            90px
            22px;
    }


    .destination-introduction {

        padding-top: 100px;
    }


    .destination-section h2 {

        font-size:
            clamp(
                2.3rem,
                10vw,
                3.5rem
            );

        margin-bottom: 35px;
    }


    .destination-section p {

        font-size: 16px;

        line-height: 1.9;
    }


    .destination-image-section {

        padding:
            10px
            18px
            80px;
    }


    .destination-image-large {

        aspect-ratio:
            4 / 3;
    }


    .destination-image-wide {

        aspect-ratio:
            4 / 3;
    }


    .destination-story-grid {

        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .destination-story-number {

        padding-top: 0;

        font-size: 34px;
    }


    .destination-story-number::after {

        display: none;
    }


    .destination-location {

        padding-top: 90px;

        padding-bottom: 90px;
    }


    .destination-location-grid {

        gap: 50px;
    }


    .destination-location-image::before {

        right: -10px;

        top: -10px;
    }


    .destination-highlight {

        font-size: 21px !important;
    }


    .destination-moments {

        grid-template-columns: 1fr;

        margin:
            40px
            0
            50px;
    }


    .destination-moment {

        border-right: none !important;
    }


    .destination-cta {

        padding:
            100px
            22px;
    }


    .destination-cta h2 {

        font-size:
            clamp(
                2.6rem,
                11vw,
                4rem
            );
    }


    .destination-final-line {

        font-size:
            27px !important;
    }

}


@media (prefers-reduced-motion: reduce) {

    .destination-scroll span {

        animation: none;
    }

}

/* =================================
   PORTFOLIO
================================= */

.portfolio-hero{
    position:relative;
    min-height:55vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        url('../assets/img/portfolio_hero.jpg')
        center center / cover;
    color:white;
}

.portfolio-overlay{
    position:absolute;
    inset:0;
    background:
        rgba(0,0,0,.35);
}

.portfolio-content{
    position:relative;
    z-index:2;
}

.portfolio-kicker{
    display:block;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:15px;
    font-size:12px;
}

.portfolio-content h1{
    font-size:clamp(48px,7vw,90px);
    margin-bottom:20px;
}

.portfolio-gallery-section{
    padding:120px 0;
}

.portfolio-gallery{
    columns:3;
    column-gap:24px;
}

.portfolio-gallery-item{
    break-inside:avoid;
    margin-bottom:24px;
    overflow:hidden;
    cursor:pointer;
}

.portfolio-gallery-item img{
    width:100%;
    display:block;
    transition:
        transform .8s ease,
        filter .8s ease;
    border-radius: var(--radius);
}

.portfolio-gallery-item:hover img{
    transform:scale(1.03);
    filter:brightness(1.03);
}

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

.site-footer{
    background: linear-gradient(
        to top,
        #2b2b2b,
        #3a3a3a
    );
    color:#ddd;
    padding-top:70px;
    font-size:0.95rem;
}

/* grid */

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

/* titles */

.site-footer h3,
.site-footer h4{
    color:white;
    margin-bottom:15px;
    font-family:'Playfair Display',serif;
}

/* brand */

.footer-brand p{
    max-width:320px;
    line-height:1.7;
}

/* lists */

.footer-nav ul,
.footer-contact ul{
    list-style:none;
}

.footer-nav li,
.footer-contact li{
    margin-bottom:8px;
}

/* links */

.footer-nav a{
    color:#ddd;
    text-decoration:none;
    position:relative;
    transition:0.3s;
}

.footer-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-3px;
    width:100%;
    height:1px;
    background:var(--accent);

    transform:translateX(-50%) scaleX(0);
    transform-origin:center;

    transition:transform 0.3s ease;
}

.footer-nav a:hover::after{
    transform:translateX(-50%) scaleX(1);
}

.footer-nav a:hover{
    color:white;
}


/* social icons */

.social-icons{
    display:flex;
    gap:15px;
}

.social-icons a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,0.08);
    border-radius:50%;

    font-size:1.2rem;
    color:white;

    transition:0.3s ease;
}

.social-icons a:hover{
    background:var(--accent);
    transform:translateY(-3px);
}

/* bottom bar */

.footer-bottom{
    margin-top:50px;
    padding:20px 0;
    text-align:center;

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

    font-size:0.85rem;
    color:#bbb;
}

.footer-credit{
    margin-top:6px;
}

/* responsive */

@media (max-width:900px){

.footer-grid{
grid-template-columns:1fr 1fr;
gap:40px;
}
}
/* ==========================================
   OVER MIJ - ULTRA LUXURY EDITORIAL
========================================== */

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

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

.about-luxury-hero{
    height:90vh;
    background:url('/assets/img/about_hero.png.png')
    center center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.about-luxury-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

.about-luxury-content{
    position:relative;
    z-index:2;
    color:white;
}

.about-luxury-content h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(3rem,6vw,6rem);
    font-weight:400;
}

.about-kicker{
    text-transform:uppercase;
    letter-spacing:4px;
    color:white;
}

/* INTRO */

.about-luxury-intro{
    margin-top:-120px;
    position:relative;
    z-index:5;
}

.about-intro-wrapper{
    display:grid;
    grid-template-columns:350px 1fr;
    gap:70px;
    background:white;
    padding:60px;
}

.about-intro-photo{
    margin-top:-120px;
}

.about-intro-photo img{
    width:100%;
    border:12px solid white;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.about-intro-text h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    line-height:1.3;
}

.gold-line{
    width:60px;
    height:2px;
    background:var(--gold);
    margin:30px 0;
}

/* QUOTE */

.about-luxury-quote{
    padding:100px 0;
}

.about-luxury-quote blockquote{
    text-align:center;
    font-size:42px;
    font-style:italic;
    color:#444;
}

/* VALUES */

.about-values{
    padding:100px 0 170px;
}

.about-values i{
    font-size:34px;
    color:#c7a46a;
    margin-bottom:20px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px;
    text-align:center;
}

.value i{
    color:var(--gold);
    font-size:30px;
    margin-bottom:15px;
}

/* TIMELINE */

.timeline-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    margin-bottom:100px;
}

.timeline-row.reverse{
    direction:rtl;
}

.timeline-row.reverse > *{
    direction:ltr;
}

.timeline-image{
    background:#f4f4f4;
    min-height:320px;
    border-radius:20px;
    overflow:hidden;
}

.timeline-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.timeline-number{
    color:var(--gold);
    font-size:22px;
    display:block;
    margin-bottom:20px;
}

.timeline-content h3{
    font-family:'Playfair Display',serif;
    font-size:42px;
    margin-bottom:20px;
}

/* CTA */

.about-luxury-cta{
    text-align:center;
    padding:120px 0;
}

.about-luxury-cta h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
}

/* GALLERY */

.about-gallery-strip{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
    padding:0 30px 80px;
}

.about-gallery-strip img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}
/*
.overmij-hero{
    position:relative;
    min-height:85vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background: url('/assets/img/about_hero.png.png') center/cover no-repeat;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

.about-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.45)
        );
}

.about-hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    color:white;
}

.about-kicker{
    display:block;
    margin-bottom:20px;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:13px;
    color:rgba(255,255,255,.9);
}

.about-hero h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(3rem,6vw,6rem);
    font-weight:400;
    line-height:1.1;
    margin-bottom:25px;
}

.about-hero-subtitle{
    font-size:20px;
    line-height:1.8;
    max-width:700px;
    margin:auto;
    color:rgba(255,255,255,.95);
}
.about-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}



/* ==========================================
   INTRO
========================================== */
/*
.about-intro{

    background:white;
    margin-top:-120px;

    position:relative;
    z-index:5;
}

.about-intro-grid{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;

    align-items:center;
}

.about-portrait{

    position:relative;
}

.about-portrait img{

    width:100%;
    display:block;

    border:12px solid white;

    box-shadow:
    0 30px 80px rgba(0,0,0,.12);
}

.about-text-intro h2{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.2rem,4vw,3.5rem);

    line-height:1.2;

    margin-bottom:30px;
}

.about-text-intro p{

    color:var(--text-light);

    line-height:2;
    font-size:17px;
}

/* ==========================================
   QUOTE
========================================== */
/*
.about-quote{

    margin:120px auto;

    max-width:1100px;

    background:var(--cream);

    padding:70px;

    text-align:center;
}

.about-quote blockquote{

    font-family:'Playfair Display',serif;

    font-size:42px;

    line-height:1.4;

    color:var(--text);

    font-style:italic;
}

/* ==========================================
   VALUES
========================================== */
/*
.about-values{

    display:grid;

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

    gap:40px;

    margin-bottom:140px;
}

.value-item{

    text-align:center;
}

.value-icon{

    font-size:32px;

    color:var(--gold);

    margin-bottom:20px;
}

.value-item h3{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;
}

.value-item p{

    color:var(--text-light);
    line-height:1.8;
}

/* ==========================================
   STORY BLOCKS
========================================== */
/*
.story-section{

    margin-bottom:120px;
}

.story-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.story-row.reverse{

    direction:rtl;
}

.story-row.reverse > *{

    direction:ltr;
}

.story-image{

    overflow:hidden;
}

.story-image img{

    width:100%;
    display:block;

    transition:transform .8s ease;
}

.story-image:hover img{

    transform:scale(1.04);
}

.story-content span{

    display:block;

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:15px;
}

.story-content h2{

    font-family:'Playfair Display',serif;

    font-size:42px;

    margin-bottom:25px;
}

.story-content p{

    color:var(--text-light);

    line-height:2;
}

/* ==========================================
   FINAL CTA
========================================== */
/*
.about-cta{

    text-align:center;

    padding:120px 0;
}

.about-cta h2{

    font-family:'Playfair Display',serif;

    font-size:56px;

    margin-bottom:40px;
}

.about-cta .btn{

    margin-top:20px;
}

/* ==========================================
   GALLERY STRIP
========================================== */
/*
.about-gallery{

    display:grid;

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

    gap:20px;

    margin-top:80px;
}

.about-gallery img{

    width:100%;
    aspect-ratio:1/1;

    object-fit:cover;

    transition:.6s ease;
}

.about-gallery img:hover{

    transform:translateY(-8px);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1000px){

    .about-intro-grid{

        grid-template-columns:1fr;
        gap:50px;
    }

    .about-values{

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

    .story-row{

        grid-template-columns:1fr;
    }

    .story-row.reverse{

        direction:ltr;
    }

    .about-gallery{

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

@media(max-width:768px){

    .about-quote{

        padding:40px 25px;
    }

    .about-quote blockquote{

        font-size:28px;
    }

    .about-values{

        grid-template-columns:1fr;
    }

    .about-cta h2{

        font-size:38px;
    }
}



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

@media(max-width:900px){
    .portfolio-gallery{
        columns:2;
    }
}

@media(max-width:600px){
    .portfolio-gallery{
        columns:1;
    }
}

@media (max-width: 768px) {

    .process{
        padding:80px 0;
    }

    .process-images{
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
        margin-top:40px;
    }

    .pricing-cards {
        flex-direction: column;
        align-items: center;
    }

    .price-card.featured {
        transform: scale(1);
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }

    .price-card,
    .price-card.featured {
        transform: scale(1);
        opacity: 1;
    }

    .header-logo img{

        max-height:60px;
    }

    .navbar.scrolled .header-logo img{

        max-height:42px;

        transform:
            translateY(-1px)
            scale(0.96);
    }

    .navbar{
        padding:16px 20px;
    }

    .navbar.scrolled{
        padding:10px 20px;
    }
    
    .nav-links {
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;

        background-color: #c96f4a; /* zelfde kleur als navbar bij scroll */
        padding: 20px 0;

        display: none;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInUp 0.5s forwards;
    }

    .nav-links.active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { animation-delay: 0.2s; }
    .nav-links.active li:nth-child(3) { animation-delay: 0.3s; }
    .nav-links.active li:nth-child(4) { animation-delay: 0.4s; }
    .nav-links.active li:nth-child(5) { animation-delay: 0.5s; }
    .nav-links.active li:nth-child(6) { animation-delay: 0.6s; }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
}

    .nav-links a {
        color: white;
        font-size: 1.1rem;
        text-decoration: none;
        font-family: 'Playfair Display', serif;
    }

    .hamburger {
        display: block;
    }
}