/* Buyserd Juridisch Advies — buyserdlaw.com
   Eén stylesheet, geen framework, geen buildstap. */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#18333C;          /* off-black, tekst en donkere vlakken */
  --accent:#25528F;       /* blauw, uitsluitend accent */
  --wash:#F4F5F6;         /* witgrijs sectievlak */
  --rule:#D8DDE2;         /* lijnwerk */
  --paper:#FFFFFF;
  --muted:#5C7079;

  --serif:"Source Serif 4",Charter,Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gut:clamp(1.25rem,3.6vw,2.75rem);   /* buitenmarge */
  --band:clamp(4.5rem,11vh,9rem);       /* verticale sectieruimte */
  --maxw:78rem;

  --t-display:clamp(2.75rem,7.4vw,6.5rem);
  --t-h2:clamp(1.9rem,4vw,3.25rem);
  --t-h3:clamp(1.05rem,1.35vw,1.2rem);
  --t-body:clamp(1.0625rem,0.42vw + 0.98rem,1.125rem);
  --t-meta:0.8125rem;

  --ease:cubic-bezier(.17,.84,.44,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F4F5F6; --paper:#132A31; --wash:#18333C;
    --rule:#2E4A54; --muted:#9DB0B8; --accent:#7FA6DF;
  }
}
:root[data-theme="dark"]{
  --ink:#F4F5F6; --paper:#132A31; --wash:#18333C;
  --rule:#2E4A54; --muted:#9DB0B8; --accent:#7FA6DF;
}

/* ---------- 2. Fonts ---------- */
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:300 700;
  font-display:swap; src:url("../fonts/sourceserif4-var.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300 600;
  font-display:swap; src:url("../fonts/inter-var.woff2") format("woff2");
}

/* ---------- 3. Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.6;
  font-weight:380; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em;line-height:1.06}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.prose{max-width:38em}          /* ±68 tekens */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.75rem;z-index:200;background:var(--paper);
  color:var(--ink);padding:.6rem 1rem;border:1px solid var(--rule)}

/* ---------- 4. Navigatie ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--paper);border-bottom:1px solid var(--rule);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:.85rem}
.nav__mark{font-family:var(--serif);font-size:1rem;line-height:1.05;
  text-decoration:none;color:inherit;letter-spacing:-.01em}
.nav__mark b{font-weight:700;letter-spacing:.02em;display:block}
.nav__mark i{font-style:italic;font-weight:300;color:var(--accent);font-size:.86em}
.nav__links{display:flex;gap:clamp(.85rem,2vw,1.9rem);align-items:center;
  list-style:none;margin:0;padding:0;font-size:var(--t-meta);letter-spacing:.01em}
.nav__links a{color:inherit;text-decoration:none;padding-block:.2rem;
  border-bottom:1px solid transparent}
.nav__links a:hover,.nav__links a[aria-current="true"]{border-bottom-color:currentColor}
.nav__lang{white-space:nowrap}
.nav__lang [aria-current="true"]{font-weight:600}
/* boven de hero: transparant en licht. Zonder JS blijft de nav gewoon dicht. */
.nav.is-over-hero{background:transparent;border-bottom-color:transparent;color:#fff;
  text-shadow:0 1px 12px rgba(24,51,60,.55),0 1px 3px rgba(24,51,60,.4)}
.nav.is-over-hero .nav__mark i{color:#fff;opacity:.85}
@media (max-width:38rem){
  .nav__in{flex-wrap:wrap;gap:.5rem 1rem}
  .nav__links{font-size:.75rem;gap:.75rem}
}

/* ---------- 5. Hero ---------- */
.hero{position:relative;min-height:clamp(28rem,92svh,60rem);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--wash)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,51,60,.62) 0,rgba(24,51,60,.30) 18%,
    rgba(24,51,60,.06) 42%,rgba(24,51,60,.58) 100%)}
.hero__in{position:relative;width:100%;padding-block:clamp(2rem,6vh,4rem)}
.hero__mark{font-family:var(--serif);color:#fff;font-size:var(--t-display);
  line-height:.92;letter-spacing:-.025em;font-weight:600}
.hero__mark span{display:block;font-weight:300;font-style:italic;
  font-size:.44em;letter-spacing:-.005em;opacity:.9;margin-top:.1em}

/* plaatsaanduiding zolang er geen foto is gekozen */
.ph{position:relative;background:
  repeating-linear-gradient(135deg,var(--wash) 0 12px,var(--rule) 12px 13px);
  display:flex;align-items:center;justify-content:center;min-height:14rem}
