/* ==========================================================================
   SPOTWASH v2 — "Verde"
   Ondergrond en goud zijn bemonsterd uit de foto van het Lamborghini-embleem
   (assets/img/work-lambo-badge.jpg): de lak levert de groenschaal, het embleem
   het goud. Het merkgoud #D4AE36 uit het SPOTWASH-wordmark blijft de kern.
   Eén doorlopende achtergrond achter de hele site, secties zijn transparant.
   ========================================================================== */

/* Zelf gehost. Bespaart een render-blokkerende stylesheet van
   fonts.googleapis.com plus een tweede origin (fonts.gstatic.com).
   Alleen de latin-subset; de rest was dood gewicht.
   Bron: Google Fonts, Oswald en Poppins, beide SIL Open Font License 1.1. */

/* Oswald in plaats van Anton. Anton heeft maar één gewicht en dat is een heel
   zwaar gewicht; op koppen, kaarttitels en pillen tegelijk werd de pagina er
   log van. Oswald is dezelfde smalle hoofdletter-familie maar variabel, dus
   koppen kunnen op 500 staan en alleen de herokop op 600. anton-400.woff2
   staat nog in assets/fonts als je terug wilt. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(../fonts/oswald-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/poppins-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* lak, van diepste schaduw naar aangelicht vlak */
  --paint-900: #071412;
  --paint-850: #0a1413;
  --paint-800: #0a1b19;
  --paint-700: #0e2320;
  --paint-600: #142927;
  --paint-500: #1b3634;
  --paint-400: #274b48;
  --paint-300: #366260;
  --paint-200: #427878;
  --paint-100: #5b9490;

  /* goud, van diepe schaduw naar speculaire highlight */
  --gold-700: #5a4714;
  --gold-600: #8c6e20;
  --gold-500: #b8922c;
  --gold-400: #d4ae36;
  --gold-300: #e8c24a;
  --gold-200: #f0d477;
  --gold-100: #fcea90;

  --gold: var(--gold-300);
  --on-gold: #0a1211;

  --ink:        #edf3f2;
  --ink-muted:  #a6bab7;
  --ink-faint:  #93a8a5;
  --line:       rgba(168, 210, 205, .09);
  --line-firm:  rgba(168, 210, 205, .22);

  --danger: #ff8a7a;
  --ok:     #6fd7a4;

  /* gloed. Twee sterktes: rustig voor tekst, vol voor de hero. */
  --glow-soft:
    0 0 12px rgba(212, 174, 54, .18),
    0 0 34px rgba(212, 174, 54, .10);
  --glow-full:
    0 0 10px rgba(252, 234, 144, .40),
    0 0 30px rgba(232, 194, 74, .26),
    0 0 78px rgba(184, 146, 44, .16);
  --glow-edge: 0 0 0 1px rgba(212, 174, 54, .30), 0 8px 34px -10px rgba(212, 174, 54, .40);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --step: clamp(78px, 10vw, 152px);

  /* De zwevende glaspil. --head-space is de verticale ruimte die hij inneemt
     en waar de pagina's die niet met een hero beginnen onder wegblijven. */
  --head-h: 62px;
  --head-gap: 14px;
  /* Alle bedieningselementen in de kop delen deze hoogte, dus ook één
     inspringing boven en onder. Stond op 5,8px bij de boekknop, 14,9px bij de
     taalwissel en 16,1px bij het merk; dat verschil is wat er ongelijk uitzag. */
  --head-ctl: 44px;
  --head-space: calc(var(--head-h) + var(--head-gap) * 2);
  --dur-head: .34s;   /* het glas dat verschijnt bij het eerste scrollen */

  --ease: ease;                                    /* hover en kleurwissels */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrees en exits */
  /* Beweging over het scherm: versnelt en vertraagt. Niet voor de
     lichtstrepen; die zijn constante beweging en draaien lineair. */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur: .22s;
  --dur-fast: .16s;   /* indrukfeedback, moet direct voelen */
  --dur-sheen: 1.1s;  /* lichtstreep: wordmark en knoppen delen deze duur */

  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Geen sectie krijgt een eigen vlak. De .atmos-laag is de enige ondergrond. */
  background: var(--paint-900);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--gold-300); color: var(--on-gold);
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. De doorlopende achtergrond --------------------------------------- */
/* Vaste laag achter alles. De losse gradients kruisvervagen op scrollpositie,
   zodat de site één oppervlak is in plaats van een stapel secties. */
.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(150% 100% at 50% 40%, rgba(66, 120, 120, .20), transparent 70%),
    var(--paint-900);
}
.atmos__layer {
  position: absolute;
  inset: -10%;
  opacity: 0;
  will-change: opacity;
  transition: opacity .9s linear;
}
.atmos__layer--base {
  opacity: 1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(66, 120, 120, .50), transparent 64%),
    radial-gradient(90% 60% at 12% 8%, rgba(212, 174, 54, .13), transparent 58%),
    linear-gradient(180deg, var(--paint-800) 0%, var(--paint-900) 58%);
}
.atmos__layer--mid {
  background:
    radial-gradient(100% 70% at 82% 30%, rgba(74, 134, 132, .56), transparent 62%),
    radial-gradient(80% 60% at 20% 72%, rgba(212, 174, 54, .12), transparent 62%),
    linear-gradient(180deg, var(--paint-700) 0%, var(--paint-900) 70%);
}
.atmos__layer--gilt {
  background:
    radial-gradient(110% 80% at 50% 108%, rgba(232, 194, 74, .26), transparent 58%),
    radial-gradient(80% 60% at 74% 18%, rgba(54, 98, 96, .58), transparent 66%),
    linear-gradient(180deg, var(--paint-900) 0%, var(--paint-800) 100%);
}
/* Fijne korrel tegen banding in de gradients. Vast, nooit meescrollend. */
.atmos__grain {
  position: absolute; inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* <picture> is alleen een omhulsel voor de srcset-keuze en hoort geen eigen
   doos te maken; de layout blijft van de <img> zelf.

   De tweede regel is niet optioneel. Met display:contents worden de kinderen
   van picture zelf grid- of flexitems, en dan blijkt <source> geen UA-default
   display:none te hebben: hij wordt geblokkeerd tot een echt item en pakt een
   volle cel. Gemeten in de collage op de homepage: "SOURCE display=block
   box=200x200" naast de img, waardoor elke rij van twee kolommen nog maar één
   foto liet zien met een gat ernaast. */
picture { display: contents; }
picture > source { display: none; }

/* --- 4. Typografie ------------------------------------------------------- */
.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  /* Oswald staat krapper op elkaar dan Anton, dus iets meer ruimte tussen de
     letters en tussen de regels. */
  letter-spacing: .015em;
  line-height: 1.02;
  margin: 0;
}
.d-hero  { font-size: clamp(2.7rem, 8vw, 6.4rem); font-weight: 600; letter-spacing: .01em; }
.d-page  { font-size: clamp(2.3rem, 6.4vw, 4.8rem); }
.d-sec   { font-size: clamp(1.65rem, 3.4vw, 2.8rem); }
.d-card  { font-size: clamp(1.12rem, 1.8vw, 1.4rem); }

p { margin: 0 0 1em; }
.lede { font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--ink-muted); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.muted-soft { color: var(--ink-faint); }
.gold { color: var(--gold-300); }

/* Verguld: goudverloop in de letter zelf plus een lichte halo eromheen.
   Alleen op displaymaat. Nooit op lopende tekst, daar vreet gloed leesbaarheid. */
.gilt {
  position: relative;
  background-image: linear-gradient(
    97deg,
    var(--gold-500) 0%,
    var(--gold-400) 22%,
    var(--gold-100) 46%,
    var(--gold-300) 62%,
    var(--gold-500) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(212, 174, 54, .28))
          drop-shadow(0 2px 10px rgba(0, 0, 0, .55))
          drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}
/* Eenmalige lichtstreep over het goud, zoals licht dat over lak trekt.
   Geen oneindige lus: speelt bij binnenkomst en opnieuw bij hover. */
.gilt--sheen { background-size: 220% 100%; background-position: 100% 0; }
.js .gilt--sheen.is-lit { animation: sheen var(--dur-sheen) linear forwards; }
@media (hover: hover) and (pointer: fine) {
  .gilt--sheen:hover { animation: sheen var(--dur-sheen) linear; }
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Zonder background-clip:text zou verguld tekst onzichtbaar zijn.
   Dan terug naar egaal goud met dezelfde halo. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gilt {
    background-image: none;
    color: var(--gold-300);
    text-shadow: var(--glow-soft);
    filter: none;
  }
}

/* Doorlopende gloed over de herokop. Anders dan de eenmalige streep: deze
   loopt heen en weer en stopt niet. Alternate maakt er een schuivend licht van
   in plaats van een steeds herhaalde veeg in dezelfde richting.
   JS zet hem op pause zodra hij buiten beeld staat of de tab verborgen is. */
.js .gilt--loop {
  background-size: 260% 100%;
  animation: sheen-loop 3.4s linear infinite alternate;
}
.js .gilt--loop.is-paused { animation-play-state: paused; }
@keyframes sheen-loop {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .17em;
  color: var(--gold-400);
  text-transform: uppercase;
}
.label {
  display: block;
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px;
}
.req { color: var(--gold-300); }

/* --- 5. Layout ----------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
[id] { scroll-margin-top: calc(var(--head-space) + 20px); }
/* De header staat vast en telt niet meer mee in de stroom, dus houdt de
   pagina er zelf ruimte voor vrij. De hero is de uitzondering: die haalt
   die ruimte weer weg zodat de foto tot de bovenrand van het scherm loopt. */
