/* ══════════════════════════════════════════════════════════
   RedHawk Applied AI — Design System
   Light base · Miami red accent · dark bands for rhythm
   ══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --paper:        #FDFCFA;   /* primary light background */
  --paper-tint:   #F4F1EC;   /* alternating light band */
  --ink:          #15161A;   /* dark band background */
  --ink-soft:     #1E2026;   /* raised surface on dark */

  /* Brand */
  --red:          #C8102E;   /* Miami red */
  --red-deep:     #96001F;
  --red-wash:     rgba(200,16,46,0.08);

  /* Text on light */
  --t1:           #14151A;
  --t2:           #4A4E58;
  --t3:           #646973;   /* AA-compliant at 13px on both --paper and --paper-tint */

  /* Text on dark */
  --d1:           #F7F6F4;
  --d2:           #B4B8C0;
  --d3:           #7E838D;

  /* Lines */
  --line:         rgba(20,21,26,0.10);
  --line-soft:    rgba(20,21,26,0.06);
  --line-dark:    rgba(255,255,255,0.11);

  /* Type */
  --display:      'Plus Jakarta Sans', system-ui, sans-serif;
  --sans:         'Inter', system-ui, sans-serif;
  --serif:        'Instrument Serif', Georgia, serif;

  /* Motion */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --fast:         190ms;
  --med:          340ms;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20,21,26,0.05), 0 4px 12px rgba(20,21,26,0.05);
  --shadow-md: 0 2px 6px rgba(20,21,26,0.06), 0 14px 36px rgba(20,21,26,0.09);

  --nav-h: 74px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: fixed; top: 0; left: -9999px;
  z-index: 2000;
  background: var(--red); color: #fff;
  padding: 14px 24px; font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ── Snap container ────────────────────────────────────── */
