/* =========================================================
   STYX Projectstoffering — website design system
   Single source of truth: STYX_Projecten_Stijlgids_definitief.html
   Tokens (kleur, type, spacing) zijn 1-op-1 overgenomen.
   ========================================================= */

:root{
  --petrol:#1F4B4D;
  --petrol-diep:#163839;
  --leisteen:#2C343A;
  --leisteen-diep:#22282D;
  --slate:#35434A;
  --turquoise:#6BA8AC;
  --turquoise-licht:#8FC2C4;
  --mist:#E4EDEC;
  --steen:#F3EFE8;
  --inkt:#222B30;
  --grijs:#5E6B6E;
  --grijs-licht:#B9C6C9;
  --lijn:#DFD9CE;
  --lijn-koel:#CFDEDC;
  --wit:#FFFFFF;
  --maxw:1180px;
  --nav-h:88px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Mulish',-apple-system,'Segoe UI',Calibri,Arial,sans-serif;
  background:var(--steen);color:var(--inkt);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.mark{font-family:'Space Grotesk',-apple-system,'Segoe UI',Arial,sans-serif;}
a{color:inherit;}
img{display:block;max-width:100%;height:auto;}
button{font:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}
main{display:block;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--petrol);color:var(--wit);padding:12px 18px;border-radius:8px;z-index:200;font-weight:700;text-decoration:none;transition:top .2s ease;}
.skip-link:focus{top:12px;}
:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px;border-radius:4px;}

.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--turquoise);margin-bottom:16px;}

/* ---------- Ruit / diamond (logo-motief) ---------- */
.diamond{display:block;flex-shrink:0;}
.diamond svg{display:block;width:100%;height:100%;}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;
  font-family:'Mulish';font-weight:800;font-size:.95rem;letter-spacing:.01em;
  padding:15px 28px;border-radius:11px;border:2px solid transparent;
  transition:transform .2s var(--ease), background .2s ease, border-color .2s ease, color .2s ease;
  min-height:44px;
}
.btn:hover{transform:translateY(-2px);}
.btn-accent{background:var(--turquoise);color:var(--petrol-diep);}
.btn-accent:hover{background:var(--turquoise-licht);}
.btn-primary{background:var(--petrol);color:var(--wit);}
.btn-primary:hover{background:var(--petrol-diep);}
.btn-ghost{background:transparent;color:var(--petrol);border-color:var(--petrol);}
.btn-ghost:hover{background:var(--petrol);color:var(--wit);}
.btn-ghost-light{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.45);}
.btn-ghost-light:hover{border-color:var(--wit);background:rgba(255,255,255,.08);}
.btn .arrow{transition:transform .2s ease;}
.btn:hover .arrow{transform:translateX(3px);}
.pill{background:var(--mist);color:var(--petrol);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:100px;display:inline-block;}

