/* ==========================================================================
   Soulware — Hybrid Variant
   Mobile-first CSS. Base styles = 375px (iPhone SE).
   Enhancements at min-width: 640 / 768 / 1024 / 1280.
   ========================================================================== */

/* ==========================================================================
   0. SELF-HOSTED FONTS — cuts the 3rd-party round-trip to fonts.googleapis.com
   and fonts.gstatic.com (was the biggest FCP drag on mobile).
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-roman.var.woff2') format('woff2-variations'),
       url('/assets/fonts/Inter-roman.var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-italic.var.woff2') format('woff2-variations'),
       url('/assets/fonts/Inter-italic.var.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/DMMono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/DMMono-500-latin.woff2') format('woff2');
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --canvas: #FBFAF7;
  --canvas-alt: #F2F1EE;
  --ink: #111118;
  --ink-2: #4A4A52;
  --ink-3: #717178;
  --rule: #DEDCD6;
  --accent: #3D3DFF;
  --accent-ink: #2D2DCC;
  --accent-wash: rgba(61, 61, 255, 0.06);
  --dark-band-ink: #F2F1EE;

  --r-sm: 4px;
  --r-md: 8px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'DM Mono', ui-monospace, "SF Mono", Menlo, monospace;
  /* No serif is loaded — Newsreader was never shipped, so quotes fell back
     to Georgia. Brand rule is Inter everywhere; serif slots resolve to it. */
  --font-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ==========================================================================
   3. UTILITY
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

@media (min-width: 1024px) {
  .container { padding-left: 48px; padding-right: 48px; }
}

.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.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;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ==========================================================================
   4. TYPOGRAPHY — mobile base sizes
   ========================================================================== */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
}

.body-lg {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}

.small {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

@media (min-width: 768px) {
  h1, .h1 { font-size: 56px; line-height: 1.02; letter-spacing: -0.025em; }
  h2, .h2 { font-size: 40px; line-height: 1.08; }
}

@media (min-width: 1024px) {
  h1, .h1 { font-size: 88px; line-height: 0.98; letter-spacing: -0.025em; }
  h2, .h2 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; }
  h3, .h3 { font-size: 28px; line-height: 1.2; }
  .body-lg { font-size: 20px; line-height: 1.55; }
}

/* --- Two-color text accents --- */
h1 em, h2 em, .h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}

.accent-inline {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   5. BUTTONS — mobile base: full-width stacked
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
  white-space: nowrap;
  width: 100%;
}

@media (min-width: 640px) {
  .btn { width: auto; }
}

.btn--lg {
  font-size: 16px;
  padding: 16px 32px;
  min-height: 52px;
}

.btn--primary {
  /* Sanctioned blues only, one quiet shadow: the flat-editorial system
     reads as designed, not as a glossy AI-template button. */
  background: linear-gradient(180deg, #5B5BFF 0%, #3D3DFF 60%, #2D2DCC 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(30, 30, 120, 0.22);
  transition: background 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: linear-gradient(180deg, #3D3DFF 0%, #2D2DCC 100%);
  box-shadow: 0 3px 10px rgba(30, 30, 120, 0.3);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(30, 30, 120, 0.25);
  transition-duration: 80ms;
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  border-color: var(--ink-3);
  transform: scale(1.02);
}

.btn--dark-secondary {
  background: transparent;
  color: var(--dark-band-ink);
  border: 1px solid rgba(242, 241, 238, 0.3);
}
.btn--dark-secondary:hover, .btn--dark-secondary:focus-visible {
  border-color: rgba(242, 241, 238, 0.6);
  transform: scale(1.02);
}

.text-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--accent);
  transition: color 150ms ease;
}
.text-link:hover { color: var(--accent-ink); }
.text-link .arrow { transition: transform 150ms ease; display: inline-block; }
.text-link:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   6. NAV — 64px, logo + mobile CTA + hamburger at base
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 80px;
  background: transparent;
  display: flex;
  align-items: center;
  transition: background 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}

.nav--scrolled {
  background: rgba(251, 250, 247, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 12px;
}

@media (min-width: 768px) {
  .nav__inner { padding: 0 32px; }
}

@media (min-width: 1024px) {
  .nav__inner { padding: 0 48px; }
}

.nav__logo img {
  height: 53px;
  width: auto;
  /* No more color filter — the logo asset itself is now rendered at the
     exact brand accent (#3D3DFF). The previous hue-rotate(241deg) chain
     landed on a slightly different color on Chrome Android's color
     engine, which made the mark read as purple on OnePlus. */
}

/* Nav text links: hidden at base, show at 768px */
.nav__links {
  display: none;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .nav__links { display: flex; }
}

.nav__links a {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  transition: color 150ms ease;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--accent);
  transition: left 200ms ease, right 200ms ease;
}
.nav__links a:hover::after {
  left: 0;
  right: 0;
}
.nav__links a:hover { color: var(--ink); }

/* Nav CTA: visible at every width. Compact on mobile (smaller padding/font
   so it sits comfortably next to the hamburger), grows at 768px. Michiel
   asked to keep this always reachable while scrolling.
   margin-left: auto pushes it to the right edge of the flex row so on
   mobile the layout reads "logo [empty] CTA · hamburger" — when the desktop
   nav links appear at 768px those take the middle space instead. */
.nav__cta {
  display: inline-flex;
  font-size: 11px;
  padding: 8px 14px;
  min-height: auto;
  width: auto;
  letter-spacing: 0.06em;
  margin-left: auto;
}

@media (min-width: 768px) {
  .nav__cta {
    font-size: 12px;
    padding: 10px 20px;
    margin-left: 0;
  }
}

/* Hamburger: visible at base, hidden at 768px */
.nav__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -8px -10px -8px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .nav__hamburger { display: none; }
}

.nav__hamburger svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
}

/* --- Mobile menu overlay --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mobile-menu--open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
}
.mobile-menu__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.mobile-menu a {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mobile-menu .btn {
  margin-top: 16px;
  width: auto;
}
.mobile-menu a.btn--primary {
  color: #fff;
}

/* ==========================================================================
   7. HERO — mountain illustration with cream negative space for text
   ========================================================================== */
.hero {
  position: relative;
  /* Shave a bit off full viewport so the proof strip below (which overlaps
     the hero's bottom) lands with its logos above the fold. */
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
  padding-top: 108px;
  padding-bottom: 60px;
  overflow: hidden;
  background: var(--canvas);
}

