/* ==========================================================================
   OYN — Pitch Website
   Visual system reverse-engineered from https://everfit.io/ live computed
   styles (light body, dark hero band, Inter type, 8px-radius controls,
   16px-radius flat cards, #38C214 accent, 1024px-ish editorial column).
   Self-hosted Inter (OFL-licensed) for offline reliability — no CDN calls.
   OYN brand accent kept at everfit's sampled green, which sits in the same
   lime family as the OYN logo mark.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --bg-wash: #f6f6f3;
  --bg-hero: #0b0c0a;
  --bg-hero-2: #141510;
  --ink: #101010;
  --ink-dim: #3c3f38; /* darkened from #5a5e57 for higher body-text contrast */
  --ink-faint: #93968f;
  --ink-on-dark: #ffffff;
  --ink-on-dark-dim: rgba(255, 255, 255, 0.68);
  --ink-on-dark-faint: rgba(255, 255, 255, 0.4);

  --accent: #38c214;
  --accent-ink: #0a1400;
  --accent-wash: #eaf7e3;
  --accent-wash-dark: rgba(56, 194, 20, 0.16);

  --line: #e5e7eb;
  --line-on-dark: rgba(255, 255, 255, 0.14);

  --shadow-card: 0 24px 48px -24px rgba(16, 16, 16, 0.22);
  --shadow-card-dark: 0 24px 48px -20px rgba(0, 0, 0, 0.55);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1080px; /* slightly narrower, more whitespace either side */
  --edge: clamp(22px, 5.5vw, 76px);
  --radius-card: 16px;
  --radius-btn: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scroll physics belong to Lenis now (see script.js) — no native
   scroll-behavior here, so the two never fight each other. */
* { box-sizing: border-box; }
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; overflow-y: scroll; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.on-dark .eyebrow { color: var(--accent); }

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  color: var(--ink);
}

.section {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0;
  border-top: 1px solid var(--line);
}

.section-head { max-width: 620px; margin: 0 0 52px; }
.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.section-head p {
  color: var(--ink-dim);
  font-size: 0.98rem;
  margin: 16px 0 0;
  max-width: 52ch;
  line-height: 1.5;
}

/* ---------- reveal-on-scroll ----------
   No default hidden state here on purpose: GSAP (script.js) gsap.set()s the
   hidden starting point at runtime only once it has actually loaded, then
   animates in via ScrollTrigger. If GSAP fails to load, .reveal elements
   simply keep their normal visible layout — true static fallback. */

/* SplitText's mask:"lines" wraps each line in an overflow-hidden div and
   gives the inner line this class — script.js animates its transform. */
.split-line { will-change: transform, opacity; }

/* ---------- buttons ----------
   script.js injects a .btn-label wrapper + .btn-fill sweep layer at init,
   so the base rules here just establish the stacking context. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  border: none;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(16, 16, 16, 0);
  /* hover lift/shadow/fill-sweep are GSAP tweens now — see script.js */
}
.btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.btn-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.1);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.btn-light .btn-fill, .btn-dark .btn-fill { background: rgba(255, 255, 255, 0.14); }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-light { background: #ffffff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }

/* ---------- scroll progress spine ----------
   Fixed hairline across the very top, width scrubbed to total page scroll —
   the one persistent thread tying every section together top to bottom. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--edge);
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  /* background opacity is a continuous GSAP tween tied to scroll position,
     not a hard class snap — see script.js. The blur stays always-on: with
     zero background opacity at the top it's imperceptible, so it doesn't
     need its own transition. */
}
.nav.is-scrolled { padding-top: 16px; padding-bottom: 16px; border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.05rem;
}
.nav-logo img { height: 24px; width: auto; border-radius: 4px; }

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 500;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-on-dark-dim);
}
.nav-links a:hover { color: var(--ink-on-dark); }
.nav.is-scrolled .nav-links a { color: var(--ink-dim); }
.nav.is-scrolled .nav-links a:hover { color: var(--ink); }

