/* ============================================================
   INSTOPCO — splash (/)
   Dark single scroll. Olive-black field, condensed uppercase display,
   mono earmarks, numbered hairline cards, zero radius, dissolves only.
   Loads after style.css; everything here is prefixed sp- and scoped to
   body.sp-body so the marketing design system's section/paper rules
   don't bleed in.
   ============================================================ */

:root{
  --sp-bg:#0D110D; --sp-bg2:#141A14; --sp-bg3:#1B231B;
  --sp-line:rgba(217,215,210,.14); --sp-line-2:rgba(217,215,210,.28);
  --sp-fg:#D9D7D2; --sp-fg2:#B3AFA6; --sp-fg3:#8A8680;
  --sp-amber:#F5A524; --sp-amber-hi:#FFC861; --sp-cyan:#22D3EE; --sp-lime:#A3E635;
  --sp-paper:#F4EFDF; --sp-ink:#10120C; --sp-ink-2:#4A5236; --sp-amber-ink:#B97A14;
  --sp-disp:'Barlow Condensed',sans-serif;
  --sp-sans:'Barlow',system-ui,sans-serif;
  --sp-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sp-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- base ---------- */
html.sp{ background:var(--sp-bg); color:var(--sp-fg); scroll-behavior:smooth }
body.sp-body{ margin:0; font:400 18px/1.6 var(--sp-sans); background:var(--sp-bg); color:var(--sp-fg); -webkit-font-smoothing:antialiased }
body.sp-body p{ color:inherit; font-family:inherit; font-size:inherit; line-height:inherit; margin:0 0 20px }   /* style.css paints every p olive for paper; the splash inherits instead */
body.sp-body section.sp-section{ padding:clamp(72px,10vw,140px) 0; border-top:1px solid var(--sp-line); background:var(--sp-bg); position:relative }
body.sp-body section.sp-section--raised{ background:var(--sp-bg2) }
body.sp-body section.sp-section--paper{ background:var(--sp-paper); color:var(--sp-ink); border-top:0 }
body.sp-body section.sp-hero{ padding:0; border-top:0; background:var(--sp-bg) }
.sp-wrap{ width:min(1280px,calc(100% - 48px)); margin:0 auto }
.sp-wrap--narrow{ width:min(880px,calc(100% - 48px)) }
.sp-body a{ color:inherit; text-decoration:none }
.sp-body ::selection{ background:var(--sp-amber); color:var(--sp-ink) }

/* ---------- type ---------- */
.sp-ear{ display:block; font:500 12px/1 var(--sp-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--sp-fg2); margin:0 0 18px }
.sp-ear::before{ content:'// ' }
.sp-section--paper .sp-ear{ color:var(--sp-ink-2) }
.sp-h1{ font:700 clamp(56px,9vw,136px)/.92 var(--sp-disp); text-transform:uppercase; letter-spacing:.01em; margin:16px 0; color:#fff }
.sp-h1 em{ font-style:normal; color:var(--sp-amber) }
.sp-h2{ font:700 clamp(40px,6vw,88px)/.95 var(--sp-disp); text-transform:uppercase; letter-spacing:.01em; margin:0 0 24px; color:#fff; max-width:18ch }
.sp-h2 em{ font-style:normal; color:var(--sp-amber) }
.sp-section--paper .sp-h2{ color:var(--sp-ink) }
.sp-h3{ font:700 clamp(26px,3vw,40px)/1 var(--sp-disp); text-transform:uppercase; letter-spacing:.01em; margin:0 0 12px; color:#fff }
.sp-lead{ font:400 clamp(20px,2.2vw,26px)/1.4 var(--sp-sans); color:var(--sp-fg); max-width:34ch; margin:0 0 28px }
.sp-copy{ max-width:64ch; color:var(--sp-fg) }
.sp-copy p{ margin:0 0 20px }
.sp-copy p:last-child{ margin-bottom:0 }
.sp-copy em{ font-style:italic; color:#fff }
.sp-copy strong{ font-weight:600; color:#fff }
.sp-mono{ font:500 13px/1.6 var(--sp-mono); letter-spacing:.06em; color:var(--sp-fg2) }
.sp-link{ display:inline-block; font:600 15px/1 var(--sp-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--sp-amber); border-bottom:1px solid rgba(245,165,36,.4); padding-bottom:6px; transition:color .2s,border-color .2s }
.sp-link:hover{ color:var(--sp-amber-hi); border-bottom-color:var(--sp-amber-hi) }
.sp-link--ext::after{ content:' ↗' }
.sp-two{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start; margin-bottom:56px }

/* ---------- buttons ---------- */
.sp-btn{ display:inline-flex; align-items:center; gap:10px; font:600 13px/1 var(--sp-mono); letter-spacing:.14em; text-transform:uppercase; padding:14px 20px; border:1px solid var(--sp-line-2); color:var(--sp-fg); background:transparent; cursor:pointer; border-radius:0; transition:background .2s,color .2s,border-color .2s }
.sp-btn:hover{ border-color:var(--sp-fg); color:#fff }
.sp-btn--amber{ background:var(--sp-amber); border-color:var(--sp-amber); color:var(--sp-ink) }
.sp-btn--amber:hover{ background:var(--sp-amber-hi); border-color:var(--sp-amber-hi); color:var(--sp-ink) }
.sp-btn--sm{ padding:10px 14px; font-size:11px }

/* ---------- chrome ---------- */
.sp-nav{ position:sticky; top:0; z-index:50; height:56px; background:rgba(13,17,13,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--sp-line) }
.sp-nav .sp-wrap{ height:100%; display:flex; align-items:center; gap:24px }
.sp-nav-brand{ display:flex; align-items:center; gap:12px; margin-right:auto }
.sp-nav-brand img{ height:20px; width:auto; display:block }
.sp-nav-brand span{ font:500 11px/1 var(--sp-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sp-fg3) }
.sp-nav-links{ display:flex; gap:26px; margin:0; padding:0; list-style:none }
.sp-nav-links a{ font:500 12px/1 var(--sp-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sp-fg2); padding:6px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s }
.sp-nav-links a:hover{ color:#fff; border-bottom-color:var(--sp-amber) }
.sp-nav-right{ display:flex; align-items:center; gap:14px }
.sp-nav-ext{ font:500 12px/1 var(--sp-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sp-cyan); padding:6px 0; border-bottom:1px solid transparent }
.sp-nav-ext:hover{ border-bottom-color:var(--sp-cyan) }
.sp-nav-burger{ display:none; width:40px; height:40px; border:1px solid var(--sp-line-2); background:transparent; color:var(--sp-fg); font:400 18px/1 var(--sp-mono); cursor:pointer; border-radius:0 }
.sp-nav-sheet{ display:none; position:fixed; top:56px; left:0; right:0; background:var(--sp-bg); border-bottom:1px solid var(--sp-line); z-index:49; padding:8px 24px 16px }
.sp-nav-sheet.is-open{ display:block }
.sp-nav-sheet a{ display:block; font:500 14px/1 var(--sp-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sp-fg); padding:16px 0; border-bottom:1px solid var(--sp-line) }

/* ---------- hero ---------- */
.sp-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate }
.sp-hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.sp-hero-grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(13,17,13,.78) 0%,rgba(13,17,13,.42) 32%,rgba(13,17,13,0) 58%),linear-gradient(0deg,rgba(13,17,13,.88) 0%,rgba(13,17,13,.12) 38%,rgba(13,17,13,0) 55%),linear-gradient(180deg,rgba(13,17,13,.45) 0%,rgba(13,17,13,0) 18%) }
.sp-hero-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 30% 40%,rgba(245,165,36,.10) 0%,transparent 55%),radial-gradient(ellipse at 70% 65%,rgba(34,211,238,.06) 0%,transparent 60%) }
.sp-hero::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.08; mix-blend-mode:overlay; background-image:var(--sp-grain); background-size:240px 240px }
.sp-hero-copy{ position:relative; z-index:3; padding:140px 0 96px }
.sp-hero-copy .sp-ear{ color:var(--sp-fg) ; opacity:.8 }
.sp-hero-live{ position:absolute; left:0; right:0; bottom:0; z-index:3; border-top:1px solid var(--sp-line) }
.sp-hero-live .sp-wrap{ display:flex; align-items:center; gap:12px; height:40px; font:500 11px/1 var(--sp-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sp-fg2) }
.sp-hero-live .pip{ width:8px; height:8px; background:var(--sp-cyan); box-shadow:0 0 10px var(--sp-cyan); animation:sp-pip 2.2s ease-in-out infinite }
@keyframes sp-pip{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.treated{ filter:saturate(.35) contrast(1.08) brightness(.72) }

/* ---------- statement (paper) ---------- */
.sp-stmt{ font:500 clamp(28px,4vw,56px)/1.15 var(--sp-disp); color:var(--sp-ink); max-width:26ch; margin:0 0 32px; letter-spacing:.005em }
.sp-stmt .hi{ font-style:normal; color:var(--sp-amber-ink) }
.sp-stmt strong{ font-weight:700 }
.sp-stmt-sub{ font:500 13px/1.8 var(--sp-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sp-ink-2); margin:0 }

/* ---------- fabric rows ---------- */
.sp-rows{ border-bottom:1px solid var(--sp-line); margin-top:16px }
.sp-row{ border-top:1px solid var(--sp-line) }
.sp-row-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:28px; padding:36px 0; cursor:pointer; background:none; border:0; color:inherit; width:100%; text-align:left; font:inherit; border-radius:0 }
.sp-row-head:focus-visible{ outline:1px solid var(--sp-amber); outline-offset:8px }
.sp-row-idx{ font:500 13px/1 var(--sp-mono); letter-spacing:.2em; color:var(--sp-fg3); min-width:3.5em }
.sp-row[data-row="federate"] .sp-row-idx{ color:var(--sp-amber) }
.sp-row[data-row="decide"] .sp-row-idx{ color:var(--sp-cyan) }
.sp-row[data-row="orchestrate"] .sp-row-idx{ color:var(--sp-lime) }
.sp-row[data-row="sovereign"] .sp-row-idx{ color:var(--sp-amber-hi) }
.sp-row-title{ font:700 clamp(40px,6.4vw,92px)/.95 var(--sp-disp); text-transform:uppercase; letter-spacing:.01em; color:var(--sp-fg); transition:color .25s }
.sp-row:hover .sp-row-title, .sp-row.is-open .sp-row-title{ color:#fff }
.sp-row-sub{ font:400 clamp(15px,1.4vw,19px)/1.4 var(--sp-sans); color:var(--sp-fg); text-align:right; max-width:28ch; justify-self:end }
.sp-row-sub strong{ font-weight:600; color:var(--sp-fg) }
.sp-row-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease }
.sp-row.is-open .sp-row-body{ grid-template-rows:1fr }
.sp-row-body > div{ overflow:hidden }
.sp-row-inner{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; padding:0 0 44px; align-items:start }
.sp-row-inner .sp-copy{ max-width:56ch }
.sp-row-lede{ font:600 clamp(20px,2vw,26px)/1.3 var(--sp-sans); color:#fff; margin:0 0 14px }
.sp-row-still{ position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--sp-line); background:var(--sp-bg2) }
.sp-row-still img{ width:100%; height:100%; object-fit:cover; display:block }
.sp-row-still::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:overlay; background-image:var(--sp-grain); background-size:240px 240px }
.sp-row-still span{ position:absolute; left:14px; bottom:12px; font:500 11px/1 var(--sp-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sp-fg2); background:rgba(13,17,13,.7); padding:6px 8px }

/* ---------- hairline cards ---------- */
.sp-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.sp-cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.sp-cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.sp-card{ border:1px solid var(--sp-line); padding:28px 26px 30px; background:rgba(20,26,20,.5); min-width:0 }
.sp-card--wide{ grid-column:1 / -1 }
.sp-card-num{ display:block; font:500 12px/1 var(--sp-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sp-fg3); margin-bottom:18px }
.sp-card-num::before{ content:'// ' }
.sp-card:nth-child(3n+1) .sp-card-num{ color:var(--sp-amber) }
.sp-card:nth-child(3n+2) .sp-card-num{ color:var(--sp-cyan) }
.sp-card:nth-child(3n+3) .sp-card-num{ color:var(--sp-lime) }
.sp-card h4{ font:700 clamp(22px,2.2vw,30px)/1.05 var(--sp-disp); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 12px }
.sp-card p{ margin:0; font-size:16px; line-height:1.6; color:var(--sp-fg) }
.sp-card p:last-child{ margin-bottom:0 }
.sp-card p em{ font-style:italic; color:#fff }
.sp-card p strong{ color:#fff; font-weight:600 }

/* ---------- tiles (what we forge) ---------- */
.sp-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:40px 0 56px }
.sp-tile{ position:relative; display:block; overflow:hidden; aspect-ratio:4/3; background:var(--sp-bg2); border:1px solid var(--sp-line); cursor:pointer; isolation:isolate; padding:0; color:inherit; font:inherit; text-align:left; border-radius:0 }
.sp-tile--wide{ grid-column:1 / -1; aspect-ratio:16/7 }
.sp-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease, filter .4s ease }
.sp-tile:hover img, .sp-tile:focus-visible img{ transform:scale(1.03); filter:saturate(.35) contrast(1.08) brightness(.86) }
.sp-tile::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(13,17,13,.9) 0%,rgba(13,17,13,.25) 40%,rgba(13,17,13,0) 65%); pointer-events:none }
.sp-tile::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12; mix-blend-mode:overlay; background-image:var(--sp-grain); background-size:240px 240px }
.sp-tile-cap{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:6px }
.sp-tile-label{ font:600 clamp(17px,1.5vw,21px)/1.15 var(--sp-sans); color:#fff }
.sp-tile-sub{ font:500 11px/1 var(--sp-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sp-fg2) }
.sp-tile-sub b{ font-weight:500; color:var(--sp-amber) }
.sp-tile:focus-visible{ outline:1px solid var(--sp-amber); outline-offset:3px }
/* ---------- image viewer (full-res originals, opaque field) ---------- */
.sp-lightbox{ position:fixed; inset:0; z-index:80; background:var(--sp-bg); display:flex; align-items:center; justify-content:center; padding:56px 72px }
.sp-lightbox[hidden]{ display:none }
.sp-lightbox figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px }
.sp-lightbox img{ max-width:min(1600px,100%); max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain; border:1px solid var(--sp-line) }
.sp-lightbox figcaption{ margin:0 }
.sp-lightbox-exit{ position:absolute; top:14px; right:16px; font:500 12px/1 var(--sp-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sp-fg); background:rgba(13,17,13,.85); border:1px solid var(--sp-line-2); padding:10px 12px; cursor:pointer; border-radius:0 }
.sp-lightbox-exit:hover{ color:#fff; border-color:var(--sp-amber) }
.sp-lightbox-prev, .sp-lightbox-next{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:64px; font:300 40px/1 var(--sp-sans); color:var(--sp-fg2); background:transparent; border:1px solid var(--sp-line); cursor:pointer; border-radius:0 }
.sp-lightbox-prev:hover, .sp-lightbox-next:hover{ color:#fff; border-color:var(--sp-fg) }
.sp-lightbox-prev{ left:12px } .sp-lightbox-next{ right:12px }
@media (max-width:800px){ .sp-lightbox{ padding:56px 12px } .sp-lightbox-prev, .sp-lightbox-next{ display:none } }

/* ---------- stats ---------- */
.sp-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 40px }
.sp-stat{ border:1px solid var(--sp-line); padding:22px 24px; background:rgba(20,26,20,.5) }
.sp-stat b{ display:block; font:700 clamp(40px,4.5vw,64px)/1 var(--sp-disp); color:#fff }
.sp-stat span{ display:block; margin-top:10px; font:500 11px/1.5 var(--sp-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sp-fg2) }
.sp-stat--live b{ color:var(--sp-lime) }
.sp-stat--partial b{ color:var(--sp-amber) }
.sp-stat--substrate b{ color:var(--sp-cyan) }
.sp-note{ font-size:17px; line-height:1.6; color:var(--sp-fg); max-width:80ch; margin:32px 0 0 }
.sp-note em{ font-style:italic; color:var(--sp-fg) }
.sp-actions{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; margin-top:36px }

/* ---------- columns (market + shop) ---------- */
.sp-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px }
.sp-list{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px }
.sp-list li{ font:500 13px/1.5 var(--sp-mono); letter-spacing:.08em; color:var(--sp-fg); padding-left:18px; position:relative }
.sp-list li::before{ content:'◆'; position:absolute; left:0; top:0; font-size:9px; color:var(--sp-amber); line-height:2.3 }

/* ---------- the door ---------- */
.sp-door{ position:relative; display:block; overflow:hidden; aspect-ratio:21/9; border:1px solid var(--sp-line); isolation:isolate; background:var(--sp-bg2) }
.sp-door img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.6s ease }
.sp-door:hover img{ transform:scale(1.02) }
.sp-door::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(13,17,13,.9) 0%,rgba(13,17,13,.55) 40%,rgba(13,17,13,.1) 75%),linear-gradient(0deg,rgba(13,17,13,.7) 0%,rgba(13,17,13,0) 40%) }
.sp-door::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12; mix-blend-mode:overlay; background-image:var(--sp-grain); background-size:240px 240px }
.sp-door-copy{ position:absolute; left:clamp(24px,5vw,72px); bottom:clamp(24px,5vw,64px); right:24px; z-index:2 }
.sp-door-copy .sp-h2{ margin:0 0 12px }
.sp-door-copy .sp-h2 span{ color:var(--sp-amber) }
.sp-door-sub{ font:400 clamp(15px,1.4vw,18px)/1.5 var(--sp-sans); color:var(--sp-fg); max-width:48ch; margin:0 }
.sp-door-lamp{ position:absolute; top:18px; right:18px; z-index:2; width:8px; height:8px; background:#EF4444; box-shadow:0 0 14px 3px rgba(239,68,68,.55); animation:sp-pip 1.6s ease-in-out infinite }

/* ---------- engage: in-page section + drawer ---------- */
.sp-engage-inner{ max-width:720px }
.sp-engage-head{ margin-bottom:28px }
.sp-engage-head .sp-h3{ margin-bottom:8px }
.sp-engage-head p{ margin:0; color:var(--sp-fg) }
.sp-body .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:0 }
.sp-body .contact-form .field{ display:flex; flex-direction:column; gap:6px }
.sp-body .contact-form .field.full{ grid-column:span 2 }
.sp-body .contact-form .field label{ font:500 11px/1 var(--sp-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sp-fg2) }
.sp-body .contact-form .field input, .sp-body .contact-form .field textarea, .sp-body .contact-form .field select{ font:400 16px/1.4 var(--sp-sans); color:#fff; background:var(--sp-bg2); border:1px solid var(--sp-line-2); padding:12px 14px; border-radius:0; outline:0; width:100%; box-sizing:border-box; transition:border-color .2s }
.sp-body .contact-form .field input:focus, .sp-body .contact-form .field textarea:focus, .sp-body .contact-form .field select:focus{ border-color:var(--sp-amber) }
.sp-body .contact-form .field textarea{ min-height:140px; resize:vertical }
.sp-body .contact-form .field input::placeholder, .sp-body .contact-form .field textarea::placeholder{ color:var(--sp-fg3) }
.sp-body .contact-form .form-foot{ grid-column:span 2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:8px }
.sp-body .contact-form .form-foot .marker{ font:500 11px/1.5 var(--sp-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sp-fg3) }
.sp-body .form-feedback{ display:block; margin:0 0 20px; padding:12px 14px; font:500 13px/1.5 var(--sp-mono); letter-spacing:.04em; border:1px solid var(--sp-line-2); background:var(--sp-bg2); color:var(--sp-fg) }
.sp-body .form-feedback.success{ border-color:var(--sp-lime); color:var(--sp-lime) }
.sp-body .form-feedback.error{ border-color:#EF4444; color:#F87171 }
#engage.is-drawered{ display:none }
.sp-drawer-backdrop{ position:fixed; inset:0; z-index:69; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s ease }
.sp-drawer-backdrop.is-open{ opacity:1; pointer-events:auto }
.sp-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(520px,100%); background:var(--sp-bg); border-left:1px solid var(--sp-line-2); transform:translateX(100%); transition:transform .3s ease; z-index:70; overflow:auto; padding:72px 36px 40px; box-sizing:border-box }
.sp-drawer:not(.is-open){ visibility:hidden; transition:transform .3s ease, visibility 0s .3s }
.sp-drawer.is-open{ transform:none }
.sp-drawer[hidden]{ display:none }
.sp-drawer-exit{ position:absolute; top:14px; right:16px; font:500 12px/1 var(--sp-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sp-fg2); background:transparent; border:1px solid var(--sp-line-2); padding:10px 12px; cursor:pointer; border-radius:0 }
.sp-drawer-exit:hover{ color:#fff; border-color:var(--sp-fg) }
.sp-drawer .sp-engage-inner{ max-width:none }
.sp-drawer .contact-form{ grid-template-columns:1fr }
.sp-drawer .contact-form .field.full, .sp-drawer .contact-form .form-foot{ grid-column:span 1 }

/* ---------- full-frame iframe overlay ---------- */
.sp-frame{ position:fixed; inset:0; background:var(--sp-bg); z-index:80; display:none }
.sp-frame.is-open{ display:block }
.sp-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--sp-bg) }
.sp-frame-exit{ position:absolute; top:14px; right:16px; z-index:2; font:500 12px/1 var(--sp-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sp-fg); background:rgba(13,17,13,.85); border:1px solid var(--sp-line-2); padding:10px 12px; cursor:pointer; border-radius:0 }
.sp-frame-exit:hover{ color:#fff; border-color:var(--sp-amber) }


/* ---------- footer re-skin (style.css .site-footer/.telemetry) ---------- */
.sp-body .telemetry{ background:var(--sp-bg2); border-top:1px solid var(--sp-line); color:var(--sp-fg2) }
.sp-body .site-footer{ background:var(--sp-bg); color:var(--sp-fg2); border-top:1px solid var(--sp-line) }
.sp-body .site-footer h5{ color:var(--sp-fg) }
.sp-body .site-footer a:hover{ color:#fff }
.sp-body .site-footer .footer-bot{ border-top-color:var(--sp-line) }

/* ---------- reveal + fade ---------- */
/* hidden-until-revealed only when JS is driving (html.sp); without JS every section is simply visible */
html.sp .sp-reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease-out,transform .6s ease-out }
html.sp .sp-reveal.is-in{ opacity:1; transform:none }
html:not(.sp) .sp-row-body{ grid-template-rows:1fr }
.sp-reveal > .sp-stagger{ transition-delay:inherit }
.sp-fade-out{ opacity:0; transition:opacity .4s ease }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .sp-two{ grid-template-columns:1fr; gap:24px; margin-bottom:40px }
  .sp-cards, .sp-cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sp-row-inner{ grid-template-columns:1fr; gap:24px }
  .sp-cols{ grid-template-columns:1fr; gap:48px }
}
@media (max-width:800px){
  .sp-nav-links{ display:none }
  .sp-nav-burger{ display:inline-flex; align-items:center; justify-content:center }
  .sp-nav-ext{ display:none }
  .sp-hero-copy{ padding:120px 0 72px }
  .sp-hero-grad{ background:linear-gradient(0deg,rgba(13,17,13,.95) 0%,rgba(13,17,13,.6) 45%,rgba(13,17,13,.15) 75%,rgba(13,17,13,.4) 100%) }
  .sp-row-head{ grid-template-columns:auto 1fr; padding:28px 0 }
  .sp-row-sub{ grid-column:2; text-align:left; justify-self:start; max-width:none }
  .sp-tiles{ grid-template-columns:1fr }
  .sp-tile--wide{ aspect-ratio:16/9 }
  .sp-cards, .sp-cards--2, .sp-cards--4{ grid-template-columns:1fr }
  .sp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }
  .sp-door{ aspect-ratio:4/3 }
  .sp-drawer{ width:100%; padding:72px 24px 32px }
  .sp-body .contact-form{ grid-template-columns:1fr }
  .sp-body .contact-form .field.full, .sp-body .contact-form .form-foot{ grid-column:span 1 }
}
@media (prefers-reduced-motion:reduce){
  html.sp .sp-reveal{ opacity:1; transform:none; transition:none }
  .sp-row-body, .sp-drawer, .sp-drawer-backdrop, .sp-fade-out, .sp-tile img, .sp-door img{ transition:none }
  .sp-hero-live .pip, .sp-door-lamp{ animation:none }
}

