/* ==========================================================================
   Ironvein Medical Courier LLC — global stylesheet
   --------------------------------------------------------------------------
   Direction: industrial-first, clinical discipline.
   Deep navy structural bands, tight radii, hairline seams, restrained colour.
   Every contrast pair below was measured; ratios are noted where they matter.
   ========================================================================== */

:root{
  /* --- Ink ---------------------------------------------------------------
     A real navy, not near-black. The previous --navy was #0A0B0D: 3% off
     pure black with no hue, which is why the site read flat. */
  --ink-950:#060D16;   /* deepest band — footer, top bar */
  --ink-900:#0B1A2B;   /* primary dark surface, headings on light (17.6:1 vs white) */
  --ink-800:#12283F;   /* raised surface on dark */
  --ink-700:#1D3A57;
  --ink-600:#2E4A68;
  --ink-500:#43566B;   /* body copy on white — 7.5:1 */
  --ink-400:#67788C;   /* secondary copy on white — 4.6:1 */

  /* --- Brand -------------------------------------------------------------
     Moved off the generic #2F6FED SaaS blue into the deeper end where
     medical-logistics brands live. */
  --brand-700:#0F4C81; /* links + actions on light — 9.0:1 vs white */
  --brand-600:#15629E;
  --brand-500:#1C79C0;
  --brand-300:#7FB2DB; /* on dark surfaces — 7.8:1 vs --ink-900 */
  --brand-100:#E3EEF7;

  /* --- Accent — STAT / urgency ONLY. Never decorative. ------------------- */
  --stat-600:#C2410C;
  --stat-300:#F0906A;

  /* --- Surfaces ---------------------------------------------------------- */
  --surface:#FFFFFF;
  --surface-2:#F6F8FA;
  --surface-3:#EDF1F5;

  /* --- Lines -------------------------------------------------------------
     --line is a decorative hairline (1.9:1, dividers only).
     --line-strong is for INTERACTIVE control boundaries and clears the
     3:1 required by WCAG SC 1.4.11 — measured 3.3:1 vs white. */
  --line:#D5DDE5;
  --line-strong:#7E8FA3;
  --line-dark:rgba(255,255,255,.14);
  --line-dark-strong:rgba(255,255,255,.32);

  /* --- Copy on dark ------------------------------------------------------ */
  --on-dark:#C3D0DE;       /* 11.2:1 vs --ink-900 */
  --on-dark-dim:#8C9BAC;   /* 5.4:1 vs --ink-900 */

  --focus:var(--brand-700);

  /* --- Type scale — 1.25 modular, fluid at the top ----------------------- */
  --fs-xs:0.8125rem;   /* 13 */
  --fs-sm:0.9375rem;   /* 15 */
  --fs-base:1rem;      /* 16 */
  --fs-lg:1.125rem;    /* 18 */
  --fs-xl:1.375rem;    /* 22 */
  --fs-2xl:clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);  /* 26 → 34 */
  --fs-3xl:clamp(2rem, 1.4rem + 2.6vw, 3rem);          /* 32 → 48 */

  /* --- Spacing — 8px base ------------------------------------------------ */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* --- Radii — tight. Soft 12-16px reads consumer-app. ------------------- */
  --r-sm:3px; --r-md:5px; --r-lg:8px; --r-pill:999px;

  /* --- Shadows — neutral, two tiers. No coloured glows. ------------------ */
  --shadow-1:0 1px 2px rgba(11,26,43,.06), 0 1px 3px rgba(11,26,43,.10);
  --shadow-2:0 2px 4px rgba(11,26,43,.06), 0 8px 20px rgba(11,26,43,.10);

  --measure:68ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* system-ui first. The previous stack led with 'Segoe UI', which does not
   exist on macOS/iOS, so it silently resolved to Arial for Apple traffic. */
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink-500);
  font-size:var(--fs-base);
  line-height:1.6;
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
p{overflow-wrap:break-word;}

.container{max-width:1180px;margin:0 auto;padding:0 var(--s-5);}

h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--ink-900);letter-spacing:-0.015em;}
h1{font-size:var(--fs-3xl);letter-spacing:-0.022em;text-wrap:balance;}
h2{font-size:var(--fs-2xl);margin-bottom:var(--s-3);text-wrap:balance;}
h3{font-size:var(--fs-xl);letter-spacing:-0.01em;}
h4{font-size:var(--fs-sm);}

/* --- Section rhythm ------------------------------------------------------
   Previously every section on every page was `padding:72px 0`, so a hero and
   a testimonial band carried identical visual weight and the page had no
   entry point. Three variants, alternated deliberately. */
section{padding-block:var(--s-6);}
@media (min-width:900px){ section{padding-block:var(--s-7);} }
.section--feature{padding-block:var(--s-7);}
@media (min-width:900px){ .section--feature{padding-block:var(--s-8);} }
.section--compact{padding-block:var(--s-5);}

.section-alt{background:var(--surface-2);border-block:1px solid var(--line);}

.eyebrow{
  color:var(--brand-700);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:var(--fs-xs);margin-bottom:var(--s-2);display:block;
}
.eyebrow-light{color:var(--brand-300);}
.lead{color:var(--ink-500);font-size:var(--fs-lg);max-width:var(--measure);line-height:1.55;}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.muted{color:var(--ink-500);font-size:var(--fs-sm);}
.measure{max-width:var(--measure);}

