/* ============================================================
   WE MOVE IT. WE CLEAR IT. — Global Stylesheet
   Flat-modern · Premium · Minimal
   Colors: Ember Orange #FF5A1F (ALL UI actions) · Ink Navy #0A1628 · Bone #F5F1EA
   Antique Gold #C9A961 is PREMIUM-ONLY (hero underline, one popular border,
   hairline dividers, single rating star, FREE-badge shimmer). Never on buttons,
   CTAs, prices, icons, stats, step numbers, announcement bar, map pins, or form.
============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --orange:        #FF5A1F;   /* Ember Orange — ALL UI actions/accents */
  --orange-dk:     #E04A10;   /* hover/active */
  --orange-lt:     rgba(255, 90, 31, 0.10);
  --navy:          #0A1628;
  --navy-80:       rgba(10, 22, 40, 0.80);
  --navy-60:       rgba(10, 22, 40, 0.60);  /* new — WCAG-safe secondary text */
  --navy-40:       rgba(10, 22, 40, 0.40);
  --navy-12:       rgba(10, 22, 40, 0.12);
  --navy-06:       rgba(10, 22, 40, 0.06);
  --bone:          #F5F1EA;
  --bone-dk:       #EDE8DF;
  --gold:          #C9A961;   /* Antique Gold — PREMIUM-ONLY (see header note) */
  --white:         #FFFFFF;
  --success:       #16A34A;
  --error:         #DC2626;

  --font:          'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Archivo', system-ui, -apple-system, sans-serif;
  --cream-icon:    var(--bone);

  --max-w:         1180px;
  --nav-h:         68px;

  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-pill:   100px;

  --shadow-sm:     0 1px 3px rgba(10,22,40,0.07), 0 1px 2px rgba(10,22,40,0.05);
  --shadow-md:     0 4px 14px rgba(10,22,40,0.09), 0 2px 6px rgba(10,22,40,0.05);
  --shadow-lg:     0 12px 36px rgba(10,22,40,0.11), 0 4px 14px rgba(10,22,40,0.07);
  --shadow-orange: 0 4px 18px rgba(255,90,31,0.28);

  --t:             220ms ease;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--navy);
  background: var(--white);
  line-height: 1.65;
  padding-top: var(--nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a       { color: inherit; text-decoration: none; }
ul, ol  { list-style: none; }
button  { font: inherit; cursor: pointer; background: none; border: none; }
table   { border-collapse: collapse; width: 100%; }
input, select, textarea { font: inherit; }

/* ── Display font for headings ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }
h4 { font-family: var(--font-display); font-weight: 600; }
/* Consistent negative tracking across all heading levels */
h3 { letter-spacing: -0.01em; line-height: 1.25; }
h4 { letter-spacing: -0.005em; line-height: 1.3; }
strong, b { font-weight: 700; line-height: inherit; vertical-align: baseline; }

.wmic-icon,
.wmic-mark,
.wmic-inline-icon {
  display: block;
  color: var(--navy);
  flex-shrink: 0;
}
/* .wmic-icon--footer styling now handled via .footer-brand-icon (icon on light bg) */
.wmic-mark {
  width: 38px;
  height: 38px;
}
.wmic-inline-icon {
  width: 18px;
  height: 18px;
}

/* ── Icon badge container — unified badge component ── */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: rgba(10,22,40,0.04);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--navy);
  flex-shrink: 0;
  transition: border-color var(--t), background var(--t);
}

/* ============================================================
   SKIP LINK
============================================================ */
a[href="#main"] {
  position: absolute; top: -120px; left: 16px; z-index: 9999;
  padding: 10px 18px; background: var(--orange); color: var(--white);
  font-weight: 700; border-radius: var(--radius-pill); font-size: 0.875rem;
  transition: top var(--t);
}
a[href="#main"]:focus { top: 8px; }

/* ============================================================
   SECTION SHELL — full-width background, centered content
============================================================ */
main > section {
  padding: 96px 8%;
  width: 100%;
}

/* All direct children of sections get max-width + center */
main > section > *,
main > section > section > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* Alternating background: bone for even sections */
main > section:nth-child(even) { background: var(--bone); }

/* Typography inside sections */
main > section > h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 24px;
  text-align: center;
}
main > section > h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 12px;
}
main > section > p {
  font-size: 1.0625rem;
  color: var(--navy-80);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 12px;
}
main > section > p strong { color: var(--navy); }

/* Subsection intro <p> elements (e.g. inside #recommended-packages > #studio-packages) */
main > section > section > p {
  font-size: 1rem;
  color: var(--navy-80);
  max-width: 640px;
  line-height: 1.65;
  margin-bottom: 12px;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary,
.btn-secondary,
#nav-cta,
#form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 30px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform 120ms ease;
  text-decoration: none;
}
/* Visible focus ring — keyboard & switch access */
.btn-primary:focus-visible,
#form-submit:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.btn-secondary:focus-visible,
#nav-cta:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* Primary — Ember Orange */
.btn-primary,
#form-submit {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  box-shadow: 0 8px 28px rgba(255,90,31,0.42);
  transform: translateY(-2px) scale(1.015);
}
#form-submit:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  box-shadow: 0 6px 22px rgba(255,90,31,0.35);
  transform: translateY(-1px); /* no scale — full-width button */
}
.btn-primary:active { transform: translateY(0) scale(1); box-shadow: var(--shadow-orange); }
#form-submit:active { transform: translateY(0); box-shadow: var(--shadow-orange); }

/* Secondary — Outlined Navy */
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy-40);
}
.btn-secondary:hover {
  background: var(--navy-06);
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:active { transform: translateY(0); }

/* ============================================================
   NAVIGATION
============================================================ */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-h);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navy-12);
  transition: box-shadow var(--t);
}

#nav-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

#nav-logo {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: color var(--t);
}
#nav-logo:hover { color: var(--orange); }

#nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
#nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-80);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t), background var(--t);
  position: relative;
}
#nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 2px;
  background: var(--orange);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--t);
}
#nav-links a:hover { color: var(--navy); background: var(--navy-06); }
#nav-links a:hover::after { transform: scaleX(1); }

/* Active page indicator (set by JS via aria-current="page") */
#nav-links a[aria-current="page"] {
  color: var(--orange);
  background: var(--orange-lt);
  font-weight: 600;
}
#nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

#nav-cta {
  flex-shrink: 0;
  font-size: 0.875rem;
  min-height: 40px;
  padding: 10px 20px;
}

#nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background var(--t);
}
#nav-hamburger:hover { background: var(--navy-06); }
#nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
}

/* ============================================================
   HERO (index.html) — dark full-width, side-by-side layout
============================================================ */

/* Section shell: full-width bone/cream panel */
#hero {
  background: linear-gradient(145deg, #F5F1EA 0%, #EDE8DF 100%);
  position: relative;
  overflow: hidden;
  padding: 0;            /* inner wrapper handles padding */
  min-height: calc(92vh - var(--nav-h));
  display: flex;
  align-items: center;
  max-width: none;       /* override global section max-width */
  margin: 0;
}

/* Subtle navy glow behind left/truck column — keeps visual warmth without full navy */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 90% at 26% 55%, rgba(10,22,40,0.06) 0%, transparent 65%);
  pointer-events: none;
}
#hero > * { position: relative; z-index: 1; }

/* Inner grid: truck LEFT (wider) · copy RIGHT (shifted right) */
#hero-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px 96px 24px;  /* reduced left pad shifts truck toward left */
  position: relative;
  z-index: 1;
}

/* Truck card — lighter shadow + navy border for bone bg context */
#hero-visual {
  position: relative;
  background: var(--bone);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: none;
  margin: 0;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--navy-12);
}
#hero-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Copy column */
#hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: none;
  margin: 0;
}

/* Eyebrow label */
#hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);   /* eyebrow: navy on bone (12px gold/ember fail contrast) */
  margin: 0;
}

/* Headline */
#hero-copy h1 {
  font-size: clamp(2.125rem, 3.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
  text-align: left;
}

/* Subhead */
#hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency) {
  font-size: 1.0625rem;
  color: var(--navy-80);
  line-height: 1.6;
  max-width: 480px;
  text-align: left;
  margin: 0;
}

/* Primary CTA larger on hero */
#hero-copy .btn-primary {
  padding: 16px 34px;
  font-size: 1rem;
  box-shadow: var(--shadow-orange);
}

/* ============================================================
   PAGE HERO (sub-pages)
============================================================ */
#page-hero {
  background: linear-gradient(160deg, #0d1f3c 0%, var(--navy) 65%);
  color: var(--white);
  padding: 64px 8% 52px;
  text-align: center;
}
#page-hero > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
#page-hero h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 14px;
}
#page-hero p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.65);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.65;
}
/* P8: orange accent bar beneath every subpage h1 */
#page-hero h1::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin: 18px auto 0;
}

/* P6: "quick-scan" sections use 80px top/bottom instead of the default 88px */
#trust,
#how-it-works { padding-top: 80px; padding-bottom: 80px; text-align: center; }

/* ============================================================
   TRUST SECTION
============================================================ */
#trust-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
#trust-list li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
  transition: transform var(--t), box-shadow var(--t);
}
#trust-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
#trust-list h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
#trust-list p {
  font-size: 0.875rem;
  color: var(--navy-80);
  line-height: 1.7;
}
.trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: rgba(10,22,40,0.04);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--navy);
  margin: 0 auto 16px;
  flex-shrink: 0;
  transition: border-color var(--t), background var(--t);
}
/* Hide the circle-as-background inside trust SVGs — icon paths only */
.trust-icon circle.icon-bg { display: none; }

/* ============================================================
   HOW IT WORKS
============================================================ */
#how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  position: relative;
}
/* Dashed connector line between step cards on desktop */
@media (min-width: 641px) {
  #how-steps li:not(:last-child)::after {
    display: none;   /* step connectors removed — positioning was unreliable */
    content: "";
    position: absolute;
    top: 51px;
    right: -14px;
    width: 28px;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--orange) 0, var(--orange) 5px,
      transparent 5px, transparent 10px
    );
    opacity: 0.5;
    z-index: 1;
  }
}
#how-steps li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t), box-shadow var(--t);
}
#how-steps li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* Icon badge — step cards */
.how-step-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: rgba(10,22,40,0.04);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  margin: 0 auto 16px;
  flex-shrink: 0;
  transition: border-color var(--t), background var(--t);
}
#how-steps h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
#how-steps p {
  font-size: 0.875rem;
  color: var(--navy-60);
  line-height: 1.7;
  margin: 0;
}
/* Mini bullet list inside each step card */
.how-step-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--navy-06);
}
.how-step-includes li {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--navy-80);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
/* Chevron checkmark using border trick */
.how-step-includes li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 7px;
  height: 5px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* ── SECTION BANNER PHOTOS — full-width cinematic proof strips ── */
/* Used on: How It Works (index.html) and Pricing (pricing.html)  */
#how-it-works-photo,
#pricing-photo {
  margin: 32px 0 0;
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--navy-12);
}
#how-it-works-photo img,
#pricing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transition: transform 0.45s ease;
}
#how-it-works-photo:hover img,
#pricing-photo:hover img { transform: scale(1.03); }
#how-it-works-photo figcaption,
#pricing-photo figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 36px 20px 14px;
  background: linear-gradient(transparent, rgba(10,22,40,0.65));
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  #how-it-works-photo,
  #pricing-photo { aspect-ratio: 16 / 9; }
}

/* ============================================================
   WHY CHEAPER
============================================================ */
/* #why-cheaper-list — see redesigned block in UPGRADES section below */

#comparison-callout {
  background: var(--bone-dk);
  color: var(--navy);
  border-radius: var(--radius-md);
  border: 1px solid var(--navy-12);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
}
#comparison-callout p {
  font-size: 1.0625rem;
  color: var(--navy-80);
  max-width: 560px;
  line-height: 1.7;
  margin: 0;
}
#comparison-callout p strong { color: var(--navy); }

/* ============================================================
   CTA SECTIONS (home, services, pricing, about)
============================================================ */
/* ── Rulebook: "Navy background with a single Bone card centered.
   The flat orange wall is the worst section on the site." ── */
#home-cta,
#services-cta,
#pricing-cta,
#about-cta {
  background: var(--navy) !important;
  text-align: center;
  padding: 80px 8%;
  position: relative;
}
/* Inner wrapper becomes the Bone card */
#home-cta > div,
#services-cta > div,
#pricing-cta > div,
#about-cta > div {
  background: var(--bone);
  border-radius: 20px;
  padding: 56px 48px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}
#home-cta h2,
#services-cta h2,
#pricing-cta h2,
#about-cta h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 12px;
}
#home-cta p,
#services-cta p,
#pricing-cta p,
#about-cta p {
  color: #1F2937;
  font-size: 1.0625rem;
  max-width: 440px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
/* Primary: Ember fill, Navy text, pill — rulebook spec */
#home-cta .btn-primary,
#services-cta .btn-primary,
#pricing-cta .btn-primary,
#about-cta .btn-primary {
  background: var(--orange);
  color: var(--navy);
  border-color: var(--orange);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(255,90,31,0.35);
  font-weight: 700;
}
#home-cta .btn-primary:hover,
#services-cta .btn-primary:hover,
#pricing-cta .btn-primary:hover,
#about-cta .btn-primary:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  box-shadow: 0 6px 24px rgba(255,90,31,0.45);
}
/* Secondary: text link — no box, no border, Navy underline */
#home-cta .btn-secondary,
#services-cta .btn-secondary,
#pricing-cta .btn-secondary,
#about-cta .btn-secondary {
  background: transparent;
  color: var(--navy);
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: rgba(10,22,40,0.35);
  text-underline-offset: 3px;
  padding: 0;
  font-weight: 600;
}
#home-cta .btn-secondary:hover,
#services-cta .btn-secondary:hover,
#pricing-cta .btn-secondary:hover,
#about-cta .btn-secondary:hover {
  background: transparent;
  border: none;
  text-decoration-color: var(--navy);
  box-shadow: none;
}
#home-cta a + a,
#services-cta a + a,
#pricing-cta a + a,
#about-cta a + a { margin-left: 24px; }

/* ============================================================
   SERVICES
============================================================ */

/* Always-included icon chip strip */
.includes-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 20px 0 0;
}
.includes-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bone);
  border: 1px solid var(--navy-06);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-80);
  white-space: nowrap;
}
.includes-strip li svg {
  color: var(--orange);
  flex-shrink: 0;
}

/* Tier card link */
.tier-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  margin-top: auto;
  padding: 8px 0 0;
  border-top: 1px solid var(--navy-06);
  transition: color var(--t);
}
.tier-link:hover { color: var(--orange-dk); }

#studio-moves,
#apartment-home-moves {
  text-align: center;
}
#studio-tiers,
#apartment-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

#studio-tiers li,
#apartment-tiers li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
#studio-tiers li:hover,
#apartment-tiers li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy-12);
}
#studio-tiers h3,
#apartment-tiers h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
#studio-tiers p,
#apartment-tiers p {
  font-size: 0.875rem;
  color: var(--navy-80);
  line-height: 1.65;
  flex: 1;
}
#studio-tiers a,
#apartment-tiers a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t);
}
#studio-tiers a:hover,
#apartment-tiers a:hover { color: var(--orange-dk); }

/* Add-ons section — both services.html and pricing.html */
#add-ons {
  text-align: center;
}
#add-ons > p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

#add-ons-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
}
#add-ons-list li {
  padding: 28px 24px;
  background: var(--bone);
  border-radius: var(--radius-md);
  border: 1px solid var(--navy-06);
}
#add-ons-list h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
#add-ons-list p {
  font-size: 0.875rem;
  color: var(--navy-80);
  line-height: 1.6;
}

#service-limits {
  background: var(--bone) !important;
  padding: 32px 36px !important;
  border-radius: var(--radius-md);
}
#service-limits h2 {
  font-size: 1rem !important;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}