/* Cream overlay on the left — hides the image's hard left edge by covering
   it with solid site-cream, then fading to transparent so the mountain is
   untouched. Text (z-index: 2) sits ABOVE this. */
.hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 32%;
  background: linear-gradient(
    to right,
    var(--canvas) 0%,
    var(--canvas) 55%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Cream overlay at the bottom — fades the mountain out before the trust
   bar, so the logos sit on a soft cream gradient rather than the hard edge
   of the image. */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(251, 250, 247, 0.6) 55%,
    var(--canvas) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Hero illustration — landscape on desktop, portrait swap on mobile.
   Image bleeds above the fixed nav at scroll=0 (the nav is transparent
   until the user scrolls). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* "contain" (not cover) shows the full image including its baked-in cream
     margin, so the mountain appears zoomed out. The left-edge blend is
     handled by .hero::before (cream gradient overlay) — no mask needed. */
  object-fit: contain;
  object-position: right center;
  /* Soft top feather so the image's hard top edge dissolves into cream
     instead of reading as a visible horizontal line behind the nav. On
     mobile the cream shield already covers this zone, so the mask is
     redundant there — harmless. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 100%);
  animation: hero-fade-in 900ms ease-out 100ms both;
  will-change: transform, opacity;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
}

/* Hero text */
.hero__text {
  position: relative;
  z-index: 2;
  color: var(--ink);
  max-width: 560px;
}
@media (min-width: 1024px) {
  .hero__text { max-width: 640px; }
}
@media (min-width: 1280px) {
  .hero__text { max-width: 700px; }
}

.hero__eyebrow {
  margin-bottom: 24px;
  color: var(--accent);
  font-weight: 700;
}

.hero__hook {
  margin-bottom: 24px;
  color: var(--ink);
}
/* Larger hook on desktop — matches the mockup's billboard-scale headline. */
@media (min-width: 1024px) {
  .hero__hook { font-size: 96px; line-height: 0.95; }
}
@media (min-width: 1280px) {
  .hero__hook { font-size: 104px; }
}
/* h1 em color (blue italic) comes from the global h1 em rule — --accent. */

.hero__proposition {
  margin-bottom: 32px;
  max-width: 520px;
  text-wrap: pretty;
  color: var(--ink);
  font-weight: 500;
}

/* Hero CTA — below the rotating subhead */
.hero__cta {
  margin-top: 8px;
}
/* Override mobile's full-width .btn rule so the mountain stays visible. */
.hero__cta-btn {
  width: auto;
  align-self: flex-start;
}

.hero .container { position: relative; z-index: 2; }

/* Hero text rotator */
.hero__rotator {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.5em;
}
.hero__rotator-word {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-style: italic;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
.hero__rotator-word--active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.hero__rotator-word--exit {
  opacity: 0;
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__rotator-word { transition: none; }
}

/* Phone + portrait tablet: full-bleed mountain as a layer behind the text.
   This is the composition Ivan approved on iPhone 14 Pro Max — mountain
   extends UP under the CTA and text block, cream shield at the top fades
   into transparency so the climbers peek through, bottom fades hard to
   cream before the trust bar.

   Pixel-based cream shield (520px solid → 660px transparent) means the
   text block is protected at EVERY viewport height. Doesn't re-scale with
   dvh, doesn't chase percentages. On tall phones, mountain gets 200+px of
   clear visibility below the fade; on short phones (S8+ 668) the climbers
   peek through the fade zone like a watermark instead of hard-cutting. */
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  .hero {
    display: block;
    position: relative;
    align-items: flex-start;
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    padding-top: 96px;
    padding-bottom: 0;
    overflow: hidden;
  }
  .hero > .container {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }
  .hero__text {
    max-width: 100%;
  }
  .hero__proposition {
    max-width: 100%;
  }
  /* On phones the persistent nav CTA ("Talk to us" top-right) covers this
     job — hiding the hero button lets the mountain and its climbers own
     the space below the headline without a giant button planted on top. */
  .hero__cta {
    display: none;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    /* Cream shield already covers the top — mask is redundant here and
       adds compositor work on the LCP image. */
    -webkit-mask-image: none;
            mask-image: none;
    animation: none;
  }
  .hero__media::after {
    display: none;
  }
  /* Top cream shield — percentage-based watermark so the peak + sun flare
     always peek through behind the text (the layered feel Ivan approved on
     14 Pro Max). With the hero CTA now hidden on mobile, the text block
     ends higher, so the shield can fade out sooner — mountain + climbers
     own the lower half of the hero instead of being drowned in cream. */
  .hero::before {
    width: 100%;
    background: linear-gradient(
      to bottom,
      var(--canvas) 0%,
      var(--canvas) 18%,
      rgba(251, 250, 247, 0.35) 32%,
      transparent 45%
    );
  }
  /* Bottom cream fade — fixed 180px so mountain has a consistent dissolve
     into the trust bar on every viewport. Percentage here ate too much of
     the short-phone hero (35% of 668 = 234px), leaving almost no clear
     mountain between the two fades. */
  .hero::after {
    height: 180px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(251, 250, 247, 0.55) 50%,
      var(--canvas) 100%
    );
  }
}

/* SHORT-VIEWPORT TUNE (anything under 900h — S8+ 740, iPhone 12 844, OnePlus).
   Same full-bleed layered feel as 14 Pro Max (mountain extends up behind
   text). With the hero CTA gone on mobile there's no button sitting on
   the climbers, so the shield no longer needs to protect a CTA zone —
   it just keeps the headline + paragraph legible. Fades out meaningfully
   earlier than before so the mid-mountain climbers Michiel asked for are
   visible instead of buried in cream. */
@media (max-width: 899px) and (max-height: 920px) {
  .hero {
    min-height: 720px;
  }
  .hero::before {
    background: linear-gradient(
      to bottom,
      var(--canvas) 0%,
      var(--canvas) 25%,
      rgba(251, 250, 247, 0.55) 42%,
      rgba(251, 250, 247, 0.2) 58%,
      transparent 72%
    );
  }
}

/* ==========================================================================
   8. SOCIAL PROOF — grayscale logos
   ========================================================================== */
.proof {
  background: transparent;
  padding: 16px 0 24px;
  margin-top: -56px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 3;
}

/* Trust bar sits HIGHER — pulled up 56px so the label overlaps the
   mountain's bottom cream fade for a seamless visual transition (what
   Ivan asked for: "trusted by higher, overlapping with the mountain fade
   out"). z-index 3 keeps the label on top of the fade gradient. */