/* Spacing utilities — replace the 16 inline style="margin-top:34px" attributes.
   Named steps off the scale, not arbitrary pixel values. */
.mt-4{margin-top:var(--s-4);}
.mt-5{margin-top:var(--s-5);}
.mt-6{margin-top:var(--s-6);}
.mt-7{margin-top:var(--s-7);}
.mb-4{margin-bottom:var(--s-4);}

/* Inline text link — replaces ad-hoc style="color:var(--blue)" attributes
   used to highlight a link inside a paragraph of body copy. */
.text-link{color:var(--brand-700);font-weight:600;}
.text-link:hover{text-decoration:underline;}

/* ==========================================================================
   Icons
   ========================================================================== */

/* The inlined <svg> sprite itself: pulled out of flow so it occupies no space.
   Previously a style="position:absolute" attribute plus an inline <style> inside
   the sprite's <defs>; both moved here so the CSP can drop 'unsafe-inline' from
   style-src. Keep in sync with assets/img/icons.svg. */
.icon-sprite{position:absolute;}

/* Stroke defaults for the <symbol> definitions. These are all inherited
   properties, so they propagate into each <use> instance — which is why styling
   the symbol here is equivalent to the inline <style> this replaced. */
.icon-sprite symbol{
  fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

.ico{
  width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block;
  vertical-align:-0.15em;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.ico-sm{width:1em;height:1em;}
.ico-lg{width:26px;height:26px;stroke-width:1.6;}

/* ==========================================================================
   Focus — must clear 3:1 on BOTH light and dark surfaces (SC 1.4.11).
   The old ring was --blue-light on white at 2.67:1 and failed outright.
   The white outer ring is what keeps it visible on dark bands.
   ========================================================================== */

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.92);
  border-radius:var(--r-sm);
}
.hero :focus-visible,
.page-hero :focus-visible,
.areas :focus-visible,
.cta-band :focus-visible,
.section--dark :focus-visible,
footer :focus-visible,
header.site :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 4px rgba(11,26,43,.85);
}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--brand-700);color:#fff;
  padding:var(--s-3) var(--s-5);z-index:200;border-radius:0 0 var(--r-md) 0;font-weight:600;
}
.skip-link:focus{left:0;}

/* ==========================================================================
   Buttons — flat. No gradients, no coloured glow.
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:13px 22px;border-radius:var(--r-md);
  font-weight:600;font-size:var(--fs-sm);line-height:1.2;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-lg{padding:15px 28px;font-size:var(--fs-base);}

.btn-primary{background:var(--brand-700);color:#fff;}
.btn-primary:hover{background:var(--brand-600);}

/* On dark bands */
.btn-outline{background:transparent;color:#fff;border-color:var(--line-dark-strong);}
.btn-outline:hover{background:rgba(255,255,255,.10);border-color:#fff;}

/* Header's Request Pickup — the one primary action shown against the
   header bar, next to the phone number set in bold white. It used to be
   .btn-navy: ink-800 on an ink-900 bar, a 1.3:1 difference, which read as
   disabled next to that white text. Nothing else on a navy bar can
   compete with solid white, so this is the one place a primary goes
   white-on-navy instead of brand-700 — the hero and CTA bands keep
   .btn-primary because they already clear contrast there and pairing it
   with .btn-outline needs the two to stay visually distinct. */
.btn-on-dark{background:#fff;color:var(--ink-900);}
.btn-on-dark:hover{background:var(--brand-100);}

/* On light surfaces — border uses --line-strong so the control boundary
   actually clears 3:1. The old --line border measured 1.23:1. */
.btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--line-strong);}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--ink-500);}

/* ==========================================================================
   Header
   ========================================================================== */

header.site{
  background:var(--ink-900);position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line-dark);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
nav.main{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;}

/* Logo trimmed from 62px to 44px. The old header plus top bar was 119px of
   permanent sticky chrome — 18% of a 667px phone viewport. */