#service-limits p {
  font-size: 0.875rem;
  color: var(--navy-80);
  line-height: 1.7;
}

/* ============================================================
   PRICING — COMPARISON TABLE
============================================================ */
#comparison-table {
  margin-top: 40px;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--navy-12);
}
#comparison-table th {
  background: var(--bone-dk);
  color: var(--navy-60);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 24px;
  text-align: left;
}
#comparison-table td {
  padding: 18px 24px;
  font-size: 1rem;
  color: var(--navy-80);
  border-top: 1px solid var(--navy-12);
}
#comparison-table tr:last-child td {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.125rem;
}
#comparison-table tr:last-child td:last-child { color: var(--orange); }

/* ============================================================
   PRICING — BOOKING OPTIONS
============================================================ */
/* Truck Options section — center header + intro */
#booking-options {
  text-align: center;
}
#booking-options > p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

#booking-options-list > li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
#booking-options-list > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--orange);
}
#booking-148 {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
#booking-148 h3,
#booking-148 li { color: var(--white); }
#booking-148 h3 { color: var(--white); }

#booking-options-list > li h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
#booking-options-list > li > ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#booking-options-list > li > ul li {
  font-size: 0.875rem;
  color: var(--navy-80);
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
#booking-148 > ul li { color: rgba(255,255,255,0.70); }
#booking-options-list > li > ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============================================================
   PRICING — RECOMMENDED PACKAGES
============================================================ */
.pricing-section__label,
#studio-packages > h3,
#apartment-packages > h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
  margin-top: 48px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

#studio-packages > ul,
#apartment-packages > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}
#apartment-packages > ul { grid-template-columns: repeat(3, 1fr); }

#studio-packages li,
#apartment-packages li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
#studio-packages li:hover,
#apartment-packages li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange);
}
#studio-packages h4,
#apartment-packages h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
#studio-packages p,
#apartment-packages p {
  font-size: 0.875rem;
  color: var(--navy-80);
  line-height: 1.65;
  flex: 1;
}

/* ============================================================
   PRICING — WHAT'S INCLUDED
============================================================ */
#whats-included > ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}
#whats-included li {
  font-size: 0.9375rem;
  color: var(--navy-80);
  padding: 16px 18px 16px 46px;
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  position: relative;
  line-height: 1.5;
}
#whats-included li::before {
  content: '✓';
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--orange);
}

/* ============================================================
   PRICING — ADD-ONS TABLE
============================================================ */
#add-ons-table {
  margin-top: 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--navy-12);
}
#add-ons-table th {
  background: var(--bone-dk);
  color: var(--navy-60);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 20px;
  text-align: left;
}
#add-ons-table td {
  padding: 15px 20px;
  font-size: 0.9375rem;
  color: var(--navy-80);
  border-top: 1px solid var(--navy-06);
  vertical-align: middle;
}
#add-ons-table tr:first-child td { border-top: none; }
#add-ons-table tr:hover td { background: var(--bone); }
#add-ons-table td:last-child {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
#add-ons-table tr:first-child td:last-child { color: var(--success); }

/* ============================================================
   PRICING — NO HIDDEN FEES
============================================================ */
#no-hidden-fees > ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
#no-hidden-fees li {
  font-size: 0.9375rem;
  color: var(--navy-80);
  padding: 14px 18px 14px 46px;
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  position: relative;
  line-height: 1.55;
  transition: border-color var(--t);
}
#no-hidden-fees li:hover { border-color: var(--orange); }
#no-hidden-fees li::before {
  content: '✓';
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--success);
}

/* ============================================================
   ABOUT PAGE
============================================================ */
#company-story h2 {
  text-align: center;
}
#company-story p {
  font-size: 1.0625rem;
  color: var(--navy-80);
  max-width: 640px;
  line-height: 1.8;
  margin-bottom: 16px;
}

#mission {
  background: var(--navy) !important;
  text-align: center;
}
#mission h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--white);
  max-width: 680px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.mission-statement {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  color: rgba(255,255,255,0.80);
  max-width: 640px;
  line-height: 1.75;
  padding-left: 20px;
  border-left: 3px solid var(--orange);
  margin: 0 auto;
  text-align: left;
}
#mission p.section-eyebrow { color: var(--gold); margin-bottom: 12px; }

#values-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
#values {
  text-align: center;
}
#values-list li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: transform var(--t), box-shadow var(--t);
}
#values-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* Smaller icon badge inside value cards */
#values-list .values-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 8px;
}
#values-list .values-icon .wmic-mark {
  width: 30px;
  height: 30px;
}
#values-list h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
}
#values-list p {
  font-size: 0.875rem;
  color: var(--navy-80);
  line-height: 1.65;
}

#who-we-are {
  text-align: center;
}
#who-we-are p {
  font-size: 1.0625rem;
  color: var(--navy-80);
  max-width: 640px;
  line-height: 1.8;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}
#team-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
#team-facts li {
  padding: 10px 18px;
  background: var(--bone);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  transition: border-color var(--t), color var(--t);
}
#team-facts li:hover { border-color: var(--orange); color: var(--orange); }

/* ============================================================
   CONTACT PAGE
============================================================ */
#direct-contact { background: var(--bone) !important; text-align: center; }
#contact-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
#contact-details li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
#contact-details h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-60);
  margin-bottom: 8px;
}
#contact-details p, #contact-details a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
}
#contact-details a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
#contact-details a:hover { color: var(--orange-dk); }

/* ── FORM ── */
/* Each field wrapper is a flex column so label sits above input */
#form-name, #form-phone, #form-email,
#form-service, #form-date, #form-time, #form-truck, #form-message {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* 2-column grid: #form-name/#form-phone and #form-date/#form-time sit side-by-side */
#booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
/* Full-width fields span both columns */
#form-email, #form-service,
#form-truck, #form-message, #form-legal,
#form-price-summary, #form-deposit-callout, #form-submit {
  grid-column: 1 / -1;
}

label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}
label abbr {
  text-decoration: none;
  color: var(--orange);
  margin-left: 2px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t), box-shadow var(--t);
}
input::placeholder, textarea::placeholder { color: var(--navy-40); }
input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-lt);
}
input.error, select.error, textarea.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}
textarea { resize: vertical; min-height: 140px; line-height: 1.65; }
select { cursor: pointer; }

#form-legal p {
  font-size: 0.8rem;
  color: var(--navy-40);
  line-height: 1.65;
}

#form-submit {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  min-height: 52px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--orange);
}

#form-success {
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: var(--radius-md);
  padding: 40px 32px;
  text-align: center;
}
#form-success h3 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--success);
  margin-bottom: 10px;
}
#form-success p {
  font-size: 0.9375rem;
  color: var(--navy-80);
  line-height: 1.65;
}

/* ── SERVICE AREA ── */
/* Contact page: center the intro paragraph (homepage uses #service-area-copy > p, not this) */
#service-area > p {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: var(--navy-60);
  font-size: 1.0625rem;
  line-height: 1.65;
}
#service-area-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
#service-area-list li {
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  transition: border-color var(--t), color var(--t), background var(--t);
  cursor: default;
}
#service-area-list li:first-child {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  font-weight: 600;
}
#service-area-list li:hover {
  border-color: var(--orange);
  color: var(--orange);
}
#service-area-note {
  margin-top: 20px;
  font-size: 0.9375rem;
  color: var(--navy-80);
}
#service-area-note a { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── MAP SECTION (contact page) ── */
#map-section {
  text-align: center;
}
#map-section #service-map-wrap {
  max-width: 480px;
  margin: 32px auto 0;
}
/* Legacy placeholder (hidden once SVG map is present) */
#map-placeholder {
  width: 100%;
  min-height: 320px;
  background: var(--bone);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-lg);
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-40);
  font-size: 0.875rem;
  font-weight: 500;
}
#map-placeholder::after {
  content: 'Map will load here';
}

/* ============================================================
   FOOTER
============================================================ */
/* Layout handled by #footer-inner grid (defined in the UPGRADES section below) */
#site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.45);
}

#footer-brand #footer-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}
#footer-brand #footer-location {
  font-size: 0.8125rem;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 14px;
}
#footer-brand p,
#footer-brand a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.50);
  line-height: 1.7;
}
#footer-brand a:hover { color: var(--white); }

#footer-nav h4,
#footer-service-area h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 16px;
}
#footer-nav ul { display: flex; flex-direction: column; gap: 10px; }
#footer-nav a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.50);
  transition: color var(--t);
  position: relative;
}
#footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1.5px;
  background: rgba(255,255,255,0.60);
  transition: width var(--t);
}
#footer-nav a:hover { color: var(--white); }
#footer-nav a:hover::after { width: 100%; }

#footer-service-area p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.40);
  line-height: 1.7;
}

#footer-legal {
  padding: 24px 24px 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
#footer-legal p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.22);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 6px;
}

/* ============================================================
   RESPONSIVE — Hero collapse (≤ 860px)
============================================================ */
@media (max-width: 860px) {
  #hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 32px 72px;
  }
  #hero-visual { order: -1; }
  #hero-copy {
    align-items: center;
    text-align: center;
    padding-left: 0;  /* reset desktop shift — centered on tablet */
  }
  #hero-copy h1 { text-align: center; }
  #hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency) {
    text-align: center;
    max-width: 100%;
  }
  #hero-eyebrow { text-align: center; }
  #hero-cta-group { justify-content: center; }
  #hero-trust { justify-content: center; }
}

/* ============================================================
   RESPONSIVE — Tablet (≤ 960px)
============================================================ */
@media (max-width: 960px) {
  :root { --nav-h: 64px; }

  #trust-list         { grid-template-columns: repeat(2, 1fr); }
  #how-steps          { grid-template-columns: repeat(3, 1fr); } /* keep 3 steps in a row on tablet */
  #why-cheaper-list   { grid-template-columns: 1fr; }
  #values-list        { grid-template-columns: repeat(2, 1fr); }
  #contact-details    { grid-template-columns: repeat(2, 1fr); }
  #studio-tiers,
  #apartment-tiers    { grid-template-columns: repeat(2, 1fr); }
  #booking-options-list { grid-template-columns: 1fr; max-width: 480px; }
  #studio-packages > ul,
  #apartment-packages > ul { grid-template-columns: repeat(2, 1fr); }
  #whats-included > ul { grid-template-columns: 1fr; }
  #add-ons-list        { grid-template-columns: repeat(2, 1fr); }
  #move-examples-list  { grid-template-columns: repeat(2, 1fr); }
  #footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 640px)
============================================================ */
@media (max-width: 640px) {
  :root { --nav-h: 60px; }

  main > section { padding: 64px 8%; }

  /* Nav */
  #nav-links       { display: none; }
  #nav-cta         { display: none; }
  #nav-hamburger   { display: flex; }

  /* Mobile nav: toggled by JS (.is-open class) */
  #nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--navy-12);
    padding: 12px 16px 20px;
    box-shadow: var(--shadow-lg);
    z-index: 400;
  }
  #nav-links.is-open a { padding: 14px 16px; font-size: 1rem; }

  /* Hero — stack on mobile */
  #hero { min-height: auto; }
  #hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 64px 32px 72px;
  }
  #hero-visual {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    order: -1;   /* truck always on top on mobile */
  }
  #hero-copy {
    align-items: center;
    text-align: center;
  }
  #hero-eyebrow { text-align: center; }
  #hero-copy h1 { font-size: 1.875rem; text-align: center; }
  #hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency) {
    text-align: center;
    max-width: 100%;
  }
  #hero-cta-group {
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  #hero-cta-group a { width: 100%; justify-content: center; }
  #hero-trust { justify-content: center; }

  /* Page hero */
  #page-hero { padding: 48px 8% 56px; }

  /* Grids */
  #trust-list,
  #how-steps,
  #values-list,
  #contact-details,
  #studio-tiers,
  #apartment-tiers,
  #booking-options-list,
  #add-ons-list,
  #move-examples-list { grid-template-columns: 1fr; }
  /* Hide step connectors on mobile */
  #how-steps li:not(:last-child)::after { display: none; }
  /* Includes-strip wraps tighter on small screens */
  .includes-strip li { font-size: 0.75rem; padding: 5px 10px; }

  #studio-packages > ul,
  #apartment-packages > ul { grid-template-columns: 1fr; }

  #why-cheaper-list { grid-template-columns: 1fr; }

  #comparison-callout {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }

  /* Booking form: single column */
  #booking-form { grid-template-columns: 1fr; }
  #form-email, #form-service, #form-date, #form-time,
  #form-truck, #form-message, #form-legal, #form-submit,
  #form-price-summary, #form-deposit-callout {
    grid-column: 1;
  }

  /* Footer */
  #footer-nav, #footer-service-area { padding-top: 8px; padding-bottom: 8px; }

  /* CTA sections: reduce padding on mobile (ID specificity requires explicit override) */
  #home-cta,
  #services-cta,
  #pricing-cta,
  #about-cta { padding: 56px 8%; }

  /* CTA buttons */
  #home-cta a, #services-cta a, #pricing-cta a, #about-cta a {
    display: block;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 12px;
    width: 100%;
  }

  /* Tables: allow horizontal scroll */
  #comparison-table,
  #add-ons-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* New elements mobile */
  #mid-cta .btn-primary,
  #mid-cta .btn-secondary { display: block; width: 100%; margin-left: 0 !important; margin-top: 12px; }
  #footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px 32px; }
  #about-photos { grid-template-columns: 1fr; }
  .faq-question { padding: 18px 16px; font-size: 0.9375rem; }
  .faq-answer   { padding: 0 16px 18px; }
}

/* ============================================================
   UPGRADES — Nav, Hero, CTA, Footer, FAQ, About
   (Priorities 3–8 from audit)
============================================================ */

/* ── SKIP LINK (accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ── NAV PHONE NUMBER ── */
#nav-phone {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
#nav-phone:hover { color: var(--orange); background: var(--navy-06); }
@media (max-width: 960px) { #nav-phone { display: none; } }

/* ── NAV SCROLL SHADOW ── */
#main-nav.scrolled { box-shadow: var(--shadow-sm); }

/* ── HAMBURGER ANIMATION ── */
#nav-hamburger span {
  transition: transform 200ms ease, opacity 200ms ease;
  transform-origin: center;
}
#nav-hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#nav-hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── HERO ENHANCEMENTS (dark background overrides) ── */
#hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Secondary CTA: navy outlined on light bone bg */
#hero-cta-group .btn-secondary {
  border-color: var(--navy-40);
  color: var(--navy);
}
#hero-cta-group .btn-secondary:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-06);
}

/* Phone number on bone — see hero-phone-number block in UPGRADES section */

#hero-deposit-note {
  font-size: 0.875rem;
  color: var(--navy-60);
  line-height: 1.55;
  margin-top: -8px;
}

#hero-urgency {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange);
  margin-top: -4px;
}

#hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 4px;
}
#hero-trust li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy-80);
  padding: 5px 12px 5px 10px;
  background: rgba(10,22,40,0.05);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
}
#hero-trust li svg {
  flex-shrink: 0;
  color: var(--orange);
}

/* On dark card, use a lighter badge so it pops */
#booking-148 .card-badge {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.30);
}

/* ── MID-PAGE CTA — flat navy band (replaced dated orange gradient) ── */
#mid-cta {
  background: var(--navy) !important;
  text-align: center;
  padding: 52px 8% !important;
}
#mid-cta p {
  color: rgba(255,255,255,0.88);
  font-size: 1.0625rem;
  max-width: 440px;
  margin: 0 auto 28px;
  line-height: 1.75;
}
#mid-cta p strong { color: var(--white); }
#mid-cta .btn-secondary {
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
  margin-left: 12px;
}
#mid-cta .btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
}

/* ── FOOTER 3-COLUMN GRID ── */
#footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 48px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  width: 100%;
}
/* Reset individual padding when inside the grid */
#footer-inner > #footer-brand,
#footer-inner > #footer-nav,
#footer-inner > #footer-service-area {
  padding: 0;
  max-width: none;
  margin: 0;
  width: auto;
}
@media (max-width: 960px) {
  #footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 24px 40px; }
}

