/* =====================================================================
   Seven Eagles Relocation - Shared component styles
   ---------------------------------------------------------------------
   ALL design tokens (colors, fonts, spacing) live in theme.css.
   This file only defines layout, components, and behaviour - never raw
   colour or font values. To restyle the whole site, edit theme.css.
   ===================================================================== */

/* =====================================================================
   Reset + Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, select, textarea, button { font: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* Accessible visually-hidden helper */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* =====================================================================
   Typography utilities
   ===================================================================== */
.t-display {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.t-h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.t-body-lg { font-size: 18px; line-height: 1.6; }
.t-body { font-size: 16px; line-height: 1.5; }
.t-small { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.t-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.t-muted { color: var(--color-text-muted); }
.t-cta { color: var(--color-accent-on-light); }

@media (max-width: 768px) {
  .t-display { font-size: 32px; line-height: 1.2; }
  .t-h1 { font-size: 26px; }
  .t-h2 { font-size: 20px; }
}

/* =====================================================================
   Layout utilities
   ===================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}
@media (max-width: 768px) {
  .container { padding: 0 var(--margin-mobile); }
}

.section { padding: var(--section-padding) 0; }
.section-sm { padding: 48px 0; }
@media (max-width: 768px) {
  .section { padding: 48px 0; }
}

.stack-xs > * + * { margin-top: var(--stack-xs); }
.stack-sm > * + * { margin-top: var(--stack-sm); }
.stack-md > * + * { margin-top: var(--stack-md); }
.stack-lg > * + * { margin-top: var(--stack-lg); }
.stack-xl > * + * { margin-top: var(--stack-xl); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--stack-sm); }
.gap-md { gap: var(--stack-md); }
.gap-lg { gap: var(--stack-lg); }

.grid { display: grid; gap: var(--stack-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast);
  min-height: 48px; /* Touch target */
}
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--color-primary-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Primary CTA: editorial ghost-button with arrow. Used as nav CTA and hero secondary. */
.btn-cta {
  background: transparent;
  color: var(--color-primary);
  padding: 12px 22px 12px 24px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* keep the ::before fill (z-index:-1) inside the button so it never slips behind a white card, which left hover text white-on-white */
  transition: color var(--transition-med), border-color var(--transition-med);
}
.btn-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  z-index: -1;
  border-radius: inherit;
}
.btn-cta::after {
  content: "\2192";  /* Unicode rightwards arrow */
  display: inline-block;
  margin-left: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--transition-med);
}
.btn-cta:hover {
  color: white;
  border-color: var(--color-primary);
  transform: none;
  box-shadow: none;
}
.btn-cta:hover::before { transform: scaleX(1); }
.btn-cta:hover::after { transform: translateX(4px); }

/* On dark backgrounds (hero) - inverted ghost with green accent on hover */
.home-hero .btn-cta,
.cta-banner .btn-cta {
  color: white;
  border-color: rgba(255,255,255,0.65);
}
.home-hero .btn-cta::before,
.cta-banner .btn-cta::before { background: var(--color-accent); }
.home-hero .btn-cta:hover,
.cta-banner .btn-cta:hover { color: white; border-color: var(--color-accent); }

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-on-dark {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn-on-dark:hover {
  background: white;
  color: var(--color-primary);
  border-color: white;
}

.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 14px; min-height: 40px; }

/* =====================================================================
   Cards
   ===================================================================== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--stack-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.card-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med);
}
.card-hover:hover .card-image img { transform: scale(1.04); }

/* =====================================================================
   Forms
   ===================================================================== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stack-md);
  border: 0;
  padding: 0;
  margin: 0 0 var(--stack-md);
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

.quote-form, .contact-form, .contact-info {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--stack-lg);
  box-shadow: var(--shadow-card);
}
/* Contact section: the form and the info sit in matching cards. Make them
   equal height so their tops AND bottoms align (a symmetric pair). The
   message field absorbs the slack so the form card fills evenly. */
@media (min-width: 901px) {
  #contact .two-col > div { display: flex; flex-direction: column; }
  #contact .contact-form,
  #contact .contact-info { flex: 1; padding: clamp(14px, 2vh, 30px); }
  #contact .contact-form { display: flex; flex-direction: column; }
  #contact .contact-form label:last-of-type { flex: 1; display: flex; flex-direction: column; }
  #contact .contact-form label:last-of-type textarea { flex: 1; }
}

label {
  display: block;
  margin-bottom: var(--stack-md);
}

label > span,
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--stack-xs);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

textarea { resize: vertical; min-height: 88px; }

/* Only flag a field red AFTER the user has interacted with it (not on load).
   :user-invalid replaces the old :invalid + :placeholder-shown trick, which
   failed here because the inputs have no placeholder attribute. */
input:user-invalid:not(:focus),
textarea:user-invalid:not(:focus) {
  border-color: var(--color-error);
}

/* =====================================================================
   Site header  (premium layered design: top contact bar + main nav)
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 110;                 /* above the nav overlay so the close button stays clickable */
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border), 0 6px 24px rgba(var(--color-primary-rgb), 0.04);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  padding: 18px 0;
}

/* Logo lockup: eagle mark + wordmark together */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-header__logo img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.site-header__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.site-header__wordmark-main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}
.site-header__wordmark-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-on-light);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .site-header__wordmark-main { font-size: 16px; }
  .site-header__wordmark-sub { font-size: 10px; }
}
/* Right-side actions: persistent CTA + menu button */
.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--stack-md);
}
@media (max-width: 480px) { .site-header__quote { display: none; } }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.menu-btn:hover { border-color: var(--color-primary); }
.menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.menu-btn__bars span {
  display: block; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--transition-fast);
}
.menu-btn[aria-expanded="true"] .menu-btn__bars span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* =====================================================================
   Mobile sticky contact bar (phones only). Fixed to the bottom so Call,
   WhatsApp, and Quote are always one tap away. Hidden at 769px and up.
   ===================================================================== */
