:root{
  --bg:#020108;
  --text:#f8fbff;
  --muted:rgba(238,246,255,.68);
  --soft:rgba(238,246,255,.48);
  --vice-pink:#ff0a8a;
  --vice-cyan:#18b8ff;
  --vice-blue:#009fe8;
  --vice-purple:#7428ff;
  --edge-x:50%;
  --edge-y:50%;
  --flow-x:50%;
  --flow-y:50%;
  --bg-shift:0px;
  --bg-shift-fast:0px;
  --bg-tilt:0deg;
  --glass-alpha:.09;
  --glass-edge:.45;
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.028),rgba(255,255,255,.002) 48%,rgba(114,215,255,.010)),
    rgba(5,8,26,calc(var(--glass-alpha) * .92));
  --glass-border:rgba(255,255,255,.075);
  --glass-highlight:rgba(255,255,255,.18);
  --glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.058),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(255,255,255,.045),
    inset 12px 0 24px color-mix(in srgb,var(--vice-pink) 4%,transparent),
    inset -12px 0 24px color-mix(in srgb,var(--vice-cyan) 5%,transparent),
    0 18px 56px rgba(0,0,0,.34),
    0 0 34px color-mix(in srgb,var(--vice-cyan) 8%,transparent),
    0 0 28px color-mix(in srgb,var(--vice-pink) 6%,transparent);
  --glass-blur:1px;
  --glass-saturation:1.52;
  --glass-blur-safari:20px;
  --glass-edge-cyan:color-mix(in srgb,var(--vice-cyan) 44%,transparent);
  --glass-edge-pink:color-mix(in srgb,var(--vice-pink) 42%,transparent);
  --glass-radius:32px;
  --ease-glass:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* Mobile bottom-cluster spacing tokens — every offset in the
     hamburger/dock/search row (gaps, the search capsule's collapsed/expanded
     left edge, #desktopNav's reserved width) is derived from these two
     values instead of being hand-computed and hardcoded in multiple places. */
  --dock-fab-size:54px;
  --dock-gap:10px;
  --dock-edge:20px;
  --button-highlight:var(--vice-pink);
  --button-highlight-strong:var(--vice-pink);
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-heading:var(--font-body);
}

@view-transition{
  navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.52s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* .chapter-scroll-enabled = native snap is authoritative for desktop with
   reduced-motion (where the JS wheel-lock in site.js deliberately stays
   off). On normal desktop the wheel-lock owns chapter navigation and this
   class is absent, so native snap never fights an in-flight JS-driven
   scroll animation. This is JS-gated (syncChapterScrollMode() in site.js)
   because it depends on prefers-reduced-motion, which JS can react to
   live; mobile's own reels snap (see the @media(max-width:980px) block
   near .chapter below) doesn't need JS at all — it's a pure CSS media
   query, since mobile has no wheel-lock for native snap to ever fight. */
html:has(body.chapter-scroll-enabled){
  scroll-snap-type:y proximity;
  scroll-padding-top:96px;
}
body{
  min-height:100vh;
  padding-bottom:118px;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
body.logo-on-dark{
  --chrome-text:rgba(226,244,255,.68);
  --chrome-text-strong:#fff;
  --chrome-text-shadow:0 0 12px color-mix(in srgb,var(--vice-cyan) 42%,transparent),0 0 16px color-mix(in srgb,var(--vice-pink) 34%,transparent);
  --chrome-icon:var(--vice-cyan);
  --chrome-icon-active:var(--vice-pink);
}
body.logo-on-light{
  --chrome-text:rgba(5,18,38,.68);
  --chrome-text-strong:#071426;
  --chrome-text-shadow:0 0 10px rgba(255,255,255,.55),0 0 14px color-mix(in srgb,var(--vice-cyan) 24%,transparent);
  --chrome-icon:var(--vice-cyan);
  --chrome-icon-active:var(--vice-pink);
}
body.page-leaving{opacity:0;filter:blur(10px) brightness(.78);transition:opacity .42s cubic-bezier(.22,1,.36,1),filter .42s cubic-bezier(.22,1,.36,1)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

body[data-site="resource"]{
  --vice-pink:#ff4fb2;
  --vice-cyan:#5fe7ff;
  --vice-blue:#51a2ff;
  --vice-purple:#9b5cff;
  --glass-alpha:.11;
}

body[data-site="network"]{
  --vice-pink:#ff1c76;
  --vice-cyan:#00d7ff;
  --vice-blue:#2474ff;
  --vice-purple:#5f2bff;
  --glass-alpha:.09;
}

body[data-page="mods"]{
  --bg:#071321;
  --vice-pink:#ff0a8a;
  --vice-cyan:#72d7ff;
  --vice-blue:#2f9dff;
  --vice-purple:#6f5dff;
  --glass-alpha:.09;
  --glass-edge:.50;
}

/* Compositing order (back to front): .site-bg (default aurora, -12) <
   #pageBg (per-page custom background override, -11) < #pageBgOverlay
   (that background's own scrim, -10) < .site-light-overlay / .site-dark-overlay
   (global light/dark theme overlays, -9) < page content. A custom background
   replaces the default aurora by sitting in front of it, but must never
   sit in front of the theme overlay — that regressed when #pageBg/
   #pageBgOverlay were originally added at -2/-1, which put them *above*
   .site-light-overlay instead of below it, letting a custom background
   bypass theming entirely. See .page-bg/.page-bg-overlay further down.
   .site-light-overlay shows for any light-themed section, sitewide,
   always. .site-dark-overlay is narrower in scope by design — it only
   ever shows when the *current page's custom background* opts in via
   page_backgrounds.dark_overlay_enabled (toggled per background in the
   admin panel), because unlike the light case, most dark sections are
   already dark enough against the default aurora and don't need it. */
.site-bg{
  position:fixed;
  inset:0;
  z-index:-12;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 118%,rgba(0,80,120,.20),transparent 42%),
    linear-gradient(145deg,#020108 0%,#070113 46%,#01040c 100%);
}
.site-bg::before{
  content:"";
  position:absolute;
  inset:-16%;
  background:
    radial-gradient(circle at var(--flow-x) var(--flow-y),color-mix(in srgb,var(--vice-cyan) 52%,transparent),transparent 24%),
    radial-gradient(circle at calc(100% - var(--flow-x)) calc(100% - var(--flow-y)),color-mix(in srgb,var(--vice-pink) 58%,transparent),transparent 29%),
    radial-gradient(circle at 22% 78%,color-mix(in srgb,var(--vice-purple) 34%,transparent),transparent 32%),
    radial-gradient(circle at 82% 70%,color-mix(in srgb,var(--vice-blue) 30%,transparent),transparent 34%),
    linear-gradient(145deg,#020108 0%,#080114 46%,#01030c 100%);
  filter:saturate(1.22) brightness(.96);
  transform:translate3d(calc(var(--bg-shift-fast) * .05),calc(var(--bg-shift) * -.20),0) rotate(var(--bg-tilt)) scale(1.1);
  animation:none; /* disabled by default — enable with body.animated-bg */
}
.site-bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* Was transparent-to-.90-black by 100% — dark enough to nearly erase
     the aurora blobs, which sit mostly in this same outer/corner region.
     Softened so their color actually reads once body.animated-bg is on,
     without brightening the readable center where text sits. */
  background:
    radial-gradient(circle at center,transparent 0 39%,rgba(0,0,0,.22) 73%,rgba(0,0,0,.38) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.14),rgba(0,0,0,.34));
}
.site-light-overlay{
  position:fixed;
  inset:0;
  z-index:-9;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,10,138,.13),transparent 30%),
    radial-gradient(circle at 84% 72%,rgba(24,184,255,.16),transparent 32%),
    linear-gradient(145deg,rgba(246,252,255,.78),rgba(216,238,248,.62));
  backdrop-filter:saturate(1.08) brightness(1.08);
  transition:opacity .58s cubic-bezier(.22,1,.36,1);
}
.site-dark-overlay{
  position:fixed;
  inset:0;
  z-index:-9;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(10,8,20,.32),transparent 30%),
    radial-gradient(circle at 84% 72%,rgba(4,10,24,.36),transparent 32%),
    linear-gradient(145deg,rgba(4,4,10,.62),rgba(2,3,8,.74));
  backdrop-filter:saturate(1.04) brightness(.92);
  transition:opacity .58s cubic-bezier(.22,1,.36,1);
}
/* Only when the current background opts in (body.bg-dark-overlay-enabled,
   set by applyPageBackground() in site.js) AND a dark-themed chapter is
   active (i.e. NOT light-chapter-active — the two are mutually exclusive,
   driven by the same scroll-position theme tracking as the light case). */
body.bg-dark-overlay-enabled:not(.light-chapter-active) .site-dark-overlay{
  opacity:1;
}
body.light-chapter-active .site-light-overlay{
  opacity:1;
}

body[data-page="mods"] .site-bg{
  background:
    linear-gradient(to bottom,rgba(255,255,255,.02),rgba(2,8,14,.30)),
    image-set(url("images/vice-hero-desktop.avif") type("image/avif"),url("images/vice-hero-desktop.webp") type("image/webp"),url("mods-bg.png") type("image/png")) center center / cover no-repeat,
    #071321;
}

body[data-page="mods"] .site-bg::before{
  inset:0;
  background:
    radial-gradient(circle at 72% 26%,rgba(114,215,255,.12),transparent 28%),
    radial-gradient(circle at 34% 76%,rgba(255,10,138,.10),transparent 34%),
    linear-gradient(to bottom,rgba(255,255,255,.08),rgba(0,0,0,.26));
  filter:saturate(1.10) contrast(1.04) brightness(1.05);
  transform:scale(1.03);
  animation:none;
}

body[data-page="mods"] .site-bg::after{
  background:
    radial-gradient(circle at center,transparent 0 50%,rgba(0,0,0,.16) 76%,rgba(0,0,0,.44) 100%),
    linear-gradient(to bottom,rgba(2,7,14,.06),rgba(2,6,12,.38));
}

body[data-page="mods"] .aurora{
  opacity:.16;
  filter:blur(96px) saturate(1.2);
}

body[data-page="mods"] .grid{
  opacity:.16;
  mix-blend-mode:soft-light;
  transform:none;
}
.aurora{
  position:absolute;
  width:52rem;
  height:52rem;
  border-radius:999px;
  filter:blur(68px) saturate(1.8);
  opacity:.58;
  animation:none;
}
.aurora-one{left:-16rem;top:7rem;background:var(--vice-pink)}
.aurora-two{right:-15rem;top:10rem;background:var(--vice-cyan);animation-delay:-5s}
.aurora-three{left:32%;bottom:-22rem;background:var(--vice-purple);animation-delay:-9s}
.grid{
  position:absolute;
  inset:0;
  opacity:.3;
  background-image:
    linear-gradient(color-mix(in srgb,var(--vice-cyan) 12%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 9%,transparent) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black 0%,transparent 72%);
  transform:translate3d(0,calc(var(--bg-shift-fast) * .12),0);
  animation:none;
}
.noise{
  position:absolute;
  inset:0;
  opacity:.055;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.28) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 60%,rgba(255,255,255,.20) 0 1px,transparent 1px);
  background-size:38px 38px,54px 54px;
  mix-blend-mode:screen;
}


.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  z-index:999;
  background:linear-gradient(90deg,var(--vice-pink),var(--vice-purple),var(--vice-cyan));
  box-shadow:0 0 22px color-mix(in srgb,var(--vice-pink) 90%,transparent),0 0 26px color-mix(in srgb,var(--vice-cyan) 72%,transparent);
}

.liquid-glass-surface,
.liquid-glass-card,
.liquid-glass-nav,
.liquid-glass-button,
.liquid-glass-panel,
.liquid-glass-badge,
.liquid-glass,
.liquid-button,
.glass-fab,
.stat,
.tool-card,
.project-card,
.release-card,
.download-card,
.system-card,
.status-card,
.gallery-card,
.glass-card,
.content-modal__panel,
.content-modal__close,
.builder-dock,
.builder-close,
.builder-actions button,
.kicker,
.eyebrow,
.download-label,
.project-tabs span,
.docs-layout aside a,
.release-link{
  --edge-x:var(--mx,50%);
  --edge-y:var(--my,50%);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06) brightness(1.02);
  -webkit-backdrop-filter:url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06) brightness(1.02);
  box-shadow:var(--glass-shadow);
}
.liquid-glass-surface::before,
.liquid-glass-card::before,
.liquid-glass-nav::before,
.liquid-glass-button::before,
.liquid-glass-panel::before,
.liquid-glass-badge::before,
.liquid-glass::before,
.liquid-button::before,
.glass-fab::before,
.stat::before,
.tool-card::before,
.project-card::before,
.release-card::before,
.download-card::before,
.system-card::before,
.status-card::before,
.gallery-card::before,
.glass-card::before,
.content-modal__panel::before,
.content-modal__close::before,
.builder-dock::before,
.builder-close::before,
.builder-actions button::before,
.kicker::before,
.eyebrow::before,
.download-label::before,
.project-tabs span::before,
.docs-layout aside a::before,
.release-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.14) 5%,
      rgba(255,255,255,.04) 10%,
      transparent 20% 80%,
      rgba(114,215,255,.04) 90%,
      rgba(114,215,255,.14) 95%,
      rgba(255,255,255,.26) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.12) 5%,
      rgba(255,255,255,.03) 10%,
      transparent 18% 82%,
      rgba(255,255,255,.03) 90%,
      rgba(255,255,255,.10) 95%,
      rgba(255,255,255,.22) 100%);
  filter:blur(0.8px);
  mix-blend-mode:screen;
  opacity:.70;
  transition:opacity .18s ease;
  z-index:1;
}
.liquid-glass-surface::after,
.liquid-glass-card::after,
.liquid-glass-nav::after,
.liquid-glass-button::after,
.liquid-glass-panel::after,
.liquid-glass-badge::after,
.liquid-glass::after,
.liquid-button::after,
.glass-fab::after,
.stat::after,
.tool-card::after,
.project-card::after,
.release-card::after,
.download-card::after,
.system-card::after,
.status-card::after,
.gallery-card::after,
.glass-card::after,
.content-modal__panel::after,
.content-modal__close::after,
.builder-dock::after,
.builder-close::after,
.builder-actions button::after,
.kicker::after,
.eyebrow::after,
.download-label::after,
.project-tabs span::after,
.docs-layout aside a::after,
.release-link::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--glass-edge-pink),transparent 12% 88%,var(--glass-edge-cyan)),
    linear-gradient(180deg,rgba(255,255,255,.30),transparent 15% 84%,rgba(255,255,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:calc(var(--glass-edge) * .22);
  filter:none;
  transition:opacity .18s ease;
  z-index:3;
}
body.is-scrolling .liquid-glass::before,
body.is-scrolling .liquid-button::before,
body.is-scrolling .stat::before,
body.is-scrolling .tool-card::before,
body.is-scrolling .project-card::before,
body.is-scrolling .release-card::before,
body.is-scrolling .download-card::before,
body.is-scrolling .system-card::before,
body.is-scrolling .status-card::before,
body.is-scrolling .gallery-card::before,
body.is-scrolling .glass-card::before,
body.is-scrolling .liquid-glass::after,
body.is-scrolling .liquid-button::after,
body.is-scrolling .stat::after,
body.is-scrolling .tool-card::after,
body.is-scrolling .project-card::after,
body.is-scrolling .release-card::after,
body.is-scrolling .download-card::after,
body.is-scrolling .system-card::after,
body.is-scrolling .status-card::after,
body.is-scrolling .gallery-card::after,
body.is-scrolling .glass-card::after{
  transition:none;
}
.liquid-glass:hover::before,
.liquid-button:hover::before,
.liquid-glass.is-liquid-hover::before,
.liquid-button.is-liquid-hover::before,
.glass-fab:hover::before,
.stat:hover::before,
.tool-card:hover::before,
.project-card:hover::before,
.download-card:hover::before,
.release-card:hover::before,
.system-card:hover::before,
.status-card:hover::before,
.gallery-card:hover::before,
.glass-card:hover::before,
.release-link:hover::before{opacity:.62}
.liquid-glass:hover::after,
.liquid-button:hover::after,
.liquid-glass.is-liquid-hover::after,
.liquid-button.is-liquid-hover::after,
.glass-fab:hover::after,
.stat:hover::after,
.tool-card:hover::after,
.project-card:hover::after,
.download-card:hover::after,
.release-card:hover::after,
.system-card:hover::after,
.status-card:hover::after,
.gallery-card:hover::after,
.glass-card:hover::after,
.release-link:hover::after{
  opacity:calc(var(--glass-edge) * .76);
  filter:none;
}
.liquid-glass>*,
.liquid-button>*,
.glass-fab>*,
.stat>*,
.tool-card>*,
.project-card>*,
.release-card>*,
.download-card>*,
.system-card>*,
.status-card>*,
.gallery-card>*,
.glass-card>*,
.content-modal__panel>*,
.content-modal__close>*,
.builder-dock>*,
.builder-close>*,
.builder-actions button>*,
.kicker>*,
.eyebrow>*,
.download-label>*,
.project-tabs span>*,
.docs-layout aside a>*,
.release-link>*{position:relative;z-index:4}

/* ── Chrome flash prevention ─────────────────────────────────────────────────
   Header, bottom nav and footer are hidden until [data-chrome-ready] is set.
   An inline <script> in <head> sets the attribute from sessionStorage before
   the first paint — so repeat visits never see a flash.
   First visits: JS sets the attribute after D1 fetch; .chrome-reveal adds the
   transition so it fades in gently instead of popping.               ────── */
html:not([data-chrome-ready]) #topbar,
html:not([data-chrome-ready]) #mobileDock,
html:not([data-chrome-ready]) #desktopNav,
html:not([data-chrome-ready]) footer.footer { opacity: 0; }
html.chrome-reveal #topbar,
html.chrome-reveal #mobileDock,
html.chrome-reveal #desktopNav,
html.chrome-reveal footer.footer { transition: opacity 0.18s ease; }

/* ── Transparent glass — no blur on nav surfaces, only colour enhancement ─── */
/* Header and bottom nav use the global --glass-blur so the admin slider affects them */
.topbar,
.desktop-nav {
  backdrop-filter:url(#lg-disp) blur(var(--glass-blur)) saturate(1.52) contrast(1.04) brightness(1.01);
  -webkit-backdrop-filter:url(#lg-disp) blur(var(--glass-blur)) saturate(1.52) contrast(1.04) brightness(1.01);
}

.topbar{
  position:fixed;
  top:18px;
  left:50%;
  z-index:120;
  width:min(1180px,calc(100% - 32px));
  min-height:76px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:10px 12px 10px 16px;
  border-radius:38px;
  --glass-edge:.62;
  overflow:visible;
  /* Morph-away target for the mobile breakpoint — see @media(max-width:980px) below.
     Opacity+transform only (GPU-friendly), shared easing with the rest of the chrome.
     `visibility` rides along so keyboard/AT focus can't land on the invisible header
     mid-fade — CSS delays visibility:hidden until the transition ends, but flips
     back to visible immediately when the header returns, so no manual delay math. */
  transition:opacity .32s var(--ease-glass),transform .32s var(--ease-glass),visibility .32s;
}
.brand{display:flex;align-items:center;min-width:118px}
.brand-logo-stack,
.footer-logo-stack{
  position:relative;
  display:block;
  width:150px;
  height:32px;
  flex:0 0 auto;
}
.brand-logo-stack img,
.footer-logo-stack img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  opacity:0;
  transition:opacity .38s cubic-bezier(.22,1,.36,1),filter .38s cubic-bezier(.22,1,.36,1);
  will-change:opacity;
}
body.logo-on-dark .logo-light{opacity:1}
body.logo-on-dark .logo-dark{opacity:0}
body.logo-on-light .logo-light{opacity:0}
body.logo-on-light .logo-dark{opacity:1}
body.logo-on-light .topbar{
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.028)),
    rgba(240,250,255,.07);
  border-color:rgba(5,18,38,.12);
}
.site-switcher{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0;
  background:transparent;
  border:0;
  transition:opacity .24s ease,transform .28s var(--ease-glass),visibility .24s;
}
.topbar.is-searching .site-switcher{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-3px) scale(.94);
}
.topbar-search{
  --search-ease:cubic-bezier(.18,.86,.22,1);
  position:relative;
  grid-column:3;
  grid-row:1;
  justify-self:end;
  width:46px;
  max-width:46px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  padding:0;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--vice-pink) 72%,white);
  color:#fff;
  background:var(--vice-pink);
  box-shadow:0 14px 30px rgba(7,25,48,.16),0 8px 22px color-mix(in srgb,var(--vice-pink) 30%,transparent);
  overflow:hidden;
  transform-origin:right center;
  transition:
    grid-column .01s linear .16s,
    width .44s var(--search-ease),
    max-width .44s var(--search-ease),
    padding .34s var(--search-ease),
    gap .34s var(--search-ease),
    background .34s var(--search-ease),
    border-color .34s var(--search-ease),
    box-shadow .38s var(--search-ease),
    transform .34s var(--search-ease);
}
.topbar-search:hover,
.topbar-search:focus-within{
  box-shadow:0 16px 34px rgba(7,25,48,.18),0 10px 26px color-mix(in srgb,var(--vice-pink) 36%,transparent);
}
.topbar.is-search-primed .topbar-search{
  width:min(300px,34vw);
  max-width:min(300px,34vw);
  gap:8px;
  padding:0 6px 0 12px;
  border-color:color-mix(in srgb,var(--vice-pink) 30%,var(--glass-border));
  color:var(--chrome-text-strong);
  background:
    linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.18)),
    color-mix(in srgb,var(--vice-cyan) 5%,rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 16px 32px rgba(7,25,48,.15);
}
.topbar.is-searching .topbar-search{
  position:relative;
  inset:auto;
  grid-column:2 / 4;
  justify-self:stretch;
  width:100%;
  max-width:none;
  gap:10px;
  padding:0 6px 0 15px;
  border-radius:30px;
  border-color:color-mix(in srgb,var(--vice-pink) 24%,var(--glass-border));
  color:var(--chrome-text-strong);
  background:
    linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.15)),
    color-mix(in srgb,var(--vice-cyan) 6%,rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 18px 34px rgba(7,25,48,.16);
  transform:none;
  transition:
    grid-column .01s linear,
    width .44s var(--search-ease),
    max-width .44s var(--search-ease),
    padding .34s var(--search-ease),
    gap .34s var(--search-ease),
    background .34s var(--search-ease),
    border-color .34s var(--search-ease),
    box-shadow .38s var(--search-ease),
    transform .34s var(--search-ease);
}
.topbar.is-searching{
  transition:
    border-radius .58s cubic-bezier(.16,.92,.2,1),
    box-shadow .48s cubic-bezier(.18,.86,.22,1),
    opacity .32s var(--ease-glass),
    transform .32s var(--ease-glass),
    visibility .32s;
  border-radius:38px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 18px 42px rgba(7,25,48,.14);
}
.topbar.is-searching.is-search-results-open{
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 18px 42px rgba(7,25,48,.14);
}
.topbar.is-searching .site-switcher{
  opacity:0;
  transform:translateY(-4px) scale(.985);
  pointer-events:none;
  transition:opacity .24s cubic-bezier(.18,.86,.22,1),transform .28s cubic-bezier(.18,.86,.22,1);
}
.topbar.is-searching .brand{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.topbar-search__trigger{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0;
  color:#fff !important;
  background:transparent;
  cursor:pointer;
  transition:color .18s ease,opacity .18s ease,transform .18s ease;
  flex:0 0 auto;
  z-index:3;
}
.topbar-search__trigger svg{
  width:21px;
  height:21px;
  fill:currentColor;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(5,8,20,.18));
}
.topbar.is-search-primed .topbar-search__trigger,
.topbar.is-searching .topbar-search__trigger{
  position:relative;
  inset:auto;
  width:26px;
  min-width:26px;
  height:46px;
  color:var(--vice-pink);
  pointer-events:none;
}
.topbar-search input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--chrome-text-strong);
  font:inherit;
  font-size:15px;
  font-weight:760;
  appearance:none;
  -webkit-appearance:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease .08s,visibility .18s;
  position:relative;
  z-index:2;
}
.topbar.is-search-primed .topbar-search input,
.topbar.is-searching .topbar-search input{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.topbar-search input::-webkit-search-decoration,
.topbar-search input::-webkit-search-results-button,
.topbar-search input::-webkit-search-results-decoration,
.topbar-search input::-webkit-search-cancel-button{display:none}
.topbar-search input::placeholder{color:var(--chrome-text)}
.topbar-search__close{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--chrome-text-strong);
  background:color-mix(in srgb,var(--vice-pink) 12%,rgba(255,255,255,.16));
  font-size:22px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.7);
  transition:background .18s ease,transform .18s ease,opacity .18s ease,visibility .18s;
  position:relative;
  z-index:3;
}
.topbar.is-search-primed .topbar-search__close,
.topbar.is-searching .topbar-search__close{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
}
.topbar-search__close:hover,
.topbar-search__close:focus-visible{
  background:color-mix(in srgb,var(--vice-pink) 18%,rgba(255,255,255,.22));
  transform:scale(1.04);
}
.site-group{
  position:relative;
  overflow:visible;
  align-self:stretch;
  display:flex;
  align-items:center;
}
.site-link{
  position:relative;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--chrome-text);
  font-size:13px;
  font-weight:780;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:transparent;
  border:0;
  cursor:pointer;
  transition:color .18s ease,text-shadow .18s ease;
}
.site-link:hover,
.site-link[aria-current="page"]{
  color:var(--chrome-text-strong);
  text-shadow:var(--chrome-text-shadow);
}
.site-link::after{
  content:'';
  position:absolute;
  bottom:6px;
  left:10%;
  width:80%;
  height:3px;
  border-radius:999px;
  background:var(--vice-pink);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .15s ease;
  pointer-events:none;
}
.site-link:hover::after{
  transform:scaleX(1);
}
.site-link[aria-current="page"]::after{
  transform:scaleX(1);
  background:var(--vice-blue);
  transition:none;
}
.site-dropdown{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  min-width:220px;
  display:grid;
  gap:6px;
  padding:10px;
  border-radius:24px;
  transform:translate(-50%,8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:260;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 24px 64px rgba(0,0,0,.56),
    0 8px 24px rgba(0,0,0,.28),
    0 0 48px color-mix(in srgb,var(--vice-cyan) 12%,transparent);
}
.site-group:hover .site-dropdown,
.site-group:focus-within .site-dropdown,
.site-group.is-open .site-dropdown{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.site-dropdown__link{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:16px;
  color:var(--chrome-text);
  font-size:13px;
  font-weight:760;
}
.site-dropdown__link:hover,
.site-dropdown__link[aria-current="page"]{
  color:var(--chrome-text-strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 16%,transparent),color-mix(in srgb,var(--vice-cyan) 16%,transparent));
}

.liquid-button{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 23px;
  border-radius:999px;
  color:white;
  font-weight:820;
  line-height:1;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.liquid-button:hover{transform:translateY(-2px) scale(1.01)}
.button-primary,
.nav-download{
  --glass-edge:.72;
  --glass-bg:
    linear-gradient(135deg,color-mix(in srgb,var(--vice-pink) 82%,white),color-mix(in srgb,var(--vice-pink) 48%,transparent) 55%,color-mix(in srgb,var(--vice-cyan) 22%,transparent)),
    rgba(180,0,80,.22);
  --glass-border:color-mix(in srgb,var(--vice-pink) 80%,white);
  --glass-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--vice-pink) 50%,rgba(255,255,255,.20)),
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 color-mix(in srgb,var(--vice-pink) 40%,transparent),
    inset 12px 0 32px color-mix(in srgb,var(--vice-pink) 30%,transparent),
    inset -12px 0 24px color-mix(in srgb,var(--vice-cyan) 14%,transparent),
    0 4px 18px rgba(0,0,0,.28);
  color:white;
  text-shadow:0 0 10px rgba(0,0,0,.30);
  backdrop-filter:url(#lg-disp) blur(20px) saturate(2.2) contrast(1.1) brightness(1.1);
  -webkit-backdrop-filter:url(#lg-disp) blur(20px) saturate(2.2) contrast(1.1) brightness(1.1);
}
.button-secondary{
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.058),rgba(255,255,255,.005) 48%,color-mix(in srgb,var(--vice-cyan) 7%,transparent)),
    rgba(5,8,26,calc(var(--glass-alpha) * .74));
}
.nav-download{justify-self:end;font-size:14px;min-width:116px}
.button-primary *,
.nav-download *{color:white}

