/* ============================================================
   RUNEX GROUP LLC — discipline landing pages
   landing.css : page-specific layout + signature animation for
   consulting / logistics / manufacturing / equipment.

   Inherits every token, hairline, button and reveal from style.css.
   Adds nothing to the global voice — each page here is one distinct
   layout with ONE signature motion, all in the same blue+green
   register on light ground. Nothing below overrides the shared
   identity; it extends it.

   Modules are namespaced so a single sheet serves four pages with
   zero collision:
     ds- Dossier        (consulting)
     lg- In Transit     (logistics)
     mf- Specification  (manufacturing)
     eq- Catalogue      (equipment)
   ============================================================ */

:root{
  /* one exponential ease-out for every authored moment on these pages */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --line-3:rgba(14,107,168,.45);
}

/* a shared, quieter interior hero shell the four pages specialise */
.lp-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper);
  isolation:isolate;min-height:74vh;min-height:74svh;display:flex;align-items:flex-end}
.lp-hero .wrap{position:relative;z-index:3;width:100%;padding-top:180px;padding-bottom:78px}
.lp-hero h1{max-width:18ch;margin-bottom:26px}
.lp-hero .lead{max-width:54ch}
.lp-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  background:var(--grad)}

/* eyebrow that also carries a running index on the discipline pages */
.lp-eyebrow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.lp-eyebrow .idx{font-family:var(--sans);font-size:.86rem;color:var(--blue);
  font-weight:var(--w-heavy);letter-spacing:.16em;font-variant-numeric:tabular-nums}

/* section kicker used inside the body (matches .sec-head rhythm) */
.lp-kick{max-width:780px;margin-bottom:70px}
.lp-kick h2{margin-bottom:22px}

/* a reusable "reveal + rise" that layers over main.js's .rv without fighting it */
.rise{opacity:0;transform:translateY(30px)}
.rise.in{opacity:1;transform:none;transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:var(--d,0s)}

/* ============================================================
   01 · CONSULTING — "The Dossier"
   Editorial audit file. A vertical process spine that fills as you
   scroll, stage cards that tick in with a drawn checkmark, and a
   full-bleed manifesto pull-quote.
   ============================================================ */
