/* =========================================================
   core.css — bubble shared global styles
   Scope: tokens, reset, layout shell, shared header/nav,
          dropdown flyouts, buttons, shared footer, form card,
          header melt behavior, shared utility/fallback helpers.

   Notes:
   - Re-structured for logical top-to-bottom loading.
   - Active nav system uses flyout submenus that pair with the
     restructured core.js.
   - Older/duplicate nav experiments are preserved below as
     commented legacy blocks rather than deleted.
   ========================================================= */

/* =========================================================
   01) DESIGN TOKENS
   ========================================================= */
:root{
  --mint:#A6FFB5;
  --peri:#8E99FB;
  --ink:#3C4142;

  --bg:#0b0d12;
  --surface-corp:rgba(24,31,43,0.60);
  --surface-corp-soft:rgba(24,31,43,0.50);
  --surface-corp-border:rgba(255,255,255,0.14);
  --surface-corp-shadow:0 18px 46px rgba(0,0,0,0.34);
  --fg:#ffffff;
  --muted:#9aa4ad;

  --brand-grad:linear-gradient(90deg, var(--peri), var(--mint));
  --font-sans:"Century Gothic", CenturyGothic, AppleGothic, "URW Gothic L",
              "Segoe UI", Roboto, Arial, sans-serif;

  --content-max:1120px;
  --radius:22px;
  --shadow-strong:0 24px 70px rgba(0,0,0,0.55);

  /* header / nav timing knobs */
  --header-h:76px; /* JS updates this to actual header height */
  --nav-melt-opacity:0.62;
  --nav-hide-y:-10px;
  --nav-fade-ms:260ms;
  --nav-ease:cubic-bezier(.2,.8,.2,1);

  /* dropdown timing knobs */
  --nav-panel-bg:rgba(11,13,18,0.88);
  --nav-panel-bg-strong:rgba(11,13,18,0.94);
  --nav-panel-border:rgba(255,255,255,0.14);
  --nav-panel-shadow:0 22px 70px rgba(0,0,0,0.42);
  --nav-flyout-shadow:0 18px 50px rgba(0,0,0,0.34);
  --nav-open-dur:420ms;
  --nav-open-ease:cubic-bezier(.22,1,.36,1);
  --nav-sub-dur:320ms;
  --nav-sub-ease:cubic-bezier(.22,1,.36,1);
  --nav-backdrop-dur:900ms;
}

@media (min-width:1200px){ :root{ --content-max:1200px; } }
@media (min-width:1440px){ :root{ --content-max:1280px; } }
@media (min-width:1680px){ :root{ --content-max:1360px; } }
@media (min-width:1920px){ :root{ --content-max:1360px; } }

/* =========================================================
   02) RESET / BASE / SHELL
   ========================================================= */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ scroll-padding-top:calc(var(--header-h, 76px) + 20px); }

body{
  font-family:var(--font-sans);
  color:var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:14px;
  background-color:var(--bg);
  text-rendering:optimizeLegibility;
}


p{
  max-width:65ch;
  margin:0 0 1.1rem;
}

a{ color:inherit; text-decoration:none; }

.skip-link{
  position:fixed;
  left:16px;
  top:-60px;
  z-index:5000;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(11,13,18,0.96);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  transition:top 180ms ease;
}
.skip-link:focus{ top:16px; }

.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

img{
  max-width:100%;
  height:auto;
}

h1,
h3{
  font-weight:400;
  letter-spacing:-0.5px;
}

:focus-visible{
  outline:2px solid color-mix(in srgb, var(--mint) 65%, white);
  outline-offset:3px;
  border-radius:12px;
}

@media (prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

.page-shell{
  max-width:var(--content-max);
  margin:0 auto;
  padding-top:calc(var(--header-h, 76px) + 22px);
  padding-bottom:80px;
}

.spacer-lg{ height:72px; }
.spacer-xl{ height:120px; }

.container{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 16px;
}

/* =========================================================
   02b) SHARED MICRO-COMPONENTS
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(5,7,11,0.35);
  color:rgba(226,232,240,0.92);
  font-size:0.78rem;
  letter-spacing:0.08em;
}

/* =========================================================
   02c) SHARED CORPORATE SURFACES / GRIDS
   ========================================================= */
body:is(.caps,.ind,.partners,.proc,.labs) :is(
  .caps-hero-left, .caps-metric, .caps-section-header, .caps-card, .caps-mini, .caps-final-inner,
  .ind-hero-left, .ind-metric, .ind-section-header, .ind-card,
  .pt-hero-left, .pt-metric, .pt-section-header, .pt-card, .pt-final-inner,
  .proc-hero-left, .proc-metric, .proc-section-header, .proc-card, .proc-phase, .proc-final-inner,
  .labs-hero-left, .labs-metric, .labs-section-header, .lab-card, .labs-card, .labs-final-inner
){
  border-radius:var(--radius);
  border:1px solid var(--surface-corp-border);
background:
  radial-gradient(120% 140% at 0% 0%, rgba(166,255,181,0.045), transparent 48%),
  linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.024)),
  var(--surface-corp);
