/* ========== TOKENS ========== */
:root{
  --canvas:#071324;
  --panel:#0E2138;
  --panel-2:#0B1B2E;
  --accent:#D7A63C;
  --accent-hover:#EDBE57;
  --accent-muted:rgba(215,166,60,.18);
  --text-secondary:#9DB0C6;
  --text-primary:#EEF3F9;
  --border-strong:#4E6E9E;
  --hairline:rgba(157,176,198,.16);

  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(3,8,16,.95),0 3px 12px rgba(3,8,16,.8),0 10px 44px rgba(3,8,16,.82);
  --gutter:clamp(16px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .8s var(--ease);
}
body.ready{opacity:1}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 118;line-height:1.02;margin:0;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#071324;padding:12px 18px;font-weight:600;border-radius:0 0 8px 0}
.skip:focus{left:0}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}

/* ========== ENVIRONMENT LAYER ========== */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(60% 45% at 22% 18%,rgba(215,166,60,.10),transparent 62%),
    radial-gradient(52% 40% at 80% 72%,rgba(78,110,158,.14),transparent 64%);
  animation:envdrift 96s var(--ease) -24s infinite alternate;
}
@keyframes envdrift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}to{transform:translate3d(2.5%,2%,0) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ========== MANIFEST RAIL (signature) ========== */
.rail{position:fixed;left:26px;top:0;height:100vh;width:2px;z-index:40;pointer-events:none}
.rail i{position:absolute;left:0;top:14vh;bottom:14vh;width:1px;background:var(--hairline)}
.rail b{position:absolute;left:0;top:14vh;width:1px;background:linear-gradient(180deg,transparent,var(--accent) 12%,var(--accent));height:0;transition:height .18s linear}
.rail ol{position:absolute;left:14px;top:14vh;bottom:14vh;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}
.rail li{font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;color:rgba(157,176,198,.5);
  writing-mode:vertical-rl;transition:color .5s var(--ease),transform .5s var(--ease);transform:translateX(0)}
.rail li.on{color:var(--accent);transform:translateX(3px)}
.rail li::before{content:"";position:absolute;left:-14px;width:9px;height:1px;background:currentColor;margin-top:0;opacity:.5}
@media (max-width:1200px){.rail{display:none}}

/* ========== NAV ========== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:22px;
  padding:14px var(--gutter);transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,19,36,.82);backdrop-filter:blur(14px);border-bottom-color:var(--hairline)}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.nav .brand img{height:46px;width:auto;filter:drop-shadow(0 2px 10px rgba(3,8,16,.6))}
.nav .brand span{display:none}
.nav ul{list-style:none;display:flex;gap:26px;margin:0;margin-inline-start:auto;padding:0}
.nav ul a{text-decoration:none;font-size:.86rem;color:var(--text-secondary);transition:color .35s var(--ease);position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav ul a:hover{color:var(--text-primary)}
.nav ul a:hover::after{transform:scaleX(1)}
@media (max-width:900px){.nav ul{display:none}.nav .brand{margin-right:auto}}

/* mobile menu */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:transparent;border:1px solid var(--border-strong);border-radius:3px;cursor:pointer;padding:0 11px;
  transition:border-color .35s var(--ease)}
.navtoggle:hover{border-color:var(--accent)}
.navtoggle span{display:block;height:1.5px;background:var(--text-primary);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.navpanel{position:fixed;top:0;left:0;right:0;z-index:55;padding:84px var(--gutter) 24px;
  background:rgba(7,19,36,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline);
  display:grid;gap:2px;opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.navpanel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
.navpanel a{text-decoration:none;color:var(--text-secondary);font-family:var(--display);font-weight:600;
  font-variation-settings:"wdth" 108;font-size:1.32rem;padding:13px 0;border-bottom:1px solid var(--hairline);
  transition:color .3s var(--ease)}
.navpanel a:last-of-type{border-bottom:0}
.navpanel a:hover,.navpanel a:focus-visible{color:var(--accent)}
@media (max-width:900px){.navtoggle{display:flex}}
@media (min-width:901px){.navpanel{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.88rem;letter-spacing:.01em;
  padding:12px 22px;border-radius:3px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn-primary{background:var(--accent);color:#071324;text-shadow:none}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{border-color:var(--border-strong);color:var(--text-primary);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ========== HERO ========== */
.hero{position:relative;height:1150vh;z-index:2}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform:translateZ(0);opacity:0;transition:opacity .9s var(--ease)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--canvas);transition:opacity .9s var(--ease)}
.stage.video-ready .poster{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(7,14,26,0) 35%,rgba(7,14,26,.62) 100%)}

.ringwrap{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:6;color:var(--accent);opacity:.9}
.ring{width:42px;height:42px;transform:rotate(-90deg)}
.chev{width:26px;height:42px;color:var(--accent);opacity:.75;animation:chev 2.6s var(--ease) infinite}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:.9}}

