/* ==========================================================================
   Kapsterbreda.nl — Thuiskapster Judith Mattheussens — V2

   Dezelfde poster, veel beter gedrukt. Merkgeel + merkzwart + cream, Bungee
   als display-letter, Titillium Web als tekstletter, omkaderde blokken met
   2px rand en harde offset-schaduw, de vintage droogkapfoto in gele lijst.
   Geen ingrediënt is vervangen. Alles hieronder gaat over maatvoering,
   ritme, uitlijning, optische correctie, detaillering en beweging.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Kleur — ongewijzigd op twee toevoegingen na ---- */
  --brand:        #E2CC00;
  --brand-soft:   #FFF7CE;
  --brand-pale:   #FFFBE9;
  --brand-bright: #F2DE1F;
  --brand-deep:   #8E7F00;   /* NIEUW: schaduw-inkt waar geel geel raakt */
  --star:         #7E7100;   /* NIEUW: geel als sterglyph op wit, 4,94:1 */

  --ink:          #17140E;
  --ink-deep:     #211D14;
  --paper:        #FBF8F0;
  --sand:         #F4EEDF;
  --white:        #FFFFFF;

  --text:         #2B2620;
  --text-strong:  #3A342A;
  --text-muted:   #6B6456;
  --label:        #6E6300;   /* 5,74:1 op cream */

  --on-ink:       #D9D2C2;
  --on-ink-soft:  #C9C1AF;
  --on-ink-mut:   #B8B0A0;
  --on-ink-dim:   #8F8875;

  /* 1px = scheiding BINNEN een blok, 2px = de rand VAN een blok,
     3px = de gele lijst en de focusring. Meer diktes bestaan niet. */
  --edge:        2px;
  --edge-frame:  3px;
  --hairline:      #EDE6D4;
  --hairline-dark: rgba(247, 242, 230, 0.16);
  --line-mid:      #9C9280;  /* NIEUW: rand bedienbare elementen, 3,07:1 */

  --wa: #25D366;  --wa-dark: #1FBE5A;  --wa-ink: #0A2E19;  --wa-text: #0B7A3B;

  /* ---- Letter ---- */
  --font-display: 'Bungee', 'Bungee fallback', 'Titillium Web', system-ui, sans-serif;
  --font-body:    'Titillium Web', 'Titillium fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Negen maten, twee sporen, alles in rem zodat de browserletterinstelling
     van de bezoeker doorwerkt. Clamps lopen van 390px naar 1280px viewport. */
  --fs-label:   0.9375rem;                                       /* 15 vast */
  --fs-meta:    clamp(1rem,      0.973rem + 0.112vw, 1.0625rem); /* 16→17   */
  --fs-body:    clamp(1.0625rem, 1.008rem + 0.225vw, 1.1875rem); /* 17→19   */
  --fs-lead:    clamp(1.125rem,  1.043rem + 0.337vw, 1.3125rem); /* 18→21   */
  --fs-subhead: clamp(1.25rem,   1.141rem + 0.449vw, 1.5rem);    /* 20→24   */
  --fs-heading: clamp(1.625rem,  1.351rem + 1.124vw, 2.25rem);   /* 26→36   */
  --fs-title:   clamp(1.625rem,  1.187rem + 1.798vw, 2.625rem);  /* 26→42   */
  --fs-display: clamp(1.875rem,  1.218rem + 2.697vw, 3.375rem);  /* 30→54   */
  --fs-hero:    clamp(2rem,      1.288rem + 2.921vw, 3.625rem);  /* 32→58   */

  --lh-hero: 0.95;   --lh-display: 0.98; --lh-title: 1;   --lh-heading: 1.15;
  --lh-subhead: 1.3; --lh-lead: 1.5;     --lh-body: 1.6;  --lh-meta: 1.5;
  --lh-label: 1.2;

  --measure-body: 48ch;
  --measure-lead: 36ch;

  /* Bungee is signage: op grote maat te los, op kleine maat te krap.
     letter-spacing(px) = 0,96 − 0,0433 × font-size(px) */
  --bungee-a: 0.96px;
  --bungee-b: 0.0433;
  --track-label: 0.16em;
  --track-caps:  0.06em;

  /* ---- Maat ---- */
  --container: 1180px;
  --container-narrow: 900px;
  --gutter: 24px;

  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;

  --section-y-sm: clamp(40px, 5vw,   64px);
  --section-y:    clamp(56px, 6.5vw, 96px);
  --section-y-lg: clamp(80px, 9vw,  132px);

  /* Radius schaalt mee met het vlak. */
  --r-control:  6px;
  --r-block:   12px;
  --r-panel:   20px;
  --r-pill:   999px;

  /* ---- Schaduw: offset volgt het elementformaat, alpha is ALTIJD 1,
     en de inkt is de tegentoon van de VULLING van het element. ---- */
  --sh-1:  3px;
  --sh-2:  6px;
  --sh-3: 12px;

  --shade-ink:   var(--ink);
  --shade-brand: var(--brand);
  --shade-deep:  var(--brand-deep);

  --sh-float: 0 18px 40px -16px rgba(23, 20, 14, 0.38);
  --cap-nudge: 3px;

  /* ---- Beweging ---- */
  --e-out:    cubic-bezier(.22,.61,.36,1);
  --e-settle: cubic-bezier(.16,1,.3,1);
  --e-in:     cubic-bezier(.4,0,1,1);
  --e-inout:  cubic-bezier(.65,0,.35,1);
  --e-press:  cubic-bezier(.3,0,.1,1);

  --t-press:      90ms;
  --t-micro:     160ms;
  --t-micro-out: 110ms;
  --t-state:     240ms;
  --t-layout:    320ms;
  --t-enter:     520ms;
  --t-exit:      220ms;
  --stagger:      70ms;

  /* Hoogte van het logo in de kopbalk. De balkhoogte rekent hiermee, dus één
     variabele houdt die twee in de pas. */
  --logo-h: clamp(33px, 3.25vw, 40px);
}

/* Metriek-gelijke fallbacks: zonder deze verspringt elke alinea zodra de
   webletter binnenkomt. */
@font-face {
  font-family: 'Titillium fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Segoe UI'), local('Roboto');
  ascent-override: 113%; descent-override: 39%; line-gap-override: 0%; size-adjust: 96.3%;
}
@font-face {
  font-family: 'Bungee fallback';
  src: local('Arial Black'), local('Impact'), local('Arial Bold'), local('Arial');
  ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; size-adjust: 118%;
}

/* --sh-o animeerbaar maken; browsers zonder ondersteuning krijgen dezelfde
   eindwaarden, alleen zonder het uitschuiven bij de entree. */
@property --sh-o { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* --------------------------------------------------------------------------
   B. RESET & BASIS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] verloor van .btn{display:inline-flex}: de knop "Terug" stond
   zichtbaar in stap 1 van het afspraakpaneel. */
[hidden] { display: none !important; }

/* overflow-x: clip in plaats van hidden: clip maakt GEEN scrollcontainer, dus
   position: sticky op de kopbalk blijft werken. Nodig omdat er bij 200%
   browserletter nog een restje horizontale overflow overbleef waarvan geen enkel
   element de bron bleek te zijn - nagemeten: op geen van de pagina's steekt dan
   nog iets buiten de viewport, dus er valt niets weg te knippen. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: proportional-nums;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  display: flex; flex-direction: column; min-height: 100vh;
}

img, picture, video, svg { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
li, dd, figcaption, blockquote { text-wrap: pretty; }
h1, h2, h3, .display, .h1, .h2, .h3, .hero__title { text-wrap: balance; }
/* "MATTHEUSSENS" en "BEHANDELINGEN" zijn in Bungee zo breed dat ze bij een
   browserletter van 200% niet meer op één regel passen. Zonder deze regel
   worden ze afgekapt door de clip — tekstverlies, en dus een echte fout.
   Op normale maat verandert er niets: breken gebeurt alleen als het móet. */