backdrop-filter:blur(18px) saturate(1.15);
-webkit-backdrop-filter:blur(18px) saturate(1.15);
box-shadow:var(--surface-corp-shadow);
}

.grid-2,
.grid-3{
  display:grid;
  gap:14px;
}
.grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

@media (max-width:1100px){
  .grid-3{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .grid-2{ grid-template-columns:1fr; }
}

.section-sm{ padding:3rem 0; }
.section-md{ padding:5rem 0; }
.section-lg{ padding:7rem 0; }

/* =========================================================
   03) SHARED BUTTONS
   ========================================================= */
.btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.2rem;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.18);
  text-decoration:none;
  color:var(--fg);
  background:transparent;
}

.btn.primary{
  background:#fff;
  color:#111;
}

.btn.ghost{
  background:transparent;
  color:var(--fg);
}

/* =========================================================
   04) HEADER SHELL / LOGO / TOP NAV
   ========================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  transform:none;
  will-change:transform, opacity, background-color, backdrop-filter;
  z-index:2000;
  transition:
    transform var(--nav-fade-ms) var(--nav-ease),
    opacity var(--nav-fade-ms) var(--nav-ease),
    backdrop-filter var(--nav-fade-ms) var(--nav-ease),
    background-color 700ms var(--nav-open-ease);
}

.logo{
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:lowercase;
  font-size:0.9rem;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.logo-mark{
  width:26px;
  height:26px;
  border-radius:999px;
  background:var(--brand-grad);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.75rem;
  color:var(--bg);
  box-shadow:0 0 18px rgba(142,153,251,0.7);
  flex:0 0 auto;
}

.logo-icon{
  height:42px;
  width:auto;
  display:block;
}

.logo span{ opacity:.9; }

.site-header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
}

.nav-mobile-shell{
  display:contents;
}

.nav-toggle{
  appearance:none;
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:42px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.96);
  font:inherit;
  cursor:pointer;
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  box-shadow:0 10px 28px rgba(0,0,0,0.18);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}

.nav-toggle:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.22);
}

.nav-toggle:active{
  transform:translateY(1px);
}

.nav-toggle-label{
  font-size:0.86rem;
  letter-spacing:0.04em;
  text-transform:none;
}

.nav-toggle-lines{
  position:relative;
  width:18px;
  height:12px;
  display:inline-block;
  flex:0 0 auto;
}

.nav-toggle-lines span{
  position:absolute;
  left:0;
  width:100%;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
  transition:transform 220ms ease, top 220ms ease, opacity 220ms ease;
}

.nav-toggle-lines span:first-child{ top:2px; }
.nav-toggle-lines span:last-child{ top:8px; }

body.nav-mobile-open .nav-toggle-lines span:first-child{
  top:5px;
  transform:rotate(45deg);
}

body.nav-mobile-open .nav-toggle-lines span:last-child{
  top:5px;
  transform:rotate(-45deg);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 22px);
  font-size:1.09rem;
  color:var(--muted);
  flex-wrap:wrap;
  justify-content:flex-end;
}

.main-nav a{
  position:relative;
  padding:4px 0;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  border-radius:999px;
  background:var(--brand-grad);
  transition:width .3s ease-out;
}

.main-nav a:hover{ color:var(--fg); }
.main-nav a:hover::after,
.main-nav a.active::after{ width:100%; }

.main-nav .nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(60,65,66,.95);
  color:rgba(166,255,181,0.98);
  border:1px solid rgba(255,255,255,.22);
  font-weight:600;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.main-nav .nav-cta:hover{
  transform:translateY(-1px);
  background:rgba(166,255,181,0.98);
  color:rgba(142,153,251,.95);
  box-shadow:0 14px 34px rgba(0,0,0,.26);
}

.main-nav .nav-cta:active{ transform:translateY(0); }

@media (max-width:980px){
  .site-header{
    background:rgba(11,13,18,0.30);
  }

  .site-header-inner{
    min-height:72px;
  }

  .nav-toggle{
    display:inline-flex;
    margin-left:auto;
    position:relative;
    z-index:2205;
  }

  .nav-mobile-shell{
    position:fixed;
    top:calc(var(--header-h, 72px) + 8px);
    left:12px;
    right:12px;
    max-height:calc(100dvh - var(--header-h, 72px) - 20px);
    padding:12px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(11,13,18,0.82);
    backdrop-filter:blur(26px) saturate(1.08);
    -webkit-backdrop-filter:blur(26px) saturate(1.08);
    box-shadow:0 24px 70px rgba(0,0,0,0.38);
    overflow:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0, -10px, 0) scale(0.988);
    transition:
      opacity 260ms var(--nav-open-ease),
      transform 260ms var(--nav-open-ease),
      visibility 0s linear 260ms;
    z-index:2200;
    display:block;
    isolation:isolate;
  }

  body.nav-mobile-open .nav-mobile-shell{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0, 0, 0) scale(1);
    transition:
      opacity 260ms var(--nav-open-ease),
      transform 260ms var(--nav-open-ease),
      visibility 0s linear 0s;
  }

  .main-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    flex-wrap:nowrap;
    font-size:1.08rem;
    color:rgba(255,255,255,0.90);
  }

  .main-nav > a,
  .main-nav > .nav-dd,
  .main-nav > .nav-cta{
    width:100%;
  }

  .main-nav > a,
  .main-nav > .nav-dd > .nav-dd-toggle,
  .main-nav > .nav-cta{
    min-height:50px;
    width:100%;
    padding:13px 15px;
    border-radius:15px;
  }

  .main-nav > a,
  .main-nav > .nav-dd > .nav-dd-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:rgba(255,255,255,0.94);
    background:transparent;
  }

  .main-nav > a:hover,
  .main-nav > .nav-dd > .nav-dd-toggle:hover,
  .main-nav > .nav-dd.open > .nav-dd-toggle{
    background:rgba(255,255,255,0.07);
    color:#fff;
  }

  .main-nav a::after,
  .nav-dd-toggle::after{
    display:none;
  }

  .nav-dd{
    display:block;
    width:100%;
  }

  .nav-dd-toggle{
    width:100%;
    justify-content:space-between;
    padding:13px 15px;
  }

  .nav-chev{
    display:inline-flex;
    opacity:.78;
  }

  .nav-dd.open .nav-chev{
    transform:rotate(180deg);
  }

  .main-nav .nav-cta{
    justify-content:center;
    margin-top:4px;
  }
}

.nav-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(166, 255, 181, 0.12);
  border: 1px solid rgba(166, 255, 181, 0.24);
  color: #a6ffb5;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}
/* =========================================================
   05) HEADER MELT / AUTO-HIDE STATES (JS DRIVEN)
   ========================================================= */
