/* =====================================================================
   S.H.M Moving Services — styles.css
   Order: tokens → reset/base → typography → components → sections → responsive
   Rule: never write a raw hex value inside a component. Use the tokens.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-900: #06282B;   /* darkest — footer, overlays */
  --navy-700: #0F7476;   /* PRIMARY brand navy — headings, header bar */
  --navy-500: #14807F;   /* links, hover states on dark */
  --navy-100: #DCEFEE;   /* tinted section backgrounds */

  /* Pulled from the logo artwork: the royal blue of the S.H.M shape and the teal
     the logo sits on. Using all three stops the page reading as one flat navy. */
  --royal-600: #2A3F94;
  --teal-700:  #0F7476;  /* 5.49:1 with white text */
  --teal-100:  #DCEFEE;
  --amber-300: #F0C860;  /* icons on dark, 3.58:1 on teal */

  /* Brief specified #C25F06 as "4.6:1 with white text". Measured, it is only 4.26:1 — under
     the 4.5 minimum the brief itself requires. Darkened to #AD5504, which measures 5.15:1
     with white text and 4.79:1 as eyebrow text on --surface-2. Do not lighten it back. */
  --orange-cta: #AD5504; /* button backgrounds + small orange text */
  --orange-500: #E8730C; /* large non-text accents ONLY (bars, big icons, underlines) */
  --orange-100: #FDF0E3; /* tinted highlight blocks */
  --yellow-500: #DFAF34; /* accent chips/badges — ALWAYS with --ink text, never white */

  /* Neutrals */
  --ink:       #14202E;
  --ink-muted: #4A5A6E;
  --surface:   #FFFFFF;
  --surface-2: #F4F7FB;
  --border:    #DCE4EF;

  /* Semantic */
  --success: #1B7A4B;
  --danger:  #B3261E;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;

  /* Elevation — three levels only */
  --sh-1: 0 1px 2px rgba(15,37,73,.06), 0 1px 3px rgba(15,37,73,.08);
  --sh-2: 0 4px 12px rgba(15,37,73,.08);
  --sh-3: 0 12px 32px rgba(15,37,73,.14);

  /* Fonts */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --enter: 180ms ease-out;
  --exit: 120ms ease-in;

  /* Layout */
  --container: 1120px;
  --gutter: 20px;
  --call-bar-h: 80px; /* measured bar is 77px tall; body reserves this much so the footer clears it */
}

/* ---------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  /* room for the sticky call bar so the footer is never hidden behind it */
  padding-bottom: calc(var(--call-bar-h) + env(safe-area-inset-bottom));
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--navy-700); text-underline-offset: 3px; }
a:hover { color: var(--navy-500); }

h1, h2, h3 { font-family: var(--font-head); margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

/* Focus ring — mandatory, never removed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.section-navy a:focus-visible,
.section-deep a:focus-visible,
.section-deep input:focus-visible,
.hero a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--yellow-500);
}

.tnum { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--navy-700);
  padding: 12px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 720px; }

/* ---------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------- */
h1 {
  font-weight: 800;
  font-size: clamp(32px, 7vw, 52px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
h2 {
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
h3 {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--orange-cta);
  margin-bottom: 12px;
}
.eyebrow-on-dark { color: var(--yellow-500); }

.section-intro {
  color: var(--ink-muted);
  font-size: 19px;
  line-height: 1.55;
  margin-top: 16px;
}
.section-navy .section-intro,
.section-deep .section-intro { color: var(--navy-100); }

.section-head { margin-bottom: 32px; max-width: 720px; }
.section-surface .section-head,
.section-alt .section-head { margin-inline: auto; text-align: center; }
.section-deep .section-head { margin-inline: auto; text-align: center; }

.section-closing {
  margin-top: 32px;
  color: var(--ink-muted);
  text-align: center;
}
/* inline links inside these lines still need a 48px tap target */
.section-closing a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  vertical-align: middle;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   4. ICONS
   --------------------------------------------------------------- */
.icon { flex: none; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }

/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--enter), color var(--enter),
              border-color var(--enter), transform var(--exit), box-shadow var(--enter);
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.btn-block { width: 100%; }
.btn-compact { min-height: 48px; padding: 10px 18px; font-size: 16px; }

.btn-primary { background: var(--orange-cta); color: var(--surface); box-shadow: var(--sh-1); }
.btn-primary:hover { background: #A85105; color: var(--surface); }

.btn-navy { background: var(--navy-700); color: var(--surface); }
.btn-navy:hover { background: var(--navy-900); color: var(--surface); }

.btn-ghost-light { background: transparent; color: var(--surface); border-color: var(--surface); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: var(--surface); }

.btn-outline { background: var(--surface); color: var(--navy-700); border-color: var(--border); }
.btn-outline:hover { background: var(--navy-100); color: var(--navy-700); border-color: var(--navy-500); }

/* ---------------------------------------------------------------
   6. HEADER
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-logo { display: flex; align-items: center; min-height: 48px; }
.header-logo img { width: auto; }
/* emblem only on small phones, full lockup from 420px up */
.header-logo .logo-full { display: none; height: 40px; }
.header-logo .logo-mark { display: block; height: 44px; }
@media (min-width: 420px) {
  .header-logo .logo-full { display: block; }
  .header-logo .logo-mark { display: none; }
}

.header-nav { display: none; gap: 8px; }
.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--enter), color var(--enter);
}
.header-nav a:hover { background: var(--navy-100); color: var(--navy-700); }

/* ---------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* deep gradient with the light source top-right, so the hero has depth
     instead of sitting as one flat block of navy */
  background: radial-gradient(120% 120% at 80% 8%, #1E3F86 0%, #0A1428 55%);
  color: var(--surface);
  padding: 40px 0 64px;
}
/* warm bloom behind the cards */
.hero-glow {
  position: absolute;
  right: -140px; top: -160px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,115,12,.34) 0%, rgba(194,95,6,.16) 50%, transparent 72%);
  pointer-events: none;
}
/* faint dot field, stops the gradient from banding */
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { color: var(--surface); }
.h1-accent { color: var(--yellow-500); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--surface);
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

