/* ==========================================================================
   Naweed Taxi — v2
   Zwart en goud, uit het logo. Zelf gehoste fonts, geen externe verzoeken.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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+2212, U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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+2212, U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Het blauwe uur uit de hero: de schaduwen op de natte auto zijn blauw,
     de lucht erachter ook. Vlakken zijn daarom blauw; goud blijft de kleur
     van alles waar je op klikt en van elk opschrift. */
  --ink: #060910;
  --ink-2: #0d1523;
  --panel: #121c2c;
  --line: #223047;
  --line-warm: #3a2f1c;

  /* De rand van iets waar je op klikt of in typt — niet dezelfde als de rust-
     lijn hierboven. WCAG 1.4.11 vraagt voor de omtrek van een bedienelement
     3:1; `--line` haalt op de donkerblauwe grond maar 1,50:1, en daarmee is
     een invoerveld voor wie minder scherp ziet gewoon niet te vinden. Deze
     haalt 3,71:1 op `--ink` en 3,18:1 op `--panel`, in dezelfde blauwe
     toon. De scheidingslijnen blijven bewust rustig: die dragen geen
     bediening, alleen ritme. */
  --rand: #4c6b9f;

  /* De lijn tussen twee secties. Eén waarde, overal dezelfde — tot 21-09-2026
     was hij goud waar een sectie begon en rustig blauw waar een gekleurd vlak
     eindigde. Dat was bedoeld als systeem, maar wie de pagina voor het eerst
     ziet leest het niet als systeem: die ziet "soms goud, soms blauw". Een
     regel die je moet uitleggen doet niets voor de bezoeker. De gekleurde
     vlakken onderscheiden zich al door hun achtergrond; de lijn hoeft dat niet
     te herhalen. */
  --rand-sectie: color-mix(in srgb, var(--gold-deep) 55%, transparent);

  /* Drie tinten goud: koplamp, logo, mat oud goud in rust. */
  --beam: #ffd9a0;
  --gold: #e8a33d;
  --gold-2: #c4832a;
  --gold-deep: #7c5216;

  /* De letterkleur op een gouden vlak. Stond zevenmaal als losse waarde in
     het bestand; nu op één plek, zodat een andere goudtint niet zeven
     vergeten plekken achterlaat. */
  --op-goud: #1a1204;

  --paper: #ecf0f4;
  --dim: #949daa;

  --danger: #e0764f;

  /* De enige plek waar een derde kleur staat: het stipje voor "nu
     bereikbaar" in de hero. Bewuste uitzondering op de gouden regel,
     besloten op 14-09-2026 — groen leest overal als "nu aan", goud zou hier
     als opschrift gelezen worden. */
  --live: #8fd0a3;

  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 40px);

  --step-0: 1.0625rem;
  --step--1: 0.9375rem;
  --step--2: 0.8125rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.6rem, 2.6vw, 2.1rem);
  --step-4: clamp(2rem, 4.4vw, 3.2rem);
  --step-5: clamp(2.6rem, 7.4vw, 5.2rem);

  /* Twee sterke curves, elk voor zijn eigen soort beweging. Hover- en
     kleurovergangen krijgen bewust het zachte `ease` van de browser:
     een quint-curve op een kleurwissel is overdreven. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* in- en uitgaand */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* bewegen over het scherm */

  color-scheme: dark;
}

/* --- Basis ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

/* Eigen display-waarden winnen anders van het hidden-attribuut. */
[hidden] {
  display: none !important;
}

/* De vlakken die de browser zelf tekent horen ook bij het ontwerp. */
::selection {
  background: var(--gold);
  color: var(--ink);
}
:root {
  scrollbar-color: var(--gold-deep) var(--ink);
  scrollbar-width: thin;
  accent-color: var(--gold);
  caret-color: var(--beam);
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-deep);
  border: 3px solid var(--ink);
  border-radius: 99px;
}

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

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

h1,
h2,
h3 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 18px;
  font-weight: 600;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* --- Knoppen -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, transform 220ms var(--ease-out);
}
/* Indrukken snapt, loslaten loopt rustiger uit. Een schaalstap leest als
   een druk; een verschuiving van 1px leest als wegglijden. */
.btn:active {
  transform: scale(0.97);
  transition: transform 160ms var(--ease-out);
}

.btn-gold {
  background: var(--gold);
  color: var(--op-goud);
  box-shadow: 0 10px 26px -14px rgba(232, 163, 61, 0.9);
}

.btn-line {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 30%, transparent);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* --- Kop / navigatie ------------------------------------------------------ */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  /* backdrop-filter bewust NIET in deze lijst: het is geen GPU-eigenschap
     en dwingt elke frame een hercompositie van alles achter de balk. */
  transition: background-color 280ms ease, border-color 280ms ease;
  border-bottom: 1px solid transparent;
}
.top.is-stuck {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom-color: var(--line);
}

