/* ==========================================================================
   Ermstrang Technologies — stylesheet
   Tokens zijn de goedgekeurde mockup-tokens (design/COMMIT-SHEET.md §2, §3).
   Palet in OKLCH, met de sRGB-waarde als comment voor drukwerk en Figma.
   ========================================================================== */

/* ---------- fonts (self-hosted: geen request naar Google, geen cookiebanner nodig) ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/archivo-600-normal-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:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/archivo-700-normal-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:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/archivo-800-normal-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:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/source-sans-3-400-normal-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:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/source-sans-3-600-normal-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 */
  --paper:      oklch(0.975 0.005 248);   /* #F4F7FA  veld, mean L 0.975 */
  --surface:    oklch(1 0 0);             /* #FFFFFF  kaarten, tabelband */
  --navy:       oklch(0.247 0.065 255);   /* #08213F  inkt + gedrenkte band */
  --navy-700:   oklch(0.289 0.069 253);   /* #0E2C4C  hover op navy */
  --navy-500:   oklch(0.402 0.093 251);   /* #1B4A78  secundaire lijn */
  --cyan:       oklch(0.693 0.125 218);   /* #00AED0  accent: alleen waar de assistent werkt */
  --cyan-ink:   oklch(0.516 0.093 219);   /* #00748C  5.0:1 op papier — tekst/accent op licht */
  --muted:      oklch(0.453 0.040 251);   /* #46586C  6.8:1 op papier */
  --hairline:   oklch(0.913 0.013 252);   /* #DCE3EB  1px structuur */
  --on-navy:    oklch(0.975 0.005 248);
  --on-navy-dim:oklch(0.82 0.02 248);

  /* type */
  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --text: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.36vw, 1.30rem);
  --step-2:  clamp(1.32rem, 1.18rem + 0.62vw, 1.64rem);
  --step-3:  clamp(1.50rem, 1.24rem + 1.10vw, 2.10rem);
  --step-4:  clamp(1.90rem, 1.40rem + 2.20vw, 3.10rem);
  --step-5:  clamp(2.30rem, 1.50rem + 3.60vw, 4.60rem);

  /* ruimte */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --band-tight: clamp(2.75rem, 5vw, 4rem);
  --band: clamp(4rem, 8vw, 7rem);
  --band-airy: clamp(5rem, 11vw, 9.5rem);
  --radius: 2px;

  /* beweging */
  --ease-out-quart: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --d-press: 140ms;   /* knop */
  --d-hover: 160ms;   /* hover */
  --d-reveal: 520ms;  /* sectie-opener: marketingreeks, bewust >300ms — zie COMMIT-SHEET §5 */

  --z-sticky: 10;
  --z-grain: 2;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--text);
  font-size:var(--step-0);
  line-height:1.55;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; line-height:1.04;
  letter-spacing:-.032em; text-wrap:balance; margin:0;
}
p{margin:0; text-wrap:pretty}
ul,ol,dl{margin:0; padding:0}
img,svg{max-width:100%; display:block}
strong{font-weight:600}

.wrap{width:min(1180px, 100% - 2*var(--gut)); margin-inline:auto}
.measure{max-width:68ch}
.lede{font-size:var(--step-1); color:var(--muted); max-width:58ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--surface); color:var(--navy);
  padding:.6rem .9rem; border:1px solid var(--navy)}
