/* ==========================================================================
   RijQuality — styles.css (NEO Agency, v1.0)
   Bouwt op css/design-tokens.css. Wijzig kleuren/maten daar, niet hier.
   Volgorde: 1 basis · 2 layout · 3 header · 4 hero · 5 secties · 6 formulier
             · 7 footer · 8 motion-basisstaten · 9 verify-modus
   ========================================================================== */

/* ==========================================================================
   1. Basis
   ========================================================================== */

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

/* [hidden] moet winnen van componentregels die display zetten (bijv. .events). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.is-locked { overflow: hidden; }

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

/* Browsers geven figure en blockquote van zichzelf 'margin: 1em 40px'.
   Zonder deze reset staat elke reviewkaart 80px smaller dan zijn kolom. */
figure, blockquote { margin: 0; }

a { color: var(--q-blue-bright); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--q-focus);
  outline-offset: 3px;
}

::selection { background: var(--q-blue-bright); color: var(--q-ink); }

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -4rem;
  z-index: calc(var(--z-menu) + 10);
  padding: var(--s-1) var(--s-2);
  background: var(--q-action);
  color: var(--q-ink);
  font: 700 var(--fs-body)/1 var(--font-display);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-2); }

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

/* --------------------------------------------------------------------------
   KNOPSYSTEEM — drie niveaus, geen uitzonderingen per plek.

     1  .btn--primary  wit vlak, donkere tekst   de conversie-actie van de
                                                  pagina: "Plan je gratis
                                                  proefles". Eén per scherm.
     2  .btn--blue     merkblauw, witte tekst    sectie-acties die niet de
                                                  hoofdconversie zijn.
     3  .btn--ghost    alleen een lijn           navigeren en secundair.

   In een herhalende lijst krijgen alle items dezelfde knop — de items zijn
   gelijkwaardig, dus de knop mag niet verschillen. Enige uitzondering is de
   pakkettabel, waar het uitgelichte pakket bewust niveau 1 krijgt: daar
   dráágt het verschil betekenis.

   Dezelfde actie houdt overal dezelfde tekst (briefing 9.1). Alleen in de
   header en de sticky balk staat de korte vorm "Gratis proefles", omdat de
   volledige zin daar niet past.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   2. Layout-primitieven
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--s-5); }
.section--flush-top { padding-top: 0; }

/* Sectiekop: eyebrow + H2 + optionele introzin */
.section-head { max-width: 44rem; margin-bottom: var(--s-5); }
.section-head .eyebrow { display: block; margin-bottom: var(--s-2); }
.section-head h2 { margin-bottom: var(--s-2); }
.section-head p { margin: 0; font-size: var(--fs-body-lg); }

.section-head--wide { max-width: 56rem; }

/* Uitlijning van kop + actie op één regel (desktop) */
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.section-head-row .section-head { margin-bottom: 0; }

.stack > * + * { margin-top: var(--s-2); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Pijl-link ("Lees verder →") */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font: 700 var(--fs-body)/1 var(--font-display);
  color: var(--q-blue-bright);
  text-decoration: none;
  min-height: var(--touch-min);
}
.arrow-link svg { transition: transform var(--t-fast) var(--ease-out); }
.arrow-link:hover svg,
.card-link:hover .arrow-link svg { transform: translateX(4px); }

/* ==========================================================================
   3. Header + navigatie
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-out);
}
.header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--q-ink-3);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2rem 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7,17,28,.80) 0%, rgba(7,17,28,.40) 55%, rgba(7,17,28,0) 100%);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.header.is-compact::before { opacity: 0; }

.header.is-compact {
  background: rgba(7, 17, 28, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header.is-compact::after { opacity: 1; }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 5rem;
  transition: min-height var(--t-base) var(--ease-out);
}
.header.is-compact .header__inner { min-height: 4rem; }

/* Logo-lockup: wordmark + "Verkeersschool" in body-font (briefing 8.2) */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--q-white);
}
.logo img {
  width: auto;
  height: 1.5rem; /* 24px mobiel */
  transition: height var(--t-base) var(--ease-out);
}
.logo__sub {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q-mist);
  white-space: nowrap;
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font: 600 0.9375rem/1 var(--font-body);
  color: var(--q-white);
  text-decoration: none;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.75rem;
  height: 2px;
  background: var(--q-blue-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* WhatsApp-icoon — enige ronde vorm naast avatars (briefing 8.5) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-round);
  border: 1px solid var(--q-ink-3);
  background: transparent;
  color: var(--q-white);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.icon-btn:hover {
  background: var(--q-ink-2);
  border-color: var(--q-blue);
  transform: translateY(-1px);
}

/* WhatsApp in de header is een conversieroute, geen social-linkje — dus
   een dicht vlak in plaats van een omlijnde cirkel. Merkblauw met wit glyph
   (4,03:1, ruim boven de 3:1 die voor grafische elementen geldt); de cirkel
   zelf steekt met 4,72:1 af tegen de donkere header. Bij hover keert het om
   naar wit met donker glyph (18,99:1). */
