/* LD Movers — brand system (sampled from approved logo assets)
   #102040 · #183050 · #3878A0 · #7CC0E0 · Montserrat */

:root {
  /* Core logo palette */
  --color-navy: #102040;
  --color-navy-ink: #183050;
  --color-medium-blue: #3878a0;
  --color-light-blue: #7cc0e0;
  --color-white: #ffffff;

  /* RGB helpers for translucent UI */
  --navy-rgb: 16, 32, 64;
  --navy-ink-rgb: 24, 48, 80;
  --blue-rgb: 56, 120, 160;
  --sky-rgb: 124, 192, 224;

  /* Semantic aliases */
  --navy: var(--color-navy);
  --navy-deep: #081828;
  /* Matches the flat backdrop baked into logo.avif so the mark blends seamlessly */
  --brand-bg: #142034;
  --blue: var(--color-medium-blue);
  --blue-hover: #2d6284;
  --sky: var(--color-light-blue);
  --sky-dim: rgba(var(--sky-rgb), 0.16);
  --sky-line: rgba(var(--sky-rgb), 0.22);
  --white: var(--color-white);
  --surface: var(--color-white);
  --paper: #e9eef3;
  --paper-alt: #dde6ee;
  --ink: var(--color-navy-ink);
  --muted: #3d5268;
  --text-on-dark: rgba(255, 255, 255, 0.94);
  --text-on-dark-muted: rgba(255, 255, 255, 0.8);
  --gold-star: #d4a017;
  /* Required-field asterisk. No single red clears 4.5:1 on both the white card
     shell and the #162033 solid form, so each surface gets its own tone. */
  --req-mark: #b3261e;
  --req-mark-on-dark: #ff8a80;
  --maxw: 1120px;
  --header-maxw: 1760px;
  /* One page gutter for the whole site. Every container width and every
     absolutely positioned column (the sticky quote rail) is derived from these
     two values, so nothing can drift out of alignment per page or per section. */
  --page-gutter: 1.25rem;
  --wrap: min(var(--maxw), calc(100% - 2 * var(--page-gutter)));
  --header-wrap: min(var(--header-maxw), calc(100% - 1.5rem));
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Montserrat", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.2s var(--ease);
  --shadow: 0 2px 16px rgba(var(--navy-rgb), 0.12);
  --shadow-lg: 0 16px 48px rgba(var(--navy-rgb), 0.24);
  --border: 1px solid rgba(var(--navy-ink-rgb), 0.12);
  --header-h: 6.75rem;
  --nav-border: 1px solid rgba(var(--sky-rgb), 0.22);
  --gray-100: #e9eef3;
  --gray-700: #3d5268;
  --radius-lg: 12px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 8px rgba(var(--navy-rgb), 0.08);
  --shadow-md: 0 4px 20px rgba(var(--navy-rgb), 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 7.25rem;
}

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

a { color: var(--blue); text-decoration: none; }
/* Buttons are excluded: a:hover outranks .btn-accent, so it used to repaint the
   label the same colour as the hovered background and the text vanished. */
/*a:not(.btn):hover { color: var(--blue-hover); }*/

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--blue);
  color: #fff;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { width: var(--wrap); margin-inline: auto; }

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}
.icon svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.star svg { fill: var(--gold-star); stroke: var(--gold-star); }

h1, h2, h3, h4 {
  font-family: var(--font);
  line-height: 1.22;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); line-height: 1.12; margin: 0; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin: 0; }
h3 { font-size: 1.0625rem; margin: 0; font-weight: 700; }
h4 { font-size: 0.8125rem; margin: 0; font-weight: 700; color: var(--ink); }

p { margin: 0; }
.prose p + p { margin-top: 1rem; }

.prose > .section-label + h2,
.prose > .section-label + p,
.section-head .section-label + h2 {
  margin-top: 0;
}

.prose h2 {
  margin-bottom: 0.85rem;
}

.prose h2 + p,
.prose h2 + .section-lead {
  margin-top: 0;
}

.prose p + h2 {
  margin-top: 1.5rem;
}

.prose h3 {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.prose h3 + p {
  margin-top: 0.45rem;
}

.prose p + h3 {
  margin-top: 1.25rem;
}

.section {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}
.section-light { background: var(--white); }
.section-soft { background: var(--paper-alt); }
.section-alt { background: var(--paper-alt); }

.section-head { margin-bottom: 1.75rem; }
.section-head.center { text-align: center; }
.section-head.center .section-lead { margin-inline: auto; }
.section-head-left { text-align: left; }
.section-head-left .section-lead { margin-inline: 0; }
.section-head h2 + .section-lead { margin-top: 0.85rem; }

.section-label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  /* --blue only reaches 3.81:1 on --paper-alt at this size; the darker shade
     keeps the accent blue while clearing 4.5:1 on every light section. */
  color: var(--blue-hover);
}
.section-label-light { color: var(--sky); }
.section-lead {
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
}
.section-cta {
  text-align: center;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.section-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Header & navigation (Delta-style) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-bg);
  border-bottom: 1px solid rgba(var(--sky-rgb), 0.14);
}

.site-header > .wrap {
  width: var(--header-wrap);
}

.header-inner,
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: var(--header-h);
  position: relative;
}

.logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.logo picture { display: block; line-height: 0; }
.logo img {
  /* Homepage reference sizing — shared nav must match on every route. */
  height: clamp(4rem, 7.6vw, 6.7rem);
  width: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.05rem;
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.header-phone {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sky);
}
.header-phone:hover { color: var(--white); }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}

.nav-link:hover,
.nav-trigger[aria-expanded="true"] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.nav-item { position: relative; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: auto;
  right: 0;
  width: min(520px, 92vw);
  padding: 1rem;
  background: rgba(255, 255, 255, 0.98);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  color: var(--ink);
}

.nav-dropdown.nav-mega {
  width: min(760px, 94vw);
  padding: 1.25rem;
}

@media (min-width: 769px) {
  .nav-dropdown.nav-mega {
    position: fixed;
    top: var(--header-h);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
  }
}

.nav-mega-locations { width: min(680px, 94vw); }
.nav-mega-services { width: min(880px, 96vw); }

.nav-mega-head { margin-bottom: 1rem; }

.nav-mega-tag {
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

.nav-mega-intro {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 36rem;
}

.nav-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.nav-service-link {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}

.nav-service-link:hover {
  background: rgba(var(--sky-rgb), 0.1);
  border-color: rgba(var(--blue-rgb), 0.14);
}

.nav-service-copy { display: block; min-width: 0; }

.nav-service-link strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.nav-service-link .nav-service-copy > span {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted);
  line-height: 1.4;
}

.nav-locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

.nav-location-link {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-location-link:hover {
  color: var(--blue);
  background: rgba(var(--sky-rgb), 0.1);
}

.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}

.nav-trigger[aria-expanded="true"] .nav-chevron,
.nav-accordion-trigger[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown[hidden] { display: none; }

.nav-dropdown-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: var(--border);
}

.nav-dropdown-foot p {
  font-size: 0.8125rem;
  color: var(--muted);
}

.nav-view-all {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--blue);
}

.nav-view-all:hover { color: var(--blue-hover); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid rgba(var(--sky-rgb), 0.35);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.25s var(--ease), opacity 0.25s;
}

.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.35s;
}

.nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(var(--navy-rgb), 0.55);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }

.nav-drawer-panel {
  position: absolute;
  /* Stretched against the fixed .nav-drawer instead of sized with 100dvh: dvh
     tracks the visual viewport, so at any zoom other than 100% it resolved
     shorter than the layout viewport and the bottom of the menu sat above the
     bottom of the screen with page content showing through. */
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-left: var(--border);
  box-shadow: -12px 0 48px rgba(var(--navy-rgb), 0.18);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  overflow: hidden;
}

.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

/* Phones get the drawer as a full-screen sheet rather than a side panel. */
@media (max-width: 640px) {
  .nav-drawer-panel {
    width: 100%;
    border-left: none;
  }
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--brand-bg);
  border-bottom: 1px solid rgba(var(--sky-rgb), 0.14);
}

.nav-drawer-brand-wrap {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-drawer-logo {
  height: clamp(4rem, 7.6vw, 6.7rem);
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
}

.nav-drawer-close {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.nav-drawer-body {
  /* Grows to fill the full-height panel so the footer CTA sits at the bottom
     of the screen instead of directly under the last link. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Keeps a flick inside the menu from scrolling the page behind it. */
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.nav-accordion { border-bottom: var(--border); }
.nav-accordion:last-of-type { border-bottom: none; }

.nav-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.nav-accordion-panel { padding-bottom: 0.75rem; }
.nav-accordion-panel[hidden] { display: none; }

/* Top-level drawer destinations, sized to match the accordion triggers above. */
.nav-drawer-link {
  display: block;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--border);
}

.nav-drawer-link:last-child { border-bottom: none; }

.nav-drawer-link:hover,
.nav-drawer-link:focus-visible { color: var(--blue); }

.nav-drawer-sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.15rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-drawer-sublink:hover {
  color: var(--blue);
  background: rgba(var(--sky-rgb), 0.1);
}

.nav-drawer-sublink-all {
  color: var(--blue);
  font-weight: 700;
  margin-top: 0.25rem;
}

.nav-drawer-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--blue);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-drawer-contact {
  padding-top: 1rem;
  border-top: var(--border);
}

.nav-drawer-contact .nav-drawer-note {
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-align: left;
}

.nav-drawer-phone {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--blue);
}

.nav-drawer-foot {
  flex-shrink: 0;
  padding: 1.25rem;
  border-top: var(--border);
  background: var(--paper);
}

