:root{
    --bg:#050505;
    --bg-alt:#181815;
    --steel:#232320;
    --line:#35352f;
    --paper:#efeee7;
    --paper-dim:#a9a89f;
    --grind:#00e800;       /* groen van justemulder.nl (v114; was #c6ff3d) */
    --grind-rgb:0,232,0;
    --grind-dim:#7a9c2a;
    --flag:#e10600;
    --maxw:560px;
    --r:24px;        /* media cards */
    --r-sm:14px;     /* inputs, kleine vlakken */
    --r-block:32px;  /* grote blokken (business club) */
    --gutter:22px;
    --sec:58px;      /* verticaal ritme tussen secties */
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  /* `overflow-x:hidden` maakt van html en body een schuifvak, en daarmee werkt
     `position:sticky` nergens meer op de pagina. `clip` doet visueel hetzelfde
     — geen horizontale schuifbalk — maar maakt géén schuifvak. De regel staat
     er twee keer: een oude browser pakt `hidden`, een moderne pakt `clip`. */
  html{background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;width:100%;}
  body{background:var(--bg);color:var(--paper);font-family:'Archivo',sans-serif;line-height:1.5;overflow-x:hidden;overflow-x:clip;width:100%;position:relative;}

  .grain{position:relative;}
  .grain::before{
    content:"";position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity:.06;mix-blend-mode:overlay;pointer-events:none;z-index:5;
  }

  h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.0;letter-spacing:-0.03em;}
  h2{font-size:clamp(2rem,8.2vw,2.7rem);}
  .tag{font-family:'Chakra Petch',sans-serif;font-weight:700;font-style:italic;color:var(--grind);font-size:1rem;letter-spacing:0.03em;text-transform:uppercase;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

  /* inset media — lijnt exact uit met de tekst in .wrap */
  .inset{
    width:min(100% - (var(--gutter) * 2), var(--maxw) - (var(--gutter) * 2));
    margin-left:auto;margin-right:auto;
  }

  /* full-bleed breakout — pulls content edge-to-edge regardless of parent max-width */
  .bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

  /* ===== FLOATING NAV — no bar, sits transparently over content ===== */
  .floating-nav{
    position:fixed;top:0;left:0;right:0;z-index:70;
    display:flex;align-items:center;justify-content:space-between;
    padding:max(18px, env(safe-area-inset-top)) 20px 20px;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.5) 60%, transparent 100%);
  }
  .floating-nav > *{pointer-events:auto;}
  .fn-icon{
    background:none;border:none;color:var(--paper);font-size:1.5rem;cursor:pointer;line-height:1;
    text-shadow:0 2px 12px rgba(0,0,0,0.9);
  }
  .fn-logo{
    font-family:'Space Grotesk';font-weight:700;font-size:1rem;letter-spacing:-0.01em;color:var(--paper);
    text-shadow:0 2px 12px rgba(0,0,0,0.9);
  }
  .fn-logo span{color:var(--grind);}

  /* ===== FULL-SCREEN MENU ===== */
  .menu{
    position:fixed;inset:0;z-index:80;
    display:flex;flex-direction:column;
    overflow:hidden;
    transform:translateX(100%);visibility:hidden;
    transition:transform .42s cubic-bezier(.16,.8,.3,1), visibility 0s linear .42s;
  }
  .menu.open{
    transform:none;visibility:visible;
    transition:transform .42s cubic-bezier(.16,.8,.3,1), visibility 0s;
  }
  .menu-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(165deg, #23231e 0%, #171713 42%, #0d0d0b 100%);
  }
  /* dezelfde korrel als de hero, zodat het vlak niet vlak aanvoelt */
  .menu-overlay::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity:.07;mix-blend-mode:overlay;
  }
  .menu-top{position:relative;z-index:2;
    display:flex;align-items:center;justify-content:center;
    padding:max(18px, env(safe-area-inset-top)) 22px 14px;
  }
  .menu-close{position:absolute;left:18px;top:50%;transform:translateY(-25%);}
  .menu-close{background:none;border:none;color:var(--paper);font-size:1.8rem;cursor:pointer;}
  .menu-logo{font-family:'Space Grotesk';font-weight:700;font-size:0.95rem;letter-spacing:-0.01em;}
  .menu-logo span{color:var(--grind);}
  .menu-socials{display:flex;gap:14px;}
  .menu-socials a{color:var(--paper-dim);font-size:0.75rem;font-family:'Chakra Petch';font-weight:700;}
  /* startgrid: links vooraan, rechts een halve rij naar achteren — vier rijen van twee */
  .menu-links{position:relative;z-index:2;flex:1;
    display:grid;align-content:start;grid-template-columns:1fr 1fr;
    row-gap:30px;column-gap:12px;padding:10px 14px 0;}
  .menu-links a{
    position:relative;padding:16px 12px 10px;
    /* v90: Anton, net als de koppen (was Space Grotesk). Smaller, dus een maat groter. */
    font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;font-size:1.6rem;letter-spacing:0;line-height:1;
    text-transform:uppercase;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  }
  .menu-links a::before{
    content:"";position:absolute;top:0;left:4px;right:4px;height:14px;pointer-events:none;
    border-top:3px solid var(--grind);border-left:3px solid var(--grind);border-right:3px solid var(--grind);
    border-top-left-radius:10px;border-top-right-radius:10px;
  }
  .menu-links a:nth-child(even){transform:translateY(22px);}
  /* de startpositie hoort zichtbaar te zijn, anders leest het grid als scheefstand */
  .menu-links a .grid-pos{
    display:block;margin-bottom:5px;
    font-family:'Chakra Petch';font-weight:700;font-size:0.68rem;letter-spacing:0.1em;
    color:var(--grind);
  }

  .menu-bottom{position:relative;z-index:2;
    padding:22px 22px max(22px, env(safe-area-inset-bottom));
    border-top:1px solid var(--line);}
  .menu-contact{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-bottom:20px;}
  .menu-contact h4{
    font-family:'Chakra Petch';font-weight:700;font-size:0.68rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--paper-dim);margin-bottom:7px;}
  .menu-contact a{display:block;font-size:0.92rem;line-height:1.55;color:var(--paper);}
  .menu-icons{display:flex;gap:16px;margin-top:2px;}
  .menu-icons a{display:block;color:var(--paper);}
  .menu-icons svg{width:23px;height:23px;display:block;}
  .menu-lang{display:flex;gap:9px;}
  .menu-lang a{
    display:flex;align-items:center;gap:7px;
    font-family:'Chakra Petch';font-weight:700;font-size:0.76rem;letter-spacing:0.06em;
    padding:6px 13px;border:1px solid var(--line);border-radius:999px;color:var(--paper-dim);
  }
  .menu-lang a .vlag{font-size:1.05rem;line-height:1;filter:saturate(0.25);opacity:0.6;}
  .menu-lang a.actief{border-color:var(--grind);color:var(--grind);}
  .menu-lang a.actief .vlag{filter:none;opacity:1;}
  /* v87: taalknop in de balk — alleen desktop (op mobiel zit hij in het menu) */
  .fn-lang{display:none;}
  /* EN bestaat nog niet: zelfde vorm, maar niet klikbaar */
  .menu-lang .binnenkort{display:inline-flex;align-items:center;gap:7px;
    font-family:'Chakra Petch';font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;
    border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--paper-dim);opacity:0.55;cursor:default;}
  .menu-lang .binnenkort .vlag{font-size:1.05rem;line-height:1;filter:saturate(0.25);opacity:0.6;}
  .menu-lang .binnenkort small{font-size:0.62rem;letter-spacing:0.06em;opacity:0.8;}

  /* ===== HERO — photo runs to the very top edge, no bar ===== */
  .hero{height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
    padding:calc(env(safe-area-inset-top, 0px) + 96px) 22px calc(env(safe-area-inset-bottom, 0px) + 104px);
    position:relative;overflow:hidden;}
  /* No negative z-index anywhere here — layering relies purely on DOM order
     (video wrap, then gradient div, then text), which sidesteps a Safari bug
     where a video placed via negative z-index can play but never paint. */
  .hero-media-wrap{
    position:absolute;inset:0;overflow:hidden;
    animation:heroZoom 24s ease-in-out infinite alternate;
  }
  .hero-media{width:100%;height:100%;object-fit:cover;display:block;}
  /* moody grade WITHOUT css filter (filter on a video ancestor can render the video invisible on iOS Safari) */
  .hero-media-wrap::after{
    content:"";position:absolute;inset:0;
    background:rgba(24,24,20,0.4);
    mix-blend-mode:saturation;
    pointer-events:none;
  }
  @keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.09);}}
  .hero-gradient{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(5,5,5,0.22) 0%, rgba(5,5,5,0.32) 50%, var(--bg) 100%);
    pointer-events:none;
  }
  .hero-eyebrow{font-family:'Chakra Petch';font-weight:700;color:var(--grind);font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px;}
  .hero h1{font-size:clamp(2rem,10.5vw,3.5rem);color:var(--paper);font-weight:700;text-transform:uppercase;letter-spacing:-0.035em;}
  .hero-tagline{font-family:'Archivo Narrow';font-weight:700;font-style:italic;font-size:1.1rem;color:var(--paper-dim);margin-top:12px;}
  .hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
  .btn{display:inline-block;padding:17px 30px;font-family:'Chakra Petch';font-weight:700;font-size:1.05rem;letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;border:none;border-radius:999px;}
  .btn-fill{background:var(--grind);color:var(--bg);}
  .btn-outline{border:1px solid var(--paper-dim);color:var(--paper);background:none;}

  /* ===== TERUG NAAR BOVEN =====
     Zweeft rechtsonder, boven de inhoud maar onder de balk en het menu
     (z-index 70 en 80). Houdt rekening met de veilige zone, anders valt hij
     op een iPhone achter de balk van de browser. */
  .naar-boven{
    position:fixed;z-index:60;
    right:max(18px, env(safe-area-inset-right, 0px));
    bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
    width:48px;height:48px;border-radius:999px;border:none;
    display:grid;place-items:center;cursor:pointer;
    background:var(--grind);color:var(--bg);
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .28s ease, transform .28s ease, visibility .28s;
  }
  .naar-boven.zichtbaar{opacity:1;visibility:visible;transform:none;}
  .naar-boven svg{width:20px;height:20px;}
  @media (prefers-reduced-motion: reduce){
    .naar-boven{transition:none;transform:none;}
  }

  /* ===== MARQUEE TICKER ===== */
  .marquee-wrap{background:var(--grind);overflow:hidden;transform:skewY(-2.5deg);margin:-14px 0 0;position:relative;z-index:2;}
  .marquee-inner{transform:skewY(2.5deg);padding:13px 0;}
  .marquee-track{display:inline-flex;white-space:nowrap;animation:marquee 16s linear infinite;}
  .marquee-track span{font-family:'Space Grotesk';font-weight:700;font-size:1rem;color:var(--bg);padding:0 20px;letter-spacing:-0.01em;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ===== PARTNER LOGO STRIP — slight skew ===== */
  .partners-section{padding:34px 0 38px;background:var(--bg-alt);}
  .partners-section .tag{display:block;margin-bottom:0;}
  /* v70 Partners: volgorde en kleur wisselen strikt af, zodat er nergens twee
     gelijke vlakken tegen elkaar staan: intro zwart, Jouw merk grijs, logo's
     zwart, Mogelijkheden grijs, Activaties zwart, Content grijs, Investeren
     zwart. Op de homepage blijft de logosectie grijs. */
  /* v71: dit geldt ALLEEN op desktop — de kleuren staan daarom in het blok
     vanaf 768 px. Op mobiel is Partners weer precies v68. */
  .mobiel-weg{display:none;}
  .pt-content{padding-bottom:30px;}
  /* logoraster — alles tegelijk in beeld, schaalt mee naar 30+ logo's */
  /* logoraster — vast vlak van 4 x 2, logo's wisselen elkaar af */
  /* minmax(0,1fr) is nodig: met kale 1fr duwt een breed logo de kolom op en loopt het raster buiten beeld */
  .logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px;
    border-top:1px solid var(--line);}
  /* vast formaat per vak. het logo staat absoluut binnen het vak, anders bepaalt
     de hoogte van de afbeelding zelf de rijhoogte en worden de vakken ongelijk */
  .logo-cell{
    position:relative;display:block;
    aspect-ratio:2.15;
    border-bottom:1px solid var(--line);
  }
  .logo-cell:nth-child(odd){border-right:1px solid var(--line);}
  .logo-cell:hover img{opacity:1;}
  .logo-cell img{
    position:absolute;top:0;left:0;
    width:100%;height:100%;padding:20px 22px;object-fit:contain;
    /* v154: ook op mobiel staan de logo's helemaal wit (zie v153 voor desktop).
       Was grijstinten met opheldering. */
    filter:brightness(0) invert(1);opacity:0.9;
    transition:opacity .28s ease;}
  /* Uitzondering: deze twee maken hun letters met kleurcontrast in plaats van
     met transparantie; helemaal wit wordt daar een dichte vlek.
     (Autohopper stond hier ook bij, tot v161 met een nieuw bestand.) */
  .logo-cell img[src$="dht-bedrijfsvloeren.png"],
  .logo-cell img[src$="oliehandel.png"]{filter:grayscale(100%) brightness(1.7);}
  .logo-cell img.fading{opacity:0.08;}
  /* zonder JS: alleen de eerste acht tonen */
  .logo-cell:nth-child(n+9){display:none;}

  section{padding:var(--sec) 0;position:relative;}
  .section-head{margin-bottom:22px;}
  .section-head h2{font-size:2.5rem;color:var(--paper);}
  .section-head .tag{display:block;margin-bottom:8px;}
  p.body-txt{color:var(--paper-dim);font-size:1.12rem;line-height:1.55;max-width:60ch;}

  /* ===== FULL-BLEED PHOTO with overlaid caption ===== */
  .photo-full{position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;overflow:hidden;margin-top:26px;border-radius:var(--r);}
  .photo-full.wide{aspect-ratio:16/11;}
  .photo-full.tall{aspect-ratio:3/4;}
  .photo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  /* foto die licht meebeweegt in zijn kader: het plaatje is hoger dan het kader,
     zodat er ruimte is om te schuiven zonder dat er een rand vrijkomt */
  .par-wrap{position:relative;overflow:hidden;}
  .par-img{
    position:absolute;left:0;top:-8%;width:100%;height:116%;
    object-fit:cover;display:block;z-index:0;will-change:transform;
  }
  .quote-photo::before,
  .quote-photo .qc,
  .photo-full .photo-cap{z-index:1;}

  .photo-cap{
    position:absolute;left:0;right:0;bottom:0;
    background:linear-gradient(0deg, rgba(5,5,5,0.92) 10%, transparent 90%);
    padding:26px 22px 18px;
  }
  .photo-cap b{font-family:'Space Grotesk';font-weight:700;font-size:1.4rem;color:var(--paper);display:block;letter-spacing:-0.01em;}
  .photo-cap span{font-family:'Chakra Petch';font-weight:700;font-size:0.92rem;color:var(--grind);text-transform:uppercase;letter-spacing:0.05em;}

  /* ===== ABOUT — hero-style photo with a short headline overlaid, rest of text below ===== */
  .about-hero{position:relative;overflow:hidden;}
  .about-hero-media{display:block;width:100%;aspect-ratio:0.68;object-fit:cover;object-position:52% 10%;}
  .about-hero-gradient{position:absolute;inset:0;background:linear-gradient(180deg,
    var(--bg) 0%, rgba(5,5,5,0.6) 4%, rgba(5,5,5,0.12) 11%, rgba(5,5,5,0.03) 18%,
    rgba(5,5,5,0.05) 55%, rgba(5,5,5,0.3) 78%, rgba(5,5,5,0.8) 95%, var(--bg) 100%);}
  .about-hero-content{position:absolute;left:0;right:0;bottom:64px;}
  .about-intro{padding-top:0;margin-top:-38px;position:relative;z-index:2;}
  .about-badge{margin-top:22px;display:flex;align-items:baseline;gap:10px;}
  .magazine-photo{position:relative;overflow:hidden;border-radius:20px;}
  /* ingezoomd op de cover: smaller kader + cover-uitsnede */
  .magazine-photo img{display:block;width:100%;height:100%;aspect-ratio:1.2;object-fit:cover;object-position:22% 50%;}
  .magazine-photo-overlay{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 24px;background:linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.92) 100%);}
  .magazine-photo-overlay h2{margin-top:6px;}
  .about-badge b{font-family:'Space Grotesk';font-weight:700;font-size:1.4rem;color:var(--paper);}
  .about-badge span{font-family:'Chakra Petch';font-weight:700;font-size:0.85rem;color:var(--grind);text-transform:uppercase;letter-spacing:0.04em;}

  /* ===== QUOTE — full-bleed photo with overlaid italic quote ===== */
  .quote-photo{position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;margin-top:28px;border-radius:var(--r);overflow:hidden;}
  /* Donkerder verloop dan voorheen, en hoger opgetrokken: de uitspraak ligt
     over een druk beeld en daar las je zo overheen. */
  .quote-photo::before{content:"";position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(0deg, rgba(5,5,5,0.97) 34%, rgba(5,5,5,0.12) 82%);}
  .quote-photo .qc{position:absolute;left:0;right:0;bottom:0;padding:30px 24px 26px;}
  .quote-photo .qc p{font-family:'Archivo Narrow';font-style:italic;font-weight:700;font-size:1.55rem;color:var(--paper);line-height:1.22;}
  /* Naam op de eerste regel, functie op de tweede. Als één regel brak hij op
     een willekeurige plek — "... 3× FORMULE 1" en dan "GRAND PRIX-WINNAAR" op
     de volgende — en dan lees je de titel niet meer als één geheel. */
  .quote-photo .qc cite{display:block;margin-top:12px;font-style:normal;font-family:'Chakra Petch';font-weight:700;font-size:0.85rem;color:var(--grind);text-transform:uppercase;}
  .quote-photo .qc cite span{display:block;}


  /* ===== MEDIA LOGOS ===== */
  .media-strip{background:var(--bg-alt);padding:34px 0 38px;}
  .media-strip img{height:22px;width:auto;flex:0 0 auto;margin:0 24px;filter:grayscale(100%) brightness(1.6);opacity:0.8;}
  .media-note{margin-top:14px;font-size:0.92rem;color:var(--paper-dim);}

  /* ===== MARQUEE — infinite horizontal scroll, no JS needed ===== */
  .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
  /* ===== PHOTO MOSAIC — reused shots, more visual density ===== */
  .photo-mosaic{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-top:24px;}
  .photo-mosaic .m-tall{grid-row:1/3;aspect-ratio:0.72;border-radius:18px;overflow:hidden;}
  .photo-mosaic .m-small{aspect-ratio:1.35;border-radius:18px;overflow:hidden;}
  .photo-mosaic img{width:100%;height:100%;object-fit:cover;display:block;}
  .marquee-track{display:flex;align-items:center;width:max-content;animation:marqueeScroll 26s linear infinite;}
  .marquee-track--slow{animation-duration:34s;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  @keyframes marqueeScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;}
  }

  /* ===== BUSINESS CLUB ===== */
  .club-block{
    background:var(--steel);
    border-radius:var(--r-block);
    width:min(100% - 24px, var(--maxw));
    margin:0 auto;
    padding:52px 0 56px;
    overflow:hidden;
  }
  .club-block h3{font-family:'Space Grotesk';font-weight:700;font-size:1.5rem;color:var(--grind);margin:22px 0 12px;line-height:1.15;}

  /* ===== GALLERY — full-bleed horizontal swipe ===== */
  .gallery-scroll{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-left:22px;}
  .gallery-scroll::-webkit-scrollbar{display:none;}
  .gallery-scroll .g-item{flex:0 0 78vw;scroll-snap-align:start;aspect-ratio:4/5;background-size:cover;background-position:center;border-radius:var(--r);}
  .gallery-scroll .g-item:last-child{margin-right:22px;}

  /* ===== VIDEO REEL — swipeable portrait clips, TikTok-style ===== */
  .reel-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-left:22px;-webkit-overflow-scrolling:touch;}
  .reel-scroll::-webkit-scrollbar{display:none;}
  .reel-item{flex:0 0 62vw;max-width:280px;aspect-ratio:9/16;background:var(--steel);scroll-snap-align:start;overflow:hidden;border:1px solid var(--line);border-radius:22px;width:100%;height:auto;object-fit:cover;display:block;}
  .reel-item:last-child{margin-right:22px;}
  .reel-dots{display:flex;justify-content:center;gap:6px;margin-top:16px;}
  .reel-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.25);transition:width 0.25s ease,background 0.25s ease;}
  .reel-dots .dot.active{width:20px;border-radius:4px;background:var(--grind);}
  /* v98: dezelfde bolletjes onder de doorlopende fotoband (Partners, Business Club).
     Alleen mobiel; vanaf 768 px is de band een vast raster. */
  .carrousel-dots{margin-top:14px;}
  @media (min-width: 768px){ .carrousel-dots{display:none;} }

  /* ===== INSTAGRAM ===== */
  .ig-head{display:flex;align-items:center;justify-content:space-between;}
  .ig-embed{margin-top:20px;border:1px solid var(--line);background:var(--steel);min-height:340px;}
  .ig-embed iframe{width:100%;border:none;display:block;}

  /* ===== KERNCIJFERS — kale typografie, geen tegels ===== */
  .figures{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-top:1px solid var(--line);}
  .figure{padding:24px 0 20px;border-bottom:1px solid var(--line);}
  .figure:nth-child(odd){padding-right:16px;border-right:1px solid var(--line);}
  .figure:nth-child(even){padding-left:16px;}
  .figure b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:clamp(2rem,8.5vw,2.8rem);white-space:nowrap;line-height:0.95;letter-spacing:-0.04em;color:var(--paper);}
  .figure .lbl{display:block;margin-top:9px;font-family:'Chakra Petch';font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--paper);}
  .figure .sub{display:block;margin-top:4px;font-size:0.82rem;line-height:1.35;color:var(--paper-dim);}
  .figure.todo b{color:var(--grind-dim);}
  .figure.todo .sub{color:var(--grind-dim);}

  /* ===== INTAKE-WIZARD ===== */
  .wizard{margin-top:26px;background:var(--steel);border-radius:var(--r);padding:26px 22px 24px;}
  .wz-titel{font-family:'Space Grotesk';font-weight:700;font-size:1.45rem;letter-spacing:-0.02em;line-height:1.05;}
  .wz-sub{margin:8px 0 20px;font-size:0.92rem;line-height:1.5;color:var(--paper-dim);}
  .wz-count{font-family:'Chakra Petch';font-weight:700;font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--grind);}
  .wz-bar{height:3px;background:rgba(255,255,255,0.1);border-radius:2px;margin:12px 0 22px;overflow:hidden;}
  .wz-bar i{display:block;height:100%;width:33%;background:var(--grind);border-radius:2px;transition:width .35s cubic-bezier(.16,.8,.4,1);}
  .wz-step{display:none;}
  .wz-step.active{display:block;animation:wzIn .35s cubic-bezier(.16,.8,.4,1);}
  @keyframes wzIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .wz-q{font-family:'Space Grotesk';font-weight:700;font-size:1.28rem;line-height:1.15;letter-spacing:-0.02em;margin-bottom:16px;}
  .wz-opts{display:flex;flex-direction:column;gap:10px;}
  .wz-opt{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--paper);padding:16px;font-family:'Chakra Petch';font-weight:700;font-size:1rem;line-height:1.3;cursor:pointer;transition:border-color .2s,background .2s;}
  .wz-opt:hover,.wz-opt.sel{border-color:var(--grind);background:rgba(var(--grind-rgb),0.08);}
  .wz-back{margin-top:18px;background:none;border:none;padding:0;color:var(--paper-dim);font-family:'Chakra Petch';font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;}
  .wz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
  .wz-chip{font-family:'Chakra Petch';font-weight:700;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.03em;background:rgba(var(--grind-rgb),0.12);color:var(--grind);border:1px solid rgba(var(--grind-rgb),0.35);border-radius:999px;padding:7px 13px;}
  .wz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .wz-fout{display:none;margin-top:14px;font-size:0.86rem;line-height:1.45;color:#ffb4ae;border:1px solid rgba(225,6,0,0.45);background:rgba(225,6,0,0.10);border-radius:var(--r-sm);padding:12px 14px;}
  .wz-fout.zichtbaar{display:block;}
  .wz-fout a{color:var(--grind);}

  /* ===== v96: magazine-venster (naam + e-mail vóór de download) ===== */
  .mag-dialog{
    width:min(520px, calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
    margin:auto;padding:30px 24px 26px;border:1px solid var(--line);border-radius:var(--r);
    background:var(--bg-alt);color:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,0.6);
  }
  .mag-dialog::backdrop{background:rgba(5,5,5,0.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
  .mag-sluit{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--paper);font-size:1.3rem;cursor:pointer;opacity:0.7;}
  .mag-sluit:hover{opacity:1;}
  .mag-titel{font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;
    font-size:2.4rem;line-height:0.98;letter-spacing:0;margin-top:6px;}
  .mag-intro{margin-top:10px;color:var(--paper-dim);font-size:1rem;line-height:1.5;}
  #magForm{display:grid;gap:10px;margin-top:18px;}
  #magForm input[type=text], #magForm input[type=email]{width:100%;}
  .mag-vink{display:flex;gap:10px;align-items:flex-start;font-size:0.88rem;line-height:1.45;color:var(--paper-dim);cursor:pointer;margin:4px 0 6px;}
  .mag-vink input{accent-color:var(--grind);width:18px;height:18px;flex:0 0 18px;margin-top:2px;}
  #magForm .btn{justify-self:start;}
  .mag-priv{font-size:0.78rem;color:var(--paper-dim);}
  .mag-priv a{color:var(--grind);}
  .mag-klaar .btn{margin-top:18px;}
  @media (min-width: 768px){
    .mag-dialog{padding:40px 38px 34px;}
    .mag-titel{font-size:3rem;}
  }
  .wz-done{text-align:center;padding:10px 0 4px;}
  .wz-done b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:1.4rem;margin-bottom:8px;}

  /* ===== PARALLAXRASTER — schuin gezet, twee kolommen tegengesteld ===== */
  .pgal-clip{height:74svh;overflow:hidden;}
  .pgal{
    height:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;
    /* de schuinstand; de schaal voorkomt dat de hoeken leeg vallen */
    transform:rotate(3.5deg) scale(1.16);
  }
  .pgal-col{display:flex;flex-direction:column;gap:12px;will-change:transform;}
  .pgal-col img{
    width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
    border-radius:16px;background:var(--bg-alt);
  }

  /* ===== CONTACT ===== */
  .contact-box{margin-top:26px;padding:24px 22px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);}
  form{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
  input, textarea, select{background:var(--bg);border:1px solid var(--line);color:var(--paper);padding:15px 16px;font-family:'Archivo';font-size:1rem;border-radius:var(--r-sm);}
  textarea{min-height:100px;resize:vertical;}
  input:focus, textarea:focus, select:focus{outline:2px solid var(--grind);border-color:var(--grind);}
  .contact-people{margin-top:22px;display:flex;flex-direction:column;gap:14px;font-size:0.9rem;color:var(--paper-dim);}
  .contact-people b{color:var(--paper);font-family:'Chakra Petch';font-weight:700;display:block;font-size:0.95rem;letter-spacing:0.02em;}
  .contact-people a{color:var(--grind);}

  footer{border-top:1px solid var(--line);padding:30px 0 50px;font-size:0.8rem;color:var(--paper-dim);}
  .wa-blok{padding-bottom:26px;margin-bottom:28px;border-bottom:1px solid var(--line);}
  .wa-btn{display:flex;align-items:center;justify-content:center;gap:11px;
    background:#25d366;color:#0b1f12;border-radius:999px;padding:15px 20px;text-decoration:none;
    font-family:'Chakra Petch';font-weight:700;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.04em;}
  .wa-btn svg{width:22px;height:22px;flex:none;}
  .wa-blok p{margin-top:14px;font-size:0.84rem;line-height:1.55;color:var(--paper-dim);}
  .footer-contact{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-bottom:24px;}
  .footer-contact h4{
    font-family:'Chakra Petch';font-weight:700;font-size:0.7rem;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--paper);margin-bottom:6px;}
  .footer-contact a{display:block;font-size:0.88rem;line-height:1.6;color:var(--paper-dim);}
  .footer-social{display:flex;gap:16px;margin-bottom:22px;}
  .footer-social a{display:block;color:var(--paper);}
  .footer-social svg{width:23px;height:23px;display:block;}
  .footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;}

  /* ===== MOTION SYSTEM ===== */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  }

  .reveal{opacity:0;transform:translateY(32px);transition:opacity 0.9s cubic-bezier(.16,.8,.4,1), transform 0.9s cubic-bezier(.16,.8,.4,1);will-change:transform,opacity;}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-img{opacity:0;transform:scale(1.12);transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.16,.8,.4,1);}
  .reveal-img.in{opacity:1;transform:scale(1);}
  .reveal-stagger.in > *{transition-delay:calc(var(--i, 0) * 90ms);}

  /* hero intro — plays once on load, independent of scroll */
  .hero-eyebrow, .hero h1, .hero-tagline, .hero-cta{
    opacity:0;transform:translateY(22px);
    animation:heroIn 0.9s cubic-bezier(.16,.8,.4,1) forwards;
  }
  .hero-eyebrow{animation-delay:0.15s;}
  .hero h1{animation-delay:0.3s;}
  .hero-tagline{animation-delay:0.5s;}
  .hero-cta{animation-delay:0.65s;}
  @keyframes heroIn{to{opacity:1;transform:translateY(0);}}

  /* subtle glow pulse on primary CTAs */
  .btn-fill{position:relative;animation:glowPulse 3.2s ease-in-out infinite;}
  @keyframes glowPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(var(--grind-rgb),0.35);}
    50%{box-shadow:0 0 22px 4px rgba(var(--grind-rgb),0.35);}
  }



  /* ===== subpagina's ===== */
  a.fn-logo{text-decoration:none;color:inherit;}
  .sub-hero .about-hero-media{aspect-ratio:0.78;}
  .spec{margin-top:24px;border-top:1px solid var(--line);}
  .spec div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:0.92rem;}
  .spec dt{font-family:'Chakra Petch';font-weight:700;text-transform:uppercase;letter-spacing:0.04em;font-size:0.78rem;color:var(--paper-dim);align-self:center;}
  .spec dd{font-family:'Space Grotesk';font-weight:600;color:var(--paper);text-align:right;}
  /* opsomming met grote, uitgesneden startnummers in plaats van bolletjes */
  /* De fotokolom naast de opsomming is een desktopding; op een telefoon
     bestaat hij niet. Zie het blok vanaf 1080 px onderin dit bestand. */
  .lijst-beeld{display:none;}
  /* v77: fotobloei op Partners bestaat alleen op desktop (zie blok vanaf 1080 px). */
  .bloei{display:none;}
  /* v80: extra's op de homepage die alleen op desktop bestaan */
  .groot-band{display:none;}
  /* `.lijst-boven` is op mobiel een gewone div zonder opmaak; op desktop is het
     de bovenste rij van het raster, zodat de foto ernaast pas begint bij punt
     01 in plaats van bij de inleiding. */

  /* Partners was één sectie; die is gesplitst zodat alleen het lijstblok kan
     blijven staan op desktop. De marges van de twee helften samen zijn op
     mobiel precies gelijk aan die van de oorspronkelijke sectie, zodat daar
     niets verschuift. */
  .pt-merk{padding-bottom:0;}
  /* v67: de kop "Mogelijkheden" stond tegen de carrousel erboven (−2 px).
     Sinds die kop er staat (v65) hoort hier gewoon lucht. Partners wordt op
     mobiel daardoor 44 px langer. */
  .pt-lijst{padding-top:44px;padding-bottom:34px;}

  .lijst{margin-top:22px;counter-reset:punt;border-top:1px solid var(--line);}
  .lijst li{list-style:none;display:flex;gap:16px;align-items:center;
    padding:15px 0;border-bottom:1px solid var(--line);
    font-size:1rem;line-height:1.4;}
  .lijst li::before{
    counter-increment:punt;
    content:counter(punt, decimal-leading-zero);
    flex:none;min-width:50px;
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:1.9rem;line-height:1;letter-spacing:-0.05em;
    color:var(--grind);}
  @supports (-webkit-text-stroke: 1px red){
    .lijst li::before{color:transparent;-webkit-text-stroke:1.6px var(--grind);}
  }
  .club-block .lijst{border-top-color:rgba(20,20,15,0.14);}
  .club-block .lijst li{border-bottom-color:rgba(20,20,15,0.14);color:#45453d;}
  .club-block .lijst li::before{color:#4e6b0a;}
  @supports (-webkit-text-stroke: 1px red){
    .club-block .lijst li::before{color:transparent;-webkit-text-stroke:1.6px #4e6b0a;}
  }
  .prijs{margin-top:26px;}
  .prijs b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:clamp(2.1rem,9vw,2.9rem);letter-spacing:-0.03em;line-height:1;}
  .prijs span{display:block;margin-top:10px;font-size:0.88rem;line-height:1.5;color:var(--paper-dim);}
  .club-block .prijs b{color:#14140f;}
  .club-block .prijs span{color:#45453d;}
  .video-kaart{position:relative;margin-top:26px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;background:#000;}
  .video-kaart img{width:100%;height:100%;object-fit:cover;display:block;}
  .video-kaart iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .video-kaart .play{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;border:none;padding:24px;cursor:pointer;
    background:linear-gradient(0deg, rgba(5,5,5,0.80) 0%, rgba(5,5,5,0.10) 70%);}
  .video-kaart .play i{width:62px;height:62px;border-radius:50%;background:var(--grind);display:grid;place-items:center;box-shadow:0 0 42px rgba(var(--grind-rgb),0.35);}
  .video-kaart .play svg{width:22px;height:22px;margin-left:4px;fill:#14140f;}
  .video-kaart .cap{position:absolute;left:22px;right:22px;bottom:20px;pointer-events:none;}
  .video-kaart .cap b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:1.3rem;color:var(--paper);letter-spacing:-0.01em;}
  .video-kaart .cap span{font-family:'Chakra Petch';font-weight:700;font-size:0.88rem;color:var(--grind);text-transform:uppercase;letter-spacing:0.05em;}

  /* ===== de auto: beeld dat binnenrijdt + oplopende cijfers ===== */
  .auto-beeld{position:relative;overflow:hidden;margin-top:12px;padding:0;}
  /* de auto komt van buiten het scherm links binnenrijden en remt af op zijn plek */
  .auto-foto{display:block;width:100%;
    transform:translateX(-112%);
    transition:transform 1.5s cubic-bezier(.16,.85,.3,1);}
  .auto-foto.in{transform:translateX(0);}
  @media (prefers-reduced-motion: reduce){
    .auto-foto{transform:none;transition:none;}
  }
  .spec-raster{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:18px;}
  .spec-tegel{background:var(--steel);border-radius:18px;padding:22px 14px 20px;text-align:center;}
  .spec-tegel svg{display:block;width:30px;height:30px;margin:0 auto 12px;color:var(--grind);}
  .spec-tegel .lbl{display:block;font-family:'Chakra Petch';font-weight:700;font-size:0.75rem;
    text-transform:uppercase;letter-spacing:0.06em;color:var(--paper-dim);}
  .spec-tegel b{display:block;margin-top:9px;font-family:'Space Grotesk';font-weight:700;
    font-size:clamp(1.9rem,9vw,2.5rem);line-height:1;letter-spacing:-0.03em;color:var(--paper);}
  .spec-tegel .eh{display:block;margin-top:6px;font-family:'Chakra Petch';font-weight:700;
    font-size:0.8rem;color:var(--grind);}
  /* hero-variant: kop bovenin in plaats van onderin.
     v89: niet meer in gebruik — Racing heeft de klasse `boven` niet meer en
     staat nu net als Partners onderin op 64 px (mobiel én desktop). */
  .about-hero.boven .about-hero-gradient{background:linear-gradient(180deg,
    var(--bg) 0%, rgba(5,5,5,0.88) 14%, rgba(5,5,5,0.40) 36%, rgba(5,5,5,0.06) 58%,
    rgba(5,5,5,0.28) 80%, rgba(5,5,5,0.78) 95%, var(--bg) 100%);}
  .about-hero.boven .about-hero-content{bottom:auto;top:96px;}
  /* v92: Racing-hero op mobiel — auto iets groter. De foto wordt 18% ingezoomd
     vanuit de onderkant van de auto (±62% van de hoogte), zodat de auto naar
     boven en opzij groeit en de straat eronder, waar de kop staat, vrij blijft.
     Het hero-vak knipt wat buiten de rand valt af. Vanaf 768 px niet. */
  @media (max-width: 767px){
    /* v93/v94: 3% omlaag (±15 px; v93 had 6%, v92 0%), zodat er boven de auto meer lucht is. De inzoom
       van 18% steekt boven de rand ruim genoeg uit om geen gat te laten. */
    .about-hero-media[src$="racing-hero.jpg"]{transform:translateY(3%) scale(1.18);transform-origin:46% 62%;}
  }
  /* v85/v86: op een telefoon viel de kop bovenin over de auto. Onder 768 px
     staat hij daarom onderin óp de foto, over het asfalt en de onderkant van
     de auto — die zijn donker genoeg (Gerard). Het verloop maakt de onderrand
     iets dieper, zodat de foto zonder harde lijn in het zwart overloopt.
     Vanaf 768 px blijft de kop bovenin. */
  @media (max-width: 767px){
    /* v88: 40 px hoger dan in v86 (was 22 px) */
    .about-hero.boven .about-hero-content{top:auto;bottom:62px;}
    .about-hero.boven .about-hero-gradient{background:linear-gradient(180deg,
      var(--bg) 0%, rgba(5,5,5,0.6) 4%, rgba(5,5,5,0.1) 12%, rgba(5,5,5,0) 50%,
      rgba(5,5,5,0.35) 76%, rgba(5,5,5,0.75) 92%, var(--bg) 100%);}
  }

  /* ===== fotocarrousel: liggende kaarten met bijschrift, swipebaar ===== */
  .carrousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-left:22px;-webkit-overflow-scrolling:touch;}
  /* doorlopende band: geen browserscroll, we verschuiven zelf */
  .carrousel[data-auto]{display:block;overflow:hidden;padding-left:0;
    scroll-snap-type:none;touch-action:pan-y;}
  .carrousel-band{display:flex;gap:10px;padding-left:22px;will-change:transform;}
  .carrousel::-webkit-scrollbar{display:none;}
  .car-item{position:relative;flex:0 0 86vw;max-width:520px;aspect-ratio:4/3;
    scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:var(--steel);}
  .car-item:last-child{margin-right:22px;}
  .car-item img{width:100%;height:100%;object-fit:cover;display:block;}
  .car-item::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(0deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.20) 42%, rgba(5,5,5,0) 68%);}
  .car-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;}
  .car-cap b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:1.15rem;
    color:var(--paper);letter-spacing:-0.01em;}
  .car-cap span{font-family:'Chakra Petch';font-weight:700;font-size:0.78rem;color:var(--grind);
    text-transform:uppercase;letter-spacing:0.05em;}

  /* ===== VARIANT: Business Club op papierwit =====
     Deze stond eerder in een tweede <style>-blok in index.html en gold
     daardoor niet op de subpagina's. Nu voor alle pagina's. */
  .club-block{background:var(--paper);}
  .club-block .tag{color:#4e6b0a;}
  .club-block h2{color:#14140f;}
  .club-block h3{color:#14140f;}
  .club-block .body-txt{color:#45453d;}
  .club-block .btn-fill{background:#14140f;color:var(--paper);animation:none;box-shadow:none;}

  /* ===== staande onboard-clip op de partnerpagina ===== */
  .pov-strip{position:relative;margin-top:26px;overflow:hidden;
    aspect-ratio:16/11;background:#000;}
  .pov-video{width:100%;height:100%;object-fit:cover;display:block;}
  .pov-strip::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(0deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.15) 40%, rgba(5,5,5,0) 65%);}
  .pov-strip .car-cap{left:22px;right:22px;bottom:20px;}

  /* ===== staande fotocollage: twee kolommen, rechts loopt het beeld uit ===== */
  /* Links stond de marge al op 22 px, gelijk met de kop en de tekst; rechts
     stond hij op nul, waardoor de rechterkolom van het scherm af liep. Dat
     leest als een vergeten marge, want er komt niets achteraan — het blok
     schuift niet. Nu aan beide kanten 22 px. De kolommen blijven ongelijk
     (0,86 tegen 1) en de linker houdt zijn verspringing naar beneden, dus het
     trapje blijft staan. */
  .collage{width:100vw;margin-left:calc(50% - 50vw);margin-top:28px;
    display:grid;grid-template-columns:0.86fr 1fr;gap:12px;
    padding-left:22px;padding-right:22px;align-items:start;}
  .collage .kol{display:flex;flex-direction:column;gap:12px;}
  .collage .kol:first-child{padding-top:clamp(30px,9vw,64px);}
  .collage figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--steel);}
  .collage img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;}

  /* De desktoplinks in de balk. Op een telefoon staan ze uit; ze worden pas
     zichtbaar in het blok hieronder. De hamburger blijft altijd bestaan. */
  .fn-links{display:none;}

  /* ==========================================================================
     DESKTOP — alles hieronder geldt pas vanaf 768 px breed.
     Een telefoon leest dit blok nooit, dus de mobiele opmaak blijft ongemoeid.
     Er staat vanaf hier niets meer in dit bestand buiten een @media, dus
     wijzigingen hieronder kunnen de telefoon niet raken.

     Drie trappen:
       768 px  — de basis: kolom van 1180 px, beeld tot de rand.
      1080 px  — kop links, inleiding rechts (.kop-duo).
      1500 px  — kolom naar 1320 px, alles een maat ruimer.
     ========================================================================== */
  @media (min-width: 768px){

    :root{
      --maxw:720px;      /* tekstkolom, was 560 — ruimer omdat de tekst groter is */
      --sec:76px;        /* meer lucht tussen secties, was 58 */
      --gutter:28px;
      /* de zijmarge die alles op dezelfde lijn houdt: 28 px, of het restant
         naast een kolom van 1180 px zodra het scherm breder is. Eén variabele,
         zodat de bredere trap hieronder alleen dit getal hoeft te wijzigen. */
      --side:max(28px, calc(50vw - 590px));
    }

    .wrap{padding:0 var(--side);max-width:none;}
    /* alleen lopende tekst afknijpen voor leesbaarheid; rasters, foto's en
       video's mogen de volle kolom gebruiken */
    .wrap p, .wrap h1, .wrap h2, .wrap h3{max-width:var(--maxw);}

    /* Beeld gaat van rand tot rand; alleen tekst en kaders blijven in de kolom.
       .bleed en .collage houden dus gewoon hun mobiele gedrag van 100vw. */

    /* Kaders met ronde hoeken stonden gecentreerd in het scherm, terwijl alle
       tekst op de kolomlijn begint. Op een breed scherm scheelde dat honderden
       pixels. Ze lijnen nu links uit met de tekst en lopen door tot de andere
       kant van de kolom. */
    .inset{
      width:calc(100% - (var(--side) * 2));
      max-width:1180px;
      margin-left:var(--side);margin-right:auto;
    }
    .photo-full, .quote-photo, .magazine-photo{max-height:74vh;}

    /* ----------------------------------------------------------------------
       TYPOGRAFIE. Op desktop mag het fors: kleine cursieve labels boven
       displaykoppen in hoofdletters, strakke regelafstand. Onder 768 px
       verandert hier niets — daar blijven de koppen in gewone schrijfwijze.
       ---------------------------------------------------------------------- */
    h2{
      font-size:clamp(3rem, 4.1vw, 5.4rem);
      line-height:0.9;letter-spacing:-0.045em;
      text-transform:uppercase;
    }
    .section-head h2{font-size:clamp(3rem, 4.1vw, 5.4rem);}
    /* bijschriften over beeld zijn geen sectiekoppen: die blijven in
       gewone schrijfwijze, anders schreeuwt alles even hard */
    .photo-cap b{text-transform:none;}
    .hero h1{
      font-size:clamp(4.6rem, 7.4vw, 9.6rem);
      line-height:0.86;letter-spacing:-0.05em;
      /* de hero-kop mag breder zijn dan de tekstkolom; anders knelt hij
         zodra de letters groter worden dan --maxw */
      max-width:none;
    }
    .body-txt{font-size:1.24rem;line-height:1.62;}
    .hero-tagline{font-size:1.4rem;}
    .tag{font-size:1.1rem;letter-spacing:0.05em;}
    /* ----------------------------------------------------------------------
       KLEINE TEKST. Alles wat onder de lopende tekst zit — bijschriften,
       labels, formulier, footer, specificaties — stond op mobiele maten en
       viel daardoor weg naast de grote koppen. Eén trap omhoog.
       ---------------------------------------------------------------------- */
    .figure .sub{font-size:1.02rem;}
    .figure .lbl{font-size:0.9rem;}
    .media-note, .wa-blok p{font-size:1.05rem;line-height:1.55;}
    footer{font-size:0.98rem;}
    .footer-contact a{font-size:1rem;}
    .footer-contact h4{font-size:0.8rem;}
    .about-badge span{font-size:0.95rem;}
    .quote-photo .qc cite{font-size:0.95rem;}
    .car-cap span, .video-kaart .cap span{font-size:0.92rem;}
    .spec div{font-size:1.02rem;}
    .spec dt{font-size:0.86rem;}
    .prijs span{font-size:1rem;}
    /* contactformulier */
    .wz-titel{font-size:1.75rem;}
    .wz-sub{font-size:1.02rem;}
    .wz-count{font-size:0.84rem;}
    .wz-q{font-size:1.45rem;}
    .wz-opt{font-size:1.08rem;padding:18px 20px;}
    .wz-back{font-size:0.88rem;}
    .wz-fout{font-size:0.95rem;}
    .wz-done b{font-size:1.6rem;}
    input, textarea, select{font-size:1.05rem;}
    .contact-people{font-size:1rem;}
    .contact-people b{font-size:1.05rem;}

    /* hero: tekst op dezelfde lijn als de rest, en niet eindeloos hoog.
       De hero had zelf een zijmarge én er zit een .wrap in met dezelfde
       marge; de kop begon daardoor honderden pixels verder naar rechts dan
       elke andere kop op de pagina. De marge zit nu alleen nog op de .wrap. */
    .hero{
      min-height:680px;
      padding-left:0;
      padding-right:0;
      padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 130px);
    }
    .hero > .wrap{width:100%;}
    .hero-eyebrow{
      display:inline-flex;align-items:center;gap:16px;
      font-size:1.08rem;letter-spacing:0.09em;margin-bottom:22px;
    }
    /* streep vóór het kenteken-regeltje; puur decoratief */
    .hero-eyebrow::before{
      content:"";width:72px;height:2px;background:var(--grind);flex:0 0 72px;
    }
    /* v95: het dunne groene lijntje onderaan de hero (scroll-hint, sinds v30) is
       weggehaald. Het pulseerde elke 2,6 s en viel op de video op als storing. */

    /* De collage was twee staande foto's naast elkaar over de volle breedte.
       Op 1600 px is dat ruim duizend pixels hoog per foto. Elke kolom legt de
       twee foto's nu naast elkaar, dus vier over de breedte; de trapsgewijze
       verspringing links blijft. */
    /* Liep aan de rechterkant voorbij de schermrand: de vierde foto was half
       weg. Ook rechts een marge, dus alle vier passen binnen de kolom; de
       trapsgewijze verspringing blijft. */
    .collage{
      /* De mobiele regel rekt dit blok op naar 100vw en trekt het met een
         negatieve marge terug. Op desktop leverde dat een blok op dat aan
         beide kanten tachtig pixels buiten de kolom stak, met de vierde foto
         half van het scherm af. Gewoon de breedte van de sectie volgen. */
      width:100%;margin-left:0;margin-right:0;
      grid-template-columns:1fr 1fr;gap:18px;
      padding-left:var(--side);padding-right:var(--side);}
    .collage .kol{flex-direction:row;gap:18px;}
    .collage .kol > figure{flex:1 1 0;min-width:0;}

    /* Schuifstroken lopen aan bééde kanten door tot de schermrand. Zetten we
       ze op de kolomlijn, dan staat er links een gat ter grootte van één tegel
       terwijl rechts een tegel half wegloopt; dat leest als een ontbrekende
       video. Vaste blokken (collage, kaders) blijven wél op de kolomlijn —
       beweging gaat tot de rand, stilstand lijnt uit. */
    .carrousel, .reel-scroll, .gallery-scroll, .carrousel-band{padding-left:28px;}
    /* Zonder deze regel negeert scroll-snap de padding en klikt de browser het
       eerste item tegen de rand van het vak. */
    .carrousel, .gallery-scroll{scroll-padding-left:28px;}
    /* De videostrook loopt op desktop oneindig door (zie script.js). Scroll-snap
       is een veeggebaar en zou met de sprong vechten: elke keer dat de strook
       een setbreedte verspringt, wil snap hem terugtrekken. Uit dus — met een
       muis of trackpad scrol je toch vrij. */
    .reel-scroll{scroll-snap-type:none;}
    .reel-item{scroll-snap-align:none;}
    .car-item{flex:0 0 min(34vw, 460px);}

    /* ----------------------------------------------------------------------
       v68: GEEN LOPENDE BAND OP DESKTOP. Op Partners en Business Club liep de
       fotoband als enige onderdeel (op de balk na) over de volle breedte; dat
       trok het beeld uit elkaar. Op desktop wordt hij een vast raster op de
       kolomlijn — stilstand lijnt uit.
       Het script bouwt de band nog steeds (anders klopt het niet meer als je
       een venster onder 768 px sleept). Hier wordt die band `display:contents`,
       zodat de kaarten direct in het raster vallen en de verschuiving van het
       script nergens meer op werkt; de twee kopieën gaan onzichtbaar.
       Partners: zes kaarten, 2 kolommen tot 1080 px en 3 daarboven.
       Business Club: zie hieronder.
       ---------------------------------------------------------------------- */
    .carrousel[data-auto].bleed{
      width:auto;left:auto;right:auto;
      margin-left:var(--side);margin-right:var(--side);
      padding-left:0;overflow:visible;cursor:auto;
      display:grid;grid-template-columns:1fr 1fr;gap:16px;
    }
    .carrousel[data-auto] .carrousel-band{display:contents;}
    .carrousel[data-auto] .car-item[aria-hidden="true"]{display:none;}
    .carrousel[data-auto] .car-item{flex:none;max-width:none;margin:0;width:auto;}

    /* Business Club: de magazinefoto staat al groot naast de opsomming en de
       vierkante presentatiefoto past niet in dit raster; die twee (kaart 3 en 4)
       vallen op desktop weg. De avond zelf krijgt het grote vak, de andere vier
       staan twee aan twee ernaast — familie van het mozaïek op de homepage. */
    .stapel-rest .carrousel[data-auto] .car-item:nth-child(3),
    .stapel-rest .carrousel[data-auto] .car-item:nth-child(4){display:none;}
    .stapel-rest .carrousel[data-auto] .car-item:first-child{grid-column:1 / -1;aspect-ratio:16/9;}

    /* v69 Partners: op desktop drie kaarten in plaats van zes — neus, racepak,
       media-optredens. De andere drie overlapten met de opsomming eronder en
       maakten van de pagina één lange fotoreeks. Tot 1080 px de eerste over de
       volle breedte, de twee andere eronder. Mobiel houdt de band met alle zes. */
    .pt-merk .carrousel[data-auto] .car-item:nth-child(2),
    .pt-merk .carrousel[data-auto] .car-item:nth-child(5),
    .pt-merk .carrousel[data-auto] .car-item:nth-child(6){display:none;}
    .pt-merk .carrousel[data-auto] .car-item:first-child{grid-column:1 / -1;aspect-ratio:16/9;}
    /* Grotere vakken, dus minder tegels naast elkaar: van zeven naar vijf op
       een scherm van 1800 px. De strook blijft een strook — een gebogen
       carrousel zou hier met de paginascroll gaan vechten en dit blok is geen
       hoofdact, het staat tussen het citaat en de medialogo's in. */
    .reel-scroll{gap:14px;cursor:grab;}
    .reel-scroll.sleept{cursor:grabbing;}
    .reel-item{
      flex:0 0 clamp(260px, 20vw, 400px);max-width:400px;
      /* Minder hoog dan het 9:16 van de clip zelf. Staand blijft staand, maar
         een vak van 361 bij 642 px vult op een laptop bijna het halve scherm.
         `object-fit:cover` snijdt boven en onder bij.
         v170: de hoogte stond als verhouding (2/3) met `height:auto`, dus de
         browser rekende hem uit. Zodra een clip zijn eigen afmetingen doorgaf
         kon dat heel even een andere hoogte opleveren: een brede, platte band
         met beeld erin, die daarna opsprong naar staande tegels. Eén keer per
         bezoek, want daarna zit alles in de cache. De hoogte staat nu vast —
         zelfde maat, maar niets kan hem meer veranderen. */
      height:calc(clamp(260px, 20vw, 400px) * 1.5);
      aspect-ratio:auto;
      user-select:none;-webkit-user-drag:none;
    }
    /* De strook loopt vanzelf door, dus de stippen zeggen niets meer. */
    #reelDots{display:none;}
    .gallery-scroll .g-item{flex:0 0 min(28vw, 400px);}

    /* rasters krijgen meer kolommen */
    .spec-raster{grid-template-columns:repeat(4, 1fr);}
    .spec-tegel{padding:38px 18px 32px;}
    .spec-tegel svg{width:36px;height:36px;margin-bottom:16px;}
    .spec-tegel b{font-size:clamp(2.8rem, 3.4vw, 4.4rem);letter-spacing:-0.05em;}
    .spec-tegel .lbl{font-size:0.82rem;letter-spacing:0.08em;}

    .figures{grid-template-columns:repeat(4, 1fr);}
    /* de mobiele om-en-om randen kloppen niet meer in vier kolommen:
       daar hoort een streep tússen elke kolom, niet alleen na de oneven */
    .figure:nth-child(odd), .figure:nth-child(even){
      padding:26px 20px 22px;border-right:1px solid var(--line);
    }
    .figure:first-child{padding-left:0;}
    .figure:nth-child(4n){border-right:none;padding-right:0;}
    .figure b{font-size:clamp(3.2rem, 3.9vw, 5rem);letter-spacing:-0.05em;}
    .figure .lbl{font-size:0.86rem;letter-spacing:0.06em;}

    /* ----------------------------------------------------------------------
       PARTNERLOGO'S. Twee dingen klopten niet in vier kolommen.

       1. De lijnen. De mobiele opmaak zet een rand rechts van elk oneven vak
          en onder élk vak, plus een streep boven het raster. In twee kolommen
          klopt dat; in vier kolommen krijg je één verdwaalde verticale lijn
          tussen de tweede en derde kolom en een kader rondom. Alles gaat hier
          eerst uit — de reset moet even zwaar wegen als `:nth-child(odd)`,
          anders wint die — en daarna komen alleen de binnenste lijnen terug:
          drie verticale, één horizontale.

       2. Het logo zelf. `brightness(1.7)` duwde alle middentonen naar wit.
          Bij een logo dat deels gekleurd is (Autohopper, Marktlink) liep het
          daardoor dicht: de gekleurde helft werd net zo wit als de witte helft
          en de vormen vielen samen. Op een klein vak zag je dat nauwelijks,
          op 330 px breed wel. De grijstinten blijven nu staan.
       ---------------------------------------------------------------------- */
    /* v99: logosectie op desktop het gewone sectieritme boven en onder (was
       34/38 px, de mobiele maat). Op Partners had .pt-logos dit al. */
    .partners-section{padding:var(--sec) 0;}
    /* v98: meer lucht tussen de kop "Zij maken het mogelijk." en het logovlak (was 24 px) */
    .logo-grid{grid-template-columns:repeat(4, minmax(0,1fr));border-top:none;margin-top:64px;}
    .logo-cell{aspect-ratio:2.5;}
    .logo-cell:nth-child(odd), .logo-cell:nth-child(even){border:none;}
    .logo-cell:not(:nth-child(4n)){border-right:1px solid var(--line);}
    /* v97: op desktop 4 × 3 = twaalf vakken (was 4 × 2). Lijnen alleen binnenin:
       onder de eerste twee rijen, rechts van alles behalve de laatste kolom. */
    .logo-cell:nth-child(-n+8){border-bottom:1px solid var(--line);}
    .logo-cell:nth-child(n+9){display:block;}
    .logo-cell:nth-child(n+13){display:none;}
    /* v153: logo's staan in rust helemaal wit en tonen hun merkkleur bij hover.
       brightness(0) maakt elk zichtbaar beeldpunt zwart, invert(1) daarna wit;
       doorzichtige delen blijven doorzichtig, dus uitsparingen blijven staan. */
    .logo-cell img{filter:brightness(0) invert(1);opacity:0.92;padding:24px 26px;
      transition:opacity .28s ease, filter .28s ease;}
    .logo-cell:hover img{filter:none;opacity:1;}
    /* v163: Autohopper heeft twee bestanden. In rust telt alleen de vorm:
       `autohopper.png` heeft een doorzichtige ruimte tussen de letters en de
       blauwe rand, zodat het witfilter er open letters van maakt in plaats van
       een dichte vlek. Bij hover wisselt hij naar `autohopper-kleur.png`, waar
       die ruimte wit is zoals in het echte logo. Zelfde afmeting (450x140),
       dus er schuift niets. */
    .logo-cell:hover img[src$="autohopper.png"]{content:url(images/partners/autohopper-kleur.png);}
    /* v165: bij dit logo wisselt het bestand meteen, terwijl het witfilter er in
       0,28 s af vloeide. Dat filter liep dus nog even over de kleurversie, en
       omdat het witte binnenvlak sneller oplost dan het dunne oranje
       onderschrift leek het van boven naar beneden in te kleuren. Hier gaat
       `filter` uit de overgang, zodat beeld en kleur in één keer omslaan. */
    .logo-cell img[src$="autohopper.png"]{transition:opacity .28s ease;}
    /* Uitzondering: deze twee maken hun letters met kleurcontrast in plaats van
       met transparantie. Helemaal wit wordt daar een dichte vlek, dus die
       houden het grijsfilter tot er een echte wit-op-donkerversie is.
       (Autohopper stond hier ook bij, tot v161 met een nieuw bestand.) */
    .logo-cell img[src$="dht-bedrijfsvloeren.png"],
    .logo-cell img[src$="oliehandel.png"]{filter:grayscale(100%) brightness(1.7);}
    .logo-cell:hover img[src$="dht-bedrijfsvloeren.png"],
    .logo-cell:hover img[src$="oliehandel.png"]{filter:grayscale(0%);}

    /* opsomming: grotere uitgesneden cijfers, meer lucht per regel.
       Zonder maximum liepen de streepjes over de volle 1320 px terwijl de
       tekst na een derde ophield. */
    /* Een blok met een opsomming wordt op desktop één gecentreerde kolom:
       label, kop, inleiding en knop in het midden, de opsomming zelf 960 px
       breed en netjes gecentreerd. De regels binnen de opsomming blijven links
       uitgelijnd, anders gaan de nummers zweven. Staat op Partners en Business
       Club; andere blokken raakt dit niet, want alleen een `.wrap` met een
       `.lijst` erin telt mee. */
    /* ----------------------------------------------------------------------
       GESTAPELDE SECTIES. De bovenste sectie blijft staan; de sectie eronder
       schuift er als een blad overheen. Zo wordt de foto rechts eerst
       onthuld doordat de tekst omhoog gaat, en daarna weer bedekt doordat de
       pagina eroverheen trekt — het effect van abbipulling.com.

       Hoe het werkt: de twee secties zitten samen in een `.stapel`. De
       bovenste plakt bovenaan het venster zolang die stapel in beeld is; de
       onderste staat later in de HTML en ligt dus een laag hoger, met een
       eigen dekkende achtergrond zodat je er niet doorheen kijkt.

       Alleen op een scherm dat hoog genoeg is; past het vaste blok niet,
       vaste sectie niet in zijn geheel passen en zou je de onderkant nooit
       zien. Vandaar de hoogte-eis in de media query.
       ---------------------------------------------------------------------- */
    /* op desktop krijgt het vaste blok zijn eigen ademruimte */
    /* Ruimte tussen het beeld erboven (de carrousel op Partners, de fotostrook
       op Business Club) en de foto van dit blok. Op 26 px stonden de twee
       beelden vlak op elkaar en leek het één brok. */
    /* v70: de logo's staan nu tussen Jouw merk en Mogelijkheden en krijgen het
       gewone sectieritme. `.pt-lijst` blijft op 52/34: elke pixel extra maakt
       het vaste blok hoger dan 1040 px en dan valt het stapeleffect weg. De
       rust komt daar van de kleurwissel met de zwarte logosectie erboven. */
    /* v102: bovenaan het gewone sectieritme (was 52 px). Sinds v72 bepaalt het
       script de plakpositie zelf, dus een hoger vast blok is geen probleem meer. */
    .pt-lijst{padding-top:var(--sec);padding-bottom:34px;}
    .pt-logos{padding:var(--sec) 0;}
    .bc-lijst{padding-top:66px;padding-bottom:48px;}

    /* v72: geen hoogte-eis meer. Vroeger stond dit onder min-height 880 px
       (Partners zelfs 1040): paste het vaste blok niet in het venster, dan
       ging het effect uit — en op een gewone laptop dus altijd op Partners.
       Nu zet script.js `--plak` op (vensterhoogte − blokhoogte), nooit meer
       dan 0. Het blok scrolt dan eerst gewoon door tot zijn ONDERKANT de
       onderrand van het venster raakt, en blijft pás dan staan. Past het in
       het venster, dan is `--plak` 0 en werkt het als vanouds.
       (De media query hieronder is een lege schil: we zitten al boven 768 px.) */
    @media (min-width: 768px){
      .stapel{position:relative;}
      .stapel > .stapel-vast{position:sticky;top:var(--plak, 0px);z-index:1;}
      /* Alles ná de vaste sectie ligt een laag hoger en is dekkend. De derde
         sectie zit in de stapel om een andere reden: het prijsblok alléén is
         lager dan het vaste blok, dus was de stapel te kort en liet het vaste
         blok los vóórdat het helemaal bedekt was. Dan schoot de foto er op het
         laatst alsnog vanonder uit. */
      .stapel > .stapel-rest{position:relative;z-index:2;background:var(--bg);}
      /* Partners: Activaties (868 px) alleen is lager dan het vaste blok (1023),
         dus Content zit mee in de stapel — grijs, zie `.pt-content`. */
      .stapel > .stapel-rest.pt-content{background:var(--bg-alt);}
      /* v74: op Business Club schuift er niets meer overheen — alles scrolt
         gewoon mee. De stapel-klassen blijven in de HTML staan omdat het
         fotoraster eronder er zijn selector aan ontleent (`.stapel-rest …`). */
      /* v108: omgedraaid. Business Club heeft het overheen schuiven weer (de
         jaarlijkse bijdrage schuift over Lidmaatschap); Partners niet meer —
         Mogelijkheden is op een laptop hoger dan het scherm, waardoor de kop
         uit beeld schoof. */
      .stapel:has(.pt-lijst) > .stapel-vast{position:static;}
      .stapel:has(.pt-lijst) > .stapel-over{border-radius:0;box-shadow:none;}

      /* Het vaste blok op Partners is sinds v67 1023 px hoog (kop erboven,
         grotere collage, regels over twee regels); dat van Business Club 795. Eén ondergrens voor allebei zou betekenen dat
         Business Club het effect onnodig kwijtraakt op een gewone laptop.
         Daarom staat het blok van Partners uit tot 1040 px vensterhoogte.
         Wordt de kop daar ooit weggehaald, dan kan deze uitzondering weg. */
      .stapel > .stapel-over{
        position:relative;z-index:2;
        background:var(--bg);
        border-radius:var(--r) var(--r) 0 0;
        box-shadow:0 -24px 60px rgba(0,0,0,0.55);
      }
    }

    /* ----------------------------------------------------------------------
       OPSOMMINGEN. Op desktop staat de lijst links en een foto rechts die
       blijft staan terwijl je de lijst eronderdoor scrolt (`position:sticky`).
       Zodra de lijst op is, schuift de pagina er weer overheen.

       Dit lost meteen het probleem op waar de vorige drie pogingen op
       stukliepen: in één brede kolom houdt de tekst na een derde op en blijft
       de rest van de regel leeg. In een halve kolom vult de tekst de regel wel,
       dus kan de regel met een streep eronder gewoon blijven staan.

       De verhouding is omgedraaid: de tekst is nu het zwaarst (1,24 rem,
       halfvet, wit) en het nummer is kleiner. Eerst viel alleen het nummer op.
       ---------------------------------------------------------------------- */
    .wrap.lijst-duo{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,0.68fr);
      grid-template-rows:auto 1fr;
      column-gap:54px;align-items:stretch;text-align:left;
    }
    /* rij 1: inleiding of kop, alleen in de linkerkolom.
       rij 2: de lijst links, de foto rechts — die begint dus op de hoogte van
       punt 01 en niet al bij de tekst erboven. */
    .lijst-boven{grid-column:1;grid-row:1;}
    .lijst-kolom{grid-column:1;grid-row:2;}
    .lijst-beeld{grid-column:2;grid-row:2;}
    /* Let op de opzet: het vak zelf rekt mee met de hoogte van de lijst
       ernaast (`align-self:stretch`) en de fóto erbinnen plakt. Zet je
       `position:sticky` op het vak zelf, dan is dat vak precies zo hoog als de
       foto en is er niets om in te schuiven — dan plakt er niets. */
    .lijst-beeld{display:block;align-self:stretch;}


    /* ----------------------------------------------------------------------
       BEELD NAAST DE LIJST. Op Partners vier foto's in twee kolommen, op
       Business Club één staande foto. Allebei naar rechts gekanteld en hoger
       dan de tekst ernaast — zoals bij vetsocial.nl.

       Die extra hoogte mag de sectie níét hoger maken: het vaste blok moet in
       een venster passen, anders valt het stapeleffect weg. Daarom staat er
       een negatieve ondermarge op `.lijst-beeld`. Het beeld steekt daardoor
       onder de lijst uit zonder dat de rij meegroeit. Het paneel dat
       eroverheen schuift dekt dat overschot netjes af.
       ---------------------------------------------------------------------- */
    .lijst-beeld{margin-bottom:-210px;}

    /* v67: het beeld begint naast de kop in plaats van bij punt 01 (grid-rij 1
       én 2). Op Business Club stak de foto 67 px onder het witte prijsblok en
       las dat als 'tegenaan geplakt'; nu eindigt hij ruim boven het paneel.
       Op Partners maakt het ruimte voor een grotere collage zonder dat het
       vaste blok hoger wordt dan nodig. Het beeld steekt niet meer onder de
       lijst uit, dus de negatieve ondermarge vervalt. */
    .lijst-beeld{grid-row:1 / span 2;margin-bottom:0;}
    /* Partners: helft-helft, zodat de collage flink groter kan. De regels van
       de opsomming mogen daardoor over twee regels vallen. */
    .pt-lijst .wrap.lijst-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;}
    .pt-lijst .beeld-collage{max-width:640px;}
    /* v73: de collage op Partners staat stil — geen meeschuivende kolommen
       (data-drift is uit de HTML) en niet meer plakkend naast de lijst.
       De kanteling blijft; die beweegt niet. */
    /* v108: collage iets lager, naast de lijst in plaats van naast de kop */
    .pt-lijst .beeld-collage{position:static;margin-top:clamp(60px, 6vw, 110px);}
    /* v74 Business Club: de foto naast Lidmaatschap staat stil en begint lager,
       zodat hij niet meer tegen de bovenkant van de sectie aan hangt. */
    .bc-lijst .beeld-solo{position:static;margin-top:96px;}

    .beeld-collage,
    .beeld-solo{
      position:sticky;top:96px;
      max-width:430px;margin-left:auto;
      transform:rotate(3.4deg);          /* naar rechts leunend */
      transform-origin:50% 40%;
    }
    .beeld-collage{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    .bc-kolom{display:grid;gap:12px;will-change:transform;}
    .bc-kolom:last-child{margin-top:46px;}

    .beeld-collage figure,
    .beeld-solo figure{margin:0;border-radius:16px;overflow:hidden;background:var(--steel);
      box-shadow:0 18px 44px rgba(0,0,0,0.5);}
    .beeld-collage img,
    .beeld-solo img{width:100%;height:100%;object-fit:cover;display:block;}
    .beeld-collage figure:nth-child(1){aspect-ratio:4/5;}
    .beeld-collage figure:nth-child(2){aspect-ratio:3/4;}
    .beeld-solo figure{aspect-ratio:3/4;}

    .lijst{
      max-width:none;margin-left:0;margin-right:0;text-align:left;
      display:block;border-top:1px solid var(--line);
    }
    .lijst li{
      display:flex;align-items:baseline;gap:22px;
      background:none;border:none;border-radius:0;
      border-bottom:1px solid var(--line);
      padding:24px 0;
      /* Hoofdletters in de smalle letter, zoals de FAQ-regels van thegrind.nl.
         In de gewone letter met kleine letters bleven de regels klein en braaf
         naast die uitgesneden nummers. */
      font-family:'Chakra Petch',sans-serif;
      font-weight:700;text-transform:uppercase;
      font-size:1.22rem;letter-spacing:0.015em;
      line-height:1.25;color:var(--paper);
    }
    .lijst li::before{
      font-size:2rem;min-width:52px;margin:0;letter-spacing:-0.04em;
    }

    /* Hulpklasse: blokken die op een breed scherm te veel worden, maar op een
       telefoon juist welkom zijn. Staat nu op de Jarama-foto op Racing — daar
       volgen direct daaronder al drie foto's. */
    .desktop-weg{display:none;}
    /* v71: tegenhanger voor blokken die alleen op desktop bestaan. */
    .mobiel-weg{display:block;}
    /* v70/v71 Partners, alleen desktop: kleuren wisselen strikt af en de
       logo's (tussen Jouw merk en Mogelijkheden) krijgen lucht. */
    .pt-logos{background:var(--bg);}
    .pt-content{background:var(--bg-alt);padding-bottom:0;}
    .pt-merk{padding-bottom:var(--sec);}

    /* ----------------------------------------------------------------------
       MEDIALOGO'S. Liepen als lopende band voorbij op 22 px hoog; op een breed
       scherm passen alle acht gewoon naast elkaar. Animatie uit, logo's groter,
       en de hele strook gecentreerd — inclusief het label erboven en de regel
       eronder, anders staat het label links terwijl de logo's in het midden
       hangen. De dubbele set (die de band naadloos maakte) is hier overbodig.
       ---------------------------------------------------------------------- */
    /* De grijze band van "Gezien en gehoord bij" loopt door naar boven, tot
       halverwege de videotegels. Daarmee krijgt de strook een bodem om op te
       staan zonder dat er een losse balk omheen komt — de tegels steken er
       bovenuit, precies zoals bij vetsocial.nl.
       Het blok zit als `::before` áchter de band en telt niet mee in de
       hoogte, dus er schuift niets op. `#videos` krijgt z-index 1, anders zou
       het grijs over de tegels heen vallen (het staat er later in de HTML).
       De hoogte is de tussenruimte plus de halve tegelhoogte; een tegel is
       anderhalf keer zo hoog als breed, dus 0,75 × de tegelbreedte. */
    /* De ruimte tussen de onderkant van de tegels en "Gezien en gehoord bij"
       bestond uit de sectiemarge (76 of 96 px) plus de bovenmarge van de
       mediastrook (54 px): samen tot 150 px leeg grijs. Nu vast op 34 px voor
       de sectie en 42 px voor de strook.
       De hoogte van de band rekent met diezelfde 34 px, dus `--reelgat` staat
       in een variabele. Pas je die aan, dan blijft de band op de helft van de
       tegels beginnen. */
    :root{--reelgat:34px;}
    #videos{position:relative;z-index:1;padding-bottom:var(--reelgat);}
    /* v155: tussen het Fisichella-citaat en de videotegels stond 165 px zwart
       (110 px onder #about plus de halve sectiemarge van 55 px boven #videos),
       op een breed scherm zelfs 210 px. Nu 44 px aan beide kanten. Alleen home;
       de rest van het sectieritme blijft ongemoeid. */
    body > section#about{padding-bottom:clamp(38px, 3.4vw, 52px) !important;}
    body > section#videos{padding-top:clamp(38px, 3.4vw, 52px) !important;}
    .media-strip{position:relative;}
    .media-strip::before{
      content:"";position:absolute;left:0;right:0;bottom:100%;
      height:calc(var(--reelgat) + 0.75 * clamp(260px, 20vw, 400px));
      background:var(--bg-alt);
    }

    /* v156: boven de strook zit ook nog de ondermarge van #videos
       (--reelgat). Die telt mee in wat je ziet, dus staat hij hier in
       mindering: zo is de zwarte ruimte boven en onder de mediapartners
       even groot. */
    .media-strip{padding:calc(58px - var(--reelgat)) 0 58px;}
    .media-strip .wrap{text-align:center;}
    .media-strip .wrap .tag{display:block;}
    .media-strip .wrap p{margin-left:auto;margin-right:auto;}
    .media-strip .marquee{
      overflow:visible;
      -webkit-mask-image:none;mask-image:none;
      padding:0 28px;
    }
    .media-strip .marquee-track{
      width:auto;animation:none;
      flex-wrap:wrap;justify-content:center;
      row-gap:26px;
    }
    .media-strip .marquee-track img[aria-hidden="true"]{display:none;}
    .media-strip img{height:36px;margin:0 26px;opacity:0.9;}

    /* WhatsApp zat als losse balk bóven de footer, terwijl er rechts in de
       footer een halve pagina leeg stond. Hij staat nu als derde kolom naast de
       contactgegevens. De footer wordt daarvoor één raster; `display:contents`
       maakt van de twee contactblokken zelf rasteritems, zodat ze elk hun eigen
       kolom pakken zonder dat de HTML hoeft te veranderen. */
    footer > .wrap{
      display:grid;
      grid-template-columns:1fr 1fr 1.1fr;
      column-gap:56px;row-gap:26px;
      align-items:start;
    }
    .footer-contact{display:contents;}
    .footer-contact > div:nth-child(1){grid-column:1;grid-row:1;}
    .footer-contact > div:nth-child(2){grid-column:2;grid-row:1;}
    .wa-blok{
      grid-column:3;grid-row:1 / span 3;
      display:block;
      border-bottom:none;padding-bottom:0;margin-bottom:0;
    }
    /* de knop rekte mee met de footerkolom en werd daardoor een brede balk */
    .wa-btn{max-width:310px;}
    .wa-blok p{margin-top:16px;max-width:42ch;}
    .footer-social{grid-column:1;grid-row:2;margin-bottom:0;}
    .footer-links{grid-column:2;grid-row:2;margin-bottom:0;}
    footer > .wrap > span{grid-column:1 / span 2;grid-row:3;}

    /* De uitspraak van Fisichella is geen bijschrift maar het sterkste stukje
       bewijs op de pagina: een drievoudig Grand Prix-winnaar over Juste. Op
       desktop staat hij daarom als citaat, niet als onderschrift. */
    .quote-photo .qc{padding:44px 40px 38px;}
    .quote-photo .qc p{
      font-size:clamp(1.7rem, 2.1vw, 2.7rem);
      line-height:1.2;max-width:20em;
    }
    .quote-photo .qc cite{margin-top:18px;letter-spacing:0.07em;}
    /* Op desktop is er ruimte zat, dus daar blijft het één regel met het
       streepje ertussen. Het streepje staat in de CSS omdat het alleen in die
       ene opmaak hoort; in de HTML zou het op mobiel dubbelop staan. */
    .quote-photo .qc cite span{display:inline;}
    .quote-photo .qc cite span::before{content:" — ";}

    /* Het bijschrift op de schermbrede POV-video stond op 22 px van de
       linkerrand — nergens anders op de desktopsite begint tekst zo ver naar
       links. Het beeld mag tot de rand lopen, de tekst erop hoort op de
       kolomlijn te staan, gelijk met elke kop en alinea. */
    /* Net als bij de collage: `.bleed` rekt op naar 100vw, en die 100vw telt de
       schuifbalk mee. Het blok begint daardoor een paar pixels vóór het scherm
       en dan klopt de kolomlijn niet meer. De sectie is zelf al schermbreed,
       dus 100% volstaat. */
    /* v73: niet meer schermbreed maar even groot als de 360°-video op Racing
       (`.video-kaart`): op de kolom, zelfde afgeronde hoeken, zelfde 16:11 en
       het bijschrift op dezelfde plek binnen het kader. */
    .pov-strip.bleed{
      width:auto;left:auto;right:auto;
      margin-left:var(--side);margin-right:var(--side);
      border-radius:var(--r);
    }
    .pov-strip .car-cap{left:22px;right:22px;bottom:20px;}
    .pt-content{padding-bottom:var(--sec);}

    /* bijschrift over beeld mag mee-groeien */
    .photo-cap{padding:40px 36px 30px;}
    .photo-cap b{font-size:2.1rem;}
    .photo-cap span{font-size:1rem;letter-spacing:0.07em;}

    /* de schuine groene band met losse woorden */
    .marquee-inner{padding:20px 0;}
    .marquee-track span{font-size:1.7rem;padding:0 28px;letter-spacing:-0.02em;}

    /* Een knoppenrij met maar één knop erin. Dat komt alleen voor onderaan
       Business Club: "Plan een kennismaking". Overal elders staat een omlijnde
       knop náást een groene, als tweede keus. Daar stond hij in zijn eentje,
       als dun pilletje geklemd tussen een felle fotostrook en de footer — en
       dat is nou net de enige actie die die pagina van je vraagt. Hij krijgt
       hier het groene jasje van zijn tweelingbroer op Partners, waar dezelfde
       uitnodiging staat, plus lucht boven en onder zodat hij losstaat van het
       beeld erboven en de footer eronder. */
    .hero-cta:has(.btn:only-child){margin-top:48px !important;margin-bottom:30px;}
    .hero-cta:has(.btn:only-child) .btn-outline{
      background:var(--grind);border-color:var(--grind);color:var(--bg);
      animation:glowPulse 3.2s ease-in-out infinite;
    }
    .hero-cta:has(.btn:only-child) .btn-outline:hover{
      background:#3cf53c;border-color:#3cf53c;color:var(--bg);
    }

    .naar-boven{width:56px;height:56px;right:28px;bottom:28px;}
    .naar-boven svg{width:23px;height:23px;}

    /* knoppen forser */
    .btn{padding:21px 40px;font-size:1.12rem;letter-spacing:0.05em;}

    /* menu in de balk; de hamburger blijft als achtervang tot 1000 px.
       Massieve achtergrond in plaats van een verloop: op een breed scherm
       schuiven koppen er anders zichtbaar doorheen. */
    .floating-nav{
      padding:18px var(--side);
      background:rgba(5,5,5,0.92);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }
    .fn-links{
      display:flex;gap:34px;
      font-family:'Chakra Petch',sans-serif;font-weight:700;
      font-size:1rem;letter-spacing:0.06em;text-transform:uppercase;
    }
    .fn-links a{
      color:var(--paper);text-decoration:none;opacity:0.75;position:relative;
      padding-bottom:4px;
      text-shadow:0 2px 12px rgba(0,0,0,0.9);transition:opacity .2s ease;
    }
    /* groene streep die vanuit het midden uitklapt */
    .fn-links a::after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
      background:var(--grind);transform:scaleX(0);transform-origin:right;
      transition:transform .34s cubic-bezier(.16,.8,.4,1);
    }
    .fn-links a:hover{opacity:1;}
    .fn-links a:hover::after{transform:scaleX(1);transform-origin:left;}
    .fn-links a[aria-current="page"]{color:var(--grind);opacity:1;}
    .fn-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}

    /* staande hero's zijn op een breed scherm veel te hoog: 1180 gedeeld door
       0,78 is ruim 1500 px. Liggend kader, beeld snijdt zelf bij. */
    .about-hero-media{aspect-ratio:16/9;object-position:52% 28%;}
    /* Die 28% is afgestemd op het staande portret van Juste. Bij de zaalfoto
       van de Business Club sneed hij precies de mensen eruit: die foto heeft
       het onderwerp lager in beeld. Per foto bijstellen, zonder de HTML te
       raken — op mobiel geldt dit niet, daar is de uitsnede staand. */
    .about-hero-media[src$="event-podium.jpg"]{object-position:50% 55%;}
    .sub-hero .about-hero-media{aspect-ratio:16/9;}

    /* de streep boven de footer liep van schermrand tot schermrand */
    footer{border-top:none;padding-top:0;}
    footer > .wrap{border-top:1px solid var(--line);padding-top:34px;}

    /* een .wrap binnen een smal blok mag de paginabrede zijmarge niet erven;
       anders blijft er nauwelijks tekstbreedte over */
    /* Het witte blok stond als een smalle kaart midden op een zwarte pagina.
       Nu even breed als de rest van de kolom, met de linkerrand op de
       kolomlijn. De binnenmarge groeit mee, anders plakt de tekst aan de rand. */
    .club-block{
      width:calc(100% - (var(--side) * 2));
      max-width:1320px;
      margin-left:var(--side);margin-right:auto;
      padding:62px 0 66px;
    }
    .club-block .wrap{padding:0 64px;}

    /* Het witte prijsblok houdt maar drie dingen vast: een label, een bedrag
       en een knop. Sinds het blok de volle kolombreedte heeft, stond dat alles
       tegen de linkerrand met negenhonderd pixels wit ernaast. De kop en de
       opsomming erboven staan gecentreerd, dus dit hoort mee te doen — anders
       springt het oog binnen één scherm drie keer terug naar links.
       Alleen het blok mét een prijs; het blok met de fotocollage op de
       homepage blijft links uitgelijnd, want daar draagt het beeld de breedte. */
    .club-block:has(.prijs){text-align:center;}
    .club-block:has(.prijs) .prijs b{font-size:clamp(2.9rem, 4vw, 4.4rem);}
    .club-block:has(.prijs) .prijs span{
      max-width:48ch;margin-left:auto;margin-right:auto;font-size:1rem;}
    .club-block:has(.prijs) .tag{display:block;}
    /* Dezelfde valkuil als bij .wrap: een .inset binnen het witte blok erft de
       paginabrede zijmarge en staat dan 240 px naar binnen terwijl de kop op
       64 px begint. Beeld en tekst lijnen nu uit binnen het blok. */
    .club-block .inset{width:calc(100% - 128px);margin-left:64px;margin-right:auto;max-width:none;}
    /* niet helemaal loslaten: een regel van 1200 px leest niet meer */
    .club-block .wrap p{max-width:68ch;}
    .club-block h3{font-size:1.8rem;}

    /* ----------------------------------------------------------------------
       v74: HET PRIJSBLOK OP BUSINESS CLUB. Was een wit vlak met drie regels
       gecentreerd in het midden — correct, maar van elke site. Nu een
       startnummerbord: links een neongroen vlak met een schuine rand en het
       startnummer 27 groot en zwart, aangesneden door de onderrand; rechts op
       crème het bedrag, links uitgelijnd. Het bijschrift "een knipoog naar
       mijn vaste startnummer" krijgt daarmee eindelijk iets om naar te knipogen.
       Geen wijziging in de HTML: het cijfer is een ::before, het groene vlak een
       verloop in de achtergrond. Alleen vanaf 768 px; mobiel ongemoeid.
       ---------------------------------------------------------------------- */
    .club-block:has(.prijs){
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
      align-items:center;
      min-height:460px;padding:0;text-align:left;
      background:linear-gradient(101deg, var(--grind) 0 39%, var(--paper) calc(39% + 1px) 100%);
    }
    .club-block:has(.prijs)::before{
      content:"27";
      position:absolute;left:34px;bottom:-0.13em;
      font-family:'Chakra Petch',sans-serif;font-style:italic;font-weight:700;
      font-size:clamp(15rem, 21vw, 25rem);line-height:1;letter-spacing:-0.06em;
      color:#14140f;pointer-events:none;
    }
    .club-block:has(.prijs) .wrap{
      grid-column:2;position:relative;
      padding:64px 64px 64px 56px;
    }
    .club-block:has(.prijs) .prijs b{
      font-size:clamp(3.4rem, 5vw, 5.8rem);letter-spacing:-0.045em;line-height:0.95;
      margin-top:6px;
    }
    .club-block:has(.prijs) .prijs span{
      margin:22px 0 0;padding-top:18px;max-width:40ch;
      border-top:1px solid rgba(20,20,15,0.16);
      font-size:1.05rem;
    }
    .club-block:has(.prijs) .btn{margin-top:32px !important;}

    /* Fotomozaïek. De hoge foto links bepaalde zijn eigen hoogte via een
       beeldverhouding, de twee kleine rechts ook — en die twee kwamen samen
       ruim honderd pixels tekort. Vandaar het gat rechtsonder. Nu bepaalt het
       mozaïek zelf zijn hoogte en vullen de drie foto's hun vak; de uitsnede
       doet `object-fit:cover` al. */
    .photo-mosaic{
      max-width:none;
      grid-template-columns:1.2fr 1fr;
      grid-template-rows:1fr 1fr;
      aspect-ratio:1.55;
      gap:16px;
    }
    .photo-mosaic .m-tall,
    .photo-mosaic .m-small{aspect-ratio:auto;height:100%;min-height:0;}

    /* De auto liep van schermrand tot schermrand en werd daardoor het grootste
       ding op de pagina. Nu iets ingehouden, gecentreerd in het beeldvlak.
       De inrij-animatie blijft werken: die zit op een transform van de foto. */
    .auto-beeld{padding:0 28px;}
    .auto-foto{max-width:1400px;margin:0 auto;}

    .wizard{max-width:760px;}

    /* ----------------------------------------------------------------------
       Muisgedrag. Staat apart, zodat een tablet met alleen aanraking hier
       niets van meekrijgt en een knop niet blijft "hangen" na een tik.
       ---------------------------------------------------------------------- */
    @media (hover: hover) and (pointer: fine){

      .btn{transition:transform .22s cubic-bezier(.16,.8,.4,1),
                      background-color .22s ease, color .22s ease,
                      border-color .22s ease;}
      /* geen box-shadow hier: .btn-fill heeft al een pulserende gloed en die
         animatie wint het altijd van een hover-regel */
      .btn-fill:hover{transform:translateY(-3px);background:#3cf53c;}
      .btn-outline:hover{transform:translateY(-3px);border-color:var(--grind);color:var(--grind);}
      .btn:active{transform:translateY(-1px);}

      .logo-cell{transition:background-color .25s ease;}
      .logo-cell:hover{background:rgba(239,238,231,0.04);}
      .logo-cell:hover img{opacity:1;}

      .spec-tegel{transition:transform .25s cubic-bezier(.16,.8,.4,1), background-color .25s ease;}
      .spec-tegel:hover{transform:translateY(-4px);background:#2a2a24;}

      /* alleen het beeld ín het kader schaalt; het kader zelf niet, want
         daar zitten de reveal- en parallax-transforms op */
      .car-item img, .collage img, .photo-mosaic img{
        transition:transform .6s cubic-bezier(.16,.8,.4,1);
      }
      .car-item:hover img, .collage figure:hover img, .photo-mosaic > *:hover img{
        transform:scale(1.05);
      }
      .car-item, .collage figure, .photo-mosaic > *{overflow:hidden;}

      .reel-item{transition:transform .4s cubic-bezier(.16,.8,.4,1);}
      .reel-item:hover{transform:translateY(-6px);}

      .footer-links a{transition:color .2s ease;}
      .footer-links a:hover{color:var(--grind);}
    }
  }

  /* ==========================================================================
     Vanaf 1080 px: kop links, inleiding rechts.
     Geldt alleen voor blokken met de klasse .kop-duo — dat zijn de .wrap's
     waarin een label, een h2 en een inleidende alinea direct onder elkaar
     staan. Alles wat daarna in datzelfde blok volgt (knop, raster, formulier)
     gaat over de volle breedte, net als eerst.
     Wil je dit ergens niet, haal dan enkel `kop-duo` uit die ene regel HTML.
     ========================================================================== */
  @media (min-width: 1080px){
    /* ----------------------------------------------------------------------
       v77: FOTOBLOEI op Partners (Jouw merk), naar het voorbeeld van
       thegrind.nl. De sectie blijft staan (sticky) terwijl je 1,6 scherm
       scrolt. In die tijd krimpt de middelste foto van schermvullend naar zijn
       plek in een raster van 5 × 3, en verschijnen de andere veertien — eerst
       de naaste buren, dan de hoeken. Terugscrollen doet alles omgekeerd.
       Het script (fotobloei in script.js) zet alleen twee dingen: de schaal van
       het raster en per tegel `--t` (0 = weg, 1 = op zijn plek).
       De carrousel erboven gaat vanaf hier uit; tot 1080 px blijft die staan.
       ---------------------------------------------------------------------- */
    .pt-merk .carrousel[data-auto]{display:none !important;}
    /* v79: van 230vh naar 185vh. Het raster was bij 59% van de
       scrollafstand al klaar en bleef daarna nog ruim een half scherm stilstaan
       voordat de pagina verder ging. Nu is het klaar bij ±92% en scrolt de
       pagina vrijwel direct door; de snelheid van het opbloeien is gelijk. */
    .bloei{display:block;position:relative;height:185vh;margin-top:10px;}
    .bloei-vast{
      position:sticky;top:0;height:100vh;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
      padding-top:70px;          /* de balk bovenin */
      box-sizing:border-box;
    }
    .bloei-raster{
      --gat:24px;
      /* tegelbreedte: past zowel in de kolom als in de hoogte van het venster */
      --tegel:min(calc((100vw - 2 * var(--side) - 4 * var(--gat)) / 5),
                  calc((100vh - 70px - 28px - 2 * var(--gat)) / 3 / 1.25));
      display:grid;
      grid-template-columns:repeat(5, var(--tegel));
      grid-auto-rows:calc(var(--tegel) * 1.25);
      gap:var(--gat);
      transform:scale(var(--schaal, 1));
      transform-origin:50% 50%;
      will-change:transform;
    }
    .bloei-tegel{
      --t:0;
      margin:0;position:relative;overflow:hidden;
      border-radius:18px;background:var(--steel);
      /* v78: verschijnt wazig op zijn eigen plek en wordt scherper en groter */
      opacity:calc(0.15 + 0.85 * var(--t));
      filter:blur(calc((1 - var(--t)) * 16px));
      transform:scale(calc(0.55 + 0.45 * var(--t)));
      will-change:transform, opacity, filter;
    }
    .bloei-tegel img{width:100%;height:100%;object-fit:cover;display:block;}
    .bloei-midden{--t:1;}
    .bloei-tegel.nog-niet{visibility:hidden;}
    .bloei-midden::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(0deg, rgba(5,5,5,0.55), rgba(5,5,5,0.15));
    }
    .bloei-tekst{
      position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;
      font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
      font-size:calc(var(--tegel) * 0.15);line-height:0.9;letter-spacing:-0.045em;
      color:var(--paper);text-align:center;
    }
    @media (prefers-reduced-motion: reduce){
      .bloei{height:auto;}
      .bloei-vast{position:relative;height:auto;padding:40px 0;}
      .bloei-tegel{--t:1 !important;}
    }
    /* v68: fotoraster van Partners en Business Club (zie het blok vanaf 768 px). */
    .carrousel[data-auto].bleed{grid-template-columns:repeat(3, minmax(0,1fr));gap:18px;}
    .pt-merk .carrousel[data-auto] .car-item:first-child{grid-column:auto;aspect-ratio:4/3;}
    .stapel-rest .carrousel[data-auto].bleed{
      grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
    }
    .stapel-rest .carrousel[data-auto] .car-item:first-child{
      grid-column:1;grid-row:1 / span 2;aspect-ratio:auto;height:100%;
    }
    .wrap.kop-duo{
      display:grid;
      grid-template-columns:minmax(0,1.24fr) minmax(0,0.76fr);
      column-gap:56px;
      align-items:end;
    }
    /* standaard: volle breedte, eigen rij */
    .wrap.kop-duo > *{grid-column:1 / -1;}
    .wrap.kop-duo > .tag{grid-column:1;grid-row:1;}
    .wrap.kop-duo > h2{grid-column:1;grid-row:2;margin-top:10px;max-width:none;}
    /* de inleiding zit in de tweede kolom en lijnt onderaan uit met de kop.
       !important omdat de marge in de HTML zelf staat (style="margin-top:18px") */
    /* LET OP — dit stond fout en gaf overlappende tekst.
       De regel pakte élke `p.body-txt` in het blok en zette die op rij 2,
       kolom 2. Staan er twee alinea's onder de kop (Over Juste, Partners),
       dan belandden ze in hetzelfde vak en drukten ze door elkaar heen.
       Hetzelfde gebeurde op Racing met een losse regel verderop in het blok.
       Nu telt alleen wat direct op de `h2` volgt: de eerste alinea rechts, een
       eventuele tweede eronder. Alles wat later in het blok komt valt terug op
       de volle breedte, zoals het hoort. */
    .wrap.kop-duo > h2{grid-row:2 / span 2;}
    .wrap.kop-duo > h2 + p.body-txt{
      grid-column:2;grid-row:2;
      margin-top:0 !important;
      max-width:46ch;
      padding-bottom:0.45em;
    }
    .wrap.kop-duo > h2 + p.body-txt + p.body-txt{
      grid-column:2;grid-row:3;align-self:start;
      margin-top:16px !important;
      max-width:46ch;
    }
    /* Blokken met twéé alinea's lijnen boven uit in plaats van onder. Met
       onderuitlijning zakt de kop naar de onderkant van beide alinea's, en dan
       staat het label erboven ineens los te zweven — dat was te zien bij
       "20 juni 2026" en "Begeleiding" op Over Juste. Label en kop horen bij
       elkaar; die band weegt zwaarder dan een gelijke onderlijn. */
    .wrap.kop-duo:has(> h2 + p.body-txt + p.body-txt){align-items:start;}
    .wrap.kop-duo:has(> h2 + p.body-txt + p.body-txt) > h2{align-self:start;}

    /* Variant `naast-blok`: de inleiding zakt mee naar de rij van het blok
       eronder in plaats van naast de kop te blijven hangen. Staat op het
       contactblok van de homepage — daar bleef rechts een half scherm leeg
       naast het formulier terwijl de tekst er hoog boven zweefde. */
    .wrap.kop-duo.naast-blok > h2{grid-row:2;}
    .wrap.kop-duo.naast-blok > p.body-txt{
      grid-row:3;align-self:start;
      padding-top:16px;padding-bottom:0;
    }

    /* ----------------------------------------------------------------------
       v76: INTRO ONDER DE HERO (.intro-duo) — staat alleen op Business Club.
       De zin "Voor ondernemers die…" stond als klein kopje in gewone
       schrijfwijze boven drie alinea's, met de rechterhelft leeg. Nu zelfde
       opbouw en zelfde kolommen als .kop-duo: kop in hoofdletters links, tekst
       rechts, beginnend op precies dezelfde lijn als de inleiding bij "Zo ziet
       een event eruit" verderop. De koppen elders zijn niet aangeraakt.
       De h3 heeft zijn opmaak inline in de HTML, vandaar !important.
       ---------------------------------------------------------------------- */
    /* v100: kop en tekst weer onder elkaar (Gerard): kop in hoofdletters
       bovenaan, alinea's eronder. Was sinds v76 naast elkaar. */
    .wrap.intro-duo{display:block;}
    .wrap.intro-duo > p.body-txt{max-width:64ch;}
    .wrap.intro-duo > h3 + p.body-txt{margin-top:22px;}
    .wrap.intro-duo > h3{
      font-size:clamp(2.4rem, 3.2vw, 3.8rem) !important;
      line-height:0.92 !important;letter-spacing:-0.045em;
      text-transform:uppercase;margin:0 !important;
    }
    .wrap.kop-duo.naast-blok > .wizard{grid-column:1;grid-row:3;align-self:start;}
  }

  @media (min-width: 1000px){
    /* vanaf hier zijn de links in de balk genoeg en kan de hamburger weg */
    .fn-icon#menuBtn{display:none;}
    /* v87: NL/EN-knop naast het mailicoon. Absoluut geplaatst, zodat de
       verdeling van logo, menu en icoon in de balk niet verschuift. */
    .floating-nav .fn-lang{
      display:inline-flex;align-items:center;justify-content:center;
      position:absolute;right:calc(var(--side) + 44px);top:50%;transform:translateY(-50%);
      font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:0.82rem;letter-spacing:0.06em;
      color:var(--paper);text-decoration:none;opacity:0.8;
      padding:5px 11px;border:1px solid var(--line);border-radius:999px;
      transition:border-color .2s ease, color .2s ease, opacity .2s ease;
    }
    .floating-nav .fn-lang:hover{opacity:1;border-color:var(--grind);color:var(--grind);}
  }

  /* ==========================================================================
     Vanaf 1500 px: de kolom van 1180 px liet op een breed scherm meer dan
     600 px leeg. Hier gaat hij naar 1320 px en groeit de rest mee.
     Terugdraaien? Dan dit hele blok weghalen; er verandert niets anders.
     ========================================================================== */
  @media (min-width: 1500px){
    :root{
      --side:calc(50vw - 660px);
      --maxw:780px;
      --sec:96px;
    }
    .body-txt{font-size:1.32rem;}
    .hero-tagline{font-size:1.5rem;}
    .inset{max-width:1320px;}
    .wrap.kop-duo{column-gap:72px;}
  }

  /* ==========================================================================
     v80/v81: DISPLAYLETTER ANTON OP DESKTOP (vanaf 1080 px), ALLE PAGINA'S
     v80 deed dit alleen op de homepage; v81 op de hele site. Naar het voorbeeld
     van vetsocial.nl en thegrind.nl: een smalle, zware letter, dus veel groter
     te zetten zonder dat het de breedte uit loopt. Labels (Chakra Petch),
     lopende tekst (Archivo), bijschriften over beeld en knoppen blijven zoals
     ze zijn, zodat het contrast tussen groot en klein juist toeneemt.
     v81: regelafstand van 0,86–0,9 naar 0,96–0,98. Anton heeft hoge
     hoofdletters; strakker dan dit en de regels raken elkaar (Gerard: "de
     letters staan op/tegen elkaar"). De uitspraak van Fisichella stond al op
     0,98 en was het voorbeeld.
     Anton heeft één gewicht; font-weight 400 voorkomt nep-vet.
     Alleen de homepage heeft daarnaast de lopende band (.groot-band).
     Het woordmerk onderaan de footer (v80–v90) is in v91 weggehaald.
     ========================================================================== */
  @media (min-width: 1080px){
    h1, h2,
    .figure b, .spec-tegel b, .prijs b, .about-badge b,
    .quote-photo .qc p,
    .club-block h3, .wz-titel, .bloei-tekst,
    .wrap.intro-duo > h3{
      font-family:'Anton','Arial Narrow',Impact,sans-serif !important;
      font-weight:400 !important;letter-spacing:0 !important;text-transform:uppercase;
    }
    /* koppen met vaste regels (<br>) nooit zelf laten afbreken */
    h1:has(br), h2:has(br){white-space:nowrap;}

    h2{font-size:clamp(4.2rem, 5.5vw, 6.8rem);line-height:0.98;}
    .section-head h2{font-size:clamp(4.2rem, 5.5vw, 6.8rem);}
    .hero h1{font-size:clamp(6rem, 10.2vw, 13rem);line-height:0.96;}
    .about-hero-content h2{font-size:clamp(5.4rem, 8vw, 10rem);line-height:0.96;}
    .hero-tagline{font-family:'Archivo',sans-serif;font-style:normal;font-weight:700;}

    /* "1,5 mln" moet in een kwart van de kolom passen, vandaar niet groter */
    .figure b{font-size:clamp(4.4rem, 5.4vw, 6.6rem);line-height:0.95;}
    .spec-tegel b{line-height:0.95;}
    .quote-photo .qc p{font-style:normal;font-size:clamp(3rem, 4vw, 5.2rem);line-height:0.98;max-width:22ch;}
    .club-block h3{font-size:clamp(2.2rem, 2.8vw, 3.4rem);line-height:0.98;max-width:26ch;}
    .wrap.intro-duo > h3{line-height:0.98 !important;}
    .wz-titel{font-size:2.6rem;line-height:0.98;}
    .bloei-tekst{line-height:0.98;}

    /* ---- homepage: lopende band met reusachtige tekst over beeld ---- */
    body.pg-home .groot-band{
      display:block;position:relative;overflow:hidden;
      height:clamp(300px, 42vh, 460px);background:#000;
    }
    .groot-band img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      filter:grayscale(0.35) brightness(0.55);
    }
    .groot-band-baan{
      position:absolute;left:0;top:50%;transform:translateY(-50%);
      display:flex;align-items:center;white-space:nowrap;width:max-content;
      animation:bandLoop 60s linear infinite;
    }
    .groot-band-baan span{
      font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;
      text-transform:uppercase;line-height:1;
      font-size:clamp(7rem, 12vw, 15rem);color:var(--paper);padding:0 0.18em;
    }
    .groot-band-baan i{
      font-family:'Chakra Petch',sans-serif;font-style:italic;font-weight:700;
      font-size:clamp(2.4rem, 3.6vw, 4.4rem);color:var(--grind);padding:0 0.4em;
    }
    @keyframes bandLoop{from{transform:translate(0,-50%);}to{transform:translate(-50%,-50%);}}
    @media (prefers-reduced-motion: reduce){ .groot-band-baan{animation:none;} }

    /* v91: het woordmerk onderaan de footer is weggehaald (Gerard vond het niets). */
  }

  /* ==========================================================================
     v83/v84: ANTON OOK OP MOBIEL, ALLE PAGINA'S (tot 1080 px)
     v83 was een proef op alleen de homepage; v84 op de hele site. Zelfde
     aanpak als desktop: smalle zware letter in hoofdletters, regelafstand
     0,96–0,98. Géén nowrap — op een smal scherm mag een kop afbreken in plaats
     van buiten beeld te lopen. Woordmerk in de footer en de lopende band
     blijven op mobiel uit. Terugdraaien: dit hele blok weghalen.
     ========================================================================== */
  @media (max-width: 1079px){
    h1, h2,
    .figure b, .spec-tegel b, .prijs b, .about-badge b,
    .quote-photo .qc p,
    .club-block h3, .wz-titel,
    .wrap.intro-duo > h3{
      font-family:'Anton','Arial Narrow',Impact,sans-serif !important;
      font-weight:400 !important;letter-spacing:0 !important;text-transform:uppercase;
    }
    .hero h1{font-size:clamp(3rem, 14vw, 5.6rem);line-height:0.96;}
    h2, .section-head h2{font-size:clamp(2.5rem, 10.5vw, 4.2rem);line-height:0.98;}
    .about-hero-content h2{font-size:clamp(3rem, 13vw, 5rem);line-height:0.96;}
    .figure b{font-size:clamp(2.4rem, 11vw, 3.6rem);line-height:0.95;}
    .spec-tegel b{line-height:0.95;}
    .quote-photo .qc p{font-style:normal;font-size:clamp(1.8rem, 7.6vw, 2.8rem);line-height:0.98;}
    .club-block h3{font-size:clamp(1.7rem, 7vw, 2.4rem);line-height:0.98;}
    .wrap.intro-duo > h3{font-size:clamp(1.8rem, 7.4vw, 2.6rem) !important;line-height:0.98 !important;}
    .wz-titel{font-size:clamp(1.9rem, 8vw, 2.4rem);line-height:0.98;}
  }

  /* ==========================================================================
     v101: BUSINESS CLUB, INTRO ONDER DE HERO — DESKTOP (vanaf 1080 px)
     v100 (kop en tekst onder elkaar) oogde rommelig: een schreeuwende kop van
     drie regels in hoofdletters, daaronder een smalle tekstkolom en rechts
     niets. Nu naar het voorbeeld van vetsocial.nl ("We turn paid social into a
     growth engine…"): de zin als rustige, grote openingszin in gewone
     schrijfwijze over de volle breedte, en de drie alinea's eronder in drie
     kolommen naast elkaar. Bewust géén Anton: dit is een zin, geen kop.
     Mobiel ongewijzigd.
     ========================================================================== */
  @media (min-width: 1080px){
    .wrap.intro-duo{
      display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
      column-gap:clamp(36px, 3.4vw, 64px);align-items:start;
      padding-bottom:clamp(28px, 2.6vw, 44px);
    }
    .wrap.intro-duo > h3{
      grid-column:1 / -1;
      font-family:'Archivo',sans-serif !important;font-weight:700 !important;
      text-transform:none !important;letter-spacing:-0.02em !important;
      font-size:clamp(2.2rem, 2.9vw, 3.3rem) !important;line-height:1.14 !important;
      max-width:30ch;margin:0 0 clamp(36px, 3.2vw, 52px) !important;color:var(--paper);
    }
    .wrap.intro-duo > p.body-txt{
      max-width:none;margin-top:0 !important;
      /* v102: zonder lijntje erboven */
    }
  }



  /* ==========================================================================
     v104: EÉN SECTIERITME OP DESKTOP (vanaf 1080 px), ALLE PAGINA'S
     Veel secties hadden hun krappe mobiele marge inline in de HTML staan
     (16–48 px). Op een groot scherm oogt dat propperig. Naar het voorbeeld van
     vetsocial.nl en thegrind.nl krijgt nu elke sectie boven en onder dezelfde
     ruime marge: var(--sec) = 110 px, vanaf 1500 px 140 px (was 76/96).
     Uitzonderingen:
     - de hero's zelf;
     - de sectie direct na een hero: die sluit bewust aan op de foto en houdt
       bovenaan zijn eigen (kleine) marge;
     - twee donkere secties direct na elkaar: de tweede begint met een halve
       marge, anders loopt het wit op tot tweemaal zoveel als elders.
     !important is nodig omdat de mobiele marges inline staan. Mobiel ongemoeid.
     ========================================================================== */
  @media (min-width: 1080px){
    :root{--sec:110px;}
    /* alle secties, behalve de hero's en de sectie direct na een hero */
    body > section:not(.hero):not(.sub-hero):not(.hero + section):not(.sub-hero + section),
    .stapel > section{
      padding-top:var(--sec) !important;
      padding-bottom:var(--sec) !important;
    }
    /* direct na een hero: bovenaan eigen marge houden, onderaan wel het ritme */
    body > .hero + section, body > .sub-hero + section{padding-bottom:var(--sec) !important;}

    /* donker na donker: halve marge bovenaan. "Grijs" herkennen we aan
       background:var(--bg-alt) inline of aan een klasse met grijze achtergrond. */
    body > section:not([style*="bg-alt"]):not(.grijs-desktop):not(.pt-merk):not(.pt-lijst):not(.pt-content):not(.hero):not(.sub-hero):not(.partners-section:not(.pt-logos))
      + section:not([style*="bg-alt"]):not(.grijs-desktop):not(.partners-section:not(.pt-logos)):not(.pt-content):not(.pt-lijst):not(.pt-merk):not(.hero + section):not(.sub-hero + section){
      padding-top:calc(var(--sec) * 0.5) !important;
    }
    /* v105: de videostrook op Home houdt onderaan zijn eigen korte marge;
       het grijze vlak van "Gezien en gehoord bij" loopt onder de onderste helft
       van de video's door en is daarop afgemeten (--reelgat). Met de volle
       marge stond de strook te ver naar beneden, los van de video's. */
    #videos{padding-bottom:var(--reelgat) !important;}
    /* v107: "Gezien en gehoord bij" oogde propperig. Meer lucht boven het label
       en onder de tekst, grotere logo's met meer tussenruimte. */
    /* v156: was 60-96 px boven en 70-110 px onder, plus de 34 px ondermarge
       van #videos erbovenop: boven viel daardoor tot 20 px ruimer uit dan
       onder. Nu één maat voor allebei, met --reelgat in mindering bovenaan. */
    /* v166: meer lucht in het paneel, boven en onder even veel. Van 66-96 px
       naar 90-126 px. Dit is ruimte bínnen het grijze vlak, dus het vlak zelf
       wordt hoger en blijft aansluiten op de video's erboven en de band
       eronder — anders dan v157, waar de ruimte erbuiten kwam te staan. */
    .media-strip{padding:calc(clamp(90px, 7.2vw, 126px) - var(--reelgat)) 0 clamp(90px, 7.2vw, 126px) !important;}
    .media-strip .marquee{margin-top:clamp(28px, 2.6vw, 44px) !important;}
    .media-strip .marquee-track{row-gap:34px;}
    .media-strip img{height:clamp(40px, 3vw, 54px);margin:0 clamp(22px, 2vw, 38px);}
    .media-strip .media-note{margin-top:clamp(28px, 2.6vw, 44px) !important;}
    /* v105/v106: Racing, "Stap bij mij in" grijs op desktop, zodat de onderkant
       afwisselt: grijs (De auto), zwart (foto's), grijs (360°), zwart
       (Meerijden). Mobiel blijft zwart. */
    .grijs-desktop{background:var(--bg-alt);}
    /* Business Club: de stapel bestaat uit drie donkere delen */
    .stapel:has(.bc-lijst) > section + section{padding-top:calc(var(--sec) * 0.5) !important;}
  }
  @media (min-width: 1500px){
    :root{--sec:140px;}
  }

  /* ==========================================================================
     v109a: PRIJSBLOK BUSINESS CLUB — FOTO I.P.V. HET GROENE VLAK MET "27"
     Links nu de achterkant van Justes auto met startnummer 27 op de
     achtervleugel (images/bc-achterkant-27.jpg). De schuine rand blijft, met een
     smalle groene streep langs de naad als verwijzing naar het oude vlak. Het
     bijschrift "een knipoog naar mijn vaste startnummer" wijst nu naar de echte
     auto. Vanaf 768 px; mobiel ongemoeid (daar geen foto).
     ========================================================================== */
  @media (min-width: 768px){
    .club-block:has(.prijs){
      background:var(--paper);
      min-height:clamp(440px, 36vw, 540px);
    }
    .club-block:has(.prijs)::before{
      content:"";
      left:0;top:0;bottom:0;width:46%;
      font-size:0;
      background:url("images/bc-achterkant-27-pitlane.jpg") 30% 50% / cover no-repeat; /* v119: nieuwe foto _56A8107 */
      clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%);
    }
    /* groene streep langs de schuine naad */
    .club-block:has(.prijs)::after{
      content:"";position:absolute;top:0;bottom:0;left:0;width:46%;
      background:var(--grind);pointer-events:none;
      clip-path:polygon(100% 0, calc(100% + 0px) 0, calc(86% + 0px) 100%, calc(86% - 10px) 100%, calc(100% - 10px) 0);
    }
  }

  /* ==========================================================================
     v109b: PARTNERS, MOGELIJKHEDEN — COMPACT (desktop vanaf 1080 px)
     De zes punten in twee kolommen van drie in plaats van één lange lijst; de
     tekstkant wordt breder, de collage rechts iets smaller. Het blok is daardoor
     ongeveer de helft lager en past op een laptop grotendeels in beeld.
     ========================================================================== */
  @media (min-width: 1080px){
    .pt-lijst .wrap.lijst-duo{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:56px;}
    .pt-lijst .beeld-collage{max-width:480px;margin-top:clamp(40px, 4vw, 70px);}
    .pt-lijst .lijst{
      display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
      grid-template-rows:repeat(3, auto);grid-auto-flow:column;
      column-gap:40px;border-top:none;
    }
    .pt-lijst .lijst li{border-top:1px solid var(--line);border-bottom:none;padding:18px 0;gap:16px;font-size:1.04rem;align-items:flex-start;}
    .pt-lijst .lijst li:nth-child(3), .pt-lijst .lijst li:nth-child(6){border-bottom:1px solid var(--line);}
    /* v110: één grote foto in plaats van vier: Juste met trofee, racepak vol
       partnerlogo's. Zelfde kanteling als de foto bij Lidmaatschap op Business
       Club. De andere drie foto's staan nog in de HTML maar zijn hier verborgen. */
    .pt-lijst .beeld-collage{display:block;max-width:440px;margin-top:clamp(20px, 2vw, 40px);}
    .pt-lijst .bc-kolom{display:block;margin:0 !important;transform:none !important;}
    .pt-lijst .bc-kolom:last-child,
    .pt-lijst .bc-kolom:first-child figure:first-child{display:none;}
    .pt-lijst .bc-kolom:first-child figure:nth-child(2){aspect-ratio:3/4;}
  }


