/* snelrr, gedeelde opmaak van alle pagina's. Uitleg bij het designsysteem staat bovenaan
   index.html en in DESIGN.md. */
/* ============================================================
   1 · TOKENS
   ============================================================ */
:root{
  color-scheme: light;

  /* Warme neutralen, "Soft Cream" / "Sand Beige" */
  --cream:      #F6F1E6;
  --cream-2:    #EFE8D8;
  --paper:      #FDFBF6;
  --sand:       #E3D9C4;
  --line:       #E2D8C4;
  --line-2:     #CEC0A4;

  /* Inkt: warme bijna-zwart, nooit #000 */
  --ink:        #23201C;
  --ink-2:      #3D3830;
  /* #776E61 haalde 4,45:1 op crème, net onder AA voor kleine tekst.
     #6E665A haalt 5,0:1. Een tweede, lichtere grijstint bestond hier ook,
     maar die zat op 3,1:1 en is bewust weg zodat hij niet terugkomt. */
  --mute:       #6E665A;

  /* Petrol, donkere secties, zelfde wereld als het klantblad */
  --deep:       #17333A;
  --deep-2:     #1E4650;
  --deep-3:     #24525E;
  --on-deep:    #F1EADB;
  --on-deep-mute:#A9BCBF;
  --line-deep:  #2B4F58;

  /* Eén accent, "Terracotta" / "Warm Clay".
     Drie tinten omdat één tint niet overal WCAG AA haalt:
       --clay      op crème  → 5.0:1  (ook goed voor kleine tekst)
       --clay-deep op tint   → 6.2:1  (tekst in beige vlakken)
       --clay-soft op petrol → 4.1:1  (alléén groot: koppen, iconen, vlakken)
       --clay-lite op petrol → 6.1:1  (kleine tekst en labels op donker) */
  --clay:       #9E5233;
  --clay-deep:  #7E4227;
  --clay-soft:  #C67B5C;
  --clay-lite:  #E0A183;
  --clay-tint:  #F1E2D6;
  --olive:      #5E6E33;   /* alleen voor "wel/goed" markeringen */

  /* Typografie */
  --serif: 'Newsreader','Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --sans:  'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Spacing, density 3 · spacious */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  --gut: clamp(20px, 5vw, 56px);
  --max: 1200px;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --sh-1: 0 1px 2px rgba(35,32,28,.04), 0 6px 20px rgba(35,32,28,.05);
  --sh-2: 0 2px 6px rgba(35,32,28,.06), 0 18px 44px rgba(35,32,28,.09);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Lettertypes staan op het eigen domein, zodat er geen verbinding naar Google gaat en de
   eerste weergave niet op een tweede server wacht. Alleen de Latijnse set: die dekt ook é, ë
   en €. Beide zijn variabele bestanden, dus één bestand per stijl dekt alle gewichten. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/newsreader-latin.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;
  src:url(fonts/newsreader-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2')}

/* ============================================================
   2 · BASIS
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
  color:var(--ink);
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img,svg{max-width:100%}
::selection{background:var(--clay);color:#fff}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Zichtbare focus, verplicht, nooit weghalen */
:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:4px;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Zachte grain, geeft warmte, kost geen bestand */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   3 · BOUWSTENEN
   ============================================================ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}

.label{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);
}
.label.on-deep{color:var(--on-deep-mute)}
.label.clay{color:var(--clay)}

.lead{font-size:clamp(17.5px,1.5vw,20.5px);line-height:1.6;color:var(--ink-2);max-width:60ch}
.lead.on-deep{color:var(--on-deep);opacity:.92}
.small{font-size:14.5px;line-height:1.6;color:var(--mute)}
.small.on-deep{color:var(--on-deep-mute)}
.small strong{color:var(--ink);font-weight:600}
.small.on-deep strong{color:var(--on-deep)}

.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Knoppen, min. 44px hoog */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:13px 24px;
  border-radius:var(--r-sm);
  border:1px solid var(--clay);
  background:var(--clay);color:#fff;
  font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{background:#8F4A2C;border-color:#8F4A2C;box-shadow:var(--sh-1);transform:translateY(-1px)}
.btn .ico{width:16px;height:16px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--paper);border-color:var(--ink);color:var(--ink);box-shadow:var(--sh-1)}
.btn.on-deep{background:var(--clay-soft);border-color:var(--clay-soft);color:#22140D}
.btn.on-deep:hover{background:#D28E70;border-color:#D28E70}
.btn.ghost-deep{background:transparent;color:var(--on-deep);border-color:var(--line-deep)}
.btn.ghost-deep:hover{background:rgba(241,234,219,.08);border-color:var(--on-deep-mute)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* Kaart */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}

/* ============================================================
   4 · NAVIGATIE
   ============================================================ */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,230,.88);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  min-height:70px;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);
}
/* De payoff krijgt de vrije ruimte tussen het logo en het menu, en centreert zich daarin.
   Stond hij vast aan het logo (gap van 9px), dan plakte hij aan het woordmerk en hing hij
   los van de eerste menuknop. Space-between deed hier het verkeerde werk: dat verdeelde de
   ruimte over drie groepen in plaats van de payoff in zijn eigen ruimte te centreren. */
.merk-groep{flex:1 1 auto}
.payoff{flex:1 1 0;text-align:center;min-width:0}
/* Eén groep, één onderlijn: de payoff staat op dezelfde regel als het woordmerk in
   plaats van in het midden van zijn eigen vakje. */
/* Geen margin-right:auto. Een auto-marge pakt álle vrije ruimte in de balk, nog
   voordat justify-content aan de beurt is, en dan schuiven de navlinks tegen de
   knop aan met een gat van bijna 200px na het logo. Zonder die marge doet
   space-between wat het moet doen: logo links, links in het midden, knop rechts. */
/* Payoff gecentreerd tegenover het woordmerk, niet op de onderlijn: op de
   basislijn zakt hij zichtbaar onder het midden van het logo weg, want het logo
   is ruim twee keer zo groot. Met centreren staat het midden van de inkt van
   beide op ongeveer een pixel van elkaar, op elke maat. */
/* Zelfde waarde als de gap van .nav-in, anders staat de payoff wel in het midden van zijn
   eigen vak maar niet in het midden tussen logo en menu. */
