/* ============================================
   RECLAMEBUREAU MMX — Custom Website
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-snap-type:y proximity}
body{font-family:'Montserrat',sans-serif;background:#f7f6f2;overflow-x:hidden;color:#1a1a1a}

/* ═══ SECTIES ═══ */
.mmx-sect{
    scroll-snap-align:start;
    position:relative;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.bg-dark{background:#0a0a0a}
.bg-light{background:#f7f6f2}
.bg-gold{background:#eacb4d}

.sect-content{position:relative;z-index:3;padding:0 20%;max-width:60%}
.bg-dark .sect-content{color:#f7f6f2}
.bg-light .sect-content{color:#1a1a1a}
.bg-gold .sect-content{color:#1a1a1a}

.sect-content h1,.sect-content h2{
    font-weight:900;text-transform:uppercase;line-height:1;
    margin:0 0 1.25rem;font-size:clamp(2.2rem,5vw,3.2rem);
}
.hero-accent,.h-accent{display:block;font-weight:300;letter-spacing:.06em;color:#eacb4d}
.sect-content p{font-size:1rem;line-height:1.8;max-width:420px}
.bg-dark .sect-content p{color:rgba(247,246,242,.85)}
.bg-light .sect-content p{color:#555}
.bg-gold .sect-content p{color:rgba(0,0,0,.45)}

.text-right .sect-content{margin-left:auto}

/* Achtergrondtekst */
.sect-bg{
    position:absolute;top:50%;transform:translateY(-50%);
    font-size:clamp(3.5rem,8vw,6.5rem);font-weight:900;
    white-space:nowrap;text-transform:uppercase;letter-spacing:-.02em;
    line-height:.85;pointer-events:none;z-index:1;
}
.sect-bg-r{right:10%}
.sect-bg-l{left:10%}
.bg-light .sect-bg{color:rgba(0,0,0,.06)}
.bg-dark .sect-bg{color:rgba(255,255,255,.055)}

/* Balken */
.bar{position:absolute;width:10%;height:50%;z-index:2;will-change:transform}
.bar svg{width:100%;height:100%;display:block}

/* Page hero (compact, 33vh) */
.page-hero{height:33vh;min-height:260px}

/* Hero animaties */
.hero-label{
    font-size:.85rem;font-weight:500;letter-spacing:.25em;
    text-transform:uppercase;color:#eacb4d;margin-bottom:1.5rem;
    opacity:0;animation:fu .7s ease-out .6s forwards;
}
.hero-sub{opacity:0;animation:fu .7s ease-out 1s forwards}
.hero-title{opacity:0;animation:fu .7s ease-out .8s forwards}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Knoppen */
.mmx-btn{
    display:inline-block;padding:.75rem 1.8rem;
    font-family:'Montserrat',sans-serif;font-size:.65rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
    transition:all .3s;clip-path:polygon(0 0,100% 0,100% 100%,7% 100%);
}
.mmx-btn-gold{background:#eacb4d;color:#1a1a1a}
.mmx-btn-gold:hover{background:#d4b84a;transform:translateY(-2px)}
.mmx-btn-dark{background:#1a1a1a;color:#f7f6f2}
.mmx-btn-dark:hover{background:#333;transform:translateY(-2px)}

/* ═══ NAVIGATIE — Hero state ═══ */
.mmx-nav{position:fixed;z-index:100;transition:all .6s cubic-bezier(.76,0,.24,1)}

/* Default: menu rechts (homepage, diensten — balken rechts) */
.mmx-nav.nav-hero{
    top:2rem;right:calc(20% + 10% + 2rem);
    display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;
    background:none;padding:0;
}

/* Gespiegeld: menu links (over-mmx, contact — balken links) */
.bars-left .mmx-nav.nav-hero{
    right:auto;
    left:calc(20% + 10% + 2rem);
    align-items:flex-start;
}
.bars-left .mmx-nav.nav-hero .nav-link{text-align:left}

.mmx-nav.nav-hero .nav-logo{margin-bottom:1.5rem}
.mmx-nav.nav-hero .nav-logo svg{height:50px;fill:#f7f6f2;display:block}
.mmx-nav.nav-hero .nav-link{
    display:block;color:rgba(247,246,242,.5);font-size:.9rem;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
    padding:.5rem 0;transition:color .3s;text-align:right;
}
.mmx-nav.nav-hero .nav-link:hover,
.mmx-nav.nav-hero .nav-link.active{color:#f7f6f2}
.mmx-nav.nav-hero .nav-contact{
    margin-top:.8rem;padding:.65rem 1.8rem;background:#eacb4d;color:#1a1a1a;
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;clip-path:polygon(0 0,100% 0,100% 100%,8% 100%);transition:all .3s;
}
.mmx-nav.nav-hero .nav-contact:hover{background:#d4b84a}

/* ═══ NAVIGATIE — Sticky state ═══ */
.mmx-nav.nav-sticky{
    top:1.2rem;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:row;align-items:center;gap:.2rem;
    padding:.85rem 1.5rem .85rem 1.8rem;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* Donkere achtergrond → geel menu */
.mmx-nav.nav-sticky.nav-on-dark{background:rgba(234,203,77,.95)}
.mmx-nav.nav-sticky.nav-on-dark .nav-logo svg{height:32px;fill:#1a1a1a}
.mmx-nav.nav-sticky.nav-on-dark .nav-link{
    color:rgba(0,0,0,.5);font-size:.78rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;text-decoration:none;padding:.5rem 1rem;transition:color .3s;
}
.mmx-nav.nav-sticky.nav-on-dark .nav-link:hover,
.mmx-nav.nav-sticky.nav-on-dark .nav-link.active{color:#1a1a1a}
.mmx-nav.nav-sticky.nav-on-dark .nav-contact{
    padding:.55rem 1.4rem;background:#1a1a1a;color:#eacb4d;font-size:.72rem;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
    clip-path:polygon(0 0,100% 0,100% 100%,8% 100%);margin-left:.5rem;
}

/* Lichte achtergrond → zwart menu */
.mmx-nav.nav-sticky.nav-on-light{background:rgba(20,20,20,.92)}
.mmx-nav.nav-sticky.nav-on-light .nav-logo svg{height:32px;fill:#f7f6f2}
.mmx-nav.nav-sticky.nav-on-light .nav-link{
    color:rgba(247,246,242,.45);font-size:.78rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;text-decoration:none;padding:.5rem 1rem;transition:color .3s;
}
.mmx-nav.nav-sticky.nav-on-light .nav-link:hover,
.mmx-nav.nav-sticky.nav-on-light .nav-link.active{color:#f7f6f2}
.mmx-nav.nav-sticky.nav-on-light .nav-contact{
    padding:.55rem 1.4rem;background:#eacb4d;color:#1a1a1a;font-size:.72rem;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
    clip-path:polygon(0 0,100% 0,100% 100%,8% 100%);margin-left:.5rem;
}

/* ═══ FOOTER ═══ */
.mmx-footer{
    background:#0a0a0a;padding:3rem 10%;
    display:flex;align-items:center;justify-content:space-between;
}
.mmx-footer-logo svg{height:36px;fill:#f7f6f2}
.mmx-footer-info{display:flex;gap:2rem;font-size:.75rem;color:rgba(247,246,242,.6)}
.mmx-footer-info a{color:rgba(247,246,242,.8);text-decoration:none;transition:color .3s}
.mmx-footer-info a:hover{color:#eacb4d}
.mmx-footer-mid{font-size:.7rem;color:rgba(247,246,242,.4);letter-spacing:.05em}

/* ═══ PAGE TRANSITIONS ═══ */
#pageContent{
    position:relative;
    min-height:100vh;
}
.page-transitioning #pageContent{overflow:hidden}
.page-slide-out{
    animation:slideOut .5s cubic-bezier(.76,0,.24,1) forwards;
}
.page-slide-in{
    animation:slideIn .5s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes slideOut{
    from{transform:translateX(0);opacity:1}
    to{transform:translateX(-100vw);opacity:0}
}
@keyframes slideIn{
    from{transform:translateX(100vw);opacity:0}
    to{transform:translateX(0);opacity:1}
}

/* ═══ DIENSTEN SECTIES (uitgebreide content, sticky balk) ═══ */
.dienst-sectie{
    position:relative;z-index:3;
    padding:6rem 0;
}
.dienst-sectie-inner{
    padding:0 10%;
}
.dienst-sectie-header{
    margin-bottom:2.5rem;
}
.dienst-sectie-header h2{
    font-weight:900;text-transform:uppercase;line-height:1;
    margin:0 0 1.25rem;font-size:clamp(2rem,4vw,2.8rem);
}
.dienst-sectie-header p{
    font-size:.95rem;line-height:1.85;max-width:700px;
}
.bg-light .dienst-sectie-header p{color:#555}

/* Dienst items grid */
.dienst-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
}
.dienst-item{
    padding:1.5rem 1.8rem;
    border-left:3px solid #eacb4d;
    background:rgba(0,0,0,.03);
}
.dienst-item-dark{
    background:rgba(255,255,255,.05);
}
.dienst-item h3{
    font-family:'Montserrat',sans-serif;
    font-size:.78rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;margin-bottom:.5rem;color:inherit;
}
.dienst-item-dark h3{color:#f7f6f2}
.dienst-item p{
    font-size:.82rem;line-height:1.75;max-width:none;
}
.bg-light .dienst-item p{color:#666}
.dienst-item-dark p{color:rgba(247,246,242,.6)}

/* ═══ PORTFOLIO SECTIE ═══ */
.portfolio-section{position:relative;background:#f7f6f2;z-index:1}
.portfolio-bar-track{position:absolute;top:0;right:20%;width:10%;height:100%;z-index:1;pointer-events:none}
.portfolio-bar-sticky{position:sticky;top:0;width:100%;height:50vh}
.portfolio-bar-sticky svg{width:100%;height:100%;display:block}

.portfolio-intro{
    position:relative;z-index:3;padding:3rem 10% 1rem;
    max-width:700px;
}
.portfolio-intro p{font-size:.95rem;line-height:1.8;color:#555}

.portfolio-filter{position:relative;z-index:5;padding:1rem 10% 2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.filter-btn{
    padding:.5rem 1.2rem;font-family:'Montserrat',sans-serif;font-size:.7rem;
    font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    border:none;cursor:pointer;background:transparent;color:#999;transition:all .3s;
}
.filter-btn:hover{color:#1a1a1a}
.filter-btn.active{background:#1a1a1a;color:#f7f6f2;clip-path:polygon(0 0,100% 0,100% 100%,8% 100%)}

.portfolio-grid{position:relative;z-index:3;padding:0 10% 4rem;columns:3;column-gap:1.5rem}
.portfolio-card{break-inside:avoid;margin-bottom:1.5rem;position:relative;cursor:pointer;overflow:hidden}
.portfolio-card:hover .card-img{transform:scale(1.03);filter:grayscale(0)}
.portfolio-card:hover .card-overlay{opacity:1}
.card-img{width:100%;display:block;object-fit:cover;filter:grayscale(1);transition:transform .5s cubic-bezier(.76,0,.24,1),filter .5s ease}
.card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,transparent 100%);
    opacity:0;transition:opacity .4s;
    display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;
}
.card-title{font-size:1rem;font-weight:900;text-transform:uppercase;color:#f7f6f2;margin-bottom:.3rem}
.card-cat{font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#eacb4d}

/* ═══ LIGHTBOX ═══ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.95);display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lightbox.open{display:flex;opacity:1}
.lightbox-close{position:absolute;top:2rem;right:2rem;color:#f7f6f2;font-size:1.5rem;cursor:pointer;font-weight:300;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:color .3s;z-index:10}
.lightbox-close:hover{color:#eacb4d}
.lightbox-header{position:absolute;top:2rem;left:2rem;z-index:10}
.lightbox-title{font-size:1.2rem;font-weight:900;text-transform:uppercase;color:#f7f6f2}
.lightbox-cat{font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#eacb4d;margin-top:.3rem}
.lightbox-desc{font-size:.85rem;color:rgba(247,246,242,.6);margin-top:.5rem;max-width:400px;line-height:1.6}
.lightbox-gallery{display:flex;align-items:center;justify-content:center;width:70vw;max-width:900px;height:65vh}
#lbImage{width:100%;height:100%;object-fit:contain}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
    .portfolio-grid{columns:2}
    .dienst-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .mmx-nav.nav-hero{top:1.2rem;right:5%;gap:.2rem}
    .bars-left .mmx-nav.nav-hero{right:auto;left:5%}
    .mmx-nav.nav-hero .nav-link,
    .mmx-nav.nav-hero .nav-contact{display:none}
    .mmx-nav.nav-hero .nav-logo svg{height:36px}
    .mmx-nav.nav-sticky{left:5%;right:5%;transform:none;top:.8rem}
    .mmx-sect{height:auto;min-height:100vh;padding:5rem 0 4rem}
    html{scroll-snap-type:none}
    .sect-content{max-width:100%!important;padding:0 6%!important}
    .bar{opacity:.4!important;width:15%}
    .sect-bg{font-size:clamp(2rem,6vw,3.5rem)}
    .mmx-footer{flex-direction:column;gap:1.5rem;text-align:center;padding:2.5rem 6%}
    .mmx-footer-info{flex-direction:column;gap:.5rem}
    .portfolio-grid{columns:1;padding:0 6% 3rem}
    .portfolio-filter{padding:2rem 6% 1rem}
    .portfolio-intro{padding:2rem 6% 1rem}
    .portfolio-bar-track{right:10%;width:15%;opacity:.4}
    .dienst-grid{grid-template-columns:1fr}
    .dienst-sectie-inner{padding:0 6%!important}
    .page-contact .sect-content div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:2rem!important}
}