/* ============================================================================
   United Way of Rhode Island — Our Work
   Sits on styles.v2 + v3 + pages.css. Adds the "what we're up against" intro
   block, the impact-area rhythm, and the "how you can help" chip row. The
   "what we're doing" cards are the shared .uw-np2card component.
   ========================================================================== */

.uwk-hero h1 { max-width: 15ch; }
.uwk-hero h1 span { display: inline; white-space: normal; }
.uwk-hero .uw-hero__text > p { max-width: 40ch; }

/* ── an impact area: a titled band that alternates ground colour ─────────── */
.uwk-area { padding: clamp(48px, 5.6vw, 100px) 0; }
.uwk-area--mist { background: var(--uw-blue-mist); }
.uwk-area--white { background: #fff; }
.uwk-area__head { padding: clamp(16px, 2vw, 26px) 0 clamp(28px, 3.4vw, 52px); }
.uwk-area__head > .uw-wrap { max-width: 62rem; margin: 0 auto; text-align: center; }
.uwk-area__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--uw-navy); color: #fff;
  font-family: var(--uw-display); font-weight: 700; font-size: 18px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.uwk-area__head h2 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: var(--uw-navy); font-size: clamp(26px, 3.6vw, 52px); line-height: 1.0; margin: 0;
}

/* "what we're up against" — a two-column framing block */
.uwk-against {
  display: grid; grid-template-columns: clamp(180px, 22vw, 300px) 1fr;
  gap: clamp(20px, 3vw, 54px); align-items: start;
  max-width: min(var(--uw-max), 1180px); margin: 0 auto clamp(28px, 3.4vw, 50px);
}
.uwk-against__label {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: var(--uw-blue); font-size: clamp(15px, 1.5vw, 22px); line-height: 1.05; margin: 0;
  position: relative; padding-top: clamp(14px, 1.6vw, 20px);
}
.uwk-against__label::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: clamp(40px, 4.4vw, 60px); height: 4px; border-radius: 2px; background: var(--uw-gold);
}
.uwk-against__body p {
  margin: 0 0 .9em;
  font-size: clamp(15px, 1.2vw, 19px); line-height: 1.55; color: var(--uw-ink);
}
.uwk-against__body p:last-child { margin-bottom: 0; }
.uwk-against__body p strong, .uwk-against__goal {
  color: var(--uw-navy); font-weight: 700;
}
@media (max-width: 760px) {
  .uwk-against { grid-template-columns: 1fr; }
}

/* the np2 card stack inside an area */
.uwk-doing { display: grid; gap: clamp(18px, 2.2vw, 34px); max-width: var(--uw-max); margin: 0 auto; }
.uwk-doing__label {
  text-align: center; font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: var(--uw-navy); font-size: clamp(19px, 2vw, 30px); line-height: 1.05;
  margin: 0 0 clamp(18px, 2vw, 30px);
}

/* ── how you can help — three chips ─────────────────────────────────────── */
.uwk-help {
  background: var(--uw-navy);
  border-radius: var(--uw-r-lg);
  padding: clamp(26px, 3vw, 48px) clamp(20px, 2.4vw, 40px);
  max-width: min(var(--uw-max), 1180px); margin: clamp(24px, 3vw, 44px) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch;
}
.uwk-help__title {
  grid-column: 1 / -1; text-align: center;
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: #fff; font-size: clamp(18px, 1.9vw, 28px); margin: 0 0 clamp(18px, 2vw, 30px);
}
.uwk-helpcol {
  text-align: center; padding: 0 clamp(14px, 2vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, .2);
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vw, 18px);
}
.uwk-helpcol:first-of-type { border-left: 0; }
.uwk-helpcol h4 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 38px); color: #fff; margin: 0;
}
.uwk-helpcol--gold h4 { color: var(--uw-gold); }
.uwk-helpcol p { margin: 0; font-weight: 700; font-size: var(--uw-label); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.uwk-helpcol .uw-btn { margin-top: auto; }
@media (max-width: 780px) {
  .uwk-help { grid-template-columns: 1fr; gap: 28px; }
  .uwk-helpcol { border-left: 0; }
}

/* ── the pull quote ────────────────────────────────────────────────────── */
.uwk-quote {
  background: linear-gradient(160deg, var(--uw-navy-deep), var(--uw-navy));
  padding: clamp(52px, 6vw, 104px) 0;
  position: relative; overflow: hidden;
}
/* now the last beat inside its area's own content, not a separate section
   riding between two pinned cards — see THIRD PASS below */
.uwk-quote--inline { margin-top: clamp(28px, 3.2vw, 48px); border-radius: clamp(20px, 2.6vw, 32px); }
.uwk-quote::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(420px, 44vw, 720px); aspect-ratio: 1;
  right: clamp(-320px, -18vw, -200px); bottom: clamp(-260px, -18vw, -160px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 0 46%, rgba(255, 255, 255, .07) 46% 60%,
    transparent 60% 72%, rgba(255, 186, 0, .1) 72% 85%, transparent 85%);
}
.uwk-quote blockquote {
  position: relative; z-index: 1;
  max-width: 60rem; margin: 0 auto; text-align: center;
  font-family: var(--uw-body); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 32px); line-height: 1.4; color: #fff;
}
.uwk-quote figcaption {
  position: relative; z-index: 1;
  margin-top: clamp(18px, 2vw, 28px); text-align: center;
  font-size: clamp(13px, 1vw, 15px); color: var(--uw-gold); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── the closing photo inside an area ────────────────────────────────────
   Used to be a separate full-bleed strip riding between two pinned cards —
   now it's the last thing inside the area's own scrollable content, so it
   arrives as part of reading that area rather than a stop of its own. */
.uwk-band {
  height: clamp(180px, 24vw, 380px);
  background-size: cover; background-position: center;
  position: relative;
}
.uwk-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33,41,107,.18), rgba(33,41,107,.42));
}
.uwk-band--inline { margin-top: clamp(28px, 3.2vw, 48px); border-radius: clamp(20px, 2.6vw, 32px); overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECOND PASS — flair to match news / about: curved seams between areas,
   ring ghosts, a gold tick on the "what we're doing" label, reveal polish.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the intro np2 band curves up under the navy hero */
.uw-hero--sub + .uw-np2 {
  position: relative; z-index: 3;
  margin-top: clamp(-56px, -5vw, -32px);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  background: #fff;
  padding-top: clamp(40px, 4.4vw, 72px);
  /* v3 gives .uw-np2 a 280px foot for the homepage's footer wave; here the
     first impact area follows it, so it only needs an ordinary section gap */
  padding-bottom: clamp(44px, 4.8vw, 84px);
}
/* each impact area curves out of whatever sits above it — now always
   another area directly, since its closing photo/quote travels inside it */
.uwk-intro + .uwk-area,
.uw-np2 + .uwk-area,
.uwk-gap + .uwk-area {
  position: relative; z-index: 2;
  margin-top: clamp(-44px, -4vw, -24px);
  border-radius: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) 0 0;
}
@media (max-width: 640px) {
  .uwk-intro + .uwk-area, .uw-np2 + .uwk-area, .uwk-gap + .uwk-area {
    margin-top: 0; border-radius: 0;
  }
}