/* ── FAQ ACCORDION ── */
#faq-list {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item { border-top: 1px solid var(--navy-12); }
.faq-item:first-child { border-top: none; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  background: var(--white);
  border: none;
  cursor: pointer;
  transition: background var(--t), color var(--t);
  min-height: 60px;
}
.faq-question:hover    { background: var(--bone); }
.faq-question.open     { color: var(--orange); background: var(--bone); }
.faq-chevron {
  flex-shrink: 0;
  width: 20px; height: 20px;
  transition: transform 220ms ease;
}
.faq-question.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  display: none;
  padding: 0 24px 22px;
  font-size: 0.9375rem;
  color: var(--navy-80);
  line-height: 1.8;
  background: var(--bone);
}
.faq-answer a { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-item.open .faq-answer { display: block; }

/* ── ABOUT PAGE PHOTO PLACEHOLDERS ── */
#about-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.photo-placeholder {
  background: var(--bone);
  border: 2px dashed var(--navy-12);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--navy-40);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  padding: 16px;
  transition: border-color var(--t);
}
.photo-placeholder::before {
  content: '📷';
  font-size: 1.75rem;
  display: block;
}
@media (max-width: 640px) { #about-photos { grid-template-columns: 1fr; } }

/* ── LANGUAGE TOGGLE ── */
#lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--navy-12, rgba(10,22,40,0.10));
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
  /* Visual separator from the phone number */
  border-left: 1px solid var(--navy-12);
  padding-left: 16px;
  margin-left: 4px;
}
#lang-toggle button {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: 0.05em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--navy-60, rgba(10,22,40,0.55));
  transition: background var(--t), color var(--t);
  line-height: 1;
  min-height: 28px;
}
#lang-toggle button.active,
#lang-toggle button[aria-pressed="true"] {
  background: var(--white, #fff);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(10,22,40,0.12);
}
#lang-toggle button:hover:not(.active) {
  color: var(--navy);
}

/* ── LANG BANNER ── */
#lang-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--orange);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}
#lang-banner[hidden] { display: none; }
#lang-banner p {
  margin: 0;
  color: #fff;
}
#lang-banner a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#lang-banner-close {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t);
}
#lang-banner-close:hover { background: rgba(255,255,255,0.40); }

/* Shift nav down when banner is visible */
body.lang-banner-visible #main-nav {
  top: 46px;
}
@media (max-width: 640px) {
  body.lang-banner-visible #main-nav {
    top: 56px;
  }
  #lang-banner {
    font-size: 0.8125rem;
    padding: 10px 16px;
  }
}

/* Nav layout: keep toggle visible alongside other nav items */
@media (max-width: 960px) {
  #lang-toggle {
    order: 2;
  }
}

/* ============================================================
   TRUST PHOTOS — real-job evidence strip below trust grid
============================================================ */
#trust-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
#trust-photos figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--navy-12);
}
#trust-photos figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.45s ease;
}
#trust-photos figure:hover img { transform: scale(1.04); }
#trust-photos figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 14px 10px;
  background: linear-gradient(transparent, rgba(10,22,40,0.62));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  #trust-photos { grid-template-columns: 1fr; }
}

/* Microcopy note under trust photos */
.trust-photo-note {
  margin-top: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-60);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}

/* ── MOVE EXAMPLES — note + mobile fallback (section styles are in the pricing block below) ── */
.move-example-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.move-examples-note {
  font-size: 0.875rem;
  color: var(--navy-60);
}
.move-examples-note a { color: var(--orange); font-weight: 600; text-underline-offset: 3px; }

/* ── STORY BULLETS — about page short list ── */
.story-bullets {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
}
.story-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--navy-80);
  line-height: 1.65;
}
.story-bullets li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: var(--orange);
  border-radius: 50%;
  margin-top: 7px;
}

/* ── SERVICE AREA TOWN GRID — duplicate removed; canonical block below ── */

/* ============================================================
   TESTIMONIALS — see "UPGRADED LAYOUT" block below for full styles
============================================================ */

/* ============================================================
   STICKY MOBILE CTA BAR
============================================================ */
#mobile-cta-bar { display: none; }

@media (max-width: 640px) {
  /* Lift body content so the bar never covers it */
  body { padding-bottom: 76px; }

  #mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 600;
    background: var(--white);
    border-top: 1px solid var(--navy-12);
    box-shadow: 0 -4px 24px rgba(10,22,40,0.12);
    padding: 10px 16px;
    /* Respect iOS home indicator / notch */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 10px;
    align-items: center;
  }

  #mobile-cta-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t), border-color var(--t), transform 120ms ease;
  }

  .mobile-cta-call {
    flex: 1;
    background: var(--white);
    color: var(--navy);
    border: 2px solid var(--navy-12);
  }
  .mobile-cta-call:hover,
  .mobile-cta-call:active {
    background: var(--navy-06);
    border-color: var(--navy-40);
  }

  .mobile-cta-book {
    flex: 1.5;
    background: var(--orange);
    color: var(--white) !important;
    border: 2px solid var(--orange);
    box-shadow: var(--shadow-orange);
  }
  .mobile-cta-book:hover,
  .mobile-cta-book:active {
    background: var(--orange-dk);
    border-color: var(--orange-dk);
    transform: translateY(-1px);
  }
}

/* ============================================================
   BEFORE / AFTER SECTION
============================================================ */
#before-after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.ba-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.ba-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bone);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Placeholder state — shown until a real photo is dropped in */
.ba-img-wrap::before {
  content: '📷';
  font-size: 2.5rem;
  opacity: 0.22;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}
.ba-img-wrap::after {
  content: 'Add photo here';
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--navy-40);
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  text-align: center;
}
/* When a real <img> is present, hide the placeholder overlays */
.ba-img-wrap:has(img)::before,
.ba-img-wrap:has(img)::after { display: none; }
.ba-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Before / After pill label */
.ba-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--navy);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.ba-label--after { background: var(--orange); }
.ba-card figcaption {
  font-size: 0.875rem;
  color: var(--navy-40);
  text-align: center;
  font-style: italic;
  line-height: 1.55;
}
/* Photo placeholder (about page) — image-ready version */
.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;                    /* no radius on img — parent clips it */
  transition: transform 0.45s ease;
}
.photo-placeholder:has(img) {
  border: 1px solid var(--navy-12);  /* solid border replaces dashed */
  padding: 0;                        /* remove inner padding — photo fills edge-to-edge */
  overflow: hidden;                  /* rounded corners clip the photo */
  position: relative;                /* anchor for absolute figcaption */
}
.photo-placeholder:has(img)::before { display: none; }
.photo-placeholder:has(img):hover img { transform: scale(1.04); }

/* Default figcaption (placeholder state — no image) */
.photo-placeholder figcaption {
  font-size: 0.75rem;
  color: var(--navy-40);
  text-align: center;
  padding-top: 8px;
}
/* Figcaption overlay when real photo is present */
.photo-placeholder:has(img) figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 14px 10px;
  background: linear-gradient(transparent, rgba(10,22,40,0.62));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
}

@media (max-width: 640px) {
  #before-after-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── SCROLL FADE-UP ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Respect user's motion preference — show immediately, no animation */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ── MOBILE-ONLY NAV ITEMS ── */
/* Hidden on desktop — only visible inside the open mobile menu */
.nav-mobile-only { display: none; }

@media (max-width: 640px) {
  /* These live inside #nav-links so they show when .is-open */
  .nav-mobile-only {
    display: block;
  }
  /* Divider above phone/CTA group */
  .nav-mobile-divider {
    height: 1px;
    background: var(--navy-12);
    margin: 8px 0;
  }
  .nav-mobile-only a {
    display: block;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--navy-80);
    border-radius: var(--radius-sm);
  }
  .nav-mobile-only a:hover { color: var(--navy); background: var(--navy-06); }
  /* Phone link — slightly subdued */
  .nav-mobile-phone a {
    font-weight: 600;
    color: var(--navy);
  }
  /* CTA — full-width orange button */
  .nav-mobile-cta-item {
    padding: 4px 16px 8px;
  }
  .nav-mobile-cta-item a {
    display: flex !important;
    width: 100%;
    justify-content: center;
    padding: 13px 28px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--orange);
    color: var(--white) !important;
    border: 2px solid var(--orange);
    box-shadow: var(--shadow-orange);
  }
  .nav-mobile-cta-item a:hover {
    background: var(--orange-dk) !important;
    border-color: var(--orange-dk) !important;
    color: var(--white) !important;
  }
}

/* ============================================================
   SEE HOW IT WORKS — animation section
============================================================ */

#see-how-it-works {
  background: var(--bone);       /* explicit — don't rely on nth-child */
  padding: 72px 8%;              /* tighter than the 88px default — animation is the focus */
  text-align: center;
}

/* Override the global max-width to keep animation contained at 900px */
.anim-section-inner {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow label */
.anim-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

/* Section heading — match global h2 style exactly */
#see-how-it-works h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 12px;
  max-width: none; /* override the 640px cap on section > p */
}

/* Subheadline below h2 */
.anim-subhead {
  font-size: 1.0625rem;
  color: var(--navy-60);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── TRUCK ANIMATION WRAPPER ── */
.anim-frame-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 36px;                 /* centered, space before text */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(10,22,40,0.13),
              0  4px 16px rgba(10,22,40,0.07);
}

/* Lottie player fills the wrapper */
.anim-frame-wrap lottie-player {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;                /* matches truck-entrance.json 400×300 canvas */
  min-height: 240px;
}

/* Iframe fills wrapper absolutely */
.anim-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Static fallback (prefers-reduced-motion) — hidden by default */
.anim-static-fallback {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.anim-static-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── CAPTION ── */
.anim-caption {
  margin-top: 16px;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--navy-60);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
}

/* ── REDUCED-MOTION: walk-cycle keyframes are suppressed via SVG embedded CSS ── */

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  #see-how-it-works {
    padding: 56px 8%;
  }
  .anim-subhead {
    font-size: 1rem;
    margin-bottom: 28px;
  }
  .anim-frame-wrap {
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(10,22,40,0.12),
                0 2px  8px rgba(10,22,40,0.06);
  }
  .anim-caption {
    font-size: 0.8125rem;
    margin-top: 12px;
  }
}

/* ============================================================
   SHARED SECTION UTILITIES
============================================================ */
.section-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  text-align: center;
}
.section-subhead {
  font-size: 1.0625rem;
  color: var(--navy-60);
  line-height: 1.65;
  margin-top: 8px;
  margin-bottom: 36px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ============================================================
   WHY WE'RE CHEAPER — REDESIGNED
   Price gap first (shock), numbered reasons second
============================================================ */
#why-cheaper {
  background: var(--bone);
  color: var(--navy);
  padding: 96px 8%;
  text-align: center;
}
#why-cheaper .section-eyebrow { color: var(--gold); }
#why-cheaper h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 40px;
}

/* Price gap callout — shared between homepage and pricing page */
#price-gap-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0 auto 16px;
  max-width: 560px;
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-lg);
}
.price-gap-col {
  text-align: center;
  flex: 1;
}
.price-gap-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.price-gap-amount {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-gap-amount--high { color: var(--navy-40); text-decoration: line-through; }
.price-gap-amount--low  {
  color: var(--orange);
  font-size: clamp(3rem, 6vw, 4.5rem);
  text-shadow: 0 0 40px rgba(201, 169, 97, 0.30);
}
.price-gap-divider {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-40);
  flex-shrink: 0;
}
.price-gap-savings {
  font-size: 1rem;
  color: var(--navy-80);
  line-height: 1.7;
  margin-bottom: 52px;
}
.price-gap-savings strong { color: var(--navy); }

/* Numbered reasons list */
#why-cheaper-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto 48px;
  text-align: left;
}
#why-cheaper-list li {
  background: var(--white);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.why-step-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--orange);
  opacity: 0.85;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}
#why-cheaper-list h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.4;
}
#why-cheaper-list p {
  font-size: 0.9375rem;
  color: var(--navy-80);
  line-height: 1.65;
}
#why-cheaper .btn-primary {
  background: var(--orange);
  color: var(--white);
}
@media (max-width: 900px) {
  #why-cheaper-list { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 767px) {
  #why-cheaper { padding: 64px 8% !important; }
  #price-gap-callout { flex-direction: column; gap: 12px; padding: 20px; }
  .price-gap-divider { display: none; }
}

/* ── PRICING PAGE: wow-comparison section — bone background ── */
#wow-comparison {
  background: var(--bone);
  color: var(--navy);
  padding: 96px 8%;
  text-align: center;
}
#wow-comparison h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 40px;
}
#wow-comparison #price-gap-callout {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
#wow-comparison #why-cheaper-list {
  text-align: left;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  #wow-comparison { padding: 64px 8%; }
}

/* ============================================================
   TESTIMONIALS — UPGRADED LAYOUT (6-card, 3×2 grid)
============================================================ */
#testimonials {
  padding: 88px 8%;
  background: var(--bone);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#testimonials h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
#testimonials-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 40px auto 0;
  list-style: none;
  text-align: left;
}
#testimonials-list li {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(10,22,40,0.07), 0 1px 3px rgba(10,22,40,0.05);
  border: 1px solid var(--navy-06);
  transition: transform var(--t), box-shadow var(--t);
}
#testimonials-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.11), 0 2px 6px rgba(10,22,40,0.07);
}
.stars { display: flex; gap: 3px; color: var(--gold); flex-shrink: 0; }
#testimonials-list blockquote { flex: 1; }
#testimonials-list blockquote p {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--navy-80);
  font-style: italic;
}
#testimonials-list cite {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-style: normal;
  border-top: 1px solid var(--navy-06);
  padding-top: 14px;
  margin-top: auto;
}
#testimonials-list cite strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
}
#testimonials-list cite span {
  font-size: 0.75rem;
  color: var(--navy-60);
  font-weight: 400;
}
.testimonials-note { display: none; }

/* Content stays above background animation */
#testimonials .section-eyebrow,
#testimonials h2,
#testimonials .section-subhead,
#testimonials-list { position: relative; z-index: 1; }

