/* Fonts zelf gehost sinds 28 sep 2026 (PageSpeed: de omweg via fonts.googleapis.com
   hield op mobiel ~750 ms de eerste weergave op). Bron: Google Fonts, SIL OFL.
   Montserrat is variabel: één bestand per tekenset dekt 400 tot 700. De browser
   haalt alleen de tekensets op die een pagina echt gebruikt (unicode-range). */
/* montserrat cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* montserrat cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* montserrat vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* montserrat latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* montserrat latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* montserrat cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* montserrat cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* montserrat vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* montserrat latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* montserrat latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* montserrat cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* montserrat cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* montserrat vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* montserrat latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* montserrat latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* montserrat cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* montserrat cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* montserrat vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* montserrat latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* montserrat latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* caveat cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/caveat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* caveat cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/caveat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* caveat latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* caveat latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --navy:#1a1a2e; --navy-2:#222244; --accent:#2e7dc8; --accent-d:#1f5a96; --accent-l:#eaf2fb;
  --ink:#1e2a38; --muted:#5a6b7e; --line:#e4eaf1; --bg:#ffffff; --bg-2:#f6f9fc; --gold:#c8923a; --teal:#52A199;
  --dark:#0B3C54; --dark-2:#0e4a66;   /* petrol/teal — donkere achtergronden (logo-navy), i.p.v. bijna-zwart */
  --red:#de2c23;                      /* exact het rood van de pijnmarkeringen in de illustraties */
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overscroll-behavior-y:none}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:84px 0}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{color:var(--muted)}
.lead{font-size:1.18rem;color:var(--muted);max-width:60ch}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* Sectiekop: eyebrow, kop, inleidende zin. Zonder deze regels plakken ze aan
   elkaar, want *{margin:0}. Eén patroon i.p.v. losse marges per sectie.
   .tight is dezelfde kop met iets minder lucht. */
.sechead .eyebrow{display:block}
.sechead h2{margin-top:18px}
.sechead .lead{margin-top:22px}
.sechead.tight h2{margin-top:11px}
.sechead.tight .lead{margin-top:13px}