.icon-btn--wa {
  background: var(--q-blue);
  border-color: var(--q-blue);
  color: var(--q-white);
}
.icon-btn--wa:hover {
  background: var(--q-white);
  border-color: var(--q-white);
  color: var(--q-ink);
}

.header .btn { display: none; }

/* WhatsApp-knop. Bewust géén WhatsApp-groen: dat zou een vierde accentkleur
   zijn en de NEO-norm staat er drie toe. Het glyph is herkenbaar genoeg. */
.btn--wa svg { flex: 0 0 auto; }


/* In de hero staat hij alleen op desktop. Op mobiel zit WhatsApp al
   permanent in de sticky balk; twee keer is ruis. */
.hero .btn--wa { display: none; }
@media (min-width: 64rem) {
  .hero .btn--wa { display: inline-flex; }
}

/* Alternatief naast het formulier */
.form__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
  padding-top: var(--s-3);
  border-top: var(--border);
}
.form__alt span { font-size: 0.9375rem; color: var(--q-mist); }

/* Hamburger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0 0.625rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--q-white);
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobiel menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: 6rem var(--gutter) var(--s-5);
  background: var(--q-ink);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.menu.is-open { visibility: visible; opacity: 1; }
.menu__list {
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
  border-top: var(--border);
}
.menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) 0;
  min-height: 3.5rem;
  border-bottom: var(--border);
  font: 700 1.5rem/1.1 var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--q-white);
  text-decoration: none;
}
.menu__list a:hover { color: var(--q-blue-bright); }
.menu__list .menu__index {
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  color: var(--q-blue-bright);
}
.menu__foot { margin-top: auto; }
.menu__foot .btn { width: 100%; }
.menu__contact {
  margin-top: var(--s-3);
  font-size: 0.875rem;
  color: var(--q-mist);
}
.menu__contact a { color: var(--q-white); text-decoration: none; }
.menu__contact a:hover { text-decoration: underline; }

@media (min-width: 64rem) {
  .nav { display: block; }
  .burger { display: none; }
  .header .btn { display: inline-flex; }
  .logo img { height: 2rem; } /* 32px desktop */
  .header__inner { min-height: 6rem; }
  .header.is-compact .header__inner { min-height: 4.5rem; }
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: 7rem;
  padding-bottom: var(--s-5);
  overflow: hidden;
  isolation: isolate;
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--q-glow);
  pointer-events: none;
}

/* Hero-beeld: de vloot voor het pand. Dit is het bewijsstuk van de pagina —
   auto's, gevel en merkblauw in één beeld — dus het verloop erover is zo licht
   als verantwoord kan. Gemeten op de echte pixels haalt de witte tekst in het
   slechtste punt 7,9:1 (mobiel) en 9,5:1 (desktop); de norm is 4,5:1. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  filter: saturate(0.9) contrast(1.04);
}
/* Verloop over de foto. Mobiel staat de tekst onderaan, desktop links —
   daar moet het verloop dicht zijn; rechtsboven mag de foto open blijven,
   want de auto's en het gevelbord zijn het bewijsmateriaal. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7,17,28,.58) 0%,
    rgba(7,17,28,.16) 30%,
    rgba(7,17,28,.64) 62%,
    rgba(7,17,28,.88) 100%);
}
@media (min-width: 64rem) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(7,17,28,.45) 0%, rgba(7,17,28,.22) 34%, rgba(7,17,28,.62) 100%),
      linear-gradient(90deg,  rgba(7,17,28,.90) 0%, rgba(7,17,28,.80) 38%, rgba(7,17,28,.38) 66%, rgba(7,17,28,.06) 100%);
  }
}
.hero__inner { position: relative; width: 100%; }

.hero h1 { margin-bottom: var(--s-3); }
.hero h1 .line,
.hero h1 .accent { display: block; }

/* Regel-maskers voor de opklap-animatie; main.js zet er een om elke regel.
   De kop staat op line-height 0.98, terwijl Instrument Serif italic zo'n
   0,185em boven en onder die regelbox uitsteekt en Montserrat 0,12em.
   Zonder deze ruimte snijdt overflow:hidden de staarten af — zichtbaar bij
   de 'g' van 'dagen'. De negatieve marge haalt de toegevoegde ruimte weer
   uit de opmaak, dus de regelafstand verandert niet. */
.line-wrap {
  display: block;
  overflow: hidden;
  padding-block: 0.16em 0.26em;
  margin-block: -0.16em -0.26em;
}

.hero__sub {
  max-width: 46ch;
  margin: 0 0 var(--s-4);
  font-size: var(--fs-body-lg);
}

.hero .btn-row { margin-bottom: var(--s-4); }