.hero-sub {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.55;
  color: #C3D2EA;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
/* the primary button glows against the dark hero */
.hero .btn-primary { box-shadow: 0 10px 30px rgba(232, 115, 12, .34); }
.hero .btn-ghost-light {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.mini-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.mini-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #C3D2EA;
}
.mini-steps .icon { color: var(--amber-300); }

.hero-note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #A9BBD8;
}

/* ---- moving-day cards floating over a watermark of the logo ---- */
.hero-stage {
  position: relative;
  margin-top: 36px;
  padding: 8px 0;
}
.stage-mark {
  position: absolute;
  right: -8%;
  top: 50%;
  width: 86%;
  height: auto;
  transform: translateY(-50%);
  opacity: .17;
  pointer-events: none;
}
.fcards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(10, 22, 48, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 40px rgba(3, 8, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* slight zigzag so they read as loose, floating cards */
.fc-1, .fc-3 { margin-right: 6%; }
.fc-2 { margin-left: 6%; }

.fc-time {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px; height: 46px;
  border-radius: 12px;
  background: rgba(46, 85, 153, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  color: var(--surface);
}
.fc-time small { font-size: 9px; font-weight: 600; letter-spacing: .06em; color: #BFD0EC; margin-top: 2px; }

.fc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-body strong { font-size: 15px; line-height: 1.3; color: var(--surface); font-weight: 600; }
.fc-body span { font-size: 13px; line-height: 1.4; color: #B6C6E0; }

.fc-done {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(52, 211, 153, .16);
  border: 1px solid rgba(52, 211, 153, .34);
  color: #7BEFC3;
  font-size: 12px;
  font-weight: 600;
}
.fc-done .icon { width: 14px; height: 14px; }

/* the cards land one after another */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.js .fcard { opacity: 0; animation: cardIn 280ms ease-out forwards; }
.js .fc-1 { animation-delay: 300ms; }
.js .fc-2 { animation-delay: 500ms; }
.js .fc-3 { animation-delay: 700ms; }

/* ---------------------------------------------------------------
   8. TRUST STRIP
   --------------------------------------------------------------- */
.trust {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
}
.trust-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.trust-grid .icon { color: var(--navy-700); }

/* ---------------------------------------------------------------
   9. SECTION SHELLS
   --------------------------------------------------------------- */
/* the 64px sticky header would otherwise sit over the top of a jumped-to section */
section[id] { scroll-margin-top: 80px; }

.section { padding: 56px 0; }
.section-surface { background: var(--surface); }
.section-alt { background: var(--surface-2); }
/* the promises block is teal, so the page moves navy -> white -> teal -> navy
   instead of repeating the same blue */
.section-navy { background: var(--teal-700); color: var(--surface); }
.section-navy .eyebrow { color: var(--teal-100); }
.section-navy .section-intro { color: var(--teal-100); }
.section-deep { background: var(--navy-900); color: var(--surface); }
.section-navy h2, .section-deep h2 { color: var(--surface); }

/* ---------------------------------------------------------------
   10. CARDS
   --------------------------------------------------------------- */
.cards-3, .cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 24px;
  transition: transform var(--enter), box-shadow var(--enter), border-color var(--enter);
}
/* lift is decoration only, so it is gated to devices that really hover */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-2);
    border-color: var(--royal-600);
  }
}
.card h3 { margin-bottom: 8px; color: var(--navy-700); }
.card p { color: var(--ink-muted); }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: var(--r-pill);
  background: var(--orange-100);
  color: var(--orange-cta);
}
.badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--yellow-500);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   11. PRICING
   --------------------------------------------------------------- */
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--orange-500);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 24px;
}
.price-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.price-row:last-child { border-bottom: 0; }
.price-row dt { font-weight: 600; color: var(--ink); }
.price-row dd { color: var(--ink); }
.price-row strong { font-size: 19px; color: var(--navy-700); }
.price-meta { display: block; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.price-footnote { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.highlight-box {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--orange-100);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   12. PROMISES
   --------------------------------------------------------------- */
.promises { display: flex; flex-direction: column; gap: 24px; }
.promises li { display: flex; gap: 16px; align-items: flex-start; }
.promise-check { color: var(--amber-300); margin-top: 2px; }
.promise-title { font-weight: 600; color: var(--surface); }
.promise-body { margin-top: 4px; color: var(--teal-100); }

/* ---------------------------------------------------------------
   13. HOW IT WORKS
   --------------------------------------------------------------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  padding-left: 64px;
}
.steps::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.step { position: relative; }
.step h3 { color: var(--navy-700); margin-bottom: 4px; }
.step p { color: var(--ink-muted); }
.step-num {
  position: absolute;
  left: -64px;
  top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--orange-cta);
  color: var(--surface);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
}

/* ---------------------------------------------------------------
   14. GALLERY + EMPTY STATES
   --------------------------------------------------------------- */
.gallery-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.gallery-item { margin: 0; scroll-snap-align: start; }
.gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.gallery-item figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.empty-state {
  max-width: 640px;
  margin-inline: auto;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-muted);
  text-align: center;
}
.section-alt .empty-state { background: var(--surface); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 8px;
  font-weight: 600;
  color: var(--navy-700);
}
.link-arrow:hover { color: var(--navy-500); }

/* ---------------------------------------------------------------
   15. SERVICE AREA CHIPS
   --------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.chips li {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--navy-100);
  color: var(--navy-700);
  font-weight: 500;
}

/* ---------------------------------------------------------------
   16. QUOTE FORM
   --------------------------------------------------------------- */
.section-deep { padding-bottom: 96px; } /* keeps the submit button clear of the call bar */

.form-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 24px;
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.req { font-weight: 400; font-size: 14px; color: var(--ink-muted); }
.field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  transition: border-color var(--enter), box-shadow var(--enter);
}
.field input::placeholder { color: var(--ink-muted); }
.field input:hover { border-color: var(--navy-500); }
.field input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }

.help { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger);
  font-weight: 500;
}
.error[hidden] { display: none; }
.form-error { margin-top: 16px; }

.honeypot {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#submit-btn { margin-top: 24px; }
.form-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); text-align: center; }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--surface);
  border-radius: var(--r-pill);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { text-align: center; padding: 16px 0 8px; }
.form-success[hidden] { display: none; }
.form-success .success-icon { color: var(--success); margin: 0 auto 16px; }
.form-success h3 { color: var(--navy-700); margin-bottom: 8px; }
.form-success p { color: var(--ink-muted); }

.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--ink-muted);
  font-size: 14px;
}
.form-divider::before, .form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.form-alt-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------
   17. FAQ
   --------------------------------------------------------------- */
.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq details { border-bottom: 1px solid var(--border); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--navy-700);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--enter);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--surface-2); }
.faq .chev { color: var(--ink-muted); transition: transform var(--enter); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details > p {
  padding: 0 16px 16px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: var(--navy-100);
  padding: 48px 0 24px;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
/* the logo artwork is navy on white, so on the navy footer it sits on a white plaque */
.footer-logo {
  height: 34px;
  width: auto;
  margin-bottom: 12px;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  box-sizing: content-box;
}
/* the tagline from the logo lockup */
.brand-tagline {
  font-style: italic;
  font-weight: 500;
  color: var(--yellow-500);
  margin-bottom: 12px;
}
.footer-col p { color: var(--navy-100); margin-bottom: 8px; }
.footer-h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--surface);
  margin-bottom: 8px;
}
.footer-links { display: flex; flex-direction: column; }
.footer-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--navy-100);
  text-decoration: underline;
}
.footer-links a:hover { color: var(--yellow-500); }
.footer-meta { font-size: 14px; line-height: 1.5; color: var(--navy-100); }
.footer-bottom {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(231,237,247,.2);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   19. STICKY CALL BAR
   --------------------------------------------------------------- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: 8px;
  padding: 12px var(--gutter);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--sh-3);
  transform: translateY(110%);
  opacity: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.call-bar[hidden] { display: flex; visibility: hidden; }