.ds-hero .wrap{max-width:var(--wrap)}
/* faint ruled-paper / margin lines behind the dossier hero */
.ds-hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 54% at 84% 6%,rgba(3,194,214,.2),transparent 62%),
    radial-gradient(50% 60% at 100% 58%,rgba(30,158,106,.14),transparent 62%),
    linear-gradient(178deg,#FCFDFE,#E7F1F8 82%)}
.ds-hero-fx::before{content:"";position:absolute;inset:0;opacity:.9;
  background-image:repeating-linear-gradient(180deg,transparent 0 46px,var(--line-soft) 46px 47px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
/* a drawn "case file" stamp, upper-right */
.ds-stamp{position:absolute;z-index:2;top:30%;right:5%;width:min(200px,34vw);opacity:.42;
  transform:rotate(-9deg);pointer-events:none}
.ds-stamp text{font-family:var(--sans);font-weight:var(--w-heavy);letter-spacing:.14em}

/* file meta strip under the hero */
.ds-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.ds-meta div{background:var(--surface);padding:26px 30px;min-width:0}
.ds-meta dt{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);font-weight:var(--w-heavy);margin-bottom:10px}
.ds-meta dd{font-family:var(--sans);font-size:1.02rem;color:var(--ink);line-height:1.34;
  font-weight:var(--w-heavy);letter-spacing:-.018em}

/* the manifesto pull-quote */
.ds-quote{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(76% 130% at 10% 0%,rgba(14,107,168,.09),transparent 62%),
    radial-gradient(60% 120% at 96% 100%,rgba(30,158,106,.1),transparent 60%),
    var(--paper-2)}
.ds-quote blockquote{max-width:min(780px,92%);margin:0}
.ds-quote q{font-family:var(--sans);font-weight:var(--w-book);font-size:clamp(1.9rem,3.8vw,2.9rem);
  line-height:1.2;letter-spacing:-.034em;color:var(--ink);quotes:none;text-wrap:balance}
.ds-quote q em{color:var(--blue-deep);font-style:normal;font-weight:var(--w-heavy)}
.ds-quote .ds-cite{display:flex;align-items:center;gap:14px;margin-top:38px;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);font-weight:var(--w-heavy)}
.ds-quote .ds-cite::before{content:"";width:40px;height:2px;border-radius:2px;background:var(--grad)}

/* THE SIGNATURE — vertical process timeline */
.ds-time{position:relative;max-width:920px;margin:0 auto;padding-left:12px}
.ds-track{position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line-2);border-radius:2px}
.ds-fill{position:absolute;left:11px;top:6px;width:2px;height:0;transform-origin:top;border-radius:2px;
  background:linear-gradient(180deg,#03C2D6,#1E9E6A 46%,#0E6BA8);
  box-shadow:0 0 14px rgba(14,107,168,.35);will-change:height}
.ds-stage{position:relative;padding:0 0 62px 62px;min-height:56px}
.ds-stage:last-child{padding-bottom:0}
.ds-node{position:absolute;left:-1px;top:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface);display:grid;place-items:center;
  transition:border-color .5s var(--ease-out),background .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.ds-node svg{width:14px;height:14px;overflow:visible}
.ds-node svg path{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .7s var(--ease-out) .12s}
.ds-stage.in .ds-node{border-color:var(--green);background:#fff;
  box-shadow:0 0 0 4px rgba(30,158,106,.12),0 8px 20px -10px rgba(6,35,56,.35)}
.ds-stage.in .ds-node svg path{stroke-dashoffset:0}
.ds-step{font-family:var(--sans);font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);font-weight:var(--w-heavy);margin-bottom:12px;display:block}
.ds-stage h3{font-size:1.45rem;color:var(--ink);margin-bottom:12px;letter-spacing:-.028em}
.ds-stage p{font-size:1rem;color:var(--ink-2);line-height:1.74;max-width:60ch}
/* stage body rises independently for a layered tick-in feel */
.ds-stage .ds-body{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-out) .1s,transform .8s var(--ease-out) .1s}
.ds-stage.in .ds-body{opacity:1;transform:none}

/* THE SECOND MOTION — audit checklist that draws its ticks in */
.ds-audit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ds-item{background:var(--surface);padding:30px 34px;display:flex;gap:20px;align-items:flex-start;
  min-width:0;transition:background .4s var(--ease-out)}
.ds-item:hover{background:#FBFDFE}
.ds-check{flex:none;width:26px;height:26px;margin-top:2px}
.ds-check path{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset .75s var(--ease-out) var(--d,0s)}
.ds-check circle{fill:none;stroke:var(--line-2);stroke-width:1}
.ds-item.in .ds-check path{stroke-dashoffset:0}
.ds-item b{display:block;font-family:var(--sans);font-size:1.05rem;color:var(--ink);
  font-weight:var(--w-heavy);margin-bottom:6px;letter-spacing:-.018em}
.ds-item span{font-size:.92rem;color:var(--ink-3);line-height:1.6}

/* ============================================================
   02 · LOGISTICS — "In Transit"
   Motion. A live SVG route network with light pulses running the
   lanes, a horizontal coverage marquee, and a chain-of-custody
   stepper with a signal travelling the line.
   ============================================================ */
/* the hero photograph is a warm, dark long-exposure. Inverted and
   tinted it becomes what it actually depicts: lanes drawn on paper. */
.lg-hero{min-height:82vh;min-height:82svh;background:var(--paper)}
.lg-hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:center 60%;
  filter:grayscale(1) invert(1) sepia(.62) hue-rotate(158deg) saturate(2.1) brightness(1.04) contrast(.86);
  opacity:.55;mix-blend-mode:multiply}
.lg-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(56% 52% at 80% 14%,rgba(3,194,214,.22),transparent 62%),
    radial-gradient(46% 56% at 100% 62%,rgba(30,158,106,.15),transparent 62%),
    linear-gradient(96deg,rgba(248,251,253,.94) 22%,rgba(244,248,251,.7) 52%,rgba(238,246,251,.56) 74%,rgba(232,242,249,.9) 100%),
    linear-gradient(180deg,rgba(252,253,254,.8),transparent 30%,transparent 56%,rgba(233,242,249,.96) 100%)}