/* Proof-strip onder de CTA's */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: var(--s-1) 0 0;
  list-style: none;
}
.proof-strip li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--q-mist);
}
.proof-strip b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--q-white);
  font-variant-numeric: tabular-nums;
}
.proof-strip .star { color: var(--q-blue-bright); }

@media (min-width: 48rem) {
  .hero { padding-bottom: var(--s-6); }
  .hero__sub { font-size: 1.25rem; }
}
@media (min-width: 64rem) {
  .hero { align-items: center; padding-top: 8rem; }
  .hero__inner { max-width: 66rem; }
}

/* ==========================================================================
   5. Secties
   ========================================================================== */

/* --- 5.0 Merkblauw als sectievlak ---------------------------------------
   Het logo omgekeerd toegepast: wit op blauw. Grote koppen en cijfers in
   wit (4,03:1 — voldoende voor tekst ≥24px), alle kleine tekst in ink
   (4,72:1 — voldoende op elke maat). Zo draagt het merkblauw echt vlak
   zonder dat er ergens onleesbare tekst ontstaat.
   ------------------------------------------------------------------------ */

.section--brand { background: var(--q-blue); color: var(--q-ink); }
.section--brand h2,
.section--brand .stat            { color: var(--q-white); }
.section--brand .accent          { color: var(--q-ink); }
.section--brand .eyebrow,
.section--brand p,
.section--brand .source,
.section--brand .stat-item__label { color: var(--q-ink); }
.section--brand .stat-item__rule { background: var(--q-ink); }
.section--brand .btn--ghost      { color: var(--q-ink); box-shadow: inset 0 0 0 1px var(--q-ink); }
.section--brand .btn--ghost:hover{ background: var(--q-ink); color: var(--q-white); }

/* --- 5.1 Marquee ------------------------------------------------------- */

.marquee-wrap {
  border-block: 1px solid var(--q-blue);
  background: var(--q-blue);
  overflow: hidden;
  position: relative;
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-wrap:hover .marquee,
.marquee-wrap:focus-within .marquee { animation-play-state: paused; }
.marquee.is-paused { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font: 700 1rem/1 var(--font-display);
  color: var(--q-ink);
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--q-ink);
}
.marquee__item span { color: var(--q-ink); font-weight: 400; font-family: var(--font-body); opacity: .75; }

.marquee-pause {
  position: absolute;
  right: var(--s-1);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem; height: 2.75rem;   /* 44px — minimale touch-target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--q-ink);
  background: transparent;
  color: var(--q-ink);
  cursor: pointer;
}
.marquee-pause:hover { background: var(--q-ink); color: var(--q-white); }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- 5.2 Bento-grid aanbod --------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: 1fr;      /* mobiel: één kolom, kaarten met tekst
                                      worden anders te smal op 390px */
  gap: var(--grid-gap);
}

.card-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.card-link .eyebrow { display: block; }
.card-link h3 { color: var(--q-white); }
.card-link p { margin: 0; }
.card-link .arrow-link { min-height: auto; margin-top: auto; padding-top: var(--s-1); }

.card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--s-1);
  color: var(--q-blue-bright);
}
.card__icon svg { width: 100%; height: 100%; }

/* Uitgelicht getal in een kaart (bijv. 83% AVB) */
.card__fact {
  font: 800 2rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--q-blue-bright);
  letter-spacing: -0.02em;
}

/* Kaart met een foto bovenin — tekst blijft op een effen vlak staan,
   zodat het contrast meetbaar blijft in plaats van van de foto af te hangen. */
.card--photo { padding: 0; gap: 0; overflow: hidden; }
.card--photo .card__media {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-bottom: 1px solid var(--q-ink-3);
}
.card--photo .card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(.9) contrast(1.04);
  transition: transform var(--t-slow) var(--ease-out);
}
.card--photo:hover .card__media img { transform: scale(1.04); }
.card--photo .card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
}

/* Merkkaart: hetzelfde recept als .section--brand — vol merkblauw met
   donkere tekst, want wit haalt op dit blauw maar 4,03:1. */
.card--brand.card { background: var(--q-blue); border-color: var(--q-blue); }
.card--brand.card:hover { border-color: var(--q-white); }
/* Kop in wit: 28–40px is grote tekst, dus 4,03:1 volstaat (norm 3:1).
   Alles daaronder blijft ink, want dat haalt 4,72:1 op elke maat. */
.card--brand.card-link h3 { color: var(--q-white); }
.card--brand.card-link p,
.card--brand .eyebrow,
.card--brand .arrow-link,
.card--brand .card__icon { color: var(--q-ink); }
.card--brand .feature-list li { color: var(--q-ink); }
.card--brand .feature-list li::before { background: var(--q-ink); }

