/* ══════════════════════════════════════════════════════════════════════════
   RIJSCHOOL BROEKPOLDER — voorbeeldsite
   CONCEPT: "De open rekening."
   Je ziet precies wat je gaat betalen en wanneer, en het bedrag loopt met je
   mee terwijl je scrollt. Voor iemand die eerder is vastgelopen bij een andere
   rijschool is dát de zenuw: weten waar je aan toe bent.

   Mechanisme (zichtbaar in tien seconden op een telefoon):
   · de meelopende som onderaan het scherm — tegelijk de navigatie;
   · elk bedrag dat NIET van hen is draagt hún eigen sterretje;
   · alles wat Jeroen zegt is een letterlijk citaat, in een eigen letter.

   Palet gemeten uit hun foto (007.jpg): zwarte lak, hard hemelsblauw,
   najaarsgras, riet. Riet is in die foto een randje — als warmte-rol is dat
   een ontwerpkeuze, niet "de kleur van hun foto".

   Textuur = liniatuur, geen ruitjes. Een rekening heeft regels.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/sans-400.woff2") format("woff2"); }
@font-face { font-family: "Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/sans-500.woff2") format("woff2"); }
@font-face { font-family: "Stem"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/serif-400.woff2") format("woff2"); }

:root {
  --lak: #13191e;          /* het zwart van de Citroën — materiaal-anker */
  --lak-2: #1c242b;
  --hemel: #0072ce;        /* het L-bord en de lucht — enige harde kleur */
  --hemel-licht: #6fb2ef;
  --gras: #4a5a2e;         /* najaarsgras */
  --riet: #b99f6b;         /* riet aan de waterkant — warmte */
  --plaat: #efc23c;        /* de kentekenplaat — alleen voor het sterretje */
  --papier: #efebe2;
  --kaart: #fbf9f5;
  --tekst: #151a1e;
  --tekst-2: rgba(21, 26, 30, .7);
  --lijn: rgba(21, 26, 30, .16);
  --lijn-licht: rgba(21, 26, 30, .085);
  --op-donker: rgba(239, 235, 226, .78);
  --lijn-donker: rgba(239, 235, 226, .18);
  --disp: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "Sans", ui-sans-serif, system-ui, sans-serif;
  --stem: "Stem", Georgia, serif;
  --breed: min(1160px, 90vw);
  --balk: 68px;            /* hoogte van de meelopende som op mobiel */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; background: var(--papier); }
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font: 400 17px/1.62 var(--body); -webkit-font-smoothing: antialiased;
  padding-bottom: var(--balk);
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgba(0, 114, 206, .2); }
:focus-visible { outline: 3px solid rgba(0, 114, 206, .55); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 300; background: var(--kaart); padding: .7rem 1rem; border-radius: 8px; }

/* ══ typografische stemmen ══ */
.etiket { font-family: var(--disp); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .17em; }
.bedrag { font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -.03em; }
h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -.032em; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 6vw, 3.4rem); }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.22rem); line-height: 1.25; letter-spacing: -.018em; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.groot { font-size: clamp(1.05rem, 2.1vw, 1.24rem); color: var(--tekst-2); max-width: 48ch; }

/* de stem van Jeroen — altijd deze vorm, altijd letterlijk geciteerd */
.stem {
  font-family: var(--stem); font-style: italic; font-size: clamp(1.15rem, 2.9vw, 1.65rem);
  line-height: 1.35; color: var(--tekst); margin: 0;
  padding-left: 1.05rem; border-left: 3px solid var(--riet);
}
.stem cite { display: block; margin-top: .55rem; font: 600 .62rem/1.4 var(--disp); font-style: normal;
  text-transform: uppercase; letter-spacing: .16em; color: var(--tekst-2); }
.donker .stem { color: var(--papier); }
.donker .stem cite { color: var(--op-donker); }

/* ══ het sterretje — hun eigen teken, onze signatuur ══ */
.ster { color: var(--plaat); font-family: var(--disp); font-weight: 700; }

/* ══ liniatuur: de textuur van een rekening ══ */
.linie { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--lijn-licht) 0 1px, transparent 1px 44px); }
.donker .linie { background-image: repeating-linear-gradient(to bottom, rgba(239,235,226,.06) 0 1px, transparent 1px 44px); }

