/* ==========================================================================
   Elevate 360 — Case Studies (10/6)
   A viewer: page head → four tabs → one story panel at a time (image,
   title, three-beat short version, one figure, "Read the full story" which
   unfolds Bill's complete text) → sources → the close. cases.js does the
   tabs, the hash deep links and the unfold. Reads from tokens.css.
   ========================================================================== */

/* --- Page head: a navy band, like the Performance System page --------- */

/* Same size as the Performance System head (.psh): same padding; on
   desktop the band is held to the height the PS head reaches with its
   diagram (553px at 1024 → 589px at 1440) and the title sits centred in it. */
.ph { display: grid; background: var(--navy); color: var(--text-inverse); }
.ph__inner { display: grid; align-content: center; padding-block: var(--space-3xl) var(--section-y); }
/* The photograph behind the head, graded into navy like the Executive
   Coaching hero: heavy on the left where the title sits, opening up to the
   right where the files are. */
.ph--photo { position: relative; overflow: hidden; }
.ph__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.ph__media picture, .ph__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ph__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 41, 66, 0.35) 0%, rgba(15, 41, 66, 0) 35%, rgba(15, 41, 66, 0.55) 100%),
    linear-gradient(90deg, rgba(15, 41, 66, 0.92) 0%, rgba(15, 41, 66, 0.70) 40%, rgba(15, 41, 66, 0.25) 75%, rgba(15, 41, 66, 0.10) 100%);
}
.ph--photo .ph__inner { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .ph--photo { min-height: 420px; }
  .ph__media img { object-position: 82% 50%; }
  .ph__media::after {
    background: linear-gradient(180deg, rgba(15, 41, 66, 0.55) 0%, rgba(15, 41, 66, 0.80) 100%);
  }
}

.ph__title {
  margin: var(--space-sm) 0 0;
  max-width: 20ch;
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--on-navy);
}
.ph__title em { font-style: italic; }
@media (min-width: 1024px) {
  .ph { min-height: calc(464px + 8.65vw); }
  .ph__inner { padding-block: var(--space-4xl) var(--space-5xl); }
}

/* --- The viewer ------------------------------------------------------- */

.viewer { padding-block: 0 var(--section-y); background: var(--paper); }

/* Tabs: number + name, gold underline on the current one. */
.tabs {
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2xl);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: var(--space-md) 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-emph);
}
.tabs__n { font-size: var(--step--2); letter-spacing: 0.08em; color: var(--text-meta); transition: color var(--dur-base) var(--ease-out); }
.tabs__tab:hover { color: var(--navy); }
.tabs__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tabs__tab[aria-selected="true"] { color: var(--navy); }
.tabs__tab[aria-selected="true"] .tabs__n { color: var(--gold); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }

/* The panel: image, then the story in two type sizes. */
.panel { display: grid; gap: var(--space-xl); }
.panel[hidden] { display: none; }
.panel.is-active { animation: panel-in 520ms var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The photograph: 4:5 at desktop, 16:9 when stacked; graded toward navy
   like the rest of the site's pictures. */
.panel__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-warm); }
.panel__media picture, .panel__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel__media img { filter: saturate(0.85) contrast(1.04); }
@media (max-width: 1023px) { .panel__media { aspect-ratio: 16 / 9; } }
.panel__main { min-width: 0; }
.panel__kind {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 var(--space-md);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-meta);
}
.panel__n { font-size: var(--step-0); letter-spacing: -0.02em; color: var(--gold); font-stretch: normal; }
.panel__title {
  margin: 0 0 var(--space-xs);
  max-width: 26ch;
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.panel__sub { margin: 0 0 var(--space-xl); max-width: 50ch; font-size: var(--step-0); line-height: var(--leading-snug); color: var(--text-muted); }

/* The short version: three beats, lifted from Bill's copy. */
.beats { display: grid; gap: var(--space-lg); margin: 0 0 var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.beat dt {
  margin-bottom: var(--space-xs);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.beat dd { margin: 0; max-width: 52ch; font-size: var(--step-0); line-height: var(--leading-snug); color: var(--text); }

/* One figure. */
.panel__figure { display: grid; gap: var(--space-xs); max-width: none; margin: 0 0 var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.panel__figure strong { font-size: var(--step-3); font-weight: var(--weight-medium); line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.panel__figure span { max-width: 44ch; font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }

/* Read the full story. */
.panel__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  font: inherit;
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  color: var(--navy);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.panel__more svg { width: 10px; transition: transform var(--dur-base) var(--ease-emph); }
.panel__more:hover { color: var(--gold); }
.panel__more:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.panel__more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The full story: a quieter column than the panel above it. One body size,
   a comfortable measure, a drop cap to mark the start, pull-quote callouts,
   and air between paragraphs. Pieces arrive one after another on open. */
.panel .panel__full { max-width: 56ch; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
.panel__full[hidden] { display: none; }
.panel__full .prose__label--first { margin-top: 0; }
.panel .panel__full p { font-size: var(--step-0); line-height: var(--leading-loose); color: var(--text); margin-bottom: var(--space-lg); }
.panel .panel__full .prose__lede { font-size: var(--step-0); line-height: var(--leading-loose); letter-spacing: 0; color: var(--text); }
.panel .panel__full .prose__lede::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  font-size: 3.1em;
  line-height: 0.82;
  font-weight: var(--weight-medium);
  color: var(--navy);
}
.panel__full .callout { margin: var(--space-xl) 0; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); }
.panel .panel__full .callout p { font-size: var(--step-1); line-height: var(--leading-snug); font-style: italic; color: var(--ink); margin-bottom: 0; }
.panel__full .callout p + p { margin-top: var(--space-sm); }
.panel .panel__full .callout__title { font-style: normal; font-weight: var(--weight-medium); color: var(--navy); }
.panel__full .steps li, .panel__full .checks li { font-size: var(--step-0); }
.panel__full .stats { margin: var(--space-lg) 0 var(--space-xl); }
.panel__less {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-top: var(--space-md); padding: 0;
  background: none; border: 0; border-bottom: 1px solid var(--gold);
  font: inherit; font-size: var(--step--1); font-weight: var(--weight-medium); color: var(--navy); cursor: pointer;
}
.panel__less svg { width: 10px; }
.panel__less:hover { color: var(--gold); }
.panel__full.is-open > * { animation: panel-in 520ms var(--ease-out) both; }
.panel__full.is-open > :nth-child(2) { animation-delay: 70ms; }
.panel__full.is-open > :nth-child(3) { animation-delay: 140ms; }
.panel__full.is-open > :nth-child(4) { animation-delay: 210ms; }
.panel__full.is-open > :nth-child(5) { animation-delay: 280ms; }
.panel__full.is-open > :nth-child(6) { animation-delay: 350ms; }
.panel__full.is-open > :nth-child(7) { animation-delay: 420ms; }
.panel__full.is-open > :nth-child(8) { animation-delay: 490ms; }
.panel__full.is-open > :nth-child(n+9) { animation-delay: 560ms; }

@media (min-width: 640px) {
  .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .beat dd { max-width: none; }
}
@media (min-width: 1024px) {
  .panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-4xl); align-items: start; }
  .panel__media { position: sticky; top: calc(var(--header-h-lg) + var(--space-xl)); }
  .viewer { padding-bottom: calc(var(--section-y) * 0.8); }
}

/* Body copy: one measured column. */
.prose { max-width: var(--measure); }
.prose p { font-size: var(--step-0); line-height: var(--leading-loose); color: var(--text); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: var(--weight-medium); color: var(--ink); }
/* The first paragraph is set larger, as the way in. */
.prose .prose__lede { font-size: var(--step-1); line-height: var(--leading-snug); letter-spacing: -0.008em; color: var(--ink); margin-bottom: var(--space-lg); }
/* Small labels break the read into beats. */
.prose .prose__label {
  margin: var(--space-2xl) 0 var(--space-sm);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.prose .prose__label::before { content: ""; display: inline-block; width: 1.25rem; height: 1px; margin-right: 0.6rem; vertical-align: middle; background: var(--gold); }

/* Bill's bold paragraphs: a callout with a gold rule that draws in. */
.callout {
  position: relative;
  margin: var(--space-xl) 0;
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
}
.callout::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-scroll) var(--ease-emph) 200ms;
}
.js .callout.is-in::before, .js .panel__full .callout::before { transform: scaleY(1); }
.callout p { font-size: var(--step-1); line-height: var(--leading-snug); color: var(--ink); }
.callout p + p { margin-top: var(--space-sm); }
.callout__title { font-weight: var(--weight-medium); color: var(--navy); }

/* Numbered steps (Tina's three competencies). */
.steps { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xl); padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  padding-left: 2.6rem;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--text);
}
.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 0; top: 0.1em;
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* Checks (the founder questions). */
.checks { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-xl); padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 1.5rem; font-size: var(--step-0); line-height: var(--leading-loose); color: var(--text); }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--gold); }

