/* ============================================================
   Dive & Thrive: gedeelde basisstijlen in één bestand: tokens, FAQ, motion.
   Laadvolgorde per pagina: /assets/site.css, dan de eigen <style> van de
   pagina, dan /assets/site-quality.css (correctielaag, moet als laatste).
   De pagina's met dt-page.css (dienstpagina's, sportvakanties, 404) hebben
   geen eigen <style> ertussen en laden alleen /assets/page.css: server.js
   plakt site.css, site-quality.css en dt-page.css in die volgorde aan elkaar.
   ============================================================ */


/* ==================== Tokens, basis en typografie (was /dive-thrive.css) ==================== */

/* =====================================================================
   DIVE & THRIVE — DESIGN SYSTEM FOUNDATIONS
   ---------------------------------------------------------------------
   Brand: premium technical swim coaching.
   Built on the Workoutclub design language (Montserrat, generous 8pt
   spacing, premium structure, thin line-icons in chips, split heroes)
   — upgraded to the Dive & Thrive identity: deep navy + gold + cream,
   with the logo's blues as data / accent tints.

   Surfaces work in BOTH light and dark. Brand colours are theme-agnostic;
   semantic surface tokens flip per theme. Put .theme-dark or .theme-light
   on any container (they nest) to switch a subtree. <body> defaults light.
   Voice: Dutch with English headline hooks. Sentence-case headlines with
   periods for rhythm; a single word lifted in gold. Eyebrows UPPERCASE,
   widely tracked, separated by • dots.
   ===================================================================== */

/* ---- MONTSERRAT — one compact variable file per style ---- */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
/* Zonder maatgelijke fallback springt de hele pagina zodra Montserrat
   binnenkomt (gemeten CLS 0,22 op telefoon). Dit is een schaalcorrectie op
   een systeemfont, geen extra download. */
@font-face {
  font-family: 'Montserrat fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 111.4%; ascent-override: 87%; descent-override: 22.5%; line-gap-override: 0%;
}
/* De lege <i data-lucide> is cursief tot lucide hem vervangt en trok zo de
   cursieve font binnen op pagina's zonder cursieve tekst. */
i[data-lucide]{font-style:normal}

:root {
  /* ===================================================================
     BRAND CORE — theme agnostic
     =================================================================== */

  /* -- Navy (cool, deep — the signature surface) -- */
  --navy-950: #07111E;   /* deepest — footer, gradient floor            */
  --navy-900: #0B1B2E;   /* PRIMARY dark surface — hero, bands          */
  --navy-800: #102539;   /* elevated card on dark                       */
  --navy-700: #173049;   /* raised / hover on dark                      */
  --navy-600: #20405C;   /* dark-mode borders (solid)                   */

  /* -- Gold (premium detail — used with restraint) -- */
  --gold:        #C9A24A;  /* PRIMARY accent — CTAs, eyebrows, highlight */
  --gold-bright: #E0C079;  /* highlight word, eyebrow on dark, star      */
  --gold-deep:   #74571D;  /* accessible text / hover on light surfaces  */
  --gold-tint:   rgba(201,162,74,0.14); /* chip / badge fill            */

  /* -- Cream (the swimmer figure — warm light for display on dark) -- */
  --cream:      #F4EEDE;
  --cream-soft: #E8DFC9;

  /* -- Logo blues (water → data & accent tints, never dominant) -- */
  --blue-deep:   #1C3D6E;
  --blue:        #2B6CA6;
  --blue-bright: #3E92C4;
  --blue-050:    #EAF2F8;  /* light tinted surface / chip on light       */

  /* -- Neutrals (subtly warm to harmonise with cream brand) -- */
  --paper:   #FCFBF7;   /* primary LIGHT surface — warm white           */
  --soft:    #F3F1E9;   /* cards / sections on light                    */
  --soft-2:  #ECE9DE;   /* deeper soft band                             */
  --line-lt: #E5E1D4;   /* hairline on light (warm)                     */
  --ink:     #0E2235;   /* primary text on light (cool near-black)      */
  --ink-soft:#56697B;   /* secondary text on light                      */
  --ink-mute:#5D6B78;   /* tertiary / captions on light (AA contrast)   */

  /* ===================================================================
     SEMANTIC SURFACES — default = LIGHT theme
     =================================================================== */
  --surface:      var(--paper);
  --surface-2:    var(--soft);
  --surface-3:    var(--soft-2);
  --surface-elev: #FFFFFF;
  --line:         var(--line-lt);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --text-mute:    var(--ink-mute);
  --display:      var(--ink);       /* headline colour                  */
  --eyebrow-c:    var(--gold-deep); /* eyebrow reads as deep gold on light */
  --on-accent:    var(--navy-900);  /* text on a gold fill              */
  --chip-stroke:  var(--blue-deep);
  --chip-bg:      var(--blue-050);
  --shadow-color: 16,28,45;

  /* ===================================================================
     TYPE
     =================================================================== */
  --font-sans:    'Montserrat', 'Montserrat fallback', -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', 'Montserrat fallback', -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: 76px;  /* hero — "Swim smarter."          */
  --fs-h1:      52px;
  --fs-h2:      38px;
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-lead:    19px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  --track-eyebrow: 0.2em;
  --track-tight:  -0.02em;
  --track-btn:     0.1em;

  /* ===================================================================
     SPACING (8pt, generous)   ·   RADII   ·   ELEVATION
     =================================================================== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-btn:12px; --r-pill:999px;

  --shadow-xs: 0 1px 2px rgba(var(--shadow-color),0.06);
  --shadow-sm: 0 4px 14px rgba(var(--shadow-color),0.08);
  --shadow-md: 0 16px 44px rgba(var(--shadow-color),0.12);
  --shadow-lg: 0 30px 70px rgba(var(--shadow-color),0.16);
  --shadow-gold: 0 12px 30px rgba(160,126,51,0.30);  /* gold CTA lift   */
}

/* ===================================================================
   THEME FLIPS — nestable. .theme-dark on any container -> dark subtree.
   =================================================================== */