/* ── Testimonial badge base ── */
.t-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  width: fit-content;
  margin-top: 8px;
}
/* Same-Day Move / emergency rescue — ember orange tint */
.badge-rescue,
.badge-fast {
  background: rgba(255,90,31,0.10);
  color: var(--orange-dk, #E04A10);
  border: 1px solid rgba(255,90,31,0.30);
}
/* Fragile-Safe Crew — antique gold (premium use) */
.badge-fragile {
  background: rgba(201,169,97,0.14);
  color: #8B7332;
  border: 1px solid rgba(201,169,97,0.45);
}
/* Fast & Friendly — warm bone */
.badge-friendly {
  background: var(--bone);
  color: var(--navy);
  border: 1px solid var(--navy-12);
}
/* Heavy Furniture Pros — navy chip */
.badge-heavy {
  background: rgba(10,22,40,0.08);
  color: var(--navy);
  border: 1px solid rgba(10,22,40,0.18);
}
/* Verified Customer — subtle green */
.badge-verified {
  background: rgba(34,139,34,0.08);
  color: #1a6b1a;
  border: 1px solid rgba(34,139,34,0.25);
}
.badge-verified::before { content: "✓ "; font-weight: 900; }
/* Repeat Customer — antique gold */
.badge-repeat {
  background: rgba(201,169,97,0.18);
  color: #8B7332;
  border: 1px solid rgba(201,169,97,0.50);
}
/* Local Resident — bone w/ navy */
.badge-local {
  background: var(--bone);
  color: var(--navy);
  border: 1px solid var(--navy-12);
}
/* Stress-Free Move — soft lavender */
.badge-stress {
  background: rgba(108,92,231,0.08);
  color: #5B4FC7;
  border: 1px solid rgba(108,92,231,0.22);
}

/* Legacy badge compat (keep until all pages migrated) */
.savings-badge,
.badge-samedaymove,
.badge-walkup {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  width: fit-content;
  background: var(--bone);
  color: var(--navy);
  border: 1px solid var(--navy-12);
}

@media (max-width: 960px) {
  #testimonials-list { grid-template-columns: repeat(2, 1fr); max-width: 740px; }
}
@media (max-width: 640px) {
  #testimonials-list { grid-template-columns: 1fr; max-width: 480px; }
  #testimonials { padding: 64px 8%; }
}

/* ── TESTIMONIALS — FLOATING BOX BACKGROUND ANIMATION ──
   Pure CSS. Rectangular outlines that reference the moving-box visual language.
   Bone background, navy + ember orange outlines at very low opacity.
   Two layers via ::before (SVG scatter) and ::after (solo drifting box).
   All animations respect prefers-reduced-motion.
─────────────────────────────────────────────────────────── */

/* Layer 1: scattered box outlines — navy + orange, increased visibility */
#testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560'%3E%3Crect x='32' y='22' width='92' height='66' rx='4' fill='none' stroke='%230A1628' stroke-width='1.5' stroke-opacity='0.11'/%3E%3Cline x1='78' y1='22' x2='78' y2='88' stroke='%230A1628' stroke-width='1' stroke-opacity='0.08'/%3E%3Cline x1='32' y1='55' x2='124' y2='55' stroke='%230A1628' stroke-width='1' stroke-opacity='0.08'/%3E%3Crect x='1050' y='58' width='106' height='76' rx='4' fill='none' stroke='%23FF5A1F' stroke-width='1.5' stroke-opacity='0.15'/%3E%3Cline x1='1103' y1='58' x2='1103' y2='134' stroke='%23FF5A1F' stroke-width='1' stroke-opacity='0.10'/%3E%3Crect x='1092' y='418' width='78' height='56' rx='4' fill='none' stroke='%230A1628' stroke-width='1.5' stroke-opacity='0.09'/%3E%3Crect x='12' y='442' width='72' height='52' rx='4' fill='none' stroke='%23FF5A1F' stroke-width='1.5' stroke-opacity='0.11'/%3E%3Cline x1='48' y1='442' x2='48' y2='494' stroke='%23FF5A1F' stroke-width='1' stroke-opacity='0.08'/%3E%3Crect x='548' y='10' width='76' height='54' rx='4' fill='none' stroke='%230A1628' stroke-width='1.5' stroke-opacity='0.08'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  animation: boxes-slow-drift 18s ease-in-out infinite alternate;
}

/* Layer 2: solo drifting box on the right edge — larger, more visible */
#testimonials::after {
  content: '';
  position: absolute;
  top: 36%;
  right: -20px;
  width: 102px;
  height: 74px;
  background: transparent;
  border: 2px solid rgba(255, 90, 31, 0.18);
  border-radius: 4px;
  box-shadow:
    inset 0 -24px 0 -23px rgba(255, 90, 31, 0.12),
    inset -32px 0 0 -31px rgba(255, 90, 31, 0.12);
  filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.10));
  pointer-events: none;
  z-index: 0;
  animation: box-edge-drift 14s ease-in-out infinite;
}

@keyframes boxes-slow-drift {
  0%   { transform: translate(0px,   0px); }
  30%  { transform: translate(16px, -12px); }
  65%  { transform: translate(-10px,  15px); }
  100% { transform: translate(12px,  -8px); }
}

@keyframes box-edge-drift {
  0%,100% { transform: translateY(0px)   translateX(0px)   rotate(0deg);    opacity: 1; }
  25%     { transform: translateY(-18px) translateX(-10px) rotate(2deg); }
  50%     { transform: translateY(-8px)  translateX(-5px)  rotate(-1.5deg); }
  75%     { transform: translateY(-22px) translateX(-12px) rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  #testimonials::before,
  #testimonials::after { animation: none !important; transform: none !important; }
}

/* ============================================================
   SERVICE AREA — MAP + PILLS LAYOUT
============================================================ */
#service-area {
  padding: 88px 8%;
  background: var(--white);
}
#service-area-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
}
#service-area-copy h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 12px;
  text-align: left; /* 2-column layout — keep left */
}
#service-area-copy .section-eyebrow { text-align: left; }
#service-area-copy > p {
  font-size: 1.0625rem;
  color: var(--navy-60);
  line-height: 1.65;
  margin-bottom: 28px;
}
#town-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-bottom: 20px;
}
#town-list li {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-80);
  background: var(--bone);
  border: 1px solid var(--bone-dk);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  white-space: nowrap;
}
#town-list li.town-home {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.town-callout {
  font-size: 0.9375rem;
  color: var(--navy-60);
  margin-bottom: 14px;
}
.town-callout a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── TEXT CTA BUTTON (service area + coverage sections) ── */
.btn-text-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background var(--t), transform var(--t);
  white-space: nowrap;
}
.btn-text-cta:hover,
.btn-text-cta:focus {
  background: var(--orange);
  transform: translateY(-1px);
  outline: none;
}
.btn-text-cta svg {
  flex-shrink: 0;
}

/* SVG map container */
#service-map-wrap {
  background: var(--bone);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--bone-dk);
}
#service-map {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  #service-area-inner {
    grid-template-columns: 1fr;
  }
  #service-map-wrap {
    max-width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  #service-area { padding: 64px 8%; }
}

/* ============================================================
   MOVE COST CALCULATOR
============================================================ */
#cost-calculator {
  background: var(--bone);
  padding: 88px 8%;
  text-align: center;
}
#calc-inner {
  max-width: 760px;
  margin: 0 auto;
}
#cost-calculator h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
.calc-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-60);
  margin-bottom: 12px;
  text-align: left;
}
#calc-size-group {
  border: none;
  padding: 0;
  margin-bottom: 28px;
}
#calc-size-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.calc-size-btn {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
  white-space: nowrap;
}
.calc-size-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.calc-size-btn.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.calc-size-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

#calc-addons-group {
  padding: 20px 24px;
  margin-bottom: 28px;
  text-align: left;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--navy-06);
}
.calc-addon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--navy-06);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--navy-80);
}
.calc-addon-row:last-child { border-bottom: none; }
.calc-addon-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
}

#calc-result {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  color: var(--white);
  margin-top: 8px;
}
.calc-result-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.60;
  margin-bottom: 8px;
}
.calc-result-price {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--orange);
  margin-bottom: 16px;
}
#calc-result-note {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
#calc-disclaimer {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.40);
  margin-bottom: 24px;
}
#calc-result .btn-primary {
  background: var(--orange);
  color: var(--white);
  margin-bottom: 12px;
}
#calc-result .btn-secondary {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}
#calc-result .btn-secondary:hover {
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
}
@media (max-width: 767px) {
  #cost-calculator { padding: 64px 8%; }
  #calc-result { padding: 24px 20px; }
  #calc-size-buttons { gap: 6px; }
  .calc-size-btn { font-size: 0.875rem; padding: 9px 16px; }
}

/* ============================================================
   PRICING PAGE — PRICE CARDS + BOOKING FEE
============================================================ */
#price-table-section {
  padding: 72px 8%;
  background: var(--white);
  text-align: center;
}
#price-table-section h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 10px;
}
#price-table-section > p {
  font-size: 1rem;
  color: var(--navy-60);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
#price-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto 24px;
}
.price-card {
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--t), border-color var(--t);
}
.price-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--orange);
}
.price-card-size {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.price-card-amount {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1.1;
}
.price-card-desc {
  font-size: 0.8125rem;
  color: var(--navy-60);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 8px;
}
.price-card .btn-primary {
  font-size: 0.8125rem;
  padding: 10px 16px;
  text-align: center;
}
.price-table-note {
  font-size: 0.875rem;
  color: var(--navy-60);
  max-width: 560px;
  margin: 0 auto;
  font-style: italic;
}

/* Booking fee callout — styled aside */
#booking-fee-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 0;
  background: rgba(255, 90, 31, 0.06);
  border: 1.5px solid rgba(255, 90, 31, 0.25);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
#booking-fee-icon { flex-shrink: 0; margin-top: 2px; }
#booking-fee-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
#booking-fee-text p {
  font-size: 0.9rem;
  color: var(--navy-60);
  line-height: 1.65;
}
#booking-fee-text p strong {
  display: inline;
  font-weight: 700;
  color: var(--navy);
}

/* Pricing trust chips */
/* Real move examples */
#move-examples {
  padding: 72px 8%;
  background: var(--bone);
  text-align: center;
}
#move-examples h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 10px;
}
#move-examples > p { color: var(--navy-60); margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; }
#move-examples-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto 24px;
  list-style: none;
}
#move-examples-list li {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--navy-06);
}
.move-example-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  display: block;
  margin-bottom: 8px;
}
#move-examples-list h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}
#move-examples-list p { font-size: 0.9375rem; color: var(--navy-60); line-height: 1.65; }

/* ── PRICE CARD ENHANCEMENTS ── */

/* Move-day payment breakdown line */
.price-card-breakdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-60);
  background: var(--bone);
  border-radius: 6px;
  padding: 7px 12px;
  margin: 12px 0 4px;
  border: 1px solid var(--bone-dk);
  flex-wrap: wrap;
}
.price-card-breakdown span:first-child { color: var(--orange); }
.price-card-breakdown span:last-child { color: var(--navy); }

/* Most Popular badge */
.price-card--popular {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange), 0 8px 32px rgba(255,90,31,0.14);
  position: relative;
}
.popular-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

/* 5BR "most demanding" label */
.price-card-demanding-note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.04em;
  margin: 4px 0 8px;
}

/* Booking fee list inside callout */
#booking-fee-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0 10px;
  padding: 0;
}
#booking-fee-list li {
  font-size: 0.9rem;
  color: var(--navy-60);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
#booking-fee-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.booking-fee-nonref {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 10px;
}

/* ── U-HAUL RULES CALLOUT (expanded) ── */
#uhaul-rules {
  background: #FFF8F0;
  border: 1.5px solid #FF5A1F;
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin: 0 auto 32px;
  max-width: 720px;
}
.uhaul-rules-lead {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.6;
  margin: 0 0 16px;
}
#uhaul-scenarios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.uhaul-scenario {
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(255,90,31,0.15);
}
.uhaul-scenario-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 4px;
}
.uhaul-scenario p {
  font-size: 0.9rem;
  color: var(--navy-60);
  line-height: 1.6;
  margin: 0;
}

/* ── WHY CHOOSE US vs BIG COMPANIES ── */
#why-choose-us {
  background: var(--bone);
  color: var(--navy);
  padding: 80px 8%;
  text-align: center;
}
#why-choose-us h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.why-choose-intro {
  font-size: 1.125rem;
  color: var(--navy-60);
  margin-bottom: 44px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
#compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto 36px;
  text-align: left;
}
.compare-col {
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.compare-col h3 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.compare-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compare-col ul li {
  font-size: 0.9375rem;
  line-height: 1.4;
  padding-left: 22px;
  position: relative;
}
.compare-col--them {
  background: var(--bone-dk);
  border: 1px solid var(--navy-12);
}
.compare-col--them h3 { color: var(--navy-40); }
.compare-col--them ul li { color: var(--navy-60); }
.compare-col--them ul li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #FF6B6B;
  font-weight: 700;
}
.compare-col--us {
  background: rgba(255,90,31,0.08);
  border: 1.5px solid var(--orange);
}
.compare-col--us h3 { color: var(--orange); }
.compare-col--us ul li { color: var(--navy); }
.compare-col--us ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.why-choose-close {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy-80);
  margin-top: 8px;
}

/* ── FAQ SCENARIOS (U-Haul edge cases) ── */
.faq-scenarios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.faq-scenario {
  background: var(--bone);
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid var(--bone-dk);
}
.faq-scenario strong {
  display: block;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 4px;
}
.faq-scenario p {
  font-size: 0.9rem;
  color: var(--navy-60);
  line-height: 1.6;
  margin: 0;
}

/* ── CONTACT DETAILS — ICONS ── */
#contact-details li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--navy);
  margin: 0 auto 14px;
  flex-shrink: 0;
}

/* ── U-HAUL NOTE IN FORM ── */
.uhaul-form-note {
  margin-top: 10px;
  font-size: 0.825rem;
  color: var(--navy-60);
  line-height: 1.55;
  background: #FFF8F0;
  border: 1px solid rgba(255, 90, 31, 0.25);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 10px 14px;
}

/* ── CONTACT FORM — center header, left-align form fields ── */
#contact-form > h2 {
  text-align: center;
  color: var(--orange);   /* "Book Your Move Online" in brand orange */
}
#contact-form > p {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
/* ── $49 DEPOSIT CALLOUT IN FORM ── */
#form-deposit-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 90, 31, 0.05);
  border: 1.5px solid rgba(255, 90, 31, 0.22);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.form-deposit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 0;
  color: var(--navy);
  flex-shrink: 0;
  margin-top: 2px;
}
.form-deposit-text strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-deposit-text p {
  font-size: 0.875rem;
  color: var(--navy-60);
  line-height: 1.6;
  margin: 0;
}
.form-deposit-text p strong {
  display: inline;
  font-weight: 700;
  color: var(--navy);
}

/* ── FORM SUCCESS STATE ── */
#form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--bone);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  text-align: center;
  margin-top: 16px;
}
.form-success-icon {
  color: var(--navy);
}
#form-success h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
#form-success p {
  font-size: 0.9375rem;
  color: var(--navy-80);
  margin: 0;
  line-height: 1.6;
}
#form-success a {
  color: var(--orange);
  font-weight: 600;
}

/* ── FORM ERROR STATE ── */
#form-error {
  background: rgba(255,90,31,0.06);
  border: 1.5px solid rgba(255,90,31,0.28);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 12px;
}
#form-error p {
  font-size: 0.9rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.5;
}
#form-error a {
  color: var(--orange);
  font-weight: 600;
}

/* ── CONTACT FORM PRICE SUMMARY ── */
#form-price-summary {
  background: var(--bone);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
}
#form-price-summary p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  #price-cards { grid-template-columns: repeat(2, 1fr); }
  #compare-grid { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 767px) {
  #price-table-section { padding: 56px 8%; }
  #price-cards { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  #booking-fee-callout { flex-direction: column; gap: 10px; padding: 20px; }
  #move-examples-list { grid-template-columns: 1fr; }
  #move-examples { padding: 56px 8%; }
  #why-choose-us { padding: 60px 8%; }
  #uhaul-rules { padding: 18px 20px; }
}

/* ── HERO VISUAL — inline SVG support ── */
#hero-visual svg#hero-truck {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── TRUST STATS STRIP ── */
#trust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--bone-dk);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-md);
}
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.trust-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  /* Stat numbers in Ember Orange (brand action color; gold fails on bone) */
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.03em;
}
.trust-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-60);
  line-height: 1.35;
}
@media (max-width: 767px) {
  #trust-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
    gap: 20px;
  }
  .trust-stat-num { font-size: 1.5rem; }
}

/* ── ABOUT STAT CARDS ── */
#about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.about-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--bone);
  border: 1px solid var(--bone-dk);
  border-radius: var(--radius-md);
  padding: 24px 16px;
}
.about-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
.about-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-60);
  line-height: 1.4;
}
@media (max-width: 767px) {
  #about-stats { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
}

/* ── HERO PHONE NUMBER ── */
#hero-phone-number {
  display: inline-block;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin: 16px 0 8px;
  padding: 10px 20px;
  border: 2px solid var(--orange);
  border-radius: var(--radius-md);
  transition: background 0.18s ease, color 0.18s ease;
}
#hero-phone-number::before {
  content: "";
}
#hero-phone-number:hover,
#hero-phone-number:focus {
  background: var(--orange);
  color: var(--white);
  outline: none;
}

/* ── SAVINGS BADGE — defined in TESTIMONIALS UPGRADED block above ── */

