/* Self-hosted fonts (Space Grotesk / Inter Tight / JetBrains Mono, latin + latin-ext).
   Byte-identiek aan Google Fonts; gegenereerd door research/fonts/build-fonts.mjs.
   Geen externe font-CDN -> geen bezoekers-IP naar Google (privacy). */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* kleur */
  --bg:#050D1A; --s1:#0B2138; --s2:#102A47; --s3:#15315B;          /* navy-trappen, s3 = merk-navy */
  --line:rgba(180,196,220,.14); --line2:rgba(180,196,220,.30);     /* staal-keylines */
  --text:#EAF0F8; --muted:#9FB0C8; --faint:#8A9CB8;
  --copper:#C8855A; --copper-br:#DCA878; --on-copper:#1A0F06; --copper-link:#D49468;

  /* type — fluid */
  --display: clamp(44px, 6vw, 80px);   /* hero h1 */
  --h2: clamp(30px, 3.4vw, 46px);
  --h3: clamp(18px, 1.5vw, 21px);
  --body: 17px;
  --mono: 11px;

  /* ritme */
  --section-pad: clamp(56px, 7vw, 104px);
  --container: 1200px;
  --radius: 8px; --radius-card:14px; --grid:28px;

  --ff-head:'Space Grotesk', system-ui, sans-serif;
  --ff-body:'Inter Tight', system-ui, sans-serif;
  --ff-mono:'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:var(--body);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--ff-head);font-weight:700;letter-spacing:-.02em;line-height:1.03;margin:0;}
p{margin:0;}
:focus-visible{outline:2px solid var(--copper-br);outline-offset:3px;border-radius:2px;}

/* ---------- statische blauwdruk-achtergrond (alle modi) ---------- */
.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* glow rechtsboven (navy-blauw) → vignette (donkere randen) → vlakke basis */
  background:
    radial-gradient(85% 90% at 88% 6%, rgba(42,96,165,.42), transparent 55%),
    radial-gradient(130% 120% at 50% 8%, transparent 58%, rgba(2,6,14,.55)),
    var(--bg);
}
/* vage product-venster-schets rechtsboven; laag in opacity, decoratief */
.bg-sketch{
  position:absolute;
  top:clamp(44px,6vw,84px);
  right:clamp(40px,4.5vw,84px);
  width:clamp(240px,20vw,380px);
  height:auto;
  transition:opacity .5s ease;   /* dim-haak tijdens de showcase-pin (Task 3) */
}
.bs-line{stroke:rgba(180,196,220,.15);stroke-width:1.4;fill:none;stroke-linejoin:round;stroke-linecap:round;}
.bs-dash{stroke:rgba(180,196,220,.10);stroke-width:1;fill:none;stroke-dasharray:4 5;}
.bs-mark{stroke:rgba(180,196,220,.10);stroke-width:1;fill:none;stroke-linecap:round;}
.bs-copper{stroke:rgba(200,133,90,.27);stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round;}
.bs-copper-dot{fill:rgba(200,133,90,.32);}
/* schets dimt zacht weg zolang de showcase gepind is (glow/navy/korrel blijven) */
.bg-layer.sketch-dim .bg-sketch{opacity:0;}
@media (max-width:768px){
  .bg-sketch{display:none;}
}

/* ---------- grain-overlay ---------- */
.grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.section{
  position:relative;
  z-index:2;
  padding-block:var(--section-pad);
}

/* ---------- nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(8,23,41,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  gap:24px;
  min-height:64px;
}
.nav-logo img{height:36px;width:auto;}
.nav-links{
  display:flex;
  gap:28px;
  margin-left:auto;
  font-family:var(--ff-mono);
  font-size:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
/* koper-underline-wipe: gradient-rechthoek als achtergrond, 0% breed in rust, 100% bij hover/focus.
   multiline-veilig en raakt geen knoppen/arrow-links (alleen .nav-links a). */
.nav-links a{
  color:var(--muted);
  background-image:linear-gradient(var(--copper),var(--copper));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:color .2s, background-size .25s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text);background-size:100% 1px;}
.nav-cta{margin-left:0;}

/* ---------- mobiele nav: hamburger + drawer ---------- */
.nav-burger{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; margin-left:auto;  /* column = lijntjes gestapeld; auto = duw naar rechterhoek (nav-links is mobiel display:none) */
  position:relative; z-index:60;  /* boven de open drawer (z40) zodat de X als sluitknop zichtbaar + klikbaar blijft */
  background:transparent; border:1px solid var(--line2); border-radius:var(--radius);
  cursor:pointer;
}
.nav-burger-line{display:block; width:18px; height:1.5px; background:var(--text); transition:transform .2s, opacity .2s;}
.nav-burger-line + .nav-burger-line{margin-top:5px;}
.nav-open .nav-burger-line:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav-open .nav-burger-line:last-child{transform:translateY(-3.25px) rotate(-45deg);}

.nav-drawer{
  position:fixed; left:0; right:0; top:0; z-index:40;
  padding:84px 20px 28px; background:var(--s1); border-bottom:1px solid var(--line2);
  transform:translateY(-100%); transition:transform .26s ease; will-change:transform;
}
.nav-open .nav-drawer{transform:translateY(0);}
.nav-drawer-links{display:flex; flex-direction:column; gap:6px;}
.nav-drawer-links a{padding:12px 4px; color:var(--text); font-family:var(--ff-head); font-size:20px; border-bottom:1px solid var(--line);}
.nav-drawer-cta{margin-top:14px; text-align:center;}
@media (prefers-reduced-motion: reduce){
  .nav-drawer{transition:none;}
  .nav-burger-line{transition:none;}
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 20px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s, background .2s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--copper),var(--copper-br));
  color:var(--on-copper);
  font-weight:500;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(200,133,90,.28);}
.btn-secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--line2);
}
.btn-secondary:hover{border-color:var(--copper-br);color:var(--copper-br);}

/* ---------- mono-label ---------- */
.mono-label{
  font-family:var(--ff-mono);
  font-size:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}
.mono-label.copper{color:var(--copper);}

/* ---------- hoek-keylines (blauwdruk) ---------- */
.crn-frame{position:relative;}
.crn{
  position:absolute;
  width:16px;height:16px;
  border:1px solid var(--line2);
  pointer-events:none;
}
.crn.tl{top:0;left:0;border-right:0;border-bottom:0;}
.crn.tr{top:0;right:0;border-left:0;border-bottom:0;}
.crn.bl{bottom:0;left:0;border-right:0;border-top:0;}
.crn.br{bottom:0;right:0;border-left:0;border-top:0;}