/* Korte kenmerkenlijst — vult de hoofdkaart met inhoud in plaats van lucht */
.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.feature-list li {
  display: flex;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--q-mist);
}
.feature-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 2px;
  margin-top: 0.7em;
  background: var(--q-blue-bright);
}

@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__item--lead  { grid-column: span 6; }
  .bento__item--mid   { grid-column: span 3; }
  .bento__item--small { grid-column: span 3; }
}
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  /* rij 1: 7 + 5 · rij 2: 4 + 4 + 4 — geen gaten, geen dubbelhoge kaart */
  .bento__item--lead  { grid-column: span 7; }
  .bento__item--mid   { grid-column: span 5; }
  .bento__item--small { grid-column: span 4; }
  .bento__item--lead h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .bento__item--lead .card__icon { width: 3.25rem; height: 3.25rem; }
}

/* --- 5.3 Cijfers ------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-4);
}
.stat-item { position: relative; }
.stat-item .stat { display: block; color: var(--q-white); }
.stat-item .stat sup {
  font-size: 0.42em;
  vertical-align: super;
  color: var(--q-blue-bright);
  letter-spacing: 0;
}
.stat-item__label {
  margin: var(--s-1) 0 0;
  font: 700 0.9375rem/1.3 var(--font-display);
  color: var(--q-white);
}
.stat-item .source {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.5;
}
/* Kort streepje onder elk cijfer dat meetekent bij de count-up */
.stat-item__rule {
  display: block;
  width: 100%;
  height: var(--stripe-width);
  margin-top: var(--s-2);
  background: var(--stripe-color);
  transform: scaleX(0);
  transform-origin: left;
}

@media (min-width: 64rem) {
  /* Ruime tussenruimte: de vier cijfers moeten als losse bewijsstukken
     lezen, niet als een tabel. Kolom wordt daardoor 236px — vandaar de
     kleinere bijschriften hierboven. */
  .stats { grid-template-columns: repeat(4, 1fr); gap: var(--s-7); }
}

/* --- 5.3a Veegspoor --------------------------------------------------------
   Kaarten naast elkaar op smal scherm, raster op breed. Gestapelde kaarten
   zijn op mobiel geen vergelijking meer maar een lange scroll.

   Alleen kunnen vegen is niet genoeg: een spoor is pas een spoor als je ziet
   dát het er is. Vandaar de twee knoppen en de teller — die verschijnen
   alleen als er werkelijk iets buiten beeld staat, en doven aan het eind.
   Ze staan bóven het spoor, want kaarten zijn hoog: knoppen eronder zie je
   pas als je er al langs bent.
   ------------------------------------------------------------------------ */

.swipe__bar {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.swipe__bar.is-on { display: flex; }

.swipe__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--q-ink-3);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--q-white);
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.swipe__arrow:hover:not(:disabled) { background: var(--q-ink-2); border-color: var(--q-blue); }
.swipe__arrow:disabled { opacity: .3; cursor: default; }
.swipe__arrow svg { width: 1rem; height: 1rem; }
.swipe__arrow--prev svg { transform: rotate(180deg); }

.swipe__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--q-mist);
  font-variant-numeric: tabular-nums;
}

/* Het spoor zelf */
.swipe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--grid-gap);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--s-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  list-style: none;
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { scroll-snap-align: start; }
.swipe:focus-visible { outline: 2px solid var(--q-focus); outline-offset: 4px; }

/* In de lichte sectie zijn de knoppen donker op papier */
.section--light .swipe__arrow { border-color: var(--q-paper-line); color: var(--q-ink); }
.section--light .swipe__arrow:hover:not(:disabled) { background: var(--q-white); border-color: var(--q-blue-deep); }
.section--light .swipe__count { color: var(--q-paper-text); }

/* --- 5.3b Geslaagden ----------------------------------------------------
   Wekelijks vers materiaal van hun socials. main.js sorteert op datum,
   nieuwste eerst, en toont er standaard zes.
   ------------------------------------------------------------------------ */

/* Spoor komt uit .swipe; hier alleen wat eigen is aan dit blok. */
.passed { margin-block: 0; }

.passed__item { display: flex; flex-direction: column; gap: var(--s-2); }

.passed__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--q-ink-2);
  border: var(--border);
}
.passed__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 44% 42%;   /* onderwerp zit iets links van het midden */
}
/* Al staande foto's hoeven nauwelijks bijgesneden te worden */
.passed__photo--tall img { object-position: 50% 34%; }
.passed__photo--mid img  { object-position: 50% 42%; }

/* Placeholder tot de foto's er zijn */
.passed__photo--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(100% 80% at 50% 100%, rgba(0,133,203,.4) 0%, rgba(0,133,203,0) 70%),
    var(--q-ink-2);
}
.passed__photo--placeholder span {
  font: 800 3rem/1 var(--font-display);
  color: rgba(255,255,255,.16);
}

