/* ============================================================
   GOLDY CAR DETAILING — STYLES
   Dark luxe, champagne gold, cinematic.
   Inherits proven control-detailing patterns, refines on top.
   ============================================================ */

/* -------- TOKENS -------- */
:root {
  --wipe: 0.5;
  --dirt: 0.5;
  --thumb: 34px;
  /* A range thumb's centre travels from thumb/2 to width-thumb/2, so the track
     fill has to use the same geometry or it drifts ~17px at the ends. Defined
     at root because the slider is rendered in several places on the page. */
  --wipe-x: calc(var(--wipe) * (100% - var(--thumb)) + var(--thumb) / 2);
  /* Surface */
  --bg-deep:        #07090F;
  --bg-card:        #0E1219;
  --bg-card-2:      #131825;
  --bg-elev:        #1A2030;
  --line:           rgba(255, 255, 255, 0.08);
  --line-strong:    rgba(255, 255, 255, 0.16);

  /* Gold scale — warmer than control-detailing (#D4AF37) for "Goldy" identity */
  --gold:           #E0B872;
  --gold-warm:      #EFCB8A;
  --gold-deep:      #B8893D;
  --gold-soft:      rgba(224, 184, 114, 0.12);
  --gold-line:      rgba(224, 184, 114, 0.32);

  /* Text */
  --text-primary:   #F4F2EE;
  --text-body:      #C7CBD3;
  /* --text-muted is the dimmest text token that clears WCAG AA (4.5:1) on
     every surface in this palette — 5.21:1 even on the lightest (--bg-elev).
     The old --text-faint (#4E5462) bottomed out at 2.14:1 and is retired;
     its only two consumers now use --text-muted. */
  --text-muted:     #8C92A0;

  /* Type */
  --font-display:   'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rhythm */
  --gap-section:    clamp(5rem, 10vw, 9rem);
  --gap-inner:      clamp(2rem, 4vw, 4rem);
  --container:      min(1280px, 92vw);

  /* Radius */
  --r-sm:           10px;
  --r:              16px;
  --r-lg:           24px;
  --r-pill:         999px;

  /* Shadow */
  --shadow-card:    0 30px 80px -30px rgba(0, 0, 0, 0.7);
  --shadow-gold:    0 30px 80px -25px rgba(224, 184, 114, 0.35);
  --shadow-deep:    0 60px 120px -40px rgba(0, 0, 0, 0.9);

  /* Motion */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:      cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* -------- RESET -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Type primitives */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 0.7em;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--gold);
  animation: dotPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; color: var(--text-body); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text-body); max-width: 56ch; }

.gold-grad {
  background: linear-gradient(95deg, var(--gold-warm) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

/* -------- LAYOUT -------- */
.container { width: var(--container); margin-inline: auto; }
section { padding-block: var(--gap-section); position: relative; }
.section-head { max-width: 56rem; margin: 0 auto var(--gap-inner); text-align: center; }
.section-head .eyebrow { display: inline-block; margin-bottom: 1.1rem; }
.section-head h2 { margin-bottom: 0.85rem; }
.section-head p  { color: var(--text-muted); max-width: 50ch; margin-inline: auto; }

/* Animated section divider */
.divider {
  height: 1px;
  width: min(680px, 80vw);
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-line) 50%,
    transparent 100%);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.divider.is-in { transform: scaleX(1); }

/* -------- BUTTONS -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-warm) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: #1A1208;
  box-shadow: 0 18px 40px -15px rgba(224, 184, 114, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -15px rgba(224, 184, 114, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.btn .arrow {
  display: inline-block;
  transition: transform 220ms var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* -------- NAV -------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 1.1rem 0;
  background: linear-gradient(180deg, rgba(7, 9, 15, 0.85) 0%, rgba(7, 9, 15, 0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: padding 240ms var(--ease-out), background 240ms var(--ease-out);
}
.nav.is-scrolled {
  padding: 0.7rem 0;
  background: rgba(7, 9, 15, 0.92);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--gold-warm) 0%, var(--gold) 30%, var(--gold-deep) 60%, var(--gold) 90%, var(--gold-warm) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
  position: relative;
  z-index: 1;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.92rem;
  color: var(--text-body);
  position: relative;
  transition: color 200ms var(--ease-out);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 0.8rem; }
.nav-phone {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.01em;
}

/* Burger */
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 49;
  padding: 6rem 6vw calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(-100%);
  transition: transform 420ms var(--ease-emph);
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* stop the page behind from scrolling on touch */
}
.drawer.is-open { transform: translateY(0); }
.drawer a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-primary);
}
.drawer a:last-of-type { border-bottom: none; }
.drawer .btn { margin-top: 1.4rem; align-self: flex-start; }

/* -------- HERO -------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.6) saturate(1.05) contrast(1.04);
  transform: scale(1.06);
}
/* Retired reveal layer — permanently covered by .hero-video, so no
   compositor hint (it never animates in the shipped design). */
