/* =========================================
   brand.ai-Inspired Design — V3
   ========================================= */

/* ============================================================
   0. PRE-PAINT GUARDS — kill FOUC before JS runs
   ============================================================ */
html, body {
  background: #F2F2F2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide native WP footer instantly (JS later adds our own) */
#colophon,
.site-footer,
footer.site-footer,
#wrapper-footer,
.footer-widgets { display: none !important; }

/* Site wrap protection — applies BEFORE JS adds .gene-site-wrap class.
   Guarantees #page.site always sits above any fixed footer and has a cream bg. */
#page.site,
.gene-site-wrap {
  position: relative;
  z-index: 2;
  background: #F2F2F2;
  min-height: 100vh;
}

/* ============================================================
   1. SCROLL FIX — Remove conflicts with Lenis
   ============================================================ */
html {
  scroll-behavior: auto !important;
}

html.lenis, html.lenis body {
  height: auto;
}

.html.lenis .has-scroll-smooth {
  position: static;
}

html, body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: static !important;
  width: 100%;
}

/* ============================================================
   2. FOUNDATION
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   3. SOFT WHITE PALETTE — Gene #F2F2F2 everywhere (except footer)
   ============================================================ */
html,
body,
.site,
.site-content,
.site-content:not(.dark-scheme),
.page-headline:before,
.vc_row:not(.site-footer):not(#colophon),
.vc_row.clb__dark_section:not(.site-footer):not(#colophon),
.ohio-container,
main,
main#main,
article {
  background-color: #F2F2F2 !important;
}

/* Override inline theme dark rows site-wide (except footer) */
.clb__dark_section:not(.site-footer):not(#colophon),
.clb__dark_section:not(.site-footer):not(#colophon) .vc_column-inner,
.vc_row.vc_row-has-fill.clb__dark_section:not(.site-footer):not(#colophon) {
  background-color: #F2F2F2 !important;
  background-image: none !important;
  color: #0a0a0a !important;
}

/* Text color in previously dark sections flips to black */
.clb__dark_section:not(.site-footer):not(#colophon) :where(h1, h2, h3, h4, h5, h6, p, span, li, a) {
  color: #0a0a0a !important;
}

/* Keep footer dark */
#colophon.site-footer,
#colophon.site-footer.clb__dark_section {
  background-color: #0a0a0a !important;
}

/* ============================================================
   4. TYPOGRAPHY — Dramatic, editorial
   ============================================================ */
h1 {
  letter-spacing: -0.035em !important;
  line-height: 0.95 !important;
}

h2 {
  letter-spacing: -0.03em !important;
}

h3 {
  letter-spacing: -0.025em !important;
}

h4, h5, h6 {
  letter-spacing: -0.01em !important;
}

.subtitle,
.heading .subtitle {
  letter-spacing: 0.2em !important;
  font-weight: 400 !important;
  font-size: 0.65em !important;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ============================================================
   5. SCROLL-REVEAL ANIMATIONS (triggered via JS)
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.6s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.7s; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.8s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.9s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 1.0s; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 1.1s; }

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   6. HERO SECTION — brand.ai style (huge tagline + video below)
   ============================================================ */
/* Hide original WP hero row entirely (JS also sets display:none) */
.vc_custom_1776260482680 {
  display: none !important;
}

/* ------------------------------------------------------------
   SECTION / INNER PAGE HERO — brand.ai/teams style
   ------------------------------------------------------------ */
.gene-page-hero {
  position: relative;
  background: #F2F2F2;
  color: #0a0a0a;
  padding: 14vh 5vw 8vh;
  overflow: hidden;
}

.gene-page-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.gene-page-hero__eyebrow {
  display: inline-block;
  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: 0 0 28px;
  opacity: 0;
  transform: translateY(16px);
  animation: gene-hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.gene-page-hero__headline {
  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;
  color: #0a0a0a;
  max-width: 18ch;
  opacity: 0;
  transform: translateY(30px);
  animation: gene-hero-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.gene-page-hero__headline em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
}

.gene-page-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;
  opacity: 0;
  transform: translateY(20px);
  animation: gene-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.gene-page-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: gene-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.gene-page-hero__media {
  margin-top: 6vh;
  padding: 0 5vw;
  opacity: 0;
  transform: translateY(40px);
  animation: gene-hero-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

.gene-page-hero__media img {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: block;
  border-radius: 24px;
}

@media screen and (max-width: 768px) {
  .gene-page-hero { padding: 14vh 20px 6vh; }
  .gene-page-hero__media { padding: 0 20px; margin-top: 4vh; }
  .gene-page-hero__media img { border-radius: 14px; }
}

/* New brand.ai-style hero */
.gene-hero {
  position: relative;
  background: #F2F2F2;
  color: #0a0a0a;
  padding: 12vh 0 14vh;
  overflow: hidden;
}

.gene-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.gene-hero__headline {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 40px;
  color: #0a0a0a;
}

.gene-hero__line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: gene-hero-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gene-hero__line:nth-child(1) { animation-delay: 0.1s; }
.gene-hero__line:nth-child(2) { animation-delay: 0.25s; }

.gene-hero__headline em {
  font-family: 'Geist', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #0a0a0a;
}

@keyframes gene-hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

.gene-hero__sub {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.45;
  color: rgba(10, 10, 10, 0.65);
  max-width: 48ch;
  margin: 0 0 44px;
  opacity: 0;
  transform: translateY(20px);
  animation: gene-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.gene-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: gene-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

/* ============================================================
   BUTTONS — clean, simple, two variants only
   .btn       : shared base (shape, padding, font, transition)
   .btn--dark : black bg + white text  → hover inverts
   .btn--light: white bg + black text  → hover inverts
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid #0a0a0a;
  font-family: 'Geist', sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn * { color: inherit !important; text-decoration: none !important; }
.btn em { font-style: normal; transition: transform 0.2s ease; display: inline-block; }
.btn:hover em { transform: translateX(4px); }

.btn--dark          { background: #0a0a0a; color: #ffffff !important; }
.btn--dark:hover    { background: #ffffff; color: #0a0a0a !important; }

.btn--light         { background: #ffffff; color: #0a0a0a !important; }
.btn--light:hover   { background: #0a0a0a; color: #ffffff !important; }

/* Size modifiers */
.btn--sm { padding: 10px 20px; font-size: 0.88em; }
.btn--lg { padding: 20px 32px; font-size: 1.05rem; }

/* Aliases — map existing CTA classes to the unified .btn system */
.gene-hero__cta,
.gene-topnav__cta,
.gene-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid #0a0a0a;
  font-family: 'Geist', sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gene-hero__cta *,
.gene-topnav__cta *,
.gene-footer__cta * { color: inherit !important; text-decoration: none !important; }
.gene-hero__cta em,
.gene-topnav__cta em,
.gene-footer__cta em {
  font-style: normal;
  display: inline-block;
  transition: transform 0.2s ease;
}
.gene-hero__cta:hover em,
.gene-topnav__cta:hover em,
.gene-footer__cta:hover em { transform: translateX(4px); }

.gene-hero__cta--primary  { background: #0a0a0a !important; color: #ffffff !important; border-color: #0a0a0a !important; }
.gene-hero__cta--primary:hover { background: #ffffff !important; color: #0a0a0a !important; border-color: #0a0a0a !important; }

/* Brand.ai-style solid white button inside the dark pill */
.gene-topnav__cta {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 500;
}
.gene-topnav__cta:hover {
  background: #ececec !important;
  color: #0a0a0a !important;
  border-color: #ececec !important;
  transform: none;
}

.gene-hero__cta--ghost,
.gene-footer__cta          { background: #ffffff !important; color: #0a0a0a !important; border-color: #0a0a0a !important; }
.gene-hero__cta--ghost:hover,
.gene-footer__cta:hover    { background: #0a0a0a !important; color: #ffffff !important; border-color: #0a0a0a !important; }

.gene-topnav__cta { padding: 10px 20px; font-size: 0.88em; }
.gene-footer__cta { padding: 20px 32px; font-size: 1.05rem; }

/* Hero media — full-width video below */
.gene-hero__media {
  margin-top: 7vh;
  padding: 0 5vw;
  opacity: 0;
  transform: translateY(40px);
  animation: gene-hero-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.gene-hero__video {
  width: 100%;
  max-width: 1440px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  margin: 0 auto;
  background: #0a0a0a;
}

/* Hide any legacy visual wrapper if still referenced */
.gene-hero-visual { display: none !important; }

/* Neutralize WP Antidote video row negative margin (was overlapping hidden Greetings row) */
.vc_custom_1771452926764 {
  margin-top: 0 !important;
}

/* ============================================================
   7. "GREETINGS" SECTION — Text reveal
   ============================================================ */
.vc_custom_1771449340460 h1 {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  max-width: 22ch;
}

/* ============================================================
   8. LEGACY WP PILL BUTTON SHAPE (kept for theme-injected buttons)
   ============================================================ */
.button:not(.hamburger-button),
a.button,
input[type="submit"] {
  border-radius: 100px !important;
  letter-spacing: 0.02em !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.button.-outlined:not(.hamburger-button),
a.button.-outlined {
  border-width: 1.5px !important;
}

.button.-outlined:hover,
a.button.-outlined:hover {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
}

.button:not(.-outlined):not(.hamburger-button):hover,
a.button:not(.-outlined):hover,
input[type="submit"]:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #0a0a0a !important;
}

/* ============================================================
   9. WORK PORTFOLIO GRID
   ============================================================ */
.wpb_raw_code .wpb_wrapper > div > div:first-child {
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wpb_raw_code .wpb_wrapper > div:hover > div:first-child {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
}

/* Category labels */
.wpb_raw_code span[style*="color:#999"] {
  letter-spacing: 0.15em !important;
}

/* ============================================================
   10. BLOG CARDS — No hover shift
   ============================================================ */
.blog-item .image-holder,
.blog-item .image-holder img,
.blog-item:not(.-contained) .image-holder {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.blog-item.card {
  transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.blog-item.card:hover {
  box-shadow: none !important;
}

.blog-item.-img-scale .image-holder img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.blog-item.-img-scale:hover .image-holder img {
  transform: scale(1.04) !important;
}

.blog-item .card-details {
  padding-top: 20px !important;
}

.blog-item .headline-meta {
  opacity: 0.5;
  transition: opacity 0.3s ease !important;
}

.blog-item:hover .headline-meta {
  opacity: 0.8;
}

/* ============================================================
   11. SECTION DIVIDERS
   ============================================================ */
.vc_separator .vc_sep_line {
  border-color: rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   12. CLIENT LOGOS
   ============================================================ */
.ohio-widget.logo img {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0.35;
  filter: grayscale(100%);
}

.ohio-widget.logo:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

/* ============================================================
   13. AWARDS — No hover shift
   ============================================================ */
.wpb_single_image .vc_single_image-wrapper {
  border-radius: 16px !important;
  overflow: hidden;
  border: none !important;
  background: #fff !important;
  padding: 24px !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wpb_single_image .vc_single_image-wrapper:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

.wpb_single_image .vc_single_image-wrapper img {
  border-radius: 8px !important;
}

/* ============================================================
   14. GLOBAL TRANSITIONS
   ============================================================ */
a {
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ============================================================
   15. GENE TOP NAV — Fixed, brand.ai-style with animated mark
   ============================================================ */

/* Hide original WordPress header + hamburger entirely */
#masthead,
header.header.header-1,
.desktop-hamburger,
.mobile-overlay.menu-mobile-overlay {
  display: none !important;
}

/* Fixed top nav — brand.ai style expanding dark pill */
.gene-topnav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: auto;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px 10px 20px;
  background: #1b1b1b;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  transition: padding 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
}

.gene-topnav.is-scrolled {
  background: #111111;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* CSS Grid expansion trick: content-sized wing that animates from 0fr to 1fr */
.gene-topnav__wing {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.gene-topnav__wing-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-left: 36px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.45s ease 0.25s;
}

/* INTRO: collapse wing to 0, pill shrinks to just the logo */
.gene-topnav.is-intro {
  padding: 10px 12px;
  border-radius: 999px;
}
.gene-topnav.is-intro .gene-topnav__wing {
  grid-template-columns: 0fr;
}
.gene-topnav.is-intro .gene-topnav__wing-inner {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Push site content below the floating nav */
body {
  padding-top: 0;
}
#page.site,
.gene-site-wrap {
  padding-top: 88px;
}

body.gene-nav-ready .gene-topnav.is-scrolled ~ * {
  /* no-op, kept for future */
}

.gene-topnav__logo,
.gene-topnav__logo:hover,
.gene-topnav__links a,
.gene-topnav__links a:hover,
.gene-topnav__links a.is-active,
.gene-topnav__wordmark {
  color: #ffffff !important;
}
.gene-topnav__links a { color: rgba(255,255,255,0.72) !important; }
.gene-topnav__links a:hover,
.gene-topnav__links a.is-active { color: #ffffff !important; }

/* Logo block */
.gene-topnav__logo,
.gene-topnav__logo:hover,
.gene-topnav__logo:focus,
.gene-topnav__logo:active,
.gene-topnav__logo:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  line-height: 1;
  padding: 4px 0;
  opacity: 1;
}

.gene-topnav__logo *,
.gene-topnav__logo:hover * {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* Gene mark SVG — static */
.gene-mark-svg {
  width: 34px;
  height: 34px;
  display: block;
  overflow: visible;
}

/* Keep mark size constant across scroll states */

.gene-mark-svg .gene-mark-path {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0;
}

/* Hover: keep mark color steady */
.gene-topnav__logo:hover .gene-mark-path {
  fill: #ffffff;
}

/* Wordmark next to the mark — hidden in intro, revealed when pill expands */
.gene-topnav__wordmark {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1;
  display: inline-block;
  max-width: 120px;
  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);
}
.gene-topnav.is-intro .gene-topnav__wordmark {
  max-width: 0;
  opacity: 0;
  margin-left: -10px; /* collapse the logo gap too */
  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);
}

/* Links */
.gene-topnav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.gene-topnav__links a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: 'Geist', sans-serif;
  font-size: 0.92em;
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 8px 2px;
  transition: color 0.25s ease;
}

.gene-topnav__links a::after { content: none; }

/* Hamburger — hidden on desktop */
.gene-topnav__burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  justify-self: end;
  grid-column: -1;
}
.gene-topnav__burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gene-topnav__burger span:nth-child(1) { top: 14px; }
.gene-topnav__burger span:nth-child(2) { top: 19px; }
.gene-topnav__burger span:nth-child(3) { top: 24px; }
.gene-topnav__burger.is-active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.gene-topnav__burger.is-active span:nth-child(2) { opacity: 0; }
.gene-topnav__burger.is-active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile/tablet menu overlay */
.gene-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(247, 245, 242, 0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  display: flex;
  flex-direction: column;
}
.gene-mobile-menu.is-open { opacity: 1; visibility: visible; }

.gene-mobile-menu__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px 24px 32px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.gene-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gene-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Geist', sans-serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0a0a0a !important;
  text-decoration: none !important;
  padding: 14px 0;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: color 0.2s ease;
}
.gene-mobile-menu__link em {
  font-style: normal;
  font-size: 0.6em;
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.gene-mobile-menu__link:hover em,
.gene-mobile-menu__link:active em { transform: translateX(4px); opacity: 1; }
.gene-mobile-menu__link.is-active { color: rgba(10,10,10,0.45) !important; }

.gene-mobile-menu.is-open .gene-mobile-menu__link {
  animation: gene-menu-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gene-mobile-menu.is-open .gene-mobile-menu__link:nth-child(1) { animation-delay: 0.08s; }
.gene-mobile-menu.is-open .gene-mobile-menu__link:nth-child(2) { animation-delay: 0.14s; }
.gene-mobile-menu.is-open .gene-mobile-menu__link:nth-child(3) { animation-delay: 0.20s; }
.gene-mobile-menu.is-open .gene-mobile-menu__link:nth-child(4) { animation-delay: 0.26s; }
.gene-mobile-menu.is-open .gene-mobile-menu__link:nth-child(5) { animation-delay: 0.32s; }

@keyframes gene-menu-rise {
  to { opacity: 1; transform: translateY(0); }
}

.gene-mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(10,10,10,0.08);
}
.gene-mobile-menu__cta { align-self: flex-start; }
.gene-mobile-menu__meta {
  font-family: 'Geist', sans-serif;
  font-size: 0.85rem;
  color: rgba(10,10,10,0.55);
  margin: 0;
}

/* Tablet — collapse links, keep CTA + logo, show hamburger */
@media screen and (max-width: 960px) {
  .gene-topnav {
    gap: 8px;
    padding: 8px 8px 8px 16px;
  }
  .gene-topnav__wing-inner { padding-left: 20px; gap: 14px; }
  .gene-topnav__links { display: none; }
  .gene-topnav__burger { display: inline-flex; }
  #page.site,
  .gene-site-wrap { padding-top: 84px; }
}

/* Mobile — hide CTA (already in menu), keep hamburger + logo */
@media screen and (max-width: 640px) {
  .gene-topnav {
    top: 10px;
    padding: 6px 8px 6px 14px;
    gap: 4px;
  }
  .gene-topnav__cta { display: none; }
  .gene-topnav__wordmark { font-size: 0.95em; }
  .gene-mark-svg { width: 28px; height: 28px; }
  #page.site,
  .gene-site-wrap { padding-top: 72px; }
}

/* Very small screens — unchanged (CTA already hidden above) */
@media screen and (max-width: 420px) {
  .gene-topnav__cta { display: none; }
}

/* --- Gene Symbol (floating background element) --- */
.gene-symbol-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.gene-symbol {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.03;
  transition: opacity 1.5s ease;
}

.gene-symbol.is-active {
  opacity: 0.04;
}

.gene-symbol svg {
  width: 100%;
  height: 100%;
}

.gene-symbol svg path {
  fill: none;
  stroke: #F2F2F2;
  stroke-width: 1.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: gene-draw 4s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}

@keyframes gene-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.gene-symbol svg .gene-helix-1 {
  animation-delay: 1.5s;
}
.gene-symbol svg .gene-helix-2 {
  animation-delay: 2s;
}
.gene-symbol svg .gene-helix-3 {
  animation-delay: 2.5s;
}

@keyframes gene-morph {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(-48%, -52%) rotate(2deg) scale(1.02);
  }
  50% {
    transform: translate(-52%, -48%) rotate(-1deg) scale(0.98);
  }
  75% {
    transform: translate(-50%, -50%) rotate(1.5deg) scale(1.01);
  }
}

.gene-symbol.is-drawn {
  animation: gene-morph 20s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

@keyframes gene-pulse {
  0%, 100% {
    filter: blur(0px) drop-shadow(0 0 0px rgba(158, 240, 240, 0));
  }
  50% {
    filter: blur(1px) drop-shadow(0 0 40px rgba(158, 240, 240, 0.15));
  }
}

.gene-symbol.is-drawn svg {
  animation: gene-pulse 6s ease-in-out infinite;
}

@media screen and (max-width: 768px) {
  .gene-inline-nav {
    display: none !important;
  }
  .gene-symbol {
    width: 300px;
    height: 300px;
  }
}

/* ============================================================
   16. SELECTION COLOR
   ============================================================ */
::selection {
  background-color: rgba(158, 240, 240, 0.3) !important;
  color: #000 !important;
}

/* ============================================================
/* ============================================================
   17. FOOTER — solid, normal-flow footer at bottom of document
   ============================================================ */
html.has-gene-footer,
html:has(body.has-gene-footer) {
  background: #F2F2F2;
}
.has-gene-footer {
  background: #F2F2F2 !important;
}

/* Normal-flow footer — no reveal gap, no fixed positioning, never shows through */
.gene-footer {
  display: none;
  position: relative;
  z-index: 1;
  background: #0a0a0a;
  color: #F2F2F2;
  padding: 96px 0 28px;
  justify-content: center;
  overflow: hidden;
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gene-footer.is-ready {
  display: flex;
}

/* Soft ambient glow */
.gene-footer::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 100%, rgba(158, 240, 240, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.gene-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* ─── CTA ROW ────────────────────────────────────────── */
.gene-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);
}

.gene-footer__pitch { max-width: 720px; }

.gene-footer__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F2F2F2;
  margin-bottom: 24px;
}

.gene-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;
}
.gene-footer__h em {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #F2F2F2;
  letter-spacing: -0.02em;
}

.gene-footer__sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(242, 242, 242, 0.62);
  margin: 0;
  max-width: 52ch;
}

.gene-footer__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.gene-footer__email {
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  color: rgba(242, 242, 242, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}
.gene-footer__email:hover { color: #F2F2F2; }

/* ─── LINK GRID ──────────────────────────────────────── */
.gene-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.gene-footer__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.35);
  margin-bottom: 22px;
}

.gene-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gene-footer__col li {
  font-size: 1rem;
  line-height: 1.3;
  color: rgba(242, 242, 242, 0.72);
}
.gene-footer__col a {
  color: rgba(242, 242, 242, 0.72);
  text-decoration: none;
  transition: color 0.3s ease;
}
.gene-footer__col a:hover { color: #F2F2F2; }

/* ─── GIANT WORDMARK ─────────────────────────────────── */
.gene-footer__wordmark {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0.8;
  padding-top: 16px;
  padding-bottom: 8px;
}
.gene-footer__wordmark span {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.1vw, 2.1rem);
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: #F2F2F2;
  background: linear-gradient(180deg, #F2F2F2 0%, rgba(242, 242, 242, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  white-space: nowrap;
}

/* ─── BOTTOM META BAR ────────────────────────────────── */
.gene-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);
}

.gene-footer__legal {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.gene-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(242, 242, 242, 0.55);
}
.gene-footer__status em {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
  font-style: normal;
  animation: gene-status-pulse 2.4s ease-in-out infinite;
}
@keyframes gene-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.9); }
}

.gene-footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(242, 242, 242, 0.18);
  border-radius: 999px;
  color: rgba(242, 242, 242, 0.7);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.gene-footer__top-link em {
  font-style: normal;
  transition: transform 0.3s ease;
}
.gene-footer__top-link:hover {
  color: #0a0a0a;
  background: #F2F2F2;
  border-color: #F2F2F2;
}
.gene-footer__top-link:hover em { transform: translateY(-3px); }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .gene-footer { padding: 72px 0 24px; }
  .gene-footer__inner { padding: 0 32px; gap: 56px; }
  .gene-footer__cta-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 48px;
  }
  .gene-footer__actions { align-items: flex-start; }
  .gene-footer__grid { gap: 32px; }
}

@media (max-width: 640px) {
  .gene-footer { padding: 56px 0 20px; }
  .gene-footer__inner { padding: 0 20px; gap: 40px; }
  .gene-footer__eyebrow { margin-bottom: 16px; font-size: 0.72rem; }
  .gene-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .gene-footer__wordmark span { font-size: clamp(0.8rem, 2.6vw, 1rem); }
  .gene-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .gene-footer__legal { gap: 14px; flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   LEGACY FOOTER (WP) — kept for selector compat but hidden via JS
   ============================================================ */
.site-footer {
  border-top: none;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

.site-footer-copyright .holder {
  opacity: 0.4;
  letter-spacing: 0.05em;
}

/* ============================================================
   18. HAMBURGER NAV — Full-screen (mobile + fallback)
   ============================================================ */
.hamburger-nav {
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
}

.hamburger-nav .menu .nav-item a span {
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-block;
}

.hamburger-nav .menu .nav-item a:hover span {
  opacity: 0.6;
  color: #F2F2F2 !important;
}

/* ============================================================
   19. CONTENT TEXT — Better reading
   ============================================================ */
.ohio-text-sc p {
  line-height: 1.75 !important;
}

/* ============================================================
   20. SCROLL-TO-TOP — Minimal
   ============================================================ */
.scroll-top {
  opacity: 0.3;
  transition: opacity 0.3s ease !important;
}

.scroll-top:hover {
  opacity: 1;
}

/* ============================================================
   21. PRELOADER
   ============================================================ */
.page-preloader:not(.percentage-preloader) {
  background-color: #0a0a0a !important;
}

/* ============================================================
   22. PORTFOLIO ITEMS — Rounded
   ============================================================ */
.portfolio-item .image-holder,
.portfolio-item .image-holder img {
  border-radius: 16px !important;
  overflow: hidden;
}

/* ============================================================
   23. "WHAT'S NEW" & "CLIENTS" SECTION HEADERS
   ============================================================ */
.ohio-widget.heading .title {
  position: relative;
}

/* ============================================================
   24. CTA SECTION VISUAL WEIGHT
   ============================================================ */
.clb__dark_section .ohio-text-sc h1,
.clb__dark_section .ohio-text-sc h4 {
  text-shadow: 0 2px 40px rgba(0,0,0,0.3);
}

/* ============================================================
   26. MOBILE — Touch-optimized
   ============================================================ */
@media screen and (max-width: 768px) {
  .vc_custom_1776260482680 h1.title {
    font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
    line-height: 0.95 !important;
  }

  .vc_custom_1771449340460 h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  .button:not(.hamburger-button),
  a.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .blog-item .image-holder,
  .blog-item .image-holder img,
  .wpb_raw_code .wpb_wrapper > div > div:first-child {
    border-radius: 12px !important;
  }

  .wpb_single_image .vc_single_image-wrapper {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .gene-hero {
    padding: 14vh 20px 4vh;
  }

  .gene-hero__media {
    padding: 0 20px;
    margin-top: 5vh;
  }

  .gene-hero__video {
    border-radius: 14px;
  }
}

/* ============================================================
   27. ANIMATION TIMING REFINEMENT
   ============================================================ */
.wpb_animate_when_almost_visible {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-duration: 0.9s !important;
}

/* ============================================================
   28. SMOOTH GRADIENT TRANSITION BETWEEN SECTIONS
   ============================================================ */
.clb__dark_section + .vc_row-full-width + .vc_row:not(.clb__dark_section),
.clb__dark_section + .vc_row:not(.clb__dark_section) {
  position: relative;
}

/* ============================================================
   29. TEAL ACCENT GLOW ON KEY INTERACTIVE ELEMENTS
   ============================================================ */
.button.-outlined:focus-visible,
a.button.-outlined:focus-visible {
  outline: 2px solid #F2F2F2;
  outline-offset: 4px;
}

/* ============================================================
   30. SMOOTH PAGE ENTRANCE
   ============================================================ */
@keyframes page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#page {
  animation: page-enter 0.6s ease-out;
}

/* ============================================================
   ABOUT PAGE — Transformation × AI platform
   ============================================================ */
.gene-about { color: #0a0a0a; }

.gene-about__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5vw;
}

.gene-about__eyebrow {
  display: inline-block;
  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: 0 0 24px;
}

.gene-about__eyebrow--light { color: rgba(242, 242, 242, 0.6); }

.gene-about__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;
  color: #0a0a0a;
}

.gene-about__h1 em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
}
.gene-about__h2 em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
}
.gene-about__manifesto-text em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
}

.gene-about__h2 {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: #0a0a0a;
  max-width: 20ch;
}
.gene-about__h2--light { color: #F2F2F2; }

.gene-about__lead,
.gene-about__section-lead {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.65);
  max-width: 56ch;
  margin: 0 0 40px;
}
.gene-about__section-lead--light { color: rgba(242, 242, 242, 0.75); }

/* HERO */
.gene-about__hero {
  padding: 14vh 5vw 4vh;
  background: #F2F2F2;
}
.gene-about__hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.gene-about__hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.gene-about__hero-media {
  margin: 6vh 0 0;
  padding: 0;
}
.gene-about__hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 30px 80px -30px rgba(10, 10, 10, 0.25);
}
.gene-about__hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* MANIFESTO */
.gene-about__manifesto {
  background: #F2F2F2;
  padding: 14vh 0 10vh;
}
.gene-about__manifesto-text {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  max-width: 28ch;
  margin: 0;
}

/* SECTION HEADS */
.gene-about__section-head {
  margin-bottom: 64px;
  max-width: 720px;
}
.gene-about__section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.gene-about__section-head--center .gene-about__section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   ABOUT — agency backgrounder components
   ============================================ */
.gene-story {
  background: #F2F2F2;
  padding: 14vh 0;
}
.gene-story__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.gene-story__col p {
  font-family: 'Geist', sans-serif;
  font-size: 1.15em;
  line-height: 1.55;
  color: rgba(10,10,10,0.75);
  margin: 0 0 20px;
  max-width: 60ch;
}
.gene-story__col p:last-child { margin-bottom: 0; }

.gene-caps {
  background: #F2F2F2;
  padding: 14vh 0;
}
.gene-about__section-lead {
  font-family: 'Geist', sans-serif;
  font-size: 1.05em;
  line-height: 1.55;
  color: rgba(10,10,10,0.7);
  max-width: 62ch;
  margin: 18px 0 0;
}
.gene-caps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(10,10,10,0.08);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 60px;
}
.gene-caps__list {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gene-caps__list .gene-cap {
  display: grid;
  grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
  background: rgba(255,255,255,0.55);
  padding: 36px 40px;
  min-height: 0;
  border-radius: 18px;
  transition: background 0.4s ease, transform 0.4s ease;
}
.gene-caps__list .gene-cap:hover {
  background: #ffffff;
  transform: translateY(-2px);
}
.gene-caps__list .gene-cap__n {
  margin: 0;
  font-size: 0.9em;
  letter-spacing: 0.2em;
  padding-top: 6px;
}
.gene-caps__list .gene-cap__head { min-width: 0; }
.gene-caps__list .gene-cap__t { margin: 0 0 16px; }
.gene-caps__list .gene-cap__d {
  font-family: 'Geist', sans-serif;
  font-size: 1em;
  line-height: 1.55;
  color: rgba(10,10,10,0.72);
  margin: 0;
  max-width: 44ch;
}
.gene-caps__list .gene-cap__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gene-caps__list .gene-cap__list li {
  font-family: 'Geist', sans-serif;
  font-size: 0.92em;
  line-height: 1.4;
  color: rgba(10,10,10,0.78);
  padding-left: 0;
  position: relative;
}
@media (max-width: 900px) {
  .gene-caps__list .gene-cap {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 0;
  }
  .gene-caps__list .gene-cap__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .gene-caps__list .gene-cap__list { grid-template-columns: 1fr; }
}
.gene-cap {
  background: #F2F2F2;
  padding: 56px 48px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
}
.gene-cap:hover { background: #fff; }
.gene-cap__n {
  font-family: 'Geist', sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(10,10,10,0.4);
  margin-bottom: 40px;
}
.gene-cap__t {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #0a0a0a;
  margin: 0 0 16px;
}
.gene-cap__d {
  font-family: 'Geist', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: rgba(10,10,10,0.68);
  margin: 0 0 24px;
  max-width: 42ch;
}
.gene-cap__list {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gene-cap__list li {
  font-family: 'Geist', sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  color: #0a0a0a;
  padding: 6px 12px;
  border: 1px solid rgba(10,10,10,0.15);
  border-radius: 999px;
}

.gene-sectors {
  background: #F2F2F2;
  padding: 14vh 0;
}
.gene-sectors__list {
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gene-sectors__list li {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing: -0.02em;
  color: #0a0a0a;
  padding: 14px 24px;
  border: 1.5px solid rgba(10,10,10,0.15);
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.gene-sectors__list li:hover {
  background: #0a0a0a;
  color: #F2F2F2;
  border-color: #0a0a0a;
  transform: translateY(-2px);
}

.gene-values {
  background: #0a0a0a;
  padding: 16vh 0;
}
.gene-values .gene-about__eyebrow { color: rgba(242,242,242,0.55); }
.gene-values .gene-about__h2 { color: #F2F2F2; }
.gene-values__list {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 80px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(242,242,242,0.12);
  border: 1px solid rgba(242,242,242,0.12);
  border-radius: 20px;
  overflow: hidden;
}
.gene-values__list li {
  background: #0a0a0a;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.gene-values__n {
  font-family: 'Geist', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(242,242,242,0.4);
  margin-bottom: 40px;
}
.gene-values__list h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1.25em;
  letter-spacing: -0.02em;
  color: #F2F2F2;
  margin: 0 0 12px;
}
.gene-values__list p {
  font-family: 'Geist', sans-serif;
  font-size: 0.95em;
  line-height: 1.5;
  color: rgba(242,242,242,0.65);
  margin: 0;
}

.gene-offices {
  background: #F2F2F2;
  padding: 14vh 0;
}
.gene-offices__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.gene-offices__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: rgba(10,10,10,0.08);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.gene-offices__list li {
  background: #F2F2F2;
  padding: 28px 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
}
.gene-offices__city {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.gene-offices__role {
  font-family: 'Geist', sans-serif;
  font-size: 0.95em;
  color: rgba(10,10,10,0.6);
}

/* ============================================
   BRAND DOMINANCE PAGE — cutting-edge 5P experience
   ============================================ */
.bd { color: #F2F2F2; }

/* HERO — cinematic black */
.bd-hero {
  background: #050505;
  min-height: 100vh;
  padding: 14vh 0 8vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.bd-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 80%, rgba(158,240,240,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.bd-hero__copy {
  padding: 0 48px 0 8vw;
  position: relative;
  z-index: 2;
}
.bd-hero__eyebrow {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(158,240,240,0.9);
  margin-bottom: 28px;
}
.bd-hero__h1 {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: #F2F2F2;
  margin: 0 0 32px;
}
.bd-hero__h1 em {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.03em;
  color: #F2F2F2;
}
.bd-hero__lead {
  font-family: 'Geist', sans-serif;
  font-size: 1.2em;
  line-height: 1.5;
  color: rgba(242,242,242,0.7);
  margin: 0 0 40px;
  max-width: 50ch;
}
.bd-hero__cta { background: #ffffff; color: #0a0a0a !important; border-color: #ffffff; }
.bd-hero__cta:hover { background: transparent; color: #ffffff !important; border-color: #ffffff; }
.bd-hero__mark {
  position: relative;
  z-index: 2;
  padding-right: 5vw;
}

/* Brand Dominance mark SVG */
.bd-mark {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.bd-mark__ring {
  fill: none;
  stroke: rgba(242,242,242,0.4);
  stroke-width: 1.25;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: bd-draw 2s cubic-bezier(0.22,1,0.36,1) both;
  transition: stroke 0.5s ease, stroke-width 0.5s ease, filter 0.5s ease;
}
.bd-mark__node {
  fill: #F2F2F2;
  filter: drop-shadow(0 0 10px rgba(158,240,240,0.7));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bd-node 0.9s cubic-bezier(0.22,1,0.36,1) forwards,
             bd-nodePulse 3.4s ease-in-out 2s infinite;
  transition: fill 0.4s ease, r 0.4s ease;
}
@keyframes bd-node {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bd-nodePulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1;   }
}
.bd-sticky-mark .bd-mark__node,
.bd-portal__stage .bd-mark__node { fill: #0a0a0a; filter: none; }
.bd-mark__core {
  opacity: 0;
  animation: bd-fade 1.4s ease-out 1.4s forwards;
}
.bd-mark__aura {
  opacity: 0;
  animation: bd-fade 1.6s ease-out 0.2s forwards;
}
.bd-mark__label {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  fill: rgba(242,242,242,0.55);
  text-anchor: middle;
  opacity: 0;
  animation: bd-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) both;
  transition: fill 0.4s ease, font-size 0.4s ease, font-weight 0.4s ease;
}
@keyframes bd-draw { to { stroke-dashoffset: 0; } }
@keyframes bd-fade { to { opacity: 1; } }
@keyframes bd-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Light variant (for sticky/synth on cream backgrounds) */
.bd-sticky-mark .bd-mark__ring,
.bd-portal__stage .bd-mark__ring {
  stroke: rgba(10,10,10,0.25);
}
.bd-sticky-mark .bd-mark__label,
.bd-portal__stage .bd-mark__label {
  fill: rgba(10,10,10,0.5);
}
.bd-portal__stage .bd-mark__aura,
.bd-sticky-mark .bd-mark__aura { opacity: 0; }
.bd-portal__stage .bd-mark__core,
.bd-sticky-mark .bd-mark__core { opacity: 0.6; }

/* Active P — highlight ring + label on hover/scroll */
.bd-portal__stage[data-active] .bd-mark__ring,
.bd-sticky-mark[data-active] .bd-mark__ring,
.bd-hero__mark[data-active] .bd-mark__ring { stroke: rgba(10,10,10,0.1); }

.bd-hero__mark[data-active] .bd-mark__ring { stroke: rgba(242,242,242,0.18); }

[data-active="purpose"]     .bd-mark__ring[data-p="purpose"],
[data-active="promise"]     .bd-mark__ring[data-p="promise"],
[data-active="platform"]    .bd-mark__ring[data-p="platform"],
[data-active="presence"]    .bd-mark__ring[data-p="presence"],
[data-active="performance"] .bd-mark__ring[data-p="performance"] {
  stroke: #F2F2F2;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 16px rgba(158,240,240,0.6));
}
[data-active="purpose"]     .bd-mark__label[data-p="purpose"],
[data-active="promise"]     .bd-mark__label[data-p="promise"],
[data-active="platform"]    .bd-mark__label[data-p="platform"],
[data-active="presence"]    .bd-mark__label[data-p="presence"],
[data-active="performance"] .bd-mark__label[data-p="performance"] {
  fill: #0a0a0a;
  font-size: 22px;
  font-weight: 400;
}
.bd-hero__mark[data-active] .bd-mark__label[data-p] { fill: #F2F2F2; }

/* THESIS band */
.bd-thesis {
  background: #F2F2F2;
  color: #0a0a0a;
  padding: 16vh 0;
}
.bd-thesis__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.bd-thesis p {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #0a0a0a;
  margin: 0;
}
.bd-thesis em {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.015em;
  color: #0a0a0a;
}

/* PORTAL — 5 card rail beside floating mark */
.bd-portal {
  background: #F2F2F2;
  color: #0a0a0a;
  padding: 6vh 0 16vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}
.bd-portal__stage {
  position: sticky;
  top: 120px;
  aspect-ratio: 8 / 7;
}
.bd-portal__rail {
  display: grid;
  gap: 12px;
}
.bd-portal__card {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.bd-portal__card:hover,
.bd-portal__card:focus-visible {
  border-color: #0a0a0a;
  background: #0a0a0a;
  color: #F2F2F2;
  transform: translateX(8px);
  box-shadow: 0 24px 60px -24px rgba(10,10,10,0.3);
}
.bd-portal__card:hover .bd-portal__n,
.bd-portal__card:hover .bd-portal__d { color: rgba(242,242,242,0.55); }
.bd-portal__card:hover .bd-portal__arrow { color: #F2F2F2; transform: translateX(4px); }
.bd-portal__n {
  font-family: 'Geist', sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(10,10,10,0.45);
}
.bd-portal__t {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: -0.025em;
}
.bd-portal__d {
  font-family: 'Geist', sans-serif;
  font-size: 0.92em;
  color: rgba(10,10,10,0.55);
  text-align: right;
}
.bd-portal__arrow {
  font-family: 'Geist', sans-serif;
  font-size: 1.4em;
  color: rgba(10,10,10,0.35);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* CHAPTERS — scrollytelling */
.bd-chapters {
  position: relative;
  background: #050505;
  color: #F2F2F2;
}
.bd-sticky-mark {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  float: right;
  width: 32vw;
  max-width: 460px;
  pointer-events: none;
  margin-right: 5vw;
  opacity: 0.5;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.bd-sticky-mark .bd-mark__ring { stroke: rgba(242,242,242,0.25); }
.bd-sticky-mark .bd-mark__label { fill: rgba(242,242,242,0.4); }
.bd-sticky-mark .bd-mark__core { opacity: 0.3; }

.bd-chapter {
  position: relative;
  min-height: 90vh;
  padding: 18vh 0;
  border-top: 1px solid rgba(242,242,242,0.06);
  z-index: 2;
}
.bd-chapter__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.bd-chapter__num {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(158,240,240,0.9);
  margin-bottom: 20px;
}
.bd-chapter__tag {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 1em;
  color: rgba(242,242,242,0.55);
  margin-bottom: 28px;
}
.bd-chapter__title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: #F2F2F2;
  margin: 0 0 32px;
}
.bd-chapter__claim {
  font-family: 'Geist', sans-serif;
  font-size: 1.25em;
  line-height: 1.45;
  color: rgba(242,242,242,0.8);
  margin: 0 0 48px;
  max-width: 42ch;
}
.bd-chapter__services {
  border-top: 1px solid rgba(242,242,242,0.12);
  padding-top: 28px;
}
.bd-chapter__services-label {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.5);
  margin-bottom: 16px;
}
.bd-chapter__services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-chapter__services li {
  font-family: 'Geist', sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  color: #F2F2F2;
  padding: 8px 16px;
  border: 1px solid rgba(242,242,242,0.2);
  border-radius: 999px;
}

/* Per-P visual cards (bespoke geometry) */
.bd-chapter__visual {
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, rgba(158,240,240,0.08) 0%, rgba(242,242,242,0.02) 100%);
  border: 1px solid rgba(242,242,242,0.1);
  border-radius: 32px;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.bd-chapter__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(158,240,240,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.bd-vis {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.bd-vis__ring,
.bd-vis__stroke {
  fill: none;
  stroke: rgba(242,242,242,0.5);
  stroke-width: 1.25;
}
.bd-vis__stroke--thin { stroke: rgba(242,242,242,0.3); stroke-width: 1; fill: none; }
.bd-vis__stroke--v { stroke: rgba(242,242,242,0.3); stroke-dasharray: 4 4; }
.bd-vis__ring--solid {
  fill: #F2F2F2;
  stroke: #F2F2F2;
}
.bd-vis__dot { fill: rgba(242,242,242,0.55); }
.bd-vis__dot--solid { fill: #F2F2F2; }
.bd-vis__spoke { stroke: rgba(242,242,242,0.25); stroke-width: 1; }
.bd-vis__node  { fill: rgba(242,242,242,0.7); }
.bd-vis__label {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 400;
  fill: rgba(242,242,242,0.75);
  text-anchor: middle;
}
.bd-vis__label--solid { fill: #050505; font-weight: 400; }
.bd-vis__line {
  stroke: #F2F2F2;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(158,240,240,0.6));
}

/* Chapter reveal on scroll */
.bd-chapter { opacity: 0.3; transition: opacity 0.8s ease; }
.bd-chapter.is-active { opacity: 1; }

/* SYNTHESIS */
.bd-synth {
  background: #050505;
  padding: 20vh 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
  border-top: 1px solid rgba(242,242,242,0.06);
}
.bd-synth__mark {
  aspect-ratio: 8 / 7;
  filter: drop-shadow(0 0 40px rgba(158,240,240,0.3));
}
.bd-synth__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #F2F2F2;
  margin: 0 0 32px;
}
.bd-synth__h em {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #F2F2F2;
}
.bd-synth__copy p {
  font-family: 'Geist', sans-serif;
  font-size: 1.15em;
  line-height: 1.5;
  color: rgba(242,242,242,0.7);
  margin: 0;
  max-width: 50ch;
}

/* ===== BD · Card-stack visuals (new) ===== */
.bd-vstack,
.bd-matrix,
.bd-dash {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  color: #F2F2F2;
  position: relative;
  z-index: 1;
}
.bd-vstack__head,
.bd-matrix__head,
.bd-dash__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(242,242,242,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.75);
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bd-vstack__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F2F2F2;
  box-shadow: 0 0 12px #F2F2F2;
  animation: bdPulse 2.4s ease-in-out infinite;
}
@keyframes bdPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.bd-vstack__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bd-vcard {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(242,242,242,0.08);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(14px);
  animation: bdRise 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.bd-vcard:hover {
  transform: translateY(-2px);
  border-color: rgba(158,240,240,0.35);
  background: rgba(158,240,240,0.05);
}
@keyframes bdRise {
  to { opacity: 1; transform: translateY(0); }
}
.bd-vcard--accent {
  background: linear-gradient(135deg, rgba(158,240,240,0.14), rgba(158,240,240,0.04));
  border-color: rgba(158,240,240,0.35);
}
.bd-vcard__n {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(242,242,242,0.4);
  padding-top: 2px;
}
.bd-vcard--accent .bd-vcard__n { color: #F2F2F2; }
.bd-vcard__label {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #F2F2F2;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.bd-vcard__body p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(242,242,242,0.7);
  margin: 0;
}

/* Presence matrix */
.bd-matrix__col { margin-bottom: 22px; }
.bd-matrix__col:last-of-type { margin-bottom: 0; }
.bd-matrix__lbl {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.45);
  margin-bottom: 12px;
}
.bd-matrix__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-matrix__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(242,242,242,0.1);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #F2F2F2;
  opacity: 0;
  transform: translateY(8px);
  animation: bdRise 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.bd-matrix__chip--ch {
  background: rgba(158,240,240,0.08);
  border-color: rgba(158,240,240,0.2);
  color: #F2F2F2;
}
.bd-matrix__chip:hover {
  transform: translateY(-1px);
  border-color: rgba(158,240,240,0.5);
  background: rgba(158,240,240,0.12);
}
.bd-matrix__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,242,242,0.12), transparent);
  margin: 22px 0;
}

/* Performance dashboard */
.bd-dash__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.bd-dash__tile {
  padding: 22px 20px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(242,242,242,0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(10px);
  animation: bdRise 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bd-dash__lbl {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.5);
}
.bd-dash__val {
  font-family: 'Geist', sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #F2F2F2;
  line-height: 1;
  margin: 4px 0 2px;
}
.bd-dash__d {
  font-size: 12px;
  color: rgba(242,242,242,0.5);
}
.bd-dash__chartwrap {
  height: 120px;
  padding: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(242,242,242,0.08);
  border-radius: 18px;
  overflow: hidden;
}
.bd-dash__chart { width: 100%; height: 100%; display: block; }

/* ===== BD · Technology partners (light) ===== */
.bd-tech {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(10,10,10,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(10,10,10,0.03) 0%, transparent 55%),
    #F2F2F2;
  padding: 14vh 48px;
  border-top: 1px solid rgba(10,10,10,0.06);
  border-bottom: 1px solid rgba(10,10,10,0.06);
  position: relative;
  overflow: hidden;
}
.bd-tech::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
  pointer-events: none;
}
.bd-tech__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bd-tech .bd-hero__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);
}
.bd-tech__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  margin: 20px 0 20px;
  max-width: 24ch;
}
.bd-tech__h em { font-style: normal; font-weight: 400; }
.bd-tech__lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  max-width: 62ch;
  margin: 0 0 56px;
}
.bd-tech__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bd-tech__card {
  position: relative;
  aspect-ratio: 5 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 20px;
  opacity: 1;
  transform: none;
  animation: bdRise 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.bd-tech__card:hover {
  transform: translateY(-3px);
  border-color: rgba(10,10,10,0.2);
  box-shadow: 0 16px 40px -20px rgba(10,10,10,0.2);
}
.bd-tech__mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.88;
}
.bd-tech__mark svg,
.bd-tech__mark img.bd-tech__logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.bd-tech__word {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  white-space: nowrap;
}
.bd-tech__card:hover .bd-tech__mark { transform: scale(1.08); opacity: 1; }
.bd-tech__name {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #0a0a0a;
  text-align: center;
}
.bd-tech__foot {
  font-size: 14px;
  color: rgba(10,10,10,0.5);
  margin: 48px 0 0;
  text-align: center;
  letter-spacing: 0.01em;
}
@media (max-width: 960px) {
  .bd-tech { padding: 10vh 28px; }
  .bd-tech__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .bd-tech__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bd-tech__card { aspect-ratio: 4 / 3; padding: 18px; }
  .bd-tech__lead { margin-bottom: 40px; }
}

/* ================================================================ */
/* ==========   BRAND INTELLIGENCE — light, interactive   ========== */
/* ================================================================ */

/* Hide legacy dark BD shell if it ever renders */
.bd, .bd-hero, .bd-thesis, .bd-portal, .bd-chapters, .bd-synth { display: none !important; }

.bi {
  background: #F2F2F2;
  color: #0a0a0a;
  font-family: 'Geist', sans-serif;
  font-style: normal !important;
}
.bi em, .bi i { font-style: normal; }
.bi-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-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.65);
}
.bi-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(10,10,10,0.14);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #0a0a0a;
}
.bi-badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
  animation: biPulse 2.4s ease-in-out infinite;
}
@keyframes biPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* ----- HERO ----- */
.bi-hero {
  padding: 14vh 48px 10vh;
  position: relative;
  overflow: hidden;
}
.bi-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
  pointer-events: none;
}
.bi-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bi-hero__copy {
  max-width: 960px;
}
.bi-hero__h {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.6em, 7vw, 6.2em);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #0a0a0a;
  margin: 20px 0 32px;
  max-width: 18ch;
}
.bi-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;
}
.bi-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.bi-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 44px;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(10,10,10,0.08);
  justify-content: start;
}
.bi-hero__stats > div { display: flex; flex-direction: column; gap: 4px; }
.bi-hero__stats dt {
  font-family: 'Geist', sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  line-height: 1;
}
.bi-hero__stats dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
}
.bi-hero__stage {
  position: relative;
}

/* ----- Window (shared chrome) ----- */
.bi-window {
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(10,10,10,0.25), 0 2px 0 rgba(255,255,255,1) inset;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
}
.bi-window--hero {
  transform: none;
  border: none;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 40px 80px -40px rgba(10,10,10,0.25);
}
.bi-window--hero > .bi-hv { border-radius: 24px; }
.bi-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(10,10,10,0.06);
  background: rgba(10,10,10,0.02);
}

/* Outer chrome: wraps the entire bi-os as a browser window frame */
.bi-showcase { overflow: visible; }
.bi-chrome--outer {
  background: #ebebeb;
  border: 1px solid rgba(10,10,10,0.10);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 0 rgba(255,255,255,0.6) inset;
}
.bi-showcase .bi-os--flush {
  border: 1px solid rgba(10,10,10,0.10);
  border-top: 1px solid rgba(10,10,10,0.06);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  box-shadow: 0 40px 120px -60px rgba(10,10,10,0.35);
}
.bi-chrome__dots { display: inline-flex; gap: 6px; }
.bi-chrome__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(10,10,10,0.12);
}
.bi-chrome__dots span:first-child { background: rgba(255,95,86,0.75); }
.bi-chrome__dots span:nth-child(2) { background: rgba(255,189,46,0.75); }
.bi-chrome__dots span:nth-child(3) { background: rgba(39,201,63,0.75); }
.bi-chrome__title {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.55);
  text-align: center;
  font-family: 'Geist', sans-serif;
}
.bi-chrome__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.45);
}
.bi-chrome__meta::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #27c93f;
  box-shadow: 0 0 8px rgba(39,201,63,0.6);
  animation: biPulse 2s ease-in-out infinite;
}
.bi-screen {
  padding: 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bi-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #0a0a0a;
  margin-right: 6px;
  vertical-align: middle;
}
.bi-dot--live {
  background: #27c93f;
  box-shadow: 0 0 10px rgba(39,201,63,0.55);
  animation: biPulse 1.8s ease-in-out infinite;
}

