/* ─────────────────────────────────────────────────────────────
   TOKENS — neutral grey ground, white lifted surfaces.
   Light is the base; dark redefines only values, in both the
   un-stamped (prefers-color-scheme) and stamped states.
   ───────────────────────────────────────────────────────────── */
:root{
  --ground:#EFEFEF;        /* neutral, no warmth */
  --band:#FFFFFF;
  --raised:#FFFFFF;
  --deep:#141414;
  --ink:#111111;
  --ink-2:#5C5C5C;
  --ink-3:#8A8A8A;
  --accent:#EE6621;        /* Stride orange */
  /* Same hue, AA-safe for small text: #EE6621 is 3.4:1 on --ground, under
     the 4.5:1 normal-text threshold. Fills and rules keep --accent; the
     small uppercase mono labels use this. */
  --accent-ink:#B4400D;
  --accent-lo:#F58347;
  --on-accent:#FFFFFF;
  --solid:#141414;         /* primary button, Rivian-style */
  --on-solid:#FFFFFF;
  --line:#E0E0E0;
  --line-soft:#EAEAEA;

  --sh-1:0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.04);
  --sh-2:0 1px 2px rgba(0,0,0,.05), 0 8px 20px -8px rgba(0,0,0,.14);
  --sh-3:0 2px 4px rgba(0,0,0,.05), 0 22px 46px -16px rgba(0,0,0,.20);
  --sh-nav:0 1px 2px rgba(0,0,0,.06), 0 10px 30px -10px rgba(0,0,0,.18);
  --gloss:inset 0 1px 0 rgba(255,255,255,.95);
  --glow:0 6px 18px -5px rgba(238,102,33,.42);

  --r-card:20px;
  --r-nav:20px;
  --r-pill:100px;
  --shell:1240px;
  --measure:68ch;
  --step:.3s;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E0E0E; --band:#161616; --raised:#1B1B1B; --deep:#070707;
    --ink:#F4F4F4; --ink-2:#A2A2A2; --ink-3:#7A7A7A;
    --accent:#FF7A33; --accent-ink:#FF9459; --accent-lo:#FF9459; --on-accent:#1A1109;
    --solid:#FFFFFF; --on-solid:#111111;
    --line:#2A2A2A; --line-soft:#222222;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.7);
    --sh-3:0 2px 4px rgba(0,0,0,.5), 0 22px 46px -16px rgba(0,0,0,.8);
    --sh-nav:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -10px rgba(0,0,0,.8);
    --gloss:inset 0 1px 0 rgba(255,255,255,.07);
    --glow:0 6px 18px -5px rgba(255,122,51,.34);
  }
}
:root[data-theme="dark"]{
  --ground:#0E0E0E; --band:#161616; --raised:#1B1B1B; --deep:#070707;
  --ink:#F4F4F4; --ink-2:#A2A2A2; --ink-3:#7A7A7A;
  --accent:#FF7A33; --accent-ink:#FF9459; --accent-lo:#FF9459; --on-accent:#1A1109;
  --solid:#FFFFFF; --on-solid:#111111;
  --line:#2A2A2A; --line-soft:#222222;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.7);
  --sh-3:0 2px 4px rgba(0,0,0,.5), 0 22px 46px -16px rgba(0,0,0,.8);
  --sh-nav:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -10px rgba(0,0,0,.8);
  --gloss:inset 0 1px 0 rgba(255,255,255,.07);
  --glow:0 6px 18px -5px rgba(255,122,51,.34);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── Type ───────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--f-display);font-variation-settings:"wdth" 116;
  font-weight:600;letter-spacing:-.02em;line-height:1.04;
  text-wrap:balance;margin:0;color:var(--ink);
}
h1{font-size:clamp(2.3rem,5vw,3.9rem);letter-spacing:-.032em}
h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.028em}
h3{font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.02em}
h4{font-size:1.1rem;font-variation-settings:"wdth" 108;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
a{color:inherit}

.lede{font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.55;color:var(--ink-2)}
.measure{max-width:var(--measure)}
.dim{color:var(--ink-2)}
.tag{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tag--accent{color:var(--accent-ink)}

/* ── Bands ──────────────────────────────────────────────────── */
.band{padding:clamp(64px,9vw,132px) 24px;background:var(--ground)}
.band--raised{background:var(--band)}
.band--tight{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.band--deep{
  background:var(--deep);
  --ground:#141414; --band:#1A1A1A; --raised:#212121;
  --ink:#FFFFFF; --ink-2:#C8C8C8; --ink-3:#909090;
  --line:#2E2E2E; --line-soft:#272727;
  --accent:#FF7A33; --accent-lo:#FF9459;
  --solid:#FFFFFF; --on-solid:#111111;
  --gloss:inset 0 1px 0 rgba(255,255,255,.08);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -10px rgba(0,0,0,.7);
  color:var(--ink);
}
.shell{max-width:var(--shell);margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.stack--wide{gap:clamp(34px,4.4vw,60px)}

/* ── Floating nav pill ──────────────────────────────────────── */
.hdr-wrap{position:sticky;top:0;z-index:50;padding:14px 16px 0;pointer-events:none}
.hdr{
  max-width:var(--shell);margin-inline:auto;pointer-events:auto;
  background:var(--raised);border-radius:var(--r-nav);
  box-shadow:var(--sh-nav),var(--gloss);
  border:1px solid var(--line-soft);
}
.hdr__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:10px 12px 10px 22px;
}
/* The mark sits with the type, not above it: align to the CAP height of
   "STRIDE" rather than the flex baseline, or the hexagon hangs low. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;justify-self:start}
.brand__logo{display:block;width:26px;height:auto;flex:none}
.brand__type{display:flex;align-items:baseline;gap:9px}
.brand__mark{font-family:var(--f-display);font-variation-settings:"wdth" 125;font-weight:700;font-size:1.1rem;letter-spacing:.13em}
.brand__co{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
/* Below ~420px the mark alone carries it; "Logistics" is the first thing to go. */
@media (max-width:420px){ .brand__co{display:none} }
.hdr__end{display:flex;align-items:center;gap:10px;justify-self:end}

.nav{display:flex;gap:2px;align-items:center;justify-self:center}
.nav a{
  font-size:.875rem;font-weight:500;text-decoration:none;color:var(--ink-2);
  padding:8px 13px;border-radius:var(--r-pill);white-space:nowrap;
  transition:color var(--step),background var(--step);
}
.nav a:hover{color:var(--ink);background:var(--ground)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--ground)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-size:.9rem;font-weight:600;
  text-decoration:none;cursor:pointer;
  padding:12px 24px;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform var(--step),box-shadow var(--step),background var(--step),border-color var(--step),color var(--step);
}
.btn--go{
  background:linear-gradient(180deg,var(--accent-lo) 0%,var(--accent) 100%);
  color:var(--on-accent);
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.38),0 1px 2px rgba(0,0,0,.14);
}
.btn--go:hover{transform:translateY(-1.5px);box-shadow:0 10px 26px -6px rgba(238,102,33,.5),inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.16)}
.btn--solid{background:var(--solid);color:var(--on-solid);box-shadow:var(--sh-2)}
.btn--solid:hover{transform:translateY(-1.5px);box-shadow:var(--sh-3)}
.btn--line{background:var(--raised);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-1),var(--gloss)}
.btn--line:hover{transform:translateY(-1.5px);border-color:var(--ink-3);box-shadow:var(--sh-2),var(--gloss)}
.btn--sm{padding:9px 18px;font-size:.83rem}