.mobile-actionbar { display: none; }
@media (max-width: 768px) {
  .mobile-actionbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 1px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--color-border);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(var(--color-primary-rgb), 0.10);
  }
  .mobile-actionbar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
  }
  .mobile-actionbar__icon { display: inline-flex; }
  .mobile-actionbar__icon svg { width: 18px; height: 18px; display: block; }
  .mobile-actionbar__item--wa { color: var(--color-accent-on-light); }
  .mobile-actionbar__item--quote {
    background: var(--color-primary);
    color: #fff;
  }
  /* Reserve space so the fixed bar never covers the footer's last line. */
  body { padding-bottom: 52px; }
}

/* =====================================================================
   Full-screen navigation overlay (Option B). Links stay in the DOM so
   crawlers and the footer fallback always reach them; visually hidden
   until the menu button opens it.
   ===================================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* below the 110 header so the close (X) stays on top */
  background: var(--color-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 14vh, 160px) 8vw clamp(40px, 8vh, 80px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  overflow: hidden auto;        /* clip the watermark wings horizontally, scroll tall menus vertically */
  transition: opacity var(--transition-med), transform var(--transition-med), visibility var(--transition-med);
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* Eagle "shadow of flight": a large, faint white silhouette of the real
   brand logo behind the menu. logo.png (the eagle) recolored to white via
   filter. Sits behind the menu content and never intercepts clicks. */
.nav-overlay::before {
  content: "";
  position: absolute;
  top: -22%;
  right: -18%;
  left: auto;
  width: min(150vw, 1500px);
  height: min(150vh, 1300px);
  background: url('/assets/logo.png') right top / contain no-repeat;
  filter: brightness(0) invert(1);   /* recolor the blue eagle to pure white */
  opacity: 0.05;
  /* soft diagonal dissolve so the silhouette melts into the panel (no hard
     sticker edge) and reads as a faint shadow of flight, not a stamp */
  -webkit-mask-image: linear-gradient(225deg, #000 18%, transparent 78%);
  mask-image: linear-gradient(225deg, #000 18%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
/* Keep menu content above the watermark */
.nav-overlay__nav,
.nav-overlay__foot {
  position: relative;
  z-index: 1;
}
.nav-overlay__list { list-style: none; }
.nav-overlay__item { margin: 0; }
.nav-overlay__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-editorial);
  font-size: clamp(36px, 6vw, 76px);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.nav-overlay__link:hover,
.nav-overlay__link[aria-current="page"] { color: var(--color-accent-on-dark); }
.nav-overlay__caret {
  width: 0; height: 0;
  border-left: 0.34em solid currentColor;
  border-top: 0.22em solid transparent;
  border-bottom: 0.22em solid transparent;
  transition: transform var(--transition-fast);
}
.nav-overlay__toggle[aria-expanded="true"] .nav-overlay__caret { transform: rotate(90deg); }
.nav-overlay__sub {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  padding-left: 2px;
  transition: max-height var(--transition-med);
}
.nav-overlay__toggle[aria-expanded="true"] + .nav-overlay__sub { max-height: 360px; }
.nav-overlay__sub a {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 21px);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 7px 0;
  transition: color var(--transition-fast);
}
.nav-overlay__sub a:hover { color: #fff; }
.nav-overlay__foot {
  margin-top: clamp(32px, 6vh, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stack-lg);
}
.nav-overlay__foot .btn-cta {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.nav-overlay__contact { display: flex; flex-direction: column; gap: 4px; }
.nav-overlay__contact a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 15px; }
.nav-overlay__contact a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .nav-overlay, .nav-overlay__sub { transition: none; }
}

/* =====================================================================
   Site footer
   ===================================================================== */
.site-footer {
  /* deeper blue than the CTA banner above it, so the two blue blocks read as
     two zones instead of merging; thin top rule crisps the seam */
  background: var(--color-primary-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-inverse);
  padding: clamp(48px, 8vh, 88px) 0 var(--stack-lg);
  position: relative;
  overflow: hidden;
}
.site-footer a { color: rgba(255,255,255,0.85); transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--color-accent); }

/* On desktop the footer is a full-screen closing chapter like the others:
   it fills the viewport and its three zones distribute top / center / bottom
   (nav up top, brand signature centered, fine print pinned to the bottom). */
@media (min-width: 901px) {
  .site-footer {
    min-height: calc(100vh - 84px);
    min-height: calc(100svh - 84px);
    display: flex;
    flex-direction: column;
  }
  .site-footer > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--stack-lg);
  }
}

/* ---- Zone 1: navigation, four equal columns (symmetric) ---- */
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stack-lg);
  align-items: start;
}
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--stack-xl) var(--stack-lg); } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin: 0 0 var(--stack-sm);
}
.site-footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 30ch;
}
.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin: 0 0 var(--stack-md);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col ul li { margin-bottom: var(--stack-sm); font-size: 14px; }
.site-footer__loc { margin-top: var(--stack-sm); font-size: 13px; color: rgba(255,255,255,0.72); }
.site-footer__loc span { opacity: 0.8; }

