/* ==========================================================
   SUAS — Home page
   Theme: deep navy / white bands, signal-blue actions,
   expanded uppercase display type, "signal path" connectors.
   Tokens, base, type, buttons, header and footer live in
   theme.css (loaded first).
   ========================================================== */

/* ---------- Section heading size (one size for every section title,
   one shared value) ---------- */
:root{
  --h-section:clamp(32px,3.4vw,50px);
  --h-section-lh:1.04;
}
@media (max-width:600px){
  :root{ --h-section:32px; }
  /* at 46px some uppercase words ("MANUFACTURING") are wider than a phone
     column: let them hyphenate instead of pushing the page sideways */
  .sec .display{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
}

.sec{position:relative;padding:clamp(64px,9vw,120px) 0}
.sec--dark{background:var(--navy);color:var(--inv)}
.sec--mist{background:var(--mist)}
/* #response (mist) and #ecosystem (plain) are both light: keep a visible edge between them */
#response+#ecosystem{border-top:1px solid var(--line)}

/* ---------- Type (home-specific contexts) ---------- */
.sec--dark .eyebrow,.hero .eyebrow{color:var(--blue-2)}
.sec .display{font-size:var(--h-section);line-height:var(--h-section-lh)}
/* titles wrap between words only (break-word / hyphens: phones only, see above) */
.sec--dark .hl,.hero .hl{color:var(--blue-2)}
.sec--dark .lede{color:var(--inv-2)}

.cta-row{margin-top:32px}

/* ---------- Signal path (the recurring motif) ---------- */
.link{--sig:var(--blue-2);position:relative;flex:0 0 34px;align-self:center;height:2px;background:repeating-linear-gradient(90deg,var(--sig) 0 5px,transparent 5px 10px)}
.link::before{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;border-top:2px solid var(--sig);border-right:2px solid var(--sig);transform:translateY(-50%) rotate(45deg)}
.link::after{content:"";position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:0 0 10px var(--sig);transform:translate(-50%,-50%);opacity:0;animation:travel 2.4s linear infinite;animation-play-state:paused}
.is-live .link::after{animation-play-state:running}
.sec:not(.sec--dark) .link{--sig:var(--blue)}
@keyframes travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}

.link--v{flex:none;width:2px;height:30px;align-self:flex-start;margin-left:27px;background:repeating-linear-gradient(180deg,var(--sig) 0 5px,transparent 5px 10px)}
.link--v::before{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%) rotate(135deg)}
.link--v::after{left:50%;top:0;animation-name:travel-v;transform:translate(-50%,-50%)}
@keyframes travel-v{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

/* ---------- Illustration / photo frames ---------- */
.ph{position:relative;overflow:hidden;aspect-ratio:16/10;
  --m1:#e3eaf2;--m2:#c3cfdc;--glass:var(--ink);--led:var(--accent-on-dark);--arm:var(--robot);--arm2:var(--robot-dark);
  background:
    linear-gradient(180deg,transparent 86%,rgba(0,0,0,.22) 86%),
    radial-gradient(110% 90% at 72% 0%,var(--dark-3) 0%,var(--dark) 62%,var(--ink) 100%)}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.ph>svg{position:absolute;inset:0;width:100%;height:100%}
.ph .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.has-photo>svg{opacity:0}
.ph--43{aspect-ratio:4/3}
.ph--sq{aspect-ratio:1/1}
.ph--light{
  --m1:#cbd6e3;--m2:#aebdd0;--glass:var(--dark-2);
  background:
    linear-gradient(180deg,transparent 86%,color-mix(in srgb,var(--dark) 9%,transparent) 86%),
    radial-gradient(110% 90% at 70% 0%,var(--bg) 0%,var(--bg-alt) 70%,var(--line) 100%)}
.ph--light::before{background-image:linear-gradient(color-mix(in srgb,var(--dark) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--dark) 5%,transparent) 1px,transparent 1px)}
.ph--clear{background:none;overflow:visible}
.ph--clear::before{display:none}
.ph--clear .photo{object-fit:contain}
.ph--round{border-radius:14px}

/* ==========================================================
   01 Hero
   ========================================================== */
.hero{position:relative;isolation:isolate;min-height:max(100svh,700px);display:flex;align-items:flex-end;color:#fff;background:var(--dark);overflow:hidden}
.hero__art{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero>.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero.has-photo .hero__art{opacity:0}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,color-mix(in srgb,var(--dark) 94%,transparent) 0%,color-mix(in srgb,var(--dark) 66%,transparent) 46%,color-mix(in srgb,var(--dark) 12%,transparent) 82%),
  linear-gradient(0deg,color-mix(in srgb,var(--dark) 90%,transparent),transparent 38%)}
.hero>.wrap{width:100%}
.hero__body{max-width:780px;padding:calc(var(--hdr) + 72px) 0 clamp(56px,8vw,104px)}
.hero h1{font:800 clamp(2.1rem,4.3vw,4rem)/1.02 var(--f-display);font-stretch:100%;text-transform:uppercase;margin-bottom:30px}
.hero h1 .hl{display:block}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.tags li{padding:8px 15px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.88rem;font-weight:500}