.desktop-nav{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:120;
  transform:translateX(-50%);
  width:fit-content;
  max-width:calc(100% - 28px);
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:safe center; /* content determines width — dock never stretches wider than its tabs. "safe" keeps the start tab reachable when scrollable (see overflow below) instead of centering it off-screen. */
  gap:10px; /* desktop has the room for real breathing space between pills — the dock's own width already absorbs this (width:fit-content), so it never reintroduces the "excess empty space" problem */
  padding:8px;
  border-radius:38px;
  --glass-edge:.72;
  /* Pages with more tabs than a narrow viewport (esp. the mobile dock, which
     shares space with the hamburger/search glass-fabs) can exceed the
     available width even at minimum comfortable tap-target size. Rather than
     squeeze tabs below a usable size or clip them, the dock scrolls
     internally — same pattern as iOS's own tab bars. Scrollbar hidden since
     the pill shape doesn't have room for one; still fully swipe/dragable. */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.desktop-nav::-webkit-scrollbar{display:none}
.nav-selection{
  position:absolute;
  top:8px;
  left:0;
  width:var(--nav-active-w,90px);
  height:calc(100% - 16px);
  /* nested-pill: outer 38px radius minus 8px padding = 30px keeps curvature centres aligned */
  border-radius:30px;
  transform:translate3d(var(--nav-active-x,8px),0,0);
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.004)),
    rgba(0,0,10,.02);
  backdrop-filter:blur(32px) saturate(1.80) contrast(1.10) brightness(1.06);
  -webkit-backdrop-filter:blur(32px) saturate(1.80) contrast(1.10) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 8px 0 18px color-mix(in srgb,var(--vice-pink) 7%,transparent),
    inset -8px 0 18px color-mix(in srgb,var(--vice-cyan) 7%,transparent),
    0 0 22px color-mix(in srgb,var(--vice-pink) 12%,transparent),
    0 0 24px color-mix(in srgb,var(--vice-cyan) 9%,transparent);
  transition:transform .22s cubic-bezier(.22,1,.36,1),width .22s cubic-bezier(.22,1,.36,1);
  z-index:1;
  pointer-events:none;
}
body.is-scrolling .nav-selection{
  transition:transform .16s linear,width .16s linear;
}
.desktop-nav a{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  /* Content-driven, iOS-compact pill: wraps the label instead of stretching
     to a fixed width. min-width is just a floor so a very short label
     ("Home") still reads as a pill, not a circle; max-width caps a long one.
     The dock's own width (.desktop-nav{width:fit-content}) is what adapts
     to tab count — these dimensions never change. */
  min-width:76px;
  max-width:184px; /* widened alongside the extra padding below so a long label still never overflows/breaks out of the pill */
  min-height:60px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 14px; /* was 10 — labels were sizing to content+padding with zero slack (e.g. "Downloads" had none), reading as cramped */
  border-radius:36px;
  color:var(--chrome-text);
  font-size:11px; /* down from 12px, room to breathe within the slightly wider max-width */
  font-weight:780;
  line-height:1.05;
  text-align:center;
  transition:color .12s linear,text-shadow .12s linear;
}
.desktop-nav a:hover,
.desktop-nav a.active{
  color:var(--chrome-text-strong);
  text-shadow:var(--chrome-text-shadow);
}
.desktop-nav a span:last-child{
  max-width:156px; /* pill's max-width (184px) minus its horizontal padding (14px ×2) — belt-and-suspenders so a long label truncates instead of ever breaking out of the pill */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-icon,
.nav-icon svg{
  width:30px;
  height:30px;
}
.nav-icon{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  color:var(--chrome-icon);
  filter:none;
}
.nav-icon svg,
.nav-icon path{
  fill:currentColor;
  stroke:none;
}
.nav-icon img{
  /* Fallback for any remaining <img> icons — convert to white */
  width:30px;
  height:30px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.86;
}
/* Uploaded icons via mask-image — inherits currentColor so they change with theme */
.nav-icon-mask{
  display:block;
  width:30px;
  height:30px;
  background:currentColor;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
}
.desktop-nav a.active .nav-icon{
  color:var(--chrome-icon-active);
  filter:none;
}
.desktop-nav a.active .nav-icon img{
  opacity:1;
  filter:brightness(0) invert(1) drop-shadow(0 0 10px color-mix(in srgb,var(--vice-cyan) 45%,transparent));
}
.desktop-nav a.active .nav-icon-mask{
  /* Active mask icons glow in the accent colour automatically via currentColor */
  filter:drop-shadow(0 0 8px color-mix(in srgb,currentColor 55%,transparent));
}

.section{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:132px 0;
}
/* .chapter's base rule is deliberately plain (normal block flow, no
   height/snap) — desktop's and mobile's full-screen-slide behavior are
   each scoped to their own @media block below (@media(min-width:981px)
   and @media(max-width:980px) respectively) rather than being an unscoped
   default either side has to override back down. This is what let the
   two experiments' bugs stop bleeding into each other: mobile's reels
   snap is now its own separate rule (no shared scroll-margin-top, which
   is what broke the very first attempt at this — see the mobile block
   below), and desktop's wheel-lock/snap coexistence is untouched. */
.chapter{
  position:relative;
  display:flex;
  flex-direction:column;
  margin-block:0;
}
@media(min-width:981px){
  .chapter{
    min-height:100svh;
    /* Was justify-content:safe center. "safe" only solves the case where
       content is TALLER than the viewport (falls back to start-alignment
       instead of centering off both edges) — it does nothing for the much
       more common case on this site: a section whose content is legitimately
       SHORTER than a full screen (e.g. a compact download grid), which
       still gets mathematically centered in the remaining space, putting
       real empty space above AND below it even though nothing is actually
       overflowing. flex-start removes that gap unconditionally: every
       section just starts near the top with fixed breathing room
       (padding-top below), whether its content is short or tall. */
    justify-content:flex-start;
    padding-top:max(140px, calc(env(safe-area-inset-top) + 96px));
    scroll-snap-align:start;
    scroll-snap-stop:always;
    scroll-margin-top:96px;
  }
}

@media(max-width:680px){
  .project-grid,
  .proof-grid{
    display:grid;
    grid-template-columns:1fr;
    overflow-x:visible;
    scroll-snap-type:none;
    margin-inline:0;
    padding-inline:0;
    width:100%;
    touch-action:auto;
  }
  .project-grid > *,
  .proof-grid > *{
    flex:initial;
    min-width:0;
    max-width:none;
    width:100%;
    scroll-snap-align:unset;
  }
}
/* Mobile reels/stories snap — deliberately its own separate, pure-CSS rule
   rather than reusing/extending the desktop block above. The previous
   attempt at this shared scroll-margin-top:96px with desktop (needed there
   to clear the fixed .topbar), which combined with mandatory snap made the
   very first chapter's own snap target (top - 96px, unsatisfiable at
   scrollY 0) resolve as "unaligned" — the browser snapped forward to the
   SECOND chapter on load instead of the first. Mobile has no fixed topbar
   to clear (it's replaced by the floating bottom dock, not a top bar), so
   this rule omits scroll-margin-top entirely rather than needing a
   workaround for it. Also pure CSS with no JS coordination: mobile has no
   wheel-lock to fight (that's what made desktop's native-snap-vs-JS-lock
   coexistence tricky), so there's nothing to toggle a class for. Gated on
   prefers-reduced-motion so a reduced-motion visitor doesn't get forced
   snapping. */
@media(max-width:980px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y mandatory}
  .chapter{
    min-height:100svh;
    /* Was justify-content:safe center — same fix as the desktop block
       above: centering put real empty space above/below any section
       whose content is shorter than a full screen, which on mobile is
       most non-hero sections. flex-start starts every section near the
       top instead; the .chapter:not(.hero) padding-top rule further down
       still supplies the actual clearance value for non-hero sections. */
    justify-content:flex-start;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  /* .hero{min-height:auto} (the older mobile hero-grid reset, further down
     this file) targets the same element — a hero chapter carries both
     classes — and wins by source order despite equal specificity,
     silently undoing the min-height above for exactly the section type
     most associated with "reels". The compound selector here has higher
     specificity than either single-class rule, so it wins regardless of
     where either rule sits in the file. */
  .chapter.hero{min-height:100svh}
}
.chapter::before{
  content:"";
  position:absolute;
  inset:auto 8% 8% 8%;
  height:26%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--vice-cyan) 14%,transparent),transparent 64%);
  filter:blur(34px);
  opacity:.48;
}
.has-section-bg::after{
  content:"";
  position:absolute;
  inset:38px max(-52px, -4vw);
  z-index:-1;
  border-radius:48px;
  background:
    linear-gradient(to bottom,rgba(1,5,12,.04),rgba(1,5,12,.28)),
    var(--section-bg) center center / cover no-repeat;
  opacity:.82;
  filter:saturate(1.12) contrast(1.08);
  transform:scale(1.015);
}
.hero.has-section-bg::after{
  display:none;
}
/* Section theme tokens are scoped to the section itself. The body-level
   light-chapter-active flag is only for global chrome/overlays; letting it
   restyle every chapter made dark sections inherit light text variables
   whenever the active section/theme state lagged during builder hydration. */
.light-chapter,
.chapter[data-theme="light"]{
  color:#06182e;
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.38) 48%,rgba(114,215,255,.24)),
    rgba(255,255,255,.28);
  --glass-border:rgba(7,25,48,.18);
  --glass-highlight:rgba(255,255,255,.72);
  --glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(7,25,48,.08),
    inset 12px 0 24px color-mix(in srgb,var(--vice-pink) 7%,transparent),
    inset -12px 0 24px color-mix(in srgb,var(--vice-cyan) 11%,transparent),
    0 18px 48px rgba(7,25,48,.18),
    0 0 24px color-mix(in srgb,var(--vice-cyan) 12%,transparent);
  /* The client-hydrated ".mod-*" section family (the 14 consolidated
     section modules, rendered by clientRenderSection() in site.js) reads
     its own separate text-color tokens instead of inheriting `color` —
     --text-primary/--text-secondary/--text-muted, defined once near the
     bottom of this file and otherwise constant everywhere. Without
     overriding them here, .mod-inner h1/h2/h3/p and .mod-sub kept
     resolving to their dark-theme near-white values even inside a light
     section, which is why text stayed unreadable after the color:#06182e
     fix above (a direct `color` declaration always beats an inherited
     one, so redeclaring the token itself is the only way to reach them). */
  --text-primary:#06182e;
  --text-secondary:rgba(6,24,46,.68);
  --text-muted:rgba(6,24,46,.48);
  --muted:rgba(6,24,46,.68);
  --soft:rgba(6,24,46,.50);
}
.chapter[data-theme="dark"]{
  color:#f8fbff;
  --text-primary:#f0f4ff;
  --text-secondary:rgba(226,240,255,.74);
  --text-muted:rgba(202,220,245,.58);
  --muted:rgba(226,240,255,.70);
  --soft:rgba(226,240,255,.52);
}
.chapter[data-theme="light"]:not(.section-cinematic-hero),
.chapter[data-theme="dark"]:not(.section-cinematic-hero){
  background:transparent;
  box-shadow:none;
  clip-path:none;
}
/* min-height/padding-top/padding-bottom used to be special-cased here
   (calc(100svh - 96px), 88px/88px) — a one-off tuning from an earlier
   light-mode pass that silently overrode the general .chapter sizing
   rule for this specific section/theme combination (a compound two-class
   selector beats .chapter's single class regardless of source order).
   That's exactly the kind of per-section drift that kept causing "why
   does only this section have a different gap" bugs — removed so this
   section sizes the same consistent way as every other .chapter. */
.light-chapter.section-download-cards .download-card{
  min-height:320px;
}
.light-chapter .kicker,
.light-chapter .section-heading p,
.light-chapter .download-card p{
  color:rgba(6,24,46,.68);
}
.light-chapter .kicker,
.light-chapter .download-label,
.light-chapter .project-tabs span,
.light-chapter .docs-layout aside a{
  color:rgba(6,24,46,.78);
}
.light-chapter .liquid-glass,
.light-chapter .download-card{
  color:#06182e;
}
.chapter[data-theme="light"] .section-heading h2,
.chapter[data-theme="light"] .mod-inner h1,
.chapter[data-theme="light"] .mod-inner h2,
.chapter[data-theme="light"] .mod-inner h3{
  color:#06182e;
}
.chapter[data-theme="light"] .section-heading p,
.chapter[data-theme="light"] .mod-inner p,
.chapter[data-theme="light"] .project-card p,
.chapter[data-theme="light"] .proof-card p,
.chapter[data-theme="light"] .release-card p,
.chapter[data-theme="light"] .status-card p,
.chapter[data-theme="light"] .download-card p,
.chapter[data-theme="light"] .system-card p,
.chapter[data-theme="light"] .tool-card p{
  color:rgba(6,24,46,.70);
}
.chapter[data-theme="dark"] .section-heading h2,
.chapter[data-theme="dark"] .mod-inner h1,
.chapter[data-theme="dark"] .mod-inner h2,
.chapter[data-theme="dark"] .mod-inner h3{
  color:#f4f8ff;
  text-shadow:0 10px 34px rgba(0,0,0,.34);
}
.chapter[data-theme="dark"] .section-heading p,
.chapter[data-theme="dark"] .mod-inner p,
.chapter[data-theme="dark"] .project-card p,
.chapter[data-theme="dark"] .proof-card p,
.chapter[data-theme="dark"] .release-card p,
.chapter[data-theme="dark"] .status-card p,
.chapter[data-theme="dark"] .download-card p,
.chapter[data-theme="dark"] .system-card p,
.chapter[data-theme="dark"] .tool-card p{
  color:rgba(226,240,255,.74);
}
.chapter[data-theme="light"] .button-secondary{
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.44) 48%,rgba(114,215,255,.20)),
    rgba(255,255,255,.32);
  --glass-border:rgba(7,25,48,.18);
  color:#06182e;
  text-shadow:none;
}
.chapter[data-theme="light"] .button-secondary *{color:inherit}
body.safari-optimized .site-bg::before,
body.safari-optimized .site-bg::after,
body.safari-optimized .aurora,
body.safari-optimized .noise,
body.safari-optimized .grid,
body.safari-optimized .chapter::before{
  display:none !important;
  animation:none !important;
}
/* WebKit can't use the url(#lg-disp) lens-warp filter inside backdrop-filter
   (an unsupported filter function drops the whole declaration), so Safari
   swaps in a plain blur+saturate stack that still reads as real frosted
   glass — same radii/spacing/shadow tokens, just no distortion warp. The
   sheen (::before) and edge-glow (::after) are plain gradients, not
   filter-dependent, so they stay on to preserve the depth illusion. */
body.safari-optimized{
  --glass-alpha:calc(var(--glass-alpha) * 1.35);
  --glass-highlight:rgba(255,255,255,.26);
}
body.safari-optimized .liquid-glass-surface,
body.safari-optimized .liquid-glass-card,
body.safari-optimized .liquid-glass-nav,
body.safari-optimized .liquid-glass-button,
body.safari-optimized .liquid-glass-panel,
body.safari-optimized .liquid-glass-badge,
body.safari-optimized .liquid-glass,
body.safari-optimized .liquid-button,
body.safari-optimized .glass-fab,
body.safari-optimized .stat,
body.safari-optimized .tool-card,
body.safari-optimized .project-card,
body.safari-optimized .release-card,
body.safari-optimized .download-card,
body.safari-optimized .system-card,
body.safari-optimized .status-card,
body.safari-optimized .gallery-card{
  backdrop-filter:blur(var(--glass-blur-safari)) saturate(1.6) contrast(1.08) brightness(1.03) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur-safari)) saturate(1.6) contrast(1.08) brightness(1.03) !important;
}

/* ── BottomDock — mobile floating row: hamburger + chapter dock + search ──
   .mobile-dock is `display:contents` at desktop widths so it adds nothing to
   the render tree and #desktopNav keeps positioning itself exactly as it
   always has (pixel-identical desktop look). At ≤980px it becomes the real
   fixed row container and #desktopNav is switched to flow inside it — see
   the @media(max-width:980px) block below.                              ── */
.mobile-dock{
  display:contents;
}
/* ── GlassButton — circular liquid-glass icon buttons (hamburger / search) ── */
.glass-fab{
  display:none; /* mobile-only; enabled ≤980px */
  width:var(--dock-fab-size);
  height:var(--dock-fab-size);
  border-radius:999px;
  color:var(--chrome-text-strong);
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  transition:transform .22s var(--ease-glass);
  /* Local override, same as .topbar/.desktop-nav — a later :root block in
     this file redefines --glass-edge as a color for an unrelated subsystem,
     so any glass element without its own numeric override here inherits
     that value and its ::after edge-glow opacity calc() breaks. */
  --glass-edge:.62;
}
.glass-fab:hover,
.glass-fab:focus-visible{transform:translateY(-2px) scale(1.02)}
.glass-fab:active{transform:translateY(0) scale(.96)}
.dock-hamburger-icon,
.dock-search-icon{
  display:block;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--vice-cyan) 50%,transparent));
}
.dock-hamburger[aria-expanded="true"] .dock-hamburger-icon,
.dock-search[aria-expanded="true"] .dock-search-icon{
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--vice-pink) 55%,transparent));
}
/* ── MobileSearch — the search button morphing into a search bar ──────────
   #desktopNav is back to being a plain flex child of #mobileDock (like
   before search existed) — no intermediate wrapper, which is what caused
   the dead-space layout bug (a percentage max-width on #desktopNav resolving
   circularly against an auto-sized wrapper that itself depended on
   #desktopNav's size). .mobile-search-bar is a position:absolute overlay
   instead: collapsed, it exactly matches .dock-search's own box (same
   54×54 circle, anchored to the same right edge) — that shared origin is
   what makes the button read as "becoming" the bar rather than a bar
   appearing beside it. On .is-searching it grows leftward (only its `left`
   edge moves; `right` stays pinned to the button's position) while the real
   .dock-search button and #desktopNav both fade out — one clean crossfade
   at a fixed anchor point, not three components rearranging independently.
   Transitions are transform/opacity/left only, spring-eased.            ── */
.mobile-search-bar{
  display:none; /* mobile-only; enabled ≤980px */
  position:absolute;
  top:0;
  right:0;
  left:calc(100% - var(--dock-fab-size)); /* collapsed: same box as .dock-search */
  height:var(--dock-fab-size);
  align-items:center;
  gap:6px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  padding:0;
  border-radius:calc(var(--dock-fab-size) / 2);
  color:var(--chrome-text-strong);
  transition:left .42s var(--ease-spring),opacity .26s var(--ease-glass);
  --glass-edge:.62; /* local override — see .glass-fab comment above */
}
#mobileDock.is-searching .mobile-search-bar{
  left:calc(var(--dock-fab-size) + var(--dock-gap)); /* everything right of the hamburger becomes the search field */
  opacity:1;
  padding:0 6px 0 16px;
  pointer-events:auto;
}
#mobileDock.is-searching .dock-search{
  opacity:0;
  transform:scale(.6);
  pointer-events:none;
  transition:opacity .2s var(--ease-glass),transform .2s var(--ease-glass);
}
#mobileDock.is-searching #desktopNav{
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
  transition:opacity .22s var(--ease-glass),transform .22s var(--ease-glass);
}
.search-bar-icon{
  display:flex;
  flex:0 0 auto;
  color:var(--chrome-icon,var(--vice-cyan));
  opacity:.8;
}
.search-bar-input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  color:inherit;
  font:inherit;
  font-size:14px;
  font-weight:640;
  -webkit-appearance:none;
  appearance:none; /* strip all native type="search" chrome — the icon/clear button are our own elements */
}
.search-bar-input::-webkit-search-decoration,
.search-bar-input::-webkit-search-results-button,
.search-bar-input::-webkit-search-results-decoration{display:none}
.search-bar-input::placeholder{color:var(--chrome-text)}
.search-bar-input::-webkit-search-cancel-button{display:none}
.search-bar-clear{
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:var(--chrome-text-strong);
  font-size:16px;
  line-height:1;
  background:rgba(255,255,255,.08);
}
/* ── GlassPanel — shared expanding-panel shell ─────────────────────────────
   Used by both the hamburger's nav panel (#mobileMenu) and the search
   results panel (#searchOverlay) — one visual/behavioural contract for any
   "floating Liquid Glass panel that expands from the bottom dock", per
   openGlassPanel()/closeGlassPanel() in site.js. Anchored above the mobile
   dock and grown upward (transform-origin:bottom). Toggled by the `hidden`
   attribute (display:none); the .is-open class (added a frame after
   `hidden` is removed) drives the actual opacity/transform spring so
   removing `hidden` and entering the open state are two distinct steps the
   browser can animate between. Reduced-motion collapses the transition to
   ~instant via the global @media(prefers-reduced-motion:reduce) rule
   further down.                                                          ── */
.glass-panel-float{
  position:fixed;
  bottom:calc(108px + env(safe-area-inset-bottom));
  left:50%;
  z-index:119;
  width:min(430px,calc(100% - 28px));
  max-height:calc(100svh - 210px);
  overflow:auto;
  transform-origin:bottom center;
  transform:translateX(-50%) translateY(16px) scale(.92);
  opacity:0;
  pointer-events:none;
  padding:14px;
  border-radius:34px;
  transition:opacity .34s var(--ease-spring),transform .34s var(--ease-spring);
}
.glass-panel-float.is-open{
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
/* #mobileMenu is a plain flex wrapper now — .glass-panel-float still drives
   its position/open-close animation (shared with #searchOverlay), but it no
   longer renders a glass surface of its own: the brand pill and the nav
   list are each their own independent .liquid-glass panel, stacked with a
   gap, so the pill visually floats above the list as a separate object —
   same width, same alignment — rather than living inside its scrollable
   content. */
#mobileMenu.glass-panel-float{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
  overflow:visible;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Isolated pill header, logo only — mirrors .topbar/.brand's own look
   (same .liquid-glass surface, same logo markup/swap classes) so it reads
   as the same object just relocated, not a new design. */
.mobile-menu-brand{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:64px;
  border-radius:32px;
  padding:8px;
}
.mobile-menu-brand a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
}

.mobile-menu-list{
  flex:1 1 auto;
  min-height:0; /* lets it shrink below content size inside the flex column so overflow:auto actually kicks in, instead of pushing the panel past the viewport */
  overflow:auto;
  padding:14px;
  border-radius:34px;
}

.mobile-nav-item{
  padding:2px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-nav-item:last-child{border-bottom:0}
.mobile-nav-row{
  display:flex;
  align-items:stretch;
  gap:4px;
}
.mobile-nav-link{
  flex:1;
  min-height:42px;
  display:flex;
  align-items:center;
  border-radius:20px;
  color:var(--chrome-text-strong);
  font-weight:820;
  padding:0 14px;
  transition:color .18s ease;
}
.mobile-nav-link:hover{
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 16%,transparent),color-mix(in srgb,var(--vice-cyan) 16%,transparent));
}
.mobile-nav-link[aria-current="page"]{
  color:var(--chrome-text-strong);
  text-shadow:var(--chrome-text-shadow);
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 14%,transparent),color-mix(in srgb,var(--vice-cyan) 14%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vice-blue) 40%,transparent);
}

/* Toggle chevron — separate control from the link itself, so tapping it
   expands/collapses subpages without navigating (the link still navigates
   to the parent page directly, same as desktop's .site-link). Deliberately
   bare — no button chrome (background/border/pill shape), just the glyph;
   the browser's default button styling is reset explicitly since the
   global `button{}` rule (site.css:103) only resets font/color, not
   background/border. */
.mobile-nav-toggle{
  width:30px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  border-radius:0;
  color:var(--chrome-text);
  flex:0 0 auto;
}
.mobile-nav-toggle svg{transition:transform .26s var(--ease-glass)}
.mobile-nav-item.is-expanded .mobile-nav-toggle{color:var(--chrome-text-strong)}
.mobile-nav-item.is-expanded .mobile-nav-toggle svg{transform:rotate(180deg)}
/* The hover treatment .site-dropdown__link:hover uses on desktop, applied
   here to the whole row while its subpages are expanded — the requested
   "hover color used for an expanded menu item that has subpages". */
.mobile-nav-item.is-expanded .mobile-nav-row{
  border-radius:20px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 16%,transparent),color-mix(in srgb,var(--vice-cyan) 16%,transparent));
}

/* Collapsed by default, revealed only by clicking the toggle — the
   grid-template-rows 0fr/1fr technique animates to the content's real
   height without a hardcoded max-height guess. min-height:0 on the inner
   wrapper is required for the 0fr collapse to actually reach zero. */
.mobile-nav-children{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease-glass);
}
.mobile-nav-children-inner{
  overflow:hidden;
  min-height:0;
  display:grid;
  gap:2px;
  padding:4px 0 6px 20px;
}
.mobile-nav-item.is-expanded .mobile-nav-children{grid-template-rows:1fr}
.mobile-nav-sublink{
  min-height:38px;
  display:flex;
  align-items:center;
  border-radius:18px;
  color:var(--chrome-text);
  font-weight:720;
  padding:0 14px;
}
.mobile-nav-sublink:hover{
  color:var(--chrome-text-strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 16%,transparent),color-mix(in srgb,var(--vice-cyan) 16%,transparent));
}
.mobile-nav-sublink[aria-current="page"]{
  color:var(--chrome-text-strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 16%,transparent),color-mix(in srgb,var(--vice-cyan) 16%,transparent));
}

/* Same fix as .search-overlay (see below): the shared --glass-blur default
   reads as ~unblurred, and --glass-bg/--glass-border only ever get themed
   from being inside a .light-chapter *section* — the mobile menu is global
   chrome outside any chapter, so it always rendered with the dark tint
   regardless of the active chapter's theme. */
.mobile-menu{ --glass-blur:6px; }
body.light-chapter-active .mobile-menu{
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.18) 48%,rgba(114,215,255,.16)),
    rgba(255,255,255,.16);
  --glass-border:rgba(7,25,48,.14);
  --glass-highlight:rgba(255,255,255,.58);
}

/* The shared .liquid-glass --glass-blur default (1px, site.css:33) reads as
   essentially unblurred behind the search panel's own opaque-ish content —
   bump it slightly higher just for this panel. --glass-bg/--glass-border
   only ever get their light-theme values from being a descendant of a
   .light-chapter *section* (site.css:890) — #searchOverlay is global chrome
   outside any chapter, so it never inherited that. Mirror the same
   light-theme values here, keyed off body.light-chapter-active (toggled by
   setActiveSectionTheme in site.js) so the panel's tint actually follows
   the active chapter's theme rather than always rendering dark. */
