/* Strategic Online Corp — base / shared design system.
   The full stylesheet from mockups/soc-homepage-v30.html, ported verbatim, with
   three changes for WordPress: (1) :root tokens moved to tokens.css, (2) the
   site nav scoped to `.site-header nav` and the footer to `footer.site-footer`
   so a bare `nav`/`footer` can't collide with in-article elements (the known
   trap), (3) the hero `header{}` rules scoped to `.hero`.

   Loaded on every page: it carries the shared primitives (post cards, closing
   CTA band, utilities, buttons) plus the homepage components. Template-specific
   layout lives in interior.css / single.css / archive.css. Tokens: tokens.css.

   Radii are kept at the mockup's exact values for pixel fidelity; --radius (5px)
   and --radius-lg (10px) in tokens.css are the two-value system for new work. */

/* ---------- logo helpers (background images set in tokens.css) ---------- */
.logo-c{background-image:var(--logo-color);background-repeat:no-repeat;background-position:center;
  background-size:contain;aspect-ratio:600/454;display:block}
.logo-w{background-image:var(--logo-slate);background-repeat:no-repeat;background-position:center;
  background-size:contain;aspect-ratio:600/454;display:block}

/* ---------- small reset additions ---------- */
img{max-width:100%;height:auto}

/* ---------- accessibility (quality floor) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--action);color:#160F00;
  padding:12px 20px;border-radius:0 0 var(--radius) 0;font-weight:600;font-family:var(--font-display)}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================= */
/* Shared design system (ported from the mockup, scoped as noted) */
/* ============================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--body);
  font:400 20.9px/1.62 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Sora,system-ui,sans-serif;color:var(--ink);margin:0;letter-spacing:-.025em}
h1{font-size:clamp(44px,5.6vw,77px);line-height:1.02;font-weight:800}
h2{font-size:clamp(35.2px,4.2vw,55px);line-height:1.06;font-weight:700}
h3{font-size:27.5px;line-height:1.26;font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1.1rem;max-width:62ch}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",monospace;font-size:14.3px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--annotation)}
.shell{max-width:var(--shell);margin:0 auto;padding:0 30.8px}
section{padding:123.2px 0;position:relative;overflow:hidden}
.light{background:var(--canvas)}
.alt{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dark{background:var(--ink);color:#C9CEE4}
.dark h2,.dark h3{color:#fff}
.dark p{color:#B4BAD4}
.hl{color:var(--action)}
.hl-b{color:var(--brand)}
.lead{font-size:25.3px;line-height:1.5;color:var(--body)}
.dark .lead{color:#C9CEE4}

/* oversized figure numeral */
.numeral{position:absolute;top:48.4px;right:-15.4px;font-family:Sora;font-weight:800;
  font-size:231px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--rule);
  pointer-events:none;user-select:none;z-index:0}
.dark .numeral{-webkit-text-stroke-color:rgba(255,255,255,.10)}
.shell{position:relative;z-index:1}

/* nav */
.site-header nav{position:sticky;top:0;z-index:40;background:rgba(8,12,36,.94);
  backdrop-filter:blur(11px);border-bottom:1px solid rgba(255,255,255,.09)}
