:root {
  --page-bg: #ffffff;
  --paper: #f5f3ef;
  --paper-strong: #ebe7e0;
  --ink: #181818;
  --ink-soft: #4f4d4b;
  --ink-muted: #78726a;
  --charcoal: #3f3d3d;
  --charcoal-soft: rgba(63, 61, 61, 0.74);
  --accent: #f16908;
  --line: rgba(255, 255, 255, 0.42);
  --section-shadow: 0 26px 70px rgba(12, 18, 28, 0.12);
  --radius-xl: 2.25rem;
  --radius-lg: 1.6rem;
  --radius-md: 1rem;
  --max-width: 1220px;
  --max-width-wide: 1710px;
  --gutter: clamp(1.25rem, 3vw, 2.25rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  line-height: 1.5;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Links inside body copy. The global `a` above is colour:inherit with no
   underline, which is right for nav/buttons/credits but leaves an in-sentence
   link invisible — indistinguishable from the prose around it. Prose links
   carry a standing underline (the affordance) and pick up the accent on
   hover/focus. */
.prose-link {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

.prose-link:hover,
.prose-link:focus-visible {
  color: var(--accent);
}

button,
a,
input {
  font: inherit;
}

/* Global type scale (applies to every page, current and future):
   headings render one weight-step lighter than the default bold, and body
   paragraphs sit ~2px smaller. Heading-specific 800 weights and the explicit
   paragraph sizes below are each stepped down to match. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

p {
  font-size: 0.875rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.page-shell {
  position: relative;
  overflow: clip;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 2vw, 2rem);
  background: var(--charcoal-soft);
  backdrop-filter: blur(12px);
  transition: background-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

/* The blur is dropped the moment the page is scrolled. A `backdrop-filter` on
   a fixed bar makes the browser re-blur everything passing behind it on every
   scrolled frame, and Safari pays far more for that than Chrome. It is only
   doing visible work at the very top of the page anyway: this state is 88%
   opaque (nudged to 0.92 to cover what the blur was hiding), so there is
   almost nothing showing through to blur. Scrolled = no blur is therefore the
   whole scroll, at no visual cost. */
.site-header.is-scrolled {
  background: rgba(44, 42, 42, 0.92);
  backdrop-filter: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The TEEEJ Fit lockup, one asset instead of the old icon + wordmark pair.
   White artwork: every surface it sits on is dark (the header bar is charcoal
   scrolled or not, and both footers are #474545). Width-sized, since the
   lockup is 5.27:1 and the header bar's height is set by the CTA button, not
   by this. */
.brand-logo {
  display: block;
  width: 9.5rem;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(241, 105, 8, 0.2));
}

.brand-logo--footer {
  width: 11rem;
}

.brand-icon {
  display: block;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(241, 105, 8, 0.2));
}

/* The Fit mark alone, above the hero headline. Cropped from the lockup at the
   same 1.233:1 proportion as the mark it replaces, so this width still holds. */
.brand-icon--hero {
  width: clamp(5.1rem, 7vw, 7.2rem);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-left: auto;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.92);
}

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.24rem;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  border-radius: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease,
    background-color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button--accent {
  background: var(--accent);
  color: #fff;
}

.button--accent:hover,
.button--accent:focus-visible {
  box-shadow: 0 16px 30px rgba(241, 105, 8, 0.24);
}

.button--dark {
  background: #4d4a4a;
  color: #fff;
  border-radius: 0.92rem;
  padding-inline: 1.65rem;
  box-shadow: 0 14px 28px rgba(19, 20, 22, 0.14);
}

.button--dark span {
  margin-left: 0.2rem;
  color: var(--accent);
}

.header-cta {
  flex: 0 0 auto;
  min-height: 2.8rem;
  padding-inline: 1.05rem;
  font-size: 0.92rem;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  background: #101418;
  color: #fff;
}

.hero-media,
.hero-inner {
  position: absolute;
  inset: 0;
}

.hero-media {
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) brightness(0.62);
  transform-origin: center center;
}

.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0e1216; /* covers the frame before the poster paints — no flash */
}

.hero-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) brightness(0.66);
  transform-origin: center center;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 17, 23, 0.6) 0%, rgba(11, 17, 23, 0.28) 32%, rgba(11, 17, 23, 0.44) 58%, rgba(11, 17, 23, 0.5) 72%, rgba(11, 17, 23, 0.82) 100%);
}

/* The softness is in the gradient stops rather than a `filter: blur(20px)`.
   A filtered element inside the pinned hero costs a blur pass every time that
   layer is touched, which on a scrubbed pin is every frame — and this is a
   20%-opacity white glow, so the blur was doing work nobody can see. The extra
   mid-stop reproduces the falloff. */
.hero-sheen {
  position: absolute;
  inset: 10% 16% auto auto;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0) 72%
  );
  opacity: 0.2;
}

.hero-inner {
  display: grid;
  place-items: center;
  padding: 6.5rem var(--gutter) 2rem;
}

.hero-stack {
  position: relative;
  width: min(100%, 96rem);
  min-height: 24rem;
  /* Fill the padded hero so each beat can centre itself inside the full
     height rather than hanging off the stack's midpoint. */
  align-self: stretch;
}

/* Beats centre with `align-content`, NOT `translateY(-50%)`. GSAP scrubs a `y`
   offset on these elements and writes its own inline `transform`, which
   replaces any transform set here — beats 2 and 3 lose the -50% and hang half
   a box too low. Centring without a transform leaves GSAP's `y` free to
   animate on top of it. */
