/* Self-hosted WOFF2 fonts (Fontsource, OFL); critical heading/body fonts preload. */
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/sora-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

/* ============================================================
   APEXAGEN — ASCENT Design Tokens v1.0
   Single source of truth. Derived from the ASCENT Brand Kit §3.3–3.7.
   Do not hand-pick values elsewhere; reference these variables.
   ============================================================ */

:root {
  /* ---- Color · Navy family ---- */
  --color-navy-abyss:   #0A1428;
  --color-navy:         #0F1D38;  /* primary brand navy */
  --color-navy-2:       #16294F;
  --color-navy-slate:   #1E3A66;
  --color-navy-steel:   #2C4E80;

  /* ---- Color · Ember family ---- */
  --color-ember:        #E85D1A;
  --color-ember-hover:  #F97316;
  --color-ember-press:  #C2410C;
  --color-ember-glow:   #FB923C;

  /* ---- Color · Neutrals ---- */
  --color-ink:          #0C1220;
  --color-slate-700:    #334155;
  --color-slate-500:    #64748B;
  --color-slate-300:    #CBD5E1;
  --color-slate-200:    #E2E8F0;
  --color-mist-100:     #F1F5F9;
  --color-cloud-50:     #F8FAFC;
  --color-white:        #FFFFFF;

  /* ---- Color · Text on dark ---- */
  --color-ondark-high:  #F5F8FF;
  --color-ondark-med:   #AEBBD4;
  --color-ondark-low:   #6B7A99;

  /* ---- Color · Semantic ---- */
  --color-success:      #10B981;
  --color-warning:      #F59E0B;
  --color-danger:       #EF4444;
  --color-info:         #3B82F6;

  /* ---- Semantic aliases ---- */
  --canvas:             var(--color-cloud-50);
  --canvas-alt:         var(--color-mist-100);
  --surface-dark:       var(--color-navy);
  --surface-dark-deep:  var(--color-navy-abyss);
  --surface-dark-raised:var(--color-navy-slate);
  --text-primary:       var(--color-ink);
  --text-secondary:     var(--color-slate-700);
  --text-muted:         var(--color-slate-500);
  --border:             var(--color-slate-200);
  --border-dark:        var(--color-navy-steel);

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

  --type-display-xl: clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem);   /* 34→56 */
  --type-display-lg: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);  /* 30→44 */
  --type-display-md: clamp(1.5rem,   1.1rem + 1.6vw, 2.125rem); /* 24→34 */
  --type-h2:         clamp(1.375rem, 1.1rem + 1vw,   1.75rem);  /* 22→28 */
  --type-card-title: 1.25rem;
  --type-body-lg:    1.125rem;
  --type-body-md:    1rem;
  --type-body-sm:    0.875rem;
  --type-caption:    0.8125rem;
  --type-button:     0.9375rem;
  --type-nav:        0.9375rem;
  --type-meta:       0.75rem;

  /* ---- Spacing (8px base) ---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-section: clamp(56px, 4vw + 40px, 96px);

  /* ---- Layout ---- */
  --layout-max: 1200px;
  --layout-wide: 1360px;
  --gutter: clamp(20px, 4vw, 64px);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-technical: 2px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 400ms;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(12,18,32,.06), 0 4px 12px rgba(12,18,32,.06);
  --shadow-card-hover: 0 2px 4px rgba(12,18,32,.08), 0 12px 28px rgba(12,18,32,.12);
  --shadow-ember: 0 4px 14px rgba(232,93,26,.28);
}

/* ---- v2 additions: award-tier dark surface system ---- */
:root {
  --color-void:        #060B18;   /* page canvas — deeper than abyss */
  --color-void-2:      #081020;
  --color-panel:       #0B1526;   /* framed panel fill */
  --glow-steel:        rgba(126,160,214,.16);
  --glow-ember:        rgba(232,93,26,.14);
  --dot:               rgba(140,165,205,.16);
  --hairline:          rgba(78,108,158,.28);
  --hairline-bright:   rgba(140,170,220,.45);
  --grad-silver: linear-gradient(115deg, #FFFFFF 10%, #C6D3E8 45%, #6E85AC 90%);
  --grad-ember:  linear-gradient(115deg, #FDBA74 0%, #F97316 45%, #E85D1A 90%);
  --font-hero-xl: clamp(2.4rem, 1.3rem + 4vw, 3.7rem);
}

/* ---- v4 scale correction: tighter, more editorial type & spacing ---- */
:root {
  --font-hero-xl: clamp(2.2rem, 1.2rem + 3.4vw, 3.3rem);
  --type-display-lg: clamp(1.7rem, 1.1rem + 2vw, 2.4rem);
  --type-display-md: clamp(1.4rem, 1rem + 1.4vw, 1.9rem);
  --type-h2: clamp(1.25rem, 1rem + .9vw, 1.55rem);
  --type-body-lg: 1.0625rem;
  --type-card-title: 1.125rem;
  --space-section: clamp(52px, 3.5vw + 36px, 84px);
}

/* ---- Apex glass tokens (refinement spec §7) ---- */
:root {
  --apex-bg: #050A14;
  --apex-navy: #07142A;
  --apex-navy-2: #0B1B35;
  --apex-orange: #F45A1A;
  --apex-orange-hot: #FF7A1A;
  --apex-blue: #2B6CBF;
  --apex-blue-soft: #4EA3FF;
  --apex-silver: #D8E2F2;
  --apex-muted: #94A3B8;
  --apex-border: rgba(216, 226, 242, 0.16);
}

/* ============================================================
   v8 — refinement pass: controlled, more premium type scale.
   Brief §3: smaller & better proportioned, not weak or tiny.
   Hero H1 −~12%, section H2 −15–25%, body tighter, sub → sans.
   This layer is authoritative (loaded last).
   ============================================================ */
:root {
  /* Hero: strong but smaller than v6's 52.8px. Lands ~46px at 1440,
     ~34px mobile, capped ~56px on ultra-wide. */
  --font-hero-xl: clamp(2.05rem, 1.35rem + 1.55vw, 3.5rem);

  /* Section display / H2 — reduced ~18% from v6 */
  --type-display-lg: clamp(1.55rem, 1.05rem + 1.6vw, 2.15rem);
  --type-display-md: clamp(1.3rem, 1rem + 1.05vw, 1.7rem);
  --type-h2:         clamp(1.2rem, 1rem + .7vw, 1.5rem);

  /* Body — slightly smaller, more line-height room */
  --type-body-lg:    1.0313rem;   /* ~16.5px lead paragraphs */
  --type-body-md:    0.9688rem;   /* ~15.5px default body */
  --type-body-sm:    0.90625rem;  /* 14.5px card and supporting text */
  --type-card-title: 1.0625rem;

  /* Card / component rhythm */
  --lh-body: 1.62;

  /* Unified card-hover system (brief §15) */
  --card-fill:        linear-gradient(150deg, rgba(11,27,53,.72), rgba(5,10,20,.9));
  --card-border:      rgba(140,170,220,.18);
  --card-border-hot:  rgba(255,122,26,.42);
  --card-radius:      16px;
  --card-shadow:      inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.34);
  --card-shadow-hot:  inset 0 1px 0 rgba(255,255,255,.10), 0 26px 70px rgba(0,0,0,.42), 0 0 34px rgba(244,90,26,.16), 0 14px 40px rgba(43,108,191,.14);

  /* Header scroll surface — navy blend, not flat black (brief §2) */
  --nav-scrolled: linear-gradient(180deg, rgba(30,52,102,.92), rgba(24,44,88,.88));
}

/* ============================================================
   APEXAGEN — ASCENT v2 · dark premium build
   Composed from tokens.css. Navy void canvas, silver display
   gradients, ember spent rarely, dot-matrix + glow textures.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.65;
  color: var(--color-ondark-med);
  background: var(--color-void);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-ember-glow); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--color-ember); color: #fff; }

h1, h2, h3 { font-family: var(--font-display); color: var(--color-ondark-high); margin: 0 0 var(--space-md); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 var(--space-md); }

.container { max-width: var(--layout-max); margin: 0 auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--layout-wide); }

/* Gradient display text — the silver of the logo */
.grad-silver { background: var(--grad-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.grad-ember  { background: var(--grad-ember);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Dot-matrix texture + corner glows (signature surface) */
.dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.1px);
  background-size: 17px 17px; }
.dots--tr { mask-image: radial-gradient(60% 55% at 88% 6%, black, transparent 72%); -webkit-mask-image: radial-gradient(60% 55% at 88% 6%, black, transparent 72%); }
.dots--bl { mask-image: radial-gradient(55% 55% at 8% 96%, black, transparent 70%); -webkit-mask-image: radial-gradient(55% 55% at 8% 96%, black, transparent 70%); }
.dots--top { mask-image: radial-gradient(70% 40% at 50% 0%, black, transparent 75%); -webkit-mask-image: radial-gradient(70% 40% at 50% 0%, black, transparent 75%); }
.glow { position: absolute; pointer-events: none; filter: blur(70px); border-radius: 50%; }
.glow--steel { background: var(--glow-steel); }
.glow--ember { background: var(--glow-ember); }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ember-glow);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-md);
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--color-ember); }
.eyebrow--center::before { display: none; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-ember); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 0; }

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--grad-ember); z-index: 60; }

/* ---------------- Navigation ---------------- */
.nav { position: sticky; top: 0; z-index: 50;
  background: rgba(6,11,24,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(78,108,158,.22); }
.nav__inner { display: flex; align-items: center; gap: var(--space-lg); height: 74px; max-width: var(--layout-wide); margin: 0 auto; padding-inline: var(--gutter); transition: height var(--dur-med) var(--ease); }
.nav.is-condensed .nav__inner { height: 62px; }
.nav__logo img { height: 32px; width: auto; }
.nav__links { display: flex; gap: var(--space-xl); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav__links a { font-size: var(--type-nav); font-weight: 500; color: var(--color-ondark-med); position: relative; padding: 8px 0; text-decoration: none; letter-spacing: .01em; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 1.5px; width: 0; background: var(--color-ember); transition: width var(--dur-fast) var(--ease); }
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="page"] { color: var(--color-ondark-high); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__cta { margin-left: var(--space-lg); }
.nav__toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--color-ondark-high); padding: 8px 11px; font-size: 19px; line-height: 1; cursor: pointer; }

/* ---------------- Buttons — pill, engineered glow ---------------- */
.btn { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: .06em;
  border-radius: var(--radius-full); padding: 15px 30px; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-ember); color: #fff; border: none;
  box-shadow: 0 0 0 1px rgba(251,146,60,.4), 0 6px 24px rgba(232,93,26,.35); }
.btn--primary:hover { background: var(--color-ember-hover); transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(251,146,60,.65), 0 10px 34px rgba(232,93,26,.5); }
.btn--primary:active { background: var(--color-ember-press); transform: none; }
.btn--primary .chev { transition: transform var(--dur-fast) var(--ease); }
.btn--primary:hover .chev { transform: translateX(3px); }
.btn--ghost { background: transparent; border: 1px solid var(--hairline-bright); color: var(--color-ondark-high); }
.btn--ghost:hover { border-color: var(--color-ember-glow); color: var(--color-ember-glow); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 3px; }

/* ---------------- Sections ---------------- */
.band { position: relative; padding-block: var(--space-section); }
.band__head { max-width: 760px; margin-bottom: var(--space-2xl); position: relative; }
.band__head--center { margin-inline: auto; text-align: center; }
.h-display { font-size: var(--type-display-lg); }
.h-section { font-size: var(--type-display-md); }
.lede { font-size: var(--type-body-lg); color: var(--color-ondark-med); }
.muted { color: var(--color-ondark-low); }

/* Section index number — engineered, meaningful (matches hero index) */
.sec-num { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .16em; color: var(--color-ondark-low); display: block; margin-bottom: var(--space-sm); }
.sec-num b { color: var(--color-ember-glow); font-weight: 500; }

/* ---------------- HERO — framed panel ---------------- */
.hero { position: relative; padding: clamp(16px, 2.5vw, 36px); min-height: calc(100svh - 74px); display: flex; }
.hero__frame { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden;
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(126,160,214,.13), transparent 55%),
    radial-gradient(70% 90% at 0% 110%, rgba(232,93,26,.16), transparent 55%),
    linear-gradient(150deg, #0A1223 0%, var(--color-panel) 55%, #081020 100%);
  border-radius: var(--radius-xl); border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(120,150,200,.22), 0 30px 80px rgba(0,0,0,.5); }
