/* ==========================================================================
   DESIGN TOKENS
   Apple-inspired palette: near-black/near-white surfaces, muted grays for
   secondary text, and a single restrained blue accent used only for
   interactive elements (links, primary CTAs). Alternating light/dark
   "slabs" are a structural device — each major section declares its own
   surface via data-theme, not nested overrides.
   ========================================================================== */

:root {
  /* ---- Color: Light surface (default) ---- */
  --color-bg: #ffffff;
  --color-bg-secondary: #f5f5f7;      /* Apple's signature warm-gray section bg */
  --color-text: #1d1d1f;              /* near-black, not pure black */
  --color-text-secondary: #86868b;    /* muted gray for subheads/captions */
  --color-border: #d2d2d7;

  /* ---- Color: Dark surface (opt-in via [data-theme="dark"]) ---- */
  --color-bg-dark: #000000;
  --color-bg-dark-secondary: #1d1d1f;
  --color-text-dark: #f5f5f7;
  --color-text-dark-secondary: #a1a1a6;
  --color-border-dark: #424245;

  /* ---- Accent (used sparingly: links, primary CTA, focus ring) ---- */
  --color-accent: #0071e3;
  --color-accent-hover: #0077ed;

  /* ---- Semantic aliases (what components actually consume) ---- */
  --surface-bg: var(--color-bg);
  --surface-bg-alt: var(--color-bg-secondary);
  --surface-text: var(--color-text);
  --surface-text-secondary: var(--color-text-secondary);
  --surface-border: var(--color-border);

  /* ---- Typography ---- */
  --font-display: -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2: clamp(1.75rem, 4vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-body-lg: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-caption: 0.8125rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 44px;               /* Apple's global nav is famously compact */
  --section-padding-y: clamp(4rem, 9vw, 8rem);
  --grid-gap: clamp(1rem, 2.5vw, 2rem);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-bg);
  color: var(--surface-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure { margin: 0; }

button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

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

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* A "slab" is a full-bleed section that can declare its own surface colors
   independent of its neighbors — this is how Apple alternates white / #f5f5f7
   / black down a single page without per-element color overrides. */
.slab {
  background: var(--surface-bg);
  color: var(--surface-text);
  padding-block: var(--section-padding-y);
}

.slab[data-surface="alt"] {
  --surface-bg: var(--color-bg-secondary);
}

.slab[data-surface="dark"] {
  --surface-bg: var(--color-bg-dark);
  --surface-text: var(--color-text-dark);
  --surface-text-secondary: var(--color-text-dark-secondary);
  --surface-border: var(--color-border-dark);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grid-gap);
}

/* Feature split: image + copy, alternates direction via [data-reverse] */
.feature-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: center;
}

@media (min-width: 768px) {
  .feature-split {
    grid-template-columns: 1fr 1fr;
  }
  .feature-split[data-reverse="true"] .feature-split__media {
    order: 2;
  }
}

/* Portrait media variant: caps the media column's width and forces a
   tall 3:4 box so a portrait-orientation image (or its placeholder)
   doesn't stretch full-bleed the way the default landscape media does. */
.feature-split__media--portrait img,
.feature-split__media--portrait .placeholder-image {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Generic placeholder box — swap out for a real <img> once an asset exists */
.placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  color: var(--surface-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-align: center;
  padding: 1rem;
  border: 1px dashed var(--color-border);
}

/* ==========================================================================
   GLOBAL NAV
   Sticky, translucent, compact — placeholders only, no content yet.
   ========================================================================== */

.global-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.global-nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.global-nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.global-nav__logo-icon {
  display: block;
  height: 28px;
  width: auto;
}

.global-nav__logo-text {
  line-height: 1;
}

.global-nav__links {
  display: none;
  gap: clamp(1rem, 2vw, 2.25rem);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}

.global-nav__links a {
  color: var(--color-text);
  opacity: 0.85;
  transition: opacity var(--transition-base);
}

.global-nav__links a:hover { opacity: 1; }

@media (min-width: 900px) {
  .global-nav__links { display: flex; }
  .global-nav__menu-toggle { display: none; }
}

.global-nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.global-nav__menu-toggle {
  position: relative;
  z-index: 201; /* stays above the full-screen overlay so it can act as the close button */
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
}

/* display:flex only applies below 900px — this is what makes the button
   visible at all, so the existing "min-width: 900px { display: none }"
   rule above is what actually hides it on desktop/laptop viewports. */
@media (max-width: 899px) {
  .global-nav__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Three bars that morph into an X when the overlay is open, driven purely
   by the button's aria-expanded state (no extra JS-toggled class needed). */
.hamburger-icon {
  position: relative;
  width: 22px;
  height: 16px;
  display: block;
}

.hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base), top var(--transition-base);
}