.hero-bg .after-layer {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
}
.hero-bg .after-layer img {
  filter: brightness(0.85) saturate(1.18) contrast(1.05);
}
/* WebGL shader canvas — sits between bg and content */
.hero-shader {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
/* Vignette */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(7, 9, 15, 0.95) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7, 9, 15, 0.55) 0%, rgba(7, 9, 15, 0) 40%);
  z-index: -1;
  pointer-events: none;
}
.hero-content {
  max-width: 64rem;
  position: relative;
  will-change: opacity, transform;
}
.hero-content .eyebrow { margin-bottom: 1.6rem; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1.4rem;
}
.hero-title .line { display: block; }
.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-body);
  max-width: 38rem;
  margin: 0 0 2rem;
  line-height: 1.55;
}
.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero-meta {
  position: absolute;
  bottom: 2rem;
  left: 4vw;
  right: 4vw;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-meta .gold-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
  align-self: center;
  max-width: 40vw;
}
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--gold));
  opacity: 0.6;
}
.scroll-cue::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 5px; height: 12px;
  background: var(--gold);
  border-radius: 999px;
  transform: translateX(-50%);
  animation: scrollSlide 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollSlide {
  0%   { transform: translate(-50%, 0);    opacity: 1; }
  100% { transform: translate(-50%, 60px); opacity: 0; }
}

/* -------- PAGE-LOAD OVERTURE -------- */
.overture {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.overture-bloom {
  position: absolute;
  width: 60vmin; height: 60vmin;
  background: radial-gradient(circle at center, rgba(239, 203, 138, 0.6) 0%, rgba(224, 184, 114, 0.2) 30%, transparent 65%);
  filter: blur(8px);
  transform: scale(0);
  border-radius: 50%;
}
.overture-mark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: 0.05em;
  background: linear-gradient(95deg, var(--gold-warm) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.overture-mark .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* -------- TRUST STRIP -------- */
.trust {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0%, rgba(255, 255, 255, 0) 100%);
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.trust-cell {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.trust-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.trust-num .suffix { color: var(--gold); margin-left: 0.1em; }
.trust-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* -------- CONFIGURATOR -------- */
.configurator {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
}
.cfg {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 3rem);
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.cfg::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-soft) 0%, transparent 30%, transparent 70%, var(--gold-soft) 100%);
  pointer-events: none;
  z-index: 0;
}
.cfg-inner { position: relative; z-index: 1; }
.cfg-step { display: none; }
.cfg-step.is-active { display: block; animation: cfgIn 360ms var(--ease-out) both; }
@keyframes cfgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cfg-progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}
.cfg-pip {
  height: 3px;
  flex: 1;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.cfg-pip::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-warm), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.cfg-pip.is-active::after { transform: scaleX(1); }
.cfg-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin: 0 0 1.4rem;
}
.cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
  gap: 0.8rem;
}
.cfg-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
  transition: border 200ms var(--ease-out), background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.cfg-opt:hover { border-color: var(--gold-line); background: rgba(224, 184, 114, 0.04); transform: translateY(-2px); }
