/* =====================================================================
   PEAK PERSONAL TRAINING - one-pager  (v3)
   Concept: rustige editorial typografie (Geist, sentence case, gewicht
   i.p.v. schreeuwen) + een bewuste kleur-dramaturgie: donker (opening),
   licht (doelen en personal training), donker (online coaching), oranje
   (CTA), donker (werkwijze), licht (coaches en records), licht (contact), donker (footer).
   Kleur wordt per sectie gezet via theme-classes (.t-ink / .t-paper /
   .t-sand / .t-flame) die dezelfde set tokens invullen.
   ===================================================================== */

:root{
  /* merk */
  --orange:      #FF5A1F;
  --orange-hi:   #FF7A45;
  --ink:         #111110;
  --paper:       #F5F4F1;

  /* stoer display-font, bewust maar op twee momenten: hero en CTA-blok */
  --font-poster: 'Anton', 'Archivo', Impact, sans-serif;
  --font-disp: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --wrap: 1280px;
  --nav-h: 64px;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --z-nav: 100;

  /* één afrondingssysteem voor de hele pagina */
  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,20,24,.05), 0 16px 36px -20px rgba(20,20,24,.3);
  --shadow-2: 0 34px 74px -36px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------------------
   THEMES - elke sectie krijgt er precies één
   --------------------------------------------------------------------- */
.t-ink{
  --surface:   #111110;
  --surface-2: #191917;
  --surface-3: #212120;
  --text:      #F0EEE9;
  --muted:     #A5A29A;
  --muted-2:   #74716A;
  --line:      rgba(240,238,233,.13);
  --line-2:    rgba(240,238,233,.24);
  --accent:    #FF6A33;          /* oranje als tekst/lijn, leesbaar op donker */
  background:var(--surface); color:var(--text);
}
.t-paper{
  --surface:   #F5F4F1;
  --surface-2: #FFFFFF;
  --surface-3: #ECEAE5;
  --text:      #16161A;
  --muted:     #56554F;
  --muted-2:   #7E7C75;
  --line:      rgba(22,22,26,.13);
  --line-2:    rgba(22,22,26,.22);
  --accent:    #C2400B;          /* donkerder oranje: haalt AA op licht */
  background:var(--surface); color:var(--text);
}
.t-sand{
  --surface:   #F0EEE9;
  --surface-2: #FCFBF9;
  --surface-3: #E5E2DB;
  --text:      #16161A;
  --muted:     #55544E;
  --muted-2:   #79776F;
  --line:      rgba(22,22,26,.14);
  --line-2:    rgba(22,22,26,.24);
  --accent:    #B93C09;
  background:var(--surface); color:var(--text);
}
.t-flame{
  --surface:   #FF5A1F;
  --surface-2: #FF6B36;
  --surface-3: #F04E14;
  --text:      #170701;
  --muted:     rgba(23,7,1,.72);
  --muted-2:   rgba(23,7,1,.55);
  --line:      rgba(23,7,1,.20);
  --line-2:    rgba(23,7,1,.34);
  --accent:    #170701;
  background:var(--surface); color:var(--text);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }   /* wint van display:flex op .form__success */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-size:clamp(15.5px,.4vw + .75rem,17px);
  line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--orange); color:#170701; }