.nav-drawer-note {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.nav-open { overflow: hidden; }

/* Below 900px there is not enough room to keep every nav item on one line,
   so the drawer takes over instead of letting links wrap. */
@media (max-width: 900px) {
  .desktop-nav,
  .desktop-cta,
  .desktop-phone { display: none !important; }

  .site-header-actions { margin-left: auto; }
  .nav-toggle { display: flex; }

  /* --header-wrap's 0.75rem gutter exists for the 1760px desktop cluster; once
     the header collapses to logo + toggle it left them 8px outside the 1.25rem
     gutter every section below uses, so the logo never lined up with the
     content beneath it. Fall back to the standard wrap on mobile and tablet. */
  .site-header > .wrap { width: var(--wrap); }
}

@media (min-width: 901px) {
  /* Logo, links, and CTA travel together as one centred cluster so the header
     keeps free space at both edges rather than spanning the full wrap. */
  .header-inner,
  .site-header-inner {
    justify-content: center;
    gap: 1.75rem;
  }

  .site-nav {
    display: flex;
    justify-content: center;
    margin-inline: 0;
    margin-left: 0;
  }

  .site-header-actions {
    margin-left: 0;
  }

  .header-phone { display: inline-flex; }
}

/* Keep every nav item on a single line as the header narrows */
@media (min-width: 901px) and (max-width: 1240px) {
  .header-phone { display: none; }

  .nav-link {
    padding: 0.5rem 0.4rem;
    font-size: 0.75rem;
  }
}

@media (min-width: 901px) and (max-width: 1060px) {
  .logo img { height: clamp(3.75rem, 6vw, 4.5rem); }

  .nav-link {
    padding: 0.5rem 0.3rem;
    font-size: 0.7rem;
  }

  .header-cta {
    padding: 0.6rem 0.85rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 960px) {
  .nav-services-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-locations-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .nav-services-grid,
  .nav-locations-grid { grid-template-columns: 1fr; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:active { transform: scale(0.98); }
.btn-sm { padding: 0.65rem 1.1rem; font-size: 0.8125rem; }

.btn:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

/* Every variant restates its colour on :hover and :focus-visible so the label
   can never inherit the hovered background colour and disappear. */
.btn-primary {
  background: transparent;
  color: var(--sky);
  border: 1px solid rgba(var(--sky-rgb), 0.5);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: rgba(var(--sky-rgb), 0.16);
  color: var(--white);
  border-color: var(--sky);
}

.btn-accent {
  background: var(--blue);
  color: var(--white);
}
.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--blue-hover);
  color: var(--white);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-secondary {
  background: transparent;
  color: var(--blue);
  border: 1px solid rgba(var(--blue-rgb), 0.35);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}
.btn[disabled]:hover,
.btn[aria-busy="true"]:hover { transform: none; }

.btn-block { width: 100%; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 0 0 clamp(3rem, 7vw, 4.5rem);
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  position: relative;
  z-index: 2;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 24, 40, 0.82) 0%, rgba(8, 24, 40, 0.68) 100%),
    url("assets/photos/team-fleet.jpg") center center / cover no-repeat;
}

.hero-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(var(--sky-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sky-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

.hero-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.hero-deco-grass {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-height: 3.25rem;
  object-fit: cover;
  object-position: bottom center;
  opacity: 0.32;
}

@media (min-width: 769px) {
  .hero-deco-grass {
    max-height: 2.25rem;
    opacity: 0.26;
  }

  .hero-grid {
    grid-template-columns: 1fr min(380px, 36vw);
    gap: 1.35rem;
    max-width: 920px;
    margin-top: 0;
    margin-inline: auto;
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
    align-items: stretch;
  }

  .hero-brand {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    margin-top: 0;
    align-self: stretch;
  }

  .hero-brand h1 {
    margin-top: 0;
  }

  .hero-accent {
    margin-top: 0.6rem;
  }

  .hero-trust-group {
    margin-top: 1rem;
    padding-top: 0;
  }

  .hero-grid .quote-card-hero {
    margin-top: 0;
    position: relative;
    z-index: 2;
    /* Hug the form content instead of stretching to the column height —
       that stretch was leaving a dead band under Step 1. */
    align-self: center;
    display: flex;
    flex-direction: column;
    height: auto;
  }
}

.hero-brand {
  color: var(--white);
  padding-top: 0;
}

.hero-brand h1 {
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.15;
  max-width: 22rem;
}

.hero-accent {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sky);
  max-width: 24rem;
}

.rating-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  width: 100%;
}

.hero-trust-group {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 1.15rem;
  width: fit-content;
  max-width: 100%;
}

.rating-stars { display: inline-flex; gap: 0.05rem; }
.rating-score { font-weight: 800; color: var(--gold-star); font-size: 0.9375rem; }
.rating-count { font-size: 0.875rem; color: var(--text-on-dark-muted); }

.hero-trust-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.rating-shield-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 0;
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sky);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--sky-rgb), 0.28);
  border-radius: var(--radius-sm);
  min-width: 0;
  white-space: nowrap;
}

.rating-shield-badge .icon svg {
  width: 1rem;
  height: 1rem;
}

.btn-hero-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.75rem 0.85rem;
  background: var(--white);
  color: #3b6181;
  border: 1px solid rgba(59, 97, 129, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

@media (max-width: 560px) {
  .hero-trust-group { width: 100%; }

  .rating-badge {
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.65rem;
  }

  .review-platforms-badge .platform-logo-fb,
  .review-platforms-badge .platform-logo-google {
    width: 1.35rem;
    height: 1.35rem;
  }

  .rating-shield-badge {
    flex: 0 1 auto;
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }

  .rating-shield-badge .icon svg { width: 0.85rem; height: 0.85rem; }

  .btn-hero-call {
    flex: 1 1 auto;
    padding: 0.6rem 0.5rem;
    font-size: 0.8125rem;
  }

  .btn-hero-call .icon svg { width: 0.9rem; height: 0.9rem; }
}

.btn-hero-call:hover,
.btn-hero-call:focus-visible {
  background: #f2f6fa;
  color: #3b6181;
  border-color: rgba(59, 97, 129, 0.5);
}

.btn-hero-call .icon svg {
  width: 1rem;
  height: 1rem;
}

.trust-chip {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sky);
  padding-left: 0.65rem;
  border-left: 1px solid rgba(var(--sky-rgb), 0.35);
}
.review-platforms {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 0.65rem;
  border-left: 1px solid rgba(var(--sky-rgb), 0.35);
}
.review-platforms-badge {
  position: relative;
  order: -1;
  gap: 0.6rem;
  padding-left: 0;
  margin-right: 0.1rem;
  border-left: none;
  border-right: 1px solid rgba(var(--sky-rgb), 0.35);
  padding-right: 0.75rem;
}
.review-platforms-badge .platform-logo-fb,
.review-platforms-badge .platform-logo-google {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  position: static;
  filter: none;
}
.platform-logo {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.platform-logo-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Quote card */
.quote-card {
  background: var(--surface);
  padding: 1.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.quote-card-hero {
  background: rgba(var(--blue-rgb), 0.35);
  border: 1px solid rgba(var(--sky-rgb), 0.25);
  box-shadow: 0 12px 40px rgba(var(--navy-rgb), 0.25);
  padding: 1.1rem 1.15rem 0.95rem;
}

.quote-card-hero .quote-card-head h2,
.quote-card-hero .quote-card-head p {
  color: var(--white);
}

.quote-card-hero .quote-card-head h2 {
  font-size: 1.125rem;
}

.quote-card-hero .quote-card-head p {
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

.quote-card-hero .quote-form label span { color: rgba(255, 255, 255, 0.92); }

.quote-card-hero .quote-form {
  --qf-gap: 0.5rem;
  margin-top: 0.6rem;
}

.quote-card-hero .quote-form label span {
  font-size: 0.8125rem;
}

.quote-card-hero .quote-form input {
  background: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
}

.quote-card-hero .form-row {
  gap: 0.55rem;
}

.quote-card-hero .btn {
  min-height: 2.45rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
}

.quote-card-hero .form-note {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  margin-top: 0.05rem;
}

.quote-card-hero .form-note .icon { color: var(--sky); }

.quote-card-head-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.quote-pin-deco {
  width: 5.3rem;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(var(--navy-rgb), 0.2));
}

.quote-advisor {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding: 0.5rem 0 1.15rem;
  border-bottom: 1px solid rgba(var(--navy-ink-rgb), 0.1);
  overflow: hidden;
  min-height: 5.5rem;
  min-width: 0;
}

.quote-advisor-avatar {
  position: relative;
  flex-shrink: 0;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 3px solid rgba(var(--sky-rgb), 0.55);
  background: linear-gradient(180deg, rgba(var(--sky-rgb), 0.14) 0%, var(--paper) 100%);
  overflow: hidden;
}

.quote-advisor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center 12%;
  border: none;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

.quote-advisor-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.quote-card-head h2 { font-size: 1.25rem; color: var(--ink); margin: 0; }
.quote-card-head p { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--muted); }

/* --qf-gap is shared by the form and each step so the two-step layout keeps the
   same rhythm as the single-column card variants. */
.quote-form { display: grid; gap: var(--qf-gap, 0.85rem); margin-top: 1.25rem; }
.quote-step { display: grid; gap: var(--qf-gap, 0.85rem); }

/* An author `display` beats the UA sheet's [hidden] rule, so the inactive step
   would still render. This keeps the hidden attribute authoritative. */
.quote-card [hidden],
.quote-form [hidden] { display: none !important; }

.quote-steps-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Brand mark beside the quote heading. Declared as a background so the single
   URL in styles.css resolves from the site root for pages at any folder depth. */
.quote-form-mark {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: url("assets/icon-bison-location-pin-white.png") center / contain
    no-repeat;
  filter: drop-shadow(0 2px 6px rgba(var(--navy-rgb), 0.2));
}

.quote-form-mark-navy {
  background-image: url("assets/icons/icon-bison-location-pin-navy.png");
  filter: none;
}

.quote-step-count {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.quote-steps-bar {
  display: flex;
  flex: 1;
  gap: 0.3rem;
}

.quote-step-dot {
  flex: 1;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(var(--navy-ink-rgb), 0.16);
  transition: background var(--transition);
}

.quote-step-dot.is-active { background: var(--blue); }

.quote-step-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}

.quote-step-actions .btn { width: 100%; }

.quote-card-hero .quote-step-count { color: rgba(255, 255, 255, 0.8); }
.quote-card-hero .quote-step-dot { background: rgba(255, 255, 255, 0.25); }
.quote-card-hero .quote-step-dot.is-active { background: var(--sky); }

.quote-card-hero .quote-step-actions .btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
.quote-card-hero .quote-step-actions .btn-secondary:hover,
.quote-card-hero .quote-step-actions .btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}

.quote-form label span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.quote-form input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 0.85rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.quote-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.15);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* Date and Move Type need more room than a ZIP pair, so they stack first. */
@media (max-width: 400px) {
  .form-row-stack-sm { grid-template-columns: 1fr; }
}

.quote-form select,
.quote-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  min-height: 2.85rem;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.quote-form textarea {
  resize: vertical;
  min-height: 3.75rem;
  line-height: 1.5;
}

.quote-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  cursor: pointer;
}

.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.15);
}

/* Native date inputs collapse to zero width in Safari without this. */
.quote-form input[type="date"] {
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
}

.quote-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
}

.quote-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.field-req {
  color: var(--req-mark);
  text-decoration: none;
  border: 0;
  font-weight: 700;
  margin-left: 0.1rem;
}

.field-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.field-error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: #c0392b;
}