.site-header.is-hidden{
  opacity:0;
  transform:translateY(var(--nav-hide-y));
}

.site-header.is-melting{ opacity:var(--nav-melt-opacity); }
.site-header.is-melting .main-nav{ color:rgba(154,164,173,0.85); }

.site-header.is-shown{
  transition:transform .30s ease, opacity .30s ease;
  transform:none;
  opacity:1;
  pointer-events:auto;
  background:rgba(30, 32, 32, 0.616);
}

/* =========================================================
   06) DROPDOWN SYSTEM — ACTIVE FLYOUT VERSION
   Pairs with the restructured core.js.
   ========================================================= */
.nav-dd{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.nav-dd-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  position:relative;
  padding:4px 0;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.nav-dd-toggle:hover{
  color:var(--fg);
}

.nav-dd.open .nav-dd-toggle{
  color:rgba(255,255,255,0.96);
  text-shadow:0 0 18px rgba(142,153,251,0.18);
}

.nav-chev{
  font-size:.78em;
  opacity:.7;
  transform:translateY(-1px) translateZ(0);
  transition:transform 220ms ease, opacity 220ms ease;
  display:none;
}

.nav-dd.open .nav-chev{
  opacity:1;
  transform:translateY(-1px) rotate(180deg) translateZ(0);
}

.nav-dd-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  min-width:280px;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--nav-panel-border);
  background:var(--nav-panel-bg);
  backdrop-filter:blur(22px) saturate(1.08);
  -webkit-backdrop-filter:blur(22px) saturate(1.08);
  box-shadow:var(--nav-panel-shadow);
  overflow:visible;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%, 10px, 0) scale(0.992);
  will-change:transform, opacity;
  transition:
    opacity var(--nav-open-dur) var(--nav-open-ease),
    transform var(--nav-open-dur) var(--nav-open-ease),
    visibility 0s linear var(--nav-open-dur);
  z-index:2100;
}

