/* =====================================================================
   ZENITH3E, Design System (single source of truth)
   Richting: licht/paper basis met donkere marineblauwe hero-banden,
   goud als precisie-accent, blueprint-textuur, scherpe hoeken.
   Merkregel: Zenith3E is altijd het subject; System3E is het product.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Marine */
  --navy-950:#08152C; --navy-900:#0A1E3F; --navy-800:#13315C; --navy-700:#1B4A8C;
  --navy-100:#DDE4F0; --navy-50:#EDF1F8;
  /* Goud */
  --gold-700:#8A7038; --gold-600:#A88A4A; --gold-500:#C9A961; --gold-400:#D9BC7A;
  --gold-300:#E7CF99; --gold-200:#F0E2C4; --gold-100:#F4ECD8;
  --gold-text:#705C2E; /* tekst-goud, gemeten 6,07:1 op --paper en 5,61:1 op --paper-2, voldoet aan WCAG AA */
  /* Papier / steen */
  --paper:#FAF8F3; --paper-2:#F3EFE5; --paper-300:#B9C6DC; --white:#FFFFFF;
  --stone-200:#E8E4DC; --stone-300:#C9C4B8; --stone-400:#8F8B80; --stone-500:#6E6B62; --ink:#0B0F1A;

  /* Fonts */
  --f-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-sans:"Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-serif:"Cormorant Garamond","Cormorant","Times New Roman", serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Maatvoering */
  --maxw:1200px;
  --gut:clamp(20px, 5vw, 40px);
  --sp-section:clamp(64px, 9vw, 130px);
  --hair:1px solid var(--stone-200);
  --hair-gold:1px solid rgba(201,169,97,.45);
  --shadow-sm:0 1px 2px rgba(8,21,44,.05), 0 2px 10px rgba(8,21,44,.05);
  --shadow-md:0 10px 30px rgba(8,21,44,.10), 0 2px 8px rgba(8,21,44,.05);
  --shadow-lg:0 24px 60px rgba(8,21,44,.20);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-sans); color:var(--ink); background:var(--paper);
  font-size:clamp(15.5px,1.05vw,16.5px); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:600; line-height:1.08; letter-spacing:-.015em}
h3,h4{line-height:1.3}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px}

/* Kopieerbeveiliging */
body{-webkit-user-select:none; -moz-user-select:none; user-select:none}
.selectable,.selectable *,.spectable,.spectable *{-webkit-user-select:text; -moz-user-select:text; user-select:text}
img{-webkit-user-drag:none; user-drag:none; pointer-events:none}
.allow-img img, a img{pointer-events:auto}

/* ---------- Typografie-helpers ---------- */
.display{font-size:clamp(2.6rem,6.2vw,5rem); line-height:1.02; letter-spacing:-.025em}
.h2{font-size:clamp(2rem,4vw,3.15rem)}
.h3{font-size:clamp(1.35rem,2.2vw,1.85rem)}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.6; color:var(--stone-500)}
.eyebrow{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-text);
  display:inline-flex; align-items:center; gap:.6em;
}
.band-dark .eyebrow{color:var(--gold-300)}
/* Kaarten met een donkere inline achtergrond staan buiten .band-dark, maar het
   tekstgoud is daar te donker. Deze klasse zet het lichte accentgoud terug. */
.on-dark .eyebrow{color:var(--gold-300)}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold-500)}
.eyebrow--center{justify-content:center}
.serif-num{font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-600); line-height:1}
.muted{color:var(--stone-500)}
.gold{color:var(--gold-600)}
.balance{text-wrap:balance}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.stack-sm>*+*{margin-top:.9rem}
.stack>*+*{margin-top:1.4rem}
.center{text-align:center}
.grid{display:grid; gap:clamp(20px,2.4vw,34px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid--split{gap:clamp(32px,5vw,64px); align-items:start}
.grid--asym{grid-template-columns:.9fr 1.1fr}
.grid--contact{grid-template-columns:1.4fr .9fr; align-items:start}
.grid--photo3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){
  .grid--asym{grid-template-columns:1fr}
}
@media (max-width:820px){
  .grid--contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid--photo3{grid-template-columns:1fr}
}
.section-head{max-width:760px}
.section-head.center{margin-inline:auto}
.section-head .h2{margin-top:.6rem}
.section-head .lead{margin-top:1rem}

/* ---------- Blueprint-textuur ---------- */
.blueprint{position:relative; isolation:isolate}
.blueprint::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,169,97,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,97,.07) 1px, transparent 1px);
  background-size:46px 46px; background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
}

/* ---------- Gouden hoekmarkeringen ---------- */
.corners{position:relative}
.corners::before,.corners::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
}
.corners::before{top:10px; left:10px; border-top:2px solid var(--gold-500); border-left:2px solid var(--gold-500)}
.corners::after{bottom:10px; right:10px; border-bottom:2px solid var(--gold-500); border-right:2px solid var(--gold-500)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.92em 1.5em;
  font-family:var(--f-mono); font-size:.92rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid transparent; border-radius:0;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change:transform;
}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--primary{background:var(--gold-500); color:var(--navy-950); border-color:var(--gold-500)}
.btn--primary:hover{background:var(--gold-400); border-color:var(--gold-400); transform:translateY(-2px)}
.btn--navy{background:var(--navy-900); color:var(--paper); border-color:var(--navy-900)}
.btn--navy:hover{background:var(--navy-800); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--navy-900); border-color:var(--stone-300)}
.btn--ghost:hover{border-color:var(--navy-900); transform:translateY(-2px)}
.btn--ghost-light{background:transparent; color:var(--paper); border-color:rgba(231,207,153,.45)}
.btn--ghost-light:hover{border-color:var(--gold-400); color:var(--gold-300)}

