/* ---------------------------------------------------------------------
   Ciung Wanara Nederland — basisstyling
   Kleuren/typografie op basis van het clubembleem (amber/oranje/karmijn).
   De achtergrond is altijd donker, de accentkleur is vast oranje.
--------------------------------------------------------------------- */

:root {
  --color-bg: #0d0d0d;
  --color-bg-alt: #161616;
  --color-text: #f5f2ea;
  --color-text-muted: #b8aea6;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.08);
  --header-scrolled-bg: rgba(13, 13, 13, 0.94);
  --header-shadow-1: rgba(255, 255, 255, 0.07);
  --header-shadow-2: rgba(0, 0, 0, 0.6);
  color-scheme: dark;

  --color-accent: #ff8726;
  --color-accent-dark: #e0701e;
  --accent-tint-rgb: 255, 135, 38; /* voor lichte tints: rgba(var(--accent-tint-rgb), x) */
  --color-accent-ink: #ff8726;     /* accent als tekst-/iconkleur — op de altijd-donkere achtergrond gelijk aan --color-accent */

  /* Constant, los van de accentkeuze */
  --ink: #14120c;         /* tekst/knoppen op de accent-gekleurde banner */
  --btn-hover-bg: #a02818; /* knop-hover: rood i.p.v. een donkerdere accenttint */

  --font-marker: "Permanent Marker", "Poppins", cursive;
  --font-decorative: "Cinzel Decorative", "Poppins", serif;
  --font-heading: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --container: 1200px;   /* gangbare contentbreedte */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  /* zijruimte zodat full-bleed elementen (header, hero) op dezelfde lijn staan als de content */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Zodat een interne link (#over, #training, ...) niet achter de vaste
   navigatiebalk in de opgevouwen stand verdwijnt — exact de werkelijke
   hoogte van .site-header.is-scrolled, geen extra marge: anders blijft er
   een randje van de vorige sectie zichtbaar onder de balk. */
section[id] { scroll-margin-top: 75px; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

/* .hero h1 heeft zijn eigen, grotere decoratieve stijl; dit is voor een H1
   als titel van een losse pagina (bv. privacy.html), zonder hero eronder. */
h1 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; }
h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-accent-ink); }

p { margin: 0 0 1em; color: var(--color-text-muted); }

a { color: var(--color-accent-ink); }

/* --- Header ---
   Zweeft standaard transparant over de hero, zonder eigen achtergrondkleur.
   Pas na een stukje scrollen (.is-scrolled) krijgt hij een eigen vlak, kleiner
   logo en een lagere balk — dat gedrag blijft ongewijzigd. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--edge);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
  padding-block: 0.6rem;
  background: var(--header-scrolled-bg);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--header-shadow-1), 0 8px 24px -12px var(--header-shadow-2);
}

.logo { line-height: 0; display: block; }
/* Gewone afbeelding i.p.v. CSS-mask: masks die naar een los SVG-bestand
   verwijzen worden door Chrome geblokkeerd zodra de pagina als bestand
   (file://) geopend wordt i.p.v. via een webserver — de accentkleur-
   schakelaar wisselt daarom, net als bij de kaartjes, tussen twee kant-en-
   klare kleurvarianten van dit bestand. */
.logo-mark {
  display: block;
  height: 84px;
  width: auto;
  transition: height 0.3s ease;
}
.site-header.is-scrolled .logo-mark { height: 56px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .logo-mark { transition: none; }
}

.site-nav { display: flex; gap: 1.5rem; align-items: center; }
.site-nav a:not(.btn) { text-decoration: none; color: var(--color-text); font-weight: 600; font-size: 0.95rem; }

