/* BluSignal site styles. Dark, one signal-blue accent, self-hosted OFL fonts (no third-party font host). Loaded by every page build.py writes. */
/* fallow-ignore-file unused-file */
:root{--bg:#05070b;--bg2:#0a0f17;--panel:#0e1520;--line:rgba(255,255,255,.09);--ink:#eef2f8;--muted:#8d97a8;--signal:#2f7bff;--signal2:#5fb4ff;--glow:rgba(47,123,255,.35);--radius:18px;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:650;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(40px,6.4vw,84px)}
h2{font-size:clamp(30px,3.8vw,52px);margin:.35em 0 .5em}
h3{font-size:20px;margin-bottom:6px}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.pad{padding:120px 0}
.wrap.pad{padding:120px 24px}
.band{background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 18%,var(--bg2) 82%,var(--bg) 100%)}
.eyebrow{font:600 12px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--signal2)}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:58ch;margin-top:18px}
.muted{color:var(--muted)}
.ph{outline:1px dashed rgba(95,180,255,.45);outline-offset:3px;border-radius:3px}
.skiplink{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--signal);color:#fff;padding:8px 14px;border-radius:8px}
.skiplink:focus{left:8px}
:focus-visible{outline:2px solid var(--signal2);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font:600 15px/1 var(--font);border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-signal{background:var(--signal);color:#fff;box-shadow:0 0 0 0 var(--glow)}
.btn-signal:hover{box-shadow:0 8px 32px -6px var(--glow)}
.btn-ghost{border:1px solid rgba(255,255,255,.22);color:var(--ink);background:transparent}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* nav */
nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(5,7,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em}
.logo .line{font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-left:-2px}
nav ul{display:flex;gap:26px;list-style:none;margin-left:auto}
nav ul a{font-size:15px;color:var(--muted);transition:color .2s}
nav ul a:hover,nav ul a.here{color:var(--ink)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:9px 16px;font:500 14px var(--font);cursor:pointer}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:0 0 12vh}
.hero-media{position:absolute;inset:0}
.hero-media .media,.hero-media .standin{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,11,.35) 0,rgba(5,7,11,.15) 40%,var(--bg) 100%),radial-gradient(80% 60% at 20% 90%,rgba(47,123,255,.18),transparent 70%)}
.hero-copy{position:relative;width:100%}
.hero h1{max-width:16ch;margin-top:16px}
.pulse{position:absolute;right:8vw;top:30%;width:14px;height:14px;pointer-events:none}
.pulse i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--signal2);animation:ringout 3.6s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.pulse i:nth-child(2){animation-delay:1.2s}.pulse i:nth-child(3){animation-delay:2.4s}
.pulse::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--signal2);box-shadow:0 0 18px var(--signal)}
.site-logistics .hero .pulse{display:none}  /* the rig loop carries the signal; the dot landed on the trailer at 768 = reads as device placement */
@keyframes ringout{0%{transform:scale(1);opacity:.9}100%{transform:scale(14);opacity:0}}

