/* ============================================================
   BLACK MAMBA COILS
   HARDCORE 4X4 SUSPENSION COILS
   Industrial / motorsport / off-road engineering aesthetic
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  --black: #080808;
  --black-1: #0c0c0c;
  --black-2: #111111;
  --black-3: #171717;
  --panel: #101010;
  --line: rgba(245, 244, 240, 0.14);
  --line-soft: rgba(245, 244, 240, 0.08);
  --red: #e10600;
  --red-hi: #ff2b1f;
  --red-dim: rgba(225, 6, 0, 0.16);
  --white: #f5f4f0;
  --muted: #9a9a92;
  --muted-2: #6f6f69;

  --font-display: 'Bebas Neue', 'Oswald', 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: var(--red); color: #fff; }

:is(h1, h2, h3, h4) { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; line-height: 0.95; }

/* ---------- Layout ---------- */
.container { max-width: 1640px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); }

#range { margin-top: 5rem; }

.section--tight { padding-block: 0; }
.section--contact { padding-bottom: clamp(48px, 6vh, 88px); }

.section + .section { margin-top: 5rem; }
.section + .hero, .hero + .section, .page-hero + .section { margin-top: 5rem; }
.page-hero + .section--hero-gap { margin-top: 1.5rem; }
.page-hero + .section.story { margin-top: 2rem; }
/* home page only: the story section sits closer to the hero */
#story { margin-top: 2rem; }

.media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.85)),
    repeating-linear-gradient(-60deg, transparent 0 18px, rgba(245, 244, 240, 0.045) 18px 19px),
    linear-gradient(160deg, #141414, #050505);
}
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 55%, rgba(8, 8, 8, 0.55)),
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 8), rgba(245, 244, 240, 0.03) calc(100% / 8) calc(100% / 8 + 1px));
  pointer-events: none;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.media:hover img { transform: scale(1.03); }
.media__slot {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  pointer-events: none;
}
.media__slot.is-visible { display: flex; }
.media__slot::before {
  content: 'PHOTO SLOT';
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--red);
}
.media__slot::after {
  content: attr(data-ref);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* grid overlay helper for flat panels */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6), rgba(245, 244, 240, 0.035) calc(100% / 6) calc(100% / 6 + 1px));
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 30px 13px;
  border: 1px solid transparent;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: '';
  position: absolute;
  right: 14px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hi); }
.btn--ghost { border-color: rgba(245, 244, 240, 0.4); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }
.btn--solid { background: var(--white); color: var(--black); }
.btn--solid:hover { background: var(--red); color: #fff; }
.btn--arrow::before { content: '\2192'; font-family: var(--font-mono); font-size: 14px; order: 2; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 26px;
}
.eyebrow::before { content: ''; width: 46px; height: 1px; background: var(--red); }
.eyebrow .eyebrow__index { color: var(--muted-2); }

.title {
  font-size: clamp(3rem, 7.5vw, 6.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 28px;
  max-width: 18ch;
}
.title em { font-style: normal; color: var(--red); }
.title--hero { font-size: clamp(3.6rem, 9vw, 9rem); margin-bottom: 0; max-width: none; }

.lede {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
  max-width: 60ch;
}
.lede strong { color: var(--white); font-weight: 700; }
.lede--muted { color: var(--muted-2); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 96px); align-items: center; }
#story .split { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
.story .split { grid-template-columns: 1.3fr 0.9fr; }
#story .split > div { padding-left: 0.5rem; }
/* the <br> already decides where this heading breaks — don't let the 18ch cap squash it */
#story .split .title { max-width: none; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-line { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.reveal-line.is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), height 0.35s var(--ease);
}
.site-header.is-scrolled {
  background: var(--black);
  border-bottom: 2px solid var(--red);
}
.header__inner { display: flex; align-items: center; gap: 34px; height: var(--header-h); }
.site-header .header__inner { max-width: none; margin: 0; }

.brand { display: inline-flex; align-items: center; gap: clamp(10px, 2vw, 18px); min-width: 0; }
.brand__logo { height: 56px; width: auto; max-width: 34vw; object-fit: contain; }
.brand__toptiger { height: 40px; width: auto; max-width: 18vw; object-fit: contain; }
.brand__split { width: 1px; height: 26px; background: var(--line-soft); flex: none; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav__list a {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__list a:hover, .nav__list a.is-active { color: var(--white); }
.nav__list a:hover::after, .nav__list a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__list a.is-active::before { content: '\2022'; color: var(--red); margin-right: 6px; }

.header__cta { padding: 12px 22px 10px; font-size: 15px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 12px;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--white); transition: transform 0.3s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--black);
  border-top: 1px solid var(--line-soft);
  transform: translateY(-110%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
  display: block;
}
.mobile-menu.is-open { transform: none; border-top: 2px solid var(--red); }
.mobile-menu__inner { padding: 40px clamp(20px, 5vw, 40px) 60px; display: flex; flex-direction: column; gap: 10px; }
.mobile-menu ul { display: grid; }
.mobile-menu ul a {
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mobile-menu ul a::after { content: '\2197'; font-size: 18px; color: var(--red); }
.mobile-menu ul a:hover { color: var(--red); }
.mobile-menu .btn { margin-top: 30px; align-self: flex-start; }

/* ============================================================
   NAV DROPDOWNS — About Us / Products
   Shared by four surfaces: the header nav, the mobile menu, the
   footer and the "Continue Reading" modal.

   The parent is a <button>, not an <a>, so the .nav__list a
   underline (.nav__list a::after) and the active dot
   (.nav__list a.is-active::before) never reach it — they are
   re-declared on .nav-drop__toggle below. The panel's own links
   DO sit inside .nav__list, so they opt back out explicitly.
   ============================================================ */
.nav-drop { position: relative; }

.nav-drop__toggle {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 6px 0;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav-drop__toggle::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s var(--ease);
}
.nav-drop__toggle:hover,
.nav-drop.is-open > .nav-drop__toggle { color: var(--white); }
.nav-drop.is-open > .nav-drop__toggle::after { transform: rotate(-135deg) translateY(-2px); }
.nav-drop__toggle.is-active { color: var(--white); }
.nav-drop__toggle.is-active::before { content: '\2022'; color: var(--red); }
.nav-drop__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* Floating panel — hidden until hover, keyboard focus, or .is-open. */
.nav-drop__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 210px;
  padding: 8px 0;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-drop:hover > .nav-drop__menu,
.nav-drop:focus-within > .nav-drop__menu,
.nav-drop.is-open > .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop__menu a {
  display: block;
  padding: 9px 18px;
  color: var(--muted);
  font-family: var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.nav-drop__menu a:hover { color: var(--red); padding-left: 22px; }
.nav-drop__menu a.is-active { color: var(--white); }

/* Panel links sit inside .nav__list in the header, so clear the rules
   that would otherwise draw the hover underline and active dot on them. */
.nav__list .nav-drop__menu a { font-size: 15px; letter-spacing: 0.14em; }
.nav__list .nav-drop__menu a::before { content: none; }
.nav__list .nav-drop__menu a::after { display: none; }
.nav__list .nav-drop__menu a:hover { color: var(--red); }

/* ---- footer: panel sits in the flow, not floating ---- */
.footer__links .nav-drop__toggle {
  font-size: 18px;
  letter-spacing: 0.08em;
  padding: 0;
  margin-bottom: 12px;
}
.footer__links .nav-drop__toggle::after { margin-top: 0; }
.footer__links .nav-drop__menu {
  position: static;
  min-width: 0;
  padding: 0 0 0 14px;
  margin-bottom: 12px;
  background: none;
  border: 0;
  border-left: 1px solid var(--line-soft);
  box-shadow: none;
  display: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.footer__links .nav-drop.is-open > .nav-drop__menu { display: block; }
.footer__links .nav-drop__menu a {
  padding: 0;
  margin-bottom: 12px;
  font-size: 16px;
  letter-spacing: 0.06em;
  white-space: normal;
}
.footer__links .nav-drop__menu a:hover { padding-left: 6px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}
/* desktop: bias the centred hero content upward (lifts it by half this value) */
@media (min-width: 861px) {
  .hero { padding-bottom: clamp(40px, 9vh, 100px); }
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.story-media__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
  object-fit: cover;
}
.story-media__video + .story-media__video,
.story-media__video:not([src]) { display: none; }
.media__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.55) 45%, rgba(8,8,8,0.96) 100%);
}
.hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 8), rgba(245,244,240,0.05) calc(100% / 8) calc(100% / 8 + 1px)),
    repeating-linear-gradient(0deg, transparent 0 calc(100% / 10), rgba(245,244,240,0.035) calc(100% / 10) calc(100% / 10 + 1px));
}
    .hero__inner { padding-block: 120px 0; align-self: center; width: 100%; max-width: 1640px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); }
.hero__title { margin-bottom: 26px; }
.hero__title span { display: block; }
.hero__title span + span { color: var(--red); }
.hero__sub { max-width: 46ch; color: var(--white); font-size: 19px; line-height: 1.7; margin-bottom: 40px; }
.hero__sub span { color: rgba(245, 244, 240, 0.8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 0; }

/* hero tagline row — text left, logos right, spread across the screen */
  .hero__divider {
    width: 1px;
    min-height: clamp(8rem, 22vw, 24rem);
    background: var(--red);
    margin-left: auto;
    margin-right: clamp(24px, 4vw, 64px);
  }
  .hero__red-line {
    height: 2px;
    background: var(--red);
    margin: 24px 0;
    width: 100%;
  }


.hero__tagline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  width: 100%;
  margin-left: 0;
}
.hero__tagline-row .hero__title { margin-bottom: 0; min-width: 0; }

  .hero__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
  .hero__right {
    display: grid;
    gap: clamp(14px, 2vw, 24px);
  }
  .hero__right img {
    display: block;
    width: 100%;
    height: auto;
  }
  .hero__image-wide {
    position: relative;
    width: 100%;
    aspect-ratio: 28 / 9;
    overflow: hidden;
    background: var(--black);
  }
  .hero__logo-btn {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.6s var(--ease);
  }
  .hero__logo-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(8px, 1.6vw, 20px);
  }
  .hero__logo-btn--tt img {
    position: relative;
    top: 36px;
  }
  .hero__logo-btn--bmc img {
    width: 98%;
    height: 98%;
    max-width: none;
    padding: 0;
    object-fit: contain;
    position: relative;
    top: -10px;
    transform: none;
  }
  .hero__logo-btn.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--red);
  }
  .hero.is-bmc .hero__logo-btn--tt,
  .hero.is-tt .hero__logo-btn--bmc {
    opacity: 0;
    pointer-events: none;
  }
  .hero__slides {
    position: relative;
    width: 100%;
    height: clamp(200px, 38vh, 420px);
    overflow: hidden;
    background: transparent;
  }
  .hero__slides .hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s var(--ease);
  }
  .hero__slides .hero__slide.is-visible { opacity: 1; }
  .hero__slides .hero__slide.is-broken { display: none; }


.hero__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  flex-shrink: 0;
  right: calc(-1 * clamp(40px, 8vw, 120px));
}
.hero__carousel {
  position: relative;
  flex-shrink: 0;
  height: clamp(11rem, 26vw, 26rem);
  width: clamp(11rem, 26vw, 26rem);
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: filter, opacity;
}
.hero__slide--a {
  animation: slide-a 9s ease-in-out infinite;
}
.hero__slide--b {
  opacity: 0;
  animation: slide-b 9s ease-in-out infinite;
}
.hero__slide--c {
  opacity: 0;
  animation: slide-c 9s ease-in-out infinite;
}
.hero__carousel:nth-child(2) .hero__slide {
  animation-delay: -4.5s;
}

