/* Layered Health — tokens from the Layered Health design system */
:root {
  --surface: #f2ede4;
  --surface-raised: #faf7f2;
  --surface-sunk: #e8e1d5;
  --ink: #2b2a28;
  --ink-muted: #56616f;
  --slate: #8a97a8;
  --rose: #d4a5a0;
  --sage: #93a382;
  --on-color: #2b2a28;
  --action: #2b2a28;
  --on-action: #f2ede4;
  --hairline: #ddd5c8;
  --focus-ring: #2b2a28;

  --font-display: "Unbounded", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-md: 12px; --radius-pill: 999px;

  --gutter: clamp(20px, 4vw, 56px);
  --shadow-layer: 0 8px 0 -2px #e8e1d5, 0 8px 0 -1px #ddd5c8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface-sunk); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.lockup img { display: block; height: 43.6px; width: auto; }
/* The lockup is the outlined brand file (assets/layered-health-lockup.svg):
   mark as tall as the text block, gap = cap height of HEALTH,
   PSYCHOTHERAPY tracked to end flush with HEALTH. */
.site-nav { display: flex; gap: clamp(20px, 3vw, 40px); }
.site-nav a {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-muted);
}
.site-nav a:hover { color: var(--ink); }

/* ---------- Home hero ---------- */
.bg-layers.in-color { opacity: 1; top: auto; bottom: 62px; transform: none; width: min(612.5px, 42.5vw); height: auto; aspect-ratio: 612.5 / 288; }
.bg-layers.in-color .l1 { fill: var(--ink); }
.bg-layers.in-color .l2 { fill: var(--slate); }
.bg-layers.in-color .l3 { fill: var(--rose); }
.bg-layers.in-color .l4 { fill: var(--sage); }
.hero {
  position: relative;
  overflow: hidden;
  min-height: 510px;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(64px, 9vw, 120px);
}
.hero-copy { position: relative; z-index: 1; }
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.375rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero h1 .line-1 { text-transform: none; }
.hero h1 .line-2 {
  display: block;
  font-style: normal;
  margin-top: 5px;
  font-size: clamp(1.32rem, 3.4vw, 3.08rem);
  letter-spacing: -0.01em;
  color: var(--ink-muted);
}
.hero-sub {
  margin: clamp(48px, 7vw, 88px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
}
.hero-sub span { display: block; }
.hero-sub span + span { color: var(--ink-muted); }

/* ---------- About ---------- */
.section { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) var(--gutter); }
.section + .section { border-top: 1px solid var(--hairline); }
.bg-layers {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: min(560px, 55vw);
  right: calc(var(--gutter) * -1);
  bottom: clamp(24px, 4vw, 56px);
  opacity: 0.9;
}
.bg-layers .l1 { fill: #e3dccf; }
.bg-layers .l2 { fill: #e8e1d5; }
.bg-layers .l3 { fill: #ede7dc; }
.bg-layers .l4 { fill: #e5ded2; }
.section > *:not(.bg-layers) { position: relative; z-index: 1; }
.bg-layers.colored { opacity: 1; width: min(612.5px, 42.5vw); height: auto; aspect-ratio: 612.5 / 288; }
.bg-layers.colored .l1 { fill: var(--ink); }
.bg-layers.colored .l2 { fill: var(--slate); }
.bg-layers.colored .l3 { fill: var(--rose); }
.bg-layers.colored .l4 { fill: var(--sage); }

.intro h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.375rem;
  line-height: 1.21;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intro h1 span { display: block; }
.intro .lede + .lede { margin-top: 12px; }
.intro .launch strong { font-weight: inherit; }
.intro .lede {
  margin: clamp(20px, 3vw, 32px) 0 0;
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink);
}

.meet h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.meet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 72px);
  align-items: start;
}
.bio { margin-top: -10px; }
.headshot { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3vw, 40px); }
.photo-stack { position: relative; width: 100%; padding: 0 var(--space-6) var(--space-6) 0; }
.photo-stack::before,
.photo-stack::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-md);
}
.photo-stack::before { inset: var(--space-6) 0 0 var(--space-6); background: var(--sage); }
.photo-stack::after { inset: 12px 12px 12px 12px; background: var(--rose); }
.photo-stack img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-md);
}
.button {
  display: inline-block;
  padding: 18px 40px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-action);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover { background: #1f1e1c; }
.bio { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.bio p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.85;
  color: var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-sunk);
  padding: 28px var(--gutter) 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: center;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-underline-offset: 3px;
}
.footer-links a:hover { color: var(--ink); }
.social { display: flex; gap: 10px; justify-self: end; }
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.social a:hover { background: var(--ink); color: var(--surface); }
.social a:hover img { filter: brightness(0) invert(1); opacity: 1; }
.social img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) saturate(100%); opacity: .85; }
.footer-note {
  margin: 32px 0 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.8s, transform 0.8s; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .social { justify-self: start; }
  .site-header { padding-top: 16px; padding-bottom: 16px; }
  .lockup img { height: 36.3px; }
  .hero h1 { font-size: 36.5px; } /* keeps "Self-Discovery" on one line at 390px */
  .bg-layers { width: 80vw; opacity: 0.6; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding-bottom: 38px; }
  .intro { display: flex; flex-direction: column; padding-top: 32px; padding-bottom: 21.5px; }
  .intro .launch strong { display: block; font-weight: 800; color: var(--ink-muted); }
  .intro h1 { font-size: 1.15rem; }
  .intro .lede { font-size: 14px; }
  .bg-layers.colored { position: relative; order: 3; align-self: flex-end; top: auto; bottom: auto; right: auto; transform: none; margin: 21.5px calc(var(--gutter) * -1) 0 0; width: 72vw; aspect-ratio: 720 / 284; opacity: 1; }
  .bg-layers.in-color { position: relative; order: 2; align-self: flex-end; top: auto; bottom: auto; right: auto; margin: 38px calc(var(--gutter) * -1) 0 0; width: 72vw; aspect-ratio: 720 / 284; opacity: 1; }
  .site-footer { padding: 40px var(--gutter) 32px; }
  .footer-note { margin-top: 40px; }
  .page-about .site-footer { padding: 16px var(--gutter) 10px; }
  .page-about .footer-grid { gap: 10px; }
  .page-about .footer-links { gap: 4px; }
  .page-about .footer-note { margin-top: 28px; }
}

/* ---------- Expressive type ---------- */
/* Layered headlines: a solid rose sheet offset under big display type (no blur). */
.meet h2 { text-shadow: 0.045em 0.045em 0 var(--rose); }
/* Hero: rose sheet behind + tonal ink gradient and fine grain inside the letters. */
.lh-tex { position: relative; display: inline-block; white-space: nowrap; }
.lh-tex .sheet { position: absolute; left: 0.045em; top: 0.045em; color: var(--rose); user-select: none; pointer-events: none; }
.lh-tex .face {
  position: relative; color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1' result='g'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncG type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncB type='linear' slope='0.9' intercept='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(172deg, #55504b 0%, #2b2a28 48%, #1f1e1c 100%);
  background-size: 240px 240px, 100% 100%;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text; background-clip: text;
}
@media (forced-colors: active) {
  .lh-tex .sheet { display: none; }
  .lh-tex .face { color: CanvasText; background: none; }
}

/* ===================== v2: fuller home page ===================== */

/* 3. Sticky header with a clear action */
.site-header[data-sticky] {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled { padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--hairline); }
.site-nav { align-items: center; }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .nav-cta {
  white-space: nowrap;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-action);
  letter-spacing: 0.02em;
}
.site-nav .nav-cta:hover { background: #1f1e1c; color: var(--on-action); }

/* 1. Interactive hero: each layer drifts at its own rate */
/* Each layer sways gently side to side on its own rhythm (transform),
   and drifts apart on scroll (the separate `translate` property, set by main.js). */
@keyframes lh-sway { 0% { transform: translateX(-12px); } 100% { transform: translateX(12px); } }
.hero-bands .band { animation: lh-sway 7s ease-in-out infinite alternate; will-change: transform, translate; }
.hero-bands .l2 { animation-duration: 8.5s; animation-delay: -2s; }
.hero-bands .l3 { animation-duration: 9.5s; animation-delay: -5s; }
.hero-bands .l4 { animation-duration: 7.75s; animation-delay: -3.5s; }

/* 4. One slow scrolling band of words */
.marquee {
  position: relative;
  background: var(--ink);
  color: var(--surface);
  padding: 22px 0;
  overflow: hidden;
}
.marquee-viewport { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee.is-paused .marquee-viewport,
.marquee:hover .marquee-viewport { animation-play-state: paused; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee-track li {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1;
  white-space: nowrap;
}
.marquee-track li::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 12px;
  margin: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--slate);
}
.marquee-track li:nth-child(3n+2)::after { background: var(--rose); }
.marquee-track li:nth-child(3n)::after { background: var(--sage); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-toggle {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 8px 14px;
  border: 1px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--surface);
  font: 800 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.marquee-toggle:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }

/* 2 + 5. The story, section by section, with more room and larger type */
.v2-section {
  padding: clamp(80px, 10vw, 144px) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.marquee + .v2-section { border-top: 0; }
.eyebrow {
  margin: 0 0 18px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.v2-h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.v2-display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.v2-h2-sub {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink-muted);
}
.v2-lede {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 60ch;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}
.v2-body {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.8;
}

/* How the work goes: three offset layers */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 0 28px 36px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-layer);
  overflow: hidden;
}
.step-2 { margin-top: var(--space-6); }
.step-3 { margin-top: calc(var(--space-6) * 2); }
.step-band { display: block; height: 14px; margin: 0 -28px 28px; }
.step-1 .step-band { background: var(--slate); }
.step-2 .step-band { background: var(--rose); }
.step-3 .step-band { background: var(--sage); }
.step-n { font-weight: 800; font-size: 13px; letter-spacing: 0.12em; color: var(--ink-muted); }
.step h3 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.1;
}
.step p { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.7; }