.hero__frame::before { content:""; position:absolute; inset:0; border-radius: var(--radius-xl); padding:1px; pointer-events:none;
  background: linear-gradient(140deg, rgba(160,190,235,.55), rgba(160,190,235,.06) 30%, rgba(232,93,26,.0) 60%, rgba(232,93,26,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hero__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 200px 1fr 200px; gap: var(--space-xl); align-items: center; padding: clamp(28px, 5vw, 72px); padding-bottom: clamp(64px, 8vw, 96px); }

.hero__index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.hero__index a { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .14em; color: var(--color-ondark-low); text-decoration: none; display: inline-flex; gap: 10px; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.hero__index a b { color: var(--color-ondark-low); font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.hero__index a:hover { color: var(--color-ondark-high); transform: translateX(4px); }
.hero__index a:hover b { color: var(--color-ember-glow); }

.hero__center { text-align: center; }
.hero__eyebrow { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .22em; text-transform: uppercase; color: var(--color-ondark-low); margin-bottom: var(--space-lg); display: inline-flex; align-items: center; gap: 14px; }
.hero__eyebrow::before, .hero__eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline-bright)); }
.hero__eyebrow::after { background: linear-gradient(90deg, var(--hairline-bright), transparent); }
.hero h1 { font-size: var(--font-hero-xl); letter-spacing: -0.02em; margin-bottom: var(--space-lg); max-width: 21ch; margin-inline: auto; }
.hero__sub { font-family: var(--font-mono); font-size: clamp(.85rem, .75rem + .4vw, 1rem); line-height: 1.8; color: var(--color-ondark-med); max-width: 56ch; margin: 0 auto var(--space-xl); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }

.hero__side { display: flex; flex-direction: column; gap: 22px; text-align: right; }
.hero__fact { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; color: var(--color-ondark-low); }
.hero__fact b { display: block; font-size: 1.35rem; letter-spacing: 0; color: var(--color-ondark-high); font-weight: 500; }
.hero__fact .u { color: var(--color-ember-glow); }

.hero__scroll { position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; color: var(--color-ondark-low); text-transform: uppercase; }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--color-ember-glow), transparent); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------- Marquee trust strip ---------------- */
.marquee { border-block: 1px solid rgba(78,108,158,.2); padding-block: 22px; overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.marquee__track { display: flex; gap: 64px; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--font-mono); font-size: var(--type-body-sm); letter-spacing: .22em; text-transform: uppercase; color: var(--color-ondark-low); white-space: nowrap; display: inline-flex; align-items: center; gap: 64px; }
.marquee span::after { content: "◆"; font-size: 7px; color: var(--color-ember); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- Panels & cards ---------------- */
.panel { position: relative; background: linear-gradient(165deg, #0C1628, #091120); border: 1px solid rgba(90,120,170,.22); border-radius: var(--radius-lg); padding: var(--space-xl); overflow: hidden;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.panel:hover { transform: translateY(-5px); border-color: rgba(140,170,220,.45); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(140,170,220,.12); }
.panel::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity var(--dur-med) var(--ease);
  background: radial-gradient(60% 50% at 50% 0%, rgba(126,160,214,.12), transparent 70%); }
.panel:hover::after { opacity: 1; }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Why-us feature (mono titles, line icons) */
.feature h3 { font-family: var(--font-mono); font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; margin: var(--space-md) 0 var(--space-sm); }
.feature p { font-size: var(--type-body-sm); color: var(--color-ondark-med); margin: 0; }
.feature .icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(126,160,214,.16), rgba(126,160,214,.04)); border: 1px solid rgba(126,160,214,.3); color: #BFD2EC; }
.feature .icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.feature--hot .icon { background: linear-gradient(160deg, rgba(232,93,26,.22), rgba(232,93,26,.05)); border-color: rgba(232,93,26,.45); color: var(--color-ember-glow); }

/* Service pillar cards */
.pillar { display: flex; flex-direction: column; min-height: 300px; }
.pillar__num { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .16em; color: var(--color-ember-glow); margin-bottom: var(--space-lg); }
.pillar h3, .pillar .pillar-heading { font-size: 1.3rem; letter-spacing: -0.01em; }
.pillar p { font-size: var(--type-body-sm); color: var(--color-ondark-med); flex: 1; }
.pillar__link { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .04em; color: var(--color-ember-glow); display: inline-flex; align-items: center; gap: 8px; }
.pillar__link .chev { transition: transform var(--dur-fast) var(--ease); }
.pillar:hover .pillar__link .chev { transform: translateX(4px); }
.pillar > a.cover { position: absolute; inset: 0; z-index: 1; }

/* Framework grid — mono label + centered mark, hover reveals detail */
.fw { min-height: 210px; display: flex; flex-direction: column; padding: var(--space-lg); }
.fw__label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; color: var(--color-ondark-high); font-weight: 500; }
.fw__mark { flex: 1; display: grid; place-items: center; padding: var(--space-md) 0; }
.fw__mark span { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; color: #55637E; text-align: center; line-height: 1.2; transition: color var(--dur-med) var(--ease); }
.fw__mark small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .62rem; letter-spacing: .22em; margin-top: 6px; color: #46536C; }
.fw:hover .fw__mark span { color: #97A9C7; }
.fw__desc { font-size: .82rem; color: var(--color-ondark-med); margin: 0 0 10px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease); }
.fw:hover .fw__desc, .fw:focus-within .fw__desc { max-height: 140px; opacity: 1; }
.fw__go { font-family: var(--font-mono); font-size: .78rem; color: var(--color-ember-glow); letter-spacing: .04em; }

/* Gradient showcase cards (the "compliance by design" style band) */
.show { border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 44px); position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(120,150,200,.16); }
.show h3 { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); max-width: 22ch; }
.show p { font-size: var(--type-body-sm); color: var(--color-ondark-med); max-width: 46ch; margin: 0; }
.show--spot  { background: radial-gradient(120% 140% at 0% 0%, #24437A 0%, #101F3C 38%, #0A1428 72%); }
.show--forge { background: radial-gradient(120% 130% at 100% 0%, #2A2F3B 0%, #14161C 45%, #0B0D12 80%); }
.show--steel { background: linear-gradient(135deg, #14294E 0%, #0E1B36 50%, #0A1428 100%); }
.show--ember { background: radial-gradient(130% 150% at 100% 100%, #4A2410 0%, #241208 42%, #0F0B08 78%); }
.show .ring { position: absolute; right: -70px; bottom: -70px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(232,93,26,.28); }
.show .ring::before, .show .ring::after { content:""; position:absolute; inset:-46px; border-radius:50%; border:1px solid rgba(232,93,26,.16); }
.show .ring::after { inset:-92px; border-color: rgba(232,93,26,.08); }
.phase-result { position: relative; z-index: 1; align-self: flex-start; color: var(--color-ember-glow); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.show .phase-result + h3 { margin-top: auto; }

/* ---------------- Stats — gradient count-up ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl) var(--space-lg); }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); letter-spacing: -0.02em; line-height: 1; }
.stat__label { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ondark-low); margin-top: 10px; display: block; max-width: 24ch; line-height: 1.7; }

/* ---------------- Timeline ---------------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); position: relative; margin-top: var(--space-2xl); counter-reset: ph; }
.timeline::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--color-ember) 0%, rgba(78,108,158,.35) 40%, rgba(78,108,158,.35)); }
.tl-step { position: relative; padding-top: var(--space-lg); }
.tl-step::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; background: var(--color-void); border: 1.5px solid var(--color-ember); border-radius: var(--radius-technical); box-shadow: 0 0 12px rgba(232,93,26,.35); }
.tl-step__phase { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ember-glow); margin-bottom: var(--space-xs); }
.tl-step h3 { font-size: 1.1rem; margin-bottom: var(--space-xs); }
.tl-step p { font-size: var(--type-body-sm); color: var(--color-ondark-med); margin: 0; }

/* ---------------- FAQ ---------------- */
.faq { max-width: 840px; margin-inline: auto; }
.faq details { border: 1px solid rgba(90,120,170,.24); border-radius: var(--radius-md); background: linear-gradient(165deg, #0C1628, #091120); margin-bottom: var(--space-sm); overflow: hidden; transition: border-color var(--dur-fast) var(--ease); }
.faq details:hover { border-color: rgba(140,170,220,.4); }
.faq summary { cursor: pointer; padding: 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--color-ondark-high); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-ember-glow); font-size: 1.25em; transition: transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 22px 20px; color: var(--color-ondark-med); font-size: var(--type-body-sm); }

/* ---------------- CTA band ---------------- */
.cta-frame { position: relative; overflow: hidden; border-radius: var(--radius-xl); text-align: center; padding: clamp(48px, 7vw, 96px) var(--space-xl);
  background: radial-gradient(90% 130% at 50% 120%, rgba(232,93,26,.2), transparent 60%), linear-gradient(160deg, #0C1729, #081020);
  border: 1px solid rgba(120,150,200,.22); }
.cta-frame h2 { font-size: var(--type-display-md); max-width: 24ch; margin-inline: auto; }
.cta-frame .btn { margin-top: var(--space-lg); }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid rgba(78,108,158,.22); position: relative; padding-block: var(--space-2xl) var(--space-lg); font-size: var(--type-body-sm); background: #050912; }
.footer::before { content:""; position:absolute; top:-1px; left: var(--gutter); width: 72px; height: 2px; background: var(--grad-ember); }
.footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.footer__logo img { height: 36px; width: auto; margin-bottom: var(--space-md); }
.footer__logo p { color: var(--color-ondark-low); max-width: 38ch; }
.footer h4, .footer .footer-heading { color: var(--color-ondark-high); font-size: .8rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 var(--space-md); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--color-ondark-med); }
.footer a:hover { color: var(--color-ondark-high); }
.footer__legal { border-top: 1px solid rgba(78,108,158,.18); padding-top: var(--space-md); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .06em; color: var(--color-ondark-low); display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero { position: relative; overflow: hidden; padding-block: var(--space-2xl) var(--space-section);
  background: radial-gradient(80% 100% at 90% -20%, rgba(126,160,214,.1), transparent 55%), radial-gradient(60% 80% at 0% 120%, rgba(232,93,26,.1), transparent 55%); border-bottom: 1px solid rgba(78,108,158,.18); }
.breadcrumbs { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--color-ondark-low); margin-bottom: var(--space-xl); }
.breadcrumbs a { color: var(--color-ondark-med); }
.page-hero h1 { font-size: var(--type-display-lg); max-width: 22ch; }

/* Prose (long-form) */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--type-h2); margin-top: var(--space-2xl); }
.prose h3 { font-size: 1.15rem; margin-top: var(--space-xl); }
.prose ul { color: var(--color-ondark-med); padding-left: 1.15em; }
.prose li { margin-bottom: 10px; }
.prose strong { color: var(--color-ondark-high); font-weight: 600; }
.prose .src { font-family: var(--font-mono); font-size: .78rem; color: var(--color-ondark-low); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ember-glow); border: 1px solid rgba(232,93,26,.4); border-radius: var(--radius-full); padding: 5px 14px; margin: 0 6px 8px 0; }

/* Contact form */
.form { display: grid; gap: var(--space-md); max-width: 560px; }
.form label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ondark-low); display: block; margin-bottom: 7px; }
.form input, .form textarea, .form select { width: 100%; background: #0A1424; border: 1px solid rgba(90,120,170,.3); border-radius: var(--radius-md); color: var(--color-ondark-high); font-family: var(--font-body); font-size: 1rem; padding: 13px 16px; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(190,205,232,.8) 50%), linear-gradient(135deg, rgba(190,205,232,.8) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 42px; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--color-ember); box-shadow: 0 0 0 3px rgba(232,93,26,.18); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__index { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 20px; order: 3; }
  .hero__side { flex-direction: row; justify-content: center; text-align: center; order: 2; flex-wrap: wrap; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #060B18; padding: var(--space-lg) var(--gutter); gap: var(--space-md); border-bottom: 1px solid var(--hairline); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-md); }
  .timeline { grid-template-columns: 1fr; }
  .hero { padding: 10px; min-height: auto; }
  .hero__grid { padding: 40px 22px 56px; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .hero__index { display: none; }
  .hero__scroll { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none !important; }
}

/* ============================================================
   v3 — feedback round: cinematic full-bleed hero, fixed section
   rail, liquid-glass icons, richer indigo canvas, sizing fixes
   ============================================================ */

/* 10/11 · Richer deep-indigo canvas (not black) */
body { background: radial-gradient(130% 90% at 50% -25%, #1B2F5E 0%, #101E3E 42%, #0A1428 72%, #070D1D 100%) fixed; }

/* 2 · Bigger nav logo */
.nav__logo img { height: 44px; }
/* 9 · Bigger footer logo */
.footer__logo img { height: 52px; }

/* 4 · Slimmer buttons, nav group right-aligned */
.btn { padding: 12px 24px; font-size: 0.8rem; }
.nav__cta { padding: 10px 20px; margin-left: var(--space-md); }
.nav__links { gap: var(--space-lg); }

/* ---------------- 5/12 · HERO v3 — full-bleed cinematic ---------------- */
.heroX { position: relative; min-height: calc(100svh - 74px); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }

/* sky — drifting aurora blobs + panning light that "exposes" as it moves */
.heroX__sky { position: absolute; inset: 0; }
.heroX__sky::before, .heroX__sky::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); }
.heroX__sky::before { width: 62vw; height: 46vh; left: -12vw; top: -8vh; background: radial-gradient(closest-side, rgba(96,132,196,.28), transparent 70%); animation: driftA 16s ease-in-out infinite alternate; }
.heroX__sky::after { width: 56vw; height: 42vh; right: -14vw; bottom: -6vh; background: radial-gradient(closest-side, rgba(232,93,26,.22), transparent 70%); animation: driftB 19s ease-in-out infinite alternate; }
@keyframes driftA { to { transform: translate(9vw, 6vh) scale(1.12); } }
@keyframes driftB { to { transform: translate(-8vw, -5vh) scale(1.15); } }
.heroX__pan { position: absolute; inset: -20%; background: radial-gradient(30% 26% at 50% 45%, rgba(190,215,255,.10), transparent 70%); animation: pan 22s ease-in-out infinite alternate; }
@keyframes pan { 0% { transform: translate(-14%, -6%);} 50% { transform: translate(12%, 8%);} 100% { transform: translate(-6%, 12%);} }

/* rays — light shafts from above */
.heroX__rays i { position: absolute; top: -28%; left: 50%; width: 42vw; height: 130vh; transform-origin: 50% 0; filter: blur(44px); opacity: .8; }
.heroX__rays i:nth-child(1) { background: linear-gradient(180deg, rgba(150,185,240,.16), transparent 62%); transform: rotate(-24deg); animation: ray 15s ease-in-out infinite alternate; }
.heroX__rays i:nth-child(2) { background: linear-gradient(180deg, rgba(232,93,26,.13), transparent 58%); transform: rotate(14deg); animation: ray 19s ease-in-out infinite alternate-reverse; }
.heroX__rays i:nth-child(3) { background: linear-gradient(180deg, rgba(190,210,245,.09), transparent 55%); transform: rotate(-4deg); animation: ray 24s ease-in-out infinite alternate; }
@keyframes ray { from { transform: rotate(var(--r, -24deg)) translateX(-3vw); opacity:.55; } to { transform: rotate(calc(var(--r, -24deg) + 8deg)) translateX(3vw); opacity:.95; } }
.heroX__rays i:nth-child(1) { --r: -24deg; } .heroX__rays i:nth-child(2) { --r: 14deg; } .heroX__rays i:nth-child(3) { --r: -4deg; }

/* faint master grid + traveling light runners (image_12) */
.heroX__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(140,165,205,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(140,165,205,.07) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(90% 85% at 50% 40%, black 35%, transparent 80%); -webkit-mask-image: radial-gradient(90% 85% at 50% 40%, black 35%, transparent 80%); }
.gl { position: absolute; pointer-events: none; }
.gl--h { height: 1px; width: 200px; top: calc(72px * 4); left: 0; background: linear-gradient(90deg, transparent, rgba(251,146,60,.85), transparent); animation: runH 8s linear infinite; box-shadow: 0 0 12px rgba(251,146,60,.5); }
.gl--h2 { height: 1px; width: 160px; top: calc(72px * 7); left: 0; background: linear-gradient(90deg, transparent, rgba(160,190,235,.8), transparent); animation: runH 11s linear infinite 3s; }
.gl--v { width: 1px; height: 170px; left: calc(72px * 5); top: 0; background: linear-gradient(180deg, transparent, rgba(251,146,60,.7), transparent); animation: runV 10s linear infinite 1.5s; }
@keyframes runH { from { transform: translateX(-220px); } to { transform: translateX(100vw); } }
@keyframes runV { from { transform: translateY(-190px); } to { transform: translateY(100vh); } }

/* floor — perspective grid with ember lines running toward viewer (image_13) */
.heroX__floor { position: absolute; left: -25%; right: -25%; bottom: -6%; height: 46%; transform: perspective(720px) rotateX(63deg); transform-origin: 50% 0;
  background-image: linear-gradient(rgba(232,93,26,.42) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(140,165,205,.20) 1px, transparent 1px);
  background-size: 68px 46px; animation: floorrun 4.5s linear infinite;
  mask-image: linear-gradient(to bottom, transparent 0%, black 34%, black 78%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 34%, black 78%, transparent 100%); }
@keyframes floorrun { to { background-position: 0 46px, 0 0; } }
.heroX__horizon { position: absolute; left: 8%; right: 8%; bottom: 33%; height: 2px; background: linear-gradient(90deg, transparent, rgba(232,93,26,.7), rgba(251,146,60,.95), rgba(232,93,26,.7), transparent); filter: blur(1px); box-shadow: 0 0 34px 6px rgba(232,93,26,.28); }

/* content */
.heroX__content { position: relative; z-index: 3; max-width: 980px; padding-inline: var(--gutter); padding-bottom: 12vh; }
.heroX h1 { font-size: var(--font-hero-xl); letter-spacing: -0.02em; margin: 0 auto var(--space-lg); max-width: 21ch; }
.heroX__sub { font-family: var(--font-mono); font-size: clamp(.85rem, .75rem + .4vw, 1rem); line-height: 1.85; color: var(--color-ondark-med); max-width: 58ch; margin: 0 auto var(--space-xl); }
.heroX__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.heroX__chips { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; margin-top: var(--space-2xl); font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ondark-low); }
.heroX__chips span { display: inline-flex; align-items: center; gap: 9px; }
.heroX__chips span::before { content: "◆"; font-size: 6px; color: var(--color-ember); }
.heroX .hero__eyebrow { margin-bottom: var(--space-lg); }
.heroX .hero__scroll { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; }

/* ---------------- 3 · Fixed section rail (scrollspy) — our own design ---------------- */
.rail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 20px; }
.rail a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.rail i { width: 9px; height: 9px; border: 1.5px solid var(--hairline-bright); transform: rotate(45deg); transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
.rail span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ondark-low); opacity: 0; transform: translateX(-8px); transition: all var(--dur-fast) var(--ease); white-space: nowrap; }
.rail a:hover i { border-color: var(--color-ember-glow); }
.rail a:hover span { opacity: 1; transform: none; color: var(--color-ondark-med); }
.rail a.is-active i { background: var(--color-ember); border-color: var(--color-ember); box-shadow: 0 0 12px rgba(232,93,26,.65); }
.rail a.is-active span { opacity: 1; transform: none; color: var(--color-ondark-high); }
@media (max-width: 1280px) { .rail { display: none; } }

/* ---------------- 6 · Liquid-glass icons ---------------- */
.feature .icon { width: 58px; height: 58px; border-radius: 18px; position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 46%, rgba(120,150,200,.12));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(8,16,34,.45), 0 12px 28px rgba(0,0,0,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #DDE8FA; }
.feature .icon::before { content: ""; position: absolute; top: 3px; left: 10%; right: 10%; height: 42%; border-radius: 12px;
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.feature .icon::after { content: ""; position: absolute; inset: -14px; border-radius: 30px; z-index: -1;
  background: radial-gradient(closest-side, rgba(96,132,196,.28), transparent 75%); filter: blur(10px); }
.feature .icon svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.feature--hot .icon { color: var(--color-ember-glow); border-color: rgba(251,146,60,.5); }
.feature--hot .icon::after { background: radial-gradient(closest-side, rgba(232,93,26,.4), transparent 75%); }

/* honeypot */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .heroX__sky::before, .heroX__sky::after, .heroX__pan, .heroX__rays i, .gl, .heroX__floor { animation: none !important; }
}

/* ============================================================
   v3.1 — precision pass against supplied brand references:
   circuit-trace corners (placeholder identity), reflective
   floor streaks, richer royal-navy canvas
   ============================================================ */
body { background: radial-gradient(130% 95% at 50% -25%, #1E3466 0%, #13234A 40%, #0B1730 70%, #070E20 100%) fixed; }

/* circuit traces — top corners of the hero, echoing the brand placeholder */
.heroX__trace { position: absolute; top: 26px; width: min(30vw, 430px); height: 190px; opacity: .5; z-index: 1; }
.heroX__trace--l { left: 18px; }
.heroX__trace--r { right: 18px; transform: scaleX(-1); }
.heroX__trace path { stroke: rgba(150,175,220,.35); stroke-width: 1.2; fill: none; }
.heroX__trace .tr-e { stroke: rgba(232,93,26,.45); }
.heroX__trace circle { fill: none; stroke: rgba(150,175,220,.45); stroke-width: 1.2; }
.heroX__trace .nd-e { stroke: rgba(251,146,60,.8); animation: nodepulse 3.4s ease-in-out infinite; }
.heroX__trace .nd-e2 { animation-delay: 1.7s; }
@keyframes nodepulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* reflective floor streaks — vertical light reflections under the horizon */
.heroX__reflect { position: absolute; left: 0; right: 0; bottom: 0; height: 33%; pointer-events: none; }
.heroX__reflect i { position: absolute; top: 0; width: 3px; filter: blur(3px); opacity: .5; animation: shimmer 5s ease-in-out infinite alternate; }
.heroX__reflect i:nth-child(1) { left: 18%; height: 78%; background: linear-gradient(rgba(251,146,60,.55), transparent); animation-delay: 0s; }
.heroX__reflect i:nth-child(2) { left: 34%; height: 52%; background: linear-gradient(rgba(190,210,245,.4), transparent); animation-delay: 1.2s; }
.heroX__reflect i:nth-child(3) { left: 50%; height: 88%; background: linear-gradient(rgba(232,93,26,.5), transparent); animation-delay: .6s; }
.heroX__reflect i:nth-child(4) { left: 66%; height: 56%; background: linear-gradient(rgba(190,210,245,.35), transparent); animation-delay: 2s; }
.heroX__reflect i:nth-child(5) { left: 82%; height: 74%; background: linear-gradient(rgba(251,146,60,.45), transparent); animation-delay: 1.6s; }
@keyframes shimmer { from { opacity: .3; transform: scaleY(.92); transform-origin: top; } to { opacity: .65; transform: scaleY(1.05); transform-origin: top; } }

@media (max-width: 900px) { .heroX__trace { display: none; } }
@media (prefers-reduced-motion: reduce) { .heroX__trace .nd-e, .heroX__reflect i { animation: none !important; } }

/* ============================================================
   v4 — quality pass: blended header, compact nav, overlap fixes,
   effect redistribution, timeline progress, persistent rail
   ============================================================ */

/* 1 · Header blends into the hero; gains surface only on scroll */
.nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-condensed { background: rgba(7,13,28,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(78,108,158,.22); }
.nav.is-open { background: rgba(7,13,28,.95); }
.nav__inner { height: 66px; }
.nav.is-condensed .nav__inner { height: 58px; }
.nav__logo img { height: 36px; }
.nav__links { gap: 26px; }
.nav__links a { font-size: 0.85rem; white-space: nowrap; }
.nav__cta { padding: 9px 18px; font-size: 0.72rem; letter-spacing: .05em; white-space: nowrap; }

/* Global scale: tighter cards & panels */
.panel { padding: var(--space-lg); border-radius: 14px; }
.pillar { min-height: 230px; }
.pillar h3, .pillar .pillar-heading { font-size: 1.15rem; }
.show { min-height: 230px; padding: clamp(20px, 2.4vw, 32px); }
.show h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.feature h3 { font-size: 1rem; }
.feature .icon { width: 50px; height: 50px; border-radius: 15px; }
.feature .icon svg { width: 21px; height: 21px; }
.stat__num { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); }
.fw { min-height: 180px; }
.fw__mark span { font-size: 1.3rem; }
.faq summary { font-size: 0.95rem; padding: 15px 20px; }
.lede { font-size: var(--type-body-lg); }
.heroX__sub { font-size: clamp(.82rem, .74rem + .35vw, .95rem); }

/* 2/3 · Hero geometry: floor sits BELOW the content, scroll cue in flow */
.heroX__content { padding-bottom: 0; max-width: 900px; }
.heroX { padding-bottom: clamp(140px, 22vh, 220px); }
.heroX__floor { height: 34%; bottom: -8%; }
.heroX__horizon { bottom: 21%; }
.heroX__reflect { height: 22%; }
.heroX .hero__scroll { position: static; transform: none; margin: 44px auto 0; }
.heroX__chips { margin-top: var(--space-xl); }

/* 7 · Effect redistribution: hero keeps sky/rays/floor only */
.heroX__grid, .heroX .gl, .heroX__pan { display: none; }
.heroX__trace { display: none; }   /* traces move to content sections */

/* circuit traces as section decor (mission) */
.band { overflow: hidden; }
.trace-sec { position: absolute; top: 24px; right: 0; width: min(30vw, 400px); height: 180px; opacity: .4; pointer-events: none; }
.trace-sec path { stroke: rgba(150,175,220,.35); stroke-width: 1.2; fill: none; }
.trace-sec .tr-e { stroke: rgba(232,93,26,.45); }
.trace-sec circle { fill: none; stroke: rgba(150,175,220,.45); stroke-width: 1.2; }
.trace-sec .nd-e { stroke: rgba(251,146,60,.8); animation: nodepulse 3.4s ease-in-out infinite; }
@media (max-width: 900px) { .trace-sec { display: none; } }

/* methodology band: subtle grid + one traveling light */
.band--method::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(140,165,205,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,165,205,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(85% 90% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(85% 90% at 50% 50%, black 30%, transparent 80%); }
.band--method .gl--h { top: 30%; animation-duration: 9s; }

/* 5 · Timeline: looping phase-progress line + sequential node glow */
.timeline::after { content: ""; position: absolute; top: 7px; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, rgba(232,93,26,.1), var(--color-ember) 70%, var(--color-ember-glow));
  box-shadow: 0 0 10px rgba(232,93,26,.5); animation: tlprog 9s cubic-bezier(.4,.05,.4,1) infinite; }
@keyframes tlprog { 0% { width: 0; opacity: 1; } 82% { width: 100%; opacity: 1; } 95% { width: 100%; opacity: 0; } 100% { width: 0; opacity: 0; } }
.tl-step::before { animation: nodeglow 9s ease-in-out infinite; }
.tl-step:nth-child(1)::before { animation-delay: .2s; } .tl-step:nth-child(2)::before { animation-delay: 1.9s; }
.tl-step:nth-child(3)::before { animation-delay: 3.6s; } .tl-step:nth-child(4)::before { animation-delay: 5.3s; }
.tl-step:nth-child(5)::before { animation-delay: 7s; }
@keyframes nodeglow { 0%, 4%, 100% { background: var(--color-void); box-shadow: 0 0 12px rgba(232,93,26,.3); }
  8%, 16% { background: var(--color-ember); box-shadow: 0 0 18px rgba(232,93,26,.9); } 24% { background: var(--color-void); } }
@media (max-width: 1024px) { .timeline::after { display: none; } .tl-step::before { animation: none; } }

/* 4 · Rail: always present, labels always visible */
.rail { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.rail.rail--on { opacity: 1; pointer-events: auto; }
.rail span { opacity: .5; transform: none; }
.rail a:hover span { opacity: .85; }
.rail a.is-active span { opacity: 1; }

/* 6 · Remove the stray ember segment above the footer logo */
.footer::before { display: none; }

@media (prefers-reduced-motion: reduce) { .timeline::after, .tl-step::before { animation: none !important; } }

/* v4.1 — structural fixes from geometry assertions */
.heroX { flex-direction: column; justify-content: center; }
/* collapse nav to menu earlier so links can never crowd or wrap */
@media (max-width: 1120px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(7,13,28,.97); padding: var(--space-lg) var(--gutter); gap: var(--space-md); border-bottom: 1px solid var(--hairline); }
}

/* rail label safety: full labels only where there is room */
@media (max-width: 1599px) {
  .rail span { opacity: 0; transform: translateX(-8px); }
  .rail a:hover span, .rail a.is-active span { opacity: 1; transform: none; }
}

/* ============================================================
   v5 — video hero (per spec), uniform ring icons, persistent
   labeled rail, ambient section animation, single slow sweep
   ============================================================ */

/* --- 1 · Icons: uniform circular ring w/ ember arc (apexagen.com reference) --- */
.feature .icon, .feature--hot .icon { width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.10), rgba(120,150,200,.05) 55%, rgba(10,20,40,.2));
  border: 1px solid rgba(205,222,248,.30); color: #E8EFFB;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.feature .icon::before { display: none; }
.feature .icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: 0; filter: none; background:
  conic-gradient(from 300deg, var(--color-ember-glow) 0deg, var(--color-ember) 58deg, transparent 84deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px)); }
.feature--hot .icon::after { background: conic-gradient(from 300deg, var(--color-ember-glow) 0deg, var(--color-ember) 58deg, transparent 84deg 360deg); }
.feature .icon svg { position: relative; z-index: 1; width: 24px; height: 24px; }

/* --- 2 · Timeline: one sweep, slower --- */
.timeline::after { animation-duration: 16s; }
.tl-step:nth-child(1)::before { animation-duration: 16s; animation-delay: .4s; }
.tl-step:nth-child(2)::before { animation-duration: 16s; animation-delay: 3.4s; }
.tl-step:nth-child(3)::before { animation-duration: 16s; animation-delay: 6.4s; }
.tl-step:nth-child(4)::before { animation-duration: 16s; animation-delay: 9.4s; }
.tl-step:nth-child(5)::before { animation-duration: 16s; animation-delay: 12.4s; }
.band--method .gl { display: none; }   /* no second moving bar near the timeline */

/* --- 3 · Rail: visible with numbered labels from load, wider support --- */
.rail { left: 18px; gap: 22px; }
.rail span { opacity: .55; transform: none; font-size: 9.5px; letter-spacing: .18em; }
.rail b { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .12em; color: var(--color-ondark-low); }
.rail a.is-active b { color: var(--color-ember-glow); }
@media (max-width: 1599px) { .rail span { opacity: .55; transform: none; } }  /* labels always on */
@media (max-width: 1280px) { .rail { display: flex; } }
@media (max-width: 1023px) { .rail { display: none; } }
/* keep content clear of the rail on mid-width screens */
@media (min-width: 1024px) and (max-width: 1699px) {
  .has-rail main .container { padding-left: 158px; }
  .has-rail .heroV__content { padding-left: calc(var(--gutter) + 138px); }
}

/* --- 4 · Ambient motion through the scroll sections --- */
.dots { animation: dotsdrift 70s linear infinite; }
@keyframes dotsdrift { to { background-position: 340px 170px; } }
.band__glow { position: absolute; width: 46vw; height: 40vh; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .8; }
.band__glow--steel { background: radial-gradient(closest-side, rgba(96,132,196,.14), transparent 70%); top: -10%; right: -8%; animation: banddriftA 22s ease-in-out infinite alternate; }
.band__glow--ember { background: radial-gradient(closest-side, rgba(232,93,26,.10), transparent 70%); bottom: -12%; left: -8%; animation: banddriftB 26s ease-in-out infinite alternate; }
@keyframes banddriftA { to { transform: translate(-7vw, 6vh) scale(1.12); } }
@keyframes banddriftB { to { transform: translate(7vw, -5vh) scale(1.1); } }

/* --- 5 · HERO v5: full-screen video, content bottom-left, liquid glass --- */
.heroV { position: relative; min-height: calc(100svh - 66px); display: flex; overflow: hidden; }
.heroV__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .8s ease; }
.heroV.video-on .heroV__video { opacity: 1; }
.heroV__fallback { position: absolute; inset: 0; z-index: 0; }
.heroV.video-on .heroV__fallback { opacity: .25; }
.heroV__content { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(48px, 7vh, 84px); max-width: var(--layout-wide); margin: 0 auto; }
.heroV__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: end; }
.heroV h1 { font-size: var(--font-hero-xl); letter-spacing: -0.03em; margin: 0 0 var(--space-md); max-width: 20ch; text-align: left; }
.heroV h1 .ch { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(5px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.heroV h1 .ch.in, .no-js .heroV h1 .ch { opacity: 1; transform: none; filter: blur(0); }
.heroV__sub { font-family: var(--font-mono); font-size: clamp(.82rem, .74rem + .3vw, .95rem); color: var(--color-ondark-med); max-width: 52ch; margin: 0 0 var(--space-lg); text-align: left; }
.heroV__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.heroV__eyebrow { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .2em; text-transform: uppercase; color: var(--color-ondark-low); margin-bottom: var(--space-md); text-align: left; }
.fadein { opacity: 0; transition: opacity 1s ease; }
.fadein.in, .no-js .fadein { opacity: 1; }

.liquid-glass { background: rgba(5,10,22,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1); position: relative; overflow: hidden; border: none; }
.liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.1) 80%, rgba(255,255,255,.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.heroV__tag { border-radius: 14px; padding: 14px 22px; font-family: var(--font-mono); font-size: clamp(.85rem, .8rem + .3vw, 1.05rem); letter-spacing: .04em; color: var(--color-ondark-high); white-space: nowrap; }
.btn--glass { border-radius: var(--radius-full); color: var(--color-ondark-high); }
.btn--glass:hover { background: rgba(255,255,255,.92); color: var(--color-ink); }

@media (max-width: 900px) {
  .heroV__grid { grid-template-columns: 1fr; }
  .heroV__tag { justify-self: start; white-space: normal; }
  .heroV h1 { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .heroV h1 .ch { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fadein { opacity: 1 !important; }
  .dots, .band__glow--steel, .band__glow--ember { animation: none !important; }
}

/* ============================================================
   v6 — refinement spec: branded hero scene, sectional sidebar,
   run-once methodology, apex glass system, framework cards
   ============================================================ */

/* --- §7 Apex glass system (reusable + applied to existing components) --- */
.apex-glass, .apex-glass-card, .panel, .show, .faq details {
  background: linear-gradient(145deg, rgba(11,27,53,.72), rgba(5,10,20,.88));
  border: 1px solid var(--apex-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 80px rgba(0,0,0,.32);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.apex-glass-card, .panel, .show { border-radius: 20px; position: relative; overflow: hidden; }
.apex-glass-card::before, .panel::before, .show::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .75; width: auto; height: auto; transition: none; background:
    radial-gradient(circle at 20% 0%, rgba(255,122,26,.14), transparent 34%),
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 32%);
}
.show .ring { z-index: 1; }
.apex-glass-card:hover, .panel:hover, .show:hover {
  transform: translateY(-3px);
  border-color: rgba(255,122,26,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 90px rgba(0,0,0,.38), 0 0 36px rgba(244,90,26,.18);
}
.panel:hover::after { opacity: .75; }
.apex-gradient-border { position: relative; }
.apex-gradient-border::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,122,26,.5), rgba(78,163,255,.25) 45%, rgba(216,226,242,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.apex-glass-button, .btn--ghost, .btn--glass {
  background: linear-gradient(145deg, rgba(11,27,53,.6), rgba(5,10,20,.8));
  border: 1px solid var(--apex-border); color: var(--apex-silver);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 26px rgba(0,0,0,.3);
}
.apex-glass-button:hover, .btn--ghost:hover, .btn--glass:hover {
  border-color: rgba(255,122,26,.45); color: #fff; background: linear-gradient(145deg, rgba(14,32,60,.7), rgba(6,12,24,.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.35), 0 0 24px rgba(244,90,26,.22);
}
.btn--primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,122,26,.4), 0 8px 28px rgba(232,93,26,.4); }
.apex-glow-icon svg, .feature .icon svg { filter: drop-shadow(0 0 6px rgba(244,90,26,.35)); color: var(--apex-silver); }

/* --- §8 Framework cards: delivery-experience style (desc always visible) --- */
.fw { min-height: 0; }
.fw__mark { display: none; }
.fw__label { font-size: .85rem; margin-bottom: 10px; }
.fw__desc { max-height: none; opacity: 1; overflow: visible; flex: 1; font-size: .84rem; }

/* --- §5 sidebar hidden on mobile handled by width query; opacity via JS --- */

/* --- §6 Methodology: run once on enter, 10s, hold --- */
.timeline::after { animation: none; width: 0; opacity: 1; }
.timeline.run::after { animation: tlonce 10s var(--ease) forwards; }
@keyframes tlonce { from { width: 0; } to { width: 100%; } }
.tl-step::before { animation: none; }
.timeline.run .tl-step::before { animation: nodeonce .9s var(--ease) forwards; }
.timeline.run .tl-step:nth-child(1)::before { animation-delay: .3s; }
.timeline.run .tl-step:nth-child(2)::before { animation-delay: 2.3s; }
.timeline.run .tl-step:nth-child(3)::before { animation-delay: 4.5s; }
.timeline.run .tl-step:nth-child(4)::before { animation-delay: 6.7s; }
.timeline.run .tl-step:nth-child(5)::before { animation-delay: 9s; }
@keyframes nodeonce { to { background: var(--color-ember); box-shadow: 0 0 16px rgba(232,93,26,.8); } }

/* --- §2 HERO: Apexagen-branded animated scene (no video) --- */
.heroV__video { display: none; }
.heroA { position: absolute; inset: 0; overflow: hidden; }
.heroA__base { position: absolute; inset: 0; background:
  radial-gradient(85% 110% at 82% 30%, rgba(43,108,191,.20), transparent 55%),
  radial-gradient(60% 80% at 90% 85%, rgba(244,90,26,.12), transparent 60%),
  linear-gradient(115deg, #04070F 0%, var(--apex-navy) 48%, var(--apex-navy-2) 100%); }
.heroA__grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(140,165,205,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(140,165,205,.08) 1px, transparent 1px);
  background-size: 68px 68px; animation: dotsdrift 90s linear infinite;
  mask-image: radial-gradient(75% 90% at 78% 45%, black 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 90% at 78% 45%, black 20%, transparent 78%); }
.heroA__svg { position: absolute; right: 0; top: 0; height: 100%; width: min(62vw, 1100px); }
.heroA__svg .tr { stroke: rgba(160,185,225,.22); stroke-width: 1.2; fill: none; }
.heroA__svg .tr--e { stroke: rgba(244,90,26,.3); }
.heroA__svg .node { fill: rgba(216,226,242,.4); }
.heroA__svg .node--p { animation: nodepulse 4s ease-in-out infinite; fill: rgba(255,122,26,.8); }
.heroA__svg .pulse { fill: var(--apex-orange-hot); filter: drop-shadow(0 0 6px rgba(255,122,26,.9)); }
.heroA__svg .amark-fill { fill: url(#agrad-silver); opacity: .10; }
.heroA__svg .amark-stroke { stroke: url(#agrad-ember); stroke-width: 3; fill: none; opacity: .5;
  filter: drop-shadow(0 0 14px rgba(244,90,26,.35)); animation: abreathe 9s ease-in-out infinite alternate; }
@keyframes abreathe { from { opacity: .35; } to { opacity: .65; } }
.heroA__vignette { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(4,7,15,.88) 0%, rgba(4,7,15,.55) 30%, transparent 62%),
  linear-gradient(0deg, rgba(4,7,15,.72) 0%, transparent 34%); }
@media (max-width: 900px) { .heroA__svg { width: 100vw; opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .heroA__grid, .heroA__svg .node--p, .heroA__svg .amark-stroke { animation: none !important; }
  .heroA__svg .pulse { display: none; }
  .timeline.run::after { animation-duration: 1ms; } .timeline.run .tl-step::before { animation-duration: 1ms; animation-delay: 0s !important; }
}

/* proof points (About) replace numeric stats */
.proofs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.proof { padding-left: var(--space-lg); border-left: 1px solid var(--border-dark); }
.proof p { margin: 0; color: var(--color-ondark-med); font-size: var(--type-body-sm); }
.proof .k { display: block; font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ember-glow); margin-bottom: 8px; }
@media (max-width: 1024px) { .proofs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .proofs { grid-template-columns: 1fr; } }

/* ============================================================
   v8 — REFINEMENT & POLISH PASS (authoritative, loaded last)
   Targeted corrections per the v8 brief. No restructuring.
   ============================================================ */

/* ---- §1 Header: logo left, nav + CTA as ONE right-aligned group ---- */
.nav__inner { max-width: 1520px; gap: var(--space-xl); }
.nav__logo { flex: none; }
/* the whole nav element + CTA become one right cluster */
.nav__inner > nav[aria-label="Primary"] { margin-left: auto; }
.nav__links { margin: 0; gap: 30px; }
.nav__cta { margin-left: 34px; flex: none; }
.nav__links a { font-size: 0.85rem; }

/* ---- §2 Header scroll state: navy blend (not flat black) ---- */
.nav.is-condensed {
  background: var(--nav-scrolled);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: rgba(96,132,196,.24);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}

/* ---- §3/§4 Hero typography: smaller, more premium; sub in SANS ---- */
.heroV h1 { letter-spacing: -0.022em; line-height: 1.06; max-width: 30ch; margin-bottom: var(--space-lg); }
.heroV__sub {
  font-family: var(--font-body);        /* brief: body copy is sans, not mono */
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.6; letter-spacing: 0; color: var(--color-slate-300);
  max-width: 46ch; margin-bottom: var(--space-xl);
}
.heroV__eyebrow { letter-spacing: .22em; font-size: var(--type-meta); color: var(--color-ondark-low); }
.heroV__content { padding-bottom: clamp(56px, 8vh, 96px); }

/* ---- §3 Global body/heading proportion ---- */
body { line-height: var(--lh-body); }
.lede { font-size: var(--type-body-lg); line-height: 1.65; color: var(--color-slate-300); }
.band__head { max-width: 720px; }
.h-section, .h-display { line-height: 1.14; letter-spacing: -0.015em; }

/* ---- §6 Mission: reduced headline, tighter paragraphs ---- */
#mission-h { font-size: var(--type-display-md); max-width: 20ch; line-height: 1.16; }
#mission .grid--2 { gap: var(--space-2xl); }
#mission .lede { font-size: var(--type-body-md); line-height: 1.7; color: var(--color-slate-300); max-width: 54ch; }

/* ---- §7 Why Us: premium glass icon orbs, silver line icons, ember arc ---- */
.feature { text-align: left; }
.feature .icon, .feature--hot .icon {
  width: 68px; height: 68px; border-radius: 999px; position: relative;
  display: grid; place-items: center; margin-bottom: var(--space-md);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(145deg, rgba(11,27,53,.9), rgba(5,10,20,.97));
  border: 1px solid rgba(216,226,242,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 50px rgba(0,0,0,.34),
    0 0 28px rgba(43,108,191,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--apex-silver);
}
/* ember arc sweeping the top-right edge */
.feature .icon::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: 0;
  background: conic-gradient(from 214deg, rgba(244,90,26,.95), rgba(255,122,26,.55) 20deg, transparent 40deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 2px));
  opacity: .9; filter: none;
}
.feature .icon::before { display: none; }
.feature .icon svg { position: relative; z-index: 1; width: 26px; height: 26px; stroke-width: 1.5;
  color: var(--apex-silver); filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.feature--hot .icon { border-color: rgba(255,122,26,.34); }
.feature--hot .icon svg { color: #FFD9BE; filter: drop-shadow(0 0 8px rgba(244,90,26,.5)); }
.feature--hot .icon::after { background: conic-gradient(from 214deg, rgba(255,150,80,1), rgba(244,90,26,.7) 22deg, transparent 46deg, transparent 360deg); }
.feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none; margin: 0 0 var(--space-xs); }
.feature p { font-size: var(--type-body-sm); line-height: 1.62; }

/* ---- §8/§15 Unified card system: Services, Frameworks, feature panels ---- */
.panel, .fw, .apex-glass-card {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.panel:hover, .fw:hover, .apex-glass-card:hover, .panel:focus-within, .fw:focus-within {
  transform: translateY(-4px);
  border-color: var(--card-border-hot);
  box-shadow: var(--card-shadow-hot);
}
/* restrained orange top-edge illumination on hover (shared language) */
.panel::before, .fw::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.85), transparent);
  opacity: 0; transition: opacity 320ms var(--ease); pointer-events: none;
}
.panel:hover::before, .fw:hover::before, .panel:focus-within::before, .fw:focus-within::before { opacity: 1; }
.fw { padding: var(--space-lg); position: relative; overflow: hidden; }
.pillar h3, .pillar .pillar-heading { font-size: var(--type-card-title); line-height: 1.28; }
.pillar p, .fw__desc { font-size: var(--type-body-sm); line-height: 1.6; }

/* Advisory service groups reuse the site's panel hover and reveal treatment. */
.advisory-services { margin-block: 0 var(--space-3xl); }
.advisory-group + .advisory-group { margin-top: var(--space-2xl); }
.advisory-group h2 { margin: 0 0 var(--space-lg); }
.advisory-group .grid--3 { grid-template-columns: repeat(3, minmax(0, 280px)); }
.advisory-card {
  display: flex; flex-direction: column; height: 240px;
  padding: var(--space-lg); color: var(--color-ondark-high);
  text-decoration: none;
}
.advisory-card h3 {
  margin: 0 0 var(--space-sm); font-family: var(--font-mono);
  font-size: .85rem; font-weight: 500; letter-spacing: .08em; line-height: 1.4;
}
.advisory-card p {
  margin: 0 0 10px; color: var(--color-ondark-med);
  font-size: .8rem; line-height: 1.55; flex: 1;
}
.advisory-card__link {
  margin-top: auto; color: var(--color-ember-glow); font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .04em;
}
.advisory-card:hover { text-decoration: none; }
.advisory-card:hover .chev, .advisory-card:focus-visible .chev { transform: translateX(4px); }
.advisory-card:focus-visible { outline: 2px solid var(--color-ember-glow); outline-offset: 3px; }
@media (max-width: 900px) { .advisory-group .grid--3 { grid-template-columns: repeat(2, minmax(0, 280px)); } }
@media (max-width: 600px) { .advisory-group .grid--3 { grid-template-columns: minmax(0, 280px); } }

/* Managed security overview: two clear paths into the detailed services. */
.managed-offering { display: flex; flex-direction: column; min-height: 260px; color: var(--color-ondark-high); text-decoration: none; }
.managed-offering h3 { font-size: clamp(1.35rem, 1.1rem + .6vw, 1.65rem); line-height: 1.3; }
.managed-offering p { color: var(--color-ondark-med); font-size: var(--type-body-sm); line-height: 1.6; flex: 1; max-width: 48ch; }
.managed-offering__link { margin-top: var(--space-md); color: var(--color-ember-glow); font-family: var(--font-mono); font-size: .85rem; letter-spacing: .04em; }
.managed-offering:hover { text-decoration: none; }
.managed-offering:hover .chev, .managed-offering:focus-visible .chev { transform: translateX(4px); }
.managed-offering:focus-visible { outline: 2px solid var(--color-ember-glow); outline-offset: 3px; }
@media (max-width: 720px) { .managed-offering { min-height: 220px; } }

/* Technology partner hub and solution landing pages. */
.partner-hero .container { position: relative; z-index: 2; }
.partner-hero h1 { max-width: 19ch; }
.partner-hero .lede { max-width: 68ch; }
.partner-hero::after {
  content: ""; position: absolute; width: min(46vw, 680px); aspect-ratio: 1; right: -10vw; top: 16%;
  border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, rgba(36,67,122,.35), rgba(12,22,40,.04) 63%, transparent 70%);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.partner-band { position: relative; overflow: hidden; }
.partner-band--soft { background: linear-gradient(180deg, rgba(13,27,51,.38), rgba(6,12,24,.2)); border-block: 1px solid rgba(90,120,170,.12); }
.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: var(--space-lg); align-items: stretch; }
.partner-card { min-height: 280px; display: flex; flex-direction: column; color: var(--color-ondark-high); text-decoration: none; isolation: isolate; }
.partner-card::after { opacity: 1; z-index: -1; }
.partner-card--atsoc::after { background: radial-gradient(80% 60% at 20% 0%, rgba(41,111,191,.27), transparent 75%); }
.partner-card--upas::after { background: radial-gradient(80% 60% at 20% 0%, rgba(36,151,148,.22), transparent 75%); }
.partner-card--fudo::after { background: radial-gradient(80% 60% at 20% 0%, rgba(132,91,188,.25), transparent 75%); }
.partner-card--nozomi::after { background: radial-gradient(80% 60% at 20% 0%, rgba(28,157,191,.25), transparent 75%); }
.partner-kicker, .solution-number { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ember-glow); }
.partner-card h3 { font-family: var(--font-mono); font-size: 1.02rem; line-height: 1.45; letter-spacing: .04em; margin: var(--space-md) 0; max-width: 24ch; }
.partner-card p { color: var(--color-ondark-med); font-size: var(--type-body-sm); line-height: 1.65; margin: 0; flex: 1; }
.partner-link { color: var(--color-ember-glow); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; display: inline-flex; gap: 8px; align-items: center; margin-top: var(--space-lg); }
.partner-card:hover, .partner-card:focus-visible { text-decoration: none; }
.partner-card:hover .partner-link span { transform: translateX(4px); }
.partner-card .partner-link span { transition: transform var(--dur-fast) var(--ease); }
.partner-spotlight { margin-top: var(--space-2xl); padding: clamp(26px,4vw,46px); border: 1px solid rgba(120,150,200,.2); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); background: radial-gradient(80% 120% at 100% 100%, rgba(232,93,26,.15), transparent 62%), linear-gradient(150deg,#0d192c,#08101f); }
.partner-spotlight h2 { margin: var(--space-xs) 0 var(--space-sm); }
.partner-spotlight p { color: var(--color-ondark-med); max-width: 66ch; margin: 0; }
.partner-spotlight .btn { flex-shrink: 0; }
.ecosystem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.ecosystem-card { min-height: 220px; padding: var(--space-lg); }
.ecosystem-card span { font-family: var(--font-mono); color: var(--color-ember-glow); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; }
.ecosystem-card h3 { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .06em; margin: var(--space-md) 0; }
.ecosystem-card p { color: var(--color-ondark-med); font-size: .84rem; line-height: 1.62; margin: 0; }

.solution-story { padding-block: var(--space-section); border-top: 1px solid rgba(90,120,170,.16); scroll-margin-top: 86px; position: relative; overflow: hidden; }
.solution-story::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.solution-story--atsoc::before { background: radial-gradient(55% 100% at 0% 50%, rgba(31,87,157,.18), transparent 72%); }
.solution-story--upas::before { background: radial-gradient(55% 100% at 100% 50%, rgba(36,151,148,.14), transparent 72%); }
.solution-story--fudo::before { background: radial-gradient(55% 100% at 0% 50%, rgba(124,83,177,.16), transparent 72%); }
.solution-story--nozomi::before { background: radial-gradient(55% 100% at 100% 50%, rgba(28,157,191,.17), transparent 72%); }
.solution-story__grid { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: clamp(48px,8vw,120px); align-items: center; }
.solution-story h2 { font-size: var(--type-display-md); max-width: 18ch; margin: var(--space-sm) 0 var(--space-lg); }
.solution-story .lede { max-width: 57ch; }
.solution-list { border-left: 1px solid rgba(126,160,214,.26); padding-left: var(--space-xl); }
.solution-list h3 { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .08em; }
.solution-list ul, .solution-checklist { padding: 0; margin: var(--space-lg) 0 0; list-style: none; }
.solution-list li, .solution-checklist li { position: relative; color: var(--color-ondark-med); padding: 0 0 13px 22px; line-height: 1.55; }
.solution-list li::before, .solution-checklist li::before { content: "◆"; position: absolute; left: 0; top: .36em; color: var(--color-ember-glow); font-size: .45rem; }
.control-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-md); align-items: center; margin-top: var(--space-2xl); }
.control-flow > div { min-height: 145px; padding: var(--space-lg); border: 1px solid rgba(120,150,200,.22); border-radius: var(--radius-lg); background: linear-gradient(155deg,#0c172a,#08101e); display: flex; flex-direction: column; justify-content: center; }
.control-flow b { font-family: var(--font-mono); font-size: .86rem; letter-spacing: .06em; }
.control-flow span { color: var(--color-ondark-med); font-size: .85rem; margin-top: 9px; }
.control-flow i { color: var(--color-ember-glow); font-family: var(--font-mono); font-style: normal; font-size: 1.5rem; }
.control-flow--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apexagen-layer { margin-top: var(--space-md); padding: 16px var(--space-lg); border: 1px solid rgba(232,93,26,.38); border-radius: var(--radius-md); display: flex; gap: var(--space-lg); align-items: center; background: rgba(232,93,26,.06); }
.apexagen-layer b { font-family: var(--font-mono); color: var(--color-ember-glow); }
.apexagen-layer span { color: var(--color-ondark-med); font-size: .84rem; }

.solution-hero { min-height: 610px; display: flex; align-items: center; }
.solution-hero h1 { max-width: 20ch; }
.solution-hero--atsoc { background-image: radial-gradient(80% 100% at 100% 30%, rgba(28,90,168,.24), transparent 68%); }
.solution-hero--upas { background-image: radial-gradient(80% 100% at 100% 30%, rgba(27,137,132,.2), transparent 68%); }
.solution-hero--fudo { background-image: radial-gradient(80% 100% at 100% 30%, rgba(119,75,173,.2), transparent 68%); }
.solution-hero--nozomi { background-image: radial-gradient(80% 100% at 100% 30%, rgba(17,143,183,.24), transparent 68%); }
.solution-outcomes .outcome-card { min-height: 220px; }
.outcome-card h3 { font-family: var(--font-mono); font-size: .92rem; letter-spacing: .05em; }
.outcome-card p { color: var(--color-ondark-med); font-size: .86rem; line-height: 1.65; }
.solution-detail-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: clamp(48px,8vw,120px); align-items: start; }
.solution-detail-grid--single { grid-template-columns: minmax(0, 900px); }
.solution-checklist { max-width: 72ch; }
.solution-checklist li { padding-bottom: 16px; border-bottom: 1px solid rgba(90,120,170,.12); margin-bottom: 15px; }
.apexagen-role { padding: var(--space-xl); border: 1px solid rgba(232,93,26,.32); border-radius: var(--radius-xl); background: radial-gradient(100% 120% at 100% 100%, rgba(232,93,26,.14), transparent 65%), #0a1425; }
.apexagen-role > span { font-family: var(--font-mono); color: var(--color-ember-glow); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.apexagen-role h3 { margin: var(--space-md) 0; }
.apexagen-role p { color: var(--color-ondark-med); font-size: .88rem; line-height: 1.7; margin: 0; }
.use-case-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-lg); }
.use-case-card { min-height: 205px; padding: var(--space-lg); }
.use-case-card h3, .drp-card h3 { font-family: var(--font-mono); font-size: .86rem; letter-spacing: .04em; line-height: 1.45; }
.use-case-card p, .drp-card p { color: var(--color-ondark-med); font-size: .8rem; line-height: 1.6; margin: 0; }
.drp-layout { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); gap: clamp(44px,7vw,100px); align-items: start; }
.drp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); }
.drp-card { min-height: 170px; padding: var(--space-lg); }
.drp-card:last-child { grid-column: span 2; }
.package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-lg); align-items: stretch; }
.package-card { min-height: 390px; display: flex; flex-direction: column; }
.package-card--featured { border-color: rgba(232,93,26,.48); box-shadow: 0 18px 48px rgba(232,93,26,.08); }
.package-card > span { font-family: var(--font-mono); color: var(--color-ember-glow); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.package-card h3 { margin: var(--space-sm) 0 4px; }
.package-card small { display: block; font-family: var(--font-mono); color: var(--color-ondark-low); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-lg); }
.package-card ul { list-style: none; padding: 0; margin: 0; }
.package-card li { position: relative; color: var(--color-ondark-med); padding: 0 0 13px 20px; font-size: .84rem; line-height: 1.5; }
.package-card li::before { content: "◆"; position: absolute; left: 0; top: .4em; color: var(--color-ember-glow); font-size: .42rem; }
.package-note { color: var(--color-ondark-low); font-size: .78rem; margin: var(--space-lg) 0 0; }
.mdr-conversion { margin-top: var(--space-2xl); padding: clamp(28px,4vw,48px); display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: clamp(36px,6vw,80px); border: 1px solid rgba(232,93,26,.36); border-radius: var(--radius-xl); background: radial-gradient(85% 140% at 100% 100%, rgba(232,93,26,.15), transparent 65%), linear-gradient(150deg,#0c1729,#08101f); }
.mdr-conversion > div > span { font-family: var(--font-mono); color: var(--color-ember-glow); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.mdr-conversion h3 { font-size: clamp(1.35rem,1.1rem + .8vw,1.85rem); margin: var(--space-sm) 0; max-width: 26ch; }
.mdr-conversion p { color: var(--color-ondark-med); font-size: .85rem; line-height: 1.65; margin: 0; max-width: 66ch; }
.mdr-conversion__action { border-left: 1px solid rgba(126,160,214,.24); padding-left: var(--space-xl); }
.mdr-conversion__action b { display: block; margin-bottom: 8px; }
.mdr-conversion__action .btn { margin-top: var(--space-lg); }

/* UPAS: continuous device-governance flow and product proof. */
.governance-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.governance-step {
  position: relative;
  min-height: 220px;
  padding: var(--space-xl) var(--space-lg);
  border-top: 1px solid rgba(42, 176, 166, .5);
  background: linear-gradient(180deg, rgba(18, 50, 61, .34), rgba(7, 16, 29, .18));
}
.governance-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: calc(var(--space-lg) * -.72);
  color: rgba(83, 203, 191, .72);
  font-family: var(--font-mono);
  font-size: 1.35rem;
  transform: translateY(-50%);
}
.governance-step > span {
  display: block;
  margin-bottom: var(--space-lg);
  color: #69d4c8;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
}
.governance-step h3 { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .05em; }
.governance-step p { margin: 0; color: var(--color-ondark-med); font-size: .82rem; line-height: 1.65; }
.upas-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.upas-proof-grid article { padding: var(--space-xl) 0; border-top: 1px solid rgba(83, 203, 191, .42); }
.upas-proof-grid strong { display: block; margin-bottom: var(--space-sm); color: var(--color-ondark-high); font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + .9vw, 2.1rem); line-height: 1.15; }
.upas-proof-grid span { display: block; max-width: 26ch; color: var(--color-ondark-med); font-size: .8rem; line-height: 1.55; }
.upas-conversion { border-color: rgba(42, 176, 166, .36); background: radial-gradient(85% 140% at 100% 100%, rgba(42, 176, 166, .12), transparent 65%), linear-gradient(150deg,#0c1729,#08101f); }

/* Fudo: privileged-access lifecycle and platform assurance. */
.privileged-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
}
.privileged-step {
  position: relative;
  min-height: 230px;
  padding: var(--space-xl) var(--space-lg);
  border-top: 1px solid rgba(157, 111, 214, .58);
  background: linear-gradient(180deg, rgba(56, 36, 83, .34), rgba(7, 16, 29, .18));
}
.privileged-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: calc(var(--space-md) * -.7);
  color: rgba(181, 139, 232, .78);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  transform: translateY(-50%);
}
.privileged-step > span {
  display: block;
  margin-bottom: var(--space-lg);
  color: #bd8ff1;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
}
.privileged-step h3 { font-family: var(--font-mono); font-size: .92rem; letter-spacing: .05em; }
.privileged-step p { margin: 0; color: var(--color-ondark-med); font-size: .78rem; line-height: 1.62; }
.fudo-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.fudo-proof-grid article { min-height: 190px; padding: var(--space-xl) 0; border-top: 1px solid rgba(157, 111, 214, .46); }
.fudo-proof-grid strong { display: block; margin-bottom: var(--space-md); color: var(--color-ondark-high); font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .55vw, 1.7rem); line-height: 1.2; }
.fudo-proof-grid span { display: block; max-width: 38ch; color: var(--color-ondark-med); font-size: .8rem; line-height: 1.6; }
.fudo-conversion { border-color: rgba(157, 111, 214, .38); background: radial-gradient(85% 140% at 100% 100%, rgba(119, 75, 173, .17), transparent 65%), linear-gradient(150deg,#0c1729,#08101f); }
.fudo-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.fudo-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: clamp(26px, 2.4vw, 38px);
  overflow: hidden;
}
.fudo-product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--product-accent, var(--color-ember));
  box-shadow: 0 0 24px var(--product-glow, rgba(232,93,26,.35));
}
.fudo-product-card--share { --product-accent: #a66cff; --product-glow: rgba(166,108,255,.42); }
.fudo-product-card--enterprise { --product-accent: #ef4850; --product-glow: rgba(239,72,80,.42); }
.fudo-product-card--connect { --product-accent: #43a6ed; --product-glow: rgba(67,166,237,.42); }
.fudo-product-card > span { color: var(--product-accent); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.fudo-product-card h3 { margin: 14px 0 12px; font-size: clamp(1.35rem, 1.15rem + .5vw, 1.8rem); }
.fudo-product-card p { margin: 0 0 18px; color: var(--color-ondark-med); font-size: .84rem; line-height: 1.65; }
.fudo-product-card ul { display: grid; gap: 10px; margin: auto 0 0; padding: 0; list-style: none; }
.fudo-product-card li { position: relative; padding-left: 18px; color: var(--color-ondark-med); font-size: .76rem; line-height: 1.55; }
.fudo-product-card li::before { content: "◇"; position: absolute; left: 0; color: var(--product-accent); }
.portfolio-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-xl); }
.portfolio-action p { margin: 0; color: var(--color-ondark-med); }
.portfolio-action .partner-link { flex: 0 0 auto; }

/* Nozomi Networks: OT security platform architecture. */
.nozomi-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-2xl); }
.nozomi-product-card { min-height: 285px; display: flex; flex-direction: column; }
.nozomi-product-card > span { color: #54c5df; font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.nozomi-product-card h3 { margin: var(--space-md) 0; font-size: clamp(1.2rem, 1.05rem + .4vw, 1.55rem); }
.nozomi-product-card p { margin: 0; color: var(--color-ondark-med); font-size: .82rem; line-height: 1.65; }
.nozomi-flow .privileged-step { border-top-color: rgba(84,197,223,.46); }
.nozomi-flow .privileged-step > span { color: #54c5df; }
.nozomi-conversion { border-color: rgba(84,197,223,.36); background: radial-gradient(85% 140% at 100% 100%, rgba(17,143,183,.15), transparent 65%), linear-gradient(150deg,#0c1729,#08101f); }

@media (max-width: 1000px) {
  .ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, minmax(0,280px)); }
  .use-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .package-grid { grid-template-columns: 1fr; }
  .package-card { min-height: auto; }
  .mdr-conversion { grid-template-columns: 1fr; }
  .governance-flow, .upas-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governance-step::after { display: none; }
  .privileged-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privileged-step::after { display: none; }
  .fudo-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fudo-product-grid { grid-template-columns: 1fr; }
  .fudo-product-card { min-height: auto; }
  .control-flow--four, .nozomi-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .partner-grid, .ecosystem-grid, .solution-story__grid, .solution-detail-grid, .use-case-grid, .drp-layout, .drp-grid { grid-template-columns: 1fr; }
  .partner-card { min-height: 240px; }
  .partner-spotlight { align-items: flex-start; flex-direction: column; }
  .solution-list { border-left: 0; border-top: 1px solid rgba(126,160,214,.26); padding: var(--space-lg) 0 0; }
  .control-flow { grid-template-columns: 1fr; }
  .control-flow i { transform: rotate(90deg); justify-self: center; }
  .apexagen-layer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .solution-hero { min-height: auto; }
  .drp-card:last-child { grid-column: auto; }
  .mdr-conversion__action { border-left: 0; border-top: 1px solid rgba(126,160,214,.24); padding: var(--space-lg) 0 0; }
  .governance-flow, .upas-proof-grid { grid-template-columns: 1fr; }
  .governance-step { min-height: auto; }
  .privileged-flow, .fudo-proof-grid { grid-template-columns: 1fr; }
  .privileged-step, .fudo-proof-grid article { min-height: auto; }
  .portfolio-action { align-items: flex-start; flex-direction: column; }
  .control-flow--four, .nozomi-product-grid { grid-template-columns: 1fr; }
  .nozomi-product-card { min-height: auto; }
}

/* ---- §9 Methodology: SLOW, CONTINUOUS, LOOPING pulse (not a loader) ---- */
/* Replace the run-once fill with a base line + travelling ember light. */
.timeline::after { display: none !important; }          /* kill v6 run-once fill */
.timeline.run::after { animation: none !important; }
.timeline { --pulse-w: 190px; }
.timeline .method-pulse {
  content: ""; position: absolute; top: 3px; left: 0; height: 3px; width: var(--pulse-w);
  border-radius: 3px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.15) 20%, var(--color-ember) 50%, rgba(255,122,26,.15) 80%, transparent);
  box-shadow: 0 0 16px rgba(244,90,26,.6);
  animation: methodPulse 36s linear infinite;
}
@keyframes methodPulse {
  0%   { transform: translateX(-10%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(100% + 10px)); opacity: 0; }
}
/* nodes glow subtly and continuously; one leads */
.tl-step::before { animation: nodeBreath 36s ease-in-out infinite !important; }
.timeline .tl-step:nth-child(1)::before { animation-delay: 0s !important; }
.timeline .tl-step:nth-child(2)::before { animation-delay: 7.2s !important; }
.timeline .tl-step:nth-child(3)::before { animation-delay: 14.4s !important; }
.timeline .tl-step:nth-child(4)::before { animation-delay: 21.6s !important; }
.timeline .tl-step:nth-child(5)::before { animation-delay: 28.8s !important; }
@keyframes nodeBreath {
  0%, 6%, 100% { background: var(--color-void); box-shadow: 0 0 10px rgba(232,93,26,.28); }
  2.5%         { background: var(--color-ember); box-shadow: 0 0 18px rgba(244,90,26,.85); }
}
@media (max-width: 1024px) { .timeline .method-pulse { display: none; } }