/* ---------- hero (00) ---------- */
.hero{
  display:flex;
  align-items:center;
  min-height:calc(100svh - 64px);
  padding-block:clamp(56px,8vh,110px);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.hero-label{margin-bottom:22px;}
.hero-h1{font-size:var(--display);margin:0 0 26px;}
.hero-h1 .line{display:block;overflow:hidden;}
.hero-h1 .line-in{display:block;}
.hero-sub{
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
  max-width:46ch;
  margin:0 0 32px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.hero-byline{color:var(--faint);}

/* ---------- herbruikbaar fotokader + CSS-duotone (hero + maker) ---------- */
.photo-frame{
  position:relative;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:var(--radius-card);
  padding:clamp(12px,1.4vw,18px);
  margin:0;
}
.photo-clip{
  position:relative;
  aspect-ratio:4/5;
  border-radius:6px;
  overflow:hidden;
  background:var(--s1);
  isolation:isolate;            /* houd blend-modes binnen dit kader */
}
.photo-duotone{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* lichte grading: foto blijft grotendeels natuurlijk, alleen iets ontkleurd + opgehelderd */
  filter:grayscale(.45) brightness(1.06) contrast(.98) sepia(.08);
}
.photo-clip::after{
  content:"";position:absolute;inset:0;
  /* zachte navy/koper-tint zodat de foto in het palet valt, zonder te verdonkeren */
  background:linear-gradient(155deg, rgba(8,23,41,.26), rgba(200,133,90,.10) 72%);
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.photo-node{
  position:absolute;top:-4px;right:-4px;
  width:8px;height:8px;
  background:var(--copper);
  transform:rotate(45deg);
}
.photo-cap{
  position:absolute;left:50%;bottom:-2px;
  transform:translateX(-50%) translateY(150%);
  color:var(--faint);font-size:10px;white-space:nowrap;
}

.hero-portrait{
  position:relative;
  width:min(100%,360px);
  margin-inline:auto;
  transform:translateX(clamp(-48px,-2.5vw,-16px)); /* desktop: iets naar links, weg van de RS-schets */
}

@media (max-width:900px){
  .hero-portrait{width:min(72%,300px);order:-1;margin-bottom:18px;transform:none;}
}

/* full-modus: te animeren elementen vóór de GSAP-reveal verbergen */
[data-motion="full"] .hero [data-anim]{opacity:0;transform:translateY(16px);}
[data-motion="full"] .hero [data-anim-photo]{opacity:0;}
[data-motion="full"] .hero .photo-clip{clip-path:inset(100% 0% 0% 0%);}
[data-motion="full"] .hero .photo-node{opacity:0;transform:rotate(45deg) scale(.5);}
[data-motion="full"] .hero .line-in[data-line]{transform:translateY(110%);}
[data-motion="full"] .hero .crn{opacity:0;transform:scale(.4);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-sub{max-width:100%;}
}

/* ---------- premisse (01) ---------- */
.premise-label{margin-bottom:clamp(28px,5vh,56px);}
.premise-statement{
  font-family:var(--ff-head);
  font-weight:700;
  font-size:clamp(30px,4.4vw,58px);
  line-height:1.18;
  letter-spacing:-.02em;
  max-width:20ch;
  color:var(--muted);
}
.premise-statement .accent{color:var(--text);}

/* full-modus: woorden faint vóór de scrub ze vult */
[data-motion="full"] #s01 [data-word]{opacity:.15;}

/* ---------- diensten (02) ---------- */
.icon-sprite{position:absolute;}
.s02-head{margin-bottom:clamp(28px,4vh,52px);}
.s02-label{margin-bottom:20px;}
.s02-h2{font-size:var(--h2);max-width:20ch;margin-bottom:18px;}
.s02-intro{color:var(--muted);font-size:18px;line-height:1.55;max-width:56ch;}

.s-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.scard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:13px;
  background:var(--s1);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:28px 26px 24px;
}
.scard .s-idx{
  position:absolute;
  top:18px;
  right:20px;
  font-size:10px;
  color:var(--faint);
}
.scard .s-ic{
  width:34px;
  height:34px;
  color:var(--text);
}
.scard h3{font-size:var(--h3);margin-top:4px;}
.scard p{color:var(--muted);font-size:15px;line-height:1.55;}
.scard .s-more{
  margin-top:auto;
  padding-block:9px;  /* tap-target ~29px (WCAG 2.2 SC 2.5.8) */
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--copper-link);
}
.scard .s-more .arr{transition:transform .2s ease;}
.scard:hover .s-more .arr{transform:translateX(3px);}

/* meetlijn onder de kop: statische staal-lijn in light/reduced; in full tekent JS hem.
   De kop-margin wordt iets verkleind zodat de lijn + zijn eigen marge geen dubbele leegte maken. */
.s02-head{margin-bottom:clamp(24px,3.5vh,40px);}
.s02-rule{position:relative;height:1px;margin-bottom:clamp(28px,4vh,44px);overflow:hidden;}
.s02-rule-ink{
  display:block;width:100%;height:100%;
  background:var(--line);
  transform-origin:left center;
}

/* gestaffelde IO-fade in light/reduced (full overschrijft de transition hieronder) */
#s02 .scard:nth-child(2){transition-delay:.06s;}
#s02 .scard:nth-child(3){transition-delay:.12s;}
#s02 .scard:nth-child(4){transition-delay:.06s;}
#s02 .scard:nth-child(5){transition-delay:.12s;}
#s02 .scard:nth-child(6){transition-delay:.18s;}

/* full-modus: JS tekent de blueprint-opbouw. Pre-hide gebeurt via transparante achtergrond/rand
   + verborgen inhoud, NIET via card-opacity (anders is de geïnjecteerde pen ook verborgen). */
[data-motion="full"] #s02 .s02-rule-ink{transform:scaleX(0);background:var(--copper-br);}
[data-motion="full"] #s02 .scard{
  /* opacity:1 + transform:none overschrijven de globale [data-reveal]-basisregel
     (verderop in dit bestand), zodat de kaart in full structureel ALTIJD zichtbaar is en
     de IntersectionObserver-fade hem niet stiekem mee-stuurt. Zichtbaarheid loopt hier
     puur via transparante achtergrond/rand + verborgen inhoud + .is-built. */
  opacity:1;
  transform:none;
  background:transparent;
  border-color:transparent;
  transition:transform .25s ease, box-shadow .25s ease;
}
[data-motion="full"] #s02 .scard.is-built{background:var(--s1);border-color:var(--line);}
[data-motion="full"] #s02 .scard > :not(.scard-pen){opacity:0;}
[data-motion="full"] #s02 .scard:hover{
  transform:translateY(-4px);
  border-color:var(--copper);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}

/* de pen: geïnjecteerde SVG-rand-overlay (plat 1px, geen glow) */
.scard-pen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.scard-pen rect{
  fill:none;
  stroke:var(--copper-br);
  stroke-width:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}

@media (max-width:900px){
  .s-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .s-grid{grid-template-columns:1fr;}
}

/* ---------- productshowcase (03) ---------- */
.showcase{padding-bottom:0;}
.sc-head{margin-bottom:clamp(28px,4vh,48px);}
.sc-head .mono-label{margin-bottom:18px;}
.sc-h2{font-size:var(--h2);max-width:18ch;margin-bottom:16px;}
.sc-intro{color:var(--muted);font-size:18px;line-height:1.55;max-width:52ch;}

.sc-viewport{position:relative;overflow:hidden;}
.sc-track{display:grid;padding-bottom:clamp(28px,3.5vh,48px);}
.sc-panel{
  grid-area:1 / 1;            /* alle panelen in dezelfde cel: viewport groeit naar het hoogste paneel */
  display:block;width:100%;
  opacity:0;visibility:hidden;transform:translateX(2%);
  pointer-events:none;
  /* default cross-fade: geldt in light + reduced (daar draait geen GSAP-timeline) */
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.sc-panel.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .45s ease, transform .45s ease;
}
/* full: de GSAP-timeline (Fase 4) stuurt opacity/transform via inline-styles -> geen CSS-transitie.
   transform:none neutraliseert de translateX(2%)-rusttoestand: zonder transitie zou een paneel die
   2% instant springen zodra het .is-active verliest (zichtbare tik naar rechts bij het wegfaden).
   In full komt de horizontale beweging van de shot (xPercent), niet van het paneel zelf. */
[data-motion="full"] .sc-panel,
[data-motion="full"] .sc-panel.is-active{transition:none;transform:none;}

/* layout B: frame = positioneer-container; vaste 16:9 stage + zwevende tekstkaart (desktop) */
.sc-frame{
  position:relative;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  border-radius:var(--radius-card);
  overflow:hidden;
}
.sc-stage{
  position:relative;
  aspect-ratio:16/9;                 /* gelijke hoogte alle 7, geen sprong bij wisselen */
  background:radial-gradient(120% 130% at 50% 8%, var(--s2), var(--bg) 70%);
  border:1px solid var(--line2);
  border-radius:var(--radius-card);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.sc-stage-glow{
  position:absolute;left:50%;top:46%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(42,96,165,.20), transparent 64%);pointer-events:none;
}
.sc-shot{
  position:relative;width:100%;height:100%;object-fit:contain;display:block;
}
/* registratiehoeken op de stage (blueprint) */
.sc-stage::before,.sc-stage::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--line2);pointer-events:none;z-index:2;
}
.sc-stage::before{top:10px;left:10px;border-right:0;border-bottom:0;}
.sc-stage::after{bottom:10px;right:10px;border-left:0;border-top:0;}
/* mono-index rechtsboven als donkere blueprint-tag: 16:9-shot vult de stage (geen negatieve
   ruimte), dus de teller krijgt een eigen donker chipje -> leesbaar over LICHTE shots
   (Hearth/Fielddynamix/ShuttersAssist) en blendt netjes over donkere. */
.sc-count{
  position:absolute;top:14px;right:14px;z-index:3;
  color:var(--copper);letter-spacing:.18em;font-variant-numeric:tabular-nums;
  background:rgba(5,13,26,.82);
  border:1px solid var(--line2);
  border-radius:6px;
  padding:5px 9px;
  backdrop-filter:blur(4px);
}
/* zwevende tekstkaart linksonder (desktop overlay).
   Achtergrond praktisch solide (.96) + diepe navy: garandeert WCAG AA voor --text/--muted/--copper
   ongeacht het beeld eronder, zodat axe nooit een contrast-violation meet. blur is enkel sfeer. */