/* Who Clay works with: tag cards */
.who-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.who-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 180px;
  padding: 26px 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: box-shadow 0.25s ease;
}
.who-card:hover { box-shadow: var(--shadow-layer); }
.who-card h3 {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.15;
}
.tag {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--sage);
  color: var(--on-color);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Meet Clay teaser */
.meet-teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.text-link {
  display: inline-block;
  margin-top: 28px;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  text-underline-offset: 4px;
}
.text-link::after { content: " \2192"; }

/* Launching Summer 2027 */
.launch-cta { position: relative; overflow: hidden; background: var(--surface-sunk); border-top: 0; }
.launch-copy { position: relative; z-index: 1; max-width: 56%; }
.launch-cta .button { margin-top: 36px; }
.cta-bands {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(520px, 40vw);
  height: auto;
  aspect-ratio: 720 / 284;
  z-index: 0;
}
.cta-bands .l1 { fill: var(--ink); }
.cta-bands .l2 { fill: var(--slate); }
.cta-bands .l3 { fill: var(--rose); }
.cta-bands .l4 { fill: var(--sage); }
.launch-cta + .site-footer, main + .site-footer { border-top: 1px solid var(--hairline); }

/* Phones */
@media (max-width: 720px) {
  .site-nav { gap: 14px; }
  .site-nav .nav-cta { padding: 10px 13px; font-size: 13px; }
  .marquee-toggle { right: 12px; padding: 6px 10px; font-size: 11px; }
  .steps, .who-cards { grid-template-columns: 1fr; }
  .step-2, .step-3 { margin-top: 0; }
  .step-2 { margin-left: var(--space-6); }
  .step-3 { margin-left: calc(var(--space-6) * 2); }
  .who-card { min-height: 0; }
  .meet-teaser { grid-template-columns: 1fr; }
  .launch-copy { max-width: none; }
  .cta-bands { position: relative; display: block; top: auto; transform: none; width: 72vw; margin: 0 calc(var(--gutter) * -1) 40px auto; }
}

