/* ================================================================
   THRIVE · PHOTO + MOTION SYSTEM
   Shared across index / how-it-works / use-cases / proof / contact
   ================================================================ */

/* ---- White default palette (applied globally when this stylesheet loads) ---- */
body {
  --paper: #FFFFFF;
  --chalk: #F5F5F2;
  --chalk-2: #E6E6E2;
  --ink: #0F1820;
  --ink-2: #1E2B35;
  --clay: #1E3A5F;          /* deep corporate navy-slate */
  --clay-deep: #12263F;
  --clay-light: #4A6D94;
  --sage: #6B827E;
  --sage-deep: #455D58;
  --line: rgba(15,24,32,0.10);
  --line-strong: rgba(15,24,32,0.22);
  --muted: rgba(15,24,32,0.60);
  background: var(--paper);
}

/* ---- Overlay nav (transparent → white on scroll) ---- */
.nav.is-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .32s ease, border-color .32s ease, backdrop-filter .32s ease;
}
.nav.is-overlay.is-scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.nav.is-overlay .nav-logo img { transition: filter .32s ease; }
.nav.is-overlay:not(.is-scrolled) .nav-logo img { filter: brightness(0) invert(1); }
.nav.is-overlay:not(.is-scrolled) .nav-links a { color: rgba(255,255,255,0.88); }
.nav.is-overlay:not(.is-scrolled) .nav-links a:hover { color: #fff; }
.nav.is-overlay:not(.is-scrolled) .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08);
}
.nav.is-overlay:not(.is-scrolled) .btn-ghost:hover {
  background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.8);
}
/* Push main content down by nav height since nav is fixed */
body.has-overlay-nav { padding-top: 0; } /* hero sits behind nav */

/* ================================================================
   SHARED PHOTO HERO
   ================================================================ */
.phx-hero {
  position: relative;
  /* Break out of any container (.wrap max-width: 1440px) so heroes go edge-to-edge
     on ultrawide screens. Uses viewport width + negative margins trick. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  isolation: isolate;
}
/* Fullbleed — fluid viewport height that adapts to mobile browser chrome,
   capped so it never feels absurd on ultra-tall portrait monitors. */
.phx-hero.is-fullbleed {
  /* Fallback for browsers without svh/dvh */
  min-height: 100vh;
  height: 100vh;
  /* Small viewport height avoids mobile address-bar jumps */
  min-height: 100svh;
  height: 100svh;
  /* Dynamic viewport height on supporting browsers for a better feel */
  min-height: 100dvh;
  height: clamp(560px, 100dvh, 1100px);
  padding: 0;
}
.phx-hero.is-contained {
  padding: clamp(56px, 7vw, 96px) clamp(16px, 3vw, 40px) clamp(16px, 2vw, 32px);
  max-width: min(1680px, 96vw);
  margin: 0 auto;
}
.phx-hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0B1118;
}
.phx-hero.is-fullbleed .phx-hero-frame {
  position: absolute; inset: 0;
}
.phx-hero.is-contained .phx-hero-frame {
  /* Shift aspect ratio with viewport: 16:9 on desktop, 3:4 on phones */
  aspect-ratio: 16 / 9;
  max-height: min(82vh, 820px);
  min-height: clamp(420px, 56vh, 620px);
  border-radius: 4px;
}

/* Photo — Ken-Burns slow zoom/pan */
.phx-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Per-image tuning via inline style override; default bias to focal subject */
  object-position: var(--phx-focal, 62% 45%);
  transform: scale(1.08);
  animation: phxKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes phxKenBurns {
  0%   { transform: scale(1.06) translate(0%, 0%); }
  100% { transform: scale(1.14) translate(-1.5%, -0.8%); }
}
/* Parallax wrapper overrides KenBurns when cursor moves (JS adds class) */
.phx-hero[data-parallax="on"] .phx-photo { animation: none; transition: transform .6s cubic-bezier(.22,.61,.36,1); }

.phx-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(10,14,22,0.78) 0%, rgba(10,14,22,0.58) 28%, rgba(10,14,22,0.24) 52%, rgba(10,14,22,0.05) 72%, rgba(10,14,22,0) 100%),
    linear-gradient(180deg, rgba(10,14,22,0.28) 0%, rgba(10,14,22,0) 40%, rgba(10,14,22,0) 72%, rgba(10,14,22,0.38) 100%);
}