main { padding-block-start: var(--head-space); }
main > .hero:first-child { margin-block-start: calc(var(--head-space) * -1); }
.section { padding-block: var(--step); position: relative; }
.section--tight { padding-block: clamp(44px, 6vw, 78px); }
/* Geen scheidingslijn tussen secties. De ruimte ertussen en de doorlopende
   achtergrond doen het werk al; een lijn leest als een witte rand en breekt
   precies het oppervlak dat we heel willen houden. */
.section--ruled { position: relative; }
.center { text-align: center; }
.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 60px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: 15px; }

/* --- 6. Knoppen ---------------------------------------------------------- */
.btn {
  --btn-bg: linear-gradient(178deg, var(--gold-200) 0%, var(--gold-300) 42%, var(--gold-500) 100%);
  --btn-fg: var(--on-gold);
  --btn-bd: transparent;
  --btn-glow: var(--glow-edge);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; min-height: 48px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-glow);
  font-weight: 600; font-size: .94rem; text-decoration: none; cursor: pointer;
  overflow: hidden;
  /* Transform snel in beide richtingen: indrukken en loslaten moeten allebei
     direct voelen. De rest mag rustiger. */
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease), opacity var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: translateY(0) scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn__ic { width: 17px; height: 17px; flex: none; }

/* Zelfde lichtstreep als over het wordmark, nu over de gouden knoppen.
   Speelt eenmalig bij het openen van een pagina en opnieuw bij hover.
   Alleen transform beweegt, dus dit blijft op de compositor. */
.btn::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(255, 255, 255, .34) 47%,
    rgba(255, 255, 255, .72) 50%,
    rgba(255, 255, 255, .34) 53%,
    transparent 60%
  );
  transform: translate3d(-42%, 0, 0);
}
/* Op een witte knop is een witte band onzichtbaar; daar loopt er een warme
   schaduw overheen in plaats van een highlight. Op de doorzichtige varianten
   een gouden band, want wit zou daar als vuil leesbaar zijn. */
.btn--light::after {
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(140, 110, 32, .16) 47%,
    rgba(140, 110, 32, .34) 50%,
    rgba(140, 110, 32, .16) 53%,
    transparent 60%
  );
}
.btn--ghost::after,
.btn--quiet::after {
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(240, 212, 119, .16) 47%,
    rgba(240, 212, 119, .40) 50%,
    rgba(240, 212, 119, .16) 53%,
    transparent 60%
  );
}
.js .btn.is-lit::after { animation: btn-sheen var(--dur-sheen) linear; }
@media (hover: hover) and (pointer: fine) {
  .js .btn:hover::after { animation: btn-sheen var(--dur-sheen) linear; }
}
@keyframes btn-sheen {
  /* Het pseudo-element is 180% van de knopbreedte (inset -40% aan beide
     kanten). Bij 42% staat de lichtband op t=0 net buiten de linkerrand en
     op t=1 net buiten de rechter, en is hij 5% tot 87% van de duur in beeld.
     Bij de eerdere 65% was dat maar 21% tot 74%: een halve seconde niets. */
  from { transform: translate3d(-42%, 0, 0); }
  to   { transform: translate3d(42%, 0, 0); }
}

.btn--ghost {
  --btn-bg: rgba(8, 16, 15, .55);
  --btn-fg: var(--gold-200);
  --btn-bd: rgba(212, 174, 54, .40);
  --btn-glow: none;
  backdrop-filter: blur(6px);
}
.btn--quiet {
  --btn-bg: rgba(168, 210, 205, .07);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-firm);
  --btn-glow: none;
}
.btn--quiet:hover { background: rgba(168, 210, 205, .13); filter: none; box-shadow: none; }
.btn--wide { width: 100%; }
.btn--lg { padding: 17px 34px; min-height: 56px; font-size: 1rem; }
.btn.is-busy { pointer-events: none; opacity: .7; }
.btn.is-busy .btn__label::after {
  content: ""; display: inline-block; width: 1em; text-align: left;
  animation: dots 1.1s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* --- 7. Header ----------------------------------------------------------- */
/* De balk is een zwevende glaspil, geen bandje dat over de volle breedte
   ligt. Daardoor kan de herofoto tot aan de bovenrand van het scherm door-
   lopen: de header staat erboven in plaats van ervoor. */
.site-head {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
  padding-block: var(--head-gap);
  /* De header beslaat de volle breedte maar mag alleen op de pil zelf
     klikken opvangen; de rest van de strook hoort bij de hero eronder. */
  pointer-events: none;
}
/* Leesbaarheid in ruststand. Zonder glas moet de tekst het van de foto
   winnen, dus ligt er een zachte verduistering over de bovenrand. Die
   kruist uit zodra het glas verschijnt, anders stapelen ze op elkaar. */
.site-head::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: calc(var(--head-space) + 46px);
  background: linear-gradient(180deg, rgba(5, 12, 11, .52), rgba(5, 12, 11, .22) 46%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-head) var(--ease-out);
}
.site-head[data-head="top"]::before { opacity: 1; }

/* De pil hoeft zich niet aan de tekstkolom te houden. Door hem breder te
   laten worden en dichter naar de schermrand te laten lopen, passen de zeven
   menu-items op meer schermbreedtes naast elkaar en klapt het menu pas in
   wanneer het echt niet meer gaat. */
.site-head__shell { pointer-events: none; max-width: 1440px; padding-inline: clamp(12px, 2.4vw, 34px); }

.site-head__bar {
  /* Eigen stapelcontext, anders valt de speculaire laag hieronder terug op
     de context van .site-head en verdwijnt hij achter de pil. */
  position: relative; isolation: isolate; pointer-events: auto;
  display: flex; align-items: center; gap: 22px;
  min-height: var(--head-h);
  padding-inline: clamp(14px, 1.5vw, 24px);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-firm);
  /* Vloeibaar glas: een verticaal verloop van licht naar donker over de
     lakkleur, een lichte bovenrand van binnen en een donkere onderrand.
     Dat randenpaar is wat een vlak vlak in een gebogen oppervlak verandert. */
  background:
    linear-gradient(180deg, rgba(168, 210, 205, .10), rgba(7, 20, 18, .30) 58%, rgba(5, 12, 11, .42)),
    rgba(8, 16, 15, .52);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
          backdrop-filter: blur(22px) saturate(1.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 18px 44px -26px rgba(0, 0, 0, .82);
  transition:
    background-color var(--dur-head) var(--ease-out),
    border-color var(--dur-head) var(--ease-out),
    box-shadow var(--dur-head) var(--ease-out),
    transform var(--dur-head) var(--ease-out),
    -webkit-backdrop-filter var(--dur-head) var(--ease-out),
    backdrop-filter var(--dur-head) var(--ease-out);
}
/* De speculaire streep langs de bovenrand. Kort, breed uitgesmeerd en
   alleen zichtbaar als het glas er is; dit is het detail dat het van glas
   naar vloeibaar glas tilt. */
.site-head__bar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 190% at 50% -70%, rgba(255, 255, 255, .16), transparent 58%),
    radial-gradient(60% 140% at 12% -30%, rgba(240, 212, 119, .13), transparent 62%);
  opacity: 1;
  transition: opacity var(--dur-head) var(--ease-out);
}

/* Ruststand boven de hero: het glas is er wel, maar dun. De foto loopt tot de
   bovenrand van het scherm door en blijft door de pil heen zichtbaar in plaats
   van erdoor afgesneden te worden. Helemaal transparant kan niet: dan verliest
   de navigatie het van een lichte lucht in de foto. Zonder JS blijft het
   hierbij, en dat is een stand die overal leesbaar is. */
.site-head[data-head="top"] .site-head__bar {
  background:
    linear-gradient(180deg, rgba(168, 210, 205, .07), rgba(7, 20, 18, .16) 58%, rgba(5, 12, 11, .24)),
    rgba(8, 16, 15, .30);
  border-color: rgba(168, 210, 205, .13);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
          backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.site-head[data-head="top"] .site-head__bar::before { opacity: .45; }
/* Het glas komt binnen terwijl de pil zich een fractie samentrekt. Alleen
   transform, dus geen herberekening van de layout. */
.js .site-head[data-head="lifted"] .site-head__bar { transform: scale(.986); }

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; flex: none; }
.brand__mark { font-family: var(--font-display); font-size: 1.42rem; letter-spacing: .02em; }
.brand__tag { font-family: var(--font-display); font-size: .5rem; letter-spacing: .09em; color: var(--gold-500); margin-top: 3px; }
.brand__logo { display: block; height: 36px; width: auto; transform-origin: left center; }

/* Groeit vanuit het midden open bij het laden, net als .reveal maar dan met
   schaal in plaats van een verticale schuif: dit is het enige element dat
   bezoekers zien voordat er iets anders op de pagina staat. */
.js .reveal-scale { transform: scale(.55); }
.js .reveal.reveal-scale.is-in { transform: scale(1); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: clamp(10px, 1.5vw, 22px); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; display: block; padding: 8px 2px;
  /* Een label mag nooit over twee regels breken: dan groeit de pil mee en
     springt de hele header een regel omlaag. Past het niet, dan neemt het
     uitklapmenu hieronder het over. */
  white-space: nowrap;
  font-size: .79rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
/* De actieve pagina krijgt een stip in plaats van een onderstreping. Een
   lijn onder de tekst botst met de ronding van de pil. */
.nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--gold-300); box-shadow: var(--glow-soft);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.nav__link[aria-current="page"] { color: var(--gold-300); text-shadow: var(--glow-soft); }
.nav__link[aria-current="page"]::after { opacity: 1; transform: none; }
.head__side { display: flex; align-items: center; gap: 10px; flex: none; margin-inline-start: auto; }
/* De boekknop is elders op de pagina 48px hoog met 14px verticale padding. In
   een pil van 62px liet dat maar 5,8px over aan weerszijden, waardoor de knop
   tegen het glas aan leek te staan. */
