/* ==========================================================================
   EVAA — PARTNER WITH US
   Rebuilt 2026-07-29 from the client's own copy doc
   (17iIi8IQRYiyFNPGFY5kPHQwiHyCeuNkY0wxPxLBWfN0), VERBATIM, in its own order.
   The previous version of this page was DELETED on 7/28 to be rebuilt; this is
   that rebuild.

   ⚠️ ADDITIVE ONLY. Nothing appended to site.css or v4.css. The page loads
   site.css (tokens, buttons, .reveal, .phero, .triptych, .process) + v4.css
   (.v4-sec, .v4-eyebrow, .v4-lede, .v4-spine) + this file.

   ---- WHAT THIS PAGE UN-ORPHANS -------------------------------------------
   Deleting the old page on 7/28 left its CSS stranded in site.css — the same
   shape as the 54KB of V2 orphans found in the 7/28 strip, and flagged in
   session-notes as "delete them if the rebuild slips." The rebuild did not
   slip, so this page puts them back to work rather than deleting them:
     · .phero / .phero--dark / .phero__title / .phero__lede / .phero__intro
     · .triptych / .triptych__panel / .triptych__media / .triptych__text
     · .process / .process__step / .process__num / .process__title / __body
   ⚠️ The old page shipped the triptych with TWO placehold.co slots. This one
   fills both with real licensed assets — a placeholder is not an image, and
   the media gate does not count placehold.co URLs.

   ---- §3 MATCHES ABOUT, DELIBERATELY --------------------------------------
   🔴 This page's nine support areas are the SAME NINE as About's "Our
   Partnership" — 9 for 9, same order, one word-for-word — and the same eight
   as homepage §6. That is the same list on three pages.
   §3 was FIRST built as 21st.dev "ScrollTiltedGrid" (12434) precisely so the
   repetition would at least not be visual. Brees saw it and asked for the
   opposite (7/29): "I want those to be the same." So §3 is now About's
   treatment exactly, and the repetition is visual as well as textual across
   all three pages, knowingly. **Do not "restore variety" without asking him.**
   The stagger grid's CSS and its whole JS module were deleted in that edit,
   not orphaned.
   🔴 The underlying COPY duplication is a copy problem, not a design one, and
   is STILL UNRAISED with Sean/Alie — a note is drafted, awaiting approval.

   ---- WHAT IS SCROLL-DRIVEN, AND THE RULE BOTH OBEY ------------------------
   §4's values come forward in turn; §5's timeline spine fills as you descend.
   🔴 NEITHER EFFECT DIMS TEXT BELOW ITS CONTRAST FLOOR. Every "inactive" state
   passes 1.4.3 on its own and the active state only reinforces. This is the
   7/28 ruling ("dimming body text to signal 'not focused' is the wrong
   mechanism") AND the trap axe caught in this page's own first §3, where an
   opacity floor of .35 produced 13 serious violations. Measured in
   .shots/pwu-contrast.js. Do not deepen either inactive state.

   ---- COLOUR DISCIPLINE ----------------------------------------------------
   Ground order: navy → cream → band → navy → cream → navy-with-image. No two
   adjacent sections share a ground. Red on cream grounds only, gold on navy
   only, neither crosses. ⚠️ GOLD APPEARS EXACTLY ONCE — the hero eyebrow mark,
   matching About and the old version of this page.
   No gradients. No coloured left borders on cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 — HERO. .phero--dark + .triptych, both reused unchanged from site.css.
   .phero--dark sets `padding-block: 0 …` because the top padding comes from
   .triptych__text — which IS present here, unlike on About, so nothing needs
   re-supplying.
   -------------------------------------------------------------------------- */