/* ================= NAV ================= */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;
  background:rgba(34,40,45,0);transition:background .35s ease, box-shadow .35s ease;
}
.nav.scrolled{
  background:rgba(22,28,31,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.nav.solid{background:var(--leisteen-diep);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;}
.brand .diamond{width:48px;height:48px;}
.brand .wm{line-height:.85;}
.brand .wm .s{font-family:'Space Grotesk';font-weight:700;letter-spacing:.07em;font-size:1.55rem;color:var(--wit);}
.brand .wm .p{font-family:'Space Grotesk';font-weight:600;letter-spacing:.26em;font-size:.64rem;text-transform:uppercase;color:var(--turquoise-licht);margin-top:4px;}
@media(max-width:480px){
  .brand{gap:12px;}
  .brand .diamond{width:42px;height:42px;}
  .brand .wm .s{font-size:1.32rem;}
  .brand .wm .p{font-size:.56rem;letter-spacing:.2em;}
}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  text-decoration:none;color:var(--mist);font-weight:600;font-size:.9rem;letter-spacing:.01em;white-space:nowrap;
  position:relative;padding:10px 12px;transition:color .2s ease;border-radius:8px;
}
.nav-links a:not(.nav-cta):not(.lang-toggle a)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--turquoise);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nav-links a:not(.nav-cta):hover{color:var(--wit);}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--wit);}
.nav-links a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1);}
.nav-cta{background:var(--turquoise);color:var(--petrol-diep)!important;font-weight:800;padding:11px 20px!important;border-radius:9px;transition:background .2s ease, transform .2s ease;}
.nav-cta:hover{background:var(--turquoise-licht);transform:translateY(-1px);}
.lang-toggle{display:flex;align-items:center;gap:2px;margin-left:6px;padding:3px;border:1px solid rgba(255,255,255,.22);border-radius:8px;}
.lang-toggle a{padding:6px 10px!important;font-size:.78rem;font-weight:800;letter-spacing:.04em;border-radius:6px;color:var(--grijs-licht);}
.lang-toggle a::after{display:none!important;}
.lang-toggle a[aria-current="true"]{background:var(--turquoise);color:var(--petrol-diep)!important;}
.lang-toggle a:hover{color:var(--wit);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;min-width:44px;min-height:44px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--wit);margin:5px 0;transition:transform .3s ease, opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:980px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(22,28,31,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:10px 0 20px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  }
  .nav-links.open{opacity:1;transform:none;pointer-events:auto;}
  .nav-links a{width:100%;padding:15px 32px!important;font-size:1.02rem;}
  .nav-links a:not(.nav-cta)::after{display:none;}
  .nav-cta{margin:12px 32px 0;text-align:center;border-radius:10px;}
  .lang-toggle{margin:14px 32px 0;align-self:flex-start;}
}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--leisteen-diep);overflow:hidden;}
.hero-bg{position:absolute;inset:-10% 0 -10% 0;z-index:0;width:100%;height:120%;background-color:var(--leisteen);object-fit:cover;will-change:transform;}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(22,28,31,.5) 0%, rgba(22,28,31,.42) 32%, rgba(22,28,31,.82) 76%, rgba(22,28,31,.96) 100%),
    linear-gradient(90deg, rgba(22,28,31,.7) 0%, rgba(22,28,31,.24) 48%, rgba(22,28,31,0) 78%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding:calc(var(--nav-h) + 40px) 0 clamp(64px,10vh,120px);}
.hero-inner .eyebrow,.hero-inner .hero-greeting,.hero-inner .lead{text-shadow:0 1px 24px rgba(16,20,22,.5);}
/* .hero-greeting is de H1: de begroeting zelf draagt de heading, met een
   niet-lege statische fallback-tekst (zie main.js/hero_greeting_fallback)
   zodat de pagina nooit een lege of pas-door-JS-gevulde H1 heeft. */