@keyframes slide-a {
  0%, 33%   { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
  43%       { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
  90%       { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
  100%      { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
}
@keyframes slide-b {
  0%, 33%   { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
  43%       { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
  66%       { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
  77%       { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
  100%      { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
}
@keyframes slide-c {
  0%, 66%   { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
  77%       { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
  90%       { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
  100%      { opacity: 0; filter: contrast(20) brightness(1.5) blur(12px); }
}

/* hero logo rotation is driven by JS state (.is-bmc / .is-tt) */

.hero__spec {
  margin: 64px clamp(-20px, -4vw, -48px) 0;
  padding-inline: clamp(20px, 4vw, 48px);
  border-top: 1px solid var(--line-soft);
  background: rgba(8, 8, 8, 0.66);
  backdrop-filter: blur(2px);
}
.hero__spec ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero__spec li {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 20px 22px;
  border-left: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__spec li:first-child { border-left: 0; }
.hero__spec li::before { content: '\2022'; font-size: 12px; color: var(--red); }

/* hero entrance animations */
.hero .reveal-hero { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hero.is-loaded .reveal-hero { opacity: 1; transform: none; }
.hero.is-loaded .reveal-hero--2 { transition-delay: 0.12s; }
.hero.is-loaded .reveal-hero--3 { transition-delay: 0.24s; }
.hero.is-loaded .reveal-hero--4 { transition-delay: 0.36s; }
.hero.is-loaded .reveal-hero--5 { transition-delay: 0.5s; }

/* ============================================================
   STORY — 01
   ============================================================ */
.story-media { height: 100%; min-height: 460px; }

.story-points { margin-top: 34px; border-top: 1px solid var(--line-soft); }
.story-points li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 17px;
}
.story-points li::before {
  content: '\2022';
  color: var(--red);
  font-size: 18px;
}
.story-points strong { color: var(--white); font-weight: 600; }

/* ============================================================
   STORY — 01 / VIDEO LIST + HOVER PREVIEW
   ============================================================ */
/* The wrapper is the grid cell. Because the list inside it is absolutely
   positioned it drops out of the grid's height calculation, so the row is
   sized purely by the text column — the list then fills exactly that height
   and scrolls within it. */
.video-list-wrap {
  --vl-w: 620px;
  position: relative;
  min-height: 0;
  padding-left: 0;
}
.video-list {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--vl-w);
  border-top: 1px solid var(--line-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the native bar is hidden — the rail on the left is hand-drawn instead */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.video-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.video-list:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }

/* left-hand scroll rail — a fine red line, draggable.
   Sits in the container gutter so it never covers a row. */
.video-list-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -34px;
  width: 26px;
  cursor: grab;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.video-list-wrap.is-scrollable .video-list-track { opacity: 1; pointer-events: auto; }
.video-list-track.is-dragging { cursor: grabbing; }
.video-list-track::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 2px;
  background: var(--line-soft);
}
.video-list-thumb {
  position: absolute;
  left: 16px;
  width: 2px;
  min-height: 24px;
  background: var(--red);
  box-shadow: 0 0 8px var(--red-dim);
  transition: width .2s var(--ease), background-color .2s var(--ease);
}
.video-list-wrap:hover .video-list-thumb,
.video-list-track.is-dragging .video-list-thumb { width: 3px; background: var(--red-hi); }

/* edge fades — only while there is actually something to scroll */
.video-list-wrap.is-scrollable .video-list {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.video-list-wrap.is-scrollable.at-top .video-list {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.video-list-wrap.is-scrollable.at-bottom .video-list {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 100%);
}
.video-list__item { border-bottom: 1px solid var(--line-soft); }
.video-list__link {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: 10px 0;
  text-decoration: none;
  transition: padding-left .4s var(--ease);
}
.video-list__thumb {
  flex: 0 0 auto;
  display: block;
  width: clamp(190px, 24vw, 260px);
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(245, 244, 240, .02);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.video-list__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: clamp(108px, 13vw, 146px);
  padding: 6px 18px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 240, .02);
  color: var(--white);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.video-list__link:hover,
.video-list__link:focus-visible { padding-left: 8px; outline: none; }
.video-list__link:hover .video-list__thumb,
.video-list__link:focus-visible .video-list__thumb {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(179, 0, 0, .25);
}
.video-list__link:hover .video-list__title,
.video-list__link:focus-visible .video-list__title {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-dim);
}

/* floating hover preview — one shared card, rebuilt on demand */
.video-preview {
  position: absolute;
  top: 0;
  left: calc(var(--vl-w) + clamp(10px, 1.5vw, 26px));
  z-index: 6;
  width: clamp(210px, 25vw, 330px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 34px var(--red-dim);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  pointer-events: none;
}
.video-preview.is-live { opacity: 1; visibility: visible; transform: none; }
.video-preview img,
.video-preview iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video-preview iframe { z-index: 1; }
/* keeps the preview card inside the section on short/tall viewports */
.video-preview.is-edge { box-shadow: 0 18px 44px rgba(0, 0, 0, .62); }

/* ============================================================
   LOAD ENGINEERING — 02
   ============================================================ */
.load-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 60px; }
.load-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-left: clamp(20px, 4vw, 48px);
  border-left: 3px solid var(--red);
}
.load-stat__metric {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.load-stat__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  padding: 10px 14px;
}
.load-stat__value {
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 13rem);
  line-height: 0.8;
  color: var(--white);
}
.load-stat__value span { color: var(--red); }
.load-stat__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
  max-width: 14ch;
  line-height: 1.7;
}

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 54px; }
.cat {
  border: 1px solid var(--line-soft);
  background: var(--panel);
  padding: 34px 12px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.cat::before {
  content: 'LOAD CLASS';
  position: absolute;
  top: 8px; left: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--muted-2);
}
.cat:hover { border-color: var(--red); transform: translateY(-4px); }
.cat b {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--white);
  font-weight: 400;
}
.cat b span { font-family: var(--font-body); font-size: 0.7em; font-weight: 600; }
.cat:hover b { color: var(--red); }

.load-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.load-cell { background: var(--panel); padding: 26px 22px; min-height: 140px; }
.load-cell .load-cell__i {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.load-cell .load-cell__i::before { content: ''; width: 26px; height: 1px; background: var(--red); }
.load-cell h3 { font-size: 22px; letter-spacing: 0.05em; margin-bottom: 8px; color: var(--white); }
.load-cell p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   G-FORCE — 03
   ============================================================ */
.gforce { background:
  radial-gradient(1200px 500px at 80% 0%, var(--red-dim), transparent 60%),
  var(--black-1);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
}
.gforce__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 60px; }
.gforce__scale-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--muted-2); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.gforce__scale-caption::before { content: ''; width: 34px; height: 1px; background: var(--muted-2); }

.g-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 42px); }
.g-stat { border-top: 1px solid var(--line-soft); padding-top: 22px; }
.g-stat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.g-stat__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}
.g-stat__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
.g-stat__value .g-range { color: var(--muted); }
.g-stat__value .g-unit { color: var(--red); font-size: 0.72em; margin-top: 8px; }
.g-scale { height: 10px; background: rgba(245, 244, 240, 0.07); position: relative; overflow: hidden; }
.g-scale__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--red-dim), var(--red)); transition: width 1.6s var(--ease); }
.g-scale__fill.is-anim, .g-scale__fill.is-in { width: var(--w); }
.gforce__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted-2); margin-top: 8px; }

/* ============================================================
   RANGE — 04
   ============================================================ */
.range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.range-card {
  position: relative;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
  overflow: hidden;
}
.range-card:hover { border-color: var(--red); transform: translateY(-6px); }
.range-card .media { height: 280px; }
.range-card:hover .media img { transform: scale(1.05); }
.range-card__body { padding: 30px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.range-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
  white-space: nowrap;
}
.range-card h3 { font-size: clamp(1.55rem, 2.2vw, 2.1rem); letter-spacing: 0.02em; margin-bottom: 16px; line-height: 0.95; min-height: 1.9em; }
.range-card p { color: var(--muted); font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
.range-card ul { color: var(--muted); font-size: 14px; line-height: 2.1; margin-bottom: 22px; }
.range-card ul span { color: var(--red); font-family: var(--font-mono); font-size: 11px; margin-right: 6px; }
.price { margin-top: auto; margin-bottom: 24px; }
.range-card .price__value { font-family: var(--font-display); font-size: clamp(1.85rem, 2.8vw, 3.4rem); color: var(--white); line-height: 1; white-space: nowrap; }
.range-card .price__value span { color: var(--red); }
.range-card .price__value--tbc { color: var(--muted); letter-spacing: 0.04em; }
.range-card .price__meta { font-family: var(--font-mono); font-size: clamp(0.33rem, 0.5vw, 0.5rem); letter-spacing: 0.06em; color: var(--muted-2); text-transform: uppercase; margin-top: 8px; line-height: 1.6; min-height: 1.6em; white-space: nowrap; }
.range-footnote { margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--muted-2); text-transform: uppercase; }

/* ============================================================
   EQUATION — 05b
   ============================================================ */
.equation + .materials, .zero + .materials { padding-block: clamp(56px, 7vh, 96px); }
.equation__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; min-width: 0; }
/* Single-column variant: the copy spans the full container. */
.equation__grid--single { grid-template-columns: 1fr; }
.equation__grid--single .lede { max-width: none; text-align: center; }
.equation__grid > * { min-width: 0; }
.equation__copy .lede + .lede { margin-top: 20px; }
.equation__panel { border: 1px solid var(--line-soft); background: var(--panel); }
.eq-term { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 22px; }
.eq-term__txt { min-width: 0; }
.eq-term__txt b { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: 0.05em; color: var(--white); text-transform: uppercase; font-weight: 400; line-height: 1.05; }
.eq-term__txt span { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted-2); text-transform: uppercase; }
.eq-term, .eq-op { border-bottom: 1px solid var(--line-soft); }
.eq-op { display: flex; align-items: center; gap: 14px; padding: 8px 22px; font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--red); }
.eq-op::before, .eq-op::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.eq-result { margin: 0; padding: 20px 22px; text-align: center; font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: 0.04em; color: var(--white); text-transform: uppercase; font-weight: 400; line-height: 1.15; }
.eq-result span { color: var(--red); }

/* Two-up split: photo left, copy right */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 76px); align-items: start; min-width: 0; }
.two-up > * { min-width: 0; }
/* Single-column variant: the remaining block spans the full container. */
.two-up--single { grid-template-columns: 1fr; }
/* Feature variant: image beside the copy, vertically centred. */
.two-up--feature { align-items: center; }
.two-up__media { margin: 0; }
.two-up__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.two-up__col--center { text-align: center; }
.two-up .title { max-width: none; }
.two-up .lede { max-width: none; }
.two-up .zero__punch--center { margin-top: clamp(24px, 3vw, 40px); }

/* ============================================================
   ZERO GUESSWORK — 05c
   ============================================================ */
.zero { background: var(--black-1); border-block: 1px solid var(--line-soft); }
.equation + .zero, .two-up-section + .zero { padding-block: clamp(56px, 7vh, 96px); }
/* tighter gap between the Zero Guesswork section and the Navigation box */
.two-up-section + .zero { padding-bottom: clamp(28px, 3.5vh, 52px); }
.zero + .final-cta { margin-top: 0; padding-top: clamp(14px, 2vh, 26px); }
/* tighter gap between the Coils load section and the Navigation box */
#load + .final-cta { margin-top: 0; padding-top: clamp(22px, 3vh, 38px); }
#load + .final-cta .next-grid { margin-top: clamp(14px, 2vw, 24px); }
/* tighter gap between the Our Story prose and the Navigation box */
.story-prose + .final-cta { margin-top: 0; padding-top: clamp(22px, 3vh, 38px); }
.story-prose + .final-cta .next-grid { margin-top: clamp(14px, 2vw, 24px); }
/* two columns: copy left, slideshow beside it */
.zero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; min-width: 0; }
.zero__grid > * { min-width: 0; }