/* ---- §12 FAQ: align with refined type scale ---- */
.faq summary { font-size: 0.98rem; padding: 16px 20px; }
.faq .faq__a { font-size: var(--type-body-md); line-height: 1.62; }

/* ---- §13 CTA: ambient motion OUTSIDE the box only ---- */
.cta-section { position: relative; }
.cta-section::before {
  content: ""; position: absolute; inset: auto 6% -6% 6%; height: 210px; z-index: 0;
  background:
    radial-gradient(circle at 42% 50%, rgba(244,90,26,.13), transparent 38%),
    radial-gradient(circle at 62% 55%, rgba(43,108,191,.11), transparent 44%);
  filter: blur(30px); pointer-events: none;
  animation: ctaAmbientDrift 20s ease-in-out infinite alternate;
}
.cta-section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(140,165,205,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 120% at 50% 120%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(70% 120% at 50% 120%, black, transparent 70%);
  opacity: .5; animation: ctaShimmer 9s ease-in-out infinite alternate;
}
.cta-section .cta-frame { position: relative; z-index: 1; }   /* box sits above ambient */
@keyframes ctaAmbientDrift {
  from { transform: translate3d(-14px, 4px, 0); opacity: .5; }
  to   { transform: translate3d(14px, -6px, 0); opacity: .82; }
}
@keyframes ctaShimmer { from { opacity: .35; } to { opacity: .6; } }