.site-head .btn {
  min-height: var(--head-ctl);
  padding-block: 0; padding-inline: 24px;
  font-size: .9rem;
}

.langswitch {
  display: inline-flex; align-items: center;
  background: rgba(168, 210, 205, .07);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-pill); padding: 3px;
}
.site-head .langswitch { min-height: var(--head-ctl); }
.site-head .langswitch button { min-height: calc(var(--head-ctl) - 8px); padding-block: 0; }
.langswitch button {
  border: 0; background: transparent; color: var(--ink-faint);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.langswitch button[aria-pressed="true"] { background: var(--gold-300); color: var(--on-gold); }

.navtoggle {
  display: none; width: var(--head-ctl); height: var(--head-ctl);
  align-items: center; justify-content: center;
  background: rgba(168, 210, 205, .07);
  border: 1px solid var(--line-firm); border-radius: var(--r-pill); cursor: pointer;
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease);
}
.navtoggle:active { transform: scale(.94); }
.navtoggle svg { width: 19px; height: 19px; }
.navtoggle .navtoggle__x { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__x { display: block; }
.navtoggle[aria-expanded="true"] .navtoggle__bars { display: none; }
.navtoggle[aria-expanded="true"] { background: rgba(212, 174, 54, .16); }

@media (max-width: 1080px) {
  .has-navjs .navtoggle { display: inline-flex; }
  /* Het uitklapmenu hangt onder de pil en volgt exact zijn breedte, want
     het is een kind van de pil. Vandaar absoluut en niet fixed. */
  .has-navjs .nav {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline: 0;
    margin: 0; padding: 6px 22px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-firm);
    /* Bijna dicht, en bewust niet afhankelijk van backdrop-filter: de pil
       eromheen heeft er zelf al een, en een genest achtergrondfilter krijgt
       niet de pagina maar de pil als ondergrond. Het gevolg was een paneel
       waar de herotitel dwars doorheen las. */
    background:
      linear-gradient(180deg, rgba(168, 210, 205, .07), rgba(9, 22, 20, .55) 40%, rgba(6, 14, 13, .75)),
      rgb(9, 18, 17);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 26px 60px -30px rgba(0, 0, 0, .9);
    transform: translateY(-8px) scale(.97);
    transform-origin: 50% 0;
    opacity: 0; visibility: hidden;
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility var(--dur);
  }
  .has-navjs .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

  /* Zonder JavaScript is er geen knop om het paneel te openen, dus staat de
     navigatie er gewoon als lijst in de kop en scrollt de kop mee. Dit was een
     harde fout: .nav stond onvoorwaardelijk op visibility: hidden, waardoor de
     site onder 1080px zonder JS helemaal geen navigatie had. */
  html:not(.has-navjs) .site-head { position: static; }
  html:not(.has-navjs) .site-head::before { display: none; }
  html:not(.has-navjs) main { padding-block-start: 0; }
  html:not(.has-navjs) main > .hero:first-child { margin-block-start: 0; }
  html:not(.has-navjs) .site-head__bar { flex-wrap: wrap; padding-block: 10px; }
  html:not(.has-navjs) .nav {
    position: static; flex: 1 0 100%; margin-top: 10px; padding: 0;
    border: 0; background: none; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { padding: 14px 0; font-size: .95rem; border-bottom: 1px solid var(--line); }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__link::after { left: auto; right: 2px; top: 50%; bottom: auto; margin: -2px 0 0; }
  .head__side .btn { display: none; }
}
@media (max-width: 560px) {
  /* --head-ctl was 38px: de hamburger en de taalknoppen bleven daarmee net
     onder de 40px-vuistregel voor een comfortabel tapdoel. */
  :root { --head-h: 56px; --head-gap: 10px; --head-ctl: 40px; }
  .site-head__bar { gap: 10px; padding-inline: 14px; }
  .brand__mark { font-size: 1.18rem; }
  .brand__tag { font-size: .44rem; }
  .brand__logo { height: 28px; }
  .head__side { gap: 8px; }
  .langswitch button { padding: 5px 8px; font-size: .64rem; }
}
@media (max-width: 380px) {
  /* De taalwissel stond hier op display:none met als reden dat hij ook in de
     voettekst zou staan. Dat is nooit gebouwd, dus zat een bezoeker op een
     360px-telefoon vast in het Engels. Hij krimpt nu in plaats van te
     verdwijnen. */
  .site-head__bar .langswitch { padding: 2px; }
  .site-head__bar .langswitch button { padding: 4px 6px; font-size: .6rem; letter-spacing: .04em; }
  .site-head__bar { gap: 8px; padding-inline: 10px; }
  .brand__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Het glas mag blijven kruisen, dat helpt begrijpen waar je bent. De
     samentrekking is beweging zonder functie en gaat eruit. */
  .site-head[data-head="lifted"] .site-head__bar { transform: none; }
}

/* --- 8. Hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,.55) 94%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,.55) 94%, transparent 100%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; filter: saturate(.9) contrast(1.04); }
/* De foto wordt naar de lakkleur getrokken zodat hij bij de ondergrond hoort
   in plaats van erop te liggen. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* De scrim doet nu nog maar één ding: leesbaarheid onder de tekst. De foto
     zelf blijft open. De zware groene vlakvulling van .62 is eruit; wat het
     beeld naar de lakkleur trekt is de lichte wash van .22 plus de saturatie
     op de <img> zelf. */
  background:
    linear-gradient(180deg, rgba(8,16,15,.44) 0%, rgba(8,16,15,.02) 22%, rgba(8,16,15,.48) 48%, rgba(8,16,15,.88) 66%, rgba(8,16,15,.96) 100%),
    linear-gradient(96deg, rgba(11,22,21,.78) 0%, rgba(11,22,21,.20) 48%, transparent 76%),
    radial-gradient(90% 70% at 24% 82%, rgba(212,174,54,.16), transparent 62%),
    linear-gradient(0deg, rgba(27, 54, 52, .22), rgba(27, 54, 52, .22));
}
.hero__inner {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(540px, 86vh, 880px);
  padding-block: clamp(90px, 12vh, 150px) clamp(40px, 6vh, 74px);
}
.hero__badge {
  align-self: flex-start; max-width: 100%;
  padding: 9px 20px;
  border: 1px solid rgba(212, 174, 54, .32);
  border-radius: var(--r-lg);
  background: rgba(8, 16, 15, .42);
  backdrop-filter: blur(8px);
  color: var(--gold-200);
  font-size: .68rem; line-height: 1.7; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 26px;
}
@media (min-width: 721px) { .hero__badge { border-radius: var(--r-pill); white-space: nowrap; } }
@media (max-width: 480px) { .hero__badge { font-size: .6rem; letter-spacing: .09em; padding: 8px 15px; } }
.hero__title { max-width: 15ch; }
.hero__sub { margin-top: 22px; max-width: 42ch; font-size: clamp(1rem, 1.4vw, 1.14rem); color: rgba(237, 243, 242, .84); }
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Mobiel is de hero gestapeld in plaats van doorlopend. De foto is 1440x633,
   bijna 2,3 keer zo breed als hoog; in een staand vak van 390x726 blijft daar
   met object-fit een verticale reep van 15% van het beeld over. Dat is precies
   de reep met alleen bomen erin. De detailer stond er wel op, maar buiten beeld.

   Gemeten op de bron: de persoon beslaat x 900-1235 en y 250-560, zijn hoofd
   zit op 74% van de breedte. Bij een band van 380px hoog schaalt cover naar
   0,60 en past het hele beeld verticaal, dus met object-position 94% staat hij
   gecentreerd in beeld met de motorkap ernaast.

   De band loopt onderaan uit in de ondergrond, de tekst schuift die uitloop in.
   Zo blijft het één oppervlak in plaats van een foto met een blok eronder. */
/* Tussen tablet en desktop staat de hero nog wel doorlopend, maar is hij
   verhoudingsgewijs veel hoger dan breed. Cover schaalt dan op de hoogte en
   snijdt er horizontaal zoveel af dat de detailer er bij 50% weer uit valt.
   Bij 88% blijft hij in beeld, en vanaf 1081px is de uitsnede weer breed
   genoeg dat 50% klopt met de compositie uit het ontwerp: tekst links,
   persoon rechts. */
@media (min-width: 721px) and (max-width: 1080px) {
  .hero__media img { object-position: 88% 46%; }
}