.bands{position:absolute;inset:0;z-index:5}
.band{position:absolute;left:50%;transform:translateX(-50%);width:min(980px,calc(100% - var(--gutter)*2));
  text-align:center;opacity:0;text-shadow:var(--tshadow);pointer-events:none}
/* The words ride the descent: high in the sky beats, low once the camera reaches the ground.
   Both positions were chosen by measuring where each beat's footage is actually calm. */
.band.sky{top:17vh}
.band.ground{top:64vh}
.band.settle{top:57%;transform:translate(-50%,-50%);width:min(1060px,calc(100% - var(--gutter)*2))}
@media (max-height:760px){.band.sky{top:13vh}.band.ground{top:60vh}}
/* per-band scrim: peak alpha tuned against that band's own worst frame, wide plateau
   so the glyphs sit in full strength and only the surround falls away */
/* The ellipse must finish INSIDE the pseudo-element or its own box clips the
   gradient and the scrim reads as a rectangle. 50% radii end exactly at the edge. */
.band::before{content:"";position:absolute;inset:-72% -36%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(4,9,18,var(--sa,.7)) 0%,
    rgba(4,9,18,calc(var(--sa,.7) * .9)) 52%,
    rgba(4,9,18,0) 100%)}
.band.settle::before{inset:-34% -28%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(4,9,18,var(--sa,.78)) 0%,
    rgba(4,9,18,calc(var(--sa,.78) * .9)) 54%,
    rgba(4,9,18,0) 100%)}
.band h2,.band .h1{font-size:clamp(2.1rem,6.2vw,5.2rem);font-variation-settings:"wdth" 112;letter-spacing:-.02em}
.band .sub{margin:22px auto 0;max-width:56ch;font-size:clamp(.98rem,1.35vw,1.2rem);color:#DCE6F2}
.band .ctarow{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;pointer-events:auto}
.band .btn{text-shadow:none}
.band .kicker{margin-bottom:18px}

/* split text primitives */
.vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) approach-from-depth, band 1 */
.e-depth .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)))}
/* (f) drift-down, band 2 */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))}
/* (c) blur-to-sharp, band 3 */
.e-blur{position:relative}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp{opacity:var(--k,0)}
/* (i) weave, band 4: characters arrive alternating from above and below, echoing fronds */
.e-weave .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * var(--jy,0px)))}
/* Arabic joins its letters, so it cannot be split per character: it weaves whole words instead */
.e-weave.by-word .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * var(--jy,0px)))}
/* (d) word-punch with overshoot, band 5: weight landing, echoing the ground */
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.68 + (.32 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.22;--sd:.16;--ss:2.6}
/* (h) halves parting, band 6: echoes the broad leaves parting past the lens */
.e-part .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}
/* (e) word-by-word rise into staged settle, band 7 */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px))}
.band.settle .sub{--ks:clamp(0,(var(--k,0) - .62)*3.6,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.band.settle .ctarow{--kb:clamp(0,(var(--k,0) - .76)*4.4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* hero particles */
.motes{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5}
.motes i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);opacity:.45;
  animation:mote linear infinite}
@keyframes mote{from{transform:translate3d(0,14vh,0)}to{transform:translate3d(12px,-14vh,0)}}

/* static hero */
.statichero{display:none;position:relative;min-height:100svh;z-index:2;
  background-size:cover;background-position:center;background-color:var(--canvas)}
.statichero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,36,.72) 0%,rgba(7,19,36,.42) 42%,rgba(7,19,36,.9) 100%)}
.statichero .inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  min-height:100svh;padding:120px var(--gutter) 72px;text-shadow:var(--tshadow)}
.statichero h1{font-size:clamp(2.3rem,9vw,4rem);margin:16px 0 0;letter-spacing:-.02em}
.statichero .sub{margin-top:20px;max-width:40ch;color:#DCE6F2;font-size:1.02rem}
.statichero .ctarow{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.statichero .btn{text-shadow:none}

/* ========== SECTIONS ========== */
main{position:relative;z-index:2}
section{position:relative;padding:clamp(72px,10vh,132px) 0}
.eyebrow{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--hairline)}
.lede{max-width:58ch;color:var(--text-secondary);font-size:1.05rem}
h2.big{font-size:clamp(1.9rem,4.4vw,3.3rem);max-width:20ch}

/* entrance choreography */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.in .rise,.rise.in{opacity:1;transform:none}
.stag .rise:nth-child(1){transition-delay:0ms}
.stag .rise:nth-child(2){transition-delay:90ms}
.stag .rise:nth-child(3){transition-delay:180ms}
.stag .rise:nth-child(4){transition-delay:270ms}
.stag .rise:nth-child(5){transition-delay:360ms}
.stag.done .rise:nth-child(1),.stag.done .rise:nth-child(2),.stag.done .rise:nth-child(3),
.stag.done .rise:nth-child(4),.stag.done .rise:nth-child(5){transition-delay:0s !important}

/* --- proof strip --- */
.proof{border-block:1px solid var(--hairline);background:linear-gradient(180deg,rgba(14,33,56,.5),rgba(11,27,46,.2));padding:clamp(44px,6vh,72px) 0}
.proof .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline)}
.proof .cell{background:var(--canvas);padding:26px clamp(14px,2vw,28px)}
.proof .num{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:clamp(1.5rem,3vw,2.5rem);color:var(--accent);letter-spacing:-.01em;line-height:1}
.proof .lab{margin-top:10px;font-size:.84rem;color:var(--text-secondary);line-height:1.5}
.proof .note{margin-top:30px;max-width:62ch;color:var(--text-secondary);font-size:.95rem}
@media (max-width:820px){.proof .grid{grid-template-columns:repeat(2,1fr)}}