.cfg-opt.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold), 0 18px 40px -20px rgba(224, 184, 114, 0.5);
}
.cfg-opt-icon {
  width: 28px; height: 28px;
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.cfg-opt-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}
.cfg-opt-blurb {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.cfg-actions {
  margin-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.cfg-back {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;            /* full touch target */
  padding: 0.4rem 0.2rem;
  margin-left: -0.2rem;
}
.cfg-back:hover { color: var(--text-primary); }

/* Outcome card */
.cfg-result {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
.cfg-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cfg-result-tier {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.cfg-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  background: linear-gradient(95deg, var(--gold-warm), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.cfg-price small {
  font-size: 0.5em;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 0.3em;
}
.cfg-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.cfg-includes li {
  font-size: 0.95rem;
  color: var(--text-body);
  padding-left: 1.4rem;
  position: relative;
}
.cfg-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
}

/* -------- PACKAGES (sticky morphing) -------- */
.packages {
  background: var(--bg-deep);
  position: relative;
}
.pkg-stack {
  position: relative;
}
.pkg-plate {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.pkg-plate::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,15,0.7), rgba(7,9,15,0.94));
}
.pkg-plate.is-active { opacity: 0.45; }
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  position: relative;
  z-index: 1;
}
.pkg {
  position: relative;
  padding: 2.2rem 1.8rem;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 320ms var(--ease-out), border 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  box-shadow: var(--shadow-card);
}
.pkg:hover { transform: translateY(-6px); border-color: var(--gold-line); box-shadow: var(--shadow-gold); }
.pkg.is-popular {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.pkg-badge {
  position: absolute;
  top: -10px; right: 1.6rem;
  padding: 4px 10px;
  background: linear-gradient(95deg, var(--gold-warm), var(--gold));
  color: #1A1208;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* -------- PROMO SLOT --------
   One offer at a time: a band under the trust strip, plus a was/now on the
   package it names. Most days there is no promo, so the mount has to cost the
   page exactly nothing — [hidden] is restated here because a display rule
   arriving later would quietly beat the UA stylesheet's `hidden`. */
.promo-slot[hidden] { display: none; }
.promo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  margin-block: clamp(1.6rem, 3vw, 2.6rem);
  padding: 1.4rem 1.6rem;
  background: linear-gradient(120deg, var(--gold-soft) 0%, rgba(224, 184, 114, 0.03) 100%);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
}
/* Same pill recipe as .pkg-badge — it just isn't positioned, it sits in the row. */
.promo-badge {
  padding: 4px 10px;
  background: linear-gradient(95deg, var(--gold-warm), var(--gold));
  color: #1A1208;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
/* min-width:0 so a long headline wraps inside the copy block instead of forcing
   the flex row wider than the container. */
.promo-copy { flex: 1 1 16rem; min-width: 0; }
.promo-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: -0.015em;
}
.promo-sub {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.promo-cta { margin-left: auto; }
@media (max-width: 640px) {
  .promo-cta { margin-left: 0; width: 100%; justify-content: center; }
}
/* The struck-out old price. Deliberately NOT styled like .pkg-price-num: that
   one paints its glyphs with a clipped gold gradient, and a line-through drawn
   across transparent text reads as a gold bar floating over nothing. */
.pkg-price-was {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  text-decoration: line-through;
}
/* Deeper gold than .pkg-badge so the two read as different things when the gold
   card is wearing both. */
.pkg-badge-promo {
  background: linear-gradient(95deg, var(--gold), var(--gold-deep));
  color: #120C04;
  /* Gracie types this label. Truncating a runaway one is kinder than letting it
     grow across the card and collide with "Most picked" in the other corner. */
  max-width: 45%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* "Most picked" already owns the right corner on the gold card, so the promo
   badge crosses to the left rather than stacking on top of it. */
.pkg-badge-promo.is-second { right: auto; left: 1.6rem; }

.pkg-tier {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}
.pkg-summary { color: var(--text-muted); font-size: 0.94rem; }
.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.pkg-price-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.025em;
  background: linear-gradient(95deg, var(--gold-warm), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pkg-price small { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; }
.pkg-turnaround { font-size: 0.85rem; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; }
.pkg-divider {
  height: 1px;
  background: var(--line);
  margin: 0.4rem 0;
}
.pkg-includes {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.93rem;
  color: var(--text-body);
}
.pkg-includes li {
  position: relative;
  padding-left: 1.2rem;
}
.pkg-includes li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
}
.pkg-cta { margin-top: auto; padding-top: 0.4rem; }
.pkg-cta .btn { width: 100%; justify-content: center; }

/* -------- GALLERY -------- */
.gallery {
  background: var(--bg-deep);
}

/* -------- WORK RAILS (v7) --------
   Rail 1 = every photo. Rail 2 = category cards that filter Rail 1.
   Native overflow-x at EVERY breakpoint — the old .occasion-rail was
   overflow:hidden above 1025px with no scroll driver, so its tail cards
   were unreachable. No will-change: nothing transforms these tracks. */
.rail-wrap { position: relative; margin-top: var(--gap-inner); }

.rail {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;   /* no scroll-chaining / iOS back-swipe */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;         /* proximity never fights a fast flick */
  scroll-padding-inline: 4vw;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r); }

.rail-track {
  display: flex;
  gap: 1rem;
  padding-inline: 4vw;
  padding-block: 0.4rem;
}
/* Guards the trailing inset in engines that drop end padding on overflow. */
.rail-track::after { content: ''; flex: 0 0 1px; }

/* One composited animation on the TRACK when the filter changes — never 30
   per-card transitions. */
.work-track.is-swapping { animation: railSwap 260ms var(--ease-out); }
@keyframes railSwap {
  from { opacity: 0.35; transform: translate3d(-10px, 0, 0); }
  to   { opacity: 1;    transform: translate3d(0, 0, 0); }
}

.work-card {
  flex: 0 0 min(300px, 68vw);      /* deliberate peek = "this scrolls" */
  aspect-ratio: 3 / 4;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  isolation: isolate;
}
.work-card.is-filtered { display: none; }
.work-card img { width: 100%; height: 100%; object-fit: cover; }
.work-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,9,15,0.8) 100%);
  pointer-events: none;
}
.work-card-tag {
  position: absolute; bottom: 0.9rem; left: 0.9rem; z-index: 1;
  padding: 4px 9px;
  background: rgba(7,9,15,0.7);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px;
}

