/* ── Foundations ──────────────────────────────────────────────────────── */
.home { --nav-h: 72px; --ease-spring: var(--ease-pop-spring); }
.home section[id], .home .anchor-offset { scroll-margin-top: calc(var(--nav-h) + 8px); }
[x-cloak] { display: none !important; }
:where(.home) :where(h1, h2, h3, h4) { font-family: var(--font-headline); } /* zero specificity: component classes win */
.home img { max-width: 100%; }

/* ── 1. Hero spin — pinned; the ring turns as you scroll ─────────────── */
.spin { position: relative; height: calc(100svh + 4 * 46vh); }
.spin-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden;
  background: radial-gradient(75% 55% at 50% 70%, #1b222a 0%, #10141a 55%, #0a0b0d 100%); }
.spin-ghost { position: absolute; left: 0; top: 52%; width: 100%; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.spin-ghost-track { display: inline-block; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(7rem, 32vw, 20rem); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08); will-change: transform; }
.spin-copy { position: relative; z-index: 5; display: grid; padding-top: clamp(22px, 4.5vh, 56px); }
.spin-state { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translate3d(0, 18px, 0); pointer-events: none;
  /* sequential crossfade: the outgoing state clears in 0.15s before the next one starts, so two specs never overlap */
  transition: opacity 0.15s ease, transform 0.2s ease; }
.spin-state.is-on { opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.45s var(--ease-out-spring) 0.16s, transform 0.7s var(--ease-out-spring) 0.16s; }
.spin-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 13vw, 6.4rem); line-height: 0.88; letter-spacing: 0; color: #fff; margin: 12px 0 16px; }
.spin-title > span { display: block; }
.spin-title .hl { color: #22c55e; }
.nb { white-space: nowrap; }
.spin-lead { font-size: 15px; line-height: 1.55; color: var(--stage-muted); max-width: 36ch; }
.spin-stats { font-size: 11px; letter-spacing: 0.16em; color: var(--stage-dim); margin: 14px 0 20px; }
.spin-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.spin-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(4.2rem, 21vw, 8.8rem); line-height: 0.86; color: #fff; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
.spin-sub { font-size: 14px; line-height: 1.55; color: var(--stage-muted); max-width: 34ch; }

.spin-stage { position: absolute; inset: 0; z-index: 2; perspective: 1400px; perspective-origin: 50% 40%; }
.spin-halo { position: absolute; left: 50%; bottom: 40px; width: min(120vw, 940px); aspect-ratio: 1; transform: translate(-50%, 34%); background: radial-gradient(closest-side, rgba(34, 197, 94, 0.24), rgba(34, 197, 94, 0.06) 56%, transparent 78%); pointer-events: none; }
.spin-floor { position: absolute; left: 50%; bottom: 66px; width: min(104vw, 940px); height: 72px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 60%, transparent 100%); border-radius: 50%; pointer-events: none; }
.orb-item { position: absolute; left: 0; right: 0; bottom: 80px; height: 44%; margin: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.orb-item.is-front { opacity: 1; }
.orb-item picture { display: flex; align-items: flex-end; justify-content: center; height: 100%; width: 100%; }
.orb-img { display: block; width: auto; height: auto; max-height: 100%; max-width: min(100vw, 860px); object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 22px rgba(34, 197, 94, 0.14)); }

.spin-hud { --wa-clear: 72px; --p: 0; position: absolute; left: 0; right: 0; bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 16px; }
.spin-deg { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: #fff; min-width: 3.3ch; text-transform: none; letter-spacing: 0.01em; }
.spin-line { position: relative; flex: 1; height: 12px; margin-right: var(--wa-clear);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px calc(100% / 12)) 0 50% / 100% 7px no-repeat; }
.spin-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.16); }
.spin-fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: calc(var(--p) * 100%); background: #22c55e; }

/* ── 2. Why BR E-Bikes — plain type block over London (no pin) ────────── */
.manifesto { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: min(112svh, 980px); padding: clamp(64px, 12vw, 120px) 0 0; background: var(--stage-bg); }
.manifesto-inner { position: relative; z-index: 2; }
.manifesto-text { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 10vw, 5.6rem); line-height: 0.94; color: #fff; max-width: 22ch; margin: 14px 0 0; }
.manifesto-text em { font-style: normal; color: #22c55e; }
.manifesto-text.is-built .mw { color: rgba(255, 255, 255, 0.2); transition: color 0.4s var(--ease-out-spring); }
.manifesto-text.is-built .mw.is-hl { color: rgba(34, 197, 94, 0.28); }
.manifesto-text.is-built .mw.is-lit { color: #fff; }
.manifesto-text.is-built .mw.is-hl.is-lit { color: #22c55e; }
.manifesto-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1; }
/* mobile: anchor the photo's right edge so the whole BR250 stays in frame (it sits in the right 40% of the shot) */
.manifesto-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 60%; display: block; }
.manifesto-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--stage-bg) 0%, rgba(10, 11, 13, 0.5) 32%, rgba(10, 11, 13, 0.1) 70%, rgba(10, 11, 13, 0.55) 100%); }

