/* ==========================================================================
   RASAD — landing page.

   Loads on top of public.css and owns only what the front page draws: the
   altitude rail, the nav, the hero, and the bands below it.

   The page is a descent. It opens in orbit — an instrument face laid over
   the Earth — and the height axis beside the hero becomes the rail that
   runs down the whole document, ending at the surface: the footer.
   ========================================================================== */

.eyebrow{
  font-family:var(--disp);font-stretch:70%;font-weight:600;
  font-size:clamp(.74rem,1.1vw,.86rem);letter-spacing:.30em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan-lo);flex:none}

/* ── altitude rail ───────────────────────────────────────────────────────── */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(3,16,21,.6),rgba(3,16,21,0) 18%);
  pointer-events:none;
}
.rail-cap{
  position:absolute;top:16px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--fg-3);text-transform:uppercase;
}
.rail-axis{position:absolute;top:74px;bottom:52px;left:0;right:0}
.tick{position:absolute;right:0;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:7px}
.tick i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--fg-3);letter-spacing:.04em}
.tick::after{content:"";width:9px;height:1px;background:var(--line-2)}
.tick.major::after{width:15px;background:rgba(124,198,203,.4)}
.tick.major i{color:var(--fg-3)}
.layer{
  position:absolute;left:9px;writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--disp);font-stretch:66%;font-weight:600;font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(104,135,140,.78);white-space:nowrap;
}
.beam{position:absolute;left:0;right:0;height:0;transition:top .12s linear}
.beam::before{
  content:"";position:absolute;right:0;top:-1px;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan));
  box-shadow:0 0 12px rgba(45,209,207,.7);
}
.beam b{
  position:absolute;right:5px;top:5px;font:500 .62rem/1 var(--mono);
  color:var(--cyan-hi);letter-spacing:.04em;
  background:var(--void);padding:3px 4px;border-radius:2px;
}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:var(--rail);right:0;z-index:60;height:64px;
  display:flex;align-items:center;gap:26px;padding:0 30px;
  border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.stuck{background:rgba(4,18,24,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* the identity block: brand, then the partner marks it is flown with. The
   strip renders only once there are marks to show, so no empty rule appears. */
.nav-id{display:flex;align-items:center;gap:clamp(14px,2vw,26px);min-width:0}
.partners{display:flex;align-items:center;gap:18px;padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.partner{display:flex;opacity:.6;transition:opacity .2s}
.partner:hover{opacity:1}
.partner img{display:block;height:22px;width:auto}
.nav nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav nav a{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;color:var(--fg-3);
  padding:8px 13px;border-radius:6px;transition:color .2s,background .2s;
}
.nav nav a:hover{color:var(--fg);background:rgba(124,198,203,.07)}
.nav nav a.btn-go{color:#032023;padding:11px 17px;border-radius:3px}
.nav-cta{margin-left:10px}
/* the phone menu: three rules that become a cross, and the links drop into a
   sheet under the bar rather than trying to fit beside the brand */
.nav-burger{
  display:none;margin-left:auto;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;border:1px solid var(--line-2);
  border-radius:4px;background:rgba(6,29,37,.6);cursor:pointer;
}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  display:block;width:17px;height:1.5px;background:var(--fg);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s;
}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute}
.nav-burger span{position:relative}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav.open .nav-burger span{background:transparent}
.nav.open .nav-burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nav-burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;isolation:isolate;padding:104px 0 56px;
}
.hero-top{position:relative;z-index:3;width:100%}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,clamp(20rem,38vw,28.5rem)) minmax(0,1fr);
  gap:clamp(20px,2.4vw,38px);align-items:center;
}
.hero h1{font-size:clamp(2.15rem,3.35vw,3.25rem)}
.hero .eyebrow{font-size:clamp(.68rem,.92vw,.76rem);letter-spacing:.26em;margin-bottom:20px}
h1 em{font-style:normal;color:var(--cyan)}
.hero p.lede{margin-top:24px;max-width:36ch;color:var(--fg)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* the plates the hero stands on: the Earth from low orbit, cross-fading behind
   a hard scrim so the instrument laid over them stays readable on every one */
.plate{position:absolute;inset:0;z-index:1;background:#02090d}
.plate-frame{position:absolute;inset:0;opacity:0;transition:opacity 2.4s var(--ease)}
.plate-frame.on{opacity:1}
.plate img{
  width:100%;height:100%;object-fit:cover;object-position:56% 34%;
  /* the plates were shot for their own sake, not as a ground for an
     instrument — pull them back until the readout wins */
  filter:saturate(.8) brightness(.84) contrast(1.04);
}
.plate-frame.on img{animation:plate-drift 16s var(--ease) forwards}
@keyframes plate-drift{from{transform:scale(1.015)}to{transform:scale(1.075)}}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(3,16,21,.97) 0%,rgba(3,16,21,.94) 28%,rgba(3,16,21,.8) 48%,rgba(3,16,21,.66) 68%,rgba(3,16,21,.78) 100%),
    linear-gradient(180deg,rgba(3,16,21,.88) 0%,rgba(3,16,21,.3) 18%,rgba(3,16,21,0) 44%,rgba(3,16,21,.14) 68%,var(--void) 100%);
}
.plate-credit{
  position:absolute;right:18px;bottom:14px;z-index:2;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:rgba(226,244,244,.68);
  background:rgba(3,16,21,.55);padding:4px 8px;border-radius:2px;
}
/* ── the hero globe ──────────────────────────────────────────────────────────
   One Earth, given the whole stage. The supplied still drops straight in where
   the drawn globe stands today, with no change to the markup. */
