/* ============================================================
   Rijschool Iwan N.V. — Brand Design System
   Colors extracted from logo: vivid blue #1565c0, red #d32f2f
   ============================================================ */
/* Lettertypen komen via een <link> in de <head>, niet met @import:
   die moet wachten tot dit bestand binnen is en vertraagt daardoor
   het moment waarop de eerste tekst zichtbaar wordt. */

:root {
  /* ── Brand (from logo) ──────────────────── */
  --blue:       #1a79d4;   /* "IWAN N.V." vivid blue from logo */
  --blue-d:     #1058a8;   /* darker blue */
  --blue-l:     #3a92e8;   /* lighter shade */
  --blue-xl:    #e3f0fd;   /* tint for backgrounds */
  --red:        #d92b2b;   /* L-plate triangle / steering wheel from logo */
  --red-d:      #b01e1e;
  --red-l:      #ef4444;   /* lighter red for hover states */
  --red-xl:     #fdecea;   /* tint for backgrounds */

  /* ── Road / Asphalt ─────────────────────── */
  --asphalt:    #0f1923;   /* very dark road */
  --asphalt-2:  #1a2535;   /* sidebar hover / border */
  --asphalt-3:  #243040;   /* lighter dark */
  --stripe:     #f5c800;   /* yellow road marking */

  /* ── Surfaces ───────────────────────────── */
  --bg:         #f0f4f8;
  --surface:    #ffffff;
  --border:     #dde3ea;

  /* ── Text ───────────────────────────────── */
  --text:       #0f1923;
  --text-2:     #3d4f61;
  --muted:      #8fa0b3;

  /* ── Semantic ───────────────────────────── */
  --success:    #1b7f3b;
  --danger:     var(--red);
  --warning:    #e07b00;

  /* ── Shadows ────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(15,25,35,.06), 0 1px 2px rgba(15,25,35,.04);
  --shadow:     0 4px 16px rgba(15,25,35,.09), 0 1px 4px rgba(15,25,35,.05);
  --shadow-lg:  0 12px 40px rgba(15,25,35,.14), 0 4px 12px rgba(15,25,35,.07);
  --shadow-xl:  0 32px 80px rgba(15,25,35,.22);
  --shadow-blue:0 6px 20px rgba(21,101,192,.3);
  --shadow-red: 0 6px 20px rgba(211,47,47,.3);

  /* ── Radii ──────────────────────────────── */
  --r-sm:  5px;
  --r:     10px;
  --r-lg:  16px;
  --r-xl:  24px;

  --t: .17s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* De hele opmaak staat in rem, dus de basisgrootte bepaalt alles.
     Standaard hangt hij aan de BREEDTE: die verandert niet als een mobiele
     browser zijn adresbalk in- of uitschuift, dus de pagina kan tijdens het
     scrollen nooit herberekenen. De waarden houden gangbare telefoons op hun
     vertrouwde maat (390px breed → 14,4px). */
  font-size: clamp(13.5px, 6.8vw - 12.1px, 16px);
}

/* Alleen op een echt bureaubladvenster — breed én hoog genoeg — schaalt de
   tekst mee met de HOOGTE, zodat de opmaak ook klopt bij 125-150%
   systeemzoom of een klein venster. De eis min-height is nieuw: zonder die
   eis viel een telefoon in liggende stand (844x390) ook onder deze regel.
   De hoogte van 390px zette de basisgrootte dan op het minimum van 13,5px en
   werd de hele pagina — koppen, lopende tekst, knoppen — onleesbaar klein.
   svh in plaats van vh: die ligt vast bij een in- of uitschuivende adresbalk;
   de vh-regel blijft staan voor browsers van voor 2022. */
@media (min-width: 768px) and (min-height: 600px) {
  html {
    font-size: clamp(13.5px, 1.25vh + 5px, 16px);
    font-size: clamp(13.5px, 1.25svh + 5px, 16px);
  }
}
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* De footer eindigt op een halve pixel (…,328). Bij een Windows-schaal van
   125% of 175% rondt de browser de documenthoogte naar beneden af en schijnt
   er één apparaatpixel canvas onder de footer door — een lichte streep, want
   zonder eigen achtergrond op <html> erft het canvas de body-kleur. Hier
   krijgt het canvas dus de footerkleur. Een schaduw of negatieve marge op de
   footer helpt niet: die worden op de documentrand afgeknipt, het canvas
   erbuiten niet. Dankzij :has() geldt dit alleen voor pagina's mét footer,
   zodat het lichte canvas van portaal en beheer ongemoeid blijft. */
html:has(> body > footer) { background: var(--asphalt); }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ── Layout helpers ──────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes float   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes pulse   { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes tread   { from { stroke-dashoffset:300; } to { stroke-dashoffset:0; } }

.fade-up   { animation: fadeUp .5s ease both; }
.fade-up-1 { animation: fadeUp .5s .08s ease both; }
.fade-up-2 { animation: fadeUp .5s .16s ease both; }
.fade-up-3 { animation: fadeUp .5s .25s ease both; }

/* ── Scroll-reveal ────────────────────────────────────── */
/* Hidden state — no transition here, so hover effects are never overridden */
[data-animate]          { opacity: 0; transform: translateY(52px); }
[data-animate="left"]   { transform: translateX(-52px); }
[data-animate="right"]  { transform: translateX(52px); }
[data-animate="scale"]  { transform: scale(.9) translateY(20px); }

/* Op smalle schermen schuiven de zijwaartse onthullingen van boven naar
   beneden in plaats van opzij. Die 52px opzij is op een telefoon van 390px
   namelijk breder dan de pagina toelaat: het element steekt dan rechts uit
   en de hele pagina wordt 30px horizontaal versleepbaar. Dat voelt als een
   losse, glibberige pagina — zeker in combinatie met een adresbalk die
   in- en uitschuift. */
/* De zijwaartse variant past pas als er links en rechts ruimte naast de
   container is: 1200px inhoud + 2x52px uitloop ≈ 1300px. Daaronder steekt het
   element buiten beeld en wordt de pagina horizontaal versleepbaar — precies
   wat er bij het verversen in liggende stand te zien was. Body op
   overflow-x:clip zetten kan niet: de browser maakt van de verticale as dan
   'hidden' en de sticky elementen (navbar, polaroid) werken niet meer. */
@media (max-width: 1320px) {
  [data-animate="left"],
  [data-animate="right"] { transform: translateY(52px); }
}

/* Visible state — transition is only active during the reveal animation.
   JS removes the attribute after the animation ends, restoring normal styles. */
[data-animate].in-view {
  opacity: 1;
  transform: none;
  transition:
    opacity   .5s cubic-bezier(0.16, 1, 0.3, 1),
    transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-eyebrow[data-animate].in-view { transition-duration: .35s; }
.section-title[data-animate].in-view   { transition-duration: .40s; }
.section-sub[data-animate].in-view     { transition-duration: .45s; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  padding: .8rem 1.1rem;
  border-radius: var(--r);
  margin-bottom: 1rem;
  font-size: .88rem;
  font-weight: 500;
  border-left: 4px solid;
}
.alert-success { background:#f0fdf4; color:#15803d; border-color:#22c55e; }
.alert-danger   { background:var(--red-xl); color:var(--red-d); border-color:var(--red); }
.alert-info     { background:var(--red-xl); color:var(--red-d); border-color:var(--red); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.4rem;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow); text-decoration:none; }
.btn:active { transform:translateY(0) scale(.98); }

/* Blue — primary brand */
.btn-primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  border-color: var(--red-d);
  box-shadow: var(--shadow-red);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--red-l) 0%, var(--red) 100%); border-color: var(--red); color: #fff; box-shadow: 0 8px 28px rgba(217,43,43,.5); }

/* WhatsApp — aanmelden loopt uitsluitend via WhatsApp, dus krijgen al die
   knoppen de herkenbare groene kleur en het logo. Het pictogram staat als
   achtergrond in ::before en niet als <svg> in de opmaak, zodat het maar op
   één plek staat en elke knop alleen de klasse nodig heeft. */
