/* ---------------------------------------------------------------
   Bravo 24 Transport — shared stylesheet
   Brand system: DESIGN-bravo-24-transport.md (gold Forward-Chevron).
   Palette, type and the 0px radius are fixed by the identity.
   Do not introduce colour outside the gold ramp + ink neutrals.
   --------------------------------------------------------------- */
/* ---- THEME TOKENS ----
   THE BANDS ARE PALE IN LIGHT MODE AND DARK IN DARK MODE. That inversion is
   the whole point of the light theme: --ink-surface paints the header, hero,
   ink sections, contact card, haul band and footer, so whatever it holds is
   what most of the page looks like. Light ran a mid-slate #3D434C there until
   2026-08-29 and the result read as a greyed-down dark theme rather than a
   light one — neither dark enough to be dramatic nor light enough to be light.
   Light now paints those bands #E9ECF0 on a white floor and flips their text
   to ink. Dark is unchanged and pinned (NOTES.md deviation 6).

   Because every one of these is THEMED, BOTH dark blocks must pin the whole
   set explicitly. They inherit from :root otherwise, and editing light would
   silently drag dark along with it.

   Token roles:
   - --ink       brand ink, the gold's partner.
   - --text      primary text on the page floor.
   - --ink-surface  the bands (header, hero, footer, contact card). PALE in
                    light, dark in dark. In dark mode these sit ABOVE the page
                    floor, not below it.
   - --on-ink    text ON a band. It follows the band: white in dark, ink in
                 light. It is NOT "white" — see --on-ink-solid.
   - --ink-solid / --on-ink-solid / --ink-solid-hover
                 the .btn-ink fill, which is a solid dark chip on the page
                 floor in BOTH themes. Its text is always white, so it cannot
                 ride --on-ink (which inverts) and needs its own trio.
   - --gold-ink  gold letterforms on the page floor. The ramp's --gold-deep is
                 a FILL colour: it cannot carry text on --canvas.
   - --gold-band / --gold-band-hi / --gold-band-lg
                 gold letterforms ON a band. In dark these are just the ramp
                 (-hi = --gold-light, the other two = --gold-core) so nothing
                 moves. In light the ramp is far too pale against #E9ECF0, so
                 they darken to a bronze: -band and -hi carry small text at
                 4.9:1, -lg carries display text only (hero <em>, haul
                 caption) at 3.5:1, which clears AA large. Gold used as a FILL
                 or a decorative graphic on a band keeps the ramp — the train,
                 ship, chevrons and wireframes are all aria-hidden.
   - --t3d-face/-cab/-wheel  RGB triplets (not colours) for the CSS-3D fleet.
                 Gold in dark; ink in light, because gold wireframes vanish on
                 a pale band exactly as they do on the gold CTA band.
   - --muted     is a BAND token in practice — every consumer (.ftr, .ftr a,
                 .theme-toggle, .cc-sub, .fleet-note, .cred-*, .on-ink
                 .descriptor/.field-label) renders on --ink-surface. It is
                 tuned against that surface, NOT against --canvas. */