.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 7px; }
.hamburger-icon span:nth-child(3) { top: 14px; }

.global-nav__menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.global-nav__menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.global-nav__menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hamburger-icon span { transition: none; }
}

.global-nav__icon-link {
  position: relative;
  display: inline-flex;
  color: var(--color-text);
}

/* Mobile full-screen overlay: below 900px the links list becomes a
   fixed, viewport-covering panel toggled by .global-nav__menu-toggle,
   revealed via .is-open. Hidden with visibility+opacity (not display)
   so the opening/closing transition can animate. */
@media (max-width: 899px) {
  .global-nav__links {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 5vw, 2rem);
    width: 100%;
    height: 100dvh;
    margin: 0;
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  }
  .global-nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .global-nav__links a {
    display: block;
    padding: 0.4rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
  }
}

/* Locks background scroll while the full-screen overlay is open */
body.nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .global-nav__links { transition: none; }
}

.global-nav__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   HERO BANNER
   Strictly a 1920x720 landscape banner (aspect-ratio 8/3). Capped at
   1920px so it never renders larger than its native size, but scales
   down fluidly on smaller viewports while preserving the exact aspect
   ratio. object-fit: cover crops the source image (whatever its native
   dimensions are) to fill the box without stretching or distortion.
   ========================================================================== */

.hero-banner {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

.hero-banner__img {
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 720;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 767px) {
  .hero-banner__img {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero__inner {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hero__eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: #e76108; /* UPDATED: brand accent color for hero headline text */
}

.hero__subhead {
  font-size: var(--fs-body-lg);
  color: var(--surface-text-secondary);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__media {
  width: 100%;
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Cinematic hero variant (full-bleed landscape photo, black type) ---- */

.hero--cinematic {
  position: relative;
  height: 92vh;
  min-height: 560px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.hero--cinematic__media {
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-position, center);
  z-index: 0;
}

/* Light gradient over the top third only — keeps black text readable
   against sky/open-road photography without dimming the full image.
   If the supplied photo is dark at the top, flip the headline color
   to var(--color-bg) instead of adding a darker scrim here. */
.hero--cinematic__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0) 55%
  );
}

.hero--cinematic__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(4rem, 10vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.hero--cinematic__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--color-text);
  max-width: 20ch;
  text-wrap: balance;
  margin: 0;
}

.hero--cinematic__links {
  display: flex;
  gap: 1.75rem;
}

.hero-link {
  font-size: 0.95rem;
  font-weight: var(--fw-regular);
  color: var(--color-text);
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 45%, transparent);
  transition: border-color var(--transition-base);
}

.hero-link:hover {
  border-color: var(--color-text);
}

/* Stacked variant: text content sits above the image in normal document
   flow (no absolute positioning, no overlay gradient), and the image
   below is a plain <img> sized by its own aspect ratio so it can never
   be cropped — the opposite structure from the default overlay hero
   above, which layers text on top of a full-bleed background image. */
.hero--cinematic[data-layout="stacked"] {
  height: auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}

.hero--cinematic[data-layout="stacked"] .hero--cinematic__content {
  position: static;
  z-index: auto;
  width: 100%;
  max-width: none;
  background: var(--color-bg-secondary);
  text-align: center;
  padding: clamp(3.5rem, 9vw, 6rem) var(--container-padding);
  gap: 1.25rem;
}

.hero--cinematic[data-layout="stacked"] .hero--cinematic__subhead {
  font-size: var(--fs-body-lg);
  font-family: var(--font-text);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  max-width: 42ch;
  margin: 0;
}

.hero--cinematic[data-layout="stacked"] .hero--cinematic__links {
  margin-top: 0.5rem;
}

/* Media: no background-image, no absolute positioning, no fixed
   height — the <img> inside sets its own height from its natural
   aspect ratio, so the full photo (including its bottom edge) is
   always visible regardless of viewport width. */