.menu-btn{
  display:none;background:var(--ground);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-pill);padding:9px 15px;font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding:clamp(48px,6.5vw,88px) 24px clamp(48px,6vw,84px);background:var(--ground)}
.hero h1{max-width:20ch}
.hero .lede{max-width:52ch;margin-top:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Home hero — wordmark as the graphic */
.hero--home{text-align:center;padding-top:clamp(26px,3.6vw,50px);padding-bottom:clamp(52px,6vw,86px)}
.wordmark{
  font-family:var(--f-display);font-variation-settings:"wdth" 125;
  font-weight:700;font-size:clamp(3.6rem,17.5vw,15rem);
  line-height:.86;letter-spacing:-.045em;color:var(--ink);
  margin:0 0 clamp(24px,3.4vw,44px);
}
.hero--home h1{max-width:30ch;margin-inline:auto;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.1}
.hero--home .lede{margin-inline:auto;margin-top:18px;max-width:56ch}
.hero--home .cta-row{justify-content:center;margin-top:38px}
.specline{
  font-family:var(--f-mono);font-size:.86rem;color:var(--ink-2);
  margin-top:16px;line-height:1.9;
}
.specline b{color:var(--ink);font-weight:500}

/* Spec strip */
.specs{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-2),var(--gloss);
  margin-top:clamp(48px,6vw,80px);overflow:hidden;text-align:left;
}
.spec{padding:22px 24px;border-right:1px solid var(--line-soft)}
.spec:last-child{border-right:0}
.spec dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.spec dd{margin:0;font-family:var(--f-display);font-variation-settings:"wdth" 112;font-weight:600;font-size:1.28rem;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}

