:root{
  --ink:#0A0A0B;
  --carbon:#141416;
  --carbon-2:#1B1B1E;
  --bone:#F4F2ED;
  --steel:#8E8E94;
  --steel-dim:#5C5C61;
  --line:rgba(244,242,237,.12);
  --line-soft:rgba(244,242,237,.07);
  --accent:#8FAEC7;
  --accent-light:#B9D0E0;
  --accent-dark:#263B4A;
  --accent-line:rgba(143,174,199,.25);
  --display:'Archivo',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--bone);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.eyebrow-mobile{display:none}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:12px;
  padding:18px 28px;
  background:linear-gradient(180deg,rgba(10,10,11,.85),rgba(10,10,11,0));
  backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(10,10,11,.92);border-bottom:1px solid var(--accent-line)}
.brand{
  font-family:var(--display);font-weight:900;font-size:21px;
  letter-spacing:.02em;font-style:italic;
  white-space:nowrap;flex:none;
}
.brand span{font-style:normal;font-weight:500;color:var(--steel);font-size:13px;letter-spacing:.18em;margin-left:2px}
.nav-cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 20px;border:1px solid var(--line);border-radius:2px;
  white-space:nowrap;flex:none;
  transition:background .25s,color .25s,border-color .25s;
}
.nav-cta:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* hoofdnavigatie: desktoplinks + mobiel menu */
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:nowrap}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);padding:10px 2px;white-space:nowrap;transition:color .25s;
}
.nav-links a:hover{color:var(--bone)}
.nav-right{display:flex;gap:10px;align-items:center;flex:none}
.nav-menu-btn{
  display:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);padding:11px 16px;border:1px solid var(--line);border-radius:2px;
  min-height:44px;align-items:center;transition:background .25s,color .25s,border-color .25s;
}
.nav-menu-btn:hover{border-color:var(--accent-line);color:var(--accent-light)}
.nav-drawer{
  position:fixed;top:0;left:0;right:0;z-index:49;
  background:rgba(10,10,11,.97);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--accent-line);
  padding:88px 28px 20px;display:flex;flex-direction:column;
}
.nav-drawer a{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);min-height:44px;display:flex;align-items:center;padding:2px;
  border-bottom:1px solid var(--line-soft);
}
.nav-drawer a:last-child{border-bottom:none;color:var(--accent-light)}
.nav-drawer a:hover{color:var(--accent-light)}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-menu-btn{display:inline-flex}
  .nav-cta{min-height:44px;display:inline-flex;align-items:center}
}
@media(min-width:861px){.nav-drawer{display:none!important}}

/* ankerdoelen volledig onder de sticky header laten landen
   (vervangt de eerdere scroll-padding-top op html). Navhoogte is
   ~80px vanaf 521px breedte en ~73px op smallere schermen (zelfde
   breakpoint als de nav-padding hieronder); de waarden geven in
   beide gevallen ~23-24px lucht onder de header. */
[id]{scroll-margin-top:104px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.72) 38%,rgba(10,10,11,.30) 70%,rgba(10,10,11,.55) 100%),
    linear-gradient(0deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,0) 40%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:64px;padding-top:140px}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(46px,8.2vw,104px);line-height:.94;letter-spacing:-.02em;
  margin:22px 0 0;max-width:14ch;
}
.hero h1 em{font-style:normal;color:var(--steel)}
.hero-break{display:none}
.hero p.sub{
  margin-top:26px;max-width:46ch;font-size:clamp(16px,2vw,19px);
  color:#D6D4CE;line-height:1.55;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 26px;border-radius:2px;border:1px solid var(--bone);
  background:var(--bone);color:var(--ink);font-weight:500;
  transition:transform .2s,background .25s,color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}

.hero-meta{
  position:relative;z-index:2;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:18px 0 4px;margin-top:34px;
}
.hero-meta span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.hero-meta b{color:var(--bone);font-weight:500}

/* ---------- section frame ---------- */
section{position:relative}
.band{padding:108px 0}
.band-line{border-top:1px solid var(--line-soft)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:48px}
.sec-intro{margin-top:18px;max-width:52ch;font-size:16px;color:#D6D4CE;line-height:1.55}
.h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.4vw,52px);line-height:1.02;letter-spacing:-.018em;margin-top:14px;
}

/* ---------- equilibrium divider ---------- */
.eq{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0}
.eq .rule{height:1px;width:min(120px,22vw);background:var(--accent-line)}
.eq .mark{font-family:var(--mono);font-size:15px;color:var(--accent);letter-spacing:.1em}
.eq-slogan .mark{white-space:nowrap}

