/* =================================================================
 * SHANBO Design System — Industrial Brand Identity
 * Brand Red: #C81318  |  Industrial Black: #0A0A0A
 * ================================================================= */

/* ---- Design Tokens ---- */
:root {
  /* ===== SHANBO Light B2B palette =====
     Page is light; brand red stays; deep black reserved for footer / strong CTA. */
  --color-brand:        #C81318;
  --color-brand-dark:   #A00F13;
  --color-brand-light:  #E83136;
  --color-brand-soft:   #FDECEC;            /* pale red wash, for cards / callouts */

  /* Surfaces */
  --color-black:        #0A0A0A;            /* used ONLY for footer / logo on light / strong CTA */
  --color-charcoal:     #1A1A1A;            /* body text on light surfaces */
  --color-graphite:     #4A4A4A;            /* secondary text */
  --color-mute:         #888;               /* tertiary text */
  --color-line:         #E5E5E5;            /* borders, dividers */
  --color-page:         #F5F5F5;            /* page background (warm light gray) */
  --color-surface:      #FAFAFA;            /* slight lift, used for alternating sections */
  --color-card:         #FFFFFF;            /* cards float on page */
  --color-ink:          #FFFFFF;            /* ONLY for text on dark backgrounds */
  --color-text:         #1A1A1A;            /* primary text on light surfaces */
  --color-text-muted:   #4A4A4A;            /* secondary text on light */
  --color-text-dim:     #888;               /* tertiary text on light */

  /* Legacy aliases (kept so older CSS still resolves) */
  --color-bg-dark:      #F5F5F5;            /* RESEMANTIC: was deep, now page bg alias */
  --color-bg-card:      #FFFFFF;            /* cards = white */
  --color-bg-surface:   #FAFAFA;            /* alt sections */
  --color-bg-mid:       #F0F0F0;            /* form inputs / muted blocks */
  --color-bg-light:     #F5F5F5;            /* page = this */
  --color-white:        #FFFFFF;
  --color-border:       #E5E5E5;

  /* Typography */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;
  --space-5xl:  120px;

  /* Layout */
  --container:   1200px;
  --container-wide: 1400px;
  --header-h:    72px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    300ms;
  --dur-med:     500ms;
  --dur-slow:    800ms;

  /* Z-index layers */
  --z-header:       1000;
  --z-nav:          1001;
  --z-section-nav:  900;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,picture,video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
address { font-style: normal; }
::selection { background: var(--color-brand); color: #fff; }

/* ---- Image protection: prevent drag-save and right-click save on all <img> ----
   - user-drag: none stops drag-to-desktop
   - user-select: none stops text selection around the image
   - pointer-events: none on the inline ::after would block right-click; we handle
     that in main.js so the lightbox / links inside images still work. */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -moz-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* Disable long-press image preview on iOS Safari for ALL <img> */
img { -webkit-touch-callout: none; }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.accent { color: var(--color-brand); }
.accent-secondary { color: var(--color-text-dim); }
.accent-warm { color: #F5C518; }      /* industrial yellow — use for emphasis on dark BGs */
.container {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--space-lg);
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; color: var(--color-charcoal); }

/* ---- Header (light theme) ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.0);
  transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--color-black);
  line-height: 1;
}
/* Header logo: real brand wordmark.
   Default = dark-bg variant (red+white) for the index page (dark photo hero).
   Pages with a LIGHT hero (about / contact / parts / catalog / privacy / terms)
   use `:has()` to swap to the light-bg variant (red+black) until the user
   scrolls — at which point the header gets `.scrolled` and the dark variant
   takes over so the logo stays readable on the dark blurred bar. */
.brand-logo {
  display: inline-block;
  width: 180px; height: 36px;
  background: url('../_system/brand-identity/logo/wordmark-dark-small.png') no-repeat center / contain;
  position: relative; top: 1px;
  text-indent: -9999px; overflow: hidden; /* hide the aria-label text */
}
/* Pages with dark photo hero (page-hero, ref-page-hero) — red+white wordmark on dark bg */
body:has(.page-hero) .brand-logo,
body:has(.ref-page-hero) .brand-logo {
  background-image: url('../_system/brand-identity/logo/wordmark-dark.png');
  width: 200px; height: 40px; top: 0;
}
body:has(.page-hero) .site-header.scrolled .brand-logo,
body:has(.ref-page-hero) .site-header.scrolled .brand-logo {
  background-image: url('../_system/brand-identity/logo/wordmark-dark-small.png');
  width: 180px; height: 36px;
}
.brand-mark-s {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 900; font-size: 1rem;
  letter-spacing: 0;
  border-radius: 3px;
  position: relative; top: -1px;
  box-shadow: 0 2px 6px rgba(200,19,24,0.25);
}
.brand-mark-rest { color: var(--color-black); }
/* Subtle red dot in the wordmark to echo the brand */
.brand-mark-rest::after {
  content: '';
  display: inline-block; width: 4px; height: 4px;
  background: var(--color-brand);
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: 0.32em;
}
/* .brand-mark::after removed — ® unregistered; do not display before trademark registration. */

/* ---- Primary Nav ---- */
.primary-nav ul { display: flex; gap: var(--space-xl); }
.primary-nav a {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}
.site-header.scrolled .primary-nav a { color: rgba(255, 255, 255, 0.78); }
.primary-nav a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--color-brand);
  transition: width var(--dur-fast) var(--ease-out);
}
.primary-nav a:hover, .primary-nav a.active { color: var(--color-brand); }
.primary-nav a:hover::after, .primary-nav a.active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: var(--space-md); }

/* Language Switcher */
.lang-switch-wrap { position: relative; margin-left: 2px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem; font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
  font-family: inherit;
}
.lang-btn:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.35); }
.lang-btn:hover,
.lang-btn:focus { border-color: var(--color-primary); outline: none; }
.lang-btn-flag { display: inline-flex; line-height: 0; }
.lang-btn-arrow { font-size: 0.6rem; color: var(--color-text-dim); margin-left: -2px; }

/* Inline-SVG flag badge — renders reliably on every OS (no emoji) */
.flag-svg {
  display: block;
  width: 21px; height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28);
  flex: none;
}

.lang-drop {
  position: absolute; top: 100%; right: 0;
  margin-top: 6px;
  min-width: 150px;
  background: #1a1d23;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  list-style: none; padding: 4px 0; margin: 4px 0 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 1000;
}
.lang-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);   /* clear gray on dark dropdown */
  font-size: 0.82rem; font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-opt:hover { background: rgba(200,19,24,0.18); color: #FFFFFF; }
.lang-opt--active { color: #FFFFFF; font-weight: 700; }
.lang-opt-flag { display: inline-flex; line-height: 0; }
.lang-opt-short {
  min-width: 1.8em;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) {
  .lang-switch-wrap { display: none; }
}

/* Menu Toggle (mobile) */
.menu-toggle { display: none; width: 28px; height: 20px; position: relative; }
.menu-toggle span {
  display: block; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--color-white); border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 9px; }
.menu-toggle span:nth-child(3) { top: 18px; }
.menu-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.03em;
  padding: 12px 28px; border-radius: 4px;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-sm { padding: 8px 20px; font-size: 0.8rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-xl { padding: 20px 48px; font-size: 1.1rem; }

.btn-primary {
  background: var(--color-brand); color: var(--color-white);
  border: 2px solid var(--color-brand);
}
.btn-primary:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,19,24,0.3);
}

.btn-outline {
  background: transparent; color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.3);
}
.btn-outline:hover {
  border-color: var(--color-brand); color: var(--color-brand);
  transform: translateY(-2px);
}

/* ---- Screen Sections (shared) ---- */
.screen {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: var(--header-h) 0 var(--space-3xl);
  overflow: hidden;
}
.screen-content { position: relative; z-index: 2; width: 100%; }

/* Decorative divider between consecutive screens — used in HTML as
   <div class="section-divider"> right before a non-hero <section>.
   Industrial / blueprint feel: a 1px line, with a short red bar in the
   center and two short flanking lines. */
.section-divider {
  position: relative;
  height: 1px;
  background: var(--color-line);
  z-index: 5;
}
.section-divider::before,
.section-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32px; height: 3px;
  background: var(--color-line);
  transform: translateY(-50%);
  border-radius: 1px;
}
.section-divider::before { left: calc(50% - 56px); }
.section-divider::after  { right: calc(50% - 56px); }
.section-divider .section-divider-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 5px;
  background: var(--color-brand);
  border-radius: 1px;
  box-shadow: 0 0 0 4px var(--color-page);
}
/* Layout helpers: pin the screen content to one side so the heavy black
   mask (set on the parent screen) falls on the title side, leaving the
   opposite side of the photo visible. Adjacent screens alternate sides
   so the eye "walks" left-right as the user scrolls.
   Note: specificity is bumped to .screen .screen-content--X (0,0,2,0)
   so it overrides the later .screen-XXX .screen-content rules. */