.lg-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;
  background-image:var(--grain);background-size:160px;mix-blend-mode:multiply}
/* a small live "in transit" status pill */
.lg-status{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--sans);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green-deep);font-weight:var(--w-heavy);border:1px solid rgba(30,158,106,.34);border-radius:100px;
  padding:9px 16px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lg-status i{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(30,158,106,.7);animation:lg-beacon 2.4s var(--ease-out) infinite}
@keyframes lg-beacon{0%{box-shadow:0 0 0 0 rgba(30,158,106,.6)}70%{box-shadow:0 0 0 9px rgba(30,158,106,0)}100%{box-shadow:0 0 0 0 rgba(30,158,106,0)}}

/* THE SIGNATURE — route network */
.lg-net-wrap{position:relative;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);overflow:hidden;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:44px 44px}
.lg-net-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 82% at 50% 40%,transparent 42%,rgba(233,242,249,.75))}
.lg-net{display:block;width:100%;height:auto}
.lg-lane{fill:none;stroke:var(--line-2);stroke-width:1.4}
.lg-pulse{fill:none;stroke:var(--aqua);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:4 200;filter:drop-shadow(0 0 5px rgba(3,194,214,.85));
  animation:lg-run 3.6s linear infinite}
@keyframes lg-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-408}}
.lg-hub{fill:#fff;stroke:var(--blue);stroke-width:1.6}
.lg-hub-core{fill:var(--blue-deep)}
.lg-ping{fill:none;stroke:var(--green);stroke-width:1.6;transform-box:fill-box;transform-origin:center;
  animation:lg-ping 3s var(--ease-out) infinite}
@keyframes lg-ping{0%{transform:scale(.5);opacity:.9}80%,100%{transform:scale(2.6);opacity:0}}
.lg-city{font-family:var(--sans);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--ink-3);font-weight:var(--w-heavy)}
.lg-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--sans);font-size:.74rem;color:var(--ink-3);letter-spacing:.02em}
.lg-legend span{display:inline-flex;align-items:center;gap:9px}
.lg-legend i{width:22px;height:2px;border-radius:2px;background:var(--aqua-deep);flex:none}
.lg-legend i.dim{background:var(--line-3)}

/* THE SECOND MOTION — coverage marquee */
.lg-marquee{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:34px 0;background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lg-track{display:flex;width:max-content;gap:0;animation:lg-scroll 46s linear infinite;will-change:transform}
.lg-marquee:hover .lg-track{animation-play-state:paused}
@keyframes lg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lg-chip{display:inline-flex;align-items:center;gap:16px;padding:0 30px;flex:none;
  font-family:var(--sans);font-size:1.5rem;color:var(--ink-2);font-weight:var(--w-book);
  letter-spacing:-.028em;white-space:nowrap}
.lg-chip::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua);
  margin-left:14px}
.lg-chip.gold{color:var(--blue-deep);font-weight:var(--w-heavy)}

/* chain-of-custody stepper with a travelling signal */
.lg-chain{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.lg-chain-line{position:absolute;left:0;right:0;top:23px;height:2px;background:var(--line-2)}
.lg-chain-line::after{content:"";position:absolute;top:0;left:0;width:120px;height:2px;
  background:linear-gradient(90deg,transparent,var(--aqua),transparent);
  box-shadow:0 0 10px rgba(3,194,214,.7);animation:lg-signal 5s linear infinite}
@keyframes lg-signal{from{transform:translateX(-120px)}to{transform:translateX(calc(100% + 120px))}}
.lg-node2{position:relative;padding:0 24px;text-align:left;min-width:0}
.lg-dot{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);
  display:grid;place-items:center;margin-bottom:24px;position:relative;z-index:1;
  box-shadow:0 8px 20px -14px rgba(6,35,56,.5)}
.lg-dot svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.7}
.lg-node2 b{display:block;font-family:var(--sans);font-size:1.1rem;color:var(--ink);
  font-weight:var(--w-heavy);margin-bottom:8px;letter-spacing:-.02em}