@media (max-width: 899px) {
  .proof {
    margin-top: -56px;
    padding: 20px 0 24px;
    position: relative;
    z-index: 3;
  }
}

.proof__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .proof { padding: 24px 0 32px; }
}

.proof__headline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  /* Horizontal rules flanking the label — flex container with pseudo-elements. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
}
.proof__headline::before,
.proof__headline::after {
  content: '';
  flex: 1;
  max-width: 140px;
  height: 1px;
  background: var(--ink-3);
  opacity: 0.55;
}

/* Stacked layout now — no right margin needed at any breakpoint. */

/* Marquee — on mobile the track scrolls horizontally; on desktop the two
   groups sit side-by-side but we just center one and hide the clone via
   overflow, so it looks like the old centered row. */
.proof__marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Soft edge fade on mobile — logos ease in/out of the scroll window. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.proof__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
}

.proof__marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

/* Desktop/tablet: single centered row. We show only one group, clone is
   visually hidden (doesn't matter — mask + overflow crop). The track
   centers inside the section. */
@media (min-width: 768px) {
  .proof__marquee {
    display: flex;
    justify-content: center;
    /* No mask fade on desktop — logos sit statically inside the container. */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .proof__marquee-track {
    width: auto;
    animation: none !important;
  }
  .proof__marquee-group + .proof__marquee-group {
    display: none;
  }
  .proof__marquee-group {
    gap: clamp(56px, 8vw, 120px);
    flex-wrap: wrap;
    row-gap: 32px;
  }
}

/* Mobile: auto-scrolling marquee. Two groups share the track, translateX
   moves the track by exactly one group width (-50%) for a seamless loop. */
@media (max-width: 767px) {
  .proof__marquee-track {
    animation: proof-marquee 28s linear infinite;
  }
  .proof__marquee-group {
    /* Right padding creates the gap between the last logo of group A and
       the first logo of group B so the loop reads as continuous spacing. */
    padding-right: 44px;
  }
}

@keyframes proof-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Accessibility — honour reduced motion: halt the marquee and fall back
   to a static centered row (may clip overflow, which is fine). */
@media (prefers-reduced-motion: reduce) {
  .proof__marquee-track {
    animation: none !important;
  }
}

/* All logos — shared baseline alignment. Each brand gets a per-wordmark
   height tune so the VISIBLE mark (not the SVG bounding box) reads at a
   consistent weight across the row. Panama is all-caps and reads boldest,
   so it gets the least height. */
.proof__logo {
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 200ms ease, opacity 200ms ease;
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}
.proof__logo:hover {
  filter: grayscale(0);
  opacity: 1;
}
.proof__logo--unilever { height: 24px; }
.proof__logo--neuhaus  { height: 16px; }
.proof__logo--panama   { height: 20px; }
.proof__logo--weplus   { height: 17px; }
.proof__logo--utb      { height: 22px; }
.proof__logo--notary   { height: 28px; }
.proof__logo--resolve  { height: 22px; }

/* Resolve mark is white on transparent — invert it so it reads as a dark
   mark on the cream row, matching the other text-style logos. */
.proof__logo--invert {
  filter: grayscale(1) invert(1);
  opacity: 0.6;
}
.proof__logo--invert:hover {
  filter: grayscale(0) invert(1);
  opacity: 1;
}

@media (min-width: 768px) {
  .proof__logo           { height: 30px; }
  .proof__logo--unilever { height: 28px; }
  .proof__logo--neuhaus  { height: 19px; }
  .proof__logo--panama   { height: 24px; }
  .proof__logo--weplus   { height: 20px; }
  .proof__logo--utb      { height: 26px; }
  .proof__logo--notary   { height: 32px; }
  .proof__logo--resolve  { height: 26px; }
}

@media (min-width: 1024px) {
  .proof__logo           { height: 34px; }
  .proof__logo--unilever { height: 32px; }
  .proof__logo--neuhaus  { height: 22px; }
  .proof__logo--panama   { height: 28px; }
  .proof__logo--weplus   { height: 23px; }
  .proof__logo--utb      { height: 30px; }
  .proof__logo--notary   { height: 38px; }
  .proof__logo--resolve  { height: 30px; }
}

/* ==========================================================================
   9. SECTIONS — shared styles
   ========================================================================== */
.section__eyebrow {
  margin-bottom: 16px;
}
.section__headline {
  margin-bottom: 24px;
  text-wrap: balance;
}
.section__body {
  max-width: 720px;
}

/* ==========================================================================
   10. THE GAP — problem section
   ========================================================================== */
.gap {
  background: var(--canvas);
  position: relative;
}

/* Scroll-driven scrollytelling — 130vh track, inner sticks at top.
   (Was 150vh; the last 20vh scrubbed nothing and read as a stuck page.) */
.gap__scroll {
  position: relative;
  height: var(--gap-scroll-height, 130vh);
}

.gap__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  /* Vertically centered: top-aligning left the lower half of the pinned
     viewport as dead cream for 1.5 viewports of scroll. */
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gap__sticky > .container {
  width: 100%;
}

.gap__layout {
  display: grid;
  gap: 32px;
  align-items: center;
}

.gap__text .section__body {
  margin-top: 24px;
}

/* Gap animation stage (iframe, 5:3 aspect matches 1200x720 Claude Design stage) */
.gap__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}

