/* ============================================================
   WEDEB LOGISTICS & TRADING PLC — concept site
   Werq Studio · ማሳያ  |  design range: operational / industrial
   Signature device: the CORRIDOR RAIL (chevron nodes, amber "now")
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --navy:#122A43;          /* Harbor Navy — primary */
  --navy-900:#0A1A2E;      /* deeper ground for plates + footer */
  --navy-700:#1C3A5C;      /* raised navy surface */
  --navy-500:#33587F;      /* borders on dark */
  --amber:#F5A623;         /* Corridor Amber — status / action */
  --amber-700:#C97F0E;     /* amber that passes contrast on light */
  --amber-100:#FDF0D8;     /* amber wash */
  --white:#FFFFFF;         /* Signal White */
  --slate:#6B7A8C;         /* secondary text */
  --slate-400:#9BA8B6;
  --slate-200:#D3DAE2;     /* hairline */
  --slate-100:#E6EAEF;
  --paper:#F2F5F8;         /* cool page ground — deliberately not cream */
  --paper-2:#E9EEF3;

  /* operational status (tracking UI) */
  --ok:#16794F;  --ok-bg:#E4F2EB;
  --hold:#B26A00; --hold-bg:#FCF0DC;
  --late:#B3352F; --late-bg:#FBE9E7;

  /* type */
  --ff-head:'Archivo','Archivo Narrow','Helvetica Neue',Arial,sans-serif;
  --ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ff-eth:'Noto Sans Ethiopic','Nyala','Abyssinica SIL',sans-serif;
  --ff-num:'Inter',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --fs-display:clamp(2.05rem,8.4vw,4.15rem);
  --fs-h1:clamp(1.75rem,5.6vw,2.9rem);
  --fs-h2:clamp(1.375rem,4.2vw,2.05rem);
  --fs-h3:clamp(1.0625rem,2.4vw,1.25rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;
  --fs-eyebrow:.6875rem;

  --lh-tight:1.06;   /* raised for Ethiopic — see [data-lang=am] */
  --lh-head:1.18;
  --lh-body:1.62;

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:3px; --r-md:5px; --r-lg:8px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(18,42,67,.06),0 4px 14px rgba(18,42,67,.055);
  --sh-2:0 2px 4px rgba(18,42,67,.07),0 14px 38px rgba(18,42,67,.10);
  --edge:1px solid var(--slate-200);
  --wrap:1160px;
  --hdr-h:60px;
}

/* Ethiopic needs more air: no clipped ደ, ጠ, ፅ descenders/serifs */
html[data-lang="am"]{ --lh-tight:1.34; --lh-head:1.46; --lh-body:1.92; }

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font:400 var(--fs-body)/var(--lh-body) var(--ff-body);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--ff-head);font-weight:700;letter-spacing:-.018em;line-height:var(--lh-head)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:2px;border-radius:2px}
::selection{background:var(--amber);color:var(--navy-900)}

/* Amharic runs get the Ethiopic face, everywhere, automatically */
[data-i="am"]{font-family:var(--ff-eth)}
html[data-lang="en"] [data-i="am"],
html[data-lang="am"] [data-i="en"]{display:none !important}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--amber);color:var(--navy-900);padding:10px 16px;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- 3. THE CORRIDOR PRIMITIVES (signature) ---------- */
/* eyebrow: a chevron + condensed caps. The chevron IS the brand mark, reused. */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--ff-head);font-weight:600;font-size:var(--fs-eyebrow);
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber-700);
  margin:0 0 var(--s4);
}
.eyebrow::before{
  content:"";width:9px;height:9px;flex:none;
  border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
}
.eyebrow--onDark{color:var(--amber)}
html[data-lang="am"] .eyebrow{letter-spacing:.06em;text-transform:none}

/* hairline rule with a chevron notch — used to separate sections */
.rule{height:1px;background:var(--slate-200);border:0;margin:0}

/* ---------- 4. HEADER ---------- */
.hdr{
  position:sticky;top:0;z-index:40;background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.hdr__bar{display:flex;align-items:center;gap:var(--s3);height:var(--hdr-h)}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.logo svg{width:34px;height:25px;flex:none}
.logo__txt{display:flex;flex-direction:column;line-height:1;min-width:0}
.logo__name{
  font-family:var(--ff-head);font-weight:700;font-size:15px;letter-spacing:.10em;
  color:var(--white);
}
.logo__eth{font-family:var(--ff-eth);font-size:10.5px;color:var(--slate-400);letter-spacing:.02em;margin-top:3px}

.lang{display:flex;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);overflow:hidden;flex:none}
.lang button{
  background:transparent;border:0;color:var(--slate-400);cursor:pointer;
  padding:6px 9px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
}
.lang button+button{border-left:1px solid rgba(255,255,255,.18);font-family:var(--ff-eth)}
.lang button[aria-pressed="true"]{background:var(--amber);color:var(--navy-900)}