.lg-node2 span{font-size:.88rem;color:var(--ink-3);line-height:1.6;display:block;max-width:26ch}

/* pause the continuous logistics motion while it is off-screen (JS toggles the class) */
.lg-net-wrap.viz-paused .lg-pulse,.lg-net-wrap.viz-paused .lg-ping{animation-play-state:paused}
.lg-marquee.viz-paused .lg-track{animation-play-state:paused}
.lg-chain.viz-paused .lg-chain-line::after{animation-play-state:paused}

/* ============================================================
   03 · MANUFACTURING — "To Specification"
   Precision. A blueprint spec sheet whose hairlines and corner
   ticks draw themselves in, a count-up to the one documented figure,
   and a spec readout that cycles the real capabilities.
   ============================================================ */
.mf-hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 54% at 82% 8%,rgba(3,194,214,.21),transparent 62%),
    radial-gradient(50% 56% at 4% 96%,rgba(14,107,168,.14),transparent 64%),
    linear-gradient(178deg,#FCFDFE,#E6F0F8 84%)}
/* blueprint grid ruling behind hero, masked to a soft field */
.mf-hero-fx::before{content:"";position:absolute;inset:0;opacity:.9;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(80% 80% at 60% 30%,#000,transparent 78%);
  mask-image:radial-gradient(80% 80% at 60% 30%,#000,transparent 78%)}

/* count-up band */
.mf-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mf-cell{background:var(--surface);padding:52px 40px;min-width:0;position:relative;overflow:hidden}
.mf-cell::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.mf-cell.in::before{transform:scaleX(1)}
.mf-num{font-family:var(--sans);font-size:clamp(2.6rem,4.8vw,4rem);color:var(--blue-deep);
  font-weight:var(--w-heavy);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  margin-bottom:16px}
.mf-num .u{font-size:.42em;color:var(--green-deep);margin-left:2px;letter-spacing:-.02em}
.mf-cell p{font-size:.86rem;color:var(--ink-3);line-height:1.6;letter-spacing:.01em;max-width:30ch}

/* THE SIGNATURE — blueprint spec sheet */
.mf-blue{position:relative;border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(160deg,#FFFFFF,#EAF2F9 78%);padding:0;overflow:hidden}
.mf-blue-grid{position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:38px 38px}
/* the drawn frame: an SVG rect + corner ticks whose stroke draws in */
.mf-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.mf-frame rect,.mf-frame line{fill:none;stroke:var(--blue);stroke-width:1.2;
  stroke-dasharray:var(--len,100);stroke-dashoffset:var(--len,100);
  transition:stroke-dashoffset 1.6s var(--ease-out)}
.mf-blue.in .mf-frame rect,.mf-blue.in .mf-frame line{stroke-dashoffset:0}
.mf-spec{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr)}
.mf-row{padding:40px 44px;border-top:1px solid var(--line);border-left:1px solid var(--line);min-width:0}
.mf-row:nth-child(-n+2){border-top:none}
.mf-row:nth-child(odd){border-left:none}
.mf-tag{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--blue);font-weight:var(--w-heavy);margin-bottom:18px}
.mf-tag .ref{color:var(--ink-4);letter-spacing:.14em}
.mf-row h3{font-size:1.24rem;color:var(--ink);margin-bottom:12px;letter-spacing:-.022em}
.mf-row p{font-size:.94rem;color:var(--ink-3);line-height:1.7;max-width:44ch}
.mf-dim{position:absolute;font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;
  color:var(--ink-4);font-weight:var(--w-heavy);text-transform:uppercase;z-index:3}

/* cycling spec readout */
.mf-readout{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:44px 46px;
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden}
.mf-readout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad)}
.mf-readout .lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);font-weight:var(--w-heavy);flex:none}
.mf-rotor{position:relative;min-height:2.4em;flex:1;min-width:min(100%,260px)}
.mf-rotor li{position:absolute;inset:0;display:flex;align-items:center;
  font-family:var(--sans);font-weight:var(--w-book);font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);
  letter-spacing:-.03em;opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.mf-rotor li.on{opacity:1;transform:none}
.mf-rotor li em{color:var(--blue-deep);font-style:normal;font-weight:var(--w-heavy);margin-right:.4ch}