.rail-hint {
  margin: 2.2rem 0 0.8rem;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-card {
  flex: 0 0 min(190px, 46vw);
  aspect-ratio: 4 / 5;
  min-height: 44px;
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.filter-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity 300ms var(--ease-out);
}
.filter-card-meta {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 1.2rem 1rem 0.9rem;
  background: linear-gradient(180deg, transparent 0%, rgba(7,9,15,0.94) 65%);
}
.filter-card-label { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.filter-card-count { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }
.filter-card[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 18px 40px -22px rgba(224,184,114,0.55);
}
.filter-card[aria-pressed="true"] img { opacity: 0.92; }
.filter-card[aria-pressed="true"] .filter-card-label { color: var(--gold); }

/* Desktop-only affordances: visible scrollbar, arrows, grab-drag. */
.rail-nav { display: none; }
@media (hover: hover) and (min-width: 1025px) {
  .rail { scrollbar-width: thin; scrollbar-color: var(--gold-line) transparent; }
  .rail::-webkit-scrollbar { display: block; height: 6px; }
  .rail::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; }
  .rail::-webkit-scrollbar-track { background: transparent; }
  .work-rail { cursor: grab; }
  .work-rail.is-grabbing { cursor: grabbing; user-select: none; }
  .filter-card:hover { transform: translateY(-3px); border-color: var(--gold-line); }
  .filter-card:hover img { opacity: 0.85; }

  .rail-nav {
    display: grid; place-items: center;
    position: absolute; top: 50%; z-index: 3;
    width: 46px; height: 46px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(7,9,15,0.82);
    border: 1px solid var(--line-strong);
    color: var(--text-primary);
    transition: background 200ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .rail-nav:hover { background: rgba(224,184,114,0.18); border-color: var(--gold-line); }
  .rail-nav[disabled] { opacity: 0.25; pointer-events: none; }
  .rail-prev { left: 0.6rem; }
  .rail-next { right: 0.6rem; }
}

/* Screen-reader-only live status */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -------- TESTIMONIALS -------- */
.tmt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: var(--gap-inner);
}
.tmt {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* -------- ABOUT -------- */
.about {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-portrait {
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  position: relative;
  background: var(--bg-elev);
  box-shadow: var(--shadow-deep);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(190deg, transparent 50%, rgba(7,9,15,0.6) 100%);
  pointer-events: none;
}
.about-text .eyebrow { margin-bottom: 1rem; }
.about-text h2 { margin-bottom: 1.4rem; }
.about-text p { margin-bottom: 1rem; font-size: 1.05rem; line-height: 1.65; }
.about-signature {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.2rem;
  margin-top: 1.5rem;
}

/* -------- SUBURBS -------- */
.suburbs {
  background: var(--bg-deep);
}
.suburb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0.8rem;
}
.suburb-card {
  padding: 1.4rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border 220ms var(--ease-out), transform 220ms var(--ease-out), background 220ms var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.suburb-card:hover {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(224,184,114,0.04) 100%);
  transform: translateY(-3px);
}
.suburb-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.suburb-region {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.suburb-arrow { color: var(--gold); font-size: 1.2rem; }

/* -------- FAQ -------- */
.faq {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 0.6rem;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border 220ms var(--ease-out);
}
.faq-item[open] {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(224,184,114,0.03) 100%);
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gold);
  transition: transform 240ms var(--ease-out);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a {
  padding: 0 1.4rem 1.4rem;
  color: var(--text-body);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* -------- CTA STRIP -------- */
.cta-strip {
  padding-block: clamp(4rem, 7vw, 6rem);
  background: var(--bg-deep);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 80% at 50% 0%, rgba(224, 184, 114, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.cta-strip h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 1rem; position: relative; }
.cta-strip p { color: var(--text-body); max-width: 50ch; margin: 0 auto 2rem; position: relative; }
.cta-strip-ctas { display: inline-flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; position: relative; }

/* -------- CONTACT -------- */
.contact { background: var(--bg-deep); }
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-side h3 { margin-bottom: 1rem; }
.contact-side p { color: var(--text-body); margin-bottom: 1.5rem; max-width: 36ch; }
.contact-channels { display: grid; gap: 0.6rem; }
.channel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border 200ms var(--ease-out), background 200ms var(--ease-out);
}
.channel:hover { border-color: var(--gold-line); background: linear-gradient(180deg, var(--bg-card), rgba(224,184,114,0.04)); }
.channel-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.channel-meta { display: flex; flex-direction: column; }
.channel-label { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.channel-value { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); font-size: 1.02rem; }

.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.field { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.field label { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.04em; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.96rem;
  transition: border 180ms var(--ease-out), background 180ms var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(224,184,114,0.04);
  outline: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-submit { margin-top: 0.4rem; }
.form-submit .btn { width: 100%; justify-content: center; }
.form-note {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* -------- FOOTER -------- */
.footer {
  background: #050609;
  border-top: 1px solid var(--line);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer h4 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
/* Gap trimmed to absorb the taller links so the column rhythm is unchanged. */
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
/* min-height 44px = minimum comfortable tap target (was 34px). */
.footer a {
  color: var(--text-body);
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
  transition: color 180ms var(--ease-out);
}
.footer a:hover { color: var(--gold); }
.footer-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  background: linear-gradient(95deg, var(--gold-warm), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.8rem;
}
.footer-blurb { color: var(--text-muted); font-size: 0.9rem; max-width: 32ch; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* -------- FLOATING CALL (mobile) -------- */
.float-call {
  position: fixed;
  /* clear the iPhone home indicator (env() is 0 where there's no inset) */
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  right: calc(1.2rem + env(safe-area-inset-right));
  z-index: 40;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-warm), var(--gold-deep));
  color: #1A1208;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px -10px rgba(224, 184, 114, 0.55);
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.float-call.is-visible { transform: translateY(0) scale(1); opacity: 1; }

/* -------- CURSOR GLOW (desktop only, via JS check) -------- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 184, 114, 0.35) 0%, rgba(224, 184, 114, 0) 60%);
  pointer-events: none;
  z-index: 30;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  will-change: transform, opacity;
}
body.has-cursor .cursor-glow { opacity: 1; }

/* -------- REVEAL UTILS -------- */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.has-js [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
.has-js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.has-js [data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* SplitText (word-level, hand-rolled) */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 700ms var(--ease-emph);
}
.has-js .split.is-in .split-word > span { transform: translateY(0); }

/* -------- RESPONSIVE -------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .tmt-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* -------- HOVER-ONLY COMPOSITOR HINTS --------
   These images only ever transform on :hover, so promoting them is pure cost
   on touch. Opted IN here rather than opted out in a max-width block — an
   opt-out is order-dependent at equal specificity and silently loses to any
   base rule declared later in the file. */
@media (hover: hover) and (min-width: 1025px) {
  .showcase-photo img,
  .behind-tile img,
  .featured-photo img { will-change: transform; }
}

/* -------- ULTRA-NARROW (iPhone SE 1st gen, Display Zoom) --------
   Below 1025px .nav-links are hidden and the burger is the ONLY route to
   Bikes / Caravans / How rough is it / Contact. At 320px the nav CTA pushed
   the burger 73% off-screen, so drop it here — the hero repeats the same
   "Get my price" CTA about 100px further down. */
@media (max-width: 360px) {
  .nav-cta .btn-primary { display: none; }
  .nav-inner { gap: 0.6rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 7rem; padding-bottom: 4rem; }
  .hero-meta { display: none; }
  .pkg-grid { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .nav-phone { display: none; }
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .trust-num { font-size: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .cfg-result-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .float-call { display: flex; }
  /* 16px minimum stops iOS Safari auto-zooming the page on input focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* -------- REDUCED MOTION -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .has-js [data-reveal],
  .has-js [data-reveal-stagger] > *,
  .has-js .split-word > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-bg .after-layer { clip-path: inset(0 0 0 0); }
  .hero-shader, .cursor-glow, .overture { display: none !important; }
  .scroll-cue, .brand-mark { animation: none !important; }
}

/* =====================================================================
   DEDICATED SHOWCASE SECTIONS — Bikes + Vans/RVs (text ↔ photos split)
   ===================================================================== */
.showcase {
  position: relative;
}
.showcase-bikes {
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0a0c14 60%, var(--bg-deep) 100%);
}
.showcase-rvs {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 60%, var(--bg-deep) 100%);
}
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.showcase-grid-reverse { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

.showcase-text { display: flex; flex-direction: column; gap: 1rem; }
.showcase-text .eyebrow { margin-bottom: 0.5rem; }
.showcase-text h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); letter-spacing: -0.025em; }
.showcase-text p { font-size: clamp(1.02rem, 1.3vw, 1.12rem); color: var(--text-body); line-height: 1.65; max-width: 38rem; }
.showcase-cta { margin-top: 0.6rem; }

.showcase-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}
.showcase-photos-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
}
.showcase-photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg-card);
  border: 1px solid var(--line);
  isolation: isolate;
}
/* No will-change here on purpose — it is opted IN only for pointer devices
   at >=1025px (see "HOVER-ONLY COMPOSITOR HINTS" below). A base declaration
   here would win over any max-width override that appears earlier in the file. */
.showcase-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.showcase-photo:hover img { transform: scale(1.05); }
.showcase-photo.span-2 { grid-column: span 2; grid-row: span 2; }
.showcase-photo.is-featured {
  border-color: var(--gold-line);
  box-shadow: 0 30px 80px -30px rgba(224, 184, 114, 0.45);
}
.showcase-photo.is-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(7, 9, 15, 0.7) 100%);
  pointer-events: none;
}

/* =====================================================================
   BEHIND THE DETAIL — horizontal spec strip
   ===================================================================== */
.behind {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
}
.behind-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: var(--gap-inner);
}
.behind-tile {
  margin: 0;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg-card);
  border: 1px solid var(--line);
  isolation: isolate;
}
/* will-change opted in under @media (hover: hover) and (min-width: 1025px). */
.behind-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out), filter 500ms var(--ease-out);
}
.behind-tile:hover img { transform: scale(1.04); filter: brightness(1.05); }
.behind-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.6rem 1rem 0.9rem;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 15, 0.92) 75%);
  color: var(--text-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* =====================================================================
   RESPONSIVE — showcases stack, behind strip wraps
   ===================================================================== */
@media (max-width: 1024px) {
  .showcase-grid,
  .showcase-grid-reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .showcase-grid-reverse .showcase-photos { order: 2; }
  .showcase-photos,
  .showcase-photos-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
  .behind-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .showcase-photos,
  .showcase-photos-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .showcase-photo.span-2 { grid-column: span 2; grid-row: span 1; }
  .behind-strip { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .behind-tile figcaption { font-size: 0.72rem; padding: 1.2rem 0.7rem 0.7rem; }
}

/* =====================================================================
   WHY GOLDY — 4-pillar differentiation
   ===================================================================== */
.why {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: var(--gap-inner);
}
.why-pillar {
  padding: 2rem 1.6rem;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  transition: transform 320ms var(--ease-out), border 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.why-pillar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--gold-soft) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
.why-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-gold);
}
.why-pillar:hover::before { opacity: 1; }
.why-glyph {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold);
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}
.why-glyph svg { width: 24px; height: 24px; }
.why-pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.why-pillar-body {
  font-size: 0.94rem;
  color: var(--text-body);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* =====================================================================
   BEFORE / AFTER — draggable slider
   ===================================================================== */
.reveal {
  background: var(--bg-deep);
}
/* =====================================================================
   RESPONSIVE — pillars stack
   ===================================================================== */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .why-pillar { padding: 1.6rem 1.3rem; }
}

