/* About page (/about), direction B, loaded only by about.html. Holds: the photo hero's tighter
   crop on the lit peaks and its button, the portrait that stays in view beside the physician's
   story and credentials, the dark "why HZN exists" band, the four roles as a ruled 2 x 2, and
   HORIZON set huge on a hairline horizon (H, Z and N lit). Shared system: css/b.css. */

/* ── Breadcrumb (white over the photo, 44px tap target on the link) ── */
.breadcrumb { align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; border-bottom: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s ease; }
.breadcrumb a:hover { color: #FBEBDD; }
.ph .breadcrumb :focus-visible, .ph :focus-visible { outline-color: #fff; }

/* ── Hero: the same mountain as home, cropped in on the sunlit summit ── */
.ab-hero > img { object-position: 72% 42%; transform: scale(1.32); transform-origin: 70% 44%; }
.ab-title { max-width: none; font-size: clamp(46px, 6vw, 88px); }
.ab-title span { display: block; }
.ab-hero-side { display: grid; justify-items: start; gap: 26px; }
.ab-hero-side .b-btn-light { gap: 10px; min-height: 52px; }
.ab-hero-side .b-btn-light svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ab-hero-side .b-btn-light:hover svg { transform: translateX(3px); }
.ab-hero { min-height: clamp(560px, 80svh, 780px); }
@media (min-width: 1024px) {
  .ab-hero .ph-inner { grid-template-columns: minmax(0, 820px); row-gap: 28px; }
  .ab-hero-side .ph-lede { margin-bottom: 0; }
}
@media (max-width: 767px) {
  .ab-hero > img { object-position: 74% 50%; transform: none; }
  .ab-hero::after { background: linear-gradient(180deg, rgba(18, 17, 20, .55) 0%, rgba(18, 17, 20, .32) 30%, rgba(18, 17, 20, .5) 55%, rgba(18, 17, 20, .8) 100%); }
}

/* ── The physician ── */
.ab-profile { display: grid; gap: 40px; }
.ab-portrait { margin: 0; }
.ab-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r); background: #E9E8E6; }
.ab-portrait figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--stone); }
.ab-name { max-width: 14ch; }
.ab-deck { margin-top: 24px; font-size: clamp(23px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -0.015em; max-width: 30ch; color: var(--ink); }
.ab-body { margin-top: 28px; max-width: 58ch; }
.ab-body p { color: #3E4148; font-size: 17.5px; line-height: 1.78; }
.ab-body p + p { margin-top: 18px; }
/* His own words on why HZN exists: set apart from the bio by an ember rule, not a box */
.ab-quote { margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--ember); }
.ab-quote blockquote { margin: 0; }
.ab-body .ab-quote p { font-size: 19px; line-height: 1.65; color: var(--ink); }
.ab-quote figcaption { margin-top: 14px; font-size: 14px; color: var(--stone); }
.ab-creds { margin: 48px 0 0; border-top: 1px solid var(--ink); max-width: 640px; }
.ab-creds div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ab-creds dt { font-size: 14px; font-weight: 600; color: var(--stone); }
.ab-creds dd { margin: 0; font-size: 16.5px; }
@media (min-width: 640px) { .ab-creds div { grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; } }
@media (min-width: 1024px) {
  .ab-profile { grid-template-columns: 5fr 6fr; column-gap: clamp(56px, 7vw, 112px); align-items: start; }
  .ab-portrait { position: sticky; top: calc(var(--hdr) + 32px); }
}

/* ── Why HZN exists: the dark band ── */
.ab-why { margin-top: clamp(88px, 10vw, 140px); background: var(--ink); color: #fff; padding: clamp(72px, 9vw, 128px) 0; }
.ab-why-grid { display: grid; gap: 44px; }
.ab-why .b-h2 { color: #fff; }
.ab-why .b-lede { color: rgba(255, 255, 255, .78); }
.ab-why-list { position: relative; margin: 0; border-top: 1px solid rgba(255, 255, 255, .5); }
.ab-why-list div { padding: 26px 0 28px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ab-why-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-why-list dt { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.022em; }
.ab-why-list dd { margin: 10px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
@media (min-width: 1024px) {
  .ab-why-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(56px, 7vw, 112px); }
  .ab-why-head { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; }
}

/* ── The people behind your plan: a ruled 2 x 2 ── */
.ab-team .b-h2 { max-width: 13ch; }
.ab-team-grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.ab-team-grid li { padding: 28px 0 30px; border-bottom: 1px solid var(--rule); }
.ab-team-grid h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -0.022em; }
.ab-team-grid .ab-who { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ab-team-grid p:not(.ab-who) { margin-top: 10px; max-width: 40ch; font-size: 16.5px; line-height: 1.6; color: var(--stone); }
@media (min-width: 768px) {
  .ab-team-grid { grid-template-columns: 1fr 1fr; }
  .ab-team-grid li { padding: 36px clamp(28px, 4vw, 56px) 40px 0; }
  .ab-team-grid li:nth-child(even) { padding-left: clamp(28px, 4vw, 56px); padding-right: 0; border-left: 1px solid var(--rule); }
  .ab-team-grid li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ── Why the name: HORIZON standing on the horizon line ── */
.ab-mark { position: relative; display: flex; align-items: flex-end; justify-content: space-between; margin: 0;
  font-size: clamp(60px, 16.4vw, 252px); line-height: .74; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid var(--ink); }
.ab-mark b, .ab-mark i { display: block; }
.ab-mark b { font-weight: 300; color: var(--ink); }
.ab-mark i { font-style: normal; color: rgba(22, 26, 34, .13); }
.ab-mark [data-l]::before { content: attr(data-l); } /* drawn as decoration, so the faint letters stay out of the text layer */
.ab-hzn-copy { margin-top: 36px; display: grid; gap: 18px 64px; }
.ab-hzn-title { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.025em; max-width: 14ch; }
.ab-hzn-copy p { max-width: 44ch; font-size: 17.5px; line-height: 1.7; color: #3E4148; }
.ab-hzn-copy .ab-hzn-link { margin-top: 10px; }
.ab-hzn-copy .link-ul { display: inline-block; padding: 10px 0 4px; color: var(--ink); }
@media (min-width: 900px) { .ab-hzn-copy { grid-template-columns: 1fr 1fr; align-items: start; } }