/* ═════════════════════════════════════════════════════════════════════════
   E.T. MORRIS & SONS LTD — shared stylesheet
   One file for all four pages. No build step, no external requests.

   1. Brand tokens        4. Masthead + nav       7. Sections
   2. Reset + primitives  5. Heroes               8. Footer
   3. Motion              6. Components           9. Reduced motion
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. BRAND TOKENS ──────────────────────────────────────────────────────
   Sampled from the logo artwork.
     #003ac4  the blue of the MORRIS wordmark
     #424e58  the charcoal of "TRANSPORT & DISTRIBUTION"
   --b-signal is the one added accent — the logo has no second colour, so it
   is a design choice, not a sampled value. Green as of 2026-09-22 (was
   orange). Two weights, because one accent cannot serve both beds:
     #00c46a  on the dark navy panels   — 8.5:1 against --b-abyss
     #00713f  on white                  — 6.1:1, so the "to confirm" chips
                                          and the light-background markers
                                          stay readable
   Change these two lines and every accent on the site follows.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --b-core:#003ac4; --b-lift:#2f5cff; --b-deep:#001a5e; --b-abyss:#000b26;
  --b-slate:#424e58; --b-wash:#e9edfb;
  --b-signal:#00c46a; --b-signal-ink:#00713f;

  --paper:#fff; --paper-2:#f2f4f9; --paper-3:#e8ebf3;
  --ink:#080b12; --ink-mid:#454c5c; --ink-soft:#767e90;
  --rule:#d7dbe6; --rule-hi:#b6bdcf;

  --gutter:clamp(20px,4.4vw,72px); --max:1400px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.28,1);
  --out:cubic-bezier(.16,1,.3,1);
  --nav-h:78px;
  /* left edge of .shell content, used to align full-bleed rows */
  --edge:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
}

/* Cross-document fade, where the browser supports it. Ignored elsewhere. */
@view-transition{ navigation:auto }

/* ── 2. RESET + PRIMITIVES ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol,dl,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--b-core);color:#fff}
:focus-visible{outline:2px solid var(--b-lift);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
.num{font-variant-numeric:tabular-nums}
.shell{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--b-core);color:#fff;
  padding:14px 22px;font-weight:600}
.skip:focus{left:0}

.mega{font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:.94;letter-spacing:-.05em;font-weight:800;
  text-wrap:balance}
.h2{font-size:clamp(1.9rem,4.2vw,3.5rem);line-height:1.04;letter-spacing:-.042em;font-weight:800;
  text-wrap:balance}
.h3{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.034em;font-weight:800}
.lede{font-size:clamp(1.05rem,1.42vw,1.32rem);line-height:1.52;color:var(--ink-mid);letter-spacing:-.013em;
  text-wrap:pretty}
.body{font-size:1.02rem;line-height:1.66;color:var(--ink-mid);text-wrap:pretty}
.body + .body{margin-top:1.05em}
.meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.on-dark{color:#fff}
.on-dark .lede,.on-dark .body{color:rgba(255,255,255,.78)}
.on-dark .meta{color:rgba(255,255,255,.55)}

.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ── 3. MOTION ───────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--out),transform 1s var(--out);transition-delay:var(--d,0ms)}
.in-view .rv,.rv.in-view{opacity:1;transform:none}

/* Headings get a mask reveal instead of a plain fade — the same move the hero
   makes, applied everywhere, so the page has one gesture rather than two. The
   inset overshoots on both sides so ascenders and descenders are never clipped. */
.h2.rv,.mega.rv{clip-path:inset(0 0 100% 0);transform:translateY(16px);
  transition:opacity .7s var(--out),transform 1.05s var(--out),clip-path 1.05s var(--out);
  transition-delay:var(--d,0ms)}
.in-view .h2.rv,.in-view .mega.rv,
.h2.rv.in-view,.mega.rv.in-view{clip-path:inset(-22% 0 -22% 0);transform:none}
.wipe{position:relative;overflow:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--out) var(--d,0ms)}
.in-view .wipe,.wipe.in-view{clip-path:inset(0 0 0 0)}
.wipe > img{transform:scale(1.14);transition:transform 1.7s var(--out) var(--d,0ms)}
.in-view .wipe > img,.wipe.in-view > img{transform:scale(1)}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120}
.progress i{display:block;height:100%;width:100%;background:var(--b-core);
  transform:scaleX(0);transform-origin:left}