/* The three roles. */
.roles { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); }
.role { padding-top: var(--space-md); border-top: 1px solid var(--rule); }
.role h4 { margin: 0 0 var(--space-xs); font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--navy); }
.role p { margin: 0; font-size: var(--step--1); line-height: var(--leading-loose); color: var(--text-muted); }
@media (min-width: 640px) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The nursing figures. */
.stats { display: grid; gap: var(--space-lg) var(--space-xl); margin: var(--space-xl) 0; }
.stat dt { font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }
.stat dd { margin: var(--space-xs) 0 0; font-size: var(--step-3); font-weight: var(--weight-medium); line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.stat__unit { font-size: 0.6em; margin-left: 0.1em; }
.stat__note { display: block; margin-top: var(--space-xs); font-size: var(--step--2); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--text-meta); }
.prose .stats__source { grid-column: 1 / -1; margin: 0; max-width: 60ch; font-size: var(--step--2); line-height: var(--leading-snug); color: var(--text-meta); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- What was hiding: a thin strip on the seam ---------------------------- */

.hiding { padding-block: 0 var(--space-2xl); background: var(--paper); }
.hiding__strip {
  display: grid;
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hiding__label {
  padding: var(--space-md) 0 var(--space-xs);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hiding__item {
  padding: var(--space-sm) 0;
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--navy);
}
.hiding__item em { font-style: italic; font-weight: var(--weight-regular); }
.hiding__item + .hiding__item { border-top: 1px solid var(--rule); }
.hiding__label + .hiding__item { border-top: 1px solid var(--rule); }

@media (min-width: 640px) and (max-width: 1023px) {
  .hiding__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .hiding__label { grid-column: 1 / -1; }
  .hiding__item:nth-child(3) { border-top: 1px solid var(--rule); }   /* second cell of the first row */
}

@media (min-width: 1024px) {
  .hiding { padding-block: var(--space-xl) var(--space-3xl); }
  .hiding__strip {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
  }
  .hiding__label { padding: var(--space-md) var(--space-lg) var(--space-md) 0; align-self: center; }
  .hiding__item {
    flex: 1 1 auto;
    padding: var(--space-md) var(--space-lg);
    border-top: 0;
    border-left: 1px solid var(--rule);
    display: flex; align-items: center;
  }
  .hiding__item:last-child { flex-grow: 1.6; }
  .hiding__item span { text-wrap: balance; }
  .hiding__item + .hiding__item, .hiding__label + .hiding__item { border-top: 0; }
  .hiding__item:last-child { padding-right: 0; }
}

/* --- The close: the Snapshot band, on warm ------------------------------- */

.snapc {
  padding-block: var(--section-y);
  overflow: hidden;   /* the blades extend past the mark's box */
  background: var(--paper-warm);
}
.snapc__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.snapc__title {
  max-width: 18ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--step-4);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.snapc__title em { font-style: italic; }
.snapc__body { max-width: 50ch; margin: 0 0 var(--space-xl); color: var(--text-muted); }
/* The button sets the width; the line beneath centres on it. */
.snapc__actions { display: grid; justify-items: center; gap: var(--space-md); width: fit-content; max-width: 100%; }
.snapc__actions .btn { white-space: normal; text-align: center; }
.snapc__alt { margin: 0; font-size: var(--step--1); text-align: center; color: var(--text-muted); }
.snapc__alt a { color: var(--navy); font-weight: var(--weight-medium); text-decoration: none; border-bottom: 1px solid var(--gold); }
.snapc__alt a:hover { color: var(--gold); }

.snapc__mark {
  margin: 0;
  justify-self: center;
  width: min(60vw, 260px);
  filter: drop-shadow(0 18px 36px rgba(15, 41, 66, 0.22));
  transition: transform var(--dur-slow) var(--ease-emph);
}
.snapc__mark .aperture { display: block; width: 100%; height: auto; overflow: visible; }
/* The blades turn with the page (about a third of a turn across the
   section) and a little further on hover; the buildings stay upright and
   come closer on hover. */
.aperture__blades {
  transform-origin: 120px 120px;
  transform-box: view-box;
  transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg));
  transition: transform var(--dur-slow) var(--ease-emph);
  will-change: transform;
}
.aperture__centre { transform-box: view-box; transform-origin: 120px 120px; transition: transform var(--dur-slow) var(--ease-emph); }
.snapc__mark:hover, .snapc:has(.snapc__actions .btn:hover) .snapc__mark { transform: scale(1.035); }
.snapc__mark:hover .aperture__blades, .snapc:has(.snapc__actions .btn:hover) .aperture__blades { transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg + 24deg)); }
.snapc__mark:hover .aperture__centre, .snapc:has(.snapc__actions .btn:hover) .aperture__centre { transform: scale(1.14); }

@media (max-width: 767px) {
  .snapc__actions { width: 100%; }
  .snapc__actions .btn { width: 100%; }
  .snapc__mark { order: -1; }
}
@media (min-width: 768px) {
  .snapc__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .snapc__mark { width: min(100%, 320px); justify-self: end; }
}
@media (min-width: 1024px) {
  .snapc__mark { width: min(100%, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .snapc__mark, .snapc__mark:hover, .aperture__blades, .aperture__centre { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .callout::before, .tabs__tab::after, .panel__more svg { transition: none; }
  .js .callout::before { transform: scaleY(1); }
  .panel.is-active, .panel__full.is-open, .panel__full.is-open > * { animation: none; }
}