/* sec-why.css: the Why VORA page (builder B). Colours only from tokens.css; the four brand colours are fills and shapes, never text.
   Pinned layouts and the reveal states switch on only when sec-why.js adds .is-pin / .is-armed, so with scripts off, under 1024px
   or with prefers-reduced-motion the page is the plain stacked layout in its finished state. Nothing here widens the page. */

.shp--coral { fill: var(--coral); } .shp--sun { fill: var(--sun); } .shp--leaf { fill: var(--leaf); } .shp--violet { fill: var(--violet); }
.wv-eb .shp, .wv-chip .shp, .wv-hub__li .shp, .wv-out__li .shp, .wv-st__name .shp, .wv-role > .shp, .wv-close__label .shp { width: 14px; height: 14px; flex: none; }
.wv-chip--sun .shp, .wv-chip--coral .shp, .wv-chip--leaf .shp, .wv-chip--violet .shp { width: 13px; height: 13px; }

/* a headline's italic part starts its own line (the plain sentence first, the turn second) */
.wv-hero__h1 em, .wv-carry__h em, .wv-ctx__h em, .wv-stages__h em, .wv-owner__h em { display: block; }

/* ---- eyebrow chip: one shape and a sentence-case label ---------------------------------------------------------------------- */
.wv-eb { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 8px 14px 8px 12px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--edge); font: 600 14px/1 var(--body); color: var(--ink); }
.wv-eb--photo { background: var(--white-18); border-color: var(--white-18); color: var(--card); backdrop-filter: blur(6px); }

/* ---- 1. hero ------------------------------------------------------------------------------------------------------------------ */
.wv-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(calc(100svh - 56px), 900px); padding: 150px 0 clamp(36px, 6vw, 72px); background: var(--ink); color: var(--card); overflow: clip; border-radius: 0 0 var(--r-section) var(--r-section); }
.wv-hero__bg { position: absolute; inset: 0; z-index: -2; transform-origin: 62% 42%; will-change: transform; }
.wv-hero__bg picture, .wv-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; }
.wv-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 70%, transparent) 48%, color-mix(in srgb, var(--ink) 18%, transparent) 100%); }
.wv-hero__in { position: relative; }
.wv-hero__h1 { margin: 0; max-width: 13em; color: var(--card); font-size: var(--fs-h1); }
.wv-hero__lead { margin: 24px 0 0; max-width: 40rem; font: 500 clamp(17px, 1.6vw, 21px)/1.4 var(--body); color: var(--white-72); }
.wv-hero__actions { margin-top: 32px; }
@media (min-width: 768px) {
  .wv-hero__veil { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 66%, transparent) 46%, color-mix(in srgb, var(--ink) 8%, transparent) 86%), linear-gradient(to top, color-mix(in srgb, var(--ink) 60%, transparent) 0%, transparent 40%); }
}