/* ── 4. MASTHEAD + NAV ───────────────────────────────────────────────── */
.masthead{position:fixed;inset:0 0 auto;z-index:110;height:var(--nav-h);display:flex;align-items:center;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),box-shadow .45s var(--ease)}
.masthead .shell{display:flex;align-items:center;gap:clamp(14px,2.6vw,44px);width:100%}
.masthead.stuck{background:rgba(255,255,255,.93);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 var(--rule)}
/* Inner pages start light under the masthead, so they never run the dark state. */
.masthead.solid{background:rgba(255,255,255,.93);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 var(--rule)}
.logo{flex-shrink:0;position:relative;line-height:0}
.logo img{width:clamp(124px,12.5vw,164px);height:auto;transition:opacity .4s var(--ease)}
.logo .wht{display:none}
/* The logo is always the blue one (client, 2026-09-22), so every page runs the white
   masthead (class "solid") from the top, rather than a plate behind the logo over the hero. */

.nav{display:flex;gap:clamp(13px,1.9vw,28px);margin-left:auto;align-items:center}
.nav a{position:relative;font-size:.85rem;font-weight:500;padding:7px 0;color:rgba(255,255,255,.72);
  transition:color .3s var(--ease)}
.masthead.stuck .nav a,.masthead.solid .nav a{color:var(--ink-mid)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--out)}
.nav a:hover{color:#fff}
.masthead.stuck .nav a:hover,.masthead.solid .nav a:hover{color:var(--b-core)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:#fff}
.masthead.stuck .nav a[aria-current="page"],.masthead.solid .nav a[aria-current="page"]{color:var(--b-core)}
.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;background:var(--b-signal)}

.tel{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.04em;flex-shrink:0;
  color:rgba(255,255,255,.72);transition:color .3s var(--ease)}
.masthead.stuck .tel,.masthead.solid .tel{color:var(--b-core)}
.tel:hover{color:#fff}
.masthead.stuck .tel:hover,.masthead.solid .tel:hover{color:var(--b-lift)}

/* burger — the drawer is the mobile nav, which Concept A never had */
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;flex-shrink:0}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:#fff;
  transition:transform .4s var(--out),opacity .25s var(--ease)}
.masthead.stuck .burger span,.masthead.solid .burger span{background:var(--ink)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:105;background:var(--b-abyss);color:#fff;
  padding:calc(var(--nav-h) + 30px) var(--gutter) 40px;display:flex;flex-direction:column;
  gap:6px;transform:translateY(-100%);transition:transform .55s var(--out);visibility:hidden}
.drawer.open{transform:translateY(0);visibility:visible}
.drawer a{font-size:clamp(1.7rem,7vw,2.4rem);font-weight:800;letter-spacing:-.04em;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);
  opacity:0;transform:translateY(24px);
  transition:opacity .45s var(--out),transform .55s var(--out)}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.12s}
.drawer.open a:nth-child(2){transition-delay:.19s}
.drawer.open a:nth-child(3){transition-delay:.26s}
.drawer.open a:nth-child(4){transition-delay:.33s}
.drawer.open a:nth-child(5){transition-delay:.40s}
.drawer a[aria-current="page"]{color:var(--b-signal)}
.drawer .dtel{margin-top:auto;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;
  color:rgba(255,255,255,.7);border:0;padding-top:28px;font-weight:600}
@media(max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .masthead .cta{display:none}
}
@media(min-width:1081px){.drawer{display:none}}
@media(max-width:640px){.tel{display:none}}
body.locked{overflow:hidden}