/* ---------- Navigatie ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; padding-block:14px;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav__logo{display:flex; align-items:center; flex:0 0 auto}
.nav__logo img{height:60px; width:auto; transform-origin:left center; transition:transform .3s var(--ease)}
.nav__links{display:flex; align-items:center; gap:20px}
.nav__link{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.035em; text-transform:uppercase;
  color:var(--paper); opacity:.85; position:relative; padding-block:4px; white-space:nowrap;
  transition:opacity .2s, color .2s;
}
.nav__link::after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--gold-400); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.nav__link:hover{opacity:1}
.nav__link:hover::after{transform:scaleX(1)}
.nav__lang{position:relative; margin-left:4px}
/* Taalkeuze zichtbaar gemaakt: gouden rand en tekst i.p.v. onopvallend grijs (verzoek 18 juli 2026) */
.nav__lang-toggle{
  display:flex; align-items:center; gap:.4em; background:rgba(201,169,97,.08); cursor:pointer;
  border:1px solid rgba(201,169,97,.55); border-radius:0;
  font-family:var(--f-mono); font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-300); padding:.45em .7em; transition:color .2s, border-color .2s, background .2s;
}
.nav__lang-toggle:hover{color:var(--gold-200, #F0E2C4); border-color:var(--gold-400); background:rgba(201,169,97,.16)}
.nav__lang-caret{width:13px; height:13px; transition:transform .25s var(--ease)}
.nav__lang.is-open .nav__lang-caret{transform:rotate(180deg)}
.nav__lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:84px; z-index:110;
  background:var(--navy-950); border:1px solid rgba(201,169,97,.25); border-radius:0;
  padding:6px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  box-shadow:0 12px 30px rgba(8,21,44,.35);
}
.nav__lang.is-open .nav__lang-menu{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s}
.nav__lang-item{
  display:block; padding:.5em .8em; border-radius:0; text-decoration:none; text-align:left;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); opacity:.7; transition:opacity .15s, background .15s;
}
.nav__lang-item:hover{opacity:1; background:rgba(201,169,97,.1)}
.nav__lang-item.is-active{opacity:1; font-weight:600; color:var(--gold-400)}
.nav__actions{display:flex; align-items:center; gap:14px}
.nav__links .btn{display:none} /* in-menu CTA alleen op mobiel zichtbaar */
/* Solid state na scroll */
.nav--scrolled{
  background:rgba(8,21,44,.78);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:rgba(201,169,97,.18); box-shadow:0 8px 30px rgba(8,21,44,.25);
}
.nav--scrolled .nav__logo img{transform:scale(.8148)}
/* Variant op lichte pagina's (sub-pagina's met lichte top) */
.nav--light .nav__link{color:var(--navy-900)}
.nav--light .nav__logo--invert{display:none}
.nav__toggle{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:0; padding:10px; min-width:44px; min-height:44px}
.nav__toggle span{width:24px; height:2px; background:var(--paper); transition:transform .3s var(--ease), opacity .2s}
.nav--scrolled .nav__toggle span,.nav--light .nav__toggle span{background:var(--paper)}

/* Verduistering achter het mobiele menu; via JS toegevoegd in de nav */
.nav__scrim{
  position:fixed; inset:0; z-index:1; background:rgba(8,21,44,.55);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.nav--open .nav__scrim{opacity:1; visibility:visible; transition:opacity .3s var(--ease)}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--navy-950); color:var(--paper);
  padding-top:clamp(130px,18vh,190px); padding-bottom:clamp(70px,10vw,120px); overflow:hidden;
}
.hero__title{font-size:clamp(2.7rem,6vw,4.9rem); line-height:1.0; letter-spacing:-.03em; color:var(--white)}
.hero__title .accent{color:var(--gold-400)}
.hero__sub{margin-top:1.5rem; max-width:38ch; color:#C6D2E6; font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.6}
.hero__cta{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:14px}

/* ---------- Proof / stat-balk ---------- */
.proofbar{border-top:var(--hair-gold); border-bottom:var(--hair-gold); background:var(--navy-900)}
.proofbar__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(22px,3vw,34px) clamp(14px,2vw,28px); border-left:1px solid rgba(201,169,97,.16)}
.stat:first-child{border-left:0}
.stat__num{font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-400); font-size:clamp(2.1rem,3.6vw,3rem); line-height:1; font-variant-numeric:tabular-nums}
.stat__label{margin-top:.5rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#9FB0CA}

/* ---------- Banden ---------- */
.band-dark{background:var(--navy-950); color:var(--paper)}
.band-dark .lead{color:#B9C6DC}
.band-dark .h2,.band-dark h3{color:var(--white)}
.band-paper{background:var(--paper)}
.band-paper-2{background:var(--paper-2)}

/* ---------- Cards ---------- */
.card{
  background:var(--white); border:var(--hair); padding:clamp(24px,2.6vw,34px);
  position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--gold-500)}
.card h3{font-size:1.18rem; margin-bottom:.5rem}
.card p{color:var(--stone-500); font-size:.96rem}
.card--dark{background:var(--navy-900); border-color:rgba(201,169,97,.2)}
.card--dark h3{color:var(--white)}
.card--dark p{color:#AEBCD3}
.card--dark:hover{border-color:rgba(201,169,97,.45)}

/* ---------- Feature (afwisselend beeld/tekst) ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
.feature--rev .feature__media{order:2}
.feature__media{position:relative}
.feature__media img{width:100%; aspect-ratio:5/4; object-fit:cover; border:var(--hair)}
.band-dark .feature__media img{border:var(--hair-gold)}

/* Video-teaser: productfoto die pas bij klikken overgaat in de YouTube-video,
   zodat er geen YouTube-embed geladen wordt voordat de bezoeker daarvoor kiest. */
.feature__media.video-teaser{background:var(--white)}
.feature__media.video-teaser img{object-fit:contain; padding:clamp(20px,3vw,40px)}
.video-teaser__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:0;
  width:clamp(58px,6vw,72px); height:clamp(58px,6vw,72px); border-radius:50%;
  background:var(--navy-900); border:2px solid var(--gold-400); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-md); transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.video-teaser__play:hover{transform:translate(-50%,-50%) scale(1.08); background:var(--navy-800)}
.video-teaser__play:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px}
.video-teaser__play svg{width:24px; height:24px; fill:var(--gold-400); margin-left:3px}
.video-teaser__label{
  position:absolute; left:14px; bottom:14px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--stone-500); background:rgba(255,255,255,.9); padding:5px 10px; border:var(--hair);
  pointer-events:none;
}
.video-teaser iframe{
  width:100%; aspect-ratio:16/9; display:block; border:var(--hair);
  pointer-events:none; /* YouTube's eigen hover-UI (titel, kanaal, "meer video's") mag nooit zichtbaar worden */
}
.video-teaser__toggle{
  position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; cursor:pointer;
}
.video-teaser__toggle svg{
  width:24px; height:24px; padding:16px; border-radius:50%; background:rgba(8,21,44,.6);
  fill:var(--gold-400); opacity:0; transition:opacity .2s var(--ease), background-color .2s var(--ease);
}
.video-teaser__toggle:hover svg{opacity:1; background:rgba(8,21,44,.8)}
.video-teaser__toggle:focus-visible svg{opacity:1}
.video-teaser__toggle:focus-visible{outline:2px solid var(--gold-500); outline-offset:-2px}