/* ---- §14 Footer: gentle tightening only ---- */
.footer { padding-block: var(--space-2xl) var(--space-lg); }
.footer__grid { gap: var(--space-xl) var(--space-2xl); margin-bottom: var(--space-xl); }

/* ---- §5 Hero video layer (atmosphere, behind content) ---- */
.heroV__video {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; z-index: 1; opacity: 0;
  transition: opacity 1s ease;
}
.heroV.video-on .heroV__video { opacity: 1; }
.heroV.video-on .heroA { opacity: .28; transition: opacity 1s ease; }  /* branded scene fades under video */
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,10,20,0.92) 0%, rgba(5,10,20,0.74) 42%, rgba(5,10,20,0.34) 100%),
    linear-gradient(180deg, rgba(5,10,20,0.18) 0%, rgba(5,10,20,0.74) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .heroV__video { display: none !important; }
  .heroV.video-on .heroA { opacity: 1 !important; }
  .timeline .method-pulse { animation: none !important; opacity: 0 !important; }
  .tl-step::before { animation: none !important; background: var(--color-ember) !important; box-shadow: 0 0 12px rgba(244,90,26,.6) !important; }
  .cta-section::before, .cta-section::after { animation: none !important; }
}

/* ---- Responsive: keep the right-cluster clean, collapse cleanly ---- */
@media (max-width: 1120px) {
  .nav__inner > nav[aria-label="Primary"] { margin-left: 0; }
}
@media (max-width: 900px) {
  #mission-h { max-width: 100%; }
  .feature .icon, .feature--hot .icon { width: 60px; height: 60px; }
}