.snap {
  height: 100vh; height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.panel {
  min-height: 100vh; min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  position: relative;
  padding: calc(var(--nav-h) + 56px) 0 72px;
}
.panel-tall { min-height: auto; padding-top: calc(var(--nav-h) + 72px); }

.panel-light { background: var(--paper); }
.panel-tint  { background: var(--paper-tint); }
.panel-dark  { background: var(--ink); color: var(--d1); }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Reveal ────────────────────────────────────────────── */
/* Content is visible by default. The hidden state is applied only when JS is
   running (html.js), so a script failure, a blocked file, or an observer that
   never fires can never leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

/* Reduced motion: show everything immediately, no offset. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ── Nav ───────────────────────────────────────────────── */
.topnav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 40px;
  padding: 0 40px;
  background: rgba(253,252,250,0);
  border-bottom: 1px solid transparent;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              backdrop-filter var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.topnav.solid {
  background: rgba(253,252,250,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(20,21,26,0.04);
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-height: 44px; }
.brand-logo {
  width: 42px; height: 42px; border-radius: 50%;
  /* Mark carries its own black field — no white plate behind it. */
  background: transparent;
  object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.16; }
.brand-name {
  font-family: var(--display);
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.015em;
  color: #fff;
  transition: color var(--fast) var(--ease);
}
.brand-sub {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  transition: color var(--fast) var(--ease);
}
.topnav.solid .brand-name { color: var(--t1); }
.topnav.solid .brand-sub  { color: var(--t3); }

.topnav-links { display: flex; gap: 32px; }
.topnav-links a {
  font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: 10px 0;
  position: relative;
  transition: color var(--fast) var(--ease);
}
.topnav-links a::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.topnav-links a:hover::after, .topnav-links a:focus-visible::after { transform: scaleX(1); }
.topnav.solid .topnav-links a { color: var(--t2); }
.topnav.solid .topnav-links a:hover { color: var(--t1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-sm);
}
.nav-toggle span {
  width: 20px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.topnav.solid .nav-toggle span { background: var(--t1); }
.nav-toggle[aria-expanded="true"] span { background: var(--t1); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 880;
  background: var(--paper);
  padding: 24px 28px 40px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility var(--med);
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a:not(.btn) {
  font-family: var(--display);
  font-size: 22px; font-weight: 600;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .btn { margin-top: 28px; }

/* ── Scroll rail ───────────────────────────────────────── */
.scroll-rail {
  position: fixed;
  right: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 700;
  display: flex; flex-direction: column; gap: 6px;
}
.rail-dot {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: flex-end;
}
.rail-dot::after {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(20,21,26,0.22);
  transition: all var(--fast) var(--ease);
}
.rail-dot:hover::after { background: rgba(20,21,26,0.45); transform: scale(1.2); }
.rail-dot.is-active::after {
  background: var(--red);
  width: 8px; height: 20px; border-radius: 4px;
}
.rail-tip {
  position: absolute; right: 26px;
  white-space: nowrap;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--ink); color: var(--d1);
  opacity: 0; transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.rail-dot:hover .rail-tip, .rail-dot:focus-visible .rail-tip { opacity: 1; transform: none; }

/* rail inverts over dark panels */
.scroll-rail.on-dark .rail-dot::after { background: rgba(255,255,255,0.26); }
.scroll-rail.on-dark .rail-dot:hover::after { background: rgba(255,255,255,0.5); }
.scroll-rail.on-dark .rail-dot.is-active::after { background: var(--red); }
.scroll-rail.on-dark .rail-tip { background: var(--paper); color: var(--t1); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.006em;
  padding: 13px 26px;
  min-height: 46px;
  border-radius: 999px;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
  background: var(--red); color: #fff;
  box-shadow: 0 2px 6px rgba(200,16,46,0.22), 0 10px 26px rgba(200,16,46,0.20);
}
.btn-primary:hover {
  background: var(--red-deep);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(200,16,46,0.24), 0 16px 34px rgba(200,16,46,0.26);
}

.btn-dark { background: var(--ink); color: var(--d1); }
.btn-dark:hover { background: #2A2D35; transform: translateY(-1.5px); }

.btn-outline-light {
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

.btn-lg { padding: 16px 32px; font-size: 16px; min-height: 54px; }
.btn-sm { padding: 11px 20px; font-size: 14px; min-height: 44px; }

/* ── Typography primitives ─────────────────────────────── */
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}
.kicker-num {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; letter-spacing: 0;
  text-transform: none;
  color: var(--t3);
}
.kicker-light { color: #fff; }
.kicker-light .kicker-num { color: rgba(255,255,255,0.72); } /* 0.5 measured 3.45:1 on the Team photo bg — bumped to clear 4.5:1 AA everywhere it's used */

.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--t1);
  max-width: 17ch;
  margin-bottom: 22px;
}
.h2-light { color: var(--d1); }

.lede {
  font-size: clamp(16.5px, 1.35vw, 18.5px);
  line-height: 1.62;
  color: var(--t2);
  max-width: 56ch;
}
.lede-light { color: var(--d2); }

.sec-head { margin-bottom: 56px; }

/* ── HERO ──────────────────────────────────────────────── */
.hero { padding: 0; align-items: stretch; }

.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(12,13,16,0.90) 0%, rgba(12,13,16,0.74) 40%, rgba(12,13,16,0.34) 68%, rgba(12,13,16,0.30) 100%),
    linear-gradient(to top, rgba(12,13,16,0.78) 0%, transparent 34%);
}

.hero-wrap {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: 150px;
  min-height: 100dvh;
}
.hero-copy { max-width: 700px; }

.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: #fff;
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #FF6B84;
}

.hero-lede {
  font-size: clamp(16.5px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: rgba(255,255,255,0.84);
  max-width: 54ch;
  margin-bottom: 38px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-bar {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  background: rgba(12,13,16,0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-bar-inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 24px; padding-bottom: 24px;
}
.hbar-item { display: flex; flex-direction: column; gap: 2px; }
.hbar-item strong {
  font-family: var(--display);
  font-size: 15.5px; font-weight: 700;
  color: #fff; letter-spacing: -0.012em;
}
.hbar-item span { font-size: 13.5px; color: rgba(255,255,255,0.74); }

.scroll-cue {
  position: absolute; z-index: 3;
  left: 50%; bottom: 120px;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  animation: bob 2.4s var(--ease) infinite;
}
.scroll-cue:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* ── Split layout ──────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.split-reverse .split-text  { order: 2; }
.split-reverse .split-media { order: 1; }

.photo-frame { position: relative; }
.photo-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.photo-frame figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--t3);
  letter-spacing: 0.01em;
}

.pull {
  margin-top: 34px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red);
}
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.42;
  color: var(--t1);
  max-width: 44ch;
}

/* ── Phases (light — lives inside the combined About section) ────────── */
.phase-row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
  align-items: stretch;
  gap: 0;
}
.phase-row-tight { margin-top: 48px; }
.phase {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px 36px;
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.phase:hover { transform: translateY(-5px); border-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.phase-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--red);
  color: #fff;
  margin-bottom: 20px;
}
.phase-icon svg { width: 22px; height: 22px; }
.phase h3 {
  font-family: var(--display);
  font-size: 18.5px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t1);
  margin-bottom: 10px;
}
.phase p { font-size: 14.5px; color: var(--t2); line-height: 1.58; }

