/* Our story (S03, S03B). The phases are a stack in the HTML; on wide screens our-story.js turns
   them into the one pinned track on a sub page, and below 1024 into a native swipe. */

/* ---------- Head: the man, made of the team. On plaster, the portrait's own ground. ---------- */
.page-head.story-head {
  display: grid; grid-template-columns: 600px minmax(0, 1fr); grid-template-rows: 1fr repeat(5, auto);
  column-gap: 72px; row-gap: 24px; align-items: end;
  padding: 80px var(--pad) 0; background: var(--color-background);
}
.story-head__figure { display: contents; }
.story-head__portrait { grid-column: 1; grid-row: 1 / -1; width: 100%; height: auto; aspect-ratio: 600 / 623; object-fit: cover; object-position: 50% top; }
.story-head__label, .story-head__title, .story-head__name, .story-head__body, .story-head__caption { grid-column: 2; }
.story-head__label { grid-row: 2; }
.story-head__title { grid-row: 3; text-wrap: wrap; }
.story-head__name { grid-row: 4; display: flex; align-items: center; gap: 12px; }
.story-head__body { grid-row: 5; max-width: 460px; }
.story-head__caption { grid-row: 6; margin-bottom: 88px; }

@media (max-width: 1279px) {
  .page-head.story-head { grid-template-columns: 46% minmax(0, 1fr); column-gap: 48px; }
  .story-head__caption { margin-bottom: 64px; }
}
@media (max-width: 1023px) {
  .page-head.story-head { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 40px var(--pad) 48px; background: var(--color-surface); }
  .story-head__portrait { max-width: 520px; }
  .story-head__caption { margin: 0; }
  .story-head__label { padding-top: 16px; }
}
@media (max-width: 767px) {
  .page-head.story-head { padding: 24px var(--gutter) 40px; }
}