.theme-dark {
  --surface:      var(--navy-900);
  --surface-2:    var(--navy-800);
  --surface-3:    var(--navy-700);
  --surface-elev: var(--navy-800);
  --line:         rgba(255,255,255,0.10);
  --text:         rgba(255,255,255,0.92);
  --text-soft:    rgba(255,255,255,0.66);
  --text-mute:    rgba(255,255,255,0.44);
  --display:      var(--cream);
  --eyebrow-c:    var(--gold-bright);
  --chip-stroke:  var(--gold);
  --chip-bg:      rgba(201,162,74,0.10);
  --shadow-color: 0,0,0;
}
.theme-light { /* explicit reset back to light when nested in dark */
  --surface:      var(--paper);
  --surface-2:    var(--soft);
  --surface-3:    var(--soft-2);
  --surface-elev: #FFFFFF;
  --line:         var(--line-lt);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --text-mute:    var(--ink-mute);
  --display:      var(--ink);
  --eyebrow-c:    var(--gold-deep);
  --chip-stroke:  var(--blue-deep);
  --chip-bg:      var(--blue-050);
  --shadow-color: 16,28,45;
}

/* ===================================================================
   SEMANTIC ELEMENT STYLES
   =================================================================== */
*{box-sizing:border-box}
.ds-type{ color:var(--text); font-family:var(--font-sans); }

.eyebrow{
  font:700 var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--eyebrow-c);
}
.display{
  font:800 var(--fs-display)/var(--lh-tight) var(--font-display);
  letter-spacing:-0.03em; color:var(--display);
}
h1,.h1{ font:800 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing:var(--track-tight); color:var(--display); }
h2,.h2{ font:800 var(--fs-h2)/var(--lh-snug)  var(--font-display); letter-spacing:var(--track-tight); color:var(--display); }
h3,.h3{ font:700 var(--fs-h3)/1.22 var(--font-display); color:var(--display); }
h4,.h4{ font:700 var(--fs-h4)/1.3  var(--font-sans);    color:var(--text); }
.lead { font:400 var(--fs-lead)/var(--lh-body) var(--font-sans); color:var(--text-soft); }
p,.body{ font:400 var(--fs-body)/var(--lh-body) var(--font-sans); color:var(--text-soft); }
small,.small{ font:400 var(--fs-small)/1.5 var(--font-sans); color:var(--text-soft); }

/* a single word lifted in gold inside an otherwise plain headline */
.hl{ color:var(--gold-deep); }
.theme-dark .hl{ color:var(--gold-bright); }
/* navy kop (contact.html): gold-deep haalt daar hooguit 2,7:1, gold-bright minstens 6,1:1 */
.page-header .hl{ color:var(--gold-bright); }


/* ==================== FAQ-component (was /assets/dt-faq.css) ==================== */

/* =====================================================================
   DIVE & THRIVE — FAQ-BLOK VOOR DE ORIGINELE PAGINA'S
   ---------------------------------------------------------------------
   Bewust géén basisregels (geen html/body/.wrap/section): die zes pagina's
   hebben elk hun eigen inline stylesheet en dat mag hier niets van raken.
   Alleen de klassen van dit ene blok staan hierin.

   Uitschuifvragen met <details>/<summary>: native, dus geen JavaScript en
   geen ARIA-plumbing, en met het toetsenbord te bedienen. De antwoorden
   staan gewoon in de HTML — dichtgeklapt of niet, Google en AI-crawlers
   lezen ze even goed.
   ===================================================================== */

.dtfaq { padding: 84px 0; background: var(--surface-2); }
.dtfaq > .wrap { max-width: 1000px; }

.dtfaq__head { max-width: 62ch; margin: 0 0 30px; }
.dtfaq__head h2 {
  margin: 10px 0 0;
  font: 800 clamp(24px, 3vw, 34px)/1.14 var(--font-display);
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.dtfaq__head .eyebrow { color: var(--gold-deep); }

.dtfaq__list { display: grid; gap: 0; }

.dtfaq__item { border-bottom: 1px solid var(--line); }
.dtfaq__item:first-child { border-top: 1px solid var(--line); }

.dtfaq__item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 19px 44px 19px 0;
  font: 700 17px/1.4 var(--font-display);
  color: var(--ink);
}
.dtfaq__item summary::-webkit-details-marker { display: none; }

/* Chevron: draait een kwartslag zodra het antwoord openstaat. */
.dtfaq__item summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.dtfaq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.dtfaq__item summary:hover { color: var(--gold-deep); }
.dtfaq__item summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.dtfaq__a {
  padding: 0 44px 22px 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.dtfaq a { color: var(--gold-deep); text-underline-offset: 2px; }
.dtfaq a:hover { color: var(--gold-deep); text-decoration-thickness: 2px; }
.dtfaq :where(a):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Twee kolommen zodra er ruimte is. De tweede kolom krijgt zijn eigen bovenrand,
   anders mist de eerste rij daar een lijn. */
@media (min-width: 900px) {
  .dtfaq__list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .dtfaq__item:nth-child(2) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .dtfaq { padding: 60px 0; }
  .dtfaq__head { margin-bottom: 24px; }
}

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


/* ==================== Motion: reveal, parallax, marquee, nav-voortgang (was /assets/v3pro/dt-motion.css; hoort bij dt-motion.js) ==================== */

/* =====================================================================
   DIVE & THRIVE — V3 PRO MOTION CSS
   ---------------------------------------------------------------------
   Motion tokens + behaviour layer. Pairs with dt-motion.js.
   Brand tokens live in the tokens section at the top of this file — never restyled here.

   GOLDEN RULE (progressive enhancement):
   When JS never runs OR prefers-reduced-motion is on, ALL reveal/split/
   count content is fully visible at full opacity with no transform.
   Animation is layered ON TOP via .dtm-on (JS sets it on <html>).
   ===================================================================== */

:root {
  /* -- Motion language (exact values from MOTION-CONTRACT.md) -- */
  --ease-cine:  cubic-bezier(.16,1,.3,1);   /* big cinematic reveals */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-reveal: 620ms;
  --dur-micro:  200ms;
  --dur-exit:   150ms;
  --stagger:    70ms;

  --reveal-rise: 32px;   /* within 24–40px range */
}

/* =====================================================================
   1. REVEALS  —  hidden state applies ONLY when JS is on (.dtm-on) and
   motion is allowed (NOT .dtm-reduced). Otherwise content is visible.
   ===================================================================== */
html.dtm-on:not(.dtm-reduced) [data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-rise), 0);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-cine);
  transition-delay:var(--reveal-delay, 0ms);
}
html.dtm-on:not(.dtm-reduced) [data-reveal="fade"]  { transform:none; }
html.dtm-on:not(.dtm-reduced) [data-reveal="scale"] { transform:scale(.94); }
html.dtm-on:not(.dtm-reduced) [data-reveal="left"]  { transform:translate3d(calc(-1 * var(--reveal-rise)),0,0); }
html.dtm-on:not(.dtm-reduced) [data-reveal="right"] { transform:translate3d(var(--reveal-rise),0,0); }
html.dtm-on:not(.dtm-reduced) [data-reveal="clip"]  {
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-reveal) var(--ease-cine), opacity var(--dur-reveal) var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}