.hero .hero-greeting{color:var(--wit);font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.3rem,6vw,4.4rem);max-width:16ch;margin-bottom:18px;}
.hero .tagline{font-family:'Space Grotesk';font-style:italic;font-weight:600;font-size:clamp(1.1rem,2vw,1.45rem);color:var(--turquoise-licht);margin-bottom:22px;text-shadow:0 1px 24px rgba(16,20,22,.5);}
.hero .lead{color:#EAEFEF;font-size:clamp(1.06rem,1.5vw,1.28rem);max-width:54ch;margin-bottom:8px;}
.hero .hero-greeting .hi{display:block;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* Homepage hero — subtiele gefaseerde openingsanimatie (alleen bij eerste
   load van de homepage in deze browsersessie; zie main.js). Groet, "welkom
   bij STYX.", slogan en leadtekst worden kort na elkaar onthuld. Puur
   opacity/translateY, geen bounce/typewriter; blokkeert scrollen niet. */
.hero-intro .hi{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.hero-intro.intro-play .hi-1{opacity:1;transform:none;}
.hero-intro.intro-play .hi-2{opacity:1;transform:none;transition-delay:.5s;}
.hero-intro.intro-play .hi-3{opacity:1;transform:none;transition-delay:1s;}
.hero-intro.intro-play .hi-4{opacity:1;transform:none;transition-delay:1.4s;}
.hero-intro.intro-instant .hi{transition-duration:0s!important;transition-delay:0s!important;}
html.reduced-motion .hero-intro .hi{opacity:1;transform:none;transition:none;}
.hero-bands{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;height:10px;}
.hero-bands i{flex:1;}
.hero-bands i:nth-child(1){background:var(--turquoise);}
.hero-bands i:nth-child(2){background:var(--petrol);}
.hero-bands i:nth-child(3){background:var(--slate);}
.hero-bands i:nth-child(4){background:var(--steen);}
.scroll-hint{position:absolute;left:32px;bottom:30px;z-index:3;display:flex;align-items:center;gap:10px;color:var(--grijs-licht);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;}
.scroll-hint .track{width:1px;height:34px;background:linear-gradient(var(--turquoise),transparent);animation:drop 1.8s ease-in-out infinite;}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top;}50%{opacity:1;transform:scaleY(1);}}
@media(max-width:640px){.scroll-hint{display:none;}}

/* ================= PAGE HERO (subpagina's) ================= */
.page-hero{position:relative;padding:calc(var(--nav-h) + clamp(56px,9vh,100px)) 0 clamp(48px,8vh,84px);background-color:var(--leisteen-diep);color:var(--wit);overflow:hidden;}
.page-hero .ph-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.34;}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,28,31,.66),rgba(22,28,31,.92));}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero .eyebrow{color:var(--turquoise-licht);}
.page-hero h1{font-weight:700;letter-spacing:-.02em;line-height:1.08;font-size:clamp(2.1rem,5vw,3.3rem);max-width:20ch;margin-bottom:16px;}
.page-hero p{color:var(--grijs-licht);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:58ch;}
.page-hero .ph-bands{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;height:8px;}
.page-hero .ph-bands i{flex:1;}
.page-hero .ph-bands i:nth-child(1){background:var(--turquoise);}
.page-hero .ph-bands i:nth-child(2){background:var(--petrol);}
.page-hero .ph-bands i:nth-child(3){background:var(--slate);}
.page-hero .ph-bands i:nth-child(4){background:var(--steen);}

/* ================= INTRO / GREETING ================= */
/* Intro — merkverhaal als quote/anekdote. Bewust sober: geen logo, geen
   "STYX"-brandingmoment, geen extra beeld. Typografie ís het ontwerp. */
.intro{position:relative;padding:clamp(96px,15vh,170px) 0 0;background:var(--steen);overflow:hidden;}
/* Brede editorial quote: de aanhalingstekens staan letterlijk in de tekst
   (begin/eind van dezelfde alinea), geen los decoratief teken. */
.intro-quote{max-width:1080px;}
.intro-quote p{font-family:'Space Grotesk';font-style:italic;font-weight:500;
  color:var(--petrol);font-size:clamp(1.35rem,3.4vw,2.4rem);line-height:1.5;letter-spacing:-.008em;}
.intro-bands{display:flex;height:6px;margin-top:clamp(70px,10vh,110px);}
.intro-bands i{flex:1;}
.intro-bands i:nth-child(1){background:var(--turquoise);}
.intro-bands i:nth-child(2){background:var(--petrol);}
.intro-bands i:nth-child(3){background:var(--slate);}
.intro-bands i:nth-child(4){background:var(--leisteen-diep);}

/* ================= SECTIE-KOP ================= */
.section{padding:clamp(76px,11vh,128px) 0;}
.section.wit{background:var(--wit);}
.section.steen{background:var(--steen);}
.section.donker{background:var(--leisteen-diep);color:var(--wit);}
.sec-head{max-width:62ch;margin-bottom:48px;}
.sec-head .marker{width:28px;height:28px;margin-bottom:20px;}
.sec-head h2{color:var(--petrol);font-weight:700;letter-spacing:-.015em;line-height:1.12;font-size:clamp(1.85rem,3.8vw,2.6rem);margin-bottom:14px;}
.section.donker .sec-head h2{color:var(--wit);}
.sec-head p{color:var(--grijs);font-size:1.08rem;}
.section.donker .sec-head p{color:var(--grijs-licht);}
.section-cta{margin-top:40px;display:flex;justify-content:flex-start;}
.section-cta.center{justify-content:center;}

