/* About and Online Coaching: built on site.css tokens and components. */
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after { right: 0; }

/* page hero: text block on warm black, used by both pages */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: 66px; }
.page-hero .wrap { display: grid; gap: 32px; padding-block: clamp(40px, 8vw, 110px) clamp(56px, 9vw, 120px); }
.page-hero h1 { font-size: clamp(3rem, 12vw, 8rem); }
.page-hero .kicker { font-family: var(--display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 2.2vw, 1.6rem); letter-spacing: .02em; color: var(--stone); margin: 0; max-width: 30ch; }
.page-hero .note { margin: 0; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); max-width: 52ch; }
.cta-row { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }

/* about: portrait beside the name */
.portrait { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; max-width: 100%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; filter: sepia(.1) saturate(1.05); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,12,11,.65), transparent 45%); }

/* credentials */
.creds { display: grid; gap: 48px; }
.cred-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cred-list li { padding-block: 18px; border-bottom: 1px solid var(--line); font-family: var(--display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: .02em; line-height: 1.2; }
.cred-list li span { display: block; font-family: var(--body); font-stretch: 100%; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--stone); margin-top: 4px; }

/* long-form story */
.story { display: grid; gap: 1.15em; max-width: 64ch; margin-inline: auto; font-size: 1.08rem; line-height: 1.75; color: #d2cbbf; }
.story p { margin: 0; }
.story > p:first-of-type::first-letter { float: left; font-family: var(--serif); font-size: 4.6em; line-height: .82; padding: .06em .1em 0 0; color: var(--bone); }
.story .beat { font-family: var(--display); font-stretch: 64%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.6rem); line-height: .95; color: var(--bone); margin-block: .5em .2em; text-wrap: balance; }
.story .levels { list-style: none; margin: .4em 0; padding: 0; display: grid; gap: 2px; }
.story .levels li { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; color: var(--bone); }
.story .sign { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.15; color: var(--bone); border-top: 1px solid var(--line); padding-top: .8em; margin-top: .6em; }

/* closing call to action */
.cta-close .wrap { display: grid; gap: clamp(28px, 4vw, 48px); }
.cta-close .statement { font-size: clamp(2.4rem, 6vw, 5.4rem); max-width: 17ch; }

/* online: video */
.video-frame { position: relative; margin: 0; aspect-ratio: 16 / 9; max-width: 100%; background: var(--coal); border: 1px solid var(--line); overflow: hidden; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 14px; align-content: center;
  background: linear-gradient(0deg, rgba(13,12,11,.55), rgba(13,12,11,.15)); border: 0; color: var(--bone); cursor: pointer;
  font: 600 .72rem/1 var(--body); letter-spacing: .26em; text-transform: uppercase;
}
.play i { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--bone); display: grid; place-items: center; transition: background .3s var(--ease), transform .3s var(--ease); }
.play i::before { content: ""; margin-left: 5px; border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.play:hover i { background: rgba(235,229,218,.12); transform: scale(1.05); }
.online-intro { display: grid; gap: 32px; }
.intro-copy { display: grid; gap: 22px; }
.intro-copy .lede b { font-weight: 600; }
.proof-line { font-family: var(--display); font-stretch: 70%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: .02em; margin: 0; }
.proof-line em { font-family: var(--serif); font-weight: 400; font-stretch: 100%; text-transform: none; font-size: 1.15em; }

@media (min-width: 720px) {
  .page-hero { padding-top: 78px; }
  .creds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
}
@media (min-width: 1040px) {
  .about-hero .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; column-gap: clamp(40px, 6vw, 96px); }
  .about-hero .portrait { aspect-ratio: 4 / 4.2; }
  .online-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
}