.quote-form [aria-invalid="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* Dark hero card variant */
.quote-card-hero .quote-form select,
.quote-card-hero .quote-form textarea {
  background-color: rgba(255, 255, 255, 0.97);
  border-color: rgba(255, 255, 255, 0.35);
}

.quote-card-hero .field-req { color: #ffd166; }
.quote-card-hero .field-optional { color: rgba(255, 255, 255, 0.75); }
.quote-card-hero .field-error { color: #ffb4ab; }

.quote-card-hero .quote-form [aria-invalid="true"] {
  border-color: #ffb4ab;
  box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.25);
}
.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}
.form-note .icon { color: var(--blue); }
.form-note .icon svg { width: 0.9rem; height: 0.9rem; }

.quote-form-status {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: center;
}
.quote-form-status--pending { color: var(--muted); }
.quote-form-status--success { color: #1a7f37; font-weight: 600; }
.quote-form-status--error { color: #c0392b; font-weight: 600; }
.quote-card-hero .quote-form-status--success { color: #9ef0b0; }
.quote-card-hero .quote-form-status--error { color: #ffb4ab; }
.quote-card-hero .quote-form-status--pending { color: rgba(255, 255, 255, 0.85); }

.quote-form-thanks {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  text-align: center;
  padding: 1.25rem 0.5rem 0.75rem;
  animation: quote-thanks-in 0.4s ease;
}
.quote-form-thanks-icon {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 127, 55, 0.12);
  color: #1a7f37;
  margin-bottom: 0.15rem;
}
.quote-form-thanks-icon svg {
  width: 1.85rem;
  height: 1.85rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}
.quote-form-thanks-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
}
.quote-form-thanks-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 26ch;
}
.quote-form-thanks-sub {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.quote-form-thanks-sub a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.quote-card-hero .quote-form-thanks-icon {
  background: rgba(158, 240, 176, 0.18);
  color: #9ef0b0;
}
.quote-card-hero .quote-form-thanks-title { color: var(--white); }
.quote-card-hero .quote-form-thanks-text { color: rgba(255, 255, 255, 0.92); }
.quote-card-hero .quote-form-thanks-sub { color: rgba(255, 255, 255, 0.78); }
.quote-card-hero .quote-form-thanks-sub a { color: #fff; }

@keyframes quote-thanks-in {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Client marquee */
.clients-marquee {
  background: var(--white);
  border-bottom: var(--border);
  padding: 1.25rem 0 1.35rem;
  overflow: hidden;
}
.clients-marquee-head {
  text-align: center;
  margin-bottom: 0.85rem;
}
.clients-marquee-head p {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.clients-marquee-track-wrap { overflow: hidden; }
.clients-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: client-marquee 45s linear infinite;
}
.clients-marquee-track img {
  height: clamp(1.75rem, 4vw, 2.5rem);
  width: auto;
  max-width: none;
  /* margin, not gap, so translateX(-50%) lands exactly on the duplicate set */
  margin-right: clamp(2rem, 5vw, 3.5rem);
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity var(--transition), filter var(--transition);
}
.clients-marquee-track img:hover {
  opacity: 1;
  filter: none;
}
@keyframes client-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Benefit bar */
.benefit-bar {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  border-bottom: var(--border);
}

.benefit-grid-mockup {
  display: grid;
  gap: 2rem;
  text-align: center;
}

.benefit-grid-mockup article {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 18rem;
  margin-inline: auto;
}

.benefit-icon-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 0.85rem;
  background: transparent;
  color: var(--blue);
  border-radius: 0;
  box-shadow: none;
}

.benefit-icon-lg .icon svg {
  width: 2.75rem;
  height: 2.75rem;
  stroke-width: 1.5;
}

.benefit-grid-mockup h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.benefit-grid-mockup p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.benefit-platforms {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

/* Split section */
.intro-section { position: relative; overflow: hidden; }

.split-section {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.split-media {
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
}

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}

.split-media img.split-photo-left {
  object-position: left center;
}

.split-chevrons {
  position: absolute;
  z-index: 2;
  background: url("assets/brand/corner-bracket-top-right-blue.png") center / contain no-repeat;
  pointer-events: none;
}

.split-chevrons-top {
  top: -0.35rem;
  right: -0.35rem;
  width: 4.25rem;
  height: 4.25rem;
  opacity: 1;
}

.split-chevrons-side {
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0.9;
}

.split-copy {
  position: relative;
  max-width: 34rem;
}

.split-copy h2 { margin-bottom: 1rem; }

.services-section {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.services-section > .wrap {
  position: relative;
  z-index: 1;
  padding-top: 0;
}

/* Alternating section brand backgrounds */
.section-brand-wrap {
  position: relative;
  overflow: hidden;
  /* Extra footroom so corner brand art never crowds the last row of content.
     Scales with the viewport so it stays proportional to .section's own rhythm
     instead of leaving a fixed 90px hole on small screens. */
  padding-bottom: clamp(2.75rem, 6.5vw, 5.625rem);
}

.section-brand-wrap > .wrap,
.section-brand-wrap.benefit-bar > .wrap {
  position: relative;
  z-index: 1;
}

.section-brand-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  width: min(44vw, 440px);
  height: auto;
  opacity: 0.07;
}

.section-brand-deco-full {
  top: -25%;
  right: -15%;
  bottom: -25%;
  left: -15%;
  width: auto;
  height: auto;
  max-width: none;
  transform: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.14;
}

.section-brand-deco-dark {
  opacity: 0.18;
  mix-blend-mode: normal;
  filter: brightness(1.35);
}

.section-brand-deco-tr {
  top: 10%;
  right: -7%;
  transform: rotate(-10deg);
}

.section-brand-deco-tl {
  top: 14%;
  left: -9%;
  transform: rotate(14deg);
}

.section-brand-deco-bl {
  bottom: 6%;
  left: -9%;
  transform: rotate(-12deg);
}

.section-brand-deco-br {
  bottom: 10%;
  right: -7%;
  transform: rotate(8deg);
}

/* Services */
.services-section {
  background: var(--white);
}

/* Flex rather than grid so a card count that does not divide evenly into the
   column count (seven services over three columns) leaves its final row centred
   instead of stranding one card against the left edge. Cards keep an identical
   width either way. */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.services-grid > .service-card {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .services-grid {
    gap: 1.75rem;
  }

  .services-grid > .service-card {
    flex: 0 1 calc((100% - 1.75rem) / 2);
  }
}

/* Three columns once there is room for the photo + navy body. */
@media (min-width: 1000px) {
  .services-grid {
    gap: 2rem;
    max-width: none;
    margin-inline: 0;
  }

  .services-grid > .service-card {
    flex: 0 1 calc((100% - 4rem) / 3);
  }
}

@media (min-width: 1000px) {
  .service-card-photo { min-height: 13.5rem; }
  .service-card-body { padding: 1.5rem 1.55rem 1.55rem; }
  .service-card-body h3 { font-size: 1.1875rem; }
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.service-card-photo {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 11.5rem;
  background: var(--paper);
}
.service-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}
.service-card:hover .service-card-photo img { transform: scale(1.03); }
.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.45rem 1.45rem;
}
.service-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: var(--blue);
  background: var(--sky-dim);
}
.service-card-body h3 { flex: 1; min-width: 0; }
.service-card-icon.icon svg { width: 1.15rem; height: 1.15rem; }
.service-card-body h3 { font-size: 1.125rem; margin: 0; }
.service-card-desc {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-size: 0.96875rem;
  line-height: 1.55;
  color: var(--muted);
}

.service-card-cta {
  display: inline;
  margin: 0 0 0 0.2rem;
  padding: 0.08rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--blue);
  background: rgba(var(--sky-rgb), 0.28);
  border-radius: 3px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.service-card:hover .service-card-cta {
  background: rgba(var(--sky-rgb), 0.4);
  color: var(--navy);
}

.service-micro-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(var(--navy-ink-rgb), 0.08);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
.service-micro-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.service-micro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: var(--blue);
  background: rgba(var(--sky-rgb), 0.14);
}
.service-micro-icon.icon svg { width: 1.15rem; height: 1.15rem; }
.service-micro-icon img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}

/* Process split (Luxury Lane pattern) */
.process-split {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--text-on-dark);
}
.process-split-head { margin-bottom: 2.5rem; }
.process-split-head h2 { color: var(--white); }
.section-label-light { color: var(--sky); }
.section-lead-light { color: var(--text-on-dark-muted); max-width: 40rem; margin-inline: auto; }

.process-split-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.process-steps {
  list-style: none;
  /* Guaranteed breathing room after the last step, whatever the column height
     does to the trust block's auto margin. */
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}

.process-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.process-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky) 0%, var(--blue) 100%);
  color: var(--navy-deep);
  box-shadow: 0 4px 16px rgba(var(--sky-rgb), 0.25);
}
.process-step-icon svg { width: 1.65rem; height: 1.65rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.process-step-label {
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.process-step h3 {
  margin-bottom: 0.35rem;
  font-size: 1.0625rem;
  color: var(--white);
}

.process-step p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
}

.process-steps-col {
  display: flex;
  flex-direction: column;
}

.process-trust {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(var(--sky-rgb), 0.2);
}

.process-trust-title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--sky);
}

.process-trust-rating {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.35rem, 1.5vw, 0.65rem);
  margin-bottom: 0.65rem;
  min-width: 0;
}

.process-trust-rating .review-platforms-badge,
.process-trust-rating .rating-stars,
.process-trust-rating .process-trust-score {
  flex-shrink: 0;
}

.process-trust-score {
  font-size: clamp(0.6875rem, 2.5vw, 0.9375rem);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.process-trust-note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}

/* The homepage composition is the reference for this section on every page,
   so the form column keeps the same cap sitewide rather than widening to fill
   whatever container the host page provides. */
.process-form-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 24rem;
  margin-inline: auto;
  width: 100%;
}