.hero__title, .display, .h1, .filmband__title, .cta-panel__title,
.footer__banner span, .hours-band__title { overflow-wrap: break-word; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #5A5140; }
::selection { background: var(--brand); color: var(--ink); }

/* Nederlands heeft samenstellingen als 'gehandicaptenzorg'; zonder
   afbreekregels scheurt de regel open. Nooit in koppen. */
.prose p, .hero__lead, .review__text, .footer__text { hyphens: auto; hyphenate-limit-chars: 9 4 4; }

/* De radius hoorde niet in de focusregel: elementen zónder eigen radius
   sprongen bij tabben ineens op 3px. */
:focus-visible { outline: var(--edge-frame) solid var(--ink); outline-offset: 2px; }
.hero :focus-visible, .filmband :focus-visible, .section--inverse :focus-visible,
.card--inverse :focus-visible, .hours :focus-visible, .cta-panel :focus-visible,
.wa-panel :focus-visible, .reviews :focus-visible, .footer :focus-visible,
.sheet__head :focus-visible { outline-color: var(--brand); }
/* De skip-link verschijnt over de zwarte topbalk; een zwarte ring is daar
   onzichtbaar. (De ring wordt door outline-offset op de achtergrond ERONDER
   getekend, niet op het element zelf — daarom telt de topbalk, niet de knop.) */
.skip-link:focus-visible { outline-color: var(--brand); }

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: 200;
  transform: translateY(-160%);
  background: var(--ink); color: var(--brand);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-control);
  font-weight: 700; transition: transform var(--t-state) var(--e-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   C. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section      { padding-block: var(--section-y); }
.section--sm  { padding-block: var(--section-y-sm); }
.section--lg,
.section--cta { padding-block: var(--section-y-lg); }
.section--soft { background: var(--sand); }
.section--inverse { background: var(--ink); color: var(--white); }
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: var(--white); }
.section--rule { border-block: var(--edge) solid var(--ink); }
.section--rule-top { border-top: var(--edge) solid var(--ink); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(40px, 5vw, 64px); align-items: center; }
.split--top { align-items: start; }
main { flex: 1; }

.page-head { text-align: center; }
.u-center  { text-align: center; }
.u-mt      { margin-top: var(--sp-6); }
.u-mt-l    { margin-top: clamp(32px, 4vw, 48px); }
.u-mb-s    { margin-bottom: var(--sp-3); }
.u-mb-m    { margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   D. TYPOGRAFIE
   -------------------------------------------------------------------------- */
/* Eén gedeelde Bungee-regel met de optische correctie. De calc MOET hier
   staan en niet op :root: een custom property wordt ingevuld op het element
   waar hij gedeclareerd is. De fallback in var(--fs, 16px) is verplicht. */
.u-bungee, .hero__title, .h1, .display,
.counter__value, .filmband__title, .cta-panel__title, .hours-band__title,
.hours__heading, .footer__banner span, .price-row__price, .pricing__num,
.review__initial, .choice__price, .summary__val--price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs);
  letter-spacing: calc(var(--bungee-a) - var(--bungee-b) * var(--fs, 16px));
}
/* −0,04em is getest en te ver: bij MATTHEUSSENS raken de dwarsbalken van de
   dubbele T elkaar. Voor 65+ is het criterium niet "strak" maar
   "binnenvormen open"; de grens ligt rond −0,027em (= 58px). */

.hero__title {
  --fs: var(--fs-hero);
  line-height: var(--lh-hero);
  color: var(--white);
  margin: 0 0 var(--sp-5);
  /* Optische linkermarge: gemeten zijwit J 0,041em, M 0,069em, T 0,028em. */
  margin-left: -0.055em;
}
.hero__kicker {
  --fs: var(--fs-subhead);
  font-family: var(--font-display);
  display: block; font-size: var(--fs); line-height: var(--lh-subhead);
  letter-spacing: 0.08em;   /* bewuste uitzondering: dit is een gespatieerd label */
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.display, .h1 { --fs: var(--fs-display); line-height: var(--lh-display); margin: 0; }
.h1 { margin-bottom: var(--sp-4); }
.display--sm { --fs: var(--fs-title); line-height: var(--lh-title); }

.h2 {
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
  font-size: var(--fs-heading); line-height: var(--lh-heading);
  letter-spacing: -0.012em; max-width: 24ch; margin: 0 0 var(--sp-5);
}
.u-center .h2, .page-head .h2, .intro-block .h2 { max-width: none; }
.h3, .card__title {
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
  font-size: var(--fs-lead); line-height: 1.3; margin: 0 0 var(--sp-2);
}

/* Eyebrow van flex naar inline: als flex-item bleef het streepje links op
   regel 1 achter zodra het label afbrak. */
.eyebrow {
  display: block;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  line-height: var(--lh-label); color: var(--label);
  max-width: 40ch; margin: 0 0 var(--sp-4);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 24px; height: 2px; background: currentColor;
  margin-right: var(--sp-2);
  vertical-align: calc(0.346em - 1px);   /* op het kapmidden */
}
.eyebrow--plain::before { display: none; }
/* letter-spacing zet óók spatie NÁ de laatste letter; bij gecentreerde tekst
   staat het woord daardoor een halve trackingwaarde te ver naar links. */
.eyebrow--center { text-align: center; margin-inline: auto; padding-inline-start: var(--track-label); }
.hero .eyebrow, .section--inverse .eyebrow, .reviews .eyebrow { color: var(--brand); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.lead--center { margin-inline: auto; max-width: var(--measure-lead); color: var(--on-ink); text-align: center; }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-strong); max-width: var(--measure-body); }
.section--inverse .prose p { color: var(--on-ink); }

.hero__lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--on-ink); max-width: var(--measure-lead);
  margin: 0 0 var(--sp-6); font-style: italic;
}

.pullquote {
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink);
  font-weight: 700; font-style: italic;
  border-left: var(--edge-frame) solid var(--brand);
  padding-left: var(--sp-4);
  /* Stond op margin:0, waardoor er alleen de 16px van de alinea erboven
     overbleef. Een citaat met een gele balk ernaast is zwaar genoeg om eigen
     lucht te verdienen; de bovenmarge klapt samen met die 16px, dus dit is
     netto de afstand die je ziet. */
  margin: clamp(28px, 3.5vw, 40px) 0 0;
}

.intro-block__text {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--text-strong); font-weight: 600; margin: 0;
}

/* Hiërarchie zonder grootte: verschillen van 1-2px lezen niet als rangorde
   maar als slordigheid. */
.card__text  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-strong); margin: 0; }
.card__title { min-height: 2.6em; }   /* twee regels reserveren → gelijke start */
.card--inverse .card__text { color: var(--on-ink-soft); }

.review__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-strong); margin: 0 0 var(--sp-5); flex: 1; }
.review__name { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.review__initial {
  --fs: 1.125rem; color: var(--ink);
  /* compenseert de trailing spatie van letter-spacing */
  padding-inline-start: calc(var(--bungee-a) - var(--bungee-b) * 1.125rem);
}
.review__stars {
  /* Merkgeel haalt op wit 1,63:1 — als drager van de beoordeling te zwak,
     en juist deze doelgroep heeft verminderd contrastgevoel. Eén stap
     dieper goud haalt 4,94:1 en leest nog steeds als de merkkleur. */
  color: var(--star); font-size: var(--fs-lead); margin-bottom: var(--sp-4);
  /* ★ zit in géén van beide letters en komt uit een systeemfont */
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
  letter-spacing: 0.12em;
}

.hours__day  { color: var(--white); font-weight: 600; font-size: var(--fs-body); }
.hours__time { color: var(--brand); font-weight: 600; font-size: var(--fs-body); white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0; }
.hours__heading    { --fs: var(--fs-meta); color: var(--brand); }
.hours-band__title { --fs: var(--fs-heading); color: var(--ink); line-height: var(--lh-heading); word-break: break-word; }
.hours-band__note  { font-size: var(--fs-meta); color: #4A4318; max-width: 34ch; margin: var(--sp-3) 0 0; }

/* Toelichting onder een prijsgroep. Zelfde tint als de andere zachte noot op de
   pagina, maar rechts uitgelijnd met de lijst zelf: hij hoort bij de prijzen,
   niet bij de kop erboven. */
/* De belofte "alles zit erbij" staat boven de lijst en niet eronder: het is het
   argument waarmee je de prijzen leest, niet een voetnoot erna. */
.allin {
  background: var(--sand); border-left: var(--edge-frame) solid var(--brand);
  border-radius: var(--r-control);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-meta); color: var(--text-strong); line-height: var(--lh-body);
}
.allin b { color: var(--ink); }

/* Tweede regel onder een behandelnaam: waar de prijs voor geldt. */
.price-row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.price-row__sub { font-size: var(--fs-meta); color: var(--text-muted); font-weight: 400; }
/* --brand-deep haalde op het merkgeel maar 2,48:1; dat is een schaduwkleur,
   geen tekstkleur. --text-strong haalt 7,55:1 en blijft zachter dan de naam. */
.price-row--feature .price-row__sub { color: var(--text-strong); }
.price-row__unit { font-size: var(--fs-label); font-weight: 700; margin-left: 3px; }

.counter__value {
  --fs: clamp(2.875rem, 2.0rem + 3.6vw, 3.625rem);
  line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums;
}
.counter__digit { display: inline-block; width: 1ch; text-align: center; }
.counter__label {
  font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--on-ink); margin-top: var(--sp-2);
  padding-inline-start: var(--track-caps);
}