:where(a,button,summary):focus-visible{outline:2px solid var(--cyan-ink); outline-offset:3px; border-radius:1px}
[id]{scroll-margin-top:6.5rem}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--paper); border-bottom:1px solid var(--hairline);
}
.site-head__inner{display:flex; align-items:center; gap:1.25rem; padding-block:1.1rem}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.02em;
  color:var(--navy); text-decoration:none;
}
.brand img,.brand svg{width:34px; height:34px; flex:none}
.brand__light{font-weight:400}
.site-nav{margin-left:auto; display:flex; gap:1.6rem; font-size:.95rem}
.site-nav a{color:var(--navy); text-decoration:none; padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:border-color var(--d-hover) var(--ease-out-quart), color var(--d-hover) var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover{border-bottom-color:var(--cyan); color:var(--cyan-ink)}
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--navy); color:var(--on-navy); text-decoration:none;
  font-family:var(--text); font-weight:600; font-size:1rem;
  padding:.72rem 1.15rem; border:1px solid var(--navy); border-radius:var(--radius);
  transition:background-color var(--d-press) var(--ease-out-quart),
             color var(--d-press) var(--ease-out-quart),
             transform var(--d-press) var(--ease-out-quart);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--navy-700); border-color:var(--navy-700)}
}
.btn:active{transform:scale(.97)}
.btn--on-navy{background:var(--cyan); border-color:var(--cyan); color:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .btn--on-navy:hover{background:var(--on-navy); border-color:var(--on-navy)}
}
.btn--ghost{background:transparent; color:var(--navy-500); border-color:var(--navy-500); padding-inline:.95rem}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{background:var(--navy-500); border-color:var(--navy-500); color:var(--on-navy)}
}
.link{color:var(--cyan-ink); text-decoration:none; border-bottom:1px solid var(--cyan)}
@media (hover:hover) and (pointer:fine){
  .link:hover{border-bottom-color:var(--navy); color:var(--navy)}
}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,5vw,5rem);
  align-items:start;
  padding-block:clamp(2.75rem,6vw,5rem) clamp(1rem,2vw,1.5rem);
}
.kicker{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.4rem;
  font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  color:var(--cyan-ink);
}
.kicker::before{content:""; width:26px; height:2px; background:var(--cyan); flex:none}
h1{font-size:var(--step-5); max-width:24ch}
/* cyaan onderstreept precies het deel dat geautomatiseerd wordt — dezelfde betekenis als in het werkblad */
h1 mark{
  background:none; color:inherit;
  text-decoration:underline; text-decoration-color:var(--cyan);
  text-decoration-thickness:.11em; text-underline-offset:.11em;
}
.hero__lede{margin-top:1.4rem}
.hero__actions{display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; margin-top:2rem}
.hero__note{margin-top:1.7rem; font-size:.92rem; color:var(--muted); max-width:48ch}

/* ---------- het werkblad (signatuur) ---------- */
.board{
  position:relative; z-index:2;
  background:var(--surface); border:1px solid var(--hairline);
  padding:1.4rem 1.4rem 1.7rem;
  margin-bottom:-7.5rem;   /* grid break: de tekening loopt over de sectiegrens heen */
}
.board__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--hairline);
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.045em;
  text-transform:none; color:var(--cyan-ink);
}
.board__head span:last-child{color:var(--muted); font-variant-numeric:tabular-nums; text-transform:none}
.flow{list-style:none}
.step{
  display:grid; grid-template-columns:3.4rem 1fr; gap:1rem;
  padding-block:.95rem; border-bottom:1px solid var(--hairline);
}
.step:last-child{border-bottom:0}
.step__t{font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--muted); padding-top:.28rem}
.step__what{font-size:.98rem; line-height:1.42}
.step__who{
  display:block; margin-top:.34rem;
  font-family:var(--display); font-weight:600; font-size:.71rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.step--human{background:var(--paper); margin-inline:-.7rem; padding-inline:.7rem; border-radius:var(--radius)}
.step--human .step__what{font-weight:600}
.step--human .step__who{color:var(--cyan-ink)}
.stamp{
  display:flex; align-items:center; gap:.4rem; margin-top:.38rem;
  font-family:var(--display); font-weight:700; font-size:.71rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--cyan-ink);
}
.stamp__tick{
  width:14px; height:14px; flex:none; background:var(--cyan);
  clip-path:polygon(14% 52%, 36% 74%, 86% 18%, 96% 30%, 36% 94%, 4% 62%);
  transform-origin:50% 50%;
}
.board__foot{
  margin-top:1.15rem; padding-top:.95rem; border-top:1px solid var(--hairline);
  font-size:.9rem; color:var(--muted);
}
.board__foot strong{color:var(--navy)}

