/* =============================================================
   Irie Transportation — Marketing Design Layer
   Loads AFTER tokens.css + premium.css on index.html only.
   Overrides scoped to the home page. Does not affect /book.html,
   /dashboard/*, or /auth/* — those pages do not load this file.
   ============================================================= */

/* ── Token overrides (index.html scope) ──────────────────────── */
:root {
  /* Irie gold system */
  --gold:            #C9A84C;
  --gold-bright:     #E8C96A;
  --gold-deep:       #A68838;
  --gold-dim:        rgba(201, 168, 76, 0.12);
  --gold-border:     rgba(201, 168, 76, 0.18);
  --gold-border-soft:rgba(201, 168, 76, 0.12);
  --gold-border-hover:rgba(201, 168, 76, 0.40);

  /* Canvas */
  --canvas-dark:     #080808;
  --canvas-dark-2:   #0F0F0F;
  --canvas-cream:    #FAF7F2;
  --canvas-cream-2:  #F1ECE2;
  --ink-dark:        #141414;
  --ink-on-dark:     #EDE7D9;
  --ink-muted-dark:  rgba(237, 231, 217, 0.66);
  --ink-muted-light: #5b5a55;

  /* Re-route the shared green brand tokens on this page only */
  --color-brand:        var(--gold);
  --color-brand-dark:   var(--gold-deep);
  --color-brand-light:  var(--gold-dim);
  --color-brand-mid:    var(--gold-border);
  --color-ink:          var(--ink-dark);
  --color-muted:        #5b5a55;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    var(--font-body);

  /* Motion */
  --ease-out-irie:  cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 900ms;
}

/* ── Base typography + iOS overflow guard ───────────────────── */
html {
  scroll-behavior: smooth;
  /* iOS Safari sometimes ignores overflow:hidden on inner containers
     (e.g. the trust-strip marquee) and lets the ghost content widen the
     document, which causes hero text to appear clipped as the page gains
     horizontal scroll. Clipping at html/body level is the hard guarantee. */
  overflow-x: clip;
  /* Prevent iOS from inflating font size in landscape or with the user's
     accessibility text-size setting, which can push hero copy past its
     container. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--canvas-cream);
  color: var(--ink-dark);
  letter-spacing: -0.003em;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-dark);
}

strong { font-weight: 600; }

/* ── Shell ───────────────────────────────────────────────────── */
.site-shell {
  max-width: 1200px;
  padding: 0 0 120px;
}

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  padding: 28px 28px 22px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
  position: relative;
}

.site-header strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink-dark);
}

.site-header small {
  font-family: var(--font-body);
  color: var(--ink-muted-light);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.site-header a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink-muted-light);
  letter-spacing: 0;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s var(--ease-out-irie);
}

.site-header a:hover,
.site-header a:focus {
  color: var(--gold-deep);
  background: transparent;
}

/* Explicit display:none at base — origin/main's premium.css has a
   malformed nested @media that lets the mobile-only inline-flex rule
   leak to desktop. We re-assert the base here and re-enable inside
   our own mobile breakpoint below. */
.menu-toggle {
  display: none;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: transparent;
  color: var(--ink-dark);
  font-family: var(--font-body);
  padding: 9px 16px;
  min-height: 44px;
  transition: border-color 0.2s, color 0.2s;
}

.menu-toggle:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* Re-assert site-nav natural width on desktop (counters premium.css leak) */
.site-nav {
  width: auto;
  margin-top: 0;
  justify-content: flex-start;
}