/* .filmband__title en .footer__banner span erfden line-height 1.6 → 70px
   regelafstand voor een 44px-kop. Dat was een bug, geen smaak. */
.filmband__title     { --fs: var(--fs-title); line-height: var(--lh-title); color: var(--white); margin: 0; }
.cta-panel__title    { --fs: var(--fs-title); line-height: var(--lh-title); color: var(--white); margin: 0 0 var(--sp-4); }
.footer__banner span { --fs: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: var(--lh-title); color: var(--brand); }

.pricing__group-title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-subhead); line-height: 1.2; color: var(--ink); margin: 0; }
.pricing__num { --fs: var(--fs-label); margin-top: var(--cap-nudge); }

/* Bungee heeft géén tabulaire cijfers (gemeten in de TTF: '0'=0,727em,
   '1'=0,601em). Een vaste kolom lost de rafelige rechterrand op zonder de
   letter te raken. */
.price-row__name  { font-size: var(--fs-body); font-weight: 600; color: var(--ink); min-width: 0; }
.price-row__price { --fs: var(--fs-subhead); color: var(--ink); min-width: 3.9em; text-align: right; flex: none; }
.price-row__cta { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--label); display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; }
/* Op het gele "Compleet"-blok haalt --label maar 3,73:1; ink haalt 11,26:1. */
.pricelist--accent .price-row__cta { color: var(--ink); }
.price-row--feature .price-row__name  { font-size: var(--fs-lead); font-weight: 700; }
.price-row--feature .price-row__price { --fs: var(--fs-heading); }

/* Kleinste tekst: ondergrens 15px, overal. */
.topbar               { font-size: var(--fs-label); letter-spacing: 0.02em; }
.footer__heading      { font-size: var(--fs-label); letter-spacing: var(--track-label); font-weight: 700; text-transform: uppercase; color: var(--brand); }
.footer__text,
.footer__list         { font-size: var(--fs-meta); line-height: var(--lh-meta); }
.footer__bottom       { font-size: var(--fs-label); }
.footer__map-badge    { font-size: var(--fs-label); font-weight: 700; }
.footer__map-fallback { font-size: var(--fs-meta); }
.contact-card__label  { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--label); }
.contact-card__value  { font-size: var(--fs-body); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.callout__text        { font-size: var(--fs-lead); color: var(--text-strong); font-weight: 600; margin: 0 0 var(--sp-5); }
.wa-panel__title      { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-subhead); line-height: 1.25; margin: 0 0 var(--sp-3); }
.wa-panel__text       { color: var(--on-ink); font-size: var(--fs-meta); margin: 0 0 var(--sp-5); }
.cta-panel__text      { font-size: var(--fs-lead); color: var(--on-ink); margin: 0 auto var(--sp-6); max-width: var(--measure-lead); }

.sheet__title  { font-weight: 700; font-size: var(--fs-body); line-height: 1.2; }
.sheet__step   { font-size: var(--fs-label); color: var(--on-ink-mut); }
.sheet__h      { font-family: var(--font-body); font-size: var(--fs-subhead); font-weight: 700; color: var(--ink); margin: 0 0 var(--sp-1); }
.sheet__sub    { font-size: var(--fs-meta); color: var(--text-muted); margin: 0 0 var(--sp-5); }
.sheet__hint   { text-align: center; margin: var(--sp-4) 0 0; font-size: var(--fs-label); color: var(--label); }
.choice__name  { font-size: var(--fs-meta); font-weight: 700; color: var(--ink); line-height: 1.25; }
.choice__price { --fs: var(--fs-label); color: var(--ink); }
.chip          { font-size: var(--fs-meta); font-weight: 600; }
.daypart b     { display: block; font-size: var(--fs-meta); }
.daypart span  { display: block; font-size: var(--fs-label); opacity: 0.8; margin-top: 2px; }
.field-label   { display: block; font-size: var(--fs-meta); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); }
.field         { font-size: 16px; }   /* ondergrens: daaronder zoomt iOS in */
.field::placeholder { color: var(--text-muted); }
.summary__key  { color: var(--text-muted); font-size: var(--fs-meta); }
.summary__val  { color: var(--ink); font-weight: 700; font-size: var(--fs-meta); text-align: right; }
.summary__val--price { --fs: var(--fs-meta); font-weight: 400; }
.linkish       { font-size: var(--fs-meta); }
.btn           { font-size: var(--fs-body); }
.header__cta   { font-size: var(--fs-meta); }
.nav__link     { font-size: var(--fs-meta); }

/* Titillium heeft tabulaire cijfers al; de fallbackletter niet, en zonder
   deze regel springt de kolom tijdens het laden. */
