/* LogicalNet prototype design system - shared by the internal concept pages.
   Regenerated from internal/home-glass so the concepts stay in step. */

/* ── LogicalNet homepage · "Dark Glass" concept v2 · internal review ──
   Fixes from v1: proportioned nav logo (logo-nav-dark.svg), corrected brand
   palette (no off-brand lime), functional dropdown nav matching the live site,
   a real rendered network-security animation, and a live typeface switcher. ── */
:root{
  /* ── Petrol & Acid ────────────────────────────────────────────────────
     The ground itself carries brand colour (a deep petrol ink) rather than
     being neutral black with colour patched on top, which is what made the
     page read as black-with-panels. Three tiers of that ink give rhythm;
     the acid gradient is then spent on only two decisive moments.        */
  --head:#0f1e30;        /* live-site navy: topbar + hero */
  --void:#0f1e30;         /* live-site navy ground */
  --void-2:#16283c; --panel:#1d3348;
  --paper:#ffffff;        /* white panel */
  --grey:#eaf0f1;         /* grey panel */
  --grey-line:#d3dee0;
  --ink-d:#0a1116;        /* type on light panels */
  --mut-d:#4d6169;
  --green:#22c55e; --green-lt:#4ade80; --teal:#14b4a2; --teal-2:#0ea5c9; --cyan:#22d3ee; --sky:#38bdf8;
  --ink:#eef4f6; --mut:#a9bcc4; --mut-2:#8399a3;
  --hair:rgba(190,250,250,.16); --hair-2:rgba(190,250,250,.10);
  --grad:linear-gradient(102deg,#4ade80,#22d3ee 62%,#38bdf8);
  --grad-soft:linear-gradient(102deg,#34d399,#22d3ee);
  --spring:cubic-bezier(0.32,0.72,0,1);
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --display:'Sora'; --body:'Manrope';
  --sec:clamp(54px,5.4vw,78px); /* section rhythm */
  /* surface tiers: sections alternate value so the page has rhythm instead of
     reading as one continuous slab, and two saturated brand fields give the
     colour somewhere to actually live rather than only thin accents. */
  --tier:#16283c;
  /* flat saturated fields, not multi-stop gradients: flat reads composed,
     gradients everywhere read generic */
  --field-blue:#0b6c86;
  --field-green:#0f5f56;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#0f1e30;overscroll-behavior-y:none}
body{font-family:var(--body),system-ui,sans-serif;background:var(--void);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;overscroll-behavior-y:none}
h1,h2,h3,h4{font-family:var(--body),sans-serif;font-weight:800}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(34,211,238,.28)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
/* ambient brand mesh */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(58vw 42vw at 10% -10%,rgba(74,222,128,.10),transparent 58%),
  radial-gradient(62vw 48vw at 94% 4%,rgba(34,211,238,.12),transparent 60%),
  radial-gradient(70vw 58vw at 68% 110%,rgba(56,189,248,.08),transparent 60%),var(--void)}
/* fixed grain */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── eyebrow ── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--body),sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);padding:7px 14px;border-radius:999px;background:rgba(56,189,248,.06);border:1px solid rgba(56,189,248,.16)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green-lt)}

/* ── buttons ── */
.cta{display:inline-flex;align-items:center;gap:11px;font-family:var(--body),sans-serif;font-weight:600;font-size:14px;color:#04121a;padding:9px 9px 9px 20px;border-radius:999px;white-space:nowrap;background:var(--grad);transition:transform .5s var(--spring),box-shadow .5s var(--ease);box-shadow:0 10px 30px -12px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.4)}
.cta:hover{transform:translateY(-1px)}
.cta:active{transform:scale(.98)}
.cta .knob{width:30px;height:30px;border-radius:999px;background:rgba(4,18,26,.18);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--spring),background .4s var(--ease)}
.cta:hover .knob{transform:translateX(3px);background:rgba(4,18,26,.3)}
.cta .knob svg{width:14px;height:14px;stroke:#04121a;stroke-width:1.8;fill:none}
.ghost{display:inline-flex;align-items:center;gap:10px;font-family:var(--body),sans-serif;font-weight:600;font-size:14px;color:var(--ink);padding:12px 20px;border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.03);border:1px solid var(--hair);transition:border-color .4s var(--ease),background .4s var(--ease),transform .5s var(--spring)}
.ghost:hover{border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.06);transform:translateY(-1px)}
.ghost svg{width:15px;height:15px;stroke:var(--sky);stroke-width:1.6;fill:none}

/* ── ACID HEADER ────────────────────────────────────────────────────────
   The whole masthead is the brand gradient with near-black content: black
   shield with knocked-out white fingerprint, black wordmark, black nav type,
   black buttons with white copy. A bright band above a near-black page. */