/* Purpose screen */
.bi-purpose {}
.bi-purpose__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bi-purpose__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  background: #fafafa;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.bi-purpose__row:hover { transform: translateY(-1px); border-color: rgba(10,10,10,0.2); background: #ffffff; }
.bi-purpose__row span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  align-self: center;
}
.bi-purpose__row p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #0a0a0a;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.bi-purpose__row[data-lvl="why"] {
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.bi-purpose__row[data-lvl="why"] span { color: rgba(242,242,242,0.6); }
.bi-purpose__row[data-lvl="why"] p { color: #F2F2F2; }
.bi-purpose__stamp {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  background: #fafafa;
}

/* Promise screen */
.bi-promise {
  flex-direction: row !important;
  align-items: stretch;
  gap: 14px !important;
}
.bi-promise__card {
  flex: 1;
  padding: 22px 20px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bi-promise__card--b {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #F2F2F2;
}
.bi-promise__card .bi-k {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
}
.bi-promise__card--b .bi-k { color: rgba(242,242,242,0.6); }
.bi-promise__card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: inherit;
}
.bi-promise__arrow {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10,10,10,0.45);
}
.bi-promise__arrow svg { width: 100%; height: auto; }

/* Platform screen — messaging matrix */
.bi-grid {
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}
.bi-grid__row {
  display: grid;
  grid-template-columns: 120px repeat(3, 1fr);
  border-bottom: 1px solid rgba(10,10,10,0.06);
}
.bi-grid__row:last-child { border-bottom: 0; }
.bi-grid__row--head {
  background: #fafafa;
}
.bi-grid__cell {
  padding: 14px 16px;
  font-size: 13px;
  color: #0a0a0a;
  border-right: 1px solid rgba(10,10,10,0.06);
  line-height: 1.35;
}
.bi-grid__cell:last-child { border-right: 0; }
.bi-grid__cell--head {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  font-weight: 400;
}
.bi-grid__cell--lbl {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  background: #fafafa;
  font-weight: 400;
}
.bi-platform-screen__foot {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.55);
}

/* Presence screen — heatmap */
.bi-heat {
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}
.bi-heat__row {
  display: grid;
  grid-template-columns: 100px repeat(8, 1fr);
  border-bottom: 1px solid rgba(10,10,10,0.06);
}
.bi-heat__row:last-child { border-bottom: 0; }
.bi-heat__row--head { background: #fafafa; }
.bi-heat__cell {
  padding: 12px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(10,10,10,0.6);
  text-align: center;
  border-right: 1px solid rgba(10,10,10,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bi-heat__cell:last-child { border-right: 0; }
.bi-heat__cell--head {
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(10,10,10,0.55);
}
.bi-heat__cell--lbl {
  justify-content: flex-start;
  padding-left: 14px;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(10,10,10,0.55);
  background: #fafafa;
}
.bi-heat__cell--dot span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(10,10,10,0.08);
}
.bi-heat__cell--dot[data-v="1"] span { background: rgba(10,10,10,0.15); }
.bi-heat__cell--dot[data-v="2"] span { background: rgba(10,10,10,0.45); }
.bi-heat__cell--dot[data-v="3"] span { background: #0a0a0a; }
.bi-presence__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
}
.bi-presence__legend .bi-heat__cell--dot {
  padding: 0;
  border: 0;
  width: 14px; height: 14px;
}
.bi-presence__legend em { font-style: normal; margin-left: 4px; }
.bi-presence__legend-range {
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
}

/* Performance screen */
.bi-perf__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bi-perf__tile {
  padding: 16px 14px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.bi-perf__tile:hover { transform: translateY(-1px); background: #ffffff; border-color: rgba(10,10,10,0.18); }
.bi-perf__lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
}
.bi-perf__val {
  font-family: 'Geist', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  line-height: 1;
  margin: 4px 0 2px;
}
.bi-perf__d { font-size: 11px; color: rgba(10,10,10,0.5); }
.bi-perf__chartwrap {
  padding: 16px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  background: #ffffff;
}
.bi-perf__chartlbl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  margin-bottom: 10px;
}
.bi-perf__chart { width: 100%; height: 110px; display: block; }

/* ----- INTRO / PILLARS ----- */
.bi-intro {
  padding: 10vh 48px;
  background: #ffffff;
  border-top: 1px solid rgba(10,10,10,0.06);
  border-bottom: 1px solid rgba(10,10,10,0.06);
}
.bi-intro__inner { max-width: 1320px; margin: 0 auto; }
.bi-intro__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  margin: 18px 0 18px;
  max-width: 22ch;
}
.bi-intro__lead {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  max-width: 64ch;
  margin: 0 0 48px;
}
.bi-pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.bi-pillar {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 22px;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 18px;
  background: #fafafa;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
  min-height: 160px;
  position: relative;
  overflow: hidden;
}
.bi-pillar:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: rgba(10,10,10,0.25);
}
.bi-pillar[data-active="true"] {
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.bi-pillar[data-active="true"] .bi-pillar__n,
.bi-pillar[data-active="true"] .bi-pillar__d { color: rgba(242,242,242,0.6); }
.bi-pillar[data-active="true"] .bi-pillar__t { color: #F2F2F2; }
.bi-pillar__n {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(10,10,10,0.45);
  font-weight: 400;
}
.bi-pillar__t {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.bi-pillar__d {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(10,10,10,0.55);
  margin-top: auto;
}

/* ----- PLATFORM / SHOWCASE ----- */
.bi-platform {
  padding: 14vh 48px;
  background: #F2F2F2;
}
.bi-platform__inner { max-width: 1320px; margin: 0 auto; }
.bi-platform__head { margin-bottom: 48px; max-width: 880px; }
.bi-platform__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  margin: 18px 0 18px;
  max-width: 20ch;
}
.bi-platform__sub {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  margin: 0;
  max-width: 60ch;
}

.bi-showcase {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
}
.bi-showcase__tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bi-tab {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.bi-tab:hover { border-color: rgba(10,10,10,0.25); transform: translateX(2px); }
.bi-tab[data-active="true"] {
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.bi-tab[data-active="true"] .bi-tab__n { color: rgba(242,242,242,0.55); }
.bi-tab[data-active="true"] .bi-tab__t { color: #F2F2F2; }
.bi-tab__n {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(10,10,10,0.45);
  font-weight: 400;
}
.bi-tab__t {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

.bi-showcase__stage {
  position: relative;
  min-height: 760px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 22px;
  background: #ffffff;
  overflow: hidden;
}
.bi-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.bi-panel[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.bi-panel__copy {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafafa;
  border-right: 1px solid rgba(10,10,10,0.06);
  overflow-y: auto;
}
.bi-panel__tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
}
.bi-panel__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0;
}
.bi-panel__claim {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(10,10,10,0.7);
  margin: 0 0 8px;
}
.bi-panel__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: auto;
}
.bi-list__lbl {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  margin-bottom: 10px;
}
.bi-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bi-list li {
  font-size: 13px;
  color: #0a0a0a;
  line-height: 1.45;
}
.bi-panel__screen {
  padding: 20px;
  background: #F2F2F2;
  display: flex;
}
.bi-panel__screen > .bi-chrome,
.bi-panel__screen > .bi-screen {
  /* wrap ad-hoc — but buildBIInterface returns chrome + screen directly; wrap them */
}
/* Since buildBIInterface returns a flat two-part HTML, wrap via first-child box */
.bi-panel__screen {
  align-items: stretch;
}
.bi-panel__screen {
  display: block;
  background: #F2F2F2;
  padding: 20px;
}
.bi-panel__screen .bi-chrome,
.bi-panel__screen .bi-screen {
  background: #ffffff;
}
.bi-panel__screen .bi-chrome {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.bi-panel__screen .bi-screen {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border: 1px solid rgba(10,10,10,0.08);
  border-top: 0;
  box-shadow: 0 30px 60px -30px rgba(10,10,10,0.2);
}
.bi-panel__screen .bi-chrome {
  border: 1px solid rgba(10,10,10,0.08);
  border-bottom: 0;
}

/* ----- CTA ----- */
.bi-cta {
  padding: 14vh 48px;
  background: #0a0a0a;
  color: #F2F2F2;
  text-align: center;
}
.bi-cta__inner { max-width: 900px; margin: 0 auto; }
.bi-cta__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #F2F2F2;
  margin: 0 0 16px;
}
.bi-cta__sub {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  color: rgba(242,242,242,0.7);
  margin: 0 0 32px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.bi-cta__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bi-cta .btn--light {
  background: transparent !important;
  color: #F2F2F2 !important;
  border-color: rgba(242,242,242,0.3) !important;
}
.bi-cta .btn--light:hover {
  background: #F2F2F2 !important;
  color: #0a0a0a !important;
  border-color: #F2F2F2 !important;
}
.bi-cta .btn--dark {
  background: #F2F2F2 !important;
  color: #0a0a0a !important;
  border-color: #F2F2F2 !important;
}
.bi-cta .btn--dark:hover {
  background: transparent !important;
  color: #F2F2F2 !important;
  border-color: #F2F2F2 !important;
}

/* ----- Responsive ----- */
@media (max-width: 1060px) {
  .bi-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .bi-window--hero { transform: none; }
  .bi-showcase { grid-template-columns: 1fr; }
  .bi-showcase__tabs { flex-direction: row; overflow-x: auto; gap: 8px; }
  .bi-tab { flex: 0 0 auto; }
  .bi-panel { position: relative; grid-template-columns: 1fr; }
  .bi-showcase__stage { min-height: 0; }
  .bi-panel__copy { border-right: 0; border-bottom: 1px solid rgba(10,10,10,0.06); }
  .bi-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .bi-hero, .bi-intro, .bi-platform, .bi-cta { padding-left: 24px; padding-right: 24px; }
  .bi-hero__stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .bi-pillars { grid-template-columns: 1fr; }
  .bi-panel__copy { padding: 28px 24px; }
  .bi-panel__screen { padding: 16px; }
  .bi-promise { flex-direction: column !important; }
  .bi-promise__arrow { transform: rotate(90deg); width: 100%; height: 36px; }
  .bi-perf__tiles { grid-template-columns: repeat(2, 1fr); }
  .bi-heat__row { grid-template-columns: 80px repeat(8, 1fr); }
  .bi-grid__row { grid-template-columns: 90px repeat(3, 1fr); }
}

/* Brand Dominance CTA */
.bd-cta {
  background: #F2F2F2;
  color: #0a0a0a;
  padding: 16vh 0;
  text-align: center;
}
.bd-cta .gene-about__h2 {
  color: #0a0a0a;
  font-size: clamp(3rem, 7vw, 6rem);
  margin: 0 0 40px;
}
.bd-cta .gene-about__hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* PLATFORM (dark) */
.gene-about__platform {
  background: #0a0a0a;
  color: #F2F2F2;
  padding: 14vh 0;
}
.gene-about__platform .gene-about__eyebrow { color: rgba(242,242,242,0.6); }

.gene-platform__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gene-platform__card {
  grid-column: span 2;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 36px 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.gene-platform__card:hover {
  background: rgba(158,240,240,0.06);
  border-color: rgba(158,240,240,0.35);
  transform: translateY(-3px);
}
.gene-platform__card--wide {
  grid-column: span 4;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.gene-platform__tag {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F2F2F2;
  margin-bottom: 24px;
}
.gene-platform__title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #F2F2F2;
  margin: 0 0 14px;
  max-width: 22ch;
}
.gene-platform__copy {
  font-family: 'Geist', sans-serif;
  font-size: 1em;
  line-height: 1.55;
  color: rgba(242,242,242,0.72);
  margin: 0;
  max-width: 48ch;
}
.gene-platform__viz {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 360px;
  height: 360px;
  background:
    radial-gradient(circle at 30% 30%, rgba(158,240,240,0.25), transparent 60%),
    conic-gradient(from 0deg, rgba(158,240,240,0.15), rgba(158,240,240,0) 60%, rgba(158,240,240,0.15));
  border-radius: 50%;
  filter: blur(20px);
  animation: gene-platform-spin 24s linear infinite;
  pointer-events: none;
}
@keyframes gene-platform-spin {
  to { transform: rotate(360deg); }
}

/* PROCESS */
.gene-about__process {
  background: #F2F2F2;
  padding: 14vh 0;
}
.gene-process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gene-process li {
  padding: 32px 28px;
  background: rgba(255,255,255,0.5);
  border-radius: 16px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.gene-process li:hover {
  background: #ffffff;
  transform: translateY(-2px);
}
.gene-process__num {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(10,10,10,0.45);
  margin-bottom: 24px;
}
.gene-process h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0 0 12px;
}
.gene-process p {
  font-family: 'Geist', sans-serif;
  font-size: 0.98em;
  line-height: 1.5;
  color: rgba(10,10,10,0.65);
  margin: 0;
}

/* PROOF / STATS */
.gene-about__proof {
  background: #F2F2F2;
  padding: 6vh 0 14vh;
}
.gene-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(10,10,10,0.06);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
}
.gene-stat {
  background: #F2F2F2;
  padding: 40px 28px;
}
.gene-stat { display: flex; flex-direction: column; gap: 12px; }
.gene-stat__num {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0a0a0a;
}
.gene-stat__label {
  font-family: 'Geist', sans-serif;
  font-size: 0.95em;
  line-height: 1.4;
  color: rgba(10,10,10,0.65);
  max-width: 28ch;
}

/* FINAL CTA */
.gene-about__cta {
  background: #F2F2F2;
  padding: 14vh 0;
  text-align: center;
}
.gene-about__cta .gene-about__h2 {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}
.gene-about__cta .gene-about__hero-ctas {
  justify-content: center;
}

/* MOBILE */
@media screen and (max-width: 900px) {
  .gene-platform__grid,
  .gene-process,
  .gene-stats {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .gene-platform__card,
  .gene-platform__card--wide { grid-column: span 1; }
  .gene-about__hero { padding: 14vh 20px 2vh; }
  .gene-about__hero-video { border-radius: 16px; }
  .gene-about__inner { padding: 0 20px; }
  .gene-about__manifesto { padding: 10vh 0 6vh; }
  .gene-about__platform,
  .gene-about__cta { padding: 10vh 0; }
  .gene-stats { padding: 32px 0; gap: 32px; }
}

/* ============================================================
   CASE STUDY PAGES (/portfolio/<slug>/)
   ============================================================ */
.gene-case-hero {
  position: relative;
  background: #F2F2F2;
  color: #0a0a0a;
  padding: 16vh 5vw 6vh;
}
.gene-case-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.gene-case-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(10,10,10,0.6) !important;
  text-decoration: none !important;
  margin: 0 0 40px;
  transition: color 0.2s ease;
}
.gene-case-hero__back em {
  font-style: normal;
  display: inline-block;
  transition: transform 0.2s ease;
}
.gene-case-hero__back:hover { color: #0a0a0a !important; }
.gene-case-hero__back:hover em { transform: translateX(-4px); }

.gene-case-hero__eyebrow {
  display: inline-block;
  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: 0 0 24px;
}
.gene-case-hero__headline {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: #0a0a0a;
  max-width: 18ch;
}
.gene-case-hero__sub {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.7);
  max-width: 62ch;
  margin: 0 0 48px;
}
.gene-case-hero__media {
  margin: 6vh 0 0;
  padding: 0;
}
.gene-case-hero__media-frame {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0a0a;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px -30px rgba(10, 10, 10, 0.25);
}
.gene-case-hero__media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- body: constrain width + restyle WP content ----------- */
.gene-case-body {
  background: #F2F2F2;
}
.gene-case-body .page-container,
.gene-case-body > .wpb-content-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 5vw !important;
}
.gene-case-body .wpb-content-wrapper > .vc_row {
  padding: 0 !important;
  margin: 0 auto !important;
}
/* Normalise the VC-injected padding rows so vertical rhythm is consistent */
.gene-case-body .wpb-content-wrapper > .vc_row + .vc_row {
  margin-top: 6vh !important;
}
.gene-case-body .vc_column-inner {
  padding: 0 !important;
}

/* Section headings (<h5>The Insight</h5> etc.) */
.gene-case-body h5 {
  font-family: 'Geist', sans-serif !important;
  font-size: clamp(0.8rem, 0.9vw, 0.95rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(10,10,10,0.5) !important;
  margin: 0 0 24px !important;
  line-height: 1.2 !important;
}
.gene-case-body .wpb_text_column + .vc_empty_space { display: none !important; }

/* Body copy */
.gene-case-body p {
  font-family: 'Geist', sans-serif !important;
  font-size: clamp(1.1rem, 1.25vw, 1.35rem) !important;
  line-height: 1.55 !important;
  color: #0a0a0a !important;
  max-width: 72ch !important;
  margin: 0 0 1em !important;
  font-style: normal !important;
}
.gene-case-body p:last-child { margin-bottom: 0 !important; }

/* Lists */
.gene-case-body ul,
.gene-case-body ol {
  font-family: 'Geist', sans-serif !important;
  font-size: clamp(1.05rem, 1.15vw, 1.2rem) !important;
  line-height: 1.55 !important;
  color: rgba(10,10,10,0.85) !important;
  max-width: 72ch !important;
  margin: 0 0 1.2em !important;
  padding-left: 1.2em !important;
}
.gene-case-body ul li,
.gene-case-body ol li {
  margin: 0 0 0.7em !important;
  padding-left: 0.2em !important;
}
.gene-case-body ul > li::before,
.gene-case-body ol > li::before { display: none !important; content: none !important; }
.gene-case-body ul { list-style: disc outside !important; }
.gene-case-body ol { list-style: decimal outside !important; }

/* Images */
.gene-case-body .wpb_single_image { margin: 0 !important; }
.gene-case-body .vc_single_image-wrapper {
  border: none !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: transparent !important;
}
.gene-case-body .vc_single_image-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 18px !important;
}

/* Video embeds */
.gene-case-body .wpb_video_wrapper {
  position: relative;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  border-radius: 18px;
  overflow: hidden;
}
.gene-case-body .wpb_video_wrapper iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Kill the VC custom padding on rows — we own vertical rhythm now */
.gene-case-body [class*="vc_custom_"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Closing CTA */
.gene-case-cta {
  margin: 14vh auto 4vh;
  padding: 8vh 0 2vh;
  border-top: 1px solid rgba(10,10,10,0.1);
}
.gene-case-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.gene-case-cta__title {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: #0a0a0a !important;
  margin: 0 !important;
  max-width: 18ch;
}
.gene-case-cta__title em {
  font-style: normal !important;
  font-weight: 400 !important;
  color: rgba(10,10,10,0.55) !important;
}
.gene-case-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Portfolio project meta/footer navigation on single case study */
.gene-case-body + .portfolio-project-navigation,
.portfolio-project-navigation,
.portfolio-project .project-meta,
.related-posts { display: none !important; }

@media screen and (max-width: 768px) {
  .gene-case-hero { padding: 14vh 20px 4vh; }
  .gene-case-hero__media { margin-top: 5vh; }
  .gene-case-hero__media-frame { border-radius: 18px; aspect-ratio: 4 / 3; }
  .gene-case-body .page-container,
  .gene-case-body > .wpb-content-wrapper { padding: 0 20px !important; }
  .gene-case-body .wpb-content-wrapper > .vc_row + .vc_row { margin-top: 5vh !important; }
  .gene-case-body .vc_single_image-wrapper img,
  .gene-case-body .wpb_video_wrapper { border-radius: 12px !important; }
  .gene-case-cta { margin: 10vh auto 2vh; padding: 6vh 0 2vh; }
}

/* =========================================================
   Brand Intelligence — generative system additions
   ========================================================= */

/* --- Flow pipeline (Strategy → Identity → Platform → Activation → Measurement) --- */
.bi-flow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin-top: 48px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bi-flow::-webkit-scrollbar { display: none; }
.bi-flow__node {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 22px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #0a0a0a;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
  position: relative;
}
.bi-flow__node:hover { transform: translateY(-2px); background: #ffffff; border-color: rgba(10,10,10,0.18); box-shadow: 0 10px 28px rgba(10,10,10,0.06); }
.bi-flow__node[data-active="true"] { background: #0a0a0a; border-color: #0a0a0a; color: #F2F2F2; }
.bi-flow__node[data-active="true"] .bi-flow__n,
.bi-flow__node[data-active="true"] .bi-flow__tag { color: rgba(242,242,242,0.6); }
.bi-flow__node[data-active="true"] .bi-flow__t { color: #F2F2F2; }
.bi-flow__node::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(10,10,10,0.18);
}
.bi-flow__node[data-role="input"]::after { background: rgba(10,10,10,0.35); }
.bi-flow__node[data-role="core"]::after  { background: #0a0a0a; box-shadow: 0 0 0 4px rgba(10,10,10,0.08); }
.bi-flow__node[data-role="output"]::after { background: #9ef0f0; }
.bi-flow__node[data-role="loop"]::after   { background: #F2F2F2; box-shadow: 0 0 0 4px rgba(158,240,240,0.35); }
.bi-flow__node[data-active="true"]::after { background: #F2F2F2; box-shadow: none; }
.bi-flow__n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.45);
}
.bi-flow__t {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bi-flow__tag {
  font-size: 11.5px;
  color: rgba(10,10,10,0.55);
  letter-spacing: 0.01em;
}
.bi-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: rgba(10,10,10,0.25);
  flex: 0 0 auto;
}
.bi-flow__arrow svg { width: 44px; height: 12px; display: block; }
.bi-flow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 18px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.55);
  text-transform: uppercase;
}
.bi-flow__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.bi-flow__swatch { width: 10px; height: 10px; border-radius: 50%; background: rgba(10,10,10,0.2); }
.bi-flow__swatch--in    { background: rgba(10,10,10,0.35); }
.bi-flow__swatch--core  { background: #0a0a0a; }
.bi-flow__swatch--out   { background: #9ef0f0; }
.bi-flow__swatch--loop  { background: #F2F2F2; box-shadow: 0 0 0 2px rgba(158,240,240,0.3); }

/* --- Hero generator screen --- */
.bi-gen {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 18px;
  align-items: stretch;
}
.bi-gen__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bi-gen__lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(10,10,10,0.5);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.bi-gen__chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(-8px);
  animation: bi-gen-in 520ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-gen__chipK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 13px; color: #0a0a0a; letter-spacing: -0.01em; }
.bi-gen__chipV { font-size: 11px; color: rgba(10,10,10,0.55); line-height: 1.3; }
.bi-gen__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(8px);
  animation: bi-gen-out 520ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-gen__tileDot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9ef0f0;
  box-shadow: 0 0 0 3px rgba(158,240,240,0.18);
  flex: 0 0 auto;
}
.bi-gen__tileK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 13px; color: #0a0a0a; letter-spacing: -0.01em; flex: 0 0 auto; }
.bi-gen__tileV { font-size: 11px; color: rgba(10,10,10,0.5); letter-spacing: 0.01em; margin-left: auto; text-align: right; }
.bi-gen__engine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bi-gen__ring, .bi-gen__ring--2 {
  position: absolute;
  top: 50%; left: 50%;
  width: 92px; height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  border: 1px solid rgba(10,10,10,0.18);
  animation: bi-gen-spin 8s linear infinite;
}
.bi-gen__ring--2 {
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-style: dashed;
  border-color: rgba(10,10,10,0.28);
  animation-duration: 6s;
  animation-direction: reverse;
}
.bi-gen__core {
  width: 46px; height: 46px; border-radius: 50%;
  background: #0a0a0a;
  color: #F2F2F2;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}
.bi-gen__pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(10,10,10,0.12);
  animation: bi-gen-pulse 2.4s ease-out infinite;
}
@keyframes bi-gen-spin { to { transform: rotate(360deg); } }
@keyframes bi-gen-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes bi-gen-in { to { opacity: 1; transform: translateX(0); } }
@keyframes bi-gen-out { to { opacity: 1; transform: translateX(0); } }

/* --- Strategy canvas --- */
.bi-strat { display: flex; flex-direction: column; gap: 10px; }
.bi-strat__form { display: flex; flex-direction: column; gap: 10px; }
.bi-strat__row {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr 12px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(6px);
  animation: bi-gen-in 520ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-strat__k {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
}
.bi-strat__v {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: #0a0a0a;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.bi-strat__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.bi-strat__foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.55);
}

/* --- Identity kit --- */
.bi-id { display: flex; flex-direction: column; gap: 18px; }
.bi-id__type {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #0a0a0a;
  color: #F2F2F2;
  border-radius: 14px;
}
.bi-id__typeLbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.55);
}
.bi-id__typeBig {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.bi-id__typeMeta { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: rgba(242,242,242,0.5); letter-spacing: 0.04em; }
.bi-id__swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.bi-id__sw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(4px);
  animation: bi-gen-in 460ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-id__swColor { width: 100%; aspect-ratio: 1.6 / 1; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(10,10,10,0.06); }
.bi-id__swN { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 12px; color: #0a0a0a; }
.bi-id__swHex { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: rgba(10,10,10,0.5); letter-spacing: 0.04em; }
.bi-id__tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-id__tok {
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.7);
}

/* --- Activation — generation queue + deliverables grid --- */
.bi-act { display: flex; flex-direction: column; gap: 14px; }
.bi-act__queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #0a0a0a;
  color: #F2F2F2;
  border-radius: 14px;
}
.bi-act__bar {
  width: 100%;
  height: 6px;
  background: rgba(242,242,242,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.bi-act__barFill {
  display: block;
  width: 0;
  height: 100%;
  background: #F2F2F2;
  border-radius: 999px;
  animation: bi-act-fill 3.6s cubic-bezier(0.33,1,0.68,1) infinite;
}
.bi-act__q {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(242,242,242,0.75);
}
@keyframes bi-act-fill {
  0% { width: 0; }
  70% { width: 100%; }
  100% { width: 100%; }
}
.bi-act__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bi-act__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
  position: relative;
  opacity: 0;
  transform: translateY(6px);
  animation: bi-gen-in 500ms cubic-bezier(0.22,0.61,0.36,1) forwards;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.bi-act__card:hover { background: #ffffff; border-color: rgba(10,10,10,0.18); transform: translateY(-1px); }
.bi-act__card::before {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #9ef0f0;
  box-shadow: 0 0 0 3px rgba(158,240,240,0.18);
}
.bi-act__k { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: -0.01em; color: #0a0a0a; }
.bi-act__tag { font-size: 11px; color: rgba(10,10,10,0.55); line-height: 1.3; }
.bi-act__n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.04em; color: rgba(10,10,10,0.7); margin-top: 2px; }

/* --- Measurement loop line --- */
.bi-meas__loop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fafafa;
  border: 1px dashed rgba(10,10,10,0.25);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.7);
  margin-top: 4px;
  align-self: flex-start;
}

/* --- Responsive --- */
@media (max-width: 1060px) {
  .bi-flow { flex-wrap: wrap; }
  .bi-flow__node { flex: 1 0 220px; }
  .bi-gen { grid-template-columns: 1fr; gap: 14px; }
  .bi-gen__engine { height: 120px; }
  .bi-act__grid { grid-template-columns: repeat(2, 1fr); }
  .bi-id__swatches { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 720px) {
  .bi-flow { gap: 8px; padding: 16px; }
  .bi-flow__arrow { display: none; }
  .bi-flow__node { min-width: 0; flex: 1 1 100%; }
  .bi-strat__row { grid-template-columns: 1fr; gap: 6px; }
  .bi-strat__dot { display: none; }
  .bi-id__swatches { grid-template-columns: repeat(3, 1fr); }
  .bi-act__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Brand Intelligence — Enterprise app shell & rich modules
   ========================================================= */

/* Shell (inside each bi-screen) */
.bi-app {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: #ffffff;
}
.bi-app__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(10,10,10,0.06);
  background: #fafafa;
  flex-wrap: nowrap;
  overflow: hidden;
}
.bi-app__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  flex: 0 0 auto;
}
.bi-app__crumb { white-space: nowrap; }
.bi-app__crumb--active { color: #0a0a0a; }
.bi-app__sep { color: rgba(10,10,10,0.25); padding: 0 2px; }
.bi-app__tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 999px;
  flex: 0 1 auto;
  overflow: hidden;
}
.bi-app__tab {
  padding: 5px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0;
  color: rgba(10,10,10,0.55);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.bi-app__tab:hover { color: #0a0a0a; background: rgba(10,10,10,0.04); }
.bi-app__tab.is-active { background: #0a0a0a; color: #F2F2F2; }
.bi-app__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.6);
  flex: 0 0 auto;
  white-space: nowrap;
}
.bi-app__body {
  padding: 18px 16px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.bi-app__foot {
  border-top: 1px solid rgba(10,10,10,0.06);
  padding: 10px 16px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.55);
  background: #fafafa;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bi-app__lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
}
.bi-app__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.7);
  white-space: nowrap;
}
.bi-app__chip--live {
  background: #0a0a0a;
  color: #F2F2F2;
  border-color: #0a0a0a;
}
.bi-app__sectionHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bi-app__sectionHead .bi-dot { margin-left: auto; }

/* Larger stage — bigger screen on panels */
.bi-panel__screen .bi-screen { min-height: 580px; }

/* ---------- STRATEGY ---------- */
.bi-strat__body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  align-items: start;
}
.bi-strat__main { display: flex; flex-direction: column; gap: 10px; }
.bi-strat__side { display: flex; flex-direction: column; gap: 12px; }
.bi-strat__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bi-strat__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
}
.bi-strat__statK { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10,10,10,0.55); }
.bi-strat__statV { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: #0a0a0a; }
.bi-strat__statD { font-size: 10.5px; color: rgba(10,10,10,0.5); }
.bi-strat__map {
  padding: 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
}
.bi-strat__mapHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10,10,10,0.6); }
.bi-strat__quad {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px dashed rgba(10,10,10,0.15);
  border-radius: 8px;
  background:
    linear-gradient(to right, rgba(10,10,10,0.06), rgba(10,10,10,0.06)) no-repeat center/1px 100%,
    linear-gradient(to bottom, rgba(10,10,10,0.06), rgba(10,10,10,0.06)) no-repeat center/100% 1px,
    #ffffff;
}
.bi-strat__ax {
  position: absolute;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.45);
}
.bi-strat__ax--y { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.bi-strat__ax--x { left: 50%; bottom: 6px; transform: translateX(-50%); }
.bi-strat__pt {
  position: absolute;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10,10,10,0.1);
  border: 1px solid rgba(10,10,10,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  color: rgba(10,10,10,0.65);
}
.bi-strat__pt--us {
  background: #0a0a0a;
  color: #F2F2F2;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 4px rgba(10,10,10,0.08);
}

/* ---------- IDENTITY ---------- */
.bi-id__body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  align-items: start;
}
.bi-id__left, .bi-id__right { display: flex; flex-direction: column; gap: 14px; }
.bi-id__block { display: flex; flex-direction: column; gap: 8px; }
.bi-id__lockup {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
}
.bi-id__logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: #0a0a0a;
  color: #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bi-id__logo svg { width: 36px; height: 36px; }
.bi-id__lockMeta { display: flex; flex-direction: column; gap: 2px; }
.bi-id__lockK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 14px; color: #0a0a0a; letter-spacing: -0.01em; }
.bi-id__lockD { font-size: 11px; color: rgba(10,10,10,0.55); }
.bi-id__swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.bi-id__sw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(4px);
  animation: bi-gen-in 460ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-id__swColor {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,0.06);
}
.bi-id__swMeta { display: flex; flex-direction: column; gap: 2px; }
.bi-id__swUse { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.04em; color: rgba(10,10,10,0.5); }
.bi-id__scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
}
.bi-id__scaleRow {
  display: grid;
  grid-template-columns: 70px 56px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(10,10,10,0.06);
}
.bi-id__scaleRow:last-child { border-bottom: 0; }
.bi-id__scaleLbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10,10,10,0.55); }
.bi-id__scaleSz { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: rgba(10,10,10,0.45); }
.bi-id__scaleSample { font-family: 'Geist', sans-serif; font-weight: 400; color: #0a0a0a; letter-spacing: -0.02em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-id__scaleSample--display { font-size: 28px; }
.bi-id__scaleSample--h1      { font-size: 22px; }
.bi-id__scaleSample--h2      { font-size: 16px; }
.bi-id__scaleSample--body    { font-size: 13px; font-weight: 400; }
.bi-id__voices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bi-id__voice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
}
.bi-id__voiceK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 13px; color: #0a0a0a; letter-spacing: -0.01em; }
.bi-id__voiceD { font-size: 11px; color: rgba(10,10,10,0.55); }