/* v112/v116: Business Club-hero = groepsfoto Racesquare (rechtgezet 1,4°).
   Mobiel images/bc-hero-groep.jpg, desktop via <picture> images/desktop/. */
.about-hero-media.bc-hero-groep{object-position:47% 50%;}
@media (min-width: 768px){
  .about-hero-media.bc-hero-groep{object-position:50% 58%;}
}

/* ===================================================================
   v120: SHOP (voorbeeldpagina shop.html / en/shop.html, noindex, niet
   in het menu). Producten verkocht en verstuurd door Tuatara; kaarten
   linken straks naar de productpagina bij Tuatara.
   =================================================================== */
.shop-hero{position:relative;overflow:hidden;background:#000;padding:0 0 44px;}
.shop-hero-beeld{position:relative;height:66vh;min-height:380px;max-height:600px;}
.shop-hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;}
.shop-hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,#000 100%);}
.shop-hero-tekst{position:relative;margin-top:-70px;}
.shop-hero h1{font-size:clamp(3.4rem,17vw,5.6rem);line-height:0.9;letter-spacing:-0.05em;text-transform:uppercase;margin:10px 0 18px;}
.shop-hero h1 em{font-style:normal;color:var(--grind);}
.shop-badge{display:inline-block;margin-top:22px;padding:9px 16px;border:1px solid var(--grind);border-radius:999px;color:var(--grind);
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase;}