.burger{
  display:grid;place-items:center;width:38px;height:34px;flex:none;
  background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);cursor:pointer;
}
.burger span{display:block;width:16px;height:1.5px;background:var(--white);box-shadow:0 -5px 0 var(--white),0 5px 0 var(--white)}

.nav{display:none}
.nav.is-open{
  display:block;position:absolute;left:0;right:0;top:var(--hdr-h);
  background:var(--navy-700);border-bottom:3px solid var(--amber);
  box-shadow:var(--sh-2);
}
.nav a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.09);
  color:var(--white);font-size:var(--fs-sm);font-weight:500;
}
.nav a[aria-current="page"]{color:var(--amber)}
.nav a[aria-current="page"]::after{content:"";width:7px;height:7px;border-right:2px solid var(--amber);border-top:2px solid var(--amber);transform:rotate(45deg)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--ff-head);font-weight:600;font-size:.9375rem;letter-spacing:.01em;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .12s;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--amber);color:var(--navy-900)}
.btn--amber:hover{background:#FFB63F}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--navy-700)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--slate-200)}
.btn--ghost:hover{border-color:var(--navy);background:var(--white)}
.btn--ghostLight{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
.btn--ghostLight:hover{border-color:var(--amber);color:var(--amber)}
.btn--sm{padding:9px 14px;font-size:var(--fs-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn__chev{width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:none}

/* ---------- 6. DUOTONE PLATES (image placeholders, ~budgeted) ---------- */
.plate{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background-color:var(--navy-900);isolation:isolate;
}
.plate::after{ /* film grain — keeps the duotone from reading as flat CSS */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.plate__label{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:flex;align-items:center;gap:7px;max-width:calc(100% - 20px);
  padding:5px 9px;background:rgba(10,26,46,.78);backdrop-filter:blur(3px);
  border-left:2px solid var(--amber);border-radius:2px;
  font-family:var(--ff-head);font-size:9.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate-400);line-height:1.5;
}
.plate__label b{color:var(--white);font-weight:600}

/* PLATE 01 — Modjo container yard: stacked boxes, one amber tier */
.plate--yard{
  background-image:
    repeating-linear-gradient(90deg,transparent 0 96px,rgba(245,166,35,.62) 96px 130px,transparent 130px 268px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.11) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0 2px,transparent 2px 15px,rgba(255,255,255,.055) 15px 17px,transparent 17px 32px),
    linear-gradient(180deg,#20456B 0%,#16304C 46%,#0A1A2E 100%);
  background-size:100% 34%,100% 100%,100% 100%,100% 100%;
  background-position:0 44%,0 0,0 0,0 0;
  background-repeat:no-repeat,repeat,repeat,no-repeat;
}
/* PLATE 02 — Kality warehouse racks: uprights, beams, swept floor */
.plate--racks{
  background-image:
    linear-gradient(180deg,transparent 62%,rgba(245,166,35,.16) 100%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.13) 0 2px,transparent 2px 48px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 3px,transparent 3px 54px),
    radial-gradient(120% 80% at 50% 0%,#274F78 0%,#12293F 55%,#0A1A2E 100%);
  background-size:100% 100%,100% 74%,100% 74%,100% 100%;
  background-position:0 0,0 0,0 0,0 0;
  background-repeat:no-repeat;
}
/* PLATE 03 — Modjo truck queue: receding diagonal bands */
.plate--queue{
  background-image:
    repeating-linear-gradient(102deg,rgba(245,166,35,.5) 0 3px,transparent 3px 74px),
    repeating-linear-gradient(102deg,rgba(255,255,255,.16) 0 22px,transparent 22px 46px),
    linear-gradient(178deg,#0A1A2E 0%,#1B3D60 40%,#0E2338 100%);
  background-size:100% 100%,100% 100%,100% 100%;
}
/* PLATE 04 — document close-up: LC / declaration paper */
.plate--doc{
  background-color:#EFE9DC;
  background-image:
    repeating-linear-gradient(180deg,rgba(18,42,67,.13) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(90deg,transparent 0 62%,rgba(18,42,67,.05) 62% 100%),
    linear-gradient(155deg,#F6F1E6 0%,#E4DCCB 100%);
}
.plate--doc::after{opacity:.22;mix-blend-mode:multiply}

.plate--16x9{aspect-ratio:16/9}
.plate--4x3{aspect-ratio:4/3}
.plate--1x1{aspect-ratio:1/1}
.plate--tall{aspect-ratio:3/4}

/* customs stamp — drawn, not photographed */
.stamp{
  position:absolute;width:112px;height:112px;border-radius:50%;
  border:2.5px solid rgba(18,42,67,.5);display:grid;place-items:center;text-align:center;
  transform:rotate(-13deg);color:rgba(18,42,67,.62);
  font-family:var(--ff-head);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.5;
}
.stamp::before{content:"";position:absolute;inset:6px;border:1px solid rgba(18,42,67,.34);border-radius:50%}
.stamp b{display:block;font-size:12px;letter-spacing:.05em}
.stamp .eth{font-family:var(--ff-eth);font-size:10px;letter-spacing:0}

/* ---------- 7. HERO ---------- */
.hero{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.hero::before{ /* faint corridor chevrons bleeding off the right edge */
  content:"";position:absolute;top:-10%;right:-14%;width:60%;height:130%;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 26px);
  transform:skewX(-8deg);pointer-events:none;
}
.hero__inner{position:relative;padding:var(--s7) 0 var(--s6)}
.hero h1{
  font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.032em;
  margin:0 0 var(--s4);max-width:15ch;
}
html[data-lang="am"] .hero h1{letter-spacing:-.005em;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero__sub{color:#B9C6D4;font-size:1.0625rem;max-width:44ch;margin-bottom:var(--s5)}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s5);
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate-400);
}
.hero__facts span{display:flex;align-items:center;gap:7px}
.hero__facts span::before{content:"";width:5px;height:5px;background:var(--amber);flex:none}
html[data-lang="am"] .hero__facts{text-transform:none;letter-spacing:.02em}

/* homepage track shortcut */
.trackbox{margin-top:var(--s5);max-width:460px}
.trackbox__row{display:flex;gap:var(--s2)}
.trackbox input{
  flex:1;min-width:0;padding:13px 14px;border:1px solid var(--navy-500);
  background:rgba(255,255,255,.06);color:var(--white);border-radius:var(--r-sm);
  font-family:var(--ff-num);letter-spacing:.06em;
}
.trackbox input::placeholder{color:#7E93AA;letter-spacing:.06em}
.trackbox__hint{margin-top:9px;font-size:var(--fs-xs);color:var(--slate-400)}
.trackbox__hint code{
  font-family:var(--ff-num);color:var(--amber);cursor:pointer;
  border-bottom:1px dashed rgba(245,166,35,.5);
}

/* ---------- 8. THE LIVE BOARD (hero thesis) ---------- */
.board{
  background:var(--navy-700);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-2);
}
.board__head{
  display:flex;align-items:center;gap:9px;padding:11px 14px;
  background:rgba(0,0,0,.22);border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate-400);
}
html[data-lang="am"] .board__head{letter-spacing:.02em;text-transform:none}
.board__dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(22,121,79,.28);animation:breathe 2.6s ease-in-out infinite;
}
.board__clock{margin-left:auto;font-family:var(--ff-num);color:var(--white);letter-spacing:.06em}
.board__row{
  display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);align-items:center;
  padding:11px 14px;border-top:1px solid rgba(255,255,255,.07);
}
.board__row:first-of-type{border-top:0}
.board__id{
  font-family:var(--ff-num);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.05em;color:var(--white);
}
.board__where{grid-column:1;font-size:var(--fs-xs);color:var(--slate-400)}
.board__time{
  grid-row:1/3;grid-column:2;text-align:right;font-family:var(--ff-num);
  font-size:var(--fs-xs);color:#8FA2B6;line-height:1.5;
}
.board__time b{display:block;color:var(--amber);font-weight:600;font-size:var(--fs-sm)}
.board__row.is-fresh{background:rgba(245,166,35,.09)}
.board__row.is-fresh .board__id{color:var(--amber)}
.board__foot{
  padding:10px 14px;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.16);
  font-size:var(--fs-xs);color:var(--slate-400);display:flex;justify-content:space-between;gap:var(--s3);
}
.board__foot a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.4)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 9. STATUS CHIPS ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;
  white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--hold{background:var(--hold-bg);color:var(--hold)}
.chip--late{background:var(--late-bg);color:var(--late)}
.chip--now{background:var(--amber);color:var(--navy-900)}
.chip--idle{background:var(--slate-100);color:var(--slate)}
html[data-lang="am"] .chip{font-family:var(--ff-eth);letter-spacing:0}

/* ---------- 10. SECTIONS + GRIDS ---------- */
.sec{padding:var(--s7) 0}
.sec--tight{padding:var(--s6) 0}
.sec--white{background:var(--white);border-block:var(--edge)}
.sec--navy{background:var(--navy);color:var(--white)}
.sec--navy .eyebrow{color:var(--amber)}
.sec__head{max-width:56ch;margin-bottom:var(--s6)}
.sec__head p{color:var(--slate);margin-top:var(--s3)}
.sec--navy .sec__head p{color:#AEBDCC}

.grid{display:grid;gap:var(--s3)}
@media (min-width:700px){ .grid--2{grid-template-columns:1fr 1fr;gap:var(--s4)} }
@media (min-width:880px){ .grid--4{grid-template-columns:repeat(2,1fr);gap:var(--s4)} }
@media (min-width:1060px){ .grid--4{grid-template-columns:repeat(4,1fr)} }

/* service tile — the chevron index is the corridor position, not decoration */
.tile{
  background:var(--white);border:var(--edge);border-radius:var(--r-md);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
a.tile:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh-1)}
.tile__ico{
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--navy);
  display:grid;place-items:center;flex:none;
}
.tile__ico svg{width:19px;height:19px;stroke:var(--amber);fill:none;stroke-width:1.7}
.tile h3{margin:0}
.tile p{color:var(--slate);font-size:var(--fs-sm)}
.tile__more{
  margin-top:auto;padding-top:var(--s2);display:flex;align-items:center;gap:7px;
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-700);
}
.tile__more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
html[data-lang="am"] .tile__more{text-transform:none;letter-spacing:.02em}

