/* ==========================================================================
   Influex Homepage — page-specific styles
   Tokens + base UI-kit patterns come from the local design system.
   Only new or extended patterns live here.
   ========================================================================== */

@import url('Influex%20Design%20System/colors_and_type.css');
@import url('Influex%20Design%20System/ui_kits/website/site.css');

/* ------------------------------------------------------------------
   Site-wide paragraph weight — book/regular. Stops any imported
   design-system rule from rendering body copy at a heavier weight.
------------------------------------------------------------------ */
p { font-weight: 400; }

/* ------------------------------------------------------------------
   Shared section scaffolding
------------------------------------------------------------------ */
.ix-section {
  position: relative;
  padding: 140px 64px;
  overflow: hidden;
}
.ix-section--tight { padding: 96px 64px; }
.ix-section--divider { border-top: 1px solid rgba(255,255,255,0.06); }
/* Suppress the hairline divider on whatever section immediately
   follows the portfolio — the portfolio ends on a tinted wash and
   the 1px line reads as a visible seam against it. */
.ix-portfolio2 + .ix-section--divider { border-top: 0; }
/* Comparison section's bg starts as #03050f (matching twoways)
   and fades to white as the user scrolls — a divider border-top
   would render as a visible 1px seam during the dark phase. */
.ix-twoways-stage + .ix-section--divider { border-top: 0; }
.ix-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.ix-inner--wide { max-width: 1400px; }
.ix-inner--narrow { max-width: 820px; }

.ix-section-eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 22px;
}
.ix-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 4.8vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 28px;
}
.ix-section-title b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: grad-sweep 12s linear infinite;
}
.ix-section-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.4;
  color: var(--fg-2);
  text-align: center;
  text-wrap: balance;
  margin: 0 auto 64px;
  max-width: 900px;
}
.ix-section-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
  text-wrap: pretty;
}
.ix-section-body p { margin: 0 0 14px; }
.ix-section-body p:last-child { margin-bottom: 0; }

.ix-hairline {
  display: block; height: 1px; border: 0;
  /* Symmetric tapered gold→mauve so both ends fade. The original
     --grad-ceremonial token only fades on the left and ends abruptly
     in solid mauve on the right — visually unbalanced under a
     centered headline. */
  background: linear-gradient(90deg,
    rgba(217, 185, 125, 0)   0%,
    rgba(217, 185, 125, 0.95) 32%,
    rgba(189, 166, 216, 0.85) 68%,
    rgba(189, 166, 216, 0)   100%);
  max-width: 240px; margin: 0 auto 40px;
  opacity: 0.7;
}
.ix-hairline--wide { max-width: 600px; }

/* ------------------------------------------------------------------
   Nav — fully transparent over hero. A separate fixed scrim element
   (.ix-nav-scrim) supplies the dark gradient so it can spill below the
   nav without fighting the nav's sticky stacking context.
------------------------------------------------------------------ */
.ix-nav {
  /* Fixed (not sticky) so the hero + collage extend all the way up behind
     the nav. Without this the body's black background sits above the hero
     and reads as a solid dark bar — even with a transparent nav. */
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease;
}
.ix-nav.is-scrolled {
  background: rgba(0,0,0,0.9) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border-bottom-color: rgba(255,255,255,0.06);
}
.ix-nav-scrim {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 49;                     /* just below the nav (z-index 50) */
  /* Top-to-transparent fade. Strong enough at the top to clearly read as a
     darkening behind the logo/links, softly dissolving into the collage. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.50) 45%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.08) 88%,
    rgba(0,0,0,0) 100%);
  opacity: 1;
  transition: opacity 320ms ease;
}
.ix-nav-scrim.is-hidden { opacity: 0; }

/* ------------------------------------------------------------------
   Hero — overrides for a denser, more editorial stack
------------------------------------------------------------------ */
.ix-hero { padding: 170px 64px 72px; }
.ix-hero .ix-hero-inner { z-index: 3; }
.ix-hero .ix-hero-bloom-1 { z-index: 2; opacity: 0.55; }
/* bloom-2 is a purple radial gradient at bottom-right of the hero
   in the design system — its halo bleeds into the face marquee
   area as a faint purple light. Hidden here at the page level so
   the design system file stays untouched. */
.ix-hero .ix-hero-bloom-2 { display: none; }
.ix-hero .ix-face-marquee { position: relative; z-index: 3; }
.ix-hero .ix-hero-sub {
  letter-spacing: 0;
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 300;
  color: rgba(254,247,223,0.8);
  margin-top: 26px;
}
.ix-hero-sub strong {
  font-weight: 600;
  color: inherit;
}

/* Headline stage — pre-hook and H1 occupy the SAME grid cell so they
   cross-fade in place at the same vertical position. */
.ix-hero-headline-stage {
  display: grid;
  grid-template-areas: "stage";
  justify-items: center;
  align-items: center;
  width: 100%;
}
.ix-hero-prehook,
.ix-hero-headline-stage > .ix-hero-h1 {
  grid-area: stage;
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* Force the flex column children (spans) to center horizontally —
     the design-system's .ix-hero-h1 uses flex column without
     align-items, so each line stretches full width and the text-align
     fallback can be inconsistent across browsers. */
  align-items: center;
  justify-content: center;
  /* Disable text-wrap: balance from the design system — it
     redistributes characters in ways that can visually offset lines. */
  text-wrap: normal;
}

/* H1 scaled down to accommodate THREE main lines (Iconic Brands /
   World-Class Websites / & Quality Content) in the same vertical
   space the original two-line headline used. Roughly 2/3 of the
   prehook size keeps the three lines reading at the same overall
   block weight as the prior two-line treatment. The .ix-hero-sub
   span keeps its own (smaller) font-size from .ix-hero-sub below. */
.ix-hero-headline-stage > .ix-hero-h1 {
  /* Bumped 20% larger than the previous clamp(30, 3.6vw, 60) so
     the new single-line copy (with comma) has more presence. */
  font-size: clamp(36px, 4.3vw, 72px);
  line-height: 1.1;
  /* Ensure the headline span centers cleanly on mobile when the
     copy wraps to multiple lines. Without explicit text-align +
     mx-auto + max-width, the wrapped lines can sit asymmetrically
     on narrow viewports. */
  text-align: center;
  max-width: min(1300px, 95vw);
  margin-inline: auto;
}

/* Pre-hook — mirrors the H1 exactly. Regular text in solid ivory,
   <b> highlights painted with the authority-glow gradient (same
   pattern as .ix-hero-h1). Two stacked lines (no wrap). Fades IN
   on load, then OUT before the H1 takes its place. */
.ix-hero-prehook {
  margin: 0;
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-weight: 300;
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--fg-1, #FEF7DF);
  /* Match the H1's flex column layout so the two lines line up
     vertically and horizontally with the H1 in the shared grid cell. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ix-hero-prehook > span {
  display: block;
  white-space: nowrap;
  text-align: center;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(8px);
}
/* Force every H1 span to center too — by default the flex column
   from site.css stretches them; align-self overrides per-line so
   the line widths visually center under the same axis. */
.ix-hero-headline-stage > .ix-hero-h1 > span {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Line 1: ALL WHITE, regular weight, 60% of the parent prehook size
   (smaller so it reads as a setup line for the gold punchline below).
   Fades in at ~0.3s, holds, fades out at ~5.5s. Total animation
   window: 0.3s → 6.5s = 6.2s. */
.ix-hero-prehook-line--white {
  color: var(--fg-1, #FEF7DF);
  font-weight: 300;
  font-size: 0.6em;
  line-height: 1.15;
  letter-spacing: 0;
}
.ix-hero-prehook > .ix-hero-prehook-line--white {
  animation: ix-hero-prehook-line-1 4.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 0.3s forwards;
}
@keyframes ix-hero-prehook-line-1 {
  0%   { opacity: 0; transform: translateY(8px);  filter: blur(0); }
  24%  { opacity: 1; transform: translateY(0);    filter: blur(0); }    /* fully in (t≈1.3s) */
  76%  { opacity: 1; transform: translateY(0);    filter: blur(0); }    /* hold until t≈3.5s */
  100% { opacity: 0; transform: translateY(-8px); filter: blur(12px); } /* blurred out (t≈4.5s) */
}

/* Line 2: ALL AUTHORITY GRADIENT, bold. Has a longer delay (2.5s)
   so the audience reads line 1 first. Fades out together with
   line 1 at ~5.5s. Total animation window: 2.5s → 6.5s = 4.0s. */
.ix-hero-prehook-line--gold {
  font-weight: 700;
  /* Looser line-height + a touch of bottom padding so descenders
     (the 'g' in "Branding") aren't clipped by background-clip:text. */
  line-height: 1.15;
  padding-bottom: 0.08em;
  background-image: linear-gradient(90deg,
    #F2E8D8  0%,
    #D9B97D 18%,
    #C98A73 35%,
    #BDA6D8 50%,
    #C98A73 65%,
    #D9B97D 82%,
    #F2E8D8 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-hero-prehook > .ix-hero-prehook-line--gold {
  animation:
    ix-hero-prehook-line-2 3.0s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1.5s forwards,
    ix-hero-grad-loop 18s linear infinite;
  will-change: opacity, transform, background-position;
}
@keyframes ix-hero-prehook-line-2 {
  0%   { opacity: 0; transform: translateY(8px);  filter: blur(0); }
  20%  { opacity: 1; transform: translateY(0);    filter: blur(0); }    /* fully in (t≈2.1s) */
  67%  { opacity: 1; transform: translateY(0);    filter: blur(0); }    /* hold until t≈3.5s — synced with white line */
  100% { opacity: 0; transform: translateY(-8px); filter: blur(12px); } /* blurred out (t≈4.5s) */
}
/* H1 starts hidden, fades IN as both pre-hook lines are fading out
   (~6.3s) so it lands cleanly on the same grid cell after the
   pre-hook clears. */
.ix-hero-headline-stage > .ix-hero-h1 {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(14px);
  animation: ix-hero-h1-in 1.8s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 4.0s forwards;
  will-change: opacity, filter, transform;
}
@keyframes ix-hero-h1-in {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(14px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* Stats + "As Featured In" — only appear AFTER the H1 has fully
   landed (~7.7s) plus a small delay (~0.3s) so the hero settles
   before the credibility row arrives. */
.ix-hero-stat,
.ix-hero-featured {
  opacity: 0;
  transform: translateY(14px);
  animation: ix-hero-stats-in 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 5.7s forwards;
}
.ix-hero-featured { animation-delay: 5.7s; }
@keyframes ix-hero-stats-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-hero-prehook { display: none; }
  .ix-hero-headline-stage > .ix-hero-h1,
  .ix-hero-stat,
  .ix-hero-featured { opacity: 1; transform: none; filter: none; animation: none; }
}

/* Hero <b> highlights ("Iconic Brands" / "World-Class Websites") —
   the only words painted with the authority-glow gradient. The rest
   of the H1 keeps its solid ivory color. Palindromic gradient
   (ivory → gold → copper → mauve → copper → gold → ivory) animates
   horizontally for a slow traveling glow without a visible seam. */
.ix-hero-h1 b {
  background-image: linear-gradient(90deg,
    #F2E8D8  0%,
    #D9B97D 18%,
    #C98A73 35%,
    #BDA6D8 50%,
    #C98A73 65%,
    #D9B97D 82%,
    #F2E8D8 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ix-hero-grad-loop 18s linear infinite;
  will-change: background-position;
}
@keyframes ix-hero-grad-loop {
  from { background-position:    0% 50%; }
  to   { background-position: -200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-hero-h1 b { animation: none !important; }
}

/* Site-wide: every <b> highlight inside a section title gets the same
   seamless palindromic traveling-glow animation as the hero headline.
   `!important` promotes the animation over the scattered static
   `.ix-section-title b { background: var(--grad-authority); ... }` rules
   below without touching each one individually. */
.ix-section-title b {
  background-image: linear-gradient(90deg,
    #F2E8D8  0%,
    #D9B97D 18%,
    #C98A73 35%,
    #BDA6D8 50%,
    #C98A73 65%,
    #D9B97D 82%,
    #F2E8D8 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  animation: ix-hero-grad-loop 18s linear infinite !important;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  .ix-section-title b { animation: none !important; }
}

/* Hero stats — 15 / 240 in a centered row, tail line centered below */
.ix-hero-stat {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(254,247,223,0.7);
}
.ix-hero-stat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}
.ix-hero-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ix-hero-stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 6.8vw, 92px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* "+" suffix on 240 — added via pseudo-element so the JS counter
   (which overwrites textContent on every tick) doesn't clobber it. */
.ix-hero-stat-num--plus::after {
  content: "+";
}
.ix-hero-stat-label {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.20em;
  color: rgba(254,247,223,0.72);
}
.ix-hero-stat-divider {
  width: 1px; height: 72px;
  background: var(--grad-ceremonial);
  opacity: 0.55;
}
.ix-hero-stat-tail {
  max-width: none;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(254,247,223,0.92);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* Hero · As Featured In row — sits between the stats and the carousel */
.ix-hero-featured {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2vw, 28px);
  flex-wrap: wrap;
}
.ix-hero-featured-label {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(254,247,223,0.55);
}
.ix-hero-featured-sep {
  display: inline-block;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, rgba(236,199,119,0) 0%, rgba(236,199,119,0.55) 50%, rgba(236,199,119,0) 100%);
}
.ix-hero-featured-logo {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1) opacity(0.72);
  transition: filter 240ms ease;
}
.ix-hero-featured-logo:hover { filter: brightness(0) invert(1) opacity(1); }
.ix-hero-featured-pipe {
  color: rgba(254,247,223,0.25);
  font-weight: 300;
  font-size: 18px;
  line-height: 1;
}
/* Sans-serif text "logo" — used for outlets without a real
   logotype asset (e.g., INC 5000). Sans-serif uppercase reads
   denser than the thin serif strokes of Forbes/Entrepreneur even
   at the same opacity, so we dim it further (0.55) and drop the
   weight (500) to optically match the perceived brightness of
   the SVG logos next to it. */
.ix-hero-featured-text {
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  transition: color 240ms ease;
}
.ix-hero-featured-text:hover {
  color: rgba(255, 255, 255, 1);
}

/* ------------------------------------------------------------------
   Polygon buttons — Authority Glow gradient-stroked polygon, truly
   transparent interior so the page shows through the chevron outline.
   Implementation: each button wraps its label in an inline <svg> with a
   stroked polygon that references the shared #ix-grad-auth gradient def.
   vector-effect="non-scaling-stroke" keeps the 1.5px stroke constant
   regardless of button size. Hover fills the polygon via CSS `fill` —
   which overrides the SVG `fill="none"` attribute.
------------------------------------------------------------------ */

/* Neutralize every background / border / radius that the design system
   applies to these classes — the visible shape is 100% the inline SVG. */
.ix-cta-pill,
.btn,
.btn--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #FEF7DF;
  text-decoration: none;
  padding: 18px clamp(36px, 4vw, 56px);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer;
  transition: color 220ms var(--ease-quint),
              transform 220ms var(--ease-quint);
}
.ix-cta-pill:hover,
.btn:hover,
.btn--primary:hover {
  background: transparent !important; /* kill site.css gold rectangle wash */
  color: var(--color-obsidian, #000);
  transform: translateY(-1px);
}
.ix-cta-pill:active,
.btn:active,
.btn--primary:active { transform: translateY(0) scale(0.985); }

/* Inline SVG polygon stroke — full-bleed inside the button. The label span
   sits on top at the default stacking order. */
.ix-cta-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;    /* stroke can sit flush with viewport edges */
  z-index: 0;
}
.ix-cta-stroke polygon {
  fill: transparent;
  transition: fill 220ms var(--ease-quint);
}
.ix-cta-pill:hover .ix-cta-stroke polygon,
.btn:hover .ix-cta-stroke polygon,
.btn--primary:hover .ix-cta-stroke polygon {
  fill: url(#ix-grad-auth);
}
.ix-cta-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Filled variant — gold-gradient body by default, dark ink label.
   Used for high-emphasis CTAs (e.g. the hero "Book a Call"). */
.btn--filled .ix-cta-stroke polygon { fill: url(#ix-grad-auth); }
.btn--filled,
.btn--filled:hover { color: #1a1208; }
.btn--filled:hover .ix-cta-stroke polygon { filter: brightness(1.08); }

/* Tighter nav CTA */
.ix-cta-pill {
  font-size: 11px;
  padding: 14px 32px;
  letter-spacing: 0.4em;
}

/* ------------------------------------------------------------------
   Hero collage — diagonal columns of client homepage screenshots,
   alternating scroll direction. Sits behind the hero copy.
------------------------------------------------------------------ */
.ix-hero-collage {
  position: absolute;
  /* Constrain the collage to the upper portion of the hero so it doesn't
     bleed into the carousel — the band below fades to pure black. */
  top: 0; left: 0; right: 0;
  bottom: 42%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ix-collage-stage {
  position: absolute;
  /* oversized + rotated so the diagonal strips fully cover the hero */
  top: 50%; left: 50%;
  width: 180%;
  height: 260%;
  transform: translate(-50%, -50%) rotate(-20deg);
  display: flex;
  justify-content: space-between;
  gap: clamp(14px, 1.4vw, 28px);
  padding: 0 1vw;
  opacity: 0.42;
  filter: saturate(0.8) contrast(0.98) brightness(0.72);
}
.ix-collage-col {
  flex: 1 1 0;
  min-width: 0;
  display: block;              /* block instead of flex — each image owns its spacing */
  animation: ix-collage-up 60s linear infinite;
  animation-delay: var(--col-delay, 0s);
  animation-timing-function: linear;
  will-change: transform;
  backface-visibility: hidden;
}
.ix-collage-col--down {
  animation-name: ix-collage-down;
  animation-duration: 72s;
}
.ix-collage-col img {
  width: 100%;
  height: auto;
  display: block;
  /* Margin (not flex-gap) makes each slot = image + constant gap, so translating
     by -50% lands exactly on the duplicate set. No visible seam. */
  margin-bottom: clamp(14px, 1.4vw, 22px);
  border-radius: 14px;
  box-shadow:
    0 20px 40px -24px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

@keyframes ix-collage-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes ix-collage-down {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.ix-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Center scrim behind the headline (soft, non-stacking with the nav scrim) */
    radial-gradient(ellipse 55% 50% at 50% 52%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.1) 100%),
    /* Bottom-only feather so the collage dissolves to pure black before the carousel.
       No top darkening here — the nav scrim already handles that and stacking would cause a visible seam. */
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 72%, #000 90%, #000 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ix-collage-col { animation: none; }
}

/* ------------------------------------------------------------------
   Face carousel — full-bleed, auto-scroll with proximity spotlight.
   Center card: full color + scaled up. Rest: grayscale + shrunk.
   Card structure: photo stage (photo + logo) > quote > name.
------------------------------------------------------------------ */
.ix-face-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* break out of hero container to true edges */
  margin-top: 36px;
  padding: 24px 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  /* Fades in alongside the stats + featured logos. */
  opacity: 0;
  transform: translateY(16px);
  animation: ix-face-marquee-in 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 5.7s forwards;
}
@keyframes ix-face-marquee-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-face-marquee { opacity: 1; transform: none; animation: none; }
}
.ix-face-marquee::before,
.ix-face-marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 12%;
  pointer-events: none;
  z-index: 2;
}
.ix-face-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.98) 0%, transparent 100%);
}
.ix-face-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.98) 0%, transparent 100%);
}

.ix-face-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 32px);
  width: max-content;
  padding: 60px 0 48px;        /* vertical room for the scaled-up center card */
  animation: ix-face-scroll 66s linear infinite;
  will-change: transform;
}
.ix-face-marquee:hover .ix-face-track { animation-play-state: paused; }

@keyframes ix-face-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ix-face-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 18vw, 280px);
  margin: 0;
  display: flex;
  flex-direction: column;
  transform: scale(0.84);
  transform-origin: center;
  transition: transform 450ms var(--ease-quint);
  z-index: 1;
  cursor: pointer;
  outline: none;
}
.ix-face-card:focus-visible .ix-face-stage {
  box-shadow:
    inset 0 0 0 1px rgba(236,199,119,0.5),
    0 0 0 3px rgba(236,199,119,0.35);
}
.ix-face-card.is-active {
  transform: scale(1.14);
  z-index: 10;
}

/* Photo stage — dark frame holding portrait + logo overlay */
.ix-face-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(110% 70% at 50% 0%, #1C1C1C 0%, #0A0A0A 55%, #000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(236, 199, 119, 0.08),
    0 20px 40px -24px rgba(0,0,0,0.85);
  filter: grayscale(1) brightness(0.58) contrast(0.95);
  transition:
    filter 450ms var(--ease-quint),
    box-shadow 450ms var(--ease-quint);
}
.ix-face-card.is-active .ix-face-stage {
  filter: grayscale(0) brightness(1.06) contrast(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(236, 199, 119, 0.50),
    0 70px 110px -24px rgba(0,0,0,0.85),
    0 0 90px rgba(236, 199, 119, 0.22);
}

.ix-face-photo {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  z-index: 1;
}
.ix-face-stage::before {
  /* champagne bloom behind the head — lit only on active card */
  content: "";
  position: absolute;
  left: 50%; top: 18%;
  width: 80%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(236,199,119, 0) 0%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  transition: background 450ms var(--ease-quint);
}
.ix-face-card.is-active .ix-face-stage::before {
  background: radial-gradient(50% 50% at 50% 50%, rgba(236,199,119, 0.32) 0%, transparent 70%);
}
.ix-face-stage::after {
  /* bottom darken so logo reads on gradient floor */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 2;
}
.ix-face-logo {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  max-width: 72%;
  max-height: 18%;
  width: auto; height: auto;
  object-fit: contain;
  z-index: 3;
  opacity: 0.72;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transition: opacity 450ms var(--ease-quint);
}
.ix-face-card.is-active .ix-face-logo { opacity: 1; }

.ix-face-quote {
  margin: 22px 12px 14px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.55;
  color: var(--fg-3);
  text-align: center;
  min-height: 4.6em;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  opacity: 0.55;
  transition: color 450ms var(--ease-quint), opacity 450ms var(--ease-quint);
}
.ix-face-card.is-active .ix-face-quote {
  color: var(--fg-1);
  opacity: 1;
}
.ix-face-quote--placeholder { opacity: 0.35; }
.ix-face-card.is-active .ix-face-quote--placeholder { opacity: 0.7; }

.ix-face-name {
  text-align: center;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-3);
  /* 20px gap above so the name doesn't touch the bottom edge of
     the portrait card. (When testimonials were visible, the
     blockquote provided this breathing room — now that they're
     hidden, we need explicit top margin.) */
  margin-top: 20px;
  padding: 0 8px 8px;
  transition: color 450ms var(--ease-quint);
}
.ix-face-card.is-active .ix-face-name {
  color: var(--color-champagne);
}

@media (prefers-reduced-motion: reduce) {
  .ix-face-track { animation: none; }
  .ix-face-card { transform: none; }
  .ix-face-stage { filter: none; }
}

@media (max-width: 900px) {
  .ix-face-marquee { margin-top: 64px; padding: 40px 0 32px; }
  .ix-face-track { gap: 16px; padding: 40px 0 32px; animation-duration: 48s; }
  .ix-face-card { width: clamp(170px, 48vw, 220px); }
}

/* ------------------------------------------------------------------
   Guide CTA — centered opt-in card on a quiet dark section. Book left,
   copy right, vertically centered. The card itself is the embossed
   element; the surrounding section stays plain so the card pops.
------------------------------------------------------------------ */
.ix-guide {
  padding: 96px 24px;
  background: var(--bg-0);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ix-guide-inner {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 64px;
  /* Embossed card: warm bloom top-left, cool accent bottom-right,
     over a vertical graphite lift so it reads distinct from the section. */
  background:
    radial-gradient(700px 360px at 18% -10%, rgba(236,199,119,0.12), transparent 60%),
    radial-gradient(600px 320px at 92% 110%, rgba(214,147,255,0.06), transparent 70%),
    linear-gradient(180deg, #16120F 0%, #1B1613 55%, #0E0C0B 100%);
  border: 1px solid rgba(236,199,119,0.22);
  box-shadow:
    inset 0 1px 0 rgba(236,199,119,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 40px 80px -30px rgba(0,0,0,0.8);
}
/* Gradient ceremonial hairline along the top edge of the card. */
.ix-guide-inner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--grad-ceremonial);
  opacity: 0.7;
  pointer-events: none;
}

/* Left column: CSS-drawn book, sized to sit inside the card. */
.ix-guide-book {
  position: relative;
  width: 200px;
  height: 286px;
  margin: 0 auto;
  transform: perspective(1400px) rotateY(-10deg) rotateX(1deg);
  transform-origin: right center;
  filter: drop-shadow(0 40px 40px rgba(0,0,0,0.7))
          drop-shadow(0 12px 18px rgba(0,0,0,0.55));
}
.ix-guide-book-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(236,199,119,0.18), transparent 55%),
    linear-gradient(145deg, #1F1712 0%, #261A13 40%, #140E0C 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,199,119,0.28),
    inset 0 0 0 1px rgba(236,199,119,0.14),
    inset 0 -40px 80px rgba(0,0,0,0.55);
}
.ix-guide-book-frame {
  position: absolute;
  inset: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgba(236,199,119,0.22);
  padding: 22px 18px 24px;
}
.ix-guide-book-eyebrow {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.58em;
  text-transform: uppercase;
  background-image: var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-bottom: auto;
}
.ix-guide-book-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-ivory);
  margin: 30px 0 14px;
}
.ix-guide-book-rule {
  width: 36px; height: 1px;
  background: var(--color-champagne);
  opacity: 0.7;
  margin-bottom: 14px;
}
.ix-guide-book-tag {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--color-champagne);
  opacity: 0.82;
}
/* Spine — dark rib along the left edge of the cover. */
.ix-guide-book-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.35) 55%,
    rgba(0,0,0,0) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Pages — thin striped band suggesting the fore-edge of pages. */
.ix-guide-book-pages {
  position: absolute;
  right: -4px; top: 5px; bottom: 5px;
  width: 4px;
  background:
    repeating-linear-gradient(180deg,
      rgba(254,247,223,0.85) 0,
      rgba(254,247,223,0.85) 1px,
      rgba(60,48,36,0.75) 1px,
      rgba(60,48,36,0.75) 2px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
  z-index: 1;
}

/* Right column: text + CTA */
.ix-guide-copy { text-align: left; }
.ix-guide-eyebrow {
  display: inline-block;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.56em;
  text-transform: uppercase;
  background-image: var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-bottom: 18px;
}
.ix-guide h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ix-guide p {
  max-width: 620px;
  margin: 0 0 12px;
  color: var(--fg-2);
  font-size: 16px;
}
.ix-guide p.ix-guide-meta {
  color: var(--fg-3);
  font-size: 13px;
  margin: 0 0 32px;
  font-style: italic;
}

@media (max-width: 860px) {
  .ix-guide { padding: 72px 16px; }
  .ix-guide-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 40px;
    padding: 48px 32px;
  }
  .ix-guide-book { transform: perspective(1400px) rotateY(-6deg); }
  .ix-guide-copy { text-align: center; }
  .ix-guide h2, .ix-guide p { margin-left: auto; margin-right: auto; }
}

/* ------------------------------------------------------------------
   Trusted By / Featured In — upgraded
------------------------------------------------------------------ */
.ix-featured-row {
  margin-top: 28px;
  display: flex; justify-content: center; align-items: center;
  gap: 64px; flex-wrap: wrap;
  color: rgba(254,247,223,0.85);
}

.ix-trust {
  padding: 96px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.ix-trust .ix-eyebrow { padding: 0 64px; }

/* Two-row logo marquee. Each row is an independent overflow-hidden band
   with a flex track that animates a translate-x from 0 to -50% (or the
   reverse). Every row's track contains its unique logos duplicated once,
   so landing at -50% lines up perfectly with the second copy = seamless. */
.ix-trust-marquee {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ix-trust-row {
  overflow: hidden;
  width: 100%;
}
.ix-trust-track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5vw, 96px);
  width: max-content;
  padding: 8px 0;
  will-change: transform;
}
.ix-trust-row--left .ix-trust-track {
  animation: ix-trust-scroll-left 60s linear infinite;
}
.ix-trust-row--right .ix-trust-track {
  animation: ix-trust-scroll-right 72s linear infinite;
}
.ix-trust-row:hover .ix-trust-track { animation-play-state: paused; }

@keyframes ix-trust-scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes ix-trust-scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.ix-trust-logo {
  flex: 0 0 auto;
  height: 40px;
  width: auto;
  max-width: 180px;
  /* Force every logo to a uniform ivory silhouette so the wall reads as
     one premium roster rather than a mismatched clip-art grid. */
  filter: brightness(0) invert(1) opacity(0.7);
  transition: filter 240ms ease, transform 240ms ease;
}
.ix-trust-logo:hover {
  filter: brightness(0) invert(1) opacity(1);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .ix-trust-track { animation: none; }
}
@media (max-width: 720px) {
  .ix-trust-logo { height: 28px; max-width: 140px; }
  .ix-trust-track { gap: 40px; }
}

/* ------------------------------------------------------------------
   AI Tool / Brand Elevation Engine — interactive section
------------------------------------------------------------------ */
.ix-engine {
  position: relative;
  padding: 140px 48px 160px;
  background: #050403;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(236,199,119,0.08);
  border-bottom: 1px solid rgba(236,199,119,0.08);
}

/* Cinematic background: tiny celestial orb + dotted constellation rings
   + scattered particles + clean horizon beam. Uses small, tight glows
   instead of one giant blob so there's no visible halo/disc edge. */
.ix-engine-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.ix-engine-rings {
  position: absolute;
  left: 50%; top: 0;
  width: min(1600px, 140vw);
  height: 1000px;
  transform: translateX(-50%);
  opacity: 1;
  mix-blend-mode: screen;
}
/* Futuristic horizon: thin bright seam at the bottom with a wide
   bloom rising above it, layered to read as a "light at the end
   of the road" rather than a round blob. */
.ix-engine-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 28% 20% at 50% 100%,
      rgba(255,240,205,0.70) 0%,
      rgba(242,215,160,0.40) 28%,
      rgba(217,185,125,0.14) 55%,
      transparent 80%),
    radial-gradient(ellipse 70% 60% at 50% 115%,
      rgba(217,185,125,0.22) 0%,
      rgba(217,185,125,0.08) 45%,
      transparent 80%);
}
.ix-engine-horizon::before {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 70%; height: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,240,205,0.35) 20%,
    rgba(255,240,205,0.9) 50%,
    rgba(255,240,205,0.35) 80%,
    transparent 100%);
  filter: blur(0.6px);
}

/* 2-column grid: copy | (input + analyze + secure + live example stacked) */
.ix-engine-grid {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

/* ---- LEFT: copy column ---- */
.ix-engine-copy { text-align: left; }
.ix-engine-copy .ix-eyebrow { display: inline-block; }
.ix-engine-copy .ix-hairline { margin-left: 0; margin-right: auto; }
.ix-engine-copy .ix-section-title { text-align: left; }
.ix-engine-copy .ix-section-body { text-align: left; }
/* Tightened headline so "Try the Brand / Elevation Engine." fits in 2 lines. */
.ix-engine-title {
  font-size: clamp(32px, 3.6vw, 54px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.015em !important;
}

/* ---- RIGHT: input + analyze + secure + live example stacked ---- */
.ix-engine-right {
  display: flex; flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}

/* Pill input with gradient border and glowing orb button */
.ix-engine-form {
  position: relative;
  display: flex; align-items: center;
  width: 100%;
  padding: 6px;
  border-radius: 9999px;
  background:
    linear-gradient(#0A0908, #0A0908) padding-box,
    linear-gradient(90deg, #D9B97D 0%, #C98A73 40%, #BDA6D8 70%, #D9B97D 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 0 60px -8px rgba(217,185,125,0.35),
    0 0 20px -4px rgba(242,232,216,0.18),
    inset 0 0 30px rgba(217,185,125,0.05);
  transition: box-shadow 260ms var(--ease-quint);
}
.ix-engine-form:focus-within {
  box-shadow:
    0 0 80px -6px rgba(217,185,125,0.55),
    0 0 28px -4px rgba(242,232,216,0.3),
    inset 0 0 30px rgba(217,185,125,0.08);
}
.ix-engine-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent; border: 0; outline: none;
  padding: 20px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #F2E8D8;
}
.ix-engine-input::placeholder {
  color: rgba(242,232,216,0.42);
}
.ix-engine-submit {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  margin-right: 2px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FBF2DD 0%, #E9CE95 35%, #C9A35E 70%, #8E6A32 100%);
  box-shadow:
    0 0 32px rgba(217,185,125,0.6),
    0 0 12px rgba(242,232,216,0.5),
    inset 0 -4px 10px rgba(0,0,0,0.25),
    inset 0 2px 6px rgba(255,255,255,0.4);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform 240ms var(--ease-quint), box-shadow 240ms var(--ease-quint);
}
.ix-engine-submit:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 46px rgba(217,185,125,0.85),
    0 0 16px rgba(242,232,216,0.6),
    inset 0 -4px 10px rgba(0,0,0,0.25),
    inset 0 2px 6px rgba(255,255,255,0.5);
}
.ix-engine-submit:active { transform: scale(0.98); }
.ix-engine-submit-icon {
  width: 22px; height: 21px;
  display: block;
}

/* Secure + meta footnote — centered, stacked two lines */
.ix-engine-secure {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(242,232,216,0.72);
  text-align: center;
}
.ix-engine-secure-item {
  display: inline-flex; align-items: center; gap: 8px;
}
.ix-engine-secure-item svg {
  width: 16px; height: 16px; color: #D9B97D;
  flex: 0 0 auto;
}
.ix-engine-secure-meta {
  font-style: italic;
  color: var(--fg-3);
}

/* ---- Live example block (inside .ix-engine-right) ---- */
.ix-engine-live {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 12px;
}
.ix-engine-live-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #D9B97D;
  margin-bottom: 4px;
}
.ix-engine-chat {
  display: flex; flex-direction: column; gap: 14px;
}
.ix-engine-bubble {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(20,17,14,0.78);
  border: 1px solid rgba(236,199,119,0.14);
  color: #F2E8D8;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  backdrop-filter: blur(2px);
}
.ix-engine-bubble-label {
  font-weight: 500;
  font-size: 13px;
  color: #F2E8D8;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.ix-engine-bubble-body {
  color: rgba(242,232,216,0.82);
}
.ix-engine-bubble--thinking .ix-engine-bubble-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.ix-engine-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(217,185,125,0.22);
  border-top-color: #D9B97D;
  animation: ix-engine-spin 900ms linear infinite;
  flex: 0 0 auto;
}
@keyframes ix-engine-spin { to { transform: rotate(360deg); } }

/* Thinking / insight state transitions */
.ix-engine-chat.is-thinking .ix-engine-bubble--insight {
  opacity: 0.35;
  filter: blur(0.5px);
}
.ix-engine-chat:not(.is-thinking) .ix-engine-bubble--thinking {
  opacity: 0.5;
}
.ix-engine-bubble--insight,
.ix-engine-bubble--thinking {
  transition: opacity 300ms var(--ease-quint), filter 300ms var(--ease-quint);
}

@media (prefers-reduced-motion: reduce) {
  .ix-engine-spinner { animation: none; }
}

/* ---- Footer CTA row: "Need help with your brand?" + button ---- */
.ix-engine-footer {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 72px auto 0;
  padding-top: 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(236,199,119,0.14);
}
.ix-engine-footer-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.01em;
  color: #F2E8D8;
}

/* Tablet: collapse to single column */
@media (max-width: 900px) {
  .ix-engine-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .ix-engine { padding: 96px 20px 110px; }
  .ix-engine-input { padding: 16px 18px; font-size: 14px; }
  .ix-engine-submit { width: 48px; height: 48px; }
  .ix-engine-footer { margin-top: 56px; padding-top: 32px; gap: 18px; }
}

/* ------------------------------------------------------------------
   Social Proof — "15 Years. 240 Iconic Brands."
   Scroll-driven 3D gallery stage.

   Layout: .ix-proof is 400vh tall. .ix-proof-pin sticks at top for
   a full viewport. Inside the pin, everything is absolutely
   positioned. The scroll handler (index.html) reads section
   progress (0..1) and writes CSS custom properties:
     --rx      gallery rotateX (deg)
     --sc      gallery scale
     --gal-op  gallery opacity (fade in early, fade out before end)
     --ty      per-column Y translate (%) for parallax
     --stats-op / --ladder-op entry copy opacities (independent)
     --fade-op  black curtain opacity
     --final-op final copy opacity
------------------------------------------------------------------ */
.ix-proof {
  position: relative;
  /* 1250vh → 1700vh: even more scroll runway on the cards. The
     progress-driven internal animations keep their 0→1 mapping, they
     just play out across a much longer pin so the cards dominate the
     section before the final copy + fade-to-black takes over. The
     gallery rise + column parallax now span ~10+ viewports of scroll. */
  min-height: 1700vh;
  /* Override site.css's `.ix-proof { padding: 140px 64px }` (leftover
     from the old UI-kit proof section) — we need full-bleed here. */
  padding: 0;
  background: var(--bg-0);
  border-top: 0;
  border-bottom: 0;
}
.ix-proof-pin {
  position: sticky; top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 30rem;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: center top;
  /* NOTE: no `transform-style: preserve-3d` here. With preserve-3d
     the pin composes its children in shared 3D space and z-index is
     ignored — the gallery (rotated from center top, so its top edge
     sits at z=0) then paints OVER the stats/ladder at the top of
     the screen. 2D compositing with z-index is exactly what we
     want; perspective alone is enough to give the gallery depth. */
  background: var(--bg-0);
}

/* --- 3D gallery stage. Layout ported verbatim from
   animated-gallery.html (the reference): position:relative fills the
   sticky pin via width/height 100%, 8px padding + 8px gap, 16/9 cards,
   -50% stagger on middle column for the mosaic brick pattern. --- */
.ix-proof-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  transform-style: preserve-3d;
  transform-origin: center top;
  /* --gy translates the gallery down so its TOP sits clearly
     BELOW the hero copy. Starts at 60vh so the tilted cards
     first appear in the lower ~40% of the viewport, under the
     stats + ladder block. Animated from 60vh → 0vh in JS. */
  transform:
    translateY(var(--gy, 60vh))
    rotateX(var(--rx, 75deg))
    scale(var(--sc, 1.2));
  opacity: var(--gal-op, 0);
  will-change: transform, opacity;
  z-index: 1;
}
.ix-proof-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(var(--ty, 0%));
  will-change: transform;
}
/* All three columns align flush at the top. The reference's brick
   stagger (margin-top: -50% on col-2) only visually balances when
   the column is short (4 cards). With 10 cards the column is ~3×
   taller and the offset math breaks — col-2's first card ends up
   above the gallery's rotateX pivot and gets pushed out of the
   top-row position, leaving a hole. Keeping tops aligned gives
   the same clean top edge as the reference. */
.ix-proof-col[data-col="2"] { margin-top: 0; }

/* Grey placeholder cards. aspect 16/9 matches the reference
   demo's aspect-video — shorter cards, more rows visible. */
.ix-proof-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background-color: #0e0e0e;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Subtle gold-tone authority border — visible against dark imagery
     without competing with the card content. */
  border: 1px solid rgba(236, 199, 119, 0.28);
  box-shadow: 0 0 0 1px rgba(236, 199, 119, 0.06), 0 6px 20px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 10px 22px -8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Dim the client photos so they read as background texture,
     not hero content — matches the editorial/cinematic tone of
     the surrounding dark sections. */
  filter: brightness(0.62) saturate(0.9);
}
/* Subtle vignette on each card so edges blend into the black gallery
   padding instead of popping as sharp rectangles. */
.ix-proof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* --- Fade-to-black overlay --- */
.ix-proof-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--fade-op, 0);
  pointer-events: none;
  z-index: 2;
}

/* --- Entry copy overlay (numbers + two lines).
   Anchored toward the top of the pin (not center) so stats become
   visible as soon as the section scrolls into view from below —
   rather than waiting for the pin to fully engage and reveal the
   center. Stats + ladder fade in/out independently via
   --stats-op / --ladder-op. --- */
.ix-proof-entry {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(24px, 3vw, 40px);
  padding: 24px;
  text-align: center;
  pointer-events: none;
}

/* Numbers row */
.ix-proof-stats {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(40px, 6vw, 96px);
  opacity: var(--stats-op, 0);
  will-change: opacity;
}
.ix-proof-stat-block { text-align: center; }
.ix-proof-stat-num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(72px, 10vw, 150px);
  line-height: 1;
  letter-spacing: -0.04em;
  background-image: linear-gradient(90deg,
    #F2E8D8  0%, #D9B97D 18%, #C98A73 35%, #BDA6D8 50%,
    #C98A73 65%, #D9B97D 82%, #F2E8D8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: ix-hero-grad-loop 18s linear infinite;
}
.ix-proof-stat-label {
  margin-top: 14px;
  font-family: var(--font-micro); font-weight: 700;
  font-size: 11px; letter-spacing: 0.48em;
  color: var(--fg-2); text-transform: uppercase;
}
.ix-proof-stat-divider {
  width: 1px; height: clamp(80px, 10vw, 140px);
  background: linear-gradient(180deg,
    transparent, rgba(217,185,125,0.45), transparent);
}

/* Ladder (two lines) */
.ix-proof-ladder {
  display: flex; flex-direction: column;
  gap: 10px;
  opacity: var(--ladder-op, 0);
  will-change: opacity;
}
.ix-proof-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: rgba(242,232,216,0.85);
}
.ix-proof-line--hero {
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 400;
  color: #F2E8D8;
  letter-spacing: -0.01em;
}

/* --- Final copy stage (on black) --- */
.ix-proof-final-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
  opacity: var(--final-op, 0);
  will-change: opacity;
}
.ix-proof-final-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(242,232,216,0.92);
}
/* "We designed their Iconic Brands and World-Class Websites." —
   sized just slightly above the base final line so the long copy
   doesn't stretch wall-to-wall on wide screens. "We" rendered
   bolder inside a <b> tag. */
.ix-proof-final-line--lead {
  font-size: clamp(26px, 3vw, 44px);
  color: #F2E8D8;
}
.ix-proof-final-line--lead b {
  font-weight: 700;
}
/* "Now it's your turn." — entire line gets the hero gradient sweep,
   same palette and keyframe as the hero title. */
.ix-proof-final-line--accent {
  font-weight: 700;
  background-image: linear-gradient(90deg,
    #F2E8D8  0%, #D9B97D 18%, #C98A73 35%, #BDA6D8 50%,
    #C98A73 65%, #D9B97D 82%, #F2E8D8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: ix-hero-grad-loop 18s linear infinite;
}

/* "See The Work" CTA inside the final-stage closer — needs
   pointer-events restored since the parent has them disabled. */
.ix-proof-final-cta {
  margin-top: 24px;
  pointer-events: auto;
}

/* --- Scroll hint (hides once you scroll past entry) --- */
.ix-proof-hint {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-micro);
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fg-3);
  opacity: 0.55;
  transition: opacity 400ms var(--ease-quint);
  pointer-events: none;
}
.ix-proof-hint svg { width: 12px; height: 20px; color: rgba(217,185,125,0.7); }

/* --- Reduced motion: jump straight to the final state --- */
@media (prefers-reduced-motion: reduce) {
  .ix-proof-gallery { opacity: 0 !important; transform: none !important; }
  .ix-proof-col { transform: none !important; }
  .ix-proof-stats,
  .ix-proof-ladder { opacity: 0 !important; }
  .ix-proof-fade { opacity: 1 !important; }
  .ix-proof-final-stage { opacity: 1 !important; }
  .ix-proof-hint { display: none; }
  .ix-proof-stat-num,
  .ix-proof-final-line--accent { animation: none !important; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .ix-proof { min-height: 340vh; }
  .ix-proof-gallery { padding: 32px 20px 60px; gap: 12px; }
  .ix-proof-col { gap: 12px; }
  .ix-proof-col[data-col="2"] { margin-top: 0; }
  .ix-proof-final-line { font-size: clamp(22px, 5vw, 36px); }
}
@media (max-width: 560px) {
  .ix-proof-stat-divider { display: none; }
  .ix-proof-stats { gap: 28px; }
}

/* Tighten the top padding of the WHO WE SERVE section so it
   rises into view immediately after the proof section's final
   frame, instead of trailing a full viewport of black. */
.ix-serve-section {
  padding-top: clamp(120px, 16vh, 200px);
  isolation: isolate;
  /* Override `.ix-section { overflow: hidden }` so position:sticky on
     the W.E.W.I.L.L. tab strip inside this section actually works. */
  overflow: visible;
}
.ix-serve-lead {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.25;
  color: var(--fg-1, #FEF7DF);
  margin-bottom: 14px !important;
  letter-spacing: -0.005em;
}
/* Two-line headline: "Together, WE WILL" / "Build a Beautifully
   Expressed World", followed by the smaller "...One Brand At A
   Time" subtitle. */
.ix-serve-section .ix-section-title {
  font-size: clamp(28px, 3.6vw, 60px);
  line-height: 1.15;
  text-wrap: balance;
}
.ix-serve-title-line {
  display: inline;
}
.ix-serve-subtitle {
  margin: clamp(10px, 1.4vh, 20px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.3;
  color: var(--fg-1, #FEF7DF);
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────
   Who-We-Serve stage — sticky W.E.W.I.L.L. tab strip + big carousel.
   The tab strip docks at viewport top while the user scrolls through
   the rest of the stage. Carousel below fills most of the viewport.
─────────────────────────────────────────────────────────────────── */
.ix-serve-stage {
  position: relative;
  margin-top: clamp(8px, 1.4vh, 20px);
}
.ix-serve-stage .ix-industries {
  background: transparent;
  border-bottom: 0;
}
/* Restore the dramatic full-letter aspect now that sticky is off —
   the tabs are display elements, not compact toolbar buttons. */
.ix-serve-stage .ix-industry {
  aspect-ratio: 3 / 4;
}

/* Active-state indicator: thin gold rule beneath the active tab
   with a small down-arrow centered on it, pointing at the carousel. */
.ix-serve-stage .ix-industry::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(236, 199, 119, 0) 0%,
    rgba(236, 199, 119, 0.85) 50%,
    rgba(236, 199, 119, 0) 100%);
  opacity: 0;
  transition: opacity 300ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}
/* Filled gold triangle pointing down — wider, flush against the
   line above so they read as one continuous indicator. */
.ix-serve-stage .ix-industry::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Triangle top edge sits at bottom: 18px (= line bottom edge) so
     the two visually merge into one mark. */
  bottom: 8px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(236, 199, 119, 0.95);
  opacity: 0;
  transition: opacity 300ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}
.ix-serve-stage .ix-industry.is-active::before,
.ix-serve-stage .ix-industry.is-active::after {
  opacity: 1;
}

/* Carousel sits below the sticky tab strip and fills most of the
   remaining viewport. */
.ix-serve-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: clamp(-32px, -2vh, -12px) auto clamp(48px, 6vh, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ix-serve-carousel-stage {
  position: relative;
  width: 100%;
  height: clamp(390px, 58vh, 666px);
  overflow: visible;
}
.ix-serve-carousel-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-serve-carousel-group.is-active {
  opacity: 1;
  visibility: visible;
}
.ix-serve-carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Full image, not cropped — let each header render at its true
     intrinsic aspect ratio, capped by both viewport width and the
     stage height so it never overflows. */
  width: auto;
  height: auto;
  max-width: min(70vw, 1328px);
  max-height: 100%;
  object-fit: contain;
  border-radius: clamp(8px, 1vw, 14px);
  /* Default: hidden off-stage. JS rotates is-active / is-prev /
     is-next classes to place 3 slides at a time. */
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition:
    transform 650ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 650ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.ix-serve-carousel-slide.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  box-shadow:
    0 24px 64px -16px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(236, 199, 119, 0.2);
}
.ix-serve-carousel-slide.is-prev {
  transform: translate(calc(-50% - 60%), -50%) scale(0.82);
  opacity: 0.32;
  z-index: 2;
  filter: blur(3px);
}
.ix-serve-carousel-slide.is-next {
  transform: translate(calc(-50% + 60%), -50%) scale(0.82);
  opacity: 0.32;
  z-index: 2;
  filter: blur(3px);
}

/* Arrows on either side. Translucent gold so they sit lightly on
   top of the slide artwork without competing with it. */
.ix-serve-carousel-arrow {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 199, 119, 0.18);
  border: 0;
  border-radius: 50%;
  color: rgba(254, 247, 223, 0.95);
  cursor: pointer;
  z-index: 4;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(236, 199, 119, 0.30);
  transition: background 220ms, color 220ms, transform 220ms;
}
.ix-serve-carousel-arrow:hover {
  background: rgba(236, 199, 119, 0.45);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.06);
}
.ix-serve-carousel-arrow svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.4;
}
.ix-serve-carousel-arrow--prev { left: clamp(12px, 2.5vw, 36px); }
.ix-serve-carousel-arrow--next { right: clamp(12px, 2.5vw, 36px); }
@media (max-width: 720px) {
  .ix-serve-carousel-arrow { width: 48px; height: 48px; }
  .ix-serve-carousel-arrow svg { width: 24px; height: 24px; }
}

/* Slide indicators below the carousel. */
.ix-serve-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.ix-serve-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(254, 247, 223, 0.25);
  transition: background 220ms, width 220ms;
}
.ix-serve-carousel-dot.is-active {
  background: rgba(236, 199, 119, 0.9);
  width: 22px;
  border-radius: 4px;
}

/* Active tab styling — brighter letters only (no underline strip). */

@media (max-width: 720px) {
  .ix-serve-carousel-stage { height: clamp(220px, 36vh, 320px); }
  .ix-serve-carousel-slide.is-prev,
  .ix-serve-carousel-slide.is-next { display: none; }
}
@media (max-width: 720px) {
  .ix-serve-section .ix-section-title {
    font-size: clamp(28px, 6vw, 42px);
  }
  .ix-serve-subtitle {
    font-size: clamp(15px, 4.2vw, 22px);
  }
}
/* Subtle aurora backdrop — three soft radial glows in the site
   palette (champagne top-center, peach left, violet bottom-right).
   Very low opacity so the base stays dark and the giant pillar
   letters remain the focal point. A slow drift animation keeps
   it feeling alive without distracting. */
.ix-serve-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(55% 45% at 50% 12%, rgba(236, 199, 119, 0.25), transparent 70%),
    radial-gradient(35% 35% at 50% 50%, rgba(201, 164, 214, 0.14), transparent 78%);
  animation: ix-serve-aurora 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
/* Bottom edge vignette only — top vignette removed since it was
   visible as a faint horizontal seam against the preceding section. */
.ix-serve-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 85%, rgba(0,0,0,0.85) 100%);
}
@keyframes ix-serve-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.9; }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1);    opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-serve-section::before { animation: none; }
}

/* ------------------------------------------------------------------
   Industries pillar row — each pillar is a column with a GIANT
   watermark letter behind a small label. Active pillar lights the
   letter with the site's palindromic gradient; inactive letters
   sit as muted charcoal. Spells W-E-W-I-L-L across the row.
------------------------------------------------------------------ */
.ix-industries {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 1400px;
  margin: 0 auto 64px;
  gap: 0;
}
.ix-industry {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: 8px;
  text-align: center;
  /* Divider: vertical gold line that only shows in the middle 60%
     of the tile — fades to transparent top & bottom so it doesn't
     run wall-to-wall on the now-taller tab tiles. */
  border-left: 1px solid;
  border-image-source: linear-gradient(180deg,
    transparent 0%,
    rgba(236, 199, 119, 0.25) 50%,
    transparent 100%);
  border-image-slice: 1;
  cursor: pointer;
  /* Reset native <button> chrome — these are role="tab" buttons. */
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  color: inherit;
  font: inherit;
  transition: background 400ms var(--ease-quint);
}
button.ix-industry:focus-visible {
  outline: 2px solid rgba(236, 199, 119, 0.6);
  outline-offset: -4px;
}
.ix-industry:first-child { border-left: none; }

/* Giant watermark letter filling the tile. Inactive = dim charcoal
   so it reads as texture, not content. */
.ix-industry-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  /* Sized so the glyph fits inside the taller 3/4 tile. Paired with
     line-height 1.05 and no overflow:hidden on the tile, so wide
     letters (W) render fully top-to-bottom without getting chopped. */
  font-size: clamp(80px, 9vw, 170px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  pointer-events: none;
  z-index: 0;
  /* Every mark gets the full peach→pink→violet→blue gradient —
     inactive ones are dimmed so they read as a colored shadow;
     active pops to full opacity + gains a soft glow. */
  background-image: linear-gradient(180deg,
    #F4D5CF 0%,
    #E6B9C9 22%,
    #C9A4D6 48%,
    #9A94D6 72%,
    #6C7BBF 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: 0.28;
  filter: saturate(0.8);
  transition:
    opacity 500ms var(--ease-quint),
    filter 500ms var(--ease-quint);
  will-change: opacity, filter;
}

/* Active only: letter becomes fully saturated + gains a soft glow.
   Hover state intentionally NOT styled (the tabs are now interactive
   tabs, not portfolio tiles — the active selection is the only
   highlight). */
.ix-industry.is-active .ix-industry-mark {
  opacity: 1;
  filter: saturate(1) drop-shadow(0 0 28px rgba(201, 164, 214, 0.28));
}

/* Foreground label — small pillar name with underline, sitting
   dead-center on top of the giant watermark letter. */
.ix-industry-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 4px 10px 8px;
  border-bottom: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(16px, 1.5vw, 26px);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  transition: color 400ms var(--ease-quint);
}
.ix-industry-label b {
  font-weight: 700;
  color: #fff;
}
.ix-industry.is-active .ix-industry-label {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ix-industry:hover .ix-industry-mark,
  .ix-industry.is-active .ix-industry-mark { animation: none; }
}


/* ------------------------------------------------------------------
   Philosophy "Your Brand Is Your Stand"
   Kinetic chant frame (huge stacked headline) → STAND FOR→OUT
   morph hero moment → quiet payoff stanza. A soft gold radial
   glow sits behind the whole section for texture.
------------------------------------------------------------------ */
.ix-philosophy { text-align: center; }

.ix-philosophy-stage {
  position: relative;
  isolation: isolate;
  height: 320vh;               /* scroll room for the three stages */
  padding: 0;                  /* override .ix-section padding — pin fills */
  overflow: visible;           /* let the sticky pin reach the viewport */
  background: #040302;
  --stage-a: 1;
  --stage-b: 0;
  --stage-c: 0;
}

/* Sticky pin — holds the 100vh stage in view while scroll drives the
   stage handoff. Podium bg + particles live inside. */
.ix-philosophy-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: clamp(80px, 12vh, 140px) 24px;
}

/* Bottom fade-to-black — sits on the pin so it appears in-viewport
   at the tail end of the stage, easing into the next section. */
.ix-philosophy-pin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    #000 100%
  );
}

/* Full-bleed podium image — fades in with a gentle zoom-out when
   the section enters view. */
.ix-philosophy-bg {
  position: absolute;
  inset: 0;
  background: url('images/philosophy-stage.jpg') center / cover no-repeat;
  z-index: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 2.2s var(--ease-quint),
    transform 2.6s var(--ease-quint);
}
.ix-philosophy-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.ix-philosophy-stage.is-live .ix-philosophy-bg {
  opacity: 1;
  transform: scale(1);
}

/* Ambient beam glow — a soft warm radial that gently breathes
   above the podium to match the existing spotlight. Replaces the
   earlier particle system. */
/* Ambient beam glow — a soft warm radial that breathes above the
   podium to match the existing spotlight. Opacity is tied to
   --stage-c so it fades in together with the INFLUEX copy. */
.ix-philosophy-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--stage-c, 0);
  transform-origin: 50% 42%;
  background:
    radial-gradient(ellipse 42% 68% at 50% 44%,
      rgba(255, 208, 130, 0.55) 0%,
      rgba(236, 170,  80, 0.28) 32%,
      rgba(180, 110,  45, 0.10) 60%,
      rgba(0, 0, 0, 0) 80%);
}

@keyframes ix-philosophy-breathe {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.08); filter: brightness(1.45); }
}

.ix-philosophy-copy {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  color: #f3ecdb;
}

.ix-philosophy-hero {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(52px, 8vw, 128px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.6s var(--ease-quint),
    transform 1.6s var(--ease-quint);
}
.ix-philosophy-hero em {
  display: block;
  font-style: normal;
  font-weight: 400;
  background: linear-gradient(180deg, #fff3d6 0%, #ecc777 55%, #b4863a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(236, 199, 119, 0.25));
}

.ix-philosophy-sub {
  margin: clamp(28px, 4vh, 48px) auto 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(243, 236, 219, 0.88);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.6s var(--ease-quint),
    transform 1.6s var(--ease-quint);
  transition-delay: 0.5s;
}
.ix-philosophy-sub span {
  display: block;
}
.ix-philosophy-sub b {
  font-weight: 700;
  background: linear-gradient(180deg, #fff3d6 0%, #ecc777 55%, #b4863a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ix-philosophy-stage.is-live .ix-philosophy-hero,
.ix-philosophy-stage.is-live .ix-philosophy-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Stage A container — absolute layered over the pin so Stage C can
   overlay it. Parent opacity drives the fade-out via --stage-a. */
.ix-philosophy-copy.ix-philosophy-stage-a {
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 12vh, 140px) 24px;
  text-align: center;
  opacity: var(--stage-a, 1);
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .ix-philosophy-hero,
  .ix-philosophy-sub {
    opacity: 1 !important; transform: none !important;
  }
}

/* ------------------------------------------------------------------
   INFLUEX X-Factor layers — live inside the philosophy pin. The
   mark (Stage B) and the copy (Stage C) stack absolutely over the
   podium stage; opacities are driven by --stage-b / --stage-c vars
   updated on scroll (see JS in index.html).
------------------------------------------------------------------ */
.ix-xfactor-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  opacity: var(--stage-b, 0);
}
.ix-xfactor-mark svg {
  width: min(78vw, 68vh);
  height: auto;
  aspect-ratio: 190 / 179;
  opacity: 0.10;
  filter: drop-shadow(0 0 80px rgba(236, 199, 119, 0.14));
  transform: translateY(-50px);
}
.ix-xfactor-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--stage-b, 0);
  background: radial-gradient(ellipse 42% 55% at 50% 50%,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0) 75%);
}
.ix-xfactor-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 12vh, 140px) 24px;
  text-align: center;
  z-index: 2;
  opacity: var(--stage-c, 0);
  pointer-events: none;
}
.ix-xfactor-copy > * {
  max-width: 920px;
  width: 100%;
}
.ix-xfactor-block { padding: clamp(24px, 4vh, 44px) 0; }
.ix-xfactor-rule {
  height: 1px;
  width: min(520px, 70%);
  margin: 0 auto;
  background: linear-gradient(90deg,
    rgba(236, 199, 119, 0) 0%,
    rgba(236, 199, 119, 0.55) 50%,
    rgba(236, 199, 119, 0) 100%);
}
.ix-xfactor-equation {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.2;
  color: #f3ecdb;
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ix-xfactor-equation b {
  font-weight: 700;
  background: linear-gradient(180deg, #fff3d6 0%, #ecc777 55%, #b4863a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-xfactor-word { color: #FFF2C6; }
.ix-xfactor-word b {
  font-weight: 600;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: #FFF2C6;
}
.ix-xfactor-wordmark {
  display: inline-block;
  height: 0.95em;
  width: auto;
  vertical-align: -0.08em;
  margin-right: 0.08em;
  user-select: none;
  -webkit-user-drag: none;
}
.ix-xfactor-body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
  color: rgba(243, 236, 219, 0.86);
  margin: 0 auto;
  max-width: 760px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ix-xfactor-body b {
  font-weight: 700;
  background: linear-gradient(180deg, #fff3d6 0%, #ecc777 55%, #b4863a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-xfactor-stanza {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.45;
  color: #f3ecdb;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ix-xfactor-stanza span { display: block; }
.ix-xfactor-stanza b {
  font-weight: 700;
  background: linear-gradient(180deg, #fff3d6 0%, #ecc777 55%, #b4863a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ix-philosophy-stage { --stage-a: 0; --stage-b: 1; --stage-c: 1; height: auto; }
  .ix-philosophy-pin { position: static; height: auto; }
  .ix-xfactor-copy { position: relative; inset: auto; padding: 80px 24px; }
  .ix-xfactor-mark, .ix-xfactor-vignette { position: absolute; }
  .ix-philosophy-copy.ix-philosophy-stage-a { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   BRAND PHILOSOPHY V2 — two-stage scroll-jacked, video-backed.
   Section is 250vh; the inner pin sticks at 100vh while the user
   scrolls through:
     0.00–0.05  spotlight-to-floor fades in (warm gold beam + puddle)
     0.05–0.15  Stage A copy fades in ("Your Brand Is Your Stand.")
     0.12–0.28  video fades in behind everything, vignette darkens
     0.28–0.45  Stage A holds, the user reads
     0.45–0.55  Stage A fades out
     0.55–0.70  Stage B copy fades in (INFLUEX equation + tagline)
     0.70–1.00  Stage B holds, then section ends
   The video stays on screen throughout once it's faded in; only the
   stage copy crossfades between Stage A and Stage B.
   ────────────────────────────────────────────────────────────────── */
.ix-philosophy-v2 {
  position: relative;
  padding: 0;
  background: #000;
  color: #fff;
  overflow: visible;
  isolation: isolate;
  --stage-a-op: 0;
  --stage-b-op: 0;
  --video-op: 0;
  --vignette-strength: 1;
}
/* Override .ix-philosophy-stage's 320vh — we want 250vh for the
   two-stage scroll handoff. */
.ix-philosophy-v2.ix-philosophy-stage { height: 250vh; }

/* Sticky pin holds at top of viewport for the section's full scroll. */
.ix-philosophy-v2-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Full-bleed video backdrop — opacity driven by --video-op (JS). */
.ix-philosophy-v2-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: var(--video-op, 0);
  transition: opacity 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Spotlight-to-the-floor — warm beam + floor puddle. Opacity driven
   by --spotlight-op (JS): fades in at the very top of the scroll,
   then fades out as the video fades in (so they don't fight each
   other on screen). */
.ix-philosophy-v2-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    /* Floor puddle — bright pool at the bottom center */
    radial-gradient(ellipse 38% 16% at 50% 88%,
      rgba(255, 215, 145, 0.65) 0%,
      rgba(255, 200, 120, 0.30) 30%,
      rgba(0, 0, 0, 0) 65%),
    /* Beam — softer cone of light spilling down from above */
    radial-gradient(ellipse 45% 100% at 50% 30%,
      rgba(255, 208, 130, 0.30) 0%,
      rgba(255, 195, 115, 0.15) 40%,
      rgba(0, 0, 0, 0) 70%);
  opacity: var(--spotlight-op, 0);
}

/* Vignette — black linear gradients on all four edges of the video.
   Each edge is solid black for the first 6-8%, then fades to
   transparent over a clear band. The bottom extends further so the
   transition into the next section feels smooth. */
.ix-philosophy-v2-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Top */
    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 6%, rgba(0, 0, 0, 0) 32%),
    /* Bottom — extended further for a clean exit into the next section */
    linear-gradient(0deg,   rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 8%, rgba(0, 0, 0, 0) 45%),
    /* Left */
    linear-gradient(90deg,  rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.80) 6%, rgba(0, 0, 0, 0) 30%),
    /* Right */
    linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.80) 6%, rgba(0, 0, 0, 0) 30%);
}

/* Both content stages share the same anchor (absolutely centered);
   crossfade via per-stage opacity vars. drop-shadow filter handles
   text legibility (works correctly with gradient text — text-shadow
   doesn't, because it shows through the transparent gradient text). */
.ix-philosophy-v2-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vh, 80px) clamp(20px, 4vw, 48px);
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
  transition: opacity 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Soft dark ellipse scrim behind the text — keeps readability
   without darkening the whole video. */
.ix-philosophy-v2-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 50% 50%,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0.15) 75%,
      rgba(0, 0, 0, 0) 100%);
}
.ix-philosophy-v2-stage-a { opacity: var(--stage-a-op, 0); }
.ix-philosophy-v2-stage-b { opacity: var(--stage-b-op, 0); }

/* Hero — "Your Brand Is" / "Your Stand." (two visual lines) */
.ix-philosophy-v2-hero {
  margin: 0 0 clamp(20px, 3vh, 36px);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(46px, 6.6vw, 106px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #f3ecdb;
}
.ix-philosophy-v2-hero span,
.ix-philosophy-v2-hero em {
  display: block;
}
.ix-philosophy-v2-hero em {
  font-style: normal;
  font-weight: 600;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Sub */
.ix-philosophy-v2-sub {
  margin: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(22px, 1.9vw, 31px);
  line-height: 1.5;
  color: #f3ecdb;
  max-width: 920px;
}
.ix-philosophy-v2-sub span { display: block; }
.ix-philosophy-v2-sub b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* INFLUEX = Influence + Expression */
.ix-philosophy-v2-equation {
  margin: 0 0 clamp(18px, 2.5vh, 28px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(31px, 3.4vw, 53px);
  letter-spacing: -0.005em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  color: #f3ecdb;
}
.ix-philosophy-v2-wordmark {
  height: clamp(31px, 3.4vw, 53px);
  width: auto;
  vertical-align: middle;
}
.ix-philosophy-v2-equation b {
  font-weight: 700;
  color: #ecc777;
}

/* Thin gold rule between equation and tagline */
.ix-philosophy-v2-rule {
  width: 80px;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(217, 185, 125, 0.55), transparent);
  margin: clamp(12px, 2vh, 24px) 0;
}

/* Tagline */
.ix-philosophy-v2-tagline {
  margin: 0;
  max-width: 1040px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}
.ix-philosophy-v2-tagline b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Below 800px, collapse the two-phase scroll-pinned philosophy into
   a single static frame. Both Stage A and Stage B copy are stacked
   vertically (no scroll handoff). The pin shrinks to fit the stacked
   copy plus a comfortable padding band so the background figure shows
   above and below the text. */
@media (max-width: 800px) {
  /* Override .ix-section's responsive padding (96px 32px at <1024) so
     there's no black band above/below the now-static pin. The pin's
     own padding handles internal breathing room. */
  .ix-philosophy-v2.ix-philosophy-stage { height: auto; padding: 0; }
  .ix-philosophy-v2-pin {
    position: relative;
    height: auto;
    padding: clamp(64px, 12vh, 120px) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 4vh, 40px);
  }
  /* Stages stack in document flow instead of stacking absolutely. */
  .ix-philosophy-v2-content {
    position: relative;
    inset: auto;
    padding: 0 clamp(20px, 4vw, 48px);
  }
  /* Force the JS-driven opacity vars to 1 — the scroll handoff that
     animated these isn't running across a 250vh section anymore. */
  .ix-philosophy-v2-stage-a,
  .ix-philosophy-v2-stage-b { opacity: 1 !important; }
  .ix-philosophy-v2-video { opacity: 1 !important; }
  .ix-philosophy-v2-spotlight { opacity: 0.55 !important; }
  /* The per-stage radial scrims left a visible gap between Stage A
     and Stage B once both are flowed vertically. Replace them with a
     single dark band on the pin that covers both stages. */
  .ix-philosophy-v2-content::before { display: none; }
  .ix-philosophy-v2-pin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(ellipse 90% 75% at 50% 50%,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.25) 75%,
        rgba(0, 0, 0, 0) 100%);
  }
  /* Drop the top edge of the vignette — the figure's upper body was
     getting cropped behind a dark band. Bottom + left + right kept. */
  .ix-philosophy-v2-vignette {
    background:
      linear-gradient(0deg,   rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 8%, rgba(0, 0, 0, 0) 45%),
      linear-gradient(90deg,  rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.80) 6%, rgba(0, 0, 0, 0) 30%),
      linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.80) 6%, rgba(0, 0, 0, 0) 30%);
  }
  /* Tighten the Stage A copy. */
  .ix-philosophy-v2-hero { font-size: clamp(34px, 7.5vw, 52px); margin-bottom: 14px; }
  .ix-philosophy-v2-sub { font-size: clamp(15px, 3.8vw, 20px); line-height: 1.45; }
  /* Tighten the Stage B copy. */
  .ix-philosophy-v2-equation {
    font-size: clamp(22px, 5vw, 31px);
    margin: 0 0 12px;
    gap: 8px;
  }
  .ix-philosophy-v2-wordmark { height: clamp(22px, 5vw, 31px); }
  .ix-philosophy-v2-rule { width: 60px; margin: 6px 0; }
  .ix-philosophy-v2-tagline {
    font-size: clamp(15px, 3.8vw, 22px);
    line-height: 1.45;
  }
}
@media (max-width: 640px) {
  /* Stack the equation: INFLUEX wordmark on its own row, then
     "= INFLUence + EXpression" inline beneath it. Also drop the
     small gold rule — feels redundant once stacked. */
  .ix-philosophy-v2-equation {
    flex-direction: column;
    gap: 8px;
  }
  .ix-philosophy-v2-equation-rhs {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .ix-philosophy-v2-rule { display: none; }
}
@media (max-width: 480px) {
  .ix-philosophy-v2-pin { padding: clamp(48px, 10vh, 96px) 0; gap: 18px; }
  .ix-philosophy-v2-hero { font-size: clamp(30px, 8.5vw, 42px); }
  .ix-philosophy-v2-sub { font-size: 14px; }
  .ix-philosophy-v2-equation { font-size: 20px; }
  .ix-philosophy-v2-wordmark { height: 20px; }
  .ix-philosophy-v2-tagline { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-philosophy-v2-spotlight { opacity: 1 !important; transition: none !important; }
  /* Show both stages stacked for users with reduced motion */
  .ix-philosophy-v2-content { opacity: 1 !important; transition: none !important; position: relative; inset: auto; }
  .ix-philosophy-v2-video { opacity: 1 !important; }
}

/* ------------------------------------------------------------------
   Dream Team — three-stage cinematic reveal.
   Stage A: large centered title.
   Stage B: title shrinks, two rows sweep in to meet around it.
   Stage C: rows continue streaming in their own directions.
------------------------------------------------------------------ */
.ix-team-stage {
  position: relative;
  isolation: isolate;
  height: 420vh;
  padding: 0;
  overflow: visible;
  background: #040302;
  --title-sc: 1;
  --title-op: 0;
  --title-ty: 0px;
  --rows-op: 0;
  --copy-op: 0;
  --copy-ty: 20px;
  --top-tx: 0px;
  --bot-tx: 0px;
}

.ix-team-pin {
  position: sticky;
  /* Stick fully below the fixed nav (~80px tall) so the top row of
     cards isn't clipped on shorter viewports like 1600×900. */
  top: clamp(70px, 8vh, 100px);
  height: calc(100vh - clamp(70px, 8vh, 100px));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0 24px;
}


.ix-team-center {
  position: relative;
  z-index: 3;
  display: block;
  text-align: center;
  max-width: min(1100px, 92vw);
  pointer-events: none;
}

.ix-team-title {
  margin: 0;
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
  /* Scale via font-size so the layout box shrinks with the visual — keeps
     the title's vertical centering honest and the copy gap controlled. */
  font-size: calc(clamp(36px, 5.6vw, 88px) * var(--title-sc, 1));
  color: #fff;
  text-align: center;
  opacity: var(--title-op, 0);
  will-change: font-size, opacity;
}
.ix-team-title-line {
  display: block;
  white-space: nowrap;
}
.ix-team-title em {
  font-style: normal;
  font-weight: 500;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ix-team-copy {
  position: absolute;
  top: calc(100% + clamp(18px, 2.4vh, 32px));
  left: 50%;
  width: min(820px, 88vw);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  opacity: var(--copy-op, 0);
  transform: translate3d(-50%, var(--copy-ty, 20px), 0);
  will-change: transform, opacity;
}
.ix-team-copy p { margin: 0 0 14px 0; }
.ix-team-copy p:last-child { margin-bottom: 0; }
.ix-team-copy-lead {
  margin-top: 18px !important;
  margin-left: auto;
  margin-right: auto;
  /* Size to content + center, so the line can extend beyond the
     parent's 820px width without clipping. */
  width: max-content;
  max-width: 100vw;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 900px) {
  /* Allow wrap on mobile where one line wouldn't fit the viewport. */
  .ix-team-copy-lead {
    white-space: normal;
    width: auto;
  }
}

.ix-team-rows {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(120px, 18vh, 200px);
  padding: clamp(20px, 3vh, 48px) 0;
  opacity: var(--rows-op, 0);
  pointer-events: none;
}

.ix-team-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.ix-team-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  width: max-content;
  will-change: transform;
}
.ix-team-row--top .ix-team-track { transform: translate3d(var(--top-tx, 0px), 0, 0); }
.ix-team-row--bot .ix-team-track { transform: translate3d(var(--bot-tx, 0px), 0, 0); }

.ix-team-card {
  flex: 0 0 auto;
  /* Width also clamped by available pin height (via min) so two rows
     of 4:5 cards always fit on short viewports like 1600×900. */
  width: min(clamp(150px, 13vw, 210px), 28vh);
  aspect-ratio: 4 / 5;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0a0908;
  border: 1px solid rgba(236, 199, 119, 0.16);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  /* Override parent .ix-team-rows pointer-events:none so cards are clickable. */
  pointer-events: auto;
  cursor: pointer;
  transition:
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ix-team-card:hover,
.ix-team-card.is-active {
  z-index: 5;
  border-color: rgba(236, 199, 119, 0.6);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.7);
}
.ix-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Editorial grade — pulls saturation back so all the portraits sit in the
     same tonal range; the warm overlay below recolors the highlights. */
  filter: saturate(0.45) contrast(1.06) brightness(0.96);
  transform-origin: 50% 50%;
  transform: scale(1);
  transition:
    filter 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ix-team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(236, 199, 119, 0.22);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
/* Hovered or active card returns to its original color AND zooms in
   slightly for a Ken-Burns-style focus on the portrait. */
.ix-team-card:hover img,
.ix-team-card.is-active img {
  filter: none;
  transform: scale(1.08);
}
.ix-team-card:hover::before,
.ix-team-card.is-active::before { opacity: 0; }
.ix-team-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, 0.95) 25%,
    rgba(0, 0, 0, 0.78) 50%,
    rgba(0, 0, 0, 0.4)  75%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
}
.ix-team-cap {
  position: absolute;
  left: 12px; right: 12px; bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: #fff;
}
.ix-team-name {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-team-role {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}

/* The two title lines force `white-space: nowrap` for the desktop
   single-line look. Below 768 "of World-Class Creatives." overflows
   the viewport, getting clipped on both sides. Allow wrapping. Also
   override the global `p { font-size: 18px }` rule for the body copy
   so the heading stays visibly larger after the JS-driven 0.58 scale. */
@media (max-width: 768px) {
  .ix-team-title { font-size: calc(clamp(34px, 7vw, 72px) * var(--title-sc, 1)); }
  .ix-team-title-line { white-space: normal; text-wrap: balance; }
  .ix-team-copy p { font-size: 16px; }
}
@media (max-width: 480px) {
  .ix-team-title { font-size: calc(clamp(30px, 8.5vw, 56px) * var(--title-sc, 1)); }
  .ix-team-copy p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-team-stage {
    --title-sc: 0.7; --title-op: 1; --title-ty: 0px;
    --rows-op: 1; --copy-op: 1; --copy-ty: 0px;
    --top-tx: 0px; --bot-tx: 0px;
    height: auto;
  }
  .ix-team-pin { position: static; height: auto; padding: 80px 24px; flex-direction: column; gap: 48px; }
  .ix-team-rows { position: relative; inset: auto; }
  .ix-team-row { mask-image: none; -webkit-mask-image: none; }
}

/* ------------------------------------------------------------------
   Transformation — split-anchor + 3 stages + closer payoff.
   Opening: side-by-side headline ("Service" left smaller/dim,
            "Transformation" right larger/gold). Service dims as
            scroll progresses, Transformation ignites, then both
            shrink + lock to the top.
   Stage 1 — Identity Upgrade : badge contrast (gray vs gold mark).
   Stage 2 — Extract : vertical vessel + scan line, gold orb forms.
   Stage 3 — Express : orb persists, six deliverable cards fan out.
   Closer  : framed gold-gradient payoff line.
------------------------------------------------------------------ */
.ix-transform-stage {
  position: relative;
  isolation: isolate;
  height: 1500vh;
  padding: 0;
  overflow: visible;
  background: #040302;
  /* Closer rectangle dimensions — referenced by both the closer frame
     and the per-card target positions during the morph. */
  --rect-w: min(900px, 88vw);
  --rect-h: clamp(280px, 38vh, 460px);
  /* Anchor for centered visual content (orb, beats, closer). Sits
     well below the locked headline (now at 10vh) while leaving room
     for the caption below. */
  --stage-cy: 46vh;
  --title-sc: 1;
  --title-top: 50vh;
  --title-left-op: 0;
  --title-right-op: 0;
  --title-right-grad: 0;     /* 0 = pre-ignite, 1 = full gold */
  --title-x: 0px;            /* horizontal nudge when locking — shifts the
                                grid left so col 2 lands at viewport center */
  --upgrade-op: 0;
  --upgrade-prog: 0;         /* 0 = balanced, 1 = full delta */
  --extract-op: 0;
  --extract-prog: 0;         /* drives scan position 0→1 (top→bot) */
  --vessel-op: 0;
  --orb-op: 0;
  --orb-sc: 0.4;
  --express-op: 0;
  --express-prog: 0;         /* 0 = cards collapsed at center, 1 = full fan */
  --exp-s2: 0;               /* Darren slide 2 rise (0 = below, 1 = in place) */
  --exp-s3: 0;               /* Darren slide 3 rise */
  --exp-s4: 0;               /* Darren slide 4 rise */
  --to-rect: 0;              /* 0 = cards on circle, 1 = on rectangle perimeter */
  --card-op: 1;              /* fades to 0 as cards merge into the frame */
  --cap-upgrade-op: 0;
  --cap-extract-op: 0;
  --cap-express-op: 0;
  --closer-frame-op: 0;      /* opacity of the closer rectangle border + bg */
  --closer-text-op: 0;       /* opacity of the title + sub inside the frame */
}

.ix-transform-pin {
  position: sticky;
  top: 40px;
  height: calc(100vh - 40px);
  overflow: hidden;
  isolation: isolate;
}

/* ─── Split-screen headline ──────────────────────────────────────
   Left side (smaller, gray) and right side (larger, gold) sit
   side-by-side. Both fade in, then the gold ignites. Together they
   shrink and drift to the top once the stages begin. */
.ix-transform-title {
  position: absolute;
  left: 50%;
  top: var(--title-top, 50vh);
  /* Stack above the beats — without this, the reveal image (later in
     DOM) renders over the locked title on smaller viewports where the
     two get close. */
  z-index: 5;
  /* Single smooth transform: vertical centering + a horizontal nudge
     left as the headline locks, so the right column ends up at the
     viewport center without any layout reflow or text-align flip. */
  transform: translate(calc(-50% + var(--title-x, 0px)), -50%);
  margin: 0;
  width: min(1380px, 96vw);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: center;
  gap: clamp(48px, 7vw, 130px);
  font-family: var(--font-display, "Montserrat", sans-serif);
  pointer-events: none;
  font-size: calc(clamp(28px, 4.2vw, 64px) * var(--title-sc, 1));
}
.ix-transform-title-left {
  text-align: right;
  font-size: max(0.6em, 15px);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.16;
  color: #fff;
  opacity: var(--title-left-op, 0);
}
.ix-transform-title-right {
  /* Centered always — keeps the text inside its column centered, so
     when the title's translate aligns col 2's center with the viewport
     center, the text lands precisely there with no align-flip glitch. */
  text-align: center;
  font-size: max(1em, 22px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.06;
  color: #fff;
  opacity: var(--title-right-op, 0);
}
.ix-transform-line { display: block; }
.ix-transform-title em {
  font-style: normal;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  background-size: 220% 100%;
  background-position: calc(110% - var(--title-right-grad, 0) * 110%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(var(--title-right-grad, 0) * 22px) rgba(236, 199, 119, 0.45));
}

/* ─── Stage frames — each beat occupies the same canvas slot,
   pulled up from raw center via --stage-cy. ─────────────────────── */
.ix-transform-beat {
  position: absolute;
  left: 50%;
  top: var(--stage-cy, 50vh);
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #ecc777;
}

/* ─── Stage 1 : Identity Upgrade ─────────────────────────────────
   Two badge cards. Service dims and shrinks; Identity Upgrade
   brightens and grows. The visual delta IS the message. */
.ix-transform-beat--upgrade {
  width: min(880px, 92vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 80px);
  opacity: var(--upgrade-op, 0);
}
.ix-upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 32px) clamp(28px, 3.6vw, 48px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform-origin: center;
}
.ix-upgrade-card--service {
  color: rgba(255, 255, 255, calc(0.7 - var(--upgrade-prog, 0) * 0.5));
  border-color: rgba(255, 255, 255, calc(0.18 - var(--upgrade-prog, 0) * 0.12));
  background: rgba(255, 255, 255, calc(0.02 + (1 - var(--upgrade-prog, 0)) * 0.02));
  transform: scale(calc(1 - var(--upgrade-prog, 0) * 0.16));
}
.ix-upgrade-card--upgrade {
  border-color: rgba(236, 199, 119, calc(0.18 + var(--upgrade-prog, 0) * 0.55));
  background: rgba(236, 199, 119, calc(0.03 + var(--upgrade-prog, 0) * 0.05));
  box-shadow: 0 0 calc(var(--upgrade-prog, 0) * 60px) rgba(236, 199, 119, calc(var(--upgrade-prog, 0) * 0.32));
  transform: scale(calc(1 + var(--upgrade-prog, 0) * 0.16));
}
.ix-upgrade-mark {
  width: clamp(56px, 7vw, 88px);
  height: clamp(56px, 7vw, 88px);
}
.ix-upgrade-card--service .ix-upgrade-mark {
  opacity: calc(0.85 - var(--upgrade-prog, 0) * 0.55);
  filter: grayscale(1);
}
.ix-upgrade-card--upgrade .ix-upgrade-mark {
  opacity: calc(0.5 + var(--upgrade-prog, 0) * 0.5);
  filter: drop-shadow(0 0 calc(var(--upgrade-prog, 0) * 16px) rgba(236, 199, 119, 0.55));
}
.ix-upgrade-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.ix-upgrade-card--service .ix-upgrade-label {
  color: rgba(255, 255, 255, calc(0.65 - var(--upgrade-prog, 0) * 0.45));
}
.ix-upgrade-card--upgrade .ix-upgrade-label {
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  background-size: 200% 100%;
  background-position: calc(100% - var(--upgrade-prog, 0) * 100%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-upgrade-arrow {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 48px);
  color: rgba(236, 199, 119, calc(0.4 + var(--upgrade-prog, 0) * 0.6));
}

/* ─── Stages 2+3 : Before / After reveal reel ─────────────────────
   Three website pairs cross-fade in sequence. Each pair starts on
   the BEFORE image; a gold scan bar sweeps top → bottom; the AFTER
   image is revealed beneath the bar (clip-path inset shrinks from
   bottom as the scan descends). Hold beats top + bottom so the
   viewer reads both states clearly before the next pair. */
.ix-transform-beat--reveal {
  /* Width is the smaller of: max 1200px / 92vw / whatever produces
     58vh of height. Keeps the box from running into the headline
     above or the captions below on shorter viewports. */
  width: min(1200px, 92vw, calc(58vh * 1986 / 1125));
  aspect-ratio: 1986 / 1125;
  opacity: var(--reveal-op, 1);
}
/* Glass frame around the before/after reel — extends beyond the
   screenshots so they read as held inside a premium container. */
.ix-transform-beat--reveal::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 22px;
  border: 1px solid rgba(236, 199, 119, 0.22);
  background: rgba(20, 16, 10, 0.32);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 0 60px rgba(236, 199, 119, 0.05),
    0 50px 120px -40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: -1;
  pointer-events: none;
}
.ix-transform-pair {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  /* Box-shadows 3 and 4 are a gold glow that scales with --prog (the
     before→after progress). At --prog = 0 they're invisible; at 1 the
     AFTER frame sits inside an unmistakable champagne halo (inner
     bloom + outer spread). */
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(236, 199, 119, calc(0.22 + var(--prog, 0) * 0.45)),
    0 0 calc(var(--prog, 0) * 45px) rgba(236, 199, 119, calc(var(--prog, 0) * 0.5)),
    0 0 calc(var(--prog, 0) * 130px) rgba(236, 199, 119, calc(var(--prog, 0) * 0.3));
  opacity: var(--op, 0);
  transition: opacity 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  /* --prog drives the scan position + after-image reveal (0 → 1) */
}
.ix-transform-pair-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* BEFORE — desaturated, dim. Placeholder treatment so the same image
   reads as "old, rough" vs the polished after. Swap to real
   before/after JPGs later. */
.ix-transform-pair-img--before {
  /* Designed-rough source — no CSS filter applied. */
}
/* AFTER — full color, revealed by clipping the bottom away as the
   scan descends. clip-path's bottom inset shrinks from 100% → 0
   in sync with --prog. */
.ix-transform-pair-img--after {
  clip-path: inset(0 0 calc((1 - var(--prog, 0)) * 100%) 0);
}
/* Gold scan bar — thin horizontal line with a soft halo. Travels
   from top (0%) to bottom (100%) of the pair as --prog progresses. */
.ix-transform-pair-scan {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--prog, 0) * 100%);
  transform: translateY(-50%);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(236, 199, 119, 0) 0%,
    rgba(236, 199, 119, 1) 50%,
    rgba(236, 199, 119, 0) 100%);
  box-shadow:
    0 0 20px rgba(236, 199, 119, 0.9),
    0 0 60px rgba(236, 199, 119, 0.45);
  /* Hide the scan when the pair isn't actively sweeping (at 0 or 1) */
  opacity: var(--scan-op, 0);
  pointer-events: none;
}
/* Editorial BEFORE / AFTER labels — large vertical typography
   positioned OUTSIDE the reveal frame using `writing-mode` (cleaner
   than rotate() — keeps the element's box in the correct position
   so right:100% / left:100% naturally place it outside). BEFORE
   sits to the left and reads bottom-up; AFTER sits to the right
   and reads top-down. Opacity is driven by --reveal-prog set by JS
   so they cross-fade in sync with the gold scan bar's sweep. */
.ix-transform-reveal-label {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 78px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  transition: opacity 0.45s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-transform-reveal-label--before {
  /* right:100% places this element's right edge at the beat's left
     edge, fully outside. margin-right adds the visual gap. */
  right: 100%;
  margin-right: clamp(20px, 2vw, 44px);
  transform: translateY(-50%) rotate(180deg);
  /* Outline only — keeps the editorial scale without competing with
     the screenshot for visual weight. */
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 247, 223, 0.38);
          text-stroke: 1px rgba(254, 247, 223, 0.38);
  opacity: calc(1 - var(--reveal-prog, 0));
}
.ix-transform-reveal-label--after {
  /* left:100% places this element's left edge at the beat's right
     edge, fully outside. */
  left: 100%;
  margin-left: clamp(20px, 2vw, 44px);
  transform: translateY(-50%);
  /* Gold outline — distinct from BEFORE but still light-touch.
     A faint drop-shadow keeps the "upgrade" charge without
     overpowering the active screenshot. */
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 185, 125, 0.78);
          text-stroke: 1px rgba(217, 185, 125, 0.78);
  filter: drop-shadow(0 0 14px rgba(236, 199, 119, 0.12));
  opacity: var(--reveal-prog, 0);
}
/* The reveal beat needs visible overflow so the labels outside its
   bounds aren't clipped by the glass frame. */
.ix-transform-beat--reveal { overflow: visible; }
@media (max-width: 900px) {
  .ix-transform-reveal-label { font-size: clamp(20px, 8vw, 32px); }
  .ix-transform-reveal-label--before { margin-right: 12px; }
  .ix-transform-reveal-label--after  { margin-left: 12px; }
}

/* ─── Stage 2 : Extract (legacy — kept as no-op since markup removed) */
/* ─── Stage 2 (Act 2) : Extract — zoom call on left, brand mockup
   on right. The brand container holds two stacked images: Demas
   fades in first, DanielStark crossfades in over it on scroll. ── */
.ix-transform-beat--extract {
  /* Sized identically to the before/after reveal frame above so the
     two beats feel like a matching pair. */
  width: min(1200px, 92vw, calc(58vh * 1986 / 1125));
  aspect-ratio: 1986 / 1125;
  opacity: var(--extract-op, 0);
}
/* Glass frame around the extract scene — extends beyond the zoom +
   brand graphics so they read as held inside a premium container,
   matching the before/after reveal frame above. */
.ix-transform-beat--extract::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 22px;
  border: 1px solid rgba(236, 199, 119, 0.22);
  background: rgba(20, 16, 10, 0.32);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 0 60px rgba(236, 199, 119, 0.05),
    0 50px 120px -40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: -1;
  pointer-events: none;
}
.ix-extract-grid {
  position: absolute;
  inset: 0;
  display: grid;
  /* Zoom is narrower, brand is wider — emphasises the deliverable
     while keeping the zoom call legible. */
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(20px, 2.5vw, 44px);
  padding: 0;
}
.ix-extract-zoom,
.ix-extract-brands {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.ix-extract-zoom img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: var(--zoom-op, 0);
  transform: translateY(calc((1 - var(--zoom-op, 0)) * 14px));
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
  transition: filter 0.4s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-extract-brands {
  position: relative;
}
/* Crossfade pair — Demas on the front, DanielStark crossfades over
   it driven by --brand-flip (0 = Demas only, 1 = DanielStark only).
   The card wrapper handles the overall entry (translateY + fade). */
.ix-extract-brand-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(calc((1 - var(--brand-card-op, 0)) * 14px));
  opacity: var(--brand-card-op, 0);
}
.ix-extract-brand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
.ix-extract-brand--front { opacity: calc(1 - var(--brand-flip, 0)); }
.ix-extract-brand--back  { opacity: var(--brand-flip, 0); }

/* Extract stage video — replaces the old zoom-call + brand-mockup
   grid. Fills the entire beat container, plays muted + looped. */
.ix-extract-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(236, 199, 119, 0.18),
    0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

/* ─── Stage 3 (Act 3) : Express — placeholder.
   Three stacked translucent layers + a small designer-note label.
   Swap with the real screen or video when ready. ─── */
.ix-transform-beat--express {
  width: min(1100px, 90vw, calc(58vh * 16 / 9));
  aspect-ratio: 16 / 9;
  opacity: var(--express-op, 0);
}
.ix-express-frame {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(236, 199, 119, 0.18),
    0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
/* Slide stack: all absolutely positioned, fill the frame. Slide 1 is
   the base layer (always at rest). Slides 2/3/4 sit on top in order
   and rise from translateY(100%) (fully below) to translateY(0)
   (covering everything below). Per-slide CSS vars --exp-s2/3/4 are
   set on .ix-transform-stage by the scroll handler. */
.ix-express-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.ix-express-slide--1 { z-index: 1; }
.ix-express-slide--2 {
  z-index: 2;
  transform: translateY(calc((1 - var(--exp-s2, 0)) * 100%));
}
.ix-express-slide--3 {
  z-index: 3;
  transform: translateY(calc((1 - var(--exp-s3, 0)) * 100%));
}
.ix-express-slide--4 {
  z-index: 4;
  transform: translateY(calc((1 - var(--exp-s4, 0)) * 100%));
}

/* ─── Shared orb — through-line. Materializes mid-Stage 2,
   persists through Stage 3, dissolves into the closer rectangle. ── */
.ix-transform-orb {
  position: absolute;
  left: 50%;
  top: var(--stage-cy, 50vh);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e0 0%, #ecc777 55%, #b4863a 100%);
  box-shadow:
    0 0 22px rgba(255, 220, 140, 0.95),
    0 0 60px rgba(236, 199, 119, 0.55),
    0 0 120px rgba(236, 199, 119, 0.35);
  transform: translate(-50%, -50%) scale(var(--orb-sc, 0.4));
  opacity: var(--orb-op, 0);
  pointer-events: none;
  z-index: 2;
}

/* ─── Captions — same slot, fade in/out per stage. ──────────────── */
.ix-transform-captions {
  position: absolute;
  left: 50%;
  /* Anchored to the visual instead of the viewport bottom — the
     visual is centered at --stage-cy (default 46vh) with ~58vh
     height, so its bottom edge is at ~75vh. Caption sits 60px below
     that (clear visible gap from the screen mock-up). The express
     caption uses translateY override to pull itself up further, since
     its 3 lines would otherwise push to the viewport bottom. */
  top: calc(var(--stage-cy, 46vh) + 29vh + 60px);
  transform: translateX(-50%);
  /* Wider container so the long upgrade caption lays out on exactly
     two lines, with comfortable side padding (was 96vw — pushed to
     the screen edges; now 86vw leaves margin from the viewport edge). */
  width: min(1500px, 86vw);
  min-height: 5em;
  text-align: center;
}
.ix-transform-cap {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  /* Sized between the original tiny default and the too-big bump —
     reads as a section-hero line without crowding the visual above. */
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.ix-transform-cap em {
  font-style: normal;
  font-weight: 600;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-transform-cap b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-transform-cap--upgrade { opacity: var(--cap-upgrade-op, 0); }
.ix-transform-cap--extract { opacity: var(--cap-extract-op, 0); }
/* Express caption is 3 lines (longest of the three). Pull it up 30px
   so it doesn't push to the viewport bottom — the upgrade and extract
   captions are 2 lines and look right at the default 60px gap. */
.ix-transform-cap--express {
  opacity: var(--cap-express-op, 0);
  transform: translateY(-30px);
}

/* ─── Closer — framed gold-gradient payoff.
   Sits at the same vertical anchor as the orb / cards, so when cards
   fly to the rectangle perimeter they land on the closer frame's
   border. Frame fades in as cards arrive; text fades in once cards
   have merged into the border. ──────────────────────────────────── */
.ix-transform-closer {
  position: absolute;
  left: 50%;
  top: var(--stage-cy, 50vh);
  transform: translate(-50%, -50%);
  width: var(--rect-w);
  height: var(--rect-h);
  pointer-events: none;
}
.ix-transform-closer-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 90vw);
  height: min(900px, 90vw);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(236, 199, 119, 0.32) 0%,
    rgba(236, 199, 119, 0.12) 35%,
    rgba(236, 199, 119, 0) 65%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: calc(var(--closer-text-op, 0) * 0.95);
  animation: ix-transform-halo 6s ease-in-out infinite;
}
@keyframes ix-transform-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: brightness(0.92); }
  50%      { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.08); }
}
.ix-transform-closer-frame {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px clamp(24px, 4vw, 56px);
  /* Frame opacity is driven by --closer-text-op now too, so the
     container fades in with the text rather than as a separate beat. */
  opacity: var(--closer-text-op, 0);
}
.ix-transform-closer-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 84px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align: center;
  text-wrap: balance;
  opacity: var(--closer-text-op, 0);
}
.ix-transform-closer-sub {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  opacity: var(--closer-text-op, 0);
}

/* ─── Responsive: stack the split headline on smaller viewports.
   The desktop layout puts the two halves side-by-side and animates
   the right half into viewport-center as the user scrolls. On
   smaller screens that side-by-side arrangement crams the type;
   stacking reads cleaner and the horizontal lock-shift is no longer
   relevant (override --title-x in the transform so the JS-driven
   horizontal nudge doesn't drift the column off-center). */
@media (max-width: 1024px) {
  .ix-transform-title {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vh, 40px);
    width: min(720px, 92vw);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .ix-transform-title-left { text-align: center; font-size: max(0.7em, 16px); }
  .ix-transform-title-right { text-align: center; }
}
@media (max-width: 768px) {
  .ix-transform-title {
    gap: clamp(14px, 2.5vh, 28px);
    width: min(560px, 90vw);
    font-size: calc(clamp(22px, 6.5vw, 44px) * var(--title-sc, 1));
  }
  .ix-transform-title-left { font-size: max(0.75em, 14px); }
}

/* ─── Responsive: before/after reveal beat + captions.
   The image is bounded by `width: min(1200px, 92vw, calc(58vh * 1986/1125))`
   and `aspect-ratio: 1986/1125`, so its actual half-height is
   `min(29vh, 24vw)` — 29vh on landscape (height-bound) and 24vw on
   portrait (width-bound). Using that instead of a hardcoded 29vh
   keeps the caption flush below the visual at every viewport. */
@media (max-width: 1024px) {
  .ix-transform-beat--reveal {
    /* Leave room either side for the smaller vertical labels. */
    width: min(86vw, calc(58vh * 1986 / 1125));
  }
  .ix-transform-beat--reveal::before { inset: -12px; border-radius: 14px; }
  .ix-transform-reveal-label {
    font-size: clamp(14px, 2.4vw, 24px);
    letter-spacing: 0.2em;
  }
  .ix-transform-reveal-label--before { margin-right: 6px; }
  .ix-transform-reveal-label--after  { margin-left: 6px; }
  /* Stage center sits below the locked title with a clear gap, then
     one image-half-height further down (so image top = title-bottom +
     gap). Caption mirrors the same image-half-height below center.
     Top buffer accounts for the title block height (including the
     invisible-but-space-occupying left half) plus a visible margin. */
  .ix-transform-stage { --stage-cy: calc(10vh + 150px + min(29vh, 24vw)); }
  .ix-transform-captions { top: calc(var(--stage-cy) + min(29vh, 24vw) + 64px); }
}
@media (max-width: 768px) {
  .ix-transform-beat--reveal::before { inset: -8px; border-radius: 10px; }
  .ix-transform-stage { --stage-cy: calc(10vh + 130px + min(29vh, 24vw)); }
  .ix-transform-captions { top: calc(var(--stage-cy) + min(29vh, 24vw) + 56px); }
}
@media (max-width: 600px) {
  /* No horizontal room for vertical side labels at this size —
     flip them above/below the frame as horizontal labels instead.
     BEFORE rides above the image, AFTER rides beneath it. */
  .ix-transform-beat--reveal { width: min(94vw, calc(58vh * 1986 / 1125)); }
  .ix-transform-reveal-label {
    display: block;
    writing-mode: horizontal-tb;
    left: 50%;
    top: auto;
    font-size: clamp(16px, 4.5vw, 26px);
    letter-spacing: 0.28em;
  }
  .ix-transform-reveal-label--before {
    bottom: 100%;
    right: auto;
    margin: 0 0 12px 0;
    transform: translateX(-50%);
  }
  .ix-transform-reveal-label--after {
    top: 100%;
    left: 50%;
    margin: 12px 0 0 0;
    transform: translateX(-50%);
  }
  /* Make room for the horizontal BEFORE label above the image and
     the AFTER label below it (label ~26px + 12px margin = ~38px). */
  .ix-transform-stage { --stage-cy: calc(10vh + 170px + min(29vh, 24vw)); }
  .ix-transform-captions { top: calc(var(--stage-cy) + min(29vh, 24vw) + 96px); }
}
@media (max-width: 480px) {
  .ix-transform-stage { --stage-cy: calc(10vh + 150px + min(29vh, 24vw)); }
  .ix-transform-captions { top: calc(var(--stage-cy) + min(29vh, 24vw) + 88px); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-transform-stage {
    --title-sc: 0.7; --title-top: 14vh;
    --title-left-op: 0; --title-right-op: 1; --title-right-grad: 1;
    --upgrade-op: 1; --upgrade-prog: 1;
    --extract-op: 0; --extract-prog: 1;
    --express-op: 0; --express-prog: 1; --to-rect: 0; --card-op: 0;
    --orb-op: 0; --orb-sc: 1; --vessel-op: 0;
    --cap-upgrade-op: 1; --cap-extract-op: 0; --cap-express-op: 0;
    --closer-frame-op: 1; --closer-text-op: 1;
    height: auto;
  }
  .ix-transform-pin { position: static; height: auto; padding: 80px 24px; }
  .ix-transform-title, .ix-transform-beat, .ix-transform-orb,
  .ix-transform-captions, .ix-transform-closer {
    position: relative; left: auto; top: auto; bottom: auto;
    transform: none; margin: 0 auto 32px;
  }
  .ix-transform-cap { position: relative; }
  .ix-transform-cap--extract, .ix-transform-cap--express { display: none; }
  .ix-transform-closer-halo { animation: none; }
}

/* ------------------------------------------------------------------
   Why Iconic Matters — editorial sticky-left + scrolling-right.
   The headline anchors on the left (sticky); the right column carries
   four stacked copy blocks that fade in as they enter the viewport.
   A thin gold rail on the left edge of the right column tracks the
   reader's scroll progress through the section.
------------------------------------------------------------------ */
.ix-iconic-stage {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: visible;
  /* Clip the painted contents to the section's box so the sticky
     bleed image cannot leak into the next section. clip-path does
     NOT create a scroll container — sticky positioning on
     descendants (headline, bleed) keeps working. */
  clip-path: inset(0);
  background: transparent;
  color: #181613;
  --scroll-prog: 0;
}
/* Background — matches the image's near-white floor so the bleed
   image dissolves seamlessly into the surrounding section. */
.ix-iconic-bg {
  position: absolute;
  inset: 0;
  background: #f5f3ee;
  opacity: 0;
  transition: opacity 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  z-index: 0;
}
.ix-iconic-stage.is-live .ix-iconic-bg { opacity: 1; }

/* Bleed image — sticky-pinned at the top of the viewport while the
   section scrolls underneath. Once it fades in it stays fixed; the
   blocks scroll past on top. The negative margin cancels its flow
   contribution so the grid (heading + blocks) overlaps it cleanly. */
.ix-iconic-bleed {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin: 0 0 -100vh 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-iconic-stage.is-image-revealed .ix-iconic-bleed { opacity: 1; }
.ix-iconic-bleed img {
  width: 100%;
  height: 100%;
  /* cover — fills the full section, no cream bands above/below. The
     wider 16:9 composition gets a slight horizontal crop on tall
     viewports, but the gold tile + immediate crowd stay centered. */
  object-fit: cover;
  object-position: center 50%;
  display: block;
}
@media (max-width: 880px) {
  .ix-iconic-bleed { opacity: 0.5 !important; }
}

/* Two-column grid: sticky headline left, scrolling blocks right.
   Headline anchors near the top of the section; the right column
   carries its own padding-top so the first block sits comfortably
   below it instead of fighting for space. */
.ix-iconic-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(56px, 7vw, 120px);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 130px) clamp(24px, 6vw, 80px) clamp(160px, 18vh, 240px);
  align-items: start;
}

/* ─── Sticky left column ───────────────────────────────────────── */
.ix-iconic-left {
  position: sticky;
  top: 18vh;
  align-self: start;
}
.ix-iconic-heading {
  margin: 0;
  /* Stack the 3 lines with explicit vertical gap so they read as
     deliberate beats and fill the sticky left column. */
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.2vh, 44px);
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  /* Tight intra-line spacing — each line's internal wrap stays compact,
     while the gap above handles inter-line separation. */
  line-height: 1.12;
  /* Scaled down slightly so the 3-line headline fits comfortably in
     the sticky left column without crowding the right copy. */
  font-size: clamp(30px, 3.6vw, 52px);
  color: #181613;
  text-wrap: balance;
  /* Reveals first — as soon as the section enters view. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.9s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-iconic-stage.is-live .ix-iconic-heading {
  opacity: 1;
  transform: none;
}
.ix-iconic-heading-line {
  display: block;
}
.ix-iconic-heading-emph {
  display: block;
  margin-top: 0;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.015em;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(1.1) brightness(0.78);
}
/* Inline accents inside the editorial blocks — <b> = bold gradient
   (for "Iconic" / "Exceptional"), <em> = italic emphasis (for "yeses"). */
.ix-iconic-block b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(1.1) brightness(0.78);
}
.ix-iconic-block em {
  font-style: italic;
  font-weight: 400;
}

/* ─── Right column (scrolling blocks) ──────────────────────────── */
.ix-iconic-right {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Tighter spacing between blocks so the editorial cascade reads as
     a connected sequence instead of disconnected islands. */
  gap: clamp(40px, 6vh, 90px);
  /* Tall padding-top creates the "delay" — the reader scrolls past
     the image area (with the gold tile centered) before the first
     block enters the viewport. */
  padding-top: clamp(110vh, 120vh, 130vh);
}

/* Vertical gold rail on the left edge of the right column.
   - rail-fill is the static 1px backing line.
   - rail-glow is the moving gold halo whose vertical position is
     tied to the section's scroll progress. */
.ix-iconic-rail {
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(-32px, -2.5vw, -16px);
  width: 1px;
  pointer-events: none;
  opacity: 0;
  /* Reveals once the image has had a beat to fade in. */
  transition: opacity 0.8s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-iconic-stage.is-image-revealed .ix-iconic-rail { opacity: 1; }
.ix-iconic-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(180, 134, 58, 0) 0%,
    rgba(180, 134, 58, 0.6) 6%,
    rgba(180, 134, 58, 0.6) 94%,
    rgba(180, 134, 58, 0) 100%);
}
/* Rail glow — same 1px hairline as the rail itself, just deep gold so
   it stands out against the cream. */
.ix-iconic-rail-glow {
  position: absolute;
  left: 0;
  width: 1px;
  height: 110px;
  top: calc(var(--scroll-prog, 0) * 100% - 55px);
  background: linear-gradient(to bottom,
    rgba(180, 134, 58, 0) 0%,
    rgba(180, 110, 45, 1) 50%,
    rgba(180, 134, 58, 0) 100%);
  filter: drop-shadow(0 0 6px rgba(180, 110, 45, 0.6));
  will-change: top;
}

/* Block — plain text, always visible in normal flow. No fade-in.
   Blocks scroll up naturally as the reader moves down. The right
   column's tall padding-top is the only "delay" — the reader
   scrolls through the image area before the first block enters
   the viewport. */
.ix-iconic-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 20px);
}
.ix-iconic-block p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(24, 22, 19, 0.78);
  text-wrap: balance;
}

/* Statement variant — "What we do is different. / We build Iconic.
   Exceptional." — same weight and size as the quote refrain. */
.ix-iconic-block--statement p {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #0d0b08;
}
/* Block 3 — the paired refrain. Solid black, weighty, single-line. */
.ix-iconic-block--quote p {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #0d0b08;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  filter: none;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .ix-iconic-block--quote p { white-space: normal; }
}

/* Block 4 — closer. The lead line is heavier dark text; the stamp is
   the manifesto payoff in big bold gold. */
.ix-iconic-block--closer > p:not(.ix-iconic-stamp) {
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 28px);
  color: #181613;
  margin-bottom: clamp(10px, 1.2vh, 18px);
}
.ix-iconic-cta {
  margin-top: clamp(24px, 3vh, 40px);
}
.ix-iconic-block--closer .ix-iconic-stamp {
  margin-top: clamp(14px, 2vh, 28px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #181613;
}
.ix-iconic-block--closer .ix-iconic-stamp em {
  font-style: normal;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(1.1) brightness(0.78);
}

/* On narrower viewports collapse the grid: headline first, blocks
   stacked below — sticky disabled. */
@media (max-width: 880px) {
  .ix-iconic-grid {
    grid-template-columns: 1fr;
    gap: clamp(48px, 8vh, 80px);
  }
  .ix-iconic-left { position: relative; top: auto; }
  .ix-iconic-rail { left: -16px; }
}

/* ─── Floating feature cards — magazine + podcast tiles drifting
   behind the content. Decorative; pointer-events disabled. ──────── */
.ix-iconic-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 0.3s;
}
.ix-iconic-stage.is-live .ix-iconic-cards { opacity: 1; }

.ix-feature-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(180, 134, 58, 0.35);
  box-shadow:
    0 18px 36px rgba(70, 50, 20, 0.12),
    0 4px 10px rgba(70, 50, 20, 0.08);
  padding: 14px;
  font-family: var(--font-display);
  color: #2a241c;
  user-select: none;
}
.ix-feature-banner {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #b4863a;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(180, 134, 58, 0.35);
  margin-bottom: 12px;
}
.ix-feature-portrait {
  flex: 1;
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(180, 134, 58, 0.22) 0%, rgba(180, 134, 58, 0.05) 60%, rgba(180, 134, 58, 0) 100%),
    linear-gradient(180deg, #f0e6d2 0%, #d9c8a4 100%);
  border-radius: 2px;
  position: relative;
}
.ix-feature-portrait::after {
  /* Abstract head/shoulders silhouette in warm sepia. */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 56%; height: 70%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 22%, #6b573a 0%, #6b573a 28%, transparent 30%),
    linear-gradient(180deg, transparent 30%, #6b573a 56%, #6b573a 100%);
  -webkit-mask: radial-gradient(120% 90% at 50% 100%, #000 60%, transparent 65%);
          mask: radial-gradient(120% 90% at 50% 100%, #000 60%, transparent 65%);
  opacity: 0.55;
}
.ix-feature-headline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: #2a241c;
  margin-top: 10px;
  text-align: center;
  text-wrap: balance;
}
.ix-feature-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(180, 134, 58, 0.85);
  text-align: center;
  margin-top: 6px;
}

/* Podcast variant — square, with a gold disc as cover art. */
.ix-feature-card--pod {
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ix-feature-disc {
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #f5e2b8 0%, #d9b97d 50%, #b4863a 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), inset 0 0 12px rgba(70, 50, 20, 0.25);
}
.ix-feature-disc-mark {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2a241c;
  box-shadow: inset 0 0 0 2px #b4863a;
}
.ix-feature-show {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 12px;
  text-align: center;
  color: #2a241c;
}

/* Per-card placement + rotation. Sized via aspect-ratio so they scale
   gracefully with viewport. */
.ix-feature-card--mag { aspect-ratio: 3 / 4.2; width: clamp(140px, 13vw, 200px); }
.ix-feature-card--pod { aspect-ratio: 1; width: clamp(120px, 11vw, 170px); }

.ix-feature-card--c1 { left:  4%;  top: 10%; transform: rotate(-7deg); }
.ix-feature-card--c2 { right: 5%;  top:  9%; transform: rotate(6deg); }
.ix-feature-card--c3 { left:  3%;  top: 52%; transform: rotate(4deg); }
.ix-feature-card--c4 { right: 4%;  top: 48%; transform: rotate(-5deg); }
.ix-feature-card--c5 { right: 7%;  bottom: 14%; transform: rotate(3deg); }

@media (max-width: 900px) {
  .ix-feature-card--c3, .ix-feature-card--c4 { display: none; }
  .ix-feature-card--c1, .ix-feature-card--c2, .ix-feature-card--c5 {
    width: clamp(100px, 22vw, 140px);
  }
}
@media (max-width: 640px) {
  .ix-iconic-cards { display: none; }
}

/* ─── Headline frame — hairline gold L-brackets at corners. ───── */
.ix-iconic-headline-block {
  position: relative;
  display: inline-block;
  padding: clamp(28px, 4vh, 56px) clamp(28px, 5vw, 80px);
  margin-bottom: clamp(56px, 8vh, 96px);
}
.ix-iconic-headline-block .ix-iconic-heading { margin: 0; }
.ix-iconic-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(180, 134, 58, 0.7);
  pointer-events: none;
}
.ix-iconic-corner--tl { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.ix-iconic-corner--tr { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; }
.ix-iconic-corner--bl { bottom: 0; left: 0;    border-right: 0; border-top: 0; }
.ix-iconic-corner--br { bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

/* ─── "As featured in" marquee at the bottom of the section. ───── */
.ix-iconic-marquee {
  position: relative;
  z-index: 1;
  margin-top: clamp(60px, 8vh, 110px);
  padding: clamp(32px, 4vh, 56px) 0;
  border-top: 1px solid rgba(180, 134, 58, 0.32);
  border-bottom: 1px solid rgba(180, 134, 58, 0.32);
  overflow: hidden;
  /* Soft fade at edges so words don't pop in/out abruptly. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ix-iconic-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 24px);
  letter-spacing: 0.04em;
  color: rgba(70, 50, 20, 0.55);
  animation: ix-iconic-marquee 36s linear infinite;
  will-change: transform;
}
.ix-iconic-marquee-sep {
  color: rgba(180, 134, 58, 0.7);
  font-size: 0.65em;
}
@keyframes ix-iconic-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-iconic-bg { transition: none; opacity: 1; }
  .ix-iconic-cards { opacity: 1; transition: none; }
  .ix-iconic-line, .ix-iconic-quote, .ix-iconic-rule, .ix-iconic-stamp {
    opacity: 1; transform: none; transition: none;
  }
  .ix-iconic-marquee-track { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   WHY ICONIC MATTERS — Scroll-jacked card deck.
   The section is 500vh tall; its inner pin sticks at the top of the
   viewport for the duration so the hero + glass cards play out across
   one viewport while the user scrolls. The previous .ix-iconic-*
   rules above are now dead (replaced HTML); left in place per
   surgical-changes policy.
   Timeline (progress 0 → 1 over the section's height):
     0.00 – 0.20  hero cascade fades in (3 lines stagger)
     0.20 – 0.30  hero holds full size
     0.30 – 0.40  hero scales down to clear room for cards
     0.40 – 1.00  6 glass cards reveal one at a time (carousel)
   ────────────────────────────────────────────────────────────────── */

.ix-iconic-stage {
  position: relative;
  background: #ffffff;
  color: #1a1a1a;
  padding: 0;
  /* Tall scroll container — bumped from 500vh → 800vh so each card
     gets ~60vh of scroll instead of ~37vh. Cards feel less hurried. */
  height: 800vh;
}

.ix-iconic-mf-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* Collage background at 5% opacity */
.ix-iconic-mf-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/whyiconicbg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

/* At smaller viewports the 5% collage texture isn't legible anyway
   and its portfolio-card edges read as distracting vertical strips on
   the sides. Hide it so the section reads as a clean white panel. */
@media (max-width: 1024px) {
  .ix-iconic-mf-bg { display: none; }
}

/* White gradient fades top + bottom so the collage blends seamlessly */
.ix-iconic-mf-fade {
  position: absolute;
  left: 0; right: 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
}
.ix-iconic-mf-fade--top    { top: 0;    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 100%); }
.ix-iconic-mf-fade--bottom { bottom: 0; background: linear-gradient(0deg,   #ffffff 0%, rgba(255,255,255,0) 100%); }

/* Stage inside the pin — hero is vertically centered until cards
   appear; the deck is absolutely positioned at center so it shares
   the same anchor and the hero just translates upward to clear room. */
.ix-iconic-mf {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── Cinematic 3-line hero ────────────────────────────────────── */
.ix-iconic-mf-hero {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 18px);
  font-family: var(--font-display, serif);
  line-height: 1.15;
  letter-spacing: -0.015em;
  /* Translates upward (no resize) when cards begin appearing —
     driven by --hero-y in vh. */
  transform: translate3d(0, var(--hero-y, 0vh), 0);
  transition: transform 700ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  /* Allow long single-line phrases to overflow the centered text
     container without wrapping (each line is whitespace: nowrap). */
  width: 100%;
}
.ix-iconic-mf-line {
  display: block;
  white-space: nowrap;
  opacity: var(--line-op, 0);
  transform: translateY(var(--line-y, 18px));
  transition:
    opacity 700ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 700ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-iconic-mf-line--1 {
  --line-op: var(--hero-line-1-op, 0);
  --line-y: calc((1 - var(--hero-line-1-op, 0)) * 18px);
  font-size: clamp(26px, 2.4vw, 42px);
  font-weight: 400;
  color: #888;
}
.ix-iconic-mf-line--2 {
  --line-op: var(--hero-line-2-op, 0);
  --line-y: calc((1 - var(--hero-line-2-op, 0)) * 18px);
  font-size: clamp(34px, 3.2vw, 54px);
  font-weight: 600;
  color: #1a1a1a;
}
/* Line 3 — entire phrase carries the authority gradient and stays
   on a single visual line. CHOSEN gets a thick gold underline. */
.ix-iconic-mf-line--3 {
  --line-op: var(--hero-line-3-op, 0);
  --line-y: calc((1 - var(--hero-line-3-op, 0)) * 18px);
  font-size: clamp(38px, 3.6vw, 60px);
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-iconic-mf-line--3 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: #D9B97D;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}

/* ── Card deck ─────────────────────────────────────────────────────
   All 6 cards sit at the same vertical anchor (absolute, centered).
   Each card has both --card-N-op (opacity) and --card-N-y (translateY
   in px) driven by JS. The active card sits at y=0; cards that have
   passed drift upward + fade out; cards waiting below sit at +y and
   fade in as they approach the active slot. */
.ix-iconic-mf-deck {
  position: absolute;
  left: 50%;
  /* Anchored by its TOP. Deck top at 52vh gives the past-card stack
     room to layer above without reaching the hero (which ends at ~37vh
     after lift). Active card top sits ~15vh below the heading. */
  top: 52%;
  width: min(1080px, 94vw);
  transform: translateX(-50%);
  pointer-events: none;
}
.ix-iconic-mf-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: clamp(28px, 5vh, 56px) clamp(28px, 5vw, 64px);
  border-radius: 22px;
  /* Glass — frosted-white over the 5% collage. Bumped from 0.6 to
     0.82 so the past cards stacked behind don't bleed through the
     active card's body so visibly. Still reads as glass thanks to
     the backdrop-filter blur, just less see-through. */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(201, 138, 115, 0.22);
  /* Shadow + champagne glow both scale with --card-op so the active
     card sits proudest, past cards recede into the stack. */
  box-shadow:
    0 30px 80px -30px rgba(70, 50, 20, calc(0.12 + var(--card-op, 0) * 0.12)),
    0 0 calc(var(--card-op, 0) * 70px) rgba(217, 185, 125, calc(var(--card-op, 0) * 0.18));
  opacity: var(--card-op, 0);
  transform:
    translate3d(0, var(--card-y, 30px), 0)
    scale(var(--card-sc, 0.97))
    rotate(var(--card-rot, 0deg));
  filter: blur(var(--card-blur, 0px));
  z-index: var(--card-zi, 1);
  pointer-events: none;
  transform-origin: center top;
  transition:
    opacity 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    filter 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-iconic-mf-card[data-card="1"] {
  --card-op:   var(--card-1-op,   0);
  --card-y:    var(--card-1-y,    30px);
  --card-sc:   var(--card-1-sc,   0.97);
  --card-rot:  var(--card-1-rot,  0deg);
  --card-blur: var(--card-1-blur, 0px);
  --card-zi:   var(--card-1-zi,   1);
}
.ix-iconic-mf-card[data-card="2"] {
  --card-op:   var(--card-2-op,   0);
  --card-y:    var(--card-2-y,    30px);
  --card-sc:   var(--card-2-sc,   0.97);
  --card-rot:  var(--card-2-rot,  0deg);
  --card-blur: var(--card-2-blur, 0px);
  --card-zi:   var(--card-2-zi,   1);
}
.ix-iconic-mf-card[data-card="3"] {
  --card-op:   var(--card-3-op,   0);
  --card-y:    var(--card-3-y,    30px);
  --card-sc:   var(--card-3-sc,   0.97);
  --card-rot:  var(--card-3-rot,  0deg);
  --card-blur: var(--card-3-blur, 0px);
  --card-zi:   var(--card-3-zi,   1);
}
.ix-iconic-mf-card[data-card="4"] {
  --card-op:   var(--card-4-op,   0);
  --card-y:    var(--card-4-y,    30px);
  --card-sc:   var(--card-4-sc,   0.97);
  --card-rot:  var(--card-4-rot,  0deg);
  --card-blur: var(--card-4-blur, 0px);
  --card-zi:   var(--card-4-zi,   1);
}
.ix-iconic-mf-card[data-card="5"] {
  --card-op:   var(--card-5-op,   0);
  --card-y:    var(--card-5-y,    30px);
  --card-sc:   var(--card-5-sc,   0.97);
  --card-rot:  var(--card-5-rot,  0deg);
  --card-blur: var(--card-5-blur, 0px);
  --card-zi:   var(--card-5-zi,   1);
}
.ix-iconic-mf-card[data-card="6"] {
  --card-op:   var(--card-6-op,   0);
  --card-y:    var(--card-6-y,    30px);
  --card-sc:   var(--card-6-sc,   0.97);
  --card-rot:  var(--card-6-rot,  0deg);
  --card-blur: var(--card-6-blur, 0px);
  --card-zi:   var(--card-6-zi,   1);
}

.ix-iconic-mf-card p {
  margin: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  color: #2a2a2a;
}
.ix-iconic-mf-card p + p { margin-top: 0.65em; }

.ix-iconic-mf-card--statement p {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 600;
  line-height: 1.25;
  color: #1a1a1a;
  letter-spacing: -0.005em;
}
.ix-iconic-mf-card--quote p {
  font-style: italic;
  font-size: clamp(22px, 1.9vw, 32px);
  color: #1a1a1a;
}
.ix-iconic-mf-card b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ix-iconic-mf-card em {
  font-style: italic;
  color: inherit;
}

/* Closer card — payoff line + CTA inside the final glass card */
.ix-iconic-mf-card-lead {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 1.8vw, 30px) !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.005em;
  /* Single-line "We position you as the go-to voice in your niche." */
  white-space: nowrap;
}
.ix-iconic-mf-payoff {
  margin: clamp(20px, 3vh, 36px) 0 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 2.2vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  /* Authority gradient — "To Stand Out As The Icon Of Your Industry"
     reads as the gold payoff line. */
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.ix-iconic-mf-card--closer {
  pointer-events: auto;
}
.ix-iconic-mf-cta {
  margin-top: clamp(16px, 2.4vh, 28px);
  pointer-events: auto;
}

/* Narrow the card deck so its border outline sits inside the viewport
   (was 94vw — flush with the edge, outline read as cropped). */
@media (max-width: 1024px) {
  .ix-iconic-mf-deck { width: min(880px, 86vw); }
}
@media (max-width: 768px) {
  /* The hero lines are `white-space: nowrap` at desktop sizing so each
     phrase stays on a single visual line. Below 768 the long phrases
     ("Great Branding Gets Noticed.", "Iconic Branding Gets CHOSEN.")
     overflow and get clipped — let them wrap. Also pull the font
     ramp down so the wrapped lines don't stack too tall. */
  .ix-iconic-mf-hero { line-height: 1.18; }
  .ix-iconic-mf-line { white-space: normal; text-wrap: balance; }
  .ix-iconic-mf-line--1 { font-size: clamp(16px, 4.2vw, 24px); }
  .ix-iconic-mf-line--2 { font-size: clamp(22px, 5.4vw, 32px); }
  .ix-iconic-mf-line--3 { font-size: clamp(24px, 6vw, 36px); }
  .ix-iconic-mf-deck { width: min(640px, 88vw); }
}
@media (max-width: 640px) {
  .ix-iconic-mf { padding: 40px 12px 32px; }
  .ix-iconic-mf-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-iconic-mf-hero { transform: none !important; }
  .ix-iconic-mf-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Cards revert to a static vertical stack (relative flow), no scroll
     animation — all visible. */
  .ix-iconic-mf-deck {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 40px auto 0;
  }
  .ix-iconic-mf-card {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    margin-bottom: 20px;
  }
}

/* ------------------------------------------------------------------
   Two-column editorial blocks (Who We Are, What Makes Us Different…)
------------------------------------------------------------------ */
.ix-editorial {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.ix-editorial-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
  position: sticky; top: 120px;
}
.ix-editorial-heading b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-editorial-body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--fg-2);
}
.ix-editorial-body p { margin: 0 0 20px; }
.ix-editorial-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Portfolio
------------------------------------------------------------------ */
/* Soft glowing orb — atmospheric backdrop on the right side of the
   portfolio section so the dark bg has some depth/warmth. */
/* overflow MUST stay visible — the intro inside this section uses
   position: sticky, and any non-visible overflow on an ancestor turns
   the section into the sticky's scroll container, which kills the pin. */
#portfolio { position: relative; }
.ix-portfolio-glow {
  position: absolute;
  top: -15%;
  right: -10%;
  width: clamp(420px, 50vw, 760px);
  height: clamp(420px, 50vw, 760px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(236, 199, 119, 0.28) 0%,
    rgba(217, 185, 125, 0.16) 28%,
    rgba(180, 134, 58, 0.08) 50%,
    rgba(180, 134, 58, 0) 72%);
  filter: blur(48px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  animation: ix-portfolio-glow-breathe 8s ease-in-out infinite;
}
@keyframes ix-portfolio-glow-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-portfolio-glow { animation: none; }
}

/* ─── Portfolio headline: editorial chapter cascade ──────────────
   Cinematic intro sequence triggered by the section's IO flipping
   .is-in. Each child gets its own delay so the section reveals like
   a film chapter card:
     t=0     hairlines draw out + eyebrow fades in
     t=0.7s  logo stamps in with a soft gold halo pulse
     t=1.4s  headline lifts in as one block
     t=2.2s  body copy fades in (line-staggered)
     t=3.0s  tabs fade in
     t=3.2s  carousel fades in
------------------------------------------------------------------ */
/* Override the section-level .ix-reveal fade so individual elements
   can stage their own reveals. */
#portfolio.ix-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Eyebrow + flanking hairline rules. */
.ix-portfolio-eyebrow-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
}
.ix-portfolio-eyebrow {
  display: inline-block;
  margin: 0;
}
.ix-portfolio-rule {
  display: block;
  height: 1px;
  width: 60px;
  background: linear-gradient(to right,
    transparent,
    var(--color-champagne, #c4904c),
    transparent);
}

/* Headline. */
.ix-portfolio-headline {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.18em 0.4em;
  padding: 0.2em 0;
}
.ix-portfolio-logo-wrap {
  display: inline-flex;
  align-items: baseline;
  position: relative;
}
.ix-portfolio-logo {
  height: 0.86em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
}
.ix-portfolio-logo-period {
  display: inline-block;
  margin-left: 0.04em;
  color: var(--fg-1);
  font-weight: 700;
}
.ix-portfolio-words { display: inline; }

/* Body copy — secondary line reads dimmer than the lead paragraph. */
#portfolio .ix-section-body { color: #fff; }
#portfolio .ix-section-body p { color: #fff; }
#portfolio .ix-section-body p:nth-of-type(2) { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .ix-portfolio-spotlight { animation: none; display: none; }
}

/* ─── Portfolio: tabs + coverflow carousel ────────────────────── */
.ix-portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 24px);
  margin: 24px 0 56px;
}
.ix-portfolio-tab {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(236, 199, 119, 0.22);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition:
    color 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-portfolio-tab:hover {
  color: #fff;
  border-color: rgba(236, 199, 119, 0.45);
}
.ix-portfolio-tab.is-active {
  color: #181613;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  border-color: transparent;
}

.ix-portfolio-carousel {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  /* Pull tighter to the tabs above. */
  margin-top: -40px;
  /* Tracks the slide height (slide.width × 1.446) — see slide
     sizing below. Tighter fit so there's no big empty band between
     the tabs and the visible iPad. */
  height: clamp(520px, 76vh, 720px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.ix-portfolio-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ix-portfolio-track[hidden] { display: none; }

.ix-portfolio-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Aspect matches the screenshots (531 / 768). Width is clamped by
     viewport width AND height (so the slide can't grow taller than
     the carousel on short viewports). */
  width: min(clamp(260px, 28vw, 420px), 48vh);
  aspect-ratio: 531 / 768;
  margin: 0;
  transition:
    transform 0.7s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.7s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform, opacity;
}

/* External iPad PNG retired — replaced by a CSS-only mock that
   guarantees the full screenshot stays visible inside the screen. */
.ix-portfolio-ipad-frame { display: none !important; }

/* Inactive slides: dark overlay + centered client logo.
   Visible by default; the active center slide hides it so the
   screenshot reads in full. */
.ix-portfolio-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  opacity: 1;
}
.ix-portfolio-overlay img {
  width: clamp(80px, 9vw, 130px);
  max-height: 70px;
  object-fit: contain;
  /* Force every logo to render as a clean white silhouette so it
     reads against the dark overlay regardless of source color. */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.ix-portfolio-slide.is-active .ix-portfolio-overlay { opacity: 0; }

/* Hide the caption (name) on inactive slides — name only reads on
   the active center slide. */
.ix-portfolio-slide:not(.is-active) .ix-portfolio-caption {
  opacity: 0;
}

/* Active slide → CSS iPad mockup. Frame becomes the device body
   (rounded silver/dark frame with a small camera dot); inner
   screenshot fits the inner screen area without cropping. */
.ix-portfolio-slide.is-active .ix-portfolio-frame {
  background: linear-gradient(135deg, #34343a 0%, #18181c 48%, #2c2c32 100%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4.4% 4%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 36px 90px rgba(0, 0, 0, 0.6),
    0 8px 26px rgba(0, 0, 0, 0.45);
}
.ix-portfolio-slide.is-active .ix-portfolio-frame::after {
  /* Camera dot at the top center — sits on the bezel band. */
  content: "";
  position: absolute;
  top: 1.5%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  z-index: 4;
}
.ix-portfolio-slide.is-active .ix-portfolio-frame img {
  border-radius: 12px;
}
/* Caption is a 30%-tall dark band at the bottom of the iPad with the
   client's logo on top and name below. */
.ix-portfolio-slide.is-active .ix-portfolio-caption {
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  padding: 0 clamp(16px, 1.8vw, 28px) 44px;
  border-radius: 0 0 28px 28px;
}
.ix-portfolio-slide.is-active .ix-portfolio-cap-logo {
  width: clamp(95px, 9.5vw, 140px);
  max-height: 42px;
}
.ix-portfolio-slide.is-active .ix-portfolio-name {
  font-size: clamp(15px, 1.35vw, 20px);
}
.ix-portfolio-slide.is-active .ix-portfolio-name {
  line-height: 1;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ix-portfolio-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0908;
  border: 1px solid rgba(236, 199, 119, 0.22);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 0 0 4px rgba(0, 0, 0, 0.6);
}
/* Direct-child selector so this only sizes the screenshot — not the
   logo nested inside the overlay below. */
.ix-portfolio-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shift the visible portion down a bit so the website's top
     header doesn't sit pressed against the iPad's top bezel. */
  object-position: center 30%;
  display: block;
}
.ix-portfolio-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px clamp(16px, 1.8vw, 28px) 12px;
  /* Deeper dark gradient — heavier coverage on the bottom band. */
  background: linear-gradient(to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.98) 40%,
    rgba(0, 0, 0, 0.85) 70%,
    rgba(0, 0, 0, 0.45) 90%,
    rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-align: center;
  pointer-events: none;
}
/* Caption logo (active state) — sits beneath the client name. Same
   white-silhouette treatment as the overlay logo. */
.ix-portfolio-cap-logo {
  width: clamp(70px, 7vw, 100px);
  max-height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  display: block;
}
.ix-portfolio-slide:not(.is-active) .ix-portfolio-cap-logo { display: none; }
.ix-portfolio-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.04em;
  color: #fff;
  text-wrap: balance;
}

@media (max-width: 720px) {
  .ix-portfolio-slide { width: clamp(220px, 70vw, 320px); }
}

/* Prev / next nav arrows — sit on the carousel's left & right
   edges, vertically centered with the active slide. */
.ix-portfolio-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  border-radius: 50%;
  background: rgba(20, 16, 10, 0.55);
  border: 1px solid rgba(236, 199, 119, 0.32);
  color: rgba(236, 199, 119, 0.9);
  cursor: pointer;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    color 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-portfolio-arrow svg {
  width: 50%;
  height: 50%;
  display: block;
}
.ix-portfolio-arrow:hover {
  background: rgba(40, 30, 15, 0.78);
  color: #fff;
  border-color: rgba(236, 199, 119, 0.65);
}
.ix-portfolio-arrow:active { transform: translateY(-50%) scale(0.94); }
.ix-portfolio-arrow--prev { left: clamp(16px, 4vw, 56px); }
.ix-portfolio-arrow--next { right: clamp(16px, 4vw, 56px); }
@media (max-width: 720px) {
  .ix-portfolio-arrow { width: 40px; height: 40px; }
}
.ix-portfolio-group h4 {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.56em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 20px;
}
.ix-portfolio-group ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ix-portfolio-group li {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  padding-left: 18px;
  position: relative;
}
.ix-portfolio-group li::before {
  content: "";
  position: absolute; left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--color-champagne);
  opacity: 0.6;
}
.ix-portfolio-footer {
  text-align: center;
  display: flex; flex-direction: column; gap: 32px; align-items: center;
}
.ix-portfolio-statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px);
  color: #fff;
  letter-spacing: -0.01em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.ix-portfolio-statement-line {
  color: #fff;
  line-height: 1;
  display: block;
}
.ix-portfolio-statement-highlight {
  font-style: normal;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: 0.04em;
  line-height: 1;
  display: block;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------------
   Pricing / Changing
------------------------------------------------------------------ */
/* Section background — deep midnight. */
.ix-pricing-stage {
  background: #06091c;
  position: relative;
}

/* ── LIGHT-MODE VARIANT ─────────────────────────────────────────
   Scoped to .ix-pricing-stage--light. Section sits between two
   dark sections; the top is pure white, the bottom fades into
   navy so the section transitions seamlessly into the dark
   walkaway section that follows (no hard seam). */
.ix-pricing-stage--light {
  /* Pure white throughout — no shared transition with the section
     above. The cinematic image carries its own bottom-fade into
     navy for the handoff to the next dark section. */
  background: #FFFFFF;
  color: #0A0E1F;
  /* Kill horizontal + bottom padding so the image goes full-bleed
     (edge-to-edge of viewport) and its dark fade flushes directly
     into the next dark section with zero white gap. */
  padding: 140px 0 0 !important;
}
/* Re-add horizontal padding ONLY to .ix-inner so the title + body
   stay properly indented, while the image below escapes free. */
.ix-pricing-stage--light .ix-inner {
  padding: 0 clamp(24px, 4vw, 64px);
}
/* Tighten the gap below the body copy so the image moves up and
   the monitors become visible sooner in the viewport. Widened
   max-width + balance text-wrap so the long "industry icons" list
   lays out cleanly on 2 lines instead of 3-4. */
.ix-pricing-stage--light .ix-section-body {
  margin-bottom: clamp(24px, 3vh, 40px);
  max-width: 1100px;
  text-wrap: balance;
}
/* Headline + body — dark ink overrides win on specificity over the
   global `.ix-section-body { color: var(--fg-2) }` rule which would
   otherwise render body copy as light-on-light here. */
.ix-pricing-stage--light .ix-section-eyebrow {
  color: rgba(10, 14, 31, 0.6);
}
.ix-pricing-stage--light .ix-section-title,
.ix-pricing-stage--light .ix-section-title .ix-pricing-title-line {
  color: #0A0E1F;
}
.ix-pricing-stage--light .ix-section-body,
.ix-pricing-stage--light .ix-section-body p {
  color: rgba(10, 14, 31, 0.78);
}
.ix-pricing-stage--light .ix-section-body b {
  color: #0A0E1F;
  font-weight: 600;
}
/* Two-line headline — explicit stacked lines so "Half The Time.
   Half The Cost." always sits on its own line in the authority
   gradient instead of wrapping based on viewport width. */
.ix-pricing-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Sized smaller than the default .ix-section-title so the longer
     "Now Half The Time. Half The Cost." line fits on a single row. */
  font-size: clamp(32px, 3.8vw, 60px) !important;
}
.ix-pricing-title-line {
  display: block;
  /* Force each line onto a single visual row — "Now Half The Time.
     Half The Cost." was wrapping at the default font size. */
  white-space: nowrap;
}
/* Below 768 the long second line ("Now Half The Time. Half The Cost.")
   overflows the viewport even at the clamp's 32px min — allow wrap and
   pull the font ramp down. */
@media (max-width: 768px) {
  .ix-pricing-title {
    font-size: clamp(24px, 5.4vw, 40px) !important;
  }
  .ix-pricing-title-line { white-space: normal; text-wrap: balance; }
  .ix-pricing-sub { font-size: clamp(15px, 3.6vw, 20px); }
}
@media (max-width: 480px) {
  .ix-pricing-title { font-size: clamp(22px, 6.2vw, 30px) !important; }
  .ix-pricing-sub { font-size: 14px; }
}
/* Sub-heading between the title and the body — two stacked lines
   "Today, thanks to technological innovation, / our world-class team
   is more accessible than ever." */
.ix-pricing-sub {
  margin: clamp(20px, 2.4vh, 32px) 0 clamp(20px, 2.4vh, 32px);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  color: #0A0E1F;
  text-align: center;
}
.ix-pricing-sub span { display: block; }
/* Title bold (the "Half The Time. Half The Cost." line) — uses a
   DARKER gold→copper→mauve gradient than the default authority
   gradient so it stays readable on pure white. The default gradient
   starts on ivory (#F2E8D8), which is essentially invisible here. */
.ix-pricing-stage--light .ix-section-title b {
  background: linear-gradient(90deg,
    #A57E2F 0%,
    #C98A73 40%,
    #A75F8E 75%,
    #6E4F8E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: grad-sweep 12s linear infinite;
}
/* Hairline darkened for light bg legibility. */
.ix-pricing-stage--light .ix-hairline {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(180, 134, 58, 0.7) 50%,
    transparent 100%);
}
/* CTA — absolutely positioned on the image's dark bottom fade,
   centered near the guy (around 18-22% from image bottom, which
   lines up with the chair-back / lower-torso area of the photo).
   Label stays light because it sits on the dark fade region. */
.ix-pricing-stage--light .ix-pricing-cta {
  position: absolute;
  left: 50%;
  /* Pushed lower — sits near the image's bottom edge on the
     darkest part of the fade. */
  bottom: clamp(20px, 5vh, 60px);
  transform: translateX(-50%) translateY(20px);
  z-index: 3;
  margin: 0;
  text-align: center;
  opacity: 0;
  transition:
    opacity 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-stage--light .ix-pricing-reveal-group.is-revealed .ix-pricing-cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 1.15s;
}
.ix-pricing-stage--light .ix-pricing-cta .ix-cta-label {
  color: #FEF7DF;
}

/* ── Full-bleed image centerpiece — aishiftbg.jpg ──────────────
   Scoped under .ix-pricing-stage--light so the original dark
   variant (grid + clamp-sized illustration) stays untouched.
   The reveal-group sits OUTSIDE .ix-inner in markup so it can
   span the full viewport width without breakout hacks. */
.ix-pricing-stage--light .ix-pricing-fusion-b {
  display: block;
  width: 100%;
  max-width: none;
  /* Negative top margin pulls the image up ~200px, tightening the
     gap between the body copy and the photo so the monitors come
     into view sooner. */
  margin: -200px 0 0;
  padding: 0;
}
.ix-pricing-stage--light .ix-pricing-fusion-mark {
  position: relative;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  /* Full viewport height — the image is now a full-screen scene.
     min-height keeps it tall enough on very short screens that the
     overlays + CTA stay clearly separated. */
  height: 100vh;
  min-height: 560px;
  /* No border-radius — full-bleed reads as a panoramic frame,
     not a contained card. */
  border-radius: 0;
  overflow: hidden;
}
.ix-pricing-stage--light .ix-pricing-fusion-mark img {
  width: 100%;
  height: 100%;
  /* object-fit: cover keeps the guy + desk centered horizontally
     and biases vertical crop slightly upward so the lower fade
     never cuts off his head on shorter viewports. */
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* Cinematic zoom — image enters slightly zoomed in (1.08), settles
     to natural scale when .is-revealed lands. Combined with the
     fusion-mark's own opacity transition, reads as a slow camera
     pull-back. */
  transform: scale(1.08);
  transform-origin: center 35%;
  transition: transform 2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-mark img {
  transform: scale(1);
}
/* Overlay text — no card background. Positioned on the upper-left
   and upper-right of the photo where the image fades to near-white
   so dark ink reads cleanly. Each side glides in from its
   respective edge (translateX) when .is-revealed lands, staggered
   ~250ms after the image zoom settles. */
.ix-pricing-stage--light .ix-pricing-fusion-side {
  position: absolute;
  /* Sits just above the monitor screens — close enough to feel
     anchored to them, but with ~20px of breathing room above the
     screen tops so the text isn't crowding the device frames. */
  top: clamp(200px, 28%, 420px);
  max-width: clamp(240px, 22%, 340px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  z-index: 2;
  /* Cinematic glide-in from each side. Default state shown until
     IntersectionObserver flips .is-revealed on the group. */
  opacity: 0;
  transition:
    opacity 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Overlays sit DIRECTLY above their respective monitors — left
   above the Daymond John screen, right above the Biohacking
   screen. Pushed further inward (~20%) so they line up over the
   monitor positions instead of floating in the white margins. */
.ix-pricing-stage--light .ix-pricing-fusion-side--ai {
  left: clamp(80px, 20%, 320px);
  text-align: left;
  align-items: flex-start;
  transform: translateX(-32px);
}
.ix-pricing-stage--light .ix-pricing-fusion-side--craft {
  right: clamp(80px, 20%, 320px);
  text-align: right;
  align-items: flex-end;
  transform: translateX(32px);
}
.ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-side {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger — left settles in first, right shortly after, both
   beginning ~600ms after the image zoom kicks off so the reveal
   reads as a sequence: photo settles → copy lands → CTA blooms. */
.ix-pricing-stage--light .ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-side--ai {
  transition-delay: 0.6s;
}
.ix-pricing-stage--light .ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-side--craft {
  transition-delay: 0.85s;
}
.ix-pricing-stage--light .ix-pricing-card-eyebrow {
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(10, 14, 31, 0.55);
}
.ix-pricing-stage--light .ix-pricing-card-body {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: rgba(10, 14, 31, 0.82);
  margin: 0;
  max-width: none;
}
.ix-pricing-stage--light .ix-pricing-card-body b {
  color: #0A0E1F;
  font-weight: 700;
}
/* Bottom-of-image fade — dies the photo into PURE BLACK to match
   the next .ix-walkaway-stage section's #000 background exactly
   (was previously fading to #06091c navy, which created a subtle
   color seam at the section boundary). Also provides a dark
   canvas for the CTA to sit on near the guy. */
.ix-pricing-stage--light .ix-pricing-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  /* Shorter fade — sits in the lower 40% of the image instead of
     the lower 60%, so the photo stays more visible up top. */
  height: 40%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 30%,
    rgba(0, 0, 0, 0.75) 65%,
    rgba(0, 0, 0, 0.95) 88%,
    #000000 100%);
  pointer-events: none;
  z-index: 1;
}

/* Captions wrapper — on desktop, the captions inside are absolutely
   positioned overlays on the image; the wrapper itself collapses to
   zero height (overflow visible) so it doesn't push the image down.
   Below 1300 the @media block below makes it a real flex container
   that sits above the image. */
.ix-pricing-stage--light .ix-pricing-fusion-captions {
  display: block;
  height: 0;
  overflow: visible;
}

/* Below 1300, take the captions out of the image overlay and flow
   them ABOVE the image as a 2-column row anchored to a max-width
   container. The image stays full-bleed and is pulled up tight to
   the captions/section copy. */
@media (max-width: 1300px) {
  .ix-pricing-stage--light .ix-pricing-fusion-mark {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
    padding: 0;
  }
  .ix-pricing-stage--light .ix-pricing-fusion-captions {
    display: flex;
    height: auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    gap: clamp(20px, 3vw, 48px);
    align-items: flex-start;
    justify-content: center;
  }
  /* Image sits tight under the captions; negative margin closes the
     visual gap so the image moves up while captions stay anchored to
     the body copy above. */
  .ix-pricing-stage--light .ix-pricing-fusion-mark img { margin-top: -150px; }
  /* Force the captions out of their desktop absolute positioning. */
  .ix-pricing-stage--light .ix-pricing-fusion-side {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 1 1 0;
    max-width: 480px;
    transform: none !important;
    opacity: 1 !important;
  }
  .ix-pricing-stage--light .ix-pricing-fusion-mark img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1202;
    object-fit: cover;
    transform: scale(1) !important;
  }
  .ix-pricing-stage--light .ix-pricing-fade-bottom {
    display: block;
    bottom: 0;
    height: 40%;
  }
  .ix-pricing-stage--light .ix-pricing-cta {
    position: absolute;
    bottom: clamp(20px, 4vh, 60px);
  }
  /* Keep the block anchored to the body copy above — captions sit
     with the natural margin gap below the body text. The image's
     own negative margin (above) handles moving the image up. */
  .ix-pricing-stage--light .ix-pricing-fusion-b { margin-top: 0; }
}

/* Narrow screens: collapse the captions row to a single column. */
@media (max-width: 760px) {
  .ix-pricing-stage--light .ix-pricing-fusion-captions {
    flex-direction: column;
    gap: 16px;
  }
  .ix-pricing-stage--light .ix-pricing-fusion-side {
    max-width: none;
    align-items: center !important;
    text-align: center !important;
  }
  /* Captions stack vertically here — gentler pull so it closes the
     gap without overlapping the stacked captions. */
  .ix-pricing-stage--light .ix-pricing-fusion-mark img { margin-top: -50px; }
}

/* Push the CTA 30px further down toward the image bottom on mobile. */
@media (max-width: 800px) {
  .ix-pricing-stage--light .ix-pricing-cta {
    bottom: calc(clamp(20px, 4vh, 60px) - 30px);
  }
  /* Tighten the section's preceding body copy ("Industry icons like…")
     so it reads at mobile body sizing instead of inheriting 18px. */
  .ix-pricing-stage--light .ix-section-body,
  .ix-pricing-stage--light .ix-section-body p { font-size: 15px; }
}
@media (max-width: 480px) {
  .ix-pricing-stage--light .ix-section-body,
  .ix-pricing-stage--light .ix-section-body p { font-size: 14px; }
}
/* Smooth scroll for anchor / programmatic scrolls site-wide. */
html { scroll-behavior: smooth; }

/* Override the default left-biased hairline inside this section so
   it reads as a symmetric gold rule under the headline. */
.ix-pricing-stage .ix-hairline {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(180, 134, 58, 0.55) 50%,
    transparent 100%);
  opacity: 1;
  max-width: 200px;
  margin: 0 auto 32px;
}

/* Lead price line — bigger, bolder, white with the headline phrase
   in the gold authority gradient. */
.ix-pricing-stage .ix-pricing-lead {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin-top: 20px;
}
.ix-pricing-stage .ix-pricing-lead em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Option B: single fused mark — half digital, half hand-crafted —
   with the two contrasting copy lines flanking it. */
.ix-pricing-fusion-b {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Tight gap between text and graphic. */
  gap: clamp(8px, 1.4vw, 24px);
  align-items: center;
  max-width: 1240px;
  /* Pulls the graphic up close to the lead paragraph. */
  margin: 0 auto clamp(20px, 2.5vh, 36px);
}
.ix-pricing-fusion-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
}
/* Override the body's own narrow cap so it can fill the side's width. */
.ix-pricing-fusion-side .ix-pricing-card-body {
  max-width: none;
  line-height: 1.45;
}
.ix-pricing-fusion-side--ai {
  text-align: right;
  justify-self: end;
  align-items: flex-end;
}
.ix-pricing-fusion-side--craft {
  text-align: left;
  justify-self: start;
  align-items: flex-start;
}
.ix-pricing-fusion-mark {
  width: clamp(280px, 36vw, 540px);
}
.ix-pricing-fusion-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cinematic reveal — fusion + CTA fade in slowly with a stagger
   once the group enters view, just after the lead paragraph reads. */
.ix-pricing-reveal-group .ix-pricing-fusion-side,
.ix-pricing-reveal-group .ix-pricing-fusion-mark,
.ix-pricing-reveal-group .ix-pricing-cta {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-side--ai {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-mark {
  opacity: 1;
  transform: none;
  transition-delay: 0.55s;
}
.ix-pricing-reveal-group.is-revealed .ix-pricing-fusion-side--craft {
  opacity: 1;
  transform: none;
  transition-delay: 0.95s;
}
.ix-pricing-reveal-group.is-revealed .ix-pricing-cta {
  opacity: 1;
  transform: none;
  transition-delay: 1.5s;
}
.ix-pricing-cta { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ix-pricing-reveal-group .ix-pricing-fusion-side,
  .ix-pricing-reveal-group .ix-pricing-fusion-mark,
  .ix-pricing-reveal-group .ix-pricing-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Fusion mark — reveal sequence + idle animations === */

/* Outer hex frame draws around the perimeter. */
.ix-pricing-fusion-mark .fuse-frame {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  transition: stroke-dashoffset 1.4s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-fusion-mark.is-revealed .fuse-frame { stroke-dashoffset: 0; }

.ix-pricing-fusion-mark .fuse-seam {
  opacity: 0;
  transition: opacity 0.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1.0s;
}
.ix-pricing-fusion-mark.is-revealed .fuse-seam { opacity: 0.4; }

/* === AI side === */
.ix-pricing-fusion-mark .ai-grid,
.ix-pricing-fusion-mark .ai-chip,
.ix-pricing-fusion-mark .ai-chip-grid,
.ix-pricing-fusion-mark .ai-chip-pins,
.ix-pricing-fusion-mark .ai-traces,
.ix-pricing-fusion-mark .ai-nodes {
  opacity: 0;
  transition: opacity 0.45s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-fusion-mark.is-revealed .ai-chip      { opacity: 1; transition-delay: 0.4s; }
.ix-pricing-fusion-mark.is-revealed .ai-chip-grid { opacity: 1; transition-delay: 0.6s; }
.ix-pricing-fusion-mark.is-revealed .ai-chip-pins { opacity: 1; transition-delay: 0.7s; }
.ix-pricing-fusion-mark.is-revealed .ai-grid      { opacity: 1; transition-delay: 0.5s; }
.ix-pricing-fusion-mark.is-revealed .ai-traces    { opacity: 1; transition-delay: 0.8s; }
.ix-pricing-fusion-mark.is-revealed .ai-nodes     { opacity: 1; transition-delay: 1.4s; }

/* Circuit traces draw in. */
.ix-pricing-fusion-mark .ai-trace {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.9s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 0.85s;
}
.ix-pricing-fusion-mark.is-revealed .ai-trace { stroke-dashoffset: 0; }

/* Idle: terminal nodes pulse in offset rhythm — data flow effect. */
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(1) { animation: ix-fuse-ai-pulse 2.4s 1.7s ease-in-out infinite; }
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(2) { animation: ix-fuse-ai-pulse 2.4s 1.9s ease-in-out infinite; }
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(3) { animation: ix-fuse-ai-pulse 2.4s 2.1s ease-in-out infinite; }
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(4) { animation: ix-fuse-ai-pulse 2.4s 2.3s ease-in-out infinite; }
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(5) { animation: ix-fuse-ai-pulse 2.4s 2.5s ease-in-out infinite; }
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(6) { animation: ix-fuse-ai-pulse 2.4s 2.7s ease-in-out infinite; }
.ix-pricing-fusion-mark.is-revealed .ai-node:nth-child(7) { animation: ix-fuse-ai-pulse 2.4s 2.9s ease-in-out infinite; }
@keyframes ix-fuse-ai-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.35;}
}

/* === Craft side === */

/* Vine stem draws in. */
.ix-pricing-fusion-mark .craft-stem {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.0s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 0.4s;
}
.ix-pricing-fusion-mark.is-revealed .craft-stem { stroke-dashoffset: 0; }

/* Leaves fade in sequentially. */
.ix-pricing-fusion-mark .craft-leaf {
  opacity: 0;
  transition: opacity 0.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-fusion-mark.is-revealed .craft-leaf--1 { opacity: 1; transition-delay: 0.70s; }
.ix-pricing-fusion-mark.is-revealed .craft-leaf--2 { opacity: 1; transition-delay: 0.85s; }
.ix-pricing-fusion-mark.is-revealed .craft-leaf--3 { opacity: 1; transition-delay: 1.00s; }
.ix-pricing-fusion-mark.is-revealed .craft-leaf--4 { opacity: 1; transition-delay: 1.15s; }
.ix-pricing-fusion-mark.is-revealed .craft-leaf--5 { opacity: 1; transition-delay: 1.30s; }

/* Hand silhouette fades in. */
.ix-pricing-fusion-mark .craft-hand,
.ix-pricing-fusion-mark .craft-pen,
.ix-pricing-fusion-mark .craft-wisps {
  opacity: 0;
  transition: opacity 0.5s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-pricing-fusion-mark.is-revealed .craft-hand  { opacity: 1; transition-delay: 0.9s; }
.ix-pricing-fusion-mark.is-revealed .craft-pen   { opacity: 1; transition-delay: 1.2s; }
.ix-pricing-fusion-mark.is-revealed .craft-wisps { opacity: 0.6; transition-delay: 1.4s; }

/* Center: Influex X-mark + breathing halo. */
.ix-pricing-fusion-mark .fuse-x-mark {
  opacity: 0;
  transition: opacity 0.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1.6s;
}
.ix-pricing-fusion-mark.is-revealed .fuse-x-mark { opacity: 1; }

.ix-pricing-fusion-mark .fuse-x-halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1.6s;
}
.ix-pricing-fusion-mark.is-revealed .fuse-x-halo {
  opacity: 1;
  animation: ix-fuse-halo-breathe 4s 1.9s ease-in-out infinite;
}
@keyframes ix-fuse-halo-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-pricing-fusion-mark .fuse-frame,
  .ix-pricing-fusion-mark .craft-stem,
  .ix-pricing-fusion-mark .ai-trace {
    stroke-dashoffset: 0;
    transition: none;
  }
  .ix-pricing-fusion-mark .ai-grid,
  .ix-pricing-fusion-mark .ai-chip,
  .ix-pricing-fusion-mark .ai-chip-grid,
  .ix-pricing-fusion-mark .ai-chip-pins,
  .ix-pricing-fusion-mark .ai-traces,
  .ix-pricing-fusion-mark .ai-nodes,
  .ix-pricing-fusion-mark .ai-node,
  .ix-pricing-fusion-mark .craft-leaf,
  .ix-pricing-fusion-mark .craft-hand,
  .ix-pricing-fusion-mark .craft-pen,
  .ix-pricing-fusion-mark .craft-wisps,
  .ix-pricing-fusion-mark .fuse-x-mark,
  .ix-pricing-fusion-mark .fuse-x-halo,
  .ix-pricing-fusion-mark .fuse-seam {
    opacity: 1;
    transition: none;
    animation: none;
  }
  .ix-pricing-fusion-mark .craft-wisps { opacity: 0.6; }
  .ix-pricing-fusion-mark .fuse-seam { opacity: 0.4; }
}
@media (max-width: 720px) {
  .ix-pricing-fusion-b {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ix-pricing-fusion-side--ai,
  .ix-pricing-fusion-side--craft {
    text-align: center;
    justify-self: center;
    align-items: center;
  }
}

/* Fusion equation (Option A) — kept here in case the user toggles
   back. Currently unused in markup. */
.ix-pricing-fusion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 56px);
  align-items: stretch;
  max-width: 980px;
  margin: clamp(48px, 6vh, 88px) auto;
}
.ix-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 38px);
  border: 1px solid rgba(236, 199, 119, 0.22);
  border-radius: 18px;
  background: rgba(20, 16, 10, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.ix-pricing-card-icon {
  width: 64px;
  height: 64px;
  color: #ecc777;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(236, 199, 119, 0.25));
}
.ix-pricing-card-icon svg { width: 100%; height: 100%; display: block; }
.ix-pricing-card-eyebrow {
  font-family: var(--font-micro, var(--font-display));
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ecc777;
}
.ix-pricing-card-body {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 320px;
}
.ix-pricing-fusion-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
@media (max-width: 720px) {
  .ix-pricing-fusion {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.ix-pricing-paths {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px; margin: 0 auto 64px;
  border: 1px solid rgba(236,199,119,0.24);
}
.ix-path {
  padding: 56px 48px;
  text-align: center;
  position: relative;
}
.ix-path + .ix-path {
  border-left: 1px solid rgba(236,199,119,0.24);
}
.ix-path-label {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ix-path-amount {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin-bottom: 14px;
}
.ix-path-amount b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-path-timing {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--fg-2);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Deliverables — numbered rail
------------------------------------------------------------------ */
.ix-deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  max-width: 1300px; margin: 0 auto 48px;
  border-top: 1px solid rgba(236,199,119,0.22);
  border-left: 1px solid rgba(236,199,119,0.22);
}
.ix-deliverable {
  padding: 40px 28px 48px;
  border-right: 1px solid rgba(236,199,119,0.22);
  border-bottom: 1px solid rgba(236,199,119,0.22);
  background: var(--bg-0);
  transition: background 500ms var(--ease-quint);
}
.ix-deliverable:hover { background: rgba(236,199,119,0.03); }
.ix-deliverable-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-champagne);
  margin-bottom: 24px;
}
.ix-deliverable-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ix-deliverable-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}
.ix-deliverables-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-3);
  font-style: italic;
  max-width: 720px; margin: 0 auto;
}

/* ------------------------------------------------------------------
   Comparison — Old vs New, parallel columns
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Comparison — two cards side by side.
   Left = Sequential Waterfall: phases cascade left→right (each
   bar offset further to the right, animating in staggered).
   Right = Parallel & Stacked: phases stack tight on top of each
   other and animate in together.
------------------------------------------------------------------ */
/* ── LIGHT VARIANT for the comparison section ──────────────────
   Section bg is the result of TWO chained interpolations:
     1. Inner: dark → white driven by --bg-prog (twoways → comparison
        fade-in). When user is below comparison, this is dark
        (matching twoways). When comparison is in view, this is white.
     2. Outer: inner-result → dark driven by --bg-prog-2 (comparison
        → process fade-out). When user is in comparison, this is the
        inner result. When process is taking over, this collapses
        back to dark.
   Net effect: comparison goes dark → white → dark across the
   user's scroll through it, with both adjacent sections matching
   color at every transition boundary. */
.ix-comparison-light {
  background-color: color-mix(in srgb,
    color-mix(in srgb,
      #03050f calc((1 - var(--bg-prog, 0)) * 100%),
      #FFFFFF calc(var(--bg-prog, 0) * 100%)
    ) calc((1 - var(--bg-prog-2, 0)) * 100%),
    #03050f calc(var(--bg-prog-2, 0) * 100%)
  ) !important;
  position: relative;
  overflow: hidden;
  transition: background-color 60ms linear;
}
.ix-comparison-light > .ix-inner {
  position: relative;
  z-index: 1;
  /* Delayed content fade: invisible until bg-prog > 0.55,
     fully visible by bg-prog ≈ 0.95. */
  opacity: max(0, min(1, calc((var(--bg-prog, 0) - 0.55) * 2.5)));
  transition: opacity 60ms linear;
}
/* Section title + eyebrow → dark ink on white */
.ix-comparison-light .ix-section-eyebrow {
  color: rgba(10, 14, 31, 0.55);
}
.ix-comparison-light .ix-section-title {
  color: #0A0E1F;
}
.ix-comparison-light .ix-section-title b {
  /* Darker authority gradient so "The New Way." stays readable
     on pure white (the default gradient starts on ivory which
     is invisible against white). */
  background: linear-gradient(90deg,
    #A57E2F 0%,
    #C98A73 40%,
    #A75F8E 75%,
    #6E4F8E 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-comparison-light .ix-hairline {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(180, 134, 58, 0.7) 50%,
    transparent 100%);
}
/* Cards on light — Old card slightly tinted cream so it reads
   as "the muted, dated past"; New card stays bright white with
   a stronger gold border + soft halo. */
.ix-comparison-light .ix-compare-card--old {
  background: #F4EFE2;
  border-color: rgba(10, 14, 31, 0.10);
  box-shadow:
    0 20px 50px -28px rgba(10, 14, 31, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ix-comparison-light .ix-compare-card--new {
  background: linear-gradient(135deg, #FCF8EC 0%, #FFFFFF 100%);
  border-color: rgba(180, 134, 58, 0.55);
  box-shadow:
    0 30px 60px -24px rgba(10, 14, 31, 0.25),
    0 0 32px rgba(236, 199, 119, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* Required for the rotating-light ::before to position correctly. */
  position: relative;
}
/* Rotating "light" — a small bright spot in a conic gradient that
   travels around the new way card's border every 9s. Built with
   @property + a masked conic gradient so it lives ONLY in the
   1.5px border area (not over the card's interior). Subtle —
   the bright portion is small and faded, just enough to draw the
   eye to the new way card without being flashy. */
@property --ix-compare-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ix-comparison-light .ix-compare-card--new::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ix-compare-glow-angle, 0deg),
    transparent 0deg,
    transparent 280deg,
    rgba(236, 199, 119, 0.55) 320deg,
    rgba(255, 244, 220, 0.9) 345deg,
    rgba(236, 199, 119, 0.55) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: ix-compare-glow-rotate 9s linear infinite;
}
@keyframes ix-compare-glow-rotate {
  to { --ix-compare-glow-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-comparison-light .ix-compare-card--new::before { animation: none; }
}

/* "vs." separator in the comparison title — was an inline color
   tied to --fg-3 (a light muted color used on dark themes),
   which became unreadable on the white comparison bg. Now scoped
   to a dark muted ink that reads cleanly on white. */
.ix-comparison-light .ix-compare-title-vs {
  color: rgba(10, 14, 31, 0.35);
  font-weight: 300;
}
.ix-comparison-light .ix-compare-card-eyebrow {
  color: rgba(10, 14, 31, 0.45);
}
.ix-comparison-light .ix-compare-card--new .ix-compare-card-eyebrow {
  color: #B88A3D;
}
.ix-comparison-light .ix-compare-card-title {
  color: #0A0E1F;
}
.ix-comparison-light .ix-compare-card--new .ix-compare-card-title {
  /* New-card title keeps a gradient, darker stops for white card. */
  background-image: linear-gradient(135deg,
    #A57E2F 0%,
    #C98A73 50%,
    #6E4F8E 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Old-way bars → light grey on cream card, dark text */
.ix-comparison-light .ix-compare-bar--old {
  background: linear-gradient(135deg, #DAD5C6 0%, #C9C3B2 100%);
  color: rgba(10, 14, 31, 0.70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* New-way bars keep the gold gradient (looks great on white too). */
/* Card body + stat → dark ink */
.ix-comparison-light .ix-compare-card-body {
  color: rgba(10, 14, 31, 0.70);
}
.ix-comparison-light .ix-compare-card-rule {
  background: linear-gradient(90deg, transparent, rgba(10, 14, 31, 0.15), transparent);
}
.ix-comparison-light .ix-compare-card-rule--gold {
  background: linear-gradient(90deg, transparent, rgba(180, 134, 58, 0.55), transparent);
}
.ix-comparison-light .ix-compare-card-stat {
  color: rgba(10, 14, 31, 0.72);
}
.ix-comparison-light .ix-compare-card-stat--gold {
  background-image: linear-gradient(135deg,
    #A57E2F 0%,
    #C98A73 40%,
    #A75F8E 75%,
    #6E4F8E 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.ix-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 40px);
  max-width: 1200px;
  margin: 24px auto 0;
}
.ix-compare-card {
  position: relative;
  padding: clamp(28px, 3vw, 48px);
  border-radius: 22px;
  background: rgba(14, 16, 26, 0.62);
  border: 1px solid rgba(236, 199, 119, 0.16);
  box-shadow:
    0 30px 60px -28px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(236, 199, 119, 0.06);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.ix-compare-card--old { opacity: 0.85; }
.ix-compare-card--new {
  border-color: rgba(236, 199, 119, 0.42);
  background: rgba(20, 18, 12, 0.72);
  box-shadow:
    0 30px 60px -24px rgba(0, 0, 0, 0.8),
    0 0 32px rgba(236, 199, 119, 0.10),
    inset 0 1px 0 rgba(236, 199, 119, 0.18);
}

.ix-compare-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ix-compare-card-eyebrow {
  font-family: var(--font-micro, "Inter", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.45);
}
.ix-compare-card--new .ix-compare-card-eyebrow { color: #ECC777; }
.ix-compare-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-1, #FEF7DF);
}
.ix-compare-card--new .ix-compare-card-title {
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Bars container — fixed height matches 3 stacked bars + gaps so
   both cards have the same vertical footprint regardless of cascade. */
.ix-compare-card-bars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: calc((var(--bar-h, 54px) * 3) + 20px);
}
.ix-compare-bar {
  --bar-h: 54px;
  position: relative;
  height: var(--bar-h);
  width: 60%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--font-micro, "Inter", sans-serif);
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* Start fully clipped from the right — bar draws across by
     animating right-inset 100% → 0. Text stays at natural size. */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, filter;
}

/* Old way — slow waterfall. Each bar takes 1.4s to draw, then a
   forced 0.8s pause before the next begins. Total: ~6.2s of
   visible "this is taking forever" pacing. Soft white flash on
   landing. */
.ix-compare-bar--old {
  background: linear-gradient(135deg, #2a2f3a 0%, #1a1d24 100%);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ix-compare-bar--old[data-step="0"] { margin-left: 0;   }
.ix-compare-bar--old[data-step="1"] { margin-left: 20%; }
.ix-compare-bar--old[data-step="2"] { margin-left: 40%; }
@keyframes ix-compare-bar-old-draw {
  0%   { clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 0 transparent); }
  88%  { clip-path: inset(0 0    0 0); filter: drop-shadow(0 0 0 transparent); }
  94%  { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.22)); }
  100% { clip-path: inset(0 0    0 0); filter: drop-shadow(0 0 0 transparent); }
}
#comparison.is-in .ix-compare-bar--old[data-step="0"] {
  animation: ix-compare-bar-old-draw 0.9s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 0.4s forwards;
}
#comparison.is-in .ix-compare-bar--old[data-step="1"] {
  animation: ix-compare-bar-old-draw 0.9s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1.8s forwards;
}
#comparison.is-in .ix-compare-bar--old[data-step="2"] {
  animation: ix-compare-bar-old-draw 0.9s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 3.2s forwards;
}

/* New way — dramatic stack. Starts AFTER the old way fully resolves
   (~7.0s in). Each bar SLAMS down from above with a slight bounce
   and a bright gold shock-flash on landing. Staggered tight so it
   reads as a rapid-fire stack of three impacts. */
.ix-compare-bar--new {
  background: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 50%, #C98A73 100%);
  color: #1a1308;
  box-shadow:
    0 10px 28px -10px rgba(217, 185, 125, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  margin-left: 0;
  width: 100%;
  transform: translateY(-40px);
  opacity: 0;
}
@keyframes ix-compare-bar-new-slam {
  /* Drop in from above + draw across, land with a bounce and flash */
  0%   {
    transform: translateY(-40px);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }
  55%  {
    transform: translateY(3px);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  70%  {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 30px rgba(236, 199, 119, 0.85));
  }
  85%  {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
}
#comparison.is-in .ix-compare-bar--new[data-step="0"] {
  animation: ix-compare-bar-new-slam 0.7s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 5.0s forwards;
}
#comparison.is-in .ix-compare-bar--new[data-step="1"] {
  animation: ix-compare-bar-new-slam 0.7s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 5.3s forwards;
}
#comparison.is-in .ix-compare-bar--new[data-step="2"] {
  animation: ix-compare-bar-new-slam 0.7s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 5.6s forwards;
}

/* Playhead — a thin gold scrubber sweeping left→right across the
   bars container. The pacing difference between the two cards
   (slow crawl vs. quick snap) IS the visual argument. */
.ix-compare-playhead {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 1.5px;
  background: linear-gradient(to bottom,
    rgba(236, 199, 119, 0) 0%,
    rgba(236, 199, 119, 0.9) 50%,
    rgba(236, 199, 119, 0) 100%);
  box-shadow: 0 0 10px rgba(236, 199, 119, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
#comparison.is-in .ix-compare-card--old .ix-compare-playhead {
  animation: ix-compare-playhead-old 3.7s linear 0.4s forwards;
}
#comparison.is-in .ix-compare-card--new .ix-compare-playhead {
  /* Starts only after the old way has fully resolved. */
  animation: ix-compare-playhead-new 1.3s linear 5.0s forwards;
}
@keyframes ix-compare-playhead-old {
  0%   { left: 0%;   opacity: 0; }
  4%   { opacity: 0.85; }
  96%  { opacity: 0.85; }
  100% { left: 100%; opacity: 0; }
}
@keyframes ix-compare-playhead-new {
  0%   { left: 0%;   opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { left: 100%; opacity: 0; }
}

.ix-compare-card-body {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

.ix-compare-card-rule {
  border: 0;
  height: 1px;
  margin: 8px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}
.ix-compare-card-rule--gold {
  background: linear-gradient(90deg, transparent, rgba(236, 199, 119, 0.50), transparent);
}

.ix-compare-card-stat {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* Font sized to keep the longer new copy
     ("3–6 months. Premium Pricing." / "2–4 months. Variable Pricing.")
     on a single line at the desktop two-column card width. */
  font-size: clamp(18px, 2.0vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.ix-compare-card-stat--gold {
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Body / rule / stat — each card reveals its own evidence in
   sync with its bars finishing. New side lands at ~1.4s (the
   punchline arrives while old side is still drawing). Old side
   lands at ~6.4s (the painful "this is how long it took"). */
.ix-compare-card-body,
.ix-compare-card-rule,
.ix-compare-card-stat {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
#comparison.is-in .ix-compare-card--old .ix-compare-card-body { opacity: 1; transform: translateY(0); transition-delay: 4.3s; }
#comparison.is-in .ix-compare-card--old .ix-compare-card-rule { opacity: 1; transform: translateY(0); transition-delay: 4.5s; }
#comparison.is-in .ix-compare-card--old .ix-compare-card-stat { opacity: 1; transform: translateY(0); transition-delay: 4.7s; }
#comparison.is-in .ix-compare-card--new .ix-compare-card-body { opacity: 1; transform: translateY(0); transition-delay: 6.5s; }
#comparison.is-in .ix-compare-card--new .ix-compare-card-rule { opacity: 1; transform: translateY(0); transition-delay: 6.7s; }
#comparison.is-in .ix-compare-card--new .ix-compare-card-stat { opacity: 1; transform: translateY(0); transition-delay: 6.9s; }

@media (prefers-reduced-motion: reduce) {
  .ix-compare-bar {
    clip-path: none !important;
    animation: none !important;
    filter: none !important;
  }
  .ix-compare-playhead { display: none !important; }
  .ix-compare-card-body,
  .ix-compare-card-rule,
  .ix-compare-card-stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 760px) {
  .ix-compare { grid-template-columns: 1fr; }
  .ix-compare-bar--old[data-step="1"] { margin-left: 15%; }
  .ix-compare-bar--old[data-step="2"] { margin-left: 30%; }
}


/* ------------------------------------------------------------------
   Process phases — four-beat ceremonial rail
------------------------------------------------------------------ */
.ix-phase-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1100px; margin: 0 auto 80px;
  border-top: 1px solid rgba(236,199,119,0.22);
  border-bottom: 1px solid rgba(236,199,119,0.22);
}
.ix-phase-rail-item {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid rgba(236,199,119,0.22);
}
.ix-phase-rail-item:last-child { border-right: 0; }
.ix-phase-rail-num {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ix-phase-rail-label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.ix-phase {
  padding: 120px 64px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ix-phase:nth-of-type(even) {
  background:
    radial-gradient(800px 360px at 20% 0%, rgba(236,199,119,0.04), transparent 70%),
    #000;
}
.ix-phase-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.ix-phase-num {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ix-phase-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(72px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  margin: 0;
}
.ix-phase-name b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-phase-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.35;
  color: var(--fg-1);
  margin: 0 0 24px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ix-phase-timing {
  display: inline-flex; gap: 14px; align-items: center;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 10px 18px;
  border: 1px solid rgba(236,199,119,0.35);
  border-radius: 999px;
}
.ix-phase-timing .ix-arrow { color: var(--color-champagne); }
.ix-phase-timing .ix-new { color: var(--color-champagne); }
.ix-phase-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 760px;
  margin: 0 0 56px;
}

.ix-phase-grids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
}
.ix-phase-group h5 {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.ix-phase-group ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ix-phase-group li {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ix-phase-group li:last-child { border-bottom: 0; }

.ix-phase-calls {
  margin-top: 56px;
  padding: 32px 40px;
  border: 1px solid rgba(236,199,119,0.22);
  background: rgba(236,199,119,0.03);
}
.ix-phase-calls-label {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.48em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ix-phase-calls ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px;
}
.ix-phase-calls li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.5;
}

.ix-phase-addon {
  margin-top: 48px;
  padding: 32px 40px;
  border-top: 1px solid var(--rule-hairline);
  border-bottom: 1px solid var(--rule-hairline);
  text-align: center;
}
.ix-phase-addon-label {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ix-phase-addon-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--fg-1);
  max-width: 720px; margin: 0 auto;
  letter-spacing: -0.005em;
}

.ix-process-note {
  text-align: center;
  max-width: 820px; margin: 0 auto;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.75;
  font-style: italic;
}
.ix-process-note p { margin: 0 0 12px; }

/* ------------------------------------------------------------------
   AI + Human couplets
------------------------------------------------------------------ */
.ix-couplets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  max-width: 1100px; margin: 0 auto;
  border-top: 1px solid rgba(236,199,119,0.22);
  border-bottom: 1px solid rgba(236,199,119,0.22);
}
.ix-couplet {
  padding: 48px 32px;
  text-align: center;
  border-right: 1px solid rgba(236,199,119,0.18);
}
.ix-couplet:last-child { border-right: 0; }
.ix-couplet-ai {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.56em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ix-couplet-human {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ix-couplet-human b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------------
   Objection
------------------------------------------------------------------ */
.ix-objection { text-align: center; }
.ix-objection-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.01em;
  color: var(--color-champagne);
  margin-bottom: 28px;
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.ix-objection-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--fg-2);
  max-width: 760px; margin: 0 auto 40px;
  text-align: center;
  text-wrap: pretty;
}
.ix-objection-body p { margin: 0 0 16px; }

/* ──────────────────────────────────────────────────────────────────
   OBJECTION V2 — Single 100vh layout, reference-styled.
   Tight centered column: eyebrow + big serif italic headline + gold
   divider + champagne lead + tight prose paragraphs + polygon CTA.
   ────────────────────────────────────────────────────────────────── */
.ix-objection-v2 {
  position: relative;
  /* Section = 200vh of scroll room. The pin is JS-controlled
     (absolute -> fixed -> absolute-bottom) so there is no post-pin
     dead space: the moment the crossfade finishes, the pin docks at
     section bottom and the next section begins immediately. */
  height: 200vh;
  background: #040302;
  color: #f3ecdb;
  isolation: isolate;
  overflow: hidden;
}
/* Pin states (JS toggles classes on .ix-objection-v2):
   - default (not in viewport yet): absolute at section top
   - .is-pinned: fixed at viewport top:0
   - .is-pinned-end: absolute at section bottom (docked) */
.ix-objection-v2-pin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background: #040302;
}
.ix-objection-v2.is-pinned .ix-objection-v2-pin {
  position: fixed;
  top: 0;
  z-index: 1;
}
.ix-objection-v2.is-pinned-end .ix-objection-v2-pin {
  position: absolute;
  top: auto;
  bottom: 0;
}
/* Two stages share the same anchor; crossfade via opacity. Inset
   gives the stage room from the pin edges. */
.ix-objection-v2-stage {
  position: absolute;
  inset: clamp(60px, 8vh, 110px) clamp(24px, 4vw, 56px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--stage-op, 0);
  transition: opacity 700ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}
.ix-objection-v2-stage.is-active { pointer-events: auto; }
.ix-objection-v2-stage--a { --stage-op: var(--obj-a-op, 1); }
.ix-objection-v2-stage--b { --stage-op: var(--obj-b-op, 0); }

.ix-objection-v2-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Stage B split layout — text column on the left, image column on
   the right (reserved for a background image). */
.ix-objection-v2-split {
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.ix-objection-v2-split-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(20px, 2.4vh, 32px);
}
/* Stage B background — useai.jpg full-bleed across the pin, with a
   dark-to-transparent scrim on the left so the text column stays
   legible against the photo. Override the shared stage `inset` so
   the image actually reaches the pin edges; restore the spacing as
   inner padding instead. */
.ix-objection-v2-stage--b {
  inset: 0;
  padding: clamp(60px, 8vh, 110px) clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  background-image: url('images/useai.jpg');
  background-size: cover;
  /* Anchored right so more of the right side of the source image
     stays visible behind the left-aligned text column. */
  background-position: right center;
  background-repeat: no-repeat;
}
.ix-objection-v2-stage--b::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Heavy black on the left holds the text column; tapers across the
     center; clears on the right so the image breathes through. */
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.96) 0%,
      rgba(0, 0, 0, 0.92) 30%,
      rgba(0, 0, 0, 0.72) 50%,
      rgba(0, 0, 0, 0.30) 75%,
      rgba(0, 0, 0, 0.05) 100%),
    /* Subtle radial vignette anchored at the lower-left to deepen
       contrast where the text sits. */
    radial-gradient(ellipse 60% 80% at 20% 60%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.ix-objection-v2-stage--b > * { position: relative; z-index: 1; }

/* Atmospheric backdrop — warm radial at top center + faint gold
   sparkle particles to give it the luxe "lit from within" feel. */
.ix-objection-v2-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Tiny gold sparkle dots scattered for atmosphere */
    radial-gradient(2px 2px at 12% 18%, rgba(236, 199, 119, 0.45) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(236, 199, 119, 0.55) 50%, transparent 100%),
    radial-gradient(2px 2px at 22% 78%, rgba(236, 199, 119, 0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 82%, rgba(236, 199, 119, 0.50) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 8%,  rgba(236, 199, 119, 0.55) 50%, transparent 100%),
    radial-gradient(2px 2px at 8%  52%, rgba(236, 199, 119, 0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 50%, rgba(236, 199, 119, 0.40) 50%, transparent 100%),
    /* Soft gold radial wash at top */
    radial-gradient(ellipse 70% 50% at 50% 20%,
      rgba(236, 199, 119, 0.12) 0%,
      rgba(236, 199, 119, 0) 60%),
    radial-gradient(ellipse 65% 45% at 50% 92%,
      rgba(189, 166, 216, 0.08) 0%,
      rgba(189, 166, 216, 0) 60%);
}

/* Section headline — big serif italic per the reference. One line. */
.ix-objection-v2-sub {
  margin: clamp(14px, 1.8vh, 22px) 0 clamp(18px, 2.4vh, 28px);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  color: #f3ecdb;
  letter-spacing: -0.015em;
  white-space: nowrap;
  max-width: none;
}
/* Gold ornamental divider — thin rule with a faint diamond/sparkle
   accent in the middle (CSS-only). Sits below the section headline. */
.ix-objection-v2-divider {
  position: relative;
  width: clamp(180px, 24vw, 360px);
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ix-objection-v2-divider::before,
.ix-objection-v2-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(236, 199, 119, 0) 0%,
    rgba(236, 199, 119, 0.55) 50%,
    rgba(236, 199, 119, 0) 100%);
}
.ix-objection-v2-divider-mark {
  width: 8px;
  height: 8px;
  margin: 0 12px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f2e8d8 0%, #d9b97d 60%, #b4863a 100%);
  box-shadow: 0 0 8px rgba(236, 199, 119, 0.55);
}

/* Lead — "Yes, you could use AI yourself." in champagne gradient. */
.ix-objection-v2-lead {
  margin: clamp(18px, 2.4vh, 28px) 0 clamp(20px, 2.6vh, 32px);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #f2e8d8 0%, #d9b97d 70%, #b4863a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Statement closer — "It won't be world-class." Same scale as the
   lead so it lands as a peer pivot, not body copy. */
.ix-objection-v2-statement {
  margin: clamp(14px, 1.8vh, 22px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ix-objection-v2-statement b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Body — tight prose column. Body weight is light; <b> phrases pop
   in gold gradient; <em> stays italic for soft concessions. */
.ix-objection-v2-body {
  width: 100%;
  max-width: 820px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(243, 236, 219, 0.82);
}
/* Left-aligned variant used by Stage B's split column. */
.ix-objection-v2-body--left {
  max-width: none;
  text-align: left;
}

/* Stage B sub-headline — "World-class takes a team." on its own line,
   sized larger than body copy so it lands as the answer to the
   previous stage's "It won't be world-class." */
.ix-objection-v2-answer {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #f3ecdb;
  white-space: nowrap;
}
.ix-objection-v2-answer b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-objection-v2-body p {
  margin: 0 0 clamp(10px, 1.4vh, 18px);
}
.ix-objection-v2-body p:last-child { margin-bottom: 0; }
.ix-objection-v2-body b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-objection-v2-body em {
  font-style: italic;
  color: rgba(243, 236, 219, 0.6);
}

/* CTA — sits below the body. */
.ix-objection-v2-cta {
  margin-top: clamp(24px, 3.5vh, 44px);
}

@media (max-width: 960px) {
  .ix-objection-v2-split { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  /* On narrow screens the text fills the full column, so heavier scrim
     across the whole stage keeps copy readable over the image. */
  .ix-objection-v2-stage--b::before {
    background: linear-gradient(180deg,
      rgba(4, 3, 2, 0.88) 0%,
      rgba(4, 3, 2, 0.82) 100%);
  }
}
/* On smaller viewports, re-center the useai.jpg background so the
   subject sits behind the (now-narrower) text column instead of
   being pushed off the right edge. */
@media (max-width: 960px) {
  .ix-objection-v2-stage--b { background-position: center center; }
}
@media (max-width: 720px) {
  /* The base rule forces white-space:nowrap to keep the line on one
     row at desktop. Below 720 it overflows both sides — allow wrap. */
  .ix-objection-v2-sub {
    font-size: clamp(22px, 6vw, 34px);
    white-space: normal;
    text-wrap: balance;
  }
  .ix-objection-v2-lead { font-size: clamp(20px, 5.5vw, 26px); }
  .ix-objection-v2-body { font-size: 14px; }
}
@media (max-width: 480px) {
  .ix-objection-v2-sub { font-size: clamp(20px, 6.5vw, 28px); }
}

/* ------------------------------------------------------------------
   SoulBrand.ai spotlight card
------------------------------------------------------------------ */
.ix-soulbrand {
  padding: 140px 64px;
  background:
    radial-gradient(900px 400px at 50% 10%, rgba(214,147,255,0.10), transparent 70%),
    radial-gradient(700px 300px at 10% 90%, rgba(236,199,119,0.08), transparent 70%),
    var(--bg-0);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.ix-soulbrand-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 4.8vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--fg-1);
  max-width: 900px; margin: 0 auto 48px;
  text-wrap: balance;
}
.ix-soulbrand-title b {
  font-weight: 700;
  background: var(--grad-logo-x);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-soulbrand-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 700px; margin: 0 auto 48px;
}
.ix-soulbrand-body p { margin: 0 0 16px; }

/* ------------------------------------------------------------------
   Before / After split
------------------------------------------------------------------ */
.ix-ba-instruction {
  text-align: center;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.56em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.ix-ba-feature {
  max-width: 1200px; margin: 0 auto 64px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0;
  border: 1px solid rgba(236,199,119,0.22);
}
.ix-ba-panel { padding: 56px 48px; }
.ix-ba-panel--before {
  filter: saturate(0.4) brightness(0.78);
  opacity: 0.85;
}
.ix-ba-panel--after {
  position: relative;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(236,199,119,0.08), transparent 70%);
}
.ix-ba-panel-label {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ix-ba-panel--before .ix-ba-panel-label { color: var(--fg-3); }
.ix-ba-panel-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 32px;
}
.ix-ba-panel ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ix-ba-panel li {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ix-ba-panel li:last-child { border-bottom: 0; }
.ix-ba-divider {
  width: 1px;
  background: var(--grad-ceremonial);
  opacity: 0.6;
}
.ix-ba-featured-names {
  text-align: center;
  margin-bottom: 72px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.56em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.ix-ba-featured-names .ix-sep { color: rgba(236,199,119,0.5); padding: 0 10px; }

.ix-ba-closing {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  max-width: 760px; margin: 0 auto;
  text-wrap: balance;
}
.ix-ba-closing b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------------
   Testimonials
------------------------------------------------------------------ */
.ix-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  max-width: 1300px; margin: 0 auto;
}
.ix-testimonial {
  padding: 48px 40px;
  background: var(--bg-1);
  box-shadow: var(--shadow-0), var(--shadow-1);
  display: flex; flex-direction: column;
  position: relative;
}
.ix-testimonial::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--grad-ceremonial);
}
.ix-testimonial-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.5;
  color: var(--color-champagne);
  opacity: 0.4;
  margin-bottom: 8px;
  letter-spacing: -0.04em;
}
.ix-testimonial-body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-1);
  flex: 1;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.ix-testimonial-attr {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.48em;
  color: var(--color-champagne);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Opt-in — Influex Insiders Newsletter
   Wide two-column card: editorial copy on the left, form on the right.
------------------------------------------------------------------ */
.ix-optin {
  /* Override default 140px top + bottom padding. The default 140px
     bottom leaves a yawning gap between the card and the showcase
     section below — especially noticeable as the viewport shrinks. */
  padding-top: 24px;
  padding-bottom: clamp(32px, 5vh, 96px);
}
.ix-optin-card {
  position: relative;
  /* Single column, centered — copy on top, inline form row below. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3vw, 44px);
  padding: clamp(44px, 5vw, 72px) clamp(36px, 5vw, 72px);
  background: rgba(20, 16, 10, 0.55);
  border: 1px solid rgba(236, 199, 119, 0.28);
  border-radius: 18px;
  box-shadow:
    inset 0 0 80px rgba(236, 199, 119, 0.06),
    0 30px 70px -30px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ix-optin-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Wider max-width so the ~112-char headline lays out on exactly
     two balanced lines instead of wrapping to three or four. */
  max-width: 1100px;
}
.ix-optin-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Font max dropped from 42px → 34px so the ~112-char headline
     fits cleanly on two balanced lines at the 1100px copy width.
     At 42px text-wrap: balance was picking 3 lines because 2 lines
     couldn't both fit the container; 34px gives it the headroom. */
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
}
.ix-optin-headline b {
  /* "secrets of creating a world-class brand" — plain bold white. */
  font-weight: 700;
  color: #FFFFFF;
}
/* "Influex Insiders" — carries the authority gradient instead. */
.ix-optin-headline .ix-optin-brand {
  font-weight: 700;
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-optin-sub {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(254, 247, 223, 0.7);
  max-width: 44ch;
}
.ix-optin-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 880px;
}
/* Inline row — name + email + submit on one horizontal track. */
.ix-optin-fields {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.ix-optin-field {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1 1 0;
  min-width: 0;
}
.ix-optin-field-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.ix-optin-input {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fef7df;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(236, 199, 119, 0.22);
  border-radius: 8px;
  outline: none;
  transition: border-color 220ms var(--ease-quint), background 220ms var(--ease-quint);
}
.ix-optin-input::placeholder { color: rgba(254, 247, 223, 0.4); }
.ix-optin-input:focus {
  border-color: rgba(236, 199, 119, 0.65);
  background: rgba(0, 0, 0, 0.55);
}
/* Submit sits inline with the inputs — natural width sized to its
   label, height matches the inputs so the row reads as one unit. */
.ix-optin-submit {
  flex: 0 0 auto;
  align-self: stretch;
  margin-top: 0;
  white-space: nowrap;
}
.ix-optin-microcopy {
  margin-top: 2px;
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.45);
  text-align: center;
}

@media (max-width: 860px) {
  /* Stack the inline row vertically on narrow screens so the
     inputs and submit button each get full width and don't squeeze. */
  .ix-optin-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .ix-optin-submit { align-self: stretch; }
}

/* ------------------------------------------------------------------
   Promise / Guarantee
------------------------------------------------------------------ */
.ix-promise { text-align: center; }
.ix-promise-block {
  margin: 0 auto 72px;
  max-width: 820px;
}
.ix-promise-block:last-child { margin-bottom: 0; }
.ix-promise-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0 0 28px;
}
.ix-promise-heading b {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-promise-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-2);
}
.ix-promise-body p { margin: 0 0 14px; }
.ix-promise-stamp {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 32px;
  border: 1px solid rgba(236,199,119,0.5);
  border-radius: 999px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.56em;
  color: var(--color-champagne);
  text-transform: uppercase;
}
.ix-roi {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(40px, 4vw, 64px);
  color: var(--color-champagne);
  line-height: 1;
  margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────────────
   PROMISE V2 — Full-screen monitor with crossfading content.
   Section is 240vh tall with a 100vh sticky pin. Scroll progress
   drives a crossfade between Stage A and Stage B inside the screen.
   ────────────────────────────────────────────────────────────────── */
.ix-promise-v2 {
  position: relative;
  height: 240vh;
  /* Dark gold gradient backdrop — replaces the previous white. */
  background: radial-gradient(ellipse 90% 70% at 50% 40%,
    #5C4416 0%,
    #2E2009 55%,
    #14110C 100%);
  isolation: isolate;
}
.ix-promise-v2-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  background: radial-gradient(ellipse 90% 70% at 50% 40%,
    #5C4416 0%,
    #2E2009 55%,
    #14110C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ix-promise-v2-pin::before {
  content: "";
  position: absolute;
  /* Push the image well past every edge so the source PNG's natural
     transparent/light corners stay outside the visible viewport. */
  inset: -40% -40%;
  background-image: url('images/influexportfolio-diagonal.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
  opacity: var(--bg-op, 0);
  transition: opacity 120ms linear;
  will-change: opacity;
}
.ix-promise-v2-pin > * { position: relative; z-index: 1; }
/* Glowing card — replaces the desktop mockup. Holds the promise
   copy in a soft white panel with an authority-gradient glow.
   Pure fade-in (no scale or slide). */
.ix-promise-v2-card {
  position: relative;
  width: min(90vw, 980px);
  aspect-ratio: 1440 / 620;
  max-height: 60vh;
  opacity: var(--monitor-op, 0);
  transition: opacity 380ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity;
  background: #FFFFFF;
  border-radius: clamp(20px, 2.4vw, 32px);
  /* Authority-gradient outer glow: warm gold core + lavender halo. */
  box-shadow:
    0 0 0 1px rgba(236, 199, 119, 0.35),
    0 0 60px rgba(236, 199, 119, 0.45),
    0 0 140px rgba(236, 199, 119, 0.30),
    0 0 220px rgba(189, 166, 216, 0.20),
    0 24px 60px -20px rgba(0, 0, 0, 0.4);
}
/* On <800 the wide 1440:620 ratio makes the card too short for the
   eyebrow + title + stamp stack at narrower widths. Override to a
   taller, more square aspect so all the content fits inside. */
@media (max-width: 800px) {
  .ix-promise-v2-card {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }
}
/* Screen — positioned over the white area inside the monitor bezel.
   Bounds extended (top tightened, bottom raised toward the stand) so
   the stage actually fills the visible white interior of the PNG —
   otherwise flex-centered copy reads as top-aligned because the empty
   white below the stage is much taller than the bezel padding above. */
.ix-promise-v2-screen {
  position: absolute;
  inset: clamp(20px, 4%, 48px) clamp(24px, 5%, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Faded X-Factor watermark — gold-gradient mark behind the text
   so the card reads as intentional rather than empty. */
.ix-promise-v2-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 65%, 820px);
  aspect-ratio: 190 / 179;
  z-index: 0;
  display: none;
  opacity: 0.22;
  /* Darker authority-gradient tones so the mark reads against the
     white card. (Light tones at low opacity on white = invisible.) */
  background: linear-gradient(135deg,
    #B4863A 0%,
    #A56A2E 35%,
    #95513D 65%,
    #7A6BAC 100%);
  -webkit-mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
          mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}

/* Both stages share the same anchor. Crossfade via opacity. */
.ix-promise-v2-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(8px, 1.2vh, 18px);
  padding: clamp(12px, 2vh, 28px);
  color: #14110C;
  opacity: var(--stage-op, 0);
  transition: opacity 700ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  z-index: 2;
}

/* Cinematic cascade — each child slides + fades in once the stage is
   "active" (JS toggles .is-in when its scroll-driven op crosses a
   threshold). Children stagger by ~180ms for a deliberate reveal. */
.ix-promise-v2-stage > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-promise-v2-stage.is-in > * {
  opacity: 1;
  transform: translateY(0);
}
.ix-promise-v2-stage.is-in > *:nth-child(1) { transition-delay: 0ms; }
.ix-promise-v2-stage.is-in > *:nth-child(2) { transition-delay: 160ms; }
.ix-promise-v2-stage.is-in > *:nth-child(3) { transition-delay: 320ms; }
.ix-promise-v2-stage.is-in > *:nth-child(4) { transition-delay: 480ms; }
.ix-promise-v2-stage.is-in > *:nth-child(5) { transition-delay: 600ms; }
.ix-promise-v2-stage.is-in > *:nth-child(6) { transition-delay: 720ms; }
.ix-promise-v2-stage.is-in > *:nth-child(7) { transition-delay: 840ms; }
.ix-promise-v2-stage.is-in > *:nth-child(8) { transition-delay: 960ms; }

/* The horizontal rules above/below the guarantee draw outward from
   the center after the stamp itself appears. */
.ix-promise-v2-stamp::before,
.ix-promise-v2-stamp::after {
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-promise-v2-stage.is-in .ix-promise-v2-stamp::before { transition-delay: 540ms; }
.ix-promise-v2-stage.is-in .ix-promise-v2-stamp::after  { transition-delay: 620ms; }
.ix-promise-v2-stage.is-in .ix-promise-v2-stamp::before,
.ix-promise-v2-stage.is-in .ix-promise-v2-stamp::after {
  transform: scaleX(1);
}
.ix-promise-v2-stage--a { --stage-op: var(--promise-a-op, 1); }
/* Stage B now sits OUTSIDE the white card — positioned absolute
   across the full pin, light cream text directly on the dark gold
   gradient backdrop. */
.ix-promise-v2-stage--b {
  --stage-op: var(--promise-b-op, 0);
  inset: 0;
  padding: clamp(40px, 6vh, 100px) clamp(24px, 4vw, 80px);
  color: #FEF7DF;
  z-index: 2;
}
.ix-promise-v2-stage--b .ix-promise-v2-title {
  color: #FFFFFF !important;
}
/* Override the authority-gradient em fill inside Stage B's title so
   "Your Clients." also renders as solid white. */
.ix-promise-v2-stage--b .ix-promise-v2-title em {
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.ix-promise-v2-stage--b .ix-promise-v2-line {
  color: rgba(254, 247, 223, 0.85) !important;
}
.ix-promise-v2-stage--b .ix-promise-v2-line--statement {
  color: #FEF7DF !important;
}
.ix-promise-v2-stage--b .ix-promise-v2-line--label {
  color: rgba(254, 247, 223, 0.70) !important;
}

/* Stage A typography */
.ix-promise-v2-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #B4863A;
  margin-bottom: clamp(8px, 1.5vh, 18px);
}
.ix-promise-v2-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000;
}
.ix-promise-v2-title em {
  font-style: normal;
  font-weight: inherit;
  color: #000;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
.ix-promise-v2-title--clients {
  margin-top: clamp(14px, 2vh, 24px);
  font-size: clamp(22px, 2.8vw, 44px);
}
.ix-promise-v2-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vh, 26px);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 42px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border: 0;
  margin: clamp(12px, 1.8vh, 20px) 0;
  /* Authority gradient on the text itself. */
  background: var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-promise-v2-stamp::before,
.ix-promise-v2-stamp::after {
  content: "";
  display: block;
  width: clamp(140px, 22vw, 280px);
  height: 1px;
  /* Symmetric fade — transparent on both ends, gold/lavender peak in
     the middle. Mirrors the text width for a balanced rule. */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 185, 125, 0.9) 50%,
    transparent 100%
  );
  -webkit-text-fill-color: initial;
}
.ix-promise-v2-line {
  margin: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(20, 17, 12, 0.78);
  max-width: 760px;
}

/* Stage B typography */
.ix-promise-v2-stage--b .ix-promise-v2-line {
  margin: clamp(2px, 0.4vh, 5px) 0;
}
.ix-promise-v2-line--statement {
  margin-top: clamp(12px, 1.8vh, 20px) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 1.6vw, 26px) !important;
  font-weight: 500 !important;
  color: #14110C !important;
}
.ix-promise-v2-line--label {
  font-size: clamp(13px, 1vw, 16px) !important;
}
.ix-promise-v2-line--label b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-promise-v2-roi {
  margin: clamp(10px, 1.4vh, 18px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  /* Show both stages stacked vertically so the message is readable
     without the crossfade animation. */
  .ix-promise-v2 { height: auto; }
  .ix-promise-v2-pin { position: relative; height: auto; padding: 80px 24px; }
  .ix-promise-v2-monitor { display: none; }
  .ix-promise-v2-screen { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
  .ix-promise-v2-stage { position: relative; inset: auto; opacity: 1 !important; margin-bottom: 60px; }
}

/* ------------------------------------------------------------------
   Invitation V2 — animated 3D light-beams background (three.js).
   Black field, white type, white CTA. Beams canvas absolute-fills
   the section behind .ix-invitation-v2-inner.
------------------------------------------------------------------ */
.ix-invitation-v2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) clamp(16px, 4vw, 64px);
  text-align: center;
  background: #000;
  color: #FFFFFF;
}
.ix-invitation-v2-beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.ix-invitation-v2-inner {
  position: relative;
  z-index: 1;
  max-width: min(1320px, 96vw);
  margin: 0 auto;
}
.ix-invitation-v2-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  white-space: nowrap;
  background: var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-invitation-v2-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.7;
  color: #FFFFFF;
  margin: 0 auto 36px;
}
.ix-invitation-v2-body p {
  margin: 0 0 10px;
  color: #FFFFFF;
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
}
.ix-invitation-v2-body p:last-child { margin-bottom: 0; }
.ix-invitation-v2-lead {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 34px);
  margin-bottom: 20px !important;
}

.ix-invitation-v2-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.3;
  margin: 0 0 32px;
  background: var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ix-invitation-v2-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 56px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
  background: transparent;
  transition: transform 200ms var(--ease-quint), filter 200ms var(--ease-quint);
}
.ix-invitation-v2-cta .ix-cta-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 24px rgba(255,255,255,0.25));
}
.ix-invitation-v2-cta .ix-cta-label {
  position: relative;
  z-index: 1;
}
.ix-invitation-v2-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
@media (max-width: 480px) {
  .ix-invitation-v2-cta {
    height: 48px;
    padding: 0 28px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}
@media (max-width: 360px) {
  .ix-invitation-v2-cta {
    padding: 0 18px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* ------------------------------------------------------------------
   Brand logo (nav + footer use the real PNG)
------------------------------------------------------------------ */
.ix-brand { display: inline-flex; align-items: center; }
.ix-brand-logo {
  height: 38px; width: auto;           /* ~20% bigger than the base 32px */
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
/* ------------------------------------------------------------------
   Footer — minimal (copyright left · logo center · privacy right)
------------------------------------------------------------------ */
.ix-footer {
  padding: 32px clamp(24px, 5vw, 64px) 36px;
  background: #000;
  position: relative;
}
.ix-footer-gotop {
  display: block;
  width: max-content;
  margin: 0 0 24px auto;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  transition: color 180ms var(--ease-quint);
}
.ix-footer-gotop:hover { color: var(--color-champagne); }
.ix-footer-rule {
  width: 100%;
  margin: 0 0 28px;
  height: 1px;
  background: var(--grad-ceremonial);
  opacity: 0.45;
  border: 0;
}
.ix-footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.ix-footer-col {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ix-footer-col--left { justify-content: flex-start; }
.ix-footer-col--right { justify-content: flex-end; }
.ix-footer-col a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color 180ms var(--ease-quint);
}
.ix-footer-col a:hover { color: var(--color-champagne); }
.ix-footer-sep { color: rgba(255,255,255,0.22); }
.ix-footer-wordmark {
  display: inline-flex;
  align-items: center;
  justify-self: center;
}
.ix-footer-logo {
  height: clamp(28px, 3vw, 40px);
  width: auto;
  display: block;
}

/* ------------------------------------------------------------------
   Scroll-in fade
------------------------------------------------------------------ */
.ix-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease-quint), transform 900ms var(--ease-quint);
}
.ix-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .ix-section { padding: 96px 32px; }
  .ix-editorial { grid-template-columns: 1fr; gap: 32px; }
  .ix-editorial-heading { position: static; }
  .ix-portfolio-groups { grid-template-columns: 1fr 1fr; }
  /* Keep W.E.W.I.L.L. as a 6-up inline tab strip — shrink the
     watermark + label rather than wrapping the tabs onto rows. The
     tile aspect also shortens so the strip docks closer to the
     carousel below (the 3/4 portrait tile is wasted space once the
     watermark glyph is small). */
  .ix-industry { padding: 4px; }
  .ix-serve-stage .ix-industry { aspect-ratio: 1 / 1; }
  .ix-industry-mark { font-size: clamp(32px, 8vw, 120px); }
  .ix-industry-label { font-size: clamp(10px, 1.3vw, 18px); padding: 2px 4px 6px; }
  .ix-industries { margin-bottom: 8px; }
  .ix-serve-carousel { margin-top: -16px; margin-bottom: 12px; }
  /* The 58vh-tall carousel stage leaves big empty bands above and
     below the smaller landscape slide image — shrink it to size with
     the slide rather than the viewport. */
  .ix-serve-carousel-stage { height: clamp(220px, 40vw, 380px); }
  .ix-phase-head { grid-template-columns: 1fr; gap: 24px; }
  .ix-phase-name { font-size: 88px; }
  .ix-phase-rail { grid-template-columns: 1fr 1fr; }
  .ix-phase-rail-item:nth-child(-n+2) { border-bottom: 1px solid rgba(236,199,119,0.22); }
  .ix-phase-rail-item:nth-child(2) { border-right: 0; }
}
@media (max-width: 720px) {
  .ix-section { padding: 80px 24px; }
  .ix-hero { padding: 96px 24px 72px; }
  .ix-hero-stat { gap: 22px; margin-top: 40px; }
  .ix-hero-stat-row { gap: 28px; }
  .ix-hero-stat-divider { height: 56px; }
  .ix-hero-stat-num { font-size: 56px; }
  .ix-hero-stat-tail {
    text-align: center;
    letter-spacing: 0.22em;
    white-space: normal;
    font-size: 10px;
    line-height: 1.7;
  }
  .ix-collage-stage { opacity: 0.6; }
  .ix-portfolio-groups { grid-template-columns: 1fr; gap: 32px; }
  /* Even tighter on mobile — tabs stay inline, single character + tiny label. */
  .ix-industry { padding: 2px; }
  .ix-serve-stage .ix-industry { aspect-ratio: 4 / 3; }
  .ix-industry-mark { font-size: clamp(24px, 9vw, 64px); }
  .ix-industry-label { font-size: 9px; letter-spacing: -0.01em; padding: 2px 2px 4px; }
  .ix-industries { margin-bottom: 12px; }
  .ix-serve-carousel { margin-bottom: 16px; }
  /* Pull the indicator (gold rule + arrow) up so it doesn't get
     cropped on the now-shorter tile. */
  .ix-serve-stage .ix-industry::before { bottom: 8px; }
  .ix-serve-stage .ix-industry::after { bottom: 0; border-top-width: 6px; border-left-width: 6px; border-right-width: 6px; }
  .ix-pricing-paths { grid-template-columns: 1fr; }
  .ix-path + .ix-path { border-left: 0; border-top: 1px solid rgba(236,199,119,0.24); }
  .ix-compare { grid-template-columns: 1fr; gap: 24px; }
  .ix-compare-divider { height: 1px; width: 100%; }
  .ix-ba-feature { grid-template-columns: 1fr; }
  .ix-ba-divider { height: 1px; width: 100%; }
  .ix-phase-calls ul { grid-template-columns: 1fr; }
  .ix-phase { padding: 80px 24px; }
  .ix-soulbrand { padding: 80px 24px; }
  .ix-invitation-v2 { padding: 80px 24px; }
  .ix-footer-row { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .ix-footer-col--left,
  .ix-footer-col--right { justify-content: center; }
  .ix-footer-wordmark { order: -1; }

  /* ── Mobile hero: allow the prehook spans to wrap, drop the
     headline size to fit narrow viewports, and force every line
     to actually center. ── */
  .ix-hero-prehook > span { white-space: normal; text-wrap: balance; }
  .ix-hero-prehook {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.08;
  }
  .ix-hero-headline-stage > .ix-hero-h1 {
    font-size: clamp(26px, 7vw, 40px);
    max-width: 100%;
    text-wrap: balance;
  }
  .ix-hero-headline-stage > .ix-hero-h1 > span,
  .ix-hero-prehook > span {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }
  .ix-hero-inner { max-width: 100%; padding: 0 8px; }
}

/* ============================================================
   NAV — Hamburger + slide-down mobile panel
   Active at < 1200px. Hides the inline nav-links and the
   desktop CTA pill, swaps in a hamburger that opens a panel
   containing the same links + Book Your Call.
============================================================ */
.ix-nav-toggle {
  display: none;
  position: relative;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.ix-nav-toggle-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: rgba(254, 247, 223, 0.92);
  border-radius: 1px;
  transition: transform 280ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 200ms ease;
}
.ix-nav-toggle-line:nth-child(1) { top: 8px; }
.ix-nav-toggle-line:nth-child(2) { top: 15px; }
.ix-nav-toggle-line:nth-child(3) { top: 22px; }
.ix-nav-toggle[aria-expanded="true"] .ix-nav-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ix-nav-toggle[aria-expanded="true"] .ix-nav-toggle-line:nth-child(2) {
  opacity: 0;
}
.ix-nav-toggle[aria-expanded="true"] .ix-nav-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.ix-nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 90px clamp(20px, 6vw, 48px) clamp(24px, 5vh, 48px);
  background: rgba(0, 0, 0, 0.96);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(236, 199, 119, 0.18);
  transform: translateY(-100%);
  transition: transform 380ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-nav-mobile[hidden] { display: none !important; }
.ix-nav-mobile.is-open { transform: translateY(0); }
.ix-nav-mobile-link {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.9);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 180ms ease;
}
.ix-nav-mobile-link:hover { color: var(--color-champagne, #ECC777); }
.ix-nav-mobile-cta {
  margin-top: 18px;
  align-self: center;
}

@media (max-width: 1199px) {
  .ix-nav-links { display: none; }
  .ix-nav-cta-desktop { display: none; }
  .ix-nav-toggle { display: inline-block; }
}

/* ============================================================
   < 768px tweaks: tighter spacing under hero headline, smaller
   featured logos, "AS FEATURED IN" label stacked above the row.
============================================================ */
@media (max-width: 768px) {
  /* Pull hero stats + featured row up ~20% closer to the headline. */
  .ix-hero { padding: 88px 20px 56px; }
  .ix-hero-stat { margin-top: 0; gap: 12px; }
  .ix-hero-h1 { margin: 18px 0 14px; }
  .ix-hero-stat-row { gap: clamp(24px, 6vw, 48px); }

  /* Enlarge the diagonal collage on mobile — wider/taller stage so
     each column's images render noticeably bigger. */
  .ix-collage-stage {
    width: 320%;
    height: 320%;
  }
  .ix-collage-stage { opacity: 0.5; }

  /* Featured row — label takes its own line, logos wrap into a
     centered row below. flex-wrap + flex-basis 100% on the label
     forces the wrap. */
  .ix-hero-featured {
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
  }
  .ix-hero-featured-label { flex-basis: 100%; text-align: center; }
  .ix-hero-featured-sep { display: none; }
  .ix-hero-featured-logo { height: 16px; }
  .ix-hero-featured-text { font-size: 12px; letter-spacing: 0.05em; }
  .ix-hero-featured-pipe { font-size: 14px; }
}

/* Extra-narrow phones — pull the brand logo in even further. */
@media (max-width: 480px) {
  .ix-nav { padding: 12px 14px; }
  .ix-brand-logo { height: 22px; }
  .ix-nav-toggle { width: 32px; height: 28px; }
  .ix-nav-toggle-line:nth-child(1) { top: 6px; }
  .ix-nav-toggle-line:nth-child(2) { top: 13px; }
  .ix-nav-toggle-line:nth-child(3) { top: 20px; }
}

/* ------------------------------------------------------------------
   What You'll Walk Away With — cinematic hero + scroll-jacked
   horizontal card carousel.
   - Section is 600vh tall; an inner sticky pin holds the viewport
     content fixed while the user scrolls.
   - Phase 1 (0 → ~0.18 of section scroll): hero reveal — logo mark
     fades in, eyebrow + headline cinematic cascade, gold ignites on
     "A world-class brand ecosystem."
   - Phase 2 (~0.20 → 1.0): the headline fades out, the logo mark
     dims and blurs into the background, the cards track translates
     horizontally from card 1 → card 5 driven by vertical scroll.
------------------------------------------------------------------ */
.ix-walkaway-stage {
  position: relative;
  height: 600vh;
  background: #000;
  isolation: isolate;
  overflow: visible;
  /* Landscape card sized to match the reference (~1000×625, 1.6:1).
     Card width caps so flanking cards stay visible on wide screens. */
  --card-w: clamp(420px, 56vw, 1000px);
  --card-gap: clamp(20px, 2.4vw, 40px);
  --logo-op: 0;
  --logo-blur: 0px;
  --gold-glow: 0px;
  --eyebrow-op: 0;
  --headline-op: 0;
  --hero-a-blur: 0px;
  --evolved-op: 0;
  --evolved-body-op: 0;
  --hero-b-blur: 0px;
  --cards-op: 0;
  --track-tx: 0px;
  --closer1-op: 0;
  --closer2-op: 0;
  --closer-glow: 0px;
}

.ix-walkaway-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* Atmospheric orbs — large soft glows pushed mostly off-screen so
   only the diffuse outer halo bleeds into view (no visible radial
   shape). One gold, one lavender (from the authority palette) for
   color variety. Sit behind the logo + cards. */
.ix-walkaway-pin::before,
.ix-walkaway-pin::after {
  content: "";
  position: absolute;
  width: clamp(700px, 90vw, 1300px);
  height: clamp(700px, 90vw, 1300px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(70px);
}
/* Gold glow moved from TOP-left to BOTTOM-left so it no longer
   crosses the section boundary with the pricing section above —
   that boundary was reading as a visible cut/edge where the
   glow's outer halo bled into the section above. Both glows now
   sit at the bottom (gold-left + lavender-right), keeping the
   top edge of this section uniformly black for a seam-free
   transition from the pricing section's image fade. */
.ix-walkaway-pin::before {
  bottom: -55%;
  left: -45%;
  background: radial-gradient(circle,
    rgba(236, 199, 119, 0.26) 0%,
    rgba(236, 199, 119, 0.12) 32%,
    rgba(236, 199, 119, 0) 65%);
}
.ix-walkaway-pin::after {
  bottom: -55%;
  right: -45%;
  background: radial-gradient(circle,
    rgba(189, 166, 216, 0.24) 0%,
    rgba(189, 166, 216, 0.10) 32%,
    rgba(189, 166, 216, 0) 65%);
}

/* Background — full-bleed logo mark, fades in then dims/blurs. */
.ix-walkaway-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top padding so content clears the fixed nav on short viewports
     (e.g., 1600×900). Bottom matches for symmetric vertical centering. */
  padding-top: clamp(70px, 9vh, 110px);
  padding-bottom: clamp(20px, 3vh, 40px);
  pointer-events: none;
  z-index: 0;
}
.ix-walkaway-logo {
  width: clamp(280px, 50vw, 720px);
  height: auto;
  display: block;
  /* Solid gold fill via currentColor on the inline SVG paths. */
  color: #ecc777;
  opacity: var(--logo-op, 0);
  filter: blur(var(--logo-blur, 0));
  will-change: opacity, filter;
}

/* Phase 1: Hero — eyebrow + 2-line headline (revealed AFTER the logo
   has fully faded down to its 10% atmospheric state). Each part has
   its own opacity var so the cascade is deterministic. */
.ix-walkaway-hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(70px, 9vh, 110px) clamp(24px, 5vw, 80px) clamp(20px, 3vh, 40px);
  pointer-events: none;
  z-index: 2;
}
.ix-walkaway-eyebrow {
  font-family: var(--font-micro, var(--font-display));
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(236, 199, 119, 0.9);
  margin-bottom: 28px;
  opacity: var(--eyebrow-op, 0);
  filter: blur(var(--hero-a-blur, 0px));
  transition: filter 80ms linear;
}
.ix-walkaway-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 1100px;
  text-wrap: balance;
  opacity: var(--headline-op, 0);
  filter: blur(var(--hero-a-blur, 0px));
  transition: filter 80ms linear;
}
.ix-walkaway-line { display: block; }
.ix-walkaway-line--gold {
  font-weight: 600;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 var(--gold-glow, 0px) rgba(236, 199, 119, 0.55));
}

/* ── Phase 1B — "We've Evolved." + body ─────────────────────────
   Hero B shares the same absolute-inset positioning as Hero A,
   so the two cross-fade in place. The "Evolved" headline lands
   first (driven by --evolved-op), then the body copy fades in
   underneath (--evolved-body-op). Both fade out together as the
   cards start arriving. */
.ix-walkaway-evolved-headline {
  margin: 0 0 clamp(28px, 4vh, 56px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 8.5vw, 140px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  /* Authority gradient text + outer glow halo. The drop-shadow
     filter sits on the WRAPPER, so it works even though the text
     itself is painted via background-clip: text (which normally
     prevents text-shadow from picking up the gradient color). */
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-wrap: balance;
  opacity: var(--evolved-op, 0);
  filter:
    drop-shadow(0 0 28px rgba(236, 199, 119, 0.45))
    drop-shadow(0 0 60px rgba(189, 166, 216, 0.25))
    blur(var(--hero-b-blur, 0px));
  transition: filter 80ms linear;
}
.ix-walkaway-evolved-body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(254, 247, 223, 0.92);
  max-width: 920px;
  text-wrap: balance;
  opacity: var(--evolved-body-op, 0);
}
/* Highlight phrase — solid brand gold, no gradient, no sweeping
   animation. Quiet and steady against the muted ivory body. */
.ix-walkaway-evolved-body b {
  font-weight: 600;
  color: #D9B97D;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  animation: none;
}

/* Phase 3: Closer copy — appears after the last card exits left. */
.ix-walkaway-closer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  text-align: center;
  padding: clamp(70px, 9vh, 110px) clamp(24px, 5vw, 80px) clamp(20px, 3vh, 40px);
  pointer-events: none;
  z-index: 3;
}
.ix-walkaway-closer-line {
  margin: 0;
  font-family: var(--font-display);
  white-space: nowrap;
  text-wrap: balance;
}
.ix-walkaway-closer-line--white {
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 30px);
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.85);
  opacity: var(--closer1-op, 0);
}
.ix-walkaway-closer-line--gold {
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 68px);
  letter-spacing: -0.012em;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 var(--closer-glow, 0px) rgba(236, 199, 119, 0.55));
  opacity: var(--closer2-op, 0);
}
@media (max-width: 720px) {
  .ix-walkaway-closer-line { white-space: normal; }
}

/* Phase 2: Cards viewport. */
.ix-walkaway-cards-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: clamp(70px, 9vh, 110px);
  padding-bottom: clamp(20px, 3vh, 40px);
  opacity: var(--cards-op, 0);
  z-index: 1;
}
.ix-walkaway-track {
  display: flex;
  gap: var(--card-gap);
  /* No padding — first card starts off-screen right; JS computes the
     translate to bring each card to viewport center sequentially. */
  padding-inline: 0;
  transform: translate3d(var(--track-tx, 0px), 0, 0);
  will-change: transform;
}

/* Landscape card — image on the LEFT, content on the RIGHT.
   Solid black inner with a soft gold orb on the right side; the
   border itself uses the gradient (10% gold → solid → 10% gold)
   via the background padding-box / border-box trick. */
.ix-walkaway-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  /* No aspect-ratio on the card itself — the image area (below) carries
     the portrait 594:1162 aspect ratio and the card's height is
     determined by the image's natural rendered height. This lets the
     deliverable images fill their column edge-to-edge with no empty
     letterbox bands top or bottom. */
  max-height: 92vh;
  border-radius: 32px;
  background:
    /* Soft gold orb on the upper-right side (over the content area). */
    radial-gradient(58% 50% at 78% 22%,
      rgba(236, 199, 119, 0.20) 0%,
      rgba(236, 199, 119, 0.05) 35%,
      rgba(0, 0, 0, 0) 65%) padding-box,
    /* Black inner */
    linear-gradient(#000, #000) padding-box,
    /* Gold gradient border (#ffd8a2 with edge fade) */
    linear-gradient(90deg,
      rgba(255, 216, 162, 0.10) 0%,
      rgba(255, 216, 162, 0.95) 50.9%,
      rgba(255, 216, 162, 0.10) 100%) border-box;
  border: 1.5px solid transparent;
  display: grid;
  /* Image (left) gets ~60% of the card width, content (right) gets
     ~40%. With the much wider card the content column is still
     big enough for comfortable bullet text. */
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(20px, 2vw, 36px);
  /* Generous internal padding — frames the image + content cleanly
     away from the gold border. */
  padding: clamp(22px, 2.2vw, 44px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

/* Image area — locked to 4:3 landscape so the card has a FIXED
   height that doesn't change when bullet font sizes change. The
   content column fills that fixed row height; if bullet text would
   be too tall it's just clipped at the card edge (overflow:hidden
   on the card). 4:3 was chosen because, at max card width 1500px,
   it produces a ~720px card that fits comfortably inside the 100vh
   pin (~820px usable area after label). */
.ix-walkaway-card-image {
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 30% 30%, rgba(236, 199, 119, 0.22) 0%, rgba(236, 199, 119, 0) 60%),
    linear-gradient(135deg, #1c2740 0%, #0c1322 50%, #15233a 100%);
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ix-walkaway-card-image[data-card="1"] { background-image: linear-gradient(135deg, #2a3450 0%, #0f1828 60%, #1f2a44 100%); }
.ix-walkaway-card-image[data-card="2"] { background-image: linear-gradient(135deg, #1f3338 0%, #0a1820 50%, #1d3036 100%); }
.ix-walkaway-card-image[data-card="3"] { background-image: linear-gradient(135deg, #2a2444 0%, #110d22 50%, #211b3a 100%); }
.ix-walkaway-card-image[data-card="4"] { background-image: linear-gradient(135deg, #2c2218 0%, #150f0a 50%, #221a12 100%); }
.ix-walkaway-card-image[data-card="5"] { background-image: linear-gradient(135deg, #1d2c44 0%, #0a1424 50%, #1a2540 100%); }
.ix-walkaway-card-image[data-card="6"] { background-image: linear-gradient(135deg, #2a3450 0%, #0f1828 60%, #1f2a44 100%); }
.ix-walkaway-card-image[data-card="7"] { background-image: linear-gradient(135deg, #2a2444 0%, #110d22 50%, #211b3a 100%); }
.ix-walkaway-card-image[data-card="8"] { background-image: linear-gradient(135deg, #1f3338 0%, #0a1820 50%, #1d3036 100%); }

/* Card photo / video — fills the image area edge-to-edge via
   object-fit: cover. Mixed-aspect assets (portrait videos, landscape
   jpgs) all get center-cropped into the 4:5 image area. */
.ix-walkaway-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Media (still image or video) fills the card-image area, cover-fit
   so it crops to the card's aspect ratio without distortion. Slow
   Ken-Burns zoom (20s alternating ease-in-out) keeps the stills
   from feeling frozen — the image gently drifts in and out around
   a 1.06 scale. */
.ix-walkaway-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transform-origin: center center;
  animation: ix-walkaway-kenburns 20s ease-in-out infinite alternate;
  will-change: transform;
}
/* Stagger the start phase per card so the five images aren't all
   zooming in unison — feels more organic, like ambient motion. */
.ix-walkaway-card-image[data-card="1"] .ix-walkaway-card-video { animation-delay: 0s; }
.ix-walkaway-card-image[data-card="2"] .ix-walkaway-card-video { animation-delay: -4s; }
.ix-walkaway-card-image[data-card="3"] .ix-walkaway-card-video { animation-delay: -8s; }
.ix-walkaway-card-image[data-card="4"] .ix-walkaway-card-video { animation-delay: -12s; }
.ix-walkaway-card-image[data-card="5"] .ix-walkaway-card-video { animation-delay: -16s; }

@keyframes ix-walkaway-kenburns {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.2%, -0.8%); }
  100% { transform: scale(1.04) translate(0.8%, 0.6%); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-walkaway-card-video { animation: none; transform: scale(1.04); }
}

/* Right side — content. */
.ix-walkaway-card-content {
  display: flex;
  flex-direction: column;
  /* No top padding so the title aligns with the image's top edge.
     Bottom padding kept so the last bullet doesn't kiss the card
     edge. Side padding kept for breathing room from the gold border. */
  padding: 0 clamp(18px, 1.8vw, 32px) clamp(18px, 1.8vw, 32px);
  height: 100%;
  min-width: 0;
}
.ix-walkaway-card-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 0.95vw, 16px);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: clamp(20px, 2vw, 32px);
}
.ix-walkaway-card-icon {
  display: inline-flex;
  width: clamp(34px, 2.5vw, 44px);
  height: clamp(34px, 2.5vw, 44px);
  color: #ecc777;
  margin-bottom: clamp(12px, 1vw, 18px);
}
.ix-walkaway-card-icon svg { width: 100%; height: 100%; display: block; }
.ix-walkaway-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* Smaller cap so the card fits inside the 100vh pin even when the
     content column carries 6 bullets + a 2-line title. */
  font-size: clamp(16px, 1.7vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  /* Authority gradient: champagne → coral → lavender, painted into the
     text via background-clip. -webkit-text-fill-color: transparent makes
     Safari obey, regular `color: transparent` covers everyone else. */
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.ix-walkaway-card-body {
  margin-top: auto;
  font-family: var(--font-display);
  /* Bumped up — was clamp(13, 1vw, 16). The "Book Your Call" CTA
     was removed from each card so the body copy can breathe larger. */
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}
/* Bullet list — sits directly under the title at the top of the
   content column (was previously bottom-anchored via margin-top:auto).
   Champagne disc bullets, tight per-item gap so 6 bullets fit a
   single card without overflow. */
.ix-walkaway-card-bullets {
  list-style: none;
  margin: clamp(10px, 1.4vh, 18px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.9vh, 12px);
}
/* Icon variant — each row is a 2-column grid: icon left, text right.
   Used on the "What You Get" combined-section cards where every
   bullet has a bold title + description and a small champagne icon. */
.ix-walkaway-card-bullets--icons {
  gap: clamp(6px, 0.9vh, 12px);
}
/* Higher specificity (ul tag + class + li tag) so this rule wins over
   the default `.ix-walkaway-card-bullets li` padding-left below. */
ul.ix-walkaway-card-bullets--icons li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(10px, 1vw, 16px);
  padding-left: 0;
  /* Reset the default disc-variant font size too, so the
     .ix-walkaway-card-bullet-text font-size rule below it isn't
     fighting with the parent li's clamp(15, 1.1vw, 19). */
  font-size: inherit;
}
ul.ix-walkaway-card-bullets--icons li::before {
  display: none;     /* hide the default disc bullet on icon-variant rows */
}
.ix-walkaway-card-bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(18px, 1.3vw, 22px);
  height: clamp(18px, 1.3vw, 22px);
  flex: 0 0 auto;
  color: var(--color-champagne, #ECC777);
  /* Visually align the icon with the cap-height of the first line
     of bullet text below it. */
  margin-top: 0.18em;
  filter: drop-shadow(0 0 6px rgba(236, 199, 119, 0.22));
}
.ix-walkaway-card-bullet-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ix-walkaway-card-bullet-text {
  font-family: var(--font-body);
  /* Bumped slightly bigger per request — still tight enough that
     all 6 bullets fit inside the 100vh pin. */
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.82);
}
.ix-walkaway-card-bullet-text b {
  color: #fff;
  font-weight: 700;
}
/* Optional italic intro paragraph between title and bullets (used on
   the Stage & Story card). */
.ix-walkaway-card-intro {
  margin: clamp(8px, 1vh, 14px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.ix-walkaway-card-intro em {
  font-style: italic;
}
.ix-walkaway-card-bullets li {
  position: relative;
  padding-left: clamp(18px, 1.4vw, 26px);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
/* Dense variant — used on the Pixel-Perfect Development card which
   has the longest title (3 words, hyphenated) AND the most bullets (8).
   The default font sizes and per-row gap overflow the column. Trims
   the title scale, the bullet font, and the inter-bullet gap just for
   this card so everything fits. */
.ix-walkaway-card--dense .ix-walkaway-card-title {
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.06;
}
.ix-walkaway-card--dense .ix-walkaway-card-bullets {
  gap: clamp(5px, 0.7vh, 9px);
}
.ix-walkaway-card--dense .ix-walkaway-card-bullets li {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.35;
}

.ix-walkaway-card-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: clamp(6px, 0.5vw, 8px);
  height: clamp(6px, 0.5vw, 8px);
  border-radius: 50%;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
}
/* Card CTA — polygon button (shares .btn--primary styling). The
   modifier class lets us slim it down to fit inside the card. */
.ix-walkaway-card-btn {
  align-self: flex-start;
  padding: 10px 28px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
  .ix-walkaway-stage { --card-w: clamp(300px, 88vw, 540px); }
  .ix-walkaway-card {
    aspect-ratio: auto;
    /* Drop the desktop 78vh ceiling — at portrait sizes the image
       row + content needs more vertical room than 78vh allows, so
       the body copy was getting clipped at the bottom. */
    max-height: none;
    grid-template-columns: 1fr;
    /* Image row scales with card width (kept landscape-ish) so it
       occupies more vertical real estate than the old fixed 220px.
       Content row is auto so it fits all the text below. */
    grid-template-rows: clamp(322px, 64vw, 483px) auto;
  }
  /* Extra breathing room around the content so the body text doesn't
     touch the card's bottom edge once the layout stacks. */
  .ix-walkaway-card-content {
    padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 32px) clamp(32px, 4vw, 44px);
  }
  /* Body no longer needs `margin-top: auto` since the CTA below it
     was removed — let it sit naturally below the title with breathing
     room on both sides. */
  .ix-walkaway-card-body { margin-top: clamp(12px, 1.6vh, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-walkaway-stage {
    height: auto;
    --eyebrow-op: 1;
    --headline-op: 1;
    --evolved-op: 1;
    --evolved-body-op: 1;
    --hero-a-blur: 0px;
    --hero-b-blur: 0px;
    --logo-op: 0.10;
    --logo-blur: 24px;
    --gold-glow: 0;
    --cards-op: 1;
    --track-tx: 0px;
  }
  .ix-walkaway-pin { position: static; height: auto; padding: 80px 24px; }
  .ix-walkaway-hero { position: relative; inset: auto; padding: 60px 24px; }
  .ix-walkaway-cards-viewport { position: relative; inset: auto; overflow-x: auto; padding-bottom: 24px; }
  .ix-walkaway-track { padding-inline: 24px; }
}

/* ================================================================
   TWO WAYS IN — Portal expansion section.
   Sticky-pinned 300vh stage. Scroll progress drives one --expand
   var (0→1) that interpolates the portal's width / height /
   border-radius simultaneously: small portal → full-bleed.
   Headline sits IN FRONT of the portal and overlaps it visually.
   Supporting copy fades in once the portal is fully open.
================================================================ */
.ix-twoways-stage {
  --expand: 0;
  --p1-op: 0;
  --p2-op: 0;
  --closer-op: 0;
  --closer-glow: 0px;
  /* New: copy fade-out (1 → 0) before cards arrive, and per-card
     rise progress (0 = below viewport, 1 = settled in the slot). */
  --copy-op: 1;
  --card1-prog: 0;
  --card2-prog: 0;
  --card3-prog: 0;
  --card4-prog: 0;
  --card5-prog: 0;
  --card6-prog: 0;
  --nav-offset: clamp(70px, 8vh, 100px);

  /* Initial portal dimensions — smaller portrait card so the
     expansion to the capped end size feels more dramatic. */
  --portal-w-start: clamp(200px, 22vw, 320px);
  --portal-h-start: clamp(260px, 30vw, 420px);
  /* Capped final portal dimensions — wider 1446×820 ratio (1.76:1,
     close to 16:9). The cards inherit these exact dimensions so
     header crops at 1446×820 will fit pixel-perfect. Width cap
     only kicks in on viewports ≥ ~1646px wide; below that, 88vw
     drives the size and the dark frame remains visible. */
  --portal-w-end: min(88vw, 1446px);
  --portal-h-end: min(78vh, 820px);
  --portal-r-start: 28px;
  /* End radius stays slightly rounded since portal is no longer
     edge-to-edge. */
  --portal-r-end: 18px;

  position: relative;
  /* Bumped from 300vh → 400vh to make room for the 3-card sequence
     that follows the copy reveal. */
  height: 400vh;
  /* Background INTERPOLATES from dark navy to pure white in
     lockstep with the comparison section's --bg-prog (inherited
     from documentElement). When 20% of comparison is showing,
     --bg-prog ramps 0 → 1 and BOTH sections' bgs fade together,
     making the boundary invisible. Pin contents (portal/cards)
     are NOT affected — they keep their full opacity. */
  background-color: color-mix(in srgb,
    #03050f calc((1 - var(--bg-prog, 0)) * 100%),
    #FFFFFF calc(var(--bg-prog, 0) * 100%));
  transition: background-color 60ms linear;
}

.ix-twoways-pin {
  position: sticky;
  /* Stick below the fixed nav so the portal doesn't get clipped on
     shorter viewports (e.g., 1600×900) as it expands. */
  top: var(--nav-offset);
  height: calc(100vh - var(--nav-offset));
  overflow: hidden;
}

/* Section atmospheric bg — subtle gold + lavender wash */
.ix-twoways-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70vw 60vh at 12% 18%, rgba(236, 199, 119, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 50vh at 88% 84%, rgba(189, 166, 216, 0.10) 0%, transparent 60%);
  /* As the portal expands, the section bg recedes slightly */
  opacity: calc(1 - var(--expand) * 0.6);
  transition: opacity 0.1s linear;
}

/* The portal — absolutely centered, expands from small card to full screen.
   Background: the AI + craft imagery (left side AI/digital, right side
   traditional pen/parchment) thematically reinforces "Two Ways In" as
   the portal opens to full bleed. */
.ix-twoways-portal {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Width/height interpolate from the small start size to the
     CAPPED end size (no longer 100vw / 100vh). */
  width:  calc(var(--portal-w-start) + (var(--portal-w-end) - var(--portal-w-start)) * var(--expand));
  height: calc(var(--portal-h-start) + (var(--portal-h-end) - var(--portal-h-start)) * var(--expand));
  transform: translate(-50%, -50%);
  border-radius: calc(var(--portal-r-start) + (var(--portal-r-end) - var(--portal-r-start)) * var(--expand));
  overflow: hidden;

  /* Image fills the portal (cover-fit, centered). Gold gradient border
     sits on top via padding-box / border-box layering. */
  background:
    url('images/expandedbg.jpg') center / cover no-repeat padding-box,
    linear-gradient(135deg, rgba(236, 199, 119, 0.85) 0%, rgba(236, 199, 119, 0.25) 50%, rgba(189, 166, 216, 0.55) 100%) border-box;
  background-color: #06091c;
  border: 1.5px solid transparent;

  /* Outer halo — only the GOLD glow on the small portal stays.
     The dark drop shadow was removed because it leaked onto the
     white bg during the cross-section fade, looking like a smudge. */
  box-shadow:
    0 0 calc(60px * (1 - var(--expand))) rgba(236, 199, 119, 0.18);
}

/* Subtle vignette overlay — transparent center (where the headline + copy
   live) → ~50% black at the corners. Keeps text readable against the
   AI/craft imagery on the edges without dimming the image meaningfully. */
.ix-twoways-portal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.55) 100%);
}

/* Glow div is no longer needed (image provides its own accents). */
.ix-twoways-portal-glow { display: none; }

/* Headline — sits in front, overlaps the portal visually.
   Stays visible the entire time. As the portal expands, the
   headline shifts upward (50% → 22% of viewport) to make room
   for the supporting copy below it. */
.ix-twoways-headline-wrap {
  position: absolute;
  left: 50%;
  /* Centered at expand=0 (50%), drifts up to ~32% from top at
     expand=1. Less aggressive than before so the headline stays
     in upper-middle rather than pinned near the top edge. */
  top: calc(50% - 22% * var(--expand));
  transform: translate(-50%, -50%);
  width: min(92vw, 1100px);
  text-align: center;
  z-index: 3;
  opacity: 1;
  pointer-events: none;
}

.ix-twoways-eyebrow {
  display: block;
  margin-bottom: clamp(16px, 2vw, 28px);
  /* Override .ix-eyebrow-accent which renders as black on dark bg here */
  color: #ECC777 !important;
  -webkit-text-fill-color: #ECC777;
  background: none !important;
}

.ix-twoways-headline {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  /* Headline scales DOWN as the portal expands so it makes room
     for the supporting copy below. Multiplier goes from 1 → 0.55. */
  --hl-scale: calc(1 - 0.45 * var(--expand));
  /* Reduced max (76px → was 96px) so the start state lays out on
     3 lines: "We Haven't Replaced Our White-" / "Glove Service." /
     "We've Expanded." Also keeps the expanded state from crowding
     the right edge of the capped portal. */
  font-size: clamp(
    calc(26px * var(--hl-scale)),
    calc(5.4vw * var(--hl-scale)),
    calc(76px * var(--hl-scale))
  );
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.ix-twoways-line { display: block; }
.ix-twoways-line--gold {
  font-weight: 700;
  /* Inline the authority gradient (don't rely on --grad-authority,
     which depends on a design-system import that may not resolve). */
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(236, 199, 119, 0.35));
}

/* Supporting copy — fades in below the headline once the portal
   has opened. Anchored from the top so the stack grows downward
   predictably and the closer line stays in-view. Sits ~7% below
   the headline's anchored center for a comfortable gap. */
.ix-twoways-content {
  position: absolute;
  left: 50%;
  /* Moved up from 44% → 38% so the copy block uses more of the
     empty top space, leaving proper breathing room between the
     "Explore Your Options" button and the portal's bottom edge. */
  top: 38%;
  transform: translateX(-50%);
  width: min(92vw, 960px);
  text-align: center;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  /* Wrapped fade — multiplies the per-element opacity vars so when
     --copy-op drops to 0 the entire copy block fades out together
     just before the card sequence begins. */
  opacity: var(--copy-op, 1);
  transition: opacity 0.1s linear;
}

.ix-twoways-para {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.1s linear, transform 0.1s linear;
  transform: translateY(8px);
}
.ix-twoways-para b {
  color: #ecc777;
  font-weight: 600;
}
.ix-twoways-para--p1 {
  opacity: var(--p1-op);
  transform: translateY(calc(8px * (1 - var(--p1-op))));
}
.ix-twoways-para--p2 {
  opacity: var(--p2-op);
  transform: translateY(calc(8px * (1 - var(--p2-op))));
}

.ix-twoways-closer {
  margin: clamp(8px, 1vw, 16px) 0 0;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 var(--closer-glow, 0px) rgba(236, 199, 119, 0.5));
  opacity: var(--closer-op);
  transform: translateY(calc(10px * (1 - var(--closer-op))));
  transition: opacity 0.1s linear, transform 0.1s linear;
}
@media (max-width: 720px) {
  .ix-twoways-closer { white-space: normal; }
}

/* CTA — fades in with the closer line. Parent .ix-twoways-content
   has pointer-events: none for the scroll-revealed copy, so we
   re-enable them on the button itself so clicks register. */
.ix-twoways-cta {
  margin-top: clamp(20px, 2.4vw, 36px);
  display: flex;
  justify-content: center;
  opacity: var(--closer-op);
  transform: translateY(calc(10px * (1 - var(--closer-op))));
  transition: opacity 0.1s linear, transform 0.1s linear;
}
.ix-twoways-cta > .btn {
  pointer-events: auto;
}
/* Below 400 the .btn's default 16/40 padding + 0.40em tracking pushes
   the polygon past the viewport. Shrink the inner button. */
@media (max-width: 400px) {
  .ix-twoways-cta > .btn {
    padding: 12px 22px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }
}

/* ── Card sequence — 3 cards that rise up one at a time into the
   same slot as the locked (capped) portal. Each card matches the
   portal's final width/height exactly. Z-index layers them so
   each later card covers the earlier one as it rises into place. */
.ix-twoways-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.ix-twoways-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--portal-w-end);
  height: var(--portal-h-end);
  border-radius: var(--portal-r-end);
  overflow: hidden;
  background: #06091c;
  /* Dark drop-shadow removed (was leaking onto the white bg
     during the cross-section fade). Only the soft gold halo
     stays so the cards still have presence on the dark phase. */
  box-shadow: 0 0 60px rgba(236, 199, 119, 0.10);
  border: 1.5px solid rgba(236, 199, 119, 0.4);
  /* Default position: centered + pushed BELOW the viewport (100vh
     translation below the portal slot). As --cardN-prog moves 0→1,
     the card slides up into the slot. */
  transform: translate(-50%, calc(-50% + (1 - var(--this-prog, 0)) * 110vh));
  will-change: transform;
  transition: transform 0.1s linear;
}
.ix-twoways-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop to the TOP of the image so the card shows the website's
     header / hero region only, regardless of how tall the source
     screenshot is. Works for both full-homepage and header-only
     assets — if a real header crop is dropped in later, this
     becomes a no-op. */
  object-position: top center;
  display: block;
}
/* Per-card progress wiring — each card reads its OWN scroll var. */
.ix-twoways-card[data-card="1"] {
  z-index: 1;
  --this-prog: var(--card1-prog, 0);
}
.ix-twoways-card[data-card="2"] {
  z-index: 2;
  --this-prog: var(--card2-prog, 0);
}
.ix-twoways-card[data-card="3"] {
  z-index: 3;
  --this-prog: var(--card3-prog, 0);
}
.ix-twoways-card[data-card="4"] {
  z-index: 4;
  --this-prog: var(--card4-prog, 0);
}
.ix-twoways-card[data-card="5"] {
  z-index: 5;
  --this-prog: var(--card5-prog, 0);
}
.ix-twoways-card[data-card="6"] {
  z-index: 6;
  --this-prog: var(--card6-prog, 0);
}

/* ── Responsive: portal-content widths must stay inside the portal
   (which is 88vw wide at the end of its expansion). The default
   headline-wrap and content are 92vw — those overflow the portal
   edges on smaller viewports. ── */
@media (max-width: 1024px) {
  .ix-twoways-headline-wrap { width: min(82vw, 900px); }
  .ix-twoways-content       { width: min(82vw, 720px); }
  /* Hide the headline + copy as the first card rises so the header
     screenshots own the frame. */
  .ix-twoways-headline-wrap,
  .ix-twoways-content {
    opacity: calc(1 - var(--card1-prog, 0));
  }
}

/* Below 1500 the portal-sized cards (88vw × 78vh) are taller than
   the natural header image (1446×820), so `object-fit: cover` was
   cropping the image's left/right edges. Override the card height
   to match the image aspect — image fills the card cleanly with
   no cropping. Portal itself stays its original taller shape so
   the copy fits inside during the pre-card phase. */
@media (max-width: 1500px) {
  .ix-twoways-card {
    height: calc(var(--portal-w-end) * 820 / 1446);
  }
}

/* Below 1500, once the first card rises, fade out the portal frame +
   bg image entirely so only the header screenshot is visible — the
   surrounding gold portal and dark portal background were competing
   with the landscape header at smaller viewports. */
@media (max-width: 1500px) {
  .ix-twoways-portal {
    opacity: calc(1 - var(--card1-prog, 0));
  }
}
@media (max-width: 768px) {
  .ix-twoways-stage {
    --portal-w-start: clamp(240px, 70vw, 360px);
    --portal-h-start: clamp(320px, 90vw, 480px);
  }
  .ix-twoways-headline {
    font-size: clamp(
      calc(26px * var(--hl-scale)),
      calc(7.2vw * var(--hl-scale)),
      calc(44px * var(--hl-scale))
    );
  }
  /* Headline + content same width — both 76vw so they share the
     same horizontal column with proper side padding inside the portal. */
  .ix-twoways-headline-wrap { width: min(76vw, 500px); }
  .ix-twoways-content       { width: min(76vw, 500px); }
  /* Once the card sequence starts rising on mobile, fade the
     headline + copy out so the header screenshots own the frame. */
  .ix-twoways-headline-wrap,
  .ix-twoways-content {
    opacity: calc(1 - var(--card1-prog, 0));
  }
  .ix-twoways-para {
    font-size: clamp(13px, 3.4vw, 16px);
    line-height: 1.5;
  }
  .ix-twoways-closer {
    font-size: clamp(16px, 4vw, 22px);
  }
}

/* ── Reduced motion: collapse the pin, show portal expanded + all copy ── */
@media (prefers-reduced-motion: reduce) {
  .ix-twoways-stage {
    height: auto;
    --expand: 1;
    --p1-op: 1;
    --p2-op: 1;
    --closer-op: 1;
    --copy-op: 1;
    --card1-prog: 1;
    --card2-prog: 1;
    --card3-prog: 1;
    --card4-prog: 1;
    --card5-prog: 1;
    --card6-prog: 1;
  }
  .ix-twoways-pin { position: static; height: auto; padding: 80px 24px; }
  .ix-twoways-portal { display: none; }
  .ix-twoways-bg { display: none; }
  /* Cards stack vertically under the copy in reduced-motion mode. */
  .ix-twoways-cards {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
  }
  .ix-twoways-card {
    position: static;
    transform: none;
    width: min(92vw, 800px);
    height: auto;
    aspect-ratio: var(--portal-w-end, 1200) / var(--portal-h-end, 720);
  }
  .ix-twoways-headline-wrap,
  .ix-twoways-content {
    position: relative;
    inset: auto;
    transform: none;
    left: auto;
    top: auto;
    margin: 0 auto;
  }
  .ix-twoways-content { margin-top: 48px; }
}

/* ================================================================
   PHASE JOURNEY — Sticky-pinned scroll-driven phase showcase.
   Stage is 400vh tall. Inner pin holds the layout at 100vh while
   scroll progress (0→1) maps to the active phase (0..3). Phase
   panels and background images cross-fade between active states.
================================================================ */
.ix-phasejourney {
  --rail-w: 120px;
  --content-pad: clamp(40px, 6vw, 96px);
  /* Variables driven by JS — initialized to "hidden" so the
     overview doesn't flash visible before the JS scroll handler
     fires. Overview now fades IN as the user scrolls toward the
     center of the overview act, then fades out into the phases. */
  --overview-op: 0;     /* opacity 0 → 1 (reveal) → 0 (fade-out) */
  --overview-y: 30px;   /* starts 30px below, rises to 0, exits at -30 */
  --overview-scale: 0.96; /* 0.96 → 1 → 0.92                         */
  --phases-op: 0;       /* rail + content opacity (0 → 1 → 0)     */
  --phases-y: 30px;     /* rail + content translateY for slide-up */
  --closer-op: 0;       /* closer act opacity (0 → 1)             */
  --closer-y: 30px;     /* closer translateY for slide-up         */

  position: relative;
  /* 1500vh = 200vh overview + (Phase 01 200 + Phase 02 600 + Phase 03 200
     + Phase 04 200) + 100vh closer. Phase 02 carries 3x scroll budget
     so its deep-dive (Signature Style + Messaging Manifesto sample
     sections) can translate vertically as the user scrolls. Keep this
     in sync with PHASE_VHS in the phase-journey JS. */
  height: 1500vh;
  /* Background INTERPOLATES from white (matching comparison's
     final state) at scroll-in to the section's natural dark
     #04060f as --bg-prog-2 ramps 0 → 1. Locks step with the
     comparison section above so the boundary between them
     stays invisible during the white → dark fade. */
  background-color: color-mix(in srgb,
    #FFFFFF calc((1 - var(--bg-prog-2, 0)) * 100%),
    #04060f calc(var(--bg-prog-2, 0) * 100%));
  transition: background-color 60ms linear;
}

.ix-phasejourney-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr 1fr;
  overflow: hidden;
}

/* Background image stage — sits behind everything, full bleed */
.ix-phasejourney-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ix-phasejourney-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Active phase image opacity scales with phases-op so it bleeds in
   with the rail and content as the overview fades out. All phases
   use real photographs at full strength — the ::after dark fade
   keeps the text legible. */
.ix-phasejourney-image.is-active { opacity: var(--phases-op, 1); }

/* Placeholder gradient backgrounds per phase. Each phase has its
   own atmospheric tone. Replace with real images later. */
/* Real photo backgrounds for each phase. Cover-fit, centered. */
/* Phases 1 and 3 use videos (set via <video> child); 2 and 4 use a
   static cover-fit photo. */
.ix-phasejourney-image[data-phase="1"] { background: #000; }
.ix-phasejourney-image[data-phase="2"] { background: url('images/expressbg.jpg') center / cover no-repeat; }
.ix-phasejourney-image[data-phase="3"] { background: #000; }
.ix-phasejourney-image[data-phase="4"] { background: url('images/evolvebg.png')  center / cover no-repeat; }
.ix-phasejourney-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* Dark fade over every phase image so the copy stays legible.
   Strong dark on the left where the rail + content live, tapering
   to clear on the right where the photo shines. Subtle vertical
   anchor at top + bottom for additional contrast. */
.ix-phasejourney-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Horizontal vignette: deep dark across the left where the rail
     + headline + copy live, gradually clearing toward the right
     so the photo shows. Less heavy than before — less opaque
     left band, longer mid-fade. */
  background:
    linear-gradient(90deg,
      rgba(4, 6, 15, 0.96) 0%,
      rgba(4, 6, 15, 0.90) 22%,
      rgba(4, 6, 15, 0.65) 42%,
      rgba(4, 6, 15, 0.32) 60%,
      rgba(4, 6, 15, 0.10) 78%,
      rgba(4, 6, 15, 0) 92%),
    linear-gradient(180deg,
      rgba(4, 6, 15, 0.15) 0%,
      rgba(4, 6, 15, 0) 30%,
      rgba(4, 6, 15, 0) 70%,
      rgba(4, 6, 15, 0.30) 100%);
}

/* ── Act 0: Overview title card. Centered hero that fades out
   into Phase 01 as the user scrolls. Sits ABOVE the rail and
   content (z-index 5) so it can take over the stage initially. */
.ix-phasejourney-overview {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--content-pad);
  opacity: var(--overview-op);
  transform: translateY(var(--overview-y)) scale(var(--overview-scale));
  transform-origin: center;
  pointer-events: none;
  transition:
    opacity 100ms linear,
    transform 100ms linear;
}
.ix-phasejourney-overview .ix-eyebrow {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  /* Override design-system color in case the token doesn't resolve */
  color: #ECC777 !important;
  -webkit-text-fill-color: #ECC777;
  background: none !important;
}
.ix-phasejourney-overview-title {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-1, #FEF7DF);
  max-width: 1100px;
  text-wrap: balance;
}
.ix-phasejourney-overview-line1 {
  display: block;
}
.ix-phasejourney-overview-pop {
  display: inline-block;
  position: relative;
}
.ix-phasejourney-overview-title b {
  font-weight: 700;
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-phasejourney-overview-body {
  /* Wider so the long "Our Influex Proven Process..." paragraph
     lays out on 2 lines instead of 3. text-wrap: balance keeps
     the two lines roughly even rather than top-heavy. */
  max-width: 1200px;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--fg-2, rgba(254, 247, 223, 0.72));
  text-wrap: balance;
}
.ix-phasejourney-overview-body p {
  margin: 0 0 14px;
}
.ix-phasejourney-overview-body p:last-child { margin-bottom: 0; }

/* ── AI² formula — the thesis between title and body. ───────────── */
.ix-phasejourney-formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 24px);
  /* Reduced top margin so AI² sits tighter to the headline above. */
  margin: clamp(12px, 1.6vh, 24px) 0 clamp(28px, 4vh, 56px);
  max-width: 920px;
  width: 100%;
  text-align: center;
}
/* Pink → lavender gradient used by AI², "Accelerated Influex", and
   the × / = operators in the equation. */
.ix-phasejourney-formula {
  --grad-formula: linear-gradient(90deg, #E5A4B0 0%, #C2A4E0 100%);
}
.ix-phasejourney-formula-rule {
  width: 120px;
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(217, 185, 125, 0.6),
    transparent);
}
.ix-phasejourney-formula-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 9vw, 140px);
  line-height: 1;
  letter-spacing: -0.025em;
  /* AI² in the pink → lavender gradient. */
  background: var(--grad-formula);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-phasejourney-formula-mark sup {
  font-size: 0.55em;
  vertical-align: super;
  /* Tighten the superscript so it hugs the AI. */
  margin-left: 0.04em;
}
.ix-phasejourney-formula-eq {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.4;
  color: rgba(254, 247, 223, 0.92);
  letter-spacing: -0.005em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
}
.ix-phasejourney-formula-op {
  /* The × and = operators tinted with the pink → lavender gradient. */
  font-weight: 700;
  background: var(--grad-formula);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-phasejourney-formula-result {
  font-weight: 700;
  background: var(--grad-formula);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Reveal cascade — AI² fades in first, then the equation line, then
   the rules brighten. Hooked to the existing .is-revealed flow. */
.ix-phasejourney-formula-rule,
.ix-phasejourney-formula-mark,
.ix-phasejourney-formula-eq {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Formula reveals start AFTER the "Now AI-Accelerated." pop finishes
   its 1200ms transition (delay 1400 + 1200 = ~2600ms). */
.ix-phasejourney-overview.is-revealed .ix-phasejourney-formula-rule { opacity: 1; transform: none; transition-delay: 2.7s; }
.ix-phasejourney-overview.is-revealed .ix-phasejourney-formula-mark { opacity: 1; transform: none; transition-delay: 2.9s; }
.ix-phasejourney-overview.is-revealed .ix-phasejourney-formula-eq   { opacity: 1; transform: none; transition-delay: 3.2s; }

@media (max-width: 720px) {
  .ix-phasejourney-formula-eq { font-size: clamp(15px, 4vw, 20px); }
  .ix-phasejourney-formula-mark { font-size: clamp(64px, 14vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-phasejourney-formula-rule,
  .ix-phasejourney-formula-mark,
  .ix-phasejourney-formula-eq {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Cinematic intro: staggered reveal of the overview ──
   Initial state: every element hidden + slightly translated.
   On .is-revealed: cascade with delays so each part lands in turn.
   Pop ("Now AI-Accelerated.") gets a special blur-to-focus
   treatment plus an animated underline. */
.ix-phasejourney-overview-eyebrow,
.ix-phasejourney-overview-line1,
.ix-phasejourney-overview-body p {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1100ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1100ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-overview-pop {
  opacity: 0;
  transform: translateY(24px) scale(1.08);
  filter: blur(20px);
  transition:
    opacity 1200ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1200ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    filter 1200ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}

.ix-phasejourney-overview.is-revealed .ix-phasejourney-overview-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}
.ix-phasejourney-overview.is-revealed .ix-phasejourney-overview-line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 700ms;
}
.ix-phasejourney-overview.is-revealed .ix-phasejourney-overview-pop {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 1400ms;
}
.ix-phasejourney-overview.is-revealed .ix-phasejourney-overview-body p:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 4500ms;
}
.ix-phasejourney-overview.is-revealed .ix-phasejourney-overview-body p:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 4800ms;
}

/* Animated underline beneath "Now AI-Accelerated." — draws after
   the pop settles into focus. */
.ix-phasejourney-overview-underline {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 199, 119, 0.85) 30%,
    rgba(189, 166, 216, 0.85) 70%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(236, 199, 119, 0.4);
  transform: translateX(-50%);
  transition: width 1100ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-overview.is-revealed .ix-phasejourney-overview-underline {
  width: 100%;
  transition-delay: 2600ms;
}

/* Scroll hint — pulses at the bottom of the overview to invite
   the user to advance. Appears mid-intro so it's visible before
   the body copy finishes settling. Fades out naturally with the
   overview as the user scrolls (inherits parent opacity). */
.ix-phasejourney-scrollhint {
  position: absolute;
  bottom: clamp(36px, 5vh, 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-overview.is-revealed .ix-phasejourney-scrollhint {
  opacity: 0.8;
  transition-delay: 1800ms;
}
.ix-phasejourney-scrollhint-label {
  font-family: var(--font-micro);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.7);
}
.ix-phasejourney-scrollhint-arrow {
  width: 22px;
  height: 22px;
  color: rgba(236, 199, 119, 0.85);
  animation: ix-scrollhint-bounce 1.8s ease-in-out infinite;
  animation-delay: 2.6s;
}
@keyframes ix-scrollhint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* Reduced motion: skip the elaborate intro. Show everything at rest. */
@media (prefers-reduced-motion: reduce) {
  .ix-phasejourney-overview-eyebrow,
  .ix-phasejourney-overview-line1,
  .ix-phasejourney-overview-pop,
  .ix-phasejourney-overview-body p {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .ix-phasejourney-overview-underline {
    width: 100% !important;
    transition: none !important;
  }
  .ix-phasejourney-scrollhint { opacity: 0.7 !important; }
  .ix-phasejourney-scrollhint-arrow { animation: none !important; }
}

/* ── Act 5: Closer / coda. Fades in as the phase journey fades out.
   Centered, bookends the overview act on the same canvas. */
.ix-phasejourney-closer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--content-pad);
  gap: clamp(20px, 2.4vw, 32px);
  opacity: var(--closer-op);
  transform: translateY(var(--closer-y));
  pointer-events: none;
  transition: opacity 100ms linear, transform 100ms linear;
}
.ix-phasejourney-closer-rule {
  /* Extended much wider so the rules frame the larger lead copy
     with substantial breathing room on each side. */
  width: clamp(260px, 50vw, 720px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(236, 199, 119, 0.55),
    rgba(189, 166, 216, 0.55),
    transparent);
  box-shadow: 0 0 12px rgba(236, 199, 119, 0.25);
}
.ix-phasejourney-closer-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fg-2, rgba(254, 247, 223, 0.78));
  max-width: 800px;
  text-wrap: balance;
}
.ix-phasejourney-closer-line--lead {
  /* Bigger now that the two follow-up lines are gone — the lead
     statement carries the whole closer act. */
  font-size: clamp(38px, 3.6vw, 64px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--fg-1, #FEF7DF);
  max-width: 1200px;
}
.ix-phasejourney-closer-line--lead span {
  display: block;
}
.ix-phasejourney-closer-line--lead b {
  display: block;
  font-weight: 700;
  /* Authority gradient sweep — same animated treatment used on
     the hero h1 and other accent lines on the page. */
  background-image: linear-gradient(90deg,
    #F2E8D8  0%,
    #D9B97D 18%,
    #C98A73 38%,
    #BDA6D8 50%,
    #C98A73 62%,
    #D9B97D 82%,
    #F2E8D8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: grad-sweep 12s linear infinite;
}
.ix-phasejourney-closer-line--mantra {
  font-style: italic;
  color: rgba(236, 199, 119, 0.85);
  font-size: clamp(16px, 1.3vw, 20px);
}

/* ── Left rail — vertical phase nav, persistent.
   Fades in as overview fades out. */
.ix-phasejourney-rail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  padding: 80px 0 80px 40px;
  opacity: var(--phases-op);
  transform: translateY(var(--phases-y));
  transition: opacity 120ms linear, transform 120ms linear;
}
.ix-phasejourney-rail-line {
  position: absolute;
  left: 52px;
  top: 80px;
  bottom: 80px;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
}
.ix-phasejourney-rail-progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--rail-progress, 0%);
  background: linear-gradient(to bottom, rgba(236, 199, 119, 0.2), rgba(236, 199, 119, 0.95));
  transition: height 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  box-shadow: 0 0 12px rgba(236, 199, 119, 0.3);
}
.ix-phasejourney-tick {
  position: relative;
  background: none;
  border: 0;
  padding: 0 0 0 36px;
  cursor: pointer;
  text-align: left;
  color: var(--fg-3, rgba(254, 247, 223, 0.45));
  transition: color 400ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  font-family: var(--font-micro);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ix-phasejourney-tick::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%);
  transition: background 400ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 400ms;
}
.ix-phasejourney-tick.is-active { color: #ECC777; }
.ix-phasejourney-tick.is-active::before {
  background: #ECC777;
  box-shadow: 0 0 14px rgba(236, 199, 119, 0.6);
}
.ix-phasejourney-tick:hover { color: rgba(254, 247, 223, 0.8); }
.ix-phasejourney-tick.is-active:hover { color: #ECC777; }
.ix-phasejourney-tick-num {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
}
.ix-phasejourney-tick-name {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  text-transform: none;
}

/* ── Center content area — panels cross-fade between phases.
   Each panel has TWO stages that cross-fade based on sub-progress.
   Panels span the full content area (and the right image column too)
   so stage 2 can use 2-column lists across more horizontal space. */
.ix-phasejourney-content {
  position: relative;
  z-index: 1;
  grid-column: 2 / -1; /* span content + image columns */
  padding: 0;
  opacity: var(--phases-op);
  transform: translateY(var(--phases-y));
  transition: opacity 120ms linear, transform 120ms linear;
}
.ix-phasejourney-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}
.ix-phasejourney-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Stages — both occupy the panel; cross-fade based on .is-stage2 */
.ix-phasejourney-stage1,
.ix-phasejourney-stage2 {
  position: absolute;
  inset: 0;
  padding: var(--content-pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    opacity 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-stage1 {
  /* Vertically centered hero block; body sits below with breathing room. */
  justify-content: center;
  opacity: 1;
  transform: translateY(0);
  max-width: 720px;
}
.ix-phasejourney-stage1-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ix-phasejourney-stage1 .ix-phasejourney-body {
  margin-top: 50px;
}
.ix-phasejourney-stage2 {
  justify-content: center;
}
.ix-phasejourney-stage2 {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  justify-content: center;
}
.ix-phasejourney-panel.is-stage2 .ix-phasejourney-stage1 {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}
.ix-phasejourney-panel.is-stage2 .ix-phasejourney-stage2 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ix-phasejourney-eyebrow {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ECC777;
}
.ix-phasejourney-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--fg-1, #FEF7DF);
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.ix-phasejourney-lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-1, #FEF7DF);
}
.ix-phasejourney-timing {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 14px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
  padding: 10px 20px;
  font-family: var(--font-micro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-radius: 999px;
  background: transparent;
}
/* 1px gradient OUTLINE only (no fill) — uses the mask technique
   so the gradient is restricted to the border ring. */
.ix-phasejourney-timing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.ix-phasejourney-timing-old {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.ix-phasejourney-timing-arrow { color: rgba(236, 199, 119, 0.5); }
.ix-phasejourney-timing-new {
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 50%, #C98A73 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ix-phasejourney-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--fg-2, rgba(254, 247, 223, 0.72));
  max-width: 540px;
}
/* Inline gold-bold highlight inside body copy (e.g., SoulBrand.ai
   product mentions). Solid brand gold, no gradient, no animation. */
.ix-phasejourney-body .ix-phasejourney-gold {
  font-weight: 700;
  color: #D9B97D;
}
/* ── Stage 2: deep-dive content as cards. Each group = card with
   an icon on top, a heading, and an X-mark bullet list. ── */
.ix-phasejourney-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  margin-top: 12px;
}
.ix-phasejourney-groups--single { grid-template-columns: 1fr; max-width: 720px; }

.ix-phasejourney-group {
  position: relative;
  padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px);
  border-radius: 16px;
  background: rgba(14, 16, 26, 0.72);
  border: 1px solid rgba(236, 199, 119, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(236, 199, 119, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Header: icon + heading inline (saves vertical space) */
.ix-phasejourney-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ix-phasejourney-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #ECC777;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(236, 199, 119, 0.35));
}
.ix-phasejourney-group-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ix-phasejourney-group h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  /* Authority gradient (gold → copper → mauve) */
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-phasejourney-group-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ix-phasejourney-group-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
/* X-Factor mark as bullet — uses the brand X via mask-image so it
   gets a solid gold fill from background-color. */
.ix-phasejourney-group-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  background-image: url("images/x-bullet-gold.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 6px rgba(236, 199, 119, 0.4));
}

.ix-phasejourney-calls {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(236, 199, 119, 0.18);
  /* spans the full content width — same as the .ix-phasejourney-groups
     grid above, so it doesn't feel cramped on the left only. */
}
.ix-phasejourney-footnote {
  margin: clamp(24px, 3.6vh, 48px) 0 0;
  padding: clamp(14px, 2vh, 22px) clamp(20px, 2.5vw, 32px);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #FEF7DF;
  font-style: normal;
  text-align: center;
  text-wrap: balance;
  /* Glowing glass bar — soft champagne/lavender tint distinct from
     the dark gold-bordered call cards above. */
  background: linear-gradient(135deg,
    rgba(236, 199, 119, 0.10) 0%,
    rgba(189, 166, 216, 0.10) 100%);
  border: 1px solid rgba(236, 199, 119, 0.38);
  border-radius: 14px;
  box-shadow:
    0 0 28px rgba(236, 199, 119, 0.22),
    0 0 60px rgba(189, 166, 216, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------
   Phase 02 deep-dive surface. Replaces the old bullet groups with
   a long vertical scroll of sample sections (Signature Style +
   Messaging Manifesto). The outer .ix-phasejourney-deep crops to
   the visible stage area; the inner .ix-phasejourney-deep-inner is
   translated upward via --deep-y (set by the phase-journey JS) as
   the user scrolls through Phase 02's expanded scroll budget.
--------------------------------------------------------------- */
.ix-phasejourney-stage2--deep {
  /* Equal horizontal padding instead of right:0, so the inner
     content has room to center within the panel. */
  padding-left: clamp(20px, 3vw, 64px);
  padding-right: clamp(20px, 3vw, 64px);
  /* Extra top padding so the content clears the sticky nav header. */
  padding-top: calc(var(--content-pad) + clamp(56px, 8vh, 96px));
  /* Zero bottom padding so the deep window can extend all the way
     to the bottom edge of the pin — the mask gradient handles the
     transition into the next section. */
  padding-bottom: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.ix-phasejourney-stage2--deep > .ix-phasejourney-eyebrow,
.ix-phasejourney-stage2--deep > .ix-phasejourney-deep {
  width: 100%;
  max-width: 1200px;
}
/* Subtle dark wash behind the deep-dive samples — enough to hold
   the artwork in front, but the existing Phase 02 background still
   reads through. */
.ix-phasejourney-stage2--deep::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 55%,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.70) 60%,
      rgba(0, 0, 0, 0.50) 100%),
    rgba(0, 0, 0, 0.60);
  pointer-events: none;
  z-index: 0;
}
.ix-phasejourney-stage2--deep > * { position: relative; z-index: 1; }
.ix-phasejourney-deep {
  position: relative;
  width: 100%;
  /* Fills the remaining stage2 height (after the eyebrow + section
     padding) so the deep-dive reaches all the way to the bottom of
     the pin — no container-shaped empty space below. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 8px;
  /* Mask: long, gradual fade across the bottom ~18% of the window
     so the bottom edge dissolves smoothly into the next section
     instead of cutting on a visible line. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 82%,
    rgba(0, 0, 0, 0.65) 92%,
    rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg,
    #000 0%,
    #000 82%,
    rgba(0, 0, 0, 0.65) 92%,
    rgba(0, 0, 0, 0) 100%);
}
.ix-phasejourney-deep-inner {
  position: absolute;
  inset: 0 8px auto 0;
  display: flex;
  flex-direction: column;
  /* Larger gap between sections so each category gets clear visual
     separation as the deep-dive translates past. */
  gap: clamp(28px, 4vh, 56px);
  /* Padding-bottom keeps the last child ("Train AI In Your Brand
     Voice" closer) above the mask's fade zone when the content is
     fully scrolled to its end. */
  padding-bottom: clamp(120px, 24vh, 240px);
  transform: translateY(var(--deep-y, 0px));
  will-change: transform;
  /* Smooth out RAF jitter between scroll samples. */
  transition: transform 60ms linear;
}
.ix-phasejourney-deep-title {
  margin: clamp(6px, 1vh, 12px) 0 clamp(2px, 0.6vh, 8px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-phasejourney-deep-title span {
  font-weight: 400;
}
.ix-phasejourney-deep-title:not(:first-child) {
  margin-top: clamp(28px, 4vh, 56px);
  padding-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid rgba(236, 199, 119, 0.22);
}
.ix-phasejourney-deep-closer {
  margin: clamp(20px, 3vh, 36px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-align: center;
}
.ix-phasejourney-deep-sub {
  margin: 0;
}
.ix-phasejourney-deep-sub-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.95);
}
.ix-phasejourney-deep-sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #ecc777;
}
.ix-phasejourney-deep-sub-icon svg {
  width: 100%;
  height: 100%;
}
/* Brand X icon — renders the Influex X-Factor SVG as a gold-tinted
   shape using mask-image, so it can be color-themed without
   editing the source. */
.ix-phasejourney-deep-sub-icon--brand {
  background: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
          mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
}
.ix-phasejourney-deep-sub-name {
  white-space: nowrap;
  background: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 45%, #C9A24A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Decorative rule that stretches from the title to the end of the
   column, matching the reference's "ICONIC LOGO ─────" treatment. */
.ix-phasejourney-deep-sub-title::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg,
    rgba(236, 199, 119, 0.45) 0%,
    rgba(236, 199, 119, 0.12) 70%,
    transparent 100%);
}
.ix-phasejourney-deep-samples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 14px;
  /* Cap sample row width so each card stays compact even on
     ultra-wide viewports — keeps multiple sections visible at once
     in the deep-dive scroll window. */
  max-width: 1140px;
}
.ix-phasejourney-deep-samples--two { grid-template-columns: repeat(2, 1fr); max-width: 1020px; }
.ix-phasejourney-deep-samples--text { grid-template-columns: 1fr; max-width: 1140px; }
.ix-phasejourney-deep-sample {
  position: relative;
  /* No fixed aspect-ratio, no background box — image renders at its
     natural ratio inside the grid cell. */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.7);
}
.ix-phasejourney-deep-sample img {
  display: block;
  width: 102%;
  margin: -1%;
  height: auto;
  max-width: none;
  cursor: zoom-in;
  transition: transform 320ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-deep-sample:hover img { transform: scale(1.02); }

/* ── Sample lightbox ────────────────────────────────────────────── */
.ix-sample-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vh, 80px) clamp(60px, 8vw, 120px);
}
.ix-sample-lightbox.is-open { display: flex; }
.ix-sample-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ix-sample-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.ix-sample-lightbox-close,
.ix-sample-lightbox-prev,
.ix-sample-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(236, 199, 119, 0.55);
  color: #ECC777;
  cursor: pointer;
  padding: 0;
  /* Above the image stage so the arrows aren't covered by the image. */
  z-index: 2;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.ix-sample-lightbox-close:hover,
.ix-sample-lightbox-prev:hover,
.ix-sample-lightbox-next:hover {
  background: rgba(236, 199, 119, 0.18);
  border-color: rgba(236, 199, 119, 0.7);
}
.ix-sample-lightbox-close { top: clamp(16px, 3vh, 28px); right: clamp(16px, 3vw, 28px); }
.ix-sample-lightbox-prev  { top: 50%; left:  clamp(8px, 2vw, 24px); transform: translateY(-50%); }
.ix-sample-lightbox-next  { top: 50%; right: clamp(8px, 2vw, 24px); transform: translateY(-50%); }
.ix-sample-lightbox-close svg,
.ix-sample-lightbox-prev svg,
.ix-sample-lightbox-next svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .ix-sample-lightbox { padding: 64px 12px; }
  .ix-sample-lightbox-close,
  .ix-sample-lightbox-prev,
  .ix-sample-lightbox-next { width: 40px; height: 40px; }
  .ix-sample-lightbox-prev { left: 8px; }
  .ix-sample-lightbox-next { right: 8px; }
}

/* Captioned variant — used by the Header/Footer section. The
   caption sits above the image. The image lives in its own
   overflow:hidden wrapper so the caption doesn't get clipped by
   the inner negative-margin trick on <img>. */
.ix-phasejourney-deep-sample--captioned {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.ix-phasejourney-deep-sample-caption {
  font-family: var(--font-micro);
  font-weight: 400;
  font-size: clamp(7px, 0.5vw, 9px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.75);
}
.ix-phasejourney-deep-sample-img {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.7);
}
/* Placeholder treatment (empty div, no inner <img>) — dashed border
   + faint X mark in the center. Used by the Messaging Manifesto
   blocks which don't have real artwork yet. */
.ix-phasejourney-deep-sample:not(:has(img)) {
  aspect-ratio: 16 / 10;
  border: 1px dashed rgba(236, 199, 119, 0.25);
  background:
    linear-gradient(135deg,
      rgba(236, 199, 119, 0.06) 0%,
      rgba(189, 166, 216, 0.06) 100%),
    rgba(14, 16, 26, 0.55);
}
.ix-phasejourney-deep-sample:not(:has(img))::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22%; height: 22%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(236, 199, 119, 0.22), rgba(189, 166, 216, 0.22));
  -webkit-mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
          mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
  pointer-events: none;
}
.ix-phasejourney-deep-sample--wide:not(:has(img)) {
  aspect-ratio: 6 / 1;
}

/* ---------------------------------------------------------------
   Signature Style showcase — horizontal reel of sample work cards
   shown below the Phase 02 bullet groups. Each card is a placeholder
   for now; swap `.ix-phasejourney-showcase-frame` backgrounds with
   real client artwork as assets become available.
--------------------------------------------------------------- */
.ix-phasejourney-showcase {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(236, 199, 119, 0.18);
}
.ix-phasejourney-showcase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}
.ix-phasejourney-showcase-label {
  margin: 0;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.7);
}
.ix-phasejourney-showcase-hint {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(236, 199, 119, 0.55);
}
.ix-phasejourney-showcase-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 199, 119, 0.35) transparent;
}
.ix-phasejourney-showcase-track::-webkit-scrollbar {
  height: 6px;
}
.ix-phasejourney-showcase-track::-webkit-scrollbar-thumb {
  background: rgba(236, 199, 119, 0.35);
  border-radius: 999px;
}
.ix-phasejourney-showcase-track::-webkit-scrollbar-track {
  background: transparent;
}
.ix-phasejourney-showcase-card {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 280px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-showcase-card:hover { transform: translateY(-3px); }
.ix-phasejourney-showcase-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg,
      rgba(236, 199, 119, 0.06) 0%,
      rgba(189, 166, 216, 0.06) 100%),
    rgba(14, 16, 26, 0.6);
  border: 1px dashed rgba(236, 199, 119, 0.28);
  border-radius: 8px;
  box-shadow:
    0 6px 14px -6px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(236, 199, 119, 0.08);
  position: relative;
}
/* Subtle X-mark in the center of each placeholder to signal brand. */
.ix-phasejourney-showcase-frame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24%;
  height: 24%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(236, 199, 119, 0.2), rgba(189, 166, 216, 0.2));
  -webkit-mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
          mask: url("Influex Design System/assets/X-Factor.svg") center / contain no-repeat;
  pointer-events: none;
}
.ix-phasejourney-showcase-name {
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: -0.005em;
  color: rgba(254, 247, 223, 0.9);
}
.ix-phasejourney-calls h6 {
  margin: 0 0 14px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.6);
}
.ix-phasejourney-calls ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1vw, 14px);
}
/* Each call is a horizontal glass card: image left at NATURAL aspect
   ratio (fixed height, auto width), 3-line copy on the right
   (name / time / role). */
.ix-phasejourney-calls li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(14, 16, 26, 0.6);
  border: 1px solid rgba(236, 199, 119, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 10px 22px -12px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(236, 199, 119, 0.06);
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.88);
  min-width: 0;
  cursor: default;
  transition:
    transform 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    background 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-calls li:hover {
  transform: translateY(-3px);
  background: rgba(24, 26, 38, 0.82);
  border-color: rgba(236, 199, 119, 0.5);
  box-shadow:
    0 22px 44px -18px rgba(0, 0, 0, 0.9),
    0 0 28px rgba(236, 199, 119, 0.18),
    inset 0 1px 0 rgba(236, 199, 119, 0.16);
}
.ix-phasejourney-calls-img {
  grid-column: 1;
  grid-row: 1 / 4;
  display: block;
  height: 110px;
  width: auto;
  max-width: 140px;        /* cap so wide landscapes don't dominate */
  object-fit: cover;
  background-color: rgba(14, 16, 26, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(236, 199, 119, 0.22);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.65);
  flex-shrink: 0;
  transform-origin: center;
  transition:
    transform 500ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-phasejourney-calls li:hover .ix-phasejourney-calls-img {
  transform: scale(1.06);
  border-color: rgba(236, 199, 119, 0.55);
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .ix-phasejourney-calls li,
  .ix-phasejourney-calls-img { transition: none; }
  .ix-phasejourney-calls li:hover { transform: none; }
  .ix-phasejourney-calls li:hover .ix-phasejourney-calls-img { transform: none; }
}
.ix-phasejourney-calls-name {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.25;
  color: var(--fg-1, #FEF7DF);
  letter-spacing: -0.005em;
  align-self: end;
  min-width: 0;
  margin-bottom: 4px;
}
.ix-phasejourney-calls-time {
  grid-column: 2;
  grid-row: 2;
  display: block;
  font-family: var(--font-micro);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.65);
  align-self: center;
  min-width: 0;
}
.ix-phasejourney-calls-role {
  grid-column: 2;
  grid-row: 3;
  display: block;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 199, 119, 0.85);
  align-self: start;
  min-width: 0;
  margin-top: 2px;
}
@media (max-width: 1100px) {
  .ix-phasejourney-calls ul { grid-template-columns: 1fr 1fr; }
  .ix-phasejourney-calls-img { height: 120px; max-width: 160px; }
}
@media (max-width: 640px) {
  .ix-phasejourney-calls ul { grid-template-columns: 1fr; }
  .ix-phasejourney-calls-img { height: 110px; max-width: 140px; }
}

.ix-phasejourney-addon {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg,
    rgba(236, 199, 119, 0.08) 0%,
    rgba(189, 166, 216, 0.06) 100%);
  border: 1px solid rgba(236, 199, 119, 0.22);
  max-width: 720px;
}
.ix-phasejourney-addon-label {
  display: block;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ECC777;
  margin-bottom: 6px;
}
.ix-phasejourney-addon p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Responsive: collapse the sticky pin and stack both stages ──
   The phase rail moves from the left edge to a horizontal sticky bar
   at the TOP of the section with a blurred dark background. All four
   phases are visible immediately (no scroll-driven fade), and both
   stages of each phase flow naturally in the page. */
@media (max-width: 900px) {
  .ix-phasejourney {
    --rail-w: 80px;
    --content-pad: 32px;
    --overview-op: 1;
    --overview-y: 0px;
    --overview-scale: 1;
    --phases-op: 1;
    --phases-y: 0px;
    --closer-op: 1;
    --closer-y: 0px;
    height: auto;
  }
  .ix-phasejourney-pin {
    position: static;
    height: auto;
    /* Switch from grid to block — the single-column grid was breaking
       sticky positioning on the rail child. Also drop overflow:hidden
       which kills sticky on descendants. */
    display: block;
    overflow: visible;
  }
  .ix-phasejourney-rail {
    position: sticky !important;
    /* Stick below the fixed nav (~64px tall on mobile) so the phase
       bar isn't hidden behind the INFLUEX logo header. */
    top: 64px !important;
  }
  .ix-phasejourney-overview,
  .ix-phasejourney-closer {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    padding: 80px 24px 60px;
    transform: none;
    opacity: 1;
  }
  /* Tighten the gap between the last phase panel and the closer. */
  .ix-phasejourney-closer { padding-top: 8px; }
  .ix-phasejourney-panel:last-of-type { margin-bottom: 8px; }
  /* Sticky horizontal phase bar at the top of the section. */
  .ix-phasejourney-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 4vw, 36px);
    padding: 18px clamp(12px, 3vw, 24px);
    margin: 0;
    transform: none;
    opacity: 1 !important;
    background: rgba(10, 10, 14, 0.72);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid rgba(236, 199, 119, 0.18);
  }
  /* The vertical line + progress bar are irrelevant in the horizontal
     bar layout — hide them so the ticks read as discrete pills. */
  .ix-phasejourney-rail-line,
  .ix-phasejourney-rail-progress { display: none; }
  .ix-phasejourney-tick {
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .ix-phasejourney-tick::before {
    position: static;
    transform: none;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
  }
  .ix-phasejourney-tick-num { font-size: 10px; letter-spacing: 0.24em; }
  .ix-phasejourney-tick-name { font-size: 12px; }
  .ix-phasejourney-content {
    grid-column: 1 / -1;
    padding: 60px 24px;
    /* Override the JS-driven inline --phases-op / --phases-y by setting
       opacity + transform directly with !important — those inline vars
       win against CSS rules otherwise and were keeping content hidden. */
    opacity: 1 !important;
    transform: none !important;
  }
  .ix-phasejourney-overview {
    opacity: 1 !important;
    transform: none !important;
  }
  .ix-phasejourney-closer {
    opacity: 1 !important;
    transform: none !important;
  }
  .ix-phasejourney-panel {
    position: relative !important;
    inset: auto !important;
    padding: 0;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 80px;
    pointer-events: auto !important;
  }
  /* Both stages flow naturally — no absolute, no opacity gate */
  .ix-phasejourney-stage1,
  .ix-phasejourney-stage2 {
    position: relative !important;
    inset: auto !important;
    padding: 0;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-width: none;
  }
  /* Desktop adds 50px margin-top on the body to space it from the
     timing pill; that gap is too tall here. */
  .ix-phasejourney-stage1 .ix-phasejourney-body { margin-top: 16px; }
  .ix-phasejourney-stage2 { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(236, 199, 119, 0.2); }
  /* Stage 2's eyebrow duplicates the one shown in stage 1 since both
     stages are now visible at the same time — hide the redundant copy. */
  .ix-phasejourney-stage2 > .ix-phasejourney-eyebrow { display: none; }
  /* Timing pill: keep it on a single line at mobile by shrinking the
     font, tightening letter-spacing, and reducing gap + padding. */
  .ix-phasejourney-timing {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.12em;
    gap: 8px;
    padding: 8px 14px;
  }
  /* Phase 02 deep-dive: at desktop it uses an overflow:hidden window
     with an absolutely-positioned inner that the JS translates. Below
     900 that absolute child collapses to 0 height because the parent
     is no longer a fixed-height flex slot. Flatten both so the deep
     content flows naturally and is fully visible. */
  .ix-phasejourney-deep {
    overflow: visible;
    flex: none;
    min-height: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ix-phasejourney-deep-inner {
    position: relative;
    inset: auto;
    transform: none !important;
    /* Drop the bottom padding that existed to keep content above the
       desktop mask fade — there's no mask here, and the padding was
       creating a big empty gap before the next phase. */
    padding-bottom: 0;
  }
  .ix-phasejourney-image { display: none; }
  /* Phase background — videos for 1/3, images for 2/4 — rendered
     full-bleed behind stage1 with a left vignette so the left-aligned
     copy stays readable. Breaks out of the section's side padding via
     negative margins so it spans the full viewport width. */
  .ix-phasejourney-stage1 {
    position: relative;
    padding: clamp(40px, 9vw, 72px) clamp(20px, 5vw, 40px) clamp(48px, 10vw, 96px) !important;
    margin: 0 calc(-1 * clamp(20px, 5vw, 24px));
    overflow: hidden;
    isolation: isolate;
    background-color: #06091c;
  }
  .ix-phasejourney-panel-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .ix-phasejourney-panel-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /* Left vignette overlay — dark on the left, fading to transparent on
     the right — keeps the eyebrow/title/lead readable over the busy
     bg without darkening the whole image. Plus a bottom fade for the
     timing pill area. */
  .ix-phasejourney-stage1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      /* Flat black darken across the whole image — baseline so the
         right side (where the left vignette fades to 0) stays legible. */
      linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      /* Left vignette — stronger on the left for the headline area. */
      linear-gradient(90deg,
        rgba(4, 6, 15, 0.88) 0%,
        rgba(4, 6, 15, 0.65) 40%,
        rgba(4, 6, 15, 0.25) 75%,
        rgba(4, 6, 15, 0) 100%),
      /* Bottom fade for the timing pill. */
      linear-gradient(180deg,
        rgba(4, 6, 15, 0) 50%,
        rgba(4, 6, 15, 0.55) 100%);
  }
  /* Phase 02's expressbg.jpg is brighter than the other phases — pump
     the flat overlay 20% darker so its copy reads consistently. */
  .ix-phasejourney-panel[data-phase="2"] .ix-phasejourney-stage1::before {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      linear-gradient(90deg,
        rgba(4, 6, 15, 0.88) 0%,
        rgba(4, 6, 15, 0.65) 40%,
        rgba(4, 6, 15, 0.25) 75%,
        rgba(4, 6, 15, 0) 100%),
      linear-gradient(180deg,
        rgba(4, 6, 15, 0) 50%,
        rgba(4, 6, 15, 0.55) 100%);
  }
}

/* Hide the per-panel bg elements on desktop — the shared
   .ix-phasejourney-stage handles the background there. */
@media (min-width: 901px) {
  .ix-phasejourney-panel-bg { display: none; }
}
/* Mobile: collapse the Extract phase's 2-up groups and 4-up call
   cards into single-column stacks. Previously these rules sat OUTSIDE
   any @media block (orphaned closing brace bug) so they applied at
   every viewport — that's why big screens were showing single
   columns. */
@media (max-width: 900px) {
  .ix-phasejourney-groups { grid-template-columns: 1fr; }
  .ix-phasejourney-calls ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-phasejourney {
    height: auto;
    --overview-op: 1;
    --overview-y: 0px;
    --overview-scale: 1;
    --phases-op: 1;
    --phases-y: 0px;
    --closer-op: 1;
    --closer-y: 0px;
  }
  .ix-phasejourney-pin { position: static; height: auto; }
  .ix-phasejourney-overview,
  .ix-phasejourney-closer {
    position: relative;
    inset: auto;
    padding: 80px 24px 60px;
    transform: none;
    grid-column: 1 / -1;
  }
  .ix-phasejourney-rail,
  .ix-phasejourney-content,
  .ix-phasejourney-panel,
  .ix-phasejourney-stage1,
  .ix-phasejourney-stage2 {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .ix-phasejourney-panel { margin-bottom: 80px; }
  .ix-phasejourney-stage2 { margin-top: 40px; }
  .ix-phasejourney-image.is-active { opacity: 0.3; }
}

/* ================================================================
   SHOWCASE — Sticky-pinned work-pillar stack between testimonials
   and trust logos. 400vh stage = 4 cards × 100vh each. Each card
   rises up from below and stacks on top of the previous as the
   user scrolls.
================================================================ */
.ix-showcase {
  --bg-op: 0;
  /* Screen overlay position — tweak these to align the screenshot
     with the white monitor area in desktopdisplay.jpg. */
  --screen-l: 32.40%;
  --screen-t: 21.60%;
  --screen-w: 35.30%;
  --screen-h: 45.40%;

  position: relative;
  height: 400vh;
  /* Pure black matches the body bg so there's no visible tone shift
     (which previously read as a faint hairline at the section seam). */
  background: #000;
  /* Overlap into the previous section by 2px to crush any subpixel
     gap between sections that might render as a faint horizontal
     line on certain viewport sizes. */
  margin-top: -2px;
}
.ix-showcase-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000;
}
.ix-showcase-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70vw 60vh at 30% 30%, rgba(236, 199, 119, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 50vh at 80% 85%, rgba(189, 166, 216, 0.10) 0%, transparent 60%);
  opacity: var(--bg-op);
  transition: opacity 0.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Desk = wrapper around the desktop photo + the screen overlay.
   Sized to the source image's natural aspect ratio so the screen
   overlay percentages line up exactly with the white monitor area. */
.ix-showcase-desk {
  position: absolute;
  left: 50%;
  top: 50%;
  /* --desk-zoom multiplies the base width. On wide viewports it stays 1
     so the full image fits. On narrow viewports it scales up so the desk
     overflows the pin horizontally and gets cropped on the sides — which
     also enlarges the screen overlay (positioned in %) proportionally. */
  --desk-zoom: 1;
  width: calc(min(100vw, calc(100vh * 2009 / 910)) * var(--desk-zoom));
  aspect-ratio: 2009 / 910;
  transform: translate(-50%, -50%) scale(1.0752);
  opacity: 0;
  transition:
    opacity 1.4s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.4s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    width 0s;
}
/* Progressive crop-zoom: keep the section/pin compact and let the desk
   image grow past viewport width so the monitor screen reads at full size. */
@media (max-width: 1199px) {
  .ix-showcase { height: 280vh; }
  .ix-showcase-desk { --desk-zoom: 1.6; top: 50%; }
}
@media (max-width: 1023px) {
  .ix-showcase { height: 260vh; }
  .ix-showcase-desk { --desk-zoom: 1.85; top: 50%; }
}
@media (max-width: 768px) {
  .ix-showcase { height: 220vh; }
  .ix-showcase-desk { --desk-zoom: 2.4; top: 50%; }
}
@media (max-width: 480px) {
  .ix-showcase-desk { --desk-zoom: 3.0; top: 50%; }
}
.ix-showcase.is-in .ix-showcase-desk {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ix-showcase-desk-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Hairline mask on the very top edge — the source PNG has a few
     light pixels at the top that read as a full-width horizontal
     line against the dark section bg. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 1%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 1%, #000 100%);
}

/* Screen overlay — positioned over the white monitor area inside
   the desktop photo via the --screen-* custom properties on the
   .ix-showcase host. Adjust those values to fine-tune alignment. */
.ix-showcase-screen {
  position: absolute;
  left: var(--screen-l);
  top: var(--screen-t);
  width: var(--screen-w);
  height: var(--screen-h);
  overflow: hidden;
  /* Was #fff — caused a hairline of white to bleed on the right edge
     when the dark intro slide was active (subpixel rounding). Black
     matches the intro slide and is hidden by the opaque JPGs. */
  background: #000;
  box-shadow: inset 0 0 24px rgba(236, 199, 119, 0.18);
}
.ix-showcase-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 700ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-showcase-shot.is-active { opacity: 1; }

/* Intro slide — dark panel with a subtle X watermark, glow, and a
   centered headline. Shown as the first step in the desk-screen
   carousel. */
.ix-showcase-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(217, 185, 125, 0.10) 0%, transparent 70%),
    #000;
  padding: clamp(16px, 2vw, 32px);
  isolation: isolate;
}
.ix-showcase-intro-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.ix-showcase-intro-x {
  width: 48%;
  height: auto;
  opacity: 0.05;
  filter: drop-shadow(0 0 24px rgba(217, 185, 125, 0.25));
}
.ix-showcase-intro-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display, serif);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 44px);
  line-height: 1.15;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.ix-showcase-intro-grad {
  background-image: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Scroll hint — pinned to the bottom of the viewport, gently bouncing
   wheel inside a stylized mouse. Auto-fades as the user scrolls
   through the section (driven by --scroll-hint-op set in JS). */
.ix-showcase-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 44px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: var(--scroll-hint-op, 0);
  transition: opacity 600ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
  z-index: 5;
}
.ix-showcase-hint-label {
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ix-showcase-hint-mouse {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  position: relative;
}
.ix-showcase-hint-wheel {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 2px;
  height: 6px;
  background: rgba(236, 199, 119, 0.85);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: ix-showcase-hint-wheel 1.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}
@keyframes ix-showcase-hint-wheel {
  0%   { transform: translate(-50%, 0);    opacity: 1; }
  60%  { transform: translate(-50%, 12px); opacity: 0; }
  100% { transform: translate(-50%, 0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-showcase-hint-wheel { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-showcase { --bg-op: 1; }
  .ix-showcase-desk { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
}

/* ==========================================================================
   CHOSEN BY LEADERS — replacement for the old portfolio-v2 intro.
   Single 100vh section: centered headline + sub + closer up top,
   alternating 2-row marquee of desktop screenshots below.
   ========================================================================== */
.ix-chosen {
  position: relative;
  min-height: 100vh;
  padding: clamp(80px, 10vh, 140px) 0 clamp(90px, 12vh, 150px);
  /* Navy floor with a soft lavender radial glow at the top so the
     background reads as atmospheric, not flat. */
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%,
      rgba(189, 166, 216, 0.30) 0%,
      rgba(189, 166, 216, 0.14) 35%,
      rgba(189, 166, 216, 0) 70%),
    linear-gradient(180deg, #0a0e1c 0%, #0d1226 50%, #0a0e1c 100%);
  color: #f3ecdb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vh, 80px);
  text-align: center;
}
.ix-chosen-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  padding: 0 clamp(20px, 4vw, 48px);
}
.ix-chosen-logo {
  display: block;
  /* Logo hugs the headline — minimal gap. */
  margin: 0 auto 2px;
  height: clamp(74px, 9.4vh, 138px);
  width: auto;
}
.ix-chosen-title {
  margin: 0 0 clamp(8px, 1.2vh, 16px);
  font-family: var(--font-display);
  font-weight: 300;
  /* Cap so the headline fits on a single line at common widths. */
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.ix-chosen-title em {
  font-style: normal;
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-chosen-sub {
  margin: 0 auto clamp(8px, 1.2vh, 14px);
  max-width: 880px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(243, 236, 219, 0.78);
}
.ix-chosen-closer {
  margin: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
  color: rgba(243, 236, 219, 0.65);
}
.ix-chosen-closer b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 2-row alternating marquee ------------------------------------- */
.ix-chosen-marquee {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  /* Fade out at the left/right edges so screens dissolve into the bg. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ix-chosen-row {
  overflow: hidden;
  width: 100%;
}
.ix-chosen-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  width: max-content;
  padding: 6px 0;
  will-change: transform;
}
.ix-chosen-row--left  .ix-chosen-track {
  animation: ix-chosen-scroll-left 90s linear infinite;
}
.ix-chosen-row--right .ix-chosen-track {
  animation: ix-chosen-scroll-right 100s linear infinite;
}
.ix-chosen-row:hover .ix-chosen-track { animation-play-state: paused; }

@keyframes ix-chosen-scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes ix-chosen-scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.ix-chosen-track img {
  flex: 0 0 auto;
  height: clamp(150px, 22vh, 240px);
  width: auto;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(236, 199, 119, 0.18),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
  object-fit: cover;
}

@media (max-width: 720px) {
  /* Drop the 100vh min-height — the section was filling the whole
     viewport and centering the content, leaving big empty bands above
     and below. Let the content drive the height with tight padding. */
  .ix-chosen { gap: 24px; padding: 56px 0 48px; min-height: 0; }
  .ix-chosen-track img { height: 120px; }
}

/* The title and copy use `white-space: nowrap` for the single-line
   desktop layout. Below 768 the long phrases overflow the viewport
   and get clipped. Allow wrap + pull the font ramp down. */
@media (max-width: 768px) {
  .ix-chosen-title {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(26px, 5.8vw, 44px);
  }
  .ix-chosen-sub { font-size: clamp(14px, 3.6vw, 17px); }
  .ix-chosen-closer { font-size: clamp(13px, 3.4vw, 16px); }
  .ix-chosen-logo { height: clamp(56px, 9vw, 90px); }
}
@media (max-width: 480px) {
  .ix-chosen-title { font-size: clamp(22px, 6.5vw, 32px); }
  .ix-chosen-sub { font-size: 14px; }
  .ix-chosen-closer { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-chosen-row--left  .ix-chosen-track,
  .ix-chosen-row--right .ix-chosen-track {
    animation: none;
  }
}

/* ==========================================================================
   PORTFOLIO v2 — Two-screen experience.
   Screen 1: intro panel (gradient + X watermark + content, fade-ins).
   Screen 2: sticky laptop showcase (left rail + laptop + multi-site nav).
   Footer: 240 brands stamp + CTA.
   ========================================================================== */
.ix-portfolio2 {
  position: relative;
  /* Same navy as the top of the intro gradient — keeps the whole
     two-screen experience visually unified. */
  background: #07091c;
  color: #fef7df;
}

/* ── SCREEN 1: Intro ──────────────────────────────────────────────── */
.ix-portfolio2-intro {
  /* Sticky pin: once the intro reaches the top of the viewport, it
     locks there. The stage (which comes next in flow) then scrolls
     UP OVER the pinned intro — creating the "clients stay put while
     the laptop section rises into view" effect. */
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* More top breathing room so the eyebrow and INFLUEX logo aren't
     crowding the upper edge. */
  padding: clamp(80px, 12vh, 160px) clamp(20px, 4vw, 64px) clamp(40px, 6vh, 80px);
}
/* Gradient backdrop — pure CSS layered gradient.
   Top: deep navy. Mid: muted plum. Bottom: warm copper bloom. */
.ix-portfolio2-intro-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 75%, rgba(201, 138, 115, 0.32) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 22% 60%, rgba(189, 132, 102, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 78% 60%, rgba(120, 96, 156, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #07091c 0%, #1a1228 35%, #2b1d2c 65%, #3a2520 100%);
  opacity: 0;
  transition: opacity 1.6s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  z-index: -2;
}
.ix-portfolio2-intro.is-live .ix-portfolio2-intro-gradient { opacity: 1; }

/* Large X-factor watermark behind the content. Anchored near the top
   so its arms peek out above the eyebrow, with the bottom arms
   spanning past the closer line — matches the design reference. */
.ix-portfolio2-intro-watermark {
  position: absolute;
  left: 50%;
  /* Pushed down from the very top edge — gives the X some breathing
     room and frames it more like a watermarked centerpiece. */
  top: 12vh;
  transform: translateX(-50%);
  width: min(140vh, 130vw);
  height: auto;
  aspect-ratio: 190 / 179;
  opacity: 0;
  transition: opacity 1.8s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 0.25s;
  z-index: -1;
  pointer-events: none;
  /* Fade the X out at the bottom so it doesn't bleed through the
     client photos (which use mix-blend-mode: lighten and would
     otherwise reveal the X stroke). */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, rgba(0,0,0,0.35) 42%, transparent 58%);
          mask-image: linear-gradient(180deg, #000 0%, #000 22%, rgba(0,0,0,0.35) 42%, transparent 58%);
}
.ix-portfolio2-intro.is-live .ix-portfolio2-intro-watermark { opacity: 0.06; }
.ix-portfolio2-intro-watermark svg { width: 100%; height: 100%; display: block; }

/* Bottom fade — transitions the warm copper bottom of the intro
   into the navy Screen 2 background (#07091c), matching the navy at
   the top of the intro gradient so the section reads as one piece. */
.ix-portfolio2-intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 28, 0.6) 55%, #07091c 100%);
  pointer-events: none;
  z-index: 0;
}

/* Content stack */
.ix-portfolio2-intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1280px;
}

/* Staggered fade-ins — every element starts invisible + 20px down,
   then settles when .is-live is applied to the parent. */
.ix-portfolio2-eyebrow,
.ix-portfolio2-logo,
.ix-portfolio2-headline,
.ix-portfolio2-body,
.ix-portfolio2-clients,
.ix-portfolio2-closer {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.1s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.1s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}
.ix-portfolio2-intro.is-live .ix-portfolio2-eyebrow  { opacity: 1; transform: none; transition-delay: 0.45s; }
.ix-portfolio2-intro.is-live .ix-portfolio2-logo     { opacity: 1; transform: none; transition-delay: 0.70s; }
.ix-portfolio2-intro.is-live .ix-portfolio2-headline { opacity: 1; transform: none; transition-delay: 1.00s; }
.ix-portfolio2-intro.is-live .ix-portfolio2-body     { opacity: 1; transform: none; transition-delay: 1.30s; }
.ix-portfolio2-intro.is-live .ix-portfolio2-clients  { opacity: 1; transform: none; transition-delay: 1.60s; }
.ix-portfolio2-intro.is-live .ix-portfolio2-closer   { opacity: 1; transform: none; transition-delay: 2.00s; }

.ix-portfolio2-eyebrow {
  margin-bottom: clamp(14px, 1.6vh, 22px);
}
.ix-portfolio2-logo img {
  display: block;
  height: clamp(52px, 6.5vh, 96px);
  width: auto;
}
.ix-portfolio2-headline {
  margin: clamp(20px, 2.4vh, 32px) 0 clamp(14px, 1.6vh, 22px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.ix-portfolio2-body {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  color: rgba(254, 247, 223, 0.78);
  text-wrap: balance;
}
.ix-portfolio2-clients {
  /* Tighter bottom margin (even negative) so the closer line sits
     visually closer to the client photo row. */
  margin: clamp(28px, 4.5vh, 56px) 0 clamp(-80px, -7vh, -40px);
  /* Break out of the content's max-width and span the full viewport.
     Flex's align-items: center on the parent handles centering; no
     left/transform tricks needed. */
  width: 100vw;
  max-width: 100vw;
  display: flex;
  justify-content: center;
}
.ix-portfolio2-clients img {
  /* Cap the photo so the whole intro (eyebrow → closer) fits inside
     the 100vh sticky pin. Without this cap a 100vw-wide auto-height
     image on a tall/wide viewport pushes the closer line below the
     fold, where it gets clipped by overflow:hidden. */
  max-width: 100%;
  max-height: 50vh;
  width: auto;
  height: auto;
  display: block;
  /* Source image has a black backdrop; mix-blend-mode lightens onto the
     gradient so the portraits sit on the page seamlessly. */
  mix-blend-mode: lighten;
}
.ix-portfolio2-closer {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Bumped ~50% so the closing line reads as a confident statement
     instead of fine print. */
  font-size: clamp(20px, 1.8vw, 30px);
  letter-spacing: 0.005em;
  color: #fff;
  text-wrap: balance;
}
.ix-portfolio2-closer b {
  font-weight: 700;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Dwell spacer — sits between the sticky intro and the stage so the
   intro stays pinned (and fully visible) for an extra ~70vh of scroll
   before the laptop section begins rising into view. Same background
   as the section so the user just sees the clients screen unchanged
   while they scroll through this distance. */
.ix-portfolio2-dwell {
  height: 70vh;
  background: #07091c;
  position: relative;
  z-index: 0;
}

/* ── AREA wrapper: stage + footer share one continuous wash ──────
   The category wash now lives at the area level (one layer behind
   both the stage and the footer), so scrolling past the laptop into
   the "240 brands" footer keeps the same background — no vignette,
   no seam. Sits above the sticky intro (z-index 2 vs 1).
   Solid #07091c fallback ensures the intro never bleeds through
   even during cross-fades or initial paint. */
.ix-portfolio2-area {
  position: relative;
  z-index: 2;
  background: #07091c;
}

/* ── SCREEN 2: Laptop showcase ────────────────────────────────────── */
.ix-portfolio2-stage {
  /* Transparent — the area's wash behind it is the visible
     background. Relative positioning + raised z-index keeps content
     above the wash within the area's stacking context. */
  position: relative;
  z-index: 1;
  height: 100vh;
  background: transparent;
}
.ix-portfolio2-pin {
  /* Non-sticky, fills the stage. Transparent so the area's wash
     shows through behind the laptop / category nav / caption.
     overflow: visible — the laptop halo (::before on the laptop)
     extends below the laptop with a negative inset; if the pin
     clipped it, you'd see a hard horizontal line at the pin's
     bottom edge exactly where the stage meets the footer. The
     screenshot scroll-clipping is handled by .ix-portfolio2-screen,
     not here, so visible overflow is safe. */
  position: relative;
  height: 100%;
  width: 100%;
  overflow: visible;
  background: transparent;
}

/* ── Per-category background washes (replaces the old localized
   glows). Each category gets a soft full-bleed diagonal wash so the
   stage reads like a different "room" per category. Kept dark and
   desaturated — pastel-cast navy, not bright pastels — so the laptop
   and category text remain the focal points. Cross-fade is driven by
   .is-active toggled in JS on the matching [data-cat] layer. */
.ix-portfolio2-glows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ix-portfolio2-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-portfolio2-glow.is-active { opacity: 1; }

/* Uniform tinted washes. Both stops are in the same hue family —
   slightly lighter at the top, slightly darker at the bottom — so
   the wash stays tinted from the top of the laptop section all the
   way through the "240 brands" footer. No fade to pure navy in the
   middle, so the footer area carries the same wash as the laptop. */

/* Wealth — subtle emerald-green wash. Growth, prosperity. Slightly
   warmer/richer than wellness's sage so the two greens stay distinct. */
.ix-portfolio2-glow[data-cat="wealth"] {
  background: linear-gradient(180deg, #142420 0%, #0c1612 100%);
}
/* Education — dusk sky-blue wash. Clarity, knowledge. */
.ix-portfolio2-glow[data-cat="education"] {
  background: linear-gradient(180deg, #141a2c 0%, #0c1120 100%);
}
/* Wellness — deep sage wash. Calm, restorative. */
.ix-portfolio2-glow[data-cat="wellness"] {
  background: linear-gradient(180deg, #121c18 0%, #0a1310 100%);
}
/* Innovation — lavender / periwinkle wash. Forward, modern. */
.ix-portfolio2-glow[data-cat="innovation"] {
  background: linear-gradient(180deg, #1c172d 0%, #120e21 100%);
}
/* Leadership — warm peach / dusty rose wash. Magnetic, human. */
.ix-portfolio2-glow[data-cat="leadership"] {
  background: linear-gradient(180deg, #241814 0%, #170f0d 100%);
}
/* Law — steel slate wash. Authority, gravitas. */
.ix-portfolio2-glow[data-cat="law"] {
  background: linear-gradient(180deg, #0e1422 0%, #080d18 100%);
}

/* Make sure the inner content stacks above the glows. */
.ix-portfolio2-inner { position: relative; z-index: 1; }

/* Radial halo behind the laptop — reads as ambient light cast from
   the screen onto the dark category wash. Neutral warm-cream so it
   sits cleanly on top of any category background without fighting
   the hue. Horizontal inset kept TIGHT (-4%) so the glow stays
   behind the laptop and doesn't bleed onto the category nav / arrow
   column on the left; vertical inset is generous so the halo
   extends well above and below the laptop. */
.ix-portfolio2-laptop::before {
  content: "";
  position: absolute;
  inset: -38% -4% -38% -4%;
  background: radial-gradient(ellipse 65% 80% at 50% 50%,
    rgba(255, 244, 220, 0.36) 0%,
    rgba(248, 232, 195, 0.20) 22%,
    rgba(236, 199, 119, 0.09) 48%,
    transparent 76%);
  z-index: -1;
  pointer-events: none;
  filter: blur(28px);
}

/* Client logo + name caption under the laptop */
.ix-portfolio2-caption {
  position: absolute;
  left: 0;
  right: 0;
  /* Pushed further below the laptop so there's a clear gap between
     the keyboard chin and the caption — no longer hugging the frame. */
  bottom: -11%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: clamp(11px, 0.85vw, 15px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.55s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-portfolio2-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ix-portfolio2-caption-logo {
  height: clamp(22px, 2vw, 32px);
  width: auto;
  object-fit: contain;
  /* Logos are typically dark — invert so they read on the dark
     portfolio background. */
  filter: brightness(0) invert(1) opacity(0.78);
}
.ix-portfolio2-caption-logo[src=""],
.ix-portfolio2-caption-logo:not([src]) { display: none; }
/* Thin gold vertical bar between logo and name. Hidden when there's
   no logo so the name doesn't sit next to a floating divider. */
.ix-portfolio2-caption-sep {
  display: inline-block;
  width: 1px;
  height: clamp(18px, 1.6vw, 28px);
  background: rgba(236, 199, 119, 0.45);
}
.ix-portfolio2-caption-logo[src=""] + .ix-portfolio2-caption-sep,
.ix-portfolio2-caption-logo:not([src]) + .ix-portfolio2-caption-sep { display: none; }
.ix-portfolio2-caption-name { color: #fef7df; }
.ix-portfolio2-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* Tight default gap; the nav pushes itself to the right with
     margin-left: auto, opening a big gap on the left and keeping
     the nav close to the laptop. */
  gap: clamp(14px, 1.6vw, 28px);
  /* Slim vertical padding so the laptop fills as much of the 100vh
     pin as possible. Wider right padding gives the laptop some
     breathing room on the right side instead of butting against
     the viewport edge. */
  padding: clamp(20px, 3vh, 40px) clamp(40px, 6vw, 100px);
  overflow: visible;
}
.ix-portfolio2-rail { flex-shrink: 0; }
.ix-portfolio2-nav {
  flex-shrink: 0;
  /* Absorbs the available space between categories and nav so the
     nav sits right next to the laptop, far from the categories. */
  margin-left: auto;
}

/* Left: category rail */
.ix-portfolio2-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.8vh, 12px);
}
.ix-portfolio2-cat {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* +30% larger than before so the category list reads as the
     primary nav element alongside the laptop. */
  font-size: clamp(26px, 3.4vw, 55px);
  letter-spacing: -0.015em;
  text-align: left;
  color: rgba(254, 247, 223, 0.18);
  /* No permanent blur — only a one-shot focus-pull animation when
     hover or active state engages, then sharp again. */
  transition: color 0.45s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-portfolio2-cat:hover {
  color: rgba(254, 247, 223, 0.6);
  animation: ix-portfolio2-cat-focus 1.1s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
.ix-portfolio2-cat.is-active {
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: ix-portfolio2-cat-focus 1.3s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
/* Focus-pull keyframe — text comes into focus from a soft blur,
   then settles fully sharp. Plays once each time hover/active
   engages, no permanent blur. */
@keyframes ix-portfolio2-cat-focus {
  0%   { filter: blur(7px); }
  100% { filter: blur(0); }
}

/* Right-side laptop frame + screen. Sized by HEIGHT (not width) so
   it dominates the pin's vertical space. flex-shrink: 0 keeps it
   from being squeezed. Negative margin-right shifts the right edge
   past the viewport so ~10% of the laptop overflows — feels editorial,
   not boxed-in. */
.ix-portfolio2-laptop {
  position: relative;
  flex-shrink: 0;
  /* Constrained by both viewport height AND width so the laptop is
     fully visible (not overflowing) on every viewport. The width-
     bound (34vw) keeps the laptop ≤ ~57vw wide, leaving room for
     the rail + nav on the left. No more negative margin-right. */
  height: min(70vh, 34vw);
  width: auto;
  aspect-ratio: 1336 / 797;
  margin-right: 0;
}
.ix-portfolio2-laptop-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* Screen overlay sits IN FRONT of the laptop frame at z-index 2.
   Tighter insets so the bezel is visible on every side. */
.ix-portfolio2-screen {
  position: absolute;
  /* Pixel-precise alignment to laptop.png's actual white screen area
     (verified by sampling the PNG at x=668, y=199):
       white screen x=124 → 1202 of 1336 wide  (9.28% / 10.03% insets)
       white screen y=35  →  713 of  797 tall  (4.39% / 10.54% insets)
     Previous insets were eyeballed at 5.84/12.8/1.0/12.8 which placed
     the overlay ~3.4% OUTSIDE the actual screen on left/right and
     above it on top — that's why the screenshot kept bleeding past
     the bezel. These exact percentages fit the overlay precisely
     inside the visible screen area, with bezel visible all around. */
  left: 9.0%;
  right: 9.4%;
  top: 1.5%;
  bottom: 10.0%;
  overflow: hidden;
  /* Round only the TOP corners to match the laptop's rounded bezel
     edges. Bottom stays sharp because it meets the flat keyboard chin. */
  border-radius: 15px 15px 0 0;
  background: #0a0a14;
  z-index: 2;
}
.ix-portfolio2-screen-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.ix-portfolio2-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-portfolio2-shot.is-active {
  opacity: 1;
  pointer-events: auto;
}
.ix-portfolio2-shot img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
}
/* Natural scroll-through of the active screenshot:
   - Brief pause at TOP (1.5s)
   - Smooth scroll to middle
   - Brief pause at middle (1.2s)
   - Smooth scroll to bottom
   - Brief pause at bottom (1.5s)
   Total cycle: 13s — snappier reading pace.
   Plays ONCE per active state; JS catches `animationend` and
   advances to the next slot in the same category.

   GATED: only runs once the stage has fully risen into view
   (.is-playing added by IntersectionObserver). Before that, the
   active shot stays at frame 0 so the user isn't watching a
   screenshot cycle while the rise-up animation is still in motion. */
.ix-portfolio2-stage.is-playing .ix-portfolio2-shot.is-active img {
  animation: ix-portfolio2-scroll 13s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 forwards;
}
.ix-portfolio2-stage.is-playing .ix-portfolio2-shot.is-active:hover img {
  animation-play-state: paused;
}
@keyframes ix-portfolio2-scroll {
  0%,  12%  { transform: translateY(0); }              /* hold at top   */
  42%, 53%  { transform: translateY(-22%); }           /* hold at mid   */
  88%, 100% { transform: translateY(-44%); }           /* stop before footer whitespace */
}
@media (prefers-reduced-motion: reduce) {
  .ix-portfolio2-stage.is-playing .ix-portfolio2-shot.is-active img { animation: none !important; }
}
.ix-portfolio2-stub {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-micro, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(236, 199, 119, 0.6);
  background: linear-gradient(135deg, #0e1422 0%, #1a1228 100%);
}

/* Right: multi-site nav (dots + arrows) */
.ix-portfolio2-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ix-portfolio2-arrow {
  appearance: none;
  background: rgba(20, 16, 10, 0.5);
  border: 1px solid rgba(236, 199, 119, 0.4);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(254, 247, 223, 0.8);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}
.ix-portfolio2-arrow svg { width: 16px; height: 16px; }
.ix-portfolio2-arrow:hover:not(:disabled) {
  background: rgba(236, 199, 119, 0.12);
  border-color: rgba(236, 199, 119, 0.75);
}
.ix-portfolio2-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.ix-portfolio2-dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ix-portfolio2-dots li { display: block; }
.ix-portfolio2-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(236, 199, 119, 0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.ix-portfolio2-dots button.is-active {
  background: rgba(236, 199, 119, 1);
  border-color: rgba(236, 199, 119, 1);
  transform: scale(1.2);
}

/* ── Footer ───────────────────────────────────────────────────────── */
.ix-portfolio2-footer {
  position: relative;
  /* Stacks above the area's wash within the area's stacking context.
     The PARENT (.ix-portfolio2-area) already sits above the sticky
     intro, so the intro can't bleed through here. */
  z-index: 1;
  /* Top + horizontal padding tight (hugs the stage); bottom padding
     opens up to 130px of breathing room before the next section. */
  padding: clamp(32px, 5vh, 72px) clamp(20px, 4vw, 60px) 130px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vh, 30px);
  /* Transparent — the area's category wash is the visible background.
     Stage and footer now share one continuous wash with no seam. */
  background: transparent;
}
.ix-portfolio2-statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fef7df;
}
.ix-portfolio2-statement em {
  font-style: normal;
  font-weight: 700;
  margin-left: 0.3em;
  background: var(--grad-authority, linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .ix-portfolio2-intro .ix-portfolio2-eyebrow,
  .ix-portfolio2-intro .ix-portfolio2-logo,
  .ix-portfolio2-intro .ix-portfolio2-headline,
  .ix-portfolio2-intro .ix-portfolio2-body,
  .ix-portfolio2-intro .ix-portfolio2-clients,
  .ix-portfolio2-intro .ix-portfolio2-closer { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ix-portfolio2-intro-gradient,
  .ix-portfolio2-intro-watermark { opacity: 0.08 !important; transition: none !important; }
}

/* Mobile / narrow viewport */
@media (max-width: 900px) {
  .ix-portfolio2-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 60px 20px;
  }
  .ix-portfolio2-rail {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 18px;
  }
  .ix-portfolio2-cat { font-size: clamp(16px, 4vw, 22px); }
  .ix-portfolio2-nav { flex-direction: row; }
  .ix-portfolio2-dots { flex-direction: row; }
}

/* ==========================================================================
   INSIDER MEMBERSHIP PAGE — cinematic, scroll-driven sections built on the
   homepage design system. All tokens (colors, spacing, type) come from
   colors_and_type.css + site.css. No new global tokens introduced.
   ========================================================================== */

/* ---------- Hero: two-stage scroll cross-fade ---------------------- */
.ix-insider-hero {
  position: relative;
  --hero-prog: 0;
  --a-op: 1;
  --b-op: 0;
  /* Was 220vh when there was a Stage A → Stage B cross-fade runway.
     Now there's only one stage, so the section is exactly one
     viewport tall — no runway needed. */
  height: 100vh;
  background: var(--bg-0);
  color: var(--fg-1);
  isolation: isolate;
}
.ix-insider-hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* (Hero backdrop layout + vignette are defined further down — the
   3-row marquee block. This stub used to host a static face grid
   variant that's been replaced.) */
.ix-insider-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(60px, 8vh, 110px) clamp(24px, 4vw, 56px);
  pointer-events: none;
  transition: opacity 0.1s linear;
}
.ix-insider-hero-stage--a { opacity: var(--a-op, 1); }
.ix-insider-hero-stage--b { opacity: var(--b-op, 0); }
.ix-insider-hero-eyebrow {
  margin-bottom: clamp(18px, 2.4vh, 32px);
  color: var(--color-champagne) !important;
  -webkit-text-fill-color: var(--color-champagne);
  background: none !important;
}
.ix-insider-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 86px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.ix-insider-hero-title em {
  font-style: normal;
  font-weight: 600;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-hero-title--alt {
  font-weight: 600;
  letter-spacing: -0.03em;
}
.ix-insider-hero-sub {
  margin: clamp(20px, 2.6vh, 32px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  max-width: 56ch;
}
/* Display variant — single-line sub under the hero title. Authority
   gradient is animated horizontally so the colors continually flow
   through the wordmark. */
.ix-insider-hero-sub--display {
  margin: clamp(18px, 2.4vh, 30px) auto clamp(20px, 2.6vh, 32px);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  /* Single line — no wrap, no max-width cap. */
  white-space: nowrap;
  max-width: none;
  /* Wider linear gradient (200% bg-size) animated horizontally so the
     champagne → coral → lavender ramp slides through the text. */
  background: linear-gradient(
    90deg,
    #F2E8D8 0%,
    #D9B97D 20%,
    #C98A73 40%,
    #BDA6D8 60%,
    #D9B97D 80%,
    #F2E8D8 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ix-hero-sub-grad 6s linear infinite;
}
/* Override the .ix-xnet 1.25em font-size bump inside this sub so
   every word — "eXponential Network", "Execution Dream Team", "+",
   "The" — renders at the same visual size. */
.ix-insider-hero-sub--display .ix-xnet {
  font-size: inherit;
}
/* Hero body paragraph is sentence-case, so the 1.25em uppercase-context
   bump makes "eXponential network" read oversized. Reset to 1em so the
   X-mark logotype matches the surrounding sentence text. */
.ix-insider-hero-body .ix-xnet {
  font-size: 1em;
}
@keyframes ix-hero-sub-grad {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-hero-sub--display {
    animation: none;
    background-position: 0% 50%;
  }
}
.ix-insider-hero-lede {
  margin: clamp(16px, 2vh, 24px) 0 clamp(20px, 2.6vh, 36px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--fg-1);
  max-width: 40ch;
}
.ix-insider-hero-body {
  margin: 0 auto clamp(10px, 1.4vh, 18px);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--fg-2);
  /* Wider so the 234-char body paragraph wraps to ~3 lines instead of
     5 on the centered hero. */
  max-width: 82ch;
}
.ix-insider-hero-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vh, 48px);
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  color: rgba(217,185,125,0.7);
  animation: ix-insider-hero-bounce 1.8s var(--ease-quint) infinite;
}
@keyframes ix-insider-hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ---------- INSIGHT MEETS IMPLEMENTATION ---------------------------- */
.ix-insider-insight {
  padding: clamp(110px, 14vh, 180px) clamp(24px, 4vw, 64px);
  background: var(--bg-0);
  text-align: center;
  color: var(--fg-1);
  isolation: isolate;
  position: relative;
}
.ix-insider-insight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(236,199,119,0.06) 0%,
    rgba(236,199,119,0) 60%);
}
.ix-insider-insight-inner { max-width: 980px; margin: 0 auto; }
.ix-insider-insight-title {
  margin: clamp(16px, 2.2vh, 28px) 0 clamp(28px, 4vh, 48px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.ix-insider-insight-title em {
  font-style: normal;
  font-weight: 600;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-insight-body {
  margin: clamp(28px, 4vh, 48px) auto 0;
  max-width: 720px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--fg-2);
}
.ix-insider-insight-body p { margin: 0 0 18px; }
.ix-insider-insight-body p:last-child { margin-bottom: 0; }
.ix-insider-insight-stamp {
  margin-top: clamp(24px, 3vh, 40px) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-style: italic;
  font-size: clamp(20px, 2vw, 30px) !important;
  line-height: 1.35 !important;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}

/* ---------- THE STAKES — Option B (dark) with spotlight + grid + noise
   Port of the React snippet: neutral-950 base, champagne radial spot-
   light, masked grid pattern, and an animated noise canvas overlay.
   Layout stays split-stage: sticky headline left, body card right.
   ----------------------------------------------------------------- */
.ix-insider-stakes {
  position: relative;
  z-index: 1;                      /* sits BELOW the Answer section's curtain */
  --stakes-prog: 0;                /* 0 = pin just locked, 1 = pin about to release */
  background: #0a0a0a;             /* neutral-950 */
  color: var(--fg-1);
  /* Section provides the scroll runway. The visible content is held in a
     100vh sticky pin (.ix-insider-stakes-pin). 180vh total = 80vh of
     runway for the scroll-progress reveal. */
  min-height: 180vh;
  padding: 0;
  isolation: isolate;
}
/* Pin — the only thing the user actually SEES at any moment. */
.ix-insider-stakes-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8vh, 96px) clamp(24px, 4vw, 80px);
}
/* Intro variant — same dark visual treatment (bgfx streaks + dots +
   noise) but no scroll-runway needed since there's no headline reveal
   to drive. Single 100vh page, sticky pin disabled. */
.ix-insider-stakes--intro {
  min-height: auto;
  height: 100vh;
}
.ix-insider-stakes--intro .ix-insider-stakes-pin {
  position: relative;
  top: auto;
  height: 100vh;
}
/* Intro-only — replace the scroll-progress-driven streaks + headline
   opacity with simple .is-in transition delays, so the spotlight
   (background streaks) fades in first, then the headline copy lands
   on top. */
.ix-insider-stakes--intro .ix-insider-stakes-streaks {
  opacity: 0;
  transition: opacity 1100ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 600ms;
}
.ix-insider-stakes--intro.is-in .ix-insider-stakes-streaks {
  opacity: 1;
}
.ix-insider-stakes--intro .ix-insider-stakes-highlight {
  opacity: 0;
  transition: opacity 1100ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 600ms;
}
.ix-insider-stakes--intro.is-in .ix-insider-stakes-highlight {
  opacity: 1;
}
.ix-insider-stakes--intro .ix-insider-stakes-title {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1500ms,
    transform 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 1500ms;
}
.ix-insider-stakes--intro.is-in .ix-insider-stakes-title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Old dead nodes from the previous design — fully retired. */
.ix-insider-stakes-bg,
.ix-insider-stakes-overlay,
.ix-insider-stakes-inner { display: none; }

/* ----- Background FX layers ----- */
/* Old dead nodes — kept hidden so any straggler refs don't render. */
.ix-insider-stakes-spotlight,
.ix-insider-stakes-gridfx { display: none; }

/* The full FX stack (radial base + streaks + dots + highlight) lives
   inside .ix-insider-stakes-bgfx so the whole pattern can be faded in
   together as the first step of the entry choreography. */
.ix-insider-stakes-bgfx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1100ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Layer 1 — radial dark base from the top-left. Reduced lift on the
   bright corner (was #2e2e2e) so the headline area doesn't blow out. */
.ix-insider-stakes-bgfx-base {
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 100% at 0% 0%, rgb(26, 26, 26) 0%, rgb(0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(125% 100% at 0% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.224) 88.2883%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(125% 100% at 0% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.224) 88.2883%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Layer 2 — five skewed champagne streaks. Streaks-wrapper opacity is
   driven by scroll progress so the lights fade in AFTER the user has
   seen the calm black-and-dots state for a moment. */
.ix-insider-stakes-streaks {
  position: absolute;
  inset: 0;
  --streaks-t: clamp(0, calc((var(--stakes-prog) - 0.05) * 4), 1);
  opacity: var(--streaks-t);
}
.ix-insider-stakes-streak {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(231, 196, 127, 1) 0%,
    rgba(231, 196, 127, 0) 100%);
  transform: skewX(45deg) translate3d(0, 0, 0);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* Reduced base + pulse range (~30% less than before) so the streaks
     don't wash out the headline gradient text. */
  opacity: 0.22;
  animation: ix-stakes-streak-pulse 11s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes ix-stakes-streak-pulse {
  0%, 100% { opacity: 0.16; transform: skewX(45deg) translate3d(-1.5%, 0, 0); }
  50%      { opacity: 0.38; transform: skewX(45deg) translate3d( 1.5%, 0, 0); }
}
.ix-insider-stakes-streak:nth-child(1) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0) 36%, rgb(0,0,0) 55%, rgba(0,0,0,0.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0) 36%, rgb(0,0,0) 55%, rgba(0,0,0,0.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
}
.ix-insider-stakes-streak:nth-child(2) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 11%, rgb(0,0,0) 25%, rgba(0,0,0,0.55) 41%, rgba(0,0,0,0.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 11%, rgb(0,0,0) 25%, rgba(0,0,0,0.55) 41%, rgba(0,0,0,0.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
}
.ix-insider-stakes-streak:nth-child(3) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 9%, rgb(0,0,0) 20%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.424) 40%, rgb(0,0,0) 48%, rgba(0,0,0,0.267) 54%, rgba(0,0,0,0.13) 78%, rgb(0,0,0) 88%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 9%, rgb(0,0,0) 20%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.424) 40%, rgb(0,0,0) 48%, rgba(0,0,0,0.267) 54%, rgba(0,0,0,0.13) 78%, rgb(0,0,0) 88%, rgba(0,0,0,0) 97%);
}
.ix-insider-stakes-streak:nth-child(4) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 17%, rgba(0,0,0,0.55) 26%, rgb(0,0,0) 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,0.13) 69%, rgb(0,0,0) 79%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 17%, rgba(0,0,0,0.55) 26%, rgb(0,0,0) 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,0.13) 69%, rgb(0,0,0) 79%, rgba(0,0,0,0) 97%);
}
.ix-insider-stakes-streak:nth-child(5) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0.55) 27%, rgb(0,0,0) 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.13) 67%, rgb(0,0,0) 74%, rgb(0,0,0) 82%, rgba(0,0,0,0.47) 88%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0.55) 27%, rgb(0,0,0) 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.13) 67%, rgb(0,0,0) 74%, rgb(0,0,0) 82%, rgba(0,0,0,0.47) 88%, rgba(0,0,0,0) 97%);
}
/* Stagger the breathing so the streaks pulse out of sync. */
.ix-insider-stakes-streak:nth-child(1) { animation-duration: 11s; animation-delay:  0s;   }
.ix-insider-stakes-streak:nth-child(2) { animation-duration: 14s; animation-delay: -3.2s; }
.ix-insider-stakes-streak:nth-child(3) { animation-duration:  9s; animation-delay: -5.5s; }
.ix-insider-stakes-streak:nth-child(4) { animation-duration: 13s; animation-delay: -1.8s; }
.ix-insider-stakes-streak:nth-child(5) { animation-duration: 12s; animation-delay: -7.1s; }

/* Layer 3 — fine 1px dot grid in white-50%. */
.ix-insider-stakes-dots {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.55) 1px, transparent 0);
  background-size: 20px 20px;
}

/* Layer 4 — broad slate radial highlight, ~30% dimmer overall and
   also gated by scroll progress (fades in alongside the streaks). */
.ix-insider-stakes-highlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(70, 90, 140, 0.21) 0%,
    transparent 70%);
  opacity: clamp(0, calc((var(--stakes-prog) - 0.05) * 4), 1);
}
/* Animated grain canvas (1024×1024, scaled to cover the section). */
.ix-insider-stakes-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  /* Opacity is computed from --stakes-prog in the reveal block below;
     no transition here so we don't introduce scroll lag. */
  opacity: 0;
}

/* ----- Content layer (above all FX layers, inside the 100vh pin) ----- */
.ix-insider-stakes-grid {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 112px);
  align-items: center;
}
/* Single-column grid variant — used by the "What makes Influex
   Membership different" intro that sits between the hero and the
   Insight section. Just one centered headline, no 2nd column. */
.ix-insider-stakes-grid--single {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  place-items: center;
}
.ix-insider-stakes-headline {
  /* No longer sticky — the pin already holds the headline in view. */
  align-self: center;
  /* Reveal stays scroll-progress driven (--stakes-prog). Copy is hidden
     until the user has scrolled ~50% of the runway, then ramps in. */
  --headline-t: clamp(0, calc((var(--stakes-prog) - 0.50) * 5), 1);
  opacity: var(--headline-t);
  transform: translate3d(0, calc((1 - var(--headline-t)) * 18px), 0);
  will-change: opacity, transform;
}
.ix-insider-stakes-headline .ix-eyebrow {
  display: block;
  margin-bottom: clamp(20px, 2.8vh, 36px);
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-champagne) !important;
  -webkit-text-fill-color: var(--color-champagne);
  background: none;
}
.ix-insider-stakes-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fg-1);
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.ix-insider-stakes-title span,
.ix-insider-stakes-title em { display: block; }
/* Centered single-line variant — used by the intro headline above the
   Insight section. Inline em (no display: block) so "different." sits
   on the same line as the rest of the title. */
.ix-insider-stakes-title--center {
  text-align: center;
  margin: 0 auto;
  max-width: 22ch;
}
.ix-insider-stakes-title--center em {
  display: inline;
}
.ix-insider-stakes-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(236, 199, 119, 0.22));
}

/* Body card — dark translucent panel with blur. */
.ix-insider-stakes-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 36px) clamp(32px, 4vw, 56px);
  box-shadow:
    0 40px 100px -50px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Card waits until the headline has fully landed (~progress 0.70)
     before starting its own reveal — clear sequential beat between
     left and right. */
  --card-t: clamp(0, calc((var(--stakes-prog) - 0.74) * 6), 1);
  opacity: var(--card-t);
  transform: translate3d(0, calc((1 - var(--card-t)) * 28px), 0);
  will-change: opacity, transform;
}
.ix-insider-stakes-line {
  margin: 0 !important;
  padding: clamp(10px, 1.4vh, 18px) 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.6;
  color: var(--fg-2) !important;
  border: 0;             /* hairlines removed by request */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.ix-insider-stakes-line b {
  color: var(--fg-1);
  font-weight: 700;
}
.ix-insider-stakes-line--closer {
  padding-top: clamp(20px, 2.8vh, 32px) !important;
  padding-bottom: clamp(8px, 1.2vh, 16px) !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.3;
  letter-spacing: -0.005em;
  /* Whole line rendered in the authority gradient. */
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.ix-insider-stakes-line--closer em {
  /* Italic emphasis dropped per spec — emphasis is carried by the
     gradient color, not by slant. */
  font-style: normal;
  background: none;
  color: inherit !important;
  -webkit-text-fill-color: inherit;
}

/* ----- Reveal sequence -------------------------------------------------
   Stage 1: .is-in (IntersectionObserver) fades the bgfx wrapper in.
            At this point only the dark base + dots are visible — the
            streaks and highlight are gated by --stakes-prog and stay
            at 0 opacity. This is the "calm black with dots" state.
   Stage 2: As the user scrolls, --stakes-prog rises and the streaks +
            highlight fade in (≈ progress 0.05 → 0.30).
   Stage 3: Headline fades in starting at progress 0.50.
   Stage 4: Card fades in starting at progress 0.55.
   Noise is tied to the streak ramp so the grain joins the lights. */
.ix-insider-stakes.is-in .ix-insider-stakes-bgfx { opacity: 1; }
.ix-insider-stakes-noise {
  /* Override the earlier .is-in fade — noise is now scroll-progress
     driven, syncing with the streak reveal. */
  opacity: calc(clamp(0, (var(--stakes-prog) - 0.05) * 4, 1) * 0.55);
}

/* Reduced motion: skip the scroll-driven reveal, show end state. */
@media (prefers-reduced-motion: reduce) {
  .ix-insider-stakes { --stakes-prog: 1; }
  .ix-insider-stakes-bgfx,
  .ix-insider-stakes-streaks,
  .ix-insider-stakes-highlight,
  .ix-insider-stakes-headline,
  .ix-insider-stakes-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .ix-insider-stakes-noise { opacity: 0.45 !important; }
  .ix-insider-stakes-streak { animation: none !important; opacity: 0.25 !important; }
}

/* Tablet down: release the pin (a stacked layout won't fit in 100vh on
   most phones), and stack the columns. Reveal still scroll-progress
   driven so the bg-first feel is preserved. */
@media (max-width: 900px) {
  .ix-insider-stakes {
    min-height: 0;             /* no runway needed when not pinned */
    padding: clamp(80px, 12vh, 120px) 0;
  }
  .ix-insider-stakes-pin {
    position: relative;
    height: auto;
    min-height: 80vh;
    padding: clamp(48px, 8vh, 80px) clamp(20px, 5vw, 40px);
  }
  .ix-insider-stakes-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vh, 56px);
    align-items: start;
  }
  .ix-insider-stakes-headline { align-self: start; }
}
@media (max-width: 480px) {
  .ix-insider-stakes-title { font-size: clamp(28px, 9vw, 44px); }
  .ix-insider-stakes-card { padding: 4px 22px; border-radius: 18px; }
  .ix-insider-stakes-line { font-size: 16px !important; }
}

/* ---------- THE ANSWER — light editorial, rising curtain reveal ----
   The section's bg sits in a separate .curtain layer that starts
   translated 100% below itself. As the user scrolls in, the curtain
   rises into position (driven by --answer-prog), then the inner
   content fades in stage-by-stage. */
.ix-insider-answer {
  --answer-prog: 0;
  --compare-bg-t: 0;              /* synced by JS to .ix-insider-compare's progress */
  position: relative;
  z-index: 2;
  /* Section bg IS the cream. The layered SCENE inside handles the
     full choreography — intro locks, then pillars rise up over it.
     NOTE: NO `overflow: hidden` on the section — that would make it
     the scrolling ancestor for the sticky stage and break the pin.
     Clipping is handled by .ix-insider-answer-stage instead. */
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: clamp(110px, 14vh, 180px);
  padding-left: 4vw;
  padding-right: 4vw;
  /* Interpolates white → dark in lockstep with the closer + comparison
     section. The team pillar's own dark bg sits on top of this in its
     own stacking layer, so changing the section bg only affects the
     padding-bottom band below the closer where this white would
     otherwise show through as a seam. */
  background: color-mix(in srgb,
    #ffffff calc((1 - var(--compare-bg-t)) * 100%),
    #03050f calc(var(--compare-bg-t) * 100%));
  color: #1a1614;
  text-align: center;
}
.ix-insider-answer-curtain {
  /* Now just carries the decorative wash gradients on top of the section
     bg. No transform, no rise animation — the section's natural
     enter-from-bottom IS the rise-up. */
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
}
.ix-insider-answer-curtain::before {
  /* Soft champagne wash up top only. The previous bottom-right mauve
     breath sat exactly at the boundary with the comparison section
     and tinted the answer's lower edge slightly purple — the
     comparison section above has no matching wash, so the boundary
     read as a subtle linear gradient seam. Top wash kept (it highlights
     the team pillar area), bottom wash removed. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(231,196,127,0.22) 0%, transparent 65%);
  /* Fade out the decorative wash as the section bg darkens so the top
     wash doesn't compete with the dark navy state. */
  opacity: calc(1 - var(--compare-bg-t, 0));
}
.ix-insider-answer-inner {
  position: relative;
  z-index: 1;
  max-width: 100%;                /* take full inner space inside section padding */
  margin: 0 auto;
  min-width: 0;
}

/* ---- Layered SCENE: intro locks at center, pillars rise up over it.
   The scene is a tall runway; inside, the stage is sticky 100vh and
   holds 3 absolute-positioned layers. Each pillar layer translates up
   from below viewport based on scroll progress through the scene. ---- */
.ix-insider-answer-scene {
  position: relative;
  --scene-prog: 0;                /* 0 = scene entered, 1 = scene exiting */
  /* Total scroll runway for the choreography:
       0.00 → 0.10  intro fades in
       0.10 → 0.30  intro locked alone (no pillars yet)
       0.30 → 0.50  Room pillar rises up (translateY 100% → 0)
       0.50 → 0.65  Room locked in place
       0.65 → 0.85  Team pillar rises up (translateY 100% → 0)
       0.85 → 1.00  Team locked, scene exits */
  min-height: 500vh;
}
.ix-insider-answer-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.ix-insider-answer-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* No vertical padding — pillar layers fill the full 100vh stage. */
  padding: 0;
}

/* Intro layer — bottom of the z-stack. Fades in once at the start.
   Wider inner padding so the title/lede sits in a readable column
   even though the pillar layers below it span ~92vw. */
.ix-insider-answer-layer--intro {
  z-index: 1;
  padding-inline: 11vw;
  --intro-fade: clamp(0, calc(var(--scene-prog) * 10), 1);
  opacity: var(--intro-fade);
}
.ix-insider-answer-intro {
  margin: 0;
  /* Centered text already inherited from layer flex-center. */
}
/* Override the global champagne eyebrow color — it disappears on white.
   Use the dark text color (with a hint of warmth) so the eyebrow reads. */
.ix-insider-answer-intro .ix-eyebrow {
  color: #1a1614 !important;
  -webkit-text-fill-color: #1a1614 !important;
  background: none !important;
  opacity: 0.7;
}

/* Room layer — rises up over the intro between scene-prog 0.30 → 0.50. */
.ix-insider-answer-layer--room {
  z-index: 2;
  --room-rise: clamp(0, calc((var(--scene-prog) - 0.30) * 5), 1);
  transform: translate3d(0, calc((1 - var(--room-rise)) * 100%), 0);
}

/* Team layer — rises up over Room between scene-prog 0.65 → 0.85. */
.ix-insider-answer-layer--team {
  z-index: 3;
  --team-rise: clamp(0, calc((var(--scene-prog) - 0.65) * 5), 1);
  transform: translate3d(0, calc((1 - var(--team-rise)) * 100%), 0);
}
.ix-insider-answer-title {
  margin: clamp(18px, 2.4vh, 30px) 0 clamp(16px, 2vh, 24px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #1a1614;
  text-wrap: balance;
}
.ix-insider-answer-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-answer-lede {
  margin: 0 auto !important;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px) !important;
  line-height: 1.65;
  color: #3a322c !important;
}

/* ---- Pillars — stacked full-width boxes ---- */
.ix-insider-answer-pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* min 0 so children can shrink below their content's intrinsic width */
  gap: clamp(32px, 4vh, 56px);
  margin-bottom: clamp(56px, 8vh, 96px);
  min-width: 0;
}
.ix-insider-answer-pillar {
  position: relative;
  /* Top padding gives the tag breathing room; bottom stays tight so the
     visual element below has more height. Team pillar gets extra top
     padding via the modifier override below. */
  padding: clamp(48px, 6vh, 80px) clamp(40px, 5vw, 72px) clamp(24px, 3vh, 40px);
  text-align: center;
  /* Dark navy base + champagne spotlight at top-center and a soft
     lavender ambient at the bottom — adds depth so the pillar reads
     as a lit room, not a flat black box. */
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%,
      rgba(236, 199, 119, 0.16) 0%,
      rgba(236, 199, 119, 0.06) 40%,
      transparent 70%),
    radial-gradient(ellipse 65% 55% at 50% 100%,
      rgba(189, 166, 216, 0.08) 0%,
      transparent 70%),
    #0A1428;
  border: 1px solid rgba(231, 196, 127, 0.14);
  color: var(--fg-1);
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(4px, 0.6vh, 10px);
  overflow: hidden;
}
.ix-insider-answer-pillar-visual {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;        /* anchor carousel to the TOP of the visual area */
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  /* Carousel hugs right under the W.E.W.I.L.L. row. */
  margin-top: 0;
}
/* Carousel inside the pillar — override homepage defaults so it fills
   the remaining vertical space cleanly. */
.ix-insider-answer-pillar-visual .ix-serve-carousel {
  margin: 0 auto !important;
  width: 100%;
  height: 100%;
}
.ix-insider-answer-pillar-visual .ix-serve-carousel-stage {
  height: 100%;
  max-height: 100%;
  min-height: 360px;
}
/* Bigger active slide — close to full stage width. */
.ix-insider-answer-pillar-visual .ix-serve-carousel-slide {
  max-width: 96%;                 /* nearly the full stage */
  max-height: 100%;
}
/* Peek slides scale relative to the bigger active slide. */
.ix-insider-answer-pillar-visual .ix-serve-carousel-slide.is-prev {
  transform: translate(calc(-50% - 55%), -50%) scale(0.72);
}
.ix-insider-answer-pillar-visual .ix-serve-carousel-slide.is-next {
  transform: translate(calc(-50% + 55%), -50%) scale(0.72);
}
/* Per-pillar reveals are now IO-driven via .is-pillar-in (above), not
   scroll-progress driven — each pillar gets its own rise-up moment
   as it enters viewport. */

/* Title at the top, showcase below — vertical stack inside the box.
   Centered horizontally; pillar gap handles vertical spacing. */
.ix-insider-answer-pillar-meta {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Tight gap so the tag/title/lede sit together as a single block. */
  gap: clamp(4px, 0.6vh, 10px);
  flex: 0 0 auto;
}
/* Reset margins on the meta items so the flex gap (above) is the only
   spacing in play — otherwise individual margins compound on top of it
   and create the "huge gap" between title and lede. */
.ix-insider-answer-pillar-meta > .ix-insider-answer-tag,
.ix-insider-answer-pillar-meta > .ix-insider-answer-pillar-title,
.ix-insider-answer-pillar-meta > p {
  margin: 0 auto !important;
}
/* W.E.W.I.L.L. tabs sit just under the lede line — small breathing room.
   Override the homepage's default 64px bottom margin so the carousel
   sits flush against the tab strip. */
.ix-insider-answer-pillar-meta .ix-industries {
  margin: clamp(4px, 0.8vh, 12px) auto 0 !important;
  /* Cap tab strip height so the giant background letters don't dominate
     the pillar and so the carousel below has more vertical room. */
  max-width: 1100px;
}
/* Reduce tile height + glyph size inside the pillar so letters fit
   without clipping at the tile bottom (the 3/4 ratio + clamp(80,9vw,170)
   font is sized for full-bleed WE WILL section, not a constrained box). */
.ix-insider-answer-pillar-meta .ix-industry {
  aspect-ratio: auto;
  /* Tile height tuned to match the rendered letter height + label
     beneath, so the vertical divider lines between tiles end up
     roughly the same height as the W·E·W·I·L·L glyphs themselves. */
  height: clamp(96px, 12vh, 144px);
  /* The mark fills the tile and overflows visually onto neighbours;
     allow that so wide letters (W, M) render fully edge-to-edge
     without being clipped by adjacent tile boundaries. */
  overflow: visible;
}
.ix-insider-answer-pillar-meta .ix-industry-mark {
  /* Cap glyph width to the tile width so the W never overruns into
     the next column. Using clamp on font-size to be safe — and a
     generous line-height so the glyph's full cap-to-baseline fits
     inside the painted background-clip box (background-clip: text
     leaks the parent bg through any portion of the glyph that sits
     OUTSIDE the box's painted area). */
  font-size: clamp(54px, 6.4vw, 108px);
  line-height: 1.25;
  /* Background painted with extra vertical room so wide letters'
     full bounding box always falls inside the painted region. */
  background-size: 100% 140%;
  background-position: 50% 50%;
}
.ix-insider-answer-pillar-meta .ix-industry-label {
  font-size: clamp(13px, 1.1vw, 17px);
}
.ix-insider-answer-pillar-visual {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 20px);
}

/* Tag is now the dominant element: large display type, bigger than the
   pillar title below it. Rendered in the authority gradient. */
.ix-insider-answer-tag {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: clamp(8px, 1vh, 16px);
}
/* Pillar title sits BELOW the tag and reads as a supporting descriptor —
   smaller than the tag. */
.ix-insider-answer-pillar-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.ix-insider-answer-pillar p {
  margin: 0 auto !important;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.6;
  color: var(--fg-2) !important;
  max-width: 56ch;
}
/* Team pillar: keep the lede on a single line + more top padding so
   the bigger team cards have room to breathe under the meta block. */
.ix-insider-answer-pillar--team .ix-insider-answer-pillar-meta p {
  max-width: none;
  white-space: nowrap;
}
.ix-insider-answer-pillar--team {
  /* Tighter top padding now that we have two rows of cards to fit —
     the original 96-160px push made sense for a single row but eats
     the height needed for row 2. Both top and bottom padding tuned
     so the marquee fits on shorter laptop viewports (~900vh) without
     row 2 getting clipped. */
  padding-top: clamp(28px, 3.5vh, 48px) !important;
  padding-bottom: clamp(24px, 3vh, 40px) !important;
  /* Slightly darker, cooler shade than The Room — keeps the two pillars
     visually distinct while staying in the same dark-navy family. */
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%,
      rgba(236, 199, 119, 0.12) 0%,
      rgba(236, 199, 119, 0.04) 40%,
      transparent 70%),
    radial-gradient(ellipse 65% 55% at 50% 100%,
      rgba(189, 166, 216, 0.06) 0%,
      transparent 70%),
    #060B1A;
}
/* Pull the marquee close to the meta block so the second row stays
   inside the pillar's visible area. */
.ix-insider-answer-pillar--team .ix-insider-answer-pillar-visual {
  margin-top: clamp(8px, 1vh, 18px);
  /* Let the marquee define its own height (two rows of cards) rather
     than being clipped by the pillar's overflow. */
  overflow: visible;
}
/* Team-pillar tag is smaller than Room's — saves vertical space for
   the 2-row marquee below. */
.ix-insider-answer-pillar--team .ix-insider-answer-tag {
  font-size: clamp(28px, 3.4vw, 48px);
  margin-bottom: clamp(4px, 0.6vh, 10px);
}
.ix-insider-answer-pillar p b {
  color: var(--fg-1);
  font-weight: 700;
}

/* Big, subtle index numeral at the top-left of each pillar (1 for Room,
   2 for Team). Stroke-only — no fill — so it reads as an engraved
   outline watermark behind the content. */
.ix-insider-answer-pillar-num {
  position: absolute;
  top: clamp(20px, 2.4vh, 36px);
  left: clamp(28px, 3vw, 56px);
  z-index: 1;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(96px, 11vw, 180px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(236, 199, 119, 0.10);
}

/* "+" fuse — small champagne plus between stacked pillars. Static. */
.ix-insider-answer-fuse {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vh, 40px) 0;
}
.ix-insider-answer-plus {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.2vw, 48px);
  color: var(--color-champagne);
  filter: drop-shadow(0 0 18px rgba(236, 199, 119, 0.45));
}

/* Flex Funds closer — last in the sequence. No own background; sits
   transparent over the .ix-insider-answer section bg (which itself
   interpolates white → dark via --compare-bg-t). This way the closer
   area + the section padding-bottom below the closer + the comparison
   section all share ONE paint path and there's no color seam between
   them. Only the TEXT color interpolates here. */
.ix-insider-answer-closer {
  --t: var(--compare-bg-t, 0);
  --closer-fg: color-mix(in srgb,
    #1a1614 calc((1 - var(--t)) * 100%),
    #F4E9D2 calc(var(--t) * 100%));
  /* Generous vertical padding so the closer line breathes between the
     dark Team pillar above and the dark next section below. */
  margin: 0 auto !important;
  padding: clamp(80px, 12vh, 160px) clamp(20px, 4vw, 48px);
  max-width: 72ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px) !important;
  line-height: 1.65;
  color: var(--closer-fg) !important;
  background: transparent;
  /* IO-driven reveal — fires when closer enters viewport. */
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 800ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-insider-answer-closer.is-closer-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Bold accents track the same interpolated fg color. */
.ix-insider-answer-closer b {
  background: none;
  color: var(--closer-fg) !important;
  -webkit-text-fill-color: var(--closer-fg) !important;
  font-weight: 700;
}

/* ===================================================================
   ROOM PILLAR — brand-header slider with prev/next nav.
   Slides are real desktop-display screenshots from the homepage
   WE WILL section. Track uses CSS scroll-snap; the JS scrolls by
   stage width per click.
   =================================================================== */
.ix-insider-room-slider {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
}
.ix-insider-room-slider-btn {
  width: clamp(40px, 3.6vw, 52px);
  height: clamp(40px, 3.6vw, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(231, 196, 127, 0.22);
  border-radius: 999px;
  color: var(--color-champagne);
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.ix-insider-room-slider-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(231, 196, 127, 0.42);
  transform: scale(1.06);
}
.ix-insider-room-slider-btn:active { transform: scale(0.96); }
.ix-insider-room-slider-btn svg {
  width: 18px;
  height: 18px;
}
.ix-insider-room-slider-stage {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Active slide is centered; prev + next peek at the sides. The track
     gets symmetric padding so the first/last slide can still center. */
  scroll-padding-inline: 18%;
}
.ix-insider-room-slider-stage::-webkit-scrollbar { display: none; }
.ix-insider-room-slider-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  padding-inline: 18%;            /* peek room on both sides */
}
.ix-insider-room-slide {
  flex: 0 0 64%;                  /* slide width — leaves ~18% peek each side */
  scroll-snap-align: center;
  opacity: 0.45;                  /* non-centered slides dim back */
  transform: scale(0.92);
  transition: opacity 360ms ease, transform 360ms ease;
}
/* Active slide (centered) — full opacity, full scale. Detected via the
   `:has` selector with scroll snap behavior. Fallback for older
   browsers: all slides at 1, just no peek depth. */
@supports (animation-timeline: view()) {
  .ix-insider-room-slide {
    animation: ix-room-slide-focus linear both;
    animation-timeline: view(inline);
    animation-range: cover 30% cover 70%;
  }
  @keyframes ix-room-slide-focus {
    from { opacity: 0.45; transform: scale(0.92); }
    50%  { opacity: 1;    transform: scale(1); }
    to   { opacity: 0.45; transform: scale(0.92); }
  }
}
.ix-insider-room-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  /* Cap at ~50vh so the Room pillar fits comfortably in 100vh with
     room for the meta block + padding above. */
  max-height: 52vh;
  object-fit: cover;
  border-radius: clamp(14px, 1.4vw, 20px);
  border: 1px solid rgba(231, 196, 127, 0.16);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* ===================================================================
   TEAM PILLAR — auto-scrolling marquee of real team-member cards.
   Reuses the homepage's .ix-team-card visual (dark card, gold border,
   gradient name, role caption) but wraps it in a marquee track.
   =================================================================== */
.ix-insider-team-marquee {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Tight inter-row gap so two rows of 4:5 portraits stay inside the
     pillar's visible area without the bottom row getting clipped. */
  gap: clamp(8px, 1vh, 14px);
  padding: 4px 0;
}
/* Each row gets its own overflow-hidden + edge mask so a row's track can
   slide off-screen without bleeding into siblings. */
.ix-insider-team-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.ix-insider-team-track {
  display: flex;
  gap: clamp(16px, 1.6vw, 24px);
  width: max-content;
}
/* Top row drifts left, bottom row drifts right — opposite directions
   give the cinematic "two opposing currents" look from the homepage. */
.ix-insider-team-row--top .ix-insider-team-track {
  animation: ix-team-marquee 52s linear infinite;
}
.ix-insider-team-row--bot .ix-insider-team-track {
  animation: ix-team-marquee 52s linear infinite reverse;
}
@keyframes ix-team-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ix-insider-team-marquee:hover .ix-insider-team-track {
  animation-play-state: paused;
}
/* Slight tuning of the homepage card inside this marquee context.
   Sized so two rows of 4:5 portraits fill the visual area while
   leaving a generous breathing margin to the pillar's bottom edge.
   Cap at 200px so two rows = ~500px tall total — fits even when
   browser chrome eats viewport on shorter laptop screens (≤1600 wide).
   Inherits the homepage's editorial filter (saturate 0.45 + warm
   overlay) from .ix-team-card so the two team sections share a
   consistent tonal language. */
.ix-insider-team-member {
  width: clamp(140px, 12vw, 200px) !important;
  cursor: default !important;
}
/* Bigger desktop monitors (1920+ at 100% scaling, viewport ≥ 1700px
   wide) have plenty of vertical headroom — restore the original
   spacing the team pillar had before the laptop-fit tightening.
   Bigger cards, bigger tag, more breathing room above/below the
   marquee. The narrower (≤ 1700px) defaults stay tight so the laptop
   doesn't clip row 2. */
@media (min-width: 1700px) {
  .ix-insider-team-member {
    width: clamp(200px, 13vw, 250px) !important;
  }
  .ix-insider-answer-pillar--team {
    padding-top: clamp(56px, 7vh, 88px) !important;
    padding-bottom: clamp(48px, 6vh, 80px) !important;
  }
  .ix-insider-answer-pillar--team .ix-insider-answer-pillar-visual {
    margin-top: clamp(20px, 2.6vh, 36px);
  }
  .ix-insider-answer-pillar--team .ix-insider-answer-tag {
    font-size: clamp(36px, 4.4vw, 64px);
    margin-bottom: clamp(8px, 1vh, 16px);
  }
  .ix-insider-team-marquee {
    gap: clamp(10px, 1.2vh, 18px);
  }
}

/* Reduced motion / mobile: scene collapses to natural-flow stacking. */
@media (prefers-reduced-motion: reduce) {
  .ix-insider-answer-scene { min-height: auto; --scene-prog: 1; }
  .ix-insider-answer-stage { position: relative; height: auto; }
  .ix-insider-answer-layer {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    padding: clamp(40px, 8vh, 80px) 0;
  }
  .ix-insider-team-track { animation: none !important; }
}

/* ---------- COMPARISON TABLE (the critical section) -------------- */
.ix-insider-compare {
  --compare-bg-t: 0;              /* 0 = white (matches Answer above), 1 = dark blue */
  position: relative;
  padding: clamp(110px, 14vh, 180px) clamp(24px, 4vw, 64px);
  /* Bg interpolates from white → ink-blue as the user scrolls into the
     section. #03050f is the same dark blue used on the homepage twoways
     + comparison sections. */
  background-color: color-mix(in srgb,
    #ffffff calc((1 - var(--compare-bg-t)) * 100%),
    #03050f calc(var(--compare-bg-t) * 100%));
  color: var(--fg-1);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  /* No transition on bg-color — both the closer (transparent) and the
     answer section above interpolate via CSS var instantly. Adding a
     transition here would make the comparison section lag behind the
     answer section by 150ms during scroll, producing a visible color
     seam at the boundary. */
}
/* Spotlight backdrop — champagne radial wash from the top, only visible
   AFTER the user has scrolled a full viewport height into the
   comparison section. Tied to --compare-spot-t (NOT --compare-bg-t)
   so the boundary with the answer section above stays seam-free:
   if the spotlight faded in at the same time as the bg, the
   compare top would be dark+champagne while the answer bottom is
   plain dark, producing a visible color difference at the boundary. */
.ix-insider-compare::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,
      rgba(236, 199, 119, 0.22) 0%,
      rgba(236, 199, 119, 0.06) 35%,
      transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 85%,
      rgba(189, 166, 216, 0.12) 0%,
      transparent 70%);
  opacity: var(--compare-spot-t, 0);
}
/* Make sure content sits above the spotlight overlay. */
.ix-insider-compare-inner { position: relative; z-index: 1; }
.ix-insider-compare-inner { max-width: 1200px; margin: 0 auto; }
.ix-insider-compare-title {
  margin: clamp(18px, 2.4vh, 30px) 0 clamp(48px, 6vh, 80px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ix-insider-compare-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   COMPARE inside the CLOSER glass box — overrides for when the comparison
   moves into the bottom Take-Your-Seat slot.
   ========================================================================== */
/* Wider glass box (was 1200px) so the comparison cards have room to
   breathe + the "Most masterminds…" title fits on one line at a
   smaller font. */
.ix-insider-closer-inner--compare {
  max-width: 1440px;
}
.ix-insider-closer-inner--compare .ix-insider-compare-title {
  /* Single-line per copy direction. */
  white-space: nowrap;
  text-wrap: nowrap;
  /* Smaller cap so the line reads as a section sub-headline inside
     the closer rather than as a hero-size title. */
  font-size: clamp(16px, 2.2vw, 32px);
  margin: clamp(14px, 1.8vh, 22px) auto clamp(22px, 3vh, 36px);
  color: #fff;
}
.ix-insider-closer-inner--compare .ix-insider-compare-vs {
  margin-bottom: clamp(20px, 2.6vh, 32px);
}
/* Tighter card sizing inside the closer — smaller titles, smaller
   bullets, smaller padding so the cards fit comfortably inside the
   closer's 100vh stage. */
.ix-insider-closer-inner--compare .ix-insider-compare-card-title {
  font-size: clamp(16px, 1.6vw, 24px);
}
.ix-insider-closer-inner--compare .ix-insider-compare-card-head {
  padding: clamp(18px, 2vw, 32px) clamp(20px, 2.2vw, 32px) clamp(14px, 1.6vw, 22px);
}
.ix-insider-closer-inner--compare .ix-insider-compare-list {
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 30px);
  gap: clamp(10px, 1.4vh, 16px);
}
.ix-insider-closer-inner--compare .ix-insider-compare-list li {
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.45;
}
/* The "winning" eXponential card has its own larger title — scale
   that down too so it doesn't overflow the card width. */
.ix-insider-closer-inner--compare .ix-insider-compare-card--new .ix-insider-compare-card-title {
  font-size: clamp(18px, 1.9vw, 28px);
}
/* Cards inside the closer's glass box don't have the standalone
   compare section's `.is-in` trigger to fade them in — the closer
   already fades the whole .ix-insider-closer-content in. So override
   the cards' default opacity:0 / translateY(28px) reveal-state. */
.ix-insider-closer-inner--compare .ix-insider-compare-card {
  opacity: 1;
  transform: none;
}
/* ---- VS COMPARISON — two cards side by side. The eXponential card
   overlaps the traditional card on the left, scales up slightly, and
   carries an animated pulsing gold border so it visibly "wins". ---- */
.ix-insider-compare-vs {
  display: grid;
  /* Equal columns + a real gap — both cards are the same size per CEO.
     The gold card stays the "highlighted choice" via fill, animated
     border, and glow rather than via being bigger. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(20px, 2.2vw, 40px);
  margin-bottom: clamp(56px, 8vh, 96px);
  text-align: left;
}
.ix-insider-compare-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}
.ix-insider-compare.is-in .ix-insider-compare-card--old {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 100ms;
}
.ix-insider-compare.is-in .ix-insider-compare-card--new {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 400ms;
}
.ix-insider-compare-card-head {
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px);
  text-align: center;
  border-bottom: 1px solid currentColor;
  /* Use currentColor for the divider so it inherits the card's text tone. */
}
.ix-insider-compare-card-eyebrow {
  display: block;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: clamp(8px, 1vh, 14px);
  opacity: 0.7;
}
.ix-insider-compare-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.ix-insider-compare-list {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 24px);
  flex: 1 1 auto;
}
.ix-insider-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.2vw, 18px);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.5;
}
.ix-insider-compare-mark {
  flex: 0 0 auto;
  width: clamp(22px, 1.8vw, 28px);
  height: clamp(22px, 1.8vw, 28px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 700;
  line-height: 1;
}

/* TRADITIONAL CARD — dark, dim, strikethrough list. Same size as the
   eXponential card per CEO direction; distinction is purely tonal
   (dark vs gold) rather than dimensional. */
.ix-insider-compare-card--old {
  background: #1a1614;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  z-index: 1;
}
.ix-insider-compare-card--old .ix-insider-compare-card-head {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.ix-insider-compare-card--old .ix-insider-compare-card-title {
  color: rgba(255, 255, 255, 0.7);
}
.ix-insider-compare-card--old .ix-insider-compare-list li {
  /* Strikethrough removed per copy direction — the dim text color
     alone carries the "dismissed/old way" treatment. */
}
.ix-insider-compare-card--old .ix-insider-compare-mark {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
/* Strikethrough doesn't apply to the icon since it's inside the li. */
.ix-insider-compare-card--old .ix-insider-compare-list li > span:last-child {
  display: inline;
}

/* eXPONENTIAL CARD — soft gold fill, the highlighted choice.
   Overlaps the traditional card slightly on the left, scales up via
   padding, and pulses an animated gold border ring. The overlap is
   small (just enough to layer the edges) — the traditional card adds
   its own right-padding below to keep content clear of the overlap. */
.ix-insider-compare-card--new {
  /* Layered background: gold fill in padding-box, rotating conic
     gradient in border-box. The transparent 3px border reveals the
     conic gradient — a glow spot continuously travels around the card
     edge as `--ix-compare-angle` interpolates 0→360. */
  background:
    linear-gradient(180deg, #f4dca0 0%, #e7c47f 55%, #ddb866 100%) padding-box,
    conic-gradient(
      from var(--ix-compare-angle),
      rgba(231, 196, 127, 0.55) 0deg,
      rgba(231, 196, 127, 0.55) 220deg,
      rgba(255, 248, 215, 1)    270deg,
      #ffffff                   295deg,
      rgba(255, 248, 215, 1)    320deg,
      rgba(231, 196, 127, 0.55) 360deg
    ) border-box;
  border: 3px solid transparent;
  color: #1a1614;
  z-index: 3;
  /* Static ambient glow under the card — no more pulsing. */
  box-shadow:
    0 40px 100px -40px rgba(231, 196, 127, 0.35),
    0 0 60px rgba(231, 196, 127, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  --ix-compare-angle: 0deg;
  animation: ix-compare-border-rotate 4.5s linear infinite;
}
/* Cards are now equal-sized; both share the base padding from
   .ix-insider-compare-card-head and .ix-insider-compare-list. The
   old card no longer needs extra right padding since nothing
   overlaps it anymore. */
.ix-insider-compare-card--new .ix-insider-compare-list {
  /* Center the whole list block horizontally within the card. Items
     stay left-aligned to each other (mark + text in a row), but the
     group as a whole sits in the center of the gold card. */
  width: fit-content;
  margin: 0 auto;
}

/* Register the animatable angle property — required for smooth
   interpolation of the conic-gradient rotation. Browsers without
   @property fall back to a static (non-rotating) gold border. */
@property --ix-compare-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ix-compare-border-rotate {
  to { --ix-compare-angle: 360deg; }
}

/* Reduced motion — freeze the gradient at a static angle. */
@media (prefers-reduced-motion: reduce) {
  .ix-insider-compare-card--new {
    animation: none;
    --ix-compare-angle: 45deg;
  }
}
.ix-insider-compare-card--new .ix-insider-compare-card-head {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 100%);
  border-bottom-color: rgba(26, 22, 20, 0.18);
}
.ix-insider-compare-card--new .ix-insider-compare-card-title {
  /* Same size as the traditional card's title — boxes equal, type equal. */
  color: #1a1614;
  letter-spacing: -0.005em;
}
.ix-insider-compare-card--new .ix-insider-compare-mark {
  background: transparent;        /* no circle bg — just the X mark */
  color: #1a1614;                 /* dark X on gold card */
}
.ix-insider-compare-card--new .ix-insider-compare-list li {
  font-weight: 700;               /* all bullet text bold per spec */
}
.ix-insider-compare-card--new .ix-insider-compare-list li b {
  font-weight: 800;
  color: #1a1614;
}
/* SVG sizing inside the mark — fits the existing circle dimensions. */
.ix-insider-compare-mark--x svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mobile: stack the cards, reset the overlap and the bigger sizing. */
@media (max-width: 900px) {
  .ix-insider-compare-vs {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 36px);
  }
  .ix-insider-compare-card--old { margin: 0; }
  .ix-insider-compare-card--new { margin-left: 0; }
}
.ix-insider-compare-reality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  text-align: left;
  margin-bottom: clamp(32px, 4vh, 48px);
}
.ix-insider-compare-reality-col {
  padding: clamp(28px, 3vw, 40px);
  border-radius: 12px;
  background: var(--bg-1);
  border: 1px solid rgba(255,255,255,0.06);
}
.ix-insider-compare-reality-col--new {
  border-color: rgba(236,199,119,0.32);
  box-shadow:
    0 0 60px -10px rgba(236,199,119,0.16),
    inset 0 1px 0 rgba(236,199,119,0.10);
}
.ix-insider-compare-reality-col h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.2;
  color: var(--fg-1);
}
.ix-insider-compare-reality-col--new h3 em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-compare-reality-col p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--fg-2);
}
.ix-insider-compare-reality-col--old p { color: var(--fg-3); }
.ix-insider-compare-payoff {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  color: var(--fg-1);
  text-align: center;
}
.ix-insider-compare-payoff em {
  font-style: italic;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- THE NUMBERS ------------------------------------------ */
.ix-insider-numbers {
  position: relative;
  /* Extra top padding gives the title room to breathe above the
     workstation backdrop — feels less crammed under whatever section
     precedes it. Bottom padding unchanged. */
  min-height: clamp(820px, 100vh, 1100px);
  padding:
    clamp(120px, 16vh, 220px)
    clamp(24px, 4vw, 64px)
    clamp(60px, 9vh, 130px);
  background: var(--bg-0);
  color: var(--fg-1);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
/* Uploaded background image. */
.ix-insider-numbers-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('images/expressbgbu.jpg') center / cover no-repeat;
  filter: saturate(0.9);
}
/* TOP: solid dark through 32% so the title + intro paragraph have a
   pure black backdrop. MIDDLE (45–65%): photo's subject reads clearly.
   BOTTOM (75% onward): aggressively dark so the photo fades to black
   below the glass card. */
.ix-insider-numbers-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 1.00) 0%,
      rgba(0, 0, 0, 0.95) 18%,
      rgba(0, 0, 0, 0.78) 32%,
      rgba(0, 0, 0, 0.35) 44%,
      rgba(0, 0, 0, 0.05) 54%,
      rgba(0, 0, 0, 0.00) 60%,
      rgba(0, 0, 0, 0.35) 72%,
      rgba(0, 0, 0, 0.80) 85%,
      rgba(0, 0, 0, 1.00) 100%),
    radial-gradient(ellipse 110% 100% at 50% 50%,
      transparent 40%,
      rgba(0, 0, 0, 0.35) 100%);
}
/* Film grain — subtle on top of the bg image. */
.ix-insider-numbers-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.30;
}
.ix-insider-numbers-inner {
  position: relative;
  z-index: 3;
  max-width: 1160px;
  margin: 0 auto;
  /* Two-zone layout: top group (title + intro) pinned to top of inner
     (which is now ~50% closer to the section's top edge), glass card
     pinned to bottom — lands near the chair because of the large bottom
     padding. */
  min-height: calc(clamp(1100px, 130vh, 1500px) - clamp(60px, 8vh, 110px) - clamp(180px, 24vh, 320px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ix-insider-numbers-top { flex: 0 0 auto; }
/* Minimal gap between the head block and the body paragraph below it. */
.ix-insider-numbers-head { margin-bottom: clamp(10px, 1.4vh, 18px); }
.ix-insider-numbers .ix-insider-numbers-body { margin: 0 auto; }
.ix-insider-numbers .ix-insider-numbers-glass { flex: 0 0 auto; }
.ix-insider-numbers-title {
  margin: clamp(18px, 2.4vh, 30px) 0 clamp(8px, 1.2vh, 14px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Soft authority gradient + slow sweep. The default --grad-authority
     dips through #C98A73 (terracotta) and #BDA6D8 (lavender), which
     against a dark backdrop reads as faded patches on certain letters
     mid-sweep. This soft variant keeps every stop in the bright cream
     /champagne register so the title stays uniformly legible while
     the warm hue moves across. Wider background-size (300%) + longer
     duration (18s) make the motion gentle, not flashy. */
  background-image: linear-gradient(
    100deg,
    #F5EBD9  0%,
    #ECC777 22%,
    #F3D9C7 44%,
    #E6B8D9 58%,
    #ECC777 78%,
    #F5EBD9 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ix-numbers-title-sweep 18s linear infinite;
}
@keyframes ix-numbers-title-sweep {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-numbers-title { animation: none; }
}
.ix-insider-numbers-sub {
  /* Tight bottom margin so the body paragraph sits close to the
     "…and gains exponential value" line. */
  margin: 0 0 clamp(12px, 1.6vh, 20px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  color: var(--color-champagne);
}
/* Coin / pin / stage styles retired — the conversion visual was
   removed from this section. Body content now sits in normal flow. */
.ix-insider-numbers-stage,
.ix-insider-numbers-pin,
.ix-insider-numbers-flow,
.ix-insider-numbers-conversion { display: none; }
.ix-insider-numbers-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(24px, 3vw, 36px) clamp(32px, 4vw, 48px);
  border-radius: 999px;
  border: 1px solid rgba(236,199,119,0.32);
  background: rgba(236,199,119,0.04);
  min-width: clamp(180px, 22vw, 240px);
}
.ix-insider-numbers-coin--out {
  border-color: rgba(236,199,119,0.7);
  background: rgba(236,199,119,0.10);
  box-shadow:
    0 0 40px rgba(236,199,119,0.22),
    inset 0 1px 0 rgba(236,199,119,0.18);
}
.ix-insider-numbers-coin-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.ix-insider-numbers-coin--out .ix-insider-numbers-coin-amount {
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-numbers-coin-amount sup {
  font-size: 0.5em;
  vertical-align: super;
}
.ix-insider-numbers-coin-label {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ix-insider-numbers-arrow {
  color: var(--color-champagne);
  display: flex;
  align-items: center;
}
.ix-insider-numbers-arrow svg { width: clamp(40px, 5vw, 64px); height: auto; }
.ix-insider-numbers-body {
  max-width: 720px;
  margin: 0 auto clamp(24px, 3vh, 40px);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.75;
  color: var(--fg-2);
  text-align: left;
}
.ix-insider-numbers-body p { margin: 0 0 22px; }
.ix-insider-numbers-body p:last-child { margin-bottom: 0; }
.ix-insider-numbers-body b { color: var(--fg-1); }

/* B1 — Cinematic giant pull-quote. */
.ix-insider-numbers-quote {
  max-width: 1000px;
  margin: clamp(80px, 12vh, 140px) auto;
  padding: 0 clamp(12px, 2vw, 32px);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.ix-insider-numbers-quote-line {
  display: block;
  margin: 0;
}
.ix-insider-numbers-quote-line--dim {
  color: rgba(255, 255, 255, 0.42);
}
.ix-insider-numbers-quote-line--accent {
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 40px rgba(231, 196, 127, 0.22));
}

/* C1 — Menu cards. */
.ix-insider-numbers-menu {
  margin: 0 auto clamp(56px, 8vh, 96px);
  text-align: left;
}
.ix-insider-numbers-menu-label {
  display: block;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-champagne);
  margin-bottom: clamp(28px, 4vh, 44px);
}
.ix-insider-numbers-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.ix-insider-numbers-card {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(231, 196, 127, 0.18);
  border-radius: clamp(16px, 1.6vw, 24px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 340ms ease,
    background 340ms ease,
    box-shadow 340ms ease;
}
.ix-insider-numbers-card:hover {
  transform: translateY(-8px);
  border-color: rgba(231, 196, 127, 0.5);
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    0 30px 80px -30px rgba(231, 196, 127, 0.25),
    0 0 0 1px rgba(231, 196, 127, 0.25);
}
.ix-insider-numbers-card-icon {
  width: clamp(48px, 4.6vw, 64px);
  height: clamp(48px, 4.6vw, 64px);
  margin-bottom: clamp(20px, 2.6vh, 32px);
  color: var(--color-champagne);
  transition: transform 340ms ease, color 340ms ease;
}
.ix-insider-numbers-card-icon svg { width: 100%; height: 100%; display: block; }
.ix-insider-numbers-card:hover .ix-insider-numbers-card-icon {
  transform: scale(1.08);
  color: #fce8b6;
}
.ix-insider-numbers-card h3 {
  margin: 0 0 clamp(10px, 1.2vh, 14px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.ix-insider-numbers-card p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: var(--fg-2);
}

/* Finale block — closer + tag. */
.ix-insider-numbers-finale {
  text-align: center;
}
.ix-insider-numbers-closer {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--fg-1);
  margin: 0 0 clamp(14px, 2vh, 20px);
}
.ix-insider-numbers-tag {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--fg-2);
  margin: 0;
}
.ix-insider-numbers-tag em {
  font-style: italic;
  font-weight: 600;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Numbers section — responsive + reduced motion. */
@media (max-width: 900px) {
  .ix-insider-numbers-cards { grid-template-columns: 1fr; gap: 16px; }
  .ix-insider-numbers-pin { position: static; padding: 0 0 24px; background: transparent; }
  .ix-insider-numbers-quote { font-size: clamp(34px, 9vw, 56px); margin: clamp(56px, 9vh, 96px) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-numbers-card,
  .ix-insider-numbers-card-icon { transition: none !important; }
  .ix-insider-numbers-card:hover { transform: none; }
}

/* ---------- INSIDE THE ROOM — three pillars ---------------------- */
/* ============================================================
   INSIDE THE ROOM — Full-bleed cinematic 100vh pillars
   Each pillar is 100vw × 100vh with a full-screen image bg, a
   side-gradient overlay that darkens the copy side, and a glass
   text panel anchored to LEFT or RIGHT (alternating).
   ============================================================ */
.ix-insider-room {
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
}
/* Header band — full-width LIGHT theme (ivory/white), sits above the
   dark cinematic pillars below. The closer ribbon stays on dark. */
.ix-insider-room-headerwrap {
  background: #FFFFFF;
  padding: clamp(110px, 14vh, 180px) clamp(24px, 4vw, 64px) clamp(80px, 11vh, 140px);
}
/* Closer section — wraps the ribbon AFTER the sticky-pillar stack.
   Heavy padding-bottom (matched against the dark stretch ABOVE the
   ribbon from pillar 3's exit + tail spacer) so the dark area below
   the ribbon visually equals the dark area above. */
.ix-insider-room-closer {
  background: var(--bg-0);
  padding: clamp(40px, 5vh, 60px) 0 clamp(140px, 20vh, 220px);
}
.ix-insider-room-ribbonwrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}
.ix-insider-room-header {
  max-width: 1360px;
  margin: 0 auto;
  text-align: center;
}
.ix-insider-room-title {
  margin: clamp(18px, 2.4vh, 30px) 0 clamp(8px, 1.2vh, 14px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Whole title now in the authority gradient (was: only the `em`
     was gradient and the rest sat in #0A0E1F navy). */
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-room-title em {
  font-style: normal;
}
.ix-insider-room-sub {
  margin: 0 auto;
  max-width: 64ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: rgba(10, 14, 31, 0.72);
}
/* The shared `.ix-eyebrow.ix-eyebrow-accent` defaults to a champagne
   color that's still readable on white, but slightly muted to pull
   it toward the editorial palette of this header. */
.ix-insider-room-headerwrap .ix-eyebrow {
  color: #b4863a;
}

/* ------------- Pillar — full bleed cinematic stage ------------- */
/* Sticky stack: each pillar pins at top:0 for 100vh. Pillars later
   in DOM cover earlier ones, so P2 visually rises up over P1, then
   P3 over P2, as the user scrolls. */
.ix-insider-pillar {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  /* No min-height — having both height:100vh AND min-height:720px
     could push the pillar taller than the viewport on small screens,
     breaking sticky positioning (pillar bottom extends below viewport
     and the sticky bound check gets confused). Height should match
     viewport exactly so sticky always behaves predictably. */
  overflow: hidden;
  background: #04060d;
  isolation: isolate;
}
/* z-index: later pillars sit ABOVE earlier ones so they cover as they rise. */
.ix-insider-pillar[data-pillar="1"] { z-index: 1; }
.ix-insider-pillar[data-pillar="2"] { z-index: 2; }
.ix-insider-pillar[data-pillar="3"] { z-index: 3; }

/* Delay between rises — margin-bottom pushes the next sibling's
   natural top further down. Pillars 1 and 2 use 60vh to give the
   next pillar room to rise. Pillar 3 gets no extra margin (its
   pinned-alone time comes from the tail spacer below instead, which
   is cleaner than a giant margin that the browser might mishandle
   in long sticky-stacked sections). */
.ix-insider-pillar[data-pillar="1"],
.ix-insider-pillar[data-pillar="2"] {
  margin-bottom: 60vh;
}

/* Tail spacer — the runway that gives pillar 3 its pinned-alone time
   at the top of the viewport. With pillar 3's natural top at ~345vh
   inside the section, this tail extends the section's height so
   pillar 3's sticky bound reaches 60vh past its pin point — a single
   clean viewport of held-at-top time. */
.ix-insider-pillar-tail {
  height: 60vh;
  pointer-events: none;
}

/* Full-bleed background image. */
.ix-insider-pillar-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ix-insider-pillar-bg img,
.ix-insider-pillar-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* When the copy is on the LEFT, push the image subject to the right
     so the gradient overlay covers the left side cleanly. */
  object-position: 80% 50%;
  transform: scale(1.04);
  transition: transform 1200ms var(--ease-quint);
  will-change: transform;
}
.ix-insider-pillar[data-flow="text-right"] .ix-insider-pillar-bg img,
.ix-insider-pillar[data-flow="text-right"] .ix-insider-pillar-bg video {
  object-position: 20% 50%;
}
.ix-insider-room.is-in .ix-insider-pillar-bg img,
.ix-insider-room.is-in .ix-insider-pillar-bg video {
  transform: scale(1.0);
}

/* Side-gradient overlay — heavy black on the copy side, clear on
   the image side. Plus a vertical fade: subtle darken at the top
   and a STRONG fade-to-black at the bottom so each pillar bridges
   cleanly into the next section. */
.ix-insider-pillar-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.55) 78%,
      rgba(4,6,13,0.98) 100%),
    linear-gradient(90deg,
      rgba(4,6,13,0.95) 0%,
      rgba(4,6,13,0.78) 28%,
      rgba(4,6,13,0.32) 52%,
      rgba(4,6,13,0) 75%);
}
.ix-insider-pillar[data-flow="text-right"] .ix-insider-pillar-overlay {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.55) 78%,
      rgba(4,6,13,0.98) 100%),
    linear-gradient(270deg,
      rgba(4,6,13,0.95) 0%,
      rgba(4,6,13,0.78) 28%,
      rgba(4,6,13,0.32) 52%,
      rgba(4,6,13,0) 75%);
}

/* Copy panel — anchored top-left or top-right (above the tray). Title
   pushed deeper into the pillar so it sits closer to the cards below
   rather than hugging the top edge. */
.ix-insider-pillar-panel {
  position: absolute;
  /* Anchored higher so the title doesn't collide with the
     bottom-anchored card tray on shorter laptop viewports (~900vh).
     At 1080vh this still leaves room for the top edge of the panel
     to breathe below the nav. */
  top: clamp(80px, 12vh, 180px);
  z-index: 2;
  width: clamp(360px, 50vw, 760px);
  max-width: calc(100% - clamp(48px, 8vw, 160px));
  padding: clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vh, 24px);
}
.ix-insider-pillar[data-flow="text-left"] .ix-insider-pillar-panel {
  left: clamp(40px, 6vw, 120px);
}
.ix-insider-pillar[data-flow="text-right"] .ix-insider-pillar-panel {
  right: clamp(40px, 6vw, 120px);
}

/* Tray — full-width zone for the cards/carousel. Pushed back down
   toward the bottom (but still above the strong fade-to-black band)
   so it doesn't crowd the title. The clamp tuned so the gap to the
   panel above stays clean at every laptop+ height. */
.ix-insider-pillar-tray {
  position: absolute;
  left: clamp(40px, 6vw, 120px);
  right: clamp(40px, 6vw, 120px);
  bottom: clamp(48px, 7vh, 110px);
  z-index: 2;
}

.ix-insider-pillar-num {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-champagne);
  padding-bottom: clamp(10px, 1.2vh, 16px);
  border-bottom: 1px solid rgba(236,199,119,0.32);
}
.ix-insider-pillar-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* Capped at 80px (was 96px) — the 96 max combined with the
     bottom-anchored tray was crowding the title on shorter
     laptop viewports. 80 still reads as a big display title. */
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.ix-insider-pillar-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ------------- List items rendered as cards (image left + text right) ------------- */

/* Static 3-up grid (pillars 2, 3). */
.ix-insider-pillar-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

/* Carousel container (pillar 1) — viewport clips to 3 cards, JS
   translates the track to reveal the next set. */
.ix-insider-pillar-carousel {
  position: relative;
  --visible: 3;
  --gap: clamp(12px, 1.2vw, 18px);
  --carousel-tx: 0px;
}
.ix-insider-pillar-carousel-viewport {
  overflow: hidden;
  /* Headroom so the card's hover translate + shadow don't get clipped
     at the top/bottom edge. */
  padding: 16px 0 24px;
  margin: -16px 0 -24px;
}
.ix-insider-pillar-carousel-track {
  display: flex;
  gap: var(--gap);
  transform: translate3d(var(--carousel-tx, 0px), 0, 0);
  transition: transform 520ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform;
}
.ix-insider-pillar-carousel .ix-insider-pillar-card {
  /* (100% - gap*(visible-1)) / visible */
  flex: 0 0 calc((100% - var(--gap) * (var(--visible) - 1)) / var(--visible));
}

/* Nav arrows — pinned beneath the carousel, gold pill buttons. */
.ix-insider-pillar-carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: clamp(12px, 1.6vh, 20px);
}
.ix-insider-pillar-carousel-btn {
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  border-radius: 50%;
  border: 1px solid rgba(236,199,119,0.4);
  background: rgba(255,255,255,0.04);
  color: var(--color-champagne);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 240ms ease, background 240ms ease, color 240ms ease, transform 240ms ease;
}
.ix-insider-pillar-carousel-btn:hover {
  border-color: rgba(236,199,119,0.85);
  background: rgba(236,199,119,0.12);
  color: #fce8b6;
}
.ix-insider-pillar-carousel-btn:active { transform: scale(0.94); }
.ix-insider-pillar-carousel-btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}
.ix-insider-pillar-carousel-btn svg {
  width: 44%;
  height: 44%;
  display: block;
}

/* Individual card — image fills LEFT edge-to-edge, text on the right. */
.ix-insider-pillar-card {
  display: grid;
  grid-template-columns: clamp(140px, 13vw, 200px) 1fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
  /* Capped at 260 (was 320) so the tray fits comfortably below the
     title at shorter laptop viewports. */
  min-height: clamp(180px, 24vh, 260px);
  border: 1px solid rgba(236,199,119,0.16);
  border-radius: clamp(14px, 1.2vw, 20px);
  background:
    linear-gradient(180deg, rgba(10,13,24,0.65), rgba(6,8,15,0.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color 280ms ease, background 280ms ease, transform 280ms var(--ease-quint), box-shadow 280ms ease;
}
.ix-insider-pillar-card:hover {
  border-color: rgba(236,199,119,0.5);
  background:
    linear-gradient(180deg, rgba(236,199,119,0.08), rgba(10,13,24,0.7));
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(236,199,119,0.28);
}

/* Image area — fills the full left edge of the card (flush top/bottom/left),
   gradient + centered icon. Subtle divider on the right edge. */
.ix-insider-pillar-card-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-champagne);
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #2a3450 0%, #0f1828 60%, #1f2a44 100%);
  border-right: 1px solid rgba(236,199,119,0.20);
}
.ix-insider-pillar-card-thumb[data-tint="b"] {
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #2a2444 0%, #110d22 50%, #211b3a 100%);
}
.ix-insider-pillar-card-thumb[data-tint="c"] {
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #2c2218 0%, #150f0a 50%, #221a12 100%);
}
.ix-insider-pillar-card-thumb svg {
  width: clamp(48px, 4.4vw, 72px);
  height: clamp(48px, 4.4vw, 72px);
  display: block;
  /* Strokes pick up the authority gradient (champagne → coral → lavender)
     from #ix-grad-icon defined in the page defs. Any fill="currentColor"
     dots picked up the gradient too via the rule below. */
  stroke: url(#ix-grad-icon);
  /* Gentle glow + pulse — subtle, off-cycle per card via animation-delay
     so the row of icons doesn't pulse in unison. */
  animation: ix-icon-pulse 3.6s ease-in-out infinite;
  will-change: transform, filter;
}
.ix-insider-pillar-card-thumb svg [fill="currentColor"] {
  fill: url(#ix-grad-icon);
}
@keyframes ix-icon-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 10px rgba(236, 199, 119, 0.28));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 22px rgba(236, 199, 119, 0.55));
  }
}
/* Stagger so adjacent icons don't pulse in unison. */
.ix-insider-pillar-card:nth-child(2) .ix-insider-pillar-card-thumb svg { animation-delay: -1.2s; }
.ix-insider-pillar-card:nth-child(3) .ix-insider-pillar-card-thumb svg { animation-delay: -2.4s; }
.ix-insider-pillar-card:nth-child(4) .ix-insider-pillar-card-thumb svg { animation-delay: -0.6s; }
.ix-insider-pillar-card:nth-child(5) .ix-insider-pillar-card-thumb svg { animation-delay: -1.8s; }
.ix-insider-pillar-card:nth-child(6) .ix-insider-pillar-card-thumb svg { animation-delay: -3.0s; }
@media (prefers-reduced-motion: reduce) {
  .ix-insider-pillar-card-thumb svg {
    animation: none;
    filter: drop-shadow(0 4px 10px rgba(236, 199, 119, 0.30));
  }
}

.ix-insider-pillar-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 0.8vh, 12px);
  padding: clamp(22px, 2.2vw, 36px);
  min-width: 0;
}
.ix-insider-pillar-card-text b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.22;
  color: var(--fg-1);
}
.ix-insider-pillar-card-text span {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.55;
  color: var(--fg-2);
}

/* ------------- Closer ribbon ------------- */
.ix-insider-room-ribbonwrap { margin-top: clamp(60px, 9vh, 120px); }
.ix-insider-room-ribbon {
  padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) padding-box,
    linear-gradient(90deg,
      rgba(236,199,119,0.55) 0%,
      rgba(236,199,119,0.12) 50%,
      rgba(189,166,216,0.45) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px -28px rgba(236,199,119,0.25);
}
.ix-insider-room-ribbon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.2vw, 56px);
  height: clamp(40px, 3.2vw, 56px);
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(236,199,119,0.22) 0%, rgba(236,199,119,0.06) 60%, transparent 100%);
  color: var(--color-champagne);
  flex: 0 0 auto;
}
.ix-insider-room-ribbon-mark svg { width: 56%; height: 56%; }
.ix-insider-room-ribbon-text {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 600;
  color: var(--fg-1);
}
.ix-insider-room-ribbon-text em {
  /* Upright per copy direction — was italic. The authority gradient
     fill still applies so the phrase reads as the brand accent. */
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-room-ribbon-cta { flex: 0 0 auto; }

/* ------------- Responsive ------------- */
@media (max-width: 960px) {
  .ix-insider-pillar {
    height: auto;
    min-height: 100vh;
  }
  .ix-insider-pillar-overlay {
    /* On mobile, vertical gradient — copy sits over the lower portion. */
    background: linear-gradient(180deg,
      rgba(4,6,13,0.2) 0%,
      rgba(4,6,13,0.55) 40%,
      rgba(4,6,13,0.92) 75%,
      rgba(4,6,13,0.98) 100%) !important;
  }
  .ix-insider-pillar-panel {
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: clamp(40px, 8vw, 80px) clamp(24px, 5vw, 40px);
    margin-top: 40vh;
  }
  .ix-insider-pillar[data-flow="text-left"] .ix-insider-pillar-panel,
  .ix-insider-pillar[data-flow="text-right"] .ix-insider-pillar-panel {
    left: auto;
    right: auto;
  }
  .ix-insider-pillar-title { font-size: clamp(36px, 9vw, 64px); }
  /* Pillars 2 + 3: 3-up grid → single column on mobile. */
  .ix-insider-pillar-cards { grid-template-columns: 1fr; }
  /* Pillar 1 carousel: show one card at a time on mobile. */
  .ix-insider-pillar-carousel { --visible: 1; }
  .ix-insider-room-ribbon { border-radius: clamp(20px, 4vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-insider-pillar { opacity: 1; transition: none; }
  .ix-insider-pillar-bg img { transition: none; transform: scale(1); }
}

/* ---------- MEMBERSHIP TIERS ------------------------------------- */
/* ============================================================
   MEMBERSHIP TIERS — LIGHT altitude theme, fitted to 100vh
   Mountain background (altitudebg.jpg) anchored to the bottom.
   Three cards staggered like a rising staircase — Founding at
   base, Partner midway, VIP at the summit (soft gradient card).
   Accents flow champagne → coral → lavender, matching the site's
   authority gradient.
   ============================================================ */
.ix-insider-tiers {
  position: relative;
  min-height: 100vh;
  padding: clamp(58px, 8.4vh, 115px) clamp(24px, 4vw, 64px) clamp(30px, 5vh, 70px);
  background: #f6f3ec;
  color: #0A0E1F;
  text-align: left;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Default accent (Founding) — deep champagne (brand palette, darkened
     for readability on the cream section bg). */
  --tier-accent: #B4863A;
  --tier-accent-soft: rgba(236, 199, 119, 0.18);
}
/* Bottom-anchored mountain photograph fading up into the ivory bg.
   Sequenced reveal: bg fades in first, then header, then cards.
   Background opacity ramps from 0 → 1 the moment .is-in fires. */
.ix-insider-tiers-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1000ms var(--ease-quint);
}
.ix-insider-tiers.is-in .ix-insider-tiers-bg { opacity: 1; }
.ix-insider-tiers-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}
/* Light ivory wash so the mountains read mostly in the lower third. */
.ix-insider-tiers-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #f6f3ec 0%,
    rgba(246, 243, 236, 0.92) 28%,
    rgba(246, 243, 236, 0.55) 55%,
    rgba(246, 243, 236, 0.18) 78%,
    rgba(246, 243, 236, 0.05) 100%);
}
/* Centered container with a 2-row × 3-column CSS grid: the header
   occupies the LEFT side of row 1, VIP spans both rows on the RIGHT
   (so it visually climbs alongside the title), and Founding/Partner
   sit in row 2 in the left + middle columns (safely under the header
   text). This way the cards overlap the header zone on the right
   without colliding with the title or sub paragraph. */
.ix-insider-tiers-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  /* Tight gaps — cards read as a connected pricing table. */
  column-gap: clamp(4px, 0.6vw, 10px);
  row-gap: clamp(24px, 3.5vh, 44px);
  padding-bottom: clamp(40px, 6vh, 80px);
}

/* Header — spans full width, centered above the cards. Second beat of
   the reveal sequence: fades in + rises after the bg has had time to
   establish. */
.ix-insider-tiers-header {
  grid-column: 1 / -1;
  grid-row: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  /* Header rises immediately when is-copy-in fires (user just hit the
     50vh scroll gate). No upfront delay — they've been waiting. */
  transition:
    opacity 900ms var(--ease-quint),
    transform 900ms var(--ease-quint);
}
.ix-insider-tiers.is-copy-in .ix-insider-tiers-header {
  opacity: 1;
  transform: translateY(0);
}
/* Eyebrow: centered, kept small so the title leads visually. */
.ix-insider-tiers .ix-eyebrow {
  display: block;
  color: var(--tier-accent);
  text-align: center;
  margin: 0 0 clamp(14px, 2vh, 24px);
  padding: 0;
}
.ix-insider-tiers-title {
  margin: 0 auto clamp(20px, 3vh, 32px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #0A0E1F;
}
.ix-insider-tiers-sub {
  margin: 0 auto;
  max-width: 92ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(10, 14, 31, 0.72);
  text-align: center;
  text-wrap: balance;
}
.ix-insider-tiers-sub b { color: #0A0E1F; font-weight: 600; }

/* Monthly / Yearly billing toggle — two pill buttons inside a dark
   rounded container that sits centered under the "Membership Tiers"
   heading. The active button gets the champagne authority gradient
   fill + dark ink text. */
.ix-insider-tiers-toggle {
  margin: clamp(16px, 2.4vh, 28px) auto 0;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 14, 31, 0.08);
  border: 1px solid rgba(10, 14, 31, 0.12);
  gap: 2px;
}
.ix-insider-tiers-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(96px, 9vw, 132px);
  padding: clamp(8px, 1vh, 12px) clamp(20px, 2vw, 32px);
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 14, 31, 0.55);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
}
.ix-insider-tiers-toggle-btn:hover { color: #0A0E1F; }
.ix-insider-tiers-toggle-btn.is-active {
  color: #1a1208;
  background: var(--grad-authority);
  box-shadow: 0 6px 16px -8px rgba(217, 185, 125, 0.55);
}
.ix-insider-tiers-toggle-btn.is-active:hover { color: #1a1208; }

/* Stack — display:contents so its 3 card children become direct grid
   items of .ix-insider-tiers-inner. The inner's parent grid then
   handles per-card placement (row/column). */
.ix-insider-tiers-stack {
  display: contents;
}

/* Card — flex column so the CTA can sit pinned to the bottom while
   all cards share the same height. */
.ix-insider-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px) clamp(24px, 2.4vw, 36px);
  border-radius: clamp(14px, 1.2vw, 20px);
  background: linear-gradient(180deg, rgba(20, 22, 35, 0.92), rgba(10, 14, 31, 0.95));
  border: 1px solid rgba(236, 199, 119, 0.18);
  text-align: left;
  box-shadow:
    inset 0 -5px 0 0 var(--tier-accent),
    0 30px 80px -30px rgba(0, 0, 0, 0.85),
    0 8px 24px -10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(36px);
  /* Cards rise ~600ms after the header — enough that the user reads
     the title before the pricing arrives, but not so long it feels
     stalled after the 50vh scroll gate. */
  transition:
    opacity 900ms var(--ease-quint) 600ms,
    transform 900ms var(--ease-quint) 600ms;
}
/* Standard pricing table — connector pins removed for a clean look. */
.ix-insider-tier::before { display: none; }

.ix-insider-tiers.is-copy-in .ix-insider-tier { opacity: 1; transform: translateY(0); }
/* Stagger the three cards 160ms apart from each other (added on top of
   the base delay above), so they cascade left → right after the user
   has scrolled ~50vh into the section. */
.ix-insider-tiers.is-copy-in .ix-insider-tier[data-tier="2"] {
  transition-delay: 760ms;
}
.ix-insider-tiers.is-copy-in .ix-insider-tier[data-tier="3"] {
  transition-delay: 920ms;
}

/* All three cards in row 2 — same row, same baseline, same height. */
.ix-insider-tier[data-tier="1"] {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  /* Deep navy blue background — darker than the base card so Insider
     reads as the cool/calm starter tier. */
  background:
    linear-gradient(180deg, #0A1428 0%, #050D1F 100%);
  border-color: rgba(80, 110, 170, 0.22);
}
.ix-insider-tier[data-tier="2"] {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
}
.ix-insider-tier[data-tier="3"] {
  grid-column: 3;
  grid-row: 2;
  align-self: stretch;
}

/* Tier 2 (Partner / Midway) — coral/copper from the authority gradient,
   slightly darkened so the pin reads against the cream section bg. */
.ix-insider-tier[data-tier="2"] {
  --tier-accent: #B36B52;
  --tier-accent-soft: rgba(201, 138, 115, 0.18);
}
/* Tier 3 (VIP / Summit) — filled with SOFT GOLD gradient. Champagne
   wash that reads as a warm gold card (like the old VIP pricing card,
   adapted for dark theme). Dark navy ink for text reads on the gold. */
.ix-insider-tier--top {
  --tier-accent: #6F4E18;
  --tier-accent-soft: rgba(111, 78, 24, 0.18);
  background:
    linear-gradient(135deg,
      #F2E8D8 0%,
      #ECC777 35%,
      #D9B97D 70%,
      #C9A565 100%);
  border-color: rgba(180, 134, 58, 0.6);
  /* Soft champagne glow — keeps the static base shadow and adds a
     gentle outer halo that breathes in opacity only. No size change,
     no harsh shadow expansion. */
  box-shadow:
    0 36px 90px -30px rgba(236, 199, 119, 0.45),
    0 14px 32px -14px rgba(180, 134, 58, 0.40),
    0 0 0 1px rgba(180, 134, 58, 0.35) inset;
  animation: ix-vip-glow-pulse 4s ease-in-out infinite;
}
@keyframes ix-vip-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(236, 199, 119, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(236, 199, 119, 0.35));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-tier--top {
    animation: none;
    filter: drop-shadow(0 0 18px rgba(236, 199, 119, 0.20));
  }
}
/* VIP card text — dark navy ink on the gold gradient for readability. */
.ix-insider-tier--top .ix-insider-tier-eyebrow {
  color: #5A3E10;
}
.ix-insider-tier--top .ix-insider-tier-price-num,
.ix-insider-tier--top .ix-insider-tier-price-cadence {
  color: #1A1209;
}
.ix-insider-tier--top .ix-insider-tier-tagline {
  color: #0A0E1F;
}
.ix-insider-tier--top .ix-insider-tier-body {
  color: rgba(10, 14, 31, 0.78);
}
/* VIP card: dark separator + dark italic "Best for" line on the
   gold gradient surface (the default white-on-dark would be invisible). */
.ix-insider-tier--top .ix-insider-tier-rule {
  background: rgba(10, 14, 31, 0.22);
}
.ix-insider-tier--top .ix-insider-tier-bestfor {
  color: #0A0E1F;
}
/* VIP card uses dark ink for the fX chip (champagne is invisible on
   the gold gradient surface). */
.ix-insider-tier--top .ix-insider-tier-fx {
  color: #5A3E10;
}
.ix-insider-tier--top .ix-insider-tier-body b {
  color: #0A0E1F;
}
.ix-insider-tier--top .ix-insider-tier-price {
  border-bottom-color: rgba(10, 14, 31, 0.28);
}
.ix-insider-tier--top .ix-insider-tier-bonus {
  background: rgba(10, 14, 31, 0.10);
  border-color: rgba(10, 14, 31, 0.30);
  color: #0A0E1F;
}

/* Tier name — proper display title, not an eyebrow. */
.ix-insider-tier-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--tier-accent);
  margin-bottom: clamp(12px, 1.8vh, 20px);
}

/* Price block — large, bold, brand-colored. */
.ix-insider-tier-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-bottom: clamp(12px, 1.8vh, 20px);
  padding-bottom: clamp(12px, 1.8vh, 20px);
  border-bottom: 1px dashed rgba(236, 199, 119, 0.22);
}
.ix-insider-tier-price-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tier-accent);
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
.ix-insider-tier-price-cadence {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--tier-accent);
}
/* Struck-through original price, shown on its own line BELOW the active
   price as a low-opacity reference (now $Y, was $X). order:1 pushes it
   past the num/cadence (default order 0); flex-basis:100% forces it to a
   new line. Lighter weight (400) so it never reads like the 800 new price.
   Inherits the tier accent so it works on dark and gold cards alike. */
.ix-insider-tier-price-old {
  order: 1;
  flex-basis: 100%;
  margin-top: clamp(4px, 0.8vh, 7px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--tier-accent);
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.ix-insider-tier-tagline {
  margin: 0 0 clamp(6px, 1vh, 12px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.3;
  color: var(--fg-1);
}
.ix-insider-tier-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.95vw, 15px);
  line-height: 1.5;
  color: var(--fg-2);
}
.ix-insider-tier-body b { color: var(--fg-1); font-weight: 600; }

/* Thin separator between description and the "Best for" italic line. */
.ix-insider-tier-rule {
  display: block;
  margin: clamp(14px, 2vh, 22px) 0;
  height: 1px;
  background: rgba(236, 199, 119, 0.22);
}

/* "Best for: …" italic line — bold so it visually anchors as the
   "this tier suits X" summary. Slightly dimmer than the price + name
   accent but brighter than body copy so it earns the eye. */
.ix-insider-tier-bestfor {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.5;
  color: var(--fg-1);
}
.ix-insider-tier-bestfor em {
  font-style: italic;
  font-weight: 700;
}

/* Inline fX value chip — used in the body copy to visually highlight
   the Flex Fund totals like 1,800fX, 5,500fX, 10,800fX. Champagne
   color, slightly heavier weight than surrounding body text. */
.ix-insider-tier-fx {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--tier-accent);
  letter-spacing: 0.01em;
}
.ix-insider-tier-fx sup {
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 700;
}
.ix-insider-tier-bonus {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  background: rgba(236, 199, 119, 0.16);
  border: 1px solid rgba(236, 199, 119, 0.45);
  border-radius: 4px;
  color: var(--tier-accent);
  font-size: 0.95em;
}
.ix-insider-tier-bonus sup { font-size: 0.55em; vertical-align: super; }

/* Non-VIP cards (dark surface) use bright champagne/coral palette for
   their accent text since they sit on a dark gradient card surface. */
.ix-insider-tier[data-tier="1"] .ix-insider-tier-price-num,
.ix-insider-tier[data-tier="1"] .ix-insider-tier-price-cadence,
.ix-insider-tier[data-tier="1"] .ix-insider-tier-eyebrow {
  color: #ECC777;
}
.ix-insider-tier[data-tier="1"] .ix-insider-tier-bonus {
  color: #ECC777;
  background: rgba(236, 199, 119, 0.12);
  border-color: rgba(236, 199, 119, 0.40);
}
.ix-insider-tier[data-tier="2"] .ix-insider-tier-price-num,
.ix-insider-tier[data-tier="2"] .ix-insider-tier-price-cadence,
.ix-insider-tier[data-tier="2"] .ix-insider-tier-eyebrow {
  color: #C98A73;
}
.ix-insider-tier[data-tier="2"] .ix-insider-tier-bonus {
  color: #C98A73;
  background: rgba(201, 138, 115, 0.12);
  border-color: rgba(201, 138, 115, 0.40);
}

/* Bonus chip — uses the tier's accent (orange or purple). */
.ix-insider-tier-bonus {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--tier-accent-soft);
  border: 1px solid var(--tier-accent);
  border-radius: 4px;
  color: var(--tier-accent);
  font-size: 0.95em;
}
.ix-insider-tier-bonus sup { font-size: 0.55em; vertical-align: super; }

/* ---------- NEW CLIENT PATHWAY ----------------------------------- */
.ix-insider-pathway {
  position: relative;
  padding: clamp(110px, 14vh, 180px) clamp(24px, 4vw, 64px);
  background: var(--bg-0);
  color: var(--fg-1);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Background image — whyiconicbg.jpg with a dark overlay so the
   constellation paths and copy still read cleanly on top. */
.ix-insider-pathway-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ix-insider-pathway-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ix-insider-pathway-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2, 4, 14, 0.55), rgba(2, 4, 14, 0.78) 80%),
    linear-gradient(180deg, rgba(2, 4, 14, 0.65) 0%, rgba(2, 4, 14, 0.55) 50%, rgba(2, 4, 14, 0.78) 100%);
}

/* Content sits above the bg image. */
.ix-insider-pathway-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
}
.ix-insider-pathway-title {
  margin: clamp(18px, 2.4vh, 30px) 0 clamp(28px, 4vh, 44px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.ix-insider-pathway-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-pathway-body {
  margin: 0 auto 18px;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
  color: var(--fg-2);
}
.ix-insider-pathway-body b { color: var(--fg-1); }

/* ---------- REFERRAL ENGINE -------------------------------------- */
/* ============================================================
   REFERRAL — Editorial 2-column layout with cinematic bg + reveal
   LEFT: eyebrow + title + body (animates from left)
   RIGHT: glass box with X badge + reflection (animates from right)
   ============================================================ */
.ix-insider-referral {
  position: relative;
  padding: clamp(110px, 14vh, 180px) clamp(24px, 4vw, 64px);
  background: #f6f3ec;
  color: #0A0E1F;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

/* Background photograph — referralbg.jpg. Fades in first, before
   either copy column animates. */
.ix-insider-referral-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ix-insider-referral.is-in .ix-insider-referral-bg { opacity: 1; }
.ix-insider-referral-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Soft ivory wash so copy still reads cleanly over the photo. */
.ix-insider-referral-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 243, 236, 0.30), rgba(246, 243, 236, 0.18));
}

.ix-insider-referral-inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* LEFT copy — slides in from the left after the bg lands. */
.ix-insider-referral-copy {
  max-width: 560px;
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1400ms,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1400ms;
}
.ix-insider-referral.is-in .ix-insider-referral-copy {
  opacity: 1;
  transform: translateX(0);
}
.ix-insider-referral-copy .ix-eyebrow {
  display: block;
  color: #B4863A;
  margin-bottom: clamp(14px, 2vh, 24px);
}
.ix-insider-referral-title {
  margin: 0 0 clamp(20px, 3vh, 32px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #0A0E1F;
}
.ix-insider-referral-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Champagne accent rule between title and body. */
.ix-insider-referral-rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 0 clamp(20px, 3vh, 32px);
  background: linear-gradient(90deg, #B4863A, rgba(180, 134, 58, 0));
  border-radius: 2px;
}
.ix-insider-referral-body {
  margin: 0;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
  color: rgba(10, 14, 31, 0.72);
}
.ix-insider-referral-body b {
  color: #0A0E1F;
  font-weight: 700;
}

/* RIGHT column — box with X-mark badge + reflection.
   Slides in from the right after the left copy lands. */
.ix-insider-referral-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) 2300ms,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 2300ms;
}
.ix-insider-referral.is-in .ix-insider-referral-visual {
  opacity: 1;
  transform: translateX(0);
}

/* Stage holds the box and the soft glow beneath. Top margin pushes
   the stage down so the box's vertical center aligns with the left
   copy (compensating for the X badge that floats above the box). */
.ix-insider-referral-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-top: clamp(60px, 10vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Soft glow — champagne light pooling beneath the box, suggesting a
   reflective surface without a literal mirror image. */
.ix-insider-referral-glow {
  position: relative;
  width: 110%;
  height: clamp(80px, 11vh, 140px);
  margin-top: clamp(-10px, -1.2vh, -16px);
  background: radial-gradient(ellipse 50% 100% at 50% 0%,
    rgba(236, 199, 119, 0.55) 0%,
    rgba(217, 185, 125, 0.30) 30%,
    rgba(189, 166, 216, 0.18) 60%,
    transparent 100%);
  filter: blur(20px);
  pointer-events: none;
}

.ix-insider-referral-box {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: clamp(64px, 6.4vw, 104px) clamp(40px, 4vw, 64px) clamp(58px, 5.6vw, 88px);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(236, 199, 119, 0.10), transparent 70%),
    #0A0E1F;
  border: 1.5px solid rgba(217, 185, 125, 0.65);
  border-radius: clamp(18px, 1.8vw, 28px);
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, 0.55),
    0 16px 36px -12px rgba(180, 134, 58, 0.18),
    0 0 0 1px rgba(217, 185, 125, 0.12) inset;
}

/* Moving glow sweep — champagne light traveling left → right behind
   the text, clipped to the box's rounded shape via overflow:hidden +
   border-radius:inherit on this wrapper. */
.ix-insider-referral-box-sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.ix-insider-referral-box-sweep::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 40%;
  height: 220%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(236, 199, 119, 0.38) 0%,
    rgba(217, 185, 125, 0.22) 40%,
    rgba(189, 166, 216, 0.12) 70%,
    transparent 100%);
  filter: blur(54px);
  transform: translateX(-120%) rotate(22deg);
  animation: ix-referral-light-sweep 3s linear infinite;
}
@keyframes ix-referral-light-sweep {
  0%   { transform: translateX(-120%) rotate(22deg); }
  100% { transform: translateX(360%)  rotate(22deg); }
}

/* Make sure text and badge sit ABOVE the sweep. */
.ix-insider-referral-box-text { position: relative; z-index: 2; }
.ix-insider-referral-box-mark { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .ix-insider-referral-box-sweep::before { animation: none; }
}
/* X-mark badge — floats half above the box top edge, centered. */
.ix-insider-referral-box-mark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 6.2vw, 96px);
  height: clamp(72px, 6.2vw, 96px);
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #B4863A;
  color: #B4863A;
  box-shadow:
    0 10px 24px -8px rgba(180, 134, 58, 0.45),
    0 0 32px -8px rgba(236, 199, 119, 0.50);
}
.ix-insider-referral-box-mark svg {
  width: 52%;
  height: 52%;
  display: block;
}
/* Box copy. */
.ix-insider-referral-box-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.3;
  text-align: center;
  color: #F2E8D8;
}
.ix-insider-referral-box-text b {
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}

@media (max-width: 900px) {
  .ix-insider-referral-inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vh, 56px);
  }
  .ix-insider-referral-copy { max-width: none; }
  .ix-insider-referral-box { margin: 0 auto; }
  /* Soften the glow on mobile so it doesn't dominate. */
  .ix-insider-referral-glow { height: clamp(60px, 8vh, 90px); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-insider-referral-bg,
  .ix-insider-referral-copy,
  .ix-insider-referral-visual {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ix-echo-ring--out,
  .ix-echo-ring--in {
    animation: none;
    opacity: 0;
  }
}

/* ---------- TAKE YOUR SEAT — closer ----------------------------- */
.ix-insider-closer {
  position: relative;
  background: var(--bg-0);
  color: var(--fg-1);
  overflow: hidden;
  isolation: isolate;
}
.ix-insider-closer-pin {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Time-based reveal sequence (all triggered when .is-in is added by
   the shared IntersectionObserver). Tightened pacing so the glass box
   arrives promptly:
     0ms      bg fades in (1000ms)
     700ms    X logo focus-pull in (900ms)
     2200ms   X logo blur-out (1100ms)
     2400ms   box expands from left (1100ms)
     3500ms   copy fades in (900ms) */

/* takeaseat.jpg background — quick cinematic fade-in. */
.ix-insider-closer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #02040e;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ix-insider-closer.is-in .ix-insider-closer-bg { opacity: 1; }

.ix-insider-closer-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle dark wash so copy still reads cleanly without smothering the
   theater photo's spotlights and atmosphere. */
.ix-insider-closer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2, 4, 14, 0.15), rgba(2, 4, 14, 0.35) 80%),
    linear-gradient(180deg, rgba(2, 4, 14, 0.25) 0%, rgba(2, 4, 14, 0.10) 30%, rgba(2, 4, 14, 0.30) 100%);
}

/* Ambient gold/lavender wash on the pin. */
.ix-insider-closer-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(236,199,119,0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(189,166,216,0.06), transparent 40%);
}

/* Giant X mark — cinematic focus-pull entrance, hold, then a slow
   blur-out exit. Starts slightly larger + blurred (out of focus),
   resolves to crisp focus, holds, then blurs out and dissolves.
   Total duration ~5400ms, starting at the 1100ms mark. */
.ix-insider-closer-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(280px, 38vw, 560px);
  height: auto;
  transform: translate(-50%, -50%) scale(1.08);
  color: #ECC777;
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
  will-change: opacity, filter, transform;
}
.ix-insider-closer.is-in .ix-insider-closer-mark {
  animation: ix-closer-mark-seq 2600ms cubic-bezier(0.65, 0, 0.35, 1) 700ms forwards;
}
@keyframes ix-closer-mark-seq {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translate(-50%, -50%) scale(1.08);
  }
  35% {                                          /* ~910ms in — focus pull complete */
    opacity: 1;
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1);
  }
  55% {                                          /* ~1430ms in — brief hold */
    opacity: 1;
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {                                         /* ~2600ms in — quick blur-out */
    opacity: 0;
    filter: blur(40px);
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Copy content — glass card with animated gradient border. Fades in
   during Phase 3 (0.50 → 0.90). The rotating conic-gradient ::before
   creates the "glowing lights moving on the border" effect. */
.ix-insider-closer-inner {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  text-align: center;
  padding: clamp(48px, 7vh, 84px) clamp(40px, 6vw, 100px);
  max-width: 1200px;
  width: calc(100% - clamp(48px, 6vw, 96px));
  border-radius: clamp(20px, 2vw, 32px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(236, 199, 119, 0.04), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 22, 0.22), rgba(4, 6, 14, 0.38));
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.7),
    0 0 60px -15px rgba(236, 199, 119, 0.15),
    inset 0 1px 0 rgba(236, 199, 119, 0.10);
  /* Cinematic expand — box opens from left to right (clip-path) while
     fading in. The `round` keyword matches the clip-path corners to
     the box's border-radius so the diffuse ::after halo doesn't show
     as sharp rectangles outside the rounded corners. */
  opacity: 0;
  clip-path: inset(0 100% 0 0 round clamp(20px, 2vw, 32px));
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 2400ms,
    clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1) 2400ms;
}
.ix-insider-closer.is-in .ix-insider-closer-inner {
  opacity: 1;
  clip-path: inset(0 0 0 0 round clamp(20px, 2vw, 32px));
}

/* Copy inside the box — fades in AFTER the box has fully expanded. */
.ix-insider-closer-content {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 3500ms,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 3500ms;
}
.ix-insider-closer.is-in .ix-insider-closer-content {
  opacity: 1;
  transform: translateY(0);
}

/* Rotating gradient border — two hotspots (champagne + lavender) chase
   each other around the perimeter. Mask-composite carves out the
   interior so only a 1.5px ring of the gradient shows. */
@property --ix-closer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ix-insider-closer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ix-closer-angle, 0deg),
    rgba(236, 199, 119, 0.05) 0deg,
    rgba(236, 199, 119, 0.9) 30deg,
    rgba(236, 199, 119, 0.1) 90deg,
    rgba(236, 199, 119, 0.05) 160deg,
    rgba(189, 166, 216, 0.85) 210deg,
    rgba(189, 166, 216, 0.1) 270deg,
    rgba(236, 199, 119, 0.05) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ix-closer-border-rotate 7s linear infinite;
  pointer-events: none;
}
@keyframes ix-closer-border-rotate {
  to { --ix-closer-angle: 360deg; }
}

/* Soft outer halo that pulses in sync with the border rotation —
   adds a wider diffuse glow beyond the crisp border ring. */
.ix-insider-closer-inner::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--ix-closer-angle, 0deg),
    transparent 0deg,
    rgba(236, 199, 119, 0.25) 30deg,
    transparent 120deg,
    transparent 200deg,
    rgba(189, 166, 216, 0.2) 230deg,
    transparent 320deg
  );
  filter: blur(28px);
  opacity: 0.6;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ix-insider-closer-inner::before,
  .ix-insider-closer-inner::after {
    animation: none;
  }
}
.ix-insider-closer-title {
  margin: clamp(20px, 2.8vh, 36px) 0 clamp(28px, 4vh, 48px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
/* Force each phrase onto its own single line — no wrap. */
.ix-insider-closer-title-line {
  display: block;
  white-space: nowrap;
}
.ix-insider-closer-title em {
  font-style: normal;
  font-weight: 600;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-closer-body {
  margin: 0 auto 16px;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--fg-2);
}
.ix-insider-closer-body b { color: var(--fg-1); }
.ix-insider-closer-tag {
  margin: clamp(24px, 3vh, 40px) 0 clamp(32px, 4vh, 48px);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--color-champagne);
}
.ix-insider-closer-tag em {
  font-style: italic;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-closer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 56px;
  padding: 0 56px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #0A0E1F;
  text-decoration: none;
  background: transparent;
  filter: drop-shadow(0 0 24px rgba(236,199,119,0.22));
  transition: transform 200ms var(--ease-quint), filter 200ms var(--ease-quint);
}
.ix-insider-closer-cta .ix-cta-label { color: #0A0E1F; }
/* The eXponential Network X-mark inside this CTA — override the
   default authority-gradient fill (which blends into the gold-filled
   button bg and disappears) with solid dark ink so the mark stays
   visible. Scoped only to this CTA. */
.ix-insider-closer-cta .ix-xnet-x { fill: #0A0E1F; }
.ix-insider-closer-cta:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 36px rgba(236,199,119,0.42));
}
.ix-insider-closer-cta .ix-cta-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ix-insider-closer-cta .ix-cta-label { position: relative; z-index: 1; }

/* ==========================================================================
   RESPONSIVE — Insider Membership
   ========================================================================== */
@media (max-width: 1024px) {
  /* Tighten section side-padding on tablet — 15vw is too narrow at this size. */
  .ix-insider-answer {
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: clamp(20px, 5vw, 48px);
  }
  /* Collapse the layered scene to natural flow on tablet & smaller — the
     stage's 100vh height makes pillar content cramped on phones. */
  .ix-insider-answer-scene { min-height: auto; }
  .ix-insider-answer-stage { position: relative; height: auto; overflow: visible; }
  .ix-insider-answer-layer {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    padding: clamp(40px, 8vh, 80px) 0;
  }
  .ix-insider-answer-pillar {
    padding: clamp(28px, 6vw, 48px);
    max-height: none;
  }
  .ix-insider-room-slide img { max-height: none; }
  .ix-insider-answer-pillar-title { font-size: clamp(26px, 4.8vw, 38px); }
  .ix-insider-room-slider { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .ix-insider-room-slider-btn { width: 40px; height: 40px; }
  .ix-insider-answer-plus { font-size: clamp(28px, 6vw, 40px); }
  .ix-insider-compare-reality { grid-template-columns: 1fr; }
  .ix-insider-room-pillars { grid-template-columns: 1fr; }
  /* Mobile — stack the three cards 1-column. */
  .ix-insider-tiers-inner {
    grid-template-columns: 1fr;
  }
  .ix-insider-tier[data-tier="1"],
  .ix-insider-tier[data-tier="2"],
  .ix-insider-tier[data-tier="3"] {
    grid-column: 1;
    grid-row: auto;
  }
  .ix-insider-tiers-header { max-width: none; }
  .ix-insider-tiers-title { font-size: clamp(40px, 10vw, 64px); }
}
@media (max-width: 768px) {
  .ix-insider-hero { height: auto; }
  .ix-insider-hero-pin { position: relative; height: auto; min-height: 100vh; padding: 80px 0; }
  .ix-insider-hero-stage { position: relative; inset: auto; padding: clamp(40px, 6vh, 80px) 20px; }
  .ix-insider-hero-stage--a,
  .ix-insider-hero-stage--b { opacity: 1 !important; }
  .ix-insider-hero-stage--b {
    border-top: 1px solid rgba(236,199,119,0.18);
    margin-top: clamp(40px, 6vh, 64px);
  }
  /* On mobile skip the X mark animation — show bg + copy directly. */
  .ix-insider-closer-pin { min-height: 80vh; padding: 80px 0; }
  .ix-insider-closer-mark { display: none; }
  .ix-insider-closer-inner {
    transition:
      opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) 700ms !important,
      clip-path 1100ms cubic-bezier(0.22, 1, 0.36, 1) 700ms !important;
  }
  .ix-insider-closer-content {
    transition:
      opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms !important,
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms !important;
  }
  .ix-insider-compare-grid { grid-template-columns: 1fr; }
  .ix-insider-compare-head--old,
  .ix-insider-compare-cell--old { border-right: 0; }
  .ix-insider-numbers-conversion { flex-direction: column; gap: 16px; }
  .ix-insider-numbers-arrow { transform: rotate(90deg); }
  .ix-insider-closer-cta {
    height: 48px;
    padding: 0 32px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }
}
@media (max-width: 480px) {
  .ix-insider-hero-title { font-size: clamp(32px, 9vw, 48px); }
  .ix-insider-stakes-title { font-size: clamp(26px, 8vw, 38px); }
  .ix-insider-insight-title { font-size: clamp(26px, 8vw, 36px); }
  .ix-insider-closer-title { font-size: clamp(32px, 9vw, 48px); }
  .ix-insider-closer-cta { padding: 0 22px; font-size: 10px; letter-spacing: 0.16em; }
}

/* ==========================================================================
   INSIDER MEMBERSHIP — Hero 3-row backdrop marquee
   ========================================================================== */
.ix-insider-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 24px);
  padding: clamp(24px, 4vh, 48px) 0;
  /* Slight tilt so the work-wall reads as cinematic backdrop, not a UI element. */
  transform: scale(1.06);
  filter: brightness(0.42) saturate(0.85);
  opacity: 0.72;
}
.ix-insider-hero-row {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.ix-insider-hero-row-track {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  width: max-content;
  height: 100%;
  padding: 4px 0;
  will-change: transform;
}
.ix-insider-hero-row--left .ix-insider-hero-row-track {
  animation: ix-insider-hero-scroll-left 70s linear infinite;
}
.ix-insider-hero-row--right .ix-insider-hero-row-track {
  animation: ix-insider-hero-scroll-right 80s linear infinite;
}
.ix-insider-hero-row--slow .ix-insider-hero-row-track {
  animation-duration: 95s;
}
.ix-insider-hero-row-track img {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  max-height: 100%;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(236, 199, 119, 0.10),
    0 12px 30px -12px rgba(0, 0, 0, 0.55);
  object-fit: cover;
  display: block;
}
@keyframes ix-insider-hero-scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes ix-insider-hero-scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-hero-row--left  .ix-insider-hero-row-track,
  .ix-insider-hero-row--right .ix-insider-hero-row-track,
  .ix-insider-hero-row--slow  .ix-insider-hero-row-track { animation: none; }
}

/* Heavier vignette + radial darken so hero copy stays readable over the
   busy work-wall behind. */
.ix-insider-hero-vignette {
  background:
    radial-gradient(ellipse 65% 50% at 50% 50%,
      rgba(4,3,2,0.55) 0%,
      rgba(4,3,2,0.88) 60%,
      rgba(4,3,2,0.97) 100%),
    linear-gradient(180deg,
      rgba(4,3,2,0.95) 0%,
      rgba(4,3,2,0.6) 18%,
      rgba(4,3,2,0.6) 82%,
      rgba(4,3,2,0.95) 100%);
}

/* ==========================================================================
   INSIDER MEMBERSHIP — Face marquee section wrapper
   ========================================================================== */
.ix-insider-faces {
  padding: clamp(80px, 12vh, 140px) 0 clamp(48px, 8vh, 96px);
  background: var(--bg-0);
  text-align: center;
  position: relative;
}
.ix-insider-faces-inner {
  max-width: 900px;
  margin: 0 auto clamp(40px, 6vh, 64px);
  padding: 0 clamp(24px, 4vw, 56px);
}
.ix-insider-faces-title {
  margin: 0 0 clamp(14px, 2vh, 22px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--fg-1);
  text-wrap: balance;
}
.ix-insider-faces-sub {
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  color: var(--fg-2);
  white-space: nowrap;
  max-width: none;
}
/* Below tablet, let it wrap — the comma list is too long for a phone. */
@media (max-width: 768px) {
  .ix-insider-faces-sub {
    white-space: normal;
    max-width: 56ch;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .ix-insider-hero-backdrop { gap: 8px; padding: 12px 0; transform: scale(1.10); }
  .ix-insider-hero-row-track img { border-radius: 4px; }
}

/* ==========================================================================
   INSIDER HERO — overrides for the requested layout pass:
   - Big dark blurred spotlight behind copy
   - "INFLUEX INSIDER MEMBERSHIP" eyebrow larger than headline
   - "Be in the room." mega-size
   - Body lines: first body on one line, "equalizer" highlighted
   ========================================================================== */

/* Dark blurred spotlight — sits between the work-wall marquee and the
   copy. Soft radial ellipse, heavy alpha. The text reads against this. */
.ix-insider-hero-spotlight {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(680px, 88vw, 1400px);
  height: clamp(560px, 88vh, 900px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.82) 32%,
      rgba(0,0,0,0.55) 58%,
      rgba(0,0,0,0.18) 80%,
      rgba(0,0,0,0) 100%);
  filter: blur(40px);
}

/* Eyebrow goes BIGGER than the headline — make it the visual lead. */
.ix-insider-hero-eyebrow {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 34px) !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  margin-bottom: clamp(28px, 4vh, 56px) !important;
  color: var(--color-champagne) !important;
  -webkit-text-fill-color: var(--color-champagne) !important;
  background: none !important;
}

/* Stage A headline — sized SMALLER than the eyebrow now. */
.ix-insider-hero-stage--a .ix-insider-hero-title {
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 300;
  line-height: 1.08;
  max-width: 22ch;
}

/* "Be in the room." — mega-size, matching the reference */
.ix-insider-hero-title--mega {
  /* ~30% smaller than the original 56/11vw/180 cap so the title
     sits in proportion next to the sub line below. */
  font-size: clamp(40px, 7.7vw, 126px) !important;
  font-weight: 700 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.04em !important;
  margin: 0 !important;
}
.ix-insider-hero-title--mega em {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* First body line on a single visual line (no wrapping mid-sentence). */
.ix-insider-hero-body--single {
  white-space: nowrap;
  max-width: none !important;
}

/* "equalizer" highlight — gold gradient + bold */
.ix-insider-hero-highlight {
  font-weight: 700;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(236,199,119,0.35));
}

/* Below 1024 the eyebrow + mega title need to compress so they don't
   blow out the viewport. Single-line body wraps naturally on mobile. */
@media (max-width: 1024px) {
  .ix-insider-hero-eyebrow { font-size: clamp(14px, 2.4vw, 22px) !important; letter-spacing: 0.36em !important; }
  .ix-insider-hero-title--mega { font-size: clamp(48px, 12vw, 110px) !important; }
}
@media (max-width: 768px) {
  .ix-insider-hero-spotlight {
    width: 110vw;
    height: 90vh;
    filter: blur(28px);
  }
  .ix-insider-hero-body--single { white-space: normal; }
}
@media (max-width: 480px) {
  .ix-insider-hero-eyebrow { font-size: 12px !important; letter-spacing: 0.28em !important; margin-bottom: 20px !important; }
  .ix-insider-hero-title--mega { font-size: clamp(42px, 14vw, 72px) !important; }
}

/* ==========================================================================
   INSIDER HERO — second pass tweaks
   - Eyebrow: NOT uppercase, white, big
   - Stage A title: single line, authority gradient
   - Stage B lede: single line
   - Stage B last body line: smaller, two lines
   - Apply Now CTA
   ========================================================================== */

/* Eyebrow — drop the uppercase, white, big sans-display feel. */
.ix-insider-hero-eyebrow {
  display: block;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 38px) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
  margin-bottom: clamp(20px, 2.6vh, 36px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

/* Stage A headline — one line, full authority gradient color. */
.ix-insider-hero-title--single {
  white-space: nowrap;
  max-width: none !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(236,199,119,0.18));
}

/* Stage B lede — single line. */
.ix-insider-hero-lede--single {
  white-space: nowrap;
  max-width: none !important;
}

/* Smaller body for the long eXponential Network paragraph. Constrain
   width so it wraps to ~2 lines on desktop. */
.ix-insider-hero-body--small {
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.55 !important;
  max-width: 64ch !important;
}

/* Apply Now CTA in the hero. */
.ix-insider-hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 4vh, 48px);
  height: 56px;
  /* Wider horizontal padding for more header presence. */
  padding: 0 clamp(56px, 6.4vw, 88px);
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* Dark ink on the gold-filled pill (btn--filled paints the polygon
     gold) — overrides the .ix-insider-hero-cta base color so the
     label reads as dark-on-gold instead of cream-on-gold. */
  color: #1a1208;
  text-decoration: none;
  background: transparent;
  pointer-events: auto;
  filter: drop-shadow(0 0 22px rgba(236,199,119,0.22));
  transition: transform 200ms var(--ease-quint), filter 200ms var(--ease-quint);
}
.ix-insider-hero-cta:hover {
  color: #1a1208;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 34px rgba(236,199,119,0.4));
}
.ix-insider-hero-cta .ix-cta-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ix-insider-hero-cta .ix-cta-label { position: relative; z-index: 1; }

/* Below 1024: keep things on one line where possible, scale down. */
@media (max-width: 1024px) {
  .ix-insider-hero-eyebrow { font-size: clamp(18px, 2.6vw, 26px) !important; }
  .ix-insider-hero-title--single { font-size: clamp(22px, 3.6vw, 36px) !important; }
}
@media (max-width: 768px) {
  /* Below 768 the long single-line phrases must wrap. */
  .ix-insider-hero-title--single,
  .ix-insider-hero-lede--single { white-space: normal; }
  .ix-insider-hero-eyebrow { font-size: 18px !important; }
  .ix-insider-hero-body--small { font-size: 13px !important; max-width: 90% !important; }
  .ix-insider-hero-cta {
    height: 48px;
    padding: 0 32px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }
}
@media (max-width: 480px) {
  .ix-insider-hero-eyebrow { font-size: 15px !important; }
  .ix-insider-hero-title--single { font-size: clamp(22px, 6.5vw, 30px) !important; }
  .ix-insider-hero-cta { padding: 0 22px; font-size: 10px; letter-spacing: 0.16em; }
}

/* ==========================================================================
   INSIDER HERO — third pass
   - Eyebrow scaled up close to mega-title size
   - Dark spotlight ~20% denser
   ========================================================================== */

.ix-insider-hero-eyebrow {
  font-size: clamp(40px, 7vw, 110px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
  margin-bottom: clamp(24px, 3vh, 42px) !important;
}

/* Denser blurred mass: deeper inner alpha and stops extended outward
   so the readable area covers more of the copy block. */
.ix-insider-hero-spotlight {
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.98) 38%,
      rgba(0,0,0,0.75) 65%,
      rgba(0,0,0,0.38) 85%,
      rgba(0,0,0,0) 100%);
  width: clamp(720px, 92vw, 1500px);
  height: clamp(620px, 92vh, 980px);
}

@media (max-width: 1024px) {
  .ix-insider-hero-eyebrow { font-size: clamp(36px, 8vw, 72px) !important; }
}
@media (max-width: 768px) {
  .ix-insider-hero-eyebrow { font-size: clamp(28px, 9vw, 48px) !important; }
}
@media (max-width: 480px) {
  .ix-insider-hero-eyebrow { font-size: clamp(24px, 10vw, 36px) !important; }
}

/* ==========================================================================
   INSIDER HERO — Replace word "Influex" with logo above the eyebrow.
   Nav .ix-brand-logo is 38px (desktop) / 22px (mobile). 30% bigger here.
   ========================================================================== */
.ix-insider-hero-logo {
  display: block;
  margin: 0 auto clamp(18px, 2.4vh, 32px);
  height: 50px;        /* ~30% bigger than nav's 38px */
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 24px rgba(236, 199, 119, 0.18));
}
@media (max-width: 768px) {
  .ix-insider-hero-logo { height: 36px; }  /* ~30% bigger than nav's 22px (rounded) */
}
@media (max-width: 480px) {
  .ix-insider-hero-logo { height: 30px; }
}

/* ==========================================================================
   INSIDER FACES — kill the homepage hero's 5.7s delayed fade-in on the
   face marquee. On this page the section appears mid-scroll, so it should
   render visible immediately.
   ========================================================================== */
.ix-insider-faces .ix-face-marquee {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ==========================================================================
   INSIGHT MEETS IMPLEMENTATION — sticky-pinned cinematic. Video plays
   clean on entry; vignette + copy fade in as the user scrolls through a
   200vh runway. Progress driven by `--insight-p` (0 → 1) written by JS.
   ========================================================================== */
.ix-insider-insight {
  --insight-p: 0;
  padding: 0 !important;
  background: #000;
  text-align: left !important;
  position: relative;
  min-height: 200vh;   /* runway: 100vh clean view + 100vh fade-in */
  isolation: isolate;
}
.ix-insider-insight::before { display: none; }   /* kill the centered radial wash from the first pass */
.ix-insider-insight-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: block;
}
.ix-insider-insight-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.ix-insider-insight-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--insight-p);   /* 0 = video clean, 1 = vignette fully on */
  background:
    /* Heavy darken on the left for the copy column. */
    linear-gradient(90deg,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.85) 35%,
      rgba(0,0,0,0.55) 60%,
      rgba(0,0,0,0.25) 82%,
      rgba(0,0,0,0.08) 100%),
    /* Subtle top/bottom feather. */
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,0.45) 100%);
}
.ix-insider-insight-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  align-content: center;
  /* Copy fade — slight upward drift on entry. */
  opacity: var(--insight-p);
  transform: translate3d(0, calc((1 - var(--insight-p)) * 16px), 0);
  will-change: opacity, transform;
}
.ix-insider-insight-inner > * { grid-column: 1; }
.ix-insider-insight-eyebrow {
  display: block;
  margin-bottom: clamp(20px, 2.6vh, 36px) !important;
  font-family: var(--font-micro) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--color-champagne) !important;
  -webkit-text-fill-color: var(--color-champagne) !important;
  background: none !important;
}
.ix-insider-insight-title {
  margin: 0 0 clamp(28px, 4vh, 44px) !important;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 56px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.ix-insider-insight-title span,
.ix-insider-insight-title em {
  display: block;
}
.ix-insider-insight-title em {
  font-style: normal;
  font-weight: 600;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-insider-insight-rule {
  width: clamp(120px, 16vw, 220px);
  margin: 0 0 clamp(28px, 4vh, 44px) !important;
}
.ix-insider-insight-body {
  margin: 0 !important;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.7;
  color: var(--fg-2);
  /* Container query context so the stamp can size itself relative to the
     actual body width and never overflow when forced onto a single line. */
  container-type: inline-size;
}
.ix-insider-insight-body p { margin: 0 0 18px; color: var(--fg-2); }
.ix-insider-insight-body p:last-child { margin-bottom: 0; }
/* Closer stamp — single line, sized off the body container so the text
   width always matches the paragraphs above. Underline carries a soft
   pulsing glow + a slow traveling highlight. */
.ix-insider-insight-stamp {
  position: relative;
  display: block;
  white-space: nowrap;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: clamp(16px, 4.6cqi, 30px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  color: var(--color-champagne) !important;
  margin-top: clamp(22px, 3.2vh, 38px) !important;
  padding-bottom: clamp(12px, 1.6vh, 20px);
}
.ix-insider-insight-stamp::before,
.ix-insider-insight-stamp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
/* Soft champagne halo — wide, blurred, breathing. */
.ix-insider-insight-stamp::before {
  height: clamp(10px, 1.4vh, 18px);
  background: radial-gradient(60% 120% at 50% 100%,
    rgba(231, 196, 127, 0.55) 0%,
    rgba(231, 196, 127, 0.22) 38%,
    rgba(231, 196, 127, 0) 75%);
  filter: blur(5px);
  transform-origin: 50% 100%;
  animation: ix-insight-stamp-pulse 3.6s ease-in-out infinite;
}
/* Hair-fine highlight that slowly traverses from left to right. */
.ix-insider-insight-stamp::after {
  height: 1px;
  background:
    linear-gradient(90deg,
      rgba(231, 196, 127, 0) 0%,
      rgba(231, 196, 127, 0) 30%,
      rgba(231, 196, 127, 0.95) 50%,
      rgba(231, 196, 127, 0) 70%,
      rgba(231, 196, 127, 0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ix-insight-stamp-sweep 5.2s ease-in-out infinite;
}
@keyframes ix-insight-stamp-pulse {
  0%, 100% { opacity: 0.55; transform: scaleX(0.78); }
  50%      { opacity: 1;    transform: scaleX(1); }
}
@keyframes ix-insight-stamp-sweep {
  0%   { background-position: -60% 0; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { background-position: 160% 0; opacity: 0; }
}

/* Reduced motion: skip the fade choreography — show end state immediately. */
@media (prefers-reduced-motion: reduce) {
  .ix-insider-insight { --insight-p: 1; }
  .ix-insider-insight-inner { transform: none; }
  .ix-insider-insight-stamp::before,
  .ix-insider-insight-stamp::after { animation: none; opacity: 0.75; }
}

/* Below tablet: stack to single column, lighten the right-side darken
   so the video peeks through under the text instead of dominating. */
@media (max-width: 900px) {
  .ix-insider-insight-inner { grid-template-columns: 1fr; }
  .ix-insider-insight-overlay {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.62) 50%,
        rgba(0,0,0,0.85) 100%);
  }
  .ix-insider-insight-rule { margin-inline: 0 !important; }
}
@media (max-width: 480px) {
  .ix-insider-insight-title { font-size: clamp(26px, 8vw, 36px) !important; }
  /* On mobile the body container shrinks, so cqi alone produces tiny text.
     Bump the floor and lean on viewport units instead. */
  .ix-insider-insight-stamp { font-size: clamp(15px, 5.2vw, 24px) !important; }
}

/* ==========================================================================
   INSIDER MEMBERSHIP PAGE — nav stays fixed during the hero, then hides
   once the user scrolls past the hero section. Previously the nav was
   forced to position:absolute, which made it scroll away inside the hero
   (mid-vh). Now it sits fixed on top, then JS toggles .is-hidden on the
   nav + scrim when scrollY > hero.bottom.
   ========================================================================== */
.ix-page-insider .ix-nav,
.ix-page-insider .ix-nav-scrim {
  transition: opacity 320ms ease, transform 320ms ease,
              background 320ms ease, backdrop-filter 320ms ease,
              border-color 320ms ease;
}
.ix-page-insider .ix-nav.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}
.ix-page-insider .ix-nav-scrim.is-hidden {
  opacity: 0;
}

/* ==========================================================================
   INFLUEX INSIDER MEMBERSHIP — Two-column section.
   LEFT: traditional vs Influex copy. RIGHT: 3D rotating sphere of icons.
   Click any face to open a modal with the bigger image + name + desc.
   ========================================================================== */
.ix-insider-reality {
  position: relative;
  padding: clamp(120px, 16vh, 220px) clamp(24px, 4vw, 80px);
  background: #03050f;
  color: var(--fg-1);
  overflow: hidden;
  isolation: isolate;
}
.ix-insider-reality-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 70% 30%,
      rgba(231, 196, 127, 0.18) 0%,
      rgba(231, 196, 127, 0.04) 40%,
      transparent 75%),
    radial-gradient(ellipse 45% 40% at 10% 80%,
      rgba(189, 166, 216, 0.12) 0%,
      transparent 70%);
}
.ix-insider-reality-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
}

/* Two-column grid: copy left, sphere right. */
.ix-insider-reality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

/* ---- LEFT: comparison copy ---- */
.ix-insider-reality-copy { text-align: left; }
.ix-insider-reality-block { margin-bottom: clamp(36px, 5vh, 64px); }
.ix-insider-reality-block:last-of-type { margin-bottom: 0; }
.ix-insider-reality-block h3 {
  margin: 0 0 clamp(14px, 1.8vh, 22px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ix-insider-reality-block--old h3 { color: rgba(255, 255, 255, 0.55); }
.ix-insider-reality-block--new h3 { color: var(--fg-1); }
.ix-insider-reality-block--new h3 em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ix-insider-reality-block p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}
.ix-insider-reality-block--old p { color: rgba(255, 255, 255, 0.42); }
.ix-insider-reality-block--new p { color: var(--fg-2); }
.ix-insider-reality-block p b { color: var(--fg-1); font-weight: 700; }

.ix-insider-reality-payoff {
  margin-top: clamp(32px, 4vh, 56px) !important;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--fg-1) !important;
}
.ix-insider-reality-payoff em {
  font-style: italic;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---- RIGHT: 3D sphere stage ---- */
.ix-insider-reality-sphere-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ix-insider-reality-sphere {
  position: relative;
  width: clamp(360px, 44vw, 640px);
  height: clamp(360px, 44vw, 640px);
  perspective: 1200px;
  user-select: none;
  -webkit-user-select: none;
  /* Sphere itself stays draggable (mouse + touch). Individual faces
     are non-interactive via pointer-events: none on .ix-sphere-node
     below — clicks/drags pass through faces to the sphere container
     so drag-to-rotate keeps working without individual face clicks
     opening a modal. */
  cursor: grab;
  touch-action: none;
}
.ix-insider-reality-sphere:active { cursor: grabbing; }
.ix-insider-reality-sphere::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at center,
    rgba(231, 196, 127, 0.16) 0%,
    rgba(231, 196, 127, 0.05) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
/* Subtle X logo watermark behind the rotating faces. Centered in the
   sphere wrap, scaled to fit inside the orbit radius, faintly visible
   so it reads as a brand mark behind the network rather than a graphic
   element competing with the portraits. */
.ix-insider-reality-sphere::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: 56%;
  transform: translate(-50%, -50%);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 179'><path fill='%23ECC777' d='M171.866 156.928L86.7905 16.4486C86.3688 15.7876 76.3599 0.0670462 58.8443 0.0670446L2.61465 0.0670397C1.15268 -0.0191793 0.22492 0.0670395 0.0562313 0.0670395L0.477936 11.218L2.58655 11.218C6.29771 11.4479 15.1539 12.9711 20.8612 22.369L106.949 164.314L107.005 164.429C107.399 165.033 116.536 179 134.558 179L189.494 179L190 167.849C190 167.849 177.517 166.47 171.838 156.899L171.866 156.928ZM116.171 158.365L30.1391 16.4774C28.9302 14.4943 27.6369 12.77 26.2874 11.218L30.8701 11.218C31.3199 11.218 42.2003 10.9594 48.4699 21.2769L133.096 160.808C133.602 161.785 135.204 164.659 138.128 167.82L134.529 167.82C122.749 167.82 116.592 158.997 116.142 158.336L116.171 158.365ZM164.191 167.849C148.952 167.82 143.048 156.123 142.823 155.663L142.711 155.405L57.8041 15.4427C56.8763 13.8908 55.8642 12.5113 54.8239 11.2755L58.8725 11.2755C70.0622 11.2755 77.2314 21.8804 77.625 22.484L120.107 92.6374L162.588 162.791C163.713 164.688 165.006 166.383 166.384 167.878L164.247 167.878L164.191 167.849Z'/><path fill='%23ECC777' d='M187.414 0.00959627L131.184 0.00959136C113.668 0.00958982 103.659 15.7302 103.181 16.4774L18.1059 156.928C12.4549 166.441 0.0843298 167.82 -1.46713e-05 167.82L0.506031 178.971L55.4424 178.971C73.4922 178.971 82.6295 164.975 82.995 164.4L169.139 22.3403C174.846 12.9424 183.73 11.4192 187.414 11.1893L189.494 11.1893L189.916 0.0383361C189.747 0.0383361 188.819 -0.0478829 187.385 0.0383359L187.414 0.00959627ZM27.4401 162.762L112.431 22.3978C112.825 21.823 119.966 11.1606 131.184 11.1606L135.232 11.1606C134.192 12.4251 133.18 13.8046 132.224 15.3566L47.4578 155.089L47.2329 155.433L47.0642 155.865C46.8674 156.353 41.7505 167.792 25.7813 167.792L23.6446 167.792C24.9941 166.355 26.2874 164.688 27.412 162.791L27.4401 162.762ZM159.861 16.4774L73.8296 158.336C73.2673 159.141 67.1101 167.849 55.4143 167.849L52.1249 167.849C54.9083 164.716 56.3983 161.871 56.9044 160.722L141.474 21.3057C147.743 10.9594 158.624 11.218 159.074 11.2468L163.685 11.2468C162.335 12.7412 161.014 14.4944 159.833 16.4774L159.861 16.4774Z'/></svg>")
    no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Sphere node — outer div positioned by JS, inner div handles hover scale. */
.ix-sphere-node {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Decorative for now — inherit pointer-events:none from the sphere
     wrap so faces aren't clickable. */
  pointer-events: none;
  cursor: default;
  will-change: transform, opacity;
}
.ix-sphere-node-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(231, 196, 127, 0.25);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
  background: #0a0908;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}
.ix-sphere-node:hover .ix-sphere-node-inner {
  transform: scale(1.28);
  border-color: rgba(231, 196, 127, 0.85);
  box-shadow:
    0 14px 36px -8px rgba(231, 196, 127, 0.35),
    0 0 0 1px rgba(231, 196, 127, 0.45);
}
.ix-sphere-node-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.95);
  transition: filter 260ms ease;
}
.ix-sphere-node:hover .ix-sphere-node-inner img {
  filter: saturate(1) brightness(1);
}

/* ---- Modal — opens when a face is clicked ---- */
.ix-sphere-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  animation: ix-sphere-fade 220ms ease-out;
}
.ix-sphere-modal[hidden] { display: none; }
@keyframes ix-sphere-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ix-sphere-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.ix-sphere-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: #14110f;
  border: 1px solid rgba(231, 196, 127, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  animation: ix-sphere-scale 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ix-sphere-scale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.ix-sphere-modal-image {
  position: relative;
  aspect-ratio: 1;
  background: #0a0908;
}
.ix-sphere-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ix-sphere-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 0;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
}
.ix-sphere-modal-close:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.08);
}
.ix-sphere-modal-meta {
  padding: clamp(20px, 3vw, 32px);
  background: #14110f;
}
.ix-sphere-modal-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.2;
  color: var(--fg-1);
}
.ix-sphere-modal-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: var(--fg-2);
}

body.ix-sphere-modal-open { overflow: hidden; }

/* Mobile: stack to one column, smaller sphere. */
@media (max-width: 900px) {
  .ix-insider-reality-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vh, 72px);
  }
  .ix-insider-reality-sphere {
    width: clamp(280px, 86vw, 480px);
    height: clamp(280px, 86vw, 480px);
  }
}

/* ==========================================================================
   THE TRADITIONAL REALITY — full-bleed image of a mastermind room with a
   right-anchored copy panel. Reads as a cinematic statement on its own.
   ========================================================================== */
.ix-insider-traditional {
  position: relative;
  min-height: clamp(640px, 80vh, 920px);
  padding: clamp(80px, 12vh, 160px) clamp(24px, 4vw, 80px);
  background: #0a0908;
  color: var(--fg-1);
  overflow: hidden;
  isolation: isolate;
}

/* =====================================================================
   REALITY → ANSWER STACK
   Both sections share one 100vh pin. Reality is the base layer; the
   Answer slides in from the right covering Reality as the user scrolls
   through the wrapper's scroll runway.
   ===================================================================== */
.ix-insider-reality-stack {
  --stack-prog: 0;                  /* 0 = answer fully off right, 1 = at rest */
  position: relative;
  /* 200vh runway = first 100vh holds Reality in place, second 100vh
     drives the Answer's slide-in. */
  height: 200vh;
  background: #0a0908;              /* matches Reality bg, hides any sub-pixel gap */
}
.ix-insider-reality-stack-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;                 /* clip the Answer while it's off-screen right */
}
/* Both sections fill the pin entirely. Override their natural min-height
   + padding-based heights so they snap exactly to 100vh. */
.ix-insider-reality-stack-pin > .ix-insider-traditional,
.ix-insider-reality-stack-pin > .ix-insider-reality {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}
/* Reality (the base) stays in place underneath. */
.ix-insider-reality-stack-pin > .ix-insider-traditional {
  z-index: 1;
}
/* Answer (the overlay) slides in from the right. At --stack-prog=0 it
   sits fully off-screen right; at 1 it's at rest covering Reality. */
.ix-insider-reality-stack-pin > .ix-insider-reality {
  z-index: 2;
  transform: translate3d(calc((1 - var(--stack-prog)) * 100%), 0, 0);
  will-change: transform;
  /* Soft shadow on the leading (left) edge while sliding so the
     boundary between Answer and Reality reads as a curtain crossing. */
  box-shadow: -40px 0 80px -20px rgba(0, 0, 0, 0.6);
}
.ix-insider-reality-stack-pin > .ix-insider-reality .ix-insider-reality-inner {
  height: 100%;
  display: flex;
  align-items: center;
}
.ix-insider-reality-stack-pin > .ix-insider-reality .ix-insider-reality-grid {
  width: 100%;
}

/* Reduced motion / mobile: no pin, no slide. Stack collapses to natural
   document flow — Reality then Answer, each at its natural height. */
@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  .ix-insider-reality-stack { height: auto; }
  .ix-insider-reality-stack-pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }
  .ix-insider-reality-stack-pin > .ix-insider-traditional,
  .ix-insider-reality-stack-pin > .ix-insider-reality {
    position: relative;
    inset: auto;
    height: auto;
    min-height: clamp(520px, 75vh, 720px);
    transform: none !important;
    box-shadow: none !important;
  }
}
.ix-insider-traditional-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('images/mastermindbg.jpg') center / cover no-repeat;
  filter: saturate(0.85) brightness(0.78);
}
.ix-insider-traditional-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Radial darken centered on the copy panel for legibility. */
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.20) 85%),
    /* Subtle top/bottom feather. */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0) 18%,
      rgba(0, 0, 0, 0) 82%,
      rgba(0, 0, 0, 0.45) 100%);
}
.ix-insider-traditional-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;          /* copy centered horizontally */
  min-height: inherit;
}
.ix-insider-traditional-copy {
  max-width: clamp(420px, 56vw, 720px);
  text-align: center;
}
.ix-insider-traditional-copy .ix-eyebrow {
  display: block;
  margin-bottom: clamp(16px, 2vh, 24px);
  text-align: center;
}
.ix-insider-traditional-title {
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.ix-insider-traditional-title em {
  font-style: normal;
  /* Muted desaturated tone — these are the OLD-way titles, dim them. */
  color: rgba(255, 255, 255, 0.55);
}
.ix-insider-traditional-copy p {
  margin: 0 0 clamp(14px, 1.8vh, 22px);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.ix-insider-traditional-copy p:last-of-type { margin-bottom: 0; }
.ix-insider-traditional-stamp {
  margin-top: clamp(18px, 2.4vh, 28px) !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(18px, 1.6vw, 24px) !important;
  color: var(--fg-1) !important;
}
.ix-insider-traditional-stamp b {
  font-style: normal;
  font-weight: 600;
  color: var(--fg-1);
}

/* Mobile: copy spans full width over the bg, overlay darkens more. */
@media (max-width: 900px) {
  .ix-insider-traditional { min-height: clamp(520px, 75vh, 720px); }
  .ix-insider-traditional-inner { justify-content: center; }
  .ix-insider-traditional-copy { max-width: 92%; text-align: center; }
  .ix-insider-traditional-copy .ix-eyebrow { text-align: center; }
  .ix-insider-traditional-overlay {
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.85) 100%);
  }
}

/* ==========================================================================
   QUOTE SECTION — "You don't pay for hours. / You pay for outcomes."
   Sticky-pinned two-line statement. As the user scrolls through the 200vh
   runway, each line fills with white from left to right (gradient
   background-clip driven by `--quote-prog`).
   ========================================================================== */
.ix-insider-quote {
  --quote-prog: 0;
  position: relative;
  /* Tight vertical padding so the headline + paragraph sit ~50% higher
     in the viewport during the section's scroll moment. */
  padding: clamp(20px, 3vh, 40px) clamp(24px, 6vw, 96px);
  background: var(--bg-0);
  color: var(--fg-1);
  overflow: hidden;
  isolation: isolate;
}
.ix-insider-quote-pin {
  width: 100%;
  max-width: 100%;
  text-align: center;
}
/* Compound paragraph sits 20px directly under the quote text and fades
   in during the back half of the fill animation. */
.ix-insider-quote-followup {
  margin: 20px auto 0;
  max-width: 760px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.75;
  color: var(--fg-2);
  text-align: left;
  /* Stays hidden through the headline fill (prog 0 → 0.65), then fades
     in cleanly during prog 0.7 → 0.9. */
  opacity: clamp(0, calc((var(--quote-prog) - 0.7) * 5), 1);
  transform: translate3d(
    0,
    calc((1 - clamp(0, (var(--quote-prog) - 0.7) * 5, 1)) * 16px),
    0);
  will-change: opacity, transform;
}
.ix-insider-quote-followup p { margin: 0; }
.ix-insider-quote-followup b { color: var(--fg-1); }
.ix-insider-quote-text {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  /* ~50% smaller than the previous treatment. */
  font-size: clamp(20px, 3.4vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.ix-insider-quote-line {
  display: block;
  /* Force each statement onto exactly one line. */
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff var(--quote-fill, 0%),
    rgba(255, 255, 255, 0.18) var(--quote-fill, 0%),
    rgba(255, 255, 255, 0.18) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Fill timing:
     Line 1: prog 0    → 0.35  (fills WHITE)
     Line 2: prog 0.35 → 0.65  (fills with the AUTHORITY gradient)
     Followup:  prog 0.7 → 0.9 */
.ix-insider-quote-line[data-line="1"] {
  --quote-fill: clamp(0%, calc(var(--quote-prog) * 286%), 100%);
}
.ix-insider-quote-line[data-line="2"] {
  --quote-fill: clamp(0%, calc((var(--quote-prog) - 0.35) * 334%), 100%);
  /* Two-layer stack clipped to text:
       Top layer = transparent from 0 → --quote-fill, then OPAQUE dim
       gray from --quote-fill → 100%. The opaque dim hides the layer
       beneath wherever the line hasn't filled yet.
       Bottom layer = authority gradient — only visible where the top
       layer is transparent (the filled portion). */
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent var(--quote-fill, 0%),
      #2e2e2e       var(--quote-fill, 0%),
      #2e2e2e       100%),
    var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
}

/* Reduced motion: hold both lines fully white + followup fully visible. */
@media (prefers-reduced-motion: reduce) {
  .ix-insider-quote-line { --quote-fill: 100% !important; }
  .ix-insider-quote-followup { opacity: 1 !important; transform: none !important; }
}

/* Glass-frosted card around the "Here's what changed" paragraph. */
.ix-insider-numbers-glass {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: clamp(32px, 5vh, 56px) auto 0;
  padding: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(16px, 1.6vw, 24px);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
  text-align: left;
}
.ix-insider-numbers-glass p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.7;
  color: var(--fg-1);
}

/* The continued half of the Numbers section (after the quote) — tighter
   top padding since it picks up the same bg image and reads as a
   continuation, not a fresh section. */
.ix-insider-numbers--continued {
  /* This section follows the quote: pure dark bg, no photo. Content
     anchored at the top with a small breathing room. */
  min-height: 0;
  padding-top: clamp(40px, 6vh, 80px);
  background: var(--bg-0);
  /* The whole section (label + cards + finale) fades in once the quote
     section's compound paragraph has finished fading. IO adds .is-in
     when this section enters viewport. */
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 1000ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1000ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}
.ix-insider-numbers--continued.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-numbers--continued {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
.ix-insider-numbers--continued .ix-insider-numbers-inner {
  min-height: 0;
  display: block;
}
/* Kill the photo, overlay, and noise — continued section is plain dark. */
.ix-insider-numbers--continued .ix-insider-numbers-bg,
.ix-insider-numbers--continued .ix-insider-numbers-overlay,
.ix-insider-numbers--continued .ix-insider-numbers-noise {
  display: none;
}
/* Compound paragraph fades in only after the quote animation finishes —
   .is-in is added by an IO once the continued section enters viewport. */
.ix-insider-numbers--continued .ix-insider-numbers-body p {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 900ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}
.ix-insider-numbers--continued.is-in .ix-insider-numbers-body p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-numbers--continued .ix-insider-numbers-body p {
    opacity: 1; transform: none; transition: none;
  }
}

/* ==========================================================================
   INSIDER MENU — Full-width sticky-pin horizontal carousel using the
   homepage's .ix-walkaway-card visual. The label pins at the TOP of the
   viewport; below it the cards sweep right→left driven by vertical scroll.
   Lives in its own <section class="ix-insider-menu-section"> outside the
   1160px column so the cards go edge-to-edge.
   ========================================================================== */
.ix-insider-menu-section {
  position: relative;
  background: #000;
  width: 100%;
  /* IMPORTANT: no overflow:hidden here — it creates a scroll container
     that breaks the descendant sticky pin. The pin itself clips the
     horizontal track via its own overflow:hidden. */
}
.ix-insider-menu-stage {
  position: relative;
  /* Scroll runway — eight cards sweep horizontally over a long pinned
     scroll, plus tail for the finale fade-in. Bumped from 350vh (when
     there were 3 cards) to keep per-card scroll pace comfortable. */
  /* 4 wide cards now (down from 8 narrower ones) — less total sweep
     distance, so the runway shrinks too. */
  height: 500vh;
  /* Card sizing — VERY wide cards. Each card carries 3-6 detailed
     bullets with bold titles + descriptions. The image gets ~60% of
     the card width via the grid below; bullets get the remaining
     ~40%, which is still plenty for legible body text since the
     card itself is so wide. */
  --card-w: clamp(680px, 76vw, 1500px);
  --card-gap: clamp(20px, 2.4vw, 40px);
  --track-tx: 0px;
  --cards-op: 1;
  --finale-op: 0;
  --finale-blur: 24px;
  --label-op: 0;
  --mark-op: 0;
  --mark-blur: 0px;
}
.ix-insider-menu-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Clips the horizontal card track sliding off-screen. */
  overflow: hidden;
  display: grid;
  /* Two-row pin: label at top, card track filling the rest. */
  grid-template-rows: auto 1fr;
  align-items: stretch;
  /* Tightened pin padding so the cards have more vertical room and
     don't get clipped at the top/bottom of the 100vh viewport. */
  padding-top: clamp(48px, 6vh, 72px);
  padding-bottom: clamp(24px, 3vh, 40px);
  /* Solid black so the cards have a uniform backdrop. */
  background: #000;
}
/* Label pinned to TOP, centered horizontally. Stays HIDDEN until the
   sticky pin actually engages (i.e., user has scrolled past the quote
   section above). --label-op is driven by JS — 0 while the stage is
   below the viewport top, fades to 1 the moment sticky kicks in. */
.ix-insider-menu-pin .ix-insider-numbers-menu-label {
  margin: 0;
  text-align: center;
  justify-self: center;
  opacity: var(--label-op, 0);
  will-change: opacity;
}
/* "What You Get" mega label — replaces the tiny "The menu keeps growing"
   eyebrow with a proper display-size headline at the top of the
   carousel pin. Same scroll-driven opacity hook (--label-op). */
.ix-insider-menu-label {
  margin: 0;
  text-align: center;
  justify-self: center;
  opacity: var(--label-op, 0);
  will-change: opacity;
}
.ix-insider-menu-label--mega {
  font-family: var(--font-display);
  font-weight: 700;
  /* Smaller cap (was 96px) so it doesn't eat the cards' vertical
     real estate inside the 100vh pin. */
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: clamp(16px, 2vh, 28px);
}
/* Layered stage area: viewport (cards) and finale stack on top of each
   other inside the 1fr grid row. Cards fade out at the tail of the
   scroll while finale fades in with a blur-to-clear effect. */
.ix-insider-menu-stagearea {
  position: relative;
  width: 100%;
  min-height: 0;
}
.ix-insider-menu-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: var(--cards-op, 1);
  transition: opacity 120ms linear;
  will-change: opacity;
}
.ix-insider-menu-track {
  display: flex;
  gap: var(--card-gap);
  padding-inline: 0;
  transform: translate3d(var(--track-tx, 0px), 0, 0);
  will-change: transform;
}

/* Cards inside the carousel use the homepage's natural .ix-walkaway-card
   styling unchanged — landscape, image LEFT / content RIGHT, gold border.
   The big centered icon goes inside .ix-walkaway-card-image (since these
   cards have no photo asset). */
.ix-insider-deliverables-bigicon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(236, 199, 119, 0.55);
  pointer-events: none;
}
.ix-insider-deliverables-bigicon svg {
  width: 42%;
  height: 42%;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(236, 199, 119, 0.25));
}

/* X logo mark — bridges the cards beat and the finale. Absolutely
   positioned, centered behind the finale copy. Drives opacity + blur
   via CSS vars set by the scroll JS. */
.ix-insider-menu-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(280px, 42vw, 620px);
  height: auto;
  color: #ecc777;
  opacity: var(--mark-op, 0);
  filter: blur(var(--mark-blur, 0));
  pointer-events: none;
  z-index: 1;
  will-change: opacity, filter;
}

/* Finale (closer + tag) — overlay on top of the cards viewport inside
   the pin. Fades in from blur=24px → 0 at the tail of the scroll while
   the cards fade out. Becomes the final beat before the pin releases. */
.ix-insider-menu-pin .ix-insider-numbers-finale {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Top-aligned with minimal top padding — pulls the title (and
     everything below it) up into the upper portion of the pin. */
  padding: clamp(12px, 1.5vh, 24px) clamp(24px, 5vw, 80px) clamp(40px, 6vh, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  /* pointer-events stays none on the finale wrapper so the X mark
     blur underneath can still receive interaction during scroll —
     the embedded tiers re-enable pointer events on themselves. */
  pointer-events: none;
  opacity: var(--finale-op, 0);
  filter: blur(var(--finale-blur, 24px));
  will-change: opacity, filter;
}

/* ==========================================================================
   MEMBERSHIP TIERS — embedded variant inside the menu carousel finale.
   No own background (sits on the black menu pin), text inverted for dark
   theme, compact spacing so 3 cards fit in the 100vh pin.
   ========================================================================== */
.ix-insider-tiers--embedded {
  /* Re-enable interaction (parent .finale has pointer-events: none). */
  pointer-events: auto;
  /* Reset section-level styles inherited from the standalone variant. */
  position: static;
  min-height: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(1280px, 100%);
  /* Cards reveal immediately when the finale fades in — no extra
     scroll-gated stagger here since the X-mark-blur → finale-fade
     sequence already provides the entrance animation. */
  --tier-accent: #ECC777;
  --tier-accent-soft: rgba(236, 199, 119, 0.18);
}
.ix-insider-tiers--embedded .ix-insider-tiers-header {
  /* No fade-in offset — finale handles the entrance. */
  opacity: 1;
  transform: none;
  text-align: center;
  /* No bottom margin — the toggle pill (last child of header) sits
     flush against the cards stack below it. The 2-8px cards margin-top
     is the only gap between toggle and cards now. */
  margin-bottom: 0;
}
.ix-insider-tiers--embedded .ix-insider-tiers-title {
  /* Bumped up — bigger headline weight while still fitting alongside
     the toggle + 3 cards in the 100vh pin. Authority gradient. */
  font-size: clamp(36px, 5vw, 72px);
  /* Tightened: the Monthly/Yearly toggle that used to occupy this gap
     was removed, so the cards now sit close under the title. */
  margin: 0 auto clamp(20px, 2.6vh, 36px);
  color: transparent;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Toggle pill sits well below the title (gap absorbed by title's
   margin-bottom above) and tight to the cards below. */
.ix-insider-tiers--embedded .ix-insider-tiers-toggle {
  margin: 0 auto;
}
.ix-insider-tiers--embedded .ix-insider-tiers-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 28px);
  /* Cards sit almost flush against the toggle pill above so the
     toggle reads as a connected control above the row. */
  margin-top: clamp(2px, 0.4vh, 8px);
}
/* Dark-theme toggle pill + button text — inverted from the cream
   variant. */
.ix-insider-tiers--embedded .ix-insider-tiers-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.ix-insider-tiers--embedded .ix-insider-tiers-toggle-btn {
  color: rgba(255, 255, 255, 0.6);
}
.ix-insider-tiers--embedded .ix-insider-tiers-toggle-btn:hover {
  color: #fff;
}
.ix-insider-tiers--embedded .ix-insider-tiers-toggle-btn.is-active,
.ix-insider-tiers--embedded .ix-insider-tiers-toggle-btn.is-active:hover {
  color: #1a1208;
}
/* Cards on dark backdrop — tighter padding to fit compact embedded
   layout, baseline reveal opacity = 1 (no card-by-card stagger). */
.ix-insider-tiers--embedded .ix-insider-tier {
  opacity: 1;
  transform: none;
  padding: clamp(20px, 2vw, 32px) clamp(18px, 1.8vw, 28px);
  margin: 0;
}

/* Scoped overrides for the closer line inside the menu finale.
   Forced single-line: white-space:nowrap with a responsive font-size
   that shrinks on narrow viewports so it fits without wrapping. */
.ix-insider-menu-pin .ix-insider-numbers-closer {
  font-size: clamp(14px, 1.9vw, 28px);
  line-height: 1.25;
  white-space: nowrap;
  margin: 0 auto clamp(20px, 3vh, 32px);
}

/* "Return on Influex." + "The only ROI that compounds." — BOTH lines
   render in the authority gradient, stacked on two lines. */
.ix-insider-numbers-tag-roi {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  background: var(--grad-authority);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-insider-menu-pin .ix-insider-numbers-tag {
  margin: 0 auto;
  font-size: 0; /* collapse whitespace between block spans */
}

/* Mid-laptop (≤1700px wide AND ≤950px tall) — typical 1600×900
   business laptops with browser chrome. The 100vh sticky pin used
   by the What You Get carousel + embedded Membership Tiers gets
   ~780px of usable height. The biggest space-eater on these
   screens was the embedded Membership Tiers' 80px gap between
   title and toggle + oversized title — that's what was making
   the bottom of the tier cards clip. Carousel cards already fit
   fine at default sizes; we only nudge pin padding so the card
   centers cleanly without crowding the label. */
@media (max-width: 1700px) and (max-height: 950px) {
  /* Carousel pin — slightly tighter top/bottom padding so the
     card has more breathing room top+bottom inside the pin. */
  .ix-insider-menu-pin {
    padding-top: clamp(32px, 4.4vh, 56px);
    padding-bottom: clamp(20px, 2.6vh, 36px);
  }

  /* Embedded Membership Tiers — the actual fix. Title was eating
     80px below itself before the toggle; cards then ran past the
     pin's bottom edge. Drop the title margin and pull title size
     in modestly; cards keep their default desktop sizing. */
  .ix-insider-tiers--embedded .ix-insider-tiers-title {
    font-size: clamp(30px, 3.6vw, 52px);
    margin: 0 auto clamp(14px, 2vh, 24px);
  }
  .ix-insider-tiers--embedded .ix-insider-tiers-toggle {
    margin: clamp(6px, 1vh, 14px) auto 0;
  }
  .ix-insider-tier {
    padding: clamp(18px, 2vw, 30px) clamp(18px, 2vw, 28px);
  }
  .ix-insider-tier-eyebrow {
    font-size: clamp(20px, 2vw, 28px);
    margin-bottom: clamp(10px, 1.5vh, 16px);
  }
  .ix-insider-tier-price {
    margin-bottom: clamp(10px, 1.5vh, 16px);
    padding-bottom: clamp(10px, 1.5vh, 16px);
  }
  .ix-insider-tier-price-num {
    font-size: clamp(24px, 2.7vw, 38px);
  }
}

/* Tighter — anything under 820px tall (1366×768, or 1600×900
   with very heavy browser chrome). Pulls the carousel card image
   shorter (no longer cuts at the bottom edge of the pin) and
   compresses tier spacing further. */
@media (max-height: 820px) {
  .ix-walkaway-card-image { aspect-ratio: 16 / 10; }
  .ix-walkaway-card-bullet-text { font-size: 12px; line-height: 1.36; }
  .ix-walkaway-card-bullets,
  .ix-walkaway-card-bullets--icons { gap: 6px; }
  .ix-walkaway-card-title { font-size: 17px; margin-bottom: 6px; }
  .ix-insider-menu-pin {
    padding-top: 24px;
    padding-bottom: 16px;
  }
  .ix-insider-menu-label--mega {
    font-size: clamp(24px, 3vw, 38px);
    margin-bottom: 10px;
  }
  .ix-insider-tiers--embedded .ix-insider-tiers-title {
    font-size: clamp(24px, 2.8vw, 38px);
    margin: 0 auto 12px;
  }
}

/* Laptop (1024–1400 wide) — the desktop pinned carousel still runs,
   but the card max-width is pulled in and the title/bullet sizes
   drop so 6-bullet cards still fit the 100vh pin on shorter laptop
   screens (typically 1366×768 or 1440×900 with browser chrome). */
@media (max-width: 1400px) {
  .ix-insider-menu-stage { --card-w: clamp(640px, 80vw, 1180px); }
  .ix-insider-menu-label--mega { font-size: clamp(28px, 4vw, 48px); margin-bottom: clamp(14px, 2vh, 24px); }
  .ix-walkaway-card-title { font-size: clamp(15px, 1.5vw, 22px); }
  .ix-walkaway-card-bullet-text { font-size: clamp(11px, 0.8vw, 13px); line-height: 1.38; }
  .ix-walkaway-card-bullet-icon { width: clamp(16px, 1.2vw, 20px); height: clamp(16px, 1.2vw, 20px); }
  .ix-walkaway-card-bullets,
  .ix-walkaway-card-bullets--icons { gap: clamp(5px, 0.7vh, 9px); }
  .ix-walkaway-card { padding: clamp(18px, 1.8vw, 32px); gap: clamp(16px, 1.6vw, 28px); }
}

/* Mobile / tablet (≤ 900px) — disable sticky-pin, stack the cards
   vertically and let them swipe horizontally. Image and content
   stack INSIDE the card (image on top, content below) so the bullet
   list stays legible on narrow screens. */
@media (max-width: 900px) {
  .ix-insider-menu-stage {
    /* Disable sticky-pin on mobile — fall back to horizontal swipe. */
    height: auto;
    --card-w: clamp(300px, 88vw, 540px);
  }
  .ix-insider-menu-pin {
    position: static;
    height: auto;
    padding: 60px 0;
    gap: 32px;
  }
  .ix-insider-menu-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }
  .ix-insider-menu-track {
    transform: none !important;
    padding-inline: 20px;
  }
  .ix-insider-menu-track .ix-walkaway-card {
    scroll-snap-align: center;
    /* Stack image on top, content below — single column at narrow widths. */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: clamp(16px, 4vw, 24px);
    gap: clamp(14px, 3vw, 22px);
    max-height: none;
  }
  /* Cap the image area's height when it's full-width above the
     content so it doesn't dominate the card on phones. */
  .ix-insider-menu-track .ix-walkaway-card-image {
    aspect-ratio: 16 / 9;
  }
  .ix-walkaway-card-title { font-size: clamp(18px, 4.4vw, 24px); }
  .ix-walkaway-card-bullet-text { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.45; }
  .ix-walkaway-card-bullet-icon { width: 22px; height: 22px; }
  .ix-walkaway-card-bullets,
  .ix-walkaway-card-bullets--icons { gap: 10px; }
  .ix-insider-menu-label--mega { font-size: clamp(28px, 7vw, 44px); margin-bottom: clamp(20px, 4vh, 32px); }
}

/* ==========================================================================
   eXponential Network logotype — "e" + Influex X mark + "ponential Network"
   set in Montserrat with no letter-spacing.
   Used inline anywhere the brand name appears in body copy.
   ========================================================================== */
.ix-xnet {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  /* Lowercase letters' x-height is smaller than uppercase cap-height,
     so when the logotype sits inline next to UPPERCASE eyebrow text
     it visually shrinks. Bump font-size so the "ponential Network"
     lowercase letters read at the same visual weight as the caps. */
  font-size: 1.25em;
}
.ix-xnet-x {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.05em;
  margin: 0 0.02em;
  /* Brand authority gradient (champagne → coral → lavender) applied
     via the shared #ix-grad-auth linearGradient. Overrides currentColor
     because the X often sits inside gradient-text elements that have
     color:transparent — currentColor would render the X invisible. */
  fill: url(#ix-grad-auth);
}

/* ==========================================================================
   WHAT MAKES INFLUEX MEMBERSHIP DIFFERENT — Layered rising scene.
   Intro headline sits as the always-visible base. Four layers rise up
   from below in sequence over the section's 500vh scroll runway.
   ========================================================================== */
.ix-insider-what {
  position: relative;
  --scene-prog: 0;
  background: #000;
  /* 700vh = 100vh intro + 6 × 100vh runway for the six rising layers. */
  height: 700vh;
  /* Top margin creates a clean visual break between the hero above
     and this section's dark intro below — the hero's bottom edge
     ends, then a beat of pure black, then the intro begins to pin. */
  margin-top: clamp(48px, 10vh, 120px);
}
.ix-insider-what-runway {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Sticky pin — the visible viewport that holds the base + rising
   layers. Stays at the top of the screen for the entire 500vh runway. */
.ix-insider-what-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* Base layer — intro headline, always visible underneath the
   rising layers. Acts as its own flex-centering container since the
   markup doesn't include the .ix-insider-stakes-pin wrapper that
   normally provides this. */
.ix-insider-what-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100% !important;
  min-height: 0 !important;
  /* Flex-center the headline both axes — clears the fixed nav with
     generous top padding. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 4vw, 80px) clamp(48px, 8vh, 96px);
  overflow: hidden;
}
.ix-insider-what-base .ix-insider-stakes-pin {
  height: 100%;
}
/* Rising layers — absolutely positioned, full viewport. Each
   translateY: 100% → 0% based on its own --layer-rise progress.
   isolation + backface-visibility + translateZ(0) on the inner
   force each layer into its own GPU compositing context so
   sibling rises don't trigger repaints inside Layer 1's content. */
.ix-insider-what-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, calc((1 - var(--layer-rise, 0)) * 100%), 0);
  will-change: transform;
}
/* Layer ordering — later layers sit on top so each successive rise
   covers the previous one. */
.ix-insider-what-layer[data-layer="1"] { z-index: 2; }
.ix-insider-what-layer[data-layer="2"] { z-index: 3; }
.ix-insider-what-layer[data-layer="3"] { z-index: 4; }
.ix-insider-what-layer[data-layer="4"] { z-index: 5; }
.ix-insider-what-layer[data-layer="5"] { z-index: 6; }
.ix-insider-what-layer[data-layer="6"] { z-index: 7; }

/* Numbered watermark — big subtle stroke-only numeral at the
   top-left of each layer. No fill, just a hairline champagne outline.
   Generated from data-layer attribute so no per-layer markup needed. */
.ix-insider-what-layer::before {
  content: attr(data-layer);
  position: absolute;
  top: clamp(80px, 11vh, 130px);
  left: clamp(24px, 4vw, 64px);
  z-index: 10;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(236, 199, 119, 0.28);
  pointer-events: none;
}
/* Per-layer rise progress — each layer rises over its own 15% slice
   of the scene runway, in sequence. Hold 10% at start before layer 1
   begins to rise so the intro has time to register. */
.ix-insider-what-layer[data-layer="1"] {
  --layer-rise: clamp(0, calc((var(--scene-prog) - 0.10) * 6.667), 1);
}
.ix-insider-what-layer[data-layer="2"] {
  --layer-rise: clamp(0, calc((var(--scene-prog) - 0.25) * 6.667), 1);
}
.ix-insider-what-layer[data-layer="3"] {
  --layer-rise: clamp(0, calc((var(--scene-prog) - 0.40) * 6.667), 1);
}
.ix-insider-what-layer[data-layer="4"] {
  --layer-rise: clamp(0, calc((var(--scene-prog) - 0.55) * 6.667), 1);
}
.ix-insider-what-layer[data-layer="5"] {
  --layer-rise: clamp(0, calc((var(--scene-prog) - 0.70) * 6.667), 1);
}
.ix-insider-what-layer[data-layer="6"] {
  --layer-rise: clamp(0, calc((var(--scene-prog) - 0.85) * 6.667), 1);
}
/* Insight section inside layer 1 — strip its own min-height/100vh
   sizing so it fills the layer cleanly. */
.ix-insider-what-layer .ix-insider-insight {
  height: 100%;
  min-height: 0;
  /* Force --insight-p = 1 here so the copy stays fully visible — the
     original scroll-driven JS doesn't run inside the layered scene. */
  --insight-p: 1;
}
.ix-insider-what-layer .ix-insider-insight-pin {
  position: relative;
  top: auto;
  height: 100%;
}
.ix-insider-what-layer .ix-insider-insight-inner {
  opacity: 1 !important;
  /* Pin the inner to its own compositor layer with a static
     translateZ. Critical: NOT "transform: none" because that drops
     the GPU layer mid-scroll and lets sibling-layer compositing
     glitches flicker the text. translateZ(0) gives a stable layer
     with no visual offset. */
  transform: translateZ(0) !important;
  /* Kill the original `will-change: opacity, transform` from the
     standalone Insight rule — those properties never change inside
     the layered scene, so keeping the hint causes the browser to
     hold an oversized compositor layer that repaints unnecessarily. */
  will-change: auto !important;
}
.ix-insider-what-layer .ix-insider-insight-overlay,
.ix-insider-what-layer .ix-insider-insight-video {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Base intro flex centering now lives on .ix-insider-what-base
   itself (above), since the markup doesn't include a nested
   .ix-insider-stakes-pin wrapper. */
/* Layers 2-4 panel layout — matches the Insight section's typographic
   feel (big display title with gradient em, hairline rule, body
   paragraph). Anchored left within the layer for visual rhythm with
   Layer 1 above. */
.ix-insider-what-panel {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 4vw, 64px);
  max-width: 1280px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 70% 50% at 25% 30%, rgba(236, 199, 119, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 80% 90%, rgba(189, 166, 216, 0.08) 0%, transparent 70%),
    #060B1A;
  color: var(--fg-1);
}
.ix-insider-what-layer[data-layer="2"] { background: #060B1A; }
.ix-insider-what-layer[data-layer="3"] { background: #060B1A; }
.ix-insider-what-layer[data-layer="4"] { background: #060B1A; }
.ix-insider-what-layer[data-layer="5"] { background: #060B1A; }
.ix-insider-what-layer[data-layer="6"] { background: #060B1A; }

/* Layers with full-bleed background image or animated collage —
   same dark-left vignette treatment as the Insight section so the
   copy column on the left stays legible against the cinematic
   backdrop. Panel sits on top with transparent bg. */
.ix-insider-what-layer--bg .ix-insider-what-panel,
.ix-insider-what-layer--collage .ix-insider-what-panel,
.ix-insider-what-layer--split .ix-insider-what-panel {
  background: transparent;
  position: relative;
  z-index: 2;
}

/* --split variant: two-column panel — copy column LEFT, sphere
   anchored RIGHT. Used on Layer 4. Keeps the same max-width /
   margin / horizontal padding as the standard panel so the copy
   left-edge aligns with every other layer; only the inner grid
   changes (single column → two equal columns so the copy column
   width stays the same width it would be at 1fr in a single-col
   layout-ish, preserving its paragraph wrap). */
.ix-insider-what-layer--split .ix-insider-what-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.ix-insider-what-panel-copy {
  display: grid;
  align-content: center;
}
.ix-insider-what-panel-sphere {
  position: relative;
  /* Explicit width that grows with the viewport — uncoupled from
     the grid column width, so the sphere can be larger than its
     1fr cell without changing the copy column's wrap. */
  width: clamp(352px, 33.6vw, 624px);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  /* Compute viewport slack: at viewports wider than the 1280px
     panel, eat the right gutter (keeping a 24px outer margin)
     up to a -220px floor. At ≤1280px viewports the slack is 0
     so the sphere never overflows the actual viewport edge.
     Because the sphere has justify-self: end, any overflow from
     its larger width goes LEFT into the column gap — pre-paid
     for by the wider clamp(40-96px) column-gap above and the
     deep right-shift here. Copy column on the left is never
     touched. */
  margin-right: max(
    -220px,
    min(0px, calc((1280px - 100vw) / 2 + 24px))
  );
  justify-self: end;
  align-self: center;
}
.ix-insider-what-panel-sphere .ix-insider-reality-sphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* GPU-compositor stability on Layer 4 — when this layer translates
   off-screen and back, the browser used to purge rasterized textures
   and re-paint mid-transform, causing the bg image + overlay + sphere
   to flicker on scroll-up. Forcing each into its own persistent
   compositor layer (translateZ(0) + backface-visibility hidden)
   keeps the textures cached across the transform. Mirrors the fix
   applied to Layer 1's Insight inner. */
.ix-insider-what-layer[data-layer="4"] .ix-insider-what-bg,
.ix-insider-what-layer[data-layer="4"] .ix-insider-what-bg-overlay,
.ix-insider-what-layer[data-layer="4"] .ix-insider-what-panel-sphere {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ix-insider-what-layer[data-layer="4"] .ix-insider-what-panel-sphere {
  /* Scope paint to the sphere so face-node animations don't
     invalidate the parent layer's raster. */
  contain: layout paint;
  isolation: isolate;
}

@media (max-width: 1100px) {
  .ix-insider-what-layer--split .ix-insider-what-panel {
    grid-template-columns: 1.1fr 1fr;
    column-gap: clamp(16px, 2vw, 32px);
  }
  .ix-insider-what-panel-sphere {
    max-width: 460px;
  }
}
@media (max-width: 900px) {
  .ix-insider-what-layer--split .ix-insider-what-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: clamp(24px, 4vh, 48px);
    padding: clamp(72px, 10vh, 120px) clamp(24px, 4vw, 48px);
  }
  .ix-insider-what-panel-sphere {
    max-width: 360px;
    margin: 0 auto;
  }
}
.ix-insider-what-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
/* Push the Layer 5 backdrop image toward the right edge. The image
   at object-fit: cover already fills width on most viewports, so
   plain object-position is a no-op horizontally. Scale up and shift
   right via transform instead — guarantees overflow to translate. */
.ix-insider-what-layer[data-layer="5"] .ix-insider-what-bg {
  transform: translateX(18%) scale(1.15);
  transform-origin: right center;
}
.ix-insider-what-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Heavy darken on the left for the copy column. */
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.85) 35%,
      rgba(0, 0, 0, 0.55) 60%,
      rgba(0, 0, 0, 0.25) 82%,
      rgba(0, 0, 0, 0.08) 100%),
    /* Subtle top/bottom feather. */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0) 18%,
      rgba(0, 0, 0, 0) 82%,
      rgba(0, 0, 0, 0.45) 100%);
}

/* Layer 4 collage — 5 vertical columns of brand-header screenshots.
   Odd columns scroll DOWN, even columns scroll UP, all on continuous
   loops via translateY animations. The .ix-insider-what-bg-overlay
   (same dark-left vignette as the bg-image variant) sits over the
   collage so the copy on top stays legible. */
.ix-insider-what-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: row;
  gap: clamp(8px, 1vw, 18px);
  padding: 0;
  overflow: hidden;
  filter: brightness(0.55) saturate(0.85);
}
.ix-insider-what-collage-col {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.ix-insider-what-collage-track {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 16px);
  height: max-content;
  width: 100%;
  padding: 4px 0;
  will-change: transform;
}
.ix-insider-what-collage-col--down .ix-insider-what-collage-track {
  animation: ix-insider-collage-down 60s linear infinite;
}
.ix-insider-what-collage-col--up .ix-insider-what-collage-track {
  animation: ix-insider-collage-up 70s linear infinite;
}
.ix-insider-what-collage-col--slow .ix-insider-what-collage-track {
  animation-duration: 85s;
}
.ix-insider-what-collage-track img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(236, 199, 119, 0.08),
    0 8px 22px -10px rgba(0, 0, 0, 0.6);
  object-fit: cover;
  display: block;
}
@keyframes ix-insider-collage-down {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes ix-insider-collage-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-what-collage-col--down .ix-insider-what-collage-track,
  .ix-insider-what-collage-col--up   .ix-insider-what-collage-track {
    animation: none;
  }
}
.ix-insider-what-panel-title {
  margin: 0 0 clamp(28px, 4vh, 44px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  max-width: 18ch;
}
/* Layer 2 ("We Direct Your Investment Toward Maximum ROI") runs the
   longest title of the six — dial its size down ~22% so it doesn't
   dominate the layer. Scoped to layer 2 only. */
.ix-insider-what-layer[data-layer="2"] .ix-insider-what-panel-title {
  font-size: clamp(28px, 3.6vw, 58px);
}
.ix-insider-what-panel-title span,
.ix-insider-what-panel-title em {
  display: block;
}
.ix-insider-what-panel-title em {
  font-style: normal;
  background: var(--grad-authority);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ix-insider-what-panel-rule {
  border: 0;
  border-top: 1px solid rgba(236, 199, 119, 0.32);
  width: clamp(80px, 10vw, 140px);
  margin: 0 0 clamp(24px, 3.6vh, 40px);
}
.ix-insider-what-panel-body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 64ch;
}
.ix-insider-what-panel-body p {
  margin: 0 0 clamp(14px, 1.8vh, 22px);
}
/* The panel body is sentence-case, so the .ix-xnet 1.25em uppercase-
   context bump makes "eXponential Network" read oversized. Reset to 1em
   so the X-mark logotype matches the surrounding paragraph text. */
.ix-insider-what-panel-body .ix-xnet {
  font-size: 1em;
}
.ix-insider-what-panel-body p:last-child {
  margin-bottom: 0;
}
.ix-insider-what-panel-body b {
  color: var(--fg-1);
  font-weight: 600;
}
/* Closer stamp — Layer 1's "Your involvement becomes implementation."
   Ported verbatim from the original .ix-insider-insight-stamp:
   italic display font in champagne, with a pulsing halo + slow
   sweeping highlight beneath the text. */
.ix-insider-what-panel-stamp {
  position: relative;
  display: block;
  white-space: nowrap;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: clamp(16px, 1.8vw, 30px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  color: var(--color-champagne) !important;
  margin: clamp(22px, 3.2vh, 38px) 0 0 !important;
  padding-bottom: clamp(12px, 1.6vh, 20px);
}
.ix-insider-what-panel-stamp::before,
.ix-insider-what-panel-stamp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
/* Soft champagne halo — wide, blurred, breathing. */
.ix-insider-what-panel-stamp::before {
  height: clamp(10px, 1.4vh, 18px);
  background: radial-gradient(60% 120% at 50% 100%,
    rgba(231, 196, 127, 0.55) 0%,
    rgba(231, 196, 127, 0.22) 38%,
    rgba(231, 196, 127, 0) 75%);
  filter: blur(5px);
  transform-origin: 50% 100%;
  animation: ix-insight-stamp-pulse 3.6s ease-in-out infinite;
}
/* Hair-fine highlight that slowly traverses from left to right. */
.ix-insider-what-panel-stamp::after {
  height: 1px;
  background:
    linear-gradient(90deg,
      rgba(231, 196, 127, 0) 0%,
      rgba(231, 196, 127, 0) 30%,
      rgba(231, 196, 127, 0.95) 50%,
      rgba(231, 196, 127, 0) 70%,
      rgba(231, 196, 127, 0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ix-insight-stamp-sweep 5.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-what-panel-stamp::before,
  .ix-insider-what-panel-stamp::after { animation: none; opacity: 0.75; }
}


/* ==========================================================================
   WHAT YOU GET — Spotlight Rail v2 (sales page only). Namespaced .sxr-*.
   Intro: big centered "What You Get" pins, then drifts to the top-left
   as the rail + chapters fade in. Each chapter cross-fades over a
   low-opacity placeholder background (full-bleed, like the homepage
   phase-journey). Chapter 1 cross-fades story+benefits -> services menu.
   ========================================================================== */
.sxr { position: relative; --scene-prog: 0; height: 720vh; background: #04060f; }
.sxr-runway { position: relative; width: 100%; height: 100%; }
.sxr-stage { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; background: #04060f; }

/* Intro — big centered title, no background. Drifts up-left + shrinks
   as it fades, handing off to the rail's small label. */
.sxr-introbig {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: clamp(0, calc((0.05 - var(--scene-prog)) / 0.025), 1);
  transform: translate(calc(clamp(0, calc(var(--scene-prog) / 0.06), 1) * -26vw), calc(clamp(0, calc(var(--scene-prog) / 0.06), 1) * -30vh)) scale(calc(1 - clamp(0, calc(var(--scene-prog) / 0.06), 1) * 0.5));
  will-change: opacity, transform;
}
.sxr-introbig span {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(52px,10vw,150px); line-height: 0.9;
  letter-spacing: -0.04em; text-transform: uppercase;
  background: var(--grad-authority); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: sxr-drift 16s linear infinite;
}
@keyframes sxr-drift { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }

/* Content (rail + panels) fades in after the intro */
.sxr-content { position: absolute; inset: 0; opacity: clamp(0, calc((var(--scene-prog) - 0.04) / 0.03), 1); }

/* ---- Rail (floats over the full-bleed backgrounds) ---- */
.sxr-rail {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 4; width: clamp(140px,18vw,280px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(20px,3.4vh,40px);
  padding: clamp(90px,13vh,140px) 0 clamp(40px,6vh,70px) clamp(24px,3.4vw,56px);
}
.sxr-mega { position: absolute; top: clamp(76px,10vh,116px); left: clamp(24px,3.4vw,56px); font-family: var(--font-micro); font-weight: 700; font-size: 11px; letter-spacing: 0.46em; text-transform: uppercase; color: rgba(236,199,119,0.7); }
.sxr-rail-line { position: absolute; left: calc(clamp(24px,3.4vw,56px) + 13px); top: 50%; transform: translateY(-50%); width: 2px; height: clamp(180px,30vh,300px); background: rgba(236,199,119,0.16); border-radius: 2px; overflow: hidden; }
.sxr-rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--scene-prog) * 100%); background: linear-gradient(180deg, var(--color-champagne), var(--color-rose-copper)); }
.sxr-rail-item { position: relative; display: flex; align-items: center; gap: 14px; padding-left: 4px; }
.sxr-rail-num { flex: 0 0 auto; width: 24px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(12px,1vw,15px); color: rgba(254,247,223,0.4); font-variant-numeric: tabular-nums; transition: color 400ms var(--ease-quint,ease), transform 400ms var(--ease-quint,ease); }
.sxr-rail-label { font-family: var(--font-micro); font-weight: 700; font-size: clamp(10px,0.8vw,12px); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(254,247,223,0.35); transition: color 400ms var(--ease-quint,ease); white-space: normal; line-height: 1.3; max-width: clamp(90px,11vw,180px); }
.sxr-rail-label sup { font-size: 0.7em; }
.sxr[data-active-ch="1"] .sxr-rail-item[data-ch="1"] .sxr-rail-num,
.sxr[data-active-ch="2"] .sxr-rail-item[data-ch="2"] .sxr-rail-num,
.sxr[data-active-ch="3"] .sxr-rail-item[data-ch="3"] .sxr-rail-num,
.sxr[data-active-ch="4"] .sxr-rail-item[data-ch="4"] .sxr-rail-num { color: var(--color-champagne); transform: scale(1.5); }
.sxr[data-active-ch="1"] .sxr-rail-item[data-ch="1"] .sxr-rail-label,
.sxr[data-active-ch="2"] .sxr-rail-item[data-ch="2"] .sxr-rail-label,
.sxr[data-active-ch="3"] .sxr-rail-item[data-ch="3"] .sxr-rail-label,
.sxr[data-active-ch="4"] .sxr-rail-item[data-ch="4"] .sxr-rail-label { color: var(--color-ivory); }

/* ---- Panels (full-bleed, stacked, cross-fade) ---- */
.sxr-panels { position: absolute; inset: 0; z-index: 2; }
.sxr-panel {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px,13vh,140px) clamp(40px,5vw,80px) clamp(48px,8vh,90px) clamp(150px,18vw,300px);
  will-change: opacity;
  /* Panels are absolutely stacked with increasing z-index per chapter, so a
     later (higher z-index) panel sits on top even while invisible at
     opacity:0 — that silently blocks clicks/links in an earlier chapter.
     Only the chapter matching data-active-ch (set by the scroll watcher)
     is interactive. */
  pointer-events: none;
}
.sxr[data-active-ch="1"] .sxr-panel[data-ch="1"],
.sxr[data-active-ch="2"] .sxr-panel[data-ch="2"],
.sxr[data-active-ch="3"] .sxr-panel[data-ch="3"],
.sxr[data-active-ch="4"] .sxr-panel[data-ch="4"],
.sxr[data-active-ch="5"] .sxr-panel[data-ch="5"] {
  pointer-events: auto;
}
.sxr-panel--center { align-items: center; text-align: center; padding-left: clamp(150px,18vw,300px); }
.sxr-panel[data-ch="5"] { z-index: 1; opacity: min(clamp(0,calc((var(--scene-prog) - 0.06)/0.03),1), clamp(0,calc((0.55 - var(--scene-prog))/0.05),1)); }
.sxr-panel[data-ch="2"] { z-index: 2; opacity: min(clamp(0,calc((var(--scene-prog) - 0.53)/0.04),1), clamp(0,calc((0.67 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { z-index: 3; opacity: min(clamp(0,calc((var(--scene-prog) - 0.69)/0.04),1), clamp(0,calc((0.83 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { z-index: 4; opacity: clamp(0,calc((var(--scene-prog) - 0.85)/0.04),1); }

/* Full-bleed low-opacity placeholder background + legibility scrim */
.sxr-panel-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.22; }
.sxr-panel-scrim { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(4,6,15,0.55), rgba(4,6,15,0.55)),
    linear-gradient(90deg, rgba(4,6,15,0.92) 0%, rgba(4,6,15,0.7) 38%, rgba(4,6,15,0.3) 72%, rgba(4,6,15,0.1) 100%); }
.sxr-panel-scrim--center { background:
    linear-gradient(0deg, rgba(4,6,15,0.6), rgba(4,6,15,0.6)),
    radial-gradient(70% 60% at 50% 45%, rgba(4,6,15,0) 30%, rgba(4,6,15,0.6) 100%); }
.sxr-panel > *:not(.sxr-panel-bg):not(.sxr-panel-scrim) { position: relative; z-index: 2; }

/* Titles / body */
.sxr-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,4.4vw,68px); line-height: 1.04; letter-spacing: -0.025em; margin: 0; color: var(--color-ivory); max-width: 22ch; }
.sxr-title em { font-style: normal; background: var(--grad-authority); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sxr-body { font-family: var(--font-body); font-weight: 300; font-size: clamp(16px,1.5vw,23px); line-height: 1.62; color: rgba(254,247,223,0.82); max-width: 60ch; margin: clamp(20px,3vh,30px) 0 0; }
.sxr-panel--center .sxr-body { margin-inline: auto; }
.sxr-body b { color: var(--color-ivory); font-weight: 600; }

/* ---- Chapter 1 sub-views ---- */
.sxr-sub { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px,13vh,140px) clamp(40px,5vw,80px) clamp(48px,8vh,90px) clamp(150px,18vw,300px); will-change: opacity; }
.sxr-sub[data-sub="a"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.15)/0.04),1), clamp(0,calc((0.32 - var(--scene-prog))/0.04),1)); }
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.34)/0.04),1), clamp(0,calc((0.53 - var(--scene-prog))/0.04),1)); }

/* Dream Team — narrative LEFT, glass benefit cards RIGHT */
.sxr-dt-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px,3.4vw,60px); align-items: center; width: 100%; }
.sxr-dt-left .sxr-title { margin-bottom: clamp(18px,2.6vh,28px); }
.sxr-narr { display: grid; gap: clamp(12px,1.8vh,18px); max-width: 56ch; }
.sxr-narr p { font-family: var(--font-body); font-weight: 300; font-size: clamp(13px,1.1vw,16.5px); line-height: 1.55; color: rgba(254,247,223,0.78); }
.sxr-dt-right { display: grid; gap: clamp(8px,1.2vh,14px); }
.sxr-glasscard {
  padding: clamp(13px,1.3vw,18px) clamp(15px,1.5vw,22px); border-radius: 14px;
  background: rgba(255,255,255,0.055); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 30px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.sxr-glasscard h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(14px,1.25vw,18px); margin: 0 0 5px; color: var(--color-champagne); }
.sxr-glasscard p { font-family: var(--font-body); font-weight: 300; font-size: clamp(11.5px,0.92vw,14px); line-height: 1.4; color: rgba(254,247,223,0.72); margin: 0; }

/* Menu of Services — full bleed, 1-line title, bigger cards */
.sxr-sub--full { padding-right: 0; }
.sxr-menu-title { white-space: nowrap; font-size: clamp(24px,3.1vw,48px); max-width: none; }
.sxr-menu-intro { font-family: var(--font-body); font-weight: 300; font-size: clamp(13px,1.1vw,17px); line-height: 1.5; color: rgba(254,247,223,0.7); margin: clamp(12px,2vh,18px) 0 clamp(20px,2.8vh,30px); max-width: 70ch; }
.sxr-menu-track {
  display: flex; gap: clamp(18px,2vw,30px); width: max-content; padding-right: 6vw;
  transform: translateX(calc(clamp(0, calc((var(--scene-prog) - 0.36) / 0.14), 1) * -64%));
}
.sxr-menucard {
  flex: 0 0 clamp(540px,54vw,760px); display: grid; grid-template-columns: 0.92fr 1fr; gap: clamp(16px,1.8vw,28px);
  padding: clamp(16px,1.6vw,24px); border-radius: 22px;
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); border: 1px solid rgba(236,199,119,0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sxr-menucard-media { position: relative; border-radius: 16px; overflow: hidden; min-height: clamp(230px,30vh,340px);
  background: linear-gradient(135deg,#1c2740 0%,#0c1322 55%,#16121f 100%); }
.sxr-menucard-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 60% at 30% 25%, rgba(236,199,119,0.22), transparent 62%); }
.sxr-menucard-media[data-cat="brand"] { background: linear-gradient(135deg,#2a2444,#110d22 55%,#211b3a); }
.sxr-menucard-media[data-cat="video"] { background: linear-gradient(135deg,#2c2218,#150f0a 55%,#221a12); }
.sxr-menucard-media[data-cat="msg"]   { background: linear-gradient(135deg,#1f3338,#0a1820 55%,#1d3036); }
.sxr-menucard-media[data-cat="stage"] { background: linear-gradient(135deg,#241a2e,#120c18 55%,#2a1f33); }
.sxr-menucard-tag { position: absolute; bottom: 14px; left: 16px; font-family: var(--font-micro); font-weight: 700; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(254,247,223,0.5); }
.sxr-menucard-body { display: flex; flex-direction: column; justify-content: center; }
.sxr-menucard-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.2vw,34px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 clamp(12px,1.6vh,18px); padding-top: clamp(20px,3vh,44px); color: var(--color-ivory); }
.sxr-menucard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sxr-menucard-list li { position: relative; padding-left: 18px; font-family: var(--font-body); font-weight: 300; font-size: clamp(12.5px,1.05vw,15.5px); line-height: 1.4; color: rgba(254,247,223,0.74); }
.sxr-menucard-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-champagne); }
.sxr-menucard-list li b { color: var(--color-ivory); font-weight: 600; }
.sxr-menu-foot { margin: clamp(16px,2.4vh,24px) 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(15px,1.4vw,22px); color: var(--color-champagne); }

/* ---- Chapter 2 AI² ---- */
.sxr-ai2-formula { font-family: var(--font-display); font-weight: 800; font-size: clamp(80px,13vw,220px); line-height: 0.82; letter-spacing: -0.05em; margin: 0 0 clamp(16px,2.4vh,28px);
  background: var(--grad-authority); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sxr-ai2-formula sup { font-size: 0.42em; vertical-align: super; }
.sxr-panel[data-ch="2"] .sxr-title { max-width: none; font-weight: 500; }
.sxr-x { color: var(--color-champagne); padding: 0 0.2em; }

/* ---- Chapters 3 & 4 card grids ---- */
.sxr-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.4vw,20px); margin-top: clamp(22px,3.2vh,38px); width: 100%; max-width: 1000px; }
.sxr-card { padding: clamp(16px,1.6vw,24px); border-radius: 15px; background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(236,199,119,0.16);
  transition: transform 400ms var(--ease-quint,ease), border-color 400ms var(--ease-quint,ease); }
.sxr-card:hover { transform: translateY(-5px); border-color: rgba(236,199,119,0.42); }
.sxr-card:nth-child(1) { grid-column: span 3; }
.sxr-cards--3 .sxr-card:nth-child(1) { grid-column: span 1; }
.sxr-card p { font-family: var(--font-body); font-weight: 300; font-size: clamp(12px,1vw,15px); line-height: 1.5; color: rgba(254,247,223,0.7); margin: 0; }
.sxr-card p b { color: var(--color-ivory); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .sxr-introbig, .sxr-sub, .sxr-panel { transition: none; } }
@media (max-width: 900px) {
  .sxr-rail { flex-direction: row; justify-content: center; gap: 16px; width: auto; left: 0; right: 0; bottom: auto; padding: clamp(80px,11vh,110px) 16px 0; }
  .sxr-rail-line, .sxr-mega, .sxr-rail-label { display: none; }
  .sxr-panel, .sxr-sub { padding: clamp(120px,16vh,150px) 22px 40px; }
  .sxr-dt-grid { grid-template-columns: 1fr; gap: 18px; }
  .sxr-menu-title { white-space: normal; }
  .sxr-cards, .sxr-cards--3 { grid-template-columns: 1fr; }
  .sxr-card:nth-child(1) { grid-column: span 1; }
  .sxr-menucard { grid-template-columns: 1fr; flex-basis: min(360px,80vw); }
}

/* ==========================================================================
   MEMBERSHIP TIERS — standalone wrapper (re-homed from the carousel finale).
   Restores the dark section frame the embedded tiers need outside the pin.
   ========================================================================== */
.sxg-tiers-section { position: relative; background: radial-gradient(120% 70% at 50% 0%, #100e1c 0%, #05050d 60%); padding: clamp(80px,12vh,150px) clamp(24px,5vw,64px); }
.sxg-tiers-section .ix-insider-tiers--embedded { margin: 0 auto; }

/* --- Dream Team sub-a fit tuning: shrink title/narrative/cards so the
   two-column (narrative + glass cards) view fits one viewport. --- */
.sxr-sub { padding-top: clamp(80px,10vh,120px); padding-bottom: clamp(36px,5vh,64px); }
.sxr-dt-grid { align-items: start; }
.sxr-dt-left .sxr-title { font-size: clamp(22px,2.5vw,40px); max-width: 16ch; margin-bottom: clamp(12px,1.8vh,20px); }
.sxr-narr { gap: clamp(10px,1.4vh,15px); max-width: 52ch; }
.sxr-narr p { font-size: clamp(12px,0.98vw,15px); line-height: 1.5; }
.sxr-dt-right { gap: clamp(7px,1vh,12px); }
.sxr-glasscard { padding: clamp(11px,1.1vw,15px) clamp(13px,1.35vw,19px); }
.sxr-glasscard h4 { font-size: clamp(13px,1.1vw,16px); margin-bottom: 4px; }
.sxr-glasscard p { font-size: clamp(11px,0.88vw,13.5px); line-height: 1.38; }

/* Top-align sub content (centering overflowed on the tall Dream Team
   view). Fixed top offset clears the nav + intro zone. */
.sxr-sub { justify-content: flex-start; padding-top: clamp(120px,15vh,176px); }

/* The generic `.sxr-panel > *` lift rule outranks .sxr-sub and forced
   the two Chapter-1 sub-views into normal flow (stacking). Restore
   their absolute overlap so they cross-fade in place. */
.sxr-panel > .sxr-sub { position: absolute !important; inset: 0; z-index: 2; }

/* --- Intro timing v3: transparent section (no flat bg color during the
   intro), + a ~1-viewport HOLD where "What You Get" stays centered
   before it drifts to the top-left and the chapters begin. --- */
.sxr { height: 800vh; background: transparent; }
.sxr-stage { background: transparent; }

.sxr-introbig {
  opacity: clamp(0, calc((0.19 - var(--scene-prog)) / 0.07), 1);
  transform: translate(calc(clamp(0, calc((var(--scene-prog) - 0.12) / 0.08), 1) * -26vw), calc(clamp(0, calc((var(--scene-prog) - 0.12) / 0.08), 1) * -30vh)) scale(calc(1 - clamp(0, calc((var(--scene-prog) - 0.12) / 0.08), 1) * 0.5));
}
.sxr-content { opacity: clamp(0, calc((var(--scene-prog) - 0.08) / 0.03), 1); }

.sxr-panel[data-ch="5"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.20)/0.03),1), clamp(0,calc((0.56 - var(--scene-prog))/0.05),1)); }
.sxr-panel[data-ch="2"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.57)/0.04),1), clamp(0,calc((0.69 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.71)/0.04),1), clamp(0,calc((0.83 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { opacity: clamp(0,calc((var(--scene-prog) - 0.85)/0.04),1); }
.sxr-sub[data-sub="a"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.23)/0.04),1), clamp(0,calc((0.39 - var(--scene-prog))/0.04),1)); }
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.41)/0.04),1), clamp(0,calc((0.56 - var(--scene-prog))/0.05),1)); }
.sxr-menu-track { transform: translateX(calc(clamp(0, calc((var(--scene-prog) - 0.43) / 0.13), 1) * -64%)); }

/* --- Intro v4: the SAME "What You Get" travels from center to the
   top-left rail slot (no crossfade with a separate label). Lighter
   weight + soft-authority gradient sweep. Stays visible as the rail
   header after it lands. --- */
.sxr-introbig {
  opacity: 1 !important;
  transform-origin: center;
  /* translateX lands the label's left edge on the rail items column:
     final center X = rail-padding-left + ~72px (half label width), so
     the left edge aligns with the 01/02 numbers. Mixes the rail's
     clamped-px padding with -50vw to track the flex-centered origin. */
  transform:
    translate(
      calc(clamp(0, calc((var(--scene-prog) - 0.12) / 0.10), 1) * (clamp(24px, 3.4vw, 56px) + 72px - 50vw)),
      calc(clamp(0, calc((var(--scene-prog) - 0.12) / 0.10), 1) * -39vh)
    )
    scale( calc(1 - clamp(0, calc((var(--scene-prog) - 0.12) / 0.10), 1) * 0.87) );
}
.sxr-introbig span {
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: sxr-soft-sweep 16s linear infinite;
}
@keyframes sxr-soft-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .sxr-introbig span { animation: none; } }

/* --- v5: rail becomes a HORIZONTAL top bar (full chapter names),
   aligned with the "What You Get" label. Content panels reflow to
   full-width below the bar. --- */

/* "What You Get" lands aligned with the content's left padding. */
.sxr-introbig {
  transform:
    translate(
      calc(clamp(0, calc((var(--scene-prog) - 0.06) / 0.05), 1) * (clamp(40px,5vw,80px) + 74px - 50vw)),
      calc(clamp(0, calc((var(--scene-prog) - 0.06) / 0.05), 1) * -40vh)
    )
    scale( calc(1 - clamp(0, calc((var(--scene-prog) - 0.06) / 0.05), 1) * 0.86) );
}

/* Horizontal bar across the top; tabs start to the right of the label. */
.sxr-rail {
  left: 0; right: 0; top: 0; bottom: auto; width: auto; height: auto;
  flex-direction: row; align-items: flex-start; justify-content: flex-start;
  gap: clamp(12px, 1.3vw, 28px);
  padding: clamp(78px,10vh,116px) clamp(24px,4vw,64px) 0 calc(clamp(40px,5vw,80px) + clamp(150px,15vw,232px));
}
.sxr-rail-item { flex: 1 1 0; min-width: 0; align-items: flex-start; gap: 9px; padding-left: 0; }
.sxr-rail-num { width: auto; }
.sxr-rail-label { max-width: none; white-space: normal; line-height: 1.26; font-size: clamp(9.5px,0.76vw,12px); letter-spacing: 0.06em; }
/* progress line sits just ABOVE the tab row, spanning the tabs. */
.sxr-rail-line { left: calc(clamp(40px,5vw,80px) + clamp(150px,15vw,232px)); right: clamp(24px,4vw,64px); top: clamp(60px,8vh,96px); width: auto; height: 2px; transform: none; }
.sxr-rail-fill { left: 0; top: 0; width: calc(var(--scene-prog) * 100%); height: 100%; }

/* Content reflows full-width below the top bar. */
.sxr-panel, .sxr-sub { padding-top: clamp(172px,22vh,228px) !important; padding-left: clamp(40px,5vw,80px) !important; padding-right: clamp(40px,5vw,80px); }
.sxr-panel--center { padding-left: clamp(40px,5vw,80px) !important; }
.sxr-sub--full { padding-right: 0 !important; }

/* --- v6: Chapter-1 polish + progress-bar hold --- */

/* Progress fill holds under the active tab (driven by --rail-prog). */
.sxr-rail-fill { width: calc(var(--rail-prog, 0.125) * 100%) !important; }

/* Dream Team — bigger title + paragraph, narrative fills the left
   column (kills the empty center), balanced two-column grid. */
.sxr-dt-grid { grid-template-columns: 1fr 1fr; gap: clamp(36px,4.5vw,84px); align-items: center; }
.sxr-dt-left .sxr-title { font-size: clamp(34px,4.4vw,64px) !important; max-width: 16ch !important; margin-bottom: clamp(20px,2.8vh,32px) !important; }
.sxr-narr { max-width: none !important; gap: clamp(14px,2vh,22px) !important; }
.sxr-narr p { font-size: clamp(15px,1.25vw,20px) !important; line-height: 1.6 !important; color: rgba(254,247,223,0.82); }
.sxr-narr p b { color: var(--color-ivory); font-weight: 600; }

/* Glass benefit cards — icon + larger text. */
.sxr-glasscard { display: flex; align-items: flex-start; gap: clamp(13px,1.3vw,20px); padding: clamp(15px,1.5vw,22px) clamp(18px,1.7vw,26px) !important; }
.sxr-glass-icon { flex: 0 0 auto; width: clamp(34px,2.8vw,44px); height: clamp(34px,2.8vw,44px); display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(236,199,119,0.1); border: 1px solid rgba(236,199,119,0.3); color: var(--color-champagne); }
.sxr-glass-icon svg { width: 54%; height: 54%; display: block; }
.sxr-glass-body { min-width: 0; }
.sxr-glasscard h4 { font-size: clamp(16px,1.4vw,21px) !important; margin: 0 0 5px !important; }
.sxr-glasscard p { font-size: clamp(13px,1.05vw,16px) !important; line-height: 1.45 !important; }

/* --- v7: replace tab numbers with a glowing gold dot --- */
.sxr-rail-num {
  font-size: 0 !important; color: transparent !important;
  flex: 0 0 auto; width: 11px; height: 11px; min-width: 11px; border-radius: 50%;
  background: rgba(236,199,119,0.32);
  margin-top: 3px; transform: none !important;
  transition: background 400ms var(--ease-quint,ease), box-shadow 400ms ease;
}
.sxr[data-active-ch="1"] .sxr-rail-item[data-ch="1"] .sxr-rail-num,
.sxr[data-active-ch="2"] .sxr-rail-item[data-ch="2"] .sxr-rail-num,
.sxr[data-active-ch="3"] .sxr-rail-item[data-ch="3"] .sxr-rail-num,
.sxr[data-active-ch="4"] .sxr-rail-item[data-ch="4"] .sxr-rail-num {
  background: var(--color-champagne); transform: none !important;
  animation: sxr-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes sxr-dot-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(236,199,119,0.14), 0 0 12px 2px rgba(236,199,119,0.5); }
  50%     { box-shadow: 0 0 0 5px rgba(236,199,119,0.22), 0 0 20px 5px rgba(236,199,119,0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .sxr[data-active-ch] .sxr-rail-item .sxr-rail-num { animation: none; box-shadow: 0 0 14px 3px rgba(236,199,119,0.6); }
}

/* ===== v8: menu polish + retimed chapter windows ===== */

/* Dream Team phase — make its placeholder background visible. */
.sxr-panel[data-ch="5"] .sxr-panel-bg { opacity: 0.30; }

/* Retimed cross-fades: sub-a 0.20-0.37, sub-b 0.41-0.61, menu pan
   HELD until 0.48 (cards load + a beat) then pans 0.48-0.59. */
.sxr-sub[data-sub="a"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.20)/0.04),1), clamp(0,calc((0.37 - var(--scene-prog))/0.04),1)); }
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.41)/0.04),1), clamp(0,calc((0.61 - var(--scene-prog))/0.04),1)); }
.sxr-menu-track { transform: translateX(calc(clamp(0, calc((var(--scene-prog) - 0.48) / 0.11), 1) * -62%)); }
.sxr-panel[data-ch="5"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.12)/0.03),1), clamp(0,calc((0.63 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="2"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.64)/0.04),1), clamp(0,calc((0.75 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.76)/0.04),1), clamp(0,calc((0.87 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { opacity: clamp(0,calc((var(--scene-prog) - 0.88)/0.04),1); }

/* Menu header — centered title + 1-line centered intro + centered foot. */
.sxr-sub--full { padding-left: clamp(40px,5vw,80px) !important; padding-right: clamp(40px,5vw,80px) !important; }
.sxr-menu-title { text-align: center; white-space: nowrap; max-width: none; }
.sxr-menu-intro { text-align: center; white-space: nowrap; max-width: none; margin-left: auto; margin-right: auto; }
.sxr-menu-foot { text-align: center; margin-top: clamp(30px,4.5vh,56px) !important; }
/* track breaks out full-bleed despite the symmetric sub padding */
.sxr-menu-track { margin-left: calc(-1 * clamp(40px,5vw,80px)); padding-left: clamp(40px,5vw,80px); }

/* Cards — bigger + premium gold-gradient border (brightest at top),
   matching the deliverable-card style. */
.sxr-menucard {
  flex: 0 0 clamp(560px, 56vw, 800px);
  background: linear-gradient(180deg, #0c0e18 0%, #07080f 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 24px; position: relative; isolation: isolate;
}
.sxr-menucard::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1.5px; z-index: -1;
  background: linear-gradient(180deg, rgba(236,199,119,0.85) 0%, rgba(236,199,119,0.28) 24%, rgba(236,199,119,0.12) 66%, rgba(189,166,216,0.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.sxr-menucard-media { min-height: clamp(260px,32vh,380px); border-radius: 16px; }
.sxr-menucard-title { font-size: clamp(24px,2.4vw,38px); background: var(--grad-authority); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sxr-menucard-list li { font-size: clamp(14px,1.3vw,19px); line-height: 1.45; }

/* ===== v9: visible DT bg, menu title smaller, taller cards, pan-then-fade ===== */
.sxr { height: 900vh; }

/* Dream Team — make the placeholder background clearly visible; lighten
   the flat darken (keep the left vignette so the copy stays legible). */
.sxr-panel[data-ch="5"] .sxr-panel-bg { opacity: 0.6 !important; }
.sxr-panel[data-ch="5"] .sxr-panel-scrim {
  background:
    linear-gradient(0deg, rgba(4,6,15,0.32), rgba(4,6,15,0.32)),
    linear-gradient(90deg, rgba(4,6,15,0.92) 0%, rgba(4,6,15,0.58) 42%, rgba(4,6,15,0.18) 78%, rgba(4,6,15,0) 100%);
}

/* Menu title a touch smaller. */
.sxr-menu-title { font-size: clamp(20px,2.4vw,36px) !important; }

/* Cards — taller + bigger, titles aligned to the top. */
.sxr-menucard { flex: 0 0 clamp(580px, 58vw, 840px); }
.sxr-menucard-media { min-height: clamp(330px,42vh,480px) !important; }
.sxr-menucard-body { justify-content: flex-start !important; }

/* Retimed: sub-a 0.20-0.36; sub-b in 0.41, holds, out 0.62-0.66; the
   pan completes (0.48-0.60) and HOLDS before the fade-out begins. */
.sxr-sub[data-sub="a"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.20)/0.04),1), clamp(0,calc((0.36 - var(--scene-prog))/0.04),1)); }
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.41)/0.04),1), clamp(0,calc((0.66 - var(--scene-prog))/0.04),1)); }
.sxr-menu-track { transform: translateX(calc(clamp(0, calc((var(--scene-prog) - 0.48) / 0.12), 1) * -66%)); }
.sxr-panel[data-ch="5"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.12)/0.03),1), clamp(0,calc((0.70 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="2"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.68)/0.04),1), clamp(0,calc((0.82 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.83)/0.04),1), clamp(0,calc((0.91 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { opacity: clamp(0,calc((var(--scene-prog) - 0.92)/0.04),1); }

/* ===== v10: menu pan driven by measured px (--menu-pan) so the last
   card always finishes flush at the right edge before fade-out. ===== */
.sxr-menu-track {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: translateX(var(--menu-pan, 0px)) !important;
}

/* ===== v11: marquee sweep — cards fully exit left (pan 0.48-0.62),
   THEN the menu fades (0.63-0.67). Chapter windows shifted to suit. ===== */
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.41)/0.04),1), clamp(0,calc((0.67 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="5"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.12)/0.03),1), clamp(0,calc((0.72 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="2"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.70)/0.04),1), clamp(0,calc((0.83 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.84)/0.04),1), clamp(0,calc((0.92 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { opacity: clamp(0,calc((var(--scene-prog) - 0.93)/0.04),1); }

/* ===== v12: cards enter from the right, sweep out left; the "menu
   expands" foot fades in only AFTER the last card. ===== */
.sxr { height: 1100vh; }

.sxr-sub[data-sub="a"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.18)/0.04),1), clamp(0,calc((0.33 - var(--scene-prog))/0.04),1)); }
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.37)/0.04),1), clamp(0,calc((0.74 - var(--scene-prog))/0.04),1)); }

/* Foot hidden until the cards have swept off (ch5 pan ends ~0.96), then
   fades in as the closing line. Retimed for the ch5 (Flex Fund) window. */
.sxr-menu-foot { opacity: clamp(0, calc((var(--scene-prog) - 0.965) / 0.015), 1); }

.sxr-panel[data-ch="5"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.12)/0.03),1), clamp(0,calc((0.78 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="2"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.76)/0.04),1), clamp(0,calc((0.86 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.87)/0.04),1), clamp(0,calc((0.93 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { opacity: clamp(0,calc((var(--scene-prog) - 0.94)/0.04),1); }

/* ===== v13: bigger cards + centered, non-italic closing line ===== */
.sxr-menucard { flex: 0 0 clamp(640px, 62vw, 920px); }
.sxr-menucard-media { min-height: clamp(380px, 47vh, 560px) !important; }

/* "The menu expands…" — centered in the (now empty) card area as the
   closing line, upright (not italic). It still fades in only at the end. */
.sxr-menu-foot {
  position: absolute; left: clamp(40px,5vw,80px); right: clamp(40px,5vw,80px); top: 56%;
  transform: translateY(-50%); margin: 0 !important;
  text-align: center; font-style: normal;
  font-size: clamp(18px,1.7vw,28px);
}

/* ===== v14: breathing room between the menu intro and the cards ===== */
.sxr-menu-track { margin-top: clamp(44px, 5.5vh, 80px) !important; }

/* ===== v15: menu card border matched EXACTLY to the deliverable card
   on the other page (gold orb + black inner + center-bright gold
   gradient border via border-box). ===== */
.sxr-menucard {
  background:
    radial-gradient(58% 50% at 78% 22%, rgba(236, 199, 119, 0.20) 0%, rgba(236, 199, 119, 0.05) 35%, rgba(0, 0, 0, 0) 65%) padding-box,
    linear-gradient(#000, #000) padding-box,
    linear-gradient(90deg, rgba(255, 216, 162, 0.10) 0%, rgba(255, 216, 162, 0.95) 50.9%, rgba(255, 216, 162, 0.10) 100%) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 32px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.sxr-menucard::after { display: none !important; }

/* ===== v16: premium benefit cards + boxless icons ===== */
.sxr-glasscard {
  display: flex; align-items: flex-start; gap: clamp(16px,1.6vw,24px);
  padding: clamp(18px,1.8vw,28px) clamp(20px,2vw,32px) !important;
  border-radius: 16px;
  background:
    radial-gradient(92% 80% at 88% 10%, rgba(236,199,119,0.16) 0%, rgba(236,199,119,0.035) 40%, rgba(0,0,0,0) 68%) padding-box,
    linear-gradient(160deg, #17171f 0%, #0b0b12 100%) padding-box,
    linear-gradient(125deg, rgba(255,216,162,0.10) 0%, rgba(255,216,162,0.55) 50%, rgba(255,216,162,0.10) 100%) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 18px 42px -22px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: transform 380ms var(--ease-quint,ease), box-shadow 380ms ease;
}
.sxr-glasscard:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 54px -22px rgba(0,0,0,0.88), 0 0 34px -8px rgba(236,199,119,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Icons: no box / no border — clean gold mark with a soft glow. */
.sxr-glass-icon {
  flex: 0 0 auto; width: clamp(30px,2.5vw,40px); height: clamp(30px,2.5vw,40px);
  background: none !important; border: 0 !important; border-radius: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-champagne);
  filter: drop-shadow(0 3px 10px rgba(236,199,119,0.35));
}
.sxr-glass-icon svg { width: 100% !important; height: 100% !important; stroke: url(#ix-grad-auth); }

/* ===== v17: normal-caps tabs (so the eXponential logotype renders),
   smaller benefit cards, authority-gradient card titles ===== */
.sxr-rail-label { text-transform: none !important; letter-spacing: 0.02em !important; }

/* Resize benefit cards so all five clear the bottom comfortably. */
.sxr-glasscard { padding: clamp(12px,1.2vw,18px) clamp(15px,1.5vw,22px) !important; gap: clamp(11px,1.1vw,16px) !important; border-radius: 14px; }
.sxr-dt-right { gap: clamp(6px,0.9vh,11px) !important; }
.sxr-glass-icon { width: clamp(24px,2vw,32px) !important; height: clamp(24px,2vw,32px) !important; }
.sxr-glasscard h4 {
  font-size: clamp(13px,1.1vw,17px) !important; margin: 0 0 3px !important;
  background: var(--grad-authority); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
.sxr-glasscard p { font-size: clamp(12px,0.92vw,14px) !important; line-height: 1.42 !important; }

/* ===== v18: AI² formula not clipped (roomier line-height + contained
   superscript) + wider AI² paragraph ===== */
.sxr-ai2-formula {
  font-size: clamp(64px, 9.5vw, 168px) !important;
  line-height: 1.28 !important;
  margin: 0 0 clamp(8px,1.6vh,20px) !important;
  padding-top: 0.05em;
  overflow: visible;
}
.sxr-ai2-formula sup { font-size: 0.46em; vertical-align: 0.42em; }
.sxr-panel[data-ch="2"] .sxr-body { max-width: 80ch !important; }

/* ===== v19: brighter chapter backgrounds + eXponential Network card grid ===== */
/* Backgrounds less dark: raise image/video opacity + lighten the flat scrim. */
.sxr-panel-bg { opacity: 0.5 !important; }
.sxr-panel[data-ch="5"] .sxr-panel-bg { opacity: 0.64 !important; }
.sxr-panel-bg--video { width: 100% !important; height: 100% !important; object-fit: cover; }
.sxr-panel-scrim {
  background:
    linear-gradient(0deg, rgba(4,6,15,0.40), rgba(4,6,15,0.40)),
    linear-gradient(90deg, rgba(4,6,15,0.90) 0%, rgba(4,6,15,0.50) 42%, rgba(4,6,15,0.12) 78%, rgba(4,6,15,0) 100%) !important;
}
.sxr-panel-scrim--center {
  background:
    linear-gradient(0deg, rgba(4,6,15,0.44), rgba(4,6,15,0.44)),
    radial-gradient(72% 62% at 50% 45%, rgba(4,6,15,0) 28%, rgba(4,6,15,0.55) 100%) !important;
}
/* ch1 background slightly brighter scrim too (it had its own). */
.sxr-panel[data-ch="5"] .sxr-panel-scrim {
  background:
    linear-gradient(0deg, rgba(4,6,15,0.30), rgba(4,6,15,0.30)),
    linear-gradient(90deg, rgba(4,6,15,0.90) 0%, rgba(4,6,15,0.55) 42%, rgba(4,6,15,0.16) 78%, rgba(4,6,15,0) 100%) !important;
}
/* ch4 (Data-Driven Design) has its own photo scrim already; halve the
   generic left-side darkening so the datadrivenbg.jpg wave reads clearly. */
.sxr-panel[data-ch="4"] .sxr-panel-scrim {
  background:
    linear-gradient(0deg, rgba(4,6,15,0.20), rgba(4,6,15,0.20)),
    linear-gradient(90deg, rgba(4,6,15,0.45) 0%, rgba(4,6,15,0.25) 42%, rgba(4,6,15,0.06) 78%, rgba(4,6,15,0) 100%) !important;
}

/* eXponential Network — 4 cards top (span 3) + 3 bottom (span 4) on a
   12-col grid so both rows are even and full-width. */
.sxr-cards--net { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: clamp(12px,1.1vw,18px); margin-top: clamp(22px,3vh,40px); width: 100%; max-width: 1280px; }
.sxr-cards--net .sxr-netcard:nth-child(-n+4) { grid-column: span 3; }
.sxr-cards--net .sxr-netcard:nth-child(n+5) { grid-column: span 4; }
.sxr-netcard {
  display: flex; flex-direction: column; gap: clamp(9px,1vh,14px);
  padding: clamp(16px,1.5vw,24px); border-radius: 16px;
  background:
    radial-gradient(90% 80% at 85% 10%, rgba(236,199,119,0.15) 0%, rgba(236,199,119,0.03) 40%, rgba(0,0,0,0) 68%) padding-box,
    linear-gradient(160deg, #15151f 0%, #0a0a11 100%) padding-box,
    linear-gradient(125deg, rgba(255,216,162,0.10) 0%, rgba(255,216,162,0.50) 50%, rgba(255,216,162,0.10) 100%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 16px 38px -22px rgba(0,0,0,0.8);
  transition: transform 380ms var(--ease-quint,ease), box-shadow 380ms ease;
}
.sxr-netcard:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -22px rgba(0,0,0,0.86), 0 0 30px -10px rgba(236,199,119,0.2); }
.sxr-netcard-icon { flex: 0 0 auto; width: clamp(30px,2.4vw,38px); height: clamp(30px,2.4vw,38px); display: inline-flex; align-items: center; color: var(--color-champagne); filter: drop-shadow(0 3px 10px rgba(236,199,119,0.35)); }
.sxr-netcard-icon svg { width: 100%; height: 100%; stroke: url(#ix-grad-auth); }
.sxr-netcard h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px,1.3vw,20px); margin: 0; letter-spacing: -0.01em; background: var(--grad-authority); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sxr-netcard p { font-family: var(--font-body); font-weight: 300; font-size: clamp(12px,0.95vw,14.5px); line-height: 1.46; color: rgba(254,247,223,0.74); margin: 0; }

@media (max-width: 900px) {
  .sxr-cards--net { grid-template-columns: 1fr !important; }
  .sxr-cards--net .sxr-netcard:nth-child(-n+4),
  .sxr-cards--net .sxr-netcard:nth-child(n+5) { grid-column: auto; }
}

/* ===== v20: end-chapter timing so each reaches FULL opacity ===== */
.sxr { height: 1300vh; }
.sxr-sub[data-sub="b"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.37)/0.04),1), clamp(0,calc((0.72 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="5"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.08)/0.03),1), clamp(0,calc((0.74 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="2"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.74)/0.03),1), clamp(0,calc((0.84 - var(--scene-prog))/0.03),1)); }
.sxr-panel[data-ch="3"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.85)/0.03),1), clamp(0,calc((0.95 - var(--scene-prog))/0.03),1)); }
.sxr-panel[data-ch="4"] { opacity: clamp(0,calc((var(--scene-prog) - 0.93)/0.03),1); }

/* ===== v21: center the eXponential Network chapter (title + grid),
   title on one line ===== */
.sxr-panel[data-ch="3"] { align-items: center; text-align: center; }
.sxr-panel[data-ch="3"] .sxr-title { white-space: nowrap; max-width: none; font-size: clamp(26px,3.8vw,58px); }
.sxr-cards--net { margin-left: auto !important; margin-right: auto !important; }
/* keep each card's internal content left-aligned for readability */
.sxr-netcard { align-items: flex-start; text-align: left; }

/* ===== v23: center CXO chapter + bigger 3-card grid (netcard style) ===== */
.sxr-panel[data-ch="4"] { align-items: center; text-align: center; }
.sxr-cards--cxo {
  display: grid !important; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px,1.6vw,28px); margin: clamp(24px,3.4vh,44px) auto 0 !important;
  width: 100%; max-width: 1200px;
}
.sxr-cards--cxo .sxr-netcard { padding: clamp(24px,2.4vw,40px) !important; gap: clamp(14px,1.5vh,22px) !important; border-radius: 18px; }
.sxr-cards--cxo .sxr-netcard-icon { width: clamp(40px,3.2vw,52px) !important; height: clamp(40px,3.2vw,52px) !important; }
.sxr-cards--cxo .sxr-netcard h4 { font-size: clamp(18px,1.6vw,25px) !important; }
.sxr-cards--cxo .sxr-netcard p { font-size: clamp(13px,1.05vw,16.5px) !important; line-height: 1.5; }
@media (max-width: 900px) { .sxr-cards--cxo { grid-template-columns: 1fr; } }

/* ===== v24: real deliverable assets in the menu cards ===== */
.sxr-menucard-media--img {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.sxr-menucard-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; display: block; border-radius: inherit;
}
/* tone the gold glow way down so the photos/video read clearly */
.sxr-menucard-media--img::before,
.sxr-menucard-media--vid::before {
  background: radial-gradient(85% 75% at 30% 22%, rgba(236,199,119,0.10), transparent 60%) !important;
}

/* ===== v26: light/thin body paragraphs → regular (400). Headings keep
   their original weights. ===== */
.sxr-narr p, .sxr-body, .sxr-menu-intro, .sxr-menu-foot,
.sxr-menucard-list li, .sxr-netcard p, .sxr-glasscard p { font-weight: 400 !important; }

/* ===== v27: Dream Team narrative spacing — kill inherited <p> margins so the
   grid gap alone sets the space between the two paragraphs (was doubling). ===== */
.sxr-narr p { margin: 0 !important; }
.sxr-narr { gap: clamp(12px,1.6vh,18px) !important; }

/* ===== v28: inline eXponential Network logotype in the Dream Team narrative
   sized to match body copy (drop the 1.25em logotype bump); plus a decent
   margin under the "Your Dream Team" title. ===== */
.sxr-narr .sxr-xnet-inline { font-size: 1em; }
.sxr-dt-left .sxr-title { margin-bottom: clamp(28px,4vh,48px) !important; }

/* ===== v29: fade out the menu title + intro as the last card sweeps off
   (~0.58→0.62), so only "The menu expands…" (foot, fades in at 0.62) is left
   on screen once the cards are gone. Fade-IN is still handled by the sub-b
   parent opacity. ===== */
.sxr-menu-title, .sxr-menu-intro { opacity: clamp(0, calc((0.965 - var(--scene-prog)) / 0.015), 1); }

/* ===== v30: make the Dream Team (ch1) background more visible — raise the
   image opacity and lighten the scrim; keep a soft left wash for text. ===== */
.sxr-panel[data-ch="5"] .sxr-panel-bg { opacity: 1 !important; }
.sxr-panel[data-ch="5"] .sxr-panel-scrim {
  background:
    linear-gradient(90deg, rgba(4,6,15,0.72) 0%, rgba(4,6,15,0.28) 42%, rgba(4,6,15,0.04) 72%, rgba(4,6,15,0) 100%) !important;
}

/* ===== v31: soft, subtle champagne spotlight on the left of the Dream Team
   (ch1) panel. Glow layer sits on top of the existing left text-wash. ===== */
.sxr-panel[data-ch="5"] .sxr-panel-scrim {
  background:
    radial-gradient(58% 68% at 22% 46%, rgba(236,199,119,0.11) 0%, rgba(236,199,119,0.045) 34%, rgba(4,6,15,0) 68%),
    linear-gradient(90deg, rgba(4,6,15,0.72) 0%, rgba(4,6,15,0.28) 42%, rgba(4,6,15,0.04) 72%, rgba(4,6,15,0) 100%) !important;
}

/* ===== v32: "Your Dream Team, On Flexible Terms" — full authority gradient
   with the soft-sweep animation (same as the "What You Get" intro). ===== */
.sxr-dt-left .sxr-title, .sxr-dt-left .sxr-title em {
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%) !important;
  background-size: 300% 100% !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: sxr-soft-sweep 16s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) { .sxr-dt-left .sxr-title, .sxr-dt-left .sxr-title em { animation: none; } }

/* ===== v33: AI² logo swap — render the uploaded SVG mark at ~the same visual
   size as the text formula it replaces (its AI letters ≈ 88/104 of the box). ===== */
.sxr-ai2-logo { display: flex; justify-content: center; align-items: center; line-height: 0 !important; padding-top: 0 !important; overflow: visible; }
.sxr-ai2-img { height: clamp(54px, 8vw, 143px); width: auto; display: block; }

/* ===== v34: AI² "Orbital Halo" — two concentric rings behind the logo. Outer
   ring (conic gold) orbits slowly; inner ring breathes (scale + opacity pulse);
   the mark itself carries a soft breathing glow. Sizes are em-based off the
   formula font-size so they scale with the mark. ===== */
.sxr-ai2-logo { position: relative; margin-bottom: clamp(48px,6.5vh,96px) !important; overflow: visible; }
.sxr-ai2-img { position: relative; z-index: 2; animation: sxr-ai2-glow 4.5s ease-in-out infinite; }

/* Outer ring — conic gold, orbits clockwise. */
.sxr-ai2-logo::before {
  content: ""; position: absolute; left: 50%; top: 46%; z-index: 0;
  width: 2.45em; height: 2.45em; border-radius: 50%;
  transform: translate(-50%,-50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    rgba(236,199,119,0) 0deg, rgba(236,199,119,0.55) 70deg,
    rgba(236,199,119,0) 150deg, rgba(236,199,119,0) 210deg,
    rgba(236,199,119,0.40) 285deg, rgba(236,199,119,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  animation: sxr-ai2-orbit 26s linear infinite;
}
/* Inner ring — even gold stroke, breathes (scale + opacity). */
.sxr-ai2-logo::after {
  content: ""; position: absolute; left: 50%; top: 46%; z-index: 0;
  width: 1.82em; height: 1.82em; border-radius: 50%;
  border: 1.5px solid rgba(236,199,119,0.32);
  transform: translate(-50%,-50%) scale(1);
  animation: sxr-ai2-breathe 4.5s ease-in-out infinite;
}
@keyframes sxr-ai2-orbit {
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes sxr-ai2-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.55; }
  50%     { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
}
@keyframes sxr-ai2-glow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(236,199,119,0.16)); }
  50%     { filter: drop-shadow(0 0 26px rgba(236,199,119,0.42)); }
}
@media (prefers-reduced-motion: reduce) {
  .sxr-ai2-img { animation: none; }
  .sxr-ai2-logo::before, .sxr-ai2-logo::after { animation: none; }
}

/* ===== v35: "The eXponential Network" (ch3) title — full authority gradient
   with the soft-sweep animation. background-repeat:repeat so the sweep never
   slides off the text (see v32 fix). The .ix-xnet letters inherit the parent
   gradient (transparent fill); the X-mark SVG keeps its own gradient fill. ===== */
.sxr-panel[data-ch="3"] .sxr-title {
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%) !important;
  background-size: 300% 100% !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: sxr-soft-sweep 16s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) { .sxr-panel[data-ch="3"] .sxr-title { animation: none; } }

/* ===== v36: glass cards for ch3 (eXponential Network) + ch4 (CXO) — translucent
   dark fill + backdrop blur so the panel background/video stays faintly visible
   through the cards. Keeps the gold radial accent and gold gradient border. ===== */
.sxr-netcard {
  position: relative;
  background:
    radial-gradient(90% 80% at 85% 10%, rgba(236,199,119,0.10) 0%, rgba(236,199,119,0.02) 40%, rgba(0,0,0,0) 68%),
    linear-gradient(160deg, rgba(26,26,36,0.14) 0%, rgba(10,10,17,0.06) 100%) !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
          backdrop-filter: blur(20px) saturate(115%) !important;
  box-shadow: 0 16px 40px -22px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
/* Gold gradient border as a masked 1px ring — only paints the edge, never the
   interior, so the card stays glass (no diagonal fill bleed). */
.sxr-netcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(125deg, rgba(255,216,162,0.16) 0%, rgba(255,216,162,0.60) 50%, rgba(255,216,162,0.16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}

/* ===== v37: "Strategic Access: Fractional “CXO” Consulting" (ch4) title —
   full authority gradient + soft-sweep animation, matching ch3/Dream Team.
   background-repeat:repeat so the sweep never slides off the text. ===== */
.sxr-panel[data-ch="4"] .sxr-title, .sxr-panel[data-ch="4"] .sxr-title em {
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%) !important;
  background-size: 300% 100% !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: sxr-soft-sweep 16s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) { .sxr-panel[data-ch="4"] .sxr-title, .sxr-panel[data-ch="4"] .sxr-title em { animation: none; } }

/* ===== v38: more breathing room between card title (h4) and description (p)
   on the eXponential Network + CXO cards. h4 has margin:0 and the body is a
   plain block, so this margin is the title→description gap. ===== */
.sxr-netcard p { margin-top: clamp(12px,2vh,22px) !important; }

/* ===== v39: rail tabs are click-to-jump — hover affordance ===== */
.sxr-rail-item { cursor: pointer; }
.sxr-rail-item:hover .sxr-rail-label { color: rgba(254,247,223,0.85); }
.sxr-rail-item:hover .sxr-rail-num { color: var(--color-champagne); }
.sxr-rail-item:focus-visible { outline: 1px solid rgba(236,199,119,0.6); outline-offset: 4px; border-radius: 6px; }

/* ===== v40: Membership tier descriptions as bulleted lists (gold "+" markers,
   matching the card accent). Keeps existing colors/design — just restructures
   the copy from a paragraph into a scannable list. ===== */
.ix-insider-tier-list {
  list-style: none; margin: clamp(12px,1.6vh,18px) 0 0; padding: 0;
  display: grid; gap: clamp(8px,1.1vh,12px);
}
.ix-insider-tier-list li {
  position: relative; padding-left: 22px;
  font-family: var(--font-body); font-size: clamp(12.5px,0.95vw,15px);
  line-height: 1.45; color: var(--fg-2);
}
.ix-insider-tier-list li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  color: var(--tier-accent); font-family: var(--font-display); font-weight: 700;
}
.ix-insider-tier-list li b { color: var(--fg-1); font-weight: 600; }
/* VIP (gold-filled top card) — dark ink so list is legible. */
.ix-insider-tier--top .ix-insider-tier-list li { color: rgba(10,14,31,0.80); }
.ix-insider-tier--top .ix-insider-tier-list li::before { color: #5A3E10; }
.ix-insider-tier--top .ix-insider-tier-list li b { color: #0A0E1F; }

/* ===== v41: tiers — billing toggle removed from markup; recolor Insider to
   near-black and Partner to dark gold/bronze; price text one weight lighter. ===== */
.ix-insider-tier-price-num { font-weight: 700 !important; }

/* Insider — near-black surface, gold accents kept. */
.ix-insider-tier[data-tier="1"] {
  background: linear-gradient(180deg, #16161B 0%, #09090C 100%) !important;
  border-color: rgba(236,199,119,0.16) !important;
}

/* Partner — dark gold / bronze surface with warm gold accents. */
.ix-insider-tier[data-tier="2"] {
  --tier-accent: #E2B65C;
  --tier-accent-soft: rgba(226,182,92,0.16);
  background: linear-gradient(165deg, #3A2C12 0%, #1B1407 100%) !important;
  border-color: rgba(226,182,92,0.30) !important;
}
.ix-insider-tier[data-tier="2"] .ix-insider-tier-price-num,
.ix-insider-tier[data-tier="2"] .ix-insider-tier-price-cadence,
.ix-insider-tier[data-tier="2"] .ix-insider-tier-eyebrow { color: #E8C170 !important; }
.ix-insider-tier[data-tier="2"] .ix-insider-tier-fx { color: #E8C170 !important; }

/* ===== v42: centered "Apply for the eXponential Network" CTA below the
   referral copy. ===== */
.ix-insider-referral-cta {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  margin-top: clamp(32px,4.5vh,60px);
}
.ix-insider-referral-cta .ix-xnet { font-size: 1em; }

/* ===== v43: referral CTA — much larger, and dark X-mark (the gold-gradient
   X was invisible on the gold button fill). ===== */
.ix-insider-referral-cta .btn {
  padding: clamp(18px,2.24vh,27px) clamp(45px,4.8vw,83px) !important;
}
.ix-insider-referral-cta .ix-cta-label {
  font-size: clamp(14px,1.2vw,21px) !important;
  letter-spacing: 0.1em;
}
.ix-insider-referral-cta .ix-xnet-x { fill: #1A1208 !important; }

/* ===== v44: hide the closer "Traditional Mastermind vs eXponential Network"
   section for now (remove this block to bring it back). ===== */
.ix-insider-closer { display: none !important; }

/* ===== v45: include the referral CTA in the reveal sequence — it rises in
   AFTER the box (copy 1400ms → box 2300ms → button 3200ms). ===== */
.ix-insider-referral-cta {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1000ms cubic-bezier(0.22,1,0.36,1) 3200ms,
    transform 1000ms cubic-bezier(0.22,1,0.36,1) 3200ms;
}
.ix-insider-referral.is-in .ix-insider-referral-cta {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ix-insider-referral-cta { opacity: 1; transform: none; transition: none; }
}

/* ===== v46: Membership Tiers background — radial like the reference snippet
   (black center → vivid edge), recolored from purple #63e to our warm gold. ===== */
.sxg-tiers-section {
  background: radial-gradient(125% 125% at 50% 10%, #050509 40%, #7d5c16 100%) !important;
}

/* ===== v47: compound paragraph — bigger bottom-to-up rise on reveal; plus a
   big "Exponential R.O.I. (Return On Influex)" line in the authority gradient. ===== */
.ix-insider-quote-followup {
  transform: translate3d(0, calc((1 - clamp(0, (var(--quote-prog) - 0.7) * 5, 1)) * 56px), 0) !important;
}
.ix-roi-line {
  margin-top: clamp(22px,3.2vh,40px) !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px,4.4vw,60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 30%, #F3D9C7 55%, #E6B8D9 80%, #ECC777 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
.ix-roi-sub { font-size: 0.5em; font-weight: 700; letter-spacing: 0; }

/* ===== v48: "15 Years in the Making" copy block + zoom-parallax montage ===== */
.ix-years { position: relative; background: #05060B; padding: clamp(80px,12vh,150px) 0 0; }

/* Copy: big title left, body right. */
.ix-years-copy {
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px,5vw,64px);
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px,5vw,90px);
  align-items: start;
}
.ix-years-title {
  margin: 0; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.96;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(38px,5.6vw,88px);
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 30%, #F3D9C7 55%, #E6B8D9 80%, #ECC777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.ix-years-body { display: grid; gap: clamp(18px,2.6vh,30px); }
.ix-years-body p {
  margin: 0; max-width: 62ch; font-family: var(--font-body);
  font-size: clamp(15px,1.15vw,18.5px); line-height: 1.72; color: rgba(254,247,223,0.72);
}
.ix-years-body .ix-xnet { font-size: 1em; }
.ix-years-closer {
  max-width: 880px; margin: clamp(44px,6.5vh,88px) auto 0; padding: 0 clamp(24px,5vw,64px);
  text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px,2vw,30px); line-height: 1.4; color: var(--color-ivory);
}
.ix-years-closer .ix-xnet { font-size: 1em; }
.ix-years-closer em {
  font-style: normal;
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 40%, #E6B8D9 80%, #ECC777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* Zoom parallax — 300vh runway, sticky 100vh stage, tiles scale from center. */
.ix-zoom { position: relative; height: 300vh; margin-top: clamp(70px,11vh,130px); }
.ix-zoom-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #05060B; }
.ix-zoom-item {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transform: scale(calc(1 + var(--zoom-prog,0) * (var(--smax,4) - 1)));
  will-change: transform;
}
.ix-zoom-frame {
  position: relative; height: 25vh; width: 25vw; overflow: hidden; border-radius: 8px;
  background: linear-gradient(150deg, #1a1c28 0%, #0a0b13 100%);
  box-shadow: inset 0 0 0 1px rgba(236,199,119,0.14), inset 0 0 60px rgba(0,0,0,0.5);
}
/* Per-tile max scale + position offsets (match the reference component). */
.ix-zoom-item[data-i="0"] { --smax: 4; }
.ix-zoom-item[data-i="1"] { --smax: 5; }
.ix-zoom-item[data-i="1"] .ix-zoom-frame { top: -30vh; left: 5vw; height: 30vh; width: 35vw; }
.ix-zoom-item[data-i="2"] { --smax: 6; }
.ix-zoom-item[data-i="2"] .ix-zoom-frame { top: -10vh; left: -25vw; height: 45vh; width: 20vw; }
.ix-zoom-item[data-i="3"] { --smax: 5; }
.ix-zoom-item[data-i="3"] .ix-zoom-frame { left: 27.5vw; height: 25vh; width: 25vw; }
.ix-zoom-item[data-i="4"] { --smax: 6; }
.ix-zoom-item[data-i="4"] .ix-zoom-frame { top: 27.5vh; left: 5vw; height: 25vh; width: 20vw; }
.ix-zoom-item[data-i="5"] { --smax: 8; }
.ix-zoom-item[data-i="5"] .ix-zoom-frame { top: 27.5vh; left: -22.5vw; height: 25vh; width: 30vw; }
.ix-zoom-item[data-i="6"] { --smax: 9; }
.ix-zoom-item[data-i="6"] .ix-zoom-frame { top: 22.5vh; left: 25vw; height: 15vh; width: 15vw; }
/* Placeholder tone variety so the montage reads while images are pending. */
.ix-zoom-item[data-i="1"] .ix-zoom-frame { background: linear-gradient(150deg, #241a0d 0%, #0d0a05 100%); }
.ix-zoom-item[data-i="2"] .ix-zoom-frame { background: linear-gradient(150deg, #12131d 0%, #07080e 100%); }
.ix-zoom-item[data-i="3"] .ix-zoom-frame { background: linear-gradient(150deg, #2a2012 0%, #100c06 100%); }
.ix-zoom-item[data-i="4"] .ix-zoom-frame { background: linear-gradient(150deg, #1d1b24 0%, #0a090f 100%); }
.ix-zoom-item[data-i="5"] .ix-zoom-frame { background: linear-gradient(150deg, #201709 0%, #0c0904 100%); }
.ix-zoom-item[data-i="6"] .ix-zoom-frame { background: linear-gradient(150deg, #15161f 0%, #08090e 100%); }

@media (max-width: 760px) {
  .ix-years-copy { grid-template-columns: 1fr; gap: clamp(20px,4vh,32px); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-zoom { height: 100vh; }
  .ix-zoom-item { transform: none !important; }
}

/* ===== v49: "15 Years in the Making" — wider container so the title sits on
   2 lines; show only the first body paragraph for now (rest kept in markup,
   hidden, for later use). ===== */
.ix-years-copy {
  max-width: 1440px !important;
  grid-template-columns: max-content minmax(0,1fr) !important;
}
.ix-years-title { white-space: nowrap; }
.ix-years-body p:not(:first-child) { display: none; }
.ix-years-closer { display: none; }

/* ===== v50: "15 Years in the Making" title — one weight lighter (800 → 700). ===== */
.ix-years-title { font-weight: 700 !important; }

/* ===== v51: zoom parallax — real Maverick NEXT photos in the 6 outer tiles;
   center X-mark expands to fill, then the remaining copy reveals over it. ===== */
.ix-zoom-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Center tile sits above the photos so its dark fill backs the copy at full
   expansion. */
.ix-zoom-item--center { z-index: 2; }
.ix-zoom-frame--x {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 35%, #15110a 0%, #060509 70%) !important;
}
.ix-zoom-xmark {
  width: 44%; height: 44%; fill: url(#ix-grad-auth);
  filter: drop-shadow(0 8px 40px rgba(236,199,119,0.25));
  /* fade to a faint watermark as the copy reveals */
  opacity: calc(1 - clamp(0, (var(--zoom-prog,0) - 0.78) / 0.16, 1) * 0.82);
}

/* Copy revealed over the expanded X (fades up at the end of the runway). */
.ix-zoom-reveal {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(16px,2.4vh,28px);
  max-width: 880px; margin: 0 auto; padding: 0 clamp(28px,5vw,64px);
  text-align: center; pointer-events: none;
  opacity: clamp(0, (var(--zoom-prog,0) - 0.82) / 0.13, 1);
  transform: translateY(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.82) / 0.13, 1)) * 24px));
}
.ix-zoom-reveal p {
  margin: 0; font-family: var(--font-body);
  font-size: clamp(15px,1.35vw,21px); line-height: 1.62; color: rgba(254,247,223,0.86);
}
.ix-zoom-reveal .ix-xnet { font-size: 1em; }
.ix-zoom-reveal-closer { color: var(--color-ivory) !important; font-weight: 500; }
.ix-zoom-reveal-closer em {
  font-style: normal;
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 40%, #E6B8D9 80%, #ECC777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .ix-zoom-reveal { position: static; opacity: 1; transform: none; margin-top: 40px; }
  .ix-zoom-xmark { opacity: 1; }
}

/* ===== v52: zoom finale rebuild — fix pixelation, complete zoom by mid-runway,
   then PIN and rotate the X (3D) from center to the left while the copy fades
   in on the right. ===== */

/* Fix pixelation: drop-shadow filter rasterized the SVG before the 4× scale. */
.ix-zoom-xmark { filter: none !important; }

/* Longer runway so the finale (rotate + copy) has room after the zoom. */
.ix-zoom { height: 420vh !important; }

/* Phase 1 (zoom) completes by --zoom-prog 0.5, then tiles fade out. */
.ix-zoom-item {
  transform: scale(calc(1 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * (var(--smax,4) - 1))) !important;
  opacity: clamp(0, 1 - (var(--zoom-prog,0) - 0.45) / 0.1, 1);
}

/* Phase 2 — final pinned composition: X left, copy right. */
.ix-zoom-final {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center;
  gap: clamp(28px,4vw,72px); padding: 0 clamp(40px,9vw,150px);
  perspective: 1500px;
  opacity: clamp(0, (var(--zoom-prog,0) - 0.48) / 0.1, 1);
}
/* Left — the X, spins in from center to the left in 3D. */
.ix-zoom-final-x { position: relative; display: flex; align-items: center; justify-content: center; }
.ix-zoom-final-x::before {
  content: ""; position: absolute; width: 78%; padding-bottom: 78%; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,199,119,0.16) 0%, rgba(236,199,119,0) 68%); filter: blur(4px);
}
.ix-zoom-final-x svg {
  position: relative; width: clamp(150px, 26vh, 360px); height: auto; fill: url(#ix-grad-auth);
  transform-origin: center;
  transform:
    translateX(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.52) / 0.22, 1)) * 30vw))
    rotateY(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.52) / 0.22, 1)) * -135deg));
}
/* Right — copy fades up after the X settles. */
.ix-zoom-final-copy {
  display: flex; flex-direction: column; gap: clamp(16px,2.2vh,26px); max-width: 60ch;
  opacity: clamp(0, (var(--zoom-prog,0) - 0.72) / 0.16, 1);
  transform: translateY(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.72) / 0.16, 1)) * 22px));
}
.ix-zoom-final-copy p {
  margin: 0; font-family: var(--font-body); font-size: clamp(15px,1.2vw,18.5px);
  line-height: 1.62; color: rgba(254,247,223,0.82);
}
.ix-zoom-final-copy .ix-xnet { font-size: 1em; }
/* First paragraph reads as the section title — bigger, display face. */
.ix-zoom-final-lead {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  font-size: clamp(21px,2.1vw,33px) !important; line-height: 1.3 !important;
  color: var(--color-ivory) !important;
}
/* Closer — bolder, two sentences on their own lines (via <br>). */
.ix-zoom-reveal-closer { color: var(--color-ivory) !important; font-weight: 700 !important; }
.ix-zoom-reveal-closer em {
  font-style: normal;
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 40%, #E6B8D9 80%, #ECC777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

@media (max-width: 860px) {
  .ix-zoom-final { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .ix-zoom-final-copy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-zoom-item { opacity: 1; }
  .ix-zoom-final { opacity: 1; }
  .ix-zoom-final-x svg { transform: none; }
  .ix-zoom-final-copy { opacity: 1; transform: none; }
}

/* ===== v53: single X mark — no duplicate. The one X grows at center during
   the zoom, then spins (3D) to the left; only the copy fades in late. ===== */
.ix-zoom-final { opacity: 1 !important; }   /* X visible throughout; copy has its own fade */
.ix-zoom-final-x::before { display: none; } /* drop the offset glow */
.ix-zoom-final-x svg {
  transform-origin: center;
  transform:
    translateX(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.5) / 0.24, 1)) * 28vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.5) / 0.24, 1) * 360deg))
    scale(calc(0.25 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 0.75));
}
@media (prefers-reduced-motion: reduce) {
  .ix-zoom-final-x svg { transform: none; }
}

/* ===== v54: single X expands to a CONTAINED full-screen size first, THEN spins
   (3D) from center to the left; a dark veil fades in behind it for a clean
   stage; copy fades in on the right. Overrides v53's small-scale. ===== */
.ix-zoom-final-x svg { width: clamp(170px, 32vh, 400px); }
.ix-zoom-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #05060B;
  opacity: clamp(0, (var(--zoom-prog,0) - 0.3) / 0.18, 1);
}
.ix-zoom-final-x svg {
  transform-origin: center;
  transform:
    translateX(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.5) / 0.25, 1)) * 26vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.5) / 0.25, 1) * -360deg))
    scale(calc(0.4 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 2.2 - clamp(0, (var(--zoom-prog,0) - 0.5) / 0.25, 1) * 1.6));
}
@media (prefers-reduced-motion: reduce) {
  .ix-zoom-final-x svg { transform: none; }
  .ix-zoom-final::before { opacity: 1; }
}

/* ===== v55: wrap the animating X in a bordered card (matches the photo tiles —
   subtle dark bg + gold border) so it reads as an image. The CARD now carries
   the expand + spin transform; the X just sits centered inside it. ===== */
.ix-zoom-final-card {
  display: flex; align-items: center; justify-content: center;
  width: clamp(300px, 30vw, 520px); height: clamp(200px, 32vh, 360px);
  border-radius: 10px;
  background: radial-gradient(120% 120% at 50% 30%, #15110a 0%, #07070d 72%);
  box-shadow:
    inset 0 0 0 1px rgba(236,199,119,0.16),
    inset 0 0 80px rgba(0,0,0,0.55),
    0 30px 80px -30px rgba(0,0,0,0.8);
  transform-origin: center;
  transform:
    translateX(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.5) / 0.25, 1)) * 26vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.5) / 0.25, 1) * -360deg))
    scale(calc(0.5 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 2.5 - clamp(0, (var(--zoom-prog,0) - 0.5) / 0.25, 1) * 2));
}
.ix-zoom-final-x svg { transform: none !important; width: 46%; height: auto; }
@media (prefers-reduced-motion: reduce) { .ix-zoom-final-card { transform: none; } }

/* ===== v56: make the contained moment bigger — the card grows to fill the
   screen and HOLDS briefly before spinning left; larger X inside. ===== */
.ix-zoom-final-x svg { width: 50% !important; }
.ix-zoom-final::before { opacity: clamp(0, (var(--zoom-prog,0) - 0.28) / 0.14, 1); }
.ix-zoom-final-card {
  transform:
    translateX(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.52) / 0.23, 1)) * 26vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.52) / 0.23, 1) * -360deg))
    scale(calc(0.5 + clamp(0, var(--zoom-prog,0) / 0.42, 1) * 3.7 - clamp(0, (var(--zoom-prog,0) - 0.52) / 0.23, 1) * 3.2));
}

/* ===== v57: restore the original sizing — card is 25vw×25vh and scales to
   exactly 4× (fills the screen) at the contained moment, like the first build,
   then shrinks + spins to the left. (Pixelation already resolved — the old
   filtered xmark element is gone.) ===== */
.ix-zoom-final-card {
  width: 25vw !important; height: 25vh !important;
  transform:
    translateX(calc((1 - clamp(0, (var(--zoom-prog,0) - 0.52) / 0.23, 1)) * 26vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.52) / 0.23, 1) * -360deg))
    scale(calc(1 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 3 - clamp(0, (var(--zoom-prog,0) - 0.52) / 0.23, 1) * 2.6));
}
.ix-zoom-final-x svg { width: 44% !important; }

/* ===== v58: box becomes the LOCKED full-screen stage (grows to full, then
   holds — does NOT rotate). Only the LOGO rotates: it starts small, grows with
   the box, then spins 3D to the left; copy fades in on the right. ===== */
.ix-zoom-final { display: block !important; padding: 0 !important; perspective: 1600px; }
.ix-zoom-final::before { display: none !important; }

/* Dark bordered stage — 25vw tile → full screen (scale 4), then holds. */
.ix-zoom-final-card {
  position: absolute; left: 50%; top: 50%; z-index: 1; margin: 0;
  width: 25vw !important; height: 25vh !important;
  transform-origin: center;
  transform: translate(-50%,-50%) scale(calc(1 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 3)) !important;
}

/* The X logo — small first, grows with the box, then spins to the left. */
.ix-zoom-final-logo {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transform-origin: center;
  transform:
    translate(-50%,-50%)
    translateX(calc(clamp(0, (var(--zoom-prog,0) - 0.55) / 0.2, 1) * -26vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.55) / 0.2, 1) * -180deg))
    scale(calc(1 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 3 - clamp(0, (var(--zoom-prog,0) - 0.55) / 0.2, 1) * 1.2));
}
.ix-zoom-final-logo svg { width: 7.5vw; height: auto; fill: url(#ix-grad-auth); transform: none !important; }

/* Copy on the right, fades in after the logo settles left. */
.ix-zoom-final-copy {
  position: absolute; top: 50%; left: 52%; right: clamp(40px,5vw,90px); z-index: 3;
  transform: translateY(-50%) !important; max-width: 60ch; text-align: left;
  opacity: clamp(0, (var(--zoom-prog,0) - 0.74) / 0.14, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ix-zoom-final-card { transform: translate(-50%,-50%) scale(4) !important; }
  .ix-zoom-final-logo { transform: translate(-50%,-50%) translateX(-26vw) scale(2.8); }
  .ix-zoom-final-copy { opacity: 1 !important; }
}

/* ===== v59: logo keeps its full-screen size while rotating (no shrink); card
   squares off at full screen; soft pulsing left/right glows; copy in a subtle
   box; only the closer's last line bold. ===== */

/* Logo: grows to 4× then HOLDS that size while it spins + moves left. */
.ix-zoom-final-logo {
  z-index: 3;
  transform:
    translate(-50%,-50%)
    translateX(calc(clamp(0, (var(--zoom-prog,0) - 0.55) / 0.2, 1) * -26vw))
    rotateY(calc(clamp(0, (var(--zoom-prog,0) - 0.55) / 0.2, 1) * -180deg))
    scale(calc(1 + clamp(0, var(--zoom-prog,0) / 0.5, 1) * 3)) !important;
}

/* Card: lose the rounded corners as it fills the screen. */
.ix-zoom-final-card {
  z-index: 1;
  border-radius: calc((1 - clamp(0, (var(--zoom-prog,0) - 0.3) / 0.2, 1)) * 10px) !important;
}

/* Soft left + right glows on the full-screen stage, gently pulsing. */
.ix-zoom-final::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(40% 56% at 9% 50%, rgba(236,199,119,0.17), transparent 70%),
    radial-gradient(40% 56% at 91% 50%, rgba(236,199,119,0.14), transparent 70%);
  opacity: clamp(0, (var(--zoom-prog,0) - 0.5) / 0.12, 1);
  animation: ix-zoom-glow 6.5s ease-in-out infinite;
}
@keyframes ix-zoom-glow { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Copy in a subtle glass box on the right. */
.ix-zoom-final-copy {
  z-index: 4;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(236,199,119,0.16);
  border-radius: 16px;
  padding: clamp(22px,2.6vw,40px) clamp(24px,2.8vw,44px) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Closer: only the last sentence bold (first sentence normal weight). */
.ix-zoom-reveal-closer { font-weight: 400 !important; }
.ix-zoom-reveal-closer strong { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ix-zoom-final-logo { transform: translate(-50%,-50%) translateX(-26vw) rotateY(-180deg) scale(4) !important; }
  .ix-zoom-final::after { animation: none; opacity: 1; }
}

/* ===== v60: "light crossing the bridge" — a bright shimmer sweeps diagonally
   along the X strokes (a second X filled with a moving gradient, screen-blended
   over the gold base). ===== */
.ix-zoom-final-logo .ix-x-shine { fill: url(#ix-xshine); mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .ix-zoom-final-logo .ix-x-shine { display: none; } }

/* ===== v61: wider copy box on the right; closer is now its own line (bold). ===== */
.ix-zoom-final-copy { left: 44% !important; right: clamp(28px,3vw,56px) !important; }
.ix-zoom-reveal-closer { font-weight: 700 !important; }

/* ===== v63: wider copy box for a more balanced (centered) composition. ===== */
.ix-zoom-final-copy { left: 40% !important; right: clamp(20px,2vw,40px) !important; }

/* ===== v64: the box had a 60ch max-width cap that left empty space on the
   right (looked left-heavy). Raise the cap + extend so it fills the right
   region for a balanced composition. ===== */
.ix-zoom-final-copy {
  max-width: none !important;
  left: 41% !important;
  right: clamp(40px,4.5vw,96px) !important;
}

/* ===== v65: box was too wide — cut ~30% (≈545px) and center it within the
   right region so the composition stays balanced. ===== */
.ix-zoom-final-copy {
  max-width: 545px !important;
  margin-left: auto !important; margin-right: auto !important;
}

/* ===== v66: widen the box 15% (545 → ~627px). ===== */
.ix-zoom-final-copy { max-width: 627px !important; }

/* ===== v67: widen the box 10% more (627 → ~690px). ===== */
.ix-zoom-final-copy { max-width: 690px !important; }

/* ===== v68: "The most adaptable brands win." — curved 3D photo arc. ===== */
.ix-arc {
  position: relative; background: #06060B; overflow: hidden; text-align: center;
  padding: clamp(70px,10vh,120px) 0 clamp(64px,9vh,110px);
}
.ix-arc-title {
  margin: 0 auto clamp(36px,5.5vh,72px); max-width: 20ch;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(32px,4.8vw,68px); line-height: 1.08; color: var(--color-ivory);
}
.ix-arc-stage { perspective: 1150px; width: 100%; margin: 0 0 clamp(40px,6vh,76px); }
.ix-arc-track {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(6px,0.7vw,12px); transform-style: preserve-3d; padding: 48px 0;
}
.ix-arc-card {
  flex: 0 0 auto;
  width: clamp(108px,9.5vw,158px); height: clamp(228px,23vw,352px);
  border-radius: 14px; overflow: hidden; backface-visibility: hidden;
  box-shadow: 0 34px 64px -30px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.ix-arc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-arc-copy {
  max-width: 60ch; margin: 0 auto; padding: 0 clamp(24px,5vw,48px);
  font-family: var(--font-body); font-size: clamp(15px,1.2vw,19px);
  line-height: 1.7; color: rgba(254,247,223,0.72);
}
@media (max-width: 760px) { .ix-arc-card { width: clamp(80px,18vw,120px); height: clamp(170px,40vw,260px); } }

/* ===== v69: make the "adaptable brands" arc a full light/white section
   (dark text), matching the reference. ===== */
.ix-arc { background: #F8F3EA !important; }
.ix-arc-title { color: #0A0E1F !important; }
.ix-arc-copy { color: rgba(10,14,31,0.66) !important; }
.ix-arc-card { box-shadow: 0 30px 60px -28px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.04) !important; }

/* ===== v70: arc becomes a PINNED scroll-driven conveyor (overrides v68 layout).
   Section is tall; the pin stays put while the strip pans through. ===== */
.ix-arc { height: 250vh !important; padding: 0 !important; }
.ix-arc-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: #F8F3EA;
}
.ix-arc-title { margin: 0 0 clamp(18px,2.6vh,38px) !important; }
.ix-arc-stage { perspective: 1250px; width: 100%; flex: 0 0 auto; }
.ix-arc-track {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
  gap: clamp(8px,0.8vw,14px); transform-style: preserve-3d; padding: 56px 0; margin: 0;
  will-change: transform;
}
.ix-arc-card {
  flex: 0 0 auto; transform-origin: center; will-change: transform;
  width: clamp(120px,10vw,165px); height: clamp(240px,24vw,360px);
}
.ix-arc-copy { margin: clamp(18px,2.6vh,40px) auto 0 !important; }

/* ===== v71: arc is auto-playing now — revert from pinned/tall back to a
   normal-height section. ===== */
.ix-arc { height: auto !important; overflow: hidden;
  padding: clamp(70px,10vh,120px) 0 clamp(64px,9vh,110px) !important; }
.ix-arc-pin { position: static !important; height: auto !important; overflow: visible;
  background: transparent !important; }

/* ===== v72: arc curve tuned to match the reference; portrait client-screenshot
   cards (384:685). ===== */
.ix-arc-stage { perspective: 1000px !important; }
.ix-arc-track { gap: 10px !important; padding: 80px 0 !important; }
.ix-arc-card {
  width: clamp(100px, 10.4vw, 150px) !important;
  height: auto !important; aspect-ratio: 384 / 685;
  border-radius: 14px;
}

/* ===== v73: WebGL curved slider (Three.js) container. ===== */
.ix-arc-slider { position: relative; width: 100%; height: var(--min-height, 560px); margin: clamp(20px,3vh,46px) 0; }
.ix-arc-slider canvas { position: absolute; top: 0; left: 0; display: block; }
.ix-arc-srcs { display: none !important; }

/* ===== v74: re-center the arc title (an earlier pinned-layout rule set
   margin:0 which left-anchored it). ===== */
.ix-arc-title { margin-left: auto !important; margin-right: auto !important; text-align: center; }

/* ===== v75: intro line under the arc title (dark, centered). ===== */
.ix-arc-intro {
  max-width: 62ch; margin: 0 auto; padding: 0 clamp(24px,5vw,48px);
  text-align: center; font-family: var(--font-body);
  font-size: clamp(15px,1.2vw,19px); line-height: 1.7; color: rgba(10,14,31,0.66);
}

/* ===== v76: arc section — pure white; title 1 line; intro 2 lines; dark bottom
   copy (global p color was overriding the div); tighter vertical spacing. ===== */
.ix-arc, .ix-arc-pin { background: #ffffff !important; }
.ix-arc { padding: clamp(56px,7vh,90px) 0 clamp(48px,6vh,80px) !important; }
.ix-arc-title { white-space: nowrap; max-width: none !important; margin-bottom: clamp(14px,2vh,26px) !important; }
.ix-arc-intro { max-width: 880px !important; }
.ix-arc-slider { margin: clamp(6px,1.4vh,18px) 0 0 !important; }
.ix-arc-copy { margin-top: clamp(8px,1.6vh,22px) !important; }
.ix-arc-copy p { color: rgba(10,14,31,0.66) !important; }   /* beat the global p:ivory rule */

/* ===== v77: arc as a backdrop — carousel fills the stage; the two paragraphs
   overlay its open center (top + bottom); soft white fades on the sides; more
   top padding. ===== */
.ix-arc { padding: clamp(96px,13vh,180px) 0 clamp(70px,9vh,120px) !important; }
.ix-arc-title { margin-bottom: 0 !important; }

.ix-arc-stage-wrap { position: relative; width: 100%; margin-top: clamp(-6px,-1vh,-18px); }
.ix-arc-slider { margin: 0 !important; }

/* Side white fades so cards don't end on a hard vertical cut. */
.ix-arc-fade { position: absolute; top: 0; bottom: 0; width: clamp(120px,13vw,300px); z-index: 2; pointer-events: none; }
.ix-arc-fade--l { left: 0;  background: linear-gradient(90deg, #fff 8%, rgba(255,255,255,0) 100%); }
.ix-arc-fade--r { right: 0; background: linear-gradient(270deg, #fff 8%, rgba(255,255,255,0) 100%); }

/* Paragraphs overlaid in the carousel's open center. */
.ix-arc-intro, .ix-arc-copy {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  width: min(880px, 86vw); margin: 0 !important; text-align: center; pointer-events: none;
}
.ix-arc-intro { top: clamp(10px,3%,40px); }
.ix-arc-copy  { bottom: clamp(10px,3%,40px); width: min(820px, 86vw); }
.ix-arc-copy p { margin: 0; }

/* ===== v78: title/intro/copy back in normal flow (responsive) but pulled close
   to the curve via negative margins; copy = 3 lines w/ bold final sentence;
   grab cursor for drag. Overrides v77's absolute overlay. ===== */
.ix-arc-intro {
  position: relative !important; z-index: 3; pointer-events: none;
  left: auto !important; right: auto !important; top: auto !important; transform: none !important;
  margin: clamp(8px,1.5vh,18px) auto 0 !important; width: auto !important; max-width: 880px !important;
  text-align: center;
}
.ix-arc-stage-wrap { margin-top: clamp(-150px,-16vh,-90px) !important; z-index: 1; }
.ix-arc-copy {
  position: relative !important; z-index: 3; pointer-events: none;
  left: auto !important; right: auto !important; bottom: auto !important; transform: none !important;
  margin: clamp(-150px,-16vh,-90px) auto 0 !important; width: auto !important; max-width: 840px !important;
  text-align: center;
}
.ix-arc-copy strong { font-weight: 700; color: #0A0E1F; }
.ix-arc-slider { cursor: grab; }
.ix-arc-slider.is-dragging { cursor: grabbing; }

/* ===== v79: widen bottom copy to 3 lines. ===== */
.ix-arc-copy { max-width: 1000px !important; }

/* ===== v80: kill the black band between the white arc section and the next
   dark section (.ix-insider-what's top margin was a hero→section beat; the
   white arc now precedes it). Cancel it exactly. ===== */
.ix-arc { margin-bottom: calc(-1 * clamp(48px, 10vh, 120px)) !important; }

/* ===== v81: arc bottom white space; quote section paragraph centered;
   ROI line smaller / 1 line / uniform size+weight / less bold. ===== */
.ix-arc { padding-bottom: clamp(92px, 10vh, 120px) !important; }

.ix-insider-quote-followup { text-align: center !important; }
.ix-roi-line {
  font-size: clamp(18px, 2.2vw, 34px) !important;
  font-weight: 600 !important;
  white-space: nowrap; line-height: 1.25 !important;
  /* Pure white instead of the gold gradient — kill the background-clip
     text fill and force solid white over the base rule's transparent. */
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.ix-roi-sub { font-size: 1em !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* ===== v82: widen the compound paragraph so it wraps to ~4 lines. ===== */
.ix-insider-quote-followup { max-width: 940px !important; }

/* ===== v83: vertical responsiveness for the "What You Get" Spotlight
   Rail on short laptops. The chapter type scales off viewport WIDTH while
   the pin is a fixed 100vh, so on a wide-but-short screen (e.g. 1600×860)
   content gets oversized vertically. The top clearance (22vh) is LOAD-
   BEARING — it keeps every chapter title below the fixed tab bar — so we
   leave padding alone and shrink the CONTENT (titles, body, cards) instead. */
@media (max-height: 900px) {
  /* Dream Team narrative + glass cards (sub-a) */
  .sxr-dt-left .sxr-title { font-size: clamp(30px, 3.6vw, 50px) !important; margin-bottom: clamp(12px, 1.8vh, 22px) !important; }
  .sxr-narr { gap: clamp(10px, 1.5vh, 16px) !important; }
  .sxr-narr p { font-size: clamp(13px, 1.12vw, 17px) !important; line-height: 1.5 !important; }
  .sxr-dt-right { gap: clamp(7px, 1vh, 12px); }
  .sxr-glasscard { padding: clamp(10px, 1.15vw, 15px) clamp(14px, 1.4vw, 20px) !important; }
  .sxr-glasscard h4 { font-size: clamp(14px, 1.2vw, 18px) !important; }
  .sxr-glasscard p { font-size: clamp(12px, 0.95vw, 14.5px) !important; line-height: 1.4 !important; }
  /* Other chapters — trim the big titles / AI² formula / cards so they
     fit under the fixed top clearance on short screens. */
  .sxr-title { font-size: clamp(28px, 3.6vw, 52px); }
  .sxr-body { font-size: clamp(15px, 1.35vw, 20px); margin-top: clamp(16px, 2.4vh, 26px); }
  .sxr-ai2-formula { font-size: clamp(70px, 10vw, 150px) !important; margin-bottom: clamp(12px, 1.8vh, 22px) !important; }
  .sxr-menucard-media { min-height: clamp(180px, 24vh, 260px); }
  .sxr-menucard-title { font-size: clamp(20px, 2vw, 30px); padding-top: clamp(8px, 1.4vh, 14px); }
  .sxr-cards { margin-top: clamp(16px, 2.4vh, 28px); }
  .sxr-card { padding: clamp(13px, 1.4vw, 20px); }
}
/* Card bullets step down by height: large by default (tall screens +
   1600×900, where there's slack below the card), medium on ~768–845px
   laptops, smallest ≤760px — so the 11-item list never overflows. */
@media (max-height: 845px) {
  .sxr-menucard-list li { font-size: clamp(14px, 1.2vw, 18px); line-height: 1.4; }
}
@media (max-height: 760px) {
  .sxr-dt-left .sxr-title { font-size: clamp(26px, 3.2vw, 42px) !important; }
  .sxr-narr { gap: clamp(8px, 1.1vh, 13px) !important; }
  .sxr-narr p { font-size: clamp(12px, 1vw, 15px) !important; line-height: 1.44 !important; }
  .sxr-glasscard { padding: clamp(9px, 1vw, 13px) clamp(12px, 1.2vw, 17px) !important; }
  .sxr-glasscard h4 { font-size: clamp(13px, 1.1vw, 16px) !important; }
  .sxr-glasscard p { font-size: clamp(11px, 0.9vw, 13.5px) !important; line-height: 1.34 !important; }
  .sxr-title { font-size: clamp(26px, 3.1vw, 44px); }
  .sxr-body { font-size: clamp(14px, 1.25vw, 18px); }
  .sxr-ai2-formula { font-size: clamp(60px, 8.5vw, 120px) !important; }
  .sxr-menucard-media { min-height: clamp(150px, 20vh, 210px); }
  .sxr-menucard-title { font-size: clamp(18px, 1.8vw, 27px); margin-bottom: clamp(8px, 1.2vh, 12px); padding-top: clamp(2px, 0.6vh, 6px); }
  /* Menu of Services (sub-b): the longest card list (11 bullets) is the
     tall element — tighten its rows + card padding so it fits ≤760px. */
  .sxr-menucard { padding: clamp(10px, 1.2vw, 16px); gap: clamp(10px, 1.3vw, 18px); }
  .sxr-menucard-list { gap: 4px; }
  /* Bullets stay at the 18px (max-height:845) size down to ~731px —
     don't shrink them here; only the genuinely tiny tier below does. */
  .sxr-menu-intro { margin: clamp(6px, 1.2vh, 10px) auto clamp(12px, 1.8vh, 18px); }
}
/* Genuinely short viewports (≤730px): the 11-bullet card body now
   exceeds the shrunken media min-height, so bullets must drop to fit. */
@media (max-height: 730px) {
  .sxr-menucard-list { gap: 3px; }
  .sxr-menucard-list li { font-size: clamp(11px, 0.9vw, 13px); line-height: 1.3; padding-left: 15px; }
  .sxr-menucard-list li::before { top: 6px; }
  /* Reclaim vertical space from the non-bullet parts so the 11-item
     card still fits on very short viewports without clipping. */
  .sxr-menu-title { font-size: clamp(22px, 2.6vw, 38px); }
  .sxr-menu-intro { margin: 4px auto 8px; }
  .sxr-menucard { padding: clamp(8px, 1vw, 12px); }
  .sxr-menucard-title { font-size: clamp(16px, 1.6vw, 22px); margin-bottom: 5px; padding-top: 0; }
}

/* The X+copy sticky-stage wrapper is layout-invisible on desktop (its
   children behave as direct children of .ix-zoom-final, preserving the
   desktop scroll-zoom). Mobile re-enables it as a real pinned stage. */
.ix-zoom-final-stage { display: contents; }

/* ===== v85: "15 Years in the Making" responsiveness (tablet + mobile).
   (1) Intro copy was a forced 2-column grid (v49 !important) that crammed
       the body into a narrow column — stack title over body, centered.
   (2) Zoom-final: the X slid LEFT with the copy in a right column. On
       narrow screens send the X UP instead and stack the copy BELOW it. ===== */
@media (max-width: 900px) {
  /* (1) Intro — single column, both rows centered. */
  .ix-years-copy {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vh, 32px);
    text-align: center;
    justify-items: center;
  }
  .ix-years-title { white-space: normal; }
  .ix-years-body { justify-items: center; width: 100%; }
  .ix-years-body p { text-align: center; margin-inline: auto; }

  /* (2) GALLERY — collapse the full-screen scroll-zoom into a static
     2-column photo grid (proper landscape ratio), then the X-mark + copy
     stacked below. Kills the dead gap + over-crop and is robust regardless
     of reduce-motion. Desktop (>900px) keeps the animated scroll-zoom. */
  .ix-zoom { height: auto !important; margin-top: clamp(20px, 4vh, 40px); }
  .ix-zoom-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 2.4vw, 16px);
    padding: 0 clamp(16px, 5vw, 32px);
  }
  .ix-zoom-item { position: relative !important; inset: auto !important; transform: none !important; display: block; }
  .ix-zoom-frame {
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 100% !important; height: auto !important;
    aspect-ratio: 3 / 2;
  }
  /* X-mark + copy: a PINNED scroll-zoom, like desktop. .ix-zoom-final is a
     tall runway; .ix-zoom-final-stage pins for 100vh; the card grows to
     full-screen as --xzoom rises, the X lifts to the top, then the copy
     fades in beneath it. --xzoom is set by the JS watcher. */
  .ix-zoom-final {
    grid-column: 1 / -1;
    position: relative !important;
    display: block !important;
    height: 200vh !important;
    margin-top: clamp(8px, 1.6vw, 16px);
    perspective: none;
  }
  .ix-zoom-final-stage {
    display: block !important;
    position: sticky; top: 0;
    height: 100vh;
    /* Break out of the photo-grid side padding so the expanded card can
       reach the real viewport edges (no black left/right margins). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    perspective: 1100px;  /* depth for the X's 3D rotate */
    /* Backdrop matches the section dark so nothing tints beside the tile. */
    background: #05060B;
  }
  .ix-zoom-final::after, .ix-zoom-final::before { display: none !important; }
  /* Card starts as a wide tile at the TOP of the stage (last row right
     under the photos), then grows DOWN from the top to fill the screen.
     Border + radius fade out as it expands so the full-screen state has no
     thick scaled border. */
  .ix-zoom-final-card {
    display: block !important;
    position: absolute !important; left: 50%; top: 0;
    width: 92vw !important; height: 52vw !important;
    /* Solid flat dark-blue fill — no gradient band, so no dark fade. */
    background: #0f1829 !important;
    border: 1px solid rgba(236,199,119, calc(0.2 * (1 - clamp(0, var(--xzoom,0) / 0.22, 1)))) !important;
    border-radius: calc((1 - clamp(0, var(--xzoom,0) / 0.22, 1)) * 16px) !important;
    /* No box-shadow — the desktop card's 1px inset gold ring scaled up into
       a thick line at the edges when full-screen. */
    box-shadow: none !important;
    transform-origin: top center !important;
    transform: translateX(-50%) scale(calc(1 + clamp(0, var(--xzoom,0) / 0.4, 1) * 3.7)) !important;
  }
  /* X starts centered in the tile (translateY = the tile's half-height,
     26vw, so it's exactly mid-card), grows with it (smaller final size so
     the lead reads bigger), does ONE 180° 3D flip in place as it expands,
     then drifts up so the copy has room beneath it once the card fills. */
  .ix-zoom-final-logo {
    position: absolute !important; left: 50%; top: 0;
    width: auto !important; height: auto !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
    opacity: 1 !important;
    transform-origin: center !important;
    transform:
      translate(-50%, -50%)
      translateY(calc(26vw + clamp(0, var(--xzoom,0) / 0.4, 1) * 8vh))
      rotateY(calc(clamp(0, (var(--xzoom,0) - 0.4) / 0.2, 1) * -180deg))
      scale(calc(1 + clamp(0, var(--xzoom,0) / 0.4, 1) * 1.4)) !important;
  }
  .ix-zoom-final-logo svg { width: 18vw !important; height: auto; }
  /* Copy fades in at the bottom once the card has filled the screen. */
  .ix-zoom-final-copy {
    position: absolute !important;
    /* Sits below the X with a little breathing room; height follows content. */
    top: 34vh !important; bottom: auto !important;
    left: clamp(16px, 5vw, 30px) !important; right: clamp(16px, 5vw, 30px) !important;
    transform: none !important;
    max-width: none !important; margin: 0 !important;
    text-align: center;
    padding: clamp(14px, 4vw, 22px) !important;
    background: rgba(8,10,18,0.42) !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    /* Fades in AFTER the X rotate finishes (rotate runs 0.4–0.6). */
    opacity: clamp(0, (var(--xzoom,0) - 0.62) / 0.12, 1) !important;
  }
  .ix-zoom-final-copy p { font-size: 13px !important; line-height: 1.46 !important; }
  /* Higher specificity than `.ix-zoom-final-copy p` so the lead size wins
     (that p-rule was capping the lead at 13px — only its margin applied). */
  .ix-zoom-final-copy p.ix-zoom-final-lead { font-size: clamp(18px, 5vw, 23px) !important; line-height: 1.25 !important; margin-bottom: clamp(0px, 0.3vh, 3px) !important; }
}

/* ===== v84: hero responsiveness (tablet + mobile). The display sub had
   white-space:nowrap and the mega title scaled too large, so on narrow
   screens the heading/sub/body were pushed off the right edge. Let the
   sub wrap, scale the title to fit the longest word, and enlarge the
   Apply Now CTA so it doesn't read as a tiny pill on phones. ===== */
@media (max-width: 900px) {
  /* Stop the one-line sub from forcing horizontal overflow. */
  .ix-insider-hero-sub--display { white-space: normal !important; }
}
@media (max-width: 768px) {
  .ix-insider-hero-title--mega { font-size: clamp(34px, 9.2vw, 60px) !important; }
  .ix-insider-hero-sub--display {
    font-size: clamp(20px, 4.6vw, 28px);
    line-height: 1.3;
    max-width: 92vw;
  }
  .ix-insider-hero-body { font-size: 15px; max-width: 92vw; }
  /* Larger, more tappable CTA than the old 48px/11px pill. */
  .ix-insider-hero-cta {
    height: 56px !important;
    padding: 0 clamp(40px, 11vw, 60px) !important;
    font-size: 13px !important;
    letter-spacing: 0.2em !important;
  }
}
@media (max-width: 430px) {
  .ix-insider-hero-title--mega { font-size: clamp(30px, 10.5vw, 46px) !important; }
  .ix-insider-hero-sub--display { font-size: clamp(19px, 5.6vw, 24px); }
  .ix-insider-hero-cta {
    height: 54px !important;
    padding: 0 36px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.18em !important;
  }
}

/* ===== v86: "The most adaptable brands win." arc title — a global
   `white-space: nowrap` forced it onto one line, overflowing the right
   edge on tablet/mobile. Let it wrap and size it to the viewport. ===== */
@media (max-width: 900px) {
  .ix-arc-title {
    white-space: normal !important;
    max-width: 16ch !important;
    margin-left: auto !important; margin-right: auto !important;
    padding: 0 16px;
    font-size: clamp(28px, 8vw, 46px) !important;
    text-align: center;
  }
}

/* ===== v87: "What makes Insider Membership different" 6 layers — on mobile
   the full-bleed bg + dark-LEFT vignette + overlaid copy is unreadable on a
   narrow column. Restructure each layer: the bg media becomes a full-width
   BAND on top, the dark gradient now comes from the BOTTOM of the image, and
   the copy sits below it on solid dark. Applies to all 6 layers. ===== */
@media (max-width: 768px) {
  /* --band = bottom edge of the top image band (where the image ends and the
     solid dark begins). Kept compact so the copy sits just under the layer
     number on clean dark, not floating low over the image. Layer 2's copy is
     long, so its band is shorter to free up more room below. */
  .ix-insider-what-layer { --band: 25vh; }
  .ix-insider-what-layer[data-layer="2"] { --band: 16vh; }

  /* bg media (video/img) → full-width top band. */
  .ix-insider-what-bg {
    height: var(--band) !important;
    inset: 0 0 auto 0 !important;
  }
  .ix-insider-what-layer[data-layer="5"] .ix-insider-what-bg { transform: none !important; }

  /* Smooth fade distributed across the WHOLE band — eases in gradually from
     the top quarter and reaches solid exactly at the band bottom, so there's
     no abrupt dark slab low on the image. */
  .ix-insider-what-bg-overlay {
    background: linear-gradient(180deg,
      rgba(6,11,26,0) 0%,
      rgba(6,11,26,0.04) calc(var(--band) * 0.22),
      rgba(6,11,26,0.13) calc(var(--band) * 0.40),
      rgba(6,11,26,0.30) calc(var(--band) * 0.56),
      rgba(6,11,26,0.52) calc(var(--band) * 0.68),
      rgba(6,11,26,0.74) calc(var(--band) * 0.78),
      rgba(6,11,26,0.90) calc(var(--band) * 0.88),
      rgba(6,11,26,0.97) calc(var(--band) * 0.95),
      #060B1A var(--band),
      #060B1A 100%) !important;
  }

  /* Copy sits just below the image band on solid dark, right under the layer
     number. Content is TOP-anchored (the base panel vertically centers its
     content, which left a big gap under the number); flex-start kills that. */
  .ix-insider-what-layer--bg .ix-insider-what-panel,
  .ix-insider-what-layer--split .ix-insider-what-panel,
  .ix-insider-what-layer--collage .ix-insider-what-panel {
    position: absolute !important;
    inset: var(--band) 0 0 0 !important;
    width: 100% !important; max-width: none !important; margin: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: transparent !important;
    padding: clamp(6px,1.2vh,14px) clamp(18px,5vw,26px) clamp(14px,2.5vh,26px) !important;
    overflow: hidden;
  }
  .ix-insider-what-panel-title { font-size: clamp(29px, 7.6vw, 41px) !important; margin-bottom: clamp(8px,1.4vh,14px) !important; }
  .ix-insider-what-layer[data-layer="2"] .ix-insider-what-panel-title { font-size: clamp(26px, 6.7vw, 36px) !important; }
  .ix-insider-what-panel-rule { margin-bottom: clamp(8px,1.4vh,14px) !important; width: clamp(56px,15vw,100px) !important; }
  .ix-insider-what-panel-body { font-size: clamp(15px, 4.3vw, 18px) !important; line-height: 1.5 !important; max-width: none !important; }
  .ix-insider-what-layer[data-layer="2"] .ix-insider-what-panel-body { font-size: clamp(11.5px, 3.1vw, 13px) !important; line-height: 1.42 !important; }
  .ix-insider-what-panel-body p { margin-bottom: clamp(6px,1vh,11px) !important; }
  .ix-insider-what-panel-stamp { font-size: clamp(13px,3.6vw,16px) !important; }

  /* Split layer (4): the faces sphere IS the band's visual (like the bg media
     on the other layers), so hide the competing collage and give the sphere a
     clean dark band; copy stays in the lower dark area. */
  .ix-insider-what-layer--split .ix-insider-what-bg { display: none !important; }
  .ix-insider-what-layer--split .ix-insider-what-panel-copy { display: block !important; }
  /* Layer 4: the sphere owns the band (top), so the copy sits LOWER than on
     the other layers to clear it. overflow VISIBLE so the sphere — which sits
     above the panel's top edge — isn't sliced to a thin sliver. */
  .ix-insider-what-layer--split .ix-insider-what-panel {
    grid-template-columns: none !important;
    top: calc(var(--band) + 1vh) !important;
    overflow: visible !important;
  }
  .ix-insider-what-layer--split .ix-insider-what-panel-sphere {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(0px - var(--band)) !important;   /* fills the band above the copy */
    transform: translateX(-50%) !important;
    width: clamp(180px, 52vw, 250px) !important;
    height: clamp(180px, 52vw, 250px) !important;
    margin: 0 !important;
    z-index: 4;
  }

  /* Collage layer (6): the scrolling collage becomes the top band. */
  .ix-insider-what-collage {
    height: var(--band) !important; top: 0 !important; bottom: auto !important; overflow: hidden;
  }
}

@media (max-width: 768px) {
  .ix-insider-numbers-body { text-align: center !important; }
}

/* ===== Mobile / iPad (≤1024px): What You Get — normal scroll, no sticky runway ===== */
@media (max-width: 1024px) {
  /* 1. Kill the 1300vh scroll runway — become normal document flow */
  .sxr { height: auto !important; }
  .sxr-runway { height: auto !important; }
  .sxr-stage {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 2. "WHAT YOU GET" — centered heading at top of section */
  .sxr-introbig {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding: clamp(52px,8vh,80px) 24px clamp(12px,2vh,24px) !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }
  .sxr-introbig span {
    font-size: clamp(36px, 8vw, 60px) !important;
    letter-spacing: -0.03em !important;
  }

  /* 3. Content wrapper — normal block flow */
  .sxr-content { position: static !important; opacity: 1 !important; display: block !important; }

  /* 4. Progress rail — hidden on mobile/tablet */
  .sxr-rail { display: none !important; }

  /* 5. Panels — static block, stacked, full width */
  .sxr-panels { position: static !important; display: block !important; }
  .sxr-panel {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: clamp(36px,5vh,64px) clamp(20px,5vw,36px) clamp(48px,7vh,80px) !important;
    /* All chapters are visible + stacked in normal flow on mobile (not
       overlapping), so every panel needs to be clickable — undo the
       desktop crossfade's active-only pointer-events gate. */
    pointer-events: auto !important;
  }
  .sxr-panel--center { align-items: center !important; text-align: center !important; }

  /* 6. Override ALL scene-prog-driven opacity — every chapter fully visible */
  .sxr-panel[data-ch="5"],
  .sxr-panel[data-ch="2"],
  .sxr-panel[data-ch="3"],
  .sxr-panel[data-ch="4"],
  .sxr-sub[data-sub="a"],
  .sxr-sub[data-sub="b"],
  .sxr-menu-title,
  .sxr-menu-intro,
  .sxr-menu-foot { opacity: 1 !important; }

  /* 7. Sub-views (ch1 has sub-a + sub-b) — stacked vertically, above scrim (z-index:1) */
  .sxr-panel > .sxr-sub {
    position: relative !important;
    z-index: 10 !important;
  }
  .sxr-sub {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  .sxr-sub[data-sub="a"] { margin-bottom: clamp(40px,6vh,72px) !important; }

  /* 8. Dream Team grid (ch1 sub-a) — kill 2-col, single column */
  .sxr-dt-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(28px,4vh,48px) !important;
    align-items: flex-start !important;
  }

  /* 9. Scrims — flatten left-heavy desktop gradient to a simple dark overlay */
  .sxr-panel-scrim {
    background: rgba(4,6,15,0.58) !important;
  }
  .sxr-panel-scrim--center {
    background: rgba(4,6,15,0.52) !important;
  }
  .sxr-panel[data-ch="5"] .sxr-panel-scrim {
    background: rgba(4,6,15,0.52) !important;
  }

  /* 10. Benefit cards (ch1 sub-a right column) — bigger on mobile */
  .sxr-glasscard {
    padding: clamp(18px,4.5vw,26px) clamp(20px,5vw,28px) !important;
    gap: clamp(14px,3.5vw,20px) !important;
    border-radius: 16px !important;
  }
  .sxr-glasscard h4 { font-size: clamp(17px,4.5vw,22px) !important; margin-bottom: 6px !important; }
  .sxr-glasscard p { font-size: clamp(14px,3.7vw,17px) !important; line-height: 1.5 !important; }
  .sxr-glass-icon { width: clamp(28px,7vw,40px) !important; height: clamp(28px,7vw,40px) !important; }

  /* 11. Menu of Services (ch1 sub-b) — horizontal snap-scroll, cards fill screen */
  .sxr-sub--full { padding-left: 0 !important; padding-right: 0 !important; }
  .sxr-menu-title { white-space: normal !important; font-size: clamp(20px,5.5vw,30px) !important; padding: 0 clamp(20px,5vw,36px) !important; }
  .sxr-menu-intro { white-space: normal !important; font-size: clamp(14px,3.7vw,17px) !important; padding: 0 clamp(20px,5vw,36px) !important; }
  .sxr-menu-track {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: clamp(12px,3vw,20px) !important;
    transform: none !important;
    margin-top: clamp(20px,3vh,32px) !important;
    margin-left: 0 !important;
    padding-left: clamp(20px,5vw,36px) !important;
    padding-right: clamp(20px,5vw,36px) !important;
    padding-bottom: 16px !important;
  }
  .sxr-menucard {
    flex: 0 0 82vw !important;
    max-width: 340px !important;
    width: auto !important;
    scroll-snap-align: start !important;
    border-radius: 20px !important;
  }
  .sxr-menucard-media { min-height: clamp(200px,30vw,280px) !important; }
  .sxr-menu-foot {
    position: static !important;
    transform: none !important;
    margin-top: clamp(20px,3vh,32px) !important;
    padding: 0 clamp(20px,5vw,36px) !important;
    font-size: clamp(14px,3.7vw,18px) !important;
    text-align: center !important;
  }

  /* 12. Menu track wrapper + arrows */
  .sxr-menu-track-wrap {
    position: relative !important;
    width: 100% !important;
    margin-top: clamp(20px,3vh,32px) !important;
  }
  /* Shift margin-top from track to wrapper */
  .sxr-menu-track-wrap .sxr-menu-track { margin-top: 0 !important; }

  .sxr-menu-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 30 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #fff !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: background 0.2s, opacity 0.2s !important;
    pointer-events: auto !important;
  }
  .sxr-menu-arrow:hover { background: rgba(255,255,255,0.24) !important; }
  .sxr-menu-arrow:disabled { opacity: 0.25 !important; pointer-events: none !important; }
  .sxr-menu-arrow--prev { left: 10px !important; }
  .sxr-menu-arrow--next { right: 10px !important; }

  /* 13. eXponential Network + CXO cards — single column */
  .sxr-cards--net { grid-template-columns: 1fr !important; }
  .sxr-cards--net .sxr-netcard:nth-child(-n+4),
  .sxr-cards--net .sxr-netcard:nth-child(n+5) { grid-column: auto !important; }
  .sxr-cards--cxo { grid-template-columns: 1fr !important; }

  /* ch2 needs extra top room so the AI² circle badge isn't clipped */
  .sxr-panel[data-ch="2"] { padding-top: clamp(80px,14vh,120px) !important; }

  /* ch3 — restore centered layout overridden by the global mobile panel rule */
  .sxr-panel[data-ch="3"] { align-items: center !important; text-align: center !important; }

  /* ch3 title — allow wrapping + smaller size so it fits viewport */
  .sxr-panel[data-ch="3"] .sxr-title {
    white-space: normal !important;
    font-size: clamp(22px,6vw,34px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  /* Netcard text — larger for mobile readability */
  .sxr-netcard h4 { font-size: clamp(16px,4.5vw,20px) !important; }
  .sxr-netcard p  { font-size: clamp(14px,3.7vw,16px) !important; line-height: 1.5 !important; }

  /* ch4 — center layout + title wrap */
  .sxr-panel[data-ch="4"] { align-items: center !important; text-align: center !important; }
  .sxr-panel[data-ch="4"] .sxr-title { white-space: normal !important; text-align: center !important; font-size: clamp(22px,6vw,34px) !important; line-height: 1.1 !important; }
  /* CXO cards — same font bump as netcards */
  .sxr-cards--cxo .sxr-netcard h4 { font-size: clamp(16px,4.5vw,20px) !important; }
  .sxr-cards--cxo .sxr-netcard p  { font-size: clamp(14px,3.7vw,16px) !important; line-height: 1.5 !important; }

  /* 13. Panel background images/video — cover the full panel height */
  .sxr-panel-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .sxr-panel-bg--video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }

}

/* Hide menu arrows on desktop; make wrap layout-invisible so it doesn't
   break the desktop scroll-driven track layout; force sxr visible so
   ix-reveal's opacity:0 doesn't block the scroll-driven animation */
@media (min-width: 1025px) {
  .sxr-menu-arrow { display: none !important; }
  .sxr-menu-track-wrap { display: contents; }
  .sxr.ix-reveal { opacity: 1 !important; transform: none !important; }
}

/* Membership tiers — single column on mobile/tablet */
@media (max-width: 1024px) {
  .ix-insider-tiers--embedded .ix-insider-tiers-stack {
    grid-template-columns: 1fr !important;
  }
  .ix-insider-tier {
    width: 100% !important;
    max-width: none !important;
  }
  .ix-insider-tiers-toggle {
    margin-bottom: clamp(20px, 4vh, 36px) !important;
  }
}

/* Referral section — tighter vertical spacing on mobile/tablet */
@media (max-width: 1024px) {
  .ix-insider-referral {
    padding-top: clamp(60px, 8vh, 90px) !important;
    padding-bottom: clamp(60px, 8vh, 90px) !important;
  }
  .ix-insider-referral-inner {
    gap: clamp(16px, 3vw, 28px) !important;
  }
  .ix-insider-referral-stage {
    margin-top: clamp(32px, 5vh, 48px) !important;
  }
  /* Glow creates ~100px of phantom space below the card on mobile — collapse it */
  .ix-insider-referral-glow {
    height: 24px !important;
    margin-top: 0 !important;
  }
  .ix-insider-referral-cta {
    margin-top: clamp(8px, 1.5vh, 16px) !important;
  }
}

/* Arc section — halve top padding on mobile */
@media (max-width: 1024px) {
  .ix-arc {
    padding-top: clamp(48px, 6vh, 90px) !important;
  }
}

/* eXponential Network copy — bump body paragraphs by 2px on mobile */
@media (max-width: 1024px) {
  .ix-zoom-final-copy p {
    font-size: clamp(16px, 1.2vw, 19.5px) !important;
  }
}

/* Hero CTA — 40% larger on mobile/tablet */
@media (max-width: 1024px) {
  .ix-insider-hero-cta {
    height: 78px !important;
    padding: 0 clamp(56px, 15vw, 84px) !important;
    font-size: 18px !important;
    letter-spacing: 0.2em !important;
  }
}
@media (max-width: 430px) {
  .ix-insider-hero-cta {
    height: 76px !important;
    padding: 0 50px !important;
    font-size: 17px !important;
    letter-spacing: 0.18em !important;
  }
}

/* Quote — bump by 1px on mobile */
@media (max-width: 1024px) {
  .ix-insider-quote-text {
    font-size: clamp(21px, 3.4vw, 60px) !important;
  }
}

/* Numbers bg — cover on a tall portrait container zooms in heavily;
   use width-based sizing on mobile so more of the scene is visible */
@media (max-width: 1024px) {
  .ix-insider-numbers-bg {
    background-size: 160% auto !important;
    background-position: center 55% !important;
  }
  /* Override overlay so it creates a clean linear dark fade
     from the image area down to black */
  .ix-insider-numbers-overlay {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,1.00)  0%,
        rgba(0,0,0,0.96) 20%,
        rgba(0,0,0,0.70) 36%,
        rgba(0,0,0,0.20) 48%,
        rgba(0,0,0,0.00) 54%,
        rgba(0,0,0,0.40) 64%,
        rgba(0,0,0,0.82) 76%,
        rgba(0,0,0,1.00) 86%,
        rgba(0,0,0,1.00) 100%) !important;
  }
}

/* WHAT YOU GET — introbig weight 700. Chapter titles get the authority
   gradient + soft-sweep animation on desktop (see the consolidated rule
   near the end of this file); flattened to plain gold on mobile. */
.sxr-introbig span { font-weight: 700 !important; }
.sxr-panel[data-ch="5"] .sxr-title { font-weight: 500 !important; }
@media (max-width: 1024px) {
  /* Center ch1 panel + title the same way ch3/ch4 are centered */
  .sxr-panel[data-ch="5"] {
    align-items: center !important;
    text-align: center !important;
  }
  .sxr-panel[data-ch="5"] .sxr-title {
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Card content stays left-aligned regardless of panel text-align */
  .sxr-panel[data-ch="5"] .sxr-menucard-title,
  .sxr-panel[data-ch="5"] .sxr-menucard-list,
  .sxr-panel[data-ch="5"] .sxr-menucard-list li,
  .sxr-panel[data-ch="5"] .sxr-menucard-tag,
  .sxr-panel[data-ch="5"] .sxr-glasscard,
  .sxr-panel[data-ch="5"] .sxr-glasscard h4,
  .sxr-panel[data-ch="5"] .sxr-glasscard p,
  .sxr-panel[data-ch="5"] .sxr-glass-body {
    text-align: left !important;
  }
  /* Widen service cards to near-full-viewport on mobile/tablet */
  .sxr-menu-track .sxr-menucard,
  .sxr-menu-track-wrap .sxr-menucard {
    flex: 0 0 min(880px, 90vw) !important;
    width: min(880px, 90vw) !important;
    min-width: min(880px, 90vw) !important;
  }
}
.sxr-panel[data-ch="3"] .sxr-title,
.sxr-panel[data-ch="4"] .sxr-title {
  font-weight: 500 !important;
}

/* Dream Team paragraphs — bigger on mobile */
@media (max-width: 1024px) {
  .sxr-panel[data-ch="5"] .sxr-narr p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* Layer 2 — phones (≤768px): at this breakpoint the panel is absolute,
   inset: 16vh 0 0 0. The "2" numeral (120px font, 0.85 line-height)
   ends at ~11vh + 102px. Needed padding = (11vh+102px) - 16vh + buffer
   = 112px - 5vh — placed just below the numeral on every phone size. */
@media (max-width: 768px) {
  .ix-insider-what-layer[data-layer="2"] .ix-insider-what-panel {
    padding-top: clamp(55px, calc(112px - 5vh), 90px) !important;
  }
}

/* "Here's what changed" glass card — center text on mobile */
@media (max-width: 1024px) {
  .ix-insider-numbers-glass { text-align: center !important; }
  .ix-insider-numbers-glass p { text-align: center !important; }
}

/* Pricing tier cards — bump all font sizes by 1pt on mobile */
@media (max-width: 1024px) {
  .ix-insider-tier-eyebrow     { font-size: clamp(23px, 2.2vw, 33px) !important; }
  .ix-insider-tier-price-num   { font-size: clamp(27px, 3vw, 43px) !important; }
  .ix-insider-tier-price-cadence { font-size: clamp(15px, 1.2vw, 19px) !important; }
  .ix-insider-tier-price-old   { font-size: clamp(15px, 1.4vw, 21px) !important; }
  .ix-insider-tier-tagline     { font-size: clamp(15px, 1.15vw, 19px) !important; }
  .ix-insider-tier-body        { font-size: clamp(14px, 0.95vw, 16px) !important; }
  .ix-insider-tier-bestfor     { font-size: clamp(13px, 0.9vw, 15px) !important; }
  .ix-insider-tier-list        { font-size: clamp(14px, 3.8vw, 16px) !important; }
}

/* Service carousel — mobile nav row (arrows moved below carousel by JS) */
@media (max-width: 1024px) {
  .sxr-menu-nav-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 16px clamp(20px,5vw,36px) 0 !important;
    width: 100% !important;
  }
  .sxr-menu-nav-row .sxr-menu-arrow {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }
  .sxr-menu-nav-row .sxr-menu-arrow:disabled {
    opacity: 0.35 !important;
  }
}

/* ============================================================================
   v40 — INSIDER CXO restructure. "What You Get" rail rebuilt from 4 → 5
   chapters: 01 Your CXO Dream Team (new) · 02 AI² · 03 eXponential Network ·
   04 Data-Driven Design (new) · 05 Flex Fund Execution (the former ch1 Flex
   panel, renumbered). Rules below are appended last so they win the cascade
   over the earlier 4-chapter timing. Scoped to .sxr — nothing else touched.
   ============================================================================ */

/* --- 5-chapter crossfade windows (scene-prog 0→1) --- */
/* v46: ch1 (CXO) trimmed ~30% (not halved — 50% read too abrupt). ch2-4
   absorb the freed span; ch5 start (0.69) UNCHANGED so its sub-panel/menu
   choreography stays intact. Scene height back to 1300vh. Fades widened to
   0.04 with symmetric crossfades so each hand-off is smooth, not snappy. */
.sxr-panel[data-ch="1"] { z-index: 1; opacity: min(clamp(0,calc((var(--scene-prog) - 0.09)/0.04),1), clamp(0,calc((0.256 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="2"] { z-index: 2; opacity: min(clamp(0,calc((var(--scene-prog) - 0.216)/0.04),1), clamp(0,calc((0.414 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="3"] { z-index: 3; opacity: min(clamp(0,calc((var(--scene-prog) - 0.374)/0.04),1), clamp(0,calc((0.572 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="4"] { z-index: 4; opacity: min(clamp(0,calc((var(--scene-prog) - 0.532)/0.04),1), clamp(0,calc((0.73 - var(--scene-prog))/0.04),1)); }
.sxr-panel[data-ch="5"] { z-index: 5; opacity: clamp(0,calc((var(--scene-prog) - 0.69)/0.04),1); }

/* --- ch5 (Flex Fund Execution) sub-panels + services-menu pan, retimed to
       the tail of the runway where ch5 is on screen (0.69 → 1.0) --- */
.sxr-sub[data-sub="a"] { opacity: min(clamp(0,calc((var(--scene-prog) - 0.735)/0.025),1), clamp(0,calc((0.85 - var(--scene-prog))/0.025),1)); }
.sxr-sub[data-sub="b"] { opacity: clamp(0,calc((var(--scene-prog) - 0.875)/0.025),1); }
.sxr-menu-track { transform: translateX(calc(clamp(0, calc((var(--scene-prog) - 0.90) / 0.085), 1) * -66%)); }

/* --- rail highlight for chapter 05 (mirrors the ch1–4 pulse treatment) --- */
.sxr[data-active-ch="5"] .sxr-rail-item[data-ch="5"] .sxr-rail-num {
  color: var(--color-champagne); background: var(--color-champagne); transform: none !important;
  animation: sxr-dot-pulse 2.4s ease-in-out infinite;
}
.sxr[data-active-ch="5"] .sxr-rail-item[data-ch="5"] .sxr-rail-label { color: var(--color-ivory); }

/* ---------- ch1: Your CXO Dream Team ---------- */
.sxr-panel[data-ch="1"] { align-items: center; text-align: center; }
.sxr-cxo-eyebrow {
  font-family: var(--font-micro); font-weight: 700; font-size: clamp(11px,0.9vw,13px);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-champagne);
  margin-bottom: clamp(10px,1.4vh,18px);
}
.sxr-panel[data-ch="1"] .sxr-title, .sxr-panel[data-ch="1"] .sxr-title em {
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%);
  background-size: 300% 100%; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sxr-soft-sweep 16s linear infinite;
}
.sxr-cxo-sub {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(16px,1.5vw,22px); color: var(--color-ivory);
  margin-top: clamp(6px,0.9vh,12px);
}
.sxr-cxo-sub em { font-style: normal; color: var(--color-champagne); }
.sxr-cxo-x { width: 0.92em; height: 0.92em; vertical-align: -0.1em; margin: 0 0.06em; }
.ix-hero-x { width: 0.85em; height: 0.85em; vertical-align: -0.08em; margin: 0 0.04em; }
.sxr-cxo-intro {
  max-width: min(1120px, 92vw); margin: clamp(10px,1.5vh,16px) auto 0;
  color: var(--fg-2); font-family: var(--font-body); font-weight: 400;
  font-size: clamp(14px,1.05vw,16.5px); line-height: 1.55;
}
/* Wider, bigger cards. Symmetric horizontal padding on the ch1 panel frees
   the legacy left rail-gutter so the 5-card row can breathe full width. */
/* ~2.5vw side padding makes the panel content box ≈ 95vw; the grid fills it
   at width:100% so it can never overflow the viewport. */
.sxr-panel[data-ch="1"] { padding-left: clamp(14px,2.5vw,56px); padding-right: clamp(14px,2.5vw,56px); }
.sxr-cxo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px,0.55vw,11px); width: 100%; max-width: none; box-sizing: border-box;
  margin: clamp(18px,2.6vh,34px) auto 0;
}
.sxr-cxo-card {
  position: relative;
  display: flex; flex-direction: row; align-items: stretch; text-align: left;
  gap: 0; padding: 0; overflow: hidden;
  /* Editorial glass: frosted translucent fill (blurs the desk photo behind
     it) with a faint gold wash and a hairline border. Square corners, no
     drop shadow — clean, not SaaS. */
  border-radius: 0;
  background:
    radial-gradient(120% 92% at 84% 0%, rgba(236,199,119,0.12) 0%, rgba(236,199,119,0.03) 44%, rgba(255,255,255,0) 72%),
    rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Portrait strip down the side of each card. Wider now (cards run 95% and
   shorter), so more of each person reads. Holds a base + optional hover
   image that crossfade when the card is hovered. */
.sxr-cxo-photo {
  position: relative;
  flex: 0 0 clamp(112px, 8vw, 146px);
  width: clamp(112px, 8vw, 146px);
  align-self: stretch;
  overflow: hidden;
  border-right: 1px solid rgba(236,199,119,0.16);
}
.sxr-cxo-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.sxr-cxo-photo-img--hover {
  opacity: 0;
  transition: opacity 500ms var(--ease-quint, ease);
}
.sxr-cxo-card:hover .sxr-cxo-photo-img--hover { opacity: 1; }

/* CEO title: cycle the middle word (Expression / Exponential / Executive).
   inline-grid stacks all three in one cell, so the container sizes to the
   widest word and "Officer" never shifts. */
.sxr-cxo-rotate { display: inline-grid; vertical-align: baseline; }
.sxr-cxo-rotate > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: sxr-cxo-word 6.6s infinite;
}
.sxr-cxo-rotate > span:nth-child(1) { animation-delay: 0s; }
.sxr-cxo-rotate > span:nth-child(2) { animation-delay: 2.2s; }
.sxr-cxo-rotate > span:nth-child(3) { animation-delay: 4.4s; }
@keyframes sxr-cxo-word {
  0%   { opacity: 0; transform: translateY(4px); }
  5%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .sxr-cxo-rotate > span { animation: none; }
  .sxr-cxo-rotate > span:nth-child(1) { opacity: 1; }
}
.sxr-cxo-body {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: clamp(4px,0.5vh,8px); padding: clamp(14px,1.2vw,22px);
  min-width: 0;
}
/* Badge overlays the BOTTOM of the portrait as an almost-full-width bar,
   freeing vertical space in the body so the card stays short. Its width
   tracks the photo strip minus a small symmetric inset. */
.sxr-cxo-badge {
  position: absolute; z-index: 3;
  left: clamp(8px,0.6vw,12px);
  bottom: clamp(8px,0.6vw,12px);
  width: calc(clamp(112px,8vw,146px) - clamp(16px,1.2vw,24px));
  text-align: center;
  font-family: var(--font-micro); font-weight: 800; font-size: clamp(10px,0.78vw,12.5px);
  letter-spacing: 0.12em; color: #2A1D05; padding: 5px 4px; border-radius: 0;
  background: linear-gradient(135deg, #F9E9B4 0%, #ECC777 42%, #D2A040 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
.sxr-cxo-name {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(18px,1.5vw,25px);
  color: var(--color-ivory); margin: 0; line-height: 1.06;
}
/* "aka" nickname — sits just under the name: white, italic, smaller, title case. */
.sxr-cxo-aka {
  font-family: var(--font-body); font-weight: 400; font-style: italic;
  font-size: clamp(11px,0.85vw,13.5px); line-height: 1.2;
  text-transform: capitalize; color: var(--color-ivory); margin: 1px 0 0;
}
.sxr-cxo-title {
  font-family: var(--font-micro); font-weight: 700; font-size: clamp(10px,0.78vw,12.5px);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-champagne); margin: 0;
}
.sxr-cxo-gift {
  color: var(--fg-2); font-family: var(--font-body); font-weight: 400;
  font-size: clamp(11px,0.8vw,13.5px); line-height: 1.42; margin: 3px 0 0;
}
.sxr-cxo-foot {
  max-width: 74ch; margin: clamp(20px,2.6vh,34px) auto 0;
  color: var(--fg-2); font-family: var(--font-body); font-weight: 400;
  font-size: clamp(14px,1.05vw,16.5px); line-height: 1.55;
}
.sxr-cxo-foot a {
  font-weight: 700;
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%);
  background-size: 300% 100%; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-decoration: underline; text-decoration-color: #ECC777;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ---------- ch4: Data-Driven Design & Marketing Intelligence ---------- */
.sxr-data-grid-bg {
  opacity: 1 !important;
  background:
    linear-gradient(rgba(236,199,119,0.055) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(236,199,119,0.055) 1px, transparent 1px) 0 0 / 46px 100%,
    radial-gradient(130% 100% at 50% 0%, rgba(18,24,42,0.31), rgba(4,6,15,0.4) 68%),
    url('images/datadrivenbg.jpg') center / cover no-repeat;
}
/* Left-aligned two-column layout: lead copy left, feature points right */
.sxr-panel[data-ch="4"] { align-items: center; text-align: left; }
.sxr-panel[data-ch="4"] .sxr-title, .sxr-panel[data-ch="4"] .sxr-title em {
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%) !important;
  background-size: 300% 100% !important; background-repeat: repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: sxr-soft-sweep 16s linear infinite !important;
  text-align: left !important;
}
.sxr-data-layout {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px,5vw,96px); align-items: center;
  width: 100%; max-width: 1400px; margin: 0 auto; text-align: left;
}
.sxr-data-lead { text-align: left; }
.sxr-data-sub {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(15px,1.4vw,21px); color: var(--color-ivory);
  margin: clamp(8px,1.2vh,16px) 0 0; max-width: 52ch;
}
.sxr-data-body { max-width: 60ch; margin: clamp(14px,2vh,22px) 0 0; }
.sxr-data-body p {
  color: var(--fg-2); font-family: var(--font-body); font-weight: 400;
  font-size: clamp(13.5px,1.02vw,16px); line-height: 1.6; margin: 0 0 clamp(10px,1.4vh,16px);
}
.sxr-data-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px,2.4vh,34px); width: 100%; max-width: none;
  margin: 0; text-align: left;
}
.sxr-data-point { border-top: 1px solid rgba(236,199,119,0.28); padding-top: clamp(14px,1.8vh,22px); }
.sxr-data-point:first-child { border-top: none; padding-top: 0; }
.sxr-data-icon { display: inline-flex; width: clamp(30px,2.2vw,38px); height: clamp(30px,2.2vw,38px); margin-bottom: 10px; }
.sxr-data-icon svg { width: 100%; height: 100%; stroke: url(#ix-grad-auth); }
.sxr-data-point h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px,1.3vw,21px); color: var(--color-champagne); margin: 0 0 8px; }
.sxr-data-point p { color: var(--fg-2); font-family: var(--font-body); font-weight: 400; font-size: clamp(12.5px,0.95vw,15px); line-height: 1.5; margin: 0; }

/* ---------- mobile: flatten the two new pillars like the rest (≤1024px) ---------- */
@media (max-width: 1024px) {
  .sxr-panel[data-ch="1"] { opacity: 1 !important; align-items: flex-start !important; text-align: left !important; }
  .sxr-cxo-eyebrow, .sxr-cxo-intro, .sxr-cxo-foot, .sxr-cxo-sub { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
  .sxr-cxo-grid { grid-template-columns: 1fr 1fr !important; max-width: 100% !important; }
  .sxr-data-layout { grid-template-columns: 1fr !important; gap: clamp(28px,5vh,44px) !important; max-width: 100% !important; }
  .sxr-data-sub, .sxr-data-body, .sxr-data-grid { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .sxr-data-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .sxr-cxo-grid { grid-template-columns: 1fr !important; }
}

/* ---------- v41: unify all 5 "What You Get" chapter titles — authority
   gradient + soft-sweep animation on desktop, flattened to plain gold with
   no animation on mobile/tablet. Runs last so it wins over the earlier
   per-chapter title rules (ch1/ch3/ch4) and adds the two that had none
   (ch2, ch5). Also covers the fix for the two legacy blanket overrides
   removed above that had forced ch3/ch4/ch5 titles to flat gold. ---------- */
.sxr-panel[data-ch="1"] .sxr-title, .sxr-panel[data-ch="1"] .sxr-title em,
.sxr-panel[data-ch="2"] .sxr-title, .sxr-panel[data-ch="2"] .sxr-title em,
.sxr-panel[data-ch="3"] .sxr-title, .sxr-panel[data-ch="3"] .sxr-title em,
.sxr-panel[data-ch="4"] .sxr-title, .sxr-panel[data-ch="4"] .sxr-title em,
.sxr-panel[data-ch="5"] .sxr-title, .sxr-panel[data-ch="5"] .sxr-title em {
  background-image: linear-gradient(100deg, #F5EBD9 0%, #ECC777 22%, #F3D9C7 44%, #E6B8D9 58%, #ECC777 78%, #F5EBD9 100%);
  background-size: 300% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sxr-soft-sweep 16s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sxr-panel[data-ch="1"] .sxr-title, .sxr-panel[data-ch="1"] .sxr-title em,
  .sxr-panel[data-ch="2"] .sxr-title, .sxr-panel[data-ch="2"] .sxr-title em,
  .sxr-panel[data-ch="3"] .sxr-title, .sxr-panel[data-ch="3"] .sxr-title em,
  .sxr-panel[data-ch="4"] .sxr-title, .sxr-panel[data-ch="4"] .sxr-title em,
  .sxr-panel[data-ch="5"] .sxr-title, .sxr-panel[data-ch="5"] .sxr-title em {
    animation: none;
  }
}
@media (max-width: 1024px) {
  .sxr-panel[data-ch="1"] .sxr-title, .sxr-panel[data-ch="1"] .sxr-title em,
  .sxr-panel[data-ch="2"] .sxr-title, .sxr-panel[data-ch="2"] .sxr-title em,
  .sxr-panel[data-ch="3"] .sxr-title, .sxr-panel[data-ch="3"] .sxr-title em,
  .sxr-panel[data-ch="4"] .sxr-title, .sxr-panel[data-ch="4"] .sxr-title em,
  .sxr-panel[data-ch="5"] .sxr-title, .sxr-panel[data-ch="5"] .sxr-title em {
    background-image: none !important;
    color: #ECC777 !important;
    -webkit-text-fill-color: #ECC777 !important;
    animation: none !important;
  }
}

/* ---------- v42: mobile-only fixes for the "What You Get" pillars ---------- */
/* The section-label eyebrows are carried by the desktop progress rail, which
   is hidden ≤1024px — so surface them as small eyebrows on mobile only. */
.sxr-eyebrow-mobile { display: none; }
@media (max-width: 1024px) {
  /* Correct pillar order. Panels sit in DOM order 1,5,2,3,4 (the Flex panel
     was renumbered in place), which is invisible on desktop (absolute +
     opacity crossfade) but wrong when they stack on mobile. Force the
     intended 1→5 sequence with flex ordering keyed to data-ch. */
  .sxr-panels { display: flex !important; flex-direction: column !important; }
  .sxr-panel[data-ch="1"] { order: 1 !important; }
  .sxr-panel[data-ch="2"] { order: 2 !important; }
  .sxr-panel[data-ch="3"] { order: 3 !important; }
  .sxr-panel[data-ch="4"] { order: 4 !important; }
  .sxr-panel[data-ch="5"] { order: 5 !important; }

  /* Reveal the section-label eyebrows (styled by .sxr-cxo-eyebrow). */
  .sxr-eyebrow-mobile {
    display: block !important;
    margin-bottom: clamp(8px,1.6vh,14px) !important;
  }
}

/* ---------- v43: mobile type sizing + centered title group, pillars 1 & 4 ----------
   The CXO/Data copy used desktop-min-clamped vw sizes, so on mobile it fell to
   its floor and read small next to the other pillars (whose netcard/body type
   scales with vw). Bump to comparable sizes, and center the eyebrow + heading +
   subheading on both pillars. Mobile only — desktop untouched. */
@media (max-width: 1024px) {
  /* Center the title group (eyebrow + heading + subheading). */
  .sxr-panel[data-ch="1"] .sxr-eyebrow-mobile,
  .sxr-panel[data-ch="1"] .sxr-title,
  .sxr-panel[data-ch="1"] .sxr-cxo-sub {
    align-self: center !important; width: 100% !important; text-align: center !important;
  }
  .sxr-panel[data-ch="4"] .sxr-eyebrow-mobile,
  .sxr-panel[data-ch="4"] .sxr-title,
  .sxr-panel[data-ch="4"] .sxr-data-sub {
    width: 100% !important; text-align: center !important;
  }

  /* Bump copy sizes to match the other pillars' mobile scale. */
  .sxr-eyebrow-mobile   { font-size: clamp(12px,3.3vw,14px) !important; letter-spacing: 0.2em !important; }
  .sxr-cxo-sub, .sxr-data-sub { font-size: clamp(16px,4.4vw,21px) !important; }
  .sxr-cxo-intro        { font-size: clamp(15px,4vw,17px) !important; }
  .sxr-cxo-foot         { font-size: clamp(14px,3.7vw,16px) !important; }
  .sxr-cxo-name         { font-size: clamp(20px,5.2vw,26px) !important; }
  .sxr-cxo-title        { font-size: clamp(12px,3.3vw,14px) !important; }
  .sxr-cxo-gift         { font-size: clamp(14px,3.7vw,16px) !important; }
  .sxr-cxo-aka          { font-size: clamp(12px,3.2vw,14px) !important; }
  .sxr-data-body p      { font-size: clamp(15px,4vw,17px) !important; }
  .sxr-data-point h4    { font-size: clamp(17px,4.6vw,21px) !important; }
  .sxr-data-point p     { font-size: clamp(14px,3.7vw,16px) !important; }
}

/* ---------- v44: copyable / screen-reader "X" for the Influex X-mark ----------
   The eXponential logotype (and the standalone "The X …") render the X as a
   decorative SVG logo mark, so selecting the text used to copy "eponential"
   (the X was lost). This paired real "X" is visually hidden with zero layout
   footprint but stays IN the text flow (not display:none), so selection/copy
   and screen readers get the full "eXponential" / "The X" while the eye sees
   the logo mark. */
.ix-x-copy {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- v47: normalize the eXponential logotype size inside the rail ----------
   The .ix-xnet logotype carries a 1.25em bump (so it matches uppercase caps in
   running text). Inside the uppercase rail labels that makes "The eXponential
   Network" render larger than the sibling tabs — reset it to 1em so all five
   progress labels are the same size. */
.sxr-rail-label .ix-xnet { font-size: 1em; }

/* ---------- v48: CXO cards — carousel ONLY in the 1025–1300px range ----------
   In that narrow-desktop/tablet band the 5-column grid squeezed cards too
   narrow to read, so it becomes a horizontally scrollable, snap-aligned row
   with left/right arrows; cards keep one comfortable, fixed, readable width
   instead of shrinking further. Desktop (>1300px) keeps the original
   5-column grid. True mobile (≤1024px, where the whole scroll-jack scene
   already flattens to normal stacked document flow) stays a simple single-
   column stack — no carousel, no arrows, matching the other pillars. */
.sxr-cxo-arrow { display: none; }
/* .sxr-panel is itself display:flex, so this wrap is a flex ITEM — flex
   items default to min-width:auto (won't shrink below their content's
   size), which let the wrap balloon to fit all 5 cards and overflow the
   panel. min-width:0 + width:100% forces it back to the panel's width so
   the inner grid scrolls WITHIN it instead. */
.sxr-cxo-carousel-wrap { min-width: 0; width: 100%; }
@media (min-width: 1025px) and (max-width: 1300px) {
  .sxr-cxo-carousel-wrap { position: relative; }
  .sxr-cxo-grid {
    display: flex !important;
    min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px; /* clears the focus outline from the scroll clip */
  }
  .sxr-cxo-grid::-webkit-scrollbar { display: none; }
  .sxr-cxo-card {
    flex: 0 0 min(560px, 86vw) !important;
    width: min(560px, 86vw) !important;
    scroll-snap-align: start;
  }
  /* Bump photo + type back up to a comfortable size — the vw-based clamps
     used for the 5-across desktop grid shrink too far in this narrower
     tablet range, reading noticeably smaller than desktop. */
  .sxr-cxo-photo { flex-basis: 190px !important; width: 190px !important; }
  .sxr-cxo-body { padding: 28px 32px !important; gap: 10px !important; }
  .sxr-cxo-badge { font-size: 14px !important; padding: 6px 16px !important; }
  .sxr-cxo-name { font-size: 30px !important; }
  .sxr-cxo-aka { font-size: 15px !important; }
  .sxr-cxo-title { font-size: 15px !important; }
  .sxr-cxo-gift { font-size: 16px !important; line-height: 1.5 !important; }
  .sxr-cxo-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(4,6,15,0.55); border: 1px solid rgba(236,199,119,0.4);
    color: var(--color-champagne);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer; transition: background 240ms ease, opacity 240ms ease;
  }
  .sxr-cxo-arrow:hover { background: rgba(4,6,15,0.75); }
  .sxr-cxo-arrow:disabled { opacity: 0.3; pointer-events: none; }
  .sxr-cxo-arrow--prev { left: -6px; }
  .sxr-cxo-arrow--next { right: -6px; }
}
/* True mobile — single-column stack, no carousel/arrows (overrides the
   older 2-col ≤1024 / 1-col ≤560 grid rules earlier in this file). */
@media (max-width: 1024px) {
  .sxr-cxo-grid { grid-template-columns: 1fr !important; }
  .sxr-cxo-arrow { display: none !important; }
}