/* ── 6. Anatomy — sticky stage, scroll steps, zoom + reticle ──────────── */
.anat { position: relative; padding: clamp(64px, 10vw, 112px) 0 clamp(40px, 6vw, 80px); background: var(--stage-bg); }
.anat-head { margin-bottom: 24px; }
.anat-head .sec-title { color: #fff; margin: 0 0 10px; }
.anat-intro { font-size: 15px; color: var(--stage-muted); }
.anat-grid { position: relative; }
.anat-stage-col { position: sticky; top: var(--nav-h); z-index: 4; padding: 8px 0 14px; background: var(--stage-bg); }
.anat-stage { --sx: 50%; --sy: 50%; --sr: 9999px; position: relative; width: 100%; max-height: 38svh; aspect-ratio: 1813 / 1463; margin: 0 auto; overflow: hidden;
  /* feather all four edges into the page so no rectangle shows, even when zoomed in */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect; }
.anat-zoom { position: absolute; inset: 0; transform-origin: var(--sx) var(--sy); will-change: transform; }
.anat-zoom picture, .anat-img { display: block; width: 100%; height: 100%; }
.anat-img { object-fit: contain; }  /* padded backdrop fades into the page: no visible box */
.anat-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(circle var(--sr) at var(--sx) var(--sy), rgba(10, 11, 13, 0) 0%, rgba(10, 11, 13, 0) 55%, rgba(10, 11, 13, 0.6) 100%); }
.anat-reticle { --g: #22c55e; position: absolute; z-index: 3; left: var(--sx); top: var(--sy); width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background:
    linear-gradient(var(--g), var(--g)) top left / 14px 2px no-repeat, linear-gradient(var(--g), var(--g)) top left / 2px 14px no-repeat,
    linear-gradient(var(--g), var(--g)) top right / 14px 2px no-repeat, linear-gradient(var(--g), var(--g)) top right / 2px 14px no-repeat,
    linear-gradient(var(--g), var(--g)) bottom left / 14px 2px no-repeat, linear-gradient(var(--g), var(--g)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--g), var(--g)) bottom right / 14px 2px no-repeat, linear-gradient(var(--g), var(--g)) bottom right / 2px 14px no-repeat; }
.anat-stage.is-live .anat-reticle, .anat-stage.is-live .anat-dim { opacity: 1; }
.anat-tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 8px; transform: translateX(-12px); padding: 4px 8px; background: #22c55e; color: #04210d; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.anat-reticle.is-flip .anat-tag { left: auto; right: 50%; transform: translateX(12px); }

.anat-steps { list-style: none; margin: 0; padding: 0; }
.anat-step { min-height: 58svh; padding: 20px 0 36px; opacity: 0.28; transition: opacity 0.45s var(--ease-out-spring); }
.anat-step.is-on { opacity: 1; }
.anat-close { margin: 0 0 16px; aspect-ratio: 2 / 1; overflow: hidden; background: #0c0c0c; border: 1px solid var(--stage-line); }
.anat-close img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease-out-spring); }
.anat-step.is-on .anat-close img { transform: none; }
.anat-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.1rem, 9vw, 3.2rem); line-height: 0.92; font-weight: 800; color: #fff; margin: 8px 0 10px; }
.anat-line { font-size: 15px; line-height: 1.55; color: var(--stage-muted); max-width: 40ch; margin-bottom: 14px; }
.anat-svc { font-size: 11px; letter-spacing: 0.08em; color: var(--stage-dim); margin-bottom: 14px; line-height: 1.6; }
.anat-svc .is-free { color: #22c55e; }
.anat-step .spin-link { align-self: flex-start; }

/* ── 6. Road legal ──────────────────────────────────────────────────── */
.legal { border-top: 1px solid var(--border); }
.legal-inner { max-width: 820px; }
.law { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.law thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-dim); padding: 0 0 10px; border-bottom: 1px solid var(--text); }
.law tbody th, .law tbody td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.law tbody th { font-weight: 500; color: var(--text-muted); padding-right: 16px; }
.law tbody td { font-weight: 600; color: var(--text); }
.law td .check-ico { display: inline-block; vertical-align: -3px; margin-right: 8px; }
.legal-note { margin-top: 14px; font-size: 13px; color: var(--text-muted); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
}
/* Desktop: copy holds the left column, the ring sits right of it */
@media (min-width: 1025px) {
  .spin-hud { --wa-clear: 200px; }
  .spin-copy { max-width: 1280px; }
  .spin-state { max-width: 520px; }
  .orb-item { left: 42%; right: 0; bottom: 84px; height: 74%; }
  .orb-img { max-width: min(54vw, 820px); }
  .spin-halo, .spin-floor { left: 71%; }
  .anat-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .anat-stage-col { top: calc(var(--nav-h) + 24px); padding: 0; }
  .anat-stage { height: calc(100svh - var(--nav-h) - 48px); max-height: 860px; aspect-ratio: auto; }
  .anat-img { object-fit: cover; }   /* desktop: tall column — trim only the padding */
  .anat-reticle { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .anat-step { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
  .anat-close { max-width: 460px; aspect-ratio: 16 / 10; }
  /* manifesto: type owns the left half, London owns the right */
  .manifesto { min-height: min(100svh, 900px); padding-bottom: clamp(64px, 10vw, 120px); justify-content: center; }
  .manifesto-text { max-width: 15ch; }
  .manifesto-bg { left: 40%; top: 0; height: auto; }
  .manifesto-bg img { object-position: 78% 55%; }
  .manifesto-bg::after { background: linear-gradient(90deg, var(--stage-bg) 0%, rgba(10, 11, 13, 0.55) 28%, rgba(10, 11, 13, 0.05) 65%, rgba(10, 11, 13, 0.4) 100%); }
}

/* ── Reduced motion: no pinning, no drift — a static, fully readable page ── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .spin { height: auto; }
  .spin-pin { position: relative; top: 0; height: min(100svh, 820px); }
  .manifesto-text.is-built .mw { color: #fff; } .manifesto-text.is-built .mw.is-hl { color: #22c55e; }
  .anat-step { opacity: 1; }
}