/* About- en spokespeople-CSS (ronde 4).

   Staat NIET in styles.css. Dat bestand is sinds 2026-07-30 niet meer
   byte-identiek aan output/styles.css (de contrastreparatie), maar de discipline
   blijft: styles.css draagt het goedgekeurde ontwerp van de homepage, nieuwe
   pagina's brengen hun eigen platte bestand mee. Zelfde constructie als
   forms.css (ronde 2) en services.css (ronde 3), ingeladen via de styles-prop
   op BaseLayout.

   Er is geen scoping-mechanisme, dus elke selector hangt met de hand onder
   .about-* (de About-pagina) of .person-* (het persoonssjabloon). Beide
   prefixen zijn vrij: styles.css bezit .team-*, .people en .svc-*, en
   services.css bezit .service-* en .hub-*.

   WAAROM EIGEN KLASSEN EN GEEN OVERRIDES OP .team-card: het portretraster hier
   staat op ink, de homepage-strip op paper. `.team-card .mono` staat op
   --grey-2 en dat haalt op ink 3,37:1 - precies de fout die op 2026-07-30
   site-breed is gerepareerd. Een override die alleen op About hoort te gelden
   kan bovendien naar de homepage lekken. Zelfde afweging als .hub-card in
   ronde 3.

   De maten van het twee-zone-raster zijn LETTERLIJK die van .news-inner /
   .news-rail uit styles.css (r.854-866) - huisapparatuur, geen nieuw raster
   (DESIGN.md §6b).

   Alleen tokens uit DESIGN.md §1: geen losse hex, geen losse ease, radii
   alleen uit {2,3,4,8,10,999}px. */

/* ================================================ ABOUT: SECTIE 1, HET REGISTER (ink)

   HERBOUWD op 2026-07-31. De eerste versie was een portretraster van drie
   kolommen met naam en functietitel eronder, en die is afgekeurd: zij herhaalde
   de people-strip van de homepage met dezelfde tien portretten uit dezelfde
   query en een byte-identieke kop (DESIGN.md §6d). Deze versie laat zien waar
   elk van de tien voor staat in plaats van dat zij bestaan.

   De rij is de grammatica van .news-row uit styles.css (r.894-990): indexkolom
   links, inhoud in het midden, meta aan de rechterrand, haarlijn ertussen. Dat
   vult beide randen, en dat is precies waarom de newswire zijn breedte haalt. */
.about-roster {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 34px) 0 clamp(70px, 8vw, 104px);
}
/* Huisregel uit styles.css: elke donkere sectie zet de kicker op --grey.
   .kicker staat standaard op --grey-2 (#64646c) en dat haalt op ink maar
   3,37:1 - onder de 4,5:1 die 11,5px tekst nodig heeft. Gemeten, niet geraden. */
.about-roster .kicker { color: var(--grey); }

/* De kop op de verhouding van .statement-cols (styles.css): kop links, leadzin
   rechts. align-items:end zet de leadzin op de basislijn van de kop. */
.about-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
  padding-bottom: clamp(38px, 4.4vw, 62px);
}
.about-head .section-title { margin: 0; }
.about-lead {
  color: var(--grey);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 42ch;
  margin: 0;
}

/* ---- DE BASISVORM IS DE CONTACTSTROOK ----
   Zo staan alle tien de gezichten er ook zonder JS, bij reduced-motion en op
   mobiel. Het sticky paneel hieronder is de VERRIJKING, niet de basis. Andersom
   zou een bezoeker zonder JS negen van de tien portretten missen, en dat is de
   inhoud degraderen als de motion faalt: precies wat data-reveal met
   autoAlpha 0 doet en waarom dat hier op kerninhoud verboden is (DESIGN.md §8:
   compleet en leesbaar zonder animatie, ook no-JS).

   Geen grayscale op de strook, om dezelfde reden: zonder JS bestaat er geen
   actieve persoon, dus zouden alle tien permanent grijs blijven. */