/* checklist — "what we need from you" */
.check{display:grid;gap:var(--s2)}
.check li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--slate)}
.check li::before{
  content:"";flex:none;margin-top:7px;width:9px;height:5px;
  border-left:2px solid var(--amber-700);border-bottom:2px solid var(--amber-700);
  transform:rotate(-45deg);
}

/* ---------- 11. CORRIDOR STRIP (Djibouti → your gate) ---------- */
.corridor{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);margin-inline:-20px;padding-inline:20px;
  scrollbar-width:thin;
}
.corridor__node{
  flex:0 0 172px;scroll-snap-align:start;position:relative;
  padding:var(--s5) var(--s4) 0 0;
}
.corridor__node::before{ /* the rail */
  content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:rgba(255,255,255,.16);
}
.corridor__node::after{ /* chevron node */
  content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-right:2.5px solid var(--slate-400);border-top:2.5px solid var(--slate-400);
  transform:rotate(45deg);background:var(--navy);
}
.corridor__node.is-now::after{border-color:var(--amber);box-shadow:2px -2px 0 4px rgba(245,166,35,.18)}
.corridor__node.is-now .corridor__place{color:var(--amber)}
.corridor__node.is-hub::after{border-color:var(--amber);box-shadow:2px -2px 0 4px rgba(245,166,35,.18)}
.corridor__node.is-hub .corridor__place{color:var(--amber)}
.corridor__node:last-child::before{right:50%}
.corridor__place{font-family:var(--ff-head);font-weight:700;font-size:.9375rem;color:var(--white)}
.corridor__meta{font-size:var(--fs-xs);color:var(--slate-400);margin-top:5px;line-height:1.55}
.corridor__hint{
  font-size:var(--fs-xs);color:var(--slate-400);margin-top:var(--s2);
  display:flex;align-items:center;gap:7px;
}
@media (min-width:980px){
  .corridor{overflow:visible}
  .corridor__node{flex:1 1 0}
  .corridor__hint{display:none}
}