.hero--cinematic[data-layout="stacked"] .hero--cinematic__media {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  background: none;
  line-height: 0;
}

.hero--cinematic[data-layout="stacked"] .hero--cinematic__media::after {
  content: none;
}

.hero--cinematic__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .hero--cinematic[data-layout="stacked"] .hero--cinematic__content {
    padding: clamp(2.75rem, 12vw, 3.5rem) var(--container-padding);
  }
}

/* ==========================================================================
   LEGAL CONTENT (Privacy Policy, Terms of Use, etc.)
   A single readable column reusing the site's existing type scale and
   color tokens — no new colors introduced. Table of contents and the
   final contact block both borrow the --color-bg-secondary "alt slab"
   tint already used elsewhere for subtle inset panels.
   ========================================================================== */

.legal-content {
  max-width: 44rem;
  margin-inline: auto;
}

/* ADDED: this section sits directly under .page-heading, whose own
   bottom padding is 0 — the large default .slab top padding was
   creating an oversized gap before the "Last updated" line, so it's
   reduced here without affecting .slab spacing elsewhere on the site. */
.legal-content-section {
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.legal-content__updated {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--surface-text-secondary);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}

.legal-content__intro {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--surface-text-secondary);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.legal-toc {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.legal-toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--surface-text-secondary);
  margin: 0 0 1rem;
}

.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 1.5rem;
}

.legal-toc__list a {
  font-size: 0.95rem;
  color: var(--color-accent);
  text-decoration: none;
}

.legal-toc__list a:hover {
  text-decoration: underline;
}

.legal-section {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--surface-border);
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

.legal-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--surface-text);
  margin: 0 0 1rem;
}

.legal-section p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--surface-text-secondary);
  margin: 0 0 1rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal-section li {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--surface-text-secondary);
}

.legal-section strong {
  color: var(--surface-text);
  font-weight: var(--fw-semibold);
}

.legal-contact-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-top: 0.5rem;
}

.legal-contact-card p {
  font-size: var(--fs-body);
  color: var(--surface-text);
  margin: 0 0 0.4rem;
}

.legal-contact-card p:last-child {
  margin-bottom: 0;
}

.legal-contact-card a {
  color: var(--color-accent);
}

@media (max-width: 600px) {
  .legal-toc__list {
    grid-template-columns: 1fr;
  }
}


   JS-driven carousel (see index.html script block). --slide-count is set
   inline on .bike-slider__track so the same CSS works for any number of
   slides; JS moves the track via translateX and toggles .is-active on the
   current dot. Arrow buttons sit inside the viewport, dots below it.
   ========================================================================== */

.bike-slider {
  position: relative;
  width: 100%;
  background: var(--color-bg-secondary);
  padding-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

.bike-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;   /* matches the 1920×1080 source images exactly */
  min-height: 320px;
  max-height: 720px;
}

.bike-slider__track {
  --slide-count: 4;
  display: flex;
  height: 100%;
  width: calc(var(--slide-count) * 100%);
  transform: translateX(0%);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bike-slider__slide {
  flex: 0 0 calc(100% / var(--slide-count));
  height: 100%;
  margin: 0;
}

.bike-slider__slide img,
.bike-slider__slide .placeholder-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  border-radius: 0;
  border: none;
}

/* Mobile: swap in portrait-friendly viewport proportions to match the
   m_slider1–4 portrait images swapped in via <picture> in index.html.
   Without this, the 16/9 landscape ratio above would crop the portrait
   images down to a thin strip. */
@media (max-width: 767px) {
  .bike-slider__viewport {
    aspect-ratio: 3 / 4;
    min-height: 420px;
    max-height: 640px;
  }
}

/* Arrow controls: Apple-style translucent circular buttons */
.bike-slider__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 75%, transparent);
  backdrop-filter: blur(6px);
  color: var(--color-text);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.bike-slider__arrow:hover {
  background: var(--color-bg);
  border-color: var(--color-text-secondary);
}

.bike-slider__arrow--prev { left: 1rem; }
.bike-slider__arrow--next { right: 1rem; }

.bike-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.25rem;
}

/* Apple-style minimalist dots: small, muted, no border — solid fill only */
.bike-slider__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.bike-slider__dot:hover {
  background: var(--color-text-secondary);
}