.hero-beat {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.hero-beat.is-active {
  opacity: 1;
}

.hero-beat h1,
.hero-beat h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.55rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.hero-beat p {
  /* Wide enough that `text-wrap: balance` can settle beat 1 on two lines at
     desktop widths — at 49rem it fell to three. Balance holds the rendered
     lines at ~787px either way, so the extra cap is headroom, not width. */
  max-width: min(58rem, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.855rem, 1.4vw, 1.025rem);
}

/* Beats 2 and 3 only: give the body copy room under the big headline. The
   1rem grid gap reads tight beneath a 4.55rem display line. Beat 1 is
   untouched — its h1 is followed by .hero-subhead, not a plain p. */
.hero-beat h2 + p {
  margin-top: clamp(0.5rem, 0.8vw, 1rem);
}

/* Beat 3 carries the four agent cards. The beat is centred on the stack, so a
   taller beat rides upward on its own — which is what lifts the headline clear
   of the cards without hard-coding a position. The gallery is a grid child of
   a `justify-items: center` beat, so it needs to stretch itself. Scoped to the
   pinned-hero breakpoint; below it the beats stack and the gallery falls back
   to its own responsive grid. */
@media (min-width: 1280px) {
  .hero-beat .agents-gallery {
    justify-self: stretch;
    width: 100%;
    /* Height-based, not width-based: on a short laptop screen the vertical
       budget is what's scarce, and a 2.2vw margin spent 30px there purely
       because the window is wide pushed the row off the bottom. */
    margin-top: clamp(0.9rem, 2svh, 2.4rem);
    min-height: 0;
    /* The floor has to clear the tallest expanded card at the narrowest width
       the row is used at. With six cards the row is tighter, so the copy wraps
       further and the tallest (Design Studio / Insight) needs ~440px at
       1280px wide; a shorter floor let the flex column shrink the copy and
       clip it. */
    height: clamp(26rem, 52svh, 29rem);
  }

  /* Between 960 and 1024 the gallery's own responsive rule drops it to a
     two-column grid with 22rem cards — two rows the pinned hero has no room
     for, so they spill out of the beat. Inside the hero it stays one row and
     takes its height from the gallery. */
  .hero-beat .agents-gallery {
    display: flex;
    grid-template-columns: none;
  }

  .hero-beat .agent-card,
  .hero-beat .agent-card.is-active {
    flex: 1 1 0;
    min-height: 0;
  }

  /* Beats are pointer-events:none so the inactive ones can't swallow clicks.
     The active beat's cards are real links, so they have to opt back in. */
  .hero-beat.is-active .agents-gallery {
    pointer-events: auto;
  }

}

/* Short desktop screens (1366×768 and the like) have ~130px less vertical room
   than a 900px laptop but the same six-card row to fit. Reclaim it from the
   hero's own padding rather than shrinking the cards further. */
@media (min-width: 1280px) and (max-height: 820px) {
  .hero-inner {
    padding-block: 5.5rem 1.5rem;
  }

  /* The card row now reaches close to the bottom on these screens; tuck the
     cue down so the two keep clear of each other. Scoped under .hero to
     outrank the base `.scroll-cue { bottom: 2rem }`, which is declared later
     in this file and would otherwise win on source order. */
  .hero .scroll-cue {
    bottom: 0.5rem;
  }

  /* The headline is sized off viewport WIDTH (5vw), so a wide-but-short
     laptop renders it ~68px tall on a 768px screen and squeezes the row.
     Cap it against the height that is actually scarce. */
  .hero-beat h1,
  .hero-beat h2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
  }
}

/* Beat 3's copy is wrapped so the mobile timeline can fade it independently of
   the cards — and so the desktop timeline can LIFT it: the wrapper starts
   centred in the space the card row will occupy and settles up as the cards
   arrive. That needs a box to transform, so this is a real grid rather than the
   `display: contents` it used to be. The beat's own grid then has two children
   instead of four; the 1rem gap and the `h2 + p` margin are repeated here, so
   the rendered spacing is unchanged either way. */
.hero-beat__copy {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 100%;
  text-align: center;
}

/* Fallback wherever curtain.js never builds the beat timeline — it bails under
   reduced motion and no-ops entirely if the GSAP CDN fails. Without this the
   beats sit at opacity:0 forever, taking the agent cards with them, and those
   cards are the only route to the four agent pages. Stack the beats in normal
   flow so the whole hero narrative reads and every card stays reachable. This
   is the DEFAULT on phones; the pinned mobile hero below only takes over once
   the script confirms it is actually running. */
@media (max-width: 1279px), (prefers-reduced-motion: reduce) {
  .hero {
    min-height: 0;
  }

  .hero-inner {
    position: relative;
    padding-block: 8rem 3.5rem;
  }

  .hero-stack {
    display: grid;
    gap: clamp(3.25rem, 10vw, 5rem);
    min-height: 0;
  }

  .hero-beat {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }

  .hero-beat .agents-gallery {
    width: 100%;
    margin-top: 1.6rem;
  }

  .scroll-cue {
    position: static;
    margin-top: 2.75rem;
  }
}

/* Pinned mobile hero — one panel per screen. curtain.js adds
   `.is-curtain-mobile` only once the timeline is actually built, so everything
   here is an enhancement over the stacked fallback above, never a replacement
   that could strand content at opacity 0. Beat 3's article is the stage: it
   stays fully opaque while its copy layer and each card cross-fade inside it. */