/* --- Buttons: platte pil in het accent-oranje, donkere tekst --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.btn:hover { background: var(--btn-hover-bg); color: #fff; }
.btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; transition: transform 0.25s ease; }
.btn:hover svg { transform: translateX(5px); }
.btn.btn-sm { padding: 0.6rem 1.15rem; gap: 0.45rem; font-size: 0.92rem; }
.btn.btn-sm svg { width: 1.1em; height: 1.1em; }

/* Op de oranje CTA-banner: omgekeerd (donker op oranje), anders geen contrast */
.section-cta .btn { background: var(--ink); color: var(--color-accent); }
.section-cta .btn:hover { background: var(--btn-hover-bg); color: #fff; }

/* Omlijnde variant, voor bv. de Instagram-link in de footer. Het icoon staat
   vooraan en is geen pijl, dus geen schuifanimatie op hover — alleen de
   kleuren wisselen, hetzelfde rood als de andere knoppen. */
.btn.btn-outline {
  background: transparent;
  color: var(--color-accent-ink);
  border: 1.5px solid var(--color-accent-ink);
}
.btn.btn-outline:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: #fff;
}
.btn.btn-outline:hover svg { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: calc(85vh + 120px); /* net iets meer dan de fold op desktop */
  display: flex;
  align-items: center;
  padding: 0 var(--edge);
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  z-index: 1;
  right: var(--edge);
  bottom: 0;
  height: min(80%, 700px); /* iets lager dan de hero zelf, voor speling t.o.v. de navigatiebalk */
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 0 60px rgba(var(--accent-tint-rgb), 0.14));
}
.hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(var(--accent-tint-rgb), 0.14), transparent 60%),
    linear-gradient(180deg, #000 0%, #111 100%);
  z-index: 0;
}
.hero-content { position: relative; z-index: 2; max-width: 600px; }
/* Gedeeld met .page-banner h1 (privacy.html e.d.) — zelfde opvallende
   koptitel-stijl overal waar die donkere gloed-banner terugkomt. */
.hero h1, .page-banner h1 {
  font-family: var(--font-decorative);
  font-size: clamp(2.3rem, 5.5vw, 4.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}
.hero-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--color-text);
  opacity: 0.85;
  max-width: 34em;
  margin-bottom: 1.75rem;
}

/* --- Sections --- */
.section { padding: 5rem 0; }
.section-alt { background: var(--color-bg-alt); }
.section-inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section-inner.narrow { width: min(100% - 2 * var(--gutter), 720px); }

/* Twee kolommen: tekst + video / lettering */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split-reverse .split-text { order: 2; }
.split-text .btn { margin-top: 0.75rem; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-consent[hidden] { display: none; }
.video-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.9rem;
  padding: 1.5rem;
  color: var(--color-text-muted);
}
.video-consent svg { width: 34px; height: 34px; opacity: 0.6; }
.video-consent p { margin: 0; max-width: 32ch; font-size: 0.92rem; }
.emblem { width: 100%; max-width: 300px; height: auto; justify-self: center; filter: drop-shadow(0 12px 40px rgba(var(--accent-tint-rgb), 0.2)); }
.section-intro { font-size: 1.1rem; margin-bottom: 2.5rem; }

.card-grid, .location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
}
/* Trainingsaspecten: standaard 2x2, op smalle schermen onder elkaar */
.card-grid { grid-template-columns: repeat(2, 1fr); }

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  color: var(--color-accent-ink);
  background: rgba(var(--accent-tint-rgb), 0.1);
  border: 1px solid rgba(var(--accent-tint-rgb), 0.25);
}
.card-icon svg { width: 32px; height: 32px; }

.card, .location-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 1.75rem;
}


/* --- Clubs: 3 rijen (1:1:1), illustratie links, info midden, trainer rechts --- */
.location-grid { grid-template-columns: 1fr; gap: 1.5rem; }

.location-card {
  display: grid;
  grid-template-columns: 300px 1fr 220px;
  padding: 0;
  overflow: hidden;
}
.place-visual {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  background: #12110e;
  border-right: 1px solid var(--surface-border);
}
.place-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.map-credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.65rem;
  color: rgba(245, 242, 234, 0.6);
  background: rgba(13, 13, 13, 0.65);
  text-decoration: none;
}
.map-credit:hover { color: var(--color-accent); }
.location-info {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.location-tag {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-ink);
  background: rgba(var(--accent-tint-rgb), 0.1);
  border: 1px solid rgba(var(--accent-tint-rgb), 0.25);
}
.location-info h3 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.meta-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.meta-icon { flex: none; width: 22px; height: 22px; color: var(--color-accent-ink); display: inline-flex; }
.meta-icon svg { width: 100%; height: 100%; }
.meta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin: 0 0 0.15rem;
}
.meta-value { display: block; color: var(--color-text-muted); }