.top-in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  text-decoration: none;
  flex: none;
}
.brand picture,
.brand img {
  display: block;
  height: 40px;
  width: auto;
}
.brand span {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a {
  font-size: var(--step--1);
  color: var(--paper);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

/* Welke sectie je bekijkt — geldt ook op een aanraakscherm, dus buiten
   het hover-poortje. */
.nav a.is-current {
  color: var(--beam);
  border-bottom-color: var(--gold);
}

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  padding: 2px;
  flex: none;
}
.lang :is(button, a) {
  /* De gegenereerde pagina's onder /en/ gebruiken een <a> in plaats van een
     <button> — een zoekmachine volgt geen knop. `:is(button, a)` weegt precies
     even zwaar als `button` alleen (beide zijn een typeselector), dus er
     verschuift niets aan de bestaande opmaak. */
  text-decoration: none;
  text-align: center;
  background: none;
  border: 0;
  color: var(--dim);
  font: inherit;
  font-size: var(--step--2);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.lang :is(button, a).is-on {
  background: var(--gold);
  color: var(--op-goud);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  position: relative;
  flex: none;
}
.burger i {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: var(--paper);
  transition: transform 240ms var(--ease-in-out), opacity 160ms ease;
}
.burger i:nth-child(1) {
  top: 14px;
}
.burger i:nth-child(2) {
  top: 20px;
}
.burger i:nth-child(3) {
  top: 26px;
}
.burger[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 clamp(36px, 6vh, 64px);
  overflow: hidden;
  background: var(--ink) url("../assets/img/hero-tiny.jpg") center / cover no-repeat;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media picture,
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
/* De video legt zich over het posterbeeld zodra hij echt loopt. */
.hero-media video {
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero-media video.is-live {
  opacity: 1;
}

/* Het beeld is donker maar niet overal; de tekst krijgt zijn eigen grond. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      to top,
      rgba(7, 8, 13, 0.94) 0%,
      rgba(7, 8, 13, 0.72) 26%,
      rgba(7, 8, 13, 0.18) 58%,
      rgba(7, 8, 13, 0.5) 100%
    ),
    radial-gradient(
      120% 90% at 15% 90%,
      rgba(7, 8, 13, 0.8) 0%,
      rgba(7, 8, 13, 0) 62%
    );
}

/* Geen breedte hier: .shell bepaalt die al, en een width:100% zou dat
   stilletjes overschrijven omdat deze regel later staat. */
.hero-in {
  position: relative;
  z-index: 2;
}

/* Glas, omdat er bewegend beeld achter ligt en de tekst leesbaar moet
   blijven op elk frame — niet als versiering. */
.hero-panel {
  max-width: 47rem;
  padding: clamp(26px, 4vw, 40px);
  background: color-mix(in srgb, var(--ink) 58%, transparent);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  border-top: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: 2px;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95);
}

.hero h1 {
  font-size: var(--step-5);
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  max-width: 44ch;
  margin-bottom: 28px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.hero-fact {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--gold-deep) 70%, transparent);
  font-size: var(--step--1);
  color: var(--dim);
}
.hero-fact b {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--beam);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- Secties -------------------------------------------------------------- */

.band {
  padding-block: clamp(74px, 10vw, 132px);
  position: relative;
}
.band-alt {
  background: var(--ink-2);
}

.band-head {
  max-width: 46rem;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.band-head h2 {
  font-size: var(--step-4);
  font-variation-settings: "wdth" 112;
  margin-bottom: 16px;
}
.band-head p {
  color: var(--dim);
  max-width: 62ch;
}

/* --- Diensten: een lijst met ritten, geen rooster met kaartjes ------------- */

.runs {
  border-top: 1px solid var(--line);
}
.run {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 32px;
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.run h3 {
  font-size: var(--step-3);
  font-variation-settings: "wdth" 106;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.run p {
  grid-column: 1 / -1;
  color: var(--dim);
  max-width: 68ch;
  font-size: var(--step--1);
}
.run-tag {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Werkgebied ----------------------------------------------------------- */

/* De drie kolommen lopen ongelijk af: de eerste heeft twee alinea's, de andere
   elk een. Met een streep onder de kop hing die rafelige onderkant er los bij.
   De streep staat nu bovenaan, over de volle kolombreedte: dan beginnen de drie
   op een lijn en leest de ongelijke onderkant als bedoeld — dezelfde greep als
   bij de dienstenlijst, waar de scheidingslijnen het werk doen. */
.regions {
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  /* min() eromheen: kaal is 19rem een harde ondergrens, dus onder 344px
     schoven de kolommen buiten het scherm. Nu geeft de kolom mee zodra er
     minder ruimte is dan 19rem. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.region {
  padding-top: 18px;
  border-top: 1px solid var(--line-warm);
}
.region h3 {
  font-size: var(--step-2);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  margin-bottom: 14px;
}
.region p {
  color: var(--dim);
  font-size: var(--step--1);
  max-width: 60ch;
}
.region p + p {
  margin-top: 12px;
}

/* --- Kleine notitieregel onder een blok ----------------------------------- */

.note {
  color: var(--dim);
  font-size: var(--step--2);
  max-width: 68ch;
}

/* --- Formuliervelden ------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field > span {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--dim);
}
.field .opt {
  font-weight: 400;
  color: color-mix(in srgb, var(--dim) 78%, transparent);
}

input,
select,
textarea {
  font: inherit;
  font-size: var(--step--1);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--rand);
  border-radius: 3px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
input::placeholder,
textarea::placeholder {
  /* 74% gaf 4,08:1 en zakte daarmee onder de eis van 4,5:1. */
  color: color-mix(in srgb, var(--dim) 88%, transparent);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 2px;
}
textarea {
  resize: vertical;
  min-height: 104px;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px),
    calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

input[type="range"] {
  padding: 0;
  border: 0;
  background: transparent;
  height: 26px;
}

input[aria-invalid="true"] {
  border-color: var(--danger);
}
.err {
  font-size: var(--step--2);
  color: var(--danger);
  min-height: 1.1em;
}

/* --- Keuze normaal of VIP ------------------------------------------------- */

.keuze {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 16px 16px;
  margin: 0;
  min-width: 0;
}
.keuze legend {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--gold);
  padding: 0 6px;
}
.keuze-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.keuze-rij label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--step--1);
  cursor: pointer;
  /* 44px is de ondergrens voor iets dat met een duim geraakt moet worden. */
  min-height: 44px;
}
/* Het basisveld maakt inputs 100% breed; een keuzerondje wil dat niet. */
.keuze-rij input[type="radio"] {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.keuze-rij label:has(input:checked) {
  color: var(--beam);
}
/* De naam en de uitleg staan als aparte elementen in de HTML, zodat een
   voorstel ze uit elkaar kan trekken. Hier plakt de dubbele punt ze weer
   aan elkaar: „VIP: chauffeur in pak, iets te drinken“. */
.keuze-uitleg::before {
  content: ": ";
}

/* --- Veelgestelde vragen -------------------------------------------------- */

/* Twee kolommen: links de kop met de uitnodiging om gewoon te bellen, rechts
   de vragen. De linkerkolom loopt mee zolang er rechts nog vragen langskomen,
   zodat het telefoonnummer in beeld blijft juist wanneer iemand zit te zoeken.
   Onder 64 rem staan ze onder elkaar en plakt er niets. */
.faq-wrap {
  display: grid;
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 64rem) {
  .faq-wrap {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
  .faq-kop {
    position: sticky;
    top: 100px;
  }
}
.faq-kop h2 {
  font-size: var(--step-4);
  font-variation-settings: "wdth" 112;
  line-height: 1.02;
  letter-spacing: -0.034em;
  margin-bottom: 16px;
}
.faq-kop p {
  color: var(--dim);
  font-size: var(--step--1);
  margin: 0 0 22px;
  max-width: 42ch;
}
.faq-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--beam);
  font-variant-numeric: tabular-nums;
}
.faq-tel svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.012em;
  transition: color 0.16s ease;
}
.faq summary::-webkit-details-marker {
  display: none;
}

/* Het teken rechts. Dicht: een vierkantje met een goud plusteken. Open:
   hetzelfde vierkantje gedraaid en vol goud — de vorm wordt een ruit en het
   plusteken erin een kruis. Geen tweede pictogram dus, alleen een draai. */
.faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-warm);
  border-radius: 2px;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 11px no-repeat;
  transition: transform 320ms var(--ease-out), background-color 200ms ease,
    border-color 200ms ease;
}
/* Open is het een vlakke gouden ruit: het plusteken verdwijnt, want de
   gedraaide, gevulde vorm zegt al genoeg. */
.faq details[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--gold);
  background-image: none;
  border-color: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover::after {
    border-color: var(--gold);
  }
}

.faq .answer {
  padding: 0 0 22px;
  color: var(--dim);
  max-width: 62ch;
  /* Vast, niet alleen tijdens de beweging: een antwoord is lopende tekst,
     daar valt niets af te snijden wat er uit hoort te steken. */
  overflow: hidden;
}
.faq .answer p + p {
  margin-top: 12px;
}

/* --- Boeken --------------------------------------------------------------- */