/* ---------- 12. VERTICAL RAIL TIMELINE (tracking / "day in a shipment") ---------- */
.rail{position:relative;padding-left:30px}
.rail::before{content:"";position:absolute;left:6px;top:6px;bottom:14px;width:2px;background:var(--slate-200)}
.rail--onDark::before{background:rgba(255,255,255,.16)}
.rail__step{position:relative;padding-bottom:var(--s5)}
.rail__step:last-child{padding-bottom:0}
.rail__step::before{ /* node */
  content:"";position:absolute;left:-30px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--slate-200);
}
.sec--white .rail__step::before{background:var(--white)}
.rail--onDark .rail__step::before{background:var(--navy);border-color:var(--navy-500)}
.rail__step.is-done::before{background:var(--ok);border-color:var(--ok)}
.rail__step.is-now::before{
  background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 5px rgba(245,166,35,.24);animation:pulse 2s ease-out infinite;
}
.rail__step.is-core::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(245,166,35,.24)}
.rail__step.is-todo::before{border-style:dashed}
@keyframes pulse{
  0%{box-shadow:0 0 0 3px rgba(245,166,35,.34)}
  70%{box-shadow:0 0 0 12px rgba(245,166,35,0)}
  100%{box-shadow:0 0 0 3px rgba(245,166,35,0)}
}
.rail__when{
  font-family:var(--ff-num);font-size:var(--fs-xs);letter-spacing:.05em;
  color:var(--slate);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
}
.rail--onDark .rail__when{color:var(--slate-400)}
.rail__what{font-family:var(--ff-head);font-weight:700;font-size:1.0625rem;margin:4px 0 3px}
.rail__where{font-size:var(--fs-sm);color:var(--slate)}
.rail--onDark .rail__where{color:#AEBDCC}
.rail__note{
  margin-top:var(--s2);padding:10px 12px;border-left:2px solid var(--amber);
  background:var(--amber-100);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm);color:#6B4E10;
}
.rail--onDark .rail__note{background:rgba(245,166,35,.12);color:#F0DCB4}
.rail__step.is-todo .rail__what,.rail__step.is-todo .rail__where{color:var(--slate-400)}

/* ---------- 13. TRACKING PAGE ---------- */
.search{
  background:var(--white);border:var(--edge);border-radius:var(--r-md);
  padding:var(--s5);box-shadow:var(--sh-1);
}
.search__row{display:grid;gap:var(--s2)}
@media (min-width:560px){ .search__row{grid-template-columns:1fr auto} }
.search input{
  width:100%;padding:14px 15px;border:1px solid var(--slate-200);border-radius:var(--r-sm);
  background:var(--paper);font-family:var(--ff-num);letter-spacing:.07em;font-size:1rem;
}
.search input:focus{background:var(--white);border-color:var(--navy)}
.search__demos{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);align-items:center}
.search__demos span{font-size:var(--fs-xs);color:var(--slate)}
.demo-id{
  font-family:var(--ff-num);font-size:var(--fs-xs);padding:5px 9px;
  background:var(--paper-2);border:1px solid var(--slate-200);border-radius:var(--r-sm);
  cursor:pointer;letter-spacing:.05em;
}
.demo-id:hover{border-color:var(--navy);background:var(--white)}