/* ---------- voor wie ---------- */
.who{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.who-card{border:1px solid var(--line);border-radius:3px;padding:34px 32px;background:var(--carbon)}
.who-card.no{background:transparent;border-style:solid;border-color:var(--line-soft);padding-top:29px;padding-bottom:29px}
.who-card h3{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);font-weight:500;margin-bottom:22px}
.who-card.yes h3{color:var(--bone)}
.who-card ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.who-card li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:#D6D4CE;line-height:1.45}
.who-card .tick{font-family:var(--mono);color:var(--bone);flex:none;margin-top:1px}
.who-card .who-text{text-wrap:balance}
.who-card.yes .tick{color:var(--accent)}
.who-card.no li{color:#ACAAA4}
.who-card.no .tick{color:var(--steel)}

/* ---------- aanbod ---------- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{
  border:1px solid var(--line);border-radius:3px;background:var(--carbon);
  padding:34px 30px 32px;display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s,opacity .2s;
}
.offer:hover{border-color:var(--accent);background:var(--carbon-2);transform:translateY(-4px)}
.offer-primary{border-color:var(--accent-line)}
.offer.is-selected{border-color:var(--accent);background:var(--carbon-2)}
.offers.has-selection .offer:not(.is-selected){opacity:.6}
.offer h3{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1.1}
.offer-position{margin-top:14px;font-size:16px;font-weight:500;color:var(--bone);line-height:1.45;text-wrap:balance}
.offer-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.offer-list li{position:relative;padding-left:22px;font-size:14px;color:#ACAAA4;line-height:1.5;text-wrap:balance}
.offer-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-family:var(--mono);font-size:12.5px}

/* ---------- werkwijze ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:0}
.step{
  border-top:1px solid var(--line);padding:30px 4px 30px 0;
  display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;
}
.step .sn{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.08em;padding-top:5px}
.step h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.step p{margin-top:9px;font-size:15.5px;color:#C7C5BF;line-height:1.5;max-width:42ch}
@media(min-width:760px){
  .step:nth-child(odd){padding-right:48px;border-right:1px solid var(--line-soft)}
  .step:nth-child(even){padding-left:48px}
}

/* ---------- over arne ---------- */
.about{display:grid;grid-template-columns:0.86fr 1.14fr;gap:56px;align-items:center}
.about-img{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/5}
.about-img img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.about-img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px 10px rgba(10,10,11,.6)}
.about h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;line-height:1}
.about .lead{margin-top:24px;font-size:17.5px;color:#DAD8D2;line-height:1.6;max-width:54ch}
.about .body p{margin-top:18px;font-size:16px;color:#BBB9B3;line-height:1.62;max-width:54ch}
.about .sig{margin-top:28px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- final cta ---------- */
.final{position:relative;text-align:center;padding:128px 0 120px}
.final h1,.final h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.5vw,86px);line-height:.98;letter-spacing:-.025em}
.final p{margin:24px auto 0;max-width:44ch;font-size:18px;color:#CFCDC7}
.final .btn{margin-top:40px;padding:19px 38px;font-size:14px}
.final .alt{margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--steel);text-transform:uppercase}
.final .alt a{color:var(--bone);border-bottom:1px solid var(--line)}
.final .alt a:hover{color:var(--accent-light);border-color:var(--accent)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:42px 0}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot .fb{font-family:var(--display);font-weight:900;font-style:italic;font-size:18px}
.foot .tl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.foot .fl{display:flex;gap:26px}
.foot .fl a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.foot .fl a:hover{color:var(--accent-light)}
.foot-legal{margin-top:22px;display:flex;flex-wrap:wrap;column-gap:9px;row-gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.5;color:var(--steel)}
.foot-legal span::after{content:"\00B7";margin-left:9px;color:var(--steel-dim)}
.foot-legal a{color:var(--steel);border-bottom:1px solid var(--line-soft)}
.foot-legal a:hover{color:var(--accent-light);border-color:var(--accent)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .who{grid-template-columns:1fr}
  .offers{grid-template-columns:1fr}
  .offer{padding-top:30px;padding-bottom:28px}
  .offer-list{margin-top:16px;gap:9px}
  .eq-slogan{gap:10px}
  .eq-slogan .rule{width:auto;flex:1 1 0;min-width:14px}
  .eq-slogan .mark{font-size:13px;letter-spacing:.08em}
  .steps{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:34px;text-align:center}
  .about-img{max-width:380px;margin:0 auto}
  .about .lead,.about .body p{margin-left:auto;margin-right:auto}
  .band{padding:78px 0}
  .hero-img img{object-position:center 12%}
  /* Op smalle, hoge schermen dekt de foto de container qua hoogte exact
     (geen verticale cropruimte), waardoor de tekstkolom over het gezicht
     kan vallen. Sterkere, alleen-mobiele overlay voor leesbaarheid; de
     foto blijft volledig in kleur zichtbaar. */
  .hero-img::after{
    background:
      linear-gradient(90deg,rgba(10,10,11,.88) 0%,rgba(10,10,11,.62) 50%,rgba(10,10,11,.5) 100%),
      linear-gradient(0deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.2) 58%,rgba(10,10,11,0) 82%);
  }

  /* mobiele hero: .hero staat standaard op align-items:flex-end (tekstblok
     onderaan verankerd), waardoor de zichtbare positie van h1 afhangt van
     de inhoud DAARONDER (sub/actions/meta) i.p.v. van padding-top erboven —
     op korte, smalle schermen (bv. 320x690) duwt dat h1 juist omhoog, het
     gezicht in. Voor mobiel daarom bovenaan verankerd (flex-start) met een
     vaste, schermhoogte-onafhankelijke padding-top, zodat h1 altijd op
     dezelfde afstand van de nav/het gezicht begint. De blauwe contextregel
     staat los, absoluut gepositioneerd in .hero (niet in .hero-inner) zodat
     hij onafhankelijk daarvan boven in beeld blijft. */
  .hero{align-items:flex-start}
  .eyebrow-desktop{display:none}
  .eyebrow-mobile{
    display:block;position:absolute;top:84px;left:0;right:auto;z-index:2;
    margin-left:0;margin-right:0;
    font-size:9px;letter-spacing:.15em;line-height:1.6;
  }
  .eyebrow-mobile span{display:inline-block;white-space:nowrap}
  .hero-break{display:inline}
  /* specifieker dan .wrap (die verderop bij ≤520px padding:0 20px zet en
     anders ook de top/bottom-padding hier zou resetten naar 0) */
  .hero .hero-inner{padding-top:220px;padding-bottom:48px}
  .hero h1{
    font-size:40px;line-height:.98;max-width:none;
  }
  .hero p.sub{
    margin-top:14px;max-width:30ch;font-size:15px;line-height:1.5;
  }
  .hero-actions{margin-top:20px}
}
/* ---------- desktop hero (>860px) ----------
   Rustiger, compacter desktopvariant: minder dominante headline, vaste
   ademruimte onder de nav (i.p.v. het onvoorspelbare bottom-anchored
   gedrag hierboven, dat de zichtbare positie van de blauwe tekst afhankelijk
   maakt van de totale inhoudshoogte én de viewporthoogte samen), en een
   gegarandeerde, expliciete regelverdeling in de headline i.p.v. een
   fragiele natuurlijke afbreking op basis van max-width:14ch. */