.screen .screen-content--left  { margin-left: 0;    margin-right: auto; max-width: 50%; padding: 0 var(--space-lg); }
.screen .screen-content--right { margin-left: auto; margin-right: 0;    max-width: 50%; padding: 0 var(--space-lg); }
.screen .screen-content--left  .screen-body,
.screen .screen-content--left  .pull-quote { text-align: left; }
.screen .screen-content--right .screen-body,
.screen .screen-content--right .pull-quote { text-align: left; }
.screen-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.4) 100%);
}
.screen-number {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.15em; color: var(--color-brand);
  margin-bottom: var(--space-md);
}
.screen-title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800; line-height: 1.08;
  margin-bottom: var(--space-lg);
  max-width: 900px;
}
.screen-title--hero .title-line { display: block; }
.screen-title--hero .title-line.accent {
  color: var(--color-brand);
  font-size: clamp(3rem, 6.5vw, 5.5rem);
}
.screen-eyebrow {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-lg);
}
.screen-hero .screen-eyebrow { color: var(--color-brand); }
.screen-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 640px; line-height: 1.7;
  margin-bottom: var(--space-xl);
}
.screen-actions { margin-top: var(--space-xl); }
.screen-body { max-width: 720px; }
.screen-paragraph {
  font-size: 1rem; line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.screen-paragraph strong { color: var(--color-brand); font-weight: 700; }
.screen-body-text {
  font-size: 1rem; line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

/* ---- Hero Screen (0) — full-bleed photo (hero-1.jpg) + dark mask ---- */
.screen-hero {
  background-color: var(--color-black);
  background-image: url('../_shared-media/home/hero-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-bottom: 1px solid var(--color-line);
  padding-top: calc(var(--header-h) + var(--space-3xl));
  padding-bottom: var(--space-4xl);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.screen-hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 100%),
    radial-gradient(ellipse 50% 40% at 30% 50%, rgba(200,19,24,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.screen-hero .screen-content { position: relative; z-index: 2; max-width: 720px; }
.screen-hero .hero-geo { display: none; }
.screen-hero .screen-overlay { display: none; }
.screen-hero .screen-eyebrow { color: rgba(255,255,255,0.7); }
.screen-hero .screen-title { color: #fff; }
.screen-hero .screen-title .accent { color: var(--color-brand); }
.screen-hero .screen-subtitle { color: rgba(255,255,255,0.85); }

/* (Old .screen-closure rules removed — replaced by .screen-economics
   and .screen-promise. See further down.) */

/* Used Equipment cost card imagery */
.cost-card {
  position: relative;
  overflow: hidden;
}
.cost-card-figure {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  margin: 0 0 var(--space-md) 0;
  border-radius: 4px;
}
.cost-card--bad .cost-card-figure {
  border: 1px solid rgba(139, 58, 31, 0.4);
}
.cost-card--good .cost-card-figure {
  border: 1px solid rgba(200, 19, 24, 0.4);
}

/* Abstract geo shapes */
.hero-geo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.geo-rect {
  position: absolute; border: 1px solid rgba(200,19,24,0.12);
  opacity: 0.4;
}
.geo-rect--1 {
  width: 45vw; height: 45vw; max-width: 600px; max-height: 600px;
  top: -10%; right: -8%;
  transform: rotate(15deg);
  border-radius: 4px;
}
.geo-rect--2 {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  bottom: -5%; left: -5%;
  transform: rotate(-8deg);
}
.geo-line {
  position: absolute; background: rgba(200,19,24,0.08);
}
.geo-line--h { height: 1px; width: 30%; top: 60%; right: 5%; }
.geo-line--v { width: 1px; height: 40%; top: 10%; right: 15%; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: var(--space-2xl); left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
}
.scroll-text {
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ---- Screen 1: Value (full-bleed photo hero-2.jpg + dark mask) ---- */
.screen-value {
  background-color: var(--color-black);
  background-image: url('../_shared-media/home/hero-2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: var(--space-5xl) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: #fff;
  overflow: hidden;
}
.screen-value::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 100%);
}
.screen-value::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Mirrors .screen-iron::after: LEFT darker so left-aligned text reads cleanly */
  background: linear-gradient(to right, rgba(10,10,10,0.55) 0%, transparent 70%);
}
.screen-value .screen-content {
  position: relative; z-index: 2;
  margin-left: 0; margin-right: auto;
  max-width: 50%;
  padding: 0 var(--space-lg);
}
.screen-bg-texture { display: none; }
.screen-value .screen-title { margin-bottom: var(--space-2xl); color: #fff; }
.screen-value .screen-paragraph { color: rgba(255,255,255,0.88); }
.screen-value .screen-number { color: #fff; background: rgba(200,19,24,0.2); padding: 2px 10px; border-radius: 2px; }

.value-grid {
  display: block; /* single column now — photo is the section background */
}
.value-text { min-width: 0; }

/* ============================================================
   Competitive positioning spectrum — geometric / minimal.
   Sits below the paragraphs, left-aligned inside the text column.
   Pure color blocks + hairlines + text. No icons, no shadows.
============================================================ */
.value-spectrum {
  margin: var(--space-2xl) 0 0;
  padding: var(--space-xl) 0 0;
  max-width: 640px;          /* constrained reading width, left-aligned */
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.spectrum-grid {
  display: grid;
  /* pole | connector | SHANBO anchor | connector | pole — 5 columns */
  grid-template-columns: 1fr 36px auto 36px 1fr;
  gap: 0;
  align-items: stretch;
}

/* Connector hairlines that visually tie each pole into the SHANBO center.
   They sit at the anchor's vertical midpoint — same Y as the ▼ arrow. */
.spectrum-connector {
  height: 1px;
  background: rgba(255,255,255,0.55);
  align-self: center;
}

/* ---- Pole blocks (left & right) ----
   No card chrome. Just a thin accent rule and a tight text block. */
.spectrum-pole {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid rgba(255,255,255,0.55);
}
.spectrum-pole--left  { border-left-color: #C81318; }
.spectrum-pole--right {
  border-left: none;
  border-right: 2px solid rgba(255,255,255,0.55);
  padding: 4px 16px 4px 0;
  text-align: right;
  align-items: flex-end;
}
.spectrum-pole--right { border-right-color: #F59E0B; }

.spectrum-pole-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

.spectrum-pole-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.3;
  /* Reserve two lines so 1-line and 2-line titles stay vertically aligned */
  min-height: calc(1.3em * 2);
}

.spectrum-pole-points {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.68);
}
.spectrum-pole-points li {
  position: relative;
  padding-left: 14px;
  /* Force a two-line height so single-row and double-row items
     share the same baseline — keeps the two poles vertically aligned. */
  min-height: calc(1.75em * 2);
  display: flex;
  align-items: flex-start;
}
.spectrum-pole-points li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.35);
  font-weight: 400;
}
.spectrum-pole--right .spectrum-pole-points li {
  padding-left: 0;
  padding-right: 14px;
}
.spectrum-pole--right .spectrum-pole-points li::before {
  left: auto;
  right: 0;
}

/* ---- PRICE / RISK meters: 5 ticks per row, count = level ----
   No progress bar — just discrete blocks. Color encodes meaning:
     PRICE = warm gold (coin color)            #F59E0B
     RISK  = warning red                       #C81318
   Ticks hug the label (left pole: right of label / right pole: left
   of label) — both poles share the same "label | ticks" reading order,
   so the visual distance from label to ticks is constant.
*/
.spectrum-meter {
  display: grid;
  grid-template-columns: auto 1fr;   /* label (auto) | flex space */
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
}
.spectrum-meter-label { text-transform: uppercase; }

.spectrum-meter-ticks {
  display: inline-flex;
  gap: 3px;
  font-size: 0;
  line-height: 0;
  justify-self: start;      /* left pole: ticks sit right next to the label */
}

/* Right pole: mirror layout — label on the right, ticks sit left of label */
.spectrum-pole--right .spectrum-meter {
  grid-template-columns: 1fr auto;
}
.spectrum-pole--right .spectrum-meter-ticks {
  order: -1;
  justify-self: end;        /* right pole: ticks sit right next to the label */
}

.spectrum-meter-ticks > span {
  display: inline-block;
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
}
.spectrum-meter--price .spectrum-meter-ticks > span[data-on] { background: #F59E0B; }  /* gold */
.spectrum-meter--risk  .spectrum-meter-ticks > span[data-on] { background: #C81318; }  /* warning red */

/* ---- Center anchor: SHANBO as the fulcrum ----
   No badge, no sphere, no shadows. Just typography + geometry:
     • hairline rule on top  → the balance beam
     • wordmark              → the brand pivot
     • inner divider         → bold hairline
     • sub-label             → HIGH-EMPHASIS caption (flanked by hairlines)
     • SVG pivot glyph       → the fulcrum (支点)
============================================================ */
.spectrum-anchor {
  display: grid;
  /* 7 rows: rule-h | brand | rule | [space] | ▼ arrow | [space] | sub
     The two 1fr rows push the ▼ to the vertical midpoint and the
     subtitle to the bottom — so ▼ shares its Y with the
     .spectrum-connector hairlines flanking the anchor. */
  grid-template-rows: auto auto auto 1fr auto 1fr auto;
  align-items: center;
  justify-items: center;          /* center every child horizontally */
  padding: 8px 22px;
  text-align: center;
  min-width: 150px;
  position: relative;
}
/* Balance beam — thicker, brighter than before */
.spectrum-anchor-rule-h {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}
.spectrum-anchor-brand {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1;
}
/* Inner divider — bolder, wider */
.spectrum-anchor-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  margin: 6px 0;
}
/* Downward arrow — placed in row 5 so it sits at the anchor's
   vertical midpoint, aligned with the .spectrum-connector hairlines. */
.spectrum-anchor-arrow-down {
  grid-row: 5;
  display: block;
  line-height: 0;
}
.spectrum-anchor-arrow-svg {
  display: block;
  width: 14px;
  height: 22px;
}
/* Two-line subtitle — placed in row 7 (bottom of the grid) so that
   MIDDLE aligns with the RISK row and THE SMART aligns with the PRICE
   row in the left pole (spectrum-grid uses align-items: stretch). */
.spectrum-anchor-sub {
  grid-row: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  gap: 4px;
  padding-top: 8px;          /* breathing room above the subtitle */
}
.spectrum-anchor-sub-row1 {
  color: #F59E0B;            /* PRICE gold — echoes left pole's PRICE */
  font-size: 1.1rem;
  letter-spacing: 0.22em;
}
.spectrum-anchor-sub-row2 {
  color: #C81318;            /* RISK red — echoes right pole's RISK */
  font-size: 1.1rem;
  letter-spacing: 0.22em;
}

/* ---- Bottom axis: a single hairline with the SHANBO marker centered ---- */
.spectrum-axis {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.spectrum-axis-end {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.spectrum-axis-track {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.5);
}
.spectrum-axis-marker {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background: #C81318;
  border-radius: 50%;
}

/* ---- Responsive: stack on small screens ---- */
@media (max-width: 880px) {
  .value-spectrum { max-width: 100%; }
  .spectrum-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .spectrum-pole--right {
    text-align: left;
    align-items: flex-start;
    border-right: none;
    border-left: 2px solid #F59E0B;
    padding: 4px 0 4px 16px;
  }
  .spectrum-pole--right .spectrum-pole-points li {
    padding-left: 14px;
    padding-right: 0;
  }
  .spectrum-pole--right .spectrum-pole-points li::before {
    right: auto;
    left: 0;
  }
  .spectrum-anchor { padding: 8px 0; }
}

@media (max-width: 480px) {
  .spectrum-anchor-brand { font-size: 1.3rem; }
  .spectrum-axis-end { font-size: 0.55rem; letter-spacing: 0.16em; }
}

/* ---- Reusable section photo (used by sections 1, 2, 3, 4) ----
   - In the value section, sits inside the right grid column.
   - In position/iron/used sections, it's absolute-positioned to fill
     the empty half (right for --left content, left for --right content). */
.value-photo {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  border-left: 4px solid var(--color-brand);
  min-height: 420px;
}
.value-photo img {
  display: block;
  width: 100%; height: 100%;
  min-height: 420px;
  max-height: 560px;
  object-fit: cover;
}
.value-photo .photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-md) var(--space-lg);
  display: flex; align-items: center; gap: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.photo-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--color-brand);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 2px;
  flex-shrink: 0;
}
.photo-caption-text {
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.92);
}

/* Section photo — full-bleed background, black + mask design (sections 3/4).
   The photo is a CSS background on the section itself; dark mask layered on top
   keeps text readable. Section content sits above via z-index. */
.screen-iron,
.screen-used {
  position: relative;
  background-color: var(--color-black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* Per-section photo assignment */
.screen-iron     { background-image: url('../_shared-media/home/hero-3.jpg'); }
.screen-used     { background-image: url('../_shared-media/home/hero-4.jpg'); }
/* Dark mask overlay — slight directional bias per section so text reads */
.screen-iron::before,
.screen-used::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 100%);
}
/* Section 3 — text on left, darker on the left side of mask */
.screen-iron::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(10,10,10,0.55) 0%, transparent 65%);
}
/* Section 4 — text on right, darker on the right side of mask */
.screen-used::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent 35%, rgba(10,10,10,0.55) 100%);
}
/* Content container above the masks */
.screen-iron .screen-content,
.screen-used .screen-content {
  position: relative;
  z-index: 2;
}
/* Old .section-photo element kept in HTML for captions; hide the img only
   (photo is now the section's CSS background). */