/* ── buttons ─────────────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;gap:11px;background:var(--b-core);color:#fff;
  padding:15px 24px;font-size:.85rem;font-weight:600;position:relative;overflow:hidden;flex-shrink:0}
.cta > *{position:relative;z-index:2}
.cta::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .45s var(--out)}
.cta:hover::before{transform:translateY(0)}
.cta .arw{width:15px;height:10px;transition:transform .45s var(--out)}
.cta:hover .arw{transform:translateX(6px)}
.masthead .cta{padding:12px 20px;font-size:.82rem}
.ghost{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-size:.85rem;
  font-weight:600;border:1px solid rgba(255,255,255,.45);color:#fff;position:relative;overflow:hidden}
.ghost > *{position:relative;z-index:2}
.ghost::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);
  transition:transform .45s var(--out)}
.ghost:hover{color:var(--ink);border-color:#fff}
.ghost:hover::before{transform:translateY(0)}
.ghost.dark{border-color:var(--rule-hi);color:var(--ink)}
.ghost.dark::before{background:var(--ink)}
.ghost.dark:hover{color:#fff;border-color:var(--ink)}
.acts{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

/* ── 5. HEROES ───────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--b-abyss);isolation:isolate}
.hero-media{position:absolute;inset:-6% 0;z-index:0;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 46%;
  transform:scale(1.1);animation:heroIn 2.6s var(--out) .1s forwards}
@keyframes heroIn{to{transform:scale(1)}}
@media(max-width:820px){.hero{min-height:min(92svh,760px)}.hero-media img{object-position:80% 50%}}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(0,7,26,.95) 0%,rgba(0,7,26,.66) 38%,rgba(0,7,26,.24) 68%,rgba(0,7,26,.55) 100%),
    linear-gradient(to right,rgba(0,7,26,.9) 0%,rgba(0,7,26,.66) 26%,rgba(0,7,26,.24) 58%,transparent 88%)}
.hero .shell{position:relative;z-index:3;width:100%;
  padding-block:clamp(96px,13vh,150px) clamp(44px,7vh,84px);will-change:transform,opacity}
.hero h1{max-width:16ch}
/* Room under each line for descenders (the y's were clipped), given back by the margin. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.145em}
.hero h1 .ln > span{display:block;transform:translateY(108%);animation:up 1.15s var(--out) forwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.42s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.55s}
@keyframes up{to{transform:translateY(0)}}
.hero h1 em{font-style:normal;color:#6d90ff}
@media(max-width:720px){
  .hero h1 .ln{overflow:visible}
  .hero h1 .ln > span{transform:none;opacity:0;animation-name:fade;animation-duration:.9s}
}
.hero-lower{margin-top:clamp(26px,3.6vw,46px);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);align-items:end}
@media(max-width:900px){.hero-lower{grid-template-columns:1fr}}
.hero-say{max-width:50ch;opacity:0;animation:fade .95s var(--out) .82s forwards}
@keyframes fade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-acts{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px;
  opacity:0;animation:fade .95s var(--out) .95s forwards}
.hero-cue{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.5);
  opacity:0;animation:fade .9s var(--out) 1.2s forwards;white-space:nowrap}
.hero-cue i{display:block;width:54px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-cue i::after{content:"";position:absolute;inset:0;background:var(--b-signal);
  animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:900px){.hero-cue{display:none}}

/* the shorter hero the three inner pages carry */
.phero{position:relative;min-height:min(62svh,560px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--b-abyss);isolation:isolate}
.phero-media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;
  transform:scale(1.08);animation:heroIn 2.4s var(--out) .1s forwards}
.phero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(0,7,26,.95) 0%,rgba(0,7,26,.62) 44%,rgba(0,7,26,.3) 78%,rgba(0,7,26,.72) 100%),
    linear-gradient(to right,rgba(0,7,26,.86) 0%,rgba(0,7,26,.5) 42%,transparent 92%)}
.phero .shell{position:relative;z-index:3;width:100%;
  padding-block:clamp(120px,16vh,190px) clamp(38px,5.5vh,66px);will-change:transform,opacity}
.phero h1{max-width:18ch;font-size:clamp(2.3rem,6vw,5rem);line-height:.98;letter-spacing:-.048em;
  font-weight:800;text-wrap:balance;opacity:0;animation:fade 1s var(--out) .25s forwards}
.phero .lede{max-width:52ch;margin-top:22px;opacity:0;animation:fade 1s var(--out) .42s forwards}
.crumb{display:flex;gap:10px;align-items:center;margin-bottom:20px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55);
  opacity:0;animation:fade .9s var(--out) .15s forwards}
