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

:root {
  --black: #080808;
  --dark: #111114;
  --dark-2: #18181d;
  --dark-3: #1e1e25;
  --white: #f5f5f0;
  --white-dim: rgba(245,245,240,0.72);
  --white-faint: rgba(245,245,240,0.12);

  --lite: #e85c1a;
  --lite-glow: rgba(232,92,26,0.16);
  --pro: #4a7ae8;
  --pro-glow: rgba(30,58,160,0.22);
  --tour: #c9a84c;
  --tour-glow: rgba(201,168,76,0.22);
  --tour-tag: #6b727d;
  --tour-tag-glow: rgba(58,64,74,0.22);
  --iron: #c3cad0;
  --iron-glow: rgba(195,202,208,0.18);

  /* Brand accent — champagne-gold. The single premium highlight used for
     brand-level moments (hero, eyebrows, dividers, CTAs). The lite/pro/tour/
     iron colors above are reserved strictly as per-product identifiers. */
  --accent: #d8c48a;
  --accent-soft: rgba(216,196,138,0.12);
  --accent-line: rgba(216,196,138,0.40);

  /* Display: Archivo — a refined editorial grotesque (replaces Barlow Condensed)
     for a more premium, less "athletic" headline voice. Chinese headings fall
     back to Noto Sans TC so the ZH version never drops to a system font. */
  --font-display: 'Archivo', 'Noto Sans TC', sans-serif;
  --font-body: 'Barlow', 'Noto Sans TC', sans-serif;

  /* Shared shape / motion / depth language */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 16px;
  --hairline:  1px solid var(--white-faint);
  --shadow-soft: 0 18px 48px rgba(0,0,0,0.45);
  --shadow-lift: 0 24px 60px rgba(0,0,0,0.55);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  /* Springy overshoot for tactile press/lift on buttons (settles past target) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Unified editorial photo treatment — desaturated, high-contrast, dark, with a
     faint champagne (warm-gold) cast so all photography reads as one graded set and
     ties to the brand accent. sepia() sits after grayscale() to warm the midtones. */
  --photo-filter:       grayscale(0.4) sepia(0.1) contrast(1.15) brightness(0.6) saturate(0.72);
  --photo-filter-hover: grayscale(0.18) sepia(0.08) contrast(1.16) brightness(0.7) saturate(0.95);

  /* Desktop section rhythm — one step more generous (max 120 → 140); mobile floor
     unchanged so phones don't grow taller. */
  --spacing-section: clamp(72px, 9.5vw, 140px);

  /* Machined-panel inlay for key cards: a 1px top highlight catches light and a
     faint inner shadow gives the flat dark surfaces depth (vs. a plain 1px border). */
  --card-inlay: inset 0 1px 0 rgba(245,245,240,0.07), inset 0 0 30px rgba(0,0,0,0.22);
}

html { scroll-behavior: smooth; }

/* Lenis smooth-scroll integration (classes added by Lenis at runtime) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── PAGE VEIL: brand preloader + page-transition overlay ── */
/* Cross-document View Transitions: the browser GPU-crossfades between same-origin
   pages on navigation. Progressive enhancement — unsupported browsers ignore the
   at-rule and fall back to the JS veil cover. main.js suppresses the arriving veil
   on VT navs (via `pagereveal`) so the crossfade isn't doubled. */
@view-transition { navigation: auto; }
/* Slow the cross-document crossfade so the page-to-page transition dwells ≥0.5s
   (a deliberate motion, not a 0.25s flash). Reduced-motion disables it below. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.5s; }

.page-veil {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  opacity: 1; visibility: visible;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0s;
}
.page-veil.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
/* Logo reveals as one smooth group (no staggered pop-in) */
.page-veil__brand {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(8px) scale(0.99);
  animation: veil-brand-in 0.55s var(--ease-out) 0.05s forwards;
}
.page-veil__logo {
  width: clamp(150px, 22vw, 230px); height: auto;
  filter: drop-shadow(0 0 24px rgba(245,245,240,0.12));
}
@keyframes veil-brand-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Internal page-to-page navigation: skip the branded reveal so the cover
   just fades in/out as one continuous motion (no second animation). */
.page-veil.is-transition { transition: opacity 0.5s var(--ease-out), visibility 0s linear 0s; }
.page-veil.is-transition.is-hidden { transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s; }
.page-veil.is-transition .page-veil__brand { animation: none; opacity: 1; transform: none; }
.page-veil.is-transition .page-veil__bar { display: none; }
.page-veil__bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, transparent, var(--white), transparent);
  animation: veil-bar 0.6s var(--ease-out) forwards;
}
@keyframes veil-bar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ── PREMIUM POLISH: selection, scrollbar, focus, grain, vignette ── */
::selection { background: var(--white); color: var(--black); text-shadow: none; }

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(245,245,240,0.22) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb {
  background: rgba(245,245,240,0.16);
  border-radius: 100px;
  border: 2px solid var(--black);
}
::-webkit-scrollbar-thumb:hover { background: rgba(245,245,240,0.30); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Tabular figures: keep digits the same width so specs columns align and the
   animated count-up KPIs don't shimmy as their digit widths change. */
.specs-table,
.about-kpi__num,
.story-stat__num,
.stat-block__value,
.spread-table,
.iron-spectrum__count-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Film grain — fine static noise over the whole page for material depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* Edge vignette — gentle darkening at the corners */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 94;
  pointer-events: none;
  background: radial-gradient(125% 125% at 50% 45%, transparent 58%, rgba(0,0,0,0.42) 100%);
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── TECH INTRO ── */
.tech-intro {
  position: relative; width: 100%;
  height: 100vh; height: 100svh; /* svh avoids mobile address-bar overflow */
  background: var(--dark-2); overflow: hidden;
}
#tech-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.tech-intro__overlay {
  position: absolute; bottom: 80px; z-index: 2;
  /* clamp left position so it never pushes content off-screen at narrow widths */
  left: clamp(24px, 5.5vw, 80px);
  max-width: min(520px, calc(100% - 48px));
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.tech-intro.ready .tech-intro__overlay {
  opacity: 1; transform: none;
}
/* Technology page: align overlay left with container left edge */
@media (min-width: 901px) {
  .tech-intro__overlay--page-tech {
    /* 100% = containing-block width (excludes scrollbar, matches container margin:auto) */
    left: max(32px, calc((100% - 1200px) / 2 + 32px));
    max-width: min(520px, calc((100% - 164px) / 2));
    /* clamp keeps overlay below the shaft ellipse (bottom ≈ 48vh from section base)
       at all zoom levels, while preserving 240px at normal viewport heights */
    bottom: clamp(48px, calc(48vh - 196px), 240px);
  }
}
.tech-intro__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 900; letter-spacing: 0.01em;
  text-transform: uppercase; line-height: 0.9;
  margin: 12px 0 18px;
}
.tech-intro__body {
  font-size: 14px; line-height: 1.8; color: var(--white-dim);
}
.tech-intro__scroll {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%); z-index: 2;
  opacity: 0; cursor: pointer; text-decoration: none;
  transition: opacity 0.6s ease;
  animation: intro-bounce 2.2s ease-in-out infinite;
}
.tech-intro.ready .tech-intro__scroll { opacity: 0.45; }
@keyframes intro-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: column;
  /* Frosted glass — page tone bleeds through, blur + saturate enrich the glass */
  background: rgba(8,8,8,0.60);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--white-faint);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), backdrop-filter 0.25s var(--ease-out),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile auto-hide on scroll-down */
@media (max-width: 640px) {
  .nav { will-change: transform; } /* promote only where the hide-transform actually runs */
  .nav.nav--hidden { transform: translateY(-100%); }
}

/* Scrolled past the hero lip — background firms up. Class-driven (was inline JS);
   declared before .nav--mega-open so the white mega state wins on equal specificity. */
.nav.nav--scrolled { background: rgba(8,8,8,0.85); }

/* ── Mega-menu open state: nav turns white ── */
.nav.nav--mega-open {
  background: #e8e8e8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(0,0,0,0.08);
}
.nav.nav--mega-open .nav__links a { color: rgba(15,15,15,0.65); }
.nav.nav--mega-open .nav__links a:hover { color: #0f0f0f; }
.nav.nav--mega-open .nav__link--active { color: #0f0f0f !important; }
.nav.nav--mega-open .nav__dropdown-trigger { color: rgba(15,15,15,0.65); }
.nav.nav--mega-open .nav__dropdown-wrap:hover .nav__dropdown-trigger,
.nav.nav--mega-open .nav__dropdown-wrap.is-open .nav__dropdown-trigger { color: #0f0f0f; }
.nav.nav--mega-open .nav__chevron { stroke: rgba(15,15,15,0.65); }
.nav.nav--mega-open .nav__logo-img { filter: brightness(0); }
.nav.nav--mega-open .nav__lang-toggle {
  color: rgba(15,15,15,0.65);
  border-color: rgba(0,0,0,0.2);
}
.nav.nav--mega-open .nav__lang-toggle:hover {
  color: #0f0f0f;
  border-color: rgba(0,0,0,0.45);
}

/* ── "Liquid glass" bar (all widths) ──
   Same black tone, just far more transparent so the page reads through it,
   with a stronger blur + a 1px top highlight and a soft float shadow to sell
   the pane-of-glass depth. Scoped :not(.nav--mega-open) so the white mega-menu
   state is never affected (and so it can't override mega on equal specificity).
   On phones the open menu is the separate opaque .nav__mobile overlay (z 1000),
   so the transparent bar underneath never hurts legibility. */
.nav:not(.nav--mega-open) {
  background: rgba(8,8,8,0.30);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(245,245,240,0.10), 0 8px 30px rgba(0,0,0,0.18);
}
/* Scrolled past the hero: firm up a little but stay glassy (was 0.85). */
.nav.nav--scrolled:not(.nav--mega-open) {
  background: rgba(8,8,8,0.46);
}
.nav__inner {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 32px;
}
.nav__logo {
  text-decoration: none; display: flex; align-items: center;
}
.nav__logo-img {
  height: 20px; width: auto; display: block;
}
.nav__links {
  display: flex; gap: 36px;
  justify-content: center;
}
.nav__links a {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--white-dim);
  text-decoration: none; transition: color 0.2s var(--ease-out);
  /* Explicit line-height (not `normal`): in the ZH nav a Latin label like
     "Fitting" (Archivo) and CJK labels (Noto Sans TC fallback) get DIFFERENT
     `normal` line boxes — Noto is taller — so the shorter Latin line top-aligns
     inside the stretched flex item and floats ~4.5px high. A fixed line-height
     gives every label an identical line box, equalising the baselines. */
  line-height: 1.45;
}
.nav__links a:hover { color: var(--white); }
.nav__link--active { color: var(--white) !important; }

/* Animated underline — slides in from the left on hover / active / focus.
   Scoped to DIRECT-CHILD links (Home / Contact) + triggers only, so it never
   bleeds onto links inside the dropdown panel (mega-links, cards, CTA). */
.nav__links > a,
.nav__dropdown-trigger { position: relative; }
.nav__links > a::after,
.nav__dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s var(--ease-out);
}
.nav__links > a:hover::after,
.nav__links > a:focus-visible::after,
.nav__links > a.nav__link--active::after,
.nav__dropdown-trigger:hover::after,
.nav__dropdown-trigger:focus-visible::after,
.nav__dropdown-wrap.is-open .nav__dropdown-trigger::after {
  transform: scaleX(1);
}

/* Right slot — holds lang toggle + hamburger */
.nav__right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Language toggle button */
.nav__lang-toggle {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: rgba(245,245,240,0.04);
  border: 1px solid var(--white-faint);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out);
  white-space: nowrap;
  line-height: 1;
}
.nav__lang-toggle:hover {
  color: var(--white);
  border-color: rgba(245,245,240,0.45);
  background: rgba(245,245,240,0.10);
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  /* 44px hit area (bars stay 22px, right-aligned + centered → visually identical) */
  width: 44px; height: 44px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--white);
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.25s ease;
}
.nav__hamburger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════════════
   MOBILE MENU — full-screen, multi-level (Tesla-style)
   Root panel lists sections; tapping About Us / Golf Shaft slides in a
   sub-panel of image cards. A persistent close (✕) sits top-right; each
   sub-panel has a back (‹) top-left. Language toggle lives in the footer.
   ════════════════════════════════════════════════════════════════════ */
.nav__mobile {
  position: fixed; inset: 0;
  width: 100%; height: 100dvh;
  background: #0a0a0a;
  z-index: 1000;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.32s var(--ease-out),
              transform 0.32s var(--ease-out),
              visibility 0s 0.32s;
}
.nav__mobile.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
/* When closed, force the whole overlay (and its is-active panel) inert so it
   never intercepts taps on the page beneath it. Higher specificity than
   .nav__m-panel.is-active so the visibility:visible there can't leak through. */
.nav__mobile:not(.is-open) { pointer-events: none; }
.nav__mobile:not(.is-open) .nav__m-panel {
  visibility: hidden; pointer-events: none;
}

/* Persistent close button (top-right, all panels) */
.nav__m-close {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--white-dim); transition: color 0.2s var(--ease-out);
}
.nav__m-close:hover { color: var(--white); }
.nav__m-close svg { width: 22px; height: 22px; stroke: currentColor;
  stroke-width: 1.6; fill: none; stroke-linecap: round; }

/* ── Sliding panels ── */
.nav__m-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 84px 28px 32px;
  /* Sub-panel content (2 image cards + 3 text links) can exceed short
     viewports — let each panel scroll; contain so the page beneath
     doesn't scroll along. */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transform: translateX(28px);
  transition: opacity 0.3s var(--ease-out),
              transform 0.34s var(--ease-out),
              visibility 0s 0.34s;
  pointer-events: none;
}
.nav__m-panel.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.3s 0.04s var(--ease-out), transform 0.34s var(--ease-out);
  pointer-events: auto;
}
/* root slides out to the LEFT when a sub-panel takes over */
.nav__m-panel--out { transform: translateX(-28px); }

/* ── Root list rows ── */
.nav__m-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav__m-row {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 4px;
  border-bottom: 1px solid rgba(245,245,240,0.10);
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: 0.01em;
  text-transform: none; text-align: left; text-decoration: none;
  color: var(--white-dim); transition: color 0.2s var(--ease-out);
}
.nav__m-row:hover,
.nav__m-row.nav__link--active { color: var(--white); }
.nav__m-chev {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.55; transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav__m-row:hover .nav__m-chev { opacity: 1; transform: translateX(3px); }

/* ── Footer language toggle ── */
.nav__m-foot { padding-top: 28px; }
/* Segmented language toggle — two labels, the active one filled */
.nav__m-lang {
  display: inline-flex; align-items: stretch; gap: 0;
  padding: 5px; border-radius: 40px;
  background: rgba(245,245,240,0.05);
  border: 1px solid rgba(245,245,240,0.16);
  cursor: pointer;
  font-family: var(--font-display);
}
.nav__m-lang__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; padding: 12px 22px; border-radius: 32px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--white-dim);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.nav__m-lang__opt.is-active {
  background: var(--white);
  color: #0a0a0a;
}
.nav__m-lang:hover .nav__m-lang__opt:not(.is-active) { color: var(--white); }

/* ── Back button (sub-panels) ── */
.nav__m-back {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; margin-bottom: 26px;
  background: none; border: none; cursor: pointer; padding: 4px 4px 4px 0;
  color: var(--white-dim); transition: color 0.2s var(--ease-out);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__m-back:hover { color: var(--white); }
.nav__m-back svg { width: 20px; height: 20px; stroke: currentColor;
  stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── Sub-panel image cards (reuse .nav__dd-card, full-width stacked) ──
   Bottom padding leaves breathing room under the last text link so it
   clears the viewport edge once the panel is scrolled to the end —
   sized generously because iOS Safari's bottom toolbar overlays the
   viewport edge on real devices. */
.nav__m-cards {
  display: flex; flex-direction: column; gap: 22px;
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}
.nav__m-cards .nav__dd-card {
  width: 100%; height: 192px;
  border-radius: 16px;
}

/* Plain text option below the cards (Shaft Spec) */
.nav__m-textlink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 6px; margin-top: 2px;
  border-top: 1px solid rgba(245,245,240,0.12);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--white-dim); transition: color 0.2s var(--ease-out);
}
.nav__m-textlink::after {
  content: '→'; opacity: 0.5; transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav__m-textlink:hover { color: var(--white); }
.nav__m-textlink:hover::after { transform: translateX(4px); opacity: 1; }
.nav__m-textlink.nav__link--active { color: var(--white); }


/* ── NAV DROPDOWN ── */

/* Wrapper — sets hover zone */
.nav__dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger looks identical to nav links */
.nav__dropdown-trigger {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 5px;
  transition: color 0.2s var(--ease-out);
  line-height: 1.45; /* match .nav__links a — keep CJK/Latin baselines aligned */
}
.nav__dropdown-wrap.is-open .nav__dropdown-trigger { color: var(--white); }
.nav__dropdown-trigger.nav__link--active { color: var(--white) !important; }

/* Chevron arrow */
.nav__chevron {
  width: 9px; height: 5px;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; opacity: 0.65; flex-shrink: 0;
  transition: transform 0.22s;
}
.nav__dropdown-wrap.is-open .nav__chevron { transform: rotate(180deg); }

/* Full-width white mega panel */
.nav__dropdown {
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  /* The panel is full-viewport-width and stays in layout while closed
     (opacity:0, not display:none). Below ~768px its centred multi-column
     content is wider than the viewport and would spill past both edges,
     creating horizontal page scroll even when invisible. Clip it to the
     viewport so a closed/narrow dropdown can never widen the page. */
  overflow-x: hidden;
  background: #e8e8e8;
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.13);
  border-radius: 0 0 16px 16px;
  padding: 36px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.22s 0.06s, transform 0.22s 0.06s;
  z-index: 200;
}
.nav__dropdown-wrap.is-open .nav__dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  transition: opacity 0.2s var(--ease-out) 0s, transform 0.2s var(--ease-out) 0s;
  z-index: 201; /* incoming panel sits above the one fading out */
}
/* During a direct menu-to-menu switch, the incoming panel appears instantly
   (no fade) so it fully covers the page — prevents the dark background from
   flashing through while two semi-opaque panels crossfade. */