/* op de oranje banden zou oranje-op-oranje onzichtbaar zijn: omgekeerd */
.t-flame::selection{ background:#170701; color:#F7F0EA; }
.t-flame ::selection{ background:#170701; color:#F7F0EA; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.skip-link{
  position:absolute; left:12px; top:-70px; z-index:200;
  background:var(--orange); color:#170701; font-family:var(--font-mono);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; padding:.6rem 1rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

/* -------- overlays -------- */
.grain{
  position:fixed; inset:0; z-index:130; pointer-events:none; opacity:.035; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:140; transform-origin:left; transform:scaleX(0); background:var(--orange); pointer-events:none; }
@supports (animation-timeline: scroll()){
  .progress{ animation:progressGrow linear both; animation-timeline:scroll(root block); }
  @keyframes progressGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

/* =====================================================================
   TYPE HELPERS - rustig: gewicht 600, sentence case, strak geleid
   ===================================================================== */
.mega{
  font-family:var(--font-disp); font-weight:600;
  line-height:1.02; letter-spacing:-.03em;
}
.h2{
  font-family:var(--font-disp); font-weight:600;
  line-height:1.1; letter-spacing:-.025em; font-size:clamp(1.6rem,3vw,2.5rem);
  text-wrap:balance;
}
.accent{ color:var(--accent); }

.kick{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  display:inline-flex; align-items:center; gap:.75rem;
}
.kick::before{ content:""; width:26px; height:2px; background:var(--orange); flex:none; }

.lead{ color:var(--muted); max-width:56ch; font-size:1.05rem; }

/* woord dat oranje invult zodra het in beeld komt */
.fill-on-view{
  color:transparent; -webkit-text-stroke:1.2px var(--accent); text-stroke:1.2px var(--accent);
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.reveal.in-view .fill-on-view, .in-view.fill-on-view{ color:var(--accent); -webkit-text-stroke-color:transparent; }

/* regel-reveal (gemaskeerd) */
.line{ display:block; overflow:hidden; padding-bottom:.08em; }
.line > span{ display:block; transform:translateY(112%); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  --pad-y:1rem; --pad-x:1.6rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-mono); font-weight:500; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em;
  padding:var(--pad-y) var(--pad-x); border:1.5px solid transparent; white-space:nowrap;
  border-radius:var(--r-sm);
  transition:transform .18s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  overflow:hidden; isolation:isolate;
}
.btn > span, .btn > .ic{ position:relative; z-index:1; transition:transform .25s var(--ease); }
.btn .ic{ width:1.05em; height:1.05em; }
.btn::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--orange-hi); transform:translateY(101%); transition:transform .35s var(--ease); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ --pad-y:.7rem; --pad-x:1.1rem; font-size:.7rem; }
.btn--block{ display:flex; width:100%; }

.btn--primary{ background:var(--orange); color:#170701; border-color:var(--orange); }
.btn--primary:hover{ color:#170701; border-color:var(--orange-hi); }

.btn--ghost{ color:var(--text); border-color:var(--line-2); }
.btn--ghost::before{ background:var(--text); }
.btn--ghost:hover{ color:var(--surface); border-color:var(--text); }

/* alleen op het oranje blok */
.btn--ink{ background:#170701; color:#F7F0EA; border-color:#170701; }
.btn--ink::before{ background:#FFF6F1; }
.btn--ink:hover{ color:#170701; }

/* =====================================================================
   NAV - donker over de hero, licht zodra hij plakt
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  --text:#F0EEE9; --muted:#A5A29A; --muted-2:#74716A;
  --line:rgba(240,238,233,.13); --line-2:rgba(240,238,233,.24);
  --surface:#111110; --nav-bg:transparent;
  color:var(--text); background:var(--nav-bg);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.nav.is-stuck{
  --text:#16161A; --muted:#56554F; --muted-2:#7E7C75;
  --line:rgba(22,22,26,.13); --line-2:rgba(22,22,26,.22);
  --surface:#F5F4F1; --nav-bg:rgba(245,244,241,.88);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{ max-width:var(--wrap); margin-inline:auto; padding:.8rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:var(--nav-h); }

/* sticky-sentinel: buiten de flow, zodat de negatieve marge van de hero
   hem niet meetrekt (anders klapt de nav direct naar zijn lichte staat) */
#top{ position:absolute; top:var(--nav-h); left:0; width:1px; height:1px; }
/* markeert de scrolldiepte waarop de "terug naar boven"-knop verschijnt */
#scrollMark{ position:absolute; top:320px; left:0; width:1px; height:1px; }

.brand{ display:inline-flex; align-items:center; gap:.7rem; }
/* PPT-beeldmerk uit de huisstijl van de klant; kleurt mee via currentColor */
.brand__logo{ height:26px; width:auto; aspect-ratio:1934/608; color:var(--text); flex:none; }
.brand__tag{ font-family:var(--font-mono); font-size:.55rem; line-height:1.45; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); padding-left:.7rem; border-left:1px solid var(--line-2); }

.nav__links{ display:flex; align-items:center; gap:1.8rem; }
.nav__links > a:not(.btn){ font-family:var(--font-mono); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); transition:color .2s var(--ease); }
.nav__links > a:not(.btn):hover{ color:var(--text); }
.nav__cta{ margin-left:.3rem; }

.nav__toggle{ display:none; width:44px; height:44px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__toggle span{ width:22px; height:2px; background:var(--text); transition:transform .25s var(--ease), opacity .2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO - tekst links, foto als afgeronde plaat rechts met een los
   datakaartje dat over de rand valt (diepte zonder glitter).
   ===================================================================== */
/* de hero schuift onder de (transparante) nav door, zodat het diagonale
   raster achter de navigatie doorloopt in plaats van eronder te beginnen */
.hero{
  position:relative; overflow:hidden; margin-top:calc(-1 * var(--nav-h));
  /* extra ruimte rechts binnen de wrap, zodat de rail vrij staat en de
     linkerkant uitgelijnd blijft met de nav en de rest van de pagina */
  --hero-shift: min(4.5rem, max(0px, calc((100vw - var(--wrap)) / 2 * .5)));
  --rail-inset: clamp(1rem, 2.4vw, 3rem);
}

/* sfeerlagen: diagonaal raster linksboven, warme gloed rechtsonder */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(62deg, rgba(240,238,233,.055) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(-62deg, rgba(240,238,233,.038) 0 1px, transparent 1px 164px);
  -webkit-mask-image:linear-gradient(156deg, #000 0%, rgba(0,0,0,.55) 58%, transparent 88%);
          mask-image:linear-gradient(156deg, #000 0%, rgba(0,0,0,.55) 58%, transparent 88%);
}
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-14%; bottom:-30%; width:62vw; height:62vw;
  background:radial-gradient(circle, rgba(255,90,31,.20), rgba(255,90,31,.055) 44%, transparent 68%);
}

.hero__inner{
  position:relative; z-index:1;
  max-width:var(--wrap); margin-inline:auto;
  padding:calc(var(--nav-h) + clamp(2.5rem,5vw,4rem)) calc(var(--gutter) + var(--hero-shift)) clamp(3rem,6vw,5rem) var(--gutter);
  min-height:100dvh;
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center;
}

/* Verticaal woordmerk als rail naast de foto. Staat bewust BUITEN de grid en
   in de marge naast de wrap, zodat het opschalen de foto niet smaller maakt.
   De maat volgt die beschikbare marge, dus hij kan er nooit overheen vallen. */
.hero__rail{
  --rail-space: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter) + var(--hero-shift));
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  right:var(--rail-inset); top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase;
  /* Anton tekent breder dan zijn regelbox (~1.2em), dus die overloop zit in
     de deler; zo blijft de rail altijd binnen de marge naast de foto.
     De ruime letterspatiering rekt PEAK tot ongeveer de hoogte van de foto. */
  font-size:min(17.5rem, max(0px, calc((var(--rail-space) - var(--rail-inset) - 1.5rem) / 1.2)));
  line-height:1; letter-spacing:.05em;
  color:transparent;
  -webkit-text-stroke:2px rgba(240,238,233,.22); text-stroke:2px rgba(240,238,233,.22);
}
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(1.1rem,1.8vw,1.6rem); }
.hero__title{
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase;
  line-height:.86; letter-spacing:.002em;
  font-size:clamp(3.1rem,7.4vw,6.6rem);
}
.hero__lead{ color:#D6D2CA; font-size:clamp(1rem,1.15vw,1.1rem); max-width:42ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem; }

.hero__media{ position:relative; }
.hero__figure{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  aspect-ratio:4/5; background:var(--surface-2);
  box-shadow:var(--shadow-2);
}
.hero__figure::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(240,238,233,.12); pointer-events:none; }
.hero__figure img{
  width:100%; height:100%; object-fit:cover; object-position:58% 22%;
  filter:grayscale(.25) contrast(1.05) brightness(.96);
  animation:heroIn 1.8s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

.hero__badge{
  position:absolute; left:clamp(-2.5rem,-2vw,-1rem); bottom:clamp(1.5rem,3vw,2.5rem);
  display:flex; align-items:center; gap:.9rem;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:.9rem 1.15rem .9rem 1rem; box-shadow:var(--shadow-2);
}
.hero__badge::before{ content:""; width:3px; align-self:stretch; background:var(--orange); border-radius:2px; }
.hero__badge strong{ font-family:var(--font-disp); font-weight:600; font-size:1.5rem; letter-spacing:-.03em; line-height:1; }
.hero__badge em{ font-style:normal; color:var(--accent); font-size:.6em; margin-left:.1em; }
.hero__badge span{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); line-height:1.5; }

/* =====================================================================
   STATS
   ===================================================================== */
.stats{ border-bottom:1px solid var(--line); }
.stats__row{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(1.8rem,3.2vw,2.8rem) clamp(.6rem,2vw,2rem); border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat__num{ display:flex; align-items:flex-start; font-family:var(--font-disp); font-weight:600; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1; letter-spacing:-.035em; }
.stat__num i{ font-style:normal; color:var(--accent); font-size:.5em; margin-left:.06em; }
.stat__label{ display:block; margin-top:.8rem; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); }

/* =====================================================================
   MARQUEE - zandkleurige overgangsband naar de lichte zone
   ===================================================================== */
.marquee{ overflow:hidden; border-bottom:1px solid var(--line); padding:clamp(1rem,2vw,1.6rem) 0; }
.marquee__track{ display:flex; width:max-content; animation:marquee 52s linear infinite; }
.marquee__track span{ font-family:var(--font-poster); font-weight:400; text-transform:uppercase; font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.05; letter-spacing:.01em; color:var(--text); white-space:nowrap; padding-right:.5rem; }
.marquee__track i{ color:rgba(23,7,1,.45); font-style:normal; padding:0 .7rem; font-size:.36em; vertical-align:middle; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =====================================================================
   STATEMENT
   ===================================================================== */
.statement{ padding-block:clamp(4.5rem,10vw,8rem); }
/* linkerkolom volgt de breedte van de titel (die op 18ch staat), anders
   blijft er een gat tussen de kop en de divider staan */
.statement__grid{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(2.5rem,6vw,7rem); align-items:end; }
.statement__note{ color:var(--muted); font-size:1rem; max-width:48ch; padding-bottom:.4rem; border-left:2px solid var(--orange); padding-left:1.2rem; }
.statement .kick{ margin-bottom:1.1rem; }
.statement__title{ font-size:clamp(1.9rem,4.4vw,3.4rem); max-width:18ch; }

/* =====================================================================
   SECTION SHELL
   ===================================================================== */
.section{ padding-block:clamp(4rem,8vw,7rem); }
.section__head{ margin-bottom:clamp(2.2rem,4.5vw,3.4rem); max-width:760px; }
.section__head .kick{ margin-bottom:1rem; }
.section__intro{ color:var(--muted); max-width:56ch; margin-top:1.2rem; font-size:1.05rem; }

/* =====================================================================
   SPECIALISATIES - posterindex: volle regels met hairlines, de discipline
   op posterformaat. Hover vult de regel oranje (zelfde flame-tokens als de
   CTA-band), dus geen kaartenstapel en geen herhaalde foto.
   ===================================================================== */
.index{ border-bottom:1px solid var(--line-2); }
.index__row{
  --pad-x: clamp(.75rem,1.6vw,1.4rem);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.2rem,3vw,3rem); align-items:center;
  border-top:1px solid var(--line-2);
  padding:clamp(1.5rem,3vw,2.5rem) var(--pad-x);
  margin-inline:calc(-1 * var(--pad-x));
  transition:background .3s var(--ease), color .3s var(--ease);
}
.index__no{
  align-self:start; padding-top:.4em;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.08em; color:var(--muted-2);
  transition:color .3s var(--ease);
}
.index__name{
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.75rem,3.7vw,3.25rem); line-height:.95; letter-spacing:.008em;
}
.index__desc{
  color:var(--muted); font-size:.97rem; max-width:48ch; margin-top:.6rem;
  transition:color .3s var(--ease);
}
.index__tags{
  display:grid; gap:.4rem; justify-items:end; text-align:right;
  font-family:var(--font-mono); font-size:.67rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2);
  transition:color .3s var(--ease);
}

/* de oranje vulling is een highlight, geen link: er wordt niets onthuld
   wat zonder hover verborgen blijft */
@media (hover:hover){
  .index__row:hover{ background:var(--orange); color:#170701; }
  .index__row:hover .index__no,
  .index__row:hover .index__desc,
  .index__row:hover .index__tags{ color:#170701; }
}

/* =====================================================================
   COACHING
   ===================================================================== */
.coaching__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.coaching__left .lead{ margin:1.4rem 0 2.2rem; }
.checks{ display:grid; gap:0; border-top:1px solid var(--line); }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center; color:var(--text); font-size:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.checks__no{ font-family:var(--font-mono); font-size:.74rem; font-weight:500; color:var(--muted-2); }

.plan{ position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:clamp(1.8rem,3vw,2.4rem); overflow:hidden; }
.plan__kicker{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:1rem; }
.plan__price{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem; }
.plan__price .mega{ font-size:clamp(2rem,3.6vw,2.7rem); }
.plan__desc{ color:var(--muted); margin-bottom:1.8rem; font-size:1rem; }

/* fotostrook van de sportschool: drie beelden op gelijke hoogte met
   verschillende breedtes, zodat het overzicht de hoofdrol houdt */
.gym{ display:grid; grid-template-columns:1.55fr 1.15fr .62fr; gap:clamp(.6rem,1.2vw,.9rem); margin-top:clamp(2.5rem,5vw,4rem); height:clamp(260px,30vw,430px); }
.gym figure{ margin:0; min-height:0; }
.gym img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); border:1px solid var(--line); }
.gym__caption{ margin-top:.8rem; font-size:.85rem; color:var(--muted); }

/* =====================================================================
   ONLINE COACHING
   Drie lagen: wat in elk traject zit, de vier trajecten met alleen hun
   eigen onderdelen, en de twee begeleidingsniveaus. Geen prijzen: die
   bespreekt de coach in de intake.
   ===================================================================== */
.online__base{ display:grid; grid-template-columns:auto 1fr; gap:1rem clamp(1.5rem,4vw,3rem); align-items:baseline; padding:1.4rem 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line); margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }
.online__base-title{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.13em; color:var(--accent); }
.online__base-list{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; font-size:.97rem; }
.online__base-list li{ position:relative; padding-left:1.2rem; }
.online__base-list li::before{ content:""; position:absolute; left:0; top:.62em; width:.55rem; height:2px; background:var(--accent); }

.tracks{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.2rem); }
.track{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.3rem,2vw,1.6rem); }
.track__name{ font-family:var(--font-poster); font-weight:400; text-transform:uppercase; font-size:clamp(1.4rem,2.2vw,1.85rem); line-height:1; letter-spacing:.01em; margin-bottom:1.1rem; }
.track__list, .tier__list{ display:grid; gap:.6rem; }
.track__list li, .tier__list li{ position:relative; padding-left:1.2rem; color:var(--muted); font-size:.93rem; line-height:1.5; }
.track__list li::before, .tier__list li::before{ content:""; position:absolute; left:0; top:.68em; width:.55rem; height:2px; background:var(--accent); }