.shop-collectie{padding:var(--sec) 0 10px;}
.shop-groep{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--paper-dim);margin:38px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.shop-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.shop-kaart{background:var(--bg-alt);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;}
.shop-beeld{margin:0;background:#fff;aspect-ratio:4/3;position:relative;}
.shop-grid.twee .shop-beeld{aspect-ratio:16/8;}
.shop-beeld img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain;transition:transform .6s cubic-bezier(.16,.8,.4,1);}
.shop-info{padding:18px 20px 22px;display:flex;flex-direction:column;gap:4px;flex:1;}
.shop-info h3{font-size:1.5rem;letter-spacing:-0.02em;}
.shop-kleur{color:var(--paper-dim);font-size:0.98rem;}
.shop-meta{display:flex;justify-content:space-between;gap:12px;margin:14px 0 16px;padding-top:12px;border-top:1px solid var(--line);
  font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--paper-dim);}
.shop-knop{margin-top:auto;display:block;text-align:center;padding:14px 20px;border-radius:999px;border:1px dashed var(--line);
  color:var(--paper-dim);font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.05em;text-transform:uppercase;cursor:default;}
.shop-knop--live{border:none;background:var(--grind);color:var(--bg);cursor:pointer;}

.shop-hoe{padding:var(--sec) 0 0;}
.shop-stappen{list-style:none;counter-reset:stap;margin:26px 0 0;padding:0;display:grid;gap:12px;}
.shop-stappen li{counter-increment:stap;position:relative;padding:18px 18px 18px 74px;border:1px solid var(--line);border-radius:var(--r-sm);}
.shop-stappen li::before{content:counter(stap,decimal-leading-zero);position:absolute;left:18px;top:16px;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-style:italic;font-size:1.6rem;color:var(--grind);}
.shop-stappen b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.12rem;margin-bottom:3px;}
.shop-stappen span{color:var(--paper-dim);line-height:1.5;}