.result{
  background:var(--white);border:var(--edge);border-top:3px solid var(--amber);
  border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;
}
.result__head{padding:var(--s5);border-bottom:var(--edge)}
.result__id{
  font-family:var(--ff-num);font-size:1.25rem;font-weight:600;letter-spacing:.05em;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
}
.result__now{
  margin-top:var(--s3);font-family:var(--ff-head);font-weight:700;
  font-size:var(--fs-h3);color:var(--navy);
}
.result__eta{margin-top:6px;color:var(--slate);font-size:var(--fs-sm)}
.dl{display:grid;gap:1px;background:var(--slate-100);border-bottom:var(--edge)}
@media (min-width:620px){ .dl{grid-template-columns:repeat(3,1fr)} }
.dl div{background:var(--white);padding:var(--s4) var(--s5)}
.dl dt{
  font-family:var(--ff-head);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);
}
html[data-lang="am"] .dl dt{font-family:var(--ff-eth);letter-spacing:.01em;text-transform:none;font-size:var(--fs-xs)}
.dl dd{margin:5px 0 0;font-family:var(--ff-num);font-size:var(--fs-sm);font-weight:500}
.result__body{padding:var(--s5)}
.result__foot{
  padding:var(--s4) var(--s5);background:var(--paper);border-top:var(--edge);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;
}
.tg{
  display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:500;
  color:var(--navy);border-bottom:1px solid var(--amber);padding-bottom:2px;
}
.tg svg{width:16px;height:16px;fill:var(--amber);flex:none}

