/* ============================================================
   EXPRESSION — product sub-site chrome
   Mirrors the Gene parent-site visual system: cream #F2F2F2 page,
   floating dark pill top nav with the Gene spark mark (no GENE
   wordmark on this surface), Geist + Merriweather italic
   typography, dark editorial footer.
   Expression is Gene's product arm: an enterprise generative
   marketing engine for healthcare and life sciences brands.
   ============================================================ */

/* ---------- pre-paint guards (kill FOUC) ------------------- */
html, body {
  background: #F2F2F2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

:root {
  --ex-ink:        #0a0a0a;
  --ex-ink-2:      rgba(10,10,10,0.72);
  --ex-ink-3:      rgba(10,10,10,0.55);
  --ex-ink-4:      rgba(10,10,10,0.38);
  --ex-cream:      #F2F2F2;
  --ex-paper:      #FFFFFF;
  --ex-line:       rgba(10,10,10,0.10);
  --ex-line-soft:  rgba(10,10,10,0.06);
  --ex-pill:       #1b1b1b;
  --ex-pill-2:     #111111;
  --ex-radius:     20px;
  --ex-radius-sm:  12px;
  --ex-shadow:     0 1px 0 rgba(10,10,10,0.04), 0 20px 60px -28px rgba(10,10,10,0.18);

  /* ---------- Spacing system, mirrors Gene's tokens 1:1
     ---------- so /expression reads with the same rhythm
     ---------- as the parent site (brand-elevate.css) */
  --ex-container-max:  1440px;
  --ex-pwx:            80px;   /* page-edge gutter */
  --ex-gutter:         40px;
  --ex-gutter-half:    20px;
  --ex-section-y:      104px;  /* default section rhythm */
  --ex-section-y-lg:   144px;
  --ex-section-y-sm:   56px;
  --ex-block-y:        48px;
  --ex-nav-offset:     88px;

  /* legacy aliases kept for any rules still referring to them */
  --ex-max:            var(--ex-container-max);
}

@media (max-width: 1280px) {
  :root {
    --ex-pwx:          56px;
    --ex-section-y:    88px;
    --ex-section-y-lg: 120px;
    --ex-section-y-sm: 48px;
  }
}
@media (max-width: 960px) {
  :root {
    --ex-pwx:          40px;
    --ex-gutter:       32px;
    --ex-gutter-half:  16px;
    --ex-section-y:    72px;
    --ex-section-y-lg: 96px;
    --ex-section-y-sm: 40px;
    --ex-block-y:      36px;
    --ex-nav-offset:   84px;
  }
}
@media (max-width: 640px) {
  :root {
    --ex-pwx:          20px;
    --ex-gutter:       20px;
    --ex-gutter-half:  12px;
    --ex-section-y:    56px;
    --ex-section-y-lg: 72px;
    --ex-section-y-sm: 32px;
    --ex-block-y:      28px;
    --ex-nav-offset:   72px;
  }
}

body.ex-page {
  background: var(--ex-cream);
  color: var(--ex-ink);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-top: 0;
}
body.ex-page * { box-sizing: border-box; }
body.ex-page a { color: inherit; text-decoration: none; }
body.ex-page em {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
body.ex-page p {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: var(--ex-ink-2);
}
body.ex-page .ex-section--dark p,
body.ex-page .ex-ctaband p,
body.ex-page .ex-footer p { color: rgba(255,255,255,0.7); }
body.ex-page h1, body.ex-page h2, body.ex-page h3, body.ex-page h4 {
  margin: 0 0 0.6em;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ex-ink);
}
body.ex-page .ex-section--dark h2,
body.ex-page .ex-section--dark h3,
body.ex-page .ex-section--dark h4 { color: #fff; }
body.ex-page .ex-ctaband__h,
body.ex-page .ex-footer__h { color: #fff; }
body.ex-page .ex-footer h2,
body.ex-page .ex-footer h3,
body.ex-page .ex-footer h4 { color: #F2F2F2; }
body.ex-page img, body.ex-page svg { display: block; max-width: 100%; }
body.ex-page main { display: block; padding-top: var(--ex-nav-offset); }

.ex-container {
  width: 100%;
  max-width: var(--ex-container-max);
  margin-inline: auto;
  padding-inline: var(--ex-pwx);
}

/* ============================================================
   TOP NAV — floating dark pill (mirrors .gene-topnav)
   Only the Gene spark mark — no GENE wordmark on Expression.
   Intro: pill arrives collapsed → wing unfurls (Gene parity).
   ============================================================ */
@keyframes exNavDrop {
  from { transform: translate(-50%, -120%); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}
.ex-topnav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px 10px 16px;
  background: var(--ex-pill);
  border-radius: 999px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.18);
  max-width: calc(100vw - 40px);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  animation: exNavDrop .7s cubic-bezier(.2,.7,.2,1) both;
}
.ex-topnav.is-scrolled {
  background: var(--ex-pill-2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.ex-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 4px;
  line-height: 1;
}
.ex-topnav__brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  flex: 0 0 auto;
}
.ex-topnav__brand-mark svg { width: 100%; height: 100%; fill: #fff; display: block; }

/* EXPRESSION wordmark — mirrors .gene-topnav__wordmark treatment exactly */
.ex-topnav__wordmark {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0.04em;
  color: #ffffff !important;
  line-height: 1;
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease 0.25s,
              margin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ex-topnav__wing {
  display: block;
  overflow: hidden;
  max-width: 1200px;
  transition: max-width .8s cubic-bezier(.2,.7,.2,1) .15s;
}
.ex-topnav__wing-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-left: 32px;
  width: max-content;
  opacity: 1;
  transition: opacity .4s ease .35s;
}

/* Intro state: just the spark, no wing, no wordmark */
.ex-topnav.is-intro { gap: 0; }
.ex-topnav.is-intro .ex-topnav__wordmark {
  max-width: 0;
  opacity: 0;
  margin-left: -10px;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ex-topnav.is-intro .ex-topnav__wing {
  max-width: 0;
  transition: max-width .45s ease;
}
.ex-topnav.is-intro .ex-topnav__wing-inner {
  opacity: 0;
  transition: opacity .2s ease;
}

.ex-topnav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ex-topnav__links a {
  font-family: 'Geist', sans-serif;
  font-size: 0.92em;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.72) !important;
  padding: 8px 2px;
  transition: color .25s ease;
  white-space: nowrap;
  text-decoration: none !important;
}
.ex-topnav__links a:hover,
.ex-topnav__links a.is-active { color: #ffffff !important; }

.ex-topnav__actions { display: flex; align-items: center; gap: 8px; }

/* White solid pill CTA inside the dark nav (Gene parity) */
.ex-topnav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ex-ink) !important;
  font-family: 'Geist', sans-serif;
  font-size: 0.88em;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.ex-topnav__cta em { font-family: inherit; font-style: normal; transition: transform .2s ease; }
.ex-topnav__cta:hover { background: #ececec; }
.ex-topnav__cta:hover em { transform: translateX(3px); }

.ex-topnav__burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.ex-topnav__burger span,
.ex-topnav__burger span::before,
.ex-topnav__burger span::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}
.ex-topnav__burger span { top: 19px; }
.ex-topnav__burger span::before { top: -5px; }
.ex-topnav__burger span::after  { top: 5px; }
.ex-topnav__burger.is-active span { background: transparent; }
.ex-topnav__burger.is-active span::before { top: 0; transform: rotate(45deg); background: #fff; }
.ex-topnav__burger.is-active span::after  { top: 0; transform: rotate(-45deg); background: #fff; }

@media (max-width: 920px) {
  .ex-topnav { padding: 8px 8px 8px 14px; }
  .ex-topnav__wing-inner { gap: 12px; padding-left: 16px; }
  .ex-topnav__links { display: none; }
  .ex-topnav__burger { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 520px) {
  .ex-topnav__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-topnav { animation: none; }
  .ex-topnav, .ex-topnav * { transition: none !important; }
}

/* Mobile overlay menu — cream with editorial type */
.ex-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(242,242,242,0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 80px 24px 40px;
}
.ex-mobile.is-open { opacity: 1; visibility: visible; }
.ex-mobile a {
  font-family: 'Geist', sans-serif;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ex-ink);
}
.ex-mobile a.ex-topnav__cta {
  margin-top: 28px;
  background: var(--ex-ink);
  color: #fff !important;
  font-size: 16px;
}

/* ============================================================
   HERO — editorial, full-bleed, brand.ai-style (matches Gene)
   ============================================================ */
.ex-hero {
  position: relative;
  padding: var(--ex-section-y-lg) 0 var(--ex-section-y);
  overflow: hidden;
}
.ex-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
  margin-bottom: 28px;
}
.ex-hero__h1 {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.6em, 7vw, 6.2em);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 32px;
  max-width: 18ch;
}
.ex-hero__h1 em {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.ex-hero__sub {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.75);
  max-width: 54ch;
  margin: 0 0 40px;
}
.ex-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   BUTTONS — match Gene .btn system
   ============================================================ */
.ex-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--ex-ink);
  font-family: 'Geist', sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ex-btn em { font-family: inherit; font-style: normal; display: inline-block; transition: transform .2s ease; }
.ex-btn:hover em { transform: translateX(4px); }
body.ex-page a.ex-btn--primary {
  background: #0a0a0a;
  color: #ffffff !important;
  border-color: #0a0a0a;
}
body.ex-page a.ex-btn--primary:hover {
  background: #ffffff;
  color: #0a0a0a !important;
  border-color: #0a0a0a;
}
body.ex-page a.ex-btn--ghost {
  background: #ffffff;
  color: #0a0a0a !important;
  border-color: #0a0a0a;
}
body.ex-page a.ex-btn--ghost:hover {
  background: #0a0a0a;
  color: #ffffff !important;
  border-color: #0a0a0a;
}

/* ============================================================
   SECTIONS — editorial rhythm on cream
   ============================================================ */
.ex-section { padding: var(--ex-section-y) 0; position: relative; }
.ex-section--tight { padding: var(--ex-section-y-sm) 0; }
.ex-section--lg { padding: var(--ex-section-y-lg) 0; }
/* Non-featured tier cards always use dark ink regardless of parent section color */
.ex-tier:not(.ex-tier--featured) {
  color: var(--ex-ink);
}
.ex-tier:not(.ex-tier--featured) .ex-tier__h,
.ex-tier:not(.ex-tier--featured) .ex-tier__price,
.ex-tier:not(.ex-tier--featured) .ex-tier__summary,
.ex-tier:not(.ex-tier--featured) .ex-tier__list li { color: var(--ex-ink); }

.ex-section--cream { background: var(--ex-cream); }

.ex-section--dark {
  background: var(--ex-ink);
  color: #fff;
}
.ex-section--dark.ex-section--grey { background: #2d2d2d; }
.ex-section--dark h2,
.ex-section--dark h3 { color: #fff; }
.ex-section--dark p  { color: rgba(255,255,255,0.7); }
.ex-section--dark .ex-eyebrow { color: rgba(255,255,255,0.55); }
.ex-section--dark .ex-divider { background: rgba(255,255,255,0.12); }

.ex-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(10,10,10,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.65);
  margin-bottom: 22px;
}
.ex-h2 {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  max-width: 22ch;
}
.ex-h2 em {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.ex-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.5;
  color: var(--ex-ink-3);
  max-width: 60ch;
  margin: 0 0 48px;
}
.ex-divider {
  height: 1px;
  background: var(--ex-line);
  margin: 0;
}

/* Section header: stacked single-column, matches Gene bi-platform__head */
.ex-section__head {
  max-width: 880px;
  margin-bottom: 72px;
}
.ex-section__head .ex-lead { margin: 0; max-width: 64ch; }
@media (max-width: 880px) {
  .ex-section__head { margin-bottom: 48px; }
}

/* ============================================================
   PILLARS (3-column feature cards on cream)
   ============================================================ */
.ex-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ex-line);
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
.ex-pillar {
  padding: 56px 40px;
  background: var(--ex-cream);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ex-pillar__num {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ex-ink-3);
}
.ex-pillar__h {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.ex-pillar p { color: var(--ex-ink-3); margin: 0; line-height: 1.5; }
/* Pillars always sit on a cream card, so keep their heading dark
   even when the surrounding section is dark (prevents white-on-white) */
body.ex-page .ex-section--dark .ex-pillar,
body.ex-page .ex-section--dark .ex-pillar p,
body.ex-page .ex-section--dark .ex-pillar h2,
body.ex-page .ex-section--dark .ex-pillar h3,
body.ex-page .ex-section--dark .ex-pillar h4,
body.ex-page .ex-section--dark .ex-pillar__h { color: var(--ex-ink); }
body.ex-page .ex-section--dark .ex-pillar p { color: var(--ex-ink-3); }
@media (max-width: 880px) { .ex-pillars { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURES (icon + h + p) — 2-col grid
   ============================================================ */
.ex-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 72px;
}
.ex-feature__h {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.ex-feature p { margin: 0; color: var(--ex-ink-3); }
.ex-feature__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--ex-ink);
  margin-bottom: 18px;
}
.ex-section--dark .ex-feature__dot { background: #fff; }
@media (max-width: 760px) { .ex-features { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   TRUST / LOGOS strip
   ============================================================ */
.ex-trust {
  padding: clamp(64px, 8vw, 96px) 0 clamp(48px, 6vw, 80px);
  background: var(--ex-cream);
}
.ex-trust__label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.ex-trust__logos {
  list-style: none;
  margin: 0; padding: clamp(28px, 4vw, 48px) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
.ex-trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 16px;
}
.ex-trust__logo {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.48);
  transition: filter .35s ease, transform .35s ease;
}
.ex-trust__item:hover .ex-trust__logo {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px) scale(1.03);
}
@media (max-width: 900px) {
  .ex-trust__logos { grid-template-columns: repeat(3, 1fr); }
  .ex-trust__item { min-height: 130px; }
}
@media (max-width: 600px) {
  .ex-trust__logos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ex-trust__item { min-height: 110px; }
  .ex-trust__logo { max-height: 80px; }
}

/* ============================================================
   WORK GRID — real Gene portfolio cards
   ============================================================ */
.ex-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ex-work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ex-line);
  transition: box-shadow .25s ease, transform .25s ease;
}
.ex-work-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}
.ex-work-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ex-ink);
}
.ex-work-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ex-work-card:hover .ex-work-card__img img { transform: scale(1.04); }
.ex-work-card__body {
  padding: 20px 22px 22px;
}
.ex-work-card__client {
  display: block;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ex-ink);
  margin-bottom: 6px;
}
.ex-work-card__tagline {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ex-ink-2);
  margin: 0 0 10px;
}
.ex-work-card__disc {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ex-ink-4);
}
@media (max-width: 680px) { .ex-work-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SCREENSHOT VARIANTS — stage (auto ken-burns), deck (splay)
   ============================================================ */

/* STAGE: a single hero browser frame that, when it enters view,
   plays a multi-step zoom/pan animation showcasing the UI inside.
   No scroll coupling — the animation runs independently. */
.ex-stage { margin: 80px 0; }
.ex-stage__sticky {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-stage__frame {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 60px 160px -30px rgba(0,0,0,0.35),
    0 20px 60px -10px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: scale(0.94) translateY(40px);
  opacity: 0;
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ex-stage.is-in .ex-stage__frame {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.ex-stage .ex-screen__bar { flex-shrink: 0; }
.ex-stage__viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ex-bg);
}
.ex-stage__viewport img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transform: scale(1.02);
  will-change: transform;
}
/* Auto ken-burns: only runs once stage enters view */
.ex-stage.is-in .ex-stage__viewport img {
  animation: ex-kenburns 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.6s infinite;
}
@keyframes ex-kenburns {
   0%   { transform: scale(1.02) translate3d(0, 0, 0);        transform-origin: 50% 0%; }
  18%   { transform: scale(1.45) translate3d(0, 0, 0);        transform-origin: 12% 18%; } /* zoom top-left (logo + nav) */
  34%   { transform: scale(1.45) translate3d(0, 0, 0);        transform-origin: 12% 18%; }
  50%   { transform: scale(1.55) translate3d(0, 0, 0);        transform-origin: 86% 28%; } /* pan right (KPIs / metrics) */
  66%   { transform: scale(1.55) translate3d(0, 0, 0);        transform-origin: 86% 28%; }
  82%   { transform: scale(1.40) translate3d(0, 0, 0);        transform-origin: 50% 78%; } /* zoom bottom-center (chart / table) */
  92%   { transform: scale(1.40) translate3d(0, 0, 0);        transform-origin: 50% 78%; }
 100%   { transform: scale(1.02) translate3d(0, 0, 0);        transform-origin: 50% 0%;  } /* return to overview */
}
/* Indicator dots showing the current focus moment */
.ex-stage__steps {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(8px);
  z-index: 2;
  pointer-events: none;
}
.ex-stage__step {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  transition: background 0.4s ease, transform 0.4s ease;
}
.ex-stage.is-in .ex-stage__step {
  animation: ex-step-pulse 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.6s infinite;
}
.ex-stage.is-in .ex-stage__step:nth-child(1) { animation-delay: 0.6s; }
.ex-stage.is-in .ex-stage__step:nth-child(2) { animation-delay: calc(0.6s + 4s); }
.ex-stage.is-in .ex-stage__step:nth-child(3) { animation-delay: calc(0.6s + 8s); }
.ex-stage.is-in .ex-stage__step:nth-child(4) { animation-delay: calc(0.6s + 12s); }
@keyframes ex-step-pulse {
  0%, 20%   { background: #fff; transform: scale(1.4); }
  25%, 100% { background: rgba(255,255,255,0.32); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ex-stage.is-in .ex-stage__viewport img,
  .ex-stage.is-in .ex-stage__step { animation: none; }
}

/* DECK: two browser frames that splay out from a tight stack on enter. */
.ex-deck {
  position: relative;
  max-width: 1180px;
  margin: 96px auto;
  padding: 40px 80px 80px;
  perspective: 1400px;
}
.ex-deck__back, .ex-deck__front {
  margin: 0 !important;
  max-width: none !important;
}
.ex-deck__back {
  position: absolute;
  top: 40px;
  right: 80px;
  width: 64%;
  z-index: 1;
  transform: translate(-60px, 40px) rotate(0deg) scale(0.92);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              opacity   0.8s ease 0.1s;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.25);
}
.ex-deck__front {
  position: relative;
  width: 78%;
  z-index: 2;
  transform: translate(0, 100px) rotate(0deg) scale(0.94);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
              opacity   0.8s ease 0.25s;
  box-shadow: 0 60px 140px -20px rgba(0,0,0,0.35);
}
.ex-deck.is-in .ex-deck__back  {
  transform: translate(0, 0) rotate(2.4deg) scale(1);
  opacity: 1;
}
.ex-deck.is-in .ex-deck__front {
  transform: translate(40px, 80px) rotate(-1.4deg) scale(1);
  opacity: 1;
}
.ex-deck:hover .ex-deck__back  { transform: translate(20px, -16px) rotate(3.4deg) scale(1.01); }
.ex-deck:hover .ex-deck__front { transform: translate(40px, 80px) rotate(-2deg) scale(1.02); }
/* Deck images get a gentle constant zoom-in so frames feel alive */
.ex-deck.is-in .ex-deck__back img,
.ex-deck.is-in .ex-deck__front img {
  animation: ex-drift 14s ease-in-out infinite alternate;
}
.ex-deck.is-in .ex-deck__front img { animation-delay: -7s; }
@keyframes ex-drift {
  0%   { transform: scale(1)    translate(0,    0); }
  100% { transform: scale(1.08) translate(-1.5%, -2%); }
}
@media (max-width: 900px) {
  .ex-deck { padding: 24px 24px 60px; }
  .ex-deck__back  { position: relative; top: 0; right: 0; width: 100%; transform: none !important; margin-bottom: 24px !important; opacity: 1; }
  .ex-deck__front { position: relative; width: 100%; transform: none !important; opacity: 1; }
}
@media (max-width: 768px) {
  .ex-stage { margin: 48px 0; }
  .ex-stage__frame { transform: none; opacity: 1; }
  .ex-stage__viewport img { object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-deck.is-in .ex-deck__back img,
  .ex-deck.is-in .ex-deck__front img { animation: none; }
}

/* ============================================================
   COMPLIANCE BADGE STRIP (HIPAA, SOC 2, MLR-ready, GxP, GDPR)
   ============================================================ */
.ex-badges {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 28px;
}
.ex-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ex-line);
  background: #fff;
  font-size: 13px;
  color: var(--ex-ink-2);
  letter-spacing: -0.005em;
}
.ex-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ex-ink);
}
.ex-section--dark .ex-badge {
  background: transparent;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
.ex-section--dark .ex-badge::before { background: #fff; }

/* ============================================================
   ROLES / USE CASES
   ============================================================ */
.ex-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ex-role {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ex-role:hover {
  transform: translateY(-2px);
  box-shadow: var(--ex-shadow);
}
.ex-role__h {
  font-size: 1.2rem;
  margin: 0;
  letter-spacing: -0.02em;
}
.ex-role p { margin: 0; color: var(--ex-ink-3); font-size: 15px; }
.ex-role__tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ex-ink-4);
}
@media (max-width: 880px) { .ex-roles { grid-template-columns: 1fr; } }

/* ============================================================
   USE CASES / STUDIOS (text + tile)
   ============================================================ */
.ex-uses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ex-line);
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
.ex-use {
  background: var(--ex-cream);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ex-use__tag {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
}
.ex-use__h {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.ex-use__h em {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
}
.ex-use p { color: var(--ex-ink-3); margin: 0; }
@media (max-width: 880px) { .ex-uses { grid-template-columns: 1fr; } }

/* ============================================================
   GENE x EXPRESSION split panel
   ============================================================ */
.ex-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ex-line);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  overflow: hidden;
}
.ex-split__col {
  background: var(--ex-cream);
  padding: 48px 40px;
}
.ex-split__col--dark {
  background: var(--ex-ink);
  color: #fff;
}
.ex-split__col--dark h3 { color: #fff; }
.ex-split__col--dark p  { color: rgba(255,255,255,0.7); }
.ex-split__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
}
.ex-split h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 16px;
  letter-spacing: -0.025em;
}
@media (max-width: 880px) { .ex-split { grid-template-columns: 1fr; } }