/* Zelfde groen als .wa-send-btn in het aanmeldformulier, anders staan er
   twee net verschillende WhatsApp-tinten op één pagina. */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
}
.btn-whatsapp:hover {
  background: #1ebe5d;
  border-color: #1ebe5d;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .55);
}
.btn-whatsapp::before {
  content: '';
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Red — L-plate accent */
.btn-red {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  border-color: var(--red-d);
  box-shadow: var(--shadow-red);
}
.btn-red:hover { background: linear-gradient(135deg, var(--red-d) 0%, #8b1414 100%); border-color: #8b1414; color: #fff; }

/* Red CTA */
.btn-yellow {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  border-color: var(--red-d);
}
.btn-yellow:hover { background: linear-gradient(135deg, var(--red-d) 0%, #8b1414 100%); border-color: #8b1414; color: #fff; }

/* Ghost */
.btn-ghost {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color:var(--red); color:var(--red); }

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-outline:hover { background:var(--red); color:#fff; }

/* White outline (dark bg) */
.btn-white-outline {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn-white-outline:hover { background:rgba(255,255,255,.2); color:#fff; }

/* Danger / Success */
.btn-danger  { background:var(--red);     color:#fff; border-color:var(--red); }
.btn-danger:hover { background:var(--red-d); color:#fff; }
.btn-success { background:var(--success); color:#fff; border-color:var(--success); }

.btn-sm  { padding:.38rem .85rem; font-size:.78rem; }
.btn-lg  { padding:.72rem 1.8rem; font-size:.95rem; }
.btn-xl  { padding:.92rem 2.2rem; font-size:1rem; }

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 1.4rem; }

/* Blue top accent */
.card-blue { border-top: 3px solid var(--red); }
/* Red top accent */
.card-red  { border-top: 3px solid var(--red); }
/* Stripe (road marking) */
.card-road { border-top: 3px solid var(--blue); }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS — traffic-sign inspired
   ═══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.stat-card-blue::before   { background:var(--red); }
.stat-card-red::before    { background:var(--red); }
.stat-card-green::before  { background:var(--success); }
.stat-card-yellow::before { background:var(--blue); }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* Circular sign icon — like a real road sign circle */
.stat-icon-sign {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  border: 3px solid;
}
.si-blue   { background:var(--red-xl);  border-color:var(--red); }
.si-red    { background:var(--red-xl);   border-color:var(--red); }
.si-green  { background:#ecfdf5;         border-color:var(--success); }
.si-yellow { background:#fefce8;         border-color:var(--blue); }

.stat-num   {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-label { font-size:.77rem; color:var(--muted); margin-top:.2rem; font-weight:500; }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.1rem; }
.form-label { display:block; font-weight:600; font-size:.8rem; color:var(--text-2); margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.05em; }
.form-control {
  width: 100%;
  padding: .65rem .95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size:.9rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: all var(--t);
}
.form-control:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(217,43,43,.12); }
.form-control::placeholder { color:var(--muted); }
textarea.form-control { resize:vertical; min-height:90px; }

/* ── Mini card selectors ───────────────────────────────────── */
.form-card-grid  { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
/* Categories fit on one row when there's room (2×2 on small phones) */
@media (min-width: 480px) {
  .form-card-grid { grid-template-columns: repeat(4, 1fr); }
}
.form-card-row   { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.form-card-label {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
  padding:.35rem .3rem;
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  background: var(--surface);
  cursor:pointer;
  text-align:center;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
  user-select:none;
  box-shadow: var(--shadow-sm);
}
.form-card-label input[type=radio] { display:none; }
.form-card-label:hover {
  border-color: var(--blue-l);
  background: var(--blue-xl);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(26,121,212,.12);
}
.form-card-label.selected,
.form-card-label:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(26,121,212,.35);
  transform: translateY(-1px);
}
.form-card-label.selected .fck-sub,
.form-card-label:has(input:checked) .fck-sub { color: rgba(255,255,255,.75); }
/* Category card internals */
.fck-letter { font-size:.82rem; font-weight:900; line-height:1; letter-spacing:-.01em; }
.fck-sub { font-size:.56rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
/* Exam type row: horizontal layout */
.form-card-row .form-card-label {
  flex-direction:row; gap:.4rem;
  padding:.4rem .6rem;
  font-size:.78rem; font-weight:600;
  justify-content:center;
}
.form-card-row .form-card-label svg { flex-shrink:0; opacity:.7; width:13px; height:13px; }
.form-card-row .form-card-label.selected svg,
.form-card-row .form-card-label:has(input:checked) svg { opacity:1; }

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead tr { background:var(--blue-xl); }
thead th {
  padding: .8rem 1.1rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Blue stripe on first column — brand accent */
thead th:first-child { border-left:3px solid var(--red); }
tbody tr { border-bottom:1px solid var(--border); transition:background var(--t); }
tbody tr:last-child { border:none; }
tbody tr:hover { background:#f5f8fd; }
tbody td { padding:.8rem 1.1rem; font-size:.875rem; vertical-align:middle; }

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .65rem;
  border-radius: var(--r-sm);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid;
}
.badge-pending { background:#fefce8; color:#854d0e; border-color:#fde047; }
.badge-student { background:#f0fdf4; color:#15803d; border-color:#86efac; }
.badge-admin   { background:var(--red-xl); color:var(--red-d); border-color:#fca5a5; }

/* ═══════════════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════════════ */
.progress-bar  { flex:1; height:8px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--red),var(--success)); border-radius:99px; transition:width .6s ease; }

/* ═══════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════ */
.filter-bar { display:flex; gap:.4rem; flex-wrap:wrap; }
.filter-btn {
  padding:.35rem .85rem;
  border-radius:var(--r-sm);
  border:1.5px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition:all var(--t);
  color:var(--text-2);
}
.filter-btn:hover { border-color:var(--red); color:var(--red); text-decoration:none; }
.filter-btn.active { background:var(--red); color:var(--text); border-color:var(--red); }

/* ═══════════════════════════════════════════════════════════
   PUBLIC NAVBAR
   ═══════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background .3s ease, box-shadow .3s ease;
}
.navbar.scrolled {
  background: #fff;
  box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,.07);
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--red-d), var(--red-l)) 1;
}
.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 72px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-brand img { height: 52px; width: auto; }
.nav-links { display:flex; align-items:center; gap:.05rem; list-style:none; }
.nav-menu-brand { display: none; }
.nav-links a:not(.btn) {
  color: var(--text-2);
  font-weight: 500;
  font-size: .82rem;
  padding: .5rem .85rem;
  border-radius: var(--r-sm);
  transition: color var(--t);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  position: relative;
}
.nav-links a.btn { color: #fff; }
.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: 4px; left: .85rem; right: .85rem;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .2s ease;
}
  /* Rode tekst bij hover, met een blauw streepje eronder: allebei de
     merkkleuren in één beweging. */
.nav-links a:not(.btn):hover { color: var(--red); text-decoration: none; }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links a.btn:hover { text-decoration: none; }
.nav-login { color: var(--text) !important; }
.nav-cta { margin-left: .5rem !important; }
/* Op een echt bureaubladvenster mag de inlogknop wat steviger staan: naast de
   menu-items van .82rem oogt de btn-sm van .78rem te klein. De ondergrens
   (min-height) staat gelijk aan die van de basisletter­grootte, zodat de
   liggende telefoon in het lade-menu blijft en hier niet door geraakt wordt. */
@media (min-width: 769px) and (min-height: 600px) {
  .nav-links .nav-cta {
    padding: .58rem 1.5rem;
    font-size: .9rem;
    letter-spacing: .015em;
  }
}
.nav-toggle {
  display: none;
  background: var(--red);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: .55rem .65rem;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 0;
  box-shadow: none;
  transition: background .15s, transform .1s;
}
.nav-toggle:active { transform: scale(.93); }
.nav-toggle span { display:block; width:20px; height:2px; background:#fff; margin:3px 0; border-radius:2px; transition: transform .25s ease, opacity .25s ease; }

/* ═══════════════════════════════════════════════════════════
   HERO — Photo background with brand overlay
   ═══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh; min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 8rem;
  background-image:
    linear-gradient(110deg, rgba(10,16,24,.93) 0%, rgba(10,16,24,.78) 55%, rgba(10,16,24,.55) 100%),
    url('../images/hero-bg.png');
  background-size: cover;
  background-position: center 40%;
  background-color: var(--asphalt);
}

/* Subtle brand-colour glow on top of the photo */
.hero-overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 50% 60% at 0% 50%,  rgba(26,121,212,.22) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 100% 65%, rgba(217,43,43,.18) 0%, transparent 65%);
}

.hero > .container {
  flex: 1;
  display: flex;
  align-items: center;
  padding-bottom: 4rem;
}

/* Two-column layout */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: center;
  position: relative; z-index: 2;
  width: 100%;
}

.hero-content { max-width: 600px; }

/* Animated "open" badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9);
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1.75rem;
}
.hero-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Headline */
/* Reserveletter voor de hero-kop.
   Anton is veel smaller dan de standaard schreefloze letter: dezelfde zin is
   in Arial ruim 40% breder en beslaat daardoor zes regels in plaats van vier.
   Zolang Anton nog binnenkomt, staat de kop dus veel te hoog en springt de
   hele pagina omlaag zodra hij geladen is. Met size-adjust krijgt de
   reserveletter precies de breedte van Anton, zodat er niets verspringt.
   De 70,2% is gemeten: dezelfde zin is 2519px in Anton en 3587px in Arial. */
@font-face {
  font-family: 'Anton reserve';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 70.2%;
  ascent-override: 145%;
  descent-override: 32%;
  line-gap-override: 0%;
  font-display: swap;
}

.hero h1 {
  /* Anton bestaat alleen in gewicht 400. Zet je hier 700 of 800, dan maakt de
     browser er zelf een vette variant van en dat ziet er uitgesmeerd uit. */
  font-family: 'Anton', 'Anton reserve', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.35rem, 10.5vw, 4.1rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.06;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-accent {
  color: var(--red);
  -webkit-text-stroke: 1px rgba(255,255,255,.1);
}

/* Kleuraccenten in CMS-teksten (hero-titel). Dit zijn de enige twee
   opmaakregels die via Websitebeheer in een tekst mogen belanden. */
.acc-blue { color: var(--blue); }
.acc-red  { color: var(--red); -webkit-text-stroke: 1px rgba(255,255,255,.1); }

/* ── Typemachine-effect in de hero ─────────────────────────────
   De letters staan er vanaf het begin allemaal in, alleen onzichtbaar. Zo
   houdt de kop meteen zijn definitieve hoogte en verspringt de rest van de
   pagina niet terwijl er "getypt" wordt. Spaties krijgen bewust géén eigen
   element, anders verandert de manier waarop de browser regels afbreekt.
   Alles hieronder werkt alleen als JavaScript de klasse .is-typing zet;
   zonder script staat de kop er gewoon in één keer. */
.hero h1.is-typing .ty-ch { opacity: 0; position: relative; }
.hero h1.is-typing .ty-ch.is-on { opacity: 1; }

/* De cursor is geen eigen element maar een ::after op de letter die net
   verschenen is. Een los element — ook eentje van nul breed — telt namelijk
   als plek waar de regel mag afbreken, en dan verspringt de tekst terwijl de
   cursor er doorheen loopt. Absoluut gepositioneerd doet hij niets met de
   opmaak. */
/* De maten hieronder komen uit de letter zelf. Anton meet op font-size 1em:
   regelvak 1,510em, basislijn 1,180em onder de bovenkant, hoofdletters
   0,870em hoog. De cursor loopt dus van 1,180 − 0,870 = 0,31em vanaf boven
   tot aan de basislijn. Uitlijnen op de ónderkant van het vak zet hem veel te
   laag: dat vak loopt bij Anton ver onder de basislijn door. */
.hero h1.is-typing .ty-ch.is-caret::after {
  content: '';
  position: absolute;
  left: 100%;
  top: .31em;
  margin-left: .07em;
  width: .07em;
  height: .87em;
  background: var(--red);
  box-shadow: 0 0 12px rgba(217,43,43,.85);
  animation: caretBlink .75s steps(1, end) infinite;
}
@keyframes caretBlink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }

/* De tekst en de knop onder de kop wachten tot er uitgetypt is.
   Deze klassen worden door JavaScript gezet; staat het script uit, dan is er
   niets verborgen en ziet de bezoeker gewoon de hele hero. De fade-up van
   .fade-up-2/-3 moet expliciet uit, want een animatie met fill-mode 'both'
   wint het van een losse opacity-regel. */
.hero.ty-hold .hero-sub,
.hero.ty-hold .hero-btns {
  animation: none;
  opacity: 0;
}
.hero.ty-reveal .hero-sub  { animation: fadeUp .55s ease both; }
.hero.ty-reveal .hero-btns { animation: fadeUp .55s .12s ease both; }

@media (prefers-reduced-motion: reduce) {
  .hero h1.is-typing .ty-ch { opacity: 1; }
  .hero h1.is-typing .ty-ch.is-caret::after { display: none; }
  .hero.ty-hold .hero-sub,
  .hero.ty-hold .hero-btns { animation: none; opacity: 1; }
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 2.2rem;
  max-width: 480px;
  line-height: 1.8;
}

.hero-btns { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:2rem; }

/* Trust badges row */
.hero-trust {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hero-trust span {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Stat card (right column) */
.hero-aside { display:flex; justify-content:flex-end; }

.hero-stat-card {
  background: rgba(15,25,35,.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  text-align: center;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  animation: float 6s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.hero-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
}

.hsc-logo img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto .75rem;
  
}
.hsc-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
}
.hsc-tagline {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .25rem;
}
.hsc-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 1.25rem 0;
}
.hsc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hsc-stat { text-align: center; }
.hsc-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.hsc-label {
  font-size: .65rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .2rem;
}
.hsc-cta-btn {
  display: block;
  background: linear-gradient(135deg, #1a79d4 0%, #1255a0 100%);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: .72rem 1.4rem;
  border-radius: var(--r-sm);
  transition: all var(--t);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(26,121,212,.35);
  border: none;
}
.hsc-cta-btn:hover { background: linear-gradient(135deg, #1255a0 0%, #0d3d7a 100%); text-decoration: none; transform: translateY(-1px); }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  margin: 0 auto;
  animation: fadeUp 2s ease-in-out infinite alternate;
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS — public pages
   ═══════════════════════════════════════════════════════════ */
.section { padding: 5rem 0; }
.section-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.section-eyebrow::before { content:''; display:block; width:20px; height:3px; background:var(--red); border-radius:99px; }
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: .55rem;
}
.section-sub { color:var(--text-2); font-size:.97rem; margin-bottom:3rem; max-width:520px; }

/* Stats bar */
.stats-bar {
  background: var(--asphalt);
  width: 100%;
  z-index: 3;
}
.stats-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--blue-l), var(--blue-d)) 1;
}
.stat-item { padding:2rem 1.5rem; text-align:center; border-right:1px solid rgba(255,255,255,.07); }
.stat-item:last-child { border:none; }
.stat-item-num { font-family:'Barlow Condensed',sans-serif; font-size:2.8rem; font-weight:700; line-height:1; color:#fff; }
.stat-item-label { color:rgba(255,255,255,.5); font-size:.8rem; margin-top:.3rem; text-transform:uppercase; letter-spacing:.06em; }

/* Feature cards — redesigned */
.feature-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15,25,35,.05);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 3;
}
.feature-card:hover { transform: translateY(-5px); }

/* Top accent bars — specific color for each category card */
.fc-red::before {
  background: linear-gradient(90deg, var(--red-d), var(--red-l));
}
.fc-blue::before {
  background: linear-gradient(90deg, var(--blue-d), var(--blue-l));
}
.fc-green::before {
  background: linear-gradient(90deg, #15803d, #4ade80);
}
.fc-amber::before {
  background: linear-gradient(90deg, #b45309, #fbbf24);
}
/* Grey for theory/practice cards */
.fc-purple::before, .fc-teal::before {
  background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}

/* Hover glows — matching color accents */
.fc-red:hover {
  box-shadow: 0 16px 48px rgba(217,43,43,.12), 0 4px 16px rgba(15,25,35,.05);
}
.fc-blue:hover {
  box-shadow: 0 16px 48px rgba(26,121,212,.12), 0 4px 16px rgba(15,25,35,.05);
}
.fc-green:hover {
  box-shadow: 0 16px 48px rgba(21,128,61,.12), 0 4px 16px rgba(15,25,35,.05);
}
.fc-amber:hover {
  box-shadow: 0 16px 48px rgba(180,83,9,.12), 0 4px 16px rgba(15,25,35,.05);
}
.fc-purple:hover, .fc-teal:hover {
  box-shadow: 0 16px 48px rgba(148,163,184,.15), 0 4px 16px rgba(15,25,35,.05);
}

/* Circular icon */
.fc-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.feature-card:hover .fc-icon { transform: scale(1.1) rotate(-3deg); }
.fc-icon svg { width: 28px; height: 28px; }

/* Icon + badge in one row */
.fc-top { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.fc-top .fc-icon { margin-bottom: 0; }
.fc-top .fc-cat  { margin-bottom: 0; }

.ci-red   { background: linear-gradient(135deg, #fef2f2, #fecaca); color: var(--red); }
.ci-blue  { background: linear-gradient(135deg, #eff6ff, #bfdbfe); color: var(--blue); }
.ci-green { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); color: var(--success); }
.ci-amber  { background: linear-gradient(135deg, #fffbeb, #fde68a); color: #b45309; }
.ci-purple { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #7c3aed; }
.ci-teal   { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); color: #0d9488; }

/* Category badge pill */
.fc-cat {
  display: inline-flex; align-items: center;
  padding: .18rem .7rem;
  border-radius: 99px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .55rem; width: fit-content;
}
.fc-red  .fc-cat { background: var(--red-xl);  color: var(--red-d);  border: 1px solid #fca5a5; }
.fc-blue .fc-cat { background: var(--blue-xl); color: var(--blue-d); border: 1px solid #93c5fd; }
.fc-green .fc-cat{ background: #f0fdf4;        color: #15803d;       border: 1px solid #86efac; }
.fc-amber  .fc-cat { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.fc-purple .fc-cat { background: #f5f3ff; color: #6d28d9; border: 1px solid #c4b5fd; }
.fc-teal   .fc-cat { background: #f0fdfa; color: #0f766e; border: 1px solid #5eead4; }

.feature-card h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.5rem; }
.feature-card p  { color:var(--text-2); font-size:.875rem; line-height:1.7; flex:1; }

/* Meer info footer link */
.fc-more {
  display: flex; align-items: center; gap: .4rem;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  border-left: none; border-right: none; border-bottom: none;
  background: none; padding-left: 0; padding-right: 0;
  font-size: .75rem; font-weight: 700; font-family: inherit;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer; width: 100%;
  transition: gap .2s ease;
}
.fc-red .fc-more, .fc-blue .fc-more, .fc-green .fc-more, .fc-amber .fc-more { color: var(--red); }
.fc-purple .fc-more, .fc-teal .fc-more { color: #94a3b8; }
.fc-more:hover { gap: .7rem; text-decoration: none; }
.fc-more svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .2s ease; }
.fc-more:hover svg { transform: translateX(3px); }

/* ── Feature card — image top, white content below ─────── */
.fc-bg {
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 180px;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .5s ease;
}
.fc-has-img:hover .fc-bg { transform: scale(1.04); }

/* Gentle fade only at the bottom edge of the image */
.fc-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, #fff);
}

/* Card keeps its normal light style */
.fc-has-img {
  padding-top: calc(180px + .25rem);
  min-height: auto;
  justify-content: flex-start;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(15,25,35,.06);
}

/* All content above the image layer */
.fc-has-img .fc-top,
.fc-has-img h3,
.fc-has-img p,
.fc-has-img .fc-more { position: relative; z-index: 2; }

/* Pull fc-top slightly into the fade zone for depth */
.fc-has-img .fc-top { margin-top: -2rem; }

/* White icon with card-accent color — matches page style */
.fc-has-img .fc-icon {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.fc-red   .fc-icon { color: var(--red)     !important; }
.fc-blue  .fc-icon { color: var(--blue)    !important; }
.fc-green .fc-icon { color: var(--success) !important; }
.fc-amber .fc-icon { color: #b45309       !important; }
.fc-has-img .fc-icon svg { stroke: currentColor; }

/* Restore badge to page-style colours */
.fc-has-img .fc-cat {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Restore text to dark-on-white */
.fc-has-img h3 { color: var(--text); }
.fc-has-img p  { color: var(--text-2); }
.fc-has-img .fc-more {
  border-top-color: var(--border) !important;
}
.fc-has-img .fc-more svg { stroke: currentColor; }

/* ── Tinted accent cards (Theorie & Praktijk) ───────────── */
.fc-purple {
  background: var(--surface);
  border-color: var(--border);
}
.fc-teal {
  background: var(--surface);
  border-color: var(--border);
}
.fc-purple:hover { box-shadow: 0 16px 40px rgba(109,40,217,.14), 0 4px 12px rgba(15,25,35,.06); }
.fc-teal:hover   { box-shadow: 0 16px 40px rgba(15,118,110,.14), 0 4px 12px rgba(15,25,35,.06); }

/* Polaroid photo */
.polaroid {
  background: #fff;
  padding: 1rem 1rem .6rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  border-radius: 2px;
  transform: rotate(-2deg);
  max-width: 380px;
  width: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.polaroid img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 1px;
}
.polaroid-caption {
  padding: .8rem .25rem .35rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-2);
  letter-spacing: .01em;
}

/* ── Premium instructor cards ─────────────────────────────── */
.instr-card {
  flex: 0 1 360px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.instr-card:hover {
  transform: translateY(-6px);
}

/* Modifiers for top accent line & custom glows */
.instr-card-blue::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-d), var(--blue-l));
  z-index: 10;
}
.instr-card-blue:hover {
  box-shadow: 0 16px 48px rgba(26,121,212,.15), 0 4px 16px rgba(15,25,35,.05);
}

.instr-card-red::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red-d), var(--red-l));
  z-index: 10;
}
.instr-card-red:hover {
  box-shadow: 0 16px 48px rgba(217,43,43,.15), 0 4px 16px rgba(15,25,35,.05);
}

/* Cover photo area */
.instr-cover {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.instr-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .4s ease;
}
.instr-card:hover .instr-cover-img { transform: scale(1.04); }
.instr-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10,14,30,.82) 100%);
}

/* Badge chip top-right */
.instr-cover-badge {
  position: absolute;
  top: .85rem;
  right: .85rem;
  background: var(--blue);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 99px;
}
.instr-cover-badge--red { background: var(--red); }

/* Name & role overlaid at bottom of photo */
.instr-cover-identity {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.instr-cover-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: .01em;
}
.instr-cover-role {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* Body */
.instr-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.instr-quote {
  font-size: .88rem;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0 0 1.1rem;
  border-left: 3px solid var(--blue-l);
  padding-left: .85rem;
}

/* Stats row */
.instr-stats {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.instr-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}
.instr-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.instr-stat-lbl {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.instr-stat-div {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* Instructor cards */
.instructor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem 2rem;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.instructor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.instructor-pic-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 1.25rem;
}
.instructor-pic-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--blue) 0%, var(--blue-l) 50%, var(--red) 100%);
  z-index: 0;
}
.instructor-pic-wrap::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--surface);
  z-index: 1;
  margin: 3px;
}
.instructor-photo {
  position: relative;
  z-index: 2;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.instructor-avatar {
  position: relative;
  z-index: 2;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-xl);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--blue);
}
.instructor-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .4rem;
}
.instructor-role {
  display: inline-block;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-xl);
  border-radius: 99px;
  padding: .2rem .85rem;
  margin-bottom: .75rem;
}
.instructor-bio {
  font-size: .87rem;
  color: var(--text-2);
  line-height: 1.65;
}

/* About visual — road */
.about-road {
  background: var(--asphalt);
  border-radius: var(--r-lg);
  height: 360px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--asphalt-2);
}
.about-road::before {
  content:'';
  position:absolute; top:50%; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg,var(--blue) 0,var(--blue) 40px,transparent 40px,transparent 80px);
}
.about-road::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 40%, rgba(21,101,192,.25), transparent 60%),
             radial-gradient(ellipse at 75% 70%, rgba(211,47,47,.15), transparent 60%);
}
.about-road-car { font-size:5rem; position:relative; z-index:1; animation:float 3.5s ease-in-out infinite; filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* Steps */
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; position:relative; }
.steps-grid::before {
  content:'';
  position:absolute;
  top:28px; left:10%; right:10%; height:3px;
  background:repeating-linear-gradient(90deg,var(--blue) 0,var(--blue) 16px,transparent 16px,transparent 28px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) .2s;
}
.steps-grid.line-visible::before {
  transform: scaleX(1);
}
.step { text-align:center; padding:0 1.5rem; position:relative; z-index:1; }
.step-num {
  width:56px; height:56px; border-radius:50%;
  background:var(--red); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:1.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem;
  box-shadow:var(--shadow-red);
  border:3px solid #fff;
}
.step h4 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.05rem; color:var(--text); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.4rem; }
.step p  { color:var(--text-2); font-size:.87rem; }

/* Availability chip (CTA section) */
.hero-sign-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9);
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.hero-sign-chip .light {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* CTA section */
.cta-section {
  background:
    linear-gradient(110deg, rgba(10,16,24,.88) 0%, rgba(10,16,24,.72) 55%, rgba(10,16,24,.55) 100%),
    url('../images/bg1.png') center/cover no-repeat;
  position: relative; overflow:hidden;
  padding: 5rem 0;
  border-top: 4px solid;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, var(--red-d), var(--red-l)) 1;
}
.cta-section .container { position:relative; z-index:1; text-align:center; }
.cta-section h2 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.75rem; }
.cta-section p  { color:rgba(255,255,255,.6); font-size:1rem; margin-bottom:2rem; }

/* Contact */
.contact-card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--red);
  transition: all var(--t);
}
/* De locaties stonden in een vaste raster van twee kolommen. Is er maar één
   locatie, dan blijft de rechterkolom leeg en staat de kaart links uit het
   midden. Met flexbox schuiven ze altijd netjes naar het midden, ongeacht het
   aantal. De maximumbreedte is precies de breedte die een kaart in een rij van
   twee heeft ((1200 − 2×24 padding − 24 gap) ÷ 2 = 564px), zodat één locatie
   er niet uitgerekt uitziet. */
.contact-locations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.contact-locations > * {
  flex: 1 1 340px;
  max-width: 564px;
}

.contact-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.contact-icon { font-size:2rem; margin-bottom:.75rem; }
.contact-card h4 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.1rem; text-transform:uppercase; color:var(--text); margin-bottom:.5rem; }
.contact-card p  { color:var(--text-2); font-size:.9rem; }

/* Map contact cards */
.contact-card-map { padding: 0; overflow: hidden; }
.contact-map-wrap { width: 100%; height: 220px; flex-shrink: 0; }
.contact-map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.contact-map-body { padding: 1.25rem 1.4rem; }
.contact-map-body h4 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.1rem; text-transform:uppercase; color:var(--text); margin-bottom:.4rem; }
.contact-map-body p { color:var(--text-2); font-size:.875rem; line-height:1.6; }

/* Footer */
footer {
  background: var(--asphalt);
  color: rgba(255,255,255,.45);
  padding: 2rem 0;
  font-size: .875rem;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--blue-d), var(--blue-l)) 1;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 55% at 0% 0%, rgba(26,121,212,.1), transparent 60%),
    radial-gradient(ellipse 35% 45% at 100% 100%, rgba(217,43,43,.07), transparent 60%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3.5rem;
  margin-bottom: 3rem;
  position: relative; z-index: 1;
}