.nav__dropdown.nav__dropdown--instant {
  transition: none !important;
}

/* Inner container — centers cards within the full-width panel */
.nav__dd-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 20px;
  align-items: center;          /* vertically centre cards within whatever the
                                   panel's natural content height is */
  justify-content: center;
}

/* Image cards */
.nav__dd-card {
  display: block;
  width: 236px; height: 174px;
  position: relative; overflow: hidden;
  border-radius: 4px; text-decoration: none; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transition: transform 0.22s, box-shadow 0.22s;
}
.nav__dd-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.24);
}

/* Image layer — the photo lives here so it can zoom on hover (no card lift) */
.nav__dd-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: transform 0.6s var(--ease-out);
}
.nav__dd-card:hover::after { transform: scale(1.07); }
.nav__dd-card--company::after { background-image: url('company-front-door.webp'); }
.nav__dd-card--tech::after    { background-image: url('technology.webp'); }
.nav__dd-card--driver::after  { background-image: url('wood.webp'); }
.nav__dd-card--iron::after    { background-image: url('iron.webp'); }

/* Dark overlay — bottom-weighted gradient for legible bottom-aligned text */
.nav__dd-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,8,8,0.86) 0%, rgba(8,8,8,0.42) 48%, rgba(8,8,8,0.12) 100%);
  transition: opacity 0.25s var(--ease-out);
}
.nav__dd-card:hover::before { opacity: 0.78; }

/* Current-page card gets a persistent ring */
.nav__dd-card.nav__link--active { box-shadow: 0 0 0 2px #0f0f0f, 0 4px 20px rgba(0,0,0,0.18); }

/* Card body — bottom-aligned label + description */
.nav__dd-card__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 16px 18px;
  display: flex; flex-direction: row; align-items: flex-end;
  justify-content: space-between; gap: 12px; text-align: left;
}
.nav__dd-label {
  position: static; display: block;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white);
}
.nav__dd-desc {
  font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  text-transform: none; line-height: 1.35; color: rgba(255,255,255,0.78);
}
/* Oura-style circular arrow button (bottom-right of each card) */
.nav__dd-arrow {
  position: relative; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background-color: #fff;
  border: 1px solid #fff;
}
.nav__dd-arrow::after {
  content: ''; position: absolute; inset: 0;
  background-color: #0f0f0f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2012h15M13%206l6%206-6%206'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2012h15M13%206l6%206-6%206'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* Plain text link inside the dropdown (Shaft Spec) — sits right of the cards */
.nav__dd-text {
  align-self: stretch;
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px 0 24px; margin-left: 4px;
  border-left: 1px solid rgba(0,0,0,0.12);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(15,15,15,0.6); text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.nav__dd-text::after {
  content: '→'; font-size: 15px; opacity: 0.5;
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav__dd-text:hover { color: #0f0f0f; }
.nav__dd-text:hover::after { transform: translateX(4px); opacity: 1; }
.nav__dd-text.nav__link--active { color: #0f0f0f; }

/* ── Golf Shaft mega menu: columns ── */
.nav__dd-inner--mega { gap: 28px; align-items: center; }
.nav__mega-col { display: flex; flex-direction: column; }
.nav__mega-col .nav__dd-card { width: 258px; height: 174px; }

/* Model index list (sits in the right rail, above View all specs) */
.nav__mega-links { display: flex; flex-direction: column; min-width: 230px; }
.nav__mega-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
  transition: background 0.18s;
}
.nav__mega-link:hover { background: rgba(0,0,0,0.055); }
.nav__mega-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav__mega-dot--lite { background: #e85c1a; }
.nav__mega-dot--pro  { background: #4a7ae8; }
.nav__mega-dot--tour { background: #5b626c; }
.nav__mega-dot--iron { background: var(--iron); box-shadow: 0 0 0 1px rgba(0,0,0,0.18); }

/* Hairline that separates the driver trio from the (different-category) iron */
.nav__mega-divider {
  height: 1px; width: 100%;
  margin: 7px 0; background: rgba(0,0,0,0.13);
}
.nav__mega-link__name {
  font-family: var(--font-display);
  font-size: 15.6px; font-weight: 700; letter-spacing: 0.01em;
  text-transform: none; color: #0f0f0f;
}
.nav__mega-link__tag {
  margin-left: auto; font-size: 11px; letter-spacing: 0.02em;
  color: rgba(15,15,15,0.66);
}

/* Right rail: model list stacked above the View-all-specs button */
.nav__mega-cta-col {
  align-self: stretch; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 14px;
  padding-left: 28px; margin-left: 4px;
  border-left: 1px solid rgba(0,0,0,0.12);
}
.nav__mega-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 30px;
  background: #0f0f0f; color: #fff !important;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.nav__mega-cta::after { content: '→'; transition: transform 0.2s var(--ease-out); }
.nav__mega-cta:hover { background: #2a2a2a; }
.nav__mega-cta:hover::after { transform: translateX(4px); }
.nav__mega-cta.nav__link--active { background: #e85c1a; }

@media (max-width: 900px) {
  .nav__mega-col .nav__dd-card { width: 200px; height: 132px; }
}

/* On compact nav (≤900px) shrink cards slightly */
@media (max-width: 900px) {
  .nav__dd-card { width: 182px; height: 132px; }
  .nav__dd-label { font-size: 15px; }
}

/* On mobile the panel is hidden — mobile menu handles it */
@media (max-width: 640px) {
  .nav__dropdown { display: none !important; }
}

/* ── HERO ── */
.hero {
  position: relative; width: 100%;
  height: 100vh; height: 100svh; /* svh keeps wordmark + scroll hint within the initial mobile viewport */
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  overflow: clip;
}

.hero__scroll-hint {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: rgba(245,245,240,0.35);
  font-family: var(--font-display); font-size: 8px;
  font-weight: 700; letter-spacing: 0.35em;
  opacity: 0; pointer-events: none;
  animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}
/* On phones the hint is the only cue that content continues below the
   full-viewport hero — enlarge and brighten so it reads at a glance. */
@media (max-width: 640px) {
  .hero__scroll-hint { font-size: 12px; gap: 9px; color: rgba(245,245,240,0.8); }
  .hero__scroll-hint svg { width: 22px; height: 30px; }
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 60%, rgba(216,196,138,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 38%, rgba(150,160,180,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #090a0c 0%, #0c0d11 58%, #08090b 100%);
}

/* centre wordmark block — absolutely placed, clears nav at all zoom levels */
.hero__center {
  position: absolute;
  /* max(76px, 17%) ensures minimum clearance above the 64px nav */
  top: max(76px, 17%); left: 0; right: 0;
  z-index: 2; text-align: center;
}
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.35em;
  text-transform: uppercase; color: rgba(245,245,240,0.35);
  margin-bottom: 28px;
}
.hero__wordmark {
  font-family: var(--font-display);
  /* min(26vw, 30vh) prevents overflow into bottom content at high zoom */
  font-size: clamp(80px, min(26vw, 30vh), 300px);
  font-weight: 900; line-height: 0.82;
  letter-spacing: -0.02em; color: var(--white);
  text-shadow: 0 0 140px rgba(201,168,76,0.12);
}
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 300; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--tour);
  margin-top: 38px;
}

/* shaft layer */
.hero__shaft-track {
  position: absolute;
  top: 70%; left: 0; width: 100%;
  transform: translateY(-50%);
  z-index: 1; pointer-events: none;
}
.hero__shaft-img {
  display: block; width: 100%; height: auto;
  opacity: 0;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6));
  transition: none;
}
.hero__shaft-img--tour {
  filter: drop-shadow(0 0 18px rgba(180,180,180,0.22))
          drop-shadow(0 8px 28px rgba(0,0,0,0.7));
}
.hero__shaft-img--iron {
  filter: drop-shadow(0 0 18px rgba(195,202,208,0.22))
          drop-shadow(0 8px 28px rgba(0,0,0,0.7));
}
.hero__shaft-img + .hero__shaft-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain;
}

/* bottom content */
.hero__bottom {
  position: relative; z-index: 4;
  text-align: center;
  padding-bottom: 56px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(245,245,240,0.32);
}
.hero__variants { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

.hero__variant-btn {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  padding: 7px 16px; border-radius: 2px;
  text-transform: uppercase; background: transparent;
  cursor: pointer; transition: opacity 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  opacity: 0.45;
}
.hero__variant-btn:hover { opacity: 1; }
.hero__variant-btn.is-active { opacity: 1; }

.hero__variant-btn--lite { color: var(--lite); border: 1px solid var(--lite); }
.hero__variant-btn--lite.is-active { background: var(--lite-glow); }

.hero__variant-btn--pro { color: var(--pro); border: 1px solid rgba(74,122,232,0.7); }
.hero__variant-btn--pro.is-active { background: var(--pro-glow); }

.hero__variant-btn--tour { color: var(--tour-tag); border: 1px solid #41464e; }
.hero__variant-btn--tour.is-active { background: var(--tour-tag-glow); }

.hero__variant-btn--iron { color: var(--iron); border: 1px solid rgba(195,202,208,0.7); }
.hero__variant-btn--iron.is-active { background: var(--iron-glow); }
.tag {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  padding: 6px 14px; border-radius: 2px;
  text-transform: uppercase;
}
.tag--lite { background: var(--lite-glow);     color: var(--lite);     border: 1px solid var(--lite); }
.tag--pro  { background: var(--pro-glow);      color: var(--pro);      border: 1px solid rgba(74,122,232,0.7); }
.tag--tour { background: var(--tour-tag-glow); color: var(--tour-tag); border: 1px solid #41464e; }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none;
  color: var(--black); background: var(--white);
  padding: 14px 32px; border-radius: 2px;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.btn:hover { background: var(--tour); color: var(--black);
  transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.09s; }
.btn--ghost {
  background: transparent; color: var(--white);
  border: 1px solid var(--white-faint);
}
.btn--ghost:hover { background: var(--white); color: var(--black); }


/* ── ABOUT PAGE BANNER ── */
.about-banner {
  /* clamp padding so banner doesn't eat the entire viewport at high zoom */
  padding: clamp(90px, 14vh, 164px) 0 clamp(48px, 7vh, 88px);
  background: var(--black);
  border-bottom: 1px solid var(--white-faint);
  position: relative;
  overflow: hidden;
}
.about-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 18% 65%, rgba(216,196,138,0.06) 0%, transparent 58%);
  pointer-events: none;
}
.about-banner__eyebrow { margin-bottom: 18px; }
.about-banner__title {
  font-family: var(--font-display);
  /* Lower mobile floor (was 72px) so long single words — "Craftsmanship",
     "CONTACT", CJK 「CMS 系列」 — fit whole instead of breaking mid-word/mid-term. */
  font-size: clamp(50px, 12vw, 160px);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--white);
  /* balance keeps multi-word + CJK compounds together; break-word is last-resort only */
  text-wrap: balance;
  overflow-wrap: break-word;
}
.about-banner__title--nowrap {
  /* floor low enough that the longest single word ("Craftsmanship", 13 chars)
     fits whole on a 375px phone instead of snapping mid-word — measured
     305px at 32px vs the 300px banner column, so the floor must be 28px. */
  font-size: clamp(28px, 7.5vw, 120px);
}

/* ── ABOUT US ── */

.about { background: var(--dark); }

/* — Opener — */
.about__opener {
  padding: 130px 0 100px;
  border-bottom: 1px solid var(--white-faint);
  position: relative;
  background-image:
    linear-gradient(105deg, rgba(17,17,20,0.96) 35%, rgba(17,17,20,0.72) 100%),
    url('carbon-fiber.webp');
  background-size: cover;
  background-position: center 30%;
}

.about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 20px;
}

.about__col-l { position: relative; }

.about__title {
  font-family: var(--font-display);
  /* Floor lowered 52->34px: longest word "ENGINEERING." is one unbreakable
     token, ~438px at 52px in Archivo — it overflowed the mobile column and
     pushed the layout viewport wider (zoomed-out page on phones). 6.5vw
     dominates above ~800px, so desktop sizing is unchanged. */
  font-size: clamp(34px, 6.5vw, 90px);
  font-weight: 900;
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 44px;
}

.about__yr {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.about__yr-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 130px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,245,240,0.16);
}

.about__yr-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
  line-height: 1.7;
  padding-bottom: 6px;
}

.about__col-r {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about__p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--white-dim);
}

/* — Stats strip — */
.about__stats {
  background: #0c0c0e;
  border-bottom: 1px solid var(--white-faint);
}

.about__kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.about-kpi {
  padding: 44px 28px;
  text-align: center;
  border-right: 1px solid var(--white-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.about-kpi:last-child { border-right: none; }

.about-kpi__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 62px);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

/* Text-style KPI values (AEROSPACE / WORLD FIRST) — smaller font + nowrap
   so they fit a single line in the 4-col grid at 901-1100px widths */
.about-kpi__num--text {
  font-size: clamp(20px, 2.4vw, 36px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.about-kpi__unit {
  font-size: 0.5em;
  color: var(--lite);
  vertical-align: super;
  margin-left: 1px;
}

.about-kpi__lbl {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-wrap: balance;
}

/* — CMM Technology block — */
/* — Factory image band (between stats and CMM) — */
.about__img-band {
  position: relative;
  height: clamp(240px, 34vw, 460px);
  overflow: hidden;
}
.about__img-band img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: var(--photo-filter);
  transform: scale(1.02);
  transition: filter 0.7s var(--ease-out), transform 1.2s var(--ease-out);
  display: block;
}
.about__img-band:hover img { filter: var(--photo-filter-hover); transform: scale(1.05); }
.about__img-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,17,20,0.55) 0%,
    transparent 25%,
    transparent 75%,
    rgba(17,17,20,0.55) 100%
  );
  pointer-events: none;
}

/* ── Craftsmanship process — scroll-pinned 4-step narrative ──
   Left media pins (sticky) and crossfades through 4 photos as the right
   step column scrolls; a vertical bar tracks progress. ── */
.craft-process {
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--dark); border-top: 1px solid var(--white-faint);
}
.craft-process__head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 6vw, 72px); }
.craft-process__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 900; line-height: 0.98; text-transform: uppercase;
  letter-spacing: 0.02em; margin-top: 12px;
}
.craft-process__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.craft-process__sticky { position: sticky; top: 96px; }
.craft-process__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: #0a0a0a; border: 1px solid var(--white-faint);
}
.craft-process__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: var(--photo-filter);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.craft-process__img.is-active { opacity: 1; }
.craft-process__bar {
  position: absolute; left: 16px; bottom: 16px; right: 16px; height: 3px;
  background: rgba(245,245,240,0.18); border-radius: 3px; overflow: hidden;
}
.craft-process__bar-fill {
  display: block; height: 100%; width: 25%;
  background: var(--accent); border-radius: 3px;
  transition: width 0.5s var(--ease-out);
}
.craft-process__steps { list-style: none; margin: 0; padding: 0; }
.craft-process__step {
  padding: clamp(40px, 9vh, 96px) 0;
  opacity: 0.4; transition: opacity 0.4s var(--ease-out);
}
.craft-process__step.is-active { opacity: 1; }
.craft-process__num {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--accent);
}
.craft-process__step-t {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px);
  font-weight: 800; letter-spacing: 0.01em; margin: 10px 0 12px;
}
.craft-process__step-p { font-size: 15px; line-height: 1.75; color: var(--white-dim); max-width: 460px; }
@media (max-width: 860px) {
  .craft-process__inner { grid-template-columns: 1fr; gap: 0; }
  .craft-process__sticky { position: sticky; top: 72px; margin-bottom: 28px; z-index: 1; }
  .craft-process__media { aspect-ratio: 16 / 10; }
  .craft-process__step { padding: clamp(28px, 6vh, 48px) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-process__img, .craft-process__step, .craft-process__bar-fill { transition: none; }
  /* show all steps legibly when motion is reduced */
  .craft-process__step { opacity: 1; }
}

/* — CMM prepreg photo — */
.about__cmm-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  filter: var(--photo-filter);
  transition: filter 0.7s var(--ease-out);
  margin-bottom: 28px;
}
.about__cmm-photo:hover { filter: var(--photo-filter-hover); }


.about__cmm {
  padding: var(--spacing-section) 0;
  background: var(--dark-2);
  position: relative;
  overflow: hidden;
}

.about__cmm::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lite) 0%, rgba(232,92,26,0) 50%);
}

.about__cmm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.about__cmm-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--lite);
  border: 1px solid rgba(232,92,26,0.4);
  background: var(--lite-glow);
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 24px;
}

.about__cmm-h {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 28px;
}

.about__cmm-p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--white-dim);
  max-width: 480px;
}

.about__cmm-p + .about__cmm-p { margin-top: 16px; }