.nav-pill {
  border: 1px solid var(--line-on-dark);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-on-dark-dim);
  white-space: nowrap;
}
.nav-pill strong { color: var(--accent); font-weight: 700; }
.nav.is-scrolled .nav-pill { border-color: var(--line); color: var(--ink-dim); }

@media (max-width: 760px) { .nav-links { display: none; } }

/* ==========================================================================
   HERO — dark band, tab-switch crossfade
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px var(--edge) 80px;
  background: var(--bg-hero);
  color: var(--ink-on-dark);
  overflow: hidden; /* clips the oversized .hero-bg drift + blobs */
}

/* Separate, independently-animatable background layer — oversized (-10%
   inset) so the cinematic entrance scale + continuous drift + mouse
   parallax never reveal an edge. script.js owns all motion here. */
.hero-bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 85% 15%, rgba(56, 194, 20, 0.16), transparent 55%),
    radial-gradient(circle at 5% 95%, rgba(56, 194, 20, 0.08), transparent 45%),
    linear-gradient(180deg, var(--bg-hero-2), var(--bg-hero));
  will-change: transform;
}

/* Soft ambient glow — used in the hero and as a bookend in the dark
   CTA/vision close. Always-on slow drift, independent of scroll. */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(56, 194, 20, 0.24), transparent 70%);
  will-change: transform;
}
.blob-a { width: 420px; height: 420px; top: -100px; right: -80px; }
.blob-b { width: 300px; height: 300px; bottom: -80px; left: -60px; opacity: 0.75; }

.hero-inner {
  position: relative; /* stacks above the absolutely-positioned .hero-bg — see its comment */
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  margin-bottom: 22px;
  color: var(--ink-on-dark);
}
.hero-copy h1 .accent-underline { color: var(--accent); }

.hero-sub {
  color: var(--ink-on-dark-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  max-width: 46ch;
  margin: 0 0 40px;
  font-weight: 400;
  line-height: 1.5;
}

.hero-tabs { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-on-dark); }

.hero-tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-on-dark);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  overflow: hidden;
}
.hero-tab .num {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-on-dark-faint);
  padding-top: 2px;
}
.hero-tab .tab-copy { flex: 1; }
.hero-tab .tab-title {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-on-dark-dim);
}
.hero-tab .tab-desc {
  font-size: 0.88rem;
  color: var(--ink-on-dark-faint);
  height: 0;
  opacity: 0;
  overflow: hidden;
  /* GSAP animates height/opacity/margin to their "is-active" values below */
}
.hero-tab .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: var(--accent); }

.hero-tab.is-active .num { color: var(--accent); }
.hero-tab.is-active .tab-title { color: var(--ink-on-dark); }
.hero-tab.is-active .tab-desc { height: auto; opacity: 1; margin-top: 6px; color: var(--ink-on-dark-dim); }

.hero-visual { position: relative; display: flex; justify-content: center; width: 100%; }
.video-frame {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 848 / 478; /* native ratio of the source recording, ~16:9 */
  border-radius: 20px;
  padding: 8px;
  background: linear-gradient(155deg, #2a2b26, #0a0a08);
  border: 1px solid var(--line-on-dark);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65);
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  background: #111;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; margin-bottom: 12px; }
  .video-frame { width: min(480px, 100%); }
}

.scroll-cue {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ink-on-dark-faint); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
}
.scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); transform-origin: top; }
/* the pulsing scale loop is a GSAP timeline now (script.js) */

/* ==========================================================================
   PROBLEM — calm stat block
   ========================================================================== */
.stat-block { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.stat-cell { background: var(--bg); padding: 32px 26px; }
.stat-cell .num { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--ink); margin-bottom: 10px; }
.stat-cell .label { color: var(--ink-dim); font-size: 0.92rem; line-height: 1.5; }
.problem-line { margin-top: 48px; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.8vw, 1.9rem); max-width: 22ch; color: var(--ink); }
.problem-line span { color: var(--ink-faint); }
@media (max-width: 760px) { .stat-block { grid-template-columns: repeat(2, 1fr); } }