/* ── TRUCK SIZE GUIDE ── */
#truck-size-guide {
  background: var(--bone);
  border: 1.5px solid var(--bone-dk);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin: 0 auto 28px;
  max-width: 600px;
}
.truck-guide-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
}
.truck-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--bone-dk);
  border-radius: 8px;
  overflow: hidden;
}
.truck-guide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.truck-guide-row span {
  padding: 10px 14px;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--bone-dk);
  border-right: 1px solid var(--bone-dk);
}
.truck-guide-row span:last-child {
  border-right: none;
}
.truck-guide-row:last-child span {
  border-bottom: none;
}
.truck-guide-header span {
  background: var(--navy);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 14px;
}
.truck-guide-row:not(.truck-guide-header):nth-child(even) span {
  background: rgba(255,255,255,0.6);
}
.truck-name {
  font-weight: 700;
  color: var(--orange);
}
.truck-guide-note {
  font-size: 0.875rem;
  color: var(--navy-60);
  margin: 12px 0 0;
}
.truck-guide-note a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
}

/* ── BOOKING FEE — DAY-OF PROMISE ── */
.booking-fee-daypromise {
  font-size: 0.9rem;
  color: var(--navy);
  font-weight: 500;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(255,90,31,0.06);
  border-radius: 6px;
  border-left: 3px solid var(--orange);
}

/* ── FLOATING TEXT WIDGET ── */
#text-widget {
  position: fixed;
  bottom: 88px; /* clears mobile CTA bar */
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  border-radius: 30px;
  padding: 11px 18px 11px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(10,22,40,0.28);
  z-index: 900;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
#text-widget:hover,
#text-widget:focus {
  background: var(--orange);
  transform: translateY(-2px);
  outline: none;
}
#text-widget svg {
  flex-shrink: 0;
}
.text-widget-label {
  font-size: 0.875rem;
}
.text-widget-number {
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.8;
}
/* On desktop, keep widget away from any fixed nav */
@media (min-width: 768px) {
  #text-widget {
    bottom: 28px;
    right: 28px;
  }
}
/* On very small screens, show icon only */
@media (max-width: 380px) {
  .text-widget-number { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   TRUCK ADD-ON TOGGLE & BOOKING OPTIONS
═══════════════════════════════════════════════════════════ */

/* Toggle container */
#truck-addon-toggle {
  background: var(--bone);
  border: 1.5px solid var(--bone-dk);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 32px 0;
  transition: border-color 0.2s;
}
#truck-addon-toggle[data-active="true"] {
  border-color: var(--orange);
  background: #fff9f6;
}

/* Header row: label + toggle switch */
#truck-addon-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
#truck-addon-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}
.truck-addon-sub {
  font-size: 0.875rem;
  color: var(--navy-60);
  margin: 0;
}

/* iOS-style toggle switch */
.truck-toggle-switch {
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.truck-toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  width: 48px;
  height: 28px;
  background: #CBD5E1;
  border-radius: 14px;
  position: relative;
  transition: background 0.25s;
  display: block;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s;
}
.truck-toggle-switch input:checked + .toggle-track {
  background: var(--orange);
}
.truck-toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}
.truck-toggle-switch input:focus-visible + .toggle-track {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Expanded details */
#truck-addon-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bone-dk);
}
.truck-addon-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.truck-addon-list li {
  font-size: 0.9rem;
  color: var(--navy);
  padding-left: 20px;
  position: relative;
}
.truck-addon-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.truck-addon-price-note {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange);
  margin: 0;
  padding: 10px 14px;
  background: rgba(255,90,31,0.07);
  border-radius: 8px;
  display: inline-block;
}

/* Payment summary breakdown */
#truck-addon-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bone-dk);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.addon-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--navy);
}
.addon-summary-row.addon-summary-balance {
  font-weight: 700;
  font-size: 1rem;
  padding-top: 8px;
  border-top: 1px solid var(--bone-dk);
  margin-top: 4px;
}
.addon-amount {
  font-weight: 700;
  color: var(--navy);
}
.addon-truck-row .addon-amount {
  color: var(--orange);
}

/* Booking option cards */
#booking-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
#booking-options-list li {
  background: #fff;
  border: 1.5px solid var(--bone-dk);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#booking-options-list li h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
#booking-options-list li p {
  font-size: 0.875rem;
  color: var(--navy-60);
  margin: 0;
}
#booking-options-list li ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#booking-options-list li ul li {
  font-size: 0.875rem;
  color: var(--navy);
  padding-left: 18px;
  position: relative;
  border: none;
  background: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  gap: 0;
}
#booking-options-list li ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.booking-option-price {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bone);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: auto;
}
.booking-option-today {
  font-size: 1rem;
  font-weight: 800;
  color: var(--orange);
}
.booking-option-sep {
  font-size: 0.9rem;
  color: var(--navy-60);
}
.booking-option-later {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}
.card-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  align-self: flex-start;
}

@media (max-width: 767px) {
  #booking-options-list {
    grid-template-columns: 1fr;
  }
  #truck-addon-header {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ============================================================
   HERO TRUCK BADGE — "We're on our way"
============================================================ */
#hero-truck-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--navy);
  color: var(--orange);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px 5px 9px;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 14px rgba(10,22,40,0.40);
  animation: htbadge-glow 2.6s ease-in-out infinite;
}
.htb-dot {
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  animation: htb-ping 2.6s ease-in-out infinite;
}
@keyframes htbadge-glow {
  0%,100% { box-shadow: 0 2px 14px rgba(10,22,40,0.40); }
  50%      { box-shadow: 0 2px 14px rgba(10,22,40,0.40),
                         0 0 0 7px rgba(255,90,31,0.13); }
}
@keyframes htb-ping {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%     { transform: scale(1.45); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  #hero-truck-badge { animation: none !important; box-shadow: 0 2px 14px rgba(10,22,40,0.40); }
  .htb-dot          { animation: none !important; }
}
/* Scale badge down on very small screens */
@media (max-width: 400px) {
  #hero-truck-badge { font-size: 0.625rem; padding: 4px 10px 4px 8px; top: 10px; right: 10px; }
}

/* ============================================================
   NAVBAR BRAND ICON
============================================================ */
#nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
#nav-logo .brand-icon {
  flex-shrink: 0;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 0;
  transition: transform 200ms ease;
}
#nav-logo:hover .brand-icon {
  transform: scale(1.06);
}

/* ============================================================
   FOOTER BRAND ICON
============================================================ */
.footer-brand-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  padding: 6px;
  background: var(--bone);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 220ms ease;
}
.footer-brand-icon:hover { transform: scale(1.06); }

/* ============================================================
   MAP PIN PULSE — West Orange base marker
============================================================ */
@keyframes map-pin-expand {
  0%    { transform: scale(1);    opacity: 0.55; }
  60%   { transform: scale(1.55); opacity: 0.20; }
  100%  { transform: scale(1.9);  opacity: 0; }
}
@keyframes map-pin-expand-mid {
  0%,30% { transform: scale(1);    opacity: 0.28; }
  80%    { transform: scale(1.6);  opacity: 0.08; }
  100%   { transform: scale(2.0);  opacity: 0; }
}
.map-pin-ring {
  transform-box: fill-box;
  transform-origin: center;
}
.map-pin-ring-outer {
  animation: map-pin-expand     2.2s ease-out infinite;
}
.map-pin-ring-mid {
  animation: map-pin-expand-mid 2.2s ease-out infinite;
  animation-delay: 0.55s;
}
@media (prefers-reduced-motion: reduce) {
  .map-pin-ring { animation: none !important; opacity: 0.25 !important; }
}

/* ============================================================
   V3 PREMIUM POLISH PASS
   Ambient Motion · Child Stagger · Unified Badges · Hover Glow
============================================================ */

/* ── Extended design tokens ── */
:root {
  --ease-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:          150ms;
  --dur-base:          260ms;
  --dur-slow:          500ms;
  --dur-enter:         600ms;
  --shadow-glow-orange: 0 0 0 4px rgba(255, 90, 31, 0.15);
  --shadow-glow-navy:   0 0 0 4px rgba(10, 22, 40, 0.10);
}

/* ── Improved fade-up timing ── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   580ms var(--ease-expo),
    transform 580ms var(--ease-expo);
}
.fade-up.visible { opacity: 1; transform: none; }

/* ── Ambient motion keyframes ── */
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(24px, -18px) scale(1.04); }
  66%      { transform: translate(-16px, 22px) scale(0.97); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-22px, 14px) scale(1.05); }
  70%      { transform: translate(20px, -20px) scale(0.96); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(28px, 18px) scale(1.03); }
}

/* ── Section position + overflow for pseudo-element blobs ── */
#trust,
#values,
#company-story,
#mid-cta {
  position: relative;
  overflow: hidden;
}
#service-area { position: relative; }

/* Lift all direct children above ambient layer */
#trust > *,
#values > *,
#company-story > *,
#mid-cta > *,
#service-area > * { position: relative; z-index: 1; }

/* ── HERO: orange ambient blob (right) ── */
#hero::after {
  content: '';
  position: absolute;
  top: -15%;
  right: -8%;
  width: 52%;
  height: 85%;
  background: radial-gradient(circle, rgba(255,90,31,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-1 17s ease-in-out infinite;
}

/* ── TRUST: gold blob (top-left) + orange accent (bottom-right) ── */
#trust::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -8%;
  width: 52%;
  height: 100%;
  background: radial-gradient(circle, rgba(201,169,97,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-2 22s ease-in-out infinite;
}
#trust::after {
  content: '';
  position: absolute;
  bottom: -25%;
  right: -5%;
  width: 38%;
  height: 70%;
  background: radial-gradient(circle, rgba(255,90,31,0.05) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-1 16s ease-in-out infinite;
  animation-delay: -6s;
}

/* ── VALUES: soft ambient (top-right + bottom-left) ── */
#values::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 48%;
  height: 85%;
  background: radial-gradient(circle, rgba(10,22,40,0.025) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-3 24s ease-in-out infinite;
}
#values::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 42%;
  height: 80%;
  background: radial-gradient(circle, rgba(255,90,31,0.045) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-2 19s ease-in-out infinite;
  animation-delay: -9s;
}

/* ── COMPANY STORY (Who We Are): warm amber centered blob ── */
#company-story::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(201,169,97,0.06) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-1 20s ease-in-out infinite;
  animation-delay: -4s;
}

/* ── SERVICE AREA: soft orange warmth behind copy column ── */
#service-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5%;
  width: 45%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,90,31,0.04) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-3 18s ease-in-out infinite;
}

/* ── MID-CTA / BOOK YOUR MOVE: intensity 3 — bright light overlays ── */
#mid-cta {
  position: relative;
  overflow: hidden;
}
#mid-cta::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 65%;
  height: 220%;
  background: radial-gradient(circle, rgba(255,255,255,0.09) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-1 11s ease-in-out infinite;
}
#mid-cta::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -8%;
  width: 50%;
  height: 180%;
  background: radial-gradient(circle, rgba(255,200,50,0.08) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: blob-drift-2 13s ease-in-out infinite;
  animation-delay: -5s;
}
#mid-cta > * { position: relative; z-index: 1; }

/* ── CHILD STAGGER ANIMATION SYSTEM ────────────────────────────
   Items are hidden only when their parent has .fade-up (added by JS).
   When parent gets .visible, items animate in with staggered delays.
   Uses @keyframes so animation-delay doesn't affect hover transitions.
─────────────────────────────────────────────────────────────── */
@keyframes wmic-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Initial hidden state */
.fade-up #trust-list > li,
.fade-up #how-steps > li,
.fade-up #values-list > li,
.fade-up #testimonials-list > li,
.fade-up #add-ons-list > li,
.fade-up #contact-details > li,
.fade-up #why-cheaper-list > li,
.fade-up .trust-stat,
.fade-up .about-stat-card { opacity: 0; }

/* Trigger: animate when parent becomes .visible */
.fade-up.visible #trust-list > li,
.fade-up.visible #how-steps > li,
.fade-up.visible #values-list > li,
.fade-up.visible #testimonials-list > li,
.fade-up.visible #add-ons-list > li,
.fade-up.visible #contact-details > li,
.fade-up.visible #why-cheaper-list > li,
.fade-up.visible .trust-stat,
.fade-up.visible .about-stat-card {
  animation: wmic-slide-up 520ms var(--ease-expo) both;
}

/* Stagger delays — trust list (4 items) */
.fade-up.visible #trust-list > li:nth-child(2) { animation-delay:  80ms; }
.fade-up.visible #trust-list > li:nth-child(3) { animation-delay: 160ms; }
.fade-up.visible #trust-list > li:nth-child(4) { animation-delay: 240ms; }

/* Trust stats strip */
.fade-up.visible .trust-stat:nth-child(1)      { animation-delay: 120ms; }
.fade-up.visible .trust-stat:nth-child(2)      { animation-delay: 200ms; }
.fade-up.visible .trust-stat:nth-child(3)      { animation-delay: 280ms; }
.fade-up.visible .trust-stat:nth-child(4)      { animation-delay: 360ms; }

/* How-steps (3 items) */
.fade-up.visible #how-steps > li:nth-child(2)  { animation-delay: 100ms; }
.fade-up.visible #how-steps > li:nth-child(3)  { animation-delay: 200ms; }

/* Values list (5 items) */
.fade-up.visible #values-list > li:nth-child(2) { animation-delay:  80ms; }
.fade-up.visible #values-list > li:nth-child(3) { animation-delay: 160ms; }
.fade-up.visible #values-list > li:nth-child(4) { animation-delay: 240ms; }
.fade-up.visible #values-list > li:nth-child(5) { animation-delay: 320ms; }

/* Testimonials (up to 6 items) */
.fade-up.visible #testimonials-list > li:nth-child(2) { animation-delay:  80ms; }
.fade-up.visible #testimonials-list > li:nth-child(3) { animation-delay: 160ms; }
.fade-up.visible #testimonials-list > li:nth-child(4) { animation-delay: 240ms; }
.fade-up.visible #testimonials-list > li:nth-child(5) { animation-delay: 320ms; }
.fade-up.visible #testimonials-list > li:nth-child(6) { animation-delay: 400ms; }

/* Add-ons (up to 4) */
.fade-up.visible #add-ons-list > li:nth-child(2) { animation-delay:  80ms; }
.fade-up.visible #add-ons-list > li:nth-child(3) { animation-delay: 160ms; }
.fade-up.visible #add-ons-list > li:nth-child(4) { animation-delay: 240ms; }

/* Contact details (up to 4) */
.fade-up.visible #contact-details > li:nth-child(2) { animation-delay:  80ms; }
.fade-up.visible #contact-details > li:nth-child(3) { animation-delay: 160ms; }
.fade-up.visible #contact-details > li:nth-child(4) { animation-delay: 240ms; }

/* Why-cheaper (3 items) */
.fade-up.visible #why-cheaper-list > li:nth-child(2) { animation-delay: 100ms; }
.fade-up.visible #why-cheaper-list > li:nth-child(3) { animation-delay: 200ms; }

/* About stat cards (3 items) */
.fade-up.visible .about-stat-card:nth-child(2) { animation-delay: 100ms; }
.fade-up.visible .about-stat-card:nth-child(3) { animation-delay: 200ms; }

/* ── ENHANCED HOVER STATES ── */
/* Deeper card lift + richer shadow */
#trust-list li:hover,
#how-steps li:hover,
#values-list li:hover {
  transform: translateY(-5px);
  box-shadow:
    0 16px 40px rgba(10,22,40,0.13),
    0 4px 12px rgba(10,22,40,0.07);
}
#testimonials-list li:hover {
  transform: translateY(-5px);
  box-shadow:
    0 16px 40px rgba(10,22,40,0.13),
    0 4px 12px rgba(10,22,40,0.07);
}