/* ---------- Seven phases. Without JavaScript, or with reduced motion: a stack, the long line running down. ---------- */
.story-phases {
  --pl: 64px; --pl-first: var(--pad); --pr: 48px; --gap: 48px;
  --panel: 960px; --panel-first: calc(var(--pad) + 872px); --photo-w: 316px;
  position: relative; background: var(--color-surface); padding: 104px var(--pad) 96px;
}
.story-phases__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.phase { position: relative; display: flex; align-items: flex-start; gap: var(--gap); padding: 0 0 80px 56px; }
.phase:last-child { padding-bottom: 56px; }
.phase::before { content: ""; position: absolute; left: 11px; top: 9px; bottom: -9px; width: 2px; background: var(--color-primary); }
.phase::after { content: ""; position: absolute; left: 4px; top: 8px; width: 16px; height: 2px; background: var(--color-primary); }
.phase:first-child::before, .phase:first-child::after { background: var(--color-border); }
.phase:last-child::before {
  bottom: 0;
  background: linear-gradient(var(--color-primary), var(--color-primary)) top / 2px calc(100% - 48px) no-repeat,
              repeating-linear-gradient(180deg, var(--color-primary) 0 6px, transparent 6px 12px);
}
.phase__words { flex: 1; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.phase__title { text-wrap: wrap; }
.phase__meta { display: flex; justify-content: space-between; gap: 16px; }
.phase__rows { padding-top: 8px; border-bottom: 1px solid var(--color-border); }
.phase__rows li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.phase__rows .phase__slot { border-top: 1px dashed var(--color-muted-foreground); }
.phase__rows .phase__slot:last-child { border-bottom: 1px dashed var(--color-muted-foreground); margin-bottom: -1px; }
.phase__when { flex: 0 0 110px; display: flex; justify-content: flex-end; text-align: right; }
.phase__photo { flex: 0 0 var(--photo-w); width: var(--photo-w); height: auto; aspect-ratio: 316 / 420; object-fit: cover; }
.phase__photo--slot { display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: var(--color-background); border: 1px dashed var(--color-muted-foreground); }
.phase__photo--rating { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 24px; background: var(--color-background); }
.phase__rating { display: flex; flex-direction: column; gap: 12px; }
.story-rail, .story-controls { display: none; }

@media (max-width: 1279px) {
  .story-phases { --pl: 48px; --pl-first: var(--pad); --pr: 40px; --gap: 40px; --panel: 80%; --panel-first: 80%; --photo-w: clamp(200px, 24vw, 316px); }
}
@media (max-width: 1023px) {
  .story-phases { --photo-w: 220px; padding-top: 72px; padding-bottom: 64px; border-top: 1px solid var(--color-border); }
  .story-phases__head { margin-bottom: 40px; }
  .story-phases__title { font-size: var(--text-display); line-height: var(--leading-display); }
  .phase { gap: 32px; }
}
@media (max-width: 767px) {
  .story-phases { padding-top: 28px; padding-bottom: 40px; }
  .story-phases__head { gap: 8px; margin-bottom: 24px; }
  .phase { flex-direction: column; gap: 16px; padding: 0 0 48px 36px; }
  .phase__words { gap: 10px; }
  .phase__photo { flex: 0 0 auto; width: 100%; height: 184px; aspect-ratio: auto; }
  .phase__photo--slot { padding: 12px; }
  .phase__photo--rating { padding: 16px; }
  .phase__when { flex: 0 0 auto; }
}

/* ---------- 1024 and up: the section pins only while the track moves sideways. ---------- */
@media (min-width: 1024px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .js [data-phases] {
    --pin-h: calc(100vh - var(--bar));
    --pt: clamp(24px, calc(100vh - 756px), 72px);
    height: calc(var(--pin-h) + var(--travel, 5280px)); padding: 0;
  }
  .js [data-phases] .story-phases__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .js [data-phases] .story-phases__pin { position: sticky; top: var(--bar); height: var(--pin-h); overflow: hidden; overflow: clip; }
  /* The track is as wide as the pin, so every percentage (the page gutter, 80% panels) reads the window; the panels overflow it. */
  .js [data-phases] .story-phases__track { position: absolute; inset: 0; }
  .js [data-phases] .phase-list { display: flex; height: 100%; }
  .js [data-phases] .phase { flex: 0 0 var(--panel); width: var(--panel); height: 100%; padding: var(--pt) var(--pr) 0 var(--pl); border-right: 1px solid var(--color-border); }
  .js [data-phases] .phase:first-child { flex-basis: var(--panel-first); width: var(--panel-first); padding-left: var(--pl-first); }
  .js [data-phases] .phase:last-child { border-right: 0; }
  .js [data-phases] .phase::before, .js [data-phases] .phase::after { content: none; }
  .js [data-phases] .phase__words { flex: 0 1 auto; width: calc(100% - var(--photo-w) - var(--gap)); max-width: none; }
  .js [data-phases] .phase__photo { aspect-ratio: auto; height: min(calc(var(--photo-w) * 1.33), calc(var(--pin-h) - 192px - var(--pt))); }

  /* The long line runs along the foot of every panel; the dot rides it. */
  .js [data-phases] .story-rail { display: block; position: absolute; left: 0; right: 0; top: calc(100% - 160px); height: 88px; }
  .js [data-phases] .story-rail ol { display: flex; height: 100%; }
  .js [data-phases] .story-rail li { position: relative; flex: 0 0 var(--panel); padding: 52px 0 0 var(--pl); line-height: var(--leading-label); }
  .js [data-phases] .story-rail li:first-child { flex-basis: var(--panel-first); padding-left: var(--pl-first); }
  .js [data-phases] .story-rail li:last-child { display: flex; justify-content: space-between; padding-right: 24px; }
  .js [data-phases] .story-rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--color-primary); }
  .js [data-phases] .story-rail li:first-child::before { left: var(--pl-first); background: var(--color-border); }
  .js [data-phases] .story-rail li:nth-child(2)::before { background: linear-gradient(90deg, var(--color-border) 0 var(--pl), var(--color-primary) var(--pl)); }
  .js [data-phases] .story-rail li:last-child::before {
    right: 24px;
    background: linear-gradient(var(--color-primary), var(--color-primary)) left / calc(100% - 296px) 2px no-repeat,
                repeating-linear-gradient(90deg, var(--color-primary) 0 6px, transparent 6px 12px);
  }
  .js [data-phases] .story-rail li::after { content: ""; position: absolute; left: calc(var(--pl) - 1px); top: 10px; width: 2px; height: 20px; background: var(--color-primary); }
  .js [data-phases] .story-rail li:first-child::after { left: calc(var(--pl-first) - 1px); background: var(--color-border); }
  .js [data-phases] .story-rail a { color: var(--color-muted-foreground); }
  .js [data-phases] .story-rail a[aria-current] { color: var(--color-foreground); }
  .js [data-phases] .story-rail__dot { top: 13px; }

  .js [data-phases] .story-controls { display: flex; align-items: center; gap: 8px; position: absolute; right: 24px; bottom: 24px; }
  .js [data-phases] .story-controls__count { padding-right: 8px; }
  .js [data-phases] .story-controls__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js [data-phases] .story-controls__swipe { display: none; }
}

