/* ═══════════════════════════════════════════════════════════════
   Bax Advisory — site styles (v2 multi-page)
   Brand: navy #0D1B2A · blue #1A56DB · tint #E8EFFE
   Type:  Playfair Display (display) · Inter (body) · Raleway (small caps)
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #0D1B2A;
  --navy-mid:   #12233A;
  --navy-soft:  #16273F;
  --blue:       #1A56DB;
  --blue-hover: #1648C0;
  --blue-soft:  #5B8CF5;
  --tint:       #E8EFFE;
  --white:      #FFFFFF;
  --off-white:  #F7F8FA;
  --text:       #0D1B2A;
  --text-mid:   #374151;
  --text-light: #6B7280;
  --border:     #E5E7EB;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 4px 24px rgba(13,27,42,0.07);
  --shadow-lift:0 12px 40px rgba(13,27,42,0.12);
  --wrap:       1160px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: var(--blue); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 5%; }
@media (min-width: 1300px) { .wrap { padding: 0; } }

/* ── Typography helpers ── */
.eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--blue-soft); }

.display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

h1.display { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2.display { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3.display { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

.lede {
  font-size: 1.12rem;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 660px;
}
.on-dark .lede { color: rgba(255,255,255,0.68); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.15s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,86,219,0.35); }
.btn-ghost { border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.85); background: transparent; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.65); color: var(--white); }
.btn-ghost-dark { border: 1.5px solid var(--border); color: var(--text); background: transparent; }
.btn-ghost-dark:hover { border-color: var(--blue); color: var(--blue); }
.btn-lg { padding: 1.05rem 2.3rem; font-size: 1rem; }

/* ═══ NAV ═══ */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 68px;
  display: flex;
  align-items: center;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled, .site-nav.solid {
  background: rgba(13,27,42,0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,0.07);
}
.site-nav .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.nav-logo svg { flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; gap: 2px; }
.nav-logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav-logo-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 0.56rem;
  color: var(--blue-soft);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-links { display: flex; gap: 1.9rem; list-style: none; align-items: center; }
.nav-links a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--white); }
.nav-links a[aria-current="page"] { position: relative; }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--blue-soft);
  border-radius: 2px;
}
.nav-cta {
  background: var(--blue);
  color: var(--white) !important;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius);
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--blue-hover); }
.nav-cta::after { display: none !important; }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.4rem;
}
.mobile-menu {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  z-index: 190;
  background: rgba(13,27,42,0.98);
  backdrop-filter: blur(10px);
  padding: 1rem 5% 1.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ═══ HOME HERO ═══ */
.hero-home {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
  padding: 120px 0 90px;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video, .hero-media canvas, .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  /* readability scrim */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.72) 45%, rgba(13,27,42,0.45) 100%);
}
.hero-home .wrap { position: relative; z-index: 1; width: 100%; }

.hero-content { max-width: 720px; }
.hero-content h1 { color: var(--white); margin-bottom: 1.6rem; }
.hero-content h1 em { font-style: italic; color: var(--blue-soft); }
.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: 2.4rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-scrollhint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.hero-scrollhint::after {
  content: '';
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* ═══ INNER PAGE HERO ═══ */
.hero-page {
  position: relative;
  background: var(--navy);
  padding: 150px 0 74px;
  overflow: hidden;
}
.hero-page::before {
  /* drifting glow — MorrFit-proven pattern, Bax palette */
  content: '';
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,86,219,0.32) 0%, rgba(26,86,219,0) 65%);
  top: -280px; right: -140px;
  animation: heroDrift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-page::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,140,245,0.14) 0%, rgba(91,140,245,0) 60%);
  bottom: -220px; left: -120px;
  animation: heroDrift 20s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes heroDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-90px, 60px) scale(1.15); }
}
.hero-page .wrap { position: relative; z-index: 1; }
.hero-page h1 { color: var(--white); max-width: 800px; margin-bottom: 1.2rem; }
.hero-page .lede { color: rgba(255,255,255,0.66); }

/* ═══ SECTIONS ═══ */
section { padding: 92px 0; }
section.tight { padding: 64px 0; }
.bg-off { background: var(--off-white); }
.bg-navy { background: var(--navy); }
.bg-navy-grad { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%); }
.bg-tint { background: var(--tint); }

.section-head { max-width: 680px; margin-bottom: 3.2rem; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 1rem; }
.bg-navy h2.display, .bg-navy-grad h2.display, .bg-navy h3.display, .bg-navy-grad h3.display { color: var(--white); }