/* ============================================================
   CTA BAND (dark inset block)
   ============================================================ */
.ex-ctaband {
  background: var(--ex-ink);
  color: #fff;
  border-radius: var(--ex-radius);
  padding: 72px clamp(32px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: end;
}
.ex-ctaband__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  color: #fff;
  max-width: 22ch;
}
.ex-ctaband__h em { font-family: 'Merriweather', Georgia, serif; font-style: italic; }
.ex-ctaband p { color: rgba(255,255,255,0.7); margin: 0; max-width: 56ch; }
.ex-ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ex-ctaband .ex-btn { border-color: #fff; }
body.ex-page .ex-ctaband a.ex-btn--primary { background: #fff; color: var(--ex-ink) !important; border-color: #fff; }
body.ex-page .ex-ctaband a.ex-btn--primary:hover { background: var(--ex-ink); color: #fff !important; border-color: #fff; }
body.ex-page .ex-ctaband a.ex-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,0.3); }
body.ex-page .ex-ctaband a.ex-btn--ghost:hover { background: #fff; color: var(--ex-ink) !important; border-color: #fff; }
@media (max-width: 880px) { .ex-ctaband { grid-template-columns: 1fr; gap: 24px; padding: 48px 28px; } }

/* ============================================================
   FOOTER — dark, mirrors Gene
   ============================================================ */
/* CTA button inside dark section is inverted: white bg, dark text */
body.ex-page .ex-section--dark a.ex-btn--primary {
  background: #fff;
  color: var(--ex-ink) !important;
  border-color: #fff;
}
body.ex-page .ex-section--dark a.ex-btn--primary:hover {
  background: rgba(255,255,255,0.88);
  color: var(--ex-ink) !important;
}
body.ex-page .ex-section--dark a.ex-btn--primary span { color: inherit !important; }

/* ── Team cards ─────────────────────────────── */
.ex-team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
  margin-top: 64px;
}
.ex-team__card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 20px;
  align-items: start;
}
.ex-team__portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ex-line);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-team__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-team__initials {
  font-family: 'Geist', sans-serif;
  font-size: 1.1rem;
  color: var(--ex-ink-3);
  position: absolute;
}
.ex-team__role {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ex-ink-3);
  margin-bottom: 4px;
}
.ex-team__name {
  font-family: 'Geist', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ex-ink);
}
.ex-team__bio { font-size: 0.9rem; line-height: 1.7; color: var(--ex-ink-2); margin: 0; }
@media (max-width: 767px) {
  .ex-team { grid-template-columns: 1fr; gap: 40px; }
}
/* ── end Team cards ─────────────────────────── */