.logo{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-base);font-weight:800;color:#fff;}
.logo img{height:44px;width:auto;display:block;}
.logo .wordmark{display:flex;flex-direction:column;line-height:1.15;}
.logo .wordmark .top{color:#fff;letter-spacing:.01em;}
.logo .wordmark .top span{color:var(--brand-300);}
/* Was .62rem = 9.9px uppercase letter-spaced, which is texture, not text. */
.logo .wordmark .bottom{
  font-size:0.6875rem;letter-spacing:.08em;font-weight:600;
  color:var(--on-dark-dim);text-transform:uppercase;
}

.navlinks{display:flex;gap:var(--s-6);font-weight:600;font-size:var(--fs-sm);color:var(--on-dark);}
.navlinks a{padding:var(--s-1) 0;border-bottom:2px solid transparent;}
.navlinks a:hover{color:#fff;}
.navlinks a[aria-current="page"]{color:#fff;border-bottom-color:var(--brand-300);}

.nav-cta{display:flex;gap:var(--s-3);align-items:center;}
.nav-cta a.phone{font-weight:700;color:#fff;white-space:nowrap;font-size:var(--fs-sm);}

.nav-toggle{
  display:none;background:transparent;border:1px solid var(--line-dark-strong);
  border-radius:var(--r-md);color:#fff;padding:7px;cursor:pointer;line-height:0;
}
.nav-toggle:hover{border-color:var(--brand-300);}
.nav-toggle .ico{width:22px;height:22px;}
/* Both icons ship in the button; CSS swaps them. main.js only toggles a class,
   so it never mutates textContent. */
.nav-toggle .ico-close{display:none;}
.nav-toggle[aria-expanded="true"] .ico-open{display:none;}
.nav-toggle[aria-expanded="true"] .ico-close{display:inline-block;}

@media (max-width:980px){
  .navlinks{display:none;}
  .nav-toggle{display:block;}
  .nav-cta a.phone{display:none;}
  .navlinks.open{
    display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    background:var(--ink-900);border-bottom:1px solid var(--line-dark);
    padding:var(--s-2) var(--s-5) var(--s-4);
    box-shadow:0 12px 24px rgba(0,0,0,.45);
  }
  .navlinks.open a{padding:var(--s-3) 0;border-bottom:1px solid var(--line-dark);}
  .navlinks.open a[aria-current="page"]{border-bottom-color:var(--line-dark);}
  header.site .container{position:relative;}
}
@media (max-width:480px){
  .nav-cta .btn{padding:11px 14px;font-size:var(--fs-xs);}
  /* The mark is landscape (1.47:1), so at 44px tall it occupies 65px of row
     width against the old square mark's 44px. On a 360px viewport that 21px
     is the difference between the wordmark fitting and the CTA wrapping. */
  .logo img{height:36px;}
}

/* ==========================================================================
   Heroes — flat industrial bands. The radial gradient and the 460px logo
   watermark at opacity .1 are gone; the watermark is the universal
   substitute for having no photography.
   ========================================================================== */

.hero{
  position:relative;background:var(--ink-900);color:#fff;
  padding-top:var(--s-6);padding-bottom:var(--s-8);border-bottom:1px solid var(--line-dark);
}
@media (min-width:900px){ .hero{padding-top:var(--s-7);padding-bottom:var(--s-9);} }
.hero .container{position:relative;z-index:1;display:grid;gap:var(--s-7);align-items:center;}
@media (min-width:900px){
  .hero .container{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-8);}
}
.hero h1{color:#fff;max-width:16ch;}
.hero p{color:var(--on-dark);font-size:var(--fs-lg);margin-top:var(--s-5);max-width:54ch;line-height:1.55;}
.hero .actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6);}
.hero .hero-note{font-size:var(--fs-xs);color:var(--on-dark-dim);margin-top:var(--s-3);}

/* Hero media slot. Photography is Cloudflare-hosted, not in /assets/img/.
   aspect-ratio reserves layout so adding the image costs no CLS. */
.hero-media{
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);
  border:1px solid var(--line-dark);aspect-ratio:4/3;
}
.hero-media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:899px){ .hero-media{aspect-ratio:16/10;} }

.hero-stats{
  background:var(--ink-800);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:var(--s-6);
}
.hero-stats ul li{
  display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-dark);
}
.hero-stats ul li:last-child{border-bottom:none;}
.hero-stats ul li > span:first-child{color:var(--on-dark-dim);font-size:var(--fs-sm);}
.hero-stats .num{font-size:var(--fs-xl);font-weight:800;color:#fff;letter-spacing:-0.01em;}

.page-hero{
  position:relative;background:var(--ink-900);color:#fff;
  padding-top:var(--s-5);padding-bottom:var(--s-7);border-bottom:1px solid var(--line-dark);
}
@media (min-width:900px){ .page-hero{padding-top:var(--s-6);padding-bottom:var(--s-8);} }
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{color:#fff;max-width:20ch;}
.page-hero p{color:var(--on-dark);font-size:var(--fs-lg);max-width:64ch;margin-top:var(--s-4);}
.page-hero .actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6);}

.crumbs{font-size:var(--fs-xs);color:var(--on-dark-dim);margin-bottom:var(--s-4);}
.crumbs a:hover{color:#fff;}
.crumbs span{color:var(--ink-600);padding:0 var(--s-2);}

/* ==========================================================================
   Proof strip
   ========================================================================== */

/* Proof strip — the substantiated variant (BAA / COI / temp record / POD). */
.proof{background:var(--surface-2);border-bottom:1px solid var(--line);padding-block:var(--s-5);}
.proof .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-5);}
.proof-item{display:flex;gap:var(--s-3);align-items:flex-start;}
.proof-item .ico{width:20px;height:20px;color:var(--brand-700);margin-top:2px;}
.proof-item strong{display:block;font-size:var(--fs-sm);color:var(--ink-900);}
.proof-item span{display:block;font-size:var(--fs-xs);color:var(--ink-400);margin-top:2px;}

/* ==========================================================================
   Facility list — who we serve, as rows rather than six more cards.
   --------------------------------------------------------------------------
   This replaces .services-grid / .service-card, which is now unused: the
   homepage moved to .service-panel, services.html to .dispatch-list, and
   service-areas.html to the rows below. The old component put a border, a
   radius and a seam around six audience segments that are read, not
   clicked — the same costume worn by the stats, the reasons, the quotes and
   the process steps, which is why every section of the site used to look
   like every other one.
   ========================================================================== */