.book {
  display: grid;
  gap: clamp(32px, 5vw, 66px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .book {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
}

/* Contactgegevens en betaalwijzen delen één kolom naast het formulier. */
.book > .kolom {
  min-width: 0;
}

.reach dt {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 5px;
}
.reach dd {
  margin: 0 0 22px;
  font-size: var(--step-1);
}
.reach dd a {
  text-decoration: none;
  border-bottom: 1px solid var(--gold-deep);
  transition: color 0.16s ease, border-color 0.16s ease;
}
.reach dd small {
  display: block;
  font-size: var(--step--1);
  color: var(--dim);
}

/* --- Betaalwijzen ---------------------------------------------------------- */

/* Geen nagetekende merklogo's: die zijn beschermd, hebben eigen richtlijnen en
   zouden met goud op blauw vechten. Een typografische strook is scherp op elk
   scherm, weegt niets en hoort bij de rest van de pagina. */
.betalen {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--gold-deep);
}
.betalen h3 {
  font-size: var(--step--2);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0;
  margin-bottom: 14px;
}
.betaalwijzen {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.betaalwijzen li {
  padding: 7px 12px;
  border: 1px solid var(--line-warm);
  border-radius: 3px;
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
}

.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.form-grid .wide {
  grid-column: 1 / -1;
}
.form-foot {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.form-foot .note {
  flex: 1 1 18rem;
}

/* Wat er na het indrukken gebeurt. Zonder dit blijft de bezoeker achter met
   een ingevuld formulier en geen enkel teken dat er iets gebeurd is. */
.sent {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line-warm);
  border-radius: 4px;
}
.sent p {
  color: var(--paper);
  font-size: var(--step--1);
  max-width: 58ch;
  margin-bottom: 16px;
}
.sent b {
  color: var(--beam);
  font-weight: 600;
}
.sent-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sent-acties .btn {
  padding: 11px 18px;
  font-size: var(--step--1);
}

/* --- Voet ----------------------------------------------------------------- */

.foot {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(46px, 6vw, 72px) 34px;
  font-size: var(--step--1);
}
.foot-in {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Het logo sluit de pagina af zoals het hem opent. Het staat op de plek van
   het kopje van de eerste kolom: het merk ís het kopje van dat blok. */
.foot-logo {
  height: 44px;
  width: auto;
  margin-bottom: 18px;
}

.foot h4 {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 104;
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--dim);
  margin: 0 0 14px;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot li {
  margin-bottom: 9px;
  color: var(--dim);
}
.foot a {
  text-decoration: none;
  color: var(--paper);
}
/* Deze markering bestond wel in de code en niet op het scherm: .foot li
   (0,1,1) en .reach dd small (0,1,2) wonnen van .todo (0,1,0). Nu
   specifieker, en met een rand erbij — kleur alleen is geen signaal voor
   wie kleuren niet onderscheidt. */
.todo,
.foot li.todo,
.doc li.todo,
.doc p.todo,
.reach dd small.todo {
  color: var(--beam);
  border-left: 1px solid var(--gold);
  padding-left: 10px;
}
/* In een flag-kader draagt het kader het signaal al. */
.flag .todo {
  color: var(--paper);
  border-left: 0;
  padding-left: 0;
}
.foot-end {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--dim);
  font-size: var(--step--2);
}

/* --- Losse pagina's (voorwaarden, privacy) -------------------------------- */

.doc {
  padding-block: 140px clamp(70px, 9vw, 110px);
  max-width: 46rem;
}
.doc h1 {
  font-size: var(--step-4);
  font-variation-settings: "wdth" 112;
  margin-bottom: 14px;
}
.doc h2 {
  font-size: var(--step-2);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  margin: 46px 0 12px;
}
.doc p,
.doc li {
  color: var(--dim);
  max-width: 68ch;
}
.doc p + p,
.doc ul {
  margin-top: 12px;
}
.doc .lead {
  color: var(--paper);
  font-size: var(--step-1);
}
.doc ul {
  padding-left: 1.1em;
}
.doc li {
  margin-bottom: 7px;
}
.flag {
  border-left: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  padding: 16px 18px;
  margin: 22px 0;
  border-radius: 0 3px 3px 0;
}
.flag p {
  color: var(--paper);
  font-size: var(--step--1);
}

/* --- Goud: opschriften en grenzen ---------------------------------------- */

/* Eén regel, overal toegepast: waar een sectie begint of eindigt en waar
   iets een naam krijgt, is goud. Binnenin blijven de lijnen rustig, anders
   verliest het merk zijn nadruk. */

.band {
  border-top: 1px solid var(--rand-sectie);
}
/* Het alt-vlak krijgt zijn eigen rustige rand verderop (--line), dus hier
   geen gouden bovenrand meer. */
.band-alt {
  border-top: 0;
}
.hero + .band {
  border-top: 0;
}

.band-head h2 {
  border-left: 1px solid var(--gold);
  padding-left: 18px;
  margin-left: -19px;
}
.doc h2 {
  border-left: 1px solid var(--gold);
  padding-left: 18px;
  margin-left: -19px;
}

.runs,
.faq {
  border-top-color: var(--gold-deep);
}
.run,
.faq details {
  border-bottom-color: var(--line-warm);
}

.region {
  border-top-color: var(--gold-deep);
}
.sent {
  border-color: var(--gold-deep);
}

/* Opschriften dragen goud, de tekst eronder niet. */
.reach dt,
.foot h4 {
  color: var(--gold);
}

.foot {
  border-top-color: var(--rand-sectie);
}
.foot-end {
  border-top-color: var(--line-warm);
}

/* --- Beeldband, meelopende kop, vlakken ----------------------------------- */

/* Tot 12 september 2026 lag dit alles achter de schakelaar, elk punt aan
   zijn eigen attribuut op <html>.
   Voorstel 4 is gekozen en hier samengevoegd: wat hieronder staat is nu de
   gewone opmaak van de pagina. De afwegingen blijven bij de regels staan,
   want ze verklaren waarom het zo staat. */

/* Beeldband. Één beeld halverwege breekt de tekstwoestijn precies waar hij
   het langst is. */

.beeldband {
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  min-height: clamp(230px, 25vw, 330px);
  overflow: hidden;
  border-top: 1px solid var(--rand-sectie);
  border-bottom: 1px solid var(--rand-sectie);
}
/* Het beeld ligt eronder als laag, niet ernaast als kolom. Anders bepaalt het
   zelf de hoogte van de band: 1280x720 over de volle breedte is bijna een heel
   scherm vol, en een band moet een band blijven. Nu bepaalt de tekst plus de
   min-height hoe hoog hij wordt en vult het beeld wat er is. */
.beeldband > picture {
  position: absolute;
  inset: 0;
  display: block;
}
.beeldband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Het beeld is al tot een band gesneden; wat er bij smallere schermen nog
     af moet, gaat van boven weg — de lucht mist niemand, het platform met de
     pieren is waar het om gaat. */
  object-position: 50% 62%;
}
/* Twee lagen: een verloop van links zodat de regel leesbaar blijft, en een
   vlakke demping over het geheel zodat het beeld niet met de hero concurreert
   om de aandacht. */
.beeldband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent) 2%, color-mix(in srgb, var(--ink) 52%, transparent) 44%, transparent 76%),
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 34%, transparent), transparent 55%);
  pointer-events: none;
}
.beeldband-in {
  position: relative;
  z-index: 2;
  padding-block: clamp(34px, 5vw, 56px);
}
/* De balk was het overtuigendste beeld in het midden van de pagina en leidde
   nergens heen. Een echte verwijzing eronder — geen klikbaar vlak van 330px
   hoog, want dat slikt het selecteren van de tekst op. */
.beeldband-ga {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--beam);
  text-decoration: none;
}
.beeldband-ga svg {
  width: 16px;
  height: 16px;
  /* Niet `gap` op de ouder animeren: dat is een layout-eigenschap en rekent
     bij elk beeld de flexregel opnieuw. De pijl zelf verschuiven kost niets. */
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .beeldband-ga:hover svg {
    transform: translateX(5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .beeldband-ga:hover svg {
    transform: none;
  }
}

.beeldband-kop {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-variation-settings: "wdth" 108;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
  border-left: 1px solid var(--gold);
  padding-left: 18px;
  margin-left: -19px;
}

/* 3. De kop blijft staan. Diensten is de langste sectie en de rechterhelft van
      het scherm stond leeg. Nu loopt de lijst naast een kop die blijft hangen:
      het ritme "kop boven, inhoud onder" wordt één keer doorbroken, en de lege
      helft krijgt een taak. Alleen op een breed scherm; daaronder is er niets
      naast te zetten. */
@media (min-width: 62rem) {
  #diensten > .shell {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: clamp(40px, 5.5vw, 92px);
    align-items: start;
  }
  #diensten .band-head {
    position: sticky;
    top: 104px;
    margin-bottom: 0;
    max-width: none;
  }
  #diensten .runs {
    min-width: 0;
  }
}

/* De gouden lijn trekt bij aanwijzen van links door de regel heen. Eén
   beweging, in de kleur die de site toch al voor aandacht gebruikt.
   Bij prefers-reduced-motion vervalt hij vanzelf: die mediaquery laat alleen
   kleur- en dekkingsovergangen staan, geen breedte. */