.tiers{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(.9rem,1.6vw,1.2rem); margin-top:clamp(.9rem,1.6vw,1.2rem); }
.tier{ border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.4rem,2.4vw,2rem); }
.tier__name{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.02em; margin-bottom:.6rem; }
.tier__desc{ color:var(--muted); font-size:.97rem; }
/* Elite krijgt het merkoranje: het is het uitgebreidere niveau */
.tier--elite{ background:var(--orange); border-color:var(--orange); color:#170701; }
.tier--elite .tier__desc{ color:rgba(23,7,1,.78); margin-bottom:1rem; }
.tier--elite .tier__list{ grid-template-columns:1fr 1fr; gap:.6rem 1.6rem; }
.tier--elite .tier__list li{ color:#170701; }
.tier--elite .tier__list li::before{ background:#170701; }

/* =====================================================================
   AANPAK
   ===================================================================== */
.steps{ display:grid; gap:0; border-top:1px solid var(--line-2); }
.step{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:baseline; padding:clamp(1.5rem,2.8vw,2.2rem) 0; border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease); }
.step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--orange); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.step__no{ font-family:var(--font-mono); font-weight:500; font-size:.9rem; letter-spacing:.08em; color:var(--muted-2); transition:color .35s var(--ease); }
.step__body{ max-width:54ch; }
.step__body h3{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.02em; margin-bottom:.5rem; }
.step__body p{ color:var(--muted); font-size:1rem; }
@media (hover:hover){
  .step:hover{ padding-left:1.4rem; }
  .step:hover::before{ transform:scaleY(1); }
  .step:hover .step__no{ color:var(--accent); }
}

/* =====================================================================
   COACHES - twee gelijke studioportretten, dus een gelijke set kaarten
   ===================================================================== */
.coaches__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.5vw,2rem); align-items:stretch; }
.coach{ display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden; transition:border-color .35s var(--ease), transform .35s var(--ease); }
.coach__photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface-3); }
.coach__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; filter:grayscale(1) contrast(1.04) brightness(.94); transition:transform .7s var(--ease), filter .5s var(--ease); will-change:transform; }
.coach__meta{ padding:clamp(1.3rem,2.2vw,1.7rem); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.coach__role{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.13em; color:var(--accent); }
.coach__name{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.25rem,2.1vw,1.6rem); line-height:1.1; letter-spacing:-.02em; }
.coach__bio{ color:var(--muted); font-size:.97rem; }
@media (hover:hover){
  .coach:hover{ border-color:var(--line-2); transform:translateY(-3px); }
  .coach:hover .coach__photo img{ filter:grayscale(0) brightness(1); transform:scale(1.03); }
}

