/* ═══════════════════════════════════════════════════════════════
   REDESIGN ADDITIONS for sunshinelake.vc/redesign.html
   Standalone styles for: Category Leaders carousel,
   Strategic Exits + IPOs carousel, From Day Zero featured,
   Founder Voices marquee.
   No global resets — runs alongside index.html's existing styles.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rd-blue: #155EE8;
  --rd-blue-deep: #0032A8;
  --rd-blue-navy: #0B1275;
  --rd-blue-trench: #050838;
  --rd-yellow: #F2D831;
  --rd-cream: #EDECE3;
  --rd-ink: #0A0E1A;
  --rd-white: #FFFFFF;
  /* Matches the team section's max-width + padding so the Voices /
     Day Zero containers line up with "Meet Sunshine Lake" at every
     breakpoint instead of capping narrower and drifting inward. */
  --rd-max-w: 1800px;
  --rd-side-pad: clamp(40px, 6vw, 120px);
  --rd-gutter: max(var(--rd-side-pad), calc((100vw - var(--rd-max-w)) / 2 + var(--rd-side-pad)));
}

/* ═══ Section wrapper for redesign content
   Background is defined later (section "COLOR STORY") so there's
   only one source of truth and no risk of cached old rules. */
.rd-zone {
  color: #fff;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  position: relative;
  z-index: 2;
}

/* Hide the existing site-logo (wave SVG fixed top-right) — it
   was conflicting with the LP Login at the same position, and
   the hero card already carries the SLC brand at the top. */
.site-logo { display: none !important; }

/* ═══ LP Login — subtle text link top-right (Valence portal) ═══
   Reduced visual weight: no solid pill, just thin text with a faint
   border. Visible on both bright and dark backgrounds. */