.merk-groep{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);min-width:0}
.wordmark{display:inline-flex;align-items:baseline;padding:6px 0}
.wordmark b{font-family:var(--serif);font-size:36px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.wordmark b i{font-style:normal;color:var(--clay)}
/* Payoff in de balk, tussen logo en knop. Sticky, dus deze regel staat de hele tijd in beeld.
   Cursief in de seriflettersoort, zodat hij bij het woordmerk hoort en niet bij de navigatie. */
.payoff{
  margin:0;
  font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.25;
  color:var(--clay);letter-spacing:-.01em;white-space:nowrap;
}
.payoff .nb{white-space:nowrap}
/* Op de telefoon staat de knop niet in de balk. Eén regel, twee dingen: het
   woordmerk en de payoff, op dezelfde onderlijn en links uitgelijnd met de kop
   eronder. Er is op de telefoon dus geen navigatie en geen knop in de balk:
   de pagina is één verhaal dat je doorleest, en de knop staat in de hero. */
@media (max-width:700px){
  .nav .btn{display:none}
  /* De knop is hier weg, dus na het logo blijft de hele balk over. De payoff
     pakt die ruimte en gaat tegen de rechterrand staan. Die rand is dezelfde
     marge als links, dus staat de payoff even ver van de schermrand als het
     logo. Gecentreerd in de restruimte zag eruit als een tekst die nergens bij
     hoort; tegen de rand is het één balk met twee hoeken. */
  .merk-groep{flex:1 1 auto;gap:0}
  .payoff{flex:1 1 0;min-width:0;text-align:right;white-space:nowrap;font-size:14.5px;margin:0}
}
.nav-links{display:flex;gap:26px;align-items:center}
/* Raakvlak minimaal 44px hoog: de onderstreping blijft op de tekst zitten
   via een inner span, zodat het klikgebied groter is dan de streep. */
.nav-links a{
  font-size:14.5px;color:var(--ink-2);
  display:inline-flex;align-items:center;min-height:44px;
  transition:color .18s var(--ease);
}
.nav-links a span{border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .18s var(--ease)}
.nav-links a:hover{color:var(--clay)}
.nav-links a:hover span{border-color:var(--clay)}
.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current] span{border-color:var(--clay)}
.nav .btn{min-height:44px;padding:10px 18px;font-size:14.5px;white-space:nowrap;flex:none}
@media (max-width:920px){.nav-links{display:none}}
/* Gemeten: vanaf 1150px past de payoff met lucht aan twee kanten, daaronder schuift hij over
   het menu heen omdat logo, menu en knop dan alle ruimte nodig hebben. Onder 700px is er weer
   plek, want daar zijn het menu en de knop uit de balk. */
@media (min-width:701px) and (max-width:1149px){.payoff{display:none}}
/* Op de telefoon staan alleen het logo en één knop in de balk. Die knop mag
   het logo niet verdringen, dus krimpt hij mee en houdt de balk lucht. */
@media (max-width:460px){
  .nav-in{min-height:64px;gap:12px}
  .wordmark b{font-size:29px}
  .payoff{font-size:13.5px}
}

/* ============================================================
   5 · HERO
   ============================================================ */
/* Onderruimte stond op 0 omdat de strook "Al draaiend bij" daar de scheiding met de donkere
   sectie verzorgde. Die strook is weg, dus de hero moet zijn eigen lucht onderin hebben. */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(56px,7vw,96px);position:relative;overflow:hidden}
.hero::after{ /* zachte crème-wash, geen harde gradient */
  content:"";position:absolute;top:-30%;right:-12%;width:60vw;height:60vw;
  background:radial-gradient(circle at center, rgba(198,123,92,.13), rgba(198,123,92,0) 62%);
  pointer-events:none;z-index:0;
}
.hero-in{position:relative;z-index:2}
/* nowrap: met flex-wrap viel het bolletje op smalle schermen op een eigen
   regel boven het label. Nu blijft het staan en breekt alleen de tekst. */
.hero-eyebrow{display:flex;align-items:flex-start;gap:14px;flex-wrap:nowrap;margin-bottom:var(--s4)}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--clay);flex:none;margin-top:6px}
@media (prefers-reduced-motion:no-preference){
  .hero-eyebrow .dot{animation:soft 3.4s ease-in-out infinite}
}
@keyframes soft{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* Kop linksboven, tekst en knoppen eronder, meter rechts over beide rijen.
   De tweede rij is flexibel en de eerste precies zo hoog als de kop. Dat is de
   hele truc: de meter is hoger dan kop plus tekst samen, en die overruimte moet
   ónder de knoppen vallen. Stond hier align-items:end met twee auto-rijen, dan
   rekte rij 1 mee met de kaart en stond er een gat van tientallen pixels tussen
   de kop en de eerste zin. */
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;
  grid-template-rows:min-content min-content min-content 1fr;
  column-gap:clamp(28px,4vw,68px);row-gap:var(--s3);align-items:start;
}
.hero-grid > .hero-h{grid-column:1;grid-row:1}
.hero-grid > .hero-sub{grid-column:1;grid-row:2}
.hero-grid > .hero-cta{grid-column:1;grid-row:3}
.hero-grid > .knop-prijs{grid-column:1;grid-row:4}
.hero-grid > .meter{grid-column:2;grid-row:1 / -1}
/* Op de telefoon: kop, dan in twee zinnen wat ik doe, dan de meter, dan de knop.
   De meter stond eerder direct onder de kop om het bedrag in het eerste scherm te
   krijgen, maar dan moet je scrollen voordat je weet wat hier te koop is. Dat is
   de verkeerde ruil, en het bedrag valt nu nog steeds ruim boven de fold. */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;row-gap:var(--s3)}
  .hero-grid > .hero-h{grid-column:1;grid-row:1}
  .hero-grid > .hero-sub{grid-column:1;grid-row:2}
  .hero-grid > .meter{grid-column:1;grid-row:3;margin-top:var(--s2)}
  .hero-grid > .hero-cta{grid-column:1;grid-row:4}
  .hero-grid > .knop-prijs{grid-column:1;grid-row:5}
  /* De regel: één kolom is alles gecentreerd, twee kolommen is alles links. Zo is de
     uitlijning nooit half. Op de laptop staat de meter naast de kop, en een gecentreerde
     kop naast een kaart staat scheef; daar blijft het dus links. */
  .hero-h,.hero-sub{text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .meter .m-q,.meter .m-hours,.meter .m-amount,.meter .m-per,.meter .m-foot{text-align:center}
  .meter .m-q,.meter .m-foot{margin-left:auto;margin-right:auto}
}