.plate-film{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 34%;
  filter:saturate(.8) brightness(.8) contrast(1.04);
}
.sphere{position:relative;margin:0;width:100%;aspect-ratio:1;display:grid;place-items:center}
.sphere-art,.sphere-draw{display:block;height:auto;aspect-ratio:1;object-fit:contain}
/* the globe is held off the edge of its stage so the overlay has margin to
   annotate into; the drawn stand-in carries its own margin already */
.sphere-art{width:84%;filter:drop-shadow(0 30px 62px rgba(0,0,0,.62))}
.sphere-draw{width:100%}

/* the instrument reading off the globe: a viewfinder frame, the strip the
   platform has just measured, and the platform itself at the head of it */
.scan{position:absolute;inset:0;width:100%;height:100%}
.scan-frame{stroke:var(--line-2);stroke-width:1.2}
.scan-swath{stroke:var(--cyan);stroke-width:14;stroke-opacity:.2}
.scan-edge{stroke:var(--void);stroke-width:3.4;stroke-opacity:.5}
.scan-line{stroke:var(--cyan-hi);stroke-width:1.2;stroke-opacity:.85;stroke-dasharray:5 6}
/* the pulse runs the track in per-mille units, so the dash pattern holds
   whatever the path is redrawn as */
.scan-pulse{
  stroke:var(--cyan-hi);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:56 944;
  filter:drop-shadow(0 0 5px rgba(126,242,234,.75));
  animation:scan-run 5.4s linear infinite;
}
@keyframes scan-run{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.scan-beam{fill:var(--cyan-hi);fill-opacity:.3}
.scan-beam-edge{stroke:var(--cyan-hi);stroke-width:1;stroke-opacity:.75}
.scan-eye{fill:var(--cyan-hi)}
.scan-ping{
  stroke:var(--cyan-hi);stroke-width:1;transform-box:fill-box;transform-origin:center;
  animation:scan-ping 3.2s var(--ease) infinite;
}
@keyframes scan-ping{from{transform:scale(.45);opacity:.9}70%,to{transform:scale(2.5);opacity:0}}
.scan-craft{filter:drop-shadow(0 0 6px rgba(103,232,226,.8))}
.scan-hull{fill:var(--fg)}
.scan-wing{stroke:var(--cyan-hi);stroke-width:1;fill:rgba(45,209,207,.2)}

/* one domain annotation at a time, lit by the axis under the hero */
.scan-layer{opacity:0;transition:opacity .55s var(--ease)}
.scan-layer.on{opacity:1}
.scan-hair{stroke:var(--cyan-hi);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.scan-dim{stroke-opacity:.45;stroke-dasharray:3 4}
.scan-dot{fill:var(--cyan-hi)}
.scan-lead{stroke:var(--cyan);stroke-width:.9;stroke-opacity:.6}

/* what the globe is currently showing, in one fixed place under it: no label
   can then land on the disc, and the type stays page type rather than drawing */
.stage-read{
  position:relative;display:grid;place-items:center;height:1.6em;margin:-3% 0 0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
}
.stage-read span{
  position:absolute;padding-left:22px;color:var(--cyan-hi);opacity:0;
  transition:opacity .45s var(--ease);
}
.stage-read span.on{opacity:1}
.stage-read span::before{content:"";position:absolute;left:0;top:50%;width:13px;height:1px;background:var(--cyan)}
/* the drawn stand-in, coloured from the stylesheet so it answers the theme */
.sph-grid{stroke-width:.85;stroke-opacity:.3}
.sph-eq{stroke-width:1.1;stroke-opacity:.48}
.sph-track{stroke-width:1.6;stroke-opacity:.8;stroke-dasharray:9 7}
.sph-orbit{transform-origin:200px 200px;animation:sph-turn 46s linear infinite}
.sph-craft{filter:drop-shadow(0 0 7px rgba(103,232,226,.9))}
@keyframes sph-turn{to{transform:rotate(338deg)}}

/* ── the four domains ────────────────────────────────────────────────────────
   An axis, not a badge rack: one division per domain, and the division it owns
   lights up while that domain is annotated on the globe above it. The marks are
   supplied artwork when it has been delivered and drawn glyphs until then, and
   both take their colour from here. */
.domains{
  --cell-pad:clamp(14px,1.8vw,26px);
  position:relative;list-style:none;margin:clamp(26px,4vh,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-2);
}
/* the axis is closed at its far end, the way a plotted one is */
.domains::after{content:"";position:absolute;right:0;top:0;width:1px;height:9px;background:var(--line-2)}
.domain{position:relative;padding:20px var(--cell-pad) 0 0}
.domain + .domain{padding-left:var(--cell-pad)}
.domain::before{content:"";position:absolute;left:0;top:0;width:1px;height:9px;background:var(--cyan-lo)}
.domain::after{
  content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--cyan);
  box-shadow:0 0 10px rgba(45,209,207,.55);transition:width .55s var(--ease);
}
.domain.on::after{width:100%}
.domain-no{
  position:absolute;top:2px;left:9px;font-style:normal;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--fg-4);
  transition:color .3s var(--ease);
}
.domain.on .domain-no{color:var(--cyan)}
/* the supplied mark is worn as a mask, so it answers the palette the way the
   drawn glyph beside it does */