.trainer {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  background: var(--surface);
  border-left: 1px solid var(--surface-border);
}
.trainer-photo {
  width: 120px;
  height: auto; /* overschrijft het height-attribuut, zodat aspect-ratio geldt */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  background: var(--color-bg-alt);
}
.trainer-text { display: flex; flex-direction: column; align-items: center; }
.trainer-name { margin: 0 0 0.35rem; font-weight: 600; color: var(--color-text); }
.trainer-phone { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; text-decoration: none; }
.trainer-phone .meta-icon { width: 16px; height: 16px; }
.trainer-phone:hover { text-decoration: underline; }

/* --- Proefles: filmische sfeer zoals de hero (zelfde donkere gradient +
   radial glow, nu links i.p.v. rechts) — alleen het formulier zelf krijgt
   een eigen oranje kaart, niet meer de hele balk. --- */
.split-top { align-items: start; }
.section-cta .split {
  grid-template-areas: "copy form" "quote form";
  grid-template-rows: auto 1fr;
  row-gap: 2.25rem;
}
.cta-copy { grid-area: copy; }
.cta-form-card { grid-area: form; }
.testimonial { grid-area: quote; }

.section-cta {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--accent-tint-rgb), 0.14), transparent 60%),
    linear-gradient(180deg, #000 0%, #111 100%);
  color: var(--color-text);
}
/* Grotere kop in het marker-lettertype, net als de hero — dit blok mag
   net zo'n "reclame"-uitstraling hebben. Blijft een <h2> (er is al een
   <h1> in de hero) maar oogt als een tweede, gelijkwaardige blikvanger. */
.section-cta h2 {
  font-family: var(--font-decorative);
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: var(--color-text);
}
.section-cta .section-intro { color: var(--color-text-muted); font-size: 1.15rem; margin-bottom: 0; max-width: 28em; }
.section-cta .section-intro strong { color: var(--color-text); }

.cta-form-card {
  background: var(--color-accent);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

/* --- Testimonial (fictief voorbeeld) — dezelfde sobere kaartstijl als de
   rest van de site (.card), geen eigen glow meer. --- */
.testimonial {
  margin: 0;
  padding: 1.75rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--color-text);
}
.testimonial-mark { display: block; width: 34px; height: auto; color: var(--color-accent-ink); margin-bottom: 0.9rem; }
.testimonial blockquote { margin: 0 0 1.4rem; }
.testimonial blockquote p { margin: 0; color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.6; }
.testimonial figcaption { display: flex; align-items: center; gap: 0.85rem; }
.avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(var(--accent-tint-rgb), 0.4);
}
.who { display: flex; flex-direction: column; line-height: 1.3; }
.who strong { font-weight: 600; color: var(--color-text); }
.who small { color: var(--color-text-muted); font-size: 0.85rem; }

form { display: flex; flex-direction: column; }
.form-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: flex; flex-direction: column; gap: 0.4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.form-row label, .form-row legend { font-weight: 700; font-size: 0.9rem; padding: 0; margin-bottom: 0.4rem; }
/* De invoervelden staan altijd op een licht vlak (op de oranje banner), dus
   forceer hier het lichte uiterlijk van native formulierelementen — anders
   zou een donker paginathema ook de kalendericoon van het datumveld donker
   (en daarmee onzichtbaar) maken. */