.site-header nav{overflow:visible}
.site-header nav .shell{display:flex;align-items:center;justify-content:space-between;height:84px;overflow:visible}
.logo-dock{display:block;opacity:0;transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;text-decoration:none;
  font-family:Sora;font-weight:700;color:#fff;font-size:24px;letter-spacing:-.02em;white-space:nowrap}
.logo-dock em{font-style:normal;color:var(--action)}
.site-header nav.docked .logo-dock{opacity:1;transform:none;pointer-events:auto}
.hero-logo{margin:0 0 46px}
.hero-logo .logo-c{height:396px;transition:opacity .3s ease}
body.nav-docked .hero-logo .logo-c{opacity:0}
.brand{font-family:Sora;font-weight:700;color:#fff;font-size:19.8px;letter-spacing:-.02em}
.brand em{color:var(--action);font-style:normal}
.site-header nav ul{display:flex;gap:35.2px;list-style:none;margin:0;padding:0}
.site-header nav a{color:#B4BAD4;text-decoration:none;font-size:17.6px;font-weight:500}
.site-header nav a:hover{color:#fff}
.btn{display:inline-block;background:var(--action);color:#160F00;text-decoration:none;
  font-weight:600;font-size:18.7px;padding:16.5px 33px;border-radius:5.5px;border:2px solid var(--action);
  transition:background .18s,border-color .18s,transform .18s}
.btn:hover{background:var(--action-hi);border-color:var(--action-hi);transform:translateY(-1px)}
.btn-sm{padding:11px 22px;font-size:16.5px;border-width:2px}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:#fff}

/* hero */
.hero{background:linear-gradient(147deg,#0B1030 0%,#241a5e 44%,#4B2BB8 78%,#6D3FF5 108%);position:relative;overflow:hidden;padding:88px 0 114.4px}
.hero .glow{position:absolute;width:1298px;height:1298px;right:-352px;top:-473px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,99,255,.62) 0%,rgba(109,63,245,.26) 40%,transparent 70%)}
.hero .glow2{position:absolute;width:902px;height:902px;left:-330px;bottom:-572px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,165,36,.20) 0%,transparent 66%)}
.hero .grid{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 112.2px);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 74%,transparent)}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{color:#C3C9E2;font-size:clamp(20.9px,1.7vw,24.2px);line-height:1.55;max-width:54ch;margin:33px 0 44px}
.cta-row{display:flex;gap:17.6px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.22);
  border-radius:110px;padding:8.8px 19.8px;margin-bottom:28.6px}
.pill i{width:7.7px;height:7.7px;border-radius:50%;background:var(--action);display:block}
.pill span{font-family:"IBM Plex Mono",monospace;font-size:13.8px;letter-spacing:.1em;
  text-transform:uppercase;color:#C3C9E2;font-weight:500}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:79.2px;
  border-top:1px solid rgba(255,255,255,.16)}