/* — FML Visualization — */
.fml {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.fml__hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fml__hd-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.fml__hd-ct {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lite);
}

.fml__bk {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04); /* 1px gap colour between bands */
  gap: 1px;
}

.fml__band {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  cursor: crosshair;
  /* filter/opacity/box-shadow only — transform is owned by GSAP entrance */
  transition: filter 0.25s var(--ease-out), opacity 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.fml__band--cf {
  height: 22px;
  background: linear-gradient(90deg, #080808 0%, #1c1c1c 45%, #111 100%);
}

.fml__band--mt {
  height: 7px;
  background: linear-gradient(90deg, #686868 0%, #d4d4d4 30%, #c8c8c8 70%, #787878 100%);
  box-shadow: 0 0 8px rgba(210,210,210,0.12);
}

.fml__ft {
  display: flex;
  gap: 28px;
  padding: 13px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.fml__key {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.fml__dot {
  display: inline-block;
  width: 14px;
  height: 7px;
  border-radius: 1px;
  flex-shrink: 0;
}

.fml__dot--cf {
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.14);
}

.fml__dot--mt {
  background: linear-gradient(90deg, #848484, #d4d4d4, #909090);
}

/* — FML interactive layer scan: hover (or tap) lights up one layer — */
.fml.is-scanning .fml__band { opacity: 0.38; }
.fml.is-scanning .fml__band.is-lit {
  opacity: 1;
  filter: brightness(1.5) saturate(1.06);
  box-shadow: 0 0 0 1px rgba(245,245,240,0.5), 0 0 18px rgba(245,245,240,0.2);
  z-index: 2;
}
.fml__scan {
  position: absolute;
  top: 50px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 2px;
  background: rgba(8,8,8,0.82);
  border: 1px solid rgba(245,245,240,0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  z-index: 3;
}
.fml__scan-mat { color: var(--white-dim); transition: color 0.25s var(--ease-out); }
.fml__scan-idx {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fml__scan-idx:empty { display: none; }
.fml.is-scanning .fml__scan { opacity: 1; border-color: rgba(216,196,138,0.5); }
.fml.is-scanning .fml__scan-mat { color: var(--white); }

/* — Mission closer — */
.about__mission {
  padding: 100px 0;
  background: var(--black);
  border-top: 1px solid var(--white-faint);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about__mission::before {
  content: 'XFIBURST';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(70px, 13vw, 190px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,245,240,0.04);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.about__mission-p {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-dim);
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}

/* ── TECHNOLOGY: CORE TECHNOLOGIES (fiber spread + interlayer bonding) ── */
.tech-cores {
  padding: var(--spacing-section) 0;
  background: var(--dark-2);
}
.tech-cores__head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 86px);
  text-align: center;
}
.tech-cores__title {
  margin-top: 14px;
  font-family: var(--font-display);
  /* EN title holds its 2-line <br> split ("Two Problems Conventional" /
     "Laminates Can't Solve"). The longer line renders ~15.3px per 1px of
     font-size; container width / 16 keeps it whole, capped to fit the
     760px column at desktop. */
  font-size: clamp(18px, calc((100vw - 64px) / 16), 48px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.01em;
}
/* Keep the ZH title on a single line at its original scale; EN wraps via <br> */
html[lang="zh-TW"] .tech-cores__title {
  font-size: clamp(32px, 4.6vw, 58px);
  white-space: nowrap;
}
@media (max-width: 520px) {
  html[lang="zh-TW"] .tech-cores__title {
    white-space: normal;
  }
}
.tech-cores__lead {
  margin: 18px auto 0;
  max-width: 640px;
  color: var(--white-dim);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
}
.tech-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.tech-core + .tech-core {
  margin-top: clamp(60px, 8vw, 110px);
}
.tech-core--reverse .tech-core__media {
  order: 2;
}
.tech-core__no {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.tech-core__title {
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.06;
}
.tech-core__p {
  color: var(--white-dim);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
}
.tech-core__p + .tech-core__p {
  margin-top: 14px;
}
.tech-core__media {
  margin: 0;
  position: relative;
}
/* framed photo treatment — show the full image, no cropping */
.tech-core__media--frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  filter: saturate(1.02) contrast(1.02);
}
/* vertical spread photo — constrain height so the portrait isn't overwhelming */
.tech-core__media--spread {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.tech-core__media--spread img {
  height: 560px;
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1200 / 1600;
  object-fit: contain;
}
/* floating transparent render — full image, transparent background */
.tech-core__media--float {
  width: fit-content;
  max-width: 460px;
  margin: 0 auto;
}
.tech-core__media--float img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 709 / 730;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.55));
}
/* image annotations (width badges + peel callout) */
.tech-anno {
  position: absolute;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--accent);
  color: #1a1a17;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.7vw, 19px);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.tech-anno--top {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.tech-anno--bottom {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}
.tech-anno--peel {
  top: 34%;
  left: 4%;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  padding: 0;
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* dashed ring around the peeled flap */
.tech-anno-ring {
  position: absolute;
  z-index: 2;
  left: 9%;
  top: 1%;
  width: 27%;
  aspect-ratio: 1;
  border: 2px dashed var(--accent);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* spread-width callout */
.tech-callout {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0;
  padding: 16px 20px;
  border: 1px solid var(--white-faint);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.tech-callout__lbl {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.tech-callout__val {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* fiber-spread schematic — a 5 mm tow fans open into a 40 mm ribbon */
.spread-fan {
  margin: 6px 0 22px;
  width: 100%;
}
.spread-fan__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 148px;
  overflow: visible;
}
.spread-fan__line {
  fill: none;
  stroke: rgba(222, 223, 228, 0.5);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* base = fully drawn (safe when reduce-motion skips reveal) */
}
.spread-fan__line--mid { stroke: rgba(216, 196, 138, 0.62); stroke-width: 1.6; }
.spread-fan__edge {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}
.spread-fan__edge--out { opacity: 0.34; }
/* draw open only when the JS reveal system is live (it bails under reduce-motion) */
.spread-fan.u-reveal .spread-fan__line { stroke-dashoffset: 1; }
.spread-fan.u-reveal.is-in .spread-fan__line {
  animation-name: spread-draw;
  animation-duration: 0.75s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: var(--d, 0s);
}
@keyframes spread-draw { to { stroke-dashoffset: 0; } }
/* wall-structure legend */
.tech-legend {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.tech-legend__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.55;
  color: var(--white-dim);
}
.tech-legend__dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.tech-legend__dot--cf {
  background: #2b2f33;
}
.tech-legend__dot--mt {
  background: linear-gradient(135deg, #e8e8ea, #9a9ca0);
}
.tech-legend__dot--peel {
  background: transparent;
  border: 1px dashed var(--accent);
}
/* fiber-spread data table */
.spread-table {
  width: 100%;
  margin-top: 26px;
  border-collapse: collapse;
  font-size: clamp(13px, 1.2vw, 15px);
}
.spread-table th,
.spread-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--white-faint);
}
.spread-table th:first-child,
.spread-table td:first-child {
  text-align: left;
}
.spread-table thead th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.spread-table tbody td {
  color: var(--white-dim);
  font-variant-numeric: tabular-nums;
}
.spread-table tbody tr:first-child td {
  color: var(--white);
  font-weight: 600;
}
.spread-table__cap {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--white-dim);
}
@media (max-width: 760px) {
  .tech-core {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tech-core--reverse .tech-core__media {
    order: 0;
  }
  /* hide the "Core Tech 02" label on mobile per spec */
  .tech-core--reverse .tech-core__no {
    display: none;
  }
  .tech-core__media--float {
    max-width: 320px;
  }
  .tech-core__media--spread img {
    max-height: 480px;
  }
}

/* ── ABOUT SUB-PAGES: editorial story layout (ourstory / craftsmanship / quality) ── */
.story-intro {
  position: relative;
  padding: clamp(84px, 11vw, 140px) 0 clamp(56px, 7vw, 92px);
  border-bottom: 1px solid var(--white-faint);
  background-image:
    linear-gradient(105deg, rgba(17,17,20,0.96) 38%, rgba(17,17,20,0.74) 100%),
    url('carbon-fiber.webp');
  background-size: cover;
  background-position: center 30%;
}
.story-intro__eyebrow { margin-bottom: 24px; }
.story-intro__cols {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.story-intro__head {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 900;
  line-height: 1.0; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; color: var(--white);
}
.story-intro__body { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.story-intro__p { font-size: 16px; line-height: 1.85; color: var(--white-dim); }

/* — 3-up stats band — */
.story-stats { background: #0c0c0e; border-bottom: 1px solid var(--white-faint); }
.story-stats__row { display: grid; grid-template-columns: repeat(3, 1fr); }
.story-stat {
  padding: clamp(40px, 5vw, 64px) 28px; text-align: center;
  border-right: 1px solid var(--white-faint);
}
.story-stat:last-child { border-right: none; }
.story-stat__num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 62px); font-weight: 900;
  line-height: 1; letter-spacing: 0.01em; color: var(--white);
  margin-bottom: 14px;
}
.story-stat__num--sm { font-size: clamp(26px, 3vw, 40px); }
.story-stat__unit { color: var(--accent); }
.story-stat__lbl {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--white-dim);
}

/* — Image + text split — */
.story-split { padding: var(--spacing-section) 0; }
.story-split--alt { background: var(--dark-2); }
.story-split__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.story-split--reverse .story-split__media { order: 2; }
.story-split__media {
  position: relative; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--white-faint);
  box-shadow: 0 30px 60px rgba(0,0,0,0.42);
}
.story-split__media img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  filter: var(--photo-filter);
  transform: scale(1.02);
  transition: filter 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}
.story-split__media:hover img { filter: var(--photo-filter-hover); transform: scale(1.06); }
.story-split__eyebrow { margin-bottom: 18px; }
.story-split__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 800;
  line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: 22px; color: var(--white);
}
.story-split__p {
  font-size: 15.5px; line-height: 1.85; color: var(--white-dim);
  margin-bottom: 16px; max-width: 520px;
}
.story-split__p:last-child { margin-bottom: 0; }

/* — Test checklist — */
.story-list {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
.story-list li {
  position: relative; padding-left: 26px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--white-dim);
}
.story-list li::before {
  content: ''; position: absolute; left: 0; top: 0.4em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(216,196,138,0.6);
}

/* ── Quality test accordion — story-list upgraded to expandable rows.
   One open at a time; panel collapses via the grid-rows 0fr→1fr trick. ── */
.qt-acc { grid-template-columns: 1fr; gap: 0; }
.qt-acc li { padding-left: 0; }
.qt-acc li::before { content: none; }
.qt-acc__item { border-bottom: 1px solid var(--white-faint); }
.qt-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 13px 2px;
  background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--white-dim); transition: color 0.2s var(--ease-out);
}
.qt-acc__head:hover, .qt-acc__item.is-open .qt-acc__head { color: var(--white); }
/* keep the story-list gold dot, moved inside the row head */
.qt-acc__head > span { position: relative; padding-left: 26px; }
.qt-acc__head > span::before {
  content: ''; position: absolute; left: 0; top: 0.4em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(216,196,138,0.6);
}
.qt-acc__chev {
  width: 11px; height: 7px; flex-shrink: 0;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.6; transition: transform 0.25s var(--ease-out);
}
.qt-acc__item.is-open .qt-acc__chev { transform: rotate(180deg); }
/* height animated by JS (gsap to/from auto); hidden when collapsed */
.qt-acc__panel { height: 0; overflow: hidden; }
.qt-acc__desc {
  margin: 0; padding: 2px 0 14px 26px;
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  letter-spacing: 0.01em; text-transform: none;
  color: var(--white-dim); line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .qt-acc__chev { transition: none; }
}

@media (max-width: 760px) {
  .story-intro__cols { grid-template-columns: 1fr; gap: 28px; }
  .story-stats__row { grid-template-columns: 1fr; }
  .story-stat { border-right: none; border-bottom: 1px solid var(--white-faint); }
  .story-stat:last-child { border-bottom: none; }
  .story-split__inner { grid-template-columns: 1fr; gap: 30px; }
  .story-split--reverse .story-split__media { order: 0; }
  .story-list { grid-template-columns: 1fr; }
}

/* ════════ OUR STORY — brand narrative ════════ */

/* — Cinematic hero — */
.story-hero {
  position: relative; overflow: hidden;
  min-height: clamp(540px, 84vh, 860px);
  min-height: clamp(540px, 84svh, 860px); /* svh after vh fallback */
  display: flex; align-items: center;
  /* The nav is fixed (64px); without this the flex-centred block can slide
     under it on short viewports. 72px = nav height + breathing room, and
     nudges the whole block down a touch on tall viewports too. */
  padding-top: 72px;
  border-bottom: 1px solid var(--white-faint);
}
.story-hero__bg {
  position: absolute; inset: 0; transform: scale(1.06);
  background-image:
    linear-gradient(180deg, rgba(8,8,8,0.60) 0%, rgba(8,8,8,0.78) 58%, rgba(8,8,8,0.96) 100%),
    url('carbon-fiber.webp');
  background-size: cover; background-position: center;
}
.story-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(216,196,138,0.12), transparent 62%);
}
.story-hero__inner { position: relative; z-index: 2; text-align: center; }
.story-hero__eyebrow { margin-bottom: 28px; }
.story-hero__title {
  font-family: var(--font-display); font-weight: 900;
  /* EN title must hold its 2-line <br> split at every width. The longest
     line "CARBON FIBER & METAL" renders ~13.5px wide per 1px of font-size
     (measured, incl. 0.01em tracking). Dividing (100vw − 64px padding) by
     15 keeps it on one line with ~7% slack — needed because the real
     .container content box runs ~26px narrower than 100vw − 64 at some
     widths (scrollbar / container margins). The 80px cap matches the
     .container max-width (1200 − 64 = 1136 usable): 80 × 13.5 ≈ 1080. */
  font-size: clamp(18px, calc((100vw - 64px) / 15), 80px);
  line-height: 0.92;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--white); margin: 0; text-wrap: balance;
}
/* zh title is only 7 glyphs — keep the original larger display scale */
html[lang^="zh"] .story-hero__title { font-size: clamp(44px, 8.6vw, 124px); }
.story-hero__sub {
  margin-top: 28px; font-family: var(--font-display); font-weight: 300;
  /* EN sub scaled down alongside the smaller EN title above */
  font-size: clamp(13px, 1.8vw, 20px); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
/* zh sub keeps the original scale, matching the unchanged zh title */
html[lang^="zh"] .story-hero__sub { font-size: clamp(15px, 2.1vw, 25px); }
.story-hero__scroll {
  display: block; width: 1px; height: 56px; margin: 50px auto 0;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: heroScroll 2.4s var(--ease-out) infinite;
}
@keyframes heroScroll {
  0% { opacity: 0; transform: scaleY(0.3); transform-origin: top; }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(22px) scaleY(0.6); transform-origin: top; }
}

/* — Chapter: image + narrative — */
.story-chapter { padding: var(--spacing-section) 0; }
.story-chapter--alt { background: var(--dark-2); }

/* ── Brand-story scroll timeline (fixed side rail, desktop only) ── */
/* ── Shared scroll side-rail (ourstory timeline + driver / home / technology
   section navigators). Fixed in the right gutter, desktop-only. Fades in via
   .is-revealed once the page is scrolled past its hero/banner. ── */
.scroll-rail {
  position: fixed; top: 50%; right: 28px; transform: translateY(-50%);
  z-index: 40; display: none;            /* shown ≥1024px via media query */
  flex-direction: column; justify-content: space-between;
  height: min(420px, 56vh); padding: 6px 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.scroll-rail.is-revealed { opacity: 1; pointer-events: auto; }
.scroll-rail__track {
  position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px;
  background: rgba(245,245,240,0.14); border-radius: 2px; overflow: hidden;
}
.scroll-rail__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: var(--accent);
  transition: height 0.45s var(--ease-out);
}
.scroll-rail__node {
  position: relative; display: flex; align-items: center;
  width: 12px;                           /* dots only — labels are absolute */
  text-decoration: none; cursor: pointer;
}
.scroll-rail__dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: #14151a; border: 2px solid rgba(245,245,240,0.3);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
/* label floats to the LEFT of the dot so the rail itself stays a thin column
   tucked in the gutter and never reserves width over page content */
.scroll-rail__lbl {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white-dim); opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.scroll-rail:hover .scroll-rail__lbl { opacity: 0.85; transform: translateY(-50%); }
.scroll-rail__node.is-passed .scroll-rail__dot { border-color: var(--accent); }
.scroll-rail__node.is-active .scroll-rail__dot {
  background: var(--accent); border-color: var(--accent); transform: scale(1.25);
  box-shadow: 0 0 12px rgba(216,196,138,0.55);
}
.scroll-rail__node.is-active .scroll-rail__lbl { opacity: 1; transform: translateY(-50%); color: var(--accent); }
@media (min-width: 1024px) { .scroll-rail { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-rail, .scroll-rail__fill, .scroll-rail__dot, .scroll-rail__lbl { transition: none; }
}
.story-chapter__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.5vw, 88px); align-items: center;
}
.story-chapter--reverse .story-chapter__media { order: 2; }
.story-chapter__media {
  position: relative; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--white-faint);
  box-shadow: 0 30px 60px rgba(0,0,0,0.42);
}
.story-chapter__media img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  filter: var(--photo-filter); transform: scale(1.02);
  transition: filter 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}