/* ══ kop ══ */
.kop { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--papier) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--lijn); }
.kop-in { width: var(--breed); margin: 0 auto; display: flex; align-items: center; gap: .55rem; min-height: 4.1rem; }
@media (min-width: 760px) { .kop-in { gap: 1rem; } }
.merk { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tekst); margin-right: auto; min-width: 0; }
.lbord { width: 29px; height: 29px; flex: none; border-radius: 5px; background: var(--hemel); color: #fff; display: grid; place-items: center; font: 700 1rem/1 var(--disp); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.merk b { display: block; font: 700 1.02rem/1.1 var(--disp); letter-spacing: -.028em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merk .sub { display: block; font-size: .69rem; color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .merk .sub { display: none; } .merk b { font-size: .95rem; } .app-lang { display: none; } }
.menu { display: none; gap: .2rem; }
/* .kop-in ervoor: de basisregel van .hamburger staat verderop in het bestand en
   won anders van deze media query — media queries tellen niet mee in
   specificiteit. Gevolg was een hamburger náást de volledige navigatie op 1440. */
@media (min-width: 900px) { .kop-in .menu { display: flex; } .kop-in .hamburger { display: none; } }
.menu a { text-decoration: none; color: var(--tekst-2); font-size: .9rem; padding: .45rem .65rem; border-radius: 7px; }
.menu a:hover { color: var(--tekst); background: rgba(21,26,30,.05); }
.kop-app { display: inline-flex; align-items: center; text-decoration: none; background: var(--lak); color: var(--papier); font: 600 .84rem/1 var(--disp); padding: .68rem 1rem; border-radius: 6px; white-space: nowrap; }
.hamburger { width: 44px; height: 44px; border: 1px solid var(--lijn); background: transparent; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.hamburger i { width: 17px; height: 2px; background: var(--tekst); position: relative; display: block; }
.hamburger i::before, .hamburger i::after { content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: var(--tekst); }
.hamburger i::before { top: -6px; } .hamburger i::after { top: 6px; }

.mob { position: fixed; inset: 0; z-index: 200; background: var(--papier); padding: 1.1rem; display: none; flex-direction: column; }
.mob[data-open] { display: flex; }
.mob-top { display: flex; justify-content: flex-end; }
.mob-sluit { width: 44px; height: 44px; border: 1px solid var(--lijn); background: transparent; border-radius: 7px; font-size: 1.3rem; cursor: pointer; }
.mob nav { display: grid; margin-top: 1.2rem; }
.mob nav a { text-decoration: none; color: var(--tekst); font: 700 1.6rem/1.2 var(--disp); letter-spacing: -.03em; padding: .6rem 0; border-bottom: 1px solid var(--lijn); }
.mob .straks { margin-top: auto; color: var(--tekst-2); font-size: .9rem; }

/* ══ secties ══ */
section { position: relative; }
.vak { position: relative; width: var(--breed); margin: 0 auto; padding: clamp(3rem, 6.5vw, 5rem) 0; }
.donker { background: var(--lak); color: var(--papier); }
.donker p, .donker .groot { color: var(--op-donker); }
.gras { background: var(--gras); color: var(--papier); }
.gras p, .gras .groot { color: rgba(239,235,226,.82); }

/* ══ HERO — het leidende getal is €60, niet het totaal ══ */
/* de hero draagt óók .donker in de markup, anders erven .groot en .linie de
   lichte-sectie-varianten en wordt het donker-op-donker (les uit ronde 1) */
.hero { background: var(--lak); color: var(--papier); position: relative; overflow: hidden; }
.hero .h-lak { position: absolute; inset: 0; background: radial-gradient(120% 80% at 8% 0%, #26313a 0%, rgba(38,49,58,0) 58%); pointer-events: none; }
.hero .h-riet { position: absolute; right: -10%; top: -8%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(185,159,107,.22), rgba(185,159,107,0) 68%); pointer-events: none; animation: adem 26s ease-in-out infinite; }
@keyframes adem { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(-18px,14px,0) } }
.hero-in { position: relative; width: var(--breed); margin: 0 auto; padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(2.4rem, 5vw, 3.6rem); display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 940px) { .hero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; } }
.hero .etiket { color: var(--hemel-licht); }
.start { display: flex; align-items: baseline; gap: .6rem; margin: 1.1rem 0 0; flex-wrap: wrap; }
.start .euro { font: 700 clamp(2.6rem, 9vw, 4.4rem)/1 var(--disp); color: var(--op-donker); }
.start .nu { font: 700 clamp(4.6rem, 21vw, 11rem)/.82 var(--disp); letter-spacing: -.055em; color: var(--papier); }
.start .na { font: 600 clamp(.95rem, 2.4vw, 1.15rem)/1.25 var(--disp); color: var(--hemel-licht); max-width: 12ch; }
.hero h1 { font-size: clamp(1.55rem, 4.4vw, 2.35rem); margin: 1.1rem 0 0; max-width: 20ch; }
.hero .groot { margin-top: .9rem; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .9rem 1.4rem; border-radius: 7px; text-decoration: none; font: 600 .95rem/1 var(--disp); transition: transform .15s ease; }
.knop-1 { background: var(--hemel); color: #fff; }
.knop-2 { background: transparent; color: var(--papier); border: 1px solid var(--lijn-donker); }
.knop:hover { transform: translateY(-2px); }
.hero-beeld { position: relative; }
.hero-beeld img { border-radius: 8px; box-shadow: 0 26px 60px -28px rgba(0,0,0,.85); }
/* Op de telefoon moet zijn gezicht bóven de vouw staan: dat is het snelste
   "dit gaat over mij"-signaal voor de eigenaar die dit vanuit WhatsApp opent.
   Staand op ware hoogte duwt het gezicht naar 900px+; een liggende uitsnede
   met het zwaartepunt hoog haalt het binnen het eerste scherm. */
@media (max-width: 939.98px) {
  .hero-beeld img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 24%; }
}
.hero-beeld figcaption { position: absolute; left: .8rem; bottom: .8rem; right: .8rem; background: color-mix(in srgb, var(--lak) 82%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--lijn-donker); border-radius: 6px; padding: .5rem .7rem; font-size: .8rem; line-height: 1.3; color: var(--op-donker); }
.hero-beeld figcaption b { display: block; font: 700 .93rem/1.2 var(--disp); color: var(--papier); }

/* ══ de rekening: rijen ══ */
.rekening { display: grid; margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--lijn); }
.donker .rekening, .gras .rekening { border-top-color: var(--lijn-donker); }
.regel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--lijn); }
.donker .regel, .gras .regel { border-bottom-color: var(--lijn-donker); }
.regel .wat { font: 600 1.02rem/1.3 var(--disp); letter-spacing: -.016em; }
.regel .uitleg { grid-column: 1 / -1; font-size: .89rem; color: var(--tekst-2); margin: 0; }
.donker .regel .uitleg, .gras .regel .uitleg { color: var(--op-donker); }
.regel .bedrag { font-size: clamp(1.1rem, 2.6vw, 1.4rem); white-space: nowrap; }
.regel[data-uit] .wat { color: var(--hemel); }
.donker .regel[data-uit] .wat { color: var(--hemel-licht); }
.regel[data-meest] { background: linear-gradient(90deg, rgba(0,114,206,.07), rgba(0,114,206,0)); padding-left: .8rem; margin-left: -.8rem; }
.merkje { display: inline-block; margin-left: .5rem; font: 600 .58rem/1 var(--disp); text-transform: uppercase; letter-spacing: .15em; color: var(--hemel); vertical-align: .18em; }
.donker .merkje { color: var(--hemel-licht); }

