/* ============================================================
   TEAM STAAN – CTS GROUP
   Designsysteem  ·  zwart / amber  ·  Poppins Black
   ============================================================ */
:root{
  --ink:#000000;
  --ink-2:#050505;
  --panel:#0C0C0C;
  --panel-2:#141414;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --white:#FFFFFF;
  --mute:rgba(255,255,255,.68);
  --mute-2:rgba(255,255,255,.45);

  --amber:#F5A623;            /* dé merkkleur, nergens anders voor */
  --amber-hi:#FFC65C;
  --amber-lo:#C77F12;
  --glow:rgba(245,166,35,.22);
  --on-amber:#080808;

  --wrap:1280px;
  --r:3px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);
  font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4,h5{margin:0;font-family:'Poppins',system-ui,sans-serif;font-weight:900;
  letter-spacing:-.035em;line-height:.98;text-transform:uppercase}
section[id]{scroll-margin-top:110px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:34px;padding-right:34px}
.mono{font-family:'JetBrains Mono',monospace}

/* ============ merkmotieven ============ */
/* baanlijnen: schuine amberstrepen, de "speed rule" */
.speedrule{height:10px;width:100%;
  background:repeating-linear-gradient(115deg,var(--amber) 0 12px,transparent 12px 26px);
  opacity:.9}
.speedrule.thin{height:5px;opacity:.5}
/* ijskrassen */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:1;
  background-image:repeating-linear-gradient(74deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px),
                   repeating-linear-gradient(104deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px);
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent)}
/* amberveld achter secties */
.beam{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 55% at 12% 0%,var(--glow),transparent 62%)}
/* hoekhaken op kaarten */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:16px;height:16px;
  border:2px solid var(--amber);opacity:0;transition:.45s var(--ease);pointer-events:none;z-index:5}
.brk::before{top:10px;left:10px;border-right:0;border-bottom:0}
.brk::after{bottom:10px;right:10px;border-left:0;border-top:0}
.brk:hover::before,.brk:hover::after{opacity:1;top:14px;left:14px}
.brk:hover::after{bottom:14px;right:14px;top:auto;left:auto}

/* ============ scrollvoortgang ============ */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--amber);z-index:1000;
  box-shadow:0 0 16px var(--amber)}

/* ============ topbar: volgende wedstrijd ============ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:905;background:var(--amber);color:var(--on-amber);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;transition:.4s var(--ease)}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;height:38px;overflow:hidden;white-space:nowrap}
.topbar i{width:6px;height:6px;border-radius:50%;background:var(--on-amber);flex-shrink:0;animation:pulseDark 2.2s infinite}
.topbar b{font-weight:700}
.topbar span.sep{opacity:.45}
@keyframes pulseDark{0%,100%{box-shadow:0 0 0 0 rgba(8,8,8,.5)}50%{box-shadow:0 0 0 7px rgba(8,8,8,0)}}
body.scrolled .topbar{transform:translateY(-100%)}

/* ============ header ============ */
header#hdr{position:fixed;top:38px;left:0;right:0;z-index:900;transition:.4s var(--ease);
  border-bottom:1px solid transparent}
body.scrolled header#hdr{top:0;background:rgba(0,0,0,.9);backdrop-filter:blur(20px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.brand{display:flex;align-items:center;gap:16px;flex-shrink:0}
/* 36px in plaats van 48: het logo is bijna 8 keer zo breed als hoog, dus op
   volle hoogte domineerde het de balk naast een menu van 13px. */
.brand img{height:36px;width:auto;opacity:1}
.menu{display:flex;align-items:center;gap:30px}
.menu a{font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);position:relative;padding:8px 0;transition:color .25s;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--amber);transition:width .3s var(--ease)}
.menu a:hover{color:var(--white)}
.menu a:hover::after{width:100%}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);
  width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--white);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--white)}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* ============ knoppen ============ */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;padding:17px 28px;border-radius:var(--r);
  transition:.28s var(--ease);border:2px solid transparent;white-space:nowrap;position:relative;overflow:hidden}
.btn svg{width:15px;height:15px;transition:transform .28s var(--ease);flex-shrink:0}
.btn:hover svg{transform:translateX(5px)}
.btn-p{background:var(--amber);color:var(--on-amber);box-shadow:0 0 0 0 var(--glow)}
.btn-p:hover{background:var(--amber-hi);transform:translateY(-2px);box-shadow:0 16px 44px var(--glow)}
.btn-g{border-color:var(--line-2);color:var(--white)}
.btn-g:hover{border-color:var(--amber);color:var(--amber);background:rgba(245,166,35,.06)}
.btn-sm{padding:13px 20px;font-size:12px}
.nav-cta{display:inline-flex}

/* ============ sectiekop ============ */
.sec{padding:140px 0;position:relative;overflow:clip}
.sec.alt{background:var(--ink-2)}
.sec>.wrap{position:relative;z-index:3}
.label{display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:24px}
.label::before{content:"";width:34px;height:10px;flex-shrink:0;
  background:repeating-linear-gradient(115deg,var(--amber) 0 5px,transparent 5px 10px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;margin-bottom:62px}
.sec-head h2{font-size:clamp(38px,6.2vw,86px)}
.sec-head h2 span{color:var(--amber)}
.sec-head h2 .out{color:transparent;-webkit-text-stroke:1.5px var(--white)}
.sec-head p{color:var(--mute);max-width:46ch;margin-top:22px;font-size:16px}
.idx{position:absolute;top:56px;right:34px;z-index:2;font-family:'Poppins',sans-serif;font-weight:900;
  font-size:150px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  pointer-events:none;letter-spacing:-.05em}
.link-more{display:inline-flex;align-items:center;gap:11px;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--white);
  border-bottom:2px solid var(--line-2);padding-bottom:9px;transition:.28s;white-space:nowrap}