/* CTA button — ring glow on hover */
.btn-primary:hover {
  box-shadow:
    0 10px 30px rgba(255,90,31,0.42),
    var(--shadow-glow-orange);
  transform: translateY(-2px) scale(1.018);
}

/* ── VALUES LIST — clean card, no orange accent ── */
#values-list li {
  border-top: none;
}

/* ── UNIFIED ICON BADGE — hover feedback ── */
.trust-icon:hover,
.how-step-icon:hover,
.icon-badge:hover {
  border-color: rgba(10,22,40,0.22);
  background: var(--bone-dk);
}
/* Card hover — also lift icon badge */
#trust-list li:hover .trust-icon,
#how-steps li:hover .how-step-icon,
#values-list li:hover .icon-badge {
  border-color: rgba(255,90,31,0.35);
}

/* ── WHO WE ARE (company-story) — center alignment ── */
#company-story {
  text-align: center;
}
#company-story p {
  margin-left: auto;
  margin-right: auto;
}
#company-story .story-bullets {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  text-align: left;
}

/* ── HOW-STEPS — equal heights via grid stretch ── */
#how-steps {
  align-items: stretch;
}
#how-steps li {
  height: 100%;
}

/* ── TRUCK ADD-ON — tighter alignment ── */
#truck-addon-toggle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
#truck-addon-heading {
  letter-spacing: -0.01em;
}
#truck-addon-summary {
  border-radius: var(--radius-sm);
}

/* ── REDUCED MOTION — disable all ambient animations ── */
@media (prefers-reduced-motion: reduce) {
  #hero::after,
  #trust::before, #trust::after,
  #values::before, #values::after,
  #company-story::before,
  #service-area::before,
  #mid-cta::before, #mid-cta::after {
    animation: none !important;
    display: none;
  }
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fade-up #trust-list > li,
  .fade-up #how-steps > li,
  .fade-up #values-list > li,
  .fade-up #testimonials-list > li,
  .fade-up #add-ons-list > li,
  .fade-up #contact-details > li,
  .fade-up #why-cheaper-list > li,
  .fade-up .trust-stat,
  .fade-up .about-stat-card {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* =====================================================================
   V4 — GLOBAL MOTION ENHANCEMENT SYSTEM
   ===================================================================== */

/* ── New keyframes ──────────────────────────────────────────────────── */

@keyframes badge-pop {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

@keyframes wmic-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Rulebook: stat numbers → Gold. Animation stays within gold tones now. */
@keyframes stat-warmup {
  0%, 100% { color: var(--gold);   }
  50%       { color: #D4B870;      }
}

/* Soft pulse ring that radiates outward from CTA buttons */
@keyframes btn-pulse-ring {
  0%    { box-shadow: 0 0 0 0   rgba(255, 90, 31, 0.45); }
  60%   { box-shadow: 0 0 0 12px rgba(255, 90, 31, 0);    }
  100%  { box-shadow: 0 0 0 12px rgba(255, 90, 31, 0);    }
}

/* ── Section eyebrow + subhead staggered entrance ───────────────────── */

/* Eyebrow hidden until section scrolls in */
.fade-up > .section-eyebrow  { opacity: 0; }
.fade-up > .section-subhead  { opacity: 0; }

/* Eyebrow fades in first (40ms delay) */
.fade-up.visible > .section-eyebrow {
  animation: wmic-fade-in 320ms ease-out 40ms both;
}
/* Subhead slides up right behind it (120ms delay) */
.fade-up.visible > .section-subhead {
  animation: wmic-slide-up 420ms var(--ease-expo) 120ms both;
}

/* ── Testimonial badge pop-in (staggered per card) ──────────────────── */

.fade-up #testimonials-list > li .icon-badge { opacity: 0; }

.fade-up.visible #testimonials-list > li:nth-child(1) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 200ms both; }
.fade-up.visible #testimonials-list > li:nth-child(2) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 280ms both; }
.fade-up.visible #testimonials-list > li:nth-child(3) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 360ms both; }
.fade-up.visible #testimonials-list > li:nth-child(4) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 440ms both; }
.fade-up.visible #testimonials-list > li:nth-child(5) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 520ms both; }
.fade-up.visible #testimonials-list > li:nth-child(6) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 600ms both; }

/* ── Testimonial quote text stagger ─────────────────────────────────── */

.fade-up #testimonials-list > li blockquote p { opacity: 0; }

.fade-up.visible #testimonials-list > li:nth-child(1) blockquote p { animation: wmic-fade-in 360ms ease-out  80ms both; }
.fade-up.visible #testimonials-list > li:nth-child(2) blockquote p { animation: wmic-fade-in 360ms ease-out 160ms both; }
.fade-up.visible #testimonials-list > li:nth-child(3) blockquote p { animation: wmic-fade-in 360ms ease-out 240ms both; }
.fade-up.visible #testimonials-list > li:nth-child(4) blockquote p { animation: wmic-fade-in 360ms ease-out 320ms both; }
.fade-up.visible #testimonials-list > li:nth-child(5) blockquote p { animation: wmic-fade-in 360ms ease-out 400ms both; }
.fade-up.visible #testimonials-list > li:nth-child(6) blockquote p { animation: wmic-fade-in 360ms ease-out 480ms both; }

/* ── Icon hover scale ────────────────────────────────────────────────── */

/* Extend existing icon transition to include transform */
.trust-icon,
.how-step-icon,
.icon-badge {
  transition: transform var(--t) var(--ease-expo),
              border-color var(--t),
              background var(--t);
}

/* Scale up on parent card hover */
#trust-list      li:hover .trust-icon,
#how-steps       li:hover .how-step-icon,
#values-list     li:hover .icon-badge,
#testimonials-list li:hover .icon-badge,
#add-ons-list    li:hover .icon-badge {
  transform: scale(1.09);
}

/* Trust stat numbers: no infinite color-pulse (removed per brand rules) */

/* CTA buttons: Ember fill, NO glow / pulse ring (removed per brand rules) */
.btn-primary { position: relative; }

/* ── Mobile motion reduction ────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Shorten the initial slide distance — less dramatic on small screens */
  .fade-up { transform: translateY(14px); }

  /* Shorten slide keyframe to match */
  @keyframes wmic-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* Remove CTA pulse ring on mobile — too busy */
  .btn-primary::after { display: none; }

  /* Remove stat warmth pulse on mobile */
  .trust-stat-num { animation: none; }

  /* Reveal testimonial badges + quotes immediately — no stagger on mobile */
  .fade-up #testimonials-list > li .icon-badge,
  .fade-up #testimonials-list > li blockquote p {
    opacity: 1 !important;
  }
  .fade-up.visible #testimonials-list > li .icon-badge,
  .fade-up.visible #testimonials-list > li blockquote p {
    animation: none !important;
  }

  /* Reveal eyebrow/subhead immediately on mobile */
  .fade-up > .section-eyebrow,
  .fade-up > .section-subhead {
    opacity: 1 !important;
  }
  .fade-up.visible > .section-eyebrow,
  .fade-up.visible > .section-subhead {
    animation: none !important;
  }
}

/* =====================================================================
   V5 — PREMIUM REFINEMENT PASS
   ===================================================================== */

/* ── 1. PRICE CARDS — orange top border (brand consistency) ─────── */

/* Most Popular (2BR) — Antique Gold premium treatment                 */
/* Gold ring + border; gold price amount; gold badge                   */
.price-card--popular {
  border-top: 3px solid var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 32px rgba(201, 169, 97, 0.18);
}
.price-card--popular .price-card-amount {
  color: var(--orange);   /* prices are always Ember, even on the popular card */
}
.popular-badge {
  background: var(--gold);
  color: var(--navy);   /* dark text on the gold premium badge (readable) */
}

/* ── 2. TRUST STATS — all numbers Ember (stats are never gold) ──── */
.trust-stat:nth-child(4) .trust-stat-num {
  color: var(--orange) !important;
}

/* ── 3. TESTIMONIALS — decorative opening quote mark ───────────── */

/* A large faint curly-quote anchors the card visually and signals     */
/* "real words from a real person" without adding more copy            */
#testimonials-list li blockquote {
  position: relative;
}
#testimonials-list li blockquote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: -6px;
  font-family: var(--font-display), Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--orange);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Keep quote text above the decorative mark */
#testimonials-list li blockquote > p {
  position: relative;
  z-index: 1;
}

/* ── 4. WHY CHEAPER LIST — hover lift ───────── */

#why-cheaper-list li {
  transition: box-shadow var(--t) var(--ease-expo),
              transform   var(--t) var(--ease-expo);
}
#why-cheaper-list li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── 5. MOVE EXAMPLES LIST — hover shadow ───── */

#move-examples-list li {
  transition: box-shadow var(--t) var(--ease-expo);
}
#move-examples-list li:hover {
  box-shadow: var(--shadow-md);
}

/* ── 6. MID-CTA — heading typography ──────────────────────────── */

/* Adds visual weight above the supporting paragraph                   */
#mid-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 auto 12px;
  max-width: 540px;
}

/* ── 7. LEGAL CALM INTRO — soften non-refundable disclosure ─────── */

/* Establishes a shared-interest frame before the policy text so       */
/* it reads as protective rather than adversarial                      */
.legal-calm-intro {
  font-size: 0.8125rem;
  color: var(--navy-60);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.5;
}

/* ── 8. V5 MOBILE ADJUSTMENTS ──────────────────────────────────── */

@media (max-width: 767px) {
  /* Suppress hover lift on touch — no hover state on mobile           */
  #why-cheaper-list li:hover,
  #move-examples-list li:hover {
    transform: none;
  }
}

/* =====================================================================
   GROUP 1 — HERO STARS + TRUST STAT ZERO
   ===================================================================== */

/* Star rating row above CTA buttons */
#hero-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
#hero-star-glyphs {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1;
}
#hero-star-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--navy-60);
}

/* Rulebook: "Kill the green $0. It's off-palette. Make it match the stat row."
   All stat numbers are now Gold — this class just kills the animation. */
.trust-stat-zero {
  color: var(--gold) !important;
  animation: none !important;
}

/* =====================================================================
   GROUP 2 — HOW-IT-WORKS ENHANCEMENTS
   ===================================================================== */

/* Step number badge — large muted orange number above each step heading */
.how-step-badge {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--orange);
  opacity: 0.45;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 2px;
}

/* Mobile: dashed left-border vertical timeline connecting the 3 steps */
@media (max-width: 640px) {
  #how-steps {
    border-left: 2px dashed rgba(255, 90, 31, 0.28);
    padding-left: 20px;
    margin-left: 6px;
  }
}

/* =====================================================================
   GROUP 3 — AFFORDABLE PRICING + TESTIMONIALS
   ===================================================================== */

/* ── Why-Cheaper: icon badge per card ── */
.why-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-sm);
  color: var(--orange);
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* Bold summary hook — first text the eye lands on in each card */
.why-card-summary {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 6px;
}

/* ── Stars: glyph replacement ── */
.stars span {
  font-size: 0.9375rem;
  letter-spacing: 2px;
  line-height: 1;
}

/* ── Testimonials: premium heading weight ── */
#testimonials h2 {
  font-weight: 700;
}

/* ── Testimonials: quote mark fade-in ── */
.fade-up #testimonials-list li blockquote::before {
  opacity: 0;
  transition: none;
}
.fade-up.visible #testimonials-list li blockquote::before {
  animation: wmic-fade-in 700ms ease-out 40ms both;
}

/* ── Testimonials: badge pop-in (all badge types) ── */
.fade-up #testimonials-list li [class*="badge"] {
  opacity: 0;
}
.fade-up.visible #testimonials-list li:nth-child(1) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 180ms both; }
.fade-up.visible #testimonials-list li:nth-child(2) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 260ms both; }
.fade-up.visible #testimonials-list li:nth-child(3) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 340ms both; }
.fade-up.visible #testimonials-list li:nth-child(4) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 420ms both; }
.fade-up.visible #testimonials-list li:nth-child(5) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 500ms both; }
.fade-up.visible #testimonials-list li:nth-child(6) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 580ms both; }

/* ── Testimonials: hover upgrade ── */
#testimonials-list li:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(10, 22, 40, 0.12),
    0 3px 8px rgba(10, 22, 40, 0.06);
}

/* ── Testimonials: subtle background drift ── */
#testimonials { position: relative; overflow: hidden; }
#testimonials::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 55% 45% at 28% 52%, rgba(201, 169, 97, 0.055) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 72% 48%, rgba(255, 90, 31, 0.03) 0%, transparent 65%);
  animation: testimonials-drift 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes testimonials-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(1.5%, 1%) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  #testimonials::before { animation: none; }
}

/* ── Reduced-motion: disable badge pop on testimonials ── */
@media (prefers-reduced-motion: reduce) {
  .fade-up #testimonials-list li [class*="badge"],
  .fade-up #testimonials-list li blockquote::before {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ============================================================
   FINAL POLISH — HERO · CONTACT ICONS · GLOBAL CONSISTENCY
============================================================ */

/* ── Hero subheading: premium typography ── */
#hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency) {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--navy);
  max-width: 500px;
  margin-bottom: 1.25rem;
}

/* ── Hero headline: a touch of extra breathing room before subhead ── */
#hero-copy h1 {
  margin-bottom: 0.25rem;
}

/* ── Hero trust pills: bone pill + hover lift ── */
#hero-trust li {
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  padding: 6px 14px 6px 10px;
  gap: 6px;
  transition: transform var(--t), box-shadow var(--t);
}
#hero-trust li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
  #hero-trust li { transition: none; }
  #hero-trust li:hover { transform: none; }
}

/* ── Hero premium trust badge ── */
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.005em;
  align-self: flex-start;
}
.hero-trust-badge svg {
  color: var(--orange);
  flex-shrink: 0;
}

/* ── Contact page icons: semantic pill circle ── */
.contact-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--orange);
  margin-bottom: 12px;
}

/* ── Contact page: premium badges strip ── */
.contact-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}
.contact-badge svg {
  color: var(--orange);
  flex-shrink: 0;
}

/* ── Responsive: hero subheading + trust badge on smaller screens ── */
@media (max-width: 960px) {
  #hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency) {
    max-width: 100%;
  }
  .hero-trust-badge { align-self: center; }
}
@media (max-width: 640px) {
  #hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency) {
    font-size: clamp(1rem, 4.5vw, 1.125rem);
    max-width: 100%;
  }
}

/* ============================================================
   GROUP 4 — SERVICE AREA · CALCULATOR · BOTTOM CTA · FOOTER
============================================================ */

/* ── Calculator: smooth reveal animations ── */
@keyframes calc-reveal {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes calc-lift {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#calc-addons-group:not([hidden]) {
  animation: calc-reveal 200ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
#calc-result:not([hidden]) {
  animation: calc-lift 200ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  #calc-addons-group:not([hidden]),
  #calc-result:not([hidden]) {
    animation: none;
  }
}

/* ── Calculator: add-ons reassurance note ── */
.calc-addons-note {
  font-size: 0.8125rem;
  color: var(--navy-60);
  margin: 4px 0 14px;
  line-height: 1.5;
}

/* ── Bottom CTA: reassurance line ── */
.cta-reassurance {
  font-size: 0.875rem;
  color: var(--navy-60);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ── Footer: Spanish badge ── */
.footer-badge-spanish {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 90, 31, 0.10);
  color: var(--orange);
  border: 1px solid rgba(255, 90, 31, 0.28);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────
   HERO ENTRANCE + PILL FLOAT ANIMATIONS
   ───────────────────────────────────────────── */

/* Brand identifier row above eyebrow */
.hero-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-brand-row svg,
.hero-brand-row img,
.hero-brand-row .hero-brand-icon-wrap {
  flex-shrink: 0;
}
/* Wrap C-2 icon in a light square when row sits on navy (about page hero) */
.hero-brand-row--on-navy .hero-brand-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bone);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

/* Entrance keyframe */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Float keyframe for trust pills */
@keyframes pill-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* Snap the hero section itself visible fast so per-element stagger reads cleanly */
#hero.fade-up {
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}