.crumb b{width:7px;height:7px;background:var(--b-signal);display:block}

/* ── marquee ─────────────────────────────────────────────────────────── */
.marquee{background:var(--b-core);color:#fff;overflow:hidden;padding-block:15px;
  border-block:1px solid var(--b-deep)}
.marquee ul{display:flex;width:max-content;animation:slide 44s linear infinite}
.marquee li{display:flex;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;white-space:nowrap}
.marquee li::after{content:"";width:7px;height:7px;background:var(--b-signal);flex-shrink:0}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover ul{animation-play-state:paused}

/* ── 6. COMPONENTS ───────────────────────────────────────────────────── */
/* stat band */
.band{border-bottom:1px solid var(--ink)}
.band ol{display:grid;grid-template-columns:repeat(4,1fr)}
.band li{padding:clamp(26px,3.6vw,46px) clamp(16px,2vw,30px);border-left:1px solid var(--rule);
  position:relative;overflow:hidden}
.band li:first-child{border-left:0}
.band li::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--b-core);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--out) var(--d,0ms)}
.band.in-view li::before,.in-view .band li::before{transform:scaleX(1)}
@media(max-width:820px){.band ol{grid-template-columns:repeat(2,1fr)}
  .band li:nth-child(3){border-left:0}.band li:nth-child(n+3){border-top:1px solid var(--rule)}}
.band .fig{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;letter-spacing:-.055em;line-height:.9;
  color:var(--b-deep);clip-path:inset(0 0 100% 0);transform:translateY(24px);
  transition:transform .95s var(--out) var(--d,0ms),clip-path .95s var(--out) var(--d,0ms)}
.band.in-view .fig,.in-view .band .fig{clip-path:inset(-25% 0 -25% 0);transform:none}
.band .fig .pre{font-size:.42em;letter-spacing:-.02em;color:var(--ink-soft);margin-right:.18em;
  vertical-align:.28em}
.band .cap{margin-top:14px;font-size:.9rem;color:var(--ink-mid);line-height:1.5;max-width:32ch}

.pad{padding-block:clamp(64px,9vw,130px)}
.pad-s{padding-block:clamp(48px,6.5vw,90px)}
.split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(28px,4.4vw,80px)}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.rule-top{border-top:1px solid var(--ink)}
.tint{background:var(--paper-2)}

/* service / link cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--ink);margin-top:clamp(22px,3vw,40px)}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr}}
.svc-card{background:var(--paper);padding:clamp(26px,3.2vw,44px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .5s var(--ease),transform .5s var(--out)}
.svc-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--b-core);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--out)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-card .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--b-core);
  font-weight:600;transition:transform .5s var(--out)}
/* after the reveal rules, so hovering a card that has finished arriving wins */
.in-view .svc-card:hover,.svc-card.rv.in-view:hover{background:var(--paper-2);transform:translateY(-5px)}
.svc-card:hover .n{transform:translateX(6px)}
.svc-card h3{margin-top:18px;font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.06}
.svc-card > p{margin-top:16px;font-size:1rem;line-height:1.62;color:var(--ink-mid)}
.svc-card ul{margin-top:24px;border-top:1px solid var(--rule)}
.svc-card li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;
  border-bottom:1px solid var(--rule);font-size:.92rem;color:var(--ink-mid)}
.svc-card .mk{width:8px;height:8px;background:var(--b-core);margin-top:8px;flex-shrink:0}
.svc-card .more{margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--b-core)}
.svc-card .more .arw{width:15px;height:10px;transition:transform .45s var(--out)}
.svc-card:hover .more .arw{transform:translateX(6px)}

/* plain bullet grid, for the service and trailer lists */
/* Cells draw their own right/bottom rule, so a part-filled last row leaves no
   gap showing through — a 1px grid gap over a tinted background would. */
.grid-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  margin-top:clamp(22px,3vw,36px)}
@media(max-width:860px){.grid-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid-list{grid-template-columns:1fr}}
.grid-list li{background:var(--paper);padding:clamp(18px,2.2vw,26px);display:grid;
  grid-template-columns:auto 1fr;gap:14px;align-items:center;font-size:1rem;font-weight:600;
  letter-spacing:-.018em;transition:background .45s var(--ease);position:relative;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.grid-list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--b-core);transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--out)}
