/* ============================================================
   RAPTOR — Shared Design System
   Deep-sea industrial · abyssal navy base
   Technologies (.theme-tech) accents in burnt-orange #E03F10 (the Raptor
   hardware colour); the subsea-telemetry treatment is the differentiator.
   ============================================================ */

/* Self-hosted fonts. Previously pulled from Google's CDN, which sent every
   visitor's IP to Google before any consent. Served from our own origin now, so
   the site makes no third-party requests at all.
   Droid Sans / Droid Sans Mono are Apache License 2.0, so redistribution is fine.
   Only 400 and 700 are shipped, exactly as Google served: the heavier weights
   used in the CSS (500/600/800) are synthesised by the browser as before. */
@font-face{font-family:'Droid Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/droid-sans-400.woff2') format('woff2')}
@font-face{font-family:'Droid Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/droid-sans-700.woff2') format('woff2')}
@font-face{font-family:'Droid Sans Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/droid-sans-mono-400.woff2') format('woff2')}

:root{
  /* Height of the sticky header. The pathway stage pins under it, so it needs
     to know how much to clear. The topbar is hidden below 767px. */
  --head-h:148px;
  --abyss:#060d18;
  --deep:#0a1830;
  --deep-2:#0c2038;
  --panel:#0f2742;
  --panel-2:#143052;
  --line:rgba(120,160,200,.16);
  --line-strong:rgba(120,160,200,.32);

  --blue:#1f6fb8;
  --blue-bright:#3a9fe0;
  --cyan:#5cc4ec;

  --orange:#ff5a1f;
  --orange-soft:#ff7a45;
  --amber:#ffb000;

  --ink:#eef4fb;
  --ink-2:#c2d0e0;
  --muted:#8499af;
  --muted-d:#5d7390;

  --accent:var(--orange);
  --accent-soft:var(--orange-soft);

  --maxw:1200px;
  --r:14px;
  --r-sm:9px;

  --font-display:'Droid Sans',sans-serif;
  --font-cond:'Droid Sans',sans-serif;
  --font-body:'Droid Sans',sans-serif;
  --font-mono:'Droid Sans Mono',monospace;
}

.theme-tech{
  /* Primary accent = the burnt-orange of the Raptor hardware (#E03F10),
     a deeper, redder shade than Anchoring's safety-orange (#ff5a1f).
     Differentiation from Anchoring now rests on the subsea-telemetry
     treatment rather than hue. */
  --accent:#e03f10;
  --accent-soft:#f26a3c;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--abyss);
  color:var(--ink-2);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* No overflow-x:hidden here — it would make body a scroll container and
     break position:sticky (stacking cards / pathway). Horizontal bleed is
     contained per-element instead (.section{overflow-x:clip}, .hero, etc.). */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- Type ---- */
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);line-height:1.05;font-weight:800;letter-spacing:-.01em}
.kicker{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);display:inline-block;
}
.h-xl{font-size:clamp(2.6rem,6vw,4.6rem);text-transform:uppercase;letter-spacing:-.02em}
.h-lg{font-size:clamp(2rem,4vw,3rem);text-transform:uppercase}
.h-md{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted)}
p+p{margin-top:1rem}
.section p{max-width:74ch}

/* ---- Header ---- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(6,13,24,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-row{display:flex;align-items:center;justify-content:space-between;height:104px;gap:24px}
/* Utility strip above the main nav */
.topbar{border-bottom:1px solid var(--line)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:42px;
  font-family:var(--font-cond);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tb-left{color:var(--muted)}
.tb-right{display:flex;gap:30px}
.tb-right a{color:var(--ink-2);transition:color .2s}
.tb-right a:hover{color:var(--accent)}
.brand{display:flex;align-items:center;height:100%}
.brand img{height:72px;width:auto;transition:transform .3s ease}
.brand:hover img{transform:scale(1.03)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  font-family:var(--font-cond);font-size:1.02rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);padding:9px 15px;border-radius:8px;
  transition:color .2s,background .2s;position:relative;
}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav a.active{color:var(--accent)}
.nav a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--accent);border-radius:2px}
.nav .btn{margin-left:8px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  font-size:1rem;padding:13px 26px;border-radius:9px;cursor:pointer;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}
.btn--primary{background:var(--accent);color:#0a0a0a;box-shadow:0 8px 30px -10px var(--accent)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px var(--accent)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.02)}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding:clamp(80px,12vw,150px) 0 clamp(64px,9vw,110px)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 600px at 78% -10%,rgba(224,63,16,.28),transparent 60%),
    radial-gradient(900px 500px at 10% 110%,rgba(255,90,31,.12),transparent 55%),
    linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%);
}
.theme-tech .hero-bg::before{
  background:
    radial-gradient(1200px 600px at 78% -10%,rgba(224,63,16,.34),transparent 60%),
    radial-gradient(900px 500px at 10% 110%,rgba(224,63,16,.18),transparent 55%),
    linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%);
}
.hero-grid{position:absolute;inset:0;opacity:.5}
.hero .wrap{position:relative;z-index:2}
.hero .kicker{margin-bottom:20px}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-stats{display:flex;flex-wrap:wrap;gap:42px;margin-top:54px}
.hero-stats .st .n{font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--ink)}
.hero-stats .st .l{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ---- Sections ---- */
.section{padding:clamp(60px,9vw,108px) 0;position:relative}
.section--tight{padding:clamp(48px,6vw,76px) 0}
.section--panel{background:linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%);border-block:1px solid var(--line)}
.shead{margin-bottom:48px;max-width:760px}
.shead.center{margin-inline:auto;text-align:center}
.shead .kicker{margin-bottom:14px}
.shead h2{margin-bottom:0}