.sc-card{
  position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);z-index:3;
  width:min(36%,340px);
  background:rgba(5,13,26,.96);backdrop-filter:blur(8px);
  border:1px solid var(--line2);border-radius:var(--radius-card);
  padding:clamp(15px,1.4vw,19px) clamp(18px,1.7vw,23px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.sc-lockup{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.sc-logo{height:30px;width:auto;max-width:180px;object-fit:contain;display:block;}
.sc-frame h3{font-size:clamp(20px,1.9vw,26px);margin:0;}
/* wordmark-logo (Fixr): toon alleen het logo; de naam blijft sr-only voor schermlezers/outline */
.sc-lockup--wordmark .sc-logo{height:32px;}
.sc-lockup--wordmark h3{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.sc-tag{color:var(--text);font-size:clamp(15px,1.2vw,17px);line-height:1.35;margin:0 0 11px;}
.sc-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-link);
}
.sc-link span{transition:transform .2s ease;}
.sc-link:hover span{transform:translateX(3px);}

/* slider-controls = gecentreerde "instrument-readout" onder de stage, uitgelijnd op de stage-breedte */
.sc-controls{
  max-width:var(--container);
  margin:14px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
/* readout-rij: prev/next-pijlen flankeren de teller */
.sc-readout{display:flex;align-items:center;justify-content:center;gap:22px;}
.sc-progress{display:flex;align-items:baseline;gap:8px;margin:0;font-family:var(--ff-mono);}
.sc-progress-count{color:var(--copper);font-size:24px;line-height:1;font-variant-numeric:tabular-nums;}
.sc-progress-total{color:var(--faint);font-size:12px;letter-spacing:.1em;}
/* gecentreerde voortgangsbalk */
.sc-progress-bar{position:relative;width:min(340px,72vw);height:2px;background:var(--line2);}
.sc-progress-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--copper);transition:width .45s ease;}
/* prev/next-knoppen */
.sc-nav-btn{
  flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--text);
  font-size:18px;cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.sc-nav-btn:hover{border-color:var(--copper);color:var(--copper);}
.sc-nav-btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}
/* genummerde naam-index, gecentreerd onder de balk */
.sc-index{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:0;padding:0;}
.sc-index button{
  background:none;border:0;cursor:pointer;padding:6px 2px;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.sc-index button i{color:var(--faint);font-style:normal;margin-right:7px;}
.sc-index button:hover{color:var(--text);}
.sc-index button.is-active{color:var(--copper);border-bottom-color:var(--copper);}
.sc-index button.is-active i{color:var(--copper);}
.sc-index button:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}

/* desktop-compacter: showcase + sticky header in één viewport. Cards ietsjes kleiner
   (max-width omlaag; 16:9 + object-fit:contain schalen mee, geen beeld-crop), tekst erboven
   en controls eronder dichter erop. Mobiel (<=900px) blijft volledig ongemoeid. */
@media (min-width:901px){
  .showcase{padding-top:clamp(40px,5vw,68px);}
  .sc-head{margin-bottom:clamp(18px,2.5vh,28px);}
  .sc-frame{max-width:1040px;}
  .sc-track{padding-bottom:clamp(16px,2vh,28px);}
  .sc-controls{max-width:1040px;margin-top:8px;gap:10px;}
}

/* mobiel/tablet: kaart onder de stage (geen overlay), stage iets hoger (4:3) */
@media (max-width:900px){
  .sc-stage{aspect-ratio:4/3;}
  .sc-card{
    position:static;width:auto;
    background:transparent;backdrop-filter:none;border:0;box-shadow:none;
    padding:20px 2px 0;margin-top:18px;
  }
  .sc-count{top:14px;right:16px;}
}

/* mobiel: naam-index wordt dots (alleen de nummers) */
@media (max-width:760px){
  .sc-index{gap:10px;}
  .sc-index button{font-size:0;padding:0;}                 /* naam verbergen -> dots */
  .sc-index button i{font-size:11px;margin:0;}             /* nummer blijft */
}

/* reduced-motion: GEEN transition:none meer op .sc-panel. Anders won dit op bronvolgorde en
   snapt de showcase i.p.v. de spec-vereiste nette cross-fade (grill-vondst Fase 3). De fade
   staat in .sc-panel hierboven; alleen full krijgt transition:none (GSAP stuurt daar). */

/* ---------- de maker (04) ---------- */
.maker-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(30px,4vw,56px);
  align-items:center;
}
.maker-portrait{display:flex;justify-content:center;}
.portrait-frame{
  position:relative;
  width:min(100%,340px);
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:var(--radius-card);
  padding:clamp(18px,2.4vw,30px);
}
.portrait-frame .photo-clip{width:100%;}

.maker-label{margin-bottom:20px;}
.maker-name{font-size:var(--h2);margin-bottom:10px;}
.maker-role{color:var(--copper);margin-bottom:26px;}
.maker-text{
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  max-width:54ch;
  margin-bottom:18px;
}
.maker-text:last-of-type{margin-bottom:0;}

.maker-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:clamp(32px,4vh,48px) 0 0;
  padding-top:clamp(28px,4vh,40px);
  border-top:1px solid var(--line);
}
.maker-stats .stat{display:flex;flex-direction:column;gap:8px;}
.stat-num{
  font-family:var(--ff-head);
  font-weight:700;
  font-size:clamp(34px,3.6vw,52px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--copper);
  font-variant-numeric:tabular-nums;
}
/* tellend getal: vaste breedte + rechts uitgelijnd zodat de count-up (0 -> 10/20) naar links vult
   en de "+" nooit verspringt (non-reflow). 2ch dekt de 2-cijferige eindwaarden. */
.stat-val{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;}
.stat-num--word{letter-spacing:-.01em;}
.stat-plus{color:var(--copper-br);}
.stat-label{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.4;
}

@media (max-width:900px){
  .maker-grid{grid-template-columns:1fr;gap:40px;}
  .maker-portrait{order:-1;}
  .portrait-frame{width:min(72%,300px);}
  .maker-text{max-width:100%;}
}
@media (max-width:560px){
  .maker-stats{grid-template-columns:1fr;gap:22px;text-align:left;}
}

/* ---------- testimonials (05) ---------- */
.t-head{margin-bottom:clamp(32px,5vh,60px);}
.t-label{margin-bottom:20px;}
.t-h2{font-size:var(--h2);margin-bottom:14px;}
.t-sub{color:var(--muted);font-size:18px;}

.t-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:18px;
  align-items:stretch;
}
.t-col{display:grid;grid-template-rows:1fr 1fr;gap:18px;}

.tcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--s1);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:28px 26px 24px;
  transition:transform .25s ease, border-color .25s ease;
}
.tcard:hover{transform:translateY(-2px);border-color:var(--line2);}
.tcard .t-idx{
  position:absolute;
  top:18px;
  right:20px;
  font-size:10px;
  color:var(--faint);
}
.t-quote{
  margin:0 0 22px;
  font-family:var(--ff-body);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
}
.tcard--feat .t-quote{
  font-family:var(--ff-head);
  font-weight:500;
  font-size:clamp(20px,1.9vw,26px);
  line-height:1.4;
  letter-spacing:-.01em;
  margin-bottom:0;
}
.tcard--feat .t-ln{display:block;}
.t-accent{color:var(--copper-br);}

/* metric-blok: before/after-gauge, gecentreerd in de featured-kaart */
.t-metric{margin:auto 0;}
.t-metric-row{display:flex;align-items:baseline;gap:12px;white-space:nowrap;font-family:var(--ff-head);font-weight:700;letter-spacing:-.02em;}
.t-mfrom{font-size:clamp(30px,3vw,38px);color:var(--muted);}
.t-marrow{font-size:22px;color:var(--faint);}
.t-mto{font-size:clamp(40px,4.4vw,54px);color:var(--copper-br);line-height:1;}
.t-count{font-variant-numeric:tabular-nums;}
.t-munit{font-size:20px;color:var(--copper-br);font-weight:600;font-family:var(--ff-mono);}
.t-mlabel{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:10px;}
.t-gauge{margin-top:14px;}
.t-bar{position:relative;height:4px;border-radius:2px;background:rgba(180,196,220,.12);}
.t-fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--copper),var(--copper-br));transform-origin:left center;transform:scaleX(1);}
.t-tick{position:absolute;top:50%;left:100%;width:11px;height:11px;border-radius:50%;background:var(--copper-br);box-shadow:0 0 0 4px rgba(200,133,90,.22);transform:translate(-50%,-50%);}

.t-attr{display:flex;align-items:center;gap:13px;margin-top:18px;}
.tcard--feat .t-attr{margin-top:0;}
.t-av{
  flex:none;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--copper);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--copper-br);
}
.t-who{display:flex;flex-direction:column;gap:2px;}
.t-name{font-family:var(--ff-head);font-weight:600;font-size:15px;color:var(--text);}
.t-role{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}