:root{
  /* themed: LIGHT — a genuinely light theme, not a washed-out dark one.
     The 2026-07-24 light palette softened the ramp AND the ink together, which
     cost contrast at both ends. This one restores the canonical brand ramp
     (DESIGN-bravo-24-transport.md) and pushes the neutrals apart instead. */
  --gold-light:#F3C64B;
  --gold-core:#E0A626;
  --gold-deep:#B87D14;   /* fills only — see --gold-ink / --gold-band */
  --gold-ink:#8A5D0A;    /* 5.8:1 on --surface — carries the .req asterisk */
  --gold-band-hi:#8A5D0A;  /* 4.9:1 on --ink-surface */
  --gold-band:#8A5D0A;     /* 4.9:1 on --ink-surface */
  --gold-band-lg:#A5720F;  /* 3.5:1 — display text on a band only, AA large */
  --ink:#171A1F;
  --on-gold:#171A1F;     /* never white on gold — letterforms on gold are ink */
  --on-ink:#171A1F;      /* the bands are pale here, so their text is ink */
  --on-ink-solid:#FFFFFF;
  --ink-solid:#171A1F;
  --ink-solid-hover:#2D333C;

  --text:#171A1F;
  --ink-surface:#E9ECF0;
  --ink-soft:#EFF1F4;
  --ink-elevated:#DCE0E6;
  --band-text:#434952;     /* body copy on the bands — 7.7:1 on --ink-surface */

  --canvas:#FFFFFF;
  --surface:#FFFFFF;

  --hairline:#E4E7EA;
  --hairline-dark:#C7CDD4;

  /* Both body tokens now sit on a pure-white floor, so they were re-darkened
     to buy back the contrast the old slate palette was spending: --body is
     6.6:1 (was 4.73:1, a hair over the floor) and --body-strong 10.0:1. */
  --body-strong:#3E434A;
  --body:#585E66;
  --muted:#535A63;         /* 5.9:1 on --ink-surface — band token, see above */

  --t3d-face:23,26,31;     /* RGB triplets, not colours — see token roles */
  --t3d-cab:23,26,31;
  --t3d-wheel:23,26,31;

  --map-land:#EDEFF2;
  --map-stroke:#C6CBD0;
  --alert-bg:#FDF3E0;
  --alert-fg:#5A3C05;

  --gutter:clamp(20px,5vw,64px);
  --shell:1240px;

  --z-base:0;
  --z-raised:10;
  --z-sticky:100;
  --z-menu:150;
  --z-overlay:200;

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

/* themed: DARK. The page floor (--canvas) is set DARKER than the bands
   (--ink-surface) so the header, hero and footer lift off the floor instead
   of dissolving into it. */
:root[data-theme="dark"]{
  /* pinned: these are themed now, so dark must restate them or it inherits
     the light ramp from :root. Values are dark's originals, unchanged. */
  --gold-light:#F3C64B;
  --gold-core:#E0A626;
  --gold-deep:#B87D14;
  --gold-ink:#B87D14;
  --gold-band-hi:#F3C64B;
  --gold-band:#E0A626;
  --gold-band-lg:#E0A626;
  --ink:#14161A;
  --on-gold:#14161A;
  --on-ink:#FFFFFF;
  --on-ink-solid:#FFFFFF;
  --ink-solid:#14161A;
  --ink-solid-hover:#22262B;

  --text:#F2F3F4;
  --ink-surface:#181B1F;
  --ink-soft:#1C1F24;
  --ink-elevated:#22262B;
  --band-text:#C9CDD2;

  --canvas:#0F1114;
  --surface:#1C1F24;

  --hairline:#2E3236;
  --hairline-dark:#3A4046;

  --body-strong:#C9CDD2;
  --body:#9AA0A6;
  --muted:#8A9098;

  --t3d-face:224,166,38;
  --t3d-cab:214,160,47;
  --t3d-wheel:184,125,20;

  --map-land:#252A2F;
  --map-stroke:#3A4046;
  --alert-bg:#2A2113;
  --alert-fg:#F3C64B;
}

/* JS-off fallback: with no data-theme attribute, honour the OS preference. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    /* must stay token-for-token identical to :root[data-theme="dark"] above,
       including the pins. */
    --gold-light:#F3C64B;
    --gold-core:#E0A626;
    --gold-deep:#B87D14;
    --gold-ink:#B87D14;
    --gold-band-hi:#F3C64B;
    --gold-band:#E0A626;
    --gold-band-lg:#E0A626;
    --ink:#14161A;
    --on-gold:#14161A;
    --on-ink:#FFFFFF;
    --on-ink-solid:#FFFFFF;
    --ink-solid:#14161A;
    --ink-solid-hover:#22262B;
    --text:#F2F3F4;
    --ink-surface:#181B1F;
    --ink-soft:#1C1F24;
    --ink-elevated:#22262B;
    --band-text:#C9CDD2;
    --canvas:#0F1114;
    --surface:#1C1F24;
    --hairline:#2E3236;
    --hairline-dark:#3A4046;
    --body-strong:#C9CDD2;
    --body:#9AA0A6;
    --muted:#8A9098;
    --t3d-face:224,166,38;
    --t3d-cab:214,160,47;
    --t3d-wheel:184,125,20;

    --map-land:#252A2F;
    --map-stroke:#3A4046;
    --alert-bg:#2A2113;
    --alert-fg:#F3C64B;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--canvas);
  color:var(--body-strong);
  font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  font-weight:500;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* The sharp edge IS the brand. Nothing rounds. */
button,input,select,textarea{border-radius:0;font:inherit;color:inherit}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-overlay);
  background:var(--gold-core);color:var(--on-gold);padding:12px 18px;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

/* Visible to screen readers, not to sighted users. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============ TYPE ============ */
h1,h2,h3{margin:0;text-wrap:balance}
.wordmark{
  font-family:Archivo,"Arial Black",sans-serif;
  font-weight:900;letter-spacing:-.02em;line-height:.94;text-transform:uppercase;
}
.wordmark .num{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-weight:700;letter-spacing:.02em;color:var(--gold-deep);
}
.on-ink .wordmark .num{color:var(--gold-band-hi)}
.descriptor{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--body);
}
.on-ink .descriptor{color:var(--muted)}

.h2{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2rem,4.4vw,3.6rem);color:var(--text);
}
.on-ink .h2{color:var(--on-ink)}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:62ch;text-wrap:pretty}

/* Field labels: the waybill device. These are genuine data labels on the
   manifest, coverage and quote blocks — not decorative eyebrows stacked
   above every marketing heading. */
.field-label{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--body-strong);
}
.on-ink .field-label{color:var(--muted)}

.chev{display:block;flex:none}

/* The lockup chevron is authored inline with dark's ramp. Light runs the
   softer ramp, so the three stops are re-driven from tokens. Scoped to the
   header lockup and footer only — the loose single-polygon .chev ornaments
   in body copy carry a deliberate hand-varied ramp and must not be flattened.
   Ramp stays deep -> light left-to-right: these sit on ink in both themes,
   which is the reversed lockup per the design file. */