/* ---- Grid + cards ---- */
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:30px;
  transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:46px;background:var(--accent);border-radius:0 0 3px 0;transition:width .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 50px -28px #000}
.card:hover::before{width:100%}
.card .ic{width:46px;height:46px;color:var(--accent);margin-bottom:18px}
.card h3{font-size:1.28rem;margin-bottom:10px;text-transform:none;letter-spacing:0}
.card p{color:var(--ink-2);font-size:.98rem}
.card ul{margin-top:12px;list-style:none}
.card ul li{padding-left:20px;position:relative;font-size:.95rem;margin:5px 0;color:var(--ink-2)}
.card ul li::before{content:"";position:absolute;left:1px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* tool link cards: click-through from the home innovation section to each
   technology page. Whole card is the link. Reuses the .card look (panel
   gradient, accent bar, hover lift) in a compact, auto-fitting grid so 5 items
   flow tidily without a fixed column count leaving a gap. */
.tool-grid{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.tool-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.tool-grid{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;gap:9px;padding:24px 26px;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s}
.tool-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:46px;background:var(--accent);border-radius:0 0 3px 0;transition:width .3s}
.tool-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 50px -28px #000}
.tool-card:hover::before{width:100%}
.tool-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tc-name{font-weight:700;font-size:1.08rem;line-height:1.25}
.tc-desc{color:var(--ink-2);font-size:.92rem;line-height:1.45;flex:1}
.tc-go{margin-top:4px;color:var(--accent);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.tc-go .ar{transition:transform .25s}
.tool-card:hover .tc-go .ar{transform:translateX(4px)}
/* Faded system image filling the whole card as a background. Each card sets its
   own image via --tc-img; the shared ::after covers the card (clipped to the
   rounded corners by the card's overflow:hidden, so no visible edges) and holds
   it at low opacity behind the text. A scrim baked into the same layer keeps the
   left, where the text sits, dark enough to stay readable. On the dark card a
   dark-background photo mostly melts away and leaves the orange machine. */
.tool-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity .3s;
  background:linear-gradient(100deg,var(--panel) 0%,rgba(20,32,50,.45) 48%,transparent 100%),var(--tc-img,none) center/cover no-repeat;
  filter:var(--tc-filter,none);opacity:var(--tc-op,.5)}
.tool-card:hover::after{opacity:calc(var(--tc-op,.5) + .12)}
.tool-card > *{position:relative;z-index:1}

/* feature list */
.flist{list-style:none;display:grid;gap:14px;margin-top:8px}
.flist li{padding-left:26px;position:relative;color:var(--ink-2)}
.flist li::before{content:"";position:absolute;left:1px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.flist b,.flist strong{color:var(--ink);font-weight:600}

/* split layout */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.split.rev .media{order:-1}
.split .media{position:relative}

/* image placeholder */
.ph{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg,rgba(120,160,200,.05) 0 12px,transparent 12px 24px),
    linear-gradient(180deg,var(--panel) 0%,var(--deep) 100%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:300px;color:var(--muted);
}
.ph .pin{padding:26px;max-width:80%}
.ph .pin svg{width:40px;height:40px;color:var(--accent);opacity:.7;margin:0 auto 12px}
.ph .pin .t{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.ph.tall{min-height:440px}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---- Spec tables ---- */
.spec-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.spec{
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.spec h4{
  font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  font-size:1.05rem;color:var(--accent);padding:16px 20px;border-bottom:1px solid var(--line);
}
.spec table{width:100%;border-collapse:collapse}
.spec td{padding:10px 20px;border-top:1px solid var(--line);font-size:.92rem;vertical-align:top}
.spec tr:first-child td{border-top:none}
.spec td:first-child{color:var(--muted);width:52%}
.spec td:last-child{color:var(--ink);font-family:var(--font-mono);font-size:.86rem;text-align:right}
.spec .sub td{background:rgba(120,160,200,.05);color:var(--accent-soft);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;text-align:left}
.note{font-family:var(--font-mono);font-size:.82rem;color:var(--cyan);margin-top:14px}
.note.amber{color:var(--amber)}

/* applications strip */
.appcard{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--deep-2)}
.appcard h4{font-size:1.1rem;color:var(--ink);margin-bottom:8px;text-transform:none;letter-spacing:0}
.appcard p{font-size:.94rem;color:var(--muted)}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--deep) 0%,var(--panel) 100%);border-block:1px solid var(--line);padding:clamp(48px,7vw,84px) 0}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}