.domain-mark{
  display:block;width:clamp(34px,2.9vw,42px);aspect-ratio:1;background:var(--cyan);color:var(--cyan);
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;
  transition:background .3s var(--ease),color .3s var(--ease),filter .3s var(--ease);
}
.domain-mark.is-drawn{background:none;-webkit-mask:none;mask:none}
.domain-mark.is-drawn svg{width:100%;height:100%}
.domain.on .domain-mark{
  background:var(--cyan-hi);color:var(--cyan-hi);
  filter:drop-shadow(0 0 9px rgba(45,209,207,.5));
}
.domain b{
  display:block;margin-top:16px;font-family:var(--disp);font-stretch:78%;font-weight:700;
  font-size:clamp(.66rem,.86vw,.76rem);letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-2);transition:color .3s var(--ease);
}
.domain.on b{color:var(--fg)}
.domain em{
  display:block;margin-top:9px;font-style:normal;
  font-size:clamp(.72rem,.92vw,.8rem);line-height:1.5;color:var(--fg-3);
  transition:color .3s var(--ease);
}
.domain.on em{color:var(--fg-2)}

/* ── the hero stage ─────────────────────────────────────────────────────── */
/* held to the viewport's height as well as its width: a short screen must not
   push the axis under the fold */
.hero-stage{justify-self:end;width:100%;max-width:min(clamp(280px,42vw,520px),58vh)}

/* ── back to the top ─────────────────────────────────────────────────────────
   The platform itself, parked at the bottom of the descent. Clicking it flies
   it off the top of the screen while the page climbs back to the hero. */