.quote-card-process {
  background: var(--white);
  border: 1px solid rgba(var(--sky-rgb), 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  padding: 1.15rem 1.15rem 1rem;
}

.quote-card-process .quote-advisor {
  min-height: 4.5rem;
  margin-bottom: 0.65rem;
  padding: 0.25rem 0 0.65rem;
  gap: 0.65rem;
  align-items: center;
}

.quote-card-process .quote-advisor-avatar {
  width: auto;
  height: 5.85rem;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.quote-card-process .quote-advisor-photo {
  position: static;
  width: auto;
  height: 5.85rem;
  max-width: 7rem;
  object-fit: contain;
  object-position: bottom left;
}

.quote-card-process .quote-advisor-label {
  font-size: 1.25rem;
}

.quote-card-process .quote-card-head h2 {
  color: var(--ink);
  font-size: 1.25rem;
}

.quote-card-process .quote-card-head p {
  color: var(--muted);
  font-size: 0.8125rem;
}

.quote-card-process .quote-form {
  --qf-gap: 0.55rem;
  margin-top: 0.65rem;
}

.quote-card-process .quote-form label span {
  color: var(--ink);
  font-size: 0.8125rem;
}

.quote-card-process .quote-form input {
  background: var(--paper);
  border-color: rgba(var(--navy-ink-rgb), 0.14);
  padding: 0.55rem 0.65rem;
  font-size: 0.875rem;
}

.quote-card-process .btn {
  min-height: 2.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}

.quote-card-process .form-note {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.quote-card-process .form-note .icon { color: var(--blue); }

.process-disclaimer {
  margin-top: 2rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
}

/* Steps (legacy cards — kept for reference elsewhere if needed) */
.steps-grid { display: grid; gap: 1.25rem; }
.step-card {
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--blue);
  background: var(--sky-dim);
}
.step-card h3 { margin-bottom: 0.5rem; font-size: 1.0625rem; }
.step-card p { font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }

/* Why */
.why-section { background: var(--paper); }
.why-grid { display: grid; gap: 2.5rem; align-items: center; }
.why-copy { max-width: 34rem; }
.why-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 600;
}
.why-list .icon { color: var(--blue); width: auto; height: auto; }
.why-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.why-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Testimonials section */
.testimonials-section {
  background: var(--white);
  overflow: hidden;
}

.testimonials-section > .wrap {
  overflow: visible;
}

.testimonials-head { margin-bottom: 1.25rem; }

.testimonials-head.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials-lead {
  max-width: 36rem;
  margin: 0.65rem auto 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}

.testimonials-customers-count {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.testimonials-customers-count strong {
  color: var(--blue);
  font-weight: 800;
}

.testimonials-kicker {
  margin-bottom: 1.25rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.testimonials-rating-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.testimonials-shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
}

.testimonials-shield-badge .icon svg {
  width: 1rem;
  height: 1rem;
}

.testimonials-rating-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 22rem;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.testimonials-rating-copy {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.testimonials-rating-platforms {
  flex-shrink: 0;
  gap: 0.6rem;
  padding-right: 0.75rem;
  margin-right: 0;
  border-left: none;
  border-right: 1px solid rgba(var(--navy-ink-rgb), 0.12);
}

.testimonials-rating-platforms .platform-logo-fb,
.testimonials-rating-platforms .platform-logo-google {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  position: static;
  filter: none;
}

.testimonials-rating-label {
  font-size: clamp(0.8125rem, 2.8vw, 0.9375rem);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.testimonials-rating-stars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.testimonials-rating-stars .stars {
  flex-shrink: 0;
}

.testimonials-rating-stars .stars svg {
  width: 1rem;
  height: 1rem;
}

.testimonials-score {
  font-size: clamp(0.75rem, 2.6vw, 0.875rem);
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Auto-scrolling customer photo lane */
.testimonials-photo-lane {
  margin: 2rem 0 2.5rem;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.testimonials-photo-track {
  display: flex;
  width: max-content;
  animation: testimonials-photo-scroll 45s linear infinite;
  will-change: transform;
}

.testimonials-photo-set {
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
  padding-right: 1.25rem;
}

.testimonials-photo-track img {
  width: min(380px, 58vw);
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

@keyframes testimonials-photo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reviews slider with arrows */
.reviews-slider,
.reviews-slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(0.75rem, 3vw, 2rem);
  box-sizing: border-box;
}

.reviews-track-wrap,
.reviews-track-outer {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
}

.reviews-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.35rem 0.15rem 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews-track::-webkit-scrollbar { display: none; }

.reviews-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.reviews-arrow:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.reviews-arrow svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Testimonial cards — masonry-style heights */
.testimonial-card {
  flex: 0 0 min(88vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.35rem 1.15rem;
  background: rgba(var(--sky-rgb), 0.12);
  border: 1px solid rgba(var(--blue-rgb), 0.1);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(var(--navy-rgb), 0.06);
  min-height: 220px;
}

.testimonial-card-tall { min-height: 280px; }

.testimonial-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.testimonial-platform {
  flex-shrink: 0;
}

.testimonial-name {
  margin-bottom: 0.65rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.testimonial-text {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}

.testimonial-tag {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 500;
  color: rgba(var(--navy-ink-rgb), 0.55);
}

/* CTA footer */
.testimonials-cta {
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials-cta-title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  color: var(--ink);
}

.testimonials-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.btn-cta-book {
  min-height: 3rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  background: var(--navy);
  color: var(--white);
}

.btn-cta-book:hover {
  background: var(--navy-deep);
  color: var(--white);
}

.btn-cta-book .icon svg {
  width: 1rem;
  height: 1rem;
}

/* Shared gold stars (also used in hero/process) */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.stars-gold {
  color: var(--gold-star);
  filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.22));
}
.stars-gold svg {
  fill: var(--gold-star);
  stroke: var(--gold-star);
}
.stars-sm svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .reviews-arrow {
    width: 2.15rem;
    height: 2.15rem;
  }

  .reviews-slider {
    gap: 0.4rem;
  }

  .reviews-track {
    gap: 0.85rem;
  }

  .testimonial-card {
    flex: 0 0 min(68vw, 248px);
    padding: 0.9rem 1rem 0.85rem;
    min-height: 0;
  }

  .testimonial-card-tall { min-height: 0; }

  .testimonial-card-top {
    margin-bottom: 0.6rem;
  }

  .testimonial-name {
    font-size: 0.9375rem;
    margin-bottom: 0.45rem;
  }

  .testimonial-text {
    font-size: 0.8125rem;
    line-height: 1.55;
  }

  .testimonial-tag {
    margin-top: 0.6rem;
    font-size: 0.75rem;
  }

  .testimonials-photo-track img {
    height: 140px;
    width: min(220px, 38vw);
  }
}

/* Mobile brand element tuning */
@media (max-width: 768px) {
  .hero-deco-grass {
    max-height: 2.5rem;
    opacity: 0.24;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    /* The base rule's align-items:start becomes a cross-axis rule once this is
       a column, which shrink-wraps the quote card instead of filling the width. */
    align-items: stretch;
    margin-top: 0;
    padding-top: 1rem;
  }

  .quote-pin-deco {
    width: 4.5rem;
  }

  .quote-card-hero {
    order: 1;
    margin-top: 0;
    padding: 0.95rem 1rem 0.85rem;
  }

  .quote-card-hero .quote-form {
    --qf-gap: 0.45rem;
    margin-top: 0.5rem;
  }

  .quote-card-hero .quote-form input {
    padding: 0.45rem 0.55rem;
    font-size: 0.8125rem;
  }

  .quote-card-hero .btn {
    min-height: 2.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
  }

  .hero-brand {
    order: 0;
  }

  .page-home .process-trust-rating {
    flex-wrap: nowrap;
    gap: 0.45rem;
    max-width: 100%;
  }

  .page-home .process-trust-score {
    white-space: nowrap;
    font-size: clamp(0.75rem, 2.8vw, 0.875rem);
  }

  .page-home .quote-card-head .review-platforms-badge .platform-logo-fb,
  .page-home .quote-card-head .review-platforms-badge .platform-logo-google {
    width: 1rem;
    height: 1rem;
  }

  .quote-card-process .quote-advisor-avatar {
    width: auto;
    height: 4.5rem;
  }

  .quote-card-process .quote-advisor-photo {
    height: 4.5rem;
    max-width: 5.5rem;
  }

  .quote-card-process .quote-advisor-copy .process-trust-score {
    font-size: clamp(0.5625rem, 2.8vw, 0.75rem);
  }

  .quote-card-process .quote-advisor-copy .rating-stars .icon svg {
    width: 0.625rem;
    height: 0.625rem;
  }

  .quote-card-process .quote-advisor-copy .review-platforms-badge .platform-logo-fb,
  .quote-card-process .quote-advisor-copy .review-platforms-badge .platform-logo-google {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  .testimonials-rating-badge {
    max-width: 100%;
    padding: 0.75rem 0.85rem;
    gap: 0.55rem;
  }

  .testimonials-rating-platforms .platform-logo-fb,
  .testimonials-rating-platforms .platform-logo-google {
    width: 1.25rem;
    height: 1.25rem;
  }

  .areas-lines-bg {
    opacity: 0.14;
  }

  .section-brand-deco {
    width: min(85vw, 340px);
    opacity: 0.1;
  }

  .section-brand-deco-full {
    opacity: 0.1;
  }

  .footer-deco-grass-bottom {
    display: none;
  }

  .testimonial-card {
    flex: 0 0 min(62vw, 220px);
    padding: 0.75rem 0.85rem 0.7rem;
    min-height: 0;
  }

  .testimonial-card-tall { min-height: 0; }

  .testimonial-name {
    font-size: 0.875rem;
  }

  .testimonial-text {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .reviews-slider {
    gap: 0.3rem;
  }

  .reviews-arrow {
    width: 2rem;
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-photo-track {
    animation: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: auto;
    padding-bottom: 0.5rem;
  }
}

/* Service areas */
.areas-section {
  position: relative;
  overflow: hidden;
  background: var(--paper-alt);
}

.areas-lines-bg {
  position: absolute;
  inset: -30% -18%;
  width: 136%;
  height: 160%;
  object-fit: cover;
  object-position: center;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.areas-section > .wrap {
  position: relative;
  z-index: 1;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.75rem;
}
.areas-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.25rem;
  padding: 0.75rem 0.85rem 0.75rem 2.25rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: clamp(0.8125rem, 2.6vw, 0.9375rem);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background var(--transition), color var(--transition);
}
.areas-grid a:hover {
  background: var(--blue);
  color: var(--white);
}

/* Map section */
.map-section { background: var(--white); }
.map-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.map-copy .section-lead { margin-top: 0.85rem; }
.map-list {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.map-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.map-list .icon {
  color: var(--blue);
  margin-top: 0.1rem;
}

.map-list .icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Brand pin — matched to the sprite glyphs beside it. The tight-cropped asset
   carries no transparent padding, so its height is the glyph height and the
   3:4 width follows from the aspect ratio instead of being boxed square. */
.map-list-icon {
  width: auto;
  height: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  object-fit: contain;
}
.map-embed-wrap {
  position: relative;
  padding-top: 1.75rem;
}

.map-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: var(--border);
  min-height: 320px;
}

.map-embed iframe {
  width: 100%;
  height: min(420px, 60vw);
  min-height: 320px;
  border: 0;
  display: block;
}

/* Final CTA */
.final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.final-deco-bison {
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%);
  width: min(92vw, 720px);
  height: auto;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}

.final-cta .wrap {
  position: relative;
  z-index: 1;
}
.final-cta h2 { color: var(--white); }
.final-grid { display: grid; gap: 2.5rem; align-items: center; }
.final-copy p { margin-top: 0.85rem; max-width: 32rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text-on-dark-muted); }
.final-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  max-width: 34rem;
}
.final-actions .btn {
  width: 100%;
  padding-inline: 1rem;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .final-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .final-actions .btn {
    max-width: 100%;
    min-width: 0;
    padding-inline: 0.85rem;
    font-size: clamp(0.8125rem, 3.6vw, 0.9375rem);
  }
}

.final-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.final-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--brand-bg);
  color: rgba(255, 255, 255, 0.7);
  padding: 3rem 0 0;
}

.footer-deco-wave,
.footer-deco-grass {
  display: none;
}

.footer-mockup,
.footer-links-row,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-deco-grass-bottom {
  display: none;
}

.footer-mockup {
  display: grid;
  gap: 2rem;
  text-align: center;
}

.footer-contact address {
  margin-top: 0.65rem;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.75;
}

.footer-contact a,
.footer-links-row a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-contact a:hover,
.footer-links-row a:hover { color: var(--sky); }

.footer-logo-center picture { display: block; line-height: 0; }
.footer-logo-center img {
  width: min(200px, 54vw);
  height: auto;
  margin-inline: auto;
  display: block;
}

.footer-social .social-icons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: background var(--transition);
}

.social-icons a:hover {
  background: var(--blue);
  color: var(--white);
}

.social-icons svg {
  width: 1.1rem;
  height: 1.1rem;
}

.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
}

.site-footer h4 { color: var(--white); margin-bottom: 0; font-size: 0.9375rem; }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Mobile bar */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--navy-deep);
  border-top: var(--border);
}
.mobile-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 5.625rem;
  padding: 0.975rem 1.125rem;
  font-size: clamp(0.9375rem, 4.5vw, 1.125rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}
.mobile-bar-call {
  background: var(--white);
  color: var(--blue);
  border-right: 1px solid rgba(var(--navy-rgb), 0.12);
}
.mobile-bar-quote {
  background: #49779d;
  color: var(--white);
  white-space: nowrap;
}

.mobile-bar-quote-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  display: block;
}

.mobile-bar-quote::before {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: url("assets/icons/ld-movers-bison-truck-white.png") center / contain
    no-repeat;
}

.mobile-bar-quote:has(.mobile-bar-quote-icon)::before {
  content: none;
  display: none;
}

.mobile-bar .icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
}

.mobile-bar .icon svg {
  width: 1.65rem;
  height: 1.65rem;
}

.mobile-bar-call .icon svg {
  color: var(--blue);
}