/* breadcrumb / page hero */
.phero{padding:clamp(64px,9vw,118px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.phero .crumb{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.phero .crumb a:hover{color:var(--accent)}
.phero h1{margin-bottom:18px}

/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;background:var(--deep);border:1px solid var(--line-strong);border-radius:9px;
  padding:13px 15px;color:var(--ink);font-family:var(--font-body);font-size:1rem;transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:130px}
/* Honeypot for the contact form. Moved off-screen rather than display:none,
   because some spam bots skip fields that are outright hidden but will happily
   fill this one. aria-hidden and tabindex="-1" on the markup keep it away from
   screen readers and the tab order. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cinfo .row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.cinfo .row svg{width:24px;height:24px;color:var(--accent);flex:none;margin-top:2px}
.cinfo .row .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cinfo .row .v{color:var(--ink);font-size:1.05rem}

/* ---- Footer ---- */
.site-foot{background:var(--deep);border-top:1px solid var(--line);padding:60px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-about img{height:50px;width:auto;margin-bottom:18px}
.foot-about p{color:var(--muted);font-size:.94rem;max-width:38ch}
.site-foot h5{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-size:.92rem;margin-bottom:14px}
.site-foot a{display:block;color:var(--muted);font-size:.94rem;padding:4px 0;transition:color .2s}
.site-foot a:hover{color:var(--accent)}
.foot-contact div{margin-bottom:12px;font-size:.94rem;color:var(--ink-2)}
.foot-contact b{color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.85rem;color:var(--muted)}
.foot-bottom .leask b{color:var(--ink-2)}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ---- Responsive ---- */
@media(max-width:980px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev .media{order:0}
  .spec-wrap{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:720px){
  /* Sit the slide-down panel directly under the header, whatever its height */
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--abyss);border-bottom:1px solid var(--line);padding:12px 28px 22px;
    transform:translateY(-130%);transition:transform .35s ease;z-index:40;
  }
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 6px;border-radius:0;border-bottom:1px solid var(--line)}
  .nav a.active::after{display:none}
  .nav .btn{margin:14px 0 0}
  .burger{display:flex}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero-stats{gap:28px}
  .cta-band .inner{flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr}
}

/* ---- Condensed depth gauge (homepage teaser) ---- */
.dch-panel{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:660px;
  background:linear-gradient(180deg,#3a93c7 0%,#1f6fa0 16%,#0d4a6e 40%,#073048 64%,#041d2e 84%,#02101c 100%)}
.dch-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dch-bubbles span{position:absolute;bottom:-20px;left:var(--x);width:calc(5px*var(--s));height:calc(5px*var(--s));border-radius:50%;background:rgba(220,245,255,.4);animation:dchrise var(--dur) linear var(--dly) infinite}
@keyframes dchrise{0%{transform:translateY(0);opacity:0}12%{opacity:.7}100%{transform:translateY(-560px);opacity:0}}
.dch-cap{position:absolute;right:16px;z-index:3;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(230,245,255,.7)}
.dch-cap-top{top:14px}
.dch-cap-bot{bottom:14px;color:rgba(200,225,245,.5)}
.dch-rows{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;min-height:660px}
.dch-row{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:16px;padding:0 24px;flex:1;border-top:1px solid rgba(255,255,255,.12);transition:background .2s}
.dch-row:first-child{border-top:none}
.dch-row:hover,.dch-row:focus-visible{background:rgba(255,255,255,.08);outline:none}
.dch-d{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:#fff;line-height:1}
.dch-d i{font-style:normal;font-family:var(--font-cond);font-size:.8rem;color:var(--orange);margin-left:2px}
.dch-tx b{display:block;font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:0}
.dch-tx em{font-style:normal;color:rgba(225,242,255,.72);font-size:.9rem}
.dch-ar{color:var(--orange);font-size:1.2rem;transition:transform .2s;opacity:.85}
.dch-row:hover .dch-ar{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.dch-bubbles{display:none}}

/* ---- News listing ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.post-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 50px -28px #000}
.post-card .ph{border:none;border-radius:0;min-height:190px}
.post-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.post-meta .cat{color:var(--accent)}
.post-card h3{font-size:1.18rem;text-transform:none;letter-spacing:0;margin-bottom:8px;color:var(--ink)}
.post-card p{font-size:.95rem;color:var(--ink-2);margin-bottom:14px}
.post-card .more{margin-top:auto;color:var(--accent);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}

/* ---- Article (single post) ---- */
.article{max-width:760px;margin:0 auto}
.article .lead{font-size:1.22rem;color:var(--ink);margin-bottom:30px}
.article h2{font-size:1.6rem;margin:36px 0 14px;text-transform:none;letter-spacing:-.01em}
.article h3{font-size:1.25rem;margin:28px 0 10px;text-transform:none;letter-spacing:0}
.article p{margin:0 0 18px;color:var(--ink-2)}
.article ul,.article ol{margin:0 0 18px 1.2em;color:var(--ink-2)}
.article li{margin:6px 0}
.article blockquote{margin:28px 0;padding:18px 26px;border-left:3px solid var(--accent);background:var(--deep-2);border-radius:0 10px 10px 0;font-size:1.15rem;color:var(--ink);font-style:italic}
.article figure{margin:28px 0}
.article figure .ph{min-height:300px}
.article figcaption{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);margin-top:8px;text-align:center}
.article a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.article hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.post-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.9rem;margin-bottom:8px}
.post-back:hover{color:var(--accent)}

/* ---- Nav dropdown: Technology & Tools ---- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop > a .caret{display:inline-block;margin-left:6px;font-size:.62em;transition:transform .2s;vertical-align:middle}
.nav-drop:hover > a .caret,.nav-drop:focus-within > a .caret{transform:rotate(180deg)}
.drop{
  position:absolute;
  top: calc(100% + 0px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:340px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:2px;
  box-shadow:0 30px 60px -24px #000;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:60;
}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:8px;transition:background .2s}
.drop a:hover{background:rgba(255,255,255,.06)}
.drop .dt{display:block;font-family:var(--font-cond);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);font-size:.92rem}
.drop .dd{display:block;color:var(--muted);font-size:.82rem;margin-top:2px;text-transform:none;letter-spacing:0}

/* Dropdown on mobile: expand inline within the slide-down panel */
@media(max-width:720px){
  .nav-drop{display:block}
  .nav-drop > a .caret{display:none}
  .drop{position:static;transform:none;opacity:1;pointer-events:auto;min-width:0;border:none;background:transparent;box-shadow:none;padding:0 0 4px 14px;display:block}
  .drop a{padding:11px 6px;border-radius:0;border-bottom:1px solid var(--line)}
  .drop .dd{display:none}
}

/* ============================================================
   Subsea-telemetry readout strip — Raptor Technologies signature
   A monospace instrumentation strip beneath the hero: echoes the
   readout language of the real spec sheets. Token-wired; accent
   follows .theme-tech (tech-blue) like every other component.
   ============================================================ */
.readout{
  margin-top:46px;max-width:840px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(15,39,66,.55) 0%,rgba(10,24,48,.35) 100%);
  display:grid;grid-template-columns:repeat(4,1fr);
  font-family:var(--font-mono);
}
.readout .cell{padding:16px 20px;border-left:1px solid var(--line);position:relative}
.readout .cell:first-child{border-left:none}
.readout .rl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.readout .rv{margin-top:9px;font-size:1.18rem;color:var(--ink);line-height:1.12}
.readout .rv small{font-size:.66rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-left:3px}
.readout .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:rdpulse 2.6s ease-out infinite}
@keyframes rdpulse{0%{box-shadow:0 0 0 0 rgba(224,63,16,.55)}70%{box-shadow:0 0 0 7px rgba(224,63,16,0)}100%{box-shadow:0 0 0 0 rgba(224,63,16,0)}}
@media(max-width:720px){
  .readout{grid-template-columns:repeat(2,1fr);max-width:none}
  .readout .cell:nth-child(3){border-left:none}
  .readout .cell:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){.readout .dot{animation:none}}