.shop-cta{padding:var(--sec) 0 calc(var(--sec) + 10px);}
.shop-cta .body-txt{margin:14px 0 24px;}

@media (min-width: 768px){
  .shop-hero{display:grid;grid-template-columns:1fr 1fr;min-height:88vh;padding:0;align-items:center;}
  .shop-hero-beeld{order:2;height:auto;max-height:none;align-self:stretch;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);}
  .shop-hero-beeld img{position:absolute;inset:0;object-position:50% 88%;}
  .shop-hero-beeld::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 30%);}
  .shop-hero-tekst{order:1;margin-top:0;padding-top:120px;padding-bottom:80px;}
  .shop-hero h1{font-size:clamp(5rem,8.4vw,10.5rem);}
  .shop-grid.drie{grid-template-columns:repeat(3,1fr);gap:22px;}
  .shop-grid.twee{grid-template-columns:repeat(2,1fr);gap:22px;}
  .shop-grid.twee .shop-beeld{aspect-ratio:16/7;}
  .shop-kaart:hover .shop-beeld img{transform:scale(1.04);}
  .shop-stappen{grid-template-columns:repeat(3,1fr);gap:22px;}
  .shop-stappen li{padding:26px 24px 28px;}
  .shop-stappen li::before{position:static;display:block;font-size:2.6rem;margin-bottom:14px;}
  .shop-cta .wrap{text-align:center;}
  .shop-cta h2,.shop-cta .body-txt{margin-left:auto;margin-right:auto;}
  .shop-cta h2{max-width:none;}
}