@media(min-width:861px){
  .hero{align-items:flex-start}
  .hero .hero-inner{padding-top:132px}
  .hero-break{display:inline}
  .hero h1{
    font-size:clamp(70px,52px + 1.8vw,86px);
    max-width:none;
  }
  .hero p.sub{margin-top:30px;max-width:560px;text-wrap:balance}
  .hero-actions{gap:16px;margin-top:30px}
}
@media(max-width:640px){
  .foot-legal{display:block}
  .foot-legal span{display:block;margin-bottom:6px}
  .foot-legal span::after{content:none}
}
@media(max-width:520px){
  .wrap{padding:0 20px}
  .nav{padding:14px 20px}
  .nav-cta{padding:10px 14px;font-size:11px}
  [id]{scroll-margin-top:96px}
  .btn{padding:15px 22px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- intake hero ---------- */
.intake-hero{padding:150px 0 20px}
.intake-hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5.6vw,58px);line-height:1.04;letter-spacing:-.02em;
  margin-top:16px;max-width:16ch;
}
.intake-hero p.sub{margin-top:18px;max-width:52ch;font-size:16.5px;color:#D6D4CE;line-height:1.55}
.intake-hero .intake-duration{margin-top:10px;font-size:13px;color:var(--steel)}
.intake-hero .trustline{
  margin-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  color:var(--steel);text-transform:uppercase;
}
.trustline-a,.trustline-b{display:block;white-space:nowrap}
@media(max-width:860px){
  .intake-hero .trustline{letter-spacing:.05em}
}
@media(min-width:861px){
  .intake-hero .trustline{display:flex;gap:8px}
  .trustline-a,.trustline-b{display:inline}
  .trustline-a::after{content:"\00B7";margin-left:8px;color:var(--steel-dim)}
}
.intake-hero.is-compact{padding:120px 0 14px}
.intake-hero.is-compact h1{font-size:clamp(22px,3.2vw,30px);margin-top:8px;max-width:none}
.intake-hero.is-compact p.sub{margin-top:8px;font-size:15px;max-width:60ch}

/* ---------- intake layout ---------- */
.intake-band{padding-top:20px}
.intake-layout{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:start}
.intake-side{position:sticky;top:100px}
.intake-photo{border-radius:3px;overflow:hidden;aspect-ratio:4/5;max-width:280px;margin-bottom:28px}
.intake-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(100%) contrast(1.04)}
/* Stap 2 en 3 gebruiken eigen, volledig gekleurde foto's; de gedeelde regel
   hierboven (incl. grayscale-filter) blijft ongewijzigd voor stap 1. */