/* ============================================================
   Development-pathway scroll instrument (page: development-pathway)
   Sibling to Anchoring's operating-depths dive, recast as an
   ascent through engineering readiness. Accent follows .theme-tech.
   ============================================================ */
.pw-scroll{position:relative;height:600vh;background:var(--abyss)}
/* Instrument sits a fixed distance from the top of the sticky stage rather than
   centred — centring left a gap that grew with screen height, reading as dead
   space between the hero and the pathway. Trace and hint stay bottom-anchored. */
.pw-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-start;
  padding-top:calc(var(--head-h,148px) + clamp(16px,3vh,44px))}
.pw-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pw-glow{position:absolute;inset:0;opacity:.35;transition:opacity .25s;
  background:radial-gradient(760px 520px at 70% 38%,rgba(224,63,16,.22),transparent 70%)}
.pw-trace{position:absolute;left:0;right:0;bottom:14vh;width:100%;height:180px;overflow:visible}
.pw-trace .base{stroke:var(--line);stroke-width:1;fill:none}
.pw-trace .plot{stroke:var(--accent);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 6px rgba(224,63,16,.55))}
.pw-trace .dot{fill:var(--accent);filter:drop-shadow(0 0 8px rgba(224,63,16,.9))}
.pw-trace .area{fill:url(#pwArea)}
.pw-inner{position:relative;z-index:3;display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:center;width:100%}
.pw-instrument{position:relative}
.pw-hud{font-family:var(--font-mono);margin-bottom:30px}
.pw-hud .k{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.pw-stageno{font-family:var(--font-display);font-weight:800;font-size:3.4rem;color:var(--ink);line-height:1;margin:6px 0 2px}
.pw-stageno i{font-style:normal;font-family:var(--font-mono);font-size:1rem;color:var(--muted);margin-left:4px}
.pw-metric{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.pw-metric .mk{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pw-metric .mv{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--accent-soft)}
.pw-metric .mv small{font-size:.8rem;color:var(--muted);margin-left:1px}
.pw-bar{margin-top:10px;height:5px;border-radius:3px;background:rgba(120,160,200,.16);overflow:hidden}
.pw-bar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-soft));border-radius:3px;transition:width .08s linear}
.pw-ticks{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.pw-tick{position:relative;display:flex;align-items:center;gap:12px;padding:11px 0 11px 22px;color:var(--muted);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.03em;transition:color .25s}
.pw-tick::before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;
  background:var(--abyss);border:1px solid var(--line-strong);transition:all .25s}
.pw-tick .pw-tno{font-size:.68rem;color:var(--muted-d)}
.pw-tick.on{color:var(--ink)}
.pw-tick.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(224,63,16,.18)}
.pw-tick.done::before{background:var(--accent-soft);border-color:var(--accent-soft)}
.pw-tick.on .pw-tno{color:var(--accent)}
.pw-stations{position:relative;min-height:340px}
.pw-station{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;max-width:560px;
  opacity:0;pointer-events:none;will-change:opacity,transform}
