:root {
    --ink:   #0D0D0D;
    --bone:  #F4F1EA;
    --taupe: #7C7466;        /* brand accent: dividers, dots, button hover */
    /* Two tints of the accent for TEXT, so 11px eyebrows clear WCAG AA
       (the base taupe lands at 4.2:1 on both surfaces — just under 4.5). */
    /* Opgetrokken van 5.2:1 naar ruim 8:1. Op 11px met brede spatiering is de
       AA-drempel te krap; die tekst moet je kunnen lezen zonder moeite. */
    --taupe-on-dark:  #ADA595;   /* 8.3:1 op ink  */
    --taupe-on-light: #56503F;   /* 8.1:1 op bone */
    --header-h: 72px;
  }

  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--ink);
    color: var(--bone);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
    /* room for the sticky mobile action bar */
    padding-bottom: 64px;
  }
  @media (min-width: 768px) { body { padding-bottom: 0; } }

  /* Anchor targets clear the fixed header */
  section[id] { scroll-margin-top: var(--header-h); }

  /* ---------- Typography primitives ---------- */
  .display {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    /* Anton heeft hoge kapitalen en nauwelijks staartletters. Op 0,9 bleef er
       bij een kop van 88 pixels maar vijftien pixels wit tussen twee regels
       over, gemeten; de onderkant van de ene regel lag zowat tegen de
       bovenkant van de volgende. Op 0,96 blijft het strak maar krijgt elke
       regel lucht. */
    line-height: 0.96;
    letter-spacing: 0.005em;
    /* 'anywhere' (not 'break-word') so a long word also shrinks the
       min-content size — otherwise it widens its grid track at 320px. */
    overflow-wrap: anywhere;
  }
  /* Grid/flex children must be allowed to shrink below their content width */
  .grid > *, .flex > * { min-width: 0; }

  /* Een kapitaal met een accent is in Anton veel hoger dan een gewone. Gemeten
     op honderd pixels: de E draagt 86 pixels inkt boven de basislijn, de E met
     accent 111. Op een regelhoogte van 0,96 is er 84 pixels tussen twee
     basislijnen, dus zo'n accent duwt vijftien pixels de regel erboven in en
     dat zie je als een vuil streepje tegen de onderkant van de vorige regel.
     Deze klasse geeft precies die ene regel de ruimte die het accent nodig
     heeft. De rest van de koppen blijft staan zoals ze staat; overal losser
     zetten om twee regels te redden zou het hele beeld veranderen. */
  .regel-accent { display: block; margin-top: .22em; }
  .d-hero  { font-size: clamp(3.1rem, 13vw, 7rem); }
  .d-xl    { font-size: clamp(2.6rem, 8.5vw, 5.5rem); }
  .d-lg    { font-size: clamp(2.1rem, 6vw, 4rem); }
  .d-md    { font-size: clamp(1.6rem, 4vw, 2.6rem); }
  .d-sm    { font-size: clamp(1.15rem, 2.4vw, 1.6rem); }
  .d-num   { font-size: clamp(3rem, 9vw, 6.5rem); }

  /* CREDO wordmark filled with photography. Stays solid ink until JS has
     confirmed the image decoded, so a failed fetch never yields blank text. */
  .credo-word {
    font-size: clamp(4rem, 20vw, 16rem);
    line-height: 0.82;
    color: var(--ink);
    /* Een blok-h2 is zo breed als de container, en dan rekt background-size:
       cover de foto tot een uitgewassen streep. Het element krimpt daarom naar
       de breedte van het woord zelf. */
    display: block;
    width: max-content;
    max-width: 100%;
  }
  .credo-word.has-fill {
    /* The veil used to sit at .42, which on letterforms this wide flattened
       any photo to grey blotches. It is a variable now, and the fills are
       pre-cropped tight so there is real tonal range inside the letters. */
    background-image: linear-gradient(rgba(13,13,13,var(--credo-veil,.10)), rgba(13,13,13,var(--credo-veil,.10))), var(--credo-fill);
    background-size: cover;
    background-position: var(--credo-fill-pos, center 45%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Pushed from 1.15: inside letterforms this heavy, a photo needs the extra
       separation or it collapses to grey. Paired with the lighter veil above. */
    filter: grayscale(1) contrast(1.28);
  }

  .eyebrow {
    /* Was 11px met .25em: samen maakte dat de regel dun, breed en moeilijk te
       pakken. Iets groter, iets zwaarder, iets minder ver uit elkaar. */
    font-size: 12px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--taupe-on-dark);
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .on-light .eyebrow { color: var(--taupe-on-light); }
  .eyebrow-light { color: #BDB6A6; }

  .prose-body { max-width: 62ch; }

  /* ---------- Hairlines & frames ---------- */
  .frame-dark  { border: 1px solid rgba(244,241,234,.18); }
  .frame-light { border: 1px solid rgba(13,13,13,.18); }
  .rule-dark   { border-top: 1px solid rgba(244,241,234,.16); }
  .rule-light  { border-top: 1px solid rgba(13,13,13,.16); }

  /* ---------- Film grain over dark sections ---------- */
  .grain { position: relative; }
  .grain > .grain-layer {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    opacity: .055; mix-blend-mode: overlay;
    /* Op stilstaande vlakken geeft de korrel textuur; over bewegend beeld
       geeft ze ruis die met elk frame verspringt. Daar blijft ze weg. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* Lift ordinary content above the grain. This is more specific than
     Tailwind's .absolute/.z-* utilities, so any child that is meant to be
     pinned to the section box — a full-bleed video or photo layer, the video
     control — must opt out with .grain-pin or it drops back into the flow. */
  .grain > *:not(.grain-layer):not(.grain-pin) { position: relative; z-index: 3; }

  /* Slow drift on a still hero. Used where there is no footage of the thing
     the page is about, so the movement comes from the frame rather than from
     pretending a camera was rolling. */
  @keyframes credo-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
  }
  .drift { animation: credo-drift 26s ease-in-out infinite alternate; will-change: transform; }
  @media (prefers-reduced-motion: reduce) { .drift { animation: none; } }

  /* ---------- Full-bleed media that has to sit on ink ----------
     A photo that stops at a hard rectangular edge against flat black reads as
     pasted on. These fade out along the edge that meets the copy, and carry a
     slight vignette, so the picture dissolves into the page instead. */
  .media-blend::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(to right, rgba(13,13,13,0) 55%, rgba(13,13,13,.85) 100%),
      linear-gradient(to top,   rgba(13,13,13,.55) 0%,  rgba(13,13,13,0) 45%);
  }
  .media-blend.media-blend-left::after {
    background:
      linear-gradient(to left, rgba(13,13,13,0) 55%, rgba(13,13,13,.85) 100%),
      linear-gradient(to top,  rgba(13,13,13,.55) 0%, rgba(13,13,13,0) 45%);
  }
  /* Stacked layout: the copy sits underneath, so fade the bottom instead. */
  @media (max-width: 1023px) {
    .media-blend::after, .media-blend.media-blend-left::after {
      background: linear-gradient(to top, rgba(13,13,13,.92) 0%, rgba(13,13,13,.25) 35%, rgba(13,13,13,0) 65%);
    }
  }

  /* ---------- Photography treatment ---------- */
  .photo { filter: grayscale(1) contrast(1.08); display: block; width: 100%; height: 100%; object-fit: cover; }
  .photo-soft { filter: grayscale(1) contrast(1.04) brightness(.92); }

  /* ---------- Image failure fallback: flat ink block with the section number ---------- */
  .img-failed { background: #0D0D0D; position: relative; min-height: 180px; }
  .img-failed::after {
    content: attr(data-fallback);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(2rem, 6vw, 4.5rem);
    letter-spacing: .06em;
    color: rgba(244,241,234,.16);
    border: 1px solid rgba(244,241,234,.10);
  }

  /* ---------- Buttons (pills — the only rounded element on the page) ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    border-radius: 999px;
    padding: .9rem 1.6rem;
    min-height: 46px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .16em;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    text-align: center;
    white-space: nowrap;
  }
  .btn-bone   { background: var(--bone); color: var(--ink); border: 1px solid var(--bone); }
  .btn-bone:hover   { background: var(--taupe); border-color: var(--taupe); color: var(--bone); }
  .btn-ink    { background: var(--ink); color: var(--bone); border: 1px solid var(--ink); }
  .btn-ink:hover    { background: var(--taupe); border-color: var(--taupe); }
  .btn-ghost  { background: transparent; color: var(--bone); border: 1px solid rgba(244,241,234,.45); }
  .btn-ghost:hover  { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  .btn-ghost-dark { background: transparent; color: var(--ink); border: 1px solid rgba(13,13,13,.4); }
  .btn-ghost-dark:hover { background: var(--ink); color: var(--bone); }

  /* Text link with a hairline underline that slides */
  .link-line {
    display: inline-flex; align-items: center; gap: .55rem;
    /* Een inline-flex krimpt niet vanzelf: hij neemt de breedte die zijn
       tekst wil hebben. In een smalle footerkolom duwde PERSONAL TRAINING &
       PERFORMANCE de pagina daardoor vijftien pixels opzij. Met deze grens
       breekt de tekst binnen de kolom. */
    max-width: 100%; flex-wrap: wrap;
    /* Een e-mailadres is een woord zonder spaties; zonder dit breekt het
       nergens en duwt het zijn kolom open. */
    overflow-wrap: anywhere;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
    padding-bottom: 4px; border-bottom: 1px solid currentColor;
    transition: color .25s ease, gap .25s ease;
  }
  .link-line:hover { gap: 1rem; color: var(--taupe-on-dark); }

  /* ---------- Focus states (visible everywhere) ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #C9BFA6;
    outline-offset: 3px;
  }
  .on-light a:focus-visible, .on-light button:focus-visible, .on-light input:focus-visible {
    outline-color: #0D0D0D;
  }
  /* Visually hidden until focused — clip() rather than a negative offset, so it
     never contributes to horizontal scroll width on small screens. */
  .skip-link {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .skip-link:focus {
    position: fixed; left: 12px; top: 12px; z-index: 100;
    width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
    background: var(--bone); color: var(--ink); padding: .75rem 1.25rem; font-size: 12px;
    text-transform: uppercase; letter-spacing: .16em; font-weight: 600;
  }

  /* ---------- Vertical rotated label ---------- */
  .vertical-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
  .reveal.is-visible { opacity: 1; transform: none; }
  /* Fly-in variant: comes in from the side instead of rising. Used where a
     row of items should read as one sweep — the three values, the roster.
     Declared after .reveal so it overrides that transform at equal weight. */
  .reveal-fly { transform: translate3d(-46px, 0, 0); }
  .reveal-fly.is-visible { transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal-fly { transform: none !important; } }

  .reveal-d1 { transition-delay: .08s; }
  .reveal-d2 { transition-delay: .16s; }
  .reveal-d3 { transition-delay: .24s; }
  .reveal-d4 { transition-delay: .32s; }
  .reveal-d5 { transition-delay: .40s; }

  /* ---------- Header ---------- */
  #site-header { transition: background-color .35s ease, border-color .35s ease; }
  #site-header.is-solid { background: rgba(13,13,13,.96); border-bottom-color: rgba(244,241,234,.14); }
  .nav-link {
    white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; font-weight: 500; transition: color .2s ease; }
  .nav-link:hover { color: var(--taupe2); }

  /* ---------- Team cards ---------- */
  .team-card .team-photo { filter: grayscale(1) contrast(1.1); transition: filter .5s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
  .team-card:hover .team-photo,
  .team-card:focus-within .team-photo,
  .team-card.is-open .team-photo { filter: grayscale(0) contrast(1.02); transform: scale(1.03); }
  .team-panel {
    position: absolute; inset: 0; z-index: 4;
    background: rgba(13,13,13,.9);
    padding: 1.25rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    opacity: 0; transition: opacity .35s ease;
    pointer-events: none;
    overflow: auto;
  }
  .team-card:hover .team-panel,
  .team-card:focus-within .team-panel,
  .team-card.is-open .team-panel { opacity: 1; }
  .team-toggle { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; }
  .team-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* The credentials panel used to have no affordance — nothing on the card
     said it was there. This badge is that cue, and it steps aside once the
     panel is up. */
  .team-cue {
    position: absolute; z-index: 5; right: .85rem; top: .85rem;
    display: flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem;
    background: rgba(13,13,13,.6); color: var(--bone);
    border: 1px solid rgba(244,241,234,.4);
    font-size: 16px; line-height: 1;
    transition: opacity .3s ease, background-color .3s ease;
  }
  .team-card:hover .team-cue,
  .team-card:focus-within .team-cue,
  .team-card.is-open .team-cue { opacity: 0; }

  /* Portrait carries the name rather than captioning it underneath — the
     grid read as a contact sheet when the type sat outside the frame. */
  .team-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); }
  .team-scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top,
      rgba(13,13,13,.94) 0%, rgba(13,13,13,.72) 22%, rgba(13,13,13,.18) 48%, rgba(13,13,13,0) 68%);
  }
  .team-caption {
    position: absolute; z-index: 6; inset-inline: 0; bottom: 0;
    padding: 1.15rem 1.15rem 1.25rem;
    pointer-events: none;                 /* clicks fall through to .team-toggle */
  }
  .team-name {
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: .92; color: var(--bone);
  }
  .team-no {
    position: absolute; z-index: 3; top: .9rem; left: 1.15rem;
    font-size: 11px; letter-spacing: .22em; color: rgba(244,241,234,.75);
  }
  /* Keep the credentials clear of the name that stays visible below them. */
  .team-panel { padding-bottom: 6.75rem; justify-content: flex-start; padding-top: 1.25rem; }

  .team-chip {
    display: inline-block;
    border: 1px solid rgba(13,13,13,.22);
    padding: .34rem .7rem;
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(13,13,13,.7);
  }

  /* ---------- Converging hairlines in the stats section ---------- */
  .converge path {
    fill: none;
    stroke: rgba(244,241,234,.28);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1);
  }
  .converge.is-drawn path { stroke-dashoffset: 0; }
  .converge path:nth-child(2) { transition-delay: .12s; }
  .converge path:nth-child(3) { transition-delay: .24s; }
  .converge path:nth-child(4) { transition-delay: .36s; }
  @media (prefers-reduced-motion: reduce) {
    .converge path { stroke-dashoffset: 0; transition: none; }
  }

  /* ---------- In cijfers ----------
     Maten, kleuren en afstanden komen een op een uit het aangeleverde
     ontwerp. Wat daarin de rand van het bord is - de buitenmarge van tachtig
     pixels en de achtergrond 111110 - blijft van de pagina, anders springt
     deze sectie uit het raster en uit het zwart van de secties eromheen.
     Alles binnen de sectie staat op de opgegeven waarde. */
  #cijfers {
    --cij-regel:  #2E2D2A;
    --cij-sub:    #BDB8AE;
    --cij-tekst:  #CFCAC0;
    --cij-accent: #B8AE96;
    --cij-lijn:   #6E6A61;
    --cij-label:  #B3AC9D;
  }
  #cijfers .eyebrow {
    font-size: 12px; letter-spacing: .14em; font-weight: 600;
    color: var(--cij-label);
  }
  #cijfers .cijferkop { margin-bottom: 44px; }
  #cijfers .cijferkop h2 { margin-top: 16px; font-size: clamp(2.6rem, 14.9vw, 3.625rem); }

  .cijferraster { display: grid; gap: 44px 0; }
  .cijferlijst { border-bottom: 1px solid var(--cij-regel); }
  .cijferrij {
    display: grid; grid-template-columns: 112px 1fr; gap: 0 20px;
    align-items: center; height: 88px;
    border-top: 1px solid var(--cij-regel);
  }
  .cijfer {
    font-size: 42px; line-height: 1; color: var(--bone);
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .cijfernaam { min-width: 0; }
  .cijfernaam > .display { font-size: 20px; line-height: 1.1; color: var(--bone); }
  .cijfersub { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--cij-sub); }

  /* De lijnen zijn een vaste tekening: de rijen zijn precies honderd pixels
     hoog, dus hun midden ligt op 50, 150 en 250 van een kader van
     driehonderd, en het doel op de middelste. Onder elkaar is er geen ruimte
     voor lijnen; daar neemt een stip voor ONS DOEL die rol over. */
  .doel-lijnen-vak { display: none; }
  .doel-lijnen-breed { display: block; }
  #cijfers .converge path { stroke: var(--cij-lijn); stroke-width: 1.5; }
  .converge .doel-eindstip {
    fill: var(--cij-accent); stroke: none;
    stroke-dasharray: none; stroke-dashoffset: 0;
  }

  .doellabel {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cij-accent);
    margin-bottom: 14px;
  }
  .doelstip { width: 8px; height: 8px; border-radius: 4px; background: var(--cij-accent); flex: none; }
  .doelkop { margin: 0; font-size: 46px; line-height: 1; color: var(--bone); }
  .doelzin { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--cij-tekst); }
  /* De knop is dezelfde pil als overal elders; .doelknop bepaalt alleen nog
     waar hij staat. Hier stond een eigen knop met een hoek van vier pixels en
     een tekst van zeventien, en op de laptop werd hij zelfs een onderstreepte
     tekstlink — de enige knop op de site die er anders uitzag. */
  .doelknop { margin-top: 28px; }

  @media (min-width: 1024px) {
    #cijfers .eyebrow { font-size: 13px; }
    #cijfers .cijferkop { margin-bottom: 72px; }
    #cijfers .cijferkop h2 { margin-top: 20px; font-size: clamp(3.6rem, 7.22vw, 6.5rem); }

    .cijferraster {
      grid-template-columns: 560px 200px minmax(0, 1fr);
      align-items: start; gap: 0;
    }
    .cijferrij { grid-template-columns: 150px 1fr; gap: 0 32px; height: 100px; }
    .cijfer { font-size: 56px; }
    .cijfernaam > .display { font-size: 24px; }
    .cijfersub { margin-top: 4px; font-size: 15px; }

    .doel-lijnen-vak { display: block; }
    .doelblok { padding-top: 88px; padding-left: 24px; max-width: 480px; }
    .doelstip { display: none; }
    .doelkop { font-size: 64px; }
    .doelzin { margin-top: 24px; font-size: 21px; }
    .doelknop { margin-top: 32px; }
  }

  /* ---------- Step timeline ---------- */
  .step-dot { width: 9px; height: 9px; background: var(--taupe); border-radius: 999px; }

  /* ---------- Partner cards ----------
     Logos sit on a bone tile so light and dark marks both read; they
     return to full colour when the card is hovered or focused. */
  .partner-logo { filter: grayscale(1) contrast(1.05); opacity: .72; transition: filter .35s ease, opacity .35s ease; }
  .partner-card:hover .partner-logo,
  .partner-card:focus-within .partner-logo { filter: none; opacity: 1; }
  .partner-card { transition: border-color .35s ease, background-color .35s ease; }
  .partner-card:hover, .partner-card:focus-within { border-color: rgba(244,241,234,.45); background: #141414; }
  .partner-wordmark { letter-spacing: .01em; }

  /* ---------- Meer tonen ----------
     Twaalf clubkaarten en zeven portretten zijn samen veel scherm voor iets
     wat je in een oogopslag wil kunnen overzien. Wat er eerst staat is genoeg
     om te snappen wat het is; de rest komt op een tik. Zonder JS staat alles
     open, dus er gaat niets verloren. */
  .meer-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 46px; padding: .6rem 1.4rem;
    border: 1px solid rgba(244,241,234,.28); border-radius: 999px;
    background: none; color: var(--bone); cursor: pointer;
    font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .meer-knop:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  .on-light .meer-knop { border-color: rgba(13,13,13,.28); color: var(--ink); }
  .on-light .meer-knop:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

  /* Drie rijen van twee op een telefoon, twee rijen van vier op een laptop. */
  .clublijst.is-ingeklapt > li:nth-child(n+7) { display: none; }
  @media (min-width: 1024px) {
    .clublijst.is-ingeklapt > li:nth-child(n+7) { display: block; }
    .clublijst.is-ingeklapt > li:nth-child(n+9) { display: none; }
  }

  /* De ploeg klapt alleen op een telefoon in: naast elkaar is de baan al kort. */
  .team-meer { display: none; margin-top: 1.75rem; }
  @media (max-width: 767px) {
    .team-meer { display: block; }
    .team-rail.is-ingeklapt > li:nth-child(n+5) { display: none; }
  }

  /* ---------- Clubkaart ----------
     Naast elkaar blijft dit de kaart die er stond: een beige vlak met het
     wapen, daaronder de naam en het verhaal. Onder elkaar werd dat een lijst
     van twaalf blokken die samen vier schermen besloeg, terwijl de boodschap
     juist is dat het er twaalf zijn. Op een telefoon staan de wapens daarom
     als een muur van twee kolommen en open je een club om te lezen wie van
     ons er staat. De open stand staat in de opmaak, dus zonder JS is alles
     leesbaar. */
  .club > summary { display: block; list-style: none; cursor: default; }
  .club > summary::-webkit-details-marker { display: none; }
  .club-vlak {
    height: 7rem; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
  }
  .club-naam { display: flex; align-items: flex-end; gap: .75rem; padding: 1.25rem 1.25rem 0; }
  .club-tekst { padding: .85rem 1.25rem 1.25rem; }
  @media (min-width: 768px) {
    .club-naam  { padding: 1.5rem 1.5rem 0; }
    .club-tekst { padding: 1rem 1.5rem 1.5rem; }
    /* Naast elkaar staat alles open en valt er niets te openen. Zonder deze
       regel is de hele kop nog steeds een schakelaar: een klik op het wapen
       of de naam klapte de kaart dicht. De link erin blijft wel een link. */
    .club > summary { pointer-events: none; }
    .club > summary .club-link { pointer-events: auto; }
  }
  .club-plus { display: none; }

  /* De enige club met een eigen adres. De link zat eerder als losse regel
     onder de tekst en brak daarmee het ritme van alle andere kaarten; nu
     draagt de naam hem. */
  .club-link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: inherit; transition: color .25s ease, gap .25s ease;
  }
  .club-link:hover { color: var(--taupe-on-dark); gap: .7rem; }
  /* Onder een duim is een regel van zeventien pixels te weinig. De opvulling
     brengt hem op vierenveertig zonder dat de naam verschuift. */
  @media (hover: none) and (pointer: coarse) {
    .club-link { padding-block: 14px; margin-block: -14px; }
  }
  /* failed logo inside a bone tile: keep the fallback block tile-sized */
  .partner-card .img-failed { min-height: 5rem; }
  .partner-card .img-failed::after { font-size: 1.25rem; }

  /* ---------- Accordion ---------- */
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .acc-plus { transform: rotate(45deg); }
  .acc-plus { transition: transform .3s ease; display: inline-block; }

  /* ---------- Mobile menu ---------- */
  #mobile-menu[hidden] { display: none; }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .team-card:hover .team-photo { transform: none; }
  }

  /* ---------- Team: one portrait on a stage ----------
     The six-up grid read as a contact sheet. Here a single portrait sits on
     the section with its own name running behind it, and the strip below
     changes person. Without JS every panel stays visible, so the section
     degrades to a plain list of six rather than to one. */
  .team-deck { position: relative; }
  .team-panelx + .team-panelx { margin-top: 4rem; }        /* no-JS spacing */
  .js .team-panelx + .team-panelx { margin-top: 0; }

  .team-stage {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 320px;
    padding: clamp(1.5rem, 4vw, 3rem) 0;
  }
  .team-marquee {
    position: absolute; inset-inline: 0; top: 50%; translate: 0 -50%;
    display: flex; gap: 0; width: max-content;
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
    font-size: clamp(4rem, 15vw, 12rem); line-height: .9;
    color: var(--ink); opacity: .12;
    animation: team-slide 34s linear infinite;
    pointer-events: none; user-select: none;
  }
  .team-marquee > span { padding-inline-end: 1ch; }
  @keyframes team-slide { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .team-marquee { animation: none; } }

  .team-shot {
    position: relative; z-index: 2;
    width: clamp(230px, 34vw, 420px); aspect-ratio: 3 / 4;
    overflow: hidden; background: var(--ink);
  }
  .team-shot .photo { width: 100%; height: 100%; object-fit: cover; }

  .team-strip {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-top: 3rem; padding-top: 1.75rem;
    border-top: 1px solid rgba(13,13,13,.18);
  }
  .team-thumb {
    display: block; width: 66px; aspect-ratio: 3 / 4; padding: 0;
    border: 1px solid rgba(13,13,13,.2); background: var(--ink);
    cursor: pointer; overflow: hidden;
    opacity: .45; transition: opacity .3s ease, border-color .3s ease, transform .3s ease;
  }
  .team-thumb .photo { width: 100%; height: 100%; object-fit: cover; }
  .team-thumb:hover, .team-thumb:focus-visible { opacity: .8; }
  .team-thumb.is-active { opacity: 1; border-color: var(--ink); transform: translateY(-3px); }
  .team-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  /* FAQ shares the accordion behaviour of the credentials block. */
  .faq summary { cursor: pointer; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq[open] .acc-plus { transform: rotate(45deg); }
  .faq .acc-plus { display: inline-block; transition: transform .3s ease; }

  /* ---------- De drie waarden ----------
     Naast elkaar in drie kolommen staat alles open en leest het als drie
     korte stukken. Onder elkaar werd dat drie schermen tekst waarin je de
     namen nooit samen zag, terwijl juist die drie namen de boodschap zijn.
     Op een telefoon staan ze daarom als drie regels onder elkaar en klap je
     open wat je wil lezen; de eerste staat al open zodat het blok niet leeg
     oogt. De open stand staat in de opmaak, dus zonder JS is alles leesbaar. */
  .waarde > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1.5rem; }
  .waarde > summary::-webkit-details-marker { display: none; }
  .waarde-naam { flex: 1 1 auto; min-width: 0; }
  .waarde-plus {
    flex: none; margin-left: auto; align-self: center;
    font-size: 1.9rem; line-height: 1; color: var(--taupe);
    transition: transform .3s ease;
  }
  .waarde[open] .waarde-plus { transform: rotate(45deg); }
  @media (min-width: 768px) {
    /* Naast elkaar is er niets te openen, dus is de kop geen knop meer. */
    .waarde > summary { cursor: default; pointer-events: none; }
    .waarde-plus { display: none; }
  }

  /* ---------- Logo marquee ---------- */
  .marq { display: flex; width: max-content; }
  .marq-track {
    display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
    padding-inline-end: clamp(2.5rem, 6vw, 6rem);
    animation: marq 38s linear infinite;
    /* Zonder dit rondt de browser de spoorbreedte af en zie je bij elke
       omwenteling een sprongetje van een halve pixel. */
    will-change: transform;
    flex: none;
  }
  .marq:hover .marq-track,
  .marq:focus-within .marq-track { animation-play-state: paused; }
  .marq-item { flex: none; display: flex; align-items: center; height: 46px; }
  .marq-item .partner-logo { max-height: 46px; width: auto; object-fit: contain; }
  @keyframes marq {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marq-track { animation: none; }
    .marq { width: 100%; overflow-x: auto; }
  }

  /* ---------- Team carousel ----------
     A rail of tall portraits that scrolls sideways. Name and role stay printed
     under every card, so the roster is readable without touching anything; the
     card opens for the credentials. */
  .team-rail {
    display: flex; gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 1.5rem; margin-inline: -1.25rem; padding-inline: 1.25rem;
    /* Het uitlijnen op een snappunt telt de binnenmarge niet mee. Zonder deze
       regel scrolt de goot links weg en klapt de eerste kaart tegen de
       schermrand, met de naam eronder half afgesneden. */
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  .team-rail::-webkit-scrollbar { display: none; }
  .team-cardx { flex: none; width: clamp(230px, 26vw, 310px); scroll-snap-align: start; }
  .team-figure {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden;
    background: var(--ink); border: 1px solid rgba(13,13,13,.18);
  }
  .team-figure .photo {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.1);
    transition: filter .5s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .team-cardx:hover .team-figure .photo,
  .team-cardx:focus-within .team-figure .photo { filter: grayscale(0) contrast(1.02); transform: scale(1.04); }

  .team-info {
    position: absolute; z-index: 3; top: .7rem; right: .7rem;
    display: flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 .6rem;
    background: rgba(13,13,13,.72); color: var(--bone);
    border: 1px solid rgba(244,241,234,.35);
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer; transition: background-color .3s ease, color .3s ease;
  }
  .team-info:hover, .team-info:focus-visible { background: var(--bone); color: var(--ink); }

  /* Credentials komen van onderaan opzetten in plaats van de hele foto af te
     dekken: je blijft het portret zien, de tekst legt zich er alleen overheen. */
  .team-creds {
    position: absolute; inset: auto 0 0 0; z-index: 2; max-height: 100%;
    background: linear-gradient(to top,
      rgba(13,13,13,.96) 0%, rgba(13,13,13,.92) 62%, rgba(13,13,13,0) 100%);
    color: var(--bone);
    padding: 2.75rem 1.1rem 1.15rem; overflow: auto;
    opacity: 0; pointer-events: none; transform: translate3d(0, 12px, 0);
    transition: opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .team-cardx.is-open .team-creds { opacity: 1; pointer-events: auto; transform: none; }

  /* Op een toestel met muis is aanwijzen genoeg; de infoknop blijft bestaan
     voor toetsenbord en verschijnt pas wanneer hij focus krijgt. */
  @media (hover: hover) and (pointer: fine) {
    .team-cardx:hover .team-creds,
    .team-cardx:focus-within .team-creds { opacity: 1; pointer-events: auto; transform: none; }
    .team-info { opacity: 0; transition: opacity .3s ease, background-color .3s ease, color .3s ease; }
    .team-info:focus-visible { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .team-creds { transition: opacity .2s ease; transform: none; }
  }

  .team-rail-nav { display: flex; align-items: center; gap: .75rem; }
  .team-arrow {
    width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(13,13,13,.28); background: transparent; color: var(--ink);
    cursor: pointer; transition: background-color .3s ease, color .3s ease, opacity .3s ease;
  }
  .team-arrow:hover:not(:disabled) { background: var(--ink); color: var(--bone); }
  .team-arrow:disabled { opacity: .3; cursor: default; }

  /* ---------- Recensiekaarten ----------
     De persoon staat vooraan. Het portret loopt over de volle breedte van de
     kaart, daaronder de naam als kop, en pas dan wat hij of zij zegt. Het
     beeld keert terug naar kleur zodra je de kaart aanraakt, net als bij de
     ploeg: dat is de enige plek waar de pagina kleur toelaat, en ze is voor
     de mensen zelf. Op een telefoon bestaat aanwijzen niet, dus daar komt de
     kleur terug zodra de kaart in beeld staat. */
  .review-kaart { overflow: hidden; }
  .review-beeld {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink);
  }
  .review-beeld .photo {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.08);
    transition: filter .6s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  }
  @media (hover: hover) and (pointer: fine) {
    .review-kaart:hover .review-beeld .photo,
    .review-kaart:focus-within .review-beeld .photo {
      filter: grayscale(0) contrast(1.02); transform: scale(1.04);
    }
  }
  @media (hover: none) {
    .review-kaart.is-levend .review-beeld .photo { filter: grayscale(0) contrast(1.02); }
  }
  @media (prefers-reduced-motion: reduce) {
    .review-beeld .photo { transition: filter .3s ease; }
    .review-kaart:hover .review-beeld .photo { transform: none; }
  }

  /* ---------- Footer ---------- */
  .marq-words {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(.95rem, 1.5vw, 1.25rem);
    color: rgba(244,241,234,.5);
    gap: 1.75rem; padding-inline-end: 1.75rem;
    animation-duration: 120s;
  }
  .marq-words li { white-space: nowrap; }
  .marq-rule { width: 100%; overflow: hidden; }
  .marq-rule .marq-track { width: max-content; }

  .foot-door {
    position: relative; display: block;
    transition: background-color .35s ease, border-color .35s ease;
  }
  .foot-door:hover, .foot-door:focus-visible { background: #141414; border-color: rgba(244,241,234,.45); }
  .foot-arrow {
    position: absolute; right: 1.5rem; bottom: 1.5rem; color: var(--bone);
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .foot-door:hover .foot-arrow { transform: translateX(7px); }

  /* De twee knoppen dragen nu het eigen teken van elk netwerk in plaats van
     twee letters: rond, met dezelfde haarlijn als de rest van de footer. */
  .soc {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 999px;
    border: 1px solid rgba(244,241,234,.28); color: rgba(244,241,234,.82);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  .soc svg { width: 19px; height: 19px; display: block; }
  .soc:hover, .soc:focus-visible { background: var(--bone); color: var(--ink); border-color: var(--bone); }

  /* ---------- De juridische pagina's ----------
     Een kolom tekst en niets anders. De koppen staan hier niet in Anton:
     dat is de stem van de site en die hoort niet thuis boven een alinea
     over bewaartermijnen. */
  .juridisch h2 {
    margin: 3rem 0 .9rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(244,241,234,.14);
    font-size: 18px; font-weight: 600; letter-spacing: -.005em;
    color: var(--bone);
  }
  .juridisch p {
    margin: 0 0 1rem;
    max-width: 68ch;
    font-size: 16px; line-height: 1.75;
    color: rgba(244,241,234,.72);
  }
  .juridisch a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
  /* Een telefoonnummer dat middenin afbreekt leest als twee nummers. */
  .juridisch a[href^="tel:"] { white-space: nowrap; }
  .juridisch .verwerkers {
    margin: 0 0 1rem; padding: 0; list-style: none;
    max-width: 68ch; display: grid; gap: .75rem;
  }
  .juridisch .verwerkers li {
    padding-left: 1.1rem; position: relative;
    font-size: 16px; line-height: 1.7; color: rgba(244,241,234,.72);
  }
  .juridisch .verwerkers li::before {
    content: ""; position: absolute; left: 0; top: .72em;
    width: 5px; height: 5px; border-radius: 99px; background: var(--taupe-on-dark);
  }
  .juridisch .verwerkers b { color: var(--bone); font-weight: 600; }
  .juridisch a:hover { color: var(--taupe-on-dark); }

  /* ---------- Voetregels ----------
     De kleine regels in de footer zijn elf pixels hoog. Onder een duim is
     dat te weinig om te raken, dus krijgen ze daar lucht boven en onder die
     de opmaak niet verschuift: wat ze aan vulling winnen, geven ze weer
     weg aan marge. */
  /* Blok, niet inline-blok: het nummer en het adres stonden als twee inline
     blokken achter elkaar op dezelfde regel, en vielen daar met hun lucht
     boven en onder over elkaar heen. */
  .voet-link { display: block; width: fit-content; max-width: 100%; }
  @media (pointer: coarse) {
    /* Elf pixels lucht boven en onder, maar de marge trekt maar zes terug:
       met de volle elf schoven twee links onder elkaar over elkaar heen. */
    .voet-link { padding-block: 14px; margin-block: -6px; }
  }
  /* Clubs without a logo file of their own, set as a wordmark so the strip
     keeps one rhythm. Replace with the real crest once the club supplies it. */
  .marq-word {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    text-transform: uppercase; letter-spacing: .06em;
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    color: rgba(244,241,234,.72);
    white-space: nowrap;
  }

  /* ---------- De vloer: de carrousel ----------
     De collage liet twaalf tegels tegelijk zien en daardoor geen enkele. Nu
     staat er een kaart groot in het midden, met de buren kleiner en
     gedimd erachter en de rest die de rand uit loopt. Zo zie je meteen dat
     er meer is, en krijgt elk beeld zijn eigen moment.

     De breedte van de kaart is de maat waar alles aan hangt. De buren staan
     op achtenzeventig procent van die breedte opzij en op vierentachtig
     procent grootte, dus ze schuiven een stukje achter het midden: dat
     overlappen is wat de rij diepte geeft. Het script zet per kaart de
     verschuiving; zonder JS staan ze in een baan die je zijwaarts scrolt. */
  .vloer-gal { --kw: clamp(210px, 28vw, 390px); }

  .vloer-baan {
    position: relative;
    height: calc(var(--kw) * 1.25);
  }
  /* De kaarten kwamen uit het voorbeeld met ronde hoeken en een zachte slagschaduw.
     Deze site kent geen ronde hoeken buiten de knoppen en geen zachte schaduwen:
     ze is haarlijnen en rechte sneden. Rechte hoeken dus, een haarlijn eromheen,
     en de schaduw alleen onder de kaart die vooraan staat, want die moet loskomen
     van de rest. */
  .vloer-kaart {
    position: absolute; top: 0; left: 50%;
    width: var(--kw); height: calc(var(--kw) * 1.25);
    margin: 0 0 0 calc(var(--kw) / -2);
    overflow: hidden;
    background: var(--ink);
    border: 1px solid rgba(244,241,234,.16);
    transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease, box-shadow .6s ease, border-color .6s ease;
    will-change: transform;
  }
  .vloer-kaart.is-voor {
    border-color: rgba(244,241,234,.34);
    box-shadow: 0 26px 60px rgba(0,0,0,.65);
  }
  .vloer-kaart .photo {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.16);
  }

  /* Zolang het script niet gedraaid heeft, is de baan een gewone rij die je
     zijwaarts kan scrollen. Zo blijft alles bereikbaar zonder JS. */
  .vloer-baan:not(.is-gal) {
    display: flex; gap: 1rem; height: auto;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-inline: 1.25rem; scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  .vloer-baan:not(.is-gal)::-webkit-scrollbar { display: none; }
  .vloer-baan:not(.is-gal) .vloer-kaart {
    position: static; margin: 0; flex: none; scroll-snap-align: start;
  }
  .vloer-baan:not(.is-gal) + .vloer-nav { display: none; }

  .vloer-nav {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    margin-top: 2.25rem;
  }
  .gal-pijl {
    width: 2.75rem; height: 2.75rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(244,241,234,.3); background: transparent; color: var(--bone);
    cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  .gal-pijl:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

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

  /* ---------- Mobiel ---------- */
  /* De vaste kop dekte de titel af bij een sprong naar een anker. Er staat nu
     ook ademruimte onder de kop in plaats van precies de hoogte ervan. */
  section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

  @media (max-width: 640px) {
    /* Op een telefoon leest een regel van 15px prettiger met iets meer lucht,
       en staan de blokken te dicht op elkaar met de desktopmarges. */
    .prose-body { line-height: 1.7; }
    .btn { width: auto; }
    /* Twee knoppen naast elkaar worden 120px breed en breken hun label; onder
       elkaar over de volle breedte blijven ze leesbaar en raakbaar. */
    .btn-stack > .btn { width: 100%; }
    .eyebrow { letter-spacing: .14em; }
  }

  /* Onder de vaste actiebalk hoort ruimte, anders valt de laatste regel eronder. */
  @media (max-width: 767px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  }

  /* De hero draagt al beweging; daar hoeft geen korrel overheen. */
  .hero-still .grain-layer { display: none; }

  /* ---------- Schakelaar tussen de twee onderdelen ---------- */
  /* Twee helften in een omhulsel: de actieve helft is ingevuld, de andere
     wacht. Zo zie je in een oogopslag waar je bent en waar je heen kan. */
  .switch {
    display: inline-flex; align-items: center;
    border: 1px solid rgba(244,241,234,.28);
    border-radius: 999px; padding: 3px;
    background: rgba(13,13,13,.55);
    flex: none;
  }
  .switch-opt {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem .9rem; border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    white-space: nowrap; color: rgba(244,241,234,.6);
    transition: background-color .3s ease, color .3s ease;
  }
  @media (min-width: 640px) { .switch-opt { padding: .5rem 1.05rem; font-size: 11px; } }
  .switch-opt:hover { color: var(--bone); }
  .switch-opt.is-actief { background: var(--bone); color: var(--ink); }
  .switch-opt.is-actief:hover { color: var(--ink); }
  .switch-opt:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Sterren bij een Google-review
   Vijf gevulde sterren, in de kleur van de tekst eromheen zodat ze
   werken op licht en op donker. De rij zelf draagt de betekenis via
   aria-label; de sterren zelf zijn voor de schermlezer onzichtbaar.
   ------------------------------------------------------------------ */
.sterren { display: flex; gap: 3px; align-items: center; }
.sterren svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ------------------------------------------------------------------
   Aanraakmaten op een telefoon
   Op een aanraakscherm is 44 bij 44 pixels de ondergrens waaronder
   mensen ernaast tikken. Gemeten stonden de schakelaar in de balk op
   32 pixels hoog, de tekstlinks op 23 en het woordmerk op 17. Die
   krijgen hieronder lucht, zonder dat er iets verschuift: de extra
   ruimte zit in de opvulling, niet in de rand.
   Alleen op aanraakschermen, zodat de balk op een laptop niet groeit.
   ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  .switch-opt { min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: 12px; }
  .team-info  { min-height: 44px; min-width: 44px; }
  .link-line  { min-height: 44px; padding-top: 10px; padding-bottom: 12px; }
  .nav-link   { min-height: 44px; min-width: 44px; display: inline-flex;
                align-items: center; justify-content: center; font-size: 12px; }
  .team-info span[aria-hidden] { font-size: 12px; }
  .merk-link  { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Onder de 640 pixels staat elfpuntsletter te klein. De navigatie in de
   uitschuiflade en de bovenregels gaan daar een maat omhoog. */
@media (max-width: 640px) {
  .nav-link { font-size: 12px; letter-spacing: .16em; }
  .eyebrow  { font-size: 12px; }
}

/* ------------------------------------------------------------------
   Taalkeuze
   Drie afkortingen naast elkaar, zelfde vorm als de schakelaar tussen
   revalidatie en performance, maar kleiner: het is een hulpmiddel, geen
   hoofdkeuze. De actieve taal staat vol, de andere twee blijven rustig.
   ------------------------------------------------------------------ */
.taal {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, .18);
  background: rgba(13, 13, 13, .45);
  backdrop-filter: blur(6px);
}
.taal-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: .38rem .5rem; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(244, 241, 234, .6);
  transition: background .25s ease, color .25s ease;
}
.taal-opt:hover { color: var(--bone); }
.taal-opt.is-actief { background: var(--bone); color: var(--ink); }
.taal-opt.is-actief:hover { color: var(--ink); }
.taal-opt:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

@media (hover: none) and (pointer: coarse) {
  .taal-opt { min-height: 44px; min-width: 44px; font-size: 12px; }
}

/* ------------------------------------------------------------------
   Tekst in de hero
   Dit is het enige stuk van de site waar tekst op bewegend beeld staat,
   dus het enige stuk waar het contrast per frame verschilt. Gemeten tegen
   de pixels die er werkelijk onder liggen stond de bovenregel op 4,1 tot
   4,4 op 1; de norm voor tekst van dat formaat is 4,5. De lopende tekst
   haalde 5,4 tot 5,7, genoeg op papier maar mager op beeld dat beweegt.

   Iets groter, iets minder ver uit elkaar, en een halve tint helderder.
   De lopende tekst gaat van 400 naar 500: een dunne letter houdt slecht
   stand op een ondergrond die verschuift. Alleen hier, de rest van de
   site staat op een vlakke kleur en heeft dit niet nodig.
   ------------------------------------------------------------------ */
.hero-still .eyebrow {
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(244, 241, 234, .88);
}
.hero-still p.prose-body {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.62;
  color: rgba(244, 241, 234, .94);
}
@media (max-width: 767px) {
  .hero-still p.prose-body { font-size: 16px; }
  .hero-still .eyebrow { font-size: 12.5px; }
}

/* ------------------------------------------------------------------
   De schakelaar op een telefoon
   Met de volledige woorden erin is hij 245 pixels breed. Op een scherm
   van 320 duwt dat de menuknop 83 pixels buiten beeld, gemeten. Onder de
   640 valt daarom de helft weg waar je al op staat: die is er toch alleen
   om te tonen waar je bent, en dat weet je. Wat overblijft is de overstap,
   met het volledige woord erin.
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .switch-opt.is-actief { display: none; }
}

/* Het aanloopwoord maakt van "Performance" een zin: naar Performance. Op de
   allersmalste schermen duwt het de menuknop er twaalf pixels uit, gemeten op
   320, dus daar valt het weg en blijft het woord alleen staan. */
.overstap-aanloop { display: none; }
@media (min-width: 360px) and (max-width: 639px) {
  .overstap-aanloop { display: inline; }
}

/* ------------------------------------------------------------------
   De oproep onder de ervaringen
   Een vlak zwart blok leest als een tussenschot, niet als een uitnodiging.
   Deze band staat daarom op lagen, van achter naar voor: een foto die als
   sfeer dient en niet als onderwerp, een verloop dat de tekstzijde
   dichtmaakt zodat er nooit iets tegen de letters aan ligt, het woord in
   omtreklijnen achter de kop, de korrel die over de hele site loopt, en
   pas dan de tekst.

   Het omtrekwoord is dezelfde greep die eerst onderaan de footer stond. Daar
   herhaalde het alleen de naam die er al boven stond; hier draagt het wel
   iets, want het geeft diepte zonder een tweede boodschap toe te voegen.
   ------------------------------------------------------------------ */
.oproep { isolation: isolate; }
.oproep-beeld img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }

/* Het verloop loopt van de tekstzijde naar buiten, niet van boven naar
   onder: de tekst staat links, dus daar moet het dicht. */
.oproep-waas {
  background:
    linear-gradient(100deg, var(--ink) 0%, rgba(13,13,13,.92) 34%, rgba(13,13,13,.55) 66%, rgba(13,13,13,.72) 100%),
    linear-gradient(to top, rgba(13,13,13,.85) 0%, transparent 42%);
}

.oproep-echo {
  position: absolute;
  left: -0.055em; bottom: -0.2em;
  font-size: clamp(7rem, 27vw, 21rem);
  line-height: .78; letter-spacing: .012em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 234, .17);
  user-select: none; pointer-events: none; white-space: nowrap;
}
@supports not (-webkit-text-stroke: 1px red) {
  .oproep-echo { color: rgba(244, 241, 234, .06); }
}
/* ==================================================================
   DE TELEFOON
   Niet het bureaublad dat krimpt, maar een eigen indeling.

   Eerst stond hier een baan die je opzij veegde: elke reeks - het
   traject, de clubs, de ervaringen, de ploeg - schoof zijwaarts. Dat
   hield de pagina kort, maar het verstopt de inhoud achter een
   beweging die je moet ontdekken, en je kan nooit twee items naast
   elkaar leggen. Die banen zijn eruit. Wat blijft is per reeks een
   vorm die bij die reeks past: het traject als tijdlijn, de clubs als
   lijst met hun wapen ernaast, de ervaringen onder elkaar, de ploeg in
   twee kolommen. De carrousel van de vloer blijft wel schuiven; die is
   beeld en geen tekst.
   ================================================================== */
@media (max-width: 767px) {
  /* ---- Minder lucht tussen de secties ---- */
  /* Zes rem boven en onder is op een scherm van 390 bijna een derde
     scherm leegte per sectie. Op een telefoon leest dichter beter: de
     scheiding komt van de kleurwissel en de lijnen, niet van het gat. */
  body .py-24  { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  body .py-20  { padding-top: 3rem;    padding-bottom: 3rem; }
  body .pt-24  { padding-top: 3.25rem; }
  body .pb-24  { padding-bottom: 3.25rem; }
  body .pt-16  { padding-top: 2.5rem; }
  body .pb-16  { padding-bottom: 2.5rem; }
  body .py-14  { padding-top: 2.25rem;  padding-bottom: 2.25rem; }
  body .mb-14  { margin-bottom: 2rem; }
  body .mt-16  { margin-top: 2.5rem; }
  body .mb-12  { margin-bottom: 1.75rem; }

  /* ---- De dienstenblokken ---- */
  /* De foto stond op vijf staat vier en vulde bijna een half scherm voor
     je de titel zag. Drie staat twee laat de foto zijn werk doen en
     brengt de kop naar boven. */
  body .media-blend { aspect-ratio: 3 / 2; }

  /* ---- De cijfers ---- */
  /* De lijnen die samenkomen staan hier toch al uit; zonder die tussenkolom
     hoort het antwoord direct onder de cijfers, niet een scherm lager. */
  #cijfers .lg\:col-span-5:last-of-type { margin-top: .5rem; }
}

/* ------------------------------------------------------------------
   Telefoon, vervolg: de blokken die na de banen nog te lang waren
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* De dienstenblokken. Kop, tekst en link stonden met veertien rem lucht
     rond elk blok; op een telefoon is dat per blok een half scherm niets.
     De foto is al van vijf staat vier naar drie staat twee gegaan. */
  body .lg\:py-20 { padding-top: 2rem; padding-bottom: 2.25rem; }

  /* Motivatie, passie, empathie stonden als drie koppen van bijna vijf rem
     onder elkaar met veertien rem ertussen: drie schermen voor drie woorden.
     Op een telefoon horen ze als een rij te lezen, niet als drie hoofdstukken. */
  body #aanpak .waarden { gap: 0; }
  body #aanpak .waarde { padding-top: 1.35rem; padding-bottom: 1.35rem; }
  body #aanpak .waarde .display { font-size: clamp(2rem, 11vw, 2.8rem); }

  /* Het woord CREDO met de foto erin vult op een telefoon een heel scherm
     voor er iets gezegd is. Iets kleiner laat het nog steeds groot zijn en
     brengt de zin eronder mee in beeld. */
  body .credo-word { font-size: clamp(3.4rem, 17vw, 7rem); }

  /* De vragenlijst: de kop nam evenveel plaats als drie vragen. */
  body #praktisch .mb-12 { margin-bottom: 1.5rem; }
}

/* ------------------------------------------------------------------
   Het aanbod op een telefoon
   Naast elkaar is elk dienstblok een foto met de tekst ernaast, en dat
   leest vanzelf als een eenheid. Onder elkaar viel die eenheid uit
   elkaar: een foto, dan een muur van lichtgrijze letters op zwart, dan
   weer een foto, vijf keer na elkaar, zonder dat je ergens kon zien
   waar je was of hoeveel er nog kwam.

   Drie dingen zijn veranderd. De tekst staat nu op een eigen vlak dat
   tegen de foto aan sluit, zodat foto en tekst samen een kaart vormen
   met een rand eromheen. De letters staan een maat groter, met meer
   lucht tussen de regels en op hoger contrast: zeventig procent bone op
   zwart haalde de norm wel, maar leest op een telefoon in de zon niet
   prettig. En elke kaart draagt zijn nummer in de bovenregel, zodat je
   weet hoeveel er zijn.

   De link onderaan was een streepje onder een woord. Dat is op een
   muis genoeg en onder een duim te weinig; het is nu een knop over de
   volle breedte.
   ------------------------------------------------------------------ */
#diensten, #aanbod { counter-reset: dienst; }
#diensten > article, #aanbod > article { counter-increment: dienst; }

@media (max-width: 767px) {

  /* Foto en tekst worden samen een kaart. */
  #diensten .grid > .flex,
  #aanbod  .grid > .flex {
    background: #121212;
    border: 1px solid rgba(244,241,234,.12);
    border-top: 0;
    padding: 1.5rem 1.25rem 1.6rem;
  }
  #diensten .media-blend,
  #aanbod  .media-blend { border: 1px solid rgba(244,241,234,.12); border-bottom: 0; }

  /* De bovenregel draagt alleen nog het nummer. De woorden erboven -
     behandeling, opbouw, dry needling, screening - zeiden wat de kop eronder
     al zegt, en bij dry needling en screening stond het woord er letterlijk
     twee keer. Het nummer zegt wel iets: hoeveel er zijn en waar je bent. */
  #diensten article .eyebrow::before,
  #aanbod  article .eyebrow::before {
    content: counter(dienst, decimal-leading-zero);
    color: var(--taupe-on-dark);
  }
  #diensten article .dienst-woord,
  #aanbod  article .dienst-woord { display: none; }
  #diensten article .eyebrow,
  #aanbod  article .eyebrow { margin-bottom: .9rem; }

  /* Groter, luchtiger, en met meer wit in de letter zelf. */
  #diensten article p.prose-body,
  #aanbod  article p.prose-body {
    font-size: 16px;
    line-height: 1.72;
    color: rgba(244,241,234,.84);
  }
  #diensten article p.prose-body:first-of-type,
  #aanbod  article p.prose-body:first-of-type { margin-top: 1.1rem; }

  /* De link blijft een link, zoals naast elkaar. Als kader over de volle
     breedte trok hij meer aandacht dan de dienst erboven, en vijf van die
     kaders onder elkaar maakten van de sectie een rij knoppen. Wat hij wel
     nodig heeft is hoogte om te raken: vierenveertig pixels, gehaald met
     opvulling zodat de streep onder het woord blijft staan. */
  #diensten article .link-line,
  #aanbod  article .link-line {
    margin-top: 1.5rem;
    min-height: 44px;
    padding-top: 12px; padding-bottom: 10px;
  }
  /* De foto eindigde met een verloop naar zwart, want naast elkaar stond de
     tekst ernaast en moest het beeld daarin oplossen. Onder elkaar sluit de
     foto nu tegen het tekstvlak aan; een verloop naar zwart geeft daar een
     donkere strook boven een vlak dat niet zwart is. Rechte snede dus. */
  #diensten .media-blend::after,
  #aanbod  .media-blend::after { background: none; }
}