/* vertical rhythm — one multiplier drives the whole stack */
.zero__copy {
  --gap-title: clamp(38px, 4.4vw, 66px);
  --gap-para: clamp(30px, 3.4vw, 52px);
  --gap-punch: clamp(46px, 5.4vw, 82px);
  --gap-lead: clamp(1.75, 1.45 + 1.1vw, 2.15);
  --gap-body: clamp(1.8, 1.5 + 1.05vw, 2.2);
}

/* space between the last paragraph and the action button */
.zero__outro-btn { margin-top: 16px; }
/* the copy sits in a narrow column again, so the global 18ch / 60ch caps apply */
.zero__copy .title { margin-bottom: var(--gap-title); }
.zero__copy .eyebrow { margin-bottom: var(--gap-title); }
.zero__copy .lede { line-height: var(--gap-body); }
.zero__copy .lede:first-of-type { line-height: var(--gap-lead); }
.zero__copy .lede + .lede { margin-top: var(--gap-para); }
.zero__punch { margin-top: var(--gap-punch); border-left: 2px solid var(--red); background: linear-gradient(90deg, var(--red-dim), transparent 70%); padding: clamp(28px, 3vw, 40px) clamp(26px, 3vw, 38px); }
/* Centred variant: used under the Full Equation copy. */
.zero__punch--center { border-left: none; background: none; padding: 0; margin-top: clamp(34px, 4vw, 56px); text-align: center; }
.zero__quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: 0.03em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.zero__close { margin: 18px 0 0; color: var(--white); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.65; max-width: 46ch; }

/* slideshow */
/* shrink-wraps to the stage so the control bar lines up with its edges */
.zero__show { min-width: 0; justify-self: center; display: inline-grid; justify-items: stretch; }
.zero__stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  /* lighter than the shared .media backdrop: a dark photo edge was dissolving
     into the letterbox bands and reading as a hard crop. */
  background:
    linear-gradient(rgba(8, 8, 8, 0.3), rgba(8, 8, 8, 0.45)),
    repeating-linear-gradient(-60deg, transparent 0 18px, rgba(245, 244, 240, 0.075) 18px 19px),
    linear-gradient(160deg, #1f1f1f, #0c0c0c);
  isolation: isolate;
  height: clamp(560px, 85vh, 1100px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
}
.zero__slide { position: absolute; inset: 0; margin: 0; will-change: opacity, filter; }
/* drop-shadow traces the painted image, not the element box, so it outlines the
   real photo edge that object-fit: contain leaves floating in the frame. Scoped to
   .is-in so only the visible slide pays for the filter. */
.zero__slide img { width: 100%; height: 100%; object-fit: contain; }
.zero__slide.is-in img { filter: drop-shadow(0 0 1px rgba(245, 244, 240, 0.5)); }
.zero__slide {
  opacity: 0;
  filter: contrast(20) brightness(1.5) blur(12px);
  transition: opacity 1s var(--ease), filter 1s var(--ease);
  pointer-events: none;
}
.zero__slide.is-in { opacity: 1; filter: contrast(1) brightness(1) blur(0px); }
.zero__stage:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.zero__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.zero__ctrls { justify-self: center; }
.zero__cap { min-width: 0; }
.zero__cap span { display: block; }
.zero__cap-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); }
.zero__cap-v { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }
.zero__ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.zero__btn {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 244, 240, 0.22);
  background: transparent;
  color: var(--white);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.zero__btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.zero__btn svg { width: 18px; height: 18px; }
.zero__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.zero__btn--play .zero__ic-play { display: none; }
.zero__btn--play.is-paused { color: var(--red); border-color: var(--red); }
.zero__btn--play.is-paused .zero__ic-pause { display: none; }
.zero__btn--play.is-paused .zero__ic-play { display: block; }
.zero__dots { display: flex; align-items: center; gap: 6px; padding-inline: 6px; }
.zero__dot {
  width: 22px;
  height: 3px;
  background: rgba(245, 244, 240, 0.28);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.zero__dot:hover { background: rgba(245, 244, 240, 0.6); }
.zero__dot.is-on { background: var(--red); transform: scaleY(2); }
.zero__dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.zero__count {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--white);
}
.zero__count i { color: var(--red); font-style: normal; margin-inline: 4px; }
.zero__count [data-zero-total] { color: var(--muted-2); }
.zero__outro {
  margin-top: clamp(22px, 2.6vw, 36px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: center;
}
.zero__outro a {
  color: var(--white);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.zero__outro a:hover { color: var(--red); border-bottom-color: var(--red-hi); }

/* ============================================================
   MATERIALS — 05
   ============================================================ */
.materials { background: var(--black-1); border-block: 1px solid var(--line-soft); }
.story + .materials { padding-block: clamp(56px, 7vh, 96px); }
.materials__head { margin-bottom: 60px; }
.materials__layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.materials .media { height: clamp(400px, 55vh, 580px); background: none; }
.materials .media::after { display: none; }
.materials .media.materials-media { border: 2px solid var(--red); }
.attr-list { border-top: 1px solid var(--line); }
.attr { display: flex; align-items: baseline; gap: 22px; padding: 20px 0 20px 26px; border-bottom: 1px solid var(--line-soft); position: relative; }
.attr::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease); }
.attr.is-in::after { transform: scaleY(1); }
.attr__n { font-family: var(--font-mono); font-size: 12px; color: var(--red); letter-spacing: 0.2em; }
.attr__t { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.04em; color: var(--white); text-transform: uppercase; }
.attr__d { margin-left: auto; text-align: right; color: var(--muted-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }

/* callouts over coil media */
.callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.callout { position: absolute; left: var(--x); top: var(--y); }
.callout__line { position: absolute; width: calc(var(--len, 60px)); height: 1px; background: var(--red); }
.callout__line::before, .callout__line::after { content: ''; position: absolute; background: var(--red); }
.callout__line::before { width: 1px; height: 7px; left: 0; bottom: 0; }
.callout__line::after { width: 1px; height: 7px; right: 0; bottom: 0; }
.callout__label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--white);
  background: rgba(8, 8, 8, 0.82);
  border: 1px solid var(--red);
  padding: 8px 10px;
  text-transform: uppercase;
}
.callout--tl .callout__line { transform: rotate(28deg); top: -52px; left: 14px; }
.callout--tl .callout__label { left: 24px; top: -108px; }
.callout--r .callout__line { transform: rotate(-32deg); top: 6px; left: -118px; }
.callout--r .callout__label { left: -212px; top: -42px; }
.callout--bl .callout__line { transform: rotate(-24deg); top: -58px; left: 16px; }
.callout--bl .callout__label { left: 26px; top: -118px; }

/* ============================================================
   LIFT SYSTEM — 06
   ============================================================ */
.components { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.comp {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.comp:hover { border-color: var(--red); }
.comp__i { font-family: var(--font-mono); font-size: 11px; color: var(--red); letter-spacing: 0.16em; }
.comp__t { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); }
.comp-note { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.lift-copy .btn { margin-top: 34px; }

.lift-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: 60px; }
.lift-stat { background: var(--panel); padding: 30px 26px; }
.lift-stat b { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--red); display: block; line-height: 1; font-weight: 400; }
.lift-stat span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: block; margin-top: 10px; }

/* ============================================================
   BMC GEAR — HOMEPAGE SLIDER + CATALOG CARDS
   ============================================================ */
.bmc-gear { border-block: 1px solid var(--line-soft); }
.gear-head { max-width: 680px; margin-bottom: 44px; }
.gear-head .lede a { color: var(--red); }
.gear-slider {
  position: relative;
  height: clamp(280px, 46vw, 460px);
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  isolation: isolate;
}
.gear-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: filter, opacity;
}
.gear-slide img { width: 100%; height: 100%; object-fit: cover; }
.gear-slide--a { animation: slide-a 6s ease-in-out infinite; }
.gear-slide--b { opacity: 0; animation: slide-b 6s ease-in-out infinite; }
.gear-slide--c { opacity: 0; animation: slide-c 6s ease-in-out infinite; }
.gear-link { margin-top: 34px; }

.gear-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.gear-card {
  border: 1px solid var(--line-soft);
  background: var(--panel);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.gear-card:hover {
  border-top-color: var(--red);
  border-right-color: var(--red);
  border-bottom-color: var(--white);
  border-left-color: var(--white);
}
.gear-card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  align-items: start;
  cursor: pointer;
}
.gear-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-soft);
  grid-column: 1 / -1;
}
.gear-card__media img { object-fit: contain; }
.gear-pick { display: block; margin-top: 20px; }
.gear-pick__label,
.gear-lines__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.gear-pick__select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.gear-pick__select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.gear-lines {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.gear-lines__label {
  display: block;
  margin-bottom: 2px;
}
.gear-lines__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.gear-lines__row:hover { border-color: rgba(245, 244, 240, 0.28); }
.gear-lines__row:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.gear-lines__row--all { border-style: dashed; }
.gear-lines__check {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}
.gear-lines__name { flex: 1 1 auto; }
.gear-lines__name small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.gear-lines__price {
  flex: none;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.gear-lines__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.gear-lines__total-value { color: var(--white); }
.kit-coils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.kit-coils .gear-pick { margin-top: 0; }
.coil-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
}
.page-shop .kit-coils .gear-pick__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
}
.gear-card__body > .gear-pick { margin-bottom: 20px; }
.gear-card__body { background: #fff; color: var(--black-1); }
@media (max-width: 560px) { .kit-coils { grid-template-columns: 1fr; } }
.gear-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.3;
}
.gear-card__toggle {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-soft);
  flex: none;
  display: grid;
  place-items: center;
  justify-self: end;
  transition: border-color 0.3s var(--ease);
}
.gear-card__toggle::before {
  content: '\2192';
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--red);
}
.gear-card:hover .gear-card__toggle { border-color: var(--red); }

/* ============================================================
   BUILD SELECTOR + BUILD DIALOG (lift-kits)
   ============================================================ */
/* Pull the build selector up under the video block — it was sitting behind
   the default 5rem section gap and reading as dead black space. */
#builds { margin-top: 1.5rem; }
/* Dark product plates in the shop page build selector (BMC Gear tone) */
.page-shop #builds .build-card__media { background: var(--black-2); border-color: var(--line-soft); }
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.build-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.build-card:hover {
  border-top-color: var(--red);
  border-right-color: var(--red);
  border-bottom-color: var(--white);
  border-left-color: var(--white);
}
.build-card__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px; align-items: start; }
.build-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(8, 8, 8, 0.18);
  grid-column: 1 / -1;
  background: var(--white);
}
.build-card__media::after { background: none; }
.build-card__media img { object-fit: contain; }
.build-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.3;
}
.build-card__ic {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  justify-self: end;
  transition: border-color 0.3s var(--ease);
}
.build-card__ic::before { content: '\2192'; font-family: var(--font-mono); font-size: 14px; color: var(--red); }
.build-card:hover .build-card__ic { border-color: var(--red); }