@media (max-width: 768px) {
  .logo img {
    height: clamp(7.5rem, 15vw, 8.625rem);
  }

  /* Drawer logo must match the closed mobile header logo exactly. */
  .nav-drawer-logo {
    height: clamp(7.5rem, 15vw, 8.625rem);
  }

  .nav-drawer-head {
    padding-block: 0.85rem 1rem;
  }

  /* Call + quote halves share one icon box and label size. */
  .mobile-bar {
    --mobile-bar-icon-size: 2.25rem;
    --mobile-bar-label-size: clamp(0.9375rem, 3.6vw, 1.0625rem);
  }

  .mobile-bar a,
  .mobile-bar-quote {
    font-size: var(--mobile-bar-label-size);
    gap: 0.65rem;
  }

  .mobile-bar .icon,
  .mobile-bar-quote-icon,
  .mobile-bar-quote::before {
    width: var(--mobile-bar-icon-size);
    height: var(--mobile-bar-icon-size);
  }

  .mobile-bar .icon svg {
    width: 1.65rem;
    height: 1.65rem;
  }
}

/* Responsive */
/* Inner pages — breadcrumb + hero typography (photo shell defined with sticky rail). */
.page-hero .wrap { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
}
.breadcrumb a { color: var(--sky); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.85); }
.page-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  max-width: 28ch;
  color: var(--white);
}
.page-hero-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
  margin-bottom: 0;
}
.page-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sky);
}
.content-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center;
  background: var(--gray-100);
  aspect-ratio: 4 / 3;
}
.content-figure {
  margin: 0;
  min-width: 0;
}
/* Source photos vary from 1.2:1 to 2.4:1, so pin the slot and crop to fill */
.content-figure .content-image {
  aspect-ratio: 4 / 3;
  object-position: center;
}
/* Cost tables in the long-form SEO sections */
.table-wrap {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cost-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.cost-table th,
.cost-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.cost-table thead th {
  font-weight: 700;
  color: var(--navy, #10233d);
  background: var(--gray-100, #f3f4f6);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.cost-table tbody tr:last-child td { border-bottom: none; }
.cost-table td:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.check-list {
  margin: 1.25rem 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.65rem;
}
.check-list li { line-height: 1.65; }
.content-grid-2 {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

/* Sections whose copy is too long to sit beside a photo: the text keeps the full
   content column and the photo follows as a band underneath. Stays one column at
   every breakpoint, so nothing has to be re-taught at each media query. */
.content-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.content-band {
  margin: 0;
  min-width: 0;
}

.content-image-band {
  width: 100%;
  height: auto;
  /* Wider than the 4:3 side-column crop: as a full-width band the same photo
     would otherwise become the tallest thing in the section. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
}

/* Crew photos in the band: anchor high so a 16:9 crop keeps every face in frame. */
.content-image-band.content-image-band-people {
  object-position: center 22%;
}

@media (max-width: 600px) {
  /* The 4:3 mobile band is shorter; lift the anchor so foreheads stay in frame. */
  .content-image-band.content-image-band-people {
    object-position: center 14%;
  }
}

@media (max-width: 600px) {
  /* A 16:9 band gets too short to read on a phone. */
  .content-image-band {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  /* Keep an image → text rhythm when stacked so adjacent sections never show
     back-to-back hero photos on phones. */
  .content-grid-2 > .split-media,
  .content-grid-2 > .content-image,
  .content-grid-2 > img.content-image,
  .content-grid-2 > .content-figure {
    order: -1;
  }

  .section > .wrap.content-grid-2 + .section,
  .section.content-grid-2 + .section {
    margin-top: 0.5rem;
  }
}

@media (min-width: 768px) {
  .content-grid-2 > .content-image,
  .content-grid-2 > img.content-image,
  .content-grid-2 > .split-media,
  .content-grid-2 > .content-figure {
    margin-top: 0;
    align-self: center;
  }
}
.content-grid-3 {
  display: grid;
  gap: 1.25rem;
}
.faq-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: min(34rem, 100%);
  max-width: 100%;
  margin-inline: auto;
}
.faq-item {
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-md);
  background: #49779D;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-sm);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.faq-item h3 {
  font-size: 1rem;
  margin: 0 0 0.45rem;
  color: var(--white);
}
.faq-item p { margin: 0; color: rgba(255, 255, 255, 0.92); line-height: 1.65; }
.contact-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.contact-grid-centered .contact-grid-copy,
.contact-grid .prose.contact-grid-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-info-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-sm);
}
.contact-info-card h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.contact-info-card address { font-style: normal; line-height: 1.8; }
.contact-info-card a { color: var(--blue); text-decoration: none; font-weight: 600; }
.contact-info-card a:hover { text-decoration: underline; }
.service-index-card {
  display: grid;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-index-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-index-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.service-index-card-body { padding: 1.25rem 1.35rem 1.35rem; }
.service-index-card-body .value-card-title { margin-bottom: 0.5rem; }
.service-index-card-body h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; color: var(--navy); }
.service-index-card-body p { margin: 0; font-size: 0.9375rem; color: var(--gray-700); line-height: 1.6; }
.reviews-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  margin-bottom: 2rem;
}
.reviews-summary-score {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}
.values-grid {
  display: grid;
  gap: 1.25rem;
}
.value-card {
  padding: 1.35rem;
  border-radius: var(--radius-md);
  background: var(--white);
  border: var(--border);
}
.value-card h3 { font-size: 1rem; margin: 0 0 0.45rem; color: var(--navy); }
.value-card p { margin: 0; font-size: 0.9375rem; color: var(--gray-700); line-height: 1.6; }
.inner-cta-band {
  padding: 2.5rem 0;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.inner-cta-band h2 { color: var(--white); margin-bottom: 0.75rem; }
.inner-cta-band p {
  max-width: 42ch;
  margin-inline: auto;
  color: rgba(255,255,255,0.85);
}
.inner-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.tips-list {
  margin: 1.25rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.65rem;
  line-height: 1.65;
  color: var(--muted);
}
.tips-list li { padding-left: 0.25rem; }

.related-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.related-links-grid > * { height: 100%; }
.related-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 3.25rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: var(--border);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  text-wrap: balance;
  transition: background var(--transition), color var(--transition);
}
.related-link:hover {
  background: var(--blue);
  color: var(--white);
}

.article-prose {
  max-width: 46rem;
  margin-inline: auto;
}
.article-prose h2 { margin-top: 0; margin-bottom: 1rem; }
.article-prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
  font-size: 1.0625rem;
}
.article-prose p + p { margin-top: 1rem; }
.article-prose a { font-weight: 600; }

@media (min-width: 640px) {
  .benefit-grid-mockup { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid-2 { grid-template-columns: 1fr 1fr; }
  .content-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.1fr; }
}

@media (min-width: 960px) {
  .contact-grid-reviews-quote {
    grid-template-columns: 0.78fr 1.22fr;
    align-items: stretch;
  }

  .contact-grid-reviews-quote .quote-card-hero {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }
  .split-section { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .final-grid { grid-template-columns: 1fr 1fr; }
  .map-grid { grid-template-columns: 1fr 1.1fr; }
  /* Center step copy vertically against the quote form. */
  .process-split-grid {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
    width: min(56rem, 100%);
    margin-inline: auto;
  }
  .process-steps-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .process-form-col { margin-inline: 0; justify-content: center; }
  .process-trust { margin-top: 2.25rem; padding-top: 2.25rem; }
  .footer-mockup {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    text-align: left;
  }
  .footer-logo-center { text-align: center; }
  .footer-social { text-align: right; }
  .footer-social .social-icons { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .service-card:hover { transform: none; }
  .clients-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  /* Without the scroll there is no seam to hide, so the duplicate logos would
     only wrap into repeated rows. */
  .clients-marquee-track img[aria-hidden="true"] { display: none; }
  .service-card:hover .service-card-photo img { transform: none; }
}

/* ==========================================================================
   Brand pass: LD icon set, unified quote buttons, and richer section decor
   ========================================================================== */

/* --- One shared "Get Free Quote" button ---------------------------------- */

/* Declared after the .btn-* variants so a single rule wins wherever these
   buttons appear: header, mega-menu, drawer, section CTAs, and form submit. */
.btn-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  background: #49779d;
  color: var(--white);
  border: 1px solid #49779d;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}

.btn-quote:hover,
.btn-quote:focus-visible {
  background: #3b6181;
  border-color: #3b6181;
  color: var(--white);
}

.btn-quote.btn-block { width: 100%; }

.btn-quote-icon {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  background: url("assets/icons/ld-movers-bison-truck-white.png") center / contain
    no-repeat;
}

.header-cta.btn-quote .btn-quote-icon {
  width: 1.65rem;
  height: 1.65rem;
}

/* The header sits on a fixed-height bar, so its copy of the button is trimmed. */
.header-cta.btn-quote {
  min-height: 2.6rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding: 0 0 clamp(4.5rem, 10vw, 6.75rem);
}

.hero-grid {
  padding-top: clamp(2.6rem, 6vw, 4.15rem);
}

@media (min-width: 769px) {
  .hero-grid {
    /* Centring the tracks lines the headline block up with the middle of the
       quote card instead of pinning it to the top. */
    align-items: center;
    min-height: min(82vh, 46rem);
    gap: 2.25rem;
    max-width: 1060px;
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }

  /* The column already stretches to the card's height, so centring its content
     is what lines the headline up with the middle of the form. */
  .hero-brand { 
    justify-content: flex-start;
    padding-top: 200px; 
  }

  .hero-brand h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); max-width: 40rem; }
  .hero-accent { font-size: 1.0625rem; }
}

/* Less transparency so the badge and the form read clearly over the photo. */
.hero-brand .rating-badge { background: rgba(255, 255, 255, 0.28); }

.quote-card-hero,
.quote-card-solid,
.quote-card-process.quote-card-solid {
  background: #162033;
  border-color: rgba(var(--sky-rgb), 0.35);
  color: var(--white);
}

.quote-card-hero .quote-card-head h2 { font-size: 1.5rem; }

/* The rating strip now appears in the hero card and the advisor block. */
.quote-card-head .process-trust-rating {
  margin-top: 0.5rem;
  margin-bottom: 0;
  gap: 0.5rem;
}

.quote-card-hero .process-trust-score { color: var(--white); }

@media (max-width: 768px) {
  /* Show the top of the crew photo rather than its middle on small screens. */
  .hero-pattern { background-position: center top; }
}

/* --- Section decor ------------------------------------------------------- */

/* Spans the full section width instead of sitting in one corner. */
.section-brand-deco-band {
  top: 50%;
  left: 50%;
  width: 118%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.09;
}

/* How-it-works and any section using map-lines.png — full-section background wash. */
.section-brand-deco-map-lines,
.section-brand-wrap > img.section-brand-deco[src*="map-lines.png"]:not([src*="transparent"]),
.section-brand-wrap > img.section-brand-deco[src*="map-lines-navy.png"] {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(180%, 1600px);
  max-width: none;
  height: auto;
  min-height: 140%;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  object-fit: cover;
  object-position: center;
}

/* Homepage FAQ — navy map grid on the light section wash. */
.section-brand-deco-map-lines.section-brand-deco-service,
.section-brand-wrap > img.section-brand-deco[src*="map-lines.png"]:not([src*="transparent"]).section-brand-deco-service {
  opacity: 0.05;
  width: min(180%, 1600px);
}

/* Corner position classes must not shrink map-lines back to a wedge. */
.section-brand-wrap > img.section-brand-deco[src*="map-lines.png"]:not([src*="transparent"]).section-brand-deco-bl,
.section-brand-wrap > img.section-brand-deco[src*="map-lines.png"]:not([src*="transparent"]).section-brand-deco-br,
.section-brand-wrap > img.section-brand-deco[src*="map-lines.png"]:not([src*="transparent"]).section-brand-deco-tr,
.section-brand-wrap > img.section-brand-deco[src*="map-lines.png"]:not([src*="transparent"]).section-brand-deco-service {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(180%, 1600px);
  transform: translate(-50%, -50%);
}

.section-brand-deco-soft {
  opacity: 0.045;
}

/* Service / local-moving pages — visible brand art kept in corners behind content. */
.section-brand-deco-service {
  opacity: 0.14;
  width: min(38vw, 360px);
  z-index: 0;
}

.section-brand-deco-service.section-brand-deco-bl {
  bottom: 8%;
  left: -6%;
}

.section-brand-deco-service.section-brand-deco-br {
  bottom: 10%;
  right: -6%;
}

.section-brand-deco-service.section-brand-deco-tr {
  top: 8%;
  right: -6%;
}

/* Diagonal hoof tracks span service sections behind all content. */
.section-hoof-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(135%, 980px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%) rotate(-18deg);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.section-grass-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.12;
}