/* Blauwe balk onderaan de foto — het daklichtbord als vorm */
.passed__badge {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 0.75rem;
  background: var(--q-blue);
  color: var(--q-ink);
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.passed__name { margin: 0; font: 700 var(--fs-h4)/1.2 var(--font-display); color: var(--q-white); }
.passed__meta { margin: 0.25rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--q-mist); }

/* Sluittegel: door naar de socials */
.passed__more {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  position: relative;
  aspect-ratio: 4 / 5;
  padding: var(--s-3);
  overflow: hidden;
  background: var(--q-blue-deep);
  border: 1px solid var(--q-blue);
  color: var(--q-white);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.passed__more:hover { transform: scale(1.02); }
.passed__more img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.passed__more > * { position: relative; }
.passed__more strong { font: 700 var(--fs-h3)/1.15 var(--font-display); }
.passed__more span { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* Vier items (drie geslaagden + de Instagram-tegel): twee kolommen op
   tablet, vier op desktop. Drie kolommen zou een gat laten. */
@media (min-width: 48rem) {
  .passed {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}
@media (min-width: 64rem) {
  .passed { grid-template-columns: repeat(4, 1fr); }
}

/* --- 5.4 Instructeurs -------------------------------------------------- */


.person { display: flex; flex-direction: column; gap: var(--s-2); }
.person__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--q-ink-3);
  overflow: hidden;
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder-portret: monogram op merkvlak, expliciet gelabeld */
.person__portrait--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(0,133,203,.35) 0%, rgba(0,133,203,0) 70%),
    var(--q-ink-3);
}
.person__monogram {
  font: 800 4rem/1 var(--font-display);
  color: rgba(255,255,255,.14);
  letter-spacing: -0.04em;
}
.person__tag {
  position: absolute;
  left: 0; top: 0;
  padding: 0.25rem 0.5rem;
  background: var(--q-action);
  color: var(--q-ink);
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.person__name { margin: 0; font: 700 var(--fs-h4)/1.2 var(--font-display); color: var(--q-white); }
.person__role { display: block; margin-top: 0.25rem; }
.person p { margin: var(--s-1) 0 0; }

/* Drie instructeurs, drie lesauto's — op tablet en desktop drie kolommen. */
@media (min-width: 48rem) {
  .people {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* --- 5.5 Hoe het werkt (streep als tijdlijn) --------------------------- */

.steps { position: relative; }
.steps__track {
  position: absolute;
  left: 1rem; top: 0; bottom: 0;
  width: var(--stripe-width);
  overflow: visible;
}
.steps__list {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0 0 0 3rem;
  list-style: none;
}
.step { position: relative; }
.step__marker {
  position: absolute;
  left: -3rem;
  top: 0.125rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--q-ink);
  border: 1px solid var(--q-ink-3);
  font: 500 0.75rem/1 var(--font-mono);
  color: var(--q-mist);
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.step.is-active .step__marker {
  background: var(--q-action);
  border-color: var(--q-action);
  color: var(--q-ink);
}
.step h3 { margin-bottom: var(--s-1); color: var(--q-white); }
.step p { margin: 0; }

@media (min-width: 64rem) {
  .steps__track { left: 0; right: 0; top: 1rem; bottom: auto; width: auto; height: var(--stripe-width); }
  .steps__list { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); padding: 3.5rem 0 0; }
  .step__marker { left: 0; top: -3.5rem; }
}

/* --- 5.6 Agenda / events ------------------------------------------------
   Zelfonderhoudend: main.js verbergt data die voorbij zijn en toont de
   eerstvolgende drie. Raakt de lijst leeg, dan verschijnt .events__empty.
   Zo veroudert het blok nooit — briefing 6.5 waarschuwt terecht tegen
   tijdgebonden content die blijft staan.
   ------------------------------------------------------------------------ */

.events {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.event {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
}
.event[hidden] { display: none; }

/* Datumblok — het enige plek waar een blauw vlak een getal draagt */
.event__date {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--q-blue-deep);
  border: 1px solid var(--q-blue);
  color: var(--q-white);
  line-height: 1;
}
.event__day {
  font: 800 1.75rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.event__month {
  margin-top: 2px;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.event__body { min-width: 0; }
.event__body .eyebrow { display: block; margin-bottom: 0.375rem; }
.event__body h3 { color: var(--q-white); margin-bottom: 0.375rem; }
.event__body p { margin: 0; }
.event__meta {
  margin-top: 0.375rem !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--q-mist);
}

.event__action { display: grid; gap: var(--s-1); justify-items: start; }
.event__action .btn { width: 100%; }
.event__spots {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--q-blue-bright);
}

/* Leegstaat: alle data zijn verstreken */
.events__empty {
  padding: var(--s-4);
  border: 1px dashed var(--q-ink-3);
  background: var(--q-ink-2);
  text-align: center;
}
.events__empty p { margin: 0 0 var(--s-2); }
.events__empty p:last-child { margin: 0; }

@media (min-width: 40rem) {
  .event { grid-template-columns: auto 1fr; }
  .event__action { grid-column: 2; justify-items: stretch; }
  .event__action .btn { width: auto; justify-self: start; }
}
@media (min-width: 64rem) {
  /* Vaste breedte voor de actiekolom. Met "auto" bepaalt de lengte van de
     plaatsen-tekst de kolombreedte, en dan staat elke knop op een andere
     plek — elke kaart is immers zijn eigen grid. */
  .event { grid-template-columns: auto 1fr 14rem; gap: var(--s-4); }
  .event__action { grid-column: 3; justify-items: stretch; text-align: right; }
  .event__action .btn { width: 100%; justify-self: stretch; }
  .event__date { width: 5.5rem; height: 5.5rem; }
  .event__day { font-size: 2.25rem; }
}

/* --- 5.6 Tarieven ------------------------------------------------------ */

/* Spoor op mobiel (uit .swipe), raster vanaf tablet. Kaartbreedte wat
   ruimer dan standaard: een pakket heeft een prijs en een featurelijst
   nodig die niet mag afbreken. */
.plans { grid-auto-columns: 84%; }
.plan { display: flex; flex-direction: column; gap: var(--s-2); }
.plan__name { font: 700 var(--fs-h4)/1.2 var(--font-display); color: var(--q-white); margin: 0; }
.plan__price {
  font: 800 2.5rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--q-white);
}
.plan__price small {
  display: block;
  margin-top: 0.25rem;
  font: 400 0.875rem/1.4 var(--font-body);
  color: var(--q-mist);
  letter-spacing: 0;
}
.plan--featured .plan__price small,
.plan--featured .plan__list li { color: rgba(255,255,255,.88); }
.plan__list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-grow: 1;
  display: grid;
  gap: 0.5rem;
}
.plan__list li {
  display: flex;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--q-mist);
}
.plan__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 2px;
  margin-top: 0.7em;
  background: var(--q-blue-bright);
}
.plan__badge {
  align-self: start;
  padding: 0.25rem 0.5rem;
  background: var(--q-action);
  color: var(--q-ink);
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.plan .btn { margin-top: var(--s-1); }

/* Termijnbetaling is een bezwaar-wegnemer bij een pakket van ruim €2.000 —
   concurrenten adverteren ermee. Daarom een eigen vlak in plaats van een
   grijze regel onderaan. Wit op blue-deep haalt 5,45:1. */
.plans-pay {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: var(--s-3);
  background: var(--q-blue-deep);
  border: 1px solid var(--q-blue);
  color: var(--q-white);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.plans-pay svg { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; }
.plans-pay b { font-family: var(--font-display); font-weight: 700; }

.plans-note {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--border);
  font-size: 0.9375rem;
  color: var(--q-mist);
}
.plans-note b { color: var(--q-white); font-variant-numeric: tabular-nums; }

@media (min-width: 48rem) {
  .plans {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    gap: var(--s-3) var(--grid-gap);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* De drie kaarten delen één rijenraster, zodat naam, prijs, lijst en knop
     over de kaarten heen op dezelfde hoogte staan. Zonder dit duwt de badge
     "Meest gekozen" alle inhoud van de middelste kaart omlaag.
     Rijen: badge · naam · prijs · lijst · knop. */
  @supports (grid-template-rows: subgrid) {
    .plans { grid-template-rows: auto auto auto 1fr auto; }

    .plan {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
    .plan__badge { grid-row: 1; justify-self: start; align-self: start; }
    .plan__name  { grid-row: 2; }
    .plan__price { grid-row: 3; }
    .plan__list  { grid-row: 4; }
    .plan > .btn { grid-row: 5; margin-top: 0; }
  }
}

/* --- 5.7 Reviews (lichte sectie) --------------------------------------- */

.section--light .card {
  background: var(--q-white);
  border-color: var(--q-paper-line);
}
.section--light .card:hover { border-color: var(--q-blue-deep); }
.section--light h2,
.section--light h3,
.section--light .stat { color: var(--q-ink); }

/* Scorebadges en reviewkaarten delen één griddefinitie — zelfde kolommen,
   zelfde tussenruimte — zodat ze op elke breedte exact even breed zijn.
   Twee losse definities liepen op tabletformaat uit elkaar. */
/* De scores staan los bovenaan: twee compacte badges naast elkaar, ook op
   het smalste scherm. De citaten eronder zijn een eigen blok. */
.score-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.reviews { grid-auto-columns: 80%; }
.score {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--q-paper-line);
  background: var(--q-white);
}
.score__value {
  font: 800 1.75rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--q-ink);
  letter-spacing: -0.02em;
}
.score__meta { font-size: 0.75rem; line-height: 1.35; color: var(--q-paper-text); }
.score__meta b { display: block; color: var(--q-ink); font-size: 0.875rem; }
.score__meta .star { display: block; }
@media (min-width: 30rem) {
  .score__meta { font-size: 0.8125rem; }
  .score__meta b { font-size: 0.9375rem; }
  .score__meta .star { display: inline; }
}
.score .star { color: var(--q-blue-deep); }  /* 5,45:1 op wit */


.review { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.review blockquote {
  margin: 0;
  font: 700 1.0625rem/1.45 var(--font-display);
  color: var(--q-ink);
}
.review figcaption {
  font-size: 0.8125rem;
  color: var(--q-paper-text);
  margin-top: auto;
}
.review figcaption b { color: var(--q-ink); }
.review__stars { color: var(--q-blue-deep); letter-spacing: 0.1em; font-size: 0.875rem; }

/* Smallere kaarten dan de standaard 32px binnenmarge aankan */
.review.card { padding: var(--s-3); }
.review blockquote { font-size: 1rem; }

@media (min-width: 48rem) {
  .reviews {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    gap: var(--s-5);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .score-row { gap: var(--s-3); }
}
@media (min-width: 64rem) {
  /* Vier kolommen, ook al staan er maar twee badges: badge 1 valt samen
     met kaart 1, badge 2 met kaart 2. */
  .score-row,
  .reviews { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
}

/* --- 5.8 Lesgebied ----------------------------------------------------- */

.area {
  display: grid;
  gap: var(--s-4);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 0.4375rem 0.75rem;
  border: var(--border);
  background: var(--q-ink-2);
  font-size: 0.875rem;
  color: var(--q-mist);
}
.chips li.is-home {
  border-color: var(--q-blue);
  background: var(--q-ink-3);
  color: var(--q-white);
  font-weight: 600;
}

/* Abstracte kaart i.p.v. Google Maps-embed (performance, briefing 7.3 §9) */
.area__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--border);
  background: var(--q-ink-2);
  overflow: hidden;
}
.area__map svg { width: 100%; height: 100%; }

@media (min-width: 64rem) {
  .area { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--s-6); }
}

/* --- 5.9 FAQ ----------------------------------------------------------- */

.faq { max-width: 52rem; }
.faq details {
  border-bottom: var(--border);
}
.faq details:first-of-type { border-top: var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  min-height: var(--touch-min);
  cursor: pointer;
  list-style: none;
  /* Kleiner dan een H4: een vraag is geen kop, en op mobiel liepen ze
     over drie regels. */
  font: 700 1.0625rem/1.35 var(--font-display);
  color: var(--q-white);
}
.faq__body p { font-size: 0.9375rem; }
@media (min-width: 48rem) {
  .faq summary { font-size: 1.1875rem; }
  .faq__body p { font-size: var(--fs-body); }
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-right: 2px solid var(--q-blue-bright);
  border-bottom: 2px solid var(--q-blue-bright);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--q-blue-bright); }