.lockup .chev polygon:nth-of-type(1),.ftr .chev polygon:nth-of-type(1){fill:var(--gold-deep)}
.lockup .chev polygon:nth-of-type(2),.ftr .chev polygon:nth-of-type(2){fill:var(--gold-core)}
.lockup .chev polygon:nth-of-type(3),.ftr .chev polygon:nth-of-type(3){fill:var(--gold-light)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 22px;
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;
  text-decoration:none;border:0;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn-gold{background:var(--gold-core);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-light)}
.btn-ghost{background:transparent;color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--hairline-dark)}
.btn-ghost:hover{background:var(--ink-elevated)}
.btn-ink{background:var(--ink-solid);color:var(--on-ink-solid)}
.btn-ink:hover{background:var(--ink-solid-hover)}
.btn:hover .btn-chev{transform:translateX(4px)}
.btn-chev{transition:transform .25s var(--ease)}

.btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold-core);outline-offset:2px;
}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--ink-surface);border-bottom:1px solid var(--hairline-dark);
}
.hdr-in{display:flex;align-items:center;gap:24px;min-height:76px}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.lockup .wordmark{font-size:1.32rem;color:var(--on-ink)}
.lockup .descriptor{font-size:.55rem;letter-spacing:.36em;margin-top:3px;display:block}

.hdr-nav{display:flex;gap:28px;margin-left:auto;list-style:none;margin-block:0;padding:0}
.hdr-nav a{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--band-text);text-decoration:none;transition:color .2s var(--ease);
  display:block;padding-block:6px;
}
.hdr-nav a:hover{color:var(--gold-band)}
.hdr-nav a[aria-current="page"]{color:var(--gold-band);box-shadow:inset 0 -2px 0 var(--gold-band)}

/* Hamburger. Hidden by default and only revealed at the mobile breakpoint,
   so with JS off on desktop nothing changes. See .no-js rule below for the
   JS-disabled mobile case. */
.nav-toggle{
  display:none;margin-left:auto;
  background:transparent;border:1px solid var(--hairline-dark);
  color:var(--on-ink);cursor:pointer;
  padding:10px 12px;line-height:0;
}
.nav-toggle:hover{background:var(--ink-elevated)}
.nav-toggle rect{fill:currentColor;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] rect:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] rect:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] rect:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-toggle svg{overflow:visible}
.nav-toggle rect{transform-origin:center}

/* ============ HERO ============ */
.hero{background:var(--ink-surface);color:var(--on-ink);position:relative;overflow:hidden}
.hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-block:clamp(56px,8vw,104px);
}

/* ---- Rotating 3D box-truck (hero background watermark) ----
   A cube truck is two rectangular prisms, which is exactly what the brand is
   built from — sharp-edged boxes, no curves. Built in pure CSS 3D: the faces
   are static in a preserve-3d space and only the parent .t3d transform is
   animated, so the whole thing is one GPU-composited rotation regardless of
   face count. Translucent gold reads as a wireframe/glass form that content
   sits cleanly on top of. Faces are generated by js/site.js; with JS off the
   container is simply empty.

   .bg3d is the reusable version, dropped into any section as a background. Its
   host section needs position:relative; the section's content wrapper is
   lifted to z-index:1 so it stays above the truck. The container clips its own
   overflow, so a section does not need overflow:hidden of its own. */
.bg3d{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;pointer-events:none;opacity:.4;
}
.bg3d--r{justify-content:flex-end;padding-right:5vw}   /* push off busy centre content */
.bg3d--l{justify-content:flex-start;padding-left:5vw}
.bg3d--soft{opacity:.26}                                /* lighter surfaces need less */
.bg3d--faint{opacity:.14}                               /* behind dense footer text */
.t3d{
  position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-16deg) rotateY(30deg);   /* static pose for reduced motion / no anim */
}
.t3d .f{
  position:absolute;left:50%;top:50%;box-sizing:border-box;
  border:2px solid rgba(var(--t3d-face),.5);
  background:rgba(var(--t3d-face),.08);
}
.t3d .cab{border-color:rgba(var(--t3d-cab),.6);background:rgba(var(--t3d-cab),.13)}
/* In DARK the wheels are a deeper gold, not ink — ink discs vanish on the
   dark sections. In light the whole vehicle is ink; see the t3d tokens. */
.t3d .wheel{border-color:rgba(var(--t3d-cab),.75);background:rgba(var(--t3d-wheel),.4)}
/* On the gold CTA band, gold lines disappear, so that one truck uses ink
   (brand rule: ink on gold). */
.bg3d--ink .f{border-color:rgba(20,22,26,.42);background:rgba(20,22,26,.05)}
.bg3d--ink .cab{border-color:rgba(20,22,26,.52);background:rgba(20,22,26,.08)}
.bg3d--ink .wheel{border-color:rgba(20,22,26,.6);background:rgba(20,22,26,.3)}

@media (prefers-reduced-motion:no-preference){
  .t3d{animation:t3dspin 20s linear infinite}
}
@keyframes t3dspin{
  from{transform:rotateX(-16deg) rotateY(0)}
  to{transform:rotateX(-16deg) rotateY(360deg)}
}
/* Below the stacking breakpoint every section is full-width single-column;
   a watermark behind text is just noise there, so drop them all. */