/* ---- Zone 2: brand signature, centered, with faint eagle watermark ---- */
.site-footer__sign {
  position: relative;
  text-align: center;
  margin-top: clamp(40px, 7vh, 80px);
  padding: clamp(36px, 6vh, 72px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.site-footer__sign::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(80%, 560px);
  height: 230%;
  background: url('/assets/logo.png') center / contain no-repeat;
  filter: brightness(0) invert(1);   /* recolor the eagle to white */
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 22%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 22%, transparent 72%);
  pointer-events: none;
}
.site-footer__wordmark {
  position: relative;
  font-family: var(--font-editorial);
  font-size: clamp(34px, 5.5vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: white;
  margin: 0;
}
.site-footer__wordmark .accent { color: var(--color-accent-on-dark); font-style: italic; }

/* ---- Zone 3: compliance credentials + legal fine print ---- */
.site-footer__fine { padding-top: var(--stack-lg); }
.site-footer__licenses {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 var(--stack-lg);
}
.site-footer__licenses > dl {
  margin: 0;
  text-align: center;
  padding: 4px clamp(16px, 2.6vw, 40px);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__licenses > dl:last-child { border-right: 0; }
@media (max-width: 600px) {
  .site-footer__licenses > dl { border-right: 0; padding: 6px 0; min-width: 48%; }
}
.site-footer__licenses dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin: 0 0 4px;
}
.site-footer__licenses dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.01em;
}
.site-footer__compliance-note {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 auto var(--stack-lg);
  max-width: 760px;
  text-align: center;
}
.site-footer__compliance-note a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__compliance-note a:hover { color: var(--color-accent); }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--stack-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--stack-md);
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer__legal-nav {
  display: flex;
  gap: var(--stack-md) calc(var(--stack-md) * 1.5);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__legal-nav a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__legal-nav a:hover { color: var(--color-accent); }

/* =====================================================================
   Hero sections (page-level)
   ===================================================================== */
.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-on-light);
  margin-bottom: var(--stack-md);
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.hero-title {
  font-family: var(--font-editorial);
  /* H1: editorial serif, larger than the H2 section titles (max 60px) so the
     page's primary heading clearly outranks the sections below it. */
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  max-width: 16ch;
  margin: 0 0 var(--stack-md);
  text-wrap: balance;   /* even line lengths on single-sentence titles */
}
/* Two-sentence hero titles: each sentence sits on its own line (forced via
   <br>). Smaller size + wider measure so a full sentence fits one line. */
.hero-title.hero-title--stack {
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.12;
  max-width: 38ch;
  text-wrap: pretty;
}

/* Quote hero: match the standard site hero scale (identical to the long-distance
   page) - title clamp(48px,6vw,88px), subtitle stays the base 22px. Keep each
   sentence on its own line (max-width:none lets sentence 1 sit on one line). */
body:has([data-quote-form]) .hero-title.hero-title--stack {
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.06;
  max-width: none;
}
@media (max-width: 768px) {
  body:has([data-quote-form]) .hero-title.hero-title--stack { font-size: 36px; }
}

.hero-subtitle {
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 0 var(--stack-lg);
}
.hero-actions { display: flex; gap: var(--stack-md); flex-wrap: wrap; }

@media (max-width: 768px) {
  .hero { padding: 56px 0 48px; }
  .hero-title { font-size: 36px; }
  .hero-subtitle { font-size: 17px; }
}

/* Dark hero variant (final CTA, etc.) */
.hero-dark {
  background: var(--color-primary);
  color: white;
}
.hero-dark .hero-title { color: white; }
.hero-dark .hero-subtitle { color: rgba(255,255,255,0.85); }

/* =====================================================================
   Marquee strip (replaces the dropped top-bar; sits right under hero)
   ===================================================================== */
.marquee {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
  padding: 16px 0;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 32px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.marquee__item-sep {
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex-shrink: 0;
}
.marquee__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.marquee__item a:hover { color: var(--color-accent); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* =====================================================================
   Trust strip (badges row)
   ===================================================================== */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stack-md);
  padding: var(--stack-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-sm);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.trust-badge svg { width: 24px; height: 24px; color: var(--color-secondary); }
@media (max-width: 768px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--stack-md); }
}

/* =====================================================================
   Service cards (4-grid on homepage)
   ===================================================================== */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--stack-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.service-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--stack-md);
}
.service-card__title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 var(--stack-sm);
  color: var(--color-primary);
}
.service-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--stack-md);
  flex: 1;
}
.service-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.service-card__link::after {
  content: "->";
  font-family: var(--font-body);
  transition: transform var(--transition-fast);
}
.service-card:hover .service-card__link::after { transform: translateX(4px); }

/* =====================================================================
   How-it-works (3-step strip)
   ===================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stack-lg);
}
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: var(--stack-md);
}
.step__title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 var(--stack-sm);
  color: var(--color-primary);
}
.step__desc { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }

/* =====================================================================
   Testimonials
   ===================================================================== */
.testimonial {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--stack-lg);
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.testimonial__stars { color: var(--color-accent-on-light); margin-bottom: var(--stack-sm); font-size: 18px; letter-spacing: 2px; }
.testimonial__quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--stack-md);
  flex: 1;
}
.testimonial__author { font-weight: 600; color: var(--color-primary); font-size: 14px; }
.testimonial__meta { font-size: 13px; color: var(--color-text-muted); }

/* =====================================================================
   FAQ accordion
   ===================================================================== */
.faq-list { max-width: 760px; margin: 0 auto; }
/* On desktop, split the 12-question list into two columns so the whole FAQ
   chapter fits one viewport. break-inside keeps each Q+A together. */
@media (min-width: 901px) {
  .faq-list { max-width: 1040px; columns: 2; column-gap: var(--stack-xl); }
  .faq-item { break-inside: avoid; }
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--stack-md);
  padding: var(--stack-md) 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: left;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-med);
  color: var(--color-secondary);
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__panel {
  padding: 0 0 var(--stack-lg);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 720px;
}

/* =====================================================================
   Routes / Areas served grid (Long Distance page)
   ===================================================================== */
.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stack-md);
}
@media (max-width: 1024px) { .routes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .routes-grid { grid-template-columns: 1fr; } }