/* ============================================================
   v9 — CORRECTION PASS (authoritative, loaded last)
   Targeted fixes per the v9 brief. No restructuring.
   ============================================================ */

/* ---- §1 Hero: anchor copy further left, grounded not centred ---- */
.heroV__content {
  max-width: 1440px; margin-inline: auto; width: 100%;
  padding-left: clamp(var(--gutter), 5vw, 80px);
  padding-right: var(--gutter);
}
.heroV__grid { grid-template-columns: minmax(0, 760px) auto; }
.heroV h1, .heroV__sub, .heroV__eyebrow, .heroV__ctas { text-align: left; }
/* on wide screens, keep the block left even when the rail reserves space */
@media (min-width: 1024px) and (max-width: 1699px) {
  .has-rail .heroV__content { padding-left: calc(clamp(var(--gutter), 5vw, 80px) + 120px); }
}

/* ---- §3 Mission: bump headline back up a notch (not oversized) ---- */
#mission-h {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 3.125rem);  /* ~26 → 50px */
  line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch;
}
#mission .lede { font-size: var(--type-body-lg); line-height: 1.62; }

/* ---- §5 Services: heading aligned to refined H2, restrained card type ---- */
#svc-h { font-size: clamp(1.65rem, 1.2rem + 1vw, 2.125rem); line-height: 1.12; letter-spacing: -0.02em; }
.pillar h3, .pillar .pillar-heading { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); line-height: 1.24; }
.pillar p { font-size: var(--type-body-sm); line-height: 1.6; }