.ph::after{content:attr(data-ph);font-family:var(--sans);font-size:var(--t-meta);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  background:var(--paper);padding:.45rem .85rem;border:1px solid var(--rule);text-align:center}
.hero .ph{position:absolute;inset:0;min-height:0}

/* ---------- 6. Secties ---------- */
.band{padding-block:var(--band)}
.band--wash{background:var(--wash)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink a{color:#fff}
.eyebrow{font-size:var(--t-meta);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.6rem;font-weight:500}
.display{font-family:var(--serif);font-size:var(--t-display);line-height:.98;
  letter-spacing:-.028em;font-weight:400;max-width:14em}
.h2{font-family:var(--serif);font-size:var(--t-h2);line-height:1.04;
  letter-spacing:-.022em;max-width:16em}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.6rem);
  line-height:1.35;font-weight:300;max-width:24em}

/* statement: groot type + twee smalle kolommen, zoals in de referentie-opzet */
.statement__cols{display:grid;gap:clamp(1.25rem,3vw,3rem);margin-top:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr}
@media (min-width:46rem){.statement__cols{grid-template-columns:repeat(2,minmax(0,22rem));
  margin-left:auto;justify-content:end}}
.statement__cols p{font-size:.9375rem;line-height:1.55;color:var(--muted)}

/* ---------- 7. Metaraster (Rechtsgeleerd sinds / Praktijk / Talen) ---------- */
.meta{display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:52rem){.meta{grid-template-columns:minmax(0,20rem) minmax(0,1fr)}}
.meta__list{margin:0;display:grid;gap:0}
.meta__row{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding-block:.7rem;border-top:1px solid var(--rule);align-items:baseline}
.meta__row:last-child{border-bottom:1px solid var(--rule)}
.meta__row dt{font-size:var(--t-meta);color:var(--muted);letter-spacing:.02em}
.meta__row dd{margin:0;font-size:.9375rem}

/* ---------- 8. Klantenraster ---------- */
.clients{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:34rem){.clients{grid-template-columns:repeat(2,1fr)}}
@media (min-width:58rem){.clients{grid-template-columns:repeat(3,1fr)}}
.client{padding:1.15rem 1.25rem 1.35rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:34rem){.client{border-right:1px solid var(--rule);padding-right:1.5rem}
  .client:nth-child(2n){border-right:0}}
@media (min-width:58rem){.client:nth-child(2n){border-right:1px solid var(--rule)}
  .client:nth-child(3n){border-right:0}}
.client h3{font-size:.9375rem;font-family:var(--sans);font-weight:500;letter-spacing:0}
.client p{margin:.3rem 0 0;font-size:.875rem;color:var(--muted);line-height:1.5}

/* ---------- 9. Rechtsgebieden ---------- */
.areas{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:40rem){.areas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.areas{grid-template-columns:repeat(3,1fr)}}
.area{border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  background:var(--paper);display:flex;flex-direction:column}
.area__media{aspect-ratio:4/3;overflow:hidden;background:var(--wash)}
.area__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.area:hover .area__media img{transform:scale(1.03)}
.area__media .ph{min-height:0;height:100%}
.area__body{padding:1.15rem 1.25rem 1.4rem}
.area h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:500;
  line-height:1.2;letter-spacing:-.01em}
.area p{margin:.55rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted)}
.area__no{font-size:var(--t-meta);color:var(--muted);letter-spacing:.08em;
  display:block;margin-bottom:.5rem}

/* ---------- 10. Werkwijze ---------- */
.steps{display:grid;gap:clamp(1.75rem,3.5vw,3rem);grid-template-columns:1fr;
  margin-top:clamp(2rem,5vw,3.5rem)}
@media (min-width:46rem){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border-top:1px solid var(--rule);padding-top:1.1rem}
.band--ink .step{border-top-color:rgba(244,245,246,.28)}
.step__no{font-family:var(--serif);font-size:2.6rem;line-height:1;
  display:block;margin-bottom:.6rem;opacity:.35;font-weight:300}
.step h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:500;margin-bottom:.5rem}
.step p{font-size:.9rem;line-height:1.6;opacity:.86;margin:0}

/* ---------- 11. Typografisch fragment ---------- */
.loop{font-family:var(--serif);font-size:clamp(1.75rem,5vw,3.75rem);
  line-height:1.12;letter-spacing:-.025em;font-weight:300;
  display:grid;gap:.1em;margin:0;padding:0;list-style:none}