.pw-chip{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-strong);border-radius:999px;padding:5px 14px;margin-bottom:20px}
.pw-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.04;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.01em;margin:0 0 16px}
.pw-body{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-2);max-width:46ch;margin:0}
.pw-ic{position:absolute;right:0;top:8px;width:120px;height:120px;color:var(--accent);opacity:.18}
/* Wide screens have 224px of empty column to the right of the 560px text
   block, so enlarge the station icon and centre it against the copy. The
   offset places it entirely outside the text box, so it can never sit over a
   title however long that title runs. Narrower screens keep the small
   top-right icon, where there is no room to do this without collisions. */
@media(min-width:1100px){
  .pw-ic{left:93%;right:auto;top:50%;transform:translateY(-50%);
    width:clamp(140px,13vw,190px);height:clamp(140px,13vw,190px)}
}
.pw-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;font-family:var(--font-mono);
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);transition:opacity .3s;text-align:center}
.pw-hint .arrow{display:block;margin:8px auto 0;width:18px;height:18px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);animation:pwbob 1.6s ease-in-out infinite}
@keyframes pwbob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}
/* Home teaser card linking to the pathway page */
.pw-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%)}
.pw-teaser .tx{padding:clamp(28px,4vw,44px)}
.pw-teaser .tx h3{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.pw-teaser .viz{position:relative;background:linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%);border-left:1px solid var(--line);min-height:240px;overflow:hidden}
.pw-teaser .viz svg{position:absolute;inset:0;width:100%;height:100%}
.pw-teaser .viz .plot{stroke:var(--accent);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 6px rgba(224,63,16,.5))}
.pw-teaser .viz .base{stroke:var(--line);stroke-width:1;fill:none}
.pw-teaser .viz .cap{position:absolute;left:18px;top:16px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pw-teaser .viz .val{position:absolute;right:18px;bottom:14px;font-family:var(--font-display);font-weight:800;color:var(--accent-soft);font-size:1.4rem}
@media(max-width:820px){
  .pw-inner{grid-template-columns:1fr;gap:26px}
  .pw-ticks{display:none}
  .pw-stations{min-height:300px}
  .pw-ic{width:80px;height:80px}
  .pw-teaser{grid-template-columns:1fr}
  .pw-teaser .viz{border-left:none;border-top:1px solid var(--line);min-height:180px}
}
@media(prefers-reduced-motion:reduce){.pw-hint .arrow{animation:none}}

/* ============================================================
   Hero background photography + parallax product cutouts
   ============================================================ */
/* Photo sits behind the hero; the orange→navy gradient becomes an overlay
   that tints it and keeps the headline legible on the left. */
.hero--photo .hero-bg::before{display:none}
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:62% 42%}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,13,24,.9) 0%,rgba(6,13,24,.5) 40%,rgba(6,13,24,.08) 72%,transparent 100%),
    radial-gradient(1000px 600px at 82% -6%,rgba(224,63,16,.36),transparent 56%),
    linear-gradient(180deg,rgba(6,13,24,.28) 0%,rgba(6,13,24,.5) 68%,var(--abyss) 100%);
}
.hero--photo .hero-grid{opacity:.22}
.phero.hero--photo{overflow:hidden}
.phero .hero-photo::after{
  background:
    linear-gradient(90deg,rgba(6,13,24,.86) 0%,rgba(6,13,24,.42) 46%,rgba(6,13,24,.1) 78%,transparent 100%),
    radial-gradient(900px 520px at 84% -10%,rgba(224,63,16,.32),transparent 56%),
    linear-gradient(180deg,rgba(6,13,24,.3) 0%,rgba(6,13,24,.55) 70%,var(--abyss) 100%);
}