@media (max-width:1040px){ .bg3d{display:none} }

/* Lift each host section's content above its background truck. */
.sec>.shell,.cta-band>.shell,.ftr>.shell{position:relative;z-index:1}
.sec,.cta-band,.ftr{position:relative}

/* ---- Rail critters: a steam train rides the header's baseline, a ship sails
   the foot of the footer. Both are injected by js/site.js into every page's
   header and footer, live inside an overflow-hidden rail so they clip cleanly
   at the edges, and are aria-hidden / non-interactive. Only ONE transform per
   critter is animated (the whole SVG slides), so they're GPU-cheap. ---- */
.rail{position:absolute;left:0;right:0;overflow:hidden;pointer-events:none}
.rail svg{position:absolute;will-change:transform}   /* width stays auto (default) so the train/
   ship size by height; the sea-wave sets its own width below without a specificity fight */

/* train on the header's 1px bottom border. The rail is taller than the
   train to give the steam room to rise; it still stops ~30px under the nav
   links, and the puffs are near-transparent by the time they get up there. */
.rail-top{bottom:-1px;height:30px;z-index:6}
.train{bottom:0;height:22px}
.train .body{fill:var(--gold-core)}
.train .cab{fill:var(--gold-deep)}
.train .win{fill:var(--ink-surface)}
.train .trim{fill:var(--gold-light)}
.train .wheel{fill:none;stroke:var(--gold-deep);stroke-width:2.4}

/* ship along the bottom of the footer */
.rail-sea{bottom:0;height:64px;z-index:0}
.ship{bottom:12px;height:46px}
.ship .hull{fill:var(--gold-deep)}
.ship .deck{fill:var(--gold-core)}
.ship .top{fill:var(--gold-light)}
.ship .win{fill:var(--ink-surface)}
.ship .funnel{fill:var(--gold-deep)}
/* Seat the hull on the mean waterline even without JS (reduced motion, or a
   failed script): the translateY sinks the silhouette so the wave sheet cuts
   the hull. With JS running, js/site.js overrides this inline every frame
   with real heave + pitch sampled from the wave surface under the hull. */
.ship-body{transform-box:fill-box;transform-origin:50% 90%;transform:translateY(14px)}

/* Ground-frame smoke overlay — js/site.js spawns puffs here at the vent's
   current position, so the plume hangs in the air behind the vehicle instead
   of travelling with it. The overlay spans the rail; no viewBox, so one SVG
   unit = one CSS px and the JS can position puffs in rail coordinates. */
.rail-smoke{left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible}
.rail-smoke circle{fill:var(--band-text);opacity:0}
/* Full-width waterline. 200% wide with two identical wave halves so drifting it
   by exactly -50% loops seamlessly and always covers the whole screen. max-width
   is cleared because the global img/svg reset caps replaced elements at 100%. */
.sea-wave{bottom:0;left:0;height:22px;width:200%;max-width:none;opacity:.5}
.sea-wave path{fill:none;stroke:var(--gold-deep);stroke-width:2}

@media (prefers-reduced-motion:no-preference){
  .train{animation:train-run 19s linear infinite}
  .ship{animation:ship-sail 46s linear infinite}
  .sea-wave{animation:wave-drift 9s linear infinite}
}
@keyframes train-run{
  from{transform:translateX(-150px)}
  to{transform:translateX(calc(100vw + 30px))}
}
@keyframes ship-sail{           /* sails right to left, like the header train's mirror */
  from{transform:translateX(calc(100vw + 40px))}
  to{transform:translateX(-320px)}
}
@keyframes wave-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Both are edge decorations; on the stacking breakpoint the header can expand
   for the mobile menu (which would drop the train below it), so hide them. */
@media (max-width:1040px){ .rail{display:none} }
.hero h1{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(2.6rem,6.2vw,5.2rem);
  color:var(--on-ink);margin-bottom:24px;
}
.hero h1 em{font-style:normal;color:var(--gold-band-lg)}
.hero .lede{color:var(--band-text);line-height:1.65;margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}

/* Inner-page hero: shorter, no photo */
.hero-sm .hero-in{padding-block:clamp(44px,6vw,72px);grid-template-columns:1fr;align-items:start}
.hero-sm h1{font-size:clamp(2.2rem,5.2vw,4rem);margin-bottom:18px}
.hero-sm .lede{margin-bottom:0}

/* route strip */
.route{border-top:1px solid var(--hairline-dark);padding-top:20px}
.route-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.route-node{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink);
}

/* ============ PHOTOGRAPHY ============
   The ratio is carried by the figure, not the image, so a slot reserves its
   exact space before the file loads and a later photo swap cannot shift
   layout. Every <img> also carries width/height for the same reason. */
.shot{
  position:relative;margin:0;overflow:hidden;
  background:var(--ink-elevated);border:1px solid var(--hairline-dark);
}
.shot img{display:block;width:100%;height:100%;object-fit:cover}