.screen-iron .section-photo > img,
.screen-used .section-photo > img { display: none !important; }
.screen-iron .section-photo,
.screen-used .section-photo { position: absolute; inset: 0; pointer-events: none; }
/* Section caption — small tag pinned to top-left of the photo section */
.screen-iron .photo-caption,
.screen-used .photo-caption {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  padding: 6px 12px;
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ---- Screen 2: Position (full-bleed photo hero-6.jpg placeholder + dark mask) ---- */
.screen-position {
  background-color: var(--color-black);
  background-image: url('../_shared-media/home/hero-6.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  position: relative;
  padding: var(--space-5xl) 0;
  color: #fff;
  overflow: hidden;
}
.screen-position::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 100%);
}
.screen-position::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent 35%, rgba(10,10,10,0.55) 100%);
}
.screen-position .screen-content { position: relative; z-index: 2; max-width: 720px; margin-left: auto; }
.screen-position .screen-title { margin-bottom: var(--space-3xl); color: #fff; }
.screen-position .screen-number { color: #fff; background: rgba(200,19,24,0.2); padding: 2px 10px; border-radius: 2px; }
.screen-position .screen-paragraph { color: rgba(255,255,255,0.88); }
.screen-position .pull-quote { border-left-color: var(--color-brand); }
.screen-position .pull-quote-text { color: #fff; }
.screen-position .pull-quote-cite { color: rgba(255,255,255,0.55); }
/* Hide the .section-photo for section 2 — photo is the section bg */
.screen-position .section-photo { display: none; }
/* Caption pinned to top-left of section 1 and 2 (full-bleed photo bg) */
.screen-value .photo-caption,
.screen-position .photo-caption {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  padding: 6px 12px;
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ---- Pull quote (Screen 2 — replaces removed coordinate chart) ---- */
.pull-quote {
  position: relative;
  margin: var(--space-3xl) 0;
  padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) var(--space-3xl);
  border-left: 3px solid var(--color-brand);
  max-width: 760px;
}
.pull-quote-mark {
  position: absolute;
  left: var(--space-md);
  top: -10px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-brand);
  opacity: 0.5;
}
.pull-quote-text {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.45;
  color: var(--color-charcoal);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.pull-quote-figure {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 800;
  color: var(--color-brand);
  letter-spacing: 0;
  margin-right: 0.1em;
}
.pull-quote-cite {
  display: block;
  margin-top: var(--space-md);
  font-size: 0.8rem;
  font-style: normal;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Screen 3: Iron vs Icon (full-bleed photo + dark mask, white text) ---- */
.screen-iron {
  padding: var(--space-5xl) 0;
  border-bottom: 1px solid var(--color-line);
}
.screen-iron .screen-number { color: #fff; background: rgba(200,19,24,0.2); padding: 2px 10px; border-radius: 2px; }
.screen-iron .screen-paragraph { color: rgba(255,255,255,0.88); }
.screen-iron .split-main { color: #fff; }
.screen-iron .split-block--alt .split-main { color: var(--color-brand); }
.screen-iron .split-prefix { color: rgba(255,255,255,0.55); }
.screen-iron .split-divider { background: rgba(255,255,255,0.4); }

.screen-title--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md) var(--space-2xl);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}
.split-block {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-md);
}
.split-prefix {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  align-self: center;
  position: relative;
  top: -0.12em;
}
.split-main {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
  line-height: 0.95;
}
.split-block--alt .split-main { color: var(--color-brand); font-weight: 800; }
.split-divider {
  display: inline-block;
  width: 1px;
  height: 0.7em;
  background: var(--color-text-dim);
  align-self: center;
  margin: 0 var(--space-md);
}

/* ---- Iron vs Icon: two-up stat callout (replaces removed bar chart) ---- */
.iron-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
  max-width: 760px;
}
.iron-stat {
  padding: var(--space-2xl);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-med) var(--ease-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.05);
}
.iron-stat:hover { transform: translateY(-4px); }
.iron-stat--iron {
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 32px -6px rgba(255,255,255,0.12);
}
.iron-stat--iron:hover {
  border-color: rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 20px 48px rgba(0,0,0,0.55),
    0 0 40px -4px rgba(255,255,255,0.18);
}
.iron-stat--icon {
  border-color: rgba(200,19,24,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,90,90,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(200,19,24,0.1),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 32px -6px rgba(200,19,24,0.3);
}
.iron-stat--icon:hover {
  border-color: rgba(200,19,24,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,120,120,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(200,19,24,0.2),
    0 20px 48px rgba(0,0,0,0.55),
    0 0 44px -2px rgba(200,19,24,0.45);
}
.iron-stat-figure {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.iron-stat--icon .iron-stat-figure { color: #FF5560; }
.iron-stat-unit {
  font-size: 0.6em;
  font-weight: 700;
  margin-left: 0.05em;
}
.iron-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.iron-stat--icon .iron-stat-label { color: #FF8A92; }
.iron-stat-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* ---- Screen 4: Used Equipment — vertical two-block stack ---- */
.used-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}
.used-block {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: var(--space-2xl);
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--dur-med) var(--ease-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.05);
}
.used-block--bad {
  border-color: rgba(200,19,24,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,90,90,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(200,19,24,0.1),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 32px -6px rgba(200,19,24,0.3);
}
.used-block--bad:hover {
  border-color: rgba(200,19,24,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,120,120,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(200,19,24,0.2),
    0 20px 48px rgba(0,0,0,0.55),
    0 0 44px -2px rgba(200,19,24,0.45);
}
.used-block--good {
  border-color: rgba(107,203,107,0.25);
  box-shadow:
    inset 0 1px 0 rgba(143,232,154,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(107,203,107,0.1),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 32px -6px rgba(107,203,107,0.25);
}
.used-block--good:hover {
  border-color: rgba(107,203,107,0.6);
  box-shadow:
    inset 0 1px 0 rgba(170,250,180,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(107,203,107,0.2),
    0 20px 48px rgba(0,0,0,0.55),
    0 0 44px -2px rgba(107,203,107,0.4);
}
.used-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.used-block-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.used-block-icon--bad {
  background: rgba(200,19,24,0.2);
  color: #FF5560;
  border: 1px solid rgba(200,19,24,0.55);
}
.used-block-icon--good {
  background: rgba(107,203,107,0.18);
  color: #8FE89A;
  border: 1px solid rgba(107,203,107,0.55);
}
.used-block-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.used-block--bad .used-block-title { color: #FF5560; }
.used-block--good .used-block-title { color: #8FE89A; }
.used-block-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.used-block-list li {
  font-size: 0.92rem;
  color: var(--color-ink);
  padding-left: var(--space-md);
  position: relative;
  line-height: 1.6;
}
.used-block-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.4);
}
.used-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
  margin: 0 var(--space-3xl);
}

/* ---- Screen 4: Used Equipment (full-bleed photo + dark mask, white text) ---- */
.screen-used {
  padding: var(--space-5xl) 0;
  border-bottom: 1px solid var(--color-line);
}
.screen-used .screen-number { color: #fff; background: rgba(200,19,24,0.2); padding: 2px 10px; border-radius: 2px; }
.screen-used .screen-title { color: #fff; }
.screen-used .screen-paragraph { color: rgba(255,255,255,0.88); }

.cost-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
  max-width: 800px;
}
.cost-card {
  background: rgba(21,21,21,0.92);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: var(--space-xl);
  transition: all var(--dur-med) var(--ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.cost-card h1, .cost-card h2, .cost-card h3, .cost-card p, .cost-card span, .cost-card strong { color: #fff; }
.cost-card .cost-card-meta, .cost-card .cost-card-tag { color: rgba(255,255,255,0.7); }
.cost-card:hover { transform: translateY(-4px); }
.cost-card--bad:hover { border-color: rgba(200,19,24,0.3); box-shadow: 0 8px 32px rgba(200,19,24,0.1); }
.cost-card--good:hover { border-color: rgba(100,200,100,0.2); box-shadow: 0 8px 32px rgba(100,200,100,0.08); }
.cost-card-icon { margin-bottom: var(--space-md); }
.cost-card--bad .cost-card-icon { color: var(--color-brand); }
.cost-card--good .cost-card-icon { color: #6BCB6B; }
.cost-card h4 {
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: var(--space-md);
}
.cost-card--bad h4 { color: var(--color-brand); }
.cost-card--good h4 { color: #6BCB6B; }
.cost-card ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.cost-card li {
  font-size: 0.85rem; color: var(--color-text-muted);
  padding-left: var(--space-md);
  position: relative;
}
.cost-card li::before { content: '—'; position: absolute; left: 0; color: var(--color-text-dim); }

/* ---- Screen 5+6: Merged closer (full-bleed photo + dark mask) ----
   "The Economics Make Sense." → "Your Project. Our Promise." */
.screen-economics {
  background-color: var(--color-black);
  background-image: url('../_shared-media/home/hero-5.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--color-line);
  position: relative;
  padding: var(--space-5xl) 0 var(--space-4xl);
  color: #fff;
  overflow: hidden;
}
/* Dark mask — diagonal with the photo as the second layer */
.screen-economics::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.6) 100%);
  background-blend-mode: multiply;
  z-index: 0;
}
/* Subtle red glow */
.screen-economics::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% 30%, rgba(200,19,24,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.screen-economics .screen-content {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; z-index: 2;
}
.screen-economics .screen-title { margin-bottom: var(--space-xl); color: #fff; }
.screen-economics .screen-number { color: #fff; background: rgba(200,19,24,0.2); padding: 2px 10px; border-radius: 2px; }
.screen-economics .screen-body-text { text-align: center; max-width: 720px; color: rgba(255,255,255,0.88); }
.screen-economics .btn-outline--light { color: #fff; border-color: rgba(255,255,255,0.35); }
.screen-economics .btn-outline--light:hover { color: var(--color-brand); border-color: var(--color-brand); }
.screen-economics .closure-return { margin: var(--space-3xl) 0 var(--space-xl); }
.screen-economics .closure-return .closure-text { color: #fff; }
.screen-economics .closure-return .closure-quote { color: var(--color-brand); opacity: 0.6; }
.screen-economics .closure-return--dark { color: #fff; }
.screen-economics .cta-sub--dark { color: rgba(255,255,255,0.55); }
.screen-economics .cta-sub--dark a { color: var(--color-brand); }
.screen-economics .screen-body-text--dark { color: rgba(255,255,255,0.78); text-align: center; max-width: 720px; }

/* Divider between economics recap and promise quote, in the merged section */
.closure-divider {
  width: 100%;
  max-width: 520px;
  height: 1px;
  margin: var(--space-4xl) auto var(--space-2xl);
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.18) 20%, rgba(200,19,24,0.55) 50%, rgba(255,255,255,0.18) 80%, transparent 100%);
  position: relative;
}
.closure-divider::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 5px;
  background: var(--color-brand);
  border-radius: 1px;
}

/* ---- Screen 6: Promise (clean full-black CTA closer) ---- */
.screen-promise {
  background: var(--color-black);
  position: relative;
  padding: var(--space-5xl) 0 var(--space-4xl);
  border-top: 1px solid var(--color-line);
  overflow: hidden;
}
.screen-promise::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(200,19,24,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(200,19,24,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.screen-promise .screen-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.screen-promise .screen-title { color: #fff; }
.screen-promise .screen-number--dark { color: var(--color-brand); }
.screen-promise .screen-body-text--dark { color: rgba(255,255,255,0.78); text-align: center; max-width: 720px; }
.screen-promise .cta-sub--dark { color: rgba(255,255,255,0.55); }
.screen-promise .cta-sub--dark a { color: var(--color-brand); }

/* ---- Centered content utility (replaces the old --left/--right pair) ---- */
.screen-content--center {
  margin-left: auto; margin-right: auto;
  max-width: 100%;
  padding: 0 var(--space-lg);
  text-align: center;
}
.screen-title--centered { text-align: center; }
.screen-body-text--centered { text-align: center; }
.screen-body--centered { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.pull-quote--centered { margin-left: auto; margin-right: auto; }
.screen-actions--centered { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
/* Two buttons side-by-side in a centered row (e.g. promise section) */
.screen-actions--row {
  display: flex; flex-direction: row;
  gap: var(--space-lg);
  justify-content: center; align-items: center;
  flex-wrap: wrap;
}

/* Outline button variant for light backgrounds (was: white-on-dark) */
.btn-outline--light {
  background: transparent;
  color: var(--color-charcoal);
  border: 2px solid var(--color-line);
}
.btn-outline--light:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  transform: translateY(-2px);
}

.closure-return {
  display: flex; align-items: center; gap: var(--space-md);
  margin: var(--space-2xl) 0;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  width: 100%; max-width: 600px;
  justify-content: center;
}
.closure-return--dark {
  border-color: rgba(255,255,255,0.18);
}
.closure-quote {
  font-family: Georgia, serif;
  font-size: 3rem; line-height: 1; color: var(--color-brand);
  opacity: 0.4;
}
.closure-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: 0.02em;
  color: #fff;
}
.cta-sub {
  margin-top: var(--space-md);
  font-size: 0.85rem; color: var(--color-text-dim);
}
.cta-sub a { color: var(--color-brand); }
.cta-sub a:hover { text-decoration: underline; }

/* ---- Stats Banner (light theme) ---- */
.stats-banner {
  background: var(--color-card);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-4xl) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-3xl);
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.stats-grid .stat-item { min-width: 0; }
.stat-item { display: flex; flex-direction: column; gap: var(--space-xs); }
.stat-number {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  color: var(--color-charcoal);
}
.stat-label {
  font-size: 0.8rem; font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ---- Footer (light, matches overall B2B palette) ---- */
.site-footer {
  background: var(--color-page);
  color: var(--color-text);
  padding: var(--space-4xl) 0 var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.site-footer .brand-mark { color: var(--color-black); }
/* Footer logo: full-size brand wordmark (red+black for light footer bg) */
.footer-logo {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: var(--space-md);
}
.site-footer .footer-heading { color: var(--color-charcoal); }
.site-footer .footer-desc,
.site-footer .footer-links a { color: var(--color-text-muted); }
.site-footer .footer-links a:hover { color: var(--color-brand); }
.site-footer .footer-address { color: var(--color-text-muted); }
.site-footer .footer-address a { color: var(--color-graphite); }
.site-footer .footer-address a:hover { color: var(--color-brand); }
.site-footer .footer-bottom { border-top-color: var(--color-line); }
.site-footer .copyright { color: var(--color-text-dim); }
.site-footer .legal-links a { color: var(--color-text-muted); }
.site-footer .legal-links a:hover { color: var(--color-brand); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.footer-col--brand .brand-mark { font-size: 1.3rem; display: inline-flex; margin-bottom: var(--space-md); }
.footer-desc { font-size: 0.85rem; color: var(--color-text-muted); max-width: 320px; line-height: 1.7; }
.footer-heading {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-charcoal);
  margin-bottom: var(--space-lg);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-links a {
  font-size: 0.85rem; color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--color-brand); }
.footer-address { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.8; }
.footer-address a { color: var(--color-graphite); }
.footer-address a:hover { color: var(--color-brand); }
.footer-bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.copyright { font-size: 0.75rem; color: var(--color-text-dim); }

/* ---- Section Nav Dots ---- */
.section-nav {
  position: fixed; right: var(--space-lg); top: 50%;
  transform: translateY(-50%); z-index: var(--z-section-nav);
}
.section-nav ul { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.section-nav a {
  display: block; width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
}
.section-nav a::before {
  content: attr(aria-label);
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem; font-weight: 500;
  color: var(--color-text-dim);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.section-nav a:hover::before, .section-nav a.active::before { opacity: 1; }
.section-nav a.active { background: var(--color-brand); box-shadow: 0 0 12px rgba(200,19,24,0.5); }
.section-nav a:hover { background: var(--color-text-muted); }

/* ---- Reveal Animations ---- */
.reveal-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal-up.revealed {
  opacity: 1; transform: translateY(0);
}

/* ---- Page Hero (for sub-pages) — full-bleed dark photo + mask + white text ---- */
.page-hero {
  position: relative;
  min-height: 56vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--space-3xl)) var(--space-lg) var(--space-3xl);
  background-color: var(--color-black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 100%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(200,19,24,0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  max-width: 800px;
  position: relative; z-index: 2;
  color: #fff;
}
.page-hero-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,0.85);
  max-width: 600px;
  position: relative; z-index: 2;
}

/* Per-page photo classes — match the home .screen-hero style */
.page-hero--about   { background-image: url('../_shared-media/home/hero-1.jpg'); }
.page-hero--contact { background-image: url('../_shared-media/home/hero-3.jpg'); }
.page-hero--parts   { background-image: url('../_shared-media/home/hero-5.jpg'); }

/* ---- Section Header (shared) ---- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-md);
}
.section-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  max-width: 700px;
  margin: 0 auto var(--space-md);
}
.section-header p:not(.eyebrow) {
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ---- Product Category Cards ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
  padding: var(--space-3xl) var(--space-lg);
  max-width: var(--container-wide);
  margin: 0 auto;
}
.category-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all var(--dur-med) var(--ease-out);
}
.category-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,19,24,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.category-card figure {
  height: 240px;
  background: var(--color-bg-mid);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.category-card figure img { width: 100%; height: 100%; object-fit: cover; }
.category-info { padding: var(--space-xl); }
.category-info h3 {
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: var(--space-sm);
}
.category-info p {
  font-size: 0.88rem; color: var(--color-text-muted);
  line-height: 1.7; margin-bottom: var(--space-md);
}
.category-meta {
  display: block;
  font-size: 0.75rem; color: var(--color-text-dim);
  font-family: var(--font-mono);
  margin-bottom: var(--space-md);
}
.entry-link {
  font-size: 0.85rem; font-weight: 600; color: var(--color-brand);
  transition: gap var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: var(--space-xs);
}
.entry-link:hover { gap: var(--space-md); }

/* ---- Model List (product detail) ---- */
.model-list {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-3xl);
}
.model-card article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.model-media {
  background: var(--color-bg-mid);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.model-media img { width: 100%; height: 100%; object-fit: cover; }
.model-info { padding: var(--space-xl); }
.model-info h3 { font-size: 1.6rem; margin-bottom: var(--space-sm); }
.model-tagline { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: var(--space-lg); }

/* ---- Spec Table ---- */
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); }
.spec-table caption { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--space-sm); text-align: left; }
.spec-table th, .spec-table td {
  padding: var(--space-sm) 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.spec-table th { font-weight: 600; color: var(--color-text-muted); width: 45%; }
.spec-table td { color: var(--color-charcoal); }

/* ---- Options List ---- */
.options {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
.options h2 { margin-bottom: var(--space-lg); font-size: 1.6rem; }
.options-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.options-list li {
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem; color: var(--color-text-muted);
}

/* ---- CTA Banner (light) ---- */
.cta-banner {
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
  background: var(--color-card);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.cta-banner h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); margin-bottom: var(--space-md); }
.cta-banner p { color: var(--color-text-muted); margin-bottom: var(--space-xl); }

/* ---- Parts Sections ---- */
.parts-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}
.parts-cat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--dur-med) var(--ease-out);
}
.parts-cat-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
}
.parts-cat-card h3 { font-size: 1.1rem; margin-bottom: var(--space-sm); }
.parts-cat-card p { font-size: 0.82rem; color: var(--color-text-muted); }

.category-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.category-section h2 { margin-bottom: var(--space-md); }
.category-section p { color: var(--color-text-muted); margin-bottom: var(--space-lg); max-width: 700px; }

/* ---- Contact Cards ---- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}
.contact-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-2xl);
}
.contact-card h3 { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.contact-card p { font-size: 1rem; margin-bottom: var(--space-sm); }
.contact-card a { color: var(--color-brand); }
.contact-card a:hover { color: var(--color-brand-dark); }
.contact-meta { font-size: 0.78rem; color: var(--color-text-dim); }

/* ---- Form ---- */
.contact-form-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
.inquiry-form {
  max-width: 700px;
  margin: var(--space-2xl) auto 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.form-row--actions {
  grid-template-columns: 1fr;
  align-items: center;
}
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  display: block;
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  color: var(--color-charcoal);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(200,19,24,0.15);
}
.form-field select { color: var(--color-text-muted); }
.form-field textarea { resize: vertical; min-height: 120px; }

.checkbox {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 0.82rem; color: var(--color-text-dim);
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-brand);
}

/* Form submission result banner (success / error) */
.form-result {
  max-width: 700px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-lg) var(--space-xl);
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-result--success {
  background: #e6f4ea;
  border: 1px solid #bfe1c8;
  border-left: 4px solid #1e7a36;
  color: #0f5132;
  font-weight: 500;
}
.form-result--success a {
  color: #0f5132;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-result--error {
  background: #fdecea;
  border: 1px solid #f5c2c7;
  border-left: 4px solid #b00020;
  color: #7a0010;
  font-weight: 500;
}
.form-result--error a {
  color: #7a0010;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Map Section ---- */
.map-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-3xl);
}
.map-figure { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.map-figure figcaption { padding: var(--space-md); font-size: 0.8rem; color: var(--color-text-dim); }
.map-placeholder {
  height: 320px;
  background: var(--color-bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim);
  font-size: 0.85rem;
}

/* ---- Capability Cards (About) ---- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-3xl);
}
.capability-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-xl);
}
.capability-card h3 { font-size: 1.1rem; margin-bottom: var(--space-sm); }
.capability-card p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-md); }
.capability-stat {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; font-family: var(--font-mono);
  color: var(--color-brand);
  padding: 4px 12px;
  border: 1px solid rgba(200,19,24,0.3);
  border-radius: 2px;
}

/* ---- Heritage (About) ---- */
.heritage {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
.heritage-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.heritage-text p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.heritage-media { background: var(--color-bg-mid); border-radius: 8px; overflow: hidden; min-height: 300px; }
.heritage-media img { width: 100%; object-fit: cover; }
.heritage-media figcaption { padding: var(--space-sm) var(--space-md); font-size: 0.78rem; color: var(--color-text-dim); }

/* ---- Mission ---- */
.mission {
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
  background: var(--color-black);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.mission .eyebrow {
  /* On dark BG, bump the eyebrow from brand red to a brighter red-soft tint
     so it reads cleanly without losing brand identity */
  color: #ff5a5f;
  text-shadow: 0 0 12px rgba(255, 90, 95, 0.35);
}
.mission h2 {
  margin-bottom: var(--space-md);
  color: #fff;
}
.mission p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
}

/* ---- Component Cards (Parts) ---- */
.component-list {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-2xl);
}

/* ---- Featured Parts (real photographed inventory) ---- */
.featured-parts {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-lg);
}
.featured-parts .section-header { margin-bottom: var(--space-3xl); }
.featured-parts-list {
  display: flex; flex-direction: column; gap: var(--space-3xl);
  list-style: none; padding: 0; margin: 0;
}
.featured-part article {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.featured-part article:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.featured-part-media {
  background: linear-gradient(180deg, #F0F0F0 0%, #E0E0E0 100%);
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.featured-part-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--dur-med) var(--ease-out);
}
.featured-part:hover .featured-part-media img { transform: scale(1.02); }
.featured-part-info {
  padding: var(--space-2xl) var(--space-2xl);
  display: flex; flex-direction: column;
}
.part-number {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-brand);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.featured-part-info h3 {
  font-size: 1.35rem; font-weight: 800;
  color: var(--color-charcoal);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}
.part-fit {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}
.featured-part-info .spec-table { margin-top: 0; margin-bottom: var(--space-xl); }
.featured-part-info .btn { align-self: flex-start; }
.featured-part-info .btn-outline {
  border-color: var(--color-line);
  color: var(--color-charcoal);
}
.featured-part-info .btn-outline:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-soft);
}

/* Stock badge (green pill) */
.stock-badge {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.3;
}
.stock-badge--in {
  background: rgba(46, 160, 67, 0.12);
  color: #1a7a32;
  border: 1px solid rgba(46, 160, 67, 0.3);
}

/* ---- Parts Inquiry Form Section ---- */
.parts-inquiry-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-lg);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.parts-inquiry-section .section-header { margin-bottom: var(--space-2xl); }
.parts-inquiry-form { max-width: 760px; }
.parts-inquiry-form .form-row--actions {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.parts-inquiry-form .form-row--actions .checkbox { margin-bottom: 0; }
.form-actions {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-md);
}
.form-actions .inquiry-note { margin: 0; text-align: left; }
.form-actions .btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}
.form-actions .btn-primary:hover {
  background: #a30f13;
  border-color: #a30f13;
  color: #fff;
}

@media (max-width: 768px) {
  .featured-part article { grid-template-columns: 1fr; }
  .featured-part-media { min-height: 240px; }
  .featured-part-info { padding: var(--space-xl) var(--space-lg); }
}

.component-card article {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-2xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.component-media {
  background: var(--color-bg-mid);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.component-media img { width: 100%; height: 100%; object-fit: cover; }
.component-info { padding: var(--space-xl); }
.component-info h3 { font-size: 1.3rem; margin-bottom: var(--space-xs); }
.component-fit { font-size: 0.82rem; color: var(--color-text-dim); margin-bottom: var(--space-lg); }

/* ---- Placeholder Visual for missing images ---- */
.img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-bg-mid), var(--color-bg-card));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim);
  font-size: 0.8rem;
  border: 1px dashed var(--color-border);
}

/* ---- Responsive ---- */

/* Tablet */
@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .menu-toggle { display: block; }
  .primary-nav.open {
    display: flex;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-line);
    z-index: var(--z-nav);
  }
  .primary-nav.open ul {
    flex-direction: column;
    gap: var(--space-lg);
  }
  .primary-nav.open a { font-size: 1.1rem; color: var(--color-text-muted); }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .model-card article { grid-template-columns: 1fr; }
  .model-media { min-height: 240px; }

  .component-card article { grid-template-columns: 1fr; }

  .heritage-body { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --header-h: 60px; }

  .screen { min-height: 100svh; padding: var(--header-h) 0 var(--space-2xl); }
  .screen-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .screen-title--hero .title-line.accent { font-size: clamp(2rem, 9vw, 3rem); }
  .screen-subtitle { font-size: 0.95rem; }

  /* On mobile the left/right layout collapses to centered.
     The mask direction is no longer needed — content is centered. */
  .screen .screen-content--left,
  .screen .screen-content--right {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 0 var(--space-lg);
  }
  /* On tablet/mobile, hide the geometric accent mark on the divider
     (full-width line still shows). Slightly tighter for narrow screens. */
  .section-divider::before,
  .section-divider::after { width: 18px; }
  .section-divider::before { left: calc(50% - 38px); }
  .section-divider::after  { right: calc(50% - 38px); }

  .pillars { flex-direction: column; gap: var(--space-lg); }
  .pillar-line { width: 100%; height: 1px; }

  .cost-grid { grid-template-columns: 1fr; }

  .iron-stats { grid-template-columns: 1fr; gap: var(--space-lg); }

  .used-stack { gap: var(--space-lg); }
  .used-block { padding: var(--space-xl); }
  .used-block-title { font-size: 1.1rem; }
  .used-divider { margin: 0 var(--space-xl); }

  .pull-quote { padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl); }
  .pull-quote-text { font-size: 1.15rem; }

  .split-block { gap: var(--space-sm); }
  .split-prefix { font-size: 0.5em; }
  .split-divider { display: none; }
  .screen-title--split { gap: var(--space-md) var(--space-lg); }

  .section-nav { display: none; }

  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-desc { margin: 0 auto; }
  .footer-address { text-align: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }

  .category-grid { grid-template-columns: 1fr; }
  .category-card figure { height: 200px; }

  .contact-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .capability-grid { grid-template-columns: 1fr; }

  .parts-cat-grid { grid-template-columns: repeat(2, 1fr); }

  .heritage-media { min-height: 200px; }

  /* Value section: photo drops below text on tablet/mobile */
  .value-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }

  /* Standalone section photos (sections 2/3/4): drop below the text
     and span full width on tablet/mobile */
  .section-photo {
    position: relative;
    width: 100%;
    height: 360px;
    top: auto; bottom: auto; left: auto; right: auto;
    order: 2;
  }
  .screen-position .screen-content,
  .screen-iron .screen-content,
  .screen-used .screen-content { order: 1; }
  .screen-position::before,
  .screen-iron::before,
  .screen-used::before { display: none; }

  .screen-actions { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
  .screen-actions--centered { align-items: center; }
  .screen-actions--row { flex-direction: column; align-items: center; gap: var(--space-md); }
  .screen-promise .screen-actions { align-items: center; }

  .btn-xl { padding: 16px 32px; font-size: 1rem; }

  .header-actions .btn-outline.btn-sm { display: none; }
}

/* Small mobile */
@media (max-width: 480px) {
  .parts-cat-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .spectrum-anchor-brand { font-size: 1.25rem; }
  .spectrum-anchor-sub { font-size: 0.55rem; }
}
/* Even smaller phones: single column, centered */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Mobile landscape — short height, horizontal orientation */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-h: 56px; }
  .screen { min-height: 100svh; padding: var(--header-h) 0 var(--space-xl); }
  .screen-title { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .screen-title--hero .title-line.accent { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .screen-subtitle { font-size: 0.9rem; margin-bottom: var(--space-md); }
  .scroll-indicator { display: none; }
  .pillars { flex-direction: row; gap: var(--space-md); margin-top: var(--space-lg); }
  .pillar-line { width: 1px; height: 30px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
  .iron-stats { grid-template-columns: 1fr 1fr; }
  .section-nav { display: block; right: var(--space-sm); }
  .section-nav a { width: 8px; height: 8px; }
}

/* Ultra-small phones (≤360px) — shrink hero geo decorations */
@media (max-width: 360px) {
  .geo-rect--1 {
    width: 60vw; height: 60vw; max-width: 220px; max-height: 220px;
    top: -5%; right: -15%;
  }
  .geo-rect--2 {
    width: 45vw; height: 45vw; max-width: 160px; max-height: 160px;
    bottom: -3%; left: -10%;
  }
  .geo-line--h { width: 25%; }
  .geo-line--v { height: 30%; right: 8%; }
  .screen-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .screen-title--hero .title-line.accent { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .btn { padding: 10px 20px; font-size: 0.85rem; }
  .btn-xl { padding: 14px 24px; font-size: 0.95rem; }
  .stat-num { font-size: 1.6rem !important; }
}

/* ============================================================
   PRODUCT CATALOG (products.html) — 90-model grid
   Renders: 6 category tiles + 90 product cards (click-to-expand)
============================================================ */

/* Hero with background image and big stat strip */
.page-hero--catalog {
  position: relative;
  min-height: 60vh;
  padding: calc(var(--header-h) + var(--space-3xl)) 0 var(--space-3xl);
  background: var(--color-bg-dark);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.page-hero--catalog .page-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,15,15,0.7) 0%, rgba(15,15,15,0.85) 100%),
    url('../_shared-media/product-renders/excavators/large%20excavators/SH500/0.jpg') center center / cover no-repeat;
  opacity: 0.55;
}
.page-hero--catalog .page-hero-inner {
  position: relative; z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-lg);
}
.page-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-md);
}
.page-hero--catalog h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: var(--space-md);
}
.page-hero--catalog .page-hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}
.page-hero-stats {
  display: inline-flex;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  justify-content: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-lg);
}
.page-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}
.page-hero-stat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.page-hero-stat:not(:last-child) {
  padding-right: var(--space-2xl);
  border-right: 1px solid var(--color-border);
}