.hours, .pricelist, .summary, .topbar, .counter__value { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   E. VORM, RAND EN SCHADUW
   Principe: de schaduw ligt op de pagina en beweegt nooit; alleen het
   element beweegt. De schaduwinkt is de tegentoon van de VULLING.
   -------------------------------------------------------------------------- */
.skip-link, .btn, .header__logo, .nav__link, .nav-toggle, .icon-btn,
.sheet__close, .chip, .daypart, .field, .footer__map-badge { border-radius: var(--r-control); }

.hero__figure, .card, .gallery__item, .hours, .review, .pricelist, .callout,
.contact-card, .footer__map, .choice, .summary { border-radius: var(--r-block); }

.cta-panel, .wa-panel { border-radius: var(--r-panel); }
.sheet__panel { border-radius: var(--r-panel) var(--r-panel) 0 0; }

.nav__link::after, .filmband__rule { border-radius: var(--r-pill); }
.card__icon, .contact-card__icon, .review__initial, .pricing__num,
.choice__check, .confirm__badge, .wa-panel__icon { border-radius: 50%; }

.card, .gallery__item, .review, .pricelist, .callout, .contact-card,
.summary, .icon-btn, .nav-toggle, .field, .sheet__panel, .hours { border: var(--edge) solid var(--ink); }
.choice, .chip, .daypart { border: var(--edge) solid var(--line-mid); }
.hero__figure { border: var(--edge-frame) solid var(--brand); }
.footer       { border-top: var(--edge-frame) solid var(--brand); }
.footer__map  { border: var(--edge) solid var(--brand-deep); }
.price-row    { border-bottom: 1px solid var(--hairline); }
.hours__row   { border-bottom: 1px solid var(--hairline-dark); }
.footer__bottom { border-top: 1px solid var(--hairline-dark); }
.summary__row { border-bottom: 1px dashed var(--hairline); }
.cta-panel, .wa-panel { border: var(--edge) solid var(--ink); }

/* hoe ver */
.btn--primary, .btn--on-dark, .icon-btn, .fab                         { --sh-o: var(--sh-1); }
.card, .review, .pricelist, .callout, .contact-card, .summary, .hours { --sh-o: var(--sh-2); }
.hero__figure, .cta-panel, .wa-panel                                  { --sh-o: var(--sh-3); }

/* in welke inkt */
.card, .pricelist, .pricelist--accent, .callout,
.contact-card, .summary, .btn--primary, .fab { --shade: var(--shade-ink); }
.card--inverse, .review, .icon-btn,
.cta-panel, .wa-panel, .hours                { --shade: var(--shade-brand); }
.hero__figure, .btn--on-dark                 { --shade: var(--shade-deep); }
/* het urenpaneel staat op over-mij op cream (donker vlak → geel) maar op de
   homepage ín de gele band, waar merkgeel op merkgeel zou versmelten */
.hours-band .hours                           { --shade: var(--shade-deep); }

/* en de box-shadow zelf staat maar één keer in het hele stylesheet */
.card, .review, .pricelist, .callout, .contact-card, .summary, .hours,
.hero__figure, .cta-panel, .wa-panel,
.btn--primary, .btn--on-dark, .icon-btn, .fab {
  box-shadow: var(--sh-o) var(--sh-o) 0 var(--shade);
}

/* De ENIGE zachte schaduwen: dingen die écht boven de pagina zweven. */
.header[data-stuck="true"] { box-shadow: var(--sh-float); }
.sheet__panel { box-shadow: var(--sh-float); }
[data-sheet-foot] { box-shadow: 0 -14px 18px -10px rgba(23, 20, 14, 0.16); }

/* Merkgeel op cream haalt 1,54:1: op over-mij staat de gele lijst op cream en
   is nauwelijks zichtbaar. Een 2px zwarte contour laat de lijst zichzelf
   definiëren zonder één gele pixel op te geven. */
.hero__figure--about { box-shadow: 0 0 0 var(--edge) var(--ink), var(--sh-o) var(--sh-o) 0 var(--shade); }

/* --------------------------------------------------------------------------
   F. KNOPPEN
   Element −2/−2 met offset d+2 zet de schaduw op exact dezelfde
   paginapositie als in rust: de kier groeit, de schaduw blijft liggen.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--sp-4) var(--sp-5); gap: var(--sp-2);
  border: var(--edge) solid transparent;
  font-family: var(--font-body); font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  /* Stond op nowrap. De labels zijn kort genoeg om normaal nooit te vouwen,
     maar bij 200% browserletter duwde nowrap de knop uit het scherm. */
  white-space: normal; text-wrap: balance;
}
.btn svg { flex: none; }

.btn, .icon-btn, .contact-card {
  transition: background-color var(--t-state) var(--e-out),
              color var(--t-state) var(--e-out),
              border-color var(--t-state) var(--e-out),
              transform var(--t-micro-out) var(--e-out),
              --sh-o var(--t-micro-out) var(--e-out);
}
.btn--primary { background: var(--brand); color: var(--ink); border-color: var(--ink); }
.btn--on-dark { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.btn--secondary   { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(247, 242, 230, 0.4); }
.btn--wa          { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); }
.btn--wa-outline  { background: var(--white); color: var(--wa-text); border-color: var(--wa-text); }

@media (hover: hover) {
  .btn--primary:hover, .btn--on-dark:hover, .icon-btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    --sh-o: calc(var(--sh-1) + 2px);
    transition-duration: var(--t-micro);
  }
  .btn--primary:hover { background: var(--ink); color: var(--brand); --shade: var(--shade-brand); }
  .btn--on-dark:hover { background: var(--white); border-color: var(--white); --shade: var(--shade-brand); }
  .icon-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
  .btn--ghost-light:hover { border-color: var(--white); }
  .btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); }
  .btn--wa-outline:hover { background: var(--wa-text); color: var(--white); }
  .contact-card:hover {
    transform: translate(-2px, -2px); --sh-o: calc(var(--sh-2) + 2px);
    background: var(--brand-pale); transition-duration: var(--t-micro);
  }
}
.btn--primary:active, .btn--on-dark:active, .icon-btn:active:not(:disabled) {
  transform: translate(var(--sh-1), var(--sh-1)); --sh-o: 0px;
  transition-duration: var(--t-press); transition-timing-function: var(--e-press);
}
.contact-card:active { transform: translate(var(--sh-2), var(--sh-2)); --sh-o: 0px; transition-duration: var(--t-press); }
.icon-btn:disabled { opacity: 0.4; --sh-o: 0px; cursor: default; }

/* Vlakke knoppen bewegen niet — dat IS de hiërarchie, geen omissie. */
.btn--secondary, .btn--ghost-light, .btn--wa, .btn--wa-outline { box-shadow: none; }
.btn--secondary:hover  { background: var(--ink); color: var(--white); }
.btn--secondary:active { background: var(--ink); color: var(--brand); transition-duration: var(--t-press); }

/* Er bestond géén :disabled-regel. Een 78-jarige tikte op een felgele knop
   en er gebeurde niets, zonder enige uitleg. */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--sand); color: var(--text-muted);
  border-color: var(--line-mid); box-shadow: none; cursor: not-allowed; transform: none;
}
.btn--on-dark:disabled { background: transparent; color: var(--on-ink-dim); border-color: var(--on-ink-dim); }

/* Pijlglyphs eindigen ~2px vóór hun kader. */
.btn:has(> svg:last-child)  { padding-right: 18px; }
.btn:has(> svg:first-child) { padding-left: 18px; }

.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   G. TOPBALK + HEADER
   -------------------------------------------------------------------------- */
.topbar { background: var(--ink); color: #F2ECDC; }
.topbar__inner { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; justify-content: center; padding-block: var(--sp-2); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__item::before { content: "◆"; color: var(--brand); }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 240, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--edge) solid var(--ink);
  transition: box-shadow var(--t-state) var(--e-out);
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  /* Bij 200% browserletter passen logo, afspraakknop en hamburger niet meer naast
     elkaar op 320px. Omvouwen maakt de balk hoger, en dat is bij die instelling
     precies wat je wilt - horizontaal moeten scrollen is de fout. */
  flex-wrap: wrap;
  padding-block: var(--sp-2); position: relative;
  min-height: calc(var(--logo-h) + 28px);
}
/* Het logo stond 10px rechts van de kantlijn van de site: 4px eigen padding
   plus 7px zijwit in de SVG. */
.header__logo { display: flex; align-items: center; padding: var(--sp-2) 0; margin-left: -7px; flex: none; min-height: 44px; padding-inline: 9px; margin-inline-start: -9px; }
.header__spacer { flex: 1; }

/* De menuknop staat in de DOM vóór de nav zodat je er bij tabben meteen ín
   het geopende menu belandt; de visuele plek zetten we hier terug. */
.nav { order: 1; }
.header__cta { order: 2; }
.nav-toggle { order: 3; }

/* Het originele logo van de klant: de gefotografeerde tekening van de
   kappersstoel. De grijze fotoachtergrond is eruit gemaskeerd op helderheid,
   met een zachte overgang zodat de anti-aliasing van de lijnen blijft. De
   tekening zelf is onaangeroerd — dit is uitknippen, geen hertekenen. */
.header__logo img {
  height: var(--logo-h); width: auto;
  transition: transform var(--t-state) var(--e-out); transform-origin: left center;
}
.header[data-stuck="true"] .header__logo img { transform: scale(.92); }
[data-header-sentinel] { height: 1px; margin-bottom: -1px; }

/* Donkere inkt valt weg op een zwarte footer, dus daar staat dezelfde
   tekening in cream. Geen los vlakje meer nodig. */
.footer__logo { display: inline-flex; flex: none; }
.footer__logo img { height: 34px; width: auto; }
.footer__wordmark { display: flex; flex-direction: column; line-height: 1; margin-left: var(--sp-3); min-width: 0; }
/* Bij 200% browserletter was 'DE THUISKAPSTER' breder dan een 320px-scherm. */
.footer__wordmark b, .footer__wordmark small { overflow-wrap: break-word; }
.footer__wordmark b { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; color: var(--paper); }
.footer__wordmark small { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em; color: var(--on-ink-mut); margin-top: 5px; }