/* =====================================================================
   FEATURED TRANSFORMATION — replaces fake before/after slider
   Real photo + Gracie's verbatim IG caption. Honest, cinematic.
   ===================================================================== */
.featured {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 60%, var(--bg-deep) 100%);
  position: relative;
}
.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 70% 50%, var(--gold-soft) 0%, transparent 60%);
  pointer-events: none;
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
}
.featured-photo {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-elev);
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-deep);
  isolation: isolate;
}
/* will-change opted in under @media (hover: hover) and (min-width: 1025px). */
.featured-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.featured-photo:hover img { transform: scale(1.03); }
.featured-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7, 9, 15, 0.85) 100%);
  pointer-events: none;
}
.featured-plate {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  z-index: 1;
  padding: 8px 14px;
  background: rgba(7, 9, 15, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.featured-copy { display: flex; flex-direction: column; gap: 1.2rem; }
.featured-copy h2 { font-size: clamp(1.85rem, 3.4vw, 2.8rem); letter-spacing: -0.025em; }
.featured-quote {
  margin: 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-body);
}
.featured-attribution {
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin: -0.4rem 0 0 1.4rem;
}
.featured-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.6rem; }

@media (max-width: 1024px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-photo { aspect-ratio: 4/3; }
}
@media (max-width: 640px) {
  .featured-photo { aspect-ratio: 1/1; }
  .featured-plate { font-size: 0.7rem; padding: 6px 10px; bottom: 0.8rem; left: 0.8rem; }
}