/* ---------- Below 1024: no pin. Cards swipe natively with snap, the next one showing at the edge. ---------- */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js [data-phases] { padding-left: 0; padding-right: 0; }
  .js [data-phases] .story-phases__head { padding: 0 var(--gutter); }
  .js [data-phases] .phase-list {
    position: relative; display: flex; align-items: stretch; gap: 12px; padding: 0 var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .js [data-phases] .phase-list::-webkit-scrollbar { display: none; }
  .js [data-phases] .phase { flex: 0 0 min(520px, calc(100% - 32px)); flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--color-border); scroll-snap-align: start; }
  .js [data-phases] .phase::before, .js [data-phases] .phase::after { content: none; }
  .js [data-phases] .phase__words { max-width: none; gap: 10px; padding: 16px; }
  .js [data-phases] .phase__photo { order: -1; flex: 0 0 auto; width: 100%; height: 184px; aspect-ratio: auto; }
  .js [data-phases] .phase__photo--slot { border: 0; border-bottom: 1px dashed var(--color-muted-foreground); padding: 12px; }
  .js [data-phases] .phase__photo--rating { padding: 16px; }
  .js [data-phases] .phase__when { flex: 0 0 auto; }

  .js [data-phases] .story-rail { display: block; position: relative; height: 24px; max-width: 520px; margin: 20px var(--gutter) 0; }
  .js [data-phases] .story-rail ol { display: flex; height: 100%; padding-left: 4px; }
  .js [data-phases] .story-rail li { position: relative; flex: 1 1 0; }
  .js [data-phases] .story-rail li:last-child { flex: 0 0 36px; }
  .js [data-phases] .story-rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--color-primary); }
  .js [data-phases] .story-rail li:first-child::before { background: var(--color-border); }
  .js [data-phases] .story-rail li:last-child::before { background: repeating-linear-gradient(90deg, var(--color-primary) 0 4px, transparent 4px 8px); }
  .js [data-phases] .story-rail li::after { content: ""; position: absolute; left: -1px; top: 5px; width: 2px; height: 14px; background: var(--color-primary); }
  .js [data-phases] .story-rail li:first-child::after { background: var(--color-border); }
  .js [data-phases] .story-rail a { position: absolute; left: -22px; top: -10px; width: 44px; height: 44px; overflow: hidden; font-size: 0; color: transparent; }
  .js [data-phases] .story-rail__ahead { display: none; }
  .js [data-phases] .story-rail__dot { top: 5px; }

  .js [data-phases] .story-controls { display: flex; justify-content: space-between; gap: 16px; max-width: 520px; margin: 8px var(--gutter) 0; }
  .js [data-phases] .story-controls .btn { display: none; }
}