/* ---------- Check-lijst (gouden vink) ---------- */
.checks{display:grid; gap:.85rem}
.checks li{display:flex; gap:.75rem; align-items:flex-start; font-size:.98rem}
.checks svg{flex:0 0 auto; width:20px; height:20px; color:var(--gold-600); margin-top:2px}
.band-dark .checks li{color:#CBD6E8}
.band-dark .checks svg{color:var(--gold-400)}

/* ---------- Modelkaarten ---------- */
.model{position:relative; background:var(--white); border:var(--hair); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.model:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.model__img{aspect-ratio:16/11; object-fit:cover; width:100%}
.model__img--gallery{cursor:pointer}
.model__img--gallery:focus-visible{outline:2px solid var(--gold-500); outline-offset:-2px}
.model__gallery-hint{
  position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:.4em;
  background:rgba(8,21,44,.72); backdrop-filter:blur(4px); color:var(--paper);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.4em .75em; pointer-events:none;
}
.model__gallery-hint svg{width:13px; height:13px}

/* ---------- Lightbox: projectgalerij ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(8,21,44,.92); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s;
  padding:clamp(16px,4vw,48px);
}
.lightbox.is-open{opacity:1; visibility:visible; transition:opacity .25s var(--ease)}
.lightbox__figure{max-width:min(1100px,92vw); max-height:88vh; margin:0; display:flex; flex-direction:column; align-items:center; gap:14px}
.lightbox__img{max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain; border:1px solid rgba(201,169,97,.25)}
.lightbox__count{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-300)}
.lightbox__close,.lightbox__nav{
  position:absolute; background:rgba(255,255,255,.06); border:1px solid rgba(201,169,97,.3); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%;
  width:44px; height:44px; transition:background .2s, border-color .2s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(201,169,97,.16); border-color:rgba(201,169,97,.6)}
.lightbox__close svg,.lightbox__nav svg{width:20px; height:20px}
.lightbox__close{top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px)}
.lightbox__prev{left:clamp(10px,3vw,28px); top:50%; transform:translateY(-50%)}
.lightbox__next{right:clamp(10px,3vw,28px); top:50%; transform:translateY(-50%)}
@media (max-width:640px){
  .lightbox__close,.lightbox__nav{width:38px; height:38px}
  .lightbox__prev{left:6px}
  .lightbox__next{right:6px}
}
.model__body{padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; flex:1}
.model__name{font-size:1.4rem}
.model__area{font-family:var(--f-serif); font-style:italic; color:var(--gold-600); font-size:1.5rem}
.model__row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:.7rem}
.model__desc{color:var(--stone-500); font-size:.95rem; margin-bottom:1.2rem}
.model__specs{margin-top:auto; border-top:var(--hair); padding-top:1rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem}
.model__price{margin-top:.9rem; display:flex; flex-direction:column; gap:.1rem}
.model__price-label{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500)}
.model__price b{font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:1.4rem; color:var(--gold-600); line-height:1.15; font-variant-numeric:tabular-nums}
.model__price-note{font-size:.72rem; color:var(--stone-500)}
.model__plan--muted{color:var(--stone-400); cursor:default}
.footer__legal{color:inherit; opacity:.7; text-decoration:underline; text-underline-offset:2px; margin-right:.7em}
.footer__legal:hover{opacity:1}
/* FAQ: samengevoegd uit twee eerdere, deels dubbele blokken (reviewfix 18 juli 2026).
   Waarden volgen de tot dan toe winnende cascade, zodat het uiterlijk gelijk blijft. */
.faq{margin-top:clamp(28px,4vw,44px); max-width:820px; margin-inline:auto; border-top:var(--hair)}
.faq__item{border-top:var(--hair)}
.faq__item:last-child,.faq details{border-bottom:var(--hair)}
.faq summary,.faq__q{
  list-style:none; cursor:pointer; padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--navy-900);
}
.faq summary::-webkit-details-marker,.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+"; color:var(--gold-600); font-size:1.5rem; line-height:1; flex:0 0 auto}
.faq__item[open] .faq__q::after{content:"\2013"}
.faq__a{padding:0 0 1.4rem; color:var(--stone-500); max-width:70ch}
.faq__a p{margin:0; color:var(--stone-500); line-height:1.72; max-width:70ch}
.model__spec{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:var(--stone-500); text-transform:uppercase}
.model__spec b{display:block; font-family:var(--f-sans); font-size:.95rem; letter-spacing:0; color:var(--ink); text-transform:none; font-weight:600; margin-top:2px}
.model__plan{display:inline-flex; align-items:center; gap:.5em; margin-top:1rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text); transition:color .2s}
.model__plan:hover{color:var(--navy-900)}
.model__plan .btn__arrow{transition:transform .25s var(--ease)}
.model__plan:hover .btn__arrow{transform:translateX(3px)}

/* ---------- CTA-band ---------- */
.cta{position:relative; background:var(--navy-950); color:var(--paper); overflow:hidden; text-align:center}
.cta .h2{color:var(--white)}
.cta__inner{position:relative; z-index:2; max-width:720px; margin-inline:auto}