/* Brand column */
.footer-brand-col { display: flex; flex-direction: column; }
.footer-logo-img { height: 60px; width: auto; display: block; margin-bottom: .75rem; }
.footer-logo-bar { width: 72px; height: 3px; background: linear-gradient(90deg, var(--red), var(--blue)); border-radius: 99px; margin-bottom: 1.25rem; }
.footer-desc { font-size: .85rem; line-height: 1.85; max-width: 280px; margin-bottom: 1.5rem; color: rgba(255,255,255,.38); }
.footer-call-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: var(--r-sm);
  transition: all var(--t); text-decoration: none; width: fit-content;
}
.footer-call-btn svg { width: 14px; height: 14px; color: var(--blue-l); flex-shrink: 0; }
.footer-call-btn:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }

/* Section headings */
.footer-heading {
  font-family: 'Barlow Condensed', sans-serif;
  color: #fff; font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 1.25rem; padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: .5rem;
}
.footer-heading::before { content:''; display:block; width:3px; height:14px; background:linear-gradient(to bottom, var(--blue), var(--blue-d)); border-radius:99px; }

/* Nav links */
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: .4rem; }
.footer-nav a {
  color: rgba(255,255,255,.42);
  font-size: .875rem;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 0;
  text-decoration: none; position: relative; padding-left: 0;
}
.footer-nav a::before { content:'→'; margin-right: 0; width: 0; overflow: hidden; transition: width .2s ease, margin .2s ease; color: var(--blue-l); font-size: .75rem; }
.footer-nav a:hover { color: #fff; padding-left: 4px; text-decoration: none; }
.footer-nav a:hover::before { width: 1em; margin-right: .35rem; }

/* Contact list */
.footer-contact { list-style: none; }
.footer-contact li { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .8rem; }
.footer-contact svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--blue-l); }
.footer-contact span, .footer-contact a { color: rgba(255,255,255,.42); font-size: .875rem; line-height: 1.5; }
.footer-contact a { transition: color var(--t); text-decoration: none; }
.footer-contact a:hover { color: var(--blue-l); text-decoration: none; }

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem;
  font-size: .78rem; color: rgba(255,255,255,.28);
  position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════ */