.facility-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s-8);margin-top:var(--s-6);
}
@media (max-width:819px){ .facility-list{grid-template-columns:1fr;} }
.facility-item{
  display:grid;grid-template-columns:22px 1fr;gap:var(--s-4);align-items:start;
  padding:var(--s-4) 0;border-top:1px solid var(--line);
}
.facility-item .ico{color:var(--brand-700);width:22px;height:22px;margin-top:3px;}
.facility-item h3{font-size:var(--fs-base);margin-bottom:var(--s-1);}
.facility-item p{color:var(--ink-500);font-size:var(--fs-sm);}
@media (min-width:820px){ .facility-item:nth-child(-n+2){border-top:none;padding-top:0;} }
@media (max-width:819px){ .facility-item:first-child{border-top:none;padding-top:0;} }

/* Per-service operational detail. Forces one real number per service, which
   is what buyers scan for — and what a generated template cannot invent. */
.card-spec{
  display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-4);row-gap:var(--s-2);
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  font-size:var(--fs-xs);
}
.card-spec dt{color:var(--ink-400);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.card-spec dd{color:var(--ink-900);font-weight:500;}

/* ==========================================================================
   Dispatch list — services.html's catalog as rows, not cards.
   --------------------------------------------------------------------------
   Nine services in a three-across grid is nine stops for the eye in no
   order. As rows, classification/name/coverage line up in columns, so a
   buyer scans one edge instead of hunting a field — closer to a manifest
   than a marketing grid, which suits what this page actually is: a lookup.
   Named grid-template-areas (not source order) place each part, so the
   mobile reflow below doesn't depend on DOM order lining up with the
   auto-placement algorithm.
   ========================================================================== */

.dispatch-list{border-top:1px solid var(--line);margin-top:var(--s-7);}
.dispatch-row{
  position:relative;display:grid;
  grid-template-columns:168px minmax(190px,.95fr) minmax(0,1.5fr) 18px;
  grid-template-areas:"tag name desc go";
  gap:var(--s-6);align-items:center;
  padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);text-decoration:none;
  transition:background-color .16s ease;
}
.dispatch-row::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--brand-700);
  transform:scaleY(0);transition:transform .18s ease;
}
.dispatch-row:hover{background:var(--surface-2);}
.dispatch-row:hover::before{transform:scaleY(1);}
.dispatch-row:focus-visible{outline-offset:-2px;box-shadow:none;}
.dispatch-tag{
  grid-area:tag;color:var(--ink-400);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;font-size:var(--fs-xs);
}
.dispatch-name{grid-area:name;display:flex;align-items:center;gap:11px;min-width:0;}
.dispatch-name .ico{color:var(--brand-700);width:20px;height:20px;stroke-width:1.6;flex:0 0 auto;}
.dispatch-name span{font-weight:700;color:var(--ink-900);font-size:1.0625rem;letter-spacing:-.01em;}
.dispatch-row p{grid-area:desc;font-size:var(--fs-sm);color:var(--ink-500);line-height:1.5;}
.dispatch-go{grid-area:go;color:var(--brand-700);justify-self:end;transition:transform .16s ease;}
.dispatch-row:hover .dispatch-go{transform:translateX(3px);}

@media (max-width:860px){
  .dispatch-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"tag tag" "name go" "desc desc";
    gap:var(--s-2) var(--s-4);padding:var(--s-4);
  }
}

/* ==========================================================================
   Services band (dark) — index.html's service section as a navy band.
   --------------------------------------------------------------------------
   The homepage currently runs hero (navy) / services (white) / about
   (white) / CTA (navy), so the section that should carry the most weight
   reads as the quietest thing on the page. This inverts it: cards raise off
   ink-900 as ink-800 plates, seamed with line-dark and separated by a real
   gutter rather than a shared border, so an odd last row is just a shorter
   row. stat-600 — reserved for urgency everywhere else in this system —
   gets its one deliberate, decorative-free use here: the STAT plate's left
   edge, and nowhere else.
   ========================================================================== */

.section--dark{background:var(--ink-900);color:var(--on-dark);border-block:1px solid var(--line-dark);}
.section--dark h2{color:#fff;}
.section--dark .lead{color:var(--on-dark);}

.panel-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--s-4);margin-top:var(--s-7);
}
.service-panel{
  background:var(--ink-800);border:1px solid var(--line-dark);border-radius:var(--r-md);
  display:flex;overflow:hidden;transition:background-color .16s ease,border-color .18s ease;
}
.service-panel:hover{background:var(--ink-700);border-color:var(--brand-300);}
.service-panel--stat{border-left:3px solid var(--stat-600);}
.service-panel > a{
  display:flex;flex-direction:column;flex:1;
  padding:var(--s-6) var(--s-5) var(--s-5);text-decoration:none;
}
.service-panel > a:focus-visible{outline-offset:-2px;box-shadow:none;}
.service-panel-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-5);}
.service-panel .icon{color:var(--brand-300);margin:0;}
.service-panel-tag{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--on-dark-dim);
}
.service-panel--stat .service-panel-tag{color:var(--stat-300);}
.service-panel h3{color:#fff;font-size:var(--fs-lg);}
.service-panel p{color:var(--on-dark);font-size:var(--fs-sm);margin-top:var(--s-3);line-height:1.6;}
.service-panel .more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--s-5);
  font-weight:600;font-size:var(--fs-sm);color:var(--brand-300);
}
.service-panel .more .ico{transition:transform .16s ease;}
.service-panel > a:hover .more .ico{transform:translateX(3px);}