.link-more:hover{color:var(--amber);border-color:var(--amber)}
.link-more svg{width:15px;height:15px;transition:transform .28s var(--ease)}
.link-more:hover svg{transform:translateX(5px)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;padding:150px 0 54px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:grayscale(1) contrast(1.2) brightness(.5)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.34) 32%,rgba(0,0,0,.86) 72%,var(--ink) 100%)}
.hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(90% 70% at 6% 96%,rgba(245,166,35,.26),transparent 58%),
             radial-gradient(60% 50% at 96% 4%,rgba(245,166,35,.10),transparent 60%)}
.hero .wrap{position:relative;z-index:4;width:100%}
.hero-kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-kicker .pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--amber);
  color:var(--amber);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:99px}
.hero-kicker .pill i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2.3s infinite}
.hero-kicker .plain{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.6)}50%{box-shadow:0 0 0 9px rgba(245,166,35,0)}}
.hero h1{font-size:clamp(54px,9.6vw,152px);letter-spacing:-.055em;max-width:13ch}
.hero h1 .amb{color:var(--amber)}
.hero h1 .out{color:transparent;-webkit-text-stroke:2px var(--white)}
.hero .lead{color:var(--mute);font-size:clamp(16px,1.5vw,19px);max-width:50ch;margin-top:28px;line-height:1.68}
.hero .lead b{color:var(--white);font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
/* datarail: één lijn, geen blokken */
.hero-rail{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:56px;
  border-top:1px solid var(--line-2);padding-top:26px;row-gap:20px}
.hero-rail .item{display:flex;align-items:baseline;gap:11px;padding-right:34px;margin-right:34px;
  border-right:1px solid var(--line);min-width:0}
.hero-rail .item:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-rail b{font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(26px,2.6vw,36px);
  letter-spacing:-.05em;line-height:1;color:var(--white)}
.hero-rail .item:first-child b{color:var(--amber)}
.hero-rail span{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);white-space:nowrap}
.scrollhint{position:absolute;right:34px;bottom:64px;z-index:4;writing-mode:vertical-rl;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--mute-2)}
.scrollhint::after{content:"";display:block;width:2px;height:58px;
  background:linear-gradient(var(--amber),transparent);margin:14px auto 0}


/* ============ MISSIE ============ */
.mission{display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:start}
.mq-big{font-family:'Poppins',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,60px);letter-spacing:-.045em;line-height:1.02}
.mq-big span{color:var(--amber)}
.mq-big .out{color:transparent;-webkit-text-stroke:1.5px var(--white)}
.mission-body p{color:var(--mute);line-height:1.85;font-size:16.5px}
.mission-body p+p{margin-top:20px}
.mission-body .sign{margin-top:28px;display:flex;align-items:center;gap:16px;
  border-left:3px solid var(--amber);padding-left:18px}
.mission-body .sign b{font-family:'Poppins',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.01em}
.mission-body .sign span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-2);display:block;margin-top:3px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:70px}
.pillar{background:var(--ink);padding:34px 28px 32px;min-width:0;transition:.45s var(--ease);position:relative;overflow:hidden}
.sec.alt .pillar{background:var(--ink-2)}
.pillar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pillar:hover{background:var(--panel)}
.pillar:hover::after{transform:scaleX(1)}
.pillar b{display:block;font-family:'Poppins',sans-serif;font-weight:900;font-size:44px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--amber);margin-bottom:20px;letter-spacing:-.04em}
.pillar h4{font-size:20px;margin-bottom:12px;letter-spacing:-.02em}
.pillar span{font-size:15px;color:var(--mute-2);line-height:1.7;display:block;text-transform:none}

/* ============ TEAM ============ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rider{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:3/4.05;display:block;min-width:0;border-radius:var(--r)}
/* De foto's staan meteen in kleur. De zwart-witfilter die pas bij hover
   verdween is er op verzoek van de klant afgehaald (augustus 2026); daar zat
   ook een brightness(.8) in, dus die moest mee weg, anders bleef de foto
   donkerder tot je erover ging. */
.rider img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:1.1s var(--ease)}
.rider .shade{position:absolute;inset:0;z-index:2;transition:.55s;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.95) 100%)}
.rider:hover img{transform:scale(1.06)}
.rider .num{position:absolute;top:14px;left:16px;z-index:3;font-family:'Poppins',sans-serif;font-weight:900;
  font-size:15px;color:var(--amber);letter-spacing:.02em}
.rider .disc{position:absolute;top:14px;right:14px;z-index:3;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid var(--line-2);padding:5px 9px;border-radius:99px}
.rider-info{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 20px}
.rider-info em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:9px}
.rider-info b{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.035em;text-transform:uppercase;line-height:1.06}
.rider-info u{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px;margin-top:12px;
  opacity:0;transform:translateY(8px);transition:.45s var(--ease)}