.story-chapter__media:hover img { filter: var(--photo-filter-hover); transform: scale(1.06); }
.story-chapter__year {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--accent); color: #1a1a17;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(13px, 1.5vw, 17px); letter-spacing: 0.14em;
  text-transform: uppercase; padding: 9px 18px;
}
.story-chapter__no, .story-chapter__eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.story-chapter__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 50px); font-weight: 900;
  line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase;
  margin-bottom: 24px; color: var(--white);
}
.story-chapter__p {
  font-size: 15.5px; line-height: 1.9; color: var(--white-dim);
  margin-bottom: 16px; max-width: 540px;
}
.story-chapter__p:last-child { margin-bottom: 0; }

/* — Heritage + pull-quote — */
.story-heritage {
  padding: var(--spacing-section) 0; text-align: center;
  border-top: 1px solid var(--white-faint);
}
.story-heritage__eyebrow { margin-bottom: 18px; }
.story-heritage__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px); font-weight: 900;
  line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--white); margin: 0 auto 30px; max-width: 16ch;
}
.story-heritage__p {
  font-size: 16px; line-height: 1.9; color: var(--white-dim);
  max-width: 760px; margin: 0 auto 18px;
}
.story-heritage__p--lead { color: var(--white); font-weight: 500; }
.story-quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.2vw, 56px); line-height: 1.12;
  letter-spacing: 0.01em; color: var(--accent);
  margin: 40px auto 0; max-width: 18ch; border: none; padding: 0;
}

/* — The dilemma / versus — */
.story-dilemma { padding: var(--spacing-section) 0; background: var(--dark-2); }
.story-dilemma__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.story-dilemma__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px); font-weight: 900;
  line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--white); margin: 0 0 18px;
}
.story-dilemma__intro { font-size: 16px; line-height: 1.8; color: var(--white-dim); }
.story-versus {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: clamp(18px, 3vw, 40px);
  max-width: 980px; margin: 0 auto;
}
.vs-card {
  position: relative; overflow: hidden; padding: clamp(32px, 4vw, 48px);
  border: 1px solid var(--white-faint); border-radius: 4px;
  background: var(--dark); display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--card-inlay);
}
.vs-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.vs-card--carbon::before { background: linear-gradient(180deg, #4a4f55, #1d2024); }
.vs-card--metal::before { background: linear-gradient(180deg, #e8e8ea, #9a9ca0); }
.vs-card__lbl {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--white);
}
.vs-card__desc { font-size: 15px; line-height: 1.8; color: var(--white-dim); }
.story-versus__vs {
  align-self: center; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0.08em;
  color: var(--accent); padding: 0 4px;
}
.story-dilemma__q { text-align: center; margin-top: clamp(44px, 5.5vw, 72px); }
.story-dilemma__qmain {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 5vw, 64px); line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--white);
  margin-bottom: 18px;
}
.story-dilemma__qsub {
  font-size: 16px; line-height: 1.8; color: var(--white-dim);
  max-width: 640px; margin: 0 auto;
}

/* — Breakthrough (Chapter 03) — */
.story-breakthrough {
  padding: var(--spacing-section) 0;
  border-top: 1px solid var(--white-faint);
}
.story-breakthrough__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.5vw, 88px); align-items: center;
}
.story-breakthrough__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px); font-weight: 900;
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--white); margin: 0 0 12px;
}
.story-breakthrough__sub {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(15px, 1.8vw, 21px); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 24px;
}
.story-breakthrough__p {
  font-size: 16px; line-height: 1.9; color: var(--white-dim); max-width: 540px;
}
/* Same framed-photo treatment as the chapter media, kept at the image's native
   1:1 ratio: it zooms slightly on hover, just like every other photo on the page. */
.story-breakthrough__media {
  position: relative; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--white-faint);
  box-shadow: 0 30px 60px rgba(0,0,0,0.42);
}
.story-breakthrough__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1 / 1; object-fit: cover;
  /* This is a rendered illustration, not a low-key photo, so it gets a lighter
     brightness than --photo-filter (0.6) to lift its grey studio background. */
  filter: grayscale(0.35) contrast(1.14) brightness(1.2) saturate(0.7); transform: scale(1.02);
  transition: filter 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}
.story-breakthrough__media:hover img { filter: grayscale(0.15) contrast(1.16) brightness(1.32) saturate(0.95); transform: scale(1.06); }

/* — Closing — */
.story-close {
  padding: clamp(80px, 11vw, 150px) 0; text-align: center;
  background: var(--dark-2); border-top: 1px solid var(--white-faint);
}
.story-close__eyebrow { margin-bottom: 22px; }
.story-close__p {
  font-size: 17px; line-height: 1.95; color: var(--white-dim);
  max-width: 760px; margin: 0 auto 44px;
}
.story-close__final {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(21px, 3.6vw, 46px); line-height: 1.2;
  letter-spacing: 0.01em; color: var(--white); margin: 0 auto;
  max-width: none; word-break: keep-all; text-wrap: balance;
}

/* — Stats: 4-up variant — */
.story-stats__row--four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .story-stats__row--four { grid-template-columns: repeat(2, 1fr); }
  .story-stats__row--four .story-stat:nth-child(2) { border-right: none; }
  .story-stats__row--four .story-stat:nth-child(1),
  .story-stats__row--four .story-stat:nth-child(2) { border-bottom: 1px solid var(--white-faint); }
}
@media (max-width: 760px) {
  .story-chapter__inner { grid-template-columns: 1fr; gap: 30px; }
  .story-chapter--reverse .story-chapter__media { order: 0; }
  .story-breakthrough__inner { grid-template-columns: 1fr; gap: 36px; }
  .story-versus { grid-template-columns: 1fr; gap: 16px; }
  .story-versus__vs { padding: 6px 0; }
  .story-stats__row--four { grid-template-columns: 1fr; }
  .story-stats__row--four .story-stat:nth-child(2) { border-right: none; }
  .story-stats__row--four .story-stat { border-right: none; border-bottom: 1px solid var(--white-faint); }
  .story-stats__row--four .story-stat:last-child { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero__scroll { animation: none; }
}

/* ── CMS PRODUCT FILM ── */
.cms-film {
  padding: var(--spacing-section) 0;
  background: var(--dark);
}
.cms-film__head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}
.cms-film__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 14px 0 0;
  text-wrap: balance;
}
.cms-film__sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--white-dim);
  margin: 18px auto 0;
  max-width: 560px;
  text-wrap: balance;
}
.cms-film__player {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--white-faint);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  background: #000;
}
.cms-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.cms-film__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  border: 0;
  cursor: pointer;
  color: var(--white);
  background:
    radial-gradient(120% 120% at 50% 35%, rgba(12,12,15,0.55) 0%, rgba(8,8,10,0.88) 100%),
    url('company-front-door.webp') center 80% / cover no-repeat,
    #0a0a0c;
  transition: background-color 0.4s var(--ease-out);
}
.cms-film__poster[hidden] { display: none; }
.cms-film__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  color: var(--dark);
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
  transition: transform 0.35s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.cms-film__play svg { margin-left: 4px; }
.cms-film__cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}
.cms-film__len {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  background: rgba(0,0,0,0.45);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.cms-film__poster:hover {
  background:
    radial-gradient(120% 120% at 50% 35%, rgba(12,12,15,0.40) 0%, rgba(8,8,10,0.78) 100%),
    url('company-front-door.webp') center 80% / cover no-repeat,
    #0a0a0c;
}
.cms-film__poster:hover .cms-film__play {
  transform: scale(1.07);
  box-shadow: 0 0 0 14px var(--accent-soft);
}
.cms-film__poster:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
@media (max-width: 600px) {
  .cms-film__play { width: 68px; height: 68px; }
  .cms-film__play svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cms-film__poster, .cms-film__play { transition: none; }
}

/* ── OVERVIEW ── */
.overview {
  padding: 120px 0 80px;
  background: var(--dark);
}
.overview .container { margin-bottom: 64px; }
.section-eyebrow {
  /* inline-flex so the leading hairline + text travel as one unit and stay
     correctly placed in BOTH left-aligned (banners, story intros) and centered
     (material comparison, product intro, CTA) contexts via the parent text-align. */
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.section-eyebrow::before {
  content: ""; flex: none; width: 26px; height: 1px;
  background: var(--accent-line);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900; line-height: 1.0;
  letter-spacing: 0; text-transform: uppercase;
  margin-bottom: 24px;
}
.section-body {
  font-size: 16px; line-height: 1.7;
  color: var(--white-dim); max-width: 680px;
}
/* ── TWO-FAMILY SPLIT (Wood / Iron) ── */
.families {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.family {
  display: flex; flex-direction: column;
  padding: 42px 42px 38px;
  border: 1px solid var(--white-faint);
  border-top-width: 3px;
  border-radius: 12px;
  box-shadow: var(--card-inlay);
  text-decoration: none; color: var(--white);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.family:hover { transform: translateY(-4px); }
.family--wood {
  border-top-color: var(--pro);
  background: linear-gradient(160deg, var(--pro-glow), transparent 65%);
}
.family--wood:hover { border-color: var(--pro); box-shadow: var(--card-inlay), 0 18px 48px rgba(74,122,232,0.16); }
.family--iron {
  border-top-color: var(--iron);
  background: linear-gradient(160deg, var(--iron-glow), transparent 65%);
}
.family--iron:hover { border-color: var(--iron); box-shadow: var(--card-inlay), 0 18px 48px rgba(195,202,208,0.14); }

.family__for {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; margin-bottom: 12px;
}
.family--wood .family__for { color: var(--pro); }
.family--iron .family__for { color: var(--iron); }
.family__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px;
}
.family--wood .family__name { color: var(--pro); }
.family--iron .family__name { color: var(--iron); }
.family__tagline {
  font-size: 14.5px; line-height: 1.75; color: var(--white-dim);
  margin-bottom: 26px; flex: 1;
}
.family__members {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-top: 24px; margin-bottom: 26px;
  border-top: 1px solid var(--white-faint);
}
.family__members--stats { gap: 32px; }
.family__chip {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 100px; border: 1px solid currentColor;
}
.family__chip--lite { color: var(--lite); }
.family__chip--pro  { color: var(--pro);  }
.family__chip--tour { color: var(--tour-tag); }
.family__stat { display: flex; flex-direction: column; }
.family__stat strong {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 900; line-height: 1; color: var(--iron); white-space: nowrap;
}
.family__stat em {
  font-style: normal; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--white-faint); margin-top: 8px;
}
.family__cta {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px;
}
.family--wood .family__cta { color: var(--pro); }
.family--iron .family__cta { color: var(--iron); }
.family__cta-arrow { transition: transform 0.25s var(--ease-out); }
.family:hover .family__cta-arrow { transform: translateX(5px); }

@media (max-width: 760px) {
  .families { grid-template-columns: 1fr; gap: 16px; }
  .family { padding: 32px 28px 30px; }
  .family__members--stats { gap: 22px; }
}

/* ── PRODUCT SECTIONS ── */
.product-section { padding: var(--spacing-section) 0; }
.product-section--lite { background: var(--black); }
.product-section--pro  { background: var(--dark);  }
.product-section--tour { background: var(--dark-2); }
.product-section--iron { background: var(--dark-3); }

.product-section__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.product-section__inner--reverse { direction: rtl; }
.product-section__inner--reverse > * { direction: ltr; }

.product-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 2px;
  margin-bottom: 24px;
}
.product-label--lite { background: var(--lite-glow);     color: var(--lite);     border: 1px solid rgba(232,92,26,0.4);  }
.product-label--pro  { background: var(--pro-glow);      color: var(--pro);      border: 1px solid rgba(74,122,232,0.4); }
.product-label--tour { background: var(--tour-tag-glow); color: var(--tour-tag); border: 1px solid rgba(70,76,86,0.55); }
.product-label--iron { background: var(--iron-glow);     color: var(--iron);     border: 1px solid rgba(195,202,208,0.4); }

.product-title {
  font-family: var(--font-display);
  /* Floor lowered 48->34px: the longest single word ("PENETRATION.") is one
     unbreakable token; at 48px in Archivo (a normal-width face, unlike the old
     condensed display font) it is ~409px and overflows the ~311px mobile column,
     forcing the layout viewport wider (page renders zoomed-out on phones).
     34px keeps that word ~290px so it fits. 6vw dominates above ~800px, so
     desktop sizing is unchanged. */
  font-size: clamp(34px, 6vw, 80px);
  font-weight: 900; line-height: 0.9;
  text-transform: uppercase; letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.product-body {
  font-size: 15px; line-height: 1.8;
  color: var(--white-dim); margin-bottom: 32px; max-width: 480px;
}
.product-features {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
}
.product-features li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--white-dim);
}
.feature-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.feature-dot--lite { background: var(--lite);     box-shadow: 0 0 8px var(--lite);     }
.feature-dot--pro  { background: var(--pro);      box-shadow: 0 0 8px var(--pro);      }
.feature-dot--tour { background: var(--tour-tag); box-shadow: 0 0 8px var(--tour-tag); }
.feature-dot--iron { background: var(--iron);     box-shadow: 0 0 8px var(--iron);     }

.product-section__visual {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.shaft-graphic {
  position: relative; width: 100%; max-width: 420px;
  height: 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 36px;
  perspective: 1200px;
}
/* The 3D metallic cylinder */
.shaft-graphic__bar {
  position: relative;
  width: 92%; height: 30px; border-radius: 30px;
  transform: rotate(-15deg) rotateX(8deg);
  transform-style: preserve-3d;
  /* metallic roundness: dark top/bottom edges, bright specular core */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(255,255,255,0.10) 12%,
      var(--shaft-tint, #888) 42%,
      var(--shaft-core, #ddd) 50%,
      var(--shaft-tint, #888) 58%,
      rgba(0,0,0,0.30) 86%,
      rgba(0,0,0,0.65) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 18px 40px rgba(0,0,0,0.55),
    0 0 60px var(--shaft-shadow, rgba(255,255,255,0.18));
  overflow: hidden;
}
/* moving specular shimmer */
.shaft-graphic__bar::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.55) 52%, transparent 62%, transparent 100%);
  transform: translateX(-120%);
  animation: shaft-shimmer 5.5s var(--ease-out) infinite;
}
/* fading reflection beneath the shaft */
.shaft-graphic__bar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 105%;
  height: 100%; border-radius: 30px;
  background: inherit; opacity: 0.22;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 70%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 70%);
  filter: blur(1px); pointer-events: none;
}
@keyframes shaft-shimmer {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.shaft-graphic--lite .shaft-graphic__bar {
  --shaft-tint: #b8521f; --shaft-core: #ff8a4a; --shaft-shadow: rgba(232,92,26,0.45);
}
.shaft-graphic--pro .shaft-graphic__bar {
  --shaft-tint: #2f4f96; --shaft-core: #7aa0f0; --shaft-shadow: rgba(74,122,232,0.45);
}
.shaft-graphic--iron .shaft-graphic__bar {
  --shaft-tint: #8b9299; --shaft-core: #eef2f5; --shaft-shadow: rgba(195,202,208,0.4);
}
.shaft-graphic--tour .shaft-graphic__bar {
  --shaft-tint: #2f343b; --shaft-core: #8b929b; --shaft-shadow: rgba(45,50,58,0.5);
}
.shaft-graphic__label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--white-dim);
}

.stat-blocks { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; width: 100%; max-width: 360px; }
.stat-block {
  background: var(--dark-3);
  padding: 24px 16px; text-align: center;
}
.stat-block__value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 6px;
}
.product-section--lite .stat-block__value { color: var(--lite);     }
.product-section--pro  .stat-block__value { color: var(--pro);      }
.product-section--tour .stat-block__value { color: var(--tour-tag); }
.product-section--iron .stat-block__value { color: var(--iron);     }
.stat-block__label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--white-dim);
}

/* ── PRODUCT PAGE HERO (Driver / Iron) ── */
.product-hero {
  position: relative; overflow: hidden;
  padding: clamp(120px, 18vh, 200px) 0 clamp(72px, 10vh, 120px);
  background: var(--black);
}
.product-hero--wood { background: radial-gradient(120% 110% at 75% 30%, rgba(74,122,232,0.10), transparent 60%), var(--black); }
.product-hero--iron { background: radial-gradient(120% 110% at 75% 30%, rgba(195,202,208,0.10), transparent 60%), var(--black); }
.product-hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.product-hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 150px);
  font-weight: 900; line-height: 0.85;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 18px 0 24px;
}
.product-hero__sub {
  font-size: 16px; line-height: 1.7; color: var(--white-dim);
  max-width: 440px; margin-bottom: 32px;
}
.product-hero__chips { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; }
.product-hero__chips--stats { gap: 14px 40px; }
.product-hero__visual { display: flex; align-items: center; justify-content: center; }
.product-hero__img {
  width: 100%; max-width: 560px; height: auto; display: block;
  transform: rotate(-8deg);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}

/* ── POSITIONING INTRO ── */
.product-intro {
  padding: clamp(64px, 9vw, 110px) 0;
  background: var(--dark); border-top: 1px solid var(--white-faint);
}
.product-intro__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.product-intro__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 16px 0 24px;
}
.product-intro__body {
  font-size: 16px; line-height: 1.8; color: var(--white-dim);
  max-width: 680px; margin: 0 auto;
}