.gap__animation-wrap {
  width: 100%;
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.gap__animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

@media (min-width: 1024px) {
  .gap__layout {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: center;
  }
}

/* Mobile: drop the sticky scrollytelling — on a narrow viewport the 180vh
   track + 100vh pin left ~200px of dead space below the chart, which
   broke the rhythm of the rest of the page (every other section uses
   ~72px padding top/bottom, normal flow). On mobile script.js draws the
   chart at its end state via render(1) as soon as it mounts — no scroll
   budget needed. */
@media (max-width: 767px) {
  .gap__scroll {
    height: auto;
  }
  .gap__sticky {
    position: static;
    height: auto;
    padding: 72px 0;
    overflow: hidden;
  }
  .gap__sticky > .container {
    height: auto;
    display: block;
  }
  .gap__layout {
    gap: 20px;
    width: 100%;
  }
  /* Full-bleed chart on mobile — break out of the container's 20px side
     padding so the line reads clearly at small widths. Aspect-ratio 5:3
     matches the viewBox the curve actually uses; 4:3 left a ~100px empty
     band below the labels because the SVG's lower third is unused. */
  .gap__animation-wrap {
    aspect-ratio: 5 / 3;
    margin: 8px -20px 0;
    width: calc(100% + 40px);
  }
  /* Bump SVG label legibility on mobile (viewBox 1200x720 scales down) */
  .gap__animation text {
    font-size: 30px;
  }
  /* End-labels are end-anchored inside the plot now; no shift needed. */
  #gapEndTop, #gapEndBot { display: none; }
}

/* Reduced motion: skip scrollytelling, section collapses back to normal flow */
@media (prefers-reduced-motion: reduce) {
  .gap__scroll {
    height: auto;
  }
  .gap__sticky {
    position: static;
    height: auto;
    padding: 72px 0;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .gap__sticky { padding: 160px 0; }
}

/* ==========================================================================
   11. APPROACH / SOUL CYCLE — scrollytelling with animated spiral
   ========================================================================== */
.approach {
  background: var(--canvas-alt);
  position: relative;
  z-index: 1;
}

/* Intro block — normal flow, above the sticky */
.approach__intro {
  padding: 72px 0 40px;
}

@media (min-width: 1024px) {
  .approach__intro { padding: 120px 0 48px; }
}

.approach__body {
  margin-top: 24px;
  max-width: 720px;
}

/* Qualifier line — sharpens the positioning by saying who this ISN'T for.
   Quiet mono label on the left, principled one-liner to the right. */
.approach__limit {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 720px;
}
.approach__limit em {
  font-style: italic;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .approach__limit { font-size: 16px; margin-top: 24px; }
}

/* Soul Cycle lead-in — now opens the section (venn intro parked), so it
   carries full section top padding and no divider rule. */
.soul-cycle__lead {
  padding: 56px 0 24px;
}

@media (min-width: 1024px) {
  .soul-cycle__lead { padding: 88px 0 24px; }
}

.soul-cycle__eyebrow {
  /* Matches every other section eyebrow (was the lone accent-colored one). */
  margin-bottom: 16px;
}

.soul-cycle__headline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 720px;
}

@media (min-width: 1024px) {
  .soul-cycle__headline { font-size: 36px; }
}

.soul-cycle__headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}

.soul-cycle__sub {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 620px;
}

/* ==========================================================================
   Soul Cycle — one-shot reveal (no scrollytelling)
   ========================================================================== */
.soul-cycle__reveal {
  padding: 8px 0 48px;
}
@media (min-width: 960px) {
  .soul-cycle__reveal { padding: 8px 0 64px; }
}

.soul-cycle__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .soul-cycle__inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* Spiral container */
.soul-cycle__spiral-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.soul-cycle__spiral-box {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .soul-cycle__spiral-box { max-width: 440px; }
}
.soul-cycle__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* (Corner blueprint ticks removed — at spiral size they read as
   rendering specks, not intent.) */

