/* ==========================================================================
   Material 3 Expressive — enhancement layer
   --------------------------------------------------------------------------
   Additive only. Loads after m3.css (and the home form sheet) so the base
   layout, components and behaviour stay intact. No markup, no JS, no webfonts,
   no blur or glass. Everything here is original CSS built on the existing
   tonal roles.

   What this layer adds:
   - a second elevation/state token set (--xp-*)
   - warmer ambient surfaces and quiet dot texture on tonal bands
   - editorial section rules and a richer display rhythm
   - tonal proof chips, stepped card accents and a segmented fleet gauge
   - expressive shape hierarchy on icons, cards, FAQ rows and the footer
   - M3 state layers on buttons, plus visible keyboard focus
   - reduced-motion, high-contrast, print and narrow-screen guards
   ========================================================================== */

/* ---------- 1. Enhancement tokens --------------------------------------- */
:root {
  --xp-elev-1: 0 1px 1px rgba(0, 32, 25, .05), 0 8px 20px -12px rgba(0, 32, 25, .18);
  --xp-elev-2: 0 2px 4px rgba(0, 32, 25, .06), 0 20px 44px -20px rgba(0, 32, 25, .24);
  --xp-elev-3: 0 4px 10px rgba(0, 32, 25, .07), 0 34px 70px -28px rgba(0, 32, 25, .30);
  --xp-hairline: color-mix(in srgb, var(--outline) 42%, transparent);
  --xp-inner-light: inset 0 1px 0 rgba(255, 255, 255, .68);
  --xp-state-hover: .07;
  --xp-state-press: .13;
  --xp-dot-dark: color-mix(in srgb, var(--on-surface) 7%, transparent);
  --xp-dot-light: rgba(229, 247, 240, .10);
  --xp-tint-mint: color-mix(in srgb, var(--mint) 62%, var(--surface));
  --xp-tint-peach: color-mix(in srgb, var(--peach) 55%, var(--surface));
}

/* ---------- 2. Ambient surface atmosphere -------------------------------- */
/* A warm-to-cool wash behind the opening copy, kept below text contrast. */
.hero,
.page-hero {
  background-image:
    radial-gradient(46rem 30rem at 2% -14%, color-mix(in srgb, var(--peach) 32%, transparent), transparent 68%),
    radial-gradient(40rem 28rem at 102% 0%, color-mix(in srgb, var(--mint) 46%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

/* Quiet dot fields make the large tonal bands feel like material, not fills.
   The dots sit behind content and stay under 8% contrast. */
.section--mint,
.section--low,
.area-band,
.cta-band,
.hero__panel {
  background-image: radial-gradient(var(--xp-dot-dark) .7px, transparent .8px);
  background-size: 18px 18px;
}

.site-footer {
  background-image: radial-gradient(var(--xp-dot-light) .7px, transparent .8px);
  background-size: 22px 22px;
}

/* ---------- 3. Type finishes -------------------------------------------- */
h1, h2, h3, h4 { text-wrap: balance; }
.section-head h2, .cta-band h2, .split__body h2, .page-hero h1 { text-wrap: balance; }
.section-head__lead, .lede, .hero .lede, .split__body > p { text-wrap: pretty; }

/* ---------- 4. Editorial section rhythm --------------------------------- */
.section-head {
  position: relative;
  padding-top: clamp(16px, 1.9vw, 24px);
  border-top: 1px solid var(--xp-hairline);
}
.section-head::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(52px, 7vw, 88px);
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 48%, var(--primary-container)));
}
.section-head--center::before {
  left: 50%;
  transform: translateX(-50%);
}

/* A three-part tonal rail reads as a deliberate graphic rule, not a progress
   indicator: equal segments, quiet gaps, rounded outer ends. */
.page-hero__rule {
  height: 6px;
  background:
    linear-gradient(90deg,
      var(--primary) 0 calc(33.333% - 4px),
      transparent calc(33.333% - 4px) calc(33.333% + 4px),
      var(--primary-container) calc(33.333% + 4px) calc(66.666% - 4px),
      transparent calc(66.666% - 4px) calc(66.666% + 4px),
      var(--tertiary-container) calc(66.666% + 4px) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 0 rgba(0, 32, 25, .05);
}
.service-row__num {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-lowest) 86%, transparent);
  color: var(--on-surface);
  opacity: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .65), var(--xp-elev-1);
}