.phase-link { position: relative; }
.phase-link::before {
  content: '';
  position: absolute; top: 50%; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.phase-link::after {
  content: '';
  position: absolute; top: 50%; right: 12px;
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--t3);
  border-right: 1.5px solid var(--t3);
  transform: translateY(-50%) rotate(45deg);
}

/* ── Check list ────────────────────────────────────────── */
.check-list { margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: 15.5px; color: var(--t2);
}
.check {
  flex: none;
  width: 21px; height: 21px; margin-top: 2px;
  border-radius: 50%;
  background: var(--red-wash);
  position: relative;
}
.check::after {
  content: '';
  position: absolute; left: 7px; top: 5px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(42deg);
}

/* ── Partner CTA (light section, closing ask) ─────────────────────────── */
.partner-cta {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.partner-cta p {
  font-size: 15px;
  color: var(--t2);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 18px;
}
.partner-cta strong { color: var(--t1); font-weight: 600; }

/* ── About: red particle-network background ──────────────────────────────
   A canvas of drifting red particles connected by lines, drawn by
   initAboutParticles() in script.js — brightens near the pointer, bursts
   on click. Sized to fill the section; the drawing itself (colors, motion,
   reduced-motion handling) lives in JS since a <canvas> can't be animated
   from CSS alone.
   Masked so it stays visible in the open margins/gaps but fades directly
   behind the left text column, which sits on transparent paper (no card)
   and would otherwise fight the moving lines for legibility. ──────────── */
.panel-dynamic { position: relative; overflow: hidden; }
.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.16) 38%, black 68%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.16) 38%, black 68%);
}
#about .wrap { position: relative; z-index: 1; }

/* ── Work With Us: dynamic background (closing section) ────────────────
   Same technique as About but red-forward and drifting the opposite
   direction, so the two dynamic sections don't feel like repeats of
   each other bookending the page. */
.partner-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 85% 25%, rgba(200,16,46,0.13) 0%, transparent 44%),
    radial-gradient(circle at 10% 80%, rgba(200,16,46,0.08) 0%, transparent 40%),
    radial-gradient(circle at 45% 10%, rgba(30,111,255,0.05) 0%, transparent 38%);
  filter: blur(30px);
  animation: partnerDrift 26s ease-in-out infinite alternate;
}
#partner .wrap { position: relative; z-index: 1; }
@keyframes partnerDrift {
  0%   { transform: translate(0, 0) scale(1.02); }
  50%  { transform: translate(2%, -2%) scale(1.08); }
  100% { transform: translate(-2%, 2%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-bg { animation: none; }
}

/* ── Tool badges (About section, replaces the meeting photo) ──────────
   Claude / ChatGPT / Zapier / Cursor use their real Simple Icons marks
   (MIT-licensed brand icon set built exactly for "built with" style
   badges). Lovable and Base44 aren't in that set, so those two fall back
   to a plain wordmark tile — swap in their official marks if you get them
   from lovable.dev/press or base44.com's brand page. ── */
.tool-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}
.tool-card-label {
  font-family: var(--display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 20px;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tool-badge {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 10px;
  border-radius: var(--r-md);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tool-badge:hover { transform: translateY(-3px); border-color: var(--tb, var(--red)); }
.tool-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--tb, var(--red));
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.tool-mark svg { width: 21px; height: 21px; }
.tool-mark-img { width: 21px; height: 21px; object-fit: contain; }

.tool-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
}

/* ── Team: full-bleed background photo ─────────────────────────────────
   Whole section runs the Farmer School photo edge-to-edge (not just a
   contained header card) so there's no flat empty margin either side of
   the grid at wide viewports. Member cards stay opaque paper cards on
   top, so this doesn't affect their legibility. */
.team-panel {
  position: relative;
  padding-top: calc(var(--nav-h) + 40px);
}
.team-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.team-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Source photo is low-resolution (474x378) — the blur is doing double duty:
     it reads as an intentional soft, cinematic backdrop AND hides that the
     source can't be shown crisp at this display size. */
  filter: blur(4px) saturate(0.85) brightness(0.7);
  transform: scale(1.06);
}
.team-panel::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  /* Deliberately lighter than the true dark sections (Hero/Join) so Team
     reads as "photo-tinted", not a third solid-black band in a row. */
  background: linear-gradient(180deg, rgba(20,18,22,0.62) 0%, rgba(20,18,22,0.74) 100%);
}
.team-panel .wrap { position: relative; z-index: 1; }