/* ── Story / Who we are ─────────────────────── */
.ex-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; align-items: start; }
.ex-story__col:first-child .ex-eyebrow { margin-bottom: 16px; display: block; }
.ex-story__col:first-child .ex-h2 { margin: 0; }
.ex-story__col p { margin: 0 0 1.2em; color: var(--ex-ink-2); line-height: 1.75; }
.ex-story__col p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .ex-story__grid { grid-template-columns: 1fr; } }

/* ── Capabilities ───────────────────────────── */
.ex-caps__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; margin-top: 56px; border-left: 1px solid var(--ex-border); }
.ex-cap { border-top: 1px solid var(--ex-border); border-right: 1px solid var(--ex-border); border-bottom: 1px solid var(--ex-border); padding: 28px 24px 24px; }
.ex-cap__n { display: block; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ex-ink-3); margin-bottom: 20px; }
.ex-cap__t { font-size: 1rem; font-weight: 500; margin: 0 0 8px; color: var(--ex-ink); }
.ex-cap__d { font-size: 0.875rem; color: var(--ex-ink-2); line-height: 1.65; margin: 0 0 20px; }
.ex-cap__list { list-style: none; padding: 0; margin: 0; }
.ex-cap__list li { font-size: 0.82rem; color: var(--ex-ink-3); padding: 5px 0; border-bottom: 1px solid var(--ex-border); }
.ex-cap__list li:last-child { border-bottom: none; }