@media (max-width: 1279px) {
  .is-curtain-mobile .hero {
    min-height: 100svh;
  }

  .is-curtain-mobile .hero-inner {
    position: absolute;
    padding-block: 6rem 4.5rem;
  }

  .is-curtain-mobile .hero-stack {
    display: block;
    gap: 0;
  }

  /* Restores the desktop stage: absolutely stacked, hidden until active. The
     opacity is deliberately NOT reset here — the base `.hero-beat` rule and
     `.hero-beat.is-active` have equal specificity, so an `opacity: 0` at this
     depth would outrank `.is-active` and blank the first beat permanently. */
  .is-curtain-mobile .hero-beat {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .is-curtain-mobile .hero-beat.is-active {
    opacity: 1;
  }

  /* Beat 3 is the stage for the card panels, not a panel itself — it stays
     opaque throughout while its children cross-fade. */
  .is-curtain-mobile .hero-beat[data-beat="3"] {
    opacity: 1;
  }

  .is-curtain-mobile .hero-beat__copy {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1rem;
    text-align: center;
  }

  /* Each card becomes a full panel, stacked so they cross-fade in place. */
  .is-curtain-mobile .hero-beat .agents-gallery {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  /* Sized like a card, not a full-bleed panel. The expanded detail anchors to
     the TOP of the card (that is the hover design), so a panel stretched to the
     full hero height leaves a long dead strip of photo under the copy. Capping
     both axes and centring with `inset: 0; margin: auto` keeps roughly the
     portrait proportion of the desktop card, fills it with copy, and lets the
     hero video read around the edges. The height floor clears Insight, whose
     extra stat line makes it the tallest of the four. */
  .is-curtain-mobile .agent-card {
    position: absolute;
    inset: 0;
    max-width: 26rem;
    max-height: clamp(24rem, 58svh, 30rem);
    margin: auto;
    min-height: 0;
  }

  /* Only the panel currently on screen takes taps. */
  .is-curtain-mobile .agent-card.is-active {
    pointer-events: auto;
  }

  /* The expanded detail is top-anchored on desktop, where the card is short
     enough that the copy nearly fills it. On a full-screen panel that strands
     a long empty strip of photo underneath, so the copy sits at the bottom
     here and the photo reads above it — the same balance as an unexpanded
     card. */
  .is-curtain-mobile .agent-card.is-active .agent-card__detail {
    justify-content: flex-end;
  }

  .is-curtain-mobile .scroll-cue {
    position: absolute;
    margin-top: 0;
  }
}

.eyebrow {
  display: inline-flex;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  transform: translateX(-50%);
}

.scroll-cue span {
  display: inline-block;
  width: 2.8rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.54);
}

.section {
  position: relative;
  z-index: 2;
}

.section--lift {
  margin-top: -4rem;
}

.section-shell {
  width: min(calc(100% - 2 * var(--gutter)), var(--max-width));
  margin-inline: auto;
}

.section-shell--wide {
  width: min(calc(100% - 2 * var(--gutter)), var(--max-width-wide));
  margin-inline: auto;
}

.section-shell--intro {
  width: min(calc(100% - 2 * var(--gutter)), 1426px);
}

.intro {
  background: linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
  padding: 5.7rem 0 2.8rem;
}

.intro-grid {
  display: flex;
  width: min(calc(100% - 2 * var(--gutter)), 1426px);
  margin-inline: auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(6rem, 9vw, 10rem);
  transform-origin: center top;
  will-change: transform, opacity;
}

.intro-kicker {
  margin: 0 0 0.95rem;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-kicker--light {
  color: rgba(255, 255, 255, 0.62);
}

.intro-copy {
  flex: 0 0 31.5rem;
  max-width: 31.5rem;
  padding-top: 0.55rem;
}

.agents-copy h2,
.faq-heading h2 {
  margin: 0 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.intro-copy h2 {
  margin: 0 0 1.7rem;
  max-width: 31rem;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.8rem, 0.55vw + 1.4rem, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.intro-copy h3 {
  margin: 0 0 1.45rem;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.45rem, 0.4vw + 1.05rem, 1.82rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.intro-copy p {
  max-width: 31.25rem;
  margin: 0 0 1.25rem;
  color: #1f1f1f;
  font-size: clamp(0.845rem, 0.12vw + 0.805rem, 0.875rem);
  line-height: 1.3;
}

.intro-note {
  margin-top: 0.6rem;
}

.intro-note a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.intro-copy .button {
  margin-top: 2.25rem;
  min-width: 12.8rem;
  min-height: 3.35rem;
  padding-inline: 2rem;
  font-size: 1.02rem;
}

.media-card {
  position: relative;
  flex: 0 1 740px;
  width: min(100%, 740px);
  align-self: flex-start;
  justify-self: end;
  margin-top: 1.35rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--section-shadow);
  background: #efebe6;
  transform-origin: center top;
  will-change: transform, opacity;
}

.media-card img {
  width: 100%;
  height: auto;
}

.agents {
  padding: 5.75rem 0 4.5rem;
  background: linear-gradient(180deg, #fffdfa 0%, #f5f2ec 100%);
}

.agents-stage {
  display: grid;
  gap: 2.6rem;
  transform-origin: center top;
  will-change: transform, opacity;
}

.agents-copy {
  text-align: center;
}

.agents-gallery {
  display: flex;
  gap: clamp(0.95rem, 1vw, 1.35rem);
  min-height: clamp(23rem, 28vw, 25.5rem);
  padding: clamp(0.2rem, 0.8vw, 0.45rem);
  transform-origin: center top;
  will-change: transform, opacity;
}

.agent-card {
  --agent-image-transform: scale(1);
  --agent-image-transform-active: scale(1.02);
  --agent-image-position: center center;
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: clamp(1.5rem, 2.2vw, 2rem);
  padding: 0;
  appearance: none;
  overflow: hidden;
  background: #101317;
  box-shadow:
    0 24px 52px rgba(20, 24, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  isolation: isolate;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: flex 260ms ease, transform 220ms ease, box-shadow 220ms ease,
    filter 220ms ease;
}

.agent-card:hover,
.agent-card:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 32px 70px rgba(20, 24, 30, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.agent-card:focus-visible {
  outline: 3px solid rgba(241, 105, 8, 0.42);
  outline-offset: 4px;
}

.agent-card::before,
.agent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.agent-card::before {
  background: linear-gradient(180deg, rgba(8, 12, 16, 0) 28%, rgba(8, 12, 16, 0.22) 64%, rgba(8, 12, 16, 0.68) 100%);
}

.agent-card::after {
  background: linear-gradient(180deg, rgba(7, 11, 15, 0.16) 0%, rgba(7, 11, 15, 0.52) 38%, rgba(7, 11, 15, 0.92) 100%);
  opacity: 0;
}

.agent-card.is-active {
  flex: 1.18 1 0;
}

.agent-card.is-active::after {
  opacity: 1;
}

.agent-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--agent-image-position);
  transform: var(--agent-image-transform);
  transition: transform 280ms ease, filter 280ms ease;
}

.agent-card.is-active .agent-card__image {
  transform: var(--agent-image-transform-active);
  filter: saturate(0.88) brightness(0.64);
}

.agent-card--audience {
  --agent-image-transform: scale(1.5);
  --agent-image-transform-active: scale(1.55);
  --agent-image-position: center center;
}

.agent-card--design {
  --agent-image-transform: scale(1.34);
  --agent-image-transform-active: scale(1.39);
  --agent-image-position: center center;
}

/* Audience and Design Studio have no detail page yet, so they render as divs
   rather than links. The shared card styling assumes something clickable —
   undo the affordance so they don't invite a tap that goes nowhere. They still
   expand on hover like their siblings, since that is driven by a class rather
   than by being a link. */
.agent-card--audience,
.agent-card--design {
  cursor: default;
}

.agent-card--genius {
  --agent-image-transform: scale(1.34);
  --agent-image-transform-active: scale(1.39);
  --agent-image-position: center center;
}

.agent-card--author {
  --agent-image-transform: scale(1.34);
  --agent-image-transform-active: scale(1.39);
  --agent-image-position: center 48%;
}

.agent-card--flow {
  --agent-image-transform: scale(1.34);
  --agent-image-transform-active: scale(1.39);
  --agent-image-position: center center;
}

.agent-card--insight {
  --agent-image-transform: scale(1.34);
  --agent-image-transform-active: scale(1.39);
  --agent-image-position: center center;
}

.agent-card__detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 2vw, 2.15rem);
  color: #fff;
  text-align: left;
}

.agent-card__detail-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.agent-card__detail h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.7rem, 2.05vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.agent-card__arrow {
  font-size: clamp(1.35rem, 1.7vw, 1.85rem);
  line-height: 1;
}

.agent-card__detail-kicker,
.agent-card__detail-copy {
  margin: 0 auto;
  max-width: 17.5rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.agent-card__detail-kicker {
  font-size: clamp(1.02rem, 1.15vw, 1.32rem);
  font-weight: 700;
  line-height: 1.2;
}

.agent-card__detail-copy {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.855rem, 1.02vw, 0.955rem);
  line-height: 1.34;
}

/* Active card: lift the name + arrow to the top and reveal the full,
   centered detail copy, matching the expanded card in the reference. */
.agent-card.is-active .agent-card__detail {
  justify-content: flex-start;
  text-align: center;
}

.agent-card.is-active .agent-card__detail-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.agent-card.is-active .agent-card__detail-kicker,
.agent-card.is-active .agent-card__detail-copy {
  opacity: 1;
  max-height: 14rem;
  transform: translateY(0);
}

.agent-card.is-active .agent-card__detail-kicker {
  margin-bottom: 0.7rem;
}

.platform {
  padding: 2.9rem 0 3.4rem;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%);
}

.platform-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.1rem, 3.2vw, 2.4rem)
    clamp(0.8rem, 1.8vw, 1.3rem);
  border-radius: clamp(2.1rem, 3vw, 3.2rem);
  background: linear-gradient(180deg, #f1efea 0%, #efede8 100%);
  box-shadow: 0 34px 76px rgba(14, 18, 24, 0.1);
  transform-origin: center top;
  will-change: transform, opacity;
}

.platform-panel::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: inherit;
  background: radial-gradient(circle at top center, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.platform-frame {
  position: relative;
  z-index: 1;
  max-width: 1213px;
  margin: 0 auto;
  transform-origin: center top;
  will-change: transform, opacity;
}

.platform-frame img {
  width: 100%;
  height: auto;
}

.platform-cta-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  max-width: 1213px;
  margin: clamp(0.25rem, 1vw, 0.5rem) auto 0;
}

.platform-cta {
  min-width: 12.7rem;
}

.faq {
  padding: 5rem 0 0;
  background: #101315;
  color: #fff;
}

.faq-photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.94;
}