/* ── BALL-FLIGHT VISUALIZER (driver) ── */
.flightsim {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--dark-2); border-top: 1px solid var(--white-faint);
}
.flightsim__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.flightsim__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900; line-height: 0.96; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 12px 0 16px;
}
.flightsim__hint { font-size: 15px; line-height: 1.6; color: var(--white-dim); }
.flightsim__panel { max-width: 820px; margin: 0 auto; }
.flightsim__controls {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px;
}
.flightsim__btn {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 40px; cursor: pointer;
  color: var(--white-dim); background: rgba(245,245,240,0.04);
  border: 1px solid rgba(245,245,240,0.16);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.flightsim__btn:hover { color: var(--white); }
.flightsim__btn--all.is-active   { color: #0a0a0a; background: var(--white); border-color: var(--white); }
.flightsim__btn--lite.is-active  { color: var(--lite); border-color: var(--lite); background: var(--lite-glow); }
.flightsim__btn--pro.is-active   { color: var(--pro);  border-color: var(--pro);  background: var(--pro-glow); }
.flightsim__btn--tour.is-active  { color: #cdd3da; border-color: var(--tour-tag); background: var(--tour-tag-glow); }

.flightsim__chart {
  position: relative;
  background: linear-gradient(180deg, #0c0d11 0%, #08090b 100%);
  border: 1px solid var(--white-faint); border-radius: var(--radius-lg);
  padding: 18px;
}
.flightsim__svg { display: block; width: 100%; height: auto; }
.flightsim__ground { stroke: rgba(245,245,240,0.18); stroke-width: 1; }
.flightsim__tee line { stroke: rgba(245,245,240,0.4); stroke-width: 2; stroke-linecap: round; }
.flightsim__arc {
  fill: none; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: opacity 0.35s var(--ease-out), stroke-width 0.35s var(--ease-out);
}
.flightsim__arc--lite { stroke: var(--lite); }
.flightsim__arc--pro  { stroke: var(--pro); }
.flightsim__arc--tour { stroke: #aab0b8; }
.flightsim__ball { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,0.7)); }
/* focus state: chosen arc bright, others dimmed */
.flightsim__chart.is-focused .flightsim__arc { opacity: 0.16; }
.flightsim__chart.is-focused .flightsim__arc.is-active { opacity: 1; stroke-width: 4; }
.flightsim__tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-top: 14px;
}
.flightsim__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-dim);
  transition: opacity 0.3s var(--ease-out);
}
.flightsim__tag i { width: 14px; height: 3px; border-radius: 2px; }
.flightsim__tag--lite i { background: var(--lite); }
.flightsim__tag--pro  i { background: var(--pro); }
.flightsim__tag--tour i { background: #aab0b8; }
.flightsim__chart.is-focused .flightsim__tag { opacity: 0.3; }
.flightsim__chart.is-focused .flightsim__tag.is-active { opacity: 1; }
.flightsim__note {
  text-align: center; margin-top: 16px;
  font-size: 12px; color: rgba(245,245,240,0.4); letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .flightsim__arc { transition: none; }
}

/* ── COMPARE-AT-A-GLANCE ── */
.compare {
  padding: var(--spacing-section) 0;
  background: var(--black); border-top: 1px solid var(--white-faint);
}
.compare__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 12px 0 40px;
}
.compare-table { width: 100%; }
.compare-table th[scope="row"] { color: var(--white-dim); }
.compare-table td { color: var(--white); font-weight: 600; }
.compare-table th.compare-table__model { font-size: 13px; letter-spacing: 0.18em; }
.compare-table th.compare-table__model--lite { color: var(--lite); }
.compare-table th.compare-table__model--pro  { color: var(--pro);  }
.compare-table th.compare-table__model--tour { color: var(--tour-tag); }

/* Mobile per-model cards — hidden on desktop, shown ≤640px (see media query) */
.compare-cards { display: none; }
.compare-card {
  background: var(--dark-3); border-radius: 2px;
  padding: 16px 18px 12px; margin-bottom: 12px;
  border-left: 3px solid transparent;
  box-shadow: var(--card-inlay);
}
.compare-card--lite { border-left-color: var(--lite); }
.compare-card--pro  { border-left-color: var(--pro); }
.compare-card--tour { border-left-color: var(--tour-tag); }
.compare-card__model {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--white-faint);
}
.compare-card--lite .compare-card__model { color: var(--lite); }
.compare-card--pro  .compare-card__model { color: var(--pro); }
.compare-card--tour .compare-card__model { color: var(--tour-tag); }
.compare-card__specs { margin: 0; }
.compare-card__specs > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(245,245,240,0.05);
}
.compare-card__specs > div:last-child { border-bottom: none; }
.compare-card__specs dt {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(245,245,240,0.4);
}
.compare-card__specs dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--white); }

/* ── IRON FITTING GUIDE (fitguide) ── */
.fitguide { padding: var(--spacing-section) 0; }
.fitguide__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 12px 0 18px; text-wrap: balance;
}
/* zh「尋找最適合你的桿身」(9 glyphs) needs ≤31px to stay whole on one line
   in the 300px column at 375 — the 34px floor splits 適合 mid-word. */
html[lang^="zh"] .fitguide__title {
  font-size: clamp(31px, 5vw, 60px);
}
.fitguide__lead { max-width: 620px; color: var(--white-dim); line-height: 1.7; margin: 0 0 44px; }
.fitguide__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fitguide__card {
  background: var(--dark-2);
  border: 1px solid var(--white-faint);
  border-top: 2px solid var(--iron);
  border-radius: 2px; padding: 28px 26px;
  box-shadow: var(--card-inlay);
}
.fitguide__profile {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 0 0 4px;
}
.fitguide__speed {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--iron); margin: 0 0 18px;
}
.fitguide__specs { margin: 0; }
.fitguide__specs > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--white-faint);
}
.fitguide__specs > div:last-child { border-bottom: none; }
.fitguide__specs dt {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245,245,240,0.45);
}
.fitguide__specs dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--white); }
.fitguide__note { margin: 28px 0 0; font-size: 13px; color: var(--white-dim); font-style: italic; }
@media (max-width: 760px) { .fitguide__grid { grid-template-columns: 1fr; } }

/* per-model accents for driver find-your-fit cards */
.fitguide__card--lite { border-top-color: var(--lite); }
.fitguide__card--lite .fitguide__speed,
.fitguide__card--lite .fitguide__profile { color: var(--lite); }
.fitguide__card--pro { border-top-color: var(--pro); }
.fitguide__card--pro .fitguide__speed,
.fitguide__card--pro .fitguide__profile { color: var(--pro); }
.fitguide__card--tour { border-top-color: var(--tour-tag); }
.fitguide__card--tour .fitguide__speed,
.fitguide__card--tour .fitguide__profile { color: var(--tour-tag); }

/* ── FITTING PAGE — driver / iron division headers ── */
.fitsplit {
  padding: var(--spacing-section) 0 0;
}
.fitsplit__kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.fitsplit__title {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  padding-bottom: 18px;
}
.fitsplit__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--accent);
}
.fitsplit__lead { max-width: 620px; color: var(--white-dim); line-height: 1.7; margin: 0; }
.fitsplit--iron .fitsplit__kicker { color: var(--iron); }
.fitsplit--iron .fitsplit__title::after { background: var(--iron); }
/* compare/fitguide follow a division header directly — drop the stray top rule */
.fitsplit + .compare { border-top: none; }

/* ── WHERE TO BUY — coming soon ── */
.wtb {
  min-height: 72vh; min-height: 72svh;
  display: flex; align-items: center;
  padding: clamp(140px, 18vh, 220px) 0 var(--spacing-section);
}
.wtb__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.wtb__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 14px 0 22px;
}
/* ZH only: the title carries an explicit <br> for its two lines. The container is
   .container (32px side padding) so the real usable width is ~576px at desktop, and
   the reveal animation ends on clip-path: inset(0) which CLIPS any horizontal
   overflow. The 6-char line 即將全面啟動 measures ~6.12px per 1px of font, so it must
   stay under 576px: cap the size at 90px (→ ~550px, ~26px breathing room). No
   nowrap — if a very narrow screen still can't fit, it wraps gracefully instead of
   clipping the last glyph. English keeps the larger default size. */
html[lang^="zh"] .wtb__title { font-size: clamp(48px, 9vw, 90px); }
.wtb__body { color: var(--white-dim); line-height: 1.8; margin: 0 auto 32px; }

/* ── MATERIAL COMPARISON (1 + 1 = Carbon Metal) ── */
.matcmp {
  padding: var(--spacing-section) 0;
  background: var(--black); border-top: 1px solid var(--white-faint);
}
.matcmp__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.matcmp__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 900; line-height: 0.96; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 12px 0 18px;
}
.matcmp__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.75;
  color: var(--white-dim); max-width: 640px; margin: 0 auto;
}
/* Generic keep-together helper for i18n values: CJK lines can break inside
   a compound word (e.g. 碳纖維合金 → 碳纖維合/金); wrap the word in this
   span so narrow viewports break before it instead of through it. */
.u-nobr { white-space: nowrap; }

/* Mobile-only line break inside a title: the break applies on phones (clean
   wrap at the comma/phrase), but collapses to one line on tablet/desktop where
   the title fits. Used in zh i18n values where the EN keeps a hard <br>. */
@media (min-width: 768px) { br.br-m { display: none; } }

/* Two source materials, with a + between */
.matcmp__flow {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: clamp(16px, 2.4vw, 32px);
}
.matcmp__col {
  position: relative; overflow: hidden;
  border: 1px solid var(--white-faint);
  border-radius: var(--radius-lg); padding: 34px 30px 28px;
  display: flex; flex-direction: column;
}
.matcmp__col::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
}
/* ── CARBON FIBER = deep, glossy black panel (the darkest block) ── */
.matcmp__col--carbon {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(154,161,171,0.07), transparent 55%),
    linear-gradient(160deg, #050507 0%, #121217 100%);
  border-color: rgba(245,245,240,0.09);
}
.matcmp__col--carbon::before { background: linear-gradient(90deg, #141418, #9aa1ab 50%, #141418); }

/* ── STEEL = bright brushed-silver plate (light block for maximum contrast) ── */
.matcmp__col--steel {
  background:
    linear-gradient(160deg, #d7dbe0 0%, #b3bac1 54%, #969ea7 100%);
  border-color: rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 18px 40px rgba(0,0,0,0.34);
}
.matcmp__col--steel::before  { background: linear-gradient(90deg, #9098a0, #2f343b 50%, #9098a0); }
.matcmp__kicker {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.matcmp__col--carbon .matcmp__kicker { color: #9aa1ab; }   /* graphite sheen */
.matcmp__col--steel  .matcmp__kicker { color: #5a626b; }   /* dark steel on silver */
/* Steel plate carries dark text for legibility on the light surface */
.matcmp__col--steel .matcmp__name { color: #15181c; }
.matcmp__col--steel .matcmp__ph   { color: #1b1e23; }
.matcmp__col--steel .matcmp__pb   { color: rgba(18,20,24,0.7); }
.matcmp__col--steel .matcmp__pros li { border-bottom-color: rgba(18,20,24,0.16); }
.matcmp__col--steel .matcmp__con {
  color: rgba(18,20,24,0.62); border-top-color: rgba(18,20,24,0.26);
}
.matcmp__name {
  font-family: var(--font-display); font-size: 27px; font-weight: 800;
  letter-spacing: 0.01em; color: var(--white); margin: 4px 0 22px;
}
.matcmp__pros { list-style: none; margin: 0; padding: 0; flex: 1; }
.matcmp__pros li {
  position: relative; padding: 0 0 14px 30px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(245,245,240,0.07);
}
.matcmp__pros li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.matcmp__pros li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(245,245,240,0.08);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
}
.matcmp__col--carbon .matcmp__pros li::before { background: #9aa1ab; }
.matcmp__col--steel  .matcmp__pros li::before { background: #3a4754; } /* dark steel on silver */
.matcmp__ph {
  display: block; font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: 0.03em; color: var(--white);
}
.matcmp__pb {
  display: block; font-family: var(--font-body);
  font-size: 13px; line-height: 1.5; color: var(--white-dim); margin-top: 2px;
}
.matcmp__con {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px dashed rgba(245,245,240,0.16);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  color: rgba(245,245,240,0.42); font-style: italic;
}

/* Operators — circular connector chips */
.matcmp__op {
  align-self: center; justify-self: center;
  display: flex; align-items: center; justify-content: center;
  width: clamp(46px, 4vw, 58px); height: clamp(46px, 4vw, 58px);
  border-radius: 50%;
  border: 1px solid rgba(245,245,240,0.18);
  background: rgba(245,245,240,0.04);
  backdrop-filter: blur(4px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3vw, 34px);
  color: rgba(245,245,240,0.78); line-height: 0; user-select: none;
}
/* The "=" leads into the result, so it carries the champagne accent
   and a vertical flow line bridging the source row to the result card. */
.matcmp__join {
  position: relative; display: flex; justify-content: center;
  margin: 30px 0;
}
.matcmp__join::before,
.matcmp__join::after {
  content: ''; position: absolute; left: 50%; width: 1px;
  transform: translateX(-50%); pointer-events: none;
}
.matcmp__join::before {
  top: -30px; height: 30px;
  background: linear-gradient(to bottom, rgba(245,245,240,0), rgba(245,245,240,0.28));
}
.matcmp__join::after {
  bottom: -30px; height: 30px;
  background: linear-gradient(to bottom, rgba(231,214,166,0.5), rgba(231,214,166,0));
}
.matcmp__op--eq {
  font-size: clamp(28px, 3vw, 36px);
  border-color: rgba(214,208,190,0.5);
  background: rgba(214,208,190,0.09);
  color: #e7d6a6;
  box-shadow: 0 0 26px rgba(214,208,190,0.18);
}

/* Result — the synthesis, the premium "winner" block */
.matcmp__result {
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius-lg) + 4px);
  padding: clamp(40px, 5vw, 56px) clamp(28px, 5vw, 64px);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(231,214,166,0.16), transparent 58%),
    radial-gradient(100% 120% at 50% 100%, rgba(195,202,208,0.06), transparent 60%),
    linear-gradient(170deg, #1c1c20 0%, #131316 100%);
  border: none;
  box-shadow:
    0 0 50px rgba(214,208,190,0.10),
    0 34px 80px rgba(0,0,0,0.55);
  text-align: center;
}
/* Champagne-metallic gradient border ring (premium, machined edge) */
.matcmp__result::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(251,244,223,0.85) 0%, rgba(201,178,116,0.35) 24%,
    rgba(214,208,190,0.10) 50%, rgba(201,178,116,0.30) 76%,
    rgba(251,244,223,0.80) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Carbon Metal = the fusion: graphite-black → silver → champagne */
.matcmp__result::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, #141418 0%, #c3cad0 45%, #e7d6a6 78%, #c3cad0 100%);
}
.matcmp__kicker--result {
  color: #e7d6a6; display: inline-block; margin-bottom: 8px;
  letter-spacing: 0.28em;
}
.matcmp__result-name {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 48px); font-weight: 900;
  letter-spacing: 0.01em; text-transform: uppercase;
  margin-bottom: 16px; text-wrap: balance;
  background: linear-gradient(180deg, #fdf7e6 0%, #ead9ab 46%, #c9b274 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #ead9ab;
}
.matcmp__result-body {
  font-family: var(--font-body); font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.8; color: var(--white-dim);
  max-width: 720px; margin: 0 auto 26px;
}
.matcmp__tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.matcmp__tag {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--white);
  padding: 9px 18px 9px 36px; position: relative;
  border: 1px solid rgba(231,214,166,0.45); border-radius: 30px;
  background: rgba(231,214,166,0.07);
  white-space: nowrap; /* keep "Distance + Consistency" etc. on one line, never split at the + */
}
.matcmp__tag::before {
  content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; background: #e7d6a6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Scroll-reveal convergence: sources slide in from the sides, result rises.
   X-travel is 28px (was 34px): below ~1263px the .container hugs the viewport
   with only 32px side padding, so the settled cards sit flush at vw-32. A larger
   pre-reveal X-shift pokes past the viewport edge (34px -> a 2px transient
   horizontal scroll across the whole 721-1263px band, before the section
   reveals). 28px keeps the overhang inside the 32px padding at every width while
   the converge effect stays visually identical. Below 720px the swap to a
   Y-only rise (see media block) removes the X-shift entirely. */
.matcmp__col--carbon.u-reveal { transform: translate3d(-28px, 16px, 0); }
.matcmp__col--steel.u-reveal  { transform: translate3d(28px, 16px, 0); }
.matcmp__col--carbon.u-reveal.is-in,
.matcmp__col--steel.u-reveal.is-in { transform: none; }
.matcmp__result.u-reveal { transform: translate3d(0, 30px, 0) scale(0.975); }
.matcmp__result.u-reveal.is-in { transform: none; }

@media (max-width: 720px) {
  .matcmp__flow { grid-template-columns: 1fr; }
  .matcmp__op { margin: 6px 0; }
  .matcmp__join { margin: 16px 0; }
  /* On stacked layout, sources rise vertically rather than from the sides */
  .matcmp__col--carbon.u-reveal,
  .matcmp__col--steel.u-reveal { transform: translate3d(0, 22px, 0); }
}

/* ── DATA BAND (homepage) — material macro + hard specs + relative-stiffness curve ── */
.specband {
  position: relative; overflow: hidden;
  padding: var(--spacing-section) 0;
  background: linear-gradient(180deg, #0a0b0d 0%, #0d0e11 100%);
  border-top: 1px solid var(--white-faint);
}
/* carbon-metal material macro — subtle textural backdrop, faded so text stays clean */
.specband__tex {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('carbon-metal-prepreg.webp') center/cover no-repeat;
  opacity: 0.13;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 18%, transparent 76%);
          mask-image: radial-gradient(125% 100% at 50% 0%, #000 18%, transparent 76%);
}
.specband .container { position: relative; z-index: 1; }
.specband__head { text-align: center; margin-bottom: clamp(38px, 5vw, 62px); }
.specband__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px); font-weight: 900;
  letter-spacing: 0.01em; line-height: 0.98; color: var(--white); margin-top: 14px;
}
.specband__grid { display: grid; gap: clamp(30px, 5vw, 60px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .specband__grid { grid-template-columns: 0.82fr 1.18fr; } }

/* hard-data stats — scannable numbers, the "data control" appeal */
.specband__stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--white-faint); border: 1px solid var(--white-faint);
  border-radius: var(--radius-lg); overflow: hidden;
}
.specband__stat {
  background: rgba(11,12,15,0.72); padding: clamp(20px, 3vw, 30px) clamp(15px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: 9px;
}
.specband__val {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(23px, 3.2vw, 38px); letter-spacing: -0.01em;
  color: var(--white); line-height: 1; font-variant-numeric: tabular-nums;
}
.specband__val small { font-size: 0.48em; font-weight: 600; color: var(--accent); margin-left: 2px; }
.specband__lbl {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-dim);
}

/* weight × flex scatter — every wood + iron model, coloured by family */
.scatter {
  margin: 0; padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--white-faint); border-radius: var(--radius-lg);
  background: rgba(11,12,15,0.6); backdrop-filter: blur(3px);
}
.scatter__title { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.03em; color: var(--white-dim); margin-bottom: 14px; }
.scatter__svg { display: block; width: 100%; height: auto; overflow: visible; }
.scatter__grid { stroke: rgba(245,245,240,0.07); stroke-width: 1; }
.scatter__grid--v { stroke: rgba(245,245,240,0.045); }
.scatter__tick { fill: var(--white-dim); font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; }
.scatter__unit { fill: rgba(245,245,240,0.4); font-family: var(--font-body); font-size: 9px; }
.scatter__pt { opacity: 0.9; }
.scatter__pt--lite { fill: var(--lite); }
.scatter__pt--pro  { fill: var(--pro); }
.scatter__pt--tour { fill: var(--tour-tag); }
.scatter__pt--iron { fill: var(--iron); }
.scatter__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; border-top: 1px solid var(--white-faint); padding-top: 16px;
}
.scatter__legend { display: flex; flex-wrap: wrap; gap: 14px; }
.scatter__leg {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--white-dim);
}
.scatter__leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.scatter__leg--lite i { background: var(--lite); }
.scatter__leg--pro  i { background: var(--pro); }
.scatter__leg--tour i { background: var(--tour-tag); }
.scatter__leg--iron i { background: var(--iron); }
.scatter__cta {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  text-decoration: none; white-space: nowrap; transition: color 0.25s var(--ease-out);
}
.scatter__cta::after { content: ' \2192'; }
.scatter__cta:hover { color: var(--white); }

/* ── TRUST / VALIDATION BAND (homepage) ── */
.trust {
  padding: var(--spacing-section) 0;
  background: linear-gradient(180deg, #0a0a0c 0%, #0d0d10 100%);
  border-top: 1px solid var(--white-faint);
  border-bottom: 1px solid var(--white-faint);
}
.trust__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.trust__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 900; line-height: 1.0; letter-spacing: 0.01em;
  margin: 12px 0 18px;
}
.trust__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.75;
  color: var(--white-dim); max-width: 620px; margin: 0 auto;
}
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--white-faint); border-radius: 4px; overflow: hidden;
  background: rgba(245,245,240,0.015);
}
.trust__stat {
  padding: 40px 24px; text-align: center;
  border-right: 1px solid var(--white-faint);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.trust__stat:last-child { border-right: none; }
.trust__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 58px);
  font-weight: 900; line-height: 1; color: var(--white);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.trust__num--text { font-size: clamp(26px, 3vw, 44px); letter-spacing: 0.04em; }