/* ── Sectors ────────────────────────────────── */
.ex-sectors__list { list-style: none; padding: 0; margin: 48px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ex-sectors__list li { background: var(--ex-ink); color: var(--ex-cream); padding: 8px 22px; border-radius: 999px; font-size: 0.875rem; }

/* ── Collective ─────────────────────────────── */
.ex-collective__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; border-top: 1px solid var(--ex-border); padding-top: 40px; }
.ex-collective__stat { }
.ex-collective__stat-n { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ex-ink); margin-bottom: 4px; }
.ex-collective__stat-l { font-size: 0.875rem; color: var(--ex-ink-2); }
.ex-collective__pills-wrap { margin-top: 48px; }
.ex-collective__pills-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ex-ink-3); display: block; margin-bottom: 16px; }
.ex-collective__pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ex-collective__pills li { border: 1px solid var(--ex-border); padding: 6px 16px; border-radius: 999px; font-size: 0.85rem; color: var(--ex-ink-2); }
@media (max-width: 767px) { .ex-collective__stats { grid-template-columns: 1fr; gap: 32px; } }

/* ── Values ─────────────────────────────────── */
.ex-values__list { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 64px; counter-reset: none; }
.ex-values__list li { }
.ex-values__n { display: block; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ex-ink-3); margin-bottom: 12px; }
.ex-values__list h3 { font-size: 1.05rem; font-weight: 500; margin: 0 0 6px; color: var(--ex-ink); }
.ex-values__lede { font-weight: 400; color: var(--ex-ink); font-size: 0.925rem; margin: 0 0 6px; }
.ex-values__list p { font-size: 0.875rem; color: var(--ex-ink-2); line-height: 1.7; margin: 0 0 0.5em; }
.ex-values__list p:last-child { margin: 0; }
@media (max-width: 767px) { .ex-values__list { grid-template-columns: 1fr; } }
/* ── end About sections ──────────────────────── */