.bike-slider__dot.is-active {
  background: var(--color-text);
  transform: scale(1.15);
}

@media (max-width: 600px) {
  .bike-slider__viewport { min-height: 200px; }
  .bike-slider__arrow { width: 34px; height: 34px; font-size: 0.95rem; }
}

/* ---- SEO: H1 page heading (ADDED) ----------------------------------------
   The page's single H1, sitting in normal flow between the slider and
   the "Theme Based Cycles" section (no longer an image overlay). Sized
   a step below --fs-hero (which is reserved for the unused cinematic
   hero variant elsewhere in this file) so it reads as a strong section
   lead-in rather than competing with the slider above it, but still
   clearly outranks the H2 .section-header__title elements below it. */
.page-heading {
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
  text-align: center;
}

.page-heading__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: #e76108; /* UPDATED: brand accent color for the H1 */
}

/* UPDATED: the section right after this H1 (.slab, e.g. #craft) normally
   adds its own large top padding via --section-padding-y on top of the
   H1's own bottom (which was 0), making the gap below the H1 much bigger
   than the gap above it. Matching that section's top padding to the H1's
   own top padding evens the space out. Scoped to the non-"plain" variant
   so the legal/story pages (which use .page-heading--plain) are unaffected. */
.page-heading:not(.page-heading--plain) + section.slab {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

/* ADDED: opt-out modifier for pages (e.g. Privacy Policy) that want the
   H1 in the default text color instead of the brand accent above. */
.page-heading--plain .page-heading__title {
  color: var(--surface-text);
}

/* ---- Logo divider between a plain page H1 and the section heading
   right after it (e.g. story-craft-engineering.html). padding-block uses
   a single value so the gap above and below the logo is always equal. --- */
.story-logo-divider {
  display: flex;
  justify-content: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.story-logo-divider__img {
  width: clamp(2.5rem, 6vw, 4rem);
  height: auto;
}

/* The .slab section right after the divider normally adds its own large
   top padding (--section-padding-y) on top of the divider's bottom
   padding, which would make the space below the logo bigger than the
   space above it. Zeroing it here keeps the two gaps equal. */
.story-logo-divider + section.slab {
  padding-top: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: var(--fw-regular);
  border: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
}

.btn--primary:hover { background: var(--color-accent-hover); }

.btn--secondary {
  border-color: currentColor;
  color: var(--surface-text);
}

.btn--text {
  color: var(--color-accent);
  padding-inline: 0;
}

.btn--text::after {
  content: "›";
  margin-left: 0.25rem;
}

/* ==========================================================================
   SECTION HEADER (used above product grids / feature sections)
   ========================================================================== */

.section-header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-header__logo {
  display: block;
  margin: 0 auto 0.5rem;
  width: clamp(2.5rem, 6vw, 4rem);
  height: auto;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.section-header__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--surface-text-secondary);
}

/* UPDATED: reverted to default text color for the "NAVEE MR 24 - ROAD BIKE"
   heading only. Scoped via .video-section so other .section-header__title
   elements (Theme Based Cycles, Pure Paint Cycles, etc.) are left untouched. */
.video-section .section-header__title {
  color: var(--color-text);
}

/* ADDED: color override for the "No stickers. No decals..." subtitle
   only. Scoped via #pure-paint so other .section-header__subtitle
   elements elsewhere on the page are left untouched. */
#pure-paint .section-header__subtitle {
  color: #e76108;
}

/* ==========================================================================
   PRODUCT CARD (placeholder structure only)
   ========================================================================== */

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.product-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}

.product-card__eyebrow {
  font-size: var(--fs-caption);
  color: var(--surface-text-secondary);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.product-card__description {
  font-size: 0.95rem;
  color: var(--surface-text-secondary);
}

.product-card__actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   SHOP PRODUCT (single-product Amazon landing page)
   Reuses .feature-split for the image/copy layout, .product-card__title
   and __description for typography, and .btn/.btn--primary for the CTA,
   so this page inherits the site's exact type, color, and spacing tokens.
   ========================================================================== */

.shop-product__media img {
  width: 100%;
  height: auto; /* FIX: without this, the HTML width/height attributes on
                   the <img> (e.g. 800x600) lock height at a fixed pixel
                   value, so aspect-ratio below gets ignored and the image
                   no longer scales proportionally on narrow viewports. */
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.shop-product__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  color: var(--surface-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.shop-product__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.shop-product__features {
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shop-product__features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-body-lg);
  color: var(--surface-text-secondary);
  line-height: var(--lh-body);
}

.shop-product__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

.shop-product__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--surface-text);
  margin-bottom: 1.5rem;
}