.pwu-hero .triptych__text { text-align: center; }
.pwu-hero .phero__title,
.pwu-hero .phero__lede { margin-inline: auto; }
.pwu-hero .phero__title { max-width: 18ch; }
.pwu-hero .phero__lede { max-width: 34ch; }
.pwu-hero .btn-row { justify-content: center; }
/* §1.5 — THE HERO'S ARGUMENT CONTINUING.
   Brees, 7/29: "it's still kind of the hero… the three columns of paragraphs,
   I'm not fond of that."
   site.css's .phero__intro is a 3-up grid of 16px #AEB6CC — written to echo the
   triptych's three columns above it. In practice it read as three cramped
   columns of small grey type, i.e. a footnote under the hero rather than the
   hero still talking. Overridden here to one centred column at reading size.
   ⚠️ OVERRIDDEN, NOT EDITED IN site.css. This page is currently the only
   consumer of .phero__intro, but the additive-only separation still holds —
   the same discipline that kept V4 out of site.css.
   ⚠️ Colour changes too: #AEB6CC was tuned for 16px in a narrow column. At this
   size on navy-deep, cream at .86 measures far higher and reads warmer, which
   matters because this is hero copy, not caption copy. Measured in
   .shots/pwu-contrast.js. */
/* ⚠️ BREAKS OUT OF .wrap's 1240px CAP, ON PURPOSE (Brees, 7/29: "the text
   should be more to the left… that way we can make the sentences go longer").
   .wrap is `max-width:1240px; margin-inline:auto`, so at 1440 it starts the copy
   ~164px in. Overriding to margin-inline:0 drops that to the gutter alone (64px)
   — 100px further left — and the wider measures below use the room it frees.
   ⚠️ Still capped at 1600px rather than full-bleed: with margin-inline:0 an
   uncapped block would run the divider rule nearly the full width of a 2560
   monitor while the text under it stayed ~750px, which reads as a broken rule
   rather than an editorial one. 1600 is transparent at 1440 and sane above it.
   ⚠️ Asymmetric against the centred sections below it, deliberately — this
   block belongs to the hero, and the triptych above already bleeds to the
   viewport edges. */
.pwu-hero__intro-wrap {
  margin-top: clamp(var(--s5), 5vw, var(--s6));
  max-width: 1600px; margin-inline: 0;
}
/* 🔴 RE-CENTRE ABOVE 1730px, OR ULTRAWIDE BREAKS.
   1600 + two 64px gutters = 1728. Past that the wrapper stops growing while the
   page keeps widening, so `margin-inline: 0` pins §1.5 hard against the left
   edge while every section below it stays centred. Measured at 2560: §1.5 at
   left 64 vs §2 at left 724 — a 660px step that reads as a layout fault, not an
   editorial choice. Re-centring the (still wider) 1600px block keeps it left of
   the 1240px sections without the jump. Verified at 1024 / 1440 / 2560. */
@media (min-width: 1730px) {
  .pwu-hero__intro-wrap { margin-inline: auto; }
}
.pwu-hero .phero__intro {
  /* TWO-COLUMN EDITORIAL SPREAD (Brees, 7/29 — "not sold on the section",
     after four passes on type size). The sizes were never the problem: this is
     the only purely typographic block on the page, and every other section has
     something holding it (an image, the sticky column, a parallax ground, the
     ring timeline). §1.5 had nothing to push against, and the right ~45% sat
     empty — the lead ran 931px in a 1440 viewport.
     Lead holds the left column; body + payoff share the right. Same left edge,
     same alignment, no new assets and no new mechanics — layout only. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  column-gap: clamp(36px, 5vw, 88px);
  row-gap: var(--s4);
  align-items: start;
  /* LEFT-ALIGNED TO THE CONTAINER (Brees, 7/29). The block fills .wrap and each
     tier keeps its OWN measure from the left edge, rather than the whole thing
     being centred. This is also closer to the homepage reference it is modelled
     on — .pf-para / .pf-payoff are left-aligned in the pinned overlay's grid.
     ⚠️ Deliberate contrast with the triptych ABOVE it, which stays centred: the
     hero is display type, this is reading type. Do not "fix" one to match the
     other without asking. */
  max-width: none; margin-inline: 0;
  text-align: left;
  padding-top: clamp(var(--s5), 5vw, var(--s6));
}
/* ⚠️ .phero__intro IS KEPT AS THE WRAPPER ON PURPOSE. Only its grid is
   overridden. Swapping it for a new class would have left site.css's
   .phero__intro rules with zero consumers — a fresh orphan of exactly the kind
   this page was built to clear up. */