.soul-cycle__path {
  fill: none;
  stroke: url(#soulCycleGrad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Defensive: spiral path renders fully visible by default. The reveal
   animation only kicks in when JS confirms it ran (.js-ready on <html>).
   Means a broken script (iOS Safari quirk, ad-blocker, network error)
   never leaves the section blank — content renders, just without the
   draw-in animation. */
.js-ready .soul-cycle__reveal:not(.is-revealed) .soul-cycle__path {
  stroke-dasharray: var(--sc-len, 3000);
  stroke-dashoffset: var(--sc-len, 3000);
  transition: stroke-dashoffset 1400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.js-ready .soul-cycle__reveal.is-revealed .soul-cycle__path {
  stroke-dashoffset: 0;
}

/* 3 phase nodes on the spiral — same defensive pattern */
.soul-cycle__node {
  transform-box: fill-box;
  transform-origin: center;
}
.js-ready .soul-cycle__reveal:not(.is-revealed) .soul-cycle__node {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js-ready .soul-cycle__reveal.is-revealed .soul-cycle__node {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="0"] { transition-delay: 400ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="1"] { transition-delay: 750ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="2"] { transition-delay: 1100ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="3"] { transition-delay: 1500ms; }

.soul-cycle__node-circle {
  stroke: var(--canvas);
  stroke-width: 5;
}
/* Sequence encoded as opacity steps of the single brand accent. */
.soul-cycle__node[data-phase="scope"]   .soul-cycle__node-circle { fill: rgba(61, 61, 255, 0.55); }
.soul-cycle__node[data-phase="iterate"] .soul-cycle__node-circle { fill: rgba(61, 61, 255, 0.78); }
.soul-cycle__node[data-phase="adopt"]   .soul-cycle__node-circle { fill: var(--accent); }
/* LIVE — value-creation outcome marker. Open ring, so it reads as a
   destination rather than another phase. */
.soul-cycle__node[data-phase="live"] .soul-cycle__node-circle {
  fill: var(--canvas);
  stroke: var(--accent);
  stroke-width: 4;
}

.soul-cycle__node-num {
  fill: var(--canvas);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 0.02em;
}
.soul-cycle__node[data-phase="live"] .soul-cycle__node-num {
  fill: var(--accent);
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* Cards — all three visible after reveal, staggered fade in */
.soul-cycle__cards-wrap {
  display: flex;
  align-items: center;
}
.soul-cycle__cards-stack {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.soul-cycle__phase {
  display: grid;
  gap: 6px;
  padding: 16px 22px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-left: 3px solid currentColor;
  border-radius: var(--r-md);
}
/* Same defensive guard as the spiral path — only hide for the
   pre-reveal animation when JS confirms it'll run. */
.js-ready .soul-cycle__reveal:not(.is-revealed) .soul-cycle__phase {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .soul-cycle__reveal.is-revealed .soul-cycle__phase {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.soul-cycle__reveal.is-revealed .soul-cycle__phase[data-phase="scope"]   { transition-delay: 300ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__phase[data-phase="iterate"] { transition-delay: 700ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__phase[data-phase="adopt"]   { transition-delay: 1100ms; }

/* Card labels stay legible; the sequence encoding lives in the node
   fills and the label dots, not in washed-out text. */
.soul-cycle__phase[data-phase="scope"]   { color: rgba(61, 61, 255, 0.8); }
.soul-cycle__phase[data-phase="iterate"] { color: rgba(61, 61, 255, 0.9); }
.soul-cycle__phase[data-phase="adopt"]   { color: var(--accent); }

.soul-cycle__phase-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  display: flex;
  gap: 10px;
  align-items: center;
}
.soul-cycle__phase-label::before {
  content: '';
  width: 10px;
  height: 10px;
  background: currentColor;
  border-radius: 50%;
}

.soul-cycle__phase-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
@media (min-width: 960px) {
  .soul-cycle__phase-title { font-size: 26px; }
}
.soul-cycle__phase-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}

.soul-cycle__phase-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Light sub-bullets — reflecting the underlying 9 steps inside the 3-phase
   framework. Small, inline, separated by dots. */
.soul-cycle__phase-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  list-style: none;
}
.soul-cycle__phase-bullets li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: relative;
}
/* (Separator dots removed: the absolutely positioned dot orphaned onto
   the next line when the list wrapped on mobile; the gap is enough.) */

@media (prefers-reduced-motion: reduce) {
  .soul-cycle__path { stroke-dashoffset: 0 !important; transition: none; }
  .soul-cycle__node { opacity: 1; transform: scale(1); transition: none; }
  .soul-cycle__phase { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   12. CASES — stacked at base, side-by-side at 768px
   ========================================================================== */
.cases {
  background: var(--canvas);
  padding: 72px 0;
}

@media (min-width: 1024px) {
  .cases { padding: 120px 0; }
}

/* Section anchors land clear of the fixed nav */
#gap, #approach, #cases, #team, #cta {
  scroll-margin-top: 96px;
}

.cases__subhead {
  margin-top: 24px;
  font-size: 16px;
  color: var(--ink-2);
  max-width: 600px;
}

@media (min-width: 1024px) {
  .cases__subhead { font-size: 17px; }
}

.cases__list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 768px) {
  .cases__list { margin-top: 64px; }
}

.case {
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  transition: background 200ms ease;
}
.case:last-child {
  border-bottom: 1px solid var(--rule);
}
/* (Hover tint removed: cases aren't links, the tint implied they were.) */

/* Quiet next step after the proof: catches the convinced reader before
   four more viewports of scrolling. */
.cases__next {
  margin-top: 44px;
  font-size: 17px;
  color: var(--ink-2);
}
.cases__next a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.cases__next a:hover { color: var(--accent-ink); }
.cases__next .arrow { display: inline-block; transition: transform 150ms ease; }
.cases__next a:hover + .arrow,
.cases__next a:hover .arrow { transform: translateX(4px); }

@media (min-width: 768px) {
  .case { padding: 48px 0; }
}

/* Split layout: stacked at base (video on top, content below) */
.case--split {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .case--split {
    grid-template-columns: 58% 1fr;
    gap: 40px;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .case--split {
    grid-template-columns: 66% 1fr;
    gap: 56px;
  }
}

.case__video {
  width: 100%;
  position: relative;
  /* Reserve a 5:3 landscape slot at every breakpoint so the iframe has
     a stable box to fit into. Posters sit absolutely behind the iframe
     and act as the loading frame + poster for users on mobile until the
     animation kicks in. */
  aspect-ratio: 5 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--rule);
}

.case__animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  z-index: 2;
  opacity: 0;
  /* No opacity transition: iframe's framer-motion stalls rAF, freezing CSS transitions at t=0. See CLAUDE.md. */
}
.case__video--loaded .case__animation { opacity: 1; }
/* The poster stays put UNDER the iframe: the animation's solid stage
   covers it when it actually paints, and when the CDN-built iframe fails
   (ad-blocker, slow network) the visitor still sees the poster instead of
   an empty bordered box. */
.case__video--loaded .case__poster { pointer-events: none; }

/* --------------------------------------------------------------------------
   CASE POSTERS — number-first static composition.
   Shown on mobile (replaces iframe) and on desktop as the pre-load frame
   underneath the iframe, so the user never sees an empty container.
   -------------------------------------------------------------------------- */
.case__poster {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: var(--canvas);
  color: var(--ink);
  overflow: hidden;
  z-index: 1;
  gap: 8px;
}

@media (min-width: 640px) {
  /* Desktop — poster becomes the pre-load state underneath the iframe. */
  .case__poster {
    position: absolute;
    inset: 0;
    padding: 28px 32px;
  }
}

.case__poster-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
/* Mobile: the right-hand industry tag duplicates the pill below the poster,
   and the foot meta doesn't fit the 5:3 box — hide both deliberately. */
@media (max-width: 639px) {
  .case__poster-head span:last-child:not(:first-child) { display: none; }
  .case__poster-foot { display: none; }
}
.case__poster-head-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

.case__poster-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 12px;
}
@media (min-width: 640px) {
  /* Desktop fills the absolute card so the metric is centred vertically. */
  .case__poster-body {
    flex: 1;
    padding: 8px 0;
  }
}

.case__poster-metric {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(72px, 22vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
}
@media (min-width: 640px) {
  .case__poster-metric { font-size: clamp(120px, 18vw, 180px); }
}
.case__poster-metric em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}
.case__poster-metric-unit {
  font-size: 0.38em;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-weight: 500;
  margin-left: 10px;
  vertical-align: top;
  position: relative;
  top: 0.55em;
}

.case__poster-label {
  font-family: var(--font-serif, 'Newsreader', Georgia, serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  max-width: 92%;
}
@media (min-width: 640px) {
  .case__poster-label { font-size: 26px; }
}

.case__poster-foot {
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case__content {
  display: flex;
  flex-direction: column;
}

.case__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
  align-self: flex-start;
}

.case__title {
  margin-bottom: 12px;
}

.case__oneliner {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (min-width: 1024px) {
  .case__oneliner { font-size: 17px; }
}

/* Before / After comparison — the buyer-facing outcome line.
   Mono labels anchor the contrast; bodies read as two halves of
   a single idea stacked vertically. */
.case__compare {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 10px;
  align-items: baseline;
  padding: 16px 20px;
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 8px 8px 0;
}
.case__compare dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.case__compare dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .case__compare { padding: 20px 24px; }
  .case__compare dd { font-size: 16px; }
}

/* Stats: horizontal row, wrapping */
.case__stats {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .case__stats { gap: 32px; }
}

.case__stat {
  display: flex;
  flex-direction: column;
}

.case__stat-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .case__stat-value { font-size: 32px; }
}

.case__stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Mobile: poster fades out once animation loads, so keep the sector tag
   visible. Still strip duplicated title/stats since they read in the
   animation's own chrome. */
@media (max-width: 639px) {
  .case { padding: 32px 0; }
  .case--split { gap: 18px; }
  /* Title and stats stay on mobile — they are the section's strongest
     content and phones show the poster (no animation), so nothing is
     duplicated on screen. */
  .case__title { font-size: 22px; }
  .case__stats { gap: 18px; margin-top: 18px; }
  .case__stat-value { font-size: 24px; }
  .case__tag { margin-bottom: 10px; }
  .case__oneliner {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-3);
  }
}

/* ==========================================================================
   13. DOWNLOADABLE ASSETS (moved after Cases)
   ========================================================================== */
.assets {
  background: var(--canvas-alt);
  padding: 72px 0;
}

.assets__grid {
  margin-top: 48px;
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .assets__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .assets { padding: 120px 0; }
}

.assets__card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

@media (min-width: 768px) {
  .assets__card { padding: 40px 32px; }
}

.assets__card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(61, 61, 255, 0.08);
}

/* Quiet mono meta in the card's top-right corner */
.assets__card { position: relative; }
.assets__meta {
  position: absolute;
  top: 26px;
  right: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Editorial numeral instead of stock document icons — matches the
   number-first language of the case posters. */
.assets__num {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 20px;
}

.assets__card-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  .assets__card-title { font-size: 24px; }
}

.assets__card-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 24px;
  flex: 1;
}

.assets__cta {
  align-self: flex-start;
  width: auto;
}

/* ==========================================================================
   14. TESTIMONIAL — Carousel
   ========================================================================== */
.testimonial {
  background: var(--canvas);
  padding: 72px 0;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .testimonial { padding: 80px 0; }
}

@media (min-width: 1024px) {
  .testimonial { padding: 120px 0; }
}

/* Carousel */
.carousel {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.carousel__track {
  position: relative;
  min-height: 200px;
}

@media (min-width: 768px) {
  .carousel__track { min-height: 240px; }
}

.carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
  padding: 0 8px;
  border: none;
  margin: 0;
}

.carousel__slide--active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.carousel__mark {
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
  display: block;
  margin-bottom: 16px;
}
/* The drawn quote glyph scales with the font-size above and inherits the
   accent via currentColor. */
.carousel__mark svg {
  width: 1em;
  height: 0.72em;
  fill: currentColor;
  display: inline-block;
}

@media (min-width: 1024px) {
  .carousel__mark { font-size: 84px; }
}

.carousel__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .carousel__quote { font-size: 34px; }
}