/* =====================================================================
   TESTIMONIALS — social-proof cards (replaces fake-quote pattern)
   ===================================================================== */
.tmt-proof {
  text-align: left;
  gap: 0.6rem;
}
.tmt-metric {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
  background: linear-gradient(95deg, var(--gold-warm), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.tmt-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.tmt-sub {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.5;
  margin-top: 0.3rem;
}

/* =====================================================================
   ACCESSIBILITY UTILITIES
   ===================================================================== */
/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(135deg, var(--gold-warm), var(--gold-deep));
  color: #1A1208;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--r-pill);
  box-shadow: 0 18px 40px -10px rgba(224, 184, 114, 0.55);
  transform: translateY(-150%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--gold-warm);
  outline-offset: 3px;
}

/* =====================================================================
   GOLD-GRAD + SPLIT-TEXT INTEROP FIX
   `.gold-grad` uses `color: transparent + background-clip: text` which
   doesn't propagate through nested .split-word > span elements (the
   inner spans get color: transparent but no background, so the text
   reads as fully transparent). Re-apply the gradient on the inner span.
   ===================================================================== */
.gold-grad .split-word,
.gold-grad .split-word > span {
  background: linear-gradient(95deg, var(--gold-warm) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

/* =====================================================================
   v6 — CONFIGURATOR RESULT: summary, includes accordion, add-on picker
   ===================================================================== */
.cfg-result-summary {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

/* Keep the "from · estimate" line readable — override the gradient's
   transparent text-fill it would otherwise inherit from .cfg-price. */
.cfg-price small {
  display: block;
  margin-top: 0.25rem;
  background: none;
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.42em;
  letter-spacing: 0.03em;
  text-transform: none;
}

.cfg-includes-accordion {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.cfg-includes-accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.95rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary);
  transition: background 200ms var(--ease-out);
}
.cfg-includes-accordion > summary::-webkit-details-marker { display: none; }
.cfg-includes-accordion > summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease-out);
  margin-right: 0.2rem;
  flex: none;
}
.cfg-includes-accordion[open] > summary::after { transform: rotate(-135deg); }
.cfg-includes-accordion > summary:hover { background: var(--gold-soft); }
.cfg-includes-accordion .cfg-includes { padding: 0.2rem 1.1rem 1.1rem; }

.cfg-ctas { margin-top: 0.1rem; }
.cfg-hedge {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--text-body);
  text-align: center;
}
.cfg-foot {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.cfg-svc-group-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.cfg-svc {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  min-height: 44px;
  margin-bottom: 0.55rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
  transition: border 180ms var(--ease-out), background 180ms var(--ease-out);
}
.cfg-svc:last-child { margin-bottom: 0; }
.cfg-svc:hover { border-color: var(--gold-line); }
.cfg-svc.is-selected { border-color: var(--gold); background: var(--gold-soft); }
.cfg-svc-check {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  position: relative;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.cfg-svc.is-selected .cfg-svc-check { background: var(--gold); border-color: var(--gold); }
.cfg-svc.is-selected .cfg-svc-check::after {
  content: '';
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid #1A1208; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cfg-svc-name { flex: 1; font-size: 0.92rem; color: var(--text-body); }
.cfg-svc.is-selected .cfg-svc-name { color: var(--text-primary); }
.cfg-svc-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 0.92rem;
  white-space: nowrap;
}
.cfg-compare {
  padding: 0.85rem 1.1rem;
  background: rgba(224, 184, 114, 0.06);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* ===================== BUILD-YOUR-OWN SECTION ===================== */
.build { position: relative; padding: var(--gap-section) 0; }
.build-panel {
  max-width: 1000px;
  margin: 2.4rem auto 0;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-card);
}
.build-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: start;
}
.build-summary {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.build-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.build-total-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.build-total-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.02em;
  background: linear-gradient(95deg, var(--gold-warm), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.build-ctas { margin-top: 1rem; }

/* Pre-included Tidy up base */
.build-base {
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
}
.build-base-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.build-base-title { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); }
.build-base-tag {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A1208;
  background: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 0.4rem;
}
.build-base-price { font-family: var(--font-display); font-weight: 800; color: var(--gold); font-size: 1.3rem; }
.build-base-acc { margin-top: 0.7rem; border: none; background: transparent; border-radius: 0; }
/* min-height 44px = minimum comfortable tap target (was 30.7px).
   Padding stays tight so the disclosure still reads as a subtle sub-control. */
.build-base-acc > summary { padding: 0.3rem 0; font-size: 0.85rem; min-height: 44px; }
.build-base-acc .cfg-includes { padding: 0.2rem 0 0; }
.build-add-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
@media (max-width: 760px) { .build-menu { grid-template-columns: 1fr; } }

/* =====================================================================
   v6 — PACKAGES "See full list" toggle
   ===================================================================== */
.pkg-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  padding: 0.55rem 0;
  min-height: 44px;
}
.pkg-more > summary::-webkit-details-marker { display: none; }
.pkg-more > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 220ms var(--ease-out);
}
.pkg-more[open] > summary::after { transform: rotate(-135deg); }
.pkg-more .pkg-includes { margin-top: 0.6rem; }
.pkg-more-count { color: var(--text-muted); font-weight: 600; }