.rd-lp-login {
  position: fixed;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 3.2vw, 64px);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(11, 18, 117, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(10px, 0.72vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.rd-lp-login:hover {
  background: #F2D831;
  border-color: #F2D831;
  color: #0B1275;
}
.rd-lp-login svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.rd-lp-login:hover svg { transform: translate(2px, -2px); }

/* ═══ Hero badge — $1M First Check Seed Fund (under the headline, solid yellow for emphasis) ═══ */
.hero-card .hero-badge {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 11;
  display: flex !important;
  width: fit-content !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(12px, 1.1vw, 16px) clamp(20px, 1.8vw, 28px);
  margin-top: clamp(8px, 1vw, 14px) !important;
  background: #F2D831;
  border-radius: 999px;
  color: #0B1275;
  pointer-events: auto;
  box-shadow: 0 12px 32px -8px rgba(242, 216, 49, 0.55),
              0 4px 12px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.hero-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -8px rgba(242, 216, 49, 0.7),
              0 6px 16px rgba(0, 0, 0, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hero-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0B1275;
  flex-shrink: 0;
  animation: hero-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes hero-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 18, 117, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(11, 18, 117, 0); }
}
.hero-badge-amount {
  font-family: 'DomaineDisp', 'Times New Roman', serif;
  font-size: clamp(20px, 1.85vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0B1275;
  white-space: nowrap;
}
.hero-badge-divider {
  width: 1px;
  height: clamp(22px, 2vw, 30px);
  background: rgba(11, 18, 117, 0.25);
  display: inline-block;
}
.hero-badge-label {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0B1275;
  opacity: 0.86;
}
@media (max-width: 720px) {
  .hero-badge {
    padding: 10px 16px;
    gap: 10px;
  }
  /* More breathing room between the title and the pill on mobile.
     Needs the .hero-card prefix + !important to beat the base rule. */
  .hero-card .hero-badge { margin-top: 32px !important; }
  .hero-badge-amount { font-size: 22px; }
  .hero-badge-label { font-size: 9.5px; letter-spacing: 0.14em; }
  .hero-badge-divider { height: 22px; }
}

/* ── Pre-Seed & Seed Fund pill living under the wordmark logo ──
   Subtle ghost-pill on the painterly hero: transparent fill with a
   thin white border + white text, instead of the bold yellow. ── */
.logo-container .hero-badge.logo-badge {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  width: fit-content !important;
  align-self: flex-start !important;
  align-items: center;
  gap: clamp(7px, 0.7vw, 10px);
  padding: clamp(5px, 0.5vw, 7px) clamp(10px, 0.9vw, 14px);
  margin-top: clamp(16px, 1.4vw, 20px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none !important;
  pointer-events: auto;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.logo-container .hero-badge.logo-badge:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.5);
  transform: none;
  box-shadow: none !important;
}
.logo-container .hero-badge.logo-badge .hero-badge-dot {
  width: clamp(5px, 0.45vw, 7px);
  height: clamp(5px, 0.45vw, 7px);
  background: rgba(255, 255, 255, 0.92);
  animation: none;
}
.logo-container .hero-badge.logo-badge .hero-badge-label {
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
}
@media (max-width: 720px) {
  .logo-container .hero-badge.logo-badge {
    padding: 5px 11px;
    gap: 7px;
    margin-top: 16px !important;
  }
  .logo-container .hero-badge.logo-badge .hero-badge-label {
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }
}
.rd-zone *, .rd-zone *::before, .rd-zone *::after { box-sizing: border-box; }
.rd-zone a { color: inherit; text-decoration: none; }

/* ═══ Container & headings ═══ */
.rd-container {
  max-width: var(--rd-max-w);
  margin: 0 auto;
  padding: 0 var(--rd-side-pad);
  position: relative;
  z-index: 2;
}

.rd-tier { padding-top: 64px; padding-bottom: 64px; }

.rd-tier-head {
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 40px;
}
.rd-tier-head > :first-child { flex: 1 1 360px; min-width: 0; }
.rd-tier-head > .rd-tier-desc { flex: 1 1 280px; max-width: 520px; margin-top: 0; }

.rd-tier-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 14px;
}
.rd-tier-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.rd-tier-title {
  font-family: 'DomaineDisp', 'Times New Roman', serif;
  font-size: clamp(28px, 3.4vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  word-break: break-word;
  hyphens: auto;
}
.rd-tier-title em {
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.rd-tier-desc {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  line-height: 1.55;
  margin-top: 16px;
}

/* ═══ Carousel base ═══ */
.rd-carousel-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 100px, black calc(100% - 100px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 100px, black calc(100% - 100px), transparent 100%);
}

.rd-track {
  display: flex;
  gap: 16px;
  padding: 16px var(--rd-gutter);
  width: max-content;
  /* Speed synced across all carousels at ~70 px/sec — exits track
     is ~10500px doubled, so 150s. Voices marquee uses the same
     px/sec via its own keyframe below. Cat leaders is ~5000px so
     gets a proportionally shorter 70s. !important beats the site's
     prefers-reduced-motion override which was nuking animations
     on iOS phones with Reduce Motion turned on. */
  animation: rd-scroll 150s linear infinite !important;
  will-change: transform;
}
.rd-leaders-wrap .rd-track {
  animation: rd-scroll-leaders 70s linear infinite !important;
}
/* Hover-pause only on devices that actually have hover (desktop)
   — on touch screens :hover used to stick after a tap and freeze
   the carousels until another tap somewhere else */
@media (hover: hover) {
  .rd-carousel-wrap:hover .rd-track { animation-play-state: paused; }
}
.rd-carousel-wrap.rd-paused .rd-track { animation-play-state: paused; }

@keyframes rd-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); }
}
@keyframes rd-scroll-leaders {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); }
}

/* ═══ Exit / Leader card ═══ */
.rd-card {
  position: relative;
  width: 400px;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 36px -12px rgba(0, 0, 0, 0.5);
}
.rd-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 28px 56px -12px rgba(0, 0, 0, 0.65);
}