/* ============================================================
   Site architecture blocks (domain / mission / platform pages)
   ============================================================ */
.sp-section--tight{ padding:clamp(48px,6vw,88px) 0 }
.sp-hero--page{ min-height:72svh }
.sp-h1--page{ font-size:clamp(48px,7.5vw,112px) }
.sp-nav-links--right{ margin-left:auto }
.sp-nav .sp-nav-brand{ margin-right:28px }
.sp-nav-links a[aria-expanded="true"], .sp-nav-links a.is-here{ color:#fff; border-bottom-color:var(--sp-amber) }

/* mega-menu */
.sp-mega{ position:absolute; left:0; right:0; top:56px; z-index:49 }
.sp-mega-panel{ background:rgba(13,17,13,.97); border-bottom:1px solid var(--sp-line-2); backdrop-filter:blur(10px) }
.sp-mega-panel[hidden]{ display:none }
.sp-mega-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:48px; padding:36px 0 40px }
.sp-mega-blurb p{ margin:0 0 18px; font-size:17px; line-height:1.5; color:var(--sp-fg); max-width:38ch }
.sp-mega-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.sp-mega-list a{ display:block; font:600 20px/1.2 var(--sp-sans); color:var(--sp-fg); padding:9px 0; border-bottom:1px solid var(--sp-line); transition:color .2s }
.sp-mega-list a:hover{ color:var(--sp-amber-hi) }
.sp-mega-list--caps a{ font:500 13px/1.4 var(--sp-mono); letter-spacing:.06em; color:var(--sp-fg2) }
.sp-mega-list--caps a:hover{ color:#fff }
.sp-nav-sheet a{ padding:14px 0 }

/* domain doors */
.sp-doors{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:24px }
.sp-door-tile{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--sp-line); background:var(--sp-bg2); isolation:isolate }
.sp-door-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease, filter .4s ease }
.sp-door-tile:hover img, .sp-door-tile:focus-visible img{ transform:scale(1.04); filter:brightness(1.12) }
.sp-door-tile::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(13,17,13,.92) 0%,rgba(13,17,13,.2) 45%,rgba(13,17,13,0) 70%) }
.sp-door-tile::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.1; mix-blend-mode:overlay; background-image:var(--sp-grain); background-size:240px 240px }
.sp-door-tile .sp-tile-cap{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:6px }
.sp-door-tile .sp-tile-label{ font:700 clamp(26px,2.6vw,38px)/1 var(--sp-disp); text-transform:uppercase; letter-spacing:.01em; color:#fff }

/* slabs (mission-area / platform rows) */
.sp-slab{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:center }
.sp-slab-copy .sp-copy{ margin:0 0 24px }
.sp-slab-media{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--sp-line); background:var(--sp-bg2); isolation:isolate }
.sp-slab-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s ease }
.sp-slab-media::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.1; mix-blend-mode:overlay; background-image:var(--sp-grain); background-size:240px 240px }
.sp-slab:hover .sp-slab-media img{ transform:scale(1.03) }
.sp-slabs{ display:grid; gap:8px; margin-top:24px }
.sp-slab--row{ padding:32px; border:1px solid var(--sp-line); background:rgba(20,26,20,.5) }
.sp-slab--row .sp-h3{ margin-bottom:10px }
.sp-slab--row .sp-copy{ font-size:17px }