.faq__body { padding-bottom: var(--s-3); }
.faq__body p { margin: 0 0 var(--s-2); max-width: 60ch; }
.faq__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   6. Slot-CTA + formulier
   ========================================================================== */

.closer {
  position: relative;
  background: var(--q-ink-2);
  border-top: var(--border);
  overflow: hidden;
  isolation: isolate;
}
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--q-glow);
}
.closer__grid { display: grid; gap: var(--s-5); }
.closer h2 { margin-bottom: var(--s-2); }
.closer__lead { font-size: var(--fs-body-lg); max-width: 40ch; }

.contact-list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: var(--border);
  list-style: none;
}
.contact-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
.contact-list svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--q-blue-bright); margin-top: 2px; }
.contact-list a { color: var(--q-white); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-list span { color: var(--q-mist); }

/* Formulier */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 0.5rem; }
.field label {
  font: 600 0.875rem/1 var(--font-body);
  color: var(--q-white);
}
.field label .req { color: var(--q-blue-bright); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 var(--s-2);
  border: 1px solid var(--q-ink-3);
  border-radius: var(--radius);
  background: var(--q-ink);
  color: var(--q-white);
  font: 400 var(--fs-body)/1.4 var(--font-body);
  transition: border-color var(--t-fast) var(--ease-out);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--q-blue-bright) 50%),
                    linear-gradient(135deg, var(--q-blue-bright) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-5);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--q-mist); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--q-blue); }