.process-split > .wrap { position: relative; z-index: 1; }

/* Photo containers clip their overflow, so the chevron sits just inside. */
.service-card-photo,
.why-media,
.final-image { position: relative; }

.service-card-photo .split-chevrons-top,
.why-media .split-chevrons-top,
.final-image .split-chevrons-top {
  top: 0.85rem;
  right: 0.85rem;
  width: 3rem;
  height: 2.1rem;
  opacity: 0.95;
}

/* --- Service cards ------------------------------------------------------- */

.service-card-body {
  /* Match the site header shell so service cards feel like the brand chrome. */
  background: var(--brand-bg);
  color: var(--white);
}

.service-card-body h3 { color: var(--white); }

.service-card-desc { color: rgba(255, 255, 255, 0.88); }

.service-card-cta {
  color: var(--white);
  background: rgba(255, 255, 255, 0.18);
}

.service-card-icon {
  width: 3.15rem;
  height: 3.15rem;
  margin-left: auto;
  order: 2;
  background: rgba(255, 255, 255, 0.18);
}

.service-card-icon img {
  width: 1.9rem;
  height: 1.9rem;
  object-fit: contain;
}

.service-micro-list li { color: rgba(255, 255, 255, 0.92); }

.service-micro-icon {
  width: 3.15rem;
  height: 3.15rem;
  background: rgba(255, 255, 255, 0.18);
}

.service-micro-icon img {
  width: 1.9rem;
  height: 1.9rem;
  object-fit: contain;
}

/* --- Benefit bar --------------------------------------------------------- */

.benefit-icon-lg img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

/* --- Process steps ------------------------------------------------------- */

.process-steps { gap: 1rem; margin-bottom: 1.5rem; }

.process-step-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(var(--sky-rgb), 0.18);
  box-shadow: none;
}

.process-step-icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.process-step h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.process-step p { font-size: 0.875rem; line-height: 1.5; }

/* Advisor + trust row — one shared layout for every quote-card-process form. */
.quote-card-process .quote-advisor-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.quote-card-process .quote-advisor-copy .quote-advisor-label {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quote-card-process .quote-advisor-copy .process-trust-rating {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.2rem, 1.2vw, 0.4rem);
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.quote-card-process .quote-advisor-copy .process-trust-rating .review-platforms-badge,
.quote-card-process .quote-advisor-copy .process-trust-rating .rating-stars,
.quote-card-process .quote-advisor-copy .process-trust-rating .process-trust-score {
  flex-shrink: 0;
}

.quote-card-process .quote-advisor-copy .review-platforms-badge {
  gap: 0.35rem;
  padding-right: 0.45rem;
  margin-right: 0;
}

.quote-card-process .quote-advisor-copy .review-platforms-badge .platform-logo-fb,
.quote-card-process .quote-advisor-copy .review-platforms-badge .platform-logo-google {
  width: 0.9rem;
  height: 0.9rem;
}

.quote-card-process .quote-advisor-copy .rating-stars {
  gap: 0;
}

.quote-card-process .quote-advisor-copy .rating-stars .icon svg {
  width: 0.7rem;
  height: 0.7rem;
}

.quote-card-process .quote-advisor-copy .process-trust-score {
  font-size: clamp(0.625rem, 2.2vw, 0.8125rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Testimonials -------------------------------------------------------- */

.testimonials-customers-count {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

.testimonials-lead { max-width: none; white-space: nowrap; }

@media (max-width: 720px) {
  .testimonials-lead { white-space: normal; }
}

.testimonials-photo-lane-compact {
  margin: 0 0 1.5rem;
}

.page-hero-reviews + .testimonials-photo-lane-compact {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.testimonials-photo-lane-compact .testimonials-photo-track img {
  width: min(340px, 52vw);
  height: 240px;
}

/* --- Service areas ------------------------------------------------------- */

.areas-section {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}

.areas-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/photos/service-areas-bg.jpg") center / cover no-repeat;
}

.areas-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 24, 40, 0.86) 0%,
    rgba(8, 24, 40, 0.78) 100%
  );
}

.areas-section > .wrap { position: relative; z-index: 2; }
.areas-section .areas-lines-bg { opacity: 0.08; }
.areas-section .section-head h2 { color: var(--white); }
.areas-section .section-lead { color: var(--text-on-dark-muted); }

/* --blue label text over the darkened service-areas photo measured 2.7-3.6:1,
   under the 4.5:1 floor. The inactive CTAs get white labels on a navy plate:
   the plate is opaque enough that even the brightest highlight in the photo
   behind cannot pull the ratio under the floor. */
.areas-section .btn-secondary {
  background: rgba(var(--navy-rgb), 0.62);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.areas-section .btn-secondary:hover,
.areas-section .btn-secondary:focus-visible {
  background: var(--blue);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.72);
}

/* Light chips keep the navy pin and label legible over the darkened photo. */
.areas-grid a::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0;
  background: url("assets/icons/icon-bison-location-pin-navy.png") center / contain
    no-repeat;
}

.areas-grid a:hover::before {
  filter: brightness(0) invert(1);
}

/* --- FAQ ----------------------------------------------------------------- */

.faq-item {
  padding: 0;
  background: #49779D;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Clips the answer's top border to the rounded shell. */
  overflow: hidden;
}

.faq-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
  color: var(--white);
}

.faq-summary h3 {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.faq-summary::-webkit-details-marker { display: none; }

.faq-item h3 { margin: 0; color: var(--white); }

.faq-marker {
  position: relative;
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  transition: transform var(--transition);
}

.faq-marker::before,
.faq-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  transform: translateY(-50%);
}

.faq-marker::after { transform: translateY(-50%) rotate(90deg); }

.faq-item[open] .faq-marker::after { opacity: 0; }

/* Answers stay in normal flow: an open item grows and pushes the rest of the
   page down. Floating the panel let it cover the following questions and, on
   short sections, the section after it. */
.faq-answer {
  padding: 0 1.35rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1rem;
}

.faq-answer p { margin: 0; color: rgba(255, 255, 255, 0.92); line-height: 1.65; }
.faq-answer a { color: var(--sky); }

.faq-summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* --- Homepage FAQ surface + speed-chevron decoration --------------------- */

/* A soft blue wash instead of flat white: the #49779D fold chips read as part of
   the section rather than floating on paper, and it separates the FAQ from the
   white map section that follows. */
.faq-section {
  --faq-col: min(34rem, 100%);
  background:
    linear-gradient(
      180deg,
      rgba(var(--sky-rgb), 0.06) 0%,
      rgba(var(--blue-rgb), 0.13) 100%
    ),
    var(--white);
}

/* Three chevrons aim at the fold stack: two running in from the left, one
   mirrored on the right. Every offset is measured from the centred fold column
   (--faq-col), not the viewport, so the arrows keep pointing at the folds at any
   width, and the vertical percentages redistribute when an item opens and the
   section grows. */
