/*
 * Ark Moving Co. — site stylesheet.
 *
 * One design system for every page: navy marble surfaces, a single orange
 * accent, Anton display type over Hanken Grotesk body copy, and chunky
 * orange buttons with a hard offset shadow.
 *
 * Tokens live on :root. Components are plain classes, shared across the
 * homepage, service, city, route, pricing, blog and guide templates.
 */

/* Fonts, served from this site (Google Fonts' Latin files: Anton, and Hanken Grotesk as one variable font for
   weights 400–800) and preloaded by BaseLayout. Loading them from Google held the first paint until about 3 s and
   the main text until about 8 s on a phone; from here, about 1.5 s and 3.3 s. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/Anton-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/HankenGrotesk-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/HankenGrotesk-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/HankenGrotesk-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/HankenGrotesk-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/HankenGrotesk-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  --navy: #15213a;
  --navy-2: #1c2b4a;
  --navy-3: #26355a;
  --ink: #172745;
  --ink-shadow: #101a2e;
  --orange: #dd8c35;
  --orange-hi: #e79b47;
  --orange-text: #a85f12;
  --orange-soft: #f4e3cf;
  --orange-light: #f0b46e;
  --cream: #f4eee6;
  --cream-2: #f7f4f0;
  --line: #e3ded6;
  --muted: #3e4a60;
  --muted-2: #4b5568;
  --on-navy: #d5dbe6;
  --white: #ffffff;
  --focus: #f4c64d;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: max(24px, calc((100vw - 1240px) / 2 + 24px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}
body.no-scroll { overflow: hidden; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--orange-text); }
a:hover { color: #7e470d; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--orange); color: var(--ink); padding: 10px 16px; border-radius: 4px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 96px 0; }
.sec-tight { padding: 72px 0; }
.sec-cream { background: var(--cream); }
.sec-soft { background: var(--cream-2); }
.marble { background: var(--navy) url("assets/marble.svg") center / cover; color: var(--white); }
.on-dark { color: var(--white); }
.center { text-align: center; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); }
.split { display: grid; gap: 56px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.split-top { align-items: start; }
/* A photo beside a long text column stays in view while the text scrolls, only when the two sit side by side
   (two 460px columns plus the gap need about 1040px); stacked on phones it would cover the text. */
.photo-sticky { align-self: start; }
@media (min-width: 1040px) { .photo-sticky { position: sticky; top: 110px; } }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; }
.row-head > :first-child { max-width: 680px; }
.stack > * + * { margin-top: 14px; }