.about-inner {
  display: grid;
  /* minmax(0, 1fr) en NIET 1fr: 1fr is minmax(auto, 1fr), en dan telt de
     min-content van de scrollende strook (10 x 138px) mee en duwt de pagina
     open. Verdediging, geen reparatie: gemeten was de 63px overflow op 390px
     het scheidingsteken zonder spaties, niet dit. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
}
.about-panel { min-width: 0; }
.about-stage {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  min-width: 0;
}
/* De samenvattingen bestaan alleen in de verrijkte vorm: zonder JS is er geen
   actieve persoon en zouden tien alinea's onder elkaar de strook onleesbaar
   maken. De zin komt uit de bio die op de persoonspagina volledig staat, dus er
   gaat geen informatie verloren. */
.about-intros { display: none; }
/* Vaste verhouding + object-fit cover, precies zoals .team-photo op de
   homepage: een vervangen portret verschuift de layout nooit (DESIGN.md §4). */
.about-frame {
  position: relative;
  flex: 0 0 clamp(104px, 11vw, 138px);
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-w);
}
.about-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- DE VERRIJKING: twee zones met een sticky paneel ----
   Alleen boven 1000px, want daaronder is er geen tweede kolom (styles.css
   r.1067). De tien frames worden dan een stapel in dezelfde rastercel; er is er
   precies een zichtbaar.

   DE SCHAKELAAR IS EEN MEDIA-QUERY EN NIET DE KLASSE .is-enhanced, en dat is op
   2026-08-03 veranderd omdat Koen de flits zag: bij het openen van deze pagina
   kwam de horizontale contactstrook eerst in beeld en klapte de layout daarna om.
   Die klasse wordt gezet door reading-line.js, een type="module" en dus deferred,
   die pas draait als de HTML geparsed is EN de vier blokkerende script-tags zijn
   gedraaid. De browser schildert ruim daarvoor, dus de basisvorm stond
   onvermijdelijk een moment op het scherm.

   GEMETEN, 1440x900 met warme cache: CLS na de eerste verf 0,1992 op elke
   latentie van 0 tot 150ms (vijftien runs, altijd exact dat getal); de DUUR
   schaalde wel mee, van een frame op 0ms tot ~150ms op 150ms latentie. Dezelfde
   pagina met de klasse al in de geserveerde HTML gaf CLS 0,0000, en de module
   500ms ophouden rekte het venster naar 423ms bij ongewijzigde CLS. De sprong
   hing dus aan het MOMENT waarop deze conditie waar wordt, en die conditie hoort
   daarom in CSS, waar de browser hem bij de eerste verf al kent.

   DE TWEE CONDITIES ZIJN LETTERLIJK WAT reading-line.js DOET, niet meer:
   die module draait alleen als er scripting is, en hij slaat bij
   prefers-reduced-motion alles over (dan blijft de contactstrook staan, en dat
   is de bedoeling: een element dat met de scroll van staat wisselt is precies de
   beweging die die voorkeur uitzet). Nagemeten in Chromium EN WebKit, alle vier
   de combinaties: met JS uit meldt de browser scripting: none, met JS aan
   enabled, en de reduced-motion-tak klopt in beide richtingen. De degradatie uit
   het page-manifest blijft dus ongewijzigd: zonder JS en bij reduced-motion
   staan alle tien de portretten in de strook, verrijkt precies een.

   .is-enhanced blijft door reading-line.js gezet worden; news.css stuurt zijn
   jaarblok er nog mee aan. Hier doet die klasse niets meer.

   Sticky mag hier, anders dan bij de capability-rail van een dienstpagina: het
   paneel is een beeld van vaste verhouding en dus korter dan het venster, niet
   een lijst van twaalf labels die 835px hoog werd (DESIGN.md §6b). */
@media (min-width: 1001px) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .about-roster .about-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    gap: clamp(30px, 5vw, 72px);
  }
  .about-roster .about-panel {
    position: sticky;
    top: calc(var(--nav-h) + 26px);
  }
  .about-roster .about-stage {
    display: grid;
    aspect-ratio: 4 / 5;
    /* HET PANEEL MOET IN HET VENSTER PASSEN, want een sticky element scrollt
       niet intern: wat er onderuit steekt is permanent onzichtbaar (DESIGN.md
       §6b, de capability-rail van 835px). Op 1440x900 is er onder de nav 802px
       en op 1024x768 maar 670px, terwijl 4/5 van een kolom van 512px al 640px
       is. De max-height laat het portret meekrimpen met het venster; de
       breedte blijft en object-fit cover doet de rest, dus de layout schuift
       niet. 190px is de ruimte voor de samenvatting eronder. */
    max-height: calc(100svh - var(--nav-h) - 190px);
    gap: 0;
    overflow: hidden;
    border-radius: 10px;
    outline: 1px solid var(--line-w);
  }
  .about-roster .about-intros {
    display: grid;
    margin-top: 16px;
  }
  /* Alle tien in dezelfde rastercel: de hoogte van het paneel is die van de
     langste samenvatting en verspringt dus niet bij een wissel. */
  .about-roster .about-intro {
    grid-area: 1 / 1;
    margin: 0;
    color: var(--grey);
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
  }
  .about-roster .about-intro.is-on { opacity: 1; }

  /* HET REGISTER KRIJGT RUIMTE ONDER ZICH, en dat is geen marge om het mooi te
     maken. Een sticky element wordt losgelaten zodra de onderkant van zijn
     container in beeld komt: bij de laatste rijen was er onder de rij geen
     ruimte meer voor de volle hoogte van het paneel, dus schoof het portret met
     de pagina mee omhoog en werd het bovenaan afgesneden. Gemeten op 2026-07-31
     vóór deze regel: Marisa 102px en Anna 282px van hun portret buiten beeld,
     op ELKE scrollpositie waarop hun rij live was, op 1024x768, 1440x900 en
     1718x1290. Koen zag het meteen; mijn eigen toets keek of het JUISTE portret
     werd getoond en niet of je het kon zien.
     De ruimte staat op de lijst en niet op de sectie, want alleen de lijst is de
     container waar de sticky-berekening aan hangt. */
  .about-roster .about-list { padding-bottom: 300px; }
  /* En die ruimte komt NIET boven op de sectiepadding: samen zou dat 404px
     leegte onder de laatste rij geven. De sectie sluit nu af met de ruimte die
     het paneel toch al nodig heeft. */
  .about-roster { padding-bottom: 0; }
  .about-roster .about-frame {
    grid-area: 1 / 1;
    flex: none;
    aspect-ratio: auto;
    border-radius: 0;
    outline: 0;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
  }
  .about-roster .about-frame.is-on { opacity: 1; }
}