.run {
  position: relative;
}
.run::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--gold);
  /* Was `width: 0` → `width: 100%` in 440 ms. Twee dingen mis: breedte loopt
     door de layoutstap (het element is wel absoluut, dus het duwt niets weg,
     maar goedkoop is het niet), en 440 ms is voor een zweefstreep te traag —
     je bent met de muis al verder terwijl hij nog kruipt. `scaleX` vanaf links
     ziet er hetzelfde uit, draait op de GPU, en 220 ms is het dubbele van wat
     nog snel aanvoelt. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .run:hover::after {
    transform: scaleX(1);
  }
}

/* De vlakken uit elkaar. Eerder stond hier een lichter vlak (#101b2e) met een
   gouden gloed onder de bovenrand. Dat is teruggedraaid: het alt-vlak is weer
   het vlakke --ink-2, zonder gloed en zonder gouden rand. Omdat #060910 en
   #0d1523 zo weinig verschillen dat de wisseling anders niet te zien is,
   draagt het vlak boven- en onderaan dezelfde rustige lijn als elke andere
   scheiding binnen een sectie — geen goud, alleen --line. */
.band-alt {
  background: var(--ink-2);
  /* Was `var(--line)`, het rustige blauw. Zie de notitie bij --rand-sectie. */
  border-block: 1px solid var(--rand-sectie);
}

/* Waar twee grenzen samenvallen, blijft er één over. Het alt-vlak sluit zelf
   af met een rustige lijn; de gouden bovenrand van wat erna komt zou daar een
   tweede streep van maken — twee pixel waar één hoort. Andersom net zo: na de
   beeldband, die zijn eigen gouden onderrand heeft, laat het alt-vlak zijn
   bovenrand weg.

   Zo houdt elke overgang precies één lijn, en zegt de kleur ervan iets: goud
   waar een sectie begint, rustig grijsblauw waar een gekleurd vlak eindigt.
   Het staat op volgorde in de pagina, niet op naam, dus het blijft kloppen als
   er ooit een sectie tussen komt. */
.band-alt + .band {
  border-top: 0;
}
.beeldband + .band-alt {
  border-top: 0;
}

/* --- Beweging ------------------------------------------------------------- */

/* Twee soorten, allebei zonder dat er iets aangeklikt hoeft te worden:
   dingen komen bij het scrollen naar binnen, en het beeld in de band staat
   nooit helemaal stil.

   Drie voorwaarden voordat er ook maar iets beweegt:
   - `.kan-tonen` wordt door het script gezet. Zonder JavaScript staat er dus
     niets op opacity 0 — een pagina die leeg blijft omdat een bestand niet
     laadde is erger dan een pagina zonder beweging.
   - `prefers-reduced-motion: no-preference`. De verborgen begintoestand zit
     bínnen die query, niet erbuiten: zou hij erbuiten staan, dan bleef bij
     iemand die beweging heeft uitgezet alles onzichtbaar.
   Voorstel 2 heeft de beweging daarna teruggesnoeid tot alleen de
   sectiekoppen, korter en met een curve die niet kruipt; dat is wat
   hieronder staat. */

@media (prefers-reduced-motion: no-preference) {
  /* Alleen de sectiekoppen en de regel in de beeldband dragen data-toon
     (js/app.js). Lijstregels en formuliervelden horen er te zijn, niet aan
     te komen — een invoerveld dat ontstaat laat mensen aarzelen. */
  .kan-tonen [data-toon] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .kan-tonen [data-toon].is-in {
    opacity: 1;
    transform: none;
  }

  /* Het gouden streepje naast een kop tekent zichzelf naar beneden. De rand
     zelf is niet te animeren, dus in het voorstel neemt een laagje die taak
     over — de rand blijft staan waar hij stond, maar wordt doorzichtig. */
  .kan-tonen .band-head h2 {
    border-left-color: transparent;
    position: relative;
  }
  .kan-tonen .band-head h2::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms;
  }
  .kan-tonen .band-head.is-in h2::before {
    transform: scaleY(1);
  }

}

/* --- Wat uit de ontwerpkritiek van 9 september is overgebleven ----------- */

/* Het € 110-anker. De vaste € 75 zegt op zichzelf niets; naast het wettelijk
   maximum voor dezelfde rit zegt hij alles. */
/* Onderdelen die alleen voorstel 2 gebruikt. In „Nu“ staan ze er wel, maar
   zijn ze onzichtbaar; de <a> geeft met display:contents geen doos af, dus
   de drie alinea's liggen daar precies zoals ze altijd lagen. */
.hero-status,
.hero-prijs-kop,
.fact-kaart,
.tegen-kaart {
  display: none;
}
.hero-prijs {
  display: contents;
}

.hero-tegen {
  display: block;
  margin-top: 10px;
  font-size: var(--step--2);
  color: var(--dim);
}
.hero-tegen b {
  color: var(--beam);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* De meelopende kolom draagt iets. Zij was 229 px hoog in een kolom van
      1065 px — 836 px leeg, 78,5 %. De klacht die de kolom moest oplossen was
      dat de rechterhelft leegstond; zo verhuisde de leegte alleen naar links.
      Nu staan de twee dingen die over de hele lijst bereikbaar moeten blijven
      erin, en is de kop geen vormkwestie meer maar een blijvend handvat. */
.head-anker {
  display: none;
}
@media (min-width: 62rem) {
  #diensten .head-anker {
    display: grid;
    justify-items: start;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--gold-deep);
  }
  #diensten .head-anker p {
    color: var(--dim);
    font-size: var(--step--2);
    max-width: 22ch;
  }
}
.head-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  text-decoration: none;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.head-tel svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
  flex: none;
}

/* De bevestiging kende maar één afloop. Nu is er een tweede regel voor het
      geval WhatsApp niet openging — zie js/app.js. */
.sent-mis b {
  color: var(--beam);
}


/* --- Hover, alleen voor echte aanwijzers ---------------------------------- */

/* Op een aanraakscherm vuurt een tik een hover af die daarna blijft hangen.
   Deze site wordt vooral onderweg op een telefoon gebruikt, dus staat alle
   hover achter een poortje. */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gold-2);
  }
  .btn-gold:hover {
    background: var(--beam);
  }
  .btn-line:hover {
    border-color: var(--gold);
    color: var(--beam);
  }
  /* Een knop komt onder de aanwijzer een stapje omhoog, net als de kaarten en
     de prijskaart. Indrukken wint daarna van zweven: zonder de tweede regel
     zou :hover blijven staan, want beide wegen even zwaar en deze staat later
     in het bestand. */
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn:active {
    transform: translateY(0) scale(0.97);
  }
  .nav a:hover {
    color: var(--beam);
    border-bottom-color: var(--gold-deep);
  }
  .lang :is(button, a):hover {
    color: var(--paper);
  }
  input:hover,
  select:hover,
  textarea:hover {
    border-color: var(--line-warm);
  }
  .faq summary:hover {
    color: var(--beam);
  }
  .reach dd a:hover {
    color: var(--beam);
    border-bottom-color: var(--gold);
  }
  .foot a:hover {
    color: var(--beam);
  }
}

/* --- Smal scherm ---------------------------------------------------------- */

@media (max-width: 60rem) {
  .burger {
    display: block;
    order: 3;
  }
  .lang {
    order: 2;
  }
  /* 37x31px is te klein voor een duim; 44px is de ondergrens. */
  .lang :is(button, a) {
    min-height: 44px;
    min-width: 44px;
  }
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 22px;
    background: color-mix(in srgb, var(--ink) 96%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms var(--ease-out),
      display 180ms allow-discrete;
  }
  .nav.is-open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    @starting-style {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  .nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step-0);
  }
  .hero {
    min-height: 92svh;
  }
  .hero-media img,
  .hero-media video {
    object-position: 62% 50%;
  }
  .run {
    grid-template-columns: 1fr;
  }
  .run-tag {
    grid-row: 3;
    white-space: normal;
  }
}

/* --- Staand scherm --------------------------------------------------------- */

/* Het liggende beeld wordt op een telefoon bijgesneden en staat daarom wat
   naar rechts. De staande opname vult het scherm precies, dus die hoort
   gewoon gecentreerd. */