.site-nav .nav-links {
  display: flex;
  flex-direction: row;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  width: auto;
  margin-top: 0;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero-grid {
  position: relative;
  background: radial-gradient(ellipse at 20% 0%, #141313 0%, #080808 55%, #050505 100%);
  color: var(--ink-on-dark);
  border-radius: 28px;
  padding: 56px 48px 52px;
  margin: 32px 28px 0;
  overflow: hidden;
  align-items: center;
  isolation: isolate;
}

/* Gold orb float */
.hero-grid::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(201, 168, 76, 0.28) 0%,
              rgba(201, 168, 76, 0.12) 35%,
              rgba(201, 168, 76, 0) 70%);
  filter: blur(12px);
  animation: orbFloat 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

/* Grain overlay */
.hero-grid::after {
  content: "";
  position: absolute;
  /* Extended bounds so the shift animation doesn't reveal edges */
  inset: -8px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78, 0 0 0 0 0.66, 0 0 0 0 0.3, 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  z-index: 1;
  /* Grain drifts a few pixels continuously so the texture lives — never
     reads as flat film. 9s cycle offset from the orbs keeps motion organic. */
  animation: grainShift 9s ease-in-out infinite;
  will-change: transform;
}

.hero-grid > * { position: relative; z-index: 2; }

/* Second hero orb — lives in the DOM so it can animate independently from
   the primary pseudo-element orb. Bottom-left, smaller, warmer, slower
   phase offset → hero motion never repeats the same silhouette. */
.hero-orb {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  will-change: transform, opacity;
}

.hero-orb-2 {
  bottom: -100px;
  left: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at center,
              rgba(201, 168, 76, 0.22) 0%,
              rgba(201, 168, 76, 0.08) 40%,
              rgba(201, 168, 76, 0) 72%);
  filter: blur(18px);
  animation: orbFloat2 18s ease-in-out infinite;
  animation-delay: -6s;
}

/* CTA panel gets its own drifting orb on the opposite corner from the
   existing pseudo-element orb, so the final CTA feels alive too. */
.cta-panel .hero-orb-cta {
  bottom: -80px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center,
              rgba(201, 168, 76, 0.22) 0%,
              rgba(201, 168, 76, 0.08) 40%,
              rgba(201, 168, 76, 0) 72%);
  filter: blur(16px);
  animation: orbFloat2 22s ease-in-out infinite;
  animation-delay: -3s;
  z-index: 0;
}

.hero-copy {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 560px;
}

.hero-copy .eyebrow {
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
}

.hero-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-on-dark);
  margin: 22px 0 22px;
}

.hero-copy .hero-subline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-bright);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  margin: 0 0 16px;
  letter-spacing: 0;
}

.hero-copy p {
  color: var(--ink-muted-dark);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
}

.hero-points {
  margin: 22px 0 18px;
  display: grid;
  gap: 12px;
}

.hero-points li {
  color: var(--ink-on-dark);
  font-family: var(--font-body);
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-points li .i-icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex-shrink: 0;
}

.hero-referral {
  text-align: left;
  font-size: 0.94rem;
  color: var(--ink-muted-dark);
  margin: 8px 0 14px;
  font-style: italic;
  font-family: var(--font-display);
}

/* Urgency pill — quiet, gold-bordered inline badge. Exclusivity > anxiety. */
.hero-urgency {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.84rem;
  padding: 9px 18px;
  border-radius: 10px;
  letter-spacing: 0.01em;
}

.hero-cta {
  margin-top: 26px;
  gap: 16px;
}

.hero-right {
  gap: 20px;
  position: relative;
}

.hero-media {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--gold-border-soft);
  border-radius: 20px;
  padding: 10px;
  backdrop-filter: blur(4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.hero-media img {
  border-radius: 14px;
  max-height: 340px;
}

.hero-pricing-img {
  border-radius: 16px;
  border: 1px solid var(--gold-border-soft);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  max-width: 100%;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.primary-btn {
  /* Desktop: natural width. Premium.css's mobile width:100% leaks via
     the same broken nested @media — explicitly reset here. */
  width: auto;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--gold);
  color: #120F05;
  padding: 15px 30px;
  min-height: 52px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.28),
              0 0 20px rgba(201, 168, 76, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.25s var(--ease-out-irie),
              box-shadow 0.25s var(--ease-out-irie),
              background 0.2s;
  animation: btnGlow 3.4s ease-in-out infinite;
}

.primary-btn:hover {
  background: var(--gold-bright);
  color: #120F05;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(201, 168, 76, 0.45),
              0 0 28px rgba(201, 168, 76, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
  animation-play-state: paused;
}

.call-text {
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 4px;
}

.call-text .i-icon {
  width: 16px;
  height: 16px;
}

.call-text:hover { color: var(--gold); }

/* Hero CTA — the call link in hero sits on dark canvas */
.hero-cta .call-text { color: var(--gold-bright); }

/* ── Trust Strip — Marquee ───────────────────────────────────── */
.trust-strip {
  margin: 28px 28px 0;
  background: var(--canvas-cream-2);
  border: 1px solid rgba(20, 20, 20, 0.06);
  border-radius: 999px;
  padding: 0;
  display: block;
  /* Belt and suspenders: overflow:hidden + overflow:clip + contain so
     the marquee track cannot push the document wider than the viewport
     on iOS Safari, which has historically been lax about hidden+
     transform interactions. */
  overflow: hidden;
  overflow-x: clip;
  contain: paint;
  position: relative;
  height: 58px;
  box-shadow: none;
  max-width: 100%;
}

.trust-strip::before,
.trust-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.trust-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--canvas-cream-2), rgba(241, 236, 226, 0));
}