/* arrived state */
html.dtm-on:not(.dtm-reduced) [data-reveal].is-revealed{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
}

/* =====================================================================
   2. SPLIT TEXT  —  per-unit reveal. Units sit hidden, rise in.
   ===================================================================== */
.dt-split__unit{ display:inline-block; will-change:transform,opacity; }
.dt-split__unit--space{ white-space:pre; } /* preserves spaces between words */

html.dtm-on:not(.dtm-reduced) [data-split] .dt-split__unit{
  opacity:0;
  transform:translate3d(0, var(--reveal-rise), 0);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-cine);
  transition-delay:var(--split-delay, 0ms);
}
html.dtm-on:not(.dtm-reduced) [data-split].is-revealed .dt-split__unit{
  opacity:1;
  transform:none;
}

/* =====================================================================
   3. TILT  —  3D card tilt. Vars driven by JS.
   ===================================================================== */
.dt-tilt{
  transform-style:preserve-3d;
  transform:perspective(900px)
            rotateX(var(--tilt-x, 0deg))
            rotateY(var(--tilt-y, 0deg));
  transition:transform var(--dur-micro) var(--ease-out);
  will-change:transform;
}
.dt-tilt__layer{
  transform:translate3d(0,0, var(--tilt-depth, 0px));
  transition:transform var(--dur-micro) var(--ease-out);
}

/* =====================================================================
   4. MAGNETIC  —  button eases toward cursor. Vars driven by JS.
   ===================================================================== */
.dt-magnetic{
  transform:translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition:transform var(--dur-micro) var(--ease-out);
}

/* =====================================================================
   6. NAV CONDENSE  —  hook only; module owns the visual styling.
   ===================================================================== */
[data-nav]{ transition:background var(--dur-micro) var(--ease-out),
                       box-shadow var(--dur-micro) var(--ease-out),
                       backdrop-filter var(--dur-micro) var(--ease-out); }

/* =====================================================================
   7. SCROLL PROGRESS BAR
   ===================================================================== */
[data-scroll-progress]{
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

/* =====================================================================
   8. MARQUEE  —  continuous horizontal loop. JS clones a track.
   ===================================================================== */
[data-marquee]{ overflow:hidden; }
.dt-marquee__track{
  display:inline-flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  will-change:transform;
  animation:dt-marquee var(--marquee-dur, 30s) linear infinite;
}
[data-marquee]:hover .dt-marquee__track,
[data-marquee]:focus-within .dt-marquee__track{ animation-play-state:paused; }
@keyframes dt-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
html.dtm-reduced .dt-marquee__track{ animation:none; }

/* =====================================================================
   9. SMOOTH ANCHORS  —  CSS half; JS handles sticky-nav offset.
   ===================================================================== */
html{ scroll-behavior:smooth; }

/* =====================================================================
   REDUCED MOTION  —  kill everything. Belt-and-braces alongside the
   .dtm-on gating above (covers the case where JS sets .dtm-reduced).
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
html.dtm-reduced [data-reveal],
html.dtm-reduced [data-split] .dt-split__unit,
html.dtm-reduced [data-split],
html.dtm-reduced [data-count-to]{
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
  transition:none !important;
}
html.dtm-reduced .dt-tilt,
html.dtm-reduced .dt-magnetic{
  transform:none !important;
  transition:none !important;
}

/* Shared quality layer — loaded after page-specific CSS.
   Keeps the test build accessible, honest and visually consistent. */
:root {
  --ink-mute: #5d6b78;
  --gold-deep: #74571d;
  --focus-ring: #f0bd55;
}

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: 92px;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

body.nav-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
}

/* Safari bug: a position:fixed drawer nested inside a position:sticky
   nav gets positioned relative to the sticky ancestor's flow position
   instead of the viewport. Homepage's nav is already position:fixed and
   is unaffected; force the same here for the moment the drawer is open. */
