/* ==========================================================================
   VOLT WORLD — design system
   Brand palette sampled from the official logo files:
   black #201E1E · yellow #FFD02C · white #FEFEFE
   ========================================================================== */

:root {
  --ink:        #0c0b0b;
  --ink-1:      #141212;
  --ink-2:      #1b1919;
  --ink-3:      #232020;
  --line:       #2c2929;
  --line-2:     #413c3c;
  --fog:        #918b88;
  --fog-2:      #b7b1ad;
  --chalk:      #ede9e6;
  --white:      #fefefe;

  --volt:       #ffd02c;
  --volt-2:     #ffdf6a;
  --volt-dim:   #b8880a;
  /* --volt-dim is only 3.2:1 on white, which fails small text. This is the
     accent for anything under 24px sitting on a light surface. */
  --volt-deep:  #8c6600;
  --volt-ink:   #1a1400;
  --volt-glow:  rgba(255, 208, 44, .15);

  --paper:      #f4f2ee;
  --paper-2:    #e7e4dd;
  --paper-ink:  #201e1e;
  --paper-fog:  #6a635f;

  --wrap:       1280px;
  --gut:        clamp(20px, 5vw, 64px);
  --r:          14px;
  --r-lg:       22px;

  --ease:       cubic-bezier(.22, 1, .36, 1);

  --f-disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0; background: var(--ink); color: var(--chalk);
  font: 400 clamp(15px, .42vw + 14px, 17px)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-disp); font-weight: 800; line-height: .98;
  letter-spacing: -.028em; font-stretch: 112%; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--volt); color: var(--volt-ink); }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%);
  background: var(--volt); color: var(--volt-ink); padding: 11px 18px; border-radius: 100px;
  font: 600 13px/1 var(--f-body); transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* --- layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(68px, 8vw, 128px); position: relative; }
.sec--tight { padding-block: clamp(48px, 5.5vw, 86px); }
/* Paper is the default surface for every content section. The dark
   treatment is now reserved for the hero, the brand film, the photo band
   and the footer, which frame the page instead of filling it. */
.sec { background: var(--paper); color: var(--paper-ink); }
.sec .eyebrow, .sec .lede, .sec .muted { color: var(--paper-fog); }

/* --- type ----------------------------------------------------------------- */
.d1 { font-size: clamp(42px, 7.4vw, 104px); }
.d2 { font-size: clamp(32px, 5vw, 68px); }
.d3 { font-size: clamp(25px, 3vw, 42px); }
.lede { font-size: clamp(15.5px, .55vw + 14.6px, 19px); color: var(--fog-2); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--fog); }
.fineprint { font-size: 13px; color: var(--fog); line-height: 1.55; margin-top: 14px; max-width: 70ch; }
.sec .fineprint { color: var(--paper-fog); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 11.5px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fog); margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--volt); box-shadow: 0 0 12px var(--volt-glow);
}
.volt-text { color: var(--volt); }

/* --- buttons -------------------------------------------------------------- */
.btn {
  --bg: var(--volt); --fg: var(--volt-ink); --bd: var(--volt);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border: 1px solid var(--bd); border-radius: 100px;
  background: var(--bg); color: var(--fg);
  font: 600 14.5px/1 var(--f-body); cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); background: var(--volt-2); box-shadow: 0 10px 26px -12px rgba(255, 208, 44, .6); }
.btn:active { transform: translateY(0); }
.btn--ghost { --bg: transparent; --fg: var(--chalk); --bd: var(--line-2); }
.btn--ghost:hover { --bd: var(--chalk); background: rgba(255, 255, 255, .05); box-shadow: none; }
.btn--dark { --bg: var(--paper-ink); --fg: var(--paper); --bd: var(--paper-ink); }
.btn--dark:hover { background: #000; box-shadow: none; }
.btn--paper-ghost { --bg: transparent; --fg: var(--paper-ink); --bd: rgba(32, 30, 30, .24); }
.btn--paper-ghost:hover { --bd: var(--paper-ink); background: rgba(32, 30, 30, .05); box-shadow: none; }
.btn--sm { padding: 9px 17px; font-size: 13px; }
.btn .ar { transition: transform .3s var(--ease); flex: none; }
.btn:hover .ar { transform: translateX(3px); }

.tlink {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  font: 600 14px/1 var(--f-body); color: var(--chalk); padding: 0 0 4px;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .2s, color .2s, gap .3s var(--ease);
}
.tlink:hover { border-color: var(--volt); color: var(--volt); gap: 12px; }
.sec .tlink { color: var(--paper-ink); border-color: rgba(32, 30, 30, .25); }
.sec .tlink:hover { color: var(--volt-dim); border-color: var(--volt-dim); }
.cta-row { display: flex; flex-wrap: wrap; gap: 11px; }

.chipbtn {
  border: 1px solid var(--line-2); background: transparent; color: var(--fog-2);
  border-radius: 100px; padding: 9px 17px; font: 500 13.5px/1 var(--f-body); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chipbtn:hover { border-color: var(--chalk); color: var(--chalk); }
.chipbtn[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--volt-ink); font-weight: 600; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; justify-content: space-between; }

/* --- announcement + header ------------------------------------------------ */
.ann {
  background: var(--volt); color: var(--volt-ink);
  font: 500 12.5px/1.35 var(--f-body);
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 8px 16px; text-align: center; flex-wrap: wrap;
}
.ann a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ann .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; }
@media (max-width: 620px) { .ann .dot { display: none; } .ann { gap: 2px; } }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(12, 11, 11, .72);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.hdr.is-stuck { border-bottom-color: var(--line); background: rgba(12, 11, 11, .94); }
.hdr__in { display: flex; align-items: center; gap: 26px; height: 66px; }
.hdr__nav { display: flex; gap: 2px; margin-left: auto; }
.hdr__nav a {
  position: relative; padding: 8px 12px; border-radius: 8px;
  font: 500 14px/1 var(--f-body); color: var(--fog-2); transition: color .2s, background .2s;
}
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, .06); }
.hdr__nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--volt);
}
.hdr__cta { display: flex; align-items: center; gap: 10px; }
.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  border-radius: 10px; background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--chalk); position: relative; transition: .3s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--chalk); transition: .3s var(--ease);
}
.burger span::before { top: -5.5px; } .burger span::after { top: 5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.mnav { display: none; border-top: 1px solid var(--line); background: var(--ink-1); padding: 10px var(--gut) 24px; }
.mnav.is-open { display: block; }
.mnav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--f-disp); font-weight: 700; font-size: 20px; letter-spacing: -.02em;
}
.mnav a span { font: 400 12px/1 var(--f-mono); color: var(--fog); }
.mnav .cta-row { margin-top: 20px; }
.mnav .btn { flex: 1; }