/* ============================================================
   04 · EQUIPMENT — "The Catalogue"
   A product index. A horizontal scroll-snap rail of category cards
   with a border that traces itself on hover and a spec panel
   that opens beneath.
   ============================================================ */
.eq-hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 54% at 86% 10%,rgba(3,194,214,.21),transparent 60%),
    radial-gradient(46% 56% at 2% 92%,rgba(30,158,106,.14),transparent 62%),
    linear-gradient(178deg,#FCFDFE,#E7F1F8 84%)}
.eq-index{display:flex;gap:0;flex-wrap:wrap;margin-top:40px;border-top:1px solid var(--line)}
.eq-index a{flex:1 1 auto;min-width:180px;padding:22px 26px 22px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;transition:color .3s;color:var(--ink-2)}
.eq-index a:hover{color:var(--blue-deep)}
.eq-index .n{font-family:var(--sans);font-weight:var(--w-heavy);color:var(--blue);font-size:.84rem;
  letter-spacing:.14em;font-variant-numeric:tabular-nums}
.eq-index b{font-family:var(--sans);font-weight:var(--w-heavy);font-size:1.06rem;letter-spacing:-.022em}

/* rail header with scroll hint */
.eq-railhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:44px;flex-wrap:wrap}
.eq-hint{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:var(--w-heavy)}
.eq-hint svg{width:34px;height:10px;stroke:var(--blue);fill:none;stroke-width:1.4}
.eq-hint .bar{width:34px;height:10px;position:relative}
.eq-hint .bar::before{content:"";position:absolute;top:4px;left:0;width:100%;height:2px;background:var(--line-2)}
.eq-hint .bar::after{content:"";position:absolute;top:4px;left:0;width:14px;height:2px;background:var(--blue);
  animation:eq-hint 2.6s var(--ease-out) infinite}
@keyframes eq-hint{0%{transform:translateX(0)}60%{transform:translateX(20px)}100%{transform:translateX(0)}}

/* THE SIGNATURE — horizontal scroll-snap rail */
.eq-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:22px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:6px 40px 30px;
  margin:0 calc(-1 * 40px);scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.eq-rail::-webkit-scrollbar{height:6px}
.eq-rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:100px}
.eq-rail::-webkit-scrollbar-track{background:transparent}
.eq-card{position:relative;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 32px 30px;min-width:0;display:flex;flex-direction:column;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.eq-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -34px rgba(6,35,56,.45)}
/* the border that traces itself on hover / focus */
.eq-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* non-scaling-stroke + preserveAspectRatio:none makes the dash pattern leak a
   stub at rest, so the resting state is gated on opacity rather than the dash */
.eq-trace rect{fill:none;stroke:var(--blue);stroke-width:1.5;
  stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
  transition:stroke-dashoffset .9s var(--ease-out),opacity .2s linear}
.eq-card:hover .eq-trace rect,.eq-card:focus-within .eq-trace rect{stroke-dashoffset:0;opacity:1}
.eq-card .num{font-family:var(--sans);font-weight:var(--w-heavy);font-size:.82rem;color:var(--blue);
  letter-spacing:.16em;font-variant-numeric:tabular-nums;margin-bottom:22px}
.eq-glyph{width:44px;height:44px;margin-bottom:26px;stroke:var(--blue);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.eq-card h3{font-size:1.3rem;color:var(--ink);margin-bottom:12px;letter-spacing:-.026em}
.eq-card>p{font-size:.92rem;color:var(--ink-3);line-height:1.66;margin-bottom:20px}
/* the spec panel that opens beneath (grid-rows trick = smooth, no max-height jank) */
.eq-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out);
  margin-top:auto}
.eq-reveal>div{overflow:hidden;min-height:0}
.eq-card:hover .eq-reveal,.eq-card:focus-within .eq-reveal{grid-template-rows:1fr}
.eq-reveal ul{border-top:1px solid var(--line);padding-top:18px}
.eq-reveal li{font-size:.86rem;color:var(--ink-2);padding:7px 0 7px 20px;position:relative;line-height:1.5}
.eq-reveal li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:2px;
  border-radius:2px;background:var(--green)}