.section-cta form { color-scheme: light; }
.form-row input[type="text"], .form-row input[type="date"], .form-row input[type="email"], .form-row input[type="tel"] {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 0;
  background: #fffdf5;
  color: #14120c;
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-row input:focus-visible { outline: 3px solid #14120c; outline-offset: 2px; }

/* Locatie: 3 knoppen waarvan je er één kiest (radio's, visueel als toggle) */
.choice-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.choice-group input { position: absolute; opacity: 0; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.choice-group label {
  margin: 0;
  text-align: center;
  padding: 0.8rem 0.5rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--color-accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.choice-group label:hover { background: rgba(20, 18, 12, 0.08); }
.choice-group input:checked + label {
  color: #fff;
  border-color: transparent;
  background: var(--ink);
}
.choice-group input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }

form button { align-self: flex-start; border: none; cursor: pointer; font-size: 1rem; }
.form-consent .btn { align-self: center; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Verplichte reCAPTCHA-disclaimer (i.p.v. het zwevende badge-icoon, dat we
   via .grecaptcha-badge verbergen — Google staat dit toe zolang deze tekst
   zichtbaar blijft, zie policies.google.com/privacy). */
.recaptcha-notice {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(20, 18, 12, 0.65);
}
.recaptcha-notice a { color: inherit; text-decoration: underline; }

.form-status { min-height: 1.5em; font-weight: 700; margin: 0; }
.form-status[data-state="error"] { color: #8a1c1c; }

/* Tijdens verzenden: velden verdwijnen, een centrale loader komt ervoor
   terug; bij succes maakt die weer plaats voor een gecentreerde bedankt-
   melding. Beide vervangen .form-fields volledig i.p.v. ernaast te staan. */
.form-fields[hidden], .form-loader[hidden], .form-success[hidden], .form-consent[hidden] { display: none; }
.form-loader, .form-success, .form-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  color: var(--ink);
}
.form-loader p, .form-success p, .form-consent p { margin: 0; color: inherit; font-weight: 600; max-width: 32ch; }
.form-consent svg { width: 34px; height: 34px; opacity: 0.7; }

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(20, 18, 12, 0.2);
  border-top-color: var(--ink);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
}

.form-success svg {
  width: 40px;
  height: 40px;
  color: var(--ink);
}

/* --- Footer --- */
.site-footer {
  padding: 3.5rem var(--gutter) 0;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

/* Bovenste rij: eigen merk links, affiliaties rechts */
.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: var(--container);
  margin-inline: auto;
  padding-bottom: 2.75rem;
}

.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-logo { display: block; flex: none; }
.footer-brand-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-text);
}

.footer-affiliations { text-align: right; }
.footer-affiliations-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}
.footer-affiliations-logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 2rem);
}
.footer-affiliations-logos img { display: block; height: 40px; width: auto; }

/* Onderste balk: los van de rest, met eigen scheidingslijn — copyright hoort
   hier logisch thuis, als laatste regel van de pagina. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container);
  margin-inline: auto;
  padding-block: 1.75rem;
  border-top: 1px solid var(--surface-border);
}
.footer-copyright { margin: 0; font-size: 0.9rem; }
.footer-legal { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-privacy-link { text-decoration: none; color: var(--color-text); font-size: 0.95rem; }
.footer-bottom .btn { margin: 0; }

@media (max-width: 640px) {
  .footer-main { flex-direction: column; gap: 2rem; }
  .footer-affiliations { text-align: left; }
  .footer-affiliations-logos { justify-content: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-reverse .split-text { order: 0; }
  .section-cta .split { grid-template-areas: "copy" "form" "quote"; grid-template-rows: none; row-gap: 2rem; }
  .emblem { max-width: 220px; }
  .card-grid { grid-template-columns: 1fr; }

  /* Clubs: illustratie boven, dan info, dan trainer in een rij */
  .location-card { grid-template-columns: 1fr; }
  .place-visual { height: 190px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--surface-border); }
  .location-info { padding: 1.5rem; }
  .trainer { flex-direction: row; text-align: left; justify-content: flex-start; border-left: 0; border-top: 1px solid var(--surface-border); padding: 1.25rem 1.5rem; }
  .trainer-photo { width: 76px; flex: none; }
  .trainer-text { align-items: flex-start; }

  /* Hero: foto onder de tekst i.p.v. ernaast */
  .hero { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-top: 150px; min-height: 0; }
  .hero-photo { position: relative; right: auto; max-width: 100%; height: auto; width: min(100%, 520px); align-self: center; margin-top: 1.5rem; }
}