/* --- logo ----------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 22px; width: auto; }
.ftr .logo img { height: 26px; }
@media (max-width: 420px) { .logo img { height: 19px; } }

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(34px, 4vw, 58px) 0; }
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(880px 560px at 74% 34%, rgba(255, 208, 44, .10), transparent 66%),
    radial-gradient(640px 460px at 10% 6%, rgba(255, 255, 255, .035), transparent 70%);
}
.grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(90% 70% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 35%, #000 20%, transparent 78%);
}
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 3vw, 48px); align-items: center; }
.hero h1 { font-size: clamp(42px, 5.8vw, 82px); }
.hero h1 .ln { display: block; }
.hero__copy .lede { margin-top: 20px; }
.hero__copy .cta-row { margin-top: 28px; }
.hero__stage { position: relative; }
.hero__stage::after {
  content: ""; position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  width: 70%; height: 42px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .75), transparent 70%); filter: blur(12px);
}
.hero__bike {
  position: relative; z-index: 1; width: auto; max-width: 100%;
  max-height: min(54vh, 500px); margin-inline: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7));
}
.hero__tag {
  position: absolute; z-index: 2; right: 0; top: 2%;
  background: rgba(27, 25, 25, .82); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 15px; font: 500 12px/1 var(--f-mono); color: var(--fog-2);
  transition: border-color .25s, color .25s;
}
.hero__tag:hover { border-color: var(--volt); color: var(--chalk); }
.hero__tag b { color: var(--volt); font-weight: 500; }

.ticker {
  position: relative; margin-top: clamp(28px, 3.2vw, 48px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ticker__i { padding: 18px 6px 18px 0; }
.ticker__i + .ticker__i { padding-left: clamp(14px, 2.4vw, 34px); border-left: 1px solid var(--line); }
.ticker__n { font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: clamp(25px, 2.5vw, 38px); letter-spacing: -.035em; line-height: 1; }
.ticker__n sup { font-size: .46em; font-weight: 600; vertical-align: super; color: var(--volt); margin-left: 3px; }
.ticker__l { margin-top: 7px; font: 400 11px/1.3 var(--f-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fog); }

/* --- section heading ------------------------------------------------------ */
.shead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end;
  margin-bottom: clamp(32px, 3.6vw, 56px); }
.shead p.lede { margin-top: 16px; }

/* --- model cards ---------------------------------------------------------- */
.models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mcard {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 18px 20px; isolation: isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.mcard::before {
  content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit;
  background: radial-gradient(420px 260px at 50% 16%, var(--volt-glow), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.mcard:hover { transform: translateY(-5px); border-color: var(--line-2); }
.mcard:hover::before { opacity: 1; }
.mcard.is-picked { border-color: var(--volt); }
.mcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.chip { font: 500 10.5px/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--fog); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 10px; }
.mcard__price { font: 500 13px/1 var(--f-mono); color: var(--volt); }
.mcard__img { position: relative; display: block; height: clamp(178px, 15.5vw, 224px);
  margin: 10px 0 14px; overflow: hidden; }
.mcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform .55s var(--ease); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .6)); }
.mcard:hover .mcard__img img { transform: scale(1.05) rotate(-.6deg); }
.mcard h3 { font-size: 23px; }
.mcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mcard__sub { margin-top: 8px; font-size: 14px; color: var(--fog); line-height: 1.5; min-height: 3em; }
.mcard__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.mcard__specs li { font: 500 11px/1 var(--f-mono); color: var(--chalk);
  background: rgba(255, 255, 255, .05); border-radius: 6px; padding: 7px 9px; }
.mcard__specs i { font-style: normal; color: var(--fog); }
.mcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mcard__foot .tlink, .mcard__foot .cmpbtn { position: relative; z-index: 2; }

.cmpbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--fog-2);
  border-radius: 100px; padding: 8px 13px; font: 500 12.5px/1 var(--f-body);
  transition: border-color .2s, color .2s, background .2s;
}
.cmpbtn:hover { border-color: var(--chalk); color: var(--chalk); }
.cmpbtn[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--volt-ink); font-weight: 600; }
.cmpbtn__i { display: grid; place-items: center; }
.cmpbtn--sm .cmpbtn__t { display: none; }
@media (min-width: 1100px) { .cmpbtn--sm .cmpbtn__t { display: inline; } }

/* --- split / features ----------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 64px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media { border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.sec .split__media { border-color: rgba(32, 30, 30, .1); background: var(--paper-2); }

.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feat { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--ink-2); min-height: 330px; display: flex; align-items: flex-end; }
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feat:hover img { transform: scale(1.04); }
.feat__v { position: relative; padding: 24px; width: 100%;
  background: linear-gradient(to top, rgba(12, 11, 11, .96) 12%, rgba(12, 11, 11, .55) 55%, transparent); }
.feat h3 { font-size: clamp(19px, 1.6vw, 25px); }
.feat p { margin-top: 10px; font-size: 14.5px; color: var(--fog-2); max-width: 44ch; line-height: 1.55; }
.feat--wide { grid-column: span 2; min-height: 380px; }

/* --- pillars -------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pillar { background: var(--ink-1); padding: clamp(22px, 2.4vw, 36px); }
.pillar__n { font: 500 11.5px/1 var(--f-mono); color: var(--volt); letter-spacing: .14em; }
.pillar h3 { margin: 16px 0 11px; font-size: clamp(18px, 1.4vw, 23px); }
.pillar p { font-size: 14.5px; color: var(--fog); line-height: 1.6; }

/* --- compare table -------------------------------------------------------- */
.cmpctl { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-bottom: 18px; }
.switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__t { width: 40px; height: 23px; border-radius: 100px; background: var(--paper-2);
  border: 1px solid rgba(32, 30, 30, .18); position: relative; transition: background .25s, border-color .25s; flex: none; }
