@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
   -------------------------------------------------------------------------- */
.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; }

/* Mobile drawer */
.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; }

.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 front of the vehicle. Wide screens make the panel
     wider than the photo's 4:3, so cover crops only vertically and X is
     inert. Narrower desktops make the panel taller than 4:3, and there cover
     crops sideways — a centred or right-biased X eats the grille first,
     because the truck's nose sits near the left edge of the frame. Keeping X
     low spends that crop on the driveway at the right instead.
     Y biases the vertical crop downward, favouring the truck over empty sky. */
  .hero__media img { object-fit: cover; object-position: 22% 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); }
  .m-hero__media img { width: 100%; height: 190px; 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); }
}

/* 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 {
  position: sticky;
  top: calc(var(--app-bar-h) + var(--safe-t));
  z-index: 40;
  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;
}
.quote-progress.is-stuck {
  border-bottom-color: var(--progress-border);
  box-shadow: 0 8px 18px rgba(10, 37, 64, .08);
}

.quote-progress__list {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(14px, .3fr)
    minmax(0, 1fr) minmax(14px, .3fr)
    minmax(0, 1fr);
  align-items: center;
  width: 100%; margin: 0; padding: 0 16px;
  list-style: none;
}

.quote-progress__step {
  display: grid; justify-items: center; gap: 5px;
  min-width: 0; text-align: center;
  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 {
  max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; font-weight: 700; line-height: 1.15;
}
.quote-progress__connector { height: 2px; 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);
}

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

/* ---- 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; }

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