/* ==========================================================================
   Elevate 360 — Performance System v2 (10/6)
   Navy head with Bill's two circles → the premise (paper) → what we
   measure (warm) → where we measure it (paper) → the close (warm).
   Two type sizes per view. Motion: the shared reveal; the circles draw
   in; driver hairlines draw in; each level's ring lights. Tokens only.
   v1 archived at src/archive/performance-system-v1-2026-10-06.*
   ========================================================================== */

/* --- Head (navy, the one set piece) -------------------------------------- */

.psh { background: var(--navy); color: var(--text-inverse); }
.psh__grid { display: grid; gap: var(--space-2xl); align-items: center; padding-block: var(--space-3xl) var(--section-y); }
.psh__title {
  margin: var(--space-sm) 0 var(--space-lg);
  max-width: 13ch;
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--on-navy);
}
.psh__title em { font-style: italic; }
.psh__lede {
  margin: 0;
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-inverse-muted);
}

/* The lens: Bill's two circles. A is gold, B is the muted on-navy tone;
   where they overlap, a light-gold wash and the four driver numerals.
   Rings draw in, the lens fills, the numerals arrive last. */
.venn { width: min(100%, 640px, 92vw); justify-self: center; }
.venn__svg { display: block; width: 100%; height: auto; overflow: visible; }
.venn__a, .venn__b { fill: none; stroke-dasharray: 100; stroke-dashoffset: 0; }
.venn__a { stroke: var(--gold-light); stroke-width: 2.2; }
.venn__b { stroke: var(--on-navy-muted); stroke-width: 1.4; }
.venn__lens { fill: var(--on-navy); fill-opacity: 0.09; }
.venn__label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--gold-light);
}
.venn__label--b { fill: var(--on-navy-muted); }
.venn__n {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: var(--weight-bold);
  font-stretch: var(--width-wide);
  letter-spacing: -0.03em;
  fill: var(--on-navy);
}
.venn__four {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--gold-light);
}
.js .venn[data-reveal] .venn__a,
.js .venn[data-reveal] .venn__b { stroke-dashoffset: 100; }
.js .venn[data-reveal] .venn__lens { fill-opacity: 0; }
.js .venn[data-reveal] .venn__label,
.js .venn[data-reveal] .venn__n,
.js .venn[data-reveal] .venn__four { opacity: 0; }
.js .venn[data-reveal].is-in .venn__a { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-in-out) 200ms; }
.js .venn[data-reveal].is-in .venn__b { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-in-out) 500ms; }
.js .venn[data-reveal].is-in .venn__lens { fill-opacity: 0.09; transition: fill-opacity 900ms var(--ease-out) 1500ms; }
.js .venn[data-reveal].is-in .venn__label { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out) 1400ms; }
.js .venn[data-reveal].is-in .venn__n { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.js .venn[data-reveal].is-in .venn__n:nth-child(1) { transition-delay: 2000ms; }
.js .venn[data-reveal].is-in .venn__n:nth-child(2) { transition-delay: 2150ms; }
.js .venn[data-reveal].is-in .venn__n:nth-child(3) { transition-delay: 2300ms; }
.js .venn[data-reveal].is-in .venn__n:nth-child(4) { transition-delay: 2450ms; }
.js .venn[data-reveal].is-in .venn__four { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out) 2700ms; }
@media (hover: hover) {
  .venn__lens { transition: fill-opacity var(--dur-slow) var(--ease-out); }
  .venn:hover .venn__lens { fill-opacity: 0.16 !important; }
}

/* --- The premise (paper) ------------------------------------------------- */
/* Bill's first sentence large across the left; a small photograph on the
   right, on the grid; his two follow-up sentences as a pair beneath the
   line, with a hairline above them. */
.premise { padding-block: var(--section-y-tight); background: var(--paper); }
.premise__grid { display: grid; gap: var(--space-xl); }
.premise__big {
  margin: 0;
  max-width: 18ch;
  font-size: var(--step-4);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.premise__big em { font-style: italic; }
.premise__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); }
.premise__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.js .premise__media[data-reveal] img { clip-path: inset(100% 0 0 0); }
.js .premise__media[data-reveal].is-in img { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-emph); }
.premise__pair { display: grid; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.premise__more, .premise__take { margin: 0; max-width: 36ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-muted); }
.premise__take { color: var(--navy); font-weight: var(--weight-medium); }

/* --- What we measure (warm): four quadrants ------------------------------ */
/* A 2×2 split by hairlines, the four quarters of a 360. Each quarter:
   a wide heavy numeral, the title at display size, Bill's line. Hover
   lights a quarter: its numeral goes gold, its ground warms. */