.trust__unit { font-size: 0.5em; color: var(--accent); vertical-align: super; margin-left: 2px; }
.trust__lbl {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.45; color: var(--white-dim);
  letter-spacing: 0.02em; max-width: 16ch; text-wrap: balance;
}
.trust__foot { text-align: center; margin-top: 40px; }
.trust__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 4px; border-bottom: 1px solid rgba(216,196,138,0.4);
  transition: gap 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.trust__cta::after { content: '→'; transition: transform 0.3s var(--ease-out); }
.trust__cta:hover { gap: 13px; border-color: var(--accent); }
.trust__cta:hover::after { transform: translateX(3px); }
/* Reveal: stat cards rise (Y-only, no clip overhang) */
.trust__stat.u-reveal { transform: translate3d(0, 22px, 0); }
.trust__stat.u-reveal.is-in { transform: none; }

@media (max-width: 720px) {
  .trust__head { margin-bottom: 40px; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__stat { padding: 30px 16px; gap: 10px; }
  .trust__stat:nth-child(2) { border-right: none; }
  .trust__stat:nth-child(1),
  .trust__stat:nth-child(2) { border-bottom: 1px solid var(--white-faint); }
}

/* ── TECH CALLOUT + CTA BAND ── */
.cta-band {
  padding: var(--spacing-section) 0;
  background: var(--dark-2); border-top: 1px solid var(--white-faint);
}
.cta-band__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.cta-band__h {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900; line-height: 0.98; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 14px 0 18px;
}
.cta-band__p {
  font-size: 15px; line-height: 1.75; color: var(--white-dim);
  max-width: 440px; margin-bottom: 28px;
}
.cta-band__fit {
  padding-left: 64px; border-left: 1px solid var(--white-faint);
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 860px) {
  .product-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .product-hero__visual { order: -1; }
  .product-hero__img { max-width: 360px; transform: rotate(-6deg); }
  .cta-band__inner { grid-template-columns: 1fr; gap: 48px; }
  .cta-band__fit { padding-left: 0; border-left: none; padding-top: 48px; border-top: 1px solid var(--white-faint); }
}

/* ── HOME LINEUP-AT-A-GLANCE ── */
.lineup {
  padding: var(--spacing-section) 0;
  background: var(--black); border-top: 1px solid var(--white-faint);
}
.lineup__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.lineup__title {
  font-family: var(--font-display);
  /* EN title must hold its 2-line <br> split ("FOUR XFIBURST SHAFTS." /
     "ONE FOR EVERY SWING."). The longest line renders ~14.9px per 1px of
     font-size; dividing the container width by 16 keeps it on one line,
     and the 46px cap fits the 720px .lineup__head at desktop. */
  font-size: clamp(18px, calc((100vw - 64px) / 16), 46px);
  font-weight: 900; line-height: 0.92; text-transform: uppercase;
  letter-spacing: 0.02em; margin-top: 14px;
}
/* zh title is short — keep the original display scale */
html[lang^="zh"] .lineup__title { font-size: clamp(34px, 5vw, 60px); }
.lineup__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lineup-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px 24px 28px;
  background: var(--dark); border: 1px solid var(--white-faint);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.lineup-card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.lineup-card--lite::before { background: var(--lite);     }
.lineup-card--pro::before  { background: var(--pro);      }
.lineup-card--tour::before { background: var(--tour-tag); }
.lineup-card--iron::before { background: var(--iron);     }
.lineup-card:hover { transform: translateY(-6px); border-color: rgba(245,245,240,0.2); background: var(--dark-2); }
.lineup-card:hover::before { transform: scaleX(1); }
.lineup-card__label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.lineup-card--lite .lineup-card__label { color: var(--lite);     }
.lineup-card--pro  .lineup-card__label { color: var(--pro);      }
.lineup-card--tour .lineup-card__label { color: var(--tour-tag); }
.lineup-card--iron .lineup-card__label { color: var(--iron);     }
.lineup-card__tag { font-size: 13px; line-height: 1.55; color: var(--white-dim); min-height: 3.2em; text-wrap: balance; }
.lineup-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--white-faint);
}
.lineup-card__stat { display: flex; flex-direction: column; gap: 5px; }
.lineup-card__stat em {
  font-style: normal; font-family: var(--font-display);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-dim);
}
.lineup-card__stat strong { font-family: var(--font-display); font-size: 14px; font-weight: 900; }
.lineup-card__cta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white);
}
.lineup-card__arrow { transition: transform 0.3s var(--ease-out); }
.lineup-card:hover .lineup-card__arrow { transform: translateX(5px); }
@media (max-width: 900px) { .lineup__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lineup__grid { grid-template-columns: 1fr; } }
.lineup__foot { text-align: center; margin-top: clamp(40px, 5vw, 64px); }

/* ── CMS IRON — FULL-RANGE LAYOUT ── */
.iron-full__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.iron-full__head .product-body { max-width: 640px; margin: 0 auto; }

.iron-feats {
  list-style: none;
  /* 360px min keeps each EN feature line whole on desktop (longest item
     ≈350px at 14px) — 2×2 grid instead of 3+1; min() lets the single
     column shrink on phones instead of overflowing. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px 28px; max-width: 880px; margin: 0 auto 72px;
}
.iron-feats li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--white-dim);
}

.iron-spectrum { max-width: 860px; margin: 0 auto; }
.iron-spectrum__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-bottom: 28px; margin-bottom: 36px;
  border-bottom: 1px solid var(--white-faint);
}
.iron-spectrum__eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--iron); margin: 0;
}
.iron-spectrum__count { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.iron-spectrum__count-num {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 900; line-height: 1; color: var(--iron);
}
.iron-spectrum__count-lbl {
  font-size: 12px; letter-spacing: 0.04em; color: var(--white-dim);
}

.iron-spectrum__axis { margin-bottom: 34px; }
.iron-spectrum__axis-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.iron-spectrum__key {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white);
}
.iron-spectrum__range {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--iron);
}
.iron-spectrum__track {
  position: relative; height: 6px; border-radius: 3px;
  background: rgba(245,245,240,0.10); overflow: hidden;
}
.iron-spectrum__fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, rgba(195,202,208,0.30), var(--iron));
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.iron-spectrum.is-visible .iron-spectrum__fill { width: 100%; }
.iron-spectrum__fill--1 { transition-delay: 0.05s; }
.iron-spectrum__fill--2 { transition-delay: 0.18s; }
.iron-spectrum__fill--3 { transition-delay: 0.31s; }
.iron-spectrum__ticks {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; justify-content: space-between;
}
.iron-spectrum__ticks li {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--white-dim); position: relative; padding-top: 8px;
  flex: 1; text-align: center;
}
.iron-spectrum__ticks li:first-child { text-align: left; }
.iron-spectrum__ticks li:last-child { text-align: right; }
.iron-spectrum__ticks li::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 4px; background: var(--white-faint);
}
.iron-spectrum__ticks li:first-child::before { left: 0; transform: none; }
.iron-spectrum__ticks li:last-child::before { left: auto; right: 0; transform: none; }
.iron-spectrum__ticks--launch li { font-size: 10px; letter-spacing: 0.02em; }
.iron-spectrum__ends {
  display: flex; justify-content: space-between; margin-top: 6px;
}
.iron-spectrum__ends span {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white-faint);
}
.iron-spectrum__cap {
  text-align: center; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--white-faint);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--white);
}

.iron-matrix { max-width: 900px; margin: 72px auto 0; }
.iron-matrix .specs-table-wrapper { overflow-x: auto; }
.iron-matrix__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-top: 20px;
}
.iron-matrix__note { font-size: 12px; letter-spacing: 0.04em; color: var(--white-faint); }
.iron-matrix__link {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--iron); text-decoration: none;
  transition: opacity 0.2s var(--ease-out); white-space: nowrap;
}
.iron-matrix__link:hover { opacity: 0.7; }

/* ── FULL-SPECS CTA BUTTON ── */
.spec-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  color: var(--white);
  border: 1px solid var(--white-faint);
  border-radius: 100px;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.spec-cta__arrow { transition: transform 0.25s var(--ease-out); }
.spec-cta:hover { transform: translateY(-2px); }
.spec-cta:hover .spec-cta__arrow { transform: translateX(5px); }
.spec-cta--lite { color: var(--lite); border-color: rgba(232,92,26,0.4); }
.spec-cta--lite:hover { border-color: var(--lite); background: var(--lite-glow); }
.spec-cta--pro  { color: var(--pro);  border-color: rgba(74,122,232,0.4); }
.spec-cta--pro:hover  { border-color: var(--pro);  background: var(--pro-glow); }
.spec-cta--tour { color: var(--tour-tag); border-color: rgba(70,76,86,0.5); }
.spec-cta--tour:hover { border-color: var(--tour-tag); background: var(--tour-tag-glow); }
.spec-cta--iron { color: var(--iron); border-color: rgba(195,202,208,0.4); }
.spec-cta--iron:hover { border-color: var(--iron); background: var(--iron-glow); }
/* centered CTA below the iron fitting range */
.iron-spec-cta { text-align: center; margin-top: 56px; }
/* spacing when the CTA follows a product feature list */
.product-features + .spec-cta { margin-top: 32px; }

@media (max-width: 600px) {
  .iron-spectrum__head { gap: 10px; padding-bottom: 20px; margin-bottom: 28px; }
  .iron-spectrum__count-num { font-size: 32px; }
  .iron-spectrum__axis { margin-bottom: 28px; }
  .iron-spectrum__ticks li { font-size: 10px; }
  .iron-spectrum__ticks--launch li { font-size: 8px; }
}

/* ── SPECS TABS ── */
.specs-tabs {
  display: flex; gap: 0; margin-bottom: 32px;
  border-bottom: 1px solid var(--white-faint);
}
.specs-tab {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--white-dim);
  background: none; border: none; cursor: pointer;
  padding: 12px 28px; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.specs-tab:hover { color: var(--white); }
.specs-tab--active { color: var(--tour); border-bottom-color: var(--tour); }
/* Iron tab carries the CMS Iron silver accent when active */
.specs-tab[data-target="specs-iron"].specs-tab--active { color: var(--iron); border-bottom-color: var(--iron); }
.specs-panel--hidden { display: none; }

/* ── SPECS ── */
.specs {
  padding: var(--spacing-section) 0;
  background: var(--black);
  border-top: 1px solid var(--white-faint);
}
.specs .section-title { margin-bottom: 48px; }
.specs-table-wrapper { overflow-x: auto; }
.specs-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 14px; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.specs-table thead tr {
  border-bottom: 1px solid rgba(245,245,240,0.2);
}
.specs-table th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--white-dim);
  padding: 14px 20px; text-align: left;
}
.specs-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--white-faint);
  color: var(--white-dim); font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
/* zebra striping */
.specs-table tbody tr:nth-child(even) td { background: rgba(245,245,240,0.022); }
.row--lite td { border-left: 3px solid transparent; }
.row--lite:first-of-type td:first-child, .row--lite td:first-child { border-left: 3px solid var(--lite);     }
.row--pro td:first-child  { border-left: 3px solid var(--pro);      }
.row--tour td:first-child { border-left: 3px solid var(--tour-tag); }
.row--iron td:first-child { border-left: 3px solid var(--iron);     }

/* Row-hover applies to data tables only — NOT the compare table, which is
   highlighted by model column instead (see below). */
.specs-table:not(.compare-table) tbody tr:hover td { background: var(--dark-3); color: var(--white); }

/* Compare table — highlight the whole MODEL COLUMN the pointer is over
   (header + all cells) with a subtle wash of that model's own colour. */
.compare-table:has(:is(thead th, tbody td):nth-child(2):hover) :is(thead th:nth-child(2), tbody td:nth-child(2)) { background: rgba(232, 92, 26, 0.14);  color: var(--white); }
.compare-table:has(:is(thead th, tbody td):nth-child(3):hover) :is(thead th:nth-child(3), tbody td:nth-child(3)) { background: rgba(74, 122, 232, 0.16); color: var(--white); }
.compare-table:has(:is(thead th, tbody td):nth-child(4):hover) :is(thead th:nth-child(4), tbody td:nth-child(4)) { background: rgba(123, 132, 145, 0.20); color: var(--white); }

.model-tag {
  display: inline-block; padding: 3px 10px; border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
}
.model-tag--lite { background: var(--lite-glow);     color: var(--lite);     }
.model-tag--pro  { background: var(--pro-glow);      color: var(--pro);      }
.model-tag--tour { background: var(--tour-tag-glow); color: var(--tour-tag); }
.model-tag--iron { background: var(--iron-glow);     color: var(--iron);     }

/* ── SPEC-SHEET DOWNLOAD (shaft.html) ── */
.specs-print-only { display: none; }          /* shown only when printing */
.specs-actions { margin-top: 48px; text-align: center; }
.btn--specdl { letter-spacing: 0.16em; }
.btn--specdl::after {
  content: '↓'; margin-left: 10px; display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.btn--specdl:hover::after { transform: translateY(2px); }
.specs-actions__note {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--white-dim);
}

/* The branded spec sheet is generated in an isolated print iframe (see main.js
   "SPEC SHEET DOWNLOAD") for reliable, blank-proof output across browsers, so the
   page itself needs no @media print isolation — just keep the interactive
   download button off any manual Ctrl+P printout. */
@media print {
  .specs-actions { display: none !important; }
}

/* ── CONTACT SECTION ── */
.contact {
  padding: var(--spacing-section) 0;
  background: var(--dark);
  border-top: 1px solid var(--white-faint);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact__intro {
  font-size: 16px; line-height: 1.75;
  color: var(--white-dim);
  margin-bottom: 48px;
  max-width: 380px;
}
.contact__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 900; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 0.88;
  color: var(--white);
  margin: 14px 0 48px;
}
.contact__details { display: flex; flex-direction: column; gap: 28px; }
.contact__detail-lbl {
  display: block;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--lite);
  margin-bottom: 6px;
}
.contact__detail-val {
  font-size: 15px; line-height: 1.7;
  color: var(--white-dim); text-decoration: none;
  transition: color 0.2s var(--ease-out); display: block;
}
a.contact__detail-val:hover { color: var(--white); }