/* Exit variants — deep ocean */
.rd-card.rd-ink  { background: linear-gradient(155deg, #0A0E1A 0%, #14182C 100%); }
.rd-card.rd-navy { background: linear-gradient(155deg, #0B1275 0%, #050838 100%); }
.rd-card.rd-deep { background: linear-gradient(155deg, #0032A8 0%, #0B1275 100%); }
/* Leader variants — brighter royal */
.rd-card.rd-royal  { background: linear-gradient(155deg, #1E68EE 0%, #0838A8 100%); }
.rd-card.rd-cobalt { background: linear-gradient(155deg, #2A7CFF 0%, #0B3CB8 100%); }
.rd-card.rd-azure  { background: linear-gradient(155deg, #155EE8 0%, #062D8C 100%); }

.rd-card.rd-royal::before,
.rd-card.rd-cobalt::before,
.rd-card.rd-azure::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.08), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Yellow badge */
.rd-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--rd-yellow);
  color: var(--rd-ink);
  z-index: 3;
  font-family: 'DomaineDisp', serif;
  box-shadow: 0 4px 12px rgba(242, 216, 49, 0.3);
}
.rd-badge.rd-stamp {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  transform: rotate(-6deg);
}
.rd-badge.rd-stamp small {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 2px;
}
.rd-badge.rd-label {
  border-radius: 999px;
  padding: 5px 11px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Inner layout */
.rd-card-inner {
  position: absolute;
  inset: 0;
  padding: 18px 20px 44px;
  display: flex;
  flex-direction: column;
}
.rd-flow {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.rd-card.rd-ipo .rd-flow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-card.rd-ipo .rd-name { font-size: 46px; }

.rd-name {
  font-family: 'DomaineDisp', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease;
}
a.rd-name:hover { color: var(--rd-yellow); }
.rd-name.rd-tight   { font-size: 30px; letter-spacing: -0.03em; }
.rd-name.rd-tighter { font-size: 24px; letter-spacing: -0.035em; }

.rd-arrow {
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}
.rd-card:hover .rd-arrow { transform: translateX(3px); color: var(--rd-yellow); }
.rd-arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }

.rd-card-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.rd-sector, .rd-year {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Controls */
.rd-controls { display: flex; gap: 10px; flex-shrink: 0; }
.rd-ctrl {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.rd-ctrl:hover {
  background: #fff;
  color: var(--rd-blue-deep);
  border-color: #fff;
  transform: translateY(-2px);
}
.rd-ctrl svg { width: 15px; height: 15px; stroke: currentColor; }

/* ═══ Day Zero — Featured Testimonials ═══ */
.rd-dayzero {
  padding-top: 56px !important;
  padding-bottom: 16px !important;
  padding-left: var(--rd-side-pad) !important;
  padding-right: var(--rd-side-pad) !important;
}
.rd-dayzero-head { max-width: 760px; margin-bottom: 28px; }

.rd-featured-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
/* Featured cards reuse the .rd-voice shell so the layout matches the
   marquee below; the --featured modifier just nudges them visually. */
.rd-voice--featured {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(242, 216, 49, 0.28);
}
.rd-voice--featured:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(242, 216, 49, 0.48);
}
.rd-voice--featured .rd-voice-quote {
  font-size: 19.5px;
  line-height: 1.45;
  color: #fff;
}

/* ═══ Voices marquee (now connected directly under Day Zero — no second header) ═══ */
.rd-voices { padding-bottom: 64px; }

.rd-voices-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.rd-voices-row {
  display: flex;
  gap: 18px;
  padding: 12px var(--rd-gutter);
  width: max-content;
  will-change: transform;
  /* Animation is driven by JS rAF (see startMarquee in polish.js)
     for reliable seamless looping across browsers. */
}

.rd-voice {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 26px;
  width: 460px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
.rd-voice:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(242, 216, 49, 0.34);
  transform: translateY(-2px);
}
.rd-voice-quote {
  font-family: 'DomaineDisp', serif;
  font-size: 17.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.005em;
  margin: 0;
}
.rd-voice-attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.rd-voice-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.rd-voice-mark:hover { transform: scale(1.08); }
.rd-voice-mark img { max-width: 82%; max-height: 82%; object-fit: contain; }
/* Wordmark fallback: when the favicon fails, drop the white box and
   show the company name as a serif wordmark, consistent with the
   text-based featured names. */
.rd-voice-mark.rd-fallback {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  font-family: 'DomaineDisp', serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rd-voice-mark.rd-fallback:hover { transform: none; color: var(--rd-yellow); }
.rd-voice-author { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rd-voice-author .rd-vname {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.rd-voice-author .rd-vrole {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-voice-company {
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.rd-voice-company:hover { color: var(--rd-yellow); border-color: var(--rd-yellow); }
.rd-voice-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rd-yellow);
  opacity: 0.85;
  padding: 3px 8px;
  border: 1px solid rgba(242, 216, 49, 0.4);
  border-radius: 4px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   DIVE INTO HERO WATER — continuous painterly descent
   The painterly water is now the BACKGROUND of the hero scroll-
   spacer itself, so as the hero card scales down on scroll, you
   feel like you're zooming INTO the same water — not landing in
   a separate dive section. Smooth gradient continues down through
   the 300vh spacer and fades to white at the very bottom so the
   existing thesis content picks up cleanly.
   ═══════════════════════════════════════════════════════════════ */

.hero-scroll-spacer.rd-water-extend {
  position: relative;
  overflow: hidden;
  /* Solid warm white — same color as the thesis section, so no line
     between them; the hard color break starts at the team section. */
  background: #FFFBEB !important;
}

/* Drifting painterly blobs — subtle overlay behind the hero card */
.hero-scroll-spacer .rd-dive-surface {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 228, 92, 0.16), transparent 42%),
    radial-gradient(ellipse at 72% 38%, rgba(122, 204, 255, 0.22), transparent 50%),
    radial-gradient(ellipse at 48% 8%,  rgba(255, 255, 255, 0.10), transparent 36%),
    radial-gradient(ellipse at 18% 55%, rgba(242, 216, 49, 0.09), transparent 45%),
    radial-gradient(ellipse at 60% 78%, rgba(122, 204, 255, 0.18), transparent 48%);
  filter: blur(40px);
  animation: rd-dive-drift 30s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}

@keyframes rd-dive-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5vw, 1.2vh, 0) scale(1.04); }
  100% { transform: translate3d(-1.5vw, 2.4vh, 0) scale(0.98); }
}

/* Sparkle particles — distributed across the full spacer height */
.hero-scroll-spacer .rd-dive-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.rd-dive-particle {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  animation: rd-dive-twinkle ease-in-out infinite;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 255, 255, 0.2);
  will-change: opacity, transform;
}

@keyframes rd-dive-twinkle {
  0%, 100% { opacity: 0.1;  transform: scale(0.6); }
  50%      { opacity: 0.55; transform: scale(1.3); }
}

/* Make sure the hero sticky sits above the painterly water */
.hero-scroll-spacer .hero-sticky { position: sticky; z-index: 5; }

/* (Option 1 hero-card-grow reverted — existing site shrink-on-scroll
   behavior is restored.) */

/* Scroll-driven zoom: painterly water + sparkles scale up as the
   user scrolls. JS sets --rd-dive-zoom on the spacer (1 → ~2.8).
   We compose this with the drift animation by using the modern
   `scale` property (independent from `transform`) so the keyframe's
   translate still drifts. */
.hero-scroll-spacer .rd-dive-surface,
.hero-scroll-spacer .rd-dive-particles {
  scale: var(--rd-dive-zoom, 1);
  transform-origin: center center;
  transition: scale 0.05s linear;
  will-change: scale, transform;
}

/* ═══════════════════════════════════════════════════════════════
   COLOR STORY — continuous descent through the whole site
   surface (painterly) → breakthrough (warm cream) → sunlit
   shallows (pale blue) → mid-blue → royal blue → deep navy →
   trench → abyss. Each section paints its segment of the
   descent so the page reads as one breath of water.
   ═══════════════════════════════════════════════════════════════ */

/* Fallback in case any section bleeds through */
body { background: #010210 !important; }

/* Thesis — solid warm white. Hard line into the team section below. */
.content-spacer {
  background: #FFFBEB !important;
}

/* Thesis copy stays dark navy on the bright bg */
.content-sticky p,
.content-sticky p .reveal-line {
  color: #0B1275 !important;
}
.content-sticky.hl-active p,
.content-sticky.hl-active p .reveal-line {
  color: #0B1275 !important;
}

/* Kill the inline white-fade overlay on content-sticky (mode-tight)
   so my color descent in .content-spacer shows cleanly through */
body.mode-tight .content-sticky,
.content-sticky {
  background: transparent !important;
}

/* Sit the thesis copy near the top of its band so there isn't a big
   empty gap above the line. */
.content-sticky {
  justify-content: flex-start !important;
  padding-top: clamp(5vh, 6vh, 8vh) !important;
  padding-bottom: 0 !important;
}

/* Solid section colours — hard lines at every section boundary
   instead of gradient fades. Each step gets darker as you scroll. */
.team-section            { background: #4A88E5 !important; }
.founders-scroll-spacer  { background: #0A3DAE !important; }
.founders-scroll-spacer img,
.founders-scroll-spacer .founders-photo-stack img { filter: none !important; }
.rd-zone                 { background: #050838 !important; }
.rd-zone.rd-deep-zone    { background: #050838 !important; }
.footer-scroll-spacer    { background: #02041F !important; }
.footer-sticky { background: transparent !important; }

/* ─── Text contrast overrides — everything from thesis down is dark blue, so white type ─── */

/* Team — white type for the dark blue band */
.team-section .team-desc { color: #FFFFFF !important; }
.team-section .team-intro { color: rgba(255, 255, 255, 0.85) !important; }
.team-section .team-card-name { color: #FFFFFF !important; }
.team-section .team-card-role { color: rgba(255, 255, 255, 0.62) !important; }
.team-section .team-card-desc { color: rgba(255, 255, 255, 0.8) !important; }
.team-section .team-bio-btn {
  color: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.team-section .team-bio-btn:hover { color: #F2D831 !important; }

/* Founders portfolio — switch to white text against royal/deep blue */
.founders-scroll-spacer .founders-left-title { color: #fff !important; }
.founders-scroll-spacer .founders-right-subtitle { color: rgba(255, 255, 255, 0.82) !important; }
.founders-scroll-spacer .founders-item-company { color: #fff !important; }
.founders-scroll-spacer .founders-item-founders { color: rgba(255, 255, 255, 0.68) !important; }
.founders-scroll-spacer .founders-item-name { color: #fff !important; }
.founders-scroll-spacer .founders-item-name .from-label { color: rgba(255, 255, 255, 0.6) !important; }
.founders-scroll-spacer .founders-item-desc { color: rgba(255, 255, 255, 0.78) !important; }

/* Footer — revert h2 to white now that the bg is the abyss */
.footer-photo-content h2 {
  color: #FFFFFF !important;
  text-shadow: 0 0 32px rgba(122, 204, 255, 0.25) !important;
}
.footer-photo-content .footer-contact a {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255, 255, 255, 0.32) !important;
}
.footer-photo-content .footer-contact a:hover {
  color: #F2D831 !important;
  border-bottom-color: #F2D831 !important;
}
.footer-photo-content .footer-legal { color: rgba(255, 255, 255, 0.4) !important; }
.footer-photo-content .footer-logo { fill: rgba(255, 255, 255, 0.85) !important; }

/* ═══════════════════════════════════════════════════════════════
   INTRO LINES — simpler fade pattern
   Lines 1–3 fade in sequentially and stay. When line 4 appears,
   lines 1–3 fade away so the final question stands alone.
   Also disables the per-word "highlight" secondary animation.
   ═══════════════════════════════════════════════════════════════ */

/* Kill the word-by-word highlight animation */
.content-sticky .hl,
.content-sticky .hl.active {
  color: inherit !important;
  background: transparent !important;
  font-weight: inherit !important;
}

/* Stop the paragraph-dim that triggers with .hl-active —
   keep the text at full blue throughout */
.content-sticky.hl-active p {
  color: #155EE8 !important;
}
.content-sticky.hl-active p .reveal-line {
  color: #155EE8 !important;
}

/* Sequential clean fade: opacity only, no translate, no glow.
   Each line fades in IN PLACE — they're stacked in the same grid
   cell so they all share the viewport-center position, no "drift
   downward" as later lines take over. */
.content-sticky p {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
.content-sticky p .reveal-line {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  text-align: center;
}
.reveal-line {
  transform: none !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-line.visible {
  transform: none !important;
}
.content-sticky p,
.content-sticky.hl-active p,
body.mode-tight .content-sticky p {
  text-shadow: none !important;
}

.content-sticky:has(.reveal-line:nth-child(2).visible) .reveal-line:nth-child(1),
.content-sticky:has(.reveal-line:nth-child(3).visible) .reveal-line:nth-child(2),
.content-sticky:has(.reveal-line:nth-child(4).visible) .reveal-line:nth-child(3) {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER OVERRIDES — "Dive Beneath the Surface"
   Layout: heading + contact ABOVE, photo grid BELOW.
   Each photo has a blue water overlay; on hover, overlay clears
   and a caption appears.
   ═══════════════════════════════════════════════════════════════ */

/* Sticky footer container: stack text on top of grid, normal flow */
.footer-scroll-spacer { height: auto !important; min-height: 100vh; }
.footer-sticky {
  position: relative !important;
  height: auto !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(56px, 7vw, 112px) clamp(24px, 4vw, 64px) clamp(40px, 5vw, 72px) !important;
}

/* Kill the floating white card */
.footer-photo-card { display: none !important; }

/* Text content: above the grid, centered */
.footer-photo-content {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: 1200px;
  margin: 0 auto !important;
  order: 1;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(20px, 2.5vw, 32px);
}
.footer-photo-content-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
}
.footer-photo-content h2 {
  font-family: 'DomaineDisp', 'Times New Roman', serif;
  font-size: clamp(48px, 5.5vw, 84px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  color: #155EE8 !important;
  text-shadow: none !important;
}
.footer-photo-content .footer-contact a {
  color: #155EE8 !important;
  border-bottom-color: rgba(21, 94, 232, 0.3) !important;
}
.footer-photo-content .footer-contact a:hover {
  color: #0032A8 !important;
  border-bottom-color: #155EE8 !important;
}
.footer-photo-content .footer-legal {
  color: rgba(21, 94, 232, 0.55) !important;
}

/* Photo grid: below text, simple 4×2 in normal flow */
.footer-photo-grid {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 1400px;
  margin: 0 auto !important;
  order: 2;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: auto !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  padding: 0 !important;
}

/* Each photo cell: clean rounded rectangle with hover effect */
.footer-photo-cell {
  position: relative !important;
  aspect-ratio: 4 / 5;
  border-radius: 14px !important;
  overflow: hidden !important;
  cursor: pointer;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
}
.footer-photo-cell:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* Hide the broken WebGL ripple canvas */
.footer-photo-cell canvas.ripple-canvas { display: none !important; }

/* Make sure the images cover the cell */
.footer-photo-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important; /* drop the duotone-blue tint — overlay handles the blue */
}

/* Blue water overlay (default state) — clears on hover */
.footer-photo-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(135deg, rgba(21, 94, 232, 0.62) 0%, rgba(11, 18, 117, 0.78) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(122, 204, 255, 0.35), transparent 60%);
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-photo-cell:hover::after { opacity: 0; }

/* Caption: hidden entirely — we don't have accurate per-photo details
   yet. The JS still creates the nodes (wireFooterCaptions) so this can
   be flipped back on later by switching display to flex. */
.footer-photo-caption {
  display: none !important;
}

@media (max-width: 720px) {
  .footer-photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-photo-content h2 { font-size: clamp(36px, 9vw, 56px) !important; }
}

/* ═══ Responsive ═══ */
@media (max-width: 1100px) {
  .rd-tier-head { grid-template-columns: 1fr; align-items: start; }
  .rd-featured-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Tier headers: more breathing room, tighter type, less crowding */
  .rd-tier { padding-top: 48px; padding-bottom: 48px; }
  .rd-tier-head { gap: 12px; margin-bottom: 20px; }
  .rd-tier-title { font-size: clamp(26px, 7vw, 32px); }
  .rd-tier-desc { font-size: 14.5px; line-height: 1.5; }
  .rd-tier-eyebrow { font-size: 10.5px; margin-bottom: 8px; gap: 8px; }
  .rd-tier-eyebrow::before { width: 16px; }

  /* Carousel cards: smaller so they fit a phone viewport with peek */
  .rd-card { width: 280px; height: 180px; border-radius: 14px; }
  .rd-name { font-size: 24px; }
  .rd-card.rd-ipo .rd-name { font-size: 30px; }
  .rd-name.rd-tight   { font-size: 20px; }
  .rd-name.rd-tighter { font-size: 17px; }
  .rd-card-inner { padding: 14px 16px 38px; }
  .rd-card-foot { padding: 8px 16px 10px; }
  .yellow-badge.stamp, .rd-badge.rd-stamp { width: 44px; height: 44px; font-size: 10px; }
  .rd-track { gap: 12px; padding: 12px var(--rd-side-pad); }

  /* Voices: same compact treatment */
  .rd-voice { width: 300px; padding: 20px; gap: 14px; }
  .rd-voice-quote { font-size: 15px; }
  .rd-voices-row { padding: 8px var(--rd-side-pad); }

  /* Featured row stacks already (1fr above), tighten the featured cards */
  .rd-voice--featured { padding: 22px; gap: 14px; }
  .rd-voice--featured .rd-voice-quote { font-size: 16px; }

  /* Thesis section on mobile — large centered type that fills the
     viewport instead of leaving dead space, with predictable wrap */
  .content-sticky {
    justify-content: center !important;
    align-items: center !important;
    padding: 6vh clamp(20px, 5vw, 32px) 6vh !important;
    text-align: center !important;
  }
  .content-sticky p {
    font-size: clamp(28px, 8.5vw, 44px) !important;
    line-height: 1.18 !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    text-align: center !important;
    /* Grid-stack so each line fades IN PLACE at the viewport center */
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center !important;
    min-height: 60vh;
  }
  .content-sticky p .reveal-line {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    text-align: center !important;
    text-wrap: pretty;
    padding: 0 4px;
  }

  /* Footer photo grid: more padding around the section heading */
  .footer-sticky { padding: clamp(40px, 8vw, 64px) clamp(20px, 5vw, 32px) clamp(32px, 6vw, 48px) !important; }
  .footer-photo-grid { gap: 8px !important; }

  /* Team → Portfolio: kill the inline -50vh negative margin and
     z-index:1 that was making the founders section overlap with
     and render BEHIND the team section on mobile. Now founders
     sits in normal flow under the team with explicit breathing
     room above its 'Portfolio' header. */
  .founders-scroll-spacer {
    margin-top: 0 !important;
    z-index: 2 !important;
    padding-top: clamp(48px, 10vw, 96px) !important;
  }
  .team-section { padding-bottom: clamp(48px, 10vw, 88px) !important; }

  /* Hero title — true center of the hero card on mobile via
     translate-based positioning. Doesn't fight the inline JS
     transform because we're explicitly !important-ing it. */
  .hero-card .main-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: calc(100% - 48px) !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .hero-card .title {
    text-align: center !important;
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
    width: 100%;
  }
  .hero-card .hero-badge { align-self: center !important; }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY SIDE NAV — anchor links into each major section
   ═══════════════════════════════════════════════════════════════ */
.rd-sidenav {
  position: fixed;
  top: 50%;
  right: clamp(16px, 1.6vw, 28px);
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rd-sidenav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  flex-direction: row-reverse; /* label sits to the LEFT of the dot */
}
.rd-sidenav-item:visited,
.rd-sidenav-item:focus,
.rd-sidenav-item:active {
  text-decoration: none !important;
  color: inherit !important;
}
.rd-sidenav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(11, 18, 117, 0), 0 0 6px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.rd-sidenav-item:hover .rd-sidenav-dot,
.rd-sidenav-item.active .rd-sidenav-dot {
  background: #F2D831;
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(242, 216, 49, 0.18), 0 0 12px rgba(242, 216, 49, 0.45);
}
.rd-sidenav-label {
  opacity: 0;
  transform: translateX(8px);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 18, 117, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rd-sidenav-item:hover .rd-sidenav-label,
.rd-sidenav-item.active .rd-sidenav-label {
  opacity: 1;
  transform: translateX(0);
}
.rd-sidenav-item.active .rd-sidenav-label {
  background: #F2D831;
  color: #0B1275;
}
@media (max-width: 900px) {
  .rd-sidenav,
  .rd-sidenav-item,
  .rd-sidenav-dot,
  .rd-sidenav-label { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MENU — hamburger button + slide-in overlay panel.
   Available at all widths; holds the section links + LP Login.
   ═══════════════════════════════════════════════════════════════ */
.rd-mobile-menu-btn,
.rd-mobile-menu { display: none; }

@media (min-width: 0px) {
  /* Hamburger button — top-LEFT corner, mirrors LP Login's pill
     aesthetic (glass-blur navy bg, white border, gold-on-hover)
     but icon-only: three horizontal lines */
  .rd-mobile-menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: fixed;
    top: clamp(20px, 2.4vw, 32px);
    right: clamp(20px, 3.2vw, 64px);
    z-index: 101;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(11, 18, 117, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
  }
  .rd-mobile-menu-btn:hover,
  .rd-mobile-menu-btn[aria-expanded="true"] {
    background: #F2D831;
    border-color: #F2D831;
  }
  .rd-mobile-menu-btn > span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: background 0.3s ease;
  }
  .rd-mobile-menu-btn:hover > span,
  .rd-mobile-menu-btn[aria-expanded="true"] > span { background: #0B1275 !important; }

  /* Slide-in overlay panel */
  .rd-mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: linear-gradient(180deg, rgba(11, 18, 117, 0.96), rgba(2, 4, 31, 0.96));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: clamp(64px, 12vw, 96px) clamp(24px, 6vw, 48px) clamp(32px, 6vw, 48px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .rd-mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .rd-mobile-menu-close {
    position: absolute;
    top: clamp(20px, 2.4vw, 32px);
    right: clamp(20px, 3.2vw, 36px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .rd-mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8vh;
  }
  .rd-mobile-menu-link {
    font-family: 'DomaineDisp', 'Times New Roman', serif;
    font-size: clamp(28px, 8vw, 44px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none !important;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.25s ease, padding-left 0.25s ease;
  }
  .rd-mobile-menu-link:active,
  .rd-mobile-menu-link:hover { color: #F2D831; padding-left: 6px; }
  .rd-mobile-menu-lp {
    margin-top: auto;
    align-self: flex-start;
    padding: 12px 22px;
    background: #F2D831;
    color: #0B1275;
    border-radius: 999px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HERO READABILITY — strengthen the title against the
   busy painterly water
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .hero-card .title {
    text-shadow:
      0 2px 16px rgba(11, 18, 117, 0.55),
      0 0 28px rgba(0, 0, 0, 0.25);
  }
}