/* ══ de meelopende som ══ */
.som {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: color-mix(in srgb, var(--lak) 96%, transparent); color: var(--papier);
  border-top: 2px solid var(--plaat);
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,.6);
}
.som-in { width: var(--breed); margin: 0 auto; min-height: var(--balk); display: flex; align-items: center; gap: .9rem; }
.som .et { font: 600 .6rem/1.3 var(--disp); text-transform: uppercase; letter-spacing: .16em; color: var(--op-donker); }
.som .wat { font-size: .82rem; color: var(--op-donker); display: block; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.som .tot { margin-left: auto; font: 700 clamp(1.35rem, 5vw, 1.7rem)/1 var(--disp); font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
.som .balkje { position: absolute; left: 0; top: -2px; height: 2px; background: var(--hemel); width: 0; transition: width .35s cubic-bezier(.22,.61,.36,1); }
/* Bewust GEEN zwevende kaart rechtsonder op desktop: die viel op elke
   scrollstand over de inhoud en verborg juist het €444-blok, het waardevolste
   getal van de pagina. Een strook over de volle breedte kan niets bedekken. */

/* ══ blokken ══ */
.duo { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 3.6rem); align-items: start; } }
.punten { display: grid; gap: .5rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .punten { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.punt { border: 1px solid var(--lijn); border-radius: 8px; padding: .95rem 1.05rem; background: var(--kaart); display: grid; gap: .2rem; align-content: start; }
.donker .punt, .gras .punt { background: rgba(239,235,226,.06); border-color: var(--lijn-donker); }
.punt .etiket { font-size: .6rem; color: var(--hemel); }
.donker .punt .etiket, .gras .punt .etiket { color: var(--hemel-licht); }
.punt b { font: 700 1.02rem/1.25 var(--disp); letter-spacing: -.018em; }
.punt p { margin: 0; font-size: .91rem; color: var(--tekst-2); }
.donker .punt p, .gras .punt p { color: var(--op-donker); }

/* het enige getal op deze pagina dat een optelsom IS — en het klopt: deze drie
   posten betaal je ongeacht welk lespakket je kiest */
.sowieso { margin-top: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--lijn-donker); border-left: 3px solid var(--plaat); border-radius: 8px; padding: 1.1rem 1.2rem 1.2rem; background: rgba(239,194,60,.07); display: grid; gap: .2rem; }
.sowieso .etiket { color: var(--plaat); font-size: .62rem; }
.sw-bedrag { margin: 0; font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: 1; color: var(--papier); }
.sw-uitleg { margin: .5rem 0 0; font-size: .93rem; max-width: 52ch; }

.voetnoot { margin-top: 1.3rem; font-size: .88rem; color: var(--tekst-2); display: flex; gap: .6rem; align-items: flex-start; }
.donker .voetnoot, .gras .voetnoot { color: var(--op-donker); }

/* ══ contact ══ */
.gegevens { display: grid; margin-top: 1.4rem; }
.gegevens .rij { display: grid; grid-template-columns: 6.2rem minmax(0,1fr); gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--lijn-donker); }
.gegevens .k { font: 600 .62rem/1.6 var(--disp); text-transform: uppercase; letter-spacing: .15em; color: var(--op-donker); }
.gegevens a { color: inherit; }