/* ---- het register ---- */
.about-list { border-top: 1px solid var(--line-w); }
/* HET MEDEWERKERSREGISTER HOUDT DE LABELMAAT VAN VOOR RONDE 2, op Koens besluit
   van 2026-08-29 nadat hij naar de gebouwde pagina keek: "ik denk eigenlijk dat
   dit bij de medewerkers niet nodig was". Dat is geen meetfout maar een oordeel
   over deze ene vorm, en het klopt met wat de meting er los van al liet zien:
   een rij draagt hier drie labels naast elkaar in smalle kolommen, en op 1rem
   ging "Managing Director" naar twee regels terwijl de expertisereeks van elf
   naar veertien regelvakken groeide.

   Dezelfde uitzondering, dezelfde reden als .person-caps .mono een paar honderd
   regels verderop: een DICHTE reeks labels in een smalle kolom leest niet beter
   op een grotere maat, hij wordt alleen langer. De losse kickers en veldlabels
   elders op de site staan wel gewoon op 1rem, want die dragen een regel.

   Begrensd bij de BRON (valkuil 135): .about-row .mono is (0,2,0) en wint van
   .mono (0,1,0), dus het nummer, de rol en de expertisereeks volgen deze maat
   zonder dat het volgende kind opnieuw moet worden afgevangen. */
.about-row .mono { font-size: 0.82rem; }

.about-row {
  position: relative;
  display: grid;
  /* GEMETEN EN VERWORPEN op 2026-08-29, bij het vergroten van de type-schaal.
     Met .mono op 0,82rem heeft "Managing Director" 166px nodig in een kolom van
     147px, dus vijf van de tien rollen kwamen op twee regels in plaats van een.
     De verleiding is de rolkolom te verbreden naar minmax(170px, ...): dat
     herstelt die vijf inderdaad, en het kost DRIE KLANTNAMEN, want de naamkolom
     krimpt mee en .about-name staat op 46,4px. Gemeten: about-name 11 -> 14
     regelvakken op 1440 en 1920, en 10 -> 13 op 1024. Een naam op
     display-formaat die wrapt is zichtbaarder dan een mono-label van twee
     regels, en het is precies de §6b-fout (de naamkolom is de smalste van de
     rij). Kolom blijft dus zoals hij was; de twee regels zijn de prijs. */
  grid-template-columns: 46px minmax(0, 1fr) minmax(120px, 0.46fr);
  /* De expertise loopt over de naam- EN de rolkolom. Alleen onder de naam wringt
     zij zich in een band van 300px terwijl de rij 640px breed is: de §6b-fout,
     en die is hier gemeten voor hij hier stond. */
  grid-template-areas:
    "no name role"
    "no exp  exp";
  gap: 4px clamp(14px, 2vw, 28px);
  align-items: start;
  padding: clamp(18px, 2vw, 26px) 12px;
  border-bottom: 1px solid var(--line-w);
  color: inherit;
  text-decoration: none;
  transition: background 0.35s var(--ease-out);
}
/* De rode randstreep, letterlijk .news-row::after uit styles.css. */
.about-row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s var(--ease-out);
}
.about-no { grid-area: no; color: var(--grey-3); padding-top: 7px; }
/* Kop-recept (DESIGN.md §2), en dezelfde maten als .news-client: smal, zwaar,
   uppercase. Dit is de reden dat het register leest als een sectie van deze site
   en niet als een tabel. */
.about-name {
  grid-area: name;
  display: block;
  font-stretch: 64%;
  font-weight: 780;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.3vw, 2.9rem);
  line-height: 1;
  color: var(--grey);
  transition: color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.about-exp {
  grid-area: exp;
  margin: 13px 0 0;
  color: var(--grey-3);
  line-height: 1.9;
  transition: color 0.4s var(--ease-out);
}
/* Het scheidingsteken staat met ECHTE SPATIES in de markup, niet met deze
   marge alleen. Een marge is geen afbreekkans: zonder die spaties is
   `relations/IPO/RTO` voor de browser een woord, goed voor 63px horizontale
   overflow op 390px terwijl 1440px er perfect uitzag (DESIGN.md §4). */
.about-sep { color: var(--red); margin: 0 5px; }
.about-meta {
  grid-area: role;
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
  padding-top: 8px;
}
.about-role { color: var(--grey); }
/* De tijdelijke status naast de functietitel (Marissa Taddeo). Eigen regel,
   want een permanente functietitel en een tijdelijke status zijn twee dingen.
   De pilvorm is die van .news-tag; rood zou hier het accent verspillen aan een
   terzijde. */
.about-note {
  color: var(--grey);
  padding: 3px 10px;
  border: 1px solid var(--line-w);
  border-radius: 999px;
}

/* ---- HET SIGNATURE: de leespositie stuurt het paneel ----
   Precies een rij is live: die het dichtst bij 46% van de vensterhoogte staat.
   Zij krijgt exact de behandeling die .news-row vandaag bij HOVER geeft. Geen
   nieuwe kleur, geen nieuwe ease, geen nieuw primitief; alleen de trigger gaat
   van de muis naar de leespositie, en juist daardoor werkt het op een telefoon.
   Blijft het script uit, dan staat er een compleet register met tien portretten
   ernaast: de begintoestand is vol, niet leeg. */
/* rgba(255,255,255,.016) is geen nieuwe waarde: het is letterlijk de
   achtergrond die .news-row bij hover krijgt (styles.css r.932), de enige
   plek waar hij op deze site voorkomt. Een token is er niet voor, en er een
   verzinnen zou styles.css raken. */
.about-row.is-live { background: rgba(255, 255, 255, 0.016); }
.about-row.is-live .about-name { color: var(--white); transform: translateX(7px); }
.about-row.is-live .about-exp { color: var(--grey); }
.about-row.is-live::after { transform: scaleY(1); }

@media (hover: hover) and (pointer: fine) {
  a.about-row:hover .about-name { color: var(--white); transform: translateX(7px); }
  a.about-row:hover::after { transform: scaleY(1); }
}