/* numbered rows */
.sp-nrows{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--sp-line) }
.sp-nrow{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; padding:22px 0; border-bottom:1px solid var(--sp-line) }
.sp-nrow-idx{ font:500 13px/1.6 var(--sp-mono); letter-spacing:.2em; color:var(--sp-amber) }
.sp-nrow h4{ margin:0 0 4px; font:600 19px/1.3 var(--sp-sans); color:#fff }
.sp-nrow p{ margin:0; font-size:16px; line-height:1.55; color:var(--sp-fg); max-width:72ch }

/* bands (the scale spectrum) */
.sp-bands{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:24px }
.sp-band{ position:relative; border:1px solid var(--sp-line); padding:28px 26px 30px; background:rgba(20,26,20,.5); border-top:3px solid var(--sp-fg3) }
.sp-band--live{ border-top-color:var(--sp-lime) }
.sp-band--fwd{ border-top-color:var(--sp-amber) }
.sp-band-n{ display:block; font:500 12px/1 var(--sp-mono); letter-spacing:.2em; color:var(--sp-fg2); margin-bottom:16px }
.sp-band-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.sp-band-head .sp-h3{ margin:0 }
.sp-band-sub{ margin:8px 0 12px; font:500 12px/1.4 var(--sp-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sp-fg2) }
.sp-band .sp-copy{ font-size:16px }
.sp-grade{ font:500 11px/1 var(--sp-mono); letter-spacing:.16em; text-transform:uppercase; padding:6px 9px; border:1px solid var(--sp-line-2); color:var(--sp-fg2); white-space:nowrap }
.sp-grade--live{ color:var(--sp-lime); border-color:rgba(163,230,53,.5) }
.sp-grade--fwd{ color:var(--sp-amber); border-color:rgba(245,165,36,.5); border-style:dashed }

/* the loop */
.sp-loop{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; counter-reset:loop }
.sp-loop-step{ position:relative; border:1px solid var(--sp-line); padding:24px 20px 22px; background:rgba(20,26,20,.5) }
.sp-loop-step::after{ content:'→'; position:absolute; right:-14px; top:50%; transform:translateY(-50%); color:var(--sp-fg3); font:400 18px/1 var(--sp-mono); z-index:1 }
.sp-loop-step:last-child::after{ content:'↺'; color:var(--sp-amber) }
.sp-loop-lbl{ display:block; font:700 clamp(20px,2vw,28px)/1 var(--sp-disp); text-transform:uppercase; letter-spacing:.02em; color:var(--sp-amber); margin-bottom:10px }
.sp-loop-txt{ display:block; font-size:14px; line-height:1.45; color:var(--sp-fg) }
.sp-loop-note{ margin:20px 0 0; font:500 13px/1.6 var(--sp-mono); letter-spacing:.06em; color:var(--sp-fg2); text-align:center }

/* triad */
.sp-triad{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.sp-tri{ border:1px solid var(--sp-line); padding:26px 24px; background:rgba(20,26,20,.5) }
.sp-tri .sp-ear{ color:var(--sp-amber) }
.sp-tri p{ margin:0; font-size:16px; line-height:1.55; color:var(--sp-fg) }

/* diagram */
.sp-diagram{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:center; margin-top:20px }
.sp-diagram-plate{ margin:0; border:1px solid var(--sp-line); background:var(--sp-bg); padding:16px; overflow-x:auto }
.sp-diagram-plate svg{ display:block; width:100%; height:auto; min-width:560px }
.sp-diagram-copy .sp-copy{ font-size:17px }

/* lists */
.sp-list--wide li{ font:400 16px/1.55 var(--sp-sans); letter-spacing:0; color:var(--sp-fg); padding-left:22px; margin:0 0 8px }
.sp-list--wide li::before{ color:#EF4444; line-height:1.9 }

/* paper statement with an ear */
.sp-section--paper .sp-ear{ margin-bottom:22px }

@media (max-width:1024px){
  .sp-doors{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sp-slab{ grid-template-columns:1fr; gap:20px }
  .sp-bands, .sp-triad{ grid-template-columns:1fr }
  .sp-loop{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sp-loop-step::after{ display:none }
  .sp-diagram{ grid-template-columns:1fr }
  .sp-mega-grid{ grid-template-columns:1fr 1fr; gap:28px }
}
@media (max-width:800px){
  .sp-doors{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sp-door-tile{ aspect-ratio:4/5 }
  .sp-loop{ grid-template-columns:1fr }
  .sp-nrow{ grid-template-columns:44px minmax(0,1fr); gap:14px }
  .sp-mega{ display:none }
  .sp-nav-links--right{ display:none }
  .sp-slab--row{ padding:20px }
}

/* split hero (company): headline on the seam, one label per pane */
.sp-hero--split .sp-hero-grad{ background:linear-gradient(0deg,rgba(13,17,13,.92) 0%,rgba(13,17,13,.35) 40%,rgba(13,17,13,0) 65%),linear-gradient(180deg,rgba(13,17,13,.45) 0%,rgba(13,17,13,0) 18%) }
.sp-hero--split .sp-hero-copy{ text-align:center; align-items:center; display:flex; flex-direction:column; padding-bottom:120px }
.sp-hero--split .sp-lead{ max-width:46ch }
.sp-hero-seam{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(217,215,210,.28); z-index:2 }
.sp-hero-panes{ position:absolute; left:0; right:0; bottom:56px; z-index:3; display:grid; grid-template-columns:1fr 1fr; padding:0 clamp(16px,3vw,48px) }
.sp-hero-panes .sp-ear{ margin:0; color:var(--sp-fg) }
.sp-hero-panes .sp-ear:last-child{ text-align:right }
/* feature: statement left, figure right */
.sp-feature{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center }
.sp-stmt--dark{ color:#fff; font-size:clamp(26px,3.2vw,44px); max-width:22ch }
.sp-stmt--dark em{ font-style:normal; color:var(--sp-amber) }
.sp-feature-fig{ margin:0; border:1px solid var(--sp-line); background:var(--sp-bg); overflow:hidden }
.sp-feature-fig img{ display:block; width:100%; height:auto }
@media (max-width:1024px){ .sp-feature{ grid-template-columns:1fr; gap:24px } }
@media (max-width:800px){ .sp-hero-panes{ bottom:40px } .sp-hero-panes .sp-ear{ font-size:10px } .sp-hero--split .sp-hero-copy{ padding-bottom:96px } }