/* ── Service manifest ───────────────────────────────────────── */
.manifest{
  display:flex;flex-direction:column;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-2),var(--gloss);overflow:hidden;
}
.mrow{
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--line-soft);text-decoration:none;
  transition:background var(--step);
}
.manifest > :last-child{border-bottom:0}
a.mrow:hover{background:var(--ground)}
a.mrow:hover .mrow__go{color:var(--accent);transform:translateX(4px)}
.mrow__code{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:.42em}
.mrow__body p{color:var(--ink-2);margin-top:9px;max-width:56ch;font-size:.97rem}
.mrow__go{font-size:1.15rem;color:var(--ink-3);transition:color var(--step),transform var(--step);padding-top:.15em}

/* ── Sequence ───────────────────────────────────────────────── */
.seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:16px}
.seq__step{
  background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-2),var(--gloss);padding:26px 24px 30px;
  transition:transform var(--step),box-shadow var(--step);
}
.seq__step:hover{transform:translateY(-3px);box-shadow:var(--sh-3),var(--gloss)}
.seq__n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--accent-ink);margin-bottom:14px}
.seq__step h4{margin-bottom:8px}
.seq__step p{font-size:.93rem;color:var(--ink-2)}

/* ── Prose ──────────────────────────────────────────────────── */
.prose{max-width:var(--measure);display:flex;flex-direction:column;gap:20px}
/* `class="shell prose"` puts both on one element: .prose's 68ch max-width wins
   and .shell's margin-inline:auto then CENTRES that narrow column instead of
   aligning it with every other section. Keep the shell's width on the
   container and cap the children instead, so text stays at the measure while
   the block still starts where the rest of the page does. */
.shell.prose{max-width:var(--shell)}
.shell.prose > *{max-width:var(--measure)}
.prose h3{margin-top:22px}
.prose ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.prose li{padding-left:26px;position:relative;color:var(--ink-2)}
.prose li::before{
  content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(180deg,var(--accent-lo),var(--accent));
  box-shadow:0 1px 3px -1px rgba(238,102,33,.7);
}
.prose li b,.prose li strong{color:var(--ink);font-weight:600}
.prose p{color:var(--ink-2)}
.prose p.first{color:var(--ink);font-size:1.12rem;line-height:1.55}

/* ── Panels ─────────────────────────────────────────────────── */
.panel{
  background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-2),var(--gloss);padding:clamp(26px,3.4vw,42px);
}
.panel--line{box-shadow:var(--sh-1),var(--gloss)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2vw,26px)}

/* A wall of sixty names is a different object from a row of ten: at pill size
   it becomes a slab of buttons. Smaller, quieter, tighter — it should read as
   breadth at a glance, not as sixty things to click. */
