.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-inline: var(--edge);
}

.eyebrow,
.section-kicker,
.micro-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mute);
}

.section-title {
  margin: 0;
  max-width: 11ch;
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lead {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

.btn,
.nav-cta,
.inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition:
    transform 500ms var(--ease-out-expo),
    color 300ms ease,
    background-color 300ms ease,
    border-color 300ms ease;
}

.btn:hover,
.nav-cta:hover,
.inline-link:hover {
  transform: translateY(-2px);
}

.btn-dark {
  padding: 0 1.5rem;
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.btn-dark:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.btn-plain {
  color: var(--ink);
}

.play-dot {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  position: relative;
  display: inline-flex;
}

.play-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.34rem solid transparent;
  border-bottom: 0.34rem solid transparent;
  border-left: 0.52rem solid currentColor;
  transform: translate(-34%, -50%);
}

.inline-link {
  min-height: auto;
  color: var(--orange);
}

.reveal-up {
  opacity: 1;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-out-expo),
    transform 900ms var(--ease-out-expo);
}

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

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.6rem;
  padding: 0.9rem var(--edge);
  color: var(--white);
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    min-height 300ms ease;
}

.site-header.is-scrolled {
  min-height: 4.4rem;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  color: var(--ink);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
}

.brand-mark img {
  width: auto;
  height: 3.2rem;
  display: block;
  filter: invert(1);
  transition: filter 300ms ease;
}

.site-header.is-scrolled .brand-mark img {
  filter: none;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.36rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--ease-out-expo);
}

.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  transition:
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease;
}

/* Nav CTA dual-label defaults — long version visible, short hidden at desktop */
.nav-cta-text-short { display: none; }
.nav-cta-text-full { display: inline; }

.nav-cta:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.site-header.is-scrolled .nav-cta {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.site-header.is-scrolled .nav-cta:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* ============================================================
   HERO — Origin-style: full-bleed editorial photograph,
   centered editorial composition, surfaced scan input.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 7rem var(--edge) 3.5rem;
  overflow: hidden;
  background: var(--color-black);
  color: var(--white);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video,
.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.05) saturate(0.82);
  transform: scale(1.04);
  will-change: transform;
}

.hero-photo-img {
  background-image: url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=2400&auto=format");
  background-size: cover;
  background-position: center;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Heavier overlay so the (now much larger) headline reads with full contrast
     against the basketball-player figure. The figure still shows through at
     the corners; the type owns the centre. */
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, rgba(5, 5, 5, 0.74) 0%, rgba(5, 5, 5, 0.18) 70%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.62) 0%, rgba(5, 5, 5, 0.18) 30%, rgba(5, 5, 5, 0.18) 58%, rgba(5, 5, 5, 0.78) 100%),
    radial-gradient(circle at 30% 30%, rgba(31, 58, 104, 0.22), transparent 55%),
    radial-gradient(circle at 76% 78%, rgba(255, 83, 20, 0.18), transparent 55%);
}

.hero-stack {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Wider than before so the huge headline can occupy ~75% of the viewport
     like the Paper composition (1054 / 1440 ≈ 73%). */
  max-width: 84rem;
  margin-inline: auto;
  margin-block: 0;
  display: grid;
  justify-items: center;
  /* Slightly looser gap so the bigger headline breathes against the eyebrow + dek */
  gap: clamp(1rem, 1.8vw, 1.8rem);
  text-align: center;
  padding-block: clamp(1.5rem, 3vw, 3rem);
}

.hero-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    transform 400ms var(--ease-out-expo);
}

.hero-promo:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.hero-promo-dot {
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 20, 0.2);
}

.hero-title {
  margin: 0.3rem 0 0;
  max-width: 18ch;
  font-family: var(--font-sans);
  /* v3.0 spec: 72–112px, weight 500–600, line-height 0.95.
     Fluid clamp keeps it responsive but caps at 112px (7rem) at largest. */
  font-size: clamp(2.8rem, 8.4vw, 7rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--paper);
  text-transform: none;
}

/* Italic editorial accent on "the good" — Cormorant Garamond / Fraunces fallback */
.hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--paper);
}

/* Signal-orange accent on "Win." */
.hero-title-accent {
  color: var(--signal-orange);
}

/* Eyebrow with the leading dot — v3.0 pattern */
.hero-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--signal-orange);
  margin-right: 0.5em;
  vertical-align: middle;
}

.hero-title-line {
  display: block;
}

.hero-title-line-serif em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Word-level wrapper added by JS for the "Headline Breathes" overdrive.
   Each word becomes its own animation target so we can morph letter-spacing,
   font-variation-settings (Fraunces wght + SOFT axes), and transform per word.
   The display: inline-block isolates each word's transform without breaking
   line wrapping. */
.hero-title-word {
  display: inline-block;
  will-change: transform, letter-spacing, font-variation-settings, opacity;
  /* Preserve a small right margin so wrap behavior matches the original text */
  padding-right: 0.04em;
}

/* FOUC guard — hide the hero title until JS has split it into words and
   gsap.set has applied the initial compressed state. Once the hero entrance
   timeline is set up, JS adds .hero-overdrive-ready to the .hero element. */
.hero:not(.hero-overdrive-ready) .hero-title,
.hero:not(.hero-overdrive-ready) .hero-dek {
  opacity: 0;
}

/* New hero eyebrow — mono micro-label above the headline */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 1.5vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 0.36rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.04);
  max-width: 100%;
  text-align: center;
}

@media (max-width: 480px) {
  .hero-eyebrow {
    letter-spacing: 0.1em;
    padding: 0.32rem 0.7rem;
  }
}

/* Dual-CTA layout — two pills side by side, wrap to stack on mobile */
.hero-cta-dual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
}

/* Ghost variant of the light hero CTA — borderlined, transparent */
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.7rem;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-out-quart);
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
  transform: translateY(-1px);
}

/* Reduced motion — show everything at its final state, no morph, no fade */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-title,
  .hero .hero-dek {
    opacity: 1 !important;
  }
}

.hero-title-line-serif em .hero-title-word {
  /* Inherits italic + serif from <em>; no override needed */
}

/* Sub-copy word wrapping for the entrance stagger */
.hero-dek-word {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-dek {
  max-width: 40rem;
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
}

.hero-cta {
  margin-top: 0.6rem;
}

.btn-light {
  padding: 0 1.4rem;
  min-height: 3.1rem;
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-light:hover {
  background: var(--orange);
  color: var(--white);
}

.hero-scan {
  width: min(30rem, 100%);
  margin-top: 0.5rem;
  display: grid;
  gap: 0.6rem;
}

.hero-scan-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.hero-scan-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.4rem 0.4rem 1.05rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  transition:
    border-color 300ms ease,
    background-color 300ms ease;
}

.hero-scan-row:focus-within {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
}

.hero-scan-prefix {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.hero-scan-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 0.45rem 0;
}

.hero-scan-row input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.hero-scan-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition:
    background-color 300ms ease,
    color 300ms ease,
    transform 300ms var(--ease-out-expo);
}

.hero-scan-submit:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateX(2px);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-trust li {
  display: inline;
}

@media (max-width: 48rem) {
  .hero {
    padding-top: 6.4rem;
  }
  .hero-title {
    font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  }
}

.scan-section {
  position: relative;
  padding: clamp(7rem, 10vw, 12rem) 0;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 82% 70%, rgba(255, 83, 20, 0.2), transparent 28rem),
    linear-gradient(rgba(17, 17, 17, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.055) 1px, transparent 1px),
    var(--cream-soft);
  background-size: auto, 8rem 8rem, 8rem 8rem, auto;
}

.scan-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 0.42fr) minmax(18rem, 0.75fr) minmax(28rem, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.scan-copy {
  display: grid;
  gap: 1.4rem;
}

.scan-points {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.scan-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.scan-points li::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--ink);
}

.scan-panel {
  position: relative;
  display: grid;
  gap: 1.5rem;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2.2rem 6rem rgba(17, 17, 17, 0.08);
}

.scan-entry {
  position: relative;
  z-index: 3;
  padding: clamp(1.2rem, 2vw, 2rem);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.scan-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.scan-form label {
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.scan-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.55rem;
  border: 1px solid var(--ink);
  background: var(--white);
}

.scan-form input {
  min-width: 0;
  min-height: 4.5rem;
  padding: 0 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
}

.scan-form input::placeholder {
  color: rgba(17, 17, 17, 0.38);
}

.scan-form button {
  min-height: 4.5rem;
  padding: 0 1.2rem;
  border: 0;
  background: var(--ink);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 300ms ease, transform 400ms var(--ease-out-expo);
}

.scan-form button:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateX(4px);
}

.scan-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.scan-message {
  min-height: 1.3rem;
  margin: 0;
  color: var(--mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.scan-form.has-error .scan-message {
  color: var(--orange-deep);
}

.scan-results {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: clamp(1.2rem, 2vw, 2rem);
}

.score-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.5rem 0 2rem;
}

.score-line strong {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.9;
  font-weight: 400;
}

.score-line span {
  color: var(--mute-soft);
  font-size: 1.8rem;
  font-weight: 600;
}

.score-bars {
  display: grid;
  gap: 1.1rem;
}

.score-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(7rem, 1fr) 4.5rem;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.score-row div {
  height: 0.36rem;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.12);
}

.score-row i {
  display: block;
  width: calc(var(--score) * 1%);
  height: 100%;
  background: linear-gradient(90deg, var(--ink), var(--orange));
  transform-origin: left;
  transition: width 700ms var(--ease-out-expo);
}

.score-row b {
  color: var(--mute);
  font-weight: 600;
  text-align: right;
}

.scan-orbit {
  position: absolute;
  right: -9rem;
  bottom: -8rem;
  width: 33rem;
  aspect-ratio: 1;
  opacity: 0.42;
  pointer-events: none;
}

.scan-next {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}

.scan-panel.has-run .scan-next {
  opacity: 1;
  transform: translateY(0);
}

.scan-next p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.scan-orbit span {
  position: absolute;
  inset: var(--inset, 0);
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
}

.scan-orbit span:nth-child(1) {
  --inset: 0;
}

.scan-orbit span:nth-child(2) {
  --inset: 3rem;
}

.scan-orbit span:nth-child(3) {
  --inset: 6rem;
}

.scan-orbit b {
  position: absolute;
  right: 29%;
  top: 18%;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--orange);
}

.stats-band {
  padding: 4.2rem 0;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 83, 20, 0.2), transparent 28rem),
    var(--ink);
  color: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-card,
.stat-note {
  position: relative;
  min-height: 10rem;
  padding: 1.4rem 2rem;
  border-left: 1px solid var(--hairline-cream);
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out-expo);
}

.stat-card.is-counted::after {
  transform: scaleX(1);
}

.stat-card:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat-card strong,
.stat-card span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 0.9;
}

.stat-card p,
.stat-note p {
  max-width: 15rem;
  margin: 1rem 0 0;
  color: var(--color-muted-dark);
  font-size: 0.88rem;
  line-height: 1.45;
}

.services-section {
  padding: clamp(4.75rem, 7vw, 8rem) 0 clamp(6rem, 9vw, 10rem);
  background: var(--white);
}

.services-intro,
.section-headline {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.55fr);
  gap: 4rem;
  align-items: end;
}

.services-intro .section-title,
.section-headline .section-title {
  margin-top: 1rem;
  max-width: 12ch;
}

.services-intro {
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.42fr);
  gap: clamp(2rem, 5vw, 7rem);
}

.services-intro .section-title {
  max-width: 16ch;
  font-size: clamp(5rem, 6.4vw, 8.2rem);
  line-height: 0.92;
}

.services-intro .lead {
  margin-bottom: clamp(0.25rem, 1.5vw, 1.25rem);
}

@media (min-width: 981px) {
  .services-intro {
    position: relative;
    display: block;
    min-height: clamp(16rem, 20vw, 21rem);
  }

  .services-intro .section-title {
    max-width: 100%;
    font-size: clamp(4.8rem, 5.2vw, 6.8rem);
  }

  .services-intro .section-title span {
    display: block;
  }

  .services-intro .lead {
    position: absolute;
    right: 0;
    bottom: clamp(1rem, 2.4vw, 2.5rem);
    width: min(28rem, 26vw);
    margin: 0;
  }
}

.service-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.4rem);
  margin-top: clamp(1rem, 2vw, 2rem);
  perspective: 1300px;
}

.service-plane {
  position: relative;
  min-height: clamp(25rem, 31vw, 30rem);
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(120deg, rgba(5, 5, 5, 0.88), rgba(5, 5, 5, 0.56)),
    var(--grad-signal),
    var(--ink);
  color: var(--white);
  transform-style: preserve-3d;
  transform: translateZ(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 220ms ease, border-color 300ms ease;
  will-change: transform;
}

.service-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 4rem 100%;
  opacity: 0.2;
}

.service-plane::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(255, 83, 20, 0.34), transparent 18rem),
    radial-gradient(circle at 10% 100%, rgba(15, 111, 115, 0.28), transparent 18rem);
  opacity: 0.82;
  animation: liquidShift 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.service-plane:nth-child(3) {
  background:
    linear-gradient(120deg, rgba(5, 5, 5, 0.82), rgba(15, 111, 115, 0.62)),
    var(--ink);
}

.service-plane:nth-child(4) {
  background:
    radial-gradient(circle at 100% 100%, rgba(255, 83, 20, 0.8), transparent 55%),
    linear-gradient(120deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.32)),
    var(--ink);
}

.service-plane span,
.service-icon,
.service-plane h3,
.service-plane p {
  position: relative;
  z-index: 3;
  transform: translateZ(34px);
}

.service-plane span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted-dark);
}

.service-plane h3 {
  margin: 11rem 0 1rem;
  max-width: 12rem;
  font-size: 1.05rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.service-icon {
  position: absolute;
  top: 4rem;
  left: 1.5rem;
  right: 1.5rem;
  height: 8rem;
  opacity: 0.9;
}

.service-icon i {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.service-icon:not(.service-icon-grid):not(.service-icon-orbit):not(.service-icon-flow) i {
  width: 3.6rem;
  height: 5.8rem;
  transform: skewY(-8deg);
}

.service-icon:not(.service-icon-grid):not(.service-icon-orbit):not(.service-icon-flow) i:nth-child(1) {
  left: 0;
  top: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

.service-icon:not(.service-icon-grid):not(.service-icon-orbit):not(.service-icon-flow) i:nth-child(2) {
  left: 2.1rem;
  top: 0.55rem;
  background: rgba(255, 83, 20, 0.12);
}

.service-icon:not(.service-icon-grid):not(.service-icon-orbit):not(.service-icon-flow) i:nth-child(3) {
  left: 4.2rem;
  top: 0;
  background: rgba(15, 111, 115, 0.12);
}

.service-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 3.2rem);
  grid-template-rows: repeat(2, 3.2rem);
  gap: 0.55rem;
}

.service-icon-grid i {
  position: static;
  background: rgba(255, 255, 255, 0.06);
}

.service-icon-orbit i:first-child {
  left: 0;
  top: 0;
  width: 7.4rem;
  height: 7.4rem;
  border-radius: 50%;
}

.service-icon-orbit i:last-child {
  left: 4.8rem;
  top: 2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--orange);
}

.service-icon-flow i {
  left: calc(var(--i, 0) * 2.8rem);
  top: calc(var(--i, 0) * 1rem);
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
}

.service-icon-flow i:nth-child(1) {
  --i: 0;
}

.service-icon-flow i:nth-child(2) {
  --i: 1;
}

.service-icon-flow i:nth-child(3) {
  --i: 2;
  background: rgba(255, 83, 20, 0.18);
}

@keyframes liquidShift {
  from {
    transform: translate3d(-2%, -1%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(2%, 1%, 0) rotate(7deg);
  }
}

.service-plane p {
  max-width: 18rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.48;
}

.work-section {
  padding: var(--section) 0;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 0 100%, rgba(255, 83, 20, 0.15), transparent 30rem),
    var(--cream-soft);
}

.work-section .section-title {
  max-width: 13ch;
}

.work-rail {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap: 0.5rem;
  margin-top: 4.5rem;
}

.work-card {
  position: relative;
  min-height: 26rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.02), rgba(5, 5, 5, 0.72));
  pointer-events: none;
}

.work-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.work-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.72;
}

.work-gradient {
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 83, 20, 0.86), transparent 24%),
    linear-gradient(135deg, #111, #f7f5ef 55%, #0f6f73);
}

.work-lines {
  background:
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 24% 80%, rgba(255, 83, 20, 0.72), transparent 30%),
    #10100f;
}

.work-card > div:last-child {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
}

.work-card p {
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.work-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.process-section {
  padding: var(--section) 0;
  background: var(--white);
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.75fr) minmax(0, 1fr);
  gap: 5rem;
}

.process-sticky {
  position: sticky;
  top: 8rem;
  align-self: start;
}

.process-sticky .section-title {
  margin-top: 1rem;
}

.process-list {
  display: grid;
  border-top: 1px solid var(--hairline);
}

.process-step {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 2rem;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.process-step > span {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.9;
  color: var(--orange);
}

.process-step h3 {
  margin: 0 0 0.7rem;
  font-size: 1.8rem;
  line-height: 1.05;
}

.process-step p {
  max-width: 42rem;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.process-step b {
  display: block;
  max-width: 40rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: uppercase;
}

.workspace-section {
  padding: var(--section) 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.72fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}

.workspace-copy .section-title {
  max-width: 10ch;
  margin-top: 1rem;
}

.workspace-copy .lead {
  color: var(--color-muted-dark);
  margin-top: 1.4rem;
}

.workspace-copy .inline-link {
  margin-top: 2rem;
}

.workspace-mock {
  position: relative;
  display: grid;
  grid-template-columns: 14rem 1fr;
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid var(--hairline-cream);
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 83, 20, 0.2), transparent 22rem),
    #10100f;
  box-shadow: 0 4rem 9rem rgba(0, 0, 0, 0.28);
}

.mock-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 0.45rem;
  height: 3.4rem;
  align-items: center;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--hairline-cream);
}

.mock-header span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.mock-header span:first-child {
  background: var(--orange);
}

.mock-sidebar {
  padding: 5.2rem 1.2rem 1.2rem;
  border-right: 1px solid var(--hairline-cream);
}

.mock-sidebar b,
.mock-sidebar p {
  display: block;
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
}

.mock-sidebar p {
  color: var(--color-muted-dark);
}

.mock-main {
  padding: 6rem 2rem 2rem;
}

.mock-main h3 {
  max-width: 28rem;
  margin: 1rem 0 2.5rem;
  font-size: 2rem;
  line-height: 1.08;
}

.mock-answer {
  display: grid;
  gap: 0.8rem;
}

.mock-answer span {
  height: 4.8rem;
  border: 1px solid var(--hairline-cream);
  background: rgba(255, 255, 255, 0.05);
}

.mock-answer span:nth-child(2) {
  width: 82%;
}

.mock-answer span:nth-child(3) {
  width: 62%;
  background: linear-gradient(90deg, rgba(255, 83, 20, 0.28), rgba(255, 255, 255, 0.04));
}

.journal-section {
  padding: var(--section) 0;
  background: var(--white);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.2vw, 1rem);
  margin-top: 4rem;
  background: transparent;
}

.journal-card {
  display: grid;
  min-height: 30rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--white);
  transition: background-color 300ms ease, color 300ms ease;
}

.journal-card:hover {
  background: var(--ink);
  color: var(--white);
}

.journal-card p {
  margin: 1.3rem 1.3rem 4rem;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journal-card h3 {
  margin: 0 1.3rem;
  max-width: 19rem;
  font-size: 1.9rem;
  line-height: 1.02;
}

.journal-card span {
  display: inline-block;
  align-self: end;
  margin: 2rem 1.3rem 1.3rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.journal-media {
  min-height: 12rem;
  border-bottom: 1px solid var(--hairline);
}

.journal-media-orbit {
  background:
    radial-gradient(circle at 48% 50%, var(--ink) 0 20%, transparent 21%),
    radial-gradient(circle at 48% 50%, transparent 0 36%, rgba(17, 17, 17, 0.16) 36.5% 37%, transparent 37.5%),
    radial-gradient(circle at 74% 30%, rgba(255, 83, 20, 0.78), transparent 12%),
    var(--cream-soft);
}

.journal-media-stack {
  background:
    repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.12) 0 1px, transparent 1px 4.6rem),
    radial-gradient(circle at 72% 30%, rgba(255, 83, 20, 0.72), transparent 16%),
    linear-gradient(135deg, rgba(15, 111, 115, 0.4), transparent 50%),
    var(--cream-soft);
}

.journal-media-workspace {
  background:
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 22% 82%, rgba(255, 83, 20, 0.58), transparent 24%),
    var(--ink);
}

.final-cta {
  position: relative;
  padding: var(--section) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 100%, rgba(255, 83, 20, 0.62), transparent 28rem),
    linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    var(--cream-soft);
  background-size: auto, 11rem 11rem, 11rem 11rem, auto;
}

.final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 0.55fr);
  gap: 5rem;
  align-items: end;
}

.final-grid .section-title {
  max-width: 9ch;
  margin-top: 1rem;
}

.final-card {
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-strong);
}

.final-card p {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.site-footer {
  padding: 2.8rem 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
}

.footer-grid {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 2rem;
  align-items: center;
}

.footer-grid img {
  width: 3.4rem;
}

.footer-grid nav,
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: var(--edge);
}

.reel-modal.is-open {
  display: grid;
}

.reel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.86);
  backdrop-filter: blur(14px);
}

.reel-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 70rem);
  aspect-ratio: 16 / 9;
  background: var(--ink);
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.5);
}

.reel-dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.reel-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

@media (min-width: 720px) {
  .section-title {
    font-size: 5rem;
  }
  /* Hero now uses fluid clamp() defined on .hero-title — no breakpoint override needed.
     Removing the old discrete sizes that were capping it at smaller values. */
}

@media (min-width: 1100px) {
  .section-title {
    font-size: 5.8rem;
  }
}

@media (min-width: 1440px) {
  .section-title {
    font-size: 6.6rem;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .nav-links {
    display: none;
  }

  .hero-grid,
  .scan-grid,
  .services-intro,
  .section-headline,
  .process-grid,
  .workspace-grid,
  .final-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 1rem;
  }

  .hero-visual {
    min-height: 30rem;
  }

  .scan-panel {
    border-left: 1px solid var(--hairline-strong);
  }

  .stats-grid,
  .service-stack,
  .work-rail,
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .stat-note {
    border-left: 0;
    border-top: 1px solid var(--hairline-cream);
    padding-left: 0;
  }

  .stat-card:first-child {
    border-top: 0;
  }

  .service-plane,
  .service-plane:nth-child(2),
  .service-plane:nth-child(3),
  .service-plane:nth-child(4) {
    min-height: 25rem;
    margin-top: 0;
    border-left: 1px solid var(--hairline);
    border-top: 0;
  }

  .service-plane:first-child {
    border-top: 1px solid var(--hairline);
  }

  .process-sticky {
    position: static;
  }
}

@media (max-width: 640px) {
  /* Mobile header: hide the nav CTA entirely, center the logo.
     Visitors get CTAs in-content (hero + Tiers + final CTA). */
  .site-header {
    min-height: 4.7rem;
    padding-block: 0.75rem;
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .brand-mark {
    width: auto;
  }

  .brand-mark img {
    height: 2.6rem;
  }

  .nav-cta { display: none !important; }

  /* Below was previously orphaned (no media-query wrapper), which silently
     capped .hero-title at 4.6rem at ALL viewports — defeating the fluid clamp.
     Re-merged into the 640px-and-below mobile bucket where it belongs. */
  .hero {
    padding-top: 5rem;
  }

  .hero-copy {
    padding-block: 2.5rem;
  }

  /* Hero title size on mobile is handled by the fluid clamp() on .hero-title.
     Intentionally NOT overriding font-size here. */

  .section-title {
    font-size: 3.6rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero-visual {
    min-height: 23rem;
  }

  .planet,
  .planet-shadow {
    left: 8%;
    width: 82%;
  }

  .scan-input-row,
  .scan-next {
    grid-template-columns: 1fr;
  }

  .score-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .score-row b {
    text-align: left;
  }

  .workspace-mock {
    grid-template-columns: 1fr;
  }

  .mock-sidebar {
    display: none;
  }

  .process-step {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* End of merged @media (max-width: 640px) block */


/* ============================================================
   DISCOVERY — 6 friction questions + one editorial photo
   ============================================================ */
.discovery-section {
  padding: var(--section) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}
.discovery-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 96px) clamp(32px, 5vw, 80px);
  grid-template-areas:
    "head photo"
    "questions photo";
}
.discovery-head { grid-area: head; max-width: 38ch; }
.discovery-head .section-title { margin-top: 14px; }
.discovery-head .lead { margin-top: 18px; max-width: 36ch; }
.discovery-photo {
  grid-area: photo;
  margin: 0;
  align-self: stretch;
  min-height: 420px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-soft);
}
.discovery-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.78);
  display: block;
}
.discovery-questions {
  grid-area: questions;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  align-self: start;
}
.discovery-q {
  padding: 28px 28px 28px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.discovery-q:nth-child(even) {
  padding-left: 28px;
  padding-right: 0;
  border-left: 1px solid var(--hairline);
}
.discovery-q-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
  font-weight: 500;
}
.discovery-q-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  max-width: 32ch;
}

@media (max-width: 900px) {
  .discovery-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "photo"
      "questions";
  }
  .discovery-photo { min-height: 320px; }
  .discovery-questions { grid-template-columns: 1fr; }
  .discovery-q:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }
}


/* ============================================================
   AI LADDER — editorial 5-rung explainer
   ============================================================ */
.ladder-section {
  padding: var(--section) 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
}
.ladder-head {
  max-width: 920px;
}
.ladder-head .lead {
  margin-top: 20px;
  max-width: 64ch;
}
.ladder-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(56px, 7vh, 96px);
  padding-bottom: clamp(56px, 7vh, 96px);
  border-bottom: 1px solid var(--hairline);
}
.ladder-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-top: 18px;
}
.ladder-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 2px;
  background: var(--orange);
}
.ladder-stat strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ladder-stat b {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.ladder-stat p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 28ch;
}

.ladder-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(48px, 6vh, 80px);
}
.ladder-rung {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3.5vh, 44px) clamp(28px, 3vw, 48px);
  border-radius: var(--radius-sm);
  transition: transform 380ms var(--ease-out-expo);
  background: var(--white);
}
.ladder-rung:hover { transform: translateX(6px); }
.ladder-rung-1 { background: var(--white); }
.ladder-rung-2 { background: var(--warm-white, var(--white-soft)); }
.ladder-rung-3 { background: var(--cream); }
.ladder-rung-4 { background: var(--cream-deep); }
.ladder-rung-5 { background: var(--ink); color: var(--white); }

.ladder-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ladder-rung-5 .ladder-num { color: var(--white); }
.ladder-meat h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
  color: inherit;
}
.ladder-meat p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 56ch;
}
.ladder-rung-5 .ladder-meat p { color: var(--color-muted-dark, rgba(255,255,255,0.7)); }
.ladder-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.ladder-rung-5 .ladder-tag { color: var(--color-muted-dark, rgba(255,255,255,0.6)); }

.ladder-cta {
  margin-top: clamp(40px, 5vh, 64px);
  text-align: center;
}

@media (max-width: 800px) {
  .ladder-stats { grid-template-columns: 1fr; gap: 32px; }
  .ladder-rung {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 14px 18px;
  }
  .ladder-num { font-size: 44px; }
  .ladder-tag {
    grid-column: 2;
    grid-row: 2;
  }
  .ladder-meat {
    grid-column: 2;
    grid-row: 1;
  }
}


/* ============================================================
   THREE TIERS — T1 / T2 / T3 cards with pricing
   ============================================================ */
.tiers-section {
  padding: var(--section) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}
.tiers-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(64px, 8vh, 96px);
}
.tiers-intro .section-title { margin-top: 12px; }
.tiers-intro .lead { max-width: 38ch; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 28px);
  align-items: stretch;
}
.tier-card {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vh, 36px);
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--white);
  position: relative;
  transition: transform 420ms var(--ease-out-expo), box-shadow 420ms;
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgba(17, 17, 17, 0.18);
}
.tier-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--orange);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.tier-card-1 { background: var(--white); }
.tier-card-2 { background: var(--cream-soft); }
.tier-card-3 {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.tier-card-3::before { background: var(--orange); }

.tier-card-head { display: flex; flex-direction: column; gap: 12px; }
.tier-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin: 0;
}
.tier-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}
.tier-blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  max-width: 36ch;
}
.tier-card-3 .tier-blurb { color: var(--color-muted-dark, rgba(255,255,255,0.7)); }

.tier-pricing {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tier-card-3 .tier-pricing {
  border-top-color: rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.18);
}
.tier-price-row { display: flex; flex-direction: column; gap: 4px; }
.tier-price-row .micro-label {
  margin: 0;
  color: var(--mute);
}
.tier-card-3 .tier-price-row .micro-label { color: var(--color-muted-dark, rgba(255,255,255,0.6)); }
.tier-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
}
.tier-price-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute);
  font-style: italic;
  margin: 0;
}
.tier-card-3 .tier-price-note { color: var(--color-muted-dark, rgba(255,255,255,0.6)); }

.tier-included { display: flex; flex-direction: column; gap: 12px; }
.tier-included .micro-label { margin: 0; color: var(--mute); }
.tier-card-3 .tier-included .micro-label { color: var(--color-muted-dark, rgba(255,255,255,0.6)); }
.tier-included ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tier-included li {
  font-size: 14px;
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
  color: inherit;
}
.tier-included li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 1px;
  background: var(--orange);
}

.tier-best {
  margin: auto 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier-card-3 .tier-best { color: var(--white); }
.tier-best .micro-label {
  color: var(--orange);
  margin: 0;
}

.tier-foot {
  margin-top: clamp(40px, 5vh, 64px);
  text-align: center;
}

@media (max-width: 1000px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tiers-intro { grid-template-columns: 1fr; }
}


/* ============================================================
   TRUTH — What it is / What it isn't (two-column honest framing)
   ============================================================ */
.truth-section {
  padding: var(--section) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}
.truth-head {
  max-width: 880px;
}
.truth-head .lead {
  margin-top: 18px;
  max-width: 60ch;
}
.truth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  margin-top: clamp(56px, 7vh, 96px);
}
.truth-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.truth-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
}
.truth-col-isnt .truth-label {
  color: var(--mute);
  border-bottom-color: var(--hairline-strong);
}
.truth-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.truth-item h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.truth-item p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 800px) {
  .truth-grid { grid-template-columns: 1fr; gap: 48px; }
}


/* ============================================================
   WHY US — 4 differentiators
   ============================================================ */
.why-section {
  padding: var(--section) 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
}
.why-head {
  max-width: 880px;
}
.why-head .lead {
  margin-top: 18px;
  max-width: 60ch;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 28px);
  margin-top: clamp(56px, 7vh, 96px);
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--hairline);
  position: relative;
  transition: transform 380ms var(--ease-out-expo), border-color 240ms;
}
.why-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
}
.why-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--orange);
}
.why-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.why-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  max-width: 50ch;
}

@media (max-width: 800px) {
  .why-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   FINAL CTA — email-forward closer
   ============================================================ */
.final-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.final-email {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color 240ms;
  display: inline-block;
  margin: 4px 0 14px 0;
}
.final-email:hover { color: var(--orange-deep); }
.final-card .btn-plain { font-size: 13px; padding-left: 0; }


/* ============================================================
   ============================================================
                  MOBBIN-INFORMED PATTERN LIBRARY
   Shared utilities used across all v2 sections.
   ============================================================
   ============================================================ */

/* ───── Editorial section title (centered, sentence case, italic serif accent) ───── */
.editorial-head {
  max-width: 56rem;
  margin: 0 auto clamp(2.5rem, 4vw, 4.5rem);
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.editorial-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.08);
  border: 1px solid rgba(255, 83, 20, 0.2);
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-eyebrow .dot {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--orange);
}

.editorial-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
  max-width: 22ch;
}

.editorial-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.editorial-dek {
  margin: 0;
  max-width: 46ch;
  color: var(--mute);
  font-size: clamp(0.98rem, 1.05vw, 1.1rem);
  line-height: 1.6;
}

/* ───── Pill-shaped sub-nav rail (Causal pattern) ───── */
.subnav-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem;
  margin: 0 auto clamp(2rem, 3vw, 3rem);
  background: rgba(17, 17, 17, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

.subnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.05rem;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease;
}

.subnav-tab .subnav-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--orange);
}

.subnav-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}

.subnav-tab.is-active {
  background: var(--ink);
  color: var(--white);
}

.subnav-tab.is-active .subnav-num {
  color: var(--orange-tint);
}

/* ───── Line-icon (decorative SVG framing) ───── */
.line-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 83, 20, 0.08);
  color: var(--orange);
}

.line-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───── Illustrated card (icon top, headline, body) ───── */
.illus-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.6rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color 300ms ease, transform 400ms var(--ease-out-expo), box-shadow 400ms ease;
}

.illus-card:hover {
  border-color: rgba(255, 83, 20, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -30px rgba(17, 17, 17, 0.18);
}

.illus-card-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.illus-card-question {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.illus-card-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mute);
}

/* ───── Pricing tier card (Wise/Quicken pattern) ───── */
.tier-card-v2 {
  position: relative;
  display: grid;
  gap: 1.3rem;
  padding: 1.8rem 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color 300ms ease, transform 400ms var(--ease-out-expo), box-shadow 400ms ease;
}

.tier-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -40px rgba(17, 17, 17, 0.2);
}

.tier-card-v2.is-featured {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 83, 20, 0.12);
}

.tier-card-v2.is-inverted {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.tier-card-v2.is-inverted .tier-card-blurb,
.tier-card-v2.is-inverted .tier-feature-li {
  color: rgba(255, 255, 255, 0.78);
}

.tier-mark-v2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}

.tier-mark-v2 b {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--orange);
  font-weight: 400;
}

.tier-name-v2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: none;
}

.tier-blurb-v2 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mute);
}

.tier-price-v2 {
  display: grid;
  gap: 0.15rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.tier-card-v2.is-inverted .tier-price-v2 {
  border-color: rgba(255, 255, 255, 0.16);
}

.tier-price-pre {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.tier-card-v2.is-inverted .tier-price-pre { color: rgba(255, 255, 255, 0.55); }

.tier-price-amount {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.2rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "opsz" 144;
}

.tier-card-v2.is-inverted .tier-price-amount { color: var(--white); }

.tier-price-plus {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mute);
  margin-top: 0.15rem;
}

.tier-card-v2.is-inverted .tier-price-plus { color: rgba(255, 255, 255, 0.65); }

.tier-features-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.tier-features-v2 li {
  display: grid;
  grid-template-columns: 0.7rem 1fr;
  gap: 0.55rem;
  align-items: baseline;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink);
}

.tier-features-v2 li::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  top: 0.35rem;
}

.tier-card-v2.is-inverted .tier-features-v2 li { color: var(--white); }

.tier-best-v2 {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mute);
  padding-top: 0.4rem;
  border-top: 1px solid var(--hairline);
}

.tier-best-v2 b {
  font-weight: 600;
  color: var(--ink);
}

.tier-card-v2.is-inverted .tier-best-v2 { color: rgba(255, 255, 255, 0.65); border-color: rgba(255, 255, 255, 0.16); }
.tier-card-v2.is-inverted .tier-best-v2 b { color: var(--white); }

.tier-card-cta {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.1rem;
  min-height: 2.7rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 300ms ease, transform 400ms var(--ease-out-expo);
}

.tier-card-cta:hover {
  background: var(--orange);
  transform: translateY(-1px);
}

.tier-card-v2.is-inverted .tier-card-cta {
  background: var(--white);
  color: var(--ink);
}

.tier-card-v2.is-inverted .tier-card-cta:hover {
  background: var(--orange);
  color: var(--white);
}

/* ───── Chunky serif stat number (Stripe / Causal pattern) ───── */
.stat-figure {
  display: grid;
  gap: 0.45rem;
  text-align: left;
}

.stat-figure-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3.4rem, 6.2vw, 5.4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.stat-figure-num em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.36em;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: 0;
  vertical-align: 0.35em;
  margin-left: 0.05em;
}

.stat-figure-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.stat-figure-dek {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mute);
  max-width: 26ch;
}

/* ───── Award/social-proof badges row (Monarch pattern) ───── */
.proof-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin: clamp(1.5rem, 3vw, 2.4rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  width: 100%;
  max-width: 64rem;
}

@media (max-width: 56rem) {
  .proof-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 32rem) {
  .proof-row { grid-template-columns: 1fr; }
}

.proof-badge {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1.1rem;
  text-align: left;
  background: rgba(251, 251, 249, 0.06);
  border: 1px solid rgba(251, 251, 249, 0.14);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease-out-quart), background-color 0.3s var(--ease-out-quart);
}

.proof-badge:hover {
  border-color: rgba(255, 83, 20, 0.55);
  background: rgba(251, 251, 249, 0.10);
}

.proof-badge-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  font-variation-settings: "SOFT" 50, "opsz" 144;
}

.proof-badge-source {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-tint);
}

/* When proof-row appears outside the dark final-cta (light surface) */
.is-light .proof-badge,
:not(.final-cta-v2) > .proof-row .proof-badge {
  background: var(--white);
  border-color: var(--hairline);
}

:not(.final-cta-v2) > .proof-row .proof-badge-label { color: var(--ink); }
:not(.final-cta-v2) > .proof-row .proof-badge-source { color: var(--mute); }

/* ───── Promo strip above nav (Monarch pattern) ───── */
.promo-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  height: var(--promo-h, 2.2rem);
  padding: 0 var(--edge);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.promo-strip-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 20, 0.22);
  flex-shrink: 0;
}

.promo-strip a {
  color: var(--orange-tint);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.promo-strip a:hover { color: var(--white); }

body.has-promo-strip .site-header { top: var(--promo-h, 2.2rem); }

@media (max-width: 40rem) {
  :root { --promo-h: 1.9rem; }
  .promo-strip { font-size: 0.62rem; letter-spacing: 0.05em; padding-inline: 0.6rem; gap: 0.5rem; }
}

@media (max-width: 28rem) {
  :root { --promo-h: 2.4rem; }
  .promo-strip { font-size: 0.58rem; padding-inline: 0.4rem; line-height: 1.3; }
}

/* ───── Carousel (scroll-snap horizontal) ───── */
.carousel-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(18rem, 32vw, 26rem);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--edge) 1rem;
  margin: 0 calc(var(--edge) * -1);
}

.carousel-rail::-webkit-scrollbar { display: none; }

.carousel-card {
  scroll-snap-align: start;
  display: grid;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.carousel-card-media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-soft);
}

.carousel-card-media img,
.carousel-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out-expo);
}

.carousel-card:hover .carousel-card-media img,
.carousel-card:hover .carousel-card-media video {
  transform: scale(1.04);
}

.carousel-card-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.carousel-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  max-width: var(--max);
  padding: 0 var(--edge);
}

.carousel-dots {
  display: flex;
  gap: 0.4rem;
}

.carousel-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--hairline-strong);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 300ms ease, transform 300ms ease;
}

.carousel-dot.is-active { background: var(--orange); transform: scale(1.3); }

.carousel-arrows {
  display: inline-flex;
  gap: 0.4rem;
}

.carousel-arrow {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

.carousel-arrow:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* ───── Journal category pill (orange) ───── */
.journal-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.1);
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ───── Section container (used by sub-pages) ───── */
.sp-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.sp-section + .sp-section { border-top: 1px solid var(--hairline); }

/* ============================================================
   V2 SECTION-SPECIFIC STYLES
   ============================================================ */

/* Discovery v2 — centered editorial title + 3x2 illustrated card grid */
.discovery-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.discovery-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

@media (max-width: 64rem) {
  .discovery-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .discovery-grid-v2 { grid-template-columns: 1fr; }
}

/* Process v2 — Causal sub-nav rail + content panel */
.process-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
}

.process-panel {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
}

.process-panel-copy {
  display: grid;
  gap: 1.1rem;
}

.process-panel-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3.4rem, 5vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--orange);
  margin: 0;
}

.process-panel-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: none;
}

.process-panel-dek {
  margin: 0;
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36ch;
}

.process-panel-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}

.process-panel-deliverables {
  margin: 0;
  display: grid;
  gap: 0.7rem;
  list-style: none;
  padding: 0;
}

.process-panel-deliverables li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
}

.process-panel-deliverables li:last-child { border-bottom: none; }

.process-panel-deliverables li b {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--orange);
}

.process-panel-deliverables li span {
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Active pane: 2-column layout with imagery on the right */
.process-content {
  display: none;
}

.process-content.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.process-panel-body {
  display: grid;
  gap: 1.6rem;
}

.process-panel-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 24px 60px -40px rgba(14, 15, 18, 0.32);
}

.process-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.84) saturate(0.96);
  transform: scale(1.02);
  transition: transform 1.6s var(--ease-out-quart);
}

.process-content.is-active .process-panel-media img {
  transform: scale(1);
}

.process-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 18, 0) 60%, rgba(14, 15, 18, 0.55));
  pointer-events: none;
}

.process-panel-media-cap {
  position: absolute;
  z-index: 2;
  bottom: 1.1rem;
  left: 1.1rem;
  right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 251, 249, 0.85);
}

@media (max-width: 60rem) {
  .process-content.is-active { grid-template-columns: 1fr; }
  .process-panel-media { aspect-ratio: 16/10; }
}

/* Tiers v2 — Wise/Quicken pricing cards */
.tiers-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.tiers-toggle-row {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.tiers-toggle {
  display: inline-flex;
  background: rgba(17, 17, 17, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.3rem;
  gap: 0.2rem;
}

.tiers-toggle button {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease;
}

.tiers-toggle button.is-active {
  background: var(--ink);
  color: var(--white);
}

.tiers-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.tiers-foot-v2 {
  text-align: center;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: 0 var(--edge);
  color: var(--mute);
  font-size: 0.9rem;
}

.tiers-foot-v2 a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin-left: 0.4rem;
}

@media (max-width: 64rem) {
  .tiers-grid-v2 { grid-template-columns: 1fr; max-width: 32rem; }
}

/* Stats v2 — chunky serif numbers */
.stats-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.stats-section-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh-citrus);
  opacity: 0.34;
  z-index: 0;
}

.stats-section-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 320px 320px;
  opacity: 0.10;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

.stats-section-v2 > * { position: relative; z-index: 2; }
.stats-grid-v2 { position: relative; z-index: 2; }

.stats-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  align-items: start;
}

@media (max-width: 56rem) {
  .stats-grid-v2 { grid-template-columns: 1fr; }
}

/* Truth v2 — illustrated cards */
.truth-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.truth-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.truth-col-v2 {
  display: grid;
  gap: 1.4rem;
}

.truth-col-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}

.truth-col-v2.is-positive .truth-col-label { color: var(--orange); }
.truth-col-v2.is-negative .truth-col-label { color: var(--mute); }

.truth-card-v2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.2rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  align-items: start;
}

.truth-card-v2.is-negative .line-icon {
  background: rgba(17, 17, 17, 0.05);
  color: var(--mute);
}

.truth-card-text h4 {
  margin: 0 0 0.35rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.truth-card-text p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mute);
}

@media (max-width: 56rem) {
  .truth-grid-v2 { grid-template-columns: 1fr; }
}

/* Why us v2 — 2x2 grid w/ icons */
.why-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
}

.why-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.why-card-v2 {
  display: grid;
  gap: 0.9rem;
  padding: 1.8rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color 300ms ease;
}

.why-card-v2:hover { border-color: rgba(255, 83, 20, 0.32); }

.why-card-v2 h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
}

.why-card-v2 h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.why-card-v2 p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mute);
}

@media (max-width: 56rem) {
  .why-grid-v2 { grid-template-columns: 1fr; }
}

/* =========================================================================
   AI Ladder v2 — scroll-stacked, climbed-from-bottom
   1 appears first (sits at top initially), each new rung pushes earlier
   ones down. Final state: 5 at top, 1 at bottom.
   ========================================================================= */
.ladder-v2 {
  position: relative;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.ladder-v2-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 8rem) var(--edge) clamp(5rem, 9vw, 8rem);
}

.ladder-v2-header { text-align: center; margin: 0 auto clamp(3rem, 6vw, 5rem); }

/* Stage = pinned area while user climbs.
   --rung-h: height of one rung row.
   --rung-gap: vertical gap between rungs.
   --stack-step: rung-h + gap, used as offset between stacked rungs. */
.ladder-v2-stage {
  --rung-h: 6.4rem;
  --rung-gap: 0.7rem;
  --stack-step: calc(var(--rung-h) + var(--rung-gap));
  position: relative;
  height: calc(var(--stack-step) * 5 + 2rem);
  display: grid;
  grid-template-columns: minmax(3rem, 4rem) 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}

@media (max-width: 48rem) {
  .ladder-v2-stage {
    --rung-h: 8rem;
    grid-template-columns: 1fr;
  }
}

.ladder-v2-axis {
  position: sticky;
  top: 30vh;
  display: grid;
  gap: 0.8rem;
  justify-items: end;
  align-items: stretch;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  height: calc(var(--stack-step) * 5);
  align-content: space-between;
  text-align: right;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (max-width: 48rem) { .ladder-v2-axis { display: none; } }

.ladder-v2-axis-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, var(--orange), var(--hairline));
  align-self: stretch;
  margin: 0.3rem 0;
}

.ladder-v2-track {
  position: relative;
  height: 100%;
}

.ladder-v2-rung {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.2rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  min-height: var(--rung-h);
  box-shadow: 0 24px 60px -40px rgba(14, 15, 18, 0.18);
  transition: border-color 300ms ease, background-color 300ms ease;
  opacity: 0;
  transform: translateY(-18px);
  will-change: transform, opacity;
}

.ladder-v2-rung.is-current {
  border-color: var(--orange);
  background: rgba(255, 83, 20, 0.04);
}

.ladder-v2-rung-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--orange);
  font-variation-settings: "SOFT" 70, "opsz" 144;
}

.ladder-v2-rung-meat h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
}

.ladder-v2-rung-meat p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mute);
}

.ladder-v2-rung-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .ladder-v2-rung { grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1rem 1.1rem; }
  .ladder-v2-rung-tag { grid-column: 2; justify-self: start; margin-top: 0.4rem; }
}

/* Fallback: if JS doesn't fire (or on mobile), show all rungs stacked normally */
.no-ladder-anim .ladder-v2-rung {
  position: relative;
  opacity: 1;
  transform: none;
  margin-bottom: var(--rung-gap);
}

.no-ladder-anim .ladder-v2-track { height: auto; }

/* On mobile, also let the stage height collapse to its content
   (instead of holding the reserved scroll-pin height = giant empty gap). */
@media (max-width: 48rem) {
  .no-ladder-anim .ladder-v2-stage { height: auto; }
}

/* Work v2 — carousel section */
.work-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
}

/* Final CTA v2 — add proof row */
.final-cta-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--ink);
  color: var(--white);
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.final-cta-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh-ink);
  opacity: 0.62;
  z-index: 0;
}

.final-cta-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 320px 320px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

.final-cta-v2 .editorial-eyebrow { color: var(--orange-tint); }
.final-cta-v2 .editorial-title { color: var(--white); }
.final-cta-v2 .editorial-title em { color: var(--orange); }
.final-cta-v2 .editorial-dek { color: rgba(255, 255, 255, 0.72); }
.final-cta-v2 .btn-dark {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.final-cta-v2 .btn-dark:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }
.final-cta-v2 .tiers-foot-v2 { color: rgba(255, 255, 255, 0.6); }
.final-cta-v2 .tiers-foot-v2 a { color: var(--orange-tint); }

.final-cta-v2-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
}

.final-cta-v2-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.final-cta-v2-email {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--orange);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.final-cta-v2-email:hover { color: var(--orange-deep); }

/* Journal v2 — pills + image polish */
.journal-section-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.journal-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.journal-card-v2 {
  display: grid;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
}

.journal-card-v2-media {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-soft);
  position: relative;
}

.journal-card-v2-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 60%, rgba(17, 17, 17, 0.18));
  transition: background 400ms ease;
}

.journal-card-v2:hover .journal-card-v2-media::after { background: linear-gradient(180deg, rgba(17, 17, 17, 0) 50%, rgba(255, 83, 20, 0.25)); }

.journal-card-v2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out-expo);
}

.journal-card-v2:hover .journal-card-v2-media img { transform: scale(1.04); }

.journal-card-v2 h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-transform: none;
}

.journal-card-v2 > span:first-of-type,
.journal-card-v2 .journal-pill {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.journal-card-v2-blurb {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mute);
}

.journal-card-v2-cta {
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ink);
  align-self: start;
  transition: gap 0.3s var(--ease-out-quart), color 0.3s ease, border-color 0.3s ease;
}

.journal-card-v2:hover .journal-card-v2-cta {
  gap: 1rem;
  color: var(--orange) !important;
  border-bottom-color: var(--orange);
}

@media (max-width: 56rem) {
  .journal-grid-v2 { grid-template-columns: 1fr; }
}

/* ───── Tier sub-page hero ───── */
.tp-hero {
  position: relative;
  padding: 9rem var(--edge) clamp(4rem, 7vw, 6rem);
  background: var(--cream-soft);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 1.4rem;
  text-align: center;
  justify-items: center;
}

.tp-hero-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.tp-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 18ch;
  text-transform: none;
}

.tp-hero-dek {
  margin: 0;
  color: var(--mute);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  max-width: 48ch;
}

.tp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Tier sub-page body sections */
.tp-section {
  padding: clamp(4rem, 8vw, 6.5rem) var(--edge);
  border-top: 1px solid var(--hairline);
  background: var(--white);
}

.tp-section.is-alt { background: var(--cream-soft); }

.tp-section-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.tp-two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 56rem) {
  .tp-two-col { grid-template-columns: 1fr; }
}

.tp-col-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: none;
}

.tp-col-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}

.tp-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.tp-feature-list li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hairline);
}

.tp-feature-list li:last-child { border-bottom: none; }

.tp-feature-list li::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background: var(--orange);
  border-radius: 50%;
  position: relative;
  top: 0.25rem;
}

.tp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.tp-price-block {
  padding: 1.4rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.tp-price-block strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.4rem 0 0.3rem;
}

.tp-price-block p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mute);
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 48rem) {
  .tp-pricing-grid { grid-template-columns: 1fr; }
}

/* Journal index */
.journal-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

@media (max-width: 64rem) {
  .journal-index-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .journal-index-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Case Study sub-pages (/cases/*.html)
   Editorial monograph format — hero / context / shipped / showcase / cta
   ========================================================================= */
.cs-hero {
  position: relative;
  padding: 7rem var(--edge) clamp(3rem, 5vw, 5rem);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cs-hero-bg, var(--grad-mesh-ink));
  opacity: 0.48;
  z-index: 0;
}

.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 320px 320px;
  opacity: 0.20;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

.cs-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}

@media (max-width: 56rem) {
  .cs-hero-inner { grid-template-columns: 1fr; }
}

.cs-hero-content {
  display: grid;
  gap: 1.4rem;
}

.cs-hero-mark {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-tint);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.cs-hero-mark::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--orange);
}

.cs-hero-title {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 14ch;
  font-variation-settings: "SOFT" 30, "opsz" 144;
}

.cs-hero-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 300;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.cs-hero-dek {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
}

.cs-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 40rem) {
  .cs-hero-meta { grid-template-columns: repeat(2, 1fr); }
}

.cs-hero-meta dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.4rem;
}

.cs-hero-meta dd {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--white);
  margin: 0;
}

.cs-hero-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65);
}

.cs-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 60%, rgba(17, 17, 17, 0.55));
  pointer-events: none;
}

/* Section scaffolding */
.cs-section {
  padding: clamp(4rem, 8vw, 7rem) var(--edge);
  border-top: 1px solid var(--hairline);
  background: var(--white);
  position: relative;
}

.cs-section.is-cream { background: var(--cream-soft); }
.cs-section.is-ink { background: var(--ink); color: var(--white); border-top-color: transparent; }
.cs-section.is-ink .editorial-eyebrow { color: var(--orange-tint); }
.cs-section.is-ink .editorial-title em { color: var(--orange); }
.cs-section.is-ink .editorial-dek { color: rgba(255, 255, 255, 0.72); }

.cs-section-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.cs-two-col {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 56rem) {
  .cs-two-col { grid-template-columns: 1fr; }
}

.cs-body p {
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.cs-section.is-ink .cs-body p { color: rgba(255, 255, 255, 0.82); }

.cs-body p:last-child { margin-bottom: 0; }

.cs-body strong {
  font-weight: 600;
  color: var(--ink);
}

.cs-section.is-ink .cs-body strong { color: var(--white); }

/* Deliverables grid — 4–6 cards */
.cs-deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 64rem) { .cs-deliverables { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .cs-deliverables { grid-template-columns: 1fr; } }

.cs-deliverable {
  padding: 1.6rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: border-color 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quart);
}

.cs-deliverable:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.cs-section.is-cream .cs-deliverable { background: var(--white); }
.cs-section.is-ink .cs-deliverable {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.cs-deliverable-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.cs-deliverable h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cs-section.is-ink .cs-deliverable h4 { color: var(--white); }

.cs-deliverable p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mute);
}

.cs-section.is-ink .cs-deliverable p { color: rgba(255, 255, 255, 0.65); }

/* Numbered figures (used sparingly, no fabrication — facts only) */
.cs-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2rem;
}

@media (max-width: 56rem) { .cs-facts { grid-template-columns: 1fr; } }

.cs-fact {
  background: var(--white);
  padding: 1.6rem 1.4rem;
  display: grid;
  gap: 0.4rem;
}

.cs-section.is-cream .cs-fact { background: var(--cream-soft); }

.cs-fact-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.cs-fact-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 70, "opsz" 144;
}

/* Showcase: visual outputs (2-3 large images, asymmetric grid) */
.cs-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 56rem) { .cs-showcase { grid-template-columns: 1fr; } }

.cs-showcase-tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--cream);
}

.cs-showcase-tile.is-tall { aspect-ratio: 3/4; }
.cs-showcase-tile.is-wide { aspect-ratio: 16/9; }

.cs-showcase-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-quart);
}

.cs-showcase-tile:hover img { transform: scale(1.03); }

.cs-showcase-tile-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(0deg, rgba(17, 17, 17, 0.78), transparent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.8rem;
}

.cs-showcase-stack {
  display: grid;
  gap: 1rem;
}

/* Pull quote */
.cs-quote {
  padding: clamp(4rem, 8vw, 7rem) var(--edge);
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}

.cs-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh-warm);
  opacity: 0.22;
  pointer-events: none;
}

.cs-quote-inner {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  text-align: left;
}

.cs-quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 8rem;
  line-height: 0.6;
  color: var(--orange);
  display: block;
  margin-bottom: -0.5rem;
}

.cs-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 50, "opsz" 144;
}

.cs-quote cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Related work footer (link to other case studies) */
.cs-related {
  padding: clamp(4rem, 8vw, 6.5rem) var(--edge);
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.cs-related-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.cs-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 56rem) { .cs-related-grid { grid-template-columns: 1fr; } }

.cs-related-card {
  position: relative;
  display: grid;
  gap: 0.8rem;
  padding: 1.4rem;
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart);
}

.cs-related-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
}

.cs-related-card-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream);
}

.cs-related-card-media img { width: 100%; height: 100%; object-fit: cover; }

.cs-related-card-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.cs-related-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-related-card h4 em { font-style: italic; color: var(--orange); }

.cs-related-card-arrow {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* =========================================================================
   Home: Full-bleed editorial work showcase (Pentagram / W+K pattern)
   Each case = wide photo + content alongside, alternating L/R.
   ========================================================================= */
.work-feature-stack {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.work-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: 0 var(--edge);
  max-width: var(--max);
  margin: 0 auto;
}

.work-feature.is-flipped { grid-template-columns: 1fr 1.45fr; }
.work-feature.is-flipped .work-feature-media { order: 2; }
.work-feature.is-flipped .work-feature-content { order: 1; }

@media (max-width: 64rem) {
  .work-feature,
  .work-feature.is-flipped { grid-template-columns: 1fr; gap: 1.5rem; }
  .work-feature.is-flipped .work-feature-media { order: 0; }
  .work-feature.is-flipped .work-feature-content { order: 1; }
}

.work-feature-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
}

@media (max-width: 64rem) {
  .work-feature-media { aspect-ratio: 16/10; }
}

.work-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out-quart);
}

.work-feature:hover .work-feature-media img,
.work-feature:focus-within .work-feature-media img {
  transform: scale(1.04);
}

.work-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 18, 0) 60%, rgba(14, 15, 18, 0.4));
  pointer-events: none;
}

.work-feature-tag {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 1;
  padding: 0.4rem 0.8rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
}

.work-feature-content {
  display: grid;
  gap: 1.1rem;
  align-content: center;
  padding: 1rem 0;
}

.work-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}

.work-feature-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--orange);
}

.work-feature-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "opsz" 144;
  max-width: 18ch;
}

.work-feature-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 320;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.work-feature-blurb {
  margin: 0;
  font-size: clamp(0.98rem, 1.12vw, 1.1rem);
  line-height: 1.55;
  color: var(--mute);
  max-width: 42ch;
}

.work-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.work-feature-meta dt {
  display: inline;
  color: var(--mute-soft);
  margin: 0;
}

.work-feature-meta dd {
  display: inline;
  color: var(--ink);
  margin: 0 1rem 0 0.4rem;
}

.work-feature-cta {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  align-self: start;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ink);
  transition: gap 0.3s var(--ease-out-quart), color 0.3s ease;
}

.work-feature:hover .work-feature-cta {
  gap: 1.1rem;
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* Legacy keep — used elsewhere (case-study related-work) */
.work-cases-grid {
  max-width: var(--max);
  margin: 2.5rem auto 0;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

@media (max-width: 56rem) { .work-cases-grid { grid-template-columns: 1fr; } }

.work-case-card {
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding: 1.4rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-quart), border-color 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
}

.work-case-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 30px 70px -40px rgba(17, 17, 17, 0.35);
}

.work-case-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
}

.work-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-quart);
}

.work-case-card:hover .work-case-media img { transform: scale(1.04); }

.work-case-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0.5));
  pointer-events: none;
}

.work-case-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.75rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
}

.work-case-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.4rem;
}

.work-case-client {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.work-case-arrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.3s var(--ease-out-quart);
}

.work-case-card:hover .work-case-arrow { transform: translateX(4px); }

.work-case-title {
  margin: 0;
  padding: 0 0.4rem 0.6rem;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "opsz" 144;
}

.work-case-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 320;
  font-variation-settings: "SOFT" 70, "opsz" 144;
}

/* =========================================================================
   Editorial pull-quote band (between sections)
   ========================================================================= */
.pull-quote-band {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--cream-soft);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}

.pull-quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh-citrus);
  opacity: 0.32;
  z-index: 0;
}

.pull-quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 340px 340px;
  opacity: 0.11;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

.pull-quote-inner {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  margin: 0 auto;
}

.pull-quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 14vw, 12rem);
  line-height: 0.5;
  color: var(--orange);
  display: block;
  margin-bottom: 0.5rem;
}

.pull-quote-band blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: "SOFT" 50, "opsz" 144;
}

.pull-quote-band blockquote em {
  font-style: italic;
  color: var(--orange);
  font-weight: 320;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.pull-quote-attribution {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.pull-quote-attribution::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--ink);
}

/* =========================================================================
   Services section — black cards on white, orange icon accents.
   The disciplines we deliver: brand, web/product, marketing automation, AI.
   ========================================================================= */
.services-section {
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.services-section .editorial-head {
  max-width: 48rem;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.services-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

@media (max-width: 64rem) { .services-grid { grid-template-columns: 1fr; } }

/* Five-card variant — 3 wide on top, 2 wide on bottom (each bottom card 1.5×) */
.services-grid--five {
  grid-template-columns: repeat(6, 1fr);
}
.services-grid--five .service-card { grid-column: span 2; }
.services-grid--five .service-card:nth-child(4),
.services-grid--five .service-card:nth-child(5) { grid-column: span 3; }

@media (max-width: 76rem) {
  .services-grid--five { grid-template-columns: repeat(2, 1fr); }
  .services-grid--five .service-card,
  .services-grid--five .service-card:nth-child(4),
  .services-grid--five .service-card:nth-child(5) { grid-column: span 1; }
  .services-grid--five .service-card:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
  .services-grid--five { grid-template-columns: 1fr; }
  .services-grid--five .service-card,
  .services-grid--five .service-card:nth-child(4),
  .services-grid--five .service-card:nth-child(5) { grid-column: span 1; }
}

/* =============================================================================
   TWO-PILLAR SERVICES LAYOUT
   Pillar 01 (Design-driven engineering) — 3 cards
   Pillar 02 (AI made practical) — 2 cards
   ============================================================================= */

.services-pillars {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(3rem, 5vw, 4.5rem);
}

.services-pillar {
  display: grid;
  gap: clamp(1.6rem, 2.6vw, 2.4rem);
}

.services-pillar-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.2rem, 2.4vw, 2rem);
  row-gap: 0.5rem;
  align-items: baseline;
  padding: 0 0 clamp(0.9rem, 1.4vw, 1.4rem);
  border-bottom: 1px solid var(--hairline-strong);
}

.services-pillar-num {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange);
  padding-top: 0.55rem;
  grid-row: 1 / span 2;
  align-self: start;
}

.services-pillar-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.services-pillar-tag {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 60ch;
}

.services-pillar-grid {
  display: grid;
  gap: 1.2rem;
}

.services-pillar-grid--three { grid-template-columns: repeat(3, 1fr); }
.services-pillar-grid--two { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 76rem) {
  .services-pillar-grid--three { grid-template-columns: repeat(2, 1fr); }
  .services-pillar-grid--three .service-card:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
  .services-pillar-grid--three,
  .services-pillar-grid--two {
    grid-template-columns: 1fr;
  }
  .services-pillar-grid--three .service-card:nth-child(3) { grid-column: auto; }
  .services-pillar-head {
    grid-template-columns: 1fr;
  }
  .services-pillar-num {
    grid-row: auto;
    padding-top: 0;
  }
}

.service-card {
  position: relative;
  /* Flex column with margin-top: auto on the list — the most reliable pattern
     for "pin the list to the bottom" so dividers align across cards in a row. */
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  /* CSS Grid items already stretch by default, but make it explicit so any
     parent override can't make cards different heights. */
  align-self: stretch;
  height: 100%;
  transition: transform 0.45s var(--ease-out-quart), box-shadow 0.45s var(--ease-out-quart), border-color 0.4s ease;
}

/* Pin the bullet list to the bottom of every card so the orange divider line
   sits on a shared baseline across the row. */
.service-card > .service-card-list {
  margin-top: auto;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 83, 20, 0.45);
}

.service-card:hover .service-card-icon {
  transform: rotate(-4deg) scale(1.04);
}

.service-card-icon {
  transition: transform 0.5s var(--ease-out-quart);
}

.service-card-icon {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--orange);
}

.service-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.service-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--white);
  text-transform: none;
}

.service-card-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  max-width: 42ch;
}

.service-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hanging-indent dash: bullet text starts at X=0 (same column as the body paragraph),
   and the dash sits in the negative margin to the LEFT of that column — inside the
   card's padding, never overflowing. Aligns first-line bullet text with body para. */
.service-card-list li {
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  /* No padding-left — text first-character sits at X=0, flush with body paragraph */
}

.service-card-list li::before {
  content: "";
  position: absolute;
  left: -0.95rem;     /* hangs in the card padding to the LEFT of the text column */
  top: 0.55em;        /* baseline-aligned with the cap-height of the mono text */
  width: 0.55rem;
  height: 1px;
  background: var(--orange);
}

.services-foot {
  max-width: var(--max);
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--mute);
}

.services-foot a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 0.15rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.services-foot a:hover {
  color: var(--orange);
}

/* =========================================================================
   Scan section v2 — modernized to match current design language
   ========================================================================= */
.scan-v2 {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}

.scan-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh-citrus);
  opacity: 0.18;
  z-index: 0;
}

.scan-v2-inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  justify-items: center;
  text-align: center;
}

.scan-v2 .editorial-head { max-width: 48rem; }

.scan-v2-panel {
  width: 100%;
  max-width: 56rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px -50px rgba(14, 15, 18, 0.18);
  display: grid;
  gap: 2rem;
  text-align: left;
}

.scan-v2-form {
  display: grid;
  gap: 0.75rem;
}

.scan-v2-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.scan-v2-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: border-color 250ms ease, background-color 250ms ease;
}

.scan-v2-row:focus-within {
  border-color: var(--ink);
  background: var(--white);
}

.scan-v2-prefix {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--mute);
  flex-shrink: 0;
}

.scan-v2-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.5rem 0;
}

.scan-v2-row input::placeholder { color: var(--mute-soft); }

.scan-v2-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.8rem;
  padding: 0 1.3rem;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, transform 250ms var(--ease-out-expo);
  flex-shrink: 0;
}

.scan-v2-submit:hover {
  background: var(--orange);
  transform: translateX(2px);
}

/* Mobile: stack the URL field and submit button vertically.
   The pill shape collapses + the button stops crashing into the input. */
@media (max-width: 40rem) {
  .scan-v2-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.85rem;
    border-radius: var(--radius-md);
  }
  .scan-v2-prefix {
    display: none;
  }
  .scan-v2-row input {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: var(--white);
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    font-size: 1rem;
  }
  .scan-v2-submit {
    width: 100%;
    justify-content: center;
    height: 3rem;
    font-size: 0.74rem;
  }
}

.scan-v2-fine {
  margin: 0;
  color: var(--mute);
  font-size: 0.82rem;
  line-height: 1.5;
}

.scan-v2-results {
  display: grid;
  gap: 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.scan-v2-results-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}

.scan-v2-results-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.scan-v2-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.scan-v2-score strong {
  font-family: var(--font-display);
  font-weight: 380;
  font-style: italic;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "SOFT" 60, "opsz" 144;
}

.scan-v2-score span {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--mute);
}

.scan-v2-bars {
  display: grid;
  gap: 0.6rem;
}

.scan-v2-bar {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr 3rem;
  align-items: center;
  gap: 0.9rem;
}

.scan-v2-bar-label {
  font-size: 0.85rem;
  color: var(--ink);
}

.scan-v2-bar-track {
  position: relative;
  height: 6px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}

.scan-v2-bar-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--score, 0) * 1%);
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  border-radius: 999px;
  transform-origin: left;
  animation: scanFill 1.4s var(--ease-out-quart) both;
}

@keyframes scanFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.scan-v2-bar-value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

.scan-v2-next {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.scan-v2-next p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mute);
}

.scan-v2-next-headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.scan-v2-next-headline em {
  font-style: italic;
  color: var(--orange);
}

.scan-v2-next-rationale {
  margin: 0;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mute);
}

.scan-v2-next-rationale strong {
  color: var(--ink);
  font-weight: 600;
}

.scan-v2-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.scan-v2-next-secondary {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.25s ease;
}

.scan-v2-next-secondary:hover {
  color: var(--orange);
}

/* Tier color cues on the result bars — driven by data-tier set in JS */
.scan-v2-bar[data-tier="strong"] .scan-v2-bar-track i {
  background: linear-gradient(90deg, #067647, #12b76a);
}
.scan-v2-bar[data-tier="strong"] .scan-v2-bar-value { color: #067647; }

.scan-v2-bar[data-tier="medium"] .scan-v2-bar-track i {
  background: linear-gradient(90deg, #b54708, #f79009);
}
.scan-v2-bar[data-tier="medium"] .scan-v2-bar-value { color: #b54708; }

.scan-v2-bar[data-tier="weak"] .scan-v2-bar-track i {
  background: linear-gradient(90deg, #d92d20, #f04438);
}
.scan-v2-bar[data-tier="weak"] .scan-v2-bar-value { color: #d92d20; }

/* Loading state — pulse the submit button */
.scan-v2-form.is-loading .scan-v2-submit {
  opacity: 0.7;
  pointer-events: none;
}

.scan-v2-form.is-loading .scan-v2-prefix::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  border-top-color: var(--orange);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}

@media (max-width: 40rem) {
  .scan-v2-row { flex-wrap: wrap; }
  .scan-v2-submit { width: 100%; justify-content: center; }
  .scan-v2-bar { grid-template-columns: 1fr 2.5rem; }
  .scan-v2-bar-track { grid-column: 1 / -1; }
}

/* =========================================================================
   Workspace section v2 — interactive state machine.
   Bullets on the left = tablist. Right side = stage that crossfades
   between 4 image+sticker states as the user hovers/focuses each bullet.
   ========================================================================= */
.workspace-v2 {
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

.workspace-v2-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 56rem) {
  .workspace-v2-inner { grid-template-columns: 1fr; }
}

.workspace-v2-copy {
  display: grid;
  gap: 1.6rem;
}

.workspace-v2-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.2rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.6rem;
}

.workspace-v2-item {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.85rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.3s ease, padding-left 0.3s var(--ease-out-quart);
  outline: none;
}

.workspace-v2-item:hover,
.workspace-v2-item:focus-visible {
  color: var(--ink);
  padding-left: 0.6rem;
}

.workspace-v2-item.is-active {
  color: var(--ink);
  padding-left: 0.6rem;
}

.workspace-v2-item:last-child { border-bottom: none; }

.workspace-v2-item-text {
  flex: 1;
  min-width: 0;
}

.workspace-v2-item-text b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 0.25rem;
}

.workspace-v2-item-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hairline-strong);
  position: relative;
  top: 0.4rem;
  transition: background-color 0.3s ease, transform 0.3s var(--ease-out-quart);
}

.workspace-v2-item.is-active .workspace-v2-item-dot,
.workspace-v2-item:hover .workspace-v2-item-dot,
.workspace-v2-item:focus-visible .workspace-v2-item-dot {
  background: var(--orange);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(255, 83, 20, 0.15);
}

.workspace-v2-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
}

@media (max-width: 56rem) {
  .workspace-v2-stage { aspect-ratio: 16/12; }
}

.workspace-v2-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s var(--ease-out-quart), transform 0.8s var(--ease-out-quart);
  pointer-events: none;
}

.workspace-v2-state.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.workspace-v2-state img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(0.92);
}

.workspace-v2-state::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(14, 15, 18, 0) 30%, rgba(14, 15, 18, 0.6) 100%);
  pointer-events: none;
}

.workspace-v2-sticker {
  position: absolute;
  bottom: clamp(1.2rem, 2.5vw, 2rem);
  right: clamp(1.2rem, 2.5vw, 2rem);
  left: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 26rem;
  margin-left: auto;
  padding: 1.2rem 1.3rem;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px -20px rgba(14, 15, 18, 0.5);
  display: grid;
  gap: 0.55rem;
  z-index: 2;
}

.workspace-v2-sticker-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.workspace-v2-sticker-body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.workspace-v2-sticker-body b {
  font-weight: 700;
  color: var(--orange);
  font-family: var(--font-sans);
  font-style: normal;
}

.workspace-v2-sticker-source {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 0.4rem;
  border-top: 1px solid var(--hairline);
}

/* =========================================================================
   Cinematic section dividers — scroll-driven clip-path video masks.
   Each divider lives between two content sections. GSAP scrubs the clip
   so the media reveals from a small slot → full-bleed → and back.
   ========================================================================= */
.section-divider {
  position: relative;
  height: 100vh;
  min-height: 38rem;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.section-divider-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: inset(38% 22% 38% 22% round 18px);
  will-change: clip-path;
  transition: clip-path 0.05s linear; /* GSAP drives transform */
}

.section-divider-media img,
.section-divider-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.78) contrast(1.04) saturate(0.92);
}

.section-divider-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(14, 15, 18, 0) 0%, rgba(14, 15, 18, 0.5) 100%),
    linear-gradient(180deg, rgba(14, 15, 18, 0.05) 0%, rgba(14, 15, 18, 0.45) 100%);
  pointer-events: none;
}

.section-divider-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 var(--edge);
  pointer-events: none;
}

.section-divider-inner {
  max-width: 50rem;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.section-divider-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(251, 251, 249, 0.1);
  border: 1px solid rgba(251, 251, 249, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}

.section-divider-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
}

.section-divider-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variation-settings: "SOFT" 40, "opsz" 144;
  text-wrap: balance;
}

.section-divider-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 320;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.section-divider-source {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 251, 249, 0.6);
  margin-top: 0.5rem;
}

@media (max-width: 56rem) {
  .section-divider { height: 80vh; min-height: 32rem; }
}

/* Reduced motion: keep media visible without scrubbing */
@media (prefers-reduced-motion: reduce) {
  .section-divider-media { clip-path: inset(8% 6% 8% 6% round 18px); }
}

/* =========================================================================
   LIGHT DRAWER VARIANT — used for discovery cards (data-card-key="d-*").
   Same structure, inverted palette so the drawer matches the light source
   card it expanded from.
   ========================================================================= */
.card-drawer.is-light .card-drawer-panel {
  background: var(--white);
  color: var(--ink);
}

/* Hero — editorial-magazine layout: image contained on top, text on
   clean white below it. No overlap, much more readable. */
.card-drawer.is-light .drawer-hero {
  display: grid;
  grid-template-rows: auto auto;
  align-items: stretch;
  min-height: auto;
  padding: 0;
}

.card-drawer.is-light .drawer-hero-media {
  position: relative;
  inset: auto;
  height: clamp(20rem, 48vh, 32rem);
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.card-drawer.is-light .drawer-hero-media img,
.card-drawer.is-light .drawer-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-drawer.is-light .drawer-hero-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18));
}

.card-drawer.is-light .drawer-hero-text {
  position: static;
  z-index: 1;
  background: var(--white);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 1.2rem;
}

.card-drawer.is-light .drawer-hero-title { color: var(--ink); max-width: 22ch; }
.card-drawer.is-light .drawer-hero-title em { color: var(--orange); }
.card-drawer.is-light .drawer-hero-lede { color: var(--mute); max-width: 56ch; }
.card-drawer.is-light .drawer-hero-meta {
  border-top-color: var(--hairline);
  color: var(--mute);
}
.card-drawer.is-light .drawer-hero-meta span strong { color: var(--ink); }

/* Drawer chrome — chip + close + cross-nav: light-glass styling */
.card-drawer.is-light .card-drawer-chip {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--hairline-strong);
  color: var(--ink);
}

.card-drawer.is-light .card-drawer-close {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--hairline-strong);
  color: var(--orange);
}

.card-drawer.is-light .card-drawer-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.card-drawer.is-light .card-drawer-nav {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--hairline-strong);
}

.card-drawer.is-light .card-drawer-nav-pill {
  color: var(--mute);
}

.card-drawer.is-light .card-drawer-nav-pill:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}

.card-drawer.is-light .card-drawer-nav-pill.is-current {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

/* Sections: invert default dark to light */
.card-drawer.is-light .drawer-section {
  background: var(--white);
  color: var(--ink);
}

.card-drawer.is-light .drawer-section.is-cream {
  background: var(--cream-soft);
}

.card-drawer.is-light .drawer-section-head h3 { color: var(--ink); }
.card-drawer.is-light .drawer-section-head h3 em { color: var(--orange); }
.card-drawer.is-light .drawer-section-head p { color: var(--mute); }

/* Intro stat band */
.card-drawer.is-light .drawer-stat-num { color: var(--orange); }
.card-drawer.is-light .drawer-stat-num em { color: var(--orange-tint); }
.card-drawer.is-light .drawer-stat-label { color: var(--mute); }
.card-drawer.is-light .drawer-intro-body p { color: var(--ink); }
.card-drawer.is-light .drawer-intro-body p:last-child { color: var(--mute); }

/* Included grid cards — light card variant */
.card-drawer.is-light .drawer-incl {
  background: var(--white);
  border-color: var(--hairline);
  color: var(--ink);
}

.card-drawer.is-light .drawer-incl:hover {
  background: rgba(255, 83, 20, 0.04);
  border-color: rgba(255, 83, 20, 0.4);
}

.card-drawer.is-light .drawer-incl h4 { color: var(--ink); }
.card-drawer.is-light .drawer-incl p { color: var(--mute); }
.card-drawer.is-light .drawer-incl-num::after { background: var(--hairline); }

/* Mid-drawer CTA in light variant — dark text on light bg, dark button */
.card-drawer.is-light .drawer-mid-cta {
  background: linear-gradient(135deg, rgba(255, 83, 20, 0.07) 0%, rgba(0, 0, 0, 0) 60%), var(--cream-soft);
  border-color: var(--hairline);
}

.card-drawer.is-light .drawer-mid-cta-title { color: var(--ink); }

.card-drawer.is-light .drawer-mid-cta-btn {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.card-drawer.is-light .drawer-mid-cta-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* Process strip (rarely used on discovery drawers, but cover for safety) */
.card-drawer.is-light .drawer-process-step h4 { color: var(--ink); }
.card-drawer.is-light .drawer-process-step p { color: var(--mute); }
.card-drawer.is-light .drawer-process-meta { color: var(--orange); }
.card-drawer.is-light .drawer-process-step { border-bottom-color: var(--hairline); }

/* Outcomes — light card variant */
.card-drawer.is-light .drawer-outcomes {
  background: var(--hairline);
  border-color: var(--hairline);
}

.card-drawer.is-light .drawer-outcome { background: var(--white); }
.card-drawer.is-light .drawer-outcome-num { color: var(--orange); }
.card-drawer.is-light .drawer-outcome-label { color: var(--ink); }
.card-drawer.is-light .drawer-outcome p { color: var(--mute); }

/* Gallery captions — light variant: caption pill needs to read on light */
.card-drawer.is-light .drawer-gallery-cap {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

/* Work cards (related) */
.card-drawer.is-light .drawer-work-card {
  background: var(--white);
  border-color: var(--hairline);
}

.card-drawer.is-light .drawer-work-card:hover {
  border-color: var(--orange);
}

.card-drawer.is-light .drawer-work-card h4 { color: var(--ink); }
.card-drawer.is-light .drawer-work-card-meta { color: var(--mute); }

/* Closing CTA band */
.card-drawer.is-light .drawer-cta {
  background: var(--cream-soft);
  border-top-color: var(--hairline);
}

.card-drawer.is-light .drawer-cta h3 { color: var(--ink); }
.card-drawer.is-light .drawer-cta p { color: var(--mute); }

.card-drawer.is-light .drawer-cta-row .btn {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.card-drawer.is-light .drawer-cta-row .btn:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.card-drawer.is-light .drawer-cta-note { color: var(--mute); }

/* Scroll prompt + progress bar */
.card-drawer.is-light .drawer-scroll-prompt { color: rgba(14, 15, 18, 0.55); }
.card-drawer.is-light .card-drawer-progress { background: var(--orange); box-shadow: 0 0 12px rgba(255, 83, 20, 0.4); }

/* Scrollbar in light mode */
.card-drawer.is-light .card-drawer-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); }

/* =========================================================================
   Form modal — centered card with backdrop, used for Book a Discovery.
   Triggered by any element with data-open-modal="discovery".
   ========================================================================= */
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.form-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.form-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.form-modal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100% - 4rem);
  overflow-y: auto;
  transform: translate(-50%, -45%) scale(0.96);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-modal.is-open .form-modal-card {
  transform: translate(-50%, -50%) scale(1);
}

.form-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-out-quart);
}

.form-modal-close:hover {
  background: var(--ink);
  color: var(--white);
  transform: rotate(90deg);
}

.form-modal-close svg { width: 0.95rem; height: 0.95rem; }

.form-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.form-modal-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--orange);
}

.form-modal-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  text-transform: none;
}

.form-modal-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
}

.form-modal-dek {
  margin: 0 0 1.6rem;
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.55;
}

.form-modal-form {
  display: grid;
  gap: 1rem;
}

.form-field { display: grid; gap: 0.4rem; }

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 83, 20, 0.18);
}

.form-field textarea { min-height: 5rem; resize: vertical; font-family: var(--font-sans); }

.form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

@media (max-width: 36rem) { .form-field-row { grid-template-columns: 1fr; } }

.form-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.form-modal-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.3s var(--ease-out-quart);
}

.form-modal-submit:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-1px); }
.form-modal-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.form-modal-note {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.form-modal-success,
.form-modal-error {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.5;
  display: none;
}

.form-modal-success { background: rgba(255, 83, 20, 0.08); color: var(--ink); border: 1px solid rgba(255, 83, 20, 0.4); }
.form-modal-success.is-shown { display: block; }
.form-modal-success strong { color: var(--orange); }

.form-modal-error { background: rgba(0,0,0,0.04); color: var(--ink); border: 1px solid var(--hairline-strong); }
.form-modal-error.is-shown { display: block; }

body.is-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .form-modal-card { transition: none; }
}

/* Wider card variant for the multi-step questionnaire */
.form-modal-card--wide { width: min(44rem, calc(100% - 2rem)); }

/* Multi-step form — progress + step swap */
.form-progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
}

.form-progress-track {
  flex: 1;
  height: 3px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}

.form-progress-fill {
  height: 100%;
  background: var(--orange);
  width: 0%;
  border-radius: 999px;
  transition: width 0.45s var(--ease-out-expo);
}

.form-progress-text {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  flex-shrink: 0;
}

.form-step {
  display: none;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out-quart);
}

.form-step.is-active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.form-step-prompt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  text-transform: none;
}

.form-step-prompt em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
}

.form-step-help {
  margin: 0;
  color: var(--mute);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Selectable radio cards (entry point picker) */
.form-radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.3rem 0 0;
}

@media (max-width: 36rem) { .form-radio-cards { grid-template-columns: 1fr; } }

.form-radio-card {
  position: relative;
  display: block;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.3s var(--ease-out-quart);
}

.form-radio-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.form-radio-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-radio-card-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.25rem;
  line-height: 1.25;
}

.form-radio-card-body {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--mute);
}

.form-radio-card input:checked ~ .form-radio-card-title { color: var(--orange); }

.form-radio-card:has(input:checked) {
  border-color: var(--orange);
  background: rgba(255, 83, 20, 0.04);
}

/* Multi-select chip group */
.form-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.form-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.form-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-chip:hover { border-color: var(--ink); }

.form-chip:has(input:checked) {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Step navigation row */
.form-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  margin-top: 0.5rem;
}

.form-step-back {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.form-step-back:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.form-step-back[hidden] { display: none; }

/* Final step — confirmation pane */
.form-confirm {
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: 1.4rem 0 0.4rem;
}

.form-confirm-mark {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.12);
  color: var(--orange);
  display: grid;
  place-items: center;
}

.form-confirm-mark svg { width: 1.4rem; height: 1.4rem; }

.form-confirm h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.02em;
}

.form-confirm p {
  margin: 0;
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 36ch;
}

.form-confirm-followup {
  text-align: left;
  background: var(--cream-soft);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin-top: 0.6rem;
}

.form-confirm-followup p {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0.5rem;
}

.form-confirm-followup ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.form-confirm-followup li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 1rem;
  position: relative;
}

.form-confirm-followup li::before {
  content: "·";
  position: absolute;
  left: 0.3rem;
  top: -0.2rem;
  font-size: 1.4rem;
  color: var(--orange);
  font-weight: 700;
}

/* =========================================================================
   Newsletter section — single-input email capture before Final CTA.
   ========================================================================= */
.newsletter-band {
  padding: clamp(4rem, 8vw, 6rem) var(--edge);
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.newsletter-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh-citrus);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

.newsletter-inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  justify-items: center;
  text-align: center;
}

.newsletter-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.newsletter-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--orange);
}

.newsletter-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 32ch;
  text-transform: none;
}

.newsletter-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
}

.newsletter-dek {
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 44ch;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  max-width: 32rem;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: border-color 0.25s ease;
}

.newsletter-form:focus-within { border-color: var(--ink); }

.newsletter-form input {
  flex: 1;
  min-width: 12rem;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  padding: 0.55rem 0;
}

.newsletter-form input::placeholder { color: var(--mute-soft); }

.newsletter-form button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 0 1.2rem;
  height: 2.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease;
  flex-shrink: 0;
}

.newsletter-form button:hover { background: var(--orange); }

.newsletter-fine {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.newsletter-success {
  display: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--orange);
}

.newsletter-success.is-shown { display: block; }

/* =========================================================================
   Sticky "Book a discovery" pill — DEPRECATED (removed per feedback).
   ========================================================================= */
.sticky-cta {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.6rem);
  right: clamp(1rem, 3vw, 1.6rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.3rem;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.45);
  transform: translateY(120%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.4s ease, background-color 0.25s ease;
}

.sticky-cta::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease-out-quart);
}

.sticky-cta:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.sticky-cta:hover::after { transform: translateX(3px); }

.sticky-cta.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 40rem) {
  .sticky-cta { font-size: 0.66rem; padding: 0.75rem 1.05rem; }
}

/* =========================================================================
   Expandable card pattern — click a service or discovery card and a
   black drawer slides up from the bottom with the detail content.
   Used on .service-card and .illus-card via data-card-key + an expand
   icon that doubles as the click affordance.
   ========================================================================= */
.card-expand {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--white);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.25s ease, transform 0.3s var(--ease-out-quart);
  z-index: 2;
}

.card-expand svg {
  width: 0.85rem;
  height: 0.85rem;
}

.card-expand:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(45deg);
}

/* Light-card variant (discovery illus-card has white bg, so icon is ink) */
.illus-card .card-expand {
  background: var(--white);
  border-color: var(--hairline-strong);
  color: var(--ink);
}

.illus-card .card-expand:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* Make whole card behave as a button (cursor + interactive feel) */
.service-card[data-card-key],
.illus-card[data-card-key] {
  cursor: pointer;
  position: relative;
}

.service-card[data-card-key]:focus-visible,
.illus-card[data-card-key]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* =========================================================================
   Card Drawer 2.0 — full page-takeover with rich scrollable content.
   Each card opens into a multi-section mini-page experience.
   ========================================================================= */
.card-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}

.card-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card-drawer.is-open .card-drawer-backdrop { opacity: 1; }

.card-drawer-panel {
  position: absolute;
  top: clamp(4rem, 14vh, 8rem);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--white);
  transform: translateY(100%);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.4s ease-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.6);
}

.card-drawer.is-open .card-drawer-panel { transform: translateY(0); }

/* Fullscreen takeover state — applied after user scrolls in the drawer */
.card-drawer.is-fullscreen .card-drawer-panel {
  top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Drawer cross-nav — horizontal pill row, switch between siblings in
   the same group (4 services or 6 discovery) without closing. */
.card-drawer-nav {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  max-width: min(60rem, calc(100% - 11rem));
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card-drawer-nav::-webkit-scrollbar { display: none; }

/* Only show the cross-nav after the drawer hits fullscreen state */
.card-drawer.is-fullscreen .card-drawer-nav {
  opacity: 1;
  pointer-events: auto;
}

.card-drawer-nav-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.card-drawer-nav-pill:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
}

.card-drawer-nav-pill.is-current {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  cursor: default;
}

.card-drawer-nav-num {
  font-size: 0.58rem;
  opacity: 0.7;
}

.card-drawer-nav-pill.is-current .card-drawer-nav-num { opacity: 0.9; }

@media (max-width: 56rem) {
  .card-drawer-nav { max-width: calc(100% - 8rem); }
  .card-drawer-nav-pill { font-size: 0.6rem; padding: 0.45rem 0.7rem; }
}

/* Scroll progress bar — thin orange line at the very top of the drawer */
.card-drawer-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--orange);
  width: 0%;
  z-index: 11;
  transition: width 0.15s linear;
  box-shadow: 0 0 12px var(--orange);
}

/* Hero scroll prompt — vertical mono label tucked at the right edge.
   Doesn't compete with hero copy; reads like a side rail indicator. */
.drawer-scroll-prompt {
  position: absolute;
  bottom: 1.6rem;
  right: clamp(1rem, 2.5vw, 1.8rem);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  pointer-events: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: opacity 0.4s ease;
}

.card-drawer.is-fullscreen .drawer-scroll-prompt { opacity: 0; }

.drawer-scroll-prompt svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--orange);
  transform: rotate(180deg);
  animation: drawerScrollBounce 1.6s ease-in-out infinite;
}

@keyframes drawerScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.6; }
}

/* Floating close button — fixed top-right, doesn't scroll with content */
.card-drawer-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.8rem);
  right: clamp(1rem, 2.5vw, 1.8rem);
  z-index: 10;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--orange);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.3s var(--ease-out-quart), border-color 0.25s ease;
}

.card-drawer-close svg { width: 1.05rem; height: 1.05rem; }

.card-drawer-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: rotate(90deg);
}

/* Persistent eyebrow chip — top-left, fades on scroll past hero */
.card-drawer-chip {
  position: absolute;
  top: clamp(1.1rem, 2.5vw, 1.95rem);
  left: clamp(1rem, 2.5vw, 1.8rem);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}

.card-drawer-chip::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
}

/* Drawer body scrolls — contains the drawer-page mini-page.
   No CSS smooth-scroll here — programmatic scrollTop resets need to be
   instant for cross-nav swaps to land at the top reliably. */
.card-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.card-drawer-body::-webkit-scrollbar { width: 8px; }
.card-drawer-body::-webkit-scrollbar-track { background: transparent; }
.card-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }

/* =========================================================================
   Drawer Page — multi-section template rendered inside drawer body
   ========================================================================= */
.drawer-page { display: flex; flex-direction: column; }

/* HERO — sized to the drawer peek state, intro section peeks below */
.drawer-hero {
  position: relative;
  /* In peek state (~86vh body), use ~73vh so the next section's top
     is visible below — natural scroll cue. */
  min-height: 72vh;
  padding: clamp(4rem, 9vh, 7rem) clamp(1.4rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.drawer-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.drawer-hero-media img,
.drawer-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
}

.drawer-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.drawer-hero-text {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin: 0 auto 0 0;
  display: grid;
  gap: 1.1rem;
}

.drawer-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.drawer-hero-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
}

.drawer-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
  text-transform: none;
  max-width: 18ch;
}

.drawer-hero-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-weight: 380;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.drawer-hero-lede {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
}

.drawer-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.drawer-hero-meta span strong {
  color: var(--white);
  font-weight: 600;
  margin-right: 0.4rem;
}

/* SECTION — generic content section inside the drawer.
   Every direct child is auto-constrained to var(--max) and centered
   so the section head and the grid/showcase below always share the
   exact same left/right edges. */
.drawer-section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.4rem, 4vw, 3rem);
  position: relative;
}

.drawer-section > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.drawer-section.is-cream {
  background: var(--white);
  color: var(--ink);
}

.drawer-section-inner {
  /* When sections explicitly use an inner wrapper, it inherits max-width
     from the > * rule. Just reset margin so it still centers. */
  max-width: var(--max);
  margin: 0 auto;
}

/* The intro band is a 2-col layout — make sure it stays inside max */
.drawer-section.drawer-intro,
.drawer-intro {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.drawer-section-head {
  display: grid;
  gap: 0.8rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 44rem;
}

.drawer-section-head .drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.drawer-section-head .drawer-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
}

.drawer-section-head h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: inherit;
  text-transform: none;
}

.drawer-section-head h3 em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
}

.drawer-section-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
}

.drawer-section.is-cream .drawer-section-head p { color: var(--mute); }

/* INTRO BAND — chunky stat + body */
.drawer-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 56rem) { .drawer-intro { grid-template-columns: 1fr; } }

.drawer-stat {
  display: grid;
  gap: 0.6rem;
}

.drawer-stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--orange);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.drawer-stat-num em {
  font-style: italic;
  font-size: 0.6em;
  margin-left: 0.1em;
  color: rgba(255, 90, 31, 0.7);
}

.drawer-stat-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  max-width: 28ch;
}

.drawer-intro-body p {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}

.drawer-intro-body p:last-child { margin-bottom: 0; }

/* INCLUDED GRID — 2x3 of numbered cards */
.drawer-included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 64rem) { .drawer-included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .drawer-included-grid { grid-template-columns: 1fr; } }

.drawer-incl {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.6rem;
  overflow: hidden;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--ease-out-quart);
}

/* Subtle accent line at top of each Included card — adds visual rhythm */
.drawer-incl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  width: 1.4rem;
  height: 2px;
  background: var(--orange);
  opacity: 0.55;
  transition: width 0.4s var(--ease-out-quart), opacity 0.3s ease;
}

.drawer-incl:hover {
  border-color: rgba(255, 83, 20, 0.4);
  background: rgba(255, 83, 20, 0.05);
  transform: translateY(-2px);
}

.drawer-incl:hover::before {
  width: 2.4rem;
  opacity: 1;
}

.drawer-incl-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-incl-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  max-width: 2rem;
}

/* Card icon — injected by JS, sits above the number eyebrow */
.drawer-incl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.1);
  color: var(--orange);
  margin-bottom: 0.3rem;
  transition: background-color 0.3s ease, transform 0.4s var(--ease-out-quart);
}

.drawer-incl-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.drawer-incl:hover .drawer-incl-icon {
  background: var(--orange);
  color: var(--white);
  transform: scale(1.06) rotate(-4deg);
}

/* Light variant — icon chip on light bg */
.card-drawer.is-light .drawer-incl-icon {
  background: rgba(255, 83, 20, 0.1);
  color: var(--orange);
}

.card-drawer.is-light .drawer-incl:hover .drawer-incl-icon {
  background: var(--orange);
  color: var(--white);
}

.drawer-incl h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--white);
  text-transform: none;
}

.drawer-incl p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

/* SPOTLIGHT BAND — first two included items promoted to feature blocks.
   Alternating left/right composition gives the drawer rhythm before
   dropping into the 4-card supporting grid. */
.drawer-spotlight-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

.drawer-spotlight {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.9rem, 3vw, 2.8rem);
  background: linear-gradient(135deg, rgba(255, 83, 20, 0.07) 0%, rgba(255, 255, 255, 0.02) 60%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out-quart);
}

.drawer-spotlight:hover {
  border-color: rgba(255, 83, 20, 0.32);
  transform: translateY(-2px);
}

.drawer-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.drawer-spotlight--right {
  grid-template-columns: 1.15fr 0.85fr;
}

.drawer-spotlight--right .drawer-spotlight-visual {
  order: 2;
}

.drawer-spotlight--right .drawer-spotlight-text {
  order: 1;
}

@media (max-width: 56rem) {
  .drawer-spotlight,
  .drawer-spotlight--right {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 1.6rem;
  }
  .drawer-spotlight--right .drawer-spotlight-visual { order: 1; }
  .drawer-spotlight--right .drawer-spotlight-text { order: 2; }
}

.drawer-spotlight-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 83, 20, 0.18) 0%, rgba(255, 83, 20, 0) 65%);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: clamp(12rem, 18vw, 16rem);
  transition: background 0.5s ease;
}

.drawer-spotlight:hover .drawer-spotlight-visual {
  background: radial-gradient(circle at 50% 50%, rgba(255, 83, 20, 0.28) 0%, rgba(255, 83, 20, 0) 70%);
}

.drawer-spotlight:hover .drawer-spotlight-graphic {
  opacity: 1;
}

.drawer-spotlight-graphic {
  position: absolute;
  inset: 8% 8% 8% 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  opacity: 0.85;
}

.drawer-spotlight-graphic svg {
  width: 100%;
  height: 100%;
}

.drawer-spotlight-mega-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif, var(--font-sans));
  font-weight: 500;
  font-size: clamp(4.6rem, 8.2vw, 8.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.32);
  font-variant-numeric: lining-nums;
}

.drawer-spotlight-text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.85rem;
  align-content: center;
}

.drawer-spotlight-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.drawer-spotlight-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.drawer-spotlight-title {
  margin: 0;
  font-family: var(--font-serif, var(--font-sans));
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--white);
}

.drawer-spotlight-body {
  display: grid;
  gap: 0.6rem;
}

.drawer-spotlight-body p {
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* Light variant — spotlight on white drawer */
.card-drawer.is-light .drawer-spotlight {
  background: linear-gradient(135deg, rgba(255, 83, 20, 0.06) 0%, rgba(10, 10, 10, 0.02) 60%);
  border-color: rgba(10, 10, 10, 0.08);
}

.card-drawer.is-light .drawer-spotlight-visual {
  background: radial-gradient(circle at 50% 50%, rgba(255, 83, 20, 0.14) 0%, rgba(255, 83, 20, 0) 65%);
}

.card-drawer.is-light .drawer-spotlight-mega-num {
  color: var(--ink);
  text-shadow: 0 2px 30px rgba(255, 83, 20, 0.18);
}

.card-drawer.is-light .drawer-spotlight-title { color: var(--ink); }
.card-drawer.is-light .drawer-spotlight-body p { color: var(--mute); }

/* When a grid has had its first 2 cards promoted, render the rest as
   a more horizontal supporting strip (4-up on wide, 2-up on med, 1-up small).
   Cards run narrower in this mode — tighten padding and type slightly so
   they read as the "supporting cast," not as full-size grid cards. */
.drawer-included-grid--rest {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.drawer-included-grid--rest .drawer-incl {
  padding: 1.35rem 1.2rem 1.25rem;
  gap: 0.5rem;
}

.drawer-included-grid--rest .drawer-incl h4 {
  font-size: 1.02rem;
}

.drawer-included-grid--rest .drawer-incl p {
  font-size: 0.88rem;
}

.drawer-included-grid--rest .drawer-incl-icon {
  width: 2.3rem;
  height: 2.3rem;
}

.drawer-included-grid--rest .drawer-incl-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 72rem) { .drawer-included-grid--rest { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 40rem) { .drawer-included-grid--rest { grid-template-columns: 1fr; } }

/* SHOWCASE BAND — asymmetric photo composition */
.drawer-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}

@media (max-width: 56rem) { .drawer-showcase { grid-template-columns: 1fr; } }

.drawer-showcase-tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-soft);
}

.drawer-showcase-tile.is-tall { aspect-ratio: 3/4; }

.drawer-showcase-tile img,
.drawer-showcase-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

.drawer-showcase-tile:hover img,
.drawer-showcase-tile:hover video {
  transform: scale(1.04);
}

.drawer-showcase-stack {
  display: grid;
  gap: 1rem;
}

.drawer-showcase-cap {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* WORK CARDS — link out to case studies */
.drawer-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

@media (max-width: 56rem) { .drawer-work-grid { grid-template-columns: 1fr; } }

.drawer-work-card {
  display: grid;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out-quart);
}

.drawer-work-card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}

.drawer-work-card-media {
  aspect-ratio: 16/10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink-soft);
}

.drawer-work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-quart);
}

.drawer-work-card:hover .drawer-work-card-media img { transform: scale(1.05); }

.drawer-work-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.drawer-work-card h4 {
  margin: 0;
  padding: 0 0.5rem 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.drawer-work-card h4 em {
  font-style: italic;
  color: var(--orange);
}

/* PROCESS STRIP — 5 steps that highlight as you scroll past */
.drawer-process {
  display: grid;
  gap: 0;
}

.drawer-process-step {
  display: grid;
  grid-template-columns: minmax(3rem, 5rem) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.45;
  transition: opacity 0.5s var(--ease-out-quart);
}

.drawer-process-step.is-active { opacity: 1; }

.drawer-process-step:last-child { border-bottom: none; }

.drawer-process-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--orange);
  font-variation-settings: "SOFT" 70, "opsz" 144;
}

.drawer-process-meat {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 0.4rem;
}

.drawer-process-meat h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--white);
  text-transform: none;
}

.drawer-process-meat p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
}

.drawer-process-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 0.2rem;
}

/* OUTCOMES BAND — 3 stat figures with subtle ring accent */
.drawer-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 56rem) { .drawer-outcomes { grid-template-columns: 1fr; } }

.drawer-outcome {
  position: relative;
  background: var(--ink);
  padding: 2rem 1.6rem 1.8rem;
  display: grid;
  gap: 0.45rem;
  overflow: hidden;
  isolation: isolate;
}

/* Quarter-ring accent in the top-right of each outcome — subtle visual hook */
.drawer-outcome::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 83, 20, 0.22);
  pointer-events: none;
}

.drawer-outcome::after {
  content: "";
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 83, 20, 0.12);
  pointer-events: none;
}

.drawer-outcome-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--orange);
  font-variation-settings: "SOFT" 70, "opsz" 144;
}

.drawer-outcome-num em {
  font-style: italic;
  font-size: 0.55em;
  color: rgba(255, 90, 31, 0.7);
}

.drawer-outcome-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.drawer-outcome p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.64);
}

/* GALLERY — 3-tile asymmetric image showcase */
.drawer-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.drawer-gallery-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-soft);
}

.drawer-gallery-tile:nth-child(1) {
  grid-row: 1 / 3;
  aspect-ratio: 3/4;
}

.drawer-gallery-tile:nth-child(2),
.drawer-gallery-tile:nth-child(3) {
  aspect-ratio: 4/3;
}

@media (max-width: 56rem) {
  .drawer-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .drawer-gallery-tile:nth-child(1) { grid-row: auto; aspect-ratio: 16/10; }
}

.drawer-gallery-tile img,
.drawer-gallery-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

.drawer-gallery-tile:hover img,
.drawer-gallery-tile:hover video {
  transform: scale(1.04);
}

.drawer-gallery-cap {
  position: absolute;
  bottom: 0.8rem;
  left: 0.9rem;
  right: 0.9rem;
  padding: 0.5rem 0.8rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-self: start;
  width: max-content;
  max-width: calc(100% - 1.6rem);
}

/* MID-DRAWER CTA — its own compact section between Included Grid and what's
   next. Clear separation from surrounding sections via reduced padding
   and a distinct dark band with a thin orange top accent. */
.drawer-mid-cta-section {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.drawer-mid-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2rem);
  flex-wrap: wrap;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.2rem);
  background: linear-gradient(135deg, rgba(255, 83, 20, 0.08) 0%, rgba(0, 0, 0, 0) 60%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Thin orange top accent so the panel reads as a distinct moment */
.drawer-mid-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orange);
  opacity: 0.8;
}

.drawer-mid-cta-text {
  display: grid;
  gap: 0.4rem;
  flex: 1 1 24rem;
  min-width: 0;
}

.drawer-mid-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-mid-cta-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
}

.drawer-mid-cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.85vw, 1.5rem);
  color: var(--white);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 32ch;
}

.drawer-mid-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.7rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--white);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-out-quart), box-shadow 0.4s ease;
  flex-shrink: 0;
}

.drawer-mid-cta-btn:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(255, 83, 20, 0.65);
}

/* When mid-CTA section follows a cream section, invert palette */
.drawer-section.is-cream + .drawer-mid-cta-section .drawer-mid-cta { background: linear-gradient(135deg, rgba(255, 83, 20, 0.06) 0%, rgba(0, 0, 0, 0) 60%), var(--ink); color: var(--white); }

@media (max-width: 56rem) {
  .drawer-mid-cta { flex-direction: column; align-items: flex-start; }
  .drawer-mid-cta-btn { align-self: stretch; justify-content: center; }
}

/* CTA BAND — closer */
.drawer-cta {
  padding: clamp(5rem, 10vw, 8rem) clamp(1.4rem, 4vw, 3rem);
  text-align: center;
  background: var(--ink-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-cta-inner {
  max-width: 48rem;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  justify-items: center;
}

.drawer-cta h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
  text-transform: none;
  max-width: 22ch;
}

.drawer-cta h3 em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-weight: 380;
}

.drawer-cta p {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 40ch;
}

.drawer-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.drawer-cta-row .btn {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.drawer-cta-row .btn:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.drawer-cta-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

body.is-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .card-drawer-panel { transition: none; }
  .card-drawer-backdrop { transition: none; }
}

/* Legacy compatibility — kept for any external links/usage */
.card-drawer-grid { display: grid; gap: 2rem; max-width: 60rem; margin: 0 auto; }
.card-drawer-lede { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.4; color: rgba(255,255,255,0.92); margin: 0; }
.card-drawer-lede em { font-style: italic; color: var(--orange); }

/* =============================================================================
   THESIS-ALIGNED SECTIONS (Stakes, Why-fail, Build-and-Run, etc.)
   The doc spec: cream-dominant body, near-black ink, single muted rust accent,
   heavy grain, generous whitespace, editorial restraint.
   ============================================================================= */

/* ---- STAKES — the question to sit with --------------------------------- */
.stakes-section {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--white);
  color: var(--ink);
  position: relative;
}

.stakes-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.stakes-inner {
  max-width: 78rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.stakes-title {
  max-width: 22ch;
}

.stakes-stats {
  list-style: none;
  padding: 0;
  margin: clamp(3.5rem, 6vw, 5.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 56rem) {
  .stakes-stats { grid-template-columns: 1fr; }
}

.stakes-stats li {
  padding: clamp(2rem, 3vw, 2.6rem) clamp(1.2rem, 2.5vw, 2rem);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

@media (max-width: 56rem) {
  .stakes-stats li { border-right: none; }
}

.stakes-stats li:last-child { border-right: none; }

/* Numbers use the body sans (General Sans) at display size + heavy weight.
   The previous serif Fraunces glyphs were decorative — out of place against
   the rest of the data treatment on the site. */
.stakes-stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(3.4rem, 6.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
  /* Use tabular numerals so the columns line up cleanly */
  font-variant-numeric: tabular-nums lining-nums;
  /* Disable Fraunces-style stylistic ligatures if the font happens to support them */
  font-feature-settings: "liga" 0, "dlig" 0, "ss01" 0;
}

.stakes-stat-suffix {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-top: 0.6rem;
}

.stakes-stat-label {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--mute);
  max-width: 30ch;
  margin-top: 0.6rem;
}

/* ---- WHY MOST AI BETS FAIL — the early-television mistake -------------- */
.why-fail-section {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--cream);
  color: var(--ink);
  position: relative;
}

.why-fail-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.why-fail-inner {
  max-width: 56rem;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  position: relative;
  z-index: 1;
}

/* Eyebrow is inline-flex by default; in a grid context it tries to stretch
   to the full track width and becomes a giant pill. Pin it to its content. */
.why-fail-inner > .editorial-eyebrow {
  justify-self: start;
}

.why-fail-title {
  margin: 1rem 0 0.6rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 14ch;
}

.why-fail-title em {
  font-style: italic;
  color: var(--orange);
}

.why-fail-body {
  margin: 0;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 50rem;
}

.why-fail-body strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- BUILD AND RUN — the wedge ----------------------------------------- */
.build-run-section {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.build-run-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 83, 20, 0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255, 83, 20, 0.10), transparent 55%);
  pointer-events: none;
}

.build-run-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.12;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.build-run-inner {
  max-width: 78rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.build-run-section .editorial-eyebrow { color: var(--orange); }
.build-run-section .editorial-title { color: var(--white); }
.build-run-section .editorial-title em { color: var(--orange); font-style: italic; }
.build-run-section .editorial-dek { color: rgba(255, 255, 255, 0.78); }

.build-run-pills {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 1.6rem;
}

@media (max-width: 52rem) {
  .build-run-pills { grid-template-columns: 1fr; }
}

.build-run-pills li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 1rem 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.build-run-pills li span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95em;
}

/* ---- FRONT DOORS — the two diagnostics (Readiness Score + AI Visibility) -- */
.front-doors {
  max-width: var(--max);
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

@media (max-width: 56rem) {
  .front-doors { grid-template-columns: 1fr; }
}

.front-door {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out-quart), box-shadow 0.5s ease;
}

.front-door::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.8rem;
  width: 2.4rem;
  height: 3px;
  background: var(--orange);
  transition: width 0.5s var(--ease-out-quart);
}

.front-door:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -40px rgba(255, 83, 20, 0.32);
}

.front-door:hover::before { width: 5rem; }

.front-door-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 0.4rem;
}

.front-door-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}

.front-door-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute);
  max-width: 38ch;
}

.front-door-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s ease, gap 0.4s var(--ease-out-quart);
}

.front-door:hover .front-door-cta {
  color: var(--orange);
  gap: 0.85rem;
}

/* ---- "See The Good." final-CTA treatment ------------------------------- */
.see-the-good {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: center;
  max-width: 100%;
  margin: 0 auto 1.4rem;
  color: var(--white);
}

.see-the-good em {
  font-style: italic;
  background: linear-gradient(120deg, var(--white) 0%, var(--white) 55%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.final-cta-dual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
}

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.7rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-out-quart);
}

.btn-ghost-dark:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-1px);
}

.final-cta-v2-email-row {
  text-align: center;
  margin: 1rem 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.final-cta-v2-email-row a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.final-cta-v2-email-row a:hover { color: var(--orange); }

/* =============================================================================
   /pilot.html — THE GFW PILOT
   Single-purpose landing page. Cream-dominant, restrained, generous whitespace.
   OpenExO-style clarity in GFW voice.
   ============================================================================= */

.pilot-hero {
  padding: clamp(6rem, 11vw, 11rem) var(--edge) clamp(4rem, 7vw, 6rem);
  background: var(--white);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.pilot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.pilot-hero-inner {
  /* Wider canvas to let the orange headline span ~75% like the Paper artboard */
  max-width: 84rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.4rem, 2.5vw, 2.4rem);
  justify-items: start;
  text-align: left;
}

.pilot-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 83, 20, 0.4);
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.06);
}

.pilot-tag-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 20, 0.18);
}

/* Paper artboard AD-0 treatment: entire headline orange, heavy sans, massive,
   left-aligned. No italic serif "em" — the whole title carries the orange. */
.pilot-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  /* Fluid scale up to ~9rem at 1440-1800px, matching Paper proportion */
  font-size: clamp(2.8rem, 8.4vw, 9.2rem);
  line-height: 0.95;
  letter-spacing: -0.032em;
  color: var(--orange);
  max-width: 20ch;
}

/* If anyone uses <em> inside the title, it stays orange + sans (not italic) */
.pilot-hero-title em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

/* Optional emphasis span — a slightly different orange shade for the punchline.
   Used in the new copy: "Running on its own <span class='pilot-hero-accent'>by day 91.</span>" */
.pilot-hero-accent {
  color: var(--orange-deep, #c63f0c);
}

.pilot-hero-dek {
  margin: 0.6rem 0 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 44rem;
}

.pilot-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding: clamp(1.2rem, 2vw, 1.8rem) 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  width: 100%;
  margin-top: 0.6rem;
}

.pilot-meta-item {
  display: grid;
  gap: 0.3rem;
}

.pilot-meta-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.pilot-meta-value {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pilot-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  margin-top: 0.6rem;
}

.pilot-hero-link {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.pilot-hero-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* ---- Generic section container ----------------------------------------- */
.pilot-section {
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--white);
  color: var(--ink);
  position: relative;
}

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

.pilot-section--day91 {
  background: var(--white);
}

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

.pilot-section--faq {
  background: var(--white);
}

.pilot-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.pilot-section-inner {
  max-width: 78rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pilot-section-inner--narrow {
  max-width: 56rem;
}

.pilot-section-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pilot-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  width: fit-content;
}

.pilot-eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.pilot-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 22ch;
}

.pilot-h2 em {
  font-style: italic;
  color: var(--orange);
}

.pilot-body-lg {
  margin: 0 0 1.2rem;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 48rem;
}

.pilot-body {
  margin: 0 0 1.2rem;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 46rem;
}

.pilot-body--mark {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--orange);
  padding-left: 1.2rem;
  margin-top: 1.8rem;
}

.pilot-body--mark em {
  font-style: italic;
  color: var(--orange);
}

/* ---- THE 90 DAYS — 4-phase grid ----------------------------------------- */
.pilot-phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  counter-reset: phase;
}

@media (max-width: 64rem) {
  .pilot-phases { grid-template-columns: 1fr; }
}

.pilot-phase {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.7rem;
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out-quart), box-shadow 0.5s ease;
}

.pilot-phase:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -40px rgba(255, 83, 20, 0.28);
}

.pilot-phase-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
}

.pilot-phase-days {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.pilot-phase-title {
  margin: 0.2rem 0 0.3rem;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.pilot-phase-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute);
  max-width: 38ch;
}

.pilot-phase-list {
  list-style: none;
  padding: 1rem 0 0;
  margin: 0.4rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.5rem;
}

.pilot-phase-list li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink-mid);
}

.pilot-phase-list li::before {
  content: "+";
  flex-shrink: 0;
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ---- DAY 91 — numbered deliverables -------------------------------------- */
.pilot-deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-strong);
}

.pilot-deliverables li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.pilot-deliverables li b {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.pilot-deliverables li span {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
}

.pilot-deliverables li span em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--mute);
  font-size: 0.95em;
}

/* ---- WHO IT'S FOR — simple bullet list ----------------------------------- */
.pilot-for-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.pilot-for-list li {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.85vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 1.2rem 0 1.2rem 1.8rem;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.pilot-for-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7rem;
  width: 0.85rem;
  height: 1px;
  background: var(--orange);
}

.pilot-for-list li:last-child { border-bottom: none; }

/* ---- INVESTMENT — the one dark "punctuation" band ---------------------- */
.pilot-investment {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.pilot-investment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 83, 20, 0.18), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(255, 83, 20, 0.1), transparent 55%);
  pointer-events: none;
}

.pilot-investment::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.12;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.pilot-investment-inner {
  max-width: 64rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.6rem;
}

.pilot-eyebrow--light {
  color: var(--orange);
}

.pilot-investment-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
}

.pilot-investment-price {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  letter-spacing: -0.035em;
  color: var(--orange);
}

.pilot-investment-sep {
  color: rgba(255, 255, 255, 0.4);
}

.pilot-investment-meta {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.pilot-investment-sub {
  margin: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 48rem;
}

.pilot-investment-cta {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  justify-items: start;
}

.pilot-investment-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  max-width: 38rem;
  line-height: 1.5;
}

/* ---- FAQ — dl/dt/dd accordion-free list -------------------------------- */
.pilot-faq {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-strong);
}

.pilot-faq-item {
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--hairline);
}

.pilot-faq dt {
  margin: 0 0 0.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pilot-faq dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 50rem;
}

/* ---- FINAL CTA --------------------------------------------------------- */
.pilot-final-cta {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  position: relative;
}

.pilot-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.pilot-final-cta-inner {
  max-width: 56rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
}

.pilot-final-cta-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.pilot-final-cta-title em {
  font-style: italic;
  color: var(--orange);
}

.pilot-final-cta-sub {
  margin: 0;
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 38rem;
}

.pilot-final-cta-btn {
  margin-top: 0.6rem;
}

.pilot-final-cta-meta {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* =============================================================================
   HOME PAGE — Pilot band (introduces /pilot.html as the core offering)
   Dark-dominant moment so it feels like a marquee on the cream-dominant body.
   ============================================================================= */
.pilot-band-section {
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.pilot-band-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 83, 20, 0.22), transparent 55%),
    radial-gradient(circle at 12% 82%, rgba(255, 83, 20, 0.1), transparent 55%);
  pointer-events: none;
}

.pilot-band-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.14;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.pilot-band-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pilot-band-copy {
  max-width: 64rem;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.8rem);
}

.pilot-band-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 83, 20, 0.5);
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.08);
  width: fit-content;
}

.pilot-band-tag-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 20, 0.2);
}

.pilot-band-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 18ch;
}

.pilot-band-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.018em;
}

.pilot-band-dek {
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46rem;
}

.pilot-band-meta {
  list-style: none;
  padding: 1.4rem 0;
  margin: 0.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.pilot-band-meta li {
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  font-weight: 500;
  color: var(--white);
}

.pilot-band-meta li b {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 0.6rem;
}

.pilot-band-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  margin-top: 0.6rem;
}

.pilot-band-link {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.pilot-band-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* Pilot nav link — subtle highlight so it reads as the headline offering */
.nav-link-pilot {
  position: relative;
  color: var(--orange) !important;
  font-weight: 600 !important;
}

.nav-link-pilot::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* =============================================================================
   MOBILE OPTIMIZATION PASS
   Targeted fixes for the new thesis sections + pilot page at narrow viewports.
   Reduces horizontal overflow, scales type, restacks grids, tightens padding.
   ============================================================================= */

@media (max-width: 48rem) {
  /* HERO — stack the dual CTAs full-width, tighten spacing */
  .hero { padding-top: 5.5rem; padding-inline: 1.2rem; }
  .hero-stack {
    max-width: 100%;
    padding-block: clamp(1rem, 3vw, 2rem);
    gap: 0.95rem;
  }
  .hero-cta-dual {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
  }
  .hero-cta-dual .btn,
  .hero-cta-dual .btn-ghost-light {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.2rem;
  }
  .hero-dek {
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero-trust {
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    justify-content: center;
  }

  /* STAKES — softer padding, tighter type */
  .stakes-section { padding-inline: 1.2rem; }
  .stakes-title { font-size: clamp(1.8rem, 7vw, 3rem); }
  .stakes-stats li {
    padding: 1.4rem 0;
    border-right: none;
  }
  .stakes-stat-num { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .stakes-stat-label { max-width: 100%; }

  /* WHY-FAIL — type scale + tighter padding */
  .why-fail-section { padding-inline: 1.2rem; }
  .why-fail-title { font-size: clamp(2rem, 8vw, 3.4rem); }
  .why-fail-body { font-size: 1rem; }

  /* BUILD-AND-RUN — single column pills + smaller section padding */
  .build-run-section { padding-inline: 1.2rem; }
  .build-run-pills { grid-template-columns: 1fr; gap: 0.4rem 0; }
  .build-run-pills li {
    font-size: 0.98rem;
    padding: 0.85rem 0;
  }

  /* SERVICES — already collapses; reduce card padding */
  .service-card {
    padding: 1.4rem 1.2rem;
  }
  .service-card-title { font-size: 1.35rem; }
  .service-card-body { font-size: 0.95rem; }
  .service-card-list li { font-size: 0.66rem; }

  /* FRONT DOORS — already 1-col; reduce padding */
  .front-door { padding: 1.4rem 1.2rem; }
  .front-door-title { font-size: 1.3rem; }
  .front-door-body { font-size: 0.95rem; }

  /* TIERS — full-width cards on mobile */
  .tiers-grid-v2 { grid-template-columns: 1fr; gap: 1rem; }
  .tier-card-v2 { padding: 1.5rem 1.3rem; }
  .tier-name-v2 { font-size: 1.25rem; }
  .tier-price-amount { font-size: 2.4rem; }
  .tiers-foot-v2 { font-size: 0.85rem; line-height: 1.6; }

  /* SEE THE GOOD — scale headline so it doesn't overflow */
  .see-the-good { font-size: clamp(3rem, 14vw, 5rem); }
  .final-cta-dual {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
  }
  .final-cta-dual .btn,
  .final-cta-dual .btn-ghost-light {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.2rem;
  }
  .proof-row {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .proof-badge {
    padding: 1rem 1.1rem;
  }

  /* SERVICES INTRO — wider edge padding */
  .services-section { padding-inline: 1.2rem; }

  /* TIERS section */
  .tiers-section-v2 { padding-inline: 1.2rem; }
  .front-doors { gap: 0.8rem; }
}

@media (max-width: 30rem) {
  /* Very narrow mobile — tighten further */
  .hero-eyebrow {
    font-size: 0.56rem;
    padding: 0.3rem 0.65rem;
  }
  .hero-title { font-size: 3.6rem; }
  .stakes-section,
  .why-fail-section,
  .build-run-section,
  .services-section,
  .tiers-section-v2 {
    padding-inline: 1rem;
  }
}

/* ====== PILOT PAGE mobile ====== */
@media (max-width: 48rem) {
  .pilot-hero {
    padding: 4.5rem 1.2rem 3rem;
  }
  .pilot-hero-inner { gap: 1.1rem; }
  .pilot-tag { font-size: 0.62rem; letter-spacing: 0.14em; padding: 0.4rem 0.8rem; }
  .pilot-hero-title {
    font-size: clamp(2rem, 8vw, 3.4rem);
  }
  .pilot-hero-dek { font-size: 1.02rem; }
  .pilot-hero-meta {
    gap: 1rem;
    padding: 1rem 0;
  }
  .pilot-meta-item { min-width: calc(50% - 0.5rem); }
  .pilot-meta-value { font-size: 1.2rem; }
  .pilot-hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .pilot-hero-cta .btn { width: 100%; justify-content: center; padding: 1rem 1.2rem; }
  .pilot-hero-link { align-self: flex-start; }

  /* Pilot sections */
  .pilot-section { padding: 3.5rem 1.2rem; }
  .pilot-h2 { font-size: clamp(1.9rem, 8vw, 3rem); }
  .pilot-body-lg { font-size: 1.05rem; }
  .pilot-body { font-size: 0.98rem; }

  /* Phase cards — single column */
  .pilot-phases { grid-template-columns: 1fr; gap: 0.9rem; }
  .pilot-phase { padding: 1.4rem 1.2rem; }
  .pilot-phase-num { font-size: 2.4rem; }
  .pilot-phase-title { font-size: 1.4rem; }

  /* Day 91 deliverables */
  .pilot-deliverables li {
    grid-template-columns: 2.4rem 1fr;
    gap: 0.7rem;
    padding: 1.1rem 0;
  }
  .pilot-deliverables li span { font-size: 1rem; }

  /* Who it's for */
  .pilot-for-list li {
    font-size: 1.15rem;
    padding: 0.95rem 0 0.95rem 1.4rem;
  }

  /* Investment band */
  .pilot-investment { padding: 4rem 1.2rem; }
  .pilot-investment-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .pilot-investment-sep { display: none; }
  .pilot-investment-price { font-size: clamp(2.8rem, 14vw, 4rem); }
  .pilot-investment-meta { font-size: 1rem; }
  .pilot-investment-cta .btn { width: 100%; justify-content: center; padding: 1rem 1.2rem; }

  /* FAQ */
  .pilot-faq dt { font-size: 1.1rem; }
  .pilot-faq dd { font-size: 0.95rem; }

  /* Final CTA */
  .pilot-final-cta { padding: 4rem 1.2rem; }
  .pilot-final-cta-title { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .pilot-final-cta-btn { width: 100%; justify-content: center; padding: 1rem 1.2rem; }
}

/* =============================================================================
   /readiness.html + /visibility.html — TOOL PAGES
   Shared editorial design system. Single-purpose pages with lead-capture forms.
   ============================================================================= */

.tool-hero {
  padding: clamp(6rem, 11vw, 11rem) var(--edge) clamp(4rem, 7vw, 6rem);
  background: var(--white);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.tool-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.tool-hero-inner {
  max-width: 72rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.4rem, 2.5vw, 2.4rem);
  justify-items: start;
}

.tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 83, 20, 0.4);
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.06);
}

.tool-tag-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 20, 0.18);
}

.tool-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 18ch;
}

.tool-hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.022em;
}

.tool-hero-dek {
  margin: 0;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 52rem;
}

.tool-hero-dek strong {
  color: var(--ink);
  font-weight: 600;
}

.tool-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 2.5vw, 2.2rem) clamp(1.6rem, 3vw, 3rem);
  padding: clamp(1.2rem, 2vw, 1.8rem) 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  width: 100%;
  margin-top: 0.4rem;
}

.tool-meta-item {
  display: grid;
  gap: 0.3rem;
}

.tool-meta-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.tool-meta-value {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.tool-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  margin-top: 0.4rem;
}

.tool-hero-link {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.tool-hero-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* ---- Generic section container ----------------------------------------- */
.tool-section {
  padding: clamp(5rem, 9vw, 8rem) var(--edge);
  background: var(--white);
  color: var(--ink);
  position: relative;
}

.tool-section--what { background: var(--cream); }
.tool-section--lenses { background: var(--white); }
.tool-section--curve { background: var(--cream); }
.tool-section--sample { background: var(--white); }
.tool-section--next { background: var(--cream); }
.tool-section--stats { background: var(--white); }

.tool-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.tool-section-inner {
  max-width: 78rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.tool-section-inner--narrow {
  max-width: 56rem;
}

.tool-section-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tool-section-dek {
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 48rem;
}

.tool-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  width: fit-content;
}

.tool-eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.tool-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 22ch;
}

.tool-h2 em {
  font-style: italic;
  color: var(--orange);
}

.tool-body-lg {
  margin: 0 0 1.2rem;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 48rem;
}

.tool-body-lg em {
  font-style: italic;
  color: var(--ink);
}

.tool-body {
  margin: 0 0 1.2rem;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 46rem;
}

.tool-body--mark {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--orange);
  padding-left: 1.2rem;
  margin-top: 1.8rem;
}

.tool-body--mark em {
  font-style: italic;
  color: var(--orange);
}

/* ---- LENSES / DIMENSIONS — 4-card grid ---------------------------------- */
.lens-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

@media (max-width: 56rem) { .lens-grid { grid-template-columns: 1fr; } }

.lens-card {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out-quart);
}

.tool-section--lenses .lens-card { background: var(--white); }
.tool-section--curve .lens-card { background: var(--white); }

.lens-card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}

.lens-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
}

.lens-title {
  margin: 0.3rem 0 0;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.lens-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute);
}

.lens-body em {
  font-style: italic;
  color: var(--ink);
}

.lens-list {
  list-style: none;
  padding: 1rem 0 0;
  margin: 0.4rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.5rem;
}

.lens-list li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink-mid);
}

.lens-list li::before {
  content: "+";
  flex-shrink: 0;
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ---- MATURITY CURVE — vertical stages ---------------------------------- */
.curve-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
  position: relative;
}

/* Subtle connector rail running down the left edge of the meta column */
.curve-stack::before {
  content: "";
  position: absolute;
  left: 2.4rem;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(255, 83, 20, 0.4) 0%,
    rgba(17, 17, 17, 0.12) 40%,
    rgba(17, 17, 17, 0.06) 100%);
  pointer-events: none;
}

@media (max-width: 56rem) {
  .curve-stack::before { display: none; }
}

.curve-stage {
  /* Explicit 3-track layout so meta sits in col 1 and BOTH title + body land in col 2 */
  display: grid;
  grid-template-columns: 9.6rem 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
  row-gap: 0.4rem;
  align-items: start;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(14px);
  animation: curveStageIn 0.7s var(--ease-out-quart) forwards;
  position: relative;
}

.curve-stage:nth-child(1) { animation-delay: 0.08s; }
.curve-stage:nth-child(2) { animation-delay: 0.18s; }
.curve-stage:nth-child(3) { animation-delay: 0.28s; }
.curve-stage:nth-child(4) { animation-delay: 0.38s; }

@keyframes curveStageIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .curve-stage { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 56rem) {
  .curve-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 0.6rem;
  }
}

.curve-stage-meta {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

@media (max-width: 56rem) {
  .curve-stage-meta { grid-row: auto; flex-direction: row; align-items: baseline; gap: 0.9rem; }
}

.curve-stage-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--orange);
}

.curve-stage-range {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.curve-stage-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

@media (max-width: 56rem) {
  .curve-stage-title { grid-column: 1; grid-row: auto; }
}

.curve-stage-body {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 60ch;
}

@media (max-width: 56rem) {
  .curve-stage-body { grid-column: 1; grid-row: auto; }
}

.curve-stage-body strong {
  color: var(--ink);
  font-weight: 600;
}

/* Tiny orange dot anchored to the connector rail for each stage */
.curve-stage::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 2.1rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px var(--white);
  transform: translateX(2.4rem) translateX(-50%);
}

@media (max-width: 56rem) {
  .curve-stage::after { display: none; }
}

/* ---- SAMPLE DELIVERABLES — numbered list -------------------------------- */
.sample-deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-strong);
}

.sample-deliverables li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.sample-deliverables li b {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.sample-deliverables li span {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
}

.sample-deliverables li span em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--mute);
  font-size: 0.95em;
}

/* ---- VISIBILITY STATS — 3-column ---------------------------------------- */
.visibility-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 56rem) { .visibility-stats { grid-template-columns: 1fr; } }

.visibility-stats li {
  padding: clamp(2rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 2rem);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

@media (max-width: 56rem) { .visibility-stats li { border-right: none; } }

.visibility-stats li:last-child { border-right: none; }

.visibility-stat-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3.6rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.visibility-stat-num em {
  font-style: normal;
  font-size: 0.6em;
  color: var(--orange);
  vertical-align: super;
  margin-left: 0.05em;
}

.visibility-stat-label {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--mute);
  max-width: 28ch;
  margin-top: 0.4rem;
}

/* ---- FORM SECTION — dark "punctuation" band ---------------------------- */
.tool-form-section {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.tool-form-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 83, 20, 0.18), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(255, 83, 20, 0.1), transparent 55%);
  pointer-events: none;
}

.tool-form-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.12;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.tool-form-inner {
  max-width: 48rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.4rem;
}

.tool-eyebrow--light { color: var(--orange); }

.tool-form-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
}

.tool-form-sub {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 38rem;
}

.tool-form {
  display: grid;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.tool-form-field {
  display: grid;
  gap: 0.5rem;
}

.tool-form-field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.tool-form-field input {
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.tool-form-field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.tool-form-field input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.1);
}

.tool-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
  padding: 1.2rem 2rem;
  background: var(--white);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-out-quart), box-shadow 0.4s ease;
}

.tool-form-submit:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(255, 83, 20, 0.65);
}

.tool-form-submit:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}

.tool-form-fine {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  max-width: 38rem;
}

.tool-form-success {
  display: grid;
  gap: 0.6rem;
  padding: 1.6rem 1.8rem;
  background: rgba(255, 83, 20, 0.1);
  border: 1px solid rgba(255, 83, 20, 0.4);
  border-radius: var(--radius-md);
}

.tool-form-success strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--white);
}

.tool-form-success span {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.tool-form-success a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tool-form-error {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.5);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: rgba(255, 200, 200, 1);
}

/* ---- NEXT MOVES — service-line cards ----------------------------------- */
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 64rem) { .next-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 44rem) { .next-grid { grid-template-columns: 1fr; } }

.next-card {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out-quart);
}

.next-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.next-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
}

.next-card h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.next-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--mute);
}

.next-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Pilot variant — declared AFTER the base rules so it wins the cascade.
   Higher specificity (.next-card.next-card--pilot) defends against future overrides. */
.next-card.next-card--pilot {
  background: var(--ink);
  color: var(--white);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}

.next-card.next-card--pilot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 0% 0%, rgba(255, 83, 20, 0.18), transparent 60%);
  pointer-events: none;
}

.next-card.next-card--pilot:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.next-card.next-card--pilot .next-num { color: var(--orange); position: relative; z-index: 1; }
.next-card.next-card--pilot h3 { color: #ffffff; position: relative; z-index: 1; }
.next-card.next-card--pilot p { color: rgba(255, 255, 255, 0.72); position: relative; z-index: 1; }
.next-card.next-card--pilot .next-link { color: var(--orange); position: relative; z-index: 1; }

/* ---- FINAL CTA --------------------------------------------------------- */
.tool-final-cta {
  padding: clamp(6rem, 11vw, 10rem) var(--edge);
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  position: relative;
}

.tool-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.tool-final-cta-inner {
  max-width: 56rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
}

.tool-final-cta-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.tool-final-cta-title em {
  font-style: italic;
  color: var(--orange);
}

.tool-final-cta-sub {
  margin: 0;
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 38rem;
}

.tool-final-cta-btn { margin-top: 0.6rem; }

.tool-final-cta-meta {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Mobile pass for tool pages */
@media (max-width: 48rem) {
  .tool-hero { padding: 4.5rem 1.2rem 3rem; }
  .tool-hero-inner { gap: 1.1rem; }
  .tool-tag { font-size: 0.62rem; letter-spacing: 0.14em; padding: 0.4rem 0.8rem; }
  .tool-hero-meta { gap: 1rem; padding: 1rem 0; }
  .tool-meta-item { min-width: calc(50% - 0.5rem); }
  .tool-hero-cta { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .tool-hero-cta .btn { width: 100%; justify-content: center; padding: 1rem 1.2rem; }
  .tool-hero-link { align-self: flex-start; }

  .tool-section { padding: 3.5rem 1.2rem; }
  .tool-form-section { padding: 4rem 1.2rem; }
  .tool-final-cta { padding: 4rem 1.2rem; }

  .lens-card { padding: 1.4rem 1.2rem; }
  .curve-stage { padding: 1.6rem 1.3rem; }
  .next-card { padding: 1.4rem 1.2rem; }

  .tool-form-submit { width: 100%; }
  .tool-final-cta-btn { width: 100%; justify-content: center; padding: 1rem 1.2rem; }
}

/* =============================================================================
   ASSESSMENT + SCAN — embedded tool UIs (/readiness-assess + /visibility-scan)
   Single-purpose pages, no global nav, focused on the task.
   ============================================================================= */

/* =============================================================================
   ASSESSMENT & SCAN — LIGHT MODE
   Warm off-white background, near-black text, orange accent,
   complementary impact colors (red urgent, amber warning, green strong).
   ============================================================================= */

.assess-body, .scan-body {
  /* Light-mode tokens scoped to the tool pages */
  --tool-bg: #f7f5ef;             /* warm cream paper */
  --tool-bg-elev: #ffffff;        /* card / elevated surface */
  --tool-bg-tint: #faf8f3;        /* secondary panel */
  --tool-ink: #0d0d0c;            /* primary text */
  --tool-ink-soft: #4a4945;       /* secondary text */
  --tool-ink-mute: #8a8880;       /* tertiary / labels */
  --tool-line: #e6e3d9;           /* border */
  --tool-line-soft: #efece4;      /* subtle divider */
  --tool-orange: #ff5314;
  --tool-orange-soft: #fff1eb;    /* orange tint background */
  --tool-orange-deep: #c63f0c;
  --tool-red: #d92d20;            /* urgent / high impact */
  --tool-red-soft: #fef0ee;
  --tool-amber: #b54708;          /* warning / medium impact */
  --tool-amber-soft: #fef6ec;
  --tool-green: #067647;          /* strong / good */
  --tool-green-soft: #ecfbf2;
  --tool-blue: #1849a9;           /* informational */
  --tool-blue-soft: #eef4ff;

  background: var(--tool-bg);
  color: var(--tool-ink);
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Subtle paper grain */
  background-image:
    radial-gradient(rgba(13, 13, 12, 0.025) 1px, transparent 1px),
    radial-gradient(rgba(13, 13, 12, 0.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
}

.assess-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem clamp(1.4rem, 4vw, 3rem);
  border-bottom: 1px solid var(--tool-line);
  background: rgba(255, 255, 255, 0.85);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.assess-header .brand-mark img {
  height: 2.4rem;
  width: auto;
  /* No invert — logo reads dark on light */
  filter: none;
}

.assess-progress {
  height: 4px;
  background: rgba(13, 13, 12, 0.08);
  border-radius: 999px;
  overflow: hidden;
  max-width: 28rem;
  width: 100%;
}

.assess-progress-bar {
  height: 100%;
  background: var(--tool-orange);
  border-radius: 999px;
  transition: width 0.6s var(--ease-out-quart);
}

.assess-counter {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tool-ink-mute);
  white-space: nowrap;
}

.assess-main, .scan-main {
  flex: 1;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem);
  max-width: 56rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.assess-question {
  display: grid;
  gap: 1.4rem;
}

.assess-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tool-orange);
}

.assess-prompt {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--tool-ink);
  max-width: 38ch;
}

.assess-prompt em {
  font-style: italic;
  color: var(--tool-orange);
}

.assess-helper {
  margin: -0.4rem 0 1rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tool-ink-soft);
}

.assess-options {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.assess-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  color: var(--tool-ink);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 13, 12, 0.04);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--ease-out-quart), box-shadow 0.3s ease;
}

.assess-option:hover {
  border-color: rgba(255, 83, 20, 0.5);
  background: var(--tool-orange-soft);
  box-shadow: 0 2px 6px rgba(13, 13, 12, 0.06);
}

.assess-option.is-selected {
  border-color: var(--tool-orange);
  background: var(--tool-orange-soft);
  box-shadow: 0 0 0 1px var(--tool-orange), 0 4px 12px rgba(255, 83, 20, 0.16);
}

.assess-option-dot {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--tool-ink-mute);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.3s ease;
}

.assess-option.is-selected .assess-option-dot {
  border-color: var(--tool-orange);
}

.assess-option.is-selected .assess-option-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--tool-orange);
  border-radius: 50%;
}

.assess-option-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--tool-ink-mute);
  border-radius: 6px;
  position: relative;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.assess-option.is-selected .assess-option-check {
  border-color: var(--tool-orange);
  background: var(--tool-orange);
}

.assess-option.is-selected .assess-option-check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.assess-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem clamp(1.4rem, 4vw, 3rem);
  border-top: 1px solid var(--tool-line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.assess-footer.is-hidden { display: none; }

.assess-btn-primary, .assess-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-out-quart), opacity 0.3s ease, box-shadow 0.3s ease;
}

.assess-btn-primary {
  margin-left: auto;
  background: var(--tool-ink);
  color: #ffffff;
}

.assess-btn-primary:hover:not(:disabled) {
  background: var(--tool-orange);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 83, 20, 0.22);
}

.assess-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.assess-btn-secondary {
  background: transparent;
  color: var(--tool-ink);
  border-color: var(--tool-line);
}

.assess-btn-secondary:hover {
  border-color: var(--tool-ink);
  background: rgba(13, 13, 12, 0.04);
}

/* ---- RESULTS DASHBOARD ------------------------------------------------- */
.assess-results {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.result-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(13, 13, 12, 0.04), 0 8px 24px rgba(13, 13, 12, 0.06);
  position: relative;
  overflow: hidden;
}

.result-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 100% 0%, rgba(255, 83, 20, 0.06), transparent);
  pointer-events: none;
}

@media (max-width: 44rem) {
  .result-hero { grid-template-columns: 1fr; gap: 1.4rem; }
}

.result-score {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.result-score-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--tool-orange);
}

.result-score-denom {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--tool-ink-mute);
}

.result-stage {
  display: grid;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}

.result-stage-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tool-orange);
}

.result-stage-name {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tool-ink);
}

.result-stage-body {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--tool-ink-soft);
  max-width: 44ch;
}

.result-section {
  display: grid;
  gap: 1rem;
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--tool-line);
}

.result-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--tool-ink);
}

.result-body {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tool-ink-soft);
}

.result-body-mute { color: var(--tool-ink-mute); }

.result-body strong { color: var(--tool-ink); font-weight: 600; }

.result-lens-list {
  display: grid;
  gap: 0.5rem;
}

.result-lens-row {
  display: grid;
  grid-template-columns: 12rem 1fr 3.6rem;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem 0.7rem 0.9rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  border-left-width: 3px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.result-lens-row.is-weak { border-left-color: var(--tool-red); }
.result-lens-row.is-medium { border-left-color: var(--tool-amber); }
.result-lens-row.is-strong { border-left-color: var(--tool-green); }

@media (max-width: 44rem) {
  .result-lens-row { grid-template-columns: 9rem 1fr 2.4rem; gap: 0.7rem; padding: 0.6rem 0.8rem; }
}

.result-lens-label {
  font-family: var(--font-sans);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--tool-ink);
  line-height: 1.25;
  text-transform: capitalize;
}

.result-lens-bar {
  height: 8px;
  background: var(--tool-line-soft);
  border-radius: 999px;
  overflow: hidden;
}

.result-lens-fill {
  height: 100%;
  border-radius: 999px;
  transform-origin: left;
  animation: fillBarLight 1.4s var(--ease-out-quart) forwards;
}

.result-lens-row.is-weak .result-lens-fill {
  background: linear-gradient(90deg, var(--tool-red) 0%, #f04438 100%);
}
.result-lens-row.is-medium .result-lens-fill {
  background: linear-gradient(90deg, var(--tool-amber) 0%, #f79009 100%);
}
.result-lens-row.is-strong .result-lens-fill {
  background: linear-gradient(90deg, var(--tool-green) 0%, #12b76a 100%);
}

@keyframes fillBarLight {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.result-lens-score {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--tool-ink);
  text-align: right;
}

.result-lens-row.is-weak .result-lens-score { color: var(--tool-red); }
.result-lens-row.is-medium .result-lens-score { color: var(--tool-amber); }
.result-lens-row.is-strong .result-lens-score { color: var(--tool-green); }

.result-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.result-bullet-list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tool-ink);
}

.result-bullet-list li.is-gap .result-bullet { color: var(--tool-red); }
.result-bullet-list li.is-fix .result-bullet { color: var(--tool-green); }

.result-bullet {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--tool-orange);
  font-size: 1.05rem;
}

.result-domain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.result-domain-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.85rem 0.4rem;
  border-bottom: 1px solid var(--tool-line);
}

.result-domain-list li:last-child { border-bottom: none; }

.result-domain-rank {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tool-orange);
}

.result-domain-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--tool-ink);
}

.result-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

.result-cta-row .btn {
  flex: 0 1 auto;
}

/* Light-mode CTA scoped to the assess/scan pages — use a different name
   inside .assess-body so it doesn't conflict with existing .btn-dark/.btn-ghost-dark
   used elsewhere on dark backgrounds. */
.assess-body .btn-dark,
.scan-body .btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  background: var(--tool-ink);
  color: #ffffff;
  border: 1px solid var(--tool-ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.assess-body .btn-dark:hover,
.scan-body .btn-dark:hover {
  background: var(--tool-orange);
  border-color: var(--tool-orange);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 83, 20, 0.22);
}

.assess-body .btn-ghost-dark,
.scan-body .btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  background: transparent;
  color: var(--tool-ink);
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.assess-body .btn-ghost-dark:hover,
.scan-body .btn-ghost-dark:hover {
  border-color: var(--tool-ink);
  background: rgba(13, 13, 12, 0.04);
}

.result-home-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tool-ink-mute);
  text-decoration: none;
  padding-top: 1.4rem;
  border-top: 1px solid var(--tool-line);
  transition: color 0.2s ease;
}

.result-home-link:hover { color: var(--tool-orange); }

/* ---- VISIBILITY SCAN — probe list during scan -------------------------- */
.scan-progress-view {
  display: grid;
  gap: 1.6rem;
}

.scan-h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--tool-ink);
}

.scan-h1 em {
  font-style: italic;
  color: var(--tool-orange);
}

.scan-sub {
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--tool-ink-soft);
}

.scan-probe-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.scan-probe {
  display: grid;
  grid-template-columns: 8rem 1fr 28px;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(13, 13, 12, 0.03);
  transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.scan-probe.is-done {
  border-color: rgba(6, 118, 71, 0.32);
  background: var(--tool-green-soft);
  box-shadow: 0 1px 3px rgba(6, 118, 71, 0.06);
}

@media (max-width: 44rem) {
  .scan-probe { grid-template-columns: 1fr 24px; }
  .scan-probe-engine { grid-column: 1 / -2; }
  .scan-probe-prompt { grid-column: 1 / -2; }
}

.scan-probe-engine {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tool-orange);
}

.scan-probe-prompt {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--tool-ink-soft);
}

.scan-probe-status {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tool-green);
}

.scan-probe-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(13, 13, 12, 0.12);
  border-top-color: var(--tool-orange);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.scan-probe.is-done .scan-probe-spinner { display: none; }

.scan-probe-check {
  font-size: 18px;
  font-weight: 700;
  color: var(--tool-green);
}

.scan-error {
  display: grid;
  gap: 1.4rem;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--tool-red-soft);
  border: 1px solid rgba(217, 45, 32, 0.3);
  border-radius: var(--radius-lg);
  color: var(--tool-ink);
}

.scan-error .btn { justify-self: start; }

/* Mobile pass for assess/scan */
@media (max-width: 48rem) {
  .assess-header {
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
  }
  .assess-header .brand-mark img { height: 2rem; }
  .assess-counter {
    grid-column: 1 / -1;
    font-size: 0.66rem;
  }
  .assess-footer {
    flex-direction: column-reverse;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
  }
  .assess-btn-primary,
  .assess-btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .assess-main, .scan-main { padding: 2rem 1.2rem; }
}

/* =============================================================================
   ASSESSMENT v2 — analyzing + confirm states
   ============================================================================= */

.assess-analyzing {
  display: grid;
  gap: 1.4rem;
}

.assess-analyzing .assess-prompt em {
  font-style: italic;
  color: var(--tool-orange);
}

.analyzing-steps {
  list-style: none;
  padding: 1.2rem 0 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--tool-line);
}

.analyzing-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--tool-ink-mute);
  transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

.analyzing-step.is-active {
  border-color: rgba(255, 83, 20, 0.55);
  background: var(--tool-orange-soft);
  color: var(--tool-ink);
  box-shadow: 0 1px 3px rgba(255, 83, 20, 0.08);
}

.analyzing-step.is-done {
  border-color: var(--tool-line);
  background: var(--tool-bg-elev);
  color: var(--tool-ink-soft);
}

.analyzing-step-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(13, 13, 12, 0.1);
  border-top-color: var(--tool-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.analyzing-step:not(.is-active):not(.is-done) .analyzing-step-spinner {
  border-color: rgba(13, 13, 12, 0.08);
  border-top-color: rgba(13, 13, 12, 0.18);
  animation: none;
}

.analyzing-step.is-done .analyzing-step-spinner {
  border: none;
  background: var(--tool-green);
  position: relative;
  animation: none;
}

.analyzing-step.is-done .analyzing-step-spinner::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

/* ---- CONFIRM screen — "here's what we picked up" ---- */
.assess-confirm {
  display: grid;
  gap: 1.4rem;
}

.assess-confirm .assess-prompt em {
  font-style: italic;
  color: var(--tool-orange);
}

.confirm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 0.6rem;
}

@media (max-width: 56rem) { .confirm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 28rem) { .confirm-grid { grid-template-columns: 1fr; } }

.confirm-card {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(13, 13, 12, 0.03);
}

.confirm-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tool-orange);
}

.confirm-value {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--tool-ink);
}

.confirm-sub {
  font-size: 0.86rem;
  color: var(--tool-ink-mute);
  line-height: 1.4;
}

.confirm-section {
  display: grid;
  gap: 0.85rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--tool-line);
}

.confirm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.confirm-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tool-ink);
}

.confirm-impact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.confirm-impact {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.95rem 1.1rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  border-left-width: 3px;
}

.confirm-impact:has(.confirm-impact--high) { border-left-color: var(--tool-red); }
.confirm-impact:has(.confirm-impact--medium) { border-left-color: var(--tool-amber); }
.confirm-impact:has(.confirm-impact--low) { border-left-color: var(--tool-line); }

.confirm-impact-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.confirm-impact--high {
  background: var(--tool-red-soft);
  color: var(--tool-red);
  border: 1px solid rgba(217, 45, 32, 0.3);
}

.confirm-impact--medium {
  background: var(--tool-amber-soft);
  color: var(--tool-amber);
  border: 1px solid rgba(181, 71, 8, 0.3);
}

.confirm-impact--low {
  background: var(--tool-bg-tint);
  color: var(--tool-ink-mute);
  border: 1px solid var(--tool-line);
}

.confirm-impact-area {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tool-ink);
  grid-column: 2;
  text-transform: capitalize;
}

.confirm-impact-note {
  grid-column: 2;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tool-ink-soft);
}

.confirm-correction {
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--tool-line);
  font-size: 0.96rem;
  color: var(--tool-ink-soft);
}

.confirm-correct-btn {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(13, 13, 12, 0.3);
  padding: 0 0 1px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--tool-ink);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.confirm-correct-btn:hover {
  color: var(--tool-orange);
  border-color: var(--tool-orange);
}

.confirm-textarea {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.9rem 1.1rem;
  background: var(--tool-bg-elev);
  border: 1px solid var(--tool-line);
  border-radius: var(--radius-md);
  color: var(--tool-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  resize: vertical;
  min-height: 80px;
}

.confirm-textarea:focus {
  outline: none;
  border-color: var(--tool-orange);
  box-shadow: 0 0 0 3px rgba(255, 83, 20, 0.12);
}

.confirm-textarea::placeholder { color: var(--tool-ink-mute); }

/* =============================================================================
   AI LADDER v3 — horizontal step chart, progressive heights, icons
   Cream background, teal/orange/burgundy color-coded cards
   ============================================================================= */

.ladder-v3 {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(96px, 12vw, 180px) clamp(24px, 4vw, 96px);
  overflow: hidden;
}

.ladder-v3::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse 60% 60% at 80% 30%, rgba(255, 106, 61, 0.06), transparent 70%);
  pointer-events: none;
}

.ladder-v3-inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}

/* HEADER */
.ladder-v3-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.ladder-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 106, 61, 0.32);
  border-radius: 999px;
  background: rgba(255, 106, 61, 0.06);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--signal-orange);
}

.ladder-v3-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
}

.ladder-v3-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.038em;
  color: var(--ink);
}

.ladder-v3-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--signal-orange);
  letter-spacing: -0.025em;
}

.ladder-v3-dek {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(11, 13, 16, 0.62);
  max-width: 640px;
}

/* CHART */
.ladder-v3-chart {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.ladder-v3-yaxis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: 32px;
  flex-shrink: 0;
  padding: 8px 0;
}

.ladder-v3-yaxis-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.ladder-v3-yaxis-top { color: var(--burgundy); }
.ladder-v3-yaxis-bottom { color: var(--ocean-smoke); }

.ladder-v3-yaxis-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--burgundy) 0%,
    var(--signal-orange) 50%,
    var(--deep-teal) 100%);
  opacity: 0.5;
}

.ladder-v3-steps {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-height: 720px;
}

/* STEP CARDS — progressive heights */
.ladder-v3-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--white-pure, #ffffff);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.03);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s ease, border-color 0.3s ease;
}

.ladder-v3-step:hover,
.ladder-v3-step:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11, 13, 16, 0.08);
  outline: none;
}

/* Target full heights — used by scroll-pin JS, also fallback if no pin */
.ladder-v3-step[data-rung="1"] { --card-target-h: 340px; }
.ladder-v3-step[data-rung="2"] { --card-target-h: 425px; }
.ladder-v3-step[data-rung="3"] { --card-target-h: 510px; }
.ladder-v3-step[data-rung="4"] { --card-target-h: 600px; }
.ladder-v3-step[data-rung="5"] { --card-target-h: 690px; }

/* Card height interpolates from compact baseline → full target via --card-h.
   JS scroll handler sets --card-h on each card. */
.ladder-v3-step {
  height: var(--card-h, var(--card-target-h, 340px));
  transition: height 0.2s linear, transform 0.4s var(--ease-out-quart),
              box-shadow 0.4s ease, border-color 0.3s ease;
}

.ladder-v3-step-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ladder-v3-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
}

.ladder-v3-icon svg {
  width: 22px;
  height: 22px;
}

.ladder-v3-step-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.ladder-v3-step-num {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 56px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.ladder-v3-step-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ladder-v3-step-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.ladder-v3-step-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(11, 13, 16, 0.6);
}

/* COLOR VARIANTS */
.ladder-v3-step--teal .ladder-v3-icon { color: var(--deep-teal); background: rgba(168, 202, 204, 0.18); border-color: rgba(34, 67, 74, 0.22); }
.ladder-v3-step--teal .ladder-v3-step-tag,
.ladder-v3-step--teal .ladder-v3-step-num { color: var(--deep-teal); }

.ladder-v3-step--orange .ladder-v3-icon { color: var(--signal-orange); background: rgba(255, 106, 61, 0.10); border-color: rgba(255, 106, 61, 0.28); }
.ladder-v3-step--orange .ladder-v3-step-tag,
.ladder-v3-step--orange .ladder-v3-step-num { color: var(--signal-orange); }

.ladder-v3-step--featured {
  border: 1px solid rgba(255, 106, 61, 0.4);
  box-shadow: 0 8px 24px rgba(255, 106, 61, 0.10);
}

.ladder-v3-step--burgundy {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 12px 32px rgba(11, 13, 16, 0.18);
}

.ladder-v3-step--burgundy::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 60%;
  background: radial-gradient(circle at top right, rgba(255, 106, 61, 0.28), transparent 70%);
  pointer-events: none;
}

.ladder-v3-step--burgundy .ladder-v3-icon {
  color: var(--signal-orange);
  background: rgba(255, 106, 61, 0.16);
  border-color: rgba(255, 106, 61, 0.4);
  position: relative;
  z-index: 1;
}

.ladder-v3-step--burgundy .ladder-v3-step-tag,
.ladder-v3-step--burgundy .ladder-v3-step-num { color: var(--signal-orange); position: relative; z-index: 1; }

.ladder-v3-step--burgundy .ladder-v3-step-title { color: var(--paper); position: relative; z-index: 1; }
.ladder-v3-step--burgundy .ladder-v3-step-body { color: rgba(247, 245, 240, 0.7); position: relative; z-index: 1; }
.ladder-v3-step--burgundy .ladder-v3-step-top,
.ladder-v3-step--burgundy .ladder-v3-step-foot { position: relative; z-index: 1; }

/* X AXIS + LEGEND */
.ladder-v3-foot {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 56px;
}

.ladder-v3-xaxis {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ladder-v3-xaxis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ocean-smoke);
  white-space: nowrap;
}

.ladder-v3-xaxis-label-end { color: var(--signal-orange); }

.ladder-v3-xaxis-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    rgba(34, 67, 74, 0.18),
    var(--signal-orange));
}

.ladder-v3-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(11, 13, 16, 0.7);
}

.ladder-v3-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ladder-v3-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ladder-v3-legend-dot--teal { background: var(--deep-teal); }
.ladder-v3-legend-dot--orange { background: var(--signal-orange); }
.ladder-v3-legend-dot--burgundy { background: var(--burgundy); }

/* RESPONSIVE — collapse to vertical stack on mobile */
@media (max-width: 960px) {
  .ladder-v3-chart { flex-direction: column; gap: 32px; }
  .ladder-v3-yaxis { flex-direction: row; width: 100%; height: 32px; }
  .ladder-v3-yaxis-label { writing-mode: horizontal-tb; transform: none; }
  .ladder-v3-yaxis-line { height: 1px; width: auto; background: linear-gradient(to right, var(--deep-teal), var(--signal-orange), var(--burgundy)); }
  .ladder-v3-steps { flex-direction: column; min-height: auto; align-items: stretch; }
  .ladder-v3-step,
  .ladder-v3-step[data-rung] { height: auto; min-height: 200px; --card-h: auto; }
  .ladder-v3-foot { padding-left: 0; }
}

/* =============================================================================
   AI LADDER — SCROLL-PINNED + DRIVEN GROWTH
   The section becomes a tall scroll container. The inner pin sticks to the
   viewport while the user scrolls, and a JS handler reads scroll progress to
   grow each card sequentially L→R.
   ============================================================================= */

.ladder-v3-pinned {
  position: relative;
  padding: 0;
  background: var(--paper);
  /* CRITICAL: override .ladder-v3's overflow:hidden — sticky descendants need
     their scrolling ancestor to NOT clip overflow. */
  overflow: visible;
}

/* Move the soft orange glow from ::before (which forced overflow:hidden on the
   parent) onto the pin instead so sticky still works. */
.ladder-v3-pinned::before { display: none; }
.ladder-v3-pin::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse 60% 60% at 80% 30%, rgba(255, 106, 61, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ladder-v3-pinned .ladder-v3-inner { position: relative; z-index: 1; }

.ladder-v3-scroll {
  position: relative;
  /* Total scroll distance: ~5 viewports of pinned scroll → 500vh */
  height: 500vh;
}

/* Default: pin sits at top of scroll-track. JS switches between
   .is-pinned (position:fixed) and .is-pinned-end (position:absolute at bottom)
   as the user scrolls through the section. */
.ladder-v3-pin {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(56px, 6vw, 96px) clamp(24px, 4vw, 96px);
}

.ladder-v3-pin.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4;
}

.ladder-v3-pin.is-pinned-end {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.ladder-v3-pinned .ladder-v3-inner {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  gap: clamp(24px, 3vw, 40px);
}

.ladder-v3-pinned .ladder-v3-chart {
  /* Smaller min-height since the pin is the viewport */
  min-height: 0;
}

.ladder-v3-pinned .ladder-v3-steps {
  min-height: clamp(380px, 56vh, 600px);
  align-items: flex-end;
}

/* Adjust step max-heights so they fit inside the pinned viewport at ~720h.
   Use vh-relative target heights overriding the px targets above. */
.ladder-v3-pinned .ladder-v3-step[data-rung="1"] { --card-target-h: clamp(170px, 26vh, 240px); }
.ladder-v3-pinned .ladder-v3-step[data-rung="2"] { --card-target-h: clamp(220px, 33vh, 310px); }
.ladder-v3-pinned .ladder-v3-step[data-rung="3"] { --card-target-h: clamp(270px, 40vh, 380px); }
.ladder-v3-pinned .ladder-v3-step[data-rung="4"] { --card-target-h: clamp(320px, 47vh, 450px); }
.ladder-v3-pinned .ladder-v3-step[data-rung="5"] { --card-target-h: clamp(360px, 54vh, 520px); }

/* Compact start state — only icon + tag + numeral visible */
.ladder-v3-step {
  cursor: pointer;
}

.ladder-v3-step-foot {
  /* Hidden when card is compact; revealed as it grows */
  opacity: var(--card-foot-opacity, 1);
  transition: opacity 0.4s ease;
}

/* Header sticks at top while user scrolls — keeps context */
.ladder-v3-pinned .ladder-v3-header {
  flex-shrink: 0;
  margin: 0 auto;
}

.ladder-v3-pinned .ladder-v3-foot {
  flex-shrink: 0;
  padding-top: 8px;
}

@media (max-width: 960px) {
  /* On mobile, skip the pinning — just flow normally */
  .ladder-v3-scroll { height: auto; }
  .ladder-v3-pin { position: relative; top: auto; height: auto; padding: clamp(64px, 10vw, 120px) clamp(24px, 4vw, 48px); }
  .ladder-v3-pinned .ladder-v3-steps { min-height: auto; }
  .ladder-v3-step { height: auto; min-height: 200px; --card-h: auto; }
}

/* =============================================================================
   LADDER RUNG DETAIL DRAWER
   Full-screen takeover when a card is clicked. Richer than the service drawer:
   hero + stats strip + 2-col body + start/skip cards + CTA strip.
   ============================================================================= */

.ladder-drawer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  pointer-events: none;
}

.ladder-drawer.is-open {
  display: block;
  pointer-events: auto;
}

.ladder-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 13, 16, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-quart);
}

.ladder-drawer.is-open .ladder-drawer-overlay {
  opacity: 1;
}

.ladder-drawer-panel {
  position: absolute;
  inset: 4vh 4vw;
  max-width: 1440px;
  max-height: 92vh;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Initial transform/opacity for the fade-in fallback; clip-path animation runs on top */
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 40px 100px rgba(11, 13, 16, 0.5);
  /* clip-path is set inline by JS to animate the circular reveal from card position */
}

.ladder-drawer.is-open .ladder-drawer-panel {
  opacity: 1;
  transform: translateY(0);
}

.ladder-drawer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(11, 13, 16, 0.06);
  border: 1px solid rgba(11, 13, 16, 0.12);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ladder-drawer-close svg { width: 16px; height: 16px; }

.ladder-drawer-close:hover {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(90deg);
}

.ladder-drawer-content {
  overflow-y: auto;
  overflow-x: hidden;
  /* Prevent wheel events from bubbling to the page underneath */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 80px clamp(40px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 13, 16, 0.2) transparent;
  height: 100%;
  flex: 1;
}

/* ---- Drawer hero block ---- */
.ld-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (max-width: 800px) {
  .ld-hero { grid-template-columns: 1fr; }
}

.ld-hero-pillar { display: flex; flex-direction: column; gap: 24px; }

.ld-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 24px;
}

.ld-hero-num {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(140px, 16vw, 220px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.ld-hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  width: max-content;
}

.ld-hero-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }

.ld-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.038em;
  color: var(--ink);
}

.ld-hero-tagline {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: rgba(11, 13, 16, 0.62);
  max-width: 32ch;
}

/* Color variants for the drawer hero */
.ld-hero-icon--teal { background: rgba(168, 202, 204, 0.18); border: 1px solid rgba(34, 67, 74, 0.22); color: var(--deep-teal); }
.ld-hero-icon--orange { background: rgba(255, 106, 61, 0.12); border: 1px solid rgba(255, 106, 61, 0.32); color: var(--signal-orange); }
.ld-hero-icon--burgundy { background: rgba(94, 47, 47, 0.14); border: 1px solid rgba(94, 47, 47, 0.32); color: var(--burgundy); }

.ld-hero-icon svg { width: 44px; height: 44px; }

.ld-hero-num--teal { color: var(--deep-teal); }
.ld-hero-num--orange { color: var(--signal-orange); }
.ld-hero-num--burgundy { color: var(--burgundy); }

.ld-hero-tag--teal { background: var(--paper); border: 1px solid rgba(34, 67, 74, 0.2); color: var(--deep-teal); }
.ld-hero-tag--orange { background: rgba(255, 106, 61, 0.08); border: 1px solid rgba(255, 106, 61, 0.32); color: var(--signal-orange); }
.ld-hero-tag--burgundy { background: rgba(94, 47, 47, 0.08); border: 1px solid rgba(94, 47, 47, 0.32); color: var(--burgundy); }

/* ---- Stats strip ---- */
.ld-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px clamp(20px, 3vw, 32px);
  background: var(--white-pure, #ffffff);
  border: 1px solid var(--hairline);
  border-radius: 18px;
}

@media (max-width: 700px) {
  .ld-stats { grid-template-columns: repeat(2, 1fr); }
}

.ld-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(12px, 2vw, 28px);
  border-right: 1px solid var(--hairline);
}

.ld-stats > .ld-stat:last-child { border-right: none; }
.ld-stat:first-child { padding-left: 0; }

@media (max-width: 700px) {
  .ld-stat { padding: 12px 16px; border-right: none; border-bottom: 1px solid var(--hairline); }
  .ld-stat:nth-child(2n) { border-right: none; }
}

.ld-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.5);
}

.ld-stat-value {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.ld-stat-value--green { color: #067647; }
.ld-stat-value--amber { color: #b54708; }
.ld-stat-value--red { color: var(--burgundy); }

/* ---- Two-column body ---- */
.ld-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 64px);
}

@media (max-width: 900px) {
  .ld-body { grid-template-columns: 1fr; }
}

.ld-col { display: flex; flex-direction: column; gap: 16px; }

.ld-col-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--signal-orange);
}

.ld-col-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--signal-orange);
}

.ld-col-h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.ld-col-body { font-family: var(--font-sans); font-size: 17px; font-weight: 400; line-height: 1.62; color: rgba(11, 13, 16, 0.7); display: flex; flex-direction: column; gap: 14px; }
.ld-col-body strong { color: var(--ink); font-weight: 600; }
.ld-col-body .ld-result { color: var(--signal-orange); font-weight: 600; }

.ld-col-card {
  background: var(--white-pure, #ffffff);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ld-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.ld-pill {
  padding: 5px 11px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.62);
}

/* ---- Fit + Warning cards ---- */
.ld-fit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 800px) {
  .ld-fit-row { grid-template-columns: 1fr; }
}

.ld-fit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 14px;
  border-left-width: 4px;
  border-left-style: solid;
}

.ld-fit--start { background: #ecfbf2; border: 1px solid rgba(6, 118, 71, 0.2); border-left-color: #067647; }
.ld-fit--skip { background: #fef0ee; border: 1px solid rgba(217, 45, 32, 0.2); border-left-color: #d92d20; }

.ld-fit-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.ld-fit--start .ld-fit-head { color: #067647; }
.ld-fit--skip .ld-fit-head { color: #d92d20; }

.ld-fit-list { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink); }

/* ---- CTA strip ---- */
.ld-cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

@media (max-width: 800px) {
  .ld-cta { grid-template-columns: 1fr; }
}

.ld-cta-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(36px, 4vw, 48px);
  border-radius: 22px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.ld-cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle at top right, rgba(255, 106, 61, 0.28), transparent 70%);
  pointer-events: none;
}

.ld-cta-tag {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 106, 61, 0.16);
  border: 1px solid rgba(255, 106, 61, 0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--signal-orange);
  position: relative;
  z-index: 1;
}

.ld-cta-h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--paper);
  position: relative;
  z-index: 1;
}

.ld-cta-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.7);
  max-width: 52ch;
  position: relative;
  z-index: 1;
}

.ld-cta-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--signal-orange);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: max-content;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.ld-cta-action:hover { transform: translateY(-2px); }

.ld-cta-secondary {
  background: var(--white-pure, #ffffff);
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.ld-cta-secondary::before { display: none; }

.ld-cta-secondary .ld-cta-h3 { color: var(--ink); }
.ld-cta-secondary .ld-cta-body { color: rgba(11, 13, 16, 0.62); }

.ld-cta-secondary .ld-cta-action {
  background: transparent;
  color: var(--signal-orange);
  padding: 0;
  border-bottom: 1px solid var(--signal-orange);
  border-radius: 0;
}

.ld-cta-secondary .ld-cta-tag {
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: rgba(11, 13, 16, 0.62);
}

/* Lock body scroll when drawer is open */
body.ladder-drawer-open { overflow: hidden; }

/* No-overflow guard — prevent stray horizontal scroll site-wide */
html, body { overflow-x: hidden; }

/* ================================================================
   v4 HOME — 7-section rebuild (multi-discipline studio + AI wedge)
   ================================================================ */

/* Shared utility — geometric line icons (inline SVG, currentColor) */
.gfw-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: currentColor;
}
.gfw-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.gfw-icon-lg { width: 36px; height: 36px; }
.gfw-icon-xl { width: 56px; height: 56px; }

/* Icon micro-anim — bare arrow rotates 5deg on parent hover */
.disc-card:hover .gfw-icon[data-icon="arrow-up-right"] svg,
.appr-step:hover .gfw-icon[data-icon="arrow-up-right"] svg {
  transform: rotate(-8deg);
  transition: transform 320ms var(--ease-out-quart);
}
.gfw-icon svg { transition: transform 320ms var(--ease-out-quart); }

/* ----- v4 HERO ----- */
.hero-v4 {
  position: relative;
  min-height: clamp(620px, 92vh, 880px);
  display: flex;
  align-items: center;
  background: var(--color-ink);
  color: var(--paper);
  overflow: hidden;
  padding: 120px var(--edge) 64px;
}
.hero-v4-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-v4-video video,
.hero-v4-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.5);
}
.hero-v4-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 70% 35%, rgba(255, 106, 61, 0.18), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(11, 13, 16, 0.85), transparent 50%),
    linear-gradient(180deg, rgba(11, 13, 16, 0.55) 0%, rgba(11, 13, 16, 0.75) 100%);
}
.hero-v4-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: var(--noise);
  background-size: 220px;
}
.hero-v4-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.hero-v4-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.22);
  background: rgba(11, 13, 16, 0.35);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--paper);
  width: fit-content;
}
.hero-v4-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--signal-orange);
  animation: pulse-orange 2.4s ease-in-out infinite;
}
@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 61, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(255, 106, 61, 0); }
}
.hero-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 9vw, 7.2rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
}
.hero-v4-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.hero-v4-dek {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.78);
  max-width: 56ch;
  margin: 0;
}
.hero-v4-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}
.hero-v4-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-decoration: none;
  transition: transform 260ms var(--ease-out-quart), background 260ms var(--ease-out-quart);
}
.hero-v4-btn-primary {
  background: var(--signal-orange);
  color: var(--color-ink);
}
.hero-v4-btn-primary:hover { transform: translateY(-2px); background: var(--ember); }
.hero-v4-btn-primary .gfw-icon {
  width: 22px; height: 22px;
  background: var(--color-ink);
  color: var(--signal-orange);
  border-radius: 999px;
  padding: 5px;
}
.hero-v4-btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247, 245, 240, 0.32);
}
.hero-v4-btn-ghost:hover {
  background: rgba(247, 245, 240, 0.08);
  border-color: rgba(247, 245, 240, 0.5);
}

.hero-v4-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.5);
}
.hero-v4-meta-divider {
  width: 24px;
  height: 1px;
  background: rgba(247, 245, 240, 0.25);
}

/* ----- v4 DISCIPLINES ----- */
.disc-v4 {
  position: relative;
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--paper);
  color: var(--color-ink);
}
.disc-v4-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.disc-v4-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
  margin-bottom: 72px;
}
.disc-v4-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 28px;
}
.disc-v4-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
}
.disc-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 5.8vw, 4.6rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin: 0;
}
.disc-v4-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.disc-v4-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(11, 13, 16, 0.65);
  max-width: 42ch;
  margin: 0;
}
.disc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.disc-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 28px 32px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 13, 16, 0.08);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 320ms var(--ease-out-quart), box-shadow 320ms var(--ease-out-quart), border-color 320ms var(--ease-out-quart);
  text-decoration: none;
  color: inherit;
  min-height: 280px;
}
.disc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px -22px rgba(11, 13, 16, 0.22);
  border-color: rgba(11, 13, 16, 0.18);
}
/* First card spans 4 cols (feature), next 4 span 2 each — asymmetric rhythm */
.disc-card--feature {
  grid-column: span 4;
  flex-direction: row;
  min-height: 320px;
  padding: 44px 40px;
}
.disc-card--feature .disc-card-body { flex: 1; }
.disc-card--feature .disc-card-icon {
  width: 88px; height: 88px;
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 32px;
  flex-shrink: 0;
}
.disc-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(11, 13, 16, 0.38);
}
.disc-card-title {
  font-family: var(--font-sans);
  font-size: clamp(1.32rem, 1.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}
.disc-card--feature .disc-card-title {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}
.disc-card-desc {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(11, 13, 16, 0.62);
  margin: 0;
}
.disc-card--feature .disc-card-desc {
  font-size: 16px;
  max-width: 52ch;
}
.disc-card-ai {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed rgba(11, 13, 16, 0.14);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
}
.disc-card-ai::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.6);
}
.disc-card-icon-wrap {
  width: 56px; height: 56px;
  background: var(--paper);
  border: 1px solid rgba(11, 13, 16, 0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--signal-orange);
  margin-bottom: 8px;
}

/* ----- v4 AI FOCUS ----- */
.ai-focus-v4 {
  position: relative;
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--color-deep-graphite);
  color: var(--paper);
  overflow: hidden;
}
.ai-focus-v4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-ai-mesh);
  pointer-events: none;
}
.ai-focus-v4-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.ai-focus-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
  margin-bottom: 72px;
}
.ai-focus-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--electric-lime);
  margin-bottom: 28px;
}
.ai-focus-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 12px rgba(255, 45, 120, 0.65);
  animation: pulse-lime 2.4s ease-in-out infinite;
}
@keyframes pulse-lime {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 120, 0.65); }
  50% { box-shadow: 0 0 0 10px rgba(255, 45, 120, 0); }
}
.ai-focus-title {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
}
.ai-focus-title em {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  color: var(--electric-lime);
}
.ai-focus-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.4;
  color: rgba(247, 245, 240, 0.82);
  max-width: 36ch;
  margin: 0;
}
.ai-focus-quote em {
  font-style: italic;
  color: var(--electric-lime);
}

/* Ladder preview — 5 cards stepping up, click-through to /ai */
.ai-ladder-mini {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 56px;
}
.ai-rung {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 14px;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--paper);
  transition: transform 280ms var(--ease-out-quart), background 280ms var(--ease-out-quart), border-color 280ms var(--ease-out-quart);
}
.ai-rung:hover {
  background: rgba(247, 245, 240, 0.07);
  border-color: rgba(255, 45, 120, 0.3);
  transform: translateY(-3px);
}
.ai-rung-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.42);
}
.ai-rung-title {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0;
}
.ai-rung-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.6);
  margin: 0;
}
/* Step up: heights + sizes scale L→R */
.ai-rung[data-rung="1"] { height: 200px; }
.ai-rung[data-rung="2"] { height: 240px; }
.ai-rung[data-rung="3"] { height: 280px; }
.ai-rung[data-rung="4"] { height: 320px; }
.ai-rung[data-rung="5"] {
  height: 360px;
  background: linear-gradient(180deg, rgba(255, 45, 120, 0.05), rgba(255, 45, 120, 0.15));
  border-color: rgba(255, 45, 120, 0.4);
}
.ai-rung[data-rung="1"] .ai-rung-title { font-size: 16px; }
.ai-rung[data-rung="2"] .ai-rung-title { font-size: 17px; }
.ai-rung[data-rung="3"] .ai-rung-title { font-size: 19px; }
.ai-rung[data-rung="4"] .ai-rung-title { font-size: 21px; }
.ai-rung[data-rung="5"] .ai-rung-title { font-size: 22px; }
.ai-rung[data-rung="5"] .ai-rung-num { color: var(--electric-lime); }

.ai-focus-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
}
.ai-focus-btn-lime {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--electric-lime);
  color: var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-decoration: none;
  transition: transform 260ms var(--ease-out-quart);
}
.ai-focus-btn-lime:hover { transform: translateY(-2px); }
.ai-focus-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247, 245, 240, 0.28);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 260ms var(--ease-out-quart);
}
.ai-focus-btn-ghost:hover { background: rgba(247, 245, 240, 0.08); }

/* ----- v4 SELECTED WORK ----- */
.work-v4 {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--warm-white);
}
.work-v4-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.work-v4-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 64px;
}
.work-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin: 0;
  max-width: 14ch;
}
.work-v4-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.work-v4-aside {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(11, 13, 16, 0.55);
  max-width: 28ch;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.work-card-v4 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
  transition: transform 360ms var(--ease-out-quart);
}
.work-card-v4:hover { transform: translateY(-6px); }
.work-card-v4-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--burgundy) 0%, var(--color-ink) 60%);
  z-index: 0;
}
.work-card-v4-media-noise {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 200px;
  opacity: 0.12;
  mix-blend-mode: overlay;
}
.work-card-v4-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.85) 60%);
}
.work-card-v4-tags {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.55);
  margin-bottom: 4px;
}
.work-card-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
}
.work-card-v4-outcome {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(247, 245, 240, 0.78);
  margin: 0;
  max-width: 38ch;
}
.work-card-v4-arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  z-index: 3;
  transition: background 260ms var(--ease-out-quart), border-color 260ms var(--ease-out-quart);
}
.work-card-v4:hover .work-card-v4-arrow {
  background: var(--signal-orange);
  border-color: var(--signal-orange);
  color: var(--color-ink);
}
.work-v4-more {
  margin-top: 56px;
  padding: 24px 32px;
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.work-v4-more p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.78);
  max-width: 56ch;
}
.work-v4-more strong { color: var(--paper); font-weight: 500; }
.work-v4-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--signal-orange);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
}

/* ----- v4 APPROACH ----- */
.appr-v4 {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--paper);
}
.appr-v4-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.appr-v4-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
  margin-bottom: 72px;
}
.appr-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin: 0;
}
.appr-v4-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.appr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.appr-grid::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, rgba(11,13,16,0.2), rgba(255,106,61,0.6) 45%, rgba(94,47,47,0.4));
  z-index: 0;
}
.appr-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.appr-step-num-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.appr-step-dot {
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--signal-orange);
}
.appr-step:nth-child(4) .appr-step-dot {
  background: var(--signal-orange);
}
.appr-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(11, 13, 16, 0.45);
}
.appr-step-icon-wrap {
  width: 44px; height: 44px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 13, 16, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}
.appr-step-title {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}
.appr-step-desc {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(11, 13, 16, 0.62);
  margin: 0;
}
.appr-step-when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(11, 13, 16, 0.42);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ----- v4 DIAGNOSTICS ----- */
.diag-v4 {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--color-ink);
  color: var(--paper);
}
.diag-v4-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.diag-v4-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
  margin-bottom: 56px;
}
.diag-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
}
.diag-v4-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.diag-v4-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.66);
  max-width: 42ch;
  margin: 0;
}
.diag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.diag-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 40px;
  background: var(--color-graphite);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 22px;
  text-decoration: none;
  color: var(--paper);
  transition: transform 280ms var(--ease-out-quart), border-color 280ms var(--ease-out-quart);
  position: relative;
  overflow: hidden;
}
.diag-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 106, 61, 0.4);
}
.diag-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--signal-orange);
}
.diag-card-title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
}
.diag-card-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.66);
  margin: 0;
  max-width: 42ch;
}
.diag-card-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 245, 240, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.diag-card-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: rgba(247, 245, 240, 0.5);
  text-transform: uppercase;
}
.diag-card-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 240ms var(--ease-out-quart);
}
.diag-card:hover .diag-card-arrow {
  background: var(--signal-orange);
}

/* ----- v4 CLOSING CTA ----- */
.closing-v4 {
  position: relative;
  padding: clamp(120px, 18vw, 220px) var(--edge);
  background: var(--color-ink);
  color: var(--paper);
  overflow: hidden;
  text-align: center;
}
.closing-v4-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vh;
  height: 90vh;
  max-width: 1200px;
  max-height: 1200px;
  transform: translate(-50%, -50%);
  background: var(--grad-orb);
  filter: blur(24px);
  opacity: 0.7;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  animation: orb-drift 14s ease-in-out infinite;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -54%) scale(1.04); }
}
.closing-v4-noise {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 240px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.closing-v4-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.closing-v4-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(247, 245, 240, 0.22);
  border-radius: 999px;
  background: rgba(11, 13, 16, 0.4);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--paper);
}
.closing-v4-title {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 9vw, 7.2rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0;
  max-width: 16ch;
}
.closing-v4-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.closing-v4-sub {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.72);
  max-width: 52ch;
  margin: 0;
}

/* ----- v4 NAV — updated for new IA ----- */
.site-header-v4 .nav-links a {
  position: relative;
}
.site-header-v4 .nav-links a[data-ai-link]::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--electric-lime);
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 6px rgba(255, 45, 120, 0.6);
}

/* ----- v4 MOTION TRAIL — hero accent line ----- */
.motion-trail {
  position: absolute;
  pointer-events: none;
  height: 2px;
  background: var(--grad-ai-trail);
  filter: blur(0.5px);
  opacity: 0.7;
  transform-origin: left center;
}

/* ----- v4 RESPONSIVE ----- */
@media (max-width: 1080px) {
  .disc-card { grid-column: span 3; min-height: 240px; }
  .disc-card--feature {
    grid-column: span 6;
    flex-direction: column;
  }
  .disc-card--feature .disc-card-icon { margin-right: 0; margin-bottom: 16px; }
}

@media (max-width: 880px) {
  .disc-v4-head, .ai-focus-head, .work-v4-head, .appr-v4-head, .diag-v4-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .work-v4-head { display: flex; flex-direction: column; align-items: flex-start; }
  .work-grid { grid-template-columns: 1fr; }
  .work-v4-more { flex-direction: column; align-items: flex-start; }
  .ai-ladder-mini { grid-template-columns: repeat(2, 1fr); }
  .ai-rung[data-rung] { height: auto; min-height: 180px; }
  .appr-grid { grid-template-columns: 1fr; gap: 36px; }
  .appr-grid::before { display: none; }
  .diag-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .disc-card { grid-column: span 6; }
  .hero-v4 { padding: 96px var(--edge) 48px; min-height: 80vh; }
}

/* ================================================================
   AI PAGE (/ai.html) — Electric Lime, AI thesis dedicated surface
   ================================================================ */
.ai-page { background: var(--color-deep-graphite); color: var(--paper); }

/* HERO */
.ai-hero {
  position: relative;
  min-height: clamp(620px, 90vh, 860px);
  display: flex;
  align-items: center;
  background: var(--color-deep-graphite);
  color: var(--paper);
  padding: 140px var(--edge) 80px;
  overflow: hidden;
}
.ai-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--grad-ai-mesh);
  pointer-events: none;
}
.ai-hero-trail {
  position: absolute;
  top: 38%;
  left: -10%;
  width: 130%;
  height: 240px;
  pointer-events: none;
  opacity: 0.65;
  background:
    radial-gradient(ellipse 60% 100% at 30% 60%, rgba(255, 45, 120, 0.40), transparent 60%),
    radial-gradient(ellipse 40% 100% at 70% 40%, rgba(91, 91, 233, 0.38), transparent 60%);
  filter: blur(40px);
  transform: rotate(-6deg);
  animation: trail-drift 14s ease-in-out infinite alternate;
}
@keyframes trail-drift {
  0% { transform: rotate(-8deg) translateY(-10px); }
  100% { transform: rotate(-4deg) translateY(10px); }
}
.ai-hero-noise {
  position: absolute; inset: 0;
  background-image: var(--noise);
  background-size: 220px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ai-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
}
.ai-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 24px 0 0;
}
.ai-hero-title em {
  font-style: normal;
  color: var(--electric-lime);
}
.ai-hero-quote-card {
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 20px;
  padding: 32px 28px;
}
.ai-hero-quote-card .qmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 80px;
  line-height: 0.5;
  color: var(--electric-lime);
  margin-bottom: -12px;
}
.ai-hero-quote-card p {
  font-family: var(--font-sans);
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--paper);
  margin: 0 0 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ai-hero-quote-card p em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--electric-lime);
}
.ai-hero-quote-card cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.5);
}
.ai-hero-meta-row {
  grid-column: 1 / -1;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ai-hero-stat {
  display: flex; flex-direction: column; gap: 6px;
}
.ai-hero-stat-num {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--electric-lime);
}
.ai-hero-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.55);
}

/* SECTIONS — generic AI page sections */
.ai-sec {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  position: relative;
}
.ai-sec--dark { background: var(--color-deep-graphite); color: var(--paper); }
.ai-sec--paper { background: var(--paper); color: var(--color-ink); }
.ai-sec-inner { max-width: var(--max); margin: 0 auto; }
.ai-sec-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--electric-lime);
  margin-bottom: 24px;
}
.ai-sec-eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--electric-lime); box-shadow: 0 0 10px rgba(255, 45, 120, 0.6); }
.ai-sec--paper .ai-sec-eyebrow { color: var(--burgundy); }
.ai-sec--paper .ai-sec-eyebrow .dot { background: var(--signal-orange); box-shadow: none; }
.ai-sec-title {
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
}
.ai-sec-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--electric-lime);
}
.ai-sec--paper .ai-sec-title em { color: var(--signal-orange); }

/* STATIC AI LADDER */
.ai-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: flex-end;
  margin-top: 64px;
}
.ai-ladder-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 22px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 16px;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  transition: transform 320ms var(--ease-out-quart), border-color 320ms var(--ease-out-quart);
}
.ai-ladder-card[data-rung="1"] { height: 220px; }
.ai-ladder-card[data-rung="2"] { height: 280px; }
.ai-ladder-card[data-rung="3"] { height: 340px; }
.ai-ladder-card[data-rung="4"] { height: 400px; }
.ai-ladder-card[data-rung="5"] {
  height: 460px;
  background: linear-gradient(180deg, rgba(255, 45, 120, 0.05), rgba(255, 45, 120, 0.18));
  border-color: rgba(255, 45, 120, 0.4);
}
.ai-ladder-card-num {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.45);
}
.ai-ladder-card[data-rung="5"] .ai-ladder-card-num { color: var(--electric-lime); }
.ai-ladder-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
}
.ai-ladder-card[data-rung="1"] .ai-ladder-card-title { font-size: 18px; }
.ai-ladder-card[data-rung="2"] .ai-ladder-card-title { font-size: 20px; }
.ai-ladder-card[data-rung="3"] .ai-ladder-card-title { font-size: 22px; }
.ai-ladder-card[data-rung="4"] .ai-ladder-card-title { font-size: 24px; }
.ai-ladder-card[data-rung="5"] .ai-ladder-card-title { font-size: 26px; }
.ai-ladder-card-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.62);
  margin: 0;
}
.ai-ladder-axis {
  margin-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(247, 245, 240, 0.5);
}
.ai-ladder-axis-bar {
  flex: 1; margin: 0 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(247,245,240,0.2), rgba(255,45,120,0.6) 70%, var(--electric-lime));
}
.ai-ladder-axis-end { color: var(--electric-lime); }

/* RUNG DEEP-DIVE BLOCKS — 5 alternating sections */
.rung-block {
  padding: clamp(80px, 12vw, 140px) var(--edge);
  position: relative;
}
.rung-block:nth-child(odd) { background: var(--color-deep-graphite); color: var(--paper); }
.rung-block:nth-child(even) { background: var(--color-graphite); color: var(--paper); }
.rung-block-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: flex-start;
}
.rung-block-num-block {
  position: sticky;
  top: 120px;
}
.rung-block-num {
  font-family: var(--font-sans);
  font-size: clamp(7rem, 14vw, 12rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--electric-lime);
  margin: 0;
}
.rung-block-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  color: rgba(247, 245, 240, 0.55);
  margin-top: 8px;
  text-transform: uppercase;
}
.rung-block-body { display: flex; flex-direction: column; gap: 28px; }
.rung-block-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
}
.rung-block-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--electric-lime);
}
.rung-block-body p {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.72);
  margin: 0;
  max-width: 60ch;
}
.rung-block-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  border-bottom: 1px solid rgba(247, 245, 240, 0.12);
}
.rung-block-stat-num {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--electric-lime);
}
.rung-block-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(247, 245, 240, 0.55);
  margin-top: 2px;
}
.rung-block-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 16px;
}
.rung-block-fit-col h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--electric-lime);
}
.rung-block-fit-col:nth-child(2) h4 { color: rgba(247, 245, 240, 0.5); }
.rung-block-fit-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.rung-block-fit-col li {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.78);
  display: flex; align-items: flex-start; gap: 10px;
}
.rung-block-fit-col li::before {
  content: "—";
  color: var(--electric-lime);
  flex-shrink: 0;
}
.rung-block-fit-col:nth-child(2) li::before {
  content: "×";
  color: rgba(247, 245, 240, 0.4);
}

/* AI STATS BAND */
.ai-stats {
  padding: clamp(80px, 12vw, 140px) var(--edge);
  background: var(--color-deep-graphite);
  color: var(--paper);
}
.ai-stats-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ai-stat {
  padding: 32px 28px;
  border-left: 1px solid rgba(247, 245, 240, 0.10);
}
.ai-stat:first-child { border-left: none; padding-left: 0; }
.ai-stat-num {
  font-family: var(--font-sans);
  font-size: clamp(3.5rem, 6vw, 5.6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 16px;
}
.ai-stat:nth-child(1) .ai-stat-num { color: var(--paper); }
.ai-stat:nth-child(2) .ai-stat-num { color: var(--color-aqua-mist); }
.ai-stat:nth-child(3) .ai-stat-num { color: var(--electric-lime); }
.ai-stat:nth-child(4) .ai-stat-num { color: var(--electric-lime); }
.ai-stat-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--electric-lime);
  margin-bottom: 12px;
}
.ai-stat:nth-child(2) .ai-stat-label { color: var(--color-aqua-mist); }
.ai-stat-desc {
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.5;
  color: rgba(247, 245, 240, 0.65);
  margin: 0;
  max-width: 24ch;
}

/* PILOT CARD */
.pilot-block {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--paper);
}
.pilot-card {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 28px;
  padding: clamp(48px, 7vw, 88px) clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.pilot-card::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(255, 45, 120, 0.22), transparent 60%);
  pointer-events: none;
}
.pilot-card-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--electric-lime);
}
.pilot-card-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 10px rgba(255, 45, 120, 0.6);
}
.pilot-card-title {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 16px 0 24px;
  max-width: 16ch;
  position: relative;
}
.pilot-card-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--electric-lime);
}
.pilot-card-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
  position: relative;
}
.pilot-card-lead {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.75);
  margin: 0 0 32px;
  max-width: 52ch;
}
.pilot-card-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.pilot-card-checklist li {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--paper);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.pilot-card-checklist li::before {
  content: "";
  width: 18px; height: 18px;
  background: var(--electric-lime);
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
  background-image: linear-gradient(135deg, var(--electric-lime), rgba(255, 45, 120, 0.5));
  position: relative;
}
.pilot-card-side {
  background: rgba(247, 245, 240, 0.05);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 18px;
  padding: 28px 24px;
  position: relative;
}
.pilot-card-side h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--electric-lime);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.pilot-card-side dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 16px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: rgba(247, 245, 240, 0.75);
}
.pilot-card-side dt {
  color: var(--paper);
  font-weight: 500;
}
.pilot-card-foot {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid rgba(247, 245, 240, 0.15);
  position: relative;
}

/* WHY-FAIL */
.why-fail {
  padding: clamp(80px, 12vw, 140px) var(--edge);
  background: var(--color-graphite);
  color: var(--paper);
}
.why-fail-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 24px;
}
.why-fail-lede {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
  max-width: 22ch;
}
.why-fail-lede em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--electric-lime);
}
.why-fail-card {
  padding: 28px 24px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.why-fail-card-num {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--electric-lime);
}
.why-fail-card-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
}
.why-fail-card-body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.6);
  margin: 0;
}

/* RESPONSIVE for AI page */
@media (max-width: 1080px) {
  .ai-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .ai-hero-meta-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ai-ladder { grid-template-columns: repeat(2, 1fr); }
  .ai-ladder-card[data-rung] { height: auto; min-height: 200px; }
  .rung-block-inner { grid-template-columns: 1fr; }
  .rung-block-num-block { position: relative; top: 0; }
  .rung-block-num { font-size: clamp(5rem, 14vw, 8rem); }
  .ai-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-stat { border-left: none; padding-left: 28px; }
  .pilot-card-body { grid-template-columns: 1fr; }
  .why-fail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ai-ladder { grid-template-columns: 1fr; }
  .ai-hero-meta-row { grid-template-columns: 1fr; }
  .ai-stats-grid { grid-template-columns: 1fr; }
  .rung-block-fit { grid-template-columns: 1fr; }
  .rung-block-stats { grid-template-columns: 1fr; }
}

/* ================================================================
   CAPABILITIES PAGE (/capabilities.html) — 5 disciplines deep
   ================================================================ */
.cap-page { background: var(--paper); color: var(--color-ink); }

.cap-hero {
  position: relative;
  padding: 180px var(--edge) clamp(96px, 14vw, 160px);
  background: var(--color-ink);
  color: var(--paper);
  overflow: hidden;
}
.cap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255, 106, 61, 0.18), transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(34, 67, 74, 0.15), transparent 55%);
}
.cap-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
}
.cap-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 24px 0 0;
}
.cap-hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.cap-hero-dek {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.72);
  max-width: 42ch;
  margin: 0;
}

/* Anchor rail (sticky) — quick nav between disciplines */
.cap-rail {
  position: sticky;
  top: 60px;
  z-index: 10;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11, 13, 16, 0.08);
}
.cap-rail-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--edge);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cap-rail-label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.55);
  margin-right: 16px;
}
.cap-rail a {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11, 13, 16, 0.12);
  color: var(--color-ink);
  text-decoration: none;
  transition: background 200ms var(--ease-out-quart);
}
.cap-rail a:hover { background: var(--color-ink); color: var(--paper); border-color: var(--color-ink); }

/* Discipline block */
.disc-block {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  position: relative;
}
.disc-block:nth-child(even) { background: var(--warm-white); }
.disc-block-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(40px, 7vw, 96px);
}
.disc-block-num {
  font-family: var(--font-sans);
  font-size: clamp(7rem, 13vw, 11rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--signal-orange);
  margin: 0;
}
.disc-block-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.55);
  margin: 16px 0 0;
}
.disc-block-body { display: flex; flex-direction: column; gap: 36px; }
.disc-block-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin: 0;
}
.disc-block-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.disc-block-lead {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(11, 13, 16, 0.72);
  margin: 0;
  max-width: 62ch;
}
.disc-block-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(11, 13, 16, 0.10);
  border-bottom: 1px solid rgba(11, 13, 16, 0.10);
}
.disc-block-grid-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 14px;
}
.disc-block-grid-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.disc-block-grid-col li {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-ink);
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
}
.disc-block-grid-col li::before {
  content: "—";
  color: var(--signal-orange);
  font-weight: 500;
}
.disc-ai-callout {
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.disc-ai-callout::after {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(circle, rgba(255, 45, 120, 0.18), transparent 60%);
  pointer-events: none;
}
.disc-ai-callout-icon {
  width: 56px; height: 56px;
  background: var(--electric-lime);
  color: var(--color-ink);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.disc-ai-callout-icon .gfw-icon { width: 32px; height: 32px; }
.disc-ai-callout-body { position: relative; }
.disc-ai-callout-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--electric-lime);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.disc-ai-callout-body p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.85);
  margin: 0;
  max-width: 60ch;
}
.disc-ai-callout-body p em {
  font-style: normal;
  color: var(--electric-lime);
}

@media (max-width: 1080px) {
  .cap-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .disc-block-inner { grid-template-columns: 1fr; }
  .disc-block-num { font-size: clamp(5rem, 14vw, 8rem); }
  .disc-block-grid { grid-template-columns: 1fr; gap: 24px; }
  .disc-ai-callout { grid-template-columns: 1fr; }
}

/* ================================================================
   HOW WE WORK (/how-we-work.html) shared with capabilities patterns
   ================================================================ */
.hww-page { background: var(--paper); color: var(--color-ink); }

.hww-hero {
  padding: 180px var(--edge) clamp(96px, 14vw, 160px);
  background: var(--color-ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hww-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(255, 106, 61, 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(94, 47, 47, 0.18), transparent 50%);
}
.hww-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.hww-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 24px 0;
  max-width: 18ch;
}
.hww-hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.hww-hero-dek {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.72);
  max-width: 56ch;
  margin: 0;
}

/* WHAT WE DON'T DO — truth section */
.truth {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--paper);
}
.truth-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.truth-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  margin-bottom: 72px;
  align-items: end;
}
.truth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.truth-card {
  background: var(--warm-white);
  border: 1px solid rgba(11, 13, 16, 0.08);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.truth-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
}
.truth-is { color: var(--signal-orange); }
.truth-isnt { color: var(--burgundy); }
.truth-card-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}
.truth-card-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(11, 13, 16, 0.62);
  margin: 0;
}

@media (max-width: 880px) {
  .truth-head { grid-template-columns: 1fr; }
  .truth-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   ABOUT PAGE (/about.html)
   ================================================================ */
.about-page { background: var(--paper); color: var(--color-ink); }
.about-hero {
  padding: 180px var(--edge) clamp(96px, 14vw, 168px);
  background: var(--color-ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(255, 106, 61, 0.18), transparent 55%);
}
.about-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.about-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 24px 0 0;
  max-width: 20ch;
}
.about-hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.about-body {
  padding: clamp(96px, 14vw, 168px) var(--edge);
}
.about-body-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 32px;
}
.about-body-inner h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 24px 0 8px;
}
.about-body-inner p {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(11, 13, 16, 0.78);
  margin: 0;
}
.about-body-inner p em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.about-value {
  padding: 28px 24px;
  background: var(--warm-white);
  border: 1px solid rgba(11, 13, 16, 0.08);
  border-radius: 16px;
}
.about-value h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--signal-orange);
  margin: 0 0 10px;
}
.about-value p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(11, 13, 16, 0.72);
  margin: 0;
}
@media (max-width: 880px) {
  .about-values { grid-template-columns: 1fr; }
}

/* ================================================================
   AI PAGE — ladder-v3 dark/lime overrides
   Scoped to body.ai-page so home + capabilities keep current palette.
   ================================================================ */
.ai-page .ladder-v3,
.ai-page .ladder-v3-pinned {
  background: var(--color-deep-graphite);
  color: var(--paper);
}
.ai-page .ladder-v3::before { display: none; }
.ai-page .ladder-v3-pin::before {
  background:
    radial-gradient(at 78% 24%, rgba(255, 45, 120, 0.14) 0px, transparent 50%),
    radial-gradient(at 22% 78%, rgba(255, 45, 120, 0.06) 0px, transparent 50%);
}
.ai-page .ladder-v3-eyebrow {
  color: var(--electric-lime);
}
.ai-page .ladder-v3-eyebrow-dot {
  background: var(--electric-lime);
  box-shadow: 0 0 10px rgba(255, 45, 120, 0.6);
}
.ai-page .ladder-v3-title {
  color: var(--paper);
}
.ai-page .ladder-v3-title em {
  color: var(--electric-lime);
  font-family: var(--font-sans);
  font-style: normal;
}
.ai-page .ladder-v3-dek {
  color: rgba(247, 245, 240, 0.7);
}
.ai-page .ladder-v3-step {
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  box-shadow: none;
  color: var(--paper);
}
.ai-page .ladder-v3-step:hover,
.ai-page .ladder-v3-step:focus-visible {
  background: rgba(247, 245, 240, 0.07);
  border-color: rgba(255, 45, 120, 0.4);
  box-shadow: 0 20px 60px -22px rgba(255, 45, 120, 0.18);
}
.ai-page .ladder-v3-step[data-rung="5"] {
  background: linear-gradient(180deg, rgba(255, 45, 120, 0.06), rgba(255, 45, 120, 0.16));
  border-color: rgba(255, 45, 120, 0.45);
}
.ai-page .ladder-v3-icon {
  background: rgba(11, 13, 16, 0.4);
  border-color: rgba(247, 245, 240, 0.14);
  color: var(--electric-lime);
}
.ai-page .ladder-v3-step[data-rung="5"] .ladder-v3-icon {
  background: var(--electric-lime);
  color: var(--color-ink);
  border-color: transparent;
}
.ai-page .ladder-v3-step-tag {
  color: rgba(247, 245, 240, 0.5);
}
.ai-page .ladder-v3-step[data-rung="5"] .ladder-v3-step-tag {
  color: var(--electric-lime);
}
.ai-page .ladder-v3-step-num {
  color: var(--paper);
}
.ai-page .ladder-v3-step[data-rung="5"] .ladder-v3-step-num {
  color: var(--electric-lime);
}
.ai-page .ladder-v3-step-title {
  color: var(--paper);
}
.ai-page .ladder-v3-step-desc {
  color: rgba(247, 245, 240, 0.62);
}
.ai-page .ladder-v3-yaxis-label,
.ai-page .ladder-v3-yaxis-top,
.ai-page .ladder-v3-yaxis-bottom {
  color: rgba(247, 245, 240, 0.55);
}
.ai-page .ladder-v3-yaxis-top { color: var(--electric-lime); }
.ai-page .ladder-v3-yaxis-line {
  background: linear-gradient(180deg, var(--electric-lime), rgba(247, 245, 240, 0.2));
}

/* ================================================================
   ELECTRIC LIME — woven as AI-native signature thread site-wide
   Subtle accents on every page; Signal Orange stays primary.
   ================================================================ */
/* Nav "AI" link — pulsing lime dot (already partially styled, reinforce) */
.site-header-v4 .nav-links a[data-ai-link]::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--electric-lime);
  display: inline-block;
  margin-right: 7px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.55);
  animation: pulse-lime-mini 2.6s ease-in-out infinite;
}
@keyframes pulse-lime-mini {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(255, 45, 120, 0.85); }
}

/* Brand mark — micro lime tick under wordmark on every page */
.site-header-v4::after {
  content: "";
  position: absolute;
  left: var(--edge);
  bottom: -2px;
  width: 24px;
  height: 2px;
  background: var(--electric-lime);
  border-radius: 2px;
  opacity: 0.7;
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.4);
  pointer-events: none;
}
.site-header-v4 { position: relative; }

/* Discipline cards — feature card (AI) wraps in lime treatment */
.disc-card--ai {
  background: var(--color-ink) !important;
  color: var(--paper) !important;
  border-color: rgba(255, 45, 120, 0.3) !important;
  overflow: hidden;
  position: relative;
}
.disc-card--ai::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(255, 45, 120, 0.22), transparent 60%);
  pointer-events: none;
}
.disc-card--ai .disc-card-icon {
  background: var(--electric-lime) !important;
  color: var(--color-ink) !important;
}
.disc-card--ai .disc-card-num { color: var(--electric-lime); position: relative; }
.disc-card--ai .disc-card-title,
.disc-card--ai .disc-card-desc { color: var(--paper); position: relative; }
.disc-card--ai .disc-card-desc { color: rgba(247, 245, 240, 0.78); }
.disc-card--ai .disc-card-ai {
  border-top-color: rgba(247, 245, 240, 0.18);
  color: rgba(247, 245, 240, 0.7);
  position: relative;
}
.disc-card--ai:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -22px rgba(255, 45, 120, 0.30);
}

/* Approach grid — last step (Scale) gets a lime micro-dot to signal compounding */
.appr-step:last-child .appr-step-dot {
  background: var(--electric-lime);
  border-color: var(--electric-lime);
  box-shadow: 0 0 10px rgba(255, 45, 120, 0.5);
}

/* Diagnostic cards — small lime ticks at the corner to signal AI-readiness */
.diag-card::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.5);
  opacity: 0.65;
}

/* Hover state — links across the site get lime underline on hover */
.nav-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--electric-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.cap-rail a:hover {
  border-color: var(--electric-lime);
  color: var(--color-ink);
  background: rgba(255, 45, 120, 0.15);
}

/* Promo strip — tiny lime tick at the end of the eyebrow */
.promo-strip {
  position: relative;
}
.promo-strip::after {
  content: "";
  position: absolute;
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 6px rgba(255, 45, 120, 0.5);
}

/* Footer — lime tick under the wordmark */
.site-footer .brand-mark::after,
.site-footer img + img::after { /* fallback */
  content: "";
}

/* About hero / capabilities hero / how-we-work hero — micro lime detail in the eyebrow */
.cap-hero .ai-sec-eyebrow .dot::after,
.hww-hero .ai-sec-eyebrow .dot::after,
.about-hero .ai-sec-eyebrow .dot::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--electric-lime);
  margin-left: 8px;
  display: inline-block;
  box-shadow: 0 0 6px rgba(255, 45, 120, 0.6);
}


/* ================================================================
   v4 FIXES — header CTA always visible + remove random lime dots
   + scroll-reveal section animations + boost noise texture
   ================================================================ */

/* Remove: random lime tick under wordmark */
.site-header-v4::after { display: none !important; }

/* Remove: lime dot at end of promo strip */
.promo-strip::after { display: none !important; }

/* Remove: lime corner dot on diagnostic cards */
.diag-card::before { display: none !important; }

/* Remove: lime sub-dot on cap/hww/about eyebrow dots */
.cap-hero .ai-sec-eyebrow .dot::after,
.hww-hero .ai-sec-eyebrow .dot::after,
.about-hero .ai-sec-eyebrow .dot::after { display: none !important; }

/* CTA — always visible. Orange-filled brand pill, every page, every scroll state. */
.site-header .nav-cta,
.site-header-v4 .nav-cta {
  background: var(--signal-orange);
  color: var(--color-ink);
  border: 1px solid var(--signal-orange);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.74rem;
  text-transform: none;
  padding: 0 1.25rem;
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 220ms var(--ease-out-quart),
              background 220ms var(--ease-out-quart),
              box-shadow 220ms var(--ease-out-quart);
}
.site-header .nav-cta:hover,
.site-header-v4 .nav-cta:hover {
  background: var(--ember);
  color: var(--color-ink);
  border-color: var(--ember);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(255, 106, 61, 0.55);
}
.site-header.is-scrolled .nav-cta,
.site-header-v4.is-scrolled .nav-cta {
  background: var(--signal-orange);
  color: var(--color-ink);
  border-color: var(--signal-orange);
}

/* Header — paper-bg pages get an ink-tone logo + nav text by default (since header is over paper) */
.cap-page .site-header-v4,
.hww-page .site-header-v4,
.about-page .site-header-v4 {
  color: var(--color-ink);
}
.cap-page .site-header-v4 .brand-mark img,
.hww-page .site-header-v4 .brand-mark img,
.about-page .site-header-v4 .brand-mark img {
  filter: none;
}
.cap-page .nav-links a,
.hww-page .nav-links a,
.about-page .nav-links a { color: var(--color-ink); }

/* Boost noise texture site-wide */
body::before {
  opacity: 0.15 !important;
}

/* ================================================================
   SCROLL-REVEAL ANIMATIONS — elegant fade+rise on each section
   Trigger via IntersectionObserver in js/app.js (already wired
   via .reveal-up class, but new sections weren't tagged).
   We add a CSS-only fallback with @supports for animation-timeline,
   plus class-based fade-up for everything inside .reveal-section.
   ================================================================ */

/* Section reveal animations REMOVED — content is always visible by default.
   Standalone CSS animations (orbital spin, dot pulses, liquid orb, etc.)
   still run because they don't depend on any IntersectionObserver state. */

/* ================================================================
   LIQUID GRADIENT SHADER — closing CTA orb
   Replaces the single radial with a three-layer metaball animation.
   Heavy blur + contrast makes the blobs visually merge into one
   organic mass that breathes and drifts. Pure CSS, no extra markup.
   ================================================================ */
.closing-v4-orb {
  width: clamp(700px, 95vh, 1400px) !important;
  height: clamp(700px, 95vh, 1400px) !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  filter: blur(60px) contrast(1.18) saturate(1.22) !important;
  animation: none !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 106, 61, 0.92) 0%, rgba(255, 106, 61, 0) 38%),
    radial-gradient(circle at 28% 62%, rgba(94, 47, 47, 0.85) 0%, rgba(94, 47, 47, 0) 44%),
    radial-gradient(circle at 72% 32%, rgba(255, 132, 89, 0.65) 0%, rgba(255, 132, 89, 0) 42%),
    radial-gradient(circle at 50% 80%, rgba(217, 95, 54, 0.4) 0%, rgba(217, 95, 54, 0) 50%) !important;
  background-size: 130% 130%, 110% 110%, 120% 120%, 140% 140% !important;
  background-position: 50% 50%, 25% 60%, 70% 30%, 50% 80% !important;
  overflow: visible !important;
}

.closing-v4-orb::before,
.closing-v4-orb::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Cool layer — burgundy + deep-teal hint, drifts opposite */
.closing-v4-orb::before {
  inset: -18% 8% 4% -18%;
  background:
    radial-gradient(circle at 42% 48%, rgba(34, 67, 74, 0.65) 0%, rgba(34, 67, 74, 0) 58%),
    radial-gradient(circle at 65% 70%, rgba(94, 47, 47, 0.55) 0%, rgba(94, 47, 47, 0) 50%);
  animation: liquid-cool 22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Warm highlight — bright orange flare, drifts faster */
.closing-v4-orb::after {
  inset: 4% -18% -18% 8%;
  background:
    radial-gradient(circle at 58% 50%, rgba(255, 106, 61, 0.55) 0%, rgba(255, 106, 61, 0) 52%),
    radial-gradient(circle at 35% 30%, rgba(255, 132, 89, 0.4) 0%, rgba(255, 132, 89, 0) 48%);
  animation: liquid-warm 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* The main orb element itself breathes + drifts */
.closing-v4-orb {
  animation: liquid-core 18s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}

@keyframes liquid-core {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    background-position: 50% 50%, 25% 60%, 70% 30%, 50% 80%;
  }
  25% {
    transform: translate(-48%, -53%) scale(1.06) rotate(3deg);
    background-position: 53% 47%, 22% 64%, 73% 28%, 52% 78%;
  }
  50% {
    transform: translate(-52%, -49%) scale(1.03) rotate(-2deg);
    background-position: 47% 53%, 28% 56%, 67% 33%, 48% 82%;
  }
  75% {
    transform: translate(-50%, -47%) scale(1.05) rotate(1deg);
    background-position: 51% 51%, 26% 62%, 71% 31%, 51% 79%;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    background-position: 50% 50%, 25% 60%, 70% 30%, 50% 80%;
  }
}

@keyframes liquid-cool {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  30% { transform: translate(8%, -9%) scale(1.1); opacity: 1; }
  60% { transform: translate(-6%, 8%) scale(0.94); opacity: 0.75; }
}

@keyframes liquid-warm {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  35% { transform: translate(-8%, 6%) scale(1.1); opacity: 1; }
  70% { transform: translate(6%, -8%) scale(0.96); opacity: 0.8; }
}

/* AI page variant — same liquid behavior, lime + teal blob colors */
.ai-page .closing-v4-orb {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 45, 120, 0.78) 0%, rgba(255, 45, 120, 0) 38%),
    radial-gradient(circle at 28% 62%, rgba(34, 67, 74, 0.82) 0%, rgba(34, 67, 74, 0) 46%),
    radial-gradient(circle at 72% 32%, rgba(255, 45, 120, 0.42) 0%, rgba(255, 45, 120, 0) 44%),
    radial-gradient(circle at 50% 80%, rgba(126, 126, 122, 0.5) 0%, rgba(126, 126, 122, 0) 50%) !important;
}
.ai-page .closing-v4-orb::before {
  background:
    radial-gradient(circle at 42% 48%, rgba(34, 67, 74, 0.7) 0%, rgba(34, 67, 74, 0) 58%),
    radial-gradient(circle at 65% 70%, rgba(94, 47, 47, 0.4) 0%, rgba(94, 47, 47, 0) 50%);
}
.ai-page .closing-v4-orb::after {
  background:
    radial-gradient(circle at 58% 50%, rgba(255, 45, 120, 0.5) 0%, rgba(255, 45, 120, 0) 52%),
    radial-gradient(circle at 35% 30%, rgba(168, 202, 204, 0.4) 0%, rgba(168, 202, 204, 0) 48%);
}

/* Boost noise overlay on the closing section so the liquid feels like
   real shader output, not just a CSS gradient */
.closing-v4-noise {
  opacity: 0.16 !important;
  mix-blend-mode: overlay !important;
}

/* Subtle inner vignette pulls the eye to the CTA */
.closing-v4::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(11, 13, 16, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .closing-v4-orb,
  .closing-v4-orb::before,
  .closing-v4-orb::after { animation: none !important; }
}

/* ================================================================
   v4 MOTION PASS — every section animates
   Builds on the existing IntersectionObserver .is-in-view trigger.
   Pure CSS where possible; nothing fights the existing reveal-up.
   ================================================================ */

/* ---- HERO ---- */
/* Title italic em — orange shimmer glint loops slowly */
.hero-v4-title em {
  background: linear-gradient(90deg,
    var(--signal-orange) 25%,
    var(--ember) 50%,
    var(--signal-orange) 75%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: title-glint 9s ease-in-out infinite;
}
@keyframes title-glint {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}

/* Hero video — slow zoom + slight drift */
.hero-v4-video video {
  animation: hero-bg-drift 32s ease-in-out infinite alternate;
  transform-origin: 55% 45%;
}
@keyframes hero-bg-drift {
  0% { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1.5%, 0.8%); }
}

/* Hero overlay — slow gradient sweep */
.hero-v4-overlay {
  background-size: 200% 200%;
  animation: overlay-sweep 22s ease-in-out infinite alternate;
}
@keyframes overlay-sweep {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ---- SECTION TITLE UNDERLINE — draws on in-view ---- */
.disc-v4-title,
.appr-v4-title,
.work-v4-title,
.diag-v4-title,
.ai-focus-title,
.closing-v4-title {
  position: relative;
}
.disc-v4-title::after,
.appr-v4-title::after,
.work-v4-title::after,
.diag-v4-title::after,
.ai-focus-title::after {
  content: "";
  display: block;
  margin-top: 20px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--signal-orange), var(--electric-lime));
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 250ms;
}
section.is-in-view .disc-v4-title::after,
section.is-in-view .appr-v4-title::after,
section.is-in-view .work-v4-title::after,
section.is-in-view .diag-v4-title::after,
section.is-in-view .ai-focus-title::after {
  width: 140px;
}
.ai-focus-title::after {
  background: linear-gradient(90deg, var(--electric-lime), var(--aqua-mist));
}

/* ---- EYEBROW DOTS — gentle throb everywhere ---- */
.disc-v4-eyebrow-dot,
.ai-sec-eyebrow .dot {
  animation: dot-throb 3s ease-in-out infinite;
}
@keyframes dot-throb {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.5); opacity: 1; }
}

/* ---- DISCIPLINES — AI feature card icon orbital animation ---- */
.disc-card--ai .disc-card-icon svg {
  animation: orbital-spin 28s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes orbital-spin {
  to { transform: rotate(360deg); }
}
/* Glow pulse on the AI card */
.disc-card--ai::before {
  animation: ai-glow-pulse 8s ease-in-out infinite;
}
@keyframes ai-glow-pulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2%); }
}

/* Discipline cards lift on hover (already there, refine) */
.disc-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}
.disc-card-icon-wrap,
.disc-card-icon {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease;
}
.disc-card:hover .disc-card-icon-wrap {
  transform: scale(1.08) rotate(-3deg);
  background: var(--signal-orange);
  color: var(--paper);
  border-color: var(--signal-orange);
}

/* ---- AI FOCUS — mini ladder cards grow into staircase ---- */
.ai-rung {
  transition:
    height 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s var(--ease-out-quart),
    transform 0.9s var(--ease-out-quart),
    background 0.4s ease,
    border-color 0.4s ease;
}
.ai-focus-v4:not(.is-in-view) .ai-rung[data-rung] {
  height: 140px;
}
.ai-focus-v4.is-in-view .ai-rung[data-rung="1"] { transition-delay: 100ms, 0ms, 0ms, 0ms, 0ms; }
.ai-focus-v4.is-in-view .ai-rung[data-rung="2"] { transition-delay: 250ms, 90ms, 90ms, 0ms, 0ms; }
.ai-focus-v4.is-in-view .ai-rung[data-rung="3"] { transition-delay: 400ms, 180ms, 180ms, 0ms, 0ms; }
.ai-focus-v4.is-in-view .ai-rung[data-rung="4"] { transition-delay: 550ms, 270ms, 270ms, 0ms, 0ms; }
.ai-focus-v4.is-in-view .ai-rung[data-rung="5"] { transition-delay: 700ms, 360ms, 360ms, 0ms, 0ms; }

/* Lime trail animation across the bottom of the ai-focus section */
.ai-focus-v4::after {
  content: "";
  position: absolute;
  bottom: 88px;
  left: var(--edge);
  height: 1px;
  width: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 45, 120, 0.55),
    var(--electric-lime),
    rgba(255, 45, 120, 0.55),
    transparent);
  filter: blur(0.5px);
  box-shadow: 0 0 12px rgba(255, 45, 120, 0.5);
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1) 500ms;
  z-index: 3;
  pointer-events: none;
}
.ai-focus-v4.is-in-view::after {
  width: calc(100% - 2 * var(--edge));
}

/* ---- SELECTED WORK — card hover image zoom + arrow rotate ---- */
.work-card-v4 {
  overflow: hidden;
  isolation: isolate;
}
.work-card-v4-media,
.work-card-v4-media-noise {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card-v4:hover .work-card-v4-media,
.work-card-v4:hover .work-card-v4-media-noise {
  transform: scale(1.08);
}
.work-card-v4-arrow {
  transition: background 0.35s ease, border-color 0.35s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card-v4-arrow svg {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card-v4:hover .work-card-v4-arrow {
  transform: scale(1.08);
}
.work-card-v4:hover .work-card-v4-arrow svg {
  transform: rotate(-15deg);
}
.work-card-v4-body {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card-v4:hover .work-card-v4-body {
  transform: translateY(-4px);
}

/* ---- APPROACH — connecting line draws across as section enters ---- */
/* Uses transform scaleX so the transition runs reliably on pseudo. */
.appr-grid {
  position: relative;
}
.appr-grid::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(11, 13, 16, 0.2),
    var(--signal-orange) 35%,
    var(--ember) 70%,
    var(--electric-lime)) !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s cubic-bezier(0.45, 0, 0.55, 1) 350ms !important;
  z-index: 0;
}
section.appr-v4.is-in-view .appr-grid::before {
  transform: scaleX(1) !important;
}

/* Approach dots — pulse in sequence as line passes */
.appr-step-dot {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease,
              background 0.4s ease;
}
section.appr-v4.is-in-view .appr-step:nth-child(1) .appr-step-dot { animation: dot-arrive 0.9s var(--ease-out-quart) 550ms both; }
section.appr-v4.is-in-view .appr-step:nth-child(2) .appr-step-dot { animation: dot-arrive 0.9s var(--ease-out-quart) 950ms both; }
section.appr-v4.is-in-view .appr-step:nth-child(3) .appr-step-dot { animation: dot-arrive 0.9s var(--ease-out-quart) 1350ms both; }
section.appr-v4.is-in-view .appr-step:nth-child(4) .appr-step-dot { animation: dot-arrive 1.1s var(--ease-out-quart) 1750ms both; }
@keyframes dot-arrive {
  0% { transform: scale(0); box-shadow: 0 0 0 0 rgba(255, 106, 61, 0.5); }
  60% { transform: scale(1.4); box-shadow: 0 0 0 14px rgba(255, 106, 61, 0.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 106, 61, 0); }
}
/* The fourth (Scale) dot uses lime since it's the compounding rung */
section.appr-v4.is-in-view .appr-step:nth-child(4) .appr-step-dot {
  animation-name: dot-arrive-lime;
}
@keyframes dot-arrive-lime {
  0% { transform: scale(0); box-shadow: 0 0 0 0 rgba(255, 45, 120, 0.5); }
  60% { transform: scale(1.5); box-shadow: 0 0 0 18px rgba(255, 45, 120, 0.15); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 45, 120, 0.4); }
}

/* Approach icon — subtle rotate on hover */
.appr-step-icon-wrap {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease, border-color 0.35s ease;
}
.appr-step:hover .appr-step-icon-wrap {
  transform: rotate(-6deg) scale(1.06);
  border-color: var(--signal-orange);
}
.appr-step .gfw-icon svg {
  transition: transform 0.5s var(--ease-out-quart);
}
.appr-step:hover .gfw-icon[data-icon="target"] svg { transform: scale(1.1); }
.appr-step:hover .gfw-icon[data-icon="grid"] svg { transform: rotate(15deg); }
.appr-step:hover .gfw-icon[data-icon="code"] svg { transform: scaleX(1.15); }
.appr-step:hover .gfw-icon[data-icon="arrow-up-right"] svg { transform: rotate(-12deg) translateX(2px); }

/* ---- DIAGNOSTICS — hover scan-line sweep + glow ---- */
.diag-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.diag-card::after {
  content: "";
  display: block !important;
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 106, 61, 0.08) 40%,
    rgba(255, 106, 61, 0.16) 50%,
    rgba(255, 106, 61, 0.08) 60%,
    transparent 100%);
  transition: left 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}
.diag-card:hover::after {
  left: 125%;
}
.diag-card > * { position: relative; z-index: 2; }
.diag-card:hover {
  box-shadow: 0 24px 80px -20px rgba(255, 106, 61, 0.35);
}

/* ---- CLOSING CTA — orb already has liquid shader ---- */
/* Closing inner content gets a subtle "breathe" on the eyebrow pill */
.closing-v4-eyebrow {
  animation: pill-breathe 4s ease-in-out infinite;
}
@keyframes pill-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 106, 61, 0); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(255, 106, 61, 0.05); }
}

/* ---- GLOBAL: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-v4-title em,
  .hero-v4-video video,
  .hero-v4-overlay,
  .disc-card--ai .disc-card-icon svg,
  .disc-card--ai::before,
  .closing-v4-eyebrow,
  .ai-focus-v4::after,
  .disc-v4-eyebrow-dot,
  .ai-sec-eyebrow .dot {
    animation: none !important;
  }
  section.is-in-view .disc-v4-title::after,
  section.is-in-view .appr-v4-title::after,
  section.is-in-view .work-v4-title::after,
  section.is-in-view .diag-v4-title::after,
  section.is-in-view .ai-focus-title::after,
  section.appr-v4.is-in-view .appr-grid::before,
  .ai-focus-v4.is-in-view::after,
  section.appr-v4.is-in-view .appr-step-dot {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================================
   v5 HOME — 10-SECTION BUYER JOURNEY
   Restores depth from old build. Adds pain hook, why-fail, discovery
   interactive, pull quote. Reuses v4 disc, work, appr, closing.
   ================================================================ */

/* ---- PAIN HOOK — concrete bottleneck cards ---- */
.pain-v5 {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--color-ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.pain-v5::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 78% 18%, rgba(255, 106, 61, 0.10) 0px, transparent 50%),
    radial-gradient(at 22% 82%, rgba(94, 47, 47, 0.18) 0px, transparent 50%);
  pointer-events: none;
}
.pain-v5-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.pain-v5-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
  margin-bottom: 72px;
}
.pain-v5-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 24px;
}
.pain-v5-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.5);
}
.pain-v5-title {
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
}
.pain-v5-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.pain-v5-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.74);
  max-width: 46ch;
  margin: 0;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pain-card {
  position: relative;
  padding: 32px 28px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 16px;
  transition: transform 0.5s var(--ease-out-quart),
              background 0.4s ease,
              border-color 0.4s ease;
  overflow: hidden;
}
.pain-card:hover {
  transform: translateY(-4px);
  background: rgba(247, 245, 240, 0.06);
  border-color: rgba(255, 106, 61, 0.4);
}
.pain-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--signal-orange);
  margin-bottom: 16px;
  display: block;
}
.pain-card-title {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.55vw, 1.32rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 12px;
}
.pain-card-body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.7);
  margin: 0 0 20px;
}
.pain-card-fix {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px dashed rgba(247, 245, 240, 0.18);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}
.pain-card:hover .pain-card-fix { color: var(--signal-orange); }
.pain-card-fix .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.pain-card:hover .pain-card-fix .arrow { transform: translateX(4px); }
@media (max-width: 1080px) {
  .pain-v5-head { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* ---- WHY MOST FAIL ON HOME ---- */
.whyfail-v5 {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--color-graphite);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.whyfail-v5::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(255, 45, 120, 0.06), transparent 60%);
  pointer-events: none;
}
.whyfail-v5-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.whyfail-v5-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.whyfail-v5-lede {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.whyfail-v5-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--electric-lime);
}
.whyfail-v5-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 10px rgba(255, 45, 120, 0.6);
}
.whyfail-v5-title {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--paper);
  margin: 0;
}
.whyfail-v5-title em {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--electric-lime);
}
.whyfail-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 26px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 16px;
  transition: transform 0.5s var(--ease-out-quart),
              border-color 0.4s ease,
              background 0.4s ease;
}
.whyfail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 45, 120, 0.4);
  background: rgba(247, 245, 240, 0.06);
}
.whyfail-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--electric-lime);
}
.whyfail-card-title {
  font-family: var(--font-sans);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
}
.whyfail-card-body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.66);
  margin: 0;
}
@media (max-width: 1080px) {
  .whyfail-v5-grid { grid-template-columns: 1fr; }
}

/* ---- DISCOVERY INTERACTIVE ---- */
.discovery-v5 {
  padding: clamp(96px, 14vw, 168px) var(--edge);
  background: var(--paper);
  position: relative;
}
.discovery-v5-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.discovery-v5-head {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.discovery-v5-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--burgundy);
}
.discovery-v5-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
}
.discovery-v5-title {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.032em;
  color: var(--color-ink);
  margin: 0;
}
.discovery-v5-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.discovery-v5-dek {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.55;
  color: rgba(11, 13, 16, 0.7);
  margin: 0;
  max-width: 48ch;
}
.discovery-v5-card {
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 24px;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
.discovery-v5-card::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(255, 45, 120, 0.14), transparent 60%);
  pointer-events: none;
}
.discovery-v5-step {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--electric-lime);
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
}
.discovery-v5-question {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 24px;
  position: relative;
  min-height: 4em;
}
.discovery-v5-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.discovery-v5-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--paper);
  text-align: left;
  width: 100%;
}
.discovery-v5-option:hover {
  background: rgba(247, 245, 240, 0.07);
  border-color: rgba(255, 45, 120, 0.4);
  transform: translateX(4px);
}
.discovery-v5-option.is-selected {
  background: rgba(255, 45, 120, 0.12);
  border-color: var(--electric-lime);
}
.discovery-v5-option-radio {
  width: 18px; height: 18px;
  border: 1.5px solid rgba(247, 245, 240, 0.4);
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease;
}
.discovery-v5-option-radio::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--electric-lime);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.discovery-v5-option.is-selected .discovery-v5-option-radio {
  border-color: var(--electric-lime);
}
.discovery-v5-option.is-selected .discovery-v5-option-radio::after {
  opacity: 1;
  transform: scale(1);
}
.discovery-v5-progress {
  position: relative;
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
}
.discovery-v5-progress-bar {
  flex: 1;
  height: 2px;
  background: rgba(247, 245, 240, 0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-right: 20px;
}
.discovery-v5-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--electric-lime), var(--ember));
  transition: width 0.6s var(--ease-out-quart);
}
.discovery-v5-progress-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: rgba(247, 245, 240, 0.55);
  text-transform: uppercase;
}
.discovery-v5-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--signal-orange);
  color: var(--color-ink);
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 16px;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.discovery-v5-next.is-ready { opacity: 1; pointer-events: auto; }
.discovery-v5-next.is-ready:hover { background: var(--ember); transform: translateY(-1px); }
.discovery-v5-result {
  position: relative;
  padding: 28px;
  background: rgba(255, 45, 120, 0.08);
  border: 1px solid rgba(255, 45, 120, 0.3);
  border-radius: 16px;
  display: none;
  flex-direction: column;
  gap: 16px;
}
.discovery-v5-result.is-shown { display: flex; }
.discovery-v5-result h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--electric-lime);
  text-transform: uppercase;
  margin: 0;
}
.discovery-v5-result-title {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
}
.discovery-v5-result-body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.78);
  margin: 0;
}
.discovery-v5-result-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--electric-lime);
  color: var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.25s ease;
}
.discovery-v5-result-cta:hover { transform: translateY(-1px); }
@media (max-width: 880px) {
  .discovery-v5-inner { grid-template-columns: 1fr; }
}

/* ---- PULL QUOTE EDITORIAL MOMENT ---- */
.pullquote-v5 {
  padding: clamp(80px, 12vw, 140px) var(--edge);
  background: var(--warm-white);
  position: relative;
}
.pullquote-v5-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.pullquote-v5-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 160px;
  line-height: 0.4;
  color: var(--signal-orange);
  margin-bottom: 24px;
  user-select: none;
}
.pullquote-v5-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  font-weight: 400;
  margin: 0 0 40px;
}
.pullquote-v5-text strong {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  color: var(--signal-orange);
}
.pullquote-v5-cite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.55);
}
.pullquote-v5-cite::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(11, 13, 16, 0.3);
}


/* ================================================================
   v5 POLISH PASS — 8-item feedback execution
   ================================================================ */

/* ---- #6 HEADER ALIGNMENT — pennant logo bounded by header height ---- */
.site-header-v4 {
  height: 76px;
  min-height: 76px !important;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
}
.site-header-v4 .brand-mark {
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.site-header-v4 .brand-mark img {
  height: 44px !important;
  width: auto !important;
  display: block;
}
.has-promo-strip .site-header-v4 {
  top: var(--promo-h);
}

/* ---- #7 PROCESS — drop WK times ---- */
.appr-step-num-wrap .appr-step-num {
  display: none !important;
}
.appr-step-num-wrap {
  gap: 0 !important;
  justify-content: flex-start;
}
.appr-step-when {
  display: none !important;
}

/* Process icon animations — keyed to icon type, infinite gentle motion */
.appr-step .gfw-icon[data-icon="target"] svg circle:first-child {
  transform-origin: 12px 12px;
  animation: target-pulse 3.2s ease-in-out infinite;
}
.appr-step .gfw-icon[data-icon="target"] svg circle:nth-child(2) {
  transform-origin: 12px 12px;
  animation: target-pulse 3.2s ease-in-out 0.6s infinite;
}
@keyframes target-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 1; }
}
.appr-step .gfw-icon[data-icon="grid"] svg {
  animation: grid-shimmer 4.5s ease-in-out infinite;
}
@keyframes grid-shimmer {
  0%, 100% { opacity: 0.85; }
  25% { opacity: 1; transform: scale(1.02); }
  50% { opacity: 0.95; }
  75% { opacity: 1; transform: scale(1.02); }
}
.appr-step .gfw-icon[data-icon="code"] svg {
  animation: code-bounce 3.6s ease-in-out infinite;
}
@keyframes code-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1.5px); }
}
.appr-step .gfw-icon[data-icon="arrow-up-right"] svg {
  animation: arrow-rise 3.8s ease-in-out infinite;
}
@keyframes arrow-rise {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1px, -1px) rotate(-3deg); }
}

/* Timeline connector — already animates via scaleX on .is-in-view */

/* ---- #5 SUB-PAGE BACK CUE — small inline "Back to home" pill ---- */
.cap-hero::after,
.hww-hero::after,
.about-hero::after,
.ai-hero::after {
  display: none; /* don't pollute hero, use header back link instead */
}
.site-header-v4 .brand-mark::after {
  content: "← HOME";
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: rgba(255, 106, 61, 0.7);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.cap-page .site-header-v4 .brand-mark,
.hww-page .site-header-v4 .brand-mark,
.about-page .site-header-v4 .brand-mark,
.ai-page .site-header-v4 .brand-mark {
  position: relative;
}
.cap-page .site-header-v4 .brand-mark:hover::after,
.hww-page .site-header-v4 .brand-mark:hover::after,
.about-page .site-header-v4 .brand-mark:hover::after,
.ai-page .site-header-v4 .brand-mark:hover::after {
  opacity: 1;
  transform: translateY(0);
}
/* Permanent "Back to home" link on sub-pages — small visible pill */
.subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(247, 245, 240, 0.92);
  border: 1px solid rgba(11, 13, 16, 0.12);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: 28px;
  transition: background 0.25s ease, transform 0.25s ease;
  width: fit-content;
}
.subpage-back:hover {
  background: var(--signal-orange);
  color: var(--color-ink);
  border-color: var(--signal-orange);
  transform: translateX(-3px);
}
.ai-page .subpage-back {
  background: rgba(11, 13, 16, 0.6);
  border-color: rgba(247, 245, 240, 0.2);
  color: var(--paper);
}
.ai-page .subpage-back:hover {
  background: var(--electric-lime);
  color: var(--color-ink);
  border-color: var(--electric-lime);
}


/* ================================================================
   v6 VISUAL REBUILD — Pain stacked editorial + Disciplines panels
   + Closing CTA particles + Ladder polish.
   "Show don't say" — large icons, atmospheric shaders, less box.
   ================================================================ */

/* ==== PAIN SECTION — stacked editorial rows, no fix-with line ==== */
.pain-v5 { padding: clamp(120px, 16vw, 200px) 0 !important; overflow: hidden; }
.pain-v5-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }
.pain-v5-head { margin-bottom: clamp(64px, 9vw, 120px); }

.pain-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}

.pain-card {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(247, 245, 240, 0.10) !important;
  border-radius: 0 !important;
  padding: clamp(56px, 7vw, 96px) var(--edge) !important;
  margin: 0 calc(-1 * var(--edge));
  display: grid !important;
  grid-template-columns: 140px 1fr 1fr 280px !important;
  gap: clamp(24px, 4vw, 64px) !important;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: none !important;
}
.pain-card:hover { transform: none !important; background: rgba(247, 245, 240, 0.025) !important; border-top-color: rgba(255, 106, 61, 0.4) !important; }
.pain-card:last-child { border-bottom: 1px solid rgba(247, 245, 240, 0.10); }

/* Atmospheric shader per card — radial mesh that drifts on hover */
.pain-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--shader-x, 80%) var(--shader-y, 50%),
    var(--shader-tone, rgba(255, 106, 61, 0.10)), transparent 50%);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-quart);
  pointer-events: none;
  z-index: 0;
}
.pain-card:hover::before { opacity: 1; }
.pain-card > * { position: relative; z-index: 1; }

/* Tone variations */
.pain-card:nth-child(1) { --shader-tone: rgba(255, 106, 61, 0.16); --shader-x: 85%; }
.pain-card:nth-child(2) { --shader-tone: rgba(255, 45, 120, 0.10); --shader-x: 15%; }
.pain-card:nth-child(3) { --shader-tone: rgba(255, 132, 89, 0.14); --shader-x: 80%; }
.pain-card:nth-child(4) { --shader-tone: rgba(168, 202, 204, 0.10); --shader-x: 15%; }
.pain-card:nth-child(5) { --shader-tone: rgba(255, 45, 120, 0.14); --shader-x: 85%; }
.pain-card:nth-child(6) { --shader-tone: rgba(255, 106, 61, 0.10); --shader-x: 15%; }

.pain-card-num {
  font-family: var(--font-sans) !important;
  font-size: clamp(3.4rem, 6vw, 5rem) !important;
  font-weight: 500 !important;
  line-height: 0.85 !important;
  letter-spacing: -0.04em !important;
  color: var(--signal-orange) !important;
  margin: 0 !important;
  position: relative;
}
.pain-card-num span.tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.5);
  margin-top: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pain-card-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--paper) !important;
  margin: 0 !important;
}
.pain-card-body {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgba(247, 245, 240, 0.66) !important;
  margin: 0 !important;
  max-width: 38ch;
}
.pain-card-fix { display: none !important; }

/* Icon column — big animated brand-kit icon */
.pain-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  position: relative;
}
.pain-card-icon svg {
  width: 120px;
  height: 120px;
  color: rgba(247, 245, 240, 0.42);
  stroke-width: 1.2;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.8s var(--ease-out-quart), color 0.5s ease;
}
.pain-card:hover .pain-card-icon svg {
  color: var(--paper);
  transform: scale(1.06);
}

/* Per-card icon animations */
.pain-card:nth-child(1) .pain-card-icon svg { animation: brand-needle 9s linear infinite; transform-origin: 50% 50%; }
@keyframes brand-needle { to { transform: rotate(360deg); } }

.pain-card:nth-child(2) .pain-card-icon svg { animation: conv-leak 4.2s ease-in-out infinite; }
@keyframes conv-leak { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.5; transform: translateY(3px); } }

.pain-card:nth-child(3) .pain-card-icon svg { animation: tool-spread 5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes tool-spread { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.pain-card:nth-child(4) .pain-card-icon svg { animation: knowledge-pulse 4.8s ease-in-out infinite; }
@keyframes knowledge-pulse { 0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 0 rgba(255, 45, 120, 0)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 45, 120, 0.4)); } }

.pain-card:nth-child(5) .pain-card-icon svg { animation: ai-orbit 18s linear infinite; transform-origin: 50% 50%; }
@keyframes ai-orbit { to { transform: rotate(360deg); } }

.pain-card:nth-child(6) .pain-card-icon svg { animation: hire-spiral 7s ease-in-out infinite; }
@keyframes hire-spiral { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

@media (max-width: 1080px) {
  .pain-card {
    grid-template-columns: 100px 1fr !important;
    grid-template-rows: auto auto;
    grid-template-areas: "num title" "num body";
    padding: clamp(40px, 6vw, 64px) var(--edge) !important;
  }
  .pain-card-num { grid-area: num; }
  .pain-card-title { grid-area: title; }
  .pain-card-body { grid-area: body; }
  .pain-card-icon { display: none; }
}

/* ==== DISCIPLINES — show-don't-say panels ==== */
.disc-v4 { padding: clamp(120px, 16vw, 200px) 0 !important; overflow: hidden; background: var(--paper) !important; }
.disc-v4-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }
.disc-v4-head { margin-bottom: clamp(64px, 9vw, 120px); }

.disc-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}

.disc-card {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(11, 13, 16, 0.10) !important;
  border-radius: 0 !important;
  padding: clamp(56px, 7vw, 96px) var(--edge) !important;
  margin: 0 calc(-1 * var(--edge));
  display: grid !important;
  grid-template-columns: 120px 1.4fr 1fr 280px !important;
  gap: clamp(24px, 4vw, 64px) !important;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: auto !important;
  flex-direction: row !important;
  grid-column: auto !important;
  text-decoration: none;
}
.disc-card:hover { transform: none !important; box-shadow: none !important; border-top-color: rgba(255, 106, 61, 0.4) !important; }
.disc-card:last-child { border-bottom: 1px solid rgba(11, 13, 16, 0.10); }

/* Atmospheric mesh per card */
.disc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--shader-x, 75%) 50%,
    var(--shader-tone, rgba(255, 106, 61, 0.06)), transparent 55%);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-quart);
  pointer-events: none;
  z-index: 0;
}
.disc-card:hover::before { opacity: 1; }
.disc-card > * { position: relative; z-index: 1; }

.disc-card:nth-child(2) { --shader-tone: rgba(255, 106, 61, 0.10); --shader-x: 85%; }
.disc-card:nth-child(3) { --shader-tone: rgba(168, 202, 204, 0.18); --shader-x: 18%; }
.disc-card:nth-child(4) { --shader-tone: rgba(94, 47, 47, 0.12); --shader-x: 85%; }
.disc-card:nth-child(5) { --shader-tone: rgba(255, 132, 89, 0.12); --shader-x: 18%; }
.disc-card:nth-child(6) { --shader-tone: rgba(34, 67, 74, 0.12); --shader-x: 85%; }

.disc-card-num {
  font-family: var(--font-sans) !important;
  font-size: clamp(2.6rem, 4.4vw, 3.8rem) !important;
  font-weight: 500 !important;
  line-height: 0.85 !important;
  letter-spacing: -0.04em !important;
  color: rgba(11, 13, 16, 0.35) !important;
  margin: 0 !important;
  position: relative;
}

.disc-card-icon-wrap,
.disc-card-icon {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: 180px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  position: relative;
}
.disc-card-icon-wrap .gfw-icon,
.disc-card-icon .gfw-icon { width: 120px !important; height: 120px !important; }
.disc-card-icon-wrap svg,
.disc-card-icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke-width: 1.1 !important;
  color: var(--color-ink);
  transition: transform 0.8s var(--ease-out-quart);
}

.disc-card-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.028em !important;
  color: var(--color-ink) !important;
  margin: 0 0 12px !important;
}
.disc-card-desc {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgba(11, 13, 16, 0.65) !important;
  margin: 0 !important;
  max-width: 50ch;
}
.disc-card-ai {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  color: rgba(11, 13, 16, 0.55) !important;
  text-transform: uppercase !important;
  border-top: none !important;
  padding-top: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.disc-card-ai::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.6);
}

.disc-card-body { display: flex; flex-direction: column; gap: 20px; }
.disc-card-body .disc-card-num { display: none; } /* num is in left col now */

/* Per-discipline icon animations */
.disc-card:hover .gfw-icon svg { transform: scale(1.06); }
.disc-card[href*="#brand"] .gfw-icon svg { animation: disc-compass 18s linear infinite; transform-origin: 50% 50%; }
@keyframes disc-compass { to { transform: rotate(-360deg); } }

.disc-card[href*="#identity"] .gfw-icon svg { animation: disc-layers 4.5s ease-in-out infinite; }
@keyframes disc-layers { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.disc-card[href*="#ux-ui"] .gfw-icon svg { animation: disc-cursor 3.8s ease-in-out infinite; }
@keyframes disc-cursor { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 3px); } }

.disc-card[href*="#web-app"] .gfw-icon svg { animation: disc-screen 5s ease-in-out infinite; }
@keyframes disc-screen { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; transform: scale(1.02); } }

.disc-card[href*="#experiential"] .gfw-icon svg { animation: disc-broadcast 3.5s ease-in-out infinite; }
@keyframes disc-broadcast { 0% { transform: scale(0.96); opacity: 0.85; } 50% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(0.96); opacity: 0.85; } }

/* AI feature card — keeps the dark treatment but now full-bleed band */
.disc-card--feature.disc-card--ai {
  grid-column: auto !important;
  flex-direction: row !important;
  background: var(--color-deep-graphite) !important;
  color: var(--paper) !important;
  border: none !important;
  margin: 0 calc(-1 * var(--edge)) !important;
  padding: clamp(72px, 8vw, 120px) var(--edge) !important;
  min-height: auto !important;
}
.disc-card--feature.disc-card--ai::before {
  background:
    radial-gradient(circle at 80% 50%, rgba(255, 45, 120, 0.22), transparent 55%),
    radial-gradient(circle at 30% 30%, rgba(94, 47, 47, 0.15), transparent 50%);
  opacity: 1 !important;
}
.disc-card--feature.disc-card--ai::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 220px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.disc-card--feature.disc-card--ai .disc-card-num,
.disc-card--feature.disc-card--ai .disc-card-title { color: var(--paper) !important; }
.disc-card--feature.disc-card--ai .disc-card-num { color: var(--electric-lime) !important; }
.disc-card--feature.disc-card--ai .disc-card-desc { color: rgba(247, 245, 240, 0.78) !important; }
.disc-card--feature.disc-card--ai .disc-card-ai { color: var(--electric-lime) !important; }
.disc-card--feature.disc-card--ai .disc-card-icon { background: transparent !important; color: var(--electric-lime) !important; }
.disc-card--feature.disc-card--ai .disc-card-icon svg { color: var(--electric-lime) !important; }

@media (max-width: 1080px) {
  .disc-card {
    grid-template-columns: 80px 1fr !important;
    grid-template-areas: "num title" "num body" "num ai";
    padding: clamp(40px, 6vw, 64px) var(--edge) !important;
  }
  .disc-card-num { grid-area: num; }
  .disc-card-body { grid-area: title / title / body / body; }
  .disc-card-ai { grid-area: ai; }
  .disc-card-icon-wrap, .disc-card-icon { display: none; }
  .disc-card--feature.disc-card--ai { grid-template-columns: 1fr !important; grid-template-areas: "num" "title" "body" "ai"; }
}

/* ==== CLOSING CTA — particle field + deeper shader ==== */
.closing-v4 {
  padding: clamp(140px, 20vw, 240px) var(--edge) !important;
}
.closing-v4-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.closing-v4-particles span {
  position: absolute;
  display: block;
  width: 2px; height: 2px;
  background: var(--signal-orange);
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(255, 106, 61, 0.8);
  opacity: 0;
  animation: particle-float 12s linear infinite;
}
.closing-v4-particles span:nth-child(odd) { background: var(--electric-lime); box-shadow: 0 0 6px rgba(255, 45, 120, 0.7); }
.closing-v4-particles span:nth-child(1)  { left:  8%; top: 90%; animation-delay: 0s;   animation-duration: 14s; }
.closing-v4-particles span:nth-child(2)  { left: 18%; top: 95%; animation-delay: 2s;   animation-duration: 16s; }
.closing-v4-particles span:nth-child(3)  { left: 32%; top: 88%; animation-delay: 4s;   animation-duration: 13s; }
.closing-v4-particles span:nth-child(4)  { left: 48%; top: 92%; animation-delay: 6s;   animation-duration: 18s; }
.closing-v4-particles span:nth-child(5)  { left: 62%; top: 96%; animation-delay: 1.5s; animation-duration: 15s; }
.closing-v4-particles span:nth-child(6)  { left: 76%; top: 90%; animation-delay: 3.5s; animation-duration: 17s; }
.closing-v4-particles span:nth-child(7)  { left: 88%; top: 94%; animation-delay: 5s;   animation-duration: 14s; }
.closing-v4-particles span:nth-child(8)  { left: 14%; top: 98%; animation-delay: 7s;   animation-duration: 16s; }
.closing-v4-particles span:nth-child(9)  { left: 28%; top: 92%; animation-delay: 8.5s; animation-duration: 13s; }
.closing-v4-particles span:nth-child(10) { left: 42%; top: 96%; animation-delay: 0.5s; animation-duration: 19s; }
.closing-v4-particles span:nth-child(11) { left: 56%; top: 94%; animation-delay: 2.5s; animation-duration: 15s; }
.closing-v4-particles span:nth-child(12) { left: 70%; top: 98%; animation-delay: 4.5s; animation-duration: 14s; }
.closing-v4-particles span:nth-child(13) { left: 84%; top: 90%; animation-delay: 6.5s; animation-duration: 17s; }
.closing-v4-particles span:nth-child(14) { left: 22%; top: 92%; animation-delay: 9s;   animation-duration: 18s; }
.closing-v4-particles span:nth-child(15) { left: 92%; top: 96%; animation-delay: 1s;   animation-duration: 13s; }
.closing-v4-particles span:nth-child(16) { left:  4%; top: 94%; animation-delay: 3s;   animation-duration: 16s; }
@keyframes particle-float {
  0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translateY(-60vh) translateX(20px) scale(1.2); opacity: 0.9; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-100vh) translateX(-10px) scale(0.6); opacity: 0; }
}

/* Deeper shader on the orb — even more contrast */
.closing-v4-orb {
  filter: blur(72px) contrast(1.22) saturate(1.28) !important;
}

/* Inner card frame around the CTA content for visual focal point */
.closing-v4-inner {
  z-index: 3 !important;
}

@media (prefers-reduced-motion: reduce) {
  .closing-v4-particles span { animation: none !important; }
}

/* ================================================================
   v7 CINEMATIC REBUILD
   Hero · Pain pinned · Disciplines chapters · AI teaser · Work
   parallax · Closing particles. Plays nice with motion.js.
   ================================================================ */

:root {
  --bg-now: var(--color-ink);
  --fg-now: var(--paper);
  --section-edge: clamp(24px, 5vw, 96px);
}

body {
  background-color: var(--bg-now);
  color: var(--fg-now);
  transition: background-color 0.8s ease, color 0.8s ease;
}

/* SplitText helpers — keep words above their line-mask before reveal */
.line-mask { overflow: hidden; display: block; line-height: 1.05; padding-bottom: 0.08em; }
.split-word { display: inline-block; will-change: transform, opacity; }

/* ==== v7 HERO ==== */
.hero-v7 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #0A0A0A;
  color: var(--paper);
  overflow: hidden;
  padding: 0 var(--section-edge);
  --mx: 70%;
  --my: 35%;
}
.hero-v7-mesh {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 45% at var(--mx) var(--my), rgba(255, 106, 61, 0.55), transparent 60%),
    radial-gradient(40% 38% at 18% 28%, rgba(94, 47, 47, 0.55), transparent 65%),
    radial-gradient(55% 55% at 82% 78%, rgba(34, 67, 74, 0.45), transparent 65%),
    radial-gradient(35% 35% at 30% 80%, rgba(255, 45, 120, 0.18), transparent 60%);
  filter: blur(70px) saturate(1.15) contrast(1.1);
  animation: hero-mesh-drift 22s ease-in-out infinite alternate;
  transition: background 0.6s ease;
}
@keyframes hero-mesh-drift {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1.02) rotate(-1deg); }
}
.hero-v7-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: var(--noise);
  background-size: 260px;
}
.hero-v7-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-v7-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px 0 80px;
}
.hero-v7-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border: 1px solid rgba(247, 245, 240, 0.2);
  background: rgba(11, 13, 16, 0.45);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 40px;
}
.hero-v7-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.7);
  animation: pulse-warm 2.6s ease-in-out infinite;
}
@keyframes pulse-warm {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); box-shadow: 0 0 16px rgba(255, 106, 61, 0.9); }
}
.hero-v7-title {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 9vw, 7.6rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0 0 36px;
  max-width: 22ch;
}
.hero-v7-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, var(--signal-orange) 30%, var(--ember) 50%, var(--signal-orange) 70%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: title-glint 8s ease-in-out infinite;
}
@keyframes title-glint {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}
.hero-v7-dek {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.74);
  max-width: 52ch;
  margin: 0 0 40px;
}
.hero-v7-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero-v7-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  will-change: transform;
}
.hero-v7-btn--primary {
  background: var(--signal-orange);
  color: var(--color-ink);
  border: none;
}
.hero-v7-btn--primary:hover { background: var(--ember); }
.hero-v7-btn--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247, 245, 240, 0.3);
}
.hero-v7-btn--ghost:hover { background: rgba(247, 245, 240, 0.08); border-color: rgba(247, 245, 240, 0.55); }
.hero-v7-btn .gfw-icon {
  background: var(--color-ink);
  color: var(--signal-orange);
  border-radius: 999px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.hero-v7-btn .gfw-icon svg { width: 14px; height: 14px; }
.hero-v7-meta {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.5);
  text-transform: uppercase;
}
.hero-v7-meta strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .hero-v7-meta { grid-template-columns: 1fr 1fr; }
  .hero-v7-mesh { filter: blur(60px) saturate(1.1); }
}

/* ==== v7 PAIN — pinned scroll story ==== */
.pain-v7 {
  position: relative;
  height: 100vh;
  background: var(--color-ink);
  color: var(--paper);
  overflow: hidden;
}
.pain-v7-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--section-edge);
}
.pain-v7-eyebrow {
  position: absolute;
  top: 80px;
  left: var(--section-edge);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.pain-v7-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.6);
}
.pain-v7-dots {
  position: absolute;
  right: var(--section-edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pain-v7-dots span {
  width: 4px;
  height: 24px;
  background: rgba(247, 245, 240, 0.18);
  border-radius: 2px;
  transition: background 0.4s ease, height 0.4s ease;
}
.pain-v7-dots span.is-active {
  background: var(--signal-orange);
  height: 48px;
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.5);
}
.pain-v7-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 0 var(--section-edge);
  max-width: var(--max);
  margin: 0 auto;
  left: 0; right: 0;
}
.pain-v7-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 50%, var(--pain-shader, rgba(255, 106, 61, 0.18)), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
}
.pain-v7-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(10rem, 22vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--signal-orange);
  text-align: center;
  user-select: none;
}
.pain-v7-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 60ch;
}
.pain-v7-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--ember);
  text-transform: uppercase;
}
.pain-v7-headline {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
}
.pain-v7-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.pain-v7-line {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.78);
  margin: 0;
  max-width: 48ch;
}

@media (max-width: 768px) {
  .pain-v7 { height: auto; min-height: 100vh; padding: 96px 0; }
  .pain-v7-stage { position: relative; }
  .pain-v7-card { position: relative; grid-template-columns: 1fr; gap: 24px; }
  .pain-v7-num { font-size: clamp(7rem, 28vw, 10rem); }
  .pain-v7-dots { display: none; }
}

/* ==== v7 DISCIPLINES — chapter scroll ==== */
.disc-v7 {
  position: relative;
  background: var(--bg-now);
  color: var(--fg-now);
}
.disc-v7-chapter {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: 96px var(--section-edge);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.disc-v7-chapter[data-chapter="ai"] {
  grid-template-columns: 1.1fr 1fr;
}
.disc-v7-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.disc-v7-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: rgba(247, 245, 240, 0.55);
  text-transform: uppercase;
}
.disc-v7[data-light] .disc-v7-num,
.disc-v7-chapter[data-light] .disc-v7-num { color: rgba(11, 13, 16, 0.55); }
.disc-v7-title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
}
.disc-v7-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.disc-v7-chapter[data-chapter="ai"] .disc-v7-title em { color: var(--electric-lime); }
.disc-v7-lead {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
  color: inherit;
  opacity: 0.78;
}
.disc-v7-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.6);
  padding-top: 16px;
  border-top: 1px dashed rgba(247, 245, 240, 0.2);
  width: fit-content;
}
.disc-v7-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.7);
}
.disc-v7-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--electric-lime);
  color: var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition: background 0.3s ease;
}
.disc-v7-cta:hover { background: #DCFF60; }

/* Discipline icon canvas */
.disc-v7-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.disc-v7-art svg {
  width: 70%;
  height: 70%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}
.disc-v7-art::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--disc-glow, rgba(255, 106, 61, 0.18)), transparent 70%);
  filter: blur(40px);
}

/* Per-chapter icon motion */
.disc-v7-art[data-art="compass"] svg { animation: art-spin 24s linear infinite; }
.disc-v7-art[data-art="layers"] svg { animation: art-rise 4.5s ease-in-out infinite; }
.disc-v7-art[data-art="cursor"] svg { animation: art-drift 5s ease-in-out infinite; }
.disc-v7-art[data-art="screen"] svg { animation: art-blink 4s ease-in-out infinite; }
.disc-v7-art[data-art="broadcast"] svg { animation: art-pulse 3.5s ease-in-out infinite; }
.disc-v7-art[data-art="ai"] svg { animation: art-orbit 18s linear infinite; }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
@keyframes art-drift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(2%, 2%); } }
@keyframes art-blink { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes art-pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.04); } }
@keyframes art-orbit { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .disc-v7-chapter { grid-template-columns: 1fr; gap: 48px; padding: 80px var(--section-edge); }
  .disc-v7-art { aspect-ratio: 16/10; }
}

/* ==== v7 AI PRACTICE TEASER ==== */
.ai-teaser-v7 {
  position: relative;
  padding: clamp(140px, 18vw, 220px) var(--section-edge);
  background: #0A0A0A;
  color: var(--paper);
  overflow: hidden;
}
.ai-teaser-v7::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 75% 30%, rgba(255, 45, 120, 0.18), transparent 60%),
    radial-gradient(35% 35% at 25% 70%, rgba(168, 202, 204, 0.12), transparent 60%);
  pointer-events: none;
  filter: blur(50px);
}
.ai-teaser-v7-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
}
.ai-teaser-v7-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--electric-lime);
  margin-bottom: 28px;
}
.ai-teaser-v7-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 12px rgba(255, 45, 120, 0.7);
}
.ai-teaser-v7-title {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0;
}
.ai-teaser-v7-title em {
  font-style: normal;
  color: var(--electric-lime);
}
.ai-teaser-v7-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.4;
  color: rgba(247, 245, 240, 0.78);
  max-width: 40ch;
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid var(--electric-lime);
}
.ai-teaser-v7-quote em {
  color: var(--electric-lime);
  font-style: italic;
}
.ai-teaser-v7-rungs {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ai-teaser-v7-rung {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 18px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 14px;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--paper);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ai-teaser-v7-rung[data-rung="1"] { height: 180px; }
.ai-teaser-v7-rung[data-rung="2"] { height: 215px; }
.ai-teaser-v7-rung[data-rung="3"] { height: 250px; }
.ai-teaser-v7-rung[data-rung="4"] { height: 285px; }
.ai-teaser-v7-rung[data-rung="5"] {
  height: 320px;
  background: linear-gradient(180deg, rgba(255, 45, 120, 0.06), rgba(255, 45, 120, 0.18));
  border-color: rgba(255, 45, 120, 0.4);
}
.ai-teaser-v7-rung:hover {
  background: rgba(247, 245, 240, 0.08);
  border-color: rgba(255, 45, 120, 0.4);
  transform: translateY(-3px);
}
.ai-teaser-v7-rung small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.45);
}
.ai-teaser-v7-rung[data-rung="5"] small { color: var(--electric-lime); }
.ai-teaser-v7-rung h4 {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.1;
  color: var(--paper);
}
.ai-teaser-v7-rung p {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(247, 245, 240, 0.58);
  margin: 0;
}
.ai-teaser-v7-cta-row {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ai-teaser-v7-btn--lime {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  background: var(--electric-lime);
  color: var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  will-change: transform;
}
.ai-teaser-v7-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247, 245, 240, 0.3);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

@media (max-width: 880px) {
  .ai-teaser-v7-inner { grid-template-columns: 1fr; }
  .ai-teaser-v7-rungs { grid-template-columns: repeat(2, 1fr); }
  .ai-teaser-v7-rung[data-rung] { height: auto; min-height: 160px; }
}

/* ==== v7 WORK — parallax cards with Atropos tilt ==== */
.work-v7 {
  position: relative;
  padding: clamp(120px, 16vw, 180px) var(--section-edge);
  background: var(--paper);
  color: var(--color-ink);
}
.work-v7-head {
  max-width: var(--max);
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.work-v7-title {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0;
}
.work-v7-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.work-v7-aside {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(11, 13, 16, 0.55);
  max-width: 28ch;
  margin: 0;
}
.work-v7-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.work-v7-card {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-ink);
  text-decoration: none;
  color: var(--paper);
  transform-style: preserve-3d;
}
.work-v7-card .atropos-shadow {
  background: rgba(0, 0, 0, 0.5);
}
.work-v7-media {
  position: absolute;
  inset: -8%;
  background: linear-gradient(135deg, var(--card-tone, #5E2F2F), #0B0D10 70%);
  background-size: cover;
  background-position: center;
}
.work-v7-card[data-card-tone="orange"] .work-v7-media { background: linear-gradient(135deg, #FF6A3D, #5E2F2F 60%, #0B0D10); }
.work-v7-card[data-card-tone="teal"]   .work-v7-media { background: linear-gradient(135deg, #22434A, #0B0D10 60%, #5E2F2F); }
.work-v7-card[data-card-tone="rust"]   .work-v7-media { background: linear-gradient(135deg, #121418, #5E2F2F 60%, #FF6A3D); }
.work-v7-card[data-card-tone="aqua"]   .work-v7-media { background: linear-gradient(135deg, #A8CACC, #22434A 60%, #0B0D10); }
.work-v7-noise {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 220px;
  opacity: 0.16;
  mix-blend-mode: overlay;
}
.work-v7-body {
  position: absolute;
  left: 36px; right: 36px; bottom: 36px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.92) 80%);
  padding: 48px 0 0;
  z-index: 2;
}
.work-v7-tags {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.55);
  margin-bottom: 6px;
}
.work-v7-name {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 6px;
}
.work-v7-outcome {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.78);
  margin: 0;
}
.work-v7-arrow {
  position: absolute;
  top: 28px; right: 28px;
  z-index: 3;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.work-v7-card:hover .work-v7-arrow {
  background: var(--signal-orange);
  border-color: var(--signal-orange);
  color: var(--color-ink);
}
.work-v7-more {
  max-width: var(--max);
  margin: 56px auto 0;
  padding: 32px 36px;
  background: var(--color-ink);
  color: var(--paper);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.work-v7-more p { font-family: var(--font-sans); margin: 0; font-size: 16px; line-height: 1.5; color: rgba(247,245,240,0.8); max-width: 60ch; }
.work-v7-more a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--signal-orange);
  color: var(--color-ink);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .work-v7-head { grid-template-columns: 1fr; }
  .work-v7-grid { grid-template-columns: 1fr; }
  .work-v7-more { flex-direction: column; align-items: flex-start; }
}

/* ==== v7 CLOSING ==== */
.closing-v7 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0A0A0A;
  color: var(--paper);
  overflow: hidden;
  padding: 120px var(--section-edge);
}
.closing-v7-orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 110vh; height: 110vh;
  max-width: 1500px; max-height: 1500px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  z-index: 0;
  filter: blur(80px) contrast(1.25) saturate(1.3);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 106, 61, 0.95) 0%, transparent 38%),
    radial-gradient(circle at 28% 62%, rgba(94, 47, 47, 0.85) 0%, transparent 46%),
    radial-gradient(circle at 72% 32%, rgba(255, 132, 89, 0.65) 0%, transparent 44%);
  animation: closing-orb-flow 18s ease-in-out infinite;
}
@keyframes closing-orb-flow {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -52%) scale(1.04) rotate(-2deg); }
}
.closing-v7-grain {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 240px;
  opacity: 0.13;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}
.closing-v7-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.closing-v7-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 1080px;
}
.closing-v7-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.22);
  background: rgba(11, 13, 16, 0.4);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--paper);
}
.closing-v7-title {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 9vw, 7.6rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
}
.closing-v7-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.closing-v7-sub {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.74);
  max-width: 52ch;
  margin: 0;
}
.closing-v7-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Override stale older home rules so v7 markup wins */
.hero-v4, .pain-v5, .disc-v4, .ai-focus-v4, .work-v4, .whyfail-v5, .discovery-v5, .pullquote-v5, .appr-v4, .diag-v4, .closing-v4 { display: none !important; }


/* Fix: SplitText wraps italic em content — re-apply gradient + visibility */
.hero-v7-title em .split-word,
.disc-v7-title em .split-word,
.work-v7-title em .split-word,
.ai-teaser-v7-title em .split-word,
.closing-v7-title em .split-word,
.pain-v7-headline em .split-word {
  background: linear-gradient(90deg, var(--signal-orange) 30%, var(--ember) 50%, var(--signal-orange) 70%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
/* AI teaser gets lime variant */
.ai-teaser-v7-title em .split-word {
  background: var(--electric-lime);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--font-sans);
  font-style: normal;
}
/* Make sure SplitText line-masks don't clip descenders */
.hero-v7-title .line-mask,
.disc-v7-title .line-mask,
.pain-v7-headline .line-mask,
.work-v7-title .line-mask,
.ai-teaser-v7-title .line-mask,
.closing-v7-title .line-mask {
  padding-bottom: 0.15em;
}

/* ================================================================
   v7 SCAN — two premium diagnostic cards
   ================================================================ */
.scan-v7 {
  position: relative;
  padding: clamp(120px, 16vw, 180px) var(--section-edge);
  background: #0A0A0A;
  color: var(--paper);
  overflow: hidden;
}
.scan-v7::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 45% at 20% 30%, rgba(255, 106, 61, 0.14), transparent 60%),
    radial-gradient(45% 40% at 78% 70%, rgba(255, 45, 120, 0.10), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.scan-v7-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.scan-v7-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: 72px;
}
.scan-v7-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--signal-orange);
  margin-bottom: 28px;
}
.scan-v7-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.7);
}
.scan-v7-title {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.038em;
  color: var(--paper);
  margin: 0;
}
.scan-v7-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.scan-v7-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.72);
  max-width: 42ch;
  margin: 0;
}
.scan-v7-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.scan-v7-card {
  --glow-tone: rgba(255, 106, 61, 0.28);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 48px 44px 52px;
  background: rgba(247, 245, 240, 0.03);
  border: 1px solid rgba(247, 245, 240, 0.10);
  border-radius: 24px;
  text-decoration: none;
  color: var(--paper);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease,
              border-color 0.4s ease;
  isolation: isolate;
}
.scan-v7-card:hover {
  transform: translateY(-4px);
  background: rgba(247, 245, 240, 0.06);
  border-color: rgba(255, 106, 61, 0.4);
}
.scan-v7-card:nth-child(2):hover { border-color: rgba(255, 45, 120, 0.4); }
.scan-v7-card-glow {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 160%;
  background: radial-gradient(circle, var(--glow-tone), transparent 60%);
  filter: blur(40px);
  transform: translate(0, 0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}
.scan-v7-card:hover .scan-v7-card-glow {
  transform: translate(-4%, 4%);
  opacity: 1;
}
.scan-v7-card-arrow {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.4s ease;
}
.scan-v7-card:hover .scan-v7-card-arrow {
  background: var(--signal-orange);
  border-color: var(--signal-orange);
  color: var(--color-ink);
  transform: rotate(-8deg);
}
.scan-v7-card:nth-child(2):hover .scan-v7-card-arrow {
  background: var(--electric-lime);
  border-color: var(--electric-lime);
}
.scan-v7-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--signal-orange);
  text-transform: uppercase;
}
.scan-v7-card-title {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--paper);
  margin: 0;
}
.scan-v7-card-desc {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.72);
  margin: 0;
  max-width: 44ch;
}
.scan-v7-card-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 245, 240, 0.10);
}
.scan-v7-card-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: rgba(247, 245, 240, 0.55);
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .scan-v7-head { grid-template-columns: 1fr; }
  .scan-v7-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   HOME LADDER — dark + lime treatment on home (not just /ai)
   Scoped so it only applies inside the top-level #ai-focus section
   (which is now the pinned ladder on the home page).
   ================================================================ */
#ai-focus.ladder-v3-pinned {
  background: var(--color-deep-graphite);
  color: var(--paper);
}
#ai-focus.ladder-v3-pinned::before { display: none; }
#ai-focus.ladder-v3-pinned .ladder-v3-pin::before {
  background:
    radial-gradient(at 78% 24%, rgba(255, 45, 120, 0.14) 0px, transparent 50%),
    radial-gradient(at 22% 78%, rgba(255, 45, 120, 0.06) 0px, transparent 50%);
}
#ai-focus .ladder-v3-eyebrow { color: var(--electric-lime); }
#ai-focus .ladder-v3-eyebrow-dot {
  background: var(--electric-lime);
  box-shadow: 0 0 10px rgba(255, 45, 120, 0.6);
}
#ai-focus .ladder-v3-title { color: var(--paper); }
#ai-focus .ladder-v3-title em {
  color: var(--electric-lime);
  font-family: var(--font-sans);
  font-style: normal;
}
#ai-focus .ladder-v3-dek { color: rgba(247, 245, 240, 0.7); }
#ai-focus .ladder-v3-step {
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  box-shadow: none;
  color: var(--paper);
}
#ai-focus .ladder-v3-step:hover,
#ai-focus .ladder-v3-step:focus-visible {
  background: rgba(247, 245, 240, 0.07);
  border-color: rgba(255, 45, 120, 0.4);
  box-shadow: 0 20px 60px -22px rgba(255, 45, 120, 0.18);
}
#ai-focus .ladder-v3-step[data-rung="5"] {
  background: linear-gradient(180deg, rgba(255, 45, 120, 0.06), rgba(255, 45, 120, 0.16));
  border-color: rgba(255, 45, 120, 0.45);
}
#ai-focus .ladder-v3-icon {
  background: rgba(11, 13, 16, 0.4);
  border-color: rgba(247, 245, 240, 0.14);
  color: var(--electric-lime);
}
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-icon {
  background: var(--electric-lime);
  color: var(--color-ink);
  border-color: transparent;
}
#ai-focus .ladder-v3-step-tag { color: rgba(247, 245, 240, 0.5); }
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-step-tag { color: var(--electric-lime); }
#ai-focus .ladder-v3-step-num { color: var(--paper); }
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-step-num { color: var(--electric-lime); }
#ai-focus .ladder-v3-step-title { color: var(--paper); }
#ai-focus .ladder-v3-step-desc { color: rgba(247, 245, 240, 0.62); }
#ai-focus .ladder-v3-yaxis-label,
#ai-focus .ladder-v3-yaxis-top,
#ai-focus .ladder-v3-yaxis-bottom { color: rgba(247, 245, 240, 0.55); }
#ai-focus .ladder-v3-yaxis-top { color: var(--electric-lime); }
#ai-focus .ladder-v3-yaxis-line {
  background: linear-gradient(180deg, var(--electric-lime), rgba(247, 245, 240, 0.2));
}

/* ================================================================
   v8 GROWMODO-INSPIRED REBUILD
   Lighter palette. Tighter sections. Conversion-focused.
   AI Automation & Integration led.
   ================================================================ */

:root {
  --v8-edge: clamp(20px, 4vw, 72px);
  --v8-max: 1360px;
  --v8-section: clamp(72px, 9vw, 128px);
  --v8-paper: #F7F5F0;
  --v8-warm: #F2EEE7;
  --v8-line: rgba(11, 13, 16, 0.09);
  --v8-line-strong: rgba(11, 13, 16, 0.16);
  --v8-mute: rgba(11, 13, 16, 0.6);
}

/* Force body to paper by default; sections can inherit or override */
body { background: var(--v8-paper); color: var(--color-ink); transition: none; }

/* ==== SHARED PATTERNS ==== */
.v8-shell { max-width: var(--v8-max); margin: 0 auto; padding: 0 var(--v8-edge); }
.v8-section { padding: var(--v8-section) 0; position: relative; }
.v8-section--dark { background: #0A0A0A; color: var(--paper); }
.v8-section--warm { background: var(--v8-warm); }

.v8-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 20px;
}
.v8-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--signal-orange);
  box-shadow: 0 0 8px rgba(255, 106, 61, 0.5);
}
.v8-section--dark .v8-eyebrow { color: var(--electric-lime); }
.v8-section--dark .v8-eyebrow .dot { background: var(--electric-lime); box-shadow: 0 0 10px rgba(255, 45, 120, 0.6); }

.v8-h2 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  color: inherit;
}
.v8-h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.v8-section--dark .v8-h2 em { color: var(--electric-lime); font-family: var(--font-sans); font-style: normal; }
.v8-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  color: var(--v8-mute);
  max-width: 52ch;
  margin: 16px 0 0;
}
.v8-section--dark .v8-sub { color: rgba(247, 245, 240, 0.72); }

.v8-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
@media (max-width: 880px) { .v8-head { grid-template-columns: 1fr; align-items: start; } }

/* ==== v8 HERO — dark mesh but tighter, conversion copy ==== */
.hero-v8 {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: #0A0A0A;
  color: var(--paper);
  overflow: hidden;
  padding: 120px var(--v8-edge) 80px;
}
.hero-v8-mesh {
  position: absolute; inset: -15%;
  z-index: 0;
  background:
    radial-gradient(45% 40% at 70% 35%, rgba(255, 106, 61, 0.55), transparent 62%),
    radial-gradient(38% 34% at 20% 30%, rgba(94, 47, 47, 0.5), transparent 65%),
    radial-gradient(48% 48% at 82% 78%, rgba(34, 67, 74, 0.42), transparent 65%),
    radial-gradient(30% 30% at 30% 78%, rgba(255, 45, 120, 0.18), transparent 60%);
  filter: blur(60px) saturate(1.15) contrast(1.08);
  animation: hero-v8-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-v8-drift {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06) translate(-1%, 1%); }
}
.hero-v8-grain {
  position: absolute; inset: 0;
  background-image: var(--noise);
  background-size: 260px;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.hero-v8-inner {
  position: relative;
  z-index: 3;
  max-width: var(--v8-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hero-v8-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(247, 245, 240, 0.22);
  background: rgba(11, 13, 16, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 28px;
}
.hero-v8-pill-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--electric-lime);
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.7);
  animation: pulse-lime 2.4s ease-in-out infinite;
}
@keyframes pulse-lime {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}
.hero-v8-title {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: var(--paper);
  margin: 0 0 28px;
}
.hero-v8-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-orange);
}
.hero-v8-dek {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.78);
  max-width: 52ch;
  margin: 0 0 36px;
}
.hero-v8-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}
.hero-v8-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease;
  will-change: transform;
}
.hero-v8-btn--primary { background: var(--signal-orange); color: var(--color-ink); border: none; }
.hero-v8-btn--primary:hover { background: var(--ember); }
.hero-v8-btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(247, 245, 240, 0.3); }
.hero-v8-btn--ghost:hover { background: rgba(247, 245, 240, 0.08); border-color: rgba(247, 245, 240, 0.55); }
.hero-v8-btn .arrow {
  width: 20px; height: 20px;
  background: var(--color-ink);
  color: var(--signal-orange);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-v8-btn .arrow svg { width: 12px; height: 12px; }
.hero-v8-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(247, 245, 240, 0.7);
  text-transform: uppercase;
}
.hero-v8-trust-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--signal-orange);
  font-size: 15px;
  letter-spacing: 1px;
}

.hero-v8-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-v8-side-card {
  padding: 20px 22px;
  background: rgba(247, 245, 240, 0.05);
  border: 1px solid rgba(247, 245, 240, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.hero-v8-side-card strong {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.hero-v8-side-card span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.8px;
  color: rgba(247, 245, 240, 0.6);
  text-transform: uppercase;
}
.hero-v8-side-card em {
  font-style: normal;
  color: var(--electric-lime);
}

@media (max-width: 880px) {
  .hero-v8-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-v8 { padding: 96px var(--v8-edge) 64px; }
}

/* ==== v8 TRUST BAR ==== */
.trust-v8 {
  padding: 32px var(--v8-edge);
  background: var(--v8-paper);
  border-bottom: 1px solid var(--v8-line);
}
.trust-v8-inner {
  max-width: var(--v8-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.trust-v8-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--v8-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-v8-stars {
  color: var(--signal-orange);
  letter-spacing: 2px;
  font-size: 14px;
}
.trust-v8-logos {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}
.trust-v8-logos span {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: rgba(11, 13, 16, 0.5);
  transition: color 0.3s ease;
}
.trust-v8-logos span:hover { color: var(--color-ink); }

/* ==== v8 BOTTLENECK — 3 problem cards (light) ==== */
.bottleneck-v8 { background: var(--v8-paper); }
.bottleneck-v8-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bottleneck-card {
  padding: 36px 32px;
  background: #FFFFFF;
  border: 1px solid var(--v8-line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.bottleneck-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 106, 61, 0.35);
  box-shadow: 0 24px 48px -24px rgba(255, 106, 61, 0.22);
}
.bottleneck-card-icon {
  width: 48px; height: 48px;
  background: var(--v8-warm);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--signal-orange);
  margin-bottom: 4px;
}
.bottleneck-card-icon svg { width: 24px; height: 24px; stroke-width: 1.6; }
.bottleneck-card h3 {
  font-family: var(--font-sans);
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-ink);
}
.bottleneck-card p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--v8-mute);
  margin: 0;
}
@media (max-width: 880px) { .bottleneck-v8-grid { grid-template-columns: 1fr; } }

/* ==== v8 COMPARISON — Old way vs New way (light) ==== */
.compare-v8 { background: var(--v8-warm); }
.compare-v8-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
}
.compare-v8-grid::before {
  content: "vs";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 36px;
  color: var(--v8-mute);
  background: var(--v8-warm);
  padding: 8px 16px;
  border-radius: 999px;
}
.compare-v8-card {
  padding: 40px 36px;
  background: #FFFFFF;
  border: 1px solid var(--v8-line);
  border-radius: 20px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.compare-v8-card--old {
  background: rgba(11, 13, 16, 0.03);
  border-style: dashed;
}
.compare-v8-card--new {
  background: #FFFFFF;
  border-color: var(--signal-orange);
  box-shadow: 0 24px 48px -32px rgba(255, 106, 61, 0.28);
}
.compare-v8-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--v8-mute);
}
.compare-v8-card--new .compare-v8-tag { color: var(--signal-orange); }
.compare-v8-card h3 {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0;
  color: var(--color-ink);
}
.compare-v8-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compare-v8-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
}
.compare-v8-card--old li { color: var(--v8-mute); text-decoration: line-through; text-decoration-color: rgba(255, 106, 61, 0.6); text-decoration-thickness: 1.5px; }
.compare-v8-card li::before {
  content: "";
  width: 18px; height: 18px;
  background: var(--v8-warm);
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.compare-v8-card--new li::before { background: var(--electric-lime); }
@media (max-width: 880px) {
  .compare-v8-grid { grid-template-columns: 1fr; }
  .compare-v8-grid::before { position: relative; top: 0; left: 0; transform: none; margin: 8px auto; }
}

/* ==== v8 HOW IT WORKS — 4 numbered steps (light) ==== */
.how-v8 { background: var(--v8-paper); }
.how-v8-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.how-v8-grid::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, var(--v8-line), var(--signal-orange), var(--electric-lime));
  z-index: 0;
}
.how-v8-step {
  position: relative;
  z-index: 2;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how-v8-step-num {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--v8-paper);
  border: 2px solid var(--v8-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.how-v8-step:nth-child(1) .how-v8-step-num { border-color: var(--signal-orange); color: var(--signal-orange); }
.how-v8-step:nth-child(2) .how-v8-step-num { border-color: var(--signal-orange); color: var(--signal-orange); }
.how-v8-step:nth-child(3) .how-v8-step-num { border-color: var(--ember); color: var(--ember); }
.how-v8-step:nth-child(4) .how-v8-step-num {
  border-color: var(--electric-lime);
  background: var(--electric-lime);
  color: var(--color-ink);
}
.how-v8-step-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--v8-mute);
  text-transform: uppercase;
}
.how-v8-step h3 {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-ink);
}
.how-v8-step p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--v8-mute);
  margin: 0;
}
@media (max-width: 880px) {
  .how-v8-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-v8-grid::before { display: none; }
}

/* ==== v8 SERVICES — image tile grid (light) ==== */
.services-v8 { background: var(--v8-warm); }
.services-v8-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.services-v8-tile {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  background: var(--color-ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-v8-tile:hover { transform: translateY(-4px); }
.services-v8-tile-bg {
  position: absolute;
  inset: 0;
  background: var(--tile-tone, linear-gradient(135deg, #FF6A3D, #5E2F2F 60%, #0B0D10));
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-v8-tile:hover .services-v8-tile-bg { transform: scale(1.06); }
.services-v8-tile-body {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 2;
}
.services-v8-tile-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.services-v8-tile h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
}
.services-v8-tile-icon {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(247, 245, 240, 0.12);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  z-index: 2;
  transition: background 0.35s ease;
}
.services-v8-tile:hover .services-v8-tile-icon {
  background: var(--signal-orange);
  color: var(--color-ink);
}
.services-v8-tile-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* Feature (bigger) tile */
.services-v8-tile.is-feature {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 2/1.5;
}
.services-v8-tile.is-feature h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  max-width: 20ch;
}
.services-v8-tile.is-feature .services-v8-tile-bg {
  background: linear-gradient(135deg, #0A0A0A 0%, #22434A 40%, #FF2D78 130%);
}
.services-v8-tile.is-feature .services-v8-tile-body strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--electric-lime);
  text-transform: uppercase;
  margin-top: 12px;
}
@media (max-width: 1080px) {
  .services-v8-grid { grid-template-columns: repeat(2, 1fr); }
  .services-v8-tile.is-feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .services-v8-grid { grid-template-columns: 1fr; }
  .services-v8-tile.is-feature { grid-column: span 1; }
}

/* ==== v8 IMPACT — 4 stat + testimonial cards (light) ==== */
.impact-v8 { background: var(--v8-paper); }
.impact-v8-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.impact-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 40px 36px;
  background: #FFFFFF;
  border: 1px solid var(--v8-line);
  border-radius: 20px;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
.impact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 61, 0.4);
}
.impact-card-stat {
  font-family: var(--font-sans);
  font-size: clamp(3.2rem, 5.6vw, 4.8rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--signal-orange);
}
.impact-card-stat em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--burgundy);
}
.impact-card-body h4 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 8px;
}
.impact-card-body p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--v8-mute);
  margin: 0;
}
.impact-card-body cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.8px;
  color: var(--burgundy);
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .impact-v8-grid { grid-template-columns: 1fr; }
  .impact-card { grid-template-columns: 1fr; gap: 16px; padding: 32px 28px; }
}

/* ==== Section spacing helpers ==== */
.v8-section + .v8-section { margin-top: 0; }

/* Hide the older v7 sections we're replacing */
.pain-v7, .disc-v7, .ai-teaser-v7 { display: none !important; }


/* ================================================================
   v9 — B&W PHOTOGRAPHY SERVICES + PALETTE TONE-DOWN + FIXES
   ================================================================ */

/* ---- Palette tone-down: orange reserved for CTAs + key accents ---- */
.impact-card-stat { color: var(--color-ink) !important; }
.impact-card-stat em { color: var(--signal-orange) !important; }
.how-v8-grid::before {
  background: linear-gradient(90deg, var(--v8-line), var(--v8-line-strong), var(--v8-line)) !important;
}
.how-v8-step:nth-child(1) .how-v8-step-num,
.how-v8-step:nth-child(2) .how-v8-step-num,
.how-v8-step:nth-child(3) .how-v8-step-num {
  border-color: var(--v8-line-strong) !important;
  color: var(--color-ink) !important;
}
.how-v8-step:nth-child(4) .how-v8-step-num {
  border-color: var(--color-ink) !important;
  background: var(--color-ink) !important;
  color: var(--paper) !important;
}
/* Hero mesh: pull orange back, let burgundy/teal carry it */
.hero-v8-mesh {
  background:
    radial-gradient(45% 40% at 70% 35%, rgba(255, 106, 61, 0.34), transparent 62%),
    radial-gradient(38% 34% at 20% 30%, rgba(94, 47, 47, 0.55), transparent 65%),
    radial-gradient(48% 48% at 82% 78%, rgba(34, 67, 74, 0.5), transparent 65%) !important;
}
.hero-v8-side-card em { color: var(--paper); opacity: 0.85; }

/* ---- Ladder pin: header clearance + step min-height ---- */
.ladder-v3-pinned .ladder-v3-pin { padding-top: clamp(88px, 11vh, 128px); }
.ladder-v3-step { min-height: 175px; }

/* ---- SERVICES v9: B&W photography tiles ---- */
.services-v9 {
  background: var(--v8-paper);
}
.services-v9-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.services-v9-tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  display: block;
  text-decoration: none;
  color: var(--paper);
  aspect-ratio: 3/3.6;
  background: var(--color-ink);
}
.services-v9-tile.is-feature {
  grid-column: 1 / -1;
  aspect-ratio: 21/8;
}
.services-v9-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.82);
  transform: scale(1.02);
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-v9-tile:hover .services-v9-img {
  filter: grayscale(0) contrast(1.02) brightness(0.9);
  transform: scale(1.06);
}
.services-v9-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.1) 30%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
}
.services-v9-tile.is-feature .services-v9-shade {
  background: linear-gradient(90deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.25) 65%, rgba(10,10,10,0.05) 100%);
}
.services-v9-body {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  z-index: 2;
}
.services-v9-tile.is-feature .services-v9-body {
  left: clamp(28px, 4vw, 56px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  max-width: 55%;
}
.services-v9-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: rgba(247, 245, 240, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 245, 240, 0.2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 14px;
}
.services-v9-chip .cdot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--signal-orange);
}
.services-v9-tile.is-feature .services-v9-chip .cdot { background: var(--electric-lime); }
.services-v9-title {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 8px;
}
.services-v9-tile.is-feature .services-v9-title {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}
.services-v9-desc {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.78);
  margin: 0;
  max-width: 44ch;
}
.services-v9-arrow {
  position: absolute;
  top: 24px; right: 24px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(247, 245, 240, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 245, 240, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: background 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-v9-tile:hover .services-v9-arrow {
  background: var(--signal-orange);
  border-color: var(--signal-orange);
  color: var(--color-ink);
  transform: rotate(-8deg) scale(1.06);
}
.services-v9-tile.is-feature:hover .services-v9-arrow {
  background: var(--electric-lime);
  border-color: var(--electric-lime);
}
@media (max-width: 1024px) {
  .services-v9-grid { grid-template-columns: 1fr; }
  .services-v9-tile { aspect-ratio: 4/3; }
  .services-v9-tile.is-feature { aspect-ratio: 4/3; }
  .services-v9-tile.is-feature .services-v9-body { max-width: 90%; top: auto; bottom: 28px; transform: none; }
}

/* ---- PHOTO BAND: full-bleed B&W editorial moment w/ parallax ---- */
.band-v9 {
  position: relative;
  height: clamp(420px, 68vh, 720px);
  overflow: hidden;
  background: var(--color-ink);
}
.band-v9-img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.62);
}
.band-v9-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, transparent 30%, rgba(10,10,10,0.55) 100%);
  z-index: 1;
}
.band-v9-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--v8-edge);
  max-width: var(--v8-max);
  margin: 0 auto;
  left: 0; right: 0;
}
.band-v9-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 26ch;
  margin: 0 0 24px;
}
.band-v9-quote strong {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  color: var(--signal-orange);
}
.band-v9-cite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.7);
  text-transform: uppercase;
}
.band-v9-cite::before {
  content: "";
  width: 32px; height: 1px;
  background: rgba(247, 245, 240, 0.4);
}

/* ================================================================
   v10 MONOCHROME DISCIPLINE — final accent pass
   Rule: ink/paper/grey everywhere. Signal Orange appears ONLY on:
   (1) primary CTA buttons, (2) the hero headline em. Nothing else.
   Lime is removed from the home page entirely.
   ================================================================ */

/* Nav — kill the lime AI dot */
.site-header-v4 .nav-links a[data-ai-link]::before { display: none !important; }

/* Hero — monochrome mesh w/ one faint warm corner */
.hero-v8-mesh {
  background:
    radial-gradient(45% 40% at 70% 35%, rgba(247,245,240,0.10), transparent 62%),
    radial-gradient(38% 34% at 20% 30%, rgba(247,245,240,0.05), transparent 65%),
    radial-gradient(48% 48% at 82% 82%, rgba(255,106,61,0.10), transparent 65%) !important;
}
.hero-v8-pill-dot { background: var(--paper) !important; box-shadow: none !important; animation: none !important; }
.hero-v8-trust-stars { color: var(--paper) !important; }
/* hero em stays orange — the single accent moment */
.hero-v8-title em { color: var(--signal-orange) !important; }

/* Trust bar — ink stars */
.trust-v8-stars { color: var(--color-ink) !important; }

/* Section headers — ink italic em, ink eyebrow dots */
.v8-eyebrow { color: var(--v8-mute) !important; }
.v8-eyebrow .dot { background: var(--color-ink) !important; box-shadow: none !important; }
.v8-h2 em { color: var(--color-ink) !important; }

/* Bottleneck — ink icons, neutral hover */
.bottleneck-card-icon { color: var(--color-ink) !important; }
.bottleneck-card:hover {
  border-color: var(--v8-line-strong) !important;
  box-shadow: 0 24px 48px -24px rgba(11,13,16,0.16) !important;
}

/* Comparison — ink border on the "new" card */
.compare-v8-card--new {
  border-color: var(--color-ink) !important;
  box-shadow: 0 24px 48px -32px rgba(11,13,16,0.25) !important;
}
.compare-v8-card--new .compare-v8-tag { color: var(--color-ink) !important; }
.compare-v8-card--new li::before { background: var(--color-ink) !important; }
.compare-v8-card--old li { text-decoration-color: rgba(11,13,16,0.3) !important; }

/* Services — neutral chips, paper hover fills */
.services-v9-chip .cdot { background: var(--paper) !important; }
.services-v9-tile.is-feature .services-v9-chip .cdot { background: var(--paper) !important; }
.services-v9-tile:hover .services-v9-arrow,
.services-v9-tile.is-feature:hover .services-v9-arrow {
  background: var(--paper) !important;
  border-color: var(--paper) !important;
  color: var(--color-ink) !important;
}

/* AI Ladder (home) — monochrome; rung 5 inverts to paper */
#ai-focus .ladder-v3-eyebrow { color: rgba(247,245,240,0.7) !important; }
#ai-focus .ladder-v3-eyebrow-dot { background: var(--paper) !important; box-shadow: none !important; }
#ai-focus .ladder-v3-title em {
  color: var(--paper) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
}
#ai-focus .ladder-v3-icon { color: var(--paper) !important; }
#ai-focus .ladder-v3-step:hover,
#ai-focus .ladder-v3-step:focus-visible {
  border-color: rgba(247,245,240,0.4) !important;
  box-shadow: none !important;
}
#ai-focus .ladder-v3-step[data-rung="5"] {
  background: var(--paper) !important;
  border-color: var(--paper) !important;
}
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-step-title,
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-step-num,
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-step-tag { color: var(--color-ink) !important; }
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-step-desc { color: rgba(11,13,16,0.65) !important; }
#ai-focus .ladder-v3-step[data-rung="5"] .ladder-v3-icon {
  background: var(--color-ink) !important;
  color: var(--paper) !important;
  border-color: transparent !important;
}
#ai-focus .ladder-v3-yaxis-top { color: rgba(247,245,240,0.7) !important; }
#ai-focus .ladder-v3-yaxis-line {
  background: linear-gradient(180deg, rgba(247,245,240,0.7), rgba(247,245,240,0.15)) !important;
}

/* Work — ink em, paper hover arrows */
.work-v7-title em { color: var(--color-ink) !important; }
.work-v7-card:hover .work-v7-arrow {
  background: var(--paper) !important;
  border-color: var(--paper) !important;
  color: var(--color-ink) !important;
}

/* Impact — fully ink stats */
.impact-card-stat em { color: rgba(11,13,16,0.45) !important; }
.impact-card:hover { border-color: var(--v8-line-strong) !important; }
.impact-card-body cite { color: var(--v8-mute) !important; }

/* Photo band — paper strong, no orange */
.band-v9-quote strong { color: var(--paper) !important; }

/* Scan — neutral everything, paper hover fills */
.scan-v7-eyebrow { color: rgba(247,245,240,0.7) !important; }
.scan-v7-eyebrow .dot { background: var(--paper) !important; box-shadow: none !important; }
.scan-v7-title em { color: var(--paper) !important; }
.scan-v7-card-num { color: rgba(247,245,240,0.6) !important; }
.scan-v7-card-glow { background: radial-gradient(circle, rgba(247,245,240,0.10), transparent 60%) !important; }
.scan-v7-card:hover,
.scan-v7-card:nth-child(2):hover { border-color: rgba(247,245,240,0.4) !important; }
.scan-v7-card:hover .scan-v7-card-arrow,
.scan-v7-card:nth-child(2):hover .scan-v7-card-arrow {
  background: var(--paper) !important;
  border-color: var(--paper) !important;
  color: var(--color-ink) !important;
}
.scan-v7::before {
  background:
    radial-gradient(50% 45% at 20% 30%, rgba(247,245,240,0.06), transparent 60%),
    radial-gradient(45% 40% at 78% 70%, rgba(247,245,240,0.04), transparent 60%) !important;
}

/* Closing — orange orb replaced with mono glow + circle-line motif */
.closing-v7-orb {
  background: radial-gradient(circle at 50% 50%, rgba(247,245,240,0.14) 0%, transparent 48%) !important;
  filter: blur(40px) !important;
  animation: none !important;
}
.closing-v7::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 55%, transparent 118px, rgba(247,245,240,0.14) 119px, transparent 121px),
    radial-gradient(circle at 44% 50%, transparent 178px, rgba(247,245,240,0.12) 179px, transparent 181px),
    radial-gradient(circle at 62% 52%, transparent 248px, rgba(247,245,240,0.16) 249px, transparent 251px),
    radial-gradient(circle at 81% 47%, transparent 128px, rgba(247,245,240,0.12) 129px, transparent 131px);
}
.closing-v7-title em { color: var(--paper) !important; }
.closing-v7-particles span {
  background: rgba(247,245,240,0.85) !important;
  box-shadow: 0 0 6px rgba(247,245,240,0.4) !important;
}
.closing-v7-eyebrow .hero-v7-eyebrow-dot,
.closing-v7 .hero-v7-eyebrow-dot {
  background: var(--paper) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Promo strip dot — ink-neutral */
.promo-strip-dot { background: var(--paper) !important; box-shadow: none !important; }

/* ================================================================
   v10b HOTFIX — visibility bugs
   ================================================================ */

/* Body color is ink, permanently. Dark sections declare their own. */
body { color: var(--color-ink) !important; background: var(--v8-paper) !important; transition: none !important; }

/* Light-section headings: explicit ink (immune to any inherited corruption) */
.bottleneck-v8 .v8-h2, .compare-v8 .v8-h2, .how-v8 .v8-h2,
.impact-v8 .v8-h2, .services-v9 .v8-h2 { color: var(--color-ink) !important; }
.bottleneck-v8 .v8-sub, .compare-v8 .v8-sub, .how-v8 .v8-sub,
.impact-v8 .v8-sub, .services-v9 .v8-sub { color: var(--v8-mute) !important; }
.v8-h2 .split-word { color: inherit; }

/* Scrolled header: nav links must flip to ink over the paper band */
.site-header.is-scrolled .nav-links a,
.site-header-v4.is-scrolled .nav-links a { color: var(--color-ink) !important; }
.site-header.is-scrolled { color: var(--color-ink) !important; }

/* Kill the leftover lime radial on the home ladder pin (the green box) */
#ai-focus.ladder-v3-pinned .ladder-v3-pin::before { display: none !important; background: none !important; }

/* Ladder cards: clearly visible surfaces on the dark field */
#ai-focus .ladder-v3-step {
  background: #16191E !important;
  border: 1px solid rgba(247, 245, 240, 0.22) !important;
}
#ai-focus .ladder-v3-step:hover,
#ai-focus .ladder-v3-step:focus-visible {
  background: #1C2026 !important;
  border-color: rgba(247, 245, 240, 0.5) !important;
}
#ai-focus .ladder-v3-step-title { color: var(--paper) !important; }
#ai-focus .ladder-v3-step-desc { color: rgba(247, 245, 240, 0.72) !important; }
#ai-focus .ladder-v3-step-tag { color: rgba(247, 245, 240, 0.55) !important; }
#ai-focus .ladder-v3-step-num { color: var(--paper) !important; }
#ai-focus .ladder-v3-icon {
  background: rgba(247, 245, 240, 0.08) !important;
  border: 1px solid rgba(247, 245, 240, 0.2) !important;
}
/* rung 5 paper invert stays (defined in v10) */

/* Ladder dek: center-aligned orphan fix — left align, tighter */
.ladder-v3-dek { text-align: left !important; margin-left: 0 !important; }

/* ================================================================
   v11 WARM EDITORIAL — definitive header + light-dominant repaint
   Model: cream/paper site, ink type, ORANGE as the single accent,
   two dark anchors (Ladder, Closing). Ark-style discipline.
   ================================================================ */

/* ---- HEADER: definitive, ends all layout fights ---- */
.promo-strip {
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  height: var(--promo-h) !important;
  z-index: 210 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  background: var(--color-ink) !important;
  color: var(--paper) !important;
  margin: 0 !important;
  padding: 0 16px !important;
}
.site-header, .site-header-v4 {
  position: fixed !important;
  top: var(--promo-h) !important;
  left: 0 !important; right: 0 !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 0 var(--v8-edge) !important;
  margin: 0 !important;
  z-index: 200 !important;
  background: rgba(247, 245, 240, 0.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v8-line) !important;
  color: var(--color-ink) !important;
  overflow: visible !important;
}
.site-header .brand-mark,
.site-header-v4 .brand-mark {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  flex-shrink: 0;
}
.site-header .brand-mark img,
.site-header-v4 .brand-mark img {
  height: 38px !important;
  width: auto !important;
  filter: none !important;
  display: block;
}
.site-header .nav-links,
.site-header-v4 .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.site-header .nav-links a,
.site-header-v4 .nav-links a {
  color: var(--color-ink) !important;
  font-family: var(--font-sans);
  font-size: 13.5px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none !important;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.site-header .nav-links a:hover,
.site-header-v4 .nav-links a:hover { opacity: 1; text-decoration: none !important; }
.site-header .nav-cta,
.site-header-v4 .nav-cta {
  flex-shrink: 0;
  background: var(--signal-orange) !important;
  color: var(--color-ink) !important;
  border: none !important;
}
@media (max-width: 880px) {
  .site-header .nav-links, .site-header-v4 .nav-links { display: none !important; }
}

/* ---- HERO: light, warm, Ark-style ---- */
.hero-v8 {
  background: var(--v8-paper) !important;
  color: var(--color-ink) !important;
  min-height: 88vh !important;
  padding-top: calc(var(--promo-h) + 72px + 48px) !important;
}
.hero-v8-mesh {
  background:
    radial-gradient(45% 40% at 78% 25%, rgba(255, 106, 61, 0.13), transparent 60%),
    radial-gradient(38% 34% at 15% 70%, rgba(230, 225, 216, 0.8), transparent 65%),
    radial-gradient(30% 30% at 60% 85%, rgba(94, 47, 47, 0.06), transparent 60%) !important;
  filter: blur(70px) !important;
  animation: hero-v8-drift 24s ease-in-out infinite alternate !important;
}
.hero-v8-grain { opacity: 0.4 !important; mix-blend-mode: multiply !important; }
.hero-v8-pill {
  background: #FFFFFF !important;
  border: 1px solid var(--v8-line-strong) !important;
  color: var(--color-ink) !important;
}
.hero-v8-pill-dot { background: var(--signal-orange) !important; animation: pulse-warm 2.6s ease-in-out infinite !important; }
.hero-v8-title { color: var(--color-ink) !important; }
.hero-v8-title em { color: var(--signal-orange) !important; }
.hero-v8-dek { color: rgba(11, 13, 16, 0.7) !important; }
.hero-v8-btn--ghost {
  color: var(--color-ink) !important;
  border: 1px solid rgba(11, 13, 16, 0.25) !important;
}
.hero-v8-btn--ghost:hover { background: rgba(11, 13, 16, 0.05) !important; }
.hero-v8-trust { color: rgba(11, 13, 16, 0.6) !important; }
.hero-v8-trust-stars { color: var(--signal-orange) !important; }
.hero-v8-side-card {
  background: #FFFFFF !important;
  border: 1px solid var(--v8-line) !important;
  backdrop-filter: none !important;
  box-shadow: 0 12px 32px -20px rgba(11, 13, 16, 0.12);
}
.hero-v8-side-card strong { color: var(--color-ink) !important; }
.hero-v8-side-card strong em { color: var(--signal-orange) !important; opacity: 1 !important; font-style: normal; }
.hero-v8-side-card span { color: rgba(11, 13, 16, 0.55) !important; }
/* B&W portrait card at the top of the side stack */
.hero-v8-photo {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  border: 1px solid var(--v8-line);
}
.hero-v8-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.hero-v8-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,13,16,0.35));
}

/* ---- ORANGE AS THE BRAND ACCENT (light sections) ---- */
.v8-eyebrow .dot { background: var(--signal-orange) !important; }
.v8-h2 em { color: var(--signal-orange) !important; }
.trust-v8-stars { color: var(--signal-orange) !important; }
.bottleneck-card-icon { color: var(--signal-orange) !important; }
.compare-v8-card--new {
  border-color: var(--signal-orange) !important;
  box-shadow: 0 24px 48px -30px rgba(255, 106, 61, 0.3) !important;
}
.compare-v8-card--new .compare-v8-tag { color: var(--signal-orange) !important; }
.compare-v8-card--new li::before { background: var(--signal-orange) !important; }
.how-v8-grid::before {
  background: linear-gradient(90deg, var(--v8-line), var(--signal-orange)) !important;
}
.how-v8-step:nth-child(4) .how-v8-step-num {
  border-color: var(--signal-orange) !important;
  background: var(--signal-orange) !important;
  color: var(--color-ink) !important;
}
.services-v9-chip .cdot { background: var(--signal-orange) !important; }
.services-v9-tile.is-feature .services-v9-chip .cdot { background: var(--signal-orange) !important; }
.services-v9-tile:hover .services-v9-arrow,
.services-v9-tile.is-feature:hover .services-v9-arrow {
  background: var(--signal-orange) !important;
  border-color: var(--signal-orange) !important;
  color: var(--color-ink) !important;
}
.work-v7-title em { color: var(--signal-orange) !important; }
.work-v7-card:hover .work-v7-arrow {
  background: var(--signal-orange) !important;
  border-color: var(--signal-orange) !important;
  color: var(--color-ink) !important;
}
.impact-card-stat { color: var(--signal-orange) !important; }
.impact-card-stat em { color: var(--color-ink) !important; opacity: 0.55 !important; }
.band-v9-quote strong { color: var(--signal-orange) !important; }

/* ---- SCAN: flip to light warm band (dark anchors = ladder + closing only) ---- */
.scan-v7 { background: var(--v8-warm) !important; color: var(--color-ink) !important; }
.scan-v7::before {
  background:
    radial-gradient(50% 45% at 20% 30%, rgba(255, 106, 61, 0.07), transparent 60%),
    radial-gradient(45% 40% at 78% 70%, rgba(94, 47, 47, 0.05), transparent 60%) !important;
  filter: blur(50px) !important;
}
.scan-v7-eyebrow { color: var(--burgundy) !important; }
.scan-v7-eyebrow .dot { background: var(--signal-orange) !important; }
.scan-v7-title { color: var(--color-ink) !important; }
.scan-v7-title em {
  color: var(--signal-orange) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
}
.scan-v7-sub { color: rgba(11, 13, 16, 0.65) !important; }
.scan-v7-card {
  background: #FFFFFF !important;
  border: 1px solid var(--v8-line) !important;
  color: var(--color-ink) !important;
}
.scan-v7-card:hover,
.scan-v7-card:nth-child(2):hover {
  border-color: rgba(255, 106, 61, 0.45) !important;
  box-shadow: 0 24px 60px -28px rgba(255, 106, 61, 0.25);
}
.scan-v7-card-glow { background: radial-gradient(circle, rgba(255, 106, 61, 0.10), transparent 60%) !important; }
.scan-v7-card-num { color: var(--signal-orange) !important; }
.scan-v7-card-title { color: var(--color-ink) !important; }
.scan-v7-card-desc { color: rgba(11, 13, 16, 0.65) !important; }
.scan-v7-card-meta { color: rgba(11, 13, 16, 0.5) !important; }
.scan-v7-card-foot { border-top-color: var(--v8-line) !important; }
.scan-v7-card-arrow {
  border-color: rgba(11, 13, 16, 0.25) !important;
  color: var(--color-ink) !important;
}
.scan-v7-card:hover .scan-v7-card-arrow,
.scan-v7-card:nth-child(2):hover .scan-v7-card-arrow {
  background: var(--signal-orange) !important;
  border-color: var(--signal-orange) !important;
  color: var(--color-ink) !important;
}

/* ---- LADDER (dark anchor #1): warm the accents ---- */
#ai-focus .ladder-v3-eyebrow { color: var(--ember) !important; }
#ai-focus .ladder-v3-eyebrow-dot { background: var(--signal-orange) !important; }
#ai-focus .ladder-v3-title em { color: var(--ember) !important; }
#ai-focus .ladder-v3-step:hover,
#ai-focus .ladder-v3-step:focus-visible { border-color: rgba(255, 132, 89, 0.55) !important; }
#ai-focus .ladder-v3-yaxis-top { color: var(--ember) !important; }
#ai-focus .ladder-v3-yaxis-line {
  background: linear-gradient(180deg, var(--signal-orange), rgba(247,245,240,0.15)) !important;
}

/* ---- CLOSING (dark anchor #2): one orange ring + orange CTA ---- */
.closing-v7::before {
  background:
    radial-gradient(circle at 28% 55%, transparent 118px, rgba(247,245,240,0.14) 119px, transparent 121px),
    radial-gradient(circle at 44% 50%, transparent 178px, rgba(255,106,61,0.5) 179px, transparent 181px),
    radial-gradient(circle at 62% 52%, transparent 248px, rgba(247,245,240,0.16) 249px, transparent 251px),
    radial-gradient(circle at 81% 47%, transparent 128px, rgba(247,245,240,0.12) 129px, transparent 131px) !important;
}
.closing-v7-title em {
  color: var(--ember) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
}
.closing-v7-orb {
  background: radial-gradient(circle at 50% 50%, rgba(255, 106, 61, 0.16) 0%, transparent 50%) !important;
}

/* ================================================================
   v12 EXPLORATION TOUCHES — the crimson→violet→blue signature,
   used exactly three times. Duotone astronaut band, gradient em
   in the closing, gradient underline on the band cite.
   ================================================================ */
:root {
  --grad-explore: linear-gradient(95deg, #F5054F 0%, #A4459F 48%, #4D7BE0 100%);
  --grad-explore-soft: linear-gradient(95deg, #FF5A7A 0%, #A46BE8 50%, #6C8CFF 100%);
}

/* Photo band → duotone vision moment (grayscale base + color-blend wash) */
.band-v9-img { filter: grayscale(1) contrast(1.18) brightness(0.7) !important; }
.band-v9::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grad-explore);
  mix-blend-mode: color;
  opacity: 0.85;
  pointer-events: none;
}
.band-v9-shade {
  background: radial-gradient(ellipse at 30% 60%, transparent 25%, rgba(10,10,10,0.6) 100%) !important;
  z-index: 2 !important;
}
.band-v9-inner { z-index: 3 !important; }
.band-v9-quote strong {
  background: var(--grad-explore-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.band-v9-cite::before {
  background: var(--grad-explore-soft) !important;
  height: 2px !important;
}

/* Closing headline em → the gradient, the final signature */
.closing-v7-title em {
  background: var(--grad-explore-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* ================================================================
   v13 — video hero, transparent header over hero, rung expand
   icons, simplified impact
   ================================================================ */

/* HERO: full-width video with overlay, light text */
.hero-v8 { background: #0A0A0A !important; color: var(--paper) !important; }
.hero-v8-video { position: absolute; inset: 0; z-index: 0; }
.hero-v8-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.55) contrast(1.05);
}
.hero-v8-mesh {
  z-index: 1 !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.72) 100%),
    radial-gradient(45% 40% at 75% 30%, rgba(255, 106, 61, 0.16), transparent 62%) !important;
  filter: none !important;
  animation: none !important;
}
.hero-v8-grain { z-index: 2 !important; opacity: 0.12 !important; mix-blend-mode: overlay !important; }
.hero-v8-inner { position: relative; z-index: 3; }
.hero-v8-title { color: var(--paper) !important; }
.hero-v8-title em { color: var(--signal-orange) !important; }
.hero-v8-dek { color: rgba(247, 245, 240, 0.8) !important; }
.hero-v8-pill {
  background: rgba(11, 13, 16, 0.45) !important;
  border: 1px solid rgba(247, 245, 240, 0.25) !important;
  color: var(--paper) !important;
  backdrop-filter: blur(10px);
}
.hero-v8-btn--ghost {
  color: var(--paper) !important;
  border: 1px solid rgba(247, 245, 240, 0.35) !important;
}
.hero-v8-btn--ghost:hover { background: rgba(247, 245, 240, 0.1) !important; }
.hero-v8-trust { color: rgba(247, 245, 240, 0.7) !important; }
.hero-v8-side-card {
  background: rgba(11, 13, 16, 0.5) !important;
  border: 1px solid rgba(247, 245, 240, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}
.hero-v8-side-card strong { color: var(--paper) !important; }
.hero-v8-side-card span { color: rgba(247, 245, 240, 0.6) !important; }
.hero-v8-photo { display: none !important; } /* video carries the imagery now */

/* HEADER: transparent over the video hero, paper band on scroll */
.site-header, .site-header-v4 {
  background: transparent !important;
  border-bottom-color: transparent !important;
  color: var(--paper) !important;
  backdrop-filter: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.site-header .nav-links a, .site-header-v4 .nav-links a { color: var(--paper) !important; }
.site-header .brand-mark img, .site-header-v4 .brand-mark img { filter: invert(1) !important; }
.site-header.is-scrolled, .site-header-v4.is-scrolled {
  background: rgba(247, 245, 240, 0.94) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v8-line) !important;
  color: var(--color-ink) !important;
}
.site-header.is-scrolled .nav-links a, .site-header-v4.is-scrolled .nav-links a { color: var(--color-ink) !important; }
.site-header.is-scrolled .brand-mark img, .site-header-v4.is-scrolled .brand-mark img { filter: none !important; }

/* RUNGS: expand affordance */
.ladder-v3-step { min-height: 195px !important; position: relative; }
.ladder-v3-step::after {
  content: "+";
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.35);
  color: rgba(247, 245, 240, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s ease;
  pointer-events: none;
}
.ladder-v3-step:hover::after {
  background: var(--signal-orange);
  border-color: var(--signal-orange);
  color: var(--color-ink);
  transform: rotate(90deg);
}
#ai-focus .ladder-v3-step[data-rung="5"]::after {
  border-color: rgba(11, 13, 16, 0.3);
  color: var(--color-ink);
}

/* IMPACT: simplified 3-up */
.impact-v8-grid--simple { grid-template-columns: repeat(3, 1fr) !important; }
.impact-card--simple {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  padding: 40px 36px !important;
  text-align: left;
}
.impact-card--simple h4 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0;
}
.impact-card--simple cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--v8-mute);
  text-transform: uppercase;
  margin-top: auto;
}
@media (max-width: 880px) { .impact-v8-grid--simple { grid-template-columns: 1fr !important; } }

/* v13b — hero goes single column, full-width type */
.hero-v8-inner { grid-template-columns: 1fr !important; }
.hero-v8-title { max-width: 18ch; }
.hero-v8-dek { max-width: 56ch; }

/* ================================================================
   v14 — FOUNDATION dark break · HOW-IT-WORKS motion · services
   expand tiles · closing CTA + newsletter · scan de-lime
   ================================================================ */

/* ---- 4 · FOUNDATION — the dark mid-page anchor ---- */
.foundation-v14 {
  position: relative;
  background: #0A0A0A;
  color: var(--color-paper);
  overflow: hidden;
}
.foundation-v14-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 82% 8%, rgba(255, 106, 61, 0.13), transparent 65%),
    radial-gradient(ellipse 50% 40% at 8% 95%, rgba(255, 106, 61, 0.07), transparent 60%);
}
.foundation-v14 .v8-shell { position: relative; z-index: 1; }
.foundation-v14 .v8-h2 { color: var(--color-paper); }
.foundation-v14 .v8-h2 em {
  color: var(--color-signal-orange);
  font-family: var(--font-serif);
  font-style: italic;
}
.foundation-v14 .v8-eyebrow { color: var(--color-signal-orange); }
.foundation-v14 .v8-eyebrow .dot {
  background: var(--color-signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.6);
}
.foundation-v14 .v8-sub { color: rgba(247, 245, 240, 0.72); }

.foundation-v14-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.foundation-v14-card {
  position: relative;
  background: #16191E;
  border: 1px solid rgba(247, 245, 240, 0.09);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.35s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), border-color 0.35s ease;
}
.foundation-v14-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 61, 0.4);
}
.foundation-v14-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.foundation-v14-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 106, 61, 0.1);
  border: 1px solid rgba(255, 106, 61, 0.3);
  color: var(--color-signal-orange);
}
.foundation-v14-icon svg { width: 26px; height: 26px; }
.foundation-v14-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(247, 245, 240, 0.35);
}
.foundation-v14-card h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-paper);
  margin: 0;
}
.foundation-v14-card p {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(247, 245, 240, 0.66);
  margin: 0;
}
.foundation-v14-kicker {
  margin: clamp(36px, 4vw, 56px) auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 25px);
  color: rgba(247, 245, 240, 0.85);
  max-width: 34ch;
}
@media (max-width: 900px) {
  .foundation-v14-grid { grid-template-columns: 1fr; }
}

/* ---- 5 · HOW IT WORKS — scroll progress line ---- */
.how-v8-progress {
  position: relative;
  height: 2px;
  background: rgba(11, 13, 16, 0.08);
  border-radius: 2px;
  margin: clamp(32px, 4vw, 48px) 0 clamp(28px, 3vw, 40px);
  overflow: hidden;
}
.how-v8-progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-signal-orange), var(--color-ember));
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 2px;
}

/* ---- 6 · SERVICES — tiles are buttons now (expand in place) ---- */
button.services-v9-tile {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.services-v9-expand {
  transition: transform 0.35s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), background-color 0.3s ease, color 0.3s ease;
}
.services-v9-tile:hover .services-v9-expand,
.services-v9-tile:focus-visible .services-v9-expand {
  transform: scale(1.15) rotate(90deg);
  background: var(--color-signal-orange);
  color: var(--color-paper);
}

/* ---- 10 · SCAN — de-lime: both cards run warm ---- */
.scan-v7-card-glow { --glow-tone: rgba(255, 106, 61, 0.24); }
.scan-v7-card-num { color: var(--color-signal-orange) !important; }

/* ---- 11 · CLOSING — scoping CTA + newsletter ---- */
.closing-v14 {
  position: relative;
  background: #0A0A0A;
  color: var(--color-paper);
  padding: clamp(96px, 12vw, 180px) clamp(24px, 6vw, 96px);
  overflow: hidden;
}
.closing-v14-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 12% 20%, rgba(255, 106, 61, 0.12), transparent 62%),
    radial-gradient(ellipse 40% 50% at 95% 90%, rgba(255, 106, 61, 0.06), transparent 60%);
}
.closing-v14-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.closing-v14-eyebrow { color: var(--color-signal-orange); }
.closing-v14-eyebrow .dot {
  background: var(--color-signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.6);
}
.closing-v14-title {
  font-size: clamp(44px, 5.6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--color-paper);
  margin: 20px 0 24px;
}
.closing-v14-title em {
  color: var(--color-signal-orange);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.closing-v14-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: rgba(247, 245, 240, 0.72);
  max-width: 46ch;
  margin: 0 0 36px;
}
.closing-v14-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.closing-v14-mail {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: rgba(247, 245, 240, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 245, 240, 0.3);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.closing-v14-mail:hover {
  color: var(--color-signal-orange);
  border-color: var(--color-signal-orange);
}
.closing-v14-news {
  background: #16191E;
  border: 1px solid rgba(247, 245, 240, 0.1);
  border-radius: 24px;
  padding: clamp(32px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.closing-v14-news-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--color-signal-orange);
}
.closing-v14-news h3 {
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-paper);
  margin: 0;
}
.closing-v14-news p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.62);
  margin: 0;
}
.closing-v14-form {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.closing-v14-form input {
  flex: 1;
  min-width: 0;
  background: rgba(247, 245, 240, 0.06);
  border: 1px solid rgba(247, 245, 240, 0.16);
  border-radius: 12px;
  padding: 15px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--color-paper);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.closing-v14-form input::placeholder { color: rgba(247, 245, 240, 0.38); }
.closing-v14-form input:focus {
  outline: none;
  border-color: var(--color-signal-orange);
  background: rgba(247, 245, 240, 0.09);
}
.closing-v14-form button {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 0 26px;
  background: var(--color-signal-orange);
  color: var(--color-paper);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.closing-v14-form button:hover { background: var(--color-ember); transform: translateY(-1px); }
.closing-v14-form button:disabled { opacity: 0.6; cursor: wait; }
.closing-v14-form-msg {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  min-height: 18px;
}
.closing-v14-form-msg.is-success { color: #7DD87D; }
.closing-v14-form-msg.is-error { color: var(--color-ember); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 960px) {
  .closing-v14-inner { grid-template-columns: 1fr; gap: 48px; }
  .closing-v14-form { flex-direction: column; }
  .closing-v14-form button { padding: 15px 26px; }
}

/* v14 — HOW steps: all four start neutral, then light in scroll sequence */
.how-v8-step:nth-child(4) .how-v8-step-num {
  border-color: var(--v8-line-strong) !important;
  background: var(--v8-paper) !important;
  color: var(--color-ink) !important;
}
.how-v8-step.is-lit .how-v8-step-num {
  border-color: var(--color-signal-orange) !important;
  color: var(--color-signal-orange) !important;
  background: var(--v8-paper) !important;
}
.how-v8-step.is-lit .how-v8-step-when {
  color: var(--color-signal-orange) !important;
}

/* ================================================================
   v14b — ECLIPSE ORB (closing signature, pure CSS + motion)
   + IMPACT metric blocks (chunky number style from brand boards)
   ================================================================ */

/* ---- Eclipse orb: dark sphere with breathing orange rim ---- */
.gfw-orb {
  position: absolute;
  top: -22%;
  right: -10%;
  width: min(56vw, 860px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.gfw-orb-haze {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 45%, rgba(255, 106, 61, 0.16), rgba(255, 106, 61, 0.05) 45%, transparent 68%);
  animation: gfwOrbHaze 12s ease-in-out infinite alternate;
}
.gfw-orb-glow {
  position: absolute;
  inset: -1.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, rgba(255, 176, 133, 0.95) 0%, rgba(255, 132, 89, 0.55) 26%, rgba(255, 106, 61, 0.25) 48%, transparent 66%);
  filter: blur(16px);
  transform: translate(-2.6%, -2.6%);
  animation: gfwOrbBreathe 9s ease-in-out infinite alternate;
}
.gfw-orb-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, #1D2127 0%, #101318 42%, #0A0C0E 68%, #070808 100%);
  box-shadow: inset 8px 10px 42px rgba(255, 106, 61, 0.14);
}
@keyframes gfwOrbBreathe {
  from { opacity: 0.7; transform: translate(-2.6%, -2.6%) scale(1); }
  to   { opacity: 1;   transform: translate(-3.1%, -3.1%) scale(1.035); }
}
@keyframes gfwOrbHaze {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .gfw-orb-glow, .gfw-orb-haze { animation: none; }
}
@media (max-width: 960px) {
  .gfw-orb { width: 88vw; top: auto; bottom: -30%; right: -35%; opacity: 0.85; }
}

/* ---- Impact: editorial metric blocks — rule, number, mono label ---- */
.impact-v14-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(36px, 4vw, 56px);
}
.impact-v14-block {
  border-top: 2px solid var(--color-ink);
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.impact-v14-num {
  font-size: clamp(52px, 5.6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-signal-orange);
  white-space: nowrap;
}
.impact-v14-num span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.42em;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-left: 4px;
}
.impact-v14-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.2px;
  color: var(--color-ink);
  text-transform: uppercase;
}
.impact-v14-block p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
  max-width: 34ch;
}
@media (max-width: 880px) {
  .impact-v14-grid { grid-template-columns: 1fr; gap: 36px; }
  .impact-v14-num { font-size: 60px; }
}

/* v14c — eclipse orb video layer (Seedance loop, screen-blend over section) */
.gfw-orb-video {
  position: absolute;
  width: 240%;
  aspect-ratio: 1;
  left: -45%;
  top: -39%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.gfw-orb.has-video .gfw-orb-video { opacity: 1; }
.gfw-orb .gfw-orb-glow,
.gfw-orb .gfw-orb-haze,
.gfw-orb .gfw-orb-sphere { transition: opacity 1.4s ease; }
.gfw-orb.has-video .gfw-orb-glow,
.gfw-orb.has-video .gfw-orb-haze,
.gfw-orb.has-video .gfw-orb-sphere { opacity: 0; }

/* ================================================================
   v15 — DYNAMIC LAYER: eclipse v2 (crisp, masked), film grain on
   dark anchors, orbit line, foundation light streak
   ================================================================ */

/* ---- Eclipse video v2: sphere centered at 70% of frame ---- */
.gfw-orb { width: min(62vw, 940px); top: -24%; right: -12%; }
.gfw-orb-video {
  width: 143%;
  left: -21.5%;
  top: -21.5%;
  filter: saturate(1.12) contrast(1.04);
  /* Feather the frame so video edges can never show, whatever the encode */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 68%, rgba(0,0,0,0.55) 80%, transparent 96%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 68%, rgba(0,0,0,0.55) 80%, transparent 96%);
}

/* ---- Orbit line + traveling node (brand-board moon motif) ---- */
.gfw-orb-orbit {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .gfw-orb-orbit circle { display: none; }
}

/* ---- Film grain on the dark anchor sections ---- */
.foundation-v14::after,
.closing-v14::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ---- Foundation: orange light streak (screen-blend, slow drift) ---- */
.foundation-v14-streak {
  position: absolute;
  top: 2%;
  right: -14%;
  width: min(54vw, 820px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  transform: rotate(-7deg);
}
.foundation-v14-streak img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  animation: gfwStreakDrift 12s ease-in-out infinite alternate;
}
@keyframes gfwStreakDrift {
  from { transform: translateX(-2.5%) scale(1); opacity: 0.75; }
  to   { transform: translateX(2.5%) scale(1.04); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .foundation-v14-streak img { animation: none; }
}
@media (max-width: 960px) {
  .foundation-v14-streak { width: 88vw; right: -30%; opacity: 0.6; }
}

/* v15a — eclipse v2 measured geometry (sphere center 50%/48%, d≈72%) */
.gfw-orb-video { width: 139%; left: -19.5%; top: -17%; }

/* ================================================================
   v16 — journal on home · shader closing · case-page way home ·
   streak retired
   ================================================================ */

/* ---- Streak: retired ---- */
.foundation-v14-streak { display: none !important; }

/* ---- Sub-pages without a promo strip: header sits flush at top ---- */
body:not(.has-promo-strip) .site-header { top: 0 !important; }

/* ---- Case pages: breadcrumb back to work ---- */
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(247, 245, 240, 0.75);
  margin-bottom: 22px;
  transition: color 0.25s ease;
}
.cs-back:hover { color: var(--color-signal-orange); }
.cs-section .cs-back, .jp-shell .cs-back { color: var(--color-muted); }
.jp-shell .cs-back:hover { color: var(--color-signal-orange); }

/* ---- Closing shader canvas ---- */
.closing-v14-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.closing-v14-shader.is-live { opacity: 1; }

/* ---- Journal preview on home ---- */
.journal-v16-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(36px, 4vw, 56px);
}
.journal-v16-more { margin-top: clamp(28px, 3vw, 40px); text-align: right; }
.journal-v16-more a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line-strong);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.journal-v16-more a:hover { color: var(--color-signal-orange); border-color: var(--color-signal-orange); }
@media (max-width: 900px) { .journal-v16-grid { grid-template-columns: 1fr; } }

/* ---- Journal post article ---- */
.jp-article {
  background: var(--color-paper);
  padding: clamp(140px, 16vw, 200px) clamp(24px, 6vw, 96px) clamp(64px, 8vw, 120px);
}
.jp-shell { max-width: 760px; margin: 0 auto; }
.jp-shell .journal-pill { margin-bottom: 18px; }
.jp-title {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--color-ink);
  margin: 14px 0 18px;
}
.jp-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 36px;
}
.jp-hero {
  margin: 0 0 40px;
  border-radius: 20px;
  overflow: hidden;
}
.jp-hero img { width: 100%; height: auto; display: block; }
.jp-body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-ink);
}
.jp-body p { margin: 0 0 1.4em; }
.jp-body h2, .jp-body h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 1.8em 0 0.6em;
}
.jp-body h2 { font-size: 28px; }
.jp-body h3 { font-size: 22px; }
.jp-body blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 3px solid var(--color-signal-orange);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--color-ink);
}
.jp-body a { color: var(--color-signal-orange); }

/* ================================================================
   v17 — CRAFT PASS: whitespace + rhythm, scan FAB, anchor offsets
   ================================================================ */

/* ---- Rhythm: more air between and inside sections ---- */
.v8-section { padding: clamp(96px, 12vw, 184px) 0; }
.v8-head { margin-bottom: clamp(56px, 7vw, 112px); gap: clamp(40px, 6vw, 96px); }
.v8-sub { max-width: 46ch; line-height: 1.7; }
.v8-eyebrow { letter-spacing: 2.6px; margin-bottom: 22px; }

.bottleneck-v8-grid { gap: clamp(24px, 3vw, 40px); }
.bottleneck-card { padding: clamp(32px, 3.4vw, 48px); }
.foundation-v14-grid { gap: clamp(24px, 3vw, 40px); }
.services-v9-grid { gap: clamp(20px, 2.6vw, 36px); }
.how-v8-grid { gap: clamp(28px, 3.4vw, 48px); }
.impact-v14-grid { margin-top: clamp(48px, 6vw, 80px); }
.journal-v16-grid { gap: clamp(28px, 3.4vw, 48px); }
.journal-v16-grid .journal-card-v2 h3 { margin-top: 14px; line-height: 1.3; }
.journal-v16-grid .journal-pill { margin-top: 18px; }

.trust-v8-inner { padding-top: 34px; padding-bottom: 34px; }
.work-v7 { padding: clamp(96px, 12vw, 184px) clamp(24px, 6vw, 96px); }
.work-v7-head { margin-bottom: clamp(48px, 6vw, 88px); }
.work-v7-grid { gap: clamp(24px, 3vw, 44px); }
.scan-v7 { padding: clamp(96px, 12vw, 176px) clamp(24px, 6vw, 96px); }
.scan-v7-head { margin-bottom: clamp(48px, 6vw, 88px); }
.scan-v7-grid { gap: clamp(24px, 3vw, 44px); }

/* Anchored sections land clear of the fixed header */
#scan, #work, #journal, #foundation, #ai-focus, #how { scroll-margin-top: 110px; }

/* ---- Scan FAB — persistent lead-gen pill ---- */
.scan-fab {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(11, 13, 16, 0.28);
  border: 1px solid rgba(247, 245, 240, 0.12);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.25s ease;
}
.scan-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scan-fab:hover { background: var(--color-signal-orange); border-color: transparent; }
.scan-fab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-signal-orange);
  box-shadow: 0 0 10px rgba(255, 106, 61, 0.7);
  transition: background-color 0.25s ease;
}
.scan-fab:hover .scan-fab-dot { background: var(--color-paper); }
@media (max-width: 640px) {
  .scan-fab { padding: 12px 18px; font-size: 11.5px; }
}

/* ================================================================
   v18 — HUMAN BAND: the augmentation thesis. Serif display type,
   arch-cropped portrait, maximum restraint.
   ================================================================ */
.human-v18 {
  background: var(--color-warm-white);
  padding: clamp(96px, 12vw, 184px) clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.human-v18-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(48px, 7vw, 128px);
  align-items: center;
}
.human-v18-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(46px, 6.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 26px 0 28px;
}
.human-v18-body {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.75;
  color: rgba(11, 13, 16, 0.72);
  max-width: 46ch;
  margin: 0;
}
.human-v18-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--color-signal-orange);
  margin: 40px 0 0;
}
.human-v18-media {
  position: relative;
  justify-self: end;
  width: min(100%, 400px);
}
.human-v18-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 3.9;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  filter: grayscale(1) contrast(1.06);
}
.human-v18-arch {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-signal-orange);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
}
#philosophy { scroll-margin-top: 110px; }
@media (max-width: 900px) {
  .human-v18-inner { grid-template-columns: 1fr; gap: 56px; }
  .human-v18-media { justify-self: center; width: min(78vw, 340px); }
}

/* ================================================================
   v19 — TERRACOTTA REGISTER (Jane Willis reference):
   orange as a typographic color, one solid-orange panel,
   cream/orange/ink inversions.
   ================================================================ */
:root {
  /* Deeper terracotta for orange-as-text on cream (AA at body sizes) */
  --color-terracotta: #C7431B;
}

/* ---- SCAN → the solid orange panel. Lead-gen, unmissable. ---- */
.scan-v7 {
  background: var(--color-signal-orange) !important;
  color: var(--color-ink) !important;
}
.scan-v7-eyebrow { color: var(--color-paper) !important; }
.scan-v7-eyebrow .dot { background: var(--color-paper) !important; box-shadow: none !important; }
.scan-v7-title { color: var(--color-paper) !important; }
.scan-v7-title em {
  color: var(--color-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--color-ink) !important;
}
.scan-v7-sub { color: rgba(11, 13, 16, 0.8) !important; }
.scan-v7-card {
  background: var(--color-paper) !important;
  border-color: rgba(11, 13, 16, 0.12) !important;
}
.scan-v7-card-glow { display: none !important; }
.scan-v7-card-num { color: var(--color-terracotta) !important; }
.scan-v7-card-title { color: var(--color-ink) !important; }
.scan-v7-card-desc { color: rgba(11, 13, 16, 0.68) !important; }
.scan-v7-card-meta { color: var(--color-terracotta) !important; }
.scan-v7-card:hover { transform: translateY(-4px); }

/* ---- JOURNAL header → terracotta display (the "Welcome." move) ---- */
.journal-v16 .v8-eyebrow { color: var(--color-terracotta); }
.journal-v16 .v8-eyebrow .dot { background: var(--color-terracotta); box-shadow: none; }
.journal-v16 .v8-h2,
.journal-v16 .v8-h2 em { color: var(--color-terracotta); }

/* ---- HUMAN band → terracotta body paragraph (the "Day one." move) ---- */
.human-v18-body { color: var(--color-terracotta); }
.human-v18-kicker { color: var(--color-ink); }

/* ================================================================
   v20 — HUMAN GRID: one face becomes many on scroll
   ================================================================ */
.human-v18-media { width: min(100%, 460px); }
.human-v18-arch { display: none; }
.human-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.human-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 120px 120px 14px 14px;
  background: var(--color-soft-stone);
}
.human-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.human-tile .human-flash { opacity: 0; }
.human-tile.is-center { z-index: 2; }
@media (max-width: 900px) {
  .human-v18-media { width: min(88vw, 400px); }
}

/* ================================================================
   v21 — MOBILE PASS: hamburger nav, header/hero geometry, pill,
   promo strip discipline, spacing sweep
   ================================================================ */

/* ---- Burger (hidden on desktop) ---- */
.nav-burger {
  display: none;
  appearance: none;
  border: 0;
  background: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  z-index: 450;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 880px) {
  /* Promo strip: one disciplined line so --promo-h math holds */
  .promo-strip {
    font-size: 10px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Header: fixed slim bar — logo left, burger right */
  .site-header, .site-header-v4 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 72px !important;
    height: 72px;
    padding: 0 20px !important;
    grid-template-columns: none !important;
  }
  .brand-mark { width: auto; }
  .brand-mark img { height: 34px !important; width: auto; }
  .nav-burger { display: flex; }
  .site-header .nav-cta { display: none !important; }

  /* Menu overlay: the existing nav-links become a full-screen ink sheet */
  body.nav-open .site-header .nav-links,
  body.nav-open .site-header-v4 .nav-links {
    display: flex !important;
    position: fixed;
    top: calc(var(--promo-h, 0px) + 72px);
    left: 0; right: 0; bottom: 0;
    background: #0A0A0A;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 40px 28px 120px;
    gap: 0;
    z-index: 400;
    overflow-y: auto;
  }
  body.nav-open .nav-links a {
    width: 100%;
    text-align: left;
    color: var(--color-paper);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid rgba(247, 245, 240, 0.08);
  }
  body.nav-open .nav-links a:hover,
  body.nav-open .nav-links a[aria-current="page"] { color: var(--color-signal-orange); }
  /* CTA rides the foot of the open menu */
  body.nav-open .site-header .nav-cta {
    display: inline-flex !important;
    position: fixed;
    left: 28px; right: 28px; bottom: 28px;
    z-index: 401;
    justify-content: center;
  }
  /* Burger lines go paper when the ink sheet is open */
  body.nav-open .nav-burger span { background: var(--color-paper); }

  /* Hero: clear the fixed chrome, tame the pill */
  .hero-v8 { padding-top: calc(var(--promo-h, 36px) + 72px + 56px) !important; }
  .hero-v8-pill {
    font-size: 9.5px !important;
    letter-spacing: 1.4px !important;
    padding: 8px 14px !important;
    white-space: normal;
    text-align: center;
    line-height: 1.6;
    max-width: 100%;
  }
  .hero-v8-title { font-size: clamp(34px, 10vw, 52px) !important; }

  /* Spacing: slightly tighter rhythm on small screens */
  .v8-section { padding: 72px 0; }
  .v8-head { margin-bottom: 44px; }
  .work-v7, .scan-v7 { padding-top: 72px; padding-bottom: 72px; }
  .human-v18 { padding-top: 80px; padding-bottom: 80px; }
  .closing-v14 { padding-top: 88px; padding-bottom: 88px; }

  /* FAB respects home-indicator safe area */
  .scan-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ================================================================
   v22 — RETRO-EDITORIAL LAYER: orbital schematic, halftone print
   texture (space-age poster reference)
   ================================================================ */

/* ---- Foundation: slow-turning orbital schematic, upper right ---- */
.foundation-v14-orbits {
  position: absolute;
  top: -60px;
  right: -70px;
  width: min(46vw, 520px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.orbits-spin {
  transform-origin: 200px 200px;
  animation: gfwOrbitSpin 140s linear infinite;
}
.orbits-spin-reverse {
  transform-origin: 200px 200px;
  animation: gfwOrbitSpin 60s linear infinite reverse;
}
@keyframes gfwOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .orbits-spin, .orbits-spin-reverse { animation: none; }
}
@media (max-width: 900px) {
  .foundation-v14-orbits { width: 70vw; top: auto; bottom: -18%; right: -28%; opacity: 0.45; }
}

/* ---- Scan panel: halftone dots fading in from the corner ---- */
.scan-v7::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 13, 16, 0.18) 1.2px, transparent 1.4px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 88% 6%, black 0%, transparent 60%);
  mask-image: radial-gradient(ellipse 70% 80% at 88% 6%, black 0%, transparent 60%);
}

/* v23 — mobile nav hardening */
@media (max-width: 880px) {
  /* The open menu must outrank every floating element (scan FAB is 900) */
  body.nav-open .site-header .nav-links,
  body.nav-open .site-header-v4 .nav-links { z-index: 960; }
  body.nav-open .site-header .nav-cta { z-index: 961; }
  body.nav-open .nav-burger { z-index: 970; position: relative; }
  /* Floating scan pill steps aside while the menu is open */
  body.nav-open .scan-fab { opacity: 0 !important; pointer-events: none !important; }
}

/* ================================================================
   v26 — ENTERPRISE AI: /enterprise page + home band + nav item.
   Cream/ink/orange system, terracotta text register, medallion
   schematic joins the retro disc language. Append-only block.
   ================================================================ */

/* ---- Hero (dark anchor) ---- */
.ent-hero {
  position: relative;
  background: var(--color-ink);
  padding: clamp(160px, 20vh, 230px) 0 clamp(72px, 9vh, 110px);
}
.ent-hero-shell {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.ent-hero-eyebrow { color: var(--color-signal-orange) !important; }
.ent-hero-title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-paper);
  margin: 18px 0 24px;
  max-width: 16ch;
}
.ent-hero-title em {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-signal-orange);
}
.ent-hero-dek {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.74);
  max-width: 56ch;
  margin-bottom: 34px;
}
.ent-hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- Medallion schematic ---- */
.ent-medallion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 30px 28px;
  border: 1px solid rgba(247, 245, 240, 0.12);
  border-radius: 18px;
  background: rgba(247, 245, 240, 0.025);
}
.ent-medallion-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-ink);
  background: var(--color-signal-orange);
  border-radius: 999px;
  padding: 8px 14px;
}
.ent-medallion-arrow {
  width: 1px;
  height: 18px;
  margin-left: 44px;
  background: repeating-linear-gradient(180deg, rgba(247,245,240,0.5) 0 3px, transparent 3px 7px);
}
.ent-layer { display: flex; align-items: center; gap: 14px; width: 100%; }
.ent-layer-bar { height: 30px; border-radius: 999px; flex-shrink: 0; }
.ent-layer.is-gold .ent-layer-bar   { width: 26%; background: linear-gradient(180deg, #E8B44A, #C08F2C); }
.ent-layer.is-silver .ent-layer-bar { width: 40%; background: linear-gradient(180deg, #AEB6BB, #848D93); }
.ent-layer.is-bronze .ent-layer-bar { width: 54%; background: linear-gradient(180deg, #B0703F, #82502B); }
.ent-layer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(247, 245, 240, 0.6);
  line-height: 1.5;
}
.ent-medallion-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: rgba(247, 245, 240, 0.4);
  margin-top: 8px;
}

/* ---- Shared section bits ---- */
.ent-h2 { max-width: 24ch; }
.ent-h2 em {
  font-family: var(--font-serif, "Cormorant Garamond", serif) !important;
  font-style: italic;
  color: var(--color-signal-orange) !important;
}
.ent-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.ent-prose p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-mid, #2a2e34);
  margin-bottom: 20px;
}
.ent-prose p:last-child { margin-bottom: 0; }
.ent-prose strong { color: var(--color-terracotta, #C7431B); font-weight: 600; }

/* ---- Who this is for ---- */
.ent-who { background: var(--color-warm-white); }
.ent-who-list { list-style: none; margin: 0; padding: 0; }
.ent-who-list li {
  position: relative;
  padding: 22px 0 22px 44px;
  border-top: 1px solid var(--color-line);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-mid, #2a2e34);
  max-width: 66ch;
}
.ent-who-list li:last-child { border-bottom: 1px solid var(--color-line); }
.ent-who-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 30px;
  width: 18px;
  height: 2px;
  background: var(--color-signal-orange);
}

/* ---- What we do ---- */
.ent-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ent-svc-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ent-svc-num { font-family: var(--font-mono); font-size: 13px; color: var(--color-terracotta, #C7431B); }
.ent-svc-card h3 {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-ink);
}
.ent-svc-lead { font-size: 15px; line-height: 1.6; color: var(--color-muted); }
.ent-svc-looks {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mid, #2a2e34);
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
  margin-top: auto;
}
.ent-svc-looks span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-terracotta, #C7431B);
  margin-bottom: 8px;
}

/* ---- Process (5 steps) ---- */
.ent-process { background: var(--color-warm-white); }
.ent-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2vw, 30px);
  margin-top: 34px;
}
.ent-step-num { font-family: var(--font-mono); font-size: 13px; color: var(--color-signal-orange); display: block; margin-bottom: 12px; }
.ent-step h3 {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.ent-step p { font-size: 13.5px; line-height: 1.6; color: var(--color-muted); }
.ent-process-kicker {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 22px;
  color: var(--color-terracotta, #C7431B);
  text-align: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* ---- Engage ---- */
.ent-engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ent-engage-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: clamp(26px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ent-engage-card.is-featured { border-color: rgba(255, 106, 61, 0.45); }
.ent-engage-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--color-terracotta, #C7431B); }
.ent-engage-card h3 {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--color-ink);
}
.ent-engage-card > p { font-size: 14.5px; line-height: 1.6; color: var(--color-muted); }
.ent-engage-best {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  line-height: 1.6;
  color: var(--ink-mid, #2a2e34);
  border-top: 1px solid var(--color-line);
  padding-top: 14px;
  margin-top: auto;
}
.ent-engage-foot {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 68ch;
  margin-top: 30px;
}

/* ---- Why GFW ---- */
.ent-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px); }
.ent-why-item h3 {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.ent-why-item p { font-size: 15px; line-height: 1.65; color: var(--color-muted); max-width: 54ch; }

/* ---- Pattern we solve (dark anchor) ---- */
.ent-pattern {
  background: var(--color-ink);
  padding: clamp(96px, 12vw, 170px) 0;
}
.ent-pattern-head { margin-bottom: clamp(36px, 4vw, 56px); }
.ent-pattern-eyebrow { color: var(--color-signal-orange) !important; }
.ent-pattern-title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-paper);
  margin-top: 18px;
  max-width: 26ch;
}
.ent-pattern-title em {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-signal-orange);
}
.ent-pattern-body {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.ent-pattern-prose p {
  font-size: 16px;
  line-height: 1.68;
  color: rgba(247, 245, 240, 0.74);
  margin-bottom: 18px;
  max-width: 62ch;
}
.ent-pattern-facts { display: flex; flex-direction: column; gap: 10px; }
.ent-pattern-facts span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: rgba(247, 245, 240, 0.7);
  border: 1px solid rgba(247, 245, 240, 0.16);
  border-radius: 999px;
  padding: 10px 16px;
  width: fit-content;
}
.ent-pattern-kicker {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: rgba(247, 245, 240, 0.88);
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 46ch;
}

/* ---- CTA ---- */
.ent-cta {
  background: var(--color-ink);
  background-image: radial-gradient(ellipse 620px 420px at 50% 115%, rgba(255, 106, 61, 0.28) 0%, rgba(11, 13, 16, 0) 70%);
  border-top: 1px solid rgba(247, 245, 240, 0.08);
  padding: clamp(96px, 13vw, 180px) 24px;
}
.ent-cta-inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ent-cta-title {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-paper);
}
.ent-cta-title em {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-signal-orange);
}
.ent-cta-sub { font-size: 19px; color: rgba(247, 245, 240, 0.85); }
.ent-cta-body { font-size: 15.5px; line-height: 1.65; color: rgba(247, 245, 240, 0.64); max-width: 56ch; }
.ent-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ---- Home band ---- */
.ent-band { padding-top: 0 !important; }
.ent-band-card {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  background: var(--color-ink);
  border-radius: 24px;
  padding: clamp(36px, 4.5vw, 64px);
}
.ent-band-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.6px;
  color: var(--color-signal-orange);
}
.ent-band-tag .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-signal-orange); }
.ent-band-card h2 {
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-paper);
  margin: 16px 0 14px;
  max-width: 20ch;
}
.ent-band-card h2 em {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-signal-orange);
}
.ent-band-card > .ent-band-copy > p {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(247, 245, 240, 0.72);
  max-width: 54ch;
  margin-bottom: 24px;
}
.ent-band-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--color-signal-orange);
  color: var(--color-ink);
  font-family: var(--font-display, "Inter Tight", sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.ent-band-cta:hover { transform: translateY(-2px); }
.ent-band-card .ent-medallion { background: rgba(247, 245, 240, 0.03); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .ent-svc-grid { grid-template-columns: 1fr; }
  .ent-process-grid { grid-template-columns: repeat(2, 1fr); }
  .ent-engage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .ent-hero-shell { grid-template-columns: 1fr; }
  .ent-medallion { width: min(420px, 100%); }
  .ent-split { grid-template-columns: 1fr; }
  .ent-pattern-body { grid-template-columns: 1fr; }
  .ent-why-grid { grid-template-columns: 1fr; }
  .ent-band-card { grid-template-columns: 1fr; }
  .ent-band-card .ent-medallion { width: 100%; }
}
@media (max-width: 640px) {
  .ent-process-grid { grid-template-columns: 1fr; }
  .ent-layer-label { font-size: 9px; letter-spacing: 1.2px; }
  .ent-who-list li { padding-left: 34px; }
}

/* ================================================================
   v27 — ENTERPRISE POLISH: who-grid single-column head with the
   dek wrapped under the headline, sticky data-flow canvas in the
   freed right column, scroll-animation support. Append-only.
   ================================================================ */
.ent-who-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}
.ent-who-head { display: block; }
.ent-who-title { max-width: 22ch; }
.ent-who-sub {
  font-size: 17px;
  line-height: 1.62;
  color: var(--color-muted);
  max-width: 52ch;
  margin: 20px 0 clamp(30px, 3.4vw, 48px);
}
.ent-flow {
  position: sticky;
  top: 130px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 22px 22px 18px;
}
.ent-flow-canvas {
  display: block;
  width: 100%;
  height: 430px;
  border-radius: 10px;
}
.ent-flow figcaption {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.8px;
  color: var(--color-muted);
  text-align: center;
}
@media (max-width: 880px) {
  .ent-who-grid { grid-template-columns: 1fr; }
  .ent-flow { position: static; }
  .ent-flow-canvas { height: 320px; }
}

/* ================================================================
   v28 — ENTERPRISE PATTERN CHIPS: line icons + per-chip accent
   (--chip / --chip-soft set inline), lit progressively on scroll
   via .is-lit from motion.js. Append-only block.
   ================================================================ */
.ent-pattern-facts span {
  display: flex;
  align-items: center;
  gap: 11px;
  transition: border-color 0.5s ease, color 0.5s ease;
}
.ent-pattern-facts span svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(247, 245, 240, 0.35);
  transition: color 0.5s ease;
}
.ent-pattern-facts span.is-lit {
  border-color: var(--chip-soft, rgba(255, 106, 61, 0.5));
  color: rgba(247, 245, 240, 0.92);
}
.ent-pattern-facts span.is-lit svg { color: var(--chip, var(--color-signal-orange)); }

/* ================================================================
   v29 — FEEDBACK PASS: (1) ladder cards never clip their copy on
   small screens (JS-driven --card-h can no longer pin the height);
   (2) the terracotta orange-as-text register is retired — Bryan
   wants that rust color black. Token now resolves to ink, and the
   journal/human display moves go ink explicitly. Append-only.
   ================================================================ */
@media (max-width: 960px) {
  .ladder-v3-step,
  .ladder-v3-step[data-rung] {
    height: auto !important;
    min-height: 210px !important;
  }
  .ladder-v3-step-desc { display: block !important; }
}

:root { --color-terracotta: var(--color-ink); }
.journal-v16 .v8-eyebrow { color: var(--color-muted); }
.journal-v16 .v8-eyebrow .dot { background: var(--color-signal-orange); }
.journal-v16 .v8-h2,
.journal-v16 .v8-h2 em { color: var(--color-ink) !important; }
.human-v18-body { color: var(--ink-mid, #2a2e34); }
.scan-v7-card-num { color: var(--color-ink) !important; }
.scan-v7-card-meta { color: var(--color-ink) !important; }

/* ================================================================
   v30 — HEADLINE EM WRAPPING: the serif em phrase in any heading
   wraps as one unit — it either fits on the current line or drops
   to the next line whole. Kills the orphaned-first-word pattern
   ("…data ready / for AI?", "…moves. You / own the result.")
   everywhere, including future headlines. Must load before the
   SplitText pass so line masks capture the same geometry.
   ================================================================ */
h1 em,
h2 em,
h3 em,
.editorial-title em,
.ent-band-card h2 em {
  display: inline-block;
}

/* ================================================================
   v31 — LADDER PIN FIT: the 100vh pin flex-centers its content
   with overflow hidden, so on shorter viewports the eyebrow pill
   was decapitated at the section top. Two fixes: overflow-safe
   centering (content tops out instead of clipping both ends), and
   a short-viewport compression pass so the whole ladder actually
   fits inside the pin. Append-only.
   ================================================================ */
.ladder-v3-pin { align-items: safe center; }

@media (min-width: 961px) and (max-height: 919px) {
  .ladder-v3-pinned .ladder-v3-pin {
    padding-top: clamp(56px, 7vh, 80px) !important;
    padding-bottom: 36px;
  }
  .ladder-v3-inner { gap: clamp(22px, 3.4vh, 44px); }
  .ladder-v3-title { font-size: clamp(30px, 4.8vh, 46px) !important; }
  .ladder-v3-dek { font-size: 14px; }
  .ladder-v3-foot { display: none !important; }
  .ladder-v3-pinned .ladder-v3-step[data-rung="1"] { --card-target-h: clamp(150px, 22vh, 220px); }
  .ladder-v3-pinned .ladder-v3-step[data-rung="2"] { --card-target-h: clamp(185px, 27vh, 280px); }
  .ladder-v3-pinned .ladder-v3-step[data-rung="3"] { --card-target-h: clamp(220px, 32vh, 340px); }
  .ladder-v3-pinned .ladder-v3-step[data-rung="4"] { --card-target-h: clamp(255px, 37vh, 400px); }
  .ladder-v3-pinned .ladder-v3-step[data-rung="5"] { --card-target-h: clamp(290px, 42vh, 460px); }
}

/* ================================================================
   v32 — LADDER CARDS NEVER CLIP, DESKTOP EDITION: the staircase
   heights become minimums. A rung keeps its stepped height for the
   composition and the scroll-growth animation, but if its copy is
   taller than the step, the card grows to fit instead of cutting
   the description off mid-line. Applies to home + /ai ladders.
   ================================================================ */
@media (min-width: 961px) {
  .ladder-v3-step,
  .ladder-v3-step[data-rung] {
    height: auto !important;
    min-height: var(--card-h, var(--card-target-h, 340px)) !important;
    transition: min-height 0.2s linear, transform 0.4s var(--ease-out-quart),
                box-shadow 0.4s ease, border-color 0.3s ease !important;
  }
}

/* ================================================================
   v33 — MOBILE NAV OVERLAY, SETTLED: the open menu inherited a mix
   of desktop nav rules (edge-flush links, tiny padding, stretched
   gaps). This block is the single source of truth for the open
   state at ≤880px: ink sheet, big paper links in tidy hairline
   rows, CTA pinned below. Append-only, wins by cascade.
   ================================================================ */
@media (max-width: 880px) {
  body.nav-open .nav-links {
    background: var(--color-ink) !important;
    padding: 18px 28px 120px !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto;
  }
  body.nav-open .nav-links a {
    width: 100%;
    font-size: 27px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    color: var(--color-paper) !important;
    padding: 21px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(247, 245, 240, 0.12) !important;
    text-align: left !important;
  }
  body.nav-open .nav-links a:last-child { border-bottom: 0 !important; }
  body.nav-open .nav-links a[aria-current="page"],
  body.nav-open .nav-links a.nav-scan-link {
    color: var(--color-signal-orange) !important;
  }
}

/* ================================================================
   v34 — BURGER VISIBILITY: the hamburger bars were always ink, so
   they vanished over the dark hero tops (home, /ai, /capabilities,
   /enterprise) — the mobile nav looked missing before first scroll.
   Dark-top pages carry body.is-dark-top; bars go paper there until
   the header picks up its scrolled paper background. Append-only.
   ================================================================ */
body.is-dark-top .site-header:not(.is-scrolled) .nav-burger span {
  background: var(--color-paper);
}
body.nav-open .nav-burger span { background: var(--color-paper) !important; }

/* ================================================================
   v35 — HEADER LOGO +18%: pennant steps up from 38px to 45px on
   desktop, 34px to 40px in the mobile header. Append-only.
   ================================================================ */
.site-header .brand-mark img,
.site-header-v4 .brand-mark img {
  height: 45px !important;
}
@media (max-width: 880px) {
  .brand-mark img { height: 40px !important; }
}