@media (orientation: portrait) {
  .hero-media img,
  .hero-media video {
    object-position: 50% 50%;
  }

  /* Het staande beeld is 404x720. Rekte het mee met de volle hoogte van de
     hero -- op een smalle telefoon ruim 930px -- dan moest `cover` er ruim een
     derde van de breedte afsnijden en bleef van de auto weinig over. Hier
     krijgt het beeld daarom zijn eigen verhouding: niets wordt bijgesneden.
     Onderaan loopt het zacht weg, zodat de overgang naar de scrim niet als
     een rand te zien is. */
  .hero-media {
    bottom: auto;
    height: auto;
    aspect-ratio: 404 / 720;
    min-height: 62svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}

/* --- Heel smal scherm ------------------------------------------------------ */

/* Onder deze breedte past de merknaam niet meer naast taalknop en menuknop:
   het geheel vroeg 377px terwijl er 340px was, waardoor de menuknop buiten
   beeld viel en het menu onbereikbaar werd. Het logo draagt de naam zelf al,
   dus die mag hier weg. */
@media (max-width: 28rem) {
  .brand span {
    display: none;
  }
  .top-in {
    gap: 12px;
  }
}

/* --- Rustiger, als het systeem daarom vraagt ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Kleur en dekking blijven overgaan — die helpen bij het begrijpen.
     Alleen verplaatsing en vervorming verdwijnen. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, outline-color,
      opacity, box-shadow !important;
  }
  .btn:active {
    transform: none;
  }
  .nav {
    transform: none;
  }
  .hero-media video {
    display: none;
  }
}

/* ==========================================================================
   Uit de ontwerpcontrole van 10-09-2026
   ==========================================================================
   Twee punten, verder niets: de rest van de pagina kwam schoon door de
   controle en had geen verandering nodig.
   ========================================================================== */

/* 1. Geen nummers bij de diensten.
      Genummerde markeringen horen bij een volgorde: een stappenplan, een
      tijdlijn, een ranglijst. Deze zeven regels zijn geen volgorde maar een
      menu — luchthavenvervoer is niet stap één van groepsvervoer. Een nummer
      zou dus een verband suggereren dat er niet is. Wat de regels wél dragen:
      de gouden lijn bij aanwijzen, en de scheidingslijnen.
      Op een smal scherm blijft de tag naast de titel staan in plaats van
      eronder te vallen. */
@media (max-width: 60rem) {
  .run {
    grid-template-columns: 1fr auto;
  }
  .run-tag {
    grid-column: auto;
  }
}

/* 2. Foutmeldingen bij het aanvraagformulier.
      De samenvatting bovenaan wordt een rijtje sprongen naar de velden zelf,
      en onder elk leeg veld komt te staan wat eraan ontbreekt. De focus gaat
      naar de samenvatting in plaats van naar het eerste veld: anders hoort
      iemand met een schermlezer alleen het eerste probleem en nooit dat er
      meer zijn. */
.err {
  min-height: 0;
  line-height: 1.5;
}
.err:not(:empty) {
  padding: 10px 12px;
  /* 1px, niet 2: een gekleurde zijrand dikker dan een haarlijn is het
     standaardkostuum van een waarschuwingsvak. De vlakvulling eronder draagt
     het signaal al. */
  border-left: 1px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.err:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.err a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* De selector draagt `.field >` mee omdat `.field > span { color: var(--dim) }`
   hierboven staat en zwaarder weegt dan een losse klasse: elke foutmelding
   onder een veld kwam daardoor grijs uit de bus in plaats van rood. Gevonden
   26-09-2026, gold voor alle verplichte velden tegelijk. */
.veld-fout,
.field > .veld-fout {
  display: block;
  margin-top: 6px;
  font-size: var(--step--2);
  color: var(--danger);
}

/* De bevestiging van de vaste prijs, zodra er Schiphol in het bestemmingsveld
   staat. Goud en niet rood: dit is geen fout maar een geruststelling — de
   enige plek in het formulier waar de belofte van de pagina wordt herhaald. */
.veld-tip {
  display: block;
  margin-top: 6px;
  font-size: var(--step--2);
  color: var(--beam);
}

/* Wat er ná het verzenden gebeurt. Stond er niet, en dat is precies het laatste
   wat iemand leest voordat hij de pagina verlaat. */
.note-terug {
  color: var(--paper);
}

/* ==========================================================================
   Overgenomen uit het ontwerp-artifact (14-09-2026)
   ==========================================================================
   Drie blokken uit het ontwerp-artifact zijn hier gewone opmaak geworden: de
   hero met de prijskaart (voorheen "Voorstel 2"), het aanvraagblok en een
   nieuw blok met beoordelingen. De schakelaar en beide voorstellen zijn
   daarmee verdwenen — er valt niets meer te kiezen.
   ========================================================================== */

/* --- Hero: tekst links, prijs rechts -------------------------------------- */

/* Het glazen paneel verdwijnt; de verloopslaag neemt het leesbaar houden
   over. Hier ligt bewegend beeld achter, geen foto: de witte raamlijst van de
   auto trekt in tien seconden dwars door de kop heen. Vandaar een zwaardere
   middenband plus een schaduw onder de letters. */
.hero-panel {
  max-width: none;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 0;
  box-shadow: none;
}
.hero-scrim {
  background:
    linear-gradient(
      to top,
      rgba(7, 8, 13, 0.96) 0%,
      rgba(7, 8, 13, 0.88) 20%,
      rgba(7, 8, 13, 0.66) 50%,
      rgba(7, 8, 13, 0.46) 76%,
      rgba(7, 8, 13, 0.62) 100%
    ),
    radial-gradient(
      115% 88% at 12% 80%,
      rgba(7, 8, 13, 0.9) 0%,
      rgba(7, 8, 13, 0) 66%
    );
}
.hero-panel h1,
.hero-sub {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Het paneel zelf wordt het raster; de kaart zit in de HTML al binnen dat
   paneel. Vier rijen uitdrukkelijk benoemd: `grid-row: 1 / -1` telt alleen
   rijen die ook echt gedefinieerd zijn, anders blijft de kaart bovenaan
   hangen in plaats van naast de knoppen te staan. */
@media (min-width: 62rem) {
  .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: end;
  }
  .hero-status,
  .hero-panel h1,
  .hero-sub,
  .hero-cta {
    grid-column: 1;
  }
  .hero-prijs {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    margin-top: 0;
  }
  .hero-cta {
    margin-bottom: 0;
  }
}

/* De regel boven de kop. Geen keten met middelpunten en geen kapitalen:
   allebei zijn in dit project al eens bewust afgeschaft. */
.hero-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--beam);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

/* Het stipje is groen, en dat is de enige plek op deze site waar een derde
   kleur staat. Bewuste uitzondering van 14-09: groen leest overal als "nu
   bereikbaar", goud zou hier als opschrift gelezen worden. Niet het stipje
   zelf klopt maar een ring eromheen — een stip die zelf groeit, duwt de
   regel ernaast heen en weer. */
.stip {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--live);
}
.stip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes stipKlop {
    0%,
    100% {
      opacity: 0.9;
      transform: scale(1);
    }
    50% {
      opacity: 0.25;
      transform: scale(2);
    }
  }
  .stip::after {
    animation: stipKlop 2.6s var(--ease-in-out) infinite;
  }
}

/* De prijskaart is een link naar het aanvraagformulier: een gouden vlak naast
   een gouden knop waar niets gebeurt als je erop drukt, is een belofte die
   niet wordt ingelost. */