.sheet__brand-logo { display: inline-flex; flex: none; }
.sheet__brand-logo img { height: 26px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; padding: var(--sp-3); min-height: 48px;
  /* "Home" was 38px breed; voor een publiek met minder fijne motoriek is
     44px de ondergrens die je wilt aanhouden. */
  min-width: 44px; justify-content: center;
  display: flex; align-items: center;
  color: var(--ink); text-decoration: none;
}
.nav__link::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 5px;
  height: 3px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-state) var(--e-out);
}
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* De gele onderstreping haalt 1,54:1 op cream. Die blijft (goedgekeurde taal),
   maar de paginastatus krijgt een tweede, compliant signaal. */
.nav__link[aria-current="page"] { font-weight: 700; color: var(--ink); }
.nav__link:not([aria-current="page"]) { font-weight: 600; color: var(--text-strong); }
.nav__link:hover { background: var(--brand-pale); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: var(--white); color: var(--ink); cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }

.header__cta { min-height: 48px; padding: var(--sp-3) var(--sp-4); min-width: 0; }
.header__cta-short { display: none; }

/* --------------------------------------------------------------------------
   H. HERO
   -------------------------------------------------------------------------- */
.hero { background: var(--ink); color: #F7F2E6; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -80px; right: -80px;
  width: 340px; height: 340px; pointer-events: none;
  background: radial-gradient(circle, rgba(226, 204, 0, 0.16), transparent 70%);
}
.hero__inner {
  position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(40px, 5vw, 64px); align-items: center;
  padding-block: var(--section-y);
}
.hero__figure { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-deep); }
.hero__figure img, .hero__figure video, .hero__figure picture {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%;
}
.hero__figure--about img, .hero__figure--about video { object-position: center; }

/* --------------------------------------------------------------------------
   H2. DE HERO OP MOBIEL — ÉÉN POSTERBLOK ("de lijst wordt de kop")
   Toevoegen aan /assets/css/site.css, aan het eind van sectie H (HERO),
   direct vóór "I. SFEERBAND". Geen bestaande regel hoeft te worden verwijderd.

   Waarom de tekst NIET op de foto staat: gemeten op hero-1280.jpg haalt wit
   op het beeld gemiddeld 1,89:1 (slechtste plek 1,03:1) en zelfs onder een
   scrim van 0,75 blijft het op de lichtste plek steken op 3,51:1. Dit is een
   high-key foto; het filmband-patroon werkt hier dus aantoonbaar niet. De
   letter raakt het beeld daarom wél, maar staat erop nergens.
   -------------------------------------------------------------------------- */

/* De zin stond cursief tussen aanhalingstekens omdat hij een citaat was. Hij
   is nu de tweede helft van de kop, dus geen citaat meer — en 100 tekens
   cursief op 18px is voor 65-plussers de zwaarste regel van de pagina. */
.hero__lead { font-style: normal; }

/* Het label staat in gewone schrijfwijze in de HTML (schermlezers spellen een
   volledig kapitaal woord soms letter voor letter) en wordt hier gekapitaliseerd. */
.hero__kicker { text-transform: uppercase; }

/* Op desktop bestaat de plaat niet: display:contents geeft .hero__copy en
   .hero__media ongewijzigd terug als de twee kolommen van de hero-grid. */
.hero__plate { display: contents; }

/* De naam krijgt een eigen span zodat de optische linkermarge van de H1 op
   mobiel naar de naamregel kan verhuizen. Op desktop verandert er niets. */
.hero__name { display: block; }

@media (max-width: 900px) {

  /* ---- 1. De plaat: foto, label en tekst binnen één gele lijst ---- */
  .hero__inner {
    display: block;
    padding-block: clamp(24px, 6vw, 40px) var(--section-y);
  }

  .hero__plate {
    display: flex;
    flex-direction: column;
    /* Boven ~510px zou de foto anders bijna een half scherm hoog worden;
       de poster houdt zijn eigen maat en gaat in het midden staan. */
    max-width: 460px;
    margin-inline: auto;
    background: var(--ink-deep);
    border: var(--edge-frame) solid var(--brand);
    border-radius: var(--r-block);
    overflow: hidden;
    --sh-o: var(--sh-3);
    --shade: var(--shade-deep);
    box-shadow: var(--sh-o) var(--sh-o) 0 var(--shade);
  }

  .hero__media { order: -1; }

  /* ---- 2. De foto: de lijst eromheen is nu de lijst van het hele blok ---- */
  .hero__figure {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* 700 × 784 is het beeldformaat zelf: op mobiel wordt er niets meer
       weggesneden, waar 4/5 links en rechts een strook kostte. */
    aspect-ratio: 700 / 784;
  }
  .hero__figure img { object-position: center; }

  /* ---- 3. Het tekstdeel ---- */
  .hero__copy {
    --pad: clamp(16px, 5vw, 22px);
    display: flex;
    flex-direction: column;
    padding: 0 var(--pad) var(--pad);
  }

  /* Gemeten: Bungee zet "Mattheussens" op 8,362 × de lettergrootte. Op een
     scherm van 320px is er 234px tekstbreedte, dus past 27px en breekt 32px
     het woord middenin af ("MATTHEUSSE / NS"). Vandaar de vloeiende
     ondergrens; vanaf 390px komt gewoon var(--fs-hero) er weer uit. */
  .hero__title {
    --fs: clamp(1.5rem, 8.2vw, var(--fs-hero));
    margin: 0 0 var(--sp-4);
  }
  .hero__name { margin-left: -0.055em; }

  /* ---- 4. De gele lijst verdikt zich tot draagvlak voor het label. Het
     label raakt de onderrand van de foto: beeld en letter zitten aan elkaar
     vast in plaats van elkaar af te wisselen. Gemeten: 13,673 × de
     lettergrootte, dus 15px past met ruimte over op 320px. ---- */
  .hero__kicker {
    --fs: clamp(0.9375rem, 4.3vw, 1.0625rem);
    background: var(--brand);
    color: var(--ink);
    margin: 0 calc(-1 * var(--pad)) var(--sp-4);
    padding: 11px var(--pad) 12px;
    letter-spacing: calc(var(--bungee-a) - var(--bungee-b) * var(--fs));
    line-height: 1.2;
  }

  .hero__lead {
    color: var(--on-ink);
    max-width: none;
    margin: 0 0 var(--sp-5);
  }

  /* ---- 5. Knoppen: onder elkaar, elk over de volle breedte van de plaat ---- */
  .btn-row { gap: var(--sp-3); }
  .hero__copy .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   I. SFEERBAND
   -------------------------------------------------------------------------- */
.filmband {
  position: relative; height: clamp(240px, 44vh, 470px);
  overflow: hidden; background: var(--ink);
  border-block: var(--edge) solid var(--ink);
}
.filmband__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.filmband__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(23, 20, 14, 0.25), rgba(23, 20, 14, 0.62)); }
.filmband__content {
  position: relative; z-index: 5; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); text-align: center; padding: var(--sp-5);
}
.filmband__rule { display: block; width: 64px; height: 4px; background: var(--brand); }

/* --------------------------------------------------------------------------
   J. USP-KAARTEN
   -------------------------------------------------------------------------- */
.intro-block { max-width: 640px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.card { background: var(--white); padding: var(--sp-5); }
.card__icon {
  width: 52px; height: 52px; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); color: var(--ink);
}
.card--inverse { background: var(--ink); }
.card--inverse .card__icon { background: var(--brand); }
.card--inverse .card__title { color: var(--white); }

/* --------------------------------------------------------------------------
   K. TELLERS
   -------------------------------------------------------------------------- */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); text-align: center; --stagger: 90ms; }

/* --------------------------------------------------------------------------
   L. GALERIJ
   aspect-ratio:1 overschreef grid-row: span 2 en gaf 78px rafelrand.
   -------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--sp-3); }
.gallery__item { position: relative; margin: 0; overflow: hidden; background: #EFE9DA; }
.gallery__item img, .gallery__item picture { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { aspect-ratio: 16 / 10; }
/* De staande foto is 2:3 en dus iets langer dan zijn vak; de uitsnede gaat er
   daarom onderaan (tafel) vanaf en niet bovenaan (gezichten). */