@media (min-width: 1024px) {
  .carousel__quote { font-size: 40px; line-height: 1.2; }
}

.carousel__cite {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  display: block;
}

/* Carousel navigation */
.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.carousel__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-wash);
}

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

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--rule);
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, transform 150ms ease;
}

.carousel__dot--active {
  background: var(--accent);
  transform: scale(1.25);
}

.carousel__dot:hover {
  background: var(--accent);
}

/* prefers-reduced-motion: show all quotes stacked */
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .carousel__slide {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .carousel__nav {
    display: none;
  }
}

/* ==========================================================================
   15. TEAM — subtler photos, tighter grid
   ========================================================================== */
.team {
  padding: 72px 0;
  /* Canvas (not alt): breaks the 240px same-background trough between the
     resources cards and the team headline. */
  background: var(--canvas);
}
@media (min-width: 1024px) {
  .team { padding: 120px 0; }
}

.team__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .team__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (min-width: 1024px) {
  .team__grid { gap: 24px; }
}

/* Left-aligned editorial member cards: matches the page voice instead of
   the default centered about-us template. */
.member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.member__photo {
  width: 100px;
  height: 100px;
  border-radius: var(--r-md);
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  margin-bottom: 14px;
  background: var(--canvas-alt);
  opacity: 0.9;
  transition: filter 200ms ease, opacity 200ms ease;
}
.member:hover .member__photo {
  filter: grayscale(100%) contrast(1.02) brightness(1.05);
  opacity: 1;
}

@media (min-width: 1024px) {
  .member__photo {
    width: 160px;
    height: 160px;
  }
}

.member__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 4px;
}

@media (min-width: 1024px) {
  .member__name { font-size: 15px; }
}

.member__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.member__bio {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 36ch;
  text-align: left;
}

/* ==========================================================================
   16. BLOG — stacked at base
   ========================================================================== */
.blog {
  background: var(--canvas);
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 1024px) {
  .blog { padding: 120px 0; }
}

/* Horizontal scroll-snap carousel (homepage) */
.blog__scroll {
  position: relative;
  margin-top: 48px;
}

/* Bleed outside container on mobile so cards can scroll edge-to-edge */
@media (max-width: 767px) {
  .blog__scroll {
    margin-left: -20px;
    margin-right: -20px;
  }
}

.blog__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
  padding: 8px 20px 32px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

@media (min-width: 768px) {
  .blog__track {
    gap: 24px;
    scroll-padding: 0;
    padding: 8px 0 32px;
  }
}

.blog__track::-webkit-scrollbar { height: 6px; }
.blog__track::-webkit-scrollbar-track { background: transparent; }
.blog__track::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
.blog__track::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.blog__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 82%;
  max-width: 320px;
  scroll-snap-align: start;
  /* White cards: same card recipe as the resources section above. */
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  color: inherit;
  min-height: 220px;
}

@media (min-width: 640px) {
  .blog__card { flex: 0 0 46%; max-width: none; }
}

@media (min-width: 1024px) {
  .blog__card {
    /* 3 full cards + a peeking slice of the 4th, so the row visibly
       continues instead of pretending nine posts are three. */
    flex: 0 0 calc((100% - 72px) / 3.42);
    padding: 32px;
    min-height: 260px;
  }
}

.blog__card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(61, 61, 255, 0.08);
}

/* Fade-out hint on mobile to signal scrollability */
@media (max-width: 767px) {
  .blog__scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 32px;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--canvas));
    pointer-events: none;
  }
}

/* Desktop: the track bleeds to the viewport's right edge with a fade, so
   the cut-off 4th card reads as "more this way", not as an overflow bug. */
@media (min-width: 1024px) {
  .blog__scroll {
    position: relative;
    margin-right: calc(50% - 50vw);
  }
  .blog__track { padding-right: 48px; }
  .blog__scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 32px;
    width: 96px;
    background: linear-gradient(to right, transparent, var(--canvas));
    pointer-events: none;
  }
}

/* Prev/next controls for the blog row (desktop) — same recipe as the
   testimonial carousel buttons. */