/* ---- §6 Methodology: rebuilt progress logic ---- */
/* Kill any leftover list numbering (now a <ul>, but be explicit) */
.timeline { list-style: none; counter-reset: none; padding-left: 0; }
.timeline > li { list-style: none; }
.timeline > li::marker { content: none; }

/* Neutral base line (NO permanent orange fill) */
.timeline::before {
  background: rgba(216, 226, 242, 0.18) !important;
  height: 2px !important; top: 7px !important;
}
.timeline::after { display: none !important; }        /* ensure no fill layer */
.timeline.run::after { animation: none !important; }

/* Single travelling pulse, 22s, clears Phase 05, loops */
.timeline .method-pulse {
  position: absolute; top: 6px; left: 0; height: 4px; width: 18%;
  border-radius: 4px; pointer-events: none; z-index: 2; background:
    linear-gradient(90deg, transparent, rgba(244,90,26,.95) 40%, rgba(255,122,26,.95) 60%, transparent);
  filter: drop-shadow(0 0 14px rgba(244,90,26,.45));
  box-shadow: none;
  animation: methodPulseV9 22s linear infinite;
}
@keyframes methodPulseV9 {
  0%   { transform: translateX(-120%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(560%); opacity: 0; }
}
/* nodes stay neutral, glow briefly as the pulse passes over each */
.tl-step::before {
  background: var(--color-void) !important;
  border: 1.5px solid var(--color-ember) !important;
  box-shadow: 0 0 10px rgba(232,93,26,.28) !important;
  animation: nodePassV9 22s linear infinite !important;
}
.timeline .tl-step:nth-child(2)::before { animation-delay: 0s !important; }   /* :nth-child(1) is the .method-pulse span */
.timeline .tl-step:nth-child(3)::before { animation-delay: 2.2s !important; }
.timeline .tl-step:nth-child(4)::before { animation-delay: 4.4s !important; }
.timeline .tl-step:nth-child(5)::before { animation-delay: 6.6s !important; }
.timeline .tl-step:nth-child(6)::before { animation-delay: 8.8s !important; }
@keyframes nodePassV9 {
  0%, 9%, 100% { background: var(--color-void); box-shadow: 0 0 10px rgba(232,93,26,.28); }
  4%          { background: var(--color-ember); box-shadow: 0 0 18px rgba(244,90,26,.9); }
}
@media (max-width: 1024px) {
  .timeline .method-pulse { display: none; }
  .tl-step::before { animation: none !important; background: var(--color-ember) !important; }
}

/* ---- §8/§9 FAQ: remove orange edge glow, keep calm & functional ---- */
.faq details, .faq details:hover {
  background: rgba(5, 10, 20, 0.55) !important;
  border: 1px solid rgba(216, 226, 242, 0.14) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.faq details:hover { background: rgba(11, 27, 53, 0.72) !important; border-color: rgba(216, 226, 242, 0.22) !important; }
.faq details::before, .faq details::after { display: none !important; }   /* no top-edge illumination */
.faq summary::after { content: "+"; display: inline-flex; }               /* keep the orange plus icon */

/* ---- §2 Ensure hero video isn't over-covered by the copy block ---- */
.heroV__sub { max-width: 44ch; }

/* ---- §4 FIX v2: reliable ember ring using a conic backer + inner disc.
   The outer .icon paints the conic gradient; an inner ::before disc covers
   the centre, leaving only a ~2.5px ring — with an ember sweep top-right. */
.feature .icon {
  position: relative; isolation: isolate;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(120,150,200,.26) 0deg,
      rgba(255,150,80,.55) 18deg,
      rgba(244,90,26,1) 42deg,
      rgba(255,170,100,1) 60deg,
      rgba(244,90,26,.9) 82deg,
      rgba(255,150,80,.45) 108deg,
      rgba(90,120,175,.22) 165deg,
      rgba(70,100,155,.20) 255deg,
      rgba(120,150,200,.26) 360deg) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.34),
    0 0 26px rgba(43,108,191,.16),
    9px -9px 30px rgba(244,90,26,.24) !important;
  border: 0 !important; overflow: visible !important;
}
.feature .icon::before {
  content: ""; position: absolute; inset: 3px; border-radius: 999px; z-index: 0;
  background:
    radial-gradient(circle at 36% 26%, rgba(255,255,255,.10), transparent 44%),
    linear-gradient(150deg, rgba(11,27,53,.99), rgba(5,10,20,1)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  display: block !important;
}
.feature .icon::after { display: none !important; }
.feature .icon svg { position: relative; z-index: 1; color: #EAF1FF !important; }

/* ---- Reduced-motion parity for the rebuilt pulse ---- */
@media (prefers-reduced-motion: reduce) {
  .timeline .method-pulse { animation: none !important; opacity: 0 !important; }
  .tl-step::before { animation: none !important; background: var(--color-ember) !important; box-shadow: 0 0 12px rgba(244,90,26,.6) !important; }
}

/* ============================================================
   v9.1 — FINAL CORRECTION PASS (authoritative, loaded last)
   ============================================================ */

/* ---- §4 Why-Us icons: ONE clean reusable orb. Kill all prior broken
   pill/overlay/conic attempts decisively, rebuild as premium glass tile
   with a subtle consistent orange top-edge accent on ALL six. ---- */
.feature .icon {
  width: 66px !important; height: 66px !important;
  border-radius: 18px !important;
  display: grid !important; place-items: center !important;
  position: relative !important; isolation: isolate !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.09), transparent 44%),
    linear-gradient(150deg, rgba(16,32,60,.92), rgba(6,12,24,.98)) !important;
  border: 1px solid rgba(216,226,242,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 16px 42px rgba(0,0,0,.34),
    0 0 26px rgba(43,108,191,.14) !important;
  color: #E6EEFB !important;
}
/* neutralize every legacy pseudo layer that caused the dark pill + half-fill */
.feature .icon::before {
  content: "" !important;
  position: absolute !important; inset: -1px !important;
  top: auto !important; left: -1px !important; right: -1px !important; bottom: auto !important;
  height: auto !important; width: auto !important;
  border-radius: 18px !important;
  /* thin ember accent along the TOP edge only — consistent on all six */
  border: 0 !important;
  border-top: 2px solid rgba(244,90,26,.9) !important;
  background: none !important;
  box-shadow: 0 -3px 14px rgba(244,90,26,.28) !important;
  opacity: .9 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  -webkit-mask: none !important; mask: none !important;
  animation: none !important;
  display: block !important;
}
.feature .icon::after { content: none !important; display: none !important; }
.feature .icon svg {
  position: relative !important; z-index: 2 !important;
  width: 27px !important; height: 27px !important;
  stroke: rgba(230,238,251,.95) !important; stroke-width: 1.7 !important;
  color: rgba(230,238,251,.95) !important;
  filter: none !important;
}
/* consistent hover on all six */
.feature .icon { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.feature:hover .icon {
  transform: translateY(-3px) !important;
  border-color: rgba(244,90,26,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 22px 54px rgba(0,0,0,.42),
    0 0 30px rgba(244,90,26,.20) !important;
}
.feature:hover .icon::before { box-shadow: 0 -4px 18px rgba(244,90,26,.42) !important; opacity: 1 !important; }

/* ---- §1 Hero: move copy clearly left (120–160px from viewport edge) ---- */
.heroV__content {
  padding-left: clamp(24px, 5vw, 40px) !important;
  padding-right: clamp(24px, 5vw, 96px) !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-items: flex-start !important;
}
@media (min-width: 1024px) {
  .heroV__content { padding-left: clamp(120px, 9vw, 156px) !important; }
  .has-rail .heroV__content { padding-left: clamp(120px, 9vw, 156px) !important; }
}

/* ---- §3 Mission: clean two-line headline, wider container ---- */
#mission-h {
  max-width: 980px !important;
  font-size: clamp(1.65rem, 1.2rem + 1vw, 2.125rem) !important;   /* up to 34px */
  line-height: 1.06 !important; letter-spacing: -0.02em !important;
}

/* ---- §9 FAQ anchor offset so sticky header doesn't cover heading ---- */
#faq { scroll-margin-top: 96px; }
#mission, #why, #services, #method, #frameworks, #about { scroll-margin-top: 88px; }
/* This reading width belongs to the homepage paragraph, not About Us's section. */
p.about-intro { max-width: 60ch; margin-top: var(--space-md); color: var(--color-slate-300); }
.heroV__grid { max-width: none !important; }
.heroV h1, .heroV__sub { max-width: 46ch; }

/* ============================================================
   v9.2 — Why-Us icons: RESTORE the v4 liquid-glass treatment
   (the version Adrian confirmed is best) and apply the ember
   ambient glow to ALL SIX, not just the first. Authoritative.
   ============================================================ */
.feature .icon,
.feature--hot .icon {
  width: 58px !important; height: 58px !important;
  border-radius: 18px !important;
  position: relative !important;
  display: grid !important; place-items: center !important;
  overflow: visible !important;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 46%, rgba(120,150,200,.12)) !important;
  border: 1px solid rgba(255,178,120,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -10px 18px rgba(8,16,34,.45),
    0 12px 28px rgba(0,0,0,.4),
    0 0 22px 2px rgba(232,93,26,.34),
    0 6px 26px rgba(232,93,26,.22) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  color: #DDE8FA !important;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease) !important;
  animation: none !important;
}
/* top sheen — v4 */
.feature .icon::before {
  content: "" !important; position: absolute !important;
  top: 3px !important; left: 10% !important; right: 10% !important; bottom: auto !important;
  height: 42% !important; width: auto !important; border-radius: 12px !important;
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)) !important;
  border: 0 !important; box-shadow: none !important; opacity: 1 !important;
  -webkit-mask: none !important; mask: none !important;
  pointer-events: none !important; z-index: 1 !important; display: block !important;
  animation: none !important;
}
/* ambient glow now handled by box-shadow above (reliable, no stacking issues) */
.feature .icon::after,
.feature--hot .icon::after { content: none !important; display: none !important; }
.feature .icon svg,
.feature--hot .icon svg {
  position: relative !important; z-index: 2 !important;
  width: 24px !important; height: 24px !important;
  stroke-width: 1.6 !important;
  color: #F1F6FF !important; stroke: currentColor !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)) !important;
}
/* subtle warm border to match the ember glow, consistent on all six */
.feature .icon { border-color: rgba(255,255,255,.28) !important; }
.feature:hover .icon {
  transform: translateY(-3px) !important;
  border-color: rgba(251,146,60,.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -10px 18px rgba(8,16,34,.45),
    0 18px 40px rgba(0,0,0,.5),
    0 0 28px 3px rgba(232,93,26,.5),
    0 6px 30px rgba(232,93,26,.32) !important;
}
@media (prefers-reduced-motion: reduce) {
  .feature .icon, .feature .icon::before, .feature .icon::after { animation: none !important; }
}

/* ============================================================
   v9.2 — "DELIVERY PATHS" site-wide theme motif
   One reusable circuit-trace, positioned differently per page
   for a composed (not tiled) signature. Perf: inline SVG, one
   opacity layer, single node-pulse, reduced-motion safe.
   ============================================================ */
.trace-theme {
  position: absolute; width: min(32vw, 440px); height: 200px;
  opacity: .38; pointer-events: none; z-index: 0;
}
.trace-theme path { stroke: rgba(150,175,220,.35); stroke-width: 1.2; fill: none; }
.trace-theme .tr-e { stroke: rgba(232,93,26,.5); }
.trace-theme circle { fill: none; stroke: rgba(150,175,220,.45); stroke-width: 1.2; }
.trace-theme .nd-e { stroke: rgba(251,146,60,.85); animation: nodepulse 3.4s ease-in-out infinite; }
.trace-theme .nd-e2 { animation-delay: 1.5s; }
/* draw-in once on scroll for a premium reveal (very cheap) */
.trace-theme path { stroke-dasharray: 640; stroke-dashoffset: 640; }
.trace-theme.is-drawn path { animation: traceDraw 2.2s var(--ease) forwards; }
.trace-theme.is-drawn .tr-e { animation-delay: .35s; }
@keyframes traceDraw { to { stroke-dashoffset: 0; } }

/* per-page anchor positions (theme rotation, not random) */
.trace-theme--tr { top: 24px;  right: 0;   }
.trace-theme--tl { top: 40px;  left: 0;  transform: scaleX(-1); }
.trace-theme--bl { bottom: 40px; left: 0; transform: scaleX(-1) scaleY(-1); }
.trace-theme--br { bottom: 32px; right: 0; transform: scaleY(-1); }
.trace-theme--rc { top: 50%; right: 0; transform: translateY(-50%); }

@media (max-width: 900px) { .trace-theme { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .trace-theme .nd-e { animation: none !important; }
  .trace-theme.is-drawn path { animation: none !important; stroke-dashoffset: 0 !important; }
}
/* ensure any section hosting the theme trace is a positioning context */
section:has(> .trace-theme) { position: relative; overflow: hidden; }

/* ============================================================
   v9.3 — Tier 1-2 motion. Portable, class-based (WordPress/Astra
   friendly: no dependence on exact DOM nesting). transform/opacity
   only, run-once or GPU-cheap, prefers-reduced-motion safe.
   ============================================================ */

/* (A) headline reveal handled by existing .ch char animation */

/* --- (B) Section-entry stagger for grouped children --- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: translateY(0); }
/* stagger delays applied by JS via --i custom property (portable) */
[data-stagger].is-in > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- (C) Magnetic / tilt cards (desktop pointer only) --- */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .18s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  transform-style: preserve-3d;
  position: relative;
}
/* pointer-following ember edge-light */
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,122,26,.16), transparent 60%);
}
.tilt:hover::after { opacity: 1; }
@media (hover: none), (max-width: 900px) {
  .tilt { transform: none !important; }
  .tilt::after { display: none; }
}