/* Headlight blink on the hero Hino. Two warm glows sit over the truck's
   headlights (positions are % of the 1200x900 frame) and flash alternately —
   left lit while right is dark, then swapped — like a wig-wag. screen blend
   adds light onto the already-lit lamps in the photo rather than pasting a
   flat disc over them. Purely decorative: aria-hidden, pointer-events off,
   and the whole thing holds steady under reduced motion. */
.beam{
  position:absolute;width:19%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  mix-blend-mode:screen;opacity:.12;
  background:radial-gradient(circle,
    rgba(255,236,190,.95) 0%, rgba(255,198,92,.7) 32%,
    rgba(255,176,64,.35) 55%, transparent 72%);
}
.beam-l{left:28%;top:67.5%}
.beam-r{left:75%;top:68%}
@media (prefers-reduced-motion:no-preference){
  .beam-l{animation:beam-blink 1.1s steps(1,end) infinite}
  .beam-r{animation:beam-blink 1.1s steps(1,end) infinite;animation-delay:.55s}
}
@keyframes beam-blink{
  0%,50%{opacity:.9}
  50.01%,100%{opacity:.1}
}

.shot-hero{aspect-ratio:4/3}
.shot-wide{aspect-ratio:16/9}
.shot-sq{aspect-ratio:1/1}

/* ============ SECTIONS ============ */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec-tight{padding-block:clamp(48px,6vw,88px)}
.sec-ink{background:var(--ink-surface);color:var(--band-text)}
.sec-surface{background:var(--surface);border-top:1px solid var(--hairline)}
.sec-head{max-width:62ch;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lede{margin-top:18px;color:var(--body-strong)}
.on-ink .sec-head .lede{color:var(--band-text)}

/* ============ SERVICES MANIFEST (not a card grid) ============ */
.manifest{border-top:2px solid var(--text)}
.svc{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(16px,3vw,40px);align-items:baseline;
  padding-block:28px;border-bottom:1px solid var(--hairline);
}
.svc:hover{background:var(--surface)}
.svc-mark{padding-top:8px}
.svc-name{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(1.25rem,2.2vw,1.7rem);color:var(--text);
}
.svc-desc{margin:8px 0 0;max-width:58ch;text-wrap:pretty}

/* Gold-deep TEXT on canvas is 3.22:1 and fails. Inverted into a chip,
   ink-on-gold is 8.46:1 — and it matches the brand sheet's palette-swatch
   pattern (letterforms on gold are ALWAYS ink). Reads as a spec stamp. */
.svc-tag{
  align-self:center;
  background:var(--gold-core);color:var(--on-gold);
  padding:4px 9px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}

/* fleet strip */
.fleet{
  margin-top:clamp(40px,5vw,64px);
  background:var(--ink-surface);color:var(--on-ink);
  padding:clamp(28px,4vw,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;
}
.fleet-item .field-label{color:var(--gold-band);display:block;margin-bottom:8px}
.fleet-val{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:.02em;
  text-transform:uppercase;color:var(--on-ink);line-height:1.1;
}
.fleet-note{margin:6px 0 0;font-size:.9rem;color:var(--muted)}

/* ============ HOME TEASERS ============ */
/* Column count is explicit, NOT auto-fit. The 1px gaps are the container's
   own background showing through, so any half-filled row paints a bare
   hairline block where the missing cards would be. auto-fit put 4 teasers
   into 3 columns between ~960 and 1240px and left a 615px grey slab. These
   counts divide 4 evenly at every width. */
.teasers{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
@media (min-width:600px){ .teasers{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .teasers{grid-template-columns:repeat(4,1fr)} }
.teaser{background:var(--canvas);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:background .25s var(--ease)}
.teaser:hover{background:var(--surface)}
.teaser h3{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;
  font-size:1.25rem;color:var(--text);
}
.teaser p{margin:0;font-size:.95rem;max-width:36ch}
.teaser-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
}
.teaser:hover .teaser-go .chev{transform:translateX(4px)}
.teaser-go .chev{transition:transform .25s var(--ease)}

/* ============ WHY / CREDENTIALS ============ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.creds{display:grid;border-top:1px solid var(--hairline-dark)}
.cred{display:flex;gap:16px;align-items:flex-start;padding-block:20px;border-bottom:1px solid var(--hairline-dark)}
/* These are <h2> on /about-us/ (correct heading order under the page h1) and
   would be <h3> elsewhere. Target both so promoting the level never silently
   drops the styling. */
.cred-body h2,.cred-body h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--on-ink);margin-bottom:2px;
}
.cred-body p{margin:0;font-size:.95rem;color:var(--muted);max-width:44ch}
/* The CVOR number and insurer name are deliberately not published — see NOTES.md.
   This line tells a shipper where to get the paperwork instead. */
.cred-note{
  margin:18px 0 0;font-size:.9rem;color:var(--muted);max-width:52ch;
}
.cred-note a{color:var(--gold-band)}
.reasons{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.reasons li{display:flex;gap:14px;align-items:flex-start;color:var(--band-text)}
.reasons strong{color:var(--on-ink)}
.story p{max-width:66ch;text-wrap:pretty}

/* ============ COVERAGE ============ */
.cov-wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(32px,5vw,64px);align-items:center}
.map-frame{position:relative;background:var(--surface);border:1px solid var(--hairline);padding:clamp(16px,3vw,32px)}
.map-note{border-top:1px solid var(--hairline);padding-top:20px;margin:4px 0 0;color:var(--body-strong)}

/* ---- Canada map ----
   Geometry is Natural Earth 1:110m (public domain), projected to a Lambert
   conformal conic with standard parallels 49N/77N — the standard projection
   for Canada, which is what gives the north its curve. City pins are run
   through the SAME projection, so they sit where they actually are rather
   than being placed by eye. */
.map-land{fill:var(--map-land);stroke:var(--map-stroke);stroke-width:1.6;stroke-linejoin:round}
.map-lane path{fill:none;stroke:var(--gold-core);stroke-width:3.4;stroke-linecap:round}
.map-pin circle{fill:var(--text)}
.map-hub-ring{fill:none;stroke:var(--gold-core);stroke-width:3}
.map-hub{fill:var(--gold-ink)}
.map-label text{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:22px;letter-spacing:1.2px;fill:var(--text);
}

/* Lanes draw themselves on when the map scrolls into view, staggered west to
   east. Each path carries pathLength="1" in the markup, so a single dash
   value works for every lane regardless of its real length. */
.map-lane path{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .js .map-frame .map-lane path{stroke-dashoffset:1}
  .js .map-frame.in .map-lane path{
    animation:lane-draw .9s var(--ease) forwards;
    animation-delay:calc(var(--i) * .13s + .15s);
  }
  .js .map-frame .map-pin circle,
  .js .map-frame .map-hub,
  .js .map-frame .map-hub-ring{opacity:0}
  .js .map-frame.in .map-pin circle,
  .js .map-frame.in .map-hub,
  .js .map-frame.in .map-hub-ring{animation:pin-in .4s var(--ease) .7s forwards}
}
@keyframes lane-draw{to{stroke-dashoffset:0}}
@keyframes pin-in{from{opacity:0}to{opacity:1}}

/* ============ QUOTE / WAYBILL ============ */
.quote-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:start}
.waybill{background:var(--surface);border:1px solid var(--hairline);padding:clamp(24px,4vw,40px)}
.wb-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--text);padding-bottom:14px;margin-bottom:24px;
}
.wb-title{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.15rem;color:var(--text);
}
.wb-alert{margin:0 0 24px;padding:14px 16px;font-weight:600;font-size:.95rem}
/* Success is an ink chip with a gold edge — the edge keeps it visible on the
   dark form surface in dark mode, where an ink-on-ink border would vanish. */