.route-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--stack-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
}
.route-card__route {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary);
}
.route-card__time {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* =====================================================================
   Pricing block (asymmetric: numbers left, illustration right)
   ===================================================================== */
.pricing-block {
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
  padding: clamp(var(--stack-lg), 6vh, var(--stack-xl)) clamp(var(--stack-lg), 4vw, calc(var(--stack-xl) * 1.1));
  position: relative;
  overflow: hidden;
  /* unifying signature for every blue card: a hairline inner frame + a soft
     deep-blue gradient floor so the panel reads crafted, not flat */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.12) 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--stack-lg), 5vw, calc(var(--stack-xl) * 1.2));
  align-items: center;
}
/* Left: the story + CTA */
.pricing-block__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-md);
}
.pricing-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
}
.pricing-block__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-accent-on-dark);
}
.pricing-block__headline {
  font-family: var(--font-editorial);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: white;
  margin: 0;
}
/* Right: the number, as a clean right-aligned figure */
.pricing-block__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.pricing-block__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--stack-sm);
}
.pricing-block::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(61,170,95,0.25) 0%, rgba(61,170,95,0) 70%);
  pointer-events: none;
}
.pricing-block__price {
  font-family: var(--font-editorial);
  font-size: clamp(60px, 7vw, 96px);
  font-weight: 800;
  color: var(--color-accent-on-dark);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pricing-block__range {
  font-family: var(--font-editorial);
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 600;
  color: var(--color-accent-on-dark);
  opacity: 0.9;
}
.pricing-block__unit {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
  margin: var(--stack-sm) 0 0;
  max-width: 260px;
}
.pricing-block__anchor {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  letter-spacing: 0.05em;
  margin: 0;
}
/* Only inside the right-aligned figure does the struck price get a hairline
   above it (the "was" line under the rate). Elsewhere it's plain struck text. */
.pricing-block__figure .pricing-block__anchor {
  width: 100%;
  margin-top: var(--stack-md);
  padding-top: var(--stack-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pricing-block__note {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 460px;
}
/* The ghost CTA is dark-on-dark on the blue card - make it a solid white
   pill so it reads against the panel. */
.pricing-block .btn-cta {
  margin-top: var(--stack-xs);
  background: white;
  border-color: white;
  color: var(--color-primary);
}
.pricing-block .btn-cta:hover {
  background: var(--color-accent-on-dark);
  border-color: var(--color-accent-on-dark);
  color: var(--color-primary);
}
.pricing-block__sub {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: var(--stack-sm) 0 0;
}

/* Right side: stats / breakdown */
.pricing-block__stats {
  display: grid;
  gap: var(--stack-md);
}
.pricing-block__stat {
  padding: var(--stack-md);
  border-left: 2px solid var(--color-accent);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pricing-block__stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin: 0 0 4px;
}
.pricing-block__stat-value {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
}
.pricing-block__stat-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin: 4px 0 0;
}

@media (max-width: 900px) {
  .pricing-block { grid-template-columns: 1fr; gap: var(--stack-lg); padding: var(--stack-lg); }
  .pricing-block__figure { align-items: flex-start; text-align: left; }
  .pricing-block__price { justify-content: flex-start; }
}

/* Compact stacked variant for narrow sidebars (e.g. the quote page): a single
   vertical card, not the wide two-column figure. */
.pricing-block--stack {
  display: block;
  padding: clamp(24px, 3.4vh, 40px);
}
.pricing-block--stack .pricing-block__anchor {
  width: auto;
  border-top: 0;
  padding-top: 0;
  margin: 0 0 var(--stack-xs);
}
.pricing-block--stack .pricing-block__price {
  display: block;
  justify-content: flex-start;
  font-size: clamp(46px, 4.6vw, 66px);
  margin: 0;
}
.pricing-block--stack .pricing-block__range { font-size: 0.5em; margin-left: 6px; }
.pricing-block--stack .pricing-block__unit { margin: var(--stack-xs) 0 var(--stack-md); max-width: none; }
.pricing-block--stack .pricing-block__note { margin: 0; max-width: none; }

/* =====================================================================
   CTA banner section
   ===================================================================== */
.cta-banner {
  background: var(--color-primary);
  color: white;
  padding: var(--section-padding) 0;
  text-align: center;
}
.cta-banner h2 {
  font-family: var(--font-editorial);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.015em;
  margin: 0 0 var(--stack-md);
}
.cta-banner p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto var(--stack-lg);
}
@media (max-width: 768px) {
  .cta-banner h2 { font-size: 28px; }
  .cta-banner p { font-size: 16px; }
}

/* =====================================================================
   Section title helpers
   ===================================================================== */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-on-light);
  margin-bottom: var(--stack-sm);
}
.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
/* Centered variant keeps the line on left only (asymmetric editorial) */
.text-center .section-eyebrow { justify-content: center; }
.text-center .section-eyebrow::before { display: none; }

/* Editorial left-aligned section header (alternative to centered) */
.section-header-left {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--stack-lg);
  align-items: end;
  margin-bottom: var(--stack-xl);
}
.section-header-left .section-title { max-width: 720px; margin: 0; }
.section-header-left__action a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color var(--transition-fast);
}
.section-header-left__action a::after {
  content: "\2192";
  transition: transform var(--transition-med);
}
.section-header-left__action a:hover { color: var(--color-accent); }
.section-header-left__action a:hover::after { transform: translateX(4px); }
@media (max-width: 768px) {
  .section-header-left { grid-template-columns: 1fr; align-items: start; gap: var(--stack-md); }
}
.section-title {
  font-family: var(--font-editorial);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: 0 0 var(--stack-md);
  max-width: 640px;
}
.section-title.text-center { margin-left: auto; margin-right: auto; }
.section-lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 0 var(--stack-xl);
}
.section-lede.text-center { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  .section-title { font-size: 28px; }
  .section-lede { font-size: 16px; margin-bottom: var(--stack-lg); }
}

/* =====================================================================
   Two-column layout (Contact, Quote)
   ===================================================================== */
.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--stack-xl);
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--stack-lg); }
}