.blog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.blog__nav {
  display: none;
  gap: 12px;
}
@media (min-width: 1024px) {
  .blog__nav { display: flex; }
}
.blog__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.blog__nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.blog__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.blog__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  transition: color 150ms ease;
}

.blog__more .arrow {
  display: inline-block;
  transition: transform 150ms ease;
}

.blog__more:hover { color: var(--accent-ink); }
.blog__more:hover .arrow { transform: translateX(4px); }

.blog__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.blog__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 16px;
  flex: 1;
}

@media (min-width: 1024px) {
  .blog__title { font-size: 20px; }
}

.blog__excerpt {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.blog__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   17. CTA BAND — deep-to-light blue, grain texture matches hero
   ========================================================================== */
.cta-band {
  /* Brand-sanctioned gradient family only (Deep Indigo -> Electric Blue ->
     light brand blue), so the conversion band is unmistakably Soulware
     blue instead of a foreign palette. */
  background: linear-gradient(
    175deg,
    #1E1E78 0%,
    #2D2DCC 32%,
    #3D3DFF 62%,
    #5B5BFF 100%
  );
  padding: 72px 0;
  color: var(--dark-band-ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .cta-band { padding: 96px 0; }
}

@media (min-width: 1024px) {
  .cta-band { padding: 160px 0; }
}

/* Animated blue-grain overlay — same generator as the hero, mix-blend-mode
   overlay so it multiplies into the deep gradient and kills the flat
   "blue-on-blue" feel that made 20% / TALK TO US unreadable on mobile. */
.cta-band__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.cta-band__grain canvas {
  width: 100%;
  height: 100%;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .cta-band__grain { opacity: 0.3; }
}

.cta-band > .container { position: relative; z-index: 1; }

/* Single column at base, 2-column at 1024px */
.cta-band__layout {
  display: grid;
  gap: 48px;
}

@media (min-width: 1024px) {
  .cta-band__layout {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    align-items: start;
  }
}

/* Cream label reads against the dark blue gradient; the accent blue
   previously used here vanished into the background. */
.cta-band .label {
  color: var(--dark-band-ink);
  opacity: 0.7;
  margin-bottom: 16px;
}

.cta-band__headline {
  color: var(--dark-band-ink);
  margin-bottom: 24px;
}
/* Override the generic "h2 em → accent blue" rule inside the CTA band.
   Blue italic on a blue gradient was the single biggest legibility hit
   on mobile. Use cream + a bold white underline for emphasis instead. */
.cta-band__headline em {
  /* No underline: underlined cream text read as a dead link at the
     conversion moment. Italic + full white carries the emphasis. */
  color: #ffffff;
  font-style: italic;
}

/* Primary CTA: white pill with Electric Blue text, so the button keeps
   maximum contrast on the dark band while staying recognizably brand. */
.cta-band .btn--primary {
  background: #ffffff;
  color: var(--accent);
}
.cta-band .btn--primary:hover,
.cta-band .btn--primary:focus-visible {
  /* Hardcoded Soft Blue Tint: --accent-wash is a 6% rgba and made the
     white pill vanish into the blue gradient on hover. */
  background: #E8E8FF;
  color: var(--accent);
}

/* The copy-email button shows an address, not a slogan: no shouting. */
.cta-band #copyEmailBtn {
  text-transform: none;
  letter-spacing: 0.02em;
}

.cta-band__body {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(242, 241, 238, 0.8);
  margin-bottom: 40px;
  max-width: 600px;
}

@media (min-width: 1024px) {
  .cta-band__body { font-size: 20px; }
}

/* CTA buttons: stacked full-width at base */
.cta-band__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .cta-band__buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Proof bullets: stacked */
.cta-band__proof {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
}

.cta-band__proof-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(242, 241, 238, 0.8);
}

.cta-band__proof-check {
  font-family: var(--font-mono);
  color: var(--dark-band-ink);
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.85;
}

/* ==========================================================================
   18. FOOTER — single column at base
   ========================================================================== */
.footer {
  background: var(--canvas);
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 1024px) {
  .footer { padding: 64px 0; }
}

/* Footer tagline */
.footer__hero-tagline {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 1024px) {
  .footer__hero-tagline { margin-bottom: 48px; padding-bottom: 40px; }
}

.footer__hero-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  max-width: 560px;
}

@media (min-width: 1024px) {
  .footer__hero-text { font-size: 32px; }
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
  }
}

.footer__logo img {
  height: 53px;
  width: auto;
}

/* Footer columns: 1 col at base, 2 at 640px, 3 at 1024px */
.footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__columns { grid-template-columns: repeat(3, 1fr); margin-bottom: 48px; }
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.footer__col a {
  display: block;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-2);
  padding: 4px 0;
  transition: color 150ms ease;
}
.footer__col a:hover { color: var(--ink); }

.footer__bottom {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ==========================================================================
   19. SCROLL ANIMATION — progressive enhancement
   ========================================================================== */
[data-animate] {
  opacity: 1;
  transform: translateY(0);
}

html.has-io [data-animate] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
}