/* ---- THE THREE TIERS ------------------------------------------------------
   🔴 THREE CLASSES DEEP, ON PURPOSE — DO NOT SHORTEN THESE SELECTORS.
   site.css's `.phero__intro p` is specificity (0,1,1). A bare `.pwu-lead` is
   (0,1,0) and LOSES, so the first cut of this silently rendered ALL THREE tiers
   at 16px — the whole point of the change, gone, and it looked like a type
   choice rather than a broken rule. Caught by measuring computed styles, not by
   looking; the screenshot was perfectly plausible.
   FOURTH instance of this exact cascade family in this project (see also
   .ab-phil__turn, .ab-commit__last and .ab-phil__turn's centring). The lesson
   each time: before writing a rule, check what ELSE already targets the
   element — an inherited `element` selector beats a lone class.
   Brees, 7/29: "the first paragraph would be like the title, then the next two
   would be the text… maybe the last paragraph is designed large. That's
   essentially what we did on the homepage over the video."
   So the scales below are lifted from site.css's own .pf-para / .pf-payoff
   rather than invented: lead large, payoff bigger AND heavier. site.css's note
   on the payoff — "Emphasis is size + weight only (no gold, no gradient —
   house rules)" — holds here too.
   ⚠️ Centred, because this block continues a centred hero. The homepage's
   version is left-aligned only because it sits in the pinned overlay's grid.
   -------------------------------------------------------------------------- */
.pwu-hero .phero__intro .pwu-lead {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.36;
  color: var(--cream);
  /* No max-width: the grid column governs the measure now. A ch cap on top of
     the column would just reintroduce the empty gutter this change removes. */
}
.pwu-hero .phero__intro .pwu-intro-body {
  color: rgba(251, 247, 239, .86);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.68;
}
/* The closing statement.
   ⚠️ SMALLER THAN THE LEAD, NOT BIGGER (Brees, 7/29: "I don't like how big
   'we believe the most successful partnerships' is — it doesn't need to be
   that big"). It ran at 42.4px, above the lead's 35.2px, following the
   homepage's .pf-payoff where the payoff IS the climax of the whole hero.
   That does not transfer here: on the homepage the payoff is four short
   promises ("Your hospital keeps its name…") that carry the pitch. This one is
   a single 110-character sentence, and at display scale it simply shouted.
   Now ~28px — below the lead — with WEIGHT (600) and the serif doing the
   emphasis instead of size. Still site.css's rule for the payoff: "emphasis is
   size + weight only (no gold, no gradient)"; this just leans on the weight.
   ⚠️ Measure widened 30ch → 42ch to match: smaller type on a short measure was
   setting this as four stacked fragments rather than a sentence. */
.pwu-hero .phero__intro .pwu-payoff {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 1.95vw, 1.75rem); line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--cream);
  margin-top: var(--s4);
}
/* The right column. Body sits above the payoff with real air between them —
   they are two different registers, not one continuous block. */
.pwu-intro-col { display: grid; align-content: start; }

/* 🔴 THIS MEDIA QUERY MUST STAY AFTER THE TWO-COLUMN RULE ABOVE.
   Media queries add NO specificity — source order decides between rules of
   equal weight. It was first written above `.pwu-hero .phero__intro`, so the
   two-column rule won at every width and 390px rendered the 35px lead inside a
   160px column. Caught by reading computed grid-template-columns at 390, not by
   looking at a screenshot.
   Fifth instance of the same family of cascade bug on this project — and the
   first where the loser was a media query rather than a class. */
@media (max-width: 860px) {
  /* Back to one column. Lead, then body, then payoff — reading order is already
     the DOM order, so nothing needs reordering. */
  .pwu-hero .phero__intro { grid-template-columns: 1fr; }
}