/* Category tile overrides for the catalog */
.category-card-skeleton {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--color-text-dim);
  font-style: italic;
}
.category-count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-sm);
}

/* All-products section */
.all-products {
  background: var(--color-page);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--color-line);
}
.all-products-loading {
  text-align: center;
  color: var(--color-text-dim);
  padding: var(--space-3xl);
  font-style: italic;
}

/* Each sub-category block (e.g. "Mini Excavators") */
.product-section {
  margin-bottom: var(--space-4xl);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.product-section:last-child { margin-bottom: 0; }
.product-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md) var(--space-3xl);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}
.product-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-right: var(--space-sm);
}
.product-section-title {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--color-white);
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.product-section-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
}

/* Product card grid */
.all-products-grid {
  display: block;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Compact product card (collapsed) */
.product-card {
  list-style: none;
}
.product-card > details {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
  height: 100%;
}
.product-card > details[open] {
  grid-column: 1 / -1;
  border-color: var(--color-brand);
  box-shadow: 0 12px 40px rgba(200,19,24,0.18);
}
.product-card > details:hover { border-color: rgba(200,19,24,0.4); }
.product-card > details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card > details > summary::-webkit-details-marker { display: none; }
.product-card-media {
  margin: 0;
  height: 180px;
  background: var(--color-bg-mid);
  overflow: hidden;
  flex-shrink: 0;
}
.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
.product-card > details:hover .product-card-media img {
  transform: scale(1.04);
}
.product-card-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.product-card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.04em;
  margin: 0;
}
.product-card-headline {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  min-height: 2.6em;
}
.product-card-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--space-sm) 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  list-style: none;
}
.product-card-specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.78rem;
  line-height: 1.4;
}
.spec-label {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.spec-value {
  color: var(--color-white);
  text-align: right;
  font-size: 0.78rem;
}
.product-card-toggle {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: 600;
}
.product-card > details[open] .product-card-toggle { color: var(--color-white); }

/* Expanded detail */
.product-card-detail {
  background: var(--color-bg-mid);
  border-top: 1px solid var(--color-brand);
}
.detail-inner {
  padding: var(--space-2xl);
  display: grid;
  gap: var(--space-2xl);
  max-width: 1100px;
  margin: 0 auto;
}
.detail-valueprop {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-white);
  font-weight: 500;
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-lg);
  margin: 0;
}
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-sm);
}
.detail-gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}
.detail-inner h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.detail-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.detail-specs tr { border-bottom: 1px solid var(--color-border); }
.detail-specs tr:last-child { border-bottom: 0; }
.detail-specs th {
  text-align: left;
  padding: 10px 12px 10px 0;
  font-weight: 500;
  color: var(--color-text-muted);
  width: 38%;
  vertical-align: top;
}
.detail-specs td {
  padding: 10px 0;
  color: var(--color-white);
  line-height: 1.55;
}
.detail-advantages {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-advantages li {
  padding: var(--space-md) var(--space-lg);
  background: rgba(21,21,21,0.6);
  border-left: 2px solid var(--color-brand);
  border-radius: 0 4px 4px 0;
}
.detail-advantages strong {
  display: block;
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.detail-advantages span {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}
.detail-source-note {
  padding: var(--space-md) var(--space-lg);
  background: rgba(200,19,24,0.08);
  border-left: 2px solid var(--color-brand);
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0;
}
.detail-cta {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Mobile tuning for product grid */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card > details[open] { grid-column: 1; }
  .detail-inner { padding: var(--space-lg); gap: var(--space-lg); }
  .detail-specs th { width: 45%; font-size: 0.82rem; }
  .detail-specs td { font-size: 0.82rem; }
  .page-hero-stats { gap: var(--space-lg); }
  .page-hero-stat:not(:last-child) { padding-right: var(--space-lg); }
}

/* ============================================================
   CATEGORY SUB-PAGES (bulldozers.html / excavators.html / etc.)
   and PRODUCT-DETAIL.HTML
============================================================ */

/* Breadcrumb */
.breadcrumb {
  padding: calc(var(--header-h) + var(--space-md)) 0 var(--space-md);
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
/* Pages with dark photo hero — breadcrumb blends into hero */
body:has(.ref-page-hero) .breadcrumb {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-line);
  color: rgba(255,255,255,0.7);
}
body:has(.ref-page-hero) .breadcrumb a { color: rgba(255,255,255,0.7); }
body:has(.ref-page-hero) .breadcrumb a:hover { color: var(--color-brand); }
body:has(.ref-page-hero) .breadcrumb-sep { color: rgba(255,255,255,0.4); }
body:has(.ref-page-hero) .breadcrumb-current { color: #fff; }
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb-sep { margin: 0 var(--space-sm); color: var(--color-text-dim); }
.breadcrumb-current { color: var(--color-white); }

/* Category page hero (sub-pages) */
.page-hero--category {
  position: relative;
  min-height: 38vh;
  padding: var(--space-3xl) 0;
  background: var(--color-bg-dark);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.page-hero--category .page-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.7), rgba(15,15,15,0.85));
}
.page-hero--category .page-hero-inner { position: relative; z-index: 2; text-align: center; }
.page-hero--category h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 var(--space-md);
}
.page-hero--category .page-hero-subtitle {
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* Filter pill row (sub-category anchors) */
.category-filter {
  background: var(--color-card);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  backdrop-filter: blur(8px);
}
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(10,10,10,0.92);
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-graphite);
  text-decoration: none;
  background: var(--color-page);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-pill:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-soft);
}
.filter-pill-count {
  color: var(--color-text-dim);
  font-size: 0.7rem;
}