/* Team's wrap runs wider than the site default — the grid has more,
   smaller-relative-to-canvas cards, so the standard 1200px canvas left
   too much bare margin at wide viewports. */
.wrap-wide { max-width: 1320px; }

/* ── Team ──────────────────────────────────────────────────
   Row cards: a large photo + name/role + inline LinkedIn button.
   The photo container is 4:5 — matching the source files' actual aspect
   ratio — not a square. A square container was force-cropping a
   meaningful strip off the top and bottom of every 4:5 photo just to fit
   the shape, which is what was reading as "cropped instead of people."
   Matching the ratio shows the full processed photo. ────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
}
.member {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.member:hover {
  transform: translateY(-3px);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-md);
}

.member-photo {
  flex: none;
  width: 148px; height: 185px;   /* 4:5, matches the source files exactly */
  border-radius: var(--r-md);
  overflow: hidden;
  background: #E7E3DD;
  box-shadow: 0 0 0 1px rgba(20,21,26,0.06);
}
.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Per-person crop tuning. Override inline with style="--focus: 50% 20%".
     Lower the 2nd % to show more headroom, raise it to show more chin. */
  object-position: var(--focus, 50% 30%);
}

.member-text { flex: 1 1 auto; min-width: 0; }
.member h3 {
  font-family: var(--display);
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.017em;
  line-height: 1.28;
}
.member-role {
  font-size: 14px;
  line-height: 1.42;
  color: var(--t3);
  margin-top: 5px;
}

.li {
  flex: none;
  width: 44px; height: 44px;   /* WCAG 2.5.8 minimum touch target */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--red-wash);
  color: var(--red);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.li svg { width: 18px; height: 18px; }
.li:hover, .li:focus-visible { background: #0A66C2; color: #fff; }

/* Claire's card: no LinkedIn button yet — text simply takes the full row
   instead of leaving an empty slot where the button would sit. */
.member.no-link .member-text { flex: 1 1 100%; }

/* ── Interest form ─────────────────────────────────────── */
.form-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.form-copy { position: sticky; top: calc(var(--nav-h) + 40px); }
.form-points {
  margin-top: 30px;
  display: flex; flex-direction: column; gap: 11px;
}
.form-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15.2px; color: var(--d2);
}
.form-points li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px; margin-top: 10px;
  border-radius: 50%;
  background: var(--red);
}
.form-embed {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.24), 0 30px 70px rgba(0,0,0,0.34);
  min-height: 520px;
}
.form-embed iframe { width: 100%; border: 0; display: block; }
.form-embed.has-form .form-fallback { display: none; }
.form-embed:not(.has-form) iframe { display: none; }