/* 🔴 THE SCRUB OFF-STATE IS A CONTRAST DECISION, NOT A STYLE ONE.
   site.css sets [data-scrub] .w { opacity:.5 } and explains why it is not the
   near-invisible value its reference used: at 22.4px the lead does NOT qualify
   for the large-text exemption, so its off-state has to clear 4.5:1 outright.
   Measured on THIS ground in .shots/pwu-contrast.js. Do not lower it to make
   the reveal more dramatic — that is the same failure axe caught in this
   page's first §3. */
@media (prefers-reduced-motion: reduce) {
  /* initScrub already adds .on to every word under reduced motion; this is the
     belt-and-braces so nothing can sit part-revealed. */
  .pwu-lead .w, .pwu-payoff .w { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   §2 — A DIFFERENT KIND OF PARTNERSHIP (cream). Copy left, image right.
   -------------------------------------------------------------------------- */
.pwu-diff__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.pwu-diff__body { display: grid; gap: var(--s3); margin-top: var(--s5); }
.pwu-diff__body p { color: var(--navy-soft); font-size: 17px; line-height: 1.72; max-width: 62ch; margin: 0; }
.pwu-figure { margin: 0; }
.pwu-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); object-fit: cover; aspect-ratio: 4 / 5;
}
@media (max-width: 860px) {
  .pwu-diff__grid { grid-template-columns: 1fr; }
  .pwu-figure img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   §3 — HOW WE SUPPORT OUR PARTNERS
   ← IDENTICAL TO ABOUT'S "OUR PARTNERSHIP", which is homepage §6's treatment.
   Brees, 7/29: "I want those to be the same."

   🔴 THIS REPLACED 21st.dev "ScrollTiltedGrid" (12434). Its CSS (.pwu-tilt,
   .pwu-tile, .pwu-tile__n, .pwu-tile__t, .pwu-tilt__close, the perspective and
   the reduced-motion guard) was DELETED IN THIS EDIT, and its entire JS module
   went with it — not left orphaned. That is the 7/28 lesson: deleting V2 left
   54KB of orphans behind.
   ⚠️ ZERO NEW LAYOUT CSS — .v4-ops__* and .v4-op* come from v4.css unchanged,
   exactly as on About, so retuning homepage §6 retunes all three pages.
   Only the ordinal column is page-specific: §6's rows are NAME + DESCRIPTION
   and the copy doc gives these nine no descriptions, so .8fr/1.2fr would leave
   every row half empty.
   -------------------------------------------------------------------------- */
.pwu-support .v4-op { grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; }
.pwu-op__n {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--navy-soft);
}
.pwu-support .v4-ops__list { list-style: none; margin: 0; padding-left: clamp(0px, 4vw, 56px); }
.pwu-support .v4-op__name { font-size: clamp(1rem, 1.45vw, 1.15rem); line-height: 1.4; max-width: 46ch; }
/* NB .pwu-support__close was DELETED 7/29 with the paragraph it styled — both
   of the doc's sentences now sit together in the lede above the list, at Brees'
   instruction. No orphan left behind. */
@media (max-width: 900px) { .pwu-support .v4-ops__list { padding-left: 0; } }

/* --------------------------------------------------------------------------
   §4 — WHO WE PARTNER WITH (navy)
   ONE FLOWING STATEMENT, values coming forward in turn as you scroll.
   Brees, 7/29: "I'm not sold on that section. I think that there needs to be a
   better way to do that." The first cut was a centred stack of six ruled rows.

   ⚠️ THE COPY IS UNTOUCHED. No words added or removed to make it read as a
   sentence — not even an "and" — because copy on this project is verbatim.
   The separator is a CSS ::after and carries no meaning, and the six values
   are still a real <ul>/<li>, so assistive tech still hears a list of six.
   Layout is inline; semantics are not.

   🔴 THE INACTIVE STATE IS NOT A DIM. rgba(251,247,239,.82) on navy-deep
   passes 1.4.3 as body text ON ITS OWN. Active adds full cream plus an
   underline that wipes in — a reinforcement, never the thing that makes the
   words readable. Deepening this to make the effect more obvious re-creates
   the exact failure axe caught in this page's first §3.
   -------------------------------------------------------------------------- */