.intake-photo[data-step-photo="2"] img{object-position:center 22%;filter:none}
.intake-photo[data-step-photo="3"] img{object-position:center 14%;filter:none}
.intro-note p{font-size:16px;color:#BBB9B3;line-height:1.62;margin-bottom:28px}

/* ---------- packages ---------- */
.packages{display:flex;flex-direction:column;gap:14px}
.package{border:1px solid var(--line);border-radius:3px;background:var(--carbon);padding:20px 22px}
.package-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.package-head h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.package p{font-size:15px;color:var(--steel);line-height:1.55}
.package-note{font-size:13.5px;color:var(--steel);font-style:italic;padding:0 2px}

/* ---------- dynamisch intake-contextblok ---------- */
.context-heading{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.25;margin-bottom:12px}
.context-body{font-size:15.5px;color:#BBB9B3;line-height:1.6;margin-bottom:20px}
.context-points{list-style:none;display:flex;flex-direction:column;gap:10px}
.context-points li{position:relative;padding-left:20px;font-size:14.5px;color:#D6D4CE;line-height:1.5}
.context-points li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--accent)}
.context-process{list-style:none;counter-reset:context-stap;display:flex;flex-direction:column;gap:14px}
.context-process li{position:relative;padding-left:34px;font-size:14.5px;color:#D6D4CE;line-height:1.5;counter-increment:context-stap}
.context-process li::before{content:counter(context-stap,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.package{transition:border-color .2s,background .2s,opacity .2s}
.package.is-selected{border-color:var(--accent);background:var(--carbon-2)}
.intake-context.has-selection .package:not(.is-selected){opacity:.55}
#context-slot-mobile{display:none}
@media(max-width:900px){
  #context-slot-mobile{display:block;margin:30px 0 8px}
  #context-slot-desktop{display:none}
  /* stap 3: iets meer ademruimte tussen de knoppen en "Wat gebeurt er na
     je aanvraag?" dan tussen de knoppen en het foto/voorkeurblok van
     stap 1/2 (sibling-selector, geen JS nodig: #context-slot-mobile komt
     na alle stap-fieldsets, dus dit raakt alleen de actieve stap 3). */
  .intake-step[data-step="3"]:not([hidden]) ~ #context-slot-mobile{margin-top:40px}
}

/* ---------- intake form ---------- */
.progress{margin-bottom:40px}
.progress-track{height:3px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);width:33.333%;transition:width .3s ease}
.progress-label{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

fieldset.intake-step{border:0;padding:0;margin:0}
/* fieldset.radio-group en fieldset.intake-step resetten hun eigen
   browser-default rand al hierboven/hieronder; fieldset.field (gebruikt
   voor de "serieus"-checkboxrij) miste die reset, waardoor de UA-standaard
   fieldset-rand (groove, lichtgrijs) zichtbaar bleef. min-width:0 voorkomt
   dat de fieldset breder probeert te worden dan zijn content toestaat. */
fieldset.field{border:0;padding:0;min-width:0}
.step-legend{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.field{margin-bottom:22px}
.field>label,.field>legend{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:8px;padding:0;width:100%}
.field .optional{text-transform:none;letter-spacing:0;color:var(--steel)}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=number],
.field textarea{
  width:100%;background:var(--carbon);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);font-family:var(--body);font-size:16px;padding:14px 16px;
  transition:border-color .2s,background .2s;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--steel)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background:var(--carbon-2);outline:none}
.field .hint{margin-top:8px;margin-bottom:10px;font-size:13px;color:var(--steel);line-height:1.5}
.field.invalid input,.field.invalid textarea{border-color:#E2665B}
.field-error{display:block;margin-top:8px;font-size:13px;color:#E2665B}
.field-error:empty{display:none;margin-top:0}

fieldset.radio-group{border:0;margin-bottom:32px;padding:0}
fieldset.radio-group>legend{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin-bottom:10px;padding:0;width:100%;
}
.radio-option{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:2px;background:var(--carbon);
  padding:13px 16px;margin-bottom:10px;font-size:15.5px;color:var(--bone);
  cursor:pointer;transition:border-color .2s,background .2s;
}
.radio-option:last-of-type{margin-bottom:0}
.radio-option:hover{border-color:rgba(244,242,237,.32)}
.radio-option:has(input:checked){border-color:var(--accent)}
.radio-option input{accent-color:var(--accent);width:17px;height:17px;flex:none}
fieldset.radio-group.invalid .radio-option{border-color:#E2665B}

.checkbox-field{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.checkbox-field input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.checkbox-field label{font-size:14.5px;color:#D6D4CE;line-height:1.5}
.checkbox-field.invalid label{color:#E2665B}
/* .field input:focus (hieronder) zet outline:none voor de tekstvelden en
   raakt per ongeluk ook de "serieus"-checkbox, omdat die binnen
   fieldset.field genest zit. Herstel een zichtbare focus-visible-indicator
   op alleen dat vakje, gelijk aan de bestaande privacy-checkbox. */
fieldset.field .checkbox-field input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.privacy-link{
  display:inline-block;margin:8px 0 24px 30px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--steel);border-bottom:1px solid var(--line);
}
.privacy-link:hover{color:var(--accent-light);border-color:var(--accent)}

/* ---------- privacy page ---------- */
.privacy-content{max-width:760px;padding-bottom:40px}
.privacy-section{margin-bottom:44px}
.privacy-section:last-of-type{margin-bottom:0}
.privacy-section h2{
  font-family:var(--display);font-weight:700;font-size:20px;
  letter-spacing:-.01em;margin-bottom:14px;
}
.privacy-section p{font-size:15.5px;color:#CFCDC7;line-height:1.7;max-width:64ch}
.privacy-section p + p{margin-top:14px}
.privacy-section ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.privacy-section li{font-size:15.5px;color:#CFCDC7;line-height:1.6;padding-left:22px;position:relative}
.privacy-section li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--accent)}
.privacy-section a{color:var(--bone);border-bottom:1px solid var(--line)}
.privacy-section a:hover{color:var(--accent-light);border-color:var(--accent)}
.privacy-note{
  margin-top:44px;font-size:15.5px;color:#CFCDC7;line-height:1.6;max-width:64ch;
}
.privacy-note a{color:var(--bone);border-bottom:1px solid var(--line)}
.privacy-note a:hover{color:var(--accent-light);border-color:var(--accent)}
.privacy-fallback-note{
  margin:0 0 32px;padding:16px 18px;border:1px solid var(--accent-dark);border-radius:3px;
  background:var(--carbon);font-size:14.5px;color:#D6D4CE;line-height:1.55;max-width:64ch;
}
.privacy-fallback-note a{color:var(--bone);border-bottom:1px solid var(--line)}
.privacy-fallback-note a:hover{color:var(--accent-light);border-color:var(--accent)}
.privacy-updated{
  margin-top:28px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
}

.form-error{
  margin-top:10px;margin-bottom:18px;padding:14px 16px;border:1px solid #E2665B;
  border-radius:2px;color:#E2665B;font-size:14px;background:rgba(226,102,91,.08);
}
.form-error[hidden]{display:none}

.step-nav{display:flex;justify-content:space-between;gap:14px;margin-top:0}
.step-nav button:disabled{opacity:.5;cursor:default;transform:none}

@media(max-width:900px){
  .intake-layout{grid-template-columns:1fr}
  .intake-side{position:static}
  .intake-photo{max-width:220px}
}
@media(max-width:520px){
  .intake-hero{padding:130px 0 10px}
  .intake-hero.is-compact{padding:100px 0 10px}
}

/* verminderde beweging */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
}