/* v122: (1) kop-duo met twee alinea's — de hoge kop beslaat rij 2 en 3; de
   extra hoogte ging over beide rijen verdeeld, waardoor er een groot gat
   tussen de alinea's viel (Partners "Investeren in potentie", Over Juste).
   Rij 3 krijgt nu 1fr, zodat alleen die de restruimte opvangt.
   (2) knop in het lichte prijsblok werd bij hover felgroen met lichte tekst
   (onleesbaar): blijft nu donker, net iets lichter. */
@media (min-width: 1080px){
  .wrap.kop-duo:has(> h2 + p.body-txt + p.body-txt){grid-template-rows:auto auto 1fr;}
}
@media (hover: hover) and (min-width: 768px){
  .club-block .btn-fill:hover{background:#2e2e27;color:var(--paper);}
}

/* v124: fotomozaïek op mobiel (< 768 px) gelijk aan desktop — de twee kleine
   foto's rechts vullen samen precies de hoogte van de grote links. Eerder
   hadden beide een eigen vaste verhouding, waardoor rechts onderaan een gat
   overbleef. De grote foto bepaalt nu de hoogte; rechts deelt die in twee. */
@media (max-width: 767px){
  .photo-mosaic{grid-template-rows:1fr 1fr;}
  .photo-mosaic .m-small{aspect-ratio:auto;position:relative;min-height:0;}
  .photo-mosaic .m-small img{position:absolute;inset:0;}
}

/* v128: fotobloei Partners — middelste foto ("Hier staat jouw merk") begon
   wazig. Oorzaak: `will-change:transform` laat de browser het raster één keer
   op schaal 1 tekenen en daarna als plaatje opblazen (start ±2,5×). Zonder
   will-change tekent hij bij elke schaal opnieuw, dus direct scherp. De
   middelste tegel krijgt ook geen eigen laag meer. */
@media (min-width: 1080px){
  .bloei-raster{will-change:auto;}
  .bloei-midden{will-change:auto;}
}

/* v133: vlaggetje in de NL/EN-knop rechtsboven (desktop). Inline SVG i.p.v.
   emoji, want Windows toont vlag-emoji als letters. De vlag hoort bij de taal
   waar de knop naartoe gaat (op NL-pagina's dus de Britse vlag + EN). */
.fn-vlag{display:none;}
@media (min-width: 1000px){
  .floating-nav .fn-lang{gap:7px;padding:5px 11px 5px 8px;}
  .floating-nav .fn-vlag{display:block;width:20px;height:13px;border-radius:2px;flex:none;
    box-shadow:0 0 0 1px rgba(255,255,255,0.18);}
}
/* v133: tussen 1000 en 1279 px is de balk krap; daar alleen de vlag tonen
   (aria-label zegt nog steeds English/Nederlands). */
@media (min-width: 1000px) and (max-width: 1279px){
  .floating-nav .fn-lang{font-size:0;gap:0;padding:6px 8px;}
}

/* v134: (1) WhatsApp-knop zoals bij Rocco: "WhatsApp" vet + "laatste nieuws"
   gewoon, geen hoofdletters. (2) scroll-pijl onderin de hero op de homepage,
   alleen mobiel (<768 px). Geen pulserende animatie (zie v95); verdwijnt
   zodra je begint te scrollen (script.js, klasse .weg). */
.wa-btn{text-transform:none;letter-spacing:0;gap:10px;}
.wa-btn .wa-merk{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-0.01em;}
.wa-btn .wa-sub{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.02rem;}
.hero-pijl{display:none;}
@media (max-width: 767px){
  .hero-pijl{
    display:grid;place-items:center;position:absolute;left:50%;transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 26px);z-index:2;
    width:52px;height:52px;border-radius:50%;border:2px solid rgba(239,238,231,0.85);
    color:var(--paper);background:rgba(5,5,5,0.25);transition:opacity .35s ease;
  }
  .hero-pijl svg{width:24px;height:24px;}
  .hero-pijl.weg{opacity:0;pointer-events:none;}
}