.rider:hover .rider-info u{opacity:1;transform:none}
.rider-info u svg{width:13px;height:13px}
/* stafstrook */
.staff{margin-top:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.staff a{background:var(--ink-2);padding:22px 18px;min-width:0;transition:.4s var(--ease)}
.staff a:hover{background:var(--panel)}
.staff em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.staff b{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;
  letter-spacing:-.02em;text-transform:uppercase;line-height:1.2}
.team-foot{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.team-foot p{color:var(--mute);font-size:15.5px;max-width:62ch}

/* ============ KALENDER ============ */
.cal-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
.next{border:1px solid var(--line);background:var(--panel);padding:36px 32px 32px;position:relative;overflow:hidden;border-radius:var(--r)}
.next::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(115deg,var(--amber) 0 12px,transparent 12px 26px)}
.next .lb{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:9px;margin-bottom:22px}
.next .lb i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2.3s infinite}
.next h3{font-size:32px;letter-spacing:-.04em;line-height:1.04}
.next .where{color:var(--mute);font-size:15px;margin-top:12px;display:flex;align-items:center;gap:9px}
.next .where svg{width:15px;height:15px;color:var(--amber);flex-shrink:0}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:28px}
.cd div{background:var(--ink);padding:16px 10px;text-align:center;min-width:0}
.sec.alt .cd div{background:var(--ink-2)}
.cd b{display:block;font-family:'Poppins',sans-serif;font-weight:900;font-size:30px;letter-spacing:-.05em;
  line-height:1;color:var(--amber)}
.cd span{display:block;margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}
.next .btn{margin-top:28px;width:100%;justify-content:center}

.cal{border-top:1px solid var(--line)}
/* De wedstrijdnaam kreeg maar 93px omdat de vaste kolommen en de tussen-
   ruimtes bijna de hele lijst opaten. Met langere namen als
   "Holland Cup 3 / Utrecht City Bokaal" viel dat pas echt op.
   minmax(0,1fr) zorgt dat de titelkolom ook echt kan krimpen en groeien. */
.race{display:grid;grid-template-columns:96px minmax(0,1fr) 150px 104px 24px;align-items:center;gap:18px;
  padding:26px 8px;border-bottom:1px solid var(--line);transition:.38s var(--ease);position:relative}
.race::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease)}
.race:hover{background:rgba(255,255,255,.03);padding-left:22px}
.race:hover::before{transform:scaleY(1)}
.race .date{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--amber);
  letter-spacing:.18em;text-transform:uppercase}
.race .date b{display:block;font-family:'Poppins',sans-serif;font-weight:900;font-size:30px;
  color:var(--white);letter-spacing:-.05em;line-height:1.1}
/* Bij een meerdaagse wedstrijd staan er twee getallen in dezelfde kolom van
   88px. Op 30px past dat niet, dus die zetten we kleiner. */
.race .date b.reeks{font-size:19px;letter-spacing:-.03em}
.race h3{font-size:22px;letter-spacing:-.032em;min-width:0}
.race .loc{font-size:14px;color:var(--mute);display:flex;align-items:center;gap:9px;min-width:0}
.race .loc svg{width:14px;height:14px;flex-shrink:0;color:var(--mute-2)}
.race .tag{justify-self:start;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-2);padding:6px 11px;
  border-radius:99px;color:var(--mute)}
.race .tag.hl{border-color:var(--amber);color:var(--amber)}
.race .arw{justify-self:end;color:var(--mute-2);transition:.3s var(--ease)}
.race:hover .arw{color:var(--amber);transform:translateX(6px)}
.race .arw svg{width:18px;height:18px}

/* ============ NIEUWS ============ */
.news-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.news-side{display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.45s var(--ease);min-width:0;position:relative}
.card:hover{background:var(--panel-2);border-color:var(--line-2);transform:translateY(-5px)}
.card .thumb{overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease);filter:grayscale(.65) brightness(.85)}
.card:hover .thumb img{transform:scale(1.06);filter:grayscale(0) brightness(1)}
.card-big .thumb{aspect-ratio:16/9.6}
.card-sm{flex-direction:row;align-items:stretch}
.card-sm .thumb{flex:0 0 42%}
.card-body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:13px;min-width:0}
.card-sm .card-body{padding:24px 22px;justify-content:center}
.card-meta{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2)}
.card-meta i{font-style:normal;color:var(--on-amber);background:var(--amber);padding:4px 9px;border-radius:2px}
.card h3{font-size:26px;letter-spacing:-.04em;line-height:1.08}
.card-sm h3{font-size:17px;line-height:1.16}
.card p{color:var(--mute);font-size:15px;line-height:1.7}
.card .rd{margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:9px;padding-top:8px}
.card .rd svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.card:hover .rd svg{transform:translateX(5px)}

/* nieuwsbrief */
.nl{margin-top:16px;border:1px solid var(--line);background:var(--ink);padding:30px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;border-radius:var(--r)}
.sec.alt .nl{background:var(--ink)}
.nl h4{font-size:22px;letter-spacing:-.03em}
.nl p{color:var(--mute-2);font-size:14px;margin-top:7px}
.nl form{display:flex;gap:10px;flex:1 1 340px;min-width:0}
.nl input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;color:var(--white);font-family:inherit;font-size:16px}
.nl input:focus{outline:none;border-color:var(--amber)}

/* ============ PARTNERS ============ */
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.p-main{border:1px solid var(--line);border-radius:var(--r);padding:46px 42px 42px;background:var(--panel);
  transition:.45s var(--ease);position:relative;overflow:hidden;min-width:0;display:block}