@media (max-width:820px){
  .t-grid{grid-template-columns:1fr;}
  .t-col{grid-template-rows:auto auto;}
}

/* ---------- Proof-blok (05) — cijfers + 1 quote, hergebruikt #s04/#s05-componenten ---------- */
.proof-label{margin-bottom:clamp(28px,4vh,44px);}
.proof-grid{display:flex;flex-direction:column;gap:clamp(32px,5vh,52px);}
.proof-grid .maker-stats{margin:0;}
.proof-grid .t-grid{display:block;}                 /* geen 2e kolom: alleen de featured kaart */
.proof-grid .tcard--feat{max-width:none;}
/* gauge-balk + marker eruit in de brede proof-kaart (liep onevenredig over de volle breedte);
   de "45 -> 5 min" before/after-cijfers blijven (die zitten in .t-metric-row, niet in .t-gauge). */
#s-proof .t-gauge{display:none;}
/* metric-spacing in proof (gauge weg): label net onder de cijfers (in hun lege descender-ruimte
   getrokken, maar niet gepropt), en duidelijke lucht vóór de attributie. Alleen proof. */
#s-proof .t-mlabel{margin-top:-6px;}
#s-proof .tcard--feat .t-attr{margin-top:20px;}
/* minder dode ruimte tussen het proof-blok en de afsluiter (Koens review) */
#s-proof{padding-bottom:clamp(28px,3.5vw,52px);}
#s06{padding-top:clamp(28px,3.5vw,52px);}
/* doorlink-voet: een dunne koperen maatlijn verankert de link rechts (blueprint-motief),
   zodat de link niet meer los onder de kaart zweeft. */
.proof-foot{
  display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  margin-top:clamp(22px,3vh,34px);
}
.proof-rule{
  flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,133,90,.45));
}
.proof-more{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  color:var(--copper);white-space:nowrap;
  transition:gap .2s, color .2s;
}
.proof-more:hover{gap:14px;color:var(--copper-br);}

/* full: featured kaart tekent zijn kader (spiegelt de oude #s05-regels). */
[data-motion="full"] #s-proof .tcard--feat{
  opacity:1;transform:none;
  background:transparent;border-color:transparent;
  transition:transform .25s ease;
}
[data-motion="full"] #s-proof .tcard--feat.is-built{background:var(--s1);border-color:var(--line);}
[data-motion="full"] #s-proof .tcard--feat .t-ln,
[data-motion="full"] #s-proof .tcard--feat .t-metric,
[data-motion="full"] #s-proof .tcard--feat .t-attr{opacity:0;}

/* gestaffelde IO-fade van de cijfers in light/reduced (spiegelt de oude #s04-delays) */
#s-proof .maker-stats .stat:nth-child(2){transition-delay:.1s;}
#s-proof .maker-stats .stat:nth-child(3){transition-delay:.2s;}

/* ---------- CTA + contact (06) ---------- */
.cta-frame{
  position:relative;
  overflow:hidden;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:var(--radius-card);
  padding:clamp(28px,4vw,56px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
.cta-intro .mono-label{margin-bottom:20px;}
.cta-h2{font-size:var(--h2);max-width:15ch;margin-bottom:14px;}
.cta-sub{color:var(--muted);font-size:18px;line-height:1.55;max-width:44ch;margin-bottom:clamp(26px,3.4vh,38px);}

.cta-channels{list-style:none;padding:0;margin:0;display:grid;gap:13px;}
.cta-ch-link{
  display:flex;align-items:center;gap:16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .2s, background .2s, transform .2s;
}
a.cta-ch-link:hover{border-color:var(--copper);background:rgba(200,133,90,.06);transform:translateX(2px);}
.cta-ch-link--static{cursor:default;}
.cta-ch-ic{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--line2);
  border-radius:var(--radius);
  color:var(--copper);
}
.cta-ch-ic svg{width:22px;height:22px;}
.cta-ch-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cta-ch-label{font-family:var(--ff-head);font-weight:600;font-size:15px;color:var(--text);word-break:break-word;}
.cta-ch-desc{font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);}

.cta-form-wrap{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:clamp(22px,2.6vw,32px);
}
.cta-form-wrap{align-self:center;}
.cta-form{display:flex;flex-direction:column;gap:15px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field-label{color:var(--faint);}
.field-input{
  width:100%;
  font-family:var(--ff-body);font-size:16px;color:var(--text);
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:var(--radius);
  padding:11px 13px;
  transition:border-color .2s;
}
.field-input:focus{outline:none;border-color:var(--copper);}
textarea.field-input{resize:vertical;min-height:96px;}
.cta-send{width:100%;margin-top:4px;position:relative;overflow:hidden;}
.cta-reassure{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.02em;
  color:var(--faint);text-align:center;margin-top:2px;
}

/* scan-line print (alleen full; base opacity:0 ⇒ onzichtbaar in light/reduced) */
.cta-scan{
  position:absolute;left:0;right:0;top:0;height:80px;
  pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(to bottom,transparent,rgba(220,168,120,.16),rgba(220,168,120,.55),rgba(220,168,120,.16),transparent);
}
.cta-send-sweep{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--copper),var(--copper-br));
  transform-origin:left center;transform:scaleX(0);
  pointer-events:none;
}
.cta-send-tx{position:relative;z-index:1;}

/* gestaffelde IO-fade in light/reduced */
#s06 .cta-intro > .cta-anim:nth-child(2){transition-delay:.05s;}
#s06 .cta-intro > .cta-anim:nth-child(3){transition-delay:.1s;}
#s06 .cta-ch:nth-child(2){transition-delay:.06s;}
#s06 .cta-ch:nth-child(3){transition-delay:.12s;}
#s06 .cta-ch:nth-child(4){transition-delay:.18s;}

/* full-modus: JS tekent het kader rond (zelfde pen-techniek als #s02) en laat de inhoud
   inpoppen. Pre-hide: kader transparant tot .is-built, inhoud verborgen tot GSAP ze toont. */
[data-motion="full"] #s06 .cta-frame{
  background:transparent;border-color:transparent;
}
[data-motion="full"] #s06 .cta-frame.is-built{background:var(--s1);border-color:var(--line2);}
[data-motion="full"] #s06 .cta-anim{opacity:0;}
[data-motion="full"] #s06 .cta-form-wrap{opacity:1;transform:none;}

@media (max-width:860px){
  .cta-frame{grid-template-columns:1fr;gap:32px;}
  .cta-sub{max-width:none;}
}

/* ============ Contact-pagina (#ct-body) ============ */
.ct-body{padding-block:clamp(8px,2vw,24px) clamp(56px,8vw,104px);}

/* kanalen-rij: 3 brede blueprint-kaarten naast elkaar */
.ct-channels{
  list-style:none;padding:0;margin:0 0 clamp(30px,4vw,48px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);
}
.ct-ch-link{
  height:100%;
  display:flex;align-items:center;gap:16px;
  padding:18px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  transition:border-color .2s, background .2s, transform .2s;
}
a.ct-ch-link:hover{border-color:var(--copper);background:rgba(200,133,90,.06);transform:translateY(-2px);}
.ct-ch--copper .ct-ch-link{border-color:rgba(200,133,90,.4);}
.ct-ch-ic{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  border:1px solid var(--line2);
  border-radius:var(--radius);
  color:var(--copper);
}
.ct-ch-ic svg{width:23px;height:23px;}
.ct-ch-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ct-ch-label{font-family:var(--ff-head);font-weight:600;font-size:16px;color:var(--text);word-break:break-word;}
.ct-ch-desc{font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);}

/* gestaffelde reveal: kaarten komen ná elkaar in (assembleert i.p.v. tegelijk poppen).
   Werkt in alle modi bovenop de globale [data-reveal]-fade. */
.ct-ch:nth-child(2){transition-delay:.07s;}
.ct-ch:nth-child(3){transition-delay:.14s;}

/* divider met blueprint-lijn + label */
.ct-sep{
  display:flex;align-items:center;gap:18px;
  margin:0 0 clamp(26px,3.4vw,40px);
}
.ct-sep-rule{flex:1;height:1px;}
.ct-sep-label{flex:none;color:var(--faint);}

/* formulier-kader */
.ct-form-wrap{
  position:relative;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:var(--radius-card);
  padding:clamp(24px,3vw,44px);
  max-width:760px;margin-inline:auto;
}
.ct-form{display:flex;flex-direction:column;gap:16px;}
/* form.hidden=true bij succes: de class-display:flex overschrijft de UA [hidden]-regel,
   dus expliciet verbergen (hogere specificiteit dan .ct-form). Zonder dit blijft het
   verzonden formulier zichtbaar naast de bevestiging. */