/* Flat scrim, not a gradient — house rule, same solution as §6 and homepage §7.
   The section carries .v4-sec--dark, so navy-deep is the fallback ground if the
   image never loads; §6 had to be given one explicitly because it had none.
   🔴 THE POSITIONING NOW LIVES IN pinned-bg.css, NOT HERE.
   This section's background is PINNED — it stays put while the copy scrolls
   over it. Only the scrim COLOUR is page-specific; the geometry is shared.
   ⚠️ The old `.pwu-values-sec { overflow: hidden }` was DELETED, not moved.
   Overflow on the section silently turns the sticky media into a no-op — the
   exact trap v4.css warns about on homepage §7. Clipping now happens on
   .pin-bg__media instead. Do not put overflow back on this section.
   ⚠️ `.pwu-values__bg` went with it — the image is `.pin-bg__img` now. */
.pwu-values__scrim { background: rgba(18, 29, 59, .84); }

.pwu-values { max-width: 900px; margin-inline: auto; text-align: center; }
.pwu-values__lede {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4;
  color: rgba(251, 247, 239, .82); max-width: 34ch;
  margin: var(--s4) auto 0;
}
.pwu-values__flow {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.5;
}
.pwu-values__flow li { display: inline; }
/* The separator sits on the <li>, OUTSIDE .pwu-value, so it never picks up the
   value's underline. Decorative — a middot between phrases, suppressed after
   the last so the statement ends cleanly. */
.pwu-values__flow li:not(:last-child)::after {
  content: " \00B7 "; color: rgba(251, 247, 239, .45);
}

/* 🔴 text-decoration, NOT an absolutely-positioned ::before.
   The first cut underlined with `position:absolute; left:0; right:0` on these
   spans — but they are INLINE and several of them wrap across lines ("Integrity
   and ethical leadership", "Long-term sustainability"). An absolute box on a
   wrapped inline resolves against the whole inline box, so the rule ran from
   the start of the first line to the end of the last and struck through the
   text between. text-decoration is line-aware and draws correctly on each
   fragment, and text-decoration-color is animatable.
   Gold is already spent once on this page (the hero eyebrow mark), so the
   underline is cream. */
.pwu-value {
  color: rgba(251, 247, 239, .82);          /* passes on its own — see above */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .5s var(--ease), text-decoration-color .5s var(--ease);
}
.pwu-value.is-on {
  color: var(--cream);
  text-decoration-color: rgba(251, 247, 239, .55);
}

@media (prefers-reduced-motion: reduce) {
  /* Everything lit, nothing transitions — the statement reads at full strength. */
  .pwu-value {
    color: var(--cream) !important;
    text-decoration-color: rgba(251, 247, 239, .55) !important;
    transition: none !important;
  }
}

.pwu-values__close {
  margin: var(--s5) auto 0; max-width: 60ch;
  color: rgba(251, 247, 239, .82); font-size: 17px; line-height: 1.72;
}

/* --------------------------------------------------------------------------
   §5 — OUR PARTNERSHIP PROCESS (cream)
   .process / .process__step / .process__num / .process__title / .process__body
   are reused UNCHANGED from site.css — they were written for this page and
   orphaned when it was deleted on 7/28. Note site.css's own comment: the spine
   is a ::before on the <ol>, NOT a left border on each step, because coloured
   left borders on cards are a standing house rule.
   -------------------------------------------------------------------------- */
.pwu-process__intro { display: grid; gap: var(--s2); margin-top: var(--s3); }
.pwu-process__intro p { color: var(--navy-soft); font-size: 17px; line-height: 1.72; max-width: 62ch; margin: 0; }