/* states: empty / error / skeleton */
.state{
  border:1px dashed var(--slate-200);border-radius:var(--r-md);background:var(--white);
  padding:var(--s6) var(--s5);text-align:center;
}
.state__ico{
  width:44px;height:44px;margin:0 auto var(--s4);border-radius:50%;
  display:grid;place-items:center;background:var(--paper-2);color:var(--slate);
  font-family:var(--ff-head);font-weight:700;font-size:1.125rem;
}
.state h3{margin-bottom:var(--s2)}
.state p{color:var(--slate);font-size:var(--fs-sm);max-width:46ch;margin-inline:auto}
.state--error{border-style:solid;border-color:#F0C9C5;background:var(--late-bg)}
.state--error .state__ico{background:#F5D6D3;color:var(--late)}
.state--error h3{color:var(--late)}
.state--error p{color:#8A3B36}

.skel{background:var(--white);border:var(--edge);border-radius:var(--r-md);padding:var(--s5)}
.skel__line{
  height:12px;border-radius:2px;margin-bottom:11px;
  background:linear-gradient(90deg,var(--slate-100) 25%,var(--paper-2) 37%,var(--slate-100) 63%);
  background-size:400% 100%;animation:shim 1.4s linear infinite;
}
.skel__line--lg{height:22px;width:52%}
.skel__line--sm{width:34%}
.skel__line--md{width:78%}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- 14. QUOTE — multi-step form ---------- */
.stepper{display:flex;gap:2px;margin-bottom:var(--s5);overflow:hidden;border-radius:var(--r-sm)}
.stepper__s{
  flex:1;min-width:0;position:relative;background:var(--paper-2);color:var(--slate);
  padding:10px 8px 10px 20px;font-family:var(--ff-head);font-weight:600;
  font-size:var(--fs-xs);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stepper__s:first-child{padding-left:12px}
.stepper__s::before{ /* chevron cut — the corridor, again */
  content:"";position:absolute;left:-9px;top:0;bottom:0;width:18px;
  background:var(--white);clip-path:polygon(0 0,52% 50%,0 100%,100% 100%,48% 50%,100% 0);
}
.stepper__s:first-child::before{display:none}
.stepper__s.is-active{background:var(--navy);color:var(--white)}
.stepper__s.is-done{background:var(--amber);color:var(--navy-900)}
.stepper__s.is-active::before,.stepper__s.is-done::before{background:var(--white)}
.stepper__n{opacity:.6;margin-right:5px;font-variant-numeric:tabular-nums}
html[data-lang="am"] .stepper__s{font-family:var(--ff-eth);letter-spacing:0}

.card{
  background:var(--white);border:var(--edge);border-radius:var(--r-md);
  padding:var(--s5);box-shadow:var(--sh-1);
}
.fset{display:grid;gap:var(--s4)}
.fstep[hidden]{display:none}
.f{display:grid;gap:7px}
.f > label,.f__legend{
  font-family:var(--ff-head);font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;
}
.f__hint{font-size:var(--fs-xs);color:var(--slate)}
.f input,.f select,.f textarea{
  width:100%;padding:12px 13px;border:1px solid var(--slate-200);border-radius:var(--r-sm);
  background:var(--paper);
}
.f input:focus,.f select:focus,.f textarea:focus{background:var(--white);border-color:var(--navy)}
.f--2{display:grid;gap:var(--s4)}
@media (min-width:620px){ .f--2{grid-template-columns:1fr 1fr} }
.req{color:var(--late);font-weight:600}
.f__err{font-size:var(--fs-xs);color:var(--late);font-weight:500;display:none}
.f.is-invalid .f__err{display:block}
.f.is-invalid input,.f.is-invalid select{border-color:var(--late);background:var(--late-bg)}

/* segmented choice (cargo type, incoterm, language) */
.seg{display:flex;flex-wrap:wrap;gap:var(--s2)}
.seg label{
  display:flex;align-items:center;gap:8px;padding:10px 13px;cursor:pointer;
  border:1px solid var(--slate-200);border-radius:var(--r-sm);background:var(--paper);
  font-size:var(--fs-sm);transition:border-color .14s,background .14s;
}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){border-color:var(--navy);background:var(--white);box-shadow:inset 0 0 0 1px var(--navy)}
.seg label:has(input:focus-visible){outline:2.5px solid var(--amber);outline-offset:2px}
.seg__tick{width:8px;height:8px;border-radius:50%;background:var(--slate-200);flex:none}
.seg label:has(input:checked) .seg__tick{background:var(--amber)}

.fnav{display:flex;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);border-top:var(--edge)}
.fnav .btn{flex:1}
@media (min-width:560px){ .fnav .btn{flex:0 0 auto;min-width:132px} }
.fnav__spacer{flex:1}

/* review table on last step */
.review{border:var(--edge);border-radius:var(--r-sm);overflow:hidden;margin-top:var(--s4)}
.review__r{display:flex;gap:var(--s3);padding:10px 13px;border-top:var(--edge);font-size:var(--fs-sm)}
.review__r:first-child{border-top:0}
.review__r dt{flex:0 0 40%;color:var(--slate);margin:0}
.review__r dd{margin:0;font-weight:500}

/* ---------- 15. LETTERHEAD (quote success) ---------- */
.letter{
  background:var(--white);border:var(--edge);border-radius:var(--r-sm);
  box-shadow:var(--sh-2);overflow:hidden;position:relative;
  max-width:640px;margin-inline:auto;
}
.letter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--navy)}
.letter::after{content:"";position:absolute;left:0;top:0;width:5px;height:34%;background:var(--amber)}
.letter__hd{
  display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4) calc(var(--s5) + 6px);border-bottom:2px solid var(--navy);
}
.letter__hd svg{width:40px;height:29px;flex:none}
.letter__co{flex:1;min-width:0}
.letter__co b{
  display:block;font-family:var(--ff-head);font-weight:700;font-size:1rem;letter-spacing:.09em;
}
.letter__co span{display:block;font-family:var(--ff-eth);font-size:var(--fs-xs);color:var(--slate);margin-top:3px}
.letter__addr{
  font-size:9.5px;line-height:1.65;color:var(--slate);text-align:right;flex:none;
  font-family:var(--ff-head);letter-spacing:.04em;
}
.letter__body{padding:var(--s6) var(--s5) var(--s5) calc(var(--s5) + 6px);position:relative}
.letter__ref{
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);
}
html[data-lang="am"] .letter__ref{font-family:var(--ff-eth);text-transform:none;letter-spacing:.02em}
.letter__q{
  font-family:var(--ff-num);font-size:clamp(1.5rem,6vw,2rem);font-weight:600;
  letter-spacing:.02em;margin:var(--s2) 0 var(--s4);
}
html[data-lang="am"] .letter__q{font-family:var(--ff-eth)}
.letter__sla{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;background:var(--amber-100);
  border-left:3px solid var(--amber);font-size:var(--fs-sm);font-weight:500;color:#6B4E10;
}
.letter__p{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--slate);max-width:52ch}
.letter__sig{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px dashed var(--slate-200);
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;justify-content:space-between;
}
.letter__sigName{font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm)}
.letter__sigRole{font-size:var(--fs-xs);color:var(--slate);margin-top:2px}
.letter__foot{
  padding:11px calc(var(--s5) + 6px);background:var(--paper);border-top:var(--edge);
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);
  font-family:var(--ff-head);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
}
.letter .stamp{right:var(--s5);top:var(--s6)}
@media (max-width:520px){ .letter .stamp{position:static;margin:var(--s5) 0 0} }