.faq-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.38) saturate(0.82);
}

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 14, 18, 0.72) 0%, rgba(12, 14, 18, 0.52) 34%, rgba(12, 14, 18, 0.82) 100%),
    linear-gradient(180deg, rgba(12, 14, 18, 0.24) 0%, rgba(12, 14, 18, 0.82) 100%);
}

.faq-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(2rem, 5vw, 6rem);
  padding-bottom: 4.5rem;
  transform-origin: center top;
  will-change: transform, opacity;
}

.faq-heading {
  padding-top: 5.6rem;
}

.faq-heading h2 {
  margin-bottom: 0;
}

.faq-content {
  padding-top: 2.8rem;
  transform-origin: center top;
  will-change: transform, opacity;
}

.faq-lede {
  margin: 0 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.faq-body {
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
}

.faq-list {
  display: grid;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
}

.faq-plus {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.74);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}

.faq-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}

.faq-answer p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.835rem;
  padding-bottom: 0;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.is-open .faq-answer p {
  padding-bottom: 1rem;
}

.site-footer {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 3rem var(--gutter) 3.3rem;
  background: #474545;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.footer-brand {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.footer-brand p,
.footer-meta p {
  margin: 0;
  font-size: 0.95rem;
}

/* The parent-company credit now points at thestoryhausagency.com. Global `a`
   is colour:inherit / no underline, so at rest it reads as the plain line it
   has always been; the underline only appears on hover/focus, which is enough
   affordance for a footer credit without turning it into a call to action. */
.footer-parent:hover,
.footer-parent:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Terms of Use / Privacy Policy, in every footer on the site. Deliberately the
   quietest thing in the footer — these have to be reachable from any page, but
   they are not a destination anyone is being sent to. Shared by the home
   page's `.site-footer` (a centred grid, where this is just another row) and
   by the four product-page footers (a space-between flex row, where the
   `flex-basis` below drops it onto its own full-width line beneath the three
   existing items rather than crowding them into a fourth column). */
.footer-legal {
  margin: 0;
  flex-basis: 100%;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.footer-legal a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 160ms ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: #ffffff;
}

/* On its own page, a policy is named rather than linked. */
.footer-legal [aria-current="page"] {
  color: rgba(255, 255, 255, 0.85);
}

.footer-legal [aria-hidden="true"] {
  margin: 0 0.5rem;
  opacity: 0.55;
}

/* The product-page footers are a three-item `space-between` row with no wrap,
   so the legal line needs somewhere to go. */
.flow-footer,
.genius-footer,
.insight-footer,
.author-footer {
  flex-wrap: wrap;
}

.footer-meta {
  display: grid;
  gap: 0.95rem;
}

.socials {
  display: inline-flex;
  justify-content: center;
  gap: 0.6rem;
}

.socials a {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  transition: transform 180ms ease, opacity 180ms ease;
}

.socials a:hover,
.socials a:focus-visible {
  transform: translateY(-2px);
  opacity: 0.88;
}

.socials img {
  display: block;
  width: 100%;
  height: auto;
}

.reveal {
  opacity: 0;
  transform: translateY(2.6rem);
}

.reveal--right {
  transform: translate(2.2rem, 2rem);
}

/* ---------- Curtain scroll reveal (see curtain.js) ----------
   Each section locks (pins) while the next section rises up to cover it,
   exactly like the hero. For a cover to read, each section must paint over
   the one before it, so z-index increases down the page (hero is z-index:1);
   and on desktop every panel fills the viewport so the cover is gap-free. */
/* Stacking order increases down the page so each section paints over the one
   before it during the hero pin / lede flip (see curtain.js). */
.fit-split {
  z-index: 4;
}
.how {
  z-index: 5;
}
.faq {
  z-index: 6;
}
.closer {
  z-index: 7;
}
.site-footer {
  position: relative;
  z-index: 8;
}

/* The flip cover used to be forced to `min-height: 100svh` so that one section
   could hide the pinned hero on its own. It does not need to: the two sections
   that follow it are the same white and butt straight up against it, so the
   sweep is a continuous white column ~1780px tall either way. Forcing a full
   viewport onto a section whose copy is now short left ~490px of dead space
   around it — three times the slack of every other .fit-split row. Removed so
   this section keeps the same rhythm as the ones below it. */

/* Scroll fade-in for headings + body copy (curtain.js adds .fade-in via JS,
   then .is-visible as each element enters the viewport). The class is only
   applied by JS, so content stays visible if the script never runs. */
/* No `will-change` here, deliberately. curtain.js puts .fade-in on every
   heading and paragraph on the page — 56 elements on the home page — and a
   permanent `will-change` promotes every one of them to its own compositing
   layer for the life of the page, not just while it animates. Chrome absorbs
   that; Safari has a much tighter layer budget and starts thrashing, which is
   what made scrolling feel rougher there. Opacity and transform composite on
   their own in both engines, so the hint was buying nothing. */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Side curtains — two-column copy/media slide in from their own edge as the
   section scrolls into view (curtain.js adds .side-in-left/right per column,
   then .is-visible). No pin; lighter than the old pinned slide. */
.side-in-left,
.side-in-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.side-in-left {
  transform: translateX(-72px);
}

.side-in-right {
  transform: translateX(72px);
}

.side-in-left.is-visible,
.side-in-right.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* No motion: show content as-is (curtain.js also skips these entirely). */
  .fade-in,
  .side-in-left,
  .side-in-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1024px) {
  .site-nav {
    gap: 1rem;
    font-size: 0.88rem;
  }

  .intro-grid,
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .intro-copy {
    flex: initial;
    max-width: none;
  }

  .media-card {
    flex: initial;
    justify-self: stretch;
  }

  .agents-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .agent-card,
  .agent-card.is-active {
    flex: auto;
    min-height: 22rem;
  }

  .platform-panel {
    padding-inline: 1rem;
    padding-top: 1.55rem;
  }

  .platform-cta-row {
    justify-content: center;
    margin-top: 1rem;
  }

  .faq-photo-wrap {
    opacity: 0.82;
  }

  .faq-heading,
  .faq-content {
    padding-top: 0;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav,
  .header-cta {
    display: none;
  }

  .site-header.is-open .site-nav {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 0.75rem);
    display: grid;
    gap: 0.25rem;
    padding: 0.65rem;
    border-radius: 1rem;
    background: rgba(33, 31, 31, 0.96);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  .site-header.is-open .site-nav a {
    padding: 0.85rem 0.9rem;
    border-radius: 0.7rem;
  }

  .site-header.is-open .site-nav a:hover,
  .site-header.is-open .site-nav a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
  }

  .hero-inner {
    padding-top: 7rem;
  }

  .hero-stack {
    min-height: 28rem;
  }

  .hero-photo {
    width: 100%;
    height: 100%;
    opacity: 0.88;
  }

  .hero-gradient {
    background:
      linear-gradient(180deg, rgba(11, 17, 23, 0.52) 0%, rgba(11, 17, 23, 0.18) 28%, rgba(11, 17, 23, 0.92) 100%),
      linear-gradient(90deg, rgba(11, 17, 23, 0.16) 0%, rgba(11, 17, 23, 0.82) 100%);
  }

  .section--lift {
    margin-top: -2.5rem;
  }

  .agent-card__detail {
    padding: 1.45rem;
  }
}