/* Product sub-group section (within a category page) */
.product-subgroup {
  margin-bottom: var(--space-4xl);
  scroll-margin-top: calc(var(--header-h) + 60px);
}
.product-subgroup-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md) var(--space-3xl);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}
.product-subgroup-title {
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
  font-weight: 800;
  color: var(--color-white);
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.product-subgroup-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
}

/* Product listing card grid (used on sub-pages + related-models) */
.product-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.product-listing-card {
  list-style: none;
}
.product-listing-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-med) var(--ease-out);
}
.product-listing-card > a:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(200,19,24,0.15);
}
.product-listing-media {
  margin: 0;
  height: 180px;
  background: var(--color-bg-mid);
  overflow: hidden;
  flex-shrink: 0;
}
.product-listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
.product-listing-card > a:hover .product-listing-media img {
  transform: scale(1.04);
}
.product-listing-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.product-listing-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.04em;
  margin: 0;
}
.product-listing-headline {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-listing-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-sm) 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  list-style: none;
}
.product-listing-specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.74rem;
  line-height: 1.4;
}
.product-listing-specs .spec-label {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.66rem;
  flex-shrink: 0;
}
.product-listing-specs .spec-value {
  color: var(--color-brand);
  text-align: right;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.product-listing-cta {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: 600;
}

/* ============================================================
   PRODUCT DETAIL PAGE
============================================================ */

/* Loading & not-found states */
.detail-loading {
  padding: calc(var(--header-h) + var(--space-4xl)) 0 var(--space-4xl);
  text-align: center;
  color: var(--color-text-dim);
  font-style: italic;
  font-size: 0.95rem;
}
.detail-not-found {
  padding: calc(var(--header-h) + var(--space-4xl)) 0 var(--space-4xl);
  text-align: center;
  color: var(--color-text-muted);
}
.detail-not-found h1 {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}
.detail-not-found a {
  color: var(--color-brand);
  text-decoration: none;
}
.detail-not-found a:hover { text-decoration: underline; }

/* Detail hero (gallery + summary) */
.detail-hero {
  padding: var(--space-3xl) 0;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-line);
}
.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* Gallery — large hero image + horizontal thumbnails below it */
.detail-gallery {
  position: relative;
  min-width: 0;
}
/* On desktop, use inner grid for gallery: thumbs (vertical, left) + main image (right) */
@media (min-width: 1025px) {
  .detail-gallery {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-sm);
    position: relative;
  }
  .detail-gallery-main {
    grid-column: 2;
    grid-row: 1;
  }
  .detail-gallery-thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
  }
  .detail-gallery-thumbs .detail-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }
}
.detail-gallery-main {
  background: var(--color-bg-mid);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 480px;             /* matches reference: tall, full-bleed left */
  border: 1px solid var(--color-border);
  cursor: zoom-in;
}
.detail-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.detail-thumb {
  background: var(--color-bg-mid);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.detail-thumb:hover,
.detail-thumb.is-active {
  border-color: var(--color-brand);
}
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-gallery-empty {
  background: var(--color-bg-mid);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: var(--space-3xl);
  text-align: center;
  color: var(--color-text-dim);
}

/* Summary column */
.detail-summary {
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
  min-width: 0;
}
.detail-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand);
  text-decoration: none;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-brand);
  padding-bottom: 2px;
}
.detail-name {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 var(--space-md);
  color: var(--color-charcoal);
  letter-spacing: 0.02em;
}
.detail-headline {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--color-charcoal);
  font-weight: 500;
  margin: 0 0 var(--space-md);
}
.detail-subheadline {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}