/* v137: mobiel (<768 px) — minder zwarte ruimte tussen de kop in de foto en
   de eerste tekst op Racing, Partners, Over Juste en Business Club (was ±98 px,
   nu ±50 px). Foto en kop blijven exact op hun plek; alleen de sectie ná de
   foto schuift 48 px omhoog over de donkere onderrand van de foto. */
@media (max-width: 767px){
  /* v213: was `section:has(> .about-hero) + section`. Op Racing, Partners,
     Over Juste en Business Club zit die kopfoto in een `.sub-hero`, maar op de
     homepage staat er óók een `.about-hero` — die boven "Ik ben Juste Mulder".
     Daar trok deze regel dus ook de videostrook 48 px omhoog, wat nooit de
     bedoeling was. Nu beperkt tot de vier subpagina's. */
  section.sub-hero:has(> .about-hero) + section{margin-top:-48px;position:relative;z-index:2;}
}

/* v138: PRIJSBLOK BUSINESS CLUB OP MOBIEL (<768 px) spectaculairder, in lijn
   met desktop: foto van de achterkant van de 27 bovenin met schuine onderrand
   en groene streep, prijs groter met de laatste "27" in groen, knop groen met
   gloed en op één regel ("Word lid" / "Join now"; desktop houdt de lange tekst). */