/* --- what we move --- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.card{background:var(--panel-2);border:1px solid var(--hairline);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.card:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
.card .shot{aspect-ratio:4/3;background:var(--panel);position:relative;overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:cover;display:block}
.card .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,19,36,0) 40%,rgba(7,19,36,.75))}
.card .body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.28rem;font-variation-settings:"wdth" 110}
.card p{margin-top:10px;color:var(--text-secondary);font-size:.92rem;max-width:34ch}
.card .tag{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);opacity:.85}
@media (max-width:1040px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* --- cold chain (interactive) --- */
.chain{background:linear-gradient(180deg,transparent,rgba(14,33,56,.55) 30%,rgba(14,33,56,.55) 70%,transparent)}
.chain .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,74px);align-items:center;margin-top:44px}
@media (max-width:940px){.chain .split{grid-template-columns:1fr}}
.holder{background:var(--canvas);border:1px solid var(--hairline);border-radius:4px;padding:clamp(24px,3.4vw,40px);position:relative;overflow:hidden}
.holder::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 0%,var(--accent-muted),transparent 70%);
  opacity:calc(var(--hold,0) * .85);transition:opacity .25s linear}
.readout{position:relative;display:flex;align-items:baseline;gap:10px;justify-content:center}
.readout .t{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 104;
  font-size:clamp(3rem,9vw,5.2rem);line-height:1;letter-spacing:-.03em;
  color:var(--text-secondary);transition:color .4s var(--ease)}