.grid-list li:hover::before{transform:scaleY(1);transform-origin:top}
.in-view .grid-list li:hover{background:var(--paper-2)}
.grid-list .mk{width:9px;height:9px;background:var(--b-core);transition:transform .45s var(--out)}
.grid-list li:hover .mk{transform:scale(1.45)}
.grid-list li.soft{color:var(--ink-soft);font-weight:500}
.tint .grid-list li{background:var(--paper)}

/* the "why us" cards, over the fleet photograph */
.why{position:relative;overflow:hidden;background:var(--b-abyss);isolation:isolate}
.why-media{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.why-media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.why-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,7,26,.9) 0%,rgba(0,7,26,.86) 45%,rgba(0,7,26,.95) 100%)}
.why .shell{position:relative;z-index:3}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18)}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}}
.why-grid > div{padding:clamp(22px,2.9vw,34px);background:rgba(0,11,38,.72);position:relative;
  overflow:hidden;transition:background .5s var(--ease);
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.why-grid > div:hover{background:rgba(0,26,94,.78)}
.why-grid > div::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--b-signal);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--out)}
.why-grid > div:hover::after{transform:scaleX(1)}
.why-grid .mk{width:10px;height:10px;background:var(--b-signal);margin-top:7px}
.why-grid h4{font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:700;letter-spacing:-.024em;color:#fff;
  line-height:1.3}

/* image break */
.break{position:relative;min-height:min(78svh,680px);display:flex;align-items:center;
  overflow:hidden;background:var(--b-abyss);isolation:isolate}
.break-media{position:absolute;inset:-14% 0;z-index:0;will-change:transform}
.break-media img{width:100%;height:100%;object-fit:cover}
.break-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(0,7,26,.95) 0%,rgba(0,7,26,.82) 28%,rgba(0,7,26,.42) 58%,rgba(0,7,26,.12) 90%)}
.break .shell{position:relative;z-index:3;width:100%;padding-block:clamp(60px,9vw,110px)}
.break-panel{max-width:min(620px,56%);background:rgba(0,7,26,.7);
  backdrop-filter:blur(7px) saturate(1.1);padding:clamp(28px,3.4vw,48px);position:relative}
.break-panel::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--b-signal);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--out) .3s}
.in-view .break-panel::before{transform:scaleX(1)}
@media(max-width:820px){.break-panel{max-width:100%}}
.break blockquote{font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.04em;
  font-weight:800;color:#fff;text-wrap:balance}
.break blockquote em{font-style:normal;color:#6d90ff}
.break .sub{margin-top:24px;color:rgba(255,255,255,.78);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.58}

/* the history timeline */
.tl{margin-top:clamp(30px,4vw,54px);position:relative}
.tl::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--rule);
  transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--out) .1s}
.in-view .tl::before{transform:scaleY(1)}
.tl li{position:relative;padding-left:clamp(30px,4vw,50px);padding-bottom:clamp(28px,3.6vw,46px);
  display:grid;grid-template-columns:clamp(96px,10vw,160px) minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:clamp(18px,2.6vw,44px)}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;background:var(--b-core);
  transform:scale(0);transition:transform .5s var(--out) var(--d,0ms)}
.in-view .tl li::before{transform:scale(1)}
.tl li:last-child::before{background:var(--b-signal-ink)}   /* on white, so the ink weight */
.tl .yr{grid-area:1 / 1 / 3 / 2;padding-top:5px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;font-weight:700;color:var(--b-core)}
.tl li:last-child .yr{color:var(--b-signal-ink)}
.tl h4{grid-area:1 / 2 / 2 / 3;font-size:clamp(1.18rem,1.9vw,1.5rem);font-weight:800;letter-spacing:-.03em}
.tl p{grid-area:2 / 2 / 3 / 3;margin-top:10px;font-size:1rem;line-height:1.64;color:var(--ink-mid);
  max-width:74ch}