/* =====================================================================
   RECORDS
   ===================================================================== */
.records{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line); padding:clamp(1.5rem,3vw,2.4rem) 0; overflow:hidden; }
.record__big{ font-family:var(--font-disp); font-weight:600; font-size:clamp(3rem,9vw,6.4rem); line-height:1; letter-spacing:-.045em; color:var(--text); white-space:nowrap; }
.record__big em{ font-style:normal; color:var(--accent); font-size:.26em; margin-left:.08em; letter-spacing:0; }
.record__info{ text-align:right; }
.record__lift{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.02em; }
.record__hint{ font-family:var(--font-body); font-weight:400; font-size:.6em; color:var(--muted); letter-spacing:0; }
.record__by{ font-family:var(--font-mono); font-size:.74rem; color:var(--muted); letter-spacing:.02em; margin-top:.4rem; }

/* =====================================================================
   CTA COLOR BLOCK
   ===================================================================== */
.cta{ position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; opacity:.07; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cta__inner{ position:relative; z-index:1; padding-block:clamp(3rem,7vw,5rem); display:flex; flex-direction:column; align-items:center; gap:clamp(1.6rem,3vw,2.4rem); }
/* posterregel die de volle breedte van het blok vult, net als in de footer */
.cta__title{
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase;
  line-height:1; letter-spacing:.005em; white-space:nowrap; text-align:center;
  font-size:clamp(1.3rem,8.4vw,7.6rem);
}

/* =====================================================================
   CONTACT
   ===================================================================== */
/* formulier breed links, gegevens en kaart in een smalle kolom rechts */
.contact__grid{ display:grid; grid-template-columns:1.62fr .88fr; gap:clamp(1.2rem,2.4vw,2rem); align-items:start; }
/* de zijkolom rekt mee met het formulier; de mottokaart vult wat overblijft,
   zodat de kolom onderaan gelijk eindigt zonder vaste hoogtes te prikken */
.contact__side{ display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:clamp(1.2rem,2.4vw,2rem); align-self:stretch; }

.side-card{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:clamp(1.3rem,2.3vw,1.9rem);
}
.side-card__title{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:-.02em; margin-bottom:1.4rem; }

.contact__list{ display:grid; gap:1.35rem; }
.contact__list li{ display:grid; grid-template-columns:auto 1fr; align-items:start; gap:.9rem; font-size:.95rem; }
.contact__list li > div{ display:grid; gap:.2rem; min-width:0; }
.contact__list a, .contact__list li > div > span:not(.contact__label){ overflow-wrap:anywhere; }
.contact__label{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted-2); }
.contact__note{ color:var(--muted-2); font-size:.82rem; }
.contact__list a{ transition:color .2s var(--ease); }
.contact__list a:hover{ color:var(--accent); }
.ci{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:.15rem; }