.holder.held .readout .t{color:var(--accent)}
.readout .u{font-family:var(--mono);font-size:1rem;color:var(--text-secondary)}
.track{position:relative;height:3px;background:rgba(157,176,198,.18);margin:30px 0 16px;border-radius:2px;overflow:hidden}
.track i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--hold,0));background:var(--accent)}
.holdbtn{width:100%;padding:16px;border-radius:3px;border:1px solid var(--border-strong);background:transparent;
  color:var(--text-primary);font-family:var(--body);font-weight:600;font-size:.9rem;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.holdbtn:hover{border-color:var(--accent)}
.holder.held .holdbtn{border-color:var(--accent);color:var(--accent)}
.holder.done .holdbtn{background:var(--accent);color:#071324;border-color:var(--accent)}
.status{margin-top:14px;text-align:center;min-height:1.2em}
.temps{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.temps li{display:flex;align-items:baseline;gap:18px;padding:17px 2px;border-bottom:1px solid var(--hairline);
  opacity:.26;transform:translateX(-8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.temps li.lit{opacity:1;transform:none}
.temps .v{font-family:var(--mono);font-size:1rem;color:var(--accent);min-width:7.5ch;font-weight:500}
.temps .n{font-size:.95rem}

/* --- how it ships --- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
@media (max-width:1040px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:30px;border-top:1px solid var(--hairline)}
.step .n{position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--accent)}
.step svg{width:44px;height:44px;color:var(--accent);opacity:.9;margin-bottom:18px}
.step h3{font-size:1.12rem;font-variation-settings:"wdth" 108}
.step p{margin-top:9px;color:var(--text-secondary);font-size:.91rem;max-width:30ch}
.arc{position:absolute;inset:auto 0 auto 0;top:-46px;height:90px;width:100%;pointer-events:none;overflow:visible}
.arc path{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.35;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:calc(var(--len,1200) * (1 - var(--draw,0)))}
@media (max-width:1040px){.arc{display:none}}

/* --- faq --- */
.faq{margin-top:46px;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 108;
  font-size:clamp(1.02rem,1.7vw,1.24rem);transition:color .35s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 8% 26px 0;color:var(--text-secondary);max-width:70ch}

/* --- quote form --- */
.quote{background:linear-gradient(180deg,transparent,rgba(14,33,56,.6))}
.qgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,80px);margin-top:44px;align-items:start}
@media (max-width:940px){.qgrid{grid-template-columns:1fr}}
.qside p{color:var(--text-secondary);margin-top:16px;max-width:38ch}
.qside .direct{margin-top:30px;border-top:1px solid var(--hairline);padding-top:24px;display:grid;gap:12px}
.qside .direct a{font-family:var(--mono);font-size:.86rem;color:var(--text-primary);text-decoration:none;
  display:flex;gap:12px;align-items:baseline;transition:color .35s var(--ease)}
.qside .direct a:hover{color:var(--accent)}
.qside .direct span{color:var(--text-secondary);min-width:8ch;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
form{display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.row{grid-template-columns:1fr}}
label{display:block}
label .lt{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:8px}
input,textarea{width:100%;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:3px;
  color:var(--text-primary);font-family:var(--body);font-size:.95rem;padding:13px 14px;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
input::placeholder,textarea::placeholder{color:rgba(157,176,198,.55)}
textarea{resize:vertical;min-height:110px}
.formnote{font-size:.82rem;color:var(--text-secondary)}
.sent{display:none;border:1px solid var(--accent);border-radius:3px;padding:26px;background:var(--accent-muted)}
.sent.on{display:block}
form.gone{display:none}

/* --- footer --- */
footer{border-top:1px solid var(--hairline);padding:clamp(50px,7vh,80px) 0 40px;position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr;gap:34px}}
footer img{height:62px;width:auto}
footer .fcol h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:500;margin-bottom:14px}
footer .fcol a,footer .fcol p{color:var(--text-secondary);font-size:.9rem;text-decoration:none;display:block;margin-bottom:8px;transition:color .35s var(--ease)}
footer .fcol a:hover{color:var(--accent)}
.legal{margin-top:46px;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}

/* one living element per section, whisper level */
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-30% -10%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,var(--accent-muted),transparent 70%);
  opacity:0;animation:pulse 9s var(--ease) -3s infinite}
@keyframes pulse{0%,100%{opacity:.10}50%{opacity:.34}}

/* ========== THE FIVE STATIC-HERO GATES ========== */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .statichero{display:block}
}
@media (max-height:560px){.rail,.ringwrap,.motes{display:none}}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .rise{opacity:1;transform:none}
  .temps li{opacity:1;transform:none}
  .arc path{stroke-dashoffset:0}
  .rail b{height:calc(72vh) !important}
  .rail li{color:var(--accent)}
  body{opacity:1}
  html{scroll-behavior:auto}
}

/* paused animations on a hidden tab */
body.paused *, body.paused *::before, body.paused *::after{animation-play-state:paused !important}

/* =======================================================
   RIGHT TO LEFT
   Everything below only applies to the Arabic page. Structural mirroring lives
   here rather than in a second stylesheet so the two languages never drift.
   ======================================================= */

/* the manifest rail moves to the other edge */
[dir="rtl"] .rail{left:auto;right:26px}
[dir="rtl"] .rail i,[dir="rtl"] .rail b{left:auto;right:0}
[dir="rtl"] .rail ol{left:auto;right:14px}
[dir="rtl"] .rail li::before{left:auto;right:-14px}
[dir="rtl"] .rail li.on{transform:translateX(-3px)}