.shop-product__price-note {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--surface-text-secondary);
  margin-left: 0.5rem;
}

.shop-product__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.btn--amazon {
  background: #ff9900;
  color: #0f1111;
  font-weight: var(--fw-semibold);
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
}

.btn--amazon:hover {
  background: #e68a00;
}

.shop-product__contact {
  font-size: var(--fs-body);
  color: var(--surface-text);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   PURE PAINT BANNER
   Full-bleed landscape image, edge-to-edge across the viewport. Sits as a
   sibling of .container (not inside it) so it isn't constrained by the
   container's max-width/padding. A clamp()'d height keeps the banner from
   ever growing tall enough to cause awkward scrolling on small screens,
   while object-fit: cover guarantees no distortion regardless of the
   source image's native aspect ratio.
   ========================================================================== */

.pure-paint-banner {
  width: 100%;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.pure-paint-banner__img {
  width: 100%;
  height: clamp(220px, 34vw, 480px);
  object-fit: cover;
  object-position: center;
  display: block;
}

.limited-edition-text {
  font-size: var(--fs-h2);
  color: var(--color-text);
  text-align: center;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}

/* Reduce this section's bottom padding to match the gap above the
   LIMITED EDITION text, since .slab's default padding-block is much
   larger and was making the space below look heavier than above. */
#craft {
  padding-bottom: 0;
}

/* ==========================================================================
   STEEL IS REAL
   A standalone section below testimonials, styled to match the
   "PURE PAINT CYCLES" style header (.section-header__title / h2).
   The header's own bottom margin is removed since there's no other
   content in this section — that keeps the top and bottom whitespace
   equal, both coming from .slab's symmetric padding-block.
   ========================================================================== */

.steel-is-real .section-header {
  margin-bottom: 0;
}

/* ADDED: color override for the "STEEL IS REAL" heading only.
   Scoped via .steel-is-real so other .section-header__title elements
   elsewhere on the page are left untouched. */
.steel-is-real .section-header__title {
  color: #e76108;
}

/* ==========================================================================
   THEME PHOTO GRID
   Three portrait photos, equally spaced in a single row on desktop via
   Flexbox, collapsing to a centered single column on mobile. object-fit
   keeps each photo cropped cleanly to its box regardless of native
   dimensions, so nothing stretches or distorts.
   ========================================================================== */

.theme-photo-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.theme-photo-grid__item {
  flex: 1 1 260px;
  max-width: 340px;
  margin: 0;
}

.theme-photo-grid__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 700px) {
  .theme-photo-grid {
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  .theme-photo-grid__item {
    width: 100%;
    max-width: 320px;
  }
}

/* ==========================================================================
   VIDEO EMBED
   Center-aligned, fully responsive 16:9 YouTube embed. The wrapper uses
   aspect-ratio (with a padding-hack fallback for older browsers) so the
   iframe scales fluidly at any viewport width without ever distorting.
   ========================================================================== */

.video-section {
  display: flex;
  justify-content: center;
}

.video-embed {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35);
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
  .video-embed {
    height: 0;
    padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
  }
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   FOOTER
   Multi-column, dense, small type — matches Apple's legal-heavy footer.
   ========================================================================== */

.site-footer {
  font-size: var(--fs-caption);
  color: var(--surface-text-secondary);
  border-top: 1px solid var(--surface-border);
}

.site-footer__region {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--surface-border);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-block: 2.5rem;
}

@media (min-width: 700px) {
  .site-footer__columns { grid-template-columns: repeat(4, 1fr); }
}

.site-footer__col-title {
  color: var(--surface-text);
  font-weight: var(--fw-medium);
  margin-bottom: 0.75rem;
}

.site-footer__col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__col-links a:hover { text-decoration: underline; }

/* Social row: icon-only links replacing the text-list pattern used by
   the other footer columns. Circular hit targets, monochrome icons that
   pick up the accent color on hover/focus, sized to sit comfortably next
   to the col-title label above them. */