.switch__t::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--paper-ink); transition: transform .25s var(--ease); }
.switch input:checked + .switch__t { background: var(--volt); border-color: var(--volt); }
.switch input:checked + .switch__t::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__t { outline: 2px solid var(--volt-dim); outline-offset: 2px; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-1); }
.sec .tablewrap { border-color: rgba(32, 30, 30, .12); background: var(--white); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 14px; }
table.cmp th, table.cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sec table.cmp th, .sec table.cmp td { border-bottom-color: rgba(32, 30, 30, .09); }
table.cmp thead th { position: sticky; top: 0; background: var(--ink-2); z-index: 2; }
.sec table.cmp thead th { background: var(--paper-2); }
table.cmp thead .m { font-family: var(--f-disp); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
table.cmp thead .m:hover { color: var(--volt-dim); }
table.cmp thead .p { display: block; margin-top: 5px; font: 500 12px/1 var(--f-mono); color: var(--paper-fog); }
table.cmp tbody th { font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fog); width: 175px; }
.sec table.cmp tbody th { color: var(--paper-fog); }
table.cmp tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.sec table.cmp tbody tr:hover td { background: rgba(32, 30, 30, .028); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp td.na { color: var(--fog); }
table.cmp .is-hidden { display: none; }

/* --- matcher -------------------------------------------------------------- */
.matcher {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--ink-2), var(--ink-1) 62%);
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
.sec .matcher { border-color: rgba(32, 30, 30, .12); background: var(--white); }
.matcher__head { padding: clamp(26px, 3vw, 44px); border-right: 1px solid var(--line); }
.sec .matcher__head { border-right-color: rgba(32, 30, 30, .1); }
.matcher__body { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; }
.mbar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 24px; }
.sec .mbar { background: var(--paper-2); }
.mbar i { display: block; height: 100%; background: var(--volt); transition: width .45s var(--ease); }
.mstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.mstep legend { padding: 0; font-family: var(--f-disp); font-weight: 800; font-stretch: 108%;
  font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -.025em; margin-bottom: 18px; }
.mstep legend i { display: block; font: 400 11px/1 var(--f-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--volt); font-style: normal; margin-bottom: 10px; }
.sec .mstep legend i { color: var(--volt-deep); }
.mopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mopt {
  text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .02); padding: 15px 16px; display: grid; gap: 5px;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.sec .mopt { border-color: rgba(32, 30, 30, .13); background: var(--paper); }
.mopt:hover { border-color: var(--volt); transform: translateY(-2px); }
.mopt b { font-size: 15px; font-weight: 600; }
.mopt span { font-size: 12.5px; color: var(--fog); line-height: 1.45; }
.sec .mopt span { color: var(--paper-fog); }

.mresult { display: grid; gap: 18px; }
.mpick { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center;
  border: 1px solid var(--volt); border-radius: 16px; padding: 16px;
  background: radial-gradient(400px 200px at 10% 0%, var(--volt-glow), transparent 70%); }
.sec .mpick { background: #fffaea; }
.mpick__img { position: relative; height: 96px; }
.mpick__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mpick__k { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--volt); }
.sec .mpick__k { color: var(--volt-dim); }
.mpick h3 { font-size: clamp(22px, 2vw, 30px); margin: 9px 0 8px; }
.mpick ul { display: grid; gap: 6px; margin-top: 10px; }
.mpick li { font-size: 13.5px; color: var(--fog-2); display: flex; gap: 9px; }
.sec .mpick li { color: var(--paper-fog); }
.mpick li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--volt); margin-top: 8px; flex: none; }
.mpick .cta-row { margin-top: 16px; }
.mrunner { font-size: 14px; color: var(--fog); }
.sec .mrunner { color: var(--paper-fog); }
.mrunner a { color: var(--chalk); border-bottom: 1px solid var(--line-2); }
.sec .mrunner a { color: var(--paper-ink); border-bottom-color: rgba(32, 30, 30, .3); }
.mrunner a:hover { color: var(--volt); border-color: var(--volt); }
.matcher__foot { margin-top: 20px; display: flex; gap: 22px; }

/* --- running cost calculator ---------------------------------------------- */
.calc { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--ink-2), var(--ink-1) 62%); }
.calc__head { padding: clamp(26px, 3vw, 42px) clamp(26px, 3vw, 42px) 0; }
.calc__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(22px, 3vw, 44px); padding: clamp(24px, 3vw, 42px); }
.calc__inputs { display: grid; gap: 13px; align-content: start; }
.calc__out { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; align-content: start; }
.costrow { background: var(--ink-1); padding: 15px 18px; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; }
.costrow__n { font-weight: 600; font-size: 15px; }
.costrow__v { font-family: var(--f-disp); font-weight: 800; font-size: 24px; letter-spacing: -.03em; color: var(--volt); }
.costrow__m { grid-column: 1 / -1; font: 400 12px/1.45 var(--f-mono); color: var(--fog); }
.costrow--car .costrow__v { color: var(--chalk); }
.calc__note { background: var(--ink-1); padding: 15px 18px; font-size: 14px; color: var(--fog-2); }
.calc__note b { color: var(--volt); }
.calc__out .fineprint { background: var(--ink-1); padding: 0 18px 16px; margin: 0; }

/* --- range check ---------------------------------------------------------- */
.rangecalc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(22px, 3vw, 48px); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 42px); background: var(--ink-1); align-items: center; }
.rangecalc__ui label { display: block; font: 400 13px/1 var(--f-mono); color: var(--fog);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.rangecalc__ui label b { color: var(--volt); font-weight: 500; }
.rangecalc input[type=range] { width: 100%; accent-color: var(--volt); height: 22px; cursor: pointer; }
.rangecalc__out { margin-top: 14px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; line-height: 1.45; }
.rangecalc__out b { color: var(--volt); font-weight: 600; }

/* --- quote band ----------------------------------------------------------- */
.band { position: relative; min-height: min(78vh, 680px); display: grid; align-items: end; overflow: hidden; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__v { position: relative; width: 100%; padding-block: clamp(36px, 5vw, 76px);
  background: linear-gradient(to top, rgba(12, 11, 11, .94) 8%, rgba(12, 11, 11, .3) 60%, transparent); }
.band blockquote { margin: 0; font-family: var(--f-disp); font-weight: 800; font-stretch: 114%;
  font-size: clamp(29px, 5vw, 68px); line-height: .98; letter-spacing: -.03em; max-width: 17ch; }
.band cite { display: block; margin-top: 18px; font: 400 12px/1 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fog); font-style: normal; }

/* --- product page --------------------------------------------------------- */
.crumb { font: 400 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--fog);
  padding-top: 24px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.crumb i { opacity: .4; font-style: normal; }
.crumb a:hover { color: var(--volt); }

.phero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 3.6vw, 60px); align-items: center;
  padding-block: clamp(24px, 3vw, 48px) clamp(52px, 6vw, 92px); }