.ex-footer {
  background: var(--ex-ink);
  color: #F2F2F2;
  padding: 96px 0 28px;
  margin-top: 0;
  font-family: 'Geist', sans-serif;
}
.ex-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--ex-gutter);
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.ex-footer__cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 64px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(242,242,242,0.1);
}
.ex-footer__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F2F2F2;
  margin-bottom: 24px;
}
.ex-footer__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #F2F2F2;
  margin: 0 0 20px;
  max-width: 18ch;
}
.ex-footer__h em { font-family: 'Merriweather', Georgia, serif; font-style: italic; }
.ex-footer__sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(242,242,242,0.62);
  max-width: 52ch;
  margin: 0;
}
.ex-footer__actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
}
body.ex-page .ex-footer a.ex-btn--primary {
  background: #fff; color: var(--ex-ink) !important; border-color: #fff;
  padding: 18px 28px; font-size: 1rem;
}
body.ex-page .ex-footer a.ex-btn--primary:hover {
  background: transparent; color: #fff !important;
}
.ex-footer__email {
  font-size: 0.95rem;
  color: rgba(242,242,242,0.6);
  transition: color .3s ease;
}
.ex-footer__email:hover { color: #F2F2F2; }

.ex-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.ex-footer__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.35);
  margin-bottom: 22px;
}
.ex-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ex-footer__col li { font-size: 1rem; color: rgba(242,242,242,0.72); }
.ex-footer__col a { color: rgba(242,242,242,0.72); transition: color .3s ease; }
.ex-footer__col a:hover { color: #F2F2F2; }

.ex-footer__wordmark {
  display: flex; justify-content: center; align-items: center;
  line-height: 0.8;
  padding-top: 16px; padding-bottom: 8px;
  border-top: 1px solid rgba(242,242,242,0.06);
}
.ex-footer__wordmark span {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 16vw, 16rem);
  letter-spacing: -0.05em;
  line-height: 0.8;
  background: linear-gradient(180deg, #F2F2F2 0%, rgba(242,242,242,0.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  white-space: nowrap;
}
.ex-footer__wordmark em {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
}

.ex-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(242,242,242,0.1);
  font-size: 0.85rem;
  color: rgba(242,242,242,0.42);
  flex-wrap: wrap;
}
.ex-footer__legal { display: flex; gap: 28px; flex-wrap: wrap; }
.ex-footer__legal a:hover { color: #F2F2F2; }

@media (max-width: 880px) {
  .ex-footer__cta-row { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .ex-footer__actions { align-items: flex-start; }
  .ex-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

/* ============================================================
   DEMO FORM
   ============================================================ */
.ex-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  padding: 40px;
}
.ex-form__full { grid-column: 1 / -1; }
.ex-field { display: flex; flex-direction: column; gap: 8px; }
.ex-field label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
}
.ex-field input,
.ex-field select,
.ex-field textarea {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--ex-line);
  background: var(--ex-cream);
  color: var(--ex-ink);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.ex-field input:focus,
.ex-field select:focus,
.ex-field textarea:focus {
  border-color: var(--ex-ink);
  background: #fff;
}
.ex-field textarea { min-height: 120px; resize: vertical; }
.ex-form__msg {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--ex-ink-3);
  min-height: 22px;
}
.ex-form__msg.error { color: #c5221f; }
@media (max-width: 720px) { .ex-form { grid-template-columns: 1fr; padding: 28px; } }

/* ============================================================
   PLATFORM LAYERS visual
   ============================================================ */
.ex-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.ex-layer {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ex-layer:hover { transform: translateY(-2px); box-shadow: var(--ex-shadow); }
.ex-layer__n {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ex-ink-3);
}
.ex-layer__h {
  font-size: 1.2rem;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.ex-layer p { margin: 0; color: var(--ex-ink-3); font-size: 15px; }

/* ============================================================
   PAGE HEADER (sub-page hero, shorter than home hero)
   ============================================================ */
.ex-pagehead {
  padding: var(--ex-section-y-sm) 0 var(--ex-section-y-sm);
}
.ex-pagehead .ex-hero__h1 { font-size: clamp(2.4rem, 6vw, 5.5rem); max-width: 22ch; }

/* ============================================================
   QUOTE / pullout
   ============================================================ */
.ex-quote {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ex-ink);
  max-width: 28ch;
  margin: 0 0 24px;
}
.ex-quote__by {
  font-family: 'Geist', sans-serif;
  font-style: normal;
  font-size: 14px;
  color: var(--ex-ink-3);
  letter-spacing: -0.005em;
}

/* ============================================================
   PRODUCT SCREENSHOTS
   ============================================================ */
/* Browser chrome wrapper */
.ex-screen {
  margin: 48px auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.18), 0 6px 24px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.10);
  max-width: 1100px;
  background: #fff;
}
/* Top bar — title bar */
.ex-screen__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EAEAEA;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
/* Traffic lights */
.ex-screen__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ex-screen__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.ex-screen__dot--close  { background: #FF5F57; }
.ex-screen__dot--min    { background: #FFBD2E; }
.ex-screen__dot--max    { background: #28C840; }
/* URL / address bar */
.ex-screen__url {
  flex: 1;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 3px 10px;
  font-size: 11.5px;
  color: rgba(10,10,10,0.5);
  font-family: 'Geist', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  max-width: 480px;
  margin: 0 auto;
}
.ex-screen__url::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328C840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -1px;
  margin-right: 5px;
  opacity: 0.7;
}
.ex-screen img {
  width: 100%;
  height: auto;
  display: block;
}
.ex-screen__caption {
  padding: 10px 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(10,10,10,0.4);
  border-top: 1px solid rgba(0,0,0,0.06);
  font-family: 'Geist', sans-serif;
}

/* ============================================================
   INTEGRATIONS GRID
   ============================================================ */
.ex-int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.ex-int-cat {
  background: #fff;
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius-sm);
  padding: 28px 28px 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ex-int-cat:hover { transform: translateY(-2px); box-shadow: var(--ex-shadow); }
.ex-int-cat__label {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(10,10,10,0.45);
  margin-bottom: 10px;
}
.ex-int-cat h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ex-int-cat > p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ex-ink-3);
  line-height: 1.5;
}
.ex-int-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ex-int-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(10,10,10,0.10);
  background: #fff;
  padding: 10px;
  cursor: default;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.ex-int-logo:hover {
  border-color: rgba(10,10,10,0.20);
  box-shadow: 0 4px 16px rgba(10,10,10,0.08);
}
.ex-int-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ex-int-logo--text {
  width: auto;
  height: auto;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ex-ink);
  letter-spacing: -0.01em;
  background: var(--ex-cream);
}
.ex-int-logo--text img { display: none; }

/* ============================================================
   MOTION — match Gene's reveal-up timing exactly
   (opacity + translateY 60px → 0, .9s cubic-bezier(.16,1,.3,1))
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .ex-reveal { opacity: 0; transform: translateY(60px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .ex-reveal.is-in { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECTION MODIFIERS (new IA)
   ============================================================ */