/* ---------- PLATFORM (personas + journeys + matrix) ---------- */
.bi-plat__body { display: flex; flex-direction: column; gap: 18px; }
.bi-plat__section { display: flex; flex-direction: column; gap: 6px; }
.bi-plat__personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bi-plat__persona {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(6px);
  animation: bi-gen-in 520ms cubic-bezier(0.22,0.61,0.36,1) forwards;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.bi-plat__persona:hover { background: #ffffff; border-color: rgba(10,10,10,0.16); transform: translateY(-1px); }
.bi-plat__pHead { display: flex; align-items: center; gap: 10px; }
.bi-plat__pAvatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #0a0a0a; color: #F2F2F2;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.bi-plat__pId { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bi-plat__pName { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 14px; color: #0a0a0a; letter-spacing: -0.01em; }
.bi-plat__pRole { font-size: 10.5px; color: rgba(10,10,10,0.55); }
.bi-plat__pChips { display: flex; flex-wrap: wrap; gap: 4px; }
.bi-plat__pField { display: flex; flex-direction: column; gap: 4px; }
.bi-plat__pField p { margin: 0; font-size: 12px; color: #0a0a0a; line-height: 1.4; }
.bi-plat__pQuote { color: rgba(10,10,10,0.65) !important; font-size: 11.5px !important; line-height: 1.5 !important; border-left: 2px solid rgba(10,10,10,0.18); padding-left: 8px; }
.bi-plat__journeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bi-plat__journey {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
  position: relative;
  opacity: 0;
  transform: translateY(4px);
  animation: bi-gen-in 460ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-plat__journey:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  width: 10px;
  height: 1px;
  background: rgba(10,10,10,0.2);
}
.bi-plat__jN { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.08em; color: rgba(10,10,10,0.4); }
.bi-plat__jK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 13px; color: #0a0a0a; letter-spacing: -0.01em; }
.bi-plat__jD { font-size: 11px; color: rgba(10,10,10,0.55); line-height: 1.35; }

/* ---------- ACTIVATION (pipeline + ad units + log) ---------- */
.bi-act__body { display: flex; flex-direction: column; gap: 16px; }
.bi-act__pipeline {
  padding: 14px 16px;
  background: #0a0a0a;
  color: #F2F2F2;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bi-act__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bi-act__step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(242,242,242,0.06);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(242,242,242,0.55);
}
.bi-act__stepN {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(242,242,242,0.12);
  color: rgba(242,242,242,0.7);
  font-size: 9px;
}
.bi-act__step.is-done { background: rgba(242,242,242,0.14); color: rgba(242,242,242,0.9); }
.bi-act__step.is-done .bi-act__stepN { background: #F2F2F2; color: #0a0a0a; }
.bi-act__step.is-active { background: #F2F2F2; color: #0a0a0a; }
.bi-act__step.is-active .bi-act__stepN { background: #0a0a0a; color: #F2F2F2; }
.bi-act__section { display: flex; flex-direction: column; gap: 6px; }
.bi-act__adsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bi-act__adCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(6px);
  animation: bi-gen-in 520ms cubic-bezier(0.22,0.61,0.36,1) forwards;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.bi-act__adCard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,10,10,0.08); }
.bi-act__adMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bi-act__adType { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; color: rgba(10,10,10,0.6); text-transform: uppercase; }

/* Sample ad unit mocks */
.bi-ad {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.08);
}
.bi-ad--ctv {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 60%, #2a2a2a 100%);
  color: #F2F2F2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.bi-ad__ctvBg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(158,240,240,0.35), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(158,240,240,0.22), transparent 50%);
  pointer-events: none;
}
.bi-ad__ctvLogo { position: relative; font-family: 'Geist', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: -0.01em; }
.bi-ad__ctvHead { position: relative; font-family: 'Geist', sans-serif; font-weight: 400; font-size: 22px; line-height: 0.98; letter-spacing: -0.03em; }
.bi-ad__ctvCta {
  position: relative;
  align-self: flex-start;
  padding: 5px 10px;
  background: #F2F2F2;
  color: #0a0a0a;
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 400;
}
.bi-ad--social {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.bi-ad__socHead { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(10,10,10,0.06); }
.bi-ad__socAv { width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a; flex: 0 0 auto; }
.bi-ad__socHead > div { display: flex; flex-direction: column; min-width: 0; }
.bi-ad__socN { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 11.5px; color: #0a0a0a; }
.bi-ad__socM { font-size: 9.5px; color: rgba(10,10,10,0.5); }
.bi-ad__socBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(180deg, #F2F2F2 0%, #F2F2F2 100%);
}
.bi-ad__socK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: -0.02em; color: #0a0a0a; line-height: 1.05; }
.bi-ad__socP { font-size: 11px; color: rgba(10,10,10,0.65); line-height: 1.4; }
.bi-ad__socCta { margin-top: 4px; font-family: 'Geist', sans-serif; font-weight: 400; font-size: 11.5px; color: #9ef0f0; }
.bi-ad--display {
  aspect-ratio: 300 / 250;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background: #F2F2F2;
}
.bi-ad__dispLogo { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 11px; color: #0a0a0a; }
.bi-ad__dispHead { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: -0.02em; color: #0a0a0a; line-height: 1; }
.bi-ad__dispCta { align-self: flex-start; padding: 4px 10px; background: #0a0a0a; color: #F2F2F2; border-radius: 999px; font-family: 'Geist', sans-serif; font-size: 10px; font-weight: 400; }
.bi-ad--email {
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 10px;
  gap: 6px;
}
.bi-ad__emailBar { display: flex; gap: 4px; }
.bi-ad__emailBar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(10,10,10,0.12); }
.bi-ad__emailBar span:first-child { background: rgba(158,240,240,0.6); }
.bi-ad__emailHead { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: -0.01em; color: #0a0a0a; margin-top: 6px; }
.bi-ad__emailSub { font-size: 10.5px; color: rgba(10,10,10,0.55); }
.bi-ad__emailCta { margin-top: auto; align-self: flex-start; padding: 4px 10px; background: #0a0a0a; color: #F2F2F2; border-radius: 999px; font-size: 10px; font-family: 'Geist', sans-serif; font-weight: 400; }
.bi-ad--ooh {
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
  color: #F2F2F2;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bi-ad__oohBig { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: -0.03em; line-height: 0.95; }
.bi-ad__oohSmall { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(242,242,242,0.55); }
.bi-ad--site {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  background: #F2F2F2;
}
.bi-ad__siteNav {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  color: rgba(10,10,10,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bi-ad__siteNav span:first-child { color: #0a0a0a; margin-right: auto; font-weight: 400; }
.bi-ad__siteHero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px;
}
.bi-ad__siteHead { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: -0.03em; color: #0a0a0a; line-height: 0.98; }
.bi-ad__siteCta { align-self: flex-start; padding: 4px 10px; background: #9ef0f0; color: #F2F2F2; border-radius: 999px; font-family: 'Geist', sans-serif; font-size: 10px; font-weight: 400; }

/* Split below ads: summary + live log */
.bi-act__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
}
.bi-act__sums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bi-act__sum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
}
.bi-act__sumK { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10,10,10,0.55); }
.bi-act__sumN { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: -0.02em; color: #0a0a0a; }
.bi-act__sumD { font-size: 10.5px; color: rgba(10,10,10,0.5); }
.bi-act__logs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #0a0a0a;
  color: #F2F2F2;
  border-radius: 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  max-height: 160px;
  overflow: hidden;
  position: relative;
}
.bi-act__logs::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,1));
  pointer-events: none;
}
.bi-act__log {
  display: flex;
  gap: 10px;
  align-items: baseline;
  opacity: 0;
  animation: bi-gen-in 400ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.bi-act__logT { color: rgba(242,242,242,0.4); flex: 0 0 auto; }
.bi-act__logM { color: rgba(242,242,242,0.9); }

/* ---------- MEASUREMENT ---------- */
.bi-perf__body { display: flex; flex-direction: column; gap: 14px; }
.bi-perf__tile { position: relative; }
.bi-perf__trend {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: #0a0a0a;
  background: rgba(10,10,10,0.06);
  border-radius: 999px;
  padding: 2px 8px;
  align-self: flex-start;
}
.bi-perf__split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
}
.bi-meas__channels {
  padding: 14px;
  background: #fafafa;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bi-meas__ch {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  gap: 10px;
}
.bi-meas__chK { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.04em; color: rgba(10,10,10,0.65); text-transform: uppercase; }
.bi-meas__chBar {
  height: 8px;
  background: rgba(10,10,10,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bi-meas__chBar span {
  display: block;
  height: 100%;
  background: #0a0a0a;
  border-radius: 999px;
  transform-origin: left;
  animation: bi-meas-grow 1200ms cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes bi-meas-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.bi-meas__chR { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 12px; color: #0a0a0a; text-align: right; }

/* ---------- Responsive tweaks for enterprise content ---------- */
@media (max-width: 1280px) {
  .bi-plat__personas { grid-template-columns: 1fr; }
  .bi-plat__journeys { grid-template-columns: repeat(2, 1fr); }
  .bi-plat__journey:not(:last-child)::after { display: none; }
  .bi-strat__body { grid-template-columns: 1fr; }
  .bi-id__body { grid-template-columns: 1fr; }
  .bi-id__swatches { grid-template-columns: repeat(5, 1fr); }
  .bi-act__adsGrid { grid-template-columns: repeat(2, 1fr); }
  .bi-act__split { grid-template-columns: 1fr; }
  .bi-perf__split { grid-template-columns: 1fr; }
}
@media (max-width: 1060px) {
  .bi-showcase__stage { min-height: 820px; }
  .bi-app__tabs { display: none; }
  .bi-strat__stats { grid-template-columns: repeat(3, 1fr); }
  .bi-id__voices { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bi-showcase__stage { min-height: 0; }
  .bi-app__bar { flex-wrap: wrap; gap: 8px; }
  .bi-app__status { order: -1; }
  .bi-act__adsGrid { grid-template-columns: 1fr; }
  .bi-act__sums { grid-template-columns: repeat(2, 1fr); }
  .bi-id__swatches { grid-template-columns: repeat(3, 1fr); }
  .bi-strat__stats { grid-template-columns: 1fr; }
  .bi-plat__journeys { grid-template-columns: 1fr; }
}

/* =========================================================
   Global: no italics anywhere on the page
   ========================================================= */
*, *::before, *::after {
  font-style: normal !important;
  font-synthesis: none !important;
  -webkit-font-synthesis: none !important;
}
em, i, cite, dfn, var, address, blockquote, q,
.bi-plat__pQuote {
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: 400 !important;
}
/* Merriweather is only loaded as italic — restore italic on all elements that use it */
.gene-page-hero__headline em,
.gene-about__h1 em,
.gene-about__h2 em,
.gene-about__manifesto-text em,
.gw-case__cta h2 em,
.gw-featured__title em,
.gene-page--home .gene-hero__headline em,
.gw-case__title em,
.gw-post__title em,
.gw-case__body h5::before,
.gw-case__body ol > li::before,
.gw-case__body blockquote em,
.gw-post__body blockquote em {
  font-style: italic !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  -webkit-font-synthesis: none !important;
}

/* =========================================================
   Brand Intelligence — Generator reel (Adobe-style preview)
   ========================================================= */
.bi-reel {
  padding: 10vh 48px;
  background: #0a0a0a;
  color: #F2F2F2;
  position: relative;
  overflow: hidden;
}
.bi-reel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(158,240,240,0.18), transparent 60%),
    radial-gradient(1000px 600px at 85% 100%, rgba(158,240,240,0.14), transparent 60%);
  pointer-events: none;
}
.bi-reel__inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bi-reel__head { max-width: 760px; margin-bottom: 40px; }
.bi-reel__head .bi-eyebrow { color: rgba(242,242,242,0.6); }
.bi-reel__h {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #F2F2F2;
  margin: 14px 0 14px;
}
.bi-reel__sub {
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: rgba(242,242,242,0.68);
  max-width: 64ch;
  margin: 0;
}
.bi-reel__player {
  border: 1px solid rgba(242,242,242,0.1);
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}
.bi-reel__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(242,242,242,0.06);
}
.bi-reel__chromeDots { display: inline-flex; gap: 6px; }
.bi-reel__chromeDots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(242,242,242,0.25);
}
.bi-reel__chromeDots span:first-child { background: #ff5f57; }
.bi-reel__chromeDots span:nth-child(2) { background: #febc2e; }
.bi-reel__chromeDots span:nth-child(3) { background: #28c840; }
.bi-reel__chromeTitle {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(242,242,242,0.6);
  margin: 0 auto;
}
.bi-reel__chromeMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F2F2F2;
}
.bi-reel__rec {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9ef0f0;
  box-shadow: 0 0 0 0 rgba(158,240,240,0.7);
  animation: bi-reel-rec 1.4s ease-in-out infinite;
}
@keyframes bi-reel-rec {
  0%,100% { box-shadow: 0 0 0 0 rgba(158,240,240,0.7); }
  50% { box-shadow: 0 0 0 6px rgba(158,240,240,0); }
}
.bi-reel__stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 520px;
  position: relative;
}
.bi-reel__side {
  padding: 22px 20px;
  background: #141414;
  border-right: 1px solid rgba(242,242,242,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bi-reel__sideHead {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.5);
}
.bi-reel__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(242,242,242,0.08);
}
.bi-reel__field span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.45);
}
.bi-reel__field b {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #F2F2F2;
  letter-spacing: -0.01em;
}
.bi-reel__prompt {
  padding: 12px;
  border: 1px solid rgba(242,242,242,0.1);
  border-radius: 10px;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bi-reel__promptLbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.45);
}
.bi-reel__promptBody {
  min-height: 58px;
  font-family: 'Geist', sans-serif;
  font-size: 12.5px;
  color: #F2F2F2;
  line-height: 1.4;
  position: relative;
}
.bi-reel__typing::after {
  content: 'Compose integrated Q3 launch · HCP+Patient+Payer · CTV, Social, Display, Email, OOH, Site · confident, human tone';
  display: inline-block;
  border-right: 1.5px solid #9ef0f0;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  animation: bi-reel-type 8s steps(120, end) infinite, bi-reel-caret 0.9s step-end infinite;
}
@keyframes bi-reel-type {
  0% { width: 0; white-space: nowrap; }
  40% { width: 100%; white-space: normal; }
  70% { width: 100%; white-space: normal; }
  100% { width: 100%; white-space: normal; }
}
@keyframes bi-reel-caret {
  50% { border-color: transparent; }
}
.bi-reel__gen {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #9ef0f0;
  color: #F2F2F2;
  border: 0;
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
}
.bi-reel__genDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F2F2F2;
  animation: bi-reel-rec 1s ease-in-out infinite;
}
.bi-reel__pct {
  font-style: normal !important;
}
.bi-reel__canvas {
  position: relative;
  padding: 22px;
  background:
    linear-gradient(180deg, #111 0%, #0c0c0c 100%);
  overflow: hidden;
}
.bi-reel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.bi-reel__asset {
  position: relative;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(242,242,242,0.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: bi-reel-pop 12s cubic-bezier(0.22,0.61,0.36,1) infinite;
}
.bi-reel__asset--1 { animation-delay: 0.2s; }
.bi-reel__asset--2 { animation-delay: 0.9s; }
.bi-reel__asset--3 { animation-delay: 1.6s; }
.bi-reel__asset--4 { animation-delay: 2.3s; }
.bi-reel__asset--5 { animation-delay: 3.0s; }
.bi-reel__asset--6 { animation-delay: 3.7s; }
@keyframes bi-reel-pop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  8%   { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateY(0) scale(1); }
  95%  { opacity: 0.4; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
.bi-reel__assetHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(242,242,242,0.04);
  border-bottom: 1px solid rgba(242,242,242,0.06);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bi-reel__assetHead span { color: rgba(242,242,242,0.65); }
.bi-reel__assetHead em { color: rgba(242,242,242,0.4); font-style: normal !important; }
.bi-reel__assetBody {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  aspect-ratio: 16 / 10;
  position: relative;
}
.bi-reel__assetBody--ctv {
  background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  color: #F2F2F2;
}
.bi-reel__assetBody--ctv::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(158,240,240,0.35), transparent 55%);
}
.bi-reel__assetLogo { position: relative; font-family: 'Geist', sans-serif; font-weight: 400; font-size: 11px; }
.bi-reel__assetHead2 { position: relative; font-family: 'Geist', sans-serif; font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: -0.02em; }
.bi-reel__assetCta { position: relative; align-self: flex-start; padding: 3px 8px; background: #F2F2F2; color: #0a0a0a; border-radius: 999px; font-size: 9px; font-family: 'Geist', sans-serif; font-weight: 400; }
.bi-reel__assetBody--social {
  background: #F2F2F2;
  color: #0a0a0a;
  aspect-ratio: 1 / 1;
}
.bi-reel__socN { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; color: rgba(10,10,10,0.55); letter-spacing: 0.04em; }
.bi-reel__socK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: -0.02em; line-height: 1.05; color: #0a0a0a; }
.bi-reel__socP { font-size: 10px; color: rgba(10,10,10,0.6); line-height: 1.35; }
.bi-reel__assetBody--disp {
  background: #9ef0f0;
  color: #F2F2F2;
  aspect-ratio: 300 / 250;
}
.bi-reel__dispLogo { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 10px; }
.bi-reel__dispHead { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: -0.02em; }
.bi-reel__dispCta { align-self: flex-start; padding: 3px 8px; background: #0a0a0a; color: #F2F2F2; border-radius: 999px; font-size: 9px; font-family: 'Geist', sans-serif; font-weight: 400; }
.bi-reel__assetBody--ooh {
  background: #F2F2F2;
  color: #0a0a0a;
  aspect-ratio: 4 / 3;
}
.bi-reel__oohBig { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 34px; line-height: 0.9; letter-spacing: -0.04em; }
.bi-reel__oohSmall { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10,10,10,0.55); }
.bi-reel__assetBody--email {
  background: #fff;
  color: #0a0a0a;
  aspect-ratio: 3 / 2;
}
.bi-reel__emailK { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: -0.01em; color: #0a0a0a; line-height: 1.2; }
.bi-reel__emailCta { align-self: flex-start; padding: 3px 8px; background: #0a0a0a; color: #F2F2F2; border-radius: 999px; font-size: 9px; font-family: 'Geist', sans-serif; font-weight: 400; }
.bi-reel__assetBody--site {
  background: #F2F2F2;
  color: #0a0a0a;
  aspect-ratio: 16 / 9;
  padding: 0;
}
.bi-reel__siteNav {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(10,10,10,0.08);
}
.bi-reel__siteNav em {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  font-style: normal !important;
}
.bi-reel__siteNav em:first-child { color: #0a0a0a; font-weight: 400; margin-right: auto; }
.bi-reel__siteHead {
  padding: 14px 10px 4px;
  font-family: 'Geist', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: -0.03em; line-height: 0.98;
}
.bi-reel__siteCta {
  margin: 6px 10px 14px; align-self: flex-start;
  padding: 4px 10px; background: #9ef0f0; color: #F2F2F2;
  border-radius: 999px; font-family: 'Geist', sans-serif; font-size: 10px; font-weight: 400;
}

/* Overlay callouts that fade in on top of the canvas */
.bi-reel__overlay {
  position: absolute;
  left: 22px; bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
  max-width: 360px;
}
.bi-reel__overlayRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(242,242,242,0.08);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  animation: bi-reel-overlay 12s ease-in-out infinite;
}
.bi-reel__overlay .bi-reel__overlayRow:nth-child(1) { animation-delay: 1.0s; }
.bi-reel__overlay .bi-reel__overlayRow:nth-child(2) { animation-delay: 3.0s; }
.bi-reel__overlay .bi-reel__overlayRow:nth-child(3) { animation-delay: 5.0s; }
.bi-reel__overlay .bi-reel__overlayRow:nth-child(4) { animation-delay: 7.0s; }
@keyframes bi-reel-overlay {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(0); }
  28%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.bi-reel__tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #F2F2F2;
  padding: 2px 8px;
  border-radius: 999px;
}
.bi-reel__overlayTxt {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  color: #F2F2F2;
}

/* Scanline overlay — subtle, adobe-style */
.bi-reel__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(242,242,242,0.015) 0,
    rgba(242,242,242,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  z-index: 3;
}

/* Transport / timeline */
.bi-reel__timeline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #1a1a1a;
  border-top: 1px solid rgba(242,242,242,0.06);
}
.bi-reel__play {
  width: 28px; height: 28px; border-radius: 50%;
  background: #F2F2F2;
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding-left: 2px;
}
.bi-reel__time {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(242,242,242,0.6);
  min-width: 40px;
}
.bi-reel__time--r { text-align: right; }
.bi-reel__bar {
  flex: 1;
  position: relative;
  height: 4px;
  background: rgba(242,242,242,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.bi-reel__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: #9ef0f0;
  border-radius: 999px;
  animation: bi-reel-fill 12s linear infinite;
}
.bi-reel__scrub {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: #F2F2F2;
  box-shadow: 0 0 0 3px rgba(158,240,240,0.3);
  transform: translate(-50%, -50%);
  animation: bi-reel-scrub 12s linear infinite;
}
@keyframes bi-reel-fill {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes bi-reel-scrub {
  0% { left: 0%; }
  100% { left: 100%; }
}
.bi-reel__badges { display: inline-flex; gap: 6px; }
.bi-reel__badge {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,242,242,0.6);
  padding: 3px 8px;
  border: 1px solid rgba(242,242,242,0.12);
  border-radius: 999px;
}

@media (max-width: 1060px) {
  .bi-reel__stage { grid-template-columns: 1fr; }
  .bi-reel__side { order: 2; border-right: 0; border-top: 1px solid rgba(242,242,242,0.06); }
  .bi-reel__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .bi-reel { padding: 8vh 20px; }
  .bi-reel__grid { grid-template-columns: 1fr; }
  .bi-reel__overlay { left: 14px; bottom: 14px; max-width: 80%; }
  .bi-reel__chromeTitle { display: none; }
}

/* =========================================================
   GLOBAL HOVER OVERRIDES
   - Kill Ohio theme red (#ff4f00 / #ff4501) hovers on buttons & links
   - Keep card zoom effects on blog/portfolio cards but do not change
     their background or add color tints on hover
   ========================================================= */

/* Buttons: neutralize Ohio red rollovers. Keep tone ink/cream/signal only. */
.button:hover,
a.button:hover,
.btn:hover,
.btn.button:hover,
.btn.-primary:hover,
.btn.-primary.button:hover,
.btn.btn-brand:hover,
.btn.btn-brand.button:hover,
.menu-blank.button:hover,
.lazy-load.-outlined .btn.btn-brand.button:hover,
.icon-button:hover {
  background-color: #0a0a0a !important;
  color: #F2F2F2 !important;
  border-color: #0a0a0a !important;
}
.button:hover *,
a.button:hover *,
.btn:hover *,
.btn.button:hover *,
.btn.-primary:hover *,
.btn.btn-brand:hover * {
  color: #F2F2F2 !important;
  fill: #F2F2F2 !important;
}

/* Text-link hovers: kill red, fall back to ink */
a:hover,
.menu-item a:hover,
.portfolio-item a:hover,
.blog-item a:hover {
  color: inherit;
}
a:hover {
  color: #0a0a0a;
}

/* Blog + work cards: zoom only, no background shift, no color tint, no shadow, no cover overlay */
.blog-item.card:hover,
.blog-item:hover,
.blog-item.-img-scale:hover,
.post-item:hover,
.portfolio-item:hover,
.portfolio-item.-img-scale:hover,
.portfolio-item > a:hover,
.portfolio-item .portfolio-item-body:hover,
.work-item:hover,
.work-item > a:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Kill Ohio theme's .show-project-link hover cover overlay on portfolio cards */
.portfolio-item .show-project-link,
.portfolio-item .show-project-link::before,
.portfolio-item .show-project-link::after,
.portfolio-item:hover .show-project-link,
.portfolio-item:hover .show-project-link::before,
.portfolio-item:hover .show-project-link::after,
.portfolio-item .show-project,
.portfolio-item:hover .show-project {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Keep the image cover clean, no tint or darkening on hover */
.portfolio-item .image-holder::before,
.portfolio-item .image-holder::after,
.portfolio-item:hover .image-holder::before,
.portfolio-item:hover .image-holder::after,
.blog-item .image-holder::before,
.blog-item .image-holder::after,
.blog-item:hover .image-holder::before,
.blog-item:hover .image-holder::after {
  background: transparent !important;
  opacity: 0 !important;
  content: none !important;
}
.blog-item:hover .blog-item-title,
.blog-item:hover h2,
.blog-item:hover h3,
.blog-item:hover a,
.portfolio-item:hover .portfolio-item-title,
.portfolio-item:hover h2,
.portfolio-item:hover h3,
.portfolio-item:hover a {
  color: #0a0a0a !important;
}

/* =========================================================
   BRAND INTELLIGENCE · HEALTH FLUENCY SECTION
   Emphasizes health audience + regulatory + MLR expertise.
   ========================================================= */
.bi-health {
  background: #0a0a0a;
  color: #F2F2F2;
  padding: 14vh 6vw;
  position: relative;
}
.bi-health::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(158,240,240, 0.08), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(236, 230, 219, 0.06), transparent 60%);
  pointer-events: none;
}
.bi-health__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}
.bi-health__head {
  max-width: 820px;
  margin-bottom: 64px;
}
.bi-health .bi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(242, 242, 242, 0.22);
  background: rgba(242, 242, 242, 0.06);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F2F2F2;
  margin-bottom: 20px;
}
.bi-health__h {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #F2F2F2;
  margin: 0 0 20px;
  font-weight: 400;
}
.bi-health__sub {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(242, 242, 242, 0.72);
  max-width: 720px;
  margin: 0;
}
.bi-health__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bi-health__card {
  background: #F5F0E6;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.bi-health__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2843D6 0%, rgba(40, 67, 214, 0) 60%);
  opacity: 0.8;
}
.bi-health__card:hover {
  border-color: rgba(10, 10, 10, 0.18);
  background: #FFFFFF;
  transform: translateY(-2px);
}
.bi-health__n {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(10, 10, 10, 0.55);
  letter-spacing: 0.12em;
}
.bi-health__card h3 {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin: 0;
  font-weight: 500;
}
.bi-health__card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.78);
  margin: 0 0 8px;
}
.bi-health__chips {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bi-health__chips li {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid rgba(10, 10, 10, 0.18);
  border-radius: 999px;
  color: #0a0a0a;
  background: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1040px) {
  .bi-health__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bi-health { padding: 10vh 20px; }
  .bi-health__grid { grid-template-columns: 1fr; }
  .bi-health__head { margin-bottom: 40px; }
}

/* =========================================================
   ORGANIC / BIOLOGICAL LAYER
   Morphing SVG blobs, gooey filters, cursor-reactive glows,
   living gradients. Runs across BI hero, health, and partners.
   ========================================================= */

/* --- BI hero organic backdrop (morphing SVG inside stage) --- */
.bi-hero__stage {
  position: relative;
  max-width: 1200px;
  margin: 6vh auto 0;
  padding: 0 var(--gene-container-gutter, 24px);
  overflow: visible;
}
.bi-organic {
  position: absolute;
  inset: -8% -12% -6% -10%;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  filter: blur(0.5px);
  animation: bi-organic-drift 26s ease-in-out infinite alternate;
}
.bi-hero__stage > .bi-window { position: relative; z-index: 1; }
@keyframes bi-organic-drift {
  0%   { transform: translate3d(-2%,  0%, 0) rotate(-2deg) scale(1); }
  50%  { transform: translate3d( 3%, -3%, 0) rotate( 2deg) scale(1.04); }
  100% { transform: translate3d(-1%,  2%, 0) rotate(-1deg) scale(0.98); }
}

/* --- Health section biological ambience --- */
.bi-health { overflow: hidden; }
.bi-health__organics {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px) saturate(1.1);
  opacity: 0.7;
}
.bi-health__inner { position: relative; z-index: 1; }
.bi-health__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, border-radius;
}
.bi-health__blob--a {
  width: 46vw; height: 46vw;
  top: -10vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, rgba(158,240,240, 0.55), rgba(158,240,240, 0) 65%);
  animation: bio-morph-a 18s ease-in-out infinite alternate, bio-drift-a 34s ease-in-out infinite alternate;
}
.bi-health__blob--b {
  width: 38vw; height: 38vw;
  bottom: -10vw; right: -6vw;
  background: radial-gradient(circle at 60% 40%, rgba(236, 230, 219, 0.45), rgba(236, 230, 219, 0) 65%);
  animation: bio-morph-b 22s ease-in-out infinite alternate, bio-drift-b 40s ease-in-out infinite alternate;
}
.bi-health__blob--c {
  width: 30vw; height: 30vw;
  top: 40%; left: 48%;
  background: radial-gradient(circle at 50% 50%, rgba(158, 240, 240, 0.22), rgba(158, 240, 240, 0) 65%);
  animation: bio-morph-c 26s ease-in-out infinite alternate, bio-drift-c 46s ease-in-out infinite alternate;
}
@keyframes bio-morph-a {
  0%   { border-radius: 58% 42% 63% 37% / 42% 58% 42% 58%; }
  33%  { border-radius: 44% 56% 36% 64% / 62% 38% 62% 38%; }
  66%  { border-radius: 38% 62% 52% 48% / 48% 52% 36% 64%; }
  100% { border-radius: 62% 38% 44% 56% / 56% 44% 58% 42%; }
}
@keyframes bio-morph-b {
  0%   { border-radius: 36% 64% 48% 52% / 52% 38% 62% 48%; }
  50%  { border-radius: 58% 42% 62% 38% / 36% 58% 42% 64%; }
  100% { border-radius: 46% 54% 38% 62% / 58% 44% 56% 42%; }
}
@keyframes bio-morph-c {
  0%   { border-radius: 48% 52% 42% 58% / 56% 48% 52% 44%; }
  50%  { border-radius: 62% 38% 56% 44% / 42% 62% 38% 58%; }
  100% { border-radius: 38% 62% 48% 52% / 52% 38% 62% 48%; }
}
@keyframes bio-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vw, 4vw, 0) scale(1.08); }
}
@keyframes bio-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-5vw, -3vw, 0) scale(1.06); }
}
@keyframes bio-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-8vw, 6vw, 0) scale(0.92); }
}

