/* Gregor Bikes · global.css · gebouwd 2026-10-26 18:10 · niet met de hand bewerken */
/* ==========================================================================
   Gregor Bikes · gb.css · designsysteem website-2026
   Merkgids v2.1: carbon canvas, veel ruimte, één oranje moment per compositie.
   Hanken Grotesk 400–700 voor alles, IBM Plex Mono 400/600 alleen voor maten, specs en kickers.

   SCOPE: alles valt onder .gb. Wortels met .gb: <main class="gb gb-page"> (preview),
   <div class="gb gb-page"> (Elementor HTML-widget), <div class="gb gb-shell"> (header, footer, sticky).
   Componentregels zijn minimaal (0,2,0) zodat ze Elementor-kitregels (0,1,1) verslaan.
   Body-niveau alleen via .gb-body (preview) of de Elementor-integratie onderaan.

   Inhoud
   00 tokens · 01 thema's · 02 reset · 03 typografie · 04 layout · 05 knoppen en links
   06 header · 07 mobiel menu · 08 footer · 09 sticky CTA · 10 breadcrumb · 11 hero
   12 answer-first · 13 sectiekop · 14 kaarten · 15 stappen en tijdlijn · 16 feitenregel,
   trust, badges, checks · 17 prijs en specs · 18 tabellen · 19 tabs · 20 accordeon
   21 CTA-band · 22 formulieren (+ Elementor Pro) · 23 notities · 24 beeld en galerij
   25 route · 26 review, quote, rating · 27 prose · 28 deuren · 29 keuzes en samenvatting
   30 hulpklassen · 31 onthullen · 32 Elementor-integratie · 33 print · 34 beweging (DESIGN.md §11)
   ========================================================================== */

/* 00 · TOKENS ------------------------------------------------------------ */
.gb {
  --gb-carbon: #0A0908;
  --gb-carbon-2: #141210;
  --gb-carbon-3: #1D1A17;
  --gb-black: #000000;
  --gb-charcoal: #211E1B;
  --gb-graphite: #3E3B3B;
  --gb-steel: #5C5B5B;
  --gb-grey: #6E6A63;
  --gb-titanium: #D8D8D8;
  --gb-line: #E3DED5;
  --gb-paper: #F4F2ED;
  --gb-white: #FFFFFF;
  --gb-orange: #DE6F3A;          /* het enige accent; carbon tekst erop (6,10:1) */
  --gb-orange-hover: #E7814F;    /* carbon tekst erop (7,25:1) */

  --gb-sans: "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --gb-mono: "IBM Plex Mono", "Courier New", monospace;

  /* fluid typografie, 390 → 1440 px */
  --gb-fs-display: clamp(2.5rem, 1.45rem + 4.3vw, 5.5rem);     /* 40 → 88 */
  --gb-fs-h1: clamp(2.25rem, 1.55rem + 2.9vw, 4.25rem);        /* 36 → 68 */
  --gb-fs-h2: clamp(1.875rem, 1.42rem + 1.9vw, 3.25rem);       /* 30 → 52 */
  --gb-fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);         /* 20 → 26 */
  --gb-fs-h4: clamp(1.0625rem, 1rem + .25vw, 1.25rem);         /* 17 → 20 */
  --gb-fs-lead: clamp(1.125rem, 1.03rem + .4vw, 1.375rem);     /* 18 → 22 */
  --gb-fs-answer: clamp(1.25rem, 1.08rem + .75vw, 1.75rem);    /* 20 → 28 */
  --gb-fs-body: 1.0625rem;                                     /* 17 */
  --gb-fs-small: .9375rem;                                     /* 15 */
  --gb-fs-xs: .8125rem;                                        /* 13 */
  --gb-fs-mono: .75rem;                                        /* 12, kickers en labels */
  --gb-fs-mono-l: .875rem;                                     /* 14, feitenregels */

  /* ruimte */
  --gb-s1: .25rem; --gb-s2: .5rem; --gb-s3: .75rem; --gb-s4: 1rem; --gb-s5: 1.5rem;
  --gb-s6: 2rem; --gb-s7: 3rem; --gb-s8: 4rem; --gb-s9: 6rem; --gb-s10: 8rem;
  --gb-gutter: clamp(1rem, .4rem + 2.6vw, 3rem);               /* 16 → 44 */
  --gb-section: clamp(4rem, 2.6rem + 5.6vw, 8.5rem);           /* 64 → 122 */
  --gb-section-s: clamp(3rem, 2.2rem + 3.2vw, 5.5rem);         /* 48 → 76 */
  --gb-gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --gb-max: 82.5rem;        /* 1320 */
  --gb-max-wide: 95rem;     /* 1520 */
  --gb-max-narrow: 46rem;   /* 736 */
  --gb-measure: 64ch;

  --gb-radius: 4px;
  --gb-radius-btn: 3px;
  --gb-header-h: 72px;
  --gb-ease: cubic-bezier(.2, .7, .2, 1);
  --gb-shadow: 0 24px 60px -32px rgba(10, 9, 8, .55);

  /* standaardthema = carbon (merk: carbon canvas) */
  --gb-bg: var(--gb-carbon);
  --gb-surface: var(--gb-carbon-2);
  --gb-surface-2: var(--gb-carbon-3);
  --gb-fg: #FFFFFF;
  --gb-fg-2: rgba(255, 255, 255, .76);   /* 10,9:1 op carbon */
  --gb-fg-3: rgba(255, 255, 255, .62);   /* 7,6:1 op carbon (≥55%, brief §4) */
  --gb-rule: rgba(255, 255, 255, .13);
  --gb-rule-strong: rgba(255, 255, 255, .32);
  --gb-tint: rgba(255, 255, 255, .06);
  --gb-marker: var(--gb-titanium);
  --gb-focus: var(--gb-orange);
}
@media (min-width: 1180px) { .gb { --gb-header-h: 84px; } }

/* 01 · THEMA'S (op sectie, kaart of blok) ---------------------------------- */
.gb .gb-theme-dark, .gb.gb-theme-dark {
  --gb-bg: var(--gb-carbon); --gb-surface: var(--gb-carbon-2); --gb-surface-2: var(--gb-carbon-3);
  --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.76); --gb-fg-3: rgba(255,255,255,.62);
  --gb-rule: rgba(255,255,255,.13); --gb-rule-strong: rgba(255,255,255,.32); --gb-tint: rgba(255,255,255,.06);
  --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange);
  background-color: var(--gb-bg); color: var(--gb-fg);
}
.gb .gb-theme-black {
  --gb-bg: var(--gb-black); --gb-surface: #0E0D0C; --gb-surface-2: var(--gb-carbon-2);
  --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.76); --gb-fg-3: rgba(255,255,255,.62);
  --gb-rule: rgba(255,255,255,.13); --gb-rule-strong: rgba(255,255,255,.32); --gb-tint: rgba(255,255,255,.06);
  --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange);
  background-color: var(--gb-bg); color: var(--gb-fg);
}
.gb .gb-theme-charcoal {
  --gb-bg: var(--gb-charcoal); --gb-surface: #2A2623; --gb-surface-2: #332E2A;
  --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.78); --gb-fg-3: rgba(255,255,255,.64);
  --gb-rule: rgba(255,255,255,.14); --gb-rule-strong: rgba(255,255,255,.34); --gb-tint: rgba(255,255,255,.07);
  --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange);
  background-color: var(--gb-bg); color: var(--gb-fg);
}
.gb .gb-theme-paper {
  --gb-bg: var(--gb-paper); --gb-surface: var(--gb-white); --gb-surface-2: #FAF9F6;
  --gb-fg: var(--gb-charcoal); --gb-fg-2: var(--gb-graphite); --gb-fg-3: var(--gb-grey);   /* 14,8 · 9,6 · 4,8:1 */
  --gb-rule: var(--gb-line); --gb-rule-strong: rgba(33,30,27,.28); --gb-tint: rgba(33,30,27,.045);
  --gb-marker: var(--gb-graphite); --gb-focus: var(--gb-carbon);
  background-color: var(--gb-bg); color: var(--gb-fg);
}
.gb .gb-theme-white {
  --gb-bg: var(--gb-white); --gb-surface: var(--gb-paper); --gb-surface-2: #F9F8F5;
  --gb-fg: var(--gb-charcoal); --gb-fg-2: var(--gb-graphite); --gb-fg-3: var(--gb-grey);   /* grey op wit 5,4:1 */
  --gb-rule: var(--gb-line); --gb-rule-strong: rgba(33,30,27,.28); --gb-tint: rgba(33,30,27,.04);
  --gb-marker: var(--gb-graphite); --gb-focus: var(--gb-carbon);
  background-color: var(--gb-bg); color: var(--gb-fg);
}

/* 02 · RESET (alleen binnen .gb) ------------------------------------------ */
.gb, .gb *, .gb *::before, .gb *::after { box-sizing: border-box; }
.gb {
  font-family: var(--gb-sans); font-size: var(--gb-fs-body); line-height: 1.65; font-weight: 400;
  color: var(--gb-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal;
}
.gb h1, .gb h2, .gb h3, .gb h4, .gb h5, .gb h6,
.gb p, .gb figure, .gb blockquote, .gb dl, .gb dd, .gb ol, .gb ul, .gb fieldset, .gb address {
  margin: 0; padding: 0;
}
.gb h1, .gb h2, .gb h3, .gb h4, .gb h5, .gb h6 {
  font-family: var(--gb-sans); font-weight: 600; color: inherit; text-wrap: balance; text-transform: none;
}
.gb h1 { font-size: var(--gb-fs-h1); line-height: 1.04; letter-spacing: -.03em; }
.gb h2 { font-size: var(--gb-fs-h2); line-height: 1.08; letter-spacing: -.025em; }
.gb h3 { font-size: var(--gb-fs-h3); line-height: 1.2; letter-spacing: -.012em; }
.gb h4 { font-size: var(--gb-fs-h4); line-height: 1.3; letter-spacing: -.005em; }
.gb p { text-wrap: pretty; }
.gb ul, .gb ol { list-style: none; }
.gb address { font-style: normal; }
.gb img, .gb svg, .gb video, .gb picture { display: block; max-width: 100%; }
.gb img { height: auto; border: 0; border-radius: 0; box-shadow: none; }
.gb a { color: inherit; text-decoration: none; background: none; }
.gb b, .gb strong { font-weight: 600; }
.gb small { font-size: var(--gb-fs-small); }
.gb hr { border: 0; border-top: 1px solid var(--gb-rule); margin: var(--gb-s7) 0; height: 0; }
.gb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; box-shadow: none; border-radius: 0; }
.gb button:hover, .gb button:focus { background: none; color: inherit; }
.gb input, .gb select, .gb textarea { font: inherit; color: inherit; }
.gb table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0; }
.gb :focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 3px; }
.gb ::selection { background: var(--gb-orange); color: var(--gb-carbon); }
.gb [id] { scroll-margin-top: calc(var(--gb-header-h) + 1.5rem); }
.gb [hidden] { display: none !important; }
.gb svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gb .gb-i { width: 1.125em; height: 1.125em; flex: none; display: inline-block; vertical-align: -.18em; }
.gb .gb-i--fill { fill: currentColor; stroke: none; }

/* body-niveau, alleen in de preview of als je dit bewust op <body> zet */
.gb-body { margin: 0; background: #0A0908; overflow-x: clip; }

/* 03 · TYPOGRAFIE --------------------------------------------------------- */
.gb .gb-display { font-size: var(--gb-fs-display); line-height: 1; letter-spacing: -.035em; font-weight: 600; }
.gb .gb-h1 { font-size: var(--gb-fs-h1); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.gb .gb-h2 { font-size: var(--gb-fs-h2); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; }
.gb .gb-h3 { font-size: var(--gb-fs-h3); line-height: 1.2; letter-spacing: -.012em; font-weight: 600; }
.gb .gb-h4 { font-size: var(--gb-fs-h4); line-height: 1.3; letter-spacing: -.005em; font-weight: 600; }
.gb .gb-lead { font-size: var(--gb-fs-lead); line-height: 1.5; color: var(--gb-fg-2); max-width: 40em; font-weight: 400; }
.gb .gb-text { font-size: var(--gb-fs-body); color: var(--gb-fg-2); max-width: var(--gb-measure); }
.gb .gb-small { font-size: var(--gb-fs-small); line-height: 1.55; }
.gb .gb-muted { color: var(--gb-fg-3); }
.gb .gb-mono { font-family: var(--gb-mono); letter-spacing: .01em; }
.gb .gb-num { font-variant-numeric: tabular-nums; }
.gb .gb-modelname { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.gb .gb-accent { color: var(--gb-orange); }  /* alleen op donker en ≥24 px; nooit op paper of wit */

.gb .gb-kicker {
  display: inline-flex; align-items: center; gap: .75rem; margin: 0;
  font-family: var(--gb-mono); font-weight: 600; font-size: var(--gb-fs-mono); line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gb-fg-3);
}
.gb .gb-kicker::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--gb-marker); }
.gb .gb-kicker--accent::before { background: var(--gb-orange); }   /* telt als het oranje moment */
.gb .gb-kicker--plain::before { display: none; }

.gb .gb-caption, .gb .gb-label-mono {
  font-family: var(--gb-mono); font-size: var(--gb-fs-mono); line-height: 1.5; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gb-fg-3); font-weight: 400;
}
.gb .gb-microcopy {
  font-family: var(--gb-mono); font-size: var(--gb-fs-xs); line-height: 1.5; letter-spacing: .02em; color: var(--gb-fg-3);
}

/* flow: verticale ritmiek voor gestapelde inhoud */
.gb .gb-stack > * + * { margin-top: var(--gb-flow, 1rem); }
.gb .gb-stack--s { --gb-flow: .5rem; }
.gb .gb-stack--m { --gb-flow: 1.5rem; }
.gb .gb-stack--l { --gb-flow: 2.5rem; }
.gb .gb-stack > .gb-kicker + :is(h1, h2, h3, .gb-h1, .gb-h2, .gb-display) { margin-top: 1.125rem; }

/* 04 · LAYOUT ------------------------------------------------------------- */
.gb .gb-container { width: 100%; max-width: calc(var(--gb-max) + 2 * var(--gb-gutter)); margin-inline: auto; padding-inline: var(--gb-gutter); }
.gb .gb-container--wide { max-width: calc(var(--gb-max-wide) + 2 * var(--gb-gutter)); }
.gb .gb-container--narrow { max-width: calc(var(--gb-max-narrow) + 2 * var(--gb-gutter)); }
.gb .gb-section { position: relative; padding-block: var(--gb-section); background-color: var(--gb-bg); color: var(--gb-fg); }
.gb .gb-section--s { padding-block: var(--gb-section-s); }
.gb .gb-section--flush-top { padding-top: 0; }
.gb .gb-section--flush-bottom { padding-bottom: 0; }
.gb .gb-section--rule { border-top: 1px solid var(--gb-rule); }
.gb .gb-section + .gb-section--same { padding-top: 0; }   /* twee secties in hetzelfde thema na elkaar */

.gb .gb-grid { display: grid; gap: var(--gb-gap); grid-template-columns: minmax(0, 1fr); }
.gb .gb-grid--tight { gap: clamp(.5rem, .3rem + .8vw, 1rem); }
.gb .gb-grid--loose { gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem); }
@media (min-width: 600px) {
  .gb .gb-grid--2, .gb .gb-grid--4, .gb .gb-grid--sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .gb .gb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .gb .gb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gb .gb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gb .gb-grid--5-7 { grid-template-columns: 5fr 7fr; }
  .gb .gb-grid--7-5 { grid-template-columns: 7fr 5fr; }
  .gb .gb-grid--4-8 { grid-template-columns: 4fr 8fr; }
}
.gb .gb-grid--mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 2-koloms media + tekst */
.gb .gb-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 6rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
.gb .gb-split__body { max-width: 38rem; }
@media (min-width: 1024px) {
  .gb .gb-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gb .gb-split--media-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .gb .gb-split--body-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .gb .gb-split--reverse > .gb-split__media { order: 2; }
  .gb .gb-split--top { align-items: start; }
  .gb .gb-split--sticky > .gb-split__body { position: sticky; top: calc(var(--gb-header-h) + 2rem); align-self: start; }
}

/* 05 · KNOPPEN EN LINKS --------------------------------------------------- */
.gb .gb-btn {
  --_h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: var(--_h); padding: .625rem 1.5rem; margin: 0;
  border: 1px solid transparent; border-radius: var(--gb-radius-btn);
  font-family: var(--gb-sans); font-size: .96875rem; font-weight: 600; line-height: 1.2; letter-spacing: .005em;
  text-align: center; text-decoration: none; text-transform: none; white-space: normal; cursor: pointer;
  transition: background-color .2s var(--gb-ease), color .2s var(--gb-ease), border-color .2s var(--gb-ease);
  -webkit-tap-highlight-color: transparent; box-shadow: none;
}
.gb .gb-btn .gb-i { width: 1.0625rem; height: 1.0625rem; transition: transform .25s var(--gb-ease); }
.gb .gb-btn:hover .gb-i--arrow, .gb .gb-link:hover .gb-i--arrow { transform: translateX(3px); }
.gb .gb-btn--primary { background-color: var(--gb-orange); color: var(--gb-carbon); }
.gb .gb-btn--primary:hover, .gb .gb-btn--primary:focus-visible { background-color: var(--gb-orange-hover); color: var(--gb-carbon); }
.gb .gb-btn--secondary { background-color: transparent; color: var(--gb-fg); border-color: var(--gb-rule-strong); }
.gb .gb-btn--secondary:hover, .gb .gb-btn--secondary:focus-visible { border-color: var(--gb-fg); background-color: var(--gb-tint); color: var(--gb-fg); }
.gb .gb-btn--ghost { background-color: transparent; color: var(--gb-fg); padding-inline: .875rem; }
.gb .gb-btn--ghost:hover, .gb .gb-btn--ghost:focus-visible { background-color: var(--gb-tint); color: var(--gb-fg); }
.gb .gb-btn--dark { background-color: var(--gb-carbon); color: #FFFFFF; }
.gb .gb-btn--dark:hover, .gb .gb-btn--dark:focus-visible { background-color: #2A2623; color: #FFFFFF; }
.gb .gb-btn--light { background-color: #FFFFFF; color: var(--gb-carbon); }
.gb .gb-btn--light:hover, .gb .gb-btn--light:focus-visible { background-color: var(--gb-paper); color: var(--gb-carbon); }
.gb .gb-btn--sm { --_h: 44px; padding: .5rem 1rem; font-size: .9375rem; gap: .5rem; }
.gb .gb-btn--lg { --_h: 58px; padding-inline: 1.875rem; font-size: 1.0625rem; }
.gb .gb-btn--block { width: 100%; }
.gb .gb-btn--icon { --_h: 44px; width: var(--_h); padding: 0; }

.gb .gb-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }   /* kolomruimte: het lock-on-kader (inset −7px) raakt de buur niet */
.gb .gb-actions > .gb-btn { flex: 1 1 100%; }
@media (min-width: 600px) { .gb .gb-actions > .gb-btn { flex: 0 0 auto; } }
.gb .gb-actions--inline > .gb-btn { flex: 0 0 auto; }
.gb .gb-cta { display: grid; gap: .875rem; justify-items: start; }
.gb .gb-cta > .gb-actions { width: 100%; }

.gb .gb-link {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--gb-fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: var(--gb-rule-strong); transition: text-decoration-color .2s var(--gb-ease);
}
.gb .gb-link:hover, .gb .gb-link:focus-visible { text-decoration-color: currentColor; color: var(--gb-fg); }
.gb .gb-link .gb-i { width: 1rem; height: 1rem; transition: transform .25s var(--gb-ease); }
.gb .gb-link--plain { text-decoration: none; }
.gb .gb-link--plain:hover { text-decoration: underline; }
/* maatlijn bij hover en focus (primitief in §34): de onderstreping blijft in rust staan */
.gb .gb-link { position: relative; }
.gb .gb-link::after { left: 0; right: 0; bottom: -1px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--m-ease-settle); }
@media (hover: hover) { .gb .gb-link:hover { text-decoration-color: transparent; } .gb .gb-link:hover::after { transform: none; } }
.gb .gb-link:focus-visible::after { transform: none; }
.gb .gb-link--plain::after { display: none; }

/* 06 · HEADER ------------------------------------------------------------- */
.gb.gb-shell, .gb .gb-shell { display: contents; }
.gb .gb-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 1100; padding: .75rem 1rem;
  background: var(--gb-orange); color: var(--gb-carbon); font-weight: 600; border-radius: var(--gb-radius-btn);
}
.gb .gb-skip:focus { top: 1rem; }
.gb .gb-header {
  position: sticky; top: 0; z-index: 1000; height: var(--gb-header-h);
  background-color: var(--gb-carbon); color: #FFFFFF;
  border-bottom: 1px solid transparent; transition: border-color .25s var(--gb-ease), background-color .25s var(--gb-ease);
}
.gb .gb-header.is-scrolled { border-bottom-color: rgba(255,255,255,.1); background-color: rgba(10, 9, 8, .97); }
/* maatlat onder de header (partial): vaste maatstreepjes + titanium voortgangslijn (§34) */
.gb .m-ruler { position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; overflow: hidden; pointer-events: none; }
.gb .m-ruler::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px 80px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 1px, transparent 1px 16px) 0 100% / 100% 3px no-repeat; }
.gb .m-ruler__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gb-titanium); transform-origin: 0 50%; transform: scaleX(0); }
.gb .gb-header__logo img { transform-origin: 0 50%; }
.gb .gb-header.is-scrolled .gb-header__logo img { transform: scale(.9); }
.gb .gb-header__bar { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.gb .gb-header__logo { flex: none; display: block; margin-right: auto; }
.gb .gb-header__logo img { width: 120px; height: auto; }   /* merkgids p. 017: zonder tagline min. 120 px */
.gb .gb-nav { display: none; }
.gb .gb-header__actions { display: flex; align-items: center; gap: .5rem; }
.gb .gb-header__phone { display: none; align-items: center; gap: .5rem; color: rgba(255,255,255,.76); font-family: var(--gb-mono); font-size: .8125rem; letter-spacing: .03em; white-space: nowrap; }
.gb .gb-header__phone:hover { color: #FFFFFF; }
.gb .gb-header__phone .gb-i { width: 1rem; height: 1rem; }
.gb .gb-header__cta { --_h: 40px; padding-inline: .875rem; font-size: .875rem; white-space: nowrap; }
.gb .gb-header__toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-right: -10px; color: #FFFFFF; }
.gb .gb-burger, .gb .gb-burger::before, .gb .gb-burger::after { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--gb-ease), background-color .2s; }
.gb .gb-burger { position: relative; }
.gb .gb-burger::before, .gb .gb-burger::after { content: ""; position: absolute; left: 0; }
.gb .gb-burger::before { transform: translateY(-7px); }
.gb .gb-burger::after { transform: translateY(7px); }
.gb .gb-header__toggle[aria-expanded="true"] .gb-burger { background: transparent; }
.gb .gb-header__toggle[aria-expanded="true"] .gb-burger::before { transform: rotate(45deg); }
.gb .gb-header__toggle[aria-expanded="true"] .gb-burger::after { transform: rotate(-45deg); }
@media (max-width: 379px) { .gb .gb-header__cta { display: none; } }
@media (max-width: 1179px) { .gb .gb-header__bar { gap: .75rem; } }
@media (min-width: 1180px) {
  .gb .gb-header__bar { gap: 2rem; }
  .gb .gb-header__logo { margin-right: 0; }
  .gb .gb-nav { display: block; margin-right: auto; }
  .gb .gb-nav__list { display: flex; align-items: center; gap: clamp(1.125rem, .2rem + 1.4vw, 2rem); }
  .gb .gb-nav__link {
    position: relative; display: block; padding-block: .5rem; font-size: .9375rem; font-weight: 500;
    color: rgba(255,255,255,.76); white-space: nowrap; transition: color .2s;
  }
  .gb .gb-nav__link::after { left: 0; right: 0; bottom: -5px; transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--m-t-hover) var(--m-ease-settle); }   /* maatlijn (§34) */
  .gb .gb-nav__link:hover { color: #FFFFFF; }
  .gb .gb-nav__link:hover::after { transform: scaleX(1); }
  .gb .gb-nav__link[aria-current="page"] { color: #FFFFFF; }
  .gb .gb-nav__link[aria-current="page"]::after { transform: scaleX(1); opacity: .6; }
  .gb .gb-header__actions { gap: 1.5rem; }
  .gb .gb-header__phone { display: inline-flex; }
  .gb .gb-header__phone span { display: none; }
  .gb .gb-header__cta { --_h: 44px; padding-inline: 1.125rem; }
  .gb .gb-header__toggle { display: none; }
}
@media (min-width: 1380px) { .gb .gb-header__phone span { display: inline; } }

/* 07 · MOBIEL MENU -------------------------------------------------------- */
.gb .gb-menu {
  position: fixed; inset: var(--gb-header-h) 0 0 0; z-index: 999; overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--gb-carbon); color: #FFFFFF;
  padding: 1rem var(--gb-gutter) calc(2rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--gb-ease), transform .3s var(--gb-ease), visibility 0s linear .3s;
}
.gb .gb-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--gb-ease), transform .3s var(--gb-ease), visibility 0s; }
.gb .gb-menu__list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.gb .gb-menu__link { display: flex; justify-content: space-between; align-items: center; padding: .875rem 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF; }
.gb .gb-menu__link .gb-i { width: 1.125rem; height: 1.125rem; color: rgba(255,255,255,.5); }
.gb .gb-menu__link[aria-current="page"] { color: var(--gb-orange); }
.gb .gb-menu__sub { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.gb .gb-menu__sub a { font-size: 1rem; color: rgba(255,255,255,.76); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: .3em; }
.gb .gb-menu__contact { display: grid; gap: .375rem; font-family: var(--gb-mono); font-size: .875rem; color: rgba(255,255,255,.76); }
.gb .gb-menu__contact a { color: #FFFFFF; }
.gb .gb-menu__actions { margin-top: auto; display: grid; gap: .625rem; }
@media (min-width: 1180px) { .gb .gb-menu { display: none; } }
html.gb-menu-open { overflow: hidden; }

/* 08 · FOOTER ------------------------------------------------------------- */
.gb .gb-footer { background-color: var(--gb-carbon); color: #FFFFFF; border-top: 1px solid rgba(255,255,255,.1); padding: clamp(3.5rem, 2rem + 5vw, 7rem) 0 1.75rem; }
.gb .gb-footer__top { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.gb .gb-footer__logo img { width: 220px; height: auto; }
.gb .gb-footer__claim { margin-top: 1.75rem; font-size: var(--gb-fs-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.gb .gb-footer__lead { margin-top: .625rem; color: rgba(255,255,255,.72); max-width: 32ch; font-size: var(--gb-fs-small); }
.gb .gb-footer__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.gb .gb-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.gb .gb-footer__h { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 1.125rem; }
.gb .gb-footer__list { display: grid; gap: .625rem; font-size: var(--gb-fs-small); }
.gb .gb-footer__list a { color: rgba(255,255,255,.8); transition: color .2s; }
.gb .gb-footer__list a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .3em; }
.gb .gb-footer__nap { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.gb .gb-footer__address { font-size: var(--gb-fs-small); color: rgba(255,255,255,.8); line-height: 1.7; }
.gb .gb-footer__address a { color: #FFFFFF; white-space: nowrap; }
.gb .gb-footer__address a:hover { text-decoration: underline; text-underline-offset: .3em; }
.gb .gb-footer__address .gb-sep { color: rgba(255,255,255,.4); padding-inline: .125rem; }
.gb .gb-footer__address > span:not(.gb-sep), .gb .gb-footer__address > a { white-space: nowrap; }
@media (max-width: 599px) {   /* QA 26-10: op mobiel onder elkaar, zonder losse scheidingspunt aan het eind van een regel */
  .gb .gb-footer__address { display: grid; justify-items: start; }
  .gb .gb-footer__address .gb-sep { display: none; }
}
.gb .gb-social { display: flex; gap: .5rem; }
.gb .gb-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: rgba(255,255,255,.85); transition: border-color .2s, color .2s; }
.gb .gb-social a:hover { border-color: #FFFFFF; color: #FFFFFF; }
.gb .gb-social .gb-i { width: 1.125rem; height: 1.125rem; }
.gb .gb-footer__bottom { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.gb .gb-footer__bottom a:hover { color: #FFFFFF; }
@media (min-width: 768px) { .gb .gb-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gb .gb-footer__top { grid-template-columns: 5fr 7fr; gap: 4rem; } }
@media (max-width: 767px) { .gb .gb-footer { padding-bottom: calc(1.75rem + 84px); } }   /* ruimte voor de sticky balk */

/* 09 · STICKY MOBIELE CTA ------------------------------------------------- */
.gb .gb-sticky {
  position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 990;
  display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: .5rem; padding: .5rem;
  background-color: rgba(10, 9, 8, .94); border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(calc(100% + 2rem)); transition: transform .4s var(--gb-ease); color: #FFFFFF;
}
.gb .gb-sticky.is-visible { transform: none; }
.gb .gb-sticky .gb-btn { --_h: 48px; padding-inline: 1rem; }
.gb .gb-sticky__call { display: inline-flex; align-items: center; justify-content: center; height: 48px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--gb-radius-btn); color: #FFFFFF; }
.gb .gb-sticky__call .gb-i { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) { .gb .gb-sticky { display: none; } }
html.gb-sticky-on .gb .gb-header__cta { visibility: hidden; }
@media (min-width: 768px) { html.gb-sticky-on .gb .gb-header__cta { visibility: visible; } }

/* 10 · BREADCRUMB --------------------------------------------------------- */
.gb .gb-crumbs { background-color: var(--gb-bg); color: var(--gb-fg); border-bottom: 1px solid var(--gb-rule); }
.gb .gb-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; padding-block: .875rem; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb .gb-crumbs__list li { display: inline-flex; align-items: center; }
.gb .gb-crumbs__list li + li::before { content: "/"; padding-inline: .625rem; opacity: .6; }
.gb .gb-crumbs__list a { color: var(--gb-fg-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: text-decoration-color .2s; }
.gb .gb-crumbs__list a:hover { text-decoration-color: currentColor; color: var(--gb-fg); }
.gb .gb-crumbs__list [aria-current="page"] { color: var(--gb-fg-3); }
.gb .gb-crumbs--overlay { border-bottom-color: rgba(255,255,255,.1); }

/* 11 · HERO --------------------------------------------------------------- */
/* standaard: foto vol in beeld met overlay (desktop), foto boven tekst (mobiel) */
.gb .gb-hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--gb-carbon); color: #FFFFFF; --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.82); --gb-fg-3: rgba(255,255,255,.66); --gb-rule: rgba(255,255,255,.16); --gb-rule-strong: rgba(255,255,255,.4); --gb-tint: rgba(255,255,255,.08); --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange); }
.gb .gb-hero__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--gb-graphite); }
.gb .gb-hero__media img, .gb .gb-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.gb .gb-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,8,.15) 0%, rgba(10,9,8,0) 30%, rgba(10,9,8,0) 55%, rgba(10,9,8,.92) 92%, #0A0908 100%); pointer-events: none; }
.gb .gb-hero__body { position: relative; z-index: 1; margin-top: -3.5rem; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.gb .gb-hero__content { max-width: 54rem; }
.gb .gb-hero__content > .gb-kicker + * { margin-top: 1.125rem; }
.gb .gb-hero__title { margin-top: 1.125rem; }
.gb .gb-hero__lead { margin-top: 1.25rem; font-size: var(--gb-fs-lead); line-height: 1.5; color: var(--gb-fg-2); max-width: 36em; }
.gb .gb-hero__cta { margin-top: 2rem; }
.gb .gb-hero__meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; }
.gb .gb-hero__caption {
  position: absolute; z-index: 2; right: var(--gb-gutter); top: 1rem;
  display: inline-flex; align-items: center; gap: .625rem; font-family: var(--gb-mono); font-size: var(--gb-fs-mono);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.86);
  padding: .375rem .625rem; background: rgba(10,9,8,.5); border-radius: 2px;
}
.gb .gb-hero__caption::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.gb .gb-hero__foot { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .gb .gb-hero { display: grid; min-height: clamp(560px, 82svh, 880px); align-items: end; }
  .gb .gb-hero__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .gb .gb-hero__media::after { background:
      linear-gradient(90deg, rgba(10,9,8,.88) 0%, rgba(10,9,8,.6) 34%, rgba(10,9,8,.08) 66%, rgba(10,9,8,0) 100%),
      linear-gradient(0deg, rgba(10,9,8,.85) 0%, rgba(10,9,8,0) 42%),
      linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,0) 22%); }
  .gb .gb-hero__body { margin-top: 0; padding-top: clamp(6rem, 4rem + 6vw, 10rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
  .gb .gb-hero__caption { top: auto; bottom: clamp(3rem, 2rem + 3vw, 5rem); background: none; padding: 0; }
  .gb .gb-hero--has-foot .gb-hero__caption { bottom: calc(clamp(3rem, 2rem + 3vw, 5rem) + 7.5rem); }
}
/* split: tekst links op carbon, foto rechts */
@media (min-width: 1024px) {
  .gb .gb-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(560px, 76svh, 820px); }
  .gb .gb-hero--split .gb-hero__media { position: relative; inset: auto; grid-column: 2; grid-row: 1; z-index: 0; }
  .gb .gb-hero--split .gb-hero__media::after { background: linear-gradient(90deg, #0A0908 0%, rgba(10,9,8,0) 22%); }
  .gb .gb-hero--split .gb-hero__body { grid-column: 1; grid-row: 1; align-self: center; padding: clamp(4rem, 3rem + 3vw, 6rem) clamp(2rem, 4vw, 5rem) clamp(4rem, 3rem + 3vw, 6rem) 0; }
  .gb .gb-hero--split .gb-hero__body.gb-container { max-width: none; margin: 0; padding-left: max(var(--gb-gutter), calc((100vw - var(--gb-max)) / 2)); }
  .gb .gb-hero--split .gb-hero__caption { bottom: 1.5rem; right: 1.5rem; }
  .gb .gb-hero--split .gb-hero__foot { grid-column: 1 / -1; }
}
/* plain: geen foto, dichte carbon kop (prijzen, faq, contact, afspraak) */
.gb .gb-hero--plain { display: block; min-height: 0; padding-block: clamp(3rem, 2rem + 4.4vw, 6.5rem) clamp(2.5rem, 1.8rem + 3vw, 5rem); }
.gb .gb-hero--plain .gb-hero__body { margin: 0; padding: 0; }
.gb .gb-hero--plain .gb-hero__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1024px) { .gb .gb-hero--plain .gb-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.gb .gb-hero__aside { border-top: 1px solid var(--gb-rule); padding-top: 1.5rem; }
.gb .gb-hero--paper { background-color: var(--gb-paper); color: var(--gb-charcoal); --gb-fg: var(--gb-charcoal); --gb-fg-2: var(--gb-graphite); --gb-fg-3: var(--gb-grey); --gb-rule: var(--gb-line); --gb-rule-strong: rgba(33,30,27,.28); --gb-tint: rgba(33,30,27,.045); --gb-marker: var(--gb-graphite); --gb-focus: var(--gb-carbon); }
/* artikel: titel, meta, groot beeld eronder */
.gb .gb-hero--article { display: block; min-height: 0; padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: 0; background: linear-gradient(var(--gb-carbon) 0, var(--gb-carbon) 72%, var(--gb-paper) 72%); }
.gb .gb-hero--article .gb-hero__body { margin-top: 0; padding-top: 0; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.gb .gb-hero--article .gb-hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; border-radius: var(--gb-radius); max-width: var(--gb-max); margin-inline: auto; }
.gb .gb-hero--article .gb-hero__media::after { display: none; }
.gb .gb-hero--article .gb-hero__media[data-m="glint"]::after { display: block; }   /* titaniumglans (M10) mag wel */
@media (min-width: 1024px) { .gb .gb-hero--article .gb-hero__media { aspect-ratio: 2 / 1; } }
.gb .gb-hero--article .gb-hero__wrap { padding-inline: var(--gb-gutter); }

/* 12 · ANSWER-FIRST ------------------------------------------------------- */
.gb .gb-answer { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.gb .gb-answer__text { font-size: var(--gb-fs-answer); line-height: 1.45; letter-spacing: -.012em; color: var(--gb-fg); max-width: 38em; font-weight: 400; }
.gb .gb-answer__text strong, .gb .gb-answer__text b { font-weight: 600; }
.gb .gb-answer__text + .gb-answer__text { margin-top: .875rem; }
.gb .gb-answer__more { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.gb .gb-answer__updated { margin-top: 1.25rem; }
.gb .m-amt { position: relative; white-space: nowrap; }   /* bedrag in de answer-first (gb.js): maatstreep eronder */
.gb .m-amt::after { left: 0; right: 0; bottom: -.3em; opacity: .5; }
@media (min-width: 1024px) {
  .gb .gb-answer { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem; }
  .gb .gb-answer > .gb-kicker { padding-top: .6rem; align-self: start; }
}

/* 13 · SECTIEKOP ---------------------------------------------------------- */
.gb .gb-head { display: grid; gap: 1.125rem; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 4rem); max-width: 48rem; }
.gb .gb-head .gb-lead { margin-top: .25rem; }
.gb .gb-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.gb .gb-head--rule { padding-top: 1.5rem; border-top: 1px solid var(--gb-rule); }
.gb .gb-head--rule, .gb [data-m-rule] { position: relative; }   /* maatlijn op de bovenrand (§34) */
.gb .gb-head--rule::before, .gb [data-m-rule]::before { left: 0; right: 0; top: -4px; opacity: .45; }
.gb .gb-head--split { max-width: none; }
@media (min-width: 1024px) {
  .gb .gb-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .gb .gb-head--split > .gb-kicker { grid-column: 1 / -1; }
  .gb .gb-head--split > .gb-head__side { justify-self: end; display: grid; gap: 1.25rem; justify-items: start; max-width: 32rem; }
}

/* 14 · KAARTEN ------------------------------------------------------------ */
/* basis */
.gb .gb-card { display: flex; flex-direction: column; background-color: var(--gb-surface); color: var(--gb-fg); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.gb .gb-card--flat { border-color: transparent; }
.gb .gb-card__title { font-size: var(--gb-fs-h3); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
.gb .gb-card__text { margin-top: .625rem; color: var(--gb-fg-2); font-size: var(--gb-fs-small); }
.gb .gb-card__foot { margin-top: auto; padding-top: 1.5rem; }
.gb a.gb-card { transition: border-color .2s var(--gb-ease), transform .3s var(--gb-ease); }
.gb a.gb-card:hover { border-color: var(--gb-rule-strong); }

/* model */
.gb .gb-models { display: grid; gap: clamp(.5rem, .25rem + 1vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .gb .gb-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gb .gb-models--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gb .gb-models__group { grid-column: 1 / -1; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--gb-rule); }
.gb .gb-models__group:first-child { margin-top: 0; }
.gb .gb-model { position: relative; display: flex; flex-direction: column; background-color: var(--gb-black); color: #FFFFFF; border: 1px solid rgba(255,255,255,.1); border-radius: var(--gb-radius); overflow: hidden; transition: border-color .25s var(--gb-ease); }
.gb .gb-model:hover { border-color: rgba(255,255,255,.3); }
.gb .gb-model__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gb-black); }
.gb .gb-model__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-t-reveal) var(--m-ease-settle); }
.gb .gb-model:hover .gb-model__media img { transform: scale(1.025); }
.gb .gb-model__body { display: flex; flex-direction: column; gap: .375rem; flex: 1; padding: 0 clamp(.75rem, .5rem + 1vw, 1.5rem) clamp(.875rem, .6rem + 1vw, 1.375rem); }
.gb .gb-model__disc { font-family: var(--gb-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.gb .gb-model__name { font-size: clamp(1rem, .85rem + .6vw, 1.375rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.gb .gb-model__desc { font-size: var(--gb-fs-xs); line-height: 1.5; color: rgba(255,255,255,.74); margin-top: .125rem; }
.gb .gb-model__foot { margin-top: auto; padding-top: .875rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid rgba(255,255,255,.12); margin-top: .875rem; }
.gb .gb-model__price { font-family: var(--gb-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); line-height: 1.35; }
.gb .gb-model__price b { display: block; font-family: var(--gb-sans); font-size: clamp(.9375rem, .85rem + .3vw, 1.0625rem); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: #FFFFFF; }
.gb .gb-model__arrow { width: 1.125rem; height: 1.125rem; flex: none; color: rgba(255,255,255,.7); transition: transform .25s var(--gb-ease), color .2s; }
.gb .gb-model:hover .gb-model__arrow { transform: translateX(3px); color: #FFFFFF; }
.gb .gb-model__name { transition: transform var(--m-t-hover) var(--m-ease-settle); }
.gb .gb-model:hover .gb-model__name { transform: translateX(4px); }
.gb .gb-model__foot { position: relative; }
.gb .gb-model__foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(255,255,255,.6); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--m-ease-settle); }
.gb .gb-model:hover .gb-model__foot::before { transform: none; }
@media (min-width: 768px) { .gb .gb-model__desc { font-size: var(--gb-fs-small); } .gb .gb-model__disc, .gb .gb-model__price { font-size: var(--gb-fs-mono); } }
@media (max-width: 479px) { .gb .gb-model__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }

/* modelrij (frames-pagina) */
.gb .gb-modelrow { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 5rem); grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); border-top: 1px solid var(--gb-rule); }
.gb .gb-modelrow__media { border-radius: var(--gb-radius); overflow: hidden; background: var(--gb-black); aspect-ratio: 4 / 3; }
.gb .gb-modelrow__media img { width: 100%; height: 100%; object-fit: cover; }
.gb .gb-modelrow__name { font-size: var(--gb-fs-h2); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: 1.05; margin-top: .875rem; }
.gb .gb-modelrow__body > * + * { margin-top: 1rem; }
@media (min-width: 1024px) {
  .gb .gb-modelrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .gb .gb-modelrow--reverse .gb-modelrow__media { order: 2; }
}

/* dienst */
.gb .gb-service { display: flex; flex-direction: column; gap: 1rem; background-color: var(--gb-surface); color: var(--gb-fg); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); }
.gb .gb-service__label { align-self: flex-start; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); border: 1px solid var(--gb-rule-strong); padding: .25rem .5rem; border-radius: 2px; }
.gb .gb-service__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.gb .gb-service__text { color: var(--gb-fg-2); }
.gb .gb-service__foot { margin-top: auto; padding-top: .5rem; display: grid; gap: .75rem; }
.gb .gb-service--featured { background-color: var(--gb-carbon); color: #FFFFFF; border-color: var(--gb-carbon); --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.76); --gb-fg-3: rgba(255,255,255,.62); --gb-rule: rgba(255,255,255,.14); --gb-rule-strong: rgba(255,255,255,.34); --gb-tint: rgba(255,255,255,.06); --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange); }

/* artikel */
.gb .gb-post { display: block; color: var(--gb-fg); }
.gb .gb-post__link { display: grid; gap: .75rem; color: inherit; }
.gb .gb-post__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--gb-radius); background: var(--gb-surface); margin-bottom: .375rem; }
.gb .gb-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-t-reveal) var(--m-ease-settle); }
.gb .gb-post__link:hover .gb-post__media img { transform: scale(1.025); }
.gb .gb-post__meta { display: flex; flex-wrap: wrap; gap: .25rem 0; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb .gb-post__meta span + span::before { content: "/"; padding-inline: .625rem; opacity: .6; }
.gb .gb-post__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.gb .gb-post__link:hover .gb-post__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.gb .gb-post__excerpt { color: var(--gb-fg-2); font-size: var(--gb-fs-small); max-width: 46ch; }
@media (min-width: 1024px) {
  .gb .gb-post--featured .gb-post__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 4rem; align-items: center; }
  .gb .gb-post--featured .gb-post__media { grid-row: 1 / span 4; margin: 0; }
  .gb .gb-post--featured .gb-post__title { font-size: var(--gb-fs-h2); line-height: 1.08; }
}

/* 15 · STAPPEN EN TIJDLIJN ------------------------------------------------ */
.gb .gb-steps { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: gbstep; border-top: 1px solid var(--gb-rule); }
.gb .gb-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.5rem 1.75rem; border-bottom: 1px solid var(--gb-rule); }
.gb .gb-step__no { grid-row: 1 / span 3; font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); font-weight: 600; letter-spacing: .06em; color: var(--gb-fg-3); padding-top: .2rem; }
.gb .gb-step__title { font-size: var(--gb-fs-h3); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
.gb .gb-step__text { margin-top: .625rem; color: var(--gb-fg-2); font-size: var(--gb-fs-body); max-width: 40ch; }
.gb .gb-step__meta { margin-top: .875rem; }
.gb .gb-step__media { margin-top: 1.25rem; aspect-ratio: 3 / 2; border-radius: var(--gb-radius); overflow: hidden; }
.gb .gb-step__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .gb .gb-steps--2, .gb .gb-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gb-gap); border-top: 0; }
  .gb .gb-steps--2 .gb-step, .gb .gb-steps--4 .gb-step { border-top: 1px solid var(--gb-rule); border-bottom: 0; }
}
@media (min-width: 1024px) {
  .gb .gb-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gb-gap); border-top: 0; }
  .gb .gb-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gb .gb-steps--3 .gb-step, .gb .gb-steps--4 .gb-step { display: flex; flex-direction: column; border-top: 1px solid var(--gb-rule); border-bottom: 0; padding-block: 1.5rem 0; }
  .gb .gb-steps--3 .gb-step__no, .gb .gb-steps--4 .gb-step__no { margin-bottom: 2.75rem; }
}
.gb .gb-steps__foot { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: space-between; }
/* stappenlijn (C7, §34): gestapeld verticaal langs de nummers, naast elkaar over de bovenrand (--m-gap = vertraging per stap) */
.gb .gb-step { position: relative; --m-gap: 0ms; }
.gb .gb-step::before { content: ""; position: absolute; left: .55rem; top: 2.6rem; bottom: 1.25rem; width: 1px; background: var(--gb-fg); opacity: .35; pointer-events: none; transform-origin: 50% 0; }
.gb .gb-step:nth-child(2) { --m-s: 1; } .gb .gb-step:nth-child(3) { --m-s: 2; } .gb .gb-step:nth-child(4) { --m-s: 3; }
@media (min-width: 768px) { .gb :is(.gb-steps--2, .gb-steps--4) .gb-step { --m-gap: 420ms; } .gb :is(.gb-steps--2, .gb-steps--4) .gb-step::before { inset: -1px 0 auto; width: auto; height: 1px; opacity: 1; transform-origin: 0 50%; } }
@media (min-width: 1024px) { .gb .gb-steps--3 .gb-step { --m-gap: 420ms; } .gb .gb-steps--3 .gb-step::before { inset: -1px 0 auto; width: auto; height: 1px; opacity: 1; transform-origin: 0 50%; } }

