/* ==========================================================================
   KINETIKA — gedeeld design systeem
   Eén bron voor alle pagina's. Wijzig hier en het werkt overal door.
   ========================================================================== */

  * { margin:0; padding:0; box-sizing:border-box; }

  /* DISPLAYLETTER — Arial Black staat op Windows en macOS, maar niet op Android en
     Linux. Daar viel alle koptekst terug op een gewone schreefloze in normale dikte.
     Deze familie zoekt daarom eerst het lettertype op het toestel zelf; alleen als het
     daar niet staat wordt Anton opgehaald, dat dezelfde zware displaykarakter heeft.
     Op een toestel mét Arial Black wordt er dus niets gedownload en verandert er niets. */
  @font-face {
    font-family:'KK Display';
    src:local('Arial Black'), local('Arial-Black'), local('ArialBlack'),
        url('../assets/fonts/anton-latin.woff2') format('woff2');
    font-weight:400 900; font-style:normal; font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                  U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face {
    font-family:'KK Display';
    src:local('Arial Black'), local('Arial-Black'), local('ArialBlack'),
        url('../assets/fonts/anton-latin-ext.woff2') format('woff2');
    font-weight:400 900; font-style:normal; font-display:swap;
    unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,
                  U+2113,U+2C60-2C7F,U+A720-A7FF;
  }

  /* PALET B — merkblauw uit het logo, C1-rood als accent */
  :root {
    --blue:#0069b4;   /* officieel merkblauw */
    --sky:#83d0f5;    /* officieel lichtblauw */
    --fire:#E84A30;   /* C1-rood, bewust behouden */
    --navy:#0F172A;
    --base:#F4F6F9;
    --slate:#475569;
    --ink:#1d1d1b;    /* officieel merkzwart */
  }

  body { font-family:'KK Display','Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif; background:var(--base); color:var(--navy); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a { text-decoration:none; }

  /* SCROLL-REVEAL */
  .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
  .reveal.scaleup { transform:scale(.94); }
  .reveal.in { opacity:1; transform:none; }
  .reveal.keepskew.in { transform:skewX(-3deg); }
  .d1 { transition-delay:.05s; } .d2 { transition-delay:.14s; } .d3 { transition-delay:.23s; } .d4 { transition-delay:.32s; }

  /* BOEKINGSKNOPPEN — één vorm, twee kleuren, overal identiek.
     BOEK KINE = gevuld blauw, BOEK TRAINING = gevuld rood, witte rand zodat ze op elke
     achtergrond werken: witte navbalk, donkere foto, navy CTA én de drie gekleurde panelen. */
  .bk, .bt { display:inline-block; padding:13px 26px; font-size:13px; font-weight:800; letter-spacing:1.2px;
             text-transform:uppercase;
             font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
             border:2px solid #fff; transform:skewX(-8deg); text-align:center; white-space:nowrap;
             transition:background .18s, color .18s, border-color .18s; }
  .bk span, .bt span { display:inline-block; transform:skewX(8deg); }
  /* De algemene 'Boek kine' is een knop en geen koppeling: hij opent het
     keuzevenster in plaats van naar een adres te gaan. Zelfde uiterlijk. */
  button.bk, button.bt { cursor:pointer; font-family:inherit; }
  .bk { background:var(--blue); color:#fff; border-color:#fff; }
  .bk:hover { background:#005490; }
  .bt { background:var(--fire); color:#fff; border-color:#fff; }
  .bt:hover { background:#C93D26; }

  /* NAV */
  /* Het logo staat hard tegen de linkerrand, al de rest wordt naar rechts geduwd.
     Met 'space-between' zou de vrije ruimte over drie elementen verdeeld worden zodra
     de menuknop meedoet, en dan schuift alles uit elkaar. */
  .nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); padding:18px 44px; display:flex; align-items:center; justify-content:flex-start; border-bottom:1px solid #E2E8F0; transition:box-shadow .25s, padding .25s; }
  .nav .logo { margin-right:auto; }
  .nav.scrolled { box-shadow:0 2px 18px rgba(15,23,42,.09); padding:12px 44px; }
  /* width:auto is nodig omdat de afbeeldingen een width-attribuut meekregen voor de
     beeldverhouding. Zonder deze regel zou dat attribuut de breedte bepalen en zou het
     logo in een veel te breed vak gecentreerd staan. */
  .nav .logo img { height:32px; width:auto; display:block; transition:height .25s; }
  .nav.scrolled .logo img { height:27px; }
  .nav .logo .monogram { display:none; }
  .navlinks { display:flex; gap:26px; align-items:center; }
  .navlink { font-size:15px; color:var(--navy); font-weight:700; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transition:color .18s; }
  .navlink:hover { color:var(--blue); }
  /* De pagina waar je op staat, krijgt de merkkleur en een schuin streepje eronder. */
  .navlink.active { color:var(--blue); position:relative; }
  .navlink.active::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:3px;
                           background:var(--fire); transform:skewX(-13deg); }

  /* MOBIEL MENU — de navigatielinks verdwijnen onder 920px, dus daar neemt deze knop
     het over. Op desktop staat hij uit. De drie streepjes staan schuin, als de rest. */
  .navknop { display:none; background:none; border:0; padding:8px 4px; cursor:pointer;
             width:44px; height:44px; align-items:center; justify-content:center;
             flex-direction:column; gap:6px; }
  .navknop i { display:block; width:26px; height:3px; background:var(--navy);
               transform:skewX(-13deg); transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s; }
  .navknop[aria-expanded="true"] i:nth-child(1) { transform:translateY(9px) rotate(45deg); }
  .navknop[aria-expanded="true"] i:nth-child(2) { opacity:0; }
  .navknop[aria-expanded="true"] i:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }

  .mobielmenu { display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:49;
                background:var(--navy); padding:96px 22px 78px; overflow-y:auto;
                opacity:0; transition:opacity .25s; }
  .mobielmenu.open { opacity:1; }
  /* Eigen regels overrulen het hidden-attribuut van de browser, dus expliciet herhalen */
  .mobielmenu[hidden] { display:none; }
  .mobiellinks { display:flex; flex-direction:column; }
  .mlink { display:block; padding:20px 0; font-family:'KK Display','Arial Black',sans-serif;
           font-size:clamp(28px,8vw,44px); text-transform:uppercase; letter-spacing:-1px;
           color:#fff; transform:skewX(-3deg); transform-origin:left center;
           border-bottom:1px solid rgba(255,255,255,.14); }
  .mlink.active { color:var(--sky); }
  .mlink:last-child { border-bottom:0; }
  /* Terwijl het menu openstaat mag de pagina eronder niet meescrollen */
  body.menu-open { overflow:hidden; }

  /* HERO */
  .hero { position:relative; overflow:hidden; padding:100px 44px 110px; min-height:88vh; display:flex; flex-direction:column; justify-content:center; }
  /* Hero-achtergrond. Het beginbeeld is een gewone afbeelding; de video ligt eroverheen
     en wordt pas zichtbaar zodra hij kan spelen. Zo krijgt Chrome nooit de kans om
     zijn eigen lege-media-icoontje in het videovlak te tekenen. */
  .hero-bg { position:absolute; inset:0; z-index:-3; will-change:transform; background:#0B1220; }
  .hero-still { position:absolute; inset:0; background:#0B1220 url(../assets/img/hero-sprint-closeup-poster.jpg) center 50%/cover no-repeat; }
  .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%;
    opacity:0; transition:opacity .5s ease; }
  .hero-video.klaar { opacity:1; }
  .hero-tint { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(11,18,32,.46) 0%,rgba(11,18,32,.30) 45%,rgba(11,18,32,.72) 100%); }
  /* De schuinte duwt de onderrand van de balk naar links met hoogte/2 x tan(13°). Bij een
     hero van 1300px is dat 150px, veel meer dan de 70px die er vroeger uitstak, waardoor de
     rechteronderhoek open bleef. Overhang en breedte gaan met hetzelfde bedrag omhoog, dus
     de linkerrand van de balk blijft op precies dezelfde plaats staan. */
  .hero-flash { position:absolute; top:0; bottom:0; right:-230px; width:310px; background:var(--blue); transform:skewX(-13deg); opacity:.92; z-index:-1; transition:transform 1s cubic-bezier(.22,1,.36,1); }
  .hero-flash2 { position:absolute; top:0; bottom:0; right:75px; width:22px; background:var(--fire); transform:skewX(-13deg); opacity:.95; z-index:-1; transition:transform 1.1s cubic-bezier(.22,1,.36,1) .1s; }
  .hero-flash.pre, .hero-flash2.pre { transform:skewX(-13deg) translateX(160%); }
  .eyebrow { color:#fff; font-size:clamp(14px,1.35vw,19px); font-weight:800; letter-spacing:4.5px; text-transform:uppercase; margin-bottom:30px; font-family:-apple-system,sans-serif; opacity:0; transform:translateY(10px); transition:opacity .6s .35s, transform .6s .35s; }
  .hero.loaded .eyebrow { opacity:1; transform:none; }
  .hero-main { display:flex; align-items:center; gap:56px; flex-wrap:wrap; }
  .hero h1 { font-size:clamp(56px,9.5vw,148px); line-height:.88; letter-spacing:-4px; text-transform:uppercase; color:#fff; }
  .hero h1 .line { display:block; opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
  .hero.loaded h1 .l1 { opacity:1; transform:none; transition-delay:.20s; }
  .hero.loaded h1 .l2 { opacity:1; transform:none; transition-delay:.34s; }
  .hero.loaded h1 .l3 { opacity:1; transform:none; transition-delay:.48s; }
  .hero h1 .l2 { color:var(--blue); }
  .hero h1 .l3 { color:var(--fire); }
  .hero-cta { display:flex; flex-direction:column; gap:14px; opacity:0; transform:translateY(18px); transition:opacity .7s .62s, transform .7s .62s; }
  .hero.loaded .hero-cta { opacity:1; transform:none; }
  /* Vanaf laptopbreedte schuiven de knoppen naar rechts, weg van de loper in beeld,
     maar ze stoppen ruim voor de blauwe en rode schuine band aan de rechterrand. */
  @media (min-width:921px) {
    .hero-cta { margin-left:auto; margin-right:clamp(150px,12vw,220px); }
  }
  .scroll-hint { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:11px; letter-spacing:3px; font-weight:700; font-family:-apple-system,sans-serif; }

  /* WOORDBAND */
  .marq { background:var(--navy); overflow:hidden; padding:16px 0; border-top:3px solid var(--fire); }
  .marq .track { display:flex; align-items:center; white-space:nowrap; animation:roll 26s linear infinite; width:max-content; }
  .marq .groep { display:flex; align-items:center; gap:34px; margin-right:34px; }
  .marq span { font-size:15px; letter-spacing:5px; color:#fff; text-transform:uppercase; }
  .marq span.o { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.55); }
  /* Monogram als scheidingsteken tussen de woorden */
  .marq img { height:15px; width:auto; display:block; flex-shrink:0; opacity:.9; }
  @keyframes roll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

  /* REFERENTIES — vervangt de oude vertrouwensstrook met placeholders */
  .refs { background:#fff; padding:74px 44px; border-bottom:1px solid #E2E8F0; }
  .refs .wrap { max-width:1240px; margin:0 auto; text-align:center; }
  .refs .mark { justify-content:center; }
  .refs h2 { font-size:clamp(32px,4.4vw,58px); text-transform:uppercase; letter-spacing:-1.5px; transform:skewX(-3deg); }
  .refs .duiding { font-size:17px; margin-top:22px; }
  /* Vast op 4 en 2 kolommen: met 8 tegels vullen de rijen zich altijd volledig,
     op geen enkel schermformaat blijft er een gat over. */
  .refgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
             max-width:940px; margin:44px auto 0; }
  .refkaart { position:relative; overflow:hidden; aspect-ratio:1/1; }
  @media (max-width:1080px) { .refgrid { grid-template-columns:repeat(2,1fr); } }
  .refkaart img { width:100%; height:100%; object-fit:cover; display:block;
                  transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .refkaart:hover img { transform:scale(1.06); }
  .refkaart::after { content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(11,18,32,.88) 0%, rgba(11,18,32,.30) 45%, rgba(11,18,32,0) 75%); }
  .reftekst { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:13px 13px 12px; text-align:left; }
  .reftekst .naam { font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:-.3px; transform:skewX(-3deg); line-height:1.12; }
  .reftekst .tak { margin-top:5px; font-size:10px; letter-spacing:1.8px; color:var(--sky); font-weight:800;
                   text-transform:uppercase; font-family:-apple-system,sans-serif; }

  /* METHODE */
  .methode { padding:110px 44px 62px; text-align:center; }
  /* SECTIEMARKERING — schuine streep in plaats van een labelblokje */
  .mark { display:flex; gap:5px; margin-bottom:30px; }
  .mark i { display:block; height:7px; width:58px; background:var(--fire); transform:skewX(-13deg); transform-origin:left center; }
  .mark i + i { width:18px; background:var(--blue); }
  .reveal.mark.in { transform:none; }
  .reveal.mark i { transform:skewX(-13deg) scaleX(0); transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .reveal.mark.in i { transform:skewX(-13deg) scaleX(1); }
  .reveal.mark.in i + i { transition-delay:.16s; }
  .methode .mark, .traject-intro .mark, #locaties .mark { justify-content:center; }
  /* Eén maat voor alle sectiekoppen, met dezelfde schuinte van -3 graden als elders */
  .methode h2 { font-size:clamp(32px,4.4vw,58px); line-height:1; letter-spacing:-1.5px; text-transform:uppercase; max-width:1000px; margin:0 auto; transform:skewX(-3deg); }
  /* Voor koppen met een vaste regelafbreking: ruimte genoeg zodat de regels niet
     nog een tweede keer breken. */
  .methode h2.breed { max-width:1280px; }
  h2 .accent { color:var(--blue); }
  h2 .red { color:var(--fire); }
  .duiding { max-width:840px; margin:34px auto 0; font-size:19px; line-height:1.35; letter-spacing:-.5px; text-transform:uppercase; color:var(--slate); }
  /* Op brede schermen mag de ondersteunende tekst verder uitlopen; anders staan er
     vier korte regels onder een kop die over de volle breedte loopt. */
  @media (min-width:1280px) { .duiding { max-width:1180px; } }
  @media (min-width:1700px) { .duiding { max-width:1320px; } }

  /* SECTIES */
  .section { padding:96px 44px; max-width:1240px; margin:0 auto; }
  .section h2 { font-size:clamp(32px,4.4vw,58px); text-transform:uppercase; letter-spacing:-1.5px; transform:skewX(-3deg); margin-bottom:14px; }
  .traject-intro { padding:48px 44px 54px; text-align:center; }
  /* Locatiekop gecentreerd zoals de andere secties; de kaarten blijven links uitgelijnd */
  #locaties > h2 { text-align:center; }

  /* PIJLERPANELEN */
  .panel { position:relative; padding:58px 44px; overflow:hidden; }
  .panel .in-w { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; gap:38px; align-items:center; }
  /* Paneeltekst volgt de achtergrond: wit op blauw en rood, zwart op lichtblauw.
     Lopende tekst altijd vet — 19px bold telt als grote tekst, drempel 3:1.
     Contrast: 01 wit/blauw 5,7:1 · 02 zwart/lichtblauw 10,5:1 · 03 wit/rood 3,9:1 */
  .panel .num { font-size:76px; line-height:1; color:rgba(15,23,42,.24); }
  .panel h3 { font-size:clamp(26px,3.1vw,40px); text-transform:uppercase; letter-spacing:-1px; color:var(--navy); transform:skewX(-3deg); }
  .panel p { margin-top:16px; max-width:660px; font-size:19px; line-height:1.55; font-weight:700; font-family:-apple-system,sans-serif; color:var(--navy); }
  .panel .reveal.in { transform:none; }
  /* De pijlerwoorden schuiven bij het scrollen dynamisch binnen, als echo van de hero */
  .panel h3.reveal { opacity:0; transform:translateX(-80px) skewX(-15deg); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
  .panel h3.reveal.in { opacity:1; transform:skewX(-3deg); }
  /* Knoptekst in de panelen krijgt dezelfde schuinte als de koppen.
     De knop staat op -8°; +5° op het label geeft netto -3°, gelijk aan h3. */
  .panel .bk span, .panel .bt span { transform:skewX(5deg); }
  /* Secundaire doorverwijzing naar de aanpakpagina — bewust lichter dan de boekknop */
  .panel .verder { display:inline-block; margin-top:14px; font-size:14px; font-weight:800; color:var(--navy);
                   font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
                   border-bottom:2px solid rgba(15,23,42,.45); padding-bottom:3px;
                   transition:border-color .18s; }
  .panel .verder:hover { border-bottom-color:var(--navy); }
  .panel .verder .pijl { display:inline-block; margin-left:6px; transition:transform .18s; }
  .panel .verder:hover .pijl { transform:translateX(4px); }
  .panel.p1 { background:var(--blue); clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%); padding-top:calc(58px + 3vw); }
  .panel.p2 { background:var(--sky); margin-top:-3vw; clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%); padding-top:calc(58px + 3vw); }
  .panel.p3 { background:var(--fire); margin-top:-3vw; clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%); padding-top:calc(58px + 3vw); }
  /* 01 en 03 in het wit, 02 blijft zwart */
  .panel.p1 .num, .panel.p3 .num { color:rgba(255,255,255,.34); }
  .panel.p1 h3, .panel.p3 h3 { color:#fff; }
  .panel.p1 p, .panel.p3 p { color:#fff; }
  .panel.p1 .verder, .panel.p3 .verder { color:#fff; border-bottom-color:rgba(255,255,255,.55); }
  .panel.p1 .verder:hover, .panel.p3 .verder:hover { border-bottom-color:#fff; }

  /* LOCATIES */
  .loc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; margin-top:34px; }
  .loc-card { background:#fff; overflow:hidden; }
  .loc-banner { position:relative; aspect-ratio:16/9; display:flex; align-items:flex-end; overflow:hidden; }
  /* Blaasveld: echte foto van de praktijk, met een blauwe waas erover zodat de kaart
     herkenbaar het blauwe veld blijft en de naam leesbaar staat. */
  .loc-banner.blaasveld { background:var(--blue); }
  .loc-banner.blaasveld::before { content:""; position:absolute; inset:0;
    background:url(../assets/img/locatie-blaasveld.jpg) center 58%/cover;
    transition:transform .7s cubic-bezier(.22,1,.36,1); }
  .loc-banner.blaasveld::after { content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(3,42,70,.94) 0%, rgba(0,105,180,.60) 55%, rgba(0,105,180,.34) 100%); }
  .loc-card:hover .loc-banner.blaasveld::before { transform:scale(1.06); }
  /* Willebroek: zelfde behandeling, met een rode waas zodat de twee kaarten een paar blijven. */
  .loc-banner.willebroek { background:var(--fire); }
  .loc-banner.willebroek::before { content:""; position:absolute; inset:0;
    background:url(../assets/img/locatie-willebroek.jpg) center 50%/cover;
    transition:transform .7s cubic-bezier(.22,1,.36,1); }
  .loc-banner.willebroek::after { content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(96,24,12,.94) 0%, rgba(232,74,48,.60) 55%, rgba(232,74,48,.34) 100%); }
  .loc-card:hover .loc-banner.willebroek::before { transform:scale(1.06); }
  .loc-overlay { position:relative; z-index:2; padding:20px 22px; }
  .loc-overlay .name { font-size:34px; text-transform:uppercase; color:#fff; letter-spacing:-1px; transform:skewX(-3deg); }
  .loc-badge { position:absolute; z-index:3; top:16px; right:16px; background:#fff; color:var(--navy); font-size:11px; font-weight:800; letter-spacing:2px; padding:6px 12px; transform:skewX(-8deg); font-family:-apple-system,sans-serif; }
  .loc-badge span { display:inline-block; transform:skewX(8deg); }
  .loc-body { padding:22px; }
  .loc-body .txt { font-size:15px; line-height:1.6; color:var(--slate); font-family:-apple-system,sans-serif; }
  .loc-body .more { display:inline-block; margin-top:16px; font-size:13px; font-weight:800; color:var(--blue); font-family:-apple-system,sans-serif; }

  /* CTA */
  .cta { position:relative; background:var(--navy); padding:120px 44px; text-align:center; overflow:hidden; clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%); }
  .cta-slash { position:absolute; top:0; bottom:0; right:-60px; width:170px; background:var(--fire); transform:skewX(-13deg); }
  .cta-slash2 { position:absolute; top:0; bottom:0; right:118px; width:20px; background:var(--blue); transform:skewX(-13deg); }
  .cta h2 { position:relative; font-size:clamp(44px,6.5vw,88px); color:#fff; text-transform:uppercase; letter-spacing:-2px; transform:skewX(-3deg); }
  .cta h2.in { transform:skewX(-3deg); }
  .cta p { position:relative; max-width:1160px; margin:24px auto 0; font-size:16px; line-height:1.6; color:#CBD5E1; font-family:-apple-system,sans-serif; }
  .cta-row { position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
  /* Zelfde typografie als de regel boven de hero-titel */
  .fmc { position:relative; margin-top:42px; color:#fff; font-size:clamp(14px,1.35vw,19px); font-weight:800; letter-spacing:4.5px; text-transform:uppercase; font-family:-apple-system,sans-serif; }

  /* FOOTER */
  .footer { background:var(--navy); color:#94A3B8; }
  .footer-top { max-width:1240px; margin:0 auto; padding:64px 44px 44px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:38px; }
  .footer-col .lg img { height:22px; width:auto; margin-bottom:16px; display:block; }
  .footer-col p { font-size:13px; line-height:1.7; font-family:-apple-system,sans-serif; }
  .footer-col h3 { color:#fff; font-size:12px; letter-spacing:3px; margin-bottom:14px; text-transform:uppercase; }
  .footer-col a { display:block; font-size:13px; color:#94A3B8; line-height:2; font-family:-apple-system,sans-serif; }
  .footer-col a:hover { color:#fff; }
  .footer-col p a.mail { display:inline; font-size:inherit; line-height:inherit; color:#fff; border-bottom:1px solid rgba(255,255,255,.35); }
  .footer-col p a.mail:hover { border-bottom-color:#fff; }
  /* #94A3B8 in plaats van #64748B: dat haalt 4,9:1 op de donkere voettekst, waar de
     oude kleur met 3,8:1 onder de norm zat. */
  .footer-bottom { border-top:1px solid #1E293B; padding:20px 44px; text-align:center; font-size:12px; color:#94A3B8; font-family:-apple-system,sans-serif; }
  .footer-bottom a { color:#94A3B8; border-bottom:1px solid #334155; padding-bottom:1px; transition:color .18s, border-color .18s; }
  .footer-bottom a:hover { color:#fff; border-bottom-color:var(--sky); }

  /* MOBIELE BOEKBALK */
  .bookbar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; }
  .bookbar a, .bookbar button { flex:1; padding:16px 8px; border:0; cursor:pointer; text-align:center; font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; font-family:-apple-system,sans-serif; }
  .bb-kine { background:var(--blue); color:#fff; }
  .bb-training { background:var(--fire); color:#fff; border-left:2px solid #fff; }

  @media (max-width:920px) {
    .nav, .nav.scrolled { padding:14px 18px; }
    .navlink { display:none; }
    /* Woordmerk is 171px breed en duwt de boekknoppen van het scherm; het monogram
       doet hetzelfde werk in 26px. */
    .nav .logo .woordmerk { display:none; }
    .nav .logo .monogram { display:block; height:30px; }
    .nav.scrolled .logo .monogram { height:26px; }
    .nav .bk, .nav .bt { padding:11px 14px; font-size:11px; letter-spacing:.8px; }
    .navknop { display:flex; margin-left:6px; }
    .mobielmenu { display:block; }
    .marq .groep { gap:26px; margin-right:26px; }
    .hero { padding:70px 22px 96px; min-height:auto; }
    .hero h1 { letter-spacing:-2px; }
    .refs { padding:52px 22px; }
    .refgrid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .reftekst { padding:12px 12px 11px; }
    .reftekst .naam { font-size:15px; }
    .methode { padding:70px 22px 40px; } .duiding { font-size:16px; }
    .traject-intro { padding:34px 22px 38px; }
    .section { padding:70px 22px; }
    .panel { padding:46px 22px; }
    .panel .in-w { grid-template-columns:1fr; gap:14px; }
    .panel .num { font-size:54px; }
    .panel .bk, .panel .bt { justify-self:start; }
    .cta { padding:90px 22px; }
    .footer-top { padding:48px 22px 32px; }
    .bookbar { display:flex; }
    body { padding-bottom:54px; }
  }

  @media (prefers-reduced-motion:reduce) {
    .marq .track { animation:none; }
    .reveal, .hero h1 .line, .hero-cta, .eyebrow { opacity:1 !important; transform:none !important; transition:none !important; }
    .hero-flash.pre, .hero-flash2.pre { transform:skewX(-13deg); }
    .panel h3.reveal { transform:skewX(-3deg) !important; }
    .reveal.mark i { transform:skewX(-13deg) !important; }
  }

/* ==========================================================================
   SUBPAGINA'S — hero zonder video, en de pijlerblokken in het lang
   ========================================================================== */

/* Hero van een binnenpagina: zelfde taal als de homepage, maar compacter
   en zonder bewegend beeld, zodat de inhoud sneller in beeld komt. */
.phero { position:relative; overflow:hidden; background:var(--navy); padding:150px 44px 96px; }
.phero::before { content:""; position:absolute; z-index:2; top:0; bottom:0; right:-70px; width:150px;
                 background:var(--blue); transform:skewX(-13deg); opacity:.92; }
.phero::after  { content:""; position:absolute; z-index:2; top:0; bottom:0; right:75px; width:22px;
                 background:var(--fire); transform:skewX(-13deg); }
/* Geen maximumbreedte en niet gecentreerd, precies zoals .hero-main op de homepage.
   Zo staan titel en knoppen op beide pagina's op dezelfde afstand van de schermrand. */
.phero .in-w { position:relative; z-index:3;
               display:flex; align-items:center; gap:56px; flex-wrap:wrap; }
.phero .kop { flex:1 1 460px; min-width:0; }
/* Boekknoppen rechts, net als op de homepage; ze stoppen voor de schuine banden. */
.phero .phero-cta { display:flex; flex-direction:column; gap:14px; }
@media (min-width:921px) {
  .phero .phero-cta { margin-left:auto; margin-right:clamp(150px,12vw,220px); }
}
/* Optionele videoachtergrond. Het stilstaande beeld komt via --still uit de pagina zelf,
   zodat elke subpagina zijn eigen beeld kan meegeven zonder extra CSS. */
.phero .hero-bg { position:absolute; inset:0; z-index:0; background:#0B1220; }
.phero .hero-still { position:absolute; inset:0; background:#0B1220 var(--still) center 50%/cover no-repeat; }
.phero .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; }
.phero .hero-tint { position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(11,18,32,.62) 0%,rgba(11,18,32,.50) 45%,rgba(11,18,32,.80) 100%); }
.phero .eyebrow { position:static; opacity:1; transform:none; margin-bottom:24px; }
.phero h1 { font-size:clamp(36px,5.6vw,78px); line-height:.96; letter-spacing:-2.5px;
            text-transform:uppercase; color:#fff; }
/* Vaste regelval: de zin loopt over drie regels, ongeacht de schermbreedte. */
.phero h1 .line { display:block; }
.phero h1 .red { color:var(--fire); }
.phero h1 .accent { color:var(--blue); }
.phero .intro { margin-top:28px; max-width:720px; font-size:21px; line-height:1.55; color:#CBD5E1;
                font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
/* Een korte inleiding mag op brede schermen breder dan de standaard 720px,
   zodat een enkel woord niet alleen op een tweede regel belandt. */
@media (min-width:1200px) { .phero .intro.eenregel { max-width:860px; } }

/* Een pijler in het lang: kleurband links, inhoud rechts */
.pijler { padding:88px 44px; scroll-margin-top:90px; }
.pijler .in-w { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:180px 1fr; gap:52px; align-items:start; }
.pijler .cijfer { font-size:clamp(64px,7vw,104px); line-height:.85; letter-spacing:-4px; }
.pijler h2 { font-size:clamp(30px,4vw,54px); text-transform:uppercase; letter-spacing:-1.5px;
             transform:skewX(-3deg); line-height:1; color:var(--navy); }
.pijler .claim { margin-top:18px; max-width:880px; font-size:24px; line-height:1.3; letter-spacing:-.4px;
                 text-transform:uppercase; }
.pijler .tekst { margin-top:22px; max-width:880px; font-size:21px; line-height:1.65; color:var(--slate);
                 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
/* 'Voor jou als...' krijgt een eigen blok met gekleurde rand: het is de plek waar
   de bezoeker zichzelf herkent, dus het mag niet wegvallen in de lopende tekst. */
.pijler .voorjou { margin-top:40px; max-width:920px; padding:28px 30px; border-left:6px solid;
  position:relative; overflow:hidden; isolation:isolate; }
/* Het monogram als watermerk rechts in de box, in een eenkleurige versie per pijler.
   z-index -1 houdt het achter de tekst maar voor de achtergrond van de box. */
.pijler .voorjou::after { content:""; position:absolute; z-index:-1; pointer-events:none;
  right:22px; top:50%; transform:translateY(-50%);
  width:min(46%,280px); height:min(78%,184px); opacity:.16;
  background-repeat:no-repeat; background-position:right center; background-size:contain; }
.pijler.k1 .voorjou::after { background-image:url(../assets/img/watermerk-kk-blue.svg); }
.pijler.k2 .voorjou::after { background-image:url(../assets/img/watermerk-kk-sky.svg); }
.pijler.k3 .voorjou::after { background-image:url(../assets/img/watermerk-kk-fire.svg); }
.pijler .voorlabel { margin:0 0 18px; font-size:17px; font-weight:800; letter-spacing:1.2px;
                     text-transform:uppercase; font-family:-apple-system,sans-serif; }
.pijler ul { list-style:none; }
.pijler ul li { position:relative; padding-left:32px; margin-bottom:15px; font-size:21px; line-height:1.55;
                color:var(--navy); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.pijler ul li:last-child { margin-bottom:0; }
.pijler ul li::before { content:""; position:absolute; left:0; top:.58em; width:18px; height:5px;
                        transform:skewX(-13deg); }
.pijler .knop-rij { margin-top:32px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
/* Boekknoppen binnen de praktische box staan dichter bij elkaar dan een vrije knoprij */
.pijler .voorjou .knop-rij.inbox { margin-top:26px; gap:14px; }
/* Secundaire doorverwijzing naar het aanbod, bewust lichter dan de boekknop */
.pijler .verder { font-size:15px; font-weight:800; color:var(--navy);
                  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
                  border-bottom:2px solid; padding-bottom:3px; transition:opacity .18s; }
.pijler .verder .pijl { display:inline-block; margin-left:7px; transition:transform .18s; }
.pijler .verder:hover .pijl { transform:translateX(4px); }
.pijler.k1 .verder { border-color:var(--blue); }
.pijler.k2 .verder { border-color:#0a6e9e; }
.pijler.k3 .verder { border-color:var(--fire); }

.pijler.k1 { background:#fff; }
.pijler.k1 .cijfer { color:rgba(0,105,180,.16); } .pijler.k1 .claim { color:var(--blue); }
.pijler.k1 .voorlabel { color:var(--blue); } .pijler.k1 ul li::before { background:var(--blue); }
.pijler.k1 .voorjou { border-color:var(--blue); background:rgba(0,105,180,.055); }
.pijler.k2 { background:var(--base); }
.pijler.k2 .cijfer { color:rgba(4,52,79,.16); } .pijler.k2 .claim { color:#0a6e9e; }
.pijler.k2 .voorlabel { color:#0a6e9e; } .pijler.k2 ul li::before { background:var(--sky); }
.pijler.k2 .voorjou { border-color:var(--sky); background:#fff; }
.pijler.k3 { background:#fff; }
.pijler.k3 .cijfer { color:rgba(232,74,48,.18); } .pijler.k3 .claim { color:var(--fire); }
.pijler.k3 .voorlabel { color:var(--fire); } .pijler.k3 ul li::before { background:var(--fire); }
.pijler.k3 .voorjou { border-color:var(--fire); background:rgba(232,74,48,.05); }

/* Slotregel met de merkbelofte */
.fmc-blok { background:var(--base); padding:84px 44px; text-align:center; }
.fmc-blok .zin { font-size:clamp(26px,4.4vw,52px); letter-spacing:2px; color:var(--fire);
                 text-transform:uppercase; transform:skewX(-4deg); line-height:1.1; }
.fmc-blok p { max-width:960px; margin:24px auto 0; font-size:20px; line-height:1.65; color:var(--slate);
              font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

@media (max-width:920px) {
  .phero { padding:110px 22px 64px; }
  /* De langste regel is 'Geen klassieke fysio.'; deze maat houdt hem heel op 375px. */
  .phero h1 { font-size:clamp(26px,6.6vw,52px); letter-spacing:-1.2px; }
  .phero .in-w { gap:30px; }
  .phero .phero-cta { flex-direction:row; flex-wrap:wrap; }
  .phero .intro { font-size:18px; }
  .pijler .tekst { font-size:18px; }
  .pijler ul li { font-size:18px; }
  .pijler .voorjou { padding:20px 20px; }
  .pijler .voorlabel { font-size:15px; }
  .pijler .claim { font-size:20px; }
  .pijler { padding:56px 22px; }
  .pijler .in-w { grid-template-columns:1fr; gap:14px; }
  .pijler .cijfer { font-size:56px; }
  .fmc-blok { padding:60px 22px; }
}

/* Gecentreerde alinea's breken in gelijke regels; geen los woord op een eigen regel. */
.duiding, .fmc-blok p, .cta p, .refs .duiding { text-wrap:balance; }

/* ==========================================================================
   PIJLERBEELDEN — twee uitwerkingen, elk in de kleur van zijn eigen pijler
   ========================================================================== */

/* --- OPTIE 2: staand beeld naast de tekst, om en om links en rechts --- */
.pijler.beeld-zij .in-w { grid-template-columns:1fr 420px; gap:60px; align-items:center; }
.pijler.beeld-zij .kolom .cijfer { font-size:clamp(52px,5vw,76px); line-height:.9; margin-bottom:14px; }
.pijler.beeld-zij .tekst,
.pijler.beeld-zij .voorjou,
.pijler.beeld-zij .claim { max-width:none; }
.pijler.beeld-zij .beeld { aspect-ratio:4/5; overflow:hidden; }
.pijler.beeld-zij .beeld img { width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.07); transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.pijler.beeld-zij .beeld.in img { transform:scale(1); }
.pijler.beeld-zij.omgekeerd .in-w { grid-template-columns:420px 1fr; }
.pijler.beeld-zij.omgekeerd .beeld { order:-1; }

@media (max-width:920px) {
  .pijler.beeld-zij .in-w,
  .pijler.beeld-zij.omgekeerd .in-w { grid-template-columns:1fr; gap:26px; }
  .pijler.beeld-zij.omgekeerd .beeld { order:0; }
  /* Zodra het beeld onder de tekst schuift loopt het over de volle breedte, en bij 4:5
     wordt de hoogte dan 1,25x de breedte: op een tablet van 768px een foto van 905px hoog.
     Daarom hier dezelfde bovengrens als de kolom op desktop. */
  .pijler.beeld-zij .beeld { max-width:420px; }
}

/* Kleurkoppeling met de homepage: schuin kleurvlak achter het beeld, in de pijlerkleur.
   Het knippen voor de hover-zoom zit op .kader, zodat het kleurvlak eruit mag steken. */
.pijler.beeld-zij { overflow:hidden; }
.pijler.beeld-zij .beeld { position:relative; overflow:visible; aspect-ratio:auto; }
.pijler.beeld-zij .beeld::before { content:""; position:absolute; inset:34px -34px -34px 34px;
  transform:skewX(-5deg); }
.pijler.beeld-zij .beeld::after { content:""; position:absolute; top:60px; bottom:-52px; right:-52px;
  width:14px; background:var(--fire); transform:skewX(-5deg); }
.pijler.beeld-zij .kader { position:relative; aspect-ratio:4/5; overflow:hidden; }
.pijler.beeld-zij .kader img { width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.07); transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.pijler.beeld-zij .beeld.in .kader img { transform:scale(1); }
.pijler.k1 .beeld::before { background:var(--blue); }
.pijler.k2 .beeld::before { background:var(--sky); }
.pijler.k3 .beeld::before { background:var(--fire); }
.pijler.k3 .beeld::after { background:var(--blue); }
/* Het blok steekt rechts uit, dus daar extra ruimte; bij de omgekeerde volgorde links. */
.pijler.beeld-zij { padding-right:80px; }
.pijler.beeld-zij.omgekeerd { padding-right:44px; padding-left:80px; }
.pijler.beeld-zij.omgekeerd .beeld::before { inset:34px 34px -34px -34px; }
.pijler.beeld-zij.omgekeerd .beeld::after { right:auto; left:-52px; }

@media (max-width:920px) {
  .pijler.beeld-zij, .pijler.beeld-zij.omgekeerd { padding-left:22px; padding-right:22px; }
  .pijler.beeld-zij .beeld::before { inset:20px -20px -20px 20px; }
  .pijler.beeld-zij.omgekeerd .beeld::before { inset:20px 20px -20px -20px; }
  .pijler.beeld-zij .beeld::after { display:none; }
}

/* ==========================================================================
   AANBOD — prijskaarten, lestegels, tarieftabel en meldingen
   ========================================================================== */

/* Een pijlerblok zonder beeld, over de volle breedte */
.pijler.breed .in-w { grid-template-columns:1fr; }
.pijler.breed .kolom { max-width:none; }

/* Los tarief, groot uitgeschreven */
.tarief { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.tarief .bedrag { font-size:clamp(38px,4.6vw,58px); line-height:1; letter-spacing:-2px; transform:skewX(-3deg); }
.tarief .per { font-size:15px; color:var(--slate); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
/* Kleine toelichting onder een tarief, bijvoorbeeld de conventiestatus */
.tariefnoot { margin-top:10px; font-size:14px; line-height:1.55; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; max-width:520px; }
.pijler.k1 .tarief .bedrag { color:var(--blue); }
.pijler.k3 .tarief .bedrag { color:var(--fire); }

/* Twee kolommen naast elkaar binnen een pijler */

/* Formulekaarten */
.prijskaarten { display:grid; grid-template-columns:minmax(0,510px) minmax(0,570px); gap:44px;
  margin:30px auto 0; max-width:1124px; }
/* Onder deze breedte passen twee kolommen niet meer zonder dat regels terugvallen */
@media (max-width:1180px) {
  .prijskaarten { grid-template-columns:1fr; max-width:570px; }
}
/* Kolom, zodat de kleine letter en de knop naar de onderrand zakken. Essential telt
   minder regels dan Evolve; zonder dit staan de twee knoppen op een andere hoogte. */
.pkaart { position:relative; background:#fff; border:1px solid #E2E8F0; padding:30px 30px 34px;
  display:flex; flex-direction:column; }
/* Evolve krijgt de rode rand, Essential de lichtblauwe. Beide 2px, zodat ze als paar lezen. */
.prijskaarten .pkaart { border:2px solid var(--sky); }
.pkaart.top { border:2px solid var(--fire); }
.pkaart .badge { position:absolute; top:-13px; left:24px; background:var(--fire); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:2px; padding:6px 14px; transform:skewX(-8deg);
  font-family:-apple-system,sans-serif; }
.pkaart .badge span { display:inline-block; transform:skewX(8deg); }
.pkaart h3 { font-size:26px; text-transform:uppercase; letter-spacing:-.8px; transform:skewX(-3deg); }
.pkaart .prijs { margin-top:10px; font-size:44px; line-height:1; letter-spacing:-2px; transform:skewX(-3deg); }
.pkaart .prijs .per { font-size:15px; letter-spacing:0; color:var(--slate); font-weight:400;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.pkaart ul { list-style:none; margin-top:20px; }
.pkaart ul li { position:relative; padding-left:26px; margin-bottom:10px; font-size:16px; line-height:1.55;
  color:var(--navy); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.pkaart ul li::before { content:""; position:absolute; left:0; top:.56em; width:14px; height:4px;
  background:var(--sky); transform:skewX(-13deg); }
.pkaart.top ul li::before { background:var(--fire); }
.pkaart .kleine-letter { margin-top:auto; padding-top:16px; font-size:13px; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.pkaart .bk, .pkaart .bt { margin-top:22px; align-self:flex-start; }

/* Groepslessen */
.lestegels { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:22px; }
.les { background:#fff; border-top:5px solid var(--sky); padding:22px 24px 26px; }
.les h3 { font-size:22px; text-transform:uppercase; letter-spacing:-.6px; transform:skewX(-3deg); }
.les .ondertitel { margin-top:4px; font-size:11px; font-weight:800; letter-spacing:2.5px;
  text-transform:uppercase; color:#0a6e9e; font-family:-apple-system,sans-serif; }
.les p { margin-top:14px; font-size:15px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }


/* Trackkaarten met weekopbouw */
.trackkaart { background:#fff; border:1px solid #E2E8F0; padding:28px 30px 30px; margin-top:16px; }
.trackkaart .tkop { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px; padding-bottom:16px; border-bottom:1px solid #E2E8F0; }
.trackkaart .tnaam { font-family:'KK Display','Arial Black',sans-serif; font-size:22px; text-transform:uppercase;
  letter-spacing:-.7px; color:var(--navy); transform:skewX(-3deg); }
.trackkaart .tnaam small { display:block; margin-top:4px; font-family:-apple-system,sans-serif;
  font-size:12px; font-weight:600; letter-spacing:2px; color:var(--slate); text-transform:uppercase;
  transform:skewX(3deg); }
.trackkaart .tprijs { font-family:'KK Display','Arial Black',sans-serif; font-size:26px; letter-spacing:-1.2px;
  color:var(--navy); text-align:right; transform:skewX(-3deg); }
.trackkaart .tprijs small { display:block; margin-top:3px; font-family:-apple-system,sans-serif;
  font-size:12px; font-weight:400; letter-spacing:0; color:var(--slate); transform:skewX(3deg); }
.trackkaart .tzin { margin-top:16px; max-width:760px; font-size:16px; line-height:1.65; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.trackkaart .tvoet { margin-top:18px; font-size:13px; font-weight:700; letter-spacing:.4px; color:var(--navy);
  font-family:-apple-system,sans-serif; }

/* De weekbalk zelf: hoogte van de staaf is het aantal sessies in die week */
.strip { display:flex; gap:5px; margin-top:24px; align-items:flex-end; }
.strip .wk { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.strip .scr { height:7px; margin-bottom:6px; }
.strip .scr.aan { background:var(--fire); transform:skewX(-13deg); }
.strip .ptb { display:flex; flex-direction:column-reverse; gap:4px; }
.strip .ptb i { display:block; height:24px; background:var(--navy); transform:skewX(-13deg); }
.strip .wlab { margin-top:8px; text-align:center; font-size:11px; font-weight:700; color:transparent;
  font-family:-apple-system,sans-serif; }
.strip .wlab.toon { color:var(--slate); }
.strip .grpb { height:9px; margin-top:6px; }
.strip .grpb i { display:block; height:9px; background:var(--sky); transform:skewX(-13deg); }

.striplegenda { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:22px; margin-top:24px; }
.striplegenda div { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  color:var(--slate); font-family:-apple-system,sans-serif; }
.striplegenda i { display:block; width:16px; height:9px; transform:skewX(-13deg); }
.striplegenda .lg-pt { background:var(--navy); }
.striplegenda .lg-grp { background:var(--sky); }
.striplegenda .lg-scr { background:var(--fire); }

@media (max-width:760px) {
  .trackkaart { padding:22px 20px 24px; }
  .trackkaart .tprijs { text-align:left; }
  .strip { gap:3px; }
  .strip .ptb i { height:17px; }
  .striplegenda { gap:14px; }
}

/* Teamkaarten op de locatiepagina.
   De groep staat in een eigen blok met schuine bovenrand en het monogram rechts, in een
   waas van de sectiekleur. De kaarten zelf blijven wit en dragen de kleur van hun pijler. */
.teamgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px;
  margin-top:34px; max-width:1180px;
  position:relative; overflow:hidden; padding:44px 40px 48px;
  clip-path:polygon(0 0,100% 22px,100% 100%,0 100%); }
/* De teamrasters staan gecentreerd onder hun sectie */
.in-w.onder .teamgrid { margin-left:auto; margin-right:auto; }
.pijler.k1 .teamgrid { background:rgba(0,105,180,.06); }
.pijler.k2 .teamgrid { background:rgba(131,208,245,.20); }
.pijler.k3 .teamgrid { background:rgba(232,74,48,.06); }
/* Het blok is breder dan de kaarten, dus de twee zaakvoerders krijgen die ruimte terug */
.pijler.k2 .kolom > .teamgrid { max-width:700px; }
.teamgrid .tlid { background:#fff; border:1px solid #E2E8F0; border-top:6px solid var(--sky);
  padding:26px 26px 30px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.pijler.k1 .teamgrid .tlid { border-top-color:var(--blue); }
.pijler.k2 .teamgrid .tlid { border-top-color:var(--sky); }
.pijler.k3 .teamgrid .tlid { border-top-color:var(--fire); }
.teamgrid .tlid:hover { transform:translateY(-5px); box-shadow:0 16px 34px rgba(15,23,42,.13); }
.teamgrid .tlid:hover .tbeeld img:not(.monogram-vul) { transform:scale(1.05); }
/* Plaats voor een profielfoto. Zolang die er niet is staat het monogram in het vak,
   zodat de kaart later niet van hoogte verandert als de foto's binnenkomen. */
.teamgrid .tbeeld { position:relative; aspect-ratio:1/1; overflow:hidden; margin-bottom:18px;
  background:var(--base); border:1px solid #E2E8F0;
  display:flex; align-items:center; justify-content:center; }
.teamgrid .tbeeld img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1); }
.teamgrid .tbeeld img.monogram-vul { width:44%; height:auto; object-fit:contain; opacity:.5; }
.teamgrid .tlid { display:flex; flex-direction:column; }
.teamgrid .tlid p { flex:0 0 auto; }
/* Kop boven een groep teamkaarten — een volwaardige tussentitel, in dezelfde schuinte
   en hetzelfde lettertype als de sectiekoppen */
.teamlabel { margin-top:64px; font-family:'KK Display','Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(24px,2.6vw,36px); letter-spacing:-1px; text-transform:uppercase;
  color:var(--navy); transform:skewX(-3deg); transform-origin:left center; }
.teamlabel + .teamgrid { margin-top:22px; }
/* Boven de naam de schuine dubbelstreep die overal op de site een sectie markeert */
.teamgrid .tbeeld { margin-bottom:0; }
.teamgrid .tnaam { margin-top:20px; position:relative; padding-top:20px;
  font-family:'KK Display','Arial Black',sans-serif; font-size:20px; text-transform:uppercase;
  letter-spacing:-.6px; color:var(--navy); transform:skewX(-3deg); }
.teamgrid .tnaam::before, .teamgrid .tnaam::after { content:""; position:absolute; top:0; height:6px;
  transform:skewX(-13deg); }
.teamgrid .tnaam::before { left:0; width:44px; background:var(--sky); }
.teamgrid .tnaam::after  { left:50px; width:14px; background:var(--blue); }
.pijler.k1 .teamgrid .tnaam::before { background:var(--blue); }
.pijler.k1 .teamgrid .tnaam::after  { background:var(--fire); }
.pijler.k3 .teamgrid .tnaam::before { background:var(--fire); }
.pijler.k3 .teamgrid .tnaam::after  { background:var(--blue); }
.teamgrid .trol { margin-top:5px; font-size:11px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase; color:#0a6e9e; font-family:-apple-system,sans-serif; }
.pijler.k1 .teamgrid .trol { color:var(--blue); }
.pijler.k3 .teamgrid .trol { color:var(--fire); }
.teamgrid .tlid p { margin-top:14px; font-size:15px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
/* Vijf kaarten op één rij. Binnen 1180px passen er maar vier naast elkaar, dus vanaf
   1200px verbreden we het raster en dwingen we vijf kolommen af. Daaronder valt het
   terug op het automatische raster hierboven en breekt het netjes af. */
@media (min-width:1200px) {
  .teamgrid.vijf { max-width:1400px; grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Verwijzing binnen de lopende tekst van een pijler, in dezelfde vorm als het e-mailadres:
   de tekstkleur blijft, de onderlijn neemt de kleur van de pijler. */
.pijler .tekst a { color:inherit; text-decoration:none; border-bottom:2px solid var(--sky);
  padding-bottom:1px; transition:border-color .2s, color .2s; }
.pijler.k1 .tekst a { border-bottom-color:var(--blue); }
.pijler.k3 .tekst a { border-bottom-color:var(--fire); }
.pijler .tekst a:hover { color:var(--fire); border-bottom-color:var(--fire); }
.pijler.k3 .tekst a:hover { color:var(--blue); border-bottom-color:var(--blue); }

/* Lokvakje tegen spamrobots: onzichtbaar voor mensen, maar niet met display:none,
   want sommige robots slaan verborgen velden over. */
.lokvak { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Melding na het versturen */
.formmelding { margin-top:18px; font-size:16px; line-height:1.6; font-family:-apple-system,sans-serif; }
.formmelding.gelukt { color:var(--blue); font-weight:700; }
.formmelding.mislukt { color:var(--fire); font-weight:700; }

/* ==========================================================================
   JURIDISCHE PAGINA'S — privacy, cookies en voorwaarden. Eén leeskolom, rustig gezet.
   ========================================================================== */
.juridisch { padding:88px 44px 96px; }
.juridisch .kolom { max-width:820px; margin:0 auto; }
.juridisch h2 { margin-top:52px; font-size:clamp(20px,2.2vw,26px); text-transform:uppercase;
  letter-spacing:-.6px; transform:skewX(-3deg); transform-origin:left center; color:var(--navy); }
.juridisch h2:first-of-type { margin-top:0; }
.juridisch p, .juridisch li { margin-top:16px; font-size:17px; line-height:1.72; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.juridisch ul { list-style:none; margin-top:10px; }
.juridisch ul li { position:relative; padding-left:26px; margin-top:9px; }
.juridisch ul li::before { content:""; position:absolute; left:0; top:.68em; width:14px; height:4px;
  background:var(--sky); transform:skewX(-13deg); }
.juridisch a { color:var(--navy); border-bottom:2px solid var(--sky); padding-bottom:1px; }
.juridisch a:hover { color:var(--blue); border-bottom-color:var(--blue); }
.juridisch .bijgewerkt { margin-top:56px; padding-top:22px; border-top:1px solid #E2E8F0;
  font-size:14px; color:var(--slate); font-family:-apple-system,sans-serif; }
@media (max-width:920px) { .juridisch { padding:56px 22px 64px; } }

/* E-mailadres binnen een opsomming */
.pijler .voorjou a.mail { color:inherit; text-decoration:none; border-bottom:2px solid var(--sky);
  padding-bottom:1px; transition:border-color .2s, color .2s; }
.pijler .voorjou a.mail:hover { color:var(--fire); border-bottom-color:var(--fire); }
.pijler.k3 .voorjou a.mail { border-bottom-color:var(--fire); }

/* Wat er in de app zit, inbegrepen bij elke formule */
.appgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px 34px;
  margin-top:24px; max-width:900px; }
.appgrid .appitem { position:relative; padding-left:26px; }
.appgrid .appitem::before { content:""; position:absolute; left:0; top:.5em; width:15px; height:5px;
  background:var(--blue); transform:skewX(-13deg); }
.appgrid .apptitel { font-family:'KK Display','Arial Black',sans-serif; font-size:15px; text-transform:uppercase;
  letter-spacing:-.2px; color:var(--navy); transform:skewX(-3deg); }
.appgrid p { margin-top:7px; font-size:15px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* Contactpagina: de twee boekwegen plus het formulier */
.keuzeblok { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px;
  max-width:1180px; margin:0 auto; }
.keuze { display:block; text-decoration:none; background:#fff; border:1px solid #E2E8F0;
  border-top:6px solid var(--blue); padding:32px 30px 34px; transition:transform .25s, box-shadow .25s; }
/* De kine-kaart is een knop die het keuzevenster opent, geen koppeling. Een knop
   centreert zijn tekst en erft het lettertype niet, dus dat zetten we hier recht. */
button.keuze { width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.keuze:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,23,42,.10); }
.keuze.rood { border-top-color:var(--fire); }
.keuze.donker { border-top-color:var(--navy); }
.keuze .ktitel { font-family:'KK Display','Arial Black',sans-serif; font-size:22px; text-transform:uppercase;
  letter-spacing:-.7px; color:var(--navy); transform:skewX(-3deg); }
.keuze .ksub { margin-top:6px; font-size:11px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--blue); font-family:-apple-system,sans-serif; }
.keuze.rood .ksub { color:var(--fire); }
.keuze.donker .ksub { color:var(--slate); }
.keuze p { margin-top:16px; font-size:16px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.keuze .klink { margin-top:20px; font-size:13px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--navy); font-family:-apple-system,sans-serif; }
.keuze .klink .pijl { display:inline-block; margin-left:8px; transition:transform .25s; }
.keuze:hover .klink .pijl { transform:translateX(6px); }

.kform { max-width:720px; margin-top:30px; }
.kform .rij { margin-bottom:18px; }
.kform label { display:block; margin-bottom:7px; font-size:11px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--navy); font-family:-apple-system,sans-serif; }
.kform input, .kform select, .kform textarea { width:100%; padding:14px 16px; border:1px solid #CBD5E1;
  background:#fff; font-size:16px; color:var(--navy); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.kform textarea { min-height:150px; resize:vertical; }
.kform input:focus, .kform select:focus, .kform textarea:focus { outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,105,180,.14); }
.kform .formnoot { margin-top:14px; font-size:13px; color:var(--slate); font-family:-apple-system,sans-serif; }

/* Veelgestelde vragen */
.faqwrap { max-width:820px; margin-top:26px; }
.faq-cat { margin-top:34px; margin-bottom:10px; font-size:11px; font-weight:800; letter-spacing:2.5px;
  text-transform:uppercase; color:#fff; background:var(--navy); display:inline-block; padding:7px 14px;
  transform:skewX(-8deg); font-family:-apple-system,sans-serif; }
.faq-cat span { display:inline-block; transform:skewX(8deg); }
.faq-item { border-bottom:1px solid #E2E8F0; }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 40px 20px 0;
  position:relative; font-size:17px; font-weight:700; color:var(--navy);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.faq-q::after { content:""; position:absolute; right:6px; top:50%; width:13px; height:3px;
  background:var(--fire); transform:translateY(-50%) skewX(-13deg); transition:transform .25s; }
.faq-q::before { content:""; position:absolute; right:11px; top:50%; width:3px; height:13px;
  background:var(--fire); transform:translateY(-50%); transition:opacity .25s; }
.faq-q.open::before { opacity:0; }
.faq-q:hover { color:var(--blue); }
/* Dicht is ook echt dicht: met alleen max-height:0 blijft de tekst leesbaar voor een
   schermlezer. visibility haalt hem uit de leesvolgorde, met vertraging zodat het
   openvouwen zichtbaar blijft. De hoogte staat ruim genoeg voor het langste antwoord,
   dat op een telefoon 376px meet. */
.faq-a { max-height:0; overflow:hidden; visibility:hidden;
         transition:max-height .32s ease, visibility 0s .32s; }
.faq-a.open { max-height:520px; visibility:visible; transition:max-height .32s ease, visibility 0s; }
.faq-a p { padding:0 20px 22px 0; font-size:16px; line-height:1.7; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

@media (max-width:760px) {
  .keuze { padding:26px 22px 28px; }
  .faq-q { font-size:16px; }
}

/* ==========================================================================
   HARTSLAGZONES — de FitZone-grafiek
   ========================================================================== */
.zones { margin-top:36px; max-width:1060px; }
.zones .balk { display:flex; gap:5px; align-items:flex-start; }
.zones .zone { flex:1 1 0; min-width:0; }
.zones .zone .staaf { height:66px; transform:skewX(-13deg); }
.zones .zone:nth-child(1) .staaf { background:#C7E9FB; }
.zones .zone:nth-child(2) .staaf { background:var(--sky); }
.zones .zone:nth-child(3) .staaf { background:var(--blue); }
.zones .zone:nth-child(4) .staaf { background:#F2994A; }
.zones .zone:nth-child(5) .staaf { background:var(--fire); }
.zones .zone .znaam { margin-top:15px; font-family:'KK Display','Arial Black',sans-serif; font-size:14px;
  text-transform:uppercase; letter-spacing:-.3px; color:var(--navy); transform:skewX(-3deg); }
.zones .zone .zpct { margin-top:4px; font-family:-apple-system,sans-serif; font-size:12px;
  font-weight:700; letter-spacing:1.2px; color:var(--slate); }
.zones .zone p { margin-top:9px; font-size:14px; line-height:1.55; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* Onder 760px is een kolom van vijf te smal: 'UITHOUDING' is in Arial Black van 14px
   al 102px breed, terwijl er dan nog maar zo'n 62px per zone overblijft. De grafiek
   kantelt daarom naar vijf regels onder elkaar, met de staaf links. De staven worden
   per zone langer, zodat de opbouw van licht naar zwaar zichtbaar blijft. */
@media (max-width:760px) {
  .zones .balk { display:block; }
  .zones .zone { display:grid; grid-template-columns:88px 1fr; column-gap:18px;
    align-items:center; padding:15px 0; border-bottom:1px solid #E2E8F0; }
  .zones .zone:last-child { border-bottom:0; }
  .zones .zone .staaf { grid-column:1; grid-row:1 / span 2; height:32px; align-self:center; }
  .zones .zone:nth-child(1) .staaf { width:40%; }
  .zones .zone:nth-child(2) .staaf { width:55%; }
  .zones .zone:nth-child(3) .staaf { width:70%; }
  .zones .zone:nth-child(4) .staaf { width:85%; }
  .zones .zone:nth-child(5) .staaf { width:100%; }
  .zones .zone .znaam { grid-column:2; grid-row:1; margin-top:0; font-size:16px; }
  .zones .zone .zpct  { grid-column:2; grid-row:1; justify-self:end; margin-top:0; }
  .zones .zone p { grid-column:2; grid-row:2; margin-top:5px; }
}

/* ==========================================================================
   HERSTELD — deze blokken waren per ongeluk mee opgeruimd
   ========================================================================== */

/* Subkop binnen een pijler */
.subkop { margin-top:44px; font-size:clamp(22px,2.4vw,30px); text-transform:uppercase;
  letter-spacing:-.8px; transform:skewX(-3deg); }

/* Toegangskaarten voor atleten */
.toegang { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;
  margin-top:20px; max-width:760px; }
.tkaart { background:#fff; border:1px solid #E2E8F0; border-top:5px solid var(--fire);
  padding:22px 24px 26px; }
.tkaart .naam { font-size:17px; text-transform:uppercase; letter-spacing:-.4px; color:var(--fire);
  transform:skewX(-3deg); }
.tkaart .wat { margin-top:8px; font-size:15px; line-height:1.55; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* Groepslestegels met beeld: kleurrand in de pijlerkleuren, zoom bij aanwijzen */
.lestegels.metbeeld { grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; }
.lestegels.metbeeld .les { padding:0; border-top:0; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; }
.lestegels.metbeeld .les .foto { position:relative; aspect-ratio:8/5; overflow:hidden; }
.lestegels.metbeeld .les .foto img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s ease; }
.lestegels.metbeeld .les:hover .foto img { transform:scale(1.06); }
.lestegels.metbeeld .les .foto::after { content:""; position:absolute; inset:auto 0 0 0; height:6px;
  background:var(--sky); }
.lestegels.metbeeld .les:nth-child(2) .foto::after { background:var(--blue); }
.lestegels.metbeeld .les:nth-child(3) .foto::after { background:#0a6e9e; }
.lestegels.metbeeld .les:nth-child(4) .foto::after { background:var(--fire); }
.lestegels.metbeeld .les:nth-child(5) .foto::after { background:var(--navy); }
.lestegels.metbeeld .les .inhoud { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
/* Dag en uur onderaan de tegel, altijd op de onderrand ongeacht de lengte van de tekst */
.les .wanneer { margin-top:auto; padding-top:16px; font-family:-apple-system,sans-serif; font-size:12px;
  font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--slate); }
.les .wanneer div + div { margin-top:3px; }
.les .wanneer b { font-weight:800; letter-spacing:1.4px; color:var(--navy); }
.les .wanneer br + * , .les .wanneer br { line-height:1.55; }

/* FitZone-sectie: tekst links, de drie punten rechts, de zonebalk over de volle breedte */
.zonesectie .claim { max-width:1120px; }
.zone-kop { display:grid; grid-template-columns:1.08fr 1fr; gap:64px; align-items:start; margin-top:26px; }
.zone-kop .tekst { margin-top:0; max-width:none; }
.zone-kop .appgrid { margin-top:6px; max-width:none; grid-template-columns:1fr; gap:26px; }
.zonesectie .zones { max-width:none; margin-top:56px; }
@media (max-width:1080px) {
  .zone-kop { grid-template-columns:1fr; gap:34px; }
  .zone-kop .appgrid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
}

/* Weekrooster: dezelfde taal als de weekbalken bij de tracks, maar over zeven dagen */
.weekrooster { margin-top:38px; max-width:1180px; }
.weekrooster .schuif { overflow-x:auto; scrollbar-width:thin; }
.weekrooster .raster { min-width:660px; }
.weekrooster .kop, .weekrooster .rij { display:grid; grid-template-columns:96px repeat(7,1fr); gap:6px; }
.weekrooster .kop { margin-bottom:8px; }
.weekrooster .kop div { font-family:-apple-system,sans-serif; font-size:11px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; color:var(--slate); text-align:center; }
.weekrooster .kop div:first-child { text-align:left; }
.weekrooster .rij { margin-bottom:6px; }
.weekrooster .uur { display:flex; align-items:center; font-family:-apple-system,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.6px; color:var(--slate); white-space:nowrap; }
.weekrooster .vak { min-height:38px; }
.weekrooster .les-blok { height:100%; display:flex; align-items:center; justify-content:center;
  transform:skewX(-13deg); }
.weekrooster .les-blok span { display:block; transform:skewX(13deg); font-family:'KK Display','Arial Black',sans-serif;
  font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:#fff; padding:0 4px; }
.weekrooster .k-core      { background:var(--sky); }
.weekrooster .k-core span { color:var(--navy); }
.weekrooster .k-build     { background:var(--blue); }
.weekrooster .k-lift      { background:#0a6e9e; }
.weekrooster .k-endurance { background:var(--fire); }
.weekrooster .k-noon      { background:var(--navy); }
.weekrooster .roosternoot { margin-top:20px; font-size:15px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

@media (max-width:920px) {
  .weekrooster .kop, .weekrooster .rij { grid-template-columns:82px repeat(7,1fr); gap:4px; }
  .weekrooster .les-blok span { font-size:10px; letter-spacing:0; }
}

.pijler .tekst.breed { max-width:1240px; }

/* Melding, voor een opmerking naast de gewone tekst */
.melding { margin-top:30px; max-width:900px; padding:22px 26px; background:#fff;
  border-left:6px solid var(--slate); }
.melding .mlabel { font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--slate); font-family:-apple-system,sans-serif; }
.melding .mtekst { margin-top:8px; font-size:16px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.melding .mtekst a { color:var(--blue); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--sky); padding-bottom:1px; transition:border-color .2s, color .2s; }
.melding .mtekst a:hover { color:var(--fire); border-bottom-color:var(--fire); }
.pijler.k1 .melding { border-left-color:var(--blue); }
.pijler.k2 .melding { border-left-color:var(--sky); }
.pijler.k3 .melding { border-left-color:var(--fire); }

/* Smaller beeld, waar de inhoud ernaast breed moet blijven */
/* Een tweede rij onder het beeld-raster, over de volle breedte */
.pijler .in-w.onder { display:block; max-width:1400px; margin:56px auto 0; }
.pijler .in-w.onder > *:first-child { margin-top:0; }
/* De beeld-zij-secties hebben 80px marge aan de beeldkant en 44px aan de andere, om en om
   links en rechts. Het blok eronder staat daardoor 18px naast het midden van de pagina, de
   ene sectie naar links en de volgende naar rechts. Een verschuiving van 18px zet het blok
   terug op het midden van het scherm, zonder de centrering binnen het blok te breken.
   Onder 920px is de marge symmetrisch en is er niets te compenseren. */
@media (min-width:921px) {
  .pijler.beeld-zij .in-w.onder { transform:translateX(18px); }
  .pijler.beeld-zij.omgekeerd .in-w.onder { transform:translateX(-18px); }
  /* Een blok dat bewust links uitlijnt, volgt gewoon de tekstkolom erboven */
  .pijler.beeld-zij .in-w.onder.links,
  .pijler.beeld-zij.omgekeerd .in-w.onder.links { transform:none; }
}
.in-w.onder.links > * { margin-left:0; margin-right:auto; }

/* Donkere pijler, met het KK-monogram als gekleurd watermerk rechts */
/* Alleen de bovenrand helt, net als paneel 01 op de homepage. De onderrand blijft recht,
   zodat de CTA eronder er met een negatieve marge overheen kan schuiven: beide zijn donkerblauw,
   dus de naad verdwijnt en het onderste deel van de pagina leest als één blok. */
/* Schuine donkere band, met een rechte onderrand en witte lucht naar de CTA eronder */
.pijler.donkerband { position:relative; overflow:hidden; background:var(--navy);
  clip-path:polygon(0 0, 100% 3vw, 100% 100%, 0 100%);
  padding-top:calc(88px + 3vw); padding-bottom:88px; }


.pijler.donkerband .watermerk { position:absolute; right:5%; top:50%; transform:translateY(-50%);
  width:min(42vw,500px); opacity:.32; pointer-events:none; user-select:none; }
.pijler.donkerband .watermerk img { width:100%; height:auto; display:block; }
.pijler.donkerband .in-w { position:relative; z-index:1; }
.pijler.donkerband h2 { color:#fff; }
.pijler.donkerband .claim { color:var(--sky); }
.pijler.donkerband .tekst { color:rgba(255,255,255,.82); }
.pijler.donkerband .subkop { color:#fff; }
.pijler.donkerband .voorlabel { color:var(--sky); }

/* Download de app: één label, daaronder de twee winkelknoppen */
.winkelblok { margin-top:38px; }
.winkellabel { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:13px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--sky); margin-bottom:16px; }
.winkelrij { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.winkelknop { display:inline-block; padding:13px 28px; background:#fff; color:var(--navy);
  border:2px solid #fff; transform:skewX(-8deg); font-size:15px; font-weight:800;
  letter-spacing:.3px; white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  transition:background .18s, color .18s, border-color .18s; }
.winkelknop > span { display:inline-block; transform:skewX(8deg); }
.winkelknop:hover { background:var(--sky); border-color:var(--sky); }
/* Nog niet beschikbaar: geen link, dus ook niet aanklikbaar */
.winkelnoot { margin-top:14px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.72);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
/* In het navy afsluitblok staat alles gecentreerd */
.cta-winkel { position:relative; margin-top:34px; text-align:center; }
.cta-winkel .winkelrij { justify-content:center; }
.pijler.donkerband ul li { color:rgba(255,255,255,.92); }
.pijler.donkerband .appgrid .apptitel { color:#fff; }
.pijler.donkerband .appgrid p { color:rgba(255,255,255,.80); }
.pijler.donkerband .appgrid .appitem::before { background:var(--sky); }
.pijler.donkerband .verder { color:#fff; border-color:var(--sky); }
.pijler.donkerband .mark i + i { background:var(--sky); }

@media (max-width:920px) {
  .pijler.donkerband .watermerk { width:70vw; right:2%; opacity:.16; }
  .pijler.donkerband { padding-top:calc(60px + 6vw); padding-bottom:60px;
    clip-path:polygon(0 0, 100% 6vw, 100% 100%, 0 100%); }
}

/* ---------------------------------------------------------------------------
   TEAMVENSTER
   Elke teamkaart is aanklikbaar en opent een venster met het volledige verhaal.
   De verhalen zelf staan één keer onderaan de pagina in een verborgen blok, ook
   als iemand op meerdere kaarten voorkomt. Het venster leent zijn vormtaal van
   de rest van de site: schuine hoek rechtsboven, naam in displayletter, en de
   dubbelstreep in de kleur van de pijler waar de kaart in staat.
--------------------------------------------------------------------------- */
.teamgrid .tlid.klikbaar { cursor:pointer; }
.teamgrid .tmeer { margin-top:auto; padding:18px 0 0; background:none; border:0; cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:12px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--sky); display:inline-flex; align-items:center; gap:8px; align-self:flex-start; }
.pijler.k1 .teamgrid .tmeer { color:var(--blue); }
.pijler.k3 .teamgrid .tmeer { color:var(--fire); }
.teamgrid .tmeer i { display:block; width:16px; height:3px; background:currentColor;
  transform:skewX(-13deg); transition:width .25s cubic-bezier(.22,1,.36,1); }
.teamgrid .tlid:hover .tmeer i, .teamgrid .tmeer:focus-visible i { width:28px; }

.tverhalen { display:none; }

.tvenster { position:fixed; inset:0; z-index:60; display:flex; padding:26px;
  overflow-y:auto; opacity:0; transition:opacity .22s; }
.tvenster.open { opacity:1; }
.tvenster[hidden] { display:none; }
.tvenster .waas { position:fixed; inset:0; background:rgba(15,23,42,.84); }
/* margin:auto centreert het venster én laat het netjes overlopen als het verhaal
   langer is dan het scherm. Met align-items:center zou de bovenkant wegvallen. */
.tvenster .kaart { position:relative; z-index:1; margin:auto; background:#fff;
  width:min(940px,100%); display:grid; grid-template-columns:280px 1fr;
  clip-path:polygon(0 0, 100% 26px, 100% 100%, 0 100%);
  transform:translateY(18px); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.tvenster.open .kaart { transform:translateY(0); }
/* De gekleurde lijn op de schuine bovenrand. Twee evenwijdige lijnen, allebei 26px
   zakkend over de breedte, met 7px ertussen. De bovenste valt exact samen met de
   rand van het venster, zodat de schuinte een afgewerkte kant krijgt in plaats van
   een kale snede. */
.tvenster .kaart::before { content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none; background:var(--sky);
  clip-path:polygon(0 0, 100% 26px, 100% 33px, 0 7px); }
.tvenster.k1 .kaart::before { background:var(--blue); }
.tvenster.k3 .kaart::before { background:var(--fire); }
/* De foto blijft vierkant, ongeacht hoe lang het verhaal ernaast is. Rekt hij mee,
   dan wordt een portret van 640 bij 640 een smalle hoge uitsnede. Bij een lang
   verhaal blijft hij bovendien staan terwijl je doorscrolt. */
.tvenster .vbeeld { background:var(--base); align-self:start; aspect-ratio:1/1;
  position:sticky; top:26px; }
.tvenster .vbeeld img { width:100%; height:100%; object-fit:cover; display:block; }
.tvenster .vtekst { padding:48px 46px 48px; }
.tvenster .vnaam { position:relative; padding-top:22px;
  font-family:'KK Display','Arial Black',sans-serif; font-size:clamp(26px,3.2vw,36px);
  text-transform:uppercase; letter-spacing:-1px; color:var(--navy); transform:skewX(-3deg);
  transform-origin:left center; }
.tvenster .vnaam::before, .tvenster .vnaam::after { content:""; position:absolute; top:0;
  height:6px; transform:skewX(-13deg); }
.tvenster .vnaam::before { left:0; width:44px; background:var(--sky); }
.tvenster .vnaam::after  { left:50px; width:14px; background:var(--blue); }
.tvenster.k1 .vnaam::before { background:var(--blue); } .tvenster.k1 .vnaam::after { background:var(--fire); }
.tvenster.k3 .vnaam::before { background:var(--fire); } .tvenster.k3 .vnaam::after { background:var(--blue); }
.tvenster .vrol { margin-top:8px; font-size:11px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase; color:#0a6e9e; font-family:-apple-system,sans-serif; }
.tvenster.k1 .vrol { color:var(--blue); } .tvenster.k3 .vrol { color:var(--fire); }
.tvenster .vtekst p { margin-top:16px; font-size:16px; line-height:1.7; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.tvenster .vtekst ul { margin-top:16px; list-style:none; }
.tvenster .vtekst li { position:relative; padding-left:26px; margin-top:9px; font-size:16px;
  line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.tvenster .vtekst li::before { content:""; position:absolute; left:0; top:10px; width:13px;
  height:3px; background:var(--sky); transform:skewX(-13deg); }
.tvenster.k1 .vtekst li::before { background:var(--blue); }
.tvenster.k3 .vtekst li::before { background:var(--fire); }
/* De sluitknop begint net onder de gekleurde lijn, zodat de schuinte er geen hoek afsnijdt */
.tvenster .vdicht { position:absolute; top:33px; right:0; z-index:4; width:50px; height:50px;
  background:#fff; border:0; cursor:pointer; display:flex; align-items:center;
  justify-content:center; }
.tvenster .vdicht i { position:absolute; width:19px; height:3px; background:var(--navy);
  transition:background .18s; }
.tvenster .vdicht:hover i { background:var(--fire); }
.tvenster .vdicht i:nth-child(1) { transform:rotate(45deg); }
.tvenster .vdicht i:nth-child(2) { transform:rotate(-45deg); }
body.venster-open { overflow:hidden; }

@media (max-width:760px) {
  .tvenster { padding:0; }
  .tvenster .kaart { grid-template-columns:1fr; width:100%; margin:auto 0;
    clip-path:polygon(0 0, 100% 16px, 100% 100%, 0 100%); }
  .tvenster .kaart::before { clip-path:polygon(0 0, 100% 16px, 100% 22px, 0 6px); }
  .tvenster .vbeeld { aspect-ratio:16/10; position:static; }
  .tvenster .vdicht { top:22px; }
  .tvenster .vtekst { padding:32px 26px 44px; }
}

/* ---------------------------------------------------------------------------
   KEUZEVENSTER BOEK KINE
   Crossuite heeft per locatie een eigen agenda, dus een knop "Boek kine" die
   niet weet waar je wil afspreken, opent eerst dit venster. De twee knoppen in
   de locatieblokken op de teampagina slaan het over en gaan rechtstreeks door.
   Vormtaal en gedrag zijn dezelfde als bij het teamvenster.
--------------------------------------------------------------------------- */
.kvenster { position:fixed; inset:0; z-index:60; display:flex; padding:26px;
  overflow-y:auto; opacity:0; transition:opacity .22s; }
.kvenster.open { opacity:1; }
.kvenster[hidden] { display:none; }
.kvenster .waas { position:fixed; inset:0; background:rgba(15,23,42,.84); }
.kvenster .kaart { position:relative; z-index:1; margin:auto; background:#fff;
  width:min(680px,100%); padding:46px 44px 44px;
  clip-path:polygon(0 0, 100% 22px, 100% 100%, 0 100%);
  transform:translateY(18px); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.kvenster.open .kaart { transform:translateY(0); }
.kvenster .kaart::before { content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none; background:var(--blue);
  clip-path:polygon(0 0, 100% 22px, 100% 29px, 0 7px); }
.kvenster .vdicht { position:absolute; top:29px; right:0; z-index:4; width:50px; height:50px;
  background:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.kvenster .vdicht i { position:absolute; width:19px; height:3px; background:var(--navy);
  transition:background .18s; }
.kvenster .vdicht:hover i { background:var(--fire); }
.kvenster .vdicht i:nth-child(1) { transform:rotate(45deg); }
.kvenster .vdicht i:nth-child(2) { transform:rotate(-45deg); }
.kvenster .ktitel { position:relative; padding-top:22px;
  font-family:'KK Display','Arial Black',sans-serif; font-size:clamp(26px,3.4vw,34px);
  line-height:1.02; text-transform:uppercase; letter-spacing:-1px; color:var(--navy);
  transform:skewX(-3deg); transform-origin:left center; }
.kvenster .ktitel::before, .kvenster .ktitel::after { content:""; position:absolute; top:0;
  height:6px; transform:skewX(-13deg); }
.kvenster .ktitel::before { left:0; width:44px; background:var(--blue); }
.kvenster .ktitel::after  { left:50px; width:14px; background:var(--fire); }
.kvenster .kuitleg { margin-top:14px; font-size:15px; line-height:1.65; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; max-width:520px; }
.kvenster .kkeuzes { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.klocatie { display:block; position:relative; background:var(--base); border:1px solid #E2E8F0;
  border-top:6px solid var(--fire); padding:22px 22px 24px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; }
.klocatie.blaasveld { border-top-color:var(--blue); }
.klocatie:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.14); }
.klocatie .knaam { font-family:'KK Display','Arial Black',sans-serif; font-size:22px;
  text-transform:uppercase; letter-spacing:-.6px; color:var(--navy); transform:skewX(-3deg);
  transform-origin:left center; }
.klocatie .kadres { margin-top:8px; font-size:11px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--fire); font-family:-apple-system,sans-serif; }
.klocatie.blaasveld .kadres { color:var(--blue); }
.klocatie p { margin-top:12px; font-size:14px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.klocatie .kga { margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  font-family:-apple-system,sans-serif; font-size:12px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--fire); }
.klocatie.blaasveld .kga { color:var(--blue); }
.klocatie .kga i { display:block; width:16px; height:3px; background:currentColor;
  transform:skewX(-13deg); transition:width .25s cubic-bezier(.22,1,.36,1); }
.klocatie:hover .kga i, .klocatie:focus-visible .kga i { width:28px; }
.kvenster .kvoet { margin-top:24px; padding-top:18px; border-top:1px solid #E2E8F0;
  font-size:14px; line-height:1.6; color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.kvenster .kvoet a { color:var(--blue); border-bottom:1px solid var(--sky); padding-bottom:1px; }

@media (max-width:640px) {
  .kvenster { padding:0; }
  .kvenster .kaart { width:100%; margin:auto 0; padding:38px 24px 34px;
    clip-path:polygon(0 0, 100% 16px, 100% 100%, 0 100%); }
  .kvenster .kaart::before { clip-path:polygon(0 0, 100% 16px, 100% 22px, 0 6px); }
  .kvenster .vdicht { top:22px; }
  .kvenster .kkeuzes { grid-template-columns:1fr; gap:12px; }
}