body.nav-open .nav {
  position: fixed;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--cream, #f4eede);
  color: var(--navy-950, #07111e);
  font: 700 14px/1.2 var(--font-sans, sans-serif);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

html body :is(a, button, input, select, textarea, summary):focus-visible {
  /* Two-tone ring: white remains visible on navy, navy remains visible on white. */
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--navy-900, #0b1b2e) !important;
}

:where(.btn-primary, .submit-btn):is(:hover, :focus-visible) {
  background: var(--gold-bright, #e0c079) !important;
  color: var(--navy-900, #0b1b2e) !important;
}

.pmore > summary:hover {
  color: var(--gold-deep, #74571d) !important;
}

html:not(.nav-ready) .faq-a {
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
}

html:not(.nav-ready) .faq-q {
  cursor: default;
}

.nav__burger {
  color: var(--cream, #f4eede);
}

.nav__burger[aria-expanded="true"] span {
  background: transparent;
}

.nav__burger[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}

.nav__burger[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
}

.nav__links > li > .mi-btn {
  display: none;
}

.media-placeholder {
  border: 1px solid rgba(116, 87, 29, .24);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(201, 162, 74, .13), transparent 58%),
    #f8f6ef;
  color: #3f4c59;
}

/* Notitie in de hero ("Nu beschikbaar", "Wekelijkse training"): rustig, in de
   toon van de donkere hero, geen wit kader meer. */
.test-mode-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 24px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  border-left: 2px solid rgba(201, 162, 74, .85);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .05);
  color: rgba(244, 240, 230, .78);
}

.test-mode-note strong {
  color: #d8b866;
  font-weight: 600;
  white-space: nowrap;
}

.media-placeholder {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
  overflow: hidden;
  padding: 28px;
  text-align: center;
}

.media-placeholder::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(106, 176, 213, .2), transparent 31%),
    repeating-linear-gradient(125deg, transparent 0 24px, rgba(10, 31, 53, .035) 25px 26px);
  content: "";
}

.media-placeholder__inner {
  position: relative;
  max-width: 34ch;
}

.media-placeholder__label {
  display: block;
  margin-bottom: 8px;
  color: #74571d;
  font: 700 11px/1.2 var(--font-sans, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.media-placeholder__copy {
  margin: 0;
  color: #475664;
  font-size: 15px;
  line-height: 1.65;
}

.fcard .ph.media-placeholder .media-placeholder__label {
  color: var(--gold-bright, #e0c079);
}

.test-content[hidden] {
  display: none !important;
}

.foot .powered .pw,
.mi-foot .powered .pw {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 11px !important;
}

.foot .powered .hub,
.mi-foot .powered .hub {
  color: rgba(255, 255, 255, .78) !important;
}

.foot .copy,
.mi-foot .copy {
  color: rgba(255, 255, 255, .7) !important;
  line-height: 1.5 !important;
}

.mi-foot .foot-heading {
  color: rgba(255, 255, 255, .74) !important;
  font-size: 12px !important;
}

.fg :is(input, select, textarea) {
  border-color: #6f7d89;
}

.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 162, 74, .35);
  border-radius: 10px;
  background: rgba(201, 162, 74, .1);
  color: #334250;
  font-size: 14px;
  line-height: 1.55;
}

.form-status.is-visible {
  display: block;
}

.field-error {
  display: block;
  min-height: 1.3em;
  margin-top: 6px;
  color: #9b2c2c;
  font-size: 13px;
  line-height: 1.35;
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: #b43333 !important;
  box-shadow: 0 0 0 3px rgba(180, 51, 51, .12);
}

/* Gold is an accent; on light surfaces this darker tone preserves contrast. */
main .sec-shift .arrow,
main .sys-num,
main .sys-note .ic {
  color: #74571d;
}

main .tcard .stars,
main .tcard .stars svg,
main .ip-stars svg {
  color: #74571d;
  fill: #74571d;
  stroke: #74571d;
}

.theme-light :where(.eyebrow, .hl, .btn-ghost),
.sec-light :where(.eyebrow, .hl, .btn-ghost),
.section-light :where(.eyebrow, .hl, .btn-ghost) {
  color: #74571d;
}

.theme-light :where(.muted, .sub, .card-sub),
.sec-light :where(.muted, .sub, .card-sub),
.section-light :where(.muted, .sub, .card-sub) {
  color: #5d6b78;
}

@media (max-width: 860px) {
  html:not(.nav-ready) .nav__burger {
    display: none !important;
  }

  html:not(.nav-ready) .nav__links {
    position: static !important;
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    flex-flow: row wrap !important;
    padding: 8px 0 14px !important;
    clip-path: none !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html.nav-ready .nav__burger {
    position: relative;
    z-index: 92;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  html.nav-ready .nav__burger svg {
    width: 24px;
    height: 24px;
  }

  html.nav-ready .nav__links {
    position: fixed;
    z-index: 90;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: min(84vw, 340px);
    max-width: 100%;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 96px 28px 36px;
    overflow-y: auto;
    background: var(--navy-950, #07111e);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .28);
    clip-path: inset(0 0 0 100%);
    transform: none;
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 260ms ease, visibility 0s linear 260ms;
  }

  html.nav-ready .nav__links.is-open {
    clip-path: inset(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  html.nav-ready .nav__links > li {
    width: 100%;
  }

  html.nav-ready .nav__links .nav__link {
    width: 100%;
    min-height: 48px;
  }

  html.nav-ready .nav__links > li > .mi-btn {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
  }

  html.nav-ready .nav__right > .mi-btn {
    display: none;
  }

  .nav__word {
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  :where(
    .pcol p,
    .fcard .intro,
    .fcard ul li,
    .sysc p,
    .pcard p,
    .ocard p,
    .info-card p,
    .iline span,
    .faq-a
  ) {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  :where(.btn, .btn-ghost, .sec-cta, .pmore > summary, .faq-q) {
    min-height: 44px;
  }

  .nav__brand,
  .foot .links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  /* Footerkolommen: elke link op een eigen regel. Met inline-flex liepen ze op
     mobiel door elkaar ("De vier pijlers Het ontwikkelsysteem De coach"). */
  .mi-foot .col a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }

  .foot .links {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 0 16px !important;
  }

  :where(input, select, textarea) {
    font-size: 16px;
  }

  .media-placeholder {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  .test-mode-note {
    flex-direction: column;
    gap: 5px;
  }

  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero .wrap > * {
    min-width: 0;
  }

  .fgrid {
    grid-template-columns: 1fr !important;
  }

  .pcard {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .pcard > .main {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-marquee] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible !important;
  }

  [data-marquee] > *,
  [data-marquee] .dt-marquee__track {
    transform: none !important;
  }

  [data-marquee] .dt-marquee__track {
    display: contents !important;
  }

  [data-marquee-clone] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  [data-marquee] {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   INLINE LINKS IN LOPENDE TEKST EN KOPPEN
   ---------------------------------------------------------------------
   De pagina's hebben elk hun eigen inline stylesheet, maar geen daarvan
   had een regel voor een gewone link in een alinea of een kop. Die vielen
   daardoor terug op het browserblauw met onderstreping — precies wat op
   een navy achtergrond het hardst opvalt en het minst bij de huisstijl past.

   Bewust een eigen klasse in plaats van een kale `a`-selector: de nav,
   de footer, de knoppen en de kaarten hebben allemaal al hun eigen
   linkstijlen, en die mogen hier niet door geraakt worden.
   ===================================================================== */

.dt-link {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s ease, color .15s ease;
}
.dt-link:hover { text-decoration-thickness: 2px; }
.dt-link:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Op een donkere ondergrond werkt gold-deep niet (2,6:1); daar het lichte goud. */
.theme-dark .dt-link,
.hero .dt-link,
.p-hero .dt-link { color: var(--gold-bright); }
.theme-dark .dt-link:focus-visible,
.hero .dt-link:focus-visible,
.p-hero .dt-link:focus-visible { outline-color: var(--gold-bright); }

/* In een kop blijft de tekst de kopkleur houden; de gouden onderlijn is de
   affordance. Anders schreeuwt een halve kop in een andere kleur. */
h1 > .dt-link, h2 > .dt-link, h3 > .dt-link, h4 > .dt-link {
  color: inherit;
  /* gold #C9A24A haalt maar 2,32:1 op papier; de onderlijn is hier de enige
     aanwijzing dat het een link is, dus die moet de 3:1 van SC 1.4.11 halen. */
  text-decoration-color: var(--gold-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
h1 > .dt-link:hover, h2 > .dt-link:hover,
h3 > .dt-link:hover, h4 > .dt-link:hover { color: var(--gold-deep); }

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

/* =====================================================================
   WAAR WE ZWEMMEN
   ---------------------------------------------------------------------
   Eén component voor de badenlijst, hier in plaats van in dt-page.css,
   omdat alle elf pagina's dit bestand laden en de zes originele
   dt-page.css niet.
   ===================================================================== */

.dt-pools { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.dt-pools h2 {
  margin: 0 0 10px;
  font: 800 clamp(22px, 2.6vw, 28px)/1.2 var(--font-display);
  color: var(--ink);
}
.dt-pools > p {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 68ch;
}
.dt-pools ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.dt-pools li {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dt-pools li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.5.8: tapdoel minimaal 24x24 */
  font: 700 15px/1.35 var(--font-display);
  color: var(--gold-deep);
  text-decoration: none;
}
.dt-pools li a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.dt-pools li a:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.dt-pools li span {
  font: 600 12px/1.4 var(--font-sans);
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.dt-pools__reach {
  margin: 18px 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* Zeven menu-items ("Sportvakantie" is erbij gekomen) passen tussen 901 en 1599px
   niet meer op volle grootte tussen het merk en de knop. Compacter tot het scherm
   echt ruim is. Hogere specificiteit dan de inline paginastijlen. */
@media (min-width: 901px) {
  .nav .nav__links .nav__link { padding: 0 8px; font-size: 12px; letter-spacing: .08em; }
  .nav .nav__links .nav__link::after { left: 8px; right: 8px; }
  .nav .nav__links { gap: 2px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .nav .nav__links .nav__link { padding: 0 6px; }
  .nav .nav__links .nav__link::after { left: 6px; right: 6px; }
  .nav .nav__links { gap: 0; }
  .nav .nav__word { font-size: 15px; }
  .nav .nav__right .mi-btn { padding: 10px 12px; font-size: 11px; }
}

/* Voortgangsbalk alleen tonen waar het scrollscript (dt-motion) hem aanstuurt;
   zonder dat script stond hij op vier pagina's permanent vol als gouden streep. */
html:not(.dtm-on) .nav-progress { display: none; }

/* Hero boven de vouw valt buiten het reveal-systeem.
   dt-motion.js zet html.dtm-on, waarna de CSS elk [data-reveal] eerst verbergt
   en het script het daarna terugfadet. Boven de vouw betekent dat: tekst
   verschijnt, verdwijnt, komt terug. Lighthouse mat daardoor een LCP van 4,0 s
   waarvan 83% wachten op dat script. De hero staat nu meteen goed en hangt niet
   meer van JavaScript af; alles onder de vouw animeert gewoon door. */
html.dtm-on:not(.dtm-reduced) .hero [data-reveal],
html.dtm-on:not(.dtm-reduced) .p-hero [data-reveal],
html.dtm-on:not(.dtm-reduced) .sv-hero [data-reveal],
html.dtm-on:not(.dtm-reduced) .page-header [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

/* =====================================================================
   DIVE & THRIVE — GEDEELDE PAGINALAAG
   ---------------------------------------------------------------------
   De zes originele pagina's dragen elk hun eigen inline <style> met een
   op maat ontworpen hero. Dat is bewust zo gebleven — daar zit het
   handwerk. Deze stylesheet bedient de pagina's die daarna kwamen:
   de dienstpagina's en de kennisbank.

   Twee redenen om het hier te bundelen in plaats van per pagina:
   twaalf keer 15 KB inline CSS is 180 KB duplicaat, en een wijziging
   aan de nav zou je twaalf keer moeten doorvoeren.

   Alles hieronder leunt op de tokens uit assets/site.css. Er staat geen
   enkele losse kleurwaarde in, op de navy-transparanties na die ook in
   de originele pagina's letterlijk zo staan.
   ===================================================================== */

html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
section{padding:96px 0;}

/* ---- nav (identiek aan de originele pagina's) ---- */
.nav-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-bright) 100%);transform-origin:left center;}
.nav{position:sticky;top:0;left:0;right:0;z-index:80;
  background:rgba(7,17,30,.9);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);}
.nav .wrap{padding-top:0;padding-bottom:0;}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:78px;}
.nav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.nav__brand img{width:32px;height:32px;object-fit:contain;}
.nav__mark--light{display:none;}
.nav__word{font:800 18px/1 var(--font-display);letter-spacing:.05em;color:var(--gold-bright);text-transform:uppercase;}
.nav__home-ic{margin-left:2px;opacity:.55;flex-shrink:0;color:var(--gold-bright);}
.nav__brand:hover .nav__home-ic{opacity:.85;}
.nav__links{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center;}
.nav__link{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;white-space:nowrap;
  font:600 13px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,238,222,.74);text-decoration:none;transition:color .2s ease;}
.nav__link:hover,.nav__link.is-active{color:var(--gold-bright);}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:14px;height:2px;
  background:var(--gold-bright);border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .2s ease;}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);}
.nav__right{display:flex;align-items:center;gap:14px;}
.nav__burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;align-items:center;justify-content:center;}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{
  content:"";display:block;width:22px;height:2px;background:var(--cream);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.nav__burger span::before{position:absolute;transform:translateY(-7px);}
.nav__burger span::after{position:absolute;transform:translateY(7px);}
.nav__burger span{position:relative;}

/* ---- toetsenbordfocus ----
   Er stond geen eigen focusstijl, dus viel alles terug op de browserring: op de
   navy hero een donkere ring op een donkere ondergrond.
   Eén goudtint werkt niet op beide gronden — nagerekend tegen SC 1.4.11 (3:1):
     gold-deep   op papier 6.49:1  ·  op navy-900 2.58:1  (te weinig)
     gold-bright op navy   9.90:1  ·  op papier   1.69:1  (te weinig)
   Dus: gold-deep als standaard voor de leeskolom, gold-bright binnen de
   navy secties. */
:where(a, button, .mi-btn):focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:3px;
}
.nav :where(a, button):focus-visible,
.p-hero :where(a, button):focus-visible,
.p-cta :where(a, button):focus-visible,
.mi-foot :where(a, button):focus-visible{
  outline-color:var(--gold-bright);
}

/* ---- knoppen ---- */
.mi-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 28px;border:0;cursor:pointer;overflow:hidden;
  font:700 14px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-btn);text-decoration:none;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}
.mi-btn--sm{min-height:44px;padding:11px 20px;font-size:12px;}
.mi-btn--primary{background:var(--gold);color:var(--on-accent);box-shadow:var(--shadow-gold);}
.mi-btn--primary:hover{background:var(--gold-bright);transform:translateY(-2px);}
.mi-btn--primary::before{content:"";position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-180%) skewX(-18deg);}
.mi-btn--primary:hover::before{transform:translateX(320%) skewX(-18deg);transition:transform 720ms ease;}
.mi-btn--ghost{background:transparent;color:var(--gold-bright);box-shadow:inset 0 0 0 1px rgba(224,192,121,.5);}
.mi-btn--ghost:hover{background:rgba(224,192,121,.1);}
.nav__links .mi-btn{display:none;}

/* =====================================================================
   HERO — één band, navy, geldt voor dienstpagina's en artikelen
   ===================================================================== */
.p-hero{background:linear-gradient(170deg,var(--navy-900) 0%,var(--navy-950) 100%);
  color:var(--cream);padding:72px 0 60px;}
/* De hero deelt de breedte van de nav (1200px uit .wrap), zodat het logo,
   het kruimelpad en de H1 op één linkerlijn staan. De leesbreedte wordt
   verderop bewaakt door .p-col (68ch), niet door deze kolom. */
.p-hero .eyebrow{color:var(--gold-bright);}
.p-hero h1{margin:14px 0 0;font:800 clamp(28px,5vw,52px)/1.1 var(--font-display);
  letter-spacing:-.02em;color:var(--cream);text-wrap:balance;
  /* "Openwatertraining" paste op 32px met 1px over: op een 360px-telefoon
     brak dat af. 28px geeft marge, en afbreken vangt de rest op. */
  overflow-wrap:break-word;hyphens:auto;}
.p-hero h1 .hl{color:var(--gold-bright);}
.p-hero .lead{margin:20px 0 0;font-size:var(--fs-lead);line-height:1.6;color:var(--cream-soft);max-width:62ch;}
.p-hero .meta{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;
  font:600 12px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,222,.62);}
.p-coach{margin:18px 0 0;font-size:var(--fs-small);line-height:1.55;color:rgba(244,238,222,.72);}
.p-coach a{color:var(--gold-bright);text-underline-offset:2px;}
.p-hero .actions{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:14px;}

/* ---- feitenstrip: prijs, duur, plaats, doelgroep in één oogopslag.
   Vervangt de zinnen die diezelfde feiten eerder in proza herhaalden. ---- */
/* auto-fit maakte 2 kolommen van 158px op mobiel en 4 van 172px op tablet:
   te smal voor waarden als "Beginners tot wedstrijdzwemmers". Expliciete
   breekpunten geven een voorspelbare kaartbreedte. */
.p-facts{display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin:26px 0 0;padding:0;list-style:none;}
.p-facts li{display:flex;flex-direction:column;gap:5px;padding:13px 15px;
  background:rgba(244,238,222,.06);border:1px solid rgba(244,238,222,.16);
  border-radius:var(--r-sm);}
.p-facts .lbl{font:700 11px/1 var(--font-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);}
.p-facts .val{font:600 15px/1.35 var(--font-sans);color:var(--cream);}

/* ---- kruimelpad (zichtbaar, hoort bij het BreadcrumbList-schema) ---- */
.crumbs{padding:16px 0 0;}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0;padding:0;
  font:600 12px/1.4 var(--font-sans);letter-spacing:.06em;color:rgba(244,238,222,.6);}
.crumbs a{color:rgba(244,238,222,.72);text-decoration:none;display:inline-flex;align-items:center;min-height:24px;}
.crumbs a:hover{color:var(--gold-bright);text-decoration:underline;}
.crumbs li+li::before{content:"›";margin-right:8px;color:rgba(244,238,222,.4);}
.crumbs [aria-current]{color:var(--gold-bright);display:inline-flex;align-items:center;min-height:24px;}

/* =====================================================================
   ARTIKEL / DIENST — leeskolom
   ===================================================================== */
.p-body{padding:56px 0 72px;}
.p-col{max-width:68ch;}
.p-col > p{margin:0 0 1.15em;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);}
.p-col h2{margin:44px 0 16px;font:800 clamp(24px,3vw,32px)/1.15 var(--font-display);
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance;}
.p-col h2:first-child{margin-top:0;}
.p-col h3{margin:34px 0 12px;font:700 20px/1.25 var(--font-display);color:var(--ink);}
.p-col ul{margin:0 0 1.3em;padding:0;list-style:none;}
.p-col ul li{position:relative;padding-left:26px;margin-bottom:10px;
  font-size:var(--fs-body);line-height:1.62;color:var(--ink-soft);}
.p-col ul li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--gold);}
.p-col a{color:var(--gold-deep);text-underline-offset:2px;}
.p-col a:hover{color:var(--gold-deep);text-decoration-thickness:2px;}
.p-col strong{color:var(--ink);font-weight:700;}