/* ==========================================================
   02 Landscape
   ========================================================== */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.split--eco{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card__b{padding:18px 18px 22px;display:grid;gap:8px}
.card__t{display:flex;align-items:center;gap:10px}
.chip{width:38px;height:38px;border-radius:11px;background:var(--navy);color:var(--blue-2);display:grid;place-items:center;font-size:19px;flex:none}
.card h3{font:700 1rem/1.25 var(--f-display);font-stretch:104%}

/* #landscape (reference: suas_manufacturing_smaller_probe.html): heading, intro row,
   then four full-width cards with an animated scene, "01 / 04 · TYPE" and the copy.
   Scene animations run only while the cards are on screen ([data-live] -> .is-live,
   home.js) and stop under prefers-reduced-motion (theme.css). */
.land-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:clamp(14px,2.4vh,24px) 0 clamp(20px,3.6vh,34px)}
#landscape .land-intro .lede{margin:0;max-width:62ch}
.land-tag{flex:none;display:flex;align-items:center;gap:13px;margin:0;color:var(--accent-hover);font:700 .7rem/1.3 var(--f-body);letter-spacing:.19em;text-transform:uppercase;white-space:nowrap}
.land-tag::before{content:"";width:35px;height:1px;background:color-mix(in srgb,var(--accent) 55%,transparent)}
#landscape .cards4{gap:18px}
#landscape .card{position:relative}
.land-scene{position:relative;overflow:hidden;flex:none;height:160px;background:radial-gradient(ellipse at 52% 10%,var(--dark-3),var(--dark) 78%)}
.land-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px}
.land-scene>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.land-scene .photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}   /* photo slot (home.js) */
.land-scene.has-photo>svg{opacity:0}
.land-label{position:absolute;z-index:2;left:15px;top:13px;color:var(--inv-2);font:700 .66rem/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase}
#landscape .card__b{display:block;padding:20px 21px 24px}
.land-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:clamp(12px,2vh,20px)}
.land-index{color:var(--accent-hover);font:700 .74rem/1 var(--f-body);letter-spacing:.1em}
.land-type{color:var(--txt-2);font:600 .68rem/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase}
#landscape .card h3{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.27}
#landscape .card p{margin-top:10px;font-size:.9rem;line-height:1.6;color:var(--txt-2)}
/* orange underline on hover: on ::after, so the card keeps only the shared --hover-grow scale */
#landscape .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
#landscape .card:is(:hover,:focus-within)::after{transform:scaleX(1)}

/* scene animations */
.land-gear-a,.land-gear-b,.land-gear-c,.land-gear-d{transform-box:fill-box;transform-origin:center}
.land-gear-a{animation:landSpin 12s linear infinite}
.land-gear-b{animation:landSpinR 8.5s linear infinite}
.land-gear-c{animation:landSpinR 10s linear infinite}
.land-gear-d{animation:landSpin 6.5s linear infinite}
.land-track{animation:landSlide 6.5s linear infinite}
.land-process{stroke-dasharray:2 8;animation:landDash 3s linear infinite}
.land-probe{animation:landProbe 3.6s ease-in-out infinite}
.land-pulse{transform-origin:114px 79px;animation:landPulse 3.6s ease-out infinite}
.land-readout{animation:landBlink 3.6s steps(1) infinite}
.land-screen{animation:landGlow 4s ease-in-out infinite}
.land-tool{animation:landTool 3.2s ease-in-out infinite}
.land-head{transform-origin:60px 70px;animation:landNod 5s ease-in-out infinite}
#landscape .cards4:not(.is-live) .land-scene *{animation-play-state:paused}
@keyframes landSpin{to{transform:rotate(360deg)}}
@keyframes landSpinR{to{transform:rotate(-360deg)}}
@keyframes landSlide{from{transform:translateX(-130px)}to{transform:translateX(255px)}}
@keyframes landDash{to{stroke-dashoffset:-40}}
@keyframes landProbe{0%,15%,80%,100%{transform:translateY(-12px)}39%,57%{transform:translateY(0)}}
@keyframes landPulse{0%,28%{opacity:0;transform:scale(.55)}45%{opacity:.9;transform:scale(1)}75%,100%{opacity:0;transform:scale(1.5)}}
@keyframes landBlink{0%,38%,70%,100%{opacity:.45}39%,69%{opacity:1}}
@keyframes landGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes landTool{0%,100%{transform:translateY(-5px)}40%,65%{transform:translateY(5px)}}
@keyframes landNod{0%,70%,100%{transform:rotate(0)}78%,90%{transform:rotate(6deg)}}
.card p{font-size:.9rem;color:var(--txt-2);line-height:1.5}

/* ==========================================================
   03 Challenge
   ========================================================== */