/* kaart: geen eigen "openen in maps"-link, die zet Google zelf al in de iframe */
.side-card--map{ padding:0; overflow:hidden; }
.side-card--map iframe{ display:block; width:100%; height:clamp(220px,24vw,300px); border:0; }

/* de regel vult de kaart van links naar rechts, net als de footerregel.
   Daar kan dat op vw, hier niet: de kaart groeit niet mee met de viewport
   omdat de wrap afkapt. Vandaar container-units, relatief aan de kaart zelf. */
.side-card--motto{
  container-type:inline-size;
  display:flex; align-items:center; justify-content:center;
  min-height:3.5rem; padding-block:.9rem;
  background:var(--ink); border-color:var(--ink); color:#F0EEE9;
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase;
  line-height:1; letter-spacing:.005em;
}
.side-card--motto > span{ font-size:11.5cqi; white-space:nowrap; }
.side-card--motto .accent{ color:var(--orange); }

.contact__panel{ position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:clamp(1.5rem,3.4vw,2.7rem); overflow:hidden; }

.panel__head{ padding-bottom:1.3rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); }
.panel__title{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.02em; }
.panel__sub{ color:var(--muted); font-size:.94rem; margin-top:.4rem; }

.form{ display:grid; gap:1.15rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.field{ display:grid; gap:.45rem; align-content:start; border:none; min-width:0; }
.field > label, .field > legend{
  display:flex; align-items:baseline; gap:.5rem; padding:0;
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted);
}
.req{ color:var(--accent); }
.opt{ font-size:.92em; letter-spacing:.08em; color:var(--muted-2); text-transform:none; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--text);
  font-family:var(--font-body); font-size:1rem; padding:.8rem .95rem; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:108px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(255,90,31,.18);
}
/* pijl staat op een lichte sectie, dus donkere stroke */
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2356554F' stroke-width='2'%3E%3Cpath d='M2 4l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }

/* keuzeknoppen voor de locatie */
.choice__opts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.choice__opt{ position:relative; }
.choice__opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice__opt span{
  display:inline-block; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.55rem .95rem;
  font-size:.9rem; color:var(--muted); background:var(--surface);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.choice__opt:hover span{ border-color:var(--muted-2); color:var(--text); }
.choice__opt input:checked + span{ background:var(--text); border-color:var(--text); color:var(--surface-2); }
.choice__opt input:focus-visible + span{ outline:2px solid var(--orange); outline-offset:3px; }

/* akkoordvinkje */
.check{ display:grid !important; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; cursor:pointer;
  font-family:var(--font-body) !important; font-size:.92rem !important; text-transform:none !important;
  letter-spacing:0 !important; color:var(--muted) !important; line-height:1.5; }
.check input{ width:18px; height:18px; margin-top:.15rem; accent-color:var(--orange); cursor:pointer; }

.field__hint{ display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; color:var(--muted-2); }
.field__hint span{ font-family:var(--font-mono); font-size:.72rem; flex:none; }
.field__error{ font-size:.82rem; color:#B3261E; display:flex; align-items:center; gap:.4rem; }
.field__error::before{ content:"!"; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; flex:none; border-radius:50%; background:#B3261E; color:#fff; font-size:.62rem; font-weight:700; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#B3261E; }
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus{ box-shadow:0 0 0 3px rgba(179,38,30,.16); }
.field.has-error .choice__opt span{ border-color:#B3261E; }

/* honeypot: onzichtbaar voor mensen, vindbaar voor bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn__spinner{ display:none; width:1em; height:1em; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-busy{ pointer-events:none; }
.btn.is-busy .btn__spinner{ display:inline-block; }

.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.4rem; margin-top:.4rem; }
.form__foot .btn{ flex:none; }
.form__note{ font-family:var(--font-mono); font-size:.68rem; color:var(--muted-2); line-height:1.65; text-align:right; }
.form__error{ margin-top:1rem; font-size:.9rem; color:#B3261E; }
.form__success{ display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--accent); border-radius:var(--r-md); background:rgba(194,64,11,.07); padding:1.3rem 1.4rem; }
.form__success svg{ width:26px; height:26px; color:var(--accent); flex:none; margin-top:.1rem; }
.form__success p{ font-size:.95rem; color:var(--muted); }
.form__success-title{ font-family:var(--font-disp); font-weight:600; font-size:1.1rem; color:var(--text) !important; margin-bottom:.35rem; letter-spacing:-.01em; }
.form__success .btn{ margin-top:1.1rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4.5rem) 2.2rem; overflow:hidden; }
.footer__top{ display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:center; justify-content:space-between; padding-bottom:clamp(2rem,4.5vw,3rem); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1rem 1.8rem; }
.footer__nav a{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); transition:color .2s var(--ease); }
.footer__nav a:hover{ color:var(--accent); }
/* posterregel die de volle breedte van de footer vult */
.footer__mega{
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.3rem,7.9vw,6.9rem); line-height:1; letter-spacing:.005em;
  color:var(--muted-2); white-space:nowrap; text-align:center;
  padding-block:clamp(1.5rem,3.5vw,2.8rem);
}
.footer__mega .stroke{ color:var(--accent); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; border-top:1px solid var(--line); padding-top:1.8rem; font-family:var(--font-mono); font-size:.72rem; color:var(--muted-2); letter-spacing:.02em; }
.footer__bottom a{ transition:color .2s var(--ease); }
.footer__bottom a:hover{ color:var(--accent); }

/* =====================================================================
   TERUG NAAR BOVEN
   ===================================================================== */
.to-top{
  position:fixed; z-index:calc(var(--z-nav) - 1);
  right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem);
  display:grid; place-items:center; width:50px; height:50px;
  border-radius:var(--r-pill);
  background:var(--orange); color:#170701;
  border:2px solid transparent;   /* vast, zodat de rand kan kleuren zonder maatsprong */
  box-shadow:0 2px 6px rgba(20,20,24,.18), 0 16px 34px -14px rgba(255,90,31,.85);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.92);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease), visibility 0s linear .3s;
}
.to-top.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease), visibility 0s;
}
/* op de oranje banden valt een oranje knop weg: witte rand, gloed eraf */
.to-top.on-flame{
  border-color:#F7F0EA;
  box-shadow:0 2px 10px rgba(23,7,1,.3);
}
.to-top:hover{ background:var(--orange-hi); }
.to-top:active{ transform:translateY(1px); }
.to-top svg{ width:21px; height:21px; }