@media (max-width: 720px) {
  .hero-beat h1,
  .hero-beat h2 {
    font-size: clamp(2.3rem, 10vw, 3.4rem);
  }

  .hero-beat p,
  .intro-copy p,
  .faq-body,
  .faq-answer p {
    font-size: 0.835rem;
  }

  .intro-copy h3 {
    font-size: 1.4rem;
  }

  .intro-copy h2 {
    margin-bottom: 1.45rem;
  }

  .intro-copy h3 {
    margin-bottom: 1.1rem;
  }

  .intro-copy p {
    margin-bottom: 1.1rem;
  }

  .intro-copy .button {
    margin-top: 1.4rem;
  }

  .intro,
  .agents,
  .platform,
  .faq {
    padding-top: 4.25rem;
  }

  .agents-gallery {
    grid-template-columns: 1fr;
  }

  .agent-card,
  .agent-card.is-active {
    min-height: 20rem;
  }

  .agent-card__detail-kicker,
  .agent-card__detail-copy {
    max-width: none;
  }

  .scroll-cue {
    bottom: 1.3rem;
  }

  .faq-photo-wrap {
    opacity: 0.72;
  }
}

/* ===========================================================
   Fitness landing sections (index.html redesign)
   =========================================================== */

/* Two-column copy + media rows (lede, "Just Ask", CRM, "More than") */
.fit-two {
  width: min(calc(100% - 2 * var(--gutter)), 1360px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 8rem);
}

