/* ---- Self-hosted fonts (was Google Fonts; now local for speed + privacy) ---- */
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/space-grotesk-var.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap; src:url("fonts/ibm-plex-sans-var.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* =================================================================
   DFW Medical Logistics — core stylesheet
   Design language: healthcare-grade precision + live dispatch
   ================================================================= */

/* ---- Tokens ---------------------------------------------------- */
:root {
  --ink:        #0B1B2B;   /* deep dispatch navy — primary dark / text */
  --ink-soft:   #122A3F;   /* lifted navy for panels on dark */
  --ink-line:   #21384C;   /* hairlines on dark */
  --slate:      #4C5D6B;   /* muted body text on light */
  --slate-soft: #768593;   /* captions / secondary */
  --mist:       #F3F7F8;   /* page surface */
  --mist-deep:  #E9F0F2;   /* alt surface band */
  --paper:      #FFFFFF;   /* cards */
  --line:       #E1EAEE;   /* hairlines on light */
  --line-soft:  #ECF1F3;

  --teal:        #0FA395;  /* calibrated teal — primary action */
  --teal-bright: #18C6B3;  /* accent / glow on dark */
  --teal-deep:   #0A776C;  /* teal text on light / hover */
  --teal-wash:   #E3F4F1;  /* tinted teal surface */

  --amber:       #EFA13C;  /* dispatch amber — emergency only */
  --amber-deep:  #C97E22;
  --amber-wash:  #FBEFD9;

  --ok:         #1FA971;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(11,27,43,.06), 0 1px 1px rgba(11,27,43,.04);
  --shadow:    0 14px 34px -18px rgba(11,27,43,.28);
  --shadow-lg: 0 40px 80px -40px rgba(11,27,43,.45);

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Reset / base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { color: var(--teal); }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Typography ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem); letter-spacing: -0.01em; }
p { color: var(--slate); }
.lead { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.28rem); color: var(--slate); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--teal);
  display: inline-block;
}
.mono { font-family: var(--font-mono); }

/* ---- Layout ---------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.section-head { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { margin-top: .9rem; }
.center { text-align: center; margin-inline: auto; }
.bg-mist { background: var(--mist); }
.bg-ink { background: var(--ink); color: #DCE7EC; }
.bg-ink h2, .bg-ink h3 { color: #fff; }

/* ---- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: .82em 1.5em;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .58em 1.05em; font-size: .92rem; }
.btn .ic { width: 18px; height: 18px; }

.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -12px rgba(15,163,149,.7); }
.btn-primary:hover { background: var(--teal-deep); color: #fff; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

.btn-emergency { background: var(--amber); color: #3a2606; box-shadow: 0 10px 24px -12px rgba(239,161,60,.8); }
.btn-emergency:hover { background: var(--amber-deep); color: #2a1c04; }

.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--teal-bright); color: var(--ink); }
.btn-ghost-dark { background: transparent; color: #fff; border-color: var(--ink-line); }
.btn-ghost-dark:hover { border-color: var(--teal-bright); color: var(--teal-bright); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Topbar ---------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: #9DB3C0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
}
.topbar-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 7px; justify-content: center; }
.topbar-item { display: inline-flex; align-items: center; gap: .5em; }
.topbar-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-line); }

/* live dot */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--slate-soft); }
.dot--live { background: var(--teal-bright); position: relative; }
.dot--live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--teal-bright); opacity: .6;
  animation: ping 2.4s var(--ease) infinite;
}
.dot--amber { background: var(--amber); }
.dot--amber.dot--live::after { border-color: var(--amber); }
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 70%,100% { transform: scale(1.7); opacity: 0; } }