.auth-page { min-height: 100vh; min-height: 100svh; display:grid; grid-template-columns:1fr 1fr; }
.auth-left {
  background: var(--asphalt);
  position: relative; overflow:hidden;
  display: flex; flex-direction:column; justify-content:center;
  padding: 4rem 3.5rem;
  border-right: 4px solid var(--red);
}
.auth-left::before {
  content: '';
  position: absolute; inset: 0;
  background:radial-gradient(ellipse 70% 60% at 20% 30%, rgba(21,101,192,.25), transparent),
             radial-gradient(ellipse 50% 50% at 80% 80%, rgba(211,47,47,.15), transparent);
}
/* Road stripe in auth left */
.auth-left::after {
  content: '';
  position: absolute; bottom:25%; left:0; right:0; height:3px;
  background: repeating-linear-gradient(90deg,var(--blue) 0,var(--blue) 40px,transparent 40px,transparent 80px);
}
.auth-left-content { position:relative; z-index:2; }
.auth-left-logo { margin-bottom:2rem; }
.auth-left-logo img { height:60px; width:auto; }
.auth-left h2 { font-family:'Barlow Condensed',sans-serif; font-size:2.4rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; margin-bottom:1rem; }
.auth-left p  { color:rgba(255,255,255,.55); line-height:1.75; margin-bottom:2rem; font-size:.92rem; }
.auth-features { display:flex; flex-direction:column; gap:.7rem; }
.auth-feature { display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.75); font-size:.88rem; }
.auth-feature-icon { width:28px; height:28px; border-radius:4px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }

.auth-right { background:var(--bg); display:flex; align-items:center; justify-content:center; padding:3rem 2rem; }
.auth-box {
  background: var(--surface);
  border-radius: var(--r);
  padding: 2.25rem;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
}
.auth-logo { margin-bottom:1.5rem; }
.auth-logo img { height:48px; width:auto; margin-bottom:.6rem; }
.auth-logo p { color:var(--muted); font-size:.85rem; }
.auth-divider { border:none; border-top:1px solid var(--border); margin:1.25rem 0; }