@media (max-width: 720px) {
  /* .hero houdt bewust overflow: hidden. De intro schaalt de herofoto in,
     en zonder die clip stak het beeld de eerste 850ms 11px buiten het
     scherm: een horizontale balk die opflikkert en op touch een pagina
     die zijwaarts meegeeft. */
  .hero__media { position: relative; height: clamp(330px, 47vh, 420px); }
  @supports (height: 1svh) { .hero__media { height: clamp(330px, 47svh, 420px); } }
  .hero__media img { object-position: 94% 50%; }
  .hero__media img,
  .hero__media::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.62) 79%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.62) 79%, transparent 100%);
  }
  /* Er staat hier geen tekst meer op de foto, dus de scrim hoeft niets meer
     leesbaar te maken. Wat overblijft: donker onder de headerpil, open door
     het midden waar het gezicht zit, donker naar de uitloop toe. */
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(8,16,15,.58) 0%, rgba(8,16,15,.05) 24%, rgba(8,16,15,.08) 58%, rgba(8,16,15,.62) 88%, rgba(8,16,15,.86) 100%),
      linear-gradient(0deg, rgba(27, 54, 52, .18), rgba(27, 54, 52, .18));
  }
  .hero__inner {
    min-height: 0;
    padding-block: 0 clamp(34px, 5vh, 54px);
    margin-block-start: clamp(-72px, -8vh, -48px);
  }
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__item { padding: clamp(26px, 3.6vw, 42px) clamp(8px, 2vw, 24px); text-align: center; position: relative; }
.stats__item + .stats__item::before {
  content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-firm), transparent);
}
.stats__n {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.8rem); line-height: 1;
  color: var(--gold-300); text-shadow: var(--glow-soft);
  /* Cijfers even breed, anders wiebelt de rij tijdens het optellen. */
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.stats__l { margin-top: 10px; font-size: .78rem; color: var(--ink-muted); }
/* Twee om twee tot 900px. Het was 680px, en daar zit precies het gat waar een
   telefoon in liggende stand (844 en 926px) en een iPad staand (768px) doorheen
   vielen: die kregen vier kolommen op een rij. Vier naast elkaar past pas echt
   vanaf een tabletscherm in liggende stand. */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(odd)::before { display: none; }
  .stats__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* --- 9. Paginakop -------------------------------------------------------- */
.pagehead {
  position: relative;
  padding-block: clamp(70px, 9vw, 128px);
  border-bottom: 1px solid var(--line);
}
.pagehead p,
.confirm .lede { margin-top: 17px; }

/* --- 10. Kaarten en vlakken ---------------------------------------------- */
/* Kaarten zijn glas boven de doorlopende ondergrond, geen dichte blokken. */
.card {
  position: relative;
  background: linear-gradient(168deg, rgba(66, 120, 120, .15), rgba(7, 20, 18, .40));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 32px);
}
.card--flat { background: rgba(8, 16, 15, .38); backdrop-filter: none; }
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(160deg, rgba(232, 194, 74, .20), rgba(212, 174, 54, .06));
  border: 1px solid rgba(212, 174, 54, .22);
  color: var(--gold-200);
  margin-bottom: 18px;
}
.icon-chip svg { width: 21px; height: 21px; }

/* Expertise-bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bento__cell {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-md); min-height: 244px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
}
.bento__cell:nth-child(-n+2) { grid-column: span 3; min-height: 292px; }
.bento__cell:nth-child(n+3) { grid-column: span 2; }
.bento__cell img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(1.12);
  transition: transform .3s var(--ease-out);
}
.bento__cell::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,20,18,.10) 0%, rgba(7,20,18,.62) 54%, rgba(7,20,18,.94) 100%),
    linear-gradient(0deg, rgba(27,54,52,.34), rgba(27,54,52,.34));
}
.bento__cell p { margin: 10px 0 0; font-size: .92rem; color: rgba(237,243,242,.78); max-width: 34ch; }
.bento__cell .icon-chip { background: none; border: 0; margin: 0 auto auto 0; width: 26px; height: 26px; color: var(--gold-200); align-self: flex-start; }
.bento__cell .icon-chip svg { width: 26px; height: 26px; filter: drop-shadow(0 0 10px rgba(212,174,54,.55)); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell:nth-child(-n+2), .bento__cell:nth-child(n+3) { grid-column: span 1; min-height: 214px; }
}
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

/* Portfolio */
.folio { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; gap: 12px; }
.folio__item { overflow: hidden; border-radius: var(--r-sm); position: relative; border: 1px solid var(--line); }
.folio__item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .3s var(--ease-out), filter var(--dur) var(--ease); }
.folio__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,16,15,.35));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.folio__item--big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 720px) {
  .folio { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; }
  .folio__item--big { grid-column: span 2; grid-row: span 2; }
}

/* Instagram-feed. 24 vierkante tegels, 6 per rij: precies 4 rijen, geen gaten.
   De handmatige vangnetselectie gebruikt de .folio-regels hierboven. */
.folio__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.folio__status { margin: 0 0 18px; font-size: .84rem; color: var(--ink-faint); }
.folio__status[data-tone="warn"] { color: var(--gold-400); }

.folio--ig { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 10px; }
.folio--ig .folio__item { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; display: block; }
.folio--ig .folio__item img { width: 100%; height: 100%; object-fit: cover; }
.folio__item--ig { position: relative; text-decoration: none; }
.folio__item--ig:focus-visible { outline-offset: 2px; }
.folio__kind {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
  pointer-events: none;
}
.folio__kind svg { width: 22px; height: 22px; }
@media (max-width: 1040px) { .folio--ig { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { .folio--ig { grid-template-columns: repeat(3, 1fr); gap: 6px; } }

/* Pillar-lijst */
.pillars { display: grid; gap: 14px; justify-items: end; }
.pillar {
  display: inline-flex; align-items: center; gap: 15px;
  background: linear-gradient(176deg, var(--gold-200), var(--gold-400) 62%, var(--gold-500));
  color: var(--on-gold);
  border-radius: var(--r-pill);
  padding: 13px 28px 13px 13px;
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1.1vw, 1.04rem);
  text-transform: uppercase;
  /* De langste van de drie is "transparante prijzen, hoge kwaliteit". Brak die
     over twee regels, dan was het geen pil meer maar een blok, scheef onder de
     andere twee. */
  white-space: nowrap;
  box-shadow: 0 10px 40px -14px rgba(232, 194, 74, .55);
}
.pillar .dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paint-900); color: var(--gold-200); flex: none;
}
.pillar .dot svg { width: 18px; height: 18px; }
.pillars .pillar:nth-child(2) { margin-right: clamp(0px, 4vw, 64px); }
@media (max-width: 900px) { .pillars { justify-items: start; } .pillars .pillar:nth-child(2) { margin-right: 0; } }

/* Reviews -----------------------------------------------------------------
   Twee banden die tegen elkaar in schuiven. Dezelfde machinerie als de
   klantenbalk op de zakelijke pagina: de set staat er twee keer in, en zodra
   de eerste helft voorbij is staat de tweede op exact dezelfde plek. De randen
   vervagen met een masker, niet met een gekleurd vlak, want de achtergrond
   hierachter is een verloop. */
.rv-band {
  position: relative; overflow: hidden; margin-top: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
.rv-band + .rv-band { margin-top: 16px; }
.rv-track { display: flex; width: max-content; animation: rv-roll 78s linear infinite; }
.rv-band--back .rv-track { animation-direction: reverse; }
.rv-band:hover .rv-track { animation-play-state: paused; }
.rv-row { display: flex; align-items: stretch; gap: 16px; padding-inline-end: 16px; }

.rv {
  width: min(360px, 78vw); flex: none;
  /* De band is 10.528px breed als één geschoven laag. Met containment blijft
     een herberekening binnen de kaart waar hij vandaan komt, in plaats van dat
     de hele band opnieuw wordt doorgerekend. */
  contain: layout paint style;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(8, 16, 15, .42);
}
.rv__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv__stars { color: var(--gold-300); font-size: .78rem; letter-spacing: .08em; }
.rv__date { font-size: .69rem; color: var(--ink-faint); white-space: nowrap; }
/* Bewust geen line-clamp. De langste review is 397 tekens en juist daar staat
   het detail dat hem overtuigend maakt; afkappen op vijf regels haalde dat weg
   zonder een manier om verder te lezen. Kaarten in een rij zijn even hoog. */
.rv__text { margin: 0; font-size: .84rem; line-height: 1.65; color: rgba(237,243,242,.84); }
.rv__who {
  display: flex; align-items: center; gap: 10px; margin: auto 0 0;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-muted);
}
.rv__ini {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(66,120,120,.24); color: var(--ink-muted);
  font-size: .66rem; font-weight: 600;
}
.rv__who small { margin-left: auto; font-size: .69rem; color: var(--ink-faint); }

.rv-score { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-score__stars { color: var(--gold-300); letter-spacing: .06em; }
.rv-score b { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-300); font-weight: 500; }

@keyframes rv-roll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .rv-band { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rv-track { animation: none; }
}

/* Aanbiedingsband */
.offer { position: relative; text-align: center; padding-block: clamp(58px, 7.5vw, 104px); }
.offer__list { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; color: var(--ink-muted); font-size: .9rem; margin: 20px 0 28px; padding: 0; }
.offer__list li { list-style: none; }

/* Klantenband ------------------------------------------------------------
   Eén rij namen die eindeloos naar links schuift. De lijst staat er twee keer
   in; zodra de eerste helft volledig langs is, staat de tweede op exact
   dezelfde plek en begint de animatie ongemerkt opnieuw. De randen vervagen,
   anders zie je namen hard in beeld ploppen. Wie reduced motion aan heeft
   krijgt geen beweging maar een rij die je zelf kunt schuiven. */