h1.hero-h{
  /* 82px was te groot toen de kop een lange zin was: vijf regels van bijna 400px. De kop is nu
     weer kort, dus 68px kan, en dat houdt de klap in het eerste scherm. */
  font-size:clamp(38px,5.4vw,68px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.035em;
}
h1.hero-h em{font-style:italic;color:var(--clay);font-weight:400}
h1.hero-h .per{color:var(--clay)}
/* Zelfde lettersoort als de kop erboven: het is één gedachte in twee regels, en
   in de schreefloze letter las het als een losse ondertitel van iets anders.
   Geen eigen marge: de afstand tot de kop is de row-gap van het raster, anders
   staan er twee afstanden boven elkaar die je apart moet bijhouden. */
.hero-sub{
  margin-top:0;font-family:var(--serif);
  font-size:clamp(20px,2.1vw,25px);line-height:1.35;letter-spacing:-.015em;
  color:var(--ink-2);max-width:34ch;
}
.hero-sub b{color:var(--ink);font-weight:600}
/* Marge bovenop de row-gap, zodat de knop meer lucht heeft dan de zin erboven. */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s2)}
.knop-prijs{margin-top:var(--s2);font-size:13.5px;line-height:1.5;color:var(--mute);max-width:44ch}
.sec.deep .knop-prijs{color:var(--on-deep-mute)}

/* Wat je risico is: vier feiten bij elkaar in plaats van los over de pagina. */
.risico{
  margin-top:clamp(26px,3.4vw,var(--s5));padding:clamp(22px,2.6vw,32px);
  background:var(--cream-2);border-radius:var(--r);
}
.risico ul{margin-top:var(--s3);display:grid;gap:14px}
.risico li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.risico li strong{color:var(--ink);font-weight:600}
.risico .ico{width:19px;height:19px;color:var(--clay);flex:none;margin-top:2px}

/* Balk onderaan het scherm, alleen op de telefoon en alleen voorbij de hero. */
.mob-vraag{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(246,241,230,.94);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .28s var(--ease);
}

.mob-vraag.in{transform:none}
.mob-vraag .btn{width:100%;justify-content:center;min-height:52px}
@media (max-width:700px){
  .mob-vraag{display:block}
  footer.ft{padding-bottom:calc(var(--s4) + 76px)}
}
@media (prefers-reduced-motion:reduce){.mob-vraag{transition:none}}

/* ---- Kostenmeter in de hero ----
   Het bedrag moet van de bezoeker zijn, niet van mij. Daarom schuift hij zelf
   en rekent de pagina alleen. Aannames staan eronder, met dezelfde getallen
   als het rekenvoorbeeld in sectie 01: 45 werkbare weken, €45 all-in per uur. */
.meter{padding:clamp(22px,2.4vw,30px)}
/* De vraag staat in Inter en niet in Newsreader. Dit is geen kop maar het label van de
   schuif: de invoer verwijst er via aria-labelledby naar. De standaard is dat alles wat
   bediening is in de tekstletter staat en dat de schreefletter voor koppen en voor het
   getal is. Zo staat er in deze kaart precies één schreefletter, en dat is de uitkomst
   waar het je om gaat. In het deck in sectie 01 is de titel wél Newsreader, want dat is
   een echte kop en geen label. */
.meter .m-q{font-size:17px;line-height:1.4;color:var(--ink);font-weight:500}

.m-slide{margin-top:var(--s3)}
/* Eigen thumb en track, want de standaard ziet eruit als een instelling in
   plaats van een uitnodiging. Raakvlak blijft 44px hoog via padding. */
.m-slide input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:44px;margin:0;padding:0;
  background:transparent;cursor:grab;
}
.m-slide input[type=range]:active{cursor:grabbing}
.m-slide input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;background:var(--clay-tint);border:1px solid #E4CDBC;
}
.m-slide input[type=range]::-moz-range-track{
  height:6px;border-radius:99px;background:var(--clay-tint);border:1px solid #E4CDBC;
}
.m-slide input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;margin-top:-12px;border-radius:50%;
  background:var(--clay);border:3px solid var(--paper);
  box-shadow:0 1px 6px rgba(35,32,28,.28);
}
.m-slide input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:var(--clay);border:3px solid var(--paper);
  box-shadow:0 1px 6px rgba(35,32,28,.28);
}
.m-hours{margin-top:var(--s2);font-size:14.5px;color:var(--ink-2)}
.m-hours output{font-weight:600;color:var(--ink)}

.m-out{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.m-amount{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.2vw,62px);line-height:1;letter-spacing:-.03em;
  color:var(--clay-deep);
}
.m-per{margin-top:8px;font-size:14.5px;color:var(--ink-2)}
.m-per b{font-weight:600;color:var(--ink)}
.m-bar{margin-top:var(--s3);height:10px;border-radius:99px;background:var(--clay-tint);overflow:hidden}
.m-bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--clay-soft),var(--clay));
  transition:width .42s var(--ease);
}
@media (prefers-reduced-motion:reduce){.m-bar span{transition:none}}
.m-foot{margin-top:var(--s3);font-size:12.5px;line-height:1.5;color:var(--mute)}

/* Proofbalk */

/* ============================================================
   6 · SECTIES
   ============================================================ */
.sec{padding:clamp(60px,8.5vw,var(--s7)) 0;position:relative}
/* Op de telefoon telt de sectieruimte dubbel: onderkant van de een plus
   bovenkant van de ander was 120px leegte tussen twee blokken. */
@media (max-width:560px){.sec{padding:44px 0}}
/* Ankersprong mag de sectiekop niet onder de sticky nav parkeren. */
section[id]{scroll-margin-top:84px}
.sec.paper{background:var(--paper)}
.sec.sand{background:var(--cream-2)}
.sec.deep{background:var(--deep);color:var(--on-deep)}
.sec.deep h1,.sec.deep h2,.sec.deep h3{color:var(--on-deep)}

.sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.6vw,56px);align-items:start;margin-bottom:clamp(32px,4.6vw,var(--s6))}
@media (max-width:780px){.sec-head{grid-template-columns:1fr;gap:var(--s2)}}
.sec-num{
  font-family:var(--serif);font-size:15px;color:var(--mute);white-space:nowrap;padding-top:.55em;
  letter-spacing:.06em;
}
.sec.deep .sec-num{color:var(--on-deep-mute)}
.sec-num b{color:var(--clay);font-weight:600}
.sec.deep .sec-num b{color:var(--clay-lite)}
.sec-h{font-size:clamp(30px,4.6vw,54px);letter-spacing:-.025em;max-width:22ch}
.sec-h em{font-style:italic;color:var(--clay)}
.sec.deep .sec-h em{color:var(--clay-soft)}
.sec-head .lead{margin-top:var(--s3)}

.punch{
  margin-top:clamp(28px,3.6vw,var(--s5));
  font-family:var(--serif);font-size:clamp(23px,3.1vw,38px);line-height:1.18;letter-spacing:-.02em;max-width:32ch;
}
.punch em{font-style:italic;color:var(--clay)}
.sec.deep .punch{color:var(--on-deep)}
.sec.deep .punch em{color:var(--clay-lite)}

/* ---- 01 Probleem: een deck dat je zijwaarts schuift ----
   Mechanisme uit varianten/6-kaartendeck.html. Drie kaarten onder elkaar zetten
   op de telefoon maakte van dit stuk een lange lijst; nu schuif je erdoor.
   Op een breed scherm passen ze naast elkaar en is er niets te schuiven, dan
   verdwijnt de bediening ook.

   Het deck loopt over de volle breedte maar de eerste kaart begint op dezelfde
   linkerlijn als de kop erboven. Vandaar deze marge: de helft van wat de
   .wrap overhoudt, plus de gebruikelijke goot. Geen vw hierin, want dan telt de
   verticale schuifbalk mee en scrollt de pagina zelf een paar pixels. */
/* Een stapel, geen rij. De kaarten liggen over elkaar, de voorste staat op ware
   grootte met een diepe schaduw en een lichtere tint, de kaarten erachter staan
   kleiner en lager. Wat je ziet is één kaart met duidelijk meer erachter.
   Diepte komt uit vier dingen samen, want op een donkere ondergrond doet een
   schaduw alleen te weinig: overlap, formaat, tint en z-index. */
.prob{
  --kaart-breedte:min(80vw,380px);
  /* Niet de overlap opgeven maar hoeveel je van de buur ziet, en de overlap daaruit
     berekenen. Anders botst bij vijf kaarten op een breed scherm de tekst van de
     kaarten achter elkaar: die staan dan te ver uit elkaar om bedekt te worden en
     te dicht op elkaar om leesbaar te zijn. Nu zie je van elke buur een strook,
     en dat is de rand van de kaart en niet een halve zin. */
  --strook:clamp(46px,12vw,96px);
  --overlap:calc(var(--kaart-breedte) - var(--strook));
  /* Geen scrollcontainer. Het deck verplaatst met transform, en dat is het hele
     punt: transform handelt de browser af op de grafische kaart, terwijl scrollLeft
     per frame over de hoofddraad moet. Op een telefoon is dat laatste nooit
     vloeiend, en het gevecht met de doorrol van de browser is er ook mee weg.
     pan-y: verticaal vegen scrolt de pagina, horizontaal doet de JS. */
  overflow:hidden;touch-action:pan-y;cursor:grab;
  /* Ruimte boven en onder voor de schaduw van de voorste kaart. */
  padding:26px 0 34px;
}
.prob:active{cursor:grabbing}
/* De baan schuift, de kaarten staan stil. De marge links is precies de halve
   restruimte, zodat de eerste kaart in het midden kan staan met zijn buur eruit. */
.prob-baan{
  display:flex;gap:0;align-items:stretch;
  padding-left:calc((100% - var(--kaart-breedte)) / 2);
  will-change:transform;
}
.prob article{
  flex:0 0 auto;width:var(--kaart-breedte);
  position:relative;margin-left:calc(var(--overlap) * -1);
  background:var(--deep-2);border:1px solid var(--line-deep);border-radius:var(--r);
  box-shadow:0 8px 20px rgba(0,0,0,.30);
  will-change:transform,opacity;
}
.prob article:first-child{margin-left:0}

/* Drie lagen per kaart, en de JS schrijft per frame op elk daarvan één waarde:
   de kaart zelf krijgt formaat en doorzichtigheid, de plaat de lichtere tint van de
   voorste kaart, en de inhoud dooft sneller weg dan de kaart. Dat gebeurt met
   inline transform en opacity, en niet meer via een CSS-variabele: een variabele
   erft door naar alles wat in de kaart staat, dus moest de browser bij elk frame de
   opmaak van elke regel in elke kaart opnieuw uitrekenen. Nu zijn het vijftien
   waardes per frame op eigenschappen die de browser niet hoeft te hertekenen. */
.prob .plaat{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:var(--deep-3);
  box-shadow:0 26px 52px rgba(0,0,0,.42), inset 0 0 0 1px #3E7280;
  opacity:0;will-change:opacity;
}
/* Zonder JS staat de plaat uit en de inhoud aan: dan is het een leesbare rij. */
.prob .inhoud{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:clamp(22px,2.6vw,32px);will-change:opacity;
}

/* Bediening: de twee pijlen, op de donkere ondergrond. Gecentreerd, want de
   voorste kaart staat ook in het midden: links uitgelijnd stonden ze onder een
   kaart die daar niet ligt. */
.deck-bediening{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:var(--s3);
}
.deck-bediening .pijl{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1px solid var(--line-deep);background:transparent;color:var(--on-deep);
  display:grid;place-items:center;transition:background .18s var(--ease),transform .14s var(--ease);
}
.deck-bediening .pijl:hover{background:var(--deep-2)}
.deck-bediening .pijl:active{transform:scale(.94)}
.deck-bediening .pijl[disabled]{opacity:.3;cursor:not-allowed}
.deck-bediening .pijl:active{transform:none}
.deck-bediening .pijl .ico{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){
  .deck-bediening .pijl{transition:none}
}
.prob .big{font-family:var(--serif);font-size:clamp(38px,4.6vw,56px);line-height:1;color:var(--on-deep);letter-spacing:-.03em}
/* "per jaar" hangt onder het bedrag en niet erboven: het is de eenheid van dat
   getal, en boven het bedrag las het als een kopje van een nieuw blokje. */