article h2, .content-page h2{color:var(--petrol);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.8rem);letter-spacing:-.01em;margin:2.4em 0 .6em;}
article h2:first-child, .content-page h2:first-child{margin-top:0;}
article p, .content-page p{color:var(--slate);font-size:1.06rem;margin-bottom:1.1em;max-width:70ch;}
article ul, .content-page ul{margin:0 0 1.2em 0;max-width:70ch;list-style:none;}
article ul li, .content-page ul li{position:relative;padding:8px 0 8px 26px;color:var(--slate);font-size:1.02rem;border-top:1px solid var(--lijn);}
article ul li:first-child, .content-page ul li:first-child{border-top:0;}
article ul li::before, .content-page ul li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;background:var(--turquoise);transform:rotate(45deg);}
article strong, .content-page strong{color:var(--petrol);font-weight:700;}

/* ================= AANBOD — sticky horizontal storytelling ================= */
.aanbod-pin{position:relative;background:var(--leisteen-diep);}
.aanbod-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.aanbod-head{position:relative;z-index:3;padding-top:calc(var(--nav-h) + 28px);}
.aanbod-head .eyebrow{color:var(--turquoise-licht);}
.aanbod-head h2{color:var(--wit);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:-.01em;margin-bottom:8px;}
.aanbod-head p{color:var(--grijs-licht);font-size:1rem;max-width:56ch;}
.aanbod-viewport{position:relative;flex:1;overflow:hidden;}
.aanbod-track{position:absolute;inset:0;display:flex;align-items:stretch;gap:28px;padding:0 32px;will-change:transform;}
/* Kaartstructuur: vaste beeldzone boven + tekstzone met vaste titel-hoogte
   (2 regels gereserveerd), zodat streepje/titel/omschrijving bij elke kaart
   op exact dezelfde hoogte staan, ongeacht 1- of 2-regelige titels. */
.aanbod-card{
  flex:0 0 auto;width:min(78vw,420px);max-height:min(58vh,460px);border-radius:20px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;color:var(--wit);isolation:isolate;
  border:1px solid rgba(255,255,255,.08);background:var(--leisteen);
}
.aanbod-card .ac-media{position:relative;height:min(30vh,220px);flex-shrink:0;overflow:hidden;background:var(--leisteen);}
.aanbod-card .ac-media .ac-bg,.aanbod-card .ac-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.aanbod-card .ac-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,28,31,0) 62%,rgba(22,28,31,.28) 100%);pointer-events:none;}
.aanbod-card .ac-body{position:relative;flex:1;display:flex;flex-direction:column;padding:22px 26px 26px;overflow:hidden;}
/* Watermerk = correcte afgeleide van het echte STYX-logo: de ruit bestaat
   uit 4 vierkante tegels (niet 4 driehoeken), gescheiden door voeglijnen
   van het middelpunt naar de vier tegelhoeken — exact zoals het logo in
   de header, hier enkel als lijntekening voor een subtiel watermerk. */