.ps-drivers { padding-block: var(--section-y-tight); background: var(--paper-warm); }
.ps-drivers__title {
  margin: 0 0 var(--space-xl);
  max-width: 20ch;
  font-size: var(--step-4);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.ps-drivers__title em { font-style: italic; }
.quad { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.quad__cell {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-base) var(--ease-out);
}
.quad__n {
  font-size: var(--step-3);
  color: var(--navy-300);
  transition: color var(--dur-base) var(--ease-out);
}
.quad__title { margin: 0; font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.04; letter-spacing: -0.024em; color: var(--navy); }
.quad__body { margin: 0; max-width: 38ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-muted); }
/* Hover: numeral gold, title heavier and a touch larger (from its left edge). */
.quad__title { transform-origin: left center; transition: font-weight var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .quad__cell:hover .quad__n { color: var(--gold); }
  .quad__cell:hover .quad__title { font-weight: var(--weight-medium); transform: scale(1.05); }
}
/* Arrival: the grid's hairlines draw in with the cells. */
.quad { border-top: 0; position: relative; }
.quad::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--rule); transform-origin: left center; }
.quad__cell { border-bottom: 0; }
.quad__cell::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--rule); transform-origin: left center; }
.quad__cell::before { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--rule); transform-origin: top center; display: none; }
.js .quad[data-reveal-lines]::before, .js .quad[data-reveal-lines] .quad__cell::after { transform: scaleX(0); }
.js .quad[data-reveal-lines] .quad__cell::before { transform: scaleY(0); }
.js .quad[data-reveal-lines].is-in::before { transform: scaleX(1); transition: transform var(--dur-scroll) var(--ease-emph); }
.js .quad[data-reveal-lines].is-in .quad__cell::after { transform: scaleX(1); transition: transform var(--dur-scroll) var(--ease-emph); transition-delay: calc(var(--d, 0) * 110ms + 200ms); }
.js .quad[data-reveal-lines].is-in .quad__cell::before { transform: scaleY(1); transition: transform var(--dur-scroll) var(--ease-emph) 300ms; }

/* --- Where we measure it (paper): the rings ------------------------------ */

.levels { padding-block: var(--section-y); background: var(--paper); }
.levels__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.rings { position: relative; width: min(100%, 420px); margin: 0 auto; }
.rings__svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; transform-origin: center; transition: transform 700ms var(--ease-emph); }
/* Hover anywhere on the instrument: the whole thing grows a little and a
   soft gold haze rises behind it and spreads just past the outer ring. */
.rings::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 137, 44, 0.26) 0%, rgba(184, 137, 44, 0.12) 45%, rgba(184, 137, 44, 0) 70%);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-emph);
  pointer-events: none;
}
@media (hover: hover) {
  .rings:hover .rings__svg { transform: scale(1.05); }
  .rings:hover::before { opacity: 1; transform: scale(1); }
}
.rings__r { fill: var(--paper-warm); stroke: var(--navy-100); stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 0; pointer-events: visiblePainted; transition: stroke var(--dur-base) var(--ease-out), stroke-width var(--dur-base) var(--ease-out); }
.rings__r--org { stroke: var(--navy-300); stroke-width: 1.8; }
.rings__r--team { fill: var(--paper); }
.rings__core { fill: var(--navy); pointer-events: none; }
.rings__ticks { display: none; }
.rings__t {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text-muted);
  pointer-events: none;
  transition: fill var(--dur-base) var(--ease-out);
}
.js .rings[data-reveal] .rings__r { stroke-dashoffset: 100; }
.js .rings[data-reveal] .rings__t, .js .rings[data-reveal] .rings__core, .js .rings[data-reveal] .rings__ticks { opacity: 0; }
.js .rings[data-reveal].is-in .rings__r { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-in-out), stroke var(--dur-base) var(--ease-out), stroke-width var(--dur-base) var(--ease-out); }
.js .rings[data-reveal].is-in .rings__r--org  { transition-delay: 100ms, 0ms, 0ms; }
.js .rings[data-reveal].is-in .rings__r--team { transition-delay: 500ms, 0ms, 0ms; }
.js .rings[data-reveal].is-in .rings__r--lead { transition-delay: 900ms, 0ms, 0ms; }
.js .rings[data-reveal].is-in .rings__t, .js .rings[data-reveal].is-in .rings__core, .js .rings[data-reveal].is-in .rings__ticks { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out) 1500ms; }