/* Parallax floating product cutouts */
.pfloat{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
.pfloat img{width:118%;max-width:none;filter:drop-shadow(0 34px 60px rgba(0,0,0,.6))}
.parallax{will-change:transform;transition:transform .05s linear}
@media(max-width:820px){.pfloat img{width:100%}.pfloat{min-height:260px}}
@media(prefers-reduced-motion:reduce){.parallax{transform:none !important}}

/* Neutral spec footnote (vs the default cyan .note) — used on spec pages */
.note--fn{color:var(--muted)}

/* Home "who we are": give the product image more room + size, centred against
   the full heading+body block. Mobile guard must follow the 980px breakpoint. */
.split--viz{grid-template-columns:.85fr 1.15fr}
.pfloat--lg img{width:128%}
@media(max-width:980px){.split--viz{grid-template-columns:1fr}.pfloat--lg img{width:100%}}

/* Home "collaboration" section: faint underwater image fading in on the right
   to balance the lighter enquiries list, plus airier list spacing. */
.section--collab{position:relative;overflow:hidden}
.section--collab > .wrap{position:relative;z-index:1}
.collab-viz{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;pointer-events:none;
  background:url(/assets/img/hero-underwater.jpg) no-repeat right center;background-size:cover;opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 74%);mask-image:linear-gradient(90deg,transparent 0%,#000 74%)}
.flist--airy{gap:24px}
.flist--airy li{padding-left:28px}
@media(max-width:980px){.collab-viz{display:none}}

/* ---- Accordion (Home "Our approach") — differentiates from the card grids ---- */
.accordion{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;display:flex;align-items:center;gap:18px;background:none;border:0;cursor:pointer;
  padding:24px 8px;text-align:left;color:var(--ink);transition:color .2s}
.acc-head:hover{color:var(--accent)}
.acc-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.acc-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 var(--accent);transition:box-shadow .3s}
.acc-item.is-open .acc-dot{box-shadow:0 0 0 4px rgba(224,63,16,.18)}
.acc-title{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.05rem,1.8vw,1.35rem);color:inherit;flex:1;margin:0}
.acc-ico{position:relative;width:16px;height:16px;flex:none}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:transform .3s,opacity .3s}
.acc-ico::before{top:7px;left:0;width:16px;height:2px}
.acc-ico::after{left:7px;top:0;width:2px;height:16px}
.acc-item.is-open .acc-ico::after{transform:scaleY(0)}
.acc-panel{overflow:hidden;max-height:0;transition:max-height .38s cubic-bezier(.2,.7,.2,1)}
.acc-item.is-open .acc-panel{max-height:240px}
.acc-inner{padding:0 8px 26px 45px;color:var(--ink-2);font-size:1.02rem;max-width:70ch}
.acc-inner p{max-width:none}
@media(prefers-reduced-motion:reduce){.acc-panel{transition:none}}

/* Collaboration split: wider copy column, narrower enquiries list sitting further right */
.split--collab{grid-template-columns:1.35fr .65fr}
@media(max-width:980px){.split--collab{grid-template-columns:1fr}}

/* Parallax cutouts intentionally bleed past their column; clip that bleed at the
   section edge so it can't create a horizontal scrollbar. `clip` (not `hidden`)
   avoids making a scroll container, so position:sticky elsewhere still works. */
.section{overflow-x:clip}

/* Header: compact utility strip + proportionate logo on small screens */
@media(max-width:900px){
  .head-row{height:88px}
  .brand img{height:60px}
}
@media(max-width:720px){
  .topbar-row{height:auto;padding:9px 0;font-size:.64rem;letter-spacing:.06em}
  .tb-left{display:none}
  .tb-right{gap:14px;width:100%;justify-content:space-between}
  .head-row{height:80px}
  .brand img{height:52px}
}

/* ============================================================
   Framed product scenes — replaces the floating cutouts.
   Uses the clean full-scene renders (correct decals); the image
   parallaxes gently INSIDE the frame, which clips any overflow.
   ============================================================ */
.pframe{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 60px -30px #000;background:var(--deep);aspect-ratio:4/3}
.pframe img{position:absolute;top:-12%;left:0;width:100%;height:124%;object-fit:cover;display:block}
/* White-background product plate (e.g. the load test frame studio shot) */
.pframe--light{background:#eff3f7}
.pframe--light img{object-fit:contain;top:0;height:100%;padding:6%}
@media(max-width:820px){.pframe{aspect-ratio:16/10}}

/* Transparent product cutout (e.g. the AROV 2 render). The subject carries its
   own silhouette, so a bordered plate would fight the shape: no frame, no crop,
   no fixed ratio. Declared after the 820px rule above so it keeps its natural
   height on small screens too. */
.pframe--cutout{background:none;border:0;box-shadow:none;overflow:visible;aspect-ratio:auto}
.pframe--cutout img{position:static;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.5))}
@media(max-width:820px){.pframe--cutout{aspect-ratio:auto}}

/* ---- Home pathway teaser: animated readiness instrument ----
   Replaces the old stretched line chart. Uniform scaling (no
   preserveAspectRatio="none") so the curve isn't squashed. */
.pw-teaser .viz{min-height:300px}
.tviz{position:absolute;inset:0;width:100%;height:100%}
.tv-grid line{stroke:rgba(120,160,200,.10);stroke-width:1}
.tv-base{fill:none;stroke:rgba(120,160,200,.20);stroke-width:1.5;stroke-dasharray:3 5}
.tv-area{fill:url(#tvArea)}
.tv-plot{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(224,63,16,.5))}
.tv-dot{fill:var(--abyss);stroke:var(--line-strong);stroke-width:1.5;transition:fill .25s,stroke .25s}
.tv-dot.on{fill:var(--accent);stroke:var(--accent)}
.tv-head{fill:var(--accent);filter:drop-shadow(0 0 9px rgba(224,63,16,.95))}
.pw-teaser .viz .val{font-variant-numeric:tabular-nums}

/* ---- Sticky stacking cards (About "what sets us apart") ----
   Each differentiator is a full-width row; they pile up under the
   sticky header as you scroll. Offsets clear the ~146px header. */
.stack{padding-bottom:8vh}
.stack-card{
  position:sticky;
  display:grid;grid-template-columns:96px 1fr;gap:30px;align-items:center;
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--deep-2) 100%);
  border:1px solid var(--line-strong);border-radius:var(--r);
  padding:40px 46px;min-height:210px;margin-bottom:90px;
  box-shadow:0 -22px 50px -26px rgba(0,0,0,.7);overflow:hidden;
}
.stack-card:last-child{margin-bottom:0}
.stack-card{transition:border-color .3s,box-shadow .3s}
.stack-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:70px;
  background:var(--accent);border-radius:0 0 4px 0;transition:width .35s;z-index:1}