.loop li{opacity:0;animation:loopline 9s var(--ease) infinite}
.loop li:nth-child(1){animation-delay:0s}
.loop li:nth-child(2){animation-delay:1.1s}
.loop li:nth-child(3){animation-delay:2.2s}
.loop li:nth-child(4){animation-delay:3.3s}
@keyframes loopline{
  0%{opacity:0;transform:translateY(.28em)}
  9%,74%{opacity:1;transform:none}
  86%,100%{opacity:0;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .loop li{opacity:1;animation:none;transform:none}
}

/* ---------- 12. Wie ---------- */
.who{display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:52rem){.who{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.who__portrait{aspect-ratio:3/4;overflow:hidden;background:var(--wash);
  border:1px solid var(--rule);border-radius:4px;max-width:15rem}
@media (min-width:52rem){.who__portrait{max-width:none}}
.who__portrait img{width:100%;height:100%;object-fit:cover}
.who__portrait .ph{height:100%;min-height:0}

/* ---------- 13. Knop en contact ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-size:.9375rem;font-weight:500;letter-spacing:.005em;
  padding:.85rem 1.6rem;border-radius:3px;border:1px solid var(--accent);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.btn:hover{box-shadow:0 1px 3px rgba(24,51,60,.18);transform:translateY(-1px)}
.btn:active{transform:none}
.mailtext{display:block;margin-top:.9rem;font-size:.875rem;color:var(--muted)}
.mailtext a{color:inherit}

/* ---------- 14. Voettekst ---------- */
.foot{border-top:2px solid var(--accent);padding-block:clamp(2.5rem,6vh,4rem) 2rem;
  background:var(--paper)}
.foot__cols{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:52rem){.foot__cols{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.foot h2{font-size:var(--t-meta);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-family:var(--sans);font-weight:500;margin-bottom:.9rem}
.foot p,.foot li{font-size:.875rem;line-height:1.65;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot a{color:var(--ink)}
.foot__bottom{margin-top:clamp(2rem,5vh,3rem);padding-top:1.1rem;
  border-top:1px solid var(--rule);font-size:.8125rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* ---------- 15. Documentpagina's ---------- */
.doc{padding-block:clamp(7rem,8vh+4rem,9rem) clamp(3rem,8vh,5.5rem)}
.doc__head{border-bottom:1px solid var(--rule);padding-bottom:1.5rem;margin-bottom:2.5rem}
.doc__head h1{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem);
  letter-spacing:-.025em;font-weight:400}
.doc__head .eyebrow{margin-bottom:.9rem}
.doc__body{max-width:42em}
.doc__body h2{font-family:var(--serif);font-size:1.35rem;font-weight:600;
  letter-spacing:-.012em;margin:2.4rem 0 .9rem;line-height:1.25}
.doc__body h2:first-child{margin-top:0}
.doc__body h3{font-family:var(--sans);font-size:.8125rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin:2.8rem 0 1.1rem}
.doc__body p{font-size:1rem;line-height:1.68}
.doc__body p.num{padding-left:2.6rem;text-indent:-2.6rem}
.doc__back{display:inline-block;margin-top:3rem;font-size:.875rem}

/* ---------- 16. Scroll-onthulling (uitsluitend verfraaiing) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
  .no-js .reveal{opacity:1;transform:none}
}

/* ============================================================
   17. Bewegingslaag
   Scroll-gestuurde animatie waar de browser dat native kan
   (animation-timeline), met IntersectionObserver als terugval.
   Alles valt stil bij prefers-reduced-motion.
   ============================================================ */

/* 17.1 Voortgangsbalk bovenaan */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 17.2 Preloader */
.pre{position:fixed;inset:0;z-index:300;background:var(--paper);color:var(--ink);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--gut);transition:transform .8s var(--ease);will-change:transform}
.pre[hidden]{display:none}
.pre.is-done{transform:translateY(-101%)}
.pre__mark{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.6rem);
  font-weight:600;letter-spacing:-.02em;line-height:1}
.pre__mark span{display:block;font-style:italic;font-weight:300;font-size:.42em;
  color:var(--accent);letter-spacing:0}
.pre__num{font-family:var(--serif);font-size:clamp(2.5rem,9vw,6rem);
  font-weight:300;line-height:.9;font-variant-numeric:tabular-nums}
.pre__bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);
  width:0;transition:width .25s linear}

/* 17.3 Gemaskeerde regelonthulling voor koppen */
.rise{display:block;overflow:hidden}
.rise > span{display:block;transform:translateY(105%);
  transition:transform .95s var(--ease)}
.rise.is-in > span,.no-js .rise > span{transform:none}
.rise:nth-of-type(2) > span{transition-delay:.08s}
.rise:nth-of-type(3) > span{transition-delay:.16s}

/* 17.4 Parallax op grote beelden */
.px{overflow:hidden}
.px > img,.px > .ph{will-change:transform}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .px > img,.px > .ph{height:118%;animation:px linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes px{from{transform:translateY(-9%)}to{transform:translateY(9%)}}

/* 17.5 Beeld dat openveegt bij binnenkomst */
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.wipe.is-in,.no-js .wipe{clip-path:inset(0 0 0 0)}

/* 17.6 Getrapte onthulling van rasteritems */
.stagger > *{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.is-in > *{opacity:1;transform:none}
.stagger.is-in > *:nth-child(1){transition-delay:0s}
.stagger.is-in > *:nth-child(2){transition-delay:.06s}
.stagger.is-in > *:nth-child(3){transition-delay:.12s}
.stagger.is-in > *:nth-child(4){transition-delay:.18s}
.stagger.is-in > *:nth-child(5){transition-delay:.24s}
.no-js .stagger > *{opacity:1;transform:none}

/* 17.7 Doorlopende band */
.marquee{overflow:hidden;border-block:1px solid var(--rule);
  padding-block:1.1rem;background:var(--paper)}
.marquee__track{display:flex;width:max-content;gap:0;
  animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.75rem);
  font-weight:300;letter-spacing:-.015em;white-space:nowrap;padding-inline:1.4rem;
  color:var(--muted)}
.marquee__item::after{content:"—";margin-left:1.4rem;color:var(--rule)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 17.8 Horizontale galerij (klanten op breed scherm) */
@media (min-width:64rem){
  .hscroll{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
  .hscroll > *{flex:0 0 clamp(16rem,22vw,20rem);scroll-snap-align:start;
    border-right:1px solid var(--rule);padding:1.4rem 1.5rem 1.6rem;
    border-bottom:0}
  .hscroll > *:last-child{border-right:0}
  .hscroll::-webkit-scrollbar{height:3px}
  .hscroll::-webkit-scrollbar-thumb{background:var(--rule)}
}
.hscroll__hint{font-size:var(--t-meta);color:var(--muted);margin-top:.9rem;
  display:none;letter-spacing:.04em}
@media (min-width:64rem){.hscroll__hint{display:block}}

/* 17.9 Navigatie die wegschuift bij naar beneden scrollen */
.nav{transition:background .45s var(--ease),border-color .45s var(--ease),
  color .45s var(--ease),transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(-100%)}

/* 17.10 Paginaovergang */
.veil{position:fixed;inset:0;z-index:250;background:var(--ink);
  transform:translateY(100%);pointer-events:none}
.veil.is-out{transform:translateY(0);transition:transform .5s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .rise > span,.stagger > *{transform:none;opacity:1;transition:none}
  .wipe{clip-path:none;transition:none}
  .marquee__track{animation:none;width:auto;flex-wrap:wrap}
  .progress,.veil{display:none}
  .px > img,.px > .ph{animation:none;height:100%}
  .nav.is-hidden{transform:none}
}

/* ============================================================
   18. Mobiel
   Getest op 360, 375 en 414 px breed.
   ============================================================ */

/* 18.1 Nooit horizontaal schuiven */
html,body{overflow-x:clip;max-width:100%}

/* 18.2 Lange Nederlandse samenstellingen netjes afbreken */
p,li,dd,h1,h2,h3,.area p,.client p{overflow-wrap:break-word}
[lang="nl"] p,[lang="nl"] li{hyphens:auto}

/* 18.3 Aanraakvriendelijke doelen (WCAG 2.2: minimaal 24px, streven 44px) */
@media (pointer:coarse){
  .nav__links a{padding-block:.6rem;display:inline-block;min-height:2.75rem;
    display:inline-flex;align-items:center}
  .foot a,.doc__back{display:inline-block;padding-block:.35rem}
  .btn{padding:1rem 1.6rem}
  a{-webkit-tap-highlight-color:rgba(37,82,143,.15)}
}

@media (max-width:47.99rem){
  /* 18.4 Navigatie: merk boven, links eronder, horizontaal schuifbaar */
  .nav__in{flex-direction:column;align-items:stretch;gap:.35rem;padding-block:.6rem}
  .nav__mark{font-size:.9rem}
  .nav__links{overflow-x:auto;flex-wrap:nowrap;gap:1rem;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.15rem;
    padding-right:1.75rem;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.75rem),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 1.75rem),transparent)}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links li{flex:0 0 auto}

  /* 18.5 Metaregels stapelen */
  .meta__row{grid-template-columns:1fr;gap:.15rem;padding-block:.85rem}
  .meta__row dt{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}

  /* 18.6 Ruimte terugbrengen zonder benauwd te worden */
  :root{--band:clamp(3.25rem,9vh,5rem)}
  .statement__cols{gap:1.1rem}
  .step__no{font-size:2rem}

  /* 18.7 Preloader */
  .pre{align-items:flex-end}
  .pre__num{font-size:3.25rem}

  /* 18.8 Portret gecentreerd boven de tekst */
  .who__portrait{max-width:11rem}
}

/* 18.9 Zeer smal (360 px en minder) */
@media (max-width:23rem){
  :root{--gut:1rem}
  .hero__mark{font-size:2.4rem}
  .display{font-size:2.35rem}
}

/* 18.10 Liggende telefoon: hero niet hoger dan het scherm */
@media (max-height:26rem) and (orientation:landscape){
  .hero{min-height:100svh}
  .hero__mark{font-size:2.2rem}
}

/* 18.11 iOS: vermijd dat 100vh onder de adresbalk verdwijnt */
@supports (height:100dvh){
  .hero{min-height:clamp(28rem,92dvh,60rem)}
}

/* 18.12 E-mailkoppeling als volwaardig aanraakdoel */
@media (pointer:coarse){
  .mailtext a{display:inline-block;padding:.55rem 0;min-height:2.75rem;
    display:inline-flex;align-items:center}
}

/* ============================================================
   19. Uitgebreide beweging
   ============================================================ */

/* 19.1 Hero zoomt langzaam in tijdens het scrollen */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero__media > img,.hero__media > .ph{
      height:118%;animation:heroZoom linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes heroZoom{
  from{transform:translateY(-7%) scale(1.02)}
  to{transform:translateY(7%)  scale(1.14)}
}

/* 19.2 Tekst die woord voor woord verschijnt tijdens het scrollen */
.grow{--stap:0}
.grow .w{opacity:.16;transition:opacity .45s var(--ease)}
.grow .w.on{opacity:1}
.no-js .grow .w{opacity:1}
@media (prefers-reduced-motion:reduce){.grow .w{opacity:1;transition:none}}

/* 19.3 Rechtsgebieden als redactioneel raster met wisselende hoogtes */
.areas{display:grid;gap:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr}
@media (min-width:40rem){.areas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.areas{grid-template-columns:repeat(12,1fr)}}
.area{border:0;border-radius:0;background:none;display:flex;flex-direction:column}
.area__media{border-radius:3px;background:var(--wash)}
.area__body{padding:.9rem 0 0}
.area h3{font-size:clamp(1.05rem,1.5vw,1.35rem)}
.area p{font-size:.875rem}
.area__no{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.area__no::after{content:"";flex:1;height:1px;background:var(--rule)}

/* verspringende plaatsing en verschillende beeldverhoudingen, als in een katern */
@media (min-width:64rem){
  .area:nth-child(1){grid-column:1 / span 7}
  .area:nth-child(1) .area__media{aspect-ratio:16/9}
  .area:nth-child(2){grid-column:9 / span 4;margin-top:5rem}
  .area:nth-child(2) .area__media{aspect-ratio:3/4}
  .area:nth-child(3){grid-column:2 / span 4}
  .area:nth-child(3) .area__media{aspect-ratio:4/5}
  .area:nth-child(4){grid-column:7 / span 6;margin-top:-3rem}
  .area:nth-child(4) .area__media{aspect-ratio:4/3}
  .area:nth-child(5){grid-column:3 / span 7;margin-top:1rem}
  .area:nth-child(5) .area__media{aspect-ratio:16/10}
}
@media (min-width:40rem) and (max-width:63.99rem){
  .area:nth-child(2n){margin-top:3rem}
  .area__media{aspect-ratio:4/3}
  .area:nth-child(3) .area__media{aspect-ratio:3/4}
}
@media (max-width:39.99rem){.area__media{aspect-ratio:4/3}}

/* 19.4 Radiale index die meedraait met de scroll */
.radial{position:relative;height:230vh;background:var(--paper);
  transition:background-color .5s var(--ease),color .5s var(--ease)}
.radial.is-pinned{background:var(--ink);color:var(--paper)}
.radial__stick{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.radial__wheel{position:absolute;left:50%;top:50%;
  width:min(78vh,88vw);height:min(78vh,88vw);
  transform:translate(-50%,-50%) rotate(var(--draai,0deg));
  will-change:transform}
.radial__item{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(var(--hoek))
            translateY(calc(min(39vh,44vw) * -1)) rotate(calc(var(--hoek) * -1));
  font-family:var(--serif);font-size:clamp(.8rem,1.5vw,1.05rem);
  letter-spacing:.04em;white-space:nowrap;opacity:.34;
  transition:opacity .4s var(--ease)}
.radial__item.on{opacity:1}
.radial__ring{position:absolute;left:50%;top:50%;
  width:min(78vh,88vw);height:min(78vh,88vw);
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid currentColor;opacity:.16}
.radial__mid{position:relative;text-align:center;max-width:22rem;padding-inline:1rem}
.radial__eyebrow{font-size:var(--t-meta);letter-spacing:.11em;text-transform:uppercase;
  opacity:.6;margin-bottom:.9rem}
.radial__naam{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,2.6rem);
  line-height:1.1;letter-spacing:-.02em;font-weight:300;min-height:2.4em;
  display:flex;align-items:center;justify-content:center}
.radial__naam span{display:block;transition:opacity .35s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .radial{height:auto;background:var(--ink);color:var(--paper)}
  .radial__stick{position:static;height:auto;padding-block:var(--band);display:block}
  .radial__wheel,.radial__ring{display:none}
  .radial__mid{max-width:none;text-align:left}
  .radial__naam{min-height:0;display:block}
  .hero__media > img,.hero__media > .ph{animation:none;height:100%}
}

/* 19.5 Het brede beeld tussen de secties */
.intro-beeld{display:block;overflow:hidden;height:clamp(18rem,58vh,36rem)}
.intro-beeld > img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   20. Woordmerk van het briefpapier
   ============================================================ */
.nav__mark{display:block;line-height:0}
.nav__mark img{width:clamp(9rem,15vw,11.5rem);height:auto;display:block;
  transition:filter .45s var(--ease)}
/* Boven de hero: het woordmerk wit maken. Het bestand heeft een alfakanaal,
   dus brightness(0) invert(1) levert een schone witte versie op. */
.nav.is-over-hero .nav__mark img{filter:brightness(0) invert(1)
  drop-shadow(0 1px 10px rgba(24,51,60,.5))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav__mark img{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .nav__mark img{filter:brightness(0) invert(1)}

.hero__mark{line-height:0}
.hero__mark img{width:min(30rem,72vw);height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 2px 18px rgba(24,51,60,.45))}
.pre__mark{line-height:0}
.pre__mark img{width:min(20rem,62vw);height:auto}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pre__mark img{filter:brightness(0) invert(1)}
}

/* ============================================================
   21. Beeldbewerking: grijstinten met blauwe ondertoon
   Uitsluitend de hero blijft in kleur.
   ============================================================ */
:root{--beeldfilter:grayscale(1) sepia(.40) hue-rotate(179deg) saturate(1.25)
  contrast(1.04) brightness(1.01)}
.area__media img,
.intro-beeld > img,
.who__portrait img{filter:var(--beeldfilter);
  transition:filter .6s var(--ease),transform .8s var(--ease)}
/* bij aanwijzen iets terug naar kleur, als teken van leven */
.area:hover .area__media img{filter:grayscale(.55) sepia(.18) hue-rotate(179deg)
  saturate(1.1) contrast(1.02)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--beeldfilter:grayscale(1) sepia(.45)
    hue-rotate(179deg) saturate(1.15) contrast(1.02) brightness(.92)}
}

/* ============================================================
   22. Contrastkleur bij subtitels
   ============================================================ */
.eyebrow{color:var(--accent);font-weight:600}
.band--ink .eyebrow,.radial__eyebrow{color:inherit;opacity:.62;font-weight:500}
.area__no{color:var(--accent);font-weight:600}
.area__no::after{background:var(--rule)}
.step h3{color:inherit}
.meta__row dt{color:var(--accent);font-weight:500}
.client h3{color:var(--ink)}
.foot h2{color:var(--accent);font-weight:600}
.doc__body h3{color:var(--accent)}
.lede{color:var(--ink)}
/* de tweede regel van de statement-kolommen in donkergrijs, niet in blauw */
.statement__cols p{color:var(--muted)}