/* Hover, both ways (no JS): an assessment lights its ring; a ring lights its assessment. */
.levels__grid:has(.level--org:hover)  .rings__r--org,  .levels__grid:has(.rings__r--org:hover)  .rings__r--org,
.levels__grid:has(.level--team:hover) .rings__r--team, .levels__grid:has(.rings__r--team:hover) .rings__r--team,
.levels__grid:has(.level--lead:hover) .rings__r--lead, .levels__grid:has(.rings__r--lead:hover) .rings__r--lead { stroke: var(--gold); stroke-width: 2.6; }
.levels__grid:has(.level--org:hover)  .rings__t--org,  .levels__grid:has(.rings__r--org:hover)  .rings__t--org,
.levels__grid:has(.level--team:hover) .rings__t--team, .levels__grid:has(.rings__r--team:hover) .rings__t--team,
.levels__grid:has(.level--lead:hover) .rings__t--lead, .levels__grid:has(.rings__r--lead:hover) .rings__t--lead { fill: var(--gold); }
.levels__grid:has(.rings__r--org:hover)  .level--org  .level__name,
.levels__grid:has(.rings__r--team:hover) .level--team .level__name,
.levels__grid:has(.rings__r--lead:hover) .level--lead .level__name,
.level:hover .level__name { color: var(--gold); }

.levels__title {
  margin: 0 0 var(--space-2xl);
  font-size: var(--step-4);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.levels__title em { font-style: italic; }
.levels__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.level { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-lg) 0; border-bottom: 1px solid var(--rule); }
.level__kind {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  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);
}
.level__start { color: var(--navy); letter-spacing: 0.06em; }
.level__start::before { content: "·"; margin-right: var(--space-sm); color: var(--text-meta); }
.level__name { margin: 0; font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.12; letter-spacing: -0.018em; color: var(--navy); transition: color var(--dur-base) var(--ease-out); }
.level__body { margin: 0; max-width: 40ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-muted); }

/* --- The close: the Snapshot band, identical to Case Studies and Executive Coaching (Home chat's .snapc; CSS copied until it moves to components.css) --- */

.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: 16ch;
  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 { transform: scale(1.035); }
.snapc__mark:hover .aperture__blades { transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg + 24deg)); }
.snapc__mark:hover .aperture__centre { transform: scale(1.14); }
/* The Snapshot button drives the aperture too (10/8, Brandon). */
.snapc:has(.snapc__actions .btn--primary:hover) .snapc__mark { transform: scale(1.035); }
.snapc:has(.snapc__actions .btn--primary:hover) .aperture__blades { transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg + 24deg)); }
.snapc:has(.snapc__actions .btn--primary: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; }
}

/* --- Breakpoints --------------------------------------------------------- */

@media (min-width: 640px) {
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quad__cell { padding: var(--space-xl) var(--space-xl) var(--space-xl) 0; }
  .quad__cell:nth-child(odd)::before { display: block; }
  .quad__cell:nth-child(even) { padding-left: var(--space-xl); padding-right: 0; }
}

@media (min-width: 1024px) {
  .psh__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); padding-block: var(--space-4xl) var(--space-5xl); }
  .psh__text { grid-column: 1 / span 6; }
  .venn { grid-column: 7 / span 6; justify-self: end; }

  /* Premise: the line on 1–7, the photograph on 9–12 (top-aligned), the
     pair under the line on 1–7 as two columns. */
  .premise__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); align-items: start; }
  .premise__big { grid-column: 1 / span 7; grid-row: 1; }
  .premise__media { grid-column: 9 / span 4; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
  .premise__pair { grid-column: 1 / span 7; grid-row: 2; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }

  .quad__cell { padding: var(--space-xl) var(--space-2xl) var(--space-xl) 0; }
  .quad__cell:nth-child(even) { padding-left: var(--space-2xl); padding-right: 0; }
  .quad__cell { grid-template-columns: 4.5rem 1fr; column-gap: var(--space-md); }
  .quad__n { grid-row: 1 / span 2; line-height: 1.1; }
  .quad__title { max-width: 14ch; }

  /* Levels: rings on 1–5, text on 7–12. */
  .levels__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); }
  .rings { grid-column: 1 / span 5; width: 100%; max-width: 460px; }
  .levels__text { grid-column: 7 / span 6; }
}

@media (prefers-reduced-motion: reduce) {
  .js .premise__media[data-reveal] img { clip-path: none; transition: none; }
  .js .quad[data-reveal-lines]::before, .js .quad[data-reveal-lines] .quad__cell::after, .js .quad[data-reveal-lines] .quad__cell::before { transform: none; transition: none; }
  .quad__title { transition: none; }
  .js .venn[data-reveal] .venn__a, .js .venn[data-reveal] .venn__b { stroke-dashoffset: 0; transition: none; }
  .js .venn[data-reveal] .venn__lens { fill-opacity: 0.09; transition: none; }
  .js .venn[data-reveal] .venn__label, .js .venn[data-reveal] .venn__n, .js .venn[data-reveal] .venn__four { opacity: 1; transition: none; }
  .js .rings[data-reveal] .rings__r { stroke-dashoffset: 0; transition: none; }
  .rings__svg, .rings::before { transition: none; }
  .js .rings[data-reveal] .rings__t, .js .rings[data-reveal] .rings__core, .js .rings[data-reveal] .rings__ticks { opacity: 1; transition: none; }
}