/* ---------- lettertypes ----------
 * Zelf gehost: geen verzoek naar Google, dus geen IP van de bezoeker naar
 * een derde partij voor er toestemming is. Zie SECURITY.md par. 2 en 4.
 * Variabele fonts (wght 400-600) uit Google Fonts, licentie OFL 1.1.
 * Bijwerken: bestanden vervangen en de unicode-range hieronder gelijk houden.
 * -------------------------------------------------------------------- */
@font-face{
  font-family:'Faustina';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/faustina-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Faustina';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/faustina-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/faustina-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/faustina-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Het merkgroen, met donkere secties.

     --pine is het merkgroen: knoppen, koppen, links, het citaatblok, de
     voettekst, de fasenummers, het logo in drie pagina's plus favicon.svg en
     het pijltje van de keuzelijsten. Bordeaux is geprobeerd en op Kato's
     vraag teruggedraaid; zij wil het groen houden.

     --donker (warm taupe) is de tweede donkere kleur: de achtergrond van het
     WelkomThuis-blok bij "Ons verschil" en van de secties "Het traject" en
     "Over mij". Bewust een andere kleur dan het groen, zodat een donkere
     sectie en een groen vlak niet in elkaar overlopen.

     Wat NIET donker wordt: de blokken waar echt gelezen wordt. Bij staar en
     astigmatisme, allebei gewoon boven de zeventig, gaat lichte tekst op een
     donkere ondergrond uitlopen. De fasekaarten in "Het traject" houden
     daarom hun witte achtergrond. */
  --paper:#F5F2EC;
  --white:#FFFFFF;
  --haze:#EBE5D8;
  --pine:#2F4A3C;
  --pine-deep:#22382D;
  --ink:#211E19;
  /* --muted is de kleur van bijna elke alinea (.card p, .audience p, .prose p,
     .band-head p). Op #5A6960 haalde die 5,24:1 tegen 7:1 uit README.md — de
     eis die er voor deze doelgroep het meest toe doet. Nu 8,38:1 op --paper,
     9,36:1 op wit en 7,46:1 op --haze; die laatste is de krapste en bepaalt
     dus hoe donker deze kleur minstens moet zijn. */
  --muted:#4B463D;
  /* Messing in twee sterktes. Eén waarde kan niet tegelijk 3:1 halen op een
     lichte ondergrond en 4,5:1 op het donkergroene blok; --brass-licht is er
     voor tekst en iconen óp pine (.card--accent). */
  --brass:#9A7430;
  --brass-licht:#E0BC76;
  /* --line is de decoratieve haarlijn, --rand de omtrek van een invulveld of
     knop. WCAG 1.4.11 vraagt 3:1 voor die laatste; op #CBD4C9 was dat 1,37:1,
     waardoor je op een klein scherm nauwelijks zag waar een veld begon. */
  --line:#B8AF9A;
  --rand:#8E8674;
  /* De donkere achtergrond van het WelkomThuis-blok. Warm taupe; ruil deze
     regel om voor een van de andere voorstellen: warm charcoal #222528,
     deep terracotta #4A2E2B, dark sage #2A342B. Alle vier gemeten: wit haalt
     er 12,2:1 tot 15,4:1 op en oker 5,3:1 tot 6,7:1, dus de keuze is puur
     smaak en kost geen leesbaarheid. */
  --donker:#2D2624;

  --display:"Faustina",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gap:clamp(4.5rem,9vw,8rem);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:7rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.25rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* Nederlandse samenstellingen worden lang — "binnenhuisarchitect" is 331px
   breed in een kolom van 265px — en een woord dat niet past duwt niet alleen
   zichzelf, maar de hele pagina breder dan het scherm.

   Let op waar het afbreken vandaan komt: hyphens:auto doet voor Nederlands
   in Chromium NIETS. Die browser heeft geen Nederlands afbreekpatroon, dus
   lang="nl-BE" met hyphens:auto gedraagt zich daar exact als hyphens:none
   (nagemeten: hetzelfde overlopen, terwijl lang="en" wel afbreekt). Al het
   afbreken kwam dus van overflow-wrap, en dat knipt op een willekeurige
   letter: "binnenhuisarchitec / t". Precies wat Kato opmerkte.

   Daarom staan de afbreekpunten nu met de hand in de opmaak, als ­ op de
   naad van de samenstelling: binnenhuis­architect, verhuis­firma. Een
   browser kiest zo'n zacht streepje boven een willekeurige breuk, dus die
   lelijke knip komt niet meer voor. hyphens:auto blijft staan omdat Firefox
   het Nederlandse patroon wél meelevert; overflow-wrap blijft als laatste
   vangnet voor een lang woord zonder ­.

   Op de koppen staat overflow-wrap er juist NIET, en dat is het punt: het
   maakt een breekpunt van elke letter, en de regelvuller neemt dan de langste
   reeks die past. "binnenhuisa" past net iets beter dan "binnenhuis-" met het
   streepje erbij, dus het vangnet overrulede het nette breekpunt en knipte
   "binnenhuis{shy}a / rchitect". Zonder overflow-wrap is ­ de enige
   breekkans binnen het woord en valt de knip waar hij hoort.

   Gevolg voor wie hier later een kop wijzigt: een nieuwe samenstelling van
   meer dan een twaalftal letters heeft zelf een ­ nodig, anders kan hij
   de pagina breder maken dan het scherm. Zie README.md. */
h1,h2,h3{font-family:var(--display);color:var(--pine-deep);line-height:1.15;margin:0;font-weight:600;hyphens:auto}
/* Afbreken alleen waar het moet. Vanaf 48rem is er ruimte genoeg en hoeft er
   geen streepje in een grote kop te staan; hyphens:none laat de browser de
   ­ daar volledig negeren. Onder 48rem is het wel nodig, en dan valt de
   knip op de naad van de samenstelling. Zo staat er nooit een streepje in een
   kop die ook heel had gekund -- en dat was de klacht. */
@media (min-width:48rem){
  h1,h2,h3{hyphens:none}
}
h1{font-size:clamp(2.7rem,6vw,4.5rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.005em}
h3{font-size:clamp(1.4rem,2.2vw,1.7rem)}
p{margin:0 0 1.25rem}
p:last-child{margin-bottom:0}

a{color:var(--pine);text-underline-offset:.25em;text-decoration-thickness:1.5px}
a:hover{color:var(--pine-deep)}

:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.eyebrow{
  font-size:.9rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pine);margin:0 0 1rem;display:block;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--pine);color:#fff;
  padding:1rem 1.5rem;z-index:100;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(242,244,240,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;padding-block:1rem;
}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.brand svg{width:44px;height:44px;flex:none}
.brand-name{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--pine-deep);line-height:1.1;display:block;overflow-wrap:break-word}
.brand-sub{display:block;font-family:var(--body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}

.site-nav ul{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.site-nav a{
  display:block;padding:.75rem 1.05rem;font-size:1.1rem;font-weight:500;
  text-decoration:none;color:var(--ink);
}
.site-nav a:hover{background:var(--haze);color:var(--pine-deep)}

/* burgerknop — alleen zichtbaar op smalle schermen */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:56px;height:56px;flex:none;padding:0;cursor:pointer;
  background:var(--white);border:2px solid var(--rand);border-radius:3px;
  transition:background .18s ease,border-color .18s ease;
}
.nav-toggle:hover{border-color:var(--pine);background:var(--haze)}
.nav-toggle__bars{display:grid;gap:5px;width:26px}
.nav-toggle__bars span{
  display:block;height:3px;border-radius:2px;background:var(--pine);
  transition:transform .22s ease,opacity .18s ease;
}
.nav-toggle[aria-expanded="true"]{background:var(--pine);border-color:var(--pine)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span{background:#fff}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:60px;padding:.9rem 1.9rem;font-family:var(--body);font-size:1.15rem;
  font-weight:600;text-decoration:none;border:2px solid var(--pine);border-radius:3px;
  cursor:pointer;transition:background .18s ease,color .18s ease;
}
.btn-primary{background:var(--pine);color:#fff}
.btn-primary:hover{background:var(--pine-deep);border-color:var(--pine-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--pine)}
.btn-ghost:hover{background:var(--haze);color:var(--pine-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}

/* ---------- hero ---------- */
/* Eén gecentreerde kolom. Hier stond een plattegrond naast; zonder die tweede
   kolom leest een halfleeg raster als een fout in plaats van als witruimte. */
.hero{padding-block:clamp(3.5rem,9vw,7rem) var(--gap);text-align:center}
.hero-inner{display:flex;flex-direction:column;align-items:center}
/* max-width in em, dus de regellengte schaalt mee met de kop zelf */
.hero h1{max-width:13em;margin-bottom:1.5rem;text-wrap:balance}
.hero-lead{font-size:clamp(1.28rem,1.9vw,1.45rem);max-width:56ch}
.hero .btn-row{justify-content:center}
.hero-note{margin-top:1.75rem;font-size:1.05rem;color:var(--muted)}

/* ---------- bands ---------- */
.band{padding-block:var(--gap)}
.band-white{background:var(--white);border-block:1px solid var(--line)}


/* 52ch was te smal: de kop viel uiteen in vier regels met "dan een" als
   losse regel, terwijl er rechts nog de helft van de pagina vrij was. Niet
   helemaal tot de rand — een leesregel van 90 tekens leest slecht — maar wel
   ruimer. De alinea blijft daarbinnen apart begrensd. */
.band-head{max-width:68ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.band-head p{color:var(--muted);margin-top:1rem;font-size:1.2rem;max-width:62ch}

/* ---------- services ---------- */
/* auto-fit in plaats van een harde sprong van drie naar één: op een tablet
   is er ruimte voor twee, en die tussenstap scheelde een half scherm scrollen */
/* minmax(min(Xrem,100%),1fr) en niet minmax(Xrem,1fr): een track kan nooit
   smaller worden dan zijn minimum, dus op een smal scherm loopt zo'n raster
   buiten zijn container. De min() laat de kolom wel meekrimpen. */
/* [architect] + [verhuisfirma] -> [WelkomThuis]. De tekens zijn getekend,
   niet getypt: de pijl U+2192 zit niet in de subset van het zelfgehoste
   lettertype (U+2191 en U+2193 wel, U+2192 niet), dus een echt pijltje zou
   terugvallen op een systeemfont of als leeg blokje verschijnen.

   Ze staan op aria-hidden. De verhouding staat ook in woorden -- de inleiding
   erboven en "De twee hierboven samen" in het derde blok -- dus wie voorleest
   mist niets, en losse leestekens voorlezen levert alleen ruis op. */
.cards{display:grid;grid-template-columns:1fr;gap:1.5rem}
.cards__link{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;color:var(--pine);
}
.cards__link svg{width:2rem;height:2rem;display:block}
@media (min-width:62rem){
  /* minmax(0,1fr) en niet 1fr: anders kan een kaart niet krimpen onder de
     breedte van zijn inhoud en loopt de rij buiten het scherm. */
  .cards{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:1.25rem}
}
@media (max-width:61.99rem){
  /* gestapeld wijst de pijl naar beneden, niet naar rechts */
  .cards__link--pijl svg{transform:rotate(90deg)}
}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:2.25rem 2rem;display:flex;flex-direction:column;gap:1rem;
}
.card svg{width:46px;height:46px;color:var(--pine)}
.card p{font-size:1.15rem;color:var(--muted)}

/* ---------- about ---------- */
/* Kolom 1 is precies zo breed als de foto. Met .85fr bleef er naast de foto
   een strook over die op een fout leek in plaats van op witruimte. */
.about-grid{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.about-body p{color:var(--muted)}
.about-body p:first-of-type{margin-top:1.5rem}

/* het kader blijft bescheiden naast de tekstkolom; de foto zelf is ruim scherp genoeg */
.portrait{
  aspect-ratio:4/5;max-width:340px;overflow:hidden;
  background:var(--haze);border:1px solid var(--line);border-radius:4px;
}
/* De foto is liggend (477x358), het kader staand (4:5). Bij object-fit:cover
   wordt de volle hoogte gebruikt en de breedte bijgesneden, dus alleen de
   horizontale positie doet iets: 45% houdt het gezicht in het midden. */
.portrait img{width:100%;height:100%;object-fit:cover;object-position:45% center;display:block}

/* ---------- quote ---------- */
.quote{background:var(--pine);padding-block:clamp(4rem,7vw,6rem)}
.quote blockquote{
  margin:0;font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.3;max-width:24ch;font-style:italic;font-weight:400;color:#fff;
}
.quote cite{
  display:block;margin-top:2rem;font-family:var(--body);font-style:normal;
  font-size:1.02rem;letter-spacing:.1em;text-transform:uppercase;color:#E7DDD3;
}

/* ---------- contact ---------- */
/* De kop en de bereikbaarheid staan bóven het formulier, niet ernaast. Het
   formulier krijgt daardoor de volle breedte en kan in twee kolommen, wat de
   sectie een stuk korter maakt dan één smalle kolom van veertien velden. */
.contact-intro{margin-top:1.25rem;color:var(--muted)}
.contact-list{margin:0;padding:0;display:grid;gap:1.5rem}
.contact-list dt{font-size:.88rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-list dd{margin:.25rem 0 0}
/* min 1.15rem: 'welkomthuis@outlook.be' is 22 tekens en liep op 320px
   buiten de kaart op 1.5rem */
.c-value{font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.9rem);overflow-wrap:anywhere;color:var(--pine-deep);display:block;line-height:1.25}
/* Het telefoonnummer is de belangrijkste knop van de site. Op 1,5rem zou het
   raakvlak maar 30px hoog worden; 48px is wat we aanhouden voor een onvaste
   hand. Zie README, "48 x 48 px touch targets". */
a.c-value{text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
a.c-value:hover{text-decoration:underline}

.form{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:clamp(1.75rem,3vw,2.5rem)}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:1.05rem;font-weight:600;margin-bottom:.5rem;color:var(--ink)}
.optional{font-weight:400;color:var(--muted)}
/* Nooit alleen een sterretje: dat zegt niets als je het niet kent. */
.verplicht{font-weight:400;color:var(--pine)}
/* Foutmelding vlak bij het veld waar ze over gaat. */
.veldfout{
  display:block;margin:.4rem 0 0;font-size:1rem;font-weight:600;color:#8C3A2A;
}
.field input:invalid.is-gemeld,.field select:invalid.is-gemeld,
.field textarea:invalid.is-gemeld{border-color:#8C3A2A}
.field input,.field textarea{
  width:100%;font-family:var(--body);font-size:1.15rem;color:var(--ink);
  padding:.95rem 1rem;min-height:58px;background:var(--paper);
  border:2px solid var(--rand);border-radius:3px;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:var(--pine);background:#fff}
/* ---------- vragen in het contactformulier ---------- */
.form-intro{margin:0 0 2rem;font-size:1.08rem;color:var(--muted)}
/* min-width:0 houdt een fieldset binnen zijn kolom; zonder dat neemt hij
   de breedte van zijn breedste kind aan en loopt het formulier uit */
.q{margin:0 0 2.25rem;padding:0;border:0;min-width:0}
.q>legend{padding:0;margin-bottom:.85rem;font-size:1.05rem;font-weight:600;color:var(--ink)}
.q-hint{margin:-.25rem 0 .75rem;font-size:1rem;color:var(--muted)}
.q .field:last-child{margin-bottom:0}

/* Keuzelijsten. Zelfde maat en rand als de tekstvelden, zodat het formulier
   één ding blijft. 58px hoog: ruim boven de 48px die we als minimum
   aanhouden, ook voor wie met een onvaste hand tikt.
   Het eigen pijltje is een data-URI in deze stylesheet; CSP staat dat toe
   via img-src 'self' data:. Zie SECURITY.md par. 2. */
.field select,
.calc__sub select{
  width:100%;font-family:var(--body);font-size:1.15rem;color:var(--ink);
  padding:.95rem 3.25rem .95rem 1rem;min-height:58px;line-height:1.4;
  background-color:var(--paper);
  border:2px solid var(--rand);border-radius:3px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%3E%3Cpath%20d='M1%201l8%209%208-9'%20fill='none'%20stroke='%232F4A3C'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.1rem center;
  background-size:18px 12px;
}
.field select:hover{border-color:var(--pine)}
.field select:focus{border-color:var(--pine);background-color:#fff}
/* In hoog contrast tekent Windows onze achtergrondafbeelding niet, en dan
   staat er een keuzelijst zonder pijltje. Daar geven we het besturingssysteem
   zijn eigen weergave terug. */
@media (forced-colors: active){
  .field select,
  .calc__sub select{appearance:auto;-webkit-appearance:auto;background-image:none;padding-right:1rem}
}

/* Alleen zichtbaar als het versturen mislukt is. Rood is hier niet nodig:
   de melding staat vlak boven de knop en zegt zelf wat er aan de hand is
   (zie README, "nooit kleur alleen"). */
.form-error{
  display:none;margin:2rem 0 0;padding:1.25rem 1.5rem;
  background:var(--haze);border-left:4px solid var(--brass);border-radius:3px;
  color:var(--ink);font-size:1.08rem;
}
.is-failed .form-error{display:block}

.form-submit{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line);
}
/* flex:none betekent ook niet krimpen; met een vast minimum van 15rem
   stak de knop op 320px buiten de kaart. min() laat hem meekrimpen. */
.form-submit .btn{flex:none;min-width:min(15rem,100%)}
.form-submit .form-note{margin:0;flex:1 1 20rem}

/* [hidden] is de standaard, maar een display-regel elders wint daar zo van;
   deze regel houdt verborgen ook echt verborgen. */
[hidden]{display:none}

.form-note{font-size:1rem;color:var(--muted);margin-top:1.25rem}
/* Honeypot: uit beeld, maar niet display:none — dat slaan veel bots over.
   Buiten de leesvolgorde en niet focusbaar, dus onzichtbaar voor wie het
   toetsenbord of een schermlezer gebruikt. Zie SECURITY.md par. 3. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-done{display:none;background:var(--haze);border:2px solid var(--pine);border-radius:3px;padding:2rem;text-align:center}
.form-done p{color:var(--muted);margin-top:.5rem}
.is-sent .form-fields{display:none}
.is-sent .form-done{display:block}

/* ---------- juridische pagina's ---------- */
.legal{max-width:68ch}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1.5rem}
.legal h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-top:3rem;margin-bottom:.9rem}
.legal p{color:var(--muted)}
.legal-lead{font-size:clamp(1.28rem,1.9vw,1.4rem);color:var(--ink)}
.legal-list{margin:0 0 1.25rem;padding-left:1.4rem;color:var(--muted)}
.legal-list li{margin-bottom:.6rem}
.legal-dl{margin:0 0 1.25rem;display:grid;gap:1.1rem}
.legal-dl dt{font-weight:600;color:var(--pine-deep)}
.legal-dl dd{margin:.2rem 0 0;color:var(--muted)}
.legal-address{font-style:normal;line-height:1.7}
/* Een webadres is één woord zonder breekpunt. "www.gegevensbeschermingsautoriteit.be"
   is 357px breed in een kolom van 265px, en duwde op een telefoon van 320px de
   hele privacypagina 72px breder dan het scherm. Adressen en e-mails in de
   juridische tekst mogen daarom overal afbreken. */
.legal a{overflow-wrap:anywhere}
.legal-date{font-size:1rem;font-style:italic}
.legal-back{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}

/* ---------- prijscalculator ---------- */
.calc{
  padding:clamp(1.5rem,3.5vw,2.5rem);
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
}

/* Elke fase krijgt een streep boven zijn titel, en overal dezelfde ruimte
   eronder, zodat de witruimte optisch bij de vólgende titel hoort.

   Hier stond eerst een uitzondering op :first-of-type, en die matchte twee
   elementen in plaats van één: fase 1 is een <div> en fase 2 de eerste
   <fieldset>, dus "eerste van zijn soort" gold voor beide. Ze verloren allebei
   hun streep én hun ruimte erboven, waardoor de titel van fase 2 tegen de
   inhoud van fase 1 plakte. Dat waren de twee klachten van Kato.

   :first-child raakt wél alleen fase 1. Die houdt geen eigen streep: de
   bovenrand van het kader staat er al, op nagenoeg dezelfde afstand van de
   titel (2,5rem kaderpadding tegen 2,25rem hier), en een tweede lijn een
   centimeter daaronder leest als een fout. */
.calc__fase{margin:1.75rem 0 0;padding:2.25rem 0 0;border:0;border-top:1px solid var(--line);min-width:0}
.calc__fase:first-child{margin-top:0;border-top:0;padding-top:0}
/* Een <legend> wordt door de browser ÓP de bovenrand van de fieldset gezet:
   de streep loopt dan door de titel heen en verder naar rechts, op halve
   texthoogte. Dat is precies wat Kato beschreef als "de scheiding staat na
   de titel in plaats van ervoor" - de lijn stond niet boven de titel maar
   ernaast. float + volle breedte haalt de legend uit die rol, zodat hij
   gewoon als blok onder de streep valt. */
.calc__fase>legend{float:left;width:100%}
.calc__fase>legend,.calc__kop h3{
  padding:0;margin:0 0 .7rem;font-family:var(--display);
  font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--pine-deep);
}
.calc__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem}
.calc__vast{
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--haze);color:var(--pine-deep);padding:.2rem .5rem;border-radius:3px;
  margin-bottom:.6rem;
}
.calc__uitleg{margin:0 0 .8rem;font-size:1.02rem;color:var(--muted)}
.calc__basis{
  margin:0;padding:.75rem 1rem;background:var(--white);
  border:1px solid var(--line);border-radius:3px;font-size:1.05rem;
}
.calc__basis strong{color:var(--pine-deep)}

/* Een rij is helemaal aanklikbaar, niet alleen het vakje. */
.calc__optie{
  display:flex;align-items:center;gap:.85rem;
  min-height:56px;padding:.7rem .9rem;margin-bottom:.5rem;
  background:var(--white);border:2px solid var(--rand);border-radius:3px;
  cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.calc__optie:last-child{margin-bottom:0}
.calc__optie:hover{border-color:var(--pine)}
.calc__optie input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--pine)}
.calc__naam{flex:1 1 auto;font-size:1.05rem;line-height:1.35}
.calc__prijs{
  flex:none;font-weight:600;color:var(--pine-deep);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* het vinkje toont de keuze al; de rand is extra nadruk, nooit de enige */
.calc__optie:has(input:checked){border-color:var(--pine);background:var(--haze)}
.calc__optie:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:3px}
.calc__optie--sub{margin-left:1.75rem}

.calc__sub{margin:0 0 .5rem;padding:.9rem 1rem;background:var(--white);
  border:1px solid var(--line);border-radius:3px}
.calc__sub label{display:block;font-size:1rem;color:var(--muted);margin-bottom:.5rem}

/* uitkomst */
.calc__uitkomst{
  margin-top:1.75rem;padding:clamp(1.25rem,2.5vw,1.75rem);
  background:var(--pine);color:#fff;border-radius:4px;
}
.calc__totaal-label{
  margin:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#E7DDD3;
}
/* min 1.5rem: op 320px liep 'EUR 2.150 - EUR 2.400' anders buiten de kaart */
.calc__totaal{
  margin:.2rem 0 0;font-family:var(--display);font-size:clamp(1.5rem,4.4vw,2.6rem);
  font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;
}
/* een bedrag breekt nooit in zichzelf; tussen de twee bedragen mag het wel */
.calc__bedrag{white-space:nowrap}
.calc__open{display:block;font-family:var(--body);font-size:.95rem;font-weight:500;color:#E7DDD3;margin-top:.35rem}
/* 'Nog te berekenen' is tekst, geen bedrag: kleiner en rustiger */
.calc__totaal.is-leeg{font-size:clamp(1.35rem,3vw,1.7rem);color:#EAE3DC}
.calc__verdeling{
  margin-top:1.5rem;padding-top:1.35rem;
  border-top:1px solid rgba(195,211,198,.3);
}
.calc__verdeling h4{
  margin:0 0 .6rem;font-family:var(--body);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.calc__verdeling ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.calc__verdeling li{position:relative;padding-left:1.3rem;font-size:1rem;color:#EAE3DC;line-height:1.4}
.calc__verdeling li::before{
  content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.25rem;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(-45deg);
}
/* Zelfde kleur als een gewone regel: 'nog niets gekozen' onderscheidt zich
   door cursief, niet door kleur. De eerdere lichtere tint haalde 4,53:1 op
   --pine, onder de 7:1 voor kleine tekst -- onopgemerkt omdat de controles
   maten voordat site.js deze regel tekende. */
.calc__verdeling li.is-leeg{padding-left:0;color:#EAE3DC;font-style:italic}
.calc__verdeling li.is-leeg::before{display:none}
.calc__hint{
  margin:.6rem 0 0;font-size:1.02rem;color:#EAE3DC;line-height:1.5;max-width:46ch;
}
.calc__hint a{color:#fff;text-underline-offset:.2em}
.calc__uitkomst.is-berekend .calc__hint{display:none}
.calc__voetnoot{margin:1.35rem 0 0;font-size:.98rem;color:#E7DDD3;line-height:1.55}

@media (max-width:560px){
  .calc__optie{flex-wrap:wrap}
  .calc__prijs{width:100%;padding-left:calc(24px + .85rem)}
}

/* ---------- stap 2: gesprek inplannen ---------- */
/* Twee kaarten onder elkaar, nooit naast elkaar: rekenen en contact opnemen
   zijn losse beslissingen, en naast elkaar vragen ze allebei tegelijk om
   aandacht. */
/* Een formulier op volle wrapbreedte geeft invoervelden van een meter breed.
   48rem is de leesbare maat: lang genoeg voor een e-mailadres, kort genoeg om
   in één oogopslag te overzien. */
.afspraak{
  max-width:55rem;
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.afspraak__velden{display:block}

.wanneer{margin:0 0 1.5rem;padding:0;border:0;min-width:0}
.wanneer>legend{
  padding:0;margin-bottom:.75rem;font-family:var(--body);
  font-size:1.05rem;font-weight:600;color:var(--ink);
}
/* twee smalle velden naast elkaar; dat blijft één vraag, geen twee */
.wanneer__paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:0 1.25rem}
.wanneer__paar .field:last-child{margin-bottom:1.5rem}

/* ---------- ingeklapte intakevragen ---------- */
/* <details> is native: werkt zonder JavaScript, en de velden erin worden
   ook meeverstuurd als het blok dicht staat. */
.meer{margin:.5rem 0 1.75rem;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.meer>summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  min-height:56px;padding:.85rem 1.15rem;cursor:pointer;
  font-size:1.08rem;font-weight:600;color:var(--pine-deep);
  list-style:none;
}
.meer>summary::-webkit-details-marker{display:none}
.meer>summary::before{
  content:"";flex:none;width:.6rem;height:.6rem;margin-right:.15rem;
  border-right:2.5px solid var(--pine);border-bottom:2.5px solid var(--pine);
  transform:rotate(-45deg);transition:transform .18s ease;
}
.meer[open]>summary::before{transform:rotate(45deg)}
.meer>summary:hover{background:var(--haze)}
.meer>summary:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.meer__verplicht{
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--haze);color:var(--pine-deep);padding:.2rem .5rem;border-radius:3px;
}
.meer__inhoud{padding:.25rem 1.15rem 1.35rem;border-top:1px solid var(--line)}
.meer__intro{margin:1rem 0 1.5rem;font-size:1.02rem;color:var(--muted);max-width:60ch}

/* twee kolommen voor de korte vragen; minmax houdt de langste keuze leesbaar */
/* hoogstens twee kolommen: bij drie wordt het een raster om doorheen te
   zoeken in plaats van een lijst om door te lopen */
.q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:0 1.5rem}
/* De ene vraag past op één regel, de andere op twee. Zonder dit staan de
   keuzelijsten in een rij op verschillende hoogtes en oogt het rommelig. */
.q-grid .field{display:flex;flex-direction:column}
.q-grid .field>select{margin-top:auto}
.field-extra{margin-top:-.5rem}
.field-extra label{font-weight:400;color:var(--muted)}
.field-hint{margin:-.9rem 0 1.5rem;font-size:.98rem;color:var(--pine);font-style:italic}

/* Stap 2 staat gecentreerd. Het is de afsluiting van de pagina, en een smal
   formulier tegen de linkerrand met een lege rechterhelft oogt onaf. De
   velden binnen de kaart blijven links uitgelijnd: gecentreerde labels en
   invoervelden zijn niet te scannen. */
.band--midden .band-head{margin-inline:auto;text-align:center}
.band--midden .afspraak{margin-inline:auto}

/* ---------- direct contact onder stap 2 ---------- */
/* Drie gelijke kolommen in plaats van een flexrij. Met flex-wrap paste
   Instagram er niet meer bij en viel het als enige op een tweede regel, los
   uitgelijnd van de twee erboven. Als rooster staan de drie naast elkaar en
   zakken ze samen naar één kolom als het scherm te smal wordt. */
.direct{
  max-width:68rem;margin:1.5rem auto 0;padding:1.35rem clamp(1.25rem,3vw,2rem);
  background:var(--haze);border:1px solid var(--line);border-radius:4px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  gap:1.25rem 2rem;
}
.direct>div{text-align:center}
/* Het icoon staat op aria-hidden: de <dt> zegt al "Instagram", dus een
   schermlezer zou het anders dubbel voorlezen. */
/* Kleiner dan de losse .c-value elders: in drie kolommen naast elkaar brak
   "welkomthuis@outlook.be" anders middenin af op de overflow-wrap die als
   vangnet op .c-value staat. */
.direct .c-value{font-size:clamp(1.1rem,2vw,1.6rem)}
.c-value--ig{display:inline-flex;align-items:center;gap:.5rem}
.ig-icoon{width:1em;height:1em;flex:none}
.direct dt{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.direct dd{margin:.15rem 0 0}

/* ---------- footer ---------- */
.site-foot{background:var(--pine-deep);color:#E7DDD3;padding-block:3rem;font-size:1.05rem}
.foot-inner{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:center;justify-content:space-between}
.site-foot a{color:#fff}
.site-foot .brand-name{color:#fff;font-size:1.35rem}
.site-foot .brand-sub{color:#CEC3B9}
.foot-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot-nav a{display:inline-flex;align-items:center;min-height:48px}
/* De ondernemingsgegevens stonden als zes regels onder elkaar in één smalle
   kolom links, met de hele rechterhelft leeg. Nu verdeeld over kolommen: zes
   items gaan gelijk op in twee of drie, dus er blijft geen halve rij over. */
.foot-legal{
  margin-top:2rem;padding-top:1.75rem;border-top:1px solid rgba(195,211,198,.28);
  display:grid;grid-template-columns:1fr;gap:.5rem 2.5rem;
  font-style:normal;font-size:1rem;line-height:1.6;
}
@media (min-width:40rem){.foot-legal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.foot-legal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot-note{margin:1.5rem 0 0;font-size:.95rem;color:#CEC3B9}
.foot-note code{font-size:.95em}

/* ---------- vergelijking: wat WelkomThuis anders maakt ---------- */
/* Dit blok is het antwoord op de twee ernaast, dus mag het er duidelijk
   uitspringen: volvlak pine in plaats van een lichte tint. */
/* Kato's vraag: dit blok een donkere achtergrond in plaats van groen. Het
   moet nog steeds het opvallendste van de drie zijn -- dat was de vraag uit
   de vorige ronde -- en donker tussen twee lichte kaarten doet dat. */
.card--accent{background:var(--donker);border-color:var(--donker);color:#fff}
.card--accent h3{color:#fff}
.card--accent p{color:#EAE3DC}
.card--accent svg{color:var(--brass-licht)}
.card__tag{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.card--accent .card__tag{color:var(--brass-licht)}
/* de tag hoort bij de kop eronder, dus die twee staan dichter bij elkaar */
.card__tag+h3{margin-top:-.55rem}

.prose{max-width:62ch}
.prose p{color:var(--muted);font-size:1.15rem}
.prose+.prose{margin-top:1.25rem}

/* ---------- traject: drie fases ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1.5rem;align-items:start}
.phase{
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:2rem 1.85rem 2.25rem;height:100%;
}
.band-white .phase{background:var(--paper)}
.phase__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:1.1rem;
  background:var(--pine);color:#fff;font-family:var(--display);
  font-size:1.35rem;font-weight:600;
}
.phase h3{margin-bottom:.4rem}
.phase__when{
  display:block;font-size:.85rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.35rem;
}
.phase__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.phase__list li{position:relative;padding-left:1.9rem;font-size:1.08rem;line-height:1.45;color:var(--ink)}
.phase__list li::before{
  content:"";position:absolute;left:.2rem;top:.42em;width:.6rem;height:.32rem;
  border-left:2.5px solid var(--brass);border-bottom:2.5px solid var(--brass);
  border-radius:1px;transform:rotate(-45deg);
}
.phase__list .is-optional{color:var(--muted)}
.phase__foot{
  margin:1.6rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:1.05rem;color:var(--muted);
}

/* ---------- voor wie ---------- */
/* Eén kolom zolang er geen foto naast staat, twee zodra die er is. Hier stond
   een vaste 1.1fr .9fr, maar het kader in de rechterkolom is er op Kato's vraag
   uit gehaald; die 0.9fr bleef daarna leeg staan, en dát is de witruimte
   rechts van de tekst. auto-fit laat een kolom zonder inhoud verdwijnen. */
.audience{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:clamp(2rem,5vw,4rem);align-items:start;justify-items:center;
}
.audience>*{width:100%;max-width:44rem}
.audience p{max-width:38rem}

/* Illustratie naast "Voor wie". Met opzet een lijntekening en geen foto: een
   verzonnen woonkamerfoto zou lezen als een project van WelkomThuis, en dat
   is het niet. Dit is zichtbaar een tekening, in dezelfde stijl als de iconen
   bij "Ons verschil". Zodra er een echte foto is, vervangt die dit blok.

   De kleuren komen uit de tokens, dus de tekening gaat mee als het palet
   wijzigt. Geen style="" op de elementen: het CSP staat geen inline stijl toe.
   De tekening is decoratief en staat daarom op aria-hidden; hij voegt niets
   toe dat niet in de alinea's ernaast staat. */
.audience__ill{max-width:30rem;align-self:center}
.audience__ill svg{display:block;width:100%;height:auto}
.ill-lijn{fill:none;stroke:var(--pine);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ill-lijn--dun{stroke-width:1.8}
/* na .ill-lijn, zodat de vulling het van fill:none overneemt */
.ill-wit{fill:var(--white)}
.ill-vlak{fill:var(--haze)}
.ill-warm{fill:var(--brass-licht)}
.audience p{color:var(--muted)}
.questions{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:4px;padding:clamp(1.6rem,3vw,2.25rem);
}
.band .questions{background:var(--white)}
.questions p{
  margin:0 0 1rem;font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.3rem);
  color:var(--pine-deep);line-height:1.35;
}
.questions ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.questions li{
  position:relative;padding-left:1.6rem;font-size:1.1rem;line-height:1.45;color:var(--ink);
}
.questions li::before{
  content:"?";position:absolute;left:0;top:0;font-family:var(--display);
  font-weight:600;color:var(--brass);
}
.questions__note{
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);
  font-family:var(--body);font-size:1.08rem;color:var(--muted);
}

/* ---------- op maat / budget ---------- */
.tailor{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:clamp(2rem,4vw,3.25rem);max-width:74ch;
  box-shadow:0 1px 2px rgba(28,38,32,.05),0 18px 34px -24px rgba(28,38,32,.28);
}
.band-white .tailor{background:var(--paper)}
.tailor h2{margin-bottom:1.25rem}
.tailor p{color:var(--muted)}
.tailor strong{color:var(--pine-deep);font-weight:600}

/* ---------- oorsprong / verhaal ---------- */
/* Eén kolom op leesbreedte. Dit stond in twee kolommen met alleen de kop
   links, wat als een gat las; en de regels liepen door tot ver voorbij de
   60 tekens die je op 20px nog comfortabel volgt. */
.origin{
  /* max-width:60ch; */
  margin-top:clamp(3.5rem,7vw,5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line);
}
.origin h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:1.5rem}
.origin p{color:var(--muted)}

/* haalt één zin uit de lopende tekst, zodat het verhaal niet één blok wordt */
.origin .origin-pull{
  margin:2rem 0;padding:.4rem 0 .4rem 1.75rem;border-left:4px solid var(--brass);
  font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.5rem);
  line-height:1.4;color:var(--pine-deep);
}

@media (max-width:960px){
  .audience{grid-template-columns:1fr}
}
.prose-after{margin-top:clamp(2.5rem,5vw,3.5rem)}

/* ---------- load animation ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:1.18rem}
  .head-inner{justify-content:center;text-align:center}
  .site-nav ul{justify-content:center}
  .btn{width:100%}
}
/* vanaf hier klapt het menu achter de burgerknop (425px, 320px, …) */
/* Zes menu-items passen pas naast het merk vanaf ongeveer 1000px. Daaronder
   klapt het menu achter de knop, anders wordt de plakkende kopbalk twee
   regels hoog en eet die het halve scherm op een tablet. */
@media (max-width:1000px){
  /* merk en knop blijven op één regel; het menu valt eronder uit */
  .head-inner{
    flex-wrap:nowrap;justify-content:space-between;text-align:left;
    gap:.75rem;padding-block:.85rem;
  }
  .brand{min-width:0}
  .nav-toggle{display:inline-flex}

  /* dichtgeklapt is de hoogte 0; open groeit hij naar zijn eigen hoogte */
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .25s ease;
  }
  .site-nav.is-open{grid-template-rows:1fr}
  .site-nav>ul{
    display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;
    overflow:hidden;min-height:0;padding-inline:clamp(1.25rem,5vw,3rem);
    visibility:hidden;transition:visibility 0s .25s;
  }
  .site-nav.is-open>ul{visibility:visible;transition:visibility 0s 0s}
  .site-nav li{border-top:1px solid var(--line)}
  .site-nav li:first-child{border-top:0}
  .site-nav a{display:flex;align-items:center;min-height:56px;padding:.9rem .5rem;font-size:1.15rem}
}
@media (max-width:480px){
  .brand svg{width:38px;height:38px}
  .brand-name{font-size:1.35rem}
  .brand-sub{font-size:.7rem;letter-spacing:.12em}
}
@media (max-width:360px){
  /* op de smalste schermen wijkt de ondertitel, zodat de knop naast het merk past */
  .brand-sub{display:none}
}
/* staat na de mediaquery hierboven, anders wint die van deze regels */
@media (prefers-reduced-motion:reduce){
  .nav-toggle,.nav-toggle__bars span,.site-nav{transition:none}
  .site-nav>ul,.site-nav.is-open>ul{transition:none}
}

/* ---------- donkere sectie ---------- */
/* Staat met opzet achteraan. .band--donker p en .about-body p hebben dezelfde
   soortelijkheid, dus wie het laatst staat wint. Stond dit blok bovenaan bij
   .band-white, dan hield .about-body p{color:var(--muted)} het -- donkergrijs
   op donker taupe, ruim onleesbaar. Precies dat ging hier eerst mis.

   Licht-op-donker geldt alleen voor de kop en de inleiding: korte, grote
   tekst. Alles wat op een lichte kaart binnen zo'n sectie staat, keert
   hieronder terug naar donkere tekst -- de lijsten in "Het traject" zijn daar
   het eigenlijke leeswerk. */
.band--donker{background:var(--donker);border-block:0}
.band--donker h2,.band--donker h3{color:#fff}
.band--donker p,.band--donker .about-body p,.band--donker .band-head p{color:#EAE3DC}
.band--donker .eyebrow{color:var(--brass-licht)}
.band--donker .phase{background:var(--white);border-color:transparent}
.band--donker .phase h3{color:var(--pine-deep)}
.band--donker .phase li{color:var(--ink)}
.band--donker .phase__when,.band--donker .phase__list .is-optional{color:var(--muted)}
.band--donker .phase__foot{color:var(--muted)}