/* =====================================================================
   Map embed
   ===================================================================== */
.map-embed {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Fluid: the map shrinks on short screens and breathes on tall ones,
     scaling continuously with viewport height - no fixed breakpoints. */
  max-height: clamp(78px, 9vh, 190px);
  background: var(--color-surface-2);
  border: 0;
}

/* =====================================================================
   Utility colors / backgrounds
   ===================================================================== */
.bg-surface { background: var(--color-surface); }
.bg-surface-2 { background: var(--color-surface-2); }
.bg-primary { background: var(--color-primary); color: white; }

/* =====================================================================
   Homepage hero (full-width photo background, dark overlay, light text)
   ===================================================================== */
.home-hero {
  position: relative;
  isolation: isolate;
  /* Fill exactly the screen below the 84px sticky header, on every device.
     svh keeps it correct when mobile browser chrome shows/hides. */
  min-height: calc(100vh - 84px);
  min-height: calc(100svh - 84px);
  display: flex;
  align-items: center;           /* content vertically centered in the full-screen hero */
  padding: clamp(40px, 6vh, 88px) 0;
  color: white;
  overflow: hidden;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.home-hero__bg img,
.home-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Desktop shows the video; mobile shows the client's real branded truck photo
   (the video poster read as an unclear "box" on phones). */
.home-hero__mobile-img { display: none; }
@media (max-width: 900px) {
  .home-hero__video { display: none; }
  .home-hero__mobile-img { display: block; object-position: 34% 50%; }
}
/* Reduced motion: stop the video, show the poster still as a static background */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
  .home-hero__bg {
    background-image: url("/assets/video/hero-poster.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Feathered scrim that hugs the left-center text block (radial) plus a
     bottom anchor for the subtitle + CTAs. Strong enough to hold white text
     on the brightest golden frames, but fades to fully clear by the right
     third so the video stays clean. No blur (per brand rule), no hard box. */
  background:
    radial-gradient(150% 125% at 22% 54%,
      rgba(6, 16, 38, 0.82) 0%,
      rgba(6, 16, 38, 0.60) 26%,
      rgba(6, 16, 38, 0.34) 46%,
      rgba(6, 16, 38, 0.08) 62%,
      rgba(6, 16, 38, 0.00) 74%),
    linear-gradient(to top,
      rgba(6, 16, 38, 0.46) 0%,
      rgba(6, 16, 38, 0.00) 38%);
}
.home-hero__inner {
  position: relative;
  width: 100%;
  /* Hug the left edge (no centered container) for the editorial hero. */
  max-width: none;
  margin: 0;
  text-align: left;
  padding: 0 5vw;
  /* Nudge the copy slightly up from dead-center, closer to the header. */
  transform: translateY(clamp(-36px, -4vh, -18px));
}
/* Mobile: lift the copy a bit more (about half an inch higher). */
@media (max-width: 900px) {
  .home-hero__inner { transform: translateY(clamp(-96px, -10vh, -64px)); }
}
.home-hero__inner > * { max-width: 640px; }

.home-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: white;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--stack-lg);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-hero .hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.home-hero__title {
  font-family: var(--font-editorial);
  /* Scale with the SMALLER of width or height so the hero always fits one
     screen. Tall monitors keep the full size; short laptops shrink to fit. */
  font-size: clamp(40px, min(8.5vw, 9.5vh), 116px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.005em;
  color: white;
  margin: 0 0 var(--stack-lg);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
  /* Wider measure so the headline wraps 2-3 words per line (matches the
     approved sketch), not one word per line. Overrides the 640px child cap. */
  max-width: 14ch;
}
/* Editorial accent word: green italic (WCAG-safe green for text on dark) */
.home-hero__title-accent {
  font-style: italic;
  font-weight: 800;
  color: var(--color-accent-on-dark);
}
.home-hero__subtitle {
  font-size: 28px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 var(--stack-lg);
  max-width: 620px;
  /* Two-layer shadow: tight dark edge for legibility + soft halo so the line
     stays readable even on the brightest frames of the hero video. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 24px rgba(0, 0, 0, 0.55);
  font-weight: 600;
}
.home-hero .hero-actions { justify-content: flex-start; gap: var(--stack-md); }

@media (max-width: 768px) {
  .home-hero__title { letter-spacing: -0.02em; }
  .home-hero__subtitle { font-size: 17px; max-width: 100%; }
  /* Mobile hero: drop the desktop left-radial, anchor the copy to the bottom
     and seat it inside a calm dark "content card" so white text reads on any
     poster frame. The image breathes above the card. No blur (brand rule);
     the card is a solid translucent gradient, an intentional design element. */
  .home-hero { align-items: flex-end; }
  .home-hero::before {
    background: linear-gradient(to top,
      rgba(6, 16, 38, 0.50) 0%,
      rgba(6, 16, 38, 0.14) 50%,
      rgba(6, 16, 38, 0.00) 78%);
  }
  .home-hero__inner {
    margin: 0 12px;
    padding: 24px 22px 26px;
    /* Brand-blue frosted glass card (user asked for blue glass, not black).
       Translucent #0048A8 tint + backdrop blur = the "blue glass" look; white
       text reads cleanly on it. */
    background: linear-gradient(to bottom,
      rgba(0, 72, 168, 0.42),
      rgba(0, 56, 138, 0.66));
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 24, 64, 0.38);
  }
  .home-hero__inner > * { max-width: 100%; }
  /* Inside the card the copy no longer needs heavy halos. */
  .home-hero__title { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
  .home-hero__subtitle { text-shadow: none; }
}
@media (max-width: 900px) {
  .home-hero {
    min-height: calc(100vh - 84px);
    min-height: calc(100svh - 84px);
    padding: clamp(32px, 5vh, 64px) 0;
  }
  .home-hero__title { font-size: 42px; }
  .home-hero__subtitle { font-size: 17px; }
}
@media (max-width: 600px) {
  .home-hero__title { font-size: 34px; }
  .home-hero__subtitle { font-size: 16px; }
}

/* Hero proof points + green tagline: desktop hidden (mobile-only). */
.home-hero__points { display: none; }
.home-hero__tagline { display: none; }
/* ---------------------------------------------------------------------
   Single-screen mobile hero: the founder photo (eagle logo on his shirt)
   fills the screen, the blue glass card sits at the bottom with proof
   points. Desktop video is untouched.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Editorial mobile hero: founder bright on the right (cropped real photo),
     an art-directed text column on the left. Just the photo and the type. */
  .home-hero { align-items: center; }
  .home-hero__mobile-img { display: block; object-position: 50% 36%; }
  /* No gradient / scrim / blur over the photo - founder stays fully bright.
     Text reads via text-shadow only. */
  .home-hero__bg::after { display: none; }
  .home-hero__inner {
    width: auto; max-width: 53%; box-sizing: border-box; margin: 0;
    padding: 0 14px 0 22px;
    background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .home-hero .hero-eyebrow { display: none; }
  /* HEADLINE: big, and scales UP with the screen (bigger on tablet, not smaller).
     Clearly larger than everything else. */
  .home-hero__title {
    font-size: clamp(36px, 10vw, 88px); line-height: 0.95; letter-spacing: -0.02em;
    margin-bottom: clamp(8px, 1.6vw, 18px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.55);
  }
  /* Green serif tagline - scales with the screen. No underline, no rule. */
  .home-hero__tagline {
    display: block;
    font-family: var(--font-editorial);
    font-style: italic; font-weight: 800;
    font-size: clamp(20px, 5.6vw, 50px); line-height: 1.0;
    color: var(--color-accent-on-dark);
    margin: 0 0 clamp(20px, 4vw, 42px);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.55);
  }
  .home-hero__subtitle { display: none; }
  .home-hero .hero-actions { display: none; }
  /* Proof points: clearly smaller than the headline, scale gently, tight stack. */
  .home-hero__points {
    display: grid; gap: clamp(9px, 1.8vw, 16px); list-style: none; margin: 0; padding: 0;
  }
  .home-hero__points li {
    position: relative; padding-left: clamp(26px, 4vw, 40px);
    font-size: clamp(13px, 3vw, 22px); font-weight: 600; color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  .home-hero__points li::before {
    content: ""; position: absolute; left: 0; top: 0.05em;
    width: clamp(17px, 3vw, 26px); height: clamp(17px, 3vw, 26px);
    border-radius: 50%;
    background: var(--color-accent-on-dark, #4cd07d)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307142b' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / 58% no-repeat;
  }
}

/* =====================================================================
   Checklist (used on homepage Why section, About page values, etc.)
   ===================================================================== */
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  padding: var(--stack-sm) 0 var(--stack-sm) 36px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  background-image:
    linear-gradient(45deg, transparent 45%, var(--color-accent-text) 45%, var(--color-accent-text) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--color-accent-text) 45%, var(--color-accent-text) 55%, transparent 55%);
}
.checklist li strong { color: var(--color-text); }

/* =====================================================================
   "Why us" image side
   ===================================================================== */
.why-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
}
/* On desktop the photo column is a full equal half of the chapter: it
   stretches to the exact height of the text column beside it (no height cap),
   so the two sides read as one balanced pair. */