.pstage { position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(70% 70% at 50% 40%, #262121, var(--ink-1) 74%);
  border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.pstage img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px);
  object-fit: contain; filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .65)); }
.pstage .shot { display: none; }
.pstage .shot.is-on { display: block; }
.pstage .shot.photo { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.zoom {
  position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(12, 11, 11, .7);
  backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; color: var(--chalk);
  transition: border-color .2s, color .2s, background .2s;
}
.zoom:hover { border-color: var(--volt); color: var(--volt); }
.thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { scroll-snap-align: start; flex: none; }
.thumb { position: relative; width: 72px; height: 58px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--ink-2); cursor: pointer; overflow: hidden; transition: border-color .25s, background .25s; }
.thumb img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: contain; }
.thumb.photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-selected="true"] { border-color: var(--volt); background: rgba(255, 208, 44, .08); }
.thumb:hover { border-color: var(--line-2); }

.pinfo h1 { font-size: clamp(36px, 4.6vw, 62px); margin-top: 12px; }
.pinfo .kick { font: 500 11.5px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--volt); }
.pinfo .tag { margin-top: 14px; font-size: clamp(16.5px, 1.2vw, 20px); color: var(--chalk); font-weight: 500; }
.pinfo .lede { margin-top: 14px; }
.pprice { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.pprice b { font-family: var(--f-disp); font-weight: 800; font-size: 36px; letter-spacing: -.035em; }
.pprice span { font: 400 12px/1 var(--f-mono); color: var(--fog); letter-spacing: .08em; text-transform: uppercase; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 22px; }
.pstats div { background: var(--ink-1); padding: 15px 11px; }
.pstats b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: -.035em; line-height: 1; }
.pstats b i { font-style: normal; font-size: .5em; color: var(--volt); margin-left: 3px; }
.pstats span { display: block; margin-top: 7px; font: 400 10.5px/1.3 var(--f-mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--fog); }
.pinfo .cta-row { margin-top: 24px; }
.pmeta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }

.pbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: rgba(12, 11, 11, .9); backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line); transform: translateY(105%);
  transition: transform .4s var(--ease);
}
.pbar.is-on { transform: none; }
.pbar__in { display: flex; align-items: center; gap: 16px; padding-block: 11px; }
.pbar__img { position: relative; width: 56px; height: 42px; flex: none; }
.pbar__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pbar__n { display: grid; }
.pbar__n b { font-family: var(--f-disp); font-weight: 800; font-size: 17px; letter-spacing: -.025em; }
.pbar__n i { font: 500 12.5px/1 var(--f-mono); font-style: normal; color: var(--volt); margin-top: 4px; }
.pbar__s { font: 400 12px/1 var(--f-mono); color: var(--fog); }
.pbar__a { margin-left: auto; display: flex; gap: 9px; }

.specgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.specblk { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-1); padding: 22px 24px; }
.specblk h3 { font-size: 12.5px; font-weight: 600; font-family: var(--f-mono); font-stretch: normal;
  letter-spacing: .16em; text-transform: uppercase; color: var(--volt); margin-bottom: 4px; }
.specblk dl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin: 0; }
.specblk dt, .specblk dd { padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 14px; }
.specblk dt { color: var(--fog); }
.specblk dd { text-align: right; }
.specblk dl > :nth-last-child(1), .specblk dl > :nth-last-child(2) { border-bottom: 0; padding-bottom: 0; }

.boxlist { display: grid; }
.boxlist li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; }
.sec .boxlist li { border-bottom-color: rgba(32, 30, 30, .12); }
.boxlist li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--volt); flex: none; }
.boxlist li:last-child { border-bottom: 0; }

/* --- lightbox ------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 150; background: rgba(6, 6, 6, .96);
  display: grid; grid-template-rows: auto 1fr auto; padding: 14px; }
.lb[hidden] { display: none; }
.lb__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lb__count { font: 400 12px/1 var(--f-mono); color: var(--fog); letter-spacing: .1em; }
.lb__fig { position: relative; display: grid; place-items: center; min-height: 0; }
.lb__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb__cap { text-align: center; font-size: 13.5px; color: var(--fog); padding: 10px 0 4px; }
.lb__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(27, 25, 25, .8); color: var(--chalk); display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s, color .2s; }
.lb__btn:hover { border-color: var(--volt); color: var(--volt); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__nav--p { left: 4px; } .lb__nav--n { right: 4px; }

/* --- compare tray --------------------------------------------------------- */
.tray {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(140%);
  z-index: 88; width: min(760px, calc(100% - 24px));
  background: rgba(27, 25, 25, .93); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-2); border-radius: 100px;
  transition: transform .4s var(--ease); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9);
}
.tray.is-on { transform: translateX(-50%); }
.tray { transition: transform .4s var(--ease), bottom .35s var(--ease); }
.tray__in { display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 18px; }
.tray__slots { display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; }
.tslot { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .06);
  border-radius: 100px; padding: 6px 8px 6px 6px; font-size: 13px; white-space: nowrap; }
.tslot img { width: 30px; height: 24px; object-fit: contain; }
.tslot button { border: 0; background: none; cursor: pointer; color: var(--fog); font-size: 15px; line-height: 1; padding: 2px 4px; }
.tslot button:hover { color: var(--volt); }
.tray__act { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tray__clear { background: none; border: 0; cursor: pointer; color: var(--fog); font-size: 13px; }
.tray__clear:hover { color: var(--chalk); }

/* --- faq ------------------------------------------------------------------ */
.faqsearch { position: relative; margin-bottom: 8px; }
.faqsearch input {
  width: 100%; max-width: 440px; background: var(--white); border: 1px solid rgba(32, 30, 30, .15);
  border-radius: 100px; padding: 13px 20px; font: 400 15px/1 var(--f-body); color: var(--paper-ink);
}
.faqsearch input:focus { outline: none; border-color: var(--volt-dim); }
.faqsearch__c { margin-top: 10px; font-size: 13px; color: var(--paper-fog); min-height: 1.2em; }

.faq { border-top: 1px solid var(--line); }
.sec .faq { border-top-color: rgba(32, 30, 30, .13); }
.faq details { border-bottom: 1px solid var(--line); }
.sec .faq details { border-bottom-color: rgba(32, 30, 30, .13); }
.faq details[hidden] { display: none; }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--f-disp); font-weight: 700; font-stretch: 108%;
  font-size: clamp(16.5px, 1.3vw, 21px); letter-spacing: -.02em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; margin-top: -6px;
  background: linear-gradient(currentColor, currentColor) center/13px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center/1.5px 13px no-repeat;
  transition: transform .35s var(--ease); color: var(--volt-dim);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--volt-dim); }