.nav-dd.open > .nav-dd-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(-50%, 0, 0) scale(1);
  transition:
    opacity var(--nav-open-dur) var(--nav-open-ease),
    transform var(--nav-open-dur) var(--nav-open-ease),
    visibility 0s linear 0s;
}

.nav-dd-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}

.nav-dd.edge-right > .nav-dd-menu{
  left:auto;
  right:0;
  transform:translate3d(0, 10px, 0) scale(0.992);
}

.nav-dd.edge-right.open > .nav-dd-menu{
  transform:translate3d(0, 0, 0) scale(1);
}

.nav-dd.edge-left > .nav-dd-menu{
  left:0;
  transform:translate3d(0, 10px, 0) scale(0.992);
}

.nav-dd.edge-left.open > .nav-dd-menu{
  transform:translate3d(0, 0, 0) scale(1);
}

.nav-dd-menu a{
  display:flex;
  align-items:center;
  padding:14px 14px;
  border-radius:14px;
  color:rgba(255,255,255,0.92);
  letter-spacing:0.2px;
  transition:background 220ms ease, color 220ms ease, transform 220ms ease;
}

.nav-dd-menu a:hover{
  background:rgba(255,255,255,0.08);
  color:var(--fg);
  transform:translate3d(0, -1px, 0);
}

.nav-dd-menu .nav-dd.nav-dd-sub{
  position:relative;
  display:block;
  width:100%;
}

.nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-toggle{
  width:100%;
  justify-content:space-between;
  padding:14px 14px;
  border-radius:14px;
  color:rgba(255,255,255,0.94);
  transition:background 220ms ease, color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-toggle:hover,
.nav-dd-menu .nav-dd.nav-dd-sub.open > .nav-dd-toggle{
  background:rgba(255,255,255,0.08);
  color:#fff;
  transform:translate3d(0, -1px, 0);
}

/* desktop nested flyout panel */
.nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-menu{
  position:absolute;
  top:-8px;
  left:calc(100% + 10px);
  right:auto;
  min-width:250px;
  max-width:min(320px, 78vw);
  width:max-content;
  margin:0;
  padding:12px;
  border-radius:18px;
  background:var(--nav-panel-bg-strong);
  border:1px solid var(--nav-panel-border);
  box-shadow:var(--nav-flyout-shadow);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  overflow:visible;
  max-height:none;
  transform:translate3d(10px, 0, 0) scale(0.992);
  transition:
    opacity var(--nav-sub-dur) var(--nav-sub-ease),
    transform var(--nav-sub-dur) var(--nav-sub-ease),
    visibility 0s linear var(--nav-sub-dur);
  z-index:2150;
}

.nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-menu::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:14px;
  pointer-events:auto;
}

.nav-dd-menu .nav-dd.nav-dd-sub.flyout-right > .nav-dd-menu::before{
  left:-14px;
}

.nav-dd-menu .nav-dd.nav-dd-sub.flyout-left > .nav-dd-menu::before{
  right:-14px;
}

.nav-dd-menu .nav-dd.nav-dd-sub.open > .nav-dd-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0, 0, 0) scale(1);
  transition:
    opacity var(--nav-sub-dur) var(--nav-sub-ease),
    transform var(--nav-sub-dur) var(--nav-sub-ease),
    visibility 0s linear 0s;
}

.nav-dd-menu .nav-dd.nav-dd-sub.flyout-left > .nav-dd-menu{
  left:auto;
  right:calc(100% + 10px);
  transform:translate3d(-10px, 0, 0) scale(0.992);
}

.nav-dd-menu .nav-dd.nav-dd-sub.flyout-left.open > .nav-dd-menu{
  transform:translate3d(0, 0, 0) scale(1);
}

.nav-dd-menu .nav-dd.nav-dd-sub.flyout-right > .nav-dd-menu{
  left:calc(100% + 10px);
  right:auto;
}