.trust-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--canvas-cream-2), rgba(241, 236, 226, 0));
}

.trust-track {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 28px;
  height: 100%;
  white-space: nowrap;
  animation: stripScroll 20s linear infinite;
  will-change: transform;
}

.trust-track span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-muted-light);
  display: inline-flex;
  align-items: center;
  gap: 56px;
}

.trust-track span::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

.trust-track span:last-child::after { display: none; }

/* Override the old ::after divider on trust-strip p (no longer used) */
.trust-strip p::after { display: none !important; }

/* ── Sections ────────────────────────────────────────────────── */
.section {
  position: relative;
  margin-top: 110px;
  padding: 0 28px;
}

/* Gold hairline divider between sections — breathes so section boundaries
   feel like layers in a living composition rather than edges between flat
   blocks. Scoped to sections after the first one via sibling selector. */
.section + .section::before,
.section-alt::before,
.reassurance::before {
  content: "";
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--gold) 50%,
              transparent 100%);
  animation: dividerShimmer 4.8s ease-in-out infinite;
  pointer-events: none;
}

.section h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 14px;
}

.section p.lead {
  font-family: var(--font-body);
  font-size: 1.06rem;
  color: var(--ink-muted-light);
  line-height: 1.7;
  max-width: 660px;
}

.section-center h3,
.section-center .lead {
  margin-left: auto;
  margin-right: auto;
}

.section-alt {
  background: transparent;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: #f9f7f3;
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03);
  transition: transform 250ms ease,
              border-color 250ms ease,
              box-shadow 250ms ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border-hover);
  box-shadow: 0 22px 55px rgba(201, 168, 76, 0.16),
              0 8px 20px rgba(20, 20, 20, 0.08);
}

.card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink-dark);
}

.card p {
  color: var(--ink-muted-light);
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ── Fleet Grid ──────────────────────────────────────────────── */
.fleet-grid {
  background: var(--canvas-cream-2);
  border: 1px solid var(--gold-border-soft);
  border-radius: 24px;
  padding: 36px;
  box-shadow: none;
}

/* Fleet cards with vehicle photos: image sits at the top, text below.
   Image uses the Irie 16px radius to nest inside the card's 16px radius
   with a 4px offset (card padding — image padding = subtle inner frame). */
.fleet-card {
  padding-top: 16px;
  overflow: hidden;
}

.fleet-card-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  /* contain so full vehicle silhouette is always visible regardless of
     source photo aspect — the ID Buzz shot is taller than the Carnival
     and was getting cropped at top/bottom under object-fit: cover. */
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  margin: 0 0 18px;
  /* White-ish background so JPGs with baked-in white bgs (ID Buzz) match
     transparent PNGs (Kia Carnival). Keeps photo presentation consistent. */
  background: #FBFAF6;
  border: 1px solid var(--gold-border-soft);
  padding: 8px;
}

.fleet-grid h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink-dark);
}

.fleet-grid li::before {
  color: var(--gold-deep);
}

/* ── Standouts ───────────────────────────────────────────────── */
#standouts-grid li {
  font-family: var(--font-body);
  color: var(--ink-muted-light);
  padding: 4px 0;
}

#standouts-grid li .i-check {
  width: 18px;
  height: 18px;
  color: var(--gold-deep);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Steps ───────────────────────────────────────────────────── */
.step-card {
  background: #f9f7f3;
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  box-shadow: none;
  padding: 32px 28px;
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border-hover);
  box-shadow: 0 22px 55px rgba(201, 168, 76, 0.16),
              0 8px 20px rgba(20, 20, 20, 0.08);
}

.step-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 18px 0 10px;
}

.step-number {
  width: 42px;
  height: 42px;
  background: transparent;
  color: var(--gold-deep);
  border: 1px solid var(--gold-border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}

/* ── Testimonials — Editorial ────────────────────────────────── */
.quote-grid {
  gap: 28px;
}

.quote-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--gold-border);
  border-radius: 0;
  padding: 36px 4px 8px;
  box-shadow: none;
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink-dark);
  letter-spacing: -0.005em;
}