/* ---------- 5. Hero: proof chips and layered surfaces -------------------- */
.hero__meta { gap: 8px; }
.hero__meta li {
  min-height: 36px;
  padding: 4px 15px 4px 5px;
  border: 1px solid color-mix(in srgb, var(--outline) 52%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-lowest) 76%, var(--mint) 24%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px -5px rgba(0, 32, 25, .25);
  color: var(--on-surface);
  font-size: 13px;
  font-weight: 650;
}
.hero__meta svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 4px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
}

.hero__panel {
  position: relative;
  z-index: 1;
  box-shadow:
    10px 10px 0 -1px color-mix(in srgb, var(--tertiary-container) 74%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .42);
}
.hero__badge {
  border: 1px solid var(--xp-hairline);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), var(--xp-elev-1);
}

/* Quote starters on both the home hero and the quote page. The home form is a
   deliberate single step, so no progress bar is drawn there; the quote card's
   full-width rim is handled in section 9. */
.start-card {
  position: relative;
  border-radius: 30px 30px 30px 12px;
  border-color: var(--xp-hairline);
  box-shadow: var(--xp-elev-3), var(--xp-inner-light);
}
/* The home sheet is injected after this file, so match its specificity. */
.page-home .home-quote-card {
  border-radius: 30px 30px 30px 12px;
  border-color: var(--xp-hairline);
  box-shadow: var(--xp-elev-3), var(--xp-inner-light);
}
.start-card__step {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  letter-spacing: .08em;
}
.start-grid input {
  box-shadow: inset 0 1px 2px rgba(0, 32, 25, .045);
}

/* ---------- 6. Cards: tonal rings, shape morph and state ----------------- */
.card {
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--xp-inner-light), var(--xp-elev-1);
}
@media (prefers-contrast: no-preference) {
  .card { border-color: color-mix(in srgb, currentColor 12%, transparent); }
}
.card::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -42px;
  width: 150px;
  height: 150px;
  border: 18px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  transition: transform .5s var(--ease-spring), border-color .3s;
}
.card__icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 14px -9px rgba(0, 32, 25, .45);
  transition: border-radius .35s var(--ease-spring), transform .35s var(--ease-spring);
}
.card__link svg {
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  padding: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.service-card__art {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.service-card__art img {
  transition: transform .6s var(--ease-spring);
}
.service-card--wide { overflow: hidden; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover .card__icon {
    border-radius: 50% 50% 50% 12px;
    transform: rotate(-5deg) scale(1.04);
  }
  .card:hover .service-card__art img { transform: scale(1.035); }
  .card:hover::after { transform: scale(1.06); }
  .btn:hover svg,
  .btn:hover .btn__icon { transform: translateX(2px); }
}

/* ---------- 7. Steps, guide phases and the fleet ------------------------ */
.step__num {
  box-shadow: inset 0 0 0 1px rgba(0, 32, 25, .07), 0 8px 18px -12px rgba(0, 32, 25, .45);
}
.steps .step:nth-child(2) .step__num {
  background: var(--peach);
  color: var(--peach-ink);
}
.steps .step:nth-child(3) .step__num {
  background: var(--butter);
  color: var(--butter-ink);
}

.guide-phase {
  position: relative;
  overflow: hidden;
  box-shadow: var(--xp-inner-light), var(--xp-elev-1);
}
.guide-phase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--primary-container);
}
.guide-phase:nth-child(2)::before { background: var(--peach); }
.guide-phase:nth-child(3)::before { background: var(--butter); }
.guide-phase:nth-child(2) .step__num { background: var(--peach); color: var(--peach-ink); }
.guide-phase:nth-child(3) .step__num { background: var(--butter); color: var(--butter-ink); }