/* ================================================ ABOUT (BUREAU): SECTIE 1, DE KOP (ink)

   2026-08-29, punt 9 van SPOKE's feedback. About gaat sindsdien over het bureau;
   het register erboven staat op /spokespeople/ en gebruikt dezelfde stylesheet,
   want de klassen heten .about-* en worden door beide pagina's gedeeld.

   DE VORM IS NIEUW OP DEZE SITE en dat is geen smaak. De services-hub opent met
   cijfers links en beeld rechts, de negen dienstpagina's en de contactpagina met
   een band over de volle breedte. Hier staat de kop over de volle breedte en
   daaronder het BEELD in de brede zone met de leadzin in de smalle, onderkanten
   op één lijn. Zo draagt de tweede zone tekst in plaats van lucht (DESIGN.md
   §6b) en opent About niet als de vierde kopie van dezelfde sjabloonkop. */
.about-hero {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 34px) 0 clamp(70px, 8vw, 104px);
}
/* Huisregel uit styles.css: op een donkere sectie gaat de kicker naar --grey,
   want --grey-2 haalt op ink maar 3,37:1. Zelfde reden als bij .about-roster. */
.about-hero .kicker { color: var(--grey); }
/* CONTEXTUELE VERKLEINING, en zij is gemeten. De kop is een hele zin van drie
   regels en staat in de 1,35fr-kolom van .about-head (op 1440px ~605px breed);
   op de huismaat van .section-title (89,6px) breekt "BUSINESSES GET SEEN," daar
   in tweeën. Op 64px past de langste regel met ~45px over. Hetzelfde idioom als
   .about-careers .section-title en .service-mid .section-title: een kleinere maat
   van dezelfde schaal, geen nieuwe token.

   text-wrap: pretty hoort bij elke kop die langer is dan een woord (CLAUDE.md
   §7i). De drie regels staan als losse line-masks in de markup, dus dit vangt
   alleen het geval dat een regel op een smal venster alsnog moet afbreken. */
.about-hero-title {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  margin: 0;
  text-wrap: pretty;
}
/* Vaste verhouding met object-fit cover (DESIGN.md §4): een vervangende upload
   met andere maten verschuift de layout dan niet. 16/9 en niet de 21/9 van de
   dienstpagina's, want dit beeld heeft een onderwerp dat links in het kader
   staat en een lage band snijdt dat weg. */
/* Over de VOLLE breedte van de wrap. De afstand tot de kop komt van de
   padding-bottom van .about-head; een eigen margin bovenop maakte dat gat 124px
   en dat is een leeg vlak in plaats van lucht. Zie de noot in AboutHero.astro
   voor waarom deze band niet in een kolom naast de leadzin staat. */
.about-hero-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-2);
}
.about-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ================================================ ABOUT: SECTIE 2, HET VERHAAL (paper) */
.about-story {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 8vw, 96px) 0;
}
/* De kop staat over de VOLLE breedte, niet in een smalle rail. Dit is het enige
   grote, rustige moment op licht en de vormtegenstelling met het dichte register
   erboven (spec 2026-07-31 §4). */
.about-story-head { padding-bottom: clamp(32px, 4vw, 56px); }
.about-story-title {
  /* De maat van .statement-title uit de type-schaal (DESIGN.md §1), maar
     NIET die klasse: script.js r.399 hangt de blur-reveal met autoAlpha 0 aan
     de eerste .statement-title op de pagina, en dan verdwijnt deze kop zodra
     de ScrollTrigger niet vuurt. Zie de noot in AboutStory.astro. */
  font-size: clamp(3rem, 8.6vw, 8rem);
  margin: 0;
}
/* De verhouding van .statement-cols (1,35fr/1fr) uit styles.css: de brede kolom
   draagt het verhaal, de smalle de feiten en de handeling. Een eigen klasse en
   geen override op .statement-cols, want die brengt zijn eigen margin-top mee en
   hangt aan de homepage-sectie. */
.about-story-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
/* = .statement-copy: dezelfde leesmaat voor dezelfde soort tekst. */
.about-prose {
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  line-height: 1.62;
  max-width: 62ch;
}
.about-prose p { margin: 0 0 1.05em; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { font-weight: 700; }
.about-prose a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.about-facts-label { color: var(--grey-2); margin: 0 0 6px; }
/* Gestapeld in de smalle zone, elk feit als label boven waarde: de celvorm van
   .results-grid. BEWUST NIET de vorm van .minifacts (label links, waarde rechts),
   want dat is de widget waarin deze drie feiten op de homepage al staan en de
   inhoud is byte-identiek. Dezelfde feiten in dezelfde vorm op twee pagina's is
   de optelsom die DESIGN.md §6d verbiedt. */
.about-facts { display: grid; border-top: 1px solid var(--line-k); }
.about-facts div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-k);
}
.about-facts dt { color: var(--grey-2); }
.about-facts dd { font-weight: 650; font-size: 1.05rem; }

.about-story-side { display: grid; }
.about-story-act { margin: 24px 0 0; }

/* ================================================ ABOUT: SECTIE 3, CAREERS (ink) */
.about-careers {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 7vw, 88px) 0;
}
.about-careers .kicker { color: var(--grey); }
/* Hetzelfde .news-inner-raster als sectie 1 en 2. */
.about-careers-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* Kleiner dan de huismaat van een rail-kop, en dat is een CMS-reden: deze titel
   is een hele zin ("Looking for your next career opportunity?", 41 tekens) en
   die wordt in een rail van 333px op 59,2px zes regels kapitalen. Contextuele
   verkleining is huisidioom - .service-mid .section-title bestaat om precies
   dezelfde reden - en geen nieuwe token. */