.gb .gb-timeline { position: relative; display: grid; gap: 0; }
.gb .gb-timeline__item { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: 2.25rem; }
.gb .gb-timeline__item::before { content: ""; position: absolute; left: calc(1.375rem - .5px); top: 2.75rem; bottom: 0; width: 1px; background: var(--gb-rule-strong); }
.gb .gb-timeline__item:last-child { padding-bottom: 0; }
.gb .gb-timeline__item:last-child::before { display: none; }
.gb .gb-timeline__no { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gb-rule-strong); border-radius: 50%; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; color: var(--gb-fg); background: var(--gb-bg); }
.gb .gb-timeline__body { padding-top: .5rem; }
.gb .gb-timeline__title { font-size: var(--gb-fs-h4); font-weight: 600; line-height: 1.3; }
.gb .gb-timeline__text { margin-top: .375rem; color: var(--gb-fg-2); max-width: 52ch; }
.gb .gb-timeline__meta { margin-top: .625rem; }
.gb .gb-timeline__item--key .gb-timeline__no { background: var(--gb-fg); color: var(--gb-bg); border-color: var(--gb-fg); }
.gb .gb-timeline__item::before { transform-origin: 50% 0; }

/* 16 · FEITENREGEL, TRUST, BADGES, CHECKS --------------------------------- */
.gb .gb-factline { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 0; font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); line-height: 1.5; letter-spacing: .01em; color: var(--gb-fg-2); }
/* QA 26-10: elke li krijgt een punt ervoor; de punt aan het begin van elke regel valt buiten de lijst en wordt afgesneden.
   Zo begint een afgebroken regel nooit met een punt (zelfde techniek als eerder alleen op bike-fit en over). */
.gb .gb-factline { overflow: hidden; }
.gb .gb-factline li { margin-left: -1.5rem; padding-right: 1.5rem; }
.gb .gb-factline li::before { content: "·"; display: inline-block; width: 1.5rem; text-align: center; color: var(--gb-fg-3); }
.gb .gb-factline--caps { font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; }
.gb .gb-factline--box { padding: .875rem 1.125rem; border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); }
.gb .gb-factline--box li:first-child::before { visibility: hidden; }   /* padding: de eerste punt valt anders binnen de box */

.gb .gb-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--gb-rule); }
.gb .gb-trust__item { display: flex; gap: .75rem; align-items: flex-start; padding: 1.125rem .75rem 1.125rem 0; border-bottom: 1px solid var(--gb-rule); }
.gb .gb-trust__item:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--gb-rule); }
.gb .gb-trust__item:nth-last-child(-n+2):nth-child(odd), .gb .gb-trust__item:last-child { border-bottom: 0; }
.gb .gb-trust__item .gb-i { width: 1.25rem; height: 1.25rem; color: var(--gb-fg-2); margin-top: .1rem; }
.gb .gb-trust__title { display: block; font-size: var(--gb-fs-small); font-weight: 600; line-height: 1.3; color: var(--gb-fg); }
.gb .gb-trust__text { display: block; margin-top: .25rem; font-size: var(--gb-fs-xs); line-height: 1.45; color: var(--gb-fg-2); }
@media (min-width: 1024px) {
  .gb .gb-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gb .gb-trust__item { padding: 1.5rem 1.5rem 1.75rem 0; border-bottom: 0; }
  .gb .gb-trust__item + .gb-trust__item { padding-left: 1.5rem; border-left: 1px solid var(--gb-rule); }
  .gb .gb-trust__text { font-size: var(--gb-fs-small); }
}

.gb .gb-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.gb .gb-badge { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; padding: .3125rem .75rem; border: 1px solid var(--gb-rule-strong); border-radius: 2px; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gb-fg-2); line-height: 1.3; }
.gb .gb-badge .gb-i { width: .875rem; height: .875rem; }
.gb .gb-badge--solid { background: var(--gb-fg); color: var(--gb-bg); border-color: var(--gb-fg); }
.gb .gb-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; padding-block: 1.25rem; border-block: 1px solid var(--gb-rule); font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gb-fg-3); }

.gb .gb-checks { display: grid; gap: .75rem; }
.gb .gb-checks li { position: relative; padding-left: 1.75rem; color: var(--gb-fg-2); }
.gb .gb-checks li::before { content: ""; position: absolute; left: .25rem; top: .32em; width: .4rem; height: .75rem; border-right: 1.5px solid var(--gb-fg); border-bottom: 1.5px solid var(--gb-fg); transform: rotate(45deg); }
.gb .gb-checks b, .gb .gb-checks strong { color: var(--gb-fg); }
.gb .gb-checks--rules li { padding-block: .875rem; border-top: 1px solid var(--gb-rule); }
.gb .gb-checks--rules li::before { top: calc(.875rem + .32em); }
.gb .gb-checks--rules { gap: 0; border-bottom: 1px solid var(--gb-rule); }
.gb .gb-bullets { display: grid; gap: .5rem; }
.gb .gb-bullets li { position: relative; padding-left: 1.375rem; color: var(--gb-fg-2); }
.gb .gb-bullets li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: var(--gb-marker); }
/* afvinken (M9, §34): stagger per regel; bij --rules tekent ook de lijn */
.gb .gb-checks li:nth-child(2) { --m-i: 1; } .gb .gb-checks li:nth-child(3) { --m-i: 2; } .gb .gb-checks li:nth-child(4) { --m-i: 3; } .gb .gb-checks li:nth-child(n+5) { --m-i: 4; }
.gb .gb-checks--rules li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gb-rule-strong); transform-origin: 0 50%; }
/* maten wegstrepen (M3): <p class="m-sizes" data-m-sizes aria-hidden="true"><span>XS</span>…<span class="m-sizes__you">Jouw maat</span></p> */
.gb .m-sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.gb .m-sizes > span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 2.5rem; padding-inline: .75rem; border: 1px solid var(--gb-rule-strong); border-radius: 2px; font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); font-weight: 600; letter-spacing: .06em; color: var(--gb-fg-3); }
.gb .m-sizes > span::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; background: var(--gb-fg); transform: rotate(-18deg); transform-origin: 0 50%; }
.gb .m-sizes > span:nth-child(2) { --m-i: 1; } .gb .m-sizes > span:nth-child(3) { --m-i: 2; } .gb .m-sizes > span:nth-child(4) { --m-i: 3; } .gb .m-sizes > span:nth-child(5) { --m-i: 4; }
.gb .m-sizes > .m-sizes__you { background: var(--gb-fg); border-color: var(--gb-fg); color: var(--gb-bg); font-size: var(--gb-fs-mono); letter-spacing: .14em; text-transform: uppercase; }
.gb .m-sizes > .m-sizes__you::after { display: none; }
@media (max-width: 599px) { .gb .m-sizes { gap: .375rem; } .gb .m-sizes > span { min-width: 2.5rem; padding-inline: .5rem; } }
/* vinkje in een cirkel (bedankpagina's): <span class="m-tick" aria-hidden="true"></span> */
.gb .m-tick { position: relative; display: inline-block; flex: none; width: 3rem; height: 3rem; border: var(--m-line) solid var(--gb-fg); border-radius: 50%; vertical-align: middle; }
.gb .m-tick::after { content: ""; position: absolute; left: 50%; top: 46%; width: .5rem; height: 1rem; margin: -.55rem 0 0 -.25rem; border-right: 2px solid var(--gb-fg); border-bottom: 2px solid var(--gb-fg); transform: rotate(45deg); }

/* dl feitenlijst */
.gb .gb-facts { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--gb-rule); }
.gb .gb-facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding-block: 1rem; border-bottom: 1px solid var(--gb-rule); }
.gb .gb-facts dt { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); padding-top: .2rem; }
.gb .gb-facts dd { color: var(--gb-fg); font-size: var(--gb-fs-body); line-height: 1.55; }
.gb .gb-facts dd a { text-decoration: underline; text-decoration-color: var(--gb-rule-strong); text-underline-offset: .3em; }
@media (min-width: 600px) { .gb .gb-facts__row { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) {
  .gb .gb-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; border-top: 0; }
  .gb .gb-facts--2 .gb-facts__row { border-top: 1px solid var(--gb-rule); border-bottom: 0; }
  .gb .gb-facts--2 .gb-facts__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--gb-rule); }
}

/* 17 · PRIJS EN SPECS ----------------------------------------------------- */
.gb .gb-price { display: grid; gap: .25rem; }
.gb .gb-price__label { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb .gb-price__value { font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; font-variant-numeric: tabular-nums; color: var(--gb-fg); }
.gb .gb-price__value sup { font-size: .4em; letter-spacing: 0; vertical-align: super; margin-left: .1em; font-weight: 500; }
.gb .gb-price__note { font-size: var(--gb-fs-small); color: var(--gb-fg-2); }
.gb .gb-price--s .gb-price__value { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem); }
.gb .gb-price--inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem 1rem; }

.gb .gb-pricecard { display: flex; flex-direction: column; gap: 1.5rem; background-color: var(--gb-surface); color: var(--gb-fg); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); }
.gb .gb-pricecard__head { display: grid; gap: .625rem; }
.gb .gb-pricecard__title { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.gb .gb-pricecard__sub { color: var(--gb-fg-2); }
.gb .gb-pricecard .gb-price { padding-block: 1.25rem; border-block: 1px solid var(--gb-rule); }
.gb .gb-pricecard__foot { margin-top: auto; display: grid; gap: .75rem; }
.gb .gb-pricecard--dark { background-color: var(--gb-carbon); border-color: var(--gb-carbon); color: #FFFFFF; --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.76); --gb-fg-3: rgba(255,255,255,.62); --gb-rule: rgba(255,255,255,.14); --gb-rule-strong: rgba(255,255,255,.34); --gb-tint: rgba(255,255,255,.06); --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange); }

.gb .gb-spec { display: grid; border-top: 1px solid var(--gb-rule); }
.gb .gb-spec__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--gb-rule); }
.gb .gb-spec dt, .gb .gb-spec__key { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); flex: none; }
.gb .gb-spec dd, .gb .gb-spec__val { text-align: right; font-size: var(--gb-fs-small); color: var(--gb-fg); font-weight: 500; }
.gb .gb-spec--mono dd { font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); }

.gb .gb-options { display: grid; border-top: 1px solid var(--gb-rule); }
.gb .gb-options li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--gb-rule); font-size: var(--gb-fs-small); color: var(--gb-fg); }
.gb .gb-options__price { font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); color: var(--gb-fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb .gb-options__title { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); margin-bottom: .5rem; }
/* prijslijst bij de blauwdruk (C6): beide prijzen staan er; met JS krijgt de gekozen regel de nadruk (is-on) */
.gb .m-prices { border-block: 1px solid var(--gb-rule); }
.gb .m-prices__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-block: .875rem; transition: color var(--m-t-hover) var(--m-ease-out); }
.gb .m-prices__row + .m-prices__row { border-top: 1px solid var(--gb-rule); }
.gb .m-prices dt { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gb .m-prices__val { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.gb .m-prices__base { flex: 1 0 100%; font-size: var(--gb-fs-xs); line-height: 1.45; color: var(--gb-fg-3); }
.gb-js .gb .m-prices__row:not(.is-on) { color: var(--gb-fg-3); }

/* 18 · TABELLEN ----------------------------------------------------------- */
.gb .gb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); background-color: var(--gb-surface); }
.gb .gb-table { width: 100%; min-width: 34rem; font-size: var(--gb-fs-small); line-height: 1.5; color: var(--gb-fg); }
.gb .gb-table caption { caption-side: bottom; text-align: left; padding: .875rem 1.125rem; font-size: var(--gb-fs-xs); color: var(--gb-fg-3); border-top: 1px solid var(--gb-rule); }
.gb .gb-table th, .gb .gb-table td { padding: .875rem 1.125rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gb-rule); }
.gb .gb-table thead th { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); background: var(--gb-tint); white-space: nowrap; }
.gb .gb-table tbody th { font-weight: 600; }
.gb .gb-table tbody tr:last-child > * { border-bottom: 0; }
.gb .gb-table .gb-num, .gb .gb-table td.gb-num { text-align: right; font-family: var(--gb-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb .gb-table .is-highlight { background: var(--gb-tint); }
.gb .gb-table--compact { min-width: 0; }

/* 19 · TABS --------------------------------------------------------------- */
.gb .gb-tabs__list { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-bottom: 1px solid var(--gb-rule); }
.gb .gb-tabs__list::-webkit-scrollbar { display: none; }
.gb .gb-tabs__tab { position: relative; flex: none; min-height: 48px; padding: .75rem 1rem; font-size: .96875rem; font-weight: 600; color: var(--gb-fg-3); white-space: nowrap; transition: color .2s; }
.gb .gb-tabs__tab::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; background: var(--gb-fg); transform: scaleX(0); transition: transform .3s var(--gb-ease); }
.gb .gb-tabs__tab:hover { color: var(--gb-fg); }
.gb .gb-tabs__tab[aria-selected="true"] { color: var(--gb-fg); }
.gb .gb-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.gb .gb-tabs__tab:first-child { padding-left: 0; }
.gb .gb-tabs__tab:first-child::after { left: 0; }
.gb .gb-tabs--pills .gb-tabs__list { border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); padding: .25rem; display: inline-flex; max-width: 100%; background: var(--gb-surface); }
.gb .gb-tabs--pills .gb-tabs__tab { padding: .625rem 1.125rem; min-height: 44px; border-radius: var(--gb-radius-btn); }
.gb .gb-tabs--pills .gb-tabs__tab::after { display: none; }
.gb .gb-tabs--pills .gb-tabs__tab[aria-selected="true"] { background: var(--gb-fg); color: var(--gb-bg); }
.gb .gb-tabs__panel:focus-visible { outline-offset: 8px; }
/* schakelaar Road/Gravel (C6): echte knoppen met aria-pressed; zonder JS verborgen */
.gb .m-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn); }
.gb .m-toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--gb-fg); border-radius: 2px; transition: transform .45s var(--m-ease-lock); }
.gb .m-toggle[data-state="gravel"]::before { transform: translateX(100%); }
.gb .m-toggle__btn { position: relative; z-index: 1; min-height: 44px; min-width: 6.5rem; padding: .375rem 1.125rem; border: 0; border-radius: 2px; background: none; cursor: pointer; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-fg-2); transition: color .25s var(--m-ease-out); }
.gb .m-toggle__btn[aria-pressed="true"] { color: var(--gb-bg); }
.gb .m-toggle__btn:not([aria-pressed="true"]):hover { color: var(--gb-fg); }
html:not(.gb-js) .gb .m-toggle { display: none; }
html:not(.gb-js) .gb .gb-tabs__list { display: none; }       /* zonder JS: alle panelen onder elkaar */
html:not(.gb-js) .gb .gb-tabs__panel + .gb-tabs__panel { margin-top: 3rem; }

/* 20 · ACCORDEON (details/summary, tekst altijd in de HTML) --------------- */
.gb .gb-faq { border-top: 1px solid var(--gb-rule); }
.gb .gb-faq__group + .gb-faq__group { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.gb .gb-faq__heading { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-fg-3); padding-bottom: 1rem; margin-bottom: 0; border-bottom: 1px solid var(--gb-fg); line-height: 1.4; }
.gb .gb-faq__heading + .gb-faq { border-top: 0; }
.gb .gb-faq__item { border-bottom: 1px solid var(--gb-rule); }
.gb .gb-faq__q { position: relative; display: block; list-style: none; cursor: pointer; padding: 1.25rem 3rem 1.25rem 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--gb-fg); }
.gb .gb-faq__q::-webkit-details-marker { display: none; }
.gb .gb-faq__q::marker { content: ""; }
.gb .gb-faq__q::before, .gb .gb-faq__q::after { content: ""; position: absolute; right: .5rem; top: 50%; width: 14px; height: 1.5px; background: currentColor; transition: transform .3s var(--gb-ease); }
.gb .gb-faq__q::after { transform: rotate(90deg); }
.gb .gb-faq__item[open] > .gb-faq__q::after { transform: rotate(0); }
.gb .gb-faq__q:hover { color: var(--gb-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--gb-rule-strong); }
.gb .gb-faq__a { padding: 0 0 1.5rem; color: var(--gb-fg-2); max-width: 68ch; }
.gb .gb-faq__a > * + * { margin-top: .75rem; }
.gb .gb-faq__a a { color: var(--gb-fg); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--gb-rule-strong); }
.gb .gb-faq__a strong, .gb .gb-faq__a b { color: var(--gb-fg); }

/* 21 · CTA-BAND ----------------------------------------------------------- */
.gb .gb-ctaband { position: relative; isolation: isolate; overflow: hidden; background-color: var(--gb-carbon); color: #FFFFFF; padding-block: clamp(5rem, 3rem + 8vw, 10.5rem); --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.82); --gb-fg-3: rgba(255,255,255,.66); --gb-rule: rgba(255,255,255,.16); --gb-rule-strong: rgba(255,255,255,.4); --gb-tint: rgba(255,255,255,.08); --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange); }
.gb .gb-ctaband__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }   /* meebewegende foto (m-par, 1,07) blijft binnen het vlak */
.gb .gb-ctaband__media img { width: 100%; height: 100%; object-fit: cover; }
.gb .gb-ctaband__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.78) 45%, rgba(10,9,8,.35) 100%); }
.gb .gb-ctaband__inner { max-width: 40rem; display: grid; gap: 1.25rem; justify-items: start; }
.gb .gb-ctaband__title { font-size: var(--gb-fs-h1); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; max-width: 14ch; }
.gb .gb-ctaband__text { font-size: var(--gb-fs-lead); line-height: 1.5; color: var(--gb-fg-2); max-width: 34em; }
.gb .gb-ctaband .gb-actions { margin-top: .75rem; width: 100%; }
.gb .gb-ctaband__phone { font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); color: var(--gb-fg-3); }
.gb .gb-ctaband__phone a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .3em; }
.gb .gb-ctaband--plain { padding-block: var(--gb-section); }
.gb .gb-ctaband--center .gb-ctaband__inner { margin-inline: auto; justify-items: center; text-align: center; }
.gb .gb-ctaband--center .gb-ctaband__title { max-width: 18ch; }
.gb .gb-ctaband--center .gb-actions { justify-content: center; }
.gb .gb-ctaband__inner { position: relative; }
.gb .gb-ctaband__inner::before { left: 0; top: -2.25rem; width: min(100%, 16rem); opacity: .7; }   /* maatlijn (§34) */
.gb .gb-ctaband--center .gb-ctaband__inner::before { left: calc(50% - min(50%, 8rem)); }
@media (max-width: 767px) { .gb .gb-ctaband__media::after { background: linear-gradient(0deg, rgba(10,9,8,.94) 0%, rgba(10,9,8,.78) 55%, rgba(10,9,8,.5) 100%); } }