/* ═══════════════════════════════════════════════════════════
   APP SHELL — Admin & Portal
   ═══════════════════════════════════════════════════════════ */
.app-wrapper { display:flex; min-height: 100vh; min-height: 100svh; }

/* Sidebar */
.sidebar {
  width: 248px;
  background: #fff;
  display: flex; flex-direction:column;
  position: fixed; top:0; left:0; height: 100vh; height: 100svh;
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .3s ease;
  border-right: 1px solid var(--border);
}
/* Red top stripe — brand color */
.sidebar::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--red-d), var(--red), var(--blue)); }

.sidebar-brand {
  padding: 1.3rem 1.1rem 1rem;
  margin-top: 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sidebar-brand img { height: 40px; width: auto; flex-shrink:0; }
.sidebar-brand-text {}
.sidebar-brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
}
.sidebar-brand-name span { color: var(--blue); }  /* logo blue */
.sidebar-role {
  font-size: .6rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .15rem;
}

.sidebar-nav { padding:.6rem 0; flex:1; }
.sidebar-section {
  padding: .9rem 1.1rem .2rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1.1rem;
  margin: .06rem .5rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: .84rem; font-weight:500;
  transition: all var(--t);
  position: relative;
}
.sidebar-nav a:hover { color:var(--text); background:var(--red-xl); text-decoration:none; }
.sidebar-nav a.active {
  background: var(--red-xl);
  color: var(--red-d);
  font-weight: 700;
}
.sidebar-nav a.active::before {
  content:'';
  position:absolute; left:-.5rem; top:50%; transform:translateY(-50%);
  width:3px; height:60%;
  background:var(--red);
  border-radius:0 2px 2px 0;
}
.sidebar-nav .icon { width:18px; text-align:center; font-size:.95rem; flex-shrink:0; }

/* Dashed road divider between sections */
.sidebar-divider {
  height:1px; margin:.5rem 1.1rem;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0,rgba(255,255,255,.08) 6px,transparent 6px,transparent 12px);
}

.sidebar-footer {
  padding:.9rem 1.1rem;
  border-top:1px solid var(--border);
}
.sidebar-footer .user-info { font-size:.72rem; color:var(--muted); margin-bottom:.5rem; padding:.3rem .6rem; }
.sidebar-footer .user-info b { color:var(--text-2); }
.sidebar-footer a { display:flex; align-items:center; gap:.6rem; color:var(--text-2); font-size:.82rem; padding:.5rem .6rem; border-radius:var(--r-sm); transition:all var(--t); }
.sidebar-footer a:hover { color:var(--red); background:var(--red-xl); text-decoration:none; }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:199; }

/* Main content */
.main-content { flex:1; margin-left:248px; display:flex; flex-direction:column; min-height: 100vh; min-height: 100svh; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.75rem;
  height: 58px;
  display: flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index:100;
}
/* Blue stripe directly under topbar — brand touch */
.topbar-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--red-d) 0%, var(--red) 50%, var(--blue) 100%);
  position: sticky; top:58px; z-index:99;
}
.topbar-title { font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:.04em; }
.topbar-user  { display:flex; align-items:center; gap:.75rem; }
.user-avatar {
  width: 34px; height: 34px;
  background: var(--red);
  color: #fff;
  border-radius: var(--r-sm);
  display: flex; align-items:center; justify-content:center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 1rem;
}
.topbar-name { font-size:.85rem; font-weight:600; color:var(--text-2); }

.page-body { padding:1.75rem; flex:1; }

/* ═══════════════════════════════════════════════════════════
   QUIZ
   ═══════════════════════════════════════════════════════════ */