.prijs b .p27{font-style:normal;}
.knop-kort{display:none;}
@media (max-width: 767px){
  .club-block:has(.prijs){position:relative;padding-top:0;}
  .club-block:has(.prijs)::before{
    content:"";display:block;height:240px;margin-bottom:34px;
    background:url("images/bc-achterkant-27-pitlane.jpg") 28% 55% / cover no-repeat;
    clip-path:polygon(0 0, 100% 0, 100% 186px, 0 240px);
  }
  .club-block:has(.prijs)::after{
    content:"";position:absolute;left:0;right:0;top:0;height:250px;pointer-events:none;
    background:var(--grind);
    clip-path:polygon(0 240px, 100% 186px, 100% 196px, 0 250px);
  }
  .club-block:has(.prijs) .prijs b{font-size:clamp(3.8rem, 19vw, 5.2rem) !important;line-height:0.9;}
  .club-block:has(.prijs) .prijs b .p27{color:#00c800;}
  .club-block:has(.prijs) .btn-fill{
    background:var(--grind);color:#14140f;white-space:nowrap;
    animation:glowPulse 3.2s ease-in-out infinite;
  }
  .club-block:has(.prijs) .knop-lang{display:none;}
  .club-block:has(.prijs) .knop-kort{display:inline;}
}

/* v140: taalknop ook zichtbaar op mobiel — alleen het vlaggetje, links van
   het envelopje in de balk. In het menu blijft de taalkeuze ook staan. */
@media (max-width: 999px){
  .floating-nav button.fn-icon{order:1;}
  .floating-nav .fn-logo{order:2;flex:1;text-align:center;margin-left:26px;}
  .floating-nav .fn-lang{
    order:3;display:inline-flex;align-items:center;justify-content:center;
    position:static;font-size:0;gap:0;padding:0;border:none;background:none;margin-right:14px;
  }
  .floating-nav a.fn-icon{order:4;}
  .floating-nav .fn-vlag{display:block;width:26px;height:17px;border-radius:3px;flex:none;
    box-shadow:0 0 0 1px rgba(255,255,255,0.22);}
}

/* ===================================================================
   v142: TAALKIEZER MET UITKLAPMENU (NL, EN, ES, later FR/DE/IT).
   De oude knop (v87/v133/v140) was één link; nu een knop met vlag +
   code en daaronder een lijstje met de andere talen. Werkt op desktop
   én mobiel; in het hamburgermenu staan de talen ook nog als chips.
   =================================================================== */
.fn-lang-wrap{position:relative;display:inline-flex;}
.floating-nav .fn-lang{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 8px;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:0.8rem;letter-spacing:0.06em;
  color:var(--paper);opacity:0.85;transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.floating-nav .fn-lang:hover{opacity:1;border-color:var(--grind);color:var(--grind);}
.floating-nav .fn-vlag{display:block;width:20px;height:13px;border-radius:2px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,0.18);}
.fn-caret{width:10px;height:6px;flex:none;opacity:0.8;transition:transform .2s ease;}
.fn-lang[aria-expanded="true"] .fn-caret{transform:rotate(180deg);}
.fn-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:170px;margin:0;padding:6px;list-style:none;
  background:rgba(14,14,12,0.97);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:80;
}
.fn-lang-wrap.open .fn-lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.fn-lang-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  color:var(--paper);text-decoration:none;font-size:0.92rem;
}
.fn-lang-menu a:hover{background:rgba(255,255,255,0.07);color:var(--grind);}
.fn-lang-menu .fn-vlag{width:22px;height:15px;}
@media (min-width: 1000px){
  .floating-nav .fn-lang-wrap{position:absolute;right:calc(var(--side) + 44px);top:50%;transform:translateY(-50%);}
  /* v155: de knop zelf stond sinds v87 ook absoluut op right:var(--side)+44px.
     Sinds v142 zit hij in .fn-lang-wrap, die al op die plek staat, dus telde
     die verschuiving dubbel en landde het vlaggetje midden in "Business Club".
     Hier terug in de stroom van de wrap. */
  .floating-nav .fn-lang{position:static;transform:none;}
}
@media (max-width: 999px){
  .floating-nav .fn-lang-wrap{order:3;margin-right:12px;}
  .floating-nav .fn-lang{border:none;padding:0;gap:5px;font-size:0.72rem;}
  .floating-nav .fn-vlag{width:26px;height:17px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,0.22);}
  .fn-lang-menu{top:calc(100% + 12px);}
}
/* vlaggen in het hamburgermenu (waren emoji, nu dezelfde svg's) */
.menu-lang .vlag-svg{display:inline-flex;}
.menu-lang .vlag-svg .fn-vlag{display:block;width:20px;height:13px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.18);filter:none;opacity:1;}