.truck-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--xp-inner-light), var(--xp-elev-1);
}
.truck-card__tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 10px;
  line-height: 1.2;
}
.truck-card__volume { font-variant-numeric: tabular-nums; }
.truck-card__bar {
  height: 10px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg,
    var(--surface-container-high) 0 10px,
    var(--surface-low) 10px 14px);
  box-shadow: inset 0 1px 2px rgba(0, 32, 25, .06);
}
.truck-card__bar span {
  background: repeating-linear-gradient(90deg,
    var(--primary) 0 9px,
    color-mix(in srgb, var(--primary) 62%, var(--primary-container)) 9px 13px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.truck-card__rate {
  padding-top: 10px;
  border-top: 1px dashed var(--xp-hairline);
}

/* ---------- 8. Split media, areas, FAQ and CTA --------------------------- */
.split__media {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), var(--xp-elev-2);
}
.split__media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: inherit;
  pointer-events: none;
}
.split__badge {
  border: 1px solid var(--xp-hairline);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7), var(--xp-elev-1);
}

.area-band {
  border: 1px solid var(--xp-hairline);
  box-shadow: var(--xp-inner-light), var(--xp-elev-1);
}
.area-chips .chip {
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.area-chips .chip svg { color: currentColor; opacity: .65; }
.area-chips .chip--static:nth-child(6n+1) { background: var(--mint); color: var(--mint-ink); }
.area-chips .chip--static:nth-child(6n+2) { background: var(--peach); color: var(--peach-ink); }
.area-chips .chip--static:nth-child(6n+3) { background: var(--sand); color: var(--sand-ink); }
.area-chips .chip--static:nth-child(6n+4) { background: var(--lilac); color: var(--lilac-ink); }
.area-chips .chip--static:nth-child(6n+5) { background: var(--butter); color: var(--butter-ink); }
.area-chips .chip--static:nth-child(6n) { background: var(--surface-lowest); color: var(--on-surface); }

.faq-item {
  transition: background-color .2s, box-shadow .2s, margin .2s, border-radius .2s;
}
.faq-item summary { position: relative; }
.faq-item[open] {
  margin-block: 6px;
  padding-inline: 16px;
  border-bottom-color: transparent;
  border-radius: 20px 20px 10px 20px;
  background: color-mix(in srgb, var(--surface-low) 88%, var(--mint) 12%);
  box-shadow: inset 0 0 0 1px var(--xp-hairline), var(--xp-elev-1);
}
.faq-item[open] summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  transform: translateY(-50%);
}
.faq-icon {
  border-radius: 50% 50% 50% 14px;
  box-shadow: inset 0 0 0 1px var(--xp-hairline);
}

.cta-band {
  border-radius: clamp(36px, 4.5vw, 56px) clamp(36px, 4.5vw, 56px) clamp(36px, 4.5vw, 56px) 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint-ink) 10%, transparent), var(--xp-elev-2);
}
.cta-band .eyebrow {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .46);
}

/* ---------- 9. Quote page and form details ------------------------------ */
.quote-card {
  position: relative;
  overflow: clip;
  border-radius: 38px 38px 38px 16px;
  box-shadow: var(--xp-elev-3), var(--xp-inner-light);
}
.quote-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 0;
  background: linear-gradient(90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 52%, var(--primary-container)));
}
.quote-card__head {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--xp-hairline);
}
.form-section {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-top: 0;
  border-radius: 10px;
  background: var(--surface-low);
}
.form-section::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--tertiary);
}
.form-section:first-child { padding-top: 9px; }
.field label { transition: color .18s; }
.field:focus-within label { color: var(--primary); }
.field input,
.field select,
.field textarea {
  box-shadow: inset 0 1px 2px rgba(0, 32, 25, .04);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: inset 0 1px 2px rgba(0, 32, 25, .03), 0 0 0 3px color-mix(in srgb, var(--primary-container) 80%, transparent);
}
.preview-callout,
.form-status,
.legal-note {
  border-left: 3px solid color-mix(in srgb, var(--tertiary) 72%, transparent);
}
.aside-card {
  border: 1px solid var(--xp-hairline);
  box-shadow: var(--xp-inner-light), var(--xp-elev-1);
}
.aside-card h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tertiary);
  vertical-align: 2px;
}
.mini-steps li:nth-child(2) > span { background: var(--peach); color: var(--peach-ink); }
.mini-steps li:nth-child(3) > span { background: var(--butter); color: var(--butter-ink); }