/* Quick specs — 3-up cards (matches reference site "Engine power / Total weight / Engine model" pattern) */
.spec-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}
.spec-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: 4px;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.spec-card-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  line-height: 1.2;
}
.spec-card-value {
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.detail-cta-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Tabs (Description / Specifications / Features) */
.detail-tabs-section {
  padding: var(--space-3xl) 0;
  background: var(--color-page);
}
.detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
  overflow-x: auto;
}
.detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-md) var(--space-xl);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.detail-tab:hover { color: var(--color-charcoal); }
.detail-tab.is-active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}
.detail-tab-panel { display: none; }
.detail-tab-panel.is-active { display: block; }
/* Summary card — floating white info panel on light page */
.detail-summary-card {
  padding: var(--space-2xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
/* Extended specs in summary (like reference's cpcan list) */
.detail-ext-specs {
  margin: 0 0 var(--space-lg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}
.ext-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
  line-height: 1.45;
}
.ext-spec-row:last-child { border-bottom: none; }
.ext-spec-label {
  color: var(--color-text-muted);
  flex-shrink: 0;
  font-weight: 500;
}
.ext-spec-value {
  color: var(--color-charcoal);
  text-align: right;
  font-weight: 600;
  word-break: break-word;
  max-width: 55%;
}
@media (max-width: 768px) {
  .ext-spec-row { font-size: 0.78rem; padding: 6px 0; }
  .detail-summary-card { padding: var(--space-lg); }
}

.detail-empty {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-lg) 0;
}
.detail-prose p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 760px;
}