@media(max-width:700px){
  .tl li{grid-template-columns:minmax(0,1fr)}
  .tl .yr{grid-area:auto;padding-top:0}
  .tl h4{grid-area:auto;margin-top:10px}
  .tl p{grid-area:auto}
}


/* About: the planning system on a monitor, and the partner logos */
.plat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(28px,4.5vw,72px);
  align-items:center}
.plat .n,.partners .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--b-core);
  font-weight:600;text-transform:uppercase}
.plat .body{margin-top:22px}
/* Sized so the whole screen fits in the window below the masthead, never taller. */
.screen{margin:0;justify-self:end;width:100%;max-width:calc((100svh - var(--nav-h) - 150px) * 1.29)}
.screen img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,26,94,.18))}
.partners{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--ink);margin-top:clamp(40px,5vw,72px)}
.partners > div{background:var(--paper);padding:clamp(22px,2.8vw,36px)}
.partner{display:flex;flex-direction:column;justify-content:center;gap:14px}
.partner img{width:min(100%,250px);height:auto}
.partner span{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.partner p{font-size:.92rem;line-height:1.55;color:var(--ink-mid);margin:0}
@media(max-width:900px){.plat{grid-template-columns:1fr}.partners{grid-template-columns:1fr}}

/* the enquiry form (Contact). No server: site.js turns it into a pre-filled email. */
.inl{color:var(--b-core);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.enq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-content:start}
.enq label{display:grid;gap:7px}
.enq label > span{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft)}
.enq input,.enq textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-bottom-color:var(--ink);border-radius:0;padding:12px 14px;width:100%;
  transition:border-color .3s var(--ease)}
.enq textarea{resize:vertical;min-height:132px}
.enq input:focus,.enq textarea:focus{outline:none;border-color:var(--b-core);box-shadow:inset 0 -2px 0 var(--b-core)}
.enq .wide{grid-column:1 / -1}
.enq-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.enq-go .cta{border:0;cursor:pointer}
.enq-note{font-size:.86rem;color:var(--ink-soft);max-width:40ch}
@media(max-width:560px){.enq{grid-template-columns:1fr}}

/* the label / value / to-confirm rows */
.cbox{border-top:1px solid var(--ink);margin-top:clamp(22px,3vw,32px)}
/* the block itself only fades; the rows carry the movement, in sequence */
.cbox.rv{transform:none}
.cbox > div{display:grid;grid-template-columns:minmax(0,158px) 1fr auto;gap:18px;align-items:center;
  padding:clamp(17px,2.3vw,25px) 0;border-bottom:1px solid var(--rule);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--out),transform .8s var(--out)}
.in-view .cbox > div{opacity:1;transform:none}
.cbox > div:nth-child(1){transition-delay:calc(var(--d,0ms) + 80ms)}
.cbox > div:nth-child(2){transition-delay:calc(var(--d,0ms) + 160ms)}
.cbox > div:nth-child(3){transition-delay:calc(var(--d,0ms) + 240ms)}
.cbox > div:nth-child(4){transition-delay:calc(var(--d,0ms) + 320ms)}
.cbox > div:nth-child(5){transition-delay:calc(var(--d,0ms) + 400ms)}
@media(max-width:580px){.cbox > div{grid-template-columns:1fr auto;gap:6px 14px}
  .cbox .lbl{grid-column:1 / -1}}
.cbox .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft)}
.cbox .val{font-size:clamp(1.02rem,1.8vw,1.3rem);font-weight:700;letter-spacing:-.026em}
.cbox .val a:hover{color:var(--b-core)}
.on-dark .cbox{border-top-color:rgba(255,255,255,.5)}
.on-dark .cbox > div{border-bottom-color:rgba(255,255,255,.2)}
.on-dark .cbox .lbl{color:rgba(255,255,255,.5)}
.on-dark .cbox .val a:hover{color:#6d90ff}
.tbc{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--b-signal-ink);border:1px solid var(--b-signal-ink);padding:3px 8px;font-weight:600;
  white-space:nowrap;display:inline-block}