/* THE TIMELINE FILL (Brees, 7/29: "make this feel more animated, like a
   timeline, feeling like this is what they're going to be going through").
   site.css's .process::before is the static track; this is a second rule laid
   exactly on top of it whose height follows scroll. Geometry is COPIED from
   that ::before, not re-derived — top:14px, bottom:14px, left:21px — so the
   two stay aligned if either is ever retuned.
   ⚠️ left:21px is the numeral column's centre (44px grid column ÷ 2 − ½px).
   If .process__step's grid-template-columns changes, BOTH rules move. */
/* ⚠️ THE FIRST VERSION OF THIS TIMELINE WAS BLAND, AND THE DIAGNOSIS MATTERS.
   Brees, 7/29: "it still feels bland." The motion was already correct — the
   problem was that there was nothing with visual weight for the motion to
   happen TO. Three specific causes, all fixed here:
     1. The right ~40% of the section was empty. Steps sat in a narrow left
        column with nothing balancing them, so it read as an unfinished
        two-column layout. → .process__text is now a title/body split that uses
        the full width, mirroring .v4-op's name/desc rhythm elsewhere on the site.
     2. The timeline's main device was a 1px hairline — the faintest mark on
        the page carrying the whole "journey" idea. → 2px, and it fills solid.
     3. Step markers were 12px numerals: labels, not stations. → 64px rings
        with display-scale numerals, filling as they are reached.
   Nothing new is introduced to maintain — no imagery, no new mechanic, just
   weight. The .process markup in the HTML is still site.css's, untouched.

   ⚠️ THE THREE GEOMETRIES BELOW ARE COUPLED. The step's numeral column, the
   spine's `left`, and the fill's `left` must always agree:
       column 84px  →  centre 42px  →  spine/fill left 41px (2px wide)
   site.css's own .process::before is written for a 44px column at left:21px;
   both are overridden here. Change one, change all three. */
.pwu-process { position: relative; }
.pwu-process .process__step {
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: clamp(var(--s3), 2.4vw, var(--s5));
}
/* Override site.css's hairline track for the wider column. Ends are pulled in
   to the first and last ring CENTRES (32px = half of 64), so the line connects
   the stations rather than overshooting past them. */
.pwu-process::before { top: 32px; bottom: 32px; left: 41px; width: 2px; }
.pwu-process__fill {
  position: absolute; top: 32px; left: 41px;
  width: 2px; height: 0; max-height: calc(100% - 64px);
  background: var(--red);
  transition: height .15s linear;
  pointer-events: none;
}

/* THE STATIONS. site.css's .process__num keeps a cream background to mask the
   track behind it; that still applies, it is just a ring now. */
.pwu-process .process__num {
  width: 64px; height: 64px; margin-left: 10px;   /* (84 − 64) ÷ 2 */
  align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 2px solid var(--rule);
  background: var(--cream);
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: 0;
  color: var(--navy-soft);
  padding-block: 0;
  transition: color .35s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease);
}
/* 🔴 BOTH STATES PASS 1.4.3 ON THEIR OWN — unreached is --navy-soft on cream
   (6.55:1); reached is cream on --red (5.09:1, the same pair inverted). The
   ring fill marks progress; it is never what makes the numeral legible. Do not
   grey the unreached further to sharpen the effect — that is the failure axe
   caught in this page's first §3. */
.pwu-process .process__step.is-reached .process__num {
  color: var(--cream); background: var(--red); border-color: var(--red);
}

/* Title left, body right — this is what fills the width that was empty. Same
   .8fr/1.2fr rhythm as .v4-op elsewhere on the site. */
.pwu-process .process__text {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: clamp(var(--s3), 3vw, var(--s5)); align-items: baseline;
}
.pwu-process .process__title { margin-bottom: 0; }
.pwu-process .process__body { max-width: 60ch; }