@media (max-width: 640px) {
  .site-nav { gap: 0.85rem; }
  .site-nav a:not(.btn) { display: none; }
  .logo-mark { height: 60px; }
  .site-header.is-scrolled .logo-mark { height: 40px; }
}

@media (max-width: 360px) {
  .choice-group { grid-template-columns: 1fr; }
}

/* Zwevend reCAPTCHA-badge verbergen — mag van Google zolang .recaptcha-notice
   bij het formulier zichtbaar blijft (zie hierboven). */
.grecaptcha-badge { visibility: hidden; }

/* --- Cookiemelding: één simpele keuze, geen categorieën (zie privacy.html) --- */
.cookie-banner[hidden] { display: none; }
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 480px;
  margin-inline: auto;
  background: var(--color-bg-alt);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  z-index: 50;
}
.cookie-banner p { margin: 0 0 1rem; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; }
.cookie-banner strong { color: var(--color-text); }
.cookie-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-actions button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  border: 1.5px solid var(--color-accent-ink);
}
.btn-decline { background: transparent; color: var(--color-accent-ink); }
.btn-decline:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: #fff; }
.btn-accept { background: var(--color-accent); color: var(--ink); }
.btn-accept:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: #fff; }

@media (max-width: 480px) {
  .cookie-banner { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 1.1rem; }
}

/* --- Paginabanner: dezelfde donkere gradient + gloed als achter de hero-
   afbeelding, nu als herbruikbare "titelbalk" voor losse pagina's zoals
   privacy.html. De header zweeft er (identiek aan de homepage) transparant
   overheen tot er gescrold wordt, dus de banner krijgt zelf de ruimte om
   de vaste header niet te laten overlappen met de titel. --- */
.page-banner {
  position: relative;
  overflow: hidden;
  /* ~100px hoger dan een "kale" titelbalk nodig zou hebben, zodat de vaste
     navigatiebalk nooit over de afbeelding heen valt en het geheel meer
     lucht krijgt. */
  padding: clamp(10rem, 18vw, 11.5rem) 0 clamp(4rem, 8vw, 5rem);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(var(--accent-tint-rgb), 0.14), transparent 60%),
    linear-gradient(180deg, #000 0%, #111 100%);
}
.page-banner .updated { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }
.page-banner-art {
  position: absolute;
  z-index: 1;
  right: var(--edge);
  bottom: 0;
  height: clamp(190px, 28vw, 300px);
  width: auto;
  max-width: 50%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 0 50px rgba(var(--accent-tint-rgb), 0.14));
}
@media (max-width: 860px) {
  .page-banner-art { display: none; }
}

/* --- Platte inhoudspagina's (privacy.html e.d.): leesbare regellengte en
   een duidelijke verticale ritmiek — koppen krijgen ruimte vóór zich, niet
   enkel erna, zodat ze niet tegen het voorgaande element aan plakken. --- */
.policy p { max-width: 70ch; margin-bottom: 1.25em; }
.policy ul { max-width: 70ch; padding-left: 1.2rem; color: var(--color-text-muted); margin-bottom: 1.25em; }
.policy li { margin-bottom: 0.4rem; }
.policy h2 { margin-top: 3.5rem; }
.policy h3 { margin-top: 2rem; }
.policy .btn { margin-bottom: 0.5rem; }

.policy-cards { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0 2rem; }
.policy-cards h3 { margin-top: 0; }
.policy-cards p:last-child { margin-bottom: 0; }

.policy-table-wrap { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--surface-border); border-radius: 12px; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 440px; }
.policy-table th, .policy-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--surface-border); vertical-align: top; }
.policy-table th { color: var(--color-text); font-weight: 700; background: rgba(255, 255, 255, 0.03); }
.policy-table td { color: var(--color-text-muted); }
.policy-table tr:last-child td { border-bottom: 0; }
.policy-table code { font-size: 0.85em; color: var(--color-text); }