/* ---------- secties ---------- */
.band{padding-block:var(--band)}
.band--tight{padding-block:var(--band-tight)}
.band--airy{padding-block:var(--band-airy)}
.band--surface{background:var(--surface)}
/* de hairline van deze sectie loopt achter het werkblad door */
.band--surface.overlap{border-top:1px solid var(--hairline); padding-top:clamp(9rem,14vw,12rem)}
.sec-head{display:grid; grid-template-columns:5fr 7fr; gap:clamp(1.5rem,4vw,4rem); align-items:end;
  margin-bottom:clamp(2rem,4vw,3.25rem)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
.sec-head p{color:var(--muted); max-width:60ch}

/* taken-tabel: echt tabel-werk, niet kaartjes */
.tasks{width:100%; border-collapse:collapse; font-size:1rem}
.tasks caption{text-align:left; color:var(--muted); font-size:.92rem; padding-bottom:1rem}
.tasks th,.tasks td{text-align:left; vertical-align:top; padding:1.05rem 1.25rem 1.05rem 0}
.tasks thead th{
  font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--navy-500);
  padding-bottom:.6rem;
}
.tasks tbody tr{border-bottom:1px solid var(--hairline)}
.tasks tbody th{font-family:var(--display); font-weight:600; font-size:1.02rem; white-space:nowrap}
.tasks td:last-child{color:var(--muted); padding-right:0}
.tasks col:nth-child(3){width:26%}

/* hoe het werkt: echte volgorde, dus genummerd */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); position:relative}
.how__rule{
  position:absolute; left:0; right:0; top:1.15rem; height:1px; background:var(--hairline);
  transform-origin:left center;
}
.how__step{position:relative; padding-top:3.4rem}
.how__num{
  position:absolute; top:0; left:0; width:2.3rem; height:2.3rem;
  display:grid; place-items:center; background:var(--navy); color:var(--on-navy);
  font-family:var(--display); font-weight:700; font-size:.9rem; border-radius:var(--radius);
}
.how__step h3{font-size:var(--step-2); margin-bottom:.55rem}
.how__step p{color:var(--muted)}
.how__in{margin-top:.9rem; font-size:.92rem; color:var(--muted)}
.how__in b{display:block; font-family:var(--display); font-weight:600; font-size:.98rem;
  letter-spacing:-.01em; color:var(--cyan-ink); margin-bottom:.15rem}

/* voor wie: twee rijen, elk anders opgebouwd */
.who{display:grid; grid-template-columns:4fr 8fr; gap:clamp(1.25rem,4vw,4rem) clamp(1.5rem,4vw,3.5rem);
  align-items:start}
.who + .who{border-top:1px solid var(--hairline); margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(2rem,4vw,3rem)}
.who__label{font-family:var(--display); font-weight:800; font-size:var(--step-2); letter-spacing:-.03em}
.who__label span{display:block; font-weight:600; font-size:.85rem; letter-spacing:.02em;
  color:var(--muted); margin-top:.4rem; font-family:var(--text)}
.who__body p{color:var(--muted); max-width:62ch}
.who__list{list-style:none; margin-top:1.1rem; display:grid; gap:.55rem}
.who__list li{padding-left:1.5rem; position:relative}
.who__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  background:var(--cyan); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.who__defs{margin-top:1.2rem; display:grid; grid-template-columns:9rem 1fr; gap:.6rem 1.25rem}
.who__defs dt{font-family:var(--display); font-weight:600; font-size:.95rem}
.who__defs dd{margin:0; color:var(--muted)}