.kit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 8, 8, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.kit-modal.is-open { opacity: 1; visibility: visible; }
.kit-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  border-radius: 10px;
  transform: translateY(24px);
  transition: transform 0.35s var(--ease);
}
.kit-modal.is-open .kit-modal__dialog { transform: none; }
.kit-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.kit-modal__close::before { content: '\00D7'; font-size: 22px; line-height: 1; color: var(--white); transition: color 0.3s var(--ease); }
.kit-modal__close:hover { border-color: var(--red); transform: rotate(90deg); }
.kit-modal__close:hover::before { color: var(--red); }
.kit-modal__head { padding: 26px 78px 18px 28px; border-bottom: 1px solid var(--line-soft); }
.kit-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kit-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.kit-modal__body { padding: 24px 28px 30px; display: flex; flex-direction: column; gap: 22px; }
.kit-modal__body > .kit-modal__media { order: -1; margin-bottom: 0; }
.kit-modal__body > .kit-modal__text { order: 1; }
.kit-modal__body > .kit-modal__specs { order: 2; margin-top: 0; }
.kit-modal__body > .kit-modal__foot { order: 0; margin-top: 0; width: 100%; }
.kit-modal__body > .gear-pick { order: 4; }
.kit-modal__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(8, 8, 8, 0.18);
  border-radius: 6px;
  margin-bottom: 22px;
  background: var(--white);
}
.kit-modal__media::after { background: none; }
.kit-modal__media img { object-fit: contain; cursor: zoom-in; }
.kit-modal__media:hover img { transform: none; }
.kit-modal__zoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid var(--red);
  background-color: var(--white);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(8, 8, 8, 0.5), 0 12px 32px rgba(8, 8, 8, 0.55);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.18s linear;
}
.kit-modal.is-open .kit-modal__media.is-zooming .kit-modal__zoom { opacity: 1; }
@media (hover: none), (max-width: 560px) { .kit-modal__zoom { display: none; } }
.kit-modal__text p { color: var(--muted); font-size: 15px; line-height: 1.75; }
.kit-modal__text p + p { margin-top: 14px; }
.kit-modal__text a { color: var(--white); border-bottom: 1px solid var(--red); }
/* all-caps pull lines carried over from the narration copy */
.kit-modal__text p.kit-pull {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kit-modal__text p.kit-pull + p { margin-top: 18px; }
/* component list lines: BOLD LABEL then the explanation */
.kit-modal__text p.kit-part { color: var(--muted); }
.kit-modal__text p.kit-part b { color: var(--white); font-weight: 700; letter-spacing: 0.04em; }
/* NOTE — lines carried over from the narration copy */
.kit-modal__text p.kit-note {
  border-left: 2px solid var(--red);
  background: linear-gradient(90deg, var(--red-dim), transparent 70%);
  padding: 12px 16px;
  color: var(--muted-2);
}
.kit-modal__specs { margin-top: 22px; border-top: 1px solid var(--line-soft); }
.kit-modal__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kit-modal__spec span:first-child { color: var(--muted-2); min-width: 150px; }
.kit-modal__spec span:last-child { color: var(--white); }
.kit-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.kit-modal__foot p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  text-transform: uppercase;
  max-width: 46ch;
  line-height: 1.7;
}
.kit-panel[hidden] { display: none; }
body.is-locked { overflow: hidden; }

/* shop cards open the same dialog — title doubles as the trigger */
.shop-product { cursor: pointer; }
.shop-product__link {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  transition: color 0.25s var(--ease);
}
.shop-product__link:hover { color: var(--red); }
.shop-product__link:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }

/* ============================================================
   TOPTIGER — 07
   ============================================================ */
.toptiger { background:
  linear-gradient(100deg, rgba(8,8,8,0.98) 0%, rgba(8,8,8,0.9) 55%, rgba(8,8,8,0.6) 100%),
  var(--black);
}
.toptiger__layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px, 6vw, 88px); align-items: center; }
.toptiger__layout > * { min-width: 0; }
.toptiger .media { height: clamp(420px, 62vh, 620px); }
.tig-shocks { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; min-width: 0; margin-top: 70px; }
.tig-shock { min-width: 0; border: 1px solid var(--line-soft); background: var(--panel); padding: 18px; transition: border-color 0.3s var(--ease); }
.tig-shock__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--red); text-transform: uppercase; margin-bottom: 14px; line-height: 1.5; }
.toptiger .tig-shock__media { height: clamp(180px, 30vh, 300px); aspect-ratio: auto; }
/* Show the full shock inside the unchanged media frame — the global object-fit: cover crops them. */
.toptiger .tig-shock__media img { object-fit: contain; transform: none; }
.toptiger .tig-shock__media:hover img { transform: none; }
.tig-badges { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: 30px; }
.tig-badge { background: var(--panel); padding: 22px 24px; display: flex; align-items: baseline; gap: 16px; }
.tig-badge b { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.05em; color: var(--white); text-transform: uppercase; font-weight: 400; }
.tig-badge b em { font-style: normal; color: var(--red); }
/* Bullet marker (matches .hype-list) instead of the old 30px dash rule. */
.tig-badge::before { content: '\2022'; color: var(--red); font-size: 18px; line-height: 1; align-self: center; flex: none; }
.tig-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 34px; }
.tig-stat { background: var(--panel); padding: 26px 20px; }
.tig-stat b { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); color: var(--white); display: block; line-height: 1; font-weight: 400; }
.tig-stat b span { color: var(--white); display: inline; margin-top: 0; font: inherit; letter-spacing: inherit; text-transform: none; }
.tig-stat span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: block; margin-top: 8px; }

/* ---------- Transcend the Hype (toptiger) ---------- */
.hype__layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(34px, 6vw, 88px); align-items: center; }
.hype__layout > * { min-width: 0; }
.hype-video { position: relative; width: 100%; min-width: 0; background: #000; border-radius: 6px; overflow: hidden; }
.hype-video__el { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.hype-banner {
  position: relative;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 28px);
  border-left: 4px solid var(--white);
  background: linear-gradient(110deg, var(--red), #a90905);
  color: var(--white);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.65vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 28px rgba(225, 6, 0, .18);
}
.hype-list { list-style: none; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.hype-list li {
  background: var(--panel); padding: clamp(24px, 3vw, 38px) clamp(20px, 2.4vw, 32px);
  display: flex; align-items: baseline; gap: 18px;
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  letter-spacing: 0.03em; line-height: 1.15; text-transform: uppercase; color: var(--white);
}
.hype-list li::before { content: '\2022'; color: var(--red); font-size: 18px; flex: none; }
/* Statement line nested between the two paragraphs — overrides .section__sub-title (0-2-0 to win source order). */
.hype__layout .hype__claim {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: 0.08em;
  margin-block: 28px;
}
.hype__layout .hype__red { color: var(--red); }

/* ============================================================
   SA ENGINEERING — 08
   ============================================================ */
.sa { position: relative; overflow: visible; }
.sa__bg { position: absolute; inset: 0; z-index: -2; }
.sa__bg img { width: 100%; height: 100%; object-fit: cover; }
.sa__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,0.97) 0%, rgba(8,8,8,0.8) 60%, rgba(8,8,8,0.55) 100%); }
.sa__content { max-width: 640px; }

.sa__frame {
   background: var(--black);
   border: 2px solid var(--red);
   min-height: 300px;
   margin-top: 12rem;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 .sa__frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

.sa__content { max-width: none; }
.sa__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(34px, 6vw, 88px); align-items: start; min-width: 0; }
.sa__grid > * { min-width: 0; }
.sa-facts { margin-top: 40px; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); max-width: 520px; }
.sa-fact { background: rgba(16, 16, 16, 0.92); padding: 18px 20px; display: flex; gap: 16px; align-items: baseline; }
.sa-fact::before { content: '\2022'; color: var(--red); font-size: 18px; }
.sa-fact p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.sa-fact b { color: var(--white); }
.philo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 24px;
}
.philo-grid .lede { max-width: none; }
.philo-facts { max-width: none; grid-template-columns: 1fr; margin-top: 0; }
@media (max-width: 900px) {
  .philo-grid { grid-template-columns: 1fr; gap: 28px; }
}

.slogan {
  margin-top: 30px;
  margin-bottom: 34px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--red);
  background: rgba(16, 16, 16, 0.92);
  padding: 22px 24px;
}
.slogan__pre { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.26em; color: var(--red); text-transform: uppercase; margin-bottom: 10px; }
.slogan__line { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.35; }
.slogan__line em { color: var(--red); font-style: normal; }

.sa-carousel {
  position: relative;
  height: clamp(320px, 46vw, 520px);
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  isolation: isolate;
}
.sa-slide { position: absolute; inset: 0; width: 100%; height: 100%; will-change: filter, opacity; }
.sa-slide img { width: 100%; height: 100%; object-fit: cover; }
.sa-slide--a { animation: slide-a 4s ease-in-out infinite; }
.sa-slide--b { opacity: 0; animation: slide-b 4s ease-in-out infinite; }
.sa-slide--c { opacity: 0; animation: slide-c 4s ease-in-out infinite; }
.sa-slide__cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--white);
  text-transform: uppercase;
  background: rgba(8, 8, 8, 0.72);
  border-left: 2px solid var(--red);
  padding: 10px 14px;
}

.slogan-strip { overflow: hidden; background: var(--red); border-block: 1px solid var(--line-soft); }
.slogan-strip__track { display: flex; width: max-content; animation: slogan-marquee 26s linear infinite; }
.slogan-strip__track span {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #080808;
  padding: 16px 0;
  margin-right: 56px;
  white-space: nowrap;
}
.slogan-strip__track span strong { font-weight: 400; color: var(--black); }
.slogan-strip__track span em { font-style: normal; color: #fff; }
@keyframes slogan-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Load banner (about — scrolling accessory list) ---------- */
.load-banner {
  margin-top: 34px;
  padding: 18px 20px;
  max-width: min(760px, 100%);
  background: var(--black-2);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--red);
}
.load-banner__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.load-banner__view {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.load-banner__track {
  display: flex;
  width: max-content;
  animation: load-banner-marquee 20s linear infinite;
}
.load-banner__set {
  display: flex;
  align-items: center;
  flex: none;
}
.load-banner__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.load-banner__item::before {
  content: '*';
  color: var(--red);
  font-size: 0.8em;
  line-height: 1;
}
.load-banner__item--and { color: var(--white); }
.load-banner__tag {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
@keyframes load-banner-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

@media (max-width: 560px) {
  .load-banner { padding: 16px 16px; }
  .load-banner__view { flex: 1 0 100%; -webkit-mask-image: none; mask-image: none; }
  .load-banner__tag { flex: 1 0 100%; white-space: normal; }
}

/* ============================================================
   FITMENT — 10
   ============================================================ */
.fitment { background: var(--black-1); border-block: 1px solid var(--line-soft); }
.fitment__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(30px, 5vw, 70px); align-items: start; margin-top: 2rem; margin-bottom: 2rem; }
.fitment > .container > .fitment__grid .lede { margin-bottom: 30px; }
.fit-panel { border: 1px solid var(--line-soft); background: var(--panel); padding: 30px 28px; }
.fit-panel__t { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.26em; color: var(--red); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.fit-panel__t::before { content: '!'; width: 22px; height: 22px; border: 1px solid var(--red); display: grid; place-items: center; font-size: 12px; }
.fit-panel p { color: var(--muted); font-size: 15px; line-height: 1.7; }

/* "YOU ARE UNIQUE" — red bold claim sitting between the two paragraphs.
   Kept in sync with .title em so it reads as part of the same voice. */
.fitment__claim {
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 22px;
}
/* The disclaimer sits directly above the button row, which already has its
   own 34px top margin — drop the generic .lede bottom margin so the gap
   doesn't double up. */
.fitment > .container > .fitment__grid .lede--muted { margin-bottom: 0; }

/* <button class="btn"> needs these — .btn only styles the <a> case. */
button.btn { appearance: none; cursor: pointer; }
button.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Fixed lock for the continue-reading menu. Plain overflow:hidden on body
   lets iOS Safari jump to the top, which would break "return to where you
   were". main.js offsets this by the saved scroll position. */
body.is-locked-fixed { position: fixed; width: 100%; overflow: hidden; }
.fit-panel p + p { margin-top: 12px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { position: relative; overflow: hidden; text-align: center;   padding-block: clamp(30px, 6vh, 80px); background: var(--black); }
.final-cta__bg { position: absolute; inset: 0; z-index: -2; }
.final-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.final-cta__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0.94), rgba(8,8,8,0.78) 50%, rgba(8,8,8,0.95)); }
.final-cta .title { max-width: 20ch; margin-inline: auto; }
.final-cta .lede { margin: 0 auto 40px; max-width: 48ch; color: var(--white); }
.final-cta .lede span { color: var(--muted); }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Navigation-only closing band: the generic section gap plus the CTA band's
   own top padding doubled up above the continue-reading box. */