/* Body */
.phx-body {
  position: absolute;
  left: clamp(28px, 5%, 72px);
  right: clamp(28px, 8%, 96px);
  bottom: clamp(40px, 7%, 80px);
  max-width: 680px;
  color: #fff;
  z-index: 2;
}
.phx-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.phx-eyebrow::before {
  content: ""; display: inline-block;
  width: 32px; height: 1px; background: rgba(255,255,255,0.5);
}
.phx-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw + 0.5rem, 108px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.phx-h1 em {
  font-style: italic;
  color: rgba(255,255,255,0.85);
}
.phx-sub {
  margin: 22px 0 0;
  max-width: 580px;
  font-size: clamp(15px, 0.6vw + 0.85rem, 19px);
  line-height: 1.5;
  color: rgba(255,255,255,0.90);
  text-wrap: pretty;
}
.phx-cta {
  margin-top: 34px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.phx-cta .btn-primary {
  background: #fff; color: #0F1820; border-color: #fff;
}
.phx-cta .btn-primary:hover {
  background: #F3F0EA; border-color: #F3F0EA;
}
.phx-cta .btn-primary .arr { transition: transform .2s ease; display: inline-block; }
.phx-cta .btn-primary:hover .arr { transform: translateX(4px); }
.phx-cta .btn-ghost-onphoto {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.40);
  color: #fff;
  font-family: var(--sans, 'Geist', sans-serif);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.phx-cta .btn-ghost-onphoto:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.65);
}

/* Stat card */
.phx-stat {
  position: absolute;
  top: clamp(88px, 12%, 112px);
  right: clamp(20px, 3.5%, 40px);
  min-width: 220px;
  padding: 16px 18px 14px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 36px -14px rgba(0,0,0,0.38);
  color: var(--ink);
  z-index: 3;
}
.phx-stat-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.phx-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.phx-stat-dot { width: 8px; height: 8px; display: inline-flex; }
.phx-stat-dot i {
  width: 8px; height: 8px; border-radius: 99px;
  background: #C34038;
  animation: phxPulse 1.6s ease-in-out infinite;
  display: block;
}
@keyframes phxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.phx-stat-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 2px 0 6px;
}
.phx-stat-delta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #C34038;
  margin-bottom: 10px;
}
.phx-stat-delta.is-positive { color: #2F6B4D; }
.phx-stat-foot {
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ================================================================
   SECTION PHOTO BANDS (for sprinkling photos mid-page)
   ================================================================ */
.phx-band {
  position: relative;
  /* Break out of .wrap (max-width: 1440px) for edge-to-edge on ultrawide */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 96px;
  margin-bottom: 96px;
  overflow: hidden;
  background: #0B1118;
}
.phx-band .phx-band-inner {
  position: relative;
  width: 100%;
  min-height: 420px;
  aspect-ratio: 21 / 9;
  max-height: 560px;
}
.phx-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--phx-focal, 50% 50%);
  transform: scale(1.04);
  animation: phxKenBurns 26s ease-in-out infinite alternate;
}
.phx-band .phx-band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,22,0.65) 0%, rgba(10,14,22,0.25) 50%, rgba(10,14,22,0.55) 100%);
  pointer-events: none;
}
.phx-band-quote {
  position: absolute;
  left: clamp(32px, 6%, 80px);
  right: clamp(32px, 20%, 240px);
  top: 50%; transform: translateY(-50%);
  color: #fff;
  max-width: 680px;
  z-index: 2;
}
.phx-band-quote .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 12px;
}
.phx-band-quote .kicker::before {
  content: ""; display: inline-block; width: 24px; height: 1px; background: rgba(255,255,255,0.4);
}
.phx-band-quote blockquote {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -0.02em;
  margin: 0; color: #fff; text-wrap: balance;
}
.phx-band-quote blockquote em { font-style: italic; color: rgba(255,255,255,0.78); }
.phx-band-quote cite {
  display: block; margin-top: 24px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); font-style: normal;
}

/* Portrait card — small photo + data pairing */
.phx-portrait {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: stretch;
  margin: 64px 0;
}
.phx-portrait-ph {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: #0B1118;
}
.phx-portrait-ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.phx-portrait-ph:hover img { transform: scale(1.08); }
.phx-portrait-body { display: flex; flex-direction: column; justify-content: center; padding: 16px 0; }

/* ================================================================
   MOTION — scroll-reveal, count-up, magnetic buttons
   ================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="slide-l"] { transform: translateX(-32px); }
[data-reveal="slide-r"] { transform: translateX(32px); }
[data-reveal="zoom"]    { transform: scale(0.96); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0,0) scale(1);
}

/* Word-by-word reveal for headlines */
.phx-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.phx-words.is-revealed .w {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Magnetic / hover-lift buttons — JS adds translate via CSS vars */
.btn, .phx-cta a, .hp-cta a {
  --mx: 0; --my: 0;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .2s ease, border-color .2s ease, color .2s ease;
}
.btn[data-magnetic], .phx-cta a[data-magnetic], .hp-cta a[data-magnetic] {
  transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px));
}

/* Number count-up — pre-roll style */
[data-count] { font-variant-numeric: tabular-nums; }