.faq-chevron {
  position: absolute;
  z-index: 0;
  display: none;
  width: clamp(3.75rem, 6vw, 7rem);
  height: auto;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.faq-chevron-lead {
  top: 28%;
  right: calc(50% + var(--faq-col) / 2 + clamp(1rem, 3vw, 3.5rem));
  transform: rotate(10deg);
}

.faq-chevron-trail {
  top: 62%;
  right: calc(50% + var(--faq-col) / 2 + clamp(2.5rem, 7vw, 8rem));
  transform: rotate(-8deg);
  opacity: 0.19;
}

.faq-chevron-return {
  top: 44%;
  left: calc(50% + var(--faq-col) / 2 + clamp(1rem, 3vw, 3.5rem));
  /* Mirrored so it points back at the folds instead of away from them. */
  transform: scaleX(-1) rotate(10deg);
}

/* Only shown once the margins beside the 34rem fold column are wide enough to
   hold a chevron without crowding the controls or the viewport edge. */
@media (min-width: 900px) {
  .faq-chevron { display: block; }
}

/* --- Nav icons ----------------------------------------------------------- */

/* The drawer and mega-menu now use LD artwork instead of the sprite. */
img.nav-drawer-icon {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}

.nav-service-link img.nav-drawer-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ==========================================================================
   Sitewide pass: solid quote cards, sticky rail, taller page heroes, folds
   ========================================================================== */

.quote-card-solid,
.quote-card-hero.quote-card-solid,
.quote-card-process.quote-card-solid {
  background: #162033 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.quote-card-solid .quote-card-head h2,
.quote-card-solid .quote-sticky-head h2 {
  color: var(--white);
}

/* The dark shell drops the default asterisk red to 3.0:1. */
.quote-card-solid .field-req {
  color: var(--req-mark-on-dark);
}

.quote-card-solid .quote-card-head p,
.quote-card-solid .quote-sticky-head p,
.quote-card-solid .quote-card-head .process-trust-score,
.quote-card-solid .quote-sticky-head ~ .process-trust-rating .process-trust-score,
.quote-card-solid .quote-step-count,
.quote-card-solid .form-note,
.quote-card-solid .quote-form label span {
  color: rgba(255, 255, 255, 0.88);
}

.quote-card-solid .quote-form input,
.quote-card-solid .quote-form select,
.quote-card-solid .quote-form textarea {
  background: var(--white);
  color: var(--ink);
}

/* Advisor photo forms use a full white card shell sitewide. */
.quote-card-process.quote-card-solid:has(.quote-advisor) {
  background: var(--white) !important;
  border: 1px solid rgba(var(--sky-rgb), 0.45) !important;
  color: var(--ink);
  box-shadow: 0 16px 48px rgba(var(--navy-rgb), 0.12);
}

.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-card-head h2,
.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-advisor-label {
  color: var(--ink);
}

.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-card-head p,
.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-advisor .process-trust-score,
.quote-card-process.quote-card-solid:has(.quote-advisor) .form-note,
.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-form label span,
.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-step-count {
  color: var(--muted);
}

.quote-card-process.quote-card-solid:has(.quote-advisor) .field-req {
  color: var(--req-mark);
}

.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-advisor {
  background: transparent;
  margin: 0 0 0.65rem;
  padding: 0.25rem 0 0.65rem;
  border-bottom: 1px solid rgba(var(--navy-ink-rgb), 0.1);
}

.quote-card-process.quote-card-solid:has(.quote-advisor) .quote-form-mark-pin {
  background-image: url("assets/icons/icon-bison-location-pin-navy.png");
}

.quote-form-mark-pin {
  background-image: url("assets/icons/icon-bison-location-pin-white.png");
}

.quote-sticky-pin {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.quote-sticky-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.quote-sticky-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.quote-sticky-head p {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
}

/* Right-rail sticky quote on service / location pages. */
.sticky-quote-col,
.sticky-quote-rail {
  display: none;
}

@media (min-width: 1100px) {
  body.has-sticky-quote {
    --sticky-rail-w: 22.5rem;
  }

  main.has-sticky-quote {
    position: relative;
    /* The one inset the whole sticky layout is built from: the distance between
       the viewport edge and the shared container. Percentages here resolve
       against main, so this is the real page inset, scrollbar excluded. */
    --sticky-inset: max(var(--page-gutter), calc((100% - var(--maxw)) / 2));
  }

  /* Sticky pages use the same centred container as every other page, so a
     section's left edge is identical here, on non-sticky pages, and on the
     trailing Step by Step band. */
  main.has-sticky-quote > .page-hero .wrap,
  main.has-sticky-quote > .section > .wrap {
    width: var(--wrap);
    max-width: var(--maxw);
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* Beside the rail the container spans main so both gaps can be derived from
     --sticky-inset: the copy keeps the shared left edge, and the space it leaves
     before the rail is that same inset again. The two gaps are therefore equal by
     construction at every width and zoom level, and the reading column keeps a
     constant measure instead of collapsing as the viewport widens. */
  main.has-sticky-quote .sticky-page-body .wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
    padding-left: var(--sticky-inset);
    padding-right: calc(
      var(--sticky-inset) + var(--page-gutter) + var(--sticky-rail-w)
    );
  }

  main.has-sticky-quote .sticky-page-body .content-grid-2,
  main.has-sticky-quote .sticky-page-body .content-image,
  main.has-sticky-quote .sticky-page-body .split-media,
  main.has-sticky-quote .sticky-page-body .content-figure {
    max-width: 100%;
  }

  /* The trailing Step by Step band is the one section a sticky page shares
     verbatim with the homepage, and the rail has already stopped by the time it
     appears. So it opts out of the sticky column entirely: shared centred
     container, no rail reserve, centred head — otherwise the left-aligned
     sticky-body rules above would left-anchor its subtitle and the section would
     stop matching the homepage. */
  main.has-sticky-quote .sticky-page-body .section.process-split > .wrap {
    width: var(--wrap);
    max-width: var(--maxw);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
  }

  main.has-sticky-quote .section.process-split > .wrap > .section-head.center,
  main.has-sticky-quote .sticky-page-body .section.process-split > .wrap > .section-head.center {
    text-align: center;
  }

  main.has-sticky-quote .section.process-split > .wrap > .section-head.center .section-lead,
  main.has-sticky-quote
    .sticky-page-body
    .section.process-split
    > .wrap
    > .section-head.center
    .section-lead {
    margin-inline: auto;
  }

  /* Hub pages without a sticky rail (about, reviews). */
  main.page-hub-hero > .page-hero .page-hero-copy,
  main.page-hub-hero > .page-hero .page-hero-copy h1 {
    text-align: left;
  }

  main.page-hub-hero > .page-hero .page-hero-grid-single {
    max-width: min(42rem, 100%);
  }

  /* About / reviews — centered body; hero stays left-aligned above. */
  main.page-hub-hero:not(.page-body-centered) .section > .wrap {
    width: var(--wrap);
    margin-inline: auto;
    margin-left: auto;
  }

  main.page-hub-hero:not(.page-body-centered) .section-head.center,
  main.page-hub-hero:not(.page-body-centered) .section-head.center .section-lead {
    text-align: center;
  }

  main.page-hub-hero:not(.page-body-centered) .section-head.center .section-lead {
    margin-inline: auto;
  }

  /* Locations / services hub indexes — centered body columns. */
  main.page-body-centered .section > .wrap {
    width: var(--wrap);
    margin-inline: auto;
    margin-left: auto;
  }

  main.page-body-centered .section-head.center,
  main.page-body-centered .section-head.center h2,
  main.page-body-centered .section-head.center .section-lead {
    text-align: center;
  }

  main.page-body-centered .section-head.center .section-lead {
    margin-inline: auto;
  }

  main.page-body-centered .prose.center,
  main.page-body-centered .section-head.center {
    text-align: center;
  }

  main.has-sticky-quote .page-hero-grid-single {
    max-width: min(42rem, 100%);
    width: 100%;
  }

  main.has-sticky-quote .page-hero-copy,
  main.has-sticky-quote .page-hero-copy h1,
  main.has-sticky-quote .sticky-page-body .prose,
  main.has-sticky-quote .sticky-page-body .section-head,
  main.has-sticky-quote .sticky-page-body .section-head.center {
    text-align: left;
  }

  /* Fold/FAQ blocks share the same left column as sticky-page prose. */
  main.has-sticky-quote .sticky-page-body .section-fold-column .section-head,
  main.has-sticky-quote .sticky-page-body .section-fold-column .section-head.center,
  main.has-sticky-quote .sticky-page-body .section-fold-column .section-head.center .section-label,
  main.has-sticky-quote .sticky-page-body .section-fold-column .section-head.center h2,
  main.has-sticky-quote .sticky-page-body .section-fold-column .section-head.center .section-lead {
    text-align: left;
  }

  main.has-sticky-quote .sticky-page-body .section:has(> .wrap > .section-fold-column) > .wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  main.has-sticky-quote .section-head.center .section-lead {
    margin-inline: 0;
  }

  main.has-sticky-quote .section-fold-column .section-head.center .section-lead {
    margin-inline: 0;
  }

  /* Single full-width content column; the rail sits in the space reserved for it. */
  .sticky-page-layout {
    position: relative;
    display: block;
  }

  .sticky-page-body {
    min-width: 0;
    width: 100%;
  }

  .sticky-quote-col {
    display: block;
    position: absolute;
    top: 0;
    /* Pinned to the page gutter rather than the container edge. Paired with the
       content column's padding-right, this is what keeps the content-to-rail gap
       equal to the viewport-to-content gap while the reading column holds a
       constant width as the viewport grows. */
    right: var(--page-gutter);
    width: var(--sticky-rail-w);
    height: 100%;
    z-index: 90;
    pointer-events: none;
  }

  .sticky-quote-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow: auto;
    pointer-events: auto;
    margin-top: 0.25rem;
  }

  .sticky-quote-rail .quote-card-sticky {
    padding: 1.25rem 1.3rem 1.15rem;
    font-size: 1.03em;
  }

  .sticky-quote-rail .quote-advisor { display: none; }
}

/* Taller page heroes — background photo only (no duplicate foreground image).
   Height is content-driven here on purpose. A viewport-height minimum left
   120-250px of empty photo between the hero CTA and the next section on any
   phone taller than ~660px; the deliberate taller frame is opted back into at
   the tablet breakpoint below, where there is room for it. */
.page-hero {
  display: flex;
  /* Top-aligned on purpose: centring inside a 44rem shell pushed the headline
     down to ~280px at 1440 and 1920. Anchoring to the top puts the headline at
     the same height on every template and leaves the rest of the photo visible
     below the copy. */
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2.75rem, 6vw, 4.5rem);
  color: var(--white);
  background:
    linear-gradient(100deg, rgba(8, 24, 40, 0.9) 0%, rgba(8, 24, 40, 0.62) 48%, rgba(8, 24, 40, 0.28) 100%),
    var(--page-hero-image, url("assets/photos/team-fleet.jpg")) left center / cover no-repeat;
}

.page-hero::after { display: none; }

/* Tablet and up: give the photo a deliberate frame below the copy. Capped in
   rem so the frame does not jump when the viewport height or zoom changes. */
@media (min-width: 768px) {
  .page-hero { min-height: min(34rem, 76vh); }
  .page-hero-locations { min-height: min(26rem, 62vh); }
  .page-hero-reviews { min-height: min(40rem, 84vh); }
}

.page-hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.page-hero-grid-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 42rem;
}

/* Non-sticky inner pages (not homepage): hero copy column shares the same
   left edge as the first .wrap section below — not a narrowed centred block. */
main:not(.page-home):not(.has-sticky-quote) > .page-hero .wrap.page-hero-grid-single {
  max-width: none;
  width: var(--wrap);
  margin-inline: auto;
}

main:not(.page-home):not(.has-sticky-quote) > .page-hero .page-hero-copy {
  max-width: min(42rem, 100%);
}

.page-hero-media {
  display: none !important;
}

.page-hero-copy {
  color: var(--white);
}

/* Hero rhythm: crumb sits close under the header, the headline reads as one
   tight block, and the trust/CTA group takes the largest step so it reads as a
   separate action row. */
.page-hero .breadcrumb {
  margin-bottom: 0.75rem;
}

.page-hero-copy h1 {
  color: var(--white);
  max-width: 22ch;
  line-height: 1.08;
  margin-bottom: 0.95rem;
}