.quiz-card { max-width:700px; }
.quiz-options { display:grid; gap:.5rem; margin:1.25rem 0; }
.quiz-option {
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem 1.1rem;
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:all var(--t);
  font-size:.9rem;
}
.quiz-option:hover  { border-color:var(--red); background:var(--red-xl); }
.quiz-option input[type=radio] { accent-color:var(--red); width:16px; height:16px; flex-shrink:0; }
.quiz-option.correct { border-color:var(--success); background:#f0fdf4; }
.quiz-option.wrong   { border-color:var(--red);     background:var(--red-xl); }

/* ═══════════════════════════════════════════════════════════
   SIGNS & MAQUETTES
   ═══════════════════════════════════════════════════════════ */
.sign-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1rem; }
.sign-card {
  background:var(--surface);
  border-radius:var(--r);
  padding:1.1rem .9rem;
  text-align:center;
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:all .22s ease;
  cursor:pointer;
}
.sign-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--red); }
.sign-card img { width:85px; height:85px; object-fit:contain; margin:0 auto .65rem; }
.sign-placeholder { width:85px; height:85px; background:var(--red-xl); border:2.5px solid var(--red); border-radius:8px; margin:0 auto .65rem; display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.sign-card h4 { font-size:.78rem; color:var(--text); font-weight:700; margin-bottom:.15rem; }
.sign-card span { font-size:.7rem; color:var(--muted); }

.maquette-card {
  background:var(--surface);
  border-radius:var(--r);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:all .22s ease;
}
.maquette-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.maquette-thumb { width:100%; height:175px; object-fit:cover; }
.maquette-thumb-placeholder {
  width:100%; height:175px;
  background:var(--asphalt);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative; overflow:hidden;
}
.maquette-thumb-placeholder::before {
  content:'';
  position:absolute; top:50%; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg,var(--blue) 0,var(--blue) 30px,transparent 30px,transparent 50px);
}
.maquette-body { padding:1rem; }
.maquette-body h4 { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:800; color:var(--text); text-transform:uppercase; margin-bottom:.3rem; }
.maquette-body p  { font-size:.82rem; color:var(--muted); }

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(5px); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal {
  background:var(--surface);
  border-radius:var(--r);
  width:100%; max-width:520px;
  max-height: calc(90 * var(--vh, 1vh)); max-height: calc(90 * var(--vh, 1svh));
  overflow-y:auto;
  overscroll-behavior: contain;
  box-shadow:var(--shadow-xl);
  border:1px solid var(--border);
  border-top:4px solid var(--red);
  animation:fadeUp .2s ease;
}
.modal-header { padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.95rem; }
.modal-close { background:var(--bg); border:1px solid var(--border); cursor:pointer; font-size:.9rem; color:var(--muted); width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.modal-close:hover { background:var(--border); }
.modal-body   { padding:1.4rem; }
.modal-footer { padding:.9rem 1.4rem; border-top:1px solid var(--border); display:flex; gap:.6rem; justify-content:flex-end; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-aside { justify-content:flex-start; }
  .hero-stat-card { max-width: 100%; animation:none; }
  .hero-sign-card { display:none; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .stats-bar-inner { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .topbar { padding:0 1rem; }
}
@media (max-width:768px) and (orientation: portrait) {
  /* Push hero below the restored fixed header + extra breathing room */
  .hero { padding-top: 54px !important; }
  .hero > .container { padding-top: 1.75rem !important; }
  /* ── Portrait: visible header bar with logo + hamburger ── */
  #navbar, #navbar.scrolled {
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(15,25,35,.09) !important;
    border-bottom: 1.5px solid var(--border) !important;
    border-image: none !important;
    pointer-events: all !important;
  }
  .navbar-brand { display: flex !important; }
  .navbar-brand img { height: 36px !important; }
  .navbar-inner { height: 54px !important; padding: 0 1.5rem !important; }
  .nav-toggle {
    display: flex !important;
    position: static !important;
    background: var(--red) !important;
    border: none !important;
    box-shadow: none !important;
    padding: .42rem .52rem !important;
    border-radius: 8px !important;
  }
  .nav-toggle span { width: 17px !important; height: 2px !important; margin: 2px 0 !important; }
  .nav-toggle.open { background: var(--red-d) !important; }

  /* ── Hero card: compact ── */
  .hero-aside { justify-content: center; }
  .hero-stat-card { padding: 1.25rem 1.25rem; border-radius: 16px; animation: none; max-width: 300px; }
  .hsc-logo img { width: 50px; height: 50px; margin-bottom: .45rem; }
  .hsc-name { font-size: 1.05rem; }
  .hsc-tagline { font-size: .62rem; }
  .hsc-divider { margin: .8rem 0; }
  .hsc-grid { gap: .6rem; margin-bottom: .9rem; }
  .hsc-num { font-size: 1.5rem; }
  .hsc-label { font-size: .6rem; margin-top: .15rem; }
  .hsc-cta-btn { font-size: .8rem; padding: .55rem 1rem; }

  /* ── Stats bar: compact ── */
  .stat-item { padding: 1rem 1rem; }
  .stat-item-num { font-size: 2rem; }
  .stat-item-label { font-size: .7rem; margin-top: .2rem; }

  /* ── Feature cards: compact ── */
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .feature-card { padding: 1rem; border-radius: 12px; }
  .fc-bg { height: 130px; }
  .fc-bg::after { height: 40px; }
  .fc-has-img { padding-top: calc(130px + .25rem); }
  .fc-has-img .fc-top { margin-top: -1.75rem; }
  .fc-icon { width: 42px; height: 42px; }
  .fc-icon svg { width: 19px; height: 19px; }
  .fc-top { gap: .6rem; margin-bottom: .65rem; }
  .fc-cat { font-size: .63rem; padding: .18rem .55rem; }
  .feature-card h3 { font-size: 1rem; margin-bottom: .3rem; }
  .feature-card p  { font-size: .78rem; line-height: 1.5; }
  .fc-more { padding-top: .6rem; font-size: .75rem; }

  /* ── Geschiedenis: compact ── */
  .polaroid { max-width: 240px; transform: none; padding: .65rem .65rem .45rem; }
  .polaroid img { height: 400px !important; }
  .polaroid-caption { font-size: .8rem; padding: .45rem .2rem .2rem; }

  /* ── Instructor cards: compact ── */
  .instructor-card { padding: 1.25rem 1rem; }
  .instructor-pic-wrap { width: 80px; height: 80px; margin-bottom: .75rem; }
  .instructor-photo { width: 80px; height: 80px; }
  .instructor-avatar { width: 80px; height: 80px; font-size: 1.6rem; }
  .instructor-name { font-size: 1rem; margin-bottom: .25rem; }
  .instructor-role { font-size: .65rem; padding: .15rem .65rem; margin-bottom: .5rem; }
  .instructor-bio { font-size: .76rem; line-height: 1.55; }

  /* ── Location/contact cards: compact ── */
  .contact-card-map .contact-map-wrap { height: 140px; }
  .contact-map-body { padding: .85rem 1rem; }
  .contact-map-body h4 { font-size: .95rem; margin-bottom: .25rem; }
  .contact-map-body p { font-size: .78rem; line-height: 1.5; }
  .contact-card { padding: 1.1rem; }
  .contact-icon { font-size: 1.5rem; margin-bottom: .5rem; }
  .contact-card h4 { font-size: .95rem; margin-bottom: .35rem; }
  .contact-card p { font-size: .78rem; }

  /* ── Hero heading: allow wrapping so nowrap doesn't overflow ── */
  .hero h1 span { white-space: normal !important; }

  /* ── Aanmelden button: smaller in portrait ── */
  .hero-btns .btn-primary { min-width: unset !important; padding: .7rem 2rem !important; font-size: .95rem !important; }
}

@media (max-width:768px) {

  .hero { padding: 1.5rem 0 0; min-height: auto; }
  .hero > .container { padding-bottom: 1rem; }
  .hero-btns { margin-bottom: .75rem; }
  .hero-layout { gap: 1rem; }
  .hsc-cta-btn { font-size: .78rem; padding: .52rem 1rem; }
  .auth-page { grid-template-columns:1fr; }
  .auth-left { display:none; }
  .auth-right { padding:2rem 1rem; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }

  /* ── Mobile nav ── */

  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: none;
    padding: 0 1.5rem max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
    gap: .25rem;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: all !important;
  }
  .nav-links.open { display: flex; }
  .nav-links * { pointer-events: all !important; }

  /* Mobile nav link styles */
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) {
    display: block;
    width: 100%;
    padding: .65rem 0;
    border-radius: var(--r-sm);
    font-size: .875rem;
    color: var(--text) !important;
  }
  .nav-links a:not(.btn):hover { background: none; color: var(--red) !important; }
  .nav-links a:not(.btn)::after { display: none; }
  /* Logo + close button — mirrors the navbar height and padding */
  .nav-menu-brand {
    display: flex !important; align-items: center; justify-content: space-between;
    height: 54px; padding: env(safe-area-inset-top, 0) 0 0;
    border-bottom: 1px solid var(--border); margin-bottom: .5rem; flex-shrink: 0;
  }
  .nav-menu-brand img { height: 36px; max-height: 36px; width: auto; max-width: 160px; display: block; }
  #navClose {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1.5px solid var(--border);
    border-radius: 8px; cursor: pointer; color: var(--text-2);
    transition: background .15s, color .15s;
  }
  #navClose:hover { background: var(--bg); color: var(--text); }
  #navClose:active { transform: scale(.93); }

  /* Duwt de inlogknop naar de onderkant van het mobiele menu. Was
     nth-last-child(2) toen er nog een Aanmelden-knop achter stond. */
  .nav-links li:last-child { margin-top: auto; }
  .nav-links .nav-cta {
    display: block;
    width: 100%;
    margin: .5rem 0 0 0 !important;
    text-align: center;
    padding: .65rem 1rem !important;
  }

  .footer-grid { grid-template-columns:1fr; }
  .steps-grid::before { display:none; }
  .page-body { padding:1rem; }
}
@media (max-width:768px) {
  .btn-xl { padding: .68rem 1.6rem; font-size: .9rem; }
  .btn-lg { padding: .6rem 1.3rem; font-size: .875rem; }
  .form-control { padding: .52rem .8rem; font-size: .82rem; }
  .form-label { font-size: .72rem; margin-bottom: .25rem; }
  .form-group { margin-bottom: .85rem; }
}
@media (max-width:520px) {
  .grid-4 { grid-template-columns:1fr; }
  .stats-bar-inner { grid-template-columns:repeat(3,1fr); }
  .hero-btns { flex-direction:column; }
  .hero-btns .btn { width:100%; justify-content:center; }
  .btn-xl { padding: .6rem 1.4rem; font-size: .85rem; }
  .btn-lg { padding: .55rem 1.2rem; font-size: .82rem; }
  .form-control { padding: .48rem .75rem; font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE MOBILE — phones in landscape only
   Targets height ≤ 500px + landscape orientation, which
   covers all phones but excludes tablets (≥ 768px tall) and
   desktops (≥ 600px tall). Desktop is fully unaffected.
   ═══════════════════════════════════════════════════════════ */
/* 599px en niet 500px: de basisgrootte schakelt hierboven op min-height:600px
   over naar de bureaubladregel. Lag de grens hier op 500px, dan viel een
   liggend scherm van 501-599px hoog tussen wal en schip: volle 16px
   basisgrootte, maar geen enkele afstemming voor liggend — koppen van 36-41px
   en een checklist in bureaubladmaten. De twee grenzen horen gelijk te lopen. */
@media (orientation: landscape) and (max-height: 599px) {

  /* Push hero below the restored fixed header + extra breathing room */
  .hero { padding-top: 48px !important; }
  .hero > .container { padding-top: 1.25rem !important; }
  /* ── Nav: visible header bar with logo + hamburger ── */
  #navbar, #navbar.scrolled {
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(15,25,35,.09) !important;
    border-bottom: 1.5px solid var(--border) !important;
    border-image: none !important;
    pointer-events: all !important;
    position: fixed !important;
  }
  .navbar-brand { display: flex !important; }
  .navbar-brand img { height: 32px !important; }
  .navbar-inner { height: 48px !important; padding: 0 1.5rem !important; }
  .nav-toggle {
    display: flex !important;
    position: static !important;
    padding: .38rem .45rem !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .nav-toggle span { width: 16px !important; height: 2px !important; margin: 2px 0 !important; }

  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: none;
    padding: 0 max(1.5rem, env(safe-area-inset-right, 1.5rem)) max(1rem, env(safe-area-inset-bottom, 1rem)) max(1.5rem, env(safe-area-inset-left, 1.5rem));
    gap: .15rem;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: all !important;
  }
  .nav-links.open { display: flex; }
  .nav-links * { pointer-events: all !important; }
  .nav-menu-brand { display: flex !important; align-items: center; justify-content: space-between; height: 48px; padding: env(safe-area-inset-top, 0) 0 0; border-bottom: 1px solid var(--border); margin-bottom: .4rem; flex-shrink: 0; }
  .nav-menu-brand img { height: 32px; max-height: 32px; width: auto; max-width: 140px; display: block; }
  #navClose {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1.5px solid var(--border);
    border-radius: 8px; cursor: pointer; color: var(--text-2);
    transition: background .15s, color .15s;
  }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) {
    display: block;
    width: 100%;
    padding: .45rem 0;
    border-radius: var(--r-sm);
    font-size: .875rem;
    color: var(--text) !important;
  }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links a:not(.btn):hover { background: none; color: var(--red) !important; }
  /* Duwt de inlogknop naar de onderkant van het mobiele menu. Was
     nth-last-child(2) toen er nog een Aanmelden-knop achter stond. */
  .nav-links li:last-child { margin-top: auto; }
  .nav-links .nav-cta {
    display: block;
    width: 100%;
    margin: .4rem 0 0 !important;
    text-align: center;
    padding: .45rem 1rem !important;
  }

  /* ── Hero: compact two-column (mirrors desktop) ── */
  .hero { min-height: auto; padding: .35rem 0 0; }
  .hero > .container { padding-top: .5rem; padding-bottom: 1.25rem; }
  .hero-layout { grid-template-columns: 1fr 210px; gap: .75rem; }
  .hero-aside { justify-content: flex-end; }
  .hero-stat-card { max-width: 210px; padding: 1rem 1rem; border-radius: 14px; animation: none; }
  .hsc-logo img { width: 40px; height: 40px; margin-bottom: .4rem; }
  .hsc-name { font-size: .95rem; }
  .hsc-tagline { font-size: .58rem; }
  .hsc-divider { margin: .65rem 0; }
  .hsc-grid { gap: .5rem; margin-bottom: .75rem; }
  .hsc-num { font-size: 1.3rem; }
  .hsc-label { font-size: .55rem; }
  .hsc-cta-btn { font-size: .75rem; padding: .5rem .75rem; }
  .hero h1 { font-size: 2.25rem; line-height: 1.08; margin-bottom: .6rem; }
  .hero-badge { display: none; }
  .hero-sub { font-size: max(.85rem, 13.5px); margin-bottom: .7rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-btns { gap: .5rem; margin-bottom: .5rem; flex-direction: row; }
  .hero-btns .btn { width: auto; }
  .hero-trust { display: none; }
  .btn-xl { padding: .5rem 1.2rem; font-size: .82rem; }
  .btn-lg { padding: .45rem 1rem; font-size: .8rem; }
  .btn-sm { padding: .32rem .7rem; font-size: .75rem; }
  .hero-btns .btn-primary { min-width: unset !important; padding: .55rem 1.6rem !important; font-size: .85rem !important; }
  .form-control { padding: .4rem .7rem; font-size: .78rem; }
  .form-label { font-size: .68rem; margin-bottom: .2rem; }
  .form-group { margin-bottom: .5rem; }

  /* ── Sections: tighter vertical padding ── */
  .section { padding: 2rem 0; }

  /* ── Geschiedenis: side-by-side in landscape ── */
  #over-ons .grid-2 { align-items: start !important; gap: 1.25rem !important; }
  /* Sectiekoppen in liggende stand: dit gold eerder alleen voor #over-ons,
     waardoor "Wat heb je nodig?", Diensten en Contact hun standaardmaat
     (clamp 4vw ≈ 34px) hielden en groter oogden dan De Geschiedenis. Nu
     krijgen alle secties dezelfde maat, zodat de pagina één ritme houdt. */
  .section-title   { font-size: 1.9rem; }
  .section-sub     { font-size: max(.88rem, 14px); }
  .section-eyebrow { font-size: .72rem; }

  #over-ons .section-title { font-size: 1.9rem !important; margin-bottom: .35rem; }
  #over-ons .section-sub { font-size: max(.88rem, 14px); margin-bottom: .75rem; }
  /* Lopende tekst hoort leesbaar te blijven, ook op een kort scherm: een
     ondergrens in px vangt af dat rem hier te ver zakt. */
  #over-ons p[style] { font-size: max(.88rem, 14px) !important; line-height: 1.65 !important; margin-bottom: .75rem !important; }
  #over-ons .section-eyebrow { font-size: .72rem; margin-bottom: .3rem; }
  #over-ons [style*="display:flex"] { gap: .5rem; margin-top: .25rem; }

  /* ── Feature cards: compact in landscape ── */
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .feature-card { padding: 1rem; border-radius: 12px; }
  .fc-bg { height: 120px; }
  .fc-bg::after { height: 36px; }
  .fc-has-img { padding-top: calc(120px + .25rem); }
  .fc-has-img .fc-top { margin-top: -1.75rem; }
  .fc-icon { width: 40px; height: 40px; }
  .fc-icon svg { width: 18px; height: 18px; }
  .fc-top { gap: .55rem; margin-bottom: .6rem; }
  .fc-cat { font-size: .62rem; padding: .18rem .55rem; }
  .feature-card h3 { font-size: .95rem; margin-bottom: .25rem; }
  .feature-card p  { font-size: .76rem; line-height: 1.5; }
  .fc-more { padding-top: .55rem; font-size: .74rem; }

  /* ── Geschiedenis: compact in landscape ── */
  .polaroid { max-width: 180px; transform: none; padding: .55rem .55rem .35rem; }
  .polaroid img { height: 400px !important; }
  .polaroid-caption { font-size: .75rem; padding: .35rem .2rem .15rem; }

  /* ── Instructor cards: compact in landscape ── */
  .instructor-card { padding: 1rem .85rem; }
  .instructor-pic-wrap { width: 70px; height: 70px; margin-bottom: .6rem; }
  .instructor-photo { width: 70px; height: 70px; }
  .instructor-avatar { width: 70px; height: 70px; font-size: 1.4rem; }
  .instructor-name { font-size: .95rem; margin-bottom: .2rem; }
  .instructor-role { font-size: .62rem; padding: .13rem .6rem; margin-bottom: .4rem; }
  .instructor-bio { font-size: .73rem; line-height: 1.5; }

  /* ── Location/contact cards: compact in landscape ── */
  .contact-card-map .contact-map-wrap { height: 120px; }
  .contact-map-body { padding: .7rem .85rem; }
  .contact-map-body h4 { font-size: .9rem; margin-bottom: .2rem; }
  .contact-map-body p { font-size: .74rem; line-height: 1.45; }
  .contact-card { padding: 1rem; }
  .contact-icon { font-size: 1.4rem; margin-bottom: .4rem; }
  .contact-card h4 { font-size: .9rem; margin-bottom: .3rem; }
  .contact-card p { font-size: .74rem; }

  /* ── Grids: keep 2 columns in landscape ── */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .stats-bar-inner { grid-template-columns: repeat(3, 1fr); }
  .stat-item { padding: .75rem 1rem; }
  .stat-item-num { font-size: 1.6rem; }
  .stat-item-label { font-size: .65rem; margin-top: .15rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── All modals fullscreen in landscape ── */
  #modal-login,
  #modal-whatsapp,
  #modal-service { padding: 0 !important; align-items: stretch !important; }

  #modal-login .modal-card,
  #modal-whatsapp .reg-card,
  #modal-service .svc-card {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    transform: none !important;
    display: block !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: max(.75rem, env(safe-area-inset-top, .75rem)) 1.5rem max(.75rem, env(safe-area-inset-bottom, .75rem)) !important;
  }

  #modal-whatsapp .reg-card-hd,
  #modal-service .svc-card-hd { position: static; border-bottom: none; padding: 0; margin-bottom: .6rem; flex: none; }
  #modal-whatsapp .reg-card-bd,
  #modal-service .svc-card-bd { overflow: visible !important; padding: 0; flex: none; height: auto !important; min-height: 0; display: block !important; }
  #modal-whatsapp .reg-card-ft,
  #modal-service .svc-card-ft { border-top: 1px solid var(--border); padding: .65rem 0 0; flex: none; }
  #modal-login .modal-card { display: block !important; padding-top: max(1.25rem, env(safe-area-inset-top, 1.25rem)) !important; }
}

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15,25,35,.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.modal-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 470px;
  max-height: calc(92 * var(--vh, 1vh)); max-height: calc(92 * var(--vh, 1svh));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2rem 2rem 1.75rem;
  position: relative;
  transform: translateY(18px) scale(.97);
  transition: transform .22s ease;
}
.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

