/* ByteVora Solutions — site styles
   Type: Lexend Deca (prose) + IBM Plex Mono (labels, data)
   Colour: one accent (#0060F2) on a navy/pale-blue system; full light+dark token sets
*/

/* ============================================================
   TOKENS — light (default, un-stamped)
   ============================================================ */
:root{
  --font-sans:"Lexend Deca",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",ui-monospace,SFMono-Regular,monospace;

  --blue:#0060F2;
  --blue-ink:#0060F2;
  --navy:#333E63;
  --slate:#485E79;
  --grey:#4A4A4A;
  --muted:#666C79;
  --line:#CAD5E2;

  --bg:#FFFFFF;
  --tint:#F3F5FF;
  --tint-2:#E9EDFF;
  --glass-nav:rgba(242,244,255,.86);
  --glass-edge:rgba(51,62,99,.11);
  --glass-shadow-1:rgba(15,23,42,.05);
  --glass-shadow-2:rgba(15,23,42,.22);

  --chip-accent:rgba(0,102,255,.10);
  --chip-accent-ink:#005DE8;
  --chip-neutral:rgba(51,62,99,.05);
  --chip-neutral-ink:#333E63;

  --band:#000000;
  --band-ink:#FFFFFF;
  --band-body:#C2C2C2;
  --band-muted:#9AA4B8;
  --band-card:rgba(51,62,99,.30);
  --band-line:rgba(202,213,226,.18);
  --band-accent:#5C9CFF;

  --btn-ink:#FFFFFF;
  --focus:#0060F2;
  --danger:#D93025;

  --dia-line:rgba(51,62,99,.38);
  --dia-grid:rgba(51,62,99,.07);
  --dia-node:#333E63;
  --dia-accent:#0060F2;

  /* diagram colours for the inverted proof band */
  --dia-b-grid:rgba(202,213,226,.10);
  --dia-b-line:rgba(202,213,226,.30);
  --dia-b-node:rgba(233,237,255,.72);
  --dia-b-accent:#5C9CFF;
  --dia-b-fill:#000000;

  --cta-plate-op:1;
  --cta-plate-blend:normal;

  --r-btn:42px;
  --r-card:20px;
  --r-media:24px;
  --ease:cubic-bezier(.44,0,.56,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue-ink:#5C9CFF; --navy:#E7ECFF; --slate:#A9B6CC; --grey:#9AA6BC;
    --muted:#7D89A1; --line:rgba(202,213,226,.15);
    --bg:#0A0E1A; --tint:#10162A; --tint-2:#151D36; --glass-nav:rgba(14,20,38,.86); --glass-edge:rgba(202,213,226,.14); --glass-shadow-1:rgba(0,0,0,.30); --glass-shadow-2:rgba(0,0,0,.55);
    --chip-accent:rgba(92,156,255,.15); --chip-accent-ink:#8CBAFF;
    --chip-neutral:rgba(231,236,255,.06); --chip-neutral-ink:#C3CDE4;
    --band:#F3F5FF; --band-ink:#333E63; --band-body:#485E79; --band-muted:#687082;
    --band-card:rgba(255,255,255,.62); --band-line:rgba(51,62,99,.14); --band-accent:#0060F2;
    --focus:#5C9CFF;
    --cta-plate-op:.22; --cta-plate-blend:screen;
    --danger:#FF6B62;
    --dia-line:rgba(201,212,236,.34); --dia-grid:rgba(201,212,236,.08);
    --dia-node:#C3CDE4; --dia-accent:#5C9CFF;
    --dia-b-grid:rgba(51,62,99,.09); --dia-b-line:rgba(51,62,99,.30);
    --dia-b-node:rgba(51,62,99,.80); --dia-b-accent:#0060F2; --dia-b-fill:#F3F5FF;
  }
}
:root[data-theme="dark"]{
  --blue-ink:#5C9CFF; --navy:#E7ECFF; --slate:#A9B6CC; --grey:#9AA6BC;
  --muted:#7D89A1; --line:rgba(202,213,226,.15);
  --bg:#0A0E1A; --tint:#10162A; --tint-2:#151D36; --glass-nav:rgba(14,20,38,.86); --glass-edge:rgba(202,213,226,.14); --glass-shadow-1:rgba(0,0,0,.30); --glass-shadow-2:rgba(0,0,0,.55);
  --chip-accent:rgba(92,156,255,.15); --chip-accent-ink:#8CBAFF;
  --chip-neutral:rgba(231,236,255,.06); --chip-neutral-ink:#C3CDE4;
  --band:#F3F5FF; --band-ink:#333E63; --band-body:#485E79; --band-muted:#687082;
  --band-card:rgba(255,255,255,.62); --band-line:rgba(51,62,99,.14); --band-accent:#0060F2;
  --focus:#5C9CFF;
    --cta-plate-op:.22; --cta-plate-blend:screen;
  --danger:#FF6B62;
  --dia-line:rgba(201,212,236,.34); --dia-grid:rgba(201,212,236,.08);
  --dia-node:#C3CDE4; --dia-accent:#5C9CFF;
  --dia-b-grid:rgba(51,62,99,.09); --dia-b-line:rgba(51,62,99,.30);
  --dia-b-node:rgba(51,62,99,.80); --dia-b-accent:#0060F2; --dia-b-fill:#F3F5FF;
}