/* ── Reveal (JS adds .in) ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

/* ═══ MARQUEE TICKER ═══ */
.ticker {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: var(--navy-mid);
  padding: 1.1rem 0;
}
.ticker-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: tickerScroll 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}
.ticker-item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-soft);
  flex-shrink: 0;
}

/* ═══ IN / ON SPLIT ═══ */
.inon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
}
.inon-card {
  border-radius: var(--radius-lg);
  padding: 2.6rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inon-card.dark { background: var(--navy); color: var(--white); }
.inon-card.light { background: var(--tint); }
.inon-tag {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.inon-card.dark .inon-tag { color: var(--blue-soft); }
.inon-card.light .inon-tag { color: var(--blue); }
.inon-card h3 { font-size: 1.45rem; margin-bottom: 0.9rem; }
.inon-card.dark h3 { color: var(--white); }
.inon-card p { font-size: 0.95rem; line-height: 1.75; }
.inon-card.dark p { color: rgba(255,255,255,0.65); }
.inon-card.light p { color: var(--text-mid); }
.inon-list { list-style: none; margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.inon-list li { display: flex; gap: 0.6rem; font-size: 0.9rem; align-items: flex-start; }
.inon-list li::before { content: '→'; color: var(--blue-soft); font-weight: 600; flex-shrink: 0; }
.inon-card.light .inon-list li::before { color: var(--blue); }
.inon-card.dark .inon-list li { color: rgba(255,255,255,0.72); }
.inon-link { margin-top: auto; padding-top: 1.6rem; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.inon-card.dark .inon-link { color: var(--blue-soft); }
.inon-card.light .inon-link { color: var(--blue); }
.inon-link:hover { text-decoration: underline; }

/* ═══ WORKFLOW DIAGRAM ═══ */
.workflow { position: relative; }
.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.workflow-line {
  position: absolute;
  left: 27px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.workflow-line-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--blue-soft), var(--blue));
  transform: scaleY(0);
  transform-origin: top;
}
.wf-step {
  display: flex;
  gap: 1.6rem;
  padding: 1.4rem 0;
  align-items: flex-start;
  position: relative;
  opacity: 0.32;
  transition: opacity 0.5s ease;
}
.wf-step.active { opacity: 1; }
.wf-node {
  width: 56px; height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: var(--navy-soft);
  border: 2px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
}
.wf-step.active .wf-node {
  border-color: var(--blue-soft);
  background: var(--blue);
  box-shadow: 0 0 28px rgba(26,86,219,0.5);
}
.wf-node svg { width: 24px; height: 24px; stroke: rgba(255,255,255,0.85); }
.wf-body { padding-top: 0.35rem; }
.wf-actor {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 0.3rem;
}
.wf-body strong { display: block; color: var(--white); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; }
.wf-body p { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.65; max-width: 480px; }

/* ═══ STAT COUNTERS ═══ */
.stats-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stat-item .stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}
.stat-item .stat-num em { font-style: normal; color: var(--blue-soft); }
.stat-item .stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ═══ CARDS ═══ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card-grid.two { grid-template-columns: 1fr 1fr; }

.card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  background: var(--white);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.card:hover { border-color: var(--blue); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.card p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.7; }

.card-icon {
  width: 46px; height: 46px;
  background: var(--tint);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
}
.card-icon svg { width: 22px; height: 22px; stroke: var(--blue); }

.card-step {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--tint);
  -webkit-text-stroke: 1px var(--blue-soft);
  line-height: 1;
  margin-bottom: 1.1rem;
}

.card ul { list-style: none; margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; }
.card ul li { font-size: 0.88rem; color: var(--text-mid); display: flex; gap: 0.6rem; align-items: flex-start; }
.card ul li::before { content: '✓'; color: var(--blue); font-weight: 700; min-width: 14px; }

/* ── Scroll stack: separate cards that pin and pile up as you scroll ──
   Ported from the ReactBits ScrollStack pattern, rebuilt in plain CSS + JS.
   The original is a React component driven by Lenis (a smooth-scroll library);
   neither is used here. React for one animation is absurd on a static site, and
   Lenis only adds scroll inertia, which hijacks native scrolling for no gain on
   this page and would need a new CSP allowance. The maths in script.js is the
   same; the motion is driven by native scroll instead.

   Base layout (no JS, or prefers-reduced-motion) is a plain stack of cards, so
   the section is fully readable without any of this. JS adds .enhanced. */
.scroll-stack { max-width: 820px; margin: 0 auto; }