/* ---- prijzen ----
   Volgt het idioom van .pricerow op aanbod.html: het bedrag als groot goud
   getal, de voorwaarde eronder in klein grijs. Stond eerder als grijze
   tabelregel, wat niet paste bij de rest van de site. */
/* ---- beeld in de bodytekst ----
   De foto's zijn 16:9; aspect-ratio houdt de ruimte vast zodat er geen CLS
   ontstaat terwijl ze lazy binnenkomen. Randen volgen .p-facts. ---- */
.p-fig{margin:32px 0;}
.p-fig img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);}
.p-fig figcaption{margin:10px 0 0;font-size:var(--fs-small);line-height:1.5;
  color:var(--ink-mute);}

.p-price{margin:30px 0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.p-price__item{padding:18px 20px;background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);}
.p-price__amt{display:block;font:800 28px/1 var(--font-display);color:var(--gold-deep);}
.p-price__per{display:block;margin-top:7px;font:600 13px/1.45 var(--font-sans);color:var(--ink-mute);}

/* Prijstoggle (excl./incl. privébaan + video): twee radio's, CSS-only,
   geen JavaScript. .p-price-block:has(#radio:checked) stuurt welke
   .p-price-variant zichtbaar is — :has() i.p.v. :checked ~ omdat de
   radio's binnen .p-price-toggle genest zitten, dus geen directe sibling
   van de variant-blokken zijn. */