/* ---- Header / nav ---------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: .65em; color: var(--ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.12rem; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .58rem; letter-spacing: .22em; color: var(--teal-deep); text-transform: uppercase; margin-top: 1px; }

.nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-menu > li > a:not(.btn) {
  display: inline-block; padding: .5em .8em; border-radius: var(--r-sm);
  color: var(--ink); font-weight: 450; font-size: .98rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-menu > li > a:not(.btn):hover { background: var(--mist); color: var(--teal-deep); }
.nav-menu > li > a[aria-current="page"] { color: var(--teal-deep); }
.nav-cta { margin-left: 8px; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0; z-index: 200; }
.skip-link:focus { left: 0; color: #fff; }

/* ---- Hero ------------------------------------------------------ */
.hero { position: relative; background: var(--ink); color: #DCE7EC; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 78% 8%, rgba(24,198,179,.16), transparent 60%),
    radial-gradient(50% 60% at 8% 100%, rgba(15,163,149,.12), transparent 60%);
  pointer-events: none;
}
.hero::after { /* faint precision grid */
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(90% 90% at 50% 30%, #000, transparent 75%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 104px);
}
.hero .eyebrow { color: var(--teal-bright); }
.hero .eyebrow::before { background: var(--teal-bright); }
.hero h1 { color: #fff; margin-top: 1rem; }
.hero h1 .accent { color: var(--teal-bright); }
.hero-sub { color: #A9BECB; margin-top: 1.25rem; max-width: 46ch; }
.hero .btn-row { margin-top: 2rem; }
.hero-trust { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .03em; color: #8FA6B4; }
.hero-trust span { display: inline-flex; align-items: center; gap: .5em; }
.hero-trust .tick { color: var(--teal-bright); }

/* ---- Dispatch panel (signature) -------------------------------- */
.dispatch-panel {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.dispatch-panel::before { /* top accent line */
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal-bright), transparent);
  border-radius: 2px;
}
.dispatch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-line); }
.dispatch-id { font-size: .78rem; letter-spacing: .08em; color: #8FA6B4; }
.dispatch-status { font-size: .74rem; letter-spacing: .1em; color: var(--teal-bright); display: inline-flex; align-items: center; gap: .55em; }

.dispatch-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 0; }
.route-point .route-label { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; color: #6E8593; }
.route-point .route-place { display: block; color: #EAF2F4; font-weight: 500; font-size: .96rem; margin-top: 3px; }
.route-arrow { color: var(--teal-bright); font-size: 1.2rem; }

.track { display: grid; gap: 2px; padding: 6px 0 4px; }
.track-step { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; position: relative; color: #7E95A3; font-size: .92rem; }
.track-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #3A5163; margin-inline: auto; position: relative; z-index: 1; background: var(--ink-soft); }
.track-step:not(:last-child) .track-dot::after { content: ""; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 2px; height: 30px; background: #2A4153; }
.track-time { font-family: var(--font-mono); font-size: .72rem; color: #6E8593; }
.track-step.is-done { color: #C6D4DC; }
.track-step.is-done .track-dot { border-color: var(--teal); background: var(--teal); }
.track-step.is-done:not(:last-child) .track-dot::after { background: var(--teal); }
.track-step.is-active { color: #fff; font-weight: 500; }
.track-step.is-active .track-dot { border-color: var(--teal-bright); background: var(--ink-soft); box-shadow: 0 0 0 4px rgba(24,198,179,.18); }
.track-step.is-active .track-dot::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--teal-bright); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .5; transform: scale(.7);} }

.dispatch-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--ink-line); }
.chip { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em; color: #B6C7D0; background: rgba(255,255,255,.04); border: 1px solid var(--ink-line); padding: .35em .7em; border-radius: 999px; }
.chip .tick { color: var(--teal-bright); }

/* ---- Statement band -------------------------------------------- */
.statement { background: var(--ink); color: #fff; }
.statement-inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 6vw, 80px); }
.statement-strike { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.02em; line-height: 1; color: #2E4759; text-decoration: line-through; text-decoration-color: var(--amber); text-decoration-thickness: 3px; white-space: nowrap; }
.statement-body p { color: #B9CAD4; }
.statement-body strong { color: var(--teal-bright); }
@media (max-width: 760px) { .statement-inner { grid-template-columns: 1fr; } .statement-strike { white-space: normal; } }

/* ---- Card grids ------------------------------------------------ */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-soft); }

/* Service card with icon */
.service-card .ic-badge {
  width: 50px; height: 50px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--teal-wash); color: var(--teal-deep);
  margin-bottom: 16px;
}
.service-card .ic-badge svg { width: 26px; height: 26px; }
.service-card h3 { margin-bottom: .5rem; }
.service-card p { font-size: .96rem; }
.service-card .more { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 14px; color: var(--teal-deep); }
.service-card:hover .more { gap: .7em; }

/* ---- Tiers / pricing ------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; }
.tier-name { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.tier-price { font-family: var(--font-display); font-weight: 600; font-size: 2rem; letter-spacing: -0.02em; margin-top: 10px; color: var(--ink); }
.tier-price .from { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-soft); font-weight: 400; margin-bottom: 4px; }
.tier-window { color: var(--slate); font-size: .92rem; margin-top: 10px; flex: 1; }
.tier--emergency { background: var(--ink); border-color: var(--ink-line); color: #C9D7DE; position: relative; }
.tier--emergency .tier-name { color: var(--amber); }
.tier--emergency .tier-price { color: #fff; }
.tier--emergency .tier-window { color: #9DB3C0; }
.tier-tag { position: absolute; top: -10px; right: 18px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; background: var(--amber); color: #3a2606; padding: .3em .65em; border-radius: 999px; }

.note { font-family: var(--font-mono); font-size: .8rem; color: var(--slate-soft); margin-top: 18px; }

/* ---- Process (tracked sequence) -------------------------------- */
.process { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 40px; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 0; position: relative; }
.step-num { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .05em; color: var(--teal-deep); width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--paper); position: relative; z-index: 1; }
.step:not(:nth-last-child(-n+2))::before { content: ""; position: absolute; left: 20px; top: 40px; bottom: -20px; width: 1px; background: var(--line); }
.step h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.step p { font-size: .95rem; }
@media (max-width: 720px){ .process { grid-template-columns: 1fr; } .step:not(:last-child)::before { content:""; position:absolute; left:20px; top:40px; bottom:-20px; width:1px; background:var(--line);} }

/* ---- Compare table --------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.compare-col { padding: 28px; }
.compare-col + .compare-col { border-left: 1px solid var(--line); }
.compare-col.is-us { background: var(--ink); color: #C9D7DE; }
.compare-col h3 { font-size: 1.1rem; margin-bottom: 4px; }
.compare-col.is-us h3 { color: #fff; }
.compare-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-soft); }
.compare-col.is-us .compare-tag { color: var(--teal-bright); }
.compare-list { margin-top: 18px; display: grid; gap: 11px; }
.compare-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: .96rem; }
.compare-list .mk { width: 18px; height: 18px; margin-top: 3px; }
.compare-col.is-them .mk { color: #C2705F; }
.compare-col.is-them li { color: var(--slate); }
.compare-col.is-us .mk { color: var(--teal-bright); }
@media (max-width: 680px){ .compare { grid-template-columns: 1fr; } .compare-col + .compare-col { border-left: none; border-top: 1px solid var(--ink-line); } }

/* ---- Areas ----------------------------------------------------- */
.areas-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.area-grid li { background: var(--paper); padding: 13px 16px; font-size: .95rem; display: flex; align-items: center; gap: .6em; transition: background .15s var(--ease); }
.area-grid li:hover { background: var(--teal-wash); }
.area-grid li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
.areas-note { font-family: var(--font-mono); font-size: .82rem; color: var(--slate-soft); margin-top: 18px; }

/* ---- Stats ----------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.stat { background: var(--paper); padding: 30px 26px; }
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -0.02em; color: var(--ink); }
.stat-num .unit { color: var(--teal); }
.stat-label { color: var(--slate); font-size: .94rem; margin-top: 6px; }

/* ---- CTA band -------------------------------------------------- */
.cta-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 120% at 85% 0%, rgba(24,198,179,.18), transparent 60%); }
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr auto; gap: 32px; align-items: center; padding-block: clamp(44px, 6vw, 76px); }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: #A9BECB; margin-top: .6rem; }
@media (max-width: 760px){ .cta-inner { grid-template-columns: 1fr; } }