/* --- (D) Hero circuit: slightly richer travelling glow (enhances existing) --- */
.heroA__svg .pulse { filter: drop-shadow(0 0 6px rgba(255,122,26,.9)); }
.heroA__svg .tr--e { animation: traceBreath 7s ease-in-out infinite; }
@keyframes traceBreath { 0%,100% { stroke-opacity: .35; } 50% { stroke-opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .wr-word { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tilt { transform: none !important; }
  .heroA__svg .tr--e { animation: none !important; }
}

/* ============================================================
   v9.5 — FULL-BLEED HERO
   The hero must read as ONE full screen, with the transparent
   header floating over it (no seam, no divided band at the top).
   The nav is a sibling ABOVE .heroV in the DOM, so we pull the
   hero up by the nav's height and let it paint behind it.
   ============================================================ */
:root { --nav-h: 67px; }

/* nav floats OVER the hero, fully transparent at rest.
   Using position:fixed removes it from flow entirely, so the hero
   naturally starts at the viewport top — no height-matching needed
   (robust across breakpoints and after the WordPress/Astra port). */
.nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* hero fills the whole viewport, painting behind the nav */
.heroV {
  min-height: 100svh !important;
  margin-top: 0 !important;
  padding-top: var(--nav-h) !important;   /* keep copy clear of the nav */
}
/* every hero layer (animation, video, overlay) reaches the very top */
.heroV .heroA,
.heroV .heroV__video,
.heroV .hero-video-overlay { top: 0 !important; }

/* pages WITHOUT a hero still need clearance for the fixed nav */
body:not(:has(.heroV)) .nav + * { padding-top: var(--nav-h); }
.page-hero { padding-top: calc(var(--nav-h) + var(--space-2xl)); }

/* when the nav condenses on scroll it regains its blue surface */
.nav.is-condensed {
  background: var(--nav-scrolled) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  border-bottom-color: rgba(96,132,196,.24) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.28) !important;
}
/* mobile menu open still needs a solid surface to be readable */
.nav.is-open { background: rgba(9,20,40,.97) !important; backdrop-filter: blur(16px) !important; }

@media (max-width: 900px) {
  :root { --nav-h: 66px; }
}

/* ============================================================
   v9.6 — Header tone matches the page EXACTLY.
   The body background is a radial-gradient with `fixed`
   attachment, so the colour behind the nav never changes as you
   scroll. Rather than hardcode a swatch that drifts out of tune,
   we make the scrolled nav transparent + blurred so the real
   page gradient shows straight through it. The header then reads
   as part of the page, not a band sitting on top of it.
   ============================================================ */
.nav.is-condensed {
  /* DECISION: fully transparent, no blur, no panel.
     A frosted bar is a deliberate visual object — it announces "panel here",
     which is the exact seam we're trying to remove. Blur also averages the
     busy content beneath it, so it drifts off-tone wherever the page has
     local contrast. Removing it removes the last thing that can mismatch.
     Legibility is protected by a soft scrim + text-shadow (atmosphere, not
     a shape) rather than by a solid surface. */
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Soft top-down scrim: darkens the very top slightly and fades to nothing.
   Keeps nav text readable over anything scrolling beneath, without ever
   reading as a bar. Sits behind the nav content, never intercepts clicks. */
.nav::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,12,26,.12) 0%, rgba(6,12,26,.05) 45%, rgba(6,12,26,0) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.nav.is-condensed::before { opacity: 1; }

/* Text stays crisp against whatever passes underneath */
.nav.is-condensed .nav__links a,
.nav.is-condensed .nav__logo {
  text-shadow: 0 1px 10px rgba(4,8,18,.75), 0 1px 3px rgba(4,8,18,.6);
}

/* Fallback: browsers without backdrop-filter get a colour sampled from the
   TOP of the fixed page gradient (which is what sits behind the nav). */
/* (no backdrop-filter fallback needed: the scrolled nav paints no surface) */

/* mobile menu still needs an opaque surface to be readable */
.nav.is-open {
  background: rgba(20,38,78,.97) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
}

/* ============================================================
   Homepage hero review — compact title and clean scroll handoff.
   ============================================================ */
.heroV h1 {
  font-size: clamp(2rem, 1.25rem + 1.45vw, 3.15rem);
}

/* Once scrolling starts, give the fixed navigation a stable surface so
   page headings cannot show through it. Avoid backdrop blur here because
   repainting video through a fixed blur layer can make scrolling stutter. */
body:has(.heroV) .nav.is-condensed {
  background: linear-gradient(180deg, rgba(9,20,40,.97), rgba(12,27,54,.95)) !important;
  border-bottom: 1px solid rgba(96,132,196,.20) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:has(.heroV) .nav.is-condensed::before { opacity: 0; }

/* Inner pages also need an opaque scrolled header. This prevents page-hero
   and section headings from showing through the fixed navigation. */
body:not(:has(.heroV)) .nav.is-condensed {
  background: linear-gradient(180deg, rgba(9,20,40,.98), rgba(12,27,54,.97)) !important;
  border-bottom: 1px solid rgba(96,132,196,.20) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(:has(.heroV)) .nav.is-condensed::before { opacity: 0; }

/* Freeze decorative work once the hero is no longer visible. */
.heroV.hero-inactive .heroA__grid,
.heroV.hero-inactive .heroA__svg .tr--e,
.heroV.hero-inactive .heroA__svg .node--p,
.heroV.hero-inactive .heroA__svg .amark-stroke {
  animation-play-state: paused !important;
}


/* v9.7 insights publication hub */
.insights-hero .lede { max-width: 65ch; }
.insights-intro { max-width: 760px; margin-bottom: var(--space-xl); }
.insights-intro h2 { margin-top: 0; }
.insights-toolbar { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(117,148,198,.2); }
.insights-toolbar h2 { margin: 0; max-width: 26ch; }
.insights-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.insight-filter { appearance: none; padding: 10px 14px; border: 1px solid rgba(117,148,198,.3); border-radius: 999px; background: rgba(7,18,36,.7); color: var(--color-ondark-med); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .035em; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.insight-filter span { margin-left: 6px; color: var(--color-ondark-low); }
.insight-filter:hover { border-color: rgba(251,146,60,.55); color: var(--color-ondark-high); }
.insight-filter.is-active { border-color: var(--color-ember); background: rgba(232,93,26,.13); color: var(--color-ember-glow); }
[data-insight-section][hidden] { display: none !important; }
.insights-empty { color: var(--color-ondark-med); }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.insight-card { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: clamp(26px, 3vw, 38px); border: 1px solid rgba(117,148,198,.24); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(14,30,57,.92), rgba(5,14,29,.96)); overflow: hidden; transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.insight-card:hover { transform: translateY(-5px); border-color: rgba(251,146,60,.48); box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 24px rgba(232,93,26,.1); }
.insight-card h2 { font-size: clamp(1.3rem, 1.15rem + .35vw, 1.65rem); line-height: 1.24; margin: 0 0 var(--space-md); }
.insight-card > p:not(.eyebrow) { color: var(--color-ondark-med); flex: 1; }
.insight-card .cover { position: absolute; inset: 0; z-index: 2; }
.insight-card .pillar__link { margin-top: var(--space-lg); }
.insight-card--featured { min-height: 360px; padding-right: min(40%, 430px); border-color: rgba(232,93,26,.42); background: radial-gradient(circle at 88% 25%, rgba(232,93,26,.2), transparent 30%), linear-gradient(135deg, rgba(18,38,72,.98), rgba(5,14,29,.98)); }
.insight-card--featured h2 { max-width: 24ch; font-size: clamp(1.4rem, 1.15rem + .65vw, 1.9rem); }
.insight-card__flag { position: absolute; top: 28px; right: 30px; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ember-glow); }
.insight-meta, .article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--color-ondark-low); }
.article-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + var(--space-2xl)) 0 var(--space-2xl); background: radial-gradient(circle at 82% 25%, rgba(43,81,143,.22), transparent 30%), var(--color-navy); }
.article-hero h1 { max-width: 28ch; font-size: clamp(1.8rem, 1.4rem + 1.1vw, 2.6rem); line-height: 1.09; letter-spacing: -.035em; }
.article-hero .lede { max-width: 66ch; }
.article-meta { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(117,148,198,.2); }
.article-band { padding-top: var(--space-2xl); }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 330px); gap: clamp(48px, 8vw, 110px); align-items: start; justify-content: space-between; }
.article-body { font-size: clamp(.98rem, .95rem + .12vw, 1.06rem); line-height: 1.75; color: var(--color-ondark-med); }
.article-body .article-lead { font-size: clamp(1.0625rem, 1rem + .15vw, 1.15rem); line-height: 1.58; color: var(--color-ondark-high); }
.article-body h2 { margin: var(--space-2xl) 0 var(--space-sm); font-size: clamp(1.3rem, 1.15rem + .35vw, 1.55rem); color: var(--color-ondark-high); }
.article-body p { margin-bottom: var(--space-md); }
.article-callout { margin: var(--space-2xl) 0; padding: var(--space-lg); border-left: 3px solid var(--color-ember); background: rgba(16,35,66,.74); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-callout strong { display: block; margin-bottom: 8px; color: var(--color-ondark-high); font-size: 1.08em; }
.article-callout p { margin: 0; }
.article-aside { position: sticky; top: calc(var(--nav-h) + 28px); padding: var(--space-lg); border: 1px solid rgba(117,148,198,.22); border-radius: var(--radius-lg); background: rgba(7,18,36,.82); }
.article-aside > p:not(.eyebrow) { color: var(--color-ondark-med); }
.article-sources { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(117,148,198,.22); }
.article-sources h2 { margin-top: 0; font-size: 1.18rem; }
.article-sources ul { padding-left: 1.2em; }
.article-sources li { margin-bottom: 10px; }
.article-sources a { color: var(--color-ondark-med); text-decoration-color: rgba(251,146,60,.55); text-underline-offset: 3px; }
.article-sources a:hover { color: var(--color-ember-glow); }
.insights-section-head { max-width: 850px; margin-top: calc(var(--space-section) * .8); padding-top: var(--space-xl); border-top: 1px solid rgba(117,148,198,.2); }
.insights-section-head h2 { margin-top: 0; }
.insights-section-head > p:last-child { color: var(--color-ondark-med); }
.article-back-float { display: none; z-index: 40; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(117,148,198,.35); border-radius: 999px; background: rgba(5,14,29,.94); box-shadow: 0 12px 28px rgba(0,0,0,.35); backdrop-filter: blur(12px); color: var(--color-ondark-high); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; text-decoration: none; }
.article-back-float:hover { border-color: rgba(251,146,60,.65); color: var(--color-ember-glow); }
.article-end-nav { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(117,148,198,.22); }
.article-end-nav a { color: var(--color-ember-glow); font-family: var(--font-mono); font-size: .82rem; text-decoration: none; }
@media (max-width: 980px) {
  .insights-toolbar { align-items: flex-start; flex-direction: column; }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-card--featured { padding-right: clamp(26px, 3vw, 38px); }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; order: -1; }
  .article-back-float { position: sticky; top: calc(var(--nav-h) + 8px); display: flex; margin: 10px 14px 0 auto; width: max-content; }
}
@media (max-width: 650px) {
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card, .insight-card--featured { min-height: 0; }
  .insight-card__flag { position: static; margin-bottom: 12px; }
  .article-hero { padding-top: var(--space-lg); }
  .article-hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .article-back-float { padding: 9px 12px; }
  .article-end-nav { align-items: flex-start; }
}