.clients {
  position: relative; overflow: hidden; padding-block: 6px;
  /* De randen vervagen met een masker en niet met twee gekleurde vlakken.
     De achtergrond hierachter is een verloop, dus elke vaste kleur zou er
     als een balk overheen liggen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 92px, #000 calc(100% - 92px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 92px, #000 calc(100% - 92px), transparent);
}
.clients__track { display: flex; width: max-content; animation: clients-roll 52s linear infinite; }
.clients:hover .clients__track { animation-play-state: paused; }
.clients__row { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.clients__row li {
  display: flex; align-items: center; justify-content: center;
  contain: layout paint style;
  padding-inline: clamp(22px, 2.6vw, 44px);
  /* Namen zonder logo blijven leesbaar meelopen in dezelfde rij. */
  font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
/* De logo's komen van achttien verschillende merken en dus in achttien
   kleuren, formaten en beeldverhoudingen. Eén vaste hoogte plus een egale
   witte weergave maakt er één rij van in plaats van een lappendeken. De
   opacity houdt ze onder de koppen van de pagina. */
.clients__logo {
  height: 34px; width: auto; max-width: 190px; object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .62;
  transition: opacity var(--dur) var(--ease);
}
.clients__row li:hover .clients__logo { opacity: 1; }
/* Uitzondering voor logo's die uit een dicht gekleurd vlak bestaan: wit maken
   levert daar een leeg blok op, dus die lopen mee in hun eigen kleuren. */
.clients__logo--asis { filter: none; opacity: .82; }
.clients__logo--tall { height: 54px; max-width: 150px; }
@keyframes clients-roll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .clients { overflow-x: auto; }
  .clients__track { animation: none; }
  .clients__row + .clients__row { display: none; }
}

/* Een bevestigingspagina zonder boeking in de sessie. Alles wat een bestelling
   voorstelt gaat weg; de kop en de terugknop blijven staan. */
.confirm[data-state="empty"] [data-confirm-only] { display: none; }

/* Fotobanden vloeien uit aan boven- en onderkant.

   Het masker liep eerst van transparant op 0% naar volledig dekkend op 36% van
   de bandhoogte. Op de contactpagina staat de kop van Jesse op 8% van de band,
   dus die werd op ongeveer 18% dekking getekend: een half weggevaagd gezicht.
   Het masker is nu boven volledig dekkend vanaf 14%, ruim boven elk gezicht in
   deze beelden, en de overgang loopt daaronder in vijf stappen zodat er geen
   randje in het verloop zichtbaar wordt.

   Onderaan mag hij juist lang zijn: daar loopt de foto uit in de achtergrond en
   verbergt dat meteen dat de benen van het kader lopen. Die overgang beslaat de
   onderste achtendertig procent. */
.photo-band { position: relative; overflow: hidden; isolation: isolate; }
.photo-band > img,
.photo-band > picture > img,
.photo-band > .photo-band__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.55) 8%,
    rgba(0,0,0,.88) 11%, #000 14%,
    #000 62%, rgba(0,0,0,.86) 74%, rgba(0,0,0,.5) 85%,
    rgba(0,0,0,.16) 94%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.55) 8%,
    rgba(0,0,0,.88) 11%, #000 14%,
    #000 62%, rgba(0,0,0,.86) 74%, rgba(0,0,0,.5) 85%,
    rgba(0,0,0,.16) 94%, transparent 100%);
}
.photo-band > img,
.photo-band > picture > img { z-index: -2; filter: saturate(.86); }
.photo-band > .photo-band__scrim {
  z-index: -1;
  background: linear-gradient(94deg, rgba(7,20,18,.94) 0%, rgba(7,20,18,.80) 46%, rgba(7,20,18,.56) 100%);
}

/* Bovenstaande verdonkering loopt van links naar rechts, van 94% naar 56%. Dat
   klopt waar de tekst links staat, zoals in de band op de homepage: daar zit de
   bescherming precies onder de kop en de gouden pillen vallen in het lichte
   deel.

   Op de contactpagina staat de tekst gecentreerd en staan er twee monteurs in
   beeld, één links en één rechts. Die kregen daardoor een heel verschillende
   behandeling: rechts helder, links modderig. Deze variant verdeelt de
   verdonkering gelijk over de breedte en houdt hem in totaal wat lichter, zodat
   beide gezichten er even goed op staan. Verticaal blijft er verloop, want de
   opsomming onderin heeft meer achtergrond nodig dan de lucht bovenin. */
.photo-band--even > .photo-band__scrim {
  background: linear-gradient(180deg,
    rgba(7,20,18,.74) 0%, rgba(7,20,18,.66) 45%, rgba(7,20,18,.78) 100%);
}

/* De CTA-band vloeit aan beide kanten uit. De onderkant sluit op de footer aan,
   maar een harde rand daar leest net zo hard als bovenaan. */
.cta-band__media img,
.cta-band__media::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 86%, transparent 100%);
}

/* --- 11. CTA-band -------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; }
/* De bron is 1800x1560 met de bus over de volle breedte, Jesse op circa 48%
   en Ritchell op 87%.

   Verticaal opgemeten in de bron: de koppen beginnen op 26%, de voeten eindigen
   op 76%. De band toont hooguit 54% van de beeldhoogte, dus het onderwerp past
   met vier procent speling. Die speling stond op 58% volledig onderaan: het
   venster begon precies op de haarlijn en er bleef vijf procent lege weg over
   onder de voeten. Twee koppen tegen de bovenrand lezen als afgesneden, ook al
   staan ze er technisch helemaal op. Op 50% ligt de speling aan beide kanten.

   Horizontaal doet de waarde bij een brede band niets: het beeld schaalt daar
   op breedte en er is geen overloop om te verschuiven. Hij telt pas mee als de
   band smaller en hoger wordt. */
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
/* Tussen 860 en 950px is de band nog naast de kaart gestapeld maar zo smal dat
   het venster op 66% de linker monteur wegsneed. Alleen daar naar het midden. */
@media (min-width: 721px) and (max-width: 950px) {
  .cta-band__media img { object-position: 52% 50%; }
}
.cta-band__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,16,15,.94) 0%, rgba(8,16,15,.62) 46%, rgba(8,16,15,.24) 80%),
    linear-gradient(0deg, rgba(20,41,39,.42), rgba(20,41,39,.42));
}
.cta-band__inner { position: relative; padding-block: clamp(60px, 8vw, 112px); }

/* Mobiel dezelfde ingreep als bij de hero. De kaart is daar bijna even breed
   als het scherm en legde zich over vrijwel de hele foto heen; wat er van de
   bus en de twee mannen overbleef was een randje aan de zijkant. De bron is
   808x865 met de crew op y 190-670, en op 390 breed past het beeld precies in
   de breedte, dus een band van 300px laat de hele scene zien zonder uitsnede. */
@media (max-width: 720px) {
  .cta-band__media { position: relative; height: clamp(240px, 34vh, 320px); }
  .cta-band__media img { object-position: 50% 52%; }
  .cta-band__media img,
  .cta-band__media::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 57%, rgba(0,0,0,.6) 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 57%, rgba(0,0,0,.6) 82%, transparent 100%);
  }
  /* De zware verduistering van links naar rechts stond er om de kaart bovenop
     leesbaar te houden. De kaart staat er nu naast, dus die kan eruit. */
  .cta-band__media::after {
    background:
      linear-gradient(180deg, rgba(8,16,15,.30) 0%, rgba(8,16,15,.05) 26%, rgba(8,16,15,.16) 62%, rgba(8,16,15,.70) 100%),
      linear-gradient(0deg, rgba(20, 41, 39, .24), rgba(20, 41, 39, .24));
  }
  .cta-band__inner {
    padding-block: 0 clamp(48px, 7vw, 76px);
    margin-block-start: clamp(-62px, -8vw, -42px);
  }
  .cta-card { max-width: none; }
}
.cta-card {
  max-width: 440px;
  background: linear-gradient(168deg, rgba(66,120,120,.20), rgba(8,16,15,.52));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(168, 210, 205, .20);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
}
.cta-card p { color: rgba(237,243,242,.8); font-size: .95rem; }
.contact-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 15px; }
.contact-list li { display: flex; gap: 13px; align-items: flex-start; font-size: .93rem; }
.contact-list svg { width: 18px; height: 18px; color: var(--gold-300); flex: none; margin-top: 3px; }
/* Telefoon en e-mail zijn op een telefoon de twee links die er het meest toe
   doen, en ze waren met 21px de kleinste tikdoelen van de site. WCAG 2.5.8
   vraagt 24px; inline-block plus wat verticale ruimte brengt ze op 34 zonder
   dat de regel zichtbaar verspringt. */