.prob .big span{
  display:block;margin-top:10px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-lite);
}
.prob h3{
  margin-bottom:var(--s2);font-size:clamp(21px,2.2vw,26px);line-height:1.15;
  letter-spacing:-.02em;color:var(--on-deep);
}
/* Rekenregels: elke regel noemt zijn eigen eenheid, zodat er nooit twijfel is of
   iets per week, per keer of per jaar geldt. De laatste regel is de uitkomst
   waar het bedrag op rust. */
.prob .calc{margin:var(--s3) 0 0;display:grid;gap:0}
.prob .calc > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line-deep);font-size:15px;
}
.prob .calc > div:first-child{border-top:1px solid var(--line-deep)}
.prob .calc > div:last-child{border-bottom:0}
.prob .calc dt{color:var(--on-deep-mute)}
.prob .calc dd{margin:0;color:var(--on-deep);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Losse regel op een kaart die geen urenregel heeft. */
.prob .kaart-note{margin-top:var(--s3);font-size:14.5px;line-height:1.5;color:var(--on-deep-mute)}
.deck-voet{
  margin-top:var(--s3);max-width:52ch;
  font-size:13px;line-height:1.5;color:var(--on-deep-mute);
}

/* ---- 02 Oplossing ---- */
.sol{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (max-width:760px){.sol{grid-template-columns:1fr}}
/* Icoon en titel op één regel: zonder alinea eronder is een blok met het icoon
   erboven een lege doos met een kop erin. Nu is het één regel die je leest. */
.sol article{
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  /* Gecentreerd en niet op de basislijn: de titel is hier altijd één regel, en
     op de basislijn hangt hij zichtbaar lager dan het midden van het icoon. */
  display:flex;align-items:center;gap:14px;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.sol article:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.sol article:hover{transform:none}}
.sol .k{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--clay-tint);color:var(--clay-deep);
  display:grid;place-items:center;
}
.sol .k .ico{width:19px;height:19px}
.sol h3{font-size:clamp(18px,1.7vw,22px);line-height:1.2}

/* ---- 03 Wat ik zoal bouw ---- */
/* Logo's boven de kop. Zelfde hoogtes per merk als in .draait-lijst, want die zijn daar per logo
   uitgemeten op optisch gelijk gewicht en niet op pixels: Nobel is een woordmerk, DDYS staat in
   kleine letters en Heart Cry heeft de hoogste verhouding. Iets kleiner dan boven, omdat ze hier
   onder een kop van 40px+ staan en niet in een eigen balk. */
.cases-logos{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.6vw,38px);
  margin:0 0 clamp(18px,2vw,26px);padding:0;list-style:none
}
.cases-logos img{display:block;width:auto;opacity:.8}
.cases-logos li:nth-child(1) img{height:clamp(22px,2.1vw,29px)}
.cases-logos li:nth-child(2) img{height:clamp(24px,2.25vw,31px)}
.cases-logos li:nth-child(3) img{height:clamp(29px,2.75vw,38px)}
/* De drie opdrachten bovenaan zijn wél kaarten, de twaalf regels eronder niet: het verschil in
   vorm is het verschil in gewicht. Dit is gebeurd, dat is een soort werk. */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media (max-width:860px){.cases{grid-template-columns:1fr}}
.cases article{
  padding:clamp(20px,2.3vw,28px);background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r);display:grid;align-content:start;gap:10px
}
.cases .label{margin:0}
.cases h3{font-size:clamp(18px,1.7vw,21px);line-height:1.25}
.cases p{font-size:15.5px;line-height:1.6;color:var(--mute)}
.cases p b{color:var(--clay-deep);font-weight:600}
.cases-voet{margin-top:var(--s3);font-size:15px;line-height:1.6;color:var(--mute)}

.promise{
  margin-top:clamp(28px,3.6vw,var(--s5));
  background:var(--deep);border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,var(--s5));
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,var(--s5));align-items:center;
}
@media (max-width:760px){.promise{grid-template-columns:1fr;gap:var(--s2)}}
.promise .label{color:var(--clay-lite)}
.promise q{
  font-family:var(--serif);font-size:clamp(21px,2.6vw,32px);line-height:1.25;
  color:var(--on-deep);quotes:"“" "”";letter-spacing:-.02em;
}

/* ---- Draait al bij: één smalle balk in plaats van een hele sectie ----
   Hier stond een sectie met twee uitgelichte klanten en twee citaten. Dat was
   groter gebracht dan het is, en de citaten waren nog niet eens bevestigd.
   Twee namen op één regel zegt hetzelfde zonder de show. */
.draait{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
/* Gecentreerd, label en logo's als één groep. Een strook met bewijs hoort in het midden:
   links uitgelijnd hangt hij aan de tekstkolom van de sectie erboven, en die staat er niet,
   want dit is een losse strook tussen twee secties. */
.draait-in{
  max-width:var(--max);margin:0 auto;padding:clamp(var(--s3),2.4vw,var(--s4)) var(--gut);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.6vw,36px);flex-wrap:wrap;
}
.draait-in .label{flex:none}
/* Twee mini-gevallen naast elkaar, onder elkaar op een smal scherm. Twee namen zonder
   woorden zeggen weinig; het is de combinatie van wat er was en wat er nu is die het
   doet. Staat zo in doc 03, dus het is na te vragen. */