.search-overlay{ --glass-blur:8px; }
body.light-chapter-active .search-overlay{
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.18) 48%,rgba(114,215,255,.16)),
    rgba(255,255,255,.16);
  --glass-border:rgba(7,25,48,.14);
  --glass-highlight:rgba(255,255,255,.58);
}
@media(min-width:981px){
  .search-overlay{
    top:calc(var(--search-header-top, 18px) + var(--search-header-height, 76px) - 1px);
    bottom:auto;
    left:var(--search-header-left, 50%);
    width:var(--search-header-width, min(1180px,calc(100% - 32px)));
    max-height:min(62svh,560px);
    transform-origin:top center;
    transform:translateY(-20px) scaleX(.986) scaleY(.74);
    transition:
      opacity .46s cubic-bezier(.18,.86,.22,1),
      transform .52s cubic-bezier(.18,.86,.22,1);
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-top:0;
    padding:18px 18px 16px;
    z-index:119;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 22px 42px rgba(7,25,48,.16);
  }
  .search-overlay.is-open{
    transform:translateY(0) scale(1);
  }
}

/* ── SearchFilters — category tabs above the results list ── */
.search-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:2px 2px 10px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.search-filter{
  border:0;
  border-radius:999px;
  padding:6px 13px;
  font-size:12px;
  font-weight:750;
  color:var(--chrome-text);
  background:rgba(255,255,255,.06);
  transition:background .18s ease,color .18s ease;
}
.search-filter:hover{background:rgba(255,255,255,.11)}
.search-filter.is-active{
  color:#fff;
  background:linear-gradient(90deg,var(--vice-pink),var(--vice-cyan));
}

/* ── SearchResults — rows inside the shared GlassPanel (#searchOverlay) ── */
.search-results{display:grid;gap:6px}
.search-result{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:46px;
  justify-content:center;
  border-radius:18px;
  padding:8px 14px;
  color:var(--chrome-text-strong);
}
.search-result:hover,
.search-result.is-active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 16%,transparent),color-mix(in srgb,var(--vice-cyan) 16%,transparent));
}
.search-result-title{font-weight:820;font-size:14px;display:flex;align-items:center;gap:8px}
.search-result-type{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--vice-cyan);
  opacity:.85;
}
.search-result-subtitle{font-size:12px;color:var(--chrome-text);opacity:.8}
.search-empty{padding:14px;text-align:center;color:var(--chrome-text);font-size:13px}
.hero{
  min-height:calc(100vh - 40px);
  display:grid;
  grid-template-columns:1fr .90fr;
  align-items:center;
  gap:56px;
  padding-top:128px;
  padding-bottom:132px;
}
.chapter.hero > .section:not(.mod-inner){
  display:contents;
}
.eyebrow,
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(238,246,255,.78);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  text-shadow:0 0 16px rgba(0,0,0,.34);
}
.eyebrow,
.kicker{
  padding:10px 14px;
  border-radius:999px;
  --glass-blur:12px;
  --glass-edge:.36;
}
.kicker{
  padding:9px 13px;
}
.pulse-dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--vice-cyan);
  box-shadow:0 0 18px var(--vice-cyan);
  animation:pulse 1.8s ease-in-out infinite;
}
h1{
  margin-top:24px;
  max-width:920px;
  font-size:clamp(46px,5.9vw,78px);
  line-height:.96;
  letter-spacing:0;
  background:linear-gradient(105deg,#fff 0 48%,rgba(238,246,255,.86) 62%,var(--vice-cyan) 86%,var(--vice-pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--vice-cyan) 10%,transparent));
}
h1,
h2,
h3,
.main-dash h2,
.resource-card h2{
  font-family:var(--font-heading);
}
.hero-text{
  margin-top:24px;
  max-width:720px;
  color:var(--muted);
  font-size:19px;
  line-height:1.75;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-actions .liquid-button{min-width:190px}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:34px;
  max-width:680px;
}
.stat{
  min-height:96px;
  padding:18px;
  border-radius:26px;
}
.stat strong{display:block;font-size:20px}.stat span{display:block;margin-top:6px;color:var(--soft);font-size:13px}

.hero-visual{
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.device-glass{
  position:relative;
  width:min(470px,100%);
  height:620px;
  border-radius:42px;
}
.device-glass::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:41px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.16),transparent 28%,transparent 70%,rgba(255,255,255,.07)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 13px);
  opacity:.78;
}
.dashboard-card,
.mini-card{position:absolute;border-radius:28px}
.main-dash{left:54px;right:54px;top:118px;padding:26px}
.dash-top{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.54);font-size:12px;letter-spacing:.16em;font-weight:820}
.dash-top i{width:10px;height:10px;border-radius:99px;background:var(--vice-cyan);box-shadow:0 0 18px var(--vice-cyan)}
.main-dash h2{margin-top:22px;font-size:32px;letter-spacing:0}
.main-dash p{margin-top:10px;color:var(--muted);line-height:1.55}
.signal-bars{display:flex;align-items:end;gap:8px;margin-top:30px;height:58px}
.signal-bars span{flex:1;border-radius:999px;background:linear-gradient(to top,var(--vice-pink),var(--vice-cyan));box-shadow:0 0 22px color-mix(in srgb,var(--vice-cyan) 24%,transparent)}
.signal-bars span:nth-child(1){height:30%}.signal-bars span:nth-child(2){height:50%}.signal-bars span:nth-child(3){height:75%}.signal-bars span:nth-child(4){height:100%}
.mini-card{padding:18px;min-width:170px}.mini-card small{display:block;color:var(--soft);font-weight:740}.mini-card strong{display:block;margin-top:8px;font-size:20px}
.mini-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.12);
}
.mini-one{right:22px;top:350px;animation:floatCard 5s ease-in-out infinite}.mini-two{left:22px;bottom:100px;animation:floatCard 5s ease-in-out infinite -1.8s}.mini-three{right:46px;bottom:38px;animation:floatCard 5s ease-in-out infinite -3s}
.hero-proof{
  width:min(520px,100%);
  min-height:600px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1.1fr 1fr 1fr;
  gap:12px;
  padding:14px;
  border-radius:42px;
  --glass-edge:.58;
  --glass-blur:8px;
}
.hero-proof__item{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  padding:22px;
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.012)),
    radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--vice-cyan) 12%,transparent),transparent 42%);
  border:1px solid rgba(255,255,255,.075);
}
.hero-proof__item.is-primary{
  grid-column:1 / -1;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--vice-cyan) 14%,transparent),color-mix(in srgb,var(--vice-pink) 10%,transparent)),
    rgba(255,255,255,.035);
}
.hero-proof__item span{
  color:var(--soft);
  font-size:11px;
  font-weight:820;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-proof__item strong{
  color:var(--text);
  font-size:clamp(24px,3vw,42px);
  line-height:.96;
  letter-spacing:0;
}
.hero-proof__item:not(.is-primary) strong{font-size:22px}
.hero-proof__item p{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.hero-media,
.hero-slides{
  width:min(540px,100%);
  min-height:600px;
  border-radius:42px;
  padding:14px;
  --glass-edge:.58;
  --glass-blur:8px;
}
.hero-media{
  display:block;
}
.hero-media img,
.hero-media video,
.hero-slide img,
.hero-slide video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:30px;
  background:#020108;
}
.hero-media img,
.hero-media video{
  min-height:572px;
}
.hero-slides{
  position:relative;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:14px;
  margin:0;
  opacity:0;
  transform:scale(1.025);
  animation:heroSlideFade calc(var(--slide-count,2) * 5s) infinite;
  animation-delay:calc(var(--slide-i,0) * 5s);
}
.hero-slides.is-single .hero-slide{
  opacity:1;
  transform:none;
  animation:none;
}
.hero-slide figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  color:rgba(255,255,255,.84);
  font-size:13px;
  font-weight:760;
  line-height:1.35;
  text-shadow:0 2px 18px rgba(0,0,0,.72);
}
@keyframes heroSlideFade{
  0%,100%{opacity:0;transform:scale(1.025)}
  7%,42%{opacity:1;transform:scale(1)}
  50%{opacity:0;transform:scale(1.018)}
}
.hero-custom{
  width:min(520px,100%);
  min-height:480px;
  border-radius:36px;
  padding:28px;
}
.hero-card-stack{
  width:min(520px,100%);
  display:grid;
  gap:16px;
}
.hero-stack-card{
  min-height:154px;
  border-radius:30px;
  padding:20px;
}
.hero-stack-card:nth-child(2){transform:translateX(34px)}
.hero-stack-card:nth-child(3){transform:translateX(-18px)}
.hero-stack-card img{
  width:100%;
  aspect-ratio:16/8;
  object-fit:cover;
  border-radius:20px;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.12);
}
.hero-stack-card small{
  display:block;
  color:var(--soft);
  font-size:12px;
  font-weight:820;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.hero-stack-card strong{
  display:block;
  margin-top:8px;
  font-size:24px;
}
.hero-stack-card p{
  margin-top:8px;
  color:var(--muted);
  line-height:1.55;
}

.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:start}
.section-heading h2{margin-top:16px;font-size:clamp(36px,5vw,68px);line-height:.96;letter-spacing:0}
.section-heading p{max-width:700px;margin:18px auto 0;color:var(--muted);font-size:18px;line-height:1.7}.centered{text-align:center}
.glass-panel{border-radius:32px;padding:34px}.glass-panel>p{color:var(--muted);font-size:18px;line-height:1.75}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.tool-card{padding:24px;border-radius:28px}
.icon-bubble{display:grid;place-items:center;width:50px;height:50px;border-radius:18px;background:linear-gradient(135deg,var(--vice-pink),var(--vice-cyan));box-shadow:0 0 28px color-mix(in srgb,var(--vice-pink) 22%,transparent);font-weight:900;margin-bottom:20px;color:#050108}
.tool-card h3,.system-card h3,.download-card h3{font-size:24px;letter-spacing:0}
.tool-card p,.system-card p,.download-card p,.resource-card p{margin-top:10px;color:var(--muted);line-height:1.65}

.system-grid{margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.system-card{min-height:290px;border-radius:30px;padding:26px;transition:transform .28s ease}
.system-card:hover{transform:translateY(-7px)}
.system-card span{color:rgba(255,255,255,.42);font-weight:900;font-size:13px;letter-spacing:.16em}.system-card h3{margin-top:70px}

.resource-card{border-radius:38px;padding:44px;display:grid;grid-template-columns:1fr .85fr;gap:34px;align-items:center}
.resource-card h2{margin-top:16px;font-size:clamp(40px,5vw,70px);letter-spacing:0;line-height:.96}.resource-card p{font-size:18px;max-width:620px}
.pack-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px;transform:rotate(-2deg)}
.pack-tile{aspect-ratio:1/1;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.035)),radial-gradient(circle at 25% 20%,var(--vice-pink),transparent 38%),radial-gradient(circle at 80% 80%,var(--vice-cyan),transparent 40%)}
.tile-b{transform:translateY(28px);filter:hue-rotate(25deg)}.tile-c{transform:translateY(-14px);filter:hue-rotate(-35deg)}.tile-d{filter:hue-rotate(55deg)}

.download-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.download-card{border-radius:30px;padding:34px;display:flex;flex-direction:column;min-height:360px;transition:transform .28s ease}.download-card:hover{transform:translateY(-6px)}
.download-label{width:max-content;display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.66);font-size:12px;font-weight:820;text-transform:uppercase;letter-spacing:.12em}
.download-label,
.project-tabs span,
.docs-layout aside a{
  background:var(--glass-bg);
  border-color:var(--glass-border);
  color:rgba(248,251,255,.86);
  box-shadow:var(--glass-shadow);
  backdrop-filter:url(#lg-disp) saturate(var(--glass-saturation));
  -webkit-backdrop-filter:url(#lg-disp) saturate(var(--glass-saturation));
}
.download-card h3{margin-top:24px;font-size:30px}.download-card p{flex:1}.download-card .liquid-button{margin-top:auto;min-height:58px}
/* Inner glass pills/links nested inside a glass card must not add a second backdrop layer */
.release-card .download-label,
.project-card .download-label,
.download-card .download-label,
.system-card .download-label,
.tool-card .download-label,
.gallery-card .download-label{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.07)}
.release-card .release-link{backdrop-filter:none;-webkit-backdrop-filter:none}
@supports (backdrop-filter: url(#x)) {
  .release-card .download-label,
  .project-card .download-label,
  .download-card .download-label,
  .system-card .download-label,
  .tool-card .download-label,
  .gallery-card .download-label,
  .release-card .release-link{backdrop-filter:none;-webkit-backdrop-filter:none}
}

.footer{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto 24px;
  padding:30px 34px;
  border-radius:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--soft);
  scroll-snap-align:end;
}
body.light-chapter-active .footer{
  color:rgba(6,24,46,.55);
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.38) 48%,rgba(114,215,255,.24)),
    rgba(255,255,255,.28);
  --glass-border:rgba(7,25,48,.18);
  --glass-highlight:rgba(255,255,255,.72);
  --glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(7,25,48,.08),
    inset 12px 0 24px color-mix(in srgb,var(--vice-pink) 7%,transparent),
    inset -12px 0 24px color-mix(in srgb,var(--vice-cyan) 11%,transparent),
    0 18px 48px rgba(7,25,48,.18),
    0 0 24px color-mix(in srgb,var(--vice-cyan) 12%,transparent);
}
.footer-text{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}
.footer-text > p{font-size:13px;color:var(--soft)}
.footer-logos{
  display:flex;
  align-items:center;
  gap:16px; /* tighter grouping — logos sit together as a unit */
  flex-shrink:0;
}
.footer-logo-stack{width:138px;height:28px;opacity:.86;flex-shrink:0}
.footer-logo-extra{
  height:28px; /* matches default logo height */
  width:auto;
  max-width:140px;
  opacity:.82;
  object-fit:contain;
  object-position:left center; /* align to left edge so it visually lines up */
  filter:brightness(.9);
  transition:opacity .22s;
  flex-shrink:0;
}
.footer-logo-extra:hover{opacity:1}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{font-size:13px;color:var(--soft);text-decoration:none;transition:color .14s}
.footer-links a:hover{color:var(--vice-cyan)}

.site-dropdown__divider{
  display:block;
  height:1px;
  margin:8px 10px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.mobile-nav-divider{
  display:block;
  height:1px;
  margin:8px 6px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.nav-search-button{
  width:46px;
  min-width:46px;
  height:46px;
  min-height:46px !important;
  max-height:46px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:999px !important;
  border:1px solid color-mix(in srgb,var(--vice-pink) 72%,white);
  color:#fff;
  background:var(--vice-pink);
  box-shadow:0 14px 30px rgba(7,25,48,.16),0 8px 22px color-mix(in srgb,var(--vice-pink) 30%,transparent);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.nav-search-button:hover,
.nav-search-button:focus-visible{
  background:color-mix(in srgb,var(--vice-pink) 86%,white);
  box-shadow:0 16px 34px rgba(7,25,48,.18),0 10px 26px color-mix(in srgb,var(--vice-pink) 36%,transparent);
  transform:translateY(-1px);
}
.nav-search-button:active{transform:translateY(0)}
.nav-search-button svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.search-overlay-input{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  margin:2px 2px 12px;
  padding:0 14px;
  border-radius:23px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.12);
}
.search-overlay-input input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--chrome-text-strong);
  font:inherit;
  font-size:15px;
  font-weight:720;
  appearance:none;
  -webkit-appearance:none;
}
.search-overlay-input input::placeholder{color:var(--chrome-text)}