.hero-prijs {
  --kaart-pad: clamp(22px, 2.4vw, 30px);
  display: block;
  margin-top: 26px;
  /* Op een telefoon mag de kaart de volle kolom vullen; op een tablet van
     768 px werd dat een gouden vlak van 681 px — te veel goud voor één
     bedrag. */
  max-width: 26rem;
  padding: var(--kaart-pad);
  background: var(--gold);
  border-radius: 3px;
  color: var(--op-goud);
  text-decoration: none;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95);
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.hero-prijs:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .hero-prijs:hover {
    background: var(--beam);
    transform: translateY(-2px);
  }
}
/* De kaart is al sinds 14-09 een verwijzing naar het aanvraagblok, maar zei
   dat in rust met niets: geen pijl, geen streep. De grootste gouden vlak van
   de pagina was een stomme link náást een knop die er precies zo uitziet.
   Een klein opschrift met pijl rechtsonder lost dat op zonder de kaart te
   laten schreeuwen. */
.hero-prijs-ga {
  /* Geen unicode-pijl: deze site tekent haar pictogrammen (29 SVG's, overal
     stroke-width 1.6) en een los teken uit de tekenset valt daar buiten.
     In de tekststroom, niet absoluut: absoluut op `bottom` landde het
     opschrift bovenop de strook met het doorgehaalde € 110 — donker op
     donker, onleesbaar. Hier staat het onderaan het gouden vlak zelf. */
  display: block;
  margin-top: 14px;
  text-align: right;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--op-goud) 78%, transparent);
  transition: transform 220ms var(--ease-out);
}
.hero-prijs-ga svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-left: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .hero-prijs:hover .hero-prijs-ga {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-prijs:hover .hero-prijs-ga {
    transform: none;
  }
}

.hero-prijs-kop {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  color: color-mix(in srgb, var(--op-goud) 72%, transparent);
  margin-bottom: 4px;
}
.hero-fact {
  display: block;
  padding-top: 0;
  border-top: 0;
  color: var(--op-goud);
}
.hero-fact b {
  display: block;
  color: #120c02;
  font-size: clamp(3rem, 5.4vw, 4.2rem);
  line-height: 0.94;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.fact-nu,
.tegen-nu {
  display: none;
}
.fact-kaart {
  display: block;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--op-goud) 84%, transparent);
  max-width: 26ch;
}

/* De strook met het wettelijk maximum ligt tegen de onderrand van de kaart
   aan, in het donker van de site: het is een voetnoot bij de prijs, geen
   tweede prijs. Het bedrag is doorgehaald, maar de zin ernaast zegt met
   zoveel woorden van wie het bedrag is — een streep door een getal leest
   anders als "onze oude prijs". */
.hero-tegen {
  margin: var(--kaart-pad) calc(-1 * var(--kaart-pad)) calc(-1 * var(--kaart-pad));
  padding: 13px var(--kaart-pad);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  border-radius: 0 0 3px 3px;
  font-size: var(--step--2);
  color: var(--dim);
}
.tegen-kaart {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.streep {
  color: color-mix(in srgb, var(--dim) 88%, transparent);
  font-weight: 700;
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}

/* --- De lichtstreep over de gouden knop ----------------------------------- */

/* Eén keer per 3,6 s trekt een smalle lichtbaan over de knop, zoals een
   koplamp langs een natte auto. Hij ligt onder het opschrift en vangt geen
   muisklikken op. */
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-gold > * {
  position: relative;
  z-index: 1;
}
.baan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 34%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes baanLoop {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(320%);
    }
  }
  /* Drie keer, niet eeuwig: een knop die om de 3,6 seconde blijft glanzen is
     het vocabulaire van kortingsbanners. `forwards` houdt het eindbeeld vast
     — ver rechts buiten de knop. Zonder dat zou de baan terugvallen naar
     links en daar zichtbaar blijven liggen. */
  .baan {
    animation: baanLoop 3.6s cubic-bezier(0.4, 0, 0.2, 1) 3 forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .baan {
    display: none;
  }
}

/* --- Aanvraagblok: twee kaarten ------------------------------------------- */

/* Contactgegevens en formulier staan allebei op een eigen vlak. De
   contactkaart draagt bovenaan een gouden streep — zij is het antwoord voor
   wie liever belt dan invult, en mag daarom als eerste opvallen. */
.reach {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  padding: clamp(20px, 2.6vw, 26px);
}
.reach dd:last-of-type {
  margin-bottom: 0;
}

#bookForm {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 32px);
}

/* De velden liggen dieper dan het vlak waarop ze staan: op de donkerste
   kleur van de site. Zo is te zien waar getypt kan worden zonder dat er een
   rand bij hoeft. De gouden gloed bij focus is dezelfde maat als de rand van
   de kaart eromheen. */
#bookForm input,
#bookForm select,
#bookForm textarea {
  background: var(--ink);
  min-height: 48px;
}
#bookForm input:focus,
#bookForm select:focus,
#bookForm textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}

/* Het aantal personen is één cijfer tussen 1 en 8. Breedte is een afspraak
   over wat er verwacht wordt; een vak van 253 px laat mensen twijfelen of er
   meer moet. */
.form-grid .smal input,
.form-grid .smal select {
  max-width: 7.5rem;
}
/* De keuzelijst draagt "Kies..." plus het gouden pijltje; 7,5 rem knelt daar. */
.form-grid .smal select {
  max-width: 10rem;
}

/* Het datumveld is het enige onderdeel dat de browser zelf tekent. Donker is
   het al (color-scheme staat in de basis); wat overbleef was het witte
   kalendertekentje, terwijl elk ander teken op deze pagina goud is. */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(74%) sepia(46%) saturate(560%) hue-rotate(358deg) brightness(92%);
  cursor: pointer;
}

/* Soort rit: twee vlakken in plaats van twee rondjes op een rij. Het gekozen
   vlak draagt de gouden rand — de keuze is dan van een meter afstand te zien,
   niet alleen aan een stipje van 17 px. Het kader om het hele blok vervalt:
   twee omlijnde vlakken binnen een derde kader is één kader te veel. */
.keuze {
  border: 0;
  padding: 0;
}
.keuze legend {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--dim);
  padding: 0;
  margin-bottom: 10px;
}
.keuze-rij {
  gap: 10px;
}
.keuze-rij label {
  padding: 13px 16px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  min-height: 48px;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.keuze-rij label:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  /* Was `--gold-deep`: 2,92:1 op de grond, onder de 3:1 die WCAG voor de
     omtrek van een bedienelement vraagt — en juist een zweefstand moet je
     kunnen zien. */
  .keuze-rij label:hover {
    border-color: var(--gold);
  }
}

/* De contactkolom loopt mee omlaag: zij is een stuk korter dan het formulier
   ernaast, en het telefoonnummer blijft in beeld terwijl iemand invult —
   precies wanneer hij twijfelt of hij niet beter even kan bellen.
   `align-self: start` hoort erbij, anders rekt het raster de kolom tot de
   volle hoogte en valt er niets meer te plakken. */
@media (min-width: 62rem) {
  .book > .kolom {
    position: sticky;
    top: 104px;
    align-self: start;
  }
}

/* --- Beoordelingen -------------------------------------------------------- */