/* Contact Form */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--white-dim);
}
.contact-form__opt {
  font-family: var(--font-body); font-size: 11px;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: rgba(245,245,240,0.3);
}
.contact-form__input {
  background: rgba(245,245,240,0.04);
  border: 1px solid var(--white-faint);
  border-radius: 2px;
  padding: 13px 16px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--white); width: 100%;
  outline: none; -webkit-appearance: none;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.contact-form__input::placeholder { color: rgba(245,245,240,0.22); }
.contact-form__input:focus {
  border-color: rgba(232,92,26,0.55);
  background: rgba(245,245,240,0.06);
}
.contact-form__textarea { resize: vertical; min-height: 130px; }
.contact-form__btn {
  align-self: flex-start; cursor: pointer; border: none;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.contact-form__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.form-status {
  font-size: 13px; line-height: 1.6; min-height: 18px;
  transition: color 0.3s;
}
.form-status--success { color: #5dba72; }
.form-status--error   { color: var(--lite); }

/* ── FOOTER ── */
.footer {
  background: var(--dark-2);
  border-top: 1px solid var(--white-faint);
}
.footer__inner {
  padding: 72px 32px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 60px;
}
.footer__logo {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 8px;
}
.footer__tagline {
  font-size: 13px; color: var(--white-dim); font-style: italic;
}
.footer__social {
  display: flex; gap: 12px; margin-top: 20px;
}
.footer__social-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--white-faint); border-radius: 50%;
  color: var(--white-dim); text-decoration: none;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.footer__social-link:hover {
  color: var(--white);
  border-color: rgba(245,245,240,0.4);
}

/* Quick-links / explore columns */
.footer__nav {
  flex-shrink: 0;
  display: flex;
  gap: clamp(28px, 3vw, 52px);
}
.footer__nav-col { flex-shrink: 0; }
.footer__nav-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.footer__nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.footer__nav-link {
  position: relative;
  font-size: 13.5px; letter-spacing: 0.04em;
  color: var(--white-dim); text-decoration: none;
  transition: color 0.2s var(--ease-out), padding-left 0.25s var(--ease-out);
}
.footer__nav-link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--accent);
  transform: translateY(-50%);
  transition: width 0.25s var(--ease-out);
}
.footer__nav-link:hover {
  color: var(--white); padding-left: 16px;
}
.footer__nav-link:hover::before { width: 10px; }

@media (max-width: 640px) {
  .footer__nav { flex-wrap: wrap; gap: 30px 32px; }
  .footer__nav-col { flex: 1 1 40%; }
}

/* Contact block */
.footer__contact { flex-shrink: 0; }

.footer__contact-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}

.footer__contact-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 14px;
}

.footer__contact-phone {
  display: block;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--white); text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.2s var(--ease-out);
}
.footer__contact-phone:hover { color: var(--lite); }
.footer__contact-email {
  display: block;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--white-dim); text-decoration: none;
  margin-bottom: 22px;
  transition: color 0.2s var(--ease-out);
}
.footer__contact-email:hover { color: var(--white); }

.footer__contact-addr { font-style: normal; }

.footer__addr-en {
  font-size: 13px; line-height: 1.75;
  color: var(--white-dim); margin-bottom: 10px;
}

.footer__addr-zh {
  font-size: 14px; line-height: 1.6;
  color: var(--white-dim); margin-bottom: 10px;
  font-weight: 500;
}

.footer__addr-note {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245,245,240,0.28);
}

.footer__bottom {
  padding: 20px 32px;
  border-top: 1px solid var(--white-faint);
  text-align: center;
}
.footer__bottom p {
  font-size: 12px; letter-spacing: 0.1em; color: var(--white-dim);
  text-transform: uppercase;
}

/* ── RESPONSIVE (width) ── */

/* Compact desktop nav (901–1139px).
   The full-size bar (16px Archivo links + 20px logo) is wide — in English the
   5-link row is ~690px, so the centred link group collides with the left logo
   below ~1137px (the logo overflows its 1fr grid column and touches the first
   link). Stepping the links down to 14px / tighter tracking and the logo to
   16px shrinks the row to ~510px, which keeps a comfortable ≥24px logo↔links
   gap right down to the 901px hamburger breakpoint, in both EN and ZH.
   Below 901px even this compact row can't breathe in English, so the bar
   switches to the hamburger menu instead (see the max-width:900px block). */
@media (min-width: 901px) and (max-width: 1139px) {
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 14px; letter-spacing: 0.06em; }
  .nav__dropdown-trigger { font-size: 14px; letter-spacing: 0.06em; }
  .nav__logo-img { height: 16px; }
}

/* Hamburger menu — below 901px the desktop nav can't show a comfortable
   logo↔links gap (English 5-link row needs ~884px minimum even when compact),
   so hide the inline links and switch to the full-screen hamburger panel.
   This covers tablets and small laptops down through phones. */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__logo-img { height: 18px; }
  .nav__right { gap: 12px; }
  /* Language switch lives inside the hamburger menu; hide the standalone
     toggle in the bar (404 page's own toggle is unaffected). */
  .nav__right .nav__lang-toggle { display: none; }
}

/* Footer columns (brand · quick-links · contact) are all flex-shrink:0, so the
   row has a fixed natural width (~1005px in EN, ~890px ZH) and overflows the
   viewport below ~1069px. Stack it to a single column for the whole compact
   range — i.e. show the spread-out row only alongside the full-size nav
   (≥1140px), and stack everywhere narrower. Keeps the page free of any
   horizontal scrollbar through the 901–1139 compact-desktop band. */
@media (max-width: 1139px) {
  .footer__inner { flex-direction: column; gap: 32px; }
}

@media (max-width: 900px) {
  .hero__content { padding: 0 32px; }

  /* About responsive */
  .about__cols,
  .about__cmm-grid { grid-template-columns: 1fr; gap: 40px; }
  .about__col-r { padding-top: 0; }
  .about__kpi-row { grid-template-columns: 1fr 1fr; }
  .about-kpi:nth-child(2) { border-right: none; }
  .about-kpi:nth-child(3) { border-top: 1px solid var(--white-faint); border-right: 1px solid var(--white-faint); }
  .about-kpi:nth-child(4) { border-top: 1px solid var(--white-faint); }
  /* In the narrow 2-col mobile grid the cells are ~155px wide. Tighten the
     horizontal padding and drop the 4-col nowrap so the text KPIs wrap
     ("WORLD FIRST" -> two lines) and "AEROSPACE" fits one line; otherwise the
     nowrap text forces the row wider than the viewport (zoomed-out page). */
  .about-kpi { padding: 32px 16px; }
  .about-kpi__num--text { white-space: normal; font-size: 18px; }

  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .product-section__inner,
  .product-section__inner--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ── SPECS TABLE — intermediate widths (641–900px): tighten cells so
   6 columns fit container without horizontal scroll ── */
@media (max-width: 900px) and (min-width: 641px) {
  .specs-table { font-size: 12px; }
  .specs-table th { padding: 10px 10px; font-size: 10px; letter-spacing: 0.16em; }
  .specs-table td { padding: 11px 10px; }
}

/* ── SPECS TABLE — mobile card layout ── */
@media (max-width: 640px) {
  .specs-table-wrapper { overflow-x: visible; }
  .specs-table,
  .specs-table tbody { display: block; }
  .specs-table thead { display: none; }

  .specs-table tr {
    display: block;
    background: var(--dark-3);
    margin-bottom: 10px;
    border-radius: 2px;
    padding: 14px 16px 10px;
    border-left: 3px solid transparent;
  }
  .row--lite { border-left-color: var(--lite) !important; }
  .row--pro  { border-left-color: var(--pro) !important; }
  .row--tour { border-left-color: var(--tour-tag) !important; }

  /* Remove per-td left border (desktop only) */
  .specs-table td,
  .specs-table td:first-child,
  .row--lite td,
  .row--lite td:first-child { border-left: none !important; }

  /* Model tag — block header at top of card */
  .specs-table td.model-cell {
    display: block;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--white-faint);
  }

  /* All other cells — label : value rows */
  .specs-table td:not(.model-cell) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(245,245,240,0.05);
    font-size: 13px;
    color: var(--white);
    white-space: normal;
  }
  .specs-table td:last-child { border-bottom: none !important; }

  /* Auto-labels via nth-child */
  .specs-table td:nth-child(2)::before { content: 'Flex'; }
  .specs-table td:nth-child(3)::before { content: 'Weight'; }
  .specs-table td:nth-child(4)::before { content: 'Torque'; }
  .specs-table td:nth-child(5)::before { content: 'Kick Point'; }
  .specs-table td:nth-child(6)::before { content: 'Launch'; }
  /* iron matrix is 4 cols: Model / Flex / Weight / Launch */
  .iron-matrix .specs-table td:nth-child(4)::before { content: 'Launch'; }

  .specs-table td:not(.model-cell)::before {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: rgba(245,245,240,0.4);
  }

  .specs-table tbody tr:hover td { background: transparent; }

  /* Compare table → per-MODEL cards (override the generic per-row transform) */
  .compare-table { display: none !important; }
  .compare-cards { display: block; }
}

/* ── HERO — narrow mobile (≤480px) ── */
@media (max-width: 480px) {
  /* Vertically centre the wordmark block so the initial view reads balanced
     instead of top-heavy with a large empty void below. */
  .hero__center   { top: 50%; transform: translateY(-56%); }
  .hero__bottom   { gap: 14px; padding-bottom: 40px; }
  .hero__variants { gap: 12px; }
  .hero__variant-btn { padding: 8px 14px; letter-spacing: 0.14em; }
  /* Prevent letter-spaced sub from overflowing on 375px screens */
  .hero__sub { letter-spacing: 0.28em; font-size: clamp(11px, 3.2vw, 18px); }
}

/* ── RESPONSIVE (height) — zoom 125–150% protection ── */
@media (max-height: 620px) {
  /* Tighten hero spacing so text + bottom content don't touch */
  .hero__eyebrow  { margin-bottom: 16px; }
  .hero__sub      { margin-top: 20px; }
  .hero__bottom   { padding-bottom: 28px; gap: 12px; }
  /* Reduce expensive text-shadow blur so paint stays cheap when sections
     are forced to overlap during zoom-in */
  .hero__wordmark { text-shadow: 0 0 60px rgba(201,168,76,0.10); }
  /* Reduce section padding so pages scroll reasonably */
  .about__opener  { padding: 80px 0 60px; }
  .about__cmm     { padding: 72px 0; }
  .about__mission { padding: 60px 0; }
  .overview       { padding: 80px 0 56px; }
  .product-section { padding: 80px 0; }
  .specs          { padding: 80px 0; }
}

/* ── RESPONSIVE (height) — zoom 175–200% protection ── */
@media (max-height: 480px) {
  /* Further compress hero so nothing overlaps */
  .hero__center   { top: max(68px, 12%); }
  .hero__wordmark { font-size: clamp(70px, min(20vw, 22vh), 200px); }
  .hero__eyebrow  { margin-bottom: 10px; }
  .hero__sub      { margin-top: 12px; }
  .hero__bottom   { padding-bottom: 16px; gap: 8px; }
  .hero__tagline  { display: none; } /* hide tagline to prevent crowding */
  /* Collapse section padding further */
  .about__opener  { padding: 60px 0 40px; }
  .about__cmm     { padding: 48px 0; }
  .about__mission { padding: 40px 0; }
  .overview       { padding: 56px 0 40px; }
  .product-section { padding: 56px 0; }
  .specs          { padding: 56px 0; }
  .tech-intro__overlay { bottom: 48px; }
}

/* ── FLEX PROFILE DIAGRAM (driver) ── bend-curve comparison */
.flexprofile { max-width: 760px; margin: 0 auto 52px; }
.flexprofile__legend {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
}
.flexprofile__leg { display: flex; align-items: baseline; gap: 9px; }
.flexprofile__swatch {
  width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0;
  transform: translateY(-3px);
}
.flexprofile__leg--lite .flexprofile__swatch { background: var(--lite); }
.flexprofile__leg--pro  .flexprofile__swatch { background: var(--pro); }
.flexprofile__leg--tour .flexprofile__swatch { background: var(--tour-tag); }
.flexprofile__leg-name {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.flexprofile__leg--lite .flexprofile__leg-name { color: var(--lite); }
.flexprofile__leg--pro  .flexprofile__leg-name { color: var(--pro); }
.flexprofile__leg--tour .flexprofile__leg-name { color: var(--tour-tag); }
.flexprofile__leg-desc { font-size: 12px; color: var(--white-dim); letter-spacing: 0.02em; }
.flexprofile__chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.flexprofile__clamp { fill: rgba(245,245,240,0.16); }
.flexprofile__base { stroke: rgba(245,245,240,0.16); stroke-width: 1.5; stroke-dasharray: 5 7; }
.flexprofile__curve {
  fill: none; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.flexprofile__curve--lite { stroke: var(--lite); }
.flexprofile__curve--pro  { stroke: var(--pro); }
.flexprofile__curve--tour { stroke: var(--tour-tag); }
.flexprofile.is-in .flexprofile__curve { stroke-dashoffset: 0; }
.flexprofile.is-in .flexprofile__curve--pro  { transition-delay: 0.12s; }
.flexprofile.is-in .flexprofile__curve--lite { transition-delay: 0.24s; }
.flexprofile__dot { opacity: 0; transition: opacity 0.5s var(--ease-out) 0.95s; }
.flexprofile__dot--lite { fill: var(--lite); }
.flexprofile__dot--pro  { fill: var(--pro); }
.flexprofile__dot--tour { fill: var(--tour-tag); }
.flexprofile.is-in .flexprofile__dot { opacity: 1; }
.flexprofile__axis {
  fill: var(--white-dim); font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
}
.flexprofile__cap {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,245,240,0.42);
}
.flexprofile__cap-note {
  letter-spacing: 0.08em; text-transform: none; font-weight: 500;
  font-size: 11px; color: rgba(245,245,240,0.34); text-align: center;
}

@media (max-width: 600px) {
  .flexprofile__cap-note { display: none; }
  .flexprofile__legend { gap: 10px 20px; }
}

/* flex profile — interactive legend toggles */
.flexprofile__legend > li { display: flex; }
.flexprofile__leg {
  background: none; border: 0; padding: 4px 6px; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: opacity 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.flexprofile__leg:hover { background: rgba(245,245,240,0.05); }
.flexprofile__leg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flexprofile__leg[aria-pressed="false"] { opacity: 0.38; }
.flexprofile__leg[aria-pressed="false"] .flexprofile__swatch { background: var(--white-dim); }
.flexprofile__hint {
  text-align: center; margin: -8px 0 22px;
  font-size: 12px; letter-spacing: 0.02em; color: var(--white-dim);
}
/* curve / dot hidden state (toggled off) */
.flexprofile__curve.is-off,
.flexprofile__dot.is-off { opacity: 0 !important; pointer-events: none; }
/* legend toggle hide stays snappy & delay-free (overrides the choreographed entrance) */
.flexprofile__dot.is-off { transition: opacity 0.35s var(--ease-out) 0s; }
.flexprofile__curve { transition: stroke-dashoffset 1.1s var(--ease-out), opacity 0.35s var(--ease-out); }

/* flex profile — hover scrubber */
.flexprofile__chart { position: relative; }
.flexprofile__hit { fill: transparent; cursor: crosshair; }
.flexprofile__guide { stroke: rgba(245,245,240,0.3); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.18s var(--ease-out); }
.flexprofile__marker { opacity: 0; transition: opacity 0.18s var(--ease-out); }
.flexprofile__marker--lite { fill: var(--lite); }
.flexprofile__marker--pro  { fill: var(--pro); }
.flexprofile__marker--tour { fill: var(--tour-tag); }
.flexprofile.is-scrub .flexprofile__guide,
.flexprofile.is-scrub .flexprofile__marker:not(.is-off) { opacity: 1; }
.flexprofile__readout {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 124px; padding: 10px 12px;
  background: rgba(18,18,22,0.92); border: 1px solid var(--white-faint);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  pointer-events: none; backdrop-filter: blur(6px);
}
.flexprofile__readout.is-active { opacity: 1; transform: translateY(0); }
.flexprofile__readout-zone {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 7px; white-space: nowrap;
}
.flexprofile__readout-row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.8; }
.flexprofile__readout-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.flexprofile__readout-name { color: var(--white-dim); margin-right: auto; letter-spacing: 0.02em; }
.flexprofile__readout-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--white); }
.flexprofile__readout-help {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--white-faint);
  font-size: 10.5px; color: rgba(245,245,240,0.42); letter-spacing: 0.01em;
}