/* --- Cursor-reactive bio glow on health cards --- */
.bi-health__card {
  --mx: 50%;
  --my: 50%;
  isolation: isolate;
}
.bi-health__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my),
    rgba(40, 67, 214, 0.10) 0%,
    rgba(40, 67, 214, 0.04) 35%,
    rgba(0, 0, 0, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.bi-health__card:hover::after { opacity: 1; }
.bi-health__card > * { position: relative; z-index: 1; }
.bi-health__card:hover {
  animation: bio-breathe 4s ease-in-out infinite;
}
@keyframes bio-breathe {
  0%, 100% { transform: translateY(-2px) scale(1); }
  50%      { transform: translateY(-4px) scale(1.008); }
}

/* --- Partners: clean, sharp logo grid --- */
.bd-tech__grid--trio {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-width: 1280px;
  margin: 0 auto !important;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}
.bd-tech__grid--trio .bd-tech__card {
  aspect-ratio: auto !important;
  min-height: 168px;
  padding: 26px 20px 22px !important;
  border: 0 !important;
  border-right: 1px solid rgba(10,10,10,0.08) !important;
  border-bottom: 1px solid rgba(10,10,10,0.08) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: background 0.25s ease, color 0.25s ease;
  color: #0a0a0a !important;
}
.bd-tech__grid--trio .bd-tech__card:hover {
  background: #0a0a0a !important;
  color: #F2F2F2 !important;
  transform: none !important;
}
.bd-tech__grid--trio .bd-tech__card:nth-child(5n) { border-right: 0 !important; }
.bd-tech__grid--trio .bd-tech__card:nth-last-child(-n+5) { border-bottom: 0 !important; }
.bd-tech__grid--trio .bd-tech__mark {
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  color: inherit !important;
  opacity: 1 !important;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bd-tech__grid--trio .bd-tech__card:hover .bd-tech__mark {
  transform: translateY(-1px) scale(1.05);
  opacity: 1 !important;
}
.bd-tech__grid--trio .bd-tech__mark img.bd-tech__logo,
.bd-tech__grid--trio .bd-tech__logo {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: center !important;
}
.bd-tech__grid--trio .bd-tech__name {
  display: block !important;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: inherit;
  text-align: center;
  opacity: 0.82;
}
.bd-tech__grid--trio .bd-tech__card:hover .bd-tech__name { opacity: 1; }
.bd-tech__grid--trio .bd-tech__word {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

@media (max-width: 1024px) {
  .bd-tech__grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .bd-tech__grid--trio .bd-tech__card:nth-child(5n) { border-right: 1px solid rgba(10,10,10,0.08) !important; }
  .bd-tech__grid--trio .bd-tech__card:nth-last-child(-n+5) { border-bottom: 1px solid rgba(10,10,10,0.08) !important; }
  .bd-tech__grid--trio .bd-tech__card:nth-child(3n) { border-right: 0 !important; }
  .bd-tech__grid--trio .bd-tech__card:nth-last-child(-n+3):nth-child(3n+1),
  .bd-tech__grid--trio .bd-tech__card:nth-last-child(-n+3):nth-child(3n+1) ~ .bd-tech__card { border-bottom: 0 !important; }
}
@media (max-width: 560px) {
  .bd-tech__grid--trio { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bd-tech__grid--trio .bd-tech__card { min-height: 110px; padding: 20px 16px !important; border-right: 1px solid rgba(10,10,10,0.08) !important; border-bottom: 1px solid rgba(10,10,10,0.08) !important; }
  .bd-tech__grid--trio .bd-tech__card:nth-child(2n) { border-right: 0 !important; }
  .bd-tech__grid--trio .bd-tech__mark { height: 32px; max-width: 140px; }
}

/* --- Reduced motion: honor user preference --- */
@media (prefers-reduced-motion: reduce) {
  .bi-organic,
  .bi-health__blob,
  .bi-health__card:hover,
  .bd-tech__grid--trio .bd-tech__card,
  .bi-organic animate,
  .bi-organic animateMotion { animation: none !important; }
}

/* ============================================================
   GW AWARDS — clean industry recognition band
   ============================================================ */
.gw-awards {
  display: block;
  width: 100%;
  padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 120px);
  background: #F2F2F2;
  color: #0a0a0a;
}
.gw-awards__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.gw-awards__head {
  max-width: 780px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  text-align: center;
}
.gw-awards__eyebrow {
  display: inline-block;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0a0a0a !important;
  opacity: 0.6;
  margin-bottom: 18px;
}
.gw-awards__title {
  font-family: inherit;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 18px;
  color: #0a0a0a !important;
}
.gw-awards__lede {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: #0a0a0a !important;
  opacity: 0.72;
  margin: 0;
}
.gw-awards__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  padding: clamp(40px, 5vw, 64px) clamp(12px, 2vw, 24px);
}
.gw-awards__logos > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 10px;
}
.gw-awards__logos img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity .35s ease, transform .35s ease;
}
.gw-awards__logos > li:hover img {
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
}

@media (max-width: 960px) {
  .gw-awards__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
  .gw-awards__logos > li { min-height: 140px; }
  .gw-awards__logos img { max-height: 120px; }
}
@media (max-width: 560px) {
  .gw-awards__logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .gw-awards__logos > li { min-height: 120px; }
  .gw-awards__logos img { max-height: 100px; }
}

/* ============================================================
   GW CLIENTS — matched to GW AWARDS band
   ============================================================ */
.gw-clients {
  display: block;
  width: 100%;
  padding: clamp(64px, 8vw, 120px) 0 clamp(32px, 4vw, 56px);
  background: #F2F2F2;
  color: #0a0a0a;
}
.gw-clients__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.gw-clients__head {
  max-width: 780px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  text-align: center;
}
.gw-clients__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0a0a0a !important;
  opacity: 0.6;
  margin-bottom: 18px;
}
.gw-clients__title {
  font-family: inherit;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 18px;
  color: #0a0a0a !important;
}
.gw-clients__lede {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: #0a0a0a !important;
  opacity: 0.72;
  margin: 0;
}
.gw-clients__logos {
  list-style: none;
  margin: 0;
  padding: clamp(32px, 4vw, 56px) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.gw-clients__logos > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 12px;
}
.gw-clients__logos img {
  max-width: 100%;
  max-height: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity .35s ease, transform .35s ease;
}
.gw-clients__logos > li:hover img {
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
}

/* Restore full color for clients (was being forced monochrome by legacy theme rule) */
.vc_custom_1771449398397 .ohio-widget.logo.-center img,
.gw-clients__logos img { filter: none !important; }

@media (max-width: 1100px) {
  .gw-clients__logos { grid-template-columns: repeat(3, 1fr); }
  .gw-clients__logos > li { min-height: 150px; }
  .gw-clients__logos img { max-height: 110px; }
}
@media (max-width: 680px) {
  .gw-clients__logos { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .gw-clients__logos > li { min-height: 120px; }
  .gw-clients__logos img { max-height: 92px; }
}

/* Kill the WPBakery separator rows that sit adjacent to GW clients/awards bands.
   They were injecting a huge ~120px gap between the sections. */
.vc_custom_1771505056866,
.vc_custom_1771505359513 { display: none !important; }

/* ============================================================
   GW INSIGHTS — redesigned "What's new" band
   ============================================================ */
/* Neutralize legacy WPBakery padding/bg on this row so our section controls spacing */
.vc_custom_1771449331836 {
  padding: 0 !important;
  background: transparent !important;
}

.gw-insights {
  display: block;
  width: 100%;
  padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 9vw, 128px);
  background: #F2F2F2;
  color: #0a0a0a;
}
.gw-insights__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.gw-insights__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  flex-wrap: wrap;
}
.gw-insights__headCopy { max-width: 720px; }
.gw-insights__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0a0a0a !important;
  opacity: 0.6;
  margin-bottom: 14px;
}
.gw-insights__title {
  font-family: inherit;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 14px;
  color: #0a0a0a !important;
}
.gw-insights__lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: #0a0a0a !important;
  opacity: 0.72;
  margin: 0;
  max-width: 620px;
}
.gw-insights__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid #0a0a0a;
  background: transparent;
  color: #0a0a0a !important;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.gw-insights__cta:hover {
  background: #0a0a0a;
  color: #F2F2F2 !important;
  transform: translateY(-1px);
}
.gw-insights__cta svg { transition: transform .25s ease; }
.gw-insights__cta:hover svg { transform: translateX(3px); }

.gw-insights__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.gw-insights__card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 1px 0 rgba(10,10,10,0.06);
}
.gw-insights__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(10,10,10,0.10);
}
.gw-insights__card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}
.gw-insights__card--feature { grid-column: span 2; }
.gw-insights__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F2F2F2;
}
.gw-insights__card--feature .gw-insights__media { aspect-ratio: 16 / 9; }
.gw-insights__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gw-insights__card:hover .gw-insights__media img { transform: scale(1.04); }
.gw-insights__media--gradient {
  background: linear-gradient(135deg, #9ef0f0 0%, #c4f5f5 40%, #F2F2F2 100%);
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.gw-insights__mediaMark {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(10,10,10,0.85) !important;
  line-height: 1;
}
.gw-insights__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.gw-insights__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gw-insights__tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(10,10,10,0.06);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a !important;
  font-weight: 400;
}
.gw-insights__cardTitle {
  font-family: inherit;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
  color: #0a0a0a !important;
}
.gw-insights__card--feature .gw-insights__cardTitle {
  font-size: clamp(24px, 2vw, 32px);
}
.gw-insights__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #0a0a0a !important;
  opacity: 0.6;
}

@media (max-width: 960px) {
  .gw-insights__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .gw-insights__grid { grid-template-columns: repeat(2, 1fr); }
  .gw-insights__card--feature { grid-column: span 2; }
}
@media (max-width: 640px) {
  .gw-insights__grid { grid-template-columns: 1fr; }
  .gw-insights__card--feature { grid-column: auto; }
}

/* ============================================================
   Insights grid cleanup (homepage) — equal 3-up, cleaner stack
   ============================================================ */
.gw-insights__grid { grid-template-columns: repeat(3, 1fr); }
.gw-insights__card--feature { grid-column: auto; }
.gw-insights__card--feature .gw-insights__media { aspect-ratio: 16 / 10; }
.gw-insights__card--feature .gw-insights__cardTitle { font-size: clamp(20px, 1.6vw, 26px); }
@media (max-width: 960px) {
  .gw-insights__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .gw-insights__card--feature { grid-column: auto; }
}
@media (max-width: 640px) {
  .gw-insights__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK grid (page-id-225262) — rounded cards, cleaner hover
   ============================================================ */
.page-id-225262 .vc_custom_1771505899564,
.page-id-225267 .vc_custom_1771505778285 {
  background: #F2F2F2 !important;
  padding: clamp(24px, 3vw, 48px) 0 clamp(64px, 8vw, 120px) !important;
}
.page-id-225262 .ohio-widget.portfolio-projects,
.page-id-225267 .ohio-widget.blog-posts {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.page-id-225262 .portfolio-grid,
.page-id-225267 .ohio-widget.blog-posts.vc_row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  margin: 0 !important;
}
.page-id-225262 .portfolio-grid > *,
.page-id-225267 .ohio-widget.blog-posts > .grid-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 820px) {
  .page-id-225262 .portfolio-grid,
  .page-id-225267 .ohio-widget.blog-posts.vc_row { grid-template-columns: 1fr; }
}