/* ============================================================ BASE */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--slate);
  font:300 17px/1.72 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:30px}

.h1{margin:0;font-weight:400;font-size:clamp(44px,8.2vw,96px);line-height:1;letter-spacing:-.04em;color:var(--navy);text-wrap:balance}
.h1 .soft{color:var(--muted)}
.h2{margin:0;font-weight:500;font-size:clamp(34px,5vw,58px);line-height:1.1;letter-spacing:-.03em;color:var(--navy);text-wrap:balance}
.h3{margin:0;font-weight:500;font-size:clamp(21px,2.4vw,25.6px);line-height:1.2;letter-spacing:-.02em;color:var(--navy)}
.sub{margin:0;font-weight:500;font-size:24px;line-height:1.3;letter-spacing:-.02em;color:var(--navy)}
.ulabel{margin:0;font-weight:500;font-size:14.4px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.lead{margin:0;font-size:20px;line-height:1.55;font-weight:300;color:var(--slate)}
.body{margin:0;font-size:16.5px;line-height:1.72;font-weight:300;color:var(--slate)}
.body-s{margin:0;font-size:16px;line-height:1.68;font-weight:300;color:var(--grey)}
.body-xs{margin:0;font-size:14px;line-height:22px;font-weight:300;color:var(--slate)}

/* mixed-weight paragraph headline — AHOY's section-02 device */
.mix{margin:0;font-weight:300;font-size:clamp(25px,3.4vw,37px);line-height:1.3;letter-spacing:-.02em;color:var(--muted);text-wrap:balance}
.mix b{font-weight:500;color:var(--navy)}
.mix i{font-style:normal;font-weight:500;color:var(--blue-ink)}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-ink)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-ink);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue-ink) 16%,transparent)}
.sectlabel{display:flex;align-items:baseline;gap:20px;font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:1.2}
.sectlabel .slash,.sectlabel .num{color:var(--blue-ink);letter-spacing:1px}
.sectlabel .txt{color:var(--navy);letter-spacing:2.5px;text-transform:uppercase}
.microlabel{font-family:var(--font-mono);font-weight:300;font-size:11px;line-height:1.2;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.idx{font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:1.2;color:var(--blue-ink)}
.numeral{font-family:var(--font-mono);font-weight:300;font-size:30px;line-height:1.2;letter-spacing:-1px;color:var(--blue-ink);font-variant-numeric:tabular-nums;text-align:center}

.rule{height:1px;background:var(--line);border:0;margin:0}
.section{padding-block:clamp(72px,10vw,140px)}
.section--tint{background:var(--tint)}
.section--band{background:var(--band)}
.sect-head{display:flex;flex-direction:column;gap:24px;margin-bottom:56px}

/* ============================================================ NAV */
/* The bar is only a positioner now — the pill itself is .nav-in, so it floats
   clear of the page instead of spanning it. */
.nav{position:fixed;inset:14px 0 auto;z-index:50;padding-inline:20px;pointer-events:none}
.nav-in{
  pointer-events:auto;max-width:1160px;margin-inline:auto;
  padding:9px 12px 9px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--glass-nav);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-edge);border-radius:999px;
  box-shadow:0 1px 2px var(--glass-shadow-1),0 14px 34px -14px var(--glass-shadow-2);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{width:30px;height:30px;flex:none;display:block}