/* ── RELATIVE PERFORMANCE RADAR (driver) ── */
.radarsec { padding: var(--spacing-section) 0; }
.radarsec__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 10px 0 0;
}
.radarsec__lead {
  max-width: 60ch; margin: 18px 0 0; color: var(--white-dim);
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7;
}
.radar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 64px); margin: 40px auto 0; max-width: 820px;
}
.radar__chart { flex: 0 1 440px; min-width: 280px; }
.radar__svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar__grid { fill: none; stroke: var(--white-faint); stroke-width: 1; }
.radar__spoke { stroke: var(--white-faint); stroke-width: 1; }
.radar__axis-label {
  fill: var(--white-dim); font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
}
.radar__shape {
  stroke-width: 2; stroke-linejoin: round;
  transition: opacity 0.5s var(--ease-out); /* one-time scroll-in entrance */
  opacity: 0; /* revealed by JS / .is-in */
}
.radar.is-in .radar__shape { opacity: 1; }
.radar__shape--lite { fill: rgba(232,92,26,0.14); stroke: var(--lite); }
.radar__shape--pro  { fill: rgba(74,122,232,0.16); stroke: var(--pro); }
.radar__shape--tour { fill: rgba(107,114,125,0.20); stroke: var(--tour-tag); }
.radar__vertex { transition: opacity 0.35s var(--ease-out); }
.radar__vertex--lite { fill: var(--lite); }
.radar__vertex--pro  { fill: var(--pro); }
.radar__vertex--tour { fill: var(--tour-tag); }
/* legend toggle hide stays snappy — overrides the slower 0.5s entrance */
.radar__shape.is-off { transition-duration: 0.35s; }
.radar__shape.is-off, .radar__vertex.is-off { opacity: 0 !important; }

/* ── MATERIAL RADAR (technology — carbon / steel / carbon-metal) ──
   reuses the .radar* structure; adds a centred header + material colours */
.matradar { margin-top: clamp(52px, 8vw, 104px); text-align: center; }
.matradar__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 3.6vw, 42px); line-height: 1.04; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 10px 0 0;
}
.matradar__lead {
  max-width: 58ch; margin: 16px auto 0; color: var(--white-dim);
  font-size: clamp(14.5px, 1.3vw, 16.5px); line-height: 1.7;
}
.matradar__radar { margin-top: 8px; }
.radar__shape--carbon { fill: rgba(91,181,162,0.13); stroke: #5bb5a2; }
.radar__shape--steel  { fill: rgba(107,114,125,0.20); stroke: var(--tour-tag); }
.radar__shape--result { fill: rgba(216,196,138,0.16); stroke: var(--accent); }
.radar__vertex--carbon { fill: #5bb5a2; }
.radar__vertex--steel  { fill: var(--tour-tag); }
.radar__vertex--result { fill: var(--accent); }
/* Staggered draw-on entrance: each material polygon scales out from its own
   centre in sequence once the generic reveal observer adds .is-in. Scoped to
   the material radar so the product-page radar keeps its plain fade. */
.matradar__radar .radar__shape {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0.65);
  transition: opacity 0.6s var(--ease-out),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.matradar__radar .radar__shape--steel  { transition-delay: 0.14s; }
.matradar__radar .radar__shape--result { transition-delay: 0.28s; }
.matradar__radar.is-in .radar__shape { transform: scale(1); }
/* legend toggling must stay snappy — cancel the entrance stagger */
.matradar__radar .radar__shape.is-off { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .matradar__radar .radar__shape { transform: none; transition: none; }
}
/* Vertex tooltips — generous invisible hit targets + an SVG tip bubble */
.radar__hit { fill: transparent; cursor: pointer; }
.radar__hit.is-off { pointer-events: none; }
.radar__tip { pointer-events: none; }
.radar__tip-bg { fill: rgba(8,8,8,0.92); stroke: rgba(245,245,240,0.22); stroke-width: 1; }
.radar__tip-text {
  fill: var(--white); font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
}
.radar__leg--carbon .radar__swatch { background: #5bb5a2; }
.radar__leg--steel  .radar__swatch { background: var(--tour-tag); }
.radar__leg--result .radar__swatch { background: var(--accent); }
.radar__leg--carbon .radar__leg-name { color: #5bb5a2; }
.radar__leg--steel  .radar__leg-name { color: var(--tour-tag); }
.radar__leg--result .radar__leg-name { color: var(--accent); }
.radar__legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto;
}
.radar__leg {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 6px 8px; margin: 0;
  font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm);
  transition: opacity 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.radar__leg:hover { background: rgba(245,245,240,0.05); }
.radar__leg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radar__leg[aria-pressed="false"] { opacity: 0.4; }
.radar__swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.radar__leg--lite .radar__swatch { background: var(--lite); }
.radar__leg--pro  .radar__swatch { background: var(--pro); }
.radar__leg--tour .radar__swatch { background: var(--tour-tag); }
.radar__leg[aria-pressed="false"] .radar__swatch { background: var(--white-dim); }
.radar__leg-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.radar__leg--lite .radar__leg-name { color: var(--lite); }
.radar__leg--pro  .radar__leg-name { color: var(--pro); }
.radar__leg--tour .radar__leg-name { color: var(--tour-tag); }
.radar__leg[aria-pressed="false"] .radar__leg-name { color: var(--white-dim); }
.radar__note {
  text-align: center; margin: 28px auto 0; max-width: 52ch;
  font-size: 11.5px; color: rgba(245,245,240,0.4); letter-spacing: 0.02em;
}
@media (max-width: 620px) {
  .radar { gap: 20px; }
  /* take the full row (not content width) so the three buttons wrap & centre
     inside the container instead of overflowing its 32px padding edge-to-edge */
  .radar__legend { flex: 1 1 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 8px; }
}

/* ── REDUCED MOTION ── respect users who request minimal animation */
@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;
  }
}

/* ── ZH (Traditional Chinese) DISPLAY-HEADING LEADING ──────────────────────────
   CJK glyphs fill nearly the whole em-box, so the tight line-heights tuned for
   Latin display caps (0.82–1.05) crowd — and at the tightest values visibly
   overlap — once a Chinese heading wraps to 2+ lines (e.g. 碳纖維合金 / 技術 was
   overlapping by ~8px). Give every multi-line-capable CJK *title* a comfortable
   leading. Scoped to html[lang^="zh"] so English keeps its intentionally tight,
   premium display leading. Number / operator / Latin-wordmark classes are
   excluded on purpose (they never carry wrapping CJK text). The .wtb__title
   font-size cap lives next to its base rule (~line 2544). */
html[lang^="zh"] .about-banner__title,
html[lang^="zh"] .about__title,
html[lang^="zh"] .contact__title,
html[lang^="zh"] .fitsplit__title,
html[lang^="zh"] .story-hero__title,
html[lang^="zh"] .about__cmm-h,
html[lang^="zh"] .product-title,
html[lang^="zh"] .tech-intro__title,
html[lang^="zh"] .lineup__title,
html[lang^="zh"] .compare__title,
html[lang^="zh"] .fitguide__title,
html[lang^="zh"] .product-intro__title,
html[lang^="zh"] .wtb__title,
html[lang^="zh"] .matcmp__title,
html[lang^="zh"] .cta-band__h,
html[lang^="zh"] .story-intro__head,
html[lang^="zh"] .section-title,
html[lang^="zh"] .story-breakthrough__title,
html[lang^="zh"] .story-chapter__title,
html[lang^="zh"] .story-split__title,
html[lang^="zh"] .tech-cores__title,
html[lang^="zh"] .story-dilemma__title,
html[lang^="zh"] .story-heritage__title,
html[lang^="zh"] .cms-film__title,
html[lang^="zh"] .story-dilemma__qmain,
html[lang^="zh"] .page-404__title {
  line-height: 1.15;
}

/* ── ZH DISPLAY-HEADING TRACKING ───────────────────────────────────────────────
   The largest Latin display caps now carry negative tracking (.about-banner__title
   −0.01em, .fitsplit__title −0.01em) for a tighter, premium English look. Negative
   letter-spacing crowds full-em CJK glyphs, so reset those two back to a comfortable
   near-neutral spacing in Traditional Chinese. Titles set to 0 (.section-title,
   .about__cmm-h) are safe for CJK and need no reset. */
html[lang^="zh"] .about-banner__title,
html[lang^="zh"] .fitsplit__title {
  letter-spacing: 0.01em;
}

/* ── ZH FITTING-BANNER MOBILE SIZING ──────────────────────────────────────────
   The fitting page banner reads 「尋找最適合你的桿身」(9 chars). At the .about-
   banner__title floor of 72px a ≤480px viewport fits only 4 CJK chars per line,
   so it wrapped 4 / 4 / 1 — orphaning 「身」 and splitting the word 「桿身」. Scoping a
   smaller size to this one ZH title (matched by its i18n key) lets it wrap to two
   balanced lines (5+4 / 6+3 / 7+2) with 「桿身」 kept whole. Everything else is
   untouched: EN ("FIND YOUR FIT") is outside html[lang^="zh"], and every other
   full-size banner is a 4-char single-line title (關於我們 / 聯絡我們 / 核心技術 /
   CMS 系列) that needs no change. 14.5vw holds the same wrap across the phone
   range; capped at 70px so it meets the 72px base cleanly at the 480px boundary. */
@media (max-width: 480px) {
  html[lang^="zh"] .about-banner__title[data-i18n="fitpage.title"] {
    font-size: clamp(46px, 14.5vw, 70px);
  }
}

/* ── FITTING ATTRIBUTE ICONS ───────────────────────────────────────────────────
   Launch / Spin / Feel / Swing-Speed labels in the fitting comparison lists (mobile
   compare cards + iron fitguide cards) and the desktop comparison-table row headers
   gain a 1.5px line icon. Pure CSS: a background-image SVG on ::before keyed by the
   attribute's shared data-i18n value — no HTML or i18n changes, and it applies to ZH
   and EN identically. The stroke is white at low opacity so the glyph reads as a
   quiet line mark that tints to each card's mood (lite / pro / tour / iron). */
.compare-card__specs dt,
.fitguide__specs dt {
  display: inline-flex; align-items: center; gap: 7px;
}
.compare-card__specs dt::before,
.fitguide__specs dt::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.55;
}
/* Desktop comparison table: a <th> must stay a table-cell, so use an inline-block
   ::before — switching it to flex would collapse the table layout. Use background
   longhands (not the shorthand) so the base rule never resets background-image —
   the .compare-table th[scope] base outranks the per-key rule on specificity. */
.compare-table th[scope="row"]::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  margin-right: 8px; vertical-align: -2px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.55;
}

/* Per-attribute glyphs, matched on the shared data-i18n key carried by both <dt>
   and <th>: Launch = rising trajectory + arrow · Spin = rotation arrow ·
   Feel = flex/vibration wave · Swing Speed = speedometer gauge. */
dt[data-i18n="compare.row.launch"]::before,
th[data-i18n="compare.row.launch"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20c4 0 11-2 17-15'/%3E%3Cpath d='M14 4h6v6'/%3E%3C/svg%3E");
}
dt[data-i18n="compare.row.spin"]::before,
th[data-i18n="compare.row.spin"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E");
}
dt[data-i18n="compare.row.feel"]::before,
th[data-i18n="compare.row.feel"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12q3-5 6 0t6 0t6 0'/%3E%3C/svg%3E");
}
dt[data-i18n="compare.row.speed"]::before,
th[data-i18n="compare.row.speed"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a9 9 0 0 1 16 0'/%3E%3Cpath d='M12 18l5-6'/%3E%3Ccircle cx='12' cy='18' r='1.4' fill='%23f5f5f0' stroke='none'/%3E%3C/svg%3E");
}

/* ── SMART FITTING WIZARD ── */
.fitwiz { padding: var(--spacing-section) 0; }
.fitwiz__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 12px 0 18px;
}
.fitwiz__lead { max-width: 640px; color: var(--white-dim); line-height: 1.7; margin: 0 0 40px; }

.fitwiz__card {
  position: relative;
  background: var(--dark-2);
  border: 1px solid var(--white-faint);
  border-radius: var(--radius);
  box-shadow: var(--card-inlay), var(--shadow-soft);
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
}

/* progress rail */
.fitwiz__progress {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 4px;
  list-style: none; margin: 0 0 32px; padding: 0 0 22px;
  border-bottom: 1px solid var(--white-faint);
}
.fitwiz__step {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,245,240,0.4);
  transition: color 0.3s var(--ease-out);
}
.fitwiz__step:not(:first-child)::before {
  content: ""; width: 20px; height: 1px; background: var(--white-faint);
  margin: 0 10px 0 4px;
}
.fitwiz__step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--white-faint);
  font-size: 12px; font-weight: 700;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.fitwiz__step.is-active { color: var(--white); }
.fitwiz__step.is-active .fitwiz__step-no {
  background: var(--accent); border-color: var(--accent); color: var(--black);
}
.fitwiz__step.is-done { color: var(--white-dim); }
.fitwiz__step.is-done .fitwiz__step-no {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}

/* panels */
.fitwiz__panel { display: none; }
.fitwiz__panel.is-active { display: block; animation: fitwiz-fade 0.5s var(--ease-out); }
@keyframes fitwiz-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fitwiz__q {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px); font-weight: 800;
  letter-spacing: 0.01em; line-height: 1.25; margin: 0 0 24px;
}

/* options */
.fitwiz__opts { display: grid; gap: 14px; }
.fitwiz__opts--2 { grid-template-columns: repeat(2, 1fr); }
.fitwiz__opts--3 { grid-template-columns: repeat(3, 1fr); }
.fitwiz__opt {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 22px; cursor: pointer;
  background: var(--dark-3);
  border: 1px solid var(--white-faint);
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out),
              transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.fitwiz__opt:hover {
  border-color: var(--accent-line);
  background: #20202a;
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.fitwiz__opt:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.09s; }
.fitwiz__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fitwiz__opt-main {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
}
.fitwiz__opt-sub { font-size: 13px; color: var(--white-dim); line-height: 1.5; }

/* ── Speed-step slider ── */
.fitwiz__slider {
  --fill: 50%; /* JS updates this to the thumb position */
  padding: 8px 6px 0;
}
.fitwiz__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill), rgba(245,245,240,0.14) var(--fill), rgba(245,245,240,0.14) 100%);
  outline: none;
}
.fitwiz__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5); cursor: grab;
  transition: transform 0.15s var(--ease-out);
}
.fitwiz__range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.fitwiz__range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5); cursor: grab;
}
.fitwiz__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
/* Big live mph readout above the track */
.fitwiz__range-val {
  margin: 0 0 18px; text-align: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 4vw, 36px); letter-spacing: 0.02em;
  color: var(--accent);
}
/* min / max captions under the track */
.fitwiz__range-ends {
  display: flex; justify-content: space-between; margin-top: 14px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--white-dim);
}
.fitwiz__range-go {
  display: block; margin: 22px auto 0; padding: 13px 40px; border-radius: 40px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  color: #0a0a0a; background: var(--accent); border: 1px solid var(--accent);
  transition: filter 0.2s var(--ease-out), transform 0.12s var(--ease-out);
}
.fitwiz__range-go:hover { filter: brightness(1.08); }
.fitwiz__range-go:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .fitwiz__range::-webkit-slider-thumb { transition: none; }
}

.fitwiz__hint { margin: 20px 0 0; font-size: 13px; color: rgba(245,245,240,0.5); font-style: italic; }

/* back control */
.fitwiz__nav { margin-top: 26px; min-height: 20px; }
.fitwiz__back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white-dim); padding: 6px 2px;
  transition: color 0.2s var(--ease-out);
}
.fitwiz__back:hover { color: var(--white); }
.fitwiz__back[hidden] { display: none; }

/* result */
.fitwiz__result-badge {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 6px;
}
.fitwiz__result-model {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 56px); font-weight: 900; line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 18px;
  color: var(--accent);
}
.fitwiz__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.fitwiz__chip {
  display: inline-block; padding: 6px 12px;
  background: var(--dark-3); border: 1px solid var(--white-faint);
  border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--white-dim);
}
.fitwiz__result-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin: 0 0 26px;
  border-top: 1px solid var(--white-faint);
}
.fitwiz__result-specs > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--white-faint);
}
.fitwiz__result-specs dt {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,240,0.45);
}
.fitwiz__result-specs dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--white); }
.fitwiz__why-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,240,0.45);
  margin: 0 0 8px;
}
.fitwiz__why { color: var(--white-dim); line-height: 1.7; margin: 0 0 28px; max-width: 640px; }
.fitwiz__result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.fitwiz__result-cta { flex: 0 0 auto; }
.fitwiz__result-specs-link {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-line); padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.fitwiz__result-specs-link:hover { border-color: var(--accent); }
.fitwiz__restart {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-dim);
  transition: color 0.2s var(--ease-out);
}
.fitwiz__restart:hover { color: var(--white); }

/* per-model result accents (match the per-product identifier colors) */
.fitwiz__result--lite .fitwiz__result-model { color: var(--lite); }
.fitwiz__result--pro  .fitwiz__result-model { color: var(--pro); }
.fitwiz__result--tour .fitwiz__result-model { color: var(--tour-tag); }
.fitwiz__result--iron .fitwiz__result-model { color: var(--iron); }

@media (max-width: 680px) {
  .fitwiz__opts--2, .fitwiz__opts--3 { grid-template-columns: 1fr; }
  .fitwiz__result-specs { grid-template-columns: 1fr; }
  .fitwiz__opt { padding: 18px 18px; }
}
@media (max-width: 560px) {
  /* Drop the connector rules so a wrapped step never leaves a stray dash; the
     numbered circles carry the sequence on their own. */
  .fitwiz__progress { gap: 10px 18px; }
  .fitwiz__step:not(:first-child)::before { display: none; }
}

/* ZH headings keep non-negative tracking (CJK has no side-bearing to trim) */
html[lang^="zh"] .fitwiz__title,
html[lang^="zh"] .fitwiz__q,
html[lang^="zh"] .fitwiz__result-model { letter-spacing: 0.02em; }