.rev-kop {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
}
@media (min-width: 64rem) {
  .rev-kop {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}
.rev-kop h2 {
  font-size: var(--step-4);
  font-variation-settings: "wdth" 112;
}
.rev-score {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  flex-wrap: wrap;
}
.rev-cijfer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-cijfer > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rev-cijfer b {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 3.8rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.rev-van {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--dim);
}
.sterren {
  display: flex;
  gap: 3px;
}
.sterren svg {
  width: 19px;
  height: 19px;
  fill: var(--gold);
}
.rev-aantal {
  font-size: var(--step--2);
  color: var(--dim);
}

.rev-grid {
  display: grid;
  /* Ruimer dan de 14–20px van vroeger: de stemmen staan nu op de pagina zelf,
     zonder kader, en dan is ruimte het enige dat ze uit elkaar houdt. */
  gap: clamp(26px, 3.4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* Geen vlak, geen rand, geen binnenruimte. Vijf omlijnde kaders op één
   pagina maken alles even belangrijk; zonder die dragen de gouden bovenranden
   van de contactkaart en het formulier weer betekenis. Daarmee vervalt ook de
   zweefkleur: er is geen vlak meer om te verkleuren. */
.rev {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rev .sterren svg {
  width: 15px;
  height: 15px;
}
.rev p {
  line-height: 1.55;
}
.rev footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rev-letter {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--line-warm);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
}
.rev cite {
  font-style: normal;
  font-weight: 600;
  font-size: var(--step--1);
  display: block;
}
.rev time {
  font-size: 0.75rem;
  color: var(--dim);
}

/* Zolang hier verzonnen teksten staan, staat er ook bij dat het verzonnen
   teksten zijn — en in de kleur die op deze site "let op" betekent. */
.rev-let {
  margin-top: 20px;
  font-size: var(--step--2);
  color: var(--danger);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 76ch;
}
.rev-let::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--danger);
  flex: none;
  margin-top: 0.55em;
}

/* --- Vaste balk onderaan, alleen op een telefoon -------------------------- */

/* Twee knoppen, meer niet: bellen en appen. Zij verschijnt pas als de hero
   voorbij is — bovenaan staan de knoppen zelf nog in beeld, daar zou zij
   alleen ruimte innemen. Boven 60 rem bestaat zij niet: daar draagt de kop
   het telefoonnummer al.

   `translateY(120%)` in plaats van 100%: de schaduw en de veilige onderrand
   van een telefoon met een streep onderaan horen er ook onder te blijven. */
.mobar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: none;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform 320ms var(--ease-out);
}
.mobar.is-in {
  transform: none;
}
.mobar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border-radius: 3px;
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
}
.mobar svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.mobar-bel {
  background: var(--gold);
  color: var(--op-goud);
}
.mobar-app {
  border: 1px solid var(--line);
  color: var(--paper);
}
.mobar a:active {
  transform: scale(0.98);
}

@media (max-width: 60rem) {
  .mobar {
    display: flex;
  }
  /* De laatste regel van de voet hoort niet onder de balk te verdwijnen. */
  .foot-end {
    padding-bottom: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobar {
    transition: none;
  }
}
/* --- Elektrisch rijden ---------------------------------------------------- */

/* Twee kolommen: links waarom, rechts wat. De linkerkolom loopt mee zolang de
   drie voordelen rechts langsschuiven — zij draagt het merk en het model, en
   dat hoort in beeld te blijven terwijl je de rest leest.

   Groen is hier de kleur van het onderwerp. Op de rest van de site is goud de
   enige accentkleur; dit blok en het stipje in de hero zijn de uitzondering,
   en dat is de bedoeling: groen zegt "stroom", goud zou hier "opschrift"
   zeggen. */
.elek {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 64rem) {
  .elek {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
  .elek-kolom {
    position: sticky;
    top: 100px;
  }
}

.elek h2 {
  font-size: var(--step-4);
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.034em;
  margin-bottom: 14px;
}

/* Merk, bouwjaar en kleur als drie losse woorden op een rij: feiten, geen
   zinnen. Dezelfde vorm als de betaalwijzen bij het aanvraagblok. */
.elek-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.elek-chips span {
  padding: 6px 12px;
  border: 1px solid var(--line-warm);
  border-radius: 2px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: var(--step--2);
}
.elek-chips .getal {
  font-variant-numeric: tabular-nums;
}
.elek-intro {
  color: var(--dim);
  margin-bottom: 26px;
}

/* De twee cijfers delen één vlak; de scheiding is de achtergrond die door een
   spleet van 1px zichtbaar blijft, niet een rand om elk vakje. */
.elek-cijfers {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.elek-cijfers > div {
  flex: 1 1 9rem;
  background: var(--panel);
  padding: 18px 20px;
}
.elek-cijfers p + p {
  margin-top: 8px;
  font-size: var(--step--2);
  color: var(--dim);
  line-height: 1.4;
}
.elek-getal {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--live);
  font-variant-numeric: tabular-nums;
}

.elek-rechts {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}

/* Een gereserveerd vlak in plaats van een foto die er nog niet is. Gestreept
   en gestippeld, zodat niemand het voor een ontwerp aanziet: het is een
   opdracht aan onszelf. */
.fotoslot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Staat er een echte foto in plaats van het gereserveerde vlak, dan draagt die
   dezelfde maat en hoek. */
.fotoslot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
}
.fotoslot figcaption {
  font-size: var(--step--1);
  color: var(--dim);
}

/* Drie voordelen in één vlak, gescheiden door dezelfde spleet van 1px als de
   cijfers hierboven. */
.voordelen {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.voordelen > div {
  background: var(--panel);
  padding: clamp(18px, 2.2vw, 24px);
}
.voordelen dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.014em;
  margin-bottom: 8px;
}
.voordelen dt svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: var(--live);
}
.voordelen dd {
  margin: 0;
  color: var(--dim);
  font-size: var(--step--1);
}

/* ==========================================================================
   Afwerking naar Apple's maatstaf — opgenomen op 16-09-2026
   ==========================================================================
   Aanleiding is de afwerkingsronde van 14-09-2026 in de eerste map, nu
   overgezet naar deze. De bron is Apple's `Designing Fluid Interfaces`
   (WWDC 2018), vertaald naar het web.

   Het grootste deel van die leer gaat over gebaren: veren in plaats van
   vaste duren, snelheid die van de vinger op de animatie overgaat, een
   beweging die je halverwege kunt grijpen en omkeren. Een boekingspagina
   heeft geen gebaren, dus daar staat hier niets van. Wat overblijft is het
   deel dat ook op een pagina geldt waar je alleen klikt en scrollt.

   Zes ingrepen. De letterspatiëring, de scherpstelringen en `prefers-
   reduced-motion` staan er al sinds september en blijven ongemoeid.

   Stond tot 16-09-2026 achter de schakelaar als `Voorstel 2`; sinds de keuze
   van die dag is het gewone opmaak en bestaat de schakelaar niet meer.
   ========================================================================== */

/* --- 1. Reactie hoort bij het indrukken, niet bij het loslaten ------------
   Het uitgangspunt van de hele leer: "op het moment dat er vertraging
   ontstaat, valt het gevoel van directheid van een klif". `.btn` en de vaste
   balk onderaan doen dit al; alles wat verder indrukbaar is deed niets tot
   je losliet. Een vlak krimpt, een tekstverwijzing verkleurt — tekst
   schalen leest als een fout, niet als een druk. */

.brand img {
  transition: transform 220ms var(--ease-out);
}
.brand:active img {
  transform: scale(0.96);
  transition-duration: 130ms;
}

.burger {
  transition: transform 220ms var(--ease-out),
    border-color 160ms ease;
}
.burger:active {
  transform: scale(0.94);
  transition-duration: 130ms;
}

.lang :is(button, a):active {
  transform: scale(0.94);
}

/* Bewust `--gold` en niet `--beam`: op een aanwijzer staat `--beam` al voor
   zweven (zie het hover-poortje verderop). Zou de druk dezelfde kleur
   krijgen, dan gebeurde er op een muis zichtbaar niets. Nu dipt de tekst
   onder de vinger een tint donkerder en springt bij loslaten terug. */
.nav a:active,
.foot a:active,
.faq-tel:active,
.faq summary:active {
  color: var(--gold);
}

/* De prijskaart in de hero is één groot vlak; 0,985 is daar al zichtbaar,
   0,97 zou een kaart van deze omvang laten wiebelen. */
.hero-prijs {
  /* `background-color` moet in de lijst blijven staan: de kaart wisselt bij
     zweven naar `--beam`, en een enkele `transform`-regel hier zou die
     overgang wegnemen. */
  transition: background-color 0.16s ease, transform 240ms var(--ease-out);
}
.hero-prijs:active {
  transform: scale(0.985);
  transition: background-color 0.16s ease, transform 140ms var(--ease-out);
}
/* Dezelfde samenstelling als bij `.btn` hierboven in het bestand: zonder deze
   regel valt het stapje van het zweven weg zodra je indrukt, en springt de
   kaart bij loslaten terug omhoog. */