/* 22 · FORMULIEREN -------------------------------------------------------- */
.gb .gb-form { display: grid; gap: 1.25rem; }
.gb .gb-form--card { background-color: var(--gb-surface); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.gb .gb-field { display: grid; gap: .5rem; align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.gb .gb-field-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .gb .gb-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gb .gb-label, .gb .gb-field > legend { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-2); padding: 0; }
.gb .gb-field > legend { margin-bottom: .5rem; }
.gb .gb-req { color: var(--gb-fg-3); font-weight: 400; }
.gb .gb-input, .gb .gb-select, .gb .gb-textarea {
  width: 100%; min-height: 52px; padding: .8125rem 1rem; font-family: var(--gb-sans); font-size: 1rem; line-height: 1.4; color: var(--gb-fg);
  background-color: var(--gb-surface); border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn);
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; box-shadow: none;
}
.gb .gb-theme-paper .gb-input, .gb .gb-theme-paper .gb-select, .gb .gb-theme-paper .gb-textarea { background-color: #FFFFFF; }
.gb .gb-textarea { min-height: 140px; resize: vertical; }
.gb .gb-select { padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25rem) 52%, calc(100% - .9rem) 52%; background-size: .375rem .375rem; background-repeat: no-repeat; }
.gb .gb-input::placeholder, .gb .gb-textarea::placeholder { color: var(--gb-fg-3); opacity: 1; }
.gb .gb-input:hover, .gb .gb-select:hover, .gb .gb-textarea:hover { border-color: var(--gb-fg-3); }
.gb .gb-input:focus, .gb .gb-select:focus, .gb .gb-textarea:focus { outline: none; border-color: var(--gb-fg); box-shadow: 0 0 0 1px var(--gb-fg); }
.gb .gb-input[aria-invalid="true"], .gb .gb-field.is-error .gb-input { border-color: #B3261E; }
.gb .gb-help { font-size: var(--gb-fs-xs); color: var(--gb-fg-3); }
.gb .gb-error { font-size: var(--gb-fs-xs); color: #B3261E; }
.gb .gb-theme-dark .gb-error, .gb .gb-hero .gb-error { color: #FF8A80; }
.gb .gb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.gb .gb-chip { position: relative; display: inline-flex; }
.gb .gb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gb .gb-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn); background-color: var(--gb-surface); font-size: var(--gb-fs-small); font-weight: 500; color: var(--gb-fg); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.gb .gb-theme-paper .gb-chip span { background-color: #FFFFFF; }
.gb .gb-chip span:hover { border-color: var(--gb-fg); }
.gb .gb-chip input:checked + span { background-color: var(--gb-fg); color: var(--gb-bg); border-color: var(--gb-fg); }
.gb .gb-chip input:focus-visible + span { outline: 2px solid var(--gb-focus); outline-offset: 2px; }
.gb .gb-check { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--gb-fs-small); color: var(--gb-fg-2); cursor: pointer; }
.gb .gb-check input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--gb-carbon); }
.gb .gb-theme-dark .gb-check input { accent-color: var(--gb-orange); }
.gb .gb-check a { color: var(--gb-fg); text-decoration: underline; text-underline-offset: .25em; }
.gb .gb-form__note { font-size: var(--gb-fs-xs); color: var(--gb-fg-3); }
.gb .gb-form__note a { color: var(--gb-fg-2); text-decoration: underline; text-underline-offset: .25em; }

/* Elementor Pro Forms binnen een container met CSS-klasse "gb" (of "gb gb-theme-paper") */
.gb .elementor-form { font-family: var(--gb-sans); color: var(--gb-fg); }
.gb .elementor-form .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; margin-inline: -.5rem; }
.gb .elementor-form .elementor-field-group { width: 100%; padding-inline: .5rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .gb .elementor-form .elementor-col-50 { width: 50%; } .gb .elementor-form .elementor-col-33 { width: 33.333%; } }
.gb .elementor-form .elementor-field-type-hidden { display: none; }
.gb .elementor-form .elementor-field-label { display: block; margin-bottom: .5rem; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-2); line-height: 1.4; }
.gb .elementor-form .elementor-mark-required .elementor-field-label::after, .gb .elementor-form .elementor-field-required .elementor-field-label::after { content: " *"; color: var(--gb-fg-3); padding-left: 0; }
.gb .elementor-form .elementor-field-textual,
.gb .elementor-form .elementor-field-textual.elementor-size-xs,
.gb .elementor-form .elementor-field-textual.elementor-size-sm,
.gb .elementor-form .elementor-field-textual.elementor-size-md,
.gb .elementor-form .elementor-select-wrapper select {
  width: 100%; min-height: 52px; padding: .8125rem 1rem; font-family: var(--gb-sans); font-size: 1rem; line-height: 1.4;
  color: var(--gb-fg); background-color: var(--gb-surface); border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn);
  box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.gb.gb-theme-paper .elementor-form .elementor-field-textual, .gb .gb-theme-paper .elementor-form .elementor-field-textual,
.gb.gb-theme-paper .elementor-form .elementor-select-wrapper select { background-color: #FFFFFF; }
.gb .elementor-form textarea.elementor-field-textual { min-height: 140px; resize: vertical; }
.gb .elementor-form .elementor-field-textual::placeholder { color: var(--gb-fg-3); opacity: 1; }
.gb .elementor-form .elementor-field-textual:focus, .gb .elementor-form .elementor-select-wrapper select:focus { outline: none; border-color: var(--gb-fg); box-shadow: 0 0 0 1px var(--gb-fg); }
.gb .elementor-form .elementor-select-wrapper .select-caret-down-wrapper { color: var(--gb-fg); right: 1rem; }
.gb .elementor-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: .5rem; }
.gb .elementor-form .elementor-field-type-radio .elementor-field-option,
.gb .elementor-form .elementor-field-type-checkbox .elementor-field-option { position: relative; display: inline-flex; margin: 0; padding: 0; }
.gb .elementor-form .elementor-field-type-radio .elementor-field-option input,
.gb .elementor-form .elementor-field-type-checkbox .elementor-field-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gb .elementor-form .elementor-field-type-radio .elementor-field-option label,
.gb .elementor-form .elementor-field-type-checkbox .elementor-field-option label {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: .5rem 1rem; border: 1px solid var(--gb-rule-strong);
  border-radius: var(--gb-radius-btn); background-color: var(--gb-surface); font-size: var(--gb-fs-small); font-weight: 500; color: var(--gb-fg); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s; font-family: var(--gb-sans); letter-spacing: 0; text-transform: none;
}
.gb.gb-theme-paper .elementor-form .elementor-field-option label { background-color: #FFFFFF; }
.gb .elementor-form .elementor-field-option input:checked + label { background-color: var(--gb-fg); color: var(--gb-bg); border-color: var(--gb-fg); }
.gb .elementor-form .elementor-field-option input:focus-visible + label { outline: 2px solid var(--gb-focus); outline-offset: 2px; }
.gb .elementor-form .elementor-field-type-acceptance .elementor-field-subgroup { display: block; }
.gb .elementor-form .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: .75rem; align-items: flex-start; }
.gb .elementor-form .elementor-field-type-acceptance input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--gb-carbon); }
.gb .elementor-form .elementor-field-type-acceptance label { font-size: var(--gb-fs-small); color: var(--gb-fg-2); line-height: 1.5; }
.gb .elementor-form .elementor-field-type-acceptance label a { color: var(--gb-fg); text-decoration: underline; text-underline-offset: .25em; }
.gb .elementor-form .elementor-field-type-html { font-size: var(--gb-fs-xs); color: var(--gb-fg-3); }
.gb .elementor-form .elementor-button[type="submit"], .gb .elementor-form .elementor-button.elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 52px; padding: .625rem 1.75rem;
  background-color: var(--gb-orange); color: var(--gb-carbon); border: 0; border-radius: var(--gb-radius-btn);
  font-family: var(--gb-sans); font-size: .96875rem; font-weight: 600; letter-spacing: .005em; text-transform: none; line-height: 1.2;
  box-shadow: none; transition: background-color .2s;
}
.gb .elementor-form .elementor-button[type="submit"]:hover, .gb .elementor-form .elementor-button.elementor-button:hover,
.gb .elementor-form .elementor-button[type="submit"]:focus-visible { background-color: var(--gb-orange-hover); color: var(--gb-carbon); }
.gb .elementor-form .elementor-button .elementor-button-text { color: inherit; }
.gb .elementor-form .elementor-message { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--gb-radius-btn); font-size: var(--gb-fs-small); border: 1px solid var(--gb-rule-strong); }
.gb .elementor-form .elementor-message::before { display: none; }
.gb .elementor-form .elementor-message-success { color: var(--gb-fg); }
.gb .elementor-form .elementor-message-danger, .gb .elementor-form .elementor-error .elementor-field-textual { border-color: #B3261E; }
.gb .elementor-form .elementor-error .elementor-message-danger, .gb .elementor-form span.elementor-message-danger { color: #B3261E; }

/* Bookly-agenda: <div class="gb-bookly" data-service="N"></div> (de uitrol zet de shortcode erin) */
.gb .gb-bookly { min-height: 420px; padding: clamp(1rem, .5rem + 2vw, 2rem); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); background-color: var(--gb-surface); color: var(--gb-fg); }
.gb .gb-bookly .bookly-form { font-family: var(--gb-sans); color: var(--gb-fg); }
.gb .gb-bookly--preview { display: grid; align-content: center; justify-items: start; gap: 1rem; background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--gb-tint) 14px 15px); }
.gb .gb-form--slot { display: block; }
/* focus = onderlijn tekent als maatlijn, label schuift 4 px op; geldig = vinkje (m-ok, gb.js); fout = lijn breekt */
.gb .elementor-field-group, .gb .gb-field { position: relative; }
.gb .elementor-field-group::after, .gb .gb-field::after { left: .5rem; right: .5rem; bottom: -4px; opacity: 0; transform: scaleX(0); }
.gb .gb-field::after { left: 0; right: 0; }
.gb .elementor-field-group:is(.elementor-field-type-text, .elementor-field-type-email, .elementor-field-type-tel, .elementor-field-type-textarea, .elementor-field-type-select):focus-within::after,
.gb .gb-field:has(> :is(.gb-input, .gb-select, .gb-textarea):last-child):focus-within::after { opacity: 1; transform: none; }
.gb .elementor-field-label, .gb .gb-label { transition: transform var(--m-t-hover) var(--m-ease-settle); }
.gb .elementor-field-group:focus-within > .elementor-field-label, .gb .gb-field:focus-within > .gb-label { transform: translateY(-4px); }
.gb .elementor-error::after, .gb .gb-field.is-error::after { opacity: 1; transform: none; color: #B3261E; -webkit-mask: linear-gradient(90deg, #000 46%, #0000 0 54%, #000 0); mask: linear-gradient(90deg, #000 46%, #0000 0 54%, #000 0); }
.gb .m-ok:is(.elementor-field-type-text, .elementor-field-type-email, .elementor-field-type-tel, .gb-field)::before { content: ""; position: absolute; right: 1.5rem; bottom: 20px; width: .4rem; height: .75rem; border-right: 1.5px solid var(--gb-fg); border-bottom: 1.5px solid var(--gb-fg); transform: rotate(45deg); pointer-events: none; }

/* 23 · NOTITIES EN VOETNOTEN ---------------------------------------------- */
.gb .gb-note { display: grid; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; border-left: 2px solid var(--gb-fg); background-color: var(--gb-tint); border-radius: 0 var(--gb-radius) var(--gb-radius) 0; font-size: var(--gb-fs-small); color: var(--gb-fg-2); max-width: 46rem; }
.gb .gb-note__label { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg); }
.gb .gb-note a { color: var(--gb-fg); text-decoration: underline; text-underline-offset: .25em; }
.gb .gb-footnote, .gb .gb-footnotes { font-size: var(--gb-fs-xs); line-height: 1.55; color: var(--gb-fg-3); }
.gb .gb-footnote, .gb .gb-footnotes li { max-width: 60rem; }
.gb .gb-footnotes { display: grid; gap: .375rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--gb-rule); }
.gb .gb-footnotes li { padding-left: 1.25rem; text-indent: -1.25rem; }
.gb .gb-footnote a, .gb .gb-footnotes a { color: var(--gb-fg-2); text-decoration: underline; text-underline-offset: .2em; }
.gb .gb-fn { font-family: var(--gb-mono); font-size: .7em; vertical-align: super; line-height: 0; margin-left: .1em; color: var(--gb-fg-3); }
.gb .gb-updated { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-fg-3); }