/* v144: op mobiel stond de hero-tekst 44 px van de rand (22 px van de hero
   + 22 px van .wrap), terwijl alle andere tekst op 22 px staat. Daardoor was
   de regel ±44 px smaller en brak "FIA Formule 4." eerder af. De hero laat de
   marge nu over aan .wrap, net als de rest van de pagina. */
@media (max-width: 767px){
  .hero{padding-left:0;padding-right:0;}
}

/* v147: de taalrij onderaan het hamburgermenu is eruit gehaald (keuze Gerard:
   de taalkiezer in de balk is genoeg). De .menu-lang-regels hierboven blijven
   staan voor het geval de rij ooit terugkomt. */

/* ===================================================================
   v167: LEDENBORD BUSINESS CLUB
   Namen in plaats van logo's: vijftig logo's zouden op zwart stuk voor
   stuk bewerkt moeten worden en het zou te veel op de partnerpagina
   lijken. Een dicht raster met namen leest als een sponsorbord.
   Het getal boven het bord en de regel bij de prijs tellen zichzelf uit
   het aantal <li> (script.js), dus bij een nieuw lid hoef je alleen een
   regel aan de lijst toe te voegen.
   =================================================================== */
.leden-blok{padding:var(--sec) 0;}
.leden-teller{display:none;align-items:baseline;gap:12px;margin-top:26px;}
.leden-teller.tonen{display:flex;}
.leden-teller b{
  font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;
  font-size:clamp(3.4rem, 14vw, 5rem);line-height:0.9;color:var(--grind);
}
.leden-teller span{
  font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;font-size:0.9rem;color:var(--paper);opacity:0.75;
}
.leden-bord{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  border-top:1px solid var(--line);
}
.leden-bord li{
  font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:0.04em;font-size:0.82rem;line-height:1.2;color:var(--paper);
  padding:14px 14px 14px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;
}
.leden-bord li::before{
  content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--grind);
}
.leden-regel{
  display:none;margin-top:18px;font-family:'Chakra Petch',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;font-size:0.82rem;color:var(--paper);opacity:0.8;
}
.leden-regel.tonen{display:block;}
.leden-regel b{color:var(--grind);font-size:1.05rem;}
@media (min-width: 768px){
  .leden-bord{grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:34px;}
  .leden-bord li{font-size:0.95rem;padding:17px 0;}
  .leden-teller b{font-size:clamp(4.4rem, 6vw, 7rem);}
  .leden-teller span{font-size:1rem;}
  .leden-regel{font-size:0.9rem;}
}
@media (min-width: 1080px){
  .leden-bord{grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:44px;}
  .leden-bord li{font-size:1rem;padding:19px 0;}
}

/* ===================================================================
   v178: haarlijn langs afgeronde hoeken — één gerichte test
   Gerard merkte terecht op dat collages en mozaïeken net zo goed inzoomen
   en het lijntje níet hebben. Daarmee valt de zoom als verklaring af.
   Wat de getroffen kaders wél gemeen hebben: er zit een kind in dat de
   browser apart tekent — een video (altijd) of een foto die meeschuift
   met de scroll (`will-change:transform`). In collages zitten gewone
   foto's zonder eigen tekenlaag, en daar gebeurt het niet. Dat verklaart
   ook het knipperen: zo'n laag wordt één keer aangemaakt.
   Deze ronde geeft het kader zelf ook een tekenlaag, zodat de afgeronde
   uitsnede daarin gebakken zit vóór het kind erin getekend wordt. Dat is
   de enige wijziging; de zoom staat overal weer aan, zodat er één ding
   tegelijk getest wordt.
   Werkt het niet, haal dit blok dan weg en overweeg `will-change:transform`
   van `.par-img` te halen — dan verdwijnt de aparte laag bij de foto's,
   al blijft die bij video's bestaan.
   =================================================================== */
@media (min-width: 768px){
  /* v179: dit stond in v178 als `transform:translateZ(0)` — en dat is precies
     de eigenschap waarmee `.reveal-img` inzoomt, dus die regel overschreef de
     zoom op deze kaders. `will-change` dwingt dezelfde tekenlaag af zonder aan
     `transform` te komen, dus de zoom blijft gewoon werken. */
  .photo-full, .quote-photo{will-change:transform;}
}

/* v175: de laatste "27" van het bedrag groen, op elke schermbreedte. Stond
   eerder alleen in het mobiele prijsblok van v138 (onder `:has()`), waardoor
   hij op desktop zwart bleef. */
.prijs b .p27{color:#00c800;}

/* ===================================================================
   v182: menu en taalkeuze flitsten heel even in beeld bij het verversen
   Op de iPhone zag Gerard bij het verversen kort het menupaneel rechts en
   de talenlijst links, terwijl allebei dicht waren. Beide staan dicht met
   een `transform` plus een overgang. Safari kan zo'n overgang al starten
   voordat de pagina zijn definitieve opmaak heeft, en tekent het element
   dan één frame op zijn plek van vóór de verschuiving.
   Daarom hieronder: zolang `<html>` nog geen klasse `klaar` heeft — dus
   tot het script draait, vlak na het eerste tekenen — staan de overgangen
   uit en worden beide hard dichtgezet. Daarna gedraagt alles zich als
   voorheen. Openen kan alleen via het script, dus dit blokkeert niets.
   =================================================================== */
html:not(.klaar) .menu,
html:not(.klaar) .fn-lang-menu{transition:none !important;}
html:not(.klaar) .menu{transform:translateX(100%) !important;visibility:hidden !important;}
html:not(.klaar) .fn-lang-menu{opacity:0 !important;visibility:hidden !important;}

/* v184: foto van de helm op de shoppagina, tussen de collectie en "Zo werkt
   het". Gebruikt het bestaande fotokader (`.photo-full` met `.par-img`), dus
   afronding, bijsnijden en het meeschuiven werken zoals overal elders. Alleen
   de marges eromheen worden hier gezet. */
.shop-helm{padding:8px 0 4px;}
@media (min-width: 768px){
  .shop-helm{padding:16px 0 8px;}
}

/* ===================================================================
   v200: KALENDER (Racing) — kaarten met circuittekening
   Uitslagen zijn eruit; de kalender toont alleen nog wanneer en waar.
   Per kaart: datum, vlag met circuitnaam, rondenummer, en rechts de
   omtrek van het circuit. Die tekeningen komen uit het magazine van
   Juste zelf (pagina 12) en staan dus al in zijn eigen stijl en kleur.
   De eerstvolgende ronde krijgt een groene rand en het label.
   =================================================================== */
.kalender-blok{padding:var(--sec) 0;}
body > section#kalender{padding-top:clamp(34px, 3vw, 48px) !important;}
.kalender-blok .tag em{font-style:normal;}
.kalender-blok .tag em::before{content:"\00B7";margin:0 7px;opacity:0.6;}

.kal-lijst{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;}
.kal-kaart{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:104px;padding:18px 20px;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;
}
.kal-datum{
  display:block;font-size:0.72rem;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--paper);opacity:0.55;
}
.kal-kaart h3{
  display:flex;align-items:center;gap:11px;margin:7px 0 0;
  font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:0.02em;font-size:1.08rem;line-height:1.15;color:var(--paper);
}
.kal-vlag{
  display:block;width:30px;height:20px;flex:none;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(239,238,231,0.2);
}
.kal-ronde{
  display:block;margin-top:7px;font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--paper);opacity:0.5;
}
/* v203: gereden ronden treden terug. v209: dat gaat nu op datum — het script
   zet `kal-gereden` op elke kaart waarvan de laatste racedag voorbij is, en
   op een kaart zonder script of zonder datum gebeurt er niets. */
.kal-kaart.kal-gereden{opacity:0.62;}
/* v204: de banen zijn crème, niet groen. Groen betekent op deze site
   "let hier op", en dat is nu voorbehouden aan de eerstvolgende race. */
.kal-baan{
  height:72px;width:auto;max-width:42%;object-fit:contain;flex:none;opacity:0.8;
}
.kal-kaart.kal-nu .kal-baan{opacity:1;}
/* v205: geen groene rand meer om de eerstvolgende race. De lijst staat op
   datum en de gereden ronden zijn gedimd, dus de eerste heldere kaart ís de
   volgende race — dat omcirkelen was dubbelop. Wat het benoemt is het groene
   regeltje eronder. */
.kal-kaart.kal-nu .kal-ronde{color:var(--grind);opacity:1;}
.kal-kaart.kal-nu .kal-ronde::after{content:" · " attr(data-label);}

@media (min-width: 768px){
  .kal-lijst{grid-template-columns:1fr 1fr;gap:16px;}
  .kal-kaart{min-height:132px;padding:22px 24px;}
  .kal-kaart h3{font-size:1.22rem;}
  .kal-vlag{width:34px;height:23px;}
  /* v201: ook een maximum op de breedte. Een brede, platte baan als
     Barcelona werd anders veel groter dan een compacte als Jerez. */
  .kal-baan{height:84px;max-width:190px;}
}

/* v206: drie dingen over witruimte op de Racing-pagina.
   1. De ruimte boven de kalendertitel stond alleen op desktop ingeperkt; de
      regel geldt nu op elke breedte, dus ook op mobiel.
   2. De fotocollage stond op desktop 36 px lager dan nodig. Die marge hoorde
      bij de foto erboven, en die foto is op desktop verborgen
      (`.desktop-weg`), dus boven de collage bleef er extra zwart over. */
body > section:has(+ section#kalender){padding-bottom:clamp(26px, 2.4vw, 42px) !important;}
@media (min-width: 768px){
  .desktop-weg + .wrap[style*="margin-top:36px"]{margin-top:0 !important;}
  /* v208: boven het kalenderblok evenveel zwart als eronder. Onder staat de
     volle sectiemarge (--sec) en daarna begint het grijze vlak. Boven bestaat
     de ruimte uit twee delen: de ondermarge van de sectie erboven plus de
     bovenmarge hier. Die twee samen komen nu uit op --sec, wat de ruimte
     eronder ook is. */
  body > section#kalender{
    padding-top:calc(var(--sec) - clamp(26px, 2.4vw, 42px)) !important;
  }
}

/* v211: drie dingen op de Racing-pagina.
   1. Springen naar #kalender zette de titel onder de menubalk. `scroll-margin`
      houdt daar ruimte vrij: de hoogte van de balk plus wat lucht.
   2. In het menu kleurt "Kalender" groen zodra je daarheen springt; het script
      verplaatst dan de markering van "Racing" naar "Kalender". */
/* Waar de pagina stopt na het springen naar de kalender vanuit het menu.
   v226: op allebei iets krapper, want er bleef een randje van de foto erboven
   in beeld staan. Mobiel 60 -> 38, desktop 110 -> 90. Lager kan niet veel
   meer: dan schuift de kop onder de menubalk. */
#kalender{scroll-margin-top:38px;}
@media (min-width: 768px){
  #kalender{scroll-margin-top:90px;}
}

/* v215: iets minder lucht boven "Lidmaatschap" op desktop. Dat blok is de
   eerste van de gestapelde secties op Business Club en kreeg de volle
   sectiemarge (--sec); dat oogde ruim omdat de sectie erboven al met zijn
   eigen ondermarge eindigt. Alleen de bovenkant, de rest van het ritme blijft. */
@media (min-width: 1080px){
  /* v216: de ruimte boven "Lidmaatschap" zat in twee delen: de ondermarge van
     de sectie erbóven (de volle --sec) plus de bovenmarge van dit blok. In
     v215 halveerde ik alleen het tweede deel, en dat viel nauwelijks op.
     Nu allebei op de helft: samen 110 px in plaats van 220. */
  body > section:has(+ .stapel){padding-bottom:calc(var(--sec) * 0.5) !important;}
  .stapel > section.bc-lijst{padding-top:calc(var(--sec) * 0.5) !important;}
}

/* v216: wat bij het openen van de pagina al in beeld staat, verschijnt meteen
   in plaats van in ruim een seconde in te faden. Die fade is bedoeld voor
   blokken waar je naartoe scrolt; op de eerste schermvulling las het als
   ontbrekende tekst — zeker bij terugkeren naar een pagina. */
.reveal.direct, .reveal-img.direct{transition:none !important;}

/* v224: kom je binnen op de Racing-pagina met #kalender in de adresregel, dan
   moet "Kalender" groen zijn en "Racing" niet. In de pagina staat "Racing"
   gemarkeerd als huidige pagina, dus zonder deze regels tekent de browser hem
   eerst groen en corrigeert het script dat pas daarna — dat gaf een flits.
   Het klassetje wordt bovenin de pagina gezet, nog vóór het tekenen, en door
   het script weer weggehaald zodra dat de markering overneemt. */
html.op-kalender .fn-links a[aria-current="page"]{color:inherit;opacity:0.72;}
html.op-kalender .fn-links a[aria-current="page"]::after{transform:scaleX(0);}
html.op-kalender .fn-links a[href*="#kalender"]{color:var(--grind);opacity:1;}
html.op-kalender .fn-links a[href*="#kalender"]::after{transform:scaleX(1);transform-origin:left;}

/* v225: hoort bij de regel hierboven. Tijdens het wisselen van de markering
   staat de animatie van het streepje even uit, zodat het onder de oude knop
   gewoon verdwijnt in plaats van weg te schuiven. */
.fn-links.geen-overgang a::after{transition:none !important;}