.contact-list a {
  display: inline-block; padding-block: 6px;
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-list a:hover { border-bottom-color: currentColor; color: var(--gold-200); }

/* --- 12. Footer ---------------------------------------------------------- */
/* Geen rand: de CTA-band erboven vloeit uit, en een lijn op precies die
   overgang maakt die fade meteen weer ongedaan. */
.site-foot { padding-block: clamp(50px, 6vw, 80px) 26px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1.6fr 1fr; gap: clamp(28px, 4vw, 60px); }
.foot__about { max-width: 42ch; font-size: .88rem; color: var(--ink-muted); }
.foot h2 { font-size: 1.02rem; margin-bottom: 17px; color: var(--gold-300); }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
/* Het raster maakt de twee kolommen, niet twee losse lijsten: zo blijft de
   volgorde bij het inklappen die van de hoofdnavigatie. */
.foot__list--nav { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.foot__list a {
  display: inline-block;
  font-size: .87rem; color: var(--ink-muted); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.foot__list a:hover { color: var(--gold-200); }
.foot__social { display: inline-flex; align-items: center; gap: 11px; margin-top: 26px; text-decoration: none; }
.foot__social .ic {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-firm);
  display: grid; place-items: center; color: var(--gold-300);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.foot__social:hover .ic { border-color: rgba(212,174,54,.5); box-shadow: 0 0 18px -4px rgba(212,174,54,.6); }
.foot__social .ic svg { width: 16px; height: 16px; }
.foot__social strong { font-family: var(--font-display); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.foot__base {
  margin-top: clamp(32px, 4vw, 50px); padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.foot__base p { margin: 0; }
.foot__partners { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  /* Aanraakvlakken. Een link van 20px hoog raak je met een duim niet
     betrouwbaar; met deze padding wordt het 38px en blijft de voettekst
     nog te overzien. WCAG 2.5.8 vraagt 24px, Apple en Google 44px. */
  .foot__list { gap: 2px; }
  .foot__list a { padding-block: 9px; }
  .foot__base { font-size: .68rem; }
}
@media (max-width: 420px) { .foot__list--nav { grid-template-columns: 1fr; } }

/* --- 13. Formulieren ----------------------------------------------------- */
.field { margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }

.input, .select, .textarea {
  width: 100%;
  background: rgba(8, 16, 15, .5);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-sm);
  padding: 13px 15px; min-height: 48px;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 112px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: rgba(166, 186, 183, .82); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(168, 210, 205, .34); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold-400); outline: none;
  background: rgba(20, 41, 39, .58);
  box-shadow: 0 0 0 3px rgba(212, 174, 54, .16);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a6bab7' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
  padding-right: 40px;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.err { display: none; margin-top: 6px; font-size: .78rem; color: var(--danger); }
/* De melding verschijnt met een korte opkomst in plaats van in één frame.
   Alleen opacity en transform, dus geen layout-animatie: de ruimte wordt in
   hetzelfde frame gereserveerd als altijd. */
.err.is-on { display: block; animation: err-in 160ms var(--ease-out); }
@keyframes err-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  padding: 11px 22px; border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  background: rgba(8, 16, 15, .45); color: var(--ink-muted); font-size: .88rem; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.choice:hover { color: var(--ink); border-color: rgba(168, 210, 205, .36); }
.choice[aria-pressed="true"] {
  background: linear-gradient(176deg, var(--gold-200), var(--gold-400));
  border-color: var(--gold-400); color: var(--on-gold); font-weight: 600;
  box-shadow: 0 6px 24px -10px rgba(232,194,74,.7);
}

.checkline {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line-firm); border-radius: var(--r-sm);
  background: rgba(8, 16, 15, .45); cursor: pointer; font-size: .92rem;
}
.checkline input { width: 17px; height: 17px; accent-color: var(--gold-400); flex: none; }

.formnote { margin-top: 14px; font-size: .78rem; color: var(--ink-faint); text-align: center; }
.formstatus { margin-top: 16px; font-size: .88rem; }
.formstatus[data-tone="ok"] { color: var(--ok); }
.formstatus[data-tone="err"] { color: var(--danger); }

fieldset { border: 0; margin: 0 0 28px; padding: 0; }
legend { font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; margin-bottom: 17px; padding: 0; color: var(--gold-300); }

/* --- 14. Prijskaarten ---------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
/* Twee kolommen waar er maar twee kaarten zijn. Dit stond als inline style op
   de pagina's zelf, en een inline style wint van elke media query: het raster
   bleef daardoor tot 320px aan toe tweekoloms, met knoppen waarin "Request ride
   card" over drie regels brak. */
.plans--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--plans-max, 880px); margin-inline: auto; }
/* Van drie kolommen ineens naar één liet op een tablet een kolom van 460px
   midden op een scherm van 900 staan, met witruimte ernaast. Er zit nu een
   stap tussen: twee kolommen, met de derde kaart over de volle breedte. */
@media (max-width: 940px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
  .plans > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 460px; margin-inline: auto; width: 100%; }
}
@media (max-width: 620px) {
  .plans, .plans--duo { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plans > :last-child:nth-child(odd) { grid-column: auto; }
}

/* Kenmerkenlijst met vinkjes. Stond als losse inline stijlen op de homepage. */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 11px; align-items: center; font-size: .9rem; }
.checklist svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .checklist { grid-template-columns: 1fr; gap: 11px; } }
.plan { position: relative; display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.plan[data-featured="true"] { background: linear-gradient(168deg, rgba(66,120,120,.18), rgba(8,16,15,.42)); }
.plan.is-selected { border-color: rgba(212,174,54,.55); box-shadow: 0 0 0 1px rgba(212,174,54,.35), 0 22px 60px -26px rgba(232,194,74,.6); }
.plan__flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(176deg, var(--gold-200), var(--gold-400));
  color: var(--on-gold);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 5px 15px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: 0 6px 22px -8px rgba(232,194,74,.8);
}
.plan__price {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
  margin: 12px 0 8px;
}
.plan__meta { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.plan__fee { font-size: .78rem; color: var(--gold-400); margin-top: 6px; }
.plan__feats { list-style: none; margin: 24px 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 13px; flex: 1; }
.plan__feats li { display: flex; gap: 11px; font-size: .88rem; color: rgba(237,243,242,.8); }
.plan__feats svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; margin-top: 2px; }

/* Add-ons */
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1040px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .addons { grid-template-columns: 1fr; } }
.addon {
  position: relative; text-align: left;
  background: linear-gradient(168deg, rgba(66,120,120,.09), rgba(8,16,15,.34));
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* Zonder deze twee centreerde de browser de inhoud verticaal, waardoor
     een kop van twee regels boven de kaart uit stak. */
  display: flex; flex-direction: column;
}
.addon[aria-pressed="true"] {
  border-color: rgba(212,174,54,.5);
  background: linear-gradient(168deg, rgba(212,174,54,.12), rgba(8,16,15,.4));
  box-shadow: 0 14px 44px -24px rgba(232,194,74,.85);
}
/* Zit de add-on al in het gekozen abonnement, dan is hij niet te kiezen.
   Rustiger dan de rest, maar wel leesbaar: de klant moet juist zien dat dit
   werk in het pakket zit. */
.addon[data-included="true"] {
  cursor: default; opacity: .72;
  border-style: dashed; border-color: rgba(168,210,205,.28);
}
.addon[data-included="true"] .addon__price { color: var(--ink-muted); }
.addon[data-included="true"] .addon__tick { opacity: .35; }

.addon__tick {
  position: absolute; top: 18px; right: 18px;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--line-firm); display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.addon[aria-pressed="true"] .addon__tick { background: var(--gold-300); border-color: var(--gold-300); color: var(--on-gold); }
.addon__tick svg { width: 13px; height: 13px; opacity: 0; }
.addon[aria-pressed="true"] .addon__tick svg { opacity: 1; }
.addon__name { display: block; font-family: var(--font-display); font-size: .96rem; text-transform: uppercase; padding-right: 32px; }
.addon__price { display: block; color: var(--gold-300); font-size: .88rem; font-weight: 600; margin: 8px 0; }
.addon__desc { font-size: .8rem; color: var(--ink-muted); margin: 0; }

/* Sticky samenvattingsbalk */
.sumbar {
  position: sticky; bottom: 14px; z-index: 40; margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
  background: linear-gradient(168deg, rgba(27,54,52,.92), rgba(8,16,15,.95));
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-firm); border-radius: var(--r-md);
  padding: 16px 20px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
}
.sumbar__k { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.sumbar__v { font-size: .92rem; }
.sumbar__total { margin-left: auto; text-align: right; }
.sumbar__total .sumbar__v { font-family: var(--font-display); font-size: 1.55rem; color: var(--gold-300); text-shadow: var(--glow-soft); }
/* Op een telefoon viel elk van de vier blokken op een eigen regel en werd de
   balk 234px hoog: ruim een derde van het scherm, permanent over de add-ons
   heen die je juist probeert aan te tikken. Nu twee compacte regels: de twee
   keuzes naast elkaar, daaronder het totaal met de knop ernaast. Niets wordt
   verborgen, want deze balk is aria-live en moet blijven voorlezen wat er
   verandert. */
@media (max-width: 700px) {
  .sumbar {
    display: grid; grid-template-columns: 1fr auto;
    gap: 6px 14px; padding: 12px 16px; bottom: 10px;
  }
  .sumbar > span:nth-child(1),
  .sumbar > span:nth-child(2) { grid-row: 1; font-size: .8rem; color: var(--ink-muted); }
  .sumbar > span:nth-child(2) { grid-column: 2; text-align: right; }
  /* De labels zijn op deze breedte alleen ruis: "Nog geen keuze" en
     "0 gekozen" spreken voor zich naast een bedrag en een knop. Ze blijven
     wel in de DOM staan, want de balk is aria-live en een schermlezer moet
     horen wát er verandert. */
  .sumbar__k {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .sumbar__k + br { display: none; }
  .sumbar__total { grid-row: 2; grid-column: 1; margin-left: 0; text-align: left; align-self: center; }
  .sumbar__total .sumbar__v { font-size: 1.45rem; }
  .sumbar .btn {
    grid-row: 2; grid-column: 2; width: auto;
    white-space: nowrap; padding-inline: 18px; font-size: .84rem;
  }
}
/* Onder 340px past "Aanvraag afronden" niet meer naast het bedrag: de tekst
   werd aan beide kanten afgekapt. Dan de knop een eigen regel geven in plaats
   van het label in te korten, want dat label is ook de linktekst. Op 360px
   past hij nog wel naast elkaar, dus die grens ligt bewust laag. */
@media (max-width: 340px) {
  .sumbar { grid-template-columns: 1fr; }
  .sumbar > span:nth-child(2) { grid-column: 1; text-align: right; }
  .sumbar__total { grid-row: 2; }
  /* nowrap weer los: op 320px past het label ook over de volle breedte niet
     op een regel, en afgekapte tekst is erger dan twee regels. */
  .sumbar .btn { grid-row: 3; grid-column: 1; width: 100%; white-space: normal; }
}

/* Order summary */
.summary {
  background: linear-gradient(168deg, rgba(66,120,120,.12), rgba(8,16,15,.4));
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 26px; position: sticky; top: 100px;
}
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.summary__row:last-of-type { border-bottom: 0; }
.summary__row .k { color: var(--ink-muted); }
.summary__row .v { color: var(--gold-300); white-space: nowrap; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 17px; border-top: 1px solid var(--line-firm); }
.summary__total .v { font-family: var(--font-display); font-size: 1.85rem; color: var(--gold-300); text-shadow: var(--glow-soft); }
.summary__empty { font-size: .86rem; color: var(--ink-faint); }

.layout-2col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 38px); align-items: start; }
/* Tekst en een staande video naast elkaar: met align-items:start hangt de
   video aan de bovenkant en valt het verschil in hoogte onderaan als een gat.
   Gecentreerd verdeelt dat verschil over twee helften, wat op elke
   tekstlengte klopt in plaats van bij een. */