.brand-name{font-weight:500;font-size:16px;letter-spacing:.12em;color:var(--navy);text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
/* full-strength colour rather than an opacity fade: the pill can sit over the
   black band, where a faded navy drops under 4.5:1 */
.nav-links a{font-size:14px;line-height:18px;font-weight:300;color:var(--slate);text-decoration:none;transition:color 260ms var(--ease)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--navy)}
.nav-cta{display:inline-flex;align-items:center;white-space:nowrap;gap:10px;padding:10px 24px;border-radius:var(--r-btn);border:1px solid var(--navy);color:var(--navy);font-size:14px;font-weight:300;text-decoration:none;transition:background 260ms var(--ease),color 260ms var(--ease)}
.nav-cta:hover{background:var(--navy);color:var(--bg)}
@media (max-width:1080px){.nav-links{display:none}}
@media (max-width:880px){
  .nav{inset:10px 0 auto;padding-inline:16px}
  .nav-in{padding:8px 10px 8px 20px}
}
@media (max-width:640px){
  .brand-name{font-size:13px;letter-spacing:.06em}
  .brand-mark{width:26px;height:26px}
  .nav-cta{padding:8px 16px;font-size:13px;gap:7px}
}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:12px;padding:13px 30px;border-radius:var(--r-btn);font-size:15px;font-weight:300;line-height:1.3;text-decoration:none;border:1px solid transparent;transition:background 260ms var(--ease),border-color 260ms var(--ease),color 260ms var(--ease)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:color-mix(in srgb,var(--blue) 86%,#000)}
.btn--ghost{border-color:var(--line);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy)}
.swap{position:relative;display:block;width:12px;height:12px;overflow:hidden;flex:none}
.swap svg{position:absolute;left:0;width:12px;height:12px;display:block;transition:transform 300ms var(--ease)}
.swap .a{top:0}.swap .b{top:12px}
.btn:hover .swap svg,.btn:focus-visible .swap svg{transform:translateY(-12px)}