/* ── Corporate redesign primitives ───────────────────────────────────── */
.section-corporate-hero,
.section-corporate-pillars,
.section-corporate-divisions,
.section-portfolio-editorial,
.section-group-structure,
.section-activity-strip,
.section-corporate-cta{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 36%),
    linear-gradient(135deg,rgba(0,229,255,.045),rgba(255,10,138,.035) 45%,rgba(255,255,255,0) 78%);
}
.section-assets-feature{
  color:#071426;
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(232,248,252,.88)),
    radial-gradient(circle at 82% 22%,rgba(0,229,255,.16),transparent 34%),
    radial-gradient(circle at 16% 78%,rgba(255,10,138,.10),transparent 32%);
}
.section-corporate-hero > .mod-inner,
.section-corporate-pillars > .mod-inner,
.section-corporate-divisions > .mod-inner,
.section-portfolio-editorial > .mod-inner,
.section-assets-feature > .mod-inner,
.section-group-structure > .mod-inner,
.section-activity-strip > .mod-inner,
.section-corporate-cta > .mod-inner{
  padding-top:clamp(92px,9vw,146px);
  padding-bottom:clamp(96px,10vw,156px);
}
.corp-label{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  color:var(--vice-cyan);
  font-size:12px;
  line-height:1;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.section-assets-feature .corp-label{color:#006c86}
.corp-hero{
  width:min(100%,1200px);
  min-height:calc(100vh - 210px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.84fr);
  gap:clamp(36px,7vw,92px);
  align-items:center;
}
.corp-hero__copy{
  min-width:0;
}
.corp-hero__copy h1{
  margin-top:24px;
  max-width:920px;
  font-size:clamp(50px,6.2vw,86px);
  line-height:1;
  font-weight:900;
  letter-spacing:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
}
.corp-hero__lead{
  max-width:670px;
  margin-top:28px;
  color:rgba(238,246,255,.78);
  font-size:clamp(18px,2vw,24px);
  line-height:1.46;
}
.corp-hero__visual{
  position:relative;
  min-height:clamp(360px,42vw,580px);
  display:grid;
  place-items:center;
}
.corp-miami-card{
  position:relative;
  width:min(88vw,520px);
  min-height:clamp(340px,38vw,520px);
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(7,25,48,.14);
  background:#d8f4ff;
  box-shadow:0 34px 82px rgba(7,25,48,.18),inset 0 1px 0 rgba(255,255,255,.78);
}
.chapter[data-theme="dark"] .corp-miami-card{
  border-color:rgba(255,255,255,.14);
  background:#0b2038;
  box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16);
}
.corp-miami-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
}
.corp-miami-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 28%),
    linear-gradient(0deg,rgba(4,18,34,.68),rgba(4,18,34,.04) 56%);
  z-index:1;
}
.corp-miami-card__wash{
  position:absolute;
  inset:auto 0 0 0;
  height:58%;
  background:
    radial-gradient(circle at 22% 100%,rgba(255,10,138,.30),transparent 42%),
    radial-gradient(circle at 84% 100%,rgba(0,229,255,.30),transparent 46%),
    linear-gradient(0deg,rgba(4,18,34,.76),transparent);
  z-index:2;
}
.corp-miami-card__brand{
  position:absolute;
  left:clamp(24px,5vw,52px);
  right:clamp(24px,5vw,52px);
  bottom:clamp(94px,10vw,126px);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:3;
}
.corp-miami-card__brand span{
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.chapter[data-theme="dark"] .corp-miami-card__brand span{color:var(--vice-cyan)}
.corp-miami-card__brand strong{
  max-width:8ch;
  color:#fff;
  font-size:clamp(42px,6vw,72px);
  line-height:.92;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:0 14px 34px rgba(0,0,0,.34);
}
.chapter[data-theme="dark"] .corp-miami-card__brand strong{color:#fff}
.corp-miami-card__lanes{
  position:absolute;
  left:clamp(20px,5vw,44px);
  right:clamp(20px,5vw,44px);
  bottom:clamp(22px,4vw,38px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  z-index:3;
}
.corp-miami-card__lanes span{
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(12px);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.chapter[data-theme="dark"] .corp-miami-card__lanes span{
  color:#fff;
  background:rgba(5,8,20,.46);
  border-color:rgba(255,255,255,.14);
}
.corp-mark-orbit{
  position:relative;
  width:min(88vw,440px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.02) 38%,transparent 62%),
    conic-gradient(from 210deg,rgba(0,229,255,.44),rgba(255,10,138,.42),rgba(255,255,255,.08),rgba(0,229,255,.44));
  box-shadow:0 40px 120px rgba(0,0,0,.34), inset 0 0 60px rgba(255,255,255,.06);
  animation:corpMarkBreathe 12s ease-in-out infinite;
}
.corp-mark-orbit::before,
.corp-mark-orbit::after{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
}
.corp-mark-orbit::after{
  inset:27%;
  border-color:rgba(0,229,255,.28);
}
.corp-mark-orbit span{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--vice-cyan);
  box-shadow:0 0 22px var(--vice-cyan);
}
.corp-mark-orbit span:nth-child(1){top:8%;left:48%}
.corp-mark-orbit span:nth-child(2){right:11%;top:48%;background:var(--vice-pink);box-shadow:0 0 22px var(--vice-pink)}
.corp-mark-orbit span:nth-child(3){bottom:12%;left:31%}
.corp-mark-orbit span:nth-child(4){left:14%;top:31%;background:rgba(255,255,255,.78);box-shadow:0 0 18px rgba(255,255,255,.58)}
.corp-mark-orbit img{
  width:54%;
  opacity:.9;
  filter:drop-shadow(0 20px 42px rgba(0,0,0,.48));
}
.corp-hero__coordinates{
  position:absolute;
  right:4%;
  bottom:8%;
  min-width:210px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(7,25,48,.14);
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 52px rgba(7,25,48,.16);
}
.chapter[data-theme="dark"] .corp-hero__coordinates{
  border-color:rgba(255,255,255,.16);
  background:rgba(4,8,18,.72);
  box-shadow:0 22px 52px rgba(0,0,0,.28);
}
.corp-hero__coordinates strong,
.corp-hero__coordinates span{
  display:block;
}
.corp-hero__coordinates strong{font-size:18px}
.corp-hero__coordinates span{
  margin-top:5px;
  color:rgba(6,24,46,.62);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.chapter[data-theme="dark"] .corp-hero__coordinates span{color:rgba(238,246,255,.62)}
@keyframes corpMarkBreathe{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(4deg) scale(1.025)}
}

body.corporate-light-shell:not([data-page="mods"]){
  --bg:#f7fbff;
  background:#f7fbff;
  color:#06182e;
}
body.corporate-light-shell:not([data-page="mods"]) .site-bg{
  background:
    radial-gradient(circle at 14% 18%,rgba(255,10,138,.10),transparent 32%),
    radial-gradient(circle at 86% 12%,rgba(24,184,255,.16),transparent 34%),
    radial-gradient(circle at 76% 88%,rgba(255,211,118,.22),transparent 36%),
    linear-gradient(145deg,#fff 0%,#eef9ff 46%,#fff7fb 100%);
}
body.corporate-light-shell:not([data-page="mods"]) .site-bg::before{
  background:
    linear-gradient(90deg,rgba(24,184,255,.10) 1px,transparent 1px),
    linear-gradient(rgba(255,10,138,.075) 1px,transparent 1px);
  background-size:86px 86px;
  opacity:.45;
  filter:none;
  transform:none;
}
body.corporate-light-shell:not([data-page="mods"]) .site-bg::after{
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.82));
}
body.corporate-light-shell:not([data-page="mods"]) .aurora{
  display:none;
}
body.corporate-light-shell:not([data-page="mods"]) .grid{
  opacity:.12;
  mix-blend-mode:multiply;
}
body.corporate-light-shell:not([data-page="mods"]) .chapter::before{
  opacity:.22;
  filter:blur(42px);
}
.section-corporate-hero.light-chapter,
.section-corporate-pillars.light-chapter,
.section-corporate-divisions.light-chapter,
.section-portfolio-editorial.light-chapter,
.section-group-structure.light-chapter,
.section-activity-strip.light-chapter,
.section-corporate-cta.light-chapter{
  color:#06182e;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.28) 58%,rgba(255,255,255,.50)),
    radial-gradient(circle at 12% 18%,rgba(255,10,138,.065),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(24,184,255,.10),transparent 30%);
}
.section-corporate-hero.light-chapter .corp-label,
.section-corporate-pillars.light-chapter .corp-label,
.section-corporate-divisions.light-chapter .corp-label,
.section-portfolio-editorial.light-chapter .corp-label,
.section-group-structure.light-chapter .corp-label,
.section-activity-strip.light-chapter .corp-label,
.section-corporate-cta.light-chapter .corp-label{
  color:#007a96;
}
.section-corporate-hero.light-chapter .corp-hero__lead,
.section-corporate-pillars.light-chapter .corp-intro__head p,
.section-corporate-divisions.light-chapter .corp-section-head p,
.section-portfolio-editorial.light-chapter .corp-section-head p,
.section-group-structure.light-chapter .corp-section-head p,
.section-corporate-cta.light-chapter .corp-cta p,
.section-activity-strip.light-chapter .corp-activity-item p,
.section-corporate-divisions.light-chapter .corp-division > p,
.section-corporate-pillars.light-chapter .corp-pillar p,
.section-portfolio-editorial.light-chapter .corp-portfolio-item p{
  color:rgba(6,24,46,.68);
}
.section-corporate-pillars.light-chapter .corp-pillar,
.section-corporate-divisions.light-chapter .corp-division-list,
.section-corporate-divisions.light-chapter .corp-division,
.section-activity-strip.light-chapter .corp-activity__list,
.section-activity-strip.light-chapter .corp-activity-item{
  border-color:rgba(6,24,46,.14);
}
.section-corporate-divisions.light-chapter .corp-division__subtitle,
.section-group-structure.light-chapter .corp-node span{
  color:rgba(6,24,46,.56);
}
.section-corporate-divisions.light-chapter .corp-division.is-silver .corp-division__index{
  color:#607187;
}
.section-portfolio-editorial.light-chapter .corp-portfolio-item{
  border-color:rgba(7,25,48,.12);
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.46)),
    rgba(255,255,255,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 24px 54px rgba(7,25,48,.12);
}
.section-group-structure.light-chapter .corp-structure-map{
  border-color:rgba(7,25,48,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.48));
  box-shadow:0 24px 60px rgba(7,25,48,.10);
}
.section-group-structure.light-chapter .corp-structure-map::before{
  background:
    linear-gradient(rgba(0,123,150,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,10,138,.06) 1px,transparent 1px);
}
.section-group-structure.light-chapter .corp-node{
  border-color:rgba(7,25,48,.14);
  background:rgba(255,255,255,.70);
}
.section-group-structure.light-chapter .corp-node--root{
  border-color:rgba(0,127,154,.26);
  box-shadow:0 0 42px rgba(24,184,255,.12);
}
.section-group-structure.light-chapter .corp-structure-map__branches{
  border-top-color:rgba(0,127,154,.34);
  border-left-color:rgba(0,127,154,.30);
  border-right-color:rgba(255,10,138,.22);
}
.section-group-structure.light-chapter .corp-structure-map__branches::after{
  background:linear-gradient(rgba(0,127,154,.42),rgba(7,25,48,.10));
}
.corp-intro,
.corp-divisions,
.corp-portfolio,
.corp-structure,
.corp-activity,
.corp-cta,
.corp-assets-feature{
  width:min(100%,1180px);
  margin:0 auto;
}
.corp-intro{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
  gap:clamp(34px,6vw,84px);
  align-items:start;
}
.corp-intro__head h2,
.corp-section-head h2,
.corp-assets-feature h2,
.corp-cta h2{
  margin-top:18px;
  max-width:820px;
  font-size:clamp(42px,6vw,76px);
  line-height:.96;
  letter-spacing:0;
}
.corp-intro__head p,
.corp-section-head p,
.corp-assets-feature p,
.corp-cta p{
  margin-top:22px;
  max-width:720px;
  color:var(--muted);
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.62;
}
.section-assets-feature .corp-assets-feature p{color:rgba(7,20,38,.72)}
.corp-pillars{
  display:grid;
  gap:18px;
}
.corp-pillar{
  padding:0 0 28px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.corp-pillar span,
.corp-division__index{
  color:var(--vice-cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
}
.corp-pillar h3{
  margin-top:18px;
  font-size:clamp(34px,4vw,54px);
  line-height:.96;
}
.corp-pillar p{
  max-width:46ch;
  margin-top:12px;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
}
.corp-section-head{
  max-width:900px;
  margin-bottom:clamp(34px,5vw,62px);
}
.corp-division-list{
  display:grid;
  gap:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.corp-division{
  display:grid;
  grid-template-columns:72px minmax(220px,.65fr) minmax(280px,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  min-height:190px;
  padding:32px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.corp-division h3{
  font-size:clamp(32px,4.2vw,60px);
  line-height:.95;
}
.corp-division__subtitle{
  margin-top:10px;
  color:rgba(238,246,255,.64);
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.corp-division > p{
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
}
.corp-division.is-pink .corp-division__index{color:var(--vice-pink)}
.corp-division.is-blue .corp-division__index{color:#6fa8ff}
.corp-division.is-silver .corp-division__index{color:rgba(255,255,255,.78)}
.corp-portfolio__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}
.corp-portfolio-item{
  min-height:280px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),
    rgba(5,8,20,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 28px 70px rgba(0,0,0,.22);
}
.corp-portfolio-item:first-child{
  grid-row:span 2;
  min-height:578px;
  background:
    radial-gradient(circle at 82% 12%,rgba(0,229,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
}
.corp-portfolio-item__meta{
  color:var(--vice-cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.corp-portfolio-item h3{
  margin-top:18px;
  font-size:clamp(34px,5vw,68px);
  line-height:.92;
}
.corp-portfolio-item p{
  margin-top:14px;
  color:var(--muted);
  font-size:18px;
  line-height:1.5;
}
.corp-assets-feature{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(330px,.8fr);
  gap:clamp(32px,6vw,82px);
  align-items:center;
}
.corp-assets-feature__list{
  display:grid;
  gap:12px;
}
.corp-assets-feature__list div{
  min-height:74px;
  padding:20px 0;
  display:flex;
  align-items:center;
  gap:18px;
  border-top:1px solid rgba(7,20,38,.14);
}
.corp-assets-feature__list div:last-child{border-bottom:1px solid rgba(7,20,38,.14)}
.corp-assets-feature__list span{
  color:#007f9a;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
}
.corp-assets-feature__list strong{
  font-size:clamp(24px,3vw,40px);
  letter-spacing:.04em;
}
.corp-structure-map{
  position:relative;
  padding:clamp(28px,5vw,56px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  overflow:hidden;
}
.corp-structure-map::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 44%,black,transparent 76%);
  pointer-events:none;
}
.corp-node{
  position:relative;
  z-index:1;
  display:flex;
  min-height:92px;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(4,8,18,.66);
  backdrop-filter:blur(14px);
  text-align:center;
  font-size:20px;
  font-weight:850;
}
.corp-node span{
  color:rgba(238,246,255,.62);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.corp-node--root{
  width:min(100%,360px);
  margin:0 auto 92px;
  border-color:rgba(0,229,255,.32);
  box-shadow:0 0 48px rgba(0,229,255,.10);
}
.corp-structure-map__branches{
  position:absolute;
  z-index:0;
  left:12%;
  right:12%;
  top:138px;
  height:84px;
  border-top:1px solid rgba(0,229,255,.42);
  border-left:1px solid rgba(0,229,255,.42);
  border-right:1px solid rgba(255,10,138,.32);
}
.corp-structure-map__branches::after{
  content:"";
  position:absolute;
  left:50%;
  top:-88px;
  width:1px;
  height:88px;
  background:linear-gradient(rgba(0,229,255,.5),rgba(255,255,255,.14));
}
.corp-structure-map__nodes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.corp-activity__list{
  display:grid;
  gap:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.corp-activity-item{
  display:grid;
  grid-template-columns:220px minmax(160px,.45fr) minmax(280px,1fr);
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  align-items:start;
}
.corp-activity-item span{
  color:var(--vice-cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.corp-activity-item h3{
  font-size:clamp(28px,3vw,44px);
  line-height:1;
}
.corp-activity-item p{
  color:var(--muted);
  line-height:1.55;
}
.corp-cta{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.corp-cta p{font-size:clamp(18px,2vw,23px)}
.corporate-footer{
  position:relative;
  width:min(calc(100% - 40px),1180px);
  margin:70px auto 26px;
  padding:34px;
  display:grid;
  grid-template-columns:220px 1fr auto;
  gap:34px;
  align-items:start;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),rgba(4,8,18,.74);
  box-shadow:0 28px 80px rgba(0,0,0,.26);
}
.corporate-footer__nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,1fr));
  gap:24px;
}
.corporate-footer__nav div{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.corporate-footer__nav strong{
  margin-bottom:8px;
  color:var(--vice-cyan);
  font-size:11px;
  letter-spacing:.16em;
}
.corporate-footer__nav a{
  color:var(--muted);
  font-size:14px;
  transition:color .16s ease;
}
.corporate-footer__nav a:hover{color:#fff}

.project-grid,
.proof-grid,
.status-grid{
  margin-top:46px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.project-card,
.proof-card,
.release-card,
.status-card{
  border-radius:30px;
  padding:30px;
  transition:transform .28s ease,box-shadow .28s ease;
}
.card-media{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:20px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:44px;
}
.gallery-card{
  border-radius:30px;
  padding:12px;
}
.gallery-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:22px;
}
.gallery-card figcaption{
  padding:18px 14px 8px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
.hero-image{
  width:min(520px,100%);
  border-radius:36px;
  padding:12px;
}
.hero-image img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:26px;
}
.project-card:hover,
.proof-card:hover,
.release-card:hover,
.status-card:hover{
  transform:translateY(-7px);
}
.release-card{
  min-height:390px;
  display:flex;
  flex-direction:column;
}
.project-card{
  min-height:390px;
  display:flex;
  flex-direction:column;
}
.proof-card{
  min-height:310px;
  display:flex;
  flex-direction:column;
}
.project-card h3,
.proof-card h3,
.release-card h3,
.status-card h3{
  margin-top:22px;
  font-size:28px;
  line-height:1.04;
  letter-spacing:0;
}
.project-card p,
.proof-card p,
.release-card p,
.status-card p{
  margin-top:12px;
  color:var(--muted);
  line-height:1.65;
}
.proof-card .mod-card-link{
  margin-top:auto;
  padding-top:24px;
}
.release-card p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.project-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 26px;
}
.project-tabs span{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  color:rgba(238,246,255,.72);
  font-size:12px;
  font-weight:760;
}
.project-card .liquid-button{margin-top:auto}
.release-timeline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:36px;
}
.release-card ul{
  display:none;
  margin:22px 0 26px 18px;
  color:var(--muted);
  line-height:1.65;
}
.release-card li+li{margin-top:8px}
.release-actions{
  margin-top:auto;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:26px;
}
.release-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:var(--glass-bg);
  color:var(--vice-cyan);
  cursor:pointer;
  font-size:13px;
  font-weight:820;
  letter-spacing:0;
  padding:0 16px;
  text-align:left;
  text-shadow:0 0 16px color-mix(in srgb,var(--vice-cyan) 36%,transparent);
  transition:color .22s ease,text-shadow .22s ease,transform .22s ease;
}
.release-link:hover{
  color:var(--vice-pink);
  text-shadow:
    0 0 14px color-mix(in srgb,var(--vice-pink) 54%,transparent),
    0 0 20px color-mix(in srgb,var(--vice-cyan) 32%,transparent);
  transform:translateY(-1px);
}
.release-link{position:relative}
.release-link::after{
  content:'';
  position:absolute;
  left:16px;
  bottom:7px;
  width:calc(100% - 32px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--vice-pink),var(--vice-cyan));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .12s ease;
}
.release-link:hover::after{transform:scaleX(1)}
.release-link:active::after{background:var(--vice-pink);transform:scaleX(1);transition:background .08s ease}
.light-chapter .release-link:hover{color:#030817}
.release-actions .liquid-button{
  min-height:52px;
  width:max-content;
}
.content-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 22% 20%,color-mix(in srgb,var(--vice-cyan) 18%,transparent),transparent 34%),
    radial-gradient(circle at 78% 24%,color-mix(in srgb,var(--vice-pink) 18%,transparent),transparent 36%),
    rgba(0,0,0,.68);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
.content-modal[hidden]{display:none}
.content-modal__panel{
  width:min(760px,100%);
  max-height:min(760px,calc(100svh - 48px));
  overflow:auto;
  border-radius:38px;
  padding:34px;
  color:var(--text);
  box-shadow:
    0 34px 110px rgba(0,0,0,.62),
    0 0 48px color-mix(in srgb,var(--vice-cyan) 18%,transparent),
    0 0 56px color-mix(in srgb,var(--vice-pink) 16%,transparent);
}
.content-modal__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.content-modal__panel h2{
  margin-top:12px;
  font-size:clamp(34px,5vw,64px);
  line-height:.98;
  letter-spacing:0;
}
.content-modal__summary{
  color:var(--muted);
  line-height:1.65;
  margin:12px 0 22px;
}
.content-modal__body{
  display:grid;
  gap:12px;
  color:rgba(235,245,255,.84);
  line-height:1.65;
}
.content-modal__body p{margin:0}
.content-modal__body ul{
  margin-left:20px;
}
.content-modal__body li+li{margin-top:10px}
.content-modal__close{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:var(--glass-bg);
  color:var(--text);
  cursor:pointer;
  font-size:24px;
  line-height:1;
  box-shadow:var(--glass-shadow);
}
.status-grid{grid-template-columns:repeat(3,1fr)}
.status-card{
  min-height:210px;
}
.status-dot{
  display:block;
  width:13px;
  height:13px;
  border-radius:99px;
  background:var(--vice-cyan);
  box-shadow:0 0 18px var(--vice-cyan);
}
.status-planned{
  background:var(--vice-pink);
  box-shadow:0 0 18px var(--vice-pink);
}
.docs-layout{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:28px;
  margin-top:34px;
  padding:28px;
  border-radius:32px;
}
.docs-layout aside{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.docs-layout aside a{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:18px;
  color:rgba(238,246,255,.74);
  font-size:13px;
  font-weight:780;
}
.docs-layout article+article{margin-top:26px}
.docs-layout h3{font-size:24px}
.docs-layout p{
  margin-top:8px;
  color:var(--muted);
  line-height:1.7;
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.hero .reveal{opacity:1;transform:none}
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}


/* Animated background — only when explicitly enabled via body.animated-bg */
body.animated-bg .site-bg::before { animation:liquidField 16s ease-in-out infinite alternate; }
body.animated-bg .aurora { display:block; }
body.animated-bg .grid { display:block; }
body.animated-bg .aurora-one,
body.animated-bg .aurora-two,
body.animated-bg .aurora-three { animation:floatAurora 17s ease-in-out infinite alternate; }
body.animated-bg .aurora-two { animation-delay:-5s; }
body.animated-bg .aurora-three { animation-delay:-9s; }
body.animated-bg .grid { animation:gridMove 14s linear infinite; }
@media (prefers-reduced-motion:reduce) {
  body.animated-bg .site-bg::before,
  body.animated-bg .aurora,
  body.animated-bg .grid { animation:none !important; }
}
@keyframes liquidField{0%{background-position:0% 44%,100% 24%,42% 100%,0 0,0 0}50%{background-position:78% 58%,24% 68%,58% 18%,20% 20%,50% 50%}100%{background-position:100% 36%,0% 42%,78% 86%,100% 100%,100% 100%}}
@keyframes modsBgDrift{0%{transform:translate3d(-10px,calc(var(--bg-shift) * -.04),0) scale(1.035)}100%{transform:translate3d(10px,calc(var(--bg-shift) * -.08),0) scale(1.055)}}
@keyframes floatAurora{0%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(4deg) scale(1.08)}100%{transform:rotate(-1deg) scale(1.03)}}
@keyframes gridMove{to{background-position:0 74px,74px 0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.6);opacity:1}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ══════════════════════════════════════════════════════════════
   PREMIUM PRESET MODULES
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Cinematic Hero ─────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   CINEMATIC HERO — the media IS the stage
   Architecture: section = viewport, media = full background, typography
   overlaid directly. No containers. No cards. No nested wrappers visible.
   Reference: Apple product launches, Porsche/Mercedes model pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Base mod-cinematic-hero (non-chapter context, e.g. preview)  ── */
/* When used standalone without the .chapter wrapper               */
.mod-cinematic-hero {
  position: relative;
  min-height: 100svh;
  display: block;
  overflow: hidden;
}

/* ── Stage: the section itself becomes the viewport ──────────────── */
/* The section has both .section (width:min(1180px,…)) and .chapter. */
/* We override both on the compound selector.                        */
/* margin-top:-18px closes the topbar's top:18px gap.               */
.section.chapter.section-cinematic-hero {
  position: relative !important;
  display: block !important;          /* absolutely positioned children only */
  width: 100% !important;
  max-width: 100% !important;
  margin: -18px 0 0 0 !important;     /* pull above topbar gap */
  padding: 0 !important;
  min-height: calc(100svh + 18px) !important;
  height: calc(100svh + 18px);        /* explicit height for absolute children */
  overflow: hidden;
  scroll-margin-top: 0;
}

/* ── Wrapper: display:contents removes it entirely from layout ─── */
/* Its child (.mod-cinematic-hero) becomes a direct child of the   */
/* section, inheriting the positioning context correctly.          */
.section.chapter.section-cinematic-hero > .section.mod-inner {
  display: contents !important;
}

/* ── Cinematic hero: fills the section absolutely ─────────────── */
.section.chapter.section-cinematic-hero .mod-cinematic-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: unset !important;
  margin: 0 !important;
  display: block !important;
}

/* ── Media: fills the entire stage, object-fit:cover ──────────── */
.mod-cinematic-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mod-cinematic-hero__media img,
.mod-cinematic-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Disable parallax shift — avoids exposing bare edges */
  transform: none !important;
  transition: none !important;
}
.mod-cinematic-hero__slides{
  overflow:hidden;
}
.mod-cinematic-hero__slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:scale(1.03);
  animation:cinematicSlideFade calc(var(--cinematic-slide-count,2) * 6s) infinite;
  animation-delay:calc(var(--cinematic-slide-i,0) * 6s);
}
.mod-cinematic-hero__slides.is-single .mod-cinematic-hero__slide{
  opacity:1;
  transform:none;
  animation:none;
}
.mod-cinematic-hero__slide img,
.mod-cinematic-hero__slide video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
@keyframes cinematicSlideFade{
  0%,100%{opacity:0;transform:scale(1.03)}
  8%,40%{opacity:1;transform:scale(1)}
  50%{opacity:0;transform:scale(1.018)}
}

/* ── Overlay: editorial gradient — barely there at top,           */
/*    deep black at bottom for text legibility                     */
.mod-cinematic-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.60) 28%,
      rgba(0,0,0,.12) 58%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.04)  0%,
      transparent      12%,
      transparent      40%,
      rgba(0,0,0,.38)  65%,
      rgba(0,0,0,.78)  82%,
      rgba(0,0,0,.97)  96%,
      rgba(0,0,0,1)   100%
    );
}

.section-cinematic-hero.light-chapter .mod-cinematic-hero__overlay{
  background:
    linear-gradient(
      to right,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.64) 32%,
      rgba(255,255,255,.22) 62%,
      rgba(255,255,255,.02) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0%,
      transparent 35%,
      rgba(238,248,255,.54) 80%,
      rgba(232,244,251,.88) 100%
    );
}

/* ── Typography: bottom-left, no container box ────────────────── */
/* Positioned at the bottom of the stage, full-width, left edge.  */
/* No max-width wrapper. No card. Direct on the image.            */
.mod-cinematic-hero__content {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2;
  padding: 0 clamp(28px, 6vw, 88px) clamp(52px, 8vw, 96px) !important;
  text-align: left !important;
  max-width: none !important;
}

/* Headline: large, white, direct — remove the background-clip gradient */
.mod-cinematic-hero__content h1 {
  font-size: clamp(3rem, 7.5vw, 7.8rem) !important;
  font-weight: 920 !important;
  letter-spacing: 0 !important;
  line-height: 1.0 !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.45) !important;
  margin-bottom: 18px !important;
}

.section-cinematic-hero.light-chapter .mod-cinematic-hero__content h1{
  color:#06182e !important;
  -webkit-text-fill-color:#06182e !important;
  text-shadow:0 2px 24px rgba(255,255,255,.72),0 12px 30px rgba(72,126,150,.22) !important;
}

/* Subline: readable, not over-styled */
.mod-cinematic-hero__content p {
  font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
  color: rgba(255,255,255,.80) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.55) !important;
  max-width: 580px !important;
  margin: 0 0 32px !important;
  line-height: 1.55 !important;
}

.section-cinematic-hero.light-chapter .mod-cinematic-hero__content p{
  color:rgba(6,24,46,.76) !important;
  text-shadow:0 1px 16px rgba(255,255,255,.76) !important;
}

/* CTA row stays at bottom, left-aligned */
.mod-cinematic-hero__content .mod-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* ── Eyebrow label above headline ─────────────────────────────── */
.mod-cinematic-hero__content .eyebrow,
.mod-cinematic-hero__content .kicker,
.mod-cinematic-hero__content .mod-label {
  display: inline-block !important;
  margin-bottom: 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  background: none !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.5) !important;
}

.section-cinematic-hero.light-chapter .mod-cinematic-hero__content .eyebrow,
.section-cinematic-hero.light-chapter .mod-cinematic-hero__content .kicker,
.section-cinematic-hero.light-chapter .mod-cinematic-hero__content .mod-label{
  color:var(--vice-cyan) !important;
  -webkit-text-fill-color:var(--vice-cyan) !important;
  text-shadow:
    0 4px 10px rgba(0,18,36,.46),
    0 12px 30px rgba(0,70,115,.30),
    0 0 34px color-mix(in srgb,var(--vice-cyan) 32%,transparent) !important;
  filter:drop-shadow(0 5px 12px rgba(0,36,62,.16)) !important;
}

/* ── Scroll hint ───────────────────────────────────────────────── */
.mod-cinematic-hero__scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: .38;
  animation: bounceY 2.4s ease-in-out infinite;
}
@keyframes bounceY {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(8px); }
}
.mod-cinematic-hero__scroll-hint span { font-size:11px;text-transform:uppercase;letter-spacing:.12em; }
.section-cinematic-hero.light-chapter .mod-cinematic-hero__scroll-hint{
  color:rgba(6,24,46,.58);
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* This content block is bottom-anchored (inset:auto 0 0 0) inside a
     ~100svh section, so its own bottom padding is the ONLY thing standing
     between the CTA buttons and the fixed .mobile-dock — the 56px this
     used to reserve was less than the dock's own footprint
     (--dock-fab-size 54px + its 18px/safe-area offset from the viewport
     edge), so the "Learn more"/CTA row sat crowded right against, or
     under, the dock. Sized to actually clear it plus real breathing room. */
  .mod-cinematic-hero__content {
    padding: 0 20px calc(var(--dock-fab-size) + max(18px, env(safe-area-inset-bottom)) + 28px) !important;
  }
  /* Same overlap problem as the content padding above (bottom:28px sits
     inside the fixed dock's footprint) — the dock itself already signals
     "more below", so this is redundant on mobile rather than worth
     repositioning. */
  .mod-cinematic-hero__scroll-hint {
    display: none;
  }
}

/* ── 2. Product Showcase ───────────────────────────────────── */
.mod-product-showcase{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.mod-product-showcase__media-wrap{
  position:relative;width:min(760px,100%);border-radius:32px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.55),
    0 0 80px color-mix(in srgb,var(--vice-cyan) 14%,transparent),
    0 0 60px color-mix(in srgb,var(--vice-pink) 10%,transparent);
}
.mod-product-showcase__media-wrap img,.mod-product-showcase__media-wrap video{
  width:100%;display:block;border-radius:inherit;
}
.mod-product-showcase__badge{
  position:absolute;top:20px;left:20px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:4px 14px;border-radius:999px;font-size:12px;font-weight:800;
  color:var(--vice-cyan);letter-spacing:.06em;text-transform:uppercase;
}
.mod-product-showcase__card{
  max-width:640px;
}
.mod-product-showcase__card h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;margin-bottom:16px;letter-spacing:-.03em}
.mod-product-showcase__card p{color:var(--muted);font-size:1.1rem;line-height:1.65;margin-bottom:28px}

/* ── 3. Split Narrative ────────────────────────────────────── */
.mod-split-narrative{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
.mod-split-narrative__text{
  position:sticky;top:120px;padding-bottom:40px;
}
.mod-split-narrative__text h2{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.03em;margin-bottom:20px}
.mod-split-narrative__text p{color:var(--muted);font-size:1.05rem;line-height:1.7;margin-bottom:28px}
.mod-split-narrative__media-stack{display:flex;flex-direction:column;gap:24px}
.mod-split-narrative__media-item{
  border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.mod-split-narrative__media-item img,.mod-split-narrative__media-item video{
  width:100%;display:block;
}
.mod-split-narrative__caption{
  padding:14px 18px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);font-size:13px;color:var(--muted);
}

/* ── 4. Bento Grid ─────────────────────────────────────────── */
.mod-bento-grid__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;
}
.mod-bento-item{
  border-radius:28px;padding:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02) 48%,rgba(0,229,255,.02));
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .28s ease,box-shadow .28s ease;
}
.mod-bento-item:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mod-bento-item.is-large{grid-column:span 2}
.mod-bento-item.is-tall{grid-row:span 2}
.mod-bento-item__icon{font-size:28px;line-height:1;margin-bottom:4px}
.mod-bento-item__media{border-radius:16px;overflow:hidden;flex:1;min-height:140px}
.mod-bento-item__media img,.mod-bento-item__media video{width:100%;height:100%;object-fit:cover;display:block}
.mod-bento-item h3{font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.mod-bento-item p{font-size:.9rem;color:var(--muted);line-height:1.55}
.mod-bento-item.glow-pink{box-shadow:0 0 40px color-mix(in srgb,var(--vice-pink) 12%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--vice-pink) 18%,transparent)}
.mod-bento-item.glow-cyan{box-shadow:0 0 40px color-mix(in srgb,var(--vice-cyan) 12%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--vice-cyan) 18%,transparent)}

/* ── 5. App Carousel ───────────────────────────────────────── */
.mod-app-carousel__track{
  display:flex;gap:24px;overflow-x:auto;padding:20px 4px 32px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.mod-app-carousel__track::-webkit-scrollbar{display:none}
.mod-app-carousel__slide{
  flex-shrink:0;scroll-snap-align:center;
  border-radius:28px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  transition:transform .28s ease;
}
.mod-app-carousel__slide:hover{transform:scale(1.02)}
.mod-app-carousel__slide.is-desktop{width:min(780px,85vw)}
.mod-app-carousel__slide.is-mobile{width:min(280px,70vw)}
.mod-app-carousel__slide.is-tablet{width:min(480px,80vw)}
.mod-app-carousel__slide img,.mod-app-carousel__slide video{width:100%;display:block}
.mod-app-carousel__nav{
  display:flex;justify-content:center;gap:8px;margin-top:16px;
}
.mod-app-carousel__dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);border:none;cursor:pointer;padding:0;
  transition:background .2s,transform .2s;
}
.mod-app-carousel__dot.is-active{background:var(--vice-cyan);transform:scale(1.3)}

/* ── 6. Timeline Reveal ────────────────────────────────────── */
.mod-timeline{position:relative;padding-left:32px}
.mod-timeline::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,transparent,var(--vice-cyan),var(--vice-pink),transparent);
  opacity:.4;
}
.mod-timeline-item{position:relative;margin-bottom:56px}
.mod-timeline-item::before{
  content:"";position:absolute;left:-38px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--vice-cyan);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vice-cyan) 20%,transparent),0 0 20px color-mix(in srgb,var(--vice-cyan) 40%,transparent);
}
.mod-timeline-item__date{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--vice-cyan);margin-bottom:8px;
}
.mod-timeline-item__card{
  padding:24px 28px;border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.003) 48%,rgba(0,229,255,.015));
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  box-shadow:0 8px 32px rgba(0,0,0,.28);
}
.mod-timeline-item__card h3{font-size:1.15rem;font-weight:800;margin-bottom:8px}
.mod-timeline-item__card p{color:var(--muted);font-size:.95rem;line-height:1.6}
.mod-timeline-item__media{margin-top:16px;border-radius:14px;overflow:hidden}
.mod-timeline-item__media img,.mod-timeline-item__media video{width:100%;display:block}

/* ── 7. Before/After ───────────────────────────────────────── */
.mod-before-after{
  position:relative;border-radius:28px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  cursor:ew-resize;user-select:none;
}
.mod-before-after__after,.mod-before-after__before{
  position:absolute;inset:0;
}
.mod-before-after__before{z-index:1}
.mod-before-after__after{z-index:2;clip-path:inset(0 50% 0 0)}
.mod-before-after__before img,.mod-before-after__after img,
.mod-before-after__before video,.mod-before-after__after video{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
.mod-before-after__handle{
  position:absolute;top:0;bottom:0;left:50%;z-index:3;
  width:3px;background:rgba(255,255,255,.7);transform:translateX(-50%);
  box-shadow:0 0 20px rgba(255,255,255,.3);
}
.mod-before-after__handle::after{
  content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:rgba(255,255,255,.7);letter-spacing:-2px;
}
.mod-before-after__spacer{display:block;width:100%;aspect-ratio:16/9}
.mod-before-after__labels{
  position:absolute;bottom:16px;left:0;right:0;z-index:4;
  display:flex;justify-content:space-between;padding:0 20px;pointer-events:none;
}
.mod-before-after__labels span{
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;
}

/* ── 8. Animated Stats Cards ───────────────────────────────── */
.mod-stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px;
}
.mod-stat-card{
  padding:32px 28px;border-radius:28px;text-align:center;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 48%,rgba(0,229,255,.02));
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  box-shadow:0 8px 32px rgba(0,0,0,.24);
  transition:transform .28s ease,box-shadow .28s ease;
}
.mod-stat-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mod-stat-card__icon{font-size:24px;margin-bottom:12px;opacity:.7}
.mod-stat-card__value{
  font-size:clamp(2.5rem,5vw,3.8rem);font-weight:950;line-height:1;
  background:linear-gradient(135deg,#fff,var(--vice-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;
}
.mod-stat-card__label{font-size:.9rem;color:var(--muted);font-weight:600;line-height:1.4}
.mod-stat-card.is-pink .mod-stat-card__value{background:linear-gradient(135deg,#fff,var(--vice-pink));-webkit-background-clip:text;background-clip:text}

/* ── 9. Section Transition ─────────────────────────────────── */
.mod-section-transition{
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.mod-section-transition.style-gradient::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--vice-pink) 18%,transparent),transparent 55%),
    radial-gradient(ellipse at 70% 50%,color-mix(in srgb,var(--vice-cyan) 14%,transparent),transparent 55%);
}
.mod-section-transition.style-mesh::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.015) 40px,rgba(255,255,255,.015) 41px),
    repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,255,255,.015) 40px,rgba(255,255,255,.015) 41px);
}
.mod-section-transition__text{
  position:relative;z-index:1;text-align:center;max-width:500px;
}
.mod-section-transition__text h3{
  font-size:clamp(1.2rem,3vw,2rem);font-weight:800;
  color:rgba(255,255,255,.7);letter-spacing:-.02em;
}

/* ── 10. Project Deep-Dive ─────────────────────────────────── */
.mod-project-deepdive{display:flex;flex-direction:column;gap:48px}
.mod-deepdive-hero{
  position:relative;border-radius:32px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--vice-cyan) 8%,transparent);
}
.mod-deepdive-hero img,.mod-deepdive-hero video{width:100%;display:block;max-height:520px;object-fit:cover}
.mod-deepdive-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
.mod-deepdive-gallery__item{
  border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.07);
}
.mod-deepdive-gallery__item img,.mod-deepdive-gallery__item video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.mod-deepdive-features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
}
.mod-deepdive-feature{
  padding:24px;border-radius:22px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
}
.mod-deepdive-feature__icon{font-size:22px;margin-bottom:10px}
.mod-deepdive-feature h4{font-size:1rem;font-weight:800;margin-bottom:6px}
.mod-deepdive-feature p{font-size:.875rem;color:var(--muted);line-height:1.55}