.voet { background: var(--lak-2); color: var(--op-donker); font-size: .85rem; }
.voet-in { width: var(--breed); margin: 0 auto; padding: 1.8rem 0; display: grid; gap: .35rem; }
.voet b { color: var(--papier); font-family: var(--disp); }

/* De afzenderstrook moet er VREEMD uitzien: hij is niet van de rijschool.
   In het riet-tan van het palet las hij als een vierde ontwerpsectie, waardoor
   de pagina eindigde op een blok van Haan WebWorks in plaats van op de klant.
   Nu: vlak grijs, systeemletter, kleiner — zichtbaar een sticker erbovenop. */
.sean { position: relative; background: #d9d7d2; color: #23262a; border-top: 1px solid #b9b6b0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.sean .linie { background-image: repeating-linear-gradient(to bottom, rgba(35,38,42,.05) 0 1px, transparent 1px 44px); }
.sean-in { position: relative; width: var(--breed); margin: 0 auto; padding: 1.35rem 0 1.6rem; display: grid; gap: .35rem; max-width: 62ch; }
.sean .etiket { font-family: inherit; font-size: .6rem; color: #5c6068; }
.sean h3 { font-family: inherit; font-size: .98rem; font-weight: 700; letter-spacing: 0; }
.sean p { margin: 0; font-size: .87rem; line-height: 1.55; color: #3d4147; }
.sean a { color: #23262a; }

/* ══ beweging — zichtbaar is de standaard; verbergen alleen mét JS ══ */
.op { opacity: 1; transform: none; }
html.js .op { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
html.js .op.in { opacity: 1; transform: none; }
html.js .op[data-v="1"] { transition-delay: .08s; }
html.js .op[data-v="2"] { transition-delay: .16s; }
html.js .op[data-v="3"] { transition-delay: .24s; }
.reveal.in, html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .op { opacity: 1; transform: none; transition: none; }
  .hero .h-riet { animation: none; }
  .knop:hover { transform: none; }
  .som .balkje { transition: none; }
}