/* ---- Page hero (interior) -------------------------------------- */
.page-hero { background: var(--ink); color: #DCE7EC; position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(55% 80% at 88% 0%, rgba(24,198,179,.14), transparent 60%); }
.page-hero-inner { position: relative; z-index: 1; padding-block: clamp(52px, 7vw, 88px); max-width: 62ch; }
.page-hero h1 { color: #fff; margin-top: .8rem; }
.page-hero p { color: #A9BECB; margin-top: 1rem; }
.page-hero .eyebrow { color: var(--teal-bright); }
.page-hero .eyebrow::before { background: var(--teal-bright); }
.crumbs { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: #7E95A3; }
.crumbs a { color: #9DB3C0; }
.crumbs a:hover { color: var(--teal-bright); }

/* ---- Prose / detail content ------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.6em; }
.prose p { margin-top: 1em; }
.prose ul.checks { margin-top: 1.1em; display: grid; gap: 10px; }
.prose ul.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.prose ul.checks .mk { width: 18px; height: 18px; color: var(--teal); margin-top: 3px; }

.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 880px){ .split { grid-template-columns: 1fr; } }

.aside-card { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; position: sticky; top: 96px; }
.aside-card h3 { font-size: 1.12rem; }
.aside-card ul { margin-top: 14px; display: grid; gap: 10px; }
.aside-card li { display: flex; gap: .6em; font-size: .94rem; color: var(--slate); }
.aside-card li::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--teal); margin-top: .65em; flex:none; }
.aside-card .btn { margin-top: 18px; width: 100%; justify-content: center; }

/* ---- Forms ----------------------------------------------------- */
.form-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 500; color: var(--ink); }
.field .req { color: var(--amber-deep); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r);
  padding: .72em .85em; width: 100%; transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(15,163,149,.12); }
.field .hint { font-size: .78rem; color: var(--slate-soft); }
.form-legend { display: block; font-size: .88rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.field-hp { position: absolute; left: -9999px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.form-actions .btn { padding-inline: 1.8em; }
.form-fine { font-family: var(--font-mono); font-size: .76rem; color: var(--slate-soft); }
fieldset { border: none; padding: 0; }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: .7em .9em; font-size: .92rem; text-align: center; background: var(--mist); transition: all .15s var(--ease); }
.choice input:checked + span { border-color: var(--teal); background: var(--teal-wash); color: var(--teal-deep); font-weight: 500; }
.choice input:focus-visible + span { outline: 3px solid var(--teal-bright); outline-offset: 2px; }

/* ---- Contact methods ------------------------------------------- */
.contact-methods { display: grid; gap: 14px; }
.method { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.method .ic-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-deep); }
.method.is-emergency .ic-badge { background: var(--amber-wash); color: var(--amber-deep); }
.method h3 { font-size: 1.05rem; }
.method .big { font-family: var(--font-mono); font-size: 1.15rem; color: var(--ink); margin-top: 4px; }
.method p { font-size: .9rem; margin-top: 4px; }

/* ---- Misc ------------------------------------------------------ */
.pill { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); background: var(--teal-wash); border-radius: 999px; padding: .4em .8em; }
.divider { height: 1px; background: var(--line); border: none; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 4px 20px; }
.faq summary { font-family: var(--font-display); font-weight: 500; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--teal); font-size: 1.3rem; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; font-size: .96rem; }

/* ---- Footer ---------------------------------------------------- */
.site-footer { background: var(--ink); color: #9DB3C0; padding-top: clamp(48px, 6vw, 72px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; padding-bottom: 40px; }
.brand--footer { color: #fff; font-size: 1.05rem; }
.footer-tagline { color: #8FA6B4; font-size: .94rem; margin-top: 14px; max-width: 34ch; }
.footer-positioning { font-family: var(--font-mono); font-size: .78rem; color: var(--teal-bright); margin-top: 14px; }
.footer-col h3 { color: #fff; font-size: .82rem; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { color: #9DB3C0; font-size: .94rem; }
.footer-col a:hover { color: var(--teal-bright); }
.footer-contact p { font-size: .9rem; margin-bottom: 8px; color: #9DB3C0; }
.footer-contact .lbl { color: #6E8593; }
.footer-contact a { color: #C9D7DE; }
.footer-contact .btn { margin-top: 8px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 24px; border-top: 1px solid var(--ink-line); font-size: .84rem; color: #6E8593; }
.footer-legal a { color: #8FA6B4; }

/* ---- Reveal animation ------------------------------------------ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .dispatch-panel { max-width: 460px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .areas-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 18px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu > li > a:not(.btn) { padding: .8em .4em; border-radius: var(--r-sm); }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .btn { width: 100%; justify-content: center; }
  .btn-row .btn { width: auto; }
  .hero .btn-row .btn { width: 100%; }
}
@media (max-width: 420px){ .grid-4, .tiers { grid-template-columns: 1fr; } }

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

/* ---- About: values + rig spec ---------------------------------- */
.value .vn { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; color: var(--teal-deep); }
.value h3 { font-size: 1.1rem; margin: .45rem 0 .35rem; }
.value p { font-size: .94rem; }

.rig-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.rig-specs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rig-figure { border: 1px solid var(--ink-line); border-radius: var(--r-lg); background: var(--ink-soft); padding: 30px; }
.rig-figure svg { width: 100%; height: auto; }
@media (max-width: 880px){ .rig-inner { grid-template-columns: 1fr; } }

/* ---- Anchor jumps clear the sticky header ---------------------- */
:target { scroll-margin-top: 96px; }

/* ---- Contact: emergency callout -------------------------------- */
.emergency-card { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; border-color: var(--amber); background: var(--amber-wash); }
@media (max-width: 680px) {
  .emergency-card { grid-template-columns: auto 1fr; }
  .emergency-card .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}
@media (max-width: 980px) { .hero-visual .dispatch-panel { margin-inline: auto; } }

/* ===================================================================
   ADDED: weather arrival scene · estimator · answer cards · trust ·
   legal/prose helpers   (appended for the optimization pass)
   =================================================================== */

/* ---- Weather arrival scene ------------------------------------- */
.scene-stage { max-width: 940px; margin-inline: auto; }
.scene {
  position: relative; width: 100%; aspect-ratio: 16 / 8.4;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #bfe3ef;
}
.scene-sky { position: absolute; inset: 0; transition: background .9s var(--ease); }
[data-state="sun"]   .scene-sky { background: linear-gradient(180deg,#6fc3e8 0%,#a9e0ef 55%,#eaf8f8 100%); }
[data-state="rain"]  .scene-sky { background: linear-gradient(180deg,#54646f 0%,#798993 60%,#9aa8af 100%); }
[data-state="sleet"] .scene-sky { background: linear-gradient(180deg,#74828d 0%,#97a4ac 55%,#c3cdd1 100%); }
[data-state="snow"]  .scene-sky { background: linear-gradient(180deg,#9cafbb 0%,#c4d1d8 55%,#eaf1f3 100%); }
[data-state="night"] .scene-sky { background: linear-gradient(180deg,#091525 0%,#122438 55%,#1b3245 100%); }

/* sun + moon */
.sun, .moon {
  position: absolute; top: 13%; right: 15%; width: 60px; height: 60px; border-radius: 50%;
  opacity: 0; transform: scale(.8); transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.sun  { background: radial-gradient(circle at 50% 50%, #fff6d8, #ffd25e 60%, #f6b73c 100%); box-shadow: 0 0 42px 12px rgba(255,196,70,.5); }
.moon { background: radial-gradient(circle at 38% 35%, #f6faff, #d2dcea 70%, #bcc9d8 100%); box-shadow: 0 0 26px 5px rgba(200,220,255,.32); }
.moon::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; top: 10px; right: 9px; background: rgba(150,168,190,.5); box-shadow: -16px 14px 0 -3px rgba(150,168,190,.4); }
[data-state="sun"]   .sun  { opacity: 1; transform: scale(1); }
[data-state="night"] .moon { opacity: 1; transform: scale(1); }
.sun::before {
  content: ""; position: absolute; inset: -20px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,212,96,.5) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, transparent 30px, #000 31px 45px, transparent 46px);
          mask: radial-gradient(circle, transparent 30px, #000 31px 45px, transparent 46px);
  animation: scene-spin 44s linear infinite; opacity: .65;
}

/* stars */
.scene-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
[data-state="night"] .scene-stars { opacity: 1; }
.scene-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #eaf2ff; animation: scene-twinkle var(--td,3s) ease-in-out infinite alternate; }
@keyframes scene-twinkle { from { opacity: .15; } to { opacity: .95; } }

/* clouds */
.scene-clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud { position: absolute; height: 28px; width: 88px; border-radius: 28px; background: #fdfefe; opacity: .9; transition: background .9s var(--ease), opacity .9s var(--ease); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 44px; height: 44px; top: -19px; left: 13px; }
.cloud::after  { width: 32px; height: 32px; top: -13px; left: 46px; }
.cloud.c1 { top: 15%; left: 6%;  animation: scene-drift 30s linear infinite; }
.cloud.c2 { top: 27%; left: 38%; transform: scale(.8);  opacity: .8; animation: scene-drift 38s linear infinite; }
.cloud.c3 { top: 11%; left: 62%; transform: scale(1.1); opacity: .85; animation: scene-drift 34s linear infinite; }
@keyframes scene-drift { from { margin-left: -28px; } to { margin-left: 60px; } }
[data-state="sun"]   .cloud { background: #ffffff; opacity: .82; }
[data-state="rain"]  .cloud { background: #65747e; opacity: .95; }
[data-state="sleet"] .cloud { background: #8995a0; opacity: .95; }
[data-state="snow"]  .cloud { background: #c3cfd6; opacity: .95; }
[data-state="night"] .cloud { background: #21384c; opacity: .7; }

/* the SVG scene art (clinic + road + truck) */
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .9s var(--ease); }
[data-state="night"] .scene-art { filter: brightness(.84) saturate(.92); }
[data-state="rain"]  .scene-art,
[data-state="sleet"] .scene-art { filter: brightness(.93); }
.scene-truck { animation: scene-drive 8s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes scene-drive {
  0%   { transform: translateX(-370px); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateX(0); }
  88%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(46px); opacity: 0; }
}
.wheel { transform-box: fill-box; transform-origin: center; animation: scene-spin 1.5s linear infinite; }
@keyframes scene-spin { to { transform: rotate(360deg); } }
.beam { opacity: 0; transition: opacity .7s var(--ease); }
[data-state="rain"] .beam, [data-state="sleet"] .beam, [data-state="snow"] .beam { opacity: .8; }
[data-state="night"] .beam { opacity: .95; }
.win { fill: #cfeaf3; transition: fill .8s var(--ease); }
[data-state="night"] .win { fill: #ffd98a; }

/* precipitation */
.scene-weather { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-weather .p { position: absolute; top: -26px; opacity: 0; will-change: transform; }
[data-state="rain"] .scene-weather .p {
  width: 2px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(196,219,235,0), rgba(196,219,235,.75));
  animation: precip-rain var(--dur,.72s) linear var(--delay,0s) infinite;
}
@keyframes precip-rain { 0% { transform: translate(0,-30px) rotate(14deg); opacity: 0; } 10% { opacity: .75; } 100% { transform: translate(-46px,600px) rotate(14deg); opacity: .15; } }
[data-state="sleet"] .scene-weather .p {
  width: 3px; height: 9px; border-radius: 3px; background: rgba(228,237,243,.92);
  animation: precip-sleet var(--dur,.56s) linear var(--delay,0s) infinite;
}
@keyframes precip-sleet { 0% { transform: translate(0,-24px) rotate(20deg); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(-30px,600px) rotate(20deg); opacity: .3; } }
[data-state="snow"] .scene-weather .p {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.55);
  animation: precip-snow var(--dur,3.4s) linear var(--delay,0s) infinite;
}
@keyframes precip-snow { 0% { transform: translate(0,-20px); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(var(--drift,16px),600px); opacity: .5; } }

/* lightning flash (rain) */
.scene-flash { position: absolute; inset: 0; background: #eaf3ff; opacity: 0; pointer-events: none; }
[data-state="rain"] .scene-flash { animation: scene-flash 8s steps(1) infinite; }
@keyframes scene-flash { 0%,92%,100% { opacity: 0; } 93% { opacity: .5; } 94% { opacity: 0; } 95.5% { opacity: .38; } 96.5% { opacity: 0; } }

/* scene caption + controls */
.scene-caption { display: flex; align-items: center; gap: .55em; justify-content: center; margin-top: 16px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .03em; color: var(--slate); }
.scene-caption .dot { width: 8px; height: 8px; }
.scene-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.wbtn { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .03em; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--slate); cursor: pointer; transition: border-color .2s, color .2s, background .2s; display: inline-flex; align-items: center; gap: 8px; }
.wbtn:hover { border-color: var(--teal); color: var(--teal-deep); }
.wbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wbtn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.wbtn .wd { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .75; }
.wbtn .wd.wd-sun   { background: #f4b740; opacity: 1; }
.wbtn .wd.wd-rain  { background: #5f93c9; opacity: 1; }
.wbtn .wd.wd-sleet { background: #9fb0bb; opacity: 1; }
.wbtn .wd.wd-snow  { background: #dfe9ef; opacity: 1; border: 1px solid #c2ccd0; }
.wbtn .wd.wd-night { background: #2c4763; opacity: 1; box-shadow: inset 0 0 0 2px #5a7795; }

/* ---- Instant estimate widget ----------------------------------- */
.field select {
  width: 100%; font: inherit; padding: 11px 38px 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--paper); color: var(--ink); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234C5D6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; cursor: pointer;
}
.field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.est-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.est-grid .field.full { grid-column: 1 / -1; }
.est-actions { margin-top: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.est-result { margin-top: 18px; border: 1px dashed var(--line); border-radius: var(--r); padding: 18px 20px; background: var(--mist); transition: border-color .25s, background .25s; }
.est-result.is-active { border-style: solid; border-color: var(--teal); background: var(--teal-wash); }
.est-row { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
.est-figure { font-family: var(--font-mono); font-size: 1.7rem; color: var(--ink); line-height: 1.1; }
.est-figure .unit { font-size: .9rem; color: var(--slate); }
.est-block .est-k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 4px; }
.est-note { font-size: .78rem; color: var(--slate-soft); margin-top: 14px; }
@media (max-width: 560px) { .est-grid { grid-template-columns: 1fr; } }

/* ---- AI answer / TL;DR cards ----------------------------------- */
.answer-card { border-left: 3px solid var(--teal); background: var(--mist); border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 4px 0; }
.answer-card .qa-q { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.answer-card p { margin: 0; color: var(--slate); }
.keyfacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.keyfacts li { display: flex; gap: 10px; font-size: .95rem; color: var(--slate); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.keyfacts li b { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .keyfacts { grid-template-columns: 1fr; } }

/* ---- Trust / E-E-A-T strip ------------------------------------- */
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.trust h3 { font-size: .98rem; margin-bottom: 2px; }
.trust p { font-size: .85rem; color: var(--slate); line-height: 1.45; }
@media (max-width: 880px) { .trust-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust-row { grid-template-columns: 1fr; } }

/* ---- Legal / prose helpers ------------------------------------- */
.callout { border: 1px solid var(--amber); background: var(--amber-wash); border-radius: var(--r); padding: 16px 18px; color: #7a5a1f; font-size: .94rem; }
.callout strong { color: #6a4e1a; }
.legal-meta { font-family: var(--font-mono); font-size: .8rem; color: var(--slate-soft); letter-spacing: .03em; }
.toc { border: 1px solid var(--line); border-radius: var(--r); background: var(--mist); padding: 18px 22px; }
.toc h2 { font-size: 1rem; margin-bottom: 6px; }
.toc ol { margin: 8px 0 0; padding-left: 1.25em; columns: 2; column-gap: 30px; font-size: .92rem; }
.toc ol li { margin-bottom: 6px; }
.toc a { color: var(--teal-deep); }
.legal .prose h2 { margin-top: 1.9em; scroll-margin-top: 96px; font-size: 1.28rem; }
.legal .prose h3 { margin-top: 1.3em; font-size: 1.05rem; }
.legal .prose p, .legal .prose li { color: var(--slate); }
@media (max-width: 680px) { .toc ol { columns: 1; } }

/* ---- reduced motion overrides for added components ------------- */
@media (prefers-reduced-motion: reduce) {
  .scene-weather { display: none; }
  .scene-truck { animation: none !important; transform: none !important; }
  .wheel { animation: none !important; }
  .cloud { animation: none !important; }
  .scene-flash { animation: none !important; opacity: 0 !important; }
  .sun::before { animation: none !important; }
  .scene-stars i { animation: none !important; }
}

/* dark-section contrast for added components */
.bg-ink .eyebrow { color: var(--teal-bright); }
.bg-ink .scene-caption { color: #9DB3C0; }
.bg-ink .scene-stage .scene { box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }

/* standalone icon badge (used in trust strip + pricing explainer) */
.ic-badge { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-deep); }
.ic-badge svg { width: 22px; height: 22px; }
.trust .ic-badge { width: 40px; height: 40px; }

/* fix: force equal trust columns (prevent content-based track blowout) */
.trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.trust { min-width: 0; }
@media (max-width: 880px) { .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .trust-row { grid-template-columns: 1fr !important; } }


/* ===================== Mobile QA hardening (overflow + tap targets) ===================== */
/* Process steps: stop 1fr content-track blowout (was forcing 700px col on mobile) */
.process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step { grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
.step > * { min-width: 0; }
@media (max-width: 720px) { .process { grid-template-columns: 1fr; } }

/* Split/grid children must be allowed to shrink; long tokens (emails, URLs) must wrap */
.split { min-width: 0; }
.split > * { min-width: 0; }
a { overflow-wrap: anywhere; }
p, li, dd, h1, h2, h3, .lead, .legal-meta { overflow-wrap: break-word; }

/* Netlify honeypot: zero layout footprint (was a 459px off-flow box) */
.field-hp { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* Tap targets >= 44px: weather controls + footer links */
.wbtn { min-height: 44px; }
.footer-col a { display: inline-block; padding-block: 4px; }

/* active weather control was ink-on-ink (invisible) on the dark scene — make it visible/on-brand */
.bg-ink .wbtn.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.bg-ink .wbtn.is-active .wd { background: #fff; opacity: 1; }

/* ---- Estimator: real road-distance UI ---- */
.field .opt { font-weight: 400; color: var(--slate-soft); font-size: .78rem; }
.est-status { margin-top: 12px; font-size: .82rem; font-family: var(--font-mono); letter-spacing: .01em; }
.est-status:empty { display: none; }
.est-status.is-live { color: var(--teal-deep); }
.est-status.is-approx { color: var(--amber-deep); }
#estGo.is-loading { opacity: .8; cursor: progress; }
#estGo:disabled { cursor: progress; }

/* ---- Coming-soon service treatment ---- */
.badge-soon { display:inline-block; vertical-align:middle; margin-left:.5em; font-family:var(--font-mono); font-size:.58em; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-deep); background:var(--amber-wash); border:1px solid #efd6a8; padding:.4em .75em; border-radius:999px; white-space:nowrap; }
.aside-card--soon { background:var(--amber-wash); border-style:dashed; border-color:var(--amber); }

/* ---- Weather section: tighter spacing + icon controls ---- */
#any-conditions { padding-block: clamp(40px, 5vw, 72px); }
#any-conditions .section-head { margin-bottom: clamp(16px, 2vw, 26px); }
.wbtn { padding: 10px 13px; }
.wbtn .wicon { width: 20px; height: 20px; display: block; }
/* screen-reader-only live caption (no literal weather word shown) */
.scene-caption.is-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Quote: build-your-load multi-item list ---- */
.load-builder { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.load-builder select { flex: 1 1 auto; min-width: 0; }
.load-builder #estQty { width: 64px; flex: 0 0 auto; text-align: center; }
.load-builder .btn { flex: 0 0 auto; }
.load-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.load-list li { display: flex; align-items: center; gap: 10px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-size: .9rem; }
.load-list .li-name { flex: 1 1 auto; min-width: 0; }
.load-list .li-meta { flex: 0 0 auto; color: var(--slate); font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.load-list .li-remove { flex: 0 0 auto; width: 26px; height: 26px; min-height: 26px; padding: 0; border: 0; background: var(--mist-deep); color: var(--slate); border-radius: 999px; cursor: pointer; font-size: 1.05rem; line-height: 1; }
.load-list .li-remove:hover { background: #f4d4d4; color: #b13636; }
.load-tally { margin-top: 10px; font-family: var(--font-mono); font-size: .82rem; color: var(--teal-deep); }
.est-break { margin-top: 10px; color: var(--slate); font-size: .85rem; }

/* ---- Testimonials (scaffold) ---- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.testimonial-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.testimonial-card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testimonial-card .t-name { font-weight: 600; color: var(--ink); }
.testimonial-card .t-org { font-size: .9rem; color: var(--slate); }

/* ===================== Visual polish — pass 1 ===================== */
/* Soft rest-state depth (cards already lift on hover; this adds quiet presence at rest) */
.card { box-shadow: var(--shadow-sm); }

/* Bring tier + testimonial cards up to the same depth/motion language as .card */
.tier, .testimonial-card { box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-soft); }
.testimonial-card:hover { box-shadow: var(--shadow); border-color: var(--line-soft); }

/* Hero atmosphere: faint teal glow behind the tracking card + a whisper of grid texture */
.hero-inner { position: relative; z-index: 2; }
.hero::after { /* optional background photo layer — inert until --hero-photo is set */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,27,43,.72), rgba(11,27,43,.9)),
    var(--hero-photo, transparent) center / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(50% 52% at 82% 26%, rgba(24,198,179,.22), transparent 66%),
    radial-gradient(44% 44% at 10% 92%, rgba(15,163,149,.13), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
}
/* Add a real hero photo later: on <section class="hero"> set style="--hero-photo:url('/images/hero-rig.jpg')" */

/* Icon badge gains a hint of life when its card is hovered */
.card:hover .ic-badge { background: var(--teal-wash); color: var(--teal-deep); }
/* (Keyboard focus rings already handled globally earlier in this file.) */

/* ===================== Visual polish — pass 2 ===================== */
/* Decorative quote glyph gives the testimonial cards character */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
  content: "\201C"; position: absolute; top: -6px; right: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1;
  color: var(--teal-wash); pointer-events: none;
}
.testimonial-card blockquote { position: relative; }

/* ============== Tracking card — live progress build on load ============== */
@media (prefers-reduced-motion: no-preference) {
  /* rows cascade top-to-bottom, like the shipment advancing through stages */
  .track-step { --d: 0s; animation: track-row .55s var(--ease) both; animation-delay: var(--d); }
  .track-step:nth-child(1) { --d: .35s; }
  .track-step:nth-child(2) { --d: .59s; }
  .track-step:nth-child(3) { --d: .83s; }
  .track-step:nth-child(4) { --d: 1.07s; }
  .track-step:nth-child(5) { --d: 1.31s; }
  /* the connecting line draws downward just after each dot lands */
  .track-step:not(:last-child) .track-dot::after {
    transform-origin: top center;
    animation: track-draw .4s var(--ease) both;
    animation-delay: calc(var(--d) + .16s);
  }
  /* active dot starts pulsing the moment it arrives */
  .track-step.is-active .track-dot::before { animation-delay: .83s; }
}
@keyframes track-row { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes track-draw { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }

/* Live "in transit" location beacon — an expanding ring, like a GPS ping */
.track-ping { position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--teal-bright); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .track-ping { animation: ping 2.6s var(--ease) infinite; animation-delay: .9s; }
}