.challenge{overflow:hidden}
.bg-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.challenge .bg-art{opacity:.2!important;-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 30%,#000 100%)}
.final .bg-art{opacity:.4;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 100%)}
.bg-art+.wrap,.bg-art~.wrap{position:relative;z-index:1}
.bg-photo{position:absolute;inset:0;z-index:0}
.bg-photo .photo{width:100%;height:100%;object-fit:cover;opacity:.35}
.flow{display:flex;align-items:stretch;gap:10px;margin-top:clamp(36px,5vw,60px)}
.flow>.link{align-self:center}
.node{flex:1 1 0;min-width:0}
.node--dark{background:rgba(255,255,255,.045);border:1px solid var(--line-inv);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.node--dark .ph{border-radius:0}
.node--dark h3{font:700 .98rem/1.2 var(--f-display);font-stretch:106%;padding:14px 14px 4px}
.issue{display:flex;gap:8px;align-items:flex-start;margin-top:auto;padding:10px 14px 16px;font-size:.84rem;line-height:1.35;color:#ffb0a4}
.issue .ic{color:var(--red);margin-top:1px;font-size:16px}
.callout{max-width:62ch;margin:clamp(36px,5vw,56px) auto 0;text-align:center;font-size:1.08rem;color:var(--text-on-dark)}

/* ==========================================================
   #challenge animation
   home.js (challengeSequence) plays the six cards in order: each card is
   .ch-active for 2.2 s, then the connectors flicker and dim (.ch-cut) for
   1.5 s and the loop restarts. A pulse travels along the connector into the
   active card; on the Material handling -> Production data connector the
   pulses queue up (bottleneck). Hover / tap plays one card on demand.
   Only transform, opacity and stroke-dashoffset on inner SVG parts move:
   the card itself is never transformed (the shared hover-grow keeps its
   "scale"), and no box changes size. Paused off-screen / hidden tab
   (.ch-paused). prefers-reduced-motion: static problem state, no sequencer.
   ========================================================== */
.flow .ch-ov{opacity:0}
.flow.ch-on .node>*{transition:opacity .45s var(--ease)}
.flow.ch-on .node:not(.ch-active)>*{opacity:.75}                 /* calm, slightly dimmed */
.flow .node.ch-active .ch-ov{opacity:1}
.flow.ch-paused *,.flow.ch-paused *::before,.flow.ch-paused *::after{animation-play-state:paused!important}

/* rotation / scale pivots of the moving SVG parts */
.ch-m-fill{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.ch-o-head,.ch-o-bars rect,.ch-h-top{transform-box:fill-box;transform-origin:50% 100%}
.ch-g1,.ch-g2,.ch-wrench,.ch-spark{transform-box:fill-box;transform-origin:50% 50%}
.ch-d-line{stroke-dasharray:160;stroke-dashoffset:0}

/* warning icon of the active card pulses (under 1 flash per second) */
.flow .node.ch-active .issue .ic{animation:chWarn 1.1s ease-in-out infinite}
@keyframes chWarn{50%{transform:scale(1.25);filter:drop-shadow(0 0 4px var(--red))}}

/* 1 Machines - manual intervention: bar fills, stalls (WAIT), a tap, stalls again */
.flow .node.ch-active .ch-m-fill{animation:chMBar 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-m-wait,.flow .node.ch-active .ch-m-led{animation:chMWait 2.2s steps(1) infinite}
.flow .node.ch-active .ch-m-hand{animation:chMHand 2.2s ease-in-out infinite}
@keyframes chMBar{0%{transform:scaleX(0)}38%,66%{transform:scaleX(.7)}72%,100%{transform:scaleX(.86)}}
@keyframes chMWait{0%,37%{opacity:0}38%,48%{opacity:1}49%,58%{opacity:.25}59%,66%{opacity:1}67%,73%{opacity:0}74%,86%{opacity:1}87%,100%{opacity:.25}}
@keyframes chMHand{0%,50%{opacity:0;transform:translateX(12px)}57%{opacity:1;transform:translateX(0)}64%{opacity:1;transform:translateX(-18px)}70%{opacity:1;transform:translateX(0)}80%,100%{opacity:0;transform:translateX(8px)}}

/* 2 Operators - inconsistent processes: cycle-time bars out of rhythm, head turns to each */
.ch-o-b1{transform:scaleY(.64)}.ch-o-b3{transform:scaleY(.82)}
.flow .node.ch-active .ch-o-b1{animation:chOB1 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-o-b2{animation:chOB2 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-o-b3{animation:chOB3 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-o-head{animation:chOHead 2.2s ease-in-out infinite}
@keyframes chOB1{0%,100%{transform:scaleY(.64)}30%{transform:scaleY(.95)}55%{transform:scaleY(.5)}80%{transform:scaleY(.8)}}
@keyframes chOB2{0%,100%{transform:scaleY(1)}20%{transform:scaleY(.62)}50%{transform:scaleY(.9)}75%{transform:scaleY(.55)}}
@keyframes chOB3{0%,100%{transform:scaleY(.82)}40%{transform:scaleY(.6)}65%{transform:scaleY(1)}85%{transform:scaleY(.7)}}
@keyframes chOHead{0%,100%{transform:rotate(0)}25%{transform:rotate(7deg)}55%{transform:rotate(-4deg)}80%{transform:rotate(9deg)}}

/* 3 Inspection - quality variations: beam sweeps the part, result flips check/check/cross/check/cross */
.flow .node.ch-active .ch-i-beam{animation:chIBeam 1.1s ease-in-out infinite alternate}
.flow .node.ch-active .ch-i-ok{animation:chIOk 2.2s steps(1) infinite}
.flow .node.ch-active .ch-i-bad{animation:chIBad 2.2s steps(1) infinite}
@keyframes chIBeam{from{transform:translateX(0)}to{transform:translateX(78px)}}
@keyframes chIOk{0%,18%{opacity:1}19%,21%{opacity:0}22%,39%{opacity:1}40%,59%{opacity:0}60%,79%{opacity:1}80%,100%{opacity:0}}
@keyframes chIBad{0%,39%{opacity:0}40%,59%{opacity:1}60%,79%{opacity:0}80%,100%{opacity:1}}

/* 4 Material handling - bottleneck: a box slides up to the pile and waits, the next one queues */
.flow .node.ch-active .ch-h-box1{animation:chHBox1 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-h-box2{animation:chHBox2 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-h-top{animation:chHWob .55s ease-in-out infinite alternate}
@keyframes chHBox1{0%{opacity:0;transform:translateX(0)}8%{opacity:1}45%{transform:translateX(44px)}52%{transform:translateX(41px)}58%,100%{opacity:1;transform:translateX(44px)}}
@keyframes chHBox2{0%,40%{opacity:0;transform:translateX(-6px)}55%{opacity:1;transform:translateX(0)}70%{transform:translateX(2px)}78%,100%{opacity:1;transform:translateX(0)}}
@keyframes chHWob{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}

/* 5 Production data - limited visibility: the line draws, then drops out with a "no signal" flicker */
.flow .node.ch-active .ch-d-line{animation:chDLine 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-d-gaps{animation:chDGaps 2.2s steps(1) infinite}
.flow .node.ch-active .ch-d-noise{animation:chDNoise 2.2s steps(1) infinite}
.flow .node.ch-active .ch-d-q{animation:chDQ 2.2s ease-in-out infinite}
@keyframes chDLine{0%{stroke-dashoffset:160}40%,100%{stroke-dashoffset:0}}
@keyframes chDGaps{0%,47%{opacity:0}48%,100%{opacity:1}}
@keyframes chDNoise{0%,57%{opacity:0}58%,63%{opacity:.35}64%,83%{opacity:0}84%,89%{opacity:.3}90%,100%{opacity:0}}
@keyframes chDQ{0%,55%{opacity:0}66%,100%{opacity:.75}}

/* 6 Maintenance - unplanned downtime: gears run, stop suddenly, spark, wrench shakes, the clock runs (home.js) */
.flow .node.ch-active .ch-g1{animation:chG1 2.2s infinite}
.flow .node.ch-active .ch-g2{animation:chG2 2.2s infinite}
.flow .node.ch-active .ch-spark{animation:chSpark 2.2s ease-out infinite}
.flow .node.ch-active .ch-wrench{animation:chWrench 2.2s ease-in-out infinite}
.flow .node.ch-active .ch-t{animation:chTimer 2.2s steps(1) infinite}
/* 225deg / -330deg are whole multiples of the 15deg tooth pitch, so the loop restart is seamless */
@keyframes chG1{0%{transform:rotate(0);animation-timing-function:linear}48%{transform:rotate(195deg);animation-timing-function:cubic-bezier(.2,.6,.3,1)}62%,100%{transform:rotate(225deg)}}
@keyframes chG2{0%{transform:rotate(0);animation-timing-function:linear}48%{transform:rotate(-286deg);animation-timing-function:cubic-bezier(.2,.6,.3,1)}62%,100%{transform:rotate(-330deg)}}
@keyframes chSpark{0%,58%{opacity:0;transform:scale(.4)}63%{opacity:1;transform:scale(1.15)}72%{opacity:.75;transform:scale(.9)}80%,100%{opacity:0;transform:scale(.6)}}
@keyframes chWrench{0%,60%{transform:rotate(0)}64%{transform:rotate(-7deg)}68%{transform:rotate(6deg)}72%{transform:rotate(-5deg)}76%{transform:rotate(3deg)}80%,100%{transform:rotate(0)}}
@keyframes chTimer{0%,57%{opacity:0}58%,100%{opacity:1}}

/* connectors: a pulse travels into the active card; the bottleneck connector queues three pulses */
.ch-pulse{position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--sig);box-shadow:0 0 10px var(--sig);opacity:0;pointer-events:none}
.flow.ch-on .link::after{animation:none;opacity:0}
.flow .link.ch-feed .ch-pulse:first-child{animation:chTravel .9s cubic-bezier(.45,0,.55,1) forwards}
.flow .link.ch-feed.ch-jam .ch-pulse{animation:chJam 1.8s linear forwards}
.flow .link.ch-feed.ch-jam .ch-pulse:nth-child(2){animation-delay:.2s}
.flow .link.ch-feed.ch-jam .ch-pulse:nth-child(3){animation-delay:.4s}
@keyframes chTravel{0%{opacity:0;transform:translateX(0)}12%,88%{opacity:1}100%{opacity:0;transform:translateX(34px)}}
@keyframes chJam{0%{opacity:0;transform:translateX(0)}8%{opacity:1;transform:translateX(4px)}28%{transform:translateX(15px)}72%{opacity:1;transform:translateX(19px)}94%{opacity:1;transform:translateX(34px)}100%{opacity:0;transform:translateX(34px)}}
/* end of the loop: every connector flickers once and dims ("disconnected") */
.flow.ch-cut .link{animation:chCut 1.5s steps(1) forwards}
@keyframes chCut{0%{opacity:1}12%{opacity:.2}24%{opacity:1}36%,100%{opacity:.3}}

/* reduced motion: no sequencer (home.js); each card shows its problem state, connectors stay dashed */
@media (prefers-reduced-motion:reduce){
  .flow .ch-ov{opacity:1}
  .ch-m-fill{transform:scaleX(.7)}
  .ch-i-ok{opacity:0}
  .ch-h-box1{transform:translateX(44px)}
  .flow .ch-d-noise{opacity:0}
  .flow .ch-d-q{opacity:.75}
  .flow .issue .ic{filter:drop-shadow(0 0 3px var(--red))}
}

/* ==========================================================
   04 Industry response
   ========================================================== */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.stat .chip{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--blue)}
.stat .stat__n{font:800 clamp(1.7rem,2.8vw,2.55rem)/1 var(--f-display);font-stretch:104%;color:var(--navy);white-space:nowrap}
.stat .stat__n small{font-size:.5em;font-weight:700;margin-left:2px}
.stat p{font-size:.9rem;line-height:1.45;color:var(--txt)}
.evo{display:flex;align-items:center;gap:12px;margin-top:clamp(40px,6vw,72px)}
.evo__i{flex:1 1 0;min-width:0;text-align:center}
.evo__i .ph{border-radius:14px;border:1px solid var(--line)}
.evo__i h3{margin-top:14px;font:700 .98rem/1.2 var(--f-display);font-stretch:106%}
.evo__i:last-child h3{color:var(--accent-hover)}

/* ==========================================================
   05 Turning point
   ========================================================== */
.turning{overflow:hidden;min-height:min(80svh,640px);display:flex;align-items:center;background:var(--ink)}
.turning .wrap{width:100%}
.turning .head{max-width:600px}
.steps{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(36px,5vw,56px)}
.step{display:grid;justify-items:center;gap:14px;width:104px;text-align:center}
.step__ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--blue-2);border:1.5px solid color-mix(in srgb,var(--accent-on-dark) 55%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 28%,transparent)}
.step__l{font:700 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.steps .link{flex:0 0 40px;margin-bottom:34px}

/* ==========================================================
   06 Ecosystem hub
   ========================================================== */
.hub{width:min(100%,580px);aspect-ratio:1;position:relative;margin-inline:auto;container-type:inline-size}
.hub__ring{position:absolute;inset:12%;border:1.5px dashed var(--line);border-radius:50%}
.hub__spoke{position:absolute;left:50%;top:50%;width:37cqw;height:0;border-top:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);transform-origin:0 0;transform:rotate(var(--a))}
.hub__core{position:absolute;left:50%;top:50%;width:30cqw;height:30cqw;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;align-content:center;gap:1cqw;color:#fff;background:radial-gradient(circle at 50% 35%,var(--dark-3),var(--ink) 72%);box-shadow:0 0 0 1.6cqw color-mix(in srgb,var(--accent) 12%,transparent),0 0 0 3.4cqw color-mix(in srgb,var(--accent) 6%,transparent)}
.hub__logo{display:block;width:auto;height:11cqw}
.hub__core b{font:800 clamp(1rem,3.6cqw,1.6rem)/1 var(--f-display);font-stretch:110%;letter-spacing:.02em}
.hub__n{position:absolute;left:50%;top:50%;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;transform:rotate(var(--a)) translateX(37cqw) rotate(calc(var(--a) * -1))}
.hub__n i{position:absolute;inset:0;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--blue);font-size:clamp(18px,4.6cqw,28px);font-style:normal}
.hub__n span{position:absolute;top:calc(100% + .8cqw);left:50%;transform:translateX(-50%);width:24cqw;text-align:center;font:600 clamp(11px,2.4cqw,14px)/1.2 var(--f-body);color:var(--navy)}

/* ==========================================================
   07 Pipeline
   ========================================================== */
.pipe{align-items:stretch}
.pipe .node{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.pipe .node h3{padding:16px 16px 6px;font:800 .9rem/1.2 var(--f-display);font-stretch:104%;letter-spacing:.04em;text-transform:uppercase}
.pipe ul{padding:0 16px 18px;display:grid;gap:3px;font-size:.88rem;color:var(--txt-2)}
.pipe li{display:flex;gap:8px;align-items:baseline}
.pipe li::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--blue);flex:none;transform:translateY(-1px)}
/* on a dark band: translucent cards like the #challenge nodes */
.sec--dark .pipe .node{background:rgba(255,255,255,.045);border-color:var(--line-inv)}
.sec--dark .pipe ul{color:var(--inv-2)}
.sec--dark .pipe li::before{background:var(--blue-2)}

/* ==========================================================
   08 Data -> intelligence
   ========================================================== */
.datasec{overflow:hidden}
.datasec .hl{display:block}
.datagrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,.62fr);gap:clamp(24px,4vw,56px);align-items:center}
.metrics{margin-top:28px;display:grid}
.metrics li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-inv);font-size:.96rem;color:var(--inv)}
.metrics li:first-child{border-top:1px solid var(--line-inv)}
.metrics .ic{color:var(--blue-2);font-size:19px}
.dash{background:linear-gradient(160deg,var(--dark-3),var(--dark-2));border:1px solid color-mix(in srgb,var(--accent-on-dark) 28%,transparent);border-radius:18px;padding:18px;display:grid;gap:14px;box-shadow:0 0 60px color-mix(in srgb,var(--accent) 16%,transparent)}
.dash__top{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--inv-2)}
.dash__top b{color:var(--inv);font-weight:600}
.dash__live{display:inline-flex;align-items:center;gap:6px}
.dash__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.dash__row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.gauge{position:relative;width:132px;height:132px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:10;stroke-linecap:round}
.gauge__bg{stroke:rgba(255,255,255,.1)}
.gauge__val{stroke:var(--blue-2);stroke-dasharray:326.7;stroke-dashoffset:32.7;transition:stroke-dashoffset 1.6s var(--ease)}
.js .gauge__val{stroke-dashoffset:326.7}
.js .is-in .gauge__val{stroke-dashoffset:32.7}
.gauge__t{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center}
.gauge__t b{font:800 1.9rem/1 var(--f-display);font-stretch:104%;color:#fff}
.gauge__t span{font-size:.68rem;color:var(--inv-2);margin-top:4px}
.kpis{display:grid;gap:8px}
.kpi{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:.82rem;color:var(--inv-2)}
.kpi b{color:#fff;font-weight:600;white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:6px;height:96px;padding:10px 12px 0;border-radius:12px;background:rgba(255,255,255,.04)}
.bar{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--blue-2),var(--accent));transform-origin:bottom;transition:transform .8s var(--ease)}
.js .bar{transform:scaleY(.06)}
.js .is-in .bar{transform:none;transition-delay:calc(var(--i) * 45ms)}
.dash__note{font-size:.7rem;color:var(--inv-2);text-align:right}
.chain{display:flex;flex-direction:column}
.chain__i{display:flex;align-items:center;gap:14px}
.chain__ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:23px;color:var(--blue-2);border:1.5px solid color-mix(in srgb,var(--accent-on-dark) 50%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.chain__l{font:700 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
/* light band (no .sec--dark): the rules above are the dark version */
.datasec:not(.sec--dark) .metrics li{color:var(--txt);border-color:var(--line)}
.datasec:not(.sec--dark) .metrics .ic{color:var(--accent)}
.datasec:not(.sec--dark) .dash{background:#fff;border-color:var(--line);box-shadow:0 22px 50px -28px color-mix(in srgb,var(--text) 35%,transparent)}
.datasec:not(.sec--dark) .dash__top,.datasec:not(.sec--dark) .dash__note{color:var(--txt-2)}
.datasec:not(.sec--dark) .dash__top b{color:var(--txt)}
.datasec:not(.sec--dark) .gauge__bg{stroke:color-mix(in srgb,var(--text) 9%,transparent)}
.datasec:not(.sec--dark) .gauge__val{stroke:var(--accent)}
.datasec:not(.sec--dark) .gauge__t b{color:var(--txt)}
.datasec:not(.sec--dark) .gauge__t span{color:var(--txt-2)}
.datasec:not(.sec--dark) .kpi{background:var(--bg);color:var(--txt-2)}
.datasec:not(.sec--dark) .kpi b{color:var(--txt)}
.datasec:not(.sec--dark) .bars{background:var(--bg)}
.datasec:not(.sec--dark) .chain__ic{color:var(--accent-hover);border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* ==========================================================
   09 Solutions rail
   ========================================================== */
.solhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;--edge:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));margin-inline:calc(var(--edge) * -1);padding:4px var(--edge) 8px;scroll-padding-inline:var(--edge)}
.rail::-webkit-scrollbar{display:none}
.sol{flex:0 0 clamp(250px,23vw,292px);scroll-snap-align:start;background:var(--navy);color:#fff;border-radius:16px;overflow:hidden;border:1px solid transparent;transition:border-color .2s,transform .2s var(--ease)}
.sol:hover{border-color:var(--blue-2)}
.sol__b{padding:18px 18px 22px;display:grid;gap:8px}
.sol h3{font:700 1.05rem/1.2 var(--f-display);font-stretch:106%}
.sol p{font-size:.88rem;color:var(--inv-2);line-height:1.5}
/* on a dark band the cards step up one shade and get an edge */
.sec--dark .sol{background:var(--dark-2);border-color:var(--line-inv)}
.sec--dark .sol:hover{border-color:var(--blue-2)}
/* wide screens: all four cards fit in one row (no scrolling); narrower screens swipe */
@media (min-width:1101px){
  .rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-inline:0;padding:4px 0 8px}
}

/* ==========================================================
   10 RTU
   ========================================================== */
.rtu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:clamp(32px,5vw,56px)}
.rtu__img{aspect-ratio:1/.9;position:relative}
.rtu__img::after{content:"";position:absolute;left:8%;right:8%;bottom:6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--dark) 20%,transparent),transparent);z-index:-1}
.rtu__img .ph{height:100%;aspect-ratio:auto}
.feat{display:grid;gap:0}
.feat li{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-weight:500}
.feat li:first-child{border-top:1px solid var(--line)}
.feat .chip{width:34px;height:34px;font-size:17px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--blue)}
.rtu__h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* dark band version (#rtu is light in the current sequence) */
.sec--dark .feat li{border-color:var(--line-inv)}
.sec--dark .feat .chip{background:color-mix(in srgb,var(--accent-on-dark) 14%,transparent);color:var(--blue-2)}
.sec--dark .btn--line{border-color:rgba(255,255,255,.5);color:#fff}
.sec--dark .btn--line:hover{background:#fff;color:var(--navy)}
.sec--dark .rtu__img{border-color:var(--line-inv);box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}

/* ==========================================================
   13 Final CTA — light band; the hard edge against the dark
   footer comes from the tone change plus a top rule against
   the (also light) #impact band above it.
   ========================================================== */
.final{overflow:hidden;border-top:1px solid var(--line)}
.final__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.final__tag{text-align:right;font:800 clamp(1.4rem,2.8vw,2.3rem)/1.12 var(--f-display);font-stretch:104%;text-transform:uppercase;color:var(--txt)}
.final__tag span{display:block}
.final__tag span:last-child{color:var(--accent-hover)}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:1100px){
  .split{grid-template-columns:1fr}
  .cards4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow,.evo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .flow>.link,.evo>.link{display:none}
  .datagrid{grid-template-columns:1fr}
  .chain{flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:18px}
  .chain .link{display:none}
  .rtu{grid-template-columns:1fr 1fr}
  .rtu__img{grid-column:1/-1;order:-1;max-width:560px;margin-inline:auto;width:100%}
  .final__grid{grid-template-columns:1fr}
  .final__tag{text-align:left}
}
@media (max-width:640px){
  .cards4{grid-template-columns:1fr}
  .land-intro{display:block}
  .land-tag{margin-top:16px}
  .land-scene{height:175px}
  .stats{grid-template-columns:1fr}
  .flow,.evo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rtu{grid-template-columns:1fr}
  .solhead{flex-direction:column;align-items:flex-start}
  .dash__row{grid-template-columns:1fr;justify-items:center}
  .kpis{width:100%}
  .hero__body{padding-top:calc(var(--hdr) + 40px)}
  .steps .link{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .bar{opacity:1;transform:none}
  .js .gauge__val{stroke-dashoffset:32.7}
}

/* ==========================================================
   One section per window (desktop / tall-enough windows only).
   Below 901px wide or 620px tall, sections keep natural height.
   ========================================================== */
@media (min-width:901px) and (min-height:620px){
  :root{
    --pad-top:calc(var(--hdr) + clamp(12px,2.5vh,28px));
    --pad-bot:clamp(16px,3vh,36px);
    --gap-v:clamp(16px,3vh,40px);
    --img-max:clamp(90px,17vh,170px);
  }
  html{scroll-padding-top:0;scroll-snap-type:y proximity}

  main>section{box-sizing:border-box;min-height:100svh;scroll-snap-align:start}
  .sec{padding-top:var(--pad-top);padding-bottom:var(--pad-bot)}
  .sec:not(.scale-section){display:flex;flex-direction:column;justify-content:center}
  /* in a flex column, auto side margins would shrink .wrap to its content width */
  .sec>.wrap{width:100%}
  .hero{min-height:100svh}
  .turning{min-height:100svh}

  /* vertical gaps */
  .flow,.steps,.evo,.rtu{margin-top:var(--gap-v)}
  .callout{margin-top:var(--gap-v)}
  .solhead{margin-bottom:var(--gap-v)}
  .cta-row{margin-top:clamp(16px,2.6vh,32px)}

  /* 4:3 / 16:10 card images: capped height, full width, cropped to fill.
     (Scoped to the card rows: the RTU product image must never be cropped.) */
  .cards4 .ph,.flow .ph,.sol .ph,.evo__i .ph{width:100%;max-height:var(--img-max)}
  .cards4 .ph .photo,.flow .ph .photo,.sol .ph .photo,.evo__i .ph .photo{object-fit:cover}
  /* #landscape scenes: 160px (reference) on tall windows, less on short ones */
  #landscape .land-scene{height:clamp(110px,18vh,160px)}

  /* ---------- #rtu: the whole product image, in a white box ---------- */
  .rtu{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) minmax(0,1fr)}
  .rtu__img{
    aspect-ratio:auto;box-sizing:border-box;width:100%;
    height:clamp(260px,calc(100svh - var(--pad-top) - var(--pad-bot) - 190px - var(--gap-v)),640px);
    padding:clamp(12px,2vh,24px);background:#fff;border-radius:16px;
    border:1px solid var(--line);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--text) 30%,transparent);
  }
  .rtu__img .ph{width:100%;height:100%}
  .rtu__img .ph .photo{object-fit:contain}
}