/* buttons */
.btn{display:inline-block;font-weight:700;font-size:.95rem;padding:13px 24px;border-radius:9px;transition:.15s;cursor:pointer;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.light{background:#fff;color:var(--navy)}
.btn.light:hover{background:var(--accent-l)}

/* header */
header.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.18rem;color:var(--navy);letter-spacing:-.01em}
.brand .mark{width:24px;height:24px;border-radius:7px;background:#01435c}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--ink);font-weight:600;font-size:.93rem}
.nav-links a:hover{color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--navy)}

/* hero */
.hero{background:linear-gradient(180deg,var(--bg-2),#fff)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin:14px 0 18px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-q{display:inline-block;background:var(--teal);color:#fff;font-weight:600;font-size:1.18rem;line-height:1.35;padding:.62rem 1.05rem;border-radius:12px;margin:2px 0 18px}
/* Woord-voor-woord onthulling in een hero-kop: elk woord schuift van onder
   omhoog en fade't in. De woorden staan al in de DOM (inline-block), dus de
   regelval ligt vooraf vast en de layout verspringt niet tijdens de animatie. */
.hero-reveal{color:var(--teal)}
.hero-word{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.hero-word.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hero-word{opacity:1;transform:none;transition:none}}
/* Rustige scroll-aanwijzing onder een hero-lead (/ergonomics, deel 2, 18 aug
   2026). Bewust GEEN .btn: gewone tekstlink, gedempt, klein pijltje erachter.
   De globale smooth-scroll voor same-page ankers zit al in nav.js. */
.scroll-hint{display:inline-block;margin-top:26px;font-size:.85rem;font-weight:600;color:var(--muted);transition:color .15s}
.scroll-hint:hover{color:var(--accent)}
/* Kleine knop rechtsboven in een hero, bóven het hero-raster (/ergonomics, 2 sep
   2026: de link naar de Ergonomix-database). Onder 700px past de tekst niet meer
   netjes tegen de rechterrand, dus daar links uitlijnen met de tekstkolom. */
.hero-topcta{display:flex;justify-content:flex-end;margin:0 0 6px}
@media(max-width:700px){.hero-topcta{justify-content:flex-start;margin-bottom:14px}}
/* ZWEVENDE TAB NAAR DE ERGONOMIX-DATABASE (/ergonomics, 3 sep 2026, besluit
   Kamo). Bewust buiten de sectie-flow van de pagina: vast aan de rechterrand van
   het scherm, verticaal gecentreerd, zodat de database altijd bereikbaar is
   zonder er een eigen sectie voor te maken.
   Twee lagen die kruislings faden (dicht = icoon + verticale tekst, open =
   icoon + gewone tekst), in plaats van één laag die van vorm verandert: zo kan
   er tijdens de animatie niets verspringen. Beide lagen hebben hun eigen vaste
   maat en staan zelf verticaal gecentreerd, dus ze blijven staan terwijl de
   breedte en hoogte van de tab meebewegen. De tab groeit naar LINKS omdat hij
   aan right:0 hangt, en blijft zo verankerd aan de schermrand.
   Lichte, licht getinte achtergrond met dunne rand: op de donkerblauwe secties
   van deze pagina steekt hij af door de kleur, op de witte door de rand. Geen
   harde slagschaduw.
   De tab verschijnt pas vanaf 1260px. Dat is geen smaakgrens maar een som: de
   inhoud is 1140px breed (--maxw) en de dichte tab 54px, dus pas vanaf
   1140 + 2x54 = 1248px past hij in de lege marge naast de tekst. Daaronder gaat
   hij over de tekstkolom heen, en op /ergonomics precies over de knop
   rechtsboven in de Ergonomics-sectie. Onder die grens is de route naar de
   database dus die knop, die gewoon blijft staan. Verhoog je --maxw, verhoog
   dan ook deze grens. */
.edb-tab{position:fixed;right:0;top:50%;z-index:70;width:54px;height:214px;transform:translateY(-50%);overflow:hidden;background:rgba(246,249,252,.94);-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border:1px solid var(--line);border-right:0;border-radius:14px 0 0 14px;box-shadow:0 2px 10px rgba(11,60,84,.06);color:var(--navy);transition:width .3s cubic-bezier(.22,.61,.36,1),height .3s cubic-bezier(.22,.61,.36,1),background .3s,border-color .3s,box-shadow .3s}
.edb-tab:hover,.edb-tab:focus-within{width:262px;height:142px;background:#fff;border-color:#cfe0f0;box-shadow:0 6px 22px rgba(11,60,84,.1)}
.edb-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.edb-layer{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;transition:opacity .22s ease-out}
/* De dichte laag verdwijnt sneller dan de open laag verschijnt, anders staat de
   verticale tekst nog half in beeld terwijl het paneel er al overheen komt. */
.edb-closed{width:54px;height:214px;flex-direction:column;justify-content:center;gap:13px;transition:opacity .13s ease-out}
.edb-open{width:262px;height:142px;gap:15px;padding:0 20px 0 17px;opacity:0}
.edb-tab:hover .edb-closed,.edb-tab:focus-within .edb-closed{opacity:0}
.edb-tab:hover .edb-open,.edb-tab:focus-within .edb-open{opacity:1;transition-delay:.08s}
.edb-vert{writing-mode:vertical-rl;text-orientation:mixed;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.edb-tab:hover .edb-vert{color:var(--accent)}
.edb-brain{flex:0 0 auto;display:block}
.edb-open b{display:block;font-size:.92rem;line-height:1.3;color:var(--navy)}
.edb-sub{display:block;margin-top:5px;font-size:.76rem;line-height:1.4;color:var(--muted)}
.edb-go{display:block;margin-top:9px;font-size:.78rem;font-weight:700;color:var(--accent)}
@media(prefers-reduced-motion:reduce){.edb-tab,.edb-layer,.edb-vert{transition:none}}
@media(max-width:1259px){.edb-tab{display:none}}
/* Kop op hero-formaat die géén h1 is. Op /ergonomics staat sinds 3 sep 2026 de
   tandartsvergelijking bovenaan met de H1; de Ergonomics-sectie eronder was
   daarvóór de hero en houdt zijn formaat, maar is nu een h2 (één H1 per pagina). */
.hero .hero-h2{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:14px 0 18px}
/* Lead op hero-formaat (.95rem i.p.v. de standaard 1.18rem), voor secties waar
   de grote lead te zwaar oogt naast de kop. */
.lead-sm{font-size:.95rem}
/* Kop die smaller uitlijnt dan de sectiebreedte en gecentreerd blijft, zodat
   hij dezelfde optische kolom volgt als de lead eronder. */
.h2-narrow{max-width:22ch;margin-left:auto;margin-right:auto}
.posture-compare{display:block;max-width:900px;width:100%;margin:26px auto 0}
/* scroll-driven before/after: bent posture fades to upright as you scroll */
.posture-scroll{position:relative;max-width:560px;width:100%;aspect-ratio:4/5;margin:30px auto 0;border-radius:20px;overflow:hidden;box-shadow:0 20px 55px rgba(1,67,92,.22);--p:0}
.posture-scroll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* crisp bottom-up wipe (the upright version "rises" into view as you scroll) */
.posture-scroll .ps-after{clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0)}
.ps-wipe-edge{position:absolute;left:0;right:0;z-index:1;height:4px;background:var(--teal);box-shadow:0 0 18px 3px rgba(82,161,153,.7);top:calc((1 - var(--p)) * 100%);opacity:calc(var(--p) * (1 - var(--p)) * 4)}
.ps-label{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(1,67,92,.92);color:#fff;font-weight:600;font-size:.9rem;padding:8px 15px;border-radius:999px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ps-label::before{content:"";width:9px;height:9px;border-radius:50%}
.ps-label-before{opacity:clamp(0,(.46 - var(--p)) * 10,1)}
.ps-label-before::before{background:#ff5a4d}
.ps-label-after{opacity:clamp(0,(var(--p) - .54) * 10,1)}
.ps-label-after::before{background:var(--teal)}
.ps-hint{position:absolute;top:14px;right:16px;z-index:2;color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(1,67,92,.55);padding:5px 11px;border-radius:999px;opacity:calc(1 - var(--p))}
@media(prefers-reduced-motion:reduce){.posture-scroll{--p:1}}
/* Mission & vision band + generic scroll-reveal */
#mission-band{background:var(--dark);color:#fff;padding:80px 0;text-align:center;overflow:hidden}
#mission-band .eyebrow{color:var(--teal)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;max-width:980px;margin:24px auto 0}
.mv-item{padding:10px 40px}
.mv-item + .mv-item{border-left:1px solid rgba(255,255,255,.16)}
.mv-label{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
/* Sinds 3 aug 2026 draagt deze band de vastgestelde visie- en missietekst
   (bron: Algemeen/CLAUDE.md) in plaats van twee oneliners. Daarom kleiner,
   breder en links uitgelijnd: een alinea van vijftig woorden op 1.32rem in
   26 tekens breed werd een torenhoge, onleesbare kolom. */
.mv-text{color:rgba(255,255,255,.92);font-size:1.04rem;line-height:1.68;font-weight:400;max-width:44ch;margin:0 auto;text-align:left}
@media(max-width:760px){.mv-grid{grid-template-columns:1fr}.mv-item{padding:26px 0}.mv-item + .mv-item{border-left:0;border-top:1px solid rgba(255,255,255,.16)}}
/* generic scroll-reveal (used by mission/vision; reusable elsewhere) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.10s}.reveal.d2{transition-delay:.22s}.reveal.d3{transition-delay:.34s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none !important}}

/* Reviews — overview cards */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:.15s}
/* Alleen de kaarten die zelf een link zijn liften bij hover. Contactkaarten
   (/about, /press) zijn een <div> met losse mailto- en tel-links, die horen
   niet klikbaar te ogen. */
a.rcard:hover{border-color:var(--accent);box-shadow:0 12px 30px rgba(16,24,40,.09);transform:translateY(-2px)}
.rcard>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.rcard .rc-b{padding:15px 18px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.rc-flag{font-size:.8rem;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.04em}
.rcard h3{font-size:1.06rem;margin:0;color:var(--navy)}
.rc-f{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem;padding-top:8px}
/* Contactkaarten (/about en /press), identiek op beide pagina's: klein gedempt
   merksymbool voor de naam, een witregel voor het e-mailadres en een LinkedIn-
   icoon in hetzelfde formaat onderaan. */
.rc-name{display:flex;align-items:center;gap:9px}
.rc-mark{width:10px;height:18px;flex:none;color:var(--teal);opacity:.8}
.rc-mail{margin-top:14px}
.rc-li{display:inline-flex;width:18px;height:18px;margin-top:11px;color:var(--teal);opacity:.75;transition:opacity .15s}
.rc-li:hover{opacity:1}
.rc-li svg{width:18px;height:18px;fill:currentColor;display:block}
.rc-views{display:inline-flex;align-items:center;gap:5px}
.eye{width:16px;height:16px;fill:none;stroke:currentColor;vertical-align:-3px}
/* Reviews — individual page */
.rev-back{display:inline-block;color:var(--accent);font-weight:600;font-size:.9rem}
.rev-grid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:34px;align-items:start}
.rev-photo{aspect-ratio:4/5;border-radius:14px;position:sticky;top:90px;overflow:hidden}
.rev-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rev-flag{font-size:.85rem;font-weight:600;color:var(--teal);text-transform:uppercase;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rev-quote{font-size:1.5rem;line-height:1.35;font-weight:600;color:var(--navy);margin:10px 0 14px}
.rev-who{font-weight:700;color:var(--navy);margin-bottom:2px}
.rev-meta{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.rev-logo{height:42px;width:auto;max-width:190px;object-fit:contain;object-position:left;display:block;margin:0 0 18px}
.rev-body h3,.rev-body>h3{font-size:1.02rem;color:var(--navy);margin:18px 0 5px}
.rev-body p{margin:0 0 10px}
.rev-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:600;font-size:.9rem}
.rev-nav a{color:var(--accent)}
/* Review — magazine layout (full-bleed hero + interspersed photos, mirrors the old blog) */
.rvh{position:relative;min-height:460px;display:flex;align-items:flex-end;overflow:hidden;background-size:cover;background-position:center}
.rvh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,60,84,.1),rgba(11,60,84,.78))}
.rvh .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:40px}
.rvh a.rev-back{color:rgba(255,255,255,.9)}
.rvh h1{color:#fff;margin:10px 0 0}
.rvh .loc{color:rgba(255,255,255,.85);font-weight:600;margin-top:8px;font-size:1.05rem}
.rvm{max-width:820px;margin:0 auto}
.rv-meta{color:var(--muted);font-size:.9rem;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-qbox{display:flex;gap:18px;align-items:center;background:rgba(82,161,153,.1);border-left:4px solid var(--teal);border-radius:12px;padding:20px 24px;margin:0 0 8px}
.rv-qbox img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:center top;flex:none}
.rv-qbox .q{font-size:1.16rem;font-weight:600;color:var(--navy);font-style:italic;line-height:1.4}
.rv-qbox .who{margin-top:8px;font-weight:700;color:var(--navy);font-size:.94rem}
.rv-qbox .who small{display:block;font-weight:500;color:var(--muted)}
.rvm h2{color:var(--teal);font-size:1.4rem;margin:34px 0 10px}
.rvm p{margin:0 0 12px}
.rv-figs{display:grid;gap:14px;margin:20px 0 8px}
.rv-figs.two{grid-template-columns:1fr 1fr}
.rv-figs img{width:100%;height:auto;border-radius:14px;display:block;object-fit:cover}
.rv-figs.narrow{max-width:420px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.rv-figs.two{grid-template-columns:1fr}.rvh{min-height:360px}}
/* Homepage — trusted-by logo strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;margin-top:30px}
.logos a{display:inline-flex;align-items:center;padding:12px 18px;border-radius:14px;transition:.25s}
.logos img{height:63px;width:auto;max-width:240px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:.2s}
.logos a:hover img{filter:none;opacity:1}
.logos a.on{background:rgba(82,161,153,.16)}
.logos a.on img{filter:none;opacity:1}
.logos-home a.on{background:rgba(82,161,153,.18);border-radius:999px}
/* Homepage — testimonial carousel */
.tcar{position:relative;height:360px;margin:32px 0 180px}
.tcar-bg{position:absolute;inset:0;border-radius:20px;overflow:hidden;background-size:cover;background-position:center}
.tcar-bg::after{content:"";position:absolute;inset:0;background:rgba(11,60,84,.5)}
.tcar-card{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);z-index:2;width:min(640px,calc(100% - 32px));background:#fff;border-radius:16px;padding:52px 42px 34px;text-align:center;box-shadow:0 20px 60px rgba(10,15,30,.28)}
.tcar-mark{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:11px;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;line-height:1}
.tcar-q{font-size:1.5rem;line-height:1.4;font-weight:600;color:var(--navy);margin:6px 0 22px}
.tcar-face{width:58px;height:58px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:3px solid #fff;box-shadow:0 2px 10px rgba(10,15,30,.18)}
.tcar-name{font-weight:700;color:var(--navy)}
.tcar-role{color:var(--muted);font-size:.9rem}
.tcar-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--navy);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.tcar-btn:hover{background:#fff}
.tcar-prev{left:14px}.tcar-next{right:14px}
/* Evidence — portrait carousel: card starts at 25% of the speaker image, longer text */
/* Ergonomics-hero + reviewcarrousel passen samen in het eerste scherm (besluit Jan
   29 jul): compacte hero, kop op één regel (script in de pagina), kleinere logo's,
   lagere foto en een strakker citaatkaartje. Onder 861px gelden de mobiele regels. */
.hero-erg{padding:38px 0 12px}
.hero-erg h1{font-size:min(3.25rem,4.4vw);line-height:1.12;margin:0}
.hero-erg .lead{max-width:52rem;margin-top:12px}
#reviews{padding:10px 0 0}
#reviews .logos{margin-top:2px;gap:10px 20px}
#reviews .logos img{height:44px}
#reviews .logos a{padding:8px 14px}
#reviews .ecar-q{font-size:1.06rem;margin-bottom:8px}
#reviews .ecar-more{font-size:.92rem;line-height:1.55;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* Desktop: portret NAAST het citaat. Een breed, laag beeld maakte van deze
   staande portretten een extreme close-up; naast elkaar blijft het beeld klein
   (wat Jan vroeg) én herkenbaar, en de hele carrousel past boven de vouw. */
@media(min-width:861px){
  #reviews .ecar{max-width:1010px;margin:16px auto 0;display:grid;
    grid-template-columns:290px minmax(0,1fr);gap:26px;align-items:stretch}
  #reviews .ecar-bg{height:auto;border-radius:18px;background-position:center 22%}
  #reviews .ecar-card{position:static;transform:none;width:auto;text-align:left;
    padding:26px 30px;box-shadow:0 14px 40px rgba(10,15,30,.14)}
  #reviews .tcar-mark{top:-20px;left:26px;transform:none}
  /* Pijlen buiten het portret en de kaart, niet eroverheen. */
  #reviews .ecar .tcar-prev{left:-52px}
  #reviews .ecar .tcar-next{right:-52px}
  #reviews .ecar .tcar-btn{background:#fff;box-shadow:0 4px 14px rgba(10,15,30,.12)}
}
/* Mobiel blijft de gestapelde opzet: beeld boven, kaart eroverheen. */
@media(max-width:860px){
  .hero-erg{padding:56px 0 20px}
  .hero-erg h1{font-size:2rem}
  #reviews .ecar{margin:16px auto 300px}
  #reviews .ecar-bg{height:clamp(210px,32vh,300px)}
  #reviews .ecar-card{padding:26px 24px 20px}
  /* Vijf logo's onder elkaar kostte ~475px scrollen vóór het eerste citaat. */
  #reviews .logos img{height:34px;max-width:150px}
  #reviews .logos a{padding:6px 10px}
}
.ecar{position:relative;max-width:760px;margin:30px auto 300px}
.ecar-bg{width:100%;height:540px;border-radius:22px;overflow:hidden;background-size:cover;background-position:center 15%;position:relative}
.ecar-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,60,84,0),rgba(11,60,84,.28))}
.ecar-card{position:absolute;left:50%;top:100%;transform:translate(-50%,-20%);width:min(680px,calc(100% - 34px));z-index:2;background:#fff;border-radius:16px;padding:46px 40px 30px;text-align:center;box-shadow:0 22px 60px rgba(10,15,30,.32)}
.ecar-q{font-size:1.3rem;line-height:1.4;font-weight:700;color:var(--navy);margin:0 0 12px}
.ecar-more{color:var(--ink);font-size:.98rem;line-height:1.6;margin:0 0 16px}
.ecar .tcar-btn{top:50%;transform:translateY(-50%)}
@media(max-width:600px){.ecar{margin-bottom:340px}.ecar-bg{height:430px}.ecar-card{padding:40px 22px 26px}.ecar-q{font-size:1.12rem}}
@media(max-width:900px){.rgrid{grid-template-columns:1fr 1fr}.rev-grid{grid-template-columns:1fr;gap:18px}.rev-photo{position:static;aspect-ratio:16/10;max-width:100%}}
@media(max-width:560px){.rgrid{grid-template-columns:1fr}.tcar-q{font-size:1.2rem}.tcar-card{padding:46px 24px 30px}}
.hero-media{aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,#dde8f4,#eef4fb);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;position:relative;overflow:hidden}
/* Variant voor foto's met een transparante/witte achtergrond (PNG): zonder de
   blauwe verloop-vulling en het randje, zodat de foto op de witte pagina lijkt
   te zweven i.p.v. in een blauw kader te staan. */
.hero-media.is-plain{background:transparent;border-color:transparent}
.ph{color:#9fb3c8;font-weight:600;font-size:.8rem;letter-spacing:.04em;text-align:center;padding:20px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* trust strip */
.strip{background:var(--dark);color:#fff;padding:18px 0}
.strip .wrap{display:flex;gap:34px;align-items:center;justify-content:center;flex-wrap:wrap;color:rgba(255,255,255,.8);font-size:.86rem;font-weight:600}
.strip b{color:#fff}

/* sections */
.bg-2{background:var(--bg-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* /about hero: tekstkolom breder en foto smaller dan de standaard 50/50, zodat
   de H1 op twee regels past en de twee kolommen ongeveer even hoog eindigen.
   Alleen vanaf het bestaande desktopbreekpunt; daaronder valt .split zelf al
   terug op één kolom. */
@media(min-width:861px){
  .about-hero{grid-template-columns:57fr 43fr;gap:48px}
  .about-hero h1{font-size:clamp(2.1rem,3.3vw,2.85rem)}
  .about-hero h1 .h1-line{display:block}
  /* Homepage-hero. Tot 11 aug 2026 was de videoloop smal staand (400x720) en
     kreeg de tekst daarom de ruimere kolom (40/60). De nieuwe opname is bijna
     vierkant (662x720), dus dat is omgedraaid: een smalle beeldkolom zou het
     beeld nu onnodig klein maken, terwijl een even brede kolom precies uitkomt.
     Alleen vanaf dit breekpunt; daaronder valt .split zelf al terug op één kolom
     en staat de video vanzelf boven de tekst. */
  .home-hero{grid-template-columns:1fr 1fr;gap:56px}
  /* .vidbox.tall staat op /why-orthostand naast lopende tekst en is daar bewust
     smal (340px, gecentreerd in zijn kolom). Als hoofdbeeld van de hero mag hij
     op zijn eigen formaat staan en tegen de linkerrand van .wrap, anders houdt
     hij aan weerszijden een gat over en oogt de hero ingesprongen. De aftopping
     op 520px houdt de hero op ~565px hoog; zonder die grens zou hij op een breed
     scherm meegroeien en de proof bar onder de vouw duwen. */
  .home-hero .vidbox.tall{max-width:520px;justify-self:start}
  /* STAPPER, tweekolomsstand. Geldt alleen samen met .is-js: zonder JavaScript
     blijft ook op een breed scherm de gestapelde weergave staan, want dan zou er
     niets van stap wisselen en bleven vier van de vijf foto's onzichtbaar. */
  /* Zonder JavaScript blijft de gestapelde weergave staan, ook hier. Op een breed
     scherm zouden die vijf foto's dan over de volle 1140px lopen; dat is voor een
     terugval onnodig fors, dus krijgt het blok een leesbare kolombreedte. */
  .sx:not(.is-js){max-width:620px;margin-inline:auto}
  /* Twee panelen naast elkaar, even hoog. De hoogte komt van het tekstpaneel;
     stretch (de standaard van grid) rekt het beeldvlak ernaast mee op. De smalle
     gap hoort bij het panelenbeeld: het zijn twee vlakken naast elkaar, geen
     tekstkolom met een losse foto. */
  .sx.is-js{display:grid;grid-template-columns:47fr 53fr;gap:20px;align-items:stretch}
  /* LINKERPANEEL: kop, ondertitel, stappen en link, op een zachte achtergrond. */
  .sx.is-js .sx-pane{display:flex;flex-direction:column;order:1;background:var(--bg-2);border-radius:16px;padding:46px 42px}
  .sx.is-js .sechead{margin-bottom:0}
  /* margin-top:auto duwt de stappenlijst naar beneden, zodat de kop bovenin het
     paneel blijft staan en de lijst onderin, net als in de referentie.
     De ENE scheidingslijn staat hier, boven de hele lijst; de stappen onderling
     hebben er sinds 5 aug 2026 geen meer. */
  .sx.is-js .sx-list{display:grid;gap:0;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
  .sx.is-js .sx-item{margin-bottom:0;padding:14px 0;border-top:0}
  /* RECHTERPANEEL: alleen het beeld, dat de hoogte van het tekstpaneel volgt.
     Geen aspect-ratio meer (die zou de hoogte vastzetten en de panelen ongelijk
     maken); de min-height is enkel een bodem voor korte schermen. */
  .sx.is-js .sx-frame{display:block;order:2;position:relative;min-height:520px;border-radius:16px;overflow:hidden;background:var(--bg-2)}
  .sx.is-js .sx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .3s ease}
  .sx.is-js .sx-img.is-front{opacity:1}
  /* Titel links, nummer rechts tegen de rand van de kolom. Het nummer staat in de
     HTML vóór de titel (dat is de leesvolgorde in de gestapelde weergave), dus
     hier wordt hij met order naar achteren gezet in plaats van verplaatst.
     De titels staan in dezelfde stijl als de eyebrow: klein, vet, met
     letterafstand en in hoofdletters. Alle stappen even groot, ook de actieve:
     een maatverschil zou de lijst laten verspringen bij elke doorloop. */
  .sx.is-js .sx-head{justify-content:space-between;gap:26px}
  .sx.is-js .sx-t{order:1;font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.45}
  .sx.is-js .sx-n{order:2;font-size:1.05rem;font-weight:400;min-width:0;line-height:1.45;letter-spacing:.08em}
  .sx.is-js .sx-desc{padding-inline-start:0;font-size:.92rem}
  /* Gedempt tot bijna weg, zodat de actieve stap er echt uit springt. De titel
     blijft leesbaar genoeg om te kunnen kiezen, de beschrijving vervalt. */
  .sx.is-js .sx-item:not(.is-active) .sx-desc{display:none}
  .sx.is-js .sx-item:not(.is-active) .sx-n{color:var(--muted);opacity:.32}
  .sx.is-js .sx-item:not(.is-active) .sx-t{color:var(--muted);opacity:.32}
  /* De actieve stap krijgt de merkkleur, alleen in kleur en niet in grootte of
     gewicht, zodat de lijst niet verspringt terwijl de stapper doorloopt. */
  .sx.is-js .sx-item.is-active .sx-t{color:var(--teal)}
  .sx.is-js .sx-head:hover .sx-t,.sx.is-js .sx-head:focus-visible .sx-t,
  .sx.is-js .sx-head:hover .sx-n,.sx.is-js .sx-head:focus-visible .sx-n{opacity:1}
  @media(prefers-reduced-motion:reduce){.sx.is-js .sx-img{transition:none}}
}
.flow > * + *{margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;counter-reset:s}
.steps-5{grid-template-columns:repeat(5,1fr)}
.step{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px}
.step::before{counter-increment:s;content:counter(s);display:flex;width:34px;height:34px;border-radius:9px;background:var(--accent-l);color:var(--accent);font-weight:700;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{font-size:.9rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.cards.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cards.four{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cards.four{grid-template-columns:1fr}}
/* Twee kaarten naast elkaar (/press boilerplate). Als modifier i.p.v. een
   inline style, want een inline grid-template-columns wint het altijd van het
   mobiele breekpunt en dan blijven het twee onleesbaar smalle kolommen. */
.cards.two{grid-template-columns:1fr 1fr}
@media(max-width:860px){.cards.two{grid-template-columns:1fr}}
/* "The hidden cost" — brochure composition on a navy section: illustration (with
   numbered points) beside boxed panels; a 2x2 panel grid up top, a larger knee panel below.
   #choose (/support, "Choose your type of support") hangt er sinds 13 aug 2026
   in dezelfde selector aan, zodat het dezelfde --dark is en er geen tweede
   donkerblauw ontstaat. Let op de h2-regel: bij #choose staat daar bewust
   .center voor, want de h3's van de .nav-card's eronder moeten juist navy
   blijven (die kaarten hebben een witte achtergrond).
   #reverse (/why-orthostand sectie 5, deel 2, 18 aug 2026) hangt sinds die
   datum ook in deze selectors: nog altijd één donkerblauw op de site. */
#familiar,#hidden-cost,#choose,#reverse,.sec-dark{background:var(--dark);color:#fff}
#familiar .eyebrow,#hidden-cost .eyebrow,#choose .eyebrow,#reverse .eyebrow,.sec-dark .eyebrow{color:var(--teal)}
#familiar h2,#hidden-cost h2,#hidden-cost h3,#choose .center h2,#reverse h2,.sec-dark h2,.sec-dark h3{color:#fff}
#familiar .flow p,#hidden-cost .lead,#reverse .flow p,.sec-dark .flow p,.sec-dark .lead{color:rgba(255,255,255,.78)}
/* .sec-dark is dezelfde donkere sectie, maar als klasse in plaats van een id
   (toegevoegd 16 aug 2026 voor sectie 3 en 5 van /m30). Hij hangt bewust aan
   dezelfde selectors als de drie id's hierboven: zo is er één donkerblauw op de
   site en geen tweede dat er net naast zit. De .checks-regel hieronder is de
   donkere variant van dat lijstje: alleen de tekstkleur, want het mintgroene
   bolletje met het vinkje leest op donker net zo goed als op wit. */
.sec-dark .checks li{color:rgba(255,255,255,.82)}
.sec-dark .checks b{color:#fff}
/* Why-Orthostand hero illustration — big, transparent line art */
.posture-hero{display:block;width:100%;max-width:1080px;height:auto;margin:6px auto 0}

/* /why-orthostand #familiar: sinds 2 aug 2026 een videoloop links en twee
   alinea's rechts, op dezelfde donkerblauwe achtergrond als #hidden-cost (zie de
   regel daarboven, waar #familiar in dezelfde selector staat). De vijf
   .recog-regels met hun teal streepje zijn vervallen. */
.vidbox{position:relative;border-radius:16px;overflow:hidden;background:#0a3448;aspect-ratio:876/720}
.vidbox-el,.vidbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0a3448}
/* Afspeelknop, alleen gezet door het script bij prefers-reduced-motion. */
.vidbox-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border:0;border-radius:50%;background:var(--teal);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(3,20,30,.45)}
.vidbox-play svg{width:32px;height:32px;fill:currentColor;margin-left:3px}
.vidbox.is-playing .vidbox-play{display:none}
/* /why-orthostand #reverse: die opname is staand gefilmd (404x720). Op de
   volle kolombreedte zou het venster ruim 900px hoog worden, dus de breedte is
   afgetopt en het venster staat gecentreerd in zijn kolom.
   Let op: aftoppen met een auto-marge kan hier niet. Een grid-item met
   margin-inline:auto krimpt naar zijn inhoud, en de inhoud is een absoluut
   gepositioneerde <video>, dus dan wordt het venster 0 breed. Vandaar
   width:100% (die geeft een echte breedte om af te toppen) plus justify-self. */
.vidbox.tall{aspect-ratio:404/720;width:100%;max-width:340px;justify-self:center}
/* Video rechts van de tekst op desktop, maar in de HTML staat hij ervóór omdat
   hij op mobiel bovenaan hoort. Onder 861px valt .split terug op één kolom en
   vervalt de order vanzelf. Zonder .media-right (zoals #familiar en #reverse)
   blijft de video gewoon links staan: de volgorde in de HTML is dan al goed. */
@media(min-width:861px){.split.media-right > .vidbox{order:2}}

/* .cmp draagt de basismaat van de vergelijkingsschuifbalk op de homepage; het
   .cmp.is-js-blok verderop bouwt daarop voort. De rest van dit blok (.cmp-head
   t/m .cmp-concl en .sidenote) hoorde bij de sectie #mechanism van
   /why-orthostand en is op 14 aug 2026 verwijderd, samen met die sectie. */
.cmp{max-width:780px;margin:36px auto 0}

/* /why-orthostand #evidence: het werkgeversblok onder de cijfers, en #mechanism:
   het verzuimblok met het Deense onderzoek. Bewust rustiger dan de rest van de
   sectie: alleen een kader, geen kleurvlak. */
.employer,.factbox{max-width:720px;margin:42px auto 0;border:1px solid var(--line);border-radius:16px;padding:28px 30px;background:#fff}
.employer h3,.factbox h3{margin-bottom:10px}
.employer p,.factbox p{font-size:.97rem}
.factbox p + p{margin-top:14px}
.employer .btn{margin-top:18px}
/* #alternative staat op wit, dus een wit blok zou daar wegvallen. Zelfde kader,
   radius en typografie als het verzuimblok, alleen het vlak eronder is --bg-2. */
#alternative .factbox{background:var(--bg-2);margin-top:52px}

/* /why-orthostand #alternative: de drie punten naast de video. Ze grijpen terug
   op "The cost", waar dezelfde plekken op het lichaam als genummerde kaarten
   staan; hier bewust losse regels met een teal vinkje, zodat het herkenbaar is
   maar niet hetzelfde blok nog een keer. Geen nieuwe kleuren. */
.upright{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:15px}
.upright li{position:relative;padding-inline-start:40px;color:var(--muted);font-size:.97rem;line-height:1.55}
.upright li b{color:var(--navy)}
.upright li::before{content:"\2713";position:absolute;inset-inline-start:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Homepage "What changes for you": dezelfde .upright-lijst, sinds 5 aug 2026 met
   de before/after-tekening ernaast in een .split. De breedtebeperking blijft als
   vangnet voor de gestapelde weergave onder 861px, waar de lijst anders over de
   volle breedte zou lopen en de regels te lang worden om prettig te lezen. */
.changes{max-width:760px}
.changes-more{margin-top:28px}
.changes-more a{font-weight:600}

/* SECTIE 4 /why-orthostand, HET CIJFER (deel 2, 18 aug 2026; compacter gemaakt
   op 18 aug 2026). Was een dominant, alleenstaand cijferblok (76%+45%); Kamo
   wilde de sectie rustiger en korter, dus alleen 45% blijft over, als smalle
   "evidence-strip" direct onder de Static Strain-tekst. Een border-top plus
   een klein stukje extra padding maken het verschil met de tekst erboven
   zichtbaar, zonder er een nieuwe zware sectie van te maken (geen eigen
   achtergrondkleur). Op desktop staan cijfer en tekst naast elkaar; onder
   520px vallen ze terug op gestapeld. Zelfde visuele taal (teal, dun gewicht,
   tabular-nums) als .pf-n in de proofgrid, geen nieuwe kleur. */
.strain-strip{max-width:640px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;text-align:center}
.strain-strip-n{flex:none;font-size:clamp(2.6rem,6vw,3.4rem);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums}
.strain-strip-l{font-size:1rem;color:var(--navy);max-width:34ch;text-align:left}
@media(max-width:520px){.strain-strip{flex-direction:column}.strain-strip-l{text-align:center}}

/* .m30-cta-art is op 3 sep 2026 vervallen. Die klasse zette het productbeeld in
   de sectie MEET THE M30 op /ergonomics los en gecentreerd onder de tekst. Die
   sectie heeft nu dezelfde compositie als de hero van /m30 (tekst links, product
   rechts) en gebruikt daarom letterlijk .m30-hero / .m30-hero-copy /
   .m30-hero-art verderop in dit bestand, zodat er maar één set regels is. */

/* Tweeregelige koppen in de nieuwe secties hierboven, zelfde patroon als
   .ways-split h2 verderop in dit bestand. */
#evidence h2 .h2-line,#reverse h2 .h2-line,#meet-m30 h2 .h2-line{display:block}

/* HOMEPAGE-STAPPER (#how). Twee weergaven uit één stuk HTML.
   BASIS = gestapeld: beeld, tekst, beeld, tekst. Dat is wat je krijgt op mobiel,
   zonder JavaScript en bij prefers-reduced-motion, en het is bewust ook de staat
   waar de CSS mee begint. Zo is de terugval geen apart geval dat stuk kan gaan.
   .sx-frame en .sx-list zijn dan display:contents, waardoor hun kinderen losse
   flex-items van .sx worden en met order door elkaar geweven kunnen worden:
   foto 1 (order 1), stap 1 (order 2), foto 2 (order 3), enzovoort.
   OPWAARDERING = twee kolommen, alleen als het script .is-js zet EN het scherm
   minstens 861px is (zie de regels verderop in de brede media-query).
   Sinds 5 aug 2026 zit ook de sectiekop in dit blok, in .sx-pane samen met de
   stappenlijst en de link. Gestapeld is ook .sx-pane display:contents, zodat de
   kop gewoon het eerste flex-item is en het weefpatroon eronder ongemoeid blijft. */
.sx{display:flex;flex-direction:column;gap:14px}
.sx-frame{display:contents}
.sx-list{display:contents}
.sx-pane{display:contents}
.sx .sechead{margin-bottom:10px}
.sx-img{width:100%;height:auto;border-radius:14px;display:block}
.sx-item{display:grid;gap:2px;margin-bottom:16px}
/* Het weefpatroon van de gestapelde weergave: foto 1, stap 1, foto 2, stap 2, ...
   De foto's staan in de HTML bij elkaar in .sx-frame en de stappen in .sx-list;
   deze order-regels vlechten ze door elkaar zonder een foto twee keer te plaatsen. */
.sx-img:nth-child(1){order:1}.sx-item:nth-child(1){order:2}
.sx-img:nth-child(2){order:3}.sx-item:nth-child(2){order:4}
.sx-img:nth-child(3){order:5}.sx-item:nth-child(3){order:6}
.sx-img:nth-child(4){order:7}.sx-item:nth-child(4){order:8}
.sx-img:nth-child(5){order:9}.sx-item:nth-child(5){order:10}
/* De knop is in de gestapelde weergave geen knop om naar te kijken: geen kader,
   geen achtergrond, gewoon het nummer en de titel op een rij. */
.sx-head{display:flex;align-items:baseline;gap:14px;width:100%;text-align:start;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.sx-n{font-size:1.5rem;font-weight:300;color:var(--teal);font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:end;flex:none}
.sx-t{font-size:1.16rem;font-weight:700;color:var(--navy);line-height:1.35}
.sx-desc{color:var(--muted);font-size:.97rem;line-height:1.6;padding-inline-start:calc(2.4ch + 14px)}
.sx-desc p{margin:6px 0 0}
/* De voortgangsbalk hangt onder de actieve stap en bestaat alleen zolang het
   automatisch doorlopen loopt; het script haalt hem weg zodra iemand zelf kiest. */
.sx-bar{display:block;height:2px;background:var(--line);border-radius:2px;margin-top:12px;overflow:hidden}
.sx-bar i{display:block;height:100%;width:0;background:var(--teal);animation:sx-fill 5s linear forwards}
@keyframes sx-fill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.sx-bar{display:none}}

/* VERGELIJKINGSSCHUIFBALK (#apart). Zelfde opzet: gestapeld is de basis, de
   overlay is de opwaardering. Zonder .is-js staan de twee foto's gewoon onder
   elkaar met hun eigen bijschrift, wat ook precies de mobiele weergave is. */
.cmp{margin-top:30px}
.cmp-box{display:grid;gap:22px;max-width:460px;margin:0 auto}
.cmp-fig{margin:0}
.cmp-fig img{width:100%;height:auto;display:block;border-radius:16px}
.cmp-fig figcaption{margin-top:10px;font-size:.84rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.cmp-handle,.cmp-range{display:none}
.cmp-hint{display:none}
/* #apart staat sinds 5 aug 2026 in twee kolommen: de tekst links, de schuifbalk
   rechts. Onder 861px is .split één kolom en komt de tekst er vanzelf boven.
   De sectiekop staat in de linkerkolom en niet erboven, dus het raster begint
   meteen bovenaan de sectie en heeft geen marge nodig. */
.apart-grid{margin-top:0}
.apart-copy .sechead + p{margin-top:24px}
/* .cmp heeft van zichzelf margin:36px auto 0. Als rasterkolom zou die auto-marge
   hem naar zijn inhoud laten krimpen in plaats van de kolom te vullen, dus hier
   de marge helemaal weg; het centreren doet .cmp-box zelf al. */
.apart-grid .cmp{margin:0}
.apart-copy .callout-green{margin-top:22px}
/* Overlay-stand. De rechterfoto wordt weggeknipt tot aan de handgreep, dezelfde
   clip-path-techniek als .posture-scroll op /why-orthostand. --p is de stand van
   de handgreep in procenten en wordt door het script gezet. */
.cmp.is-js .cmp-box{--p:50;position:relative;display:block;aspect-ratio:776/1024;border-radius:18px;overflow:hidden;box-shadow:0 20px 55px rgba(1,67,92,.22);touch-action:none}
.cmp.is-js .cmp-fig{position:absolute;inset:0}
.cmp.is-js .cmp-fig img{width:100%;height:100%;object-fit:cover;border-radius:0}
/* Alleen de FOTO wordt weggeknipt, niet de hele figure: anders zou het bijschrift
   "Standing, loaded" mee weggeknipt worden zodra de handgreep er voorbij schuift,
   terwijl beide labels altijd zichtbaar moeten blijven. */
.cmp.is-js .cmp-fig-b img{clip-path:inset(0 0 0 calc(var(--p) * 1%))}
.cmp.is-js .cmp-fig figcaption{position:absolute;top:14px;margin:0;z-index:3;color:#fff;background:rgba(1,67,92,.72);padding:6px 13px;border-radius:999px;font-size:.72rem;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cmp.is-js .cmp-fig-a figcaption{inset-inline-start:14px}
.cmp.is-js .cmp-fig-b figcaption{inset-inline-end:14px}
.cmp.is-js .cmp-handle{display:block;position:absolute;top:0;bottom:0;left:calc(var(--p) * 1%);width:3px;margin-inline-start:-1.5px;background:#fff;box-shadow:0 0 14px rgba(1,67,92,.5);z-index:4;pointer-events:none}
.cmp.is-js .cmp-handle::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(1,67,92,.4)}
/* De pijlen in de knop zijn puur decoratief; de echte bediening zit in de range. */
.cmp.is-js .cmp-handle::before{content:"\25C0\00a0\25B6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:.62rem;color:var(--dark);letter-spacing:-.04em}
/* De range ligt onzichtbaar over het hele vlak: die levert slepen, vegen en de
   pijltjestoetsen. Alleen de duim vangt de muis, en die is zo breed als de
   handgreep en zo hoog als het beeld. */
.cmp.is-js .cmp-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:5;background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize}
.cmp.is-js .cmp-range:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.cmp.is-js .cmp-range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:1200px;background:transparent;border:0;cursor:ew-resize}
.cmp.is-js .cmp-range::-moz-range-thumb{width:46px;height:1200px;background:transparent;border:0;cursor:ew-resize}
.cmp.is-js .cmp-range::-moz-range-track{background:transparent;border:0}
.cmp.is-js .cmp-hint{display:block;text-align:center;margin-top:12px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Scroll parallax: light-green cards drift down a few mm as you scroll */
.drift{transition:transform .1s linear;will-change:transform}
@media(prefers-reduced-motion:reduce){.drift{transform:none!important}}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
.card .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-l);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.2rem}
.card .ic svg,.ic svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{font-size:.94rem}
/* "The lift", klikbare kaart die bij hover een paar pixels opkomt, met een
   tealbalk die onderaan omhoog groeit: het platform dat opkomt, geen sprong.
   Bij prefers-reduced-motion blijft de kaart stil en verschijnt alleen de balk. */
.card.lift{display:block;position:relative;overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out}
.card.lift::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--teal);transition:height .2s ease-out}
.card.lift:hover,.card.lift:focus-visible{transform:translateY(-6px);box-shadow:0 14px 32px rgba(11,60,84,.13);border-color:var(--line)}
.card.lift:hover::after,.card.lift:focus-visible::after{height:4px}
.card.lift .lift-t{display:inline-flex;align-items:center;gap:8px;color:var(--navy)}
.card.lift .lift-t::after{content:"\2192";color:var(--teal);font-weight:700;transition:transform .2s ease-out}
.card.lift:hover .lift-t::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .card.lift,.card.lift .lift-t::after{transition:none}
  .card.lift:hover,.card.lift:focus-visible{transform:none}
  .card.lift:hover .lift-t::after{transform:none}
}
/* Donkere kaartvariant (homepage): petrol vlak met witte tekst en een
   lichtgroene titel, die bij hover terugklapt naar de normale witte kaart.
   Als modifier op de .cards-container gezet, zodat .card zelf ongemoeid blijft
   voor de andere pagina's (about, support, configurator, why-orthostand). */
.cards-dark .card{background:var(--dark);border-color:transparent;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.cards-dark .card h3{color:var(--teal);transition:color .28s ease}
.cards-dark .card p{color:rgba(255,255,255,.82);transition:color .28s ease}
.cards-dark .card .ic{background:rgba(255,255,255,.12);transition:background .28s ease}
.cards-dark .card .ic svg{stroke:#fff;transition:stroke .28s ease}
.cards-dark .card:hover{background:#fff;border-color:var(--line);box-shadow:0 12px 30px rgba(3,20,30,.10)}
.cards-dark .card:hover h3{color:var(--navy)}
.cards-dark .card:hover p{color:var(--ink)}
.cards-dark .card:hover .ic{background:var(--accent-l)}
.cards-dark .card:hover .ic svg{stroke:var(--accent)}
@media(prefers-reduced-motion:reduce){
  .cards-dark .card,.cards-dark .card h3,.cards-dark .card p,
  .cards-dark .card .ic,.cards-dark .card .ic svg{transition:none}
}
/* Brochure-faithful callouts (pages 4–5): green pills, green cards, petrol statement boxes */
.pill-row{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 4px}
.pill-green{background:#d6ebe5;color:var(--dark);font-weight:600;padding:9px 20px;border-radius:999px;font-size:1rem}
.card.green{background:#dcece7;border-color:#c6e0d8}
.card.green .ic{background:var(--dark);border-radius:50%;width:50px;height:50px}
.card.green .ic svg{stroke:#fff}
.callout-dark{background:var(--dark);border-radius:16px;padding:24px 30px;margin:22px 0 0}
.callout-dark p{margin:0;color:#fff;font-weight:600;font-size:1.08rem;line-height:1.5}
.stmt-bold{font-weight:700;color:var(--dark);font-size:1.22rem;line-height:1.3;margin:28px 0 0}
/* Brochure M30 sections (pages 8–12) */
.callout-green{background:#dcece7;border-radius:18px;padding:28px 34px;margin:0}
.callout-green p{color:var(--dark);font-size:1.06rem}
.callout-green p:last-child{margin-bottom:0}
.callout-green .fin{font-weight:700;color:var(--dark)}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.checks li{display:flex;gap:14px;align-items:flex-start;color:var(--ink);font-size:1.05rem}
.checks .ck{flex:none;width:36px;height:36px;border-radius:50%;background:#cfe6df;color:var(--dark);display:flex;align-items:center;justify-content:center;font-weight:800}
.checks .ck svg{width:20px;height:20px;stroke:var(--dark);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.results{display:grid;gap:12px;margin-top:22px}
.result-row{display:flex;align-items:center;gap:20px;background:var(--dark);border-radius:14px;padding:15px 26px}
.result-row .rn{font-size:1.55rem;font-weight:800;color:var(--teal);min-width:50px;line-height:1}
.result-row p{color:#fff;margin:0;font-weight:500}
/* Statistieken (/about): vier items in één rij over de volle breedte, met een
   heel groot, dun teal cijfer, een dun lijntje eronder en daaronder klein
   gedempt de uitleg. Geen kaders om de losse items: de scheiding gebeurt met
   dunne verticale lijnen tussen de cellen, zodat het blok licht blijft. */
.proofgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.pf{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 18px}
.pf + .pf{border-left:1px solid var(--line)}
/* min-width + tabular-nums: de cel verspringt niet terwijl het getal optelt. */
.pf-n{font-size:clamp(2.6rem,4.4vw,3.9rem);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums;min-width:4ch}
.pf-n::after{content:"";display:block;width:72px;height:1px;background:var(--line);margin:16px auto 13px}
.pf-l{font-size:.79rem;line-height:1.5;color:var(--muted);max-width:20ch}
@media(max-width:760px){
  .proofgrid{grid-template-columns:1fr 1fr}
  .pf{padding:24px 12px}
  .pf:nth-child(odd){border-left:0}
  .pf:nth-child(n+3){border-top:1px solid var(--line)}
}
.spec-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:center}
@media(max-width:820px){.spec-split{grid-template-columns:1fr}}
/* "The solution" — Mac-style: big photo, copy set directly on the empty
   wall in the shot (left ~55% of orthostand-wide-room.png is plain wall) */
.strain-photo{position:relative;border-radius:28px;overflow:hidden;background:#fff}
.strain-photo img{width:100%;height:auto;display:block}
/* padding-top lijnt de kop uit met de bovenkant van het apparaat in de foto.
   Die zit op 19,1% van de BEELDHOOGTE (gemeten 3 aug 2026). CSS rekent
   procentuele padding echter tegen de BREEDTE van het blok, en de foto heeft
   verhouding 1876:1061, dus 0,191 / 1,768 = 10,8% van de breedte. Die verhouding
   klopt op elke schermbreedte, want hoogte en breedte schalen samen mee.
   Verandert de foto, meet dan opnieuw en reken opnieuw om. */
.strain-copy{position:absolute;inset:0;width:52%;padding:48px;display:flex;flex-direction:column;justify-content:flex-start;padding-top:10.8%}
@media(max-width:900px){
  .strain-copy{position:static;width:100%;padding:28px 4px 0}
  .strain-photo{margin-top:-26px}
}
.how-steps{display:grid;gap:24px;margin-top:26px}
.how-step{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.how-step .sn{width:46px;height:46px;border-radius:50%;background:var(--dark);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.12rem}
.how-step h3{margin:6px 0 4px}
/* Tijdlijn op /story: modifier op .how-steps, geen nieuw component. Het ronde
   cijfer wordt een pil met een jaartal, met een verticale lijn ertussen. */
.how-steps.timeline{gap:0;margin-top:34px}
.how-steps.timeline .how-step{grid-template-columns:96px 1fr;gap:26px;position:relative;padding-bottom:34px}
.how-steps.timeline .how-step::before{content:"";position:absolute;left:47px;top:52px;bottom:0;width:2px;background:var(--line)}
.how-steps.timeline .how-step:last-child{padding-bottom:0}
.how-steps.timeline .how-step:last-child::before{display:none}
.how-steps.timeline .sn{width:96px;border-radius:999px;font-size:1rem;letter-spacing:.01em}
@media(max-width:640px){
  .how-steps.timeline .how-step{grid-template-columns:76px 1fr;gap:16px}
  .how-steps.timeline .sn{width:76px;font-size:.88rem}
  .how-steps.timeline .how-step::before{left:37px}
}
/* Cascade-onthulling (.seq): de directe kinderen van het blok faden één voor één
   in bij het scrollen, met circa 80ms ertussen. Gebruikt door de tijdlijn op
   /story en door de herkenningsregels op /why-orthostand; het script staat in
   nav.js. De verbergende regel hangt bewust aan .is-anim, die alleen door dat
   script wordt gezet: zonder JS (en bij prefers-reduced-motion, want dan zet het
   script hem niet) staat de volledige tekst er gewoon meteen. */
.seq.is-anim > *{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
.seq.is-anim > .is-in{opacity:1;transform:none}
.how-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:46px;align-items:start;margin-top:28px}
.how-photos{display:grid;grid-template-columns:1fr;gap:16px}
.how-photos img{width:100%;height:auto;border-radius:12px;display:block}
@media(max-width:820px){.how-grid{grid-template-columns:1fr;gap:26px}.how-photos{grid-template-columns:1fr 1fr}}
/* How-it-works: text + photo pairs, alternating sides */
.how-rows{display:flex;flex-direction:column;gap:34px;margin-top:30px}
.how-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.how-row img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 14px 38px rgba(1,67,92,.14)}
.how-row .how-copy{display:grid;gap:22px}
.how-row .how-step h3{font-size:1.24rem}
@media(max-width:820px){.how-row{grid-template-columns:1fr;gap:18px}.how-row .how-copy{order:2}}
/* "No more floor acrobatics" — highlight sweep + rise on scroll */
.floor-acro{position:relative;display:inline-block;font-size:1.7rem;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.floor-acro>span{position:relative;z-index:1}
.floor-acro::after{content:"";position:absolute;left:-8px;right:100%;top:8%;bottom:8%;background:var(--teal);opacity:.24;border-radius:7px;z-index:0;transition:right 1.15s cubic-bezier(.2,.7,.2,1) .25s}
.floor-acro.lit{opacity:1;transform:none}
.floor-acro.lit::after{right:-8px}
@media(prefers-reduced-motion:reduce){.floor-acro{opacity:1;transform:none}.floor-acro::after{display:none}}
.audience{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.aud{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.aud .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.aud h3{font-size:1rem}.aud p{font-size:.9rem}

/* cta band */
.band{background:linear-gradient(135deg,var(--dark),var(--dark-2));color:#fff;border-radius:20px;padding:54px;text-align:center}
.band h2{color:#fff;margin-bottom:12px}
.band p{color:rgba(255,255,255,.8);max-width:54ch;margin:0 auto 26px}

/* variants table */
.variants{width:100%;border-collapse:collapse;margin-top:30px;font-size:.94rem;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.variants th,.variants td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.variants th{background:var(--bg-2);color:var(--navy);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.variants tr:last-child td{border-bottom:0}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;max-width:560px}
.field{margin-bottom:16px}
label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.inp{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-family:inherit;font-size:.95rem;color:var(--ink);outline:none}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,125,200,.12)}
textarea.inp{min-height:130px;resize:vertical}
.note{font-size:.85rem;color:var(--muted)}
.refs{max-width:820px;margin:22px auto 0;text-align:left;display:grid;gap:12px}
.ref{font-size:.85rem;line-height:1.5;color:var(--muted);padding-left:1.4em;text-indent:-1.4em}
.ref cite{font-style:italic}
.ref a{color:inherit;text-decoration:underline;word-break:break-word}
.quote-cite{display:block;margin-top:12px;font-style:normal;font-size:.85rem;opacity:.8}
.msg{display:none;border-radius:9px;padding:12px 14px;font-size:.9rem;margin-bottom:14px}
.msg.ok{display:block;background:#e8f5ee;border:1px solid #b2dfc8;color:#2a7d4f}
.msg.err{display:block;background:#fdf0ee;border:1px solid #f5c6c2;color:#c0392b}

/* HERO 3 (inactive prototype) — dark two-column hero, floating contact-form card on the right */
.hero3{position:relative;background:radial-gradient(140% 120% at 15% 0%,var(--dark-2) 0%,var(--dark) 45%,#06222f 100%);color:#fff;padding:64px 0 90px;overflow:hidden}
.hero3::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 70% at 88% 10%,rgba(82,161,153,.4),transparent 72%),
  radial-gradient(55% 60% at 22% 100%,rgba(46,125,200,.32),transparent 72%),
  linear-gradient(115deg,transparent 30%,rgba(82,161,153,.16) 50%,transparent 70%)}
.hero3-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero3-copy .eyebrow{color:var(--teal)}
.hero3-copy h1{color:#fff;margin:14px 0 18px}
.hero3-copy .lead{color:rgba(255,255,255,.78)}
.hero3-proof{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hero3-stat{display:flex;flex-direction:column;gap:2px}
.hero3-stat b{font-size:1.5rem;font-weight:700;color:#fff}
.hero3-stat span{font-size:.78rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em}
.hero3-quote{max-width:26ch;font-size:.92rem;font-style:italic;color:rgba(255,255,255,.85);line-height:1.4}
.hero3-quote cite{display:block;margin-top:6px;font-style:normal;font-size:.78rem;color:rgba(255,255,255,.55)}
.hero3-card{position:relative;z-index:1;box-shadow:0 30px 80px rgba(3,20,30,.45);border:1px solid rgba(255,255,255,.14)}
@media(max-width:860px){
  .hero3-grid{grid-template-columns:1fr}
  .hero3{padding:48px 0 60px}
}

/* footer */
footer.ft{background:var(--dark);color:rgba(255,255,255,.72);padding:56px 0 30px;font-size:.9rem}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer.ft h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
footer.ft a{color:rgba(255,255,255,.72);display:block;padding:4px 0}
footer.ft a:hover{color:#fff}
.ft-social{display:inline-flex!important;align-items:center;justify-content:center;width:32px;height:32px;padding:0!important;margin-top:14px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72)}
.ft-social:hover{background:rgba(255,255,255,.16);color:#fff}
.ft-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.5)}

@media(max-width:860px){
  .hero-grid,.split,.steps,.cards,.audience,.ft-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:block}
  section{padding:60px 0}
  .band{padding:38px 22px}
  /* Homepage-hero op mobiel: de video staat boven de tekst (dat komt vanzelf uit
     de DOM-volgorde zodra .split één kolom wordt). Bij de oude staande opname
     (400x720) was het venster op volle breedte 342x616 en duwde het de H1 onder
     de vouw; vandaar de aftopping op 300px. De nieuwe opname is bijna vierkant
     (662x720), dus op volle breedte is het venster nog maar 342x372 en past de
     kop er ruim boven de vouw bij. De aftopping mag daardoor ruimer: 330px houdt
     het venster op ~359px hoog, met de kleinere tussenruimte erbij. */
  .home-hero{gap:28px}
  .home-hero .vidbox.tall{max-width:330px}
}

/* ============ Two-row header + mega-menu (nav.js) ============ */
/* Wrapper uit de layout halen zodat .site-head sticky is t.o.v. de body (anders
   "plakt" hij alleen binnen zijn eigen wrapper-hoogte en scrolt hij toch weg). */
#site-header{display:contents}
.site-head{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.util{background:var(--dark)}
.util-in{display:flex;align-items:center;gap:14px;min-height:70px;padding:8px 0}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:8px;background:#01435c;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1.05}
.logo-txt b{font-size:1.18rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.logo-txt small{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.util-right{display:flex;align-items:center;gap:8px;margin-left:auto}
/* Losse admin-snelkoppelingen (Media Bank, Portal) in de balk. */
.util-right .util-link{color:rgba(255,255,255,.92);font-size:.9rem;font-weight:500;text-decoration:none;padding:7px 8px;border-radius:7px;white-space:nowrap;display:inline-flex;align-items:center}
.util-right .util-link:hover{color:#fff;background:rgba(255,255,255,.08)}
/* Losstaand landvlaggetje voor bezoekers (alleen vlag, geen menu). */
.util-right .country-flag{font-size:1.26rem;line-height:1;padding:6px 4px;cursor:default}
/* Landvlag 20% groter voor betere herkenbaarheid (besluit Jan). */
.admin-tools .dd.country .dd-btn{font-size:1.26rem;line-height:1}
/* Deelmenu in de utility bar (vervangt het losse LinkedIn-icoontje, 2026-07-16):
   Apple-achtig deel-icoon met uitklapmenu — LinkedIn / e-mail / link kopiëren /
   probleem melden (met screenshot). */
.util-right .share-btn{padding:7px 9px;display:inline-flex;align-items:center}
.dd-menu.share-menu{min-width:215px}
.dd-menu.share-menu a{display:flex;align-items:center;gap:10px}
.dd-menu.share-menu a svg{flex:none;color:var(--muted)}
.dd-menu.share-menu a:hover svg{color:var(--accent)}
.dd-menu.share-menu a.copied span{color:#2a7d4f;font-weight:600}
/* Tijdens de screenshot-opname het open menu verbergen. */
.dd.share.mute > .dd-menu{opacity:0!important;visibility:hidden!important}

/* "Probleem melden"-dialoog (screenshot + huidige situatie + voorstel). */
.report-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,25,40,.45);display:flex;align-items:center;justify-content:center;padding:18px}
.report-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 18px 60px rgba(20,30,50,.25);width:min(480px,100%);max-height:92vh;overflow:auto;padding:22px 22px 18px}
.report-card h3{margin:0 0 12px;font-size:1.05rem;color:var(--ink)}
.report-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:1rem;cursor:pointer;color:var(--muted)}
.report-shot{margin-bottom:6px}
.report-shot img{max-width:100%;max-height:180px;border:1px solid var(--line);border-radius:8px;display:block;margin-bottom:6px}
.report-inc{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:7px;cursor:pointer}
.report-lbl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:10px 0 4px}
.report-ta,.report-inp{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:.9rem}
.report-ta{resize:vertical}
.report-ta:focus,.report-inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,125,200,.12)}
.report-foot{margin-top:16px;display:flex;justify-content:flex-end}
.report-send{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:10px 24px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.report-send:hover{filter:brightness(1.06)}
.report-send[disabled]{opacity:.55;cursor:default}
.report-msg{border-radius:9px;padding:10px 12px;font-size:.88rem;margin-top:12px}
.report-msg.ok{background:#e8f5ee;border:1px solid #b2dfc8;color:#2a7d4f}
.report-msg.err{background:#fdf0ee;border:1px solid #f5c6c2;color:#c0392b}
.dd.importer .dd-menu{left:auto;right:0}
/* Groepskop in een dropdown — diapositief: wit op de standaard donkere kleur
   (besluit Jan 18 jul). De border-top verviel: de donkere band scheidt zelf al. */
.dd-menu .dd-sep{padding:7px 12px;margin:7px 0 4px;border-radius:8px;background:var(--dark);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dd-menu .dd-sep:first-child{margin-top:0}
.mainbar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:54px}
.mainmenu{display:flex;align-items:center;gap:0;flex-wrap:wrap}

/* dropdown */
.dd{position:relative}
.dd-btn{background:none;border:0;font-family:inherit;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.85);cursor:pointer;padding:7px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.util .dd-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.mainmenu .dd-btn{color:rgba(255,255,255,.92);font-size:.93rem;padding:7px 7px}
.mainmenu .dd-btn a{color:inherit}
/* Hoofdmenu: groen bij hover, en groen blijven op de pagina waar je bent
   (besluit Kamo, 2 sep 2026). Het groen is --teal, dezelfde kleur als
   "It's your posture." in de hero. nav.js zet .is-current op de menu-optie van
   de huidige pagina; een submenu-item telt mee, dus op /manual licht "Support"
   op. Alleen het hoofdmenu: de knoppen in de utility bar (delen, taal,
   dashboard) houden hun witte hover. */
.mainmenu .dd-btn:hover{color:var(--teal);background:rgba(255,255,255,.1)}
.mainmenu .dd.is-current > .dd-btn{color:var(--teal)}
.caret{font-size:.6rem;opacity:.7}
.dd-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(20,30,50,.14);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.14s;z-index:60}
.util .dd-menu{left:auto;right:0}
/* Admin-gereedschap (rolpreview-oog + landkiezer) samen in een omkaderd groepje. */
.admin-tools{display:inline-flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:1px 2px}
.admin-tools .dd-btn{padding:5px 5px}
.dd:hover > .dd-menu,.dd.tap > .dd-menu{opacity:1;visibility:visible;transform:translateY(4px)}
.dd-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap}
.dd-menu a:hover{background:var(--accent-l);color:var(--accent)}
/* De uitklaplijsten van Support en About volgen het hoofdmenu: groene tekst bij
   hover, op een neutrale in plaats van blauwe achtergrond. */
.mainmenu .dd-menu a:hover{background:var(--bg-2);color:var(--teal)}
/* Taalkiezer: 19 talen in 4 kolommen i.p.v. één lange, afgekapte lijst
   (besluit Jan 2026-07-14 — de vorige 1-koloms lijst scrolde niet en paste
   niet op het scherm). Geen vlaggen (taal ≠ land). */
.lang .dd-menu{min-width:360px;max-width:92vw;display:grid;grid-template-columns:repeat(4,1fr);gap:1px 8px}
.lang .dd-menu a{padding:7px 9px;font-size:.85rem}
@media(max-width:600px){
  /* right:0 (util-menu default) laat het paneel links van de smalle globe-knop
     ver buiten het scherm vallen — op mobiel i.p.v. dat centreren onder de knop. */
  /* 7 okt 2026: centreren onder de knop liet het paneel rechts buiten het
     scherm lopen (horizontale scroll op 375 tot 600px). Nu hangt het aan de
     volle breedte van .util (de .dd zelf is static) en lijnt het rechts uit. */
  .util-right .dd.lang{position:static}
  .lang .dd-menu{grid-template-columns:repeat(2,1fr);min-width:0;width:min(82vw,340px);left:auto;right:12px;transform:translateY(6px)}
  .dd.lang:hover > .dd-menu,.dd.lang.tap > .dd-menu{transform:translateY(4px)}
}
.burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:#fff;margin-left:6px;margin-right:10px}
/* Geen ▾ achter de taalknop en My info (opdracht Jan 30 jul): de labels zelf
   zijn herkenbaar genoeg en op smalle schermen scheelt het net de ruimte die
   de knoppen van de schermrand houdt. Menu-dropdowns houden hun ▾. */
.util-right .dd.lang .caret,.util-right .dd.myinfo .caret{display:none}

@media(max-width:980px){
  .nav-req{display:none}
  .burger{display:block}
  .util-in{flex-wrap:wrap}
  /* Opengeklapte hamburger (opdracht Jan 30 jul): de hoofdmenu-opties staan
     NAAST elkaar met een puntje ertussen; het submenu van een aangetikte optie
     klapt als volle-breedte-paneel onder de rij uit. */
  /* Als absolute balk ONDER de header: onafhankelijk van de nowrap-headerregel
     (in-flow brak op ≤430px: de items schoven de headerrij in). */
  .util{position:relative}
  .mainmenu{display:none;order:5;position:absolute;top:100%;left:0;right:0;z-index:55;background:var(--dark);flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;align-items:center;gap:0;padding:8px 10px;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 14px 24px rgba(0,0,0,.28)}
  /* Auto-marges centreren de rij als hij past en laten hem scrollen als hij
     niet past (19 talen: labels verschillen sterk in lengte). */
  .mainmenu .dd{flex:0 0 auto;white-space:nowrap}
  .mainmenu .dd:first-child{margin-left:auto}
  .mainmenu .dd:last-child{margin-right:auto}
  .mainmenu{scrollbar-width:none}
  .mainmenu::-webkit-scrollbar{display:none}
  .mainmenu.open{display:flex}
  .mainmenu .dd{width:auto;display:flex;align-items:center}
  .mainmenu .dd:not(:first-child)::before{content:'·';color:rgba(255,255,255,.55);margin:0 7px}
  .mainmenu .dd-menu{position:absolute;left:0;right:0;top:100%;opacity:1;visibility:visible;transform:none;border:0;border-radius:0 0 10px 10px;background:var(--dark);box-shadow:0 14px 24px rgba(0,0,0,.28);padding:6px 14px 10px;display:none;z-index:60}
  .mainmenu .dd.tap > .dd-menu{display:block}
  .mainmenu .dd-menu a{color:rgba(255,255,255,.82)}
  /* In het mobiele hoofdmenu staat de dropdown al op de donkere header, dus daar
     zou een --dark band onzichtbaar zijn: subtiel oplichten i.p.v. verdonkeren. */
  .mainmenu .dd-menu .dd-sep{background:rgba(255,255,255,.14);color:#fff}
  .mainmenu .dd-btn{width:auto;justify-content:center;padding:6px 1px;font-size:.86rem}
  .mainmenu .dd:not(:first-child)::before{margin:0 5px}
  /* Geen ▾ in de open hamburger-rij: scheelt de breedte die nodig is om alle
     opties op één regel te houden (het puntje ertussen is de scheiding). */
  .mainmenu .caret{display:none}
}
/* Smalle schermen: de LANDVLAG wijkt zodat de hamburger op rij 1 blijft en de
   deelknop juist beschikbaar is (besluit Jan 2026-07-16: op mobiel wordt het
   meest gedeeld — vlag in ruil voor deelknop; taalkiezer blijft). Krappere
   gaps/padding zodat logo + deel + taal + My info + hamburger op één rij passen. */
@media(max-width:600px){
  .util-right .country-flag,.util-right .dd.country{display:none}
  .util-in{gap:6px}
  .util-right{gap:2px}
  .util .dd-btn{padding:7px 5px}
  .util-right .share-btn{padding:7px 5px}
  .burger{margin-left:2px}
}
/* Staande regel Jan: de mobiele header staat op ÉÉN regel. Onder 980px mag de
   header wrappen (regel hierboven) en op ~375px zakte de hamburger eronder.
   Opgelost door (a) het losse LinkedIn-icoon uit de header te halen (nav.js)
   en (b) hieronder wrappen te verbieden + merk/tussenruimtes iets te krimpen. */
@media(max-width:430px){
  .util-in{flex-wrap:nowrap;gap:4px}
  .util-right{gap:0}
  .logo-txt b{font-size:1.02rem}
  .logo-txt small{font-size:.58rem;letter-spacing:.13em}
  .logo{flex:0 0 auto}
}
/* Vangnet voor hele smalle toestellen (iPhone SE ≈ 320px): met nowrap zou de
   header anders horizontaal gaan scrollen. Alleen het merkteken blijft staan. */
@media(max-width:345px){
  .logo-txt{display:none}
}
.btn.small{padding:9px 16px;font-size:.85rem}
.btn.small.ghost{background:transparent}
.anchor-target{scroll-margin-top:130px}
section[id]{scroll-margin-top:120px}

/* Landenkiezer (naast de taal-globe) */
.dd.country .dd-menu{min-width:190px;max-height:60vh;overflow-y:auto}
.dd.country .cc-name{font-weight:600}

/* Support: "Choose your type of support" navigation cards (link tiles) */
.nav-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
@media(max-width:900px){.nav-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.nav-cards{grid-template-columns:1fr}}
.nav-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;color:inherit;transition:.15s}
.nav-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 30px rgba(1,67,92,.08)}
.nav-card .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-l);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.nav-card .ic svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-card h3{margin-bottom:6px}
.nav-card p{font-size:.92rem;color:var(--muted)}
.nav-card .more{display:inline-block;margin-top:12px;font-weight:700;font-size:.86rem;color:var(--accent)}

/* Readable legal documents (Terms & Conditions, Warranty) */
.legal{max-width:820px}
.legal .doc-meta{font-size:.85rem;color:var(--muted);margin-top:6px}
.legal .toc{margin:22px 0 30px;padding:20px 24px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.legal .toc h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.legal .toc ol{margin:0;padding-left:1.1rem;columns:2;column-gap:34px}
@media(max-width:600px){.legal .toc ol{columns:1}}
.legal .toc li{margin:4px 0;font-size:.92rem}
.legal .toc a{color:var(--navy)}
.legal .toc a:hover{color:var(--accent)}
.legal article{margin-top:34px;scroll-margin-top:120px}
.legal article h3{font-size:1.12rem;color:var(--navy);padding-bottom:8px;border-bottom:1px solid var(--line)}
.legal article p{margin-top:12px;font-size:.95rem;line-height:1.68}
.legal article ul{margin:12px 0 0 1.1rem}
.legal article li{margin:6px 0;font-size:.95rem;line-height:1.6}
.legal .clause{color:var(--accent);font-weight:700;margin-right:.35em}
.legal .backtop{display:inline-block;margin-top:10px;font-size:.82rem;color:var(--muted)}
@media(max-width:560px){.dd.country .cc-name{display:none}}

/* ---- Floating "Request information" button + slide-up quick-contact panel ---- */
.site-cta{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;align-items:center}
.cta-toggle{display:flex;align-items:center;gap:0;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);color:var(--ink);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:7px;font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 12px 34px rgba(10,25,40,.18);transition:box-shadow .2s,background .2s}
.cta-toggle:hover{background:rgba(255,255,255,.56);box-shadow:0 14px 40px rgba(10,25,40,.26)}
/* Desktop: knop is standaard een rondje (icoon); de tekst schuift alleen bij hoveren open. */
.cta-toggle>span:first-child{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .32s ease,opacity .22s ease,padding .32s ease}
@media(hover:hover) and (pointer:fine){.cta-toggle:hover>span:first-child,.cta-toggle:focus-visible>span:first-child{max-width:260px;opacity:1;padding:0 10px 0 18px}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.cta-toggle{background:rgba(255,255,255,.9)}}
.cta-badge{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--dark)}
.cta-panel{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) translateY(16px);width:min(760px,calc(100vw - 32px));background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(10,25,40,.3);padding:34px 30px 26px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility .28s}
.site-cta.open .cta-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.cta-close{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(10,25,40,.18)}
.cta-title{font-weight:700;font-size:1.05rem;margin-bottom:16px}
.cta-form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:14px;align-items:end}
.cta-field label{margin-bottom:5px}
.cta-inp{width:100%;border:0;border-bottom:1px solid var(--line);padding:8px 2px;font-family:inherit;font-size:.92rem;color:var(--ink);outline:none;background:transparent}
.cta-inp:focus{border-color:var(--accent)}
.cta-submit{width:40px;height:40px;border-radius:50%;border:0;background:var(--dark);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta-submit:hover{background:var(--dark-2)}
.cta-submit:disabled{opacity:.6;cursor:default}
.cta-msg{border-radius:9px;padding:10px 14px;font-size:.88rem;margin-top:14px}
.cta-msg.ok{background:#e8f5ee;border:1px solid #b2dfc8;color:#2a7d4f}
.cta-msg.err{background:#fdf0ee;border:1px solid #f5c6c2;color:#c0392b}
@media(max-width:760px){
  .cta-form{grid-template-columns:1fr 1fr}
  .cta-submit{grid-column:1 / -1;width:100%;border-radius:12px}
}
@media(max-width:520px){
  .cta-toggle span:first-child{display:none}
  .cta-toggle{padding:6px}
  .cta-form{grid-template-columns:1fr}
}

/* Events page — trade-fair fact list */
.event-facts{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:8px}
.event-facts li{position:relative;padding-left:20px;color:var(--muted)}
.event-facts li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.event-facts strong{font-weight:700;color:inherit}

/* Taal-suggestiebanner (vervangt de oude auto-redirect) */
.langhint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--accent-l);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.langhint-msg { flex: 1 1 auto; }
.langhint-cta {
  flex: 0 0 auto;
  color: var(--accent-d);
  font-weight: 600;
  text-decoration: underline;
}
.langhint-x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  color: var(--muted);
}
.langhint-x:hover { color: var(--ink); }
@media (max-width: 640px) {
  .langhint { padding: 10px 16px; font-size: 13px; gap: 8px; }
}

/* ---- "The Rise" scroll-pinned hero (prototype, line-art placeholder frames) ---- */
.rise-hero{position:relative;height:220vh;padding:0}
.rise-sticky{position:sticky;top:var(--header-h,90px);height:calc(100vh - var(--header-h,90px));overflow:hidden;display:flex;align-items:center;background:linear-gradient(180deg,var(--bg-2),#fff)}
.rise-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;width:100%}
.rise-copy h1{margin:14px 0 18px;font-size:clamp(1.9rem,4vw,3rem);line-height:1.15}
.rise-copy .cta-row{margin-top:26px;margin-bottom:14px}
.rise-proof{margin-top:0;font-size:.85rem;color:var(--muted);font-weight:600}
.rise-media{display:flex;align-items:center;justify-content:center;height:100%}
.rise-media-frame{position:relative;width:100%;max-width:420px;aspect-ratio:515/1024;max-height:80vh}
.rise-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
@media(max-width:900px){
  .rise-hero{height:auto}
  .rise-sticky{position:static;height:auto;padding:50px 0}
  .rise-grid{grid-template-columns:1fr;text-align:left}
  .rise-media{order:-1;margin-bottom:24px}
  .rise-media-frame{max-height:52vh}
}
@media(prefers-reduced-motion:reduce){
  .rise-hero{height:auto}
  .rise-sticky{position:static;height:auto;padding:50px 0}
}

/* Verpakkingsafmetingen/gewicht-tabel bij Multi-packs op de configurator (nette kaart-stijl). */
.packtbl-wrap{max-width:560px;margin:2px 0 18px;overflow-x:auto}
.packtbl-t{font-weight:700;color:var(--ink);margin:0 0 9px;font-size:1rem}
.packtbl{width:100%;min-width:360px;border-collapse:separate;border-spacing:0;font-size:.9rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(16,24,40,.05)}
.packtbl th{background:var(--accent-l);color:var(--accent-d);text-align:left;font-weight:700;padding:11px 14px;white-space:nowrap}
.packtbl td{padding:10px 14px;border-top:1px solid var(--line);color:var(--ink)}
.packtbl tbody tr:nth-child(even){background:var(--bg-2)}
.packtbl td:first-child{font-weight:600}
.packtbl th:not(:first-child),.packtbl td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
/* Rij die een nieuw groepje begint: extra lucht erboven, zodat de rijen erboven
   en eronder als twee paren te lezen zijn (working heights op /m30). */
.packtbl tr.packtbl-gap td{padding-top:22px}

/* star-ratings 2026-07-26 */
.stars5{display:inline-block;color:var(--gold);letter-spacing:2px;line-height:1;white-space:nowrap}
.stars5::before{content:"\2605\2605\2605\2605\2605"}
.rating-agg{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:1rem}
.hero .rating-agg{float:right;margin-top:4px;margin-left:20px}
.hero .wrap::after{content:"";display:block;clear:both}
.rating-agg .stars5{font-size:1.15rem}
.rating-agg .ra-score{font-weight:700}
.rating-agg .ra-count{color:var(--muted)}
.rating-agg .ra-count a{color:inherit}
.rc-flag{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rc-flag .stars5{font-size:.9rem}
.rv-stars{margin-right:8px;vertical-align:middle}

/* /press: het woord "write" in de H1 in handschrift, letter voor letter
   getypt. De volledige zin staat in de HTML; het script vervangt de letters
   tijdelijk door onzichtbare spans en zet de breedte vooraf vast, zodat
   "about us" niet naar rechts schuift. Zonder JS staat het woord er gewoon. */
/* Caveat heeft een kleine x-hoogte, vandaar de 1.45em: optisch even groot als
   de Montserrat eromheen. */
.hw{font-family:'Caveat',cursive;font-weight:600;font-size:1.45em;line-height:1;display:inline-block;white-space:nowrap}
.hw span{opacity:0;transition:opacity .09s linear}
.hw span.is-in{opacity:1}

/* ---- Visie & missie, direct onder de hero (besluit Jan 3 aug 2026) ----
   Twee gelijke kolommen naast elkaar, op mobiel onder elkaar. Zelfde kaartvorm
   als de rest van de site, met een dunne teal bovenrand als enige accent: dit is
   een geloofwaardigheidsblok, geen verkoopblok. align-items:stretch houdt beide
   kaarten even hoog, ook al is de missie langer dan de visie. De tekst staat
   bewust op --ink en niet op --muted: een uitspraak over wie je bent moet zwart
   op wit staan, niet grijs. */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch;margin-bottom:18px}
.vm-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:44px 42px 40px;overflow:hidden;box-shadow:0 2px 10px rgba(16,40,64,.05)}
.vm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--teal)}
.vm-h{font-size:1.9rem;line-height:1.15;margin:0 0 8px;color:var(--navy);letter-spacing:-.01em}
.vm-rule{display:block;width:44px;height:3px;border-radius:2px;background:var(--teal);margin:0 0 20px}
.vm-t{margin:0;color:var(--ink);font-size:1.18rem;line-height:1.66}
@media(max-width:860px){
  .vm-grid{grid-template-columns:1fr;gap:20px;margin-bottom:16px}
  .vm-card{padding:30px 26px 28px;border-radius:16px}
  .vm-h{font-size:1.55rem}
  .vm-t{font-size:1.09rem}
}

/* Proef 3 aug 2026: de (nu neutrale) muur laten oplossen in de sectie, zodat de
   foto geen dichtgetimmerd kader meer is. Alleen bovenin en aan de zijkanten
   vervagen; de vloer en de schaduw blijven, die geven het apparaat grond. */
/* Negatieve marge omdat de bovenste 34% van de foto wegvaagt: zonder deze
   correctie oogt de afstand tot de visie/missie-kaarten veel groter dan hij
   in pixels is. De tekst zit in dezelfde container en schuift mee, dus de
   uitlijning met de handgreep blijft staan. */
.strain-photo{background:transparent;border-radius:0;overflow:visible;margin-top:-58px}
.strain-photo img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 86%,transparent 100%),
                     linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 86%,transparent 100%),
             linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect}
@media(max-width:860px){
  .strain-photo img{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 90%,transparent 100%),
                       linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 90%,transparent 100%),
               linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)}
}

/* ============================================================================
   /m30, herbouw 14 aug 2026 (deel 1 van 2). Alleen layout: kleuren, typografie
   en knoppen komen ongewijzigd uit de tokens hierboven.
   Op 19 aug 2026 is m30.html ontparkeerd: alle 18 taalversies zijn opnieuw
   gegenereerd en tonen dezelfde opbouw als de Engelse pagina. Het blok
   "#buy #specs", dat alleen de oude opbouw nodig had, is toen verwijderd.
   ==========================================================================*/

/* HERO. Tekst links, de M30 als vrijstaand product rechts. De .m30-hero-art
   mag rechts buiten de contentkolom lopen: de negatieve marge is precies de
   helft van de ruimte die er náást .wrap (max 1140px) over is, afgetopt op
   72px. Op smallere vensters is die ruimte nul en gebeurt er dus niets, zodat
   er nooit horizontaal gescrold kan worden. */
.m30-hero{background:linear-gradient(180deg,var(--bg-2),#fff);overflow:hidden}
/* Ook h2, sinds 3 sep 2026: de sectie MEET THE M30 op /ergonomics gebruikt deze
   hero-opbouw met een h2, omdat de h1 van die pagina bovenaan staat. Zonder deze
   regel valt de kop terug op margin:0 uit de reset en plakt hij tegen de lead. */
.m30-hero h1,.m30-hero h2{margin:16px 0 20px}
.m30-hero h1 .h1-line{display:block}
.m30-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
/* Kleiner en rustiger dan op /reviews: hier is het een bevestiging onder de
   knoppen, geen kop. */
.m30-hero .rating-agg{margin-top:24px;font-size:.88rem}
.m30-hero .rating-agg .stars5{font-size:1rem}
.m30-hero-art{display:flex;justify-content:center}
/* De hoogte is de begrenzing, niet de breedte: het product is bijna twee keer
   zo hoog als breed (900x1716), dus zonder afkapping zou de hero op een breed
   scherm ruim 1200px hoog worden. width:auto houdt de verhouding intact.
   Op desktop bewust een vaste px-grens en GEEN vh: met een vh-grens kromp het
   product op een laptopscherm (800px hoog) naar een kwart van de hero, terwijl
   dit juist de sectie is waarin het groot mag zijn. Op mobiel wel vh, want daar
   staat het product ONDER de tekst en zou een vaste hoogte de knoppen ver
   boven de vouw duwen.
   Die vaste grens stond tot 15 aug 2026 op 860px. Dat maakte de hero 992px hoog:
   omdat de tekstkolom verticaal gecentreerd staat naast dat hoge beeld, zakte de
   H1 tot ver over de helft van het scherm en stonden de knoppen op een
   laptopscherm net op de rand van de vouw. Nu 620px: het hele product blijft
   zichtbaar (object-fit:contain kapt niets af, hij wordt alleen kleiner), de
   sectie past ruim binnen één schermhoogte en de tekst begint weer bovenin. */
.m30-hero-art img{width:auto;height:auto;max-width:100%;max-height:min(72vh,560px);object-fit:contain}
@media(min-width:861px){
  /* 40px boven, niet de 72px van 15 aug 2026: de tekstkolom staat verticaal
     gecentreerd naast het beeld, dus alle lucht boven het beeld duwt óók de
     eyebrow naar beneden. Samen met het iets lagere beeld hieronder haalt dat
     de sterrenregel op 1440x900 ruim binnen de vouw. */
  .m30-hero{padding:40px 0 56px}
  .m30-hero .split{grid-template-columns:52fr 48fr;gap:40px}
  /* Iets kleiner dan de standaard-h1 (clamp tot 3.5rem), zodat "Every position
     you need." op één regel past in de smallere tekstkolom. Zelfde ingreep als
     bij .about-hero. */
  .m30-hero h1{font-size:clamp(1.95rem,3.1vw,2.6rem)}
  .m30-hero-art{justify-content:flex-end;margin-right:calc(-1 * clamp(0px,(100vw - var(--maxw))/2,72px))}
  /* 580px, niet de 620px van 15 aug 2026. Het beeld is het hoogste element in de
     rij, dus het bepaalt de hoogte van de hele sectie én, via de verticale
     centrering, hoe ver de tekstkolom naar beneden zakt. 40px minder beeld is
     dus 40px minder sectie plus 20px hogere tekst. Het product blijft volledig
     zichtbaar: object-fit:contain kapt niets af, het wordt alleen kleiner. */
  .m30-hero-art img{max-height:580px}
}
/* Entree-animatie. Bewust in CSS en niet via .reveal uit nav.js: dit is de
   bovenste sectie, die hoort er ook zonder JavaScript te staan. Een CSS-animatie
   draait altijd, ook zonder script. Bij prefers-reduced-motion staat alles er
   meteen (animation:none, dus geen begintoestand met opacity:0). */
@keyframes m30-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes m30-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.m30-hero .m30-hero-copy > *{animation:m30-in .7s cubic-bezier(.22,.61,.36,1) both}
.m30-hero .m30-hero-copy > :nth-child(2){animation-delay:.09s}
.m30-hero .m30-hero-copy > :nth-child(3){animation-delay:.18s}
.m30-hero .m30-hero-copy > :nth-child(4){animation-delay:.27s}
.m30-hero .m30-hero-copy > :nth-child(5){animation-delay:.36s}
.m30-hero-art img{animation:m30-rise 1s cubic-bezier(.22,.61,.36,1) .12s both}
@media(prefers-reduced-motion:reduce){
  .m30-hero .m30-hero-copy > *,.m30-hero-art img{animation:none}
}

/* Tweeregelig bijschrift in de vergelijkingsschuifbalk: bovenaan het label
   (SEATED / STANDING), eronder waar je die stand voor gebruikt. Alleen zichtbaar
   in de .is-js-variant, want daar is het bijschrift een pil over de foto heen;
   in de gestapelde terugval blijft het gewoon tekst onder de foto. */
.cmp-sub{display:block;font-weight:600;letter-spacing:.02em;text-transform:none}
/* 42%: de twee pillen staan tegenover elkaar aan de bovenkant van hetzelfde
   beeldvlak, dus samen mogen ze nooit breder worden dan de helft elk. Bij 52%
   liepen ze in het midden over elkaar heen. */
.cmp.is-js .cmp-fig figcaption{max-width:min(42%,13rem);line-height:1.35;border-radius:14px;text-align:start}
.cmp.is-js .cmp-sub{font-size:.68rem;opacity:.85;margin-top:2px}
/* De basis .cmp is 780px breed; bij een verhouding van 776x1024 wordt hij dan
   ruim 1000px hoog, vandaar deze aftopping.
   margin:0 is hier geen opmaakdetail maar noodzaak: sinds 16 aug 2026 staat de
   schuifbalk als rasterkolom naast de tekst, en de auto-marges van .cmp
   (margin:36px auto 0) laten een rastercel krimpen tot de inhoudsbreedte. De
   .cmp-box heeft alleen een aspect-ratio en dus geen eigen breedte, waardoor de
   hele schuifbalk dan tot ruim 140px inklapt. Centreren gebeurt daarom met
   justify-self, dat het raster wél begrijpt. */
.cmp-solo{max-width:520px;width:100%;margin:0;justify-self:center}
.cmp-note{margin:22px 0 0}

/* SECTIE 2, TWEE KOLOMMEN (16 aug 2026). .split levert het raster en de
   terugval naar één kolom onder 861px; hier alleen de kolomverdeling. De
   schuifbalk is de smalste van de twee (staand beeld), de tekst mag breder. */
.ways-split{align-items:center}
.ways-split h2{margin:0}
/* Twee regels onder elkaar, zoals de H1 in de hero. De tweede regel is de
   .hero-reveal en krijgt zijn kleur uit die klasse. */
.ways-split h2 .h2-line{display:block}
/* De twee manieren van werken moeten opvallen tegen de lopende tekst, maar het
   mogen geen kaders worden (besluit Kamo, 16 aug 2026). Vandaar een rustig blok
   in --bg-2 met een teal accentlijn aan de aanloopzijde: dezelfde vormtaal als
   de actieve feature-kaart in sectie 3, dus geen nieuwe kleur en geen rand. */
.ways{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.ways li{background:var(--bg-2);border-inline-start:3px solid var(--teal);
  border-radius:12px;padding:13px 18px;color:var(--navy);font-weight:600;font-size:1.02rem}
@media(min-width:861px){
  .ways-split{grid-template-columns:44fr 56fr;gap:52px}
  .ways-split h2{font-size:clamp(1.7rem,2.6vw,2.2rem)}
  .cmp-solo{max-width:100%}
}

/* SECTIE 3, FEATURE-WISSELAAR (15 aug 2026, deel 2 van de herbouw van /m30;
   18 aug 2026 hergebruikt op /why-orthostand voor de "Where static strain adds
   up"-sectie, met vier items in plaats van zes). Gedeeld component: de JS zit
   in /assets/feat-switch.js, niet meer inline per pagina.
   De uitgangspositie is de niet-wisselende weergave: elke feature met zijn eigen
   afbeelding NAAST de tekst, alle onder elkaar. Dat is wat een telefoon
   toont en wat er staat zonder JavaScript. De wisselaar is er alleen bovenop
   vanaf 861px én met script, via .feat.is-js; daarom staat vrijwel alles verderop
   in de media-query.
   Op /m30 stond de foto tot 15 aug 2026 BOVEN de tekst. Met zes staande foto's
   (839x1600) werd de sectie op een telefoon ruim 4000px hoog, zo'n vijf schermen
   scrollen. Naast de tekst is het beeld veel kleiner en blijven alle items
   zichtbaar zonder carrousel. De vaste breedte-verhouding (grid met een vaste
   eerste kolom) houdt de tekstkolommen bovendien netjes onder elkaar uitgelijnd.
   De hoogte van het beeldkader op desktop komt van de lijst ernaast (grid,
   align-items stretch): de lagen liggen absoluut in dat kader en tellen zelf niet
   mee voor de hoogte, dus het kader kan bij het wisselen niet verspringen. */
.feat{margin-top:34px}
/* position:relative sinds 3 sep 2026: het uitklappaneel van item 04 op
   /ergonomics ligt op een breed scherm absoluut over deze lijst heen. */
.feat-list{list-style:none;margin:0;padding:0;position:relative}
.feat-item{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center}
.feat-item + .feat-item{margin-top:20px}
/* Een VASTE hoogte, geen vaste breedte: het product is bijna twee keer zo hoog
   als breed, dus als de foto de kolombreedte volgt groeit de rij mee met het
   scherm en wordt de sectie juist langer op een grotere telefoon. De kolom is
   net iets breder dan de foto bij deze hoogte, zodat object-fit vrijwel niets
   opvult en de zes foto's exact even groot staan. */
.feat-shot{display:block;width:100%;height:160px;object-fit:contain;background:var(--bg-2);border-radius:12px}
@media(min-width:481px){
  .feat-item{grid-template-columns:104px 1fr;gap:22px}
  .feat-item + .feat-item{margin-top:24px}
  .feat-shot{height:198px}
}
/* De feature is in RUST al een zichtbare kaart (16 aug 2026). Tot dan was hij
   kale tekst en verscheen het lichte blok pas bij hover; op de nieuwe donkere
   sectieachtergrond zou die tekst bovendien onleesbaar zijn. Nu staat de kaart er
   altijd, ook op een telefoon en zonder script, en keert bij hover het
   kleurpatroon om (zie de media-query hieronder).
   border:0 solid transparent: er is geen rand, maar door hem expliciet op
   transparant te zetten is er geen moment waarop de browser currentColor
   gebruikt. */
.feat-btn{display:block;width:100%;margin:0;padding:14px 18px;border:0 solid transparent;
  border-radius:14px;background:var(--bg-2);font:inherit;color:inherit;text-align:start;cursor:default;
  transition:background-color .2s ease,box-shadow .2s ease}
.feat-btn b{display:block;color:var(--navy);font-size:1.02rem;font-weight:600;transition:color .2s ease}
.feat-btn span{display:block;color:var(--muted);font-size:.94rem;line-height:1.5;margin-top:4px;transition:color .2s ease}
/* Optioneel nummer boven de titel (bv. "01"), gebruikt op /why-orthostand maar
   niet op /m30: valt onder dezelfde .feat-btn span-regel hierboven en de
   hover/focus-omkering hieronder, dus geen aparte regel daar nodig. */
.feat-num{color:var(--teal);font-weight:800;font-size:.78rem;letter-spacing:.04em;margin-top:0}
.feat-stage{display:none;position:relative}
@media(min-width:861px){
  /* Alleen mét script de twee kolommen. Zonder script is er geen beeldkader en
     zou de rechterkolom leeg blijven, dus dan houdt de lijst de volle breedte
     en krijgen de zes rijen een ruimer beeld. */
  .feat.is-js{display:grid;grid-template-columns:40fr 60fr;gap:44px;align-items:stretch}
  .feat-item{grid-template-columns:124px 1fr;gap:30px}
  .feat-shot{height:236px}
  /* Draait de weergave hierboven terug zodra de wisselaar aan gaat: de foto
     verdwijnt uit de rij en de tekst mag de volle kolombreedte hebben. */
  .feat.is-js .feat-item{display:block}
  .feat.is-js .feat-item + .feat-item{margin-top:8px}
  .feat.is-js .feat-btn{cursor:pointer}
  /* HOVER EN FOCUS: het kleurpatroon keert om. De lichte kaart wordt petrol
     (--dark-2, het bestaande donkere token) met witte tekst. Omdat de sectie
     zelf --dark is en die twee dicht bij elkaar liggen, komt er een teal rand
     omheen; als inset-schaduw en niet als border, want dan verspringt de kaart
     niet bij het aan- en uitgaan. */
  .feat.is-js .feat-btn[aria-pressed="true"]{background:var(--dark-2);box-shadow:inset 0 0 0 2px var(--teal)}
  .feat.is-js .feat-btn[aria-pressed="true"] b{color:#fff}
  .feat.is-js .feat-btn[aria-pressed="true"] span{color:rgba(255,255,255,.82)}
  .feat.is-js .feat-shot{display:none}
  .feat.is-js .feat-stage{display:block;min-height:460px;background:var(--bg-2);border-radius:18px}
  /* De zeven lagen liggen precies op elkaar en verschillen alleen in dekking.
     max-width/height in procenten van het kader houdt lucht rondom en laat
     object-fit het formaat bepalen, zodat elke laag exact even groot staat. */
  .feat-layer{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:78%;max-height:92%;
    object-fit:contain;opacity:0;transition:opacity .25s ease}
  .feat-layer.is-on{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .feat-layer{transition:none}
  .feat-btn,.feat-btn b,.feat-btn span{transition:none}
}

/* FEATURE-WISSELAAR, VARIANT /ergonomics (3 sep 2026). Twee dingen die alleen
   in #hidden-cost gelden en bewust NIET in de gedeelde .feat-regels hierboven
   staan, want /m30 gebruikt dezelfde component voor productfoto's:
     1. het beeld VULT het kader. Op /m30 stond de foto klein en volledig in
        beeld op een lichte plaat; hier is het reportagefotografie en hoort er
        geen witte rand omheen te staan. Zelfde radius (16px) als de
        Dentistry-hero (.erg-stage) en de videoloops (.vidbox), plus
        overflow:hidden, zodat het kader identiek blijft welk beeld er ook in
        ligt en er dus niets kan verspringen bij het wisselen.
        object-position staat op 72% hoogte: de bovenste 40% van deze foto's is
        plafond en muur, de behandelaar en het gemarkeerde lichaamsdeel zitten
        in de onderste helft. Het krachtendiagram heeft zijn eigen positie mee
        via data-shot-pos in de HTML, want dat staat wél in het midden.
     2. item 04 heeft een uitklappaneel. */
/* Het paneel moet binnen de hoogte van de vier kaarten passen, dus alles staat
   hier een maat kleiner dan in een gewone tekstkolom. Bij het bijstellen van
   deze waarden: de smalste stand (861px, linkerkolom 308px) is de maatgevende,
   daar loopt de tekst het verst door. */
#hidden-cost .feat-panel .fp-head{display:none;margin:0}
#hidden-cost .feat-panel .fp-in{background:var(--dark-2);border-radius:14px;padding:14px 16px}
#hidden-cost .fp-h{margin:11px 0 5px;font-size:1rem;line-height:1.3}
#hidden-cost .fp-intro{margin:0;color:rgba(255,255,255,.78);font-size:.83rem;line-height:1.45}
#hidden-cost .fp-forces{list-style:none;counter-reset:fpf;margin:10px 0 0;padding:0}
#hidden-cost .fp-forces li{counter-increment:fpf;position:relative;padding-left:27px;
  color:rgba(255,255,255,.78);font-size:.82rem;line-height:1.44}
#hidden-cost .fp-forces li + li{margin-top:7px}
#hidden-cost .fp-forces li::before{content:counter(fpf,decimal-leading-zero);position:absolute;left:0;top:2px;
  color:var(--teal);font-weight:800;font-size:.72rem;letter-spacing:.04em}
#hidden-cost .fp-forces b{color:#fff;font-weight:600}
/* De slotzin krijgt iets meer nadruk dan de drie krachten, maar blijft in
   dezelfde kaart: een scheidingslijntje en vollere tekstkleur, geen eigen blok. */
#hidden-cost .fp-note{margin:11px 0 0;padding-top:9px;border-top:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:.83rem;line-height:1.45}
/* Het diagram staat gestapeld IN het paneel; op een breed scherm staat het al
   in het beeldkader rechts en is deze kopie overbodig. */
#hidden-cost .fp-shot{display:block;width:100%;height:auto;margin-top:14px;border-radius:10px;background:#fff}
/* Gestapeld staat het paneel onder de kaart. Zonder script staat het gewoon
   open (er valt dan niets te bedienen); met script klapt .is-tap het dicht en
   wordt de knop van 04 aantikbaar. */
.feat-panel{grid-column:1/-1;margin-top:10px}
.feat.is-tap .feat-panel{overflow:hidden;max-height:0;margin-top:0;opacity:0;
  transition:max-height .4s ease-out,margin-top .4s ease-out,opacity .3s ease-out}
.feat.is-tap .feat-item.is-open .feat-panel{max-height:2000px;margin-top:10px;opacity:1}
/* De open kaart krijgt dezelfde omkering als bij hover op een breed scherm, en
   het paneel eronder dezelfde rand, zodat de twee als één geheel lezen. */
.feat.is-tap .feat-item.is-open .feat-btn{background:var(--dark-2);box-shadow:inset 0 0 0 2px var(--teal)}
.feat.is-tap .feat-item.is-open .feat-btn b{color:#fff}
.feat.is-tap .feat-item.is-open .feat-btn span{color:rgba(255,255,255,.82)}
#hidden-cost .feat.is-tap .feat-panel .fp-in{box-shadow:inset 0 0 0 2px var(--teal)}
/* Aantikbaar, en dat moet je ook kunnen zien: een chevron die meedraait. */
.feat.is-tap .feat-btn[data-panel]{cursor:pointer;position:relative;padding-right:44px}
.feat.is-tap .feat-btn[data-panel]::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease-out}
.feat.is-tap .feat-item.is-open .feat-btn[data-panel]::after{transform:translateY(-25%) rotate(-135deg)}
@media(min-width:861px){
  /* Ruimere kaarten dan op /m30 (8px tussenruimte, 14px padding): de vier
     kaarten bepalen de hoogte van de hele rij, en die hoogte is precies de
     ruimte die het uitklappaneel van 04 heeft. Zonder deze extra ruimte past de
     tekst er op een smal breed scherm (861px) niet in. */
  #hidden-cost .feat.is-js .feat-item + .feat-item{margin-top:14px}
  #hidden-cost .feat.is-js .feat-btn{padding:17px 18px}
}
/* Tussen 861 en 1023px is de linkerkolom maar circa 310px breed en loopt de
   paneeltekst een stuk verder door, terwijl de kaarten juist meer regels
   krijgen. Deze extra tussenruimte houdt de twee gelijk op; boven 1024px is ze
   niet nodig en zou ze de sectie alleen maar langer maken. */
@media(min-width:861px) and (max-width:1023px){
  #hidden-cost .feat.is-js .feat-item + .feat-item{margin-top:24px}
}
@media(min-width:861px){
  #hidden-cost .feat.is-js .feat-stage{background:var(--dark-2);border-radius:16px;overflow:hidden;
    transition:background-color .25s ease}
  /* Het krachtendiagram is een tekening met een eigen witte achtergrond en
     staat er met object-fit:contain in; het kader wordt dan wit mee, zodat het
     beeld nog steeds van rand tot rand doorloopt en er geen witte plaat mét
     rand omheen ontstaat. */
  #hidden-cost .feat.is-js.is-open .feat-stage{background:#fff}
  #hidden-cost .feat-layer{inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;
    object-fit:cover;object-position:50% 72%}
  /* HET PANEEL VAN 04. Het ligt altijd op ware grootte over de hele lijst en
     wordt alleen weggeknipt: clip-path van onderaf openen laat de kaart naar
     BOVEN groeien met de onderkant op zijn plek, en anders dan een hoogte- of
     schaalanimatie herschikt of vervormt de tekst daarbij niet. De ronde hoeken
     lopen mee via "round 14px", dus ook halverwege de animatie is het een kaart.
     Dicht is het paneel pointer-events:none, want dan ligt het onzichtbaar over
     01 t/m 03 heen. Open juist wél: de muis staat dan op het paneel in plaats
     van op de knop, en zolang hij binnen de lijst blijft mag de stand niet
     omslaan. Dat voorkomt het flikkeren bij het bewegen over de kaart. */
  #hidden-cost .feat.is-js .feat-panel{position:absolute;inset:0;z-index:2;margin:0;
    opacity:0;pointer-events:none;clip-path:inset(74% 0 0 0 round 14px);
    transition:clip-path .38s cubic-bezier(.22,.61,.36,1),opacity .26s ease-out}
  #hidden-cost .feat.is-js .feat-item.is-open .feat-panel{opacity:1;pointer-events:auto;
    clip-path:inset(0 0 0 0 round 14px)}
  #hidden-cost .feat.is-js .feat-panel .fp-in{position:absolute;inset:0;overflow:hidden;
    box-shadow:inset 0 0 0 2px var(--teal);padding:18px 20px}
  #hidden-cost .feat.is-js .feat-panel .fp-head{display:block}
  #hidden-cost .feat.is-js .fp-shot{display:none}
  #hidden-cost .feat.is-js .fp-head b{display:block;color:#fff;font-size:1.02rem;font-weight:600}
  #hidden-cost .feat.is-js .fp-head span:not(.feat-num){display:block;color:rgba(255,255,255,.82);
    font-size:.92rem;line-height:1.45;margin-top:4px}
  /* 01 t/m 03 faden weg terwijl het paneel eroverheen opent. */
  #hidden-cost .feat.is-js .feat-item{transition:opacity .3s ease-out}
  #hidden-cost .feat.is-js.is-open .feat-item:not(.is-open){opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .feat-panel,.feat.is-tap .feat-panel,#hidden-cost .feat.is-js .feat-panel,
  #hidden-cost .feat.is-js .feat-item,#hidden-cost .feat.is-js .feat-stage,
  .feat.is-tap .feat-btn[data-panel]::after{transition:none}
}

/* Kleine cijferregel onder een tekstkolom. Hergebruikt .proofgrid/.pf/.pf-n/.pf-l
   van /about, alleen kleiner: hier staan maten (110 x 82 cm), geen tellende
   getallen, en de volledige specificatietabel staat verderop op de pagina. */
.proofgrid.figs-sm{grid-template-columns:repeat(3,1fr);margin-top:30px}
.figs-sm .pf{padding:4px 12px}
.figs-sm .pf-n{font-size:1.22rem;font-weight:600;color:var(--navy);min-width:0}
.figs-sm .pf-n::after{width:38px;margin:11px auto 9px}
.figs-sm .pf-l{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
/* .proofgrid valt onder 760px terug op twee kolommen; met drie items geeft dat
   een weesje op de tweede rij, dus hier blijven het er drie. */
@media(max-width:760px) and (min-width:521px){
  .proofgrid.figs-sm{grid-template-columns:repeat(3,1fr)}
  .figs-sm .pf{padding:4px 10px}
  .figs-sm .pf:nth-child(odd){border-left:1px solid var(--line)}
  .figs-sm .pf:first-child{border-left:0}
  .figs-sm .pf:nth-child(n+3){border-top:0}
}
/* Op een telefoon past "110 x 82 cm" niet in een derde van het scherm: het brak
   over twee regels en dan stond het streepje eronder niet meer gelijk met de
   andere twee. Daarom onder elkaar, met het cijfer links en het label rechts. */
@media(max-width:520px){
  .proofgrid.figs-sm{grid-template-columns:1fr;margin-top:26px}
  .figs-sm .pf{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-left:0}
  .figs-sm .pf + .pf{border-left:0;border-top:1px solid var(--line)}
  .figs-sm .pf-n::after{display:none}
  .figs-sm .pf-l{max-width:none;text-align:end}
}

/* Foto/tekst-secties met een bredere fotokolom (57/43). Zelfde truc als
   .about-hero: alleen vanaf 861px, daaronder is .split al één kolom. */
@media(min-width:861px){
  .split.wide-media{grid-template-columns:57fr 43fr;gap:48px}
  .split.wide-media.media-right{grid-template-columns:43fr 57fr}
}

/* Specificaties in drie kolommen. De tabellen zelf zijn de bestaande .packtbl;
   alleen de breedtebeperking van .packtbl-wrap moet eraf, want die is hier de
   kolombreedte. */
.spec-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:34px;align-items:start}
.spec-cols .packtbl-wrap{max-width:none;margin:0}
.spec-cols .packtbl{min-width:0}
.spec-cols .packtbl-t{margin-bottom:12px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.spec-cols{grid-template-columns:1fr;gap:26px}}

/* ============ Scroll-hero /ergonomics: "Dentistry changed decades ago." ============
   (3 sep 2026) De kop van de pagina. Licht, ruim, tekst links (43%) en één
   beeldkader rechts (57%). Tijdens het scrollen wordt de historische
   tandartsfoto van onder naar boven overgenomen door de moderne, en die daarna
   door de moderne voetzorgfoto (derde beeld, 21 sep 2026); links verschijnt
   onderweg de slotzin, en bij dat derde beeld de tweede H1-regel.

   Twee toestanden, bewust in deze volgorde opgeschreven:
   1. ZONDER .is-js (geen JavaScript, of prefers-reduced-motion): een gewone
      sectie in één kolom, met de drie foto's rustig naast (mobiel: onder)
      elkaar en alle tekst gewoon zichtbaar. Geen sticky, geen lege
      scrollruimte, niets dat beweegt.
   2. MET .is-js (het script zet die klasse): tekst links, beeld rechts, en op
      desktop wordt de sectie 300vh hoog en plakt de inhoud onder de header,
      zodat de bezoeker door de overgangen heen scrolt. De foto's liggen dan op
      elkaar in één kader.
   Het script staat bovenaan ergonomics.html en zet per foto transform en
   mask (sinds 7 okt 2026 schuiven de foto's horizontaal, zie verderop).

   De 340vh is de scrollruimte: korte aanloop, twee overgangen van circa 88vh
   en sinds 7 okt 2026 (Jan) circa 40vh stilstand op de laatste foto voordat
   de sectie loslaat. Verander deze hoogte niet zonder FROM/MID/TO in het
   script mee te wegen. */
.erg-hero{position:relative;padding:0;background:#fff}
.erg-hero-sticky{padding:70px 0;background:linear-gradient(180deg,var(--bg-2),#fff)}
.erg-hero-sticky > .wrap{width:100%}
.erg-hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.erg-hero-copy h1{margin:14px 0 20px}
.erg-hero-copy h1 .h1-line{display:block}
.erg-hero-copy p{max-width:60ch}
.erg-hero-copy > p + p{margin-top:16px}
/* Slotzin: verschijnt pas als de overgang rechts duidelijk begonnen is. Hij
   staat altijd in de layout (alleen opacity/transform veranderen), dus er
   verspringt niets op het moment dat hij zichtbaar wordt. Het lichtgroene vlak
   is dezelfde teal als de rest van de site, sterk verdund, zodat de conclusie
   opvalt zonder een zwaar gekleurd blok te worden. */
.erg-statement{font-size:1.12rem;font-weight:600;line-height:1.45;color:var(--navy);background:rgba(82,161,153,.12);border-left:3px solid var(--teal);border-radius:0 12px 12px 0;padding:18px 22px}
/* Rustige statische weergave: drie foto's onder elkaar. */
.erg-stage{display:grid;gap:14px}
.erg-shot{width:100%;height:auto;border-radius:16px}
/* Bijschrift bij de laatste foto (9 okt 2026, Jan). Staat altijd in de layout,
   dus er verspringt niets als hij verschijnt. */
.erg-caption{margin:16px 0 0;font-size:1.08rem;font-weight:600;line-height:1.45;color:var(--navy);padding-left:14px;border-left:3px solid var(--teal)}
.erg-hero.is-js .erg-caption{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.erg-hero.is-js .erg-caption.is-on{opacity:1;transform:none}
/* Drie bijschriften op dezelfde plek: de hoogte is die van het langste, dus er
   verspringt niets als ze wisselen. Zonder JavaScript staan ze onder elkaar. */
.erg-hero.is-js .erg-captions{display:grid;margin-top:16px}
.erg-hero.is-js .erg-captions > .erg-caption{grid-area:1 / 1;margin:0}
.erg-hero:not(.is-js) .erg-captions > .erg-caption{margin-top:10px}

.erg-hero.is-js .erg-stage{display:block;position:relative;width:100%;margin:0 auto;aspect-ratio:1200/1024;border-radius:16px;overflow:hidden;background:var(--bg-2)}
.erg-hero.is-js .erg-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* De onthullingen zelf. inset(<boven> 0 0 0): 100% = helemaal weggeknipt, 0% =
   volledig zichtbaar, dus elke volgende foto komt van onderaf omhoog. De korte
   transitie dempt het scrollen zonder merkbaar achter te lopen. */
/* 7 okt 2026 (Jan): de foto's schuiven van rechts naar links met een korte
   overvloeier op de naad. Transform en mask zet het script per foto; hier
   alleen de uitgangsstand (foto 2 en 3 rechts buiten het kader). */
.erg-hero.is-js .erg-shot-new,.erg-hero.is-js .erg-shot-third{transform:translate3d(100%,0,0)}
.erg-hero.is-js .erg-shot{will-change:transform}
.erg-hero.is-js .erg-statement{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.erg-hero.is-js .erg-statement.is-on{opacity:1;transform:none}
/* Tweede H1-regel ("Foot care is next."): laat bewust op zich wachten tot de
   derde foto begint binnen te scrollen. De regel staat altijd in de layout
   (.h1-line is display:block, alleen opacity/transform veranderen), dus de kop
   verspringt niet op het moment dat hij verschijnt. */
.erg-hero.is-js .erg-h1-late{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.erg-hero.is-js .erg-h1-late.is-on{opacity:1;transform:none}

@media(min-width:861px){
  /* Zonder JavaScript blijft het één kolom: tekst boven, de drie foto's
     daaronder naast elkaar als rustige voor/na-vergelijking. */
  .erg-hero:not(.is-js) .erg-stage{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
  /* Met JavaScript: tekst links, beeld rechts. Het beeld overspant beide rijen,
     zodat de slotzin onder de tekst past zonder dat het kader verspringt. */
  .erg-hero.is-js .erg-hero-grid{grid-template-columns:43fr 57fr;gap:0 60px}
  .erg-hero.is-js .erg-hero-copy{grid-column:1;grid-row:1;align-self:end}
  .erg-hero.is-js .erg-statement{grid-column:1;grid-row:2;align-self:start;margin-top:44px}
  /* Iets kleiner dan de standaard-h1 (die loopt door tot 3.5rem), zodat de twee
     regels in de smallere tekstkolom passen. Zelfde maat als de hero van /m30. */
  .erg-hero-copy h1{font-size:clamp(1.95rem,3.1vw,2.6rem)}
  .erg-hero.is-js{height:340vh}
  .erg-hero.is-js .erg-hero-sticky{position:sticky;top:var(--header-h,90px);height:calc(100vh - var(--header-h,90px));padding:0;display:flex;align-items:center;overflow:hidden}
  .erg-hero.is-js .erg-frame{grid-column:2;grid-row:1 / span 2;align-self:center;width:100%;margin:0 auto}
  /* Het kader schaalt met de vensterhoogte: bij een lage vensterhoogte krimpt
     het mee in plaats van eruit te lopen, en op een hoog scherm (of uitgezoomd)
     groeit het mee, zodat de vastgeplakte scène het scherm vult in plaats van
     klein in het midden van een lege vlakte te staan (9 okt 2026, Jan: "de
     witruimte is veel te groot"). 1.172 is de verhouding 1200/1024 van de
     foto's; 200px is de ruimte voor het bijschrift en lucht boven en onder. */
  .erg-hero.is-js .erg-frame{max-width:calc((100vh - var(--header-h,90px) - 200px) * 1.172)}
  /* Daarom mag de wrap hier ook breder dan --maxw, gekoppeld aan de hoogte. */
  .erg-hero.is-js .erg-hero-sticky > .wrap{max-width:min(100%,max(var(--maxw),calc((100vh - var(--header-h,90px)) * 1.75)));padding:0 max(24px,min(72px,calc(4vw - 30px)))}
}
@media(max-width:860px){
  /* Volgorde op mobiel: tekst, foto's, slotzin. Die volgt vanzelf uit de HTML
     zodra het raster één kolom is. */
  .erg-hero-sticky{padding:56px 0 60px}
  .erg-hero.is-js .erg-stage{max-width:none}
  /* Hier geen wachtende H1-regel. Zonder sticky staat de kop boven het
     beeldkader in plaats van ernaast, dus op het moment dat de derde foto
     binnenkomt is de kop al uit beeld gescrold: de bezoeker zou hem nooit zien
     verschijnen en alleen een lege regel overhouden. De regel staat hier dus
     gewoon vanaf het begin, net als in de weergave zonder JavaScript. */
  .erg-hero.is-js .erg-h1-late{opacity:1;transform:none}
}

/* ============ Tijdlijn tandartsverhaal /ergonomics (#dental-history, 7 okt 2026) ============
   Vier stappen naast elkaar op desktop; smaller
   eerst twee en dan één kolom. De 1958-stap heeft geen foto maar een
   jaartalvlak in dezelfde verhouding (1,17) als de foto's. */
.tl-section{background:var(--bg-2)}
.tl{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.tl-step{position:relative;z-index:1}
.tl-img{aspect-ratio:1200/1024;border-radius:14px;overflow:hidden;background:var(--line);box-shadow:0 1px 2px rgba(16,24,40,.06)}
.tl-img img{width:100%;height:100%;object-fit:cover;display:block}
.tl-img-text{display:flex;align-items:center;justify-content:center;background:var(--dark)}
.tl-big{font-size:3.2rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.tl-year{display:inline-block;margin-top:20px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tl-now .tl-year{color:var(--teal)}
.tl-step h3{margin:6px 0 8px;font-size:1.15rem;line-height:1.3;color:var(--ink)}
.tl-step p{margin:0;font-size:.95rem;line-height:1.6;color:var(--muted)}
.tl-now .tl-img{outline:3px solid var(--teal);outline-offset:3px}
.tl-src{margin-top:44px}
@media (max-width:1000px){.tl{grid-template-columns:repeat(2,1fr);row-gap:44px}}
@media (max-width:560px){.tl{grid-template-columns:1fr}.tl-img-text{aspect-ratio:auto;padding:30px 0}.tl-big{font-size:2.6rem}}
.tl-img img.tl-pos-low{object-position:center 72%}
.tl-chain{margin:56px auto 0;max-width:980px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 36px}
.tl-chain-h{margin:0 0 20px;font-size:1.2rem;color:var(--ink);text-align:center}
.tl-chain-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tl-chain-list strong{display:block;margin-bottom:6px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.tl-chain-list span{display:block;font-size:.95rem;line-height:1.6;color:var(--muted)}
@media (max-width:760px){.tl-chain{padding:24px 20px}.tl-chain-list{grid-template-columns:1fr;gap:18px}}

/* #hidden-cost GESTAPELD (onder 861px of zonder script), 7 okt 2026 (Jan:
   "vreselijk slecht"). De gedeelde .feat-weergave zet een staande foto van
   84 tot 124px breed naast de kaart; voor productfoto's op /m30 werkt dat, voor
   deze reportagefoto's bleef er een postzegel over met lege vlakken. Hier staat
   de foto over de volle breedte boven de kaart, bijgesneden op de behandelaar
   (zelfde 72% als het beeldkader op desktop). */
@media(max-width:860px){
  #hidden-cost .feat-item{display:block}
  #hidden-cost .feat-item + .feat-item{margin-top:28px}
  #hidden-cost .feat-shot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 72%;
    border-radius:14px 14px 0 0;background:var(--dark-2)}
  #hidden-cost .feat-btn{border-radius:0 0 14px 14px}
}

/* Smal scherm (7 okt 2026, Jan): het beeldkader staat stil terwijl de foto's
   schuiven. .erg-track geeft de scrollruimte, het kader plakt onder de header.
   Op desktop doet .erg-hero-sticky dat al, daar is de track onzichtbaar. */
.erg-track{display:contents}
@media(min-width:861px){.erg-hero.is-js .erg-track{display:contents}}
@media(max-width:860px){
  .erg-hero.is-js .erg-track{display:block;height:280vh}
  /* Het frame plakt, zodat het bijschrift met de foto meeloopt. */
  .erg-hero.is-js .erg-frame{position:sticky;top:calc(var(--header-h,70px) + 16px)}
}