/* ==================================================================
   DE VIER REEKSEN OP EEN TELEFOON
   Elke reeks krijgt de vorm die erbij hoort in plaats van allemaal
   dezelfde baan die je opzij veegt.
   ================================================================== */
@media (max-width: 767px) {

  /* ---- 03 Traject: een tijdlijn ----
     Vijf stappen met elk een foto van vier staat vijf werden onder
     elkaar vijf schermen. Het gaat hier niet om de foto's maar om de
     volgorde, dus de foto wordt een vierkantje links en de stap staat
     ernaast. Zo zie je in een half scherm dat het er vijf zijn en in
     welke volgorde ze komen. */
  #traject ol { display: block; }
  #traject ol > li {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 1.1rem;
    padding: 1.35rem 0;
    border-top: 1px solid rgba(244,241,234,.14);
  }
  #traject ol > li:last-child { border-bottom: 1px solid rgba(244,241,234,.14); }
  #traject ol > li > *:not(:first-child) { grid-column: 2; }
  #traject ol > li > div:first-child {
    grid-column: 1; grid-row: 1 / span 4;
    aspect-ratio: 1 / 1; margin-bottom: 0;
  }
  /* Het streepje met de stip verbond de kolommen naast elkaar; onder
     elkaar verbindt het niets meer. */
  #traject ol > li > div:nth-child(2) { display: none; }
  #traject ol > li .eyebrow { margin-bottom: .35rem; }
  #traject ol > li h3 { font-size: 1.3rem; }
  #traject ol > li p:last-child { margin-top: .5rem; font-size: 14px; line-height: 1.6; }

  /* ---- 05 Samenwerkingen: een lijst met het wapen ernaast ----
     Twaalf kaarten van elk een logovlak plus tekst zijn onder elkaar
     vier schermen. Waar het om gaat is welke clubs het zijn en wie van
     ons er staat, dus het logo krimpt tot een vierkantje naast de naam
     en het verhaal loopt eronder over de volle breedte. */
  /* Een muur van wapens, twee naast elkaar. Twaalf clubs onder elkaar als
     volle kaarten waren vier schermen; zo staan ze in zes rijen en zie je in
     een oogopslag hoeveel het er zijn. Tik een club open om te lezen wie van
     ons er staat. De lijst draagt Tailwinds .grid, even zwaar als een losse
     klasse en later in de pagina, dus de sectie-id gaat ervoor. */
  #partners ul {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .75rem; align-items: start;
  }
  #partners .partner-card { border-color: rgba(244,241,234,.14); }
  #partners .club > summary { cursor: pointer; }
  #partners .club-vlak { height: 5.25rem; padding: .85rem; }
  #partners .club-vlak .partner-logo { max-height: 100%; }
  #partners .club-naam { padding: .8rem .85rem .85rem; align-items: center; }
  /* De bovenregel mag overal afbreken, want lange woorden verbreedden anders
     hun kolom. In een tegel van 170 pixels leverde dat MEETTECHNOLOG / IE op;
     hier past het woord heel en hoeft die noodgreep niet. */
  #partners .club-naam .eyebrow { overflow-wrap: normal; }
  #partners .club-naam h3 { font-size: 1.02rem; line-height: 1.05; }
  /* Elf en een halve pixel is de ondergrens waaronder deze regels niet meer
     prettig lezen; ze stonden op tien en een half om in de tegel te passen,
     maar met een woord dat heel blijft past het ook zo. */
  #partners .club-naam .eyebrow { font-size: 11.5px; letter-spacing: .1em; margin-top: .3rem; }
  #partners .club-tekst { padding: 0 .85rem 1rem; }
  #partners .club-tekst p { font-size: 13.5px; }
  /* De plus stond er als los teken en las niet als iets waar je op tikt.
     Een rondje eromheen maakt er een knop van. */
  #partners .club-plus {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 26px; height: 26px; border-radius: 99px;
    border: 1px solid rgba(244,241,234,.3);
    font-size: 1rem; line-height: 1; color: var(--taupe-on-dark);
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
  }
  #partners .club[open] .club-plus { background: rgba(244,241,234,.12); }
  #partners .club[open] .club-plus { transform: rotate(45deg); }

  /* ---- 06 Ervaringen: onder elkaar, met een liggend portret ----
     Drie is weinig genoeg om gewoon te stapelen. Het portret staat op
     vier staat vijf, en dat is onder elkaar een half scherm per kaart
     voor er een woord staat; vierkant houdt de persoon groot en brengt
     de naam mee in beeld. */
  #reviews ul { display: block; }
  #reviews .review-kaart + .review-kaart { margin-top: 1.25rem; }
  .review-beeld { aspect-ratio: 1 / 1; }
  .review-beeld .photo { object-position: center 26%; }

  /* ---- 07 Team: twee kolommen ----
     Zeven portretten in een baan lieten er anderhalf tegelijk zien. In
     twee kolommen staat de hele ploeg in vier rijen, en dan zie je dat
     het er zeven zijn. */
  .team-rail {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1rem;
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
  }
  .team-cardx { width: auto; }
  .team-cardx h3 { font-size: 1.15rem; }
  .team-rail-nav { display: none; }
}