.about-careers .section-title {
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  margin: 0;
}
.about-careers-copy {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--grey);
  line-height: 1.6;
}
.about-careers-copy p { margin: 0 0 0.8em; }
.about-careers-copy p:last-child { margin-bottom: 0; }
/* De knoppen staan sinds 2026-07-31 IN de stroom en niet meer als los
   rasteritem in de rail. Reden, gemeten: in de rail stak de knoppenrij ~80px
   onder de kantoren uit, waardoor de rail hoger was dan de stroom (DESIGN.md
   §6b verbiedt dat) en de onderste rij van de sectie 21% van de contentbreedte
   haalde. Zij staan VOOR de kantoren, zodat de onderste rij de brede
   kantorenstrook blijft en niet een korte knoppenrij. */
.about-careers-act {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
}

.about-careers-where { margin-top: clamp(24px, 2.5vw, 32px); }
.about-where-label { color: var(--grey); margin: 0 0 14px; }
/* Twee kantoren naast elkaar over de volle stroomkolom. Onder elkaar zouden ze
   de sectie hoger maken zonder breder te worden; naast elkaar sluit de onderste
   rij van de pagina af op de volle contentbreedte. */
.about-offices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line-w);
}
.about-office { padding: 16px 0 0; }
.about-office-label { color: var(--grey); margin: 0 0 8px; }
.about-office strong { display: block; font-weight: 700; font-size: 1.05rem; }
.about-office address { color: var(--grey); margin: 4px 0 0; line-height: 1.55; }
.about-office .office-tel { display: inline-block; margin-top: 8px; color: var(--grey); }

/* ================================================ PERSOON: DE HERO (ink)

   Twee zones vanaf de eerste regel (spec §5.1): links wie dit is en wat je met
   hem of haar kunt doen, rechts het portret. De verhouding is die van de
   story-grid uit styles.css (minmax(0,.9fr) minmax(0,1.2fr)), het huisraster
   voor "tekst naast beeld" (DESIGN.md §6b) - geen nieuwe maat.

   Het portret is GROOT, en dat is een gevolg van het register: About brengt de
   bezoeker hiernaartoe met een portret van ~590px breed, dus een detailpagina
   die met een pasfoto opent zou een stap terug zijn. */
.person-hero {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 32px) 0 clamp(48px, 6vw, 72px);
}
/* Huisregel uit styles.css: elke donkere sectie zet de kicker op --grey.
   .kicker staat standaard op --grey-2 (#64646c) en dat haalt op ink maar
   3,37:1 - onder de 4,5:1 die 11,5px tekst nodig heeft. */
.person-hero .kicker { color: var(--grey); margin-bottom: 0; }
.person-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 76px);
  /* start, NIET stretch: een gestrekt item negeert zijn aspect-ratio, en dan
     zou de portretcontainer meegroeien met de tekst ernaast en zijn vaste
     verhouding verliezen (DESIGN.md §4). De tekstkolom stretcht wel, apart. */
  align-items: start;
}
/* De tekstkolom vult de hoogte van het portret en zet zijn inhoud als EEN blok
   op halve hoogte, zodat de naam op ooghoogte van het portret staat.
   Twee vormen zijn eerst geprobeerd en op de opname afgekeurd: alles bovenaan
   laat 400px leeg onder de knop, en space-between (kicker boven, naam onder)
   sloeg een gat van 450px tussen de kicker en de naam - gemeten op 1440x900,
   met de kicker op y=113 en de naam op y=560. Dat leest als een onafgemaakte
   pagina en niet als rust (DESIGN.md §6b). De kicker blijft direct boven de kop
   staan, want dat is het huisidioom van elke sectie.
   Is de tekst ooit hoger dan het portret (smal venster, lange naam), dan groeit
   de rij en doet het centreren vanzelf niets meer. */
.person-id {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: clamp(18px, 2vw, 26px);
}
.person-hero .section-title { margin: 0; }
.person-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  color: var(--grey);
}
/* De tijdelijke status naast de functietitel (Marissa Taddeo). Zelfde pilvorm
   als .about-note in het register, zodat dezelfde gegevens er op beide pagina's
   hetzelfde uitzien. */
.person-note {
  color: var(--grey);
  padding: 3px 10px;
  border: 1px solid var(--line-w);
  border-radius: 999px;
}
.person-act { margin: clamp(20px, 2.4vw, 28px) 0 0; }

/* Vaste verhouding + object-fit cover: een vervangen portret verschuift de
   layout nooit (DESIGN.md §4). 4:5 is de verhouding die het register en de
   homepage-strip ook gebruiken, dus één upload bedient alle drie. */
.person-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-w);
}
.person-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ================================================ PERSOON: DE BODY (paper)

   Het twee-zone-raster van .service-body-grid, letterlijk dezelfde maten als
   .news-inner: rail links, lopende tekst rechts. De rail staat NA de stroom in
   de DOM en wordt hier links geplaatst; onder 1000px klapt het raster en dan
   geldt de DOM-orde, en dan hoort de biografie vóór de labellijst te komen. */