.form-fallback {
  display: flex; align-items: center; justify-content: center;
  min-height: 520px;
  padding: 48px 40px;
  background:
    repeating-linear-gradient(45deg, #FAF8F5 0 12px, #F2EEE8 12px 24px);
}
.ff-inner { text-align: center; max-width: 40ch; color: var(--t2); }
.ff-inner svg { margin: 0 auto 18px; color: var(--t3); }
.ff-inner p strong { color: var(--t1); font-family: var(--display); font-size: 18px; }
.ff-note { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.ff-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.6px;
  background: rgba(20,21,26,0.07);
  padding: 2px 6px; border-radius: 4px;
}

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--d2);
  padding: 60px 0 34px;
  scroll-snap-align: end;
}
.foot-top {
  display: flex; align-items: flex-start;
  gap: 48px; flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-dark);
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand img {
  width: 52px; height: 52px; border-radius: 50%;
  background: transparent;
  /* Footer is near-black too — a hairline keeps the mark's edge readable. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
.foot-name {
  font-family: var(--display);
  font-weight: 700; font-size: 16.5px;
  color: var(--d1);
  letter-spacing: -0.018em;
}
.foot-org { font-size: 13px; color: var(--d3); }

.foot-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; }
.foot-nav a { font-size: 14.5px; color: var(--d2); transition: color var(--fast) var(--ease); }
.foot-nav a:hover { color: #fff; }

.foot-social { display: flex; gap: 10px; }
.soc {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--d2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.soc svg { width: 19px; height: 19px; }
.soc:hover { background: var(--red); border-color: var(--red); color: #fff; }

.foot-bottom { padding-top: 26px; }
.foot-bottom p { font-size: 13px; color: var(--d3); }

/* ══════════ Responsive ══════════ */
@media (max-width: 1024px) {
  .scroll-rail { display: none; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split-reverse .split-text  { order: 1; }
  .split-reverse .split-media { order: 2; }
  .phase-row { grid-template-columns: 1fr; gap: 18px; }
  .phase-link { display: none; }
  .form-layout { grid-template-columns: 1fr; gap: 44px; }
  .form-copy { position: static; }
}

@media (max-width: 860px) {
  .topnav-links, .topnav-cta { display: none; }
  .nav-toggle { display: flex; }
  .wrap { padding: 0 26px; }
  .panel { padding: calc(var(--nav-h) + 44px) 0 60px; }
  .hero-wrap { padding-bottom: 210px; }
  .hero-bar-inner { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .scroll-cue { display: none; }
  .foot-top { flex-direction: column; gap: 32px; }
  /* Comfortable tap height for footer links on touch devices */
  .foot-nav { gap: 2px 40px; }
  .foot-nav a { padding: 11px 0; }
}

@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Phone shrink ──────────────────────────────────────────────────────
   Everything below was sized for tablet-and-up: the clamp() floors on
   headings and the card/badge padding never scale down further once a
   true phone (375-430px) hits them, so on a small screen it all reads
   oversized and cramped together. This block only lowers those floors —
   desktop and tablet are untouched, nothing here is a layout change. ── */
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .panel { padding: calc(var(--nav-h) + 30px) 0 44px; }
  .hero-wrap { padding-bottom: 132px; }

  /* .hero-bar-inner also carries the .wrap class, whose padding reset above
     would otherwise win (later in source order, same specificity) and strip
     the bar back to 0 top/bottom padding — hence the compound selector. */
  .hero-bar .hero-bar-inner { padding: 12px 20px; gap: 8px; }
  .hbar-item strong { font-size: 13px; }
  .hbar-item span { font-size: 11.5px; }

  .hero-title { font-size: clamp(32px, 9vw, 42px); margin-bottom: 16px; }
  .hero-lede { font-size: 15px; line-height: 1.55; margin-bottom: 28px; }

  .kicker { font-size: 11.5px; gap: 8px; margin-bottom: 14px; }
  .h2 { font-size: clamp(23px, 7vw, 28px); margin-bottom: 14px; }
  .lede { font-size: 15px; line-height: 1.56; }
  .sec-head { margin-bottom: 34px; }

  .pull { margin-top: 20px; padding: 3px 0 3px 16px; }
  .pull p { font-size: 16.5px; }

  .split { gap: 32px; }

  .phase-row-tight { margin-top: 28px; }
  .phase { padding: 22px 20px 24px; }
  .phase-icon { width: 38px; height: 38px; margin-bottom: 14px; }
  .phase-icon svg { width: 18px; height: 18px; }
  .phase h3 { font-size: 16px; margin-bottom: 7px; }
  .phase p { font-size: 13.5px; }

  .tool-card { padding: 22px 18px; }
  .tool-card-label { font-size: 12px; margin-bottom: 14px; }
  .tool-grid { gap: 10px; }
  .tool-badge { padding: 14px 8px; gap: 8px; }
  .tool-mark { width: 34px; height: 34px; }
  .tool-mark svg { width: 18px; height: 18px; }
  .tool-mark-img { width: 18px; height: 18px; }
  .tool-name { font-size: 11.5px; }
}

@media (max-width: 480px) {
  /* Shrink the photo so photo + text + LinkedIn button still fit one row
     without forcing horizontal scroll on narrow phones. */
  .member { gap: 14px; padding: 16px; }
  .member-photo { width: 88px; height: 110px; }
  .member h3 { font-size: 16.5px; }
  .member-role { font-size: 12.5px; }
}

@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .foot-nav { grid-template-columns: 1fr; }
}