.brands--wall{gap:6px 7px}
.brands--wall span{
  font-size:.82rem;padding:6px 12px;color:var(--ink-2);
  box-shadow:none;background:transparent;
}

/* Card with a hairline accent rule across the top. Used where three cards carry
   equal weight and need something other than size to separate them. */
.panel--rule{position:relative;overflow:hidden}
.panel--rule::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent);
}

/* Comparison table. The wrapper scrolls, and it is focusable: Chrome will not
   make a scroll container keyboard-reachable on its own, so without tabindex a
   keyboard user cannot scroll it at all (WCAG 2.1.1). */
.tablewrap{
  overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-card);
  background:var(--raised);box-shadow:var(--sh-1);
}
.tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ingr{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}
.ingr caption{
  caption-side:bottom;text-align:left;padding:14px 22px 18px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;color:var(--ink-3);
}
.ingr th,.ingr td{padding:14px 22px;border-bottom:1px solid var(--line-soft);text-align:left}
.ingr thead th{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;white-space:nowrap;
}
.ingr tbody th{font-weight:500;color:var(--ink)}
.ingr tbody tr:last-child th,.ingr tbody tr:last-child td{border-bottom:0}
.ingr td{width:1%;white-space:nowrap}
.yn{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);display:inline-block;
}
.yn--yes{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent-ink)}
.yn--no{background:rgba(0,0,0,.05);color:var(--ink-2)}

/* A single photograph, given room. Portrait phone shots are the raw material,
   so the frame is fixed and the image cropped to it rather than letting a 3:4
   snap dictate a metre of page height. */
.band--shot{padding-top:clamp(16px,2.4vw,30px);padding-bottom:clamp(16px,2.4vw,30px)}
.shot{
  margin:0 auto;max-width:min(760px,calc(100% - 2*clamp(16px,5vw,60px)));
  border-radius:var(--r-card);overflow:hidden;background:var(--raised);
  box-shadow:var(--sh-1);
}
.shot--wide{max-width:min(1080px,calc(100% - 2*clamp(16px,5vw,60px)))}
.shot img{display:block;width:100%;height:clamp(260px,42vw,520px);object-fit:cover}
.shot figcaption{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;
  color:var(--ink-3);padding:12px 16px;
}

/* Project strip: full-bleed, horizontally scrolled, images doing the talking. */
.band--flush{padding-bottom:clamp(28px,4vw,54px)}
.strip{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(20px,3vw,34px) clamp(16px,5vw,60px) 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip figure{
  margin:0;flex:0 0 clamp(230px,26vw,330px);scroll-snap-align:start;
  border-radius:var(--r-card);overflow:hidden;background:var(--raised);
  box-shadow:var(--sh-1);
}
.strip img{display:block;width:100%;height:clamp(300px,34vw,430px);object-fit:cover}

/* ── Fabric protection page ─────────────────────────────────────────── */
.hero--split .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center}
.hero__shot{margin:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1)}
.hero__shot img{display:block;width:100%;height:100%;max-height:440px;object-fit:cover}
@media (max-width:820px){
  .hero--split .hero__grid{grid-template-columns:1fr}
  .hero__shot{order:-1}
  .hero__shot img{max-height:260px}
}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.icard{margin:0;background:var(--raised);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1)}
.icard img{display:block;width:100%;height:172px;object-fit:cover}
.icard figcaption{padding:16px 18px 20px;color:var(--ink-2);font-size:.92rem;line-height:1.55}
.icard figcaption strong{display:block;color:var(--ink);font-family:var(--f-display);
  font-variation-settings:"wdth" 108;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;margin-bottom:5px}

/* Click-to-play. The poster is LOCAL: a youtube.com thumbnail would call a third
   party on page load, before the visitor has asked for the video. */