.aanbod-card .ac-body::before{content:"";position:absolute;right:-18%;bottom:-18%;width:60%;aspect-ratio:1;z-index:0;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,3 94,50 50,97 6,50' fill='none' stroke='%23FFFFFF' stroke-width='2.5'/%3E%3Cline x1='50' y1='50' x2='72' y2='26.5' stroke='%23FFFFFF' stroke-width='1'/%3E%3Cline x1='50' y1='50' x2='72' y2='73.5' stroke='%23FFFFFF' stroke-width='1'/%3E%3Cline x1='50' y1='50' x2='28' y2='73.5' stroke='%23FFFFFF' stroke-width='1'/%3E%3Cline x1='50' y1='50' x2='28' y2='26.5' stroke='%23FFFFFF' stroke-width='1'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;pointer-events:none;}
.aanbod-card .ac-num{position:relative;z-index:2;font-family:'Space Grotesk';font-weight:700;font-size:.82rem;letter-spacing:.14em;color:var(--turquoise-licht);margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.aanbod-card .ac-num .bar{height:2px;width:26px;background:var(--turquoise-licht);}
.aanbod-card h3{position:relative;z-index:2;font-weight:700;font-size:1.26rem;line-height:1.22;margin-bottom:10px;min-height:2.44em;flex-shrink:0;}
.aanbod-card p{position:relative;z-index:2;color:#C7D0D0;font-size:.93rem;line-height:1.55;max-width:36ch;}
.aanbod-progress{position:relative;z-index:3;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;justify-content:center;gap:8px;}
.aanbod-progress i{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .25s ease,width .25s ease;}
.aanbod-progress i.active{background:var(--turquoise);width:40px;}
.aanbod-hint{position:relative;z-index:3;text-align:center;color:var(--grijs-licht);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding-top:14px;opacity:.75;}

/* Mobiel / reduced motion: verticale kaartenlijst, geen pin */
@media(max-width:900px){
  .aanbod-pin{height:auto!important;}
  .aanbod-sticky{position:static;height:auto;display:block;padding:clamp(64px,10vh,96px) 0 60px;}
  .aanbod-head{padding-top:0;margin-bottom:34px;}
  .aanbod-viewport{overflow:visible;}
  .aanbod-track{position:static;display:flex;flex-direction:column;transform:none!important;padding:0 20px;gap:18px;}
  .aanbod-card{width:100%;max-height:none;}
  .aanbod-card .ac-media{height:auto;aspect-ratio:16/10;}
  .aanbod-card .ac-body{overflow:visible;}
  .aanbod-progress,.aanbod-hint{display:none;}
}
html.reduced-motion .aanbod-pin{height:auto!important;}
html.reduced-motion .aanbod-sticky{position:static;height:auto;display:block;padding:clamp(64px,10vh,96px) 0 60px;}
html.reduced-motion .aanbod-head{padding-top:0;margin-bottom:34px;}
html.reduced-motion .aanbod-viewport{overflow:visible;}
html.reduced-motion .aanbod-track{position:static;display:flex;flex-direction:column;transform:none!important;padding:0 20px;gap:18px;}
html.reduced-motion .aanbod-card{width:100%;max-height:none;}
html.reduced-motion .aanbod-card .ac-media{height:auto;aspect-ratio:16/10;}
html.reduced-motion .aanbod-card .ac-body{overflow:visible;}
html.reduced-motion .aanbod-progress,html.reduced-motion .aanbod-hint{display:none;}

/* ================= HOE WE WERKEN — sticky image storytelling ================= */
.werken{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start;}
@media(max-width:900px){.werken{grid-template-columns:1fr;gap:0;}}
.werken-media{position:sticky;top:calc(var(--nav-h) + 24px);border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--leisteen);isolation:isolate;}
@media(max-width:900px){.werken-media{position:static;aspect-ratio:16/10;margin-bottom:36px;}}
.werken-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;}
.werken-media img.active{opacity:1;position:relative;}
.werken-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,28,31,0) 45%,rgba(22,28,31,.78) 100%);pointer-events:none;}
.werken-media .wm-step{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;color:var(--wit);}
.werken-media .wm-step .no{font-family:'Space Grotesk';font-weight:700;font-size:.78rem;letter-spacing:.16em;color:var(--turquoise-licht);margin-bottom:6px;}
.werken-media .wm-step .wm-step-title{font-weight:700;font-family:'Space Grotesk';font-size:1.3rem;}
.werken-list{display:flex;flex-direction:column;}
.werken-step{padding:34px 0;border-top:1px solid var(--lijn);cursor:pointer;transition:opacity .25s ease;opacity:.5;}
.werken-step:first-child{border-top:none;}
.werken-step.active{opacity:1;}
.werken-step .no{font-family:'Space Grotesk';font-weight:700;font-size:.8rem;letter-spacing:.14em;color:var(--turquoise);display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.werken-step .no .bar{height:2px;width:26px;background:var(--turquoise);}
.werken-step h3{color:var(--petrol);font-weight:700;font-size:1.3rem;margin-bottom:8px;}
.werken-step p{color:var(--grijs);font-size:1rem;max-width:50ch;}

/* ================= PARALLAX / CTA-BAND ================= */
.parallax{position:relative;min-height:52vh;display:flex;align-items:center;background-color:var(--petrol-diep);background-attachment:fixed;background-size:cover;background-position:center;}
.parallax::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,28,31,.72),rgba(31,75,77,.66));}
.parallax .wrap{position:relative;z-index:1;}
.parallax-quote{max-width:22ch;}
.parallax-quote p{font-family:'Space Grotesk';font-weight:700;color:var(--wit);letter-spacing:-.015em;line-height:1.24;font-size:clamp(1.6rem,3.6vw,2.4rem);}
@media(max-width:900px){.parallax{background-attachment:scroll;min-height:40vh;}}
html.reduced-motion .parallax{background-attachment:scroll;}