/* ============================================================ HERO */
.hero{padding-top:152px;padding-bottom:0}
.hero-in{display:flex;flex-direction:column;gap:32px}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.scrollcue{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.scrollcue svg{width:11px;height:11px;display:block;animation:bob 1000ms var(--ease) infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}

/* ============================================================ BANNER */
.banner{position:relative;border-radius:var(--r-media);overflow:hidden;aspect-ratio:1800/880}
.banner img{width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,22,.92) 0%,rgba(6,10,22,.74) 38%,rgba(6,10,22,.18) 78%,rgba(6,10,22,.05) 100%)}
.banner-txt{position:absolute;left:clamp(24px,5vw,60px);bottom:clamp(26px,5vw,56px);z-index:2;margin:0;font-weight:500;font-size:clamp(20px,2.9vw,32px);line-height:1.25;letter-spacing:-.02em;color:#fff;max-width:20ch}
.banner-txt span{color:#5C9CFF;display:block}
@media (max-width:640px){.banner{aspect-ratio:4/3}}

/* ============================================================ DIAGRAMS */
.diapair{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);margin-top:56px}
.diacell{padding:32px 40px 0 0;display:flex;flex-direction:column;gap:16px}
.diacell + .diacell{padding-left:40px;padding-right:0;border-left:1px solid var(--line)}
.diacell svg{display:block;width:100%;max-width:78%;height:auto;margin-inline:auto}
.diahead{display:flex;align-items:baseline;gap:14px}
@media (max-width:880px){
  .diapair{grid-template-columns:1fr}
  .diacell{padding-right:0}
  .diacell + .diacell{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:30px}
}
.diagram-wide{width:100%;border-radius:var(--r-media);overflow:hidden;background:var(--tint-2)}

/* code window — adapted from btvsys.com, re-coloured to the page's single accent */
/* copy column fills the row so the CTA sits on the code window's baseline */
/* the hero is a single column now that the code window has moved into #deliver;
   the measure is capped so the lead does not run the full wrap width */
.hero-copy{display:flex;flex-direction:column;gap:28px;max-width:60ch}

.codewin{
  border-radius:var(--r-card);overflow:hidden;
  background:var(--bg);border:1px solid var(--line);margin:0;
}
.codewin-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line)}
.codewin-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.codewin-dot:first-child{background:var(--blue-ink);opacity:.55}
.codewin-name{
  margin-left:10px;font-family:var(--font-mono);font-weight:300;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
}
.codewin-body{
  padding:16px 16px 20px;font-family:var(--font-mono);font-weight:300;
  font-size:clamp(10.5px,1.02vw,12.5px);line-height:1.85;color:var(--navy);overflow-x:auto;white-space:nowrap;
}
.cl{opacity:0}
.cl-sp{height:11px}
.cl-row{display:flex;align-items:baseline;gap:12px}
.cl-row .t{color:var(--navy);flex:none}
.cl-row .dots{flex:1;min-width:20px;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.cl-row .v{color:var(--muted);flex:none}
.c-ok{color:var(--blue-ink);flex:none}
/* the command is typed by a person — character by character, caret riding the edge.
   "$ bytevora deploy --target air-gapped" is 37 monospace characters, so steps(37)
   reveals exactly one glyph per step. */
.codewin .cl-cmd{
  opacity:1;display:inline-block;white-space:nowrap;overflow:hidden;
  width:0;border-right:2px solid transparent;vertical-align:bottom;
}
.codewin.is-in .cl-cmd{
  animation:typeline 1.45s steps(37,end) .2s forwards,
            typecaret .5s step-end .2s 3;
}
/* border-box + the 2px caret border leaves only 37ch-2px of content box,
   slicing the stem off the final glyph. +1px covers the ink overhang. */
@keyframes typeline{to{width:calc(37ch + 3px)}}
@keyframes typecaret{0%,100%{border-right-color:var(--blue-ink)}50%{border-right-color:transparent}}
/* output does not type — a real shell prints it line by line, already complete */
.codewin.is-in .cl:not(.cl-cmd){animation:codeIn .22s var(--ease) forwards}
.codewin.is-in .cl:nth-child(3){animation-delay:1.80s}
.codewin.is-in .cl:nth-child(4){animation-delay:1.93s}
.codewin.is-in .cl:nth-child(5){animation-delay:2.06s}
.codewin.is-in .cl:nth-child(6){animation-delay:2.06s}
.codewin.is-in .cl:nth-child(7){animation-delay:2.30s}
.codewin.is-in .cl:nth-child(2){animation-delay:1.70s}
@keyframes codeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.caret{
  display:inline-block;width:7px;height:14px;margin-left:3px;vertical-align:-2px;
  background:var(--blue-ink);opacity:0;
}
.codewin.is-in .caret{animation:blink 1.1s steps(1) 2.55s infinite}
@keyframes blink{0%,50%{opacity:.8}50.01%,100%{opacity:0}}
.codewin-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-top:1px solid var(--line);background:var(--tint);
  font-family:var(--font-mono);font-weight:300;font-size:10.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
}
.codewin-ok{display:flex;align-items:center;gap:8px;color:var(--blue-ink)}
.codewin-ok::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-ink) 18%,transparent);
}
.c-com{color:var(--muted)}
.c-key{color:var(--blue-ink)}
.c-fn{color:var(--navy);font-weight:500}
.c-str{color:var(--slate)}
.c-br{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cl{opacity:1}.caret{opacity:.8}}
.diagram-iso{
  width:100%;margin:0 0 48px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--band-line) transparent;
}
.diagram-iso::-webkit-scrollbar{height:5px}
.diagram-iso::-webkit-scrollbar-thumb{background:var(--band-line);border-radius:999px}
/* keep the mono callouts legible — below ~1080px the plan scrolls rather than shrinks */
.diagram-iso svg{display:block;width:100%;height:auto}
/* above 700px the full plan needs room for its label rails and scrolls;
   below that a compact composition is rendered instead and fits outright */
@media (min-width:700px){.diagram-iso svg{min-width:1040px}}
@media (max-width:699px){.diagram-iso{overflow-x:visible}}
.diagram-wide svg{display:block;width:100%;height:auto}

/* ============================================================ STACK ROWS */
.stackrows{border-top:1px solid var(--line);margin-top:64px}
.srow{display:grid;grid-template-columns:86px minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding:32px 0;border-bottom:1px solid var(--line)}
.srow--fill{background:var(--tint-2);border-radius:var(--r-card);border-bottom:0;margin-top:8px}
.srow-body{display:flex;flex-direction:column;gap:12px}
.srow-side{display:flex;flex-direction:column;gap:20px}
.chipgroup{display:flex;flex-direction:column;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:1.2;background:var(--chip-neutral);color:var(--chip-neutral-ink)}
.chip--accent{background:var(--chip-accent);color:var(--chip-accent-ink)}
@media (max-width:880px){
  .srow{grid-template-columns:64px minmax(0,1fr);gap:20px 24px}
  .srow-side{grid-column:1/-1}
}
.stackfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px}