/* ---- 2. carry: the pain lines and their people --------------------------------------------------------------------------------- */
.wv-carry { padding-top: var(--band-pad); }
.wv-carry__h { max-width: 17em; }
.wv-stage { margin-top: clamp(28px, 4.5vw, 52px); }
.wv-pains { list-style: none; margin: 0; padding: 0; }
.wv-row { display: grid; gap: 20px; padding-block: 28px; border-top: 1px solid var(--edge); }
.wv-row:last-child { border-bottom: 1px solid var(--edge); }
.wv-pain { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.wv-pain__n { flex: none; min-width: 2.6em; padding: 6px 0; border-radius: var(--r-pill); border: 1px solid var(--ink-30); text-align: center; font: 600 13px/1 var(--body); letter-spacing: .06em; color: var(--ink-70); }
.wv-pain__t { font: 500 clamp(20px, 2.4vw, 26px)/1.25 var(--body); color: var(--ink); text-wrap: balance; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ink); opacity: .62; }
.wv-row.is-active .wv-pain__n { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* the person card */
.wv-card { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-xl); overflow: clip; }
.wv-card__photo { margin: 0; position: relative; min-height: 0; background: var(--paper-2); }
.wv-card__photo picture, .wv-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* the foreman's photo is a tight square (hat to chin): in a wide card keep the chin and let the hat's top go */
.wv-card__photo[data-ph="c-mei"] img { object-position: 60% 100%; }
.wv-card--lg .wv-card__photo { aspect-ratio: 5 / 4; }
.wv-card__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: clamp(20px, 3vw, 40px); }
.wv-card__name { margin: 0; font: 400 clamp(32px, 3.4vw, 46px)/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.wv-card__role { margin: -4px 0 0; font: 600 16px/1.3 var(--body); color: var(--ink-70); }
.wv-card__line { margin: 6px 0 0; font: 500 clamp(18px, 1.55vw, 21px)/1.38 var(--body); color: var(--ink); text-wrap: pretty; }
.wv-chip { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 9px 14px 9px 12px; border-radius: var(--r-pill); font: 600 15px/1 var(--body); color: var(--ink); }
.wv-chip--coral { background: var(--coral-14); } .wv-chip--sun { background: var(--sun-14); } .wv-chip--leaf { background: var(--leaf-14); } .wv-chip--violet { background: var(--violet-14); }
@media (min-width: 768px) {
  .wv-card--lg { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .wv-card--lg .wv-card__photo { aspect-ratio: auto; min-height: 340px; }
  .wv-row { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 36px; }
}

/* reveal states (armed by sec-why.js, only when it runs, motion is on, and the layout is not pinned) */
.wv-row.is-armed .wv-card { transition: opacity .7s var(--ease-rise) .3s, translate .7s var(--ease-rise) .3s; }
.wv-row.is-armed:not(.is-in) .wv-card { opacity: 0; translate: 0 24px; }
.wv-row.is-armed .wv-pain__t { transition: text-decoration-color .5s var(--ease-draw) .1s, opacity .5s var(--ease-draw) .1s; }
.wv-row.is-armed:not(.is-in) .wv-pain__t { text-decoration-color: transparent; opacity: 1; }
.wv-rv.is-armed { transition: opacity .7s var(--ease-rise) var(--wv-d, 0s), translate .7s var(--ease-rise) var(--wv-d, 0s); }
.wv-rv.is-armed:not(.is-in) { opacity: 0; translate: 0 24px; }

/* pinned (from 1024): the pain lines stay in the left column, the person cards slide in on the right, one row per scroll step */
@media (min-width: 1024px) {
  .wv-carry.is-pin { min-height: 100dvh; display: flex; align-items: center; padding: 112px 0 40px; overflow: clip; }
  .wv-carry.is-pin .wv-carry__in { width: min(100% - 2 * var(--gutter-x), var(--content)); }
  .wv-carry.is-pin .wv-stage { position: relative; height: clamp(400px, calc(100dvh - 330px), 560px); margin-top: 32px; overflow: clip; }
  .wv-carry.is-pin .wv-pains { width: 40%; height: 100%; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .wv-carry.is-pin .wv-row { display: flex; align-items: center; padding-block: 0; }
  .wv-carry.is-pin .wv-row:last-child { border-bottom: 0; }
  .wv-carry.is-pin .wv-pain__t { font-size: clamp(18px, 1.7vw, 24px); }
  .wv-carry.is-pin .wv-card { position: absolute; top: 0; bottom: 0; left: 46%; right: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); will-change: transform, opacity; }
  .wv-carry.is-pin .wv-card__photo { height: 100%; aspect-ratio: auto; min-height: 0; }
  .wv-carry.is-pin .wv-card__name { font-size: clamp(32px, 3.4vw, 46px); }
}

/* "Life with VORA." and the closing lines (the row of three smaller cards was removed) */
.wv-life { padding-block: clamp(56px, 8vw, 104px) var(--band-pad); }
.wv-close { margin-top: 0; max-width: 56rem; }
.wv-close__label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 18px/1 var(--body); color: var(--ink); }
.wv-close__line { margin: 18px 0 0; font: 400 var(--fs-h3)/1.02 var(--display); letter-spacing: -.02em; color: var(--ink-70); text-wrap: balance; }
.wv-close__big { margin: 10px 0 0; font: 400 var(--fs-close)/var(--lh-close) var(--display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.wv-close__big em { font-style: italic; }
.wv-note { margin: 36px 0 0; font: 500 14px/1.4 var(--body); color: var(--ink-70); }

/* ---- 3. context together (ink panel; typography, chips and their own mark only) -------------------------------------------------- */
.wv-ctx { margin: 0 clamp(8px, 1.5vw, 20px); padding-block: clamp(56px, 8vw, 104px); background: var(--ink); color: var(--card); border-radius: var(--r-section); overflow: clip; }
.wv-ctx__h { max-width: 15em; color: var(--card); }
.wv-ctx__grid { display: grid; gap: 28px; margin-top: clamp(36px, 5vw, 60px); }
.wv-col__label { margin: 0 0 12px; font: 600 16px/1 var(--body); color: var(--white-72); }
.wv-hero :focus-visible, .wv-ctx :focus-visible { outline-color: var(--card); }
.wv-col__title { margin: 0 0 24px; font: 400 clamp(28px, 2.6vw, 36px)/1.04 var(--display); letter-spacing: -.02em; color: var(--card); text-wrap: balance; }
.wv-in { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wv-in__chip { padding: 12px 18px; border-radius: var(--r-pill); background: var(--white-10); border: 1px solid var(--white-18); font: 500 17px/1 var(--body); color: var(--card); }
.wv-col--hub { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--white-10); border: 1px solid var(--white-18); }
.wv-hub__mark { display: block; width: min(100%, 300px); height: auto; margin: 0 0 28px; }
.wv-hub, .wv-out { list-style: none; margin: 0; padding: 0; }
.wv-hub__li, .wv-out__li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--white-18); font: 500 18px/1.35 var(--body); color: var(--card); }
.wv-hub__li .shp, .wv-out__li .shp { margin-top: 5px; }
.wv-ctx__note { margin: clamp(36px, 5vw, 56px) 0 0; max-width: 40rem; font: 500 16px/1.45 var(--body); color: var(--white-72); }
@media (min-width: 1024px) {
  .wv-ctx__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px; align-items: start; }
}

