/* ==========================================================================
   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;
}
@media (max-width: 720px) {
  .ix-team-title-line { white-space: normal; }
}
.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));
}
@media (max-width: 720px) {
  .ix-iconic-mf-line { white-space: normal; }
}
.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;
}
@media (max-width: 720px) {
  .ix-iconic-mf-card-lead { white-space: normal; text-wrap: balance; }
}
.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 {
    position: static;
    max-width: none;
    margin-top: 16px;
    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-cta-pill,
  .btn,
  .btn--primary,
  .ix-cta-label {
    letter-spacing: 3px !important;
  }
  .ix-pricing-stage--light {
    padding-top: 108px !important;
  }
  .ix-pricing-stage--light .ix-pricing-fusion-b {
    margin-top: 0;
    padding-bottom: 30px;
  }
  .ix-pricing-stage--light .ix-pricing-cta .ix-cta-label {
      color: #000;
  }
  .ix-pricing-stage--light .ix-pricing-fusion-mark img {
    margin-top: 0 !important;
  }
  .ix-pricing-stage--light .ix-pricing-fade-bottom {
    display: none;
  }
  .ix-pricing-stage--light .ix-pricing-cta {
    position: static;
    left: auto;
    bottom: auto;
    margin: 22px auto 0;
    transform: none !important;
  }
  .ix-pricing-stage--light .ix-pricing-reveal-group.is-revealed .ix-pricing-cta {
    transform: none !important;
  }
  .ix-pricing-stage--light .ix-pricing-cta {
    bottom: auto;
  }
  /* 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;
}
@media (max-width: 360px) {
  /* Below ~360px the headline ("World-class takes a team.") overflows
     because the clamp min font-size and nowrap together exceed the
     viewport. */
  .ix-objection-v2-answer { white-space: normal; }
}
.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;
}
@media (max-width: 360px) {
  /* clamp min 40px + nowrap exceeds 320px viewports — let "Let's Have
     a Chat." wrap below the smallest mobile width. */
  .ix-invitation-v2-title { white-space: normal; }
}
.ix-invitation-v2-title--placeholder {
  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);
  aspect-ratio: 1000 / 625;
  max-height: 78vh;
  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;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.8vw, 28px);
  padding: clamp(14px, 1.2vw, 22px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

/* Image area (placeholder gradient for now). */
.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;
}
.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%); }

/* 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;
  padding: 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;
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: #fff;
  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;
}
/* 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);
  }
  /* Keep the same scale-down behaviour on mobile — re-derive clamp
     args from --hl-scale so the headline shrinks as the portal
     opens. Max reduced from 56 → 38 so the heading stays inside
     the mobile portal without overflowing. */
  .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; }
}
  .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; }
}