/* Portfolio card */
.page-id-225262 .portfolio-item.card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,10,0.06);
  transition: transform .35s ease, box-shadow .35s ease;
  margin: 0 !important;
}
.page-id-225262 .portfolio-item.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(10,10,10,0.10);
}
.page-id-225262 .portfolio-item.card .image-holder {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F2F2F2;
}
.page-id-225262 .portfolio-item.card .image-holder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .6s ease;
}
.page-id-225262 .portfolio-item.card:hover .image-holder img { transform: scale(1.04); }
.page-id-225262 .portfolio-item.card .overlay {
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.55) 100%) !important;
  opacity: 1 !important;
}
.page-id-225262 .portfolio-item.card .overlay-details {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 24px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}
.page-id-225262 .portfolio-item.card .heading .title,
.page-id-225262 .portfolio-item.card .heading .title a {
  font-family: inherit !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.page-id-225262 .portfolio-item.card .category-holder { display: flex; flex-wrap: wrap; gap: 6px; }
.page-id-225262 .portfolio-item.card .category,
.page-id-225262 .portfolio-item.card .category a {
  font-family: inherit !important;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #ffffff !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.page-id-225262 .portfolio-item.card .show-project-link { display: none !important; }

/* News (Insights archive) card */
.page-id-225267 .blog-item.card {
  background: #ffffff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(10,10,10,0.06) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  height: 100%;
}
.page-id-225267 .blog-item.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(10,10,10,0.10);
}
.page-id-225267 .blog-item.card > a { display: block; }
.page-id-225267 .blog-item.card .image-holder {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F2F2F2;
  margin: 0 !important;
}
.page-id-225267 .blog-item.card .image-holder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s ease;
}
.page-id-225267 .blog-item.card:hover .image-holder img { transform: scale(1.04); }
.page-id-225267 .blog-item.card .overlay-details { display: none !important; }
.page-id-225267 .blog-item.card .card-details {
  padding: 24px 26px 26px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.page-id-225267 .blog-item.card .headline-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px !important;
  color: #0a0a0a !important;
  opacity: 0.6;
  margin: 0 !important;
  order: 2;
  margin-top: auto !important;
  padding-top: 12px;
}
.page-id-225267 .blog-item.card .headline-meta .date { font-size: 13px !important; color: inherit !important; }
.page-id-225267 .blog-item.card .post-meta-estimate { font-size: 13px !important; color: inherit !important; }
.page-id-225267 .blog-item.card .post-meta-estimate::before { content: "· "; opacity: 0.6; }
.page-id-225267 .blog-item.card .heading.title { margin: 0 !important; }
.page-id-225267 .blog-item.card .heading .title,
.page-id-225267 .blog-item.card .heading .title a {
  font-family: inherit !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  color: #0a0a0a !important;
  text-decoration: none !important;
}
.page-id-225267 .blog-item.card p {
  font-size: 15px !important;
  line-height: 1.55;
  color: #0a0a0a !important;
  opacity: 0.72;
  margin: 0 !important;
}
.page-id-225267 .blog-item.card .category-holder { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.page-id-225267 .blog-item.card .tag,
.page-id-225267 .blog-item.card .category-holder a {
  display: inline-block !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(10,10,10,0.06) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: none !important;
}

/* Hide separators inside work & news grids */
.page-id-225262 .vc_separator,
.page-id-225267 .vc_separator { display: none !important; }

/* Featured (first, full-width) card on News */
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 { grid-column: 1 / -1; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card { flex-direction: row !important; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card > a { flex: 1 1 55%; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .image-holder { aspect-ratio: 4 / 3; height: 100%; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .card-details { flex: 1 1 45%; justify-content: center; padding: 40px 44px !important; gap: 18px; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .heading .title { font-size: clamp(28px, 2.4vw, 40px) !important; }
@media (max-width: 820px) {
  .page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card { flex-direction: column !important; }
  .page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .image-holder { aspect-ratio: 16 / 10; }
}

/* ============================================================
   Card redesign v2 — brand.ai style: image-first, no card bg
   Applies to:
     .gw-insights__card  (homepage Insights)
     .page-id-225267 .blog-item.card  (News archive)
     .page-id-225262 .portfolio-item.card  (Work archive)
   ============================================================ */

/* Shared reset: kill card chrome */
.gw-insights__card,
.page-id-225267 .blog-item.card,
.page-id-225262 .portfolio-item.card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.gw-insights__card:hover,
.page-id-225267 .blog-item.card:hover,
.page-id-225262 .portfolio-item.card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Image holders: rounded, cover, subtle scale on hover */
.gw-insights__media,
.page-id-225267 .blog-item.card .image-holder,
.page-id-225262 .portfolio-item.card .image-holder {
  border-radius: 20px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  background: #F2F2F2 !important;
  margin: 0 !important;
}
.gw-insights__media img,
.page-id-225267 .blog-item.card .image-holder img,
.page-id-225262 .portfolio-item.card .image-holder img {
  transition: transform .8s cubic-bezier(.2,.8,.2,1) !important;
}
.gw-insights__card:hover .gw-insights__media img,
.page-id-225267 .blog-item.card:hover .image-holder img,
.page-id-225262 .portfolio-item.card:hover .image-holder img {
  transform: scale(1.03) !important;
}

/* ---------- Homepage insights cards ---------- */
.gw-insights__card > a {
  gap: 18px !important;
}
.gw-insights__body {
  padding: 0 !important;
  gap: 10px !important;
}
.gw-insights__tags { display: none !important; }
.gw-insights__cardTitle {
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
.gw-insights__meta {
  font-size: 13px !important;
  opacity: 0.55 !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
.gw-insights__card:hover .gw-insights__cardTitle {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.gw-insights__media--gradient {
  background: linear-gradient(135deg, #9ef0f0 0%, #c4f5f5 40%, #F2F2F2 100%) !important;
}

/* ============================================================
   Homepage Insights cards — match case-study card style
   Dark card body (#0a0a0a) + white meta panel at bottom
   ============================================================ */
.gene-page--home .gw-insights__card {
  background: #0a0a0a !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(10,10,10,0.05) !important;
}
.gene-page--home .gw-insights__card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 26px 50px rgba(10,10,10,0.12) !important;
}
/* Flex column, image first */
.gene-page--home .gw-insights__card > a {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
}
/* Image on top — override the order:1 that pushes it below text */
.gene-page--home .gw-insights__media {
  order: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 10 !important;
  background: #1a1a1a !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
.gene-page--home .gw-insights__card:hover .gw-insights__media img {
  transform: scale(1.04) !important;
}
/* White meta panel fills remaining height */
.gene-page--home .gw-insights__body {
  order: 1 !important;
  background: #ffffff !important;
  padding: 22px 26px 26px !important;
  gap: 4px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Restore tag pills */
.gene-page--home .gw-insights__tags {
  display: flex !important;
  order: 0 !important;
  margin-bottom: 6px !important;
}
/* Title */
.gene-page--home .gw-insights__cardTitle {
  order: 1 !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 1.5vw, 26px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  color: #0a0a0a !important;
  text-decoration: none !important;
}
.gene-page--home .gw-insights__card:hover .gw-insights__cardTitle {
  text-decoration: none !important;
}
/* Date/meta row */
.gene-page--home .gw-insights__meta {
  order: 2 !important;
  font-size: 0.78em !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(10,10,10,0.48) !important;
  opacity: 1 !important;
  margin-top: auto !important;
}
/* Gradient placeholder card — strict 16:10 box, label positioned absolutely so flex/padding can't stretch the card */
.gene-page--home .gw-insights__media--gradient {
  background: linear-gradient(135deg, #9ef0f0 0%, #c4f5f5 40%, #F2F2F2 100%) !important;
  aspect-ratio: 16 / 10 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  max-height: none !important;
}
.gene-page--home .gw-insights__media--gradient .gw-insights__mediaMark {
  position: absolute !important;
  left: 28px !important;
  bottom: 28px !important;
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1 !important;
}


/* ---------- News archive cards ---------- */
.page-id-225267 .blog-item.card .card-details {
  padding: 18px 0 0 0 !important;
  gap: 10px !important;
}
.page-id-225267 .blog-item.card p,
.page-id-225267 .blog-item.card .category-holder {
  display: none !important;
}
.page-id-225267 .blog-item.card .heading .title,
.page-id-225267 .blog-item.card .heading .title a {
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
.page-id-225267 .blog-item.card:hover .heading .title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.page-id-225267 .blog-item.card .headline-meta {
  padding: 0 !important;
  margin: 0 !important;
  order: -1 !important;
  font-size: 13px !important;
  opacity: 0.55 !important;
  gap: 6px !important;
}
.page-id-225267 .blog-item.card .headline-meta .date { font-weight: 400 !important; }
.page-id-225267 .blog-item.card .post-meta-estimate::before { content: "· " !important; }

/* News featured (first) card: horizontal hero, image left, copy right */
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card {
  flex-direction: row !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: center;
}
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card > a { flex: 1 1 58% !important; width: 58%; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .image-holder { aspect-ratio: 4 / 3 !important; height: auto !important; }
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .card-details {
  flex: 1 1 42% !important;
  padding: 0 !important;
  gap: 16px !important;
}
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .heading .title {
  font-size: clamp(28px, 3vw, 48px) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
}
@media (max-width: 820px) {
  .page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card { flex-direction: column !important; align-items: stretch; }
  .page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card > a { width: 100%; }
}

/* ---------- Work archive cards ---------- */
/* Drop the dark gradient overlay + overlay-details; put title/category beneath image */
.page-id-225262 .portfolio-item.card { display: flex !important; flex-direction: column; gap: 18px; }
.page-id-225262 .portfolio-item.card .overlay { display: none !important; }
.page-id-225262 .portfolio-item.card .overlay-details {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
.page-id-225262 .portfolio-item.card .heading .title,
.page-id-225262 .portfolio-item.card .heading .title a {
  color: #0a0a0a !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  order: 2;
}
.page-id-225262 .portfolio-item.card:hover .heading .title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.page-id-225262 .portfolio-item.card .category-holder {
  order: 1;
  background: transparent !important;
  backdrop-filter: none !important;
}
.page-id-225262 .portfolio-item.card .category,
.page-id-225262 .portfolio-item.card .category a {
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #0a0a0a !important;
  opacity: 0.55;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
}
.page-id-225262 .portfolio-item.card .category + .category::before {
  content: "· ";
  opacity: 0.6;
  margin-right: 4px;
}
.page-id-225262 .portfolio-item.card .show-project,
.page-id-225262 .portfolio-item.card .show-project-link { display: none !important; }

/* Override JS Isotope / Masonry positioning forcefully */
.page-id-225262 .portfolio-grid,
.page-id-225267 .ohio-widget.blog-posts.vc_row,
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry {
  height: auto !important;
  display: grid !important;
}

.page-id-225262 .portfolio-item-wrap,
.page-id-225267 .ohio-widget.blog-posts > .grid-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

/* Clear floating logic if grid fails visually */
.page-id-225262 .portfolio-grid::before,
.page-id-225262 .portfolio-grid::after,
.page-id-225267 .ohio-widget.blog-posts::before,
.page-id-225267 .ohio-widget.blog-posts::after {
  display: none !important;
}

/* ============================================================
   Consistent Brand.ai Card Re-alignment + Spacing Fix
   ============================================================ */

/* 1. Global spacing fix: Transparent cards need massive vertical rhythm */
.gw-insights__grid {
  gap: clamp(48px, 6vw, 64px) 32px !important;
}
.page-id-225262 .portfolio-grid,
.page-id-225267 .ohio-widget.blog-posts.vc_row {
  gap: clamp(48px, 6vw, 64px) 32px !important;
}

/* 2. Global Order & Typography Rules (Image -> Title -> Meta) */
/* The wrapping container (a tag or div) flex-col */
.gw-insights__card > a,
.page-id-225267 .blog-item.card .card-details,
.page-id-225262 .portfolio-item.card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* Space between Image, Title, Meta */
}

/* Title universally order 2 */
.gw-insights__cardTitle,
.page-id-225267 .blog-item.card .heading .title,
.page-id-225267 .blog-item.card .heading .title a,
.page-id-225262 .portfolio-item.card .heading .title,
.page-id-225262 .portfolio-item.card .heading .title a {
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Geist', sans-serif, -apple-system !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: #0a0a0a !important;
}

/* Meta universally order 3 */
.gw-insights__meta,
.page-id-225267 .blog-item.card .headline-meta,
.page-id-225262 .portfolio-item.card .category-holder {
  order: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: rgba(10,10,10,0.6) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  margin-top: 2px !important;
}

/* 3. Homepage Insights Stacking Mobile Fix */
@media (max-width: 960px) {
  .gw-insights__head {
    gap: 24px;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .gw-insights__grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .page-id-225262 .portfolio-grid,
  .page-id-225267 .ohio-widget.blog-posts.vc_row {
    gap: 48px !important;
  }
}

/* Ensure no stray margin/padding destroys flex flow */
.gw-insights__media,
.page-id-225267 .blog-item.card .image-holder,
.page-id-225262 .portfolio-item.card .image-holder {
  order: 1 !important;
  margin-bottom: 8px !important;
}

.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card {
  gap: clamp(24px, 4vw, 48px) !important; 
}

/* ============================================================
   WORK CARD FIXED STRUCTURE (Brand.ai style layout correction)
   ============================================================ */

/* Revert the broken image-holder settings on Work cards */
.page-id-225262 .portfolio-item.card .image-holder {
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Move the 4:3 box, rounding, and overflow to the 'a' tag wrapping the image */
.page-id-225262 .portfolio-item.card .image-holder > a {
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #F2F2F2 !important;
  width: 100% !important;
  margin: 0 0 4px !important; 
  order: 1 !important;
}

.page-id-225262 .portfolio-item.card .image-holder > a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Reset the details container to align cleanly */
.page-id-225262 .portfolio-item.card .overlay-details {
  order: 2 !important;
  gap: 12px !important; /* Meta and Title spacing */
}

/* Align News featured card horizontal gaps correctly */
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card {
  align-items: center !important;
}
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .image-holder {
  aspect-ratio: 16 / 10 !important;
}


/* ============================================================
   ULTIMATE BRAND.AI DESIGN OVERRIDE (v3)
   ============================================================ */

/* Super charge the typography for all Titles to match brand.ai */
.gw-insights__cardTitle,
.page-id-225267 .blog-item.card .heading .title,
.page-id-225267 .blog-item.card .heading .title a,
.page-id-225262 .portfolio-item.card .heading .title,
.page-id-225262 .portfolio-item.card .heading .title a {
  font-size: clamp(22px, 2vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #0a0a0a !important;
}

/* Punch up the Meta */
.gw-insights__meta,
.page-id-225267 .blog-item.card .headline-meta,
.page-id-225262 .portfolio-item.card .category-holder {
  font-size: 15px !important;
  color: rgba(10,10,10,0.65) !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
}
.page-id-225262 .portfolio-item.card .category,
.page-id-225262 .portfolio-item.card .category a {
  font-size: 15px !important;
  color: rgba(10,10,10,0.65) !important;
  font-weight: 400 !important;
}

/* Big 24px Card Borders for brand.ai softness */
.gw-insights__media,
.page-id-225267 .blog-item.card .image-holder,
.page-id-225262 .portfolio-item.card .image-holder > a {
  border-radius: 24px !important;
}

/* Gap tuning for the image -> stack gap */
.gw-insights__card > a,
.page-id-225267 .blog-item.card .card-details,
.page-id-225262 .portfolio-item.card .image-holder,
.page-id-225262 .portfolio-item.card .overlay-details {
  gap: 10px !important;
}

/* Title container spacing */
.page-id-225267 .blog-item.card .heading,
.page-id-225262 .portfolio-item.card .heading {
  margin: 0 !important;
  padding: 0 !important;
}

/* Specific styling for the giant hero card */
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .heading .title {
  font-size: clamp(32px, 3.5vw, 56px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card .image-holder {
  aspect-ratio: 16 / 9 !important;
}

/* ============================================================
   GEIST TYPOGRAPHY OVERRIDE & RICH PORTFOLIO CARDS
   ============================================================ */

/* Enforce Geist Bitch */
body, 
.page-id-225262 .portfolio-item.card *, 
.page-id-225267 .blog-item.card *,
.portfolio-catchphrase,
.gw-insights__cardTitle,
.page-id-225267 .blog-item.card .heading .title,
.page-id-225267 .blog-item.card .heading .title a,
.page-id-225262 .portfolio-item.card .heading .title,
.page-id-225262 .portfolio-item.card .heading .title a,
.gw-insights__meta,
.page-id-225267 .blog-item.card .headline-meta,
.page-id-225262 .portfolio-item.card .category-holder,
.page-id-225262 .portfolio-item.card .category,
.page-id-225262 .portfolio-item.card .category a {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Rich Catchphrase Styling */
.portfolio-catchphrase {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: rgba(10, 10, 10, 0.7) !important;
    font-weight: 400 !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    padding-right: 15px !important; /* give it some breathing room */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* smooth native truncation */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
}

/* Re-adjust the container flow so the catchphrase and category fit nicely */
.page-id-225262 .portfolio-item.card .heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.page-id-225262 .portfolio-item.card .show-project {
    order: 3 !important;
    margin-top: 8px !important;
}

.page-id-225262 .portfolio-item.card .heading .title {
    order: 1 !important;
    margin-bottom: 4px !important;
}

.portfolio-catchphrase {
    order: 2 !important;
}

/* Add a bit of border/padding to the category pills to make them richer like brand.ai */
.page-id-225262 .portfolio-item.card .category {
    display: inline-flex !important;
    align-items: center !important;
    background-color: rgba(10, 10, 10, 0.05) !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-right: 6px !important;
    text-transform: capitalize !important;
    color: rgba(10, 10, 10, 0.8) !important;
}
.page-id-225262 .portfolio-item.card .category:hover {
    background-color: rgba(10, 10, 10, 0.1) !important;
}

/* Specific title clamp to match brand.ai richness */
.page-id-225262 .portfolio-item.card .heading .title a {
    font-size: clamp(24px, 2.5vw, 32px) !important;
    letter-spacing: -0.02em !important;
}


/* ============================================================
   INSIGHTS PAGE FEATURED POST (2-COLUMN) AND BRAND.AI MATCHING
   ============================================================ */

/* Ensure the full insights page resets the absolute overlays so cards look like brand.ai */
.page-id-225267 .blog-item.card .overlay-details {
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.page-id-225267 .blog-item.card .overlay-details::before {
    display: none !important;
}

/* Base link setup for cards so they flow as columns */
.page-id-225267 .blog-item.card > a {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* The FEATURED TOP POST (lg-12) -> 2-COLUMN LAYOUT */
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card > a {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important; /* Vertically center the text next to the image */
}

/* Remove hover scale effect that breaks the flex/grid layout */
.page-id-225267 .blog-item.card.-img-scale:hover .image-holder img {
    transform: none !important;
}

/* Category pills for insights page to match brand.ai */
.page-id-225267 .blog-item.card .category-holder {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.page-id-225267 .blog-item.card .category-holder .tag {
    display: inline-flex !important;
    align-items: center !important;
    background-color: rgba(10, 10, 10, 0.05) !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    color: rgba(10, 10, 10, 0.8) !important;
}
.page-id-225267 .blog-item.card .category-holder .tag:hover {
    background-color: rgba(10, 10, 10, 0.1) !important;
}

/* Remove avatar/author row if needed to clean up to look like brand.ai, or at least tone it down */
.page-id-225267 .blog-item.card .headline-meta {
    margin-top: 8px !important;
    opacity: 0.7 !important;
}

/* Reorder the text content slightly if the title is under the meta */
.page-id-225267 .blog-item.card .overlay-details > .category-holder {
    order: 1 !important;
}
.page-id-225267 .blog-item.card .overlay-details > .heading {
    order: 2 !important;
}
.page-id-225267 .blog-item.card .overlay-details > .headline-meta {
    order: 3 !important;
}

@media (max-width: 768px) {
    .page-id-225267 .ohio-widget.blog-posts.ohio-masonry > .vc_col-lg-12 .blog-item.card > a {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ============================================================
   HOMEPAGE TYPOGRAPHY LOCKDOWN — GEIST REGULAR + GEIST LIGHT ONLY
   Applied only on the homepage (page-id-17947) for consistency.
   ============================================================ */

/* Regular = 400 (Geist), Light = 300 (Geist-Light).
   Kill all other weights/fonts on the homepage. */
.home,
.home p,
.home li,
.home a,
.home span,
.home div,
.home button,
.home input,
.home label,
.home h1, .home h2, .home h3, .home h4, .home h5, .home h6,
.home .eyebrow, .home .subtitle, .home .lede,
.home [class*="gw-"],
.home [class*="gw-"] * {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
  font-style: normal !important;
}

/* Force Light on all HERO / SECTION display headings (h1, h2, and our section titles) */
.home h1,
.home h2,
.home .gw-awards__title,
.home .gw-clients__title,
.home .gw-insights__title,
.home .gw-hero__title,
.home .vc_custom_heading h1,
.home .vc_custom_heading h2,
.home .heading-typo h1,
.home .heading-typo h2 {
  font-family: 'Geist-Light', 'Geist', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  font-style: normal !important;
  color: #0a0a0a !important;
}

/* Regular weight everywhere else on the homepage */
.home body,
.home p,
.home li,
.home span,
.home a,
.home h3, .home h4, .home h5, .home h6,
.home .gw-awards__eyebrow,
.home .gw-clients__eyebrow,
.home .gw-insights__eyebrow,
.home .gw-awards__lede,
.home .gw-clients__lede,
.home .gw-insights__lede,
.home .gw-insights__cardTitle,
.home .gw-insights__meta,
.home .button,
.home .btn {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
}

/* Strip any bold text on the homepage to match the refined two-weight system */
.home strong, .home b {
  font-weight: 400 !important;
}

/* ============================================================
   HOMEPAGE SECTION CONSISTENCY — unified section rhythm/colors
   ============================================================ */

/* Unify the section background for Awards + Clients so they read as one band */
.home .gw-awards,
.home .gw-clients {
  background: #F2F2F2 !important;
}

/* Unify inner container width across homepage modules */
.home .gw-awards__inner,
.home .gw-clients__inner,
.home .gw-insights__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-left: clamp(24px, 5vw, 64px) !important;
  padding-right: clamp(24px, 5vw, 64px) !important;
}

/* Unified eyebrow styling across sections (tiny caps label) */
.home .gw-awards__eyebrow,
.home .gw-clients__eyebrow,
.home .gw-insights__eyebrow {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(10, 10, 10, 0.6) !important;
  opacity: 1 !important;
  margin-bottom: 18px !important;
}

/* Unified section title scale */
.home .gw-awards__title,
.home .gw-clients__title,
.home .gw-insights__title {
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.02 !important;
  margin: 0 0 18px !important;
}

/* Unified lede under section titles */
.home .gw-awards__lede,
.home .gw-clients__lede,
.home .gw-insights__lede {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.55 !important;
  color: rgba(10, 10, 10, 0.7) !important;
  opacity: 1 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Homepage insight card titles — readable and consistent */
.home .gw-insights__cardTitle {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.4vw, 24px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #0a0a0a !important;
}
.home .gw-insights__card--feature .gw-insights__cardTitle {
  font-size: clamp(28px, 2.4vw, 40px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* Homepage meta (date / read time) consistent style */
.home .gw-insights__meta {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: rgba(10, 10, 10, 0.55) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* ============================================================
   HOMEPAGE SECTION RHYTHM — equalize gaps between
   Case Study -> Insights -> Clients -> Industry Recognition
   Gap target = top padding of Insights (clamp(56px, 7vw, 104px)).
   Each adjacent pair (section-bottom + next-section-top) must equal that.
   Splitting it 50/50 means top = bottom = clamp(28px, 3.5vw, 52px)
   for all interior edges.
   ============================================================ */
.home .gw-insights {
  padding-top: clamp(56px, 7vw, 104px) !important;
  padding-bottom: clamp(28px, 3.5vw, 52px) !important;
}
.home .gw-clients {
  padding-top: clamp(28px, 3.5vw, 52px) !important;
  padding-bottom: clamp(28px, 3.5vw, 52px) !important;
}
.home .gw-awards {
  padding-top: clamp(28px, 3.5vw, 52px) !important;
  padding-bottom: clamp(56px, 7vw, 104px) !important;
}

/* Also kill the WPBakery separator rows between these sections so
   they don't inject an extra ~120px of whitespace we can't see. */
.home .vc_custom_1771505056866,
.home .vc_custom_1771505359513 { display: none !important; }


/* ============================================================
   INSIGHTS (/news/) + CATEGORY ARCHIVES — clean two-column grid
   ============================================================ */

/* Constrain the posts container so it sits inside a standard container */
.page-id-225267 .ohio-widget.blog-posts,
body.archive .archive-holder.blog-posts-classic {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  float: none !important;
}

/* Reset each item to a normal grid cell (kill Bootstrap/VC col widths) */
.page-id-225267 .ohio-widget.blog-posts > .grid-item,
.page-id-225267 .ohio-widget.blog-posts > .masonry-block,
body.archive .archive-holder.blog-posts-classic > .grid-item {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-column: span 1 !important;
}

/* Feature card (first/only item in the first blog-posts block on Insights) spans both columns */
.page-id-225267 .ohio-widget.blog-posts:first-of-type > .grid-item,
.page-id-225267 .ohio-widget.blog-posts > .vc_col-lg-12 {
  grid-column: 1 / -1 !important;
}

/* Pull the second blog-posts block flush under the feature card (remove WPBakery separator) */
.page-id-225267 .vc_separator {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  opacity: 0 !important;
  height: 0 !important;
}

/* Kill the masonry absolute positioning that the JS would normally apply */
.page-id-225267 .ohio-widget.blog-posts.ohio-masonry {
  height: auto !important;
}

/* Card visual polish */
.page-id-225267 .ohio-widget.blog-posts .blog-item,
body.archive .archive-holder.blog-posts-classic .blog-item {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.page-id-225267 .ohio-widget.blog-posts .blog-item .image-holder,
body.archive .archive-holder.blog-posts-classic .blog-item .image-holder {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}
.page-id-225267 .ohio-widget.blog-posts .blog-item .image-holder img,
body.archive .archive-holder.blog-posts-classic .blog-item .image-holder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Feature card gets a taller image */
.page-id-225267 .ohio-widget.blog-posts:first-of-type .blog-item .image-holder {
  aspect-ratio: 21 / 9 !important;
}
.page-id-225267 .ohio-widget.blog-posts:first-of-type .blog-item .card-details .title {
  font-size: clamp(28px, 2.6vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* Responsive: single column on mobile */
@media (max-width: 760px) {
  .page-id-225267 .ohio-widget.blog-posts,
  body.archive .archive-holder.blog-posts-classic {
    grid-template-columns: 1fr !important;
  }
  .page-id-225267 .ohio-widget.blog-posts > .vc_col-lg-12,
  .page-id-225267 .ohio-widget.blog-posts:first-of-type > .grid-item {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
   ARCHIVE PAGES — /news/ and /category/*
   Clean grid system, container-bounded, no WordPress remnants.
   ============================================================ */
.gw-archive {
  display: block;
  width: 100%;
  padding: clamp(48px, 6vw, 96px) 0 clamp(72px, 9vw, 128px);
  background: #F2F2F2;
  color: #0a0a0a;
}
.gw-archive__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.gw-archive__head {
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.gw-archive__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}
.gw-archive__title {
  font-family: inherit;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 14px;
  color: #0a0a0a;
}
.gw-archive__lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  opacity: 0.72;
  margin: 0;
  max-width: 640px;
}
.gw-archive__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}
.gw-archive__card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 1px 0 rgba(10,10,10,0.06);
  list-style: none;
}
.gw-archive__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(10,10,10,0.10);
}
.gw-archive__card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.gw-archive__card--feature { grid-column: 1 / -1; }
.gw-archive__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F2F2F2;
}
.gw-archive__card--feature .gw-archive__media { aspect-ratio: 21 / 9; }
.gw-archive__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gw-archive__card:hover .gw-archive__media img { transform: scale(1.04); }
.gw-archive__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.gw-archive__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gw-archive__tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(10,10,10,0.06);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
}
.gw-archive__cardTitle {
  font-family: inherit;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}
.gw-archive__card--feature .gw-archive__cardTitle {
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.1;
}
.gw-archive__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  opacity: 0.6;
}
@media (max-width: 640px) {
  .gw-archive__grid { grid-template-columns: 1fr; }
  .gw-archive__card--feature { grid-column: auto; }
  .gw-archive__card--feature .gw-archive__media { aspect-ratio: 16 / 10; }
}

/* ============================================================
   Antidote Health — brand overrides from the Antidote Brand
   Platform Toolkit (Feb 2026).
   Palette: Deep Blue #090942, Periwinkle #6E81FF, Lilac #E4E4FB,
   Rich Orange #FF5D11, plus white.
   Type:  Aeonik (headlines), Inter (body).
   Wordmark: ANTIDO+E — letterspaced, Deep Blue with the "+"
   rendered in Rich Orange.
   Motifs: pill-shaped keyword chips, small geometric glyphs
   (+ cross, asterisk, diamond, dot), a soft radial orange "sun"
   gradient on poster work.
   ============================================================ */
.bi-ad--ctv,
.bi-ad--social,
.bi-ad--display,
.bi-ad--search,
.bi-ad--ooh,
.bi-ad--site,
.bi-reel__asset {
  --ah-deep: #090942;
  --ah-peri: #6E81FF;
  --ah-lilac: #E4E4FB;
  --ah-orange: #FF5D11;
  --ah-white: #FFFFFF;
  --ah-ink: #090942;
  --ah-sans: 'Aeonik', 'Inter', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --ah-body: 'Inter', 'Geist', ui-sans-serif, system-ui, sans-serif;
}

/* ---- ANTIDO+E wordmark — reusable inline block ---- */
.ah-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--ah-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ah-deep);
  line-height: 1;
  white-space: nowrap;
}
.ah-logo__plus {
  color: var(--ah-orange);
  display: inline-block;
  transform: translateY(-0.02em);
  padding: 0 0.02em;
}

/* ---------- Activation grid ad cards ---------- */
/* Brand film 16:9 — white poster w/ soft orange sun gradient,
   Deep Blue type, tiny wordmark under. (Matches the outdoor /
   subway poster in the toolkit.) */
.bi-ad--ctv {
  background: var(--ah-white);
  color: var(--ah-deep);
}
.bi-ad__ctvBg {
  background:
    radial-gradient(circle at 68% 58%, rgba(255,93,17,0.95) 0%, rgba(255,93,17,0.55) 18%, rgba(255,93,17,0) 42%),
    radial-gradient(circle at 30% 30%, rgba(228,228,251,0.9), transparent 55%);
  filter: blur(1px);
}
.bi-ad__ctvLogo {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ah-deep);
}
.bi-ad__ctvHead {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ah-deep);
  max-width: 62%;
}
.bi-ad__ctvCta {
  background: var(--ah-deep);
  color: var(--ah-white);
  font-family: var(--ah-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Social 1:1 — Lilac feed card, Deep Blue headline */
.bi-ad--social { background: var(--ah-white); }
.bi-ad__socHead {
  background: var(--ah-white);
  border-bottom: 1px solid rgba(9,9,66,0.08);
}
.bi-ad__socAv { background: var(--ah-deep); }
.bi-ad__socN {
  color: var(--ah-deep);
  font-family: var(--ah-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.bi-ad__socM {
  color: rgba(9,9,66,0.55);
  font-family: var(--ah-body);
}
.bi-ad__socBody {
  background: linear-gradient(180deg, var(--ah-lilac) 0%, #F2F2FC 100%);
  position: relative;
}
.bi-ad__socBody::after {
  content: '';
  position: absolute;
  inset: auto -8% -8% auto;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle at 50% 50%, rgba(255,93,17,0.9) 0%, rgba(255,93,17,0.3) 40%, rgba(255,93,17,0) 70%);
  pointer-events: none;
  filter: blur(2px);
}
.bi-ad__socK {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-style: normal;
  color: var(--ah-deep);
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  position: relative;
}
.bi-ad__socP {
  color: rgba(9,9,66,0.75);
  font-family: var(--ah-body);
  position: relative;
}
.bi-ad__socCta {
  color: var(--ah-orange);
  font-family: var(--ah-body);
  font-weight: 400;
  position: relative;
}

/* Banner 300×250 — Deep Blue, Periwinkle accents, orange "+" */
.bi-ad--display {
  background: var(--ah-deep);
  color: var(--ah-white);
  position: relative;
  overflow: hidden;
}
.bi-ad--display::before {
  content: '+';
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--ah-orange);
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.bi-ad--display::after {
  content: '';
  position: absolute;
  left: -18%;
  bottom: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle at 50% 50%, rgba(110,129,255,0.55) 0%, rgba(110,129,255,0) 70%);
  pointer-events: none;
}
.bi-ad__dispLogo {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 11px;
  color: var(--ah-white);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
}
.bi-ad__dispHead {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ah-white);
  position: relative;
}
.bi-ad__dispCta {
  background: var(--ah-orange);
  color: var(--ah-white);
  font-family: var(--ah-body);
  font-weight: 400;
  position: relative;
}

/* Google Search ad mockup — kept neutral SERP chrome, but the
   advertiser dot + URL adopt Antidote Deep Blue. */
.bi-ad--search {
  aspect-ratio: 3 / 2;
  background: #ffffff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: Arial, Helvetica, sans-serif;
}
.bi-ad__srchBar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #dfe1e5;
  border-radius: 999px;
  font-size: 10.5px;
  color: #3c4043;
  margin-bottom: 4px;
}
.bi-ad__srchBar::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #5f6368;
  flex: 0 0 auto;
}
.bi-ad__srchBadge {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 400;
  color: #202124;
  border: 1px solid #202124;
  border-radius: 3px;
  padding: 1px 4px;
  letter-spacing: 0.02em;
}
.bi-ad__srchUrl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #202124;
  margin-top: 2px;
}
.bi-ad__srchUrl::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ah-deep);
  flex: 0 0 auto;
}
.bi-ad__srchHead {
  color: #1a0dab;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.bi-ad__srchDesc {
  color: #4d5156;
  font-size: 10.5px;
  line-height: 1.35;
}
.bi-ad__srchLinks {
  display: flex;
  gap: 10px;
  margin-top: 2px;
  font-size: 10px;
  color: #1a0dab;
}

/* DOOH — white poster, Deep Blue headline, big Rich Orange sun
   gradient, ANTIDO+E wordmark locked to bottom. */
.bi-ad--ooh {
  background: var(--ah-white);
  color: var(--ah-deep);
  position: relative;
  overflow: hidden;
}
.bi-ad--ooh::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -38%);
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,93,17,0.98) 0%, rgba(255,93,17,0.75) 35%, rgba(255,93,17,0) 70%);
  filter: blur(3px);
  pointer-events: none;
}
.bi-ad__oohBig {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ah-deep);
  position: relative;
  max-width: 80%;
}
.bi-ad__oohSmall {
  color: var(--ah-deep);
  font-family: var(--ah-sans);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  position: relative;
}

/* Site hero — white bg, Lilac nav row, Deep Blue headline, orange CTA */
.bi-ad--site {
  background: var(--ah-white);
}
.bi-ad__siteNav {
  background: var(--ah-lilac);
  border-bottom: 0;
  color: rgba(9,9,66,0.75);
  font-family: var(--ah-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
.bi-ad__siteNav span:first-child {
  color: var(--ah-deep);
  font-family: var(--ah-sans);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}
.bi-ad__siteHead {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-style: normal;
  color: var(--ah-deep);
  font-size: 20px;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.bi-ad__siteCta {
  background: var(--ah-orange);
  color: var(--ah-white);
  font-family: var(--ah-body);
  font-weight: 400;
}

/* ---------- BI Reel mini-cards ---------- */
.bi-reel__assetBody--ctv {
  background: var(--ah-white);
  color: var(--ah-deep);
  position: relative;
  overflow: hidden;
}
.bi-reel__assetBody--ctv::before {
  content: '';
  position: absolute;
  right: -10%; top: -10%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(255,93,17,0.9) 0%, rgba(255,93,17,0) 70%);
  filter: blur(2px);
  pointer-events: none;
}
.bi-reel__assetBody--social {
  background: var(--ah-lilac);
  color: var(--ah-deep);
}
.bi-reel__assetBody--disp {
  background: var(--ah-deep);
  color: var(--ah-white);
  position: relative;
  overflow: hidden;
}
.bi-reel__assetBody--disp::after {
  content: '+';
  position: absolute;
  top: 6px; right: 8px;
  color: var(--ah-orange);
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
.bi-reel__assetBody--ooh {
  background: var(--ah-white);
  color: var(--ah-deep);
  position: relative;
  overflow: hidden;
}
.bi-reel__assetBody--ooh::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -40%);
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,93,17,0.95) 0%, rgba(255,93,17,0.7) 35%, rgba(255,93,17,0) 72%);
  filter: blur(2px);
  pointer-events: none;
}
.bi-reel__assetBody--email,
.bi-reel__assetBody--search {
  background: #ffffff;
  color: #202124;
}
.bi-reel__assetBody--site {
  background: var(--ah-white);
  color: var(--ah-deep);
}
.bi-reel__assetLogo,
.bi-reel__dispLogo {
  font-family: var(--ah-sans);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}
.bi-reel__assetHead2,
.bi-reel__socK,
.bi-reel__dispHead,
.bi-reel__oohBig,
.bi-reel__emailK,
.bi-reel__siteHead {
  font-family: var(--ah-sans);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  color: inherit;
}
.bi-reel__assetCta,
.bi-reel__dispCta,
.bi-reel__siteCta {
  background: var(--ah-deep);
  color: var(--ah-white);
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 400;
  font-family: var(--ah-body);
  font-size: 10px;
}
.bi-reel__assetBody--disp .bi-reel__dispCta,
.bi-reel__assetBody--site .bi-reel__siteCta {
  background: var(--ah-orange);
  color: var(--ah-white);
}
.bi-reel__siteNav {
  background: var(--ah-lilac);
  padding: 4px 8px;
  border-radius: 4px;
}
.bi-reel__siteNav em {
  color: rgba(9,9,66,0.6);
  font-style: normal;
  font-family: var(--ah-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
}
.bi-reel__siteNav em:first-child {
  color: var(--ah-deep);
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Search reel card */
.bi-reel__searchBar {
  font-size: 9.5px;
  color: #3c4043;
  border: 1px solid #dfe1e5;
  border-radius: 999px;
  padding: 4px 8px;
}
.bi-reel__searchBadge {
  font-size: 8.5px;
  font-weight: 400;
  color: #202124;
  border: 1px solid #202124;
  padding: 0 3px;
  border-radius: 2px;
  align-self: flex-start;
}
.bi-reel__searchHead {
  color: #1a0dab;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 400;
}
.bi-reel__searchDesc {
  color: #4d5156;
  font-size: 9.5px;
  line-height: 1.3;
}

/* Keyword pill chips seen throughout the Antidote toolkit */
.ah-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.ah-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ah-lilac);
  color: var(--ah-deep);
  font-family: var(--ah-body);
  font-weight: 400;
  font-size: 9.5px;
  line-height: 1;
}
.ah-chip--ink { background: var(--ah-deep); color: var(--ah-white); }
.ah-chip--orange { background: var(--ah-orange); color: var(--ah-white); }
.ah-chip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ah-orange); display: inline-block; }

/* CTV reel card: the "cta" slot now holds the wordmark — let it be wider & no bg */
.bi-reel__assetBody--ctv .bi-reel__assetCta {
  background: transparent;
  color: var(--ah-deep);
  padding: 0;
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
}
/* Activation CTV: same treatment so "ANTIDO+E" reads as the sign-off, not a button */
.bi-ad--ctv .bi-ad__ctvCta {
  background: transparent;
  color: var(--ah-deep);
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.bi-ad--ctv .bi-ad__ctvCta .ah-logo { font-size: 13px; }

/* ============================================================
   Antidote "FINALLY." campaign — shared imagery + kicker system.
   ============================================================ */

/* Reusable photo wrapper inside an ad card */
.ah-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ah-photo--darken::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,9,66,0.10) 0%, rgba(9,9,66,0.55) 70%, rgba(9,9,66,0.80) 100%);
}
.ah-photo--corner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,93,17,0.55) 0%, rgba(255,93,17,0) 35%),
    linear-gradient(180deg, rgba(9,9,66,0) 40%, rgba(9,9,66,0.65) 100%);
}

/* "Finally." kicker — the campaign thread */
.ah-finally {
  display: inline-block;
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ah-orange);
  position: relative;
}
.ah-finally::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ah-orange);
  margin-left: 4px;
  transform: translateY(-1px);
}

/* Keyword marquee — the pill-chip strip from the brand toolkit */
.ah-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ah-marquee__track {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
  animation: ah-marquee 22s linear infinite;
}
.ah-marquee__word {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ah-lilac);
  color: var(--ah-deep);
  font-family: var(--ah-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
}
.ah-marquee__glyph {
  display: inline-block;
  width: 8px; height: 8px;
  color: var(--ah-orange);
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
@keyframes ah-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- CTV / Brand film — photo-first ---------- */
.bi-ad--ctv {
  background: var(--ah-deep);
  color: var(--ah-white);
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}
.bi-ad--ctv .ah-photo { z-index: 0; }
.bi-ad--ctv .bi-ad__ctvBg { display: none; }
.bi-ad--ctv .bi-ad__ctvLogo,
.bi-ad--ctv .bi-ad__ctvHead,
.bi-ad--ctv .bi-ad__ctvCta {
  position: relative;
  z-index: 2;
  color: var(--ah-white);
}
.bi-ad--ctv .bi-ad__ctvLogo {
  margin: 12px 14px 0;
  color: var(--ah-orange);
}
.bi-ad--ctv .bi-ad__ctvHead {
  margin: 4px 14px 0;
  font-size: 18px;
  line-height: 1.05;
  max-width: 72%;
  letter-spacing: -0.015em;
}
.bi-ad--ctv .bi-ad__ctvCta {
  margin: auto 14px 12px;
  padding: 0;
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ah-white);
}

/* ---------- Social 1:1 — photo top, caption below ---------- */
.bi-ad--social { background: var(--ah-white); overflow: hidden; }
.bi-ad__socBody {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: var(--ah-lilac) !important;
}
.bi-ad__socBody::after { display: none; }
.bi-ad__socBody .ah-photo { z-index: 0; }
.bi-ad__socBody .bi-ad__socK,
.bi-ad__socBody .bi-ad__socP,
.bi-ad__socBody .bi-ad__socCta,
.bi-ad__socBody .ah-finally {
  position: relative;
  z-index: 2;
  color: var(--ah-white);
  text-shadow: 0 1px 12px rgba(9,9,66,0.35);
}
.bi-ad__socBody .bi-ad__socP { color: rgba(255,255,255,0.92); }
.bi-ad__socBody .ah-finally { color: var(--ah-orange); margin: 12px 12px 0; text-shadow: none; }
.bi-ad__socBody .bi-ad__socK { margin: 4px 12px 0; font-size: 18px; }
.bi-ad__socBody .bi-ad__socP { margin: 4px 12px 0; }
.bi-ad__socBody .bi-ad__socCta { margin: auto 12px 12px; color: var(--ah-white); }

/* ---------- Banner 300×250 — photo + deep blue bar ---------- */
.bi-ad--display {
  padding: 0 !important;
  overflow: hidden;
  background: var(--ah-deep);
}
.bi-ad--display::before { z-index: 3; }
.bi-ad--display .ah-photo { z-index: 0; height: 55%; top: 0; bottom: auto; }
.bi-ad__dispBar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: var(--ah-deep);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.bi-ad--display .bi-ad__dispLogo,
.bi-ad--display .bi-ad__dispHead,
.bi-ad--display .bi-ad__dispCta { position: relative; }
.bi-ad--display .bi-ad__dispHead { font-size: 14px; line-height: 1.04; }
.bi-ad__dispFinally {
  position: absolute;
  top: 8px; left: 10px;
  z-index: 3;
  background: var(--ah-orange);
  color: var(--ah-white);
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
}

/* ---------- DOOH — exact toolkit p.16 poster ---------- */
.bi-ad--ooh {
  padding: 14px 16px;
}
.bi-ad__oohUrl {
  position: relative;
  font-family: var(--ah-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ah-deep);
  align-self: flex-end;
  z-index: 2;
}
.bi-ad__oohBig {
  position: relative;
  z-index: 2;
}
.bi-ad__oohSmall {
  position: relative;
  z-index: 2;
  align-self: flex-start;
}

/* ---------- Site hero — photo right, copy left ---------- */
.bi-ad--site {
  padding: 0 !important;
  overflow: hidden;
}
.bi-ad__siteNav { position: relative; z-index: 2; }
.bi-ad__siteHero {
  position: relative;
  padding: 12px;
  overflow: hidden;
}
.bi-ad__siteHero .ah-photo {
  left: 55%;
  right: 0;
  top: 0;
  bottom: 0;
  inset: auto;
  width: 45%;
  height: 100%;
}

/* ---------- Reel tiles — photo-backed ---------- */
.bi-reel__assetBody--ctv,
.bi-reel__assetBody--social,
.bi-reel__assetBody--disp,
.bi-reel__assetBody--ooh,
.bi-reel__assetBody--site {
  position: relative;
  overflow: hidden;
}
.bi-reel__assetBody .ah-photo { z-index: 0; }
.bi-reel__assetBody--ctv .ah-photo::after,
.bi-reel__assetBody--social .ah-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,9,66,0) 40%, rgba(9,9,66,0.75) 100%);
}
.bi-reel__assetBody--ctv > *,
.bi-reel__assetBody--social > *,
.bi-reel__assetBody--disp > *,
.bi-reel__assetBody--ooh > *,
.bi-reel__assetBody--site > * {
  position: relative;
  z-index: 2;
}
.bi-reel__assetBody--ctv,
.bi-reel__assetBody--social { color: var(--ah-white); }
.bi-reel__assetBody--ctv .bi-reel__assetLogo,
.bi-reel__assetBody--social .bi-reel__socN { color: var(--ah-orange); }
.bi-reel__assetBody--ctv .bi-reel__assetHead2,
.bi-reel__assetBody--social .bi-reel__socK { color: var(--ah-white); }
.bi-reel__assetBody--social .bi-reel__socP { color: rgba(255,255,255,0.9); }

/* ============================================================
   Homepage section-width harmonization — every section on the
   home page shares the same inner max-width and gutters, so the
   page reads as one coherent vertical rhythm.
   ============================================================ */
.home .gene-hero__inner,
.home .gw-awards__inner,
.home .gw-clients__inner,
.home .gw-insights__inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(24px, 5vw, 64px) !important;
  padding-right: clamp(24px, 5vw, 64px) !important;
  box-sizing: border-box !important;
}

/* Neutralize residual horizontal padding on the outer section
   wrappers so the inner is what defines the measure. */
.home .gene-hero,
.home .gw-awards,
.home .gw-clients,
.home .gw-insights {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   WORK ARCHIVE · title + tagline live under the photo, always.
   Replaces the theme's hover-overlay pattern with a clean
   editorial card: image on top, title + catchphrase below.
   ============================================================ */
.page-id-work .portfolio-item,
.post-type-archive-portfolio .portfolio-item,
body[class*="work"] .portfolio-item {
  background: transparent !important;
}
.portfolio-item .image-holder { overflow: hidden; border-radius: 10px; }
.portfolio-item .image-holder .overlay { display: none !important; }

/* Lift overlay-details out of the image and pin it underneath */
.portfolio-item .overlay-details {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  padding: 20px 2px 0 !important;
  color: #0a0a0a !important;
  pointer-events: auto !important;
}
.portfolio-item .overlay-details .heading { display: block !important; }
.portfolio-item .overlay-details h4.title,
.portfolio-item .overlay-details h4.title a {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #0a0a0a !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.portfolio-item .portfolio-catchphrase {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(10, 10, 10, 0.72) !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  max-width: 56ch;
}
/* Hide the old hover-era "Show project" + category chips — the
   whole card is already a link to the project. */
.portfolio-item .show-project,
.portfolio-item .show-project-link,
.portfolio-item .category-holder { display: none !important; }

/* ============================================================
   INSIGHTS · make tag pills, date and read-length readable in
   black against the light card surface.
   ============================================================ */
.gw-archive__tag,
.gw-archive__tag a {
  color: #0a0a0a !important;
  background: rgba(10, 10, 10, 0.06) !important;
  border-color: rgba(10, 10, 10, 0.15) !important;
}
.gw-archive__meta,
.gw-archive__meta span,
.gw-archive__meta a {
  color: #0a0a0a !important;
  opacity: 1 !important;
}

/* ============================================================
   FUTURISTIC HERO · GENETIC GLYPHS + RICH SCROLL INTERACTIONS
   ============================================================ */

/* Scroll progress rail */
.gene-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 9999; pointer-events: none;
  background: rgba(10,10,10,0.06);
}
.gene-progress__fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #9ef0f0 0%, #0a0a0a 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.05s linear;
}

