@charset "UTF-8";

/* ==========================================================================
   Bring The Truck — design system

   Mobile-first: every base rule targets the small screen, and min-width media
   queries add complexity as space allows. Nothing here is a desktop layout
   walked backwards.

   No inline styles or inline <style> exist anywhere in the site, which is what
   lets the Content-Security-Policy hold `style-src 'self'` with no
   'unsafe-inline' escape hatch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-900: #0E2740;
  --navy-800: #12304E;
  --navy-700: #1B4066;
  /* Brand orange: decorative accents and LARGE text only (3.04:1 on white —
     passes the 3:1 large-text bar, fails the 4.5:1 normal-text bar). */
  --orange-500: #F26B21;
  /* CTA orange: 4.73:1 with white — every button/badge with normal-size
     text sits on this one. WCAG 2.2 AA is why it exists; don't "brighten"
     it back without re-checking contrast. */
  --orange-cta: #C84A0D;
  --orange-cta-hover: #A93E0B;
  --green-600: #1E9B5F;   /* decorative check icons */
  --green-700: #147A48;   /* green TEXT on white (5.4:1) */

  /* Neutrals */
  --ink: #1B2733;
  --muted: #566779;
  --line: #E3E8EC;
  --surface: #FFFFFF;
  --surface-muted: #F4F7F9;
  --hero-wash: #F6F8FA;

  /* Focus ring — overridden to white inside dark sections. */
  --focus: var(--navy-900);
  --focus-halo: rgba(242, 107, 33, 0.45);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Spacing */
  --gutter: 20px;
  --section-y: 56px;

  /* Type: a system stack, so no font is fetched from a third-party origin. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 80px; }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/**
 * The [hidden] attribute must always win.
 *
 * The UA stylesheet gives [hidden] `display: none`, but that is a
 * single-attribute selector — any class rule setting `display` (grid, flex,
 * block) outranks it and the element renders anyway. That bug shipped twice
 * here: empty error slots showed a red warning glyph beside untouched
 * fields, and every step of the quote form rendered at once. Anything hidden
 * from the accessibility tree must be hidden on screen too, so this is the
 * one place !important is the correct tool.
 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  /*
   * Nothing may cause a sideways scroll at any width.
   *
   * `clip`, NOT `hidden`. overflow:hidden makes the element a scroll
   * container, and a scroll-container ancestor silently disables
   * `position: sticky` for everything inside it — which is exactly what
   * stopped the quote progress bar sticking. `clip` prevents the scroll
   * without creating that container, so sticky still works.
   */
  overflow-x: clip;
}

h1, h2, h3 { margin: 0; line-height: 1.15; color: var(--navy-900); font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, picture { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.icon { width: 24px; height: 24px; flex: none; }

/* --------------------------------------------------------------------------
   3. Accessibility utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--navy-900); color: #fff;
  padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* One visible focus treatment for the whole site. The halo guarantees the
   ring stays perceivable even where the outline colour is close to the
   background it lands on. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

main:focus { outline: none; }

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--muted { background: var(--surface-muted); }
.section--narrow { padding-block: calc(var(--section-y) * .8); }

.section__title {
  font-size: clamp(1.65rem, 5vw, 2.4rem);
  text-align: center;
  margin-bottom: 2rem;
}
.section--narrow .section__title { text-align: left; }

.h3 { font-size: 1.15rem; font-weight: 800; color: var(--navy-900); margin-top: 2rem; margin-bottom: .75rem; }

/* --------------------------------------------------------------------------
   5. Buttons — 44px minimum touch target throughout
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .1s ease;
  /* Drops the legacy 300ms tap delay and stops double-tap zoom on controls,
     which is what makes taps feel native rather than laggy. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Pressed state, not hover: a touch device has no hover, so the press is the
   only feedback the visitor gets that the tap registered. */
.btn:active { transform: scale(.975); }
.m-card, .bottom-nav__link, .app-bar__action, .contact-card__row, .faq__q {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .95rem; }
.btn--lg { min-height: 52px; padding: 14px 28px; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--orange-cta); color: #fff; }
.btn--primary:hover { background: var(--orange-cta-hover); }

.btn--ghost { background: transparent; color: var(--navy-800); border-color: #C8D3DC; }
.btn--ghost:hover { background: #fff; border-color: var(--navy-800); }

.btn__icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* Stays white by Chris's call. A navy version matching the footer was built
   and measured (white links 15.19:1, orange current-page 4.99:1) and he chose
   white — do not "restore" it without asking. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}

.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.logo__mark { width: 46px; height: 26px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name { font-size: 1.02rem; font-weight: 800; color: var(--navy-900); letter-spacing: -0.01em; }
.logo__tag { font-size: .55rem; font-weight: 700; color: var(--orange-cta); letter-spacing: .06em; }

.nav-desktop { display: none; }
.site-header__actions { display: flex; align-items: center; gap: .5rem; }

.nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .65rem;
  color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none;
  border-radius: var(--r-sm);
}
.nav-link:hover { color: var(--orange-cta); }
.nav-link--auth { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--navy-900); cursor: pointer;
}
.nav-toggle__icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: block; }

/* Drawer for the 900-1023px band, where the horizontal nav has not appeared
   yet. Matches the bar it hangs off. */
.mobile-nav {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: .5rem var(--gutter) 1.25rem;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { margin-bottom: .75rem; }
.mobile-nav__link {
  display: flex; align-items: center; min-height: 52px;
  font-size: 1.05rem; font-weight: 700; color: var(--navy-900); text-decoration: none;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .nav-desktop { display: block; margin-right: .5rem; }
  .nav-desktop__list { display: flex; align-items: center; gap: .25rem; }
  .nav-link--auth { display: inline-flex; border-left: 1px solid var(--line); margin-left: .5rem; padding-left: 1rem; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Hero

   Mobile order is content first, image second — which is also the DOM order,
   so no reordering trickery is needed and the reading order matches the
   visual order. On wide screens the image becomes a full-bleed panel on the
   right and a gradient fades its left edge into the page wash.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--hero-wash) 100%);
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 2; padding-block: 2.5rem 1.75rem; }
.hero__content { max-width: 34rem; }

.hero__title {
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}
.hero__line { display: block; }

.hero__lede {
  font-size: clamp(1rem, 4vw, 1.12rem);
  color: var(--muted);
  max-width: 30rem;
  margin-bottom: 1.5rem;
}

.hero__points {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  margin-bottom: 1.75rem;
}
.hero__points li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; color: var(--navy-900);
}
.hero__points .icon { width: 22px; height: 22px; color: var(--navy-800); }

.hero__actions { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }

.hero__price {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; color: var(--ink);
}
.hero__price strong { color: var(--navy-900); }
.hero__price-icon { color: var(--green-600); width: 22px; height: 22px; }

/* Secondary routes out of the hero. Quote and How-it-works were buttons until
   the two role actions took that slot; they stay one tap away as text rather
   than competing with the choice the page is actually asking for. */
.hero__alt {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  color: var(--text-muted, #5A6B7B);
}
.hero__alt a { color: inherit; text-decoration: underline; }
.hero__alt a:hover { color: var(--brand-navy, #12304E); }

.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; }

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 980px) {
  /* min-height only sets the hero's visual proportion — below ~1200px the
     wrapped text is taller than it anyway, so it cannot be relied on to
     control the panel's aspect ratio. Protecting the truck's nose is the
     job of object-position below. */
  .hero__inner { padding-block: 4rem 4.5rem; min-height: 27rem; display: flex; align-items: center; }
  .hero__content { max-width: 27rem; }
  .hero__title { font-size: clamp(2.9rem, 4.4vw, 4.4rem); }

  .hero__media {
    position: absolute; top: 0; right: 0; bottom: 0; left: auto;
    width: 64%; z-index: 1;
  }
  .hero__media img,
  .hero__media picture { width: 100%; height: 100%; display: block; }
  /* X is biased toward the vehicle. Wide screens make the panel wider than the
     photo's 16:9, so cover crops only vertically and X is inert. Narrower
     desktops (~980-1150px) make the panel proportionally taller, and there
     cover crops sideways.

     The subject sits deliberately right-of-centre: the five adults span 44-76%
     of the frame and the truck runs 62-100%, leaving 0-44% as open car park
     for the headline. A high X therefore spends the sideways crop on that
     empty left edge — which the gradient below already washes out — instead
     of on a person. (X was 22% for a much older hero whose truck sat at the
     LEFT; that value would now cut the group.)

     Checked by simulating cover at panel aspects 1.20 through 1.60: at 72%
     the narrowest case still shows 23%-91% of the frame, so all five adults
     survive with room to spare.
     Y biases the vertical crop downward, favouring the group and truck over
     empty sky while keeping their feet in frame.
     Verify at 980/1024/1200/1440/1920 after any hero swap. */
  .hero__media img { object-fit: cover; object-position: 72% 62%; }

  /* Fades the photo's left edge into the page so the headline stays legible
     without a scrim over the text itself. The fade must finish before the
     truck's front end — reaching too far right washes out the grille, the
     most recognisable part of the vehicle. */
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(
      to right,
      var(--hero-wash) 0%,
      rgba(246, 248, 250, 0.90) 12%,
      rgba(246, 248, 250, 0.45) 24%,
      rgba(246, 248, 250, 0.12) 33%,
      rgba(246, 248, 250, 0) 40%
    );
  }
}

@media (min-width: 1200px) {
  .hero__inner { padding-block: 5rem 5.5rem; min-height: 31rem; }
  .hero__content { max-width: 30rem; }

  .hero__media::after {
    background: linear-gradient(
      to right,
      var(--hero-wash) 0%,
      rgba(246, 248, 250, 0.88) 9%,
      rgba(246, 248, 250, 0.42) 19%,
      rgba(246, 248, 250, 0.10) 28%,
      rgba(246, 248, 250, 0) 35%
    );
  }
}

@media (min-width: 1400px) {
  .hero__inner { min-height: 34rem; }
  .hero__content { max-width: 32rem; }
  .hero__media { width: 62%; }
}

/* --------------------------------------------------------------------------
   8. Benefits strip
   -------------------------------------------------------------------------- */