.quote-card::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  top: 6px;
  left: -6px;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.9;
}

.quote-card cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted-light);
}

/* ── Inline CTAs ─────────────────────────────────────────────── */
.inline-cta {
  background: #f9f7f3;
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  box-shadow: none;
  padding: 32px;
}

.inline-cta h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.inline-cta p {
  font-family: var(--font-body);
  color: var(--ink-muted-light);
}

.mid-journey-cta {
  background: #f9f7f3;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  padding: 18px 28px;
  box-shadow: none;
  margin: 40px 28px 0;
}

.mid-journey-cta p {
  font-family: var(--font-body);
  color: var(--ink-muted-light);
}

/* ── Final CTA Panel — Dark ──────────────────────────────────── */
.cta-panel {
  position: relative;
  margin: 100px 28px 0;
  background: radial-gradient(ellipse at 80% 0%, #141313 0%, #080808 60%);
  color: var(--ink-on-dark);
  border-radius: 28px;
  padding: 64px 48px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  isolation: isolate;
}

.cta-panel::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(201, 168, 76, 0.22) 0%,
              rgba(201, 168, 76, 0) 70%);
  filter: blur(10px);
  animation: orbFloat 16s ease-in-out infinite reverse;
  z-index: 0;
}

.cta-panel::after {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78, 0 0 0 0 0.66, 0 0 0 0 0.3, 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.3;
  mix-blend-mode: overlay;
  z-index: 1;
  animation: grainShift 11s ease-in-out infinite;
  animation-delay: -2s;
  will-change: transform;
}

.cta-panel > * { position: relative; z-index: 2; }

.cta-panel h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  color: var(--ink-on-dark);
  letter-spacing: -0.02em;
  margin: 0;
}

.cta-panel p {
  color: var(--ink-muted-dark);
  font-family: var(--font-body);
  font-size: 1.04rem;
  margin: 8px 0 0;
}

.cta-panel {
  flex-direction: row;
  text-align: left;
  align-items: center;
  justify-content: space-between;
}

.cta-panel a {
  background: var(--gold) !important;
  color: #120F05 !important;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 16px 34px !important;
  width: auto !important;
  max-width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: 0 14px 40px rgba(201, 168, 76, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.25s var(--ease-out-irie),
              box-shadow 0.25s var(--ease-out-irie),
              background 0.2s !important;
}

.cta-panel a:hover {
  background: var(--gold-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(201, 168, 76, 0.52),
              inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

/* Ensure CTA panel content never overflows its container on narrow screens */
.cta-panel > div { min-width: 0; max-width: 100%; }

/* 5-star rating line above the final CTA headline — social proof stripe */
.cta-panel p.cta-rating-line {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted-dark);
  margin: 0 0 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}

.cta-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--gold-bright);
  vertical-align: middle;
  margin-right: 6px;
}

.cta-stars svg {
  width: 14px;
  height: 14px;
}

/* ── Reassurance ─────────────────────────────────────────────── */
.reassurance-card {
  background: #f9f7f3;
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  box-shadow: none;
  padding: 48px;
}

.reassurance-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -0.015em;
}

.reassurance-card p,
.reassurance-card li {
  font-family: var(--font-body);
  color: var(--ink-muted-light);
}

.reassurance-card li::before {
  color: var(--gold-deep);
}

/* ── Review modal (inherits shared, nudge gold) ──────────────── */
#reviewModal .form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

#reviewModal input[type="radio"] { accent-color: var(--gold-deep) !important; }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  margin: 72px 28px 0;
  padding-top: 28px;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-muted-light);
}

footer a {
  color: var(--gold-deep);
  display: inline-block;
  padding: 13px 8px;
  margin: -13px -8px;
}

/* ── Icons ───────────────────────────────────────────────────── */
.i-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  stroke-width: 1.75;
  color: var(--gold);
}

.call-text .i-icon { width: 18px; height: 18px; }

/* ── Sticky Mobile CTA ───────────────────────────────────────── */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 720px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 80;
    gap: 10px;
    padding: 10px;
    background: rgba(8, 8, 8, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  }

  .mobile-sticky-cta a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s var(--ease-out-irie);
  }

  .mobile-sticky-cta a:active { transform: scale(0.97); }

  .mobile-sticky-cta .msc-book {
    background: var(--gold);
    color: #120F05;
    box-shadow: 0 6px 18px rgba(201, 168, 76, 0.38);
  }

  .mobile-sticky-cta .msc-call {
    background: transparent;
    color: var(--ink-on-dark);
    border: 1px solid rgba(237, 231, 217, 0.2);
  }

  .mobile-sticky-cta .i-icon {
    width: 16px;
    height: 16px;
  }

  /* Lift footer so it clears the sticky bar */
  footer { margin-bottom: 80px; }
}