/* 24 · BEELD, BIJSCHRIFT, GALERIJ ----------------------------------------- */
.gb .gb-figure { display: grid; gap: .75rem; margin: 0; }
.gb .gb-figure__media { position: relative; overflow: hidden; border-radius: var(--gb-radius); background: var(--gb-surface); }
.gb .gb-figure__media img, .gb .gb-figure__media video { width: 100%; height: 100%; object-fit: cover; }
.gb .gb-figure__caption { display: flex; gap: .625rem; align-items: baseline; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); line-height: 1.5; }
.gb .gb-figure__caption::before { content: ""; flex: none; width: 16px; height: 1px; background: currentColor; transform: translateY(-.3em); }
.gb .gb-figure--bleed .gb-figure__media { border-radius: 0; }
.gb .gb-figure__tag { position: absolute; left: .75rem; bottom: .75rem; z-index: 1; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; background: rgba(10,9,8,.66); padding: .375rem .625rem; border-radius: 2px; }
.gb .gb-ratio-1x1 { aspect-ratio: 1 / 1; } .gb .gb-ratio-4x5 { aspect-ratio: 4 / 5; } .gb .gb-ratio-3x4 { aspect-ratio: 3 / 4; }
.gb .gb-ratio-2x3 { aspect-ratio: 2 / 3; } .gb .gb-ratio-4x3 { aspect-ratio: 4 / 3; } .gb .gb-ratio-3x2 { aspect-ratio: 3 / 2; }
.gb .gb-ratio-16x9 { aspect-ratio: 16 / 9; } .gb .gb-ratio-21x9 { aspect-ratio: 21 / 9; }
.gb .gb-obj-top { object-position: center top !important; } .gb .gb-obj-bottom { object-position: center bottom !important; }
.gb .gb-obj-left { object-position: left center !important; } .gb .gb-obj-right { object-position: right center !important; }
.gb .gb-obj-30 { object-position: center 30% !important; } .gb .gb-obj-40 { object-position: center 40% !important; } .gb .gb-obj-70 { object-position: center 70% !important; }
.gb .gb-contain { object-fit: contain !important; }
/* blauwdrukvlak (C6): zonder JS de foto, met JS de getekende fiets (GBBike); vaste verhouding, dus geen verschuiving */
.gb .m-bp[data-m-blueprint] { position: relative; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--gb-radius); }
.gb .m-bp > img { width: 100%; height: 100%; object-fit: cover; }
.gb .m-bp .gb-cfg-bike__svg[data-mat] { --bk-acc: transparent; --bk-acc-edge: var(--bk-label-2); }   /* geen oranje vlak in het titelblok */
.gb .m-bp text:not(.m-keep) { display: none; }   /* max. vier labels: merk · type, stack, reach, wielbasis */
.gb .m-bp text { transition: opacity .45s var(--m-ease-out) !important; }
/* overlays van gb.js op een foto: scanlijn (C8) en vizier (C9) */
.gb [data-m-scan] { position: relative; }
.gb .m-scan { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.gb .m-scan::before { content: ""; position: absolute; inset: 10px; --_c: rgba(255,255,255,.9); }
.gb .m-scan__beam { position: absolute; inset: 0; transform: translateY(-101%); background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 97%, rgba(255,255,255,.9) 99.4%, rgba(255,255,255,0) 100%); }
.gb .m-scan__tag { position: absolute; left: 10px; bottom: 10px; padding: .3rem .55rem; border-radius: 2px; background: rgba(10,9,8,.7); color: #FFFFFF; font: 600 .6875rem/1.3 var(--gb-mono); letter-spacing: .14em; text-transform: uppercase; }
.gb [data-m-cross] { position: relative; }
.gb .m-cross { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s var(--m-ease-out); }
.gb .m-cross.is-on { opacity: 1; }
.gb .m-cross > span { position: absolute; left: 0; top: 0; }
.gb .m-cross__h { right: 0; height: 1px; background: rgba(216,216,216,.3); }
.gb .m-cross__v { bottom: 0; width: 1px; background: rgba(216,216,216,.3); }
.gb .m-cross__box { width: 56px; height: 56px; margin: -28px 0 0 -28px; --_c: rgba(255,255,255,.92); --_t: 10px; }
.gb .m-cross__box::before { content: ""; position: absolute; inset: 0; }
.gb .m-cross__box i { position: absolute; left: calc(100% + 8px); top: calc(100% + 4px); font: normal .625rem var(--gb-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.8); }

.gb .gb-gallery { display: grid; gap: clamp(.375rem, .2rem + .8vw, .875rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb .gb-gallery__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--gb-radius); background: var(--gb-surface); aspect-ratio: 1 / 1; }
.gb .gb-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-t-reveal) var(--m-ease-settle); }
.gb .gb-gallery__item:hover img { transform: scale(1.025); }
.gb .gb-gallery__item figcaption { position: absolute; left: .625rem; bottom: .625rem; right: .625rem; font-family: var(--gb-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #FFFFFF; }
.gb .gb-gallery__item figcaption span { background: rgba(10,9,8,.66); padding: .25rem .5rem; border-radius: 2px; }
@media (min-width: 768px) {
  .gb .gb-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gb .gb-gallery--mosaic { grid-auto-flow: dense; }
  .gb .gb-gallery--mosaic .gb-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
  .gb .gb-gallery--mosaic .gb-gallery__item:nth-child(6n + 5) { grid-row: span 2; aspect-ratio: auto; }
}
@media (min-width: 1280px) { .gb .gb-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gb .gb-media-band { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gb-surface); }
.gb .gb-media-band img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .gb .gb-media-band { aspect-ratio: 21 / 9; } }

/* 25 · KAART / ROUTE ------------------------------------------------------ */
.gb .gb-route { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); overflow: hidden; background-color: var(--gb-surface); }
.gb .gb-route__map {
  position: relative; min-height: 260px; overflow: hidden; color: #FFFFFF; background-color: var(--gb-carbon-2);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; background-position: center;
}
.gb .gb-route__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb .gb-route__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .625rem; }
.gb .gb-route__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gb-orange); box-shadow: 0 0 0 6px rgba(222,111,58,.22), 0 0 0 14px rgba(222,111,58,.1); }
.gb .gb-route__label { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(10,9,8,.8); padding: .375rem .625rem; border-radius: 2px; white-space: nowrap; }
.gb .gb-route__coords { position: absolute; left: 1rem; bottom: .875rem; font-family: var(--gb-mono); font-size: .6875rem; letter-spacing: .1em; color: rgba(255,255,255,.62); }
.gb .gb-route__axis { position: absolute; inset: 0; pointer-events: none; }
.gb .gb-route__axis::before, .gb .gb-route__axis::after { content: ""; position: absolute; background: rgba(255,255,255,.18); }
.gb .gb-route__axis::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.gb .gb-route__axis::after { top: 50%; left: 0; right: 0; height: 1px; }
.gb .gb-route__body { display: grid; gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.gb .gb-route__address { font-size: var(--gb-fs-h4); line-height: 1.45; font-weight: 600; }
@media (min-width: 1024px) { .gb .gb-route { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .gb .gb-route__map { min-height: 420px; } }

/* 26 · REVIEW, QUOTE, RATING ---------------------------------------------- */
.gb .gb-reviews { display: grid; gap: var(--gb-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .gb .gb-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gb .gb-reviews--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gb .gb-review { display: flex; flex-direction: column; margin: 0; background-color: var(--gb-surface); color: var(--gb-fg); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); overflow: hidden; }
.gb .gb-review__media { aspect-ratio: 3 / 2; overflow: hidden; }
.gb .gb-review__media img { width: 100%; height: 100%; object-fit: cover; }
.gb .gb-review__body { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.gb .gb-review__quote { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.55; letter-spacing: -.005em; color: var(--gb-fg); }
.gb .gb-review__quote p + p { margin-top: .75rem; }
.gb .gb-review__by { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gb-rule); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.gb .gb-review__name { font-weight: 600; font-size: var(--gb-fs-small); }
.gb .gb-review__meta { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb .gb-review--quiet { background: transparent; border: 0; border-top: 1px solid var(--gb-rule); border-radius: 0; }
.gb .gb-review--quiet .gb-review__body { padding: 1.5rem 0 0; }
.gb .gb-review--quiet .gb-review__by { border-top: 0; padding-top: 0; }

.gb .gb-quote { margin: 0; display: grid; gap: 1.5rem; max-width: 52rem; }
.gb .gb-quote__text { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--gb-fg); text-wrap: balance; }
.gb .gb-quote__by { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb .gb-statement { font-size: clamp(2rem, 1.4rem + 2.8vw, 4.25rem); font-weight: 600; line-height: 1.04; letter-spacing: -.032em; max-width: 18ch; text-wrap: balance; }

.gb .gb-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; color: var(--gb-fg-2); font-size: var(--gb-fs-small); }
.gb .gb-rating__score { font-weight: 600; color: var(--gb-fg); font-variant-numeric: tabular-nums; }
.gb .gb-rating__stars { display: inline-flex; gap: 2px; color: var(--gb-fg); }
.gb .gb-rating__stars .gb-i { width: .875rem; height: .875rem; }
.gb .gb-rating__meta { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb a.gb-rating:hover .gb-rating__score, .gb .gb-rating a:hover { text-decoration: underline; text-underline-offset: .25em; }
.gb .gb-score { display: flex; align-items: center; gap: 1.25rem; }
.gb .gb-score__num { font-size: clamp(3rem, 2.4rem + 2.6vw, 4.75rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.gb .gb-score__meta { display: grid; gap: .375rem; }

.gb .gb-signature { display: flex; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--gb-rule); }
.gb .gb-signature img { width: 40px; height: 40px; flex: none; }
.gb .gb-signature__name { display: block; font-weight: 600; }
.gb .gb-signature__role { display: block; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); }

/* 27 · PROSE (blogs, juridisch, titanium) --------------------------------- */
.gb .gb-prose { max-width: 44rem; font-size: 1.125rem; line-height: 1.75; color: var(--gb-fg-2); }
.gb .gb-prose > * + * { margin-top: 1.1em; }
.gb .gb-prose .gb-prose__intro, .gb .gb-prose > p:first-child.is-intro { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem); line-height: 1.55; color: var(--gb-fg); font-weight: 500; letter-spacing: -.01em; }
.gb .gb-prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: 1.2; letter-spacing: -.02em; color: var(--gb-fg); }
.gb .gb-prose h3 { margin-top: 1.8em; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); line-height: 1.3; letter-spacing: -.01em; color: var(--gb-fg); }
.gb .gb-prose h2 + *, .gb .gb-prose h3 + * { margin-top: .6em; }
.gb .gb-prose a { color: var(--gb-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--gb-rule-strong); }
.gb .gb-prose a:hover { text-decoration-color: currentColor; }
.gb .gb-prose strong, .gb .gb-prose b { color: var(--gb-fg); }
.gb .gb-prose ul, .gb .gb-prose ol { display: grid; gap: .5em; }
.gb .gb-prose ul > li { position: relative; padding-left: 1.5em; }
.gb .gb-prose ul > li::before { content: ""; position: absolute; left: .25em; top: .68em; width: 6px; height: 6px; background: var(--gb-marker); }
.gb .gb-prose ol { counter-reset: gbol; }
.gb .gb-prose ol > li { position: relative; padding-left: 2.25em; counter-increment: gbol; }
.gb .gb-prose ol > li::before { content: counter(gbol, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-family: var(--gb-mono); font-size: .8em; font-weight: 600; color: var(--gb-fg-3); }
.gb .gb-prose blockquote { padding-left: 1.25em; border-left: 2px solid var(--gb-fg); color: var(--gb-fg); font-size: 1.15em; line-height: 1.5; }
.gb .gb-prose figure { margin-block: 2em; }
.gb .gb-prose hr { margin-block: 2.5em; }
.gb .gb-prose .gb-table-wrap { margin-block: 1.75em; }
.gb .gb-prose code { font-family: var(--gb-mono); font-size: .88em; padding: .1em .35em; background: var(--gb-tint); border-radius: 2px; }
.gb .gb-byline { display: flex; flex-wrap: wrap; gap: .25rem 0; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb .gb-byline > * + *::before { content: "/"; padding-inline: .625rem; opacity: .6; }
.gb .gb-toc { display: grid; gap: .5rem; padding: 1.25rem; border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); font-size: var(--gb-fs-small); }
.gb .gb-toc a { color: var(--gb-fg-2); }
.gb .gb-toc a:hover { color: var(--gb-fg); text-decoration: underline; }

/* 28 · TWEE DEUREN (Gregor en King's Lynn, gelijkwaardig; alleen /prijzen/ en /configurator/) */
.gb .gb-doors { display: grid; gap: var(--gb-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .gb .gb-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gb .gb-door { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); background-color: var(--gb-surface); color: var(--gb-fg); }
.gb .gb-door__brand { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.gb .gb-door__line { color: var(--gb-fg-2); max-width: 34ch; }
.gb .gb-door .gb-spec { margin-top: .25rem; }
.gb .gb-door__foot { margin-top: auto; display: grid; gap: .75rem; }
/* geen oranje en geen logo in de King's Lynn-deur; accentkleuren worden nooit uitgewisseld (merkgids BFF p. 013) */
.gb .gb-door--kl .gb-kicker::before { background: var(--gb-fg-3); }

/* 29 · KEUZES EN SAMENVATTING (configurator) ------------------------------ */
.gb .gb-choices { display: grid; gap: .5rem; align-content: start; }
.gb .gb-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb .gb-choice { position: relative; display: block; cursor: pointer; }
.gb .gb-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gb .gb-choice__box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .875rem 1.125rem; border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn); background-color: var(--gb-surface); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.gb .gb-theme-paper .gb-choice__box { background-color: #FFFFFF; }
.gb .gb-choice__name { font-weight: 600; font-size: var(--gb-fs-small); line-height: 1.35; color: var(--gb-fg); }
.gb .gb-choice__sub { display: block; font-weight: 400; color: var(--gb-fg-3); font-size: var(--gb-fs-xs); margin-top: .125rem; }
.gb .gb-choice__price { font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); color: var(--gb-fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb .gb-choice:hover .gb-choice__box { border-color: var(--gb-fg-3); }
.gb .gb-choice input:checked + .gb-choice__box { border-color: var(--gb-fg); box-shadow: inset 0 0 0 1px var(--gb-fg); }
.gb .gb-choice input:focus-visible + .gb-choice__box { outline: 2px solid var(--gb-focus); outline-offset: 2px; }
.gb .gb-choice input:disabled + .gb-choice__box { opacity: .5; cursor: not-allowed; }
.gb .gb-summary { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); border-radius: var(--gb-radius); background-color: var(--gb-carbon); color: #FFFFFF; --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.76); --gb-fg-3: rgba(255,255,255,.62); --gb-rule: rgba(255,255,255,.14); --gb-rule-strong: rgba(255,255,255,.34); --gb-tint: rgba(255,255,255,.06); --gb-marker: var(--gb-titanium); --gb-focus: var(--gb-orange); }
@media (min-width: 1024px) { .gb .gb-summary--sticky { position: sticky; top: calc(var(--gb-header-h) + 1.5rem); } }
.gb .gb-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--gb-rule); }

/* 30 · HULPKLASSEN -------------------------------------------------------- */
.gb .gb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gb .gb-center { text-align: center; }
.gb .gb-measure { max-width: var(--gb-measure); }
.gb .gb-nowrap { white-space: nowrap; }
.gb .gb-mt-s { margin-top: 1rem; } .gb .gb-mt-m { margin-top: 2rem; } .gb .gb-mt-l { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.gb .gb-mb-0 { margin-bottom: 0; }
.gb .gb-rule-top { border-top: 1px solid var(--gb-rule); padding-top: 1.5rem; }
.gb .gb-flex { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.gb .gb-between { justify-content: space-between; }
.gb .gb-jump { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-block: .25rem; }
.gb .gb-jump::-webkit-scrollbar { display: none; }
.gb .gb-jump a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: .375rem .875rem; border: 1px solid var(--gb-rule-strong); border-radius: 999px; font-size: var(--gb-fs-small); font-weight: 500; color: var(--gb-fg); white-space: nowrap; transition: background-color .2s, color .2s; }
.gb .gb-jump a:hover { background-color: var(--gb-fg); color: var(--gb-bg); }
@media (max-width: 767px) { .gb .gb-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .gb .gb-hide-desktop { display: none !important; } }

/* 31 · ONTHULLEN (C1; tokens en de rest van de beweging in §34) ------------- */
@media (prefers-reduced-motion: no-preference) {
  .gb-ready.m-on .gb .gb-reveal { opacity: 0; transform: translateY(var(--m-rise)); transition: opacity var(--m-t-reveal) var(--m-ease-out), transform var(--m-t-reveal) var(--m-ease-settle); transition-delay: calc(var(--gb-i, 0) * var(--m-stagger)); }
  .gb-ready.m-on .gb .gb-reveal.is-in { opacity: 1; transform: none; }
  html.gb-js { scroll-behavior: smooth; }
}
.gb .gb-d1 { --gb-i: 1; } .gb .gb-d2 { --gb-i: 2; } .gb .gb-d3 { --gb-i: 3; } .gb .gb-d4 { --gb-i: 4; }
@media (prefers-reduced-motion: reduce) {
  .gb *, .gb *::before, .gb *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }   /* geen enkele overgang: 0 animaties (§11.6) */
}

/* 32 · ELEMENTOR-INTEGRATIE ----------------------------------------------- */
/* Theme Builder-header: het Elementor-headerblok zelf sticky maken (een sticky element in een widget plakt niet). */
.elementor-location-header:has(.gb-header) { position: sticky; top: 0; z-index: 1000; }
.admin-bar .elementor-location-header:has(.gb-header) { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header:has(.gb-header) { top: 0; } }
.elementor-location-header:has(.gb-header) .gb-header { position: relative; }
/* HTML-widgets met een gb-pagina: geen widgetmarge */
.elementor-widget-html:has(.gb-page), .elementor-widget-html:has(.gb-shell) { margin-block: 0; width: 100%; }

/* 33 · PRINT -------------------------------------------------------------- */
@media print {
  .gb .gb-header, .gb .gb-menu, .gb .gb-sticky, .gb .gb-ctaband__media, .gb .gb-hero__media::after { display: none !important; }
  .gb, .gb .gb-section, .gb .gb-hero { background: #FFFFFF !important; color: #000000 !important; }
  .gb a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* 34 · BEWEGING ------------------------------------------------------------
   Choreografie (DESIGN.md §11). GB.motion zet op <html> m-on of m-static (+ m-lite, m-head-hide), op elementen m-in, m-play,
   m-done, m-lock-play. Beginstanden alleen onder .m-on; eindstanden staan bij de componenten. Alleen transform, opacity,
   stroke-dashoffset. Lijnen en kaders in --gb-fg, nooit oranje. */
.gb {
  --m-ease-draw: cubic-bezier(.65, 0, .35, 1); --m-ease-settle: cubic-bezier(.16, 1, .3, 1); --m-ease-lock: cubic-bezier(.34, 1.4, .64, 1); --m-ease-out: cubic-bezier(.2, .7, .2, 1);
  --m-t-press: 140ms; --m-t-hover: 240ms; --m-t-reveal: 520ms; --m-t-draw: 1000ms; --m-t-long: 1400ms; --m-stagger: 60ms;
  --m-rise: 16px; --m-rise-s: 8px; --m-line: 1.5px; --m-tick: 12px;
}
.m-notrans .gb *, .m-notrans .gb *::before, .m-notrans .gb *::after { transition: none !important; }

/* primitieven: maatlijn (currentColor) en maatkader (--_c) */
.gb .gb-link::after, .gb .gb-nav .gb-nav__link::after, .gb [data-m-rule]::before, .gb .gb-head--rule::before, .gb .gb-ctaband__inner::before, .gb .m-amt::after,
.gb .gb-field::after, .gb .elementor-field-group::after {
  content: ""; position: absolute; height: 7px; box-sizing: border-box; border-inline: 1px solid; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}
.gb .gb-btn--primary::before, .gb [data-m-lock]::before, .gb .gb-service::before, .gb .elementor-button[type="submit"]::before, .gb .m-scan::before, .gb .m-cross__box::before {
  --_t: var(--m-tick); box-sizing: border-box; border: var(--m-line) solid var(--_c, var(--gb-fg));
  -webkit-mask: conic-gradient(at var(--_t) var(--_t), #0000 75%, #000 0) 0 0 / calc(100% - var(--_t)) calc(100% - var(--_t));
  mask: conic-gradient(at var(--_t) var(--_t), #0000 75%, #000 0) 0 0 / calc(100% - var(--_t)) calc(100% - var(--_t));
}

/* C3 lock-on */
.gb .gb-btn--primary, .gb [data-m-lock], .gb .gb-service, .gb .elementor-button[type="submit"] { position: relative; }
.gb .gb-btn--primary::before, .gb [data-m-lock]::before, .gb .gb-service::before, .gb .elementor-button[type="submit"]::before {
  content: ""; position: absolute; inset: -7px; pointer-events: none; opacity: 0; transform: scale(.92);
  transition: opacity var(--m-t-hover) var(--m-ease-out), transform var(--m-t-hover) var(--m-ease-settle);
}
.gb .gb-header .gb-btn--primary::before, .gb .gb-sticky .gb-btn--primary::before { --_c: #FFFFFF; inset: -6px; }
@media (hover: hover) {
  .gb .gb-btn--primary:hover::before, .gb [data-m-lock]:hover::before, .gb .gb-service:hover::before, .gb .elementor-button[type="submit"]:hover::before { opacity: .9; transform: none; }
}
.gb .gb-btn--primary:focus-visible::before, .gb [data-m-lock]:focus-visible::before, .gb .gb-service:focus-within::before, .gb .m-sending::before { opacity: 1; transform: none; }
.m-on .gb .m-lock-play::before { animation: m-lock 1.8s both; }
@keyframes m-lock {
  0% { opacity: 0; transform: scale(.55, .3); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8% { opacity: 1; } 28% { transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .gb .gb-btn { transition: background-color .2s, color .2s, border-color .2s, transform var(--m-t-press) var(--m-ease-settle); }
  .gb .gb-btn:active { transform: scale(.975); }
}
/* verzenden: kader blijft, maatstreepje gaat heen en weer (max. 10 s) */
.gb .m-sending .gb-i--arrow { opacity: 0; }
.gb .m-sending::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 12px; height: 1.5px; background: currentColor; }
.m-on .gb .m-sending::after { animation: m-wait 1s var(--m-ease-draw) 10 alternate both; }
@keyframes m-wait { from { transform: translateX(-6px); } to { transform: translateX(2px); } }

/* header en menu */
.m-static .gb .m-ruler__fill { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .gb .m-ruler__fill { animation: m-grow linear both; animation-timeline: scroll(root block); } }
}
@keyframes m-grow { from { transform: scaleX(0); } to { transform: none; } }
.m-on .gb .gb-header__logo img { transition: transform .45s var(--m-ease-settle); }
@media (max-width: 767px) {
  .m-on .gb .gb-header, .m-on .elementor-location-header:has(.gb-header) { transition: transform .45s var(--m-ease-settle), border-color .25s, background-color .25s; }
  .m-head-hide .gb .gb-header, .m-head-hide .elementor-location-header:has(.gb-header) { transform: translateY(calc(-100% - 8px)); }
}
.gb .gb-menu__list li:nth-child(2) { --m-i: 1; } .gb .gb-menu__list li:nth-child(3) { --m-i: 2; } .gb .gb-menu__list li:nth-child(4) { --m-i: 3; }
.gb .gb-menu__list li:nth-child(5) { --m-i: 4; } .gb .gb-menu__list li:nth-child(n+6) { --m-i: 5; } .gb .gb-menu__actions { --m-i: 7; }
.m-on .gb .gb-menu__list li, .m-on .gb .gb-menu__actions { opacity: 0; transform: translateY(var(--m-rise-s)); transition: opacity .25s var(--m-ease-out), transform .5s var(--m-ease-settle); }
.m-on .gb .gb-menu.is-open .gb-menu__list li, .m-on .gb .gb-menu.is-open .gb-menu__actions { opacity: 1; transform: none; transition-delay: calc(var(--m-i, 0) * 40ms + 60ms); }

/* C2 maatlijn */
.m-on .gb [data-m-rule]::before, .m-on .gb .gb-head--rule::before, .m-on .gb .gb-ctaband__inner::before, .m-on .gb .m-amt::after { transition: transform var(--m-t-draw) var(--m-ease-draw) .15s; }
.m-on .gb .m-amt ~ .m-amt::after { transition-delay: .45s; }
.m-on .gb [data-m-rule]:not(.m-in)::before, .m-on .gb .gb-head--rule:not(.m-in)::before, .m-on .gb .gb-ctaband__inner:not(.m-in)::before,
.m-on .gb .gb-answer:not(.m-in) .m-amt::after { transform: scaleX(0); }

/* C5 hero-schets (--m-u = beeldeenheden per px) */
.gb .m-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; opacity: var(--m-end); --m-end: .45; }
.gb .m-trace path, .gb .m-trace circle { fill: none; }
.gb .m-ink path, .gb .m-ink circle { stroke: #FFFFFF; stroke-width: calc(var(--m-line) * var(--m-u, 1.4)); }
.gb .m-halo path, .gb .m-halo circle { stroke: rgba(10, 9, 8, .5); stroke-width: calc(5px * var(--m-u, 1.4)); opacity: .5; }
.gb .m-gr { opacity: .7; }
.gb .m-halo .m-gr, .gb .m-grid { opacity: 0; }
.gb .m-grid path { stroke-width: calc(1px * var(--m-u, 1.4)); }
.gb .m-mk, .gb .m-mk-s { transform-box: fill-box; transform-origin: 50% 50%; }
.gb .m-mk-s { transform: scale(calc(var(--m-u, 1.4) * .6)); }
.gb .m-ink .m-mk-s > * { stroke-width: 2.5; }
.gb .m-halo .m-mk-s > * { stroke-width: 8; }
.gb .m-lbl { font-family: var(--gb-mono); font-size: calc(11px * var(--m-u, 1.4)); font-weight: 600; letter-spacing: .14em; fill: #FFFFFF; stroke: rgba(10, 9, 8, .6); stroke-width: calc(3px * var(--m-u, 1.4)); paint-order: stroke; }
@media (max-width: 1279px) { .gb .m-trace { --m-end: .3; } .gb .m-lbl, .gb .m-reach { display: none; } }
@media (max-width: 1023px) { .gb .m-trace { --m-end: .35; } .gb .m-tube, .gb .m-dim, .gb .m-grid { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .gb .m-trace { display: none; } }   /* daar ligt de tekst over de foto */
.m-lite .gb :is(.m-tube, .m-dim, .m-mk, .m-lbl) { display: none; }
.m-on .gb .m-trace { opacity: 1; transition: opacity .9s var(--m-ease-out); }
.m-on .gb .m-done .m-trace { opacity: var(--m-end); }
.m-on .gb .m-d { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset var(--dur) var(--m-ease-draw) var(--d); }
.m-on .gb .m-whl { transition-timing-function: var(--m-ease-settle); }
.m-on .gb .m-mk { transform: scale(0); transition: transform .45s var(--m-ease-lock) var(--d); }
.m-on .gb .m-lbl { opacity: 0; transition: opacity .45s var(--m-ease-out) var(--d); }
.m-on .gb .m-play .m-d { stroke-dashoffset: 0; }
.m-on .gb .m-play .m-mk { transform: none; }
.m-on .gb .m-play .m-lbl { opacity: 1; }
.m-on .gb .m-play .m-grid { animation: m-gridfade calc(2.2s * var(--m-k, 1)) var(--m-ease-out) both; }
@keyframes m-gridfade { 18%, 70% { opacity: .14; } }

/* C6 blauwdruk → titanium */
.m-on .gb .m-bp--prep .m-dr { stroke-dasharray: 1 2 !important; stroke-dashoffset: 1.02; }
.m-on .gb .m-bp--prep:not(.m-bp--draw) .m-fa, .m-on .gb .m-bp--prep text { opacity: 0; }
.m-on .gb .m-bp--draw .m-dr { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) var(--m-ease-draw) var(--d) !important; }
.m-on .gb .m-bp--draw .m-fa { transition: opacity .5s var(--m-ease-out) var(--d) !important; }
.m-on .gb .m-bp--fade { transition: opacity .9s var(--m-ease-out); }
.m-on .gb .m-bp--fade:not(.m-in) { opacity: 0; }
.gb [data-m-blueprint]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(216,216,216,0), rgba(216,216,216,.08) 60%, rgba(255,255,255,.6) 62%, rgba(216,216,216,0) 64%);
}
.m-on .gb .m-bp--sweep::after { animation: m-sweep 1.1s var(--m-ease-draw) both; }
@keyframes m-sweep { 0% { opacity: 1; transform: translateX(-100%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(560%); } }

/* C7 stappenlijn en tijdlijn */
.m-on .gb .gb-step::before { transition: transform .42s linear calc(var(--m-s, 0) * var(--m-gap) + 120ms); }
.m-on .gb .gb-step:last-child::before { transition-duration: .9s; transition-timing-function: var(--m-ease-settle); }
.m-on .gb .gb-step__no { transition: transform .6s var(--m-ease-settle) calc(var(--m-s, 0) * var(--m-gap) + 80ms); }
.m-on .gb .gb-step:not(.m-in)::before { transform: scale(0); }
.m-on .gb .gb-step:not(.m-in) .gb-step__no { transform: translateX(calc(-1 * var(--m-rise-s))); }
.m-on .gb .gb-timeline__item::before { transition: transform var(--m-t-draw) var(--m-ease-draw) .15s; }
.m-on .gb .gb-timeline__no { transition: transform .6s var(--m-ease-settle); }
.m-on .gb .gb-timeline__item--key .gb-timeline__no { transition: transform .5s var(--m-ease-lock) .1s; }
.m-on .gb .gb-timeline__item:not(.m-in)::before { transform: scaleY(0); }
.m-on .gb .gb-timeline__item:not(.m-in) .gb-timeline__no { transform: translateY(var(--m-rise-s)); }
.m-on .gb .gb-timeline__item--key:not(.m-in) .gb-timeline__no { transform: scale(.6); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-on .gb .gb-timeline__item::before { transform: none !important; transition: none; animation: m-grow-y linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  }
}
@keyframes m-grow-y { from { transform: scaleY(0); } to { transform: none; } }

/* C8 scanlijn */
.m-on .gb .m-scan::before, .m-on .gb .m-scan__tag { opacity: 0; transform: scale(1.03); transition: opacity .45s var(--m-ease-out) 1.25s, transform .5s var(--m-ease-lock) 1.25s; }
.m-on .gb .m-in .m-scan::before, .m-on .gb .m-in .m-scan__tag { opacity: 1; transform: none; }
.m-on .gb .m-in .m-scan__beam { animation: m-scan 1.2s var(--m-ease-draw) .2s both; }
@keyframes m-scan { 85% { opacity: 1; } 100% { transform: none; opacity: 0; } }

/* C9 vizier en inspectielijn */
@media (hover: none) {
  .gb [data-m-cross]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(216,216,216,0) 30%, rgba(216,216,216,.1) 49.4%, rgba(255,255,255,.55) 50%, rgba(216,216,216,0) 50.5%); }
  .m-on .gb [data-m-cross].m-in::after { animation: m-inspect 1.4s var(--m-ease-draw) .3s both; }
}
@keyframes m-inspect { 0% { opacity: 0; transform: translateY(-52%); } 8%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(52%); } }

/* C10 teller: het oude cijfer is CSS-inhoud */
.gb [data-m-odo] { font-variant-numeric: tabular-nums; }
.gb .m-odo__c { display: inline-block; clip-path: inset(0 -.1em); }
.gb .m-odo__c > span { display: inline-block; position: relative; animation: m-odo-up .48s var(--m-ease-settle) both; }
.gb .m-odo__c > span::before { content: attr(data-o); content: attr(data-o) / ""; position: absolute; left: 0; right: 0; bottom: 100%; }
.gb .m-odo__c--dn > span { animation-name: m-odo-dn; }
.gb .m-odo__c--dn > span::before { bottom: auto; top: 100%; }
@keyframes m-odo-up { from { transform: translateY(100%); } }
@keyframes m-odo-dn { from { transform: translateY(-100%); } }

/* afvinken, maten, glans, vinkje */
.m-on .gb .gb-checks li::before { transition: transform .45s var(--m-ease-lock) calc(var(--m-i, 0) * var(--m-stagger) + .35s); }
.m-on .gb .gb-checks li::after { transition: transform .7s var(--m-ease-draw) calc(var(--m-i, 0) * var(--m-stagger)); }
.m-on .gb .gb-checks:not(.m-in) li::before { transform: rotate(45deg) scale(0); }
.m-on .gb .gb-checks:not(.m-in) li::after { transform: scaleX(0); }
.m-on .gb .m-sizes > span::after { transition: transform .4s var(--m-ease-draw) calc(.3s + var(--m-i, 0) * 110ms); }
.m-on .gb .m-sizes > .m-sizes__you { transition: opacity .3s var(--m-ease-out) .95s, transform .55s var(--m-ease-lock) .95s; }
.m-on .gb .m-sizes:not(.m-in) > span::after { transform: rotate(-18deg) scaleX(0); }
.m-on .gb .m-sizes:not(.m-in) > .m-sizes__you { opacity: 0; transform: translateY(var(--m-rise-s)) scale(.85); }
.gb [data-m="glint"] { position: relative; overflow: hidden; }
.gb [data-m="glint"]::after { content: ""; position: absolute; inset: 0 auto 0 -30%; width: 60%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 70%); }
.m-on .gb [data-m="glint"].m-in::after { animation: m-glint 1.2s var(--m-ease-draw) .3s both; }
@keyframes m-glint { 0% { opacity: 1; transform: translateX(-40%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(210%); } }
.m-on .gb .m-tick { transition: transform .7s var(--m-ease-lock); }
.m-on .gb .m-tick::after { transition: transform .45s var(--m-ease-lock) .3s; }
.m-on .gb .m-tick:not(.m-in) { transform: scale(.7); }
.m-on .gb .m-tick:not(.m-in)::after { transform: rotate(45deg) scale(0); }

/* FAQ, formulieren, CTA-band */
.m-on .gb .gb-faq__item[open] > .gb-faq__a { animation: m-rise var(--m-t-reveal) var(--m-ease-settle) both; }
@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-rise-s)); } }
.gb .gb-field::after, .gb .elementor-field-group::after { transition: transform .5s var(--m-ease-draw), opacity .2s; }
.m-on .gb .m-ok::before { animation: m-ok .45s var(--m-ease-lock) both; }
@keyframes m-ok { from { transform: rotate(45deg) scale(0); } }
.m-on .gb .gb-error, .m-on .gb .elementor-message-danger { animation: m-nudge .4s var(--m-ease-settle) both; }
@keyframes m-nudge { from { opacity: 0; transform: translateX(-6px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-on .gb .gb-ctaband__media img { animation: m-par linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes m-par { from { transform: translateY(-3%) scale(1.07); } to { transform: translateY(3%) scale(1.07); } }

/* paginaovergang: header staat stil, nieuwe pagina meteen (geen LCP-infade) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .gb .gb-header { view-transition-name: gb-header; }
  .gb [data-gb-sticky] { view-transition-name: gb-sticky; }
  ::view-transition-group(gb-header), ::view-transition-group(gb-sticky), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(root) { z-index: 1; animation: m-vt-out 200ms cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes m-vt-out { to { opacity: 0; transform: translateY(-8px); } }

/* ===== pages/afspraak-showroom.css ===== */
/* afspraak-showroom · Beweging (DESIGN.md §11.4): geen beweging op of rond de Bookly-agenda. De vinkjes in de
   samenvatting naast de agenda staan daarom altijd in hun eindstand (het systeem laat .gb-checks anders inklikken). */
.gb[data-page="afspraak-showroom"] .gb-summary .gb-checks li::before { transform: rotate(45deg); transition: none; }

/* ===== pages/afspraak.css ===== */
/* afspraak · hero-zijkolom: foto (alleen desktop) boven de feitenlijst, zonder dubbele lijn */
.gb[data-page="afspraak"] .gb-hero__aside { border-top: 0; padding-top: 0; }
.gb[data-page="afspraak"] .gb-hero__aside .gb-figure { margin-bottom: 2rem; }
/* afspraak · route-kaart mobiel: "Bezoek op afspraak" en telefoon onder elkaar (anders begint regel 2 met een punt) */
@media (max-width: 599px) {
  .gb[data-page="afspraak"] .gb-route__body .gb-factline { flex-direction: column; align-items: flex-start; }
  .gb[data-page="afspraak"] .gb-route__body .gb-factline li { margin-left: 0; padding-right: 0; }
  .gb[data-page="afspraak"] .gb-route__body .gb-factline li::before { content: none; }
}

/* ---- Beweging (DESIGN.md §11) ----
   Dienstkaarten: maatkader bij hover/focus en afvinken komen uit het systeem. Op de hoofdkeuze landt daarna één lock-on
   op "Plan je bike-fit" (zodra het laatste vinkje staat). De tijdlijn eindigt via het systeem op de knop eronder. */
.gb[data-page="afspraak"]:where(.m-on *) .gb-service--featured .gb-checks.m-in ~ .gb-service__foot .gb-btn--primary::before { animation: m-lock 1.8s .95s backwards; }

/* ===== pages/bedankt-aanvraag.css ===== */
/* bedankt-aanvraag · alleen paginaspecifieke aanvullingen op gb.css */

/* bevestiging: vinkje in een cirkel (M9) naast de kicker; de kop houdt zijn gewone afstand */
.gb[data-page="bedankt-aanvraag"] .ba-sent { gap: .875rem; }
.gb[data-page="bedankt-aanvraag"] .ba-sent + .gb-hero__title { margin-top: 1.25rem; }

/* ===== pages/bedankt-afspraak.css ===== */
/* bedankt-afspraak · alleen de laatste sectie: knoppen onder een gecentreerde kop ook centreren */
.gb[data-page="bedankt-afspraak"] .gb-head--center + .gb-actions { justify-content: center; }
/* bedankt-afspraak · route-kaart mobiel: "Bezoek op afspraak" en telefoon onder elkaar (anders begint regel 2 met een punt) */
@media (max-width: 599px) {
  .gb[data-page="bedankt-afspraak"] .gb-route__body .gb-factline { flex-direction: column; align-items: flex-start; }
  .gb[data-page="bedankt-afspraak"] .gb-route__body .gb-factline li { margin-left: 0; padding-right: 0; }
  .gb[data-page="bedankt-afspraak"] .gb-route__body .gb-factline li::before { content: none; }
}
/* ---- Beweging (DESIGN.md §11) ----
   Vinkje in een cirkel naast de kop (systeem: .m-tick, 700 ms lock), daarna afvinken bij "Neem mee", de tijdlijn en het
   vizier op de framefoto's. Zonder JS en bij reduced motion staat alles er meteen. */
.gb[data-page="bedankt-afspraak"] .bda-title { display: flex; align-items: center; gap: clamp(.875rem, .6rem + 1vw, 1.25rem); margin-top: 1.125rem; }
.gb[data-page="bedankt-afspraak"] .bda-title .gb-hero__title { margin-top: 0; }

/* ===== pages/bikefit.css ===== */
/* Bike-fit (/bike-fit/): alleen paginaspecifieke aanvullingen op gb.css */

/* Voor wie: vier disciplinekaarten met beeld (2 kolommen mobiel, 4 vanaf 1024) */
.gb[data-page="bikefit"] .bf-disc { display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2rem) clamp(.75rem, .4rem + 1.4vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb[data-page="bikefit"] .bf-disc__item { display: flex; flex-direction: column; }
.gb[data-page="bikefit"] .bf-disc__title { margin-top: 1rem; font-size: var(--gb-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.gb[data-page="bikefit"] .bf-disc__text { margin-top: .375rem; font-size: var(--gb-fs-small); line-height: 1.55; color: var(--gb-fg-2); }
@media (max-width: 599px) { .gb[data-page="bikefit"] .bf-disc__text { font-size: var(--gb-fs-xs); } }
@media (min-width: 1024px) { .gb[data-page="bikefit"] .bf-disc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Stappen: beelden op één lijn onderaan, ook bij ongelijke tekstlengte */
@media (min-width: 1024px) {
  .gb[data-page="bikefit"] .bf-steps .gb-step__text { flex: 1 0 auto; }
  .gb[data-page="bikefit"] .bf-steps .gb-step__media { flex: none; }
}

/* Review van Corné: beeld links, quote rechts vanaf 1024 */
@media (min-width: 1024px) {
  .gb[data-page="bikefit"] .bf-review-wide { flex-direction: row; }
  .gb[data-page="bikefit"] .bf-review-wide .gb-review__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 24rem; }
  .gb[data-page="bikefit"] .bf-review-wide .gb-review__body { justify-content: center; padding: clamp(2rem, 1rem + 2.4vw, 3.5rem); }
  .gb[data-page="bikefit"] .bf-review-wide .gb-review__quote { font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); line-height: 1.45; letter-spacing: -.012em; }
  .gb[data-page="bikefit"] .bf-review-wide .gb-review__by { margin-top: 0; }
}

/* Bikesizing: tekst en kaart verticaal gecentreerd */
@media (min-width: 1024px) { .gb[data-page="bikefit"] .bf-sizing { align-items: center; } }

/* FAQ: kolom met kop en CTA blijft staan tijdens het lezen */
@media (min-width: 1024px) { .gb[data-page="bikefit"] .bf-faq-side { position: sticky; top: calc(var(--gb-header-h) + 2rem); align-self: start; } }

/* Hero: mobiel de uitsnede links (meetwaarden in beeld), bijschrift alleen vanaf 1024 (op tablet botst het met de scoreregel) */
.gb[data-page="bikefit"] .gb-hero__media .bf-hero-img { object-position: 0% 40%; }
@media (min-width: 768px) { .gb[data-page="bikefit"] .gb-hero__media .bf-hero-img { object-position: 50% 40%; } }
@media (max-width: 1023px) { .gb[data-page="bikefit"] .gb-hero__caption { display: none; } }

/* (feitenregel: scheidingspunten staan sinds QA 26-10 globaal in gb.css) */

/* Feitenlijst: ook mobiel label en waarde naast elkaar (korter) */
@media (max-width: 599px) {
  .gb[data-page="bikefit"] .bf-facts .gb-facts__row { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .875rem; padding-block: .875rem; }
  .gb[data-page="bikefit"] .bf-facts dd { font-size: var(--gb-fs-small); }
}

/* Wat neem je mee: mobiel en tablet een vierkante uitsnede (korter scherm) */
@media (max-width: 1023px) { .gb[data-page="bikefit"] .gb-figure__media.bf-pack { aspect-ratio: 1 / 1; } }

/* CTA-band: shoot-drop-weide, de fiets rechts naast de tekst */
.gb[data-page="bikefit"] .gb-ctaband__media .bf-cta-img { object-position: 55% 60%; }

/* Prijskaart blijft in beeld naast de lijst "Wat je krijgt" */
@media (min-width: 1024px) { .gb[data-page="bikefit"] .bf-pricecard { position: sticky; top: calc(var(--gb-header-h) + 2rem); } }

/* ---- Beweging (DESIGN.md §11; beginstanden alleen onder html.m-on, reduced motion en zonder JS: eindstand) ----
   Vier momenten: scan over de hero → lock-on hero-CTA · stappenlijn (systeem) → lock-on · afvinken + maatlijn op €225 →
   lock-on prijskaart · maten wegstrepen bij het verhaal van Patrick → lock-on. Alleen de systeemkeyframe m-lock, met
   fill "backwards" zodat hover en focus daarna gewoon werken. */
/* scan (M5): < 768 eindigt het kader boven de tekst die over de foto schuift; 768 tot 1023 geen scan (tekst ligt over de foto) */
@media (max-width: 767px) { .gb[data-page="bikefit"] .gb-hero__media .m-scan { bottom: 3.5rem; } }
@media (min-width: 768px) and (max-width: 1023px) { .gb[data-page="bikefit"] .gb-hero__media .m-scan { display: none; } }
/* ≥ 1024: bijschrift rechts op dezelfde regel als het scanlabel links, binnen de kaderhoeken */
@media (min-width: 1024px) { .gb[data-page="bikefit"] .gb-hero--split .gb-hero__caption { bottom: 13px; right: 30px; } }
.gb[data-page="bikefit"]:where(.m-on *) .gb-hero:has(.m-in) .gb-hero__cta .gb-btn--primary::before { animation: m-lock 1.8s 1.45s backwards; }
/* prijskaart: maatlijn over €225, dan lock-on op de knop (≥ 1024, naast de vinkjes; kleiner neemt de sticky balk het over) */
@media (min-width: 1024px) { .gb[data-page="bikefit"]:where(.m-on *) .bf-pricecard .gb-price.m-in ~ .gb-pricecard__foot .gb-btn--primary::before { animation: m-lock 1.8s 1.1s backwards; } }
/* wie je fit: XS tot XL doorgestreept, "Jouw maat" landt, dan lock-on. De knop is carbon (--dark + data-m-lock, zoals de
   home): het oranje moment van deze sectie is het G-icoon in de signatuur. Onder 768 met JS neemt de sticky balk het over. */
.gb[data-page="bikefit"]:where(.m-on *) .bf-who .m-sizes.m-in ~ .gb-actions [data-m-lock]::before { animation: m-lock 1.8s 1.5s backwards; }
@media (max-width: 767px) { .gb[data-page="bikefit"]:where(.gb-js *) .bf-who .gb-actions > .gb-btn { display: none; } }

/* ===== pages/blog-fietstypes.css ===== */
/* Blog fietstypes · alleen wat gb.css niet al doet */

/* answer-first in de smalle artikelkolom: kicker boven de tekst, ook op desktop */
.gb[data-page="blog-fietstypes"] .gb-answer { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.gb[data-page="blog-fietstypes"] .gb-answer > .gb-kicker { padding-top: 0; }

/* hairline tussen samenvatting en artikel */
.gb[data-page="blog-fietstypes"] .bft-body { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid var(--gb-rule); }

/* iets meer lucht tussen sectiekop (h2) en eerste fietstype (h3) */
.gb[data-page="blog-fietstypes"] .gb-prose h2 + h3 { margin-top: 1em; }

/* metaregel mobiel: auteur op een eigen regel, zonder schuine streep ervoor */
@media (max-width: 767px) {
  .gb[data-page="blog-fietstypes"] .gb-byline .bft-author { flex-basis: 100%; }
  .gb[data-page="blog-fietstypes"] .gb-byline .bft-author::before { content: none; }
}

/* lees ook: ruimte tussen de gestapelde kaarten op mobiel */
.gb[data-page="blog-fietstypes"] .bft-more { row-gap: 2.5rem; }
.gb[data-page="blog-fietstypes"] .gb-answer > div { max-width: 44rem; }

/* legering niet afbreken op het koppelteken */
.gb[data-page="blog-fietstypes"] .bft-nowrap { white-space: nowrap; }

/* ---- beweging (DESIGN.md §11, groep G5) ----
   Einde artikel: de volgende stap direct na het lezen (primaire CTA na het hoofdblok, §5.7). */
.gb[data-page="blog-fietstypes"] .blog-next { display: grid; gap: 1rem; justify-items: start; max-width: 44rem; margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.gb[data-page="blog-fietstypes"] .blog-next__title { max-width: 22ch; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; }
.gb[data-page="blog-fietstypes"] .blog-next .gb-cta { width: 100%; margin-top: .75rem; }
/* Leesmaat (alleen vanaf 1024 px, waar in de marge ruimte is; op 390 zou de lijn tegen de schermrand plakken):
   een maatlijn langs het artikel tekent mee met je leesvoortgang (0 % = artikel onder de header, 100 % = einde in beeld).
   Alleen scroll-gestuurd waar de browser dat kan, alleen met m-on. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .gb[data-page="blog-fietstypes"]:where(.m-on *) .gb-prose { position: relative; view-timeline: --blog-fietstypes-read block; view-timeline-inset: var(--gb-header-h) 0; }
    .gb[data-page="blog-fietstypes"]:where(.m-on *) .gb-prose::before, .gb[data-page="blog-fietstypes"]:where(.m-on *) .gb-prose::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3rem; pointer-events: none; }
    .gb[data-page="blog-fietstypes"]:where(.m-on *) .gb-prose::before {   /* maatlat: streepjes per 16 px, lang per 80 px (zoals in de header), naar buiten gericht */
      width: 8px; margin-left: -7.5px; opacity: .22;
      background: linear-gradient(var(--gb-fg), var(--gb-fg)) 100% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 80px) 0 0 / 100% 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 16px) 100% 0 / 4px 100% no-repeat;
    }
    .gb[data-page="blog-fietstypes"]:where(.m-on *) .gb-prose::after { width: 1.5px; margin-left: -.75px; background: var(--gb-fg); transform-origin: 50% 0; animation: blog-fietstypes-read linear both; animation-timeline: --blog-fietstypes-read; animation-range: contain 0% contain 100%; }
  }
}
@keyframes blog-fietstypes-read { from { transform: scaleY(0); } }

/* ===== pages/blog-framemateriaal.css ===== */
/* Answer-first in de smalle artikelkolom: kicker boven de tekst, zodat de linkerrand gelijk loopt met de prose. */
@media (min-width: 1024px) {
  .gb[data-page="blog-framemateriaal"] .gb-answer { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .gb[data-page="blog-framemateriaal"] .gb-answer > .gb-kicker { padding-top: 0; }
}

/* CTA-band: de fiets staat rechts naast de tekst (desktop) */
@media (min-width: 1024px) {
  .gb[data-page="blog-framemateriaal"] .gb-ctaband__media { left: 32%; }
  .gb[data-page="blog-framemateriaal"] .gb-ctaband__media::after { background: linear-gradient(90deg, rgba(10,9,8,1) 0%, rgba(10,9,8,.72) 26%, rgba(10,9,8,.28) 60%, rgba(10,9,8,.18) 100%); }
}

/* ---- beweging (DESIGN.md §11, groep G5) ----
   Einde artikel: de volgende stap direct na het lezen (primaire CTA na het hoofdblok, §5.7). */
.gb[data-page="blog-framemateriaal"] .blog-next { display: grid; gap: 1rem; justify-items: start; max-width: 44rem; margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.gb[data-page="blog-framemateriaal"] .blog-next__title { max-width: 22ch; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; }
.gb[data-page="blog-framemateriaal"] .blog-next .gb-cta { width: 100%; margin-top: .75rem; }
/* Leesmaat (alleen vanaf 1024 px, waar in de marge ruimte is; op 390 zou de lijn tegen de schermrand plakken):
   een maatlijn langs het artikel tekent mee met je leesvoortgang (0 % = artikel onder de header, 100 % = einde in beeld).
   Alleen scroll-gestuurd waar de browser dat kan, alleen met m-on. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .gb[data-page="blog-framemateriaal"]:where(.m-on *) .gb-prose { position: relative; view-timeline: --blog-framemateriaal-read block; view-timeline-inset: var(--gb-header-h) 0; }
    .gb[data-page="blog-framemateriaal"]:where(.m-on *) .gb-prose::before, .gb[data-page="blog-framemateriaal"]:where(.m-on *) .gb-prose::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3rem; pointer-events: none; }
    .gb[data-page="blog-framemateriaal"]:where(.m-on *) .gb-prose::before {   /* maatlat: streepjes per 16 px, lang per 80 px (zoals in de header), naar buiten gericht */
      width: 8px; margin-left: -7.5px; opacity: .22;
      background: linear-gradient(var(--gb-fg), var(--gb-fg)) 100% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 80px) 0 0 / 100% 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 16px) 100% 0 / 4px 100% no-repeat;
    }
    .gb[data-page="blog-framemateriaal"]:where(.m-on *) .gb-prose::after { width: 1.5px; margin-left: -.75px; background: var(--gb-fg); transform-origin: 50% 0; animation: blog-framemateriaal-read linear both; animation-timeline: --blog-framemateriaal-read; animation-range: contain 0% contain 100%; }
  }
}
@keyframes blog-framemateriaal-read { from { transform: scaleY(0); } }

/* ===== pages/blog-reis.css ===== */
/* blog-reis · metaregel: op smalle schermen staat de auteur op een eigen regel, zonder scheidingsteken vooraan */
@media (max-width: 767px) {
  .gb[data-page="blog-reis"] .gb-byline > .blog-reis__author { flex-basis: 100%; }
  .gb[data-page="blog-reis"] .gb-byline > .blog-reis__author::before { content: none; padding: 0; }
}

/* ---- beweging (DESIGN.md §11, groep G5) ----
   Einde artikel: de volgende stap direct na het lezen (primaire CTA na het hoofdblok, §5.7). */
.gb[data-page="blog-reis"] .blog-next { display: grid; gap: 1rem; justify-items: start; max-width: 44rem; margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.gb[data-page="blog-reis"] .blog-next__title { max-width: 22ch; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; }
.gb[data-page="blog-reis"] .blog-next .gb-cta { width: 100%; margin-top: .75rem; }
/* Leesmaat (alleen vanaf 1024 px, waar in de marge ruimte is; op 390 zou de lijn tegen de schermrand plakken):
   een maatlijn langs het artikel tekent mee met je leesvoortgang (0 % = artikel onder de header, 100 % = einde in beeld).
   Alleen scroll-gestuurd waar de browser dat kan, alleen met m-on. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .gb[data-page="blog-reis"]:where(.m-on *) .gb-prose { position: relative; view-timeline: --blog-reis-read block; view-timeline-inset: var(--gb-header-h) 0; }
    .gb[data-page="blog-reis"]:where(.m-on *) .gb-prose::before, .gb[data-page="blog-reis"]:where(.m-on *) .gb-prose::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3rem; pointer-events: none; }
    .gb[data-page="blog-reis"]:where(.m-on *) .gb-prose::before {   /* maatlat: streepjes per 16 px, lang per 80 px (zoals in de header), naar buiten gericht */
      width: 8px; margin-left: -7.5px; opacity: .22;
      background: linear-gradient(var(--gb-fg), var(--gb-fg)) 100% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 80px) 0 0 / 100% 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 16px) 100% 0 / 4px 100% no-repeat;
    }
    .gb[data-page="blog-reis"]:where(.m-on *) .gb-prose::after { width: 1.5px; margin-left: -.75px; background: var(--gb-fg); transform-origin: 50% 0; animation: blog-reis-read linear both; animation-timeline: --blog-reis-read; animation-range: contain 0% contain 100%; }
  }
}
@keyframes blog-reis-read { from { transform: scaleY(0); } }