/* nav: the link row pushes the other way, and the underline grows from the other end */
[dir="rtl"] .nav ul a::after{transform-origin:right}
[dir="rtl"] .skip{left:auto;right:-9999px;border-radius:0 0 0 8px}
[dir="rtl"] .skip:focus{right:0}

/* section furniture */
[dir="rtl"] .step .n{left:auto;right:0}
[dir="rtl"] .faq summary{padding:22px 0 22px 46px}
[dir="rtl"] .faq summary::after{right:auto;left:8px}
[dir="rtl"] .faq .a{padding:0 0 26px 8%}
[dir="rtl"] .track i{transform-origin:right}
[dir="rtl"] .temps li{transform:translateX(8px)}
[dir="rtl"] .temps li.lit{transform:none}
[dir="rtl"] .arc{transform:scaleX(-1)}

/* the parting entrance has to part the other way */
[dir="rtl"] .e-part .w{transform:translateX(calc((1 - var(--kc)) * var(--jx,0px) * -1))}

/* Numbers, temperatures, phone numbers, emails and Incoterms stay left to right
   inside right-to-left text. Without isolation the browser drags the plus sign or
   the decimal point to the wrong end. */
[dir="rtl"] .num,[dir="rtl"] .readout .t,[dir="rtl"] .readout .u,[dir="rtl"] .temps .v,
[dir="rtl"] .legal span,
[dir="rtl"] .ltr{unicode-bidi:isolate;direction:ltr}
[dir="rtl"] .qside .direct a,[dir="rtl"] footer .fcol a[href^="tel"],
[dir="rtl"] footer .fcol a[href^="mailto"]{unicode-bidi:isolate}

/* Arabic type. IBM Plex Sans Arabic is the direct sibling of the Latin body face, so the
   two languages stay one family. Almarai 800 carries the headlines with the weight Archivo
   has in English. There is no real Arabic monospace, so the small label voice is made with
   weight and size instead of tracking.
   letter-spacing MUST be 0: Arabic letters join, and tracking pulls the joins apart. */
[lang="ar"]{--display:"Almarai",system-ui,sans-serif;
            --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
            --mono:"IBM Plex Sans Arabic",system-ui,sans-serif}
[lang="ar"] body{font-size:clamp(17px,1.1vw,19px);line-height:1.85}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{
  line-height:1.35;letter-spacing:0;font-variation-settings:normal;font-weight:800}
[lang="ar"] .mono,[lang="ar"] .card .tag,[lang="ar"] label .lt,
[lang="ar"] .btn,[lang="ar"] .navpanel a,[lang="ar"] .legal span{
  letter-spacing:0;text-transform:none;font-weight:600}
[lang="ar"] .mono{font-size:.82rem}
/* the rail carries stage numerals in Arabic, never rotated Arabic words */
[lang="ar"] .rail li{writing-mode:horizontal-tb;letter-spacing:.08em;font-size:.72rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
[lang="ar"] .rail li::before{top:.55em;margin-top:0}
[lang="ar"] .band h2,[lang="ar"] .band .h1{letter-spacing:0;line-height:1.3;
  font-size:clamp(1.8rem,5.1vw,4.1rem)}
[lang="ar"] .statichero h1{font-size:clamp(2rem,7.6vw,3.4rem);line-height:1.3}
/* the Arabic settle block runs taller than the English one, which pushes the
   headline up into the bright sun burst at the end of the film */
/* the taller Arabic block needs the scrim's full-strength plateau to reach further
   up and down, or its first and last lines sit past the falloff knee */
[lang="ar"] .band.settle::before{inset:-58% -30%}
[lang="ar"] .band.settle .h1{line-height:1.22}
[lang="ar"] .band.settle .sub{line-height:1.6;margin-top:18px}
[lang="ar"] h2.big{font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.35}
[lang="ar"] .proof .num{font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:0}
[lang="ar"] .card .tag,[lang="ar"] label .lt{letter-spacing:.04em}
[lang="ar"] .btn{letter-spacing:0;font-weight:700}

/* the language switch */
.langswitch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;
  padding:0 12px;border:1px solid var(--border-strong);border-radius:3px;text-decoration:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--text-secondary);
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.langswitch:hover{color:var(--accent);border-color:var(--accent)}
[lang="ar"] .langswitch{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em}
@media (pointer:coarse){.langswitch{min-height:44px}}
@media (max-width:420px){.langswitch{padding:0 9px;min-width:38px}}