.ct-form[hidden]{display:none;}
.ct-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ct-send{width:100%;margin-top:6px;position:relative;overflow:hidden;}

/* honeypot: off-screen weg, niet display:none (Formspree leest 'm) */
.ct-gotcha{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* statusmelding (succes/fout): regio staat altijd in de DOM (a11y), maar is leeg/onzichtbaar
   tot .is-shown. Opacity-fade werkt in ALLE modi (§6 "nette fades"); in full tekent GSAP
   alleen de lijn erbovenop (geen dubbele opacity-animatie). */
.ct-status{margin-top:0;max-height:0;opacity:0;overflow:hidden;transition:opacity .5s ease;}
.ct-status.is-shown{margin-top:22px;max-height:none;opacity:1;overflow:visible;}
.ct-status-rule{display:block;width:120px;height:1px;margin-bottom:16px;}
.ct-status-tx{font-size:17px;line-height:1.5;color:var(--text);}
.ct-status:focus{outline:none;}
.ct-status:focus-visible{outline:2px solid var(--copper-br);outline-offset:6px;border-radius:4px;}

/* full-mode pre-hide: de divider-lijn start onzichtbaar tot buildInkRuleOnEnter 'm tekent
   (zonder dit flitst de CSS-eindstaat scaleX:1 vóór de scroll-trigger). id-gescopet. */
[data-motion="full"] #ct-body .ct-sep .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}

@media (max-width:760px){
  .ct-channels{grid-template-columns:1fr;}
  .ct-fields{grid-template-columns:1fr;}
}

/* ---------- footer (07) ---------- */
.footer{
  position:relative;z-index:2;
  border-top:1px solid var(--line2);
  padding-block:clamp(56px,8vw,90px) 0;
}
.footer-grid{display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(36px,6vw,80px);}
.footer-mark{height:32px;width:auto;margin-bottom:20px;}
.footer-tagline{color:var(--muted);font-size:15px;line-height:1.6;max-width:42ch;}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.footer-col-h{color:var(--faint);margin-bottom:16px;}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:0;}
.footer-col a{
  display:inline-block;padding-block:6px;  /* tap-target >=24px (WCAG 2.2 SC 2.5.8); gap:0 houdt kolomhoogte ~gelijk */
  font-size:14px;color:var(--muted);
  background-image:linear-gradient(var(--copper-br),var(--copper-br));
  background-repeat:no-repeat;background-position:0 calc(100% - 6px);background-size:0% 1px;
  transition:color .2s, background-size .25s ease;
}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--copper-br);background-size:100% 1px;}
.footer-static{font-size:14px;color:var(--muted);cursor:default;}
.footer-base{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(40px,6vh,64px);
  padding-block:22px;
  border-top:1px solid var(--line);
}
.footer-built{color:var(--faint);}
.footer-copy{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);
}

/* plotter-pen sign-off (alleen full) */
.footer-keyline{position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--copper-br);transform-origin:left center;display:none;}
.footer-keyline-glow{position:absolute;top:-2px;left:0;width:56px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--copper-br));opacity:0;pointer-events:none;display:none;}
[data-motion="full"] #s07 .footer-base{border-top-color:transparent;}
[data-motion="full"] #s07 .footer-keyline{display:block;transform:scaleX(0);}
[data-motion="full"] #s07 .footer-keyline-glow{display:block;}
[data-motion="full"] #s07 [data-reveal]{opacity:0;transform:translateY(10px);}

@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:560px){
  .footer-cols{grid-template-columns:1fr 1fr;}
  .footer-base{flex-direction:column;align-items:flex-start;}
}

/* ---------- binnenpagina-header (patroon A: About-pilot, herbruikbaar) ---------- */
.ip-head{padding-block:clamp(48px,7vw,92px) clamp(28px,3.5vw,44px);}
.ip-eyebrow{margin-bottom:22px;}
.ip-h1{font-size:clamp(40px,5.2vw,72px);margin:0 0 22px;}
.ip-h1 .line{display:block;overflow:hidden;}
.ip-h1 .line-in{display:block;}
.ip-intro{max-width:54ch;margin:0 0 clamp(26px,3.4vw,40px);}
/* Maatlijn vanaf links, even breed als het intro-tekstblok (54ch): leest als blueprint-maatlijn
   onder de tekst en eindigt in dezelfde kolom als de intro-rechterrand, dus ruim links van het
   rechtsboven-monogram (.bg-sketch). min(100%,..) houdt hem binnen de container op smal. */
.ip-rule{position:relative;width:min(100%,54ch);height:1px;overflow:hidden;}
.ip-rule-ink{
  display:block;width:100%;height:100%;
  background:var(--line);
  transform-origin:left center;
}

/* full-modus: de band tekent zich (buildInnerHeader, class-gestuurd). Pre-hide alleen de geanimeerde
   delen; eyebrow + intro fade'n via [data-reveal]/IO (ook in full, een fade naast de draw is prima). */
[data-motion="full"] .ip-head .crn{opacity:0;transform:scale(.4);}
[data-motion="full"] .ip-head .line-in[data-line]{transform:translateY(110%);}
[data-motion="full"] .ip-head .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}

/* ---------- why-us: verticale genummerde blueprint-lijst (About 02) ---------- */
.ip-why-label{margin-bottom:clamp(28px,4vh,44px);}
.why-list{position:relative;padding-left:clamp(40px,5vw,64px);}
/* doorlopende meetlijn links */
.why-rail{position:absolute;left:clamp(7px,1vw,12px);top:6px;bottom:6px;width:1px;overflow:hidden;}
.why-rail-ink{display:block;width:100%;height:100%;background:var(--line);transform-origin:top center;}
.why-rows{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3.4vh,40px);}
.why-row{position:relative;}
/* diamant-node op de rail, verticaal uitgelijnd op de titelregel */
.why-node{
  position:absolute;
  left:calc(-1 * clamp(40px,5vw,64px) + clamp(7px,1vw,12px) - 4px);
  top:7px;width:9px;height:9px;
  background:var(--copper);transform:rotate(45deg);
}
.why-idx{display:block;color:var(--faint);margin-bottom:8px;}
.why-title{font-size:var(--h3);margin:0 0 8px;}
.why-text{color:var(--muted);font-size:17px;line-height:1.6;max-width:60ch;}

/* gestaffelde IO-fade in light/reduced */
#ab-why .why-row:nth-child(2){transition-delay:.08s;}
#ab-why .why-row:nth-child(3){transition-delay:.16s;}
#ab-why .why-row:nth-child(4){transition-delay:.24s;}

/* full-modus: meetlijn tekent naar beneden + nodes poppen + rijen staggeren (buildWhyUs).
   id-gescopet zodat dit [data-reveal].in out-specificeert en GSAP de controle houdt. */
[data-motion="full"] #ab-why .why-rail-ink{transform:scaleY(0);background:var(--copper-br);}
[data-motion="full"] #ab-why .why-node{opacity:0;transform:rotate(45deg) scale(.4);}
[data-motion="full"] #ab-why .why-row{opacity:0;transform:translateY(18px);}

/* ---------- About-testimonials: anker (featured) boven + sleepbare rail eronder ---------- */
#ab-testi .t-grid{grid-template-columns:1fr;}

/* featured op volle breedte = intern 2-koloms readout: quote+naam links, 45->5-gauge rechts.
   .t-idx blijft absoluut gepositioneerd (geen grid-area). Entrance-animatie raakt dit niet:
   die tweent enkel opacity/transform van .t-ln/.t-metric/.t-attr, niet hun grid-plaatsing. */
#ab-testi .tcard--feat{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-areas:
    "quote metric"
    "attr  metric";
  gap:clamp(20px,3vw,44px);
  align-items:start;
}
#ab-testi .tcard--feat .t-quote{grid-area:quote;}
#ab-testi .tcard--feat .t-metric{grid-area:metric;align-self:center;margin:0;}
#ab-testi .tcard--feat .t-attr{grid-area:attr;align-self:end;}
@media (max-width:820px){
  #ab-testi .tcard--feat{grid-template-columns:1fr;grid-template-areas:"quote" "metric" "attr";}
}

/* full-modus: spiegelt de #s05-regels (featured tekent kader; rest schuift gestaffeld in) */
[data-motion="full"] #ab-testi .tcard--feat{
  opacity:1;transform:none;
  background:transparent;border-color:transparent;
  transition:transform .25s ease;
}
[data-motion="full"] #ab-testi .tcard--feat.is-built{background:var(--s1);border-color:var(--line);}
[data-motion="full"] #ab-testi .tcard--feat .t-ln,
[data-motion="full"] #ab-testi .tcard--feat .t-metric,
[data-motion="full"] #ab-testi .tcard--feat .t-attr{opacity:0;}