/* Logowand. Per logo het kleinst mogelijke ingrijpen, en dat is per logo anders:

   · Nobel Obligatie leverde alleen een beige versie, bedoeld voor een donkere achtergrond,
     en die is op crème onzichtbaar. Het is een woordmerk zonder samenspel van kleuren, dus
     omgezet naar één tint. Dat is bij een woordmerk een klein ingrijpen.
   · DDOUBLEYOU STEEL was al vrijwel zwart, met een witte achtergrond in de png. Die
     achtergrond is doorzichtig gemaakt, verder niets.
   · Stichting Heart Cry staat in de eigen kleuren. Geprobeerd om er één of twee tinten van
     te maken, maar de letters van "Heart" ontstaan uit oranje tekst over een blauwe ovaal:
     bij elke omzetting valt "Heart" of "Cry" weg. Een logo dat je niet kunt vereenvoudigen
     zonder het onleesbaar te maken, laat je met rust.

   Wat dit netjes maakt is een donkere versie van Nobel, dan kunnen alle drie in hun eigen
   kleuren. Vraag dat bestand bij de klant op, samen met de toestemming.

   De hoogte staat per logo apart. Deze drie hebben verhoudingen van 2,1 tot 3,3 op 1; met
   dezelfde pixelhoogte lijkt de smalste twee keer zo groot. Optisch gelijk is wat je wil,
   niet rekenkundig gelijk.

   De hoogte groeit mee met het scherm: op de telefoon moeten drie logo's plus het label op
   twee regels passen, op een breed scherm mag het bewijs juist opvallen. De bovengrens is
   niet willekeurig. DDOUBLEYOU STEEL is een png van 240 bij 72, en 36 css-pixels hoog is
   precies twee keer de bronhoogte; daarboven wordt hij op een retina-scherm zacht. De andere
   twee kunnen hoger (Nobel is 1536 breed, Heart Cry is svg), maar dan gaat de optische
   verhouding scheef, dus die volgen dezelfde factor. Wil je ze nóg groter: vraag een svg van
   DDOUBLEYOU STEEL op, dan valt dit plafond weg. */
.draait-lijst{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3.2vw,48px);margin:0;flex:0 1 auto}
.draait-lijst img{display:block;width:auto;opacity:.85;transition:opacity .18s var(--ease)}
.draait-lijst li:hover img{opacity:1}
.draait-lijst li:nth-child(1) img{height:clamp(24px,2.4vw,34px)}   /* Nobel, woordmerk */
.draait-lijst li:nth-child(2) img{height:clamp(26px,2.55vw,36px)}  /* DDYS, kleine letters, dus wat hoger. 36px = 2× de bron */
.draait-lijst li:nth-child(3) img{height:clamp(32px,3.15vw,45px)}  /* Heart Cry, hoogste verhouding */

/* ---- 03 Route ---- */
/* minmax(0,1fr) en niet 1fr: bij een kale 1fr is de ondergrens van een kolom zijn min-content,
   en dan duwt de langste titel zijn eigen kolom breder. Gemeten op 1440px was dat 216, 206, 190,
   190 en 190 px, dus "Kennismaken" en "Werkbezoek" kregen ruimte die de andere drie niet kregen.
   De hoogtes waren wél gelijk, daarom viel het niet op in check.mjs. Met minmax(0,1fr) mag een
   kolom onder zijn min-content zakken en worden alle vijf even breed. Zelfde reden bij de twee
   smallere varianten hieronder. */
.route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1040px){.route{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.route{grid-template-columns:1fr}}
/* Nummer en titel op één regel, de uitleg eronder over de volle breedte. Het
   nummer stond boven de titel, en dan leest een stap als drie losse dingen. */
.step{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,26px);
  display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline;align-content:start;
}
.step .n{
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);color:var(--mute);
  display:grid;place-items:center;font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;
  grid-column:1;grid-row:1;
}
/* Vijf kaarten naast elkaar laten naast het nummer nog ongeveer 120px over voor de titel.
   "Rapport en voorstel" en "Draaien en bijhouden" braken daar in drie regels, met een los
   "en" op de middelste, en dan begon de uitleg in elke kaart op een andere hoogte. Eerst
   geprobeerd met text-wrap:balance en een vaste hoogte van twee regels: balance maakte er
   nog steeds drie regels van, want de kolom is simpelweg te smal.

   De echte oplossing zit in de tekst en niet in de opmaak: de vijf stappen heten nu elk
   één woord. Kennismaken, Werkbezoek, Rapport, Bouwen, Bijhouden. Dat past altijd op één
   regel, dus alle uitleg begint op dezelfde hoogte zonder dat er iets vastgezet hoeft te
   worden, en als ladder is het ook beter te onthouden dan vijf halve zinnen. Wat de titel
   niet meer zegt, staat in de regel eronder. De ondergrens van de lettergrootte is
   verlaagd van 18 naar 17px, want tussen 1041 en 1200px is de kolom het smalst en moet
   "Kennismaken" daar nog steeds op één regel passen. */
.step h3{font-size:clamp(17px,1.7vw,21px);line-height:1.2;grid-column:2;grid-row:1}
.step p{font-size:15.5px;color:var(--mute);margin-top:12px;grid-column:1 / -1;grid-row:2}
.step.hi{background:var(--clay-tint);border-color:#E3CBBA}
.step.hi .n{border-color:var(--clay);color:var(--clay-deep)}
.step.hi .price{color:var(--clay-deep)}
.step.hi p{color:#6D5E51}
.step.hi .price{border-top-color:#E3CBBA}

/* ---- 04 Prijs ---- */
/* min-width:0, zonder dit dwingt de min-content-breedte van de tabel de
   kolom breder dan het grid, en dat gaf horizontale scroll op 375px. */
.price-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,3.6vw,var(--s6));align-items:start}
.price-grid > *{min-width:0}
@media (max-width:940px){.price-grid{grid-template-columns:1fr}}
.bezoek{overflow:hidden}
.bezoek .top{padding:clamp(24px,3vw,var(--s4));border-bottom:1px solid var(--line);background:var(--cream-2)}
/* Bedrag en eenheid onder elkaar, niet ernaast: naast een cijfer van 76px
   ging het label over twee regels hangen en las het als losse tekst. */
.bezoek .amount{display:grid;gap:9px;justify-items:start;margin:10px 0 16px}
.bezoek .amount b{font-family:var(--serif);font-size:clamp(50px,6.4vw,76px);font-weight:400;line-height:.88;letter-spacing:-.035em;color:var(--ink)}
.bezoek .amount span{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.bezoek ul{padding:clamp(20px,2.4vw,28px);display:grid;gap:13px}
.bezoek li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;align-items:start;color:var(--ink-2)}
.bezoek li .ico{width:17px;height:17px;color:var(--olive);margin-top:4px}

.daarna{padding:clamp(24px,3vw,var(--s4));display:grid;gap:16px;align-content:start}
.daarna ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.daarna li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;align-items:start;color:var(--ink-2)}
.daarna li .ico{width:17px;height:17px;color:var(--olive);margin-top:4px}