/* ---------- Formulier ---------- */
.form{display:grid; gap:18px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:.45rem}
.field label{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500)}
.band-dark .field label{color:#9FB0CA}
.field input,.field textarea,.field select{
  font-family:var(--f-sans); font-size:1rem; padding:.85em 1em;
  border:1px solid var(--stone-300); border-radius:0;
  background:var(--white); color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(201,169,97,.24)}
.form__note{font-size:.82rem; color:var(--stone-500)}
.form__status{font-family:var(--f-mono); font-size:.85rem; padding:.8em 1em; border-radius:0; display:none}
.form__status.is-ok{display:block; background:rgba(201,169,97,.12); border:var(--hair-gold); color:var(--gold-700)}
.form__status.is-err{display:block; background:#FBEAEA; border:1px solid #E3B7B7; color:#9B2D2D}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950); color:#AEBCD3; padding-top:clamp(56px,7vw,90px)}
.footer a{color:#AEBCD3; transition:color .2s}
.footer a:hover{color:var(--gold-300)}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
.footer__logo{height:77px; width:auto; margin-bottom:18px}
.footer h3{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400); margin-bottom:16px; font-weight:500}
.footer__links li+li{margin-top:.6rem}
.footer__bottom{margin-top:clamp(40px,5vw,64px); border-top:1px solid rgba(201,169,97,.16); padding-block:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#7B89A3}
.footer__meta{display:inline-flex; align-items:center; flex-wrap:wrap; gap:22px}
.footer__legal{margin-right:0}
.footer__admin{color:inherit; opacity:.7; text-decoration:underline; text-underline-offset:2px; transition:opacity .2s}
.footer__admin:hover,.footer__admin:focus-visible{opacity:1}
.footer__brandline{max-width:34ch; font-size:.92rem; line-height:1.6}

/* ---------- Reveal-animatie ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* Varianten per content-type, zodat niet alles dezelfde fade-in-up doet.
   Media stelt scherp (scale, geen drift), cijfers landen snel en recht. */
.reveal--media{transform:scale(1.045); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.reveal--stat{transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease)}

/* ---------- Skip-link & a11y ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--gold-500); color:var(--navy-950); padding:10px 16px; z-index:200; font-family:var(--f-mono); font-size:.8rem}
.skip:focus{left:10px; top:10px}

/* ---------- Responsief ---------- */
@media (max-width:980px){
  .feature{grid-template-columns:1fr; gap:34px}
  .feature--rev .feature__media{order:0}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr; gap:32px}
}
/* De volledige horizontale nav heeft ruim 1200px nodig voor 6 links + taalkeuze
   + CTA-knop naast het woordmerk. Daaronder klapt hij in tot het hamburgermenu,
   in plaats van de knop over twee regels en het logo samengeperst. */
@media (max-width:1200px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; z-index:2; width:min(82vw,340px); max-height:100dvh; overflow-y:auto;
    background:var(--navy-950);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; padding:40px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .35s var(--ease), visibility 0s .35s; border-left:var(--hair-gold);
  }
  .nav__links.is-open{transform:none; visibility:visible; transition:transform .35s var(--ease)}
  .nav__link{color:var(--paper); font-size:1rem; padding-block:8px}
  .nav__toggle{display:flex; z-index:101}
  .nav__actions .btn{display:none}
  .nav__links .btn{display:inline-flex; width:100%; justify-content:center; margin-top:8px}
  .nav__lang{margin-top:10px; margin-left:0}
  .nav__lang-toggle{font-size:.78rem}
  .nav__lang-menu{left:0; right:auto}
  .nav--open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav--open .nav__toggle span:nth-child(2){opacity:0}
  .nav--open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:900px){
  .proofbar__grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(odd){border-left:0}
}

/* Route (transportketen, projectenpagina): was inline-gestyled, geen mobiele fallback (review 2 juli 2026) */
.route{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:.8rem; align-items:center}
@media (max-width:640px){
  .route{grid-template-columns:1fr}
  .route > div:nth-child(even){transform:rotate(90deg); padding:.3rem 0; justify-self:center}
}
/* Tussenbreekpunt: grid-3 klapte pas op 560px om, te smalle kolommen daartussen */
@media (max-width:820px){
  .grid-3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .model__row{flex-direction:column; gap:2px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal,.reveal--media,.reveal--stat{opacity:1; transform:none}
}

/* =====================================================================
   B2B / institutioneel, premium uitbreiding (22 juni 2026)
   Zakelijke heroriëntatie (ontwikkelaars, corporaties, overheden).
   Bouwt voort op de bestaande tokens; voegt toe, vervangt niets.
   ===================================================================== */

/* Cinematic hero met full-bleed beeld */
.hero--cine{min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-top:clamp(120px,16vh,160px); padding-bottom:clamp(120px,15vh,150px)}
.hero--cine .container{position:relative; z-index:3; width:100%}
.hero__media{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy-950)}
.hero__media img,.hero__media video{width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,21,44,.55) 0%, rgba(8,21,44,.20) 34%, rgba(8,21,44,.82) 100%),
    linear-gradient(90deg, rgba(8,21,44,.85) 0%, rgba(8,21,44,.34) 56%, rgba(8,21,44,.05) 100%);
}
.hero--cine .eyebrow{color:var(--gold-300)}
.hero--cine .eyebrow::before{background:var(--gold-400)}
.hero__display{font-family:var(--f-display); font-weight:700; color:var(--white);
  font-size:clamp(2.4rem,5.2vw,4.3rem); line-height:1.04; letter-spacing:-.03em; max-width:18ch; margin-top:.7rem}
.hero__display .accent{color:var(--gold-400)}
.hero__lead{margin-top:1.4rem; max-width:56ch; color:#D6DFEE; font-size:clamp(1.06rem,1.4vw,1.3rem); line-height:1.62}
.hero--cine .hero__cta{margin-top:2.1rem}

/* Statement-typografie */
.statement{font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.2; letter-spacing:-.02em; max-width:22ch}

/* Metrics op lichte band */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); border:var(--hair); background:var(--white)}
.metric{padding:clamp(20px,2.6vw,32px); border-left:var(--hair)}
.metric:first-child{border-left:0}
.metric__num{font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-600); font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; font-variant-numeric:tabular-nums}
.metric__label{margin-top:.45rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500)}

/* Spec-tabel (prestaties, natrekbaar) */
.spectable{width:100%; border-collapse:collapse; font-size:.98rem}
.spectable tr{border-bottom:var(--hair)}
.spectable tr:first-child{border-top:var(--hair)}
.spectable th{text-align:left; font-family:var(--f-mono); font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-500); padding:1rem 1.2rem 1rem 0; width:44%; vertical-align:top}
.spectable td{padding:1rem 0; color:var(--ink); font-weight:600; vertical-align:top; font-variant-numeric:tabular-nums}
.spectable td .sub{display:block; font-weight:400; color:var(--stone-500); font-size:.85rem; margin-top:3px; font-family:var(--f-sans)}
.band-dark .spectable tr,.band-dark .spectable tr:first-child{border-color:rgba(201,169,97,.18)}
.band-dark .spectable th{color:#9FB0CA}
.band-dark .spectable td{color:var(--white)}
.band-dark .spectable td .sub{color:#AEBCD3}

/* Document-/certificaatkaarten */
.doc{display:flex; gap:14px; align-items:flex-start; padding:clamp(18px,2.2vw,26px); border:var(--hair); background:var(--white); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.doc:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--gold-500)}
.doc__ico{flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; color:var(--gold-600); border:var(--hair-gold)}
.doc__ico svg{width:22px; height:22px}
.doc h3{font-family:var(--f-display); font-weight:600; font-size:1.04rem; margin-bottom:.2rem}
.doc__meta{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text)}

/* Markten-lijst */
.markets{border-top:var(--hair)}
.market{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:1.15rem 0; border-bottom:var(--hair)}
.market__name{font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,1.9vw,1.45rem)}
.market__note{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone-500); text-align:right}

/* Video-blok */
.videowrap{position:relative; border:var(--hair-gold); overflow:hidden; background:var(--navy-900)}
.videowrap video{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.videowrap__tag{position:absolute; left:14px; bottom:14px; background:rgba(8,21,44,.78); backdrop-filter:blur(6px); border:var(--hair-gold); padding:.5em .9em; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-300)}