/* ------------------------------------------------------------ typography */
.eb { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.eb::before { content: ""; width: 10px; height: 10px; background: var(--orange); flex: none; }
.h1 {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.04; letter-spacing: 0.005em;
}
.h2 {
  margin: 12px 0 0; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1;
}
.h3, .card-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.lead { margin: 18px 0 0; font-size: 18px; color: var(--muted); max-width: 640px; }
.marble .lead, .on-dark .lead { color: var(--on-navy); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center .lead { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  background: var(--orange); color: var(--ink);
  border: 2px solid var(--ink-shadow); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink-shadow);
  font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { color: var(--ink); background: var(--orange-hi); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink-shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-shadow); }
.btn-w { background: var(--white); }
.btn-w:hover { background: var(--cream); }
.marble .btn, .on-dark .btn { border-color: #0a1222; box-shadow: 3px 3px 0 #0a1222; }
.btn-text {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--orange-text); text-decoration: none;
}
.marble .btn-text { color: var(--orange-light); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }

.callbox { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
/* Call boxes keep their text color on hover; only the phone icon animates. */
.callbox:hover { color: inherit; }
.hdr-nav .callbox:hover { color: var(--ink); }
.callbox-ic { width: 44px; height: 44px; border-radius: 8px; background: var(--orange); display: flex; align-items: center; justify-content: center; flex: none; }
.callbox-ic svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.callbox-txt { display: flex; flex-direction: column; line-height: 1.2; }
.callbox-txt small { font-size: 13px; opacity: .85; }
.callbox-txt strong { font-size: 17px; }

.chip {
  min-height: 46px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  font-weight: 600; color: var(--ink); text-decoration: none;
}
a.chip:hover { border-color: var(--orange); color: var(--ink); }
.chip.is-on { background: var(--orange); border-color: var(--orange); }
.chip-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- header */
.site-header { padding: 20px 24px 0; position: relative; z-index: 20; }
.site-header.is-solid { background: var(--navy) url("assets/marble.svg") center / cover; padding-bottom: 20px; }
.hdr { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.logo-card {
  flex: 0 0 auto; background: var(--white); border-radius: 12px; padding: 12px 22px;
  display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none;
}
.logo-card:hover { color: var(--ink); }
.logo-mark { width: 58px; height: 42px; flex: none; }
.logo-words { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--display); font-size: 25px; letter-spacing: 0.01em; }
.logo-sub { margin-top: 5px; font-family: var(--display); font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.hdr-panel { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.hdr-strip {
  background: var(--orange); padding: 9px 22px; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 6px 24px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.hdr-strip a { color: var(--ink); text-decoration: none; }
.hdr-strip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.hdr-strip svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; stroke: currentColor; fill: none; stroke-width: 2; }
.hdr-nav { flex: 1; background: var(--white); padding: 10px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.hdr-nav .callbox { color: var(--ink); }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--orange-text); }
.nav-links a[aria-current="page"] { color: var(--orange-text); border-bottom-color: var(--orange); }
.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.mobile-drawer { background: var(--white); border-top: 1px solid var(--line); padding: 8px 22px 16px; }
.mobile-drawer ul { list-style: none; margin: 0; padding: 0; }
.mobile-drawer a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.mobile-drawer a[aria-current="page"] { color: var(--orange-text); }
@media (max-width: 1080px) {
  .nav-links, .hdr-nav > nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
  /* Phones: two slim rows — logo, then call + menu. The email strip is
     dropped (it's in the footer and the contact page). */
  .site-header { padding: 12px 16px 0; }
  .site-header.is-solid { padding-bottom: 12px; }
  .hdr { gap: 8px; }
  .hdr-strip { display: none; }
  .hdr-nav { flex-wrap: nowrap; padding: 6px 6px 6px 8px; gap: 12px; }
  .hdr-nav .callbox { gap: 10px; }
  .hdr-nav .callbox-ic { width: 38px; height: 38px; }
  .hdr-nav .callbox-ic svg { width: 19px; height: 19px; }
  .hdr-nav .callbox-txt small { display: none; }
  .hdr-nav .callbox-txt strong { font-size: 16px; }
  .menu-toggle { min-height: 38px; padding: 0 12px; }
  .logo-card { flex: 1 1 100%; padding: 8px 14px; gap: 10px; }
  .logo-mark { width: 44px; height: 32px; }
  .logo-name { font-size: 21px; }
  .logo-sub { margin-top: 4px; font-size: 10px; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: var(--on-navy); font-size: 15px; line-height: 1.6; }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--orange-light); }
.ftr { max-width: 1240px; margin: 0 auto; padding: 120px 24px 32px; }
.ftr-grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ftr-brand { display: flex; flex-direction: column; gap: 16px; }
.ftr-logo { display: flex; flex-direction: column; gap: 6px; color: var(--white) !important; }
.ftr-logo .logo-name { color: var(--white); }
.ftr-col { display: flex; flex-direction: column; gap: 4px; }
.ftr-col .more { color: var(--orange-light); }
.ftr-title { margin: 0 0 10px; font-family: var(--display); font-size: 18px; color: var(--white); text-transform: uppercase; letter-spacing: 0.02em; }
.ftr-sub { margin: 14px 0 6px; font-family: var(--display); font-size: 15px; color: var(--white); text-transform: uppercase; letter-spacing: 0.02em; }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-3); color: var(--white); font-weight: 700; }
.social a:first-child { background: var(--orange); color: var(--ink); }
.social svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
/* BBB Dynamic Seal (src/components/BbbSeal.astro): BBB's own sizing for its "ruhzbul" seal, a 400×90 sprite shown 200 wide. */
.bbb-seal { display: block; position: relative; width: 200px; height: 90px; overflow: hidden; flex: none; }
.bbb-seal img { position: absolute; top: 0; left: 0; width: 400px; max-width: 200%; height: 90px; border: 0; }
.bbb-seal:hover img, .bbb-seal:focus-visible img { margin-left: -200px; }
.bbb-seal.is-medium { width: 150px; height: 69px; }
.bbb-seal.is-medium img { width: 300px; height: 68px; }
.bbb-seal.is-medium:hover img, .bbb-seal.is-medium:focus-visible img { margin-left: -150px; }
.contact-list { font-style: normal; display: flex; flex-direction: column; gap: 10px; }
.contact-list > * { display: flex; align-items: flex-start; gap: 10px; }
.ci { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #4a5878; display: inline-flex; align-items: center; justify-content: center; }
.ci.is-fill { background: var(--orange); border-color: var(--orange); }
.ci svg { width: 14px; height: 14px; stroke: var(--orange-light); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci.is-fill svg { stroke: var(--ink); }
.hours { margin: 8px 0 0; background: var(--navy-3); border-radius: 8px; padding: 6px 16px; font-size: 14px; }
.hours div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; }
.hours div + div { border-top: 1px solid #3a4a6e; }
.hours dt { font-weight: 700; color: var(--white); }
.hours dd { margin: 0; }
.ftr-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid #2e3d60; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; font-size: 13.5px; color: #b9c2d3; }
.ftr-bottom a { color: #b9c2d3; text-decoration: underline; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; color: var(--white); background: var(--navy); }
.hero-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
/* The video fills the first screen. The copy sits in a band along the bottom
   (headline left, tagline and discount right) so the middle of the video
   stays clear; the scrim only darkens the top (header) and the bottom (copy). */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,26,46,.86) 0%, rgba(16,26,46,.55) 26%, rgba(16,26,46,0) 56%); }