.p-main::after{content:"";position:absolute;inset:0;opacity:0;transition:.55s;
  background:radial-gradient(85% 70% at 50% 0%,var(--glow),transparent 68%)}
.p-main:hover{border-color:var(--line-2);transform:translateY(-5px)}
.p-main:hover::after{opacity:1}
.p-main>*{position:relative;z-index:2}
.p-main .rank{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-amber);background:var(--amber);
  padding:5px 11px;border-radius:2px;margin-bottom:26px}
.p-main .slog{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:20px}
.p-main p{color:var(--mute);font-size:15px;line-height:1.75}
.p-main .go{margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);display:inline-flex;align-items:center;
  gap:9px;border-bottom:2px solid var(--line-2);padding-bottom:7px;transition:.3s}
.p-main:hover .go{color:var(--amber);border-color:var(--amber)}
.p-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute-2);margin:44px 0 16px;display:flex;align-items:center;gap:16px}
.p-sub::after{content:"";flex:1;height:1px;background:var(--line)}
.p-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
/* logotegel: monochroom in rust, echte merkkleuren op hover via witte plaat */
.p-cell{background:var(--ink);display:flex;align-items:center;justify-content:center;padding:10px;
  min-width:0;position:relative;overflow:hidden;transition:.38s var(--ease);height:150px}
.sec.alt .p-cell{background:var(--ink-2)}
.p-cell .plate{background:#FFFFFF;border-radius:10px;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;padding:10px;transition:.38s var(--ease)}
.p-cell:hover .plate{transform:scale(1.035);box-shadow:0 12px 34px rgba(245,166,35,.16)}
.p-cell img{height:100%;max-height:100px;max-width:100%;width:auto;object-fit:contain}
.plate-main{display:flex;width:fit-content;align-items:center;justify-content:center;background:#FFFFFF;
  border-radius:12px;padding:8px 16px;margin-bottom:20px;transition:.4s var(--ease)}
.p-main .rank{margin-bottom:18px}
.p-main:hover .plate-main{transform:translateY(-2px);box-shadow:0 14px 36px rgba(245,166,35,.16)}
.p-main .plogo{height:76px;width:auto;object-fit:contain;display:block}

/* ============ CTA PARTNER WORDEN ============ */
.cta{position:relative;background:var(--ink-2);border-top:1px solid var(--line);padding:140px 0 130px}
.cta-wm{position:absolute;left:50%;transform:translateX(-50%);bottom:0;overflow:hidden;max-width:100%;z-index:1;pointer-events:none;
  font-family:'Poppins',sans-serif;font-weight:900;font-size:17vw;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.055);text-transform:uppercase;line-height:1;white-space:nowrap}
.cta-in{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:start;position:relative;z-index:3}
.cta h2{font-size:clamp(40px,6.4vw,84px);max-width:13ch}
.cta h2 span{color:var(--amber)}
.cta h2 .out{color:transparent;-webkit-text-stroke:2px var(--white)}
.cta .sub{color:var(--mute);margin-top:26px;max-width:46ch;line-height:1.8;font-size:16.5px}
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.tier{background:var(--ink-2);padding:24px 26px;display:flex;gap:22px;align-items:flex-start;
  min-width:0;transition:.4s var(--ease);position:relative}
.tier:hover{background:var(--panel)}
.tier .n{font-family:'Poppins',sans-serif;font-weight:900;font-size:15px;color:var(--amber);flex-shrink:0;padding-top:2px}
.tier b{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.03em;
  text-transform:uppercase;margin-bottom:6px}
.tier span{font-size:14.5px;color:var(--mute-2);line-height:1.65;display:block}
.usps{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.usp{background:var(--ink-2);padding:20px 22px;display:flex;gap:14px;align-items:flex-start;min-width:0}
.usp svg{width:18px;height:18px;color:var(--amber);flex-shrink:0;margin-top:2px}
.usp b{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:-.01em;text-transform:uppercase;margin-bottom:4px}
.usp span{font-size:13.5px;color:var(--mute-2);line-height:1.6}

.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:38px 34px 34px;
  position:sticky;top:104px;overflow:hidden}
.form::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(115deg,var(--amber) 0 12px,transparent 12px 26px)}
.form h3{font-size:27px;margin-bottom:10px;letter-spacing:-.035em}
.form .promise{display:flex;align-items:center;gap:11px;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:28px}
.form .promise i{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 2.3s infinite;flex-shrink:0}
.flab{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-2);display:block;margin-bottom:11px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.chip{border:1px solid var(--line-2);border-radius:99px;padding:10px 17px;font-family:'Inter',sans-serif;
  font-size:13.5px;color:var(--mute);cursor:pointer;transition:.25s;background:none}
.chip:hover{color:var(--white);border-color:var(--white)}
.chip.sel{background:var(--amber);border-color:var(--amber);color:var(--on-amber);font-weight:600}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form input,.form textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;color:var(--white);font-family:inherit;font-size:16px;transition:.25s;min-width:0}
.form textarea{resize:vertical;min-height:92px;margin-bottom:20px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--glow)}
.form input::placeholder,.form textarea::placeholder{color:var(--mute-2)}
.form .btn{width:100%;justify-content:center}
.form .fine{font-size:12.5px;color:var(--mute-2);margin-top:18px;text-align:center;overflow-wrap:anywhere}

/* ============ FOOTER ============ */
footer{background:var(--ink);padding:90px 0 36px;border-top:1px solid var(--line);position:relative;overflow:clip}
.f-word{font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(52px,12.5vw,190px);
  letter-spacing:-.065em;line-height:.86;text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.10);margin-bottom:54px;white-space:nowrap;overflow:hidden}