.person-body {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 8vw, 96px) 0;
}
/* De verhouding is die van .statement-cols (1,35fr/1fr) uit styles.css, maar
   GESPIEGELD: de smalle zone staat hier links. Dat is dezelfde rolverdeling als
   op de homepage - lopende tekst in de brede kolom, losse feiten in de smalle -
   en de expertiselabels zijn precies het equivalent van de chips daar.

   NIET de 0,92fr/2fr van .service-body-grid, en dat is gemeten. Met dat raster
   is de stroomkolom 723px terwijl de biografie op de leesmaat van 62ch (604px)
   blijft: 119px van de kolom blijft dan leeg en de tekst haalt de rechterrand
   niet (86% in plaats van 100%). Een dienstpagina komt daar wel mee weg omdat
   haar beelden de volle kolom vullen; een persoonspagina heeft geen beeld in de
   body. Met 1fr/1,35fr is de stroomkolom op 1440px exact 604px, dus de tekst
   vult hem en op elk smaller venster is de kolom smaller dan de leesmaat en
   vult zij hem ook. Gemeten gevolg bij Marisa Urbano (de dunste pagina):
   body 66% -> 86%, pagina 80% -> 88%. */
.person-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* DE RAIL PLAKT, en dat is gemeten en niet overgenomen. DESIGN.md §6b: twee
   zones zijn dwingend, plakken is optioneel en alleen als de rail aantoonbaar
   past. De capability-rail van een dienstpagina mag het NIET (835px met twaalf
   labels), deze wel: met de labels als doorlopende reeks is de hoogste rail
   (Josh, elf labels) ~420px, tegen 670px beschikbaar op het krapste venster dat
   deze layout nog tweezonig toont (1024x768) en 602px op 1440x700.

   WAAROM HET NODIG IS. Anna Fox heeft geen expertiselabels, dus haar rail is
   alleen de lijst met andere spokespeople: 151px naast een biografie van 685px.
   Zonder plakken staat 83% van de sectiehoogte met een lege linkerkolom - en
   geen enkele poort ziet dat, want measure-width-usage meet hoe ver de inhoud
   naar RECHTS reikt en de tekst staat rechts (gemeten: Anna's body 95%, de
   hoogste van alle negen). Dit is exact de situatie waarvoor de homepage
   .news-rail laat plakken: een korte rail naast een lange lijst.

   align-items: start op het raster is de voorwaarde, niet een detail: een
   gestrekt rasteritem vult zijn rasterzone en heeft dan geen ruimte om in te
   schuiven. Zelfde constructie als .news-rail en als het portretpaneel op
   About. */
.person-caps {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--nav-h) + 26px);
}
.person-flow { grid-column: 2; grid-row: 1; }

/* DE PERSOONSRAIL HOUDT DE LABELMAAT VAN VOOR RONDE 2, en dit is de enige plek
   op de site waar de 16px-schaal (2026-08-29) niet past. Niet uit voorzichtigheid
   maar gemeten: de rail mag nooit hoger zijn dan de biografie ernaast (§6b), en
   op 1440x800 had Marisa Urbano bij 13,1px nog 3px over (rail 451, stroom 454).
   Met .mono op 1rem groeit haar rail naar 537px tegen dezelfde stroom van 454.

   Vier tussenwegen zijn gemeten en alle vier gehaald noch gehalveerd:
     regelafstand 2,2 -> 1,9 plus padding 5 -> 4px   nog 51px te veel
     rail-labels op 0,90rem                          nog 58px te veel
     rail-labels op 0,86rem                          nog 25px te veel
     alleen de dichte lijsten terug, kicker groeit    nog 2px te veel
   De laatste is geen reparatie maar een afdekking: 2px is geen marge, en de
   eerstvolgende zin die de klant aan een bio toevoegt breekt hem weer.

   Twee dingen die WEL werken zijn bewust niet gedaan. De uitgang naar de andere
   spokespeople (.person-more, 136 tot 164px) weghalen op pagina's die al labels
   dragen scheelt genoeg, maar dat is de enige verbinding tussen de negen
   persoonspagina's en dus een wijziging aan de linkgraaf (§7h), niet aan de
   type-schaal. En de kop in de rail verkleinen is in een ronde die dingen groter
   maakt de verkeerde kant op.

   Begrensd bij de BRON en niet per kind (valkuil 135): .person-caps .mono is
   (0,2,0) en wint van .mono (0,1,0), dus de run, de labels, de namenlijst en de
   kicker in deze kolom volgen deze maat zonder dat het volgende kind opnieuw
   moet worden afgevangen. Toets 2 van check-about.mjs meet het bij elke run. */
.person-caps .mono { font-size: 0.82rem; }

.person-caps .kicker { margin-bottom: clamp(16px, 2vw, 22px); }
/* Zelfde maat als .news-rail .section-title: de huismaat voor een kop in een
   smalle kolom. */
.person-caps .section-title {
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
  margin: 0 0 22px;
}
/* De labels als doorlopende reeks, met een haarlijn erboven zodat zij onder de
   kop verankerd staan zoals de rijen dat deden. line-height 2 is de maat die
   .about-exp in het register ook aanhoudt (1.9); mono-labels op 11,5px hebben
   die lucht nodig om als losse eenheden te lezen. */
.person-caps-run {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-k);
  color: var(--ink);
  line-height: 2.2;
}
/* HET TIKDOEL VAN EEN LABEL IS 25px, niet de 15px van de tekst zelf. Gemeten
   vóór deze regel: de aanklikbare labels waren 15px hoog. §8 stelt 44px voor
   KNOPPEN, en dit zijn inline links in een tekstblok, waarvoor die eis niet
   geldt; WCAG 2.5.8 vraagt daar 24px en dat is de maat die hier gehaald moet
   worden. De verticale padding vergroot alleen het raakvlak: bij een inline
   element telt zij niet mee voor de regelhoogte, en line-height 2,2 (25,3px)
   houdt de raakvlakken van twee regels net uit elkaar. */