/* ------------------------------------------------------------------
   De hero op een telefoon
   Er stond een kader om de tekst. Naast elkaar werkt dat: het kader
   valt binnen het beeld en zet de tekst apart. Op 390 pixels loopt het
   kader tot vlak bij de vier schermranden, en dan is het geen kader
   meer om iets heen maar een rand om het scherm. Weg dus, en de tekst
   valt terug op de goot van de pagina zelf.

   De kop stond op dertien procent van de schermbreedte. Dat is op een
   telefoon ruim vijftig pixels per letterhoogte en bij twee zinnen
   vult hij samen met de alinea het hele scherm, zodat de knoppen
   onderaan wegvallen. Iets kleiner brengt ze mee in beeld.
   ------------------------------------------------------------------ */
/* Het verloop over de hero. Er lagen twee lagen over elkaar, een van onderen
   en een van links, en die tweede stond alleen op breed. Sinds het kader weg
   is staat de tekst lager en verder naar links, en daar haalde de lopende
   tekst op performance nog 4,39 op 1 tegen de norm van 4,5 - gemeten tegen de
   echte beeldpunten erachter, niet geschat. Een laag met stops die tot
   drieenzeventig procent doorloopt en van links dieper begint, brengt hem
   ruim boven de norm zonder dat het beeld dichtslaat. */