.f-word span{color:rgba(245,166,35,.16);-webkit-text-stroke:0}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:46px;padding-bottom:54px;border-bottom:1px solid var(--line)}
.f-top img{height:32px;width:auto;opacity:1;margin-bottom:22px}
.f-top p{color:var(--mute);font-size:15px;max-width:34ch;line-height:1.75}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:42px;height:42px;border:1px solid var(--line-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.socials a:hover{border-color:var(--amber);color:var(--amber);background:rgba(245,166,35,.07)}
.socials svg{width:17px;height:17px}
.f-col h5{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin:0 0 20px}
.f-col a{display:block;font-size:15px;color:var(--mute);padding:7px 0;transition:.25s;overflow-wrap:anywhere}
.f-col a:hover{color:var(--amber);transform:translateX(3px)}
.f-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px;
  flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute-2)}

/* ============ sticky mobiel ============ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:950;display:none;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.95);
  backdrop-filter:blur(18px);border-top:2px solid var(--amber);transform:translateY(120%);transition:transform .42s var(--ease)}
.sticky.show{transform:none}
.sticky a{flex:1;justify-content:center;padding:15px 10px;font-size:12px;letter-spacing:.06em;white-space:normal;text-align:center}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .idx{display:none}
  .cal-wrap{grid-template-columns:1fr;gap:44px}
  .staff{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1080px){
  .form{position:relative;top:auto}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .p-row{grid-template-columns:repeat(2,1fr)}
  /* Bij een oneven aantal logo's vult de laatste tegel de rij uit, zodat er
     geen leeg vak overblijft. De witte plaat houdt wel de breedte van een
     gewone tegel, anders wordt dat ene logo twee keer zo groot als de rest. */
  .p-row>*:last-child:nth-child(odd){grid-column:span 2}
  .p-row>*:last-child:nth-child(odd) .plate{width:calc(50% - .5px)}
  .mission{grid-template-columns:1fr;gap:44px}
  .cta-in{grid-template-columns:1fr;gap:50px}
  .f-top{grid-template-columns:1fr 1fr;gap:40px}
  .race{grid-template-columns:88px minmax(0,1fr) 150px 30px;gap:16px}
  .race .tag{display:none}
}
@media(max-width:860px){
  .menu,.nav-cta{display:none}
  .burger{display:flex}
  .news-grid{grid-template-columns:1fr}
  .p-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:26px}
  .usps{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding-left:24px;padding-right:24px}
  .sec{padding:78px 0}
  .cta{padding:78px 0 74px}
  .topbar .wrap{height:36px;font-size:10.5px;letter-spacing:.06em;gap:8px;justify-content:center}
  .topbar .hide-s{display:none}
  header#hdr{top:36px}
  .nav{height:68px}
  /* Het logo is bijna 8 keer zo breed als hoog. Op hoogte schalen duwt op een
     smal scherm de burgerknop buiten beeld, dus schalen we hier op breedte en
     houden we ruimte vrij voor de knop ernaast. */
  .brand img{width:min(250px,calc(100vw - 120px));height:auto}
  .hero{min-height:94svh;padding:120px 0 42px}
  .hero-bg img{object-position:center 24%}
  .hero h1{font-size:clamp(42px,13vw,64px);letter-spacing:-.045em}
  .hero .lead{margin-top:22px}
  .hero-actions{gap:10px;margin-top:30px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center;white-space:normal;font-size:12.5px;letter-spacing:.05em}
  .hero-rail{margin-top:34px;padding-top:20px;row-gap:14px}
  .hero-rail .item{flex:0 0 50%;padding:0 12px 0 13px;margin-right:0;
    border-right:0;border-left:2px solid rgba(245,166,35,.55)}
  .hero-rail b{font-size:23px}
  .hero-rail span{font-size:9.5px;letter-spacing:.12em}
  .scrollhint{display:none}
  .sec-head{margin-bottom:42px}
  .mq-big{font-size:27px}
  .pillars{grid-template-columns:1fr;margin-top:44px}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rider-info{padding:15px 13px}
  .rider-info b{font-size:14.5px}
  .rider-info u{display:none}
  .rider .disc{display:none}
  .staff{grid-template-columns:repeat(2,1fr)}
  .next{padding:28px 22px 26px}
  .next h3{font-size:25px}
  .cd b{font-size:24px}
  .race{grid-template-columns:64px 1fr;gap:14px;padding:20px 0;row-gap:5px}
  .race .date b{font-size:22px}
  .race .date b.reeks{font-size:15px}
  .race h3{font-size:17px}
  .race .loc{grid-column:2;font-size:13px}
  .race .arw{display:none}
  .race:hover{padding-left:0}
  .card-sm{flex-direction:column}
  .card-sm .thumb{flex:none;aspect-ratio:16/9}
  .card-big .thumb{aspect-ratio:16/9}
  .card-body{padding:22px}
  .card h3{font-size:21px}
  .nl{padding:24px 20px;gap:20px}
  .nl form{flex-direction:column}
  .p-row{grid-template-columns:1fr 1fr}
  .p-cell{padding:9px;height:112px}
  .p-cell .plate{border-radius:8px;padding:7px}
  .p-cell img{max-height:76px}
  .plate-main{padding:6px 12px;margin-bottom:16px}
  .p-main .plogo{height:58px}
  .p-main{padding:30px 24px 28px}
  .form{padding:28px 20px 24px}
  .f-row{grid-template-columns:1fr}
  .f-word{-webkit-text-stroke-width:1px;margin-bottom:38px}
  .f-top{grid-template-columns:1fr;gap:34px}
  .cta-wm{display:none}
  .sticky{display:flex}
  footer{padding:64px 0 104px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   VARIANT B  ·  rustiger, zachter, meer lucht
   Overrides op het basissysteem. Alle functies blijven gelijk.
   ============================================================ */
:root{--r:12px}

/* typografie: geen kapitalen, minder schreeuw */
h1,h2,h3,h4,h5{text-transform:none;font-weight:800;letter-spacing:-.032em}
h1 .out,h2 .out,.mq-big .out,.hero h1 .out{-webkit-text-stroke:0;color:var(--white)}
.mq-big{text-transform:none;font-weight:800;font-size:clamp(26px,3.4vw,44px);line-height:1.12}
.sec-head h2{font-size:clamp(32px,4.4vw,58px)}
.cta h2{font-size:clamp(34px,4.6vw,60px);max-width:15ch}
.label{letter-spacing:.18em;font-weight:600;color:var(--mute-2)}
.label::before{background:var(--amber);width:18px;height:2px;border-radius:2px}
.rider-info b,.staff b,.tier b,.usp b,.p-cell,.card-meta,.f-bot{text-transform:none}
.rider-info b{font-size:18px;letter-spacing:-.03em}

/* knoppen en links: pill, zachter */
.btn{border-radius:99px;text-transform:none;letter-spacing:.005em;font-size:14.5px;font-weight:700;padding:16px 26px;border-width:1px}
.btn-g{border-color:var(--line-2)}
.link-more{text-transform:none;letter-spacing:.005em;font-size:14.5px;font-weight:600;border-bottom-width:1px}
.chip{border-radius:99px}

/* decoratie eruit */
.grain,.speedrule,.idx,.cta-wm,.f-word,.scrollhint,.beam{display:none!important}
.brk::before,.brk::after{display:none}


/* meer lucht, zachtere vlakken */
.sec{padding:112px 0}
.cta{padding:112px 0 104px}
.card,.p-main,.form,.next,.nl,.rider,.hero-b-media>img{border-radius:16px}
.pillars,.tiers,.usps,.p-row,.staff,.cd{border-radius:16px;overflow:hidden}
.card:hover,.p-main:hover{transform:translateY(-3px)}
.pillar b{-webkit-text-stroke:0;color:var(--amber);font-size:15px;font-family:'JetBrains Mono',monospace;
  font-weight:700;letter-spacing:.16em;margin-bottom:14px}
.race:hover{background:rgba(255,255,255,.02)}
.next::before,.form::before{background:var(--amber);height:3px;opacity:.9}
.p-main .rank{background:none;color:var(--amber);padding:0;border:1px solid var(--line-2);
  padding:5px 11px;border-radius:99px}
.card-meta i{background:none;color:var(--amber);padding:0}
.topbar{background:var(--ink-2);color:var(--mute);border-bottom:1px solid var(--line)}
.topbar i{background:var(--amber)}
.topbar b{color:var(--white)}

/* ---------- split-hero ---------- */
.hero-b{min-height:0;padding:154px 0 96px;align-items:center;background:var(--ink)}
.hero-b .hero-bg,.hero-b .hero-tint{display:none}
.hero-b-in{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;
  position:relative;z-index:4;width:100%}
.hero-b h1{font-size:clamp(44px,6.6vw,94px);letter-spacing:-.045em;line-height:1.02;max-width:none}
.hero-b .lead{max-width:42ch;margin-top:24px}
.hero-b .hero-actions{margin-top:34px}
.hero-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin-top:42px;
  border:1px solid var(--line);background:var(--ink-2);border-radius:16px;padding:18px 20px}