.hero-scrim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; background: linear-gradient(180deg, rgba(21,33,58,.55), rgba(21,33,58,0)); }
.hero-body { position: relative; display: flex; flex-direction: column; min-height: max(640px, 100svh); } /* no z-index: the sticky nav inside must stack above later sections */
.hero-inner { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 80px 24px 146px; display: flex; align-items: flex-end; }
.hero-copy {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 56px;
  text-shadow: 0 2px 18px rgba(10,18,34,.55);
}
.hero-copy .h1 { margin: 0; max-width: 760px; font-size: clamp(34px, 3.6vw, 52px); text-wrap: balance; }
.hero-aside { justify-self: end; }
.hero-aside .serve-badge { white-space: nowrap; }
.hero-aside .lead { margin: 0; font-size: 22px; font-weight: 600; color: var(--white); }
.hero-aside .serve-badge { margin-top: 18px; }
.hero-aside .bbb-seal { margin-top: 18px; }
@media (max-width: 900px) {
  .hero-copy { grid-template-columns: 1fr; }
  .hero-aside { justify-self: start; }
}
@media (max-width: 720px) {
  .hero-body { min-height: max(540px, calc(100svh - 58px)); } /* minus the bottom action bar */
  .hero-inner { padding: 48px 16px 36px; }
  .hero-copy { gap: 16px; }
  .hero-aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
  .hero-aside .bbb-seal { margin-top: 0; }
  .hero-aside .lead { font-size: 18px; }
  .hero-aside .serve-badge { margin-top: 0; flex: none; }
}
.hero-feats { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px 36px; list-style: none; padding: 0; }
.hero-feats li { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 15px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; }
.hero-feats .ring { width: 46px; height: 46px; border: 1.5px solid var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.hero-feats svg { width: 24px; height: 24px; stroke: var(--orange); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-proof { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
.hero-proof a { color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.proof-g { width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: none; }
.stars { color: var(--orange-light); letter-spacing: 2px; font-size: 13px; }
.serve-badge {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 8px; margin-top: 26px;
  border-radius: 999px; border: 1px solid rgba(240,180,110,.6); background: rgba(16,26,46,.55); color: var(--white);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.serve-badge b { background: var(--orange); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.serve-badge:hover { border-color: var(--orange); }
@media (max-width: 720px) {
  /* The discount badge shrinks to a "5% off" circle; tapping it still opens
     the details dialog, and the full text stays for screen readers. */
  .serve-badge {
    width: 68px; height: 68px; min-height: 0; padding: 0; justify-content: center; margin-top: 22px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: var(--orange);
    box-shadow: 0 8px 22px rgba(10,18,34,.35);
  }
  .serve-badge b {
    background: none; padding: 0; border-radius: 0; width: 44px; text-align: center; text-shadow: none;
    font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.05; text-transform: uppercase;
  }
  .serve-badge-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hero-pause {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 136px; height: 44px; padding: 0 16px 0 12px;
  display: flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(16,26,46,.6); color: var(--white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.hero-pause svg { width: 18px; height: 18px; fill: currentColor; }
.hero-pause [data-icon-play] { display: none; }
.hero-pause[aria-pressed="true"] [data-icon-play] { display: block; }
.hero-pause[aria-pressed="true"] [data-icon-pause] { display: none; }

/* ------------------------------------------------- split hero (inner pages) */
.split-hero { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 8px; }
.split-hero-copy { flex: 1 1 520px; min-width: 0; padding: 48px 40px 96px var(--gutter); }
.split-hero-copy.has-overlap { padding-bottom: 170px; }
.diag { flex: 1 1 440px; min-height: 520px; position: relative; background: var(--orange); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.diag img { position: absolute; top: 0; right: 0; bottom: 0; left: 16px; width: calc(100% - 16px); height: 100%; object-fit: cover; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 600; }
.crumbs a { color: var(--white); text-decoration: none; }
.crumbs a:hover { color: var(--orange-light); }
.crumbs .sep { color: var(--orange); }
.crumbs [aria-current] { color: var(--orange-light); }
.crumbs-pill { display: flex; justify-content: center; margin-top: 26px; }
.crumbs-pill ol { padding: 10px 20px; background: rgba(255,255,255,.08); border-radius: 999px; }
.banner { text-align: center; padding: 80px 24px 100px; max-width: 940px; margin: 0 auto; }
.banner.has-overlap { padding-bottom: 190px; }
.banner .lead { margin-left: auto; margin-right: auto; }
.banner .h1 { margin-top: 16px; font-size: clamp(42px, 5vw, 72px); }

/* --------------------------------------------------------- request strip */
.request { padding: 0 24px; margin-top: -110px; position: relative; z-index: 3; }
.request-card { max-width: 1240px; margin: 0 auto; background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(16,26,46,.18); }
.request-title { margin: 0; background: var(--orange); padding: 14px 28px; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.request-fields { padding: 22px 28px 26px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; }
.request-fields .btn { margin-top: 26px; }
.request-foot { padding: 0 28px 20px; margin: -8px 0 0; font-size: 14px; color: var(--muted-2); }

/* ----------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 14px; font-weight: 600; }
.qform input, .qform select, .qform textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #e6ddd0; border-radius: 6px;
  background: var(--cream); font: inherit; font-size: 15px; color: var(--ink);
}
.qform textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.qform input:not([type="checkbox"]):not([type="radio"]), .qform select { height: 48px; }
.qform select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172745' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.qform .request-fields textarea { min-height: 48px; height: 48px; padding-top: 12px; resize: vertical; }
.qform input:focus, .qform select:focus, .qform textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; background: var(--white); }
.qform [aria-invalid="true"] { border-color: #b34e45; }
.field-error { min-height: 0; color: #9c2f29; font-size: 13px; font-weight: 600; }
.field-error:empty { display: none; }
.form-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.form-status:empty { display: none; }
.form-note { margin: 10px 0 0; font-size: 14px; color: var(--muted-2); }
.fgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fgrid .span-all { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .qform input, .qform select, .qform textarea { font-size: 16px; }
}

/* ---------------------------------------------------------------- photos */
.photo { position: relative; border-radius: 10px; overflow: hidden; background: #cfc8bd; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collage { position: relative; height: 560px; }
.collage .c-main { position: absolute; left: 0; top: 0; width: 64%; height: 100%; }
.collage .c-small { position: absolute; right: 0; bottom: 0; width: 44%; height: 50%; border: 8px solid var(--white); border-radius: 14px; }
.collage .c-badge {
  position: absolute; right: 6%; top: 8%; width: 180px; padding: 22px 16px; text-align: center;
  background: var(--orange); border: 2px solid var(--ink-shadow); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink-shadow);
}
.c-badge strong { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: 0.01em; }
.c-badge span { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
@media (max-width: 560px) { .collage { height: 440px; } .collage .c-badge { width: 150px; } }

/* --------------------------------------------------- dark service cards */
.svc-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.svc-intro { padding: 8px 16px 8px 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.svc-intro p { margin: 0; color: var(--on-navy); }
.svc-card { position: relative; min-height: 340px; border-radius: 10px; overflow: hidden; background: var(--navy-2); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: var(--white); text-decoration: none; }
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(16,26,46,.92) 0%, rgba(16,26,46,.35) 55%, rgba(16,26,46,.1) 100%); }
.svc-card > :not(img) { position: relative; z-index: 2; }
.svc-card:hover { color: var(--white); }
.svc-card:hover img { transform: scale(1.04); }
.svc-card h3 { margin: 0; font-size: 26px; }
.svc-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; min-height: 4.8em; color: var(--on-navy); }
.svc-card .btn-text { color: var(--orange-light); margin-top: 8px; }

/* -------------------------------------------------------- feature cards */
.feat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); text-align: left; }
.feat { display: flex; gap: 14px; padding: 20px; background: var(--cream-2); border-radius: 10px; }
.feat-ic { flex: none; width: 52px; height: 52px; border-radius: 8px; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; }
.feat-ic.is-fill { background: var(--orange); }
.feat-ic svg { width: 26px; height: 26px; stroke: var(--orange-text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat-ic.is-fill svg { stroke: var(--ink); }
.feat h3 { margin: 0; font-size: 16px; }
.feat p { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }
.feat-stack { display: block; }
.feat-stack h3 { margin-top: 16px; font-size: 20px; }
.cred-row { list-style: none; margin: 44px 0 0; padding: 40px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.cred-row li { width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--orange); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; font-size: 13px; font-weight: 700; }
.cred-row strong { font-family: var(--display); font-weight: 400; font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; }
@media (max-width: 720px) { .cred-row { justify-content: center; } }

/* --------------------------------------------------------- how it works */
.how { max-width: 1040px; margin: 0 auto; text-align: center; }
.track { position: relative; margin: 92px 20px 0; height: 12px; background: #e6ddd0; border-radius: 6px; }
.how-scroll { position: relative; height: calc(100vh + 1400px); }
.how-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 72px 0; box-sizing: border-box; overflow: hidden; }
.how-sticky .how { width: 100%; padding: 0 24px; }
.how-scroll.is-scrubbing .track-fill, .how-scroll.is-scrubbing .track-truck { transition: none; }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .how-scroll { height: auto; }
  .how-sticky { position: static; min-height: 0; padding: 96px 0; }
}
.track-fill { position: absolute; left: 0; top: 0; height: 12px; border-radius: 6px; background: var(--orange); transition: width .5s ease; }
.track-truck { position: absolute; bottom: 14px; transform: translateX(-50%); transition: left .5s ease; width: 120px; }
.track-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.track-dot span { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 5px solid var(--orange); }
.track-dot[aria-pressed="true"] span, .track-dot.is-done span { background: var(--white); }
.step-card { max-width: 640px; margin: 64px auto 0; background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 40px rgba(16,26,46,.10); }
.step-head { background: var(--orange); padding: 16px 24px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.step-num { background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 4px; letter-spacing: 0.06em; }
.step-head h3 { margin: 0; font-size: 26px; }
.step-body { padding: 26px 32px 30px; }
.step-body p { margin: 0; color: var(--muted); }
.step-body .actions { justify-content: center; margin-top: 22px; }
.step-panel[hidden] { display: none; }
.steps-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.steps-list li { background: var(--navy-2); border-radius: 10px; padding: 26px; border-top: 4px solid var(--orange); }
.steps-list .num { font-family: var(--display); font-size: 44px; color: var(--orange-light); line-height: 1; }
.steps-list h3 { margin: 14px 0 0; font-size: 19px; }
.steps-list p { margin: 8px 0 0; font-size: 15px; color: var(--on-navy); }

/* --------------------------------------------------------------- gallery */
.gallery { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.gallery .photo { flex: 1 1 260px; height: 300px; }
.gallery .photo.is-wide { flex: 2 1 536px; height: 260px; }
.gallery .photo.is-short { height: 260px; }

/* --------------------------------------------------------------- reviews */
.review-grid { margin-top: 40px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.review { margin: 0; background: var(--white); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.review-who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy-3); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.review-who strong { font-family: var(--display); font-weight: 400; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; }
.review-who span { font-size: 14px; color: var(--muted-2); }
.review .stars { font-size: 18px; letter-spacing: 3px; color: var(--orange); }
.review blockquote { margin: 0; color: var(--muted); font-size: 15.5px; }
.review-src { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted-2); }
.review-src span:last-child { font-family: var(--display); font-size: 30px; color: var(--line); line-height: 1; }
.rating-pill { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.widget-box { margin-top: 32px; background: var(--white); border-radius: 10px; padding: 16px; min-height: 120px; }

/* ------------------------------------------------------- serve / offer */
.offer { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.pennant { flex: 0 0 260px; margin-top: -40px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); padding: 6px 6px 10px; }
.pennant-in { background: var(--navy-2); clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); padding: 40px 20px 70px; text-align: center; color: var(--white); }
.pennant-in p { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pennant-in .big { margin: 6px 0 0; font-family: var(--display); font-size: 64px; line-height: 1; color: var(--orange-light); letter-spacing: 0; text-transform: none; }
.pennant-in .big small { font-family: var(--body); font-size: 18px; color: var(--white); }
.pennant-in svg { margin: 16px auto 0; }
.offer-copy { flex: 1 1 480px; padding-top: 40px; }
.offer-copy p { color: var(--on-navy); }
.photo-band { height: 380px; background: #cfc8bd center / cover no-repeat; }

/* ----------------------------------------------------------------- areas */
.area-grid { margin-top: 16px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.area-grid .chip { width: 100%; }
.map-frame { border: 0; width: 100%; min-height: 460px; border-radius: 10px; background: #dde3df; display: block; }
.city-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 36px; }
.city-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; background: var(--white); }
.city-card:hover { border-color: var(--orange); color: var(--ink); }
.city-card .h3 { font-size: 21px; display: flex; align-items: center; gap: 8px; }
.city-card .h3 svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 2; }
.city-card .meta { font-size: 14px; color: var(--muted); }
.city-card .btn-text { min-height: 0; margin-top: 6px; font-size: 14px; }
.city-card[hidden] { display: none; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row button { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.filter-row button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }

/* ------------------------------------------------------------------ blog */
.post-grid { margin-top: 32px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.post-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.post-card .post-img { display: block; height: 210px; overflow: hidden; background: #cfc8bd; }
.post-card .post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.tag { background: var(--cream); padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.post-card h2, .post-card h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.post-card h2 a, .post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--orange-text); }
.post-card p { margin: 0; font-size: 15px; color: var(--muted); }
.post-card ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.post-card .btn-text { margin-top: auto; }
.featured-post { display: flex; flex-wrap: wrap; background: var(--cream); border-radius: 10px; overflow: hidden; }
.featured-post .post-img { flex: 1 1 460px; min-height: 360px; display: block; }
.featured-post .post-img img { width: 100%; height: 100%; object-fit: cover; }
.featured-post .featured-body { flex: 1 1 460px; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; align-items: flex-start; }

/* ------------------------------------------------------------------- faq */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.faq-item { border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
.faq-item summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--display); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--body); font-size: 22px; line-height: 1; flex: none; }
.faq-item[open] { background: var(--orange); border-color: var(--orange); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 18px 18px; font-size: 15px; color: var(--ink); }
.faq-answer p { margin: 0; }
.faq-answer p + p { margin-top: 10px; }
.faq-answer a { color: var(--ink); font-weight: 700; }
.faq-photo { min-height: 540px; }

/* -------------------------------------------------------------- CTA band */
.cta-band { position: relative; z-index: 2; padding: 0 24px; background: #cfc8bd center / cover no-repeat; }
.cta-band-in { max-width: 1240px; margin: 0 auto; min-height: 400px; display: flex; justify-content: flex-end; align-items: flex-end; }
.cta-box { width: min(100%, 560px); margin-bottom: -70px; background: var(--orange); border-radius: 10px; padding: 40px; }
.cta-box .h2 { margin: 0; font-size: clamp(30px, 3vw, 40px); }
.cta-box p { margin: 14px 0 0; }
.cta-box .actions { margin-top: 22px; gap: 14px; }

/* ----------------------------------------------------- list / highlights */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; }
.check-list li::before { content: "✓"; color: var(--orange); font-weight: 800; flex: none; }
.marble .check-list li::before { color: var(--orange-light); }
.cta-box .check-list li::before { color: var(--ink); }
.x-list li::before { content: "✕"; }
.incl-grid { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.incl-grid li { display: flex; gap: 14px; padding: 20px; background: var(--cream-2); border-radius: 10px; }
.tick { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--orange); display: flex; align-items: center; justify-content: center; }
.tick svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.incl-grid h3 { margin: 0; font-size: 17px; }
.incl-grid p { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.link-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; background: var(--white); border-radius: 10px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.link-card:hover { border-color: var(--orange); color: var(--ink); }
.link-card .h3 { display: block; font-size: 20px; }
.link-card small { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.go { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; }
.go svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.panel { background: var(--cream-2); border-radius: 10px; padding: 32px; }
.panel-white { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 30px; }
.panel .h3, .panel-white .h3 { margin: 0; font-size: 24px; }
.tip { margin-top: 24px; padding: 20px 22px; background: var(--cream); border-radius: 8px; }
.tip .h3 { margin: 0; font-size: 16px; color: var(--orange-text); }
.tip p { margin: 6px 0 0; font-size: 15px; }
.dl-cards { margin: 26px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.dl-cards div { background: var(--white); border-radius: 8px; padding: 16px; }
.dl-cards dt { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-text); }
.dl-cards dd { margin: 4px 0 0; font-weight: 600; }

/* --------------------------------------------------------------- pricing */
.price-grid { margin-top: 40px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.price-card { border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--line); }
.price-card.is-hi { background: var(--navy) url("assets/marble.svg") center / cover; color: var(--white); border: 3px solid var(--orange); }
.price-card .h3 { margin: 0; font-size: 22px; }
.price-card.is-hi .h3 { color: var(--orange-light); }
.price { margin: 0; font-family: var(--display); font-size: 52px; line-height: 1; }
.price small { font-family: var(--body); font-size: 16px; font-weight: 600; color: var(--muted-2); }
.price-card.is-hi .price small { color: var(--on-navy); }
.price-card p { margin: 0; color: var(--muted); }
.price-card.is-hi p { color: var(--on-navy); }
.price-card .check-list { padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.price-card.is-hi .check-list { border-top-color: #2e3d60; }
.price-card .btn { margin-top: auto; }
.flag { align-self: flex-start; background: var(--orange); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; }
.table-box { margin-top: 32px; background: var(--white); border-radius: 10px; overflow-x: auto; }
.data-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; }
.data-table caption { text-align: left; padding: 22px 26px 6px; font-family: var(--display); font-size: 22px; text-transform: uppercase; color: var(--ink); }
.data-table th, .data-table td { padding: 16px 24px; border-bottom: 1px solid #eee9e1; text-align: left; vertical-align: top; }
.data-table thead th { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); border-bottom: 2px solid var(--orange); }
.data-table td.strong { font-weight: 700; }
.estimator { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(16,26,46,.18); }
.estimator-title { margin: 0; background: var(--orange); padding: 16px 32px; font-family: var(--display); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.estimator-body { display: flex; flex-wrap: wrap; }
.estimator-inputs { flex: 999 1 520px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.estimator-inputs fieldset { border: 0; margin: 0; padding: 0; }
.estimator-inputs legend { margin: 0 0 10px; font-weight: 700; }
.seg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { min-height: 46px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.seg[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
.estimator-out { flex: 1 1 340px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.estimator-out .big { margin: 0; font-family: var(--display); font-size: 44px; line-height: 1.05; color: var(--orange-light); }
.estimator-out dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.estimator-out dt { color: #b9c2d3; }
.estimator-out dd { margin: 0; font-weight: 700; }
.estimator-out .note { margin: 0; font-size: 13.5px; color: #b9c2d3; }

/* --------------------------------------------------------- route stats */
.stat-strip { max-width: 1240px; margin: 0 auto; background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(16,26,46,.18); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stat-strip div { padding: 26px 28px; border-top: 4px solid var(--orange); border-right: 1px solid #eee9e1; }
.stat-strip dt { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); }
.stat-strip dd { margin: 6px 0 0; font-family: var(--display); font-size: 28px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); }
.overlap { padding: 0 24px; margin-top: -96px; position: relative; z-index: 3; }

/* ----------------------------------------------------------- articles */
.article-hero { padding: 64px 24px 88px; max-width: 980px; margin: 0 auto; }
.article-hero .h1 { margin-top: 14px; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; }
.article-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--white); }
.article-tag::before { content: ""; width: 10px; height: 10px; background: var(--orange); }
.article-lead { margin: 20px 0 0; font-size: 18px; color: var(--on-navy); max-width: 760px; }
.article-meta-bar { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-size: 15px; color: var(--on-navy); }
.article-meta-bar span, .article-meta-bar time { display: inline-flex; align-items: center; gap: 8px; }
.article-layout { max-width: 1240px; margin: 0 auto; padding: 64px 24px 96px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.article-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 20px; }
.article-container { flex: 999 1 640px; min-width: 0; max-width: 800px; }
.article-main-figure { margin: 0; }
.article-main-figure img { width: 100%; height: auto; border-radius: 10px; }
.article-main-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--muted-2); }
.article-body { font-size: 17px; line-height: 1.75; }
.article-body > * + * { margin-top: 18px; }
.article-body h2 { margin: 48px 0 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; }
.article-body h3 { margin: 30px 0 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 20px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li + li { margin-top: 8px; }
.article-body img { border-radius: 10px; }
.article-body blockquote { margin: 24px 0; padding: 20px 24px; background: var(--cream); border-radius: 8px; }
.article-toc { background: var(--cream); border-radius: 10px; padding: 24px; }
.article-toc h2, .article-toc h3, .article-toc strong { margin: 0 0 8px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 18px; display: block; }
.article-toc ol, .article-toc ul { margin: 0; padding-left: 18px; }
.article-toc a { color: var(--ink); text-decoration: none; font-weight: 600; }
.article-toc a:hover { color: var(--orange-text); }
.article-callout { padding: 22px 24px; background: var(--cream); border-radius: 10px; border-top: 4px solid var(--orange); }
.article-callout > :first-child { margin-top: 0; }
.article-callout > * + * { margin-top: 10px; }
.article-callout h3, .article-callout h4, .article-callout strong:first-child { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.article-stats-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat-box { background: var(--navy) url("assets/marble.svg") center / cover; color: var(--white); border-radius: 10px; padding: 20px; border-top: 4px solid var(--orange); }
.stat-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-light); }
.stat-value { display: block; margin-top: 6px; font-family: var(--display); font-size: 32px; line-height: 1.05; }
.stat-sub { display: block; margin-top: 6px; font-size: 14px; color: var(--on-navy); }
.article-table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.article-data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; }
.article-data-table th, .article-data-table td { padding: 14px 18px; border-bottom: 1px solid #eee9e1; text-align: left; vertical-align: top; }
.article-data-table thead th { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); border-bottom: 2px solid var(--orange); background: var(--cream-2); }
.zip-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.zip-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; font-weight: 600; font-size: 14px; background: var(--white); }
.article-faq-section { margin-top: 56px; }
.article-faq-section h2 { margin-top: 0; }
.article-faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.article-faq-item { border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
.article-faq-item[open] { background: var(--orange); border-color: var(--orange); }
.article-faq-question { list-style: none; cursor: pointer; min-height: 56px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--display); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.article-faq-question::-webkit-details-marker { display: none; }
.article-faq-question::after { content: "+"; font-family: var(--body); font-size: 22px; flex: none; }
.article-faq-item[open] .article-faq-question::after { content: "−"; }
.article-faq-answer { padding: 0 18px 18px; font-size: 15.5px; }
.article-faq-answer > * { margin: 0; }
.article-faq-answer > * + * { margin-top: 10px; }
.article-faq-answer a { color: var(--ink); font-weight: 700; }
.article-cta-card { margin-top: 48px; border-radius: 10px; padding: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; background: var(--navy) url("assets/marble.svg") center / cover; color: var(--white); }
.article-cta-card h3 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 24px; }
.article-cta-card p { margin: 6px 0 0; color: var(--on-navy); }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.side-card { background: var(--cream); border-radius: 10px; padding: 24px; }
.side-card .h3 { margin: 0 0 8px; font-size: 20px; }
.side-card a.side-link { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.side-card a.side-link:hover { color: var(--orange-text); }

/* ---------------------------------------------------------------- modals */
.modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 620px); width: 100%; color: var(--ink); }
.modal::backdrop { background: rgba(10,18,34,.72); }
.modal-panel { position: relative; background: var(--white); border-radius: 10px; overflow: hidden; }
.modal-head { background: var(--orange); padding: 18px 64px 18px 28px; }
.modal-head h2 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 26px; }
.modal-body { padding: 24px 28px 28px; }
.modal-body .sub { margin: 0 0 18px; color: var(--muted); }
.modal-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(23,39,69,.12); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; }
.modal .fgrid { gap: 14px; }
.modal .btn { margin-top: 18px; width: 100%; }
.serve-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.serve-tabs [role="tab"] { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.serve-tabs [role="tab"][aria-selected="true"] { background: var(--orange); border-color: var(--orange); }
.serve-panel p { margin: 0 0 12px; }
.serve-audience { font-size: 14px; color: var(--muted-2); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.modal-actions .btn { width: auto; margin-top: 0; }

.instant-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 8px; border-radius: 999px; border: 2px solid var(--ink-shadow);
  background: var(--orange); color: var(--ink); box-shadow: 3px 3px 0 var(--ink-shadow);
  font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
}
.instant-fab-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.instant-fab-icon svg { width: 18px; height: 18px; fill: var(--orange); }

/* ----------------------------------------------------------- mobile dock */
.mobile-actions { display: none; }
@media (max-width: 680px) {
  .mobile-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr;
    background: var(--navy); border-top: 2px solid var(--orange);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-actions a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; color: var(--white); text-decoration: none; font-weight: 700; }
  .mobile-actions a.mobile-action-quote { background: var(--orange); color: var(--ink); }
  .mobile-actions svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .instant-fab { display: none; }
  .site-footer { padding-bottom: 60px; }
  .hero-pause { bottom: 124px; }
}

/* ---------------------------------------------------------------- thanks */
.thanks-page { background: var(--navy) url("assets/marble.svg") center / cover; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.thanks-card { max-width: 560px; background: var(--white); border-radius: 10px; overflow: hidden; text-align: center; }
.thanks-card .thanks-head { background: var(--orange); padding: 16px; font-family: var(--display); text-transform: uppercase; font-size: 18px; letter-spacing: 0.04em; }
.thanks-card .thanks-body { padding: 32px; }
.thanks-card h1 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 36px; }
.thanks-card p { color: var(--muted); }

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.side-card.marble { background: var(--navy) url("assets/marble.svg") center / cover; color: var(--white); }

/* ------------------------------------------------------- review carousel */
.carousel { margin-top: 40px; }
.carousel-track {
  list-style: none; margin: 0; padding: 4px 4px 12px; display: flex; gap: 20px;
  /* scroll-padding-inline matches the 4px side padding, so the first slide's snap point is where the track
     starts. Without it the browser scrolled the track 4px to snap as the page loaded, and Chrome counted that
     scroll as the visitor's: it stopped measuring the page's main content (PageSpeed: NO_LCP on every page with
     the reviews carousel). */
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scroll-behavior: smooth; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.carousel-slide { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; }
.carousel-slide .review { width: 100%; border: 1px solid var(--line); }
@media (max-width: 1000px) { .carousel-slide { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .carousel-slide { flex-basis: 88%; } }
.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.carousel-btn { width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.carousel-btn.is-next { background: var(--orange); border-color: var(--orange); }
.carousel-btn svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel-btn:disabled { opacity: .4; cursor: default; }
.review-grid .review { border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* ------------------------------------------------------ micro-interactions */
/* Feature cards: the white, lifted look is the hover state for every card. */
.feat { transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.feat:hover { background: var(--white); box-shadow: 0 12px 30px rgba(16,26,46,.12); transform: translateY(-3px); }
.feat-ic { transition: background .25s ease, transform .3s ease; }
.feat-ic svg { transition: stroke .25s ease; }
.feat:hover .feat-ic { background: var(--orange); transform: rotate(-6deg) scale(1.06); }
.feat:hover .feat-ic svg { stroke: var(--ink); }

/* Cards lift on hover. */
.link-card, .city-card, .post-card, .review, .incl-grid li, .steps-list li, .price-card, .panel-white {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.link-card:hover, .city-card:hover, .post-card:hover, .review:hover, .incl-grid li:hover, .panel-white:hover {
  transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16,26,46,.12);
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(16,26,46,.16); }
.steps-list li:hover { transform: translateY(-4px); background: var(--navy-3); }
.incl-grid li:hover { background: var(--white); }
.tick { transition: transform .3s ease; }
.incl-grid li:hover .tick, .link-card:hover .tick { transform: rotate(-8deg) scale(1.08); }
.go { transition: transform .3s ease; }
.link-card:hover .go { transform: rotate(45deg); }

/* Photos zoom gently. */
.post-card .post-img img, .gallery .photo img, .featured-post .post-img img { transition: transform .6s ease; }
.post-card:hover .post-img img, .gallery .photo:hover img, .featured-post:hover .post-img img { transform: scale(1.05); }

/* Text links nudge; nav links grow an underline. */
.btn-text { transition: transform .2s ease, color .2s ease; }
.btn-text:hover, a:hover > .btn-text, .svc-card:hover .btn-text, .city-card:hover .btn-text { transform: translateX(4px); }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]::after { display: none; }

/* Chips, social icons, credential circles. */
a.chip, .filter-row button, .seg { transition: transform .2s ease, background .2s ease, border-color .2s ease; }
a.chip:hover, .filter-row button:hover, .seg:hover { transform: translateY(-2px); border-color: var(--orange); }
.social a { transition: transform .2s ease; }
.social a:hover { transform: translateY(-3px) rotate(-6deg); }
.cred-row li { transition: transform .3s ease, background .3s ease; }
.cred-row li:hover { transform: translateY(-4px) rotate(-3deg); background: var(--orange-soft); }

/* Phone icons ring on hover. */
.callbox-ic svg { transform-origin: 50% 50%; }
.callbox:hover .callbox-ic svg { animation: ring .6s ease-in-out; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* Licence badge floats; instant-quote button pulses now and then. */
.collage .c-badge { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.instant-fab::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--orange); opacity: 0; animation: pulse-ring 4s ease-out 2s infinite; pointer-events: none; }
@keyframes pulse-ring { 0% { opacity: .8; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.25); } }

/* Steps: the truck bobs while it drives; dots pop; cards fade in. */
.track-truck.is-moving { animation: bob .28s ease-in-out infinite alternate; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -3px; } }
.track-dot span { transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s ease; }
.track-dot.is-done span { transform: scale(1.12); }
.track-dot[aria-pressed="true"] span { transform: scale(1.3); }
.step-panel:not([hidden]) { animation: fade-up .45s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* FAQ answers ease open; form fields ease into focus. */
.faq-item[open] .faq-answer, .article-faq-item[open] .article-faq-answer { animation: fade-up .35s ease both; }
.faq-item summary::after, .article-faq-question::after { transition: transform .25s ease; }
.faq-item[open] summary::after, .article-faq-item[open] .article-faq-question::after { transform: rotate(180deg); }
.qform input, .qform select, .qform textarea { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.qform input:focus, .qform select:focus, .qform textarea:focus { box-shadow: 0 0 0 4px rgba(221,140,53,.18); }

/* Heroes and banners settle in on load: movement only. Starting them at opacity 0 hid the first screen until the
   animation ran, so Google's PageSpeed found no main content (NO_LCP) and phones painted late. */
.hero-copy > *, .banner > *, .split-hero-copy > *, .article-hero > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > :nth-child(2), .banner > :nth-child(2), .split-hero-copy > :nth-child(2), .article-hero > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3), .banner > :nth-child(3), .split-hero-copy > :nth-child(3), .article-hero > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4), .banner > :nth-child(4), .split-hero-copy > :nth-child(4), .article-hero > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(n+5), .banner > :nth-child(n+5), .split-hero-copy > :nth-child(n+5), .article-hero > :nth-child(n+5) { animation-delay: .32s; }
.diag img { animation: zoom-out 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(22px); } to { transform: none; } }
@keyframes zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Scroll reveal: redesign.js tags elements .rv and adds .rv-in on entry.
   Content is only hidden once JavaScript is running. */
.js-ready .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-delay, 0s); }
.js-ready .rv.rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .rv { opacity: 1; transform: none; }
  .collage .c-badge, .instant-fab::after, .track-truck.is-moving { animation: none; }
}

/* ------------------------------------------------- glass hero (homepage) */
/* At the top of the homepage the header and the quote card are frosted glass
   over the video. redesign.js adds .is-scrolled to <html> as soon as the page
   scrolls, and they settle back to solid white. Orange bars stay solid. */
.request-hero { margin-top: -90px; }
.logo-card, .hdr-panel, .hdr-strip, .hdr-nav, .request-card, .request-title, .request-card input, .request-card select, .request-card textarea {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease;
}
.logo-mark path, .logo-mark circle, .logo-name, .logo-sub, .nav-links a, .hdr-nav .callbox { transition: fill .45s ease, color .45s ease; }
/* The panel's blur sits on a pseudo-element: backdrop-filter on the panel
   itself would make it the containing block of the fixed (sticky) nav. */
.site-header.is-glass .hdr-panel { position: relative; z-index: 0; }
.site-header.is-glass .hdr-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  transition: opacity .45s ease;
}
:root:not(.is-scrolled) .site-header.is-glass .hdr-panel::before { opacity: 1; }
:root:not(.is-scrolled) .site-header.is-glass .logo-card {
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
:root:not(.is-scrolled) .site-header.is-glass .logo-card,
:root:not(.is-scrolled) .site-header.is-glass .hdr-panel {
  background-color: rgba(255,255,255,.1); color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 18px 40px rgba(10,18,34,.18);
}
:root:not(.is-scrolled) .site-header.is-glass .logo-card:hover { color: var(--white); }
:root:not(.is-scrolled) .site-header.is-glass .lm-cab { fill: var(--white); }
:root:not(.is-scrolled) .site-header.is-glass .lm-window,
:root:not(.is-scrolled) .site-header.is-glass .lm-wheel { fill: var(--navy); }
:root:not(.is-scrolled) .site-header.is-glass .hdr-nav { background-color: transparent; }
:root:not(.is-scrolled) .site-header.is-glass .nav-links a,
:root:not(.is-scrolled) .site-header.is-glass .hdr-nav .callbox,
:root:not(.is-scrolled) .site-header.is-glass .hdr-nav .callbox:hover { color: var(--white); }
:root:not(.is-scrolled) .site-header.is-glass .nav-links a[aria-current="page"],
:root:not(.is-scrolled) .site-header.is-glass .nav-links a:hover { color: var(--orange-light); }
:root:not(.is-scrolled) .site-header.is-glass .menu-toggle { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
:root:not(.is-scrolled) .request.is-glass .request-card {
  background-color: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 24px 60px rgba(10,18,34,.22);
}
:root:not(.is-scrolled) .request.is-glass .request-card input,
:root:not(.is-scrolled) .request.is-glass .request-card select,
:root:not(.is-scrolled) .request.is-glass .request-card textarea { background-color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.75); }

/* ------------------------------------------------------------ sticky nav */
/* On wide screens, once the header scrolls out of view its nav row (links and
   the call button) pins to the top of the window, centered. redesign.js
   toggles .is-stuck and holds the header's height so nothing jumps. */
@keyframes nav-drop { from { opacity: 0; transform: translate(-50%, -24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 1081px) {
  html { scroll-padding-top: 100px; }
  .hdr-nav.is-stuck {
    position: fixed; top: 14px; left: 50%; z-index: 50; transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 32px); flex: none; flex-wrap: nowrap;
    gap: 40px; padding: 8px 10px 8px 30px; border-radius: 14px;
    background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(16,26,46,.18);
    animation: nav-drop .35s cubic-bezier(.2,.7,.2,1);
  }
}

/* ------------------------------------------------- phone hero + quote form */
/* On phones the quote form is its own section under the hero instead of
   overlapping it, so the video gets the whole first screen (minus the
   bottom action bar) and the hero copy sits near its bottom edge. */
@media (max-width: 720px) {
  .request-hero { margin-top: 0; padding-top: 28px; }
  :root:not(.is-scrolled) .request.is-glass .request-card {
    background-color: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 20px 50px rgba(16,26,46,.18);
  }
  :root:not(.is-scrolled) .request.is-glass .request-card input,
  :root:not(.is-scrolled) .request.is-glass .request-card select,
  :root:not(.is-scrolled) .request.is-glass .request-card textarea { background-color: var(--cream); border-color: #e6ddd0; }
}

/* Phones get the 960 px WebP copy of a background photo (--bg-sm, set by scripts/responsive-photos.mjs). */
@media (max-width: 720px) {
  [style*="--bg-sm"] { background-image: var(--bg-sm) !important; }
}