/* ---- 4. five stages ---------------------------------------------------------------------------------------------------------- */
.wv-stages { padding-block: var(--band-pad) 0; }
.wv-stages__h { max-width: 14em; }
.wv-track { list-style: none; margin: clamp(28px, 4vw, 48px) auto 0; padding: 0; width: min(100% - 2 * var(--gutter-x), var(--content)); display: grid; gap: 20px; }
.wv-st { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-xl); overflow: clip; }
.wv-st__photo { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); }
.wv-st__photo picture, .wv-st__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wv-st__n { position: absolute; left: 0; top: 0; margin: 0; padding: 2px 18px 6px 16px; background: var(--card); border-bottom-right-radius: var(--r-lg); font: 400 clamp(58px, 8vw, 84px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.wv-st__body { padding: 22px 24px 26px; }
.wv-st__name { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 clamp(30px, 3vw, 36px)/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.wv-st__line { margin: 12px 0 0; font: 500 17px/1.4 var(--body); color: var(--ink-70); }
.wv-stages__bar { display: none; }
.wv-st.is-armed { transition: opacity .7s var(--ease-rise), translate .7s var(--ease-rise); }
.wv-st.is-armed:not(.is-in) { opacity: 0; translate: 0 24px; }
.wv-stclose { padding-block: clamp(56px, 8vw, 104px) 0; }
.wv-stclose__t { margin: 0; max-width: 18em; font: 400 var(--fs-h2)/1 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
@media (min-width: 768px) {
  .wv-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wv-stages:not(.is-pin) .wv-st:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .wv-stages:not(.is-pin) .wv-st:last-child:nth-child(odd) .wv-st__photo { flex: 1 1 50%; aspect-ratio: auto; min-height: 280px; }
  .wv-stages:not(.is-pin) .wv-st:last-child:nth-child(odd) .wv-st__body { flex: 1 1 50%; align-self: center; padding: 32px; }
}
@media (min-width: 1024px) {
  .wv-stages.is-pin { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: 104px 40px; overflow: clip; }
  .wv-stages.is-pin .wv-stages__head { width: min(100% - 2 * var(--gutter-x), var(--content)); }
  .wv-stages.is-pin .wv-track { display: flex; gap: 24px; width: max-content; max-width: none; margin: 28px 0 0; padding-inline: var(--gutter-x); will-change: transform; }
  .wv-stages.is-pin .wv-st { flex: 0 0 clamp(340px, 30vw, 440px); height: clamp(380px, calc(100dvh - 330px), 600px); grid-column: auto; flex-direction: column; }
  .wv-stages.is-pin .wv-st__photo { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .wv-stages.is-pin .wv-st__body { flex: none; padding: 20px 24px 22px; }
  .wv-stages.is-pin .wv-st__line { font-size: 16px; }
  .wv-stages.is-pin .wv-stages__bar { display: block; width: min(100% - 2 * var(--gutter-x), var(--content)); height: 2px; margin: 28px auto 0; background: var(--ink-10); }
  .wv-stages.is-pin .wv-stages__fill { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
}

/* ---- 5. start with the owner -------------------------------------------------------------------------------------------------- */
.wv-owner { padding-block: var(--band-pad); }
.wv-owner__photo { margin: 0; border-radius: var(--r-xl); overflow: clip; aspect-ratio: 4 / 3; background: var(--paper-2); }
.wv-owner__photo picture, .wv-owner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; }
.wv-owner__grid { display: grid; gap: 32px; margin-top: clamp(36px, 5vw, 64px); }
.wv-owner__h { max-width: 12em; }
.wv-owner__body { margin: 24px 0 0; max-width: 34rem; font: 500 clamp(18px, 1.6vw, 20px)/1.45 var(--body); color: var(--ink-70); }
.wv-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wv-role { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: var(--r-lg); }
.wv-role > .shp { width: 22px; height: 22px; margin-top: 3px; }
.wv-role--coral { background: var(--coral-14); } .wv-role--sun { background: var(--sun-14); } .wv-role--leaf { background: var(--leaf-14); } .wv-role--violet { background: var(--violet-14); }
.wv-role__name { margin: 0; font: 600 18px/1.2 var(--body); color: var(--ink); }
.wv-role__line { margin: 6px 0 0; font: 500 17px/1.4 var(--body); color: var(--ink-70); }
.wv-owner__close { margin: clamp(48px, 7vw, 88px) 0 0; max-width: 20em; font: 400 var(--fs-h2)/1 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
@media (min-width: 768px) { .wv-owner__photo { aspect-ratio: 21 / 10; } }
@media (min-width: 1024px) {
  .wv-owner__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .wv-owner__copy { position: sticky; top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .wv-rv, .wv-st, .wv-row .wv-card { opacity: 1 !important; translate: none !important; transition: none !important; }
  .wv-hero__bg { transform: none !important; }
}