/* ── Motion: Scroll Reveal ───────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--reveal-duration) var(--ease-out-irie),
              transform var(--reveal-duration) var(--ease-out-irie),
              filter var(--reveal-duration) var(--ease-out-irie);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Cards keep living after they reveal — a ~3px rise/fall cycle + shadow
   breath so the grid never reads as a flat dead layer. Staggered by
   nth-child so cards don't all breathe in lockstep. */
.card.in-view,
.step-card.in-view,
.fleet-card.in-view {
  animation: cardBreathe 5.2s ease-in-out infinite;
  animation-delay: var(--breathe-delay, 0s);
}

/* Spread breathe phase across sibling cards so the grid ripples organically */
.card-grid .card:nth-child(1) { --breathe-delay: 0s;    }
.card-grid .card:nth-child(2) { --breathe-delay: -1.3s; }
.card-grid .card:nth-child(3) { --breathe-delay: -2.6s; }
.card-grid .card:nth-child(4) { --breathe-delay: -3.9s; }

.steps-grid .step-card:nth-child(1) { --breathe-delay: 0s;    }
.steps-grid .step-card:nth-child(2) { --breathe-delay: -1.7s; }
.steps-grid .step-card:nth-child(3) { --breathe-delay: -3.4s; }

.fleet-grid .fleet-card:nth-child(1) { --breathe-delay: -0.6s; }
.fleet-grid .fleet-card:nth-child(2) { --breathe-delay: -2.9s; }

/* Hovering a card pauses its breathe and holds the lifted state — the
   user's attention gesture is respected, nothing moves under the cursor. */
.card:hover,
.step-card:hover,
.fleet-card:hover {
  animation-play-state: paused;
}

/* Testimonials get a richer reveal — scale-in from 0.96 with a brief
   blur lift so quotes land as a moment, not just another fade card. */
.quote-card[data-reveal] {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  filter: blur(2px);
  transition: opacity 1.2s var(--ease-out-irie),
              transform 1.2s var(--ease-out-irie),
              filter 1.2s var(--ease-out-irie);
}

.quote-card[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* CTA rating stars gently pulse — subtle life on the social-proof line. */
.cta-stars svg {
  animation: starPulse 3.2s ease-in-out infinite;
  transform-origin: center;
}
.cta-stars svg:nth-child(1) { animation-delay: 0s;   }
.cta-stars svg:nth-child(2) { animation-delay: 0.2s; }
.cta-stars svg:nth-child(3) { animation-delay: 0.4s; }
.cta-stars svg:nth-child(4) { animation-delay: 0.6s; }
.cta-stars svg:nth-child(5) { animation-delay: 0.8s; }

/* Hero stagger — eyebrow lands at 300ms, headline 600ms, subline 900ms,
   CTA 1200ms. Intermediate copy is a tight sub-cluster so everything is
   on-stage by the time the primary CTA glows in. */
.hero-copy [data-reveal]:nth-child(1) { --reveal-delay: 300ms;  } /* eyebrow */
.hero-copy [data-reveal]:nth-child(2) { --reveal-delay: 600ms;  } /* headline */
.hero-copy [data-reveal]:nth-child(3) { --reveal-delay: 900ms;  } /* subline */
.hero-copy [data-reveal]:nth-child(4) { --reveal-delay: 950ms;  } /* body */
.hero-copy [data-reveal]:nth-child(5) { --reveal-delay: 1000ms; } /* points */
.hero-copy [data-reveal]:nth-child(6) { --reveal-delay: 1050ms; } /* referral */
.hero-copy [data-reveal]:nth-child(7) { --reveal-delay: 1100ms; } /* urgency */
.hero-copy [data-reveal]:nth-child(8) { --reveal-delay: 1200ms; } /* CTA */

/* 80ms stagger between siblings (cards, steps, quotes) */
.card-grid [data-reveal]:nth-child(1) { --reveal-delay: 0ms;   }
.card-grid [data-reveal]:nth-child(2) { --reveal-delay: 80ms;  }
.card-grid [data-reveal]:nth-child(3) { --reveal-delay: 160ms; }
.card-grid [data-reveal]:nth-child(4) { --reveal-delay: 240ms; }

.steps-grid [data-reveal]:nth-child(1) { --reveal-delay: 0ms;   }
.steps-grid [data-reveal]:nth-child(2) { --reveal-delay: 80ms;  }
.steps-grid [data-reveal]:nth-child(3) { --reveal-delay: 160ms; }

.quote-grid [data-reveal]:nth-child(1) { --reveal-delay: 0ms;  }
.quote-grid [data-reveal]:nth-child(2) { --reveal-delay: 80ms; }

/* Standouts list — 80ms sibling stagger */
#standouts-grid [data-reveal]:nth-child(1) { --reveal-delay: 0ms;   }
#standouts-grid [data-reveal]:nth-child(2) { --reveal-delay: 80ms;  }
#standouts-grid [data-reveal]:nth-child(3) { --reveal-delay: 160ms; }
#standouts-grid [data-reveal]:nth-child(4) { --reveal-delay: 240ms; }
#standouts-grid [data-reveal]:nth-child(5) { --reveal-delay: 320ms; }
#standouts-grid [data-reveal]:nth-child(6) { --reveal-delay: 400ms; }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes orbFloat {
  0%,   100% { transform: translate(0, 0) scale(1); opacity: 1; }
  33%        { transform: translate(-28px, 22px) scale(1.05); opacity: 0.92; }
  66%        { transform: translate(22px, -18px) scale(0.95); opacity: 1; }
}