/* ── Module shared utilities ───────────────────────────────── */
.mod-label{
  display:inline-block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  color:var(--vice-cyan);margin-bottom:14px;
}
.chapter:not(.section-cinematic-hero) .kicker,
.chapter:not(.section-cinematic-hero) .eyebrow,
.chapter:not(.section-cinematic-hero) .mod-label,
.chapter:not(.section-cinematic-hero) .mod-inner .eyebrow{
  min-height:28px;
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:none;
}
.chapter[data-theme="light"]:not(.section-cinematic-hero) .kicker,
.chapter[data-theme="light"]:not(.section-cinematic-hero) .eyebrow,
.chapter[data-theme="light"]:not(.section-cinematic-hero) .mod-label,
.chapter[data-theme="light"]:not(.section-cinematic-hero) .mod-inner .eyebrow{
  color:var(--vice-cyan);
  border:1px solid rgba(0,215,255,.30);
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(241,252,255,.62)),
    rgba(255,255,255,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 10px 26px rgba(7,25,48,.10),
    0 0 18px rgba(0,215,255,.12);
}
.chapter[data-theme="dark"]:not(.section-cinematic-hero) .kicker,
.chapter[data-theme="dark"]:not(.section-cinematic-hero) .eyebrow,
.chapter[data-theme="dark"]:not(.section-cinematic-hero) .mod-label,
.chapter[data-theme="dark"]:not(.section-cinematic-hero) .mod-inner .eyebrow{
  color:var(--vice-cyan);
  border:1px solid rgba(160,228,255,.20);
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(114,215,255,.08)),
    rgba(2,8,18,.38);
  text-shadow:
    0 1px 1px rgba(0,0,0,.56),
    0 0 14px rgba(0,215,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 34px rgba(0,0,0,.28);
}
.mod-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.mod-upload-hint{font-size:11px;color:var(--soft);margin-top:8px;font-style:italic}

@media(max-width:980px){
  /* Header morph-away: the desktop header fades/lifts out and the floating
     bottom cluster (hamburger + chapter dock + search) takes over. Crossing
     the breakpoint live (resize/rotate) animates both via the transitions
     declared on the base .topbar/.mobile-dock rules — no JS involved. */
  .topbar{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-14px) scale(.96);pointer-events:none}
  .mobile-dock{
    display:flex;
    position:fixed;
    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom));
    z-index:120;
    transform:translateX(-50%);
    align-items:center;
    justify-content:center;
    gap:var(--dock-gap);
    max-width:calc(100% - var(--dock-edge));
    transition:width .42s var(--ease-spring);
  }
  /* Search wants the full available capsule width, not whatever narrow
     width the current page's tab count happens to shrink-to-fit to — the
     whole dock widens to its max, giving .mobile-search-bar (anchored via
     --dock-fab-size/--dock-gap) real room to expand into. justify-content
     switches to flex-start here: with `center` (the normal, non-searching
     value), widening the row while its flex content stays the same size
     re-centers that content — shifting the hamburger rightward into the
     search capsule's left edge instead of leaving it pinned in place.
     flex-start keeps the hamburger exactly where .mobile-search-bar's
     expanded `left` assumes it is. */
  #mobileDock.is-searching{width:calc(100% - var(--dock-edge));justify-content:flex-start}
  /* Inside the mobile dock, #desktopNav gives up its own fixed/centered
     positioning and just flows as a row item between the two glass-fabs.
     max-width reserves room for the two fab buttons + gaps either side.
     Sized to the same fab height (nested-pill technique preserved: outer
     radius minus padding = inner radius), with comfortable tap targets kept
     via padding rather than a taller dock. */
  .mobile-dock #desktopNav{
    position:static;left:auto;bottom:auto;transform:none;
    /* vw, not % — a percentage here would resolve against #mobileDock's own
       shrink-to-fit width, which itself depends on this element's size,
       creating exactly the circular-sizing bug this block used to have
       (#desktopNav would get clamped against an intermediate width the
       browser never actually renders, leaving dead space in the dock).
       100vw is a fixed, non-circular reference — reserves the hamburger +
       search buttons (--dock-fab-size ×2) + their gaps (--dock-gap ×2) +
       the dock's own edge margin (--dock-edge, see #mobileDock max-width). */
    max-width:calc(100vw - (var(--dock-fab-size) * 2) - (var(--dock-gap) * 2) - var(--dock-edge));
    min-height:var(--dock-fab-size);
    gap:3px;
    padding:5px;
    border-radius:27px;
  }
  .mobile-dock #desktopNav .nav-selection{top:5px;height:calc(100% - 10px);border-radius:21px}
  .mobile-dock #desktopNav a{
    min-width:56px;
    max-width:136px; /* was 120 — labels were sizing to content+padding with zero slack, reading as cramped even though nothing was technically clipping */
    min-height:42px; /* 54 outer − 1px border ×2 − 5px padding ×2 = 42, so the dock settles at exactly 54px instead of growing past its min-height */
    padding:0 11px; /* was 8 — the actual fix for "not enough room around the text"; height math above is untouched since this is horizontal-only */
    gap:2px;
    font-size:10px;
    border-radius:21px;
  }
  .mobile-dock #desktopNav a span:last-child{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-dock #desktopNav .nav-icon,
  .mobile-dock #desktopNav .nav-icon svg{width:20px;height:20px}
  .mobile-dock #desktopNav .nav-icon{flex-basis:20px}
  .glass-fab{display:flex}
  .mobile-search-bar{display:flex}
  /* .hero's desktop padding-top (128px, site.css:1359) reserves clearance
     for the fixed .topbar above it — but .topbar is hidden entirely below
     980px (opacity:0/visibility:hidden, this same breakpoint, above) in
     favor of the bottom-anchored .mobile-dock, so that clearance became
     dead space at the top of every mobile page instead of shrinking along
     with it. Recalculated for mobile specifically: safe-area-aware (notches
     / dynamic island) plus modest breathing room, not inherited desktop spacing.
     min-height is reset from the desktop calc(100vh - 40px) to auto for the
     same reason: with align-items:center, forcing near-fullscreen height on
     a mobile hero whose content (eyebrow+h1+text+buttons) is a fraction of
     that height just centers it inside a mostly-empty box — reading as a
     wall of dead space above and below the actual text/CTA on first view. */
  .hero,.split,.resource-card{grid-template-columns:1fr}.hero{gap:28px;min-height:auto;padding-top:max(28px, calc(env(safe-area-inset-top) + 16px))}.hero-visual{min-height:520px}.device-glass{height:520px}.system-grid{grid-template-columns:1fr 1fr}
  .hero-media,.hero-slides{min-height:520px}.hero-media img,.hero-media video{min-height:492px}
  .project-grid,.proof-grid,.status-grid,.release-timeline,.gallery-grid{grid-template-columns:1fr 1fr}
  .docs-layout{grid-template-columns:1fr}
  .docs-layout aside{flex-direction:row;flex-wrap:wrap}
}
@media(max-height:760px) and (min-width:900px){
  .hero{
    padding-top:118px;
    padding-bottom:118px;
    gap:42px;
  }

  h1{
    font-size:clamp(42px,4.8vw,58px);
    line-height:.98;
  }

  .hero-text{
    margin-top:18px;
    font-size:17px;
    line-height:1.55;
  }

  .hero-actions{
    margin-top:22px;
  }

  .hero-stats{
    display:none;
  }

  .hero-visual{
    min-height:500px;
    transform:scale(.88);
    transform-origin:center right;
  }
}
@media(max-width:720px){
  .topbar{min-height:68px;border-radius:34px}.brand{min-width:auto}.brand-logo-stack{width:118px;height:26px}.nav-download{min-width:104px;min-height:50px;padding:0 17px}
  /* Dock sizing at this width is handled by the .mobile-dock #desktopNav rules
     (higher specificity via #desktopNav) in the @media(max-width:980px) block —
     the whole mobile range shares one consistent dock size, not a second tier. */
}
@media(max-width:680px){
  /* .section's shorthand `padding` re-sets padding-top too — redeclared
     here (same as .hero's own padding-bottom override right after it)
     so the 980px breakpoint's mobile-specific hero padding-top isn't
     clobbered by this narrower breakpoint's general section rhythm.
     Reduced from the desktop-derived 82px/108px — .chapter is sized to
     its own content on mobile (see the mobile-first rewrite near the top
     of this file), so two adjacent sections' padding stacks directly at
     their shared boundary; the old values compounded into far more empty
     space between sections than intended. */
  body{padding-bottom:104px}.section{width:min(100% - 24px,1180px);padding:56px 0}.hero{padding-top:max(28px, calc(env(safe-area-inset-top) + 16px));padding-bottom:64px}h1{font-size:48px}.hero-text{font-size:17px}
  /* release-timeline stays a stacked vertical list (a connector-line
     timeline doesn't read as "cards" the way the others do) — everything
     else here is genuinely a card grid, so it gets the same horizontal
     swipe-through carousel as the .mod-* grids above instead of stacking
     into an ever-taller column. */
  .release-timeline{grid-template-columns:1fr}
  .hero-stats,.feature-row,.system-grid,.download-grid,.project-grid,.proof-grid,.status-grid,.gallery-grid{
    display:flex;
    grid-template-columns:unset;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    gap:14px;
    margin:0 -24px;
    padding:4px 24px 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Without this, a touch drag that isn't perfectly horizontal gets
       interpreted as both a horizontal card-swipe AND a vertical page
       scroll at once (the browser's default gesture recognition allows
       both axes). pan-x tells it this element only handles horizontal
       panning, so a drag here can't also move the page vertically —
       the page can still be scrolled normally by dragging outside it. */
    touch-action:pan-x;
  }
  .hero-stats::-webkit-scrollbar,.feature-row::-webkit-scrollbar,.system-grid::-webkit-scrollbar,.download-grid::-webkit-scrollbar,.project-grid::-webkit-scrollbar,.proof-grid::-webkit-scrollbar,.status-grid::-webkit-scrollbar,.gallery-grid::-webkit-scrollbar{display:none}
  .hero-stats > *,.feature-row > *,.system-grid > *,.download-grid > *,.project-grid > *,.proof-grid > *,.status-grid > *,.gallery-grid > *{
    scroll-snap-align:start;
    flex:0 0 82%;
    max-width:340px;
  }
  .hero-visual{
    display:flex;
    min-height:320px;
    margin-top:2px;
    align-items:center;
  }
  .hero-proof,
  .hero-media,
  .hero-slides{
    width:100%;
    min-height:320px;
    border-radius:32px;
    padding:10px;
  }
  .hero-media img,
  .hero-media video{
    min-height:300px;
    border-radius:22px;
  }
  .hero-slide{
    inset:10px;
  }
  .hero-slide img,
  .hero-slide video{
    border-radius:22px;
  }
  .hero-slide figcaption{
    left:14px;
    right:14px;
    bottom:14px;
    font-size:12px;
  }
  .hero-proof{
    grid-template-rows:1fr 1fr;
  }
  .hero-proof__item{
    padding:16px;
    border-radius:22px;
  }
  .hero-proof__item p{
    display:none;
  }
  .hero-proof__item strong,
  .hero-proof__item:not(.is-primary) strong{
    font-size:20px;
  }
  .device-glass{
    width:min(390px,100%);
    height:340px;
  }
  .main-dash{
    left:30px;
    right:30px;
    top:52px;
  }
  .mini-card{
    min-width:132px;
    padding:14px;
  }
  .mini-one{top:224px}
  .mini-two{bottom:34px}
  .mini-three{display:none}
  .resource-card,.glass-panel,.download-card,.project-card,.proof-card,.release-card,.status-card{padding:26px;border-radius:28px}.pack-preview{transform:none}.footer{flex-direction:column;text-align:center;border-radius:34px;gap:16px}.footer-text{align-items:center;text-align:center}.footer-links{justify-content:center}.footer-logos{justify-content:center}.footer-logo-stack{width:124px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .site-bg::before,.grid,.aurora{transform:none !important}
  .site-light-overlay,.site-dark-overlay{transition:none}
  .hero-slide{opacity:0!important;transform:none!important;animation:none!important}
  .hero-slide:first-child{opacity:1!important}
  .mod-cinematic-hero__slide{opacity:0!important;transform:none!important;animation:none!important}
  .mod-cinematic-hero__slide:first-child{opacity:1!important}
}

/* Vice overlay restoration: cursor-local edge refraction, no white hover rings. */
body[data-page="mods"]{
  --vice-pink:#ff0aa8;
  --vice-cyan:#00e5ff;
  --vice-blue:#00e5ff;
  --vice-blue-deep:#003dff;
  --vice-purple:#7b1dff;
  --glass-edge:.50;
}

body[data-page="mods"] .site-bg{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,10,168,.23),transparent 31%),
    radial-gradient(circle at 78% 20%,rgba(0,61,255,.30),transparent 34%),
    linear-gradient(118deg,rgba(0,61,255,.46),rgba(0,8,42,.26) 42%,rgba(255,10,168,.18) 78%),
    image-set(url("images/vice-hero-desktop.avif") type("image/avif"),url("images/vice-hero-desktop.webp") type("image/webp"),url("mods-bg.png") type("image/png")) center center / cover no-repeat,
    #00040f;
  background-blend-mode:screen,screen,color-burn,normal,normal;
}
@media(max-width:1023px){
  body[data-page="mods"] .site-bg{
    background-image:
      radial-gradient(circle at 18% 18%,rgba(255,10,168,.23),transparent 31%),
      radial-gradient(circle at 78% 20%,rgba(0,61,255,.30),transparent 34%),
      linear-gradient(118deg,rgba(0,61,255,.46),rgba(0,8,42,.26) 42%,rgba(255,10,168,.18) 78%),
      image-set(url("images/vice-hero-tablet.webp") type("image/webp"),url("mods-bg.png") type("image/png"));
  }
}
@media(max-width:767px){
  body[data-page="mods"] .site-bg{
    background-image:
      radial-gradient(circle at 18% 18%,rgba(255,10,168,.23),transparent 31%),
      radial-gradient(circle at 78% 20%,rgba(0,61,255,.30),transparent 34%),
      linear-gradient(118deg,rgba(0,61,255,.46),rgba(0,8,42,.26) 42%,rgba(255,10,168,.18) 78%),
      image-set(url("images/vice-hero-mobile.webp") type("image/webp"),url("mods-bg.png") type("image/png"));
  }
}

body[data-page="mods"] .hero h1,
body[data-page="mods"] .section-heading h2,
body[data-page="mods"] .content-modal__panel h2{
  text-shadow:
    2px 0 0 rgba(0,61,255,.36),
    -2px 0 0 rgba(255,10,168,.34),
    0 0 28px rgba(0,61,255,.36);
}

body[data-page="mods"] .liquid-glass,
body[data-page="mods"] .liquid-button,
body[data-page="mods"] .stat,
body[data-page="mods"] .tool-card,
body[data-page="mods"] .project-card,
body[data-page="mods"] .download-card,
body[data-page="mods"] .release-card,
body[data-page="mods"] .system-card{
  --edge-x:50%;
  --edge-y:50%;
  --edge-local:50%;
  border-color:rgba(255,255,255,.075);
}

.liquid-glass::after,
.liquid-button::after,
.stat::after,
.tool-card::after,
.project-card::after,
.download-card::after,
.release-card::after,
.system-card::after,
.status-card::after,
.gallery-card::after{
  padding:2.3px;
  background:
    radial-gradient(158px 62px at var(--edge-x) var(--edge-y),rgba(255,10,168,0) 0 20%,rgba(0,229,255,0) 44%,transparent 80%),
    linear-gradient(90deg,var(--glass-edge-pink),transparent 12% 88%,var(--glass-edge-cyan)),
    linear-gradient(180deg,rgba(255,255,255,.30),transparent 15% 84%,rgba(255,255,255,.16));
  opacity:calc(var(--glass-edge) * .22);
  filter:none;
  transition:opacity .46s cubic-bezier(.22,1,.36,1),background .55s cubic-bezier(.22,1,.36,1);
  z-index:4;
}

.liquid-glass.is-edge-active::before,
.liquid-button.is-edge-active::before,
.stat.is-edge-active::before,
.tool-card.is-edge-active::before,
.project-card.is-edge-active::before,
.release-card.is-edge-active::before,
.download-card.is-edge-active::before,
.system-card.is-edge-active::before{
  opacity:.70;
}

.is-edge-fading::before{opacity:.18}

body[data-page="mods"] .edge-left.is-edge-active::before{
  background:
    radial-gradient(120px 260px at 0 var(--edge-local),color-mix(in srgb,var(--vice-cyan) 22%,transparent),color-mix(in srgb,var(--vice-pink) 10.5%,transparent) 30%,color-mix(in srgb,var(--vice-cyan) 4%,transparent) 56%,transparent 86%),
    linear-gradient(90deg,color-mix(in srgb,var(--vice-cyan) 5.5%,transparent),color-mix(in srgb,var(--vice-pink) 2.5%,transparent) 16%,transparent 34%);
}
body[data-page="mods"] .edge-right.is-edge-active::before{
  background:
    radial-gradient(120px 260px at 100% var(--edge-local),color-mix(in srgb,var(--vice-pink) 22%,transparent),color-mix(in srgb,var(--vice-cyan) 10.5%,transparent) 30%,color-mix(in srgb,var(--vice-pink) 4%,transparent) 56%,transparent 86%),
    linear-gradient(270deg,color-mix(in srgb,var(--vice-pink) 5.5%,transparent),color-mix(in srgb,var(--vice-cyan) 2.5%,transparent) 16%,transparent 34%);
}
body[data-page="mods"] .edge-top.is-edge-active::before{
  background:
    radial-gradient(260px 120px at var(--edge-local) 0,color-mix(in srgb,var(--vice-cyan) 20%,transparent),color-mix(in srgb,var(--vice-pink) 10%,transparent) 30%,color-mix(in srgb,var(--vice-cyan) 3.8%,transparent) 56%,transparent 86%),
    linear-gradient(180deg,color-mix(in srgb,var(--vice-cyan) 5%,transparent),color-mix(in srgb,var(--vice-pink) 2.4%,transparent) 16%,transparent 34%);
}
body[data-page="mods"] .edge-bottom.is-edge-active::before{
  background:
    radial-gradient(260px 120px at var(--edge-local) 100%,color-mix(in srgb,var(--vice-pink) 20%,transparent),color-mix(in srgb,var(--vice-cyan) 10%,transparent) 30%,color-mix(in srgb,var(--vice-pink) 3.8%,transparent) 56%,transparent 86%),
    linear-gradient(0deg,color-mix(in srgb,var(--vice-pink) 5%,transparent),color-mix(in srgb,var(--vice-cyan) 2.4%,transparent) 16%,transparent 34%);
}

.liquid-glass.is-edge-active::after,
.liquid-button.is-edge-active::after,
.stat.is-edge-active::after,
.tool-card.is-edge-active::after,
.project-card.is-edge-active::after,
.release-card.is-edge-active::after,
.download-card.is-edge-active::after,
.system-card.is-edge-active::after{
  background:
    radial-gradient(158px 62px at var(--edge-x) var(--edge-y),rgba(255,10,168,1) 0 20%,rgba(0,229,255,.98) 44%,transparent 80%),
    linear-gradient(90deg,color-mix(in srgb,var(--vice-pink) 42%,transparent),transparent 12% 88%,color-mix(in srgb,var(--vice-cyan) 42%,transparent)),
    linear-gradient(180deg,rgba(255,255,255,.30),transparent 15% 84%,rgba(255,255,255,.16));
  opacity:.82;
}

.is-edge-fading::after{opacity:.22}
.is-edge-active{border-color:rgba(255,255,255,.045)}

.builder-dock{
  position:fixed;
  right:18px;
  bottom:108px;
  z-index:1001;
  width:min(380px,calc(100% - 28px));
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius:28px;
  color:var(--text);
}
.builder-dock-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.builder-dock-top h2{margin:0;font-size:16px;font-weight:800}
.builder-close{width:32px;height:32px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer;line-height:1}
.builder-close:hover{filter:brightness(1.12)}
.builder-doc{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.builder-field{display:flex;flex-direction:column;gap:6px}
.builder-field span{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.builder-field textarea{
  width:100%;
  min-height:110px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(0,0,0,.32);
  color:#fff;
  padding:12px;
  resize:vertical;
  font:inherit;
}
.builder-field textarea:focus{outline:0;border-color:rgba(0,229,255,.42);box-shadow:0 0 0 3px rgba(0,229,255,.08)}
.builder-actions{display:flex;gap:8px;flex-wrap:wrap}
.builder-actions button{
  min-height:38px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:var(--glass-bg);
  color:#fff;
  padding:0 14px;
  font:inherit;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:background .14s;
}
.builder-btn-apply{background:linear-gradient(135deg,rgba(0,229,255,.28),rgba(0,229,255,.14)) !important;border-color:rgba(0,229,255,.36) !important}
.builder-btn-publish{background:linear-gradient(135deg,rgba(255,10,168,.32),rgba(0,229,255,.20)) !important;border-color:rgba(255,10,168,.4) !important}
.builder-actions button:hover{filter:brightness(1.2)}
.builder-status{margin:0;font-size:12px;line-height:1.45;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.builder-status.st-editing{color:var(--vice-cyan)}
.builder-status.st-draft{color:rgba(255,220,100,.9)}
.builder-status.st-saving{color:var(--muted)}
.builder-status.st-saved{color:#3dffa0}
.builder-status.st-error{color:#ff6b9e}
.builder-editable{
  cursor:text;
  outline:1.5px dashed rgba(0,229,255,.62);
  outline-offset:5px;
  border-radius:8px;
  transition:outline-color .18s;
}
.builder-editable:hover{outline-color:rgba(0,229,255,.90)}
.builder-editing{
  outline:2px solid rgba(255,10,168,.88);
  outline-offset:5px;
  text-shadow:0 0 18px rgba(255,10,168,.28);
}

/* ── Module responsive ─────────────────────────────────────── */
@media(max-width:720px){
  .mod-split-narrative{grid-template-columns:1fr}
  .mod-split-narrative__text{position:static}
  .mod-bento-grid__grid{grid-template-columns:1fr}
  .mod-bento-item.is-large{grid-column:span 1}
  .mod-bento-item.is-tall{grid-row:span 1}
  .mod-stats-grid{grid-template-columns:repeat(2,1fr)}
  .mod-deepdive-features{grid-template-columns:1fr}
  .mod-deepdive-gallery{grid-template-columns:1fr}
  .mod-cinematic-hero__content h1{font-size:2.6rem}
}

/* ════════════════════════════════════════════════════════════════════════
   REBUILT MODULAR CONTENT SYSTEM
   Design tokens, page-background layers, glass cards, and the 14 section
   modules. Layered on top of the existing site; uses the liquid-glass system
   already defined above (does not replace #lg-disp).
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --section-pad:clamp(80px,10vw,140px);
  --card-radius:18px;
  --glow-pink:rgba(255,10,168,0.18);
  --glow-cyan:rgba(0,229,255,0.15);
  /* --glass-bg intentionally not overridden — canonical value kept in main :root */
  --glass-edge:rgba(255,255,255,0.10);
  --glass-edge-active:rgba(0,229,255,0.22);
  --text-primary:#f0f4ff;
  --text-secondary:rgba(200,215,255,0.68);
  --text-muted:rgba(150,170,210,0.45);
  --surface-1:rgba(14,18,34,0.92);
  --surface-2:rgba(20,26,46,0.78);
}

/* ── Page background layers ──────────────────────────────────────────── */
/* z-index: -11/-10 — behind .site-light-overlay (-9, site.css:165) so the
   global theme overlay always composites on top of a custom background
   instead of being bypassed by it. See the stacking-order note on .site-bg. */
.page-bg{position:fixed;inset:0;z-index:-11;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .4s ease}
.page-bg--default{background:transparent}
.page-bg-overlay{position:fixed;inset:0;z-index:-10;pointer-events:none;background:transparent}
.page-bg.is-animated{animation:pageBgDrift 24s ease-in-out infinite alternate}
@keyframes pageBgDrift{from{background-position:center top}to{background-position:center bottom}}
@media (prefers-reduced-motion:reduce){.page-bg.is-animated{animation:none}}

/* ── Section wrapper ─────────────────────────────────────────────────── */
.mod-section{padding:var(--section-pad) 0}
.mod-section > .mod-inner{width:min(1200px,calc(100% - 48px));margin:0 auto}

/* ── Typography ──────────────────────────────────────────────────────── */
.mod-inner h1{font-size:clamp(48px,7vw,96px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 .35em;color:var(--text-primary)}
.mod-inner h2{font-size:clamp(32px,4.5vw,60px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0 0 .4em;color:var(--text-primary)}
.mod-inner h3{font-size:clamp(20px,2.5vw,28px);font-weight:600;margin:0 0 .4em;color:var(--text-primary)}
.mod-inner p{font-size:clamp(16px,1.4vw,18px);line-height:1.65;color:var(--text-secondary);margin:0 0 1em}
.mod-inner .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vice-cyan);margin-bottom:14px}
.mod-head{margin-bottom:clamp(32px,5vw,56px)}
.mod-head.is-centered{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.mod-sub{color:var(--text-secondary);max-width:680px}
.mod-head.is-centered .mod-sub{margin-left:auto;margin-right:auto}
.mod-empty{color:var(--text-muted);font-size:15px;padding:24px 0}
.mod-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.mod-card-link{
  display:inline-block;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:var(--vice-cyan);
  text-decoration:none;
}
.mod-card-link:hover{color:var(--text-primary)}
.mod-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mod-tags span{font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-secondary)}

/* ── Glass card ──────────────────────────────────────────────────────── */
/* Border/background/isolation/sheen(::before)/edge-gradient(::after) all
   come from the shared .liquid-glass-family rule above — .glass-card used
   to duplicate just the background+border here with the wrong variable
   (--glass-edge, a bare opacity number, not a color) and no sheen at all,
   which is why these cards read as "just blurred" instead of properly
   liquid glass. Only the properties genuinely specific to this card type
   (simpler backdrop-filter for perf on grids with many cards, padding,
   radius) stay here now. */
.glass-card{border-radius:var(--card-radius);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);padding:28px;transition:border-color .3s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.glass-card:hover{border-color:var(--glass-edge-active);box-shadow:0 24px 60px -18px var(--glow-cyan),0 8px 24px -12px rgba(0,0,0,.5);transform:translateY(-4px)}
.glass-card.glow-pink:hover{box-shadow:0 24px 60px -18px var(--glow-pink),0 8px 24px -12px rgba(0,0,0,.5)}
.glass-card h3{margin-top:0}
.glass-card img,.glass-card video{display:block;width:100%;height:auto;border-radius:12px}
/* .glass-card was already part of the shared .liquid-glass-family
   --edge-x/--edge-y sheen rule above (line ~299) — it just never got real
   cursor coordinates, because bindLiquidTracking() in site.js didn't
   include it in the elements it tracks, so the sheen always sat frozen at
   the default 50%/50% center. Adding it there (done) is the actual fix;
   no new pseudo-element rule needed here, and one would only conflict
   with the existing shared ::before/::after this class already owns. */

/* ── Hero variants ───────────────────────────────────────────────────── */
.hero-editorial{max-width:960px}
.hero-editorial__sub{font-size:clamp(17px,1.8vw,21px);max-width:640px;margin-top:12px}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-split__sub{margin-top:12px}
.hero-split__media .glass-card{padding:14px}
.hero-dashboard{display:grid;gap:16px}
.hero-dash-main{padding:28px}
.hero-dash-mini{font-size:13px;font-weight:600;color:var(--text-secondary)}

/* ── Feature grid ────────────────────────────────────────────────────── */
.mod-feature-grid__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.mod-feature-grid__icon{font-size:28px;margin-bottom:14px}

/* ── Project cards ───────────────────────────────────────────────────── */
.mod-project-cards__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.mod-project-card__media{margin:-28px -28px 18px;border-radius:var(--card-radius) var(--card-radius) 0 0;overflow:hidden}
.mod-project-card__media img,.mod-project-card__media video{border-radius:0}

/* ── Showcase ────────────────────────────────────────────────────────── */
.mod-showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.mod-showcase.is-media-left .mod-showcase__media{order:-1}
.mod-showcase__media .glass-card{padding:14px}
.section-showcase > .mod-inner{
  padding-top:0;
  padding-bottom:clamp(118px,10vw,156px);
}
.section-showcase .mod-head{margin-bottom:clamp(24px,3.2vw,36px)}
@media (min-width:769px){
  .section-showcase > .mod-inner{transform:translateY(-34px)}
}
.mod-showcase-board{
  width:min(100%,1180px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:240px;
  gap:18px;
  align-items:stretch;
}
.mod-showcase-card{
  position:relative;
  grid-column:span 3;
  min-height:0;
  height:100%;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  isolation:isolate;
}
.mod-showcase-card.is-primary{
  grid-column:span 6;
  grid-row:span 2;
  min-height:0;
}
.mod-showcase-card__media{
  position:relative;
  display:block;
  height:122px;
  flex:0 0 122px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(123,226,255,.18));
}
.mod-showcase-card:not(.is-primary){
  flex-direction:row;
}
.mod-showcase-card:not(.is-primary) .mod-showcase-card__media{
  width:auto;
  height:auto;
  flex:0 0 42%;
  min-width:118px;
}
.mod-showcase-card.is-primary .mod-showcase-card__media{
  position:absolute;
  inset:0;
  height:auto;
  flex:unset;
  z-index:-1;
}
.mod-showcase-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,255,255,0) 34%,rgba(3,13,28,.14) 100%),
    linear-gradient(135deg,rgba(255,47,168,.14),rgba(0,229,255,.08));
  mix-blend-mode:multiply;
}
.mod-showcase-card.is-primary .mod-showcase-card__media::after{
  background:linear-gradient(to bottom,rgba(2,10,22,.06) 18%,rgba(2,10,22,.24) 48%,rgba(2,10,22,.82) 100%);
  mix-blend-mode:normal;
}
.mod-showcase-card__media img,
.mod-showcase-card__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.012);
  transition:transform .65s var(--ease-glass,ease),filter .65s var(--ease-glass,ease);
}
.mod-showcase-card:hover .mod-showcase-card__media img,
.mod-showcase-card:hover .mod-showcase-card__media video{transform:scale(1.045);filter:saturate(1.05) contrast(1.03)}
.mod-showcase-card__body{
  position:relative;
  flex:1;
  min-width:0;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:9px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.74),rgba(238,251,255,.54)),
    rgba(255,255,255,.34);
}
.mod-showcase-card.is-primary .mod-showcase-card__body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin-top:auto;
  min-height:170px;
  justify-content:flex-end;
  padding:28px;
  color:#fff;
  background:linear-gradient(to bottom,rgba(2,10,22,0),rgba(2,10,22,.78));
}
.mod-showcase-card .download-label{
  width:max-content;
  max-width:100%;
  margin-bottom:2px;
  padding:7px 10px;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--vice-cyan);
  border-color:rgba(0,215,255,.34);
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(239,252,255,.58)),
    rgba(255,255,255,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 0 16px rgba(0,215,255,.12);
}
.mod-showcase-card h3{
  margin:0;
  font-size:clamp(24px,2vw,34px);
  line-height:1.02;
  letter-spacing:0;
  color:var(--ink);
}
.mod-showcase-card:not(.is-primary) h3{font-size:23px}
.mod-showcase-card.is-primary h3,
.chapter[data-theme="light"] .mod-showcase-card.is-primary h3{
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.42);
}
.mod-showcase-card p{
  margin:0;
  max-width:34ch;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mod-showcase-card.is-primary p,
.chapter[data-theme="light"] .mod-showcase-card.is-primary p{color:rgba(246,251,255,.82)}
.mod-showcase-card .mod-card-link{
  margin-top:auto;
  color:var(--vice-cyan);
}
.mod-showcase-card .mod-card-link:hover{
  color:#05172c;
  text-shadow:none;
}
.mod-showcase-card.is-primary .mod-card-link{
  color:var(--vice-cyan);
  text-shadow:
    0 1px 1px rgba(0,0,0,.58),
    0 0 16px rgba(0,229,255,.42);
}

/* ── Company map ─────────────────────────────────────────────────────── */
.section-company-map > .mod-inner{
  padding-top:clamp(96px,9vw,138px);
  padding-bottom:clamp(112px,10vw,156px);
}
.mod-company-map{
  width:min(100%,1180px);
  margin:0 auto;
}
.mod-company-map__intro{
  max-width:880px;
  margin-bottom:clamp(28px,4vw,48px);
}
.mod-company-map__intro h2{
  max-width:760px;
  font-size:clamp(42px,6vw,82px);
  line-height:.98;
  font-weight:850;
  letter-spacing:0;
}
.mod-company-map__intro p{
  max-width:760px;
}
.mod-company-map__summary{
  color:color-mix(in srgb,var(--muted) 82%,var(--ink));
}
.mod-company-map__body{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(22px,4vw,48px);
  align-items:stretch;
}
.mod-company-map__visual{
  position:relative;
  min-height:clamp(470px,44vw,620px);
  overflow:hidden;
  border-radius:24px;
  border:1px solid color-mix(in srgb,var(--vice-cyan) 28%,rgba(255,255,255,.64));
  background:
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(232,250,255,.35)),
    rgba(255,255,255,.34);
  box-shadow:
    0 30px 80px -40px rgba(5,18,34,.62),
    0 0 0 1px rgba(255,255,255,.42) inset;
  isolation:isolate;
}
.mod-company-map__visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,255,255,0) 34%,rgba(1,10,23,.56) 100%),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,215,255,.10));
  z-index:1;
}
.mod-company-map__media,
.mod-company-map__media img,
.mod-company-map__media video{
  width:100%;
  height:100%;
}
.mod-company-map__media{
  position:absolute;
  inset:0;
}
.mod-company-map__media img,
.mod-company-map__media video{
  display:block;
  object-fit:cover;
  transform:scale(1.01);
}
.mod-company-map__stats{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.mod-company-map__stat{
  min-height:82px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.44);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(230,248,255,.42));
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 14px 30px rgba(4,18,34,.22);
}
.mod-company-map__stat strong{
  display:block;
  font-size:clamp(20px,2.2vw,30px);
  line-height:1;
  color:var(--ink);
}
.mod-company-map__stat span{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.mod-company-map__items{
  display:grid;
  gap:14px;
}
.mod-company-map-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:16px;
  min-height:132px;
  padding:20px;
  align-items:flex-start;
}
.mod-company-map-card__index{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:14px;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(221,248,255,.52));
  border:1px solid color-mix(in srgb,var(--vice-cyan) 28%,rgba(255,255,255,.72));
  box-shadow:0 12px 22px -16px rgba(5,18,34,.5);
}
.mod-company-map-card__body{
  min-width:0;
}
.mod-company-map-card__body .download-label{
  color:var(--vice-cyan);
  border-color:rgba(0,215,255,.34);
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(239,252,255,.6)),
    rgba(255,255,255,.5);
}
.mod-company-map-card__title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.mod-company-map-card h3{
  margin:0;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.02;
  letter-spacing:0;
  color:var(--ink);
}
.mod-company-map-card p{
  margin:10px 0 0;
  max-width:48ch;
  font-size:15px;
  line-height:1.52;
  color:var(--muted);
}
.mod-company-map-card__status{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 72%,var(--vice-cyan));
  background:rgba(255,255,255,.58);
  border:1px solid rgba(0,215,255,.20);
}
.mod-company-map-card.is-pink .mod-company-map-card__index,
.mod-company-map-card.is-pink .mod-company-map-card__status{
  border-color:color-mix(in srgb,var(--vice-pink) 36%,rgba(255,255,255,.7));
}
.mod-company-map-card.is-blue .mod-company-map-card__index,
.mod-company-map-card.is-blue .mod-company-map-card__status{
  border-color:rgba(74,140,255,.32);
}