.faq__a { padding: 0 6ch 24px 0; color: var(--fog); font-size: 15.5px; line-height: 1.65; max-width: 74ch; }
.sec .faq__a { color: var(--paper-fog); }

/* --- forms ---------------------------------------------------------------- */
.form { display: grid; gap: 13px; }
.field { display: grid; gap: 7px; }
.field label { font: 400 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.sec .field label { color: var(--paper-fog); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--ink-1); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; color: var(--chalk); font: 400 15px/1.5 var(--f-body);
  transition: border-color .2s, background .2s;
}
.sec .field input, .sec .field select, .sec .field textarea {
  background: var(--white); border-color: rgba(32, 30, 30, .15); color: var(--paper-ink);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--volt); }
.field input::placeholder, .field textarea::placeholder { color: #6b6462; }
.field input[aria-invalid="true"] { border-color: #ff6b5e; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.formnote { margin-top: 4px; font-size: 14px; color: var(--volt); }
.sec .formnote { color: var(--volt-dim); }

.infoblk { display: grid; margin: 0; }
.inforow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.sec .inforow { border-bottom-color: rgba(32, 30, 30, .12); }
.inforow dt { font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); }
.sec .inforow dt { color: var(--paper-fog); }
.inforow dd { margin: 0; font-size: 15.5px; }
.inforow dd a { border-bottom: 1px solid var(--line-2); }
.inforow dd a:hover { color: var(--volt); border-color: var(--volt); }

/* --- empty state ---------------------------------------------------------- */
.empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: clamp(40px, 5.5vw, 80px) clamp(24px, 4vw, 56px); text-align: center;
  background: radial-gradient(70% 100% at 50% 0%, rgba(255, 208, 44, .05), transparent 70%);
}
.empty h3 { font-size: clamp(23px, 2.4vw, 34px); }
.empty p { margin: 14px auto 0; max-width: 52ch; color: var(--fog); }
.empty .cta-row { justify-content: center; margin-top: 26px; }

/* --- cta band ------------------------------------------------------------- */
.ctaband {
  position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(140deg, var(--ink-2), var(--ink-1) 60%);
  padding: clamp(32px, 4.4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center;
}
.ctaband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 88% 20%, var(--volt-glow), transparent 68%); }
.ctaband > * { position: relative; z-index: 1; }
.ctaband h2 { font-size: clamp(26px, 3.3vw, 46px); }
.ctaband p { margin-top: 13px; color: var(--fog-2); max-width: 50ch; }

/* --- footer --------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); padding-block: clamp(44px, 5vw, 72px) 28px; background: var(--ink-1); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 38px 24px; }
.ftr__brand .logo { margin-bottom: 16px; }
.ftr__brand p { color: var(--fog); font-size: 14.5px; max-width: 36ch; }
.ftr h4 { font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fog); margin-bottom: 15px; font-stretch: normal; }
.ftr li + li { margin-top: 10px; }
.ftr a { font-size: 14.5px; color: var(--fog-2); transition: color .2s; }
.ftr a:hover { color: var(--volt); }
.ftr__soc { display: flex; gap: 8px; margin-top: 20px; }
.ftr__soc a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; transition: border-color .25s, background .25s, color .25s; }
.ftr__soc a:hover { border-color: var(--volt); color: var(--volt); background: rgba(255, 208, 44, .08); }
.ftr__soc svg { width: 16px; height: 16px; }
.ftr__btm { margin-top: clamp(36px, 4.4vw, 60px); padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.ftr__btm p, .ftr__btm a { font: 400 12.5px/1.5 var(--f-body); color: var(--fog); }

/* --- floating whatsapp ---------------------------------------------------- */
.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px 11px 13px; border-radius: 100px;
  background: var(--volt); color: var(--volt-ink); font: 600 14px/1 var(--f-body);
  box-shadow: 0 12px 30px -10px rgba(255, 208, 44, .5);
  transition: transform .3s var(--ease), bottom .35s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab svg { width: 20px; height: 20px; }
.has-pbar .wa-fab, .has-tray .wa-fab { bottom: 84px; }
.has-pbar.has-tray .wa-fab { bottom: 150px; }
.has-pbar .tray { bottom: 80px; }
@media (max-width: 620px) {
  .wa-fab span { display: none; }
  .wa-fab { padding: 13px; }
}

/* --- reveal --------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .models { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matcher, .calc__grid, .rangecalc { grid-template-columns: 1fr; }
  .matcher__head { border-right: 0; border-bottom: 1px solid var(--line);
    padding-bottom: clamp(22px, 3vw, 36px); }
  .sec .matcher__head { border-bottom-color: rgba(32, 30, 30, .1); }
}
@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__cta { display: none; }
  .burger { display: inline-flex; margin-left: auto; }
  .hero__in { grid-template-columns: 1fr; }
  .hero__stage { order: -1; max-width: 520px; margin-inline: auto; }
  .hero__tag { display: none; }
  /* minmax(0,...) matters here: the thumbnail strip is nowrap, so a bare 1fr
     takes its 632px min-content as the column floor and the page scrolls
     sideways on a phone. */
  .phero { grid-template-columns: minmax(0, 1fr); }
  .phero > * { min-width: 0; }
  .split, .split--rev .split__media { grid-template-columns: 1fr; order: 0; }
  .feats { grid-template-columns: 1fr; }
  .feat--wide { grid-column: span 1; }
  .specgrid { grid-template-columns: 1fr; }
  .shead { grid-template-columns: 1fr; align-items: start; }
  .ctaband { grid-template-columns: 1fr; }
  .pbar__s { display: none; }
}
@media (max-width: 620px) {
  .models { grid-template-columns: 1fr; }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .ticker__i:nth-child(3), .ticker__i:nth-child(4) { border-top: 1px solid var(--line); }
  .ticker__i:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pstats { grid-template-columns: repeat(2, 1fr); }
  .f2, .mopts { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; gap: 30px; }
  .inforow { grid-template-columns: 1fr; gap: 5px; }
  .specblk { padding: 20px; }
  .specblk dl { grid-template-columns: 1fr; }
  .specblk dd { text-align: left; padding-top: 0; }
  .specblk dt { padding-bottom: 5px; border-bottom: 0; }
  .band blockquote { max-width: none; }
  .mpick { grid-template-columns: 1fr; }
  .mpick__img { height: 130px; }
  .pbar__n b { font-size: 15px; }
  .tray { border-radius: 20px; }
  .tray__in { flex-wrap: wrap; padding: 12px; }
  .tray__act { width: 100%; }
  .tray__act .btn { flex: 1; }
}