/* ================= DUURZAAMHEID (homepage teaser) ================= */
.duurzaam{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.duurzaam{grid-template-columns:1fr;gap:36px;}}
.duurzaam-media{border-radius:20px;overflow:hidden;aspect-ratio:5/4;position:relative;}
.duurzaam-media img{width:100%;height:100%;object-fit:cover;}
.duurzaam-list{list-style:none;margin:26px 0 32px;}
.duurzaam-list li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--lijn);color:var(--slate);font-size:1rem;}
.duurzaam-list li:first-child{border-top:0;}
.duurzaam-list li::before{content:"";position:absolute;left:0;top:20px;width:11px;height:11px;background:var(--turquoise);transform:rotate(45deg);}
.duurzaam-list li strong{color:var(--petrol);}
.section.donker .duurzaam-list li{border-top:1px solid rgba(255,255,255,.12);color:var(--grijs-licht);}
.section.donker .duurzaam-list li strong{color:var(--wit);}

/* ================= CONTACT (homepage teaser) ================= */
.contact-teaser{background:var(--petrol);color:var(--wit);border-radius:24px;padding:clamp(40px,6vw,72px);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;}
@media(max-width:820px){.contact-teaser{grid-template-columns:1fr;text-align:left;padding:clamp(32px,8vw,48px);}}
.contact-teaser h2{color:var(--wit);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:14px;letter-spacing:-.015em;}
.contact-teaser p{color:#CFE0E0;font-size:1.06rem;max-width:52ch;}
.contact-teaser .cta-col{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
@media(max-width:820px){.contact-teaser .cta-col{align-items:flex-start;}}

/* ================= CONTACTPAGINA ================= */
.contact-page{background:var(--leisteen-diep);color:var(--wit);}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px;}}
.contact-grid h2{color:var(--wit);font-weight:700;letter-spacing:-.015em;line-height:1.1;font-size:clamp(1.7rem,3.4vw,2.2rem);margin-bottom:16px;}
.contact-grid > div > p{color:var(--grijs-licht);font-size:1.05rem;max-width:46ch;margin-bottom:30px;}
.contact-info{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.ci{display:flex;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);}
.ci:first-child{border-top:0;}
.ci .lbl{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--turquoise);width:96px;flex-shrink:0;padding-top:3px;}
.ci .val{font-size:1rem;color:#E5EBEB;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ci .val a{color:#E5EBEB;text-decoration:none;border-bottom:1px solid rgba(139,194,196,.4);transition:border-color .2s ease;}
.ci .val a:hover{border-color:var(--turquoise-licht);}

/* Kaart met locatie STYX — alleen op de losse contactpagina, subtiel en
   compact zodat hij niet concurreert met de contactgegevens/het formulier.
   Leaflet + losse OSM-tegels (zie contact_map_scripts()), vaste hoogte i.p.v.
   aspect-ratio zodat Leaflet direct een correcte containergrootte meet. */
.contact-map{margin-top:26px;}
.contact-map .map-frame{position:relative;width:100%;max-width:460px;height:300px;border-radius:14px;
  overflow:hidden;border:1px solid rgba(255,255,255,.14);background:var(--leisteen);font-family:'Mulish';}
.contact-map .map-frame .leaflet-tile-pane{filter:grayscale(.35) saturate(.85) contrast(1.03);}
.contact-map .map-frame .leaflet-control-attribution{font-size:.68rem;background:rgba(243,239,232,.88);}
.contact-map .map-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.82rem;font-weight:600;color:var(--turquoise-licht);text-decoration:none;}
.contact-map .map-link:hover{color:var(--wit);}
@media(max-width:520px){.contact-map .map-frame{max-width:none;height:260px;}}