/* ---------- About-testimonials rail (engineered filmstrip) ---------- */
/* min-width:0 = de grid-item mag krimpen onder de intrinsieke breedte van de
   horizontaal-scrollende track; anders blaast de 1fr-kolom (en de pagina) op. */
#ab-testi .tr{margin-top:clamp(22px,3vw,34px);min-width:0;}
/* viewport: light/reduced = native scroll-snap strip; full = Draggable transformeert .tr-track */
#ab-testi .tr-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* zachte rand-fade rechts (en links) zodat de peek-kaart niet bruut afkapt */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
#ab-testi .tr-viewport::-webkit-scrollbar{display:none;}
#ab-testi .tr-track{display:flex;gap:18px;}
#ab-testi .tr-card{
  flex:0 0 clamp(280px,calc(50% - 28px),360px);   /* ~2 kaarten + peek op desktop; 1 + peek smal */
  scroll-snap-align:start;
  position:relative;
  display:flex;flex-direction:column;
  background:var(--s1);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:28px 26px 24px;
  transition:border-color .25s ease;
}
#ab-testi .tr-card:hover{border-color:var(--line2);}
/* naam+avatar altijd op de bodemlijn, ongeacht quote-lengte (min. gap = quote margin-bottom 22px) */
#ab-testi .tr-card .t-attr{margin-top:auto;}

/* readout-balk: teller + maatstreepjes + prev/next. Adaptief: .tr--static verbergt 'm. */
#ab-testi .tr-readout{
  display:flex;align-items:center;gap:16px;
  margin-top:16px;
}
#ab-testi .tr--static .tr-readout{display:none;}
#ab-testi .tr--static .tr-viewport{
  -webkit-mask-image:none;mask-image:none;   /* geen overflow → geen fade nodig */
}
#ab-testi .tr-count{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--copper-br);white-space:nowrap;}
#ab-testi .tr-ticks{display:flex;align-items:center;gap:7px;flex:1;}
#ab-testi .tr-tick{width:14px;height:2px;border-radius:2px;background:rgba(180,196,220,.22);transition:background .2s,width .2s;}
#ab-testi .tr-tick.on{background:var(--copper-br);width:22px;}
#ab-testi .tr-nav{display:flex;gap:8px;}
#ab-testi .tr-prev,#ab-testi .tr-next{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:transparent;color:var(--muted);
  border:1px solid var(--line2);border-radius:var(--radius);
  font-size:15px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
#ab-testi .tr-prev:hover,#ab-testi .tr-next:hover{color:var(--copper-br);border-color:var(--copper);}
#ab-testi .tr-prev[disabled],#ab-testi .tr-next[disabled]{opacity:.35;cursor:default;}

/* FULL: Draggable drijft de track; viewport scrollt niet native */
[data-motion="full"] #ab-testi .tr-viewport{overflow:hidden;scroll-snap-type:none;}
[data-motion="full"] #ab-testi .tr-track{cursor:grab;}
[data-motion="full"] #ab-testi .tr-track.is-grabbing{cursor:grabbing;}

@media (max-width:560px){
  #ab-testi .tr-card{flex-basis:82%;}   /* 1 kaart + duidelijke peek op mobiel */
}

/* ---------- About-maker: gestaffelde IO-fade in light/reduced (spiegelt #s04) ---------- */
#ab-maker .maker-body [data-reveal]:nth-child(2){transition-delay:.05s;}
#ab-maker .maker-body [data-reveal]:nth-child(3){transition-delay:.1s;}
#ab-maker .maker-body [data-reveal]:nth-child(4){transition-delay:.15s;}
#ab-maker .maker-body [data-reveal]:nth-child(5){transition-delay:.2s;}
#ab-maker .maker-stats .stat:nth-child(2){transition-delay:.1s;}
#ab-maker .maker-stats .stat:nth-child(3){transition-delay:.2s;}

/* maker-deellijn tekent zichzelf (#ab-maker only): vervang de gedeelde border door een echt lijn-element
   met dezelfde verticale ritme; home #s04 houdt zijn border-top ongemoeid. */
#ab-maker .maker-rule{width:100%;margin-top:clamp(32px,4vh,48px);}
#ab-maker .maker-stats{margin-top:0;border-top:0;}
[data-motion="full"] #ab-maker .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}
[data-motion="full"] #ab-cta .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}
[data-motion="full"] #ab-cta > .crn{opacity:0;transform:scale(.4);}

/* ---------- About-CTA (04): gecentreerde blueprint-seal ---------- */
/* compacter dan een standaard .section: trek de seal omhoog (kleine top), houd lucht naar de footer (bottom) */
.ip-cta{padding-block:clamp(16px,2.5vw,32px) clamp(48px,5vw,72px);}
.ip-cta-inner{max-width:none;text-align:center;}
.ip-cta .cta-rule{width:120px;margin:0 auto 22px;}
.ip-cta .cta-h2{margin-bottom:14px;max-width:none;white-space:nowrap;}
.ip-cta .cta-sub{margin:0 auto clamp(22px,3vh,30px);max-width:none;white-space:nowrap;}
/* knop iets groter, alleen de binnenpagina-CTA-knop (niet de gedeelde .btn-primary) */
.ip-cta .ip-cta-btn{padding:16px 32px;font-size:14px;}
/* mobiel/smal: nowrap opheffen zodat header/subzin netjes afbreken i.p.v. overlopen */
@media (max-width:640px){
  .ip-cta .cta-h2,
  .ip-cta .cta-sub{white-space:normal;}
}

/* ============ Service-detail (#sd-*) ============ */

/* header-signatuur: 2-koloms grid alleen als .ip-head--sig; anders plain block (About/Contact ongemoeid) */
.ip-head-main{min-width:0;}
/* Tekstkolom op content-breedte (max-content; de intro is op 54ch begrensd, dus de kolom volgt de
   H1/intro en blaast niet op), dan het icoon er pal naast, en de resterende ruimte (1fr) valt rechts.
   Zo hugt de signatuur de kop i.p.v. tegen de rechterrand te plakken. */
.ip-head--sig .ip-head-grid{
  display:grid;grid-template-columns:max-content auto minmax(0,1fr);
  column-gap:clamp(20px,2.6vw,42px);align-items:start;
}
.ip-head--sig .ip-titleblock{
  grid-column:1 / -1;color:var(--faint);letter-spacing:.12em;margin:0 0 18px;
}
/* expliciete kolomplaatsing: een definite-row item (de figure) wordt anders vóór de pure-auto main
   geplaatst en kaapt kolom 1, waardoor de tekst in de smalle kolom klem komt. */
.ip-head--sig .ip-head-main{grid-column:1;grid-row:2;}
.ip-figure{grid-column:2;grid-row:2;align-self:center;justify-self:start;color:var(--copper);}
.ip-figure-clip{display:block;width:clamp(120px,16vw,200px);height:auto;}
.ip-figure-svg{display:block;width:100%;height:auto;stroke:currentColor;fill:none;stroke-width:1.1;opacity:.9;}
@media (max-width:760px){
  .ip-head--sig .ip-head-grid{grid-template-columns:1fr;}
  .ip-head--sig .ip-titleblock{display:none;}                 /* grill 3: title-block weg op mobiel */
  .ip-head--sig .ip-head-main{grid-column:1;grid-row:auto;}
  .ip-figure{grid-column:1;grid-row:auto;order:-1;justify-self:start;}  /* icoon klein + boven */
  .ip-figure-clip{width:64px;}
}

/* compactere verticale ritmiek dan de standaard --section-pad: minder dode ruimte tussen de service-
   secties (alleen op de service-pagina's via de .sd-*-sectieklassen; #sd-cta volgt .ip-cta z'n eigen pad). */
.sd-deliver,.sd-process,.sd-examples{padding-block:clamp(34px,4.4vw,62px);}
.sd-apart{padding-block:clamp(8px,1vw,16px);}
.sd-explore{padding-block:clamp(16px,2vw,34px);}

/* gedeelde sd-koppen + kaartgrids */
.sd-h2{font-size:var(--h2);font-family:var(--ff-head);margin:0 0 clamp(24px,3vw,40px);}
.sd-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--grid);}
.sd-deliver-grid{grid-template-columns:repeat(2,1fr);}
@media (max-width:680px){.sd-deliver-grid{grid-template-columns:1fr;}}
.sd-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(20px,2.4vw,30px);}
.sd-card-h3{font-size:var(--h3);font-family:var(--ff-head);margin:0 0 10px;}
.sd-card-tx{color:var(--muted);margin:0;line-height:1.55;}
/* basis-hover (alle modi): koperrand. De lift + schaduw + de pen-draw-opbouw zitten in het full-blok
   onderaan; light/reduced houden enkel deze randverkleuring (geen motion). */