/* ---- 05 Bezwaren ---- */
.faq{display:grid;gap:12px}
.faq details{
  background:var(--deep-2);border:1px solid var(--line-deep);border-radius:var(--r);
  transition:border-color .2s var(--ease);
}
.faq details[open]{border-color:var(--clay-soft)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:clamp(18px,2.1vw,24px) clamp(18px,2.1vw,26px);
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);line-height:1.22;letter-spacing:-.015em;
  color:var(--on-deep);min-height:44px;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--clay-lite)}
.faq summary .chev{
  width:26px;height:26px;flex:none;color:var(--clay-soft);
  transition:transform .22s var(--ease);
}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 clamp(18px,2.1vw,26px) clamp(20px,2.4vw,26px);max-width:76ch;display:grid;gap:13px}
.faq .ans p{font-size:16.5px;line-height:1.62;color:var(--on-deep-mute)}
.faq .ans p em{font-style:normal;color:var(--on-deep);font-weight:500}

/* ---- 06 Wat ik niet doe ---- */
/* Twee kolommen, niet drie: sinds "geen dienst in de avonden" eruit is zijn het vier kaarten,
   en vier in drie kolommen is 3+1 met een gat van twee plekken rechtsonder. Twee kolommen vult
   beide rijen. Dit is dezelfde keuze als bij .sol in sectie 02, dat ook vier kaarten heeft. */
.no{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (max-width:560px){.no{grid-template-columns:1fr}}
/* Zelfde vorm als de route: kruisje en titel op één regel, uitleg eronder. */
.no article{
  padding:clamp(20px,2.3vw,28px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline;align-content:start;
}
.no .x{width:30px;height:30px;border-radius:50%;background:var(--cream-2);color:var(--clay);display:grid;place-items:center;grid-column:1;grid-row:1}
.no .x .ico{width:15px;height:15px}
.no h3{font-size:19px;line-height:1.2;grid-column:2;grid-row:1}
.no p{font-size:15.5px;color:var(--mute);margin-top:12px;grid-column:1 / -1;grid-row:2}

/* ============================================================
   7 · CONTACT
   ============================================================ */
.cta{background:var(--deep);color:var(--on-deep);padding:clamp(56px,8vw,var(--s7)) 0;position:relative;overflow:hidden}
.cta::after{
  content:"";position:absolute;bottom:-40%;left:-10%;width:56vw;height:56vw;
  background:radial-gradient(circle at center, rgba(198,123,92,.20), rgba(198,123,92,0) 62%);
  pointer-events:none;
}
.cta-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,4.4vw,var(--s7));align-items:start;position:relative;z-index:2}
@media (max-width:940px){.cta-grid{grid-template-columns:1fr}}
/* color expliciet: .cta is geen .sec.deep, dus zonder deze regel erfde de
   kop --ink en stond er donkere tekst op een donkere achtergrond. */