/* Specifications table */
.detail-specs-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl) var(--space-3xl);
  max-width: 1100px;
}
.detail-specs-section { min-width: 0; }
.detail-specs-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  margin: 0 0 var(--space-md);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.detail-specs-section-title::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 32px; height: 2px;
  background: var(--color-brand);
}
.detail-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.detail-specs-table tr { border-bottom: 1px solid var(--color-border); }
.detail-specs-table tr:last-child { border-bottom: 0; }
.detail-specs-table th {
  text-align: left;
  padding: 10px 12px 10px 0;
  font-weight: 500;
  color: var(--color-text-muted);
  width: 45%;
  vertical-align: top;
  font-size: 0.88rem;
}
.detail-specs-table td {
  padding: 10px 0;
  color: var(--color-charcoal);
  line-height: 1.55;
  font-size: 0.9rem;
}

/* Features grid — fixed 2 columns on desktop for tidy alignment */
.detail-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.detail-feature-card {
  background: var(--color-page);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-brand);
  border-radius: 0 6px 6px 0;
  padding: var(--space-xl);
  transition: all var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.detail-feature-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-3px);
}
.detail-feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
}
.detail-feature-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* Related models */
.detail-related {
  padding: var(--space-3xl) 0;
  background: var(--color-card);
  border-top: 1px solid var(--color-line);
}
.detail-related-title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-2xl);
  text-align: center;
}

/* Mobile tuning */
@media (max-width: 1024px) {
  .detail-hero-grid { grid-template-columns: 1fr; }
  .detail-summary { position: static; }
  .detail-gallery-main { height: 360px; }
  .detail-gallery-thumbs { grid-template-columns: repeat(5, 1fr); }
  .detail-specs-sections { grid-template-columns: 1fr; gap: var(--space-xl); }
  /* Revert vertical thumbs to horizontal on tablet */
  .detail-gallery { display: block; }
  .detail-gallery-thumbs { display: grid; flex-direction: unset; gap: 8px; margin-top: 12px; }
  .detail-gallery-thumbs .detail-thumb { width: auto; height: auto; aspect-ratio: 1; }
}
@media (max-width: 768px) {
  .product-listing-grid { grid-template-columns: 1fr; }
  .detail-gallery-main { height: 280px; }
  .detail-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .filter-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .filter-pill { white-space: nowrap; }
  .category-filter { position: static; }
  .detail-cta-row .btn { flex: 1; min-width: 0; }
  .detail-tabs { gap: 0; }
  .detail-tab { padding: var(--space-sm) var(--space-md); font-size: 0.7rem; }

  /* Detail page mobile refinements */
  .detail-hero { padding: var(--space-2xl) 0; }
  .detail-hero-grid { gap: var(--space-xl); }
  .detail-name { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .detail-headline { font-size: 1rem; }
  .spec-card-value { font-size: 0.85rem; }
  .spec-card-label { font-size: 0.58rem; }

  /* Specifications table: horizontal scroll on narrow screens */
  .detail-specs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .detail-specs-table { min-width: 460px; }
  .detail-specs-table th,
  .detail-specs-table td { padding: 12px 12px 12px 0; font-size: 0.85rem; }
  .detail-specs-table th { width: 40%; }

  /* Features: keep 2 columns down to tablet, 1 col on phones */
  .detail-features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .detail-feature-card { padding: var(--space-lg); }

  /* Thumbs: keep clickable, no overflow */
  .detail-thumb { border-width: 2px; }
}

@media (max-width: 480px) {
  .detail-gallery-main { height: 220px; }
  .detail-gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .detail-cta-row { flex-direction: column; }
  .detail-cta-row .btn { width: 100%; }
  .breadcrumb { font-size: 0.72rem; padding-top: calc(var(--header-h) + var(--space-sm)); padding-bottom: var(--space-sm); }
  .detail-features-grid { grid-template-columns: 1fr; }
  .spec-cards-row { grid-template-columns: 1fr; gap: 8px; }
  .spec-card-value { font-size: 0.85rem; }
}

/* Detail specs table wrapper (for horizontal scroll on small screens) */
.detail-specs-table-wrap { width: 100%; }

/* ============================================================
   PRODUCT DETAIL — REFERENCE-INSPIRED LAYOUT
   Scrolling single-page sections (replacing tabs)
============================================================ */

/* Inquiry form success state — green confirmation after submit */
.btn-success {
  background: #2ea043 !important;
  border-color: #2ea043 !important;
  color: #fff !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Section header pattern */
.detail-section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.detail-section-eb {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-sm);
}
.detail-section-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
}
.detail-section-sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Description Section — light card bg, images + text */
.detail-desc-section {
  background: var(--color-card);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--color-line);
}
.detail-desc-layout {
  max-width: 1000px;
  margin: 0 auto;
}
.detail-desc-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-2xl);
}
.detail-desc-text p {
  margin-bottom: var(--space-lg);
}
.detail-desc-sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-brand);
  padding-left: var(--space-md);
  margin-top: var(--space-lg);
  font-style: italic;
}
.desc-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.desc-image-grid figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-mid);
}
.desc-image-grid figure img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-med) var(--ease-out);
}
.desc-image-grid figure:hover img {
  transform: scale(1.03);
}