/* A ring ghost drifting through the mist-toned areas. It hangs off the left
   edge, so it needs clipping — but the clip has to live on the BODY, not on
   .uwk-area: any overflow other than visible on an ancestor turns that
   ancestor into the sticky scrollport and the area's title would never
   pin. (That bug is why this sits here and not on the section.) */
.uwk-area--mist .uwk-area__body { position: relative; overflow: hidden; }
.uwk-area--mist .uwk-area__body::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(440px, 48vw, 820px); aspect-ratio: 1;
  left: clamp(-360px, -20vw, -220px); top: clamp(-200px, -14vw, -110px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 0 44%, rgba(0, 68, 181, .055) 44% 58%,
    transparent 58% 70%, rgba(0, 68, 181, .04) 70% 84%, transparent 84%);
}
.uwk-area--mist .uwk-area__body > * { position: relative; z-index: 1; }
.uwk-area__head, .uwk-area__body { position: relative; z-index: 1; }

/* the "what we're doing" label gets the gold tick the site uses */
.uwk-doing__label {
  position: relative; display: inline-block; left: 50%; transform: translateX(-50%);
  padding-top: clamp(14px, 1.6vw, 20px);
}
.uwk-doing__label::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: clamp(44px, 4.8vw, 64px); height: 4px; border-radius: 2px; background: var(--uw-gold);
}

/* the numbered badge pops in when its area arrives */
.uwk-area__num { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.uw-js .uwk-area__head.uw-anim:not(.is-in) .uwk-area__num { transform: scale(.72); }

/* np2 cards lift a touch on hover (v3 already tilts; keep it gentle here) */
.uwk-doing .uw-np2card { transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .42s ease; }
.uwk-doing .uw-np2card:hover { transform: translateY(-6px); box-shadow: 0 30px 54px rgba(15, 24, 62, .2); }

/* the help chips slide up in sequence */
.uw-js .uwk-help.uw-anim:not(.is-in) .uwk-helpcol { opacity: .001; transform: translateY(18px); }
.uw-js .uwk-help.is-in .uwk-helpcol {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.uw-js .uwk-help.is-in .uwk-helpcol:nth-child(3) { transition-delay: .08s; }
.uw-js .uwk-help.is-in .uwk-helpcol:nth-child(4) { transition-delay: .16s; }

/* the closing CTA rises into the last area, like the newsroom does */
.uwk-area + .uw-join { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .uwk-area__num, .uwk-doing .uw-np2card { transition: none; }
  .uwk-doing .uw-np2card:hover { transform: none; }
}

/* every "what we're doing" card carries a coloured body — guard against
   an un-modified card rendering white text on white */
.uwk-doing .uw-np2card:not([class*="--"]) .uw-np2card__body { background: var(--uw-navy); }

/* ═══════════════════════════════════════════════════════════════════════════
   THIRD PASS — the impact-area scroll stack (see stack.js)

   A scroll-stack in the reactbits sense: each area is a card that pins near
   the top, the next card slides up over it, and the buried cards scale down,
   dim and blur with depth so the four read as a deck. Their tops peek above
   the front card, and the whole stack releases together at the end.

   Two things make that work with sections this tall:
     · the card is viewport-sized and pinned with position: sticky inside the
       WHOLE deck (not inside its own section), so the cards accumulate rather
       than each releasing at its own section's end;
     · the scroll distance a card needs in front is provided by an empty
       .uwk-gap after it, and stack.js maps the page's own scroll through that
       gap onto a translate of the card's content. So the card's copy travels
       under its fixed title without ever being a second scroll container —
       the page is the only thing that scrolls, and nothing listens for wheel
       or touch, so it behaves the same wherever the cursor is.

   Everything below is inert until stack.js adds .is-on (JS + a wide viewport
   + motion allowed). Without it the areas are ordinary stacked sections with
   a plain sticky title.
   ═══════════════════════════════════════════════════════════════════════════ */
.uwk-deck { position: relative; }
.uwk-gap { height: 0; }

/* ── the fallback: a plain sticky title, no stack ─────────────────────── */
@media (min-width: 640px) {
  .uwk-area__head {
    position: sticky;
    /* flush under the site header — a gap there would show the page
       scrolling through a sliver between the two bars */
    top: var(--uwk-head-top, 74px);
    z-index: 5;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 14px 30px rgba(15, 24, 62, .07);
  }
  .uwk-area--mist .uwk-area__head { background: rgba(243, 249, 255, .95); }
}

/* ── the stack ────────────────────────────────────────────────────────── */
.uwk-deck.is-on > .uwk-area {
  position: sticky;
  top: var(--stick, 84px);
  z-index: calc(1 + var(--i, 0));          /* later cards paint over earlier */
  height: var(--card-h, 70vh);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: clamp(22px, 2.8vw, 38px);
  /* only a downward lift shadow — the upward component used to draw a stray
     dark line across the top of every card as it scrolled under the next one */
  box-shadow: 0 30px 70px rgba(12, 19, 52, .16);
  transform-origin: 50% 0;
  transform: scale(var(--scale, 1));
  filter: blur(var(--blur, 0px));
  will-change: transform, filter;
}
/* the card's own title stays put at its top: the card is what is pinned, so
   the head needs no stickiness of its own here */
.uwk-deck.is-on > .uwk-area > .uwk-area__head {
  position: relative;                      /* anchors the read hairline below */
  top: auto;
  flex: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  padding: clamp(18px, 2.2vw, 30px) 0 clamp(14px, 1.8vw, 24px);
}
/* the window the card's content travels through */
.uwk-deck.is-on > .uwk-area > .uwk-area__view {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.uwk-deck.is-on > .uwk-area > .uwk-area__view > .uwk-area__body {
  will-change: transform;
  /* the head shrinks a size once its title is actually pinned, and the
     "what we're up against" line right below it sat flush against the
     view's own clip edge with nothing to spare — this is that spare room.
     Sized past the head's max shrink delta (~38px) with room left over for
     a fast/flicked scroll to land mid-transition without clipping. */
  padding-top: clamp(26px, 3.2vw, 52px);
  padding-bottom: clamp(20px, 3vw, 44px);
}
/* a hairline that reads how far through the card's own content you are */
.uwk-deck.is-on > .uwk-area > .uwk-area__head::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--read, 0) * 100%);
  background: linear-gradient(90deg, var(--uw-gold), var(--uw-blue));
  opacity: .9;
  transition: width .08s linear;
}