.person-caps-run a,
.person-more-list a { padding-block: 5px; }
/* EEN LABEL MET DIENSTREFERENTIE IS EEN LINK EN ZIET ER IN RUST IDENTIEK UIT
   (spec §5.2). Drie van Marisa's zes labels hebben geen referentie; een rail
   waarin de helft oplicht en de andere helft niet leest als een fout in de data.
   De aanwijzing komt bij hover en focus, net als bij .service-prose a. */
a.person-cap { color: inherit; text-decoration: none; }
a.person-cap:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* De uitgang naar de rest van het team, en tegelijk de inhoud die de rail van
   Anna Fox vult: zij is de enige zonder expertiselabels, en zonder deze lijst
   zou haar body eenkoloms zijn - precies de fout van ronde 3 (DESIGN.md §6b).
   Compacte doorlopende regel en geen rijenlijst: acht namen onder elkaar zouden
   de rail hoger maken dan de biografie ernaast, en dan meet de onderste band van
   de sectie de breedte van de rail in plaats van die van de tekst. */
/* De rail van een persoonspagina mag nooit hoger zijn dan de biografie ernaast
   (DESIGN.md §6b). Met .mono op 0,82rem (type-schaal 2026-08-29) werd hij dat
   wel bij de KORTSTE bio: Marisa Urbano, rail 474px tegen stroom 454px, gemeten
   op 1440x800 door toets 2 van check-about.mjs. Bij grotere tekst hoort relatief
   minder regelafstand, dus de winst komt daar en niet uit een kleinere maat:
   line-height 2,2 -> 2,0 (regel 28,8px -> 26,2px, nog steeds boven de 24px die
   WCAG 2.5.8 voor een inline link vraagt) en de marge boven het blok 40 -> 28px. */
.person-more { margin-top: clamp(24px, 2vw, 28px); }
.person-more-label { color: var(--grey-2); margin: 0 0 10px; }
.person-more-list { margin: 0; line-height: 2; }
.person-more-list a { color: var(--ink); text-decoration: none; }
.person-more-list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* --red-deep en niet --red: het accentrood haalt op paper 3,56:1 en dat is
   onder de 4,5:1 van §8. Op ink mag --red wel, en daar staat het scheidingsteken
   van het register ook. Zelfde correctie als .hub-num in ronde 3. */
.person-sep { color: var(--red-deep); margin: 0 5px; }

/* De biografie. Maten van .service-prose: 62ch is de leesbare regellengte die
   .statement-copy ook aanhoudt. De reset in styles.css zet list-style op none en
   haalt de onderstreping van links, dus opsommingen en links moeten hier terug. */
.person-prose { max-width: 62ch; }
.person-prose p { margin: 0 0 1.15em; line-height: 1.7; }
.person-prose p:last-child { margin-bottom: 0; }
.person-prose strong { font-weight: 700; }
.person-prose em { font-style: italic; }
.person-prose ul { margin: 0 0 1.15em; padding: 0; }
.person-prose li { position: relative; padding-left: 20px; margin-bottom: 0.5em; line-height: 1.7; }
.person-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}
/* Link-kleur erft de tekstkleur; het rood zit in de onderstreping. Een rode
   link op paper haalt 3,54:1 en dat is te weinig voor lopende tekst, terwijl de
   decoratiekleur niet aan die eis gebonden is. */
.person-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s var(--ease-out);
}
.person-prose a:hover { text-decoration-color: var(--ink); }

/* ================================================ ABOUT (BUREAU): SECTIE 3, EXPERTISE (ink)

   Zin 2 en 3 van SPOKE's tekst, in het .news-inner-raster (0,92fr / 2fr) dat de
   hele site voor een rail naast een stroom gebruikt. Op deze pagina staat die
   vorm precies EEN keer: de kop erboven is .statement-cols en de sectie eronder
   heeft een eigen tweekolomsvorm. */
.about-expertise {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 7vw, 88px) 0;
}
.about-expertise .kicker { color: var(--grey); }
.about-expertise-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* Contextuele verkleining, hetzelfde idioom als .about-careers .section-title en
   .service-mid .section-title: een kop van vier woorden op 89,6px wordt in een
   rail van ~333px vier regels kapitalen. Geen nieuwe token, een kleinere maat
   van dezelfde schaal. */
.about-expertise .section-title {
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  margin: 0;
  text-wrap: pretty;
}
.about-expertise-act { margin: clamp(24px, 2.6vw, 34px) 0 0; }
/* = .about-careers-copy: dezelfde leesmaat voor dezelfde soort tekst in dezelfde
   soort kolom. */
.about-expertise-flow {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--grey);
  line-height: 1.6;
}
.about-expertise-flow p { margin: 0 0 0.8em; }
.about-expertise-flow p:last-child { margin-bottom: 0; }

/* ================================================ ABOUT (BUREAU): SECTIE 4, PERTH EN LONDON (paper)

   Zin 7, 8 en 9. Dit is het enige deel van SPOKE's aanlevering dat nergens op de
   site stond, en de vorm zegt dat ook: kop over de volle breedte, het proza in
   TWEE kolommen, de twee kantoren als band, en als slot de zin die de pagina
   sluit op statement-maat.

   Twee kolommen proza kan hier omdat het twee losse alinea's van vergelijkbare
   lengte zijn. Bij één alinea wordt dit een krantenkolom die je van beneden naar
   boven moet teruglezen; dan hoort deze regel dus niet te blijven staan. */