.field input::placeholder { color: var(--q-placeholder); }
.field--error input,
.field--error select { border-color: var(--q-error); }
.field__error {
  font-size: 0.8125rem;
  color: var(--q-error);
  min-height: 1rem;
}

/* Honeypot — onzichtbaar voor mensen, wel voor bots */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__consent { font-size: 0.8125rem; color: var(--q-mist); margin: 0; }
.form__consent a { color: var(--q-blue-bright); }

.form-status {
  padding: var(--s-2);
  border-left: 3px solid transparent;
  font-size: 0.9375rem;
}
.form-status:empty { display: none; }
.form-status[data-state="success"] {
  border-color: var(--q-blue-bright);
  background: rgba(255,210,63,.08);
  color: var(--q-white);
}
.form-status[data-state="error"] {
  border-color: var(--q-error);
  background: rgba(255,138,128,.08);
  color: var(--q-white);
}

.check-anim {
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 0.5rem;
  vertical-align: -3px;
}
.check-anim path {
  fill: none;
  stroke: var(--q-blue-bright);
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: draw-check var(--t-slow) var(--ease-out) forwards;
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }

@media (min-width: 64rem) {
  .closer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
}

/* ==========================================================================
   7. Footer + sticky mobiele balk
   ========================================================================== */

.footer {
  padding-block: var(--s-6) var(--s-5);
  border-top: var(--border);
  font-size: 0.9375rem;
}
.footer__grid {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.footer h2 {
  font: 700 0.8125rem/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--q-blue-bright);
  margin: 0 0 var(--s-2);
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.footer a { color: var(--q-mist); text-decoration: none; }
.footer a:hover { color: var(--q-white); }
.footer__brand p { margin: var(--s-2) 0 0; max-width: 32ch; }
.footer__hours { display: grid; gap: 0.25rem; }
.footer__hours div { display: flex; justify-content: space-between; gap: var(--s-2); max-width: 18rem; color: var(--q-mist); }
.footer__hours dt { color: var(--q-mist); }
.footer__hours dd { margin: 0; color: var(--q-white); font-variant-numeric: tabular-nums; }

.footer__social { display: flex; gap: var(--s-1); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  padding-top: var(--s-3);
  border-top: var(--border);
  font-size: 0.8125rem;
  color: var(--q-mist);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer__legal span { font-family: var(--font-mono); }

@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-5); } }