/* stand-ins until real media lands (release gate refuses them) */
.standin{position:relative;width:100%;height:100%;min-height:220px;display:grid;place-items:center;border-radius:var(--radius);background:radial-gradient(120% 90% at 30% 20%,#13233d 0,#0a1220 45%,#06090f 100%);color:var(--muted);font-size:14px;letter-spacing:.04em}
.standin::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-radial-gradient(circle at 70% 60%,rgba(95,180,255,.07) 0 1px,transparent 1px 38px)}

/* frames */
.frame{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/3}
.frame.wide{aspect-ratio:16/9}
.frame .media{width:100%;height:100%;object-fit:cover}
.frame .standin{border-radius:0}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pillar{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),transparent)}
.pillar svg{width:30px;height:30px;fill:none;stroke:var(--signal2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}

/* display items */
.display{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.display+.display{margin-top:96px}
.display.flip .frame{order:2}

/* films */
.films{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.film figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}

/* steps */
.page-head{padding:180px 24px 40px}
.page-head h1{font-size:clamp(36px,5vw,64px);max-width:18ch;margin-top:14px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.steps li{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.steps b{display:block;font-size:13px;letter-spacing:.2em;color:var(--signal2);margin-bottom:18px}

/* cta */
.cta{text-align:center}
.cta h2{max-width:20ch;margin-left:auto;margin-right:auto}
.cta .lead{margin:0 auto 32px}

/* form */
.formcard{max-width:760px;padding:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.lead-form{display:grid;gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lead-form label{display:grid;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.lead-form small{font-weight:400;color:var(--muted)}
.lead-form input,.lead-form textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#070b12;color:var(--ink);font:400 16px/1.4 var(--font)}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(47,123,255,.25)}
.lead-form .check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--muted)}
.lead-form .check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--signal)}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form button{justify-self:start}
.lead-form button[disabled]{opacity:.6;cursor:wait}
.formmsg{min-height:1.6em;font-size:15px;color:var(--signal2)}
.formmsg.err{color:#ff8b8b}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .cols p{margin-top:12px;max-width:40ch;font-size:15px}
footer ul{list-style:none;display:grid;gap:10px;font-size:15px;color:var(--muted)}
footer ul a:hover{color:var(--ink)}
.fine{font-size:13px;margin-top:28px;max-width:90ch}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
.nf{min-height:70vh}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

@media(max-width:900px){
  .pillars,.films{grid-template-columns:1fr}
  .display,.two{grid-template-columns:1fr;gap:28px}
  .display.flip .frame{order:0}
  .steps,.grid2{grid-template-columns:1fr}
  .pad,.wrap.pad{padding-top:80px;padding-bottom:80px}
}
@media(max-width:700px){
  nav ul{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;padding:8px 24px 18px;background:rgba(5,7,11,.96);border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
  nav ul a{display:block;padding:12px 0}
  .menu-btn{display:block}
  nav .btn-signal{display:none}
  .page-head.wrap{padding:120px 16px 24px}  /* .wrap below would reset it: small heroes sat under the fixed nav (Joist QA 10-26) */
  .wrap{padding:0 16px}
  .formcard{padding:24px}
  .pulse{display:none}
}

/* ==== v2 (spec f9406e0a): midnight navy + electric blue, dark/light section contrast, glowing cards ==== */
:root{--bg:#060a14;--bg2:#0a1120;--panel:#0d1628;--signal:#2f7bff;--signal2:#62b6ff;--glow:rgba(47,123,255,.38);--paper:#f3f5f9;--paper2:#e8ecf3;--ink-d:#0a1222;--muted-d:#4c5a70;--line-d:rgba(10,18,34,.09)}
body{background:var(--bg)}
.logo img{height:32px;width:auto;display:block}
.logo .line{align-self:flex-end;margin:0 0 3px 2px}
nav ul a{font-size:14px}
.ph{font-style:italic;opacity:.75;border-bottom:1px dashed currentColor;cursor:help}
.narrow{max-width:860px;margin-left:auto;margin-right:auto}
section.pad>.wrap>h2,section.pad>.wrap>.lead{max-width:780px}
section.pad>.wrap>.lead{margin-bottom:8px}

/* tones: dark (default), band (raised dark), light (clean paper) */
.tone-band{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tone-light{background:var(--paper);color:var(--ink-d)}
.tone-light h1,.tone-light h2,.tone-light h3{color:var(--ink-d)}
.tone-light .lead,.tone-light p,.tone-light .muted{color:var(--muted-d)}
.tone-light .eyebrow{color:var(--signal)}
.tone-light .btn-ghost{color:var(--ink-d);border-color:rgba(10,18,34,.18)}
.tone-light .fine{color:var(--muted-d)}

/* cards: Apple-style glass with a blue glow that follows hover */
.grid{display:grid;gap:22px;margin-top:40px}
.grid.n2{grid-template-columns:repeat(2,1fr)}.grid.n3{grid-template-columns:repeat(3,1fr)}.grid.n4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;padding:30px 26px 28px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(98,182,255,.16);box-shadow:0 0 0 1px rgba(47,123,255,.05),0 24px 60px -30px var(--glow);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;overflow:hidden}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(420px 180px at 50% -20%,rgba(98,182,255,.22),transparent 70%);pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:rgba(98,182,255,.4);box-shadow:0 0 0 1px rgba(98,182,255,.18),0 30px 80px -28px rgba(47,123,255,.6)}
.card svg{width:30px;height:30px;stroke:var(--signal2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;filter:drop-shadow(0 0 10px rgba(98,182,255,.55))}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15.5px;line-height:1.6}
.card .more{display:inline-block;margin-top:16px;color:var(--signal2);font-weight:600;font-size:15px}
.tone-light .card{background:#fff;border:1px solid var(--line-d);box-shadow:0 1px 0 rgba(10,18,34,.03),0 24px 50px -32px rgba(20,60,140,.35)}
.tone-light .card::before{background:radial-gradient(420px 180px at 50% -20%,rgba(47,123,255,.10),transparent 70%)}
.tone-light .card:hover{border-color:rgba(47,123,255,.35);box-shadow:0 0 0 4px rgba(47,123,255,.08),0 30px 60px -28px rgba(20,60,140,.45)}
.tone-light .card svg{stroke:var(--signal);filter:none}
.tone-light .card p{color:var(--muted-d)}
.tone-light .card .more{color:var(--signal)}

/* process stepper: numbered nodes on a signal line */
.stepper{list-style:none;display:grid;gap:18px;margin-top:44px;position:relative;counter-reset:s}
.stepper.n3{grid-template-columns:repeat(3,1fr)}.stepper.n4{grid-template-columns:repeat(4,1fr)}.stepper.n5{grid-template-columns:repeat(5,1fr)}
.stepper::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:linear-gradient(90deg,transparent,var(--signal) 12%,var(--signal2) 88%,transparent);opacity:.55}
.stepper li{position:relative;padding-top:74px}
.stepper li b{position:absolute;top:0;left:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;background:radial-gradient(circle at 35% 30%,var(--signal2),var(--signal) 60%,#1446a8);box-shadow:0 0 0 6px var(--bg),0 0 28px var(--glow)}
.tone-light .stepper li b{box-shadow:0 0 0 6px var(--paper),0 0 24px rgba(47,123,255,.35)}
.tone-band .stepper li b{box-shadow:0 0 0 6px var(--bg2),0 0 28px var(--glow)}
.stepper h3{font-size:18px;margin-bottom:8px}
.stepper p{color:var(--muted);font-size:15px;line-height:1.6}
.tone-light .stepper p{color:var(--muted-d)}
.fine.reveal{margin-top:34px;font-size:15px}

/* feature: media + copy */
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.feature.flip .frame{order:2}
.feature.solo{grid-template-columns:1fr;max-width:820px}
.feature .frame{border-radius:22px;overflow:hidden;background:radial-gradient(80% 80% at 50% 40%,rgba(47,123,255,.22),transparent 70%),var(--panel);box-shadow:0 40px 90px -40px var(--glow);border:1px solid rgba(98,182,255,.14)}
.tone-light .feature .frame{background:radial-gradient(80% 80% at 50% 40%,rgba(47,123,255,.12),transparent 70%),#fff;border-color:var(--line-d);box-shadow:0 40px 80px -46px rgba(20,60,140,.45)}
.feature .frame .media{width:100%;height:auto;display:block}
.feature h2{margin:6px 0 16px}
.feature-logo .logo-img{height:56px;width:auto;margin-bottom:18px}
.ticks{list-style:none;margin:22px 0 4px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;line-height:1.55;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,var(--signal2) 30%,transparent 32%),rgba(47,123,255,.18);box-shadow:0 0 12px rgba(98,182,255,.5)}
.tone-light .ticks li{color:var(--muted-d)}
.feature .ctas{margin-top:28px}
.feature .fine{margin-top:18px}

/* FAQ */
.faq{margin-top:34px;display:grid;gap:12px}
.qa{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);padding:0 22px}
.qa summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;font-weight:600;font-size:17px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:16px;font-size:24px;color:var(--signal2);transition:transform .25s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 0 22px;color:var(--muted);line-height:1.65}
.tone-light .qa{background:#fff;border-color:var(--line-d)}
.tone-light .qa p{color:var(--muted-d)}

/* video players (click to play) */
.players{display:grid;gap:26px;margin-top:40px}
.players.n2{grid-template-columns:repeat(2,1fr)}.players.n3{grid-template-columns:repeat(3,1fr)}
.player figcaption{margin-top:14px;display:grid;gap:4px}
.player figcaption span{color:var(--muted);font-size:15px}
.transcript{margin-top:10px;font-size:15px;color:var(--muted)}
.transcript summary{cursor:pointer;color:var(--signal2);font-weight:600}
.transcript p{margin-top:10px;line-height:1.65}

/* CTA section + forms on any tone */
.cta-sec .cta{text-align:center;max-width:860px;margin:0 auto}
.cta-sec .cta .ctas{justify-content:center}
.formcard h2{margin-bottom:10px}
.formcard>.muted{margin-bottom:24px}
.lead-form select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#070b12;color:var(--ink);font:400 16px/1.4 var(--font)}
.lead-form select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(47,123,255,.25)}
.page-head .ctas{margin-top:22px}

@media(max-width:1100px){.grid.n4{grid-template-columns:repeat(2,1fr)}.stepper.n5,.stepper.n4{grid-template-columns:repeat(2,1fr)}.stepper::before{display:none}}
@media(max-width:900px){.grid.n3,.grid.n2,.players.n2,.players.n3{grid-template-columns:1fr}.feature{grid-template-columns:1fr;gap:34px}.feature.flip .frame{order:0}}
@media(max-width:700px){.grid.n4,.stepper.n3,.stepper.n4,.stepper.n5{grid-template-columns:1fr}.stepper li{padding:0 0 0 76px;min-height:56px}}
@media(prefers-reduced-motion:reduce){.card,.qa summary::after{transition:none}.card:hover{transform:none}}
/* QA 10-26 (844x390 phone landscape): six nav links + the CTA do not fit below ~1100px -> menu button from there down */
@media(max-width:1100px){
  nav ul{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;padding:8px 24px 18px;background:rgba(5,7,11,.96);border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
  nav ul a{display:block;padding:12px 0}
  .menu-btn{display:block}
}
/* short viewports (phones in landscape): the film eyebrow must clear the header and never sit on the headline */
@media(max-height:500px){
  body .film-hero .film-eyebrow{display:none}  /* it repeats the header's brand line and crowds it at this height */
  body .film-eyebrow{top:64px}
  body .film-copy{padding-top:96px}
  body .film-title{font-size:clamp(22px,4vw,34px)}
  body .film-text{font-size:14px}
}

/* ==== v3 look pass: self-hosted OFL type. Archivo (variable weight + width) for display, Manrope for body.
   New filenames on any change (never overwrite a font in place: Cloudflare caches it). Licences: assets/fonts/OFL-*.txt ==== */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-v1.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-v1.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{--font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--display:"Archivo","Manrope",ui-sans-serif,system-ui,sans-serif}
body{font-family:var(--font);font-weight:450;letter-spacing:-.003em;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
h1,h2,h3,.film-title{font-family:var(--display);font-stretch:108%;font-weight:640;letter-spacing:-.022em}
h1,.film-hero .film-title{line-height:.98;letter-spacing:-.03em;font-weight:680}
h2{line-height:1.03}
h3{font-stretch:104%;font-weight:620;letter-spacing:-.012em;line-height:1.2}
.eyebrow{font-family:var(--display);font-stretch:125%;font-weight:620;font-size:11.5px;letter-spacing:.24em}
.btn,.film-btn,.anim-replay{font-family:var(--font);font-weight:700;letter-spacing:.005em}
.lead{font-weight:450;line-height:1.6}
.logo .line{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.22em}
.stepper li b,.anim-states li::before,.rt-steps b,.rt-num,.ho-node b{font-family:var(--display);font-stretch:112%}
.svg-lbl{font-family:var(--display);font-stretch:108%}

/* Feature media always fills its frame (GALM showroom photo left a dark block under it at 1440) */
.feature .frame{aspect-ratio:3/2}
.feature .frame .media{width:100%;height:100%;object-fit:cover}

/* light sections carry a visual: a faint device-signal motif top right, plus stills where we have them */
.tone-light{position:relative;background-color:var(--paper);background-image:url(/assets/brand/motif-v1.svg),radial-gradient(60% 50% at 100% 0%,rgba(47,123,255,.07),transparent 70%);background-repeat:no-repeat;background-position:right -220px top -260px,0 0;background-size:780px auto,100% 100%}
.tone-light+.tone-light{background-position:left -500px bottom -580px,0 0;background-image:url(/assets/brand/motif-v1.svg),radial-gradient(60% 50% at 0% 100%,rgba(47,123,255,.06),transparent 70%)}
.step-media{display:grid;gap:18px;margin-top:40px}
.step-media.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.step-media.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.step-media figure{margin:0}
.step-media .frame{aspect-ratio:16/10;border-radius:18px;border:1px solid var(--line-d);box-shadow:0 30px 60px -38px rgba(20,60,140,.55)}
.step-media .frame .media{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.step-media figure:hover .frame .media{transform:scale(1.04)}
.step-media figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:650;font-size:15px;color:var(--ink-d)}
.step-media figcaption b{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--display);color:#fff;background:var(--signal);box-shadow:0 0 14px rgba(47,123,255,.45)}
:not(.tone-light)>.wrap>.step-media figcaption,.tone-band .step-media figcaption{color:var(--ink)}
.step-media+.stepper{margin-top:52px}
@media(max-width:900px){.step-media.n3{grid-template-columns:repeat(3,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.step-media figure{scroll-snap-align:start}}
@media(max-width:600px){.step-media.n3{grid-template-columns:repeat(3,78%)}}
@media(prefers-reduced-motion:reduce){.step-media figure:hover .frame .media{transform:none}}
/* image-topped cards (audience paths): the photo bleeds to the card edge and eases in on hover */
.card.has-media{padding-top:0}
.card-media{margin:0 -26px 22px;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.tone-light .card-media{border-color:var(--line-d)}
.card-media .media{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card.has-media:hover .card-media .media{transform:scale(1.05)}
.card.has-media h3{font-size:21px}
@media(prefers-reduced-motion:reduce){.card.has-media:hover .card-media .media{transform:none}}
/* closing CTA: a field of signal rings breathing out from behind the headline (dark tones only) */
.cta-sec:not(.tone-light){position:relative;overflow:hidden;isolation:isolate}
.cta-sec:not(.tone-light)::before{content:"";position:absolute;left:50%;top:50%;width:1100px;height:1100px;z-index:-1;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(47,123,255,.2) 0,rgba(47,123,255,.05) 30%,transparent 62%)}
/* a low-key signal radiating OUT from behind the headline (10-27, am.#4 B10: radiate, never breathe) */
.cta-sec:not(.tone-light)::after,.cta-sec:not(.tone-light)>.wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(150vw,1400px);aspect-ratio:1;z-index:-1;pointer-events:none;border-radius:50%;border:1px solid rgba(98,182,255,.3);transform:translate(-50%,-50%) scale(.04);opacity:0;animation:cta-out 10s cubic-bezier(.22,.61,.36,1) infinite}
.cta-sec:not(.tone-light)>.wrap::before{animation-delay:5s}
@keyframes cta-out{0%{transform:translate(-50%,-50%) scale(.04);opacity:0}8%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.cta-sec:not(.tone-light)::after,.cta-sec:not(.tone-light)>.wrap::before{animation:none;display:none}}
/* inner page heads with a backdrop photo: full bleed, shaded to the left so the copy reads, a slow drift in */
.page-head-x{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.phx-media{position:absolute;inset:0;z-index:-2}
.phx-media .media{width:100%;height:100%;object-fit:cover;animation:phx-drift 18s ease-out both}
.phx-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,10,20,.94) 0,rgba(6,10,20,.82) 38%,rgba(6,10,20,.35) 75%,rgba(6,10,20,.55) 100%),linear-gradient(0deg,var(--bg) 0,rgba(6,10,20,0) 40%),radial-gradient(60% 80% at 15% 100%,rgba(47,123,255,.18),transparent 70%)}
.page-head-x .page-head{padding-bottom:88px}
.page-head-x .lead{color:rgba(238,242,248,.82)}
@keyframes phx-drift{from{transform:scale(1.08)}to{transform:scale(1)}}
@media(max-width:700px){.phx-shade{background:linear-gradient(0deg,var(--bg) 0,rgba(6,10,20,.88) 45%,rgba(6,10,20,.55) 100%)}.page-head-x .page-head{padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){.phx-media .media{animation:none}}
/* phones: the wide brand line must clear the Menu button (it touched it at 375) */
@media(max-width:480px){.logo .line{font-stretch:105%;letter-spacing:.12em;font-size:10px}.logo img{height:28px}.logo{gap:8px}}
/* inline form errors: under the field they belong to (site.js), never only below the button */
.lead-form .fielderr{display:block;margin-top:-2px;color:#ff9b9b;font-weight:600;font-size:13.5px;line-height:1.4}
.lead-form [aria-invalid=true]{border-color:#ff8b8b;box-shadow:0 0 0 3px rgba(255,120,120,.18)}
.lead-form .check+.fielderr{margin:-8px 0 0 30px}

/* benefit figures: the strongest numbers on the site, as display numerals with the terms line right under them */
.stats .card{padding-top:34px}
.stats .card svg{display:none}
.stat{margin:0 0 4px;display:grid;gap:4px}
.stat-pre{font:650 13px/1.2 var(--display);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;color:var(--signal2)}
.stat-num{font:720 clamp(46px,5.2vw,68px)/1 var(--display);font-stretch:104%;letter-spacing:-.035em;background:linear-gradient(180deg,#fff 20%,#9fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tone-light .stat-num{background:linear-gradient(180deg,var(--ink-d) 25%,#2f6fe0);-webkit-background-clip:text;background-clip:text}
.stat-terms{margin:2px 0 14px;font-size:12.5px!important;letter-spacing:.04em;color:var(--muted)!important;font-weight:600}
.step-media figcaption{gap:0}
@media(max-width:700px){footer ul{gap:0}footer ul a{display:flex;align-items:center;min-height:44px}}
@media(max-width:600px){.step-media.n2{grid-template-columns:1fr}}
/* portrait phones: the Hero copy sits over the busiest part of the photo, so the scrim deepens behind it */
@media(max-width:640px) and (orientation:portrait){.hero-shade{background:linear-gradient(180deg,rgba(5,7,11,.45) 0,rgba(5,7,11,.2) 30%,rgba(5,7,11,.78) 58%,var(--bg) 100%),radial-gradient(120% 70% at 20% 85%,rgba(5,7,11,.55),transparent 70%)}}

/* ==== round 2 (review 10-27, am.#4 B) ==== */
/* tone 'mist': a cool grey paper, no motif (its own look; not the device-signal paper) */
.tone-mist{background:linear-gradient(180deg,#e9eef5,#e3e9f2);color:var(--ink-d)}
.tone-mist h2,.tone-mist h3{color:var(--ink-d)}
.tone-mist .lead,.tone-mist p,.tone-mist .ticks li{color:var(--muted-d)}
.tone-mist .eyebrow{color:var(--signal)}
.tone-mist .btn-ghost{color:var(--ink-d);border-color:rgba(10,18,34,.2)}
/* Feature layout 'bleed': the photo owns half the viewport, edge to edge, no frame; the copy keeps the page grid */
.fx-bleed{position:relative;overflow:hidden;padding:0}
.fx-bleed>.wrap{max-width:none;padding:0}
.fxb{display:grid;grid-template-columns:1fr}
.fxb-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.fxb-media .media{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
/* a wipe uncovers the photo: a mist panel slides off it (a cover, not a clip, so the reveal observer still sees the element) */
.fxb-media.reveal{opacity:1;transform:none}
.fxb-media.reveal::after{content:"";position:absolute;inset:0;background:#e6ebf3;transform-origin:right center;transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.fxb-media.reveal.in::after{transform:scaleX(0)}
.fxb .feature-copy{padding:56px 16px 72px}
.fxb .feature-copy h2{margin:6px 0 16px}
@media(min-width:960px){
  .fxb{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;min-height:min(86vh,820px)}
  .fxb-media{aspect-ratio:auto;height:100%;min-height:min(86vh,820px)}
  .fxb .feature-copy{padding:96px max(24px,calc((100vw - 1200px)/2 + 24px)) 96px 72px;max-width:none}
  .fxb.flip .fxb-media{order:2}
}
@media(min-width:701px) and (max-width:959px){.fxb .feature-copy{padding:64px 24px 80px}}
@media(prefers-reduced-motion:reduce){.fxb-media::after{display:none}}
/* logistics How It Works splits (#hops film left, #respond film right): the copy mirrors its page-grid padding when the film is on
   the right, and the reveal panel matches a dark section (the same two rules as the Home Industries splits; identical, so either may stay) */
@media(min-width:960px){.site-logistics .fxb.flip .feature-copy{padding:96px 72px 96px max(24px,calc((100vw - 1200px)/2 + 24px))}}
.site-logistics .fx-bleed:not(.tone-light):not(.tone-mist) .fxb-media::after{background:var(--bg)}
/* the respond film carries black edge rows (the bottom row of the current take): the layer runs 4 px past both edges, clipped by .fxb-media */
.site-logistics #respond .fxb-media>.loop{inset:-4px 0;height:auto}
/* step ticks: the label reads bold in ink before its sentence */
.ticks li b{font-weight:650;color:var(--ink)}
.tone-light .ticks li b,.tone-mist .ticks li b{color:var(--ink-d)}
/* compact footer with a menu (am.#4 B11): brand + CTA | three menu columns, then one thin legal row */
footer.fm{margin-top:0;padding:48px 0 22px;background:linear-gradient(180deg,var(--bg),#04060c)}
.fm-top{display:grid;gap:28px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fm-brand{grid-column:1/-1}
.fm-brand .muted{margin-top:10px;font-size:15px}
.fm-brand .ctas{margin-top:16px}
.fm-brand .btn{padding:11px 18px;font-size:14px}
.fm-col h2{margin:2px 0 10px;font:650 11px/1.2 var(--display);font-stretch:125%;letter-spacing:.22em;text-transform:uppercase;color:var(--signal2)}
.fm-col ul{list-style:none;display:grid;gap:6px;font-size:15px}
.fm-col a{color:var(--muted);transition:color .2s}
.fm-col a:hover{color:var(--ink)}
.fm-legal{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}
.fm-legal .fine{margin:0;font-size:13px}
@media(min-width:760px){.fm-top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}.fm-brand{grid-column:auto}}
@media(max-width:700px){footer.fm ul{gap:0}footer.fm ul a{min-height:40px}}
/* AUTOMOTIVE lead overlay: 'What to expect' sits UNDER the form as three tiles joined by a signal line (logistics keeps the
   side rail; spec 5b472a52 am.#1 A: our own layout). Shell = assets/overlay.css (Joist) */
.site-automotive .ovl-panel{grid-template-columns:1fr;width:min(880px,100%);flex:none}/* flex:none = the shell's overflow:hidden panel otherwise SHRINKS to the viewport and clips the tiles unreachably */
@media(min-width:801px){.site-automotive .ovl-main{padding-top:26px;padding-bottom:22px}.site-automotive .ovl-main h2{font-size:30px}.site-automotive .ovl-field textarea{height:58px;min-height:58px}.site-automotive .ovl-grid{gap:10px 16px}}
.site-automotive .ovl-next{border-left:0;border-top:1px solid var(--ovl-line);padding:18px clamp(26px,3.6vw,44px) 22px}
.site-automotive .ovl-next h3{margin:0 0 12px}
.site-automotive .ovl-next ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.site-automotive .ovl-next ol::before{left:8%;right:8%;top:21px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--signal),rgba(47,123,255,.15));transform-origin:left;transform:scaleX(0)}
.site-automotive .ovl.on .ovl-next ol::before{transform:none}
.site-automotive .ovl-next li{padding:58px 0 0;text-align:center;justify-items:center;transform:translateY(12px)}
.site-automotive .ovl-next li::before{content:"";left:50%;top:0;width:42px;height:42px;margin-left:-21px;background:radial-gradient(circle,var(--signal2) 0 5px,var(--signal) 6px 9px,transparent 10px),var(--ovl-panel);border:2px solid var(--signal);box-shadow:0 0 0 6px rgba(47,123,255,.12),0 0 26px rgba(47,123,255,.45)}
.site-automotive .ovl.on .ovl-next li::before{animation:ovlAutoPing 2.4s ease-out 1.2s 2}
@keyframes ovlAutoPing{0%{box-shadow:0 0 0 0 rgba(95,180,255,.6),0 0 26px rgba(47,123,255,.45)}100%{box-shadow:0 0 0 16px rgba(95,180,255,0),0 0 26px rgba(47,123,255,.45)}}
.site-automotive .ovl-next span{font-size:14px}
@media(max-width:640px){
  .site-automotive .ovl-next ol{grid-template-columns:1fr;gap:16px}
  .site-automotive .ovl-next ol::before{display:none}
  .site-automotive .ovl-next li{padding:0 0 0 56px;text-align:left;justify-items:start;transform:translateX(12px)}
  .site-automotive .ovl-next li::before{left:0;margin-left:0}
}
@media(prefers-reduced-motion:reduce){.site-automotive .ovl-next li{transform:none}.site-automotive .ovl.on .ovl-next li::before{animation:none}}
/* the CTA as the last item of the phone menu (the header button hides there; Knox #29459). Desktop never opens the menu */
nav ul .nav-cta{display:none}
nav ul.open .nav-cta{display:block;border-top:1px solid var(--line);margin-top:6px}
nav ul.open .nav-cta a{color:var(--signal2);font-weight:600}
/* LOGISTICS round (#29634; logistics-scoped, automotive unchanged) */
/* item 10 'Track. Trace. Protect.': the 1100 px glow circle was centred in a ~540 px tall overflow:hidden section, so it was
   sliced into hard lines at the section's top and bottom borders. The glow is now the section's OWN background, an ellipse
   that fades out inside the section; the rings start wider and fade in, so no small ring crosses the copy; the title wraps balanced. */
.site-logistics .cta-sec:not(.tone-light){background:radial-gradient(ellipse 52% 58% at 50% 46%,rgba(47,123,255,.24) 0,rgba(47,123,255,.08) 42%,rgba(47,123,255,0) 76%)}
.site-logistics .cta-sec:not(.tone-light)::before{display:none}
.site-logistics .cta-sec:not(.tone-light)::after,.site-logistics .cta-sec:not(.tone-light)>.wrap::before{top:46%;width:min(120vw,1200px);animation-name:lcta-out}
@keyframes lcta-out{0%{transform:translate(-50%,-50%) scale(.42);opacity:0}30%{opacity:.85}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.site-logistics .cta-sec .cta h2{text-wrap:balance}
/* item 4 'One device. Three teams': the visual BREAK after the dark Industries grid: light, three photo columns, no card boxes */
.site-logistics #teams .grid{gap:0}
.site-logistics #teams .card{background:none;border:0;border-left:1px solid var(--line-d);border-radius:0;box-shadow:none;padding:0 30px;animation:none}
.site-logistics #teams .card:first-child{border-left:0;padding-left:0}
.site-logistics #teams .card:last-child{padding-right:0}
.site-logistics #teams .card::before,.site-logistics #teams .card::after{display:none}
.site-logistics #teams .card:hover{transform:none;box-shadow:none}
.site-logistics #teams .card-media{margin:0 0 22px;aspect-ratio:4/3;border:0;border-radius:16px;box-shadow:0 30px 60px -36px rgba(20,60,140,.55)}
.site-logistics #teams h3{font-size:clamp(20px,1.7vw,24px)}
@media(max-width:900px){.site-logistics #teams .card,.site-logistics #teams .card:first-child,.site-logistics #teams .card:last-child{border-left:0;padding:0 0 34px}}
/* Home Industries: five cards = 3 + 2, the second row centred (never 4 + a lone card) */
@media(min-width:1101px){.site-logistics #industries .grid.n4{grid-template-columns:repeat(6,minmax(0,1fr))}.site-logistics #industries .grid.n4>.card{grid-column:span 2}.site-logistics #industries .grid.n4>.card:nth-child(4):nth-last-child(2){grid-column:2/span 2}}
@media(min-width:701px) and (max-width:1100px){.site-logistics #industries .grid.n4>.card:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 12px);justify-self:center;width:100%}}
/* Home intro = one centred statement band; Resources: the deployment film stays smaller than the featured overview */
.site-logistics #intro .feature.solo{grid-template-columns:1fr;justify-items:center;text-align:center;margin-left:auto;margin-right:auto}
.site-logistics #intro .feature-copy{max-width:780px}
.site-logistics #intro .lead{margin-left:auto;margin-right:auto}
.site-logistics #deploy-film .players{max-width:820px;margin-left:auto;margin-right:auto}
/* LOGISTICS tablets (701-1100 px) open the menu but keep the header CTA button: the menu's own CTA would repeat it */
@media(min-width:701px){.site-logistics nav ul.open .nav-cta{display:none}}
/* LOGISTICS page-hero loop on portrait phones: below the copy as a framed clip, so the device never sits behind the h1 */
@media(max-width:700px) and (orientation:portrait){
  .site-logistics .page-head-x{display:flex;flex-direction:column}
  .site-logistics .page-head-x .page-head{order:1;padding-bottom:28px}
  .site-logistics .page-head-x .phx-media{position:relative;inset:auto;z-index:0;order:2;margin:0 16px 40px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
  .site-logistics .page-head-x .phx-shade{display:none}
  /* 37b14b0d: where the hero has a phone_media (HIW: the real-card cutout), it replaces the framed clip: no box, a soft glow */
  .site-logistics .page-head-x:has(.phx-phone) .phx-media{display:none}
  .site-logistics .page-head-x .phx-phone{display:block;order:2;margin:0 28px 44px;background:radial-gradient(60% 55% at 50% 50%,rgba(47,123,255,.28),transparent 72%)}
  .site-logistics .phx-phone .media{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.5))}
}
.phx-phone{display:none}
/* LOGISTICS: the deck eyebrow and the header over a bright poster (the dawn fog still) stay legible */
.site-logistics .film-hero .film-eyebrow{text-shadow:0 1px 10px rgba(5,7,11,.85),0 0 2px rgba(5,7,11,.7)}
.site-logistics nav ul a{text-shadow:0 1px 8px rgba(5,7,11,.8)}
.site-logistics nav:not(.scrolled) ul a{color:var(--ink)}
.site-logistics .film-hero .film-shade::before{content:'';position:absolute;inset:0 0 auto;height:220px;background:linear-gradient(180deg,rgba(5,7,11,.72) 0,rgba(5,7,11,.4) 55%,rgba(5,7,11,0) 100%)}
.site-logistics nav .logo{filter:drop-shadow(0 1px 6px rgba(5,7,11,.7))}
/* LOGISTICS: the device ALONE (37b14b0d): Home 'The device' shows the transparent cutout whole, no card/frame/background */
.site-logistics #device .feature .frame{aspect-ratio:auto;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.site-logistics #device .feature .frame .media{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 34px 38px rgba(20,60,140,.28))}
/* ...and the Home deploy walk: the card floats on the section (glow + chips stay), no dark tile around it */
.site-logistics #deploy .sw-vis{background:none;border:0;border-radius:0;overflow:visible}
/* stacked (<= 860 px) the steps scroll under the sticky stage: an opaque backdrop in the section's own colour, feathered, no tile */
@media(max-width:860px){.site-logistics #deploy .sw-vis{background:var(--bg);box-shadow:0 22px 22px 4px var(--bg)}}
/* ==== LOGISTICS backgrounds (aecb25fc): one motif per section, the road graphic ONLY on Deploy; reduced motion = static ==== */
.site-logistics .tone-light,.site-logistics .tone-light+.tone-light{background-image:radial-gradient(60% 50% at 100% 0%,rgba(47,123,255,.06),transparent 70%);background-position:0 0;background-size:100% 100%}
.site-logistics #deploy.sw-sec{background-image:url(/assets/brand/motif-v1.svg);background-repeat:no-repeat;background-position:right -220px top -260px;background-size:780px auto}
.site-logistics #deploy.tone-light{background-image:url(/assets/brand/motif-v1.svg),radial-gradient(60% 50% at 100% 0%,rgba(47,123,255,.07),transparent 70%);background-position:right -220px top -260px,0 0;background-size:780px auto,100% 100%}
.site-logistics #overview,.site-logistics #platform,.site-logistics #vehicle-transport,.site-logistics #distribution,.site-logistics #equipment{isolation:isolate;overflow:clip}
.site-logistics :is(#overview,#platform,#vehicle-transport,#distribution,#equipment)::before,.site-logistics :is(#overview,#equipment)::after{content:'';position:absolute;z-index:-1;pointer-events:none}
/* the overview film: a signal radiating from the top-right corner (two rings expanding and fading) */
.site-logistics #overview::before,.site-logistics #overview::after{top:-280px;right:-280px;width:560px;height:560px;border-radius:50%;border:2.5px solid rgba(47,123,255,.8);opacity:0;animation:lgx-ring 6s cubic-bezier(.2,.6,.3,1) infinite}
.site-logistics #overview::after{animation-delay:3s}
@keyframes lgx-ring{0%{transform:scale(.2);opacity:.95}100%{transform:scale(1);opacity:.2}}
/* the carrier: light chevron lanes drifting along the road */
.site-logistics #vehicle-transport::before{inset:0;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(47,123,255,.17) 46px 49px,transparent 49px 96px);-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);animation:lgx-lanes 9s linear infinite}
@keyframes lgx-lanes{to{background-position:192px 0}}
/* inventory: a soft conveyor-dot flow along the bottom */
.site-logistics #distribution::before{left:0;right:0;bottom:56px;height:36px;background:radial-gradient(circle,rgba(47,123,255,.28) 2.5px,transparent 3px) 0 50%/36px 36px repeat-x,linear-gradient(90deg,transparent,rgba(47,123,255,.08) 20%,rgba(47,123,255,.08) 80%,transparent) 0 50%/100% 1px no-repeat;animation:lgx-conv 3.6s linear infinite}
@keyframes lgx-conv{to{background-position:36px 50%,0 50%}}
@media(max-width:700px){.site-logistics #overview::before,.site-logistics #overview::after{top:-100px;right:-100px;width:200px;height:200px}}
/* 'One view': a faint dotted asset map, pins pulse in turn while a route draws between them */
.site-logistics #platform::before{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M150 430 C 380 300 520 470 720 330 S 1000 190 1080 230' fill='none' stroke='rgb(47,123,255)' stroke-opacity='.85' stroke-width='3' stroke-dasharray='1400' stroke-dashoffset='1400'%3E%3Canimate attributeName='stroke-dashoffset' values='1400;0;0' keyTimes='0;.6;1' dur='6s' repeatCount='indefinite'/%3E%3C/path%3E%3Ccircle cx='150' cy='430' r='7' fill='rgb(47,123,255)' fill-opacity='.9'/%3E%3Ccircle cx='150' cy='430' r='6' fill='none' stroke='rgb(47,123,255)' stroke-width='2.5' opacity='0'%3E%3Canimate attributeName='r' values='6;26' dur='2s' begin='0s;p0.end%2B4s' id='p0'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2s' begin='0s;p0.end%2B4s'/%3E%3C/circle%3E%3Ccircle cx='720' cy='330' r='7' fill='rgb(47,123,255)' fill-opacity='.9'/%3E%3Ccircle cx='720' cy='330' r='6' fill='none' stroke='rgb(47,123,255)' stroke-width='2.5' opacity='0'%3E%3Canimate attributeName='r' values='6;26' dur='2s' begin='2s;p2.end%2B4s' id='p2'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2s' begin='2s;p2.end%2B4s'/%3E%3C/circle%3E%3Ccircle cx='1080' cy='230' r='7' fill='rgb(47,123,255)' fill-opacity='.9'/%3E%3Ccircle cx='1080' cy='230' r='6' fill='none' stroke='rgb(47,123,255)' stroke-width='2.5' opacity='0'%3E%3Canimate attributeName='r' values='6;26' dur='2s' begin='4s;p4.end%2B4s' id='p4'/%3E%3Canimate attributeName='opacity' values='.9;0' dur='2s' begin='4s;p4.end%2B4s'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center/cover,radial-gradient(circle,rgba(47,123,255,.3) 1.4px,transparent 1.8px) 0 0/22px 22px;-webkit-mask:radial-gradient(70% 80% at 50% 50%,#000,transparent);mask:radial-gradient(70% 80% at 50% 50%,#000,transparent)}
/* equipment: a slow radar sweep from the corner, with a soft ping */
.site-logistics #equipment::before{right:-300px;bottom:-300px;width:640px;height:640px;border-radius:50%;background:conic-gradient(from 0deg,rgba(47,123,255,.32),transparent 18%,transparent),repeating-radial-gradient(circle,transparent 0 63px,rgba(47,123,255,.2) 64px 66px);animation:lgx-sweep 8s linear infinite}
.site-logistics #equipment::after{right:60px;bottom:120px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(47,123,255,.85);opacity:0;animation:lgx-ping 8s ease-out infinite}
@keyframes lgx-sweep{to{transform:rotate(360deg)}}
@keyframes lgx-ping{0%,40%{transform:scale(.4);opacity:0}45%{opacity:.8}70%,100%{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .site-logistics :is(#overview,#vehicle-transport,#distribution,#equipment)::before,.site-logistics :is(#overview,#equipment)::after{animation:none}
  .site-logistics #overview::before{transform:scale(.55);opacity:.5}.site-logistics #overview::after{transform:scale(.85);opacity:.3}.site-logistics #equipment::after{opacity:0}
  .site-logistics #platform::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M150 430 C 380 300 520 470 720 330 S 1000 190 1080 230' fill='none' stroke='rgb(47,123,255)' stroke-opacity='.85' stroke-width='3' stroke-dasharray='1400' stroke-dashoffset='0'%3E%3C/path%3E%3Ccircle cx='150' cy='430' r='7' fill='rgb(47,123,255)' fill-opacity='.9'/%3E%3Ccircle cx='720' cy='330' r='7' fill='rgb(47,123,255)' fill-opacity='.9'/%3E%3Ccircle cx='1080' cy='230' r='7' fill='rgb(47,123,255)' fill-opacity='.9'/%3E%3C/svg%3E") no-repeat center/cover,radial-gradient(circle,rgba(47,123,255,.3) 1.4px,transparent 1.8px) 0 0/22px 22px}
}
/* no hard clips at section edges (aecb25fc follow-up): every motif fades out before it meets an edge */
.site-logistics #overview::before,.site-logistics #overview::after{-webkit-mask:linear-gradient(180deg,transparent 50%,#000 62%),linear-gradient(90deg,#000 38%,transparent 50%);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,transparent 50%,#000 62%),linear-gradient(90deg,#000 38%,transparent 50%);mask-composite:intersect}
.site-logistics #vehicle-transport::before{-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
.site-logistics #distribution::before{-webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.site-logistics #equipment::before{-webkit-mask:linear-gradient(180deg,#000 36%,transparent 50%),linear-gradient(90deg,#000 36%,transparent 50%);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,#000 36%,transparent 50%),linear-gradient(90deg,#000 36%,transparent 50%);mask-composite:intersect}
/* the radar radius stays inside the measured clearance to the copy at every width (QA 820/1180) */
.site-logistics #equipment::before{right:-190px;bottom:-190px;width:380px;height:380px}.site-logistics #equipment::after{right:80px;bottom:80px}
@media(max-width:1200px){.site-logistics #equipment::before{right:-170px;bottom:-170px;width:340px;height:340px}.site-logistics #equipment::after{right:70px;bottom:70px}}
@media(max-width:1000px){.site-logistics #equipment::before{right:-110px;bottom:-110px;width:220px;height:220px}.site-logistics #equipment::after{right:46px;bottom:46px}}
@media(max-width:700px){.site-logistics #equipment::before{right:-75px;bottom:-75px;width:150px;height:150px}.site-logistics #equipment::after{right:30px;bottom:30px}}
/* Industries splits (97884c07): each block is the 'bleed' half-screen video | copy. A flipped block mirrors the copy padding
   (page grid on the left); on dark tones the reveal panel is the page dark, not mist; the motif layers stay on the copy half */
@media(min-width:960px){
  .site-logistics .fxb.flip .feature-copy{padding:96px 72px 96px max(24px,calc((100vw - 1200px)/2 + 24px))}
  .site-logistics #vehicle-transport.fx-bleed::before,.site-logistics #distribution.fx-bleed::before{left:51.22%}
}
.site-logistics .fx-bleed:not(.tone-light):not(.tone-mist) .fxb-media::after{background:var(--bg)}
/* stacked (< 960 px) the copy sits under the video: the conveyor runs below the last line, the radar keeps under the copy clearance */
@media(max-width:959px){.site-logistics #distribution.fx-bleed::before{bottom:18px}}
@media(max-width:700px){.site-logistics #equipment.fx-bleed::before{right:-70px;bottom:-70px;width:140px;height:140px}}
/* am.#2: the two laptop sections alternate; a flipped one (copy left, laptop right) mirrors the columns so the laptop keeps the wide
   one, at 95% so the base's 5% overhang stays inside its column (it ran 6 px past the page at 1180) */
@media(min-width:861px){.site-logistics .dash-feature.flip{grid-template-columns:1fr 1.25fr}.site-logistics .dash-feature.flip .dash-laptop{width:95%}}
/* the road graphic (Deploy only) as a masked layer, so it fades before the section's top and right edges */
.site-logistics #deploy.sw-sec{background-image:none}
.site-logistics #deploy.tone-light{background-image:radial-gradient(60% 50% at 100% 0%,rgba(47,123,255,.07),transparent 70%);background-size:100% 100%;background-position:0 0}
.site-logistics #deploy{position:relative;isolation:isolate;overflow:clip}
.site-logistics #deploy::after{content:'';position:absolute;z-index:-1;pointer-events:none;top:-260px;right:-220px;width:780px;height:780px;background:url(/assets/brand/motif-v1.svg) no-repeat 0 0/780px auto;-webkit-mask:linear-gradient(180deg,transparent 260px,#000 330px),linear-gradient(90deg,#000 490px,transparent 560px);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,transparent 260px,#000 330px),linear-gradient(90deg,#000 490px,transparent 560px);mask-composite:intersect}