/* Responsief, nieuwe componenten */
@media (max-width:980px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(odd){border-left:0}
  .metric:nth-child(3),.metric:nth-child(4){border-top:var(--hair)}
}
@media (max-width:560px){
  .metrics{grid-template-columns:1fr}
  .metric{border-left:0; border-top:var(--hair)}
  .metric:first-child{border-top:0}
  .spectable th{width:50%; padding-right:.6rem}
  .market{flex-direction:column; gap:.2rem; align-items:flex-start}
  .market__note{text-align:left}
}

/* =====================================================================
   Pagina-hero (binnenpagina's: werkwijze, pakket, feiten, ...)
   Donkere koptekst zonder full-bleed beeld, compacter dan .hero--cine
   ===================================================================== */
.page-hero{
  background:var(--navy-950); color:var(--paper);
  padding-top:clamp(130px,17vh,172px); padding-bottom:clamp(48px,6vw,72px);
}
.page-hero .eyebrow{color:var(--gold-300)}
.page-hero .eyebrow::before{background:var(--gold-400)}
.page-hero .h1-page{
  font-family:var(--f-display); font-weight:700; color:var(--white);
  font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; letter-spacing:-.025em;
  margin:.55rem 0 1rem; max-width:22ch;
}
.page-hero .lead{color:#C6D2E6; max-width:58ch}

/* Stap-layout (werkwijze-pagina) */
.step{
  display:grid; grid-template-columns:56px 1fr; gap:clamp(20px,3vw,36px);
  padding-block:clamp(28px,3.5vw,44px); border-top:var(--hair); align-items:start;
}
.step:last-child{border-bottom:var(--hair)}
.step__num{font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-600); font-size:clamp(2rem,3.5vw,3rem); line-height:1}
.step h3{font-family:var(--f-display); font-weight:600; font-size:clamp(1.1rem,1.7vw,1.4rem); margin-bottom:.55rem}
.step p{color:var(--stone-500); font-size:.97rem; line-height:1.65}
.step p+p{margin-top:.7rem}
.step .note{font-size:.9rem; color:var(--stone-500); border-left:2px solid var(--gold-400); padding-left:.9rem; margin-top:.8rem}

/* Systeem-kaart (pakket-pagina) */
.syscard{border:var(--hair); padding:clamp(24px,2.8vw,36px); background:var(--white); position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.syscard:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--gold-500)}
.syscard__tag{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); margin-bottom:.9rem; display:block}
.syscard h3{font-size:clamp(1.2rem,1.8vw,1.5rem); margin-bottom:.6rem}
.syscard p{color:var(--stone-500); font-size:.96rem; line-height:1.65}

@media (max-width:760px){
  .step{grid-template-columns:40px 1fr; gap:16px}
  .step__num{font-size:1.7rem}
}

/* =====================================================================
   Karakter-restyle (15 juli 2026)
   Doel: de generieke sjabloon-signalen uit de designreview wegnemen
   zonder de opzet te wijzigen. Serif-accenten, bestekregels i.p.v.
   vinkjes, gelinieerde kaarten, ruitmarkeringen. Overschrijft bewust
   eerdere regels via de cascade.
   ===================================================================== */

/* Serif-accent in koppen: Cormorant italic als merkstem */
.hero__display .accent, .hero__title .accent,
.h2 em, .statement em, .page-hero .h1-page em{
  font-family:var(--f-serif); font-style:italic; font-weight:500;
  letter-spacing:0; font-size:1.08em;
}
.h2 em{color:var(--gold-600)}
.band-dark .h2 em, .cta .h2 em{color:var(--gold-400)}

/* Eyebrow: gouden ruit i.p.v. streep */
.eyebrow::before{width:7px; height:7px; flex:0 0 auto; background:var(--gold-500); transform:rotate(45deg)}

/* Check-lijsten worden bestekregels: mono-index, hairlines, geen vinkjes */
.checks{counter-reset:spec; gap:0}
.checks li{
  position:relative; padding:.85rem 0 .85rem 2.5rem;
  border-top:1px solid var(--stone-200);
  border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.checks li:last-child{
  border-bottom:1px solid var(--stone-200);
  border-bottom:1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.checks li::before{
  counter-increment:spec; content:counter(spec, decimal-leading-zero);
  position:absolute; left:0; top:1rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--gold-text);
}
.band-dark .checks li::before, .card[style*="background"] .checks li::before{color:var(--gold-400)}
.checks svg{display:none}

/* Kaarten: gelinieerd paneel i.p.v. witte doos */
.card{
  background:transparent; border:0; border-top:2px solid var(--navy-900);
  padding:20px 0 0;
}
.card:hover{transform:none; box-shadow:none; border-color:var(--gold-500)}
/* Kaarten met eigen achtergrond (o.a. contact-aside) blijven een paneel */
.card[style*="background"]{border:1px solid rgba(201,169,97,.25); padding:clamp(24px,2.6vw,34px)}

/* Metrics-balk: gouden hoekmarkeringen, tekentechnisch kader */
.metrics{position:relative; border:var(--hair)}
.metrics::before,.metrics::after{content:""; position:absolute; width:16px; height:16px; pointer-events:none; z-index:1}
.metrics::before{top:-6px; left:-6px; border-top:2px solid var(--gold-500); border-left:2px solid var(--gold-500)}
.metrics::after{bottom:-6px; right:-6px; border-bottom:2px solid var(--gold-500); border-right:2px solid var(--gold-500)}

/* Hero-scrim: iets opener, minder zware bandvorming */
.hero__scrim{
  background:
    linear-gradient(180deg, rgba(8,21,44,.48) 0%, rgba(8,21,44,.16) 36%, rgba(8,21,44,.78) 100%),
    linear-gradient(90deg, rgba(8,21,44,.78) 0%, rgba(8,21,44,.28) 58%, rgba(8,21,44,.04) 100%);
}

/* Doorlopende documenttekst (marktcontext): kalmer dan lead-op-lead */
.prose .lead{font-size:1.02rem; line-height:1.78; color:var(--stone-500)}
.prose .lead:first-child{font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink)}

/* Marktenregel: mono-lijst met ruit-scheiders i.p.v. pill-badges */
.markets-line{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.9em clamp(1.2em,3vw,2.2em); margin-top:clamp(28px,4vw,44px);
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-400);
}
.markets-line span{display:inline-flex; align-items:center; gap:clamp(1.2em,3vw,2.2em)}
.markets-line span+span::before{content:""; width:5px; height:5px; background:var(--gold-500); transform:rotate(45deg)}