html.has-io [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   20. FOCUS STYLES
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   21. HERO ROTATOR — layout steadiness
   ========================================================================== */

/* Hero proposition min-height so the rotating word doesn't trigger line reflow */
.hero__proposition {
  min-height: 4.5em;
}
@media (min-width: 768px) {
  .hero__proposition { min-height: 3em; }
}

/* Rotator — fixed position container so width changes don't push preceding text */
.hero__rotator {
  min-width: 16ch;
}

/* Gap K-curve draw-on-enter animation (legacy — kept as no-op for old inline SVG) */
.gap__kcurve-inline svg path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gap__kcurve-inline.is-drawn svg path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gap__kcurve-inline svg path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   18. PORTED FROM THE HOUSEOFTALENTS PAGE — venn approach + 7-step
   Soulcycle (Samuel rates that page as the bar; main site now matches).
   ========================================================================== */

/* ----- Approach: numbered steps + people/processes/technology venn ----- */
.hot-approach {
  margin-top: 40px;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 960px) {
  .hot-approach {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.hot-astep {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
}
.hot-astep + .hot-astep {
  border-top: 1px dashed var(--rule);
}
.hot-astep__num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.hot-astep p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  padding-top: 5px;
}
.hot-astep p strong {
  color: var(--ink);
  font-weight: 600;
}

.hot-venn {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
  display: block;
}

/* ----- 7-step spiral: fat solid band like the approved page ----- */
.soul-cycle__svg .soul-cycle__path {
  stroke: var(--accent);
  stroke-width: 22;
}
@media (min-width: 960px) {
  .soul-cycle__spiral-box { max-width: 372px; }
}

.soul-cycle__node-circle {
  stroke: #fff;
  stroke-width: 3;
}
.soul-cycle__node-num {
  font-size: 14px;
  font-weight: 700;
}
.soul-cycle__node[data-phase="p1"] .soul-cycle__node-circle { fill: #6FCFB6; }
.soul-cycle__node[data-phase="p2"] .soul-cycle__node-circle { fill: var(--accent); }
.soul-cycle__node[data-phase="p3"] .soul-cycle__node-circle { fill: #94918C; }
.soul-cycle__node[data-phase="p1"] .soul-cycle__node-num { fill: #0B3A2F; }
.soul-cycle__node[data-phase="p2"] .soul-cycle__node-num,
.soul-cycle__node[data-phase="p3"] .soul-cycle__node-num { fill: #fff; }

/* Step labels around the spiral */
.hot-sp-label {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--ink);
}
.js-ready .soul-cycle__reveal:not(.is-revealed) .hot-sp-label {
  opacity: 0;
  transition: opacity 450ms ease;
}
.js-ready .soul-cycle__reveal.is-revealed .hot-sp-label {
  opacity: 1;
  transition: opacity 450ms ease;
}
@media (max-width: 599px) {
  .hot-sp-label { display: none; }
}

/* Reveal stagger for 7 nodes + labels (extends the 4-node delays) */
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="0"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="0"] { transition-delay: 350ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="1"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="1"] { transition-delay: 520ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="2"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="2"] { transition-delay: 690ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="3"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="3"] { transition-delay: 860ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="4"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="4"] { transition-delay: 1030ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="5"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="5"] { transition-delay: 1200ms; }
.soul-cycle__reveal.is-revealed .soul-cycle__node[data-idx="6"],
.soul-cycle__reveal.is-revealed .hot-sp-label[data-idx="6"] { transition-delay: 1370ms; }

/* Phase cards: mint / blue / gray sequence (drives left border + chips) */
.soul-cycle__phase[data-phase="scope"]   { color: #2BB597; }
.soul-cycle__phase[data-phase="iterate"] { color: var(--accent); }
.soul-cycle__phase[data-phase="adopt"]   { color: #6E6B66; }

/* Steps inside the phase cards */
.hot-steps {
  display: grid;
  margin-top: 4px;
}
.hot-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 7px 0;
  align-items: flex-start;
}
.hot-step + .hot-step {
  border-top: 1px dashed var(--rule);
}
.hot-step__num {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: currentColor;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.hot-step__num i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
}
.soul-cycle__phase[data-phase="scope"] .hot-step__num i { color: #07332A; }
.hot-step__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.hot-step__desc {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ==========================================================================
   19. ROUND-2 EXPERT-PANEL FIXES
   ========================================================================== */

/* ----- Quotes: bespoke spread replaces the stock carousel ----- */
.quotes {
  margin-top: 40px;
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .quotes {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
.quotes__card {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .quotes__card { padding: 28px 26px; }
}
.quotes__mark {
  font-size: 46px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  display: block;
  margin-bottom: 6px;
}
.quotes__mark svg {
  width: 1em;
  height: 0.72em;
  fill: currentColor;
  display: inline-block;
}
.quotes__quote {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  margin: 12px 0 28px;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .quotes__quote { font-size: 25px; line-height: 1.36; }
}
.quotes__cite {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.quotes__who {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.quotes__metric {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash, rgba(61, 61, 255, 0.07));
  border-radius: 999px;
  padding: 5px 12px;
}

/* ----- Blog cards: no dead band, date pinned, read affordance ----- */
.blog__title {
  flex: none;
  margin-bottom: 8px;
}
.blog__excerpt {
  margin-bottom: 16px;
}
.blog__date {
  margin-top: auto;
}
.blog__date::after {
  content: " \00b7 Read \2192";
  color: var(--accent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.blog__card:hover .blog__date::after,
.blog__card:focus-visible .blog__date::after {
  opacity: 1;
}
@media (hover: none) {
  .blog__date::after { opacity: 1; }
}

/* ----- Cases: alternate the split so four cards keep rhythm ----- */
@media (min-width: 768px) {
  .cases__list .case--split:nth-of-type(even) {
    grid-template-columns: 1fr 58%;
  }
  .cases__list .case--split:nth-of-type(even) .case__video { order: 2; }
  .cases__list .case--split:nth-of-type(even) .case__content { order: 1; }
}
@media (min-width: 1280px) {
  .cases__list .case--split:nth-of-type(even) {
    grid-template-columns: 1fr 66%;
  }
}
.case__more {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
}
.case__more:hover { text-decoration: underline; }
@media (max-width: 639px) {
  .case__more { margin-top: 14px; }
}

/* ----- Mobile Soulcycle: smaller spiral, labels off (cards carry names) ----- */
@media (max-width: 599px) {
  .soul-cycle__spiral-box { max-width: 280px; }
}

/* ----- Soulcycle headline carries signature weight ----- */
.soul-cycle__headline { font-size: 32px; }
@media (min-width: 1024px) {
  .soul-cycle__headline { font-size: 44px; }
}

/* ----- Team: balance photo exposure, align card bottoms ----- */
.team__grid .member:nth-child(5) .member__photo {
  filter: grayscale(100%) contrast(1.12) brightness(0.94);
}
.team__grid .member:nth-child(6) .member__photo {
  filter: grayscale(100%) contrast(1.14) brightness(0.92);
}
@media (min-width: 1024px) {
  .member__bio { min-height: 66px; }
}

/* ----- Testimonial: left-aligned like every other section ----- */
.testimonial { text-align: left; }
.testimonial .carousel__mark { margin-left: -4px; }

/* ----- Team: final exposure pass ----- */
.team__grid .member:nth-child(1) .member__photo {
  filter: grayscale(100%) contrast(1.06) brightness(0.96);
}
.team__grid .member:nth-child(3) .member__photo {
  filter: grayscale(100%) contrast(1.0) brightness(1.08);
}

/* ----- CTA band: right column earns its half ----- */
.cta-band__proof { gap: 18px; }
.cta-band__proof-item { font-size: 17px; align-items: center; }
.cta-band__proof-check {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 14px;
}

/* vercel-git-smoketest 2026-04-21T12:29:19Z */