.wb-ok{background:var(--ink-surface);color:var(--on-ink);border:1px solid var(--gold-deep)}
.wb-error{background:var(--alert-bg);color:var(--alert-fg);border:1px solid var(--gold-deep)}
.wb-error a{color:var(--alert-fg);font-weight:700}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.fcell{display:flex;flex-direction:column;gap:6px}
.fcell.full{grid-column:1/-1}
.fcell label{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body-strong);
}
.req{color:var(--gold-ink)}
.fcell input,.fcell select,.fcell textarea{
  border:1px solid var(--hairline);background:var(--canvas);
  padding:12px 14px;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:500;font-size:1rem;
  color:var(--text);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
/* Placeholders must clear 4.5:1 too. --body-strong reads lighter than an
   entered value (--text) in both themes, so a placeholder is never mistaken
   for a filled field. */
.fcell input::placeholder,.fcell textarea::placeholder{color:var(--body-strong);opacity:1}
/* <option> children inherit --text but keep the UA's own popup background,
   which is white on Windows — so in dark mode the open dropdown rendered
   near-white text on near-white. Both sides are pinned to tokens. */
.fcell select option{background:var(--surface);color:var(--text)}
.fcell input:focus,.fcell select:focus,.fcell textarea:focus{background:var(--surface);border-color:var(--text)}
.fcell textarea{resize:vertical;min-height:110px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8px}
.wb-note{font-size:.85rem;color:var(--body);max-width:38ch}

.contact-card{background:var(--ink-surface);color:var(--on-ink);padding:clamp(24px,4vw,36px)}
.cc-row{padding-block:18px;border-bottom:1px solid var(--hairline-dark)}
.cc-row:last-child{border-bottom:0}
.cc-row .field-label{display:block;margin-bottom:6px}
.cc-val{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.3rem;letter-spacing:.02em;color:var(--on-ink);
  text-decoration:none;display:block;
}
a.cc-val:hover{color:var(--gold-band)}
.cc-sub{font-size:.88rem;color:var(--muted);margin-top:6px;text-wrap:pretty}

/* ============ CTA BAND ============ */
.cta-band{background:var(--gold-core);color:var(--on-gold);padding-block:clamp(44px,6vw,72px)}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta-band h2{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--on-gold);max-width:20ch;
}
.cta-band p{margin:10px 0 0;max-width:44ch;color:var(--on-gold);font-weight:600}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ============ FOOTER ============ */
.ftr{background:var(--ink-surface);color:var(--muted);border-top:1px solid var(--hairline-dark);
  padding-bottom:66px}   /* clears a lane at the foot for the ship to sail below the text */