.hero-waas {
  background:
    linear-gradient(to top,
      rgba(13,13,13,.97) 0%, rgba(13,13,13,.88) 22%,
      rgba(13,13,13,.55) 48%, rgba(13,13,13,.12) 73%, rgba(13,13,13,0) 88%),
    linear-gradient(to right,
      rgba(13,13,13,.86) 0%, rgba(13,13,13,.34) 42%, rgba(13,13,13,0) 72%);
}

/* Het kader om de herotekst is overal weg. Het deed niets wat de drie
   verlooplagen over het beeld niet al doen, en een haarlijn van een pixel op
   achttien procent dekking is daarvoor de verkeerde sterkte: te zwak om een
   doos te zijn, te aanwezig om niets te zijn. Zonder doos heeft de
   inspringing van achtenveertig pixels ook geen reden meer, dus de tekst
   staat op de goot van de pagina, op een lijn met het adres eronder en met
   elke sectie daarna. */
.hero-still .frame-dark {
  border: 0;
  padding-left: 0; padding-right: 0;
}

@media (max-width: 639px) {
  .hero-still .frame-dark {
    padding-top: .5rem; padding-bottom: 0;
  }
  .hero-still .d-hero { font-size: clamp(2.6rem, 11.2vw, 4rem); }
  .hero-still .eyebrow { margin-bottom: 1.35rem; }
  .hero-still .mt-8 { margin-top: 1.5rem; }
}