/* Marquee — research institutions (reuse existing .marquee baseline but prettier) */
.phx-marquee {
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}
.phx-marquee-inner {
  display: flex; align-items: center; gap: 56px;
  font-family: var(--serif); font-size: 22px; color: var(--ink);
  white-space: nowrap;
  animation: phxMarquee 48s linear infinite;
}
.phx-marquee .tick {
  display: inline-block; width: 6px; height: 6px; border-radius: 99px;
  background: var(--clay); opacity: .5;
}
.phx-marquee .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); flex-shrink: 0; padding: 0 24px;
  border-right: 1px solid var(--line);
}
@keyframes phxMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Section dividers — thin accent */
.phx-divider {
  height: 1px; background: var(--line);
  max-width: 1440px; margin: 0 auto;
}

/* Scroll-scrub progress line */
.phx-progress {
  position: fixed; left: 0; top: 0; height: 2px;
  background: var(--clay); z-index: 100;
  width: var(--progress, 0%);
  transition: width .12s linear;
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .phx-photo, .phx-band img { animation: none; transform: none; }
  [data-reveal], .phx-words .w { opacity: 1; transform: none; transition: none; }
  .phx-marquee-inner { animation: none; }
}

/* ================================================================
   RESPONSIVE — hero + band across every screen size
   ================================================================ */

/* Ultra-wide (>1600px): relax clamps so type feels weighted */
@media (min-width: 1600px) {
  .phx-hero.is-fullbleed .phx-body { max-width: 780px; }
  .phx-hero.is-contained .phx-hero-frame { max-height: min(80vh, 880px); }
}

/* Laptop → large tablet (<1200px): slightly tighter frame */
@media (max-width: 1200px) {
  .phx-hero.is-contained .phx-hero-frame { aspect-ratio: 3 / 2; }
  .phx-band .phx-band-inner { aspect-ratio: 16 / 9; min-height: 380px; }
}

/* Tablet portrait + large phone landscape (<900px) */
@media (max-width: 900px) {
  .phx-hero.is-contained { padding: clamp(56px, 9vw, 76px) 16px 16px; }
  .phx-hero.is-contained .phx-hero-frame { aspect-ratio: 4 / 5; max-height: none; min-height: clamp(500px, 70svh, 720px); }
  .phx-hero.is-fullbleed { min-height: 100svh; height: clamp(560px, 100svh, 920px); }
  .phx-photo { object-position: var(--phx-focal-md, 66% 42%); }
  .phx-body {
    left: clamp(20px, 6%, 56px);
    right: clamp(20px, 6%, 56px);
    bottom: clamp(28px, 6%, 60px);
  }
  .phx-sub { font-size: 16px; max-width: 520px; }
  .phx-stat { min-width: 180px; padding: 12px 14px; top: 80px; right: 16px; }
  .phx-stat-num { font-size: 40px; }
  .phx-portrait { grid-template-columns: 1fr; gap: 24px; }
  .phx-band .phx-band-inner { aspect-ratio: 4 / 5; min-height: 480px; max-height: none; }
  .phx-band-quote { right: clamp(24px, 8%, 48px); }
}

/* Small phones (<560px) */
@media (max-width: 560px) {
  .phx-hero.is-fullbleed { height: clamp(520px, 100svh, 780px); }
  .phx-hero.is-contained .phx-hero-frame { aspect-ratio: 3 / 4; min-height: 420px; }
  .phx-stat {
    /* On tiny screens, move the stat inline with the nav area so it doesn't collide with body text */
    min-width: 0; right: 12px; top: 68px; padding: 10px 12px;
  }
  .phx-stat-num { font-size: 30px; }
  .phx-stat-foot { display: none; }
  .phx-h1 { font-size: clamp(34px, 9.5vw, 52px); line-height: 1.04; }
  .phx-eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: 0.14em; }
  .phx-cta { margin-top: 24px; gap: 10px; }
  .phx-cta .btn-primary, .phx-cta .btn-ghost-onphoto { font-size: 13px; padding: 9px 14px; }
  .phx-photo { object-position: var(--phx-focal-sm, 62% 40%); }
  .phx-band { margin: 64px 0; }
  .phx-band-quote blockquote { font-size: clamp(22px, 6vw, 28px); }
  .phx-band-quote cite { margin-top: 16px; font-size: 10px; }
}

/* Tiny (<380px) — bump things in a last notch */
@media (max-width: 380px) {
  .phx-h1 { font-size: clamp(30px, 10vw, 44px); }
  .phx-body { left: 16px; right: 16px; bottom: 24px; }
  .phx-stat { display: none; }
}

/* Landscape phone — avoid vertical suffocation */
@media (max-height: 520px) and (orientation: landscape) {
  .phx-hero.is-fullbleed { height: clamp(420px, 100svh, 540px); min-height: 420px; }
  .phx-hero.is-contained .phx-hero-frame { aspect-ratio: 21 / 9; min-height: 360px; }
  .phx-h1 { font-size: clamp(28px, 5.4vw, 48px); }
  .phx-sub { margin-top: 10px; font-size: 14px; }
  .phx-cta { margin-top: 16px; }
  .phx-stat { display: none; }
}