.layout-2col--mid { align-items: center; }
/* Het gewone tweekolomsblok klapt onder 940px in, want daar staat een
   formulier met een besteloverzicht naast en die heeft die breedte nodig.
   Naast deze twee blokken staat een staande clip van hooguit 300px, en die
   past samen met de tekst tot ongeveer 700px prima naast elkaar. Zonder deze
   regel stapelde de video al op een half scherm, terwijl er ruimte zat. */
@media (min-width: 701px) and (max-width: 940px) {
  /* Twee klassen in de selector, niet een. De regel die hieronder alles op
     een kolom zet staat verderop in dit bestand en zou bij gelijke
     specificiteit winnen op volgorde. */
  .layout-2col.layout-2col--mid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .95fr); gap: clamp(18px, 2.4vw, 30px); }
}
@media (max-width: 700px) { .layout-2col--mid { align-items: start; } }
@media (max-width: 940px) { .layout-2col { grid-template-columns: 1fr; } .summary { position: static; } }

/* --- 15. Stepper --------------------------------------------------------- */
.stepper { border-block: 1px solid var(--line); }
.stepper__list { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 5vw, 74px); list-style: none; margin: 0; padding: 26px 0; }
.stepper__item { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.stepper__item + .stepper__item::before {
  content: ""; position: absolute; left: -50%; right: 130%; top: 15px; height: 1px;
  background: var(--line-firm); transform: translateX(-16px);
}
.stepper__dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-firm); display: grid; place-items: center;
  font-size: .78rem; color: var(--ink-faint);
  background: var(--paint-800); position: relative; z-index: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stepper__lbl { font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.stepper__item[data-state="active"] .stepper__dot { border-color: var(--gold-400); color: var(--gold-200); box-shadow: 0 0 0 4px rgba(212,174,54,.12), var(--glow-soft); }
.stepper__item[data-state="active"] .stepper__lbl { color: var(--ink); }
.stepper__item[data-state="done"] .stepper__dot { background: var(--gold-300); border-color: var(--gold-300); color: var(--on-gold); }
.stepper__item[data-state="done"] .stepper__lbl { color: var(--ink-muted); }

/* --- 16. Servicekaarten -------------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services-grid { grid-template-columns: 1fr; } }
.svc {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px; min-height: 266px;
  display: flex; flex-direction: column; text-align: left; cursor: pointer; width: 100%;
  background: rgba(8, 16, 15, .4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc:hover { border-color: rgba(168,210,205,.3); }
.svc[aria-pressed="true"] { border-color: rgba(212,174,54,.5); box-shadow: 0 0 0 1px rgba(212,174,54,.3), 0 22px 56px -28px rgba(232,194,74,.8); }
.svc img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(1.1); }
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,20,18,.34) 0%, rgba(7,20,18,.80) 50%, rgba(7,20,18,.95) 100%),
    linear-gradient(0deg, rgba(27,54,52,.30), rgba(27,54,52,.30));
}
.svc__chip {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(176deg, var(--gold-200), var(--gold-400));
  color: var(--on-gold); display: grid; place-items: center;
  box-shadow: 0 8px 26px -12px rgba(232,194,74,.9);
}
.svc__chip svg { width: 20px; height: 20px; }
.svc__name { display: block; font-family: var(--font-display); font-size: 1.18rem; text-transform: uppercase; margin-top: 18px; }
.svc__price { display: block; font-size: .86rem; color: rgba(237,243,242,.86); margin-top: 8px; }
.svc__price b { color: var(--gold-300); font-weight: 600; }
.svc__desc { display: block; font-size: .8rem; color: rgba(237,243,242,.62); margin-top: 10px; }
/* Een voorwaarde hoort bij de dienst te staan, niet pas in het formulier.
   Daarom een eigen regel onder de omschrijving, iets sterker dan de
   omschrijving zodat je hem niet overslaat. */
.svc__note {
  display: block; margin-top: 10px; font-size: .78rem; line-height: 1.45;
  color: var(--gold-300); opacity: .9;
}
.svc__act { margin-top: auto; padding-top: 15px; font-size: .82rem; color: var(--gold-300); display: inline-flex; align-items: center; gap: 7px; }
.svc__act svg { width: 14px; height: 14px; }

/* --- 17. Team ------------------------------------------------------------ */
/* Geen drie gelijke kaarten: de eerste is groot, de andere twee staan ernaast.
   Vermijdt de generieke 3-koloms-kaartenrij. */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.member { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: rgba(8,16,15,.34); }
.member__photo { aspect-ratio: 4 / 5; background: var(--paint-600); position: relative; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-out); }
.member__body { padding: 20px; }
.member__name { font-family: var(--font-display); font-size: 1.16rem; text-transform: uppercase; color: var(--gold-300); }
.member__role { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 8px; }
@media (max-width: 1080px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* Staande clips (9:16, uit de telefoon). Drie naast elkaar op een beperkte
   breedte: op de volle shell-breedte wordt een staande video van 400px breed
   ruim 700px hoog en duwt hij de rest van de pagina van het scherm. */
.reels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 900px; margin-inline: auto;
}
.reel { margin: 0; }
.reel__video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  background: #05100f; border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.reel__cap {
  margin-top: 10px; font-size: .82rem; letter-spacing: .02em;
  color: var(--ink-muted); text-align: center;
}
/* Onder 700px wordt een derde van de breedte te smal om de ingebrande
   ondertiteling nog te kunnen lezen. Dan liever één per rij. */
@media (max-width: 700px) {
  .reels { grid-template-columns: 1fr; max-width: 380px; gap: 26px; }
}

/* Eén losse clip tussen de tekst, op de homepage. De breedte is hier de rem,
   niet de hoogte: 9:16 op een halve kolom van 46vw wordt bijna 1000px hoog en
   duwt alles eromheen weg. Bijsnijden is geen optie, want de ondertiteling
   staat ingebrand onderin beeld. */
.reel--solo { max-width: 300px; margin-inline: auto; }
@media (max-width: 900px) { .reel--solo { max-width: 260px; } }

/* Een losse clip onder aan een sectie stond met 38px erboven en 34px onder de
   knop eronder: te krap voor een blok dat visueel op zichzelf staat, waardoor
   hij aan het raster erboven leek te plakken. Gelijke, ruimere afstand boven
   en onder maakt er een eigen element van. */
/* Een staande clip van 300px alleen in het midden van een sectie van 1240px
   leest als een los blokje met leegte eromheen. Naast een regel tekst en de
   knop wordt het een blok. Breder kan de clip niet: 9:16 en de ondertiteling
   staat ingebrand, dus bijsnijden valt af.

   De scheidingslijn loopt over de volle breedte van de sectie, want die hoort
   bij de structuur en moet uitlijnen met het raster erboven. Het paar zelf
   staat compacter en gecentreerd daarbinnen: bij de volle breedte viel er
   ruim vierhonderd pixels tussen de tekst en de video, en dat leest als een
   gat in plaats van als ruimte. */
.reel-solo-band {
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--line);
}
/* Het blok zelf gebruikt layout-2col, hetzelfde raster als bij "Wat doet
   SPOTWASH precies?": tekst links, staande video rechts, verticaal
   gecentreerd, over de volle breedte van de sectie. Een eigen variant ernaast
   leverde alleen een tweede manier op om hetzelfde te doen, en die twee gaan
   vroeg of laat uit elkaar lopen. */
.reel-solo-band__aside { display: grid; justify-items: start; gap: clamp(18px, 2vw, 26px); align-content: center; }
.reel-solo-band__aside .lede { margin: 0; max-width: 42ch; }

/* Fotostrook over de volle breedte, onder een tweekolomsblok. Vijf beelden
   naast elkaar in plaats van gestapeld naast de tekst: gestapeld werd die
   kolom ruim twee keer zo hoog als de tekst ernaast. Hier mag wel bijgesneden
   worden, anders dan bij de videos: op een foto zit geen ingebrande
   ondertiteling, en een vaste vierkante verhouding houdt de rij recht. */
.mediastrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(26px, 3vw, 40px);
}
.mediastrip picture { display: block; }
.mediastrip img {
  display: block;
  width: 100%;
  /* height:auto is hier niet cosmetisch. De width- en height-attributen op de
     img zijn nodig tegen layout shift, maar zolang de hoogte daaruit vastligt
     wordt aspect-ratio genegeerd: de foto bleef 800px hoog in een vak van
     214px breed. Met auto komt de hoogte uit de verhouding hieronder. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
}
@media (max-width: 900px) { .mediastrip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mediastrip { grid-template-columns: repeat(2, 1fr); } }

/* Waarden: één brede opener, daaronder twee. Geen gelijke drieluik. */
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.values > :first-child { grid-column: 1 / -1; display: flex; gap: 24px; align-items: flex-start; }
.values > :first-child .icon-chip { margin-bottom: 0; }
.values > :first-child > div { flex: 1; }
.value p { font-size: .88rem; color: var(--ink-muted); margin: 12px 0 0; max-width: 46ch; }
@media (max-width: 720px) {
  .values { grid-template-columns: 1fr; }
  .values > :first-child { flex-direction: column; gap: 14px; }
}

/* Bereikrij: hairline-lijst in plaats van drie kaarten. */
.reach { list-style: none; margin: 0; padding: 0; display: grid; }
.reach li { display: grid; grid-template-columns: 46px 1fr auto; gap: 20px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.reach li:last-child { border-bottom: 1px solid var(--line); }
.reach__ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(212,174,54,.10); border: 1px solid rgba(212,174,54,.2); color: var(--gold-200); display: grid; place-items: center; }
.reach__ic svg { width: 19px; height: 19px; }
.reach h3 { font-size: 1.05rem; }
.reach p { margin: 6px 0 0; font-size: .87rem; color: var(--ink-muted); }
.reach__n { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-500); }
@media (max-width: 620px) { .reach li { grid-template-columns: 40px 1fr; } .reach__n { display: none; } }

.badges { display: flex; flex-wrap: wrap; gap: 14px; }
.badge {
  display: flex; align-items: center; gap: 14px;
  background: rgba(8,16,15,.4); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 24px; margin: 0;
}
.badge > svg { width: 22px; height: 22px; color: var(--gold-300); flex: none; }
.badge strong { display: block; font-family: var(--font-display); font-size: .92rem; text-transform: uppercase; }
.badge span span { font-size: .76rem; color: var(--ink-muted); }

/* --- 18. Contact --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 3vw, 46px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.detail {
  display: flex; gap: 14px; align-items: center; margin: 0;
  background: rgba(8,16,15,.36); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 15px 17px;
  transition: border-color var(--dur) var(--ease);
}
.detail:hover { border-color: rgba(212,174,54,.28); }
.detail + .detail { margin-top: 11px; }
.detail__ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(212,174,54,.10); border: 1px solid rgba(212,174,54,.18); color: var(--gold-200); display: grid; place-items: center; flex: none; }
.detail__ic svg { width: 17px; height: 17px; }
.detail__k { display: block; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.detail__v { display: block; font-size: .93rem; }
.detail__v a { display: inline-block; padding-block: 6px; text-decoration: none; }
.detail__v a:hover { color: var(--gold-200); }

.partners { display: flex; flex-wrap: wrap; gap: 16px; }
.partner { flex: 1 1 220px; display: flex; align-items: center; gap: 16px; }
.partner__name { font-family: var(--font-display); font-size: 1.08rem; text-transform: uppercase; color: var(--gold-300); }
.partner__role { font-size: .78rem; color: var(--ink-muted); margin: 5px 0 0; }

/* --- 19. Bevestiging ----------------------------------------------------- */
.confirm { text-align: center; padding-block: clamp(60px, 8vw, 112px); }
.confirm__tick {
  width: 66px; height: 66px; border-radius: 50%;
  background: linear-gradient(176deg, var(--gold-200), var(--gold-400));
  color: var(--on-gold); display: grid; place-items: center; margin: 0 auto 28px;
  box-shadow: 0 0 0 8px rgba(212,174,54,.08), 0 18px 50px -18px rgba(232,194,74,.9);
}
.confirm__tick svg { width: 30px; height: 30px; }
/* Er is geen backend: dit zijn de twee echte manieren om de afspraak te
   bevestigen, dus als tappable links naast elkaar, ruim boven de 44px
   tapdoelhoogte op mobiel. */
.confirm__contact {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  margin: 18px 0 6px;
}
.confirm__contact a {
  color: var(--gold-300); font-weight: 600; text-decoration: none;
  padding: 11px 4px; border-bottom: 1px solid transparent;
}
.confirm__contact a:hover { border-color: var(--gold-300); }
.confirm__panel {
  max-width: 480px; margin: 34px auto 32px;
  background: linear-gradient(168deg, rgba(66,120,120,.14), rgba(8,16,15,.4));
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px 26px; text-align: left;
}
/* .summary__row is verder gebouwd voor korte prijsregels naast elkaar. Dit
   paneel toont nu ook e-mail, adres en opmerkingen: onvoorspelbaar lange
   tekst die met white-space:nowrap gewoon buiten de kaart doorliep in plaats
   van af te breken. Label boven, waarde eronder, waarde mag wrappen. */
.confirm__panel .summary__row { display: block; padding-block: 10px; }
.confirm__panel .summary__row .k {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 3px;
}
.confirm__panel .summary__row .v { display: block; white-space: normal; word-break: break-word; }


/* Bewegende hover-staten alleen bij een echte aanwijzer. Op touch blijft
   :hover na een tap hangen, en dan staat de kaart scheef tot je ergens
   anders tikt. Kleur- en randwissels mogen wel gewoon. */
@media (hover: hover) and (pointer: fine) {
  .bento__cell:hover img { transform: scale(1.06); }
  .folio__item:hover img { transform: scale(1.07); }
  .folio__item:hover::after { opacity: 1; }
  .member:hover .member__photo img { transform: scale(1.04); }
  .plan:hover { transform: translateY(-3px); }
  .addon:hover { border-color: rgba(168,210,205,.3); transform: translateY(-2px); }
  /* .svc zijn de voertuigkeuzeknoppen op a-la-carte. Die worden op mobiel
     aangetikt, en zonder deze gate bleef de aangetikte kaart 3px omhoog staan
     tot je ergens anders tikte. */
  .svc:hover { transform: translateY(-3px); }
  .folio__item:hover img { filter: saturate(1); }
  .btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(212,174,54,.45), 0 14px 44px -12px rgba(232,194,74,.55); }
  .btn--ghost:hover { background: rgba(212, 174, 54, .12); filter: none; box-shadow: 0 0 22px -6px rgba(212,174,54,.4); }
}

/* --- 20. Motion ---------------------------------------------------------- */
/* will-change alleen zolang het blok nog verborgen is. Erna zou het twaalf
   compositorlagen open houden die niets meer doen. */
.js .reveal:not(.is-in) { will-change: transform, opacity; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.word { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .atmos__layer { transition: none; }
  .gilt--sheen { background-position: 0 0; }
  .gilt--loop { animation: none; background-position: 0 0; }
  .btn::after { display: none; }
}

/* --- 21. Print ----------------------------------------------------------- */
@media print {
  .site-head, .cta-band, .site-foot, .sumbar, .atmos { display: none; }
  /* De header staat vast op het scherm; op papier is er niets om ruimte voor
     vrij te houden. */
  main { padding-block-start: 0; }
  main > .hero:first-child { margin-block-start: 0; }
  body { background: #fff; color: #000; }
  .gilt { color: #7a5f14; -webkit-text-fill-color: #7a5f14; filter: none; }
}

/* --- 21. Prijstabel, stappen en FAQ -------------------------------------- */
/* Drie componenten die met de SEO-ronde zijn toegevoegd en dus niet in het
   goedgekeurde ontwerp staan. Ze lenen hun tokens van de kaarten, zodat ze
   dezelfde randen, radii en gouden accenten krijgen als de rest.

   De prijstabel staat er omdat de prijzen als platte tekst in de HTML moeten
   staan: zonder JavaScript leesbaar, en citeerbaar voor een assistent. De
   add-onknoppen erboven zijn de interactieve versie van dezelfde lijst. */

.prijstabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 34rem;
}
.prijstabel thead th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line-firm);
  white-space: nowrap;
}
.prijstabel tbody th,
.prijstabel tbody td { padding: 11px 16px 11px 0; vertical-align: top; text-align: left; }
.prijstabel tbody th { font-weight: 400; color: var(--ink); }
.prijstabel tbody tr + tr th,
.prijstabel tbody tr + tr td { border-top: 1px solid var(--line); }
/* Het bedrag is waar het oog naartoe gaat, dus dat krijgt de gouden kleur en
   cijfers van gelijke breedte, zodat de kolom uitlijnt. */
.prijstabel tbody td:first-of-type { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prijstabel tbody td:last-child { color: var(--ink-faint); font-size: .82rem; white-space: nowrap; }

.stappen {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  counter-reset: stap;
}
.stappen li {
  background: var(--card-bg, rgba(10,27,25,.42));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 22px 24px;
}
.stappen li h3 { margin: 0 0 10px; font-size: 1rem; }
.stappen li p { margin: 0; font-size: .9rem; color: var(--ink-muted); }

.faq { display: grid; gap: 2px; margin-top: 30px; }
.faq__item {
  border-top: 1px solid var(--line);
  padding: 20px 0 18px;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  margin: 0 0 8px;
  font-size: .98rem;
  /* De vraag staat er letterlijk zoals hij in de gestructureerde data staat.
     Uppercase zou dat verschil maken, dus die zetten we hier uit. */
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.faq__a { margin: 0; font-size: .92rem; color: var(--ink-muted); max-width: 75ch; }

.langswitch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--head-ctl);
  min-height: var(--head-ctl);
  padding: 0 12px;
  border: 1px solid var(--line-firm);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .langswitch__link:hover { color: var(--gold); border-color: rgba(212,174,54,.45); }
}