/* ── Wisselen tussen inloggen en aanmelden ────────────────────
   Beide schermen hebben een eigen donkere achtergrond. Wisselde je ertussen,
   dan verdween de ene laag terwijl de andere verscheen: heel even lagen er
   twee overheen en werd het beeld dubbel zo donker, gevolgd door een sprong
   terug. Op een telefoon, waar zo'n scherm de hele viewport vult, viel dat op
   als een flits.

   Tijdens een wissel gaat de achtergrond daarom niet mee: de oude laag
   verdwijnt meteen en de nieuwe staat meteen op volle sterkte. Alleen de
   inhoud vervaagt zacht, dus je ziet enkel het formulier veranderen.
   Een transform gebruiken kan hier niet: in de schermvullende weergave staat
   op de kaart transform:none !important, en dat wint het van een animatie. */
.modal-overlay.is-leaving {
  transition: none;
  opacity: 0;
  visibility: hidden;
}
.modal-overlay.is-entering {
  transition: none;
  opacity: 1;
  visibility: visible;
}
.modal-overlay.is-entering .modal-card,
.modal-overlay.is-entering .reg-card {
  animation: cardSwap .18s ease both;
}
@keyframes cardSwap { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-entering .modal-card,
  .modal-overlay.is-entering .reg-card { animation: none; }
}
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: none;
  border-radius: 8px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--muted);
  transition: background .12s, color .12s;
  line-height: 1;
}
.modal-close:hover { background: rgba(220,38,38,.08); color: #dc2626; }
.modal-logo { text-align: center; margin-bottom: 1.25rem; }
.modal-logo img { height: 40px; width: auto; margin: 0 auto .45rem; }
.modal-logo h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.modal-logo p { font-size: .8rem; color: var(--muted); }
.modal-card .form-group { margin-bottom: .85rem; }
.modal-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }
.modal-footer-text { text-align: center; font-size: .83rem; color: var(--muted); margin-top: .25rem; }
.modal-footer-text a { color: var(--blue); font-weight: 600; }

/* ── Register modal: sticky header + scrollable body + sticky footer ── */
.reg-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.reg-card-hd {
  flex-shrink: 0;
  padding: 1.5rem 2rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.reg-card-hd .modal-logo { margin-bottom: 0; }
.reg-card-hd .modal-close { top: 1rem; right: 1rem; }
.reg-card-bd {
  flex: 1 1 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 2rem;
  min-height: 0;
}
.reg-card-bd .form-group { margin-bottom: .85rem; }
.reg-card-ft {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 1rem 2rem 1.25rem;
}
.reg-card-ft .modal-divider { margin: .75rem 0 0; }

/* ── Short laptop viewports (e.g. 1080p at 150% zoom → ~720px high):
   compact login/register cards so they fit without clipping ── */
@media (min-width: 601px) and (max-height: 800px) {
  .modal-card {
    max-width: 420px;
    max-height: calc(94 * var(--vh, 1vh)); max-height: calc(94 * var(--vh, 1svh));
    padding: 1.25rem 1.5rem 1.1rem;
  }
  .modal-logo { margin-bottom: .75rem; }
  .modal-logo img { height: 30px; margin-bottom: .25rem; }
  .modal-logo h3 { font-size: 1rem; margin-bottom: .1rem; }
  .modal-logo p { font-size: .74rem; }
  .modal-card .form-group { margin-bottom: .6rem; }
  .modal-card .form-label { font-size: .72rem; margin-bottom: .25rem; }
  .modal-card .form-control { padding: .45rem .8rem; font-size: .85rem; }
  .modal-card .btn { padding: .5rem 1.2rem; font-size: .85rem; }
  .modal-divider { margin: .8rem 0; }
  .modal-footer-text { font-size: .78rem; }
  /* Register card: tighter sticky header/body/footer */
  .reg-card { padding: 0; }
  .reg-card-hd { padding: .9rem 1.5rem .7rem; }
  .reg-card-bd { padding: .85rem 1.5rem; }
  .reg-card-ft { padding: .65rem 1.5rem .8rem; }
  .fck-letter { font-size: .78rem; }
  .fck-sub { font-size: .54rem; }
}

@media (max-width: 600px) {
  /* Fullscreen modals on mobile (welcome modal stays as floating card) */
  #modal-login,
  #modal-whatsapp,
  #modal-service {
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* Fullscreen cards: position fixed inset:0 fills every pixel on every device */
  #modal-login .modal-card,
  .reg-card,
  .svc-card {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    transform: none !important;
    display: block !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Register: no sticky header/footer — everything scrolls together */
  .reg-card-hd {
    position: static;
    border-bottom: none;
    padding: max(1.25rem, env(safe-area-inset-top, 1.25rem)) 1.25rem .75rem;
    flex: none;
  }
  .reg-card-bd { overflow: visible; padding: 0 1.25rem; flex: none; min-height: 0; }
  .reg-card-ft {
    border-top: 1px solid var(--border);
    padding: .85rem 1.25rem max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
    flex: none;
  }
  .reg-card .modal-logo h3 { font-size: 1.15rem; }

  #modal-login .modal-card {
    padding-top: max(1.5rem, env(safe-area-inset-top, 1.5rem)) !important;
    padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 1.75rem)) !important;
  }
}
/* ── Service modal: sticky header + scrollable body + sticky footer ── */
.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  max-width: 520px;
  border-top: 4px solid var(--svc-color, var(--red));
}
.svc-card-hd {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.svc-card-hd .modal-close { top: .9rem; right: .9rem; }
.svc-card-bd {
  flex: 1 1 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .25rem 1.5rem;
  min-height: 0;
}
.svc-card-ft {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: .9rem 1.5rem 1.25rem;
  text-align: center;
}
.svc-interest { font-size: .82rem; color: var(--muted); margin: 0; }

@media (max-width: 600px) {
  .svc-card-hd { padding-top: max(1.25rem, env(safe-area-inset-top, 1.25rem)); }
  .svc-card-ft { padding-bottom: max(.9rem, env(safe-area-inset-bottom, .9rem)); }
}
/* ── Scroll indicators: shadow fade shows more content below/above ── */
/* Uses background-attachment:local/scroll trick — pure CSS, works on mobile */
.reg-card-bd,
.svc-card-bd,
.modal-card,
#modal-whatsapp .reg-card,
#modal-service .svc-card {
  background:
    linear-gradient(var(--surface) 20%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--surface) 80%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(0,0,0,.08), transparent) top    / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.08), transparent) bottom / 100% 10px no-repeat scroll;
  background-color: var(--surface);
}