/* =====================================================================
   REVEAL
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.reveal[data-delay="1"]{ transition-delay:.05s; }
.reveal[data-delay="2"]{ transition-delay:.1s; }
.reveal[data-delay="3"]{ transition-delay:.15s; }
.reveal.in-view{ opacity:1; transform:none; }

/* al voorbij gescrold: meteen tonen, niets animeren */
.reveal.no-anim, .reveal.no-anim *{ transition:none !important; animation:none !important; }
.reveal.no-anim .line > span{ transform:none; }

/* hero-regels bij laden, statement-regels in beeld */
.hero .line > span{ animation:lineUp .7s var(--ease) forwards; }
.hero .line:nth-child(1) > span{ animation-delay:.08s; }
.hero .line:nth-child(2) > span{ animation-delay:.16s; }
.hero .line:nth-child(3) > span{ animation-delay:.24s; }
.statement.reveal.in-view .line > span{ animation:lineUp .6s var(--ease) forwards; }
.statement.reveal.in-view .line:nth-child(2) > span{ animation-delay:.08s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .nav__links{ position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:1rem var(--gutter) 2rem; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); }
  .nav__links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links > a:not(.btn){ width:100%; padding:1rem 0; font-size:.92rem; border-bottom:1px solid var(--line); }
  .nav__cta{ margin:1.2rem 0 0; width:100%; }
  .nav__toggle{ display:flex; }
}