.story-rail__dot {
  position: absolute; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid #FFFFFF; pointer-events: none;
}
.story-controls .btn[aria-disabled="true"] { opacity: 1; pointer-events: auto; color: #A3A3A3; cursor: default; }
.story-controls .btn[aria-disabled="true"]:active { transform: none; }
.story-phases__pin:focus-visible { outline-offset: -2px; border-radius: 0; }

/* ---------- Then and now: the 2015 idea, and what a patient meets today. ---------- */
.story-then { padding-top: 104px; padding-bottom: 104px; }
.story-then .sec-head__words { max-width: 1200px; }
.story-then .t-section { text-wrap: wrap; }
.story-then__table { margin-top: 48px; }
.story-then__head { display: flex; gap: 40px; padding: 12px 0; border-bottom: 1px solid var(--color-foreground); }
.story-then__head span:first-child, .story-then__was { flex: 0 0 520px; }
.story-then__row { display: flex; gap: 40px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.story-then__now { flex: 1; min-width: 0; }
.story-then__now .label-row { align-items: flex-start; }
.story-then__k { display: none; }
@media (max-width: 1279px) {
  .story-then__head span:first-child, .story-then__was { flex-basis: 42%; }
}
@media (max-width: 1023px) {
  .story-then { padding-top: 72px; padding-bottom: 64px; }
  .story-then__table { margin-top: 32px; }
}
@media (max-width: 767px) {
  .story-then { padding-top: 48px; padding-bottom: 48px; }
  .story-then__table { margin-top: 24px; border-top: 1px solid var(--color-foreground); }
  .story-then__head { display: none; }
  .story-then__row { flex-direction: column; gap: 8px; padding: 16px 0 20px; border-bottom: 0; }
  .story-then__row + .story-then__row { border-top: 1px solid var(--color-border); }
  .story-then__was { flex-basis: auto; }
  .story-then__k { display: block; margin-bottom: 8px; }
  .story-then__now .story-then__k { padding-top: 6px; }
}

/* ---------- Our people: the crowd, full bleed. ---------- */
.story-people { background: var(--color-surface); }
.story-people__head { padding: 104px var(--pad) 40px; }
.story-people__head .sec-head__words { max-width: 760px; }
.story-people__head .t-section { text-wrap: wrap; }
.story-people__aside { width: 400px; }
.story-people__photo img { width: 100%; height: clamp(300px, 35.42vw, 510px); object-fit: cover; object-position: 50% bottom; }
@media (max-width: 1023px) {
  .story-people__head { padding: 72px var(--pad) 32px; }
  .story-people__aside { width: auto; }
}
@media (max-width: 767px) {
  .story-people { display: flex; flex-direction: column; padding: 48px 0 40px; }
  .story-people__head { display: contents; }
  .story-people__head .sec-head__words { padding: 0 var(--gutter) 20px; }
  .story-people__photo img { height: 260px; object-position: 50% 50%; }
  .story-people__aside { order: 2; padding: 16px var(--gutter) 0; }
}

/* ---------- Checkable facts: a table, not adjectives. ---------- */
.story-facts { display: flex; flex-direction: column; gap: 40px; padding-top: 104px; padding-bottom: 112px; border-top: 1px solid var(--color-border); }
.story-facts__aside { width: 400px; }
.story-facts__table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.story-facts__table th, .story-facts__table td { padding: 18px 32px 18px 0; vertical-align: top; border-bottom: 1px solid var(--color-border); font-weight: 400; }
.story-facts__table thead th { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--color-foreground); }
.story-facts__table thead th:first-child { width: 292px; }
.story-facts__table thead th:last-child { width: 260px; }
.story-facts__table tbody th { font-weight: 700; }
.story-facts__table .story-facts__where { padding-right: 0; }
.story-facts__cell { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.story-facts__cell--end { justify-content: flex-end; }
.story-facts__cell .t-label { line-height: var(--leading-body); }
.story-facts__check { display: none; }
.story-facts__muted th, .story-facts__muted td { color: var(--color-muted-foreground); }
@media (max-width: 1279px) {
  .story-facts__table thead th:first-child { width: 220px; }
  .story-facts__table thead th:last-child { width: 220px; }
}
@media (max-width: 1023px) {
  .story-facts { gap: 32px; padding-top: 72px; padding-bottom: 64px; }
  .story-facts__aside { width: auto; }
}
@media (max-width: 767px) {
  .story-facts { gap: 12px; padding-top: 40px; padding-bottom: 48px; }
  .story-facts__table { margin-top: 12px; }
  .story-facts__table thead { display: none; }
  .story-facts__table, .story-facts__table tbody, .story-facts__table tr, .story-facts__table th, .story-facts__table td { display: block; width: auto; }
  .story-facts__table tbody { border-top: 1px solid var(--color-foreground); }
  .story-facts__table tr { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
  .story-facts__table th, .story-facts__table td { padding: 0; border: 0; }
  .story-facts__table tbody th { padding-right: 120px; }
  .story-facts__cell .t-label { line-height: var(--leading-label); color: var(--color-muted-foreground); text-decoration: none; }
  .story-facts__cell .pill { position: absolute; top: 16px; right: 0; }
  .story-facts__check { display: inline; }
}