.vid{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1);background:#000}
.vid img,.vid iframe{display:block;width:100%;aspect-ratio:16/7;height:auto;object-fit:cover;border:0}
.vid__play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  border:0;cursor:pointer;background:var(--accent);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.3);transition:transform var(--step)}
.vid__play:hover{transform:scale(1.07)}
.vid__play:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Chrome will not make a scroll container keyboard-focusable on its own, so the
   tabindex="0" in the markup is what satisfies WCAG 2.1.1 for this table. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card);
  background:var(--raised);box-shadow:var(--sh-1)}
.tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ing{border-collapse:collapse;width:100%;min-width:460px;font-size:.94rem}
.ing caption{caption-side:bottom;padding:12px 18px 16px;text-align:left;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.ing th,.ing td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
.ing thead th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.ing tbody tr:last-child td{border-bottom:0}
.ing td:nth-child(2),.ing td:nth-child(3),
.ing th:nth-child(2),.ing th:nth-child(3){width:110px;white-space:nowrap}

/* Native <details> accordion -- no JS, keyboard-operable and screen-reader
   announced for free. A hand-rolled one would need both and usually gets one. */
.faq{display:flex;flex-direction:column;gap:2px}
.faq__q{background:var(--raised);border-radius:14px;box-shadow:var(--sh-1);overflow:hidden}
.faq__q summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-family:var(--f-display);font-variation-settings:"wdth" 108;font-weight:600;
  font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{
  content:"+";font-family:var(--f-mono);font-size:1.15rem;color:var(--accent);
  flex:none;transition:transform var(--step);
}
.faq__q[open] summary::after{content:"‘2"}
.faq__q summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.faq__q p{padding:0 22px 20px;color:var(--ink-2);max-width:66ch}

/* ── Image heroes and full-bleed bands ──────────────────────────────────
   The handoff's rule, followed literally: the scrim is a CSS gradient laid
   UNDER the type, never a darkened image. These were generated exposed
   correctly for the palette; dimming the file would undo that and look muddy
   at every other size. */
.hero--img,.imgband{position:relative;isolation:isolate;overflow:hidden}
.hero--img>picture,.imgband>picture{position:absolute;inset:0;z-index:-2}
.hero--img img,.imgband img{width:100%;height:100%;object-fit:cover;display:block}
.hero--img::after,.imgband::after{content:"";position:absolute;inset:0;z-index:-1}

/* Type on the RIGHT third: scrim ramps up from the right. */
.is-right::after{background:linear-gradient(270deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 34%,transparent 62%)}
/* Type on the LEFT: mirror of the above, per the handoff's own example. */
.is-left::after{background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,transparent 55%)}
/* Bright images carrying dark type need lift, not shade. */
.is-light::after{background:linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 38%,transparent 66%)}

.hero--img{min-height:clamp(460px,74vh,780px);display:flex;align-items:center;padding:56px 0}
.imgband{min-height:clamp(340px,46vh,520px);display:flex;align-items:center;padding:52px 0}
.hero__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.is-right .hero__cols>*{grid-column:2}
.is-left  .hero__cols>*{grid-column:1}

/* on-dark is a colour context, not a one-off: every child inherits it, so a
   later paragraph added inside cannot come out unreadable by omission. */
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark .wordmark{color:#fff}
.on-dark .lede,.on-dark .dim,.on-dark p{color:rgba(255,255,255,.86)}
.on-dark .tag{color:#fff}
.on-dark .btn--line{border-color:rgba(255,255,255,.62);color:#fff}
.on-dark .btn--line:hover{background:rgba(255,255,255,.12)}

@media (max-width:860px){
  .hero__cols{grid-template-columns:1fr}
  .is-right .hero__cols>*,.is-left .hero__cols>*{grid-column:1}
  /* A 1.79 image cropped into a tall phone viewport shows the CENTRE, not the
     third that was measured -- so the side gradient no longer sits under the
     type. Swap to a full vertical scrim or the headline lands on whatever the
     crop happens to expose. */
  .is-right::after,.is-left::after{background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.62) 100%)}
  .is-light::after{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.86) 100%)}
  .hero--img{min-height:clamp(420px,66vh,620px)}
}