/* Wide desktop (1101px+, tall enough): layouts that the shared heading size still needs */
@media (min-width:1101px) and (min-height:620px){
  /* #response, #data: in their narrow first column the title wrapped to 6-8 lines,
     so the eyebrow and title span the full row; lede/content keep their columns */
  #response .split,#data .datagrid{row-gap:0;align-items:start}
  #response .split>div:first-child,#data .datagrid>div:first-child{display:contents}
  #response .split>div:first-child>.eyebrow,#response .split>div:first-child>.display,#data .datagrid>div:first-child>.display{grid-column:1/-1}
  #response .split>div:first-child>:not(.eyebrow):not(.display){grid-column:1}
  #response .split>div:first-child>.display{margin-bottom:clamp(14px,2.4vh,28px)}
  #response .split>div:first-child>.lede{margin-top:0}
  #response .split>:last-child{grid-column:2;grid-row:3/span 3}

  /* #data: breathing room and balanced columns */
  #data .datagrid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.8fr);column-gap:clamp(28px,3.4vw,56px);align-items:center}
  #data .datagrid>div:first-child>.display{margin-bottom:clamp(16px,2.5vh,28px)}
  #data .metrics{grid-column:1;margin-top:0}
  #data .metrics li{padding:clamp(10px,1.4vh,14px) 6px}
  #data .dash{padding:clamp(18px,2.4vh,26px);gap:clamp(12px,1.8vh,18px)}
  #data .chain{align-self:center;justify-self:center;row-gap:4px}

  /* #ecosystem: text left, hub right, both centred vertically.
     The title needs a ~752px column at 1366 and ~793px at 1440 for 3 lines
     ("Beyond automation. A / connected manufacturing / ecosystem."), so up to
     ~1500px the side padding and the gap close in to 16px and the hub gives
     up width first (580px down to 540px), sized from the container (cqw) so a
     scrollbar can't push it over. */
  #ecosystem{container-type:inline-size}
  #ecosystem .wrap{--eco-pad:clamp(16px,calc((100cqw - 1440px) / 2),48px);max-width:calc(var(--maxw) + 320px);padding-inline:var(--eco-pad)}
  #ecosystem .split--eco{
    --hub:min(clamp(540px,calc(100cqw - 2 * var(--eco-pad) - 786px),580px),calc(100svh - var(--pad-top) - var(--pad-bot)));
    grid-template-columns:minmax(0,1fr) var(--hub);align-items:center;
    column-gap:clamp(16px,calc((100cqw - 1500px) / 2),32px)}
  #ecosystem .hub{width:100%}
  #ecosystem .display{text-wrap:balance}
}