.trio div{padding:28.6px 33px 0 0}
.trio div + div{padding-left:33px;border-left:1px solid rgba(255,255,255,.16)}
.trio strong{display:block;font-family:Sora;font-weight:600;color:#fff;font-size:20.9px;margin-bottom:7.7px}
.trio span{font-size:17.6px;color:#9BA2C4;line-height:1.5}

/* surge module */
.surge-head{display:grid;grid-template-columns:1.05fr .95fr;gap:70.4px;align-items:center}
.readout{background:linear-gradient(160deg,#121738,#080C24);border:1px solid rgba(255,255,255,.14);
  border-radius:8.8px;padding:33px 35.2px 37.4px}
.readout .top{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:17.6px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:24.2px}
.readout .top b{font-family:Sora;color:#fff;font-size:19.8px;font-weight:600}
.bar{margin-bottom:20.9px}
.bar .lb{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;
  font-size:13.8px;letter-spacing:.06em;color:#98A0C2;margin-bottom:8.8px;text-transform:uppercase}
.bar .tr{height:7.7px;background:rgba(255,255,255,.10);border-radius:4.4px;overflow:hidden}
.bar .fl{height:100%;border-radius:4.4px;background:linear-gradient(90deg,var(--brand),var(--action));
  width:0;transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.readout .foot{margin-top:26.4px;padding-top:19.8px;border-top:1px solid rgba(255,255,255,.14);
  font-family:"IBM Plex Mono",monospace;font-size:13.2px;letter-spacing:.06em;color:#767D9C;text-transform:uppercase}
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:13.2px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--action);
  border:1px solid rgba(245,165,36,.45);background:rgba(245,165,36,.10);
  padding:7.7px 15.4px;border-radius:4.4px;margin-bottom:24.2px}

/* engine cards */
.two{display:grid;grid-template-columns:1fr 1fr;gap:30.8px;margin-top:61.6px}
.four{display:grid;grid-template-columns:repeat(2,1fr);gap:30.8px;margin-top:63.8px}



.lp-card .pin{transition:transform .45s cubic-bezier(.2,.8,.3,1);transform-box:fill-box;transform-origin:center}
.lp-card:hover .pin{transform:scale(1.14)}
.lp-card{transition:transform .25s ease,box-shadow .25s ease}
.lp-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(4,7,26,.45)}
@keyframes pinpop{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}
.lp-after.firing .pin{animation:pinpop .62s cubic-bezier(.2,.8,.3,1) both;transform-box:fill-box;transform-origin:center}
.lp-cap-note{font-family:Inter,sans-serif;font-size:17px;font-weight:500;color:var(--action);margin-top:20px}
.lp-fine{font-size:14px;color:#8A91B2;margin:14px 0 0;line-height:1.5}
@media(prefers-reduced-motion:reduce){
  .lp-card:hover .pin{transform:none}
  .lp-after.firing .pin{animation:none}
  .lp-card:hover{transform:none}
}
.lp{background:linear-gradient(158deg,#101538 0%,#1B1A55 52%,#2A1C6B 100%)}
.lp-sub{color:#A585FF;display:inline-block;margin-top:22px;line-height:1.15}
.lp .lp-points{border-top-color:rgba(255,255,255,.18)}
.lp .lp-points li{border-bottom-color:rgba(255,255,255,.18);color:#DDE1F0}
.lp .lp-points b{color:var(--action)}
.lp .lp-card{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.25)}
.lp .lp-head .mono{color:var(--ink)}
.lp .lp-cap{color:#5A6180}
.lp .lp-offer{background:rgba(6,9,28,.62);border:1px solid rgba(255,255,255,.16)}
.lp .mono{color:#9AA1C4}


.video-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,#101538,#2A1C6B);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center}
.video-frame::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 62px)}
.video-play{position:relative;z-index:1;opacity:.85}
.video-cap{position:absolute;left:22px;bottom:18px;z-index:1;font-family:"IBM Plex Mono",monospace;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#B4BAD4}

.who-h{font-size:22px;margin:34px 0 12px;letter-spacing:-.015em}
.who-facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:30px 0 0;padding:0;
  border-top:1px solid var(--rule)}
.who-facts li{padding:22px 18px 0 0;display:flex;flex-direction:column;gap:6px}
.who-facts li + li{padding-left:18px;border-left:1px solid var(--rule)}
.who-facts b{font-family:Sora;font-weight:700;font-size:32px;color:var(--brand);letter-spacing:-.02em;line-height:1}
.who-facts span{font-size:15px;color:var(--annotation);line-height:1.4}
.who-mm{margin-top:52px;background:var(--ink);border-radius:10px;padding:40px 44px}
.who-mm .mono{color:var(--action);font-size:14px;margin:0 0 18px;display:block}
.who-mm p{color:#DDE1F0;font-size:19px;line-height:1.6;max-width:80ch}
.who-mm .pq-name{color:#fff}
.who-mm .pq-role{color:#8A91B2}
.pq-sign{font-family:Sora,sans-serif;font-weight:500;font-size:17px;color:var(--action);margin-top:10px}
.who-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.who-grid h2{max-width:13ch}
.who-grid p{max-width:60ch}
.who-range{border-left:3px solid var(--action);padding-left:26px;margin-top:30px;color:var(--ink);
  font-size:19px;line-height:1.6}

.bridge{font-family:Sora,sans-serif;font-size:20px;font-weight:500;letter-spacing:-.01em;
  color:var(--brand);margin:0 0 22px;max-width:56ch;line-height:1.45;
  display:flex;gap:18px;align-items:flex-start}
.bridge::before{content:"";flex:none;width:30px;height:3px;background:var(--action);margin-top:14px;border-radius:2px}
.dark .bridge,.lp .bridge{color:#B9A0FF}
.dark .bridge::before,.lp .bridge::before{background:var(--action)}

.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-top:48px}
.gate{padding:38px 34px 40px;position:relative}
.gate::before{content:"";position:absolute;left:0;right:0;top:0;height:5px}
.gate-1{background:#F3EFFE} .gate-1::before{background:#6D3FF5}
.gate-2{background:#EBF3FC} .gate-2::before{background:#2F7FD6}
.gate-3{background:#FEF6E8} .gate-3::before{background:#E09B14}
.gate-n{display:block;font-family:Sora;font-weight:800;font-size:52px;line-height:1;
  color:transparent;margin-bottom:22px}
.gate-1 .gate-n{-webkit-text-stroke:2px #6D3FF5}
.gate-2 .gate-n{-webkit-text-stroke:2px #2F7FD6}
.gate-3 .gate-n{-webkit-text-stroke:2px #E09B14}
.gate h3{font-size:24px;margin-bottom:14px}
.gate p{font-size:17.6px;line-height:1.6;margin:0;color:#2F3550}
.gate-note{margin-top:18px !important;padding-top:16px;border-top:1px solid rgba(20,26,60,.16);
  color:#5B6284;font-size:16px !important}


#gates .lead{color:#2A3049}
.pullquote{margin:30px 0 0;padding-top:28px;border-top:1px solid var(--rule)}
.pullquote blockquote{margin:0;font-family:Sora;font-weight:600;font-size:23px;line-height:1.45;
  letter-spacing:-.015em;color:var(--ink);max-width:60ch}
.pullquote figcaption{margin-top:20px;display:flex;flex-direction:column;gap:3px}
.pq-name{font-family:Sora;font-weight:600;font-size:17px;color:var(--ink)}
.pq-role{font-family:Inter,sans-serif;font-size:16px;color:var(--annotation)}
.legacy{margin-top:44px;border:1px solid var(--rule);border-left:5px solid var(--brand);
  border-radius:10px;padding:36px 40px;background:var(--canvas)}
.legacy .mono{color:var(--brand);font-size:14px;margin:0 0 20px;display:block}
.legacy p{font-size:18.7px;line-height:1.62;max-width:76ch;color:#2F3550}
.legacy p:last-child{margin-bottom:0}
.gate-close{margin-top:44px;background:var(--ink);border-radius:10px;padding:38px 42px}
.gate-close p{color:#DDE1F0;font-size:21px;line-height:1.55;margin:0;max-width:74ch}
.gate-close em{color:var(--action);font-style:normal}
.lp-points{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
  border-top:1px solid var(--rule)}
.lp-points li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--rule);font-size:19px}
.lp-points b{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;color:var(--action-deep);padding-top:3px}
.lp-grids{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px}
.lp-card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:26px}
.lp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.lp-head .mono{font-size:14px;color:var(--ink)}
.lp-avg{color:#C0413A}
.lp-cap{font-size:16px;color:var(--annotation);margin:18px 0 0}
.lp-offer{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:52px;background:var(--ink);
  border-radius:10px;padding:44px 46px;align-items:center}
.lp-offer h3{color:#fff;font-size:30px;max-width:16ch}
.lp-offer p{color:#B4BAD4;font-size:18px;margin-top:16px}
.lp-form{display:grid;gap:16px}
.lp-form label{display:block}
.lp-form .mono{display:block;margin-bottom:7px;color:#8A91B2;font-size:12px}
.lp-form input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:5px;padding:13px 15px;color:#fff;font-family:Inter,sans-serif;font-size:17px}
.lp-form input::placeholder{color:#6B7297}
.lp-form input:focus{outline:2px solid var(--action);outline-offset:2px}
.lp-form .btn{margin-top:6px;text-align:center}
.chan{background:var(--surface)}
.offer{background:linear-gradient(112deg,#F5A524 0%,#FFB63F 40%,#FFD066 100%);padding:96.8px 0;color:#2A1C02}
.offer h2{color:#180F00;max-width:19ch}
.offer p{color:#3A2705;font-size:20.9px;max-width:52ch;margin-top:22px}
.offer p.small{font-size:18.7px;color:#5A4110;margin-top:15.4px}
.offer-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70.4px;align-items:center}
.offer-tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:13.2px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#6B4C05;border:1px solid rgba(42,28,2,.35);
  padding:7.7px 15.4px;border-radius:4.4px;margin-bottom:22px}
.offer-alt{font-size:17px;color:#5A4110;margin-top:22px}
.offer-alt a{color:#2A1C02;text-decoration:underline;text-underline-offset:3px}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff;margin-top:33px}
.btn-dark:hover{background:#161C46;border-color:#161C46}
.offer-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(42,28,2,.28)}
.offer-list li{display:flex;gap:19.8px;padding:22px 0;border-bottom:1px solid rgba(42,28,2,.28);
  font-size:19.8px;line-height:1.45;color:#2A1C02}
.offer-list b{font-family:"IBM Plex Mono",monospace;font-size:14.3px;font-weight:600;color:#8A6208;padding-top:3.3px}
.chcard{background:#0F1435;border:1px solid rgba(255,255,255,.13);border-radius:10px;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;box-shadow:0 4px 18px rgba(8,12,36,.10)}
.chcard:hover{transform:translateY(-4.4px);box-shadow:0 18px 44px rgba(8,12,36,.22)}
.art{line-height:0;border-bottom:1px solid rgba(255,255,255,.10)}
.art svg{width:100%;height:209px;display:block}
.ch-body{padding:33px 35.2px 37.4px}
.ch-tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12.7px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin-bottom:15.4px}
.chcard h3{color:#fff;margin-bottom:13.2px;font-size:28.6px}
.chcard p{color:#B4BAD4;font-size:18.7px;line-height:1.58;margin:0}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:8.8px;padding:41.8px 39.6px;
  position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:4.4px;width:100%;
  background:linear-gradient(90deg,var(--brand),var(--action))}
.card h3{margin-bottom:13.2px}
.card p{font-size:18.7px;line-height:1.6;margin-bottom:0}
.steps{list-style:none;margin:28.6px 0 0;padding:0}
.steps li{display:flex;gap:17.6px;padding:16.5px 0;border-top:1px solid var(--rule);font-size:18.7px;line-height:1.5}
.steps b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14.3px;color:var(--action-deep);
  min-width:33px;padding-top:3.3px}
.steps strong{color:var(--ink);font-weight:600}

/* diagram */
.diagram{background:linear-gradient(165deg,#121738,#080C24);border-radius:10px;
  padding:48.4px 44px 37.4px;border:1px solid rgba(255,255,255,.12);margin-top:52.8px}
.dg-node{opacity:0;transform:translateY(11px);transition:opacity .6s ease,transform .6s ease}
.dg.on .dg-node{opacity:1;transform:none}
svg .lb{font-family:"IBM Plex Mono",monospace;font-size:12.1px;font-weight:500;letter-spacing:.1em;fill:#767D9C}
svg .nm{font-family:Sora,sans-serif;font-size:18.7px;font-weight:600;fill:#fff}
svg .sb{font-family:Inter,sans-serif;font-size:15.4px;fill:#98A0C2}
svg .dk{fill:#080C24}

/* geofence */
.geo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:50.6px;
  border-top:1px solid rgba(255,255,255,.18)}
.geo-grid > div{padding:33px 35.2px 0 0}
.geo-grid > div + div{padding-left:35.2px;border-left:1px solid rgba(255,255,255,.18)}
.geo-grid h3{font-size:22px;margin-bottom:11px}
.example{margin-top:44px;border-left:3.3px solid var(--action);padding:6.6px 0 6.6px 30.8px}
.ex2{border-left-color:var(--brand-lo)}
.geo-grid p{font-size:18.7px;margin:0}

/* case studies */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:28.6px;margin-top:57.2px}
.case{background:var(--surface);border:1px solid var(--rule);border-radius:8.8px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.case:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(8,12,36,.12)}
.chrome{background:#E7EAF2;padding:9.9px 13.2px;display:flex;gap:6.6px;align-items:center;border-bottom:1px solid var(--rule)}
.chrome i{width:9.9px;height:9.9px;border-radius:50%;background:#C3C9D8;display:block}
.chrome span{margin-left:11px;font-family:"IBM Plex Mono",monospace;font-size:12.1px;color:#767D9C;
  background:#fff;border-radius:3.3px;padding:3.3px 9.9px;flex:1;overflow:hidden;white-space:nowrap}
.mini{height:193.6px;padding:15.4px;display:flex;flex-direction:column;gap:9.9px}
.mini .mh{height:12.1px;border-radius:2px;opacity:.85}
.mini .mband{flex:1;border-radius:3.3px;display:flex;align-items:center;padding:15.4px}
.mini .mt{height:8.8px;border-radius:2px;background:rgba(255,255,255,.9);margin-bottom:6.6px}
.mini .mrow{display:flex;gap:8.8px}
.mini .mcell{flex:1;height:37.4px;border-radius:3.3px}
.case .body{padding:28.6px 28.6px 33px}
.case h3{font-size:23.1px;margin-bottom:11px}
.case p{font-size:17.6px;line-height:1.55;margin:0}
.case-quote{margin-top:19.8px;padding:18px 20px;background:var(--canvas);
  border-left:4px solid var(--rule);border-radius:0 5px 5px 0}
.cq-text{font-size:16.5px;line-height:1.5;color:var(--annotation);margin:0;font-style:italic}
.cq-attr{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--annotation);margin:8px 0 0}
.case-link{display:inline-block;margin-top:16px;font-family:Sora,sans-serif;font-weight:600;
  font-size:16.5px;color:var(--action-deep);text-decoration:none;letter-spacing:-.01em}
.case-link:hover{color:var(--brand)}
.case .tags{margin-top:19.8px;padding-top:17.6px;border-top:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:12.7px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--annotation)}

/* statement */
.statement{font-family:Sora;font-weight:600;font-size:clamp(33px,4vw,50.6px);line-height:1.16;
  letter-spacing:-.025em;color:#fff;max-width:20ch;margin:0}
.statement em{font-style:normal;color:var(--action)}

/* how we work */
.hww{display:grid;grid-template-columns:repeat(3,1fr);gap:30.8px;margin-top:57.2px}
.hww div{border-top:3.3px solid var(--action);padding-top:26.4px}
.hww h3{font-size:23.1px;margin-bottom:11px}
.hww p{font-size:18.7px;margin:0}

/* caps */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:2px;
  background:var(--rule);border:1px solid var(--rule);border-radius:8.8px;overflow:hidden;margin-top:48.4px}
.caps div{background:var(--surface);padding:30.8px 28.6px;position:relative;
  transition:background .2s ease}
.caps div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--rule);
  transition:background .2s ease}
.caps div:hover{background:#FBFAFF}
.caps div:hover::before{background:var(--brand)}
.caps h3{font-size:19.8px;margin-bottom:8.8px}
.caps p{font-size:17.6px;line-height:1.5;margin:0;color:var(--annotation)}

/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28.6px;margin-top:48.4px}
.post{border:1px solid var(--rule);border-radius:8.8px;overflow:hidden;background:var(--surface)}
.thumb{height:165px;position:relative}
.thumb span{position:absolute;left:19.8px;bottom:17.6px;font-family:"IBM Plex Mono",monospace;
  font-size:12.7px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.post .inner{padding:26.4px}
.post h3{font-size:22px;line-height:1.32;margin:0}

.close{background:var(--ink);text-align:center;padding:136.4px 0;position:relative;overflow:hidden}
.close .glow{position:absolute;width:990px;height:990px;left:50%;margin-left:-495px;bottom:-682px;border-radius:50%;
  background:radial-gradient(circle,rgba(109,63,245,.5) 0%,transparent 66%)}
.close h2{color:#fff;max-width:17ch;margin:0 auto 24.2px}
.close p{color:#B4BAD4;margin:0 auto 41.8px;max-width:46ch;font-size:22px}

footer.site-footer{background:var(--ink-2);padding:70.4px 0 48.4px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}

footer.site-footer a{color:inherit;text-decoration:none;transition:color .18s ease}
footer.site-footer li a:hover{color:var(--action)}
.foot-brand{display:inline-block;line-height:0}
.foot-brand:hover .logo-w{opacity:.8}
.allposts{background:transparent;color:var(--action-deep);border-color:var(--action-deep);
  padding:12px 24px;font-size:17px}
.allposts:hover{background:var(--action);border-color:var(--action);color:#160F00;transform:translateY(-1px)}
footer.site-footer h4{font-family:"IBM Plex Mono",monospace;font-size:13.2px;letter-spacing:.1em;
  text-transform:uppercase;color:#767D9C;margin:0 0 17.6px;font-weight:600}
footer.site-footer ul{list-style:none;margin:0;padding:0}
footer.site-footer li{margin-bottom:12.1px;font-size:17.6px;color:#B4BAD4}
footer.site-footer .fine{margin-top:52.8px;padding-top:24.2px;border-top:1px solid rgba(255,255,255,.11);
  font-size:15.4px;color:#767D9C}

@media(max-width:980px){
  .surge-head,.two,.four,.cases,.posts,.hww,.geo-grid,.trio,.fcols,.offer-grid{grid-template-columns:1fr;gap:28.6px}
  .hero-logo .logo-c{height:216px}
  .logo-dock{font-size:19px}
  .site-header nav .shell{height:76px}
  .trio div + div,.geo-grid > div + div{border-left:none;padding-left:0;
    border-top:1px solid rgba(255,255,255,.16);padding-top:24.2px}
  section{padding:83.6px 0}
  .site-header nav ul{display:none}
  .numeral{font-size:143px;top:28.6px}
}