.brands{display:flex;flex-wrap:wrap;gap:9px}
.brands span{
  font-family:var(--f-display);font-variation-settings:"wdth" 108;
  font-weight:500;font-size:.95rem;color:var(--ink);
  padding:9px 18px;border:1px solid var(--line-soft);border-radius:var(--r-pill);
  background:var(--raised);box-shadow:var(--sh-1),var(--gloss);
}
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas span{
  font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2);
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--raised);border:1px solid var(--line-soft);
  box-shadow:var(--sh-1),var(--gloss);
}

/* Embed slot */
.slot{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--raised);box-shadow:var(--sh-2),var(--gloss);
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.slot__chip{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border-radius:var(--r-pill);padding:4px 11px;
}

/* ── Contact ────────────────────────────────────────────────── */
.nap{display:flex;flex-direction:column;gap:5px;font-size:1.06rem}
.nap a{color:var(--accent);text-decoration:none;font-weight:500}
.nap a:hover{text-decoration:underline}

/* ── Footer — white text ────────────────────────────────────── */
.ftr{
  background:var(--deep);
  --ground:#141414; --raised:#212121;
  --ink:#FFFFFF; --ink-2:#DCDCDC; --ink-3:#9A9A9A;
  --line:#2E2E2E; --line-soft:#272727;
  --accent:#FF8340;
  color:var(--ink);padding:clamp(52px,6vw,80px) 24px 34px;
}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,4vw,56px)}
.ftr h4{
  margin-bottom:14px;font-size:.78rem;font-family:var(--f-mono);
  font-variation-settings:normal;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.ftr .dim{color:var(--ink-2)}
.ftr__links{display:flex;flex-direction:column;gap:9px}
.ftr__links a{color:var(--ink-2);text-decoration:none;font-size:.92rem;transition:color var(--step)}
.ftr__links a:hover{color:#FFFFFF}
.ftr__base{
  margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:.82rem;color:var(--ink-3);
}


/* ── Forms ──────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-wrap{max-width:880px;margin-inline:auto}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:.97rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;width:100%;
  transition:border-color var(--step),box-shadow var(--step);
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.check{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
  font-size:.93rem;color:var(--ink-2);transition:border-color var(--step),color var(--step);
}
.check:hover{border-color:var(--ink-3);color:var(--ink)}
.check input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.req{color:var(--accent);font-weight:600}
/* Honeypot. Positioned away rather than display:none - a bot that skips hidden
   fields would sail past a display:none trap. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#c0392b}
.form-err{
  color:#c0392b;font-size:.9rem;margin:0;
}
.form-sent{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:22px;
  background:var(--ground);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;
}
.form-sent[hidden]{display:none}
.form-sent textarea{
  width:100%;min-height:150px;font-family:var(--f-mono);font-size:.82rem;
  background:var(--paper,#fff);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);
}

/* "Before" eyebrow on the what-changes cards */
.was{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}

/* STRIDE acronym strip */
.band--acro{padding-top:clamp(30px,4vw,58px);padding-bottom:clamp(30px,4vw,58px)}
.acro{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
.acro li{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  border-top:2px solid var(--accent);padding-top:12px;
}
.acro__l{
  font-family:var(--f-display,var(--f-sans));font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1;color:var(--ink);
}
.acro__w{
  font-family:var(--f-mono);font-size:clamp(.62rem,1.05vw,.78rem);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
@media (max-width:820px){
  .acro{grid-template-columns:repeat(3,1fr);gap:16px 12px}
}
@media (max-width:420px){
  .acro{grid-template-columns:repeat(2,1fr)}
}

.hero + .band--tight{padding-top:clamp(6px,1.4vw,18px)}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ── Blog ───────────────────────────────────────────────────── */
.post{padding:clamp(48px,6.5vw,88px) 24px clamp(56px,7vw,96px);background:var(--ground)}
.post h1{max-width:24ch;font-size:clamp(2rem,4.2vw,3.2rem)}
.post__meta{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);margin-top:18px}
.post__cats{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.post__body{max-width:var(--measure);margin-top:clamp(30px,4vw,48px);display:flex;flex-direction:column;gap:20px}
.post__body h2{font-size:clamp(1.3rem,2.1vw,1.7rem);margin-top:22px}
.post__body p{color:var(--ink-2);line-height:1.7}
.post__body a{color:var(--accent);text-underline-offset:2px}
.post__body ul,.post__body ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink-2)}
.post__body figure{margin:6px 0}
.post__body img{width:100%;height:auto;border-radius:var(--r-card);box-shadow:var(--sh-2)}
.post__body blockquote{margin:0;padding-left:20px;border-left:3px solid var(--accent);color:var(--ink-2);font-style:italic}
.post__body hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.post .cta-row{margin-top:clamp(34px,4vw,52px)}

/* ── Routing ────────────────────────────────────────────────── */
.page{display:none}
.page.is-on{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

@media (max-width:1050px){
  .nav a{padding:8px 10px;font-size:.83rem}
  .hdr__in{padding-left:18px}
}
@media (max-width:900px){
  .specs{grid-template-columns:repeat(2,1fr)}
  .spec:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .spec:nth-child(even){border-right:0}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .mrow{grid-template-columns:1fr auto;gap:14px}
  .mrow__code{grid-column:1/-1;padding-top:0}
}
@media (max-width:820px){
  .hdr__in{grid-template-columns:1fr auto;position:relative}
  .nav{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-nav);
    box-shadow:var(--sh-3);padding:10px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 14px;font-size:.97rem}
  .menu-btn{display:inline-block}
  .hdr__end .btn--go{display:none}
}
@media (max-width:520px){
  .specs{grid-template-columns:1fr}
  .spec{border-right:0;border-bottom:1px solid var(--line-soft)}
  .ftr__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── Client testimonials ─────────────────────────────────────────────────
   Curated DispatchTrack post-delivery survey responses, paired with our own
   delivery photos. A scroll-snap rail rather than a JS carousel: the site
   ships one small script and this needs none, and a rail degrades to a plain
   scrollable list everywhere. */
.tst{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:4px 24px 18px;margin-inline:-24px;scrollbar-width:thin}
.tst::-webkit-scrollbar{height:8px}
.tst::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}
.tst__card{scroll-snap-align:start;flex:0 0 clamp(260px,78vw,360px);
  background:var(--raised);border-radius:var(--r-card);box-shadow:var(--sh-2);
  overflow:hidden;display:flex;flex-direction:column}
/* height:auto is LOAD-BEARING. The <img> carries width/height attributes (they
   reserve layout space and stop the rail jumping as lazy images arrive). Those
   map to presentational hints, and setting only width in CSS leaves the HEIGHT
   hint in force -- so height stayed 750px, aspect-ratio was ignored entirely,
   and every card rendered ~1175px tall. */
.tst__ph{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--line-soft)}
.tst__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
/* Cards stretch to the tallest sibling, so one 550-character review made all 25
   695px tall. Clamp to 7 lines (auto-ellipsis); the median review is ~133 chars,
   about 3 lines, so only the two longest are trimmed. */
.tst__quote{margin:0;color:var(--ink);line-height:1.55;font-size:.97rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.tst__quote::before{content:"“";color:var(--accent);font-size:1.5em;line-height:0;vertical-align:-.35em;margin-right:2px}
.tst__quote::after{content:"”";color:var(--accent);font-size:1.5em;line-height:0;vertical-align:-.35em;margin-left:1px}
.tst__by{margin:0;margin-top:auto;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.tst__by b{color:var(--ink-2);font-weight:600}
@media (min-width:900px){.tst__card{flex-basis:360px}}
@media (prefers-reduced-motion:no-preference){.tst{scroll-behavior:smooth}}