.hero-tags span{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);
  padding-right:22px;line-height:1.2;white-space:nowrap}
.hero-tags span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--amber);
  opacity:.65;flex-shrink:0}
.hero-b-media{position:relative;overflow:hidden;border-radius:16px}
.hero-b-media>img{width:100%;height:min(72svh,640px);object-fit:cover;object-position:center 22%;
  display:block;transform:scale(1.06)}
.hero-note{position:absolute;left:20px;bottom:20px;max-width:74%;
  background:rgba(8,8,8,.86);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:14px;padding:18px 22px}
.hero-note em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.hero-note b{display:block;margin-top:7px;font-family:'Poppins',sans-serif;font-weight:800;
  font-size:19px;letter-spacing:-.03em;line-height:1.2}

@media(max-width:1080px){
  .hero-b-in{grid-template-columns:1fr;gap:44px}
  /* De herofoto is breder dan hoog (1,17). In een venster van 797 bij 460
     bleef er nog 71% van de hoogte over: koppen eraf boven, schaatsen eraf
     onder. Hoger venster en het brandpunt iets omhoog houdt de ploeg heel. */
  .hero-b-media>img{height:min(64svh,600px);object-position:center 12%}
}
@media(max-width:640px){
  .sec{padding:74px 0}
  .cta{padding:74px 0 70px}
  .hero-b{padding:116px 0 60px}
  .hero-b h1{font-size:clamp(38px,11vw,54px)}
  .hero-tags{margin-top:30px;padding:14px 16px;gap:8px 0}
  .hero-tags span{font-size:9.5px;padding-right:16px;letter-spacing:.1em;gap:7px}
  .hero-b-media>img{height:44svh}
  .hero-note{left:12px;bottom:12px;padding:14px 16px;max-width:82%}
  .hero-note b{font-size:16px}
}