/* ============================================================ SPLIT + INDEX ROW */
/* top-aligned, not centred: the code window is a hard-edged artifact and reads as
   level with the heading it illustrates */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.stack-copy{display:flex;flex-direction:column;gap:20px}
/* Box-aligning the two columns leaves the window's border 8px above the heading's
   cap line, because the h2 box starts at its half-leading, not at the caps. Nudge
   the window down by that offset, expressed against the same clamp the h2 uses so
   it tracks the fluid type. Two-column only — stacked, the window follows the copy. */
@media (min-width:881px){
  .split > .codewin{margin-top:calc(clamp(34px,5vw,58px) * 0.138)}
}
.mediacard{border-radius:var(--r-media);overflow:hidden;aspect-ratio:1200/840}
.mediacard img{width:100%;height:100%;object-fit:cover}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:40px}}

.idxrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0;border-top:1px solid var(--line);margin-top:64px}
.idxcell{padding:24px 24px 0 0;display:flex;flex-direction:column;gap:12px}
.idxcell + .idxcell{padding-left:24px;border-left:1px solid var(--line)}
/* stage glyphs — hairline schematic marks, same 1px grid as the rules around them */
.sicon{width:24px;height:24px;flex:none;align-self:flex-start;color:var(--blue-ink);fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:square}
.sicon .d{fill:currentColor;stroke:none}
.section--band .sicon{color:var(--band-accent)}
@media (max-width:880px){
  .idxrow{grid-template-columns:1fr 1fr}
  /* `.idxcell + .idxcell` (0-2-0) outranks a bare `.idxcell`, so the 24px desktop
     gutter was leaking onto cells 3 and 5 here and leaving the left column ragged
     at 0 / 24 / 24. Match its specificity so the reset actually lands. */
  .idxrow .idxcell{padding-left:0;border-left:0!important}
  .idxcell:nth-child(even){padding-left:22px;border-left:1px solid var(--line)!important}
  .idxcell:nth-child(n+3){margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
}

/* ============================================================ DARK BAND */
.section--band .h2,.section--band .h3,.section--band .sub{color:var(--band-ink)}
.section--band .body,.section--band .body-s,.section--band .lead,.section--band .body-xs{color:var(--band-body)}
.section--band .sectlabel .txt{color:var(--band-ink)}
.section--band .sectlabel .slash,.section--band .sectlabel .num,.section--band .idx{color:var(--band-accent)}
.section--band .microlabel{color:var(--band-muted)}

/* horizontal snap row — AHOY's carousel pattern; avoids orphan wraps */
.pcards{
  display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--band-line) transparent;
}
.pcards::-webkit-scrollbar{height:5px}
.pcards::-webkit-scrollbar-thumb{background:var(--band-line);border-radius:999px}
.pcard{
  position:relative;flex:0 0 clamp(228px,25vw,272px);scroll-snap-align:start;
  border-radius:var(--r-media);overflow:hidden;aspect-ratio:760/1000;
  display:flex;flex-direction:column;justify-content:space-between;padding:20px;
}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the top stop carries the index + badge, which on the aviation card sit over a
   white fuselage; .62 was not enough to hold white text there */
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,22,.82) 0%,rgba(6,10,22,.58) 14%,rgba(6,10,22,.20) 34%,rgba(6,10,22,.55) 62%,rgba(6,10,22,.93) 100%)}
.pcard-top,.pcard-btm{position:relative;z-index:2}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pcard-top .idx{color:#fff;opacity:.9}
.pcard-badge{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--font-mono);font-weight:300;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#fff}
.pcard-btm{display:flex;flex-direction:column;gap:12px}
.pcard-title{margin:0;font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.02em;color:#fff}
.pcard-panel{border-radius:14px;background:rgba(51,62,99,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:13px 14px;display:flex;flex-direction:column;gap:6px}
.pcard-panel .microlabel{color:rgba(255,255,255,.7)}
.pcard-panel p{margin:0;font-size:12.5px;line-height:18px;font-weight:300;color:rgba(255,255,255,.92)}

.clients{display:flex;flex-wrap:wrap;gap:10px}
.clientchip{display:inline-flex;align-items:center;gap:11px;padding:13px 20px;border-radius:999px;background:var(--band-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15px;font-weight:300;color:var(--band-ink)}
.clientchip .idx{font-size:11px;letter-spacing:1px}

/* ============================================================ TEAM */
.teamrow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start;margin-top:56px}
.leaders{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.leader{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
@media (max-width:880px){.teamrow{grid-template-columns:1fr;gap:40px}}

/* ============================================================ CTA + FOOTER */
.cta{position:relative;overflow:hidden;border-radius:30px;padding:clamp(40px,6vw,76px);background:var(--tint-2);display:flex;flex-direction:column;gap:24px}
/* layered-glass plate behind the CTA. Clipped by the card's own overflow:hidden.
   On the dark theme the artwork is far too bright to sit at full strength, so it
   drops to a screen-blended glow via tokens rather than a second image. */
.cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:image-set(url("../img/cta-bg.webp") type("image/webp"),
                       url("../img/cta-bg.jpg") type("image/jpeg")) center/cover no-repeat;
  opacity:var(--cta-plate-op);mix-blend-mode:var(--cta-plate-blend)}
/* The plate's brighter panes drop the copy under 3:1, so the card's own ground is
   laid back over the text side and faded out before the form. Uses --tint-2, so it
   follows the theme without a second rule. */
.cta::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(95deg,var(--tint-2) 0%,var(--tint-2) 46%,transparent 76%)}
@media (max-width:880px){
  /* stacked: the copy sits above the form, so the scrim runs top-to-bottom */
  .cta::after{background:linear-gradient(180deg,var(--tint-2) 0%,var(--tint-2) 34%,transparent 66%)}
}
@media (max-width:880px){
  .cta::before{background-image:image-set(url("../img/cta-bg@0.5x.webp") type("image/webp"),
                                          url("../img/cta-bg@0.5x.jpg") type("image/jpeg"))}
}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.cta-glow{position:absolute;right:-110px;bottom:-170px;width:520px;height:520px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--blue) 30%,transparent) 0%,transparent 68%)}