.stack-card:hover::before{width:100%}
.stack-card:hover{border-color:var(--line-strong);box-shadow:0 -22px 50px -26px rgba(0,0,0,.7),0 26px 54px -30px #000}
.stack-card:nth-child(1){top:162px;z-index:1}
.stack-card:nth-child(2){top:190px;z-index:2}
.stack-card:nth-child(3){top:218px;z-index:3}
.sc-ic{width:72px;height:72px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:14px;background:rgba(224,63,16,.06)}
.sc-ic svg{width:38px;height:38px;color:var(--accent)}
.stack-card h3{font-size:clamp(1.3rem,2.2vw,1.7rem);text-transform:none;letter-spacing:0;margin-bottom:8px;color:var(--ink)}
.stack-card p{color:var(--ink-2);font-size:1.02rem;max-width:70ch;margin:0}
@media(max-width:720px){
  .stack{gap:22px}
  .stack-card{grid-template-columns:1fr;gap:16px;padding:28px 24px;min-height:0}
  .stack-card:nth-child(1){top:132px}
  .stack-card:nth-child(2){top:150px}
  .stack-card:nth-child(3){top:168px}
  .sc-ic{width:56px;height:56px}.sc-ic svg{width:30px;height:30px}
}

/* The stacking-cards section has no parallax bleed, so it can opt out of the
   global .section overflow clip — a clipped ancestor would break position:sticky. */
.section--stack{overflow:visible}

/* ---- Full-section background image with readable text overlay (About / Leask Group) ---- */
.section--bgimage{position:relative;overflow:clip;
  border-block:1px solid var(--line);min-height:560px;display:flex;align-items:center}
/* Oversized image layer (extra top/bottom) so it can parallax within the clip */
.bgi-img{position:absolute;left:0;top:-26%;width:100%;height:152%;z-index:0;
  object-fit:cover;object-position:left center;will-change:transform}
.section--bgimage::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(760px 520px at 88% 18%,rgba(224,63,16,.16),transparent 68%),
    linear-gradient(90deg,rgba(6,13,24,.30) 0%,rgba(6,13,24,.58) 38%,rgba(6,13,24,.9) 64%,rgba(6,13,24,.97) 100%);
}
.section--bgimage > .wrap{position:relative;z-index:2;width:100%}
.bgi-content{max-width:48%;margin-left:auto}
/* Full-width variant: content fills both columns, so darken the image evenly
   (rather than the side-gradient) so text stays readable across the section. */
.section--bgimage--full{align-items:stretch}
.section--bgimage--full .bgi-img{object-position:center}
.section--bgimage--full::before{
  background:
    radial-gradient(1100px 620px at 50% -8%,rgba(224,63,16,.10),transparent 66%),
    linear-gradient(180deg,rgba(6,13,24,.82) 0%,rgba(6,13,24,.88) 45%,rgba(6,13,24,.93) 100%);
}
@media(max-width:900px){
  .section--bgimage{min-height:0}
  .bgi-img{object-position:center}
  .section--bgimage::before{background:linear-gradient(180deg,rgba(6,13,24,.5) 0%,rgba(6,13,24,.82) 55%,rgba(6,13,24,.94) 100%)}
  .bgi-content{max-width:100%;margin-left:0}
}

/* ---- Equipment manifest (Scout: one panel instead of many small cards) ---- */
.manifest{list-style:none;margin:0;padding:4px 26px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line);border-radius:var(--r)}
.manifest li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.manifest li:last-child{border-bottom:0}
.mf-num{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;color:var(--accent)}
.mf-body h4{font-size:1.08rem;text-transform:none;letter-spacing:0;margin:0 0 4px;color:var(--ink)}
.mf-body p{margin:0;color:var(--ink-2);font-size:.95rem;max-width:none}
@media(max-width:520px){.manifest{padding:4px 18px}.manifest li{gap:16px}}

/* ---- Download cards (SDR documents & downloads) ---- */
.dl-card{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;color:var(--ink);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.dl-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 22px 46px -28px #000}
.dl-ic{width:46px;height:46px;flex:none;color:var(--accent)}
.dl-body h4{font-size:1.12rem;text-transform:none;letter-spacing:0;margin:0 0 4px}
.dl-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dl-arrow{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);transition:background .25s,transform .25s}
.dl-arrow svg{width:20px;height:20px}
.dl-card:hover .dl-arrow{background:rgba(224,63,16,.12);transform:translateY(3px)}