@media (max-width: 860px) {
  /* One column again, and smaller stations. The coupled geometry moves
     together: 56px column → centre 28px → spine/fill left 27px. */
  .pwu-process .process__step { grid-template-columns: 56px minmax(0, 1fr); }
  .pwu-process .process__num { width: 44px; height: 44px; margin-left: 6px; }
  .pwu-process::before,
  .pwu-process__fill { left: 27px; top: 22px; }
  .pwu-process::before { bottom: 22px; }
  .pwu-process__fill { max-height: calc(100% - 44px); }
  .pwu-process .process__text { grid-template-columns: 1fr; row-gap: var(--s1); }
  .pwu-process .process__title { margin-bottom: var(--s1); }
}

@media (prefers-reduced-motion: reduce) {
  /* No travelling fill. The track is shown complete and every station reached,
     so the section still reads as a finished four-stage sequence. */
  .pwu-process__fill { height: 100% !important; transition: none !important; }
  .pwu-process .process__num {
    color: var(--cream) !important; background: var(--red) !important;
    border-color: var(--red) !important; transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   §6 — LET'S START THE CONVERSATION. Background image + flat scrim.
   ⚠️ SCRIM OPACITY IS DERIVED — `node .shots/pwu-contrast.js` finds the
   brightest pixel in the image, composites it under the scrim and measures
   every text colour on top. deep-a11y.js resolves the SECTION's
   background-color and CANNOT see an image behind a scrim, so it passes this
   section regardless of what the scrim does. Re-measure on any change.
   Flat, not a gradient — house rule, and the same solution as homepage §7.
   -------------------------------------------------------------------------- */
/* 🔴 background-color IS LOAD-BEARING, do not drop it as "the image covers it".
   Two reasons, found by deep-a11y.js reporting three contrast FAILs here:
   1. REAL DEFECT — if the image 404s or is still loading, the scrim is an .82
      overlay on whatever is behind it. Without this, that is the page's CREAM
      base, and cream text would land on a light ground. With it, the fallback
      ground is navy-deep and the text stays readable.
   2. deep-a11y.js resolves the SECTION's background-color and cannot see the
      image or the scrim, so with no colour set it measured cream-on-cream and
      reported 1.00:1. About's §4 passed the same check only because it carries
      .v4-sec--dark. The right fix is to give the section a real dark ground,
      NOT to silence the checker.
   The measured truth for the composited case is in .shots/pwu-contrast.js. */
.pwu-close { position: relative; overflow: hidden; text-align: center; background: var(--navy-deep); }
.pwu-close__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.pwu-close__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(18, 29, 59, .82); }
.pwu-close .wrap { position: relative; z-index: 2; }
.pwu-close__title { color: var(--cream); max-width: 20ch; margin-inline: auto; }
.pwu-close__body { display: grid; gap: var(--s3); margin-top: var(--s4); }
/* 🔴 `margin-inline: auto` — QA'd BY BREES 7/31: "the body text is centered,
   but like to the left, so that should be all centered in the container."
   THE CAUSE: `text-align: center` centres the WORDS INSIDE the box; it does
   nothing to place the BOX. These paragraphs had a `max-width` but no inline
   auto margin, so each box sat flush left in the grid column while its text
   centred within it — measured **243-249px off** the container's centre.
   `.pwu-close__title` directly above has always had `margin-inline: auto`; the
   body paragraphs were simply missed when this section was built.
   📌 THE RULE: any centred block with a max-width needs BOTH — `text-align`
   for the text and an auto inline margin for the box. One without the other
   looks deliberate and is not. Now checked by `.shots/centre-check.js`. */
.pwu-close__body p {
  color: rgba(251, 247, 239, .86); font-size: 17px; line-height: 1.72;
  max-width: 62ch; margin-inline: auto;
}
/* The doc bolds this final line; it is the page's closing instruction, so it
   is set up rather than emboldened — bold on a dark ground at this size muddies. */
.pwu-close__last {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem) !important;
  line-height: 1.45; color: var(--cream) !important; max-width: 44ch !important;
}
.pwu-close .btn-row { justify-content: center; margin-top: var(--s5); }