.p-price-block{margin:26px 0 0;}
/* inline-grid met twee 1fr-kolommen maakt de segmenten gegarandeerd even
   breed. Met flex bleven ze op hun eigen tekstbreedte staan: een inline-flex
   container krimpt naar max-content en houdt dan geen vrije ruimte over om te
   verdelen, waardoor de 50%-pil er net naast lag. */
.p-price-toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);}
/* Glijdende pil: precies 50% breed, dus één translate naar de andere helft. */
.p-price-toggle::before{content:"";position:absolute;z-index:0;
  top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:var(--gold);border-radius:var(--r-pill);
  transition:transform .5s cubic-bezier(.34,1.4,.5,1);}
.p-price-block:has(#price-incl:checked) .p-price-toggle::before{transform:translateX(100%);}
.p-price-toggle__input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.p-price-toggle__btn{position:relative;z-index:1;text-align:center;white-space:nowrap;
  padding:10px 18px;border-radius:var(--r-pill);cursor:pointer;
  font:700 13px/1.2 var(--font-sans);color:var(--ink-mute);transition:color .3s ease;}
.p-price-toggle__input:checked + .p-price-toggle__btn{color:var(--on-accent);}
.p-price-toggle__input:focus-visible + .p-price-toggle__btn{outline:2px solid var(--gold-deep);outline-offset:2px;}

/* De twee varianten liggen in dezelfde gridcel op elkaar. Dat houdt de
   hoogte gelijk aan de langste variant, dus het blok springt niet bij het
   wisselen, en de twee kunnen over elkaar heen kruisvervagen. */
.p-price-variants{display:grid;}
.p-price-variant{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.985);
  transition:opacity .34s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s .34s;}