/* onder deze maat is er geen marge naast de wrap meer over voor de rail */
@media (max-width:1180px){
  .hero__rail{ display:none; }
}

@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; min-height:0; gap:clamp(2rem,6vw,3rem); }
  .hero__figure{ aspect-ratio:5/4; }
  .hero__figure img{ object-position:60% 22%; }
  .hero__badge{ left:auto; right:1rem; bottom:1rem; }
  .statement__grid{ grid-template-columns:1fr; align-items:start; }
  /* nummer blijft op zijn plek, tags zakken onder de omschrijving */
  .index__row{ grid-template-columns:auto minmax(0,1fr); gap:clamp(1rem,3vw,1.6rem); align-items:start; }
  .index__tags{
    grid-column:2; justify-items:start; text-align:left;
    display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:1rem;
  }
  .coaching__grid{ grid-template-columns:1fr; }
  .tracks{ grid-template-columns:1fr 1fr; }
  .tiers{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .records{ grid-template-columns:1fr; text-align:left; }
  .record__info{ text-align:left; }
  .coaches__grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .stats__row{ grid-template-columns:1fr 1fr; }
  .stat{ padding-left:clamp(.8rem,3vw,1.4rem); }
  .stat:nth-child(odd){ border-left:none; padding-left:0; }
  .stat:nth-child(3), .stat:nth-child(4){ border-top:1px solid var(--line); }
  .form__row{ grid-template-columns:1fr; }
  .form__foot{ flex-direction:column; align-items:stretch; }
  .form__foot .btn{ width:100%; }
  .form__note{ text-align:left; }
  .step{ grid-template-columns:1fr; gap:.3rem; }
  .online__base{ grid-template-columns:1fr; }
  .tracks{ grid-template-columns:1fr; }
  .gym{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; height:auto; }
  .gym__main{ grid-column:1 / -1; }
  .gym img{ aspect-ratio:4/3; height:auto; }
  .tier--elite .tier__list{ grid-template-columns:1fr; }
  .brand__tag{ display:none; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .line > span{ transform:none !important; }
  .marquee__track{ animation:none; }
  .fill-on-view{ color:var(--accent); -webkit-text-stroke-color:transparent; }
}