.ftr-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-block:clamp(48px,6vw,72px)}
.ftr .wordmark{font-size:1.5rem;color:var(--on-ink)}
.ftr .descriptor{font-size:.58rem;letter-spacing:.38em;margin-top:4px;display:block}
.ftr h4{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-band);margin:0 0 14px;
}
.ftr address{font-style:normal;line-height:1.8}
.ftr a{color:var(--muted);text-decoration:none}
.ftr a:hover{color:var(--gold-band)}
.ftr-bot{
  border-top:1px solid var(--hairline-dark);padding-block:24px;
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;font-size:.85rem;
}
.ftr-legal{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center}

/* ============ THEME TOGGLE ============
   Hidden until JS arms it, so there is never a dead button. With JS off the
   page still themes from the OS preference; only the manual override is
   unavailable, which is the honest state. */
/* During a theme flip, kill every transition so the switch is instant rather
   than a page-wide colour smear. JS adds this class for one frame. */
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}

.theme-toggle{display:none}
.js .theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--hairline-dark);
  color:var(--muted);cursor:pointer;
  padding:8px 12px;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.js .theme-toggle:hover{color:var(--gold-band);border-color:var(--gold-band)}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
/* Show the sun in dark mode (offering light) and the moon in light mode. */
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme]) .theme-toggle .i-moon{display:none}
}

/* A solid ink button on the dark page floor needs an edge to be visible. */
:root[data-theme="dark"] .btn-ink{box-shadow:inset 0 0 0 1px var(--hairline-dark)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .btn-ink{box-shadow:inset 0 0 0 1px var(--hairline-dark)}
}

/* ============ PROSE (privacy policy) ============ */
.prose{padding-block:clamp(48px,7vw,88px)}
.prose-shell{width:100%;max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}
.prose h1{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2rem,5vw,3.2rem);color:var(--text);margin:0 0 12px;
}
.prose .updated{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--body-strong);
  margin:0 0 40px;
}
.prose h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);margin:44px 0 12px;padding-top:20px;border-top:1px solid var(--hairline);
}
.prose p,.prose li{max-width:70ch;text-wrap:pretty;color:var(--body-strong)}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-core)}
.prose a:hover{color:var(--gold-ink)}
.callout{background:var(--surface);border:1px solid var(--hairline);padding:20px 22px;margin:32px 0}
.callout p{margin:0}
.prose-back{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-core);text-decoration:none;
}
.prose-back:hover{color:var(--gold-light)}

/* ============ MOTION ============
   Two mechanisms, both fail safe (content visible if neither runs):

   .rise — first-load entrance for above-the-fold content. Pure CSS, NOT
   gated on a JS class, and it animates TRANSFORM ONLY. If the keyframe is
   throttled, skipped or never runs (crawler, headless render, frozen tab),
   the content still sits at full opacity. A blank hero is not a failure
   mode we accept.

   .rv — scroll reveals for below-the-fold content. Armed by the .js class,
   so with JS off it simply renders visible.

   Both travel on X, entering from the left and settling rightward, so motion
   runs WITH the forward chevron rather than across it. The mark points right;
   content used to rise, which fought it. */
.rise{opacity:1;transform:none}
.rv{opacity:1;transform:none}

@keyframes rise{from{transform:translateX(-24px)}to{transform:none}}

/* An element mid-travel is wider than its settled box, so an unclipped
   section produces a horizontal scrollbar on narrow screens. clip (not
   hidden) contains the overflow without creating a scroll container, so
   sticky positioning and scroll-into-view keep working. */