/* ---------- Actueel / nieuwskaart (marktcontext-sectie) ---------- */
.news{border:var(--hair); background:var(--white); padding:clamp(24px,3vw,38px); max-width:640px}
.news__tag{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); margin-bottom:.9rem; display:block}
.news h3,.news__h{font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.4rem); line-height:1.3; letter-spacing:-.015em; margin-bottom:.7rem}
.news p{color:var(--stone-500); font-size:.97rem; line-height:1.65; margin-bottom:1.3rem}
.news__cta{font-family:var(--f-mono); font-size:.78rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text); display:inline-flex; align-items:center; gap:.5em; transition:color .2s}
.news__cta:hover{color:var(--navy-900)}
.news__cta .btn__arrow{transition:transform .25s var(--ease)}
.news__cta:hover .btn__arrow{transform:translateX(3px)}

/* ---------- Toestemming statistieken ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:var(--paper-2); border-top:2px solid var(--gold-500);
  box-shadow:0 -8px 30px rgba(8,21,44,.12);
  animation:consent-in .35s var(--ease) both;
}
.consent[hidden]{display:none}
@keyframes consent-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
.consent__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(16px,2.2vw,22px) var(--gut);
  display:flex; gap:clamp(16px,3vw,40px); align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.consent__text{flex:1 1 420px; min-width:0}
.consent__title{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:.45rem;
}
.consent__body{color:var(--navy-900); font-size:.92rem; line-height:1.6}
.consent__link{color:var(--navy-900); text-decoration:underline; text-underline-offset:3px}
.consent__link:hover{color:var(--gold-text)}
.consent__actions{display:flex; gap:10px; flex:0 0 auto}
.consent__btn{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:13px 26px; border:1px solid var(--navy-900);
  background:transparent; color:var(--navy-900); transition:background .2s, color .2s;
  min-height:44px; /* WCAG 2.2 doelgrootte */
}
.consent__btn--ok{background:var(--navy-900); color:var(--paper)}
.consent__btn--ok:hover{background:var(--navy-800); border-color:var(--navy-800)}
.consent__btn--no:hover{background:var(--navy-900); color:var(--paper)}
@media (max-width:640px){
  .consent__inner{flex-direction:column; align-items:stretch; gap:14px}
  /* In kolomrichting is flex-basis een hoogte, dus de 420px van hierboven
     moet hier terug naar auto. Anders wordt de balk een half scherm hoog. */
  .consent__text{flex:0 1 auto}
  .consent__actions{width:100%}
  .consent__btn{flex:1 1 0; padding:13px 12px}
}

/* Honeypot: onzichtbaar voor bezoekers en schermlezers, wel invulbaar voor bots */
.hp{position:absolute!important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}

/* Rolverklaring in de hero: wie is Zenith3E ten opzichte van System3E */
.hero__role{margin-top:1.1rem; padding-left:14px; border-left:2px solid var(--gold-500);
  font-family:var(--f-mono); font-size:.82rem; line-height:1.6; letter-spacing:.01em;
  color:var(--navy-100); max-width:62ch}
.hero__role strong{color:var(--gold-300); font-weight:500}
@media (max-width:640px){.hero__role{font-size:.78rem}}


/* ============================================================
   ACTIEREGEL (.actline)
   Lange pagina's hadden maar één actiemogelijkheid, onderaan. Deze regel
   houdt de lezer bereikbaar op het moment dat hij overtuigd is, zonder
   dat er een banner in het ritme van de pagina komt te staan.
   Bewust een tekstlink met onderstreping, geen knop: knoppen om de twee
   schermen lezen als reclame, een regel leest als onderdeel van het stuk.
   ============================================================ */
/* Pull-quote: visueel anker voor een korte, op zichzelf staande sectie
   (bv. "De inzet"), zodat die niet als vergeten invulparagraaf oogt
   tussen rijkere secties in. Zelfde taal als .hero__role. */
.pull{border-left:3px solid var(--gold-500); padding-left:clamp(22px,3vw,36px)}

.actline{display:flex; align-items:baseline; gap:clamp(12px,2vw,26px); flex-wrap:wrap;
  margin-top:clamp(38px,4.5vw,64px); padding-top:20px; border-top:var(--hair-gold)}
.actline__q{flex:1 1 24ch; margin:0; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.3; letter-spacing:-.015em;
  color:var(--navy-900)}
.actline__do{display:inline-flex; align-items:center; gap:.55em; flex:0 0 auto;
  padding:.55em 0; min-height:24px; text-decoration:none; white-space:nowrap;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-text); box-shadow:inset 0 -1px 0 0 currentColor;
  transition:color .25s var(--ease)}
.actline__do:hover{color:var(--navy-900)}
.actline__do .btn__arrow{transition:transform .25s var(--ease)}
.actline__do:hover .btn__arrow{transform:translateX(4px)}
.actline__note{flex:0 0 auto; margin:0; font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--stone-500)}

/* Op donkere banden draait het contrast om */
.band-dark .actline, .cta .actline{border-top-color:rgba(201,169,97,.3)}
.band-dark .actline__q, .cta .actline__q{color:var(--paper)}
.band-dark .actline__do, .cta .actline__do{color:var(--gold-300)}
.band-dark .actline__do:hover, .cta .actline__do:hover{color:var(--paper)}
.band-dark .actline__note, .cta .actline__note{color:var(--paper-300)}

@media (max-width:640px){
  .actline{gap:10px; padding-top:16px}
  /* In kolomrichting valt de toelichting op een eigen regel onder de link */
  .actline__note{flex-basis:100%}
  /* Op mobiel geen gedwongen volschermhoogte: de hero is zo hoog als zijn
     inhoud, zodat de consent-balk de CTA's niet afdekt bij de eerste weergave. */
  .hero--cine{min-height:auto; align-items:flex-start; padding-top:clamp(104px,26vw,128px); padding-bottom:clamp(36px,9vw,52px)}
}

/* =====================================================================
   DOSSIER-TAAL (Fase 1, 1 september 2026)
   Elke inhoudelijke sectie is een blad in het dossier. De bladtitel
   (mono, oplopend nummer, haarlijn eronder) vervangt de herhaalde
   ruit-eyebrow: functioneel, niet decoratief. Een tekenblad-kader zet
   de kolom binnen getekende kantlijnen.
   Volledig additief: alles hieronder werkt alleen op secties met de
   klasse .sheet. Bestaande klassen veranderen niet. Uitrol naar de
   overige pagina's gebeurt in Fase 3.
   ===================================================================== */