.scroll-stack-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
  padding: 3rem 3.2rem;
  margin-bottom: 1.5rem;
  /* No fixed height. The previous build pinned panels inside a 420px tile,
     which quietly clipped the copy. Content sets the height now. */
}
.scroll-stack-card:last-of-type { margin-bottom: 0; }
.scroll-stack-card .card-icon { margin-bottom: 1.4rem; }
.scroll-stack-card h3 {
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 0.8rem;
}
.scroll-stack-card p {
  font-size: 1rem; color: var(--text-mid);
  line-height: 1.75; max-width: 560px;
}
/* ── enhanced (scroll-linked) mode ──
   The stage is a sticky window with overflow:hidden. Cards two and three sit
   BELOW its bottom edge, clipped and invisible, then rise into frame and land on
   the pile. That clipping IS the effect: the cards appear out of nowhere instead
   of sitting on the page from the start.

   .scroll-stack's height (the scroll runway) is set by script.js from the real
   card height, so the section ends shortly after the last card lands rather than
   leaving a screenful of dead space below it. */
/* Drop this section's bottom padding in enhanced mode only. The stage already
   carries its own breathing room, so the section's usual 92px sat on top of the
   tail and the NEXT section's 92px, stacking up into a screenful of dead grey
   under the finished pile. The next section's padding still separates them.
   Scoped with :has() so the no-JS fallback keeps its normal spacing. */
section:has(.scroll-stack.enhanced) { padding-bottom: 0; }

.scroll-stack.enhanced { position: relative; }
.scroll-stack.enhanced .scroll-stack-stage {
  position: sticky;
  top: 96px;
  overflow: hidden;
  /* breathing room for the card shadows, which the clip would otherwise cut */
  padding: 26px 26px 0;
}
.scroll-stack.enhanced .scroll-stack-card {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 26px;
  margin: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
}
/* ── The Advisers AI Brief promo band (home page) ──
   Copy on the left, a mock issue cover on the right. The cover reuses the
   .brief-cover-* type from advisers-ai-brief/brief.css, but those styles are not
   loaded on the home page, so the few properties it needs are restated here. */
.brief-promo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}
.brief-promo-copy h2 { color: var(--white); margin-bottom: 1.1rem; }
.brief-promo-copy .lede { color: rgba(255, 255, 255, 0.66); }

.brief-promo-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 3;
  padding: 2rem 2.1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #12233A 0%, #1B3557 60%, #21406A 100%);
  border: 1px solid rgba(91, 140, 245, 0.25);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.brief-promo-cover::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -100px;
  width: 280px; height: 280px;
  background: linear-gradient(135deg, rgba(91, 140, 245, 0.22), rgba(26, 86, 219, 0.04));
  transform: rotate(45deg);
  border-radius: 30px;
  pointer-events: none;
}
.brief-promo-cover > * { position: relative; z-index: 1; }
.brief-promo-cover:hover {
  transform: translateY(-4px);
  border-color: var(--blue-soft);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}
.brief-promo-cover .brief-cover-masthead {
  font-family: 'Raleway', sans-serif;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue-soft);
}
.brief-promo-cover .brief-cover-no {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 3rem; line-height: 0.9;
  color: var(--white);
}
.brief-promo-cover .brief-cover-no span {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.5rem;
}
.brief-promo-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 860px) {
  .brief-promo { grid-template-columns: 1fr; gap: 2.4rem; }
  .brief-promo-cover { aspect-ratio: 16 / 10; }
}

@media (max-width: 760px) {
  .scroll-stack-card { padding: 2.2rem 1.8rem; }
  .scroll-stack.enhanced .scroll-stack-stage { top: 76px; padding: 18px 18px 0; }
  .scroll-stack.enhanced .scroll-stack-card { left: 18px; right: 18px; top: 18px; min-height: 260px; }
}

/* dark card variant */
.card.on-navy {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.card.on-navy:hover { border-color: var(--blue-soft); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.card.on-navy h3 { color: var(--white); }
.card.on-navy p, .card.on-navy ul li { color: rgba(255,255,255,0.65); }
.card.on-navy .card-icon { background: rgba(26,86,219,0.18); }
.card.on-navy .card-icon svg { stroke: var(--blue-soft); }

/* ═══ CASE STUDY ═══ */
.case-hero-band {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 1.6rem 2rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  margin-top: 2.2rem;
}
.case-fact .cf-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.42);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.case-fact .cf-value { font-size: 0.95rem; color: var(--white); font-weight: 600; }

.ppp { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }

.case-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  background: var(--off-white);
}
.case-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.case-shot-caption { font-size: 0.8rem; color: var(--text-light); text-align: center; padding: 0.8rem; }