/* =====================================================================
   v6 — MAINTENANCE PLAN section (recurring offer for regulars)
   ===================================================================== */
.maintenance {
  position: relative;
  padding: var(--gap-section) 0;
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0a0c14 55%, var(--bg-deep) 100%);
}
.maintenance-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.maintenance-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-soft) 0%, transparent 35%, transparent 65%, var(--gold-soft) 100%);
  pointer-events: none;
}
.maintenance-copy, .maintenance-pick { position: relative; }
.maintenance-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0.9rem;
}
.maintenance-blurb {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 34rem;
}
.cadence-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.cadence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
}
.cadence-chip {
  padding: 0.8rem 1.15rem;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.cadence-chip:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.cadence-chip.is-selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-warm), var(--gold));
  color: #1A1208;
  box-shadow: 0 14px 30px -14px rgba(224, 184, 114, 0.6);
}
.maintenance-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.maintenance-micro {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* =====================================================================
   v6 — HERO VIDEO (replaces static after.jpg; reduced-motion → poster)
   ===================================================================== */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.85) saturate(1.18) contrast(1.05);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  z-index: 1; /* the video fills the whole hero, edge to edge */
}
.hero-video.is-ready { opacity: 1; }
/* The autoplay video replaces the before/after reveal, so retire the reveal label */
.hero-meta { display: none; }

/* Hero CTAs: Build my price + Text Gracie on top, Maintenance plans underneath (desktop) */
#heroCtas { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
#heroCtas .hero-cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* v6 responsive */
@media (max-width: 860px) {
  .maintenance-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #heroCtas { align-items: stretch; }
  #heroCtas .hero-cta-row { flex-direction: column; }
  .hero-ctas .btn,
  .cfg-ctas .btn,
  .maintenance-ctas .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
}

/* =====================================================================
   v7 — CONDITION SELF-ASSESSMENT ("How rough is it?")
   A visitor INPUT control. Never labelled as a result of Gracie's work.
   All motion is CSS off two custom properties; JS writes them once per
   level change (max 4 writes across a full drag), never per frame.
   ===================================================================== */

/* Registered so they can be transitioned. Where @property is unsupported
   the widget simply snaps between levels — still perfectly usable. */
@property --wipe { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --dirt { syntax: '<number>'; inherits: true; initial-value: 0.5; }

.condition {
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0a0c14 55%, var(--bg-deep) 100%);
}

.cond-panel {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: center;
  max-width: 1020px;
  margin: var(--gap-inner) auto 0;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
}
/* While a finger/mouse is down: track instantly, no rubber-banding. */
.cond-dragging .cond-stage .cond-frame,
.cond-dragging .cond-stage .cond-base { transition: none !important; }

.cond-visual { min-width: 0; }
.cond-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 5;          /* matches the exported stage-N.jpg frames exactly */
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
/* ---- The grime engine ----------------------------------------------------
   Five photographic frames of the SAME Mazda interior, same angle, same light,
   each one dirtier than the last. --dirt cross-fades them: each frame fades in
   over the one below and STAYS, so the grime builds continuously as the handle
   moves instead of cutting between stills, and there are no gaps between
   thresholds. Opacity is the only animated property, so this is compositor-only
   and cheap on mobile — it replaced a ten-layer stack of drawn-on dust, hair,
   grit and rubbish, which is why all of those rules are gone.
   Still a reference scale, NOT a before/after of Gracie's work. */
.cond-base,
.cond-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cond-base  { z-index: 0; }
.cond-frame { z-index: 1; pointer-events: none; }
/* Each frame owns one quarter of the travel and is fully opaque by the end of
   it, so frame N is solid before frame N+1 starts lifting. */
.cond-frame[data-frame="2"] { opacity: clamp(0, calc(var(--dirt) / 0.25), 1); }
.cond-frame[data-frame="3"] { opacity: clamp(0, calc((var(--dirt) - 0.25) / 0.25), 1); }
.cond-frame[data-frame="4"] { opacity: clamp(0, calc((var(--dirt) - 0.50) / 0.25), 1); }
.cond-frame[data-frame="5"] { opacity: clamp(0, calc((var(--dirt) - 0.75) / 0.25), 1); }