/* ==========================================================================
   INTERACTION LAYER — pointer-aware states, feedback and navigation aids.
   Everything here is additive: with JS off the page loses nothing.
   ========================================================================== */

/* --- pointer-aware hover -------------------------------------------------- */
/* Touch screens have no hover, so a tap used to leave buttons stuck in the
   lifted state until you tapped elsewhere. Neutralise the lifts there and
   lean on :active instead, which touch does report. */
@media (hover: none) {
  .btn:hover, .wa-fab:hover, .tlink:hover, .mcard:hover .mcard__img img { transform: none; }
  .btn:hover { box-shadow: none; background: var(--bg); }
  .btn:hover .ar { transform: none; }
  .chipbtn:hover, .cmpbtn:hover { border-color: var(--line-2); color: var(--fog-2); }
  .btn:active { transform: scale(.97); }
  .chipbtn:active, .cmpbtn:active { transform: scale(.96); }
}

/* --- press feedback ------------------------------------------------------- */
/* .wa-fab and .totop are already fixed, which is containing block enough for
   the ripple — re-declaring position here would undo their anchoring. */
.btn, .chipbtn, .cmpbtn { position: relative; }
.btn, .chipbtn, .cmpbtn, .wa-fab, .totop { overflow: hidden; -webkit-tap-highlight-color: transparent; }
.rip {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .26; transform: scale(0);
  animation: rip .55s var(--ease) forwards;
}
@keyframes rip { to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rip { display: none; } }

/* --- busy button ---------------------------------------------------------- */
.btn.is-busy { pointer-events: none; opacity: .72; }
.btn.is-busy .ar { display: none; }
.btn.is-busy::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 2s; } }

/* --- scroll progress ------------------------------------------------------ */
.prog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: var(--volt); opacity: 0; transition: opacity .3s;
}
.hdr.is-stuck .prog { opacity: 1; }

/* --- active section in nav ------------------------------------------------ */
.hdr__nav a.is-here { color: var(--volt); }

/* --- toast ---------------------------------------------------------------- */
.toasts {
  position: fixed; top: 78px; left: 50%; transform: translateX(-50%);
  z-index: 95; display: grid; gap: 8px; justify-items: center;
  width: max-content; max-width: calc(100% - 24px); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: rgba(27, 25, 25, .95); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 10px 18px 10px 14px; color: var(--chalk);
  font: 500 13.5px/1.3 var(--f-body); text-align: left;
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .9);
  animation: toast-in .35s var(--ease);
}
.toast__i { flex: none; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--volt); color: var(--volt-ink); }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(-8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-out { animation: none; }
  .toast.is-out { opacity: 0; }
}

/* --- back to top ---------------------------------------------------------- */
/* Mirrors the WhatsApp button on the opposite corner and rides the same
   offsets, so the buy bar and compare tray never sit on top of it. */
.totop {
  position: fixed; left: 16px; bottom: 16px; z-index: 80;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer;
  background: rgba(27, 25, 25, .9); backdrop-filter: blur(18px) saturate(140%);
  color: var(--chalk); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease),
              bottom .35s var(--ease), border-color .2s, color .2s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.has-pbar .totop, .has-tray .totop { bottom: 84px; }
.has-pbar.has-tray .totop { bottom: 150px; }
@media (hover: hover) { .totop:hover { border-color: var(--volt); color: var(--volt); } }

/* --- copy to clipboard ---------------------------------------------------- */
.copy {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin-left: 8px; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 100px; background: transparent;
  color: var(--fog); font: 500 11px/1 var(--f-mono); letter-spacing: .06em;
  text-transform: uppercase; transition: border-color .2s, color .2s, background .2s;
}
.sec .copy, .ftr .copy { border-color: rgba(32, 30, 30, .22); color: var(--paper-fog); }
@media (hover: hover) { .copy:hover { border-color: var(--volt); color: var(--volt); } }
.copy.is-done { border-color: var(--volt); background: var(--volt); color: var(--volt-ink); }

/* --- floating stack offsets ----------------------------------------------- */
/* The old fixed 84px/150px steps assumed the compare tray was always one row
   tall. On narrow screens it wraps to two, so the WhatsApp button sat on top
   of it. These offsets are measured from the live elements instead — see
   --lift in volt.js — so any wrap height keeps the stack clear. */
.wa-fab, .totop,
.has-pbar .wa-fab, .has-tray .wa-fab, .has-pbar.has-tray .wa-fab,
.has-pbar .totop, .has-tray .totop, .has-pbar.has-tray .totop {
  bottom: calc(16px + var(--lift, 0px));
}
.tray, .has-pbar .tray { bottom: calc(16px + var(--pbar-h, 0px)); }

/* ---------------------------------------------------------------- brand film
   Decorative only. Nothing is laid over it, so the frame reads on its own.
   Masked top and bottom so it dissolves into the page instead of ending on a
   hard edge — the clip's own background is near-black, which is what makes
   the blend work against --ink. */
.vband { position: relative; overflow: hidden; background: var(--ink); line-height: 0; }

.vband__v {
  display: block; width: 100%; height: clamp(280px, 44vw, 600px);
  object-fit: cover; object-position: center 46%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* A hairline of brand colour top and bottom, so the section reads as part of
   the site rather than as a dropped-in rectangle. */
.vband::before,
.vband::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--volt-dim), transparent);
  opacity: .5;
}
.vband::before { top: 0; }
.vband::after  { bottom: 0; }

@media (max-width: 760px) {
  .vband__v { height: clamp(220px, 58vw, 340px); }
}

/* Honour a reduced-motion preference: the poster frame stands in for the clip
   and the file is never fetched (see volt.js). */
@media (prefers-reduced-motion: reduce) {
  .vband__v { height: clamp(220px, 38vw, 460px); }
}