@media (hover: hover) and (pointer: fine) {
  .hero-prijs:hover:active {
    transform: translateY(-2px) scale(0.985);
  }
}

/* --- 2. De taalknop schuift in plaats van te knipperen --------------------
   "Denk aan animatie als een gesprek tussen jou en het voorwerp." Nu springt
   het gouden vlak van NL naar EN: twee toestanden, niets ertussen. Eén vlak
   dat verschuift vertelt dat het om dezelfde keuze gaat, en het oog volgt de
   beweging vanzelf naar de kant die nu geldt.

   De stand komt van `lang` op <html> — hetzelfde attribuut dat de tekst al
   omzet, dus er is geen regel JavaScript voor nodig. */

.lang {
  position: relative;
  isolation: isolate;
}
.lang::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 6px) / 2);
  background: var(--gold);
  border-radius: 2px;
  transform: translateX(0);
  /* GEEN overgang meer. Die stond hier sinds 16-09 en kon sinds diezelfde dag
     niet meer aflopen: `bouw.py` maakt van de taalknoppen echte verwijzingen
     naar `/` en `/en/`, dus een klik is een paginanavigatie. Op de nieuwe
     pagina staat dit vlak meteen in zijn eindstand — er valt niets te
     schuiven. Weggehaald op 21-09-2026 na de bewegingscontrole.
     Het vlak zelf blijft: het is de markering van de gekozen taal. */
}
:root:lang(en) .lang::before {
  transform: translateX(calc(100% + 2px));
}
/* Beide knoppen even breed, anders klopt de halve breedte hierboven niet. */
/* `flex: 1 1 0` maakt de twee even breed — anders klopt de halve breedte van
   het schuivende vlak hierboven niet. De ondergrens moet er wél bij blijven:
   stond hier `min-width: 0`, dan won die van de 44px in het smalle-scherm-blok
   verderop (zelfde gewicht, maar dit staat later) en kromp de knop op een
   telefoon naar 37px. Gemeten in de browser op 387px breed. */
.lang :is(button, a) {
  flex: 1 1 0;
  min-width: 44px;
  transition: color 200ms ease, transform 220ms var(--ease-out);
}
/* Het vlak zit nu onder allebei; de knop zelf draagt alleen nog letterkleur. */
.lang :is(button, a).is-on {
  background: none;
}

/* --- 3. Een scrollrand in plaats van een harde lijn ----------------------
   Doorschijnendheid draagt rangorde: de inhoud hoort zichtbaar ónder de balk
   door te schuiven. Een lijn van één pixel snijdt de pagina juist in tweeën
   en zegt "hier houdt het op". Een verloop van veertien pixel laat de balk
   boven de pagina zweven zonder haar af te kappen. */

.top.is-stuck {
  border-bottom-color: transparent;
}
.top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 55%, transparent),
    transparent
  );
  transition: opacity 280ms ease;
}
.top.is-stuck::after {
  opacity: 1;
}

/* --- 4. Het menu komt uit de knop die het opende -------------------------
   Ruimtelijke samenhang: iets dat verschijnt hoort te komen van de plek waar
   je het vandaan haalde. Nu zakt het menu acht pixel uit het niets naar
   beneden, los van de menuknop rechtsboven. Met de oorsprong in die hoek
   groeit het eruit — dezelfde beweging als een menu op een iPhone.

   Het blijft klein: van 0,96 naar 1. Een vlak over de volle breedte dat van
   0,8 opschaalt oogt als een goocheltruc. */

@media (max-width: 60rem) {
  .nav {
    transform-origin: top right;
    transform: scale(0.96) translateY(-6px);
    transition: opacity 200ms ease, transform 260ms var(--ease-out),
      display 260ms allow-discrete;
  }
  .nav.is-open {
    transform: scale(1) translateY(0);
    @starting-style {
      opacity: 0;
      transform: scale(0.96) translateY(-6px);
    }
  }
  /* Het menu hangt vlak onder de balk, dus precies waar de scrollrand uit
     ingreep 3 ligt. Die rand is bedoeld om inhoud te laten wegduiken onder
     de balk; over een opengeklapt menu heeft hij niets te zoeken. */
  .top:has(.nav.is-open)::after {
    opacity: 0;
  }
}

/* --- 5. Ruimte om kleine doelen ------------------------------------------
   Ongeveer tien pixel speling rondom, onzichtbaar. De taalknoppen hebben op
   een telefoon al hun 44 pixel; de verwijzingen in de navigatie en in de
   voet zijn dertig pixel hoog en vragen om precisie die niemand heeft. Het
   vlak groeit, de opmaak verandert niet. */

.nav a,
.foot a {
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  inset: -9px -8px;
}
/* In de voet staan de regels negen pixel uit elkaar; vier pixel speling
   boven en onder laat die tussenruimte heel, zodat twee vlakken elkaar niet
   overlappen en je nooit de verkeerde verwijzing raakt. */
.foot a::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
}
/* In het uitgeklapte menu staan de verwijzingen al ruim uit elkaar; daar zou
   de speling de randen van de buren overlappen. */
@media (max-width: 60rem) {
  .nav a::after {
    content: none;
  }
}

/* --- 6. Twee systeemvoorkeuren erbij ------------------------------------
   `prefers-reduced-motion` staat er al. Deze twee niet, terwijl de pagina op
   negen plekken achter doorschijnend glas werkt en goud op donkerblauw voor
   wie meer contrast vraagt aan de magere kant is. Het zijn instellingen die
   iemand bewust aanzet; ze negeren is de enige echte fout die hier te maken
   valt. */

@media (prefers-reduced-transparency: reduce) {
  .top.is-stuck,
  .nav {
    backdrop-filter: none;
    background: var(--ink);
  }
  .top::after {
    display: none;
  }
  .top.is-stuck {
    border-bottom-color: var(--line);
  }
}

@media (prefers-contrast: more) {
  :root {
    --dim: #c3cad4;
    --line: #4a5d7d;
  }
  :focus-visible {
    outline-width: 3px;
  }
  .nav a.is-current {
    border-bottom-width: 2px;
  }
}

/* Wie rustiger beeld vraagt, krijgt de verkleuring wel en de verplaatsing
   niet — dezelfde scheiding als in de regel hierboven in het bestand. */
@media (prefers-reduced-motion: reduce) {
  .brand:active img,
  .burger:active,
  .lang :is(button, a):active,
  .hero-prijs:active {
    transform: none;
  }
  .nav,
  .nav.is-open {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Prijskaart op de telefoon
   Het bedrag stond op smalle schermen op de clamp-bodem van 3rem (48 px)
   terwijl de kaart de volle kolom vult. Samen met de binnenruimte werd
   dat een goudvlak dat de hero overheerste. Hieronder schaalt het mee
   met de schermbreedte in plaats van op een vaste sokkel te blijven.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .hero-prijs {
    --kaart-pad: 18px;
    margin-top: 20px;
  }
  .hero-fact b {
    font-size: clamp(2.2rem, 9.2vw, 3rem);
    margin-bottom: 8px;
  }
  .hero-prijs-kop {
    margin-bottom: 2px;
  }
  .hero-tegen {
    padding: 10px var(--kaart-pad);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Regelafbreking in de hero-kop
   De kop bestaat uit twee zinnen. Op schermen met ruimte staat elke zin
   op een eigen regel; daaronder verdwijnt de afbreking en loopt de tekst
   gewoon door. Het spatie vóór de <br> blijft staan, zodat de zinnen niet
   tegen elkaar plakken zodra de afbreking wegvalt.
   `text-wrap: balance` staat uit: dat verdeelt over even lange regels en
   brak daardoor midden in een zin af.
   ───────────────────────────────────────────────────────────────────── */
.hero h1:has(.h1-br) {
  text-wrap: initial;
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
}
@media (max-width: 560px) {
  .h1-br { display: none; }
}