.on-dark .tbc{color:var(--b-signal);border-color:var(--b-signal)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px);
  margin-top:clamp(12px,2vw,20px)}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.steps .knot{width:42px;height:42px;border:1px solid var(--ink);display:grid;place-items:center;
  font-family:var(--mono);font-size:.76rem;font-weight:700;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.steps li:hover .knot{background:var(--b-core);border-color:var(--b-core);color:#fff}
.steps h4{margin-top:18px;font-size:1.04rem;font-weight:700;letter-spacing:-.02em}
.steps p{margin-top:9px;font-size:.92rem;color:var(--ink-mid);line-height:1.55}

/* aside callout */
.note{margin-top:clamp(26px,3.4vw,44px);border-left:3px solid var(--b-core);
  background:var(--paper-2);padding:clamp(20px,2.6vw,32px);max-width:76ch}
.note p{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.58;color:var(--ink);letter-spacing:-.016em}
.tint .note{background:var(--paper)}

/* text + picture row, picture running off the right edge */
.cov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(28px,4.4vw,72px);align-items:center}
@media(max-width:900px){.cov{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}}
.cov-text{padding-left:var(--edge);padding-right:var(--gutter)}
@media(max-width:900px){.cov-text{padding-inline:var(--edge)}}
.cov-media{position:relative;overflow:hidden;min-height:clamp(440px,66vh,780px)}
.cov-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.cov-media{min-height:clamp(300px,52vh,460px)}}
.base-list{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,36px)}
.base-list > div{padding:clamp(16px,2.2vw,24px) 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.pin{width:10px;height:10px;margin-top:7px;background:var(--b-core)}
.pin.sig{background:var(--b-signal-ink)}
.base-list h4{font-size:1.04rem;font-weight:700;letter-spacing:-.018em}
.base-list p{margin-top:6px;font-size:.93rem;color:var(--ink-mid);line-height:1.55}

/* ── 7. CLOSE + 8. FOOTER ────────────────────────────────────────────── */
.close{background:var(--b-abyss);position:relative;overflow:hidden;isolation:isolate}
.close .shell{position:relative;z-index:2}
.close .mega{max-width:15ch}
.foot{background:var(--paper-2);color:var(--ink-mid);padding-block:0 40px;position:relative;z-index:2}
/* A plain blue rule that draws across as the footer arrives. This used to be a
   moving dashed carriageway; it read as a busy stripe rather than a road. */
.foot .rule{display:block;height:6px;background:var(--b-core);margin-bottom:44px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--out)}
.foot.in-view .rule{transform:scaleX(1)}
.foot-grid > div{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--out),transform .9s var(--out)}
.foot.in-view .foot-grid > div{opacity:1;transform:none}
.foot-grid > div:nth-child(1){transition-delay:.16s}
.foot-grid > div:nth-child(2){transition-delay:.26s}
.foot-grid > div:nth-child(3){transition-delay:.36s}
.foot .fine{opacity:0;transition:opacity .9s var(--out) .5s}
.foot.in-view .fine{opacity:1}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,60px);padding-bottom:36px;border-bottom:1px solid var(--rule)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1 / -1}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot img{width:clamp(140px,15vw,182px);height:auto}
.foot h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:16px}
.foot li{padding:5px 0;font-size:.93rem}
.foot li a:hover,.foot address a:hover{color:var(--b-core)}
.foot address{font-style:normal;font-size:.93rem;line-height:1.75;margin-top:22px}
.foot .fine{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;padding-top:26px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;line-height:1.9;
  color:var(--ink-soft)}

/* ── 9. REDUCED MOTION ───────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .h2.rv,.mega.rv,.band .fig{clip-path:none;transform:none}
  .cbox > div,.foot-grid > div,.foot .fine,.drawer a{opacity:1;transform:none}
  .foot .rule,.tl::before,.break-panel::before{transform:none}
  .tl li::before{transform:scale(1)}
  .wipe{clip-path:none}.wipe > img{transform:none}
  .hero h1 .ln > span{transform:none;opacity:1}
  .hero h1,.phero h1,.phero .lede,.hero-say,.hero-acts,.hero-cue,.crumb{opacity:1}
  .hero-media img,.phero-media img{transform:scale(1);animation:none}
  .hero-media,.break-media,.why-media,.phero-media{transform:none !important}
  @view-transition{ navigation:none }
}