.sec,.hero,.prose,.teasers{overflow-x:clip}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .8s var(--ease) both}
  .rise:nth-child(1){animation-delay:.05s}
  .rise:nth-child(2){animation-delay:.15s}
  .rise:nth-child(3){animation-delay:.25s}
  .rise:nth-child(4){animation-delay:.35s}

  .js .rv{opacity:0;transform:translateX(-20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}

/* ============ LANE BAND (driving rig) ============
   Decorative full-bleed band. The rig drives in from off the left edge and
   settles centred — a long horizontal travel that reads as crossing, without
   leaving an empty band once it has passed.

   No JS of its own: the band carries .rv, so the existing IntersectionObserver
   adds .in when it scrolls into view, and the drive keys off that. The same
   observer already adds .in immediately under reduced motion, so the reduced
   case needs no special handling — the rig simply sits at rest.

   With JS off the .js class is absent, the start offset never applies, and
   the rig renders centred and fully visible. */
.haul{
  position:relative;overflow:hidden;
  background:var(--ink-surface);
  border-block:1px solid var(--hairline-dark);
  min-height:clamp(420px,88vh,820px);
  display:flex;align-items:stretch;
  --p:.5;      /* scroll progress 0..1, written by js/site.js */
}
.haul-scene{position:relative;flex:1;overflow:hidden}

/* Road: a dashed centre line that slides under the rig. The dash offset is
   driven by --p too, so the road appears to move rather than sit still while
   the truck drives over the top of it. Sits at the wheels' contact line, not
   floating above it — the rig's bottom edge is at 11% and its wheels touch
   8/240 of the way up its own box. */
.haul-road{
  position:absolute;left:0;right:0;bottom:12.4%;height:6px;
  background:repeating-linear-gradient(to right,
    var(--gold-deep) 0 58px, transparent 58px 118px);
  background-position-x:calc(var(--p) * -1400px);
  opacity:.5;
}

/* Tagline sitting under the road. Static — it does not move with the rig; it
   is the line the whole scene resolves to once the truck has passed. */
.haul-caption{
  position:absolute;left:0;right:0;bottom:4%;margin:0;
  text-align:center;
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  font-size:clamp(1.4rem,4vw,3rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--gold-band-lg);
}

/* Sized off the scene's HEIGHT, not the viewport width. The rig is a wide,
   fixed-aspect object; sizing it by width meant a short window cropped the
   trailer roof and buried the wheels. Height-first, width follows the aspect,
   so it can never outgrow the band it drives through. */
.haul-rig{
  position:absolute;left:0;bottom:11%;
  height:clamp(110px,52%,400px);
  transform:translateX(calc(var(--p) * (100vw + 100%) - 100%));
  will-change:transform;
}
.haul-truck{display:block;height:100%;width:auto;overflow:visible}

.haul-trailer{fill:var(--gold-core)}
.haul-cab{fill:var(--gold-deep)}
.haul-glass{fill:var(--ink-surface)}
.haul-stack,.haul-gear{fill:var(--ink-elevated)}
/* Letterforms on gold are always ink — never white. */
.haul-lettering{
  font-family:Archivo,"Arial Black",sans-serif;font-weight:900;
  font-size:54px;letter-spacing:1px;fill:var(--on-gold);
}
.haul-lettering-sm{font-size:40px;letter-spacing:1.5px}
.haul-wheels circle{
  fill:var(--ink-elevated);stroke:var(--gold-band-hi);stroke-width:5;
  stroke-dasharray:14 12;                 /* dashes make the spin readable */
  transform-box:fill-box;transform-origin:center;
  transform:rotate(calc(var(--p) * 1900deg));
}
/* Exhaust plume. Its position, back-shear and density are driven entirely by
   js/site.js so the smoke reacts to scroll velocity (the rig's speed): it lifts
   straight up when the truck is parked and streams backward as it drives, the
   faster the thicker. transform-box keeps each puff's growth centred on itself.
   Reduced motion / no JS leaves these at opacity:0 — the plume simply stays off. */
.haul-smoke circle{
  fill:var(--band-text);opacity:0;
  transform-box:fill-box;transform-origin:center;
  will-change:transform,opacity;
}

/* Reduced motion / no JS: --p stays at its .5 default, so the rig sits mid-road
   fully visible and the smoke never animates. The scene still reads; it just
   doesn't move. */
@media (max-width:720px){
  .haul{min-height:clamp(280px,50vh,380px)}
  .haul-lettering{font-size:46px}
}

/* ============ PAGE TRANSITIONS ============
   Cross-document view transitions: navigation reads as travel along a route
   rather than a hard cut. Chrome/Edge and Safari 18.2+ honour this; Firefox
   ignores the at-rule and navigates normally, so there is no fallback to
   build and nothing to feature-detect.

   The header lockup is named, so it is treated as the same element across
   documents and holds still while the page slides beneath it. That is what
   makes it feel like moving between locations instead of a slideshow. */
@view-transition{navigation:auto}

.lockup{view-transition-name:brand-lockup}

@media (prefers-reduced-motion:no-preference){
  @keyframes vt-out{to{opacity:0;transform:translateX(-40px)}}
  @keyframes vt-in{from{opacity:0;transform:translateX(48px)}}
  ::view-transition-old(root){animation:vt-out .26s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease) both}
}

/* Reduced motion still gets a transition, just a cross-fade with no travel. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation-duration:.01ms!important;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .hero-in,.why-grid,.cov-wrap,.quote-grid{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr 1fr}

  .nav-toggle{display:block}
  .hdr-in{flex-wrap:wrap;padding-block:12px;gap:16px}

  /* The nav becomes a stacked panel. It is collapsed ONLY when JS has armed
     it (.js) — with JS off it stays open and fully usable, so a phone user
     can never be stranded behind a dead button. */
  .hdr-nav{
    order:3;flex-basis:100%;flex-direction:column;gap:0;margin-left:0;
    border-top:1px solid var(--hairline-dark);
  }
  .hdr-nav li{border-bottom:1px solid var(--hairline-dark)}
  .hdr-nav a{padding:16px 2px;font-size:1rem}
  .hdr-nav a[aria-current="page"]{box-shadow:none}

  .js .hdr-nav{display:none}
  .js .hdr-nav.open{display:flex}

  .nav-toggle{margin-left:auto}
}

@media (max-width:720px){
  .svc{grid-template-columns:auto 1fr}
  .svc-tag{grid-column:2;justify-self:start;margin-top:10px}
  .frow{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:flex-start}
}