.gallery__item--tall img { object-position: center 35%; }

/* --------------------------------------------------------------------------
   M. OPENINGSTIJDEN
   -------------------------------------------------------------------------- */
.hours-band { background: var(--brand); border-block: var(--edge) solid var(--ink); }
.hours-band__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-6); align-items: center; padding-block: var(--section-y-lg);
}
.hours-band__title { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0; }
.hours-band__title svg { flex: none; }
.hours { background: var(--ink); padding: var(--sp-2) var(--sp-5); margin: 0; }
.hours__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-4); }
.hours__row:last-of-type { border-bottom: 0; }
.hours__heading { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) 0 var(--sp-2); }

/* --------------------------------------------------------------------------
   N. REVIEWS
   De vervaagde achtergrond was 96×144px, werd 15× uitgerekt en zat onder een
   scrim van 72%. Er kwam niets doorheen dat de kaarten niet al afdekten.
   -------------------------------------------------------------------------- */
.reviews { position: relative; overflow: hidden; background: var(--ink); border-block: var(--edge) solid var(--ink); }
.reviews__bg {
  position: absolute; inset: -24px; z-index: 0;
  width: calc(100% + 48px); height: calc(100% + 48px);
  object-fit: cover; object-position: center 30%;
  filter: blur(7px); transform: scale(1.04);
}
.reviews__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23, 20, 14, 0.72), rgba(23, 20, 14, 0.55) 40%, rgba(23, 20, 14, 0.72));
}
.reviews__inner { position: relative; z-index: 2; padding-block: var(--section-y); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: clamp(24px, 4vw, 40px); }
/* Op Over mij staan er geen carrouselknoppen naast, dus trok space-between
   de eyebrow en de kop naar tegenoverliggende hoeken. Gecentreerd stapelen. */
.reviews__head.u-center { display: block; text-align: center; }
.reviews__title { color: var(--white); margin: 0; }
.reviews__nav { display: flex; gap: var(--sp-3); }

.icon-btn {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--ink); cursor: pointer;
}

.review-scroller {
  display: flex; gap: var(--sp-5); overflow-x: auto;
  scroll-snap-type: x mandatory; padding: var(--sp-1) 2px var(--sp-5);
  scrollbar-width: thin; scrollbar-color: var(--brand) rgba(255, 255, 255, 0.12);
}
.review-scroller > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 80vw, 380px); }   /* 280px was op een 320px-scherm breder dan het kader */

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.review { background: var(--white); padding: var(--sp-6); margin: 0; display: flex; flex-direction: column; }
.review__by { display: flex; align-items: center; gap: var(--sp-3); }
.review__initial {
  width: 42px; height: 42px; flex: none; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   O. PRIJZEN
   -------------------------------------------------------------------------- */
.pricing { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.pricing__group-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.pricing__num { width: 30px; height: 30px; flex: none; background: var(--ink); color: var(--brand); display: flex; align-items: center; justify-content: center; }

.pricelist { background: var(--white); overflow: hidden; }
.pricelist--accent { background: var(--brand); }

.price-row {
  position: relative; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); min-height: 56px; padding: var(--sp-5);
  background: none; border: 0; border-bottom: 1px solid var(--hairline);
  text-align: left; cursor: pointer;
  /* De prijsrijen zijn <a> geworden in plaats van <button>; zonder dit krijgen
     ze de standaard onderstreping en linkkleur van de browser. */
  text-decoration: none; color: inherit;
  transition: background-color var(--t-micro-out) var(--e-out);
}
.price-row:last-child { border-bottom: 0; }
/* Rijen lichten op, ze zweven niet. */
.price-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ink); transform: scaleY(0); transform-origin: center;
  transition: transform var(--t-micro-out) var(--e-out);
}
.pricelist--accent .price-row::before { width: 6px; }
.price-row__right { display: flex; align-items: center; gap: var(--sp-4); }
.price-row__cta svg { transition: transform var(--t-micro) var(--e-out); }
@media (hover: hover) {
  .price-row:hover { background: var(--brand-pale); transition-duration: var(--t-micro); }
  .price-row:hover::before { transform: scaleY(1); transition-duration: var(--t-micro); }
  .price-row:hover .price-row__cta svg { transform: translateX(3px); }
  .pricelist--accent .price-row:hover { background: var(--brand-bright); }
}
.price-row:focus-visible { outline-offset: -3px; }   /* overflow:hidden knipte hem weg */
.price-row:focus-visible::before { transform: scaleY(1); }
.price-row:active { background: var(--brand-soft); transition-duration: var(--t-press); }
.price-row--feature { min-height: 64px; padding-block: var(--sp-5); }

.callout { text-align: center; background: var(--sand); padding: clamp(28px, 4vw, 44px); }

/* --------------------------------------------------------------------------
   P. CONTACT
   -------------------------------------------------------------------------- */
.contact-list { display: flex; flex-direction: column; gap: var(--sp-4); --stagger: 60ms; }
.contact-card { display: flex; align-items: center; gap: var(--sp-4); background: var(--white); padding: var(--sp-5); min-height: 64px; text-decoration: none; }
.contact-card__icon { width: 46px; height: 46px; flex: none; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; color: var(--ink); }

.wa-panel { background: var(--ink); padding: clamp(32px, 4vw, 48px); color: var(--white); text-align: center; }
.wa-panel__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-5); background: var(--wa); display: flex; align-items: center; justify-content: center; }
.wa-panel__actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   Q. SLOT-CTA
   -------------------------------------------------------------------------- */
.cta-panel { background: var(--ink); padding: clamp(36px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; }
.cta-panel::before {
  content: ""; position: absolute; bottom: -70px; left: -40px;
  width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(circle, rgba(226, 204, 0, 0.18), transparent 70%);
}
.cta-panel > * { position: relative; }

/* --------------------------------------------------------------------------
   R. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-ink); }
.footer__inner { padding-block: var(--section-y) var(--sp-6); }
.footer__banner { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.footer__cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--sp-6); }
/* Een 1fr-track krimpt standaard niet onder de min-content van zijn inhoud.
   Bij 200% browserletter maakte dat de hele voettekstkolom breder dan het scherm. */
.footer__cols > * { min-width: 0; }
.footer__brand { display: flex; align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }
/* Zonder min-width:0 blijft een flex-item op zijn max-content-breedte staan en
   vouwt de tekst erin nooit. Bij 200% browserletter stak 'DE THUISKAPSTER'
   daardoor 38px buiten een 320px-scherm. */
.footer__brand > * { min-width: 0; }
.footer__text { margin: 0 0 var(--sp-4); color: var(--on-ink-mut); }
.footer__heading { margin: 0 0 var(--sp-4); }
.footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__list li { display: flex; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-2); }
.footer__list svg { flex: none; margin-top: var(--cap-nudge); }
.footer__list a { color: var(--on-ink); overflow-wrap: anywhere; display: block; padding-block: var(--sp-3); }
.footer__list a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   WERKGEBIED
   Hier stond een link naar Google Maps met het huisadres als zoekopdracht. Wie
   erop klikte kreeg dus het woonhuis te zien, terwijl het blok "werkgebied"
   beloofde. Nu gewoon één regel tekst met een speld ernaast.
   -------------------------------------------------------------------------- */
.workarea {
  margin: 0; display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--ink-deep); border: var(--edge) solid var(--brand-deep);
  border-radius: var(--r-block); padding: var(--sp-4) var(--sp-5);
}
.workarea__pin { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.workarea__title {
  display: block; color: var(--on-ink); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.workarea__note {
  display: block; color: var(--on-ink-mut); font-size: var(--fs-meta);
  margin-top: var(--sp-2);
}

/* Adreskaart zonder link: geen aanwijsvinger, geen hoverstaat. */
.contact-card--plain { cursor: default; }

.footer__map-badge { position: absolute; left: var(--sp-3); bottom: var(--sp-3); background: var(--ink); color: var(--brand); padding: var(--sp-2) var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer__map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--on-ink-mut); text-align: center; padding: var(--sp-4); }

.footer__bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between; color: var(--on-ink-dim);
}
.footer__bottom a { color: var(--on-ink-dim); }
.footer__bottom a:hover { color: var(--brand); }
.footer__navlinks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
/* "Home" was 38px breed in de footer; met wat zijruimte haalt elke link 44px. */
.footer__navlinks a { display: inline-block; padding: var(--sp-3) var(--sp-2); min-width: 44px; text-align: center; }