/* Stacked layouts (1100px and below): the single column may never grow wider
   than the screen. Must come after the 1100px rule above that sets 1fr. */
@media (max-width:1100px){ .split,.datagrid{grid-template-columns:minmax(0,1fr)} }

/* ==========================================================
   Hover grow — every card / box on the home page
   One shared rule. It uses the CSS "scale" property, never
   transform: scale(), so it composes with transforms the
   boxes already have (#impact scroll reveal, #ecosystem node
   positioning) instead of replacing them. Layout never moves.
   Pointer devices only (no stuck hover on touch), and off
   under prefers-reduced-motion. The #impact card's transition
   list (which also carries its reveal) is in bottom-sections.css.
   ========================================================== */
:root{
  --hover-grow:1.04;
  --hover-dur:.22s;
  --hover-shadow:0 18px 38px -18px color-mix(in srgb,var(--text) 34%,transparent);
}
.sec--dark{--hover-shadow:0 18px 40px -16px rgba(0,0,0,.65)}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(.card,.node,.stat,.evo__i,.step,.dash,.chain__i,.sol,.rtu__img,.impact-card){position:relative;
    transition:scale var(--hover-dur) cubic-bezier(.2,.7,.2,1),box-shadow var(--hover-dur) ease,border-color .2s var(--ease)}
  :is(.card,.node,.stat,.evo__i,.step,.dash,.chain__i,.sol,.rtu__img,.impact-card):is(:hover,:focus-within){scale:var(--hover-grow);z-index:2}

  /* stronger shadow on boxes that have a surface. The transparent wrappers
     (.step, .chain__i, .evo__i) would cast a bare rectangle, so .evo__i
     puts it on its image and the round icons keep their own look. */
  :is(.card,.node,.stat,.sol,.rtu__img):is(:hover,:focus-within){box-shadow:var(--hover-shadow)}
  .evo__i .ph{transition:box-shadow var(--hover-dur) ease}
  .evo__i:is(:hover,:focus-within) .ph{box-shadow:var(--hover-shadow)}
  .datasec:not(.sec--dark) .dash:is(:hover,:focus-within){box-shadow:0 28px 56px -26px color-mix(in srgb,var(--text) 44%,transparent)}
  .sec--dark .dash:is(:hover,:focus-within){box-shadow:0 0 72px color-mix(in srgb,var(--accent) 26%,transparent)}

  /* #ecosystem: the nodes are placed with transform (rotate / translate), so the
     circle inside grows; the node is lifted above its neighbours */
  .hub__n i{transition:scale var(--hover-dur) cubic-bezier(.2,.7,.2,1),box-shadow var(--hover-dur) ease}
  .hub__n:is(:hover,:focus-within){z-index:2}
  .hub__n:is(:hover,:focus-within) i{scale:var(--hover-grow);box-shadow:var(--hover-shadow)}
}
/* #solutions scrolls sideways at 1100px and below, which clips vertically too:
   more room above/below the cards, cancelled by negative margins (no layout change) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (max-width:1100px){
  .rail{padding-top:14px;padding-bottom:18px;margin-top:-10px;margin-bottom:-10px}
}