/* Second orb drifts on a different axis + timing so the hero never feels
   static. Offset keyframe phases from the primary orb for organic motion. */
@keyframes orbFloat2 {
  0%,   100% { transform: translate(0, 0) scale(1);    opacity: 0.85; }
  25%        { transform: translate(34px, 18px) scale(1.08); opacity: 1; }
  50%        { transform: translate(-18px, 36px) scale(0.92); opacity: 0.9; }
  75%        { transform: translate(-26px, -20px) scale(1.04); opacity: 1; }
}

/* Grain texture subtly shifts — prevents the dark canvas from reading
   as static after the initial load. Keeps motion constant even when the
   user is not scrolling. Small translations so the shift is felt, not seen. */
@keyframes grainShift {
  0%,   100% { transform: translate(0, 0); }
  20%        { transform: translate(-4px, 3px); }
  40%        { transform: translate(3px, -5px); }
  60%        { transform: translate(-5px, -2px); }
  80%        { transform: translate(5px, 4px); }
}

/* Cards breathe — a ~2px rise/fall over 5s so revealed cards keep
   living in place. Paired with a faint shadow pulse so the motion
   reads as depth, not jitter. */
@keyframes cardBreathe {
  0%,   100% { transform: translateY(0);   box-shadow: 0 1px 2px rgba(20,20,20,0.03); }
  50%        { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(201,168,76,0.08), 0 3px 8px rgba(20,20,20,0.05); }
}

/* Testimonial reveal feels like a moment — softer entrance, slight
   scale-up, longer duration than a generic card reveal. */