/* ============================================================== light surface
   The dark frame is kept only where it earns its place — the hero, the brand
   film, the photo band, the footer. Everything carrying product information
   now sits on paper, where the cut-out photography and the numbers read
   without fighting the background.

   Two rules hold this palette together:
     1. raised things are --white on a --paper section, never the reverse;
     2. --volt is a background colour here, never a text colour. #ffd02c on
        white is about 1.6:1, so text accents use --volt-dim instead.
   ------------------------------------------------------------------------- */

/* --- model cards ---------------------------------------------------------- */
.sec .mcard {
  background: var(--white); border-color: rgba(32, 30, 30, .10);
  box-shadow: 0 1px 2px rgba(32, 30, 30, .04);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sec .mcard::before {
  background: radial-gradient(420px 260px at 50% 16%, rgba(255, 208, 44, .20), transparent 70%);
}
.sec .mcard:hover { border-color: rgba(32, 30, 30, .18); box-shadow: 0 16px 34px rgba(32, 30, 30, .10); }
.sec .mcard.is-picked { border-color: var(--volt-dim); }
.sec .mcard__sub { color: var(--paper-fog); }
.sec .mcard__price { color: var(--volt-deep); }
/* the cut-outs carry a heavy shadow tuned for black; on paper it reads as dirt */
.sec .mcard__img img { filter: drop-shadow(0 14px 22px rgba(32, 30, 30, .16)); }

/* --- chips, filters, compare toggles -------------------------------------- */
.sec .chip { color: var(--paper-fog); border-color: rgba(32, 30, 30, .16); }
.sec .chipbtn,
.sec .cmpbtn { border-color: rgba(32, 30, 30, .18); color: var(--paper-fog); }
.sec .chipbtn:hover,
.sec .cmpbtn:hover { border-color: var(--paper-ink); color: var(--paper-ink); }
.sec .chipbtn[aria-pressed="true"],
.sec .cmpbtn[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--volt-ink); }

/* --- pillars -------------------------------------------------------------- */
.sec .pillars { background: rgba(32, 30, 30, .10); border-color: rgba(32, 30, 30, .10); }
.sec .pillar { background: var(--white); }
.sec .pillar__n { color: var(--volt-deep); }
.sec .pillar p { color: var(--paper-fog); }

/* --- feature photo cards --------------------------------------------------
   The copy sits on top of the photograph, over its own dark scrim, so only the
   frame changes here. The text stays light on purpose. */
.sec .feat { border-color: rgba(32, 30, 30, .10); background: var(--paper-2); }

/* --- running cost calculator ---------------------------------------------- */
.sec .calc { border-color: rgba(32, 30, 30, .12); background: var(--white); }
.sec .calc__out { background: rgba(32, 30, 30, .10); border-color: rgba(32, 30, 30, .10); }
.sec .costrow { background: var(--white); }
.sec .costrow__v { color: var(--volt-deep); }
.sec .costrow--car .costrow__v { color: var(--paper-ink); }
.sec .costrow__m { color: var(--paper-fog); }
.sec .calc__note { background: var(--white); color: var(--paper-fog); }
.sec .calc__note b { color: var(--volt-deep); }
.sec .calc__out .fineprint { background: var(--white); }

/* --- empty state ---------------------------------------------------------- */
.sec .empty { border-color: rgba(32, 30, 30, .2);
  background: radial-gradient(70% 100% at 50% 0%, rgba(255, 208, 44, .14), transparent 70%); }
.sec .empty p { color: var(--paper-fog); }

/* --- product page: stage, gallery, specs ---------------------------------- */
.sec .crumb { color: var(--paper-fog); }
.sec .crumb a:hover { color: var(--volt-deep); }

.sec .pstage {
  background: radial-gradient(76% 76% at 50% 38%, var(--white), var(--paper-2) 78%);
  border-color: rgba(32, 30, 30, .10);
}
.sec .pstage img { filter: drop-shadow(0 22px 36px rgba(32, 30, 30, .20)); }
.sec .pstage .shot.photo { filter: none; }

.sec .zoom { border-color: rgba(32, 30, 30, .18); background: rgba(254, 254, 254, .82); color: var(--paper-ink); }
.sec .zoom:hover { border-color: var(--volt-dim); color: var(--volt-dim); }