.fit-two--reverse {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

.fit-two__copy {
  max-width: 34rem;
}

.fit-heading {
  margin: 0 0 1.35rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--ink);
}

/* The emotional lede reads bolder, matching the reference. */
.fit-heading--bold {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.85rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.fit-subhead {
  margin: 1.7rem 0 0.55rem;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.24rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.fit-two__copy p {
  margin: 0 0 1.1rem;
  color: #333130;
  font-size: clamp(0.855rem, 0.15vw + 0.8rem, 0.925rem);
  line-height: 1.5;
}

.fit-two__copy p:last-of-type {
  margin-bottom: 0;
}

.fit-two__copy .button {
  margin-top: 2rem;
  min-width: 12.6rem;
  min-height: 3.35rem;
  padding-inline: 2rem;
  font-size: 1.02rem;
}

.fit-two__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(1.1rem, 1.8vw, 1.7rem);
  box-shadow: 0 30px 70px rgba(14, 18, 24, 0.14);
  object-fit: cover;
}

.fit-split {
  /* Half of the 135px gap the white run is specced at: an internal boundary
     gets one of these from each neighbour, and the run's outer edges get two
     (doubled below), so every gap in the run lands on 135px. Fixed rather than
     clamped — 135 is the target at every width, not a desktop maximum. */
  --fit-pad: 67.5px;
  background: #ffffff;
  padding: var(--fit-pad) 0;
}

/* Every boundary INSIDE the white run carries two of those paddings — one from
   each neighbour — but its outer two edges carry only one, so the block sat
   tight against the hero above and the grey Get Started below while breathing
   twice as freely in the middle. Double the outer edges so all the white in the
   run reads the same. Top edge is the flip cover; bottom edge is whichever
   white row runs into .how, matched by position rather than by a hand-added
   class so it follows if the order changes. */
.hero-cover {
  padding-top: calc(var(--fit-pad) * 2);
}

.fit-split:has(+ .how) {
  padding-bottom: calc(var(--fit-pad) * 2);
}

/* The interactive agent cards (hover to expand + reveal detail) are reused in
   the hero from the shared component; the gym photos just need their own
   framing rather than the illustrated cards' zoom. */
.hero-beat .agent-card {
  --agent-image-transform: scale(1);
  --agent-image-transform-active: scale(1.05);
  --agent-image-position: center center;
}

/* "How it Works" — three steps on a light-grey band */
.how {
  background: #d3d1cd;
  color: #191919;
  padding: clamp(4rem, 6.5vw, 6rem) 0;
}

.how__title {
  margin: 0 0 clamp(2.4rem, 4vw, 3.6rem);
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.how__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.how__step {
  padding: 0.35rem clamp(1.2rem, 3vw, 3rem);
  text-align: center;
}

.how__step + .how__step {
  border-left: 1px solid rgba(0, 0, 0, 0.32);
}

/* The steps are a sequence, so they arrive as one: 1, then 2, 3, 4. The whole
   row crosses the observer threshold at the same moment, so the order comes
   from a per-step delay rather than from when each is seen. It rides on
   `.fade-in`, which curtain.js puts on each step's heading and copy — both
   children of a step share a delay, so a step still animates as one unit, and
   under reduced motion the class is never added and no delay applies. */
.how__step:nth-child(2) .fade-in {
  transition-delay: 220ms;
}

.how__step:nth-child(3) .fade-in {
  transition-delay: 440ms;
}

.how__step:nth-child(4) .fade-in {
  transition-delay: 660ms;
}

.how__step h3 {
  margin: 0 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.how__step p {
  max-width: 15rem;
  margin: 0 auto;
  color: #2f2d2c;
  font-size: clamp(0.855rem, 0.12vw + 0.81rem, 0.9rem);
  line-height: 1.45;
}

/* FAQ intro line (kept dark FAQ, added the reference's supporting sentence) */
.faq-intro {
  margin: 1.1rem 0 0;
  max-width: 26rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Closing CTA — "Spend More Time Coaching" */
.closer {
  background: #ffffff;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}

.closer__inner {
  display: grid;
  justify-items: center;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.closer__inner h2 {
  margin: 0 0 1.1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.closer__inner p {
  max-width: 42rem;
  margin: 0 0 1.7rem;
  color: #333130;
  font-size: clamp(0.855rem, 0.15vw + 0.8rem, 0.925rem);
  line-height: 1.5;
}

.closer__inner .button {
  min-width: 12.6rem;
  min-height: 3.35rem;
  padding-inline: 2rem;
  font-size: 1.02rem;
}

@media (max-width: 960px) {
  .fit-two,
  .fit-two--reverse {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }

  .fit-two__copy {
    max-width: none;
    order: 2;
  }

  /* Media above copy on stacked layouts, except the lede (copy leads there). */
  .fit-two__media {
    order: 1;
  }

}

@media (max-width: 620px) {
  .how__grid {
    grid-template-columns: 1fr;
    max-width: 22rem;
    gap: 2.4rem;
  }

  .how__step {
    padding-block: 0;
  }

  .how__step + .how__step {
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.28);
    padding-top: 2.4rem;
  }

  .how__step p {
    max-width: 20rem;
  }
}

/* ===========================================================
   Revised homepage copy (2026-07-30)
   Hero subhead, the "bandwidth problem" beat, sourced stat
   lines, and the customer testimonial band.
   =========================================================== */

/* Hero: the line that used to be "Meet Teeej." inside the h1, now its own
   step between headline and body copy. */
.hero-beat .hero-subhead {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

/* "Scroll to see how it works" is longer than the old "Scroll to explore".
   The cue is absolutely positioned at left:50%, so its shrink-to-fit width is
   capped at half the hero — without this it wraps to two lines on mobile. */
.scroll-cue {
  white-space: nowrap;
}

/* Condensed retention stat on the Insight card. Reveals with the rest of the
   card detail, but sits a step quieter than the blurb so the numbers read as
   supporting evidence rather than a second headline. */
.agent-card__detail-stat {
  margin: 0.75rem auto 0;
  max-width: 17.5rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.715rem, 0.8vw, 0.785rem);
  line-height: 1.4;
}

.agent-card.is-active .agent-card__detail-stat {
  opacity: 1;
  max-height: 9rem;
  transform: translateY(0);
}

/* The empathy beat that lands just before the lede's CTA. */
.fit-two__copy .fit-beat {
  color: var(--ink);
  font-size: clamp(0.9rem, 0.2vw + 0.84rem, 1rem);
  line-height: 1.48;
}

.fit-two__copy .fit-beat--punch {
  margin-top: -0.25rem;
  font-weight: 700;
  font-size: clamp(1rem, 0.3vw + 0.92rem, 1.15rem);
  letter-spacing: -0.015em;
}

/* The three example asks under "Just Ask Teeej". They are things a gym owner
   would actually say out loud, so they get to look spoken: one per line, set
   off from the body copy, marked by the accent rather than a bullet. */
.fit-asks {
  margin: 1.35rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.fit-asks li {
  padding-left: 0.95rem;
  border-left: 2px solid rgba(241, 105, 8, 0.5);
  color: var(--ink);
  font-size: clamp(0.95rem, 0.2vw + 0.88rem, 1.08rem);
  font-weight: 600;
  line-height: 1.35;
}

/* The payoff line after the asks — a shade larger than body copy so the block
   lands rather than trailing off. */
.fit-two__copy .fit-close {
  margin-top: 1.35rem;
  color: var(--ink);
  font-size: clamp(0.95rem, 0.2vw + 0.88rem, 1.08rem);
  font-weight: 600;
}

/* Sourced industry-data lines. Deliberately quieter than body copy so the
   attribution reads as a footnote, not a claim competing with the pitch. */
.fit-two__copy .fit-stat {
  margin-top: 1.5rem;
  padding-left: 0.95rem;
  border-left: 2px solid rgba(241, 105, 8, 0.5);
  color: var(--ink-muted);
  font-size: clamp(0.79rem, 0.12vw + 0.75rem, 0.845rem);
  line-height: 1.52;
}

/* Customer testimonial — its own copy + photo row just above the FAQ, built on
   the same .fit-split / .fit-two grid as the other two-column sections. It is a
   <figure>, so it carries the browser's default margin until reset here. */
.testimonial {
  margin: 0;
}

/* The quote runs long, so this row gets a slightly more even split than the
   0.88/1.12 default — otherwise the copy column towers over the photo. Scoped
   above the 960px breakpoint so it can't override the mobile single-column
   stack, which is defined earlier in this file. */
@media (min-width: 961px) {
  .testimonial-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .testimonial.fit-two__copy {
    max-width: 40rem;
  }
}

.testimonial__quote {
  margin: 0;
}

/* Warren's quote runs multiple paragraphs (2026-08-25 copy from Swish). */
.testimonial__quote p {
  margin: 0 0 1em;
}

.testimonial__quote p:last-child {
  margin-bottom: 0;
}

.testimonial__cite {
  margin-top: 1.75rem;
  color: var(--ink);
  font-size: clamp(0.95rem, 0.2vw + 0.89rem, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

@media (max-width: 720px) {
  .hero-beat .hero-subhead {
    font-size: 1.05rem;
  }

  .agent-card__detail-stat {
    max-width: none;
  }

  /* The hero eyebrows now carry the long line of each beat, so on phones the
     pill has to wrap instead of overflowing its 999px radius. */
  .eyebrow {
    max-width: 100%;
    border-radius: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
}

/* "Get Started" (2026-08-03) — four steps instead of three, and each step now
   carries a name under its number, so the h3 splits into two sized lines. */
/* Scoped to min-width so it can't outrank the single-column rule at 620px,
   which is declared earlier in this file. */
@media (min-width: 901px) {
  .how__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1180px;
  }
}

.how__step h3 {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  font-size: inherit;
}

.how__step-num {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.how__step-name {
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.how__step p {
  max-width: 16rem;
}

/* Four across is too tight below ~900px; drop to two and keep one divider
   between the columns rather than the single-file border chain. */
@media (max-width: 900px) and (min-width: 621px) {
  .how__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 42rem;
    row-gap: 2.8rem;
  }

  .how__step + .how__step {
    border-left: 0;
  }

  .how__step:nth-child(even) {
    border-left: 1px solid rgba(0, 0, 0, 0.32);
  }
}

/* ===========================================================
   No widows (standing rule, 2026-08-03)
   Never leave a lone word on the last line of a heading or a
   paragraph. Handled here so it holds for every page and every
   future copy edit, rather than being patched string by string.
   Applies to all five pages — they share this stylesheet.
   =========================================================== */

/* Balance evens every line of a block, which is what actually prevents a
   stranded last word. `text-wrap: pretty` was tried first and is too weak —
   it still left "talk to." alone under the hero headline at 1920px. Balance
   is a no-op when the text already fits on one line, so it is safe here. */
h1,
h2,
h3,
h4,
p,
li,
figcaption,
.eyebrow {
  text-wrap: balance;
}

/* Balance is silently ignored past ~6 lines (verified in-browser: the 8-line
   pull-quote does not change). Long-form blocks fall back to `pretty` and
   bind their final words with &nbsp; in the markup instead. */
.testimonial__quote p {
  text-wrap: pretty;
}

/* ===========================================================
   Pricing + Message from the founders (2026-08-03)
   Two sections between the Warren testimonial and the FAQ.
   Homepage only — no other page includes this markup.
   =========================================================== */

.pricing {
  background: #d3d1cd;
  color: #191919;
  padding: clamp(4rem, 6.5vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.pricing__title {
  margin: 0 0 clamp(2.6rem, 4.5vw, 4rem);
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  letter-spacing: -0.045em;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: clamp(1.6rem, 1.8vw, 2.1rem) clamp(1.2rem, 1.5vw, 1.7rem)
    clamp(1.8rem, 2.2vw, 2.4rem);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(12, 18, 28, 0.13);
}

/* The featured card takes the SAME top padding as the other three. It used to
   get extra head room for its tab, which pushed its head — and the rule under
   it — about 1.4rem below the divider on the cards either side. Keeping the
   four rules flush is worth the tighter tab; the badge is sized below to sit
   inside this padding rather than demand its own band. */
.plan--featured {
  box-shadow: 0 24px 60px rgba(12, 18, 28, 0.2);
}

.plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 62%;
  /* Slim enough to clear the card's own top padding (1.6rem at its tightest)
     so the tab never rides down onto "Growth". */
  padding: 0.22rem 1.4rem;
  border-radius: 0 0 0.7rem 0.7rem;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.plan__head {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  text-align: center;
}

.plan__name {
  margin: 0 0 0.85rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 1.9vw, 1.95rem);
  letter-spacing: -0.04em;
}

.plan__price {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  /* Always reserve two lines. Matching the top padding alone is not enough to
     keep the four rules flush: the three priced plans wrap to two lines while
     Enterprise's "Custom pricing, quoted individually" fits on one below about
     1400px, which lifted its divider a full line above the rest. `em` fallback
     first for anything without `lh`. */
  min-height: 2.9em;
  min-height: 2lh;
}

.plan__rate {
  color: var(--accent);
}

/* Location allowance sits with the price, not buried at the card's foot
   (Swish, 2026-08-25). One line on every card keeps the head dividers flush. */
.plan__locations {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

.plan__body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.plan__feature h4 {
  margin: 0 0 0.2rem;
  color: var(--accent);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan__feature p,
.plan__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.pricing__footnote {
  margin-top: clamp(2.2rem, 3.5vw, 3.2rem);
  text-align: center;
}

.pricing__footnote p {
  margin: 0;
  font-size: 0.95rem;
}

.pricing__beta {
  margin-bottom: 0.35rem !important;
  font-weight: 700;
}

.founders {
  background: #ffffff;
  padding: clamp(3.6rem, 6vw, 5.6rem) 0 clamp(3.6rem, 6vw, 5.6rem);
}

.founders__title {
  margin: 0 0 clamp(2rem, 3.4vw, 3rem);
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -0.045em;
}

/* Fills the section shell (--max-width, 1220px) rather than a narrower
   column. At 62rem several paragraphs broke one word past the line and left a
   stranded tail; at the shell width every paragraph fills 96%+ of the measure
   with no widows, which is the even right edge the comp shows. */
.founders__copy {
  display: flex;
  flex-direction: column;
  /* One gap for every paragraph. At 1.5rem this equalled a full line of
     leading (line-height lands at ~24px), which read loose; 1.1rem is about
     three-quarters of a line — still an unmistakable paragraph break. */
  gap: 1.1rem;
}

.founders__copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
  /* Long-form prose wraps naturally so every line fills the measure. The
     site-wide `balance` evens each paragraph instead, which across a stack of
     paragraphs reads as an erratic right edge — some filling the column, some
     stopping two-thirds across. Widows here are handled with &nbsp; on the one
     paragraph that needs it. */
  text-wrap: pretty;
}


@media (max-width: 1080px) {
  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 46rem;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 24rem;
  }
}