.sd-card,.sd-ex{transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease;}
.sd-card:hover,.sd-ex:hover{border-color:var(--copper);}

/* proces 01/02/03 — verticale blueprint-lijst (analoog aan #ab-why) */
.sd-steps{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:clamp(20px,2.6vw,34px);}
.sd-steps-rail{position:absolute;left:5px;top:6px;bottom:6px;width:1px;overflow:hidden;}
.sd-steps-rail-ink{display:block;width:100%;height:100%;background:var(--line);transform-origin:top center;}
.sd-step{position:relative;}
.sd-step-node{position:absolute;left:-34px;top:4px;width:9px;height:9px;background:var(--copper);transform:rotate(45deg);}
.sd-step-n{display:block;margin:0 0 6px;}
.sd-step-h3{font-size:var(--h3);font-family:var(--ff-head);margin:0 0 8px;}
.sd-step-tx{color:var(--muted);margin:0;line-height:1.55;max-width:62ch;}

/* examples — zwaartepunt: ruimer, 3-koloms, metric groot in koper-mono. Geen sectie-band meer (uniforme
   paginakleur); de kaarten staan op var(--s1) zodat ze tegen de --bg-pagina oplichten, gelijk aan .sd-card. */
.sd-examples-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.sd-examples-grid{grid-template-columns:1fr;}}
.sd-ex{background:var(--s1);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;}
.sd-ex-h3{font-size:var(--h3);font-family:var(--ff-head);margin:0;}
.sd-ex-tx{color:var(--muted);margin:0;line-height:1.55;}

/* sectie 5 — constante strip */
.sd-apart-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(22px,3vw,34px);}
.sd-apart-tx{margin:0;font-size:clamp(17px,1.6vw,21px);color:var(--text);max-width:64ch;}
.sd-apart-link{flex:none;color:var(--copper);}
.sd-apart-link:hover{color:var(--copper-br);}

/* sectie 6 — explore other (licht: naam + icoon-link, geen omschrijvingen) */
.sd-explore-label{margin:0 0 clamp(18px,2vw,26px);}
/* 5-up alleen waar de langste naam ("Ongoing Support") op één regel in een knop van ~200px past; daaronder
   3-up (tablet) en 2-/1-up (mobiel) met ruime knoppen. Zo wrapt geen enkele naam en blijven alle knoppen
   identiek van hoogte. (Eerder: vaste 5-up tot 900px -> de langste namen wrapten en werden dikker.) */
.sd-explore-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--grid);}
@media (max-width:1200px){.sd-explore-list{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.sd-explore-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.sd-explore-list{grid-template-columns:1fr;}}
/* height:100% = gelijke hoogte als vangnet (li's stretchen al); chrome strak (kleiner icoon, krappere
   gaps/padding, naam 14px + nowrap) zodat de langste naam op één regel past. */
.sd-explore-link{display:flex;align-items:center;gap:10px;height:100%;padding:14px 13px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);text-decoration:none;transition:border-color .2s,color .2s;}
.sd-explore-link:hover{border-color:var(--copper-br);color:var(--copper-br);}
.sd-explore-ic{flex:none;width:20px;height:20px;color:var(--copper);}
.sd-explore-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;}
.sd-explore-name{flex:1;min-width:0;font-family:var(--ff-head);font-size:14px;white-space:nowrap;}
.sd-explore-arrow{flex:none;color:var(--faint);}

/* sectie 7 — CTA: de service-sublines zijn langer dan About's (die op één regel staan via .ip-cta nowrap).
   Hier normaal laten afbreken tot een nette gecentreerde kolom; About ongemoeid (eigen scope). */
#sd-cta .cta-h2{white-space:normal;}
#sd-cta .cta-sub{white-space:normal;max-width:54ch;margin-inline:auto;}

/* full-mode pre-hide states (light/reduced houden de IO-fade / CSS-eindstaat) */
[data-motion="full"] .ip-head--sig .ip-figure-clip{clip-path:inset(0 0 100% 0);}   /* wipe open op enter */
[data-motion="full"] #sd-cta .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}
[data-motion="full"] #sd-process .sd-steps-rail-ink{transform:scaleY(0);background:var(--copper-br);}

/* full: blueprint-opbouw op de kaarten (deliver + examples) — zelfde recept als de homepage-#s02 .scard.
   Pre-hide via TRANSPARANTE bg/rand + verborgen inhoud + verborgen hoek-ticks (NIET card-opacity, anders
   verbergt het ook de geïnjecteerde koperpen). Een koperpen tekent het kader, dan vult de kaart (.is-built),
   poppen de ticks en faden de inhoud in; de pen kleurt af naar staal. light/reduced houden de data-reveal-fade. */
[data-motion="full"] #sd-deliver .sd-card,
[data-motion="full"] #sd-examples .sd-ex{
  opacity:1;transform:none;                 /* overschrijf de globale [data-reveal]-basisregel */
  background:transparent;border-color:transparent;
}
[data-motion="full"] #sd-deliver .sd-card > :not(.scard-pen):not(.crn),
[data-motion="full"] #sd-examples .sd-ex > :not(.scard-pen):not(.crn){opacity:0;}
[data-motion="full"] #sd-deliver .sd-card .crn,
[data-motion="full"] #sd-examples .sd-ex .crn{opacity:0;transform:scale(.4);}
[data-motion="full"] #sd-deliver .sd-card.is-built{background:var(--s1);border-color:var(--line);}
[data-motion="full"] #sd-examples .sd-ex.is-built{background:var(--s1);border-color:var(--line);}
[data-motion="full"] #sd-deliver .sd-card:hover,
[data-motion="full"] #sd-examples .sd-ex:hover{
  transform:translateY(-4px);border-color:var(--copper);box-shadow:0 14px 34px rgba(0,0,0,.30);
}

/* ---------- reveal-fallback (light + reduced delen dit) ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{transition:opacity .4s ease;transform:none;}
  /* underline-wipe uit onder reduced: alleen kleur verandert, geen size-transitie */
  .nav-links a,.footer-col a{transition:color .2s;background-size:0 1px;}
  .nav-links a:hover,.footer-col a:hover{background-size:0 1px;}
}

/* mobiel: nav-links verbergen, hamburger tonen (drawer neemt het over) */
@media (max-width:640px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-burger{display:inline-flex;}
}

/* ====================== Work-pagina (/work) — zig-zag product-dossiers ======================
   Rijke showcase van de 7 producten, anders dan de homepage-slider. Per rij: groot productbeeld
   in een blueprint-kader + tekst ernaast, beeld wisselt links/rechts. Full = koperen pen-draw op
   het kader (buildWorkDossiers, zelfde recept als #s02/#sd-card); light/reduced = data-reveal-fade
   van de hele rij. #wk-* strikt gescoped; homepage + About ongemoeid. */