@keyframes quoteReveal {
  0%   { opacity: 0; transform: translateY(30px) scale(0.96); filter: blur(2px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

/* Gold-hairline section dividers breathe — a slow brightness pulse
   that reinforces "this site is alive" without being noisy. */
@keyframes dividerShimmer {
  0%,   100% { opacity: 0.35; }
  50%        { opacity: 0.9;  }
}

/* Dark CTA text stars gently pulse — micro-interaction proof of life. */
@keyframes starPulse {
  0%,   100% { opacity: 0.85; transform: scale(1);    }
  50%        { opacity: 1;    transform: scale(1.08); }
}

@keyframes stripScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Gentle gold glow pulse on the primary CTA */
@keyframes btnGlow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(201, 168, 76, 0.28),
                0 0 20px rgba(201, 168, 76, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 10px 34px rgba(201, 168, 76, 0.34),
                0 0 32px rgba(201, 168, 76, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .quote-card[data-reveal] { opacity: 1; transform: none; filter: none; }
  /* Every continuously-animated layer freezes. Grain overlays stay in
     place (static textures, not animated). Cards stop breathing. Stars
     stop pulsing. Orbs stop drifting. */
  .hero-grid::before,
  .hero-grid::after,
  .cta-panel::before,
  .cta-panel::after,
  .hero-orb,
  .cta-panel .hero-orb-cta,
  .trust-track,
  .primary-btn,
  .card.in-view,
  .step-card.in-view,
  .fleet-card.in-view,
  .cta-stars svg,
  .section + .section::before,
  .section-alt::before,
  .reassurance::before { animation: none !important; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid {
    /* Force single-column so children size to the hero's padding-box
       instead of the desktop minmax(320px, 1fr) floor. */
    grid-template-columns: 1fr;
    padding: 40px 20px 40px;
    margin: 20px 12px 0;
    /* Defense in depth: if any child ever tries to overflow, clip it
       inside the hero and force wrap. The iPhone Pro Max clipping we
       saw in the wild was a paint-level overflow that these three lines
       cannot be overridden by. */
    max-width: calc(100vw - 24px);
    overflow-x: clip;
    min-width: 0;
  }
  /* Every hero container must respect its parent width and wrap long
     tokens. min-width: 0 defeats flex/grid's auto-minimum-size default;
     overflow-wrap: anywhere breaks any single long word (no dashes,
     URLs, or em-dash runs can push text off-canvas). */
  .hero-grid,
  .hero-copy,
  .hero-right,
  .hero-copy > *,
  .hero-points,
  .hero-points li,
  .hero-cta {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* Urgency pill: was inline-block which gave it intrinsic width from
     its own text run; force block so it wraps to the container. */
  .hero-urgency {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
  }
  /* Hero points icons must not collapse the text column. */
  .hero-points li .i-icon {
    width: 20px;
    height: 20px;
  }
  /* Remove the subtle white tint on the vehicle media frame so the hero
     reads as one seamless dark canvas. The 2% white tint combined with
     the cream-tinted grain overlay was producing a visible lighter band
     between hero copy and the vehicle image on mobile. */
  .hero-media {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(201, 168, 76, 0.14);
  }
  /* Keep pricing card fully inside the hero's padding-box */
  .hero-pricing-img {
    max-width: 100%;
  }
  .trust-strip { margin: 20px 16px 0; }
  .section { padding: 0 16px; }
  .mid-journey-cta { margin: 32px 16px 0; }
  .cta-panel { margin: 72px 16px 0; padding: 48px 28px; }
  footer { margin: 56px 16px 0; }
  .site-header { padding: 20px 16px 18px; }
  .hero-grid::before {
    width: 360px;
    height: 360px;
    top: -100px;
    right: -100px;
  }
}

@media (max-width: 640px) {
  .site-shell { padding: 0 0 100px; }
  .hero-grid {
    padding: 32px 22px 36px;
    border-radius: 22px;
  }
  .hero-copy .eyebrow {
    font-size: 0.68rem;
    padding: 5px 12px;
  }
  .hero-points li { font-size: 0.94rem; }
  .section { margin-top: 72px; }
  .section h3 { font-size: 1.75rem; }
  .card { padding: 26px 22px; }
  .cta-panel {
    padding: 40px 26px;
    border-radius: 22px;
    flex-direction: column;
    text-align: center;
    align-items: stretch;
  }
  .cta-panel a {
    width: 100% !important;
    max-width: none;
    justify-content: center;
    margin-top: 10px;
  }
  /* Re-apply mobile full-width for primary buttons outside hero */
  .inline-cta .primary-btn,
  #share-experience .primary-btn {
    width: 100%;
    justify-content: center;
  }
  /* Rating line compresses on narrow screens */
  .cta-panel p.cta-rating-line {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    line-height: 1.55;
  }
  .cta-stars svg { width: 12px; height: 12px; }
  .reassurance-card { padding: 32px 24px; }
  .quote-card { font-size: 1.2rem; padding-top: 32px; }
  .quote-card::before { font-size: 3rem; top: 0; }
  .hero-media img { max-height: 240px; }
  .trust-strip { height: 50px; }
  .trust-track { gap: 40px; padding: 0 20px; }
  .trust-track span { gap: 40px; font-size: 0.72rem; letter-spacing: 0.2em; }
  /* Mobile: show hamburger, hide nav until toggled */
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { width: 100%; justify-content: flex-end; }
  .site-nav .nav-links {
    display: none;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: var(--canvas-cream);
    border: 1px solid var(--gold-border-soft);
    border-radius: 16px;
  }
  .site-nav .nav-links.open { display: flex; }
  .site-nav .nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
  }
}