/* ---------- 10. App bar, bottom nav and footer --------------------------- */
.app-bar {
  background: color-mix(in srgb, var(--surface) 92%, var(--mint) 8%);
}
.primary-nav a.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
.brand__mark {
  box-shadow: 0 8px 18px -12px rgba(0, 32, 25, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.bottom-nav {
  border-radius: 28px;
  box-shadow: 0 -2px 18px rgba(0, 32, 25, .12), var(--xp-elev-2);
}
.bottom-nav a { transition: background-color .2s, color .2s, transform .2s var(--ease-spring); }
.bottom-nav a.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}
.bottom-nav__quote-icon {
  border-radius: 50% 50% 50% 13px;
  box-shadow: 0 6px 16px -5px rgba(0, 107, 91, .55);
  transition: border-radius .3s var(--ease-spring), transform .3s var(--ease-spring);
}
.bottom-nav a:active { transform: scale(.97); }

.site-footer {
  position: relative;
  margin-top: clamp(28px, 4vw, 52px);
  border-radius: clamp(28px, 4vw, 46px) clamp(28px, 4vw, 46px) 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.site-footer__cols a { transition: color .2s, transform .2s var(--ease-spring); }
.site-footer__cols a:hover { transform: translateX(3px); }

/* ---------- 11. Buttons: tactile M3 state layers ------------------------ */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-standard);
}
.btn:hover::before { opacity: var(--xp-state-hover); }
.btn:active::before { opacity: var(--xp-state-press); }
.btn:focus-visible::before { opacity: .05; }
.btn svg,
.btn .btn__icon { transition: transform .25s var(--ease-spring); }

/* ---------- 12. Motion and preference guards ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card::after,
  .card__icon,
  .service-card__art img,
  .btn::before,
  .btn svg,
  .bottom-nav a,
  .bottom-nav__quote-icon,
  .site-footer__cols a {
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  .section-head { border-top-color: var(--outline); }
  .hero__meta li,
  .area-chips .chip,
  .aside-card,
  .guide-phase,
  .truck-card,
  .home-quote-card,
  .start-card {
    border: 2px solid var(--outline);
  }
  .faq-item[open] {
    border: 2px solid var(--outline);
    background: var(--surface);
  }
  .card::after {
    display: none;
  }
  .cta-band .eyebrow { padding: 0; background: none; }
}

/* ---------- 13. Responsive tuning --------------------------------------- */
@media (max-width: 980px) {
  .section-head { padding-top: 18px; }
  .site-footer { margin-top: 32px; }
  .bottom-nav {
    transition: transform .25s var(--ease-standard), opacity .18s var(--ease-standard);
  }
  /* Keep the fixed bar from covering a focused field or the mobile keyboard. */
  body:has(.field input:focus, .field select:focus, .field textarea:focus) .bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 32px));
  }
}

@media (max-width: 760px) {
  .hero__meta { gap: 6px; }
  .hero__meta li { font-size: 12px; padding-right: 11px; }
  .section-head { padding-top: 16px; }
  .card::after {
    top: -38px;
    right: -36px;
    width: 120px;
    height: 120px;
    border-width: 14px;
  }
  .faq-item[open] { padding-inline: 14px; }
  .quote-card::before { left: 22px; right: 22px; }
  .site-footer { margin-top: 26px; border-radius: 26px 26px 0 0; }
}

@media (max-width: 520px) {
  .start-card::before,
  .home-quote-card::before { left: 18px; right: 18px; }
  .faq-item[open] { margin-block: 4px; padding-inline: 12px; border-radius: 16px 16px 8px 16px; }
  .site-footer { border-radius: 20px 20px 0 0; }
  .cta-band { border-radius: 30px 30px 30px 14px; }
}

@media (max-width: 380px) {
  /* Long action labels (for example the preview submit wording) wrap rather
     than overflowing their button at 320 px. */
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .btn--lg { padding-block: 10px; }
}

/* ---------- 14. Print --------------------------------------------------- */
@media print {
  .card::after,
  .section-head::before,
  .split__media::after { display: none; }
  .site-footer { margin-top: 0; border-radius: 0; }
}