/* navy band */
.navy{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden}
.navy::after{
  content:""; position:absolute; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.navy > *{position:relative; z-index:3}
.navy h2{color:var(--on-navy)}
.navy .sec-head p{color:var(--on-navy-dim)}
.args{margin-top:clamp(2rem,4vw,3rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem)}
.arg{border-top:1px solid oklch(0.40 0.05 253); padding-top:1.15rem}
.arg h3{font-size:var(--step-1); margin-bottom:.5rem}
.arg p{color:var(--on-navy-dim); font-size:1rem}
.arg ul{margin-top:.6rem; display:grid; gap:.35rem; list-style:none}
.arg li{color:var(--on-navy-dim); font-size:.96rem; padding-left:1.15rem; position:relative}
.arg li::before{content:""; position:absolute; left:0; top:.7em; width:8px; height:1px; background:var(--cyan)}
.arg:nth-child(2){grid-row:span 1}

/* contact */
.contact{display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.contact__ask{background:var(--surface); border:1px solid var(--hairline); padding:1.5rem}
.contact__ask h3{font-size:var(--step-1); margin-bottom:.6rem}
.contact__ask p{color:var(--muted); font-size:1rem}
.contact__ask p + p{margin-top:.8rem}
.contact__list{list-style:none; margin-top:1.5rem; display:grid; gap:.5rem}
.contact__list a{color:var(--navy); text-decoration:none; border-bottom:1px solid var(--navy-500)}
@media (hover:hover) and (pointer:fine){
  .contact__list a:hover{border-bottom-color:var(--cyan); color:var(--cyan-ink)}
}
.contact__list span{color:var(--muted); font-size:.9rem; display:block}

/* footer */
.site-foot{border-top:1px solid var(--hairline); padding-block:clamp(2.5rem,5vw,4rem) 2rem; font-size:.94rem}
.site-foot__grid{display:grid; grid-template-columns:5fr 3fr 4fr; gap:clamp(1.5rem,4vw,3rem)}
.site-foot__brand{display:grid; gap:.7rem; align-content:start}
.site-foot__tag{color:var(--muted); max-width:34ch}
.site-foot h4{font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.01em;
  color:var(--navy); margin-bottom:.7rem}
.site-foot ul{list-style:none; display:grid; gap:.4rem}
.site-foot a{color:var(--navy); text-decoration:none; border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){
  .site-foot a:hover{border-bottom-color:var(--cyan)}
}
.site-foot__legal{margin-top:clamp(2rem,4vw,3rem); padding-top:1.1rem; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; color:var(--muted); font-size:.88rem}

/* ---------- reveal-states ----------
   De startwaarde hangt aan html.js; dat klasse zet een inline scriptje in de <head>.
   Zonder JS (of als het script faalt) staat alles er dus gewoon. */
[data-arm="rise"]{transition:opacity var(--d-reveal) var(--ease-out-quart),
                             transform var(--d-reveal) var(--ease-out-quart)}
[data-arm="line"]{transition:transform 640ms var(--ease-out-quart)}
[data-arm="blur"]{transition:filter var(--d-reveal) var(--ease-out-quart),
                             opacity var(--d-reveal) var(--ease-out-quart)}
html.js [data-arm="rise"]{opacity:0; transform:translateY(6px)}
html.js [data-arm="line"]{transform:scaleX(0)}
html.js [data-arm="blur"]{opacity:0; filter:blur(6px)}
html.js [data-arm].in{opacity:1; transform:none; filter:none}
.stamp__tick{transition:transform 300ms var(--ease-out-quart), opacity 300ms var(--ease-out-quart)}
html.js .stamp__tick{transform:scale(.5); opacity:0}
html.js .step--auto.in-stamp .stamp__tick{transform:none; opacity:1}

@media (max-width:980px){
  .hero{grid-template-columns:1fr; padding-bottom:2.5rem}
  .board{margin-bottom:0}
  .band--surface.overlap{border-top:1px solid var(--hairline); padding-top:var(--band)}
  .sec-head{grid-template-columns:1fr; align-items:start; gap:1rem}
  .how{grid-template-columns:1fr; gap:2.25rem}
  .how__rule{top:0; bottom:0; left:.7rem; right:auto; width:1px; height:auto}
  .who{grid-template-columns:1fr}
  .who__defs{grid-template-columns:1fr; gap:.2rem 0}
  .who__defs dd{margin-bottom:.7rem}
  .args{grid-template-columns:1fr; gap:1.75rem}
  .contact{grid-template-columns:1fr}
  .site-foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .site-nav{display:none}
  .site-head .btn{padding:.55rem .8rem; font-size:.92rem; white-space:nowrap}
  .site-head__inner{gap:.6rem}
  .tasks thead{display:none}
  .tasks tbody th{display:block; white-space:normal}
  .tasks tbody td{display:block; padding:.15rem 0 0}
  .tasks tbody tr{display:block; padding-block:1rem}
  .tasks tbody td:last-child{padding-bottom:.4rem}
  .site-foot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-arm]{transition:opacity 200ms ease !important; transform:none !important; filter:none !important}
  .stamp__tick{transition:opacity 200ms ease !important; transform:none !important}
  .how__rule{transform:none !important}
}