/* persistent "specs" hint that fades when the panel opens */
.eq-more{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);font-weight:var(--w-heavy);display:flex;align-items:center;gap:9px;padding-top:16px;
  border-top:1px solid var(--line);transition:opacity .4s}
.eq-card:hover .eq-more,.eq-card:focus-within .eq-more{opacity:0}
.eq-more::after{content:"";width:14px;height:2px;border-radius:2px;background:var(--grad)}

/* supported / specified split */
.eq-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.eq-half{background:var(--surface);padding:52px 48px;min-width:0}
.eq-half h3{font-size:1.5rem;color:var(--ink);margin-bottom:16px;letter-spacing:-.028em}
.eq-half p{font-size:.98rem;color:var(--ink-2);line-height:1.74;max-width:46ch}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .lg-chain,.mf-counters{gap:0}
}
@media(max-width:980px){
  .lp-hero .wrap{padding-top:150px;padding-bottom:64px}
  .ds-meta{grid-template-columns:1fr 1fr}
  .ds-audit{grid-template-columns:1fr}
  .mf-counters{grid-template-columns:1fr 1fr 1fr}
  .mf-spec{grid-template-columns:1fr}
  .mf-row{border-left:none !important;border-top:1px solid var(--line) !important}
  .mf-row:first-child{border-top:none !important}
  .lg-chain{grid-template-columns:1fr 1fr;gap:36px 0}
  .lg-chain-line{display:none}
  .eq-two{grid-template-columns:1fr}
}
@media(max-width:760px){
  .lp-hero{min-height:70vh;min-height:70svh}
  .lp-hero .wrap{padding-top:124px;padding-bottom:52px}
  .lg-hero,.lp-hero.lg-hero{min-height:76vh}
  .lp-kick{margin-bottom:52px}
  .ds-meta{grid-template-columns:1fr}
  .ds-audit{grid-template-columns:1fr}
  .ds-stage{padding-left:52px;padding-bottom:48px}
  .mf-counters{grid-template-columns:1fr}
  .mf-readout{gap:16px 22px;padding:34px 28px}
  .mf-rotor{min-height:4.4em}
  .lg-chain{grid-template-columns:1fr}
  .lg-chip{font-size:1.2rem;padding:0 22px}
  .eq-rail{grid-auto-columns:82%;padding-left:22px;padding-right:22px;margin:0 -22px}
  .eq-half{padding:40px 28px}
  .eq-index a{min-width:140px}
  /* on touch, show the spec panel by default — no hover to rely on */
  .eq-reveal{grid-template-rows:1fr}
  .eq-more{display:none}
  .eq-trace rect{stroke-dashoffset:0;opacity:.45;transition:none}
}
@media(max-width:420px){
  .ds-quote q{font-size:clamp(1.6rem,7vw,2rem)}
}

/* ============================================================
   REDUCED MOTION — one place, everything off, all end-states shown
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .rise,.rise.in{opacity:1;transform:none;transition:none}
  .ds-stage .ds-body{opacity:1;transform:none;transition:none}
  .ds-node svg path,.ds-check path,.eq-trace rect,.mf-frame rect,.mf-frame line{
    stroke-dashoffset:0 !important;transition:none}
  .ds-stage.in .ds-node,.ds-node{border-color:var(--green)}
  .lg-pulse,.lg-ping,.lg-track,.lg-status i,.lg-chain-line::after,.eq-hint .bar::after{animation:none !important}
  .lg-pulse{stroke-dasharray:none;opacity:.55}
  .mf-cell::before{transform:scaleX(1);transition:none}
  .mf-rotor li{position:relative;opacity:1;transform:none;transition:none}
  .eq-reveal{grid-template-rows:1fr}
  .eq-more{display:none}
}

/* ============================================================
   v5.2 — the two panels that read as empty graph paper
   Both were a white sheet with a hairline grid, which leaves the
   drawing floating on nothing. Replaced with a deep, lit ground
   in the brand blues so the artwork sits IN a space.
   ============================================================ */