/* Aantal kolommen volgt het aantal logo's (klasse uit kolomklasse() in
   parts.py). Alleen op breed scherm: daaronder gelden de mediaregels
   hierboven, en die staan lager in specificiteit. */
@media(min-width:1025px){
  .p-row.k1{grid-template-columns:1fr}
  .p-row.k2{grid-template-columns:repeat(2,1fr)}
  .p-row.k3{grid-template-columns:repeat(3,1fr)}
  .p-row.k4{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   Extra onderdelen voor de subpagina's
   ============================================================ */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--amber);color:var(--on-amber);
  padding:14px 20px;font-family:'Poppins',sans-serif;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.menu a.is-active{color:var(--white)}
.menu a.is-active::after{width:100%}

/* label op de kaart van een schaatser die dit seizoen is aangesloten */
.rider .nw{position:absolute;top:12px;left:46px;z-index:3;font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-amber);background:var(--amber);padding:4px 8px;border-radius:99px}

/* De partnerpagina heeft geen tussenkop meer, dus de logo's sluiten direct aan
   op de inleiding onder de paginatitel. Zonder deze regel bleef de volle
   sectiemarge staan en zweefden de blokken los onderaan. */
/* Zonder tussenkop zat er 72px tussen de inleiding en de logo's, terwijl de
   rest van de site op ongeveer 110 zit tussen een paginakop en het eerste
   blok. Dit houdt het strak maar niet gedrukt. */
#partners-blokken{padding-top:48px}
@media(max-width:860px){#partners-blokken{padding-top:28px}}

/* De pijlers staan direct onder de hero, die zelf al ruimte onderaan heeft.
   Met de volle sectiemarge eromheen zweefde dit blok van 164px hoog in ruim
   180px lucht. Alleen boven en onder aanpassen, nooit met de padding-
   shorthand: dat zou de zijmarge van .wrap wissen. */
#pijlers{padding-top:16px;padding-bottom:24px}
/* De teamsectie erna heeft zelf een royale bovenmarge; samen met de marge
   hierboven werd het gat eronder twee keer zo groot als erboven. */
#team{padding-top:88px}
@media(max-width:860px){#pijlers{padding-top:8px;padding-bottom:16px}#team{padding-top:64px}}
@media(max-width:640px){#pijlers{padding-top:0;padding-bottom:12px}#team{padding-top:52px}}

/* kruimelpad */
.crumbs{padding-top:150px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;list-style:none;margin:0;
  padding-left:34px;padding-right:34px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
/* De losse woorden zijn klein; met wat lucht eromheen zijn ze op een telefoon
   nog wel met een duim te raken. */
.crumbs li{display:flex;align-items:center}
.crumbs a{color:var(--mute);display:inline-block;padding:9px 0}
.crumbs a:hover{color:var(--amber)}

/* paginakop */
.pagehero{padding:34px 0 64px;position:relative}
.pagehero.tall{padding:170px 0 110px}
.pagehero h1{font-size:clamp(38px,6vw,80px);letter-spacing:-.045em;max-width:16ch}
.pagehero h1 span{color:var(--amber)}
.pagehero .lead{color:var(--mute);max-width:56ch;margin-top:22px;font-size:clamp(16px,1.5vw,19px);line-height:1.7}
/* groepsfoto in de paginakop: hele foto tonen, niets afsnijden */
/* Let op: dit element heeft ook de class .wrap. Zet hier dus NOOIT een
   padding-shorthand, want dan wist je de zijmarge van .wrap en wordt de foto
   breder dan de rest van de pagina. Alleen de bovenmarge aanpassen. */
.pagehero-img{margin-top:46px}
/* Uitsnede is gemeten op de foto zelf: koppen beginnen op 36% van de hoogte,
   schoenen eindigen op 91%. Met 9:4 en het brandpunt op 90% loopt het venster
   van y=240 tot 773, dus lucht en gras eraf, met marge boven en onder de mensen.
   De foto is daarmee een derde lager dan eerst. */
.pagehero-img img{width:100%;height:auto;aspect-ratio:9/4;object-fit:cover;object-position:center 90%;
  display:block;border-radius:16px}
.fotobij{display:flex;align-items:center;gap:11px;margin-top:16px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-2)}
.fotobij i{width:16px;height:2px;border-radius:2px;background:var(--amber);flex-shrink:0}
@media(max-width:640px){
  .pagehero-img{margin-top:30px}
  /* De teamfoto is al bijgesneden aangeleverd (verhouding 2,26) en past op
     breed scherm bijna precies in het venster van 9:4. Op een telefoon viel
     hij daardoor terug op 4:3 en stonden er nog maar zeven van de elf
     schaatsers in beeld. Hier dus de hele foto tonen. De gezichten worden
     klein, maar bij een groepsfoto hoort iedereen erop te staan. */
  .pagehero-img img{height:auto;aspect-ratio:auto;object-position:center}
  .fotobij{font-size:9.5px;letter-spacing:.1em;margin-top:12px}
}

/* twee kolommen tekst + kader */
.two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:start}
.two-col h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:24px}
.two-col p{color:var(--mute);line-height:1.85}
.two-col p+p{margin-top:18px}
.factbox{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:30px 28px;position:sticky;top:104px}
.factbox h3{font-size:19px;margin-bottom:20px}
.factbox dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.factbox dt{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);margin-top:16px}
.factbox dt:first-child{margin-top:0}
.factbox dd{margin:5px 0 0;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em}