/* Bax OS live cockpit preview (iframe in a screen frame) */
.os-frame {
  max-width: 1080px; margin: 2.6rem auto 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #05070f;
}
.os-frame-bar {
  height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: linear-gradient(180deg, #141a2c, #0b1020);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.os-frame-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.os-frame iframe {
  display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;
  background-size: cover; background-position: center;
}
.os-frame-caption { text-align: center; margin-top: 1.1rem; font-size: 0.85rem; color: rgba(255,255,255,0.55); }
@media (max-width: 760px) { .os-frame iframe { aspect-ratio: 3 / 4; } }

/* Bax OS architecture schematic (inline SVG; scrolls horizontally on narrow screens) */
.schematic { max-width: 1080px; margin: 2.6rem auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schematic svg {
  width: 100%; min-width: 780px; height: auto; display: block;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

/* Bax OS register-interest capture (sits inside the dark cta-band) */
.register-form {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  justify-content: center; align-items: center;
  max-width: 540px; margin: 2.2rem auto 0;
}
.register-form input[type="email"] {
  flex: 1 1 260px; min-width: 220px;
  padding: 0.95rem 1.15rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: #fff; font-size: 1rem; font-family: inherit;
}
.register-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.register-form input[type="email"]:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.1); }
.register-msg { display: block; margin-top: 1.1rem; font-size: 0.95rem; color: rgba(255,255,255,0.85); min-height: 1.2em; }
.register-msg.error { color: #ffb4b4; }

/* mobile shot rendered inside a phone frame so it reads as mobile-first, not a bad crop */
.case-shot.is-mobile { background: linear-gradient(160deg, #1E3A5F, #0F1E33); }
.case-shot.is-mobile .case-phone-stage {
  aspect-ratio: 4 / 3;
  position: relative;
}
.case-shot.is-mobile .case-phone {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  aspect-ratio: 9 / 19;
  border-radius: 20px;
  border: 3px solid #33496b;
  background: #0b1524;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.case-shot.is-mobile .case-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.case-shot.is-mobile .case-shot-caption { color: rgba(255,255,255,0.72); }

.case-quote {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 3rem;
  position: relative;
  max-width: 820px;
  margin: 3.5rem auto 0;
}
.case-quote::before {
  content: '\201C';
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 6rem;
  color: var(--blue-soft);
  position: absolute;
  top: 0.4rem; left: 1.6rem;
  opacity: 0.5;
  line-height: 1;
}
.case-quote p { font-size: 1.2rem; color: rgba(255,255,255,0.88); line-height: 1.8; font-style: italic; }
.case-quote-attr { margin-top: 1.4rem; font-size: 0.85rem; color: rgba(255,255,255,0.45); font-style: normal; }

/* ═══ CAPABILITY GALLERY ═══ */
.cap-tagrow { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.cap-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--tint);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
}
.card.on-navy .cap-tag { background: rgba(26,86,219,0.2); color: var(--blue-soft); }

/* ═══ BUILD LOG (Bax OS) ═══ */
.log-timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 2.2rem; }
.log-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--border);
}
.log-entry { position: relative; padding-bottom: 2.6rem; }
.log-entry:last-child { padding-bottom: 0; }
.log-entry::before {
  content: '';
  position: absolute;
  left: -2.2rem;
  top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
}
.log-date {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.3rem;
}
.log-entry h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; letter-spacing: -0.015em; }
.log-entry p { font-size: 0.93rem; color: var(--text-mid); line-height: 1.7; max-width: 620px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(26,86,219,0.12);
  border: 1px solid rgba(91,140,245,0.4);
  color: var(--blue-soft);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
}
.status-pill::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ═══ ABOUT — BIO ROWS (text left, photo tile right) ═══ */
.bio-rows { display: flex; flex-direction: column; }
.bio-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding: 3.2rem 0;
}
.bio-row + .bio-row { border-top: 1px solid var(--border); }
.bio-row-text h3 { font-size: 1.45rem; margin: 0.2rem 0 0.9rem; }
.bio-row-text p { font-size: 1rem; color: var(--text-mid); line-height: 1.85; }
.bio-row-text p + p { margin-top: 0.9rem; }
.bio-row-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy-mid);
  box-shadow: var(--shadow-lift);
}
.bio-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-row-photo .bio-ph {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(160deg, var(--navy-mid), var(--navy-soft));
}