.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 0.6rem;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  color: var(--surface-text-secondary);
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--color-bg);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
}

.site-footer__legal {
  padding-block: 1.25rem;
  border-top: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 700px) {
  .site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   FOUNDERS SECTION
   Three equal columns (image → name → location → education → role),
   stacking to a single centered column on mobile. Reuses the same
   card/radius/shadow language as .product-card and .testimonial-card
   so it sits naturally alongside the rest of the site.
   ========================================================================== */

.founders {
  padding-block: var(--section-padding-y);
}

.founders__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* Center the grid when there's only 1 founder card */
.founders__grid:has(.founder-card:only-child) {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}

/* Bonus: also center nicely if you add back just a 2nd founder later */
.founders__grid:has(.founder-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
}

@media (max-width: 800px) {
  .founders__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

.founder-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.founder-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
  border-color: transparent;
}

.founder-card__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.founder-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.founder-card:hover .founder-card__media img {
  transform: scale(1.04);
}

.founder-card__body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}

.founder-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--surface-text);
}

.founder-card__location {
  font-size: 0.9rem;
  color: var(--surface-text-secondary);
}

.founder-card__education {
  font-size: 0.9rem;
  color: var(--surface-text-secondary);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--surface-border);
}

.founder-card__role {
  font-size: 0.95rem;
  color: var(--surface-text);
  font-weight: var(--fw-medium);
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .founder-card,
  .founder-card__media img {
    transition: none;
  }
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   Fixed bottom-right circular badge, present on every page. Rules are
   scoped to #waFloatBtn so they never collide with other components.
   ========================================================================== */

#waFloatBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

#waFloatBtn:hover,
#waFloatBtn:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
  outline: none;
}

#waFloatBtn svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* Subtle pulse ring to draw the eye without being obnoxious */
#waFloatBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.55;
  z-index: -1;
  animation: waPulse 2.4s ease-out infinite;
}

@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #waFloatBtn::before { animation: none; display: none; }
}

@media (max-width: 480px) {
  #waFloatBtn {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }
  #waFloatBtn svg { width: 27px; height: 27px; }
}

/* ==========================================================================
   FAQ ACCORDION
   Each item is a <button> (question, full-width, icon at the trailing
   edge) plus a sibling answer panel. The panel animates via the
   grid-template-rows 0fr -> 1fr trick, which lets height:auto content
   transition smoothly with pure CSS (no JS height calculation, no
   layout jank). The icon is two absolutely-positioned bars forming a
   "+"; opening the item rotates the vertical bar 90° onto the
   horizontal one, turning it into a "-". JS only toggles state.
   ========================================================================== */

.faq-list {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--surface-border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: none;
  text-align: left;
  padding: 1.35rem 0.25rem;
  font-family: var(--font-text);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--surface-text);
}

.faq-item__question:hover .faq-item__icon::before,
.faq-item__question:hover .faq-item__icon::after {
  background: var(--color-accent);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--surface-text);
  border-radius: 2px;
  transition: transform var(--transition-base), background var(--transition-base);
}

/* horizontal bar */
.faq-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

/* vertical bar — rotates flat onto the horizontal one when open */
.faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) rotate(0deg);
}

.faq-item[data-open="true"] .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq-item[data-open="true"] .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  overflow: hidden;
}

.faq-item__answer-inner p {
  margin: 0 0 1.35rem;
  padding-right: 2.25rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__answer { transition: none; }
  .faq-item__icon::after { transition: none; }
}

/* ==========================================================================
   TESTIMONIALS
   Reuses .product-card's padding/radius/background so it sits in the same
   visual family as the product grid, with a quote mark, body copy, and a
   monochrome initials avatar standing in for a rider photo.
   ========================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--surface-border);
}

.testimonial-card__mark {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--surface-text-secondary);
}

.testimonial-card__quote {
  font-size: var(--fs-body-lg);
  color: var(--surface-text);
  flex-grow: 1;
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-border);
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.85rem;
  color: var(--color-bg);
  background: var(--color-text);
}

.testimonial-card__name {
  font-weight: var(--fw-medium);
  color: var(--surface-text);
}

.testimonial-card__meta {
  font-size: var(--fs-caption);
  color: var(--surface-text-secondary);
}