.ex-section--tight { padding-top: var(--ex-section-y-sm); padding-bottom: var(--ex-section-y-sm); }
.ex-pagehead { padding-top: var(--ex-section-y-sm); padding-bottom: var(--ex-section-y-sm); min-height: auto; }
.ex-pagehead .ex-hero__h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }

/* ============================================================
   TIERS — Solutions cards
   ============================================================ */
.ex-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ex-tier {
  background: #fff;
  border: 1px solid var(--ex-line);
  border-radius: 18px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.ex-tier__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
  padding: 4px 10px;
  border: 1px solid var(--ex-line);
  border-radius: 999px;
}
.ex-tier__h {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.ex-tier__price {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ex-ink-3);
  margin: 0;
}
.ex-tier__summary {
  color: var(--ex-ink-2);
  margin: 0;
  line-height: 1.55;
  font-size: 15px;
}
.ex-tier__list {
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  display: grid;
  gap: 10px;
}
.ex-tier__list li {
  font-size: 14px;
  color: var(--ex-ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}
.ex-tier__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ex-ink);
  font-weight: 600;
}
.ex-tier__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: var(--ex-ink);
  border-bottom: 1px solid var(--ex-ink);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: gap .2s ease;
}
.ex-tier__cta:hover { gap: 14px; }
.ex-tier--featured {
  background: var(--ex-ink);
  color: #fff;
  border-color: var(--ex-ink);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.ex-tier--featured .ex-tier__tag { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
.ex-tier--featured .ex-tier__h { color: #fff; }
.ex-tier--featured .ex-tier__price,
.ex-tier--featured .ex-tier__summary,
.ex-tier--featured .ex-tier__list li { color: rgba(255,255,255,0.78); }
.ex-tier--featured .ex-tier__list li::before { color: #fff; }
.ex-tier--featured .ex-tier__cta { color: #fff; border-bottom-color: #fff; }
@media (max-width: 980px) {
  .ex-tiers { grid-template-columns: 1fr; }
  .ex-tier--featured { transform: none; }
}

/* ============================================================ *
 *  REFINEMENT LAYER — Brand.ai-grade UX (2026-05-22)
 *  Higher-specificity overrides to elevate the entire site:
 *  bigger / lighter / more editorial typography, refined buttons,
 *  cleaner sections, marquee trust strip, line-reveal animations,
 *  auto-hide nav, magnetic CTAs, refined hover language.
 * ============================================================ */

/* --- base type smoothing & global rhythm --------------------- */
body.ex-page {
  font-weight: 300;
  letter-spacing: -0.01em;
}
body.ex-page p { color: var(--ex-ink-2); line-height: 1.55; }

/* --- hero: match Gene's calc(nav-offset + section-y-sm) system
   main already adds 88px for the nav, so we only need section-y-sm (56px).
   Total top spacing = 88 + 56 = 144px, matching gene-hero at desktop. --- */
body.ex-page .ex-hero { padding: var(--ex-section-y) 0 var(--ex-section-y); }
body.ex-page .ex-hero__h1 {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.6em, 7vw, 6.2em);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: 0 0 32px;
  color: #0a0a0a;
}
body.ex-page .ex-hero__h1 em {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #0a0a0a;
}
body.ex-page .ex-hero__sub {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(1.1em, 1.6vw, 1.4em);
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.75);
  max-width: 62ch;
  margin: 0 0 40px;
}
/* Inner page heroes match .gene-page-hero exactly */
body.ex-page .ex-pagehead { padding: var(--ex-section-y-lg) 0 var(--ex-section-y); }
body.ex-page .ex-pagehead .ex-hero__h1 {
  font-size: clamp(2.6em, 7vw, 6.2em);
  max-width: 18ch;
}
body.ex-page .ex-pagehead .ex-hero__sub {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  max-width: 54ch;
  margin: 0 0 40px;
}
body.ex-page .ex-hero__eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
  margin-bottom: 28px;
}

/* --- buttons: refined Brand.ai-style with animated arrow ----- */
body.ex-page .ex-btn {
  position: relative;
  padding: 16px 28px;
  border-width: 1px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  transition: background .35s cubic-bezier(.16,1,.3,1),
              color      .35s cubic-bezier(.16,1,.3,1),
              border-color .35s cubic-bezier(.16,1,.3,1),
              transform  .35s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
body.ex-page .ex-btn em {
  display: inline-block;
  margin-left: 2px;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
body.ex-page .ex-btn:hover em { transform: translateX(6px); }

/* --- section rhythm: aligned to Gene tokens ------------------ */
body.ex-page .ex-section { padding: var(--ex-section-y) 0; }
body.ex-page .ex-section--tight { padding: var(--ex-section-y-sm) 0; }
body.ex-page .ex-section--lg { padding: var(--ex-section-y-lg) 0; }
body.ex-page .ex-section__head {
  margin-bottom: var(--ex-block-y);
}
body.ex-page .ex-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: rgba(10,10,10,0.65);
  margin-bottom: 28px;
}
body.ex-page .ex-h2 {
  font-weight: 300;
  font-size: clamp(2.6rem, 5.8vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 22ch;
}
body.ex-page .ex-h2 em { letter-spacing: -0.025em; }
body.ex-page .ex-lead {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  color: var(--ex-ink-2);
}
body.ex-page .ex-section--dark .ex-lead { color: rgba(255,255,255,0.72); }

/* --- pillars: cleaner, no harsh grid borders ----------------- */
body.ex-page .ex-pillars {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
body.ex-page .ex-pillar {
  position: relative;
  padding: 64px 48px;
  gap: 20px;
  transition: background .4s cubic-bezier(.16,1,.3,1);
}
body.ex-page .ex-pillar + .ex-pillar { border-left: 1px solid var(--ex-line); }
body.ex-page .ex-pillar::after {
  content: '';
  position: absolute;
  left: 48px; right: 48px; bottom: 0;
  height: 1px;
  background: var(--ex-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
body.ex-page .ex-pillar:hover { background: rgba(10,10,10,0.025); }
body.ex-page .ex-pillar:hover::after { transform: scaleX(1); }
body.ex-page .ex-pillar__num {
  font-family: 'Geist', sans-serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
}
body.ex-page .ex-pillar__h {
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 4px;
}
@media (max-width: 880px) {
  body.ex-page .ex-pillar + .ex-pillar { border-left: 0; border-top: 1px solid var(--ex-line); }
}

/* --- features: refined hover treatment ----------------------- */
body.ex-page .ex-features { gap: 64px 80px; }
body.ex-page .ex-feature {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--ex-line);
  transition: border-color .4s ease;
}
body.ex-page .ex-feature:hover { border-top-color: var(--ex-ink); }
body.ex-page .ex-section--dark .ex-feature { border-top-color: rgba(255,255,255,0.14); }
body.ex-page .ex-section--dark .ex-feature:hover { border-top-color: #fff; }
body.ex-page .ex-feature__dot { display: none; }
body.ex-page .ex-feature__h {
  font-weight: 300;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

/* --- trust strip: marquee replaces grid ---------------------- */
body.ex-page .ex-trust {
  padding: clamp(80px, 9vw, 120px) 0;
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
  overflow: hidden;
}
body.ex-page .ex-trust__label {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  margin: 0 0 clamp(40px, 5vw, 64px);
  color: var(--ex-ink-3);
}
body.ex-page .ex-trust__logos {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  border: 0;
  padding: 0;
  gap: 0;
  width: max-content;
  animation: ex-marquee 42s linear infinite;
  will-change: transform;
}
body.ex-page .ex-trust__item {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0 clamp(56px, 7vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.ex-page .ex-trust__logo {
  max-height: clamp(100px, 13vw, 170px);
  max-width: clamp(260px, 26vw, 400px);
  width: auto;
  height: auto;
  filter: grayscale(1) opacity(0.5);
  transition: filter .35s ease, transform .35s ease;
}
body.ex-page .ex-trust__item:hover .ex-trust__logo {
  filter: grayscale(0) opacity(1);
  transform: none;
}
@keyframes ex-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Fade edges so logos dissolve into the cream */
body.ex-page .ex-trust { position: relative; }
body.ex-page .ex-trust::before,
body.ex-page .ex-trust::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(80px, 12vw, 200px);
  pointer-events: none;
  z-index: 2;
}
body.ex-page .ex-trust::before { left: 0;  background: linear-gradient(to right, var(--ex-cream), rgba(242,242,242,0)); }
body.ex-page .ex-trust::after  { right: 0; background: linear-gradient(to left,  var(--ex-cream), rgba(242,242,242,0)); }
@media (max-width: 600px) {
  body.ex-page .ex-trust__logo { max-height: 64px; max-width: 180px; }
  body.ex-page .ex-trust__item { padding: 0 48px; }
}

/* --- nav: scroll-shrink only (matches Gene parent) ----------- */
body.ex-page .ex-topnav {
  transition: background .25s ease,
              padding    .25s ease;
}
body.ex-page .ex-topnav.is-scrolled {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* --- hero entry: page-load rise (matches Gene's gene-hero-rise)
   eyebrow → h1 → sub → CTAs, staggered with fixed delays.
   Scroll-triggered word reveal removed in favor of this. -------- */
@keyframes ex-hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  body.ex-page .ex-hero__eyebrow,
  body.ex-page .ex-hero__h1,
  body.ex-page .ex-hero__sub,
  body.ex-page .ex-hero__ctas,
  body.ex-page .ex-hero__actions {
    opacity: 0;
    transform: translateY(20px);
    animation: ex-hero-rise .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  body.ex-page .ex-hero__eyebrow  { animation-delay: 0.05s; }
  body.ex-page .ex-hero__h1       { animation-delay: 0.15s; animation-duration: 1.1s; transform: translateY(30px); }
  body.ex-page .ex-hero__sub      { animation-delay: 0.30s; }
  body.ex-page .ex-hero__ctas,
  body.ex-page .ex-hero__actions  { animation-delay: 0.45s; }
}

/* Editorial reveal classes (kept for back-compat with markup that
   still references .ex-reveal-text — render as plain inline). */
.ex-reveal-text,
.ex-reveal-text > span {
  display: inline;
  overflow: visible;
  transform: none;
  transition: none;
}

/* refined base reveal */
body.ex-page .ex-reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
body.ex-page .ex-reveal.is-in { opacity: 1; transform: translateY(0); }

/* --- tier cards: refine hover, restraint --------------------- */
body.ex-page .ex-tier {
  border-color: var(--ex-line);
  transition: border-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
body.ex-page .ex-tier:hover {
  border-color: var(--ex-ink);
  transform: translateY(-4px);
}
body.ex-page .ex-tier--featured:hover { transform: translateY(-12px); }

/* --- work cards: subtler shadow ------------------------------ */
body.ex-page .ex-work-card { border-radius: 12px; }
body.ex-page .ex-work-card:hover { box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18); }

/* --- stage / deck: tighter framing --------------------------- */
body.ex-page .ex-stage { margin: var(--ex-section-y) 0; }
body.ex-page .ex-stage__frame {
  border-radius: 14px;
  box-shadow:
    0 80px 200px -40px rgba(0,0,0,0.32),
    0 24px 70px -12px rgba(0,0,0,0.16);
}
body.ex-page .ex-deck { margin: var(--ex-section-y-lg) auto; }

/* --- footer: massive editorial wordmark ---------------------- */
body.ex-page .ex-footer__wordmark { padding: 80px 0 60px; }
body.ex-page .ex-footer__wordmark span {
  font-weight: 200;
  letter-spacing: -0.06em;
}

/* --- CTA band: more restraint -------------------------------- */
body.ex-page .ex-ctaband {
  border-radius: 18px;
  padding: clamp(48px, 6vw, 88px) clamp(36px, 4.5vw, 72px);
}
body.ex-page .ex-ctaband__h {
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* --- subtle grain overlay for cream warmth ------------------- */
body.ex-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- mobile refinement --------------------------------------- */
@media (max-width: 768px) {
  body.ex-page .ex-section { padding: var(--ex-section-y) 0; }
  body.ex-page .ex-hero { padding: var(--ex-section-y-sm) 0; }
  body.ex-page .ex-hero__h1 { letter-spacing: -0.035em; }
}

/* --- reduced motion: drop animations ------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ex-page .ex-trust__logos { animation: none; }
  .ex-reveal-text > span { transform: none !important; }
  body.ex-page .ex-reveal { opacity: 1; transform: none; }
}

/* ============================================================ *
 *  CLEAN SCREENSHOT FRAMES — Brand.ai / Jasper aesthetic
 *  No fake browser chrome. Just rounded corners, soft shadow,
 *  and optional floating annotation callouts that animate in.
 * ============================================================ */

/* Hide all legacy browser-chrome elements (kept in CSS for any
   third-party usage but never emitted by the helpers anymore). */
body.ex-page .ex-screen__bar,
body.ex-page .ex-screen__url,
body.ex-page .ex-screen__dots,
body.ex-page .ex-screen__caption,
body.ex-page .ex-stage__steps { display: none !important; }

/* Disable the legacy ken-burns animation on the stage viewport */
body.ex-page .ex-stage.is-in .ex-stage__viewport img,
body.ex-page .ex-stage__viewport img { animation: none !important; transform: none !important; }

/* Clean frame — used for shot(), shotStage(), shotDeck() */
.ex-frame {
  position: relative;
  margin: 48px auto;
  max-width: 1240px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow:
    0 60px 160px -40px rgba(10, 10, 10, 0.28),
    0 18px 50px  -16px rgba(10, 10, 10, 0.14);
  opacity: 0;
  transform: translateY(40px) scale(0.985);
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}
.ex-frame.is-in,
.ex-stage.is-in .ex-frame,
.ex-section.is-in .ex-frame { opacity: 1; transform: translateY(0) scale(1); }
.ex-frame > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}
.ex-frame--hero { max-width: 1280px; }

/* --- Browser window chrome bar ------------------------------- */
.ex-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  background: #ebebeb;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  flex-shrink: 0;
}
.ex-browser-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.ex-browser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.ex-browser-dot--red    { background: #FF5F57; }
.ex-browser-dot--yellow { background: #FEBC2E; }
.ex-browser-dot--green  { background: #28C840; }
.ex-browser-url {
  flex: 1;
  height: 24px;
  max-width: 360px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  color: rgba(10, 10, 10, 0.4);
}
/* Screen area inside the frame — positioning parent for callouts */
.ex-frame__screen {
  position: relative;
  overflow: hidden;
}
.ex-frame__screen > img {
  width: 100%;
  height: auto;
  display: block;
}
.ex-frame__caption {
  padding: 16px 24px 18px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ex-ink-3);
  border-top: 1px solid rgba(10, 10, 10, 0.06);
  background: #fff;
}

/* On dark sections the frame border lifts slightly */
.ex-section--dark .ex-frame {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 60px 160px -40px rgba(0, 0, 0, 0.6),
    0 18px 50px  -16px rgba(0, 0, 0, 0.4);
}

/* --- Floating annotation callouts (Brand.ai / Jasper) -------- */
.ex-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1) var(--ex-callout-delay, 0ms),
    transform .9s cubic-bezier(.16,1,.3,1) var(--ex-callout-delay, 0ms);
}
.ex-frame.is-in .ex-callout,
.ex-stage.is-in .ex-callout,
.ex-section.is-in .ex-callout { opacity: 1; transform: translateY(0); }
.ex-callout--right { flex-direction: row-reverse; }
.ex-callout__pin {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.14);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ex-callout__pin::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(10, 10, 10, 0.18);
  animation: ex-pin-pulse 2.4s ease-out infinite;
}
.ex-callout__pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ex-ink);
}
@keyframes ex-pin-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ex-callout__pill {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ex-ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  box-shadow:
    0 12px 32px -8px rgba(10, 10, 10, 0.18),
    0 2px  6px  -2px rgba(10, 10, 10, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 760px) {
  .ex-callout { display: none; }
}

/* --- Deck: two clean frames overlapping (no rotation) -------- */
body.ex-page .ex-deck {
  position: relative;
  max-width: 1240px;
  margin: 120px auto;
  min-height: clamp(360px, 56vw, 720px);
}
body.ex-page .ex-deck .ex-frame { margin: 0; opacity: 0; transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity 1.2s cubic-bezier(.16,1,.3,1); }
body.ex-page .ex-deck__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 64%;
  z-index: 1;
  transform: translate(-30px, 20px) scale(0.96);
}
body.ex-page .ex-deck__front {
  position: relative;
  width: 64%;
  margin-left: auto !important;
  margin-top: clamp(80px, 12vw, 160px) !important;
  z-index: 2;
  transform: translate(30px, 40px) scale(0.96);
}
body.ex-page .ex-deck.is-in .ex-deck__back  { opacity: 1; transform: translate(0, 0) scale(1); }
body.ex-page .ex-deck.is-in .ex-deck__front { opacity: 1; transform: translate(0, 0) scale(1); }
/* Kill legacy hover rotate/scale and perpetual ex-drift zoom on deck images */
body.ex-page .ex-deck:hover .ex-deck__back,
body.ex-page .ex-deck:hover .ex-deck__front { transform: translate(0, 0) scale(1) !important; }
body.ex-page .ex-deck .ex-frame__screen img,
body.ex-page .ex-deck.is-in .ex-deck__back img,
body.ex-page .ex-deck.is-in .ex-deck__front img { animation: none !important; transform: none !important; }
/* Kill any zoom on stage / frame screenshots */
body.ex-page .ex-frame__screen img { transform: none !important; animation: none !important; }
@media (max-width: 900px) {
  body.ex-page .ex-deck { min-height: auto; }
  body.ex-page .ex-deck__back  { position: relative; width: 100%; transform: translateY(20px); }
  body.ex-page .ex-deck__front { width: 100%; margin: 32px 0 0 !important; transform: translateY(20px); }
}

/* --- Stage container clean-up --------------------------------
   ex-stage is Gene's equivalent of .gene-hero__media.
   Gene uses margin-top: var(--gene-block-y) = 48px with no extra padding.
   We zero out the .ex-section padding inherited by .ex-stage so the gap
   from buttons to screenshot matches Gene: hero-bottom(56) + margin(48) = 104px. --- */
body.ex-page .ex-stage { margin: var(--ex-section-y) 0; padding-top: 0; padding-bottom: 0; }
body.ex-page .ex-stage__sticky,
body.ex-page .ex-stage__frame,
body.ex-page .ex-stage__viewport {
  all: unset;
  display: block;
}
body.ex-page .ex-stage .ex-frame { margin: 0 auto; }

/* ============================================================ *
 *  HOW IT WORKS — concrete 4-step explainer
 * ============================================================ */
.ex-how-section { background: #fff; }
.ex-how {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
.ex-how__step {
  position: relative;
  padding: 48px 36px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .4s cubic-bezier(.16,1,.3,1);
}
.ex-how__step + .ex-how__step { border-left: 1px solid var(--ex-line); }
.ex-how__step:hover { background: rgba(10,10,10,0.025); }
.ex-how__n {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ex-ink-3);
}
.ex-how__kicker {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ex-ink-3);
  margin-top: -4px;
}
.ex-how__h {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 6px 0 4px;
  color: var(--ex-ink);
}
.ex-how__step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ex-ink-2);
  margin: 0;
}
@media (max-width: 980px) {
  .ex-how { grid-template-columns: repeat(2, 1fr); }
  .ex-how__step:nth-child(2) { border-left: 1px solid var(--ex-line); }
  .ex-how__step:nth-child(3) { border-left: 0; border-top: 1px solid var(--ex-line); }
  .ex-how__step:nth-child(4) { border-top: 1px solid var(--ex-line); }
}
@media (max-width: 620px) {
  .ex-how { grid-template-columns: 1fr; }
  .ex-how__step + .ex-how__step { border-left: 0; border-top: 1px solid var(--ex-line); }
}

/* ============================================================
   GENE-* DARK SECTIONS — expression/about colour fixes
   expression.js adds body.ex-page at runtime, which causes
   body.ex-page h3 { color: var(--ex-ink) } to override the
   white text that brand-elevate.css sets on dark gene-* sections.
   These rules restore correct colours at higher specificity.
   ============================================================ */
body.ex-page .gene-values__list h3         { color: #F2F2F2 !important; }
body.ex-page .gene-values__list p          { color: rgba(242,242,242,0.65) !important; }
body.ex-page .gene-caps .gene-cap__t       { color: #F2F2F2 !important; }
body.ex-page .gene-caps .gene-cap__d       { color: rgba(242,242,242,0.65) !important; }
body.ex-page .gene-caps .gene-cap__list li { color: rgba(242,242,242,0.72) !important; }
body.ex-page .gene-about__manifesto-text   { color: rgba(242,242,242,0.88) !important; }
body.ex-page .gene-collective__pillsLabel  { color: rgba(242,242,242,0.55) !important; }
body.ex-page .gene-collective__pills li    { color: rgba(242,242,242,0.72) !important; }