@media (max-width: 819px) {
  .uwk-gap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DRIFTING WALL — "what we're doing to expand philanthropy"
   Two rows of tiles travelling in opposite directions, dimmed until you point
   at one, edges dissolved so they read as a wall passing rather than a strip
   that starts and stops. Flat, not pitched: the parallax runs sideways with
   the drift instead of tipping the plane. wall.js drives it; with no JS the
   rows are simply a horizontally scrollable band.
   ═══════════════════════════════════════════════════════════════════════════ */
.uwk-wall {
  --dim: .52;
  position: relative;
  margin: clamp(22px, 2.6vw, 40px) 0 clamp(28px, 3.2vw, 48px);
  display: grid;
  gap: clamp(12px, 1.4vw, 22px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* setting overflow-x:hidden with overflow-y:visible makes the visible axis
   compute as auto (a scrollbar the moment a hover lift overflows it) — so
   instead this stays a plain overflow:hidden clip, with enough padding that
   the lift + scale on hover never actually reaches the clip edge to begin
   with, on either the row or the wall around it */
.uwk-wall__row { overflow: hidden; padding: 10px 0; }
.uwk-wall__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  width: max-content;
  will-change: transform;
}
/* the pointer shifts the two rows by different amounts, which is what gives
   the wall its depth without any 3-D rotation */
.uwk-wall__row:nth-child(1) .uwk-wall__track { transform: translate3d(var(--x, 0px), 0, 0); }
.uwk-wall__row:nth-child(2) .uwk-wall__track { transform: translate3d(var(--x, 0px), 0, 0); }

.uwk-tile {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 330px);
  min-height: clamp(190px, 17vw, 250px);
  border-radius: clamp(14px, 1.5vw, 20px);
  padding: clamp(18px, 1.9vw, 28px);
  margin: 0;
  overflow: hidden;
  opacity: var(--dim);
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1),
              transform .42s cubic-bezier(.22, 1, .36, 1),
              box-shadow .42s ease;
}
.uwk-tile h4 {
  font-family: var(--uw-body); font-weight: 900;
  text-transform: none; letter-spacing: 0;      /* headings run uppercase site-wide */
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.25; margin: 0 0 .7em;
}
.uwk-tile p {
  margin: 0; font-size: clamp(12px, .96vw, 14px); line-height: 1.5;
}
/* tile grounds, drawn from the comp's palette */
.uwk-tile--navy  { background: var(--uw-navy); color: #fff; }
.uwk-tile--navy p { color: rgba(255, 255, 255, .84); }
.uwk-tile--peach { background: #FCE6CF; color: var(--uw-navy); }
.uwk-tile--lilac { background: #D9DBFA; color: var(--uw-navy); }
.uwk-tile--mint  { background: #CFEEDC; color: var(--uw-navy); }
.uwk-tile--peach p, .uwk-tile--lilac p, .uwk-tile--mint p { color: rgba(33, 41, 107, .82); }
.uwk-tile--img { padding: 0; background: var(--uw-blue-mist); }
.uwk-tile--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* pointing at a tile brings it forward out of the wall */
.uwk-wall:hover .uwk-tile { opacity: calc(var(--dim) + .1); }
.uwk-tile:hover {
  opacity: 1 !important;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 26px 54px rgba(12, 19, 52, .26);
}

/* no JS: the rows stay put but can still be dragged through */
.uwk-wall:not(.is-on) { --dim: 1; }
.uwk-wall:not(.is-on) .uwk-wall__row { overflow-x: auto; scrollbar-width: thin; }

@media (max-width: 700px) {
  .uwk-tile { width: clamp(200px, 62vw, 250px); min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .uwk-wall { --dim: 1; }
  .uwk-tile { transition: none; }
  .uwk-tile:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOURTH PASS — matching the comp: the hero, the intro trio, the goal cards,
   circular impact media, seam badges, the help rows and the pull quote.
   ═══════════════════════════════════════════════════════════════════════════ */
.uwk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── hero: copy left, photo held in an arc on the right ────────────────── */
.uwk-hero { position: relative; overflow: hidden; isolation: isolate; }
.uwk-hero__photo {
  position: absolute; z-index: 0; right: 0; top: 0; bottom: 0;
  width: min(62%, 900px);
  -webkit-mask-image: radial-gradient(circle at 72% 50%, #000 61%, transparent 62%);
          mask-image: radial-gradient(circle at 72% 50%, #000 61%, transparent 62%);
}
.uwk-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
/* the pale ring the comp sets the photo into */
.uwk-hero__arc {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-90px, -5vw, -40px); top: 50%; transform: translateY(-50%);
  width: clamp(560px, 62vw, 1040px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(167, 210, 255, .34) 58% 63%, transparent 63%);
}
.uwk-hero .uw-wrap { position: relative; z-index: 1; }
.uwk-hero .uw-hero__text { max-width: 34rem; }
.uwk-hero h1 { max-width: 13ch; }
.uwk-hero__cue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; margin-top: clamp(20px, 2.6vw, 36px);
  border: 2px solid rgba(255, 255, 255, .55); color: #fff;
  transition: background-color .3s ease, transform .3s ease, border-color .3s ease;
}
.uwk-hero__cue:hover { background: #fff; color: var(--uw-navy); border-color: #fff; transform: translateY(3px); }
@media (max-width: 860px) {
  .uwk-hero__photo { width: 100%; opacity: .28; -webkit-mask-image: none; mask-image: none; }
  .uwk-hero__arc { display: none; }
}

/* ── intro: the three priorities, each a photo with a labelled tag ─────── */
.uwk-intro {
  /* stays UNDER the deck cards (area1 starts at z-index 1) so the first card's
     curve and its badge sit cleanly on top instead of being sliced by this
     band — it only ever needs to be above whatever sits behind IT */
  position: relative; z-index: 0;
  margin-top: clamp(-56px, -5vw, -32px);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  background: linear-gradient(165deg, #2F3A96 0%, #29327F 52%, #222A6E 100%);
  color: #fff;
  padding: clamp(46px, 5vw, 88px) 0 clamp(52px, 6vw, 100px);
}
.uwk-intro__head {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 60px); align-items: start;
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.uwk-intro__head h2 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 2.9vw, 42px); line-height: 1.04; color: #fff; margin: 0;
}
.uwk-intro__head p { margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: rgba(255,255,255,.8); }
.uwk-intro__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.uwk-pcard { display: block; text-decoration: none; }
.uwk-pcard__img {
  display: block; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: 0 22px 46px rgba(8, 14, 44, .34);
}
.uwk-pcard__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.uwk-pcard:hover .uwk-pcard__img img { transform: scale(1.05); }
.uwk-pcard__tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(-22px, -1.6vw, -16px); margin-left: clamp(10px, 1.2vw, 18px);
  position: relative; z-index: 1;
  background: var(--uw-blue); color: #fff;
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(11px, .95vw, 14px); letter-spacing: .03em;
  padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 12px 26px rgba(8, 14, 44, .34);
}
.uwk-pcard__tag svg { width: 18px; height: 18px; flex: none; }
/* blue is the resting state for every tag; gold is the hover/highlight,
   not a permanent state on any one card */
.uwk-pcard:hover .uwk-pcard__tag {
  background: var(--uw-gold); color: var(--uw-navy);
  transition: background-color .25s ease, color .25s ease;
}
.uwk-pcard__tag { transition: background-color .25s ease, color .25s ease; }
@media (max-width: 780px) {
  .uwk-intro__head, .uwk-intro__grid { grid-template-columns: 1fr; }
}

/* ── the goal cards under "what we're up against" ──────────────────────── */
.uwk-goals {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  max-width: min(var(--uw-max), 1180px); margin: clamp(20px, 2.4vw, 34px) auto 0;
}
.uwk-goals--one { grid-template-columns: 1fr; }
.uwk-goal {
  position: relative;
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 26px);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.uwk-goal:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 24, 62, .16); }
.uwk-goal p { margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.5; color: var(--uw-navy); flex: 1; }
.uwk-goal__go { color: var(--uw-navy); opacity: .55; }
.uwk-goal__go svg { width: 20px; height: 20px; display: block; }
.uwk-goal--peach { background: #FCE6CF; }
.uwk-goal--lilac { background: #D9DBFA; }
.uwk-goal--mint  { background: #CFEEDC; }
.uwk-goal--wide  { background: #D9DBFA; }
.uwk-goals--one .uwk-goal p { font-size: clamp(15px, 1.22vw, 19px); line-height: 1.55; }
@media (max-width: 760px) { .uwk-goals { grid-template-columns: 1fr; } }

/* ── circular impact media, alternating sides ──────────────────────────── */
.uwk-circs { display: grid; gap: clamp(28px, 3.4vw, 56px); max-width: min(var(--uw-max), 1120px); margin: 0 auto; }
.uwk-circ {
  display: grid; grid-template-columns: clamp(200px, 27vw, 330px) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 60px); align-items: center;
}
.uwk-circ--flip { grid-template-columns: minmax(0, 1fr) clamp(200px, 27vw, 330px); }
.uwk-circ--flip .uwk-circ__media { order: 2; }
.uwk-circ__media { position: relative; aspect-ratio: 1; }
.uwk-circ__media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 2px solid rgba(0, 68, 181, .22);
}
.uwk-circ__badge {
  position: absolute; right: 2%; bottom: 14%;
  width: clamp(52px, 5.2vw, 68px); aspect-ratio: 1; border-radius: 50%;
  background: var(--uw-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 28px rgba(15, 24, 62, .26);
  border: 4px solid var(--uw-blue-mist);
}
.uwk-circ--flip .uwk-circ__badge { right: auto; left: 2%; }
.uwk-circ__badge svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.uwk-circ__body h4 {
  font-family: var(--uw-body); font-weight: 900; text-transform: none; letter-spacing: 0;
  font-size: clamp(18px, 1.7vw, 26px); line-height: 1.2; color: var(--uw-navy); margin: 0 0 .6em;
}
.uwk-circ__body p { margin: 0; font-size: clamp(14px, 1.08vw, 17px); line-height: 1.55; color: var(--uw-ink); }
@media (max-width: 760px) {
  .uwk-circ, .uwk-circ--flip { grid-template-columns: 1fr; }
  .uwk-circ--flip .uwk-circ__media { order: 0; }
  .uwk-circ__media { width: min(260px, 70vw); }
}

/* ── the badge that sits on a photo seam ───────────────────────────────── */
.uwk-band--inline { display: grid; place-items: center; }
.uwk-band__badge {
  position: relative; z-index: 2;
  width: clamp(56px, 5.6vw, 76px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--uw-navy);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px rgba(8, 14, 44, .3);
}
.uwk-band__badge svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── "how you can help": label left, three buttons right ───────────────── */
.uwk-help {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  align-items: center; gap: clamp(18px, 2.6vw, 44px);
  background: none; border-radius: 0; padding: 0;
  max-width: min(var(--uw-max), 1120px); margin: clamp(30px, 3.6vw, 56px) auto 0;
}
.uwk-help__title {
  grid-column: auto; text-align: left; margin: 0;
  color: var(--uw-navy); font-size: clamp(17px, 1.7vw, 26px); line-height: 1.1;
}
.uwk-help__row { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 18px); }
.uwk-cta {
  flex: 1 1 auto; min-width: 120px; text-align: center;
  background: var(--uw-blue-bright); color: #fff;
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(13px, 1.1vw, 17px); letter-spacing: .03em;
  padding: 13px 26px; border-radius: 8px; text-decoration: none;
  transition: background-color .25s ease, transform .25s ease;
}
.uwk-cta:hover { background: var(--uw-blue); transform: translateY(-2px); }
@media (max-width: 760px) { .uwk-help { grid-template-columns: 1fr; } }

/* ── the pull quote, as the comp draws it ──────────────────────────────── */
.uwk-quote--inline {
  background: #BFDCFB; color: var(--uw-navy);
  padding: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 48px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px);
  align-items: start; overflow: hidden;
}
.uwk-quote--inline::after { display: none; }
.uwk-quote--inline::before {
  content: "\201C"; font-family: var(--uw-body); font-weight: 900;
  font-size: clamp(64px, 7vw, 104px); line-height: .76; color: var(--uw-blue); opacity: .5;
}
.uwk-quote--inline .uw-wrap { padding: 0; max-width: none; }
.uwk-quote--inline blockquote {
  text-align: left; margin: 0; color: var(--uw-navy); font-weight: 700;
  font-size: clamp(14px, 1.18vw, 18px); line-height: 1.55;
}
.uwk-quote--inline figcaption {
  text-align: left; color: var(--uw-navy); margin-top: clamp(12px, 1.4vw, 20px); opacity: .7;
}

/* ── the wall's photo tiles carry the pastel frame; text tiles are navy ── */
.uwk-tile--img { padding: clamp(7px, .8vw, 11px); }
.uwk-tile--img img { border-radius: clamp(9px, 1vw, 13px); }
.uwk-tile--img.uwk-tile--lilac { background: #C9CCF8; }
.uwk-tile--img.uwk-tile--mint  { background: #C4EBD4; }
.uwk-tile--img.uwk-tile--peach { background: #FBE0C4; }
.uwk-tile--img.uwk-tile--sky   { background: #A9CDFB; }

@media (prefers-reduced-motion: reduce) {
  .uwk-goal, .uwk-cta, .uwk-pcard__img img, .uwk-hero__cue { transition: none; }
  .uwk-goal:hover, .uwk-cta:hover, .uwk-hero__cue:hover { transform: none; }
  .uwk-pcard:hover .uwk-pcard__img img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIFTH PASS — measured off the Figma file itself (UWRI | MICROSITE, frame
   "OUR WORK", 1728 wide). Every size, colour and offset below is the comp's
   own value, expressed against that 1728 frame: 1px of the comp = 1/17.28 vw,
   so the page scales the way the artboard does and lands on the exact number
   at full width.
   ═══════════════════════════════════════════════════════════════════════════ */
.uwk-page {
  /* the comp's content column: x 246 → 1482 of 1728 */
  --ow-col: min(1236px, 71.53vw);
  --ow-gut: 14.24vw;
  /* type, straight off the artboard */
  --ow-h1: clamp(34px, 4.05vw, 70px);        /* 70 Antonio Bold, lh 82 */
  --ow-h2: clamp(22px, 2.32vw, 40px);        /* 40 Antonio SemiBold, lh 1.3 */
  --ow-card-title: clamp(19px, 2.03vw, 35px);/* 35 Lato Bold, lh 1.2 */
  --ow-goal: clamp(15px, 1.74vw, 30px);      /* 30 Lato Semibold, lh 1.2 */
  --ow-body: clamp(14px, 1.042vw, 18px);     /* 18 Lato Semibold, lh 29 */
  --ow-tag: clamp(13px, 1.27vw, 22px);       /* 22 Antonio SemiBold, lh 1.1 */
  --ow-r: clamp(12px, 1.5vw, 26px);          /* the comp's 26px corner */
}

/* ── HERO ────────────────────────────────────────────────────────────────
   The comp seats the copy on a white disc that overlaps the photo, with a
   52px pale-blue ring tracing its edge (Ellipse 77 #A7D2FF behind Ellipse 78
   #FFFFFF). Both are far larger than the band, so only the right-hand arc
   ever shows. */
.uwk-page .uwk-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #fff;
  min-height: min(64.9vw, 1122px);           /* the comp's 1122 of 1728 */
  padding: 0; display: flex; align-items: center;
}
.uwk-page .uwk-hero__photo {
  position: absolute; inset: 0; z-index: 0; width: 100%;
  -webkit-mask-image: none; mask-image: none;
}
.uwk-page .uwk-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
/* Ellipse 77/78 — the pale ring behind a white disc the copy sits on. The
   comp bleeds this circle off the artboard's own left edge, but on a real
   viewport that read as a stray sliver rather than a shape — sized and
   centred instead so the full ring sits in the left half of the hero,
   vertically centred, nothing clipped. */
.uwk-page .uwk-hero__arc {
  position: absolute; z-index: 1; pointer-events: none;
  width: clamp(420px, 46vw, 660px); aspect-ratio: 1; border-radius: 50%;
  left: clamp(-60px, 1vw, 20px); top: 50%; transform: translateY(-50%);
  background: #A7D2FF;
}
.uwk-page .uwk-hero__arc::after {
  content: ""; position: absolute; border-radius: 50%; background: #fff;
  width: 92.66%; height: 92.66%; left: 3.67%; top: 3.67%;
}
.uwk-page .uwk-hero > .uw-wrap { position: relative; z-index: 2; width: 100%; }
.uwk-page .uwk-hero .uw-hero__grid { display: block; }
.uwk-page .uwk-hero .uw-hero__text { max-width: min(480px, 27.8vw); margin-left: 0; }
.uwk-page .uwk-hero h1 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--ow-h1); line-height: 1.17; color: #21296B;
  margin: 0 0 clamp(14px, 1.8vw, 32px); max-width: 10ch;
}
.uwk-page .uwk-hero .uw-hero__text > p {
  font-family: var(--uw-body); font-weight: 600;
  font-size: clamp(14px, 1.157vw, 20px); line-height: 1.45; color: #231F20;
  max-width: 28ch; margin: 0;
}
.uwk-page .uwk-hero__eyebrow { display: none; }
/* the 68px ring holding a 58px navy disc */
.uwk-page .uwk-hero__cue {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(44px, 3.94vw, 68px); height: auto; aspect-ratio: 1; border-radius: 50%;
  margin-top: clamp(18px, 2.4vw, 42px);
  background: #21296B; color: #fff;
  box-shadow: 0 0 0 clamp(3px, .29vw, 5px) rgba(33, 41, 107, .18);
  border: 0;
  transition: transform .3s ease, background-color .3s ease;
}
.uwk-page .uwk-hero__cue:hover { background: #0044B5; transform: translateY(4px); }
@media (max-width: 860px) {
  .uwk-page .uwk-hero {
    min-height: 0; padding: 0 0 clamp(34px, 8vw, 60px);
    display: block;                       /* stop the photo and copy flexing side by side */
  }
  .uwk-page .uwk-hero__arc { display: none; }
  .uwk-page .uwk-hero__photo {
    position: relative; inset: auto; width: 100%;
    height: clamp(230px, 54vw, 360px); margin-bottom: clamp(22px, 5vw, 40px);
  }
  .uwk-page .uwk-hero .uw-hero__text { max-width: none; }
  .uwk-page .uwk-hero h1 { max-width: 16ch; }
  .uwk-page .uwk-hero .uw-hero__text > p { max-width: 46ch; }
  .uwk-page .uwk-intro__grid { margin-right: 0; padding-right: 0; }
}

/* ── INTRO BAND — Rectangle 483, 1216 tall, navy→blue gradient ─────────── */
.uwk-page .uwk-intro {
  /* stays UNDER the deck cards (area1 starts at z-index 1) — this is the
     rule that was actually winning over the earlier attempt to fix this,
     since .uwk-page .uwk-intro out-specifies plain .uwk-intro */
  position: relative; z-index: 0;
  margin-top: 0; border-radius: 0;
  background: linear-gradient(158deg, #21296B 0%, #232C72 26%, #303B9A 68%, #4050D1 100%);
  color: #fff;
  padding: clamp(40px, 9.78vw, 169px) 0 clamp(48px, 22.74vw, 393px);
}
.uwk-page .uwk-intro__head {
  display: grid; grid-template-columns: min(291px, 16.8vw) minmax(0, 1fr);
  gap: clamp(20px, 8.1vw, 140px); align-items: start;
  margin-bottom: clamp(24px, 5.9vw, 102px);
}
.uwk-page .uwk-intro__head h2 {
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--ow-h2); line-height: 1.3; color: #fff; margin: 0;
}
.uwk-page .uwk-intro__head p {
  margin: 0; font-family: var(--uw-body); font-weight: 600;
  font-size: var(--ow-body); line-height: 1.61; color: #fff; max-width: 46.5vw;
}
/* three 606x402 cards, gap 24, the third running off the right edge */
.uwk-page .uwk-intro__grid {
  display: grid;
  grid-template-columns: none;          /* drop the earlier 3-track rule */
  grid-auto-flow: column;
  grid-auto-columns: min(606px, 35.07vw);
  gap: clamp(10px, 1.39vw, 24px);
  overflow-x: auto; scrollbar-width: none;
  margin-right: calc(-1 * var(--ow-gut));     /* let it bleed off the right */
  padding-right: var(--ow-gut);
  scroll-snap-type: x proximity;
}
.uwk-page .uwk-intro__grid::-webkit-scrollbar { display: none; }
.uwk-page .uwk-intro__rail { position: relative; }
.uwk-page .uwk-intro__nav {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: clamp(14px, 1.6vw, 24px);
}
.uwk-page .uwk-intro__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background-color .25s ease, transform .25s ease, opacity .25s ease;
}
.uwk-page .uwk-intro__btn svg { width: 18px; height: 18px; }
.uwk-page .uwk-intro__btn:hover { background: #fff; color: #21296B; transform: scale(1.06); }
.uwk-page .uwk-intro__btn[disabled] { opacity: .35; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .uwk-page .uwk-intro__btn { transition: none; }
}
.uwk-page .uwk-pcard { scroll-snap-align: start; }
.uwk-page .uwk-pcard__img { aspect-ratio: 606 / 402; border-radius: var(--ow-r); box-shadow: none; }
.uwk-page .uwk-pcard__tag {
  margin: clamp(10px, 1.27vw, 22px) 0 0;      /* the comp sets them BELOW */
  border-radius: clamp(7px, .69vw, 12px);
  padding: 0 clamp(12px, 1.4vw, 24px);
  min-height: clamp(38px, 3.47vw, 60px);
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--ow-tag); letter-spacing: 0; line-height: 1.1;
  background: #0044B5; color: #fff; box-shadow: none;
}
.uwk-page .uwk-pcard:hover .uwk-pcard__tag { background: #FFBA00; color: #21296B; }
.uwk-page .uwk-pcard__tag svg { width: 1.2em; height: 1.2em; }

/* ── SECTION HEADINGS ────────────────────────────────────────────────── */
.uwk-page .uwk-area__head h2 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--ow-h1); line-height: 1.17; color: #21296B;
}
.uwk-page .uwk-doing__label {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--ow-h1); line-height: 1.17; color: #21296B;
  margin-bottom: clamp(20px, 3.5vw, 60px);
}
.uwk-page .uwk-doing__label::before { display: none; }

/* ── "WHAT WE'RE UP AGAINST:" — label 40px, copy 18px, both navy ──────── */
.uwk-page .uwk-against {
  grid-template-columns: min(355px, 20.5vw) minmax(0, 1fr);
  gap: clamp(18px, 4.5vw, 78px);
  max-width: var(--ow-col); margin: 0 auto clamp(20px, 4.3vw, 74px);
  align-items: start;
}
.uwk-page .uwk-against__label {
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--ow-h2); line-height: 1.3; color: #21296B; padding-top: 0;
}
.uwk-page .uwk-against__label::before { display: none; }
.uwk-page .uwk-against__body p {
  font-family: var(--uw-body); font-weight: 600;
  font-size: var(--ow-body); line-height: 1.61; color: #21296B;
  max-width: 46.5vw;
}

/* ── GOAL CARDS — 394x393, r26, the comp's three tints ─────────────────── */
.uwk-page .uwk-goals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.56vw, 27px);
  max-width: var(--ow-col);
}
.uwk-page .uwk-goal {
  border-radius: var(--ow-r);
  padding: clamp(16px, 2.26vw, 39px) clamp(16px, 2.08vw, 36px);
  min-height: min(393px, 22.74vw);
  gap: clamp(12px, 2vw, 34px);
}
.uwk-page .uwk-goal p {
  font-family: var(--uw-body); font-weight: 600;
  font-size: var(--ow-goal); line-height: 1.2; color: #21296B;
}
.uwk-page .uwk-goal--peach { background: #FFEAD0; }
.uwk-page .uwk-goal--lilac { background: #C0C6FC; }
.uwk-page .uwk-goal--mint  { background: #C6F7DA; }
.uwk-page .uwk-goal--wide  { background: #C0C6FC; min-height: 0; }
.uwk-page .uwk-goal__go { color: #21296B; opacity: 1; }
.uwk-page .uwk-goal__go svg { width: clamp(16px, 1.39vw, 24px); height: auto; }

/* ── CIRCULAR IMPACT MEDIA — 513 ring / 461 photo / 106 badge ──────────── */
.uwk-page .uwk-circs { max-width: var(--ow-col); gap: clamp(30px, 5.5vw, 95px); }
.uwk-page .uwk-circ {
  grid-template-columns: min(513px, 29.69vw) minmax(0, 1fr);
  gap: clamp(20px, 4.2vw, 72px); align-items: center;
}
.uwk-page .uwk-circ--flip { grid-template-columns: minmax(0, 1fr) min(513px, 29.69vw); }
.uwk-page .uwk-circ__media {
  aspect-ratio: 1;
  border: 1px solid rgba(33, 41, 107, .35);   /* Ellipse 88/81, the outer ring */
  border-radius: 50%;
  display: grid; place-items: center;
}
.uwk-page .uwk-circ__media img {
  width: 89.86%; height: 89.86%;              /* 461 of 513 */
  border-radius: 50%; border: 0; object-fit: cover;
}
.uwk-page .uwk-circ__badge {
  position: absolute; right: -3.5%; bottom: 22%; left: auto;
  width: min(106px, 6.13vw); aspect-ratio: 1;
  background: #fff; border: 0;
  box-shadow: 0 10px 26px rgba(15, 24, 62, .18);
  padding: clamp(3px, .43vw, 8px);
}
.uwk-page .uwk-circ--flip .uwk-circ__badge { left: -3.5%; right: auto; }
.uwk-page .uwk-circ__badge::before {
  content: ""; position: absolute; inset: clamp(3px, .43vw, 8px);
  border-radius: 50%; background: var(--badge, #8E97EF);
}
.uwk-page .uwk-circ--flip .uwk-circ__badge { --badge: #5082F0; }
.uwk-page .uwk-circ__badge svg { position: relative; z-index: 1; width: 48%; height: 48%; color: #fff; }
.uwk-page .uwk-circ__body h4 {
  font-family: var(--uw-body); font-weight: 700; text-transform: none;
  font-size: var(--ow-card-title); line-height: 1.2; color: #21296B;
  margin: 0 0 clamp(12px, 1.85vw, 32px);
}
.uwk-page .uwk-circ__body p {
  font-family: var(--uw-body); font-weight: 600;
  font-size: var(--ow-body); line-height: 1.61; color: #21296B;
}

/* ── SEAM BANDS — 1728x900 photo under a navy wash ─────────────────────── */
.uwk-page .uwk-band--inline {
  height: min(900px, 52.08vw); border-radius: 0; margin-top: 0;
  /* full bleed: the comp runs it the whole 1728 */
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
}
.uwk-page .uwk-band::after { background: rgba(33, 41, 107, .55); }
.uwk-page .uwk-band__badge {
  width: min(109px, 6.3vw); background: #fff; color: #21296B;
  padding: clamp(4px, .55vw, 9px);
  box-shadow: 0 12px 30px rgba(8, 14, 44, .3);
}
.uwk-page .uwk-band__badge::before {
  content: ""; position: absolute; inset: clamp(4px, .55vw, 9px);
  border-radius: 50%; border: 1px solid rgba(33, 41, 107, .5);
}
.uwk-page .uwk-band__badge svg { position: relative; z-index: 1; width: 44%; height: 44%; }

/* ── HELP ROW — 40px label, 225x64 buttons in #5082F0, r11 ─────────────── */
.uwk-page .uwk-help {
  grid-template-columns: min(441px, 25.5vw) minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 60px);
  max-width: var(--ow-col);
}
.uwk-page .uwk-help__title {
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--ow-h2); line-height: 1.3; color: #21296B;
}
.uwk-page .uwk-help__row { gap: clamp(8px, 1.1vw, 19px); }
.uwk-page .uwk-cta {
  flex: 0 1 min(225px, 13.02vw); min-width: 110px;
  min-height: clamp(40px, 3.7vw, 64px);
  display: inline-flex; align-items: center; justify-content: center;
  background: #5082F0; border-radius: clamp(7px, .64vw, 11px);
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--ow-tag); letter-spacing: 0; padding: 0 clamp(10px, 1vw, 18px);
}
.uwk-page .uwk-cta:hover { background: #0044B5; }

/* ── the navy "what we're doing" cards — 1234x448, r26, 559x401 photo ─── */
.uwk-page .uwk-doing .uw-np2card {
  max-width: var(--ow-col); margin-inline: auto;
  border-radius: var(--ow-r); overflow: hidden;
  min-height: min(448px, 25.93vw);
}
.uwk-page .uwk-doing .uw-np2card__body h3 {
  font-family: var(--uw-body); font-weight: 700; text-transform: none;
  font-size: clamp(18px, 1.74vw, 30px); line-height: 1.2;
}
.uwk-page .uwk-doing .uw-np2card__body p { font-size: var(--ow-body); line-height: 1.61; }

@media (max-width: 760px) {
  .uwk-page .uwk-against, .uwk-page .uwk-help { grid-template-columns: 1fr; }
  .uwk-page .uwk-goals { grid-template-columns: 1fr; }
  .uwk-page .uwk-goal { min-height: 0; }
  .uwk-page .uwk-circ, .uwk-page .uwk-circ--flip { grid-template-columns: 1fr; }
  .uwk-page .uwk-intro__head { grid-template-columns: 1fr; }
  .uwk-page .uwk-intro__head p, .uwk-page .uwk-against__body p { max-width: none; }
}

/* Design alignment pass: keep the existing stack/wall animations, but tune the
   static geometry to the supplied Our Work comp. */
.uwk-page .uwk-hero {
  overflow: hidden;
}
.uwk-page .uwk-hero__photo {
  overflow: hidden;
  background: #fff;
}
.uwk-page .uwk-hero__photo img {
  width: calc(100% + clamp(54px, 4.4vw, 86px));
  max-width: none;
  transform: translateX(clamp(-58px, -3vw, -34px)) scale(1.035);
  transform-origin: center;
  object-position: 66% center;
}
.uwk-page .uwk-intro__grid {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0 var(--ow-gut);
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.uwk-page .uwk-pcard {
  min-width: 0;
}
.uwk-page .uwk-pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.uwk-page .uwk-intro + .uwk-area {
  margin-top: clamp(-74px, -4.8vw, -42px);
  border-radius: 50% 50% 0 0 / clamp(42px, 5.4vw, 88px) clamp(42px, 5.4vw, 88px) 0 0;
}

.uwk-page .uwk-goals--one {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--ow-col);
}
.uwk-page .uwk-goals--one .uwk-goal--wide {
  width: 100%;
  min-height: clamp(210px, 19.75vw, 341px);
  padding-inline: clamp(28px, 3.4vw, 58px);
}
.uwk-page .uwk-goals--one .uwk-goal--wide p {
  max-width: 74rem;
}

.uwk-page .uwk-band--inline {
  position: relative;
  overflow: visible;
  border-radius: 50% 50% 50% 50% / clamp(44px, 5.2vw, 86px);
  margin-top: clamp(48px, 5.2vw, 90px);
}
.uwk-page .uwk-band::after {
  z-index: 1;
  border-radius: inherit;
}
.uwk-page .uwk-band__badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

.uwk-page .uwk-doing .uw-np2card {
  box-shadow: 0 18px 38px rgba(12, 18, 56, .18);
}
.uwk-page .uwk-doing .uw-np2card__img img {
  object-position: center;
}
.uwk-page #childhood-learning .uw-np2card__body {
  background: #21296B;
}
.uwk-page #childhood-learning .uw-np2card__img {
  min-height: clamp(250px, 30vw, 401px);
}

.uwk-page .uwk-wall__track {
  align-items: stretch;
}
.uwk-page .uwk-tile {
  height: clamp(210px, 19.75vw, 341px);
  min-height: 0;
  overflow: hidden;
}
.uwk-page .uwk-tile h4 {
  font-size: clamp(17px, 1.28vw, 22px);
  line-height: 1.22;
}
.uwk-page .uwk-tile p {
  font-size: clamp(12.5px, .94vw, 16px);
  line-height: 1.45;
}
.uwk-page .uwk-tile--img img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .uwk-page .uwk-hero__photo img {
    width: 100%;
    transform: none;
    object-position: 62% center;
  }
  .uwk-page .uwk-intro + .uwk-area,
  .uwk-page .uwk-band--inline {
    margin-top: 0;
    border-radius: 0;
  }
  .uwk-page .uwk-wall {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .uwk-page .uwk-tile {
    height: auto;
    min-height: 190px;
  }
}

/* Section crest pass: icons belong to the top curve of each area, not the
   outgoing image band. Keep the stack motion intact; only the card chrome moves.
   The curve itself is the area's own border-radius (a 50%/50% top radius makes
   the two corner ellipses meet at centre, so the background draws one smooth
   dome the full width of the card) — no separate stroke is layered over it,
   since that stroke was the stray dark line that showed above every section,
   especially once the deck's scale/blur transforms were applied to it. */
.uwk-page .uwk-area {
  position: relative;
  border-radius: 50% 50% 0 0 / clamp(46px, 5.8vw, 94px) clamp(46px, 5.8vw, 94px) 0 0;
}
.uwk-page .uwk-area__head {
  position: relative;
  overflow: visible;
  padding-top: clamp(52px, 5.2vw, 90px);
}
/* deliberately NOT position:relative — the icon below needs to anchor to
   .uwk-area__head's own top edge (the section's curve), not to this wrap's
   box, which already sits padding-top lower; anchoring here pulled the badge
   down onto the heading text instead of the seam it's meant to sit on. */
.uwk-page .uwk-area__head > .uw-wrap {
  position: static;
}
.uwk-page .uwk-area__num {
  display: none;
}
.uwk-page .uwk-area__icon {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 4.8vw, 82px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #21296B;
  background: #fff;
  border: clamp(3px, .25vw, 5px) solid #21296B;
  box-shadow: 0 0 0 clamp(3px, .35vw, 6px) rgba(255, 255, 255, .92);
}
.uwk-page .uwk-area__icon svg {
  width: 48%;
  height: 48%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uw-js .uwk-area__head.uw-anim:not(.is-in) .uwk-area__icon {
  transform: translate(-50%, -50%) scale(.72);
}
.uw-js .uwk-area__head.is-in .uwk-area__icon {
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.uwk-page .uwk-band__badge {
  display: none;
}

.uwk-deck.is-on > .uwk-area {
  overflow: visible;
  border-radius: 50% 50% clamp(22px, 2.8vw, 38px) clamp(22px, 2.8vw, 38px) /
    clamp(46px, 5.8vw, 94px) clamp(46px, 5.8vw, 94px) clamp(22px, 2.8vw, 38px) clamp(22px, 2.8vw, 38px);
}
.uwk-deck.is-on {
  /* the two ends of the title-minimize range — read by the calc()s below,
     which blend between them off --pin (0 = just landed, 1 = fully eased
     down). --pin is a per-card custom property stack.js sets every scroll
     frame, so the title tracks the scroll position itself: no class flip,
     no timed transition, nothing that can lag behind a fast flick. */
  --uwk-head-pad-0: clamp(52px, 5.2vw, 90px);
  --uwk-head-pad-1: clamp(30px, 3vw, 52px);
  --uwk-h2-size-0: clamp(26px, 3.6vw, 52px);
  --uwk-h2-size-1: clamp(20px, 2.6vw, 45px);
  --uwk-icon-w-0: clamp(52px, 4.8vw, 82px);
  --uwk-icon-w-1: clamp(38px, 3.4vw, 58px);
}
.uwk-deck.is-on > .uwk-area > .uwk-area__head {
  padding-top: calc(var(--uwk-head-pad-0) - var(--pin, 0) * (var(--uwk-head-pad-0) - var(--uwk-head-pad-1)));
}
.uwk-deck.is-on > .uwk-area > .uwk-area__view {
  overflow: hidden;
}
.uwk-deck.is-on .uwk-area__head h2 {
  font-size: calc(var(--uwk-h2-size-0) - var(--pin, 0) * (var(--uwk-h2-size-0) - var(--uwk-h2-size-1)));
}
.uwk-deck.is-on .uwk-area__icon {
  width: calc(var(--uwk-icon-w-0) - var(--pin, 0) * (var(--uwk-icon-w-0) - var(--uwk-icon-w-1)));
}

@media (max-width: 860px) {
  .uwk-page .uwk-area {
    border-radius: 50% 50% 0 0 / 34px 34px 0 0;
  }
  .uwk-page .uwk-area::before {
    left: -18vw;
    right: -18vw;
    height: 16px;
    border-top-width: 7px;
  }
  .uwk-page .uwk-area__head {
    padding-top: 46px;
  }
  .uwk-page .uwk-area__icon {
    width: 52px;
    border-width: 3px;
  }
}