/* Copy-to-clipboard icoon bij contactgegevens — bewust subtiel: geen
   zichtbare knop-behuizing, border of achtergrond in rust. Het klikbare
   gebied is via padding + negatieve margin toch ruim (~28px, ~40px op
   mobiel) zonder dat het er visueel als een grote button uitziet. */
.copy-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:7px;margin:-7px;
  border-radius:6px;border:0;background:transparent;color:var(--grijs-licht);
  cursor:pointer;flex-shrink:0;transition:background .2s ease,color .2s ease;}
.copy-btn:hover,.copy-btn:focus-visible{background:rgba(255,255,255,.08);color:var(--turquoise-licht);}
.copy-btn svg{width:14px;height:14px;display:block;}
.copy-btn .icon-check{display:none;}
.copy-btn.copied{color:var(--turquoise);}
.copy-btn.copied .icon-copy{display:none;}
.copy-btn.copied .icon-check{display:block;}
.copy-tip{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);
  background:var(--leisteen-diep);color:var(--wit);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;box-shadow:0 6px 16px rgba(0,0,0,.28);}
.copy-btn.copied .copy-tip{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:480px){.copy-btn{padding:11px;margin:-11px;}}

/* Form */
.form{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(26px,4vw,40px);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--turquoise-licht);margin-bottom:8px;}
.field .req{color:var(--turquoise-licht);}
.field input,.field select,.field textarea{
  width:100%;font-family:'Mulish';font-size:1rem;color:var(--wit);background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.18);border-radius:10px;padding:13px 15px;transition:border-color .2s ease, background .2s ease;
  min-height:48px;
}
.field textarea{resize:vertical;min-height:120px;}
.field input::placeholder,.field textarea::placeholder{color:#8FA0A2;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--turquoise);background:rgba(255,255,255,.09);}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#D98181;background:rgba(217,129,129,.08);}
.field .err{display:none;color:#F0AFAF;font-size:.83rem;margin-top:7px;}
.field.has-error .err{display:block;}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FC2C4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}
.field select option{color:#111;}
.field-file{border:1.5px dashed rgba(255,255,255,.26);border-radius:12px;padding:18px;text-align:center;background:rgba(255,255,255,.03);}
.field-file input{width:auto;background:none;border:0;color:var(--grijs-licht);min-height:auto;}
.field-file .hint{font-size:.8rem;color:var(--grijs-licht);margin-top:6px;}
.honeypot{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.form .btn{width:100%;justify-content:center;margin-top:6px;}
.form-note{font-size:.84rem;color:var(--grijs-licht);margin-top:16px;text-align:center;}
.form-note a{color:var(--turquoise-licht);}
/* Telefoonnummer bevat spaties (+31 6 57 23 76 85) die anders los van
   elkaar konden afbreken; hou het nummer zelf altijd op één regel. */
.form-note a[href^="tel:"]{white-space:nowrap;}
.form-status{display:none;align-items:flex-start;gap:12px;border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:.95rem;line-height:1.5;}
.form-status.show{display:flex;}
.form-status.loading{background:rgba(255,255,255,.08);color:var(--wit);}
.form-status.success{background:rgba(107,168,172,.16);border:1px solid rgba(107,168,172,.4);color:var(--wit);}
.form-status.error{background:rgba(217,129,129,.14);border:1px solid rgba(217,129,129,.4);color:#FBD9D9;}
.form-status .spin{width:18px;height:18px;flex-shrink:0;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:var(--wit);animation:spin .7s linear infinite;margin-top:2px;}
@keyframes spin{to{transform:rotate(360deg);}}
.form[data-state="success"] .form-fields{display:none;}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important;}

/* ================= FOOTER ================= */
footer{background:var(--leisteen);color:var(--grijs-licht);padding:60px 0 40px;}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap;margin-bottom:38px;}
.foot-brand{display:flex;align-items:center;gap:15px;}
.foot-brand .diamond{width:48px;height:48px;}
/* Wordmerk — zelfde opbouw als .brand .wm in de header (geen flex/gap
   tussen "STYX" en "Projectstoffering"), enkel een andere grootte, zodat er
   nooit een spatie/afwijking tussen header en footer kan ontstaan. */
.foot-brand .wm{line-height:.85;}
.foot-brand .wm .s{font-family:'Space Grotesk';font-weight:700;letter-spacing:.08em;font-size:1.35rem;color:var(--wit);}
.foot-brand .wm .p{font-family:'Space Grotesk';font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--turquoise-licht);margin-top:4px;}
@media(max-width:400px){.foot-brand .wm .s{font-size:1.2rem;}.foot-brand .wm .p{font-size:.64rem;}}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap;}
.foot-col h3{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--turquoise-licht);margin-bottom:14px;}
.foot-col a, .foot-col address{display:block;text-decoration:none;color:var(--grijs-licht);font-weight:600;font-size:.92rem;margin-bottom:10px;font-style:normal;line-height:1.6;transition:color .2s ease;}
.foot-col a:hover{color:var(--wit);}
.foot-bands{display:flex;height:8px;border-radius:4px;overflow:hidden;margin:36px 0 22px;}
.foot-bands i{flex:1;}
.foot-bands i:nth-child(1){background:var(--turquoise);}
.foot-bands i:nth-child(2){background:var(--petrol);}
.foot-bands i:nth-child(3){background:var(--slate);}
.foot-bands i:nth-child(4){background:var(--steen);}
.foot-legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:#8A9799;}
.foot-legal a{color:#B9C6C9;text-decoration:none;}
.foot-legal a:hover{color:var(--wit);}

/* ================= reveal + a11y ================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-stagger.in > *{transition-delay:calc(var(--i,0) * 70ms);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}
html.reduced-motion .reveal{opacity:1;transform:none;transition:none;}
html.reduced-motion .hero-bg{transform:none!important;}
html.reduced-motion .scroll-hint .track{animation:none;}

/* ================= misc content pages ================= */
.legal{padding:clamp(64px,9vh,100px) 0 clamp(80px,10vh,120px);background:var(--wit);}
.legal .wrap{max-width:840px;}
.legal-updated{color:var(--grijs);font-size:.9rem;margin-bottom:40px;}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--petrol);font-weight:700;text-decoration:none;font-size:.92rem;margin-top:48px;}
.back-link:hover{color:var(--petrol-diep);}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:16px;overflow:hidden;margin:36px 0;}
@media(max-width:640px){.stats-row{grid-template-columns:1fr;}}
.stat{background:var(--steen);padding:26px 24px;}
.stat .k{font-family:'Space Grotesk';font-weight:700;font-size:1.7rem;color:var(--petrol);}
.stat .v{font-size:.9rem;color:var(--grijs);margin-top:4px;}