@media (min-width: 901px) {
  .why-image { aspect-ratio: auto; height: 100%; }
}
.why-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bias the crop upward so the mountain peak always stays in frame. */
  object-position: 50% 18%;
}
@media (max-width: 900px) {
  /* Founder portrait reads vertical on mobile so the shirt logo + mountain
     peak are large and clear (a landscape crop only showed his shoulders). */
  .why-image { aspect-ratio: 3 / 4; max-width: 460px; margin-left: auto; margin-right: auto; }
  .why-image img { object-position: 50% 12%; }
}

/* =====================================================================
   Card image inside service-card (override negative margin on mobile)
   ===================================================================== */
.service-card .card-image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* =====================================================================
   Full-viewport chapters. Each .vp segment fills the screen below the
   84px sticky header on desktop, with soft scroll-snap. Disabled on
   mobile and under prefers-reduced-motion. min-height (not height) so
   taller content grows instead of being clipped.
   ===================================================================== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Anchor links (e.g. /contact/#faq) land below the 84px sticky header.
     NOTE: page-level scroll-snap removed - its proximity engine drifted the
     page on load and made scrolling janky. Full-viewport sizing stays below. */
  html { scroll-padding-top: 84px; }
  /* Page heroes and content chapters fill the screen below the 84px header.
     min-height (not height) so taller content (legal text, FAQ) just grows. */
  .hero,
  .vp {
    min-height: calc(100vh - 84px);
    min-height: calc(100svh - 84px);
    display: flex;
    flex-direction: column;
    /* safe center: center short content, but top-align when content is taller
       than the viewport so the top is never clipped under the header. */
    justify-content: safe center;
  }
  /* Fluid vertical rhythm: a chapter's breathing room is a SHARE of the
     screen height (vh), not a fixed pixel band. Tall monitors get the full
     80px; short laptops shrink it automatically down to a 16px floor. This
     is what lets every segment fit any device without hardcoded breakpoints. */
  .vp {
    padding-top: clamp(14px, 3.5vh, 78px);
    padding-bottom: clamp(14px, 3.5vh, 78px);
  }
  /* Page heroes fill the screen too - give them the same fluid breathing room. */
  .hero {
    padding-top: clamp(14px, 3.5vh, 78px);
    padding-bottom: clamp(12px, 2.5vh, 48px);
  }
  /* The gap below a chapter's heading block is also a share of the screen,
     not a fixed 64px. :has() cleanly targets standalone chapter headers
     (the eyebrow + title block); the two-column contact layout is untouched. */
  .vp > .container > .section-header-left,
  .vp > .container > div:has(> .section-eyebrow) {
    margin-bottom: clamp(18px, 3vh, 64px) !important;
  }
}