/* Het tekenblad: kader om de contentkolom, ingezet vanaf de bandrand. */
.sheet{padding-block:clamp(44px,5.5vw,74px)}
.sheet > .container{
  position:relative; max-width:1080px;
  border:1px solid var(--stone-300);
  padding:clamp(26px,3.4vw,40px) clamp(20px,4vw,52px);
}
.sheet.band-dark > .container{
  border-color:rgba(201,169,97,.20);
  border-top-color:rgba(201,169,97,.34);
}
/* Registratie-tik linksboven, in de bestaande .corners-taal */
.sheet > .container::before{
  content:""; position:absolute; top:-1px; left:-1px; width:13px; height:13px;
  border-top:2px solid var(--gold-500); border-left:2px solid var(--gold-500);
  pointer-events:none;
}

/* De bladtitel (title block) */
.blad{
  display:flex; align-items:baseline; gap:.15em 1em; flex-wrap:wrap;
  margin-bottom:clamp(1.5rem,3.2vw,2.4rem);
  padding-bottom:.8rem; border-bottom:1px solid var(--stone-300);
  font-family:var(--f-mono); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.5;
}
.blad__no{color:var(--navy-900); font-weight:600; font-variant-numeric:tabular-nums}
.blad__name{color:var(--stone-500)}
.blad__name::before{content:"/"; margin-right:1em; color:var(--gold-text)}
.blad__ref{margin-left:auto; color:var(--stone-400); font-weight:400; letter-spacing:.1em}
.band-dark .blad{border-bottom-color:rgba(201,169,97,.28)}
.band-dark .blad__no{color:var(--white)}
.band-dark .blad__name{color:var(--paper-300)}
.band-dark .blad__name::before{color:var(--gold-300)}
.band-dark .blad__ref{color:var(--paper-300)}
@media (max-width:560px){
  .blad__ref{margin-left:0; flex-basis:100%}
}
/* Op smalle schermen zweeft het blad iets van de schermrand af */
@media (max-width:640px){
  .sheet{padding-inline:12px}
  .sheet > .container{padding-inline:clamp(16px,4vw,22px)}
}

/* Kaartnummer: mono, klein, in de kantlijn van de kaart. Vervangt de
   inline-gestylede nummer-div op de homepage-methodekaarten. */
.card__no{
  display:block; margin-bottom:.7rem;
  font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; color:var(--gold-text);
  font-variant-numeric:tabular-nums;
}
.band-dark .card__no{color:var(--gold-300)}

/* Kopblok van een blad. Breedte varieert per blad: smal voor leestekst,
   breed waar de inhoud de ruimte vult. */
.sheet__head{max-width:62ch; margin-bottom:clamp(28px,4vw,52px)}
.sheet__head .h2{text-wrap:balance}
.sheet__head .lead{margin-top:1rem}
.sheet__head--wide{max-width:none}
.sheet__body--narrow{max-width:74ch}

/* Metrics-balk op een donkere band: kader en cijfers in licht accentgoud */
.band-dark .metrics{background:transparent}
.band-dark .metrics,.band-dark .metric{border-color:rgba(201,169,97,.20)}
.band-dark .metric__num{color:var(--gold-300)}
.band-dark .metric__label{color:var(--paper-300)}
.sheet .metrics::before,.sheet .metrics::after{display:none}

/* Op een donkere band moet de spookknop licht zijn */
.band-dark .btn--ghost{color:var(--paper); border-color:rgba(231,207,153,.4)}
.band-dark .btn--ghost:hover{border-color:var(--gold-400); color:var(--gold-300)}

/* =====================================================================
   DOSSIER-TAAL, FASE 2: homepage-compositie en bewijslaag
   ===================================================================== */

/* Typografisch monument: één zin, groot, als op zichzelf staand blad */
.monument{padding-block:clamp(64px,10vw,140px)}
.monument__line{
  font-family:var(--f-serif); font-style:italic; font-weight:500;
  font-size:clamp(2.2rem,6.5vw,5rem); line-height:1.12; letter-spacing:0;
  color:var(--navy-900); max-width:20ch; text-wrap:balance;
}
.monument__line em{color:var(--gold-600); font-style:italic}
.monument__body{
  margin-top:clamp(1.6rem,3vw,2.4rem); max-width:60ch;
  padding-left:clamp(18px,3vw,30px); border-left:3px solid var(--gold-500);
  color:var(--stone-500); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.72;
}

/* Tekenblad-blad met de isometrische bloktekening (blueprint-idioom) */
.blockdraw{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:840px){.blockdraw{grid-template-columns:1fr; gap:28px}}
.blockdraw__fig{
  position:relative; border:var(--hair-gold); background:var(--navy-900);
  padding:clamp(20px,3vw,40px);
}
.blockdraw__fig svg{width:100%; height:auto; display:block}
.blockdraw__spec{list-style:none; margin:0; padding:0; counter-reset:bd}
.blockdraw__spec li{
  position:relative; padding:.8rem 0 .8rem 2.6rem;
  border-top:1px solid color-mix(in srgb, currentColor 20%, transparent);
  font-size:.97rem; line-height:1.55;
}
.blockdraw__spec li:last-child{border-bottom:1px solid color-mix(in srgb, currentColor 20%, transparent)}
.blockdraw__spec li::before{
  counter-increment:bd; content:counter(bd, decimal-leading-zero);
  position:absolute; left:0; top:1rem; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.06em; color:var(--gold-text);
}
.band-dark .blockdraw__spec li::before{color:var(--gold-400)}
.blockdraw__spec b{font-family:var(--f-mono); font-weight:500; font-size:.86em; letter-spacing:.03em}

/* Eigendomsstrip: wie doet wat (Zenith3E engineert + levert, aannemer bouwt) */
.owns{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:.6rem; align-items:stretch;
  margin-top:clamp(30px,4vw,48px); border-top:1px solid var(--stone-300);
  border-bottom:1px solid var(--stone-300);
}
.owns__step{padding:clamp(16px,2.4vw,24px) 0}
.owns__who{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text)}
.owns__what{margin-top:.4rem; font-family:var(--f-display); font-weight:600; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.25; letter-spacing:-.01em; color:var(--navy-900)}
.owns__arrow{align-self:center; color:var(--gold-500)}
.band-dark .owns{border-color:rgba(201,169,97,.28)}
.band-dark .owns__what{color:var(--white)}
.band-dark .owns__who{color:var(--gold-300)}
@media (max-width:720px){
  .owns{grid-template-columns:1fr}
  .owns__step{border-top:1px solid var(--stone-200); padding:14px 0}
  .owns__step:first-child{border-top:0}
  .owns__arrow{display:none}
}