.wk-list{padding-block:clamp(8px,2vw,28px) var(--section-pad);}
.wk-row{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);
  align-items:center;padding-block:clamp(36px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.wk-row:last-child{border-bottom:0;}
.wk-row.wk-flip .wk-media{order:2;}
@media (max-width:820px){
  .wk-row{grid-template-columns:1fr;gap:22px;padding-block:clamp(30px,7vw,44px);}
  .wk-row.wk-flip .wk-media{order:0;}   /* mobiel: beeld altijd boven de tekst */
}

/* mediakader (blueprint-frame + hoek-ticks + mono-index) */
.wk-media{
  position:relative;background:var(--s1);border:1px solid var(--line2);
  border-radius:var(--radius);padding:12px;
  transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease;
}
.wk-media:hover{border-color:var(--copper);}
.wk-shot{
  display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;
  border-radius:4px;border:1px solid var(--line);
}
.wk-ix{
  position:absolute;top:16px;right:16px;z-index:2;color:var(--copper);
  background:rgba(5,13,26,.78);border:1px solid var(--line2);
  padding:3px 8px;border-radius:4px;
}

/* tekstkolom */
.wk-body{min-width:0;}
.wk-num{color:var(--faint);margin:0 0 14px;}
.wk-lockup{display:flex;align-items:center;gap:12px;margin:0 0 12px;}
.wk-logo{height:30px;width:auto;max-width:160px;object-fit:contain;display:block;}
.wk-lockup--wordmark .wk-logo{height:34px;}
.wk-name{font-family:var(--ff-head);font-size:var(--h3);letter-spacing:-.015em;margin:0;}
/* wordmark-logo (Fixr): toon alleen het logo; naam sr-only voor outline/schermlezers (zoals .sc-lockup--wordmark) */
.wk-lockup--wordmark .wk-name{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.wk-tag{
  font-family:var(--ff-head);font-weight:500;font-size:clamp(18px,1.6vw,21px);
  letter-spacing:-.01em;line-height:1.2;margin:0 0 10px;
}
.wk-context{color:var(--muted);margin:0 0 18px;line-height:1.55;max-width:46ch;}
.wk-bullets{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;}
.wk-bullets li{position:relative;padding-left:22px;color:var(--muted);line-height:1.5;}
.wk-bullets li::before{
  content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;
  border:1px solid var(--copper);transform:rotate(45deg);
}
.wk-link{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;color:var(--copper);
  border-bottom:1px solid rgba(200,133,90,.4);padding-bottom:2px;
}
/* onzichtbare tap-area-extensie -> ~44px hoog (WCAG 2.2 SC 2.5.8), onderstreping blijft strak onder de tekst */
.wk-link::after{content:"";position:absolute;inset:-12px 0;}
.wk-link:hover{color:var(--copper-br);border-bottom-color:var(--copper-br);}

/* CTA: langere subregel dan About's nowrap-default -> wrap toestaan (zelfde fix als #sd-cta) */
#wk-cta .cta-h2{white-space:normal;}
#wk-cta .cta-sub{white-space:normal;max-width:54ch;margin-inline:auto;}

/* ---- full-only pre-hide: de rij is structureel zichtbaar, de pen-draw onthult kader+inhoud ----
   (zelfde recept als #s02 .scard / #sd-deliver .sd-card). Light/reduced negeren dit blok. */
[data-motion="full"] #wk-list .wk-row{opacity:1;transform:none;}   /* overrule globale [data-reveal]-basis */
[data-motion="full"] #wk-list .wk-media{background:transparent;border-color:transparent;}
[data-motion="full"] #wk-list .wk-media.is-built{background:var(--s1);border-color:var(--line2);}
[data-motion="full"] #wk-list .wk-media > :not(.scard-pen):not(.crn){opacity:0;}  /* img + mono-index */
[data-motion="full"] #wk-list .wk-media .crn{opacity:0;transform:scale(.4);}
[data-motion="full"] #wk-list .wk-body > *{opacity:0;}   /* tekst klikt in ná de pen (GSAP) */
[data-motion="full"] #wk-list .wk-media:hover{transform:translateY(-4px);border-color:var(--copper);box-shadow:0 14px 34px rgba(0,0,0,.30);}
/* CTA-seal koperlijn pre-hide (zelfde patroon als #sd-cta/#ab-cta): tekent in koper, koelt af naar staal */
[data-motion="full"] #wk-cta .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}

/* ───────── /process/ — "How we work" (eigen #pr-* scope; home/About/Work ongemoeid) ───────── */
/* framing-band */
.pr-lead{padding-block:clamp(8px,1.5vw,20px) clamp(20px,2.8vw,36px);}
.pr-lead-h2{font-size:var(--h2);font-family:var(--ff-head);margin:0 0 12px;max-width:22ch;}
.pr-lead-tx{color:var(--muted);margin:0;line-height:1.55;max-width:58ch;font-size:clamp(16px,1.5vw,19px);}

/* de reis — verticale blueprint-timeline (1:1 #sd-process-recept, hier 4 stappen + outcome-regel) */
.pr-flow{padding-block:clamp(20px,3vw,40px) clamp(34px,4.4vw,62px);}
.pr-steps{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:clamp(28px,3.6vw,48px);}
.pr-steps-rail{position:absolute;left:5px;top:6px;bottom:6px;width:1px;overflow:hidden;}
.pr-steps-rail-ink{display:block;width:100%;height:100%;background:var(--line);transform-origin:top center;}
.pr-step{position:relative;}
.pr-step-node{position:absolute;left:-34px;top:4px;width:9px;height:9px;background:var(--copper);transform:rotate(45deg);}
.pr-step-n{display:block;margin:0 0 6px;}
.pr-step-h3{font-size:var(--h3);font-family:var(--ff-head);margin:0 0 8px;}
.pr-step-tx{color:var(--muted);margin:0 0 10px;line-height:1.55;max-width:62ch;}
.pr-step-out{margin:0;color:var(--copper);font-size:clamp(14px,1.4vw,16px);font-weight:500;line-height:1.5;max-width:60ch;}

/* CTA wrap-fix (Process-sublines langer dan About's .ip-cta nowrap) */
#pr-cta .cta-h2{white-space:normal;}
#pr-cta .cta-sub{white-space:normal;max-width:54ch;margin-inline:auto;}

/* full-mode pre-hide states (light/reduced houden de IO-fade / CSS-eindstaat) */
[data-motion="full"] #pr-cta .ip-rule-ink{transform:scaleX(0);background:var(--copper-br);}
[data-motion="full"] #pr-flow .pr-steps-rail-ink{transform:scaleY(0);background:var(--copper-br);}
/* stap-TEKST blijft in full altijd zichtbaar (overrule globale [data-reveal]-basis), zodat axe nooit
   half-doorzichtige tekst vangt; de reveal loopt via rail + nodes + een transform-only slide (GSAP). */
[data-motion="full"] #pr-flow .pr-step{opacity:1;transform:none;}
[data-motion="full"] #pr-flow .pr-step-node{opacity:0;transform:rotate(45deg) scale(.4);}

/* ---------- Privacy (/privacy) ---------- */
.pv-wrap{max-width:760px;}
.pv-block{padding-block:26px;border-top:1px solid var(--line);}
.pv-block:first-of-type{border-top:0;padding-top:0;}
.pv-num{margin:0 0 12px;}
.pv-text{color:var(--muted);line-height:1.65;max-width:64ch;margin:0 0 12px;font-size:clamp(16px,1.5vw,18px);}
.pv-text:last-child{margin-bottom:0;}
.pv-link{color:var(--copper-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.pv-link:hover,.pv-link:focus-visible{color:var(--copper-br);}
.pv-updated{margin:30px 0 0;color:var(--faint);}

/* ============ Domains parked landing — chrome ============ */
.landing-topbar{position:relative;z-index:2;padding-block:clamp(18px,2.4vw,26px);}
.landing-topbar .container{display:flex;align-items:center;gap:16px;}
.landing-topbar-logo{display:inline-flex;align-items:center;opacity:.92;transition:opacity .2s ease;}
.landing-topbar-logo:hover{opacity:1;}
.landing-topbar-logo img{height:30px;width:auto;display:block;}
.landing-topbar-link{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;color:var(--faint);text-decoration:none;white-space:nowrap;padding:10px 2px;transition:color .2s ease;}
.landing-topbar-link:hover,.landing-topbar-link:focus-visible{color:var(--copper-br);}
.landing-topbar-arrow{transition:transform .2s ease;}
.landing-topbar-link:hover .landing-topbar-arrow,.landing-topbar-link:focus-visible .landing-topbar-arrow{transform:translateX(3px);}
@media (max-width:480px){
  .landing-topbar-link{font-size:11px;letter-spacing:.04em;gap:6px;}
}
.landing-foot{position:relative;z-index:2;margin-top:clamp(48px,8vw,96px);}
.landing-foot-row{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--line);}
.landing-foot-privacy{margin-left:auto;font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--faint);text-decoration:none;}
.landing-foot-privacy:hover{color:var(--copper-br);}
@media (max-width:560px){
  .landing-foot-privacy{margin-left:0;}
}

/* ============ Domains parked landing — trust-bar ============ */
#dm-trust{padding-block:clamp(8px,1.6vw,20px) clamp(28px,4vw,48px);}
.dm-trust-row{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,72px);margin:0;}
.dm-trust-row .stat{display:flex;flex-direction:column;gap:8px;}
@media (max-width:560px){
  .dm-trust-row{gap:24px 36px;}
}

/* ============ Domains parked landing — about-strip ============ */
#dm-lead{padding-block:clamp(20px,3vw,40px);}
.dm-lead-h2{font-size:var(--h2);font-family:var(--ff-head);margin:0 0 14px;max-width:24ch;}
.dm-lead-tx{color:var(--muted);margin:0;line-height:1.6;max-width:60ch;font-size:clamp(16px,1.5vw,19px);}

/* ============ Domains parked landing — conversie ============ */
#dm-cta{padding-block:clamp(28px,4vw,52px) clamp(56px,8vw,104px);}
#dm-cta .cta-sub{margin-bottom:clamp(24px,3vw,36px);}
#dm-cta .ct-form-wrap{max-width:640px;margin-inline:0;}