.strip { background: var(--navy-800); color: #fff; --focus: #fff; }
.strip__grid { display: grid; gap: 1.25rem; padding-block: 1.75rem; }
.strip__item { display: flex; align-items: center; gap: .85rem; }
.strip__icon { width: 30px; height: 30px; color: #fff; opacity: .95; }
.strip__title { display: block; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.strip__sub { display: block; font-size: .9rem; color: #C6D5E2; }

@media (min-width: 560px) { .strip__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .strip__grid { grid-template-columns: repeat(4, 1fr); padding-block: 2rem; } }

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 2.25rem; }

.step__art {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
}
.step__icon { width: 34px; height: 34px; color: var(--navy-800); }

.step__head { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  background: var(--orange-cta); color: #fff;
  border-radius: 50%; font-size: .9rem; font-weight: 800;
}
.step__title { font-size: 1.08rem; }
.step__body { color: var(--muted); font-size: .96rem; }

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

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */
.pricing {
  margin-top: 3.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem var(--gutter);
  display: grid; gap: 2rem;
}

.pricing__title { font-size: clamp(1.4rem, 5vw, 1.9rem); margin-bottom: 1.25rem; }
.pricing__label { font-weight: 700; color: var(--navy-900); }
.pricing__figure {
  font-size: clamp(3rem, 14vw, 4rem); font-weight: 800; color: var(--orange-500);
  line-height: 1; letter-spacing: -0.04em; margin-bottom: 1rem;
}
.pricing__currency { font-size: .55em; vertical-align: .32em; margin-right: .04em; }

.pricing__note { color: var(--ink); margin-bottom: .85rem; }

.pricing__factors { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.pricing__factors li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; }
.pricing__check { width: 20px; height: 20px; color: var(--green-600); margin-top: 3px; }

.pricing__server-note {
  font-size: .9rem; color: var(--muted);
  border-left: 3px solid var(--orange-500);
  padding-left: .85rem; margin-bottom: 1.5rem;
}

/* Illustrative quote card */
.phone { margin: 0; }
.phone__caption {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .6rem; text-align: center;
}
.phone__frame {
  background: var(--navy-900); border-radius: 26px; padding: 10px;
  max-width: 300px; margin-inline: auto;
  box-shadow: 0 18px 40px rgba(14, 39, 64, .18);
}
.phone__screen { background: #fff; border-radius: 18px; padding: 1.1rem; }
.phone__heading { font-weight: 800; color: var(--navy-900); margin-bottom: .75rem; }
.phone__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
.phone__row--total { border-top: 0; font-size: .95rem; color: var(--navy-900); font-weight: 700; }
.phone__price { color: var(--green-700); font-weight: 800; }
.phone__cta {
  margin-top: .9rem; background: var(--orange-cta); color: #fff;
  text-align: center; font-weight: 800; padding: .7rem; border-radius: var(--r-pill);
}
.phone__disclaimer { margin-top: .6rem; font-size: .7rem; color: var(--muted); text-align: center; }

@media (min-width: 900px) {
  .pricing { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; padding: 2.75rem; }
}

/* --------------------------------------------------------------------------
   11. Trust + safety
   -------------------------------------------------------------------------- */
.trust { display: grid; gap: 1.75rem; }
.trust__item { text-align: center; }
.trust__icon { width: 34px; height: 34px; color: var(--navy-800); margin-inline: auto; margin-bottom: .75rem; }
.trust__title { font-size: 1rem; margin-bottom: .35rem; }
.trust__body { font-size: .92rem; color: var(--muted); }

.safety {
  margin-top: 3rem; padding: 1.5rem;
  background: var(--surface-muted); border-radius: var(--r-lg);
}
.safety__title { font-size: 1.05rem; margin-bottom: .85rem; }
.safety__list { display: grid; gap: .6rem; }
.safety__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; }
.safety__check { width: 20px; height: 20px; color: var(--green-600); margin-top: 3px; }

@media (min-width: 560px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .trust { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .safety { padding: 2rem 2.5rem; }
  .safety__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* --------------------------------------------------------------------------
   12. Final CTA
   -------------------------------------------------------------------------- */
.cta { background: var(--navy-800); color: #fff; --focus: #fff; padding-block: 2.5rem; }
.cta__inner { display: grid; gap: 1.5rem; }
.cta__title { color: #fff; font-size: clamp(1.35rem, 5vw, 1.85rem); margin-bottom: .4rem; }
.cta__sub { color: #C6D5E2; font-size: .98rem; }
.cta__btn { justify-self: start; }

@media (min-width: 860px) {
  .cta__inner { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
  .cta__btn { justify-self: end; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #C6D5E2; --focus: #fff; padding-block: 2.5rem 1.5rem; }
.site-footer__inner { display: grid; gap: 2rem; }
.site-footer__name { display: block; font-weight: 800; color: #fff; letter-spacing: .02em; }
.site-footer__tag { display: block; font-size: .85rem; color: var(--orange-500); font-weight: 700; }

.site-footer__nav ul { display: grid; gap: .6rem; }
.site-footer a { color: #C6D5E2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__nav a, .site-footer__contact a {
  display: inline-flex; align-items: center; min-height: 44px;
}

.site-footer__contact-title { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: .25rem; }

.site-footer__legal {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem;
}

@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; }
  .site-footer__nav ul { gap: .1rem; }
}

/* --------------------------------------------------------------------------
   14. Notices / lists (quote + accounts placeholders, error page)
   -------------------------------------------------------------------------- */
.notice {
  background: var(--surface-muted);
  border-left: 4px solid var(--orange-500);
  border-radius: var(--r-md);
  padding: 1.25rem 1.35rem;
  display: grid; gap: .75rem;
}
.notice__lead { font-weight: 800; color: var(--navy-900); }

.list-checks { display: grid; gap: .6rem; margin-bottom: 2rem; }
.list-checks li { display: flex; align-items: flex-start; gap: .6rem; }
.list-checks .icon { width: 20px; height: 20px; color: var(--green-600); margin-top: 4px; }

.page-error { padding: 3rem 0; }
.page-error h1 { margin-bottom: 1rem; }
.page-error p { margin-bottom: .75rem; }

/* ==========================================================================
   15. MOBILE APP SHELL  (below 900px)

   Below this breakpoint the site is not a narrowed desktop page — it is an
   application shell: fixed top app bar, fixed bottom navigation, and screens
   in between. Both shells are in the DOM and swapped here, which keeps the
   markup cacheable and leaves exactly one navigation in the accessibility
   tree (display:none removes the other entirely).
   ========================================================================== */

:root {
  --app-bar-h: 56px;
  --bottom-nav-h: 60px;
  /* Resolve to 0 everywhere except notched devices, where viewport-fit=cover
     in the meta tag makes them real. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --m-pad: 18px;
}

.app-bar, .bottom-nav, .m-home, .install-sheet { display: none; }

@media (max-width: 899.98px) {
  /* Desktop chrome is fully removed, not merely restyled. */
  .site-header, .site-footer, .d-only { display: none !important; }

  body {
    background: var(--surface-muted);
    /* Content clears both fixed bars, plus the home indicator. */
    padding-top: calc(var(--app-bar-h) + var(--safe-t));
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 8px);
  }

  /* ---- Top app bar --------------------------------------------------- */
  .app-bar {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding-top: var(--safe-t);
    padding-left: var(--safe-l); padding-right: var(--safe-r);
  }
  .app-bar__inner {
    height: var(--app-bar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding-inline: var(--m-pad);
  }
  /* The logo is a link home, so it is a touch target and must clear 44px
     even though the artwork itself is 40px tall. */
  .app-bar .logo { display: flex; align-items: center; min-height: 44px; }
  .app-bar .logo__img { display: block; }
  .app-bar__action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    border-radius: 50%; color: var(--navy-800); text-decoration: none;
  }
  .app-bar__action:active { background: var(--surface-muted); }

  /* ---- Bottom navigation --------------------------------------------- */
  .bottom-nav {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff;
    border-top: 1px solid var(--line);
    padding-bottom: var(--safe-b);
    padding-left: var(--safe-l); padding-right: var(--safe-r);
  }
  .bottom-nav__list {
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: var(--bottom-nav-h);
  }
  .bottom-nav__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 100%; min-height: 44px;
    color: var(--muted); text-decoration: none;
    font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  }
  .bottom-nav__icon { display: flex; }
  .bottom-nav__icon .icon { width: 23px; height: 23px; }
  .bottom-nav__link.is-active { color: var(--navy-800); }
  /* Active state is carried by weight + an indicator bar as well as colour,
     so it is not communicated by colour alone. */
  .bottom-nav__link.is-active .bottom-nav__icon { position: relative; }
  .bottom-nav__link.is-active .bottom-nav__icon::after {
    content: ""; position: absolute; left: 50%; top: -9px;
    transform: translateX(-50%);
    width: 20px; height: 3px; border-radius: 2px;
    background: var(--orange-cta);
  }
  .bottom-nav__link:active { background: var(--surface-muted); }

  /* Centre Quote action: raised, brand-coloured, unmistakably the primary
     task and one tap from every screen. */
  .bottom-nav__item--primary { position: relative; }
  .bottom-nav__item--primary .bottom-nav__link {
    color: #fff;
    position: absolute; left: 50%; bottom: 8px;
    transform: translateX(-50%);
    width: 60px; height: 60px; min-height: 60px;
    border-radius: 50%;
    background: var(--orange-cta);
    box-shadow: 0 6px 18px rgba(200, 74, 13, .38);
    gap: 1px;
  }
  .bottom-nav__item--primary .bottom-nav__link:active {
    background: var(--orange-cta-hover);
    transform: translateX(-50%) scale(.95);
  }
  .bottom-nav__item--primary .bottom-nav__icon .icon { width: 22px; height: 22px; }
  .bottom-nav__item--primary .bottom-nav__label { font-size: .6rem; }
  .bottom-nav__item--primary .bottom-nav__link.is-active .bottom-nav__icon::after { display: none; }
  .bottom-nav__item--primary .bottom-nav__link.is-active {
    box-shadow: 0 0 0 4px rgba(200, 74, 13, .22), 0 6px 18px rgba(200, 74, 13, .38);
  }

  /* ---- Mobile home ---------------------------------------------------- */
  .m-home { display: block; padding: 0 0 1.5rem; }

  .m-hero {
    background: #fff;
    padding: 1.35rem var(--m-pad) 1.25rem;
    border-bottom: 1px solid var(--line);
  }
  .m-hero__eyebrow {
    font-size: .72rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--orange-cta); margin-bottom: .5rem;
  }
  .m-hero__title {
    font-size: clamp(2.1rem, 10.5vw, 2.7rem); line-height: 1.03;
    letter-spacing: -0.035em; margin-bottom: .6rem;
  }
  .m-hero__title span { display: block; }
  .m-hero__lede { color: var(--muted); font-size: .97rem; margin-bottom: .85rem; }
  .m-hero__price {
    display: flex; align-items: center; gap: .5rem;
    font-size: .95rem; margin-bottom: 1.1rem;
  }
  .m-hero__price .icon { width: 20px; height: 20px; color: var(--green-600); flex: none; }
  .m-hero__price strong { color: var(--navy-900); }
  .m-hero__actions { display: grid; gap: .6rem; }

  .m-hero__media { padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
  /* The mobile source is a deliberate 2:1 crop, so the box tracks 2:1 rather
     than a fixed height. A fixed 190px became a 4:1 letterbox by 768px, which
     cut the group off at the hip and pushed the store name out of frame
     entirely — the one element that establishes the retail setting.
     min-height keeps the familiar band on small phones (320px crops sideways
     by ~16%, which the group survives); max-height stops it dominating at the
     top of the mobile shell. The primary action sits ABOVE this image, so a
     taller box never pushes the CTA down. */
  .m-hero__media img {
    width: 100%; height: auto;
    aspect-ratio: 2 / 1;
    min-height: 190px; max-height: 420px;
    object-fit: cover; object-position: 62% 55%; display: block;
  }

  .m-section-title {
    font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); padding: 1.35rem var(--m-pad) .6rem;
  }

  .m-cards { display: grid; gap: .6rem; padding-inline: var(--m-pad); }
  .m-card {
    display: flex; align-items: center; gap: .85rem;
    min-height: 68px; padding: .85rem 1rem;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(14, 39, 64, .04);
    transition: transform .12s ease, background-color .12s ease;
  }
  .m-card:active { transform: scale(.985); background: var(--surface-muted); }
  .m-card__icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    background: var(--surface-muted); border-radius: 11px; color: var(--navy-800);
  }
  .m-card--accent .m-card__icon { background: rgba(200, 74, 13, .1); color: var(--orange-cta); }
  .m-card--accent { border-color: rgba(200, 74, 13, .32); }
  .m-card__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
  .m-card__title { font-weight: 800; color: var(--navy-900); font-size: .98rem; }
  .m-card__sub { color: var(--muted); font-size: .84rem; }
  .m-card__chevron { color: #A7B4C0; display: flex; flex: none; }
  .m-card__chevron .icon { width: 20px; height: 20px; }

  .m-foot-note {
    text-align: center; color: var(--muted); font-size: .78rem;
    padding: 1.75rem var(--m-pad) .5rem;
  }

  /* ---- Sub-pages ------------------------------------------------------ */
  .page { padding: 1.25rem 0 1.5rem; }
  .page .container { padding-inline: var(--m-pad); }
  .page__title { font-size: 1.75rem; margin-bottom: .5rem; }
  .page__lede { color: var(--muted); margin-bottom: 1.25rem; }

  .m-steps { display: grid; gap: .7rem; margin-bottom: 1.5rem; }
  .m-step {
    display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: .8rem;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
  }
  .m-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--orange-cta); color: #fff; font-weight: 800; font-size: .82rem;
  }
  .m-step__icon { color: var(--navy-800); display: flex; }
  .m-step__text { display: flex; flex-direction: column; }
  .m-step__title { font-weight: 800; color: var(--navy-900); }
  .m-step__body { color: var(--muted); font-size: .9rem; }

  .price-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 1.35rem; text-align: center; margin-bottom: 1.5rem;
  }
  .price-card__label { font-weight: 700; color: var(--navy-900); }
  .price-card__figure {
    font-size: 3.4rem; font-weight: 800; color: var(--orange-500);
    line-height: 1; letter-spacing: -.04em; margin: .35rem 0 .4rem;
  }
  .price-card__currency { font-size: .5em; vertical-align: .35em; }
  .price-card__unit { font-weight: 800; color: var(--navy-900); margin-top: -.25rem; margin-bottom: .3rem; }
  .price-card__note { color: var(--muted); font-size: .9rem; }
  .price-card__note strong { color: var(--navy-900); }

  .contact-card { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
  .contact-card__row {
    display: flex; align-items: center; gap: .75rem; min-height: 56px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: .85rem 1rem; text-decoration: none; color: var(--navy-900); font-weight: 700;
  }
  .contact-card__row:active { background: var(--surface-muted); }

  .faq { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
  .faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 56px; padding: .9rem 1rem; cursor: pointer;
    font-weight: 700; color: var(--navy-900); list-style: none;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__marker { color: var(--muted); display: flex; transition: transform .18s ease; }
  .faq__item[open] .faq__marker { transform: rotate(180deg); }
  .faq__a { padding: 0 1rem 1rem; color: var(--muted); font-size: .92rem; }

  .callout {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 1rem; display: grid; gap: .6rem; margin-bottom: 1.5rem;
    font-size: .92rem; color: var(--muted);
  }
  .callout strong { color: var(--navy-900); }
  .callout--accent { border-left: 4px solid var(--orange-cta); }

  .section--narrow .container { padding-inline: var(--m-pad); }
}

/* .m-home is its own page now (/customer), not the mobile half of `/`, so it
   must render at every width. Hiding it above 900px left that route blank on a
   desktop. The app-bar and bottom-nav around it stay mobile-only; on a wide
   screen the customer page simply sits inside the normal site chrome. */
/* Desktop keeps the classic site; mobile-only blocks stay hidden. */
@media (min-width: 900px) {
  .m-home { display: none !important; }
}

/* ==========================================================================
   16. FORMS  (quote screen)
   ========================================================================== */
.quote-form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .35rem; }
.field__label { font-weight: 700; color: var(--navy-900); font-size: .95rem; }
.field__input {
  font: inherit; color: var(--ink);
  min-height: 52px; padding: .8rem .9rem;
  background: #fff;
  border: 1.5px solid #CFD8E0; border-radius: 12px;
  width: 100%;
  /* 16px minimum stops iOS zooming the viewport when a field is focused. */
  font-size: 16px;
}
.field__input--area { min-height: 96px; resize: vertical; }
.field__input:focus-visible { border-color: var(--navy-800); }
.field__hint { font-size: .82rem; color: var(--muted); }

.field__error {
  display: flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 600; color: #B3261E;
}
.field__error::before { content: "⚠"; font-size: .9em; }
.field.is-invalid .field__input { border-color: #B3261E; background: #FFF7F6; }

.quote-form__legal { font-size: .82rem; color: var(--muted); text-align: center; }

.notice--pending { border-left-color: var(--navy-800); }

/* ==========================================================================
   17. PWA SURFACES — status, update, install
   ========================================================================== */
.status-stack {
  position: fixed; left: 0; right: 0; z-index: 80;
  top: calc(var(--safe-t)); pointer-events: none;
}
@media (min-width: 900px) { .status-stack { top: 0; } }

.status-bar {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1rem; font-size: .86rem; font-weight: 700; color: #fff;
}
.status-bar[hidden] { display: none; }
.status-bar--offline { background: #8A5A00; }
.status-bar--back { background: var(--green-600); }
.status-bar__dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  flex: none; opacity: .9;
}

.update-toast {
  position: fixed; z-index: 85;
  left: 12px; right: 12px;
  bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 12px);
  display: flex; align-items: center; gap: .75rem;
  background: var(--navy-900); color: #fff;
  border-radius: 14px; padding: .85rem 1rem;
  box-shadow: 0 10px 30px rgba(14, 39, 64, .3);
  --focus: #fff;
}
.update-toast[hidden] { display: none; }
.update-toast__text { display: flex; flex-direction: column; flex: 1 1 auto; font-size: .85rem; }
.update-toast__text span { color: #C6D5E2; }
.update-toast__dismiss {
  background: transparent; border: 0; color: #C6D5E2; cursor: pointer;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 900px) {
  .update-toast { left: auto; right: 24px; bottom: 24px; max-width: 26rem; }
}

.install-sheet {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: .6rem var(--m-pad) calc(1rem + var(--safe-b));
  box-shadow: 0 -8px 40px rgba(14, 39, 64, .22);
  animation: sheet-up .28s ease;
}
@media (max-width: 899.98px) { .install-sheet { display: block; } }

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.install-sheet__grip {
  width: 40px; height: 4px; border-radius: 2px; background: #D6DEE5;
  margin: 0 auto .9rem;
}
.install-sheet__body { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.install-sheet__icon { border-radius: 11px; }
.install-sheet__title { font-weight: 800; color: var(--navy-900); }
.install-sheet__sub { font-size: .88rem; color: var(--muted); }
.install-sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* Standalone-only affordances: shown when launched from the home screen. */
.standalone-only { display: none; }
body.is-standalone .standalone-only { display: block; }
body.is-standalone .browser-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  .install-sheet { animation: none; }
}

/* ==========================================================================
   18. OFFLINE SCREEN
   ========================================================================== */
.offline-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem calc(var(--m-pad) + var(--safe-l)) calc(2rem + var(--safe-b));
  background: var(--surface-muted);
}
.offline-screen__inner { max-width: 26rem; width: 100%; text-align: center; }
.offline-screen__icon { width: 56px; height: 56px; color: #8A5A00; margin: 0 auto 1.25rem; }
.offline-screen h1 { font-size: 1.75rem; margin-bottom: .6rem; }
.offline-screen__lede { color: var(--muted); margin-bottom: 1.25rem; }
.offline-screen__list {
  display: grid; gap: .5rem; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: 1.25rem;
  font-size: .92rem; color: var(--ink);
}
.offline-screen__list li { position: relative; padding-left: 1.1rem; }
.offline-screen__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: #8A5A00;
}
.offline-screen__note { font-size: .88rem; color: var(--muted); margin-bottom: 1.5rem; }

/* ==========================================================================
   19. QUOTE SCREEN — one content grid, one set of edges

   Everything in the form — labels, inputs, native date/time pickers, the
   textarea, the upload area, tips, errors and the Continue button — shares
   the same left and right boundary. That is achieved structurally, not by
   nudging individual widths:

     .form-field  >  label  +  .input-shell > control  +  .field-error

   The SHELL owns border, radius, height and horizontal padding. The control
   inside is borderless, padding-free and width:100%. Padding a native
   date/time input directly is what makes it overflow on iOS, so that never
   happens here.

   Every grid child carries `min-width: 0`. Grid items default to
   `min-width: auto`, which lets a long placeholder or a native picker push a
   track wider than its container — that was the cause of the right-edge
   overflow, and the reason nothing lined up.
   ========================================================================== */

.quote-page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px calc(110px + env(safe-area-inset-bottom, 0px));
}

/* The page owns its bottom clearance, so the global mobile body padding
   would otherwise double up. */
@media (max-width: 899.98px) {
  body[data-route="/quote"] { padding-bottom: 0; }
}

/* ---- Hero ---- */
.q-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy-900);
  margin-bottom: 16px;
}
.q-hero img { width: 100%; height: 260px; object-fit: cover; object-position: 62% 50%; display: block; }
.q-hero__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px;
  background: linear-gradient(100deg,
    rgba(9, 24, 40, .93) 0%, rgba(9, 24, 40, .82) 34%,
    rgba(9, 24, 40, .30) 64%, rgba(9, 24, 40, .06) 100%);
  color: #fff;
}
.q-hero__title { color: #fff; font-size: clamp(1.6rem, 7.6vw, 2rem); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 6px; }
.q-hero__sub { font-size: .86rem; color: #D6E2EC; margin-bottom: 12px; max-width: 15rem; }
.q-hero__points { display: grid; gap: 6px; }
.q-hero__points li { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; min-width: 0; }
.q-hero__points .icon { width: 17px; height: 17px; color: var(--orange-500); flex: none; }

/* ---- Card ---- */
.q-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 1px 3px rgba(14, 39, 64, .05);
}
.q-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.q-card__heading { min-width: 0; }
.q-card__title { font-size: 1.3rem; }
.q-card__sub { color: var(--muted); font-size: .9rem; }
.q-secure { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: .72rem; font-weight: 700; color: var(--navy-800); }
.q-secure .icon { width: 16px; height: 16px; color: var(--green-600); }

/* ---- Progress: sticks beneath the app bar once scrolled past --------------
   `top` is derived from --app-bar-h, the same token the app bar itself uses,
   so the two can never drift apart. Guessing a header height is how sticky
   bars end up tucked under the status bar or floating below it. */
:root {
  --progress-bg: rgba(255, 255, 255, .97);
  --progress-border: #DBE4EC;
  --progress-active: var(--orange-cta);
  --progress-complete: #0A2540;
  --progress-upcoming: #93A1AF;
}

.progress-sentinel { height: 1px; margin: 0; }

.quote-progress {
  /* NOT STICKY ANY MORE. Pinning made sense while the steps were a thin
     horizontal strip; a vertical list pinned to the top would hold a third of
     a phone screen hostage for the whole form. It sits at the top of the card
     and scrolls away like any other heading. */
  position: static;
  width: 100%;
  margin: 0 -16px 20px;
  width: calc(100% + 32px);
  padding: 12px 0;
  background: var(--progress-bg);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* Kept harmless: the script still toggles this class from the sentinel, and
   an empty rule is cheaper than a script change that could desync. */
.quote-progress.is-stuck { border-bottom-color: transparent; }

/* ---- The steps read down the page, not across it ------------------------
   Three labels squeezed side by side on a 390px screen left "Review & Qu..."
   truncated mid-word, and the eye has to travel sideways to follow a sequence
   that is vertical everywhere else in the flow. Down the page each step gets
   its full label, the connector is a line you actually follow, and adding a
   fourth step later costs nothing. */
.quote-progress__list {
  display: grid;
  grid-auto-flow: row;
  gap: 0;
  width: 100%; margin: 0; padding: 0 16px;
  list-style: none;
}

.quote-progress__step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0; text-align: left;
  color: var(--progress-upcoming);
}
.quote-progress__number {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 2px solid currentColor; border-radius: 999px;
  background: #fff; font-size: .82rem; font-weight: 800;
}
.quote-progress__label {
  /* No ellipsis. There is room for the whole label now, and a step called
     "Review & Qu..." tells the customer nothing. */
  max-width: 100%; min-width: 0;
  font-size: .82rem; font-weight: 700; line-height: 1.25;
}

/* The connector becomes a vertical rule between one number and the next,
   drawn in the left column so it lines up under the circle. */
.quote-progress__connector {
  width: 2px; height: 14px;
  margin-left: 14px;
  background: var(--progress-border);
}

.quote-progress__step.is-current { color: var(--progress-active); }
.quote-progress__step.is-current .quote-progress__number {
  color: #fff; background: var(--progress-active); border-color: var(--progress-active);
}
/* Completed steps swap the numeral for a tick, so state is carried by shape
   as well as colour. */
.quote-progress__step.is-complete { color: var(--progress-complete); }
.quote-progress__step.is-complete .quote-progress__number {
  color: #fff; background: var(--progress-complete); border-color: var(--progress-complete);
  font-size: 0;
}
.quote-progress__step.is-complete .quote-progress__number::after {
  content: "\2713"; font-size: .9rem; line-height: 1;
}

@media (max-width: 359.98px) {
  .quote-progress__list { padding-inline: 10px; }
  .quote-progress__label { font-size: .66rem; }
  .quote-progress__number { width: 28px; height: 28px; }
}

/* An invalid or focused field must clear both the app bar and the sticky
   progress bar when scrolled to. */
.form-field {
  scroll-margin-top: calc(var(--app-bar-h) + var(--safe-t) + 90px);
}

/* ---- Form grid ---- */
.quote-form { display: grid; gap: 20px; min-width: 0; }
.form-section { display: grid; gap: 18px; min-width: 0; }
/* Steps receive programmatic focus so a screen reader announces the new
   context. That must not paint a ring around the entire panel — a big orange
   halo around every field reads as an error state. Both the outline AND the
   focus halo have to go; clearing only the outline leaves the box-shadow. */
.form-section:focus,
.form-section:focus-visible { outline: none; box-shadow: none; }

.form-field { width: 100%; min-width: 0; display: grid; gap: 8px; }
.form-field > label,
.form-field .field-label {
  display: block; margin: 0;
  font-size: .95rem; font-weight: 700; color: var(--navy-900);
}
.label-opt { font-weight: 600; color: var(--muted); font-size: .85em; }
.label-req { font-weight: 700; color: var(--orange-cta); font-size: .85em; }
.field-hint { margin: 0; font-size: .84rem; color: var(--muted); }

/* ---- The shell: single source of control geometry ---- */
.input-shell {
  width: 100%; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  background: #fff;
}
.input-shell > input,
.input-shell > textarea,
.input-shell > select {
  display: block;
  width: 100%; min-width: 0;
  border: 0; padding: 14px 0; margin: 0;
  background: transparent;
  font: inherit;
  /* 16px stops iOS zooming the viewport on focus. */
  font-size: 16px;
  color: var(--ink);
}
.input-shell > input:focus,
.input-shell > textarea:focus { outline: none; }
.input-shell:focus-within {
  border-color: var(--navy-800);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.input-shell--area { align-items: stretch; }
.input-shell--area > textarea { min-height: 112px; resize: vertical; }

.input-icon { display: flex; flex: none; color: var(--navy-800); }
.input-icon .icon { width: 21px; height: 21px; }

/* ---- "Use my current location": a real control, not a decorative icon ----
   It sits inside the shell as a flex sibling rather than absolutely
   positioned, so it can never overlap the text the customer is typing. */
.input-shell--action { padding-right: 6px; }
.location-button {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 12px;
  color: #0A2540; background: transparent;
  cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.location-button:active { background: #EEF4F8; }
.location-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.location-button:disabled { cursor: wait; opacity: .55; }
.location-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Busy state: the pin pulses while the fix is being acquired, so a slow
   lookup does not look like a dead tap. */
.location-button.is-busy svg { animation: pin-pulse 1s ease-in-out infinite; }
@keyframes pin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .location-button.is-busy svg { animation: none; }
}

.field-status {
  margin: 0; min-height: 20px; line-height: 20px;
  font-size: .82rem; color: var(--muted);
}
/* A located address is long and must be readable before it is accepted, so
   the status line wraps instead of running off the edge. */
.field-status { overflow-wrap: anywhere; }

/* ---- Located-address confirmation ---------------------------------------
   The address is proposed here and only committed when the customer taps
   "Use this address". Full width and wrapping, because the whole point is
   that it can be read before it is trusted. */
.geo-cancel {
  align-self: flex-start;
  border: 1px solid #C8D3DC; border-radius: 999px; background: #fff;
  min-height: 36px; padding: 0 .9rem; margin-top: .1rem;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--navy-800);
  cursor: pointer;
}
.geo-cancel[hidden] { display: none; }

.geo-proposal {
  display: grid; gap: .45rem;
  margin-top: .5rem; padding: .85rem .9rem;
  border: 1px solid #CBD5E1; border-radius: 12px; background: var(--surface-muted);
  min-width: 0;
}
.geo-proposal[hidden] { display: none; }
.geo-proposal__address {
  margin: 0; font-weight: 700; color: var(--navy-900); font-size: .92rem;
  line-height: 1.35; overflow-wrap: anywhere;   /* never clipped */
}
.geo-proposal__accuracy { margin: 0; font-size: .8rem; color: var(--muted); }
.geo-proposal__warn { margin: 0; font-size: .82rem; font-weight: 600; color: #8E4B00; line-height: 1.4; }
.geo-proposal__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .15rem; }
.geo-proposal__btn {
  flex: 1 1 auto; min-height: 44px; min-width: 0;
  padding: 0 .8rem;
  border: 1px solid #C8D3DC; border-radius: 10px; background: #fff;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--navy-800);
  cursor: pointer;
}
.geo-proposal__btn--use { background: var(--orange-cta); border-color: var(--orange-cta); color: #fff; }
.geo-proposal__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Native pickers: no padding of their own, and allowed to shrink. */
.native-date, .native-time { min-width: 0; }

/* The preferred time is a <select> now. It inherits the shell's geometry like
   every other control, and keeps the native menu affordance rather than a
   custom chevron that would have to be positioned against a control whose
   width the browser decides. */
select.native-time {
  appearance: auto;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
select.native-time:disabled { color: var(--muted); cursor: not-allowed; }

/* ---- Date + time: stacked on phones ---- */
.date-time-grid { display: grid; grid-template-columns: 1fr; gap: 18px; min-width: 0; }
@media (min-width: 640px) {
  .date-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Errors: space reserved, nothing shown until there is something to say ---- */
.field-error {
  margin: 0;
  min-height: 20px;
  font-size: .875rem;
  font-weight: 600;
  color: #B3261E;
  line-height: 20px;
}
/* The warning glyph exists only when there is a message — never an empty red
   icon beside an untouched field. */
.field-error:not(:empty)::before { content: "\26A0  "; }
.form-field.is-invalid .input-shell { border-color: #B3261E; background: #FFF8F7; }

/* ---- Photos ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.photo-upload { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 359.98px) { .photo-upload { grid-template-columns: 1fr; } }
.photo-btn {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 76px; padding: 12px;
  background: var(--surface-muted);
  border: 1.5px dashed #C3CFDA; border-radius: 14px;
  font-size: .82rem; font-weight: 700; color: var(--navy-800);
  text-align: center; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.photo-btn:active { background: #E9EFF4; }
.photo-btn .icon { width: 22px; height: 22px; color: var(--orange-cta); }
.photo-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Previews use blob: URLs from URL.createObjectURL(); the CSP allows blob:
   on img-src only for exactly this. */
.photo-list {
  width: 100%; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.photo-list:empty { display: none; }

.photo-preview {
  position: relative; width: 100%; aspect-ratio: 1; margin: 0;
  overflow: hidden; min-width: 0;
  border: 1px solid #CBD5E1; border-radius: 14px;
  background: #EEF4F8;
}
.photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

.photo-remove {
  position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  color: #fff; background: rgba(10, 37, 64, .88);
  font-size: 22px; line-height: 1; cursor: pointer;
  touch-action: manipulation;
}
.photo-remove:active { background: rgba(10, 37, 64, .96); }

.photo-preview-error {
  display: grid; place-items: center;
  width: 100%; height: 100%; padding: 10px;
  text-align: center; color: #9F1C14; font-size: 13px;
}

/* ---- Tip ---- */
.form-tip {
  width: 100%; min-width: 0;
  display: flex; gap: 12px; align-items: flex-start;
  background: #EEF4FA; border-radius: 14px; padding: 14px 16px;
}
.form-tip__icon { color: var(--orange-cta); flex: none; display: flex; }
.form-tip__text { min-width: 0; font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.form-tip__text strong { color: var(--navy-900); }

/* ---- Review ---- */
.q-review__title { font-size: 1.05rem; margin-bottom: 10px; }
.q-review { display: grid; gap: 0; min-width: 0; }
.q-review__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .88rem; min-width: 0;
}
.q-review dt { color: var(--muted); flex: none; }
.q-review dd { margin: 0; color: var(--navy-900); font-weight: 600; text-align: right; min-width: 0; word-break: break-word; }

.q-price { background: var(--surface-muted); border-radius: 14px; padding: 18px; text-align: center; }
.q-price__label { font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.q-price__figure { font-size: 3rem; font-weight: 800; color: var(--orange-500); line-height: 1.05; letter-spacing: -.04em; }
.q-price__figure span { font-size: .48em; vertical-align: .42em; }
.q-price__unit { font-weight: 800; color: var(--navy-900); margin-top: -4px; }
.q-price__def { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* ---- Actions: identical width and edges to every control above ---- */
.form-actions { display: grid; gap: 12px; width: 100%; min-width: 0; }
.primary-button, .secondary-button {
  width: 100%; min-width: 0;
  min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; margin: 0; padding: 0 20px;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .1s ease;
}
.primary-button { background: var(--orange-cta); color: #fff; }
.primary-button:active { background: var(--orange-cta-hover); transform: scale(.985); }
.primary-button[disabled] { background: #B9C4CE; cursor: default; transform: none; }
.secondary-button { background: transparent; color: var(--navy-800); border: 2px solid #C8D3DC; }
.secondary-button:active { background: var(--surface-muted); transform: scale(.985); }
.primary-button .icon, .secondary-button .icon { width: 18px; height: 18px; }

.q-legal {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .8rem; color: var(--muted); text-align: center; min-width: 0;
}
.q-legal .icon { width: 16px; height: 16px; flex: none; }

/* ---- Address suggestions (combobox listbox) ---------------------------- */
.address-field { position: relative; }
.address-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 45;                     /* above neighbouring fields */
  margin: 0; padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(10, 37, 64, .16);
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
}
.address-suggestion {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; min-width: 0;
}
.address-suggestion.is-active,
.address-suggestion:active { background: var(--surface-muted); }
.address-suggestion__pin { flex: none; display: flex; color: var(--orange-cta); }
.address-suggestion__pin svg { width: 20px; height: 20px; }
.address-suggestion__text { display: flex; flex-direction: column; min-width: 0; }
.address-suggestion__primary {
  font-weight: 700; color: var(--navy-900); font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.address-suggestion__secondary {
  font-size: .82rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A confirmed address is marked by more than colour. */
.input-shell.is-verified { border-color: var(--green-600); }

/* ---- Load count choices ------------------------------------------------ */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { min-width: 0; }
.choice__box {
  display: grid; place-items: center;
  min-height: 52px; padding: 10px;
  border: 1.5px solid #CBD5E1; border-radius: 14px;
  background: #fff; font-weight: 700; font-size: .92rem; color: var(--navy-900);
  text-align: center; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.choice input:checked + .choice__box {
  border-color: var(--orange-cta); background: rgba(200, 74, 13, .08); color: var(--orange-cta);
}
.choice input:focus-visible + .choice__box { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The one choice that changes the price silently, so it says what it does.
   Small and muted: it explains the option, it does not compete with it. */
.choice__hint {
  display: block;
  margin-top: 3px;
  font-size: .72rem; font-weight: 600; line-height: 1.25;
  color: var(--muted, #5A6B7B);
}

/* ---- The account step ---------------------------------------------------
   Set apart from the fields above it, because it is a different KIND of thing:
   the trip details describe a job, this creates a relationship. A plain
   continuation of the form would read as one more box to fill. */
.acct {
  margin-top: 18px; padding: 16px;
  background: var(--wash, #F6F8FA);
  border: 1px solid var(--line, #DCE4EC); border-radius: 14px;
}
.acct__head { margin-bottom: 12px; }
.acct__title { margin: 0 0 3px; font-size: 1.02rem; font-weight: 800; color: var(--navy-900, #12304E); }
.acct__sub { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--muted, #5A6B7B); }

/* Said where people brace for it. "Create an account" is the moment somebody
   expects to be asked for a card, so the answer sits next to the password
   field rather than in small print further down. */
.acct__free {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; font-size: .84rem; font-weight: 600; line-height: 1.4;
  color: var(--navy-900, #12304E);
}
.acct__free-icon { width: 17px; height: 17px; flex: none; color: var(--green-ok, #1F8A54); margin-top: 1px; }

.acct__switch {
  margin: 14px 0 0; font-size: .86rem; color: var(--muted, #5A6B7B);
}
.link-button {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 700; color: var(--orange-cta, #F26B21);
  text-decoration: underline; cursor: pointer;
}
.link-button:focus-visible { outline: 3px solid var(--navy-900, #12304E); outline-offset: 2px; }

/* A returning customer sees this instead: no second account to make. */
.acct-known {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; padding: 14px 16px;
  background: #F1F8F4; border: 1px solid #CDE7D8; border-radius: 14px;
}
.acct-known__icon { width: 19px; height: 19px; flex: none; color: var(--green-ok, #1F8A54); margin-top: 1px; }
.acct-known__t { margin: 0 0 2px; font-size: .92rem; font-weight: 700; color: var(--navy-900, #12304E); }
.acct-known__s { margin: 0; font-size: .84rem; color: var(--muted, #5A6B7B); }

.load-help { margin-top: 2px; }
.load-help summary {
  cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--navy-700);
  min-height: 44px; display: flex; align-items: center;
}
.load-help p { font-size: .86rem; color: var(--muted); padding-bottom: 4px; }

/* ---- Submission states ------------------------------------------------- */
.primary-button__spinner { display: none; width: 18px; height: 18px; }
.primary-button.is-busy .primary-button__arrow { display: none; }
.primary-button.is-busy .primary-button__spinner {
  display: block;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .primary-button.is-busy .primary-button__spinner { animation: none; }
}

.form-error-summary {
  padding: 14px 16px; border-radius: 14px;
  background: #FFF3F2; border: 1px solid #F0C4C0;
  color: #8E1D16; font-size: .9rem; font-weight: 600;
}

/* ---- Quote result ------------------------------------------------------ */
.quote-result { display: grid; gap: 14px; }
.quote-result:focus { outline: none; }
.quote-result__eyebrow {
  font-size: .76rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
.quote-result__total {
  font-size: 3.2rem; font-weight: 800; color: var(--navy-900);
  text-align: center; line-height: 1.02; letter-spacing: -.04em;
}
.quote-result__ref {
  text-align: center; font-size: .82rem; color: var(--muted);
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.quote-result__ref--large { font-size: 1.1rem; font-weight: 800; color: var(--navy-900); }
.quote-result__lines { display: grid; gap: 0; }
.quote-result__line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.quote-result__line dt { color: var(--muted); }
.quote-result__line dd { margin: 0; font-weight: 700; color: var(--navy-900); }
.quote-result__message { font-size: .95rem; color: var(--ink); }
.quote-result__note { font-size: .84rem; color: var(--muted); }
/* Shown when the confirmation email has not gone out yet. Darker than the
   muted default so it reads as information the customer should notice, but
   deliberately not an error colour — nothing has gone wrong with their quote. */
.quote-result__note--warn { color: var(--navy-900); font-weight: 600; }
.quote-result__actions { display: grid; gap: 10px; }

.attribution {
  font-size: .74rem; color: var(--muted); text-align: center;
  padding-top: 4px;
}

/* Desktop: same app-shaped flow, centred with breathing room. */
@media (min-width: 900px) {
  .quote-page { padding: 40px 16px 60px; }
  .q-hero img { height: 240px; }
}

/* ==========================================================================
   18. DESKTOP CONTENT PAGES  (How It Works, Pricing — approved mockups)
   Everything here renders inside .d-only, so the mobile shell is untouched.
   Class names are page-prefixed (hiw-, pp-) because the legacy homepage
   sections already own .pricing__* — reusing those names is how this section
   broke the /customer pricing block on its first attempt.
   ========================================================================== */

/* Inverse of .d-only: keeps a page original mobile block out of desktop. */
@media (min-width: 900px) {
  .m-only { display: none !important; }
}

/* ---- Breadcrumbs ---------------------------------------------------------
   On every content page, both shells. The separator is CSS so assistive tech
   hears the labels, not the punctuation. */
.crumbs { padding-top: 1.1rem; font-size: .86rem; }
.crumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.crumbs__item { display: flex; align-items: center; gap: .4rem; color: #5A6B7B; }
.crumbs__item + .crumbs__item::before { content: "\203A"; color: #9AA9B7; }
.crumbs a { color: #5A6B7B; text-decoration: none; }
.crumbs a:hover { color: var(--navy-800); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy-800); font-weight: 600; }
@media (max-width: 899.98px) {
  .crumbs { padding-top: .85rem; }
}

/* Current page in the desktop nav: orange with an underline. Normal-size text
   on white, so it uses the CTA orange (4.73:1), same contrast rule as buttons. */
.nav-link[aria-current="page"] {
  color: var(--orange-cta);
  font-weight: 700;
  border-bottom: 3px solid var(--orange-500);
  padding-bottom: .35rem;
}

/* Footer: social marks and the Quick Links heading. */
.site-footer__social { display: flex; gap: .9rem; margin-top: .9rem; }
.site-footer__social-item { color: #fff; }
.site-footer__social-item .icon { width: 21px; height: 21px; }

/* These two pages were approved at a wider measure than the default 1200. */
.hiw .container, .price-page .container { max-width: 1340px; }

/* ---- Shared orange CTA band ---------------------------------------------- */
.cta-band {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--orange-cta);
  border-radius: 12px;
  padding: 1.15rem 1.6rem;
  color: #fff;
  margin-top: 1.4rem;
}
.cta-band__bubble { flex: none; width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.85); border-radius: 10px; display: grid; place-items: center; }
.cta-band__bubble svg { width: 26px; height: 26px; }
.cta-band__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cta-band__text strong { font-size: 1.22rem; letter-spacing: -.01em; }
.cta-band__text span { font-size: .95rem; opacity: .95; }
.cta-band__btn {
  margin-left: auto; flex: none;
  background: #fff; color: var(--orange-cta);
  font-weight: 800; font-size: 1.02rem;
  padding: .85rem 1.9rem; border-radius: 10px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-band__btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-1px); }

/* Orange accent strokes inside page artwork. */
.hiw-a { stroke: var(--orange-500); }
.hiw-a--fill { fill: #fff; }

/* ---- How It Works --------------------------------------------------------- */
.hiw { padding-block: 3.2rem 4.5rem; }
.hiw__title {
  text-align: center;
  font-size: clamp(2.6rem, 4.2vw, 3.4rem);
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}
.hiw__lede { text-align: center; color: #5A6B7B; font-size: 1.12rem; margin-bottom: 3rem; }

.hiw__steps {
  list-style: none; margin: 0 0 2.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem;
}
.hiw__step { text-align: center; }
.hiw__art { position: relative; display: inline-block; margin-bottom: 1.2rem; }
.hiw__circle {
  width: 104px; height: 104px; border-radius: 50%;
  background: #EDF2F8; color: var(--navy-800);
  display: grid; place-items: center;
}
.hiw__circle svg { width: 52px; height: 52px; }
.hiw__num {
  position: absolute; top: -4px; left: -14px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  font-weight: 800; font-size: 1.05rem;
  display: grid; place-items: center;
}
.hiw__next {
  position: absolute; right: -2.05rem; top: 38px;
  color: var(--orange-500); width: 28px; height: 28px;
}
.hiw__next svg { width: 28px; height: 28px; }
.hiw__step-title { font-size: 1.16rem; letter-spacing: -.015em; margin-bottom: .5rem; }
.hiw__step-body { color: #5A6B7B; font-size: .95rem; line-height: 1.55; max-width: 30ch; margin-inline: auto; }

.hiw__included {
  display: flex; align-items: center; gap: 1.4rem;
  background: #EAF1F8; border-radius: 14px;
  padding: 1.5rem 2rem;
}
.hiw__shield {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  background: #fff; color: var(--navy-800);
  display: grid; place-items: center;
}
.hiw__shield svg { width: 30px; height: 30px; }
.hiw__included-text p { margin: 0; line-height: 1.6; }
.hiw__included-text p + p { margin-top: .1rem; }
.hiw__couch { flex: none; margin-left: auto; width: 150px; height: 84px; color: var(--navy-800); }

/* ---- Pricing --------------------------------------------------------------- */
.price-page { padding-block: 3rem 4.5rem; }
.pp-title { font-size: clamp(2.6rem, 4.2vw, 3.2rem); letter-spacing: -.03em; margin-bottom: 1.8rem; }

.pp-top {
  display: grid; grid-template-columns: 270px 1fr; gap: 3rem;
  align-items: start; margin-bottom: 2rem;
}
.pp-card {
  position: relative; text-align: center;
  border: 1px solid #E2E9F1; border-radius: 14px;
  background: #fff; box-shadow: 0 6px 22px rgba(14, 39, 64, .06);
  padding: 1.6rem 1.4rem 4.8rem;
}
.pp-card-label { font-weight: 700; color: var(--navy-800); margin-bottom: .4rem; }
/* $85 is display-size text, so the brand orange passes the large-text bar. */
.pp-card-figure { font-size: 3.2rem; font-weight: 800; color: var(--orange-500); letter-spacing: -.03em; line-height: 1.05; }
.pp-card-unit { font-weight: 700; color: var(--navy-800); margin-top: .25rem; }
.pp-card-art {
  position: absolute; right: 1.2rem; bottom: 1rem;
  width: 84px; height: 48px; color: var(--navy-800); z-index: 1;
}
.pp-card-art::before {
  content: ""; position: absolute; right: -4px; bottom: -2px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #FBE8DC; z-index: -1;
}
.pp-explain p { margin: 0 0 .9rem; line-height: 1.65; max-width: 76ch; }

.pp-factors {
  border: 1px solid #E2E9F1; border-radius: 14px;
  background: #fff; box-shadow: 0 6px 22px rgba(14, 39, 64, .05);
  padding: 1.4rem 1rem 1rem; margin-bottom: 1.6rem;
}
.pp-factors-title { text-align: center; font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: 1rem; }
.pp-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.pp-factor {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem; position: relative; min-height: 64px;
}
/* Hairlines: verticals between columns, one horizontal between the rows. */
.pp-factor:not(:nth-child(4n + 1))::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: #E7EDF3;
}
.pp-factor:nth-child(n + 5) { border-top: 1px solid #E7EDF3; }
.pp-tick {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #E5F5EC; color: var(--green-700);
  display: grid; place-items: center;
}
.pp-tick svg { width: 19px; height: 19px; }
.pp-factor-label span { display: block; line-height: 1.35; font-size: .98rem; }

.pp-assure {
  display: flex; align-items: center; gap: 1.3rem;
  background: #E8F0FA; border-radius: 12px;
  padding: 1.3rem 1.8rem;
}
/* The blue is deliberate and local: it reads as "information", and nothing
   brand-orange or navy says that. */
.pp-info {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #1D4ED8; color: #fff;
  font-weight: 800; font-size: 1.2rem; font-style: italic;
  display: grid; place-items: center;
}
.pp-assure-text p { margin: 0; line-height: 1.6; }
.pp-shield { flex: none; margin-left: auto; width: 56px; height: 56px; color: #1D4ED8; }
.pp-shield svg { width: 56px; height: 56px; }

/* ---- Services --------------------------------------------------------------
   One responsive layout: there was no earlier mobile page to preserve, so the
   mockup's desktop composition simply stacks below 900px. */
.svc { padding-block: 1.6rem 4.5rem; }
.svc .container { max-width: 1340px; }
.svc-title { font-size: clamp(2.2rem, 4.2vw, 3.2rem); letter-spacing: -.03em; margin-bottom: .7rem; }
.svc-lede { color: #4A5B6C; line-height: 1.6; max-width: 46ch; margin-bottom: 1.6rem; }

.svc-mini { list-style: none; margin: 0 0 1.7rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; }
.svc-mini__item { display: flex; align-items: center; gap: .7rem; }
.svc-mini__icon { color: var(--orange-500); width: 26px; height: 26px; flex: none; }
.svc-mini__icon svg { width: 26px; height: 26px; }
.svc-mini__text { display: flex; flex-direction: column; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--navy-800); }

.svc-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3rem; }

.svc-h2 { text-align: center; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -.02em; margin-bottom: .4rem; }
.svc-h2--left { text-align: left; }
.svc-sub { text-align: center; color: #5A6B7B; font-size: .98rem; margin-bottom: 1.8rem; }

.svc-grid { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.svc-card {
  display: flex; flex-direction: column;
  border: 1px solid #E2E9F1; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.4rem 1.3rem 1.2rem;
}
.svc-card__icon {
  width: 66px; height: 66px; border-radius: 50%;
  background: #EDF2F8; color: var(--navy-800);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.svc-card__icon svg { width: 34px; height: 34px; }
.svc-card__title { font-size: 1.12rem; letter-spacing: -.015em; margin-bottom: .5rem; }
.svc-card__body { color: #5A6B7B; font-size: .93rem; line-height: 1.55; margin-bottom: 1rem; }
.svc-photo { width: 100%; height: 128px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
.svc-card__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--orange-cta); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.svc-card__cta svg { width: 18px; height: 18px; transition: transform .15s ease; }
.svc-card__cta:hover svg { transform: translateX(3px); }

.svc-haul {
  display: grid; grid-template-columns: 1fr 1.15fr .9fr; gap: 2rem; align-items: center;
  background: #EDF3F9; border-radius: 16px;
  padding: 2rem 2.2rem; margin-bottom: 2.8rem;
}
.svc-haul__lede { color: #4A5B6C; margin-bottom: 1rem; }
.svc-haul__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.svc-haul__list li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--navy-800); }
.svc-haul__list svg { width: 18px; height: 18px; color: var(--green-600); flex: none; }
.svc-haul > .svc-photo { height: 200px; margin: 0; }
.svc-haul__card {
  background: #fff; border-radius: 14px; text-align: center;
  box-shadow: 0 8px 24px rgba(14, 39, 64, .08);
  padding: 1.6rem 1.4rem;
}
.svc-haul__bag { display: inline-grid; place-items: center; width: 52px; height: 52px; color: var(--navy-800); margin-bottom: .5rem; }
.svc-haul__bag svg { width: 40px; height: 40px; }
.svc-haul__card h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.svc-haul__card p { color: #5A6B7B; font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; }

.svc-inc { list-style: none; margin: 0 0 1rem; padding: 1rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.svc-inc__item { display: flex; gap: .85rem; align-items: flex-start; }
.svc-inc__icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  display: grid; place-items: center;
}
.svc-inc__icon svg { width: 26px; height: 26px; }
.svc-inc__text { display: flex; flex-direction: column; gap: .2rem; }
.svc-inc__text strong { font-size: .98rem; color: var(--navy-800); }
.svc-inc__text span { font-size: .88rem; color: #5A6B7B; line-height: 1.5; }

/* Navy variant of the shared band, with the orange button from the mockup. */
.cta-band--navy { background: var(--navy-800); }
.cta-band__btn--orange { background: var(--orange-cta); color: #fff; }
.cta-band__btn--orange:hover { background: var(--orange-cta-hover); }
.cta-band__badge {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); color: #fff;
  display: grid; place-items: center;
}
.cta-band__badge svg { width: 26px; height: 26px; }

/* ---- Safety (also lends its hero/banner/know styles to Help) -------------- */
.sft, .hlp { padding-block: 1.4rem 4.5rem; }
.sft .container, .hlp .container { max-width: 1340px; }
.sft-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.sft-title { font-size: clamp(2.2rem, 4.2vw, 3.2rem); letter-spacing: -.03em; margin-bottom: .7rem; }
.sft-lede { color: #4A5B6C; line-height: 1.65; max-width: 52ch; }
.sft-hero__art { flex: none; width: 150px; height: 150px; }
.sft-hero__art svg { width: 100%; height: 100%; }

.sft-grid { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.sft-card {
  text-align: center;
  border: 1px solid #E2E9F1; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.5rem 1.2rem;
}
.sft-card__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--navy-800); margin-bottom: .8rem; }
.sft-card__icon svg { width: 46px; height: 46px; }
.sft-card__title { font-size: 1.04rem; letter-spacing: -.015em; margin-bottom: .5rem; }
.sft-card__body { color: #5A6B7B; font-size: .89rem; line-height: 1.55; }

.sft-h2 { text-align: center; font-size: clamp(1.4rem, 2.4vw, 1.7rem); letter-spacing: -.02em; margin-bottom: 1.2rem; }

.sft-protect {
  border: 1px solid #E2E9F1; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.6rem 2rem; margin-bottom: 2.2rem;
}
.sft-protect__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 2.4rem; }
.sft-protect__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--navy-800); line-height: 1.45; }
.sft-protect__list svg { width: 19px; height: 19px; color: var(--green-600); flex: none; margin-top: .1rem; }

.sft-know { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.sft-know__card {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid #E2E9F1; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.2rem 1.2rem;
}
.sft-know__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-style: italic; font-size: 1.05rem;
}
.sft-know__icon--orange { background: var(--orange-cta); }
.sft-know__icon--navy { background: var(--navy-800); }
.sft-know__icon svg { width: 22px; height: 22px; }
.sft-know__text { display: flex; flex-direction: column; gap: .25rem; }
.sft-know__text strong { font-size: .96rem; color: var(--navy-800); }
.sft-know__text span { font-size: .87rem; color: #5A6B7B; line-height: 1.5; }

.sft-banner {
  display: flex; align-items: center; gap: 1.1rem;
  background: #EDF3F9; border-radius: 14px;
  padding: 1.2rem 1.6rem; margin-bottom: 1.6rem;
}
.sft-banner__icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(14, 39, 64, .08);
}
.sft-banner__icon svg { width: 28px; height: 28px; }
.sft-banner strong { display: block; font-size: 1.05rem; color: var(--navy-800); margin-bottom: .15rem; }
.sft-banner p { margin: 0; color: #4A5B6C; font-size: .93rem; line-height: 1.55; }

/* ---- Help ------------------------------------------------------------------ */
.hlp-grid { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.hlp-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid #E2E9F1; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.5rem 1.2rem 1.2rem;
}
.hlp-card__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--navy-800); margin-bottom: .8rem; }
.hlp-card__icon svg { width: 46px; height: 46px; }
.hlp-card__title { font-size: 1.04rem; letter-spacing: -.015em; margin-bottom: .5rem; }
.hlp-card__body { color: #5A6B7B; font-size: .89rem; line-height: 1.55; margin-bottom: .9rem; }
.hlp-card .svc-card__cta { margin-top: auto; }

.hlp-faq {
  border: 1px solid #E2E9F1; border-radius: 14px; background: #FBFCFE;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.6rem 1.6rem 1.2rem; margin-bottom: 2.2rem;
}
.hlp-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.hlp-faq__item {
  border: 1px solid #E4EAF1; border-radius: 10px; background: #fff;
  padding: .85rem 1rem;
}
.hlp-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: .95rem; color: var(--navy-800);
}
.hlp-faq__item summary::-webkit-details-marker { display: none; }
.hlp-faq__item summary svg { width: 18px; height: 18px; flex: none; color: #7A8CA0; transition: transform .16s ease; }
.hlp-faq__item[open] summary svg { transform: rotate(180deg); }
.hlp-faq__item p { margin: .6rem 0 0; font-size: .88rem; color: #5A6B7B; line-height: 1.55; }

.hlp-how { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.hlp-how__card {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid #E2E9F1; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(14, 39, 64, .05);
  padding: 1.2rem;
}
.hlp-how__icon {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  background: #EDF2F8; color: var(--navy-800);
  display: grid; place-items: center;
}
.hlp-how__icon svg { width: 24px; height: 24px; }

@media (max-width: 1099.98px) {
  .sft-grid, .hlp-grid { grid-template-columns: repeat(2, 1fr); }
  .sft-know, .hlp-how { grid-template-columns: 1fr; }
}
@media (max-width: 899.98px) {
  .sft-hero__art { display: none; }
  .sft-grid, .hlp-grid, .sft-protect__list, .hlp-faq__grid { grid-template-columns: 1fr; }
  .sft-protect { padding: 1.2rem 1.2rem; }
}

/* ---- Quote: "What are we moving?" category picker ------------------------- */
/* auto-fit rather than a fixed four columns. `repeat(4, 1fr)` is really
   `repeat(4, minmax(auto, 1fr))`, and that auto floor is the card's own
   intrinsic width — so at 900px, where the support rail has just claimed
   400px and the form card is at its narrowest, four cards could not fit and
   the grid pushed 85px past the viewport instead of shrinking. Letting the
   track count follow the space gives the approved 4x3 at desktop widths and
   3 columns in the narrow band, and it cannot overflow at any width. */
.qcat__grid { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .7rem; }
.qcat__card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  border: 1.5px solid #E2E9F1; border-radius: 12px; background: #fff;
  padding: .8rem .5rem .7rem; text-align: center;
}
.qcat__card.is-on { border-color: var(--orange-500); box-shadow: 0 0 0 1px var(--orange-500) inset; background: #FFFBF8; }
.qcat__icon { color: var(--navy-800); width: 34px; height: 34px; }
.qcat__icon svg { width: 34px; height: 34px; }
.qcat__name { font-weight: 700; font-size: .8rem; line-height: 1.25; color: var(--navy-800); }
.qcat__stepper { display: flex; align-items: center; gap: .55rem; }
.qcat__btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: #EDF2F8; color: var(--navy-800);
  font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: grid; place-items: center; font-family: inherit;
}
.qcat__btn:hover { background: #DFE8F2; }
.qcat__count { min-width: 1.2ch; font-weight: 800; font-size: .95rem; color: var(--navy-800); }
.qcat__card.is-on .qcat__count { color: var(--orange-cta); }
.qcat__subs { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.qcat__chip {
  border: 1px solid #D8E0E9; border-radius: 999px; background: #fff;
  padding: .25rem .6rem; font-size: .72rem; font-weight: 600; color: var(--navy-800);
  cursor: pointer; font-family: inherit; min-height: 28px;
}
.qcat__chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.qcat__more { display: none; }
.qcat__note { text-align: center; margin: .4rem 0 .2rem; }
.qcat__note-toggle {
  border: 0; background: none; color: #2C5FA8; font-weight: 600; font-size: .88rem;
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px;
}
.qcat__note-toggle .icon { width: 16px; height: 16px; }
.qcat__note .input-shell { margin-top: .3rem; }

/* Mobile: compact category rows, first five visible, the rest behind
   "View all categories".

   The categories and the photo card are STACKED, not side by side. Side by
   side was the original arrangement and it does not survive a real phone: at
   360px the two tracks are roughly 200px and 140px, which is not enough for
   a heading, a four-line hint, two upload buttons and a counter. On a Galaxy
   screenshot the photo column's hint sprawled down the page and ran into the
   category cards, and every category name broke across three lines. Full
   width for each, one after the other, is what actually reads. */
@media (max-width: 559.98px) {
  .qcat-zone { display: grid; grid-template-columns: 1fr; gap: 1.15rem; align-items: start; }
  /* min-width:0 or a grid child refuses to shrink below its content's
     intrinsic width and pushes out of its track. */
  .qcat-zone > .form-field { margin-bottom: 0; min-width: 0; }
  /* Type is the form's own scale again. It was shrunk only to survive the
     narrow column, and shrunken labels next to full-size ones read as a
     mistake now that the column is full width. */
  /* Icon above the label, not beside it: side by side leaves roughly 85px of
     text width at 360px and "Take a photo" breaks across two lines. */
  .qcat-zone .photo-btn { flex-direction: column; gap: .35rem; min-height: 68px; font-size: .84rem; }
  .qcat-zone .photo-btn .icon { width: 20px; height: 20px; }
  /* Two upload buttons share a row: they are short labels and stacking them
     pushes the date field below the fold for no benefit. */
  .qcat-zone .photo-upload { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .qcat__stepper { gap: .45rem; flex: none; }
  .qcat__btn { width: 32px; height: 32px; font-size: 1.1rem; }
  .qcat__count { font-size: .95rem; }
  .qcat__grid { grid-template-columns: 1fr; gap: .5rem; }
  .qcat__card { flex-direction: row; text-align: left; padding: .6rem .7rem; min-height: 52px; }
  .qcat__icon, .qcat__icon svg { width: 26px; height: 26px; flex: none; }
  .qcat__name { flex: 1; min-width: 0; font-size: .9rem; }
  .qcat__subs { justify-content: flex-start; width: 100%; }
  .qcat__card--more { display: none; }
  .qcat.is-expanded .qcat__card--more, .qcat__card--more.is-on { display: flex; }
  .qcat__more {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    width: 100%; min-height: 46px; margin-top: .3rem;
    border: 1px solid #D8E0E9; border-radius: 10px; background: #fff;
    font-weight: 700; font-size: .88rem; color: var(--navy-800);
    cursor: pointer; font-family: inherit;
  }
  .qcat__more .icon { width: 16px; height: 16px; }
}

/* A selected card grows a chip row, so it can no longer be a single flex
   line. Only the cards that actually have sub-choices are affected. */
@media (max-width: 559.98px) {
  .qcat__card:has(.qcat__subs:not([hidden])) { flex-wrap: wrap; row-gap: .45rem; }
}

/* ---- Log In ----------------------------------------------------------------- */
.lgn { padding-block: 1.4rem 4rem; }
.lgn .container { max-width: 1180px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: start; }
.lgn-eyebrow { color: var(--orange-cta); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.lgn-title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -.028em; margin-bottom: .7rem; }
.lgn-lede { color: #4A5B6C; line-height: 1.6; max-width: 44ch; margin-bottom: 1.4rem; }
.lgn-art { display: block; width: min(320px, 70%); height: auto; margin-bottom: 1.6rem; }
.lgn-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.lgn-feat { display: flex; gap: .9rem; align-items: flex-start; }
.lgn-feat__icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid #E2E9F1; color: var(--navy-800);
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(14,39,64,.06);
}
.lgn-feat__icon svg { width: 20px; height: 20px; }
.lgn-feat strong { display: block; font-size: .95rem; color: var(--navy-800); margin-bottom: .15rem; }
.lgn-feat p { margin: 0; font-size: .86rem; color: #5A6B7B; line-height: 1.5; }

.lgn-card {
  background: #fff; border: 1px solid #E9EEF4; border-radius: 16px;
  box-shadow: 0 10px 32px rgba(14, 39, 64, .08);
  padding: 1.8rem 1.7rem;
}
.lgn-card__title { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: .2rem; }
.lgn-card__sub { color: #5A6B7B; font-size: .9rem; margin-bottom: 1.3rem; }
.lgn-row { display: flex; justify-content: space-between; align-items: center; margin: .7rem 0 1rem; font-size: .85rem; }
.lgn-remember { display: flex; align-items: center; gap: .45rem; color: #4A5B6C; }
.lgn-remember input { width: 17px; height: 17px; accent-color: var(--orange-cta); }
.lgn-forgot { color: var(--orange-cta); font-weight: 600; text-decoration: none; }
.lgn-forgot:hover { text-decoration: underline; }
.lgn-div { display: flex; align-items: center; gap: .8rem; color: #8A99A8; font-size: .8rem; margin: 1rem 0; }
.lgn-div::before, .lgn-div::after { content: ""; flex: 1; height: 1px; background: #E4EAF1; }
.lgn-note { text-align: center; color: #4A5B6C; font-size: .88rem; margin: 0 0 .8rem; }
.lgn-info {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #EDF3F9; border-radius: 10px; padding: .9rem 1rem; margin-top: 1.2rem;
}
.lgn-info svg { width: 20px; height: 20px; flex: none; color: var(--navy-800); margin-top: .1rem; }
.lgn-info strong { display: block; font-size: .88rem; color: var(--navy-800); }
.lgn-info span { font-size: .83rem; color: #4A5B6C; line-height: 1.5; }
.btn--outline-navy { background: #fff; border: 1.5px solid #C9D6E4; color: var(--navy-800); font-weight: 700; }
.btn--outline-orange { background: #fff; border: 1.5px solid var(--orange-cta); color: var(--orange-cta); font-weight: 700; }
@media (max-width: 899.98px) {
  .lgn .container { grid-template-columns: 1fr; gap: 1.6rem; }
  .lgn-art { margin-inline: auto; }
}

@media (max-width: 1099.98px) {
  .svc-grid, .svc-inc { grid-template-columns: repeat(2, 1fr); }
  .svc-haul { grid-template-columns: 1fr 1fr; }
  .svc-haul__card { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) {
  .svc { padding-top: .6rem; }
  .svc-grid, .svc-inc, .svc-haul { grid-template-columns: 1fr; }
  .svc-haul { padding: 1.4rem 1.2rem; }
  .cta-band { flex-direction: column; text-align: center; }
  .cta-band__btn { margin-left: 0; width: 100%; text-align: center; justify-content: center; display: flex; }
}

/* ==========================================================================
   19. DESKTOP QUOTE  (approved mockup)
   Two columns: a ~400px support rail (photo card, trust points, encrypted
   strip, the 3-step progress, "How pricing works") and the white form card.
   Everything here is ≥900px only; the phone flow is untouched — the rail is
   .d-only markup and the mobile hero/progress are hidden, not restyled.
   ========================================================================== */
@media (min-width: 900px) {
  body[data-route="/quote"] { background: var(--surface-muted); }

  /* The desktop heading is the one in the rail. Without this the mobile h1
     is still a grid child and claims the form card's column, dropping the
     card onto a second row. */
  .q-h1-m { display: none; }

  /* Leading row icons belong to the phone layout. The desktop fields are not
     rows, so an un-placed icon just stacks above its label. */
  .row-lead { display: none; }

  .quote-page {
    max-width: 1320px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 24px 32px 72px;
  }

  /* The card's sticky progress bar lives in the rail out here. */
  .q-card .progress-sentinel,
  .q-card .quote-progress { display: none; }

  .q-card { padding: 32px 36px; border-radius: 18px; }
  .q-card__title { font-size: 1.55rem; }

  /* ---- Support rail ---- */
  .qd-rail { display: grid; gap: 16px; min-width: 0; }

  .qd-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--navy-900);
    box-shadow: 0 10px 26px rgba(14, 39, 64, .14);
  }
  /* Same photograph and framing rule as the homepage hero: the truck sits at
     the RIGHT of this source, so a high object-position-x keeps it in frame
     when cover crops the 16:9 image into this taller panel. */
  .qd-photo img {
    display: block;
    width: 100%; height: 300px;
    object-fit: cover; object-position: 70% 62%;
  }
  .qd-photo__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(180deg,
      rgba(9, 24, 40, .10) 0%, rgba(9, 24, 40, .38) 55%, rgba(9, 24, 40, .84) 100%);
  }
  .qd-photo__title { color: #fff; font-size: 1.7rem; line-height: 1.08; letter-spacing: -.03em; margin-bottom: 4px; }
  .qd-photo__sub { color: #D6E2EC; font-size: .9rem; }

  .qd-points { list-style: none; margin: 0; padding: 2px 6px 0; display: grid; gap: 10px; }
  .qd-points li { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; color: var(--navy-900); min-width: 0; }
  .qd-points .icon { width: 19px; height: 19px; color: var(--orange-cta); flex: none; }

  .qd-secure {
    display: flex; align-items: flex-start; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px;
    font-size: .84rem; color: var(--muted);
  }
  .qd-secure .icon { width: 18px; height: 18px; color: var(--green-600); flex: none; margin-top: 1px; }
  .qd-secure strong { color: var(--navy-900); }

  /* Vertical steps. Same __step/__number classes as the phone bar, so the
     one script paints both; only the geometry differs. */
  .qd-steps { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
  .qd-steps__list { list-style: none; margin: 0; padding: 0; display: grid; }
  .qd-steps .quote-progress__step {
    grid-template-columns: 30px minmax(0, 1fr);
    justify-items: start; align-items: center;
    column-gap: 12px; padding: 8px 0;
    text-align: left;
  }
  .qd-steps__label { font-size: .95rem; font-weight: 700; }

  .qd-pricing { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
  .qd-pricing__title { font-size: 1.02rem; margin-bottom: .4rem; }
  .qd-pricing__text { font-size: .88rem; color: var(--muted); line-height: 1.55; }
  .qd-pricing__text strong { color: var(--navy-900); }
  .qd-pricing__link {
    display: inline-block; margin-top: .6rem;
    color: var(--orange-cta); font-weight: 700; font-size: .9rem;
    text-decoration: none;
  }
  .qd-pricing__link:hover { text-decoration: underline; }

  /* ---- Form card internals ---- */
  .loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  /* Date and time sit side by side, and their input boxes must line up.
     Both fields stretch to the tallest of the pair, but the time field has an
     extra status row, so the two grids had different amounts of slack to
     share out and their shells settled at different heights — 13px apart.
     Packing each field's rows to the top makes the label, then the box, land
     at the same y in both regardless of what follows them. */
  .date-time-grid > .form-field { align-content: start; }
  /* An empty status line is reserved space for a message that does not exist
     yet; it belongs under the control, not between it and the label. */
  .date-time-grid .field-status:empty { display: none; }
  /* Chrome gives a native date input a taller intrinsic box than a select,
     which left the two shells 2px apart even once their tops matched. Pinning
     the control height makes both shells exactly 56px. */
  .date-time-grid .input-shell > .native-date,
  .date-time-grid .input-shell > .native-time { height: 54px; padding-block: 0; }

  .choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Category picker: spacious 4×3 grid. Photos become a right rail only once
     there is room for both — below 1200 the form card is not wide enough to
     hold four category columns AND a photo panel, so photos drop underneath
     rather than squeezing the cards to an unreadable width. */
  .qcat__grid { gap: .8rem; }
  .qcat__card { padding: .9rem .6rem .8rem; }
  .qcat-zone .photo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qcat-zone { display: grid; gap: 22px; align-items: start; }
  /* Grid children default to min-width:auto, so the 4-column card grid can
     force its own track wider than 1fr and overlap the photo rail. This is
     the single line that stops that. */
  .qcat-zone > .form-field { min-width: 0; }

  /* ---- Benefits strip above the footer ---- */
  .qd-benefits { background: #fff; border-top: 1px solid var(--line); padding: 42px 0 46px; }
  .qd-benefits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .qd-benefit { display: grid; justify-items: center; text-align: center; gap: 8px; min-width: 0; }
  .qd-benefit__icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(242, 107, 33, .12); color: var(--orange-cta);
    display: grid; place-items: center;
  }
  .qd-benefit__icon .icon { width: 26px; height: 26px; }
  .qd-benefit__title { font-size: 1rem; color: var(--navy-900); }
  .qd-benefit__text { font-size: .88rem; color: var(--muted); }
}

/* Photos become the category picker's right rail only where the form card is
   genuinely wide enough for both. */
@media (min-width: 1200px) {
  .qcat-zone { grid-template-columns: minmax(0, 1fr) 260px; }
  .qcat-zone .photo-upload { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. MOBILE QUOTE SCREEN  (approved phone mockup)

   The phone screen is a stack of white cards on the muted page, not one long
   card: progress, locations, items, photos, timing, loads, tips, submit. The
   single .q-card that wraps the form is dissolved here and each section
   becomes the card instead, so no extra wrappers were needed in the template
   and the desktop layout above is untouched.

   Every id, name and data- hook is exactly as it was — this is presentation
   only. The address fields are still real comboboxes with their own "use my
   location" buttons, and the date and time fields are still native pickers;
   the mockup's chevrons are drawn by those real controls rather than by
   decorative glyphs that look tappable and do nothing.
   ========================================================================== */
@media (max-width: 899.98px) {
  /* The mockup opens on the progress card, so the h1 is carried for the
     document outline without being drawn. */
  .q-h1-m {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .quote-page { max-width: none; padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* Dissolve the outer card; the sections below become the cards. */
  .q-card { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .q-card__head { display: none; }
  .quote-form { gap: 12px; }
  .form-section { gap: 12px; }

  /* ---- Shared card shell ---- */
  .quote-progress,
  .loc-grid,
  .qcat-field,
  .qcat-zone > .form-field,
  .date-time-grid,
  .form-field--loads {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(14, 39, 64, .04);
  }

  /* ---- Progress ----
     Pinned beneath the app bar, which is how it has always worked and what
     it is for: on a form this long the customer must not lose their place.
     `top` is derived from --app-bar-h, the same token the bar itself uses, so
     the two cannot drift apart. It keeps the card styling of the surrounding
     stack; only its position is sticky. */
  .quote-progress {
    position: sticky;
    top: calc(var(--app-bar-h) + var(--safe-t));
    z-index: 40;
    width: 100%; margin: 0;
    padding: 16px 12px;
    background: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(14, 39, 64, .04);
  }
  /* Lifts off the page only once it is actually pinned, so the shadow is
     information rather than decoration. */
  .quote-progress.is-stuck { box-shadow: 0 10px 20px rgba(10, 37, 64, .10); }
  .quote-progress__list { padding: 0; }
  .quote-progress__label { font-size: .78rem; }

  /* ---- Rows: leading icon, label and control ---- */
  .form-field--row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px; row-gap: 0;
    padding: 12px 14px;
  }
  .row-lead { grid-row: span 2; display: flex; align-items: center; justify-content: center; color: var(--navy-800); }
  .row-lead .icon { width: 22px; height: 22px; }
  .row-lead--pickup { color: var(--orange-cta); }
  .form-field--row > label { grid-column: 2; font-size: .95rem; }
  .form-field--row .address-field,
  .form-field--row .input-shell { grid-column: 2; }
  .form-field--row .field-status,
  .form-field--row .field-error,
  .form-field--row .geo-cancel,
  .form-field--row .geo-proposal { grid-column: 2; }
  /* An <input> cannot wrap, so a long located address ends mid-word. The
     proposal panel above is where it is read in full before being accepted;
     this just makes the committed value degrade to an ellipsis rather than a
     hard cut through a character. */
  .form-field--row .input-shell > input { text-overflow: ellipsis; }
  /* The shell is the row itself now, so it carries no second border. */
  .form-field--row .input-shell {
    border: 0; border-radius: 0; padding: 0; min-height: 32px; background: transparent;
  }
  .form-field--row .input-shell > input { padding: 0; font-size: 16px; }
  .form-field--row .input-shell:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }
  .form-field--row.is-invalid .input-shell { background: transparent; }
  .form-field--row .field-status:empty { display: none; }
  .form-field--row .field-error:empty { display: none; }
  .form-field--row .location-button { margin-right: -6px; }

  /* Two location rows share one card, split by a hairline. */
  .loc-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  .loc-grid > .form-field + .form-field { border-top: 1px solid var(--line); }

  /* Date and time likewise. */
  .date-time-grid { grid-template-columns: 1fr; gap: 0; }
  .date-time-grid > .form-field + .form-field { border-top: 1px solid var(--line); }

  /* ---- Items ---- */
  .qcat-zone { gap: 12px; }
  .qcat-field, .qcat-zone > .form-field { padding: 14px; }
  .qcat__grid { margin-bottom: .5rem; }

  /* ---- Photos ----
     The label and the button text are a notch down from the form default so
     "(at least 1)" and "Add from phone" each hold one line at 360px. */
  .qcat-zone .photo-upload { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qcat-zone > .form-field .field-label { font-size: .9rem; }
  .qcat-zone .photo-btn {
    flex-direction: row; gap: .45rem; min-height: 56px; padding: .6rem .4rem;
    font-size: .78rem; color: var(--orange-cta);
    border-color: #E3B49B; background: #fff;
  }
  .qcat-zone .photo-btn .icon { width: 19px; height: 19px; }

  /* ---- Loads ---- */
  .form-field--loads { padding: 14px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .choice__box { flex-direction: row; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; font-size: .9rem; }
  .choice__icon { width: 20px; height: 20px; flex: none; color: var(--navy-800); }
  .choice input:checked + .choice__box .choice__icon { color: var(--orange-cta); }
  .load-help { text-align: center; }
  .load-help summary { justify-content: center; color: var(--navy-800); text-decoration: underline; }

  /* ---- Tip + submit ---- */
  .form-tip { border: 1px solid #D7E3F1; }
  .form-actions { gap: 10px; }
  /* Squared-off rather than a pill, matching the mockup. The fill stays on
     the CTA orange: the brighter brand orange gives white text about 3.0:1,
     which fails AA for a control label. */
  .primary-button, .secondary-button { border-radius: 12px; }
}


/* ==========================================================================
   PHASE 3 — customer quote corrections.
   ========================================================================== */

/* ---- Preferred date / time as action rows --------------------------------
   These used to read as passive labelled fields, so people did not realise
   they were meant to tap them. They are now unmistakably controls: a full
   width row, an icon, a prompt, a chevron.

   The trick that makes it honest is that the REAL control is still the real
   control — the native <input type="date"> and the <select> are stretched
   transparently across the whole row rather than being replaced by something
   that only looks like them. Tapping anywhere hits the actual element, so the
   platform picker opens by itself, `required` still blocks submission, and
   the disabled state is the element's own rather than a class we remembered
   to add.
   -------------------------------------------------------------------------- */
.dt-field { display: grid; gap: 6px; }

/* `.dt-field > .dt-row` rather than `.dt-row`, because the row IS a <label>
   and `.form-field > label` already sets `display: block` at specificity
   (0,1,1). A bare `.dt-row` is (0,1,0) and loses, which silently stacked the
   icon, text and chevron vertically into a 112px block. Two classes beats one
   class plus an element, so this wins without !important. */
.dt-field > .dt-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  /* Comfortably past the 44px floor, with room for two lines of text at
     large font sizes without the row collapsing. */
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dt-field > .dt-row:hover { border-color: var(--navy, #0A2540); }

/* The ring is drawn on the ROW because the real input inside it is invisible;
   without this a keyboard user would tab to a control with no visible focus
   at all. */
.dt-field > .dt-row:focus-within {
  border-color: var(--orange-cta, #F26B21);
  box-shadow: 0 0 0 3px rgba(242, 107, 33, .22);
}
.dt-field > .dt-row:active { background: #F7F9FC; }

.dt-row__icon { flex: none; display: flex; color: var(--navy, #0A2540); }
.dt-row__icon .icon { width: 22px; height: 22px; }

.dt-row__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dt-row__label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.dt-row__value {
  font-size: 1rem; font-weight: 700; color: var(--ink, #0E2740);
  overflow-wrap: anywhere;
}
/* The prompt reads as a prompt, the answer reads as an answer. */
.dt-row__value.is-empty { font-weight: 600; color: #7A8A99; }

.dt-row__go { flex: none; display: flex; color: #93A1AF; }
.dt-row__go .icon { width: 20px; height: 20px; }

/* Loading, while the server works out which times are actually free. */
.dt-row__spin {
  flex: none; width: 18px; height: 18px;
  border: 2px solid var(--orange-cta, #F26B21); border-right-color: transparent;
  border-radius: 50%; animation: dt-spin .7s linear infinite;
}
@keyframes dt-spin { to { transform: rotate(360deg); } }

/* Disabled has to be obvious, not just slightly greyer — the time row spends
   most of its life here and a customer needs to see WHY nothing happens. */
.dt-field > .dt-row.is-disabled {
  background: #F4F6F8;
  border-color: #E3E9EF;
  cursor: not-allowed;
}
.dt-row.is-disabled .dt-row__icon,
.dt-row.is-disabled .dt-row__go { color: #AFBBC7; }
.dt-row.is-disabled .dt-row__value { color: #909EAC; }

/* The real control: present, focusable, and covering the row. Opacity rather
   than visibility or display, both of which would take it out of the
   accessibility tree and stop it being focusable. */
.dt-row__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  cursor: inherit;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  font: inherit; color: transparent;
}
.dt-row__input:disabled { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .dt-field > .dt-row { transition: none; }
  .dt-row__spin { animation-duration: 2s; }
}

/* ---- Sticky progress: hardening ------------------------------------------
   It was already sticky; these are the properties the behaviour depends on
   being unambiguous.

   SOLID, not translucent. A blurred panel still lets shapes through, and a
   field scrolling under the step you are supposedly on reads as a rendering
   fault. backdrop-filter is dropped entirely rather than layered over an
   opaque colour, because it costs a compositing layer for nothing.

   The z-index sits above the form and below the app bar (z 50) and any
   dialog, so it can never cover the header or a sheet. */
.quote-progress {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* The sentinel is 1px; without a matching negative offset the bar visibly
     jumps by that pixel at the moment it sticks. */
  margin-top: -1px;
}

/* Bottom navigation is fixed at the foot of the mobile shell, so the form has
   to end above it — otherwise the last control sits underneath and cannot be
   tapped. This is also what keeps a sticky bar from ever meeting it. */
@media (max-width: 899px) {
  .quote-progress { z-index: 40; }
}

/* ---------------------------------------------------------------------------
   Online scheduling temporarily unavailable.

   Sits directly above the date and time rows because that is what it
   qualifies. Informational, not an error: this is not the customer's fault
   and nothing they did has failed, so it borrows the muted card treatment
   rather than the red one.
   --------------------------------------------------------------------------- */
.dt-notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #d8e0e8);
  background: var(--wash, #f4f7f9);
  color: var(--ink, #1d2b3a);
  font-size: 15px;
  line-height: 1.5;
}