.footer{background:var(--tint);padding-block:72px 40px;margin-top:clamp(72px,10vw,140px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:48px}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-head{font-family:var(--font-mono);font-weight:400;font-size:12px;line-height:16px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:4px}
.foot-col a{font-size:14px;font-weight:300;color:var(--slate);text-decoration:none;opacity:.85}
.foot-col a:hover{opacity:1;color:var(--navy)}
.infotable{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.inforow{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:20px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.infoval{font-size:14px;font-weight:300;color:var(--navy)}
.pending{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.foot-legal{font-size:12px;line-height:15.6px;font-weight:300;color:var(--navy)}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:640px){.foot-grid{grid-template-columns:1fr}}

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

/* ============================================================ PRODUCTION ADDITIONS */

/* keyboard users land here first */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;border-radius:0 0 var(--r-card) 0;
  background:var(--blue);color:#fff;font-size:14px;text-decoration:none;
}
.skip:focus{left:0}

/* CTA becomes copy + enquiry form */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.cta-copy{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
@media (max-width:880px){.cta{grid-template-columns:1fr;gap:40px}}

.cform{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.cform-grid{grid-template-columns:1fr}}
.cfield{display:flex;flex-direction:column;gap:7px}
.cfield > span{
  font-family:var(--font-mono);font-weight:300;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
}
.cfield input,.cfield select,.cfield textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--navy);
  font:300 15px/1.5 var(--font-sans);
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease);
}
.cfield textarea{resize:vertical;min-height:96px}
/* honeypot — off-canvas rather than display:none, which bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{
  outline:none;border-color:var(--blue-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-ink) 16%,transparent);
}
.cform-note{margin:2px 0 0;font-size:13px;font-weight:300;color:var(--slate)}
.cform-note a{color:var(--blue-ink)}
.cform .btn{align-self:flex-start;border:0;cursor:pointer;font-family:var(--font-sans)}

.foot-bottom .microlabel a{color:var(--navy);text-decoration:none}
.foot-bottom .microlabel a:hover{color:var(--blue-ink)}

/* <picture> must take the box the <img> used to occupy, or the inline
   wrapper collapses to zero height and lazy-loading never triggers */
.banner picture,.mediacard picture{display:block;width:100%;height:100%}
.pcard picture{position:absolute;inset:0;display:block;width:100%;height:100%}

/* contact form status + disabled state */
.cform-status{margin:0;min-height:1.25em;font-size:13px;font-weight:300;color:var(--slate)}
.cform-status.is-ok{color:var(--blue-ink)}
.cform-status.is-error{color:var(--danger)}
.cform .btn[disabled]{opacity:.62;cursor:progress}
.cform .btn[disabled] .swap{display:none}