/* ------------------------------------------------------------------
   De hero van performance
   Twee dingen die alleen hier spelen. Ten eerste liep de bovenregel
   over de volle breedte en daardoor dwars over het gezicht van de
   atleet; hij breekt nu binnen drie vijfde van de kolom af, ver
   voorbij het hoofd. Ten tweede lag de bankdrukker op laptop precies
   achter de kop. Object-position kon hem niet ver genoeg opzij
   schuiven: de film is breder dan het kader, maar niet breed genoeg -
   er zat maar zestien procent speling in. Een hoger kader maakt de
   film evenredig breder, en pas dan kan hij de gevraagde dertig
   procent naar rechts. De keerzijde is dat hij ook zakt, want het
   kader groeit naar onderen; hij staat nu lager in beeld, waar de
   halter ligt in plaats van waar het plafond was.
   ------------------------------------------------------------------ */
.hero-perf .eyebrow { max-width: 60%; }

@media (min-width: 1024px) {
  .hero-perf #hero-video, .hero-perf #hero-img {
    height: 143%;
    object-position: 0% center;
  }
}

/* ------------------------------------------------------------------
   Het omtrekwoord in de oproepband
   Naast elkaar staat de kop links en staan de knoppen rechts, en het
   woord ligt achter de kop. Onder elkaar staan de knoppen onder de
   kop, en omdat het woord aan de onderkant hing lag het daar achter de
   knoppen. Het hoort achter de zin te liggen, niet achter de actie.
   ------------------------------------------------------------------ */
/* Naast elkaar staat het woord rechts in de band, met wat lucht tot de rand.
   Onder elkaar hoort het precies om de kop heen: even breed als de kop en er
   midden achter. Dat lukt alleen als het zich naar de kop richt en niet naar
   het hele blok, en daarom wordt het omhulsel van de kop daar het ankerpunt
   en op breed juist niet. */
.oproep-echo { left: auto; right: 1rem; }
.oproep-kop { position: static; }
/* De kop draagt .reveal, en dat zet een transform. Een element met een
   transform wordt zelf het ankerpunt voor alles wat er absoluut in staat, ook
   als het static is - dan kan het woord de rand van de sectie nooit bereiken.
   De kop verschijnt hier dus alleen met een verloop, zonder verschuiving. */
.oproep-kop.reveal { transform: none; }

@media (max-width: 1023px) {
  .oproep-kop { position: relative; }
  .oproep-echo {
    right: auto; bottom: auto;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    font-size: clamp(7rem, 38vw, 13rem);
  }
}