/* ════════════════════════════════════════════════════════════════════
   about.css, /about page only (loaded via the page-about guard)
   The whole page is the founder letter (Eddie, 2026-07-06): poster-scale
   opening line, the founder video beside the rest of the letter, then the
   closing CTA. No hero, no card, no scroll-reveal effect.
   ════════════════════════════════════════════════════════════════════ */

.page-about { background: var(--bg); }

/* shared section rhythm for the white bands */
.ab-section { padding-top: var(--sec-pt); padding-bottom: var(--sec-pb); }

/* ──────────────── OUR WHY, FOUNDER LETTER ────────────────
   "Dawn" (Eddie, 2026-07-07): a single smooth wash of brand light rising from
   the bottom of the page, not clustered corner clouds (which read as a repeat
   of the practitioners founder-letter background), and light throughout to
   match the rest of the site (home/practitioners are mostly white; the earlier
   all-dark version was the odd one out). */
.ab-why {
  position: relative;
  background:
    radial-gradient(90% 55% at 50% 116%, rgba(206, 0, 184, .14), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #FCF0F7 74%, #F5E9FB 100%);
}
.ab-why-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.ab-why-line {
  margin: 0 0 clamp(40px, 6vw, 64px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 18ch;
}
.ab-why-grad {
  background: linear-gradient(100deg, #1A1A2E 0%, #1A1A2E 30%, #CE00B8 66%, #F06FD6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ab-why-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.ab-why-video-col { min-width: 0; }
.ab-why-video {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; background: #0D0D1A;
}
.ab-why-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-why-video-badge {
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: background var(--dur-hover) var(--ease);
}
.ab-why-video:hover .ab-why-video-badge { background: rgba(255, 255, 255, 0.26); }
.ab-why-video-badge svg { width: 15px; height: 15px; fill: #fff; }
.ab-why-video-badge span {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.ab-why-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ab-why-video.is-playing { cursor: default; }
.ab-why-video.is-playing .ab-why-video-poster,
.ab-why-video.is-playing .ab-why-video-badge { display: none; }
.ab-why-video-cap { margin: 14px 2px 0; font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.ab-why-quote {
  margin: 0;
}
.ab-why-quote p {
  margin: 0 0 16px;
  font-family: var(--font-prose);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--text2);
}
.ab-why-quote p:last-child { margin-bottom: 0; }
.ab-why-quote em { font-style: normal; color: var(--magenta); }
.ab-why-quote strong { font-weight: 600; color: var(--text); }
/* Real signature block closing the letter (matches css/practitioners.css
   .pr-sign): quiet and small. */
.ab-why-sign {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 26, 46, 0.1);
}
.ab-why-sign-name {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ab-why-sign-role {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width: 860px) {
  .ab-why-grid { grid-template-columns: 1fr; }
  /* extra clearance below the floating nav pill (Eddie: too tight on mobile).
     .ab-section already sets padding-top:var(--sec-pt); this must ADD to that,
     not replace it (equal specificity + later in the cascade would otherwise
     silently shrink it). */
  .ab-why.ab-section { padding-top: calc(var(--sec-pt) + 56px); }
}