/* Sticky onderbalk — alleen mobiel, twee knoppen (briefing 9.3) */
.sticky-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky-bar);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1px;
  background: var(--q-ink-3);
  border-top: var(--border);
  transform: translateY(110%);
  transition: transform var(--t-base) var(--ease-out);
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar .btn { min-height: 3.5rem; border-radius: 0; }
.sticky-bar .btn { padding-inline: var(--s-2); font-size: 0.9375rem; }

body { padding-bottom: 0; }
@media (max-width: 63.999rem) {
  body.has-sticky-bar { padding-bottom: 3.5rem; }
}
@media (min-width: 64rem) { .sticky-bar { display: none; } }

/* ==========================================================================
   8. Motion — basisstaten voor scroll-reveals
   GSAP zet deze om; zonder JS blijft alles zichtbaar (zie .no-js hieronder).
   ========================================================================== */

.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
.js [data-reveal="up"]    { transform: translate3d(0, 24px, 0); }
.js [data-reveal="scale"] { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee { animation: none !important; }
  .stat-item__rule { transform: scaleX(1) !important; }
}

/* ==========================================================================
   9. Verify-modus — interne NEO-review, aan met ?verify=1
   Markeert elk cijfer/gegeven dat nog bij Anoir bevestigd moet worden.
   ========================================================================== */

body.verify [data-verify] {
  outline: 2px dashed #FF3D9A;
  outline-offset: 3px;
  position: relative;
}
body.verify [data-verify]::after {
  content: "VERIFIËREN: " attr(data-verify);
  position: absolute;
  left: 0; bottom: 100%;
  z-index: 5;
  padding: 2px 6px;
  background: #FF3D9A;
  color: #FFFFFF;
  font: 500 0.625rem/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}
.verify-banner { display: none; }
body.verify .verify-banner {
  display: block;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: var(--s-1) var(--s-2);
  background: #FF3D9A;
  color: #FFFFFF;
  font: 500 0.75rem/1.4 var(--font-mono);
  text-align: center;
}

/* ==========================================================================
   10. Stub-pagina's (subpagina's, nog niet uitgewerkt — briefing 7.1)
   ========================================================================== */

.stub {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 8rem var(--s-6);
  position: relative;
  isolation: isolate;
}
.stub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--q-glow);
}
.stub__inner { max-width: 44rem; }
.stub h1 { margin-bottom: var(--s-3); }
.stub__lead { font-size: var(--fs-body-lg); margin: 0 0 var(--s-4); }
.stub .stripe { margin-bottom: var(--s-4); }
.stub__note {
  margin-top: var(--s-5);
  padding: var(--s-3);
  border-left: 3px solid var(--q-blue);
  background: var(--q-ink-2);
  font-size: 0.9375rem;
}
.stub__note b { color: var(--q-white); }
.stub__note p { margin: 0; }
.stub__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  font: 500 var(--fs-eyebrow)/1 var(--font-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--q-blue-bright);
  text-decoration: none;
  min-height: var(--touch-min);
}
.stub__back:hover { color: var(--q-white); }