.problem-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.stat-block--2col { grid-template-columns: repeat(2, 1fr); }
.problem-photo { border-radius: var(--radius-card); min-height: 360px; overflow: hidden; }
.problem-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .problem-layout { grid-template-columns: 1fr; }
  .problem-photo { min-height: 240px; order: -1; }
}

/* ---------- pending-image placeholder ----------
   Used everywhere a real photo isn't supplied yet. Renders a soft branded
   gradient with a small centered label naming exactly what's needed, so it
   reads as "placeholder" rather than a broken image, and is trivial to
   replace: swap the element for an <img> once the file exists. */
.img-pending {
  position: relative;
  background: linear-gradient(155deg, var(--accent-wash), var(--bg-wash));
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-pending::after {
  content: attr(data-pending-label);
  max-width: 80%;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ==========================================================================
   SOLUTION — positioning + numbered feature grid
   ========================================================================== */
.positioning { max-width: 760px; margin-bottom: 56px; }
.positioning p { font-size: clamp(0.98rem, 1.6vw, 1.18rem); color: var(--ink-dim); margin: 0 0 16px; line-height: 1.5; }
.positioning strong { color: var(--ink); font-weight: 700; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-tile {
  position: relative;
  background: var(--bg-wash);
  border-radius: var(--radius-card);
  padding: 28px 24px 32px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 0 rgba(16, 16, 16, 0);
  /* hover lift + tint + shadow is a GSAP tween now */
}
.feature-tile .tag {
  display: inline-block; align-self: flex-start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 5px 10px; margin-bottom: 20px;
}
.feature-tile .num { font-weight: 700; color: var(--ink-faint); font-size: 0.85rem; margin-bottom: 8px; }
.feature-tile h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature-tile p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; flex: 1; line-height: 1.55; }

.pricing-line { margin-top: 36px; display: flex; align-items: center; gap: 14px; font-size: 1.05rem; color: var(--ink-dim); }
.pricing-line .price { font-weight: 800; letter-spacing: -0.02em; color: var(--accent-ink); background: var(--accent); padding: 6px 14px; border-radius: 999px; font-size: 1.15rem; }

@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   BUSINESS MODEL — pinned scroll
   ========================================================================== */
.pin-wrap { position: relative; }
.pin-sticky {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px); align-items: center; padding: 90px 0 20px;
  /* pinned via GSAP ScrollTrigger (script.js), not CSS position:sticky —
     ScrollTrigger's pin handles spacer/offset math correctly across zoom
     levels and browsers, which plain sticky+scroll-math didn't. */
}

.bm-list { display: flex; flex-direction: column; }
.bm-item { padding: 26px 0; border-top: 1px solid var(--line); cursor: pointer; opacity: 0.45; }
.bm-item:last-child { border-bottom: 1px solid var(--line); }
.bm-item.is-active { opacity: 1; }
.bm-item .num { font-weight: 700; font-size: 0.85rem; color: var(--accent-ink); background: var(--accent); display: inline-block; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }
.bm-item h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); margin-bottom: 10px; letter-spacing: -0.02em; }
.bm-item .desc { height: 0; opacity: 0; overflow: hidden; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; }
.bm-item.is-active .desc { height: auto; opacity: 1; }
.bm-item .badge {
  display: inline-block; margin-top: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint);
}
.bm-item.is-active .badge.live { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.bm-visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: var(--bg-wash); overflow: hidden; }
.bm-visual-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; padding: 28px; }
.bm-visual-panel.is-active { opacity: 1; }
.bm-visual-panel img { max-height: 100%; width: auto; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(16,16,16,0.25); }
.bm-visual-panel--flush { padding: 0; }

/* kitchen-collage-img: a single pre-composed image (3 panels + labels baked
   in), so it just needs to fill the flush panel edge to edge. */
.kitchen-collage-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pin length: GSAP ScrollTrigger pins .pin-sticky for this section's full
   height (see script.js) — taller than 100vh gives the pin real scroll
   distance to move through both steps instead of snapping instantly. */