.section.final-cta--nav { margin-top: 0; padding-block: clamp(28px, 3.4vw, 52px) clamp(34px, 5vh, 64px); }
.section.final-cta--nav .next-grid { margin-top: clamp(16px, 1.6vw, 24px); }
/* Shop Now ends on a product grid whose section already carries bottom padding,
   so the band above the box only needs a sliver of its own. */
.section.final-cta--nav-tight { padding-top: clamp(12px, 1.2vw, 18px); }
.section.final-cta--nav-tight .next-grid { margin-top: 0; }

/* ---------- Next-step boxes ----------
   Three boxes, one shared template (kicker -> title -> text -> action) so they
   cannot drift apart. Built only from existing tokens; no bespoke icons. */
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(34px, 4vw, 56px);
  text-align: left;
}
/* Two-box variant (no continue-reading column). Declared after .next-grid so the
   single-column mobile rule further down the file still wins. */
.next-grid--two { grid-template-columns: repeat(2, 1fr); }
.next-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--black-2), var(--black-1));
}
.next-box__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
}
.next-box__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--white);
  font-weight: 700;
}
.next-box__txt { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 42ch; }
.next-box__txt strong { color: var(--white); font-weight: 600; }
.next-box__list { width: 100%; }
.next-box__list li { border-top: 1px solid var(--line-soft); }
.next-box__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.next-box__list a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 2px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.next-box__list a::before { content: '\2192'; color: var(--red); flex: none; }
.next-box__list a:hover { color: var(--red); padding-left: 8px; }
.next-box__list a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.next-box__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  width: 100%;
}
.next-box__row .btn {
  width: 100%;
  justify-content: center;
  margin-top: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 20px 13px;
  color: var(--white);
  border-color: var(--line);
  background: transparent;
}
.next-box__row .btn:hover,
.next-box__row .btn:focus-visible {
  color: var(--red);
  border-color: var(--red);
  background: transparent;
}
.next-box__done { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.next-box .btn { margin-top: auto; }

/* ============================================================
    FOOTER
    ============================================================ */
.site-footer { background: var(--black-1); border-top: 2px solid var(--red); padding-top: 70px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px, 5vw, 80px); padding-bottom: 50px; }
.footer__brand img { height: 52px; margin-bottom: 16px; }
.footer__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--red);
  text-transform: uppercase;
}
.footer__h { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.26em; color: var(--muted-2); text-transform: uppercase; margin-bottom: 22px; }
.footer__links li { margin-bottom: 12px; }
.footer__links a { color: var(--muted); font-family: var(--font-display); font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); }
.footer__links a:hover { color: var(--red); padding-left: 8px; }
.footer__contact li { color: var(--muted); font-size: 15px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
.footer__contact li::before { content: '\2022'; color: var(--red); font-size: 18px; flex: none; }
.footer__contact a { color: var(--white); font-weight: 600; }
.footer__contact a:hover { color: var(--red); }
.footer__contact small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted-2); text-transform: uppercase; }
.footer__bottom { border-top: 1px solid var(--line-soft); padding-block: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-2); text-transform: uppercase; }
.footer__legal { display: flex; gap: 24px; }
.footer__legal a { color: var(--muted-2); transition: color 0.25s var(--ease); }
.footer__legal a:hover { color: var(--red); }
.footer__legal i { font-style: normal; color: var(--line); }

/* ---------- Logo ---------- */
.logo-reveal-container {
  position: relative;
  display: inline-block;
}

.logo-reveal-img {
  filter: brightness(1) drop-shadow(0 0 20px var(--red-dim));
}


/* ---------- Shop ---------- */
.page-hero.shop-hero { min-height: 24vh; }
.page-hero.shop-hero .page-hero__inner { padding-bottom: 20px; }
.page-hero.shop-hero + .section { margin-top: 1.5rem; }
.page-hero.shop-hero + .section.admin { margin-top: 0; }
.admin-page { min-height: 100vh; }.admin-shell { width: 100%; max-width: 1300px; margin: 0 auto; padding: clamp(12px, 1.5vw, 24px) 0 clamp(48px, 6vh, 80px); }.admin-card { max-width: 480px; margin: 0 auto; }.admin-message { min-height: 24px; margin-top: 16px; color: var(--red); font-size: 13px; }.admin-bar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 12px; }.admin-bar .section__sub-title { margin: 0; }.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }.admin-products { border-top: 1px solid var(--line-soft); }.admin-product { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }.admin-product b, .admin-product small { display: block; }.admin-product small { color: var(--muted); font-size: 12px; }.admin-product button { color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-left: 12px; }.admin-product button:hover { color: var(--red); }.checkout-form input[type="file"] { color: var(--muted); font-size: 13px; cursor: pointer; }.checkout-form input[type="file"]::file-selector-button { background: var(--black-2); color: var(--white); border: 1px solid var(--line); padding: 9px 14px; margin-right: 12px; font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }.checkout-form input[type="file"]::file-selector-button:hover { border-color: var(--red); color: var(--red); }.admin-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }.admin-upload img { width: 84px; height: 56px; object-fit: cover; display: block; border: 1px solid var(--line); background: var(--black); }.admin-upload button { color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.admin-upload button:hover { color: var(--red); }.admin-progress { position: relative; height: 8px; margin-top: 10px; background: var(--black); border: 1px solid var(--line); overflow: hidden; }.admin-progress > span { position: absolute; inset: 0; width: 0; background: var(--red); box-shadow: 0 0 12px rgba(225, 6, 0, .7); transition: width .18s ease; }.admin-progress > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%); }.admin-progress.is-active > span { animation: admin-progress-glow 1s ease-in-out infinite alternate; }@keyframes admin-progress-glow { from { filter: brightness(1); } to { filter: brightness(1.4); } }.admin-preview { display: grid; gap: 14px; }.admin-preview__media { position: relative; display: grid; place-items: center; min-height: clamp(180px, 22vw, 260px); background: var(--black); border: 1px solid var(--line); overflow: hidden; }.admin-preview__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }.admin-preview__fallback { font: 700 11px var(--font-mono); letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }.admin-preview__name { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--white); margin: 0; }.admin-preview__meta { font: 700 11px var(--font-mono); letter-spacing: .14em; color: var(--red); text-transform: uppercase; margin: 0; }.admin-preview__desc { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }.admin-table-panel { margin-top: 26px; }.admin-table { width: 100%; border-collapse: collapse; font: 14px var(--font-body); }.admin-table th { text-align: left; font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }.admin-table tbody tr:hover { background: var(--black-2); }.admin-table__status { font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }.admin-table__status.is-on { color: var(--red); }.admin-table__status.is-off { color: var(--muted); }.admin-table__status.is-oos { color: var(--muted); text-decoration: line-through; }.admin-table__status.is-soon { color: var(--white); }.admin-table button { color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-left: 12px; }.admin-table button:hover { color: var(--red); }
.shop { padding-bottom: clamp(48px, 6vh, 80px); }
.shop__intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 42px; }
.shop__intro .section__sub-title { margin-bottom: 0; }
.shop-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 22px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--line-soft); background: var(--black-2); }
.shop-controls label { display: grid; gap: 6px; font: 700 10px var(--font-mono); color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.shop-controls input, .shop-controls select { min-height: 40px; border: 1px solid var(--line); background: var(--black); color: var(--white); padding: 0 11px; font: 13px var(--font-body); }.shop-controls select, .field select, .checkout-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e10600' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; cursor: pointer; }.shop-controls select { padding-right: 36px; }.field select { padding-right: 38px; }.checkout-form select { padding-right: 34px; }select option { background: var(--black); color: var(--white); }select:focus { outline: none; border-color: var(--red); }
.shop-search { flex: 1 1 220px; }.shop-search input { width: 100%; }
.shop-filters { display: flex; flex-wrap: wrap; gap: 7px; }.shop-filters button { border: 1px solid var(--line); padding: 10px 12px; color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.shop-filters button:hover, .shop-filters button.is-selected { border-color: var(--red); color: var(--white); background: var(--red-dim); }
.product-count { margin-bottom: 12px; color: var(--muted-2); font: 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }.no-products { grid-column: 1 / -1; padding: 34px 0; color: var(--muted); }
.cart-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.cart-link span { background: var(--red); display: inline-grid; place-items: center; min-width: 25px; height: 25px; margin-left: 8px; color: #fff; }
.shop__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .43fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.shop__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.shop-product { border: 1px solid var(--line-soft); background: var(--panel); display: flex; flex-direction: column; height: 100%; }
.shop-product__media { background: var(--black); position: relative; }
.shop-product__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font: 700 10px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 10px 5px;
}
.shop-product__badge.is-oos { color: var(--white); background: var(--red); }
.shop-product__badge.is-soon { color: var(--red); background: var(--white); border: 1px solid var(--red); }
.shop-product .btn[disabled] { opacity: .5; cursor: not-allowed; }
.shop-product__media::after { display: none; }
.shop-product__media:hover img { transform: none; }
.shop-product__media img { width: 100%; height: auto; object-fit: contain; display: block; }
.shop-product__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }.shop-product__body > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }.shop-product h3 { font-size: 28px; letter-spacing: .04em; }.shop-product__sku { display: block; font: 700 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-top: 6px; }
.shop-product p, .checkout-note { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 10px 0 20px; }
.shop-product__body > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shop-product strong, .cart-total strong { font: 32px var(--font-display); letter-spacing: .04em; }.shop-product .btn { padding: 11px 14px; font-size: 11px; }
.shop-cart { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); background: var(--black-2); padding: 28px; }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.cart-clear { background: none; border: 0; padding: 0; color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }.cart-clear:hover { color: var(--red); }.cart-items { border-top: 1px solid var(--line-soft); }.cart-empty { color: var(--muted); padding: 20px 0; font-size: 14px; }
.cart-item { display: flex; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }.cart-item b { display: block; font-size: 13px; }.cart-item small { color: var(--muted); }.cart-item .cart-sku { display: block; color: var(--red); font: 700 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }.cart-item button { border: 1px solid var(--line); width: 25px; height: 25px; }.cart-item span { padding-inline: 8px; }
.cart-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }.cart-line b { color: var(--white); font-weight: 700; }.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 700 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.checkout-form label { display: block; font: 11px var(--font-mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-top: 14px; }.checkout-form input:not([type="checkbox"]):not([type="radio"]), .checkout-form select, .checkout-form textarea { display: block; width: 100%; margin-top: 6px; padding: 11px; background: var(--black); border: 1px solid var(--line); color: var(--white); font: 14px var(--font-body); }
.checkout-form .check { display: flex; gap: 9px; align-items: start; font: 11px var(--font-body); letter-spacing: 0; text-transform: none; line-height: 1.5; }.check a, .policy a { color: var(--red); }.checkout-btn { width: 100%; margin-top: 20px; }.checkout-note { margin-bottom: 0; }.policy { max-width: 780px; }
.checkout-details { margin-top: 24px; padding: 28px; border: 1px solid var(--line); background: var(--black-2); }
.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.checkout-fields label small { color: var(--muted-2); font: 10px var(--font-body); letter-spacing: 0; text-transform: none; }
.checkout-address, .checkout-fulfilment, .checkout-payment { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.checkout-payment[hidden], .checkout-submit[hidden] { display: none; }
.checkout-address legend, .checkout-fulfilment legend, .checkout-payment legend { width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); color: var(--white); font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.checkout-payment__option { display: flex !important; align-items: flex-start; gap: 10px; margin-top: 14px !important; padding: 14px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background-color .2s; }
.checkout-payment__option:has(input:checked) { border-color: var(--red); background: rgba(225, 6, 0, .08); }
.checkout-payment__option input[type="radio"] { display: block; flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--red); cursor: pointer; }
.checkout-payment__option span { display: grid; gap: 5px; }
.checkout-payment__option b { color: var(--white); font: 700 12px var(--font-mono); letter-spacing: .08em; }
.checkout-payment__option small { color: var(--muted); font: 13px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
#fitmentPartnerField[hidden] { display: none; }
#fitmentPartnerField { margin-top: 8px; }
#cartDeliveryRow[hidden] { display: none; }
.checkout-details .checkout-note { min-height: 1.5em; margin: 12px 0 0; }

/* ============================================================
   PAGE HERO (interior pages + product pages)
   ============================================================ */
.page-hero { position: relative; min-height: 54vh; display: flex; align-items: flex-end; padding-top: var(--header-h); background: var(--black); overflow: hidden; }
.page-hero.contact-hero { align-items: flex-start; min-height: auto; }
.page-hero.contact-hero .page-hero__inner { padding-bottom: 0; }
.page-hero.contact-hero .title { margin-bottom: 0; }
.page-hero.contact-hero + .section { margin-top: 1.5rem; }
.page-hero.about-hero { min-height: 32vh; }
.page-hero--kits { min-height: 30vh; }
.page-hero--kits .page-hero__inner { padding-bottom: 20px; }
.page-hero--compact { min-height: 34vh; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img, .page-hero__bg video { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg video { position: absolute; inset: 0; pointer-events: none; }
.page-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.5) 55%, rgba(8,8,8,0.98) 100%); }
.page-hero__inner { padding-block: 20px 54px; width: 100%; }
.page-hero .title { margin-bottom: 12px; white-space: nowrap; }
.page-hero__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.page-hero__meta span { color: var(--red); }

.breadcrumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--muted-2); text-transform: uppercase; margin-bottom: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs i { font-style: normal; color: var(--red); }