/* ==========================================================================
   Service detail rows
   --------------------------------------------------------------------------
   Two children — a photo+copy column and a separate includes list — same
   grouping as before. What changed:

   - align-items:start -> center. The includes list is 3-4 short lines
     against a column that also holds a photo, so top-aligning it stranded
     150-250px of dead space beneath the list. A first pass tried giving the
     photo its own full-height column instead, but photo height then tracked
     whatever the copy happened to be that block, and across all nine real
     entries the crop swung from near-square to portrait depending on
     paragraph length alone — worse than the bug it fixed. Centering the
     shorter column keeps the photo at one predictable 16:10 crop everywhere
     and still removes the dead space.
   - The lead paragraph drops .muted (fs-sm / ink-500 — smaller and lighter
     than ordinary body copy, for what is the primary explanation of the
     service) and inherits the body default instead.
   - The list gets a real label ("Included on every run") and each row is a
     bold key phrase over a lighter qualifier rather than a check mark — a
     tick next to every item in a list of included things carries no
     information, since nothing is ever shown unchecked.
   ========================================================================== */

.svc-detail{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center;
  padding-block:var(--s-7);border-bottom:1px solid var(--line);
}
.svc-detail:last-child{border-bottom:none;}
.svc-detail .tag{
  display:inline-block;background:var(--brand-100);border:1px solid var(--line);
  color:var(--brand-700);font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-sm);margin-bottom:var(--s-3);
}
.svc-detail h3{margin-bottom:var(--s-2);}
.svc-detail p{font-size:var(--fs-base);color:var(--ink-500);line-height:1.6;}
.svc-photo{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg);
  margin-bottom:var(--s-4);border:1px solid var(--line);
}

.svc-includes-label{
  display:block;margin:var(--s-5) 0 var(--s-2);
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-400);
}
.svc-includes{border-top:1px solid var(--line);}
.svc-includes li{padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-500);}
.svc-includes b{display:block;font-size:var(--fs-base);font-weight:700;color:var(--ink-900);margin-bottom:1px;}

@media (max-width:800px){ .svc-detail{grid-template-columns:1fr;gap:var(--s-4);} }

/* ==========================================================================
   Why / reasons — the 01/02/03/04 numbered grid is gone. Numbering implies
   sequence and these are not sequential.
   ========================================================================== */

.why{background:var(--surface-2);border-block:1px solid var(--line);}

/* Six reasons as ledger rows — the same structure as .dispatch-list on
   services.html: claim in one column, elaboration in the next, aligned down
   the page so the eye scans one edge. Nothing here is clickable, so there is
   no hit target and no hover; the rule is doing the grouping a border used to.
   ========================================================================== */
.why-grid{border-top:1px solid var(--line);margin-top:var(--s-6);}
.why-item{
  display:grid;grid-template-columns:22px minmax(170px,.8fr) minmax(0,1.5fr);
  gap:var(--s-5);align-items:center;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line);
}
.why-item .ico{color:var(--brand-700);width:22px;height:22px;}
.why-item h3{font-size:var(--fs-base);}
.why-item p{color:var(--ink-500);font-size:var(--fs-sm);line-height:1.5;}
@media (max-width:820px){
  .why-item{grid-template-columns:22px 1fr;gap:var(--s-2) var(--s-4);padding:var(--s-4) 0;}
  .why-item h3{grid-column:2;}
  .why-item p{grid-column:2;}
}

/* ==========================================================================
   About
   ========================================================================== */