/* ── Stats ───────────────────────────────────────────────────────────── */
.mod-stats__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.mod-stat-pill{text-align:center;position:relative}
.mod-stat-pill .stat-num{display:block;font-size:clamp(42px,6vw,68px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,var(--vice-pink),var(--vice-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--vice-cyan) 20%,transparent))}
.mod-stat-pill span{font-size:14px;color:var(--text-secondary)}
.mod-stat-pill::before{content:'';display:block;width:34px;height:2px;margin:0 auto 14px;border-radius:2px;background:linear-gradient(90deg,var(--vice-pink),var(--vice-cyan))}

/* ── Timeline ────────────────────────────────────────────────────────── */
.mod-timeline{position:relative;display:grid;gap:24px;padding-left:28px}
.mod-timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--vice-cyan),var(--vice-pink));opacity:.4}
.mod-timeline::after{
  content:'';position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--vice-cyan);
  box-shadow:0 0 14px 4px color-mix(in srgb,var(--vice-cyan) 55%,transparent);
  animation:timelineTravel 7s ease-in-out infinite;
}
@keyframes timelineTravel{
  0%{top:6px;opacity:0;background:var(--vice-cyan)}
  8%{opacity:1}
  50%{background:var(--vice-pink);box-shadow:0 0 14px 4px color-mix(in srgb,var(--vice-pink) 55%,transparent)}
  92%{opacity:1}
  100%{top:calc(100% - 14px);opacity:0;background:var(--vice-pink)}
}
.mod-timeline-item{position:relative}
.mod-timeline-item__dot{position:absolute;left:-28px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--vice-cyan);box-shadow:0 0 0 4px rgba(0,229,255,.18)}
.mod-timeline-item__date{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}

/* ── Downloads ───────────────────────────────────────────────────────── */
.mod-downloads__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}

/* ── Changelog ───────────────────────────────────────────────────────── */
/* Grid, not a single fixed-width column — a stack of cards with wildly
   different content lengths (a one-line entry next to a 6-bullet one)
   reads as misaligned, and a hard max-width:820px column wasted the rest
   of the width on anything wider than a laptop. Each card now shows a
   short preview + "Read more" (openContentModal, site.js) instead of its
   full content, so cards land at a consistent height regardless of how
   much any one entry actually has to say. */
.mod-changelog{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.mod-changelog-entry{min-height:280px;display:flex;flex-direction:column}
.mod-changelog-entry__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mod-changelog-entry__date{font-size:13px;color:var(--text-muted)}
.mod-changelog-entry p{
  margin-top:12px;
  color:var(--text-secondary);
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mod-changelog-entry .mod-tags{margin-top:14px}
.mod-changelog-entry .release-actions{margin-top:auto;padding-top:20px}

/* ── Generic "Show more" collapse/expand ─────────────────────────────────
   Shared by any section using collapsibleMoreButton() (site.js) — items
   past the initial visible count carry .section-extra-item and start
   hidden; clicking the button toggles .is-expanded on the item container.
   A dedicated class rather than an attribute-selector suffix match, since
   the reveal-on-scroll observer (site.js) appends 'visible'/'revealed' to
   these same elements' classList — a suffix match would stop matching the
   moment that happened. */
.section-extra-item{display:none}
.is-expanded .section-extra-item{display:block;animation:modShowMoreIn .4s var(--ease-glass,ease) both}
@keyframes modShowMoreIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mod-show-more{margin-top:18px;min-height:44px;padding:0 22px;font-size:13px}

/* ── Accordion / FAQ ──────────────────────────────────────────────────────
   Real per-item collapse via the grid-template-rows 0fr→1fr trick — no JS
   height measurement needed, and it animates smoothly regardless of how
   much text is in the answer. */
.mod-accordion{
  display:grid;
  gap:14px;
  width:min(100%,920px);
}
.mod-head.is-centered + .mod-accordion{
  margin-left:auto;
  margin-right:auto;
}
.mod-accordion-item{
  position:relative;
  padding:0;
  overflow:hidden;
  border-radius:20px;
}
.mod-accordion-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(to bottom,var(--vice-cyan),color-mix(in srgb,var(--vice-pink) 62%,var(--vice-cyan)));
  opacity:.58;
  transform:scaleY(.42);
  transform-origin:50% 50%;
  transition:transform .32s var(--ease-glass,ease),opacity .32s ease;
}
.mod-accordion-item.is-open::before,
.mod-accordion-item:hover::before{
  opacity:.9;
  transform:scaleY(1);
}
.mod-accordion-trigger{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:74px;
  padding:16px 18px 16px 24px;
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
  font:inherit;
  color:var(--text-primary);
}
.mod-accordion-index{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--vice-cyan);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(232,250,255,.46));
  border:1px solid rgba(0,215,255,.26);
}
.mod-accordion-question{
  min-width:0;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:0;
  color:var(--text-primary);
}
.mod-accordion-chevron{
  position:relative;
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(0,215,255,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(229,249,255,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 12px 24px -18px rgba(4,18,34,.5);
  transition:transform .32s var(--ease-glass,ease),border-color .32s ease,background .32s ease;
}
.mod-accordion-chevron::before,
.mod-accordion-chevron::after{
  content:"";
  position:absolute;
  width:12px;
  height:2px;
  border-radius:999px;
  background:var(--vice-cyan);
  transition:transform .32s var(--ease-glass,ease);
}
.mod-accordion-chevron::after{transform:rotate(90deg)}
.mod-accordion-item.is-open .mod-accordion-chevron{
  transform:rotate(180deg);
  border-color:rgba(255,47,168,.24);
}
.mod-accordion-item.is-open .mod-accordion-chevron::after{transform:rotate(0deg)}
.mod-accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-glass,ease)}
.mod-accordion-item.is-open .mod-accordion-panel{grid-template-rows:1fr}
.mod-accordion-panel__inner{overflow:hidden}
.mod-accordion-panel__inner > *{
  padding:0 76px 24px 74px;
  margin:0;
  color:var(--text-secondary);
  line-height:1.65;
}
.mod-accordion-panel__inner ul{padding-left:24px;list-style:disc}
.mod-accordion-panel__inner ul li{margin-bottom:6px}

/* ── Logo cloud ───────────────────────────────────────────────────────── */
.mod-logo-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,5vw,56px);padding:8px 0}
.mod-logo-cloud__item{display:flex;align-items:center;justify-content:center;min-height:40px;color:var(--text-secondary);font-weight:700;font-size:15px;letter-spacing:.02em;opacity:.6;filter:grayscale(1);transition:opacity .28s ease,filter .28s ease,transform .28s ease}
.mod-logo-cloud__item:hover{opacity:1;filter:grayscale(0);transform:translateY(-2px)}
.mod-logo-cloud__item img{max-height:34px;max-width:140px;width:auto;object-fit:contain}

/* ── Video embed ──────────────────────────────────────────────────────── */
.mod-video-embed{padding:14px;max-width:920px}
.mod-video-embed__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:calc(var(--card-radius,18px) - 6px);overflow:hidden}
.mod-video-embed__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mod-video-embed video{display:block;width:100%;border-radius:calc(var(--card-radius,18px) - 6px);background:#000}
.mod-video-embed__caption{margin:12px 4px 2px;font-size:13px;color:var(--text-muted)}

/* ── CTA panel ───────────────────────────────────────────────────────── */
.mod-cta-panel{text-align:center;padding:clamp(40px,6vw,72px);max-width:880px;margin:0 auto}
.mod-cta-panel .mod-actions{justify-content:center}
.mod-cta-panel.glow-pink{box-shadow:0 24px 64px -24px var(--glow-pink)}
.mod-cta-panel.glow-cyan{box-shadow:0 24px 64px -24px var(--glow-cyan)}

/* ── Bento ───────────────────────────────────────────────────────────── */
.mod-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento-card{border-radius:var(--card-radius);display:flex;flex-direction:column;justify-content:flex-end}
.bento-card__media{margin:-28px -28px 16px;border-radius:var(--card-radius) var(--card-radius) 0 0;overflow:hidden}
.bento-card__media img,.bento-card__media video{border-radius:0}
.bento-1x1{grid-column:span 3}
.bento-2x1{grid-column:span 6}
.bento-3x1{grid-column:span 9}
.bento-full{grid-column:span 12}
.bento-1x2{grid-column:span 3;grid-row:span 2}

/* ── Quote ───────────────────────────────────────────────────────────── */
.mod-quote{max-width:880px;margin:0 auto;text-align:center}
.mod-quote blockquote{font-size:clamp(24px,3.5vw,40px);font-weight:600;line-height:1.35;letter-spacing:-.02em;color:var(--text-primary);margin:0}
.mod-quote figcaption{margin-top:24px;font-size:15px;color:var(--text-secondary);display:flex;flex-direction:column;gap:2px}
.mod-quote figcaption span{font-size:13px;color:var(--text-muted)}

/* ── Gallery ─────────────────────────────────────────────────────────── */
.mod-gallery__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mod-gallery__item{padding:10px}
.mod-gallery__item figcaption{margin-top:10px;font-size:13px;color:var(--text-muted);text-align:center}

/* ── Table ───────────────────────────────────────────────────────────── */
.mod-table{padding:0;overflow:hidden}
.mod-table table{width:100%;border-collapse:collapse}
.mod-table th,.mod-table td{padding:14px 18px;text-align:left;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07)}
.mod-table th{font-weight:700;color:var(--text-primary);background:rgba(255,255,255,.04)}
.mod-table td{color:var(--text-secondary)}
.mod-table tr:last-child td{border-bottom:none}

/* ── Spotlight ───────────────────────────────────────────────────────── */
.mod-spotlight{position:relative;text-align:center}
.mod-spotlight__bg{position:absolute;inset:-10% -5%;z-index:0;background:radial-gradient(circle at 30% 30%,var(--glow-pink),transparent 45%),radial-gradient(circle at 70% 70%,var(--glow-cyan),transparent 45%);filter:blur(40px);pointer-events:none}
.mod-spotlight .mod-head,.mod-spotlight__cards{position:relative;z-index:1}
.mod-spotlight__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.mod-spotlight-card__icon{font-size:30px;margin-bottom:12px}

/* ── Org chart (corporate structure diagram, custom-html section) ────── */
.pajic-orgchart{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 4px 4px}
.pajic-orgchart__row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}
.pajic-orgchart__connector{width:2px;height:28px;background:linear-gradient(var(--glass-border),var(--glass-border));position:relative}
.pajic-orgchart__connector::after{content:'';position:absolute;left:50%;bottom:0;width:8px;height:8px;border-radius:50%;background:var(--text-muted);transform:translate(-50%,50%)}
.pajic-orgchart__connector::before{
  content:'';position:absolute;left:50%;top:0;width:6px;height:6px;border-radius:50%;
  background:var(--vice-cyan);transform:translate(-50%,-50%);
  box-shadow:0 0 10px 3px color-mix(in srgb,var(--vice-cyan) 55%,transparent);
  animation:orgConnectorPulse 3.2s ease-in-out infinite;
}
@keyframes orgConnectorPulse{
  0%{top:0;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{top:100%;opacity:0}
}
.pajic-orgchart__node{
  flex:1 1 200px;max-width:260px;padding:16px 20px;border-radius:calc(var(--card-radius,18px) - 4px);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  display:flex;flex-direction:column;gap:4px;text-align:center;align-items:center;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.pajic-orgchart__node:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--vice-cyan) 40%,var(--glass-border));box-shadow:0 16px 40px -20px var(--glow-cyan)}
.pajic-orgchart__node strong{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.pajic-orgchart__node span{font-size:12.5px;color:var(--text-muted);line-height:1.4}
.pajic-orgchart__node--root{max-width:320px;padding:20px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--vice-pink) 14%,transparent),color-mix(in srgb,var(--vice-cyan) 14%,transparent)),var(--glass-bg);border-color:color-mix(in srgb,var(--vice-pink) 30%,var(--glass-border))}
.pajic-orgchart__node--root strong{font-size:18px}
.pajic-orgchart__node--root:hover{box-shadow:0 20px 50px -20px var(--glow-pink)}
.pajic-orgchart__node--small{flex-basis:160px;padding:12px 16px}
.pajic-orgchart__node--small strong{font-size:13.5px}
.pajic-orgchart__node--future{border-style:dashed;border-color:color-mix(in srgb,var(--vice-pink) 35%,var(--glass-border));opacity:.88}
.pajic-orgchart__node--future span::before{content:'Planned · ';color:color-mix(in srgb,var(--vice-pink) 70%,var(--text-muted));font-weight:600}
@media(max-width:680px){
  .pajic-orgchart__row{gap:10px}
  .pajic-orgchart__node{flex-basis:100%;max-width:340px}
}

/* Section field: quiet survey lines and a horizon band for short builder
   sections. This replaces the older decorative blobs with a calmer,
   more site-appropriate coastal/infrastructure texture. */
.mod-orb-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  opacity:.72;
  --field-line:rgba(6,24,46,.105);
  --field-line-soft:rgba(6,24,46,.052);
  --field-accent:rgba(0,178,216,.16);
}
.chapter[data-theme="dark"] .mod-orb-field{
  --field-line:rgba(180,232,255,.13);
  --field-line-soft:rgba(180,232,255,.06);
  --field-accent:rgba(0,229,255,.13);
  opacity:.48;
}
.mod-orb-field::before{
  content:"";
  position:absolute;
  inset:9% max(5vw,64px) 10%;
  background:
    linear-gradient(90deg,transparent 0 12%,var(--field-line) 12.1% 12.35%,transparent 12.5% 100%),
    repeating-linear-gradient(0deg,transparent 0 72px,var(--field-line-soft) 73px 74px),
    repeating-linear-gradient(90deg,transparent 0 112px,var(--field-line-soft) 113px 114px);
  transform:skewY(-3deg);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 78%,transparent 100%);
}
.mod-orb-field::after{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  bottom:9%;
  height:34%;
  background:
    linear-gradient(118deg,transparent 0 18%,var(--field-accent) 18.15% 18.45%,transparent 18.6% 100%),
    linear-gradient(118deg,transparent 0 64%,rgba(255,255,255,.28) 64.1% 64.24%,transparent 64.4% 100%),
    linear-gradient(to bottom,transparent,rgba(255,255,255,.11) 55%,transparent);
  opacity:.72;
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
}
.mod-orb-field__blob{display:none}
.mod-orb-field__ring{
  position:absolute;
  right:7%;
  top:14%;
  width:min(46vw,560px);
  height:min(30vw,340px);
  border:0;
  border-radius:0;
  background:
    repeating-linear-gradient(112deg,transparent 0 38px,var(--field-line) 39px 40px),
    linear-gradient(180deg,transparent,var(--field-accent),transparent);
  transform:rotate(-7deg);
  opacity:.44;
  mask-image:linear-gradient(115deg,transparent 0%,#000 26%,#000 60%,transparent 82%);
  -webkit-mask-image:linear-gradient(115deg,transparent 0%,#000 26%,#000 60%,transparent 82%);
}
.mod-orb-field__ring::before{
  content:"";
  position:absolute;
  left:6%;
  right:16%;
  top:48%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--field-line),transparent);
}
@media(max-width:1199px){
  .mod-orb-field{opacity:.45}
  .mod-orb-field__ring{opacity:.28}
}
@media(max-width:680px){.mod-orb-field{opacity:.28}}

.mod-orb-field--centered{opacity:.58}
.mod-orb-field--centered .mod-orb-field__ring{
  left:50%;
  right:auto;
  top:12%;
  transform:translateX(-50%) rotate(-7deg);
}

/* Hero (and photo-less cinematic-hero) text stays clear of the orb field
   on desktop instead of relying on h1/.hero-text's own max-widths, which
   vary per-page and can reach far enough right to collide with it. */
@media(min-width:1200px){
  .chapter.section-hero .hero-copy{max-width:600px}
  /* cinematic-hero only gets the orb field (and needs the same clearance)
     when it has no photo — .mod-orb-field is only rendered as this div's
     immediately-preceding sibling in that case, so gate on that instead
     of the section type, which is true whether a photo is set or not. */
  .mod-orb-field + .section .mod-cinematic-hero__content{max-width:600px}
}

/* ── Badge — small floating glass pill (icon + label), the stat/status
   callout pattern from every reference (Liquibase's feature pills,
   Sapforce's "2M+"). Standalone chip; positioning is per-context via
   modifier classes below. ─────────────────────────────────────────────── */
.mod-badge{
  position:absolute;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 12px;
  border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text-primary,#fff);
  white-space:nowrap;
  animation:floatCard 6s ease-in-out infinite;
  z-index:1;
}
.mod-badge__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:12px;line-height:1;
  background:color-mix(in srgb,var(--vice-cyan) 22%,transparent);
  color:var(--vice-cyan);
}
.mod-badge--pink .mod-badge__icon{background:color-mix(in srgb,var(--vice-pink) 22%,transparent);color:var(--vice-pink)}
.mod-badge--1{top:10%;right:30%;animation-delay:-1.2s}
.mod-badge--2{top:46%;right:6%;animation-delay:-3.4s}
.mod-badge--3{top:74%;right:34%;animation-delay:-.6s}
@media(max-width:1199px){.mod-badge{position:static;animation:none;margin:4px 6px 0 0}}

/* ── Grid texture — per-section fine engineering grid, distinct from the
   sitewide fixed .grid layer: this one is scoped to a single section
   (e.g. systems/infrastructure-flavored content) rather than the whole
   viewport. ────────────────────────────────────────────────────────────── */
.mod-grid-texture{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--vice-cyan) 10%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--vice-cyan) 10%,transparent) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 0%,transparent 75%);
}