/* ===== pages/blog-size-matters.css ===== */
/* blog-size-matters · alleen paginaspecifieke aanvullingen op gb.css */

/* maten wegstrepen (M3) naast de alinea over standaardmaten van XS tot XL: als figuur in de tekstkolom */
.gb[data-page="blog-size-matters"] .gb-prose .bsm-sizes { margin-block: 1.75em; }

/* CTA-band: de fiets staat rechts naast de tekst (desktop) */
@media (min-width: 1024px) {
  .gb[data-page="blog-size-matters"] .gb-ctaband__media { left: 32%; }
  .gb[data-page="blog-size-matters"] .gb-ctaband__media::after { background: linear-gradient(90deg, rgba(10,9,8,1) 0%, rgba(10,9,8,.72) 26%, rgba(10,9,8,.28) 60%, rgba(10,9,8,.18) 100%); }
}

/* ---- beweging (DESIGN.md §11, groep G5) ----
   Einde artikel: de volgende stap direct na het lezen (primaire CTA na het hoofdblok, §5.7). */
.gb[data-page="blog-size-matters"] .blog-next { display: grid; gap: 1rem; justify-items: start; max-width: 44rem; margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.gb[data-page="blog-size-matters"] .blog-next__title { max-width: 22ch; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; }
.gb[data-page="blog-size-matters"] .blog-next .gb-cta { width: 100%; margin-top: .75rem; }
/* Leesmaat (alleen vanaf 1024 px, waar in de marge ruimte is; op 390 zou de lijn tegen de schermrand plakken):
   een maatlijn langs het artikel tekent mee met je leesvoortgang (0 % = artikel onder de header, 100 % = einde in beeld).
   Alleen scroll-gestuurd waar de browser dat kan, alleen met m-on. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .gb[data-page="blog-size-matters"]:where(.m-on *) .gb-prose { position: relative; view-timeline: --blog-size-matters-read block; view-timeline-inset: var(--gb-header-h) 0; }
    .gb[data-page="blog-size-matters"]:where(.m-on *) .gb-prose::before, .gb[data-page="blog-size-matters"]:where(.m-on *) .gb-prose::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3rem; pointer-events: none; }
    .gb[data-page="blog-size-matters"]:where(.m-on *) .gb-prose::before {   /* maatlat: streepjes per 16 px, lang per 80 px (zoals in de header), naar buiten gericht */
      width: 8px; margin-left: -7.5px; opacity: .22;
      background: linear-gradient(var(--gb-fg), var(--gb-fg)) 100% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 80px) 0 0 / 100% 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 16px) 100% 0 / 4px 100% no-repeat;
    }
    .gb[data-page="blog-size-matters"]:where(.m-on *) .gb-prose::after { width: 1.5px; margin-left: -.75px; background: var(--gb-fg); transform-origin: 50% 0; animation: blog-size-matters-read linear both; animation-timeline: --blog-size-matters-read; animation-range: contain 0% contain 100%; }
  }
}
@keyframes blog-size-matters-read { from { transform: scaleY(0); } }

/* ===== pages/blog-wielen.css ===== */
/* blog-wielen: alleen mobiele verfijning van metaregel en velghoogtetabel */
@media (max-width: 599px) {
  /* auteur op een eigen regel, zonder losse "/" aan het begin */
  .gb[data-page="blog-wielen"] .gb-hero--article .gb-byline > :last-child { flex-basis: 100%; }
  .gb[data-page="blog-wielen"] .gb-hero--article .gb-byline > :last-child::before { content: none; }
  /* drie kolommen passen op 390 px zonder horizontaal scrollen */
  .gb[data-page="blog-wielen"] .gb-prose .gb-table th,
  .gb[data-page="blog-wielen"] .gb-prose .gb-table td { padding: .75rem .625rem; }
  .gb[data-page="blog-wielen"] .gb-prose .gb-table caption { padding: .75rem .625rem; }
}

/* CTA-band: de fiets staat rechts naast de tekst (desktop) */
@media (min-width: 1024px) {
  .gb[data-page="blog-wielen"] .gb-ctaband__media { left: 32%; }
  .gb[data-page="blog-wielen"] .gb-ctaband__media::after { background: linear-gradient(90deg, rgba(10,9,8,1) 0%, rgba(10,9,8,.72) 26%, rgba(10,9,8,.28) 60%, rgba(10,9,8,.18) 100%); }
}

/* ---- beweging (DESIGN.md §11, groep G5) ----
   Einde artikel: de volgende stap direct na het lezen (primaire CTA na het hoofdblok, §5.7). */
.gb[data-page="blog-wielen"] .blog-next { display: grid; gap: 1rem; justify-items: start; max-width: 44rem; margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.gb[data-page="blog-wielen"] .blog-next__title { max-width: 22ch; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; }
.gb[data-page="blog-wielen"] .blog-next .gb-cta { width: 100%; margin-top: .75rem; }
/* Leesmaat (alleen vanaf 1024 px, waar in de marge ruimte is; op 390 zou de lijn tegen de schermrand plakken):
   een maatlijn langs het artikel tekent mee met je leesvoortgang (0 % = artikel onder de header, 100 % = einde in beeld).
   Alleen scroll-gestuurd waar de browser dat kan, alleen met m-on. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .gb[data-page="blog-wielen"]:where(.m-on *) .gb-prose { position: relative; view-timeline: --blog-wielen-read block; view-timeline-inset: var(--gb-header-h) 0; }
    .gb[data-page="blog-wielen"]:where(.m-on *) .gb-prose::before, .gb[data-page="blog-wielen"]:where(.m-on *) .gb-prose::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3rem; pointer-events: none; }
    .gb[data-page="blog-wielen"]:where(.m-on *) .gb-prose::before {   /* maatlat: streepjes per 16 px, lang per 80 px (zoals in de header), naar buiten gericht */
      width: 8px; margin-left: -7.5px; opacity: .22;
      background: linear-gradient(var(--gb-fg), var(--gb-fg)) 100% 0 / 1px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 80px) 0 0 / 100% 100% no-repeat,
        repeating-linear-gradient(180deg, var(--gb-fg) 0 1px, transparent 1px 16px) 100% 0 / 4px 100% no-repeat;
    }
    .gb[data-page="blog-wielen"]:where(.m-on *) .gb-prose::after { width: 1.5px; margin-left: -.75px; background: var(--gb-fg); transform-origin: 50% 0; animation: blog-wielen-read linear both; animation-timeline: --blog-wielen-read; animation-range: contain 0% contain 100%; }
  }
}
@keyframes blog-wielen-read { from { transform: scaleY(0); } }

/* ===== pages/blog.css ===== */
/* Blogoverzicht (/blogs/): alleen paginaspecifieke aanvullingen op gb.css */

/* Inhoudsopgave in de hero: titels als rustige tekstlinks */
.gb[data-page="blog"] .blog-index dd a { color: var(--gb-fg); text-decoration: underline; text-decoration-color: var(--gb-rule-strong); text-underline-offset: .3em; }
.gb[data-page="blog"] .blog-index dd a:hover { text-decoration-color: currentColor; }

/* Uitgelicht artikel: leeslink onder het excerpt */
.gb[data-page="blog"] .blog-more { justify-self: start; margin-top: .75rem; }

/* Onderwerpen: kop links, twee artikelen rechts; ruime adem tussen de groepen */
.gb[data-page="blog"] .blog-topic { align-items: start; }
.gb[data-page="blog"] .blog-topic + .blog-topic { margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 1024px) { .gb[data-page="blog"] .blog-topic__head { position: sticky; top: calc(var(--gb-header-h) + 2rem); padding-right: 2rem; } }

/* Kaarten naar andere pagina's: pijl onderaan */
.gb[data-page="blog"] .gb-card .gb-card__foot { display: flex; }

/* Socials */
.gb[data-page="blog"] .blog-social a { color: var(--gb-fg); text-decoration: underline; text-underline-offset: .25em; display: inline-flex; align-items: center; gap: .25rem; }
.gb[data-page="blog"] .blog-social .gb-i { width: .875rem; height: .875rem; }

/* Kop "Uitgelicht": haarlijn over de volle breedte als scheiding met de answer-first op hetzelfde paper */
.gb[data-page="blog"] .blog-feat-head { max-width: none; }

/* ---- beweging (DESIGN.md §11, groep G5) ----
   "Lezen helpt. Meten geeft zekerheid.": scanlijn (C8) en afvinken (M9) eindigen op "Plan je bike-fit". Lock-on (C3) één keer
   via data-m-lock="view" op de knop (gb.js: pas als de knop in beeld is), daarna gewone hover en focus. */

/* ===== pages/configurator-bike.css ===== */
/* Gregor Bikes · bike.css · live getekende fiets bij de configurator (definitieve versie)
   Mount: <div data-cfg-bike></div>  →  .gb-cfg-bike > svg.gb-cfg-bike__svg[data-tone][data-mat][data-merk][data-type]
   bike.js zet data-tone (licht/donker, gelezen van de achtergrond), data-mat (ti | carbon | line) en --bk-bg (de echte
   achtergrondkleur, voor de halo achter labels en de lijntekening). Alle kleuren staan hier; de JS bevat geen hexwaarden.
   Palet: Gregor titanium #D8D8D8 / steel #5C5B5B / orange #DE6F3A · King’s Lynn carbon #16191C / ash #8A8D91 /
   racing green #1E3B2C / off-white #F2F0EB · achtergronden carbon #0A0908 en paper #F4F2ED. */

.gb .gb-cfg-bike { position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; -webkit-user-select: none; user-select: none; }
/* gb.css zet `.gb svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }` voor iconen:
   hier terug naar de SVG-standaard, anders krijgen schaduw en tandjes een witte rand */
.gb .gb-cfg-bike__svg {
  --bk-bg: #0A0908; display: block; width: 100%; max-width: 100%; height: auto; overflow: visible;
  fill: #000000; stroke: none; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter;
}

/* ================= toon: donker (carbon, o.a. de samenvatting) ================= */
.gb .gb-cfg-bike__svg,
.gb .gb-cfg-bike__svg[data-tone="dark"] {
  --bk-label: rgba(255, 255, 255, .72); --bk-label-2: rgba(255, 255, 255, .5); --bk-label-s: rgba(255, 255, 255, .94);
  --bk-dim: rgba(255, 255, 255, .3); --bk-dim-strong: rgba(255, 255, 255, .56); --bk-cons: rgba(255, 255, 255, .17);
  --bk-ink: #CFCDC8; --bk-grid: rgba(216, 216, 216, .055);
  --bk-ground: rgba(255, 255, 255, .22); --bk-hatch: rgba(255, 255, 255, .12); --bk-sh: #000000; --bk-sh-a: .9;
  --bk-cedge: rgba(255, 255, 255, .17); --bk-spoke: rgba(206, 208, 211, .36); --bk-spoke-2: rgba(206, 208, 211, .19);
  /* onderdelen (zwart, iets opgelicht zodat ze niet in de achtergrond verdwijnen) */
  --bk-cp0: #6B6F74; --bk-cp1: #3B3E42; --bk-cp2: #222326; --bk-cp3: #17181B; --bk-cp4: #2A2B2E;
  --bk-al0: #E4E6E8; --bk-al1: #B6BABE; --bk-al2: #878B90; --bk-al3: #5F6368;
  --bk-hb0: #56595E; --bk-hb1: #232528; --bk-hb2: #151618;
  --bk-pg0: #474A4E; --bk-pg1: #1D1E20; --bk-pg2: #141516;
  --bk-rg0: #575B60; --bk-rg1: #2A2C2F; --bk-rg2: #18191B; --bk-ring2: #2F3134; --bk-teeth: #121314;
  --bk-cogA: #8E9297; --bk-cogB: #A9ADB2; --bk-cog-edge: #3A3D41;
  --bk-rh: #3A3D41; --bk-arm: #7E8287; --bk-chain: #2F3134; --bk-ch1: #8D9196; --bk-ch2: #1A1B1C;
  --bk-pul: #202124; --bk-pt: #3E4146; --bk-tape: #1F2022; --bk-lever: #303235; --bk-rail: #7C8085; --bk-fdc: #232527;
  --bk-hole: #1C1C1C; --bk-ash: #8A8D91; --bk-spl: rgba(0, 0, 0, .6); --bk-bolt-edge: transparent;
  /* wielen: bandwand lichter dan de velg, zodat de velghoogte leest; 1px randen */
  --bk-ty0: #1C1B1A; --bk-ty1: #37342F; --bk-ty2: #302D2A; --bk-ty3: #221F1D; --bk-ty4: #181615;
  --bk-rm0: #0B0C0E; --bk-rm1: #272B30; --bk-rm2: #1A1D21; --bk-rm3: #2A2E33; --bk-rm4: #181B1E; --bk-rm5: #121417; --bk-rm6: #3E4247;
  --bk-rl: rgba(255, 255, 255, .3); --bk-rli: rgba(255, 255, 255, .24); --bk-te: rgba(255, 255, 255, .2);
  --bk-knob: #262422; --bk-tr1: #3B3835; --bk-tr2: #34312E;
}

/* ================= toon: licht (paper) ================= */
.gb .gb-cfg-bike__svg[data-tone="light"] {
  --bk-label: #5C5B5B; --bk-label-2: #8A867E; --bk-label-s: #211E1B;
  --bk-dim: rgba(33, 30, 27, .34); --bk-dim-strong: rgba(33, 30, 27, .6); --bk-cons: rgba(33, 30, 27, .2);
  --bk-ink: #4A4744; --bk-grid: rgba(33, 30, 27, .06);
  --bk-ground: rgba(33, 30, 27, .26); --bk-hatch: rgba(33, 30, 27, .16); --bk-sh: #211E1B; --bk-sh-a: .3;
  --bk-cedge: rgba(10, 9, 8, .5); --bk-spoke: rgba(22, 22, 22, .62); --bk-spoke-2: rgba(22, 22, 22, .3);
  --bk-cp0: #5A5D61; --bk-cp1: #303235; --bk-cp2: #17181A; --bk-cp3: #0E0F10; --bk-cp4: #1D1E20;
  --bk-hb0: #4A4D51; --bk-hb1: #1D1F21; --bk-hb2: #111213;
  --bk-pg0: #3E4145; --bk-pg1: #17181A; --bk-pg2: #101112;
  --bk-rg0: #4A4E53; --bk-rg1: #222427; --bk-rg2: #141517; --bk-ring2: #26282B; --bk-teeth: #0E0F10;
  --bk-chain: #2A2C2E; --bk-pul: #1B1C1E; --bk-pt: #3A3D41; --bk-tape: #1A1B1D; --bk-lever: #2B2D30; --bk-fdc: #1E2022;
  --bk-hole: #222222;
  --bk-ty0: #151413; --bk-ty1: #2A2826; --bk-ty2: #242220; --bk-ty3: #181716; --bk-ty4: #0F0E0E;
  --bk-rm0: #07080A; --bk-rm1: #1D2024; --bk-rm2: #131518; --bk-rm3: #1E2125; --bk-rm4: #111315; --bk-rm5: #0C0D0F; --bk-rm6: #2B2E32;
  --bk-rl: rgba(255, 255, 255, .14); --bk-rli: rgba(255, 255, 255, .16); --bk-te: rgba(255, 255, 255, .06);
  --bk-knob: #171615; --bk-tr1: #2D2B29; --bk-tr2: #272523;
}

/* ================= materiaal ================= */
/* Gregor: geborsteld titanium met lasnaden, zwarte carbon vork, oranje balhoofdplaatje */
.gb .gb-cfg-bike__svg[data-mat="ti"] {
  --bk-fr0: #8C8C8A; --bk-fr1: #CDCDCA; --bk-fr2: #F5F5F3; --bk-fr3: #DFDFDC; --bk-fr4: #B6B6B3; --bk-fr5: #8D8D8B; --bk-fr6: #6C6C6A; --bk-fr7: #5C5B5B;
  --bk-fedge: rgba(0, 0, 0, .55); --bk-fr-edge: transparent;
  --bk-fk0: var(--bk-cp0); --bk-fk1: var(--bk-cp1); --bk-fk2: var(--bk-cp2); --bk-fk3: var(--bk-cp3); --bk-fk4: var(--bk-cp4); --bk-fk-edge: var(--bk-cedge);
  --bk-wd1: #6E6E6B; --bk-wd2: #E9E9E6;
  --bk-acc: #DE6F3A; --bk-acc-edge: #DE6F3A; --bk-logo: rgba(92, 91, 91, .85);
  --bk-x-o: 1; --bk-ti-o: 1; --bk-cb-o: 0; --bk-ln-o: 0; --bk-nc-o: 1;
}
.gb .gb-cfg-bike__svg[data-tone="light"][data-mat="ti"] { --bk-fedge: rgba(62, 59, 59, .9); }

/* King’s Lynn: mat carbon, ash-biezen, één smalle racing-green band */
.gb .gb-cfg-bike__svg[data-mat="carbon"] {
  --bk-fr0: #454B52; --bk-fr1: #383D44; --bk-fr2: #2B3035; --bk-fr3: #23272C; --bk-fr4: #1B1E22; --bk-fr5: #15181A; --bk-fr6: #121417; --bk-fr7: #101214;
  --bk-fk0: #454B52; --bk-fk1: #30353B; --bk-fk2: #1F2327; --bk-fk3: #15181B; --bk-fk4: #101214;
  --bk-fedge: #050607; --bk-fk-edge: #050607; --bk-fr-edge: transparent;
  --bk-acc: #16191C; --bk-acc-edge: #16191C; --bk-logo: rgba(242, 240, 235, .86);
  --bk-x-o: 1; --bk-ti-o: 0; --bk-cb-o: 1; --bk-ln-o: 0; --bk-nc-o: 0;
}
/* op carbon-donker: iets lichtere hooglichten en een ash-randlicht, anders verdwijnt het frame */
.gb .gb-cfg-bike__svg[data-tone="dark"][data-mat="carbon"] {
  --bk-fr0: #646C74; --bk-fr1: #4B525A; --bk-fr2: #353B42; --bk-fr3: #292E34; --bk-fr4: #1F2327; --bk-fr5: #191C1F; --bk-fr6: #15181B; --bk-fr7: #131518;
  --bk-fk0: #646C74; --bk-fk1: #3B4148; --bk-fk2: #24292D; --bk-fk3: #191C1F; --bk-fk4: #131518;
  --bk-fedge: rgba(138, 141, 145, .72); --bk-fk-edge: rgba(138, 141, 145, .72);
  --bk-acc: #F2F0EB; --bk-acc-edge: #F2F0EB;
}

/* Nog geen merk: neutrale lijntekening (blauwdruk-achtig, graphite-inkt, nog geen materiaal) */
.gb .gb-cfg-bike__svg[data-mat="line"] {
  --bk-fr0: var(--bk-bg); --bk-fr1: var(--bk-bg); --bk-fr2: var(--bk-bg); --bk-fr3: var(--bk-bg); --bk-fr4: var(--bk-bg); --bk-fr5: var(--bk-bg); --bk-fr6: var(--bk-bg); --bk-fr7: var(--bk-bg);
  --bk-fk0: var(--bk-bg); --bk-fk1: var(--bk-bg); --bk-fk2: var(--bk-bg); --bk-fk3: var(--bk-bg); --bk-fk4: var(--bk-bg);
  --bk-cp0: var(--bk-bg); --bk-cp1: var(--bk-bg); --bk-cp2: var(--bk-bg); --bk-cp3: var(--bk-bg); --bk-cp4: var(--bk-bg);
  --bk-al0: var(--bk-bg); --bk-al1: var(--bk-bg); --bk-al2: var(--bk-bg); --bk-al3: var(--bk-bg);
  --bk-hb0: var(--bk-bg); --bk-hb1: var(--bk-bg); --bk-hb2: var(--bk-bg); --bk-pg0: var(--bk-bg); --bk-pg1: var(--bk-bg); --bk-pg2: var(--bk-bg);
  --bk-rg0: var(--bk-bg); --bk-rg1: var(--bk-bg); --bk-rg2: var(--bk-bg); --bk-ring2: var(--bk-bg);
  --bk-ty0: var(--bk-bg); --bk-ty1: var(--bk-bg); --bk-ty2: var(--bk-bg); --bk-ty3: var(--bk-bg); --bk-ty4: var(--bk-bg);
  --bk-rm0: var(--bk-bg); --bk-rm1: var(--bk-bg); --bk-rm2: var(--bk-bg); --bk-rm3: var(--bk-bg); --bk-rm4: var(--bk-bg); --bk-rm5: var(--bk-bg); --bk-rm6: var(--bk-bg);
  --bk-cogA: var(--bk-bg); --bk-cogB: var(--bk-bg); --bk-pul: var(--bk-bg); --bk-hole: var(--bk-bg);
  --bk-chain: var(--bk-bg); --bk-tape: var(--bk-bg); --bk-lever: var(--bk-bg); --bk-rail: var(--bk-bg); --bk-fdc: var(--bk-bg); --bk-arm: var(--bk-bg);
  --bk-cedge: var(--bk-ink); --bk-fr-edge: var(--bk-ink); --bk-cog-edge: var(--bk-ink); --bk-bolt-edge: var(--bk-ink);
  --bk-fedge: transparent; --bk-fk-edge: transparent; --bk-knob: var(--bk-ink); --bk-spl: var(--bk-ink);
  --bk-spoke: var(--bk-ink); --bk-spoke-2: var(--bk-ink); --bk-cons: var(--bk-ink);
  --bk-acc: transparent; --bk-acc-edge: var(--bk-label-2); --bk-logo: transparent;
  --bk-x-o: 0; --bk-ti-o: 0; --bk-cb-o: 0; --bk-ln-o: 1; --bk-nc-o: 1;
}