/* Desktop: also show a thin scrollbar on scrollable modal bodies */
.reg-card-bd,
.svc-card-bd {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.reg-card-bd::-webkit-scrollbar,
.svc-card-bd::-webkit-scrollbar { width: 4px; }
.reg-card-bd::-webkit-scrollbar-thumb,
.svc-card-bd::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.reg-card-bd::-webkit-scrollbar-track,
.svc-card-bd::-webkit-scrollbar-track { background: transparent; }

/* ── Desktop: block-scroll layout for reg-card & svc-card ──────
   flex-basis:0 + min-height:0 collapses the body on auto-height
   parents; on desktop just use display:block like the login modal.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .reg-card {
    display: block !important;
    overflow: hidden !important;
    max-height: calc(92 * var(--vh, 1vh)) !important; max-height: calc(92 * var(--vh, 1svh)) !important;
    padding: 0 !important;
    clip-path: inset(0 round var(--r-xl));
  }
  .reg-card-inner {
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
    max-height: calc(92 * var(--vh, 1vh)); max-height: calc(92 * var(--vh, 1svh));
    padding: 1.5rem 2rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .reg-card-inner::-webkit-scrollbar { width: 5px; }
  .reg-card-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
  .reg-card-inner::-webkit-scrollbar-track { background: transparent; }

  .svc-card {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .svc-card::-webkit-scrollbar { display: none; }
  .reg-card-hd { position: static; border-bottom: none; padding: 0; margin-bottom: .85rem; }
  .reg-card-hd .modal-logo { margin-bottom: .75rem; }
  .reg-card-hd .modal-logo img { height: 36px; }
  .reg-card .modal-close { position: absolute; top: 1rem; right: 1rem; }
  .reg-card-bd { overflow: visible; padding: 0; flex: none; min-height: 0; }
  .reg-card-bd .form-group { margin-bottom: .75rem; }
  .reg-card-ft { border-top: 1px solid var(--border); padding: .85rem 0 0; }

  .svc-card {
    display: block !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    overflow-x: hidden !important;
    max-height: calc(92 * var(--vh, 1vh)) !important; max-height: calc(92 * var(--vh, 1svh)) !important;
    padding: 1.5rem;
  }
  .svc-card-hd { position: static; border-bottom: none; padding: 0; margin-bottom: 1.25rem; }
  .svc-card .modal-close { position: absolute; top: 1rem; right: 1rem; }
  .svc-card-bd { overflow: visible; padding: 0; flex: none; min-height: 0; }
  .svc-card-ft { border-top: 1px solid var(--border); padding: 1rem 0 0; }
}

/* ── Aanmelden via WhatsApp (kaart in #modal-whatsapp) ────────
   De kaart erft de responsive opbouw van .reg-card; hieronder alleen
   de WhatsApp-specifieke onderdelen. */
/* De blokken onder 'Lesvorm' verschijnen pas na die keuze — even laten
   inglijden zodat ze niet uit het niets in de kaart springen. */
.wa-conditional { animation: waReveal .22s ease both; }
@keyframes waReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-conditional { animation: none; }
}

.wa-send-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: #25D366;
  color: #fff;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
  transition: background .2s, box-shadow .2s, transform .15s, opacity .2s;
}
.wa-send-btn:hover:not(.is-disabled) {
  background: #1ebe5d;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .55);
  transform: translateY(-1px);
}
.wa-send-btn.is-disabled {
  background: #cbd5e1;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}
.wa-card-hint {
  text-align: center;
  font-size: .76rem;
  color: var(--muted);
  margin: .55rem 0 0;
}

/* ── Documentenchecklist (#inschrijving) ──────────────────────── */
/* .section-sub heeft een max-width zonder auto-marges; in deze gecentreerde
   kop zou de tekstblok daardoor links blijven plakken. */
#inschrijving .section-sub { margin-left: auto; margin-right: auto; }

.doc-wrap {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 4px 24px rgba(15, 25, 35, .06);
  overflow: hidden;
}
.doc-list {
  list-style: none;
  margin: 0;
  padding: .5rem .35rem;
}
.doc-item {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem 1.15rem;
  border-radius: 10px;
}
.doc-item + .doc-item { border-top: 1px solid var(--border); }
.doc-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--blue-xl); color: var(--blue-d);
  font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.doc-body { flex: 1; min-width: 0; }
.doc-title {
  display: block;
  font-size: .93rem; font-weight: 700; color: var(--text);
  line-height: 1.4;
}
.doc-note {
  display: block;
  font-size: .8rem; color: var(--muted);
  margin-top: .1rem;
}
.doc-note-alert { color: var(--red); font-weight: 600; }

.doc-leges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.doc-leges-pill {
  font-size: .74rem; color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .16rem .55rem;
}
.doc-leges-pill b { color: var(--blue-d); font-weight: 800; margin-right: .15rem; }

.doc-item-fee { background: var(--blue-xl); }
.doc-item-fee .doc-num { background: var(--blue); color: #fff; }
.doc-amount {
  flex-shrink: 0;
  align-self: center;
  font-size: 1.02rem; font-weight: 800;
  color: var(--blue-d);
  white-space: nowrap;
}

.doc-cta {
  border-top: 1.5px solid var(--border);
  background: var(--bg);
  padding: 1.15rem 1.35rem;
  text-align: center;
}
.doc-cta p {
  font-size: .87rem; color: var(--text-2);
  margin: 0 0 .8rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .doc-item { padding: .75rem .85rem; gap: .7rem; }
  .doc-title { font-size: .87rem; }
  .doc-note { font-size: .76rem; }
  .doc-item-fee { flex-wrap: wrap; }
  .doc-amount { font-size: .95rem; width: 100%; text-align: right; margin-top: .2rem; }
}

/* ── Prevent browser auto-zoom on input focus ───────────────
   font-size: 16px stops Safari's focus-zoom (threshold is 16px).
   touch-action: manipulation stops Brave/Chrome double-tap zoom.
   The 16px bump only applies on touch devices — desktop keeps
   the styled (compact) input sizes. ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
textarea,
select {
  touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── Aanmeldknoppen aantikbaar houden ─────────────────────────
   Alle maten staan in rem en de basisgrootte zakt op een kort scherm naar
   het minimum. In liggende stand op een telefoon werden deze knoppen
   daardoor 29px hoog met 10,8px tekst — te klein om te raken. Onderaan het
   bestand, zodat deze regel het wint van .btn-lg / .btn-xl die hun eigen
   font-size zetten. 44px is de gangbare ondergrens voor een tikdoel. */
@media (max-width: 1024px), (orientation: landscape) and (max-height: 560px) {
  /* .btn.btn-whatsapp en niet alleen .btn-whatsapp: binnen een venster geldt
     .modal-card .btn (en .svc-card .btn), en die zijn specifieker. Met twee
     klassen zijn ze gelijk en wint deze regel omdat hij later staat — dat
     scheelt een !important. */
  .btn.btn-whatsapp,
  .modal-card .btn.btn-whatsapp,
  .svc-card .btn.btn-whatsapp {
    min-height: 44px;
    font-size: max(.95rem, 13.5px);
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}


/* ── Inschrijvingschecklist in liggende stand ─────────────────
   Deze sectie had als enige geen regels voor liggend en hield dus zijn
   volledige bureaubladmaten, terwijl de hero, #over-ons, de knoppen en de
   sectiekoppen daar wél kleiner staan — "Wat heb je nodig?" oogde daardoor
   groter dan de rest.

   Dit blok staat bewust onderaan het bestand: de standaardmaten van .doc-*
   worden verderop in de stylesheet gedefinieerd dan het algemene
   landscape-blok, en met gelijke specificiteit wint de laatste regel. */
@media (orientation: landscape) and (max-height: 599px) {
  .doc-list  { padding: .3rem .25rem; }
  .doc-item  { padding: .55rem .9rem; gap: .65rem; }
  .doc-num   { width: 22px; height: 22px; font-size: .72rem; }
  .doc-title { font-size: max(.86rem, 13.5px); line-height: 1.35; }
  .doc-note  { font-size: max(.76rem, 12px); }
  .doc-leges { gap: .3rem; margin-top: .35rem; }
  .doc-leges-pill { font-size: .7rem; padding: .12rem .45rem; }
  .doc-amount { font-size: .95rem; }
  .doc-cta   { padding: .8rem 1rem; }
  .doc-cta p { font-size: max(.8rem, 12.5px); margin-bottom: .6rem; }
}