.cond-label {
  display: block;
  margin: 1.1rem 0 0.2rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.cond-range {
  -webkit-appearance: none; appearance: none;
  display: block;
  width: 100%;
  height: 44px;                 /* full 44px touch target */
  margin: 0;
  background: transparent;
  touch-action: pan-y;          /* vertical page scroll still passes through */
  cursor: ew-resize;
}
.cond-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) var(--wipe-x), rgba(255,255,255,0.10) var(--wipe-x));
}
.cond-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb);
  margin-top: -13px;            /* centre the 34px thumb on the 8px track */
  border-radius: 50%;
  border: 2px solid #1A1208;
  background: linear-gradient(135deg, var(--gold-warm), var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.85), 0 0 0 6px rgba(224,184,114,0.14);
}
.cond-range::-moz-range-track    { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.10); }
.cond-range::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.cond-range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #1A1208; background: var(--gold);
}
.cond-range:focus-visible { outline: none; }
.cond-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gold); outline-offset: 3px; }
.cond-range:focus-visible::-moz-range-thumb     { outline: 2px solid var(--gold); outline-offset: 3px; }

.cond-ends {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.75rem; color: var(--text-muted);
}
.cond-photo-note {
  margin-top: 0.9rem;
  font-size: 0.76rem; line-height: 1.5;
  color: var(--text-muted);
}

.cond-readout { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.cond-level {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--gold);
}
.cond-blurb { color: var(--text-body); font-size: 0.98rem; line-height: 1.6; }
.cond-suggest {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
}
.cond-suggest-label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.cond-suggest-tier  { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); }
.cond-suggest-price { margin-left: auto; font-family: var(--font-display); font-weight: 800; color: var(--gold); font-size: 1.2rem; }
.cond-suggest-price small { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; margin-left: 0.35rem; }
.cond-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.3rem; }
.cond-foot { font-size: 0.8rem; color: var(--text-muted); }

/* Condition chip inside the contact form */
.form-condition {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  font-size: 0.86rem; color: var(--text-body);
}
.form-condition[hidden] { display: none; }
.form-condition strong { color: var(--text-primary); }
.form-condition-clear {
  margin-left: auto;
  min-height: 44px; padding: 0 0.6rem;
  font-size: 0.8rem; color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

@media (hover: hover) and (min-width: 1025px) {
  .cond-stage { cursor: ew-resize; }
}
/* The stage frames are 3:5 — portrait and tall. At a full half-width column the
   image towers over the readout beside it and leaves a dead patch of panel. Cap
   the visual column (stage, slider and note all share that width, so they stay
   flush-aligned) and give the reclaimed space to the readout. */
@media (min-width: 901px) {
  .cond-panel { grid-template-columns: 0.86fr 1.14fr; }
  .cond-visual { max-width: 372px; margin-inline-end: auto; }
}
@media (max-width: 900px) {
  .cond-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cond-ctas .btn { width: 100%; justify-content: center; }
  .cond-ends span { max-width: 45%; }
}

/* ---- Compact condition chips ----------------------------------------------
   Mirrors the big "How rough is it?" slider into every booking flow (price
   builder result, build-your-own, maintenance) so Gracie always learns the
   condition regardless of which package the visitor picks. All instances share
   one `conditionPick` and stay in sync with the slider. */
.cond-chips-label {
  margin: 1.1rem 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.cond-chips-label span {
  font-weight: 400;
  color: var(--text-muted);
}
.cond-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cond-chip {
  padding: 0.6rem 0.85rem;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.cond-chip.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}
@media (hover: hover) { .cond-chip:hover { border-color: var(--gold-line); } }
@media (max-width: 640px) { .cond-chip { flex: 1 1 auto; text-align: center; } }

/* ---- Compact condition slider, inline in the booking flows -----------------
   Same layered stage as the full one in #condition, at a size that fits beside
   a quote. Every instance reads --dirt off :root, so they animate together. */
.cond-stage .cond-frame { transition: opacity 120ms var(--ease-out); }

.cond-inline {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 1.1rem 0 0.4rem;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
}
.cond-stage-sm { aspect-ratio: 3 / 5; border-radius: var(--r-sm); }
.cond-inline-body { min-width: 0; }
.cond-inline-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}
.cond-inline-label span { display: block; font-weight: 400; font-size: 0.76rem; color: var(--text-muted); }
.cond-inline .cond-range { height: 44px; }
.cond-inline-read { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.1rem; }
.cond-inline-read strong { color: var(--gold); font-family: var(--font-display); font-size: 1rem; }

@media (max-width: 520px) {
  .cond-inline { grid-template-columns: 104px minmax(0, 1fr); gap: 0.8rem; padding: 0.75rem; }
}

/* Gracie's "send me photos if you're unsure" line — sits above the readout copy
   so the offer to just text her lands before anyone worries about picking wrong. */
.cond-unsure {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-body);
}
/* The condition surcharge, stated plainly under the estimate so the uplift is
   never a surprise when Gracie quotes. */
.cond-suggest-uplift {
  flex: 1 0 100%;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}