.to-orbit{
  position:fixed;right:26px;bottom:26px;z-index:70;
  width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(6,29,37,.82);backdrop-filter:blur(10px);color:var(--fg-2);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,color .25s;
}
.to-orbit.show{opacity:1;visibility:visible;transform:none}
.to-orbit:hover{color:var(--cyan-hi)}
.to-orbit .sat{width:30px;height:30px;position:relative;z-index:2;transition:transform .3s var(--ease)}
.to-orbit:hover .sat{transform:translateY(-3px)}
.sat-dish,.sat-hull{fill:currentColor}
.sat-wing{fill:currentColor;opacity:.5}
.sat-mast,.sat-beam{stroke:currentColor}
.sat-cell{stroke:var(--void)}
.sat-beam{opacity:.55}
.to-orbit-arc{
  position:absolute;inset:-1px;border-radius:50%;
  border:1px dashed var(--line-2);border-top-color:var(--cyan-lo);
  transition:border-color .3s,transform .6s var(--ease);
}
.to-orbit:hover .to-orbit-arc{border-top-color:var(--cyan);transform:rotate(120deg)}
.to-orbit-trail{
  position:absolute;left:50%;bottom:50%;width:1px;height:0;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(45,209,207,0),var(--cyan));opacity:0;
}
.to-orbit-lab{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap;padding:6px 10px;border-radius:3px;
  background:rgba(6,29,37,.9);border:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.to-orbit:hover .to-orbit-lab,.to-orbit:focus-visible .to-orbit-lab{opacity:1}
.to-orbit.go{pointer-events:none}
.to-orbit.go .sat{animation:to-orbit-fly 1s cubic-bezier(.55,0,.75,.1) forwards}
.to-orbit.go .to-orbit-trail{animation:to-orbit-trail 1s cubic-bezier(.55,0,.75,.1) forwards}
@keyframes to-orbit-fly{
  0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}
  16%{transform:translateY(7px) rotate(-3deg) scale(.92);opacity:1}
  100%{transform:translateY(-88vh) rotate(-16deg) scale(.6);opacity:0}
}
@keyframes to-orbit-trail{
  0%{height:0;opacity:0}
  20%{height:26px;opacity:.9}
  100%{height:56vh;opacity:0}
}

/* ── section head ────────────────────────────────────────────────────────── */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:20px 56px;align-items:end;margin-bottom:52px}
.head p{color:var(--fg-2)}

/* ── proof figure ────────────────────────────────────────────────────────── */
.result{border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:#0a2029;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.result-bar{
  display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);
  background:rgba(3,16,21,.7);font-family:var(--mono);font-size:.72rem;color:var(--fg-2);letter-spacing:.03em;
}
.result-dot{color:var(--cyan)}
.result-bar .f{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-bar .t{margin-left:auto;color:var(--fg-4);white-space:nowrap}
.result-img{background:#fff}
.result-img img{width:100%;height:auto}
.result-cap{font-size:.84rem;color:var(--fg-2);margin-top:15px;line-height:1.6;max-width:76ch}

/* ── capability cards ────────────────────────────────────────────────────── */
/* auto-fit rather than a fixed four: eight cards with a plate each must keep a
   card-sized column at every width, not stretch to half a tablet. */
.feats{
  display:grid;gap:20px;margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
.feat{
  display:flex;flex-direction:column;margin:0;background:#081e27;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.feat:hover{
  border-color:var(--line-2);transform:translateY(-4px);
  box-shadow:0 30px 64px -40px rgba(0,0,0,.95);
}
.feat-plate{display:block;border-bottom:1px solid var(--line)}
/* The plates carry their own axes and labels, so they are cropped, never
   scrimmed — a gradient would eat the very numbers they are there to show. */
.feat-plate img{
  display:block;width:100%;aspect-ratio:327/370;object-fit:cover;
  filter:saturate(1.04);transition:filter .3s;
}
.feat:hover .feat-plate img{filter:saturate(1.12)}
.feat-say{flex:1;padding:22px 22px 26px}
.feat b{display:block;font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.feat b::after{content:"";display:block;width:26px;height:2px;margin-top:13px;background:var(--cyan)}
.feat p{font-size:.84rem;color:var(--fg-3);line-height:1.55;margin-top:12px;max-width:none}

/* ── scenes ──────────────────────────────────────────────────────────────── */
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.scene{transition:transform .3s var(--ease)}
.scene:hover{transform:translateY(-4px)}
.scene img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);filter:saturate(1.04);transition:filter .3s;
}
.scene:hover img{filter:saturate(1.04) brightness(1.1)}
.scene figcaption{margin-top:12px}
.scene b{display:block;font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--fg);line-height:1.35;letter-spacing:-.01em}
.scene span{display:block;margin-top:7px;font-size:.84rem;line-height:1.5;color:var(--fg-3)}
.scene span em{font-style:normal;color:var(--fg-4);white-space:nowrap}

/* ── the run: three steps ────────────────────────────────────────────────── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps li{border:1px solid var(--line);border-radius:4px;background:rgba(6,29,37,.5);padding:24px 26px 27px}
.step-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--cyan);display:flex;align-items:center;gap:12px}
.step-n::after{content:"";flex:1;height:1px;background:var(--line)}
.steps b{display:block;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--fg);margin-top:14px}
.steps p{font-size:.86rem;color:var(--fg-3);line-height:1.55;margin-top:6px}
.steps-note{
  margin-top:26px;font-size:.86rem;line-height:1.6;
  color:var(--fg-3);max-width:none;
}

/* ── launch ──────────────────────────────────────────────────────────────── */
.launch{text-align:center;padding:clamp(96px,13vw,168px) 0 clamp(120px,15vw,190px);position:relative;overflow:hidden}
.launch::before{
  content:"";position:absolute;left:50%;bottom:-30%;transform:translateX(-50%);
  width:min(1200px,140%);height:120%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(240,169,63,.20),rgba(240,169,63,.06) 42%,transparent 70%);
}
.launch > *{position:relative;z-index:1}
.launch h2{font-size:clamp(2.1rem,5vw,3.6rem);max-width:17ch;margin:0 auto}
.launch p{margin:24px auto 0;max-width:52ch;color:var(--fg-2)}
.launch .btn{margin-top:38px;padding:18px 34px;font-size:.88rem}
.launch small{display:block;margin-top:22px;font-size:.86rem;color:rgba(226,244,244,.72)}
.launch small a{color:var(--cyan);border-bottom:1px solid rgba(45,209,207,.4)}
.launch small a:hover{color:var(--cyan-hi);border-bottom-color:var(--cyan-hi)}