/* Hero container is now a 3D parallax stage */
.gene-hero {
  position: relative;
  isolation: isolate;
  perspective: 1400px;
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.gene-hero__inner { position: relative; z-index: 2; width: 100%; }

/* Status chip above the headline */
.gene-hero__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(10,10,10,0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #0a0a0a;
  margin-bottom: 28px;
  animation: geneChipIn 800ms cubic-bezier(.2,.7,.2,1) both;
}
.gene-hero__chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9ef0f0;
  box-shadow: 0 0 0 4px rgba(158,240,240,0.35);
  animation: genePulse 1.6s ease-in-out infinite;
}
.gene-hero__chip-seq {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
  border-left: 1px solid rgba(10,10,10,0.15);
}
@keyframes geneChipIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes genePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(158,240,240,0.35); }
  50%     { box-shadow: 0 0 0 10px rgba(158,240,240,0); }
}

/* Hero CTA magnetic smoothing */
.gene-hero__cta[data-magnetic] {
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), background 200ms, color 200ms;
  will-change: transform;
}

/* -----------------  GENETIC GLYPH LAYER  ----------------- */
.gene-glyphs {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  color: #0a0a0a;
  z-index: 1;
  transform-style: preserve-3d;
}
.gene-glyph {
  position: absolute;
  transform-origin: center;
  will-change: transform;
  transition: transform 160ms cubic-bezier(.2,.7,.2,1);
}
.gene-glyph--dots    { top: -40px; left: -40px; width: 520px; height: 520px; opacity: 0.7; }
.gene-glyph--helix   { top: 6%; right: 4%; width: 120px; height: 260px; color: #0a0a0a; animation: geneHelixSpin 18s linear infinite; }
.gene-glyph--chromo  { top: 18%; left: 8%; width: 90px; height: 90px; color: #9ef0f0; filter: drop-shadow(0 0 12px rgba(158,240,240,0.6)); animation: geneFloat 9s ease-in-out infinite; }
.gene-glyph--orbit   { top: 40%; right: 10%; width: 220px; height: 220px; color: #0a0a0a; animation: geneOrbitSpin 24s linear infinite; }
.gene-glyph--orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gene-glyph--pulse   { bottom: 14%; left: -40px; width: 520px; height: 60px; color: #9ef0f0; filter: drop-shadow(0 0 8px rgba(158,240,240,0.45)); }
.gene-glyph--pulse path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: genePulseDraw 4s ease-in-out infinite; }
.gene-glyph--plus    { bottom: 22%; right: 18%; width: 44px; height: 44px; color: #0a0a0a; animation: geneSpin 14s linear infinite; }
.gene-glyph--star    { top: 12%; left: 38%; width: 34px; height: 34px; color: #0a0a0a; animation: geneSpin 10s linear infinite reverse; }

/* Nucleotide orbs */
.gene-orb {
  position: absolute;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 400;
  background: #0a0a0a; color: #F2F2F2;
  box-shadow: 0 8px 24px rgba(10,10,10,0.18);
}
.gene-orb--a { top: 0;   left: 50%; transform: translate(-50%, 0); background: #0a0a0a; color: #9ef0f0; }
.gene-orb--t { top: 50%; right: 0;  transform: translate(0, -50%); background: #9ef0f0; color: #0a0a0a; }
.gene-orb--c { bottom: 0; left: 50%; transform: translate(-50%, 0); background: #0a0a0a; color: #F2F2F2; }
.gene-orb--g { top: 50%;  left: 0;   transform: translate(0, -50%); background: #F2F2F2; color: #0a0a0a; }

@keyframes geneHelixSpin  { to { transform: rotate(360deg); } }
@keyframes geneOrbitSpin  { to { transform: rotate(-360deg); } }
@keyframes geneSpin       { to { transform: rotate(360deg); } }
@keyframes geneFloat      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes genePulseDraw  {
  0%   { stroke-dashoffset: 900; opacity: 0.2; }
  50%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -900; opacity: 0.2; }
}

/* Ticker row below the hero CTAs */
.gene-hero__ticker {
  margin-top: 72px;
  display: flex; align-items: center; gap: 18px;
  border-top: 1px solid rgba(10,10,10,0.12);
  padding-top: 18px;
  overflow: hidden;
}
.gene-hero__ticker-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; color: rgba(10,10,10,0.55);
  white-space: nowrap;
}
.gene-hero__ticker-track {
  display: inline-flex; align-items: center; gap: 22px;
  white-space: nowrap;
  animation: geneTicker 38s linear infinite;
  font-family: 'Geist', sans-serif; font-size: 13px;
  letter-spacing: 0.18em; color: #0a0a0a;
}
.gene-hero__ticker-track i {
  font-style: normal; color: #9ef0f0;
  text-shadow: 0 0 6px rgba(158,240,240,0.6);
}
@keyframes geneTicker { to { transform: translateX(-50%); } }

/* ================  ATCG SEQUENCER BAND  ================= */
.gene-seqband {
  position: relative;
  background: #0a0a0a; color: #F2F2F2;
  padding: 14vh 0;
  overflow: hidden;
  --seq-p: 0;
}
.gene-seqband::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 400px at calc(var(--seq-p)*100%) 50%, rgba(158,240,240, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(158,240,240,0) 0%, rgba(158,240,240,0.04) 100%);
  pointer-events: none;
}
.gene-seqband__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}
.gene-seqband__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.gene-seqband__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.2em; color: #9ef0f0; opacity: 0.85;
}
.gene-seqband__title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #F2F2F2;
  max-width: 22ch;
}
.gene-seqband__track {
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  padding: 24px 0;
  border-top: 1px dashed rgba(242,242,242,0.18);
  border-bottom: 1px dashed rgba(242,242,242,0.18);
}
.gene-seqband__bp {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.2;
  color: rgba(242,242,242,0.22);
  transition: color 200ms, text-shadow 200ms, transform 260ms cubic-bezier(.2,.7,.2,1);
}
.gene-seqband__bp.is-lit {
  color: #9ef0f0;
  text-shadow: 0 0 8px rgba(158,240,240,0.55);
  transform: translateY(-2px);
}
.gene-seqband__foot {
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: rgba(242,242,242,0.55);
  margin-top: 18px;
}
.gene-seqband__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9ef0f0; box-shadow: 0 0 0 4px rgba(158,240,240,0.3);
  animation: genePulse 1.4s ease-in-out infinite;
}

@media (max-width: 900px) {
  .gene-glyph--helix, .gene-glyph--orbit, .gene-glyph--chromo { opacity: 0.35; }
  .gene-glyph--plus, .gene-glyph--star { display: none; }
  .gene-seqband__track { grid-template-columns: repeat(32, 1fr); }
  .gene-seqband__track .gene-seqband__bp:nth-child(n+33) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gene-glyph, .gene-hero__ticker-track, .gene-seqband__pulse,
  .gene-hero__chip-dot { animation: none !important; }
}

/* ============================================================
   SITE CONTAINER · single source of truth
   ------------------------------------------------------------
   Every section on the site is centred to the same measure.
     • --gene-container-max:    1280px
     • --gene-container-gutter: clamp(24px, 5vw, 64px)
   Outer sections get horizontal padding zeroed so gutters are
   owned exclusively by __inner. Vertical padding is untouched.
   ============================================================ */
:root {
  --gene-container-max: 1280px;
  --gene-container-gutter: clamp(24px, 5vw, 64px);
}

/* Inner container for every section (the centred column) */
.gene-page-hero__inner,
.gene-hero__inner,
.gene-about__inner,
.gene-about__hero-inner,
.gene-case-hero__inner,
.gene-case-cta__inner,
.gene-seqband__inner,
.gene-footer__inner,
.gw-archive__inner,
.gw-awards__inner,
.gw-clients__inner,
.gw-insights__inner,
.bi-hero__inner,
.bi-intro__inner,
.bi-platform__inner,
.bi-reel__inner,
.bi-health__inner,
.bi-cta__inner,
.bd-thesis__inner,
.bd-chapter__inner,
.bd-tech__inner {
  max-width: var(--gene-container-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gene-container-gutter) !important;
  padding-right: var(--gene-container-gutter) !important;
  box-sizing: border-box !important;
}

/* Outer section wrappers — keep vertical padding, zero horizontal */
.gene-page-hero { padding-left: 0 !important; padding-right: 0 !important; padding-top: 14vh !important; padding-bottom: 8vh !important; }
.gene-hero      { padding-left: 0 !important; padding-right: 0 !important; }
.gene-about     { padding-left: 0 !important; padding-right: 0 !important; }
.gene-case-hero { padding-left: 0 !important; padding-right: 0 !important; padding-top: 16vh !important; padding-bottom: 6vh !important; }
.gene-case-cta  { padding-left: 0 !important; padding-right: 0 !important; }
.gene-seqband   { padding-left: 0 !important; padding-right: 0 !important; }
.gene-footer    { padding-left: 0 !important; padding-right: 0 !important; }
.gw-archive, .gw-awards, .gw-clients, .gw-insights { padding-left: 0 !important; padding-right: 0 !important; }
.bi-hero      { padding: 14vh 0 20vh !important; }
.bi-intro     { padding: 10vh 0 !important; }
.bi-platform  { padding: 14vh 0 !important; }
.bi-reel      { padding: 10vh 0 !important; }
.bi-health    { padding: 14vh 0 !important; }
.bi-cta       { padding: 14vh 0 !important; }
.bd-thesis    { padding: 16vh 0 !important; }
.bd-chapter   { padding: 18vh 0 !important; }
.bd-tech      { padding: 14vh 0 !important; }

/* Any nested __inner that used to carry its own 5vw / 48px / 6vw
   horizontal padding — reset to the canonical gutter. */
.gene-about__inner,
.gene-about__hero-inner { padding-left: var(--gene-container-gutter) !important; padding-right: var(--gene-container-gutter) !important; }

/* ============================================================
   FOOTER · keep link colours light on dark (no black-on-black)
   ============================================================ */
.gene-footer a,
.gene-footer a:link,
.gene-footer a:visited { color: rgba(242, 242, 242, 0.72); }
.gene-footer a:hover,
.gene-footer a:focus   { color: #F2F2F2 !important; }
.gene-footer .gene-footer__email:hover { color: #F2F2F2 !important; }
.gene-footer .gene-footer__top-link:hover { color: #0a0a0a !important; }  /* pill inverts on hover */
.gene-footer .gene-footer__cta:hover       { color: #ffffff !important; }  /* dark CTA pill */
.gene-footer,
.gene-footer p,
.gene-footer span,
.gene-footer li,
.gene-footer h1,
.gene-footer h2,
.gene-footer h3 { color: inherit; }
.gene-footer__h,
.gene-footer__h em { color: #F2F2F2 !important; }
.gene-footer__sub { color: rgba(242, 242, 242, 0.62) !important; }
.gene-footer__eyebrow,
.gene-footer__label { color: rgba(242, 242, 242, 0.55) !important; }
.gene-footer__legal,
.gene-footer__bottom,
.gene-footer__status { color: rgba(242, 242, 242, 0.55) !important; }
/* Markets col: plain-text li items should match linked items in other columns */
.gene-footer .gene-footer__col li { color: rgba(242, 242, 242, 0.72) !important; }

/* ============================================================
   ABOUT · 4-up Values grid
   ============================================================ */
.gene-values__list--four { grid-template-columns: repeat(4, 1fr); }
.gene-values__list--four li { min-height: 320px; }
.gene-values__list--four .gene-values__lede {
  color: rgba(242,242,242,0.92) !important;
  font-size: 1.02em !important;
  margin-bottom: 12px !important;
}
@media (max-width: 960px) {
  .gene-values__list--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .gene-values__list--four { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT · Team grid
   ============================================================ */
.gene-team {
  background: #F2F2F2;
  padding: 14vh 0;
  color: #0a0a0a;
  border-top: 1px solid rgba(10,10,10,0.06);
}
.gene-team__grid {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 20px;
  overflow: hidden;
}
.gene-team__card {
  background: #F2F2F2;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  transition: background 0.4s ease;
}
.gene-team__card:last-child { border-bottom: none; }
.gene-team__card:nth-child(even) { flex-direction: row-reverse; }
.gene-team__card:hover { background: #fff; }
.gene-team__portrait {
  flex: 0 0 420px;
  min-height: 460px;
  background:
    radial-gradient(120% 120% at 25% 20%, #f6f6f6 0%, #d4d4d4 45%, #7a7a7a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.gene-team__portrait--mono-1 { background: radial-gradient(120% 120% at 25% 20%, #fafafa 0%, #cfcfcf 45%, #5f5f5f 100%); }
.gene-team__portrait--mono-2 { background: radial-gradient(120% 120% at 25% 20%, #f2f2f2 0%, #bcbcbc 45%, #4a4a4a 100%); }
.gene-team__portrait--mono-3 { background: radial-gradient(120% 120% at 25% 20%, #ffffff 0%, #d9d9d9 45%, #6a6a6a 100%); }
.gene-team__portrait--mono-4 { background: radial-gradient(120% 120% at 25% 20%, #ededed 0%, #a8a8a8 45%, #2e2e2e 100%); }
.gene-team__portrait::after {
  content: none;
  display: none;
}
.gene-team__initials {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 5em;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 24px rgba(0,0,0,0.2);
}
.gene-team__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 2;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gene-team__card:hover .gene-team__photo { transform: scale(1.04); }
.gene-team__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 60px 72px;
  justify-content: center;
}
.gene-team__role {
  font-family: 'Geist', sans-serif;
  font-size: 0.74em;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
}
.gene-team__name {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 2.4em;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0;
}
.gene-team__card p {
  font-family: 'Geist', sans-serif;
  font-size: 0.97em;
  line-height: 1.65;
  color: rgba(10,10,10,0.68);
  margin: 0;
  max-width: 52ch;
}
.gene-team__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 20px;
  font-family: 'Geist', sans-serif;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: #0a0a0a;
  text-decoration: none;
  border-top: 1px solid rgba(10,10,10,0.12);
  transition: color 0.3s ease;
  align-self: flex-start;
}
.gene-team__link em { font-style: normal; transition: transform 0.3s ease; }
.gene-team__link:hover { color: #0a8a8a; }
.gene-team__link:hover em { transform: translate(2px, -2px); }
@media (max-width: 1024px) {
  .gene-team__portrait { flex: 0 0 340px; min-height: 380px; }
  .gene-team__body { padding: 48px 52px; }
}
@media (max-width: 768px) {
  .gene-team__card,
  .gene-team__card:nth-child(even) { flex-direction: column; }
  .gene-team__portrait { flex: none; width: 100%; min-height: 320px; }
  .gene-team__body { padding: 40px 32px; }
  .gene-team__name { font-size: 1.8em; }
}

/* ============================================================
   ABOUT · Collective (node map)
   ============================================================ */
.gene-collective {
  background: #F2F2F2;
  padding: 14vh 0;
  color: #0a0a0a;
  border-top: 1px solid rgba(10,10,10,0.06);
}
.gene-collective__head {
  max-width: 780px;
}
.gene-collective__lead {
  font-family: 'Geist', sans-serif;
  font-size: 1.1em;
  line-height: 1.6;
  color: rgba(10,10,10,0.78);
  margin: 20px 0 0;
  max-width: 70ch;
}
.gene-collective__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 72px;
  background: rgba(10,10,10,0.1);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 20px;
  overflow: hidden;
}
.gene-collective__stat {
  background: #F2F2F2;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.4s ease;
}
.gene-collective__stat:hover { background: #fff; }
.gene-collective__stat-n {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}
.gene-collective__stat-l {
  font-family: 'Geist', sans-serif;
  font-size: 0.9em;
  line-height: 1.45;
  color: rgba(10,10,10,0.65);
  letter-spacing: 0.01em;
}
.gene-collective__pillsWrap { margin-top: 64px; }
.gene-collective__pillsLabel {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  margin-bottom: 20px;
}
.gene-collective__pillsWrap {
  text-align: center;
}
.gene-collective__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.gene-collective__pills li {
  font-family: 'Geist', sans-serif;
  font-size: 0.92em;
  line-height: 1;
  color: #0a0a0a;
  background: transparent;
  border: 1px solid rgba(10,10,10,0.28);
  border-radius: 999px;
  padding: 12px 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.gene-collective__pills li:hover {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #F2F2F2;
}
@media (max-width: 820px) {
  .gene-collective__stats { grid-template-columns: 1fr; }
}

/* ============================================================
   CLEAN BLOG POST (gw-post) — rebuilt from WP markup
   ============================================================ */
.gw-post {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: 14vh;
  background: #F2F2F2;
  color: #0a0a0a;
}
.gw-post__hero { margin-bottom: 8vh; }
.gw-post__hero-inner { max-width: 860px; }
.gw-post__back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist', sans-serif; font-size: 0.95em;
  color: rgba(10,10,10,0.65); text-decoration: none;
  margin-bottom: 4vh;
}
.gw-post__back:hover { color: #0a0a0a; }
.gw-post__eyebrow {
  display: inline-block; font-family: 'Geist', sans-serif;
  font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(10,10,10,0.55); margin-bottom: 2vh;
}
.gw-post__title {
  font-family: 'Geist-Light','Geist', sans-serif;
  font-weight: 300; font-size: clamp(2.2em, 5.2vw, 4em);
  line-height: 1.05; letter-spacing: -0.025em;
  color: #0a0a0a; margin: 0 0 3vh;
}
.gw-post__meta {
  color: rgba(10,10,10,0.55);
  font-size: 0.95em; margin: 0;
}
.gw-post__cover {
  max-width: 1280px; margin: 6vh auto 0;
  padding-inline: var(--gene-container-gutter, clamp(24px, 5vw, 64px));
}
.gw-post__cover img {
  width: 100%; border-radius: 18px; display: block;
  aspect-ratio: 16/9; object-fit: cover;
}
.gw-post__body {
  max-width: 780px !important;
  font-family: 'Geist', sans-serif;
  font-size: 1.1em; line-height: 1.75; color: #1a1a1a;
}
.gw-post__body > * + * { margin-top: 1.6em; }
.gw-post__body p { margin: 0 0 1.6em; }
.gw-post__body h2, .gw-post__body h3, .gw-post__body h4 {
  font-family: 'Geist', sans-serif; color: #0a0a0a;
  letter-spacing: -0.025em; margin: 2.6em 0 1em;
  line-height: 1.2;
}
.gw-post__body h2 { font-size: 1.8em; }
.gw-post__body h3 { font-size: 1.4em; }
.gw-post__body h4 { font-size: 1.1em; }
.gw-post__body a {
  color: #0a0a0a;
  border-bottom: 2px solid #9ef0f0;
  text-decoration: none;
  transition: background 0.2s;
}
.gw-post__body a:hover { background: #9ef0f0; }
.gw-post__body ul, .gw-post__body ol { padding-left: 1.3em; margin: 0 0 1.6em; }
.gw-post__body li { margin-bottom: 0.6em; }
.gw-post__body img { max-width: 100%; height: auto; border-radius: 12px; }
.gw-post__body blockquote {
  margin: 3em 0; padding: 1.6em 2em;
  border-left: 4px solid #9ef0f0;
  background: #fff; border-radius: 6px;
  font-style: italic; font-size: 1.15em;
}

/* ============================================================
   CLEAN CASE STUDY (gw-case) — rebuilt from WP markup
   ============================================================ */
.gw-case {
  padding-top: clamp(16vh, 18vh, 22vh);
  padding-bottom: 0;
  background: #F2F2F2; color: #0a0a0a;
}
.gw-case__hero { margin-bottom: 8vh; }
.gw-case__hero-inner { max-width: 980px; }
.gw-case__back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist', sans-serif; font-size: 0.95em;
  color: rgba(10,10,10,0.65); text-decoration: none;
  margin-bottom: 4vh;
}
.gw-case__back:hover { color: #0a0a0a; }
.gw-case__eyebrow {
  display: inline-block; font-family: 'Geist', sans-serif;
  font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(10,10,10,0.55); margin-bottom: 2vh;
}
.gw-case__title {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(2.6em, 7vw, 6.2em);
  line-height: 0.98; letter-spacing: -0.035em;
  color: #0a0a0a; margin: 0 0 3vh;
}
.gw-case__sub {
  font-size: 1.15em; line-height: 1.5; max-width: 760px;
  color: rgba(10,10,10,0.8); margin: 0;
}
.gw-case__cover {
  max-width: 1280px; margin: 6vh auto 0;
  padding-inline: var(--gene-container-gutter, clamp(24px, 5vw, 64px));
}
.gw-case__cover img {
  width: 100%; border-radius: 18px; display: block;
  aspect-ratio: 16/9; object-fit: cover;
}
.gw-case__body {
  max-width: 860px !important;
  font-family: 'Geist', sans-serif; font-size: 1.05em; line-height: 1.7; color: #1a1a1a;
  padding-top: 8vh; padding-bottom: 8vh;
}
.gw-case__body h5 {
  font-family: 'Geist', sans-serif; font-size: 0.78em;
  font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(10,10,10,0.55); margin: 3em 0 1em;
}
.gw-case__body h3, .gw-case__body h4 {
  font-family: 'Geist', sans-serif;
  color: #0a0a0a; margin: 2em 0 0.8em; letter-spacing: -0.025em;
}
.gw-case__body p { margin: 0 0 1.4em; }
.gw-case__body img { max-width: 100%; height: auto; display: block; border-radius: 12px; margin: 2em auto; }
.gw-case__cta { background: #0a0a0a; color: #F2F2F2; padding: 14vh 0; }
.gw-case__cta-inner { max-width: 960px; text-align: center; }
.gw-case__cta h2 {
  font-family: 'Geist-Light','Geist', sans-serif; font-weight: 300;
  font-size: clamp(1.8em, 4.5vw, 3.4em); line-height: 1.1; letter-spacing: -0.025em;
  color: #F2F2F2; margin: 0 0 5vh;
}
.gw-case__cta h2 em {
  font-family: 'Merriweather', serif; font-style: italic; font-weight: 400; color: #9ef0f0;
}
.gw-case__cta-actions { display: inline-flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   GENE BUTTONS
   ============================================================ */
.gene-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px; border-radius: 999px;
  font-family: 'Geist', sans-serif; font-size: 1em; font-weight: 400;
  text-decoration: none; line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.gene-btn--primary { background: #F2F2F2; color: #0a0a0a; }
.gene-btn--primary:hover { background: #9ef0f0; transform: translateY(-2px); }
.gene-btn--ghost { background: transparent; color: #F2F2F2; border: 1px solid rgba(236,230,219,0.4); }
.gene-btn--ghost:hover { background: rgba(236,230,219,0.08); }

/* Any button sitting on a dark surface gets a crisp white ring on hover */
.gene-hero--dark .gene-btn:hover,
.gene-section--dark .gene-btn:hover,
.gene-cta--dark .gene-btn:hover,
.bd-chapter .gene-btn:hover,
.gw-case__cta .gene-btn:hover,
.gene-btn--dark:hover,
.gene-btn--white:hover {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}

/* ---- a.gw-archive__card direct-anchor variant ---- */
a.gw-archive__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
a.gw-archive__card .gw-archive__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F2F2F2;
}
a.gw-archive__card .gw-archive__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
a.gw-archive__card:hover .gw-archive__img img { transform: scale(1.04); }
a.gw-archive__card .gw-archive__meta-row {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
a.gw-archive__card .gw-archive__title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 400; letter-spacing: -0.01em;
  color: #0a0a0a; margin: 0;
}
a.gw-archive__card .gw-archive__tag {
  font-size: 0.85em; color: rgba(10,10,10,0.55); margin: 0;
}

.gw-archive--work { padding: clamp(18vh,20vh,26vh) 0 12vh; background: #F2F2F2; }
.gw-archive--work .gw-archive__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .gw-archive--work .gw-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gw-archive--work .gw-archive__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GENE-PAGE main padding — ensure the JS-injected content
   (nav/hero/footer) has proper top spacing above our <main>
   ============================================================ */
.gene-main { min-height: 60vh; }

/* ============================================================
   HOME — FEATURED WORK (hover-to-play video case studies)
   ============================================================ */
.gw-featured {
  padding: clamp(14vh, 16vh, 20vh) 0 12vh;
  background: #F2F2F2;
  color: #0a0a0a;
}
.gw-featured__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 8vh;
  max-width: 820px;
}
.gw-featured__eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
}
.gw-featured__title {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.2em, 5vw, 4em);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  color: #0a0a0a;
}
.gw-featured__title em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
  color: #0a0a0a;
}

.gw-featured__card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0a;
  transition: transform .4s ease, box-shadow .4s ease;
  box-shadow: 0 1px 0 rgba(10,10,10,0.05);
}
.gw-featured__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(10,10,10,0.12);
}

/* Hero card: constrained media so two fit a standard viewport */
.gw-featured__card--hero {
  margin-bottom: clamp(16px, 2vw, 28px);
}
.gw-featured__card--hero .gw-featured__media {
  aspect-ratio: 16 / 10;
}

/* Featured grid on the Work page — full-width editorial cards, one per row. */
.gw-featured--work .gw-featured__inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 36px) !important;
}
.gw-featured--work .gw-featured__card--hero {
  grid-column: 1 / -1 !important;
}
.gw-featured--work .gw-featured__more {
  grid-column: 1 / -1;
}

/* "There's a lot more…" CTA card — dark editorial block that closes the grid */
.gw-featured__more {
  position: relative;
  background: #0a0a0a;
  color: #F2F2F2;
  border-radius: 18px;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas:
    "hed body"
    "hed cta";
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: 24px;
  align-items: start;
  overflow: hidden;
  isolation: isolate;
}
.gw-featured__more::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 55%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center, rgba(158, 240, 240, 0.22), transparent 62%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
.gw-featured__more-hed {
  grid-area: hed;
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2em, 4.2vw, 3.4em);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #F2F2F2;
  margin: 0;
  max-width: 18ch;
}
.gw-featured__more-body {
  grid-area: body;
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(1.02em, 1.15vw, 1.15em);
  line-height: 1.6;
  color: rgba(236, 230, 219, 0.72);
  margin: 0;
  max-width: 56ch;
}
.gw-featured__more > .gene-btn {
  grid-area: cta;
  justify-self: start;
  align-self: start;
  margin-top: 8px;
}
.gw-featured__more .gene-btn--white {
  background: #ffffff;
  color: #0a0a0a;
}
.gw-featured__more .gene-btn--white em {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.gw-featured__more .gene-btn--white:hover {
  background: #ffffff;
  color: #0a0a0a;
}
.gw-featured__more .gene-btn--white:hover em {
  transform: translateX(4px);
}

@media (max-width: 820px) {
  .gw-featured__more {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hed"
      "body"
      "cta";
  }
  .gw-featured__more-hed { max-width: none; }
}
@media (max-width: 640px) {
  .gw-featured--work .gw-featured__inner {
    grid-template-columns: 1fr !important;
  }
  .gw-featured--work .gw-featured__card--hero .gw-featured__media {
    aspect-ratio: 16 / 10;
  }
}

/* Portrait-row cards: white background so no dark card bg shows below shorter meta */
.gw-featured__row .gw-featured__card { background: #ffffff; }

/* Row of portrait cards */
.gw-featured__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 900px) {
  .gw-featured__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gw-featured__row { grid-template-columns: 1fr; }
}

.gw-featured__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
}
.gw-featured__media--portrait { aspect-ratio: 12 / 13.6; }
.gw-featured__video,
.gw-featured__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gw-featured__video { z-index: 0; }
.gw-featured__poster {
  z-index: 1;
  transition: opacity .35s ease, transform .6s ease;
}
.gw-featured__card:hover .gw-featured__poster {
  transform: scale(1.03);
}

.gw-featured__meta {
  background: #ffffff;
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gw-featured__name {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 1.5vw, 26px);
  letter-spacing: -0.015em;
  color: #0a0a0a;
  margin: 0;
}
.gw-featured__tagline {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 1em;
  color: rgba(10,10,10,0.82);
  margin: 0;
}
.gw-featured__disciplines {
  font-family: 'Geist', sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.48);
  margin: 6px 0 0;
}

.gw-featured__footer {
  margin-top: 8vh;
  display: flex;
  justify-content: center;
}
.gene-btn--dark { background: #0a0a0a; color: #F2F2F2; }
.gene-btn--dark:hover { background: #9ef0f0; color: #0a0a0a; transform: translateY(-2px); }

/* ============================================================
   HOME HERO (baked in HTML, no JS anchor)
   ============================================================ */
.gene-page--home .gene-hero {
  padding: clamp(22vh, 26vh, 34vh) 0 clamp(10vh, 12vh, 16vh);
  background: #F2F2F2;
  color: #0a0a0a;
}
.gene-page--home .gene-hero__inner { max-width: 1280px; }
.gene-page--home .gene-hero__headline {
  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 4vh;
  max-width: 18ch;
  color: #0a0a0a;
}
.gene-page--home .gene-hero__headline em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
  color: #0a0a0a;
}
.gene-page--home .gene-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: none;
  margin: 0 0 5vh;
}
.gene-page--home .gene-hero__ctas {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}
.gene-page--home .gene-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1em;
  text-decoration: none;
  transition: transform .2s, background .2s, color .2s;
  line-height: 1;
}
.gene-page--home .gene-hero__cta--primary {
  background: #0a0a0a;
  color: #F2F2F2;
}
.gene-page--home .gene-hero__cta--primary:hover {
  background: #9ef0f0;
  color: #0a0a0a;
  transform: translateY(-2px);
}
.gene-page--home .gene-hero__cta--ghost {
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(10,10,10,0.2);
}
.gene-page--home .gene-hero__cta--ghost:hover {
  border-color: #0a0a0a;
  background: rgba(10,10,10,0.04);
}

/* ============================================================
   UNIFIED SECTION SPACING  (match About page rhythm)
   Every top-level section on every page uses the same vertical
   rhythm: 14vh top · 10vh bottom. No more off-by-section padding.
   ============================================================ */
.gene-hero,
.gene-hero--home,
.gw-featured,
.gw-insights,
.gw-clients,
.gw-awards,
.gw-archive,
.gw-archive--work,
.gw-archive--news,
.gw-post,
.gw-case,
.gene-about__hero,
.gene-about__manifesto,
.gene-about__section,
.gene-case-hero,
.gene-case-cta {
  padding-top: var(--gene-section-pad-top, 14vh) !important;
  padding-bottom: var(--gene-section-pad-bottom, 10vh) !important;
}

/* Hero pages get extra top-pad so fixed nav doesn't clip headline */
.gene-page--home .gene-hero,
.gene-page--post .gw-post,
.gene-page--case .gw-case,
.gene-about__hero,
.gene-case-hero {
  padding-top: clamp(18vh, 20vh, 24vh) !important;
}

/* Everything inside a section shares the same inner container */
.gene-hero__inner,
.gw-featured__inner,
.gw-insights__inner,
.gw-clients__inner,
.gw-awards__inner,
.gw-archive__inner,
.gw-post__hero-inner,
.gw-post__body,
.gw-case__hero-inner,
.gw-case__body,
.gw-case__cta-inner,
.gene-about__inner,
.gene-about__hero-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 5vw !important;
  padding-right: 5vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Cover images span wider than body copy (same as About hero-media) */
.gw-post__cover,
.gw-case__cover {
  max-width: 1440px !important;
  margin: 7vh auto 0 !important;
  padding: 0 5vw !important;
}

/* Work archive: 2-column (matches news/insights) */
.gw-archive--work .gw-archive__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 720px) {
  .gw-archive--work .gw-archive__grid {
    grid-template-columns: 1fr !important;
  }
}

/* Featured work grid on home: three-wide on the 2nd row */
.gw-featured__row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 900px) {
  .gw-featured__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gw-featured__row { grid-template-columns: 1fr; }
}

/* ============================================================
   FINAL SPACING OVERRIDES — uniform hero top & section bottoms
   ============================================================ */

/* All top-of-page heros get the SAME top padding — enough to
   clear the fixed nav, never more. */
.gene-page--home .gene-hero,
.gene-about__hero,
.gene-case-hero,
.gw-post,
.gw-case,
.gw-archive--work,
.gw-archive--news,
.bi-hero,
.bd-thesis {
  padding-top: 14vh !important;
  padding-bottom: 8vh !important;
}

/* Home hero CTA block should not push 10vh of whitespace below it */
.gene-page--home .gene-hero { padding-bottom: 4vh !important; }

/* Featured work follows hero directly — no double-section padding */
.gene-page--home .gw-featured { padding-top: 6vh !important; }

/* Clients band: tighter vertical rhythm, bigger logos */
.gw-clients { padding-top: 12vh !important; padding-bottom: 8vh !important; }
.gw-clients__logos {
  padding: clamp(20px, 2.2vw, 32px) 0 !important;
  gap: clamp(16px, 2vw, 28px) !important;
}
.gw-clients__logos > li {
  min-height: 130px !important;
  padding: 8px !important;
}
.gw-clients__logos img {
  max-height: 180px !important;
  max-width: 90% !important;
}
@media (max-width: 900px) {
  .gw-clients__logos > li { min-height: 110px !important; }
  .gw-clients__logos img { max-height: 140px !important; }
}
@media (max-width: 560px) {
  .gw-clients__logos > li { min-height: 90px !important; }
  .gw-clients__logos img { max-height: 110px !important; }
}

/* Insights / Awards sections follow the same tighter rhythm */
.gw-insights { padding-top: 10vh !important; padding-bottom: 10vh !important; }
.gw-awards { padding-top: 14vh !important; padding-bottom: 10vh !important; }

/* ============================================================
   ░░  UNIFIED SPACING SYSTEM  ░░  (modelled on brand.ai)
   ------------------------------------------------------------
   Single source of truth for container width, horizontal gutters,
   vertical section rhythm and inter-block spacing. Every section
   on every page inherits from these tokens so the entire site
   reads with one uniform measure.

       Token                     Desktop    Tablet    Mobile
       ─────────────────────────────────────────────────────────
       --gene-container-max      1440px     1440px    100%
       --gene-pwx (page x-pad)   80px       40px      20px
       --gene-gutter             40px       32px      20px
       --gene-gutter-half        20px       16px      12px
       --gene-section-y          160px      112px     80px
       --gene-section-y-lg       200px      144px     112px
       --gene-section-y-sm       96px       72px      56px
       --gene-block-y            64px       48px      36px
       --gene-nav-offset         88px       84px      72px
   ============================================================ */
:root {
  /* Container */
  --gene-container-max: 1440px;
  --gene-container-narrow: 1200px;
  --gene-container-wide: 1600px;

  /* Horizontal padding (page edge gutter) */
  --gene-pwx: 80px;
  --gene-gutter: 40px;
  --gene-gutter-half: 20px;

  /* Vertical rhythm */
  --gene-section-y: 104px;
  --gene-section-y-lg: 144px;
  --gene-section-y-sm: 56px;
  --gene-block-y: 48px;

  /* Fixed nav clearance */
  --gene-nav-offset: 88px;

  /* Legacy alias so existing rules that reference
     --gene-container-gutter continue working */
  --gene-container-gutter: var(--gene-pwx);
}

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

/* ------------------------------------------------------------
   Universal section wrapper — zero horizontal padding (owned
   exclusively by __inner). Vertical padding uses section tokens.
   ------------------------------------------------------------ */
.gene-hero,
.gene-hero--home,
.gene-page-hero,
.gene-about,
.gene-about__hero,
.gene-about__manifesto,
.gene-about__section,
.gene-about__platform,
.gene-about__process,
.gene-about__proof,
.gene-about__cta,
.gene-case-hero,
.gene-case-cta,
.gene-seqband,
.gene-footer,
.gene-team,
.gene-collective,
.gene-values,
.gw-featured,
.gw-insights,
.gw-clients,
.gw-awards,
.gw-archive,
.gw-archive--work,
.gw-archive--news,
.gw-post,
.gw-case,
.bi-hero,
.bi-intro,
.bi-platform,
.bi-reel,
.bi-health,
.bi-cta,
.bd-thesis,
.bd-chapter,
.bd-tech,
.bd-cta {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Standard section vertical rhythm */
.gene-hero,
.gene-about__manifesto,
.gene-about__section,
.gene-about__platform,
.gene-about__process,
.gene-about__proof,
.gene-about__cta,
.gene-case-cta,
.gene-seqband,
.gene-team,
.gene-collective,
.gene-values,
.gw-featured,
.gw-insights,
.gw-clients,
.gw-awards,
.gw-archive,
.gw-archive--work,
.gw-archive--news,
.gw-post,
.gw-case,
.bi-intro,
.bi-platform,
.bi-reel,
.bi-health,
.bi-cta,
.bd-chapter,
.bd-tech,
.bd-cta {
  padding-top: var(--gene-section-y) !important;
  padding-bottom: var(--gene-section-y) !important;
}

/* Hero sections (first on page) — nav-offset + generous top */
.gene-page--home .gene-hero,
.gene-page-hero,
.gene-about__hero,
.gene-case-hero,
.bi-hero,
.bd-thesis {
  padding-top: calc(var(--gene-nav-offset) + var(--gene-section-y-sm)) !important;
  padding-bottom: var(--gene-section-y-sm) !important;
}

/* Adjacent-to-hero sections get tighter top so they feel connected */
.gene-page--home .gw-featured,
.gene-page--home .gw-clients,
.gene-about__hero + *,
.gene-case-hero + *,
.bi-hero + *,
.bd-thesis + * {
  padding-top: var(--gene-section-y-sm) !important;
}

/* ------------------------------------------------------------
   Universal inner container — same measure everywhere
   ------------------------------------------------------------ */
.gene-hero__inner,
.gene-page-hero__inner,
.gene-about__inner,
.gene-about__hero-inner,
.gene-case-hero__inner,
.gene-case-cta__inner,
.gene-seqband__inner,
.gene-footer__inner,
.gw-featured__inner,
.gw-archive__inner,
.gw-awards__inner,
.gw-clients__inner,
.gw-insights__inner,
.gw-post__hero-inner,
.gw-post__body,
.gw-case__hero-inner,
.gw-case__body,
.gw-case__cta-inner,
.bi-hero__inner,
.bi-intro__inner,
.bi-platform__inner,
.bi-reel__inner,
.bi-health__inner,
.bi-cta__inner,
.bd-thesis__inner,
.bd-chapter__inner,
.bd-tech__inner {
  max-width: var(--gene-container-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gene-pwx) !important;
  padding-right: var(--gene-pwx) !important;
  box-sizing: border-box !important;
}

/* Cover images and hero media span slightly wider than copy */
.gene-hero__media,
.gene-page-hero__media,
.gene-about__hero-media,
.gw-post__cover,
.gw-case__cover {
  max-width: var(--gene-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gene-pwx) !important;
  padding-right: var(--gene-pwx) !important;
  margin-top: var(--gene-block-y) !important;
  box-sizing: border-box !important;
}
.gene-hero__media > *,
.gene-page-hero__media > *,
.gene-about__hero-media > *,
.gw-post__cover > *,
.gw-case__cover > * {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Top nav: brand.ai content-sized pill (no container width override) */

/* Fixed-nav clearance for page body */
#page.site,
.gene-site-wrap {
  padding-top: var(--gene-nav-offset) !important;
}

/* Mobile menu inner matches container */
.gene-mobile-menu__inner {
  max-width: var(--gene-container-max) !important;
  padding-left: var(--gene-pwx) !important;
  padding-right: var(--gene-pwx) !important;
  padding-top: calc(var(--gene-nav-offset) + 8px) !important;
}

/* ------------------------------------------------------------
   Inter-block rhythm — collapse margins to a single cadence
   ------------------------------------------------------------ */
.gene-about__eyebrow,
.gene-page-hero__eyebrow,
.gene-footer__eyebrow { margin-bottom: calc(var(--gene-block-y) * 0.4) !important; }

.gene-hero__headline,
.gene-page-hero__headline,
.gene-about__h1 { margin-bottom: calc(var(--gene-block-y) * 0.5) !important; }

.gene-hero__sub,
.gene-page-hero__sub,
.gene-about__lead,
.gene-about__section-lead { margin-bottom: var(--gene-block-y) !important; }

.gene-about__section-head,
.gene-about__hero-ctas,
.gene-hero__ctas,
.gene-page-hero__ctas { margin-bottom: calc(var(--gene-block-y) * 0.75) !important; }

/* Grids: uniform gaps */
.gw-archive__grid,
.gw-featured__row,
.gw-insights__grid,
.gw-awards__grid {
  gap: var(--gene-gutter) !important;
}

/* ------------------------------------------------------------
   Legacy WordPress / Visual Composer rows — route them through
   the same container + rhythm so third-party pages don't stick
   out with their own 1170px / padding.
   ------------------------------------------------------------ */
.ohio-container,
.vc_row:not(.vc_row-no-padding):not(.-nospace):not(.vc_inner),
.wpb_row .vc_row-fluid {
  max-width: var(--gene-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gene-pwx) !important;
  padding-right: var(--gene-pwx) !important;
  box-sizing: border-box !important;
}

/* Full-width VC rows (with background) get 0 horizontal, inner gets gutter */
.vc_row.vc_row-has-fill:not(.site-footer):not(#colophon),
.vc_row[data-vc-full-width] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}
.vc_row.vc_row-has-fill:not(.site-footer):not(#colophon) > .wpb_column,
.vc_row[data-vc-full-width] > .wpb_column {
  max-width: var(--gene-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gene-pwx);
  padding-right: var(--gene-pwx);
  box-sizing: border-box;
}

/* ============================================================
   ░░ HARD OVERRIDES — kill all the legacy one-off vh numbers ░░
   These rules come AFTER every earlier declaration so they win.
   ============================================================ */
.gene-hero,
.gene-hero--home,
.gw-featured,
.gw-insights,
.gw-clients,
.gw-awards,
.gw-archive,
.gw-archive--work,
.gw-archive--news,
.gw-post,
.gw-case,
.gene-about__hero,
.gene-about__manifesto,
.gene-about__section,
.gene-about__platform,
.gene-about__process,
.gene-about__proof,
.gene-about__cta,
.gene-case-hero,
.gene-case-cta,
.gene-team,
.gene-collective,
.gene-values,
.bi-hero,
.bi-intro,
.bi-platform,
.bi-reel,
.bi-health,
.bi-cta,
.bd-thesis,
.bd-chapter,
.bd-tech,
.bd-cta {
  padding-top: var(--gene-section-y) !important;
  padding-bottom: var(--gene-section-y) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Heroes: site-wrap already has nav-offset padding, so hero
   only needs a small internal top. Bottom stays 0 — adjacent
   section owns the gap. */
.gene-page--home .gene-hero {
  padding-top: 24px !important;
  padding-bottom: 0 !important;
}
/* Non-home heroes get a larger, breathable top so the title
   doesn't crowd the fixed nav. */
.gene-page-hero,
.gene-about__hero,
.gene-case-hero,
.bi-hero,
.bd-thesis,
.gw-post,
.gw-case,
.gw-archive--work,
.gw-archive--news,
.gw-archive {
  padding-top: clamp(72px, 9vw, 128px) !important;
  padding-bottom: 0 !important;
}

/* Any section immediately after a hero: single section-y-sm gap */
.gene-page--home .gene-hero + *,
.gene-page-hero + *,
.gene-about__hero + *,
.gene-case-hero + *,
.bi-hero + *,
.bd-thesis + *,
.gw-post + *,
.gw-case + *,
.gw-archive + * {
  padding-top: var(--gene-section-y-sm) !important;
}

/* Home hero → featured: snug, single beat */
.gene-page--home .gene-hero { padding-bottom: 24px !important; }
.gene-page--home .gw-featured { padding-top: var(--gene-section-y-sm) !important; }

/* Bands that sit between larger sections get the compact rhythm */
.gw-clients,
.gw-insights,
.gw-awards {
  padding-top: var(--gene-section-y-sm) !important;
  padding-bottom: var(--gene-section-y-sm) !important;
}

/* Hero media sits closer to headline — no extra big gap */
.gene-hero__media,
.gene-page-hero__media,
.gene-about__hero-media {
  margin-top: var(--gene-block-y) !important;
}

/* ============================================================
   Case-study & post body: full-width media + responsive video
   ============================================================ */
.gw-case__body,
.gw-post__body {
  max-width: var(--gene-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gene-pwx);
  padding-right: var(--gene-pwx);
  box-sizing: border-box;
}

/* Vimeo / video embeds — make them fill the container 16:9 */
.gw-case__body .wpb_video_wrapper,
.gw-post__body .wpb_video_wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  margin: var(--gene-block-y) 0;
  background: #0a0a0a;
}
.gw-case__body .wpb_video_wrapper iframe,
.gw-post__body .wpb_video_wrapper iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Visual-Composer single images — full width of container */
.gw-case__body .wpb_single_image,
.gw-post__body .wpb_single_image,
.gw-case__body figure.vc_figure,
.gw-post__body figure.vc_figure,
.gw-case__body .wpb_wrapper,
.gw-post__body .wpb_wrapper {
  margin: 0 !important;
  width: 100% !important;
}
.gw-case__body .vc_single_image-wrapper,
.gw-post__body .vc_single_image-wrapper {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: transparent !important;
  margin: var(--gene-block-y) 0 !important;
}
.gw-case__body .vc_single_image-wrapper img,
.gw-post__body .vc_single_image-wrapper img,
.gw-case__body figure img,
.gw-post__body figure img,
.gw-case__body img.vc_single_image-img,
.gw-post__body img.vc_single_image-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 18px !important;
}

@media (max-width: 768px) {
  .gw-case__body .wpb_video_wrapper,
  .gw-post__body .wpb_video_wrapper,
  .gw-case__body .vc_single_image-wrapper,
  .gw-post__body .vc_single_image-wrapper,
  .gw-case__body .vc_single_image-wrapper img,
  .gw-post__body .vc_single_image-wrapper img {
    border-radius: 12px !important;
  }
}

/* ============================================================
   BI OS SHELL — wraps .bi-showcase so it reads as a real platform
   ============================================================ */
.bi-showcase:has(.bi-os) {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.bi-os {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid rgba(10,10,10,0.10);
  border-radius: 22px;
  overflow: hidden;
  background: #F7F7F5;
  box-shadow: 0 40px 120px -60px rgba(10,10,10,0.35);
  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: #0a0a0a;
}
.bi-os__topbar {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  min-height: 52px;
}
.bi-os__brand { display: inline-flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid rgba(10,10,10,0.08); }
.bi-os__brandMark {
  width: 18px; height: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.bi-os__brandMark span {
  display: block; background: #0a0a0a; border-radius: 2px;
}
.bi-os__brandMark span:nth-child(2) { background: #2843D6; }
.bi-os__brandMark span:nth-child(3) { background: #7FE7E0; }
.bi-os__brandMark span:nth-child(4) { background: #F5F0E6; border: 1px solid rgba(10,10,10,0.2); }
.bi-os__brandWord { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; }
.bi-os__brandVer { font-size: 11px; color: rgba(10,10,10,0.45); font-variant-numeric: tabular-nums; }

.bi-os__crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.bi-os__ws {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid rgba(10,10,10,0.12);
  border-radius: 8px; background: #F7F7F5; font-weight: 500;
}
.bi-os__wsDot { width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #BFF7F0, #2843D6 70%);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.4);
}
.bi-os__wsCh { color: rgba(10,10,10,0.45); font-size: 10px; }
.bi-os__crumbSep { color: rgba(10,10,10,0.3); }
.bi-os__crumbK { color: rgba(10,10,10,0.6); }
.bi-os__crumbActive { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #0a0a0a; }
.bi-os__crumbDot { width: 6px; height: 6px; border-radius: 50%; background: #17b388; }

.bi-os__search {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 420px;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid rgba(10,10,10,0.10);
  border-radius: 10px;
  background: #F7F7F5;
  font-size: 12.5px;
  color: rgba(10,10,10,0.55);
  justify-self: end;
}
.bi-os__searchIcon { font-size: 13px; color: rgba(10,10,10,0.4); }
.bi-os__searchK {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 5px;
  font-size: 10px;
  color: rgba(10,10,10,0.55);
  font-variant-numeric: tabular-nums;
}

.bi-os__tools { display: inline-flex; align-items: center; gap: 6px; }
.bi-os__tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(10,10,10,0.10);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(10,10,10,0.7);
  background: #ffffff;
}
.bi-os__tool--mlr .bi-dot { background: #E0A53F; }
.bi-os__tool--fair { color: rgba(10,10,10,0.55); }

.bi-os__team { display: inline-flex; align-items: center; }
.bi-os__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: hsl(var(--hue, 210) 60% 55%);
  color: #fff; font-size: 10px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -6px;
  border: 2px solid #fff;
  letter-spacing: 0.02em;
}
.bi-os__avatar:first-child { margin-left: 0; }
.bi-os__avatar--more { background: #F2F2F2; color: rgba(10,10,10,0.6); }

.bi-os__btn {
  all: unset; cursor: pointer;
  padding: 7px 13px; border-radius: 10px;
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bi-os__btn--ghost { border-color: rgba(10,10,10,0.12); color: #0a0a0a; background: #fff; }
.bi-os__btn--ghost:hover { border-color: rgba(10,10,10,0.3); }
.bi-os__btn--solid { background: #0a0a0a; color: #F2F2F2; }
.bi-os__btn--solid:hover { background: #1a1a1a; }

/* ---- Body: left rail / stage / right rail ---- */
.bi-os__body {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  min-height: 760px;
}
.bi-os__rail {
  background: #ffffff;
  border-right: 1px solid rgba(10,10,10,0.08);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bi-os__railGroup { display: flex; flex-direction: column; gap: 8px; }
.bi-os__railLbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(10,10,10,0.4);
  padding: 0 2px;
}
.bi-os__rail .bi-showcase__tabs { gap: 4px; }
.bi-os__rail .bi-tab { padding: 10px 12px; border-radius: 10px; }
.bi-os__rail .bi-tab__n { font-size: 11px; }
.bi-os__rail .bi-tab__t { font-size: 13px; }

.bi-os__nav { display: flex; flex-direction: column; gap: 2px; }
.bi-os__navI {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 13px; color: rgba(10,10,10,0.78);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.bi-os__navI:hover { background: #F7F7F5; color: #0a0a0a; }
.bi-os__navIco { color: rgba(10,10,10,0.45); font-size: 14px; }
.bi-os__pill {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: #F2F2F2; color: rgba(10,10,10,0.55);
  font-variant-numeric: tabular-nums;
}
.bi-os__pill--live { background: #0a0a0a; color: #F2F2F2; }
.bi-os__pill--warn { background: #FFE8C7; color: #7a4e00; }

.bi-os__railGroup--kit { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(10,10,10,0.06); }
.bi-os__kit { display: inline-flex; gap: 6px; }
.bi-os__kitSw { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(10,10,10,0.1); }
.bi-os__kitMeta { font-size: 11px; color: rgba(10,10,10,0.5); }

/* Stage — override .bi-showcase__stage when nested in os */
.bi-os .bi-showcase__stage {
  min-height: 760px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #F7F7F5;
  align-self: stretch;
  position: relative;
}

/* ---- Right rail ---- */
.bi-os__rightRail {
  background: #ffffff;
  border-left: 1px solid rgba(10,10,10,0.08);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bi-os__rrHead {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(10,10,10,0.45);
}
.bi-os__rrHead--sec { margin-top: 6px; }
.bi-os__feed { display: flex; flex-direction: column; gap: 10px; }
.bi-os__feedItem {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  font-size: 12px; line-height: 1.35;
  color: rgba(10,10,10,0.72);
  padding: 8px 10px;
  background: #F7F7F5;
  border-radius: 10px;
  border-left: 2px solid #2843D6;
}
.bi-os__feedItem:nth-child(2) { border-left-color: #E0A53F; }
.bi-os__feedItem:nth-child(3) { border-left-color: #17b388; }
.bi-os__feedItem:nth-child(4) { border-left-color: #7FE7E0; }
.bi-os__feedItem:nth-child(5) { border-left-color: #C74C8C; }
.bi-os__feedT { font-size: 10px; color: rgba(10,10,10,0.45); font-variant-numeric: tabular-nums; padding-top: 1px; }
.bi-os__feedM b { color: #0a0a0a; font-weight: 500; }

.bi-os__int { display: flex; flex-wrap: wrap; gap: 5px; }
.bi-os__intChip {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  background: #F7F7F5; color: rgba(10,10,10,0.75);
  border: 1px solid rgba(10,10,10,0.06);
}

.bi-os__guard {
  margin-top: auto;
  padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, #0B1020, #111936);
  color: #F5F0E6;
  display: flex; flex-direction: column; gap: 8px;
}
.bi-os__guardHead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.bi-os__guardScore { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #BFF7F0; font-variant-numeric: tabular-nums; }
.bi-os__guardBar { height: 4px; background: rgba(255,255,255,0.12); border-radius: 999px; overflow: hidden; }
.bi-os__guardBar span { display: block; height: 100%; background: linear-gradient(90deg, #7FE7E0, #2843D6); animation: lxGuardBar 3s ease-in-out infinite; }
.bi-os__guardMeta { font-size: 10px; color: rgba(245,240,230,0.55); letter-spacing: 0.05em; }
@keyframes lxGuardBar { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

/* ---- Status bar ---- */
.bi-os__status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: #0a0a0a;
  color: rgba(242,242,242,0.72);
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.bi-os__stK { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.bi-os__stK b { color: #F2F2F2; font-weight: 500; }
.bi-os__stK .bi-dot--live { background: #17b388; box-shadow: 0 0 0 3px rgba(23,179,136,0.2); }
.bi-os__stSp { flex: 1; }

@media (max-width: 1180px) {
  .bi-os__body { grid-template-columns: 220px 1fr; }
  .bi-os__rightRail { display: none; }
  .bi-os__search { max-width: 260px; }
  .bi-os__tools { display: none; }
}
@media (max-width: 860px) {
  .bi-os__topbar { grid-template-columns: auto 1fr auto; }
  .bi-os__crumb, .bi-os__search, .bi-os__team, .bi-os__btn--ghost { display: none; }
  .bi-os__body { grid-template-columns: 1fr; }
  .bi-os__rail { border-right: 0; border-bottom: 1px solid rgba(10,10,10,0.08); }
}
.bi-ad--ctv,
.bi-ad--social,
.bi-ad--display,
.bi-ad--search,
.bi-ad--ooh,
.bi-ad--site {
  --lx-ink: #0B1020;
  --lx-deep: #111936;
  --lx-cobalt: #2843D6;
  --lx-cyan: #7FE7E0;
  --lx-glow: #BFF7F0;
  --lx-cream: #F5F0E6;
  --lx-bone: #F2F2F2;
  --lx-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --lx-serif: 'Canela', 'GT Sectra', 'Playfair Display', Georgia, serif;
}

/* ---- LUMETRA wordmark ---- */
.lx-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--lx-sans);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lx-ink);
  line-height: 1;
  white-space: nowrap;
  font-size: 12px;
}
.lx-logo__mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--lx-glow) 0%, var(--lx-cyan) 45%, var(--lx-cobalt) 100%);
  box-shadow: 0 0 0 1.5px var(--lx-ink), 0 0 14px rgba(127,231,224,0.6);
}
.lx-logo__word { display: inline-block; }
.lx-logo--inline { font-size: 13px; letter-spacing: 0.32em; }

.lx-tag {
  display: inline-block;
  font-family: var(--lx-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--lx-glow);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 20px rgba(0,0,0,0.35);
}

/* ---- Gradient surfaces ---- */
.lx-grad { position: relative; overflow: hidden; color: var(--lx-cream); }
.lx-grad--hero {
  background:
    radial-gradient(120% 80% at 75% 20%, rgba(127,231,224,0.35) 0%, rgba(127,231,224,0) 55%),
    radial-gradient(90% 70% at 15% 85%, rgba(40,67,214,0.55) 0%, rgba(40,67,214,0) 60%),
    linear-gradient(135deg, #0B1020 0%, #111936 55%, #1A2455 100%);
}
.lx-grad--deep {
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(127,231,224,0.4) 0%, rgba(127,231,224,0) 55%),
    linear-gradient(160deg, #0B1020 0%, #111936 70%);
}
.lx-grad--warm {
  background:
    radial-gradient(90% 70% at 80% 20%, rgba(40,67,214,0.55) 0%, rgba(40,67,214,0) 55%),
    linear-gradient(135deg, #F5F0E6 0%, #F2F2F2 55%, #D9D1BF 100%);
  color: var(--lx-ink);
}
.lx-grad--warm .lx-tag { color: var(--lx-cobalt); text-shadow: none; }
.lx-grad--ink {
  background:
    radial-gradient(60% 60% at 50% 110%, rgba(127,231,224,0.35) 0%, rgba(127,231,224,0) 60%),
    linear-gradient(180deg, #0B1020 0%, #050711 100%);
}

/* ---- Orb — animated logo-mark echo ---- */
.lx-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 12px 44px rgba(127,231,224,0.28));
}
.lx-orb__ring,
.lx-orb__core,
.lx-orb__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.lx-orb__ring {
  border: 1px solid rgba(127,231,224,0.35);
  animation: lxRing 7s ease-in-out infinite;
}
.lx-orb__ring--a { width: 96%; height: 96%; animation-duration: 9s; }
.lx-orb__ring--b { width: 72%; height: 72%; animation-duration: 6.5s; animation-direction: reverse; }
.lx-orb__ring--c { width: 48%; height: 48%; animation-duration: 5s; border-color: rgba(127,231,224,0.55); }
.lx-orb__core {
  width: 22%;
  height: 22%;
  background:
    radial-gradient(circle at 35% 30%, #E4FFFB 0%, #7FE7E0 35%, #2843D6 85%);
  box-shadow: 0 0 40px rgba(127,231,224,0.6), 0 0 80px rgba(40,67,214,0.35);
  animation: lxPulse 3.4s ease-in-out infinite;
}
.lx-orb__spark {
  width: 6px;
  height: 6px;
  background: #E4FFFB;
  box-shadow: 0 0 14px rgba(228,255,251,0.9);
  animation: lxOrbit 9s linear infinite;
}
.lx-orb__spark--1 { animation-delay: 0s;   --lx-r: 36%; }
.lx-orb__spark--2 { animation-delay: -3s;  --lx-r: 46%; animation-duration: 11s; }
.lx-orb__spark--3 { animation-delay: -6s;  --lx-r: 28%; animation-duration: 7s; }
@keyframes lxRing {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}
@keyframes lxPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: brightness(1); }
  50%      { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.18); }
}
@keyframes lxOrbit {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   translateX(var(--lx-r, 36%)) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--lx-r, 36%)) rotate(-360deg); }
}

/* ---- Field — background rule lines sweeping in ---- */
.lx-field { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; }
.lx-field__line {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(127,231,224,0.55) 50%, transparent 100%);
  transform-origin: 0 50%;
  animation: lxSweep 9s ease-in-out infinite;
}
.lx-field__line:nth-child(1) { top: 12%; animation-delay: -0s; }
.lx-field__line:nth-child(2) { top: 28%; animation-delay: -1.4s; }
.lx-field__line:nth-child(3) { top: 44%; animation-delay: -2.8s; }
.lx-field__line:nth-child(4) { top: 60%; animation-delay: -4.2s; }
.lx-field__line:nth-child(5) { top: 76%; animation-delay: -5.6s; }
.lx-field__line:nth-child(6) { top: 92%; animation-delay: -7.0s; }
.lx-grad--warm .lx-field__line {
  background: linear-gradient(90deg, transparent 0%, rgba(40,67,214,0.35) 50%, transparent 100%);
}
@keyframes lxSweep {
  0%, 100% { transform: translateX(-8%) scaleX(0.85); opacity: 0.2; }
  50%      { transform: translateX(4%)  scaleX(1);    opacity: 0.9; }
}

/* ---- Marquee (site hero band) ---- */
.lx-marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  padding: 10px 0;
  border-top: 1px solid rgba(127,231,224,0.22);
  background: linear-gradient(90deg, rgba(11,16,32,0.85), rgba(11,16,32,0.65));
  color: var(--lx-glow);
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 14px;
  z-index: 3;
}
.lx-marquee__track {
  display: inline-flex;
  gap: 22px;
  white-space: nowrap;
  animation: lxMarquee 22s linear infinite;
}
.lx-marquee__word { letter-spacing: -0.01em; }
.lx-marquee__glyph { color: var(--lx-cyan); font-style: normal; }
@keyframes lxMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Avatar disc for social ---- */
.lx-av {
  background:
    radial-gradient(circle at 30% 30%, #BFF7F0 0%, #2843D6 70%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}

/* ---- Search typing caret ---- */
.lx-caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-left: 2px;
  background: var(--lx-ink);
  vertical-align: middle;
  animation: lxCaret 1s steps(2) infinite;
}
@keyframes lxCaret { 50% { opacity: 0; } }

/* ---- Typography inside the CSS-composed ads ---- */
.bi-ad--ctv .bi-ad__ctvLogo .lx-logo { color: var(--lx-cream); font-size: 13px; }
.bi-ad--ctv .bi-ad__ctvHead { z-index: 2; color: var(--lx-cream); }
.bi-ad--ctv .bi-ad__ctvCta .lx-tag { font-size: 18px; }
.bi-ad--social .bi-ad__socBody { min-height: 170px; position: relative; padding: 18px; }
.bi-ad--social .bi-ad__socBody .lx-tag { font-size: 22px; margin-bottom: 6px; display: block; z-index: 2; }
.bi-ad--social .bi-ad__socBody .bi-ad__socK,
.bi-ad--social .bi-ad__socBody .bi-ad__socP,
.bi-ad--social .bi-ad__socBody .bi-ad__socCta { color: var(--lx-cream); z-index: 2; position: relative; }
.bi-ad--social .bi-ad__socBody .bi-ad__socCta { color: var(--lx-glow); }
.bi-ad--display .bi-ad__dispFinally.lx-tag { font-size: 32px; color: var(--lx-cobalt); }
.bi-ad--display .bi-ad__dispBar .lx-logo { font-size: 10px; }
.bi-ad--ooh .bi-ad__oohBig { color: var(--lx-cream); }
.bi-ad--ooh .bi-ad__oohBig em { color: var(--lx-glow); font-style: italic; font-family: var(--lx-serif); font-weight: 400; }
.bi-ad--ooh .bi-ad__oohUrl,
.bi-ad--ooh .bi-ad__oohSmall { color: var(--lx-cream); z-index: 2; }
.bi-ad--site .bi-ad__siteNav { color: var(--lx-ink); }
.bi-ad--site .bi-ad__siteNav .lx-logo { color: var(--lx-ink); }
.bi-ad--site .bi-ad__siteNav {
  background: var(--lx-cream);
  color: rgba(11,16,32,0.72);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.bi-ad--site .bi-ad__siteHero .bi-ad__siteHead { font-family: var(--lx-sans); font-weight: 400; letter-spacing: -0.015em; }
.bi-ad--ctv .bi-ad__ctvHead { font-family: var(--lx-sans); font-weight: 400; letter-spacing: -0.01em; }
.bi-ad--ctv .bi-ad__ctvCta { background: transparent; letter-spacing: 0.04em; }
.bi-ad--ooh .bi-ad__oohBig { font-family: var(--lx-sans); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.bi-ad--search .bi-ad__srchUrl { color: var(--lx-cobalt); }
.bi-ad--search .bi-ad__srchHead { color: var(--lx-ink); }
.bi-ad--display .bi-ad__dispBar { background: rgba(11,16,32,0.92); color: var(--lx-cream); }
.bi-ad--display .bi-ad__dispBar .bi-ad__dispHead { color: var(--lx-cream); font-family: var(--lx-sans); }
.bi-ad--display .bi-ad__dispBar .bi-ad__dispCta { background: var(--lx-glow); color: var(--lx-ink); }
.bi-ad--display .bi-ad__dispBar .lx-logo { color: var(--lx-cream); }
.bi-ad--social .bi-ad__socHead { background: var(--lx-cream); color: var(--lx-ink); }
.bi-ad--social .bi-ad__socHead .bi-ad__socN { color: var(--lx-ink); font-family: var(--lx-sans); letter-spacing: 0.04em; }
.bi-ad--social .bi-ad__socHead .bi-ad__socM { color: rgba(11,16,32,0.5); }

/* ---- (Retired) live-demo chip styles ---- */

/* ---- Extra polish: when a panel activates, stagger-reveal its children ---- */
.bi-panel[data-active="true"] .bi-strat__row,
.bi-panel[data-active="true"] .bi-id__sw,
.bi-panel[data-active="true"] .bi-plat__persona,
.bi-panel[data-active="true"] .bi-plat__journey,
.bi-panel[data-active="true"] .bi-act__adCard,
.bi-panel[data-active="true"] .bi-act__log,
.bi-panel[data-active="true"] .bi-perf__tile {
  animation-name: lxReveal;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.16,1,0.3,1);
  animation-fill-mode: both;
}
@keyframes lxReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lx-orb__ring,
  .lx-orb__core,
  .lx-orb__spark,
  .lx-field__line,
  .lx-marquee__track,
  .lx-caret,
  .bi-platform__demoDot,
  .bi-panel[data-active="true"] .bi-strat__row,
  .bi-panel[data-active="true"] .bi-id__sw,
  .bi-panel[data-active="true"] .bi-plat__persona,
  .bi-panel[data-active="true"] .bi-plat__journey,
  .bi-panel[data-active="true"] .bi-act__adCard,
  .bi-panel[data-active="true"] .bi-act__log,
  .bi-panel[data-active="true"] .bi-perf__tile {
    animation: none !important;
  }
}

/* ============================================================
   Campaign OS — uniform integrated campaign header in Activation
   ============================================================ */
.bi-act__campaign {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #F7F7F5 100%);
}
.bi-act__campLeft { display: flex; flex-direction: column; gap: 10px; }
.bi-act__campH {
  margin: 0;
  font-family: 'Canela', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: #0B1020;
  display: flex; align-items: center; gap: 12px;
}
.bi-act__campMark {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #BFF7F0, #2843D6 70%);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.3), 0 0 14px rgba(127,231,224,0.55);
}
.bi-act__campP { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(10,10,10,0.65); max-width: 56ch; }
.bi-act__campChips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.bi-act__campRight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 12px;
  background: #ffffff;
  align-content: start;
}
.bi-act__lock {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(10,10,10,0.06);
  font-size: 11px;
}
.bi-act__lock:last-child { border-bottom: 0; }
.bi-act__lockK {
  width: 72px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(10,10,10,0.45);
}
.bi-act__lockSw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(10,10,10,0.1); }
.bi-act__lockT {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Canela', Georgia, serif; font-style: italic; font-size: 20px; color: #0B1020;
  border: 1px solid rgba(10,10,10,0.12); border-radius: 6px;
}
.bi-act__lockMeta { color: rgba(10,10,10,0.6); }
.bi-act__lockOrb {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #BFF7F0, #2843D6 70%);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.2);
}
.bi-act__lock--score { flex-wrap: wrap; }
.bi-act__lockBar {
  flex: 1;
  height: 4px; border-radius: 999px;
  background: rgba(10,10,10,0.08);
  overflow: hidden;
}
.bi-act__lockBar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #2843D6, #7FE7E0);
}

/* Channel fan-out strip */
.bi-act__channels {
  padding: 14px 16px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  background: #ffffff;
  display: flex; flex-direction: column; gap: 10px;
}
.bi-act__chRow { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-act__ch {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: #F7F7F5; border: 1px solid rgba(10,10,10,0.06);
  font-size: 11px; color: rgba(10,10,10,0.65);
  font-variant-numeric: tabular-nums;
}
.bi-act__ch b { color: #0a0a0a; font-weight: 500; }

@media (max-width: 860px) {
  .bi-act__campaign { grid-template-columns: 1fr; }
}

/* ============================================================
   BI HERO — condensed platform overview used in .bi-window--hero
   ============================================================ */
.bi-hv {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 520px;
  background: #F7F7F5;
  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: #0a0a0a;
}
.bi-hv__chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: #ffffff;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  font-size: 12px;
}
.bi-hv__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -0.005em; }
.bi-hv__brandMark {
  width: 16px; height: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.bi-hv__brandMark span { display: block; background: #0a0a0a; border-radius: 2px; }
.bi-hv__brandMark span:nth-child(2) { background: #2843D6; }
.bi-hv__brandMark span:nth-child(3) { background: #7FE7E0; }
.bi-hv__brandMark span:nth-child(4) { background: #F5F0E6; border: 1px solid rgba(10,10,10,0.2); }
.bi-hv__brandVer { color: rgba(10,10,10,0.4); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.bi-hv__ws {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border: 1px solid rgba(10,10,10,0.1); border-radius: 8px;
  background: #F7F7F5; font-weight: 500;
}
.bi-hv__status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(10,10,10,0.6);
}
.bi-hv__status .bi-dot--live { background: #17b388; box-shadow: 0 0 0 3px rgba(23,179,136,0.18); }

.bi-hv__body {
  display: grid;
  grid-template-columns: 168px 1fr 180px;
  min-height: 420px;
}
.bi-hv__rail {
  background: #ffffff;
  border-right: 1px solid rgba(10,10,10,0.08);
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.bi-hv__railLbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(10,10,10,0.4);
  padding: 0 4px 6px;
}
.bi-hv__mod {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  gap: 8px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 12px;
  border: 1px solid transparent;
  transition: background 0.2s ease;
}
.bi-hv__mod:hover { background: #F7F7F5; }
.bi-hv__modN { font-size: 10px; color: rgba(10,10,10,0.4); font-variant-numeric: tabular-nums; }
.bi-hv__modK { color: #0a0a0a; font-weight: 400; }
.bi-hv__modS { font-size: 10px; color: rgba(10,10,10,0.4); font-variant-numeric: tabular-nums; }
.bi-hv__mod.is-active {
  background: #0a0a0a; border-color: #0a0a0a;
}
.bi-hv__mod.is-active .bi-hv__modN { color: rgba(242,242,242,0.55); }
.bi-hv__mod.is-active .bi-hv__modK { color: #F2F2F2; }
.bi-hv__mod.is-active .bi-hv__modS { color: #7FE7E0; }

.bi-hv__stage {
  padding: 16px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  background: #F7F7F5;
  overflow: hidden;
}
.bi-hv__canvas {
  position: relative;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 20% 10%, rgba(40,67,214,0.06) 0%, transparent 60%),
    radial-gradient(80% 60% at 85% 95%, rgba(127,231,224,0.18) 0%, transparent 55%),
    #ffffff;
  overflow: hidden;
  min-height: 260px;
}
.bi-hv__graph { position: absolute; inset: 0; width: 100%; height: 100%; }

.bi-hv__brainCard {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0B1020, #111936);
  color: #F5F0E6;
  box-shadow: 0 20px 40px -20px rgba(11,16,32,0.5);
  display: flex; flex-direction: column; gap: 8px;
}
.bi-hv__brainLbl { font-size: 12px; font-weight: 500; letter-spacing: -0.005em; color: #BFF7F0; }
.bi-hv__brainMeta { font-size: 10px; color: rgba(245,240,230,0.6); letter-spacing: 0.04em; }
.bi-hv__brainBars {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 3px; align-items: flex-end;
  height: 36px;
}
.bi-hv__brainBars span {
  display: block;
  background: linear-gradient(180deg, #7FE7E0, #2843D6);
  border-radius: 2px;
  animation: biHvBar 2.6s ease-in-out infinite;
  transform-origin: bottom;
}
.bi-hv__brainBars span:nth-child(2) { animation-delay: -0.3s; }
.bi-hv__brainBars span:nth-child(3) { animation-delay: -0.6s; }
.bi-hv__brainBars span:nth-child(4) { animation-delay: -0.9s; }
.bi-hv__brainBars span:nth-child(5) { animation-delay: -1.2s; }
.bi-hv__brainBars span:nth-child(6) { animation-delay: -1.5s; }
.bi-hv__brainBars span:nth-child(7) { animation-delay: -1.8s; }
.bi-hv__brainBars span:nth-child(8) { animation-delay: -2.1s; }
@keyframes biHvBar {
  0%, 100% { transform: scaleY(0.85); opacity: 0.7; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

.bi-hv__tagChip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.08);
  font-size: 10.5px;
  color: rgba(10,10,10,0.65);
  box-shadow: 0 6px 14px -8px rgba(10,10,10,0.25);
  animation: biHvFloat 4s ease-in-out infinite;
}
.bi-hv__tagChip span:last-child { color: #0a0a0a; font-weight: 500; }
.bi-hv__tagDot { width: 6px; height: 6px; border-radius: 50%; background: #17b388; }
.bi-hv__tagChip--in  { left: 12px;  top: 22px; }
.bi-hv__tagChip--mid { left: 16px;  bottom: 18px; animation-delay: -1.3s; }
.bi-hv__tagChip--mid .bi-hv__tagDot { background: #2843D6; }
.bi-hv__tagChip--out { right: 12px; top: 18px; animation-delay: -2.6s; }
.bi-hv__tagChip--out .bi-hv__tagDot { background: #7FE7E0; }
@keyframes biHvFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.bi-hv__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bi-hv__metric {
  padding: 10px 12px;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
  background: #ffffff;
  display: flex; flex-direction: column;
}
.bi-hv__metricV {
  font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.bi-hv__metricK {
  font-size: 10px; color: rgba(10,10,10,0.5); text-transform: uppercase; letter-spacing: 0.08em;
}

.bi-hv__right {
  background: #ffffff;
  border-left: 1px solid rgba(10,10,10,0.08);
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bi-hv__rightLbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(10,10,10,0.4);
}
.bi-hv__agents { display: flex; flex-direction: column; gap: 5px; }
.bi-hv__agent {
  display: grid; grid-template-columns: 8px 1fr; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 8px;
  background: #F7F7F5;
  font-size: 11px;
  animation: biHvIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.bi-hv__agentDot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.bi-hv__agent > span:nth-child(2) { grid-column: 2; }
.bi-hv__agentK { color: #0a0a0a; font-weight: 500; }
.bi-hv__agentD { grid-column: 2; color: rgba(10,10,10,0.55); font-size: 10px; line-height: 1.3; }
@keyframes biHvIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bi-hv__outs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  margin-bottom: 4px;
}
.bi-hv__out {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 8px; border-radius: 6px;
  background: #F7F7F5;
  font-size: 11px;
  animation: biHvIn 0.55s cubic-bezier(0.16,1,0.3,1) both;
}
.bi-hv__outK { color: rgba(10,10,10,0.6); }
.bi-hv__outN { color: #0a0a0a; font-weight: 500; font-variant-numeric: tabular-nums; }

.bi-hv__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: #0a0a0a;
  color: rgba(242,242,242,0.7);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.bi-hv__foot .bi-dot--live { background: #17b388; box-shadow: 0 0 0 3px rgba(23,179,136,0.22); }
.bi-hv__footSp { flex: 1; }

@media (max-width: 1080px) {
  .bi-hv__body { grid-template-columns: 150px 1fr 160px; }
}
@media (max-width: 860px) {
  .bi-hv__body { grid-template-columns: 1fr; }
  .bi-hv__rail, .bi-hv__right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bi-hv__brainBars span,
  .bi-hv__tagChip,
  .bi-hv__agent,
  .bi-hv__out { animation: none !important; }
}

/* ============================================================
   EDITORIAL POLISH — CASE STUDIES + INSIGHTS
   Beautiful typography, imagery treatments, scroll flows.
   ============================================================ */

/* --- Reading progress bar (news posts) --- */
.gw-read-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #9ef0f0 0%, #9ef0f0 var(--p, 0%), transparent var(--p, 0%));
  opacity: 0; transition: opacity .3s ease;
}
body.gene-page--post .gw-read-progress,
body.gene-page--case .gw-read-progress { opacity: 1; }

/* --- Shared hero fade-in --- */
.gw-case__hero-inner > *,
.gw-post__hero-inner > * {
  opacity: 0; transform: translateY(14px);
  animation: gwHeroIn .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.gw-case__hero-inner > *:nth-child(1),
.gw-post__hero-inner > *:nth-child(1) { animation-delay: .05s; }
.gw-case__hero-inner > *:nth-child(2),
.gw-post__hero-inner > *:nth-child(2) { animation-delay: .15s; }
.gw-case__hero-inner > *:nth-child(3),
.gw-post__hero-inner > *:nth-child(3) { animation-delay: .25s; }
.gw-case__hero-inner > *:nth-child(4),
.gw-post__hero-inner > *:nth-child(4) { animation-delay: .35s; }
.gw-case__hero-inner > *:nth-child(5),
.gw-post__hero-inner > *:nth-child(5) { animation-delay: .45s; }
@keyframes gwHeroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Hero type: add subtle italic emphasis support --- */
.gw-case__title em, .gw-post__title em {
  font-family: 'Merriweather', serif; font-style: italic; font-weight: 400;
}

.gw-case__sub, .gw-post__meta {
  font-family: 'Geist', sans-serif;
}
.gw-post__meta time {
  position: relative; padding-left: 28px;
}
.gw-post__meta time::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px; background: rgba(10,10,10,.35);
}

/* --- Signature cover frame: full-bleed image below hero --- */
.gw-case__cover, .gw-post__cover {
  max-width: min(1360px, calc(100vw - clamp(32px, 6vw, 96px))) !important;
  margin: 4vh auto 10vh !important;
  padding: 0 !important;
}
.gw-case__cover-frame,
.gw-post__cover-frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 26px);
  background: #0a0a0a;
  box-shadow: 0 40px 80px -40px rgba(10,10,10,.35), 0 2px 0 rgba(10,10,10,.05);
}
.gw-case__cover-frame::after,
.gw-post__cover-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,.18) 100%);
  pointer-events: none;
}
.gw-case__cover-frame img,
.gw-post__cover-frame img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0;
  transform: scale(1.04);
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.gw-case__cover.is-visible .gw-case__cover-frame img,
.gw-post__cover.is-visible .gw-post__cover-frame img {
  transform: scale(1);
}

/* --- Editorial body: beautiful typography --- */
.gw-case__body, .gw-post__body {
  font-size: clamp(1.05em, 1.18vw, 1.18em);
  line-height: 1.72;
  letter-spacing: -0.003em;
  color: #1a1a1a;
}

/* Lead paragraph — the first <p> sits larger, looser */
.gw-case__body > p:first-of-type,
.gw-post__body > p:first-of-type {
  font-size: clamp(1.22em, 1.55vw, 1.42em);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #0a0a0a;
  margin-bottom: 2em;
}

/* Drop-cap for news articles */
.gw-post__body > p:first-of-type::first-letter {
  font-family: 'Merriweather', serif;
  font-weight: 400;
  font-size: 3.6em;
  line-height: .92;
  float: left;
  padding: 4px 14px 0 0;
  color: #0a0a0a;
}

/* Case H5 "chapter" headings — numbered + hairline */
.gw-case__body { counter-reset: gwchapter; }
.gw-case__body h5 {
  counter-increment: gwchapter;
  position: relative;
  font-family: 'Geist', sans-serif;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,10,10,.6);
  padding: 0 0 1.2em 0;
  margin: 5em 0 1.6em;
  border-bottom: 1px solid rgba(10,10,10,.12);
  display: flex; align-items: baseline; gap: 16px;
}
.gw-case__body h5::before {
  content: counter(gwchapter, decimal-leading-zero);
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.9em;
  letter-spacing: 0;
  color: #0a0a0a;
  text-transform: none;
  line-height: 1;
}

/* Case H2/H3 bigger, tighter */
.gw-case__body h2, .gw-case__body h3 {
  font-family: 'Geist-Light','Geist', sans-serif;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #0a0a0a;
  margin: 1.6em 0 .6em;
}
.gw-case__body h2 { font-size: clamp(1.9em, 3.4vw, 2.6em); }
.gw-case__body h3 { font-size: clamp(1.4em, 2.3vw, 1.85em); }

/* Bullet lists refined */
.gw-case__body ul, .gw-case__body ol,
.gw-post__body ul, .gw-post__body ol {
  padding-left: 0;
  margin: 0 0 2em;
  list-style: none;
}
.gw-case__body li, .gw-post__body li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 1em;
  line-height: 1.65;
}
.gw-case__body ul > li::before,
.gw-post__body ul > li::before {
  content: '';
  position: absolute;
  left: 6px; top: .68em;
  width: 14px; height: 1px;
  background: #0a0a0a;
}
.gw-case__body ol, .gw-post__body ol { counter-reset: gwli; }
.gw-case__body ol > li, .gw-post__body ol > li { counter-increment: gwli; }
.gw-case__body ol > li::before,
.gw-post__body ol > li::before {
  content: counter(gwli, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: 'Merriweather', serif;
  font-style: italic;
  color: rgba(10,10,10,.55);
  font-size: .95em;
  line-height: 1.65;
}

/* Pull-quote / blockquote */
.gw-case__body blockquote,
.gw-post__body blockquote {
  margin: 3.5em 0;
  padding: 0 0 0 2em;
  border: 0;
  border-left: 2px solid #0a0a0a;
  background: transparent;
  font-family: 'Geist-Light','Geist', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.5em, 2.4vw, 2em);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  border-radius: 0;
}
.gw-case__body blockquote p,
.gw-post__body blockquote p { margin: 0; }
.gw-case__body blockquote em,
.gw-post__body blockquote em {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-weight: 400;
}

/* Imagery in body — framed, shadowed */
.gw-case__body img,
.gw-post__body img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 3em auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px -30px rgba(10,10,10,.3);
}

/* Video / iframe responsive wrapper */
.gw-case__body .wpb_video_wrapper,
.gw-post__body .wpb_video_wrapper,
.gw-case__body .gw-embed,
.gw-post__body .gw-embed {
  position: relative;
  width: 100%;
  margin: 4em auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 30px 80px -40px rgba(10,10,10,.45);
}
.gw-case__body .wpb_video_wrapper iframe,
.gw-post__body .wpb_video_wrapper iframe,
.gw-case__body .gw-embed iframe,
.gw-post__body .gw-embed iframe {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0;
}

/* Inline links */
.gw-case__body a {
  color: #0a0a0a;
  text-decoration: none;
  background-image: linear-gradient(#9ef0f0, #9ef0f0);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s ease;
}
.gw-case__body a:hover { background-size: 100% 100%; }
.gw-post__body a {
  color: #0a0a0a;
  border-bottom: 2px solid #9ef0f0;
  text-decoration: none;
  background: transparent;
  transition: background .2s ease;
}
.gw-post__body a:hover { background: #9ef0f0; }

/* Section horizontal rule — editorial break */
.gw-case__body hr,
.gw-post__body hr {
  border: 0;
  height: 1px;
  background: rgba(10,10,10,.12);
  margin: 5em auto;
  max-width: 80px;
}

/* Scroll-reveal for body sections (paired with JS .reveal-up) */
.gw-case__body .reveal-up,
.gw-post__body .reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.gw-case__body .reveal-up.is-visible,
.gw-post__body .reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cover scale-in reveal */
.gw-case__cover.reveal-scale,
.gw-post__cover.reveal-scale { opacity: 0; transition: opacity 1.1s cubic-bezier(.22,.61,.36,1); }
.gw-case__cover.reveal-scale.is-visible,
.gw-post__cover.reveal-scale.is-visible { opacity: 1; }

/* Next/prev post nav at end of blog posts */
.gw-post__nav {
  max-width: 780px;
  margin: 8vh auto 0;
  padding: 4vh 0 0;
  border-top: 1px solid rgba(10,10,10,.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  font-family: 'Geist', sans-serif;
}
.gw-post__nav a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0;
  color: #0a0a0a;
  text-decoration: none;
  border-bottom: none !important;
  background: transparent !important;
}
.gw-post__nav a span.k {
  font-size: .74em; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(10,10,10,.55);
}
.gw-post__nav a span.t {
  font-size: 1.05em; line-height: 1.3;
  transition: transform .3s ease;
}
.gw-post__nav a.prev { text-align: left; }
.gw-post__nav a.next { text-align: right; }
.gw-post__nav a:hover span.t { transform: translateX(4px); }
.gw-post__nav a.prev:hover span.t { transform: translateX(-4px); }

/* Case body: wider on large screens so images breathe */
@media (min-width: 1100px) {
  .gw-case__body, .gw-post__body {
    max-width: 820px !important;
  }
  .gw-case__body .wpb_video_wrapper,
  .gw-post__body .wpb_video_wrapper,
  .gw-case__body .gw-embed,
  .gw-post__body .gw-embed,
  .gw-case__body img,
  .gw-post__body img {
    width: calc(100% + clamp(40px, 8vw, 160px));
    max-width: none;
    margin-left: calc(clamp(20px, 4vw, 80px) * -1);
    margin-right: calc(clamp(20px, 4vw, 80px) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gw-case__hero-inner > *,
  .gw-post__hero-inner > *,
  .gw-case__cover.reveal-scale,
  .gw-post__cover.reveal-scale,
  .gw-case__body .reveal-up,
  .gw-post__body .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   BRAND.AI-STYLE SECTION SEPARATION
   Kill decorative hairlines between sections; rely on whitespace
   and subtle background shifts. Intra-component grid lines remain.
   ============================================================ */

/* Section-level hairlines — removed */
.gene-story,
.bd-chapter,
.gw-insights__head,
.gw-archive__head,
.gene-hero__ticker,
.gw-awards__logos,
.gw-clients__logos,
.bd-chapter__services {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Keep the hero ticker readable without a line */
.gene-hero__ticker {
  padding-top: 32px;
}

/* Awards + Clients logo rails: replace rule lines with breathing room */
.gw-awards__logos,
.gw-clients__logos {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Insights + Archive headers: use generous margin instead of rule */
.gw-insights__head,
.gw-archive__head {
  padding-bottom: 0;
  margin-bottom: clamp(48px, 5vw, 72px);
}

/* Editorial hr inside articles — keep the break, soften it */
.gw-case__body hr,
.gw-post__body hr {
  background: transparent !important;
  height: auto !important;
  margin: 4em auto !important;
  max-width: none !important;
  position: relative;
}
.gw-case__body hr::before,
.gw-post__body hr::before {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: rgba(10,10,10,0.14);
  margin: 0 auto;
}

/* Footer top border — remove, let background contrast speak */
footer.site-footer,
.site-footer {
  border-top: 0 !important;
}

/* WPBakery legacy separator rows — hide any stray ones */
.vc_separator,
.vc_sep_line { display: none !important; }

/* Monochrome surface tones — no warm creams. */
.gw-insights,
.gw-clients,
.gw-awards {
  background: #F7F7F7;
}

/* ============================================================
   FINAL OVERRIDES — hero height parity + post/archive footer breathing room
   ============================================================ */

/* Home hero should match the compact Work / Insights hero, not 100vh. */
.gene-page--home .gene-hero,
.gene-hero--home {
  min-height: 0 !important;
  padding: clamp(96px, 14vh, 160px) 0 clamp(56px, 8vh, 96px) !important;
  display: block !important;
  perspective: none !important;
}
.gene-page--home .gene-hero__inner { padding-top: 0 !important; }

/* Breathing room at the bottom of blog posts and the Insights archive
   so content doesn't butt against the footer. */
.gw-post,
.gw-archive,
.gw-archive--news,
.gw-archive--work {
  padding-bottom: clamp(80px, 12vh, 160px) !important;
}
.gw-post__body { padding-bottom: clamp(40px, 6vh, 80px); }

/* Hide broken / 404 images rather than showing a broken-image glyph.
   Applied by the JS error handler which adds .is-broken. */
img.is-broken,
img.is-broken + figcaption { display: none !important; }

/* ============================================================
   GRID-GRADIENT HERO TREATMENT
   Applied to landing-page heroes: Insights, About, Contact,
   and inner-page heroes — NOT the Work archive (that page
   uses the dark featured grid instead).
   ============================================================ */
.gene-page-hero::before,
.gene-about__hero::before,
.gw-archive::before,
.gw-archive--news::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
  z-index: 0;
}
.gene-page-hero,
.gene-about__hero,
.gw-archive,
.gw-archive--news {
  position: relative;
}
.gene-page-hero__inner,
.gene-about__hero-inner,
.gw-archive__head {
  position: relative;
  z-index: 1;
}

/* gene-values (How We Show Up) — dark section with same grid overlay */
.gene-values {
  position: relative;
}
.gene-values::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(242,242,242,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,242,242,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
  z-index: 0;
}
.gene-values .gene-about__inner { position: relative; z-index: 1; }

/* ============================================================
   CASE STUDY PAGES — dark footer bleed
   The "Have a brand ready" CTA was removed; make the footer
   dark so the page ends cleanly into the dark nav/footer.
   A gradient overlay on the last section fades content into
   the dark footer.
   ============================================================ */
.gene-page--case .gene-footer {
  background: #0a0a0a;
}
.gene-page--case .gene-footer__inner,
.gene-page--case .gene-footer .gene-footer__col,
.gene-page--case .gene-footer__label,
.gene-page--case .gene-footer a,
.gene-page--case .gene-footer__copy,
.gene-page--case .gene-footer__sub,
.gene-page--case .gene-footer__cta {
  color: rgba(242,242,242,0.72) !important;
  border-color: rgba(242,242,242,0.12) !important;
}
.gene-page--case .gene-footer a:hover {
  color: #F2F2F2 !important;
}
.gene-page--case .gene-footer__cta {
  background: transparent !important;
  border: 1px solid rgba(242,242,242,0.3) !important;
}
.gene-page--case .gene-footer__cta:hover {
  background: rgba(242,242,242,0.08) !important;
}
/* Fade the bottom of the article into black — linear, compact */
.gw-case {
  position: relative;
}
.gw-case::after {
  content: none;
  display: none;
}
/* Last section on case studies: center content vertically in its area */
.gw-case > *:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh;
}

/* Blog posts — also blend into dark footer */
.gene-page--post .gene-footer {
  background: #0a0a0a;
}
.gene-page--post .gene-footer__inner,
.gene-page--post .gene-footer .gene-footer__col,
.gene-page--post .gene-footer__label,
.gene-page--post .gene-footer a,
.gene-page--post .gene-footer__copy,
.gene-page--post .gene-footer__sub,
.gene-page--post .gene-footer__cta {
  color: rgba(242,242,242,0.72) !important;
  border-color: rgba(242,242,242,0.12) !important;
}
.gene-page--post .gene-footer a:hover { color: #F2F2F2 !important; }
.gene-page--post .gene-footer__cta {
  background: transparent !important;
  border: 1px solid rgba(242,242,242,0.3) !important;
}
.gw-post {
  position: relative;
}
/* Blog post pages — no footer-blend gradient */

.gw-post__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(10,10,10,0.52);
  letter-spacing: 0.01em;
}
.gw-post__meta span[aria-hidden] {
  opacity: 0.4;
}

/* ============================================================
   WORK PAGE — "There's a lot more" section BI bleed treatment
   Stays inside the container; gradient bleeds into the dark footer.
   ============================================================ */
.gw-featured__more {
  border-radius: clamp(18px, 2vw, 28px) !important;
  margin-top: 40px;
  position: relative;
  padding: clamp(72px, 10vw, 120px) clamp(28px, 5vw, 72px) clamp(240px, 32vh, 440px) !important;
  overflow: hidden;
}
/* BI-style blue radial wash */
.gw-featured__more::before {
  inset: 0 !important;
  width: auto !important;
  aspect-ratio: auto !important;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(158,240,240,0.10), transparent 60%),
    radial-gradient(600px 400px at 90% 100%, rgba(40,67,214,0.07), transparent 60%) !important;
  filter: none !important;
}
/* Linear gradient fade so the section blends into the dark footer */
.gw-featured__more::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(80px, 9vh, 140px);
  background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 55%, #0a0a0a 100%);
  pointer-events: none;
  z-index: 2;
}
/* Keep footer dark to match */
.gene-page--work .gene-footer {
  background: #0a0a0a;
}
.gene-page--work .gene-footer__inner,
.gene-page--work .gene-footer .gene-footer__col,
.gene-page--work .gene-footer__label,
.gene-page--work .gene-footer a,
.gene-page--work .gene-footer__copy,
.gene-page--work .gene-footer__sub,
.gene-page--work .gene-footer__cta {
  color: rgba(242,242,242,0.72) !important;
  border-color: rgba(242,242,242,0.12) !important;
}
.gene-page--work .gene-footer a:hover {
  color: #F2F2F2 !important;
}
.gene-page--work .gene-footer__cta {
  background: transparent !important;
  border: 1px solid rgba(242,242,242,0.3) !important;
}
.gene-page--work .gene-footer__cta:hover {
  background: rgba(242,242,242,0.08) !important;
}

/* ============================================================
   ABOUT PAGE — last section blends into dark footer
   ============================================================ */
.gene-page--about .gene-footer { background: #0a0a0a; }
.gene-page--about .gene-footer__inner,
.gene-page--about .gene-footer .gene-footer__col,
.gene-page--about .gene-footer__label,
.gene-page--about .gene-footer a,
.gene-page--about .gene-footer__copy,
.gene-page--about .gene-footer__sub,
.gene-page--about .gene-footer__cta {
  color: rgba(242,242,242,0.72) !important;
  border-color: rgba(242,242,242,0.12) !important;
}
.gene-page--about .gene-footer a:hover { color: #F2F2F2 !important; }
.gene-page--about .gene-footer__cta {
  background: transparent !important;
  border: 1px solid rgba(242,242,242,0.3) !important;
}
.gene-page--about .gene-footer__cta:hover {
  background: rgba(242,242,242,0.08) !important;
}
.gene-about { position: relative; }
.gene-about::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(80px, 9vh, 140px);
  background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 55%, #0a0a0a 100%);
  pointer-events: none;
  z-index: 2;
}
.gene-about > *:last-child {
  padding-bottom: clamp(240px, 32vh, 440px) !important;
}

/* ============================================================
   BRAND INTELLIGENCE — hero stage full-width + showcase flush
   ============================================================ */
/* Hero: stack copy then full-width image with bottom padding */
.bi-hero__inner { display: block; }
.bi-hero__copy { text-align: left; }
.bi-hero__stage {
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding-bottom: clamp(48px, 6vw, 96px);
  width: 100%;
  max-width: 1200px;
}
.bi-hero__stage > .bi-hv,
.bi-hero__stage > .bi-hv-stage,
.bi-hero__stage > * {
  width: 100%;
  display: block;
  border-radius: 18px;
  overflow: hidden;
}

/* Showcase: flush, no chrome, no border, no shadow */
.bi-os.bi-os--flush {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  grid-template-rows: auto 1fr;
}
.bi-os--flush .bi-os__header {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 0 18px 2px;
  background: transparent;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  margin-bottom: 18px;
}
.bi-os__brandMark--spark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  grid-template-columns: none;
  gap: 0;
}
.bi-os__brandMark--spark .gene-mark-svg {
  width: 100%; height: 100%; display: block;
}
.bi-os__brandMark--spark .gene-mark-path { fill: #0a0a0a; }
.bi-os--flush .bi-os__body {
  grid-template-columns: 240px 1fr;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 18px;
  overflow: hidden;
  min-height: 640px;
}
.bi-os--flush .bi-os__rail {
  border-right: 1px solid rgba(10,10,10,0.08);
}

/* Flow nodes: hover only, no click affordance */
.bi-flow__node { cursor: default; }

/* ============================================================
   POLISH: remove grid backgrounds, normalize BI hero to match
   other page heroes, fit The System cards without horizontal
   scroll, responsive collapse, and top-align platform stage.
   ============================================================ */

/* Remove decorative grid backgrounds site-wide */
.bi-hero::before,
.bd-tech::before,
.gene-page-hero::before,
.gene-about__hero::before,
.gw-archive::before,
.gw-archive--news::before,
.gene-values::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* BI hero — match gene-page-hero layout/spacing */
.bi-hero {
  padding: 14vh 0 8vh !important;
}
.bi-hero__inner {
  display: block !important;
  max-width: var(--gene-container-max) !important;
  margin: 0 auto !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.bi-hero__copy {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.bi-hero__h {
  max-width: 18ch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}
.bi-hero__sub {
  max-width: 54ch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}
.bi-hero__ctas {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.bi-hero__stage {
  margin: clamp(48px, 6vw, 96px) 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 768px) {
  .bi-hero__stage { margin-top: 4vh !important; }
}

/* Hero OS preview — same visual language as platform, compact height */
.bi-os--hero .bi-os__body {
  min-height: 520px !important;
}
.bi-os--hero .bi-showcase__stage {
  height: auto !important;
  min-height: 520px !important;
}
.bi-os--hero .bi-tab { pointer-events: none; }

/* The System — no horizontal scroll, fit to viewport */
.bi-flow {
  overflow: visible !important;
  flex-wrap: wrap;
  gap: 12px;
}
.bi-flow__node {
  min-width: 0 !important;
  flex: 1 1 180px;
  padding: 16px 16px 18px;
}
.bi-flow__arrow {
  display: none !important;
}
@media (max-width: 900px) {
  .bi-flow__tag { display: none !important; }
}
@media (max-width: 600px) {
  .bi-flow__node { flex: 1 1 140px; padding: 12px 14px 14px; }
}

/* Platform stage — full height + top-aligned content */
.bi-os--flush .bi-os__body {
  align-items: stretch !important;
  min-height: 720px !important;
}
.bi-os .bi-showcase__stage {
  height: 720px !important;
  min-height: 720px !important;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.bi-panel {
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
.bi-panel__screen {
  padding: 20px !important;
  display: block !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  align-self: stretch;
  overflow: hidden !important;
}

/* Hero preview OS — shorter, no scroll */
.bi-os--hero .bi-os__body,
.bi-os--hero .bi-showcase__stage {
  min-height: 520px !important;
  height: 520px !important;
}
.bi-os--hero .bi-panel,
.bi-os--hero .bi-panel__screen {
  overflow: hidden !important;
}

/* Gene logo in platform header — more left indent */
.bi-os--flush .bi-os__header {
  padding: 0 0 18px 18px !important;
}

/* Platform responsive — collapse rail + hide secondary chrome bits */
@media (max-width: 900px) {
  .bi-os--flush .bi-os__body {
    grid-template-columns: 1fr !important;
  }
  .bi-os--flush .bi-os__rail {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(10,10,10,0.08);
  }
  .bi-chrome--outer .bi-chrome__meta { display: none !important; }
}
@media (max-width: 600px) {
  .bi-chrome--outer .bi-chrome__title { display: none !important; }
}

/* ============================================================
   CONSISTENT HERO ANIMATIONS — match gene-page-hero rise on
   BI hero, case study hero, post hero, archive heads.
   ============================================================ */
.bi-hero__eyebrow,
.bi-hero__h,
.bi-hero__sub,
.bi-hero__ctas,
.bi-hero__stage,
.gw-case__eyebrow,
.gw-case__title,
.gw-case__meta,
.gw-case__cover,
.gw-post__eyebrow,
.gw-post__title,
.gw-post__meta,
.gw-post__cover,
.gw-archive__eyebrow,
.gw-archive__title,
.gw-archive__lead {
  opacity: 0;
  transform: translateY(20px);
  animation: gene-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.bi-hero__eyebrow       { animation-duration: .9s; animation-delay: .05s; transform: translateY(16px); }
.bi-hero__h             { animation-duration: 1.1s; animation-delay: .15s; transform: translateY(30px); }
.bi-hero__sub           { animation-duration: 1s; animation-delay: .35s; }
.bi-hero__ctas          { animation-duration: 1s; animation-delay: .5s; }
.bi-hero__stage         { animation-duration: 1.2s; animation-delay: .65s; transform: translateY(40px); }

.gw-case__eyebrow       { animation-duration: .9s; animation-delay: .05s; transform: translateY(16px); }
.gw-case__title         { animation-duration: 1.1s; animation-delay: .15s; transform: translateY(30px); }
.gw-case__meta          { animation-duration: 1s; animation-delay: .35s; }
.gw-case__cover         { animation-duration: 1.2s; animation-delay: .55s; transform: translateY(40px); }

.gw-post__eyebrow       { animation-duration: .9s; animation-delay: .05s; transform: translateY(16px); }
.gw-post__title         { animation-duration: 1.1s; animation-delay: .15s; transform: translateY(30px); }
.gw-post__meta          { animation-duration: 1s; animation-delay: .35s; }
.gw-post__cover         { animation-duration: 1.2s; animation-delay: .55s; transform: translateY(40px); }

.gw-archive__eyebrow    { animation-duration: .9s; animation-delay: .05s; transform: translateY(16px); }
.gw-archive__title      { animation-duration: 1.1s; animation-delay: .15s; transform: translateY(30px); }
.gw-archive__lead       { animation-duration: 1s; animation-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .bi-hero__eyebrow, .bi-hero__h, .bi-hero__sub, .bi-hero__ctas, .bi-hero__stage,
  .gw-case__eyebrow, .gw-case__title, .gw-case__meta, .gw-case__cover,
  .gw-post__eyebrow, .gw-post__title, .gw-post__meta, .gw-post__cover,
  .gw-archive__eyebrow, .gw-archive__title, .gw-archive__lead {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   CONTACT — gcf form styling (scoped to page)
   ============================================================ */
.gcf-wrap { width: 100%; box-sizing: border-box; }
.gcf-wrap .gcf-row { display: flex; gap: 16px; }
.gcf-wrap .gcf-field {
  display: flex; flex-direction: column; flex: 1; margin-bottom: 18px;
}
.gcf-wrap .gcf-field label {
  margin-bottom: 6px;
  font-family: 'Geist', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
}
.gcf-wrap .gcf-field input,
.gcf-wrap .gcf-field textarea {
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  color: #0a0a0a;
  background: #F2F2F2;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 13px 15px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.gcf-wrap .gcf-field input::placeholder,
.gcf-wrap .gcf-field textarea::placeholder { color: rgba(10,10,10,0.4); }
.gcf-wrap .gcf-field input:focus,
.gcf-wrap .gcf-field textarea:focus {
  border-color: #0a0a0a;
  background: #ffffff;
}
.gcf-wrap .gcf-field textarea { min-height: 140px; line-height: 1.55; }
.gcf-wrap .gcf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 15px 32px;
  background: #0a0a0a;
  color: #F2F2F2;
  font-family: 'Geist', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.gcf-wrap .gcf-submit:hover { opacity: 0.85; }
.gcf-wrap .gcf-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.gcf-msg {
  display: none;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: 'Geist', sans-serif;
  font-size: 0.9rem;
  text-align: center;
}
.gcf-msg.success { background: #edf6ed; color: #2a5c2a; display: block; }
.gcf-msg.error   { background: #fce8e6; color: #c5221f; display: block; }
@media (max-width: 480px) {
  .gcf-wrap .gcf-row { flex-direction: column; gap: 0; }
}