/* Per-element entrance — all start invisible, animate in with stagger */
.hero-brand-row,
#hero-eyebrow,
#hero-copy h1,
#hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency),
#hero-stars,
.hero-trust-badge,
#hero-cta-group,
#hero-deposit-note,
#hero-urgency {
  opacity: 0;
  animation: hero-enter 260ms var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.hero-brand-row           { animation-delay:  80ms; }
#hero-eyebrow             { animation-delay: 140ms; }
#hero-copy h1             { animation-delay: 200ms; }
#hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency)
                          { animation-delay: 260ms; }
#hero-stars               { animation-delay: 300ms; }
.hero-trust-badge         { animation-delay: 340ms; }
#hero-cta-group           { animation-delay: 380ms; }
#hero-deposit-note        { animation-delay: 440ms; }
#hero-urgency             { animation-delay: 480ms; }

/* Trust pill stagger index */
#hero-trust li:nth-child(1) { --i: 0; }
#hero-trust li:nth-child(2) { --i: 1; }
#hero-trust li:nth-child(3) { --i: 2; }
#hero-trust li:nth-child(4) { --i: 3; }
#hero-trust li:nth-child(5) { --i: 4; }

/* Trust pills: enter + continuous float; transition uses individual 'translate' to avoid
   conflicting with the transform-based pill-float animation */
#hero-trust li {
  --i: 0;
  opacity: 0;
  transition: translate var(--t), box-shadow var(--t);
  animation:
    hero-enter 260ms var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) calc(500ms + var(--i) * 80ms) both,
    pill-float 4s ease-in-out calc(1.4s + var(--i) * 400ms) infinite;
}

/* Hover: pause float at current position, lift via individual translate property */
#hero-trust li:hover {
  animation-play-state: running, paused;
  translate: 0 -2px;
  box-shadow: var(--shadow-sm);
}

/* Consistent 18px icon sizing on trust pills (overrides HTML width/height attrs) */
#hero-trust li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Mobile: no continuous float (too distracting on small screens), keep entrance */
@media (max-width: 640px) {
  #hero-trust li {
    animation: hero-enter 260ms var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) calc(500ms + var(--i) * 80ms) both;
  }
  #hero-trust li:hover {
    animation-play-state: running;
    translate: 0 -2px;
  }
}

/* Reduced motion: skip all hero entrance and float animations */
@media (prefers-reduced-motion: reduce) {
  .hero-brand-row,
  #hero-eyebrow,
  #hero-copy h1,
  #hero-copy > p:not(#hero-eyebrow):not(#hero-deposit-note):not(#hero-urgency),
  #hero-stars,
  .hero-trust-badge,
  #hero-cta-group,
  #hero-deposit-note,
  #hero-urgency,
  #hero-trust li {
    opacity: 1;
    animation: none;
    transition: box-shadow var(--t);
  }
  #hero-trust li:hover {
    translate: 0 -2px;
  }
  #hero.fade-up {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL SITE POLISH
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Remove decorative orange quote mark from testimonial cards ── */
#testimonials-list li blockquote::before {
  content: none;
}
/* Remove the z-index stack needed only for the quote mark */
#testimonials-list li blockquote > p {
  position: static;
  z-index: auto;
}

/* ── 2. Testimonial stagger extension for items 7–9 ── */
.fade-up.visible #testimonials-list > li:nth-child(7) { animation-delay: 480ms; }
.fade-up.visible #testimonials-list > li:nth-child(8) { animation-delay: 560ms; }
.fade-up.visible #testimonials-list > li:nth-child(9) { animation-delay: 640ms; }
.fade-up #testimonials-list > li:nth-child(7) .icon-badge,
.fade-up #testimonials-list > li:nth-child(8) .icon-badge,
.fade-up #testimonials-list > li:nth-child(9) .icon-badge { opacity: 0; }
.fade-up.visible #testimonials-list > li:nth-child(7) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 680ms both; }
.fade-up.visible #testimonials-list > li:nth-child(8) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 760ms both; }
.fade-up.visible #testimonials-list > li:nth-child(9) .icon-badge { animation: badge-pop 380ms var(--ease-expo) 840ms both; }
.fade-up #testimonials-list > li:nth-child(7) blockquote p,
.fade-up #testimonials-list > li:nth-child(8) blockquote p,
.fade-up #testimonials-list > li:nth-child(9) blockquote p { opacity: 0; }
.fade-up.visible #testimonials-list > li:nth-child(7) blockquote p { animation: wmic-fade-in 360ms ease-out 560ms both; }
.fade-up.visible #testimonials-list > li:nth-child(8) blockquote p { animation: wmic-fade-in 360ms ease-out 640ms both; }
.fade-up.visible #testimonials-list > li:nth-child(9) blockquote p { animation: wmic-fade-in 360ms ease-out 720ms both; }
@media (max-width: 640px) {
  .fade-up #testimonials-list > li:nth-child(7) .icon-badge,
  .fade-up #testimonials-list > li:nth-child(8) .icon-badge,
  .fade-up #testimonials-list > li:nth-child(9) .icon-badge,
  .fade-up #testimonials-list > li:nth-child(7) blockquote p,
  .fade-up #testimonials-list > li:nth-child(8) blockquote p,
  .fade-up #testimonials-list > li:nth-child(9) blockquote p { opacity: 1 !important; }
  .fade-up.visible #testimonials-list > li:nth-child(7) .icon-badge,
  .fade-up.visible #testimonials-list > li:nth-child(8) .icon-badge,
  .fade-up.visible #testimonials-list > li:nth-child(9) .icon-badge,
  .fade-up.visible #testimonials-list > li:nth-child(7) blockquote p,
  .fade-up.visible #testimonials-list > li:nth-child(8) blockquote p,
  .fade-up.visible #testimonials-list > li:nth-child(9) blockquote p { animation: none !important; }
}

/* ── 3. Fast-move badge variant ── */
.badge-fastmove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(22, 163, 74, 0.10);
  color: var(--success);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  letter-spacing: 0.01em;
  border: 1px solid rgba(22, 163, 74, 0.28);
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── 4. Services page: includes-strip left-slide entrance ── */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.includes-strip > li:nth-child(1) { --i: 0; }
.includes-strip > li:nth-child(2) { --i: 1; }
.includes-strip > li:nth-child(3) { --i: 2; }
.includes-strip > li:nth-child(4) { --i: 3; }
.fade-up .includes-strip > li { opacity: 0; }
.fade-up.visible .includes-strip > li {
  animation: slide-in-left 260ms var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) calc(80ms + var(--i, 0) * 80ms) both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up .includes-strip > li { opacity: 1; animation: none; }
}

/* ── 5. "What We Don't Do" styled warning block ── */
.service-limits-box {
  background: var(--bone);
  border: 2px solid var(--navy-12);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 12px;
}
.service-limits-box svg {
  flex-shrink: 0;
  color: var(--orange);
  margin-top: 2px;
}
.service-limits-box p {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--navy);
  margin: 0;
}

/* ── 6. About page: "Who We Are" identity badges ── */
.about-who-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 24px;
}
.about-who-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.005em;
  transition: translate var(--t), box-shadow var(--t);
}
.about-who-badge:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-md);
}
.about-who-badge svg {
  color: var(--orange);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .about-who-badge { transition: none; }
  .about-who-badge:hover { translate: 0; }
}

/* ── 7. About values: UI icon sizing inside icon-badge ── */
.values-icon.icon-badge {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-sm);
  color: var(--orange);
  flex-shrink: 0;
}
.values-icon.icon-badge svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ── 8. Pricing trust chips: consistent pill style ── */
#pricing-trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  max-width: 640px;
}
#pricing-trust-chips li {
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  transition: translate var(--t), box-shadow var(--t);
}
#pricing-trust-chips li:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   LAYOUT UNIFICATION PASS — BADGES · CTA · VIDEO · GLOBAL ALIGNMENT
   ===================================================================== */

/* ── 1. UNIFIED BADGE SYSTEM ──────────────────────────────────────────
   All pill/chip badges share the same visual spec:
   Same height, padding, border-radius, font-size, icon-size.
   This covers: includes-strip, about-who-badges, team-facts,
   hero-trust, pricing-trust-chips, contact-badges.
───────────────────────────────────────────────────────────────────── */

/* Shared badge container — centers all badge groups */
.includes-strip,
.about-who-badges,
#team-facts,
#hero-trust,
#pricing-trust-chips,
.contact-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Shared badge item spec */
.includes-strip li,
.about-who-badge,
#team-facts li,
#pricing-trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: translate 220ms ease, box-shadow 220ms ease;
}
.includes-strip li:hover,
.about-who-badge:hover,
#team-facts li:hover,
#pricing-trust-chips li:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-sm);
}

/* Badge icons: consistent 16px */
.includes-strip li svg,
.about-who-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--orange);
}

/* Includes-strip specific: center the strip within its parent section */
.includes-strip {
  margin: 24px auto 0;
  max-width: 100%;
}

/* About identity badges: center within company-story */
.about-who-badges {
  margin: 24px auto;
  max-width: 100%;
}

/* ── Badge entrance animation: slide-in from left with stagger ── */
@keyframes badge-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Stagger index variables */
.includes-strip > li,
.about-who-badge,
#team-facts > li,
#pricing-trust-chips > li {
  --badge-i: 0;
}
.includes-strip > li:nth-child(2),
.about-who-badges > .about-who-badge:nth-child(2),
#team-facts > li:nth-child(2),
#pricing-trust-chips > li:nth-child(2) { --badge-i: 1; }
.includes-strip > li:nth-child(3),
.about-who-badges > .about-who-badge:nth-child(3),
#team-facts > li:nth-child(3),
#pricing-trust-chips > li:nth-child(3) { --badge-i: 2; }
.includes-strip > li:nth-child(4),
.about-who-badges > .about-who-badge:nth-child(4),
#team-facts > li:nth-child(4),
#pricing-trust-chips > li:nth-child(4) { --badge-i: 3; }
.includes-strip > li:nth-child(5),
#team-facts > li:nth-child(5),
#pricing-trust-chips > li:nth-child(5) { --badge-i: 4; }

/* Entrance animation on scroll */
.fade-up .includes-strip > li,
.fade-up .about-who-badge,
.fade-up #team-facts > li { opacity: 0; }
.fade-up.visible .includes-strip > li,
.fade-up.visible .about-who-badge,
.fade-up.visible #team-facts > li {
  animation: badge-slide-in 300ms var(--ease-expo) calc(60ms + var(--badge-i, 0) * 70ms) both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up .includes-strip > li,
  .fade-up .about-who-badge,
  .fade-up #team-facts > li { opacity: 1; animation: none; }
}

/* Mobile: let badges wrap naturally, keep centered */
@media (max-width: 640px) {
  .includes-strip li,
  .about-who-badge,
  #team-facts li,
  #pricing-trust-chips li {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .includes-strip,
  .about-who-badges,
  #team-facts {
    gap: 8px;
  }
}

/* ── 2. ABOUT STAT CARDS — CENTERED + CONSISTENT ──────────────────── */

#about-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}
.about-stat-card {
  flex: 1 1 200px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  transition: translate 220ms ease, box-shadow 220ms ease;
}
.about-stat-card:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-md);
}
.about-stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
}
.about-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-60);
  line-height: 1.4;
}
@media (max-width: 640px) {
  #about-stats { gap: 12px; }
  .about-stat-card {
    flex: 1 1 100%;
    max-width: 320px;
    padding: 24px 16px;
  }
}

/* ── 3. CTA SECTIONS — PREMIUM "READY TO BOOK?" ──────────────────── */

/* Override the navy+bone card pattern with a clean light section */
#services-cta,
#about-cta {
  background: var(--bone) !important;
  text-align: center;
  padding: 64px 8% !important;
}

/* Remove the inner bone card — use the section itself */
#services-cta > div,
#about-cta > div {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: var(--max-w);
}

/* Heading */
#services-cta h2,
#about-cta h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}

/* Paragraph */
#services-cta p,
#about-cta p {
  color: var(--navy-80);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 32px;
}

/* Primary button: ember fill, white text */
#services-cta .btn-primary,
#about-cta .btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-orange);
  font-weight: 700;
  padding: 14px 32px;
}
#services-cta .btn-primary:hover,
#about-cta .btn-primary:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  box-shadow: 0 8px 28px rgba(255,90,31,0.42);
  transform: translateY(-2px);
}

/* Secondary button: navy outline, navy text */
#services-cta .btn-secondary,
#about-cta .btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy-40);
  border-radius: var(--radius-pill);
  box-shadow: none;
  text-decoration: none;
  padding: 14px 32px;
  font-weight: 700;
  margin-left: 16px;
}
#services-cta .btn-secondary:hover,
#about-cta .btn-secondary:hover {
  border-color: var(--navy);
  background: var(--navy-06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Mobile CTA: stack buttons */
@media (max-width: 640px) {
  #services-cta .btn-secondary,
  #about-cta .btn-secondary {
    margin-left: 0;
    margin-top: 12px;
  }
  #services-cta a,
  #about-cta a {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto;
    text-align: center;
  }
}

/* ── 4. "SEE OUR CREW AT WORK" VIDEO SECTION ──────────────────────── */

#crew-video {
  background: var(--bone);
  padding: 64px 8%;
  text-align: center;
}
#crew-video > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
#crew-video h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 12px;
}
#crew-video .section-subhead {
  font-size: 1.0625rem;
  color: var(--navy-60);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 36px;
}

/* Video wrapper: responsive 16:9 container */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--navy-12);
}
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Branded thumbnail overlay (shown before play) */
.video-thumbnail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  background: linear-gradient(145deg, rgba(10,22,40,0.75) 0%, rgba(10,22,40,0.55) 100%);
  transition: opacity 300ms ease;
}
.video-thumbnail.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.video-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Clean play button */
.video-play-btn {
  width: 72px;
  height: 72px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255,90,31,0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.video-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(255,90,31,0.55);
}
.video-play-btn svg {
  width: 28px;
  height: 28px;
  color: var(--white);
  margin-left: 3px; /* optical centering for play triangle */
}

/* Subtle entrance animation for video section */
.fade-up .video-wrapper {
  opacity: 0;
  transform: translateY(20px);
}
.fade-up.visible .video-wrapper {
  animation: wmic-slide-up 600ms var(--ease-expo) 100ms both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up .video-wrapper { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 640px) {
  #crew-video { padding: 48px 8%; }
  .video-play-btn {
    width: 56px;
    height: 56px;
  }
  .video-play-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* ── 5. ADD-ONS GRID — PROPER CARD LAYOUT ─────────────────────────── */

#add-ons-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
#add-ons-list li {
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--navy-12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: translate 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
#add-ons-list li:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-md);
  border-color: var(--orange);
}
#add-ons-list h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  margin-bottom: 0;
}
#add-ons-list p {
  font-size: 0.8125rem;
  color: var(--navy-60);
  line-height: 1.6;
  text-align: left;
}

/* ── 6. SERVICE LIMITS ("What We Don't Do") — CENTERED ────────────── */

#service-limits {
  text-align: center;
}
.service-limits-box {
  max-width: 680px;
  margin: 12px auto 0;
}

/* ── 7. GLOBAL SECTION ALIGNMENT FIXES ────────────────────────────── */

/* Ensure all studio/apartment move sections center their content */
#studio-moves,
#apartment-home-moves,
#add-ons {
  text-align: center;
}

/* Center the includes-strip within move sections */
#studio-moves .includes-strip,
#apartment-home-moves .includes-strip {
  justify-content: center;
}

/* ── 8. TESTIMONIALS BADGE STAGGER — items 7–9 badge variants ────── */
.fade-up.visible #testimonials-list > li:nth-child(7) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 660ms both; }
.fade-up.visible #testimonials-list > li:nth-child(8) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 740ms both; }
.fade-up.visible #testimonials-list > li:nth-child(9) [class*="badge"] { animation: badge-pop 380ms var(--ease-expo) 820ms both; }