.page-hero-lead {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

.page-hero-lead a[href^="tel:"] {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-hero-trust-group {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 1.4rem;
  width: 100%;
  max-width: min(24rem, 100%);
}

.page-hero .rating-badge {
  margin-top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
}

.page-hero .hero-trust-row {
  width: 100%;
}

.page-hero .btn-hero-call {
  width: 100%;
  flex: none;
}

.page-hero-trust { display: none !important; }

.areas-section-map-lines::before {
  background: url("assets/brand/map-lines.png") center / cover no-repeat;
  opacity: 0.06;
}

/* Region fold already paints map-lines on ::before — hide the duplicate img. */
.areas-section-map-lines > img.section-brand-deco[src*="map-lines.png"] {
  display: none;
}

.page-hero-locations {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}

/* Desktop heroes are width-constrained by cover, so only the vertical component
   moves the framing; a lower percentage drops the photo down inside the band.
   Both of these had heads cropped against the header. */
.page-hero-apartment {
  background-position: 0 0, center 22%;
}

.page-hero-office {
  background-position: 0 0, left 30%;
}

.page-hero-piano {
  background-size: auto, cover;
  background-position: 0 0, 68% center;
  background-repeat: no-repeat, no-repeat;
}

.page-hero-guide-ld {
  background-position: 0 0, 68% 62%;
}

.page-hero-guide-cost {
  background-position: 0 0, 72% center;
}

@media (min-width: 769px) {
  .page-hero-guide-cost {
    background-position: 0 0, 78% 42%;
  }
}

.page-hero-chicago-route {
  background-position: 0 0, center 58%;
}

.page-hero-reviews {
  /* Crew with dolly and branded truck — keep the mover visible beside headline copy. */
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background-size: auto, cover;
  background-position: 0 0, 42% 38%;
  background-repeat: no-repeat, no-repeat;
}

@media (min-width: 769px) {
  .page-hero-reviews {
    background-size: auto, cover;
    background-position: 0 0, 40% 32%;
  }

  .page-hero-how-it-works {
    background-size: auto, cover;
    background-position: 0 0, 38% 28%;
    background-repeat: no-repeat, no-repeat;
  }
}

@media (max-width: 768px) {
  /* A phone-width cover crop only shows about a third of a landscape hero
     photo. `left center` clipped the crew out of frame (worst on Moving
     Guides); biasing the focal point inward keeps a face in the picture. */
  .page-hero {
    background-position: 0 0, 70% center;
  }

  .page-hero-how-it-works {
    /* Advisor is on the left of the photo; on phones pan the image right so his
       face sits beside the headline instead of underneath the copy. */
    background-size: auto, 115% auto;
    background-position: 0 0, 58% 18%;
    background-repeat: no-repeat, no-repeat;
  }

  .page-hero-services-index {
    background-size: auto, cover;
    background-position: 0 0, 28% center;
    background-repeat: no-repeat, no-repeat;
  }

  .page-hero-reviews {
    background-size: auto, 120% auto;
    background-position: 0 0, 58% 42%;
  }
}

.related-link-pin,
.related-links-grid-pins .related-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  justify-content: flex-start;
  text-align: left;
  padding-inline: 0.9rem;
}

.related-link-pin img,
.related-links-grid-pins .related-link img {
  flex-shrink: 0;
  /* 20px, matching the width/height attributes the generators emit. */
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

/* Foldable region lists — fixed group width; opening must not widen the control. */
.region-fold-list,
.faq-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  width: min(34rem, 100%);
  max-width: 100%;
  margin-inline: auto;
}

main:not(.page-locations-index) .region-fold-list:not(.region-fold-grid) .region-fold,
main:not(.page-locations-index) .faq-list .faq-item,
.faq-list .faq-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.region-fold-list.region-fold-grid {
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 0.75rem 1rem;
}

.region-fold-list.region-fold-grid .region-fold {
  align-self: start;
}

/* Confined to its own column, an expanded list stretches the whole grid row and
   leaves the neighbouring columns empty beside it. Spanning the row keeps the
   reveal in normal flow and lets the links use the full width instead. */
.region-fold-list.region-fold-grid .region-fold[open] {
  grid-column: 1 / -1;
}

/* Every fold control on the site shares one surface colour. #49779D clears
   4.5:1 against white text, so the label and links inside go white. */
.region-fold {
  background: #49779D;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.region-fold-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--white);
  white-space: normal;
}

.region-fold-title {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.region-fold-summary::-webkit-details-marker { display: none; }

.region-fold[open] .faq-marker::after { opacity: 0; }

/* In normal flow, like the FAQ answers: the fold grows and the page below it
   moves down instead of being covered by a floating panel. */
.region-fold .related-links-grid {
  padding: 1rem 1.25rem 1.25rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Tinted with navy rather than white: lightening #49779D drops white label text
   to 3.8:1, darkening it holds above 6:1. */
.region-fold .related-links-grid .related-link {
  color: var(--white);
  background: rgba(var(--navy-rgb), 0.22);
  border-color: rgba(255, 255, 255, 0.22);
}

.region-fold .related-links-grid .related-link:hover,
.region-fold .related-links-grid .related-link:focus-visible {
  background: rgba(var(--navy-rgb), 0.35);
  color: var(--white);
}

/* Route pages — crew portrait crop (Chicago → Seattle includes block).
   The subject is a full-length cutout dropped into a 4:3 frame, so cover hides
   roughly 58% of its height; centring the frame cut the head off entirely.
   Anchoring near the top keeps the face and the branded shirt in view.
   Qualified with the element because .split-media img would otherwise win on
   specificity and re-centre it. */
.split-media img.content-image-portrait-face {
  object-position: center 2%;
}


/* Contact page (BK Cap–style two-column layout). */
.contact-hero {
  background: #162033;
  color: var(--white);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.contact-hero h1 { color: var(--white); }
.contact-hero p { color: rgba(255, 255, 255, 0.88); margin-top: 0.65rem; }

.contact-layout {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.contact-form-col .quote-card-hero.quote-card-solid {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(26rem, 1.12fr) minmax(22rem, 1fr);
    gap: clamp(1.75rem, 2.5vw, 2.25rem);
    align-items: stretch;
  }

  .contact-form-col,
  .contact-side-col {
    width: 100%;
    max-width: none;
  }

  .contact-form-col {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-width: 0;
  }

  .contact-form-col .quote-card-hero.quote-card-solid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    align-self: stretch;
    min-height: 100%;
    padding: clamp(1.45rem, 2vw, 1.75rem) clamp(1.55rem, 2.4vw, 2rem) clamp(1.25rem, 1.8vw, 1.5rem);
  }

  .contact-form-col .quote-card-hero .quote-card-head h2 {
    font-size: clamp(1.25rem, 1.6vw, 1.4375rem);
  }

  .contact-form-col .quote-card-hero .quote-form {
    flex: 1 1 auto;
    --qf-gap: 0.65rem;
  }

  .contact-form-col .quote-card-hero .quote-form input,
  .contact-form-col .quote-card-hero .quote-form select,
  .contact-form-col .quote-card-hero .quote-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.62rem 0.75rem;
  }

  .contact-side-col {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
  }

  .contact-side-col .contact-side-card {
    width: 100%;
    padding: clamp(1.4rem, 2vw, 1.65rem) clamp(1.45rem, 2.2vw, 1.75rem);
    box-sizing: border-box;
  }

  .contact-side-col .contact-side-card h3 {
    font-size: 1.125rem;
  }

  .contact-side-col .contact-map {
    aspect-ratio: 16 / 10;
  }

  .contact-side-col .contact-side-card + .contact-side-card {
    margin-top: 0;
  }
}

.contact-side-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem;
}

.contact-side-card + .contact-side-card { margin-top: 1rem; }

.contact-map {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 11;
  background: var(--paper);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.contact-list a {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--ink);
  font-weight: 600;
}

.contact-list img {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.value-card-title {
  display: flex;
  /* Titles wrap to 2-3 lines in narrow columns; centring would drift the icon
     down to the middle line, so it stays pinned to the first one. */
  align-items: flex-start;
  gap: 0.55rem;
}

.value-card-title img {
  /* Matches the width/height attributes the generators emit (32px). */
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  /* Optically centres the 32px mark on the ~21px first line of the heading. */
  margin-top: -0.35rem;
}

/* Service cards in the values grid are whole-card links, so the anchor has to
   drop its link styling and carry the card's hover feedback itself. Selected as
   element+class so the sitewide `a:not(.btn)` colour rules do not win here. */
a.value-card-link {
  display: block;
  text-decoration: none;
  color: var(--gray-700);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

a.value-card-link:hover,
a.value-card-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--sky-rgb), 0.55);
  box-shadow: var(--shadow-md);
  color: var(--gray-700);
}

/* The dark service-card override further up paints this chip white, which is
   invisible on the white values-grid card. Restore the light-background pair.
   --blue on this tint only reaches 4.0:1 at 11px, so the darker blue is used. */
.value-card .service-card-cta {
  color: var(--blue-hover);
  background: rgba(var(--sky-rgb), 0.28);
}

a.value-card-link:hover .service-card-cta {
  color: var(--navy);
  background: rgba(var(--sky-rgb), 0.45);
}

.usa-map-mark {
  display: block;
  width: min(220px, 55%);
  height: auto;
  margin: 0.75rem auto 0;
}

.usa-map-hero {
  width: 100%;
  max-width: min(100%, 28rem);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .usa-map-hero {
    max-width: min(100%, 34rem);
  }
}

/* How it works, FAQ, and region folds — title shares one centered column with the list. */
.section-fold-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(34rem, 100%);
  margin-inline: auto;
  overflow: visible;
}

.section-fold-column .section-head.center {
  width: 100%;
}

.section-fold-column .section-head.center,
.section-fold-column .section-head.center .section-label,
.section-fold-column .section-head.center h2,
.section-fold-column .section-head.center .section-lead {
  text-align: center;
}

.section-fold-column .section-head.center .section-lead {
  margin-inline: auto;
}

.section-fold-column .faq-list,
.section-fold-column .region-fold-list:not(.region-fold-grid) {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* Sticky pages — fold/FAQ column aligns with prose left edge. */
main.has-sticky-quote .sticky-page-body .section-fold-column,
main.has-sticky-quote .section-fold-column {
  width: 100%;
  max-width: min(34rem, 100%);
  margin-inline: 0;
  align-items: flex-start;
}

main.has-sticky-quote .sticky-page-body .section-fold-column .section-head,
main.has-sticky-quote .sticky-page-body .section-fold-column .section-head.center,
main.has-sticky-quote .section-fold-column .section-head,
main.has-sticky-quote .section-fold-column .section-head.center,
main.has-sticky-quote .section-fold-column .section-head.center .section-label,
main.has-sticky-quote .section-fold-column .section-head.center h2,
main.has-sticky-quote .section-fold-column .section-head.center .section-lead {
  text-align: left;
}

main.has-sticky-quote .section-fold-column .section-head.center .section-lead {
  margin-inline: 0;
}

main.has-sticky-quote .sticky-page-body .faq-list,
main.has-sticky-quote .sticky-page-body .region-fold-list,
main.has-sticky-quote .section-fold-column .faq-list,
main.has-sticky-quote .section-fold-column .region-fold-list:not(.region-fold-grid) {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

main.has-sticky-quote .sticky-page-body .section > .wrap > .section-head.center {
  text-align: left;
}

main.has-sticky-quote .sticky-page-body .section > .wrap > .section-head.center .section-lead {
  margin-inline: 0;
}

/* Four region controls on one row — total width stays within the title column. */
main.page-locations-index .section-fold-column {
  max-width: min(var(--wrap), 100%);
}

main.page-locations-index .region-fold-list.region-fold-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

main.page-locations-index .region-fold-list.region-fold-grid .region-fold {
  width: 100%;
  min-width: 0;
}

main.page-locations-index .region-fold-summary {
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.45rem;
  font-size: 0.8125rem;
  white-space: normal;
  text-align: center;
}

/* No sky grass directly above Browse Cities on /locations. */
main.page-locations-index .section-grass-divider:has(+ .region-fold-section) {
  display: none;
}

main.page-locations-index .section:has(+ .section-grass-divider + .region-fold-section) {
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.locations-popular-routes > .wrap {
  display: flex;
  justify-content: center;
}

.locations-popular-routes-inner {
  text-align: center;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

.locations-popular-routes-inner h2,
.locations-popular-routes-inner > p {
  text-align: center;
}

.locations-popular-routes-list {
  display: inline-grid;
  text-align: left;
  margin-inline: auto;
  justify-items: start;
}

main.page-body-centered .locations-popular-routes > .wrap {
  margin-inline: auto;
}

@media (max-width: 768px) {
  .region-fold-list.region-fold-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  main.page-locations-index .region-fold-list.region-fold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .region-fold-summary {
    white-space: normal;
  }
}

/* Grass divider between sections — baseline on the lower section's top edge. */
.section-grass-divider {
  --grass-scale-x: 0.9;
  --grass-scale-y: 0.46;
  --grass-baseline-ratio: 0.378;
  position: relative;
  height: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Extra air above the divider so grass blades never touch the prior section copy. */
section:has(+ .section-grass-divider) {
  position: relative;
  z-index: 1;
  padding-bottom: calc(clamp(3rem, 5.5vw, 4.25rem) + clamp(3rem, 6vw, 4.75rem));
}

.section-grass-divider-deco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: 0.82;
  transform-origin: center bottom;
  transform: translateY(calc(var(--grass-baseline-ratio) * 100% * var(--grass-scale-y)))
    scaleX(var(--grass-scale-x)) scaleY(var(--grass-scale-y));
}

/* Sky grass on dark bands reads better against the navy background below. */
.section-grass-divider-sky {
  --grass-baseline-ratio: 0.376;
  z-index: 1;
}

@media (max-width: 768px) {
  .sticky-quote-col,
  .sticky-quote-rail { display: none !important; }

  /* Show the right side of service hero photos on phones. */
  .page-hero-service {
    background-position: right center;
  }

  .page-hero-piano {
    background-size: auto, cover;
    background-position: 0 0, 80% center;
  }
}