/* ---------- LOGISTICS: the network sits over a lit night map ---------- */
.lg-net-wrap{
  background:
    radial-gradient(900px 520px at 50% 34%, rgba(30,158,106,.16), transparent 62%),
    radial-gradient(760px 480px at 12% 88%, rgba(3,194,214,.14), transparent 60%),
    radial-gradient(820px 500px at 88% 12%, rgba(14,107,168,.20), transparent 60%),
    linear-gradient(168deg,#0B2E4F 0%,#0A3A5E 46%,#062338 100%);
  background-image:
    radial-gradient(900px 520px at 50% 34%, rgba(30,158,106,.16), transparent 62%),
    radial-gradient(760px 480px at 12% 88%, rgba(3,194,214,.14), transparent 60%),
    radial-gradient(820px 500px at 88% 12%, rgba(14,107,168,.20), transparent 60%),
    linear-gradient(168deg,#0B2E4F 0%,#0A3A5E 46%,#062338 100%);
  background-size:auto;
  border-color:rgba(3,194,214,.28);
  box-shadow:0 40px 90px -60px rgba(1,75,130,.8), inset 0 1px 0 rgba(255,255,255,.06)}
/* faint latitude arcs instead of a square grid — it reads as territory */
.lg-net-wrap::before{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.5;
  background-image:
    repeating-radial-gradient(ellipse 120% 60% at 50% 120%,
      transparent 0 58px, rgba(143,205,235,.10) 58px 59px);
  -webkit-mask-image:radial-gradient(70% 75% at 50% 45%,#000 35%,transparent 78%);
          mask-image:radial-gradient(70% 75% at 50% 45%,#000 35%,transparent 78%)}
/* vignette, not a white-out */
.lg-net-wrap::after{
  background:radial-gradient(66% 84% at 50% 40%,transparent 46%,rgba(6,35,56,.62))}
/* re-light the drawing for the dark ground */
.lg-lane{stroke:rgba(160,206,232,.42);stroke-width:1.5}
.lg-net text,.lg-net .lg-label{fill:#CFE6F5}
.lg-net circle{stroke:#7FD6E8}
.lg-net-wrap .lg-hub-ring{stroke:rgba(127,214,232,.5)}

/* ---------- MANUFACTURING: the spec sheet becomes a lit drawing ---------- */
.mf-blue{
  background:
    radial-gradient(780px 460px at 78% 6%, rgba(3,194,214,.16), transparent 60%),
    radial-gradient(700px 460px at 8% 94%, rgba(30,158,106,.14), transparent 60%),
    linear-gradient(158deg,#0C3355 0%,#0A3B60 52%,#062338 100%);
  border-color:rgba(3,194,214,.26);
  box-shadow:0 40px 90px -62px rgba(1,75,130,.8)}
/* the grid stays, but as a faint drafting ruling on the dark sheet,
   faded out at the edges so it never reads as graph paper */
.mf-blue-grid{opacity:.55;
  background-image:
    linear-gradient(rgba(150,205,235,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,205,235,.10) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(78% 80% at 50% 50%,#000 30%,transparent 84%);
          mask-image:radial-gradient(78% 80% at 50% 50%,#000 30%,transparent 84%)}
.mf-frame rect,.mf-frame line{stroke:rgba(127,214,232,.75)}
.mf-row{border-color:rgba(150,205,235,.16)}
.mf-tag{color:#7FD6E8}
.mf-tag .ref{color:rgba(200,228,246,.62)}
.mf-row h3{color:#EAF3FA}
.mf-row p{color:rgba(183,210,230,.9)}
.mf-dim{color:rgba(200,228,246,.6)}

/* the legend and city labels live INSIDE the panel, which is now dark */
.lg-net-wrap .lg-legend{color:rgba(200,228,246,.78);padding:0 30px 26px;margin-top:18px}
.lg-net-wrap .lg-legend i{background:#4FD8E6}
.lg-net-wrap .lg-legend i.dim{background:rgba(160,206,232,.42)}
.lg-city{fill:#D6EAF7}

/* ============================================================
   v5.3 mobile — heroes were sitting a screen-height down
   ------------------------------------------------------------
   .lp-hero carried a 124px top pad AND a 70vh min-height, so on a
   phone the headline landed a third of the way down behind a large
   empty band. The nav is ~76px, so the pad only needs to clear it.
   ============================================================ */
@media(max-width:760px){
  .lp-hero{min-height:0}
  .lp-hero .wrap{padding-top:96px;padding-bottom:44px}
  .lp-hero h1{max-width:none}
}
@media(max-width:480px){
  .lp-hero .wrap{padding-top:88px;padding-bottom:38px}
}

/* ============================================================
   MANUFACTURING — the drafting grid is out
   ------------------------------------------------------------
   The graph ruling read as graph paper at any opacity. Replaced
   with a lit blue/green field: a broad aurora, one soft diagonal
   blade echoing the mark, and a faint horizon rule. No lattice.
   ============================================================ */
.mf-blue-grid{
  background-image:none;
  opacity:1;
  -webkit-mask-image:none;mask-image:none;
  background:
    radial-gradient(620px 380px at 82% 4%, rgba(3,194,214,.22), transparent 62%),
    radial-gradient(560px 400px at 6% 96%, rgba(30,158,106,.20), transparent 62%),
    radial-gradient(900px 520px at 50% 50%, rgba(14,107,168,.14), transparent 70%)}
/* one soft diagonal blade, the same 19° the hero uses */
.mf-blue-grid::after{content:"";position:absolute;inset:-30%;
  background:linear-gradient(100deg,transparent 34%,rgba(120,220,235,.16) 47%,transparent 60%);
  transform:rotate(-19deg);filter:blur(28px)}
/* a single horizon instead of a lattice */
.mf-blue::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(127,214,232,.28),transparent)}

/* ============================================================
   LOGISTICS hero — the source photo is warm; the duotone
   overlay was only partially covering it, so brown showed
   through. Desaturate first, then colour.
   ============================================================ */
.lg-hero .lp-hero-media,.lg-hero img,.lg-hero .hero-media{
  filter:grayscale(1) contrast(1.06) brightness(1.12) !important}
.lg-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(146deg,#014B82 0%,#0E6BA8 40%,#1E9E6A 78%,#03C2D6 100%);
  mix-blend-mode:color;opacity:1}

/* The hero is a flex box with align-items:flex-end and a 74vh floor, so on a
   phone the copy sat pinned to the bottom of a near-full-screen band with the
   whole top empty. Zeroing the floor alone wasn't enough — the alignment has
   to go to the top too, and the decorative stamp (which was landing on top of
   the headline at this width) comes out. */
@media(max-width:760px){
  .lp-hero{min-height:0 !important;align-items:flex-start}
  .lp-hero .wrap{padding-top:92px !important;padding-bottom:46px !important}
  .lg-hero,.lp-hero.lg-hero{min-height:0 !important}
  .ds-stamp{display:none}
}
@media(max-width:480px){
  .lp-hero .wrap{padding-top:84px !important;padding-bottom:40px !important}
}

/* .lp-hero is a <section>, so it also inherited the global section padding —
   82px on mobile — on top of the wrap's own 84px. Two stacked paddings under
   a fixed nav is where the empty band came from. The wrap owns the spacing. */
@media(max-width:760px){
  .lp-hero{padding-top:0 !important;padding-bottom:0 !important}
  .lp-hero .wrap{padding-top:40px !important;padding-bottom:44px !important}
}
@media(max-width:480px){
  .lp-hero .wrap{padding-top:34px !important;padding-bottom:38px !important}
}

/* The manufacturing hero carried a second graph ruling of its own
   (.mf-hero-fx::before) separate from the spec sheet's. Out it goes; the
   aurora and a single diagonal blade carry the panel instead. */
.mf-hero-fx::before{
  background-image:none;
  background:linear-gradient(104deg,transparent 32%,rgba(120,220,235,.16) 48%,transparent 64%);
  transform:rotate(-16deg);filter:blur(30px);inset:-30%;opacity:1}

/* The logistics hero duotone came out fully saturated, which fights the copy
   sitting on top of it. Lift and mute it so it reads as a tinted photograph
   rather than a colour field. */
.lg-hero::after{opacity:.72}
.lg-hero .lp-hero-media,.lg-hero img,.lg-hero .hero-media{
  filter:grayscale(1) contrast(.92) brightness(1.42) !important}