.nav-dd-sep{
  height:1px;
  margin:10px 6px 12px;
  background:rgba(255,255,255,0.10);
}

.nav-dd-label{
  padding:6px 14px 8px;
  font-size:1.15rem;
  opacity:0.70;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* =========================================================
   07) BACKDROP / CINEMA DIM / NAV FOCUS STATES
   ========================================================= */
.nav-backdrop{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:var(--header-h, 72px) !important;
  bottom:0 !important;
  height:auto !important;
  min-height:calc(100vh - var(--header-h, 72px)) !important;
  display:block !important;
  background:rgba(6,10,16,0.26);
  backdrop-filter:blur(8px) saturate(1.04) brightness(0.94);
  -webkit-backdrop-filter:blur(8px) saturate(1.04) brightness(0.94);
  opacity:0;
  pointer-events:none;
  transition:
    opacity var(--nav-backdrop-dur) var(--nav-open-ease),
    backdrop-filter var(--nav-backdrop-dur) var(--nav-open-ease),
    -webkit-backdrop-filter var(--nav-backdrop-dur) var(--nav-open-ease);
  z-index:1500;
}

.nav-backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top, rgba(142,153,251,0.10), transparent 55%);
  pointer-events:none;
}

body.dropdown-active .nav-backdrop,
body.nav-menu-open .nav-backdrop,
body.nav-mobile-open .nav-backdrop{
  opacity:1;
}

body.nav-menu-open .nav-backdrop,
body.nav-mobile-open .nav-backdrop{
  pointer-events:auto;
}

body.nav-menu-open .site-header,
body.dropdown-active .site-header,
body.nav-mobile-open .site-header{
  background:rgba(11,13,18,0.64);
}

body.nav-mobile-open{
  overflow:hidden;
}

@supports selector(:has(*)){
  .site-header:has(.main-nav a:hover) .main-nav a,
  .site-header:has(.main-nav button:hover) .main-nav a,
  .site-header:has(.main-nav a:hover) .main-nav button,
  .site-header:has(.main-nav button:hover) .main-nav button{
    opacity:.78;
    transition:opacity .18s ease;
  }

  .site-header:has(.main-nav a:hover) .main-nav a:hover,
  .site-header:has(.main-nav button:hover) .main-nav button:hover{
    opacity:1;
  }
}

body.dropdown-active .main-nav a,
body.dropdown-active .main-nav button,
body.nav-menu-open .main-nav a,
body.nav-menu-open .main-nav button{
  opacity:.78;
  transition:opacity .18s ease;
}

body.dropdown-active .nav-dd.open .nav-dd-toggle,
body.nav-menu-open .nav-dd.open .nav-dd-toggle,
body.dropdown-active .main-nav a.active,
body.nav-menu-open .main-nav a.active{
  opacity:1;
}

/* =========================================================
   08) SHARED FOOTER
   ========================================================= */
.footer-basic{
  padding:20px 0 28px;
  background:radial-gradient(circle at top, rgba(15,23,42,0.8), rgba(11,13,18,1));
  border-top:1px solid rgba(148,163,184,0.25);
  position:relative;
  z-index:2;
}

.footer-basic footer{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 16px;
  text-align:center;
  color:var(--muted);
}

.footer-basic .list-inline{
  list-style:none;
  padding:0;
  margin:16px 0 8px;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:0.85rem;
}

.footer-basic .list-inline-item{
  margin:0;
  padding:0;
}

.footer-basic .list-inline-item a{
  color:inherit;
  text-decoration:none;
  opacity:0.9;
  transition:opacity .2s ease, color .2s ease;
}

.footer-basic .list-inline-item a:hover{
  opacity:1;
  color:var(--fg);
}

.footer-basic .social{
  text-align:center;
  padding-bottom:10px;
}

.footer-basic .social > a{
  font-size:18px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  border:1px solid rgba(148,163,184,0.45);
  margin:0 6px;
  opacity:0.9;
  transition:color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
  color:var(--muted);
}

.footer-basic .social > a:hover{
  border-color:var(--mint);
  color:var(--fg);
  box-shadow:0 0 18px rgba(166,255,181,0.5);
  transform:translateY(-1px);
}

.footer-basic .copyright{
  margin-top:6px;
  font-size:0.8rem;
  color:rgba(148,163,184,0.9);
  text-align:center;
  width:100%;
  max-width:none;
}