/* ── Reveal stagger support ──────────────────────────────────────────── */
.reveal[data-reveal-delay]{transition-delay:var(--reveal-delay,0ms)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .corp-mark-orbit{animation:none!important}
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .topbar .site-switcher,
  .topbar .nav-search-button{
    display:none;
  }
  .section-corporate-hero > .mod-inner,
  .section-corporate-pillars > .mod-inner,
  .section-corporate-divisions > .mod-inner,
  .section-portfolio-editorial > .mod-inner,
  .section-assets-feature > .mod-inner,
  .section-group-structure > .mod-inner,
  .section-activity-strip > .mod-inner,
  .section-corporate-cta > .mod-inner{
    padding-top:82px;
    padding-bottom:96px;
  }
  .corp-hero,
  .corp-intro,
  .corp-assets-feature{
    min-height:auto;
    grid-template-columns:1fr;
    gap:22px;
  }
  .corp-hero__copy h1{
    font-size:clamp(42px,14vw,62px);
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .corp-hero__copy{
    min-width:0;
    padding-bottom:calc(var(--dock-fab-size) + max(18px, env(safe-area-inset-bottom)) + 40px);
  }
  .corp-hero__lead{
    font-size:18px;
    line-height:1.5;
  }
  .corp-hero__visual{
    min-height:270px;
    order:-1;
  }
  .corp-miami-card{
    width:min(100%,330px);
    min-height:280px;
    border-radius:26px;
  }
  .corp-miami-card__lanes{
    grid-template-columns:repeat(2,1fr);
  }
  .corp-miami-card__lanes span{
    min-height:38px;
  }
  .corp-hero__coordinates{
    right:0;
    bottom:0;
    min-width:190px;
  }
  .corp-hero .hero-actions{
    gap:10px;
  }
  .corp-hero .hero-actions .liquid-button{
    min-width:0;
    flex:1 1 0;
    padding-inline:14px;
  }
  .corp-intro__head h2,
  .corp-section-head h2,
  .corp-assets-feature h2,
  .corp-cta h2{
    font-size:clamp(38px,12vw,56px);
  }
  .corp-division{
    grid-template-columns:1fr;
    min-height:auto;
    gap:14px;
    padding:28px 0;
  }
  .corp-division h3{
    font-size:clamp(34px,11vw,50px);
  }
  .corp-portfolio__grid{
    grid-template-columns:1fr;
  }
  .corp-portfolio-item,
  .corp-portfolio-item:first-child{
    min-height:300px;
    grid-row:auto;
    padding:28px;
  }
  .corp-assets-feature__list div{
    min-height:66px;
  }
  .corp-structure-map{
    padding:22px;
  }
  .corp-node--root{
    margin-bottom:24px;
  }
  .corp-structure-map__branches{
    display:none;
  }
  .corp-structure-map__nodes{
    grid-template-columns:1fr;
  }
  .corp-node{
    text-align:left;
    min-height:82px;
  }
  .corp-activity-item{
    grid-template-columns:1fr;
    gap:10px;
    padding:24px 0;
  }
  .section-proof-grid .proof-grid{
    display:grid;
    grid-template-columns:1fr;
    overflow-x:visible;
    scroll-snap-type:none;
    width:100%;
  }
  .section-proof-grid .proof-grid > *{
    min-width:0;
    width:100%;
    scroll-snap-align:unset;
  }
  .project-grid,
  .proof-grid{
    grid-template-columns:1fr;
    overflow-x:visible;
    width:100%;
  }
  .project-grid > *,
  .proof-grid > *{
    min-width:0;
    width:100%;
    scroll-snap-align:unset;
  }
  .corporate-footer{
    width:min(calc(100% - 24px),1180px);
    grid-template-columns:1fr;
    gap:24px;
    padding:26px;
    margin-bottom:108px;
  }
  .corporate-footer__nav{
    grid-template-columns:1fr;
  }
  .corporate-footer .footer-text{
    align-items:flex-start;
    text-align:left;
  }
  .hero-split,.mod-showcase,.mod-company-map__body{grid-template-columns:1fr}
  .mod-showcase.is-media-left .mod-showcase__media{order:0}
  .mod-company-map__visual{min-height:440px}
  .mod-company-map__stats{
    grid-template-columns:1fr;
    left:14px;
    right:14px;
    bottom:14px;
  }
  .mod-company-map__stat{min-height:auto}
  .mod-company-map-card{
    grid-template-columns:34px minmax(0,1fr);
    padding:18px;
  }
  .mod-company-map-card__index{
    width:34px;
    height:34px;
    border-radius:12px;
  }
  .mod-company-map-card__title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .mod-accordion{gap:12px}
  .mod-accordion-trigger{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:12px;
    min-height:68px;
    padding:14px 14px 14px 18px;
  }
  .mod-accordion-index{
    width:30px;
    height:30px;
    border-radius:10px;
    font-size:10px;
  }
  .mod-accordion-question{
    font-size:15px;
  }
  .mod-accordion-chevron{
    width:34px;
    height:34px;
  }
  .mod-accordion-panel__inner > *{
    padding:0 18px 20px 60px;
  }
  .mod-showcase-board{
    display:flex;
    grid-template-columns:unset;
    grid-auto-rows:unset;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    gap:14px;
    margin:0 -24px;
    padding:4px 24px 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .mod-showcase-board::-webkit-scrollbar{display:none}
  .mod-showcase-card,
  .mod-showcase-card.is-primary{
    grid-column:auto;
    grid-row:auto;
    flex-direction:column;
    flex:0 0 82%;
    max-width:360px;
    min-height:380px;
    scroll-snap-align:start;
  }
  .mod-showcase-card__media,
  .mod-showcase-card.is-primary .mod-showcase-card__media{
    position:relative;
    inset:auto;
    height:190px;
    flex:0 0 190px;
    width:auto;
    min-width:0;
    z-index:auto;
  }
  .mod-showcase-card.is-primary .mod-showcase-card__media::after{
    background:
      linear-gradient(to bottom,rgba(255,255,255,0) 34%,rgba(3,13,28,.14) 100%),
      linear-gradient(135deg,rgba(255,47,168,.14),rgba(0,229,255,.08));
    mix-blend-mode:multiply;
  }
  .mod-showcase-card.is-primary .mod-showcase-card__body{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    min-height:0;
    padding:20px 20px 18px;
    color:var(--ink);
    background:
      linear-gradient(135deg,rgba(255,255,255,.74),rgba(238,251,255,.54)),
      rgba(255,255,255,.34);
  }
  .mod-showcase-card.is-primary h3,
  .chapter[data-theme="light"] .mod-showcase-card.is-primary h3{color:var(--ink);text-shadow:none}
  .mod-showcase-card.is-primary p,
  .chapter[data-theme="light"] .mod-showcase-card.is-primary p{color:var(--muted)}
  .mod-bento{grid-template-columns:1fr;gap:14px}
  .bento-1x1,.bento-2x1,.bento-3x1,.bento-full,.bento-1x2{grid-column:span 1;grid-row:auto}
  .mod-section{padding:clamp(56px,12vw,88px) 0}
  .mod-inner h1{font-size:clamp(38px,11vw,56px)}
  /* Modest, safe-area-aware top clearance for non-hero chapters — with
     .chapter sized to its own content (min-height:auto) rather than a
     forced full screen, justify-content:safe center (site.css:~900) no
     longer has meaningful extra space to center within, so this is just
     fixed breathing room, not a counter to any centering effect. */
  .chapter:not(.hero){
    padding-top:max(32px, calc(env(safe-area-inset-top) + 16px));
  }
  /* Horizontal swipe-through carousel instead of a stacked column — lets a
     multi-card section stay short (one card-row tall) rather than growing
     with the number of cards, and matches how a reels/stories feed handles
     "more than one thing to look at" within a single screen: swipe
     sideways through the set, not down through an ever-taller stack.
     scroll-padding-left/negative-margin-then-repadding lets cards bleed to
     the screen edges while still peeking the next card, and the small
     left inset (rather than a flush 0) keeps the drag start away from
     iOS's edge-swipe-back gesture zone. */
  .mod-feature-grid__grid,.mod-project-cards__grid,.mod-downloads__grid,.mod-stats__row,.mod-gallery__grid,.mod-spotlight__cards{
    display:flex;
    grid-template-columns:unset;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    gap:14px;
    margin:0 -24px;
    padding:4px 24px 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Without this, a touch drag that isn't perfectly horizontal moves the
       card row AND the page vertically at once — pan-x restricts this
       element to horizontal panning only; the page still scrolls normally
       from a drag outside it. */
    touch-action:pan-x;
  }
  .mod-feature-grid__grid::-webkit-scrollbar,.mod-project-cards__grid::-webkit-scrollbar,.mod-downloads__grid::-webkit-scrollbar,.mod-stats__row::-webkit-scrollbar,.mod-gallery__grid::-webkit-scrollbar,.mod-spotlight__cards::-webkit-scrollbar{display:none}
  .mod-feature-grid__grid > *,.mod-project-cards__grid > *,.mod-downloads__grid > *,.mod-gallery__grid > *,.mod-spotlight__cards > *{
    scroll-snap-align:start;
    flex:0 0 82%;
    max-width:340px;
  }
  .mod-stats__row > *{
    scroll-snap-align:start;
    flex:0 0 42%;
    max-width:200px;
  }
}

@media(max-width:680px){
  .project-grid,
  .proof-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    overflow-x:visible !important;
    scroll-snap-type:none !important;
    margin-inline:0 !important;
    padding-inline:0 !important;
    width:100% !important;
    touch-action:auto !important;
  }
  .project-grid > *,
  .proof-grid > *{
    flex:initial !important;
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
    scroll-snap-align:unset !important;
  }
}

/* Final corporate readability pass: these sit at the end intentionally so
   older hero/card/mobile rules cannot reintroduce low contrast or clipping. */
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-hero{
  padding-top:max(104px, calc(env(safe-area-inset-top) + 86px));
}
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-hero .corp-hero{
  min-height:auto;
  align-items:start;
  padding-block:clamp(74px,8vh,118px) clamp(96px,10vh,140px);
}
body.corporate-light-shell:not([data-page="mods"]) .corp-hero__copy h1,
body.corporate-light-shell:not([data-page="mods"]) .corp-intro__head h2,
body.corporate-light-shell:not([data-page="mods"]) .corp-section-head h2,
body.corporate-light-shell:not([data-page="mods"]) .corp-assets-feature h2,
body.corporate-light-shell:not([data-page="mods"]) .corp-cta h2{
  color:#071426 !important;
  background:none !important;
  -webkit-text-fill-color:#071426 !important;
  text-shadow:none !important;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-hero__copy h1{
  max-width:820px;
  font-size:clamp(50px,5.4vw,78px);
  line-height:1.02;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-hero__lead{
  color:rgba(7,20,38,.72) !important;
  font-weight:520;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-label{
  color:#006f86 !important;
  text-shadow:none !important;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card{
  width:min(100%,520px);
  min-height:430px;
  overflow:visible;
  overflow:hidden;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card__brand{
  bottom:118px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card__brand strong{
  font-size:clamp(42px,5.2vw,68px);
  line-height:.92;
  letter-spacing:0;
  white-space:normal;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card__lanes{
  grid-template-columns:repeat(2,minmax(0,1fr));
  bottom:30px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card__lanes span{
  min-width:0;
  padding-inline:10px;
  color:#fff;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-hero__coordinates{
  right:18px;
  bottom:16px;
  max-width:210px;
}

@media(max-width:768px){
  body.corporate-light-shell:not([data-page="mods"]) .section-corporate-hero{
    padding-top:72px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .section-corporate-hero .corp-hero{
    padding-block:28px 106px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-hero__copy{
    padding-bottom:0;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-hero__copy h1{
    font-size:clamp(38px,11vw,54px);
    overflow-wrap:normal;
    word-break:normal;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-hero__visual{
    order:0;
    min-height:auto;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card{
    width:min(100%,320px);
    min-height:300px;
    border-radius:24px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card__brand{
    left:24px;
    right:24px;
    bottom:96px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-miami-card__brand strong{
    font-size:38px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-hero__coordinates{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:-18px;
    justify-self:end;
  }
}

@media(max-width:680px){
  .project-grid,
  .proof-grid,
  .gallery-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow-x:visible!important;
    scroll-snap-type:none!important;
    margin-inline:0!important;
    padding-inline:0!important;
    width:100%!important;
  }
  .project-card,
  .proof-card,
  .gallery-card{
    width:100%!important;
    min-width:0!important;
    scroll-snap-align:none!important;
  }
  .aurora{
    max-width:100vw;
    overflow:hidden;
  }
}

/* Premium corporate generation: cinematic first, tactile modules second.
   These final rules intentionally override older soft/glow experiments. */
body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter{
  background:#eef8fc;
}
body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 28%,rgba(255,255,255,.18) 58%,rgba(255,255,255,0) 100%),
    radial-gradient(circle at 88% 82%,rgba(0,229,255,.14),transparent 34%),
    radial-gradient(circle at 8% 8%,rgba(255,10,138,.08),transparent 30%);
}
body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__content{
  max-width:760px!important;
  padding-bottom:clamp(70px,10vh,120px)!important;
}
body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-label{
  color:#006f86!important;
  text-shadow:none!important;
}
body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-actions .button-secondary{
  background:rgba(255,255,255,.68);
  border-color:rgba(6,24,46,.16);
  color:#071426;
}
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-pillars.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-divisions.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-activity-strip.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-assets-feature{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,251,253,.72)),
    linear-gradient(90deg,rgba(0,229,255,.035),rgba(255,10,138,.028));
  border-top:1px solid rgba(7,25,48,.08);
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio__grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item{
  grid-column:span 6;
  min-height:360px;
  border-radius:26px;
  border:1px solid rgba(7,25,48,.11);
  background:
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,252,255,.64)),
    rgba(255,255,255,.68);
  box-shadow:0 28px 70px rgba(7,25,48,.12),inset 0 1px 0 rgba(255,255,255,.86);
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:first-child{
  grid-column:span 7;
  grid-row:span 1;
  min-height:460px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:nth-child(2){
  grid-column:span 5;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media{
  padding:0;
  justify-content:flex-start;
  overflow:hidden;
}
.corp-portfolio-item__media{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#dff7ff;
}
.corp-portfolio-item__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.corp-portfolio-item.has-media:hover .corp-portfolio-item__media img{
  transform:scale(1.035);
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .corp-portfolio-item__meta,
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media h3,
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media p,
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .mod-card-link{
  margin-left:30px;
  margin-right:30px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .corp-portfolio-item__meta{
  margin-top:28px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .mod-card-link{
  margin-bottom:30px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item h3{
  color:#071426;
  font-size:clamp(34px,4.4rem,64px);
  line-height:.96;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item p{
  color:rgba(7,20,38,.70);
}
body.corporate-light-shell:not([data-page="mods"]) .proof-card{
  border-color:rgba(7,25,48,.11);
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(245,252,255,.58));
  box-shadow:0 22px 54px rgba(7,25,48,.10),inset 0 1px 0 rgba(255,255,255,.78);
}
body.corporate-light-shell:not([data-page="mods"]) .corp-division{
  min-height:172px;
}
body.corporate-light-shell:not([data-page="mods"]) .corp-division-list,
body.corporate-light-shell:not([data-page="mods"]) .corp-division,
body.corporate-light-shell:not([data-page="mods"]) .corp-pillar,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity__list,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity-item{
  border-color:rgba(7,25,48,.12);
}
body.corporate-light-shell:not([data-page="mods"]) .corp-structure-map{
  border-radius:30px;
  border-color:rgba(7,25,48,.12);
  background:
    linear-gradient(145deg,rgba(255,255,255,.90),rgba(244,251,255,.62)),
    rgba(255,255,255,.56);
}

@media(max-width:900px){
  body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__media::after{
    background:
      linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.58) 48%,rgba(238,248,252,.90) 100%),
      radial-gradient(circle at 82% 18%,rgba(0,229,255,.12),transparent 36%);
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio__grid{
    grid-template-columns:1fr;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item,
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:first-child,
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:nth-child(2){
    grid-column:1;
    min-height:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:not(.has-media){
    padding:24px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item h3{
    font-size:2.45rem;
    line-height:1;
    overflow-wrap:anywhere;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .corp-portfolio-item__meta,
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media h3,
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media p,
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .mod-card-link{
    margin-left:22px;
    margin-right:22px;
  }
  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item.has-media .mod-card-link{
    margin-bottom:22px;
  }
}

/* Corporate refinement v2: bright Florida pages, editorial modules, no framed sheets. */
body.corporate-light-shell:not([data-page="mods"]){
  background:#f6fbfd;
}

body.corporate-light-shell:not([data-page="mods"]) .site-bg{
  background:
    linear-gradient(180deg,#fbfeff 0%,#eef9fc 46%,#f8fcfd 100%),
    radial-gradient(circle at 88% 10%,rgba(0,229,255,.12),transparent 34%),
    radial-gradient(circle at 10% 18%,rgba(255,10,138,.075),transparent 30%);
}

body.corporate-light-shell:not([data-page="mods"]) .chapter{
  width:100%;
  max-width:none;
  background:transparent;
}

body.corporate-light-shell:not([data-page="mods"]) .chapter:not(.section-cinematic-hero){
  min-height:auto!important;
  padding-top:0!important;
  scroll-snap-align:none;
}

body.corporate-light-shell:not([data-page="mods"]) .section-corporate-pillars.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-divisions.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-activity-strip.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-assets-feature{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(248,253,255,.62)),
    radial-gradient(circle at 9% 8%,rgba(255,10,138,.038),transparent 28%),
    radial-gradient(circle at 91% 18%,rgba(0,229,255,.07),transparent 34%);
  border-top:0;
  box-shadow:none;
}

body.corporate-light-shell:not([data-page="mods"]) .section-corporate-pillars > .mod-inner,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-divisions > .mod-inner,
body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial > .mod-inner,
body.corporate-light-shell:not([data-page="mods"]) .section-assets-feature > .mod-inner,
body.corporate-light-shell:not([data-page="mods"]) .section-group-structure > .mod-inner,
body.corporate-light-shell:not([data-page="mods"]) .section-activity-strip > .mod-inner,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta > .mod-inner{
  width:min(1320px,calc(100% - 96px));
  padding-top:clamp(120px,10vw,180px);
  padding-bottom:clamp(120px,10vw,180px);
}

body.corporate-light-shell[data-route="/"] .section-cinematic-hero.light-chapter .mod-cinematic-hero__content{
  max-width:min(1060px,calc(100% - 112px))!important;
}

body.corporate-light-shell[data-route="/"] .section-cinematic-hero.light-chapter .mod-cinematic-hero__content h1{
  max-width:980px;
  font-size:clamp(4.2rem,5.7vw,7.1rem)!important;
  line-height:.98!important;
  white-space:pre-line;
}

body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__content{
  max-width:min(980px,calc(100% - 112px))!important;
}

body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__content h1{
  text-wrap:balance;
}

body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__content p{
  max-width:650px!important;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-section-head,
body.corporate-light-shell:not([data-page="mods"]) .corp-intro__head{
  max-width:980px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-section-head h2,
body.corporate-light-shell:not([data-page="mods"]) .corp-intro__head h2,
body.corporate-light-shell:not([data-page="mods"]) .corp-assets-feature h2,
body.corporate-light-shell:not([data-page="mods"]) .corp-cta h2{
  font-size:clamp(54px,5.9vw,92px);
  line-height:.95;
  letter-spacing:0;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio__grid{
  gap:24px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item{
  border:0;
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 72px rgba(16,42,62,.12);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:first-child{
  min-height:520px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item__media{
  aspect-ratio:16/10;
  background:#eaf8fc;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item h3{
  font-size:clamp(38px,4.2vw,66px);
}

body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter .corp-structure-map{
  padding:clamp(18px,3vw,34px) 0 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter .corp-structure-map::before{
  opacity:.18;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
}

body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter .corp-node{
  border:1px solid rgba(7,25,48,.10);
  background:rgba(255,255,255,.72);
  box-shadow:0 18px 50px rgba(16,42,62,.09);
  backdrop-filter:blur(18px);
}

body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter .corp-structure-map__branches,
body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter .corp-structure-map__branches::after{
  opacity:.45;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-activity__list{
  border-top:1px solid rgba(7,25,48,.12);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-activity-item{
  border-bottom:1px solid rgba(7,25,48,.12);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-activity-item p{
  color:rgba(7,20,38,.66);
}

body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta.light-chapter > .mod-inner{
  padding-top:clamp(180px,14vw,240px);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
  min-height:46vh;
  justify-content:flex-start;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media{
  position:relative;
  margin:clamp(34px,5vw,68px) 0;
  overflow:hidden;
  border-radius:30px;
  background:#dff7fc;
  box-shadow:0 34px 90px rgba(14,45,68,.15);
  isolation:isolate;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.20)),
    linear-gradient(90deg,rgba(255,10,138,.14),transparent 22%,transparent 76%,rgba(0,229,255,.16));
  mix-blend-mode:screen;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  max-height:560px;
  object-fit:cover;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions,
body.corporate-light-shell:not([data-page="mods"]) .corp-structure,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity,
body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(420px,1fr);
  gap:clamp(34px,6vw,84px);
  align-items:start;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-section-head{
  position:sticky;
  top:132px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-cta .corp-editorial-media{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
  min-height:520px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media img{
  min-height:620px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-division-list{
  margin-top:42px;
  border:0;
  display:grid;
  gap:12px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-division{
  padding:18px 0;
  border:0;
  grid-template-columns:58px minmax(0,1fr);
  gap:10px 28px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-division > p,
body.corporate-light-shell:not([data-page="mods"]) .corp-division .mod-card-link{
  grid-column:2;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-division h3{
  font-size:clamp(34px,3.3vw,54px);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-structure-map,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity .corp-activity__list{
  grid-column:1;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-activity__list{
  margin-top:34px;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-activity-item{
  grid-template-columns:1fr;
  gap:8px;
  padding:22px 0;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
  align-items:center;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-cta > :not(.corp-editorial-media){
  grid-column:1;
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer{
  width:min(calc(100% - 96px),1320px);
  margin:0 auto 34px;
  border:1px solid rgba(7,25,48,.10);
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(236,249,253,.80)),
    radial-gradient(circle at 92% 8%,rgba(0,229,255,.10),transparent 30%);
  box-shadow:0 24px 64px rgba(16,42,62,.12);
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer__nav strong{
  color:#00758d;
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer__nav a,
body.corporate-light-shell:not([data-page="mods"]) .corporate-footer .footer-text{
  color:rgba(7,20,38,.62);
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer__nav a:hover{
  color:#071426;
}

@media(max-width:900px){
  body.corporate-light-shell:not([data-page="mods"]) .section-corporate-pillars > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-corporate-divisions > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-assets-feature > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-group-structure > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-activity-strip > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta > .mod-inner{
    width:min(100% - 36px,720px);
    padding-top:92px;
    padding-bottom:112px;
  }

  body.corporate-light-shell[data-route="/"] .section-cinematic-hero.light-chapter .mod-cinematic-hero__content,
  body.corporate-light-shell:not([data-page="mods"]) .section-cinematic-hero.light-chapter .mod-cinematic-hero__content{
    max-width:calc(100% - 40px)!important;
  }

  body.corporate-light-shell[data-route="/"] .section-cinematic-hero.light-chapter .mod-cinematic-hero__content h1{
    font-size:clamp(3.25rem,15vw,5.4rem)!important;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-section-head h2,
  body.corporate-light-shell:not([data-page="mods"]) .corp-intro__head h2,
  body.corporate-light-shell:not([data-page="mods"]) .corp-assets-feature h2,
  body.corporate-light-shell:not([data-page="mods"]) .corp-cta h2{
    font-size:clamp(40px,12vw,60px);
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-portfolio-item:first-child{
    min-height:0;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-divisions,
  body.corporate-light-shell:not([data-page="mods"]) .corp-structure,
  body.corporate-light-shell:not([data-page="mods"]) .corp-activity,
  body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
    display:block;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-section-head{
    position:static;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media{
    margin:30px 0;
    border-radius:22px;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media img,
  body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media img{
    min-height:260px;
    max-height:360px;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-division{
    grid-template-columns:1fr;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-division > p,
  body.corporate-light-shell:not([data-page="mods"]) .corp-division .mod-card-link{
    grid-column:auto;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corporate-footer{
    width:min(100% - 36px,720px);
    margin-bottom:calc(var(--dock-fab-size) + max(18px, env(safe-area-inset-bottom)) + 28px);
  }
}

/* Corporate light design-quality pass: continuous canvas, resolved media frames, and a non-clipping ecosystem map. */
body.corporate-light-shell:not([data-page="mods"]),
body.corporate-light-shell:not([data-page="mods"]) .site-bg,
body.corporate-light-shell:not([data-page="mods"]) main{
  background-color:#f8fcfd;
  background:
    radial-gradient(circle at 92% 4%,rgba(0,229,255,.11),transparent 30%),
    radial-gradient(circle at 4% 10%,rgba(255,10,138,.06),transparent 28%),
    linear-gradient(180deg,#fbfeff 0%,#eef8fb 42%,#f8fcfd 100%);
}

body.corporate-light-shell:not([data-page="mods"]){
  padding-bottom:0;
}

body.corporate-light-shell:not([data-page="mods"]) .site-bg::before{
  opacity:.22;
}

body.corporate-light-shell:not([data-page="mods"]) .site-bg::after{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(248,252,253,.86));
}

body.corporate-light-shell:not([data-page="mods"]) .chapter:not(.section-cinematic-hero),
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-pillars.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-divisions.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-group-structure.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-activity-strip.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta.light-chapter,
body.corporate-light-shell:not([data-page="mods"]) .section-assets-feature{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body.corporate-light-shell:not([data-page="mods"]) .chapter:not(.section-cinematic-hero)::before,
body.corporate-light-shell:not([data-page="mods"]) .chapter:not(.section-cinematic-hero)::after{
  display:none!important;
}

body.corporate-light-shell:not([data-page="mods"]) .mod-split-narrative__text,
body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-section-head{
  position:static!important;
  top:auto!important;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions,
body.corporate-light-shell:not([data-page="mods"]) .corp-structure,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity,
body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
  grid-template-columns:minmax(390px,.8fr) minmax(500px,1fr);
  align-items:center;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-section-head{
  margin-bottom:clamp(28px,4vw,48px);
  max-width:min(100%,1120px);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-section-head h2{
  text-wrap:balance;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-section-head h2{
  max-width:min(18ch,100%);
}

body[data-route="/businesses/"] #group .corp-section-head h2,
body[data-route="/businesses/"] #model .section-heading h2{
  max-width:min(22ch,100%);
}

body[data-route="/businesses/"] #model .section-heading p{
  max-width:780px;
}

@media(min-width:1180px){
  body[data-route="/businesses/"] #model .proof-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
  }

  body[data-route="/businesses/"] #model .proof-card{
    min-height:300px;
    padding:30px 28px;
  }

  body[data-route="/businesses/"] #model .proof-card h3{
    font-size:clamp(25px,1.65vw,34px);
    line-height:1.06;
    text-wrap:balance;
  }

  body[data-route="/businesses/"] #model .proof-card p{
    font-size:16px;
    line-height:1.58;
  }
}

body[data-route="/systems/"] .section-cinematic-hero.light-chapter .mod-cinematic-hero__content{
  max-width:min(1180px,calc(100% - 112px))!important;
}

body[data-route="/systems/"] .section-cinematic-hero.light-chapter .mod-cinematic-hero__content h1{
  max-width:1000px;
  font-size:clamp(4rem,5.6vw,6.9rem)!important;
  line-height:1.02!important;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media{
  aspect-ratio:16/11;
  min-height:0!important;
  border-radius:28px;
  background:#eef8fb;
  box-shadow:0 34px 86px rgba(18,56,78,.14);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media img,
body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media img{
  width:100%;
  height:100%;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover;
  object-position:center;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-cta .corp-editorial-media{
  min-height:0!important;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media{
  aspect-ratio:16/12;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-editorial-media,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity .corp-editorial-media{
  aspect-ratio:16/13;
}

.corp-ecosystem-map{
  grid-column:1;
  width:100%;
  overflow:visible;
}

.corp-ecosystem-map__canvas{
  position:relative;
  min-height:520px;
  padding:clamp(28px,4vw,52px);
  overflow:hidden;
  border-radius:32px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(235,249,253,.72)),
    radial-gradient(circle at 18% 18%,rgba(255,10,138,.08),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(0,229,255,.12),transparent 34%);
  box-shadow:0 34px 88px rgba(16,42,62,.13),inset 0 1px 0 rgba(255,255,255,.9);
}

.corp-ecosystem-map__canvas::before{
  content:"";
  position:absolute;
  inset:30px;
  border-radius:28px;
  background:
    linear-gradient(rgba(0,127,154,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,127,154,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 38%,black 0 46%,transparent 78%);
  pointer-events:none;
}

.corp-ecosystem-map__ring{
  position:absolute;
  left:50%;
  top:46%;
  width:min(58%,460px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,127,154,.18);
  border-radius:999px;
  pointer-events:none;
}

.corp-ecosystem-map__ring::before,
.corp-ecosystem-map__ring::after{
  content:"";
  position:absolute;
  inset:17%;
  border:1px solid rgba(255,10,138,.13);
  border-radius:inherit;
}

.corp-ecosystem-map__ring::after{
  inset:34%;
  border-color:rgba(0,229,255,.20);
  box-shadow:0 0 44px rgba(0,229,255,.12);
}

.corp-ecosystem-root{
  position:absolute;
  z-index:2;
  left:50%;
  top:42%;
  width:min(72%,340px);
  min-height:118px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.82);
  box-shadow:0 24px 62px rgba(16,42,62,.14),inset 0 1px 0 rgba(255,255,255,.95);
  text-align:center;
}

.corp-ecosystem-root span{
  color:#071426;
  font-size:clamp(24px,2.6vw,34px);
  font-weight:900;
  line-height:1;
}

.corp-ecosystem-root strong{
  color:rgba(7,20,38,.52);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  line-height:1.35;
  text-transform:uppercase;
}

.corp-ecosystem-lanes{
  position:absolute;
  z-index:3;
  inset:clamp(24px,4vw,44px);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(84px,9vw,124px) clamp(120px,14vw,180px);
}

.corp-ecosystem-lane{
  position:relative;
  width:min(100%,360px);
  min-height:124px;
  padding:18px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  border-radius:24px;
  background:rgba(255,255,255,.74);
  box-shadow:0 18px 46px rgba(16,42,62,.10),inset 0 1px 0 rgba(255,255,255,.90);
  color:#071426;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.corp-ecosystem-lane::before{
  content:"";
  position:absolute;
  width:clamp(44px,5vw,74px);
  height:1px;
  top:50%;
  background:linear-gradient(90deg,rgba(255,10,138,.42),rgba(0,229,255,.42));
}

.corp-ecosystem-lane.is-1,
.corp-ecosystem-lane.is-3{
  justify-self:start;
}

.corp-ecosystem-lane.is-2,
.corp-ecosystem-lane.is-4{
  justify-self:end;
}

.corp-ecosystem-lane.is-1::before,
.corp-ecosystem-lane.is-3::before{
  left:100%;
}

.corp-ecosystem-lane.is-2::before,
.corp-ecosystem-lane.is-4::before{
  right:100%;
}

.corp-ecosystem-lane:hover,
.corp-ecosystem-lane:focus-visible{
  transform:translateY(-3px);
  background:rgba(255,255,255,.90);
  box-shadow:0 24px 58px rgba(16,42,62,.15),0 0 0 1px rgba(0,229,255,.14);
}

.corp-ecosystem-lane__index{
  flex:0 0 auto;
  color:var(--vice-cyan);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
}

.corp-ecosystem-lane:nth-child(2n) .corp-ecosystem-lane__index{
  color:var(--vice-pink);
}

.corp-ecosystem-lane__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.corp-ecosystem-lane__copy strong{
  font-size:clamp(19px,2vw,26px);
  line-height:1.05;
}

.corp-ecosystem-lane__copy em{
  color:rgba(7,20,38,.58);
  font-size:11px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.13em;
  line-height:1.45;
  text-transform:uppercase;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-ecosystem-map,
body.corporate-light-shell:not([data-page="mods"]) .corp-activity .corp-activity__list{
  grid-column:1;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-editorial-media{
  grid-row:1;
}

body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-ecosystem-map{
  grid-column:1 / -1;
  margin-top:clamp(18px,3vw,34px);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-ecosystem-map__canvas{
  min-height:600px;
}

body.corporate-light-shell:not([data-page="mods"]) .section-corporate-cta.light-chapter > .mod-inner{
  padding-bottom:clamp(80px,9vw,132px);
}

body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
  min-height:0;
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer{
  width:100%;
  margin:0;
  padding:
    clamp(42px,5vw,68px)
    max(48px,calc((100vw - 1320px) / 2))
    calc(var(--dock-fab-size) + max(18px, env(safe-area-inset-bottom)) + 44px);
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 86% 18%,rgba(0,229,255,.075),transparent 28%),
    radial-gradient(circle at 8% 0%,rgba(255,10,138,.04),transparent 26%),
    linear-gradient(180deg,#f8fcfd 0%,#eef8fb 100%);
  box-shadow:none;
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer::before{
  display:none!important;
}

body.corporate-light-shell:not([data-page="mods"]) .corporate-footer .footer-text,
body.corporate-light-shell:not([data-page="mods"]) .corporate-footer .footer-text > p{
  color:rgba(7,20,38,.72);
}

.contact-wizard-shell{
  position:fixed;
  inset:0;
  z-index:320;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,36px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.contact-wizard-shell[hidden]{display:none}
.contact-wizard-shell.is-open{
  opacity:1;
  pointer-events:auto;
}

.contact-wizard__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,10,138,.16),transparent 32%),
    radial-gradient(circle at 84% 18%,rgba(0,229,255,.18),transparent 34%),
    rgba(240,249,252,.72);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}

.contact-wizard{
  --glass-bg:
    linear-gradient(135deg,rgba(255,255,255,.72),rgba(245,252,255,.48)),
    rgba(255,255,255,.36);
  --glass-border:rgba(7,25,48,.14);
  --glass-highlight:rgba(255,255,255,.82);
  --glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 16px 0 38px rgba(255,10,138,.055),
    inset -16px 0 42px rgba(0,229,255,.08),
    0 34px 100px rgba(16,42,62,.22);
  position:relative;
  width:min(980px,100%);
  max-height:min(760px,calc(100vh - 34px));
  min-height:min(620px,calc(100vh - 34px));
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  overflow:hidden;
  border-radius:34px;
  color:#071426;
  transform:translateY(14px) scale(.985);
  transition:transform .28s var(--ease-glass),opacity .22s ease;
}

.contact-wizard > *{
  min-height:0;
}

.contact-wizard-shell.is-open .contact-wizard{
  transform:translateY(0) scale(1);
}

.contact-wizard__rail{
  position:relative;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
  background:
    linear-gradient(160deg,rgba(255,255,255,.72),rgba(219,247,253,.34)),
    radial-gradient(circle at 8% 8%,rgba(255,10,138,.12),transparent 28%);
  border-right:1px solid rgba(7,25,48,.10);
}

.contact-wizard__rail h2{
  max-width:320px;
  margin:12px 0 14px;
  font-size:clamp(34px,4vw,56px);
  line-height:.94;
  letter-spacing:0;
}

.contact-wizard__rail p{
  max-width:300px;
  color:rgba(7,20,38,.62);
  font-size:16px;
  line-height:1.55;
}

.contact-wizard__eyebrow,
.contact-wizard__context,
.contact-wizard__steps span{
  color:#00849a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.contact-wizard__steps{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.contact-wizard__steps li{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:42px;
  color:rgba(7,20,38,.48);
  font-size:13px;
  font-weight:850;
}

.contact-wizard__steps li.is-active,
.contact-wizard__steps li.is-complete{
  color:#071426;
}

.contact-wizard__steps li.is-active span{
  color:var(--vice-pink);
}

.contact-wizard__form{
  min-width:0;
  min-height:0;
  height:100%;
  max-height:100%;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
}

.contact-wizard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.contact-wizard__top p{
  margin-top:6px;
  color:rgba(7,20,38,.52);
  font-size:13px;
  font-weight:760;
}

.contact-wizard__close{
  width:42px;
  height:42px;
  border:1px solid rgba(7,25,48,.12);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#071426;
  background:rgba(255,255,255,.62);
  box-shadow:0 10px 26px rgba(16,42,62,.10);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.contact-wizard__progress{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(7,25,48,.08);
}

.contact-wizard__progress span{
  display:block;
  width:25%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--vice-pink),var(--vice-cyan));
  transition:width .28s var(--ease-glass);
}

.contact-wizard__page{
  display:none;
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  overscroll-behavior:contain;
  border:0;
  padding:4px 0 0;
  margin:0;
  scrollbar-width:thin;
}

.contact-wizard__page.is-active{
  display:block;
}

.contact-wizard__page legend{
  margin:0 0 18px;
  color:#071426;
  font-size:clamp(28px,3vw,42px);
  font-weight:900;
  line-height:1;
}

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

.contact-choice-grid--areas{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.contact-choice-grid--topics{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.contact-choice-grid--topics .contact-choice[hidden]{
  display:none;
}

.contact-choice{
  min-height:104px;
  padding:17px;
  border:1px solid rgba(7,25,48,.10);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  color:#071426;
  text-align:left;
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(244,252,255,.48));
  box-shadow:0 12px 28px rgba(16,42,62,.07);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.contact-choice:hover,
.contact-choice:focus-visible,
.contact-choice.is-selected{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--vice-pink) 40%,rgba(7,25,48,.12));
  box-shadow:0 18px 44px rgba(16,42,62,.12),0 0 0 3px color-mix(in srgb,var(--vice-cyan) 10%,transparent);
}

.contact-choice.is-selected{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--vice-pink) 9%,white),color-mix(in srgb,var(--vice-cyan) 11%,white));
}

.contact-choice strong{
  font-size:18px;
  line-height:1;
}

.contact-choice span{
  color:rgba(7,20,38,.58);
  font-size:13.5px;
  line-height:1.45;
}

.contact-choice-grid--areas .contact-choice{
  min-height:92px;
}

.contact-choice-grid--areas .contact-choice:first-child{
  grid-column:1 / -1;
}

.contact-choice-grid--topics .contact-choice{
  min-height:82px;
  padding:14px;
}

.contact-choice-grid--topics .contact-choice strong{
  font-size:17px;
}

.contact-choice-grid--topics .contact-choice span{
  font-size:13px;
  line-height:1.36;
}

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

.contact-phone-field{
  grid-column:1 / -1;
}

.contact-phone-field > span:first-of-type{
  color:rgba(7,20,38,.42);
  font-size:11px;
  letter-spacing:.08em;
}

.contact-phone-row{
  display:grid;
  grid-template-columns:minmax(112px,.32fr) 1fr;
  gap:10px;
}

.contact-phone-note{
  min-height:18px;
  color:#00758d;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .18s ease,transform .18s ease;
}

.contact-phone-note.is-visible{
  opacity:1;
  transform:none;
}

.contact-field-stack{
  display:grid;
  gap:14px;
}

.contact-field-grid label,
.contact-field-stack label{
  display:grid;
  gap:8px;
  color:rgba(7,20,38,.62);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-field-grid input,
.contact-field-grid select,
.contact-field-stack input,
.contact-field-stack textarea{
  width:100%;
  min-height:52px;
  border:1px solid rgba(7,25,48,.12);
  border-radius:16px;
  padding:0 16px;
  color:#071426;
  background:rgba(255,255,255,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  font:inherit;
  font-size:15px;
  font-weight:650;
  outline:0;
}

.contact-field-stack textarea{
  min-height:158px;
  padding:15px 16px;
  resize:vertical;
  line-height:1.5;
}

.contact-field-grid input:focus,
.contact-field-grid select:focus,
.contact-field-stack input:focus,
.contact-field-stack textarea:focus{
  border-color:color-mix(in srgb,var(--vice-cyan) 54%,rgba(7,25,48,.12));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vice-cyan) 12%,transparent);
}

.contact-wizard__status{
  min-height:20px;
  color:rgba(7,20,38,.62);
  font-size:13px;
  font-weight:750;
}

.contact-wizard__actions{
  margin-top:0;
  padding-top:12px;
  border-top:1px solid rgba(7,25,48,.08);
  background:
    linear-gradient(180deg,rgba(255,255,255,0),rgba(250,253,255,.72) 28%,rgba(250,253,255,.88));
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:0 0 auto;
}

.contact-wizard__back{
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(7,25,48,.12);
  border-radius:999px;
  color:#071426;
  background:rgba(255,255,255,.56);
  font-weight:900;
  cursor:pointer;
}

.contact-wizard__back:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.contact-wizard__next,
.contact-wizard__submit{
  min-height:52px;
  padding:0 24px;
  border:1px solid color-mix(in srgb,var(--vice-pink) 62%,white);
  color:#fff;
  background:
    linear-gradient(135deg,var(--vice-pink),color-mix(in srgb,var(--vice-pink) 78%,var(--vice-cyan)));
  box-shadow:0 14px 34px color-mix(in srgb,var(--vice-pink) 28%,transparent),0 8px 22px rgba(16,42,62,.13);
}

.contact-wizard__next:hover,
.contact-wizard__next:focus-visible,
.contact-wizard__submit:hover,
.contact-wizard__submit:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 18px 42px color-mix(in srgb,var(--vice-pink) 34%,transparent),0 10px 28px rgba(16,42,62,.16);
}

.contact-wizard__submit[hidden],
.contact-wizard__next[hidden]{
  display:none;
}

.contact-wizard__form.is-complete .contact-wizard__page,
.contact-wizard__form.is-complete .contact-wizard__actions{
  opacity:.55;
  pointer-events:none;
}

body.contact-wizard-open{
  overflow:hidden;
}

@media(max-width:760px){
  .contact-wizard-shell{
    padding:10px;
  }

  .contact-wizard{
    max-height:calc(100vh - 20px);
    min-height:0;
    grid-template-columns:1fr;
    overflow:auto;
    border-radius:26px;
  }

  .contact-wizard__rail{
    padding:24px 22px 18px;
    border-right:0;
    border-bottom:1px solid rgba(7,25,48,.10);
  }

  .contact-wizard__rail h2{
    font-size:38px;
  }

  .contact-wizard__steps{
    grid-template-columns:repeat(5,1fr);
    gap:6px;
  }

  .contact-wizard__steps li{
    min-height:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    font-size:11px;
  }

  .contact-wizard__form{
    padding:22px;
  }

  .contact-wizard__page{
    min-height:auto;
  }

  .contact-choice-grid,
  .contact-field-grid{
    grid-template-columns:1fr;
  }

  .contact-phone-row{
    grid-template-columns:1fr;
  }

  .contact-wizard__actions{
    justify-content:stretch;
  }

  .contact-wizard__actions > *{
    flex:1;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-wizard-shell,
  .contact-wizard,
  .contact-choice,
  .contact-wizard__progress span{
    transition:none!important;
  }
}

@media(max-width:1100px){
  body.corporate-light-shell:not([data-page="mods"]) .corp-divisions,
  body.corporate-light-shell:not([data-page="mods"]) .corp-structure,
  body.corporate-light-shell:not([data-page="mods"]) .corp-activity,
  body.corporate-light-shell:not([data-page="mods"]) .corp-cta{
    grid-template-columns:1fr;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corp-divisions .corp-editorial-media,
  body.corporate-light-shell:not([data-page="mods"]) .corp-structure .corp-editorial-media,
  body.corporate-light-shell:not([data-page="mods"]) .corp-activity .corp-editorial-media,
  body.corporate-light-shell:not([data-page="mods"]) .corp-cta .corp-editorial-media{
    grid-column:auto;
    grid-row:auto;
  }

  .corp-ecosystem-map__canvas{
    min-height:auto;
  }

  .corp-ecosystem-root,
  .corp-ecosystem-lanes{
    position:relative;
    left:auto;
    top:auto;
    inset:auto;
    transform:none;
  }

  .corp-ecosystem-root{
    width:100%;
    margin-bottom:24px;
  }

  .corp-ecosystem-map__ring{
    display:none;
  }

  .corp-ecosystem-lanes{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
    gap:14px;
  }

  .corp-ecosystem-lane{
    width:auto;
    justify-self:stretch!important;
  }

  .corp-ecosystem-lane::before{
    display:none;
  }
}

@media(max-width:900px){
  body.corporate-light-shell:not([data-page="mods"]) .corp-editorial-media{
    aspect-ratio:4/3;
  }

  body.corporate-light-shell:not([data-page="mods"]) .corporate-footer{
    width:100%;
    padding-inline:18px;
  }
}

body.corporate-light-shell:not([data-page="mods"]) .section-image-gallery > .mod-inner,
body[data-route="/studio/"] .section-image-gallery > .mod-inner{
  width:min(calc(100% - 128px),1200px);
}

body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial > .mod-inner{
  width:min(calc(100% - 128px),1200px);
}

body.corporate-light-shell:not([data-page="mods"]) .section-image-gallery,
body.corporate-light-shell:not([data-page="mods"]) .section-feature-cards,
body.corporate-light-shell:not([data-page="mods"]) .section-proof-grid{
  width:min(calc(100% - 128px),1200px)!important;
}

body.corporate-light-shell:not([data-page="mods"]) .gallery-grid:has(.gallery-card:only-child),
body[data-route="/studio/"] .gallery-grid:has(.gallery-card:only-child){
  grid-template-columns:1fr;
}

body[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-grid{
  position:relative;
  isolation:isolate;
  width:100%;
  margin-top:clamp(34px,5vh,54px);
}

body[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-grid::before{
  content:"";
  position:absolute;
  inset:10% 4% -7%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 84%,rgba(255,10,138,.16),transparent 36%),
    radial-gradient(circle at 82% 18%,rgba(0,229,255,.22),transparent 42%);
  filter:blur(36px);
  opacity:.58;
}

body.corporate-light-shell:not([data-page="mods"]) .gallery-card:only-child,
body[data-route="/studio/"] .gallery-card:only-child{
  padding:0;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  box-shadow:0 34px 92px rgba(16,42,62,.14);
}

body[data-route="/studio/"] .gallery-card:only-child{
  background:rgba(255,255,255,.06);
  box-shadow:0 34px 92px rgba(0,0,0,.32);
}

body.corporate-light-shell:not([data-page="mods"]) .gallery-card:only-child img,
body[data-route="/studio/"] .gallery-card:only-child img{
  aspect-ratio:16/8;
  min-height:420px;
  max-height:680px;
  width:100%;
  object-fit:cover;
  border-radius:0;
}

body.corporate-light-shell:not([data-page="mods"]) .gallery-card:only-child figcaption,
body[data-route="/studio/"] .gallery-card:only-child figcaption{
  padding:24px 32px 30px;
  font-size:17px;
  line-height:1.65;
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child{
  position:relative;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px!important;
  clip-path:inset(0 round 28px);
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  transform:translateZ(0);
  border:1px solid rgba(255,255,255,.45);
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.045)),
    rgba(235,249,253,.36);
  box-shadow:
    0 44px 100px rgba(13,42,64,.18),
    0 18px 46px rgba(0,229,255,.08),
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 1px 0 0 rgba(255,10,138,.20),
    inset -1px 0 0 rgba(0,229,255,.26);
  transition:
    transform .36s cubic-bezier(.18,.86,.22,1),
    box-shadow .36s cubic-bezier(.18,.86,.22,1),
    border-color .36s ease;
}

body[data-route="/systems/crewcloud/"] .gallery-card:only-child > img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  border-radius:inherit;
  clip-path:inset(0 round 27px);
  -webkit-backface-visibility:hidden;
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child::before{
  content:"CREWCLOUD · OPERATIONS";
  position:absolute;
  inset:auto;
  left:24px;
  top:22px;
  right:auto;
  bottom:auto;
  z-index:4;
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(245,252,255,.34);
  color:rgba(247,252,255,.92);
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 1px 12px rgba(1,12,26,.42);
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 12px 28px rgba(4,18,34,.12);
  -webkit-mask:none;
  mask:none;
  mix-blend-mode:normal;
  opacity:1;
  filter:none;
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  z-index:2;
  display:block;
  height:44%;
  padding:0;
  border-radius:0 0 28px 28px;
  pointer-events:none;
  background:
    linear-gradient(
      0deg,
      rgba(255,255,255,.98) 0%,
      rgba(250,253,255,.94) 32%,
      rgba(246,252,255,.66) 64%,
      rgba(246,252,255,0) 100%
    );
  opacity:1;
  mix-blend-mode:normal;
  filter:none;
  -webkit-mask:none;
  mask:none;
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child:hover{
  transform:translateY(-5px) scale(1.006);
  border-color:rgba(255,255,255,.58);
  box-shadow:
    0 56px 120px rgba(13,42,64,.23),
    0 24px 58px rgba(0,229,255,.11),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 1px 0 0 rgba(255,10,138,.28),
    inset -1px 0 0 rgba(0,229,255,.34);
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child:hover img{
  transform:scale(1.08);
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  max-width:none;
  min-height:auto;
  padding:0 42px 38px!important;
  display:flex;
  align-items:flex-end;
  gap:28px;
  color:rgba(4,17,34,.88);
  font-size:18px;
  font-weight:650;
  line-height:1.52;
  text-shadow:0 1px 16px rgba(255,255,255,.72);
  background:transparent!important;
  pointer-events:none;
}

body[data-route="/systems/crewcloud/"] #surface .section-heading p{
  display:none;
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child figcaption::after{
  content:"Explore surface \2192";
  margin-left:auto;
  padding-left:24px;
  flex:0 0 auto;
  color:rgba(5,18,34,.68);
  font-size:13px;
  font-weight:850;
  letter-spacing:.02em;
  white-space:nowrap;
}

body.corporate-light-shell[data-route="/systems/crewcloud/"] .section-image-gallery .gallery-card:only-child img{
  aspect-ratio:16/9!important;
  min-height:440px!important;
  max-height:620px!important;
  transform:scale(1.065);
  object-position:50% 54%;
  transition:transform .5s cubic-bezier(.18,.86,.22,1);
}

body[data-route="/systems/crewcloud/"] .section-portfolio-editorial .corp-portfolio__grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

body[data-route="/systems/crewcloud/"] .section-feature-cards .system-grid{
  gap:24px;
}

body[data-route="/systems/crewcloud/"] .section-feature-cards .system-card{
  min-height:230px;
  padding:32px 34px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  align-content:start;
}

body[data-route="/systems/crewcloud/"] .section-feature-cards .system-card span{
  width:max-content;
  margin-bottom:24px;
}

body[data-route="/systems/crewcloud/"] .section-feature-cards .system-card h3{
  margin-top:0;
  font-size:clamp(25px,2vw,34px);
  line-height:1.06;
}

body[data-route="/systems/crewcloud/"] .section-feature-cards .system-card p{
  max-width:38ch;
  margin-top:14px;
  font-size:17px;
  line-height:1.62;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-grid{
  gap:24px;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card{
  min-height:0;
  padding:34px 36px 36px;
  display:grid;
  grid-template-rows:18px minmax(76px,auto) auto;
  row-gap:18px;
  align-content:start;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card .download-label{
  width:auto;
  margin:0;
  padding:0;
  position:static;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  color:var(--vice-cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card .download-label::before,
body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card .download-label::after{
  display:none!important;
  content:none!important;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card h3{
  align-self:start;
  margin:0;
  max-width:12ch;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card p{
  align-self:start;
  margin-top:0;
}

@media(min-width:1280px){
  body[data-route="/systems/crewcloud/"] .section-proof-grid > .section,
  body[data-route="/systems/crewcloud/"] .section-proof-grid > .mod-inner{
    width:min(calc(100% - 128px),1360px);
  }

  body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
  }

  body[data-route="/systems/crewcloud/"] #platform .proof-grid{
    grid-template-columns:repeat(3,minmax(300px,1fr));
  }
}

@media(min-width:981px){
  body[data-route="/systems/crewcloud/"] .section-image-gallery,
  body[data-route="/systems/crewcloud/"] .section-proof-grid,
  body[data-route="/systems/crewcloud/"] .section-portfolio-editorial{
    min-height:100svh!important;
    padding-top:clamp(118px,11vh,156px)!important;
    padding-bottom:clamp(128px,13vh,178px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:0;
    scroll-snap-align:start;
    scroll-margin-top:0;
  }

  body.corporate-light-shell[data-route="/systems/crewcloud/"] .chapter.section-image-gallery,
  body.corporate-light-shell[data-route="/systems/crewcloud/"] .chapter.section-proof-grid,
  body.corporate-light-shell[data-route="/systems/crewcloud/"] .chapter.section-portfolio-editorial{
    min-height:100svh!important;
    padding-top:clamp(118px,11vh,156px)!important;
    padding-bottom:clamp(128px,13vh,178px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-grid,
  body[data-route="/systems/crewcloud/"] .section-portfolio-editorial .corp-portfolio__grid{
    margin-top:clamp(40px,6vh,68px);
  }
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card h3{
  max-width:none;
  min-height:2.16em;
  margin-top:0;
  font-size:clamp(25px,1.55vw,32px);
  line-height:1.08;
  text-wrap:balance;
}

body[data-route="/systems/crewcloud/"] .section-proof-grid .proof-card p{
  max-width:40ch;
  margin-top:0;
  font-size:17px;
  line-height:1.62;
}

body[data-route="/systems/crewcloud/"] .section-portfolio-editorial .corp-portfolio-item:first-child{
  min-height:0;
}

body[data-route="/systems/crewcloud/"] .section-portfolio-editorial .corp-portfolio-item h3{
  max-width:none;
  font-size:clamp(26px,2.1vw,34px);
  line-height:1.08;
  text-wrap:balance;
}

body[data-route="/systems/crewcloud/"] #operations .corp-section-head h2{
  max-width:19ch;
  font-size:clamp(56px,5vw,82px);
  line-height:.96;
  text-wrap:balance;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio__grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item,
body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item:first-child,
body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item:nth-child(2){
  grid-column:auto;
  grid-row:auto;
  min-height:0;
  padding:0 0 38px;
  border-radius:26px;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item__media{
  aspect-ratio:16/10;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media .corp-portfolio-item__meta,
body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media h3,
body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media p,
body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media .mod-card-link{
  margin-left:34px;
  margin-right:34px;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media .corp-portfolio-item__meta{
  margin-top:32px;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item h3{
  margin-top:14px;
  min-height:2.16em;
  font-size:clamp(26px,1.8vw,32px);
  line-height:1.08;
}

body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item p{
  margin-top:14px;
  font-size:16px;
  line-height:1.58;
}

@media(max-width:900px){
  body.corporate-light-shell:not([data-page="mods"]) .corp-section-head h2{
    max-width:14ch;
  }

  body.corporate-light-shell:not([data-page="mods"]) .section-image-gallery > .mod-inner,
  body[data-route="/studio/"] .section-image-gallery > .mod-inner,
  body.corporate-light-shell:not([data-page="mods"]) .section-portfolio-editorial > .mod-inner{
    width:min(100% - 36px,720px);
  }

  body.corporate-light-shell:not([data-page="mods"]) .section-image-gallery,
  body.corporate-light-shell:not([data-page="mods"]) .section-feature-cards,
  body.corporate-light-shell:not([data-page="mods"]) .section-proof-grid{
    width:min(100% - 36px,720px)!important;
  }

  body.corporate-light-shell:not([data-page="mods"]) .gallery-card:only-child img,
  body[data-route="/studio/"] .gallery-card:only-child img{
    aspect-ratio:4/3;
    min-height:260px;
  }

  body.corporate-light-shell:not([data-page="mods"]) .gallery-card:only-child figcaption,
  body[data-route="/studio/"] .gallery-card:only-child figcaption,
  body[data-route="/systems/crewcloud/"] .gallery-card:only-child figcaption{
    padding:96px 24px 26px!important;
    font-size:16px;
    line-height:1.62;
  }

  body[data-route="/systems/crewcloud/"] .gallery-card:only-child figcaption{
    min-height:auto;
    background:transparent!important;
  }

  body[data-route="/systems/crewcloud/"] .gallery-card:only-child::after{
    height:54%;
    background:
      linear-gradient(
        0deg,
        rgba(255,255,255,.97) 0%,
        rgba(248,253,255,.90) 35%,
        rgba(244,252,255,.58) 68%,
        rgba(244,252,255,0) 100%
      );
  }

  body[data-route="/systems/crewcloud/"] .gallery-card:only-child figcaption::after{
    display:none;
  }

  body[data-route="/systems/crewcloud/"] .gallery-card:only-child::before{
    left:18px;
    top:18px;
  }

  body[data-route="/systems/crewcloud/"] .section-portfolio-editorial .corp-portfolio__grid{
    grid-template-columns:1fr;
  }

  body[data-route="/systems/crewcloud/"] #operations .corp-portfolio__grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media .corp-portfolio-item__meta,
  body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media h3,
  body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media p,
  body[data-route="/systems/crewcloud/"] #operations .corp-portfolio-item.has-media .mod-card-link{
    margin-left:24px;
    margin-right:24px;
  }
}

@media(max-width:620px){
  .corp-ecosystem-map__canvas{
    padding:18px;
    border-radius:24px;
  }

  .corp-ecosystem-lanes{
    grid-template-columns:1fr;
  }

  .corp-ecosystem-lane{
    min-height:108px;
    border-radius:18px;
  }
}