/* Specifications section */
.detail-specs-section {
  background: var(--color-card);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--color-line);
}

/* Features section */
.detail-feat-section {
  background: var(--color-card);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--color-line);
}

/* Video section */
.detail-video-section {
  background: var(--color-page);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--color-line);
}
.detail-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}
.detail-video-card {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-mid);
}
.detail-video-card iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Inquiry section */
.detail-inquiry-section {
  background: var(--color-page);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.detail-inquiry-form {
  max-width: 720px;
  margin: 0 auto;
}
.inquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.inquiry-full {
  margin-bottom: var(--space-lg);
}
.inquiry-note {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-dim);
  text-align: center;
}
.inquiry-note a {
  color: var(--color-brand);
  text-decoration: none;
}
.inquiry-note a:hover {
  text-decoration: underline;
}

/* Responsive for new sections */
@media (max-width: 768px) {
  .desc-image-grid { grid-template-columns: 1fr; }
  .desc-image-grid figure img { height: 220px; }
  .detail-video-grid { grid-template-columns: 1fr; }
  .inquiry-row { grid-template-columns: 1fr; }
  .detail-desc-section,
  .detail-specs-section,
  .detail-feat-section,
  .detail-video-section,
  .detail-inquiry-section { padding: var(--space-2xl) 0; }
}

/* ============================================================
   LIGHTBOX — Full-size image viewer
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms var(--ease-out);
}
.lightbox-close:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  background: rgba(0,0,0,0.5);
  padding: 6px 14px;
  border-radius: 20px;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms var(--ease-out);
}
.lightbox-nav:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
.lightbox-nav--prev { left: 24px; }
.lightbox-nav--next { right: 24px; }
@media (max-width: 768px) {
  .lightbox { padding: 16px; }
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-nav--prev { left: 8px; }
  .lightbox-nav--next { right: 8px; }
}

/* ============================================================
   LEGAL PAGES — Privacy Policy & Terms of Service
============================================================ */
.container--narrow {
  max-width: 820px;
  padding: 0 var(--space-lg);
}

.legal-content {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-dark);
  min-height: 60vh;
}

.legal-article {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text);
}

.legal-article h2 {
  font-size: 1.4rem;
  color: var(--color-charcoal);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.legal-article h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-article p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.legal-article ul {
  margin: var(--space-md) 0 var(--space-md) var(--space-xl);
  padding: 0;
}

.legal-article li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.legal-article a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.legal-article a:hover { color: var(--color-brand-light); }

.legal-article strong { color: var(--color-brand); font-weight: 600; }

.legal-notice {
  background: rgba(200, 19, 24, 0.08);
  border-left: 3px solid var(--color-brand);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-2xl);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  border-radius: 0 4px 4px 0;
}

.legal-notice strong { color: var(--color-brand); }

/* Footer bottom — add legal links */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2xl);
}

.legal-links {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.legal-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.legal-links a:hover { color: var(--color-brand); }

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
  .legal-article h2 { font-size: 1.2rem; }
}

/* ============================================================
   REFERENCE-STYLE CATALOG (shanboloader.com layout, SHANBO black skin)
   White product cards float on a black page; the page hero carries
   a faint workshop photo as a "weight" overlay.
============================================================ */

/* Catalog pages: light B2B base — but the .ref-page-hero is now dark cinematic */
body:has(.ref-page-hero) { background: var(--color-page); color: var(--color-text); }
body:has(.ref-page-hero) .page-hero { display: none; }

.ref-page-hero {
  position: relative;
  background-color: var(--color-black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 1px solid var(--color-line);
  padding: calc(var(--header-h) + var(--space-3xl)) 0 var(--space-3xl);
  min-height: 56vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ref-page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 100%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(200,19,24,0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.ref-page-hero > * { position: relative; z-index: 2; }
.ref-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 12px;
}
.ref-page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.08;
}
.ref-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  max-width: 760px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.ref-hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.ref-hero-stat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.ref-hero-stat strong {
  display: block;
  font-size: 1.6rem;
  color: #fff;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

/* Per-page photo classes for catalog (ref-page-hero) */
.ref-page-hero--products   { background-image: url('../_shared-media/home/hero-1.jpg'); }
.ref-page-hero--bulldozers { background-image: url('../_shared-media/home/hero-3.jpg'); }
.ref-page-hero--excavators { background-image: url('../_shared-media/product-renders/excavators/large%20excavators/SH500/0.jpg'); }
.ref-page-hero--loaders    { background-image: url('../_shared-media/home/hero-4.jpg'); }
.ref-page-hero--road-rollers { background-image: url('../_shared-media/home/hero-2.jpg'); }
.ref-page-hero--pipelayers { background-image: url('../_shared-media/home/hero-1.jpg'); }
.ref-page-hero--attachments{ background-image: url('../_shared-media/home/hero-5.jpg'); }

/* Top toggle pills — light theme */
.ref-top-pills-wrap {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--color-line);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.ref-top-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ref-top-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-graphite);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.18s var(--ease-out);
  white-space: nowrap;
}
.ref-top-pill:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 19, 24, 0.12);
}
.ref-top-pill.is-active {
  color: #fff;
  background: linear-gradient(135deg, #c81318 0%, #f59e0b 100%);
  border-color: #c81318;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(200, 19, 24, 0.30);
}

/* Sub-category anchor pills — light theme */
.ref-sub-pills-wrap {
  padding: 24px 0 12px;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-line);
}
.ref-sub-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ref-sub-pill {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-graphite);
  background: var(--color-page);
  border: 1px solid var(--color-line);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.18s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ref-sub-pill:hover {
  color: #fff;
  background: var(--color-brand);
  border-color: var(--color-brand);
  transform: translateY(-1px);
}
.ref-sub-pill.is-active {
  color: #fff;
  background: var(--color-brand);
  border-color: var(--color-brand);
}
.ref-sub-pill-count {
  display: inline-block;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-graphite);
}
.ref-sub-pill:hover .ref-sub-pill-count,
.ref-sub-pill.is-active .ref-sub-pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Subgroup section titles */
.ref-subgroup {
  padding: 40px 0 24px;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 100px;
}
.ref-subgroup:first-of-type { border-top: 0; }
.ref-subgroup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 18px;
  padding-left: 14px;
  position: relative;
  letter-spacing: 0.02em;
}
.ref-subgroup-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--color-brand), #f59e0b);
  border-radius: 2px;
}
.ref-subgroup-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 6px;
}

/* White product cards on black */
.ref-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.ref-card {
  list-style: none;
  background: #fff;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: all 0.2s var(--ease-out);
}
.ref-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(200, 19, 24, 0.32);
  border-color: var(--color-brand);
}
.ref-card > a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 20px 20px 22px;
}
.ref-card-eyebrow {
  font-size: 0.74rem;
  color: #888;
  margin-bottom: 6px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ref-card-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  line-height: 1.05;
}
.ref-card-image {
  background: #f3f3f3;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 16px;
  aspect-ratio: 16 / 11;
}
.ref-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ease-out);
}
.ref-card:hover .ref-card-image img {
  transform: scale(1.04);
}
.ref-card-noimg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 0.85rem;
}
.ref-card-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ref-card-specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.card-spec-label {
  color: #666;
  font-weight: 400;
  flex-shrink: 0;
}
.card-spec-value {
  color: #c81318;
  font-weight: 700;
  font-family: var(--font-mono);
  text-align: right;
  word-break: break-word;
}


/* Tablet — keep a tidy 3-col grid */
@media (max-width: 1024px) {
  .ref-grid { grid-template-columns: repeat(3, 1fr); }
  .ref-top-pill { padding: 9px 14px; font-size: 0.7rem; }
  .ref-page-hero { padding: 56px 0 40px; }
}
@media (max-width: 768px) {
  .ref-page-hero { padding: 48px 0 32px; }
  .ref-hero-stats { gap: 20px; }
  .ref-hero-stat strong { font-size: 1.3rem; }
  .ref-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ref-card > a { padding: 14px 12px 16px; }
  .ref-card-name { font-size: 1.2rem; margin-bottom: 10px; }
  .ref-card-image { margin-bottom: 10px; }
  .ref-card-specs li { font-size: 0.7rem; }
  .ref-sub-pills { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ref-sub-pill { padding: 6px 10px; font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; }
  .ref-top-pills { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; justify-content: flex-start; }
  .ref-top-pill { padding: 8px 12px; font-size: 0.66rem; white-space: nowrap; flex-shrink: 0; }
  .ref-subgroup-title { font-size: 1rem; }
}
@media (max-width: 480px) {
  .ref-grid { grid-template-columns: 1fr; }
  .ref-page-hero h1 { font-size: 1.8rem; }
  .ref-hero-sub { font-size: 0.92rem; }
  .ref-hero-stat strong { font-size: 1.15rem; }
  .ref-hero-stat { font-size: 0.65rem; }
  .ref-hero-stats { gap: 16px; }
  .ref-card-name { font-size: 1.4rem; }
  .ref-card-specs li { font-size: 0.74rem; }
}
@media (max-width: 360px) {
  .ref-card-specs li { font-size: 0.68rem; }
  .ref-card-specs li { flex-direction: column; gap: 2px; }
  .card-spec-label, .card-spec-value { text-align: left; }
  .ref-card-specs li .card-spec-value { text-align: left; }
}