.call-bar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
.call-bar .btn { flex: 1 1 50%; min-height: 52px; padding: 12px 8px; }

/* ---------------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------------- */
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; flex: 0 1 auto; }
  .form-alt-actions { flex-direction: row; }
  .price-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; }
  .price-row dd { text-align: right; }
  .price-meta { display: inline-block; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .section { padding: 96px 0; }
  .section-deep { padding-bottom: 96px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .cards-grid { gap: 24px; }
  .price-card { padding: 32px; }
  .form-card { padding: 32px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer { padding: 64px 0 24px; }
  .hero { padding: 64px 0 96px; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-row { grid-auto-columns: 60%; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }         /* call bar is mobile-only */
  .call-bar { display: none; }
  .call-bar[hidden] { display: none; }
  .header-nav { display: flex; }
  .hero-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 48px;
  }
  .hero-stage { margin-top: 0; }
  .steps {
    flex-direction: row;
    gap: 24px;
    padding-left: 0;
    padding-top: 64px;
  }
  .steps::before {
    left: 24px; right: 24px; top: 24px;
    bottom: auto;
    width: auto; height: 2px;
  }
  .step { flex: 1; }
  .step-num { left: 0; top: -64px; }
}

@media (min-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
  }
}

/* ---------------------------------------------------------------
   21. SCROLL REVEAL
   Cards fade and lift in as they enter view. Guarded behind .js so that
   with JavaScript off nothing is ever hidden. Transform + opacity only.
   --------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 280ms ease-out, transform 280ms ease-out;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   22. REDUCED MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* the global rule below kills the animation, so these must not stay at opacity 0 */
  .js .reveal { opacity: 1; transform: none; }
  .js .fcard { opacity: 1; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   23. BRAND PALETTE — teal #0F7476 + mustard #DFAF34
   Contrast notes (measured, not eyeballed):
     white on teal .............. 5.56:1
     ink on mustard ............. 7.88:1
     teal text on white ......... 5.56:1
     mustard on teal ............ 2.73:1  -> NEVER used for text
   ===================================================================== */
:root {
  --mustard:     #DFAF34;
  --mustard-100: #FBF1D9;
  --mustard-300: #F0C860;
}

/* ---- top bar gets its own colour ---- */
.site-header {
  background: var(--teal-700);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
/* the logo artwork is navy-on-white, so it sits on a white plate */
.header-logo img {
  background: var(--surface);
  padding: 5px 9px;
  border-radius: var(--r-sm);
}
.header-nav a { color: #E6F5F4; }
.header-nav a:hover { background: rgba(255, 255, 255, .14); color: var(--surface); }
.site-header .btn-primary { box-shadow: 0 6px 18px rgba(6, 40, 43, .28); }

/* ---- primary action is mustard with dark text ---- */
.btn-primary { background: var(--mustard); color: var(--ink); }
.btn-primary:hover { background: #CE9E24; color: var(--ink); }
.hero .btn-primary { box-shadow: 0 10px 30px rgba(223, 175, 52, .3); }

/* ---- teal hero ---- */
.hero { background: radial-gradient(120% 120% at 80% 8%, #14807F 0%, #06282B 55%); }
.hero-glow {
  background: radial-gradient(circle, rgba(223,175,52,.3) 0%, rgba(223,175,52,.12) 50%, transparent 72%);
}
.h1-accent { color: var(--mustard); }
.hero-sub, .mini-steps li { color: #BFE0DE; }
.hero-note { color: #9FCBC9; }
.mini-steps .icon { color: var(--mustard-300); }

/* ---- accents across the page ---- */
.eyebrow { color: var(--teal-700); }
.card-icon { background: var(--mustard-100); color: var(--teal-700); }
.step-num { background: var(--teal-700); color: var(--surface); }
.price-card { border-top-color: var(--mustard); }
.highlight-box { background: var(--mustard-100); }
.promise-check { color: var(--mustard-300); }

/* ---- moving-day cards: an icon on each side ---- */
.fcard { background: rgba(6, 40, 43, .62); }
.fc-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(223, 175, 52, .16);
  border: 1px solid rgba(223, 175, 52, .38);
  color: var(--mustard-300);
}
.fc-time {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--mustard);
}

/* left icon drifts, then flips over every few seconds */
@keyframes fcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fcFlip  { 0%, 70%, 100% { transform: rotateY(0deg); } 85% { transform: rotateY(180deg); } }
.fc-icon { animation: fcFloat 3.6s ease-in-out infinite; }
.fc-icon .icon { animation: fcFlip 6s ease-in-out infinite; }
.fc-2 .fc-icon { animation-delay: .45s; }
.fc-3 .fc-icon { animation-delay: .9s; }
.fc-2 .fc-icon .icon { animation-delay: .5s; }
.fc-3 .fc-icon .icon { animation-delay: 1s; }

/* the time is a small label above the title now, not the old boxed badge */
.fc-time {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--mustard);
}

/* ---- contrast corrections after the palette swap ----
   The hero gradient's bright stop was #14807F, where white lands at only 4.75:1
   and tinted text failed outright. Darkened so the whole hero clears AA. */
.hero { background: radial-gradient(120% 120% at 80% 8%, #0E5F60 0%, #06282B 55%); }
.hero-note { color: #BFE0DE; }

/* .eyebrow above sets teal, which beat .eyebrow-on-dark on source order and made
   the eyebrows on dark sections teal-on-teal. Re-assert the dark-section colour. */
.eyebrow-on-dark { color: var(--mustard); }

/* the "no charge" row is the real differentiator, so it gets picked out */
.price-row-free {
  background: var(--mustard-100);
  border-radius: var(--r-sm);
  margin: 4px -12px;
  padding-inline: 12px;
}
.price-row-free strong { color: var(--success); }

/* ---- logo now has a transparent background, so no white plate ---- */
.header-logo img {
  background: none;
  padding: 0;
  border-radius: 0;
  height: 40px;
  width: auto;
}
.header-logo .logo-full,
.header-logo .logo-mark { display: block; }
@media (min-width: 900px) { .header-logo img { height: 46px; } }

.footer-logo {
  height: 46px;
  width: auto;
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 12px;
}

/* =====================================================================
   24. BLUE MOVING-DAY CARDS + THE TRUCK BEHIND THEM
   White on #1B4F9B measures 7.96:1, so the card text is comfortably clear.
   ===================================================================== */
:root { --brand-blue: #1B4F9B; }

.fcard {
  background: rgba(27, 79, 155, .72);
  border-color: rgba(255, 255, 255, .22);
}
/* mustard drops to 3.84:1 on this blue, so the time label goes lighter */
.fc-time { color: #FFD97A; }
.fc-body span { color: #C9D8EE; }
.fc-icon {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .32);
  color: #FFD97A;
}
/* solid green rather than a tinted pill: on blue the tint fell to 3.68:1 */
.fc-done {
  background: var(--success);
  border-color: transparent;
  color: var(--surface);
}

/* the truck drives along the bottom of the stage, clipped to its own strip
   so it can never bleed over the headline column */
.stage-road {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
}
.stage-truck {
  position: absolute;
  left: -190px;
  bottom: 6px;
  width: 168px;
  height: auto;
  color: rgba(255, 255, 255, .16);
  animation: driveBy 18s linear infinite;
}
@keyframes driveBy {
  from { transform: translateX(0); }
  to   { transform: translateX(780px); }
}
@media (prefers-reduced-motion: reduce) {
  /* the global rule stops the animation, so park it somewhere visible */
  .stage-truck { transform: translateX(240px); }
}

/* leave a strip of road below the last card so the truck is actually seen */
.hero-stage { padding-bottom: 86px; }
.stage-road { height: 86px; }
.stage-truck { color: rgba(255, 255, 255, .22); bottom: 10px; }

/* =====================================================================
   25. PHOTO HERO
   The scrim is sized for the worst case (a bright photo). At .88 over pure
   white, white text still measures 5.66:1, so the copy is safe whatever
   photo gets dropped in.
   ===================================================================== */
.hero { padding: 72px 0 84px; }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,40,43,.88) 0%, rgba(6,40,43,.86) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }
.hero-copy { max-width: 640px; }
.hero-actions .btn { width: 100%; }

/* over a photo these two drop below AA at their previous values */
.hero-sub { color: #EAF7F6; }
.h1-accent { color: #FFD97A; }

@media (min-width: 640px) {
  .hero-actions .btn { width: auto; }
}
@media (min-width: 900px) {
  /* darkest where the text sits, clearing towards the right so the photo shows */
  .hero-scrim {
    background: linear-gradient(90deg, rgba(6,40,43,.93) 0%, rgba(6,40,43,.84) 46%, rgba(6,40,43,.48) 100%);
  }
}

/* =====================================================================
   26. PHOTO CARDS (the three "what makes us different" cards)
   Backgrounds come from assets/cards/*.jpg. If a file is missing the card
   simply falls back to the brand gradient, so nothing ever looks broken.
   The scrim is sized for a bright photo: white text stays at 7.9:1.
   ===================================================================== */
.card-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  border: 0;
  background-color: var(--teal-700);
  background-image: linear-gradient(135deg, #14807F, #06282B);
  background-size: cover;
  background-position: center;
  box-shadow: var(--sh-2);
}
.card-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6,40,43,.50) 0%,
    rgba(6,40,43,.88) 52%,
    rgba(6,40,43,.95) 100%);
}
.card-photo > * { position: relative; z-index: 1; }
.card-photo h3 { color: var(--surface); }
.card-photo p  { color: #EAF7F6; }
.card-photo .card-icon {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--mustard-300);
  margin-bottom: auto;
}

/* TODO (owner): drop your photos in as these three files */
.card-doc      { background-image: url("assets/cards/documentation.jpg"), linear-gradient(135deg, #14807F, #06282B); }
.card-assembly { background-image: url("assets/cards/assembly.jpg"),      linear-gradient(135deg, #14807F, #06282B); }
.card-setup    { background-image: url("assets/cards/setup.jpg"),         linear-gradient(135deg, #14807F, #06282B); }

@media (hover: hover) {
  .card-photo:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
}

/* ---- tuning now that the real photos are in ----
   The truck's painted panel carries its own "S.H.M MOVING SERVICES / Move in and
   settle the same day" lettering. Framing right of it keeps the headline off that
   text and puts the crew behind the copy instead. */
.hero-photo { object-position: 70% center; }

/* the card photos were being drowned: show them up top, protect the text below */
.card-photo { min-height: 340px; }
.card-photo::before {
  background: linear-gradient(180deg,
    rgba(6,40,43,.26) 0%,
    rgba(6,40,43,.52) 36%,
    rgba(6,40,43,.90) 62%,
    rgba(6,40,43,.96) 100%);
}

/* On desktop the photo fills the width exactly, so object-position cannot slide the
   painted panel out of the way. Put the copy in the right column instead: the truck's
   own branding stays visible on the left and the headline no longer sits on top of it. */
@media (min-width: 900px) {
  .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .hero-copy { grid-column: 2; }
  .hero-scrim {
    background: linear-gradient(90deg,
      rgba(6,40,43,.40) 0%,
      rgba(6,40,43,.78) 44%,
      rgba(6,40,43,.93) 100%);
  }
}

/* Scrim tuned to the actual hero photo, not a hypothetical bright one.
   Measured on assets/hero-crew.webp: median luminance .024, brightest pixel .68.
   At .80 alpha, white text clears 5.25:1 even against that brightest pixel and the
   photo stays visible. NOTE: if the hero photo is ever swapped for a brighter one,
   re-measure — a pale photo needs this back around .88. */
.hero-scrim {
  background: linear-gradient(180deg, rgba(6,40,43,.80) 0%, rgba(6,40,43,.78) 100%);
}

/* Must come after the flat mobile scrim above: media queries add no specificity,
   so source order decides. Desktop keeps the horizontal fade that lets the truck's
   painted panel show on the left while protecting the copy on the right. */
@media (min-width: 900px) {
  .hero-scrim {
    background: linear-gradient(90deg,
      rgba(6,40,43,.28) 0%,
      rgba(6,40,43,.55) 32%,
      rgba(6,40,43,.86) 50%,
      rgba(6,40,43,.92) 100%);
  }
}