/* ── 9. INCLUDES-STRIP ANIMATION OVERRIDE — cleaner cascade ─────── */
/* The original slide-in-left animation already handles this, but let's
   ensure the unified badge-slide-in doesn't conflict */
.fade-up.visible .includes-strip > li {
  animation: badge-slide-in 300ms var(--ease-expo) calc(60ms + var(--badge-i, 0) * 70ms) both;
}

/* ── 10. MOBILE BREAKPOINT CONSISTENCY ─────────────────────────────── */
@media (max-width: 375px) {
  .includes-strip li,
  .about-who-badge,
  #team-facts li {
    font-size: 0.6875rem;
    padding: 7px 12px;
    min-height: 34px;
  }
}
@media (max-width: 320px) {
  main > section { padding: 32px 5%; }
  #hero-inner { padding: 40px 16px 56px; }
}

/* ── 11. HERO BRAND ROW ON NAVY — center without inline styles ──── */
.hero-brand-row--on-navy {
  justify-content: center;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.65);
}

/* ── 12. SERVICE-LIMITS: override existing conflicting border-left ── */
#service-limits {
  border-left: none !important;
  background: var(--bone) !important;
  padding: 32px 36px !important;
  border-radius: var(--radius-md);
}

/* ── 13. VALUES SECTION: ensure proper grid on all breakpoints ──── */
@media (max-width: 640px) {
  #values-list { grid-template-columns: 1fr; }
  #values-list li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ── 14. ADD-ONS STAGGER — extend to all 8 items ─────────────────── */
.fade-up.visible #add-ons-list > li:nth-child(5) { animation-delay: 320ms; }
.fade-up.visible #add-ons-list > li:nth-child(6) { animation-delay: 400ms; }
.fade-up.visible #add-ons-list > li:nth-child(7) { animation-delay: 480ms; }
.fade-up.visible #add-ons-list > li:nth-child(8) { animation-delay: 560ms; }

/* =====================================================================
   V7 — FINAL LAYOUT POLISH & VIDEO SECTION ENHANCEMENT
   ===================================================================== */

/* ── VIDEO SECTION: enhanced sizing + caption ──────────────────────── */

/* Wider video wrapper for desktop — 900-1100px range */
.video-wrapper {
  max-width: 940px;
}

/* Video element: fill container, object-fit for no cropping */
.video-wrapper video {
  object-fit: cover;
}

/* Video caption beneath the player */
.video-caption {
  margin-top: 20px;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--navy-60);
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Caption entrance animation */
.fade-up .video-caption { opacity: 0; }
.fade-up.visible .video-caption {
  animation: wmic-fade-in 500ms ease-out 400ms both;
}

/* Desktop: generous padding */
@media (min-width: 1025px) {
  #crew-video { padding: 80px 8%; }
}

/* Tablet: full width with side padding */
@media (max-width: 1024px) and (min-width: 641px) {
  #crew-video { padding: 64px 6%; }
  .video-wrapper { max-width: 100%; }
}

/* Mobile: full width, tight padding */
@media (max-width: 640px) {
  .video-wrapper {
    max-width: 100%;
    border-radius: var(--radius-md);
  }
  .video-caption {
    font-size: 0.8125rem;
    margin-top: 14px;
    padding: 0 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up .video-caption { opacity: 1; animation: none; }
}

/* ── BADGE GAP REFINEMENT: 20-28px per spec ───────────────────────── */
.includes-strip,
.about-who-badges,
#team-facts {
  gap: 14px;
}
@media (min-width: 768px) {
  .includes-strip,
  .about-who-badges,
  #team-facts {
    gap: 20px;
  }
}

/* ── SECTION VERTICAL RHYTHM: consistent 64px desktop / 48px mobile ─ */
#studio-moves,
#apartment-home-moves,
#add-ons,
#service-limits,
#crew-video,
#company-story,
#mission,
#values,
#who-we-are {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (max-width: 640px) {
  #studio-moves,
  #apartment-home-moves,
  #add-ons,
  #service-limits,
  #crew-video,
  #company-story,
  #mission,
  #values,
  #who-we-are {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* =====================================================================
   V8 — FINAL POLISH: ICONS · ADD-ON "+" · PRICING "$" · CLEANUP
   ===================================================================== */

/* ── 1. ABOUT STAT ICON — replaces .icon-badge img with SVG ────────── */
.about-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  color: var(--gold);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.about-stat-icon svg {
  width: 32px;
  height: 32px;
}

/* ── 2. ABOUT IDENTITY BADGE ICONS — unified sizing ────────────────── */
.about-who-badge svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
  stroke-width: 1.75;
}

/* ── 3. ABOUT CTA — bone bg, bone card removed, full-width buttons ── */
/* The #about-cta override from the previous pass handles background,
   heading, paragraph, and buttons. This section ensures the CTA wraps
   cleanly and the phone number is always visible. */
#about-cta {
  position: relative;
  z-index: 1;
}
/* Button group wrapper — stacks on mobile */
#about-cta .btn-primary,
#about-cta .btn-secondary,
#services-cta .btn-primary,
#services-cta .btn-secondary {
  position: relative;
  z-index: 1;
}
/* Ensure secondary shows full phone number */
#about-cta .btn-secondary,
#services-cta .btn-secondary {
  white-space: nowrap;
}

/* ── 4. ADD-ONS "+" ICON — prepend to every add-on card title ──────── */
#add-ons-list h3::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: middle;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 220ms ease, color 220ms ease, border-color 220ms ease;
}
#add-ons-list li:hover h3::before {
  opacity: 1;
  color: var(--orange);
  border-color: var(--orange);
}

/* ── 5. PRICING "$" HOVER — gold dollar sign next to price ─────────── */
.price-card-amount {
  position: relative;
  display: inline-block;
}
.price-card-amount::after {
  content: '$';
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--gold);
  opacity: 0;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  pointer-events: none;
}
.price-card:hover .price-card-amount::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── 6. VALUES ICON COLOR — match the premium gold palette ─────────── */
#values-list .values-icon.icon-badge {
  color: var(--gold);
}
#values-list .values-icon.icon-badge svg {
  color: var(--gold);
}
/* On card hover, brighten to orange */
#values-list li:hover .values-icon.icon-badge svg {
  color: var(--orange);
}

/* ── 7. ABOUT STAT CARD ENTRANCE — stagger with fade + slide ──────── */
.fade-up .about-stat-card .about-stat-icon { opacity: 0; }
.fade-up.visible .about-stat-card:nth-child(1) .about-stat-icon { animation: badge-slide-in 320ms var(--ease-expo) 80ms both; }
.fade-up.visible .about-stat-card:nth-child(2) .about-stat-icon { animation: badge-slide-in 320ms var(--ease-expo) 160ms both; }
.fade-up.visible .about-stat-card:nth-child(3) .about-stat-icon { animation: badge-slide-in 320ms var(--ease-expo) 240ms both; }
@media (prefers-reduced-motion: reduce) {
  .fade-up .about-stat-card .about-stat-icon { opacity: 1; animation: none; }
}

/* ── 8. GLOBAL EASING UNIFICATION — one easing for all transitions ── */
/* All hover transitions, badge slides, fade-ups use the same curve */
.btn-primary,
.btn-secondary,
#add-ons-list li,
.about-stat-card,
.about-who-badge,
.includes-strip li,
#team-facts li,
#pricing-trust-chips li,
#values-list li,
#trust-list li,
#how-steps li,
#testimonials-list li,
.price-card {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 9. ICON STROKE WEIGHT UNIFICATION (about page only) ──────────── */
/* All about-page SVG icons use 1.75 stroke for consistency */
.about-who-badge svg,
.about-stat-icon svg,
#values-list .values-icon svg {
  stroke-width: 1.75;
}

/* =====================================================================
   V9 — PRICING CTA BONE STYLE + FINAL LAUNCH POLISH
   ===================================================================== */

/* ── 1. PRICING CTA — bone background, centered card ──────────────── */
#pricing-cta {
  background: var(--bone) !important;
  text-align: center;
  padding: 64px 8% !important;
}
#pricing-cta > div {
  background: var(--white);
  border-radius: 20px;
  padding: 56px 48px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(10,22,40,0.08);
  border: 1px solid var(--navy-06);
}
#pricing-cta h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}
#pricing-cta p {
  color: var(--navy-80);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 32px;
}
/* Primary: ember fill, white text, pill */
#pricing-cta .btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-orange);
  font-weight: 700;
  padding: 14px 32px;
}
#pricing-cta .btn-primary:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  box-shadow: 0 8px 28px rgba(255,90,31,0.42);
  transform: translateY(-2px);
}
/* Secondary: text link style — no box */
#pricing-cta .btn-secondary {
  background: transparent;
  color: var(--navy);
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: rgba(10,22,40,0.35);
  text-underline-offset: 3px;
  padding: 0;
  font-weight: 600;
  margin-left: 24px;
}
#pricing-cta .btn-secondary:hover {
  background: transparent;
  border: none;
  text-decoration-color: var(--navy);
  box-shadow: none;
  transform: none;
}
@media (max-width: 640px) {
  #pricing-cta > div {
    padding: 40px 24px;
    border-radius: 16px;
  }
  #pricing-cta .btn-primary,
  #pricing-cta .btn-secondary {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
  }
  #pricing-cta .btn-secondary {
    margin-top: 16px;
  }
}

/* ── 2. FAQ ACCORDION — smooth open/close animation ────────────────── */
/* Slide-down transition for FAQ answers */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1),
              padding 300ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 24px;
}
.faq-answer > * {
  overflow: hidden;
}
.faq-item.open .faq-answer {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 24px 22px;
}

/* Override the original display:none / display:block toggle
   so the grid transition works smoothly */
.faq-item .faq-answer { display: grid; }

/* FAQ chevron rotation — smooth */
.faq-chevron {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 3. FAQ LIST ITEMS — stagger entrance ──────────────────────────── */
.fade-up .faq-item { opacity: 0; }
.fade-up.visible .faq-item {
  animation: wmic-slide-up 420ms var(--ease-expo) both;
}
.fade-up.visible .faq-item:nth-child(2)  { animation-delay:  50ms; }
.fade-up.visible .faq-item:nth-child(3)  { animation-delay: 100ms; }
.fade-up.visible .faq-item:nth-child(4)  { animation-delay: 150ms; }
.fade-up.visible .faq-item:nth-child(5)  { animation-delay: 200ms; }
.fade-up.visible .faq-item:nth-child(6)  { animation-delay: 250ms; }
.fade-up.visible .faq-item:nth-child(7)  { animation-delay: 300ms; }
.fade-up.visible .faq-item:nth-child(8)  { animation-delay: 350ms; }
.fade-up.visible .faq-item:nth-child(9)  { animation-delay: 400ms; }
.fade-up.visible .faq-item:nth-child(10) { animation-delay: 450ms; }
.fade-up.visible .faq-item:nth-child(11) { animation-delay: 500ms; }
.fade-up.visible .faq-item:nth-child(12) { animation-delay: 550ms; }
.fade-up.visible .faq-item:nth-child(13) { animation-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .fade-up .faq-item { opacity: 1; animation: none; }
}

/* ── 4. ABOUT CTA + SERVICES CTA — ensure wrapping div is transparent ─ */
/* The previous session's #about-cta, #services-cta rules already set
   bone background. This ensures the inner div wrapper (if present) is
   also transparent, and the phone number link is always visible. */
#about-cta > div,
#services-cta > div {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: var(--max-w) !important;
  border-radius: 0 !important;
}

/* ── 5. ABOUT CTA — readable paragraph line-height ─────────────────── */
#about-cta p {
  line-height: 1.55;
}

/* ── 6. FAQ CTA — bone background match ────────────────────────────── */
/* The FAQ page uses #home-cta for its CTA — override to bone style */
#faq + #home-cta,
body:has(#faq) #home-cta {
  background: var(--bone) !important;
}
body:has(#faq) #home-cta > div {
  background: var(--white);
  border-radius: 20px;
  padding: 56px 48px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(10,22,40,0.08);
  border: 1px solid var(--navy-06);
}
body:has(#faq) #home-cta h2 {
  color: var(--navy);
}
body:has(#faq) #home-cta p {
  color: var(--navy-80);
}
body:has(#faq) #home-cta .btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
body:has(#faq) #home-cta .btn-secondary {
  color: var(--navy);
  border-color: var(--navy-40);
}
@media (max-width: 640px) {
  body:has(#faq) #home-cta > div {
    padding: 40px 24px;
    border-radius: 16px;
  }
}

/* ── 7. FAQ INLINE LISTS + CLEANUP CLASSES ──────────────────────────── */
.faq-inline-list {
  padding-left: 20px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}
.faq-note {
  margin-top: 12px;
}
.faq-phone-link {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-phone-link:hover {
  color: var(--orange-dk);
}

/* ── PREMIUM CTA + MICRO-ANIMATION UTILITIES ──────────────────────────
   Reusable, progressive-enhancement classes (used by the Contact CTA and
   anywhere a little life helps). All motion is reduced-motion gated below. */

/* Big hero CTA button (Ember fill, white text — primary CTA) */
.cta-mega {
  font-size: 1.125rem;
  padding: 20px 44px;
  min-height: 64px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--white);
  border: 2px solid var(--orange);
  box-shadow: var(--shadow-orange);
  letter-spacing: 0.01em;
}
.cta-mega:hover {
  background: var(--orange-dk);
  color: var(--white);
  border-color: var(--orange-dk);
  box-shadow: 0 16px 40px rgba(255,90,31,0.35);
  transform: translateY(-3px) scale(1.02);
}
.cta-mega:active { transform: translateY(0) scale(1); }
.cta-mega .cta-arrow { transition: transform var(--t); }
.cta-mega:hover .cta-arrow { transform: translateX(4px); }

/* Generic hover-lift (cards, links, smaller buttons) */
.hover-lift { transition: transform var(--t), box-shadow var(--t); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Floating decor — gentle vertical bob */
.wmic-float { animation: wmic-float-bob 6s ease-in-out infinite; will-change: transform; }
.wmic-float--slow { animation-duration: 9s; }
.wmic-float--delay { animation-delay: -3s; }
@keyframes wmic-float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Sparkles — soft twinkle (scale + opacity) */
.wmic-sparkle {
  position: absolute;
  color: var(--orange);
  opacity: 0.0;
  animation: wmic-twinkle 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmic-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 0.9; transform: scale(1) rotate(15deg); }
}

/* Stage for the Contact CTA — anchors the floating sparkles/boxes */
.cta-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 0 8px;
}
.cta-stage .cta-decor {
  position: absolute;
  inset: -10px 0 0 0;
  pointer-events: none;
  z-index: 0;
}
.cta-stage > *:not(.cta-decor) { position: relative; z-index: 1; }
.cta-note {
  font-size: 0.9375rem;
  color: var(--navy-60);
  text-align: center;
  max-width: 420px;
}
.cta-note strong { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .wmic-float, .wmic-sparkle { animation: none; }
  .wmic-sparkle { opacity: 0.5; }
  .cta-mega:hover { transform: none; }
}

/* ============================================================
   PREMIUM ACCENT — Antique Gold #C9A961 is reserved for premium-only
   touches (hero underline, one "popular" border, hairline dividers, the
   single rating star, the FREE-badge shimmer). It is NEVER used for buttons,
   CTAs, prices, icons, stats, step numbers, the announcement bar, map pins,
   or the booking form — those are all Ember Orange. Do not reintroduce yellow.
============================================================ */

/* One-time gold shimmer — ONLY the add-ons "FREE" badge */
@media (prefers-reduced-motion: no-preference) {
  .free-badge.shimmer {
    background: linear-gradient(100deg, var(--gold) 30%, #F4E4BC 50%, var(--gold) 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: free-shimmer 2.4s linear 1;
  }
  @keyframes free-shimmer { to { background-position: 200% 0; } }
}