.footer-social a,
.site-footer .footer-social a,
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.footer-social a:hover,
.site-footer .footer-social a:hover,
.footer-social-link:hover {
  color: rgba(255, 255, 255, 0.94);
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.footer-social a:focus-visible,
.site-footer .footer-social a:focus-visible,
.footer-social-link:focus-visible {
  outline: 2px solid rgba(166, 255, 181, 0.55);
  outline-offset: 3px;
}


/* =========================================================
   09) SHARED FORM CARD
   ========================================================= */
.form-card{
  max-width:680px;
  margin:0 auto;
  padding:32px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(20,26,34,0.92));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 18px 45px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.015);
  line-height:1.6;
  color:#fff;
}

.form-card h2{
  font-size:22px;
  font-weight:700;
  margin-bottom:0.2em;
}

.form-card p{
  font-size:16px;
  margin-bottom:1.5em;
  color:rgba(255,255,255,0.92);
}

.form-card input,
.form-card textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:white;
  font-size:15px;
  margin-bottom:12px;
  outline:none;
}

.form-card button{
  background:transparent;
  color:white;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:10px;
  padding:8px 20px;
  font-weight:600;
  font-size:15px;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.form-card button:hover{
  background:rgba(255,255,255,0.1);
  cursor:pointer;
}

/* =========================================================
   10) SHARED HALO / HERO SUPPORT HELPERS
   ========================================================= */
.hero-title::before{
  inset:-18px -22px;
  border-radius:22px;
}

@media (max-width:780px){
  .hero-title::before,
  .hero-left .hero-secondary::before,
  .hero-right[aria-label="Hero intro"] .hero-secondary::before,
  .metric-card .metric-value::before,
  .metric-card .metric-body::before{
    inset:-12px -14px;
    border-radius:16px;
  }
}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero-title::before,
  .hero-left .hero-secondary::before,
  .hero-right[aria-label="Hero intro"] .hero-secondary::before,
  .metric-card .metric-value::before,
  .metric-card .metric-body::before{
    background:
      radial-gradient(
        120% 85% at 20% 20%,
        rgba(255,255,255,0.26) 0%,
        rgba(255,255,255,0.10) 48%,
        rgba(255,255,255,0.00) 78%
      );
  }
}

/* =========================================================
   MOBILE SUPPORT
   ========================================================= */
@media (max-width:860px){
  h1{
    font-size:clamp(28px, 6vw, 36px);
    line-height:1.15;
  }

  h2{
    font-size:clamp(24px, 5vw, 30px);
  }

  h3{
    font-size:clamp(20px, 4.5vw, 24px);
  }

  p{
    font-size:1.05rem;
  }

  .muted{
    font-size:0.95rem;
  }

  .card{
    padding:24px;
  }

  .measure{
    max-width:100%;
  }
}


@media (max-width:360px){
  html,
  body{
    overflow-x:clip;
  }

  .hero,
  .hero-left,
  .hero-right,
  .section,
  .panel,
  .card{
    max-width:100%;
    min-width:0;
  }

  img,
  canvas,
  video{
    max-width:100%;
    height:auto;
  }
}

/* =========================================================
   MOBILE NAV — FINAL OVERRIDE
   This block intentionally sits late in the file so it wins.
   It forces all nested submenus to stack downward on mobile.
   ========================================================= */