.about .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;}
.about-box{
  background:var(--ink-900);color:#fff;border-radius:var(--r-lg);
  padding:var(--s-6);border:1px solid var(--ink-700);
}
.about-box h3{color:#fff;margin-bottom:var(--s-2);font-size:var(--fs-lg);}
.about-box p{color:var(--on-dark);font-size:var(--fs-sm);}
.about-box + .about-box{margin-top:var(--s-5);}
@media (max-width:900px){ .about .container{grid-template-columns:1fr;gap:var(--s-6);} }

/* ==========================================================================
   Stats band
   ========================================================================== */

/* Was four 34px/800-weight numbers in four boxes — a metrics-vanity panel,
   and three of the four "numbers" are words (24/7, HIPAA, Statewide). Read as
   a spec plate instead: label above, value below, vertical hairlines between,
   no boxes. Same key/value idiom as .hero-stats on the homepage, so the site
   has one way of stating a fact rather than two. */
.spec-rail{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:var(--s-6);border-top:1px solid var(--line);
}
.spec-rail > div{
  padding:var(--s-5) var(--s-5) var(--s-5) var(--s-5);
  border-left:1px solid var(--line);
}
/* The divider belongs between columns, so it comes off whichever item starts
   a row — which depends on the column count, hence one rule per breakpoint. */
.spec-rail > div:nth-child(4n+1){border-left:none;padding-left:0;}
@media (max-width:900px){
  .spec-rail{grid-template-columns:repeat(2,minmax(0,1fr));}
  .spec-rail > div:nth-child(2n+1){border-left:none;padding-left:0;}
  .spec-rail > div:nth-child(n+3){border-top:1px solid var(--line);}
}
.spec-rail dt{
  color:var(--ink-400);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.07em;font-weight:600;
}
.spec-rail dd{
  color:var(--ink-900);font-size:var(--fs-xl);font-weight:700;
  letter-spacing:-0.015em;margin-top:var(--s-1);line-height:1.2;
}
/* Dark-band variant — the homepage coverage summary. Same component as the
   about page's standards rail; only the palette changes. */
.spec-rail--dark{border-top-color:var(--line-dark);}
.spec-rail--dark > div{border-left-color:var(--line-dark);border-top-color:var(--line-dark);}
.spec-rail--dark dt{color:var(--on-dark-dim);}
.spec-rail--dark dd{color:#fff;}
/* Three items, so the row starts at every third child, not every fourth. */
.spec-rail--dark{grid-template-columns:repeat(3,minmax(0,1fr));}
.spec-rail--dark > div:nth-child(4n+1){border-left:1px solid var(--line-dark);padding-left:var(--s-5);}
.spec-rail--dark > div:nth-child(3n+1){border-left:none;padding-left:0;}
@media (max-width:900px){
  .spec-rail--dark{grid-template-columns:1fr;}
  .spec-rail--dark > div{border-left:none;padding-left:0;border-top:1px solid var(--line-dark);}
  .spec-rail--dark > div:first-child{border-top:none;}
}

@media (max-width:560px){
  .spec-rail{grid-template-columns:1fr;}
  .spec-rail > div{border-left:none;padding-left:0;border-top:1px solid var(--line);}
  .spec-rail > div:first-child{border-top:none;}
}

/* ==========================================================================
   Process steps
   ========================================================================== */

/* Kept numbered and kept as steps, because services.html's "From Request to
   Proof of Delivery" genuinely is a sequence — request, dispatch, transport,
   confirm, in that order. The boxes come off (the number already marks each
   step, so a border re-marks what's marked) and a connecting rule carries the
   eye along the order the numbers are asserting. */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-6);margin-top:var(--s-7);
}
.step{position:relative;padding-top:var(--s-5);border-top:2px solid var(--line);}
.step:first-child{border-top-color:var(--brand-700);}
.step .n{
  position:absolute;top:0;left:0;transform:translateY(-50%);
  width:26px;height:26px;border-radius:var(--r-pill);
  background:var(--ink-900);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:var(--fs-xs);
}
.step h3{font-size:var(--fs-base);margin-top:var(--s-3);}
.step p{color:var(--ink-500);font-size:var(--fs-sm);margin-top:var(--s-2);}

/* Contact's "What Helps Us Move Faster" used this same numbered component,
   but pickup details / destination / contents / temperature is a packing
   list, not a sequence — you gather all four, in any order. Numbering it
   1-2-3-4 asserted an order that does not exist, the same mistake the
   why-grid comment above records. A definition list says what it is. */
.prep-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s-8);margin-top:var(--s-6);
}
@media (max-width:799px){ .prep-list{grid-template-columns:1fr;} }
.prep-list > div{
  display:grid;grid-template-columns:18px 1fr;column-gap:var(--s-3);
  padding:var(--s-4) 0;border-top:1px solid var(--line);
}
.prep-list .ico{grid-column:1;grid-row:1 / span 2;color:var(--brand-700);width:18px;height:18px;margin-top:4px;}
.prep-list dt{grid-column:2;font-weight:700;color:var(--ink-900);font-size:var(--fs-base);}
.prep-list dd{grid-column:2;color:var(--ink-500);font-size:var(--fs-sm);margin-top:2px;}
@media (min-width:800px){ .prep-list > div:nth-child(-n+2){border-top:none;padding-top:0;} }
@media (max-width:799px){ .prep-list > div:first-child{border-top:none;padding-top:0;} }

/* ==========================================================================
   Service areas — dark band
   ========================================================================== */

.areas{background:var(--ink-950);color:#fff;border-block:1px solid var(--line-dark);}
.areas h2,.areas h3{color:#fff;}
.areas .lead{color:var(--on-dark);}
.areas .eyebrow{color:var(--brand-300);}

/* ==========================================================================
   Coverage ledger — one section, two service tiers.
   --------------------------------------------------------------------------
   This replaces two separate sections that were each a list of Georgia place
   names: a metro list and a statewide list. Splitting them by page position
   hid the fact that actually distinguishes them — metro is same-day and STAT
   on a daily route, statewide is scheduled or contracted — so a reader had to
   infer their service level from which heading they happened to be under.

   Merged, the tier becomes the primary axis and is stated outright, with
   region as the secondary grouping. Thirty place names fit in six rows
   because the cities run inline rather than as thirty list items.

   Separators are ::after on every li but the last, NOT ::before on li+li.
   The pseudo-element wraps as part of its own li either way, so ::before
   pushes the dot onto the front of a wrapped line ("· Smyrna · Austell"),
   which reads as a typo; ::after leaves it trailing at the end of the line
   above, where it reads as continuation. Six-city rows wrap at almost every
   width below desktop, so this is the common case, not the edge one.
   The cities stay a real <ul> so a screen reader announces a list rather
   than one run-on string.
   ========================================================================== */

.coverage-ledger{display:flex;flex-direction:column;gap:var(--s-7);margin-top:var(--s-6);}
.cov-tier-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s-2) var(--s-4);padding-bottom:var(--s-3);
  border-bottom:2px solid var(--ink-900);
}
.cov-tier-head h3{font-size:var(--fs-lg);}
.cov-tier-note{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--brand-700);
}
.cov-row{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:var(--s-3) var(--s-5);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line);
}
.cov-row h4{font-size:var(--fs-sm);color:var(--ink-900);}
.cov-cities{display:flex;flex-wrap:wrap;align-items:baseline;}
.cov-cities li{color:var(--ink-500);font-size:var(--fs-sm);}
.cov-cities li:not(:last-child)::after{content:"·";padding:0 var(--s-3);color:var(--line-strong);}
.cov-hq{
  display:inline-block;margin-left:var(--s-1);padding:1px 5px;vertical-align:1px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-700);border:1px solid var(--brand-700);border-radius:var(--r-sm);
}
@media (max-width:720px){ .cov-row{grid-template-columns:1fr;} }