/* ── height 2: vision, mission, approach ─────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{
  position:relative;margin:0;border:1px solid var(--line);border-radius:5px;
  background:rgba(6,29,37,.5);padding:26px 26px 30px;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.pillar:hover{border-color:var(--line-2);transform:translateY(-3px)}
.pillar-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--cyan)}
.pillar h3{margin-top:15px;font-size:clamp(1.05rem,1.6vw,1.25rem)}
.pillar h3::after{content:"";display:block;width:26px;height:2px;margin-top:14px;background:var(--cyan)}
.pillar p{margin-top:14px;font-size:.9rem;line-height:1.64;color:var(--fg-2)}
.pillar-more{
  display:inline-block;margin-top:18px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--cyan);border-bottom:1px solid rgba(45,209,207,.4);
}
.pillar-more:hover{color:var(--cyan-hi);border-bottom-color:var(--cyan-hi)}

/* the approach read as a figure: the stack on one side, what each tier is on
   the other, printed from the apex down the way the figure is read */
.approach{
  margin:clamp(46px,6vw,74px) 0 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,54px);
  align-items:center;border:1px solid var(--line);border-radius:5px;
  background:rgba(6,29,37,.45);padding:clamp(22px,3vw,38px);
}
.approach-art{display:grid;place-items:center}
.approach-art img,.approach-draw{display:block;width:100%;max-width:520px;height:auto}
.ap-node{fill:#031015;stroke:rgba(234,255,253,.85);stroke-width:2}
.ap-tier{transition:opacity .3s var(--ease)}
.approach-tiers{display:grid;gap:20px}
.tier{display:grid;gap:7px}
.tier-rule{display:block;width:32px;height:3px;border-radius:2px}
.tier-4 .tier-rule{background:#a0f4ee}
.tier-3 .tier-rule{background:#37cfcd}
.tier-2 .tier-rule{background:#15797f}
.tier-1 .tier-rule{background:#2a4d80}
.tier b{font-family:var(--sans);font-size:.98rem;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.tier p{font-size:.86rem;line-height:1.58;color:var(--fg-3)}
.approach-cycle{
  display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;line-height:1.5;color:var(--cyan);
}

/* ── height 3: the agencies and the fleet ────────────────────────────────── */
.agencies{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.agency{
  display:flex;flex-direction:column;margin:0;background:#081e27;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.agency:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 30px 64px -40px rgba(0,0,0,.95)}
.agency-art{border-bottom:1px solid var(--line);background:#061d25}
/* how a still is framed. A photograph fills its tile; a diagram exists for its
   labels, so it is shown whole, and one printed on a light ground is given one
   to sit on rather than reading as a hole in the card. */
.agency-art.is-whole img{object-fit:contain}
.agency-art.is-diagram img,.approach-art.is-diagram img{
  background:#f1f5f5;border-radius:3px;
}
.agency-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.96) brightness(.92)}
/* until the family portrait arrives the card still has to read as a card: the
   agency's name set as a watermark keeps the block from looking broken */
.agency-art-wait{
  display:grid;place-items:center;aspect-ratio:16/9;
  background:radial-gradient(ellipse at 50% 120%,rgba(45,209,207,.14),transparent 62%),#061d25;
}
.agency-art-mark{
  font-family:var(--disp);font-stretch:70%;font-weight:700;
  font-size:clamp(1.5rem,5vw,2.6rem);letter-spacing:.26em;text-transform:uppercase;
  color:rgba(226,244,244,.13);
}
.agency-say{flex:1;display:flex;flex-direction:column;padding:24px 26px 26px}
.agency-say h3{font-size:clamp(1.05rem,1.7vw,1.3rem)}
.agency-say p{margin-top:13px;font-size:.9rem;line-height:1.62;color:var(--fg-2)}
.agency-counts{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.agency-counts dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4)}
.agency-counts dd{margin-top:6px;font-family:var(--disp);font-size:1.02rem;font-weight:700;color:var(--fg)}
.agency-more{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:22px;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.06em;color:var(--cyan);
}
.agency-more svg{width:14px;height:14px;transition:transform .22s var(--ease)}
.agency-more:hover{color:var(--cyan-hi)}
.agency-more:hover svg{transform:translate(2px,-2px)}

/* the fleet board: one slip per spacecraft, laid out as a plain grid so the
   roster stays legible at every width and nothing can land on anything else */
.fleet{margin-top:clamp(42px,6vw,70px);padding-top:clamp(36px,5vw,58px);border-top:1px solid var(--line)}
.fleet-head{margin-bottom:clamp(26px,3.4vw,40px)}
.fleet-head h3{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.fleet-head p{font-size:.92rem;line-height:1.65;color:var(--fg-2)}
.fleet-board{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:auto 1fr auto auto;gap:clamp(12px,1.4vw,20px);
}
/* every slip hands its four bands to the board, so the specification lines up
   across the whole roster however long a summary runs */
.craft{
  display:grid;grid-row:span 4;grid-template-rows:auto 1fr auto auto;
  min-width:0;margin:0;background:#081e27;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* the spacecraft cut-outs are large squares: without this their intrinsic
   width becomes the slip's minimum and the plate pushes out of the card */
.craft > *{min-width:0}
@supports (grid-template-rows:subgrid){
  .craft{grid-template-rows:subgrid}
}
.craft:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 30px 64px -40px rgba(0,0,0,.95)}
.craft.is-live{border-color:rgba(45,209,207,.34);background:#08222b;box-shadow:0 0 0 1px rgba(45,209,207,.08)}
.craft.is-live:hover{border-color:var(--cyan-lo);box-shadow:0 30px 64px -40px rgba(0,0,0,.95),0 0 34px -18px rgba(45,209,207,.7)}

/* the plate reads as a detector frame: the spacecraft centred in it, two
   corner brackets, and the status lamp in the corner that is left */
.craft-plate{
  position:relative;display:grid;place-items:center;aspect-ratio:5/4;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 120%,rgba(45,209,207,.10),transparent 64%),#061d25;
}
.craft-plate::before,.craft-plate::after{
  content:"";position:absolute;width:13px;height:13px;border:1px solid var(--line-2);pointer-events:none;
}
.craft-plate::before{top:9px;left:9px;border-right:0;border-bottom:0}
.craft-plate::after{bottom:9px;right:9px;border-left:0;border-top:0}
/* lifted out of the flow so the cut-out's own size cannot set the plate's */
.craft-plate img{position:absolute;inset:15px;width:calc(100% - 30px);height:calc(100% - 30px);object-fit:contain;opacity:.94}
.craft-plate-none{display:grid;place-items:center;width:100%;height:100%;color:var(--fg-4)}
.craft-plate-none .sat{width:52%;height:52%}
.craft-led{
  position:absolute;top:11px;right:11px;width:7px;height:7px;border-radius:50%;
  background:rgba(3,16,21,.85);box-shadow:inset 0 0 0 1.4px var(--fg-4);
}
.craft.is-soon .craft-led{box-shadow:inset 0 0 0 1.4px var(--fg-3)}
.craft.is-live .craft-led{background:var(--cyan);box-shadow:0 0 10px rgba(45,209,207,.9),0 0 0 4px rgba(45,209,207,.13)}

.craft-say{padding:17px 17px 0}
.craft-agency{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-4);
}
.craft.is-live .craft-agency{color:var(--cyan-lo)}
.craft-name{margin-top:7px;font-size:clamp(1rem,1.35vw,1.14rem);letter-spacing:-.02em}
.craft-sum{margin-top:9px;font-size:.8rem;line-height:1.55;color:var(--fg-2)}

.craft-spec{margin:16px 17px 0;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:9px}
.craft-spec dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4)}
.craft-spec dd{margin-top:3px;font-size:.76rem;line-height:1.4;color:var(--fg)}

.craft-foot{align-self:end;padding:18px 17px 17px}
.craft-status{
  display:inline-block;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);padding:6px 11px;border:1px solid var(--line);border-radius:999px;
}
.craft.is-plan .craft-status{color:var(--fg-4)}
.craft-go{
  display:inline-flex;align-items:center;gap:9px;padding:.72em 1.1em;border-radius:3px;
  background:var(--cyan);color:#032023;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.06em;font-weight:600;transition:background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.craft-go svg{width:1.15em;height:1.15em;transition:transform .22s var(--ease)}
.craft-go:hover{background:var(--cyan-hi);box-shadow:0 10px 30px -12px rgba(45,209,207,.8);transform:translateY(-1px)}
.craft-go:hover svg{transform:translateX(3px)}

/* ── height 4a: the live window ──────────────────────────────────────────── */
/* the third-party application is heavy, so the frame mounts itself as the band
   comes into reach: nothing off-site loads in front of the first paint, and
   nothing is asked of the reader either */
.live{
  margin:0;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;
  background:#0a2029;box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.live-frame{position:relative;aspect-ratio:16/9;background:#02090d}
.live-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity .6s var(--ease);
}
.live-frame.on iframe{opacity:1}
.live-wait{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  display:grid;justify-items:center;gap:13px;text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
  transition:opacity .4s var(--ease);
}
.live-frame.on .live-wait,.live-frame.stalled .live-wait{opacity:0}
.live-stalled{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  max-width:34ch;text-align:center;opacity:0;transition:opacity .4s var(--ease);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:1.6;color:var(--fg-3);
}
.live-frame.stalled .live-stalled{opacity:1}
/* an indeterminate reading, not a progress bar: there is no percentage to give */
.live-scan{position:relative;display:block;width:128px;height:1px;background:var(--line-2);overflow:hidden}
.live-scan::after{
  content:"";position:absolute;inset:0 auto 0 0;width:38%;background:var(--cyan);
  animation:live-scan 1.5s var(--ease) infinite;
}
@keyframes live-scan{from{transform:translateX(-100%)}to{transform:translateX(364%)}}
.live-cap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;
  padding:12px 18px;border-top:1px solid var(--line);background:rgba(3,16,21,.7);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--fg-3);
}
.live-cap a{color:var(--cyan)}
.live-cap a:hover{color:var(--cyan-hi)}

/* ── height 4b: the newsroom ─────────────────────────────────────────────── */
.news{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr))}
.story{
  display:flex;flex-direction:column;margin:0;background:#081e27;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.story:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 30px 64px -40px rgba(0,0,0,.95)}
.story-art{display:block;border-bottom:1px solid var(--line)}
.story-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.02);transition:filter .3s}
.story:hover .story-art img{filter:saturate(1.1) brightness(1.06)}
.story-say{flex:1;display:flex;flex-direction:column;padding:20px 22px 24px}
.story-meta{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-4);
}
.story-src{color:var(--cyan)}
.story h3{margin-top:13px;font-size:1rem;line-height:1.36;letter-spacing:-.012em}
.story h3 a{color:var(--fg)}
.story h3 a:hover{color:var(--cyan-hi)}
.story p{margin-top:11px;font-size:.85rem;line-height:1.6;color:var(--fg-3)}