/* Bouwerscredit. Bewust een toon zachter dan de rest van de voettekst: het hoort
   te lezen als een ondertekening, niet als een vierde menu-item. De link zelf
   krijgt wél de gewone voettekstkleur, anders is hij niet als link te zien. */
.footer__credit { flex-basis: 100%; order: 3; color: var(--on-ink-mut); }
.footer__credit a {
  color: var(--on-ink-dim);
  /* Onderstreping in de tekstkleur zelf: een lichtere lijn haalde maar 1,57:1 en
     dan is de link alleen nog aan kleur te herkennen (WCAG 1.4.1). */
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: 10px;   /* 24px regel + 2×10 = 44px tikdoel */
  display: inline-block;
}
.footer__credit a:hover,
.footer__credit a:focus-visible { color: var(--brand); }

/* --------------------------------------------------------------------------
   S. DE ZWEVENDE WHATSAPP-KNOP
   Was het enige element zónder ontwerptaal én de enige oneindige animatie op
   de site (fabPulse animeerde box-shadow eeuwig — WCAG 2.2.2). Nu een pil in
   de ontwerptaal, met zichtbare tekst, die één keer arriveert.
   -------------------------------------------------------------------------- */
.fab {
  position: fixed; right: 18px; z-index: 40;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--sp-5) 0 15px;
  border-radius: var(--r-pill);
  background: var(--wa); color: var(--wa-ink);
  border: var(--edge) solid var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-meta);
  text-decoration: none; white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.94); pointer-events: none;
  transition: opacity 280ms var(--e-settle), transform 280ms var(--e-settle),
              background-color var(--t-state) var(--e-out),
              --sh-o var(--t-press) var(--e-press);
}
.fab[data-in="true"] { opacity: 1; transform: none; pointer-events: auto; }
.fab svg { fill: var(--wa-ink); }   /* was #fff op #25D366 = 1,98:1 → 7,47:1 */
@media (hover: hover) { .fab:hover { background: var(--wa-dark); } }
.fab[data-in="true"]:active { transform: translate(var(--sh-1), var(--sh-1)); --sh-o: 0px; }
@keyframes fabKnock {
  0%, 100% { transform: translateY(0) }
  30%      { transform: translateY(-5px) }
  55%      { transform: translateY(0) }
  75%      { transform: translateY(-2px) }
}
.fab[data-knock="true"] { animation: fabKnock 620ms var(--e-out) 1; }
@media (max-width: 380px) { .fab { font-size: var(--fs-label); padding: 0 var(--sp-4) 0 var(--sp-3); } }

/* --------------------------------------------------------------------------
   T. AFSPRAAKPANEEL
   -------------------------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.sheet__backdrop {
  position: absolute; inset: 0; background: rgba(23, 20, 14, 0.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 0; padding: 0; cursor: pointer;
  animation: sheetFade var(--t-state) var(--e-out) both;
}
/* Vaste kop, scrollend midden, plakkende voet — anders is "Afspraak
   aanvragen" onbereikbaar zodra het toetsenbord het halve scherm inneemt. */
.sheet__panel {
  position: relative; width: 100%; max-width: 560px;
  max-height: 94dvh; display: flex; flex-direction: column;
  background: var(--paper); border-bottom: 0;
  animation: sheetUp 380ms var(--e-settle) 40ms both;
}
@keyframes sheetUp   { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes sheetFade { from { opacity: 0 } to { opacity: 1 } }
/* Er was géén exit: het paneel knipperde weg. */
.sheet[data-closing] .sheet__backdrop { animation: sheetFadeOut var(--t-exit) var(--e-in) both; }
.sheet[data-closing] .sheet__panel    { animation: sheetDown    var(--t-exit) var(--e-in) both; }
@keyframes sheetDown    { to { transform: translateY(20px); opacity: 0 } }
@keyframes sheetFadeOut { to { opacity: 0 } }

@keyframes stepInFwd  { from { opacity: 0; transform: translateX(14px) }  to { opacity: 1; transform: none } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }
.sheet__body[data-dir="fwd"]  [data-step]:not([hidden]) { animation: stepInFwd  300ms var(--e-settle) both; }
.sheet__body[data-dir="back"] [data-step]:not([hidden]) { animation: stepInBack 300ms var(--e-settle) both; }

.sheet__head { flex: none; z-index: 2; background: var(--ink); color: var(--white); padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.sheet__brand { display: flex; align-items: center; gap: var(--sp-3); }
.sheet__close { width: 48px; height: 48px; flex: none; background: rgba(247, 242, 230, 0.12); border: 0; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sheet__close:hover { background: rgba(247, 242, 230, 0.24); }

/* Baan wordt ink: geel op #E7E0CE haalde 1,54:1 — je zag de voortgang niet. */
.sheet__progress { flex: none; position: relative; overflow: hidden; height: 5px; background: var(--ink); }
.sheet__progress-bar {
  position: absolute; inset: 0; width: 100%; height: 100%; background: var(--brand);
  transform-origin: left center; transform: scaleX(var(--p, .3333));
  transition: transform var(--t-layout) var(--e-inout) 60ms;
}

.sheet__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--sp-5); }
[data-sheet-foot] {
  position: sticky; bottom: 0; background: var(--paper); margin-top: var(--sp-5);
  /* De onderste knop belandde op een iPhone met home-indicator in de veegzone. */
  padding-block: var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
}
.sheet__foot { display: flex; gap: var(--sp-3); }
.sheet__foot .btn { flex: 1; min-width: 0; }   /* zonder min-width duwt de langste knop het paneel uit beeld op 320px */
.sheet__foot .btn--back { flex: 0 0 auto; }
.sheet__hint a { color: var(--wa-text); font-weight: 700; display: inline-block; padding: var(--sp-3) var(--sp-1); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* Zeven behandelingen in twee kolommen liet de duurste optie als wees
   onderaan staan. Volle breedte maakt hem meteen de visuele hoofdkeuze. */
.choice-grid > :last-child { grid-column: 1 / -1; }
.choice { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-height: 72px; padding: var(--sp-4); text-align: left; background: var(--white); cursor: pointer; transition: border-color var(--t-micro-out) var(--e-out), background-color var(--t-micro-out) var(--e-out); }
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"] { border-color: var(--ink); background: var(--brand-soft); }
.choice__check { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 22px; height: 22px; background: var(--ink); display: none; align-items: center; justify-content: center; }
.choice[aria-pressed="true"] .choice__check { display: flex; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.chip { min-height: 48px; padding: var(--sp-3) var(--sp-4); background: var(--white); color: var(--ink); cursor: pointer; transition: background-color var(--t-micro-out) var(--e-out), border-color var(--t-micro-out) var(--e-out), color var(--t-micro-out) var(--e-out); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

.daypart-row { display: flex; gap: var(--sp-3); }
.daypart { flex: 1; min-height: 60px; padding: var(--sp-4); text-align: center; background: var(--white); color: var(--ink); cursor: pointer; transition: background-color var(--t-micro-out) var(--e-out), border-color var(--t-micro-out) var(--e-out), color var(--t-micro-out) var(--e-out); }
.daypart:hover { border-color: var(--ink); }
.daypart[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

.field { width: 100%; min-height: 52px; padding: var(--sp-4); background: var(--white); color: var(--ink); }
.field-group { display: flex; flex-direction: column; gap: var(--sp-4); }
.field-label .req { color: #A31212; }
.field-label .opt { color: var(--text-muted); font-weight: 400; }

.confirm { text-align: center; }
.confirm__badge { width: 72px; height: 72px; margin: 6px auto var(--sp-4); background: var(--brand); display: flex; align-items: center; justify-content: center; }
.summary { text-align: left; background: var(--white); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); }
.summary__row:last-child { border-bottom: 0; }
.linkish { background: none; border: 0; padding: var(--sp-3); min-height: 48px; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.linkish:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   U. BEWEGING — scroll-choreografie
   RIJZEN (tekst) · ZETTEN (omkaderde blokken) · TREKKEN (lijnaccenten).
   Groepen worden als groep geobserveerd, dus de stagger kan puur in CSS.
   -------------------------------------------------------------------------- */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity var(--t-enter) var(--e-settle),
              transform var(--t-enter) var(--e-settle),
              --sh-o 420ms var(--e-settle) 140ms;
}
.js [data-reveal].is-visible,
.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }

.js [data-reveal-group].is-visible > :nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-group].is-visible > :nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
.js [data-reveal-group].is-visible > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.js [data-reveal-group].is-visible > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.js [data-reveal-group].is-visible > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.js [data-reveal-group].is-visible > :nth-child(n+6) { transition-delay: calc(var(--stagger) * 5); }

/* Een foto die in zijn eigen gele lijst omhoog schuift, ziet eruit alsof hij
   loslaat van de lijst. Beeld krijgt alleen opacity. */
.js .gallery[data-reveal], .js .hero__figure[data-reveal] { transform: none; }

/* ZETTEN: het blok landt, dan schuift zijn schaduw eronder vandaan. */
.js [data-reveal]:not(.is-visible),
.js [data-reveal-group]:not(.is-visible) > * { --sh-o: 0px; }

/* TREKKEN: de eyebrow-lijn tekent zichzelf. */
.js [data-reveal] .eyebrow::before,
.js [data-reveal-group] .eyebrow::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--e-settle) 160ms;
}
.js [data-reveal].is-visible .eyebrow::before,
.js [data-reveal-group].is-visible .eyebrow::before { transform: scaleX(1); }

/* Direct tonen (herstelde scrollpositie, deeplink, vangnet). */
.js [data-instant], .js [data-instant] > * { transition: none !important; transition-delay: 0ms !important; }

/* --------------------------------------------------------------------------
   V. BEELD — BEWUST ONBEHANDELD
   De fotografie en de video blijven exact zoals in v1: geen filter, geen
   kleurwash, geen duotone, geen korrel. Alleen de uitsnede en de lijst
   eromheen zijn vormgeving; het beeld zelf is van de klant.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   W. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav {
    display: none; position: absolute; top: calc(100% + 2px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch;
    background: var(--paper); border: var(--edge) solid var(--ink);
    border-radius: var(--r-block); padding: var(--sp-3); gap: 2px;
    box-shadow: var(--sh-float);
  }
  /* Bij 200% browserletter viel het laatste menu-item buiten beeld en was het
     niet te bereiken: het menu staat absoluut, dus de pagina scrollt er niet naartoe. */
  .nav[data-open="true"] { display: flex; }
  .nav { max-height: 68dvh; overflow-y: auto; overscroll-behavior: contain; }
  .nav__link { padding: 14px var(--sp-3); font-size: var(--fs-body); min-height: 52px; }
  .nav__link { justify-content: flex-start; }
  .nav__link::after { left: 12px; right: auto; width: 22px; }
  .nav-toggle { display: inline-flex; }
  .header__cta-full { display: none; }
  .header__cta-short { display: inline; }
  .header__cta { padding-inline: var(--sp-3); }
}