/* ==========================================================================
   Testimonials
   --------------------------------------------------------------------------
   NOTE: this block is pending an owner ruling on whether the quotes can be
   substantiated (see docs/content-decisions.md). It is deliberately kept
   self-contained so deleting the section is a clean removal, not a re-layout.
   ========================================================================== */

.testimonials{background:var(--surface-2);border-block:1px solid var(--line);}

/* Boxed cards, per owner call — the quote itself keeps the larger, darker
   setting (it was previously fs-sm/ink-500, lighter than the body copy around
   it, which made the only words on the page from someone else read as fine
   print). Markup stays figure/blockquote/figcaption regardless of styling. */
.test-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s-6);
}
.test-card{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:var(--s-6);}
.test-card blockquote{color:var(--ink-900);font-size:var(--fs-base);line-height:1.55;letter-spacing:-.008em;text-wrap:pretty;}
.test-card .name{
  display:block;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);
  color:var(--ink-400);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{max-width:820px;margin-top:var(--s-6);}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);margin-bottom:var(--s-3);background:var(--surface);
}
.faq details[open]{border-color:var(--line-strong);}
.faq summary{
  font-weight:700;color:var(--ink-900);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;
  font-size:var(--fs-base);
}
.faq summary::-webkit-details-marker{display:none;}
/* One rotating chevron. The old `+` / `–` pair had different glyph metrics,
   so the marker visibly jumped on toggle. */
.faq summary .ico{color:var(--brand-700);transition:transform .18s ease;}
.faq details[open] summary .ico{transform:rotate(90deg);}
.faq p{color:var(--ink-500);font-size:var(--fs-sm);margin-top:var(--s-3);}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{background:var(--ink-900);color:#fff;text-align:center;border-block:1px solid var(--line-dark);}
.cta-band h2{color:#fff;}
.cta-band p{color:var(--on-dark);max-width:56ch;margin:var(--s-3) auto var(--s-6);font-size:var(--fs-lg);}
.cta-band .actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start;}
.contact-info li{display:flex;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.contact-info .ico{color:var(--brand-700);width:20px;height:20px;margin-top:3px;}
.contact-info .label{color:var(--ink-400);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;}
.contact-info .value{font-weight:700;color:var(--ink-900);}
.contact-info .value a:hover{color:var(--brand-700);}

form.contact-form{
  background:var(--surface-2);border-radius:var(--r-lg);
  padding:var(--s-6);border:1px solid var(--line);
}
.field{margin-bottom:var(--s-4);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;gap:0;} }

/* Input borders use --line-strong: the old #D3DBE3 measured 1.40:1, so form
   fields had no perceivable boundary and failed SC 1.4.11. */
form.contact-form input,
form.contact-form textarea,
form.contact-form select{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);font-family:inherit;font-size:var(--fs-sm);
  background:var(--surface);color:var(--ink-900);
}
form.contact-form input:focus,
form.contact-form textarea:focus,
form.contact-form select:focus{
  border-color:var(--brand-700);outline:none;
  box-shadow:0 0 0 3px rgba(15,76,129,.18);
}
form.contact-form input.invalid,
form.contact-form textarea.invalid,
form.contact-form select.invalid{
  border-color:#C0392B;
}
form.contact-form input.invalid:focus,
form.contact-form textarea.invalid:focus,
form.contact-form select.invalid:focus{
  border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.18);
}
form.contact-form label{
  font-weight:600;font-size:var(--fs-xs);color:var(--ink-900);
  display:block;margin-bottom:var(--s-1);
}
.field-error{
  display:none;color:#8A2C08;font-size:var(--fs-xs);font-weight:600;margin-top:var(--s-1);
}
.field-error.show{display:block;}
form.contact-form .form-note{font-size:var(--fs-xs);color:var(--ink-400);margin-top:var(--s-3);}
form.contact-form button{width:100%;border:none;cursor:pointer;}
form.contact-form button[disabled]{opacity:.6;cursor:progress;}

.form-status{
  display:none;margin-top:var(--s-4);padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;line-height:1.5;
}
.form-status.show{display:block;}
.form-status.ok{background:var(--brand-100);color:var(--brand-700);border:1px solid var(--line-strong);}
/* The failure path is the point: a submit that does not reach HubSpot must
   surface the phone number, never a success message. */
.form-status.err{background:#FDECE5;color:#8A2C08;border:1px solid #E9A98E;}
.form-status a{text-decoration:underline;}

.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media (max-width:900px){ .contact .container{grid-template-columns:1fr;gap:var(--s-6);} }

/* ==========================================================================
   404
   ========================================================================== */

.notfound{text-align:center;padding-block:var(--s-10);}
.notfound .code{font-size:var(--fs-3xl);font-weight:800;color:var(--brand-700);line-height:1;}
.notfound .actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6);}

/* ==========================================================================
   Footer
   ========================================================================== */