@media (max-width:980px){

  .nav-dd,
  .nav-dd-menu,
  .nav-dd-menu .nav-dd,
  .nav-dd-menu .nav-dd.nav-dd-sub{
    display:block !important;
    width:100% !important;
  }

  .nav-dd-toggle,
  .nav-dd-menu a,
  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-toggle{
    display:flex !important;
    width:100% !important;
  }

  .nav-dd-menu{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    min-width:0 !important;
    width:100% !important;
    margin-top:0 !important;
    padding:0 6px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,0.04) !important;
    border:1px solid transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    visibility:hidden !important;
    opacity:1 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    max-height:0 !important;
    transform:none !important;
    transition:
      max-height 320ms var(--nav-open-ease),
      margin-top 320ms var(--nav-open-ease),
      padding-top 320ms var(--nav-open-ease),
      padding-bottom 320ms var(--nav-open-ease),
      border-color 220ms ease,
      visibility 0s linear 320ms !important;
  }

  .nav-dd.open > .nav-dd-menu{
    visibility:visible !important;
    pointer-events:auto !important;
    max-height:70vh !important;
    margin-top:6px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    border-color:rgba(255,255,255,0.10) !important;
    transition:
      max-height 320ms var(--nav-open-ease),
      margin-top 320ms var(--nav-open-ease),
      padding-top 320ms var(--nav-open-ease),
      padding-bottom 320ms var(--nav-open-ease),
      border-color 220ms ease,
      visibility 0s linear 0s !important;
  }

  .nav-dd-menu::after{
    display:none !important;
  }

  .nav-dd-menu a,
  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-toggle{
    min-height:44px;
    padding:11px 12px !important;
    border-radius:12px;
    font-size:1rem;
    transform:none !important;
  }

  .nav-dd-menu a:hover{
    transform:none !important;
  }

  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-toggle:hover,
  .nav-dd-menu .nav-dd.nav-dd-sub.open > .nav-dd-toggle{
    transform:none !important;
  }

  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-menu,
  .nav-dd-menu .nav-dd.nav-dd-sub.flyout-left > .nav-dd-menu,
  .nav-dd-menu .nav-dd.nav-dd-sub.flyout-right > .nav-dd-menu{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 0 0 10px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,0.035) !important;
    border:1px solid transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    visibility:hidden !important;
    opacity:1 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    max-height:0 !important;
    transition:
      max-height 280ms var(--nav-sub-ease),
      margin-top 280ms var(--nav-sub-ease),
      padding-top 280ms var(--nav-sub-ease),
      padding-bottom 280ms var(--nav-sub-ease),
      border-color 220ms ease,
      visibility 0s linear 280ms !important;
  }

  .nav-dd-menu .nav-dd.nav-dd-sub.open > .nav-dd-menu{
    visibility:visible !important;
    pointer-events:auto !important;
    max-height:50vh !important;
    margin-top:4px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
    border-color:rgba(255,255,255,0.08) !important;
    transition:
      max-height 280ms var(--nav-sub-ease),
      margin-top 280ms var(--nav-sub-ease),
      padding-top 280ms var(--nav-sub-ease),
      padding-bottom 280ms var(--nav-sub-ease),
      border-color 220ms ease,
      visibility 0s linear 0s !important;
  }

  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-menu::before{
    display:none !important;
  }

  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-menu a,
  .nav-dd-menu .nav-dd.nav-dd-sub > .nav-dd-menu .nav-dd-toggle{
    width:100% !important;
    padding-left:14px !important;
  }

  .nav-dd.edge-right > .nav-dd-menu,
  .nav-dd.edge-left > .nav-dd-menu,
  .nav-dd.edge-right.open > .nav-dd-menu,
  .nav-dd.edge-left.open > .nav-dd-menu,
  .nav-dd-menu .nav-dd.nav-dd-sub.flyout-left > .nav-dd-menu,
  .nav-dd-menu .nav-dd.nav-dd-sub.flyout-right > .nav-dd-menu{
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }
}

/* =========================================================
   PASS 9 — PRECISION LAYER
   Final polish only: interaction consistency, mobile rhythm,
   alignment anchoring, and shared UI timing.
   ========================================================= */

:root{
  --ui-fast:180ms;
  --ui-med:240ms;
  --ui-slow:320ms;
  --ui-ease:cubic-bezier(.22,1,.36,1);

  --gutter-desktop:16px;
  --gutter-tablet:14px;
  --gutter-mobile:12px;

  --tap-scale:.985;
  --lift-y:-2px;
}

html{
  -webkit-tap-highlight-color:transparent;
}

body{
  overscroll-behavior-x:none;
}

/* -------------------------
   Shared gutters / shell
   ------------------------- */
.container{
  padding-left:var(--gutter-desktop);
  padding-right:var(--gutter-desktop);
}

@media (max-width:980px){
  .container{
    padding-left:var(--gutter-tablet);
    padding-right:var(--gutter-tablet);
  }

  .page-shell{
    padding-bottom:64px;
  }
}

@media (max-width:640px){
  .container{
    padding-left:var(--gutter-mobile);
    padding-right:var(--gutter-mobile);
  }
}

/* -------------------------
   Shared interaction timing
   ------------------------- */