/* ---------- 16. NUMBERS / TRUST ROW ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--slate-200);border:var(--edge);border-radius:var(--r-md);overflow:hidden}
@media (min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stats div{background:var(--white);padding:var(--s5) var(--s4)}
.sec--navy .stats{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.sec--navy .stats div{background:var(--navy-700)}
.stats b{
  display:block;font-family:var(--ff-head);font-weight:700;font-size:clamp(1.75rem,6vw,2.5rem);
  letter-spacing:-.03em;line-height:1;
}
.stats span{
  display:block;margin-top:9px;font-size:var(--fs-xs);color:var(--slate);line-height:1.5;
}
.sec--navy .stats span{color:var(--slate-400)}
.stats em{font-style:normal;color:var(--amber-700)}
.sec--navy .stats em{color:var(--amber)}

/* ---------- 17. QUOTE / PULL / ABOUT ---------- */
.pull{
  border-left:3px solid var(--amber);padding:var(--s2) 0 var(--s2) var(--s5);
  font-family:var(--ff-head);font-weight:600;font-size:clamp(1.125rem,3.4vw,1.5rem);
  line-height:1.42;letter-spacing:-.012em;
}
.pull cite{display:block;margin-top:var(--s3);font:400 var(--fs-sm)/1.5 var(--ff-body);color:var(--slate);font-style:normal}
.sec--navy .pull cite{color:var(--slate-400)}

.years{border-top:var(--edge)}
.years__y{display:grid;gap:var(--s2) var(--s5);padding:var(--s5) 0;border-bottom:var(--edge)}
@media (min-width:700px){ .years__y{grid-template-columns:110px 1fr} }
.years__n{
  font-family:var(--ff-head);font-weight:700;font-size:1.375rem;letter-spacing:-.02em;
  color:var(--amber-700);
}
.years__n small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--slate);letter-spacing:.05em;margin-top:3px}
.years__t{font-size:var(--fs-sm);color:var(--navy)}
.years__y.is-low .years__n{color:var(--late)}
.years__y.is-low{background:var(--late-bg);margin-inline:-16px;padding-inline:16px}