/* profielpagina */
.profiel{padding:34px 0 0}
.profiel-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.profiel-media{border-radius:16px;overflow:hidden;background:var(--panel)}
.profiel-media img{width:100%;height:min(66svh,600px);object-fit:cover;object-position:top center}
.profiel-copy h1{font-size:clamp(34px,5vw,66px);letter-spacing:-.045em}
.profiel-copy .lead{color:var(--mute);margin-top:20px;font-size:18px;line-height:1.7;max-width:44ch}
.specs{display:grid;grid-template-columns:auto 1fr;gap:0 26px;margin:32px 0 30px;
  border-top:1px solid var(--line);padding-top:22px}
.specs dt{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);padding:9px 0}
.specs dd{margin:0;padding:9px 0;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px}

/* artikel- en biotekst */
.artikel{max-width:760px}
.artikel h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:24px}
.artikel p{color:var(--mute);line-height:1.9;font-size:17px}
.artikel p+p{margin-top:20px}
.pull{margin:34px 0;border-left:3px solid var(--amber);padding:4px 0 4px 24px;font-family:'Poppins',sans-serif;
  font-weight:700;font-size:20px;line-height:1.45;color:var(--white);letter-spacing:-.02em}
.pull cite{display:block;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-style:normal;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.terug{margin-top:36px}
.mt{margin-top:26px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
/* Bellen is een van de twee manieren om contact te leggen; het telefoonnummer
   onder het formulier moet dus een fatsoenlijke tikzone zijn. */
.fine a{display:inline-block;padding:6px 2px;font-weight:600}
.contactform{position:relative;top:auto;margin-bottom:24px}
.contactform .chips{margin-bottom:22px}
.formtitel{font-size:27px;margin-bottom:10px;letter-spacing:-.035em}
.f-row>div{min-width:0}

/* eerste sectie zonder paginakop (teampagina) */
.sec.eerste{padding-top:34px}
.sec-head h1{font-size:clamp(32px,4.4vw,58px);letter-spacing:-.032em}
.sec-head h1 span{color:var(--amber)}

/* artikelkop */
.arthead{padding:26px 0 0}
.arthead h1{font-size:clamp(30px,4.4vw,58px);letter-spacing:-.04em;max-width:20ch;margin-top:16px}
.arthead .lead{color:var(--mute);max-width:60ch;margin-top:20px;font-size:18px;line-height:1.7}
.artbeeld{margin-top:40px;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:34px;padding-right:34px}
.artbeeld img{width:100%;height:min(56svh,520px);object-fit:cover;border-radius:16px}

/* vorige en volgende */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pn{background:var(--ink-2);padding:26px 28px;transition:.35s var(--ease)}
.pn:hover{background:var(--panel)}
.pn.tr{text-align:right}
.pn em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.pn b{font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.03em}

/* staf zonder profiel */
.staffrow{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:14px}
.staffbox{background:var(--ink-2);padding:24px 26px}
.staffbox em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.staffbox b{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.03em}
.staffbox span{display:block;margin-top:6px;font-size:14px;color:var(--mute-2)}
.team-grid.three{grid-template-columns:repeat(3,1fr)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-grid h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:26px}
.contact-grid h3{font-size:20px;margin:38px 0 18px}
.contactlijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contactlijst li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:130px 1fr;gap:20px;align-items:start}
.contactlijst em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);padding-top:4px}
.contactlijst a,.contactlijst span{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-.02em;overflow-wrap:anywhere;line-height:1.5}
.contactlijst a:hover{color:var(--amber)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:10px 0 10px 30px;color:var(--mute);font-size:15.5px;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:2px;background:var(--amber);border-radius:2px}
.mapcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.mapcard iframe{width:100%;height:460px;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.9)}

.news-side.two{grid-template-columns:1fr 1fr;display:grid;gap:16px}
.f-col h2{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin:0 0 20px}
.f-col .adr{display:block;font-size:15px;color:var(--mute);padding:7px 0;line-height:1.6}

[id]{scroll-margin-top:110px}
.two-col>*,.profiel-in>*,.contact-grid>*,.prevnext>*,.specs>*,.contactlijst li>*{min-width:0}
.artikel,.artikel p,.pull{overflow-wrap:anywhere}

@media(max-width:1080px){
  .two-col,.profiel-in,.contact-grid{grid-template-columns:1fr;gap:40px}
  .factbox{position:relative;top:auto}
  .team-grid.three{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .crumbs{padding-top:112px}
  .crumbs ol{padding-left:24px;padding-right:24px;font-size:10px;letter-spacing:.12em}
  .pagehero{padding:22px 0 44px}
  .pagehero.tall{padding:128px 0 74px}
  .artbeeld{padding:0 24px}
  .artbeeld img{height:34svh}
  .profiel-media img{height:52svh}
  .team-grid.three{grid-template-columns:repeat(2,1fr)}
  .staffrow{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .pn.tr{text-align:left}
  .contactlijst li{grid-template-columns:1fr;gap:6px}
  .mapcard iframe{height:320px}
  .news-side.two{grid-template-columns:1fr}
  .artikel p{font-size:16px}
  .pull{font-size:17px;padding-left:18px}
}