.sec .thumb { border-color: rgba(32, 30, 30, .12); background: var(--white); }
.sec .thumb:hover { border-color: rgba(32, 30, 30, .3); }
.sec .thumb[aria-selected="true"] { border-color: var(--volt-dim); background: #fffaea; }

.sec .pinfo .kick { color: var(--volt-deep); }
.sec .pinfo .tag { color: var(--paper-ink); }
.sec .pprice span { color: var(--paper-fog); }
.sec .pstats { background: rgba(32, 30, 30, .10); }
.sec .pstats div { background: var(--white); }
.sec .pstats b i { color: var(--volt-deep); }
.sec .pstats span { color: var(--paper-fog); }
.sec .pmeta { border-top-color: rgba(32, 30, 30, .12); }

.sec .specblk { border-color: rgba(32, 30, 30, .10); background: var(--white); }
.sec .specblk h3 { color: var(--volt-deep); }
.sec .specblk dt { color: var(--paper-fog); }
.sec .specblk dt,
.sec .specblk dd { border-bottom-color: rgba(32, 30, 30, .09); }

/* --- deliberate dark blocks that stay dark on paper -----------------------
   The closing CTA keeps the dark treatment: against paper it now reads as an
   accent rather than as more of the same. Its own copy is already light. */
.sec .ctaband { border-color: transparent; }

/* spec chips and empty table cells were tuned for the dark card */
.sec .mcard__specs li { color: var(--paper-ink); background: rgba(32, 30, 30, .045);
  border-color: rgba(32, 30, 30, .10); }
.sec .mcard__specs li i { color: var(--paper-fog); }
.sec table.cmp td.na { color: var(--paper-fog); }

/* --- range check panel ---------------------------------------------------- */
.sec .rangecalc { background: var(--white); border-color: rgba(32, 30, 30, .10); }
.sec .rangecalc__ui label { color: var(--paper-fog); }
.sec .rangecalc__ui label b { color: var(--volt-deep); }
.sec .rangecalc__out b { color: var(--volt-deep); }

/* --- ghost buttons on paper -----------------------------------------------
   The outline button was drawn for a dark page. On paper it needs the dark
   ink treatment — except inside the closing CTA, which is still a dark block
   and keeps the original. */
.sec .btn--ghost { --fg: var(--paper-ink); --bd: rgba(32, 30, 30, .24); }
.sec .btn--ghost:hover { --bd: var(--paper-ink); background: rgba(32, 30, 30, .05); }
.sec .ctaband .btn--ghost { --fg: var(--chalk); --bd: var(--line-2); }
.sec .ctaband .btn--ghost:hover { --bd: var(--chalk); background: rgba(255, 255, 255, .05); }

/* Sections that only exist to carry the light surface — the product header
   and its breadcrumb already own their spacing. */
.sec--flush { padding-block: 0; }

/* --- text that sits on a dark scrim inside a light section ----------------
   These blocks lay their copy over a photograph behind a dark gradient, so
   the text has to stay light even though the section around them is paper.
   A contrast check that samples background colours will not catch this,
   because the background here is an image. */
.sec .feat__v,
.sec .feat h3 { color: var(--chalk); }
.sec .ctaband,
.sec .ctaband h2 { color: var(--chalk); }
.sec .ctaband p { color: var(--fog-2); }

/* --- battery tiers --------------------------------------------------------
   Two builds of the same bike shown side by side. The price shown above them
   is the entry one, so these carry the real figures. */
.pvars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.pvar { border: 1px solid rgba(32, 30, 30, .12); border-radius: var(--r);
  background: var(--white); padding: 14px 16px; }
.pvar__h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pvar__h b { font-family: var(--f-disp); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.pvar__h span { font: 400 10.5px/1 var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-fog); }
.pvar__p { margin-top: 9px; font-family: var(--f-disp); font-weight: 800;
  font-size: 22px; letter-spacing: -.025em; }
.pvar__p i { font-style: normal; font: 500 12px/1 var(--f-mono);
  color: var(--volt-deep); margin-left: 7px; }
.pvar__s { margin-top: 7px; font: 400 12.5px/1.45 var(--f-mono); color: var(--paper-fog); }
.pvars__n { margin-top: 10px; font-size: 13px; color: var(--paper-fog); }

@media (max-width: 620px) { .pvars { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the blog
   Measured for reading rather than for the grid: body copy is capped near 68
   characters, which is where long-form stops being tiring. */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pcard { background: var(--white); border: 1px solid rgba(32, 30, 30, .10);
  border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.pcard:hover { transform: translateY(-4px); border-color: rgba(32, 30, 30, .18);
  box-shadow: 0 16px 34px rgba(32, 30, 30, .09); }
.pcard__k { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pcard__k time, .post__k time { font: 400 11.5px/1 var(--f-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--paper-fog); }
.pcard h3 { font-size: clamp(20px, 1.9vw, 27px); }
.pcard h3 a { position: relative; }
.pcard p { color: var(--paper-fog); font-size: 15px; line-height: 1.6; flex: 1; }
.pcard .tlink { align-self: flex-start; }

.post { max-width: 68ch; }
.post__k { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.post__body h2 { margin-top: clamp(32px, 3.4vw, 52px); font-size: clamp(21px, 2vw, 29px); }
.post__body h2:first-child { margin-top: 0; }
.post__body p { margin-top: 15px; font-size: 16.5px; line-height: 1.7; color: var(--paper-ink); }
.post__more { margin-top: 26px; }

/* The shop details, repeated at the foot of every post — the one thing a
   local search visitor came for. */
.storecard { border: 1px solid rgba(32, 30, 30, .12); border-radius: var(--r-lg);
  background: var(--white); padding: clamp(22px, 2.6vw, 34px); }
.storecard address { font-style: normal; margin-top: 12px; font-size: 16px; line-height: 1.6; }
.storecard .muted { margin-top: 8px; font-size: 14px; }
.storecard .cta-row { margin-top: 20px; }

.ftr__addr { font-style: normal; margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--fog); }
.ftr__addr a { color: var(--fog-2); }
.ftr__addr a:hover { color: var(--volt); }

@media (max-width: 760px) { .pgrid { grid-template-columns: 1fr; } }

/* --- photographs inside a post --------------------------------------------
   Pulled slightly wider than the 68ch text column so the article breathes,
   without breaking out of the page gutter on a phone. */
.pfig { margin: clamp(28px, 3vw, 44px) 0 0; }
.pfig img { display: block; width: 100%; height: auto; border-radius: var(--r-lg);
  background: var(--paper-2); }
.pfig figcaption { margin-top: 10px; font: 400 12.5px/1.5 var(--f-mono);
  color: var(--paper-fog); }
.pfig--lead { margin: 0; }
.pfig--lead img { aspect-ratio: 16 / 7; object-fit: cover; }

@media (min-width: 1000px) {
  .post__body .pfig { width: calc(100% + 140px); margin-left: -70px; }
  .post__body .pfig figcaption { margin-left: 70px; }
}

/* --- floating contact button ----------------------------------------------
   Icon only at rest; the label slides out on hover, and on a phone the first
   tap reveals it while the second follows the link. Deliberately not a
   WhatsApp button: WhatsApp is offered as an alternative in the footer and on
   the contact page, not as the primary channel. */
.wa-fab span {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .32s var(--ease), opacity .22s var(--ease), margin-left .32s var(--ease);
  margin-left: 0;
}
.wa-fab { padding: 13px; }
.wa-fab:hover span,
.wa-fab:focus-visible span,
.wa-fab:active span { max-width: 9em; opacity: 1; margin-left: 8px; }

@media (max-width: 620px) {
  /* The base rule hides the label outright on small screens; here it is the
     tap that reveals it, so it has to stay in the layout. */
  .wa-fab span { display: inline; }
}

/* --- WhatsApp as an alternative, in the footer ---------------------------- */
.ftr__alt { margin-top: 14px; }
.ftr__alt a { display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--fog-2); }
.ftr__alt a:hover { color: var(--volt); }
.ftr__alt svg { width: 17px; height: 17px; }

/* --- honeypot -------------------------------------------------------------
   Hidden from people and from screen readers, but still in the layout and
   still focusable by a script. display:none would be a tell: bots skip those
   and fill the rest. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

/* --- featured post --------------------------------------------------------
   One post leads the index. Spans both columns so the ranking is visible at
   a glance rather than depending on someone noticing the small label. */
.pcard--featured { border-color: rgba(32, 30, 30, .2); }
.pcard__flag { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--volt-ink); background: var(--volt);
  border-radius: 100px; padding: 5px 10px; }

@media (min-width: 761px) {
  .pcard--featured { grid-column: span 2; }
  .pcard--featured h3 { font-size: clamp(24px, 2.6vw, 34px); }
}