footer{background:var(--ink-950);color:var(--on-dark-dim);padding:var(--s-8) 0 var(--s-5);font-size:var(--fs-sm);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6);margin-bottom:var(--s-6);}
.footer-grid h4{color:#fff;margin-bottom:var(--s-3);font-size:var(--fs-sm);letter-spacing:.02em;}
.footer-grid .flogo{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);}
.footer-grid .flogo img{height:42px;width:auto;}
.footer-grid .flogo .fname{display:flex;flex-direction:column;line-height:1.15;}
.footer-grid .flogo .fname .top{font-weight:800;font-size:var(--fs-base);color:#fff;}
.footer-grid .flogo .fname .top span{color:var(--brand-300);}
.footer-grid .flogo .fname .bottom{
  font-size:0.6875rem;letter-spacing:.08em;font-weight:600;
  color:var(--on-dark-dim);text-transform:uppercase;
}
.footer-grid li{padding:var(--s-1) 0;}
.footer-grid a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid var(--line-dark);padding-top:var(--s-5);
  text-align:center;font-size:var(--fs-xs);color:var(--on-dark-dim);
}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   Brand tagline — the four pillars plus the promise line.
   --------------------------------------------------------------------------
   Declared after the footer block on purpose: .footer-grid li already sets a
   4px block padding for the nav column lists, and the pillars are a single
   horizontal row that must not inherit it. Equal specificity, so source order
   is what settles it.

   The pillars stay a real list rather than one pipe-delimited string, so a
   screen reader announces four values instead of a run-on. The separator is
   generated content on li:not(:last-child)::after, so it belongs to the item
   BEFORE it — a wrap point only ever falls between li's, so the pipe travels
   with the line it trails rather than leading the line it would otherwise
   head. Same pattern as .cov-cities' "·" below. (An earlier version of this
   comment had li+li::before instead and claimed the opposite; that put the
   pipe on the next li, which wraps down with it and strands a leading pipe at
   the head of line two — caught at a 320px viewport.) */

.tagline-pillars{
  display:flex;flex-wrap:wrap;align-items:baseline;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-700);
}
.tagline-pillars li{padding:0;}
.tagline-pillars li:not(:last-child)::after{
  content:"|";padding:0 var(--s-3);font-weight:400;color:var(--line-strong);
}

.tagline-promise{
  font-size:var(--fs-lg);font-weight:600;line-height:1.3;
  color:var(--ink-900);letter-spacing:-0.01em;
}

/* Dark-band variant. --brand-300 is the measured 7.8:1 pairing against
   --ink-900; the pipes drop to the 32% white hairline so they separate the
   pillars without competing with them. */
.tagline-pillars--dark{color:var(--brand-300);}
.tagline-pillars--dark li:not(:last-child)::after{color:var(--line-dark-strong);}
.tagline-promise--dark{color:#fff;}

/* Nav lockup: mark and wordmark on one row, pillars on a strip beneath.
   Left-aligned under the whole lockup rather than indented under the wordmark
   — indenting would push the brand block out past 330px and crowd the nav
   links well before the 980px collapse.

   Desktop only. The header comment above records why this chrome was cut to
   44px in the first place: on a 667px phone a taller sticky bar is a real tax,
   and below 980px the nav is a hamburger where the pillars have no room. */
/* flex:0 0 auto — as a shrinkable flex item the block gets squeezed by the
   links and the strip wraps; nowrap then guarantees it is one line or nothing. */
.brand{display:flex;flex-direction:column;gap:var(--s-2);flex:0 0 auto;}
.nav-pillars{font-size:0.75rem;letter-spacing:.07em;flex-wrap:nowrap;}
.nav-pillars li:not(:last-child)::after{padding:0 var(--s-2);}

/* The brand block is wider than the old square-mark lockup: the mark is
   landscape, and the pillar strip is wider still. Measured at 1000px the old
   header had ~17px of slack, so both additions have to be bought back or
   "Service Areas" wraps to a second line. Below 1140px the strip is dropped and
   the links give up 8px of gutter; below 980px the nav is a hamburger anyway. */
.navlinks a{white-space:nowrap;}
@media (max-width:1140px){
  .navlinks{gap:var(--s-5);}
  .nav-pillars{display:none;}
}

/* Homepage hero: the promise sits between the h1 and the body copy, one step
   down the scale from the headline so the two read as a descent rather than
   competing statements. */
.hero p.tagline-promise{font-size:var(--fs-xl);margin-top:var(--s-3);max-width:none;}

/* Footer lockup: sits directly under the logo, above the description. */
.footer-grid .tagline-pillars{margin-bottom:var(--s-2);}
.footer-grid p.tagline-promise{font-size:var(--fs-base);margin-bottom:var(--s-4);}

/* ==========================================================================
   Motion + print
   ========================================================================== */

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

@media print{
  header.site,.cta-band,form.contact-form,.nav-toggle{display:none;}
  body{color:#000;background:#fff;}
  .hero,.page-hero,.areas,footer{background:#fff;color:#000;}
  .hero h1,.page-hero h1,.areas h2{color:#000;}
  .tagline-pillars,.tagline-pillars--dark,
  .tagline-promise,.tagline-promise--dark{color:#000;}
  .tagline-pillars li:not(:last-child)::after,
  .tagline-pillars--dark li:not(:last-child)::after{color:#666;}
}