/* ============================================================
   PRODUCT PAGES
   ============================================================ */
.prod__top { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.prod__top .lede a { color: var(--red); }
.prod__top .lede a:hover { text-decoration: underline; }
.prod__top .lede em { font-style: normal; color: var(--red); }
.kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: stretch; }
.kit { min-width: 0; display: flex; flex-direction: column; }
.kit .tig-badges { flex: none; height: clamp(230px, 24vh, 270px); grid-template-rows: repeat(3, 1fr); }
.kit .tig-badge { align-items: center; }
.kit .prod__media { position: static; }
.kit .media { position: relative; height: clamp(260px, 40vh, 400px); margin-bottom: 30px; }
/* Fit the whole kit inside the frame instead of cropping it (frames are wider than these images). */
.kit__media img { object-fit: contain; transform: none; }
.kit__media:hover img { transform: none; }
.kit__media { margin-bottom: 30px; }
.kit .section__sub-title { margin-top: 0; }

/* Read-more hover: blur the shot and reveal a label. Revealed on focus too, for keyboard users. */
.kit__trigger { display: block; width: 100%; cursor: pointer; }
.kit__media img { transition: transform 1.4s var(--ease), filter 0.45s var(--ease); }
.kit__trigger:hover .kit__media img,
.kit__trigger:focus-visible .kit__media img { filter: blur(7px); }
.media__more {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
  pointer-events: none;
}
.media__more::before {
  content: 'Read more';
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--white);
  background: rgba(8, 8, 8, 0.72); border: 1px solid var(--line);
  padding: 13px 24px;
}
.kit__trigger:hover .media__more,
.kit__trigger:focus-visible .media__more { opacity: 1; visibility: visible; }
.kit__trigger:focus-visible { outline: none; }
.kit__trigger:focus-visible .media__more::before { border-color: var(--red); color: var(--red); }
.prod__media { position: sticky; top: calc(var(--header-h) + 24px); }
.prod__media .media { height: clamp(420px, 56vh, 560px); }
.prod__media--ph { align-self: stretch; }
.prod__media--ph .media { height: 100%; }
.prod__media--ph img { display: none; }
.prod__media--ph .media__slot { display: flex; }
.media--plain { background: none; }
.media--plain::after { display: none; }
.media--plain::before { display: none; }

/* ---------- Overlanding kits: square hero video + hover sound toggle ---------- */
.prod__media--video {
  aspect-ratio: 1 / 1;
  align-self: start;
  background: #000;
}
.prod-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.prod-video__sound {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(245, 244, 240, 0.22);
  background: rgba(8, 8, 8, 0.72);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.prod__media--video:hover .prod-video__sound,
.prod__media--video:focus-within .prod-video__sound,
.hype-video:hover .prod-video__sound,
.hype-video:focus-within .prod-video__sound {
  opacity: 1;
  visibility: visible;
}
.prod-video__sound:hover { background: var(--red); border-color: var(--red); color: #fff; }
.prod-video__sound:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.prod-video__ic { width: 20px; height: 20px; }
.prod-video__ic--on { display: none; }
.prod-video__ic--off { display: block; }
.prod-video__sound[aria-pressed="true"] { color: var(--red); border-color: var(--red); }
.prod-video__sound[aria-pressed="true"] .prod-video__ic--on { display: block; }
.prod-video__sound[aria-pressed="true"] .prod-video__ic--off { display: none; }

/* ---------- Our Company: "The Rig Part 2" beside the story copy ----------
   The eyebrow and heading span the full container so the 80px type gets the
   room it needs to sit on one line. Underneath, the copy takes a capped
   reading measure and the clip claims everything left over. The source is
   1440x1080 (4:3), so the frame keeps 4:3 and the clip is never cropped; the
   container's own 1640px ceiling is what stops the frame running away. */
.story__row {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(320px, 1fr);
  gap: 0 clamp(32px, 4vw, 64px);
  align-items: center;
}
.story__copy { min-width: 0; }
.story__media {
  width: 100%;
  min-width: 0;
}
.story__video {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  cursor: pointer;
}
.story__video .prod-video__el { object-fit: contain; }
.story__video:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* the clip failed to load — the poster stays, but nothing is clickable */
.story__video.is-video-error { cursor: default; }

.prod-price { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 8px; }
.prod-price__value { font-family: var(--font-display); font-size: clamp(3.4rem, 6vw, 5rem); color: var(--white); line-height: 1; }
.prod-price__value span { color: var(--red); }
.prod-price__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em; color: var(--muted-2); text-transform: uppercase; }
.prod-excl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--red); text-transform: uppercase; margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.prod-excl::before { content: '*'; font-size: 14px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table th, .spec-table td { text-align: left; padding: 15px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec-table th { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--muted-2); text-transform: uppercase; width: 34%; }
.spec-table td { color: var(--white); line-height: 1.6; }
.spec-table td span { color: var(--muted); }
.box-table th { width: auto; }
.box-table th:first-child { width: 18%; }
.box-table th:last-child, .box-table td:last-child { text-align: right; }
.box-table td:last-child { font-family: var(--font-mono); color: var(--muted); }

.panel {
  border: 1px solid var(--line-soft);
  background: var(--panel);
  padding: clamp(24px, 4vw, 36px);
  margin-top: 34px;
}
.panel__t { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.panel__t em { font-style: normal; color: var(--red); }
.panel p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.panel ul { color: var(--muted); font-size: 15px; line-height: 2; }
.panel ul li { display: flex; gap: 12px; align-items: baseline; }
.panel ul li::before { content: '\2022'; color: var(--red); }

.purchase-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }

.section__sub-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: 0.03em; color: var(--white); margin-bottom: 40px; }
.section__sub-title span { color: var(--red); }

.prod-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 30px; }
.prod-cats .cat { padding: 22px 8px 18px; }
.prod-cats .cat b { font-size: clamp(1.9rem, 3vw, 2.6rem); }

/* ============================================================
   CONTACT / ABOUT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: stretch; }
.contact-grid > div { display: flex; flex-direction: column; }
.contact-card { border: 1px solid var(--line-soft); background: var(--panel); padding: 26px 24px; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.contact-card__i { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--red); border: 1px solid var(--red); padding: 6px 8px; }
.contact-card b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); font-weight: 400; }
.contact-card span { color: var(--muted); font-size: 14.5px; }
.contact-card a b:hover { color: var(--red); }
.contact-wa { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--white); transition: transform 0.25s var(--ease); flex-shrink: 0; }
.contact-wa:hover { transform: translateY(-2px); }
.contact-wa svg { width: 22px; height: 22px; pointer-events: none; }

.form { display: grid; gap: 18px; border: 1px solid var(--line-soft); background: var(--panel); padding: clamp(24px, 4vw, 36px); }
.contact-grid .form { flex: 1; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.field label span { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line-soft);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 14px;
  transition: border-color 0.25s var(--ease);
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field textarea { resize: vertical; min-height: 130px; }
.form__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase; }

/* ============================================================
   OUR STORY
   ------------------------------------------------------------
   our-story.html is text-led, so the founder cards mirror the .panel
   surface (same border + background + padding scale) instead of a
   photo slot with no image to fill. Kept as its own class so a photo
   can be dropped in later without disturbing the text column.
   ============================================================ */
/* Founder cards and the photo pair beneath them share ONE grid declaration.
   Same columns, same gap, same container — so each photo is exactly as wide
   as a founder card by construction rather than by duplicated magic numbers
   that could drift apart the first time either value is tweaked. */
.founders,
.founder-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
/* The shorter founder card would otherwise stop at its own last line, leaving
   the two cards ending at different heights. stretch fills both to the row
   height so they match, with the spare space falling to the bottom of the
   shorter one. Scoped to .founders so the photo pair below keeps start. */
.founders { align-items: stretch; }
.founder { border: 1px solid var(--line-soft); background: var(--panel); padding: clamp(24px, 3vw, 38px); }
.founder__name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.founder__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.founder p { color: var(--muted); font-size: 16.5px; line-height: 1.75; }
.founder p + p { margin-top: 14px; }
.founder strong { color: var(--white); font-weight: 600; }

/* Same hairline-row treatment as .story-points, renamed for this page
   so the two lists can be styled independently later. */
.timeline { margin-top: 34px; border-top: 1px solid var(--line-soft); }
.timeline li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 17px;
}
.timeline li::before { content: '\2022'; color: var(--red); font-size: 18px; }
.timeline strong { color: var(--white); font-weight: 600; }

/* Mirrors .zero__punch from the Our Company page — same red-rule
   pull-quote treatment, scoped so --gap-punch stays optional. */
.story-quote {
  margin-top: clamp(34px, 4vw, 56px);
  border-left: 2px solid var(--red);
  background: linear-gradient(90deg, var(--red-dim), transparent 70%);
  padding: clamp(28px, 3vw, 40px) clamp(26px, 3vw, 38px);
}
/* The "Our aim" box is this same component and carries a label above the
   line. Same values the old .slogan__pre used, so the label keeps the exact
   look it had before that box became a story-quote. */
.story-quote__pre {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.story-quote__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red);
}
/* The whole line is red, so an emphasised word has to break out of it or it
   reads as red-on-red and the emphasis disappears. The pull-quote carries no
   <em>, so this only ever applies to the "Our aim" line. */
.story-quote__q em { color: var(--white); font-style: normal; }
.story-quote__by {
  margin: 18px 0 0;
  color: var(--white);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.65;
  max-width: 46ch;
}

/* Photos on this page: the landscape sits in the hero beneath the heading,
   the two 2:3 portraits sit as a pair directly beneath the founder cards,
   sharing the .founders grid so each one matches a founder card's width. */

/* Hero photo sits below the full-width heading, spanning the whole container
   so it reads as a band under the heading rather than beside it. The heading
   deliberately keeps the plain .title sizing every other page uses — that
   only works because it is not sharing a row with an image. The 4/3 box
   matches the 4000x3000 source: .media img is object-fit: cover, so at full
   width a wider ratio crops the top and bottom off the frame. */
.hero-photo {
  width: 100%;
  margin-top: clamp(24px, 3.4vw, 44px);
  aspect-ratio: 4 / 3;
}

.founder-photos { margin-top: clamp(38px, 4.5vw, 64px); }
.founder-photos .media { aspect-ratio: 2 / 3; }

/* The story up to the photo pair is carded and headed; the remainder used to
   break into five more headed sections with a bullet list, pull-quotes and
   split columns. It now reads as one centred column of prose. The 66ch cap
   keeps a centred rag at a comfortable line length on wide screens, and the
   final short paragraph is lifted to white so it lands as the closing beat. */