.people{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (min-width:760px){ .people{grid-template-columns:repeat(4,1fr);gap:var(--s4)} }
.person__ph{
  aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;position:relative;
  background:linear-gradient(168deg,#20456B,#0A1A2E);
}
.person__ph::before{ /* abstracted portrait silhouette — no real people */
  content:"";position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  width:58%;aspect-ratio:1/1.28;border-radius:46% 46% 12% 12%/52% 52% 8% 8%;
  background:rgba(245,166,35,.22);
}
.person__ph::after{
  content:"";position:absolute;left:50%;top:16%;transform:translateX(-50%);
  width:29%;aspect-ratio:1;border-radius:50%;background:rgba(245,166,35,.3);
}
.person b{display:block;font-family:var(--ff-head);font-size:var(--fs-sm);font-weight:700;margin-top:11px}
.person span{display:block;font-size:var(--fs-xs);color:var(--slate);margin-top:2px;line-height:1.5}

/* ---------- 18. NOTE / CALLOUT ---------- */
.note{
  background:var(--white);border:var(--edge);border-left:3px solid var(--navy);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s4) var(--s5);
}
.note--amber{border-left-color:var(--amber);background:var(--amber-100);border-color:#F0DCB4}
.note b{font-family:var(--ff-head);font-size:var(--fs-sm);display:block;margin-bottom:5px}
.note p{font-size:var(--fs-sm);color:var(--slate)}
.note--amber p{color:#6B4E10}

/* CTA band */
.cta{background:var(--navy-900);color:var(--white);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(245,166,35,.075) 0 2px,transparent 2px 30px);
}
.cta__in{position:relative;padding:var(--s7) 0;display:grid;gap:var(--s5)}
@media (min-width:860px){ .cta__in{grid-template-columns:1fr auto;align-items:center} }
.cta h2{max-width:26ch}
.cta p{color:#AEBDCC;margin-top:var(--s3);max-width:48ch;font-size:var(--fs-sm)}
.cta__btns{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- 19. FOOTER ---------- */
.ftr{background:var(--navy-900);color:var(--slate-400);border-top:1px solid rgba(255,255,255,.09)}
.ftr__top{display:grid;gap:var(--s6);padding:var(--s7) 0 var(--s6)}
@media (min-width:820px){ .ftr__top{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.ftr h4{
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);margin-bottom:var(--s4);
}
html[data-lang="am"] .ftr h4{font-family:var(--ff-eth);text-transform:none;letter-spacing:.02em}
.ftr li+li{margin-top:11px}
.ftr a{font-size:var(--fs-sm)}
.ftr a:hover{color:var(--amber)}
.ftr__addr{font-size:var(--fs-sm);line-height:1.7}
.ftr__addr b{color:var(--white);font-weight:500}
.ftr__demo{
  display:inline-block;margin-top:var(--s4);padding:4px 9px;border:1px solid rgba(245,166,35,.4);
  border-radius:2px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);font-family:var(--ff-head);font-weight:600;
}
.ftr__bot{
  border-top:1px solid rgba(255,255,255,.09);padding:var(--s4) 0 var(--s6);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;font-size:var(--fs-xs);
}
.ftr__concept{color:var(--white)}
.ftr__concept span{font-family:var(--ff-eth)}

/* ---------- 20. 404 ---------- */
.e404{min-height:62vh;display:grid;place-items:center;text-align:center;padding:var(--s8) 0}
.e404__n{
  font-family:var(--ff-head);font-weight:700;font-size:clamp(4.5rem,22vw,9rem);
  line-height:.86;letter-spacing:-.05em;color:var(--slate-200);
}
.e404__n em{font-style:normal;color:var(--amber)}
.e404 h1{margin:var(--s4) 0 var(--s3)}
.e404 p{color:var(--slate);max-width:44ch;margin:0 auto var(--s5)}

/* ---------- 21. DESIGN SYSTEM PAGE ---------- */
.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (min-width:700px){ .swatches{grid-template-columns:repeat(4,1fr)} }
.sw{border:var(--edge);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.sw__c{height:82px}
.sw__m{padding:11px 13px;font-size:var(--fs-xs);line-height:1.55}
.sw__m b{display:block;font-family:var(--ff-head);font-size:var(--fs-sm)}
.sw__m code{font-family:var(--ff-num);color:var(--slate);letter-spacing:.03em}
.sw__m em{display:block;font-style:normal;color:var(--slate);margin-top:3px}

.specimen{border-top:var(--edge)}
.specimen__r{display:grid;gap:var(--s2) var(--s5);padding:var(--s4) 0;border-bottom:var(--edge);align-items:baseline}
@media (min-width:760px){ .specimen__r{grid-template-columns:160px 1fr} }
.specimen__k{
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);
}
.specimen__v{min-width:0}
.specimen__v p{margin:0}
.ds-grid{display:grid;gap:var(--s5)}
@media (min-width:880px){ .ds-grid{grid-template-columns:1fr 1fr} }
.ds-box{background:var(--white);border:var(--edge);border-radius:var(--r-md);padding:var(--s5)}
.ds-box > h3{margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:var(--edge)}
.ds-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.tokentbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tokentbl th,.tokentbl td{text-align:left;padding:9px 11px;border-bottom:var(--edge)}
.tokentbl th{
  font-family:var(--ff-head);font-size:var(--fs-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);font-weight:600;
}
.tokentbl code{font-family:var(--ff-num);font-size:var(--fs-xs);letter-spacing:.02em}
.tokentbl tr:last-child th,.tokentbl tr:last-child td{border-bottom:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* device frames — show mobile-first next to desktop */
.frames{display:grid;gap:var(--s5);align-items:start}
@media (min-width:980px){ .frames{grid-template-columns:300px 1fr} }
.frame{border:1px solid var(--slate-200);border-radius:var(--r-lg);background:var(--white);overflow:hidden;box-shadow:var(--sh-1)}
.frame__cap{
  padding:9px 13px;background:var(--paper);border-bottom:var(--edge);
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);display:flex;justify-content:space-between;gap:var(--s3);
}
.frame__body{padding:var(--s4)}

/* ---------- 22. RESPONSIVE UPSHIFT (desktop = enhancement) ---------- */
@media (min-width:860px){
  :root{--fs-body:1.0625rem;--hdr-h:70px}
  .wrap{padding-inline:40px}
  .burger{display:none}
  .nav{display:flex !important;position:static;align-items:center;gap:var(--s1);background:transparent;border:0;box-shadow:none}
  .nav a{
    border:0;padding:9px 12px;border-radius:var(--r-sm);color:#C3CFDB;
    font-size:.9375rem;position:relative;
  }
  .nav a:hover{color:var(--white);background:rgba(255,255,255,.07)}
  .nav a[aria-current="page"]{color:var(--white)}
  .nav a[aria-current="page"]::after{
    content:"";position:absolute;left:12px;right:12px;bottom:2px;top:auto;
    width:auto;height:2px;background:var(--amber);border:0;transform:none;
  }
  .nav .btn{margin-left:var(--s3)}
  .hero__inner{
    display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s8);
    align-items:center;padding:var(--s9) 0 var(--s8);
  }
  .sec{padding:var(--s9) 0}
  .sec--tight{padding:var(--s7) 0}
  .years__y.is-low{margin-inline:-24px;padding-inline:24px}
}
@media (min-width:1120px){ .hero__inner{gap:var(--s9)} }

/* split layout: text + plate */
.split{display:grid;gap:var(--s5)}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
  .split--wide{grid-template-columns:1.15fr .85fr}
  .split--flip > *:first-child{order:2}
}

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