.bm-steps { height: 220vh; }
@media (max-width: 860px) {
  .pin-sticky { grid-template-columns: 1fr; position: static; top: auto; }
  .bm-steps { height: auto; }
  .bm-item .desc { height: auto; opacity: 1; }
  .bm-item { opacity: 1; }
  .bm-visual { margin-top: 24px; aspect-ratio: 16/10; }
}
.kitchen-graphic { width: 100%; height: 100%; }

/* ==========================================================================
   TRACTION — waitlist stat + CP campaign photo grid
   ========================================================================== */
.traction-layout { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.traction-copy p { color: var(--ink-dim); font-size: 0.98rem; line-height: 1.55; margin: 0 0 20px; }
/* cp-photo-grid: a single pre-composed 2x2 image, not four separate crops. */
.cp-photo-grid { border-radius: 12px; overflow: hidden; }
.cp-photo-grid img { width: 100%; display: block; }

.traction-story {
  border-radius: var(--radius-card);
  background: var(--bg-wash);
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.traction-story p { color: var(--ink-dim); font-size: 1rem; line-height: 1.7; margin: 0 0 16px; }
.traction-story p:last-of-type { margin-bottom: 0; }
.traction-story p strong { color: var(--ink); font-weight: 800; }
.traction-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }

.proof-panel { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-wash); display: flex; flex-direction: column; box-shadow: 0 0 0 0 rgba(16, 16, 16, 0); margin-top: 40px; }
.proof-panel img { width: 100%; max-height: 420px; object-fit: cover; object-position: top; transform: scale(1); }
.proof-panel .caption { padding: 16px 20px; font-size: 0.82rem; color: var(--ink-faint); background: var(--bg); }

@media (max-width: 860px) {
  .traction-layout { grid-template-columns: 1fr; }
  .proof-panel img { max-height: 320px; }
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.team-card { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: 26px; background: var(--bg-wash); box-shadow: 0 0 0 0 rgba(16, 16, 16, 0); }
/* script.js injects this as a hover-only gradient wash (coach-card pattern) */
.team-card .card-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, var(--accent-wash), transparent 65%); opacity: 0; pointer-events: none; }
.team-card > *:not(.card-overlay) { position: relative; z-index: 1; }
.team-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; margin-bottom: 18px; }
.team-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.team-card .role { color: var(--accent-ink); background: var(--accent-wash); display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; }
.team-card p.desc { color: var(--ink-dim); font-size: 0.88rem; margin: 0; }

/* ---------- bio cards (photo + name + designation) ---------- */
.team-card--bio { padding: 0 0 24px; display: flex; flex-direction: column; }
.team-card--bio .team-photo { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.team-card--bio .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card--bio h3 { font-size: 1.15rem; margin: 0 22px 4px; }
.team-card--bio .role { margin: 0 22px; }

.team-banner {
  margin-top: 24px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--accent-wash);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 0.9rem;
}
.team-banner strong { color: var(--accent-ink); }
.team-banner span { color: var(--ink-dim); }

.team-partner { margin-top: 18px; color: var(--ink-faint); font-size: 0.82rem; }
.team-partner strong { color: var(--ink-dim); }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   VISION — full-bleed dark statement
   ========================================================================== */
.vision {
  position: relative;
  overflow: hidden; /* contains the ambient blobs */
  background: var(--bg-hero);
  color: var(--ink-on-dark);
  padding: clamp(96px, 15vw, 180px) var(--edge);
  text-align: center;
}
.vision > *:not(.ambient-blob) { position: relative; z-index: 1; }
.vision-statement { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.7rem, 4.8vw, 3.3rem); max-width: 18ch; margin: 0 auto; line-height: 1.2; }
.vision-statement .dim { color: var(--ink-on-dark-faint); }
.vision-statement .accent { color: var(--accent); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  padding: 36px var(--edge) 44px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  color: var(--ink-faint); font-size: 0.82rem;
  background: var(--bg-hero); color: var(--ink-on-dark-faint);
}
.footer-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink-on-dark-dim); }
.footer-logo img { height: 16px; border-radius: 3px; }