/* ============================================================ SERVICE PAGES */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:36px 40px}
.svccard{display:flex;flex-direction:column;gap:12px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--line)}
.stat{padding:24px 28px 24px 0;display:flex;flex-direction:column;gap:8px}
.stat + .stat{padding-left:28px;border-left:1px solid var(--line)}
.stat-v{
  font-family:var(--font-mono);font-weight:300;font-size:clamp(24px,2.4vw,30px);
  line-height:1.1;letter-spacing:-1px;color:var(--navy);font-variant-numeric:tabular-nums;
}
.section--band .stat-v{color:var(--band-ink)}
.section--band .stats,.section--band .stat + .stat{border-color:var(--band-line)}
@media (max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(odd){padding-left:0;border-left:0}
}

.crumb{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:300;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--blue-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ============================================================ LEGAL PAGES */
.legal{max-width:74ch}
.legal h2{
  margin:48px 0 16px;font-weight:500;font-size:clamp(21px,2.3vw,26px);line-height:1.25;
  letter-spacing:-.02em;color:var(--navy);scroll-margin-top:120px;
}
.legal h2:first-child{margin-top:0}
.legal h3{margin:32px 0 8px;font-weight:500;font-size:16.5px;line-height:1.35;color:var(--navy)}
.legal p{margin:0 0 15px;font-size:16px;line-height:1.75;font-weight:300;color:var(--slate)}
.legal ul{margin:0 0 20px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.legal li{font-size:16px;line-height:1.7;font-weight:300;color:var(--slate)}
.legal li::marker{color:var(--blue-ink)}
.legal a{color:var(--blue-ink)}
.legal-toc{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none;
}
.legal-toc a{
  display:inline-flex;padding:7px 13px;border-radius:999px;text-decoration:none;
  background:var(--chip-neutral);color:var(--chip-neutral-ink);
  font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:1.2;
  transition:background 200ms var(--ease),color 200ms var(--ease);
}
.legal-toc a:hover{background:var(--chip-accent);color:var(--chip-accent-ink)}

/* ============================================================ ABOUT / TIMELINE */
.tl{border-top:1px solid var(--line)}
.tlrow{
  display:grid;grid-template-columns:130px minmax(0,1fr);gap:40px;
  padding:32px 0;border-bottom:1px solid var(--line);
}
.tl-year{
  font-family:var(--font-mono);font-weight:300;font-size:clamp(24px,2.5vw,30px);
  line-height:1.1;letter-spacing:-1px;color:var(--blue-ink);font-variant-numeric:tabular-nums;
}
.tl-body{display:flex;flex-direction:column;gap:10px}
@media (max-width:700px){.tlrow{grid-template-columns:1fr;gap:12px;padding:24px 0}}

.vmpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.vmcell{padding:36px 40px 0 0;display:flex;flex-direction:column;gap:16px}
.vmcell + .vmcell{padding-left:40px;padding-right:0;border-left:1px solid var(--line)}
@media (max-width:880px){
  .vmpair{grid-template-columns:1fr}
  .vmcell{padding-right:0}
  .vmcell + .vmcell{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:30px}
}

/* ============================================================ CAREERS */
.jobs{border-top:1px solid var(--line)}
.job{border-bottom:1px solid var(--line)}
.job > summary{
  list-style:none;cursor:pointer;padding:24px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
}
.job > summary::-webkit-details-marker{display:none}
.job > summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.job-t{display:flex;flex-direction:column;gap:11px}
.job-meta{display:flex;flex-wrap:wrap;gap:8px}
.job-chev{
  width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;transition:border-color 220ms var(--ease);
}
.job-chev svg{width:9px;height:9px;transition:transform 260ms var(--ease)}
.job:hover .job-chev{border-color:var(--blue-ink)}
.job[open] .job-chev{border-color:var(--blue-ink)}
.job[open] .job-chev svg{transform:rotate(180deg)}
.job-body{padding:2px 0 32px;display:flex;flex-direction:column;gap:20px;max-width:76ch}
.job-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.job-body li{font-size:15px;line-height:1.65;font-weight:300;color:var(--slate)}
.job-body li::marker{color:var(--blue-ink)}
@media (prefers-reduced-motion:reduce){.job-chev svg{transition:none}}

/* ============================================================ HERO RHYTHM
   .eyebrow/.crumb/.microlabel are <p> elements — without an explicit reset the
   UA's 1em margin leaks into the flex gap and scales with each font-size, so the
   spacing drifts page to page. Reset it, then space by relationship rather than
   a flat gap: the label sits tight to the headline it belongs to, and each
   following block steps further away. */
.eyebrow,.crumb,.microlabel{margin:0}
.crumb{line-height:1.2}

.hero-in{gap:0}
.hero-in > *{margin:0}
.hero-in > .crumb,
.hero-in > .eyebrow      {margin-bottom:20px}   /* label -> headline: tightest */
.hero-in > .crumb + .eyebrow{margin-top:-6px}   /* two stacked labels read as one unit */
.hero-in > .h1           {margin-bottom:28px}
.hero-in > .lead         {margin-bottom:28px}
.hero-in > .chips        {margin-top:4px}
.hero-in > .hero-foot    {margin-top:64px}      /* clear break before the rule */
/* whatever precedes the foot drops its own bottom margin, so the 64px break
   is set once by .hero-foot rather than stacking with the previous element */
.hero-in > *:has(+ .hero-foot){margin-bottom:0}


/* ============================================================ JUSTIFIED PROSE
   Running prose is justified; hyphens:auto is not optional here — the card grid
   sets to ~40 characters and without hyphenation justification opens rivers of
   whitespace. Leads, headings and labels stay ragged-right: they are display
   type, and justifying two or three short lines looks worse than leaving them. */
.body,.body-s,.body-xs,
.legal p,.legal li,
.job-body p,.job-body li{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  hyphens:auto;
  hyphenate-limit-chars:7 3 3;   /* don't hyphenate short words or leave stubs */
}

/* ============================================================ SMALL SCREENS
   Two-column grids were being *forced* below their content's minimum width,
   which pushed the document past the viewport at 360px. Below 460px they
   collapse to a single column and let the content set the width. */
@media (max-width:460px){
  .stats{grid-template-columns:1fr}
  .stat{padding:20px 0}
  .stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .section--band .stat + .stat{border-color:var(--band-line)}

  .idxrow{grid-template-columns:1fr}
  .idxcell,
  .idxcell:nth-child(even){padding:20px 0 0!important;border-left:0!important}
  .idxcell + .idxcell{margin-top:20px;padding-top:20px!important;border-top:1px solid var(--line)}

  /* Stacked, the glyph strands itself midway between the rule above and its own
     label, and the six different ink heights read as a ragged left column. On one
     line the optical centres align and the pairing is unambiguous. */
  /* everything on one flush-left edge: the glyph sits above its label rather than
     beside it, and the 6px gap keeps the pair reading as one unit */
  .idxrow--glyph .idxcell{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .idxrow--glyph .sicon{align-self:flex-start}
  .idxrow--glyph .body-xs{margin-top:6px}

  .values,.capgrid,.techgrid{grid-template-columns:1fr}
}

/* nav has to fit brand + CTA inside 360px without forcing the page wider */
@media (max-width:460px){
  .nav-in{padding-inline:20px;gap:14px}
  .brand-name{font-size:11.5px;letter-spacing:.04em}
  .brand-mark{width:24px;height:24px}
  .nav-cta{padding:9px 13px;font-size:12px;gap:6px}
  .wrap{padding-inline:20px}
}

/* mono labels hold legibility at arm's length */
@media (max-width:640px){
  .microlabel{font-size:12px}
  .foot-head{font-size:12px}
}

/* touch targets — 44px minimum for standalone navigational links.
   Keyed to viewport rather than pointer:coarse, which not every engine reports.
   Inline links inside running prose are exempt (WCAG 2.5.8). */
@media (max-width:880px), (pointer:coarse){
  .brand{min-height:44px;align-items:center}
  .nav-cta{min-height:44px}
  .foot-col a{min-height:44px;display:flex;align-items:center}
  .legal-toc a{min-height:44px;align-items:center}
  .hero-foot .microlabel a{display:inline-flex;align-items:center;min-height:44px}
  .job > summary{padding-block:28px}
  .cform-note a{display:inline-block;padding-block:8px}
}

/* on phones the district breaks out of the page gutter — it is a plan, and the
   extra 40-60px of width is the difference between reading it and squinting */
@media (max-width:699px){
  .diagram-iso{margin-inline:-30px;width:calc(100% + 60px);max-width:none}
}
@media (max-width:460px){
  .diagram-iso{margin-inline:-20px;width:calc(100% + 40px)}
}