.p-price-variant .p-price{margin-top:18px;}
/* Zelfde id's op elke pagina die dit component gebruikt (1-op-1, duo):
   elke pagina is een los document, dus dat botst niet. */
.p-price-block:has(#price-excl:checked) #price-variant-excl,
.p-price-block:has(#price-incl:checked) #price-variant-incl{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .34s ease .05s,transform .5s cubic-bezier(.22,1,.36,1) .05s,visibility 0s;}
@media (prefers-reduced-motion: reduce){
  .p-price-toggle::before,.p-price-variant{transition:none;}
}
/* Zonder :has() kan geen enkele variant zichtbaar worden gemaakt en zou het
   blok hélemaal geen prijs tonen. Val dan terug op de eerste variant en
   verberg de toggle, zodat er altijd een bedrag staat. */
@supports not selector(:has(*)){
  .p-price-toggle{display:none;}
  .p-price-variants > .p-price-variant:first-child{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;}
}
.p-price__note{margin:14px 0 0;font:600 13px/1.5 var(--font-sans);color:var(--ink-mute);}
/* .p-col a (0,1,1) zette de tekst op gold-deep: 2,8:1 op het goud. Met .p-col a ervoor wint de navy. */
.p-col a.p-price__buy{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:38px;
  padding:9px 14px;border-radius:var(--r-btn);background:var(--gold);color:var(--on-accent);
  font:700 12px/1 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  transition:background .15s ease,transform .15s ease;}
.p-col a.p-price__buy:hover{background:var(--gold-bright);transform:translateY(-1px);}

/* =====================================================================
   FAQ — uitschuifvragen met native <details>.
   De antwoorden staan in de HTML, dichtgeklapt of niet, dus Google en
   AI-crawlers lezen ze even goed als wanneer alles openstond.
   ===================================================================== */
.p-faq{margin-top:52px;padding-top:38px;border-top:1px solid var(--line);}
.p-faq > h2{margin:0 0 26px;font:800 clamp(24px,3vw,30px)/1.15 var(--font-display);color:var(--ink);}
/* Uitschuifvragen: native <details>, geen JavaScript, toetsenbordvriendelijk.
   De antwoorden staan in de HTML, dus crawlers lezen ze ook dichtgeklapt. */
.p-faq__list{display:grid;gap:0;}
.p-faq__item{border-bottom:1px solid var(--line);}
.p-faq__item:first-child{border-top:1px solid var(--line);}
.p-faq__item summary{list-style:none;cursor:pointer;position:relative;
  padding:19px 44px 19px 0;font:700 17px/1.4 var(--font-display);color:var(--ink);}
.p-faq__item summary::-webkit-details-marker{display:none;}
.p-faq__item summary::after{content:"";position:absolute;right:10px;top:50%;
  width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .22s ease;}
.p-faq__item[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.p-faq__item summary:hover{color:var(--gold-deep);}
.p-faq__a{padding:0 44px 22px 0;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink-soft);}
@media(min-width:900px){
  .p-faq__list{grid-template-columns:1fr 1fr;column-gap:44px;}
  .p-faq__item:nth-child(2){border-top:1px solid var(--line);}
}


/* ---- verwante links ---- */
.p-related{margin-top:56px;padding-top:36px;border-top:1px solid var(--line);}
.p-related h2{margin:0 0 18px;font:700 18px/1.2 var(--font-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);}
.p-related ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.p-related a{display:inline-flex;align-items:center;gap:9px;min-height:32px;font-size:var(--fs-body);
  color:var(--gold-deep);text-decoration:none;}
.p-related a:hover{color:var(--gold-deep);text-decoration:underline;}
.p-related a::before{content:"→";color:var(--gold-deep);font-weight:700;}

/* ---- afsluitende CTA ---- */
.p-cta{background:var(--navy-900);color:var(--cream);padding:72px 0;}
.p-cta .wrap{text-align:center;}
.p-cta h2{margin:0 0 14px;font:800 clamp(26px,3.4vw,36px)/1.15 var(--font-display);
  color:var(--cream);text-wrap:balance;}
.p-cta p{margin:0 auto 28px;max-width:56ch;font-size:var(--fs-lead);line-height:1.6;color:var(--cream-soft);}
.p-cta .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
  /* Zes navigatie-items passen niet meer naast merk + CTA op een laptopscherm.
     Tussen 901 en 1160px verkleinen we de nav in plaats van meteen naar de
     hamburger te springen; daaronder neemt het uitschuifmenu het over. */
  @media(max-width:1160px) and (min-width:901px){
    .wrap{padding:0 24px;}
    .nav__link{padding:0 7px;font-size:12px;letter-spacing:.08em;}
    .nav__link::after{left:7px;right:7px;}
    .nav__word{font-size:16px;}
    .nav__brand{gap:8px;}
    .nav__brand img{width:28px;height:28px;}
    .nav__right{gap:8px;}
    .nav__right .mi-btn{padding:10px 14px;font-size:11px;}
  }
  .nav__word,.nav__right .mi-btn,.nav__links .mi-btn{white-space:nowrap;}

@media(max-width:900px){
  .p-facts{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:520px){
  .p-facts{grid-template-columns:1fr;}
  .p-facts li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;}
  .p-facts .lbl{white-space:nowrap;} /* "VOOR WIE" brak anders over twee regels */
  .p-facts .val{text-align:right;}
}
@media(max-width:960px){
  .wrap{padding:0 24px;}
  section{padding:72px 0;}
  .p-hero{padding:56px 0 52px;}
  .p-body{padding:52px 0 64px;}
}
@media(max-width:900px){
  .nav__burger{display:flex;}
  .nav__links{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);
    flex-direction:column;align-items:stretch;gap:0;padding:96px 24px 24px;
    background:rgba(7,17,30,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transform:translateX(100%);transition:transform .38s cubic-bezier(.16,1,.3,1);
    box-shadow:-20px 0 60px rgba(0,0,0,.4);overflow-y:auto;}
  .nav__links.is-open{transform:translateX(0);}
  .nav__link{min-height:52px;padding:0 8px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08);}
  .nav__links .mi-btn{display:inline-flex;margin-top:18px;}
  .nav__right .mi-btn{display:none;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* =====================================================================
   FOOTER — identiek aan de zes originele pagina's.
   Stond hier niet, waardoor de footer op de nieuwe pagina's ongestyled
   uitviel en 28% van de paginahoogte innam.
   ===================================================================== */
.mi-foot{background:var(--navy-950);color:rgba(244,238,222,.6); padding:72px 0 40px;border-top:1px solid rgba(255,255,255,.06);}
.mi-foot .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px; padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.mi-foot .brand{display:flex;align-items:center;gap:11px;margin-bottom:18px;text-decoration:none;}
.mi-foot .brand img{width:34px;height:34px;object-fit:contain;}
.mi-foot .brand span{font:800 18px/1 var(--font-display);letter-spacing:.05em; color:var(--gold-bright);text-transform:uppercase;}
.mi-foot .intro{color:rgba(244,238,222,.6);max-width:320px;margin:0;font:400 14px/1.65 var(--font-sans);}
.mi-foot .baseline{margin-top:16px;color:var(--gold-bright);font:700 12px/1 var(--font-sans);letter-spacing:.06em;}
.mi-foot .foot-heading{font:700 11px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase; color:rgba(244,238,222,.45);margin:0 0 18px;}
.mi-foot .col a{display:flex;align-items:center;gap:10px;color:rgba(244,238,222,.72); text-decoration:none;font:400 14px/1 var(--font-sans);min-height:32px; transition:color var(--dur-micro,200ms) ease;}
.mi-foot .col a:hover{color:var(--gold-bright);}
.mi-foot .col a .ic{width:16px;height:16px;color:var(--gold);}
.mi-foot .bottom{display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;padding-top:30px;}
.mi-foot .powered{display:flex;align-items:center;gap:11px;min-height:24px;text-decoration:none;transition:opacity .18s ease;}
.mi-foot .powered:hover{opacity:.78;}
.mi-foot .powered:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:4px;}
.mi-foot .powered .pw{font:600 9px/1.3 var(--font-sans);letter-spacing:.2em;text-transform:uppercase; color:rgba(244,238,222,.4);}
.mi-foot .powered .powered-logo{height:18px;width:auto;object-fit:contain;filter:invert(1);opacity:.8;}
.mi-foot .copy{font:400 12px/1 var(--font-sans);color:rgba(244,238,222,.4);}
@media(max-width:900px){
  .mi-foot .top{grid-template-columns:1fr 1fr;}
  .mi-foot .brand-col{grid-column:1 / -1;}
}
@media(max-width:480px){
  .mi-foot .top{grid-template-columns:1fr;}
}