/* ================= vormen ================= */
.gb .gb-cfg-bike__svg .bk-c { stroke: var(--bk-cedge); stroke-width: calc(var(--bk-ew, 1.5) * 1px); stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-fr,
.gb .gb-cfg-bike__svg .bk-fkf { stroke: var(--bk-fr-edge); stroke-width: calc(var(--bk-ew, 1.5) * 1px); stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-ol { fill: none; stroke: var(--bk-fedge); stroke-width: calc(var(--bk-ew, 1.5) * 2.4px); stroke-linejoin: round; }
.gb .gb-cfg-bike__svg[data-tone="dark"][data-mat="carbon"] .bk-ol { stroke-width: calc(var(--bk-ew, 1.5) * 2.8px); }
.gb .gb-cfg-bike__svg .bk-olk { fill: none; stroke: var(--bk-fk-edge); stroke-width: calc(var(--bk-ew, 1.5) * 2px); stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-o { fill: none; stroke: var(--bk-cedge); stroke-linecap: round; stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-i { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-s-chain { stroke: var(--bk-chain); }
.gb .gb-cfg-bike__svg .bk-s-tape { stroke: var(--bk-tape); }
.gb .gb-cfg-bike__svg .bk-s-lever { stroke: var(--bk-lever); }
.gb .gb-cfg-bike__svg .bk-s-rail { stroke: var(--bk-rail); }
.gb .gb-cfg-bike__svg .bk-s-fd { stroke: var(--bk-fdc); }
.gb .gb-cfg-bike__svg .bk-s-arm { stroke: var(--bk-arm); }
.gb .gb-cfg-bike__svg .bk-hl { fill: none; stroke: #FFFFFF; stroke-linecap: round; }
.gb .gb-cfg-bike__svg .bk-ash { fill: var(--bk-ash); }
.gb .gb-cfg-bike__svg .bk-ashl { fill: none; stroke: var(--bk-ash); }
.gb .gb-cfg-bike__svg .bk-bies { stroke-opacity: .55; stroke-linecap: round; }
.gb .gb-cfg-bike__svg .bk-seam { fill: none; stroke: #000000; stroke-opacity: .5; }
.gb .gb-cfg-bike__svg .bk-hole { fill: var(--bk-hole); }
.gb .gb-cfg-bike__svg .bk-wd1 { fill: none; stroke: var(--bk-wd1); stroke-linecap: round; }
.gb .gb-cfg-bike__svg .bk-wd2 { fill: none; stroke: var(--bk-wd2); stroke-linecap: butt; }
.gb .gb-cfg-bike__svg .bk-logo { fill: var(--bk-logo); }
.gb .gb-cfg-bike__svg .bk-bolt { stroke: var(--bk-bolt-edge); stroke-width: calc(var(--bk-ew, 1.5) * 1px); }
.gb .gb-cfg-bike__svg .bk-spl { fill: none; stroke: var(--bk-spl); stroke-width: 1.2; }
.gb .gb-cfg-bike__svg .bk-far { opacity: .9; }

/* wielen en aandrijving */
.gb .gb-cfg-bike__svg .bk-sp { fill: none; stroke: var(--bk-spoke); stroke-width: 2.2; stroke-linecap: round; }
.gb .gb-cfg-bike__svg .bk-sp2 { stroke: var(--bk-spoke-2); }
.gb .gb-cfg-bike__svg .bk-kn { fill: none; stroke: var(--bk-knob); }
.gb .gb-cfg-bike__svg .bk-tr1 { fill: none; stroke: var(--bk-tr1); }
.gb .gb-cfg-bike__svg .bk-tr2 { fill: none; stroke: var(--bk-tr2); }
.gb .gb-cfg-bike__svg .bk-rl { fill: none; stroke: var(--bk-rl); stroke-width: calc(var(--bk-px, 2) * .9px); }
.gb .gb-cfg-bike__svg .bk-rli { stroke: var(--bk-rli); }
.gb .gb-cfg-bike__svg .bk-te { fill: none; stroke: var(--bk-te); stroke-width: calc(var(--bk-px, 2) * .8px); }
.gb .gb-cfg-bike__svg .bk-rh { fill: none; stroke: var(--bk-rh); }
.gb .gb-cfg-bike__svg .bk-cog { fill: var(--bk-cogB); stroke: var(--bk-cog-edge); stroke-width: calc(var(--bk-ew, 1.5) * 1px); }
.gb .gb-cfg-bike__svg .bk-cogA { fill: var(--bk-cogA); }
.gb .gb-cfg-bike__svg .bk-pul { fill: var(--bk-pul); }
.gb .gb-cfg-bike__svg .bk-pt { fill: none; stroke: var(--bk-pt); }
.gb .gb-cfg-bike__svg .bk-ch1 { fill: none; stroke: var(--bk-ch1); }
.gb .gb-cfg-bike__svg .bk-ch2 { fill: none; stroke: var(--bk-ch2); }
.gb .gb-cfg-bike__svg .bk-ring2 { fill: var(--bk-ring2); }
.gb .gb-cfg-bike__svg .bk-teeth { fill: none; stroke: var(--bk-teeth); }
.gb .gb-cfg-bike__svg .bk-pm { fill: none; stroke: #DE6F3A; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(222, 111, 58, .45)); }
.gb .gb-cfg-bike__svg .bk-pmdot { fill: #DE6F3A; }

/* verlopen: kleuren per toon en materiaal */
.gb .gb-cfg-bike__svg .bk-fr0 { stop-color: var(--bk-fr0); } .gb .gb-cfg-bike__svg .bk-fr1 { stop-color: var(--bk-fr1); }
.gb .gb-cfg-bike__svg .bk-fr2 { stop-color: var(--bk-fr2); } .gb .gb-cfg-bike__svg .bk-fr3 { stop-color: var(--bk-fr3); }
.gb .gb-cfg-bike__svg .bk-fr4 { stop-color: var(--bk-fr4); } .gb .gb-cfg-bike__svg .bk-fr5 { stop-color: var(--bk-fr5); }
.gb .gb-cfg-bike__svg .bk-fr6 { stop-color: var(--bk-fr6); } .gb .gb-cfg-bike__svg .bk-fr7 { stop-color: var(--bk-fr7); }
.gb .gb-cfg-bike__svg .bk-fk0 { stop-color: var(--bk-fk0); } .gb .gb-cfg-bike__svg .bk-fk1 { stop-color: var(--bk-fk1); }
.gb .gb-cfg-bike__svg .bk-fk2 { stop-color: var(--bk-fk2); } .gb .gb-cfg-bike__svg .bk-fk3 { stop-color: var(--bk-fk3); }
.gb .gb-cfg-bike__svg .bk-fk4 { stop-color: var(--bk-fk4); }
.gb .gb-cfg-bike__svg .bk-cp0 { stop-color: var(--bk-cp0); } .gb .gb-cfg-bike__svg .bk-cp1 { stop-color: var(--bk-cp1); }
.gb .gb-cfg-bike__svg .bk-cp2 { stop-color: var(--bk-cp2); } .gb .gb-cfg-bike__svg .bk-cp3 { stop-color: var(--bk-cp3); }
.gb .gb-cfg-bike__svg .bk-cp4 { stop-color: var(--bk-cp4); }
.gb .gb-cfg-bike__svg .bk-al0 { stop-color: var(--bk-al0); } .gb .gb-cfg-bike__svg .bk-al1 { stop-color: var(--bk-al1); }
.gb .gb-cfg-bike__svg .bk-al2 { stop-color: var(--bk-al2); } .gb .gb-cfg-bike__svg .bk-al3 { stop-color: var(--bk-al3); }
.gb .gb-cfg-bike__svg .bk-gr0 { stop-color: #3A6A52; } .gb .gb-cfg-bike__svg .bk-gr1 { stop-color: #2B5440; }
.gb .gb-cfg-bike__svg .bk-gr2 { stop-color: #1E3B2C; } .gb .gb-cfg-bike__svg .bk-gr3 { stop-color: #122419; }
.gb .gb-cfg-bike__svg .bk-or0 { stop-color: #F39463; } .gb .gb-cfg-bike__svg .bk-or1 { stop-color: #DE6F3A; } .gb .gb-cfg-bike__svg .bk-or2 { stop-color: #B4542A; }
.gb .gb-cfg-bike__svg .bk-sw0 { stop-color: #FFFFFF; stop-opacity: .06; } .gb .gb-cfg-bike__svg .bk-sw1 { stop-color: #FFFFFF; stop-opacity: 0; }
.gb .gb-cfg-bike__svg .bk-sw2 { stop-color: #000000; stop-opacity: 0; } .gb .gb-cfg-bike__svg .bk-sw3 { stop-color: #000000; stop-opacity: .38; }
.gb .gb-cfg-bike__svg .bk-cs0 { stop-color: #FFFFFF; stop-opacity: .25; } .gb .gb-cfg-bike__svg .bk-cs1 { stop-color: #FFFFFF; stop-opacity: 0; }
.gb .gb-cfg-bike__svg .bk-cs2 { stop-color: #000000; stop-opacity: .35; }
.gb .gb-cfg-bike__svg .bk-rg0 { stop-color: var(--bk-rg0); } .gb .gb-cfg-bike__svg .bk-rg1 { stop-color: var(--bk-rg1); } .gb .gb-cfg-bike__svg .bk-rg2 { stop-color: var(--bk-rg2); }
.gb .gb-cfg-bike__svg .bk-hb0 { stop-color: var(--bk-hb0); } .gb .gb-cfg-bike__svg .bk-hb1 { stop-color: var(--bk-hb1); } .gb .gb-cfg-bike__svg .bk-hb2 { stop-color: var(--bk-hb2); }
.gb .gb-cfg-bike__svg .bk-pg0 { stop-color: var(--bk-pg0); } .gb .gb-cfg-bike__svg .bk-pg1 { stop-color: var(--bk-pg1); } .gb .gb-cfg-bike__svg .bk-pg2 { stop-color: var(--bk-pg2); }
.gb .gb-cfg-bike__svg .bk-ty0 { stop-color: var(--bk-ty0); } .gb .gb-cfg-bike__svg .bk-ty1 { stop-color: var(--bk-ty1); }
.gb .gb-cfg-bike__svg .bk-ty2 { stop-color: var(--bk-ty2); } .gb .gb-cfg-bike__svg .bk-ty3 { stop-color: var(--bk-ty3); }
.gb .gb-cfg-bike__svg .bk-ty4 { stop-color: var(--bk-ty4); }
.gb .gb-cfg-bike__svg .bk-rm0 { stop-color: var(--bk-rm0); } .gb .gb-cfg-bike__svg .bk-rm1 { stop-color: var(--bk-rm1); }
.gb .gb-cfg-bike__svg .bk-rm2 { stop-color: var(--bk-rm2); } .gb .gb-cfg-bike__svg .bk-rm3 { stop-color: var(--bk-rm3); }
.gb .gb-cfg-bike__svg .bk-rm4 { stop-color: var(--bk-rm4); } .gb .gb-cfg-bike__svg .bk-rm5 { stop-color: var(--bk-rm5); }
.gb .gb-cfg-bike__svg .bk-rm6 { stop-color: var(--bk-rm6); }
.gb .gb-cfg-bike__svg .bk-sh0 { stop-color: var(--bk-sh); stop-opacity: var(--bk-sh-a); }
.gb .gb-cfg-bike__svg .bk-sh1 { stop-color: var(--bk-sh); stop-opacity: calc(var(--bk-sh-a) * .35); }
.gb .gb-cfg-bike__svg .bk-sh2 { stop-color: var(--bk-sh); stop-opacity: 0; }
.gb .gb-cfg-bike__svg .bk-bw { stroke: #FFFFFF; } .gb .gb-cfg-bike__svg .bk-bb { stroke: #000000; }

/* zichtbaarheid per materiaal (met overgang): bk-x = niet in de lijntekening, bk-ti / bk-cb = alleen dat materiaal */
.gb .gb-cfg-bike__svg .bk-x { opacity: var(--bk-x-o, 1); }
.gb .gb-cfg-bike__svg .bk-ti { opacity: var(--bk-ti-o, 0); }
.gb .gb-cfg-bike__svg .bk-cb { opacity: var(--bk-cb-o, 0); }
.gb .gb-cfg-bike__svg .bk-ln { opacity: var(--bk-ln-o, 0); }
.gb .gb-cfg-bike__svg .bk-nc { opacity: var(--bk-nc-o, 1); }

/* ================= technische laag, maatlijnen en labels ================= */
.gb .gb-cfg-bike__svg .bk-grid { fill: none; stroke: var(--bk-grid); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gb .gb-cfg-bike__svg .bk-ground { fill: none; stroke: var(--bk-ground); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gb .gb-cfg-bike__svg .bk-hatch { fill: none; stroke: var(--bk-hatch); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gb .gb-cfg-bike__svg .bk-cl { fill: none; stroke: var(--bk-cons); stroke-width: .8px; vector-effect: non-scaling-stroke; stroke-dasharray: 10 3 2 3; }
.gb .gb-cfg-bike__svg .bk-cm { fill: none; stroke: var(--bk-cons); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.gb .gb-cfg-bike__svg[data-mat="line"] .bk-cl,
.gb .gb-cfg-bike__svg[data-mat="line"] .bk-cm { stroke-opacity: .5; }
.gb .gb-cfg-bike__svg[data-mat="line"] .bk-sp { stroke-opacity: .55; stroke-width: calc(var(--bk-px, 2) * .7px); }
.gb .gb-cfg-bike__svg[data-mat="line"] .bk-sp2 { stroke-opacity: .3; }
.gb .gb-cfg-bike__svg[data-mat="line"] .bk-kn { stroke-opacity: .7; }
.gb .gb-cfg-bike__svg[data-mat="line"] .bk-spl { stroke-opacity: .5; stroke-width: calc(var(--bk-px, 2) * .7px); }
.gb .gb-cfg-bike__svg .bk-dim { fill: none; stroke: var(--bk-dim-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gb .gb-cfg-bike__svg .bk-ext { stroke: var(--bk-dim); stroke-dasharray: 2 3; }
.gb .gb-cfg-bike__svg .bk-ref { stroke: var(--bk-dim); }
.gb .gb-cfg-bike__svg .bk-dot { fill: var(--bk-dim-strong); }
.gb .gb-cfg-bike__svg .bk-t {
  font-family: var(--gb-mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace);
  font-weight: 400; letter-spacing: .1em; fill: var(--bk-label);   /* de site laadt Plex Mono 400 en 600 */
  paint-order: stroke; stroke: var(--bk-bg); stroke-linejoin: round;
}
.gb .gb-cfg-bike__svg .bk-t2 { fill: var(--bk-label-2); }
.gb .gb-cfg-bike__svg .bk-th { fill: var(--bk-label-s); font-weight: 600; letter-spacing: .12em; }
.gb .gb-cfg-bike__svg .bk-acc { fill: var(--bk-acc); stroke: var(--bk-acc-edge); }
.gb .gb-cfg-bike__svg .bk-fvs { fill: none; stroke: var(--bk-label-2); stroke-linecap: round; stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-fvi { fill: none; stroke: var(--bk-bg); stroke-linecap: round; stroke-linejoin: round; }
.gb .gb-cfg-bike__svg .bk-fvb { fill: var(--bk-bg); stroke: var(--bk-label-2); }

/* ================= overgangen: kleur via CSS, geometrie morpht via JS ================= */
.gb .gb-cfg-bike__svg * { transition: fill .6s ease, stroke .6s ease, stop-color .6s ease, stop-opacity .6s ease; }
.gb .gb-cfg-bike__svg .bk-x,
.gb .gb-cfg-bike__svg .bk-ti,
.gb .gb-cfg-bike__svg .bk-cb,
.gb .gb-cfg-bike__svg .bk-ln,
.gb .gb-cfg-bike__svg .bk-nc { transition: fill .6s ease, stroke .6s ease, opacity .6s ease; }
.gb .gb-cfg-bike.bk-still .gb-cfg-bike__svg * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .gb .gb-cfg-bike__svg * { transition: none !important; }
}

/* beweging (configurator-bike.js → GB.motion.draw): tot de fiets voor het eerst in beeld komt staat alleen het lege tekenvel */
.gb .gb-cfg-bike.bk-wait:is(.m-on *) .gb-cfg-bike__svg { opacity: 0; }

/* ===== pages/configurator.css ===== */
/* Gregor Bikes · pages/configurator.css
   Het configurator-component ({{configurator}}, src/partials/configurator.html) is gescoped op .gb [data-gb-config],
   zodat het ook op /prijzen/ werkt (build.py CSS_SCOPE_EXTRA). Pagina-specifiek: .gb[data-page="configurator"].
   Alleen tokens uit gb.css; geen oranje: het oranje moment is de primaire knop in de samenvatting. */

/* ---------- raster: stappen links, samenvatting rechts (sticky vanaf 1024) ---------- */
.gb [data-gb-config] { position: relative; }
.gb [data-gb-config] .gb-cfg__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .gb [data-gb-config] .gb-cfg__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (min-width: 1280px) {
  .gb [data-gb-config] .gb-cfg__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 5rem; }
}
.gb [data-gb-config] .gb-cfg__steps { display: grid; gap: clamp(2.75rem, 2rem + 2.4vw, 4.25rem); min-width: 0; }

/* ---------- stap ---------- */
.gb [data-gb-config] .gb-cfg__step { display: grid; gap: 1.125rem; padding-top: 1.5rem; border-top: 1px solid var(--gb-rule-strong); }
.gb [data-gb-config] .gb-cfg__stephead { display: flex; align-items: baseline; gap: 1rem; }
.gb [data-gb-config] .gb-cfg__no { font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); font-weight: 600; letter-spacing: .08em; color: var(--gb-fg-3); font-variant-numeric: tabular-nums; }
.gb [data-gb-config] .gb-cfg__title { font-size: var(--gb-fs-h3); line-height: 1.2; letter-spacing: -.012em; }
.gb [data-gb-config] .gb-cfg__hint { font-size: var(--gb-fs-small); color: var(--gb-fg-2); margin-top: -.375rem; max-width: 52ch; }

/* gemeenschappelijke kaart (merk en type) */
.gb [data-gb-config] .gb-cfg__brand,
.gb [data-gb-config] .gb-cfg__type { position: relative; display: block; cursor: pointer; min-width: 0; }
.gb [data-gb-config] .gb-cfg__brand > input,
.gb [data-gb-config] .gb-cfg__type > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gb [data-gb-config] .gb-cfg__card {
  position: relative; display: flex; flex-direction: column; gap: .75rem; height: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.875rem); background-color: var(--gb-surface); color: var(--gb-fg);
  border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius);
  transition: border-color .2s var(--gb-ease), box-shadow .2s var(--gb-ease);
}
.gb [data-gb-config] .gb-cfg__brand:hover .gb-cfg__card,
.gb [data-gb-config] .gb-cfg__type:hover .gb-cfg__card { border-color: var(--gb-fg-3); }
.gb [data-gb-config] input:checked + .gb-cfg__card { border-color: var(--gb-fg); box-shadow: inset 0 0 0 1px var(--gb-fg); }
.gb [data-gb-config] input:focus-visible + .gb-cfg__card { outline: 2px solid var(--gb-focus); outline-offset: 3px; }

/* radio-indicator (geen oranje, gelijk voor beide merken) */
.gb [data-gb-config] .gb-cfg__mark {
  position: absolute; top: clamp(1.25rem, 1rem + 1vw, 1.875rem); right: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--gb-rule-strong); background-color: var(--gb-surface);
  transition: border-color .2s var(--gb-ease), box-shadow .2s var(--gb-ease);
}
.gb [data-gb-config] input:checked + .gb-cfg__card .gb-cfg__mark { border-color: var(--gb-fg); box-shadow: inset 0 0 0 5px var(--gb-surface), inset 0 0 0 11px var(--gb-fg); }

/* ---------- stap 1 · twee gelijkwaardige merkkaarten ---------- */
.gb [data-gb-config] .gb-cfg__brands { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .gb [data-gb-config] .gb-cfg__brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.gb [data-gb-config] .gb-cfg__brand .gb-kicker { padding-right: 2.25rem; align-self: start; }
.gb [data-gb-config] .gb-cfg__brandname { display: block; margin-top: .25rem; font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.gb [data-gb-config] .gb-cfg__brandline { display: block; font-size: var(--gb-fs-small); line-height: 1.55; color: var(--gb-fg-2); max-width: 36ch; }
.gb [data-gb-config] .gb-cfg__from {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gb-rule);
  font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); color: var(--gb-fg-2); font-variant-numeric: tabular-nums;
}
.gb [data-gb-config] .gb-cfg__from b { color: var(--gb-fg); font-weight: 600; }
.gb [data-gb-config] .gb-cfg__brandline + .gb-cfg__from { margin-top: auto; }
@media (min-width: 600px) {
  .gb [data-gb-config] .gb-cfg__brandline { min-height: 4.65em; }
  @supports (grid-template-rows: subgrid) {
    .gb [data-gb-config] .gb-cfg__brands { grid-template-rows: repeat(4, auto); row-gap: .75rem; }
    .gb [data-gb-config] .gb-cfg__brand { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .gb [data-gb-config] .gb-cfg__brand > .gb-cfg__card { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
    .gb [data-gb-config] .gb-cfg__brandline { min-height: 0; }
    .gb [data-gb-config] .gb-cfg__brandname { margin-top: 0; align-self: end; }
  }
}

/* ---------- stap 2 · type met beeld ---------- */
.gb [data-gb-config] .gb-cfg__types { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .gb [data-gb-config] .gb-cfg__types { gap: 1rem; } }
.gb [data-gb-config] .gb-cfg__card--media { padding: 0; gap: 0; overflow: hidden; }
.gb [data-gb-config] .gb-cfg__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--gb-graphite); }
.gb [data-gb-config] .gb-cfg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--gb-ease); }
.gb [data-gb-config] .gb-cfg__type:hover .gb-cfg__media img { transform: scale(1.03); }
.gb [data-gb-config] .gb-cfg__typebody { position: relative; display: flex; flex-direction: column; gap: .375rem; flex: 1; padding: 1rem 1rem 1.125rem; }
@media (min-width: 600px) { .gb [data-gb-config] .gb-cfg__typebody { padding: 1.25rem 1.5rem 1.5rem; } }
.gb [data-gb-config] .gb-cfg__typebody .gb-cfg__mark { top: 1rem; right: 1rem; }
@media (min-width: 600px) { .gb [data-gb-config] .gb-cfg__typebody .gb-cfg__mark { top: 1.25rem; right: 1.5rem; } }
.gb [data-gb-config] .gb-cfg__typename { display: block; padding-right: 2rem; font-size: var(--gb-fs-h3); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
.gb [data-gb-config] .gb-cfg__typeline { display: block; font-size: var(--gb-fs-small); line-height: 1.5; color: var(--gb-fg-2); }
.gb [data-gb-config] .gb-cfg__typemeta { display: block; font-family: var(--gb-mono); font-size: var(--gb-fs-xs); line-height: 1.5; letter-spacing: .02em; color: var(--gb-fg-3); }
.gb [data-gb-config] .gb-cfg__typemeta .gb-fn { color: var(--gb-fg-3); }
.gb [data-gb-config] .gb-cfg__typeprice { display: block; font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); color: var(--gb-fg-2); font-variant-numeric: tabular-nums; }
.gb [data-gb-config] .gb-cfg__typeprices { display: grid; gap: .125rem; margin-top: auto; padding-top: .75rem; }
.gb [data-gb-config][data-merk="none"] .gb-cfg__typeprices { display: none; }
.gb [data-gb-config] .gb-cfg__typeprice b { color: var(--gb-fg); font-weight: 600; }
.gb [data-gb-config] .gb-cfg__pl { color: var(--gb-fg-3); }
@media (max-width: 599.98px) {
  .gb [data-gb-config] .gb-cfg__typeline, .gb [data-gb-config] .gb-cfg__typemeta { display: none; }
  .gb [data-gb-config] .gb-cfg__typeprices { padding-top: .25rem; }
  .gb [data-gb-config] .gb-cfg__typeprice { font-size: var(--gb-fs-xs); }
  .gb [data-gb-config] .gb-cfg__pl { display: block; }
}

/* per merk tonen (zonder JS of zonder keuze: allebei) */
.gb [data-gb-config][data-merk="kings-lynn"] [data-only="gregor"],
.gb [data-gb-config][data-merk="gregor"] [data-only="kings-lynn"] { display: none; }
.gb [data-gb-config][data-merk="gregor"] .gb-cfg__pl,
.gb [data-gb-config][data-merk="kings-lynn"] .gb-cfg__pl { display: none; }
/* merkbewaking (besluit 2, nooit samengevoegd): de rijfoto's tonen Gregor-tenue, dus niet in de King’s Lynn-route */
.gb [data-gb-config][data-merk="kings-lynn"] .gb-cfg__media { display: none; }

/* mountainbike-notitie */
.gb [data-gb-config] .gb-cfg__mtb {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
  padding: 1rem 1.25rem; border-left: 2px solid var(--gb-rule-strong); background-color: var(--gb-tint);
  font-size: var(--gb-fs-small); color: var(--gb-fg-2); border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
}
.gb [data-gb-config] .gb-cfg__mtb > span { flex: 1 1 28rem; }
.gb [data-gb-config] .gb-cfg__mtb b { color: var(--gb-fg); }
.gb [data-gb-config] .gb-cfg__mtb.is-flag { border-left-color: var(--gb-fg); }

/* ---------- stap 3 en 4 · keuzes (gb-choice uit gb.css) ---------- */
.gb [data-gb-config] .gb-cfg__group { display: grid; gap: .625rem; }
.gb [data-gb-config] .gb-cfg__grouplabel { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb [data-gb-config].is-live .gb-cfg__grouplabel { display: none; }
.gb [data-gb-config] .gb-cfg__group + .gb-cfg__group { margin-top: 1rem; }
.gb [data-gb-config] .gb-choice { display: flex; }
.gb [data-gb-config] .gb-choice__box { flex: 1 1 auto; min-width: 0; min-height: 60px; }
.gb [data-gb-config] .gb-choice__name { font-size: var(--gb-fs-body); }
.gb [data-gb-config] .gb-choice__price { color: var(--gb-fg); }
.gb [data-gb-config] .gb-choice input:checked + .gb-choice__box .gb-choice__price { font-weight: 600; }
.gb [data-gb-config] .gb-cfg__other .gb-choice__box { border-style: dashed; }
.gb [data-gb-config] .gb-cfg__other input:checked + .gb-choice__box { border-style: solid; }
.gb [data-gb-config] .gb-cfg__other .gb-choice__price { color: var(--gb-fg-3); }
@media (min-width: 1280px) {
  .gb [data-gb-config] .gb-cfg__group .gb-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb [data-gb-config] .gb-cfg__group .gb-choice:nth-child(odd):last-child { grid-column: 1 / -1; }
}

.gb [data-gb-config] .gb-cfg__notes { margin-top: -.5rem; }

/* ---------- samenvatting ---------- */
.gb [data-gb-config] .gb-cfg__summary { gap: .875rem; }
@media (min-width: 1024px) { .gb [data-gb-config] .gb-cfg__summary { padding: clamp(1.5rem, 1rem + 1vw, 1.875rem); } }
@media (min-width: 1024px) {
  .gb [data-gb-config] .gb-cfg__summary { max-height: calc(100vh - var(--gb-header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.gb [data-gb-config] .gb-cfg__sumhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gb [data-gb-config] .gb-cfg__share {
  font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-2);
  text-decoration: underline; text-decoration-color: var(--gb-rule-strong); text-underline-offset: .35em; padding-block: .5rem;
}
.gb [data-gb-config] .gb-cfg__share:hover, .gb [data-gb-config] .gb-cfg__share:focus-visible { color: var(--gb-fg); text-decoration-color: currentColor; }
.gb [data-gb-config] .gb-cfg__sumname { display: grid; gap: .375rem; }
.gb [data-gb-config] .gb-cfg__name { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.08; }
.gb [data-gb-config] .gb-cfg__base { font-family: var(--gb-mono); font-size: var(--gb-fs-xs); line-height: 1.55; color: var(--gb-fg-3); }
.gb [data-gb-config] .gb-cfg__spec .gb-spec__row { align-items: baseline; padding-block: .5625rem; }
.gb [data-gb-config] .gb-cfg__spec dt { white-space: nowrap; }
.gb [data-gb-config] .gb-cfg__spec dd { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .125rem .625rem; min-width: 0; }
.gb [data-gb-config] .gb-cfg__delta { font-family: var(--gb-mono); font-size: var(--gb-fs-xs); font-weight: 400; color: var(--gb-fg-3); font-variant-numeric: tabular-nums; }
/* de regel die verandert licht 600 ms op: een titanium waas achter de tekst (alleen opacity; configurator.js zet .is-flash) */
.gb [data-gb-config] .gb-cfg__spec .gb-spec__row { position: relative; isolation: isolate; }
.gb [data-gb-config] .gb-cfg__spec .gb-spec__row::after { content: ""; position: absolute; inset: 0 -.625rem; z-index: -1; border-radius: 2px; background-color: var(--gb-titanium); opacity: 0; pointer-events: none; }
.gb [data-gb-config] .gb-cfg__spec .gb-spec__row.is-flash::after { animation: gbCfgFlash .6s var(--m-ease-out, ease-out); }
.gb [data-gb-config] .gb-cfg__clear {
  display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: -.375rem -.375rem -.375rem 0;
  border-radius: 50%; color: var(--gb-fg-3); transition: color .2s var(--gb-ease), background-color .2s var(--gb-ease);
}
.gb [data-gb-config] .gb-cfg__clear:hover, .gb [data-gb-config] .gb-cfg__clear:focus-visible { color: var(--gb-fg); background-color: var(--gb-tint); }
.gb [data-gb-config] .gb-cfg__clear .gb-i { width: .875rem; height: .875rem; }
.gb [data-gb-config] .gb-cfg__summary:focus { outline: none; }
@keyframes gbCfgFlash { 0% { opacity: 0; } 22% { opacity: .16; } 100% { opacity: 0; } }

.gb [data-gb-config] .gb-cfg__total { align-items: flex-end; flex-wrap: wrap; padding-top: .375rem; border-top: 0; }
.gb [data-gb-config] .gb-cfg__totallabel { display: grid; gap: .375rem; padding-bottom: .375rem; }
.gb [data-gb-config] .gb-cfg__total .gb-price__value { font-size: clamp(2.5rem, 2.05rem + 1.8vw, 3.5rem); white-space: nowrap; }
.gb [data-gb-config] .gb-cfg__total.is-offerte .gb-price__value { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -.02em; }
.gb [data-gb-config] .gb-cfg__pulse {
  min-height: 1.2em; font-family: var(--gb-mono); font-size: var(--gb-fs-mono-l); color: var(--gb-fg-2); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(4px); transition: opacity .3s var(--gb-ease), transform .3s var(--gb-ease);
}
.gb [data-gb-config] .gb-cfg__pulse.is-on { opacity: 1; transform: none; }
.gb [data-gb-config] .gb-cfg__dual { display: grid; grid-template-columns: repeat(2, auto); gap: .25rem 1.75rem; justify-content: end; text-align: right; }
.gb [data-gb-config] .gb-cfg__dual > span { display: grid; gap: .25rem; }
.gb [data-gb-config] .gb-cfg__duallabel { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb [data-gb-config] .gb-cfg__dual b { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }

.gb [data-gb-config] .gb-cfg__incl { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--gb-fs-small); color: var(--gb-fg); margin-top: -.25rem; }
.gb [data-gb-config] .gb-cfg__std { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; padding-block: .875rem; border-block: 1px solid var(--gb-rule); font-size: var(--gb-fs-small); line-height: 1.4; color: var(--gb-fg-2); }
.gb [data-gb-config] .gb-cfg__std li { display: flex; align-items: flex-start; gap: .5rem; }
.gb [data-gb-config] .gb-cfg__std .gb-i, .gb [data-gb-config] .gb-cfg__incl .gb-i { width: 1rem; height: 1rem; flex: none; margin-top: .1em; color: var(--gb-fg); }
.gb [data-gb-config] .gb-cfg__cta { display: grid; gap: .625rem; }
.gb [data-gb-config] .gb-cfg__phone { font-family: var(--gb-mono); font-size: var(--gb-fs-xs); color: var(--gb-fg-3); }
.gb [data-gb-config] .gb-cfg__phone a { color: var(--gb-fg); text-decoration: underline; text-decoration-color: var(--gb-rule-strong); text-underline-offset: .3em; white-space: nowrap; }

/* ---------- onderbalk (mobiel en tablet) · zelfde vorm als de globale .gb-sticky (die klasse draagt hij ook) ---------- */
.gb [data-gb-config] .gb-cfg__bar { display: none; }
@media (max-width: 1023.98px) {
  .gb [data-gb-config].is-live .gb-cfg__bar {
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 990;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .5rem .5rem 1rem;
    background-color: rgba(10, 9, 8, .94); color: #FFFFFF; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    --gb-fg: #FFFFFF; --gb-fg-2: rgba(255,255,255,.76); --gb-fg-3: rgba(255,255,255,.62); --gb-focus: var(--gb-orange);
    transform: translateY(calc(100% + 2rem)); transition: transform .4s var(--gb-ease);
  }
  .gb [data-gb-config].is-live .gb-cfg__bar.is-visible { transform: none; }
}
.gb [data-gb-config] .gb-cfg__barinfo { display: grid; gap: .125rem; min-width: 0; }
.gb [data-gb-config] .gb-cfg__barname { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb [data-gb-config] .gb-cfg__barprice { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.gb [data-gb-config] .gb-cfg__bar .gb-btn { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .gb [data-gb-config] .gb-cfg__media img, .gb [data-gb-config] .gb-cfg__pulse, .gb [data-gb-config] .gb-cfg__bar { transition: none; }
  .gb [data-gb-config] .gb-cfg__spec .gb-spec__row.is-flash::after { animation: none; }
}

/* ---------- pagina /configurator/ ---------- */
.gb[data-page="configurator"] .cfg-hero-steps { border-top: 0; }
.gb[data-page="configurator"] .cfg-hero-steps dt { min-width: 7.5rem; }
.gb[data-page="configurator"] .cfg-updated { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.gb[data-page="configurator"] .cfg-fit-actions { margin-top: .5rem; }
.gb[data-page="configurator"] .cfg-doors { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* ===== getekende fiets (src/js/pages/configurator-bike.js) ===== */
/* altijd groot in de stappenkolom, op een carbon paneel tussen stap 2 (type) en stap 3 (groepset);
   in de sticky samenvatting alleen op hoge schermen (anders past de samenvatting niet meer in beeld) */
.gb [data-gb-config] .gb-cfg__bike--inline { background-color: var(--gb-carbon); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: clamp(.75rem, .5rem + 1.5vw, 1.75rem); margin-block: 0; }
.gb [data-gb-config] .gb-cfg__bike--sum { display: none; }
@media (min-width: 1024px) and (min-height: 1050px) {
  .gb [data-gb-config] .gb-cfg__bike--sum { display: block; margin-block: .25rem .5rem; }
}

/* ===== beweging (DESIGN.md §11, MOTION-BRIEF §8 G3) =====
   Onderdeel (ook op /prijzen/): stappen met maatlijn (data-m-rule), teller op de bedragen die de bezoeker verandert
   (data-m-odo: dubbele prijs en onderbalk), regel licht op (hierboven), keuze-indicator klikt in (lock-ease),
   de getekende fiets tekent zichzelf één keer per sessie en na de merkkeuze volgt een lock-on op
   "Plan je bike-fit met deze configuratie" (beide in configurator-bike.js, via GB.motion). Alles alleen onder .m-on. */
/* alleen op de keuze die de bezoeker zelf maakt (focus), niet op de standaardkeuzes bij het laden */
.gb [data-gb-config]:is(.m-on *) input:checked:focus + .gb-cfg__card .gb-cfg__mark { animation: cfg-pick .5s var(--m-ease-lock) both; }
@keyframes cfg-pick { from { transform: scale(.6); } }
/* letters in de tekening komen na het tekenen zacht terug (GB.motion.draw verbergt ze tijdens het tekenen) */
.gb [data-gb-config] .gb-cfg__bike:not(.m-bp--prep) .gb-cfg-bike__svg text { transition: fill .6s ease, stroke .6s ease, opacity .45s var(--m-ease-out, ease-out); }

/* /configurator/ · hero: de vier stappen worden bij het laden opgemeten (01 → 04), daarna lock-on op "Plan je bike-fit".
   Alleen CSS (deze pagina heeft geen eigen bewegings-JS): een animatie die vanzelf in de eindstand eindigt, achter .gb-js;
   zonder JS, bij reduced motion en bij terug/vooruit (m-static) staat alles direct. */
.gb[data-page="configurator"] .cfg-hero-steps .gb-spec__row { position: relative; }
.gb[data-page="configurator"] .cfg-hero-steps .gb-spec__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; box-sizing: border-box; border-inline: 1px solid; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; opacity: .5; transform-origin: 0 50%;
}
.gb[data-page="configurator"] .cfg-hero-steps .gb-spec__row:nth-child(2) { --m-i: 1; }
.gb[data-page="configurator"] .cfg-hero-steps .gb-spec__row:nth-child(3) { --m-i: 2; }
.gb[data-page="configurator"] .cfg-hero-steps .gb-spec__row:nth-child(4) { --m-i: 3; }
@media (prefers-reduced-motion: no-preference) {
  .gb[data-page="configurator"]:is(.gb-js:not(.m-static) *) .cfg-hero-steps .gb-spec__row::after {
    animation: cfg-measure .6s var(--m-ease-draw) calc((250ms + var(--m-i, 0) * 160ms) * var(--m-k, 1)) backwards;
  }
  .gb[data-page="configurator"]:is(.gb-js:not(.m-static) *) .gb-hero .gb-btn--primary::before {
    animation: m-lock 1.8s calc(1250ms * var(--m-k, 1)) backwards;
  }
}
@keyframes cfg-measure { from { transform: scaleX(0); } }

/* /configurator/ · Bike Fit First: scanlijn over de houdingsanalyse (data-m-scan), daarna lock-on op "Plan je bike-fit".
   Alleen waar foto en knop naast elkaar staan; gestapeld staat de knop dan nog buiten beeld. */
@media (min-width: 1024px) {
  .gb[data-page="configurator"]:is(.m-on *) .cfg-fit:has([data-m-scan].m-in) .gb-split__body .gb-btn--primary::before {
    animation: m-lock 1.8s calc(1500ms * var(--m-k, 1)) backwards;
  }
}

/* ===== pages/contact.css ===== */
/* contact · uitzonderingen op gb.css (alles gescoped op de pagina) */

/* contactgegevens in de hero: wat lucht, niet breder dan de lead; links onderstreept zodat ze als link lezen */
.gb[data-page="contact"] .contact-hero-spec { margin-top: 1.75rem; max-width: 30rem; }
.gb[data-page="contact"] .contact-hero-spec a,
.gb[data-page="contact"] .contact-aside__spec a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* formulierkolom: het formulier begint direct onder de kop */
.gb[data-page="contact"] .contact-form .gb-head { margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
@media (min-width: 1024px) {
  .gb[data-page="contact"] .contact-aside { position: sticky; top: calc(var(--gb-header-h) + 1.5rem); align-self: start; }
}

/* Elementor-select: in de preview ontbreekt Elementors eigen css; live doet die hetzelfde (pijl rechts, geen systeempijl) */
.gb[data-page="contact"] .elementor-select-wrapper { position: relative; }
.gb[data-page="contact"] .elementor-select-wrapper select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; }
.gb[data-page="contact"] .elementor-select-wrapper .select-caret-down-wrapper {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; line-height: 1; z-index: 1;
}
.gb[data-page="contact"] .elementor-select-wrapper .select-caret-down-wrapper svg { width: 18px; height: 18px; }

/* score onder het adres: compact, met ruimte tot de knoppen */
.gb[data-page="contact"] .contact-rating { justify-self: start; }

/* hero-beeld onder 1024 px: rechts uitlijnen, zodat fiets, bureau en het Gregor-logo aan de muur in beeld blijven */
@media (max-width: 1023px) {
  .gb[data-page="contact"] .gb-hero__media img { object-position: right center; }
}

/* statische kaart is een link naar het Bedrijfsprofiel: geen onderstreping, focusring binnen het vlak */
.gb[data-page="contact"] a.gb-route__map { text-decoration: none; }
.gb[data-page="contact"] a.gb-route__map:focus-visible { outline-offset: -4px; }
.gb[data-page="contact"] a.gb-route__map:hover .gb-route__label { background: var(--gb-carbon); }

/* ===== pages/faq.css ===== */
/* faq · uitzonderingen op gb.css (alles gescoped op .gb[data-page="faq"]) */

/* hero: de kernantwoorden rechts iets compacter */
.gb[data-page="faq"] .gb-hero__aside .gb-spec dd { white-space: nowrap; }

/* vragen: links een vaste kolom met inhoudsopgave, rechts de groepen */
.gb[data-page="faq"] .faq-layout { align-items: start; }
.gb[data-page="faq"] .faq-aside { display: grid; gap: 1.5rem; }
.gb[data-page="faq"] .faq-aside > .gb-kicker + .faq-toc { margin-top: -.5rem; }
.gb[data-page="faq"] .faq-toc { gap: 0; padding: .25rem 1.25rem; background-color: var(--gb-surface); }
.gb[data-page="faq"] .faq-toc a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; color: var(--gb-fg); font-size: var(--gb-fs-small); font-weight: 500; }
.gb[data-page="faq"] .faq-toc a + a { border-top: 1px solid var(--gb-rule); }
.gb[data-page="faq"] .faq-toc__n { font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; color: var(--gb-fg-3); }
.gb[data-page="faq"] .faq-aside__media { display: none; }
.gb[data-page="faq"] .faq-aside__contact { padding-top: 1.25rem; border-top: 1px solid var(--gb-rule); }

/* mobiel en tablet: de kolom staat boven de vragen, met meer lucht ertussen */
@media (max-width: 1023px) {
  .gb[data-page="faq"] .faq-groups { margin-top: 1.5rem; }
  .gb[data-page="faq"] .faq-toc { max-width: 34rem; }
}
@media (min-width: 1024px) {
  .gb[data-page="faq"] .faq-aside { position: sticky; top: calc(var(--gb-header-h) + 2rem); }
}
/* het beeld alleen als de kolom met beeld in het scherm past */
@media (min-width: 1024px) and (min-height: 820px) {
  .gb[data-page="faq"] .faq-aside__media { display: grid; }
}

/* antwoorden: lijsten en links in de antwoorden */
.gb[data-page="faq"] .gb-faq__a .gb-bullets { margin-top: .75rem; }
.gb[data-page="faq"] .gb-faq__a .faq-more { margin-top: 1rem; }
.gb[data-page="faq"] .gb-faq__a .faq-more .gb-link { text-decoration-color: var(--gb-rule-strong); }
.gb[data-page="faq"] .gb-faq__a .faq-src { color: var(--gb-fg-3); }
.gb[data-page="faq"] .gb-faq__a .faq-src a { color: var(--gb-fg-2); }

/* uit de praktijk: quote iets kleiner dan de standaard, naast een liggend beeld */
.gb[data-page="faq"] .faq-proof__quote { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); }

/* cta-band: op desktop vult het beeld alleen de rechterkant, zodat de fiets naast de tekst staat */
@media (min-width: 1024px) {
  .gb[data-page="faq"] .faq-cta .gb-ctaband__media { left: 30%; }
  .gb[data-page="faq"] .faq-cta .gb-ctaband__media::after { background: linear-gradient(90deg, rgba(10,9,8,1) 0%, rgba(10,9,8,.72) 30%, rgba(10,9,8,.3) 65%, rgba(10,9,8,.2) 100%); }
}

/* ===== pages/frames.css ===== */
/* frames · /frames/ · paginaspecifieke uitzonderingen (alle selectors onder .gb[data-page="frames"]) */

/* Hero: prijsregel. Items breken nooit middenin; waar de regel niet past (tot 659 px en de smalle
   split-hero 1024-1439) onder elkaar, zonder losse scheidingspunt aan het begin van een regel */
.gb[data-page="frames"] .frames-hero-facts li { white-space: nowrap; }
@media (max-width: 659px), (min-width: 1024px) and (max-width: 1439px) {
  .gb[data-page="frames"] .frames-hero-facts { display: grid; gap: .25rem; }
  .gb[data-page="frames"] .frames-hero-facts li { margin-left: 0; padding-right: 0; }
  .gb[data-page="frames"] .frames-hero-facts li::before { content: none; }
}

/* Vergelijkingstabel: op mobiel per model een blok (naam + prijs, daaronder discipline en voor wie) */
.gb[data-page="frames"] .frames-compare tbody th a { color: var(--gb-fg); text-decoration: underline; text-decoration-color: var(--gb-rule-strong); text-underline-offset: .25em; }
.gb[data-page="frames"] .frames-compare tbody th a:hover { text-decoration-color: currentColor; }
@media (max-width: 599px) {
  .gb[data-page="frames"] .frames-compare { display: flex; flex-direction: column; }
  .gb[data-page="frames"] .frames-compare tbody,
  .gb[data-page="frames"] .frames-compare caption { display: block; }
  .gb[data-page="frames"] .frames-compare caption { order: 2; }
  .gb[data-page="frames"] .frames-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gb[data-page="frames"] .frames-compare tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .25rem; padding: .875rem 1rem; border-bottom: 1px solid var(--gb-rule); }
  .gb[data-page="frames"] .frames-compare tbody tr:last-child { border-bottom: 0; }
  .gb[data-page="frames"] .frames-compare tbody th,
  .gb[data-page="frames"] .frames-compare tbody td { padding: 0; border: 0; }
  .gb[data-page="frames"] .frames-compare tbody th { grid-column: 1; grid-row: 1; }
  .gb[data-page="frames"] .frames-compare tbody td.gb-num { grid-column: 2; grid-row: 1; align-self: baseline; }
  .gb[data-page="frames"] .frames-compare tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-fg-3); }
  .gb[data-page="frames"] .frames-compare tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; color: var(--gb-fg-2); }
}

/* Groepskop: lucht tussen tekst en link aan de rechterkant (mobiel en tablet) */
.gb[data-page="frames"] .frames-group .gb-head__side > * + * { margin-top: 1rem; }
@media (min-width: 1024px) { .gb[data-page="frames"] .frames-group .gb-head__side > * + * { margin-top: 0; } }

/* Modelrij: de vraag-link onder de knoppen */
.gb[data-page="frames"] .frames-ask { margin-top: 1.25rem; }

/* Lange quote (John): kleiner dan de standaard gb-quote */
.gb[data-page="frames"] .frames-quote .gb-quote__text { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.4; text-wrap: pretty; }

/* Maatwerk: beeld vult op desktop de hoogte van de tekstkolom */
@media (min-width: 1024px) {
  .gb[data-page="frames"] .frames-craft { align-items: stretch; }
  .gb[data-page="frames"] .frames-craft .gb-figure,
  .gb[data-page="frames"] .frames-craft .gb-figure__media { height: 100%; }
  .gb[data-page="frames"] .frames-craft .gb-figure__media { aspect-ratio: auto; min-height: 32rem; }
}

/* Modelrij gespiegeld: ook dan krijgt het beeld de brede kolom (7/12) */
@media (min-width: 1024px) {
  .gb[data-page="frames"] .gb-modelrow--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Sprongmenu: op smalle schermen laten afbreken in plaats van half afgesneden pillen */
@media (max-width: 599px) {
  .gb[data-page="frames"] .frames-jump { flex-wrap: wrap; overflow: visible; }
}

/* ===== beweging (DESIGN.md §11, MOTION-BRIEF §8 G3) =====
   Haken: data-m-rule op elke modelrij (maatlijn op de bovenrand), data-m-cross op de framefoto (vizier),
   data-m-lock="view" op de "Plan je bike-fit" per rij (gb.js: knop in beeld → m-in op de knop → lock-on). Hero: alleen CSS
   (animaties die vanzelf in de eindstand eindigen). Zonder JS, bij reduced motion, bij terug/vooruit (m-static) en zonder
   :has() staat alles getekend. Geen eigen JS meer (frames.js is opgeheven in de eind-QA). */

/* hero: een maatlijn boven de prijsregel tekent bij het laden, daarna lock-on op "Plan je bike-fit" */
.gb[data-page="frames"] .frames-hero-measure { position: relative; }
.gb[data-page="frames"] .frames-hero-measure::before,
.gb[data-page="frames"] .gb-modelrow .gb-price__value::after {
  content: ""; position: absolute; height: 7px; box-sizing: border-box; border-inline: 1px solid; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}
.gb[data-page="frames"] .frames-hero-measure::before { left: 0; right: 0; top: -.875rem; opacity: .35; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .gb[data-page="frames"]:is(.gb-js:not(.m-static) *) .frames-hero-measure::before {
    animation: frames-measure .8s var(--m-ease-draw) calc(250ms * var(--m-k, 1)) backwards;
  }
  .gb[data-page="frames"]:is(.gb-js:not(.m-static) *) .gb-hero .gb-btn--primary::before {
    animation: m-lock 1.8s calc(1150ms * var(--m-k, 1)) backwards;
  }
}
@keyframes frames-measure { from { transform: scaleX(0); } }

/* modelrij: maatstreep onder de prijs (tekent als de knoppen in beeld komen), daarna lock-on op de eigen "Plan je bike-fit" */
.gb[data-page="frames"] .gb-modelrow .gb-price__value { position: relative; justify-self: start; margin-bottom: .375rem; }
.gb[data-page="frames"] .gb-modelrow .gb-price__value::after { left: 0; right: 0; bottom: -6px; opacity: .5; transform-origin: 0 50%; }
.gb[data-page="frames"]:is(.m-on *) .gb-modelrow .gb-price__value::after { transition: transform .8s var(--m-ease-draw) .2s; }
.gb[data-page="frames"]:is(.m-on *) .gb-modelrow:not(:has(.m-in[data-m-lock])) .gb-price__value::after { transform: scaleX(0); }

/* vizier op maat (C9): wie op het frame mikt, ziet de knop van die rij al vastgezet; de modelnaam schuift 4 px */
@media (hover: hover) and (pointer: fine) {
  .gb[data-page="frames"] .gb-modelrow__name { transition: transform var(--m-t-hover) var(--m-ease-settle); }
  .gb[data-page="frames"] .gb-modelrow:has(.m-cross.is-on) .gb-modelrow__name { transform: translateX(4px); }
  .gb[data-page="frames"] .gb-modelrow:has(.m-cross.is-on) [data-m-lock]::before { opacity: .9; transform: none; }
}

/* sprongmenu: maatlijn onder het label bij hover en focus (alleen CSS) */
.gb[data-page="frames"] .frames-jump a { position: relative; }
.gb[data-page="frames"] .frames-jump a::after {
  content: ""; position: absolute; left: .875rem; right: .875rem; bottom: 5px; height: 5px; box-sizing: border-box; border-inline: 1px solid;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; pointer-events: none; opacity: .8;
  transform: scaleX(0); transition: transform var(--m-t-hover) var(--m-ease-settle);
}
.gb[data-page="frames"] .frames-jump a:hover::after, .gb[data-page="frames"] .frames-jump a:focus-visible::after { transform: none; }

/* ===== pages/home.css ===== */
/* home · uitzonderingen op gb.css (alles gescoped op .gb[data-page="home"]) */

/* hero (C5): vanaf 1024 px staat de fiets naast de kop. De foto blijft object-fit in de vaste hero-doos (geen verschuiving
   bij de font-swap) en schuift met een vaste transform (vw) naar rechts en omlaag: de fiets eindigt op de rechterkantlijn van
   de inhoud, staat naast lead en knoppen en de grondlijn ligt ±150 px boven de onderrand. Links en boven loopt de foto zacht
   weg in carbon. De schets (.m-trace) krijgt dezelfde transform en uitsnede. LCP-beeld: nooit verborgen, ingefade of gezoomd. */
@media (min-width: 1024px) {
  .gb[data-page="home"] .home-hero { --home-r: max(var(--gb-gutter), (100vw - var(--gb-max-wide)) / 2); --home-shift: calc(25vw - var(--home-r)); --home-dy: calc(12.87vw - 150px); }
  .gb[data-page="home"] .home-hero .gb-hero__media img, .gb[data-page="home"] .home-hero .m-trace { transform: translate(var(--home-shift), var(--home-dy)); }
  .gb[data-page="home"] .home-hero .gb-hero__media img {
    object-position: 100% 100% !important;
    -webkit-mask-image: linear-gradient(90deg, #0000 8%, #000 30%), linear-gradient(180deg, #0000, #000 18%); mask-image: linear-gradient(90deg, #0000 8%, #000 30%), linear-gradient(180deg, #0000, #000 18%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .gb[data-page="home"] .home-hero .gb-hero__media::after { background: linear-gradient(90deg, rgba(10,9,8,.86) 0, rgba(10,9,8,.6) calc(55vw - var(--home-r) - 14rem), rgba(10,9,8,0) calc(55vw - var(--home-r))), linear-gradient(0deg, #0A0908 0%, rgba(10,9,8,0) 34%), linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,0) 22%); }
  .gb[data-page="home"] .home-hero .gb-hero__content { max-width: min(54rem, calc(66vw - var(--home-r))); }
  .gb[data-page="home"] .home-hero .gb-hero__lead { max-width: min(30em, calc(52vw - var(--home-r) - 2rem)); }
  .gb[data-page="home"] .home-hero .gb-hero__title { font-size: clamp(3rem, .2rem + 5.4vw, 5.5rem); }   /* iets kleiner tot 1600: kop blijft naast het zadel */
}
/* 1024 tot 1199: de hero is hier hoger dan breed genoeg voor cover; de foto past op breedte (contain) en loopt ook boven
   zacht weg, zodat de fiets niet groter wordt dan de ruimte naast de tekst */
@media (min-width: 1024px) and (max-width: 1199px) {
  .gb[data-page="home"] .home-hero .gb-hero__media img {
    object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, #0000 8%, #000 30%), linear-gradient(180deg, #0000 calc(100% - 66vw), #000 calc(100% - 52vw));
    mask-image: linear-gradient(90deg, #0000 8%, #000 30%), linear-gradient(180deg, #0000 calc(100% - 66vw), #000 calc(100% - 52vw));
  }
}

/* manifest onder de answer-first alinea */
.gb[data-page="home"] .home-manifest { margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* scheidingslijnen (manifest, zekerheid, feiten) zijn maatlijnen (C2, data-m-rule): de haarlijn zelf wijkt, de maatlijn met
   eindstreepjes tekent vanuit het midden zodra het blok in beeld komt. Zonder JS en bij reduced motion staat hij er gewoon. */
.gb[data-page="home"] .gb-rule-top[data-m-rule] { border-top-color: transparent; }
.gb[data-page="home"] .gb-rule-top[data-m-rule]::before { opacity: .32; }

/* zekerheid en feiten: haarlijn bovenaan, iets meer lucht */
.gb[data-page="home"] .home-assure,
.gb[data-page="home"] .home-facts { padding-top: clamp(2.5rem, 1.75rem + 3vw, 5rem); }

/* modellen per discipline: drie kaarten op zwart (zelfde taal als .gb-model, met thematokens) */
.gb[data-page="home"] .home-disc { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .gb[data-page="home"] .home-disc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gb[data-page="home"] .home-disc__card { display: flex; flex-direction: column; background-color: var(--gb-black); color: var(--gb-fg); border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); overflow: hidden; }
.gb[data-page="home"] .home-disc__media { aspect-ratio: 16 / 10; background: var(--gb-black); overflow: hidden; }
.gb[data-page="home"] .home-disc__media img { width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {   /* kaart: frame 1.025 (DESIGN §11.3 kaarten); het vizier ligt erover */
  .gb[data-page="home"] .home-disc__media img { transition: transform var(--m-t-reveal) var(--m-ease-settle); }
  .gb[data-page="home"] .home-disc__card:hover .home-disc__media img { transform: scale(1.025); }
}
@media (min-width: 1024px) { .gb[data-page="home"] .home-disc__media { aspect-ratio: 4 / 3; } }
.gb[data-page="home"] .home-disc__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 0 clamp(1rem, .75rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.gb[data-page="home"] .home-disc__title { font-size: var(--gb-fs-h3); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
.gb[data-page="home"] .home-disc__card .gb-model__price { margin-top: .5rem; }
.gb[data-page="home"] .home-disc__card .gb-model__price b { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -.02em; margin-top: .125rem; }
.gb[data-page="home"] .home-disc__base { font-size: var(--gb-fs-xs); line-height: 1.5; color: var(--gb-fg-3); }
.gb[data-page="home"] .home-disc__list { margin-top: 1rem; border-top: 1px solid var(--gb-rule); }
.gb[data-page="home"] .home-disc__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .25rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--gb-rule); color: var(--gb-fg); text-decoration: none; }
.gb[data-page="home"] .home-disc__name { grid-column: 1; font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.gb[data-page="home"] .home-disc__desc { grid-column: 1; font-size: var(--gb-fs-xs); line-height: 1.5; color: var(--gb-fg-2); }
.gb[data-page="home"] .home-disc__item .gb-i { grid-column: 2; grid-row: 1 / span 2; width: 1.125rem; height: 1.125rem; color: var(--gb-fg-3); transition: transform .25s var(--gb-ease), color .2s; }
.gb[data-page="home"] .home-disc__item:hover .gb-i { transform: translateX(3px); color: var(--gb-fg); }
.gb[data-page="home"] .home-disc__name { transition: transform var(--m-t-hover) var(--m-ease-settle); }
.gb[data-page="home"] .home-disc__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gb-fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--m-ease-settle); }
@media (hover: hover) { .gb[data-page="home"] .home-disc__item:hover::after { transform: none; } .gb[data-page="home"] .home-disc__item:hover .home-disc__name { transform: translateX(4px); } }
.gb[data-page="home"] .home-disc__item:focus-visible::after { transform: none; }
.gb[data-page="home"] .home-disc__foot { margin-top: auto; padding-top: 1.25rem; }
@media (min-width: 768px) { .gb[data-page="home"] .home-disc__desc { font-size: var(--gb-fs-small); } .gb[data-page="home"] .home-disc__base { font-size: var(--gb-fs-small); } }

/* stappen: beelden op één lijn onderaan de kolom */
.gb[data-page="home"] .home-steps .gb-step__text { margin-bottom: 1.5rem; }
.gb[data-page="home"] .home-steps .gb-step__media { margin-top: auto; }

/* Bike Fit First: maten wegstrepen (M3) tussen de merkzin en de uitleg; op desktop iets groter en met lucht onder de kop */
.gb[data-page="home"] .home-sizes { margin-block: .5rem .25rem; }
@media (min-width: 1024px) {
  .gb[data-page="home"] .home-sizes { margin-block: 1.25rem .5rem; gap: .625rem; }
  .gb[data-page="home"] .home-sizes > span { min-width: 3.5rem; height: 3rem; }
}

/* configurator-teaser (C6): tekening links; rechts kop, schakelaar (vanaf t=0), beide prijzen, knoppen.
   Mobiel: kop, schakelaar, tekening, prijzen. Zonder JS op mobiel geen beeld (zoals voorheen). */
.gb[data-page="home"] .home-config__grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "switch" "media" "buy"; }
.gb[data-page="home"] .home-config__head { grid-area: head; }
.gb[data-page="home"] .home-config__switch { grid-area: switch; }
.gb[data-page="home"] .home-config__media { grid-area: media; display: grid; gap: .75rem; margin: 0; }
.gb[data-page="home"] .home-config__buy { grid-area: buy; }
.gb[data-page="home"] .home-config__fixed { display: grid; gap: .25rem; }
.gb[data-page="home"] .home-config__buy .gb-actions { column-gap: 1.75rem; }   /* ruimte voor het lock-on-kader naast "Bekijk de prijzen" */
.gb[data-page="home"]:not(.gb-js *) .home-config__cap { display: none; }
@media (max-width: 767px) {
  .gb[data-page="home"]:not(.gb-js *) .home-config__media { display: none; }
}
@media (min-width: 1024px) {
  .gb[data-page="home"] .home-config__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; grid-template-areas: "media head" "media switch" "media buy"; column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); row-gap: 1.75rem; align-items: start; }
  .gb[data-page="home"] .home-config__media { align-self: center; }
}

/* oprichter: "Patrick doet je bike-fit" krijgt een directe (niet-oranje: het G-icoon is hier het oranje moment) bike-fitknop */
.gb[data-page="home"] .home-founder__actions { column-gap: 1.75rem; row-gap: 1rem; }
/* < 768 staat hier altijd de oranje sticky "Plan je bike-fit" in beeld (vanaf 30% scroll): geen tweede, donkere kopie erboven.
   Zonder JS is er geen sticky balk, dan blijft de knop staan. */
@media (max-width: 767px) { .gb[data-page="home"]:is(.gb-js *) .home-founder__actions > .gb-btn { display: none; } }

/* titanium: quote rustiger en met lucht (gb-quote zet margin op 0) */
.gb[data-page="home"] .home-ti .gb-quote { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--gb-rule); gap: 1rem; }
.gb[data-page="home"] .home-ti .gb-quote__text { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); line-height: 1.3; }

/* mobiel en tablet: korter en rustiger (doel ±12 schermen) */
@media (max-width: 1023px) {
  .gb[data-page="home"] .home-disc__media { aspect-ratio: 21 / 9; }
  .gb[data-page="home"] .gb-head__side { display: grid; gap: 1rem; justify-items: start; }
}
@media (max-width: 767px) {
  .gb[data-page="home"] .home-reviews .gb-review__media { aspect-ratio: 16 / 9; }
  .gb[data-page="home"] .home-reviews .gb-review__media img { object-position: center 15%; }
  .gb[data-page="home"] .home-founder .gb-figure__media { aspect-ratio: 1 / 1; }
  .gb[data-page="home"] .home-blog .gb-grid { gap: 0; }
  .gb[data-page="home"] .home-blog .gb-post { border-top: 1px solid var(--gb-rule); }
  .gb[data-page="home"] .home-blog .gb-post:last-child { border-bottom: 1px solid var(--gb-rule); }
  .gb[data-page="home"] .home-blog .gb-post__link { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .375rem; align-items: start; padding-block: 1rem; }
  .gb[data-page="home"] .home-blog .gb-post__media { grid-row: 1 / span 2; aspect-ratio: 1 / 1; margin: 0; }
  .gb[data-page="home"] .home-blog .gb-post__title { font-size: 1.0625rem; }
  .gb[data-page="home"] .home-blog .gb-post__excerpt { display: none; }
}
@media (max-width: 599px) {
  .gb[data-page="home"] .home-facts .gb-facts__row { grid-template-columns: 6.25rem minmax(0, 1fr); gap: .75rem; padding-block: .875rem; }
  .gb[data-page="home"] .home-facts .gb-facts dd { font-size: var(--gb-fs-small); line-height: 1.5; }
}

/* ===== pages/klantfietsen.css ===== */
/* Klantfietsen (/complete-builds/): alleen paginaspecifieke aanvullingen op gb.css */

/* Hero (split): de fiets staat links van het midden in het origineel; in de halve kolom rechts naast het verloop houden */
@media (min-width: 1024px) { .gb[data-page="klantfietsen"] .kf-hero-img { object-position: 38% 50%; } }

/* Cases: rustige scheiding tussen de twee verhalen, kop iets kleiner dan een sectiekop */
.gb[data-page="klantfietsen"] .kf-case + .kf-case { margin-top: clamp(3.5rem, 2.5rem + 4vw, 7rem); padding-top: clamp(3.5rem, 2.5rem + 4vw, 7rem); border-top: 1px solid var(--gb-rule); }
.gb[data-page="klantfietsen"] .kf-case__title { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; }
.gb[data-page="klantfietsen"] .kf-case__quote { margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.75rem); padding-left: clamp(1.25rem, .75rem + 1.5vw, 2rem); border-left: 2px solid var(--gb-rule-strong); max-width: 56rem; }
.gb[data-page="klantfietsen"] .kf-case__quote .gb-quote__text { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.4; }
.gb[data-page="klantfietsen"] .kf-case__quote .gb-quote__text p + p { margin-top: 1rem; }
@media (min-width: 1024px) {
  /* quote onder de tekstkolom bij de omgekeerde case, onder het beeld bij de eerste: altijd links uitgelijnd met de kop */
  .gb[data-page="klantfietsen"] .kf-case .gb-split__body { padding-top: .25rem; }
}

/* Google-fragmenten onder de cases */
.gb[data-page="klantfietsen"] .kf-google { margin-top: clamp(3.5rem, 2.5rem + 4vw, 7rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
.gb[data-page="klantfietsen"] .kf-google .gb-review--quiet { border-top: 0; }
.gb[data-page="klantfietsen"] .kf-google .gb-score { margin-top: 1.25rem; }
.gb[data-page="klantfietsen"] .kf-google .gb-score + .kf-google__links { margin-top: 1.5rem; }
.gb[data-page="klantfietsen"] .kf-google__links + .kf-google__links { margin-top: .75rem; }
.gb[data-page="klantfietsen"] .kf-google .gb-review--quiet .gb-review__body { padding-top: 0; }

/* Prijzen naast de kop van "Jouw build" */
.gb[data-page="klantfietsen"] .kf-prices { width: 100%; }
.gb[data-page="klantfietsen"] .kf-prices .gb-spec { width: 100%; }

/* Kop van "Jouw build": titel en lead bovenaan naast de prijzen, niet onderaan uitgelijnd; lead op dezelfde afstand als in een gewone gb-head */
.gb[data-page="klantfietsen"] .kf-build-head .gb-lead { margin-top: 1.125rem; }
@media (min-width: 768px) { .gb[data-page="klantfietsen"] .kf-build-head { align-items: start; } }

/* ===== pages/over.css ===== */
/* Over Gregor (/over-gregor/): alleen paginaspecifieke aanvullingen op gb.css */

/* Hero: Patrick (staand 2:3) blijft in beeld in de 5:4-uitsnede op mobiel en in de halve kolom op desktop */
.gb[data-page="over"] .gb-hero__media .ov-hero-img { object-position: 50% 24%; }
@media (max-width: 767px) { .gb[data-page="over"] .gb-hero__caption { display: none; } }
@media (min-width: 1024px) {
  .gb[data-page="over"] .gb-hero__media .ov-hero-img { object-position: 50% 34%; }
  /* bijschrift staat op het lichte bospad: extra verloop onderaan zodat het leesbaar blijft */
  .gb[data-page="over"] .gb-hero--split .gb-hero__media::after { background: linear-gradient(90deg, #0A0908 0%, rgba(10,9,8,0) 22%), linear-gradient(0deg, rgba(10,9,8,.78) 0%, rgba(10,9,8,0) 22%); }
}

/* Oprichter: vierkante uitsnede met rijder, camera en Patrick (fit-studio is liggend 3:2) */
.gb[data-page="over"] .ov-founder-img { object-position: 92% 50%; }
@media (min-width: 1024px) { .gb[data-page="over"] .ov-founder { align-items: center; } }

/* Bike Fit First en het proces in één donkere sectie: duidelijke adem tussen beide koppen */
.gb[data-page="over"] .ov-process-head { margin-top: clamp(4rem, 2.5rem + 5vw, 7.5rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
/* Stappen: beelden op één lijn onderaan, ook bij ongelijke tekstlengte */
@media (min-width: 1024px) { .gb[data-page="over"] .ov-steps .gb-step__text { flex: 1 0 auto; } }

/* (feitenregel: scheidingspunten staan sinds QA 26-10 globaal in gb.css) */

/* Reviews: derde kolom met Google-fragmenten en het reviewbeleid; het beleid sluit onderaan af op de lijn van de kaarten */
.gb[data-page="over"] .ov-policy { max-width: none; }
.gb[data-page="over"] .ov-policy .gb-note__label { margin: 0; line-height: 1.4; }
@media (min-width: 1024px) {
  .gb[data-page="over"] .ov-quiet { display: flex; flex-direction: column; }
  .gb[data-page="over"] .ov-quiet .ov-policy { margin-top: auto; }
}

/* Bedrijfsgegevens: beeld onder de kop vult de linkerkolom; mobiel label en waarde naast elkaar (korter) */
.gb[data-page="over"] .ov-facts-fig { margin-top: 1rem; }
@media (max-width: 599px) {
  .gb[data-page="over"] .ov-facts .gb-facts__row { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .875rem; padding-block: .875rem; }
  .gb[data-page="over"] .ov-facts dd { font-size: var(--gb-fs-small); }
}

/* ---- Beweging (DESIGN.md §11, MOTION-BRIEF §8 G4: persoonlijk, rustiger ritme). Portret zonder effect, score staat stil.
   Beginstanden alleen onder html.m-on; reduced motion en zonder JS: eindstand. Momenten: lock-on in de hero · maten
   wegstrepen bij het verhaal van Patrick (met een streep tussen M en L) · stappenlijn (systeem) · studio: maatlijn over
   de prijzen → lock-on "Kom vrijblijvend langs", en de kaart zet zijn speld. ---- */

/* hero: één rustige lock-on op "Plan je bike-fit" */
.gb[data-page="over"]:where(.m-on *) .gb-hero__cta .gb-btn--primary::before { animation: m-lock 1.8s calc(1.1s * var(--m-k, 1)) backwards; }

/* oprichter: XS tot XL, met een maatstreep tussen M en L (daar viel Patrick), dan "Jouw maat" */
.gb[data-page="over"] .ov-sizes { align-items: center; }
.gb[data-page="over"] .ov-sizes > span:nth-child(5) { --m-i: 3; }
.gb[data-page="over"] .ov-sizes > span:nth-child(6) { --m-i: 4; }
.gb[data-page="over"] .ov-sizes__gap { position: relative; align-self: stretch; width: 7px; margin: -.375rem -.125rem; box-sizing: border-box; border-block: 1.5px solid var(--gb-fg); background: linear-gradient(var(--gb-fg), var(--gb-fg)) 50% 0 / 1.5px 100% no-repeat; }
.gb[data-page="over"]:where(.m-on *) .ov-sizes__gap { transition: transform .5s var(--m-ease-lock) .1s; }
.gb[data-page="over"]:where(.m-on *) .ov-sizes:not(.m-in) .ov-sizes__gap { transform: scaleY(0); }

/* studio: maatlijn over de prijzen, dan lock-on op "Kom vrijblijvend langs" */
.gb[data-page="over"]:where(.m-on *) .ov-spec.m-in ~ .gb-actions [data-m-lock]::before { animation: m-lock 1.8s 1.1s backwards; }

/* kaart: schaalstreep linksboven, assen tekenen vanuit het midden, de speld landt, het label volgt */
.gb[data-page="over"] .gb-route__map[data-m-rule]::before { top: 1rem; left: 1rem; right: auto; width: 4.5rem; opacity: .62; }
.gb[data-page="over"]:where(.m-on *) .gb-route__axis::before, .gb[data-page="over"]:where(.m-on *) .gb-route__axis::after { transition: transform var(--m-t-draw) var(--m-ease-draw) .15s; }
.gb[data-page="over"]:where(.m-on *) .gb-route__dot { transition: transform .55s var(--m-ease-lock) .85s; }
.gb[data-page="over"]:where(.m-on *) .gb-route__label { transition: opacity .45s var(--m-ease-out) 1.15s, transform .5s var(--m-ease-settle) 1.15s; }
.gb[data-page="over"]:where(.m-on *) .gb-route__coords { transition: opacity .6s var(--m-ease-out) 1.3s; }
.gb[data-page="over"]:where(.m-on *) .gb-route__map:not(.m-in) .gb-route__axis::before { transform: scaleY(0); }
.gb[data-page="over"]:where(.m-on *) .gb-route__map:not(.m-in) .gb-route__axis::after { transform: scaleX(0); }
.gb[data-page="over"]:where(.m-on *) .gb-route__map:not(.m-in) .gb-route__dot { transform: scale(0); }
.gb[data-page="over"]:where(.m-on *) .gb-route__map:not(.m-in) .gb-route__label { opacity: 0; transform: translateY(var(--m-rise-s)); }
.gb[data-page="over"]:where(.m-on *) .gb-route__map:not(.m-in) .gb-route__coords { opacity: 0; }

/* ===== pages/prijzen.css ===== */
/* prijzen · uitzonderingen op gb.css (alles gescoped op de pagina) */
/* prijsregels in de hero: wat ruimte boven, en niet breder dan de lead */
.gb[data-page="prijzen"] .prijzen-hero-spec { margin-top: 1.75rem; max-width: 30rem; }

/* ===== beweging (DESIGN.md §11, MOTION-BRIEF §8 G3) =====
   Alleen CSS, geen pagina-JS (JS-budget, kader 3; zelfde opzet als /configurator/). Systeem (geen markup): maatstreep
   onder de bedragen in de answer-first, afvinken, tijdlijn met lock-on, CTA-band. Haak: data-m-scan op de fitfoto.
   Animaties eindigen vanzelf in de eindstand; zonder JS, bij reduced motion en bij terug/vooruit (m-static) staat alles direct. */

/* hero: het prijsblad wordt bij het laden regel voor regel opgemeten (maatlijn over de onderrand), daarna lock-on op "Plan je bike-fit" */
.gb[data-page="prijzen"] .prijzen-hero-spec .gb-spec__row { position: relative; }
.gb[data-page="prijzen"] .prijzen-hero-spec .gb-spec__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; box-sizing: border-box; border-inline: 1px solid; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; opacity: .5; transform-origin: 0 50%;
}
.gb[data-page="prijzen"] .prijzen-hero-spec .gb-spec__row:nth-child(2) { --m-i: 1; }
.gb[data-page="prijzen"] .prijzen-hero-spec .gb-spec__row:nth-child(3) { --m-i: 2; }
@media (prefers-reduced-motion: no-preference) {
  .gb[data-page="prijzen"]:is(.gb-js:not(.m-static) *) .prijzen-hero-spec .gb-spec__row::after {
    animation: prijzen-measure .7s var(--m-ease-draw) calc((250ms + var(--m-i, 0) * 140ms) * var(--m-k, 1)) backwards;
  }
  .gb[data-page="prijzen"]:is(.gb-js:not(.m-static) *) .gb-hero .gb-btn--primary::before {
    animation: m-lock 1.8s calc(1250ms * var(--m-k, 1)) backwards;
  }
}
@keyframes prijzen-measure { from { transform: scaleX(0); } }

/* losse bike-fit: scanlijn "Houdingsanalyse" (data-m-scan, systeem), daarna lock-on op "Plan je bike-fit". Alleen waar foto
   en knop naast elkaar staan; gestapeld staat de knop dan nog buiten beeld (daar draagt de sticky balk de CTA). */
@media (min-width: 1024px) {
  .gb[data-page="prijzen"]:is(.m-on *) .prijzen-fit:has([data-m-scan].m-in) .gb-split__body .gb-btn--primary::before {
    animation: m-lock 1.8s calc(1500ms * var(--m-k, 1)) backwards;
  }
}

/* ===== pages/privacy.css ===== */
/* privacy · uitzonderingen op gb.css (alles gescoped op .gb[data-page="privacy"]) */

/* hero: datum direct onder de titel */
.gb[data-page="privacy"] .gb-hero__content > .pv-updated { margin-top: 1.25rem; }
.gb[data-page="privacy"] .gb-hero__content > .pv-updated + .gb-hero__lead { margin-top: 1rem; }

/* verklaring: links een vaste kolom met inhoudsopgave, rechts de tekst */
.gb[data-page="privacy"] .pv-layout { align-items: start; }
.gb[data-page="privacy"] .pv-aside { display: grid; gap: 1rem; }
.gb[data-page="privacy"] .pv-toc { gap: 0; padding: .25rem 1.25rem; background-color: var(--gb-surface); }
.gb[data-page="privacy"] .pv-toc a { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 0; color: var(--gb-fg); font-size: var(--gb-fs-small); font-weight: 500; }
.gb[data-page="privacy"] .pv-toc a + a { border-top: 1px solid var(--gb-rule); }
.gb[data-page="privacy"] .pv-toc__n { flex: none; width: 1.75rem; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; color: var(--gb-fg-3); }
.gb[data-page="privacy"] .pv-aside__contact { padding-top: 1.25rem; border-top: 1px solid var(--gb-rule); }
@media (min-width: 1024px) {
  .gb[data-page="privacy"] .pv-aside { position: sticky; top: calc(var(--gb-header-h) + 2rem); }
}
@media (max-width: 1023px) {
  .gb[data-page="privacy"] .pv-body { margin-top: 1rem; }
}

/* blokken 01 tot en met 06: nummer, kop en tekst, met een haarlijn ertussen */
.gb[data-page="privacy"] .pv-sec { scroll-margin-top: calc(var(--gb-header-h) + 1.5rem); }
.gb[data-page="privacy"] .pv-sec + .pv-sec { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--gb-rule); }
.gb[data-page="privacy"] .pv-sec .gb-prose > h2:first-child { margin-top: .75rem; }
.gb[data-page="privacy"] .pv-sec .gb-prose h3 { scroll-margin-top: calc(var(--gb-header-h) + 1.5rem); }

/* feitenlijsten in de tekst: iets compacter dan de standaard */
.gb[data-page="privacy"] .gb-prose .pv-facts { margin-top: 1.25rem; }
.gb[data-page="privacy"] .pv-facts .gb-facts__row { padding-block: .75rem; }
.gb[data-page="privacy"] .pv-facts dd { font-size: var(--gb-fs-small); color: var(--gb-fg-2); }
.gb[data-page="privacy"] .pv-facts dd a { color: var(--gb-fg); }
@media (min-width: 600px) {
  .gb[data-page="privacy"] .pv-facts .gb-facts__row { grid-template-columns: 9.5rem minmax(0, 1fr); }
}
.gb[data-page="privacy"] .gb-prose .pv-facts + p { margin-top: 1.25rem; }
.gb[data-page="privacy"] .gb-prose .pv-figure { margin-block: 1.5rem; }

/* tabellen: eerste kolom smaller, basis-kolom zo smal als de tekst */
.gb[data-page="privacy"] .pv-table tbody th { font-weight: 600; color: var(--gb-fg); }
.gb[data-page="privacy"] .pv-table td { color: var(--gb-fg-2); }
.gb[data-page="privacy"] .pv-table caption a { color: var(--gb-fg-2); text-decoration: underline; text-underline-offset: .2em; }
.gb[data-page="privacy"] .pv-table:not(.pv-table--terms) tbody th { width: 9.5rem; white-space: nowrap; }
.gb[data-page="privacy"] .pv-table--terms { min-width: 32rem; }
.gb[data-page="privacy"] .pv-table--terms tbody th { width: 44%; }
.gb[data-page="privacy"] .pv-table--terms td:last-child,
.gb[data-page="privacy"] .pv-table--terms thead th:last-child { width: 1%; white-space: nowrap; }

/* rechten: verzoek en klacht onder de kaarten */
.gb[data-page="privacy"] #je-rechten { scroll-margin-top: var(--gb-header-h); }
.gb[data-page="privacy"] .pv-request { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.gb[data-page="privacy"] .pv-request .gb-step__text .gb-link { word-break: break-word; }
.gb[data-page="privacy"] .pv-complaint { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--gb-rule); scroll-margin-top: calc(var(--gb-header-h) + 1.5rem); }
@media (min-width: 1024px) {
  .gb[data-page="privacy"] .pv-complaint { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}

/* wijzigingen: kop direct bovenaan */
.gb[data-page="privacy"] #wijzigingen .gb-prose > h2:first-child { margin-top: 0; }
.gb[data-page="privacy"] #wijzigingen { scroll-margin-top: var(--gb-header-h); }

/* blokken even breed als de tekst, zodat de haarlijnen gelijk lopen */
.gb[data-page="privacy"] .pv-sec { max-width: 44rem; }

/* e-mailadres in lopende tekst herkenbaar als link */
.gb[data-page="privacy"] .gb-answer__text a,
.gb[data-page="privacy"] .gb-ctaband__text a,
.gb[data-page="privacy"] .gb-hero__aside dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--gb-rule-strong); }
.gb[data-page="privacy"] .gb-answer__text a:hover,
.gb[data-page="privacy"] .gb-ctaband__text a:hover,
.gb[data-page="privacy"] .gb-hero__aside dd a:hover { text-decoration-color: currentColor; }

/* bewaartermijnen op mobiel: per rij onder elkaar in plaats van horizontaal scrollen */
@media (max-width: 599px) {
  .gb[data-page="privacy"] .pv-table--terms { display: flex; flex-direction: column; min-width: 0; width: 100%; }
  .gb[data-page="privacy"] .pv-table--terms tbody,
  .gb[data-page="privacy"] .pv-table--terms caption { display: block; width: 100%; }
  .gb[data-page="privacy"] .pv-table--terms caption { order: 2; }
  .gb[data-page="privacy"] .pv-table--terms thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gb[data-page="privacy"] .pv-table--terms tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .25rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--gb-rule); }
  .gb[data-page="privacy"] .pv-table--terms tbody tr:last-child { border-bottom: 0; }
  .gb[data-page="privacy"] .pv-table--terms tbody th,
  .gb[data-page="privacy"] .pv-table--terms tbody td { display: block; width: auto; padding: 0; border: 0; }
  .gb[data-page="privacy"] .pv-table--terms tbody th { grid-column: 1 / -1; }
  .gb[data-page="privacy"] .pv-table--terms tbody td:last-child { align-self: start; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-fg-3); padding-top: .2rem; }
}

/* partijen op mobiel: per rij naam boven de omschrijving, zonder horizontaal scrollen */
@media (max-width: 599px) {
  .gb[data-page="privacy"] .pv-table--parties { display: flex; flex-direction: column; min-width: 0; width: 100%; }
  .gb[data-page="privacy"] .pv-table--parties tbody,
  .gb[data-page="privacy"] .pv-table--parties caption { display: block; width: 100%; }
  .gb[data-page="privacy"] .pv-table--parties caption { order: 2; }
  .gb[data-page="privacy"] .pv-table--parties thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gb[data-page="privacy"] .pv-table--parties tbody tr { display: grid; row-gap: .25rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--gb-rule); }
  .gb[data-page="privacy"] .pv-table--parties tbody tr:last-child { border-bottom: 0; }
  .gb[data-page="privacy"] .pv-table--parties tbody th,
  .gb[data-page="privacy"] .pv-table--parties tbody td { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
}

/* wijzigingen: nummer en kop dicht bij elkaar op mobiel */
@media (max-width: 1023px) {
  .gb[data-page="privacy"] .pv-changes { gap: .75rem; }
}

/* ===== pages/titanium.css ===== */
/* Titanium · alleen wat gb.css niet al doet */

/* byline: op smalle schermen onder elkaar, zodat de "/" niet aan het begin van een regel staat */
@media (max-width: 479px) {
  .gb[data-page="titanium"] .gb-hero--article .gb-byline { flex-direction: column; gap: .375rem; }
  .gb[data-page="titanium"] .gb-hero--article .gb-byline > * + *::before { display: none; }
}

/* sprongmenu onder het korte antwoord */
.gb[data-page="titanium"] .ti-jump { display: grid; gap: .75rem; }

/* quote van Corné naast zijn foto, verticaal gecentreerd */
.gb[data-page="titanium"] .ti-quote { align-items: center; }

/* vergelijkingstabel: bron onder elke eigenschap, eerste kolom blijft staan bij horizontaal scrollen */
.gb[data-page="titanium"] .ti-table { min-width: 48rem; }
.gb[data-page="titanium"] .ti-table thead th:first-child,
.gb[data-page="titanium"] .ti-table tbody th { position: sticky; left: 0; z-index: 1; width: 19%; }
.gb[data-page="titanium"] .ti-table thead th:first-child { background: linear-gradient(var(--gb-tint), var(--gb-tint)), var(--gb-surface); }
.gb[data-page="titanium"] .ti-table tbody th { background-color: var(--gb-surface); }
.gb[data-page="titanium"] .ti-src { display: block; margin-top: .25rem; font-family: var(--gb-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb[data-page="titanium"] .ti-src a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1023px) {
  .gb[data-page="titanium"] .ti-table thead th:first-child,
  .gb[data-page="titanium"] .ti-table tbody th { box-shadow: inset -1px 0 0 var(--gb-rule); }
}

/* onderhoud: feitenlijst en beeld bovenaan uitlijnen, niet uitrekken */
.gb[data-page="titanium"] .ti-care { align-items: start; }

/* sectiekop met tekst en link: ook op mobiel ruimte tussen tekst en link (gb.css doet dat pas vanaf 1024) */
@media (max-width: 1023px) {
  .gb[data-page="titanium"] .gb-head--split > .gb-head__side { display: grid; gap: 1rem; justify-items: start; }
}

/* veeghint boven de tabel (alleen mobiel, gb-hide-desktop verbergt hem vanaf 768) */
.gb[data-page="titanium"] .ti-swipe { margin-bottom: .75rem; }

/* ---- Beweging (DESIGN.md §11, MOTION-BRIEF §8 G4: vergelijkingen die opbouwen). Beginstanden alleen onder html.m-on;
   reduced motion en zonder JS: eindstand. Vier momenten: glans op de hero → lock-on · de vergelijking bouwt op (rijen,
   balkjes, maatkader om titanium) → lock-on configurator · de legering als samenstellingsbalk · afvinken → lock-on. ---- */

/* hero: glans over het frame (gb.css staat de glans op een artikel-hero toe), daarna lock-on */
.gb[data-page="titanium"]:where(.m-on *) .gb-hero__cta .gb-btn--primary::before { animation: m-lock 1.8s calc(1.4s * var(--m-k, 1)) backwards; }

/* vergelijking: titaniumkolom met maatkader (hoeken boven en onder) en een lichte tint */
.gb[data-page="titanium"] .ti-table tbody td:nth-child(2) { background-color: var(--gb-tint); }
.gb[data-page="titanium"] .ti-table thead th:nth-child(2) { position: relative; color: var(--gb-fg); }
.gb[data-page="titanium"] .ti-table tbody tr:last-child td:nth-child(2) { position: relative; }
.gb[data-page="titanium"] .ti-table thead th:nth-child(2)::after, .gb[data-page="titanium"] .ti-table tbody tr:last-child td:nth-child(2)::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: var(--m-tick); box-sizing: border-box; pointer-events: none; border: var(--m-line) solid var(--gb-fg);
  -webkit-mask: linear-gradient(90deg, #000 var(--m-tick), transparent var(--m-tick), transparent calc(100% - var(--m-tick)), #000 calc(100% - var(--m-tick)));
  mask: linear-gradient(90deg, #000 var(--m-tick), transparent var(--m-tick), transparent calc(100% - var(--m-tick)), #000 calc(100% - var(--m-tick)));
}
.gb[data-page="titanium"] .ti-table thead th:nth-child(2)::after { top: 4px; border-bottom: 0; }
.gb[data-page="titanium"] .ti-table tbody tr:last-child td:nth-child(2)::after { bottom: 4px; border-top: 0; }
/* balkjes: dichtheid en stijfheid op één schaal per rij (staal = 7rem); titanium in volle kleur. Alleen beeld, de waarden staan als tekst */
.gb[data-page="titanium"] .ti-bar { display: block; width: 7rem; height: 3px; margin-top: .625rem; border-radius: 1px; background: var(--gb-rule-strong); transform-origin: 0 50%; }
.gb[data-page="titanium"] .ti-table td:nth-child(2) .ti-bar { background: var(--gb-fg); }
.gb[data-page="titanium"] .ti-bar--35 { transform: scaleX(.346); }
.gb[data-page="titanium"] .ti-bar--36 { transform: scaleX(.363); }
.gb[data-page="titanium"] .ti-bar--58 { transform: scaleX(.578); }
/* maatlijn boven de vergelijking (los van de tabelrand) */
.gb[data-page="titanium"] .ti-compare { padding-top: 1rem; }
/* conclusie onder de tabel: de maatlijn (data-m-rule) is de scheidingslijn, ook zonder JS */
.gb[data-page="titanium"] .ti-verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); padding-top: clamp(1.5rem, 1rem + 1vw, 2rem); }
.gb[data-page="titanium"] .ti-verdict__text { max-width: 40rem; font-size: var(--gb-fs-h4); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
.gb[data-page="titanium"] .ti-verdict__text strong { font-weight: 600; }

/* opbouw (alleen m-on): rijen één voor één, balkjes groeien, dan het maatkader. De lock-on op de configurator hangt aan de
   conclusie zelf (eigen maatlijn), anders speelt hij buiten beeld zolang je de tabel nog leest */
.gb[data-page="titanium"]:where(.m-on *) .ti-table tbody tr { transition: opacity var(--m-t-reveal) var(--m-ease-out), transform var(--m-t-reveal) var(--m-ease-settle); transition-delay: calc(.2s + var(--ti-i, 0) * 70ms); }
.gb[data-page="titanium"] .ti-table tbody tr:nth-child(2) { --ti-i: 1; }
.gb[data-page="titanium"] .ti-table tbody tr:nth-child(3) { --ti-i: 2; }
.gb[data-page="titanium"] .ti-table tbody tr:nth-child(4) { --ti-i: 3; }
.gb[data-page="titanium"] .ti-table tbody tr:nth-child(5) { --ti-i: 4; }
.gb[data-page="titanium"] .ti-table tbody tr:nth-child(6) { --ti-i: 5; }
.gb[data-page="titanium"]:where(.m-on *) .ti-compare:not(.m-in) .ti-table tbody tr { opacity: 0; transform: translateY(var(--m-rise-s)); }
.gb[data-page="titanium"]:where(.m-on *) .ti-bar { transition: transform .9s var(--m-ease-settle) calc(.55s + var(--ti-i, 0) * 70ms); }
.gb[data-page="titanium"]:where(.m-on *) .ti-compare:not(.m-in) .ti-bar { transform: scaleX(0); }
.gb[data-page="titanium"]:where(.m-on *) .ti-table thead th:nth-child(2)::after, .gb[data-page="titanium"]:where(.m-on *) .ti-table tbody tr:last-child td:nth-child(2)::after { transition: opacity .3s var(--m-ease-out) 1.25s, transform .55s var(--m-ease-lock) 1.25s; }
.gb[data-page="titanium"]:where(.m-on *) .ti-compare:not(.m-in) .ti-table thead th:nth-child(2)::after { opacity: 0; transform: translateY(-10px); }
.gb[data-page="titanium"]:where(.m-on *) .ti-compare:not(.m-in) .ti-table tbody tr:last-child td:nth-child(2)::after { opacity: 0; transform: translateY(10px); }
.gb[data-page="titanium"]:where(.m-on *) .ti-verdict.m-in [data-m-lock]::before { animation: m-lock 1.8s 1s backwards; }

/* legering: 3% aluminium en 2,5% vanadium als smalle reepjes naast titanium; de maatlijn erboven is het geheel */
.gb[data-page="titanium"] .ti-alloy { padding-top: 1rem; }
.gb[data-page="titanium"] .ti-alloy__bar { display: flex; gap: 2px; height: 1.25rem; margin: 0; }
.gb[data-page="titanium"] .ti-alloy__bar > span { display: block; height: 100%; border-radius: 1px; transform-origin: 0 50%; }
.gb[data-page="titanium"] .ti-alloy__ti { flex: 94.5 1 0; background: linear-gradient(180deg, #E9E9E9 0%, #D8D8D8 45%, #A9A9A9 100%); }
.gb[data-page="titanium"] .ti-alloy__al { flex: 3 1 0; min-width: 6px; background: #FFFFFF; }
.gb[data-page="titanium"] .ti-alloy__v { flex: 2.5 1 0; min-width: 5px; background: rgba(255, 255, 255, .45); }
.gb[data-page="titanium"] .ti-alloy__key { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: .75rem 0 0; font-family: var(--gb-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-2); }
.gb[data-page="titanium"] .ti-alloy__key > span { display: inline-flex; align-items: center; gap: .5rem; }
.gb[data-page="titanium"] .ti-alloy__key > span::before { content: ""; width: .625rem; height: .625rem; border-radius: 1px; }
.gb[data-page="titanium"] .ti-alloy__k-ti { margin-right: auto; }
.gb[data-page="titanium"] .ti-alloy__k-ti::before { background: #D8D8D8; }
.gb[data-page="titanium"] .ti-alloy__k-al::before { background: #FFFFFF; }
.gb[data-page="titanium"] .ti-alloy__k-v::before { background: rgba(255, 255, 255, .45); }
.gb[data-page="titanium"]:where(.m-on *) .ti-alloy__ti { transition: transform 1s var(--m-ease-draw) .35s; }
.gb[data-page="titanium"]:where(.m-on *) .ti-alloy__al { transition: transform .5s var(--m-ease-lock) 1.3s; }
.gb[data-page="titanium"]:where(.m-on *) .ti-alloy__v { transition: transform .5s var(--m-ease-lock) 1.45s; }
.gb[data-page="titanium"]:where(.m-on *) .ti-alloy__key { transition: opacity .5s var(--m-ease-out) 1.6s; }
.gb[data-page="titanium"]:where(.m-on *) .ti-alloy:not(.m-in) .ti-alloy__bar > span { transform: scaleX(0); }
.gb[data-page="titanium"]:where(.m-on *) .ti-alloy:not(.m-in) .ti-alloy__key { opacity: 0; }

/* waarom Gregor: afvinken (systeem), daarna lock-on op "Plan je bike-fit" */
.gb[data-page="titanium"]:where(.m-on *) #waarom-gregor .gb-checks.m-in ~ .gb-cta .gb-btn--primary::before { animation: m-lock 1.8s 1s backwards; }

/* ===== pages/werkwijze.css ===== */
/* Werkwijze · alleen wat gb.css niet al doet */

/* hero: lead smaller houden, zodat de tekst niet over het lichte laptopscherm loopt */
.gb[data-page="werkwijze"] .gb-hero__lead { max-width: 28em; }

/* drie fases: ruimte tussen de rijen, en een fasekop die onder de sectiekop blijft */
.gb[data-page="werkwijze"] .ww-phases > * + * { margin-top: clamp(3.5rem, 2rem + 5vw, 7.5rem); }
.gb[data-page="werkwijze"] .ww-phase__title { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem); line-height: 1.08; letter-spacing: -.022em; font-weight: 600; }

/* hero desktop: linkerhelft iets dieper, zodat de lead niet over de doos en de laptoprand loopt */
@media (min-width: 768px) {
  .gb[data-page="werkwijze"] .gb-hero__media::after { background:
      linear-gradient(90deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.78) 36%, rgba(10,9,8,.22) 60%, rgba(10,9,8,0) 100%),
      linear-gradient(0deg, rgba(10,9,8,.85) 0%, rgba(10,9,8,0) 42%),
      linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,0) 22%); }
}
@media (min-width: 1024px) { .gb[data-page="werkwijze"] .gb-hero__lead { max-width: 26em; } }

/* ---- Beweging (DESIGN.md §11, MOTION-BRIEF §8 G4). Beginstanden alleen onder html.m-on; reduced motion, zonder JS en
   zonder scroll-timeline: eindstand. Vier momenten: scan op fase 01 · glans op fase 02 · maatlijn over de prijzen en
   lock-on op de configurator · tijdlijn met tekenvel (de tekening ontstaat bij stap 02, wordt titanium bij stap 05).
   De CTA staat boven het vel: bij binnenkomst van de sectie direct in beeld. Geen scroll-gestuurde glans (bevriest als
   je stopt met scrollen); de lijn blijft staan tot het titanium er bijna is, dus nooit een half doorzichtige fiets. ---- */

/* hero: één lock-on op "Plan je bike-fit" kort na het laden (fill backwards: hover en focus werken daarna gewoon) */
.gb[data-page="werkwijze"]:where(.m-on *) .gb-hero__cta .gb-btn--primary::before { animation: m-lock 1.8s calc(.9s * var(--m-k, 1)) backwards; }
/* fase 03: maatlijn over de prijzen, dan lock-on op "Stel je fiets samen" */
.gb[data-page="werkwijze"]:where(.m-on *) .ww-prices.m-in ~ .gb-actions [data-m-lock]::before { animation: m-lock 1.8s 1.1s backwards; }

/* stap 02 onder 1024 px: kleine blauwdruk (C6, labels uit). Zonder JS geen lege doos; vanaf 1024 tekent het vel in de sticky kolom */
.gb[data-page="werkwijze"] .ww-mini { display: none; }
@media (max-width: 1023px) {
  .gb[data-page="werkwijze"]:where(.m-on *) .ww-mini, .gb[data-page="werkwijze"]:where(.m-static *) .ww-mini { display: flex; max-width: 22rem; margin-top: 1rem; border: 1px solid var(--gb-rule); background-color: var(--gb-surface); }
}

/* tekenvel: lijnlaag en titaniumlaag op elkaar; eindstand (ook zonder scroll-timeline en bij reduced motion) = titanium */
.gb[data-page="werkwijze"] .ww-sheet { display: none; }
@media (min-width: 1024px) and (min-height: 700px) { .gb[data-page="werkwijze"] .ww-sheet.is-on { display: block; } }
.gb[data-page="werkwijze"] .ww-follow > * + * { margin-top: 1.5rem; }
/* met tekenvel: kop en lead scrollen mee weg, tekenvel + CTA blijven naast de stappen staan */
@media (min-width: 1024px) {
  .gb[data-page="werkwijze"] .gb-split--sticky:has(.ww-sheet.is-on) > .gb-split__body { position: static; align-self: stretch; }
  .gb[data-page="werkwijze"] .gb-split--sticky:has(.ww-sheet.is-on) .ww-follow { position: sticky; top: calc(var(--gb-header-h) + 2rem); }
}
.gb[data-page="werkwijze"] .ww-sheet__paper { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border: 1px solid var(--gb-rule); border-radius: var(--gb-radius); background-color: var(--gb-surface); }
.gb[data-page="werkwijze"] .ww-sheet__bike { position: absolute; left: 5%; right: 5%; top: 50%; width: auto; transform: translateY(-50%); }
.gb[data-page="werkwijze"] .ww-sheet__bike--ink { opacity: 0; }
.gb[data-page="werkwijze"] .ww-sheet__veil, .gb[data-page="werkwijze"] .ww-sheet__note { display: none; }
.gb[data-page="werkwijze"] .ww-sheet__veil { position: absolute; inset: 0; z-index: 1; background-color: var(--gb-surface); }
.gb[data-page="werkwijze"] .ww-sheet__pen { position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--gb-fg); }
.gb[data-page="werkwijze"] .ww-sheet__note { position: absolute; z-index: 2; margin: 0; font-family: var(--gb-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); }
.gb[data-page="werkwijze"] .ww-sheet__note { left: 0; right: 0; top: 50%; text-align: center; transform: translateY(-50%); }

/* maatlat: zes vakken = zes stappen; de voortgangslijn en de nummers volgen de tijdlijn (alleen met scroll-timeline) */
.gb[data-page="werkwijze"] .ww-ruler { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 1rem 0 0; padding-top: .875rem; font-family: var(--gb-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; color: var(--gb-fg); }
.gb[data-page="werkwijze"] .ww-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; box-sizing: border-box; border-inline: 1px solid var(--gb-rule-strong); background: linear-gradient(var(--gb-rule-strong), var(--gb-rule-strong)) 0 50% / 100% 1px no-repeat; }
.gb[data-page="werkwijze"] .ww-ruler > span { position: relative; opacity: .62; }
.gb[data-page="werkwijze"] .ww-ruler > span + span::before { content: ""; position: absolute; left: 0; top: -.875rem; width: 1px; height: 7px; background: var(--gb-rule-strong); }
.gb[data-page="werkwijze"] .ww-ruler > span + span { padding-left: .5rem; }
.gb[data-page="werkwijze"] .ww-ruler > span:nth-child(2) { padding-left: .5rem; }
.gb[data-page="werkwijze"] .ww-ruler > .ww-ruler__fill { position: absolute; left: 0; right: 0; top: 2.75px; height: 1.5px; padding: 0; opacity: 1; background: var(--gb-fg); transform-origin: 0 50%; transform: scaleX(0); }
.gb[data-page="werkwijze"] .ww-ruler > .ww-ruler__fill::before { display: none; }

/* scroll-gestuurd (progressive enhancement): het midden van het scherm is "nu" (view-timeline-inset 50%) */
@supports (timeline-scope: none) and (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .gb[data-page="werkwijze"]:where(.m-on *) #tijdlijn .gb-split { timeline-scope: --ww-1, --ww-2, --ww-3, --ww-4, --ww-5, --ww-6, --ww-tl; }
    .gb[data-page="werkwijze"]:where(.m-on *) #tijdlijn .gb-timeline { view-timeline: --ww-tl block; view-timeline-inset: 50% 50%; }
    .gb[data-page="werkwijze"]:where(.m-on *) #tijdlijn .gb-timeline__item { view-timeline-inset: 50% 50%; view-timeline-axis: block; }
    .gb[data-page="werkwijze"] #stap-1 { view-timeline-name: --ww-1; }
    .gb[data-page="werkwijze"] #stap-2 { view-timeline-name: --ww-2; }
    .gb[data-page="werkwijze"] #stap-3 { view-timeline-name: --ww-3; }
    .gb[data-page="werkwijze"] #stap-4 { view-timeline-name: --ww-4; }
    .gb[data-page="werkwijze"] #stap-5 { view-timeline-name: --ww-5; }
    .gb[data-page="werkwijze"] #stap-6 { view-timeline-name: --ww-6; }
    /* stap 01: leeg vel met "Eerst je bike-fit". Stap 02: de pen trekt de tekening. Stap 05: lijn wordt titanium */
    .gb[data-page="werkwijze"]:where(.m-on *) .ww-sheet__note { display: block; animation: ww-out linear both; animation-timeline: --ww-2; animation-range: cover -140px cover 0%; }
    .gb[data-page="werkwijze"]:where(.m-on *) .ww-sheet__veil { display: block; animation: ww-wipe linear both; animation-timeline: --ww-2; animation-range: cover -60px cover 85%; }
    .gb[data-page="werkwijze"]:where(.m-on *) .ww-sheet__bike--ink { animation: ww-ink linear both; animation-timeline: --ww-5; animation-range: cover -120px cover 30%; }
    .gb[data-page="werkwijze"]:where(.m-on *) .ww-sheet__bike--ti { animation: ww-in linear both; animation-timeline: --ww-5; animation-range: cover -120px cover 30%; }
    .gb[data-page="werkwijze"]:where(.m-on *) .ww-ruler__fill { animation: ww-fill linear both; animation-timeline: --ww-tl; animation-range: cover 0% cover 100%; }
    .gb[data-page="werkwijze"]:where(.m-on *) .ww-ruler > span:not(.ww-ruler__fill) { animation: ww-now linear both; animation-range: cover 0% cover 100%; }
    .gb[data-page="werkwijze"] .ww-ruler > span:nth-child(2) { animation-timeline: --ww-1; }
    .gb[data-page="werkwijze"] .ww-ruler > span:nth-child(3) { animation-timeline: --ww-2; }
    .gb[data-page="werkwijze"] .ww-ruler > span:nth-child(4) { animation-timeline: --ww-3; }
    .gb[data-page="werkwijze"] .ww-ruler > span:nth-child(5) { animation-timeline: --ww-4; }
    .gb[data-page="werkwijze"] .ww-ruler > span:nth-child(6) { animation-timeline: --ww-5; }
    .gb[data-page="werkwijze"] .ww-ruler > span:nth-child(7) { animation-timeline: --ww-6; }
  }
}
@keyframes ww-out { to { opacity: 0; } }
@keyframes ww-wipe { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes ww-ink { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ww-in { from { opacity: 0; } 70%, to { opacity: 1; } }
@keyframes ww-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ww-now { 0% { opacity: .38; transform: none; } 2%, 98% { opacity: 1; transform: translateY(-2px); } 100% { opacity: .62; transform: none; } }