/* a plate the pointer can lean into: the still magnifies about wherever the
   cursor sits, so a dense diagram can be read without leaving the page */
.zoom{overflow:hidden}
.zoom img{
  transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);
  transition:transform .55s var(--ease),filter .3s var(--ease);
}
.zoom:hover img{transform:scale(var(--zoom,1.5))}
.story-art{--zoom:1.14}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .scenes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  :root{--rail:0px}
  .rail{display:none}
  .nav{left:0}
}
@media (max-width:1020px){
  .hero{min-height:0;padding:128px 0 76px}
  .hero-grid{grid-template-columns:1fr;gap:42px;justify-items:center}
  .hero-copy{justify-self:start}
  .hero-stage{justify-self:center;max-width:min(100%,420px)}
  .plate img{object-position:50% 30%}
  .plate::after{
    background:
      linear-gradient(180deg,rgba(3,16,21,.95) 0%,rgba(3,16,21,.8) 30%,rgba(3,16,21,.5) 54%,var(--void) 100%);
  }
}
@media (max-width:900px){
  .head{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr}
}
@media (max-width:880px){
  /* two across, each carrying its own length of the axis */
  .domains{
    grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;
    column-gap:clamp(16px,3vw,30px);row-gap:26px;
  }
  .domains::after{display:none}
  .domain,.domain + .domain{padding:22px 0 0;border-top:1px solid var(--line-2)}
}
@media (max-width:640px){
  .nav nav .btn{margin-left:0;padding:10px 14px;font-size:.68rem;gap:8px}
  .nav{gap:14px;padding:0 20px}
  .scenes{grid-template-columns:1fr 1fr;gap:12px}
  .scene b{font-size:.88rem}
  /* One column of tall plates would be an endless scroll: on a phone the card
     turns on its side, plate beside the words. */
  .feat{flex-direction:row}
  .feat-plate{flex:0 0 40%;align-self:stretch;border-bottom:0;border-right:1px solid var(--line)}
  .feat-plate img{height:100%;aspect-ratio:auto}
  .feat-say{display:flex;flex-direction:column;justify-content:center;padding:16px 17px}
  .feat b::after{margin-top:11px}
  .feat p{margin-top:10px}
  .to-orbit{right:16px;bottom:16px;width:46px;height:46px}
  .to-orbit .sat{width:26px;height:26px}
  .to-orbit-lab{display:none}
}
@media (prefers-reduced-motion:reduce){
  .plate-frame.on img{animation:none}
  .sph-orbit{animation:none}
  .scan-pulse,.scan-ping{animation:none}
  .scan-ping{opacity:.5}
  .live-scan::after{animation:none;width:100%}
}

@media (max-width:1020px){
  .approach{grid-template-columns:1fr;gap:30px}
  .fleet-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto 1fr auto auto}
}
@media (max-width:720px){
  .fleet-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .fleet-board{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pillars,.agencies{grid-template-columns:1fr}
  .partners{display:none}
  /* the links no longer fit beside the brand: they drop into a sheet the
     burger opens, so nothing on the page is unreachable on a phone */
  .nav-burger{display:flex}
  /* selector kept ahead of `.nav nav` above, which would otherwise keep the
     sheet open at every width */
  .nav .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;padding:14px 20px 20px;margin-left:0;
    background:rgba(4,18,24,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.open .nav-links{display:flex}
  .nav.open{background:rgba(4,18,24,.97);backdrop-filter:blur(14px)}
  .nav .nav-links a:not(.btn){display:block;font-size:.86rem;padding:12px 4px;color:var(--fg-2)}
  .nav-cta{margin-left:0;margin-top:10px;justify-content:center}
}
@media (max-width:640px){
  .approach-tiers{gap:16px}
}
@media (max-width:440px){
  .domain em{display:none}
}