/* Scroll reveal: chapter content fades and rises into view. Gated on the
   .js class (added by script.js) so no-JS visitors and crawlers always see
   the content. Skipped entirely under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .vp > .container {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .js .vp > .container.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   Instant move estimator (homepage feature)
   ===================================================================== */
.estimator-section {
  background: linear-gradient(165deg, #0c2046 0%, #07142b 100%);
  color: #fff;
}
.estimator-section .section-title { color: #fff; }
.estimator-section .section-lede { color: rgba(255, 255, 255, 0.80); }
.estimator-section .section-eyebrow { color: var(--color-accent-on-dark, #4cd07d); }
.estimator {
  max-width: 680px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 34px);
  display: grid;
  gap: var(--stack-lg);
}
.estimator__row { display: grid; gap: 10px; }
.estimator__label {
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66); font-weight: 700;
}
.estimator__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.estimator__pill {
  appearance: none; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff; font-weight: 600; font-size: 15px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.estimator__pill:hover { background: rgba(255, 255, 255, 0.12); }
.estimator__pill.is-active {
  background: var(--color-accent-on-dark, #4cd07d);
  border-color: var(--color-accent-on-dark, #4cd07d);
  color: #07142b;
}
.estimator__pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.estimator__select {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18); font-size: 15px;
}
.estimator__select option { color: #07142b; }
.estimator__result {
  text-align: center; padding: 16px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.estimator__price {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: clamp(40px, 10vw, 60px); font-weight: 800; line-height: 1;
  color: #fff;
}
.estimator__dash {
  font-family: var(--font-display); font-size: 0.38em; font-weight: 500;
  opacity: 0.65; vertical-align: middle; padding: 0 0.15em;
}
.estimator__meta { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.estimator__cta { text-align: center; }
/* High-contrast CTA on the navy panel (blue-on-blue was hard to see). */
.estimator__cta .btn-cta {
  background: var(--color-accent-on-dark, #4cd07d);
  color: #07142b;
  border-color: var(--color-accent-on-dark, #4cd07d);
  font-weight: 700;
}
.estimator__cta .btn-cta::before { display: none; }
.estimator__cta .btn-cta:hover { filter: brightness(1.06); }
.estimator__fine { font-size: 12px; color: rgba(255, 255, 255, 0.52); text-align: center; margin: 0; }


/* ===== Estimator v2: icon size picker, route chips, rate band ===== */
.estimator__sizes { display: flex; gap: 8px; }
.estimator__size {
  flex: 1 1 0; min-width: 56px; min-height: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 12px 6px 10px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.estimator__size:hover { background: rgba(255, 255, 255, 0.10); }
.estimator__size:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.estimator__size.is-active {
  background: var(--color-accent-on-dark, #4cd07d);
  border-color: var(--color-accent-on-dark, #4cd07d);
  color: #07142b;
}
.estimator__house {
  width: var(--h, 24px); height: var(--h, 24px); display: block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.estimator__size-name { font-size: 13px; font-weight: 600; }

.estimator__route { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.estimator__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
}
.estimator__chip svg { color: var(--color-accent-on-dark, #4cd07d); flex: none; }

.estimator__band {
  position: relative; height: 8px; max-width: 360px; margin: 18px auto 8px;
  border-radius: 999px;
  background: linear-gradient(to right, #4cd07d 0%, #ffd166 55%, #ff8c42 100%);
}
.estimator__band-dot {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 3px solid #07142b;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.estimator__band-labels {
  display: flex; justify-content: space-between; max-width: 360px; margin: 0 auto;
  font-size: 11px; color: rgba(255, 255, 255, 0.5);
}

/* ===== Estimator section: two columns (copy left, calculator right) ===== */
.estimator-layout {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.estimator-copy { text-align: left; }
.estimator-copy .section-eyebrow { justify-content: flex-start; }
.estimator-headline {
  font-family: var(--font-editorial, Georgia, serif);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 14px 0 18px;
  color: #fff;
}
.estimator-sub {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.80);
  max-width: 46ch;
  margin: 0 0 24px;
}
.estimator-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.estimator-points li {
  position: relative; padding-left: 28px;
  font-size: 15px; color: rgba(255, 255, 255, 0.88);
}
.estimator-points li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: var(--color-accent-on-dark, #4cd07d);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* In the two-column layout the calculator fills its column (no 680 centering). */
.estimator-layout .estimator { max-width: 100%; margin: 0; }

/* Keep the whole segment inside one viewport on desktop. */
@media (min-width: 901px) {
  .estimator-section { padding-top: clamp(24px, 4vh, 56px); padding-bottom: clamp(24px, 4vh, 56px); }
  .estimator-layout .estimator { gap: clamp(14px, 2.2vh, 22px); padding: clamp(18px, 3vh, 30px); }
}

/* Mobile: stack - copy on top (centered), calculator below, tight. */
@media (max-width: 900px) {
  .estimator-layout { grid-template-columns: 1fr; gap: 22px; }
  .estimator-copy { text-align: center; }
  .estimator-copy .section-eyebrow { justify-content: center; }
  .estimator-headline { margin: 10px 0 12px; }
  .estimator-sub { margin-left: auto; margin-right: auto; }
  .estimator-points { max-width: 300px; margin: 0 auto; }
}

.estimator__route[hidden] { display: none; }

/* ===== Google rating badge in the trust strip ===== */
.trust-badge--google > span { display: inline-flex; align-items: center; gap: 6px; }
.trust-badge--google strong { font-weight: 800; }
.trust-badge--google .g-stars { color: #fbbc04; letter-spacing: 1px; font-size: 0.95em; }
.trust-badge--google .g-label { color: var(--color-text-muted); font-weight: 500; }

/* =========================================================================
   Quote page - form layout + Build Your Move cube cart
   ========================================================================= */
/* Soft brand-blue gradient behind the quote page so the white form + cart
   cards lift off the page (scoped to this page via :has, no markup change). */
main:has([data-quote-form]) {
  background: linear-gradient(168deg, #EFF5FE 0%, #DDE9F8 52%, #CFDFF4 100%);
  background-attachment: fixed;
}

/* On the quote page, the header "Get a Quote" CTA links to this same page -
   redundant, so hide just that one top button here. Everything else stays. */
body:has([data-quote-form]) .site-header__quote { display: none; }

/* The whole quote page is one form (.quote-layout). Row A is the lead card +
   aside; Row B is the full-width cart; the submit sits in its own centered row. */
.quote-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--stack-lg);
  box-shadow: var(--shadow-hover);
}
.select-field { margin-bottom: var(--stack-md); }
.quote-submit { max-width: 560px; margin: var(--stack-lg) auto 0; }

.movecart[hidden] { display: none; }
.movecart {
  margin: var(--stack-lg) 0 0;
  padding: var(--stack-lg);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  /* Soft blue interior so the white item cells pop inside the calculator. */
  background: linear-gradient(180deg, #F4F8FE 0%, #E9F1FB 100%);
  box-shadow: var(--shadow-hover);
}
.movecart__head { margin-bottom: var(--stack-md); }
.movecart__title {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.movecart__optional {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-on-light);
  background: rgba(61, 170, 95, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.movecart__sub {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Presets */
.movecart__presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stack-sm);
  margin-bottom: var(--stack-lg);
}
.movecart__presets-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.movecart__preset {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.movecart__preset:hover { border-color: var(--color-primary); background: var(--color-surface-tint); }
.movecart__preset:active { transform: scale(0.97); }
.movecart__preset.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.movecart__preset--clear {
  margin-left: auto;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.movecart__preset--clear:hover { color: var(--color-primary-deep); background: var(--color-surface); }
.movecart__preset--clear[hidden] { display: none; }

/* Row B layout: item grid (left) + sticky live estimate (right) */
.movecart__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
}
@media (min-width: 901px) {
  .movecart__layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .movecart__summary { position: sticky; top: 92px; align-self: start; }
}

/* Room sections (always visible, labeled) */
.movecart__group { margin-top: var(--stack-lg); }
.movecart__group:first-child { margin-top: 0; }
.movecart__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.movecart__group-tally {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}
.movecart__group-tally:empty { display: none; }

/* Item tiles - responsive grid (5-ish wide on desktop, 2 on phone) */
.movecart__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.movecart__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.movecart__item.is-active {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-surface-tint);
}
.movecart__item-info { flex: 1; min-width: 0; }
.movecart__item-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}
.movecart__item-cube {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Stepper - full width within the tile */
.movecart__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.movecart__item.is-active .movecart__stepper { background: var(--color-surface); }
.movecart__btn {
  font: inherit;
  width: 38px;
  height: 34px;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.movecart__btn:hover { background: var(--color-surface-tint); }
.movecart__btn:active { background: var(--color-primary); color: #fff; }
.movecart__qty {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Live estimate panel (sticky summary) */
.estimate-live {
  padding: var(--stack-lg);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s ease;
}
.estimate-live.is-empty { opacity: 0.9; }
.estimate-live.is-empty .estimate-live__cube-num { color: rgba(255, 255, 255, 0.45); }
.estimate-live__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: var(--stack-sm);
}
.estimate-live__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
}
.estimate-live__count { font-size: 13px; color: rgba(255,255,255,0.8); }
.estimate-live__cube { display: flex; align-items: baseline; gap: 8px; }
.estimate-live__cube-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.estimate-live__cube-unit { font-size: 14px; color: rgba(255,255,255,0.85); }

/* Truck fill meter */
.truckmeter { margin: var(--stack-md) 0; }
.truckmeter__track {
  height: 12px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}
.truckmeter__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-on-dark));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.truckmeter__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.truckmeter__cap { font-weight: 600; }

/* Minimum-cube note under the headline */
.estimate-live__minnote {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-on-dark);
}
.estimate-live__minnote[hidden] { display: none; }

/* Distance / per-cube rate line */
.estimate-live__rate {
  margin: var(--stack-md) 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.10);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  text-align: center;
}
.estimate-live__rate.is-known { color: #fff; background: rgba(255,255,255,0.16); }

/* Itemized breakdown lines (moving / packing) */
.estimate-live__lines {
  margin: var(--stack-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.estimate-live__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.88);
}
.estimate-live__line[hidden] { display: none; }
.estimate-live__line > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Estimated total */
.estimate-live__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: var(--stack-sm);
  padding-top: var(--stack-sm);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.estimate-live__total-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.estimate-live__total-val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Packing & materials section divider */
.movecart__packing { margin-top: var(--stack-xl); padding-top: var(--stack-lg); border-top: 2px solid var(--color-border); }
.movecart__packing-title { font-size: 14px; color: var(--color-text); }
.movecart__optional--soft {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.estimate-live__fine {
  margin: var(--stack-sm) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
}
@media (prefers-reduced-motion: reduce) {
  .truckmeter__fill { transition: none; }
}

/* Phone: tighter card padding + 2-up tiles so the list stays compact */
@media (max-width: 600px) {
  .movecart { padding: var(--stack-md); }
  .movecart__items { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px; }
  .movecart__item { padding: 10px; gap: 8px; }
  .movecart__btn { width: 34px; }
  .estimate-live { padding: var(--stack-md); }
  .estimate-live__cube-num { font-size: 38px; }
}