.about-places {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 8vw, 96px) 0;
}
/* Kop links, de samenvattende zin rechts: de verhouding van .statement-cols, en
   dezelfde vorm als de kop van deze pagina. align-items: end zet de zin op de
   basislijn van de kop. */
.about-places-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.about-places-lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 42ch;
  text-wrap: pretty;
}
.about-places-title {
  /* De maat van .statement-title, maar NIET die klasse: script.js r.399 hangt de
     blur-reveal met autoAlpha 0 aan de eerste .statement-title op de pagina en
     dan zou deze kop verdwijnen zodra de ScrollTrigger niet vuurt. Zelfde reden
     als bij .about-story-title. */
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  margin: 0;
  text-wrap: pretty;
}
.about-places-cols {
  columns: 2;
  column-gap: clamp(30px, 6vw, 90px);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.62;
}
/* break-inside vermijdt dat één alinea over beide kolommen wordt gehakt: met
   twee alinea's en twee kolommen staat er dan precies één per kolom. */
.about-places-cols p {
  margin: 0;
  break-inside: avoid;
}
.about-places-cols p + p { margin-top: 0; }
/* De kantorenband. Geen adres en geen klok: die staan al op de homepage, op de
   contactpagina en in de careers-band (DESIGN.md §6d). Hier staat wat nergens
   anders staat, namelijk sinds wanneer een kantoor er is en wat het dekt. */
.about-places-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(38px, 4.4vw, 62px) 0 0;
  border-top: 1px solid var(--line-k);
}
.about-place { padding: 18px 0 0; }
.about-place-city {
  font-stretch: 63%;
  font-weight: 840;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  line-height: 0.96;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  margin: 0 0 10px;
}
.about-place-since { color: var(--grey-2); margin: 0 0 8px; }
.about-place-reach {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 34ch;
}
@media (max-width: 1000px) {
  /* = styles.css r.1067: onder 1000px klappen alle twee-koloms varianten naar 1fr.
     .about-inner staat hier NIET bij: die is al eenkoloms en wordt pas boven
     1000px tweezonig, en dan alleen als er scripting is en de bezoeker beweging
     wil (zie de media-query bij de verrijking hierboven). */
  /* De HERO klapt hier NIET, en dat is gemeten: op één kolom wordt het 4:5-
     portret zo breed als de content, en dat is 1150px hoog op een venster van
     1000px - een bezoeker ziet dan alleen een portret en moet scrollen om te
     zien wie het is. Tweezonig blijft tot 640px werken: op 660px is de
     tekstkolom 247px en het portret 319x399, en "DERBYSHIRE" past op 41px nog
     ruim in die kolom. Extra breakpoints zijn expliciet toegestaan
     (DESIGN.md §6); de contactpagina doet hetzelfde met zijn beeldband. */
  .person-body-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  .person-caps, .person-flow { grid-column: 1; grid-row: auto; }
  .about-story-cols, .about-careers-grid, .about-expertise-grid {
    grid-template-columns: 1fr;
    gap: clamp(26px, 6vw, 40px);
  }
  /* Twee kolommen proza worden hier te smal om te lezen (op 900px is een kolom
     ~390px, dus ~38 tekens). Eén kolom, met de gebruikelijke alinea-afstand die
     de column-vorm niet nodig had. */
  .about-places-cols { columns: 1; }
  .about-places-cols p + p { margin-top: 1.05em; }
  .about-places-head { grid-template-columns: 1fr; align-items: start; gap: clamp(22px, 5vw, 34px); }
  .about-head { grid-template-columns: 1fr; align-items: start; gap: clamp(22px, 5vw, 34px); }
  /* De indexkolom vervalt: 46px van een smal scherm voor een cijfer dat de rij
     nummert en verder niets doet. De naam schuift naar links. */
  .about-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.4fr);
    grid-template-areas:
      "name role"
      "exp  exp";
  }
  .about-no { display: none; }
}

@media (max-width: 640px) {
  /* Naam en rol naast elkaar laat op 390px maar 208px over voor een kop die
     27px hoog is; "LUKE DERBYSHIRE" past daar niet in. Onder elkaar krijgt de
     naam de volle rijbreedte. Deze breedte zat tot ronde 4 in geen enkele
     poort: qa-full draaide 1536/1280/1024/390. */
  .about-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "role"
      "exp";
    gap: 8px 0;
  }
  .about-meta { justify-items: start; text-align: left; padding-top: 0; }
  .about-name { font-size: clamp(1.45rem, 7vw, 1.9rem); }

  /* Hier klapt de persoons-hero wel. Op 390px is het portret 350x437 en dat is
     een leesbare maat; de tekst staat erboven, dus de bezoeker ziet eerst wie
     dit is en scrolt daarna langs het gezicht naar de biografie. */
  .person-hero-grid { grid-template-columns: 1fr; }
  .person-id { align-self: auto; }
}

@media (max-width: 620px) {
  /* Twee kantoren naast elkaar worden hier afgebroken adressen; onder elkaar met
     een haarlijn ertussen is dan de leesbare vorm. De drie feiten staan sinds de
     herziening al gestapeld en hoeven hier niets. */
  .about-offices { grid-template-columns: 1fr; gap: 0; }
  .about-office { padding-bottom: 16px; border-bottom: 1px solid var(--line-w); }
  /* Dezelfde reden op de bureaupagina: twee kantoren naast elkaar worden hier
     afgebroken regels. De haarlijn is hier --line-k, want deze sectie is paper. */
  .about-places-list { grid-template-columns: 1fr; gap: 0; }
  .about-place { padding-bottom: 18px; border-bottom: 1px solid var(--line-k); }
}