@media (max-width: 860px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__cols > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .reviews__head { flex-direction: column; align-items: stretch; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: none; }
  /* Eén kolom: het staande vak mag niet liggend worden, anders blijft er van een
     2:3-portretfoto een strook romp over. 4/5 ligt dicht bij de desktopverhouding. */
  .gallery__item--tall { grid-row: auto; aspect-ratio: 4 / 5; }
  /* Prijsrij: naam en prijs blijven op één regel, het woord "Boek" gaat weg
     (de hele rij is toch klikbaar), de pijl blijft. */
  .price-row { flex-wrap: nowrap; gap: var(--sp-3); padding-inline: var(--sp-4); }
  .price-row__right { width: auto; justify-content: flex-end; gap: var(--sp-3); }
  .price-row__price { --fs: var(--fs-lead); }
  .price-row__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .footer__bottom { justify-content: flex-start; }
  /* De pil zelf rekent al met de veilige zone; deze reservering deed dat niet,
     waardoor hij op een iPhone met home-indicator over de voettekst viel. */
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  /* backdrop-filter op een schermbrede sticky balk hertekent bij elke
     scrollstap; op oudere telefoons kost dat echt iets. */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
}

@media (max-width: 640px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-grid > :last-child { grid-column: auto; }
}

@media (max-width: 620px) { .counters { grid-template-columns: 1fr; gap: var(--sp-6); } }

@media (max-width: 560px) {
  .topbar__item--extra { display: none; }
  .choice-grid { grid-template-columns: 1fr; }
  /* De reservering van twee regels is alleen zinvol in het meerkoloms raster. */
  .card__title { min-height: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hours { padding-inline: var(--sp-4); }
  .hours__row { gap: var(--sp-3); }
  /* Het e-mailadres brak af als "…gmail.co / m". Iets krapper opgezet past
     het in één regel; onder de 15px-ondergrens komen we niet. */
  .contact-card { padding-inline: var(--sp-4); gap: var(--sp-3); }
  .contact-card__icon { width: 40px; height: 40px; }
  .contact-card__value { font-size: var(--fs-label); }
}

/* --------------------------------------------------------------------------
   X. REDUCED MOTION
   'Reduced motion' betekent GEEN VERPLAATSING, niet GEEN OVERGANG. Alles op
   .001ms zetten is zelf een toegankelijkheidsfout: dan verdwijnt de
   verzachting die helpt volgen dát er iets veranderde.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal], .js [data-reveal-group] > * {
    transform: none; transition: opacity 260ms linear; transition-delay: 0ms !important;
  }
  .js [data-reveal] .eyebrow::before,
  .js [data-reveal-group] .eyebrow::before { transform: none; transition: none; }

  /* Hover-feedback mag niet verdwijnen, alleen van vorm veranderen: haal je
     de lift weg zónder vervanging, dan weet niemand meer wat klikbaar is. */
  .btn, .icon-btn, .contact-card, .fab {
    transition: background-color var(--t-state) linear,
                color var(--t-state) linear,
                border-color var(--t-state) linear;
  }
  .btn:hover, .btn:active, .icon-btn:hover, .icon-btn:active,
  .contact-card:hover, .contact-card:active,
  .fab[data-in="true"]:active { transform: none; }
  .btn:hover, .btn:active, .icon-btn:hover, .icon-btn:active { --sh-o: var(--sh-1); }
  .contact-card:hover, .contact-card:active { --sh-o: var(--sh-2); }
  .price-row::before { transition: none; }
  .price-row:hover .price-row__cta svg { transform: none; }

  .sheet__panel { animation: sheetFade var(--t-state) var(--e-out) both; }
  .sheet[data-closing] .sheet__panel { animation: sheetFadeOut 160ms linear both; }
  .sheet__body[data-dir] [data-step]:not([hidden]) { animation: sheetFade 160ms linear both; }
  /* voortgang blijft: dat is toestandsinformatie, geen decoratie */
  .sheet__progress-bar { transition: transform 140ms linear 0ms; }

  .fab { transform: none; transition: opacity 200ms linear; }
  .fab[data-knock="true"] { animation: none; }
  .fab:active { transform: none; }
  .header .logo, .header[data-stuck="true"] .logo { transition: none; transform: none; }
  .filmband__media { display: none; }
}

/* --------------------------------------------------------------------------
   Y. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .topbar, .fab, .sheet, .filmband, .footer__map { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section--inverse, .hero, .footer, .cta-panel, .wa-panel, .reviews { background: #fff !important; color: #000 !important; }
  .section--inverse h1, .section--inverse h2, .hero__title, .cta-panel__title,
  .reviews__title, .footer__banner span { color: #000 !important; }
  .price-row__cta { display: none; }
}