.story-prose__body { max-width: min(100%, 980px); margin-inline: auto; text-align: center; }
.story-prose__body p {
  color: var(--muted);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.8;
  text-wrap: pretty;
}
.story-prose__body p + p { margin-top: clamp(18px, 2vw, 28px); }
.story-prose__body strong { color: var(--white); font-weight: 600; }
.story-prose__body p:last-child { color: var(--white); }

/* Every content section on this page shares ONE heading: same size, same
   left alignment, same single-line fit. This replaces the per-heading inline
   font-size overrides that used to make each heading a slightly different
   size (6.6rem / 5.5rem / 5rem / 6rem) purely so it would fit on one line.
   The cap is measured, not guessed: the longest heading — "Different
   backgrounds. One shared obsession." — is 15.92em in Bebas Neue, so anything
   above ~6.06rem would clip, and 5.6vw keeps it inside the container across
   the 861-1640px band where padding is still fluid. .final-cta is excluded so
   the site-wide closing CTA keeps its centred component styling.
   Desktop only: below 861px the .title mobile rule owns sizing and wraps. */
@media (min-width: 861px) {
  .page-story .section:not(.final-cta) .title {
    font-size: clamp(1rem, 5.6vw, 5.9rem);
    max-width: none;
    white-space: nowrap;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* The nav carries ten items now ("Fitment Partners" and "Our Story" are
   long), and .nav is a non-wrapping flex row. Step the sizing down through
   the 861–1440px band so nothing collides before the 1080px rule below
   takes over. Placed first so the narrower queries still win. */
@media (max-width: 1440px) {
  .nav__list { gap: clamp(10px, 1.2vw, 18px); }
  .nav__list a { font-size: 15px; letter-spacing: 0.11em; }
}

@media (max-width: 1080px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__right { width: 100%; max-width: 640px; margin: 0 auto; }
  .hero__tagline-wrap { text-align: center; }
  .hero__tagline-row {
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 4vw, 40px);
  }
  .hero__logos {
    right: 0;
    gap: clamp(12px, 2vw, 20px);
  }
  .hero__carousel {
    height: clamp(8rem, 32vw, 20rem);
    width: clamp(8rem, 32vw, 20rem);
  }
  .nav__list { gap: 11px; }
  .nav__list a { font-size: 14px; letter-spacing: 0.08em; }
  .header__cta { font-size: 13px; padding: 11px 16px 9px; }
  .range-grid { grid-template-columns: 1fr 1fr; }
  .split, .materials__layout, .toptiger__layout, .hype__layout, .prod__top, .kit-grid, .fitment__grid, .contact-grid, .sa__grid, .story .split, .equation__grid, .founders, .founder-photos, .next-grid, .two-up { grid-template-columns: 1fr; }
  .video-preview { left: auto; right: 0; }
  /* single column: no sibling height to match, so scroll with the page instead.
     The wrapper keeps position:relative — it anchors the preview card. */
  .video-list {
    position: relative;
    max-width: var(--vl-w);
    overflow-y: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .video-list-track { display: none; }
  .gear-catalog { grid-template-columns: 1fr 1fr; }
  .build-grid { grid-template-columns: 1fr 1fr; }
  .prod__media { position: static; }
  .hero__spec ul { grid-template-columns: repeat(2, 1fr); }
  .hero__spec li { border-top: 1px solid var(--line-soft); }
  .hero__spec li:nth-child(3) { border-left: 0; }
}

@media (max-width: 860px) {
  .nav, .header__cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  header .header__inner { gap: 16px; }
  .brand__logo { height: 38px; }
  .brand__toptiger { height: 25px; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .cat { padding: 28px 8px 20px; }
  .hero__inner { padding-top: 150px; }
  .load-grid { grid-template-columns: repeat(2, 1fr); }
  .g-list { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .shop__layout { grid-template-columns: 1fr; }
  .shop-cart { position: static; }
  /* the copy and the clip no longer fit side by side */
  .story__row { grid-template-columns: 1fr; }
  .story__media { width: 100%; max-width: 520px; margin: 34px auto 0; }
}

@media (max-width: 560px) {
  .shop__products { grid-template-columns: 1fr; }
  .shop__intro { align-items: start; flex-direction: column; }
  .shop-controls { align-items: stretch; }.shop-controls label { width: 100%; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .load-grid { grid-template-columns: 1fr; }
  .range-grid { grid-template-columns: 1fr; }
  .components { grid-template-columns: 1fr; }
  .gear-catalog { grid-template-columns: 1fr; }
  .build-grid { grid-template-columns: 1fr; }
  .gear-slider { height: clamp(220px, 60vw, 320px); }
  .zero__stage { height: clamp(400px, 60vh, 640px); }
  .zero__bar { grid-template-columns: 1fr; justify-items: stretch; }
  .zero__ctrls { justify-self: stretch; justify-content: space-between; }
  .zero__dots { flex: 1; justify-content: center; }
  .zero__count { justify-self: start; }
  .lift-stat-row, .tig-stats { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .hero__spec ul { grid-template-columns: 1fr; }
  .hero__spec li { border-left: 0; }
  .callout { display: none; }

  /* ---- mobile type ---- */
  .title { font-size: clamp(2.5rem, 8.5vw, 3.2rem); white-space: normal !important; }
  .title--hero { font-size: clamp(2.85rem, 11vw, 3.5rem); }
  .eyebrow { font-size: 12px; letter-spacing: 0.18em; }
  .eyebrow::before { flex: none; }
  .load-stat__value { font-size: clamp(4.4rem, 16vw, 6rem); }
  /* ---- nav dropdowns collapse to a tap-to-expand accordion ---- */
  .mobile-menu .nav-drop__toggle {
    font-size: 40px;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 10px 0;
    width: 100%;
    justify-content: space-between;
  }
  .mobile-menu .nav-drop__toggle.is-active { color: var(--white); }
  .mobile-menu .nav-drop__toggle::after { margin-top: 0; }
  .mobile-menu .nav-drop__menu {
    position: static;
    min-width: 0;
    padding: 0 0 6px 16px;
    margin: 0;
    background: none;
    border: 0;
    border-left: 2px solid var(--red-dim);
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mobile-menu .nav-drop.is-open > .nav-drop__menu { display: grid; }
  .mobile-menu .nav-drop__menu a {
    font-size: 26px;
    letter-spacing: 0.04em;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .mobile-menu .nav-drop__menu a:hover { padding-left: 0; }

  .mobile-menu ul a { font-size: 40px; }
  .spec-table td { font-size: 13px; }
  .spec-table th { font-size: 10px; }
  .eq-term { padding: 16px; }
  .eq-op { padding: 7px 16px; }
  .eq-result { padding: 16px; }

  /* ---- avoid cut-off ---- */
  .footer__legal { flex-wrap: wrap; gap: 10px 22px; }
  .attr { flex-wrap: wrap; row-gap: 4px; }
  .attr__d { flex: none; width: 100%; margin-left: 0; text-align: left; padding-left: 4.2rem; }
  .btn { padding: 13px 24px 12px; }
  /* The final-CTA label is a full sentence — let it wrap on narrow screens
     instead of forcing a nowrap button wider than the viewport. */
  .final-cta .cta-actions .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.45; }
  .purchase-strip { flex-direction: column; align-items: stretch; }
  .purchase-strip .btn { width: 100%; }
  .sa__frame { margin-top: 0; }
  .story-media { min-height: 320px; }

  /* ---- forms / touch ---- */
  .field input, .field select, .field textarea,
  .shop-controls input, .shop-controls select,
  .checkout-form input:not([type="checkbox"]), .checkout-form select, .checkout-form textarea { font-size: 16px; }
  .checkout-form .check { font-size: 13px; line-height: 1.6; }
  .shop-filters button { padding: 12px 14px; }
  .cart-item button { width: 30px; height: 30px; }
}

@media (max-width: 400px) {
  .mobile-menu ul a, .mobile-menu .nav-drop__toggle { font-size: 36px; }
  .title--hero { font-size: clamp(2.6rem, 12vw, 3.1rem); }
  .eyebrow { font-size: 11px; letter-spacing: 0.16em; }
}

/* ============================================================
   FLOATING ACTIONS — WHATSAPP + BACK TO TOP
   ============================================================ */
.fab-stack {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fab {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--panel);
  color: var(--white);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.fab svg { width: 26px; height: 26px; display: block; }
.fab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* matches .contact-wa on the contact page */
.fab--wa {
  border: 0;
  background: var(--red);
  color: var(--white);
}
.fab--wa:hover { background: var(--red-hi); transform: translateY(-2px); }
.fab--wa svg { width: 26px; height: 26px; pointer-events: none; }

/* Go Back — hidden entirely when there is nowhere to go (see main.js) */
.fab--back { display: none; }
.fab--back.is-ready { display: grid; }
.fab--back:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.fab--back svg { width: 24px; height: 24px; pointer-events: none; }

.to-top {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--panel);
  color: var(--red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, border-color 0.3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--red); transform: translateY(-2px); }
.to-top__ic {
  width: 26px;
  height: 26px;
  display: block;
  transform-origin: 50% 88%;
}
.to-top.is-pressed .to-top__ic { animation: spring-press 0.55s var(--ease); }
@keyframes spring-press {
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(0.5); }
  55%  { transform: scaleY(1.16); }
  75%  { transform: scaleY(0.9); }
  100% { transform: scaleY(1); }
}

@media (max-width: 560px) {
  .fab, .to-top { width: 46px; height: 46px; }
  .fab svg, .to-top__ic { width: 22px; height: 22px; }
}

.kit-modal__price {
  flex-basis: 100%;
  color: var(--white);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* product modal layout order: picture > dropdowns > price/buttons/note > text > specs */
.kit-modal__body > .kit-modal__media { order: -2; margin-bottom: 0; }
.kit-modal__body > .kit-modal__text { order: 1; }
.kit-modal__body > .kit-modal__specs { order: 2; margin-top: 0; }
.kit-modal__body > .toptiger-fitment-note { order: 3; margin-top: 0; }
.kit-modal__body > .kit-coils { order: -1; margin-top: 0; }
.kit-modal__body > .coil-note { order: -1; margin-bottom: -8px; }
.kit-modal__body > .gear-pick { order: -1; }
.kit-modal__body > .gear-lines { order: -1; margin-top: 0; }
.kit-modal__body > .kit-modal__foot { order: 0; margin-top: 0; width: 100%; }

.kit-modal__foot > p { flex: 1 1 100%; width: 100%; max-width: 100%; margin-top: 14px; }

.kit-modal__foot > p { flex:1 1 100% !important; width:100% !important; max-width:100% !important; display:block; margin-top:14px; }

.kit-modal__price small { font-size: 0.55em; font-weight: 500; margin-left: 6px; opacity: 0.85; letter-spacing: 0.06em; text-transform: uppercase; }
.kit-modal__price { font-family: var(--font-display); font-size: clamp(1.4rem, 1.8vw, 1.8rem); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); line-height: 1.1; }
.kit-modal__price small { font-family: inherit; font-size: 0.5em; font-weight: 400; margin-left: 8px; opacity: 0.85; letter-spacing: 0.08em; }

.kit-modal__price { font-size: clamp(1.8rem, 2.4vw, 2.6rem) !important; }

.kit-modal__price small { font-size: 0.4em !important; }

.product-price { display: block; margin-top: 4px; color: var(--white); font-family: var(--font-display); font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.product-price small { font-family: inherit; font-size: 0.5em; font-weight: 400; margin-left: 6px; opacity: 0.8; letter-spacing: 0.08em; }

.product-price { grid-column: 1 / -1; }

.gear-catalog .build-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; }
.gear-catalog .build-card__media { background: var(--white); border-color: rgba(8, 8, 8, 0.18); }

.page-shop #builds .build-card__media { background: linear-gradient(rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.85)), repeating-linear-gradient(-60deg, transparent 0 18px, rgba(245, 244, 240, 0.045) 18px 19px), linear-gradient(160deg, #141414, #050505); border-color: var(--line-soft); }

.gear-catalog .build-card__media { background: linear-gradient(rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.85)), repeating-linear-gradient(-60deg, transparent 0 18px, rgba(245, 244, 240, 0.045) 18px 19px), linear-gradient(160deg, #141414, #050505); border-color: var(--line-soft); }

.kit-modal__media--slideshow { position: relative; overflow: hidden; background: var(--white); }
.kit-modal__media--slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: castorSlideshow 8s ease-in-out infinite; }
.kit-modal__media--slideshow img:first-child { animation-delay: 0s; }
.kit-modal__media--slideshow img:nth-child(2) { animation-delay: 4s; }
@keyframes castorSlideshow { 0% { opacity: 0; } 8% { opacity: 1; } 42% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }

.kit-modal__media--slideshow img { pointer-events: none; }
.kit-modal__media.is-zooming img { animation-play-state: paused; }

.gear-card__media--slideshow { position: relative; overflow: hidden; }
.gear-card__media--slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gear-card__media--slideshow img:first-child { position: relative; }
.gear-card__media--slideshow img:not(:first-child) { display: none; }

.kit-modal__media--slideshow img:first-child { opacity: 1; animation: castorFirst 8s ease-in-out infinite; }
.kit-modal__media--slideshow img:nth-child(2) { opacity: 0; animation: castorSecond 8s ease-in-out infinite; animation-delay: 0s; }
@keyframes castorFirst {
  0% { opacity: 1; }
  48% { opacity: 1; }
  52% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes castorSecond {
  0% { opacity: 0; }
  48% { opacity: 0; }
  52% { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-modal__media--slideshow img { animation: none !important; }
  .kit-modal__media--slideshow img:first-child { opacity: 1 !important; }
  .kit-modal__media--slideshow img:nth-child(2) { opacity: 0 !important; }
}
.gear-card__media--slideshow { position: relative; overflow: hidden; }
.gear-card__media--slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.gear-card__media--slideshow img:first-child { opacity: 1; animation: castorFirst 8s ease-in-out infinite; }
.gear-card__media--slideshow img:nth-child(2) { opacity: 0; animation: castorSecond 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gear-card__media--slideshow img:first-child { opacity: 1 !important; } .gear-card__media--slideshow img:nth-child(2) { opacity: 0 !important; } }

.gear-card__media--slideshow img:not(:first-child) { display: block !important; }

/* ============================================================
   PARTNER CTA — become a fitment partner
   Full-bleed photo band with a copy column and an application
   panel. Collapses to a single column at 1080px.
   ============================================================ */
.partner-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(46px, 6vw, 84px);
  background: var(--black-1);
  border-block: 1px solid var(--line-soft);
}
.partner-cta__bg { position: absolute; inset: 0; z-index: 0; }
.partner-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0.45; }
.partner-cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.86) 50%, rgba(8, 8, 8, 0.92) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.9), rgba(8, 8, 8, 0.7));
}
.partner-cta > .container { position: relative; z-index: 1; }

.partner-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.partner-cta .title { max-width: 20ch; }

.partner-cta__points { display: grid; gap: 14px; margin-top: 30px; max-width: 52ch; }
.partner-cta__points li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.partner-cta__points li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: var(--red);
}
.partner-cta__points b { color: var(--white); font-weight: 600; }
.partner-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.partner-cta__panel {
  position: relative;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid var(--line-soft);
  padding: clamp(22px, 3vw, 34px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.partner-cta__panel::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: var(--red);
}
.partner-cta__panel-t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 22px;
}
.partner-cta__panel-t::before { content: ''; width: 22px; height: 1px; background: var(--red); }

/* Photo header inset into the application panel. */
.partner-cta__shot {
  margin: calc(-1 * clamp(22px, 3vw, 34px)) calc(-1 * clamp(22px, 3vw, 34px)) 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.partner-cta__shot img { width: 100%; height: clamp(150px, 15vw, 190px); object-fit: cover; object-position: 50% 42%; }

.partner-form { display: grid; gap: 16px; }
.partner-form .btn { justify-self: start; margin-top: 4px; }

/* Live Chat is the last navigation item and carries the brand red. */
.nav__list .nav__chat,
.mobile-menu .nav__chat,
.footer__links .nav__chat { color: var(--red); }
.nav__list .nav__chat:hover,
.mobile-menu .nav__chat:hover,
.footer__links .nav__chat:hover { color: var(--red-hi); }

@media (max-width: 1080px) {
  .partner-cta__grid { grid-template-columns: 1fr; }
  .partner-cta .title { max-width: none; }
}

@media (max-width: 560px) {
  .partner-cta__actions .btn,
  .partner-form .btn { width: 100%; }
  .partner-form .btn { justify-self: stretch; }
}

/* ============================================================
   FITMENT PARTNERS — directory + map
   Two columns: scrollable partner list (left) and a sticky
   Leaflet map (right). Collapses to a single column at 1080px
   with the map following the list.
   ============================================================ */
.partners__intro { max-width: 78ch; }
.partners__intro .lede { margin-bottom: 0; }

.partners__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
}

.partners__region {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.partners__region::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.partners__group + .partners__group { margin-top: clamp(26px, 3vw, 38px); }

.pcard {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 24px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pcard::before {
  content: '';
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.pcard + .pcard { margin-top: 14px; }
.pcard:hover, .pcard.is-active { background: var(--black-2); border-color: rgba(225, 6, 0, 0.45); }
.pcard:hover::before, .pcard.is-active::before { transform: scaleY(1); }
.pcard:focus-within { border-color: rgba(225, 6, 0, 0.45); }

.pcard__body { flex: 1 1 240px; min-width: 0; }
.pcard__name {
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.pcard__addr { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.pcard__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.pcard__contact span { color: var(--red); }
.pcard__contact a { color: var(--white); transition: color 0.25s var(--ease); }
.pcard__contact a:hover { color: var(--red); }

.pcard__map {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 9px;
  border: 1px solid rgba(245, 244, 240, 0.28);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pcard__map::before { content: '\2197'; font-family: var(--font-mono); font-size: 13px; line-height: 1; }
.pcard__map:hover { background: var(--red); border-color: var(--red); color: #fff; }
.pcard__map:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.partners__mapcol { position: sticky; top: calc(var(--header-h) + 24px); }
.partners__map {
  height: clamp(420px, 68vh, 640px);
  background: var(--black-2);
  border: 1px solid var(--line-soft);
}
.partners__hint {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---- Leaflet skin ---- */
.leaflet-container { background: #0a0a0a; font-family: var(--font-body); }
/* Knock the Esri canvas tiles back so the map reads as part of the dark UI.
   Applied to the tile pane only, so pins and popups keep their true colour. */
.partners__map .leaflet-tile-pane { filter: brightness(0.62) saturate(0.7) contrast(1.08); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: var(--black-2); color: var(--white); border-radius: 0; }
.leaflet-popup-content-wrapper { border: 1px solid rgba(225, 6, 0, 0.4); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); }
.leaflet-popup-content { margin: 14px 16px; font-size: 13px; line-height: 1.5; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--red); }
.pmap-pop__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.pmap-pop__addr { color: var(--muted); margin-bottom: 10px; }
.leaflet-container a.pmap-pop__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.leaflet-container a.pmap-pop__link:hover { color: var(--red-hi); }

.pmap-marker { background: none; border: 0; }
.pmap-pin {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 5px rgba(225, 6, 0, 0.22), 0 0 14px rgba(225, 6, 0, 0.65);
}

.leaflet-bar a,
.leaflet-bar a:hover { background: var(--black-2); color: var(--white); border-bottom-color: var(--line-soft); }
.leaflet-bar a:hover { background: var(--black-3); color: var(--red); }
.leaflet-control-attribution {
  background: rgba(8, 8, 8, 0.72) !important;
  color: var(--muted-2) !important;
  font-size: 10px;
}
.leaflet-control-attribution a { color: var(--muted) !important; }

@media (max-width: 1080px) {
  .partners__grid { grid-template-columns: 1fr; }
  .partners__mapcol { position: static; }
  .partners__map { height: clamp(340px, 55vh, 460px); }
}

@media (max-width: 560px) {
  .pcard { padding: 20px; }
  .partners__map { height: 340px; }
  .pcard__map { width: 100%; justify-content: center; }
}

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.cart-page__main { border: 1px solid var(--line-soft); background: var(--panel); }
.cart-page__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.cart-page__head .panel__t { margin: 0; }
.cart-page__count { margin-left: auto; font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cart-page__main .cart-items { border-top: 0; padding: 0 24px; }
.cart-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.cart-row:hover { background: rgba(245, 244, 240, 0.02); }
.cart-row__media { display: block; aspect-ratio: 1; background: var(--white); border: 1px solid var(--line-soft); overflow: hidden; }
.cart-row__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-row__media img.is-missing { display: none; }
.cart-row__name { display: block; text-align: left; font-family: var(--font-display); font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: .04em; text-transform: uppercase; color: var(--white); }
.cart-row__name:hover { color: var(--red); }
.cart-row__options { margin-top: 8px; display: grid; gap: 3px; }
.cart-row__options li { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cart-row__options span { color: var(--muted-2); }
.cart-row__options b { color: var(--white); font-weight: 700; }
.cart-row__unit { margin-top: 10px; font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.cart-row__unit small { color: var(--muted-2); font-weight: 400; letter-spacing: .08em; }
.cart-row__actions { display: grid; justify-items: end; gap: 8px; text-align: right; }
.cart-row__line { font: 700 16px var(--font-display); letter-spacing: .04em; color: var(--white); }
.cart-row__remove { font: 700 9px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); background: none; border: 0; padding: 0; cursor: pointer; }
.cart-row__remove:hover { color: var(--red); }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.cart-qty button { width: 28px; height: 28px; border: 0; background: none; color: var(--white); font-size: 15px; line-height: 1; }
.cart-qty button:hover { color: var(--red); }
.cart-qty span { min-width: 26px; text-align: center; font: 700 12px var(--font-mono); color: var(--white); }
.cart-qty--lg button { width: 36px; height: 36px; font-size: 17px; }
.cart-qty--lg span { min-width: 34px; font-size: 14px; }
.cart-page__foot { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 24px; }
.cart-page__foot[hidden] { display: none; }
.cart-empty-state { padding: 34px 0 26px; }
.cart-empty-state .cart-empty { padding: 0; }
.cart-empty-state p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.cart-empty-state .btn { margin-top: 18px; }
.cart-summary { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); background: var(--black-2); padding: 28px; }
.cart-detail__line { flex-basis: 100%; font: 700 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cart-detail__line b { display: block; margin-top: 6px; font: 400 clamp(1.4rem, 2vw, 1.8rem) var(--font-display); letter-spacing: .04em; color: var(--white); }
.kit-panel--cart .kit-modal__body > .kit-modal__specs { order: 1; }
.kit-panel--cart .kit-modal__body > .kit-modal__foot { order: 2; }
.cart-error { flex-basis: 100%; width: 100%; max-width: 100% !important; color: #ff6b5f !important; font: 700 10px var(--font-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; }
.cart-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 4px; background: var(--red); color: #fff; font: 700 10px var(--font-mono); letter-spacing: 0; vertical-align: middle; }
.cart-badge[hidden] { display: none; }
.btn.is-added { background: var(--white); color: var(--black); }

@media (max-width: 900px) {
  .cart-page__layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-row { grid-template-columns: 76px minmax(0, 1fr); }
  .cart-row__actions { grid-column: 1 / -1; grid-auto-flow: column; align-items: center; justify-content: space-between; justify-items: start; }
}
@media (max-width: 560px) {
  .cart-page__head, .cart-page__main .cart-items, .cart-page__foot { padding-left: 18px; padding-right: 18px; }
  .cart-page__count { margin-left: 0; }
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-details { padding: 20px 18px; }
}