.cta h1,.cta h2{color:var(--on-deep);font-size:clamp(32px,5.4vw,64px);letter-spacing:-.03em;max-width:20ch}
.cta h1 em,.cta h2 em{font-style:italic;color:var(--clay-soft)}
.cta .lead{margin-top:var(--s3)}
.cta-contact{margin-top:var(--s5);display:grid;gap:var(--s3)}
.cta-contact a{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-family:var(--serif);font-size:clamp(19px,2.1vw,24px);color:var(--on-deep);
  border-bottom:1px solid var(--line-deep);padding-bottom:10px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.cta-contact a:hover{color:var(--clay-lite);border-color:var(--clay-lite)}
.cta-contact .ico{width:20px;height:20px;color:var(--clay-soft)}

/* Formulier, zichtbare labels, helptekst bij het veld */
form.ask{background:rgba(241,234,219,.05);border:1px solid var(--line-deep);border-radius:var(--r-lg);padding:clamp(22px,3vw,var(--s4));display:grid;gap:var(--s3)}
form.ask .fld{display:grid;gap:7px}
form.ask label{font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--on-deep)}
form.ask input,form.ask textarea,form.ask select{
  font:inherit;font-size:16px;color:var(--on-deep);
  background:rgba(23,51,58,.55);
  border:1px solid var(--line-deep);border-radius:var(--r-sm);
  padding:13px 14px;min-height:48px;width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
form.ask select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23A9BCBF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
form.ask select option{color:#16303A;background:#F6F1E6}
form.ask textarea{min-height:108px;resize:vertical;line-height:1.55}
form.ask input::placeholder,form.ask textarea::placeholder{color:#7C949A}
form.ask select:invalid{color:#7C949A}
form.ask input:focus,form.ask textarea:focus,form.ask select:focus{border-color:var(--clay-soft);background:rgba(23,51,58,.85);outline:none}
form.ask input:focus-visible,form.ask textarea:focus-visible,form.ask select:focus-visible{outline:2px solid var(--clay-soft);outline-offset:2px}
form.ask .foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
/* Honeypot: uit het zicht en uit de tabvolgorde, maar niet display:none, want dat vullen bots
   juist niet in. Bewust de clip-variant en niet left:-9999px, want dan staat er een element buiten
   de viewport en dat meldt check.mjs terecht als fout. Zo blijft die controle betekenisvol. */
form.ask .trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Terugkoppeling na versturen. aria-live=polite, dus een schermlezer leest het voor zonder te kapen. */
form.ask .formstatus{
  margin:0;padding:14px 16px;border-radius:var(--r-2);font-size:15px;line-height:1.5;
  background:rgba(241,234,219,.10);border:1px solid var(--line-deep);color:var(--on-deep);
}
form.ask .formstatus.ok{background:rgba(158,209,168,.14);border-color:rgba(158,209,168,.45)}
form.ask .formstatus.fout{background:rgba(224,161,131,.16);border-color:rgba(224,161,131,.5)}
form.ask button[disabled]{opacity:.6;cursor:progress}

/* ============================================================
   8 · FOOTER
   ============================================================ */
footer.ft{background:var(--cream);padding:clamp(36px,4.4vw,var(--s6)) 0 var(--s4);border-top:1px solid var(--line)}
.ft-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;padding-bottom:var(--s3)}
.ft-mark{font-family:var(--serif);font-size:clamp(44px,9vw,86px);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.ft-mark i{font-style:normal;color:var(--clay)}
.ft-say{text-align:right;display:grid;gap:6px;justify-items:end}
.ft-domain{margin:0}
/* Onderstreping op de tekst en niet als rand om het raakvlak: dat raakvlak is
   44px hoog, dus de rand hing ver onder de letters als een los streepje. */
.ft-domain a{
  font-family:var(--serif);font-size:clamp(21px,2.4vw,28px);color:var(--clay);
  letter-spacing:-.02em;
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:var(--line-2);
  transition:text-decoration-color .18s var(--ease)
}
.ft-domain a:hover{text-decoration-color:var(--clay)}
/* Op de telefoon één kolom. Het woordmerk stond onderaan uitgelijnd naast een
   blok dat bovenaan begon, dus stonden er twee dingen los van elkaar te zweven. */
@media (max-width:560px){
  .ft-top{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .ft-mark{font-size:clamp(40px,12vw,58px)}
  .ft-say{text-align:left;justify-items:start;gap:2px}
}
.ft-bot{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s3);border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.ft-bot a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:transparent;
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease)
}
.ft-bot a:hover{color:var(--clay);text-decoration-color:var(--clay)}
.ft-wie,.ft-bereik{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:44px}
.ft-bot .sep{color:var(--mute);opacity:.55}
@media (max-width:700px){
  .ft-bot{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .ft-bot .sep{display:none}
  .ft-wie{flex-direction:column;align-items:flex-start;gap:2px;min-height:0}
  /* "KvK nog invullen" moet bij elkaar blijven: het label en het blokje eromheen
     vielen op smalle schermen op twee regels en dan lijkt het twee losse dingen. */
  .ft-wie > span{white-space:nowrap}
  /* Geen extra gap: elke link is al 44px hoog, en daar bovenop nog ruimte maakte
     er een losse lijst van in plaats van een blokje contactgegevens. */
  .ft-bereik{flex-direction:column;align-items:flex-start;gap:0;min-height:0}
  .ft-bot a{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   9 · MOTION, subtiel (motion 3/10)
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .stagger > *{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .stagger.in > *{opacity:1;transform:none}
  .stagger.in > *:nth-child(2){transition-delay:.06s}
  .stagger.in > *:nth-child(3){transition-delay:.12s}
  .stagger.in > *:nth-child(4){transition-delay:.18s}
  .stagger.in > *:nth-child(5){transition-delay:.24s}
  .stagger.in > *:nth-child(6){transition-delay:.30s}
}

/* ============================================================
   10 · PRINT
   ============================================================ */
@media print{
  header.nav,form.ask,body::before,.hero::after,.cta::after{display:none}
  body{background:#fff;font-size:11pt}
  .sec.deep,.cta,.promise,.prob article,.faq details{background:#fff !important;color:#000 !important;border-color:#999 !important}
  .sec.deep h2,.sec.deep h3,.cta h1,.cta h2,.promise q,.faq summary,.prob .big{color:#000 !important}
  .faq details{break-inside:avoid}
  .faq .ans{display:block !important}
}

/* ============================================================
   11 · STARTPAGINA EN DOORVERWIJZING
   ============================================================ */
/* De startpagina heeft alleen de kop, de knop en de tegels naar de andere pagina's. Eén kolom,
   dus alles gecentreerd, volgens dezelfde regel als de hero op de telefoon. */
.hero.start{padding:clamp(40px,6.4vw,84px) 0 clamp(44px,5.6vw,72px)}
.hero-grid.hero-solo{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:var(--s3)}
.hero-solo > *{grid-column:1 !important;grid-row:auto !important}
.hero-solo .hero-h{max-width:16ch}
.hero-solo .hero-cta{justify-content:center}
.hero-solo .knop-prijs{margin-top:0}

/* Tegels: één klik naar elk onderwerp. Elke tegel is in zijn geheel de link. */
.tegels{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);
  margin-top:clamp(36px,5vw,var(--s6));text-align:left;
}
@media (max-width:860px){.tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Op de telefoon twee kolommen met alleen de kop: zes tegels onder elkaar was weer een lange
   pagina, en dat is precies wat de startpagina niet meer moet zijn. */
@media (max-width:520px){
  .tegels{gap:10px}
  .tegel{padding:16px 14px}
  .tegel-kop{font-size:18px}
  .tegel-tekst{display:none}
}
.tegel{
  display:grid;gap:6px;align-content:start;
  padding:clamp(18px,2vw,24px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease);
}
.tegel:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-2)}
@media (prefers-reduced-motion:reduce){.tegel:hover{transform:none}}
.tegel-kop{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:clamp(19px,1.8vw,23px);line-height:1.2;
}
.tegel-kop .ico{width:18px;height:18px;color:var(--clay);transition:transform .2s var(--ease)}
.tegel:hover .tegel-kop .ico{transform:translateX(3px)}
.tegel-tekst{font-size:15px;line-height:1.5;color:var(--mute)}

/* Strook onderaan elke pagina behalve de start en het contact: de vraag, en de weg verder. */
.verder{background:var(--deep);color:var(--on-deep);border-top:1px solid var(--line-deep);padding:clamp(40px,5.6vw,var(--s6)) 0}
.verder-in{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,var(--s6));align-items:end}
@media (max-width:760px){.verder-in{grid-template-columns:1fr;align-items:start}}
.verder-vraag{display:grid;gap:var(--s2);justify-items:start}
.verder-h{
  font-family:var(--serif);font-size:clamp(28px,3.8vw,44px);line-height:1.1;letter-spacing:-.025em;
  color:var(--on-deep);
}
.verder-h em{font-style:italic;color:var(--clay-soft)}
.verder-nav{display:grid;gap:var(--s2);justify-items:start}
.verder-volgende{
  display:grid;gap:4px;min-height:44px;padding-bottom:10px;
  border-bottom:1px solid var(--line-deep);transition:border-color .18s var(--ease);
}
.verder-volgende b{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,28px);color:var(--on-deep);
}
.verder-volgende .ico{width:18px;height:18px;color:var(--clay-soft);transition:transform .2s var(--ease)}
.verder-volgende:hover{border-color:var(--clay-lite)}
.verder-volgende:hover .ico{transform:translateX(3px)}
.verder-terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;color:var(--on-deep-mute)}
.verder-terug:hover{color:var(--clay-lite)}
.verder-terug .ico{width:16px;height:16px}
@media print{.verder,.tegels .ico{display:none}}