/* v9.8 contact conversion journey */
.contact-band { padding-top: var(--space-2xl); }
.contact-shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(34px, 6vw, 86px); align-items: start; }
.contact-main { padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(117,148,198,.24); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(14,30,57,.88), rgba(5,14,29,.96)); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.contact-heading { max-width: 650px; margin-bottom: var(--space-xl); }
.contact-heading h2 { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.65rem); line-height: 1.3; }
.contact-heading > p:last-child { color: var(--color-ondark-low); font-size: var(--type-body-sm); }
.contact-form { max-width: none; gap: var(--space-lg); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(170,188,219,.55); }
.form-compact { max-width: 240px; }
.form-consent { display: flex !important; align-items: flex-start; gap: 11px; margin: 0 !important; font-family: var(--font-body) !important; font-size: .88rem !important; line-height: 1.55; letter-spacing: 0 !important; text-transform: none !important; color: var(--color-ondark-med) !important; }
.form-consent input { width: 18px !important; height: 18px; flex: 0 0 18px; margin-top: 2px; padding: 0; accent-color: var(--color-ember); }
.form-submit { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-sm); }
.form-status { flex: 1; min-width: 240px; margin: 0; color: var(--color-ondark-low); font-size: .82rem; line-height: 1.55; }
.contact-aside { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: var(--space-md); }
.contact-guide, .contact-route { padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(117,148,198,.22); border-radius: var(--radius-lg); background: rgba(7,18,36,.78); }
.contact-guide h2 { font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.35; }
.contact-guide > p, .contact-route > p { color: var(--color-ondark-med); }
.contact-guide ul { margin: var(--space-md) 0; padding: 0; list-style: none; }
.contact-guide li { position: relative; margin-bottom: 12px; padding-left: 22px; color: var(--color-ondark-med); }
.contact-guide li::before { content: "◆"; position: absolute; left: 0; top: .25em; color: var(--color-ember-glow); font-size: .55rem; }
.contact-route__link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-mono); font-size: .9rem; }
.contact-route__number { display: inline-block; margin: 2px 0 16px; color: var(--color-ondark-high); font-family: var(--font-mono); font-size: clamp(1.15rem, 1rem + .45vw, 1.5rem); letter-spacing: .04em; }
.contact-route__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.contact-route__actions .btn { min-width: 116px; justify-content: center; padding: 10px 16px; }
.contact-route p:last-child { margin-bottom: 0; font-size: .9rem; }
@media (max-width: 900px) {
  .contact-shell { grid-template-columns: 1fr; }
  .contact-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-guide { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .contact-main { padding: 22px 18px; }
  .form-row, .contact-aside { grid-template-columns: 1fr; }
  .contact-guide { grid-column: auto; }
  .form-compact { max-width: none; }
  .form-submit { align-items: stretch; flex-direction: column; }
  .form-submit .btn { width: 100%; justify-content: center; }
}

/* v9.8 about credibility page */
.about-statement { max-width: 800px; margin-bottom: var(--space-2xl); }
.about-statement h2, .about-section-head h2 { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.25; }
.about-statement > p:not(.eyebrow), .about-section-head > p:last-child { color: var(--color-ondark-med); font-size: clamp(1rem, .96rem + .12vw, 1.0625rem); line-height: 1.75; }
.about-value-grid { align-items: stretch; }
.about-value { min-height: 260px; display: flex; flex-direction: column; }
.about-value h3 { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); }
.about-value > p:last-child { margin-top: auto; color: var(--color-ondark-med); }
.about-section-head { max-width: 780px; margin-bottom: var(--space-xl); }
.about-service-list { border-top: 1px solid rgba(117,148,198,.22); }
.about-service-list a { display: grid; grid-template-columns: 54px minmax(280px, 1fr) minmax(260px, .8fr) 24px; gap: var(--space-md); align-items: center; padding: 22px 4px; border-bottom: 1px solid rgba(117,148,198,.22); color: var(--color-ondark-high); text-decoration: none; transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease); }
.about-service-list a::after { content: "›"; color: var(--color-ember-glow); font-size: 1.35rem; }
.about-service-list a:hover { padding-inline: 14px; background: rgba(20,42,76,.42); }
.about-service-list span { color: var(--color-ember-glow); font-family: var(--font-mono); font-size: .78rem; }
.about-service-list strong { font-size: clamp(1.02rem, .96rem + .2vw, 1.15rem); }
.about-service-list em { color: var(--color-ondark-med); font-style: normal; }
.about-proof-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(44px, 8vw, 110px); align-items: start; }
.about-proof-grid > div:first-child > p:not(.eyebrow) { color: var(--color-ondark-med); font-size: 1.05rem; line-height: 1.75; }
.about-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.about-principles > .eyebrow { grid-column: 1 / -1; }
.about-principles > div { padding: var(--space-lg); border: 1px solid rgba(117,148,198,.22); border-radius: var(--radius-lg); background: rgba(7,18,36,.68); }
.about-principles h3 { margin-bottom: 8px; font-size: 1.12rem; }
.about-principles p { margin: 0; color: var(--color-ondark-med); font-size: .95rem; }
@media (max-width: 840px) {
  .about-proof-grid { grid-template-columns: 1fr; }
  .about-service-list a { grid-template-columns: 42px 1fr 20px; }
  .about-service-list em { grid-column: 2; }
  .about-service-list a::after { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 620px) {
  .about-principles { grid-template-columns: 1fr; }
  .about-principles > .eyebrow { grid-column: auto; }
  .about-service-list a { grid-template-columns: 34px 1fr 18px; gap: 10px; }
  .about-value { min-height: 0; }
}

/* Contact page: calmer typography for laptop and mobile screens. */
.contact-hero h1 { font-size: clamp(2rem, 1.5rem + 1.7vw, 3rem); }
.contact-hero .lede { font-size: 1rem; line-height: 1.65; max-width: 58ch; }
.contact-hero { padding-bottom: clamp(36px, 5vw, 64px); }
.contact-form input, .contact-form textarea, .contact-form select { font-size: .9375rem; line-height: 1.5; padding: 11px 14px; }
.contact-form label { font-size: .72rem; letter-spacing: .065em; }
.contact-heading > p:last-child { font-size: .85rem; }
.contact-guide > p, .contact-route > p { font-size: .9375rem; line-height: 1.65; }
.contact-form { gap: 20px; }
@media (max-width: 620px) {
  .contact-form input, .contact-form textarea, .contact-form select { font-size: 1rem; }
}

/* Keep About cards within their grid at every viewport. */
.about-value { min-width: 0; }
.about-value h3, .about-value p { overflow-wrap: anywhere; }

/* Managed security services: compact cards and space for deeper scope. */
.mss-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:28px; }
.mss-section-head { max-width:75ch; margin-bottom:36px; }
.mss-section-head h2 { font-size:clamp(1.5rem,1.25rem + .55vw,2rem); line-height:1.25; }
.mss-section-head p:last-child { margin-bottom:0; }
.mss-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.mss-card { padding:26px; min-height:280px; min-width:0; border:1px solid rgba(117,148,198,.24); border-radius:20px; background:linear-gradient(150deg,#0b192f,#070f1c); display:flex; flex-direction:column; }
.mss-card h3 { font-size:1.18rem; line-height:1.3; margin-bottom:18px; min-height:3.9em; }
.mss-card > p { font-size:.9375rem; line-height:1.65; margin-bottom:24px; }
.mss-card details { margin-top:auto; }
.mss-card summary { cursor:pointer; color:var(--color-ember-glow); font-size:.875rem; padding:6px 0; }
.mss-card summary:focus-visible { outline:2px solid var(--color-ember-glow); outline-offset:5px; border-radius:3px; }
.mss-detail { margin-top:18px; padding-top:18px; border-top:1px solid rgba(117,148,198,.2); font-size:.9375rem; }
.mss-detail ul { padding-left:18px; margin:0 0 20px; }
.mss-detail li { margin-bottom:12px; }
.mss-detail p:last-child { margin-bottom:0; }
.mss-card--invite { border-color:rgba(255,125,44,.4); }
.mss-card--invite h3 { min-height:0; }
.mss-card--invite .eyebrow { font-size:.65rem; margin-bottom:12px; }
.mss-card--invite .btn { align-self:flex-start; margin-top:auto; font-size:.8rem; padding:12px 18px; }
.mss-scope-note { max-width:85ch; margin:26px 0 0; font-size:.875rem; color:var(--color-ondark-med); }
.mss-deliverables { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.mss-deliverables h3,.mss-split h3,.mss-steps h3 { font-size:1.125rem; line-height:1.3; }
.mss-deliverables p { font-size:.9375rem; }
.mss-split { display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; }
.mss-split > * { min-width:0; }
.mss-split .panel { padding:28px; }
.mss-split .panel p { font-size:.9375rem; }
.mss-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding-left:20px; }
.mss-steps li { padding-left:8px; }
.mss-steps li::marker { color:var(--color-ember-glow); }
.mss-steps p { font-size:.9375rem; }
.mss-related a { display:block; padding:26px; }
.mss-related a:hover { text-decoration:none; border-color:rgba(255,125,44,.5); }
.mss-related span { font-size:.875rem; }
@media(max-width:1000px) { .mss-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mss-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .mss-grid,.mss-deliverables,.mss-split,.mss-steps { grid-template-columns:1fr; } .mss-split { gap:28px; } .mss-card { min-height:260px; } .mss-card h3 { min-height:0; } .mss-hero-actions { gap:18px; } }

/* Partner overview: four compact, distinct solution pathways. */
.partner-grid { grid-template-columns:repeat(4,minmax(0,280px)); gap:24px; }
.partner-card { min-width:0; min-height:320px; padding:24px; }
.partner-card h3 { font-family:var(--font-display); font-size:1.08rem; line-height:1.35; letter-spacing:-.01em; min-height:2.7em; margin:18px 0; }
.partner-card p { font-size:.90625rem; }
.partner-card .partner-link { margin-top:24px; }
.partner-pathway { margin-top:30px; padding-top:24px; border-top:1px solid rgba(117,148,198,.22); display:flex; gap:36px; align-items:center; }
.partner-pathway p { max-width:70ch; margin:0; font-size:.9375rem; }
.partner-pathway a { flex:0 0 235px; font-size:.875rem; }
.partner-support-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.partner-support-grid h3 { font-size:1.125rem; line-height:1.3; }
.partner-support-grid p { font-size:.9375rem; }
.partner-support-grid a { font-size:.875rem; }
@media(max-width:1150px) { .partner-grid { grid-template-columns:repeat(2,minmax(0,280px)); } }
@media(max-width:620px) { .partner-grid,.partner-support-grid { grid-template-columns:1fr; } .partner-card { min-height:260px; } .partner-card h3 { min-height:0; } .partner-pathway { flex-direction:column; align-items:flex-start; gap:18px; } .partner-pathway a { flex:auto; } }

/* Nozomi: public platform diagram and scoped assessment outputs. */
.nozomi-coverage-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(32px,5vw,72px); align-items: center; }
.nozomi-architecture { margin: 0; min-width: 0; padding: clamp(16px,2.5vw,28px); border: 1px solid rgba(84,197,223,.28); border-radius: var(--radius-xl); background: rgba(8,16,31,.6); }
.nozomi-architecture > a { display: block; border-radius: 12px; overflow: hidden; background: #fff; }
.nozomi-architecture img { display: block; width: 100%; height: auto; }
.nozomi-architecture figcaption { display: grid; gap: 10px; margin-top: 20px; color: var(--color-ondark-med); font-size: .8rem; line-height: 1.6; }
.nozomi-architecture figcaption b { color: var(--color-ondark-high); font-size: .95rem; }
.nozomi-architecture figcaption a { color: #54c5df; text-underline-offset: 4px; }
.nozomi-diagram-hint { font-size: .72rem; }
.nozomi-assessment-list { padding-left: 1.15em; margin: 16px 0 0; color: var(--color-ondark-med); font-size: .8rem; line-height: 1.65; }
.nozomi-assessment-list li + li { margin-top: 8px; }
@media (max-width: 900px) { .nozomi-coverage-grid { grid-template-columns: minmax(0,1fr); } }

/* Larger deployment illustration from the supplied public platform overview. */
.nozomi-coverage-grid > div, .nozomi-coverage-grid > figure { grid-column: 1 / -1; }
.nozomi-coverage-grid .solution-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 48px; }
.nozomi-coverage-grid .nozomi-architecture { width: 100%; box-sizing: border-box; }
.nozomi-architecture > a { background: #f4f4f6; }
@media (max-width: 600px) { .nozomi-coverage-grid .solution-checklist { grid-template-columns: minmax(0,1fr); } }

/* Balanced Nozomi diagram: readable desktop scale with responsive smaller screens. */
.nozomi-coverage-grid .nozomi-architecture { width: 75%; max-width: 1000px; justify-self: center; }
@media (max-width: 900px) { .nozomi-coverage-grid .nozomi-architecture { width: 100%; } }

/* Persistent enquiry validation messages. */
.field-error { color:#ffb89c; font-size:0.875rem; line-height:1.5; margin:0.5rem 0 0; }
.field-help { color:#aab8cf; font-size:0.8125rem; line-height:1.5; margin:0.5rem 0 0; }
.form [aria-invalid="true"] { border-color:#ff985b; }
.field-error[hidden] { display:none; }

/* A submitted enquiry becomes a clear confirmation, with an explicit new-enquiry action. */
.form[hidden], .form-success[hidden], .contact-heading[hidden] { display:none; }
.form-success { border:1px solid #c36b35; border-radius:1rem; padding:clamp(1.5rem,4vw,3rem); background:#0b172b; scroll-margin-top:8rem; }
.form-success:focus-visible { outline:2px solid #ff985b; outline-offset:5px; }
.form-success__check { display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; border:1px solid #ff985b; border-radius:50%; color:#ff985b; font-size:1.75rem; margin-bottom:1.25rem; }
.form-success h2 { margin:0 0 1rem; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.2; }
.form-success p { color:#bdc9dd; margin:0 0 1.75rem; line-height:1.65; }
.form-success .btn { max-width:100%; white-space:normal; text-align:center; }

/* Keep field names and guidance readable against the dark contact panel. */
.contact-form label:not(.form-consent) { color:#d9e4f4; font-size:0.875rem; font-weight:600; line-height:1.5; letter-spacing:0.055em; }
.contact-heading > p:last-child, .contact-form .field-help, .contact-form .form-status { color:#c1cee1; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#aebdd2; opacity:1; }

/* Keep the mobile message immediate; static decorative surfaces retain their
   approved colours without continuously repainting large offscreen sections. */
@media(max-width:840px){
  .heroV .fadein{transition:none}
  .heroA,.heroA *,.dots,.band__glow,.cta-section::before,.cta-section::after,
  .timeline .method-pulse,.tl-step::before,.trace-theme .nd-e{animation:none!important}
  .timeline .method-pulse{opacity:0!important}
  .trace-theme.is-drawn path{animation:none!important;stroke-dashoffset:0!important}
}
/* White action text needs sufficient contrast at the site's small button size. */
.btn.btn--primary,.nav .btn--primary{background:#c2410c;color:#fff}
.btn.btn--primary:hover,.nav .btn--primary:hover{background:#9a3412;color:#fff}

/* Public solution overviews: native text, original vector icons, no media or JS. */
.solution-map{--map-accent:#7ddbd3;--map-wash:rgba(24,109,113,.17);margin:32px 0 0;padding:clamp(20px,3vw,40px);border:1px solid color-mix(in srgb,var(--map-accent) 30%,transparent);border-radius:24px;background:radial-gradient(ellipse at 50% 0,var(--map-wash),transparent 75%),#0a1426;color:#e7efff}
.solution-map--fudo{--map-accent:#c4b5fd;--map-wash:rgba(105,72,177,.2)}
.solution-map ol,.solution-map ul{list-style:none;padding:0;margin:0}
.solution-map__path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:stretch}
.solution-map__path--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.solution-map__node{position:relative;min-width:0;border:1px solid #33465f;border-radius:16px;padding:24px;background:rgba(8,17,32,.7)}
.solution-map__node--core{border-color:var(--map-accent);background:var(--map-wash)}
.solution-map__node:not(:last-child)::after{content:'↔';position:absolute;left:100%;top:50%;width:40px;text-align:center;color:var(--map-accent);font-size:24px;transform:translateY(-50%)}
.solution-map__path--four .solution-map__node::after{width:32px}
.solution-map__icon{width:36px;height:36px;color:var(--map-accent);display:block;margin-bottom:20px}
.solution-map h3{font-size:1.05rem;line-height:1.4;color:#f1f5ff;margin:0 0 12px;letter-spacing:-.01em}
.solution-map p{font-size:.875rem;line-height:1.65;color:#c2cfe3;margin:0}
.solution-map .solution-map__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.solution-map__tags li{font-size:.75rem;line-height:1.5;color:#e7efff;padding:5px 10px;border:1px solid #41556d;border-radius:8px;background:#111f34}
.solution-map__pair{display:grid;gap:12px;margin-top:20px}
.solution-map__pair div{border-left:2px solid var(--map-accent);padding-left:12px}
.solution-map__pair b{display:block;color:var(--map-accent);font-size:.875rem}
.solution-map__pair span{display:block;font-size:.8125rem;line-height:1.5;color:#d1dcef}
.solution-map__workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.solution-map__workflow>li{position:relative;min-width:0;padding:24px;border:1px solid #33465f;border-radius:16px;background:rgba(8,17,32,.6)}
.solution-map__workflow>li:not(:last-child)::after{content:'→';position:absolute;color:var(--map-accent);font-size:22px;left:100%;top:50%;width:24px;text-align:center;transform:translateY(-50%)}
@media(min-width:841px){
 .solution-map__workflow>li:nth-child(4){grid-column:3;grid-row:2}
 .solution-map__workflow>li:nth-child(5){grid-column:2;grid-row:2}
 .solution-map__workflow>li:nth-child(6){grid-column:1;grid-row:2}
 .solution-map__workflow>li:nth-child(3)::after{content:'↓';left:50%;top:100%;height:24px;line-height:24px;transform:translateX(-50%)}
 .solution-map__workflow>li:nth-child(4)::after,.solution-map__workflow>li:nth-child(5)::after{content:'←';left:auto;right:100%}
}
@media(min-width:541px) and (max-width:840px){
 .solution-map__workflow>li:nth-child(3){grid-column:2;grid-row:2}
 .solution-map__workflow>li:nth-child(4){grid-column:1;grid-row:2}
 .solution-map__workflow>li:nth-child(2)::after,.solution-map__workflow>li:nth-child(4)::after{content:'↓';left:50%;top:100%;height:24px;line-height:24px;transform:translateX(-50%)}
 .solution-map__workflow>li:nth-child(3)::after{content:'←';left:auto;right:100%}
}
.solution-map__number{position:absolute;right:20px;top:20px;color:var(--map-accent);font:600 .875rem var(--font-mono)}
.solution-map .solution-map__return{display:flex;align-items:center;gap:12px;margin-top:24px;padding:16px 20px;border:1px dashed #547d87;border-radius:12px;color:#d6e5f4}
.solution-map__return .solution-map__icon{width:24px;height:24px;flex:0 0 24px;margin:0}
.solution-map figcaption{font-size:.8125rem;line-height:1.65;color:#b5c5dd;border-top:1px solid #33465f;padding-top:20px;margin-top:24px}
.solution-map figcaption b{display:block;color:#e7efff;margin-bottom:6px}
.solution-map figcaption a{color:var(--map-accent);text-decoration:underline;text-underline-offset:4px}
.solution-map a:focus-visible{outline:2px solid var(--map-accent);outline-offset:4px}
@media(max-width:1100px){.solution-map__path--four{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.solution-map__path--four .solution-map__node::after{display:none}}
@media(max-width:840px){.solution-map__path,.solution-map__path--four{grid-template-columns:minmax(0,1fr);gap:32px}.solution-map__node:not(:last-child)::after{left:50%;top:100%;height:32px;width:32px;transform:translateX(-50%);content:'↕';line-height:32px}.solution-map__path--four .solution-map__node:not(:last-child)::after{display:block}.solution-map__workflow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.solution-map__workflow{grid-template-columns:minmax(0,1fr);gap:24px}.solution-map__workflow>li:not(:last-child)::after{content:'↓';left:50%;top:100%;height:24px;line-height:24px;transform:translateX(-50%)}.solution-map__node,.solution-map__workflow>li{padding:20px}.solution-map__icon{margin-bottom:16px}}

/* Keep approved fixed navigation below the WordPress admin toolbar. */
body.admin-bar .nav { top: 32px; }
@media(max-width:782px) { body.admin-bar .nav { top:46px; } }

.article-back-nav { display: contents; }