/* "Zenith3E is nieuw, System3E is dat niet": frontaal twee kolommen */
.origin{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--stone-300)}
@media (max-width:720px){.origin{grid-template-columns:1fr}}
.origin__col{padding:clamp(22px,3vw,36px)}
.origin__col+.origin__col{border-left:1px solid var(--stone-300)}
@media (max-width:720px){.origin__col+.origin__col{border-left:0; border-top:1px solid var(--stone-300)}}
.origin__k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); display:block; margin-bottom:.7rem}
.origin__name{font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.02em; color:var(--navy-900); margin-bottom:.5rem}
.origin__col p{color:var(--stone-500); font-size:.95rem; line-height:1.62}
.origin__fact{margin-top:.9rem; font-family:var(--f-serif); font-style:italic; color:var(--gold-600); font-size:1.15rem}
.band-dark .origin,.band-dark .origin__col+.origin__col{border-color:rgba(201,169,97,.24)}
.band-dark .origin__name{color:var(--white)}
.band-dark .origin__col p{color:var(--paper-300)}
.band-dark .origin__k{color:var(--gold-300)}

/* Projectregister: tabel van gerealiseerde projecten */
.register{width:100%; border-collapse:collapse; font-size:.95rem; margin-top:clamp(20px,3vw,32px)}
.register caption{text-align:left; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); padding-bottom:.9rem}
.register th{
  text-align:left; font-family:var(--f-mono); font-weight:500; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500);
  padding:.6rem .9rem .6rem 0; border-bottom:1px solid var(--stone-300);
}
.register td{padding:.85rem .9rem .85rem 0; border-bottom:1px solid var(--stone-200); vertical-align:top; color:var(--ink)}
.register td:first-child{font-family:var(--f-mono); font-size:.78rem; color:var(--gold-text); width:2.5rem; white-space:nowrap}
.register .register__name{font-weight:600}
.register tr:hover td{background:rgba(201,169,97,.05)}
.band-dark .register th{color:var(--paper-300); border-color:rgba(201,169,97,.28)}
.band-dark .register td{color:var(--white); border-color:rgba(201,169,97,.14)}
.band-dark .register td:first-child{color:var(--gold-300)}
.band-dark .register tr:hover td{background:rgba(201,169,97,.08)}
@media (max-width:640px){
  .register,.register tbody,.register tr,.register td{display:block; width:100%}
  .register thead{display:none}
  .register tr{border-bottom:1px solid var(--stone-300); padding:.7rem 0}
  .register td{border:0; padding:.15rem 0}
  .register td:first-child{width:auto}
  .band-dark .register tr{border-color:rgba(201,169,97,.24)}
}

/* Marktcontext-subbladen: mini-kop + kort blok + één cijfer als anker */
.subsheet{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); padding-block:clamp(26px,4vw,44px); border-top:1px solid var(--stone-300)}
.subsheet:first-of-type{border-top:0}
.subsheet__anchor{font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-600); font-size:clamp(2rem,4vw,3.2rem); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.subsheet__k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); display:block; margin-bottom:.7rem}
.subsheet__body p{color:var(--stone-500); font-size:1rem; line-height:1.72}
.subsheet__body p+p{margin-top:.9rem}
@media (max-width:640px){
  .subsheet{grid-template-columns:1fr; gap:10px}
  .subsheet__anchor{font-size:2.2rem}
}

/* =====================================================================
   DOSSIER-TAAL, FASE 3: binnenpagina's (pakket, perliet, projecten,
   werkwijze, contact)
   Rolt de bladtaal uit naar de binnenpagina's en vervangt de daar
   sterkst herhaalde inline-stijlpatronen door klassen: de cijfertrio's
   op de pakketpagina, de omkaderde sub-blokken, de kleine kaarttekst.
   Volledig additief; alleen actief binnen .sheet of via nieuwe klassen.
   ===================================================================== */

/* Cijfertrio op een blad: serif-cijfer, display-label, mono-noot.
   Vervangt de losse inline-gestylede statblokken (90% / 42% / 65-80% ...). */
.figrow{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.6vw,30px); margin-top:clamp(24px,3.4vw,40px)}
.figrow--2{grid-template-columns:repeat(2,1fr)}
.fig{border-top:2px solid var(--navy-900); padding-top:1rem}
.fig__n{font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-600);
  font-size:clamp(2.3rem,3.8vw,3.3rem); line-height:1; font-variant-numeric:tabular-nums}
.fig__k{margin:.55rem 0 .35rem; font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:var(--navy-900)}
.fig p{margin:0; font-size:.9rem; color:var(--stone-500); line-height:1.6}
.band-dark .fig{border-top-color:rgba(201,169,97,.4)}
.band-dark .fig__k{color:var(--white)}
.band-dark .fig p{color:var(--paper-300)}
@media (max-width:720px){.figrow,.figrow--2{grid-template-columns:1fr}}

/* Omkaderd sub-blok binnen een blad (dakopbouw, energieopslag, 3D-ontwerp).
   Vervangt de losse inline border-top + padding-blokken. */
.subpanel{border:1px solid var(--stone-300); border-left:3px solid var(--gold-500);
  padding:clamp(22px,3vw,38px); margin-top:clamp(30px,4vw,52px)}
.subpanel > :first-child{margin-top:0}
.band-dark .subpanel{border-color:rgba(201,169,97,.28); border-left-color:var(--gold-500)}

/* Kleine kaarttekst binnen een blad: de herhaalde inline
   "font-size:.92rem; color:var(--stone-500); line-height:1.65". */
.sheet .card h3{font-size:1.05rem; margin-bottom:.6rem}
.sheet .card p{font-size:.93rem; color:var(--stone-500); line-height:1.65}

/* Serif-cijfer bovenin een kaart (perliet-eigenschappen). Vervangt de
   herhaalde inline serif-cijfer-div. */
.fignum{display:block; margin-bottom:.6rem; font-family:var(--f-serif); font-style:italic;
  font-weight:500; color:var(--gold-600); font-size:clamp(2rem,3.4vw,2.7rem); line-height:1;
  font-variant-numeric:tabular-nums}
.band-dark .fignum{color:var(--gold-400)}

/* Certificaatkaart op een blad: compacte kop (systeemkaart-kop is groter). */
.sheet .syscard h3{font-size:1.08rem; margin-bottom:.55rem}
.sheet .syscard p{font-size:.9rem}

/* Bronregel onder een cijfer- of specblok. */
.srcline{font-size:.8rem; color:var(--stone-500); margin:clamp(10px,1.6vw,16px) 0 0}