:where(
  .btn,
  .nav-toggle,
  .nav-cta,
  .nav-dd-toggle,
  .main-nav > a,
  .nav-dd-menu a,
  .footer-basic .social > a,
  .form-card button,
  .section-dot,
  .tab,
  .chip,
  .thumb,
  .car-dot,
  .stem-benefit-toggle,
  .bottom-toggle,
  [data-req-toggle]
){
  transition:
    color var(--ui-fast) ease,
    background-color var(--ui-fast) ease,
    border-color var(--ui-fast) ease,
    opacity var(--ui-fast) ease,
    box-shadow var(--ui-med) ease,
    transform var(--ui-fast) ease;
  will-change:transform;
}

/* -------------------------
   Consistent hover / press
   ------------------------- */
@media (hover:hover) and (pointer:fine){
  :where(
    .btn,
    .nav-toggle,
    .nav-cta,
    .footer-basic .social > a,
    .form-card button,
    .section-dot,
    .tab,
    .thumb,
    .car-dot,
    .bottom-toggle,
    [data-req-toggle]
  ):hover{
    transform:translateY(var(--lift-y));
  }
}

:where(
  .btn,
  .nav-toggle,
  .nav-cta,
  .main-nav > a,
  .nav-dd-toggle,
  .nav-dd-menu a,
  .footer-basic .social > a,
  .form-card button,
  .section-dot,
  .tab,
  .chip,
  .thumb,
  .car-dot,
  .stem-benefit-toggle,
  .bottom-toggle,
  [data-req-toggle]
).is-pressed{
  transform:translateY(1px) scale(var(--tap-scale));
}

/* -------------------------
   Shared card/surface polish
   ------------------------- */
:where(
  .panel,
  .card,
  .caps-hero-left,
  .caps-metric,
  .caps-section-header,
  .caps-card,
  .caps-mini,
  .caps-final-inner,
  .ind-hero-left,
  .ind-metric,
  .ind-section-header,
  .ind-card,
  .pt-hero-left,
  .pt-metric,
  .pt-section-header,
  .pt-card,
  .pt-final-inner,
  .proc-hero-left,
  .proc-metric,
  .proc-section-header,
  .proc-card,
  .proc-phase,
  .proc-final-inner,
  .labs-hero-left,
  .labs-metric,
  .labs-section-header,
  .lab-card,
  .labs-card,
  .labs-final-inner
){
  transition:
    background-color var(--ui-fast) ease,
    border-color var(--ui-fast) ease,
    box-shadow var(--ui-med) ease,
    transform var(--ui-med) ease;
}

@media (hover:hover) and (pointer:fine){
  :where(
    .panel,
    .card,
    .caps-card,
    .caps-mini,
    .ind-card,
    .pt-card,
    .proc-card,
    .proc-phase,
    .lab-card,
    .labs-card
  ):hover{
    border-color:rgba(255,255,255,0.14);
    box-shadow:0 22px 52px rgba(0,0,0,0.36);
  }
}

/* -------------------------
   Shared corporate alignment
   ------------------------- */
body:is(.caps,.ind,.partners,.proc,.labs) :is(
  .caps-grid-2,
  .caps-grid-3,
  .ind-grid,
  .ind-grid-2,
  .pt-grid-2,
  .pt-grid-3,
  .proc-grid-2,
  .proc-grid-3,
  .labs-grid,
  .labs-grid-2
){
  align-items:stretch;
}

body:is(.caps,.ind,.partners,.proc,.labs) :is(
  .caps-card,
  .caps-mini,
  .caps-metric,
  .ind-card,
  .ind-metric,
  .pt-card,
  .pt-metric,
  .proc-card,
  .proc-phase,
  .proc-metric,
  .lab-card,
  .labs-card,
  .labs-metric
){
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* -------------------------
   Mobile typography
   ------------------------- */
@media (max-width:980px){
  html{
    font-size:14px;
  }

  body{
    line-height:1.62;
  }

}

@media (max-width:640px){
  .main-nav > a,
  .main-nav > .nav-dd > .nav-dd-toggle,
  .main-nav > .nav-cta{
    min-height:48px;
    padding:12px 14px;
    border-radius:14px;
  }

  .nav-mobile-shell{
    left:10px;
    right:10px;
    padding:10px;
    border-radius:22px;
  }
}

/* -------------------------
   Touch devices: disable fake hover drift
   ------------------------- */
@media (hover:none){
  :where(
    .btn,
    .nav-toggle,
    .nav-cta,
    .footer-basic .social > a,
    .form-card button,
    .section-dot,
    .tab,
    .thumb,
    .car-dot,
    .bottom-toggle,
    [data-req-toggle]
  ):hover{
    transform:none;
  }
}