/* Make a framed image stretch to the full height of its split row (matches
   the text column). Falls back to a normal aspect ratio when stacked. */
.media--fill{align-self:stretch;display:flex}
.media--fill .pframe{aspect-ratio:auto;height:100%;width:100%}
@media(max-width:980px){
  .media--fill{display:block}
  .media--fill .pframe{aspect-ratio:16/10;height:auto}
}

/* ---- USP cards (SDR "why the SDR") — icon draws itself in on scroll ---- */
.usp-card{display:flex;flex-direction:column}
.usp-card .ic{margin-bottom:16px;transition:transform .35s}
.usp-card h4{font-size:1.22rem;color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:8px}
.usp-card p{color:var(--ink-2);font-size:.98rem;margin:0;max-width:none}
.usp-ic *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) .12s}
.usp-card.in .usp-ic *{stroke-dashoffset:0}
.usp-card:hover .usp-ic{transform:scale(1.08) rotate(-2deg)}
@media(prefers-reduced-motion:reduce){.usp-ic *{stroke-dashoffset:0;transition:none}}
header.site-head * {transition: all .3s linear !important;}

/* The blanket rule above also lands on the nav dropdown, which turns
   `transition: all` on. pointer-events is a discrete property, so it flips
   halfway through the 0.3s rather than immediately, and the panel is still
   sliding up to close the 8px gap. Move the pointer from the nav item toward
   the menu in that window and the hover is lost, the panel starts closing,
   the pointer then re-enters it and it reopens: the flicker. Restoring the
   original targeted transition fixes it. */
.site-head .drop{transition:opacity .2s,transform .2s!important}


@media screen and (min-width:1261px){
  body.defscroll .topbar{transform: translateY(-100%);position: absolute;}
  body.defscroll .site-head{background:transparent;}
}
@media screen and (max-width:767px){
  .xs-hide,header.site-head .topbar{display:none!important;}
}
/* Topbar is hidden above, so the sticky header is shorter here. */
@media(max-width:767px){:root{--head-h:81px}}
@media screen and (max-width:720px){
  .nav-drop:hover .drop, .nav-drop:focus-within .drop{transform:none!important;left:0;right:0;margin:0 auto;}
}

@media screen and (max-width:370px){
  .h-xl{font-size:9cqi;}
}
/* ============================================================
   Projects & news
   ============================================================ */

/* Post hero: same rhythm as .phero but without the SVG/photo backdrop the
   marketing pages use, since a post leads with its own header image below. */
/* Post lead image. A framed band, unlike the marketing pages' .pframe, which
   forces a 4:3 crop and oversizes the image 124% for parallax and so zooms a
   wide photo in badly. 16/10 matches the card thumbnail, and the Scout deck
   image is exactly that ratio, so it shows uncropped. object-fit:cover keeps any
   future author-uploaded image looking consistent whatever its shape. */
.post-lead{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 60px -30px #000;background:var(--deep);margin-bottom:44px}
.post-lead img{width:100%;height:100%;object-fit:cover;display:block}

.phero--post{padding:clamp(64px,8vw,104px) 0 clamp(28px,4vw,44px);
  background:linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%);border-bottom:1px solid var(--line)}

/* Listing cards. Whole card is the link, reusing the .card hover idiom
   (accent bar draw-in, lift) but with a lead image on top. */
.post-grid{gap:26px}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deep-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);position:relative;
  transition:transform .3s,border-color .3s,box-shadow .3s}
.post-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:46px;z-index:2;
  background:var(--accent);border-radius:0 0 3px 0;transition:width .3s}
.post-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 50px -28px #000}
.post-card:hover::before{width:100%}
.post-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pc-media{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--deep)}
.pc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.post-card:hover .pc-media img{transform:scale(1.04)}
.pc-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.pc-meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.pc-dot{color:var(--muted-d)}
.pc-title{font-size:1.22rem;line-height:1.22;text-transform:none;letter-spacing:0}
.pc-summary{color:var(--ink-2);font-size:.96rem;line-height:1.5;flex:1}
.pc-go{margin-top:4px;color:var(--accent);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.pc-go .ar{transition:transform .25s}
.post-card:hover .pc-go .ar{transform:translateX(4px)}

/* Article body: prose column plus an optional sticky facts panel. */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:54px;align-items:start}
.prose{max-width:70ch;font-size:1.05rem;line-height:1.72;color:var(--ink-2)}
.prose>p{margin-top:1.2rem}
.prose>p:first-child{margin-top:0}
.prose h2{color:var(--ink);font-size:clamp(1.35rem,2.4vw,1.7rem);margin-top:2.4rem;margin-bottom:.2rem;text-transform:none;letter-spacing:-.01em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);margin:2rem 0 .6rem;display:block}
/* markdown wraps a lone image in <p>; drop its indent so figures sit flush */
.prose p>img:only-child{margin-bottom:0}
.post-layout aside .spec{position:sticky;top:calc(var(--head-h,148px) + 20px)}

@media(max-width:900px){
  .post-layout{grid-template-columns:1fr;gap:40px}
  .post-layout aside .spec{position:static}
  .post-layout aside{order:-1}
}
@media(max-width:640px){
  .pc-body{padding:20px 20px 22px}
}