/* Motion off for people who ask for less */
@media (prefers-reduced-motion: reduce) {
  .marquee-viewport { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-track[aria-hidden="true"], .marquee-toggle { display: none; }
  .marquee-track { flex-wrap: wrap; padding: 0 var(--gutter); row-gap: 14px; }
  .hero-bands .band { animation: none; transform: none; translate: none !important; }
  .site-header[data-sticky] { transition: none; }
}

/* Layered headlines: a solid rose sheet offset under the big display type (no blur) */
.launch-cta .v2-display {
  text-shadow: 0.045em 0.045em 0 var(--rose);
}

/* ===================== Sheets, press buttons, logo tab ===================== */
:root {
  --tint-rose: #f3e3df;
  --tint-slate: #e1e5eb;
  --tint-sage: #e3e8da;
  --sheet-r: clamp(28px, 4vw, 56px);
  --sheet-edge: 0 -1px 0 rgba(43, 42, 40, 0.10);
}

/* 1. Sections are stacked sheets: each rounds up over the one before it */
main > .v2-section {
  position: relative;
  border-top: 0;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  margin-top: calc(var(--sheet-r) * -1);
  padding-bottom: calc(clamp(80px, 10vw, 144px) + var(--sheet-r));
  box-shadow: var(--sheet-edge);
}
main > .why { background: var(--tint-rose); }
main > .how { background: var(--surface); }
main > .who { background: var(--tint-slate); }
main > .meet-teaser { background: var(--tint-sage); }
main > .launch-cta { background: var(--surface-raised); }
.page-about .section + .section {
  border-top: 0;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  margin-top: calc(var(--sheet-r) * -1);
  background: var(--tint-slate);
  box-shadow: var(--sheet-edge);
}
main + .site-footer,
.launch-cta + .site-footer {
  position: relative;
  border-top: 0;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  margin-top: calc(var(--sheet-r) * -1);
  box-shadow: var(--sheet-edge);
}

/* 2. Buttons sit on a solid rose edge and press down into it */
.button,
.site-nav .nav-cta {
  position: relative;
  border: 2px solid var(--ink);
  box-shadow: 0 5px 0 0 var(--rose);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.button:hover, .button:focus-visible,
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible {
  transform: translateY(5px);
  box-shadow: 0 0 0 0 var(--rose);
}
.button:active, .site-nav .nav-cta:active { transform: translateY(5px); box-shadow: none; }
/* Cards keep a crisp colored edge instead of a soft shadow */
.step { box-shadow: 0 6px 0 0 var(--hairline); border: 1px solid var(--hairline); }
.step-1 { box-shadow: 0 6px 0 0 var(--slate); }
.step-2 { box-shadow: 0 6px 0 0 var(--rose); }
.step-3 { box-shadow: 0 6px 0 0 var(--sage); }
.who-card { box-shadow: 0 6px 0 0 var(--rose); }
.who-card:nth-child(2) { box-shadow: 0 6px 0 0 var(--sage); }
.who-card:nth-child(3) { box-shadow: 0 6px 0 0 var(--slate); }
.who-card:hover { box-shadow: 0 6px 0 0 var(--rose); }
.who-card:nth-child(2):hover { box-shadow: 0 6px 0 0 var(--sage); }
.who-card:nth-child(3):hover { box-shadow: 0 6px 0 0 var(--slate); }

/* let the swaying layers travel past the art box instead of being clipped flat */
.hero-bands, .cta-bands { overflow: visible; }

/* ===================== Round 2 edits ===================== */
/* Header: lockup back on the left; About + Contact Clay as a pair of press buttons */
.site-nav { gap: 12px; }
.site-nav .nav-btn {
  position: relative;
  white-space: nowrap;
  padding: 11px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-action);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 5px 0 0 var(--rose);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.site-nav .nav-secondary { box-shadow: 0 5px 0 0 var(--slate); }
.site-nav .nav-btn:hover, .site-nav .nav-btn:focus-visible { color: var(--on-action); background: #1f1e1c; transform: translateY(5px); box-shadow: 0 0 0 0 transparent; }
.site-nav .nav-btn:active { transform: translateY(5px); box-shadow: none; }

/* Tighter sections */
main > .v2-section {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: calc(clamp(48px, 6vw, 88px) + var(--sheet-r));
}
.v2-lede { margin-top: clamp(18px, 2vw, 28px); }
.steps, .who-cards { margin-top: clamp(28px, 3vw, 44px); }
.hero { min-height: 0; padding-bottom: calc(clamp(48px, 6vw, 80px) + var(--sheet-r)); }
.page-about .section { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.page-about .section + .section { padding-top: calc(clamp(40px, 5vw, 72px) + 8px); }
.launch-cta .button { margin-top: 28px; }

/* Why: copy beside a layered video frame */
.nw { white-space: nowrap; }
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.why .v2-h2 { max-width: none; }
.why-media { margin: 0; }
.media-stack { position: relative; padding: 0 18px 18px 0; }
.media-stack::before, .media-stack::after { content: ""; position: absolute; border-radius: var(--radius-md); }
.media-stack::before { inset: 18px 0 0 18px; background: var(--sage); }
.media-stack::after { inset: 9px 9px 9px 9px; background: var(--rose); }
.why-video { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: #1b1d24; }
.video-toggle {
  position: absolute; z-index: 2; right: 32px; bottom: 32px;
  padding: 7px 12px; border: 1px solid rgba(242, 237, 228, 0.7); border-radius: var(--radius-pill);
  background: rgba(43, 42, 40, 0.55); color: var(--surface);
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.video-toggle:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }

/* How: three equal steps */
.steps { align-items: stretch; grid-auto-rows: 1fr; }
.step-2, .step-3 { margin-top: 0; margin-left: 0; }

/* Smaller headshots */
.meet-teaser { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.meet-teaser .photo-stack { max-width: 340px; }
.page-about .headshot .photo-stack { max-width: 340px; }

@media (max-width: 720px) {
  .site-nav { gap: 8px; }
  .site-nav .nav-btn { padding: 9px 12px; font-size: 13px; box-shadow: 0 4px 0 0 var(--rose); }
  .site-nav .nav-secondary { box-shadow: 0 4px 0 0 var(--slate); }
  .lockup img { height: 32px; }
  .why { grid-template-columns: 1fr; }
  .why .v2-h2 { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .step-2, .step-3 { margin-left: 0; }
  .meet-teaser { grid-template-columns: 1fr; }
  .meet-teaser .photo-stack, .page-about .headshot .photo-stack { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-btn { transition: none; }
}

/* ===================== Round 3 edits ===================== */
:root {
  --h2-v2: clamp(1.6rem, 3.1vw, 2.5rem);      /* section headers, 2/3 of the old size */
  --text-v2: 1.05rem;                           /* lede + body copy in sections */
}
/* Hero fills a typical first screen */
.hero { min-height: min(calc(100vh - 88px), 780px); }
/* Layer by Layer: slate face with the same grain + rose sheet as Self-Discovery */
.hero h1 .lh-tex.lh-slate { display: block; width: max-content; }
.lh-slate .face {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1' result='g'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncG type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncB type='linear' slope='0.9' intercept='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(172deg, #66717f 0%, #56616f 50%, #4a5460 100%);
  background-blend-mode: soft-light, normal;
}

/* One header size and one text size across sections */
.v2-section .v2-h2 { font-size: var(--h2-v2); line-height: 1.08; }
.why .v2-lede, .who .v2-lede, .who .v2-body { font-size: var(--text-v2); line-height: 1.7; max-width: 62ch; }
.who .v2-body { margin-top: 14px; }

/* Why: video runs the full height of the copy, a little narrower */
.why { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: stretch; }
.why-media, .why-media .media-stack { height: 100%; }
.why-video { height: 100%; aspect-ratio: auto; min-height: 260px; }

/* Who cards: names centered in the space under the tag, on matching lines */
.who-card { min-height: 170px; }
.who-card h3 { margin: auto 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.2; }

/* Launch: half-size headline, header-size button, sign-up form */
.launch-cta .v2-display { font-size: clamp(1.6rem, 3.2vw, 2.625rem); }
.launch-cta .v2-h2-sub { margin-top: 10px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.button.button-sm {
  margin-top: 22px;
  padding: 11px 20px;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.updates {
  margin-top: 36px;
  max-width: 600px;
  padding: 24px 26px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 6px 0 0 var(--sage);
}
.updates-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1.2; }
.updates-note { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-muted); }
.updates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 800; font-size: 13px; letter-spacing: 0.02em; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.field input, .field select {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid #c9c0b2;
  border-radius: 10px;
  background: #fffdf9;
  color: var(--ink);
  font: 400 15px/1.3 var(--font-sans);
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: #b4534a; }
.field-submit { justify-content: flex-end; }
.field-submit .button { margin-top: 0; width: 100%; }
.updates-status { margin: 12px 0 0; font-size: 0.92rem; min-height: 1.2em; }
.launch-copy { max-width: min(600px, 52%); }

/* About page: same header and text sizes as the home page; headshot centered against the bio */
.page-about .intro h1, .page-about .meet h2 { font-size: var(--h2-v2); line-height: 1.12; }
.page-about .intro .lede, .page-about .bio p { font-size: var(--text-v2); line-height: 1.7; }
.page-about .meet-grid { align-items: center; margin-top: clamp(28px, 3vw, 44px); }
.page-about .bio { margin-top: 0; }

@media (max-width: 720px) {
  .hero { min-height: min(calc(100svh - 66px), 700px); }
  .why { grid-template-columns: 1fr; }
  .hero .bg-layers.in-color { margin-top: auto; }
  .why .v2-h2 { font-size: var(--h2-v2); }
  .why-video { height: auto; aspect-ratio: 4 / 5; }
  .why-media, .why-media .media-stack { height: auto; }
  .who-card { min-height: 0; }
  .launch-copy { max-width: none; }
  .updates { padding: 20px 18px 18px; }
  .updates-grid { grid-template-columns: 1fr; }
}

/* About page Contact Clay matches the header buttons */
.page-about .headshot .button { padding: 11px 20px; font-size: 15px; letter-spacing: 0.02em; text-transform: none; }

/* Who: portrait in a layered, organic shape beside the copy */
.who-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.who-art { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.who-art svg { display: block; width: 100%; height: auto; }
.who-art .wb-sage { fill: var(--sage); }
.who-art .wb-rose { fill: var(--rose); }
@media (max-width: 720px) {
  .who-top { grid-template-columns: 1fr; }
  .who-art { max-width: 300px; }
}

.updates .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ===================== Round 4 edits ===================== */
/* Hero: more room on top, a third less below; bands centered on the headline */
.hero { min-height: 0; padding-top: clamp(56px, 8vw, 116px); padding-bottom: calc(clamp(90px, 13vw, 190px) + var(--sheet-r)); }
.hero-copy { position: relative; }
.hero-head { position: static; }
.hero-head .bg-layers.in-color { position: absolute; top: 50%; bottom: auto; right: calc(var(--gutter) * -1); transform: translateY(-50%); z-index: 0; }
.hero-head h1 { position: relative; z-index: 1; }

/* Why: bigger headline, taller video */
.why .v2-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.why-copy { align-self: center; }
.why-video { min-height: clamp(380px, 36vw, 520px); }

/* Who: half the space on top; copy sits a little lower under the headline */
main > .who { padding-top: clamp(24px, 3vw, 44px); }
.who .v2-lede { margin-top: clamp(26px, 2.6vw, 36px); }
.who .v2-body { margin-top: 18px; }

/* Launch: headline on one line, no button */
.launch-cta .v2-display { white-space: nowrap; }
.launch-copy { max-width: none; }
.launch-cta .updates { margin-top: 28px; }

/* About: more space under the intro and under Meet Clay; bio wraps around the photo */
.page-about .intro { padding-bottom: calc(clamp(40px, 5vw, 72px) + 40px); }
.page-about .meet { padding-bottom: calc(clamp(40px, 5vw, 72px) + 40px); }
.page-about .meet-wrap { margin-top: clamp(36px, 3.6vw, 52px); max-width: 940px; }
.page-about .meet-wrap::after { content: ""; display: block; clear: both; }
.page-about .meet-wrap .headshot { float: left; width: 300px; margin: 6px clamp(32px, 4vw, 56px) 20px 0; gap: 24px; }
.page-about .meet-wrap .headshot .photo-stack { max-width: none; }
.page-about .meet-wrap > p { margin: 0 0 22px; max-width: none; font-size: var(--text-v2); line-height: 1.75; }
.page-about .meet-wrap > p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .hero { padding-top: 40px; padding-bottom: calc(48px + var(--sheet-r)); }
  .hero-copy, .hero-head { display: contents; }
  .hero-head h1 { order: 0; }
  .hero-sub { order: 1; }
  .hero-head .bg-layers.in-color { position: relative; order: 2; top: auto; transform: none; right: auto; margin: 32px calc(var(--gutter) * -1) 0 0; }
  .why .v2-h2 { font-size: clamp(1.7rem, 7.8vw, 2.2rem); }
  .why-video { min-height: 0; }
  .launch-cta .v2-display { font-size: 5.3vw; }
  .page-about .meet-wrap .headshot { float: none; width: auto; max-width: 280px; margin: 0 auto 28px; }
}

/* ===================== Round 5 edits ===================== */
main > .why { padding-top: clamp(24px, 3vw, 44px); padding-bottom: calc(clamp(24px, 3vw, 44px) + var(--sheet-r)); }
.why .v2-lede { max-width: none; }
.page-about .intro { padding-bottom: calc(clamp(40px, 5vw, 72px) + 76px); }
@media (min-width: 721px) {
  .page-about .meet > h2, .page-about .meet-wrap { margin-left: clamp(24px, 4vw, 64px); }
  .page-about .meet-wrap .headshot { margin-right: clamp(44px, 5vw, 72px); }
}
@media (max-width: 1199px) { .br-d { display: none; } }

/* ===================== Round 6: phone polish ===================== */
.br-m { display: none; }
@media (max-width: 720px) {
  .br-m { display: inline; }
  .page-about .intro h1 { font-size: 1.5rem; line-height: 1.18; }
  .page-about .meet h2 { font-size: 1.75rem; line-height: 1.1; }
  .why-video { aspect-ratio: 5 / 4; }
  .page-about .site-footer { padding-top: 44px; }
}

/* ===================== Round 7 ===================== */
/* Header buttons a third smaller on phones only */
@media (max-width: 720px) {
  .site-nav { gap: 6px; }
  .site-nav .nav-btn { padding: 6px 9px; font-size: 11px; box-shadow: 0 3px 0 0 var(--rose); }
  .site-nav .nav-secondary { box-shadow: 0 3px 0 0 var(--slate); }
  .site-nav .nav-btn:hover, .site-nav .nav-btn:focus-visible, .site-nav .nav-btn:active { transform: translateY(3px); }
  /* About: half the gap between the bands and Meet Clay */
  .page-about .intro { padding-bottom: 72px; }
}

/* ===================== v3: full-bleed video hero ===================== */
.hero.hero-video {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: clamp(560px, calc(100svh - 88px), 920px);
  padding: 0;
  overflow: hidden;
  background: #1c1d22;
  color: var(--surface);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; filter: brightness(1.25); }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(24, 23, 22, 0.62) 0%, rgba(24, 23, 22, 0.30) 40%, rgba(24, 23, 22, 0) 68%),
    linear-gradient(0deg, rgba(24, 23, 22, 0.58) 0%, rgba(24, 23, 22, 0) 55%);
}
.hero.hero-video .hero-copy {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 0 var(--gutter) calc(clamp(12px, 1.8vw, 26px) + var(--sheet-r));
}
.hero.hero-video h1 { font-size: clamp(2rem, 4vw, 3.5rem); color: var(--surface); }
.hero.hero-video h1 .line-2 { font-size: clamp(1.15rem, 2.5vw, 2.35rem); margin-top: 6px; }
/* Light faces on the video; the rose sheet still sits behind */
.hero.hero-video .lh-tex .face { background-image: linear-gradient(172deg, #ffffff 0%, #f2ede4 55%, #e3dccf 100%); }
.hero.hero-video .lh-slate .face { background-image: linear-gradient(172deg, #d3dae3 0%, #b3bdca 55%, #9eaabb 100%); }
.hero.hero-video .lh-tex .sheet { color: rgba(212, 165, 160, 0.9); }
.hero.hero-video .hero-sub { margin-top: clamp(22px, 2.6vw, 34px); font-size: clamp(0.95rem, 1.15vw, 1.1rem); color: var(--surface); }
.hero.hero-video .hero-sub span + span { color: #c9d0da; }
.hero-mark { display: block; width: clamp(80px, 7.5vw, 116px); height: auto; margin-top: clamp(24px, 2.8vw, 36px); }
.hero-toggle {
  position: absolute; z-index: 2; right: var(--gutter); bottom: calc(var(--sheet-r) + 22px);
  padding: 7px 12px; border: 1px solid rgba(242, 237, 228, 0.7); border-radius: var(--radius-pill);
  background: rgba(43, 42, 40, 0.45); color: var(--surface);
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.hero-toggle:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }

/* Why: the layered bands take the video's place */
.why-art { align-self: center; margin-right: calc(var(--gutter) * -1); }
.why-bands { display: block; width: 100%; height: auto; aspect-ratio: 612.5 / 288; overflow: visible; }

/* Mark + "Keep me updated" button, side by side */
.hero-actions { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(24px, 2.8vw, 36px); }
.hero-actions .hero-mark { margin-top: 0; }
.hero-cta {
  display: inline-block; white-space: nowrap;
  padding: 11px 20px; border: 2px solid var(--surface); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 5px 0 0 var(--rose);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-cta:hover, .hero-cta:focus-visible { color: var(--ink); transform: translateY(5px); box-shadow: 0 0 0 0 transparent; }
.hero-cta:focus-visible { outline: 2px solid var(--surface); outline-offset: 3px; }
#keep-updated { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .hero-cta { transition: none; } }

@media (max-width: 720px) {
  .hero-cta { padding: 9px 14px; font-size: 13px; box-shadow: 0 4px 0 0 var(--rose); }
  .hero.hero-video { min-height: min(calc(100svh - 66px), 760px); }
  .hero-bg { object-position: 56% center; }
  .hero-scrim { background: linear-gradient(0deg, rgba(24, 23, 22, 0.74) 0%, rgba(24, 23, 22, 0.26) 55%, rgba(24, 23, 22, 0.04) 100%); }
  .hero.hero-video .hero-copy { padding-bottom: calc(36px + var(--sheet-r)); }
  .hero.hero-video h1 { font-size: 30px; }
  .hero.hero-video h1 .line-2 { font-size: 19px; }
  .hero-toggle { right: 12px; bottom: calc(var(--sheet-r) + 12px); }
  .why-art { width: 80vw; justify-self: end; margin-top: 8px; }
}

/* ===================== v3 round 2 ===================== */
/* Header buttons a little smaller on desktop */
@media (min-width: 721px) {
  .site-nav .nav-btn { padding: 9px 17px; font-size: 14px; }
}
/* Why: a taller section */
main > .why { padding-top: clamp(56px, 6.5vw, 96px); padding-bottom: calc(clamp(56px, 6.5vw, 96px) + var(--sheet-r)); }
/* Expertise cards: no tag, names centered */
.who-card { min-height: 150px; justify-content: center; }
.who-card h3 { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.25; }
/* Process headline on one line */
.how .v2-h2.one-line { max-width: none; }
@media (min-width: 900px) { .how .v2-h2.one-line { white-space: nowrap; } }
/* Meet the founder: photo and copy shifted left */
.meet-teaser { gap: clamp(36px, 4vw, 60px); }
@media (min-width: 721px) { .meet-teaser .photo-stack { margin-left: -16px; } }
/* Launch: smaller headline, nested layered form instead of the band mark */
.launch-cta .v2-display { font-size: clamp(1.45rem, 2.7vw, 2.2rem); }
.launch-cta .updates { margin-top: 32px; }
.launch-art { position: absolute; right: clamp(24px, 6vw, 110px); top: 50%; transform: translateY(-50%); width: min(400px, 30vw); height: auto; z-index: 0; }
@media (max-width: 720px) {
  .launch-art { position: relative; display: block; right: auto; top: auto; transform: none; width: 56vw; margin: 0 0 32px auto; }
}
@media (max-width: 720px) { .launch-cta .v2-display { font-size: 5.3vw; } }

/* Meet the founder: copy shifted right in its pane */
@media (min-width: 721px) {
  .meet-teaser .photo-stack { margin-left: clamp(24px, 4vw, 72px); }
  .meet-teaser .meet-copy { padding-left: clamp(56px, 8vw, 140px); }
}
/* Founder name a step smaller */
.meet-teaser .v2-h2 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }

/* Process headline: more air between the three words */
.how .v2-h2.one-line { word-spacing: 0.4em; }
/* Launch: tilted mark larger, centered beside the headline + form */
@media (min-width: 721px) {
  .launch-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 5vw, 80px); }
  .launch-cta .launch-copy { order: 1; max-width: 600px; }
  .launch-cta .launch-art { order: 2; position: static; transform: none; width: min(500px, 36vw); height: auto; margin-right: clamp(0px, 3vw, 56px); }
}
/* Launch copy + form nudged right; header buttons spaced and pulled in from the edge */
@media (min-width: 721px) {
  .launch-cta .launch-copy { margin-left: clamp(24px, 4vw, 72px); }
  .site-header .site-nav { gap: 16px; margin-right: clamp(12px, 2vw, 32px); }
}
/* Why: bands centered on the copy; section a touch shorter */
.why-media.why-art { height: auto; align-self: center; }
main > .why { padding-top: clamp(44px, 5vw, 76px); padding-bottom: calc(clamp(44px, 5vw, 76px) + var(--sheet-r)); }
@media (min-width: 721px) { .site-header .site-nav { gap: 24px; } }
/* Why: copy nudged right in its panel */
@media (min-width: 721px) { .why .why-copy { margin-left: clamp(24px, 4vw, 72px); } }
/* Header: a sheet with rounded bottom corners; the hero video runs up behind it */
.site-header { border-bottom: 0; border-radius: 0 0 var(--sheet-r) var(--sheet-r); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--hairline); }
.hero.hero-video { margin-top: calc(var(--sheet-r) * -1); min-height: calc(clamp(560px, calc(100svh - 88px), 920px) + var(--sheet-r)); }
@media (max-width: 720px) { .hero.hero-video { min-height: calc(min(calc(100svh - 66px), 760px) + var(--sheet-r)); } }
.site-header, .site-header.is-scrolled { box-shadow: 0 1px 0 rgba(43, 42, 40, 0.12); }

/* About: Keep me updated under the launch line; photo + bio shifted right, heading stays */
.page-about .about-cta { display: inline-block; position: relative; margin-top: 28px; }
@media (min-width: 721px) { .page-about .meet-wrap { margin-left: clamp(64px, 9vw, 150px); } }
.page-about .about-cta { align-self: flex-start; }

/* ===================== Blog post ===================== */
.page-post .post { padding-top: clamp(40px, 6vw, 88px); padding-bottom: calc(clamp(56px, 7vw, 96px) + var(--sheet-r, 0px)); }
.post-head, .post-body { max-width: 58ch; margin-left: auto; margin-right: auto; font-size: var(--text-v2); }
.post-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--h2-v2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: 0.045em 0.045em 0 var(--rose);
}
.post-meta { margin: 16px 0 0; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink-muted); }
.post-body { margin-top: clamp(32px, 4vw, 48px); font-size: var(--text-v2); line-height: 1.75; }
.post-body h2 {
  margin: clamp(40px, 5vw, 56px) 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { margin: 28px 0 8px; font-size: 1.1rem; font-weight: 800; line-height: 1.35; }
.post-body p { margin: 0 0 18px; }
.post-body ul { margin: 0 0 18px; padding-left: 1.25em; }
.post-body li { margin: 0 0 8px; padding-left: 0.25em; }
.post-body li::marker { color: var(--slate); }
.post-body a { text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: var(--ink); }
.post-body h2:last-of-type + ul { font-size: 0.92rem; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 720px) {
  .post-body { font-size: 1rem; line-height: 1.7; }
}
.post-body .post-cta { margin: 4px 0 0; }
.post-body .post-cta .button { margin-top: 0; }

/* ===================== Footer: blog column + LinkedIn ===================== */
.footer-blog { display: flex; flex-direction: column; gap: 8px; }
.footer-label { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: 0.02em; color: var(--ink); }
.footer-blog a { font-weight: 800; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-muted); text-underline-offset: 3px; }
.footer-blog a:hover { color: var(--ink); }
@media (min-width: 721px) {
  .footer-grid { grid-template-columns: 1fr auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); }
}
@media (max-width: 720px) {
  .page-about .footer-blog { gap: 4px; }
}

/* Blog post: background shifts between brand tints as you read (set by main.js) */
.page-post .post { background-color: var(--surface); }

/* ===================== Blog: related posts + index ===================== */
.post-related { max-width: 58ch; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--hairline); font-size: var(--text-v2); }
.post-related h2, .blog-list h2 { font-family: var(--font-display); font-weight: 900; line-height: 1.2; letter-spacing: -0.005em; }
.post-related h2 { margin: 0 0 18px; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.post-related ul, .blog-list { list-style: none; margin: 0; padding: 0; }
.post-related li + li { margin-top: 18px; }
.post-related a, .blog-list h2 a { color: var(--ink); font-weight: 800; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-related a:hover, .blog-list h2 a:hover { text-decoration-color: var(--ink); }
.post-related p { margin: 4px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-muted); }
.blog-list { max-width: 58ch; margin: clamp(32px, 4vw, 48px) auto 0; font-size: var(--text-v2); }
.blog-list li { padding: clamp(20px, 2.4vw, 28px) 0; border-top: 1px solid var(--hairline); }
.blog-list li:last-child { border-bottom: 1px solid var(--hairline); }
.blog-list h2 { margin: 4px 0 8px; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.blog-list p { margin: 0; line-height: 1.6; }
.blog-list .blog-date { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink-muted); }
.footer-blog .footer-all { margin-top: 2px; }

/* Marks that drift with scroll (main.js): keep the inline launch mark's proportions, let bands slide past the edge */
svg.launch-art { aspect-ratio: 908 / 797.6; overflow: visible; }
.why-bands g[class^="l"], .launch-art g[class^="l"] { will-change: transform; }
.page-about .intro .bg-layers g[class^="l"] { will-change: transform; }
/* About mark: smaller and inside the margin on wider screens, so the drifting bands stay in frame */
@media (min-width: 721px) {
  .page-about .intro .bg-layers.colored { width: min(440px, 32vw); right: calc(var(--gutter) + 4vw); bottom: auto; top: calc((100% - var(--sheet-r)) / 2); translate: 0 -50%; overflow: visible; }
}
/* About intro: half the space between "Keep me updated" and the next section on wider screens */
@media (min-width: 721px) {
  .page-about .intro { padding-bottom: calc((clamp(40px, 5vw, 72px) + 76px + var(--sheet-r)) / 2); }
}

/* About intro heading: same type treatment as "We are more than one thing." on the home page */
.page-about .intro h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.015em; }
.page-about .intro h1 span + span { font-size: clamp(1.2rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: normal; color: var(--ink-muted); }
.page-about .intro h1 span:nth-child(2) { margin-top: 14px; }
@media (max-width: 720px) {
  .page-about .intro h1 { font-size: clamp(1.7rem, 7.8vw, 2.2rem); line-height: 1.08; }
}

/* ===================== Mobile edits ===================== */
.hero-sub .nw { display: inline; }
@media (max-width: 720px) {
  /* Our expertise: image sits right under the heading */
  .who-top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .who-copy { display: contents; }
  .who-copy .eyebrow { order: 0; }
  .who-copy .v2-h2 { order: 1; }
  .who-top .who-art { order: 2; margin: 28px auto 4px; }
  .who-copy .v2-lede { order: 3; }
  .who-copy .v2-body { order: 4; }

  /* Meet the founder: eyebrow above a centered headshot */
  .meet-teaser { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 0; }
  .meet-teaser .meet-copy { display: contents; }
  .meet-teaser .eyebrow { order: 0; }
  .meet-teaser .photo-stack { order: 1; align-self: center; margin: 18px auto 32px; }
  .meet-teaser .text-link { align-self: flex-start; }
  .meet-teaser .meet-copy > :not(.eyebrow) { order: 2; }

  /* Launching / Summer / 2027 stacked to the left of the mark, centered with it */
  .launch-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title art" "form form"; align-items: center; column-gap: 16px; }
  .launch-cta .launch-copy { display: contents; }
  .launch-cta .v2-display { grid-area: title; margin: 0; font-size: clamp(1.45rem, 6.6vw, 2.1rem); line-height: 1.1; }
  .launch-cta .launch-art { grid-area: art; width: 36vw; margin: 0 2vw 0 0; }
  .launch-cta form.updates { grid-area: form; margin-top: 36px; }

  /* About: mark sized to stay inside the frame while its bands drift */
  .page-about .intro .bg-layers.colored { width: 62vw; margin: 28px 9vw 0 0; overflow: visible; }

  /* "One feeling. One story. We are layered." a bit larger (About and home stay matched) */
  .why .v2-h2-sub, .page-about .intro h1 span + span { font-size: 1.4rem; }
}

/* Why: second paragraph under "Layered Health was founded..." */
.why .v2-lede-more { margin-top: 16px; }
/* Who we serve: equal-height cards, contents centered, captions sized like the Why lede */
.who-cards { grid-auto-rows: 1fr; }
.who-card { justify-content: center; gap: 12px; }
.who-card h3 { margin: 0; }
.who-cap { margin: 0; font-size: var(--text-v2); line-height: 1.7; color: var(--ink); }

/* ===================== "We are" flipboard (between the hero and Why) ===================== */
/* A sage sheet like the others: it rounds up over the hero, and Why rounds up over it. */
main > .we-are {
  background: var(--sage);
  color: var(--on-color);
  padding-top: clamp(40px, 4.9vw, 70px);
  padding-bottom: calc(clamp(32px, 4.2vw, 60px) + var(--sheet-r));
}
.we-are-wrap { container-type: inline-size; }
/* --t is one tile's width. "We are" plus nine tiles and their gaps is 14.13 tile-widths wide
   (measured from Unbounded 900), so dividing the row width by 14.2 keeps everything on one
   line at every width: about 25px tiles on a 390px phone, 50px on a tablet, 78px on desktop. */
.we-are-line {
  --t: clamp(16px, calc((100vw - 2 * var(--gutter) - 4px) / 14.2), 78px); /* fallback for older browsers */
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: calc(var(--t) * 0.4);
  margin: 0;
}
@supports (width: 1cqi) {
  .we-are-line { --t: clamp(16px, calc((100cqi - 4px) / 14.2), 78px); }
}
.we-are-lead {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--t) * 0.92);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.we-are-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.we-are-board {
  grid-column: 2; grid-row: 1;
  display: flex;
  gap: calc(var(--t) * 0.08);
  padding-bottom: calc(var(--t) * 0.1);
}
.we-are-tile {
  position: relative;
  width: var(--t);
  height: calc(var(--t) * 1.32);
  border-radius: calc(var(--t) * 0.1);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 420px;
  box-shadow: 0 6px 0 -1px var(--hairline);
  transition: box-shadow 450ms ease, background-color 300ms ease;
}
.we-are-tile::after { /* the split-flap seam */
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--hairline);
  pointer-events: none;
}
.we-are-tile.is-blank { background: var(--surface-sunk); }
.we-are-glyph {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--t) * 0.7);
  line-height: 1;
  display: block;
  margin-top: -0.06em;
  color: var(--ink);
}
.we-are-glyph.flip-a { animation: weAreFlipA 80ms ease-out; }
.we-are-glyph.flip-b { animation: weAreFlipB 80ms ease-out; }
@keyframes weAreFlipA { from { transform: rotateX(-85deg); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes weAreFlipB { from { transform: rotateX(-85deg); opacity: .35; } to { transform: none; opacity: 1; } }
.we-are-toggle {
  grid-column: 1; grid-row: 2; /* under "We are" */
  justify-self: start;
  align-self: start;
  margin-top: calc(var(--t) * 0.45);
  padding: 2px 0;
  min-height: 24px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--on-color);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.we-are-toggle:hover { color: #000; }
.we-are-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .we-are-glyph.flip-a, .we-are-glyph.flip-b { animation: none; }
  .we-are-tile { transition: none; }
}

/* ===================== What we offer (under Who we serve) ===================== */
main > .offer { background: var(--surface-raised); }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(20px, 2.4vw, 32px);
}
.offer-card { display: flex; flex-direction: column; align-items: flex-start; }
.offer-photo {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 0 0 var(--hairline);
}
.offer-card:nth-child(1) .offer-photo { box-shadow: 0 8px 0 0 var(--sage); }
.offer-card:nth-child(2) .offer-photo { box-shadow: 0 8px 0 0 var(--rose); }
.offer-card .v2-h2 { margin-top: clamp(28px, 3vw, 40px); max-width: none; }
.offer-card .v2-body { margin: 16px 0 0; font-size: var(--text-v2); line-height: 1.7; max-width: 52ch; }
.offer-card .text-link { margin-top: auto; padding-top: 22px; }
@media (max-width: 720px) {
  .offer-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* New headshot is portrait: crop it to a steady frame in the home teaser */
.meet-teaser .photo-stack img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }

/* About: photo in its own column, as tall as the bio; text sits to its right instead of wrapping */
@media (min-width: 721px) {
  .page-about .meet-wrap {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    column-gap: clamp(44px, 5vw, 72px);
    align-items: stretch;
  }
  .page-about .meet-wrap::after { content: none; }
  .page-about .meet-wrap .headshot { float: none; width: auto; margin: 0; display: block; }
  .page-about .meet-wrap .headshot .photo-stack { height: 100%; }
  .page-about .meet-wrap .headshot .photo-stack img { height: 100%; min-height: 360px; object-fit: cover; object-position: center 25%; }
}
.page-about .meet-text > p { margin: 0 0 22px; font-size: var(--text-v2); line-height: 1.75; }
.page-about .meet-text .button { margin-top: 6px; padding: 11px 20px; font-size: 15px; letter-spacing: 0.02em; text-transform: none; }
@media (max-width: 720px) {
  .page-about .meet-text { text-align: left; }
}

/* ===================== What we offer page ===================== */
.page-offer main > .offer-intro { background: var(--surface); }
.page-offer main > .offer-intro .v2-h2 { max-width: 20ch; }
.page-offer main > .offer-intro .v2-lede { font-size: var(--text-v2); line-height: 1.7; max-width: 62ch; }
.page-offer main > #individual-therapy { background: var(--tint-rose); }
.page-offer main > #relationship-therapy { background: var(--tint-sage); }
.page-offer main > .offer-cta { background: var(--surface-raised); }
.offer-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  scroll-margin-top: 80px;
}
.offer-detail-flip .offer-photo { order: 2; }
.offer-detail .offer-photo { box-shadow: 0 8px 0 0 var(--ink); }
.offer-detail .v2-h2 { max-width: none; }
.offer-detail .v2-body, .offer-cta .v2-body { margin: 16px 0 0; font-size: var(--text-v2); line-height: 1.7; max-width: 58ch; }
.offer-cta .button { margin-top: 24px; padding: 11px 20px; font-size: 15px; letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .offer-detail { grid-template-columns: 1fr; }
  .offer-detail-flip .offer-photo { order: 0; }
}

/* Offer photos: amorphous shapes (the same blobs as the Who we serve portrait), a third smaller,
   each sitting on a solid offset sheet in another brand color */
.offer-blob { width: 66.67%; filter: drop-shadow(10px 10px 0 var(--sage)); }
.offer-card:nth-child(2) .offer-blob, .offer-detail-flip .offer-blob { filter: drop-shadow(10px 10px 0 var(--rose)); }
.offer-blob .offer-photo, .offer-detail .offer-blob .offer-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 0;
  box-shadow: none;
}
.offer-card:nth-child(2) .offer-mask, .offer-detail-flip .offer-mask {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 44 440 452' preserveAspectRatio='none'%3E%3Cpath d='M476.5 337.1 C459.9 384.6 404.4 428.5 356.3 453.8 C308.2 479.2 235.8 504.4 188.1 489.1 C140.4 473.9 94.3 411.6 70.1 362.4 C46.0 313.1 26.4 239.8 43.2 193.5 C59.9 147.1 122.4 107.9 170.7 84.2 C219.0 60.6 285.6 37.4 333.1 51.5 C380.6 65.5 432.0 121.0 455.9 168.6 C479.8 216.2 493.1 289.6 476.5 337.1 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 44 440 452' preserveAspectRatio='none'%3E%3Cpath d='M476.5 337.1 C459.9 384.6 404.4 428.5 356.3 453.8 C308.2 479.2 235.8 504.4 188.1 489.1 C140.4 473.9 94.3 411.6 70.1 362.4 C46.0 313.1 26.4 239.8 43.2 193.5 C59.9 147.1 122.4 107.9 170.7 84.2 C219.0 60.6 285.6 37.4 333.1 51.5 C380.6 65.5 432.0 121.0 455.9 168.6 C479.8 216.2 493.1 289.6 476.5 337.1 Z'/%3E%3C/svg%3E");
}
.offer-detail .offer-blob { width: 100%; max-width: 480px; justify-self: center; }
.offer-detail-flip .offer-blob { order: 2; }
@media (max-width: 720px) {
  .offer-detail-flip .offer-blob { order: 0; }
}
/* Individual photo: a little more headroom so she sits lower in the shape */
.offer-card:nth-child(1) .offer-blob .offer-photo, #individual-therapy .offer-blob .offer-photo { object-position: center 4%; }

/* ===================== Every section on a brand color ===================== */
/* What we offer cards: same header size as the step cards in the section below */
.offer-card .v2-h2, .v2-section .offer-card .v2-h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; }
/* Home: no plain-cream sheets; neighbors never share a color (who slate, offer sage, how rose, meet sage, launch slate) */
main > .offer { background: var(--tint-sage); }
main > .how { background: var(--tint-rose); }
main > .launch-cta { background: var(--tint-slate); }
/* About: intro on rose above the slate Meet Clay sheet */
.page-about .intro { background: var(--tint-rose); }
/* What we offer page */
.page-offer main > .offer-intro { background: var(--tint-slate); }
.page-offer main > .offer-cta { background: var(--tint-slate); }
/* Blog: the page starts on slate instead of cream (posts then fade through the tints as before) */
.page-post .post { background-color: var(--tint-slate); }
/* What we offer: the two cards sit as a centered pair on wider screens */
@media (min-width: 721px) {
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
}
/* What we offer: centered in the panel both ways. Label, photos, headers, copy and links all
   sit on each column's center line, so the pair reads as one block in the middle of the sheet. */
.offer .eyebrow { text-align: center; }
.offer-card { align-items: center; text-align: center; }
.offer-card .v2-body { margin-left: auto; margin-right: auto; }
.offer-grid { align-items: stretch; }

/* The blob mask lives on a wrapper painted in the photo's own background color, so a photo can
   slide inside its shape (e.g. to keep a head clear of the curve) without exposing an edge */
.offer-mask {
  overflow: hidden;
  background: var(--rose);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 26 452 457' preserveAspectRatio='none'%3E%3Cpath d='M471.5 294.9 C460.7 344.1 410.8 394.3 366.1 425.2 C321.4 456.1 252.5 489.8 203.3 480.4 C154.1 470.9 100.9 414.7 71.0 368.6 C41.2 322.6 13.0 252.2 24.1 204.2 C35.2 156.2 92.5 109.8 137.6 80.5 C182.8 51.2 246.0 20.2 294.9 28.5 C343.8 36.8 401.4 85.7 430.8 130.1 C460.3 174.5 482.3 245.7 471.5 294.9 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 26 452 457' preserveAspectRatio='none'%3E%3Cpath d='M471.5 294.9 C460.7 344.1 410.8 394.3 366.1 425.2 C321.4 456.1 252.5 489.8 203.3 480.4 C154.1 470.9 100.9 414.7 71.0 368.6 C41.2 322.6 13.0 252.2 24.1 204.2 C35.2 156.2 92.5 109.8 137.6 80.5 C182.8 51.2 246.0 20.2 294.9 28.5 C343.8 36.8 401.4 85.7 430.8 130.1 C460.3 174.5 482.3 245.7 471.5 294.9 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.offer-card:nth-child(2) .offer-mask, .offer-detail-flip .offer-mask { background: var(--sage); }
/* Relationship photo: the men sit a bit right and slightly lower, so the first man's head clears the curve */
.offer-card:nth-child(2) .offer-blob .offer-photo, #relationship-therapy .offer-blob .offer-photo {
  object-position: center 10%;
  transform: translate(7%, 3%);
}

/* ===================== Full headshot, uncropped ===================== */
/* Home teaser: the whole photo, no 4:5 crop */
.meet-teaser .photo-stack img { aspect-ratio: auto; object-fit: fill; }
/* About: the photo column is as wide as the uncropped photo needs to be to run the full height
   of the bio (main.js sets --photo-w from the bio's height); text sits in the column to its right */
@media (min-width: 1140px) {
  .page-about .meet-wrap { grid-template-columns: auto minmax(0, 1fr); max-width: 1120px; }
  .page-about .meet-wrap .headshot { width: var(--photo-w, 320px); }
  .page-about .meet-wrap .headshot .photo-stack img { min-height: 0; object-position: center top; }
}
/* Tablets: side by side leaves the bio too narrow, so the photo stacks above it, uncropped */
@media (min-width: 721px) and (max-width: 1139px) {
  .page-about .meet-wrap { display: block; }
  .page-about .meet-wrap .headshot { width: auto; max-width: 340px; margin: 0 0 36px; }
  .page-about .meet-wrap .headshot .photo-stack { height: auto; }
  .page-about .meet-wrap .headshot .photo-stack img { height: auto; min-height: 0; object-fit: fill; }
}
/* What we offer: label and the copy under each photo justified left (the label lines up with the
   left edge of the centered pair); photos 1.3x their previous size, still centered in each column */
.offer .eyebrow { text-align: left; width: min(100%, calc(920px + clamp(32px, 5vw, 80px))); margin-left: auto; margin-right: auto; }
.offer-card { align-items: flex-start; text-align: left; }
.offer-card .offer-blob { width: 86.67%; align-self: center; }
.offer-card .v2-body { margin-left: 0; margin-right: 0; }
/* Who we serve: on desktop, the copy and portrait start at the same inset as the Why copy (the cards stay full width) */
@media (min-width: 721px) { .who .who-top { margin-left: clamp(24px, 4vw, 72px); } }
/* What we offer: half the usual top and bottom padding (the bottom keeps room for the next sheet's rounded edge) */
main > .offer {
  padding-top: calc(clamp(48px, 6vw, 88px) / 2);
  padding-bottom: calc(clamp(48px, 6vw, 88px) / 2 + var(--sheet-r));
}
/* Meet the founder: half the usual top and bottom padding (the bottom keeps room for the next sheet's rounded edge) */
main > .meet-teaser {
  padding-top: calc(clamp(48px, 6vw, 88px) / 2);
  padding-bottom: calc(clamp(48px, 6vw, 88px) / 2 + var(--sheet-r));
}
/* Who we serve: the portrait sits a little left of center in its column on desktop */
@media (min-width: 721px) { .who-top .who-art { translate: calc(clamp(16px, 2.5vw, 40px) * -1) 0; } }
/* What we offer: more room between the two cards on desktop; the label keeps the pair's width */
@media (min-width: 721px) {
  .offer-grid { gap: clamp(80px, 12vw, 200px); }
  .offer .eyebrow { width: min(100%, calc(920px + clamp(80px, 12vw, 200px))); }
}

/* ===================== What we offer page: tighter pass ===================== */
/* Intro: header on one line and the copy on two (desktop); half the bottom spacing */
@media (min-width: 1024px) {
  .page-offer main > .offer-intro .v2-h2 { max-width: none; white-space: nowrap; }
  .page-offer main > .offer-intro .v2-lede { max-width: 92ch; }
}
.page-offer main > .offer-intro { padding-bottom: calc(clamp(48px, 6vw, 88px) / 2 + var(--sheet-r)); }
/* Other sections: half the top and bottom spacing */
.page-offer main > .offer-detail,
.page-offer main > .offer-cta {
  padding-top: calc(clamp(48px, 6vw, 88px) / 2);
  padding-bottom: calc(clamp(48px, 6vw, 88px) / 2 + var(--sheet-r));
}
/* Relationship copy starts where the Individual photo starts above it (that photo is centered,
   up to 480px wide, in the same column) */
@media (min-width: 721px) {
  .offer-detail-flip .offer-detail-copy { margin-left: max(0px, calc((100% - 480px) / 2)); }
}
/* Stacked blog links under each section's copy */
.offer-detail-copy .text-link { display: block; width: fit-content; }
.offer-detail-copy .text-link + .text-link { margin-top: 12px; }
/* Sign-up form in the closing section */
.offer-cta .updates { margin-top: 24px; }

/* ===================== "Don't want to wait until next summer?" ===================== */
.launch-now { margin-top: 18px; max-width: 600px; }
.launch-now-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.2; }
.launch-now-copy { margin: 10px 0 0; font-size: var(--text-v2); line-height: 1.7; }
/* Home, phones: the block sits between the title row and the form */
@media (max-width: 720px) {
  .launch-cta { grid-template-areas: "title art" "now now" "form form"; }
  .launch-cta .launch-now { grid-area: now; margin-top: 24px; }
  .launch-cta form.updates { margin-top: 28px; }
}
/* What we offer page: the block sits to the right of the sign-up form */
.offer-cta .launch-now { margin-top: 32px; }
@media (min-width: 900px) {
  .page-offer main > .offer-cta { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .offer-cta .launch-now { margin-top: 0; padding-top: 56px; max-width: 46ch; }
}
.offer-cta .v2-h2 { max-width: none; }
@media (min-width: 900px) { .offer-cta .v2-h2 { white-space: nowrap; } }
/* Header: Services button gets the sage edge (About is slate, Contact is rose) */
.site-nav .nav-services { box-shadow: 0 5px 0 0 var(--sage); }
@media (max-width: 720px) { .site-nav .nav-services { box-shadow: 0 3px 0 0 var(--sage); } }
/* "Don't want to wait": booking button */
.launch-now .launch-now-btn { display: inline-block; margin-top: 20px; text-decoration: none; }
/* What we offer page: the block is a card as tall as the sign-up form beside it, with its
   button resting on the bottom edge to line up with the form's own button */
@media (min-width: 900px) {
  .page-offer main > .offer-cta { grid-template-rows: auto 1fr; align-items: stretch; }
  .offer-cta .offer-cta-main { display: contents; }
  .offer-cta .offer-cta-main > .v2-h2 { grid-column: 1; grid-row: 1; }
  .offer-cta .offer-cta-main > form.updates { grid-column: 1; grid-row: 2; }
  .offer-cta .launch-now {
    grid-column: 2; grid-row: 2;
    margin-top: 24px; /* same as the form's top margin */
    padding: 24px 26px 22px;
    max-width: 520px;
    display: flex; flex-direction: column; align-items: flex-start;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 6px 0 0 var(--rose);
  }
  .offer-cta .launch-now .launch-now-btn { margin-top: auto; }
  .offer-cta .launch-now .launch-now-copy { margin-bottom: 20px; }
}
@media (min-width: 900px) { .offer-cta .launch-now { padding-bottom: 52px; } } /* room for the form's status line, so the two buttons line up */
/* What we offer page: Launching Summer 2027 gets the home page's layered rose shadow */
.offer-cta .v2-h2 { text-shadow: 0.045em 0.045em 0 var(--rose); }
/* What we offer page: the "Don't want to wait" block without the card. Its header lines up with the
   form's "Keep me updated" and stays on one line; the button sits a little above the form's button. */
@media (min-width: 900px) {
  .offer-cta .launch-now {
    padding: 24px 0 92px;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .offer-cta .launch-now-title { white-space: nowrap; font-size: clamp(1rem, 1.55vw, 1.35rem); }
  .offer-cta .launch-now-copy { max-width: 46ch; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* side by side doesn't leave room for the one-line header here, so the block stacks under the form */
  .page-offer main > .offer-cta { display: block; }
  .offer-cta .launch-now { padding: 0; margin-top: 44px; }
  .offer-cta .launch-now .launch-now-btn { margin-top: 0; }
}
/* Hero: "Book a free consultation" beside "Keep me updated" — an outlined twin on the video with a sage edge;
   the pair wraps under each other beside the mark when space runs short */
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(12px, 1.4vw, 18px); }
.hero-cta-book { background: transparent; color: var(--surface); box-shadow: 0 5px 0 0 var(--sage); }
.hero-cta-book:hover, .hero-cta-book:focus-visible { background: var(--surface); color: var(--ink); }
@media (max-width: 720px) { .hero-cta-book { box-shadow: 0 4px 0 0 var(--sage); } }
@media (max-width: 720px) {
  /* phones: the buttons stack beside the mark and the booking button may wrap to two lines */
  .hero-buttons { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-cta-book { white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; }
  /* keep the stacked buttons clear of the video's Pause button */
  .hero.hero-video .hero-copy { padding-bottom: calc(64px + var(--sheet-r)); }
}
/* Home: the "Don't want to wait" block sits below the sign-up form */
.launch-cta .launch-now { margin-top: 40px; }
@media (max-width: 720px) {
  .launch-cta { grid-template-areas: "title art" "form form" "now now"; }
  .launch-cta .launch-now { margin-top: 36px; }
}
/* Header: vanilla background */
.site-header { background: #f3e9e6; }
/* Home launch: the mark centers on the headline + form only; "Don't want to wait" runs full width below,
   with its copy on two lines */
@media (min-width: 721px) {
  .launch-cta { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy art" "now now"; }
  .launch-cta .launch-copy { grid-area: copy; }
  .launch-cta .launch-art { grid-area: art; align-self: center; }
  .launch-cta .launch-now { grid-area: now; max-width: none; margin-left: clamp(24px, 4vw, 72px); }
  .launch-cta .launch-now-copy { max-width: 880px; }
}
/* Hero: the booking button matches "Keep me updated" (vanilla fill, rose edge) and sits to its right at every width */
.hero-cta-book, .hero-cta-book:hover, .hero-cta-book:focus-visible { background: var(--surface); color: var(--ink); }
.hero-cta-book { box-shadow: 0 5px 0 0 var(--rose); }
.hero-cta-book:hover, .hero-cta-book:focus-visible { box-shadow: 0 0 0 0 transparent; }
@media (max-width: 720px) {
  .hero-actions { gap: 14px; }
  .hero-actions .hero-mark { width: 56px; flex: none; }
  .hero-buttons { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .hero-buttons .hero-cta { display: flex; align-items: center; justify-content: center; }
  .hero-cta-book { box-shadow: 0 4px 0 0 var(--rose); min-width: 0; }
}
/* Hero buttons: one row on desktop in every browser. Safari sizes a shrink-wrapped, wrapping flex row by its
   widest item, which stacked the two buttons; a non-wrapping row that can't shrink keeps them side by side. */
@media (min-width: 721px) {
  .hero-actions { flex-wrap: nowrap; }
  .hero-buttons { flex-wrap: nowrap; flex: none; }
}
/* What we offer page: booking button under the intro copy */
.offer-intro .offer-intro-btn { display: inline-block; margin-top: 24px; text-decoration: none; }
/* What we offer page, side by side: the header + copy move down by half the empty space above the button
   (the free space is split evenly above the header and above the button) */
@media (min-width: 1200px) {
  .offer-cta .launch-now .launch-now-title { margin-top: auto; }
}
/* Header on phones: the logo never shrinks; when the buttons don't fit beside it (four on the child pages,
   or very narrow screens) they move to a second row, right-aligned */
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; row-gap: 12px; }
  .site-header .lockup { flex-shrink: 0; }
  .site-header .site-nav { margin-left: auto; }
}
@media (max-width: 720px) {
  /* the logo keeps the width it had on phones before (104px) instead of squeezing smaller, so three buttons
     still share its row at 375px and only four (or very narrow screens) wrap */
  .site-header .lockup { flex: 0 0 104px; width: 104px; }
  .site-header .lockup img { width: 100%; height: auto; }
}
@media (max-width: 720px) { .site-header { column-gap: 14px; } }

/* Meet the founder: shift the photo and text right by about a third of the empty space on their right (desktop) */
@media (min-width: 721px) {
  .meet-teaser > .photo-stack,
  .meet-teaser > .meet-copy { translate: clamp(0px, 27.7vw - 296px, 240px) 0; }
  .meet-teaser { overflow-x: clip; }
}