/* ── topbar ── */
.topbar{position:relative;z-index:41;font-size:12.5px;color:#4d6169;background:#fff;
  border-bottom:1px solid #eef2f5}
.topbar a{color:#4d6169}
.topbar a:hover{color:#0a5c37}
.topbar .tb-sep{color:#c3ced4}
.topbar .tb-badge{color:#0a5c37;font-weight:700}
.topbar .tb-badge svg{stroke:#0a5c37}
.topbar .portal{color:#0b7fa3;font-weight:700}
.topbar .portal:hover{color:#0a5c37}
.topbar-inner{max-width:1240px;margin:0 auto;padding:8px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a:hover{color:#0a5c37}
.tb-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tb-sep{color:var(--mut-2)}
.tb-right{display:flex;align-items:center;gap:14px}
.tb-badge{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.tb-badge svg{width:14px;height:14px;fill:none;stroke-width:1.6}
.tb-right .portal{font-weight:700}

/* ── nav (glass, sticky, functional dropdowns) ── */
/* Transparent at rest so there is no seam against the hero. On scroll it
   becomes real glass: blurred + saturated backdrop, a top highlight and a
   bottom hairline (the two edges that make glass read as a physical pane),
   and a soft shadow so it floats above the content passing beneath. */
.nav{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #e8edf3;box-shadow:0 2px 16px rgba(15,30,48,.07);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s var(--ease);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}
/* nav sits on the acid band: everything inverts to near-black */
/* when scrolled, the sticky nav keeps the acid but tightens with a dark edge */
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 42%,transparent)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease);
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.35),rgba(56,189,248,.35),transparent)}
.nav.stuck{background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);
  border-bottom-color:#e8edf3;
  box-shadow:0 10px 26px -14px rgba(15,30,48,.22)}
.nav.stuck::before{opacity:0}
.nav.stuck::after{opacity:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.stuck{background:#fff}
}
/* same container as .wrap so the logo aligns with the page content edge */
.nav-inner{max-width:1240px;margin:0 auto;padding:0 32px;height:80px;display:flex;align-items:center;gap:10px}
.nav-logo{display:flex;align-items:center;margin-right:auto}
/* white-text lockup is 5.26:1 with the shield filling its full height (the live
   site's logo is 3.82:1 with padding), so 34px here renders the same 179px
   footprint and a slightly larger shield than the live nav, never smaller. */
.nav-logo img{height:42px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:0;list-style:none;height:100%}
.nav-links>li{position:relative;height:100%;display:flex;align-items:center}
.nav-top-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--body),sans-serif;font-size:14px;font-weight:600;color:#1e2d4e;padding:9px 11px;border-radius:9px;transition:color .3s var(--ease),background .3s var(--ease);height:38px;white-space:nowrap}
/* colour pop on navigation: green wash + underline, cyan text */
.nav-top-link::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;opacity:0;
  transition:transform .38s var(--spring),opacity .3s var(--ease)}
.nav-top-link{position:relative}
/* top level: colour and underline only, no pill. Boxes stay in the dropdown. */
@media(hover:hover){.nav-links>li:hover .nav-top-link{color:#0a7a45;background:transparent;box-shadow:none}}
.nav-links>li:focus-within .nav-top-link{color:#0a7a45;background:transparent;box-shadow:none}
@media(hover:hover){.nav-links>li:hover .nav-top-link::after{transform:scaleX(1);opacity:1}}
.nav-links>li:focus-within .nav-top-link::after{transform:scaleX(1);opacity:1}
/* the chevron follows the label so the open menu reads as clearly active */
@media(hover:hover){.nav-links>li:hover .nav-chev{stroke:#0a7a45;opacity:1}}
.nav-links>li:focus-within .nav-chev{stroke:#0a7a45;opacity:1}
.nav-chev{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;transition:transform .3s var(--ease);opacity:.7}
@media(hover:hover){.nav-links>li:hover .nav-chev{transform:rotate(180deg)}}
.nav-links>li:focus-within .nav-chev{transform:rotate(180deg)}
/* dropdown panel */
.nav-dd{position:absolute;top:calc(100% - 6px);left:0;min-width:300px;padding:10px;border-radius:16px;background:rgba(19,58,68,.96);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border:1px solid rgba(255,255,255,.12);box-shadow:0 38px 80px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .28s var(--ease),transform .28s var(--spring),visibility .28s;display:grid;gap:2px;z-index:50}
.nav-dd.grid2{grid-template-columns:1fr 1fr;min-width:560px}
@media(hover:hover){.nav-links>li:hover .nav-dd{opacity:1;visibility:visible;transform:translateY(0)}}
.nav-links>li:focus-within .nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd a{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;transition:background .25s var(--ease)}
.nav-dd a{position:relative;border:1px solid transparent}
.nav-dd a:hover{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.42)}
.nav-dd a:hover .nav-dd-ic{background:rgba(74,222,128,.22);border-color:rgba(74,222,128,.65)}
.nav-dd a:hover .nav-dd-ic svg{stroke:var(--green-lt)}
.nav-dd a:hover .nav-dd-tx strong{color:var(--green-lt)}
.nav-dd-ic,.nav-dd-ic svg,.nav-dd-tx strong{transition:background .28s var(--ease),border-color .28s var(--ease),stroke .28s var(--ease),color .28s var(--ease)}
.nav-dd-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.14)}
.nav-dd-ic svg{width:19px;height:19px;stroke:var(--sky);stroke-width:1.5;fill:none}
.nav-dd-tx strong{display:block;font-family:var(--body),sans-serif;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.nav-dd-tx span{display:block;font-size:12px;color:var(--mut-2);margin-top:1px}
.nav-actions{display:flex;align-items:center;gap:9px;margin-left:8px}
.nav-actions .ghost{font-size:13px;padding:10px 15px}
@media(max-width:1180px){.nav-actions .ghost{display:none}}
.nav-mob{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--hair);background:rgba(255,255,255,.03);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.nav-mob svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
.nav .cta{font-size:13px;padding:8px 8px 8px 16px}
/* controls on the white nav */
.nav .ghost,.nav.stuck .ghost{color:#1e2d4e;border-color:#d7dfe8;background:#fff;font-weight:600}
.nav .ghost svg{stroke:#0b6f8a}
.nav .ghost:hover{border-color:#0a7a45;background:#f3fbf7;color:#0a7a45}
.nav .ghost:hover svg{stroke:#0a7a45}
.nav .nav-mob{color:#1e2d4e;border-color:#d7dfe8;background:#fff}.nav .cta .knob{width:26px;height:26px}

/* ── hero (full-bleed data→shield canvas) ── */
/* capped height so tall screens don't open a big gap under the header */
.hero{position:relative;overflow:hidden;min-height:min(calc(100vh - 124px),620px);display:flex;align-items:center;padding:32px 0 28px;
  background:
    radial-gradient(ellipse 60% 70% at 80% 50%,rgba(14,165,201,.20) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%,rgba(34,197,94,.12) 0%,transparent 60%),
    #0f1e30}
.hero+.section{padding-top:0} /* hero already carries its own bottom space */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* luminous aura radiating from behind the shield. --sx/--sy mirror where the
   canvas draws the shield (73.5% x 50% wide, centred when narrow) so the glow
   sits behind the mark instead of floating off to one side. */
.hero{--sx:73.5%;--sy:50%}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  left:var(--sx);top:var(--sy);transform:translate(-50%,-50%)}
.hero-orb.a{width:min(46vw,660px);aspect-ratio:1;filter:blur(90px);opacity:.62;
  background:radial-gradient(circle,rgba(20,180,162,.42),rgba(14,165,201,.20) 45%,transparent 72%)}
.hero-orb.c{width:min(26vw,380px);aspect-ratio:1;filter:blur(64px);opacity:.55;
  background:radial-gradient(circle,rgba(74,222,128,.40),rgba(34,211,238,.22) 52%,transparent 74%)}
/* a soft counter-glow keeps the copy side from going flat */
.hero-orb.b{width:min(34vw,460px);aspect-ratio:1;filter:blur(96px);opacity:.34;
  left:6%;top:78%;background:radial-gradient(circle,rgba(74,222,128,.30),transparent 70%)}
@media(max-width:900px){.hero{--sx:50%;--sy:42%}.hero-orb.b{display:none}}
.hero .wrap{position:relative;z-index:2;width:100%}
/* "Security that protects." needs ~11.1px of width per 1px of font-size, so the
   copy column is kept wide enough for the capped font size to never clip. */
.hero-copy{max-width:clamp(320px,55vw,820px)}
/* headline holds exactly two lines: "IT that performs." / "Security that protects." */
.hero h1{font-family:var(--display),sans-serif;font-size:clamp(28px,4.5vw,66px);font-weight:800;letter-spacing:-.04em;line-height:1.06;margin:30px 0 0}
.hero h1 .l{display:block;white-space:nowrap}
/* decode: every character is present from the first frame (so the line never
   reflows and the gradient clip stays intact) and resolves on a stagger */
.hero h1 .l{font-variant-ligatures:none}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:18.5px;line-height:1.68;color:var(--mut);max-width:46ch;margin-top:32px}
.hero-cta-row{display:flex;gap:14px;align-items:center;margin-top:42px;flex-wrap:wrap}
.hero-ticks{display:flex;gap:26px;margin-top:46px;flex-wrap:wrap}
.hero-ticks span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--mut-2)}
.hero-ticks svg{width:15px;height:15px;stroke:var(--green-lt);stroke-width:1.7;fill:none}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ── full-bleed proof bar: the page's horizontal anchor under the hero ── */
/* acid band directly under the hero: colour lands high on the page, and the
   proof numbers are what it lights up */
.statbar{position:relative;overflow:hidden;
  background:var(--tier);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.statbar::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.5),rgba(56,189,248,.5),transparent)}
.statbar-inner{max-width:1240px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(5,1fr)}
.statbar .s{padding:clamp(22px,2.4vw,32px) clamp(14px,1.8vw,26px);position:relative}
.statbar .s+.s::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--hair)}
.statbar .n{font-family:var(--body),sans-serif;font-weight:800;font-size:clamp(24px,2.5vw,34px);
  letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.statbar .k{font-size:13px;color:var(--mut);margin-top:9px;line-height:1.4}
.statbar .s+.s::before{background:var(--hair)}
@media(max-width:900px){.statbar-inner{grid-template-columns:repeat(2,1fr)}
  .statbar .s:nth-child(odd)::before{display:none}
  .statbar .s{border-top:1px solid var(--hair)}
  .statbar .s:nth-child(-n+2){border-top:0}}
@media(max-width:560px){.statbar-inner{grid-template-columns:repeat(2,1fr)}}

/* ── operations statement ── */
.ops{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,64px);align-items:start}
.ops-h{font-family:var(--body),sans-serif;font-size:clamp(26px,3.3vw,42px);font-weight:800;
  letter-spacing:-.032em;line-height:1.1;margin:16px 0 0;max-width:20ch;text-wrap:balance}
.ops-h .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ops-p{color:var(--mut);font-size:16.5px;line-height:1.68;margin-top:18px;max-width:56ch}
.ops-figs{display:flex;flex-direction:column;gap:0;margin:6px 0 0}
.ops-figs>div{padding:16px 0;border-top:1px solid var(--hair-2)}
.ops-figs>div:last-child{border-bottom:1px solid var(--hair-2)}
.ops-figs dt{font-family:var(--body),sans-serif;font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em}
.ops-figs dd{margin:3px 0 0;font-size:13.5px;color:var(--mut-2)}
@media(max-width:900px){.ops{grid-template-columns:1fr}}

/* ── five control planes: one continuous perimeter, not five boxes ── */
.perimeter{position:relative;margin-top:8px}
.peri-line{position:absolute;left:0;right:0;top:19px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.30) 8%,rgba(74,222,128,.30) 50%,rgba(56,189,248,.30) 92%,transparent)}
.peri-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.2vw,34px);position:relative}
.peri{position:relative;padding-top:0}
.peri-node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--void-2);border:1px solid var(--line2,rgba(140,180,235,.22));position:relative;z-index:1;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .45s var(--spring)}
.peri-node svg{width:19px;height:19px;stroke:var(--sky);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s var(--ease)}
.peri h3{font-family:var(--body),sans-serif;font-size:16.5px;font-weight:700;color:#fff;letter-spacing:-.012em;margin:18px 0 7px}
.peri p{font-size:13.5px;line-height:1.6;color:var(--mut);margin:0}
.peri:hover .peri-node{border-color:rgba(74,222,128,.6);background:rgba(74,222,128,.10);transform:translateY(-3px)}
.peri:hover .peri-node svg{stroke:var(--green-lt)}
@media(max-width:1000px){.peri-row{grid-template-columns:repeat(2,1fr);gap:30px}.peri-line{display:none}}
@media(max-width:560px){.peri-row{grid-template-columns:1fr}}


/* ── light panels: white / grey with dark type ─────────────────────────── */
.section.paper::before,.section.grey::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.section.paper::before{background:var(--paper)}
.section.grey::before{background:var(--grey)}
.section.paper,.section.grey{color:var(--ink-d)}
.section.paper h2,.section.grey h2,.section.paper h3,.section.grey h3,
.section.paper h4,.section.grey h4{color:var(--ink-d)}
.section.paper p,.section.grey p{color:var(--mut-d)}
.section.paper .sec-head h2 .g,.section.grey .sec-head h2 .g{
  background:linear-gradient(102deg,#14a05c,#0b8fb0 62%,#1183c9);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* eyebrow on light */
.section.paper .eyebrow,.section.grey .eyebrow{color:#0b6f8a;background:rgba(11,111,138,.09);border-color:rgba(11,111,138,.26)}
.section.paper .eyebrow .dot,.section.grey .eyebrow .dot{background:#12a05f}
/* structure on light */
.section.paper .shell,.section.grey .shell{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.section.paper .core{background:transparent;border:0;box-shadow:none;border-radius:0}
/* on grey, a white card still earns its keep; on white it does not */
.section.grey .core{background:#fff;border:1px solid var(--grey-line);border-radius:18px;
  box-shadow:0 10px 30px -24px rgba(15,30,48,.35)}
.section.paper .svc,.section.grey .svc{border-top-color:var(--grey-line)}
.section.paper .svc-list a:last-child .svc,.section.grey .svc-list a:last-child .svc{border-bottom-color:var(--grey-line)}
.section.paper .svc h4,.section.grey .svc h4{color:var(--ink-d)}
.section.paper .svc .n,.section.grey .svc .n{color:#7f939b}
.section.paper .svc .arw,.section.grey .svc .arw{border-color:var(--grey-line)}
.section.paper .svc .arw svg,.section.grey .svc .arw svg{stroke:#5d747d}
.section.paper .mini-ico,.section.grey .mini-ico{background:rgba(11,111,138,.08);border-color:rgba(11,111,138,.20)}
.section.paper .mini-ico svg,.section.grey .mini-ico svg{stroke:#0b6f8a}
.section.paper .ghost,.section.grey .ghost{color:var(--ink-d);border-color:var(--grey-line);background:#fff}
.section.paper .ghost svg,.section.grey .ghost svg{stroke:#0b6f8a}
.section.paper .ghost:hover,.section.grey .ghost:hover{border-color:#0b6f8a;background:#f4fbfd}
.section.paper .ops-figs>div,.section.grey .ops-figs>div{border-top-color:var(--grey-line)}
.section.paper .ops-figs>div:last-child,.section.grey .ops-figs>div:last-child{border-bottom-color:var(--grey-line)}
.section.paper .ops-figs dt,.section.grey .ops-figs dt{color:var(--ink-d)}
.section.paper .ops-figs dd,.section.grey .ops-figs dd{color:var(--mut-d)}
.section.paper .soc-live,.section.grey .soc-live{color:#0a7a45}
.section.paper .soc-live .pulse,.section.grey .soc-live .pulse{background:#0a7a45}
.section.paper .soc-live .pulse::after,.section.grey .soc-live .pulse::after{border-color:#0a7a45}
.section.paper .peri-line,.section.grey .peri-line{background:linear-gradient(90deg,transparent,rgba(11,111,138,.35) 9%,rgba(11,111,138,.35) 91%,transparent)}
.section.paper .peri-node,.section.grey .peri-node{background:#fff;border-color:var(--grey-line)}
.section.paper .peri-node svg,.section.grey .peri-node svg{stroke:#0b6f8a}
.section.paper .peri h3,.section.grey .peri h3{color:var(--ink-d)}
.section.paper .peri p,.section.grey .peri p{color:var(--mut-d)}
.section.paper blockquote,.section.grey blockquote{color:var(--ink-d)}
.section.paper .quote-aside,.section.grey .quote-aside{border-left-color:var(--grey-line)}
.section.paper .q-id b,.section.grey .q-id b{color:var(--ink-d)}
.section.paper .q-id span,.section.grey .q-id span,
.section.paper .q-meta,.section.grey .q-meta{color:var(--mut-d)}
.section.paper .q-meta,.section.grey .q-meta{border-top-color:var(--grey-line)}
.section.paper .q-meta strong,.section.grey .q-meta strong{color:#0b6f8a}
.section.paper .badge,.section.grey .badge{background:rgba(18,160,95,.10);border-color:rgba(18,160,95,.30);color:#0d7a49}
.section.paper .why .core,.section.grey .why .core{border-left:0}
@media(max-width:900px){.section.paper .quote-aside,.section.grey .quote-aside{border-top-color:var(--grey-line)}}

/* consistent breathing room above every section label */
.sec-head .eyebrow,.ops-copy .soc-live{margin-top:clamp(6px,1vw,14px)}
.section>.wrap{padding-top:clamp(10px,1.4vw,20px)}

/* ── shells / sections ── */
.shell{background:rgba(255,255,255,.02);border:1px solid var(--hair);padding:6px;border-radius:26px;box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.core{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1px solid var(--hair-2);border-radius:20px;box-shadow:inset 0 1px 1px rgba(255,255,255,.06);height:100%}
/* one vertical rhythm for the whole page (was 96px + ad-hoc inline overrides,
   which stacked into 192px gaps between sections) */
.section{padding:var(--sec) 0}
.section+.section{padding-top:0}          /* consecutive sections share one gap */
.section.spaced{padding-top:var(--sec)}   /* opt back in where a break is wanted */
/* headings get the full column so they don't wrap for no reason; the
   supporting paragraph keeps a readable measure of its own */
.sec-head{max-width:none;margin-bottom:clamp(26px,2.6vw,36px)}
.sec-head h2{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:16px 0 14px;max-width:1150px;text-wrap:balance}
.sec-head p{max-width:62ch}
.sec-head h2 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{color:var(--mut);font-size:16px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.b{padding:6px;border-radius:26px}
.b .core{padding:28px;display:flex;flex-direction:column;gap:14px;border-radius:20px}
.b-soc{grid-column:span 7;grid-row:span 2}
.b-stat{grid-column:span 5}.b-stat-sm{grid-column:span 5}.b-wide{grid-column:span 12}
.soc-live{display:flex;align-items:center;gap:10px;font-family:var(--body),sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-lt)}
.soc-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--green-lt);position:relative}
.soc-live .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--green-lt);opacity:.5;animation:ring 2.4s var(--ease) infinite}
.b-soc h3{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.14}
.b-soc p{color:var(--mut);font-size:14.5px;max-width:46ch}
.soc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:auto;padding-top:16px;border-top:1px solid var(--hair-2)}
.soc-metrics b{display:block;font-family:var(--body),sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.soc-metrics span{font-size:11px;color:var(--mut-2)}
.stat-big{font-family:var(--body),sans-serif;font-size:clamp(38px,5vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat-big.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:12.5px;color:var(--mut)}
.stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.mini-ico{width:42px;height:42px;border-radius:12px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.14);display:grid;place-items:center;flex:none}
.mini-ico svg{width:20px;height:20px;stroke:var(--sky);stroke-width:1.4;fill:none}
.planes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.plane{padding:20px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid var(--hair-2);display:flex;flex-direction:column;gap:9px;transition:transform .5s var(--spring),border-color .4s var(--ease),background .4s var(--ease)}
.plane:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.04)}
.plane .n{font-family:var(--body),sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--sky)}
.plane h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.plane p{font-size:12.5px;color:var(--mut);line-height:1.55;flex:1}

/* managed IT split */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.svc{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px 4px;border-top:1px solid var(--hair-2);transition:transform .45s var(--spring)}
.svc-list a:last-child .svc,.svc-list .svc:last-child{border-bottom:1px solid var(--hair-2)}
.svc-list a{display:block}
.svc:hover{transform:translateX(9px)}
.svc .n{font-family:var(--body),sans-serif;font-size:12px;font-weight:500;color:var(--mut-2);font-variant-numeric:tabular-nums}
.svc h4{font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.015em}
.svc p{font-size:13.5px;color:var(--mut);margin-top:4px}
.svc .arw{width:38px;height:38px;border-radius:999px;border:1px solid var(--hair);display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s var(--ease);flex:none}
.svc:hover .arw{background:var(--grad);border-color:transparent}
.svc .arw svg{width:15px;height:15px;stroke:var(--mut);stroke-width:1.7;fill:none;transition:stroke .4s var(--ease)}
.svc:hover .arw svg{stroke:#04121a}

/* why us proof */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why{padding:6px;border-radius:24px}
.why .core{padding:26px;border-radius:18px;height:100%;display:flex;flex-direction:column;gap:12px}
.why .wi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(74,222,128,.16),rgba(56,189,248,.12));border:1px solid rgba(74,222,128,.24)}
.why .wi svg{width:22px;height:22px;stroke:var(--green-lt);stroke-width:1.5;fill:none}
.why h4{font-size:18px;font-weight:700;letter-spacing:-.015em}
.why p{font-size:13.5px;color:var(--mut);line-height:1.6}
a.why{display:block;text-decoration:none;transition:transform .4s var(--spring)}
a.why:hover{transform:translateY(-3px)}
a.why:hover .tag{color:var(--green-lt)}
.why .tag em{font-style:normal;display:inline-block;opacity:0;margin-left:6px;transform:translateX(-4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
a.why:hover .tag em{opacity:1;transform:translateX(0)}
.why .tag{margin-top:auto;font-family:var(--body),sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--sky);padding-top:8px}

/* symposium */
.symp .core{padding:44px;display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:center;background:radial-gradient(80% 120% at 90% 10%,rgba(14,165,201,.2),transparent 60%),linear-gradient(180deg,rgba(18,28,42,.9),rgba(9,14,22,.92))}
.symp h3{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:12px 0 12px}
.symp p{color:var(--mut);font-size:15px;max-width:48ch}
.symp-facts{display:flex;flex-direction:column;border-left:1px solid rgba(56,189,248,.28);padding-left:24px}
.symp-facts div{padding:12px 0;border-bottom:1px solid var(--hair-2)}
.symp-facts div:last-child{border:0}
.symp-facts b{display:block;font-family:var(--body),sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.symp-facts span{font-size:12px;color:var(--mut-2);letter-spacing:.04em;text-transform:uppercase}
.symp .cta{margin-top:22px}

/* testimonial */
/* two columns so the quote fills the card instead of leaving half of it empty */
.quote-wrap .core{padding:clamp(30px,3.4vw,52px);display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:clamp(24px,3.4vw,56px);align-items:center}
.quote-main{min-width:0}
blockquote{font-family:var(--body),sans-serif;font-size:clamp(19px,2.15vw,29px);font-weight:500;
  letter-spacing:-.018em;line-height:1.42;max-width:52ch;margin:18px 0 0}
.quote-aside{border-left:1px solid var(--hair);padding-left:clamp(20px,2.4vw,34px);align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;gap:14px}
@media(max-width:900px){
  .quote-wrap .core{grid-template-columns:1fr;gap:26px}
  .quote-aside{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:22px;align-self:auto}
}
blockquote .hl{background:linear-gradient(transparent 60%,rgba(74,222,128,.22) 60%)}
.quote-aside .badge{width:46px;height:46px;border-radius:14px;background:rgba(74,222,128,.10);
  border:1px solid rgba(74,222,128,.28);display:grid;place-items:center;
  font-weight:700;font-size:14px;color:var(--green-lt);letter-spacing:.04em}
.q-id b{display:block;font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.q-case{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--hair-2);font-size:13.5px;font-weight:700;color:var(--sky);
  transition:color .3s var(--ease)}
.q-case svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.q-case svg{transition:transform .3s var(--ease)}
.q-case:hover svg{transform:translateX(4px)}
.section.paper .q-case,.section.grey .q-case{color:#0b6f8a;border-top-color:var(--grey-line)}
.section.paper .q-case:hover,.section.grey .q-case:hover{color:#0a7a45}
.q-id span{display:block;font-size:13px;color:var(--mut-2);margin-top:2px}
.q-meta{font-size:12px;color:var(--mut-2);line-height:1.5;padding-top:12px;border-top:1px solid var(--hair-2)}
.q-meta strong{display:block;font-size:14.5px;font-weight:700;color:var(--sky);letter-spacing:-.01em;margin-top:3px;line-height:1.35}
@media(max-width:900px){.quote-aside{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
  .q-meta{border-top:0;padding-top:0;margin-left:auto;text-align:right}}
.q-who{display:flex;align-items:center;gap:14px;margin-top:30px}
.q-who .badge{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--hair);display:grid;place-items:center;font-family:var(--body),sans-serif;font-weight:700;color:var(--sky)}
.q-who b{display:block;font-size:15px;font-weight:600}
.q-who span{font-size:13px;color:var(--mut-2)}

/* close */
.close .core{padding:70px 48px;text-align:center;background:radial-gradient(70% 140% at 50% 120%,rgba(34,211,238,.18),transparent 60%),linear-gradient(180deg,rgba(18,28,42,.9),rgba(9,14,22,.92))}
.close h2{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.04;max-width:18ch;margin:0 auto 16px}
.close h2 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.close p{color:var(--mut);font-size:16px;margin-bottom:30px}
.close-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--hair-2);margin-top:40px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;font-size:13px;color:var(--mut-2);flex-wrap:wrap}
.foot a{margin-left:18px}.foot a:hover{color:var(--sky)}

/* ── parallax depth ──────────────────────────────────────────────────────
   Scroll-driven CSS animations: no scroll listeners, transform/opacity only,
   so everything stays on the GPU. Layers move at different rates to build
   real depth: ambient mesh (deepest) < section glows < hero visual < content.
   Applied only to decorative layers, never to .rv elements, so reveal
   transforms are never fought over. Degrades to static where unsupported. */
.plx-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.5;will-change:transform}
.plx-a{width:520px;height:520px;background:radial-gradient(circle,rgba(74,222,128,.22),transparent 68%);top:-120px;left:-160px}
.plx-b{width:600px;height:600px;background:radial-gradient(circle,rgba(14,165,201,.22),transparent 68%);top:40px;right:-200px}
.plx-c{width:560px;height:560px;background:radial-gradient(circle,rgba(34,211,238,.16),transparent 68%);bottom:-180px;left:30%}
.section{position:relative;isolation:isolate;overflow:hidden}
.section>.wrap{position:relative;z-index:1}

/* ── surface tiers & colour fields ──────────────────────────────────────
   .tier   subtle value lift so consecutive sections are not the same slab
   .field  a saturated brand panel that owns the whole region
   Full-bleed bands, straight edges.                                        */
.section.tier::before,.section.field::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.section.tier::before{background:var(--tier)}
.section.field::before{background:var(--field-blue)}
.section.field.green::before{background:var(--field-green)}
/* a soft light source inside the field keeps it from reading as flat ink */
.section.field::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62% 92% at 78% 10%,rgba(255,255,255,.14),transparent 62%)}
.section.field .wrap{padding-top:clamp(14px,2vw,26px);padding-bottom:clamp(14px,2vw,26px)}
/* content sits directly on a colour field: the dark shell/core would otherwise
   cover the panel it is meant to sit on */
.section.field .shell{background:transparent;border-color:rgba(255,255,255,.22);box-shadow:none;padding:0}
.section.acid .shell{background:transparent;border-color:transparent;box-shadow:none;padding:0}
.section.field .core,.section.acid .core{background:transparent;border-color:transparent;box-shadow:none}
.section.field .symp .core{background:transparent}
.section.field .symp-facts{border-left-color:rgba(255,255,255,.34)}
.section.field .symp-facts div{border-bottom-color:rgba(255,255,255,.18)}
.section.field .symp-facts b{color:#fff}
.section.field .symp-facts span{color:rgba(255,255,255,.72)}
.section.field .cta{background:#04222b;color:#eafff6;box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
.section.field .cta .knob{background:rgba(234,255,246,.18)}
.section.field .cta .knob svg{stroke:#eafff6}

/* on a colour field nothing is a card: the "why" tiles become hairline columns
   and the perimeter re-tints for the lighter ground */
.section.field .why{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.section.field .why .core{background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:0 0 0 clamp(16px,1.9vw,26px);border-left:1px solid rgba(255,255,255,.30)}
.section.field .why-grid{gap:clamp(22px,3vw,46px)}
.section.field .why .wi{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
.section.field .why .wi svg{stroke:#eafff6}
.section.field .why h4{color:#fff}
.section.field .why p{color:rgba(255,255,255,.84)}
.section.field .why .tag{color:#dcfff4}
.section.field .peri-line{background:linear-gradient(90deg,transparent,rgba(255,255,255,.42) 9%,rgba(255,255,255,.42) 91%,transparent)}
.section.field .peri-node{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.42)}
.section.field .peri-node svg{stroke:#eafff6}
.section.field .peri h3{color:#fff}
.section.field .peri p{color:rgba(255,255,255,.84)}
.section.field .peri:hover .peri-node{background:rgba(255,255,255,.30);border-color:#fff;transform:translateY(-3px)}
.section.field .peri:hover .peri-node svg{stroke:#fff}
/* type on a colour field */
.section.field .sec-head h2,.section.field h2,.section.field h3{color:#fff}
.section.field .sec-head p,.section.field p{color:rgba(255,255,255,.86)}
.section.field .eyebrow{color:#eafff6;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.section.field .eyebrow .dot{background:#eafff6}
/* ── the acid panel: one loud moment, used once, at the point of action ──
   Full-chroma brand gradient with near-black type. Everything inside inverts:
   the primary button goes solid dark so it stays the brightest control. */
.section.acid{color:#04121a}
.section.acid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(112deg,#4ade80 0%,#22d3ee 55%,#38bdf8 100%);}
.section.acid::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 100% at 20% 0%,rgba(255,255,255,.42),transparent 58%),
             radial-gradient(60% 90% at 92% 96%,rgba(4,18,26,.18),transparent 62%);}
.section.acid h2,.section.acid h3{color:#04121a}
.section.acid h2 .g{background:none;-webkit-background-clip:initial;background-clip:initial;color:#04303a}
.section.acid p{color:rgba(4,18,26,.78)}
.section.acid .cta{background:#04121a;color:#eafff6;box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.section.acid .cta .knob{background:rgba(234,255,246,.18)}
.section.acid .cta .knob svg{stroke:#eafff6}
.section.acid .ghost{color:#04121a;border-color:rgba(4,18,26,.34);background:rgba(255,255,255,.22)}
.section.acid .ghost svg{stroke:#04121a}
.section.acid .ghost:hover{background:rgba(255,255,255,.42);border-color:rgba(4,18,26,.5)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body::before{animation:meshDrift linear both;animation-timeline:scroll(root)}
    @keyframes meshDrift{to{transform:translate3d(0,-7%,0)}}
    .hero-canvas{animation:heroPlx linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes heroPlx{to{transform:translate3d(0,-110px,0);opacity:.25}}
    .plx-glow{animation:glowPlx linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes glowPlx{from{transform:translate3d(0,90px,0)}to{transform:translate3d(0,-90px,0)}}
    .plx-b{animation-name:glowPlxB}
    @keyframes glowPlxB{from{transform:translate3d(0,-70px,0)}to{transform:translate3d(0,70px,0)}}
  }
}

/* reveal */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--spring),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .soc-live .pulse::after,.viz-hud .live .p::after{animation:none}
  *{transition:none!important}
}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .viz{order:-1;max-width:520px}
  .b-soc{grid-column:span 12;grid-row:auto}
  .b-stat,.b-stat-sm{grid-column:span 6}
  .planes{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:32px}
  .symp .core{grid-template-columns:1fr;gap:28px}
  .why-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-links,.nav-actions .ghost{display:none}
  .nav-mob{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;height:auto;padding:12px 20px 20px;background:rgba(10,15,24,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair)}
  .nav.open .nav-links>li{flex-direction:column;align-items:stretch;height:auto}
  .nav.open .nav-top-link{justify-content:space-between;height:auto;padding:14px 12px;color:var(--ink);font-size:16px}
  .nav.open .nav-top-link:hover{color:#fff}
  .nav.open .nav-links>li{border-bottom:1px solid var(--hair-2)}
  .nav.open .nav-links>li:last-child{border-bottom:0}
  /* top-level only on mobile: taps navigate to the section page */
  .nav.open .nav-dd{display:none !important}
  .nav.open .nav-chev{display:none}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .topbar{display:none}
  .b-stat,.b-stat-sm{grid-column:span 12}
  .planes{grid-template-columns:1fr}
  .b .core,.symp .core,.quote-wrap .core,.close .core{padding:26px}
  .close .core{padding:46px 22px}
  .symp-facts{border-left:0;padding-left:0;border-top:1px solid rgba(56,189,248,.28);padding-top:16px}
  /* mobile refinements */
  .nav-inner{padding:0 20px;height:64px}
  .nav-logo img{height:34px}
  /* keep the Schedule Consult CTA secondary to the logo on mobile */
  .nav-actions{gap:8px;margin-left:8px}
  .nav .cta{font-size:12px;padding:8px 13px}
  .nav .cta .knob{display:none}
  .hero{min-height:auto;padding:26px 0 34px}
  .hero h1{margin-top:20px}
  .hero-sub{margin-top:18px;font-size:16.5px;max-width:none}
  .hero-cta-row{margin-top:24px;gap:10px}
  .hero-cta-row .cta,.hero-cta-row .ghost{width:100%;justify-content:center}
  .hero-ticks{margin-top:24px;gap:12px 18px}
  .hero-canvas{opacity:.20}
  .sec-head h2{font-size:clamp(25px,7.4vw,32px)}
  .ops-h{font-size:clamp(23px,6.8vw,30px);max-width:none}
  .ops-p{font-size:15.5px}
  .statbar .s{padding:18px 20px}
  .peri-row{gap:26px}
  .quote-wrap .core{padding:24px 20px}
  blockquote{font-size:19px;line-height:1.45;max-width:none}
  .close h2{font-size:clamp(26px,7.6vw,34px)}
  .close-row .cta,.close-row .ghost{width:100%;justify-content:center}
  .foot{padding:22px 20px;font-size:12px}
  .svc{grid-template-columns:1fr auto;gap:14px;padding:20px 2px}
  .svc p{font-size:13px}
}


/* ── site footer ─────────────────────────────────────────────── */
.site-foot{position:relative;z-index:1;border-top:1px solid var(--hair-2);margin-top:clamp(44px,5vw,76px);background:linear-gradient(180deg,transparent,rgba(0,0,0,.18))}
.foot-top{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.5fr 2.5fr;gap:clamp(30px,4vw,64px);padding:clamp(42px,4.6vw,64px) 32px clamp(30px,3vw,44px)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr;gap:38px}}
.foot-logo{display:inline-block}
.foot-logo img{height:34px;width:auto;display:block}
.foot-tag{font-size:13.5px;line-height:1.62;color:var(--mut);max-width:36ch;margin:17px 0 20px}
.foot-contact{display:flex;flex-direction:column;gap:11px}
.foot-contact a,.foot-contact span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mut);text-decoration:none;transition:color .3s var(--ease)}
.foot-contact a:hover{color:var(--green-lt)}
.foot-contact svg{width:15px;height:15px;stroke:var(--sky);fill:none;stroke-width:1.6;flex:none}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:680px){.foot-cols{grid-template-columns:1fr 1fr;gap:28px 24px}}
@media(max-width:400px){.foot-cols{grid-template-columns:1fr}}
.foot-col h4{font-family:var(--body),sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2);margin:0 0 13px}
.foot-col a{display:block;font-size:13.5px;color:var(--mut);text-decoration:none;padding:5px 0;transition:color .3s var(--ease),transform .3s var(--ease)}
.foot-col a:hover{color:var(--green-lt);transform:translateX(3px)}
.foot-bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 32px;border-top:1px solid var(--hair-2);font-size:12.5px;color:var(--mut-2)}
.foot-badges{display:flex;gap:8px;flex-wrap:wrap}
.foot-badges span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-lt);background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.24);padding:4px 10px;border-radius:999px}
.foot-legal a{color:var(--mut-2);text-decoration:none;margin-left:16px;transition:color .3s var(--ease)}
.foot-legal a:hover{color:var(--sky)}
@media(max-width:600px){.foot-top{padding-left:20px;padding-right:20px}.foot-bar{padding:18px 20px}.foot-bar{justify-content:flex-start}}


/* ── in-section sub-navigation ─────────────────────────────────── */
.subnav{position:sticky;top:80px;z-index:39;border-bottom:1px solid var(--hair-2);background:#0f1e30}
.subnav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:0 32px;height:54px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-label{font-family:var(--body),sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2);flex:none}
.subnav-links{display:flex;gap:5px;flex:none}
.subnav-links a{font-family:var(--body),sans-serif;font-size:13.5px;font-weight:600;color:var(--mut);white-space:nowrap;padding:7px 14px;border-radius:999px;text-decoration:none;transition:color .3s var(--ease),background .3s var(--ease)}
.subnav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.subnav-links a.active{color:#fff;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.34);font-weight:700}
@media(max-width:760px){.subnav{top:64px}.subnav-inner{padding:0 20px;gap:12px}.subnav-label{display:none}}

/* ── brand-photo hero frame (replaces the live-data panels) ────── */
.pg-photo{position:relative;border:1px solid var(--hair);border-radius:24px;padding:7px;background:rgba(255,255,255,.04);box-shadow:0 40px 80px -44px rgba(0,0,0,.85);overflow:hidden}
.pg-photo img{width:100%;display:block;border-radius:18px;aspect-ratio:5/4;object-fit:cover}
.pg-photo::after{content:"";position:absolute;inset:7px;border-radius:18px;pointer-events:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.14);background:linear-gradient(180deg,transparent 60%,rgba(9,14,22,.28))}
@media(max-width:980px){.pg-photo img{aspect-ratio:16/10}}

/* ── real service-area / geo maps (NY state + neighbors, projected) ── */
.gm-neighbor{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.13);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gm-ny{fill:rgba(22,110,82,.30);stroke:rgba(110,231,183,.72);stroke-width:1.7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gm-dot{fill:rgba(234,255,246,.82);transition:transform .3s var(--spring),fill .3s var(--ease);transform-box:fill-box;transform-origin:center}
.gm-pin{cursor:pointer}
.gm-pin:hover .gm-dot{transform:scale(1.5);fill:#4ade80}
.gm-hq circle:nth-of-type(2){filter:drop-shadow(0 0 7px rgba(74,222,128,.55))}
.gm-label{fill:#fff;font-family:var(--body),sans-serif;font-weight:700;font-size:13px}
.gm-label-sm{fill:rgba(234,255,246,.7);font-family:var(--body),sans-serif;font-weight:600;font-size:12px}

/* ── content detail pages (blog article / glossary term / case study) ── */
.detail-hero{position:relative;overflow:hidden;padding:52px 0 44px;
  background:radial-gradient(ellipse 60% 70% at 84% 26%,rgba(14,165,201,.16),transparent 70%),
             radial-gradient(ellipse 46% 60% at 5% 92%,rgba(34,197,94,.10),transparent 60%),#0f1e30}
.detail-hero .wrap{position:relative;z-index:2;max-width:1000px}
.detail-narrow{max-width:768px;margin-inline:auto}
.art-cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--body),sans-serif;font-size:11.5px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green-lt)}
.detail-h1{font-family:var(--display),sans-serif;font-size:clamp(29px,4.2vw,50px);font-weight:800;
  letter-spacing:-.035em;line-height:1.07;margin:15px 0 0;max-width:22ch;color:#fff}
.detail-h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.art-meta{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;margin-top:22px;font-size:13px;color:var(--mut-2)}
.art-meta span{display:inline-flex;align-items:center;gap:7px}
.art-meta svg{width:14px;height:14px;stroke:var(--mut-2);fill:none;stroke-width:1.7}
.art-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--mut-2);opacity:.5;padding:0}
.art-lede{font-size:19px;line-height:1.65;color:var(--ink);max-width:66ch;margin:22px 0 0;font-weight:500}
/* article prose */
.article{max-width:768px;margin:0 auto}
.article>*:first-child{margin-top:0}
.article h2{font-family:var(--display),sans-serif;font-size:clamp(22px,2.6vw,29px);font-weight:700;
  letter-spacing:-.025em;color:#fff;margin:46px 0 0;line-height:1.2}
.article h3{font-family:var(--body),sans-serif;font-size:19px;font-weight:700;color:#fff;margin:34px 0 0}
.article p{font-size:16.5px;line-height:1.76;color:var(--mut);margin:18px 0 0}
.article p strong,.article li strong{color:var(--ink);font-weight:700}
.article a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.article ul,.article ol{margin:20px 0 0;padding-left:4px;display:flex;flex-direction:column;gap:11px;list-style:none;counter-reset:li}
.article li{position:relative;font-size:16.5px;line-height:1.7;color:var(--mut);padding-left:30px}
.article ul li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50%;
  background:var(--grad)}
.article ol li{counter-increment:li}
.article ol li::before{content:counter(li);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--body),sans-serif;font-size:11px;font-weight:800;color:#0a1116;
  background:var(--green-lt)}
.article blockquote{margin:34px 0 0;padding:22px 28px;border-left:3px solid var(--green-lt);
  background:rgba(255,255,255,.04);border-radius:0 16px 16px 0}
.article blockquote p{margin:0;font-family:var(--display),sans-serif;font-size:20px;line-height:1.5;
  color:var(--ink);font-weight:600;letter-spacing:-.01em}
.article blockquote cite{display:block;margin-top:14px;font-style:normal;font-size:13px;font-weight:700;color:var(--green-lt)}
/* related terms / services chips */
.tchips{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px}
.tchip{font-family:var(--body),sans-serif;font-size:14px;font-weight:600;color:#eafff6;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:999px;
  text-decoration:none;transition:background .3s var(--ease),transform .35s var(--spring),border-color .3s var(--ease)}
.tchip:hover{background:rgba(255,255,255,.16);border-color:rgba(74,222,128,.4);transform:translateY(-2px)}
/* case-study challenge/solution/results split */
.cs-blocks{display:grid;grid-template-columns:210px 1fr;gap:clamp(20px,3vw,52px);align-items:start;
  padding:38px 0;border-top:1px solid var(--hair)}
.cs-blocks:first-of-type{border-top:0}
.cs-blocks .lbl{font-family:var(--body),sans-serif;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-lt);position:sticky;top:150px}
.cs-blocks .body>*:first-child{margin-top:0}
@media(max-width:760px){.cs-blocks{grid-template-columns:1fr;gap:12px;padding:28px 0}.cs-blocks .lbl{position:static;top:auto}}
/* related-article cards (.post) — shared so detail pages render them, not just
   the index pages whose local <style> originally defined these */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
a.post{display:block;text-decoration:none;transition:transform .4s var(--spring)}
a.post:hover{transform:translateY(-3px)}
.post .core{padding:24px;border-radius:18px;height:100%;display:flex;flex-direction:column;gap:12px}
.post-tag{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7fe3c4;background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.24);padding:5px 11px;border-radius:999px}
.post h4{font-family:var(--body),sans-serif;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.28;color:#fff}
.post .meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut-2);padding-top:8px}
.post .read{font-size:12.5px;font-weight:600;color:var(--sky);display:inline-flex;align-items:center;gap:7px;transition:gap .3s var(--ease)}
.post .read svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;fill:none;flex:none}
a.post:hover .read{gap:11px}
@media(max-width:900px){.posts{grid-template-columns:1fr}}

/* glossary index entries that link to a term detail page */
.gloss-link{display:block;text-decoration:none;color:inherit;border-radius:12px;margin:-10px;padding:10px;
  transition:background .25s var(--ease),transform .3s var(--spring)}
.gloss-link:hover{background:rgba(11,127,163,.06)}
.gloss-link:hover h4{color:#0b7fa3}
.gloss-link h4::after{content:" \2192";color:#0b7fa3;opacity:0;transition:opacity .25s var(--ease)}
.gloss-link:hover h4::after{opacity:1}


/* ── externalized page-common rules (moved from per-page <style>) ── */
.pg-hero-copy{min-width:0}
.pg-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:980px){.pg-hero .wrap{grid-template-columns:1fr;gap:34px}}
.crumb{font-size:12.5px;color:var(--mut-2);letter-spacing:.02em;margin-bottom:18px}
.crumb a{color:var(--mut)}
.pg-h1{font-family:var(--display),sans-serif;font-size:clamp(30px,4.6vw,58px);font-weight:800;
  letter-spacing:-.04em;line-height:1.04;margin:14px 0 0;max-width:15ch}
.pg-h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-lede{font-size:18px;line-height:1.68;color:var(--mut);max-width:60ch;margin:22px 0 0}
.pg-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.pg-hero-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--hair)}
.pg-hero-facts span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut-2)}
.pg-hero-facts svg{width:15px;height:15px;stroke:var(--green-lt);fill:none;stroke-width:1.7}
.tl-step{padding-right:26px;position:relative}
@media(max-width:900px){.tl{grid-template-columns:1fr 1fr;gap:28px 0}.tl-line{display:none}}
@media(max-width:600px){.tl{grid-template-columns:1fr}}
.risk>div{padding:22px 0;position:relative;border-top:1px solid var(--grey-line)}
.risk h4{font-family:var(--body),sans-serif;font-size:17px;font-weight:700;margin:0 0 4px}
.risk .sub{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#0b7fa3;font-weight:700;margin-bottom:10px}
.risk p{font-size:13.5px;line-height:1.6;margin:0}
@media(max-width:760px){.risk{grid-template-columns:1fr}}
.tl-line{position:absolute;left:0;right:0;top:19px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,127,163,.4) 8%,rgba(11,127,163,.4) 92%,transparent)}
.tl-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;
  border:1px solid var(--grey-line);font-weight:800;font-size:14px;color:#0b7fa3;position:relative;z-index:1}
.tl-step h4{font-family:var(--body),sans-serif;font-size:16.5px;font-weight:700;margin:16px 0 6px}
.tl-step p{font-size:13.5px;line-height:1.6;margin:0}
/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--hair);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;font-family:var(--body),sans-serif;font-size:17px;font-weight:700;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--green-lt);flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:12px 0 0;font-size:15px;line-height:1.7;color:var(--mut);max-width:70ch}
.risk .big{font-family:var(--body),sans-serif;font-size:34px;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:#0b7fa3;margin:0 0 8px;font-variant-numeric:tabular-nums}

/* contextual cross-links injected in body copy */
.xl{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(56,189,248,.5);transition:color .25s var(--ease)}
.xl:hover{color:var(--sky)}
.section.paper .xl,.section.grey .xl{text-decoration-color:rgba(11,111,138,.45)}
.section.paper .xl:hover,.section.grey .xl:hover{color:#0b6f8a}
.section.field .xl,.section.acid .xl{text-decoration-color:rgba(234,255,246,.55)}
.section.field .xl:hover,.section.acid .xl:hover{color:#eafff6}