/* credentials */
.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.credential {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  transition: border-color 0.2s, background 0.2s;
}
.credential:hover { border-color: rgba(91,140,245,0.4); background: rgba(255,255,255,0.07); }
.credential-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: var(--blue-soft); margin-top: 7px; }
.credential-text { font-size: 0.88rem; color: rgba(255,255,255,0.62); line-height: 1.55; }
.credential-text strong { display: block; color: rgba(255,255,255,0.92); font-weight: 600; margin-bottom: 0.2rem; }

/* ═══ CTA BAND (every page ends here) ═══ */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #142B52 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 100px 0;
}
.cta-band::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,86,219,0.3) 0%, transparent 65%);
  top: -260px; left: 50%;
  transform: translateX(-50%);
  animation: heroDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); max-width: 640px; margin: 0 auto 1.1rem; }
.cta-band .lede { color: rgba(255,255,255,0.80); margin: 0 auto 2.6rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-alt {
  margin-top: 2.2rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
}
.cta-alt a { color: var(--blue-soft); font-weight: 600; text-decoration: none; }
.cta-alt a:hover { text-decoration: underline; }

/* ═══ CONTACT PAGE ═══ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; }
.contact-aside .contact-block { margin-bottom: 2rem; }
.contact-block .cb-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.4rem;
}
.contact-block a { font-size: 1.15rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }
.contact-block p { font-size: 0.88rem; color: var(--text-light); margin-top: 0.3rem; }
.calendly-frame {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 680px;
}
.calendly-frame iframe { width: 100%; height: 680px; border: none; }

/* ═══ ASSESSMENT (lead magnet) ═══ */
.quiz-shell { max-width: 720px; margin: 0 auto; }
.quiz-progress {
  height: 6px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 2.4rem;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  border-radius: 100px;
  width: 0%;
  transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
.quiz-count { font-size: 0.82rem; color: var(--text-light); font-weight: 600; margin-bottom: 0.7rem; letter-spacing: 0.06em; }
.quiz-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.6rem;
  box-shadow: var(--shadow);
}
.quiz-q { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; margin-bottom: 1.6rem; }
.quiz-opts { display: flex; flex-direction: column; gap: 0.8rem; }
.quiz-opt {
  text-align: left;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 1rem 1.3rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  line-height: 1.5;
}
.quiz-opt:hover { border-color: var(--blue); background: var(--tint); transform: translateX(4px); }
.quiz-back {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1.4rem;
  padding: 0.4rem 0;
  font-family: inherit;
}
.quiz-back:hover { color: var(--blue); }

.quiz-gate { text-align: center; }
.quiz-gate h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.quiz-gate p { color: var(--text-mid); max-width: 480px; margin: 0 auto 1.8rem; }
.quiz-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 420px; margin: 0 auto; }
.quiz-form input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.95rem 1.2rem;
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
}
.quiz-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,86,219,0.14); }
.quiz-privacy { font-size: 0.78rem; color: var(--text-light); margin-top: 1rem; }
.quiz-error { color: #DC2626; font-size: 0.85rem; display: none; }
.quiz-error.show { display: block; }

.quiz-done { text-align: center; padding: 1rem 0; }
.quiz-done .done-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.quiz-done .done-icon svg { width: 34px; height: 34px; stroke: var(--blue); }
.quiz-done h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.quiz-done p { color: var(--text-mid); max-width: 460px; margin: 0 auto; }

/* ═══ FOOTER ═══ */
footer.site-footer {
  background: var(--navy);
  padding: 64px 0 36px;
  color: rgba(255,255,255,0.55);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-about p { font-size: 0.88rem; line-height: 1.7; max-width: 340px; margin-top: 1rem; }
.footer-col h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-top: 1.8rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.32);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
  .inon-grid, .card-grid, .ppp, .cred-grid, .card-grid.two { grid-template-columns: 1fr; }
  .bio-row { grid-template-columns: 1fr; gap: 1.8rem; padding: 2.6rem 0; }
  .bio-row-photo { max-width: 480px; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  section { padding: 72px 0; }
  .hero-page { padding: 130px 0 60px; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .hero-home { min-height: 80vh; padding: 110px 0 80px; }
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }
  .quiz-card { padding: 1.8rem 1.4rem; }
  .case-quote { padding: 2.4rem 1.8rem; }
  .workflow-line { left: 23px; }
  .wf-node { width: 48px; height: 48px; min-width: 48px; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-page::before, .hero-page::after, .cta-band::before { animation: none; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .hero-scrollhint::after { animation: none; }
  .status-pill::before { animation: none; }
  .wf-step { opacity: 1; }
  .workflow-line-fill { transform: none; }
  .hero-media video, .hero-media canvas { display: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}