/* ============================================================================
   United Way of Rhode Island — long-scroll landing page, v3 redesign
   Loaded AFTER styles.v2.css + mobile.css. Only the header, the new WaterFire
   hero, the centennial band, the ALICE callout and the stacked nonprofit
   section are new; everything else reuses the v2 components.
   ========================================================================== */

/* ── header: language toggle + prominent Donate ─────────────────────────── */
.uw-header--v3 .uw-header__inner {
  gap: clamp(12px, 2vw, 32px);
  padding-top: clamp(10px, .85vw, 15px);
  padding-bottom: clamp(10px, .85vw, 15px);
}
.uw-header--v3 .uw-logo img { width: clamp(140px, 9.6vw, 176px); }
.uw-header--v3 .uw-header__end { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); }

/* primary nav item is a single prominent "Reach 211" button, dead-centre in
   the bar at every width, so the burger is retired */
.uw-header--v3 .uw-header__inner { position: relative; }
.uw-header--v3 .uw-nav {
  display: flex !important;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.uw-header--v3 .uw-nav__211 {
  background: var(--uw-gold); color: var(--uw-blue) !important;
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(13px, 1.15vw, 18px);
  padding: 10px clamp(20px, 2.4vw, 40px) !important;
  min-height: 44px !important;
  border-radius: 40px;
}
.uw-header--v3 .uw-nav__211:hover { background: #ffc933; color: var(--uw-blue) !important; transform: translateY(-1px); }
/* kill the animated underline v2/mobile add under .uw-nav links */
.uw-header--v3 .uw-nav a::after,
.uw-header--v3 .uw-nav a:hover::after { display: none !important; content: none !important; }
.uw-header--v3 .uw-nav a:hover { text-decoration: none; }
@media (max-width: 640px) {
  /* Rather than let Reach 211 and Donate wrap onto their own rows, the header
     collapses to the mark and the burger. Both buttons live in the menu at
     this width — Donate was always there, and .uw-menu__211 appears alongside
     it (see menu.css). */
  /* the base rule above forces display:flex !important to override v2's
     burger takeover, so undoing it here has to match that weight */
  .uw-header--v3 .uw-nav { display: none !important; }
  .uw-header--v3 .uw-header__end .uw-btn--donate { display: none; }
  .uw-header--v3 .uw-header__inner {
    flex-wrap: nowrap; row-gap: 0; justify-content: space-between;
  }
  .uw-header--v3 .uw-header__end { gap: 0; }
}

.uw-lang {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(11px, .92vw, 14px); letter-spacing: .04em; white-space: nowrap;
}
.uw-lang > * + *::before {
  content: "|"; color: rgba(33, 41, 107, .35); margin-right: 10px; font-weight: 400;
}
.uw-lang [aria-current] { color: var(--uw-navy); }
.uw-lang a { color: var(--uw-blue); text-decoration: none; }
.uw-lang a:hover { text-decoration: underline; }

.uw-header--v3 .uw-btn--donate {
  font-size: clamp(13px, 1.05vw, 17px);
  padding: 11px clamp(22px, 2.3vw, 40px) !important;
  min-height: 44px !important;
  border-radius: 40px;
  letter-spacing: .02em;
}
@media (max-width: 620px) {
  .uw-lang { display: none; }
  .uw-btn--donate { font-size: 14px; padding: 10px 18px; min-height: 40px; }
}

/* ── WaterFire hero ────────────────────────────────────────────────────── */
.uw-wf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(600px, 50vw, 1040px);
  display: flex; align-items: center;
  background: #10143a url("assets/uwri/waterfire-bg.png") center top / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: clamp(90px, 9vw, 150px) 0 clamp(150px, 19vw, 360px);
}
/* on a wide screen the aspect-locked min-height falls short of the viewport
   and leaves a sliver of the 211 band showing — let the hero fill the screen
   and grow upward (the braziers stay pinned to the bottom, copy stays centred) */
@media (min-width: 1080px) {
  .uw-wf { min-height: calc(100svh - 77px); }   /* less the sticky header's flow height */
}
/* the brazier/wave graphic always spans the full viewport width and scales
   its height proportionally, so it never leaves a navy gap at the edges */
.uw-wf__art {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 104vw; aspect-ratio: 3456 / 1767;
  background: url("assets/uwri/waterfire-braziers.png") bottom center / 100% 100% no-repeat;
  z-index: -1; pointer-events: none;
}
.uw-wf__inner { position: relative; max-width: 1000px; }
.uw-wf__date {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px);
  font-family: var(--uw-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; font-size: clamp(13px, 1.35vw, 22px);
  margin: 0 0 clamp(6px, 1vw, 14px);
}
.uw-wf__date::before, .uw-wf__date::after {
  content: ""; height: 2px; width: clamp(28px, 5vw, 74px); background: currentColor; opacity: .9;
}
.uw-wf__title {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  line-height: .9; letter-spacing: .005em; margin: 0;
}
.uw-wf__title span { display: block; }
.uw-wf__l1 { font-size: clamp(40px, 8.1vw, 128px); }
.uw-wf__l2 { font-size: clamp(52px, 10.6vw, 168px); }
.uw-wf__l3 { font-size: clamp(30px, 5.9vw, 94px); color: var(--uw-gold); margin-top: .04em; }
.uw-wf__script {
  display: block; width: min(560px, 82%); height: auto; margin: clamp(18px, 2.4vw, 40px) auto clamp(20px, 2.4vw, 34px);
}
/* the "Celebration of the Century" script draws itself in, left-to-right, like
   a hand lettering it. A soft-edged mask sweeps across the artwork; with no JS
   (or reduced-motion) the class is never added and the script just shows. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes uw-script-draw {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  }
  .uw-wf.is-draw .uw-wf__script {
    -webkit-mask-image: linear-gradient(94deg, #000 0 44%, rgba(0,0,0,.5) 50%, transparent 56%);
            mask-image: linear-gradient(94deg, #000 0 44%, rgba(0,0,0,.5) 50%, transparent 56%);
    -webkit-mask-size: 320% 100%;  mask-size: 320% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;  mask-position: 100% 0;
    animation: uw-script-draw 3.6s cubic-bezier(.4, .1, .2, 1) .5s forwards;
  }
}
.uw-wf__cta {
  font-size: clamp(14px, 1.3vw, 20px);
  padding: clamp(14px, 1.4vw, 20px) clamp(28px, 3vw, 48px);
  min-height: 52px;
}
.uw-btn--gold.uw-wf__cta { background: var(--uw-gold); color: var(--uw-navy); }
.uw-btn--gold.uw-wf__cta:hover { background: #ffc933; color: var(--uw-navy); }
@media (max-width: 700px) {
  .uw-wf { padding-bottom: clamp(90px, 34vw, 150px); }
  .uw-wf__art { width: 150%; }
}

/* ── 211 band: the concentric ring disc, shown WHOLE ───────────────────── */
/* v2's disc was a gradient whose circle radius was larger than its own box,
   so its top and bottom were always hard-clipped. Here the box is sized to
   the circle, the band is tall enough to hold it, and the circle's own centre
   is pulled left so it still reads as "rising from the left edge" without any
   flat clip. */
.uw-211 {
  overflow: visible !important;
  position: relative; z-index: 5;
  --uw-ring-d: clamp(560px, 64vw, 900px);           /* full disc diameter */
  min-height: clamp(430px, 41.5vw, 640px) !important;
  display: flex !important; align-items: center;
}
/* a true circle element (border-radius 50%) can't clip itself — it bleeds up
   over the hero and down over the give band, painting on top of both */
.uw-211__rings {
  left: calc(-0.52 * var(--uw-ring-d)) !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%);
  width: var(--uw-ring-d) !important;
  height: var(--uw-ring-d) !important;
  border-radius: 50%;
  /* same concentric proportions as the v2 disc, just larger */
  background: radial-gradient(circle at 50% 50%,
    var(--uw-blue) 0 21%,
    var(--uw-gold) 21% 37%,
    var(--uw-navy) 37% 45%,
    var(--uw-blue) 45% 88%,
    transparent 88%) !important;
}
@media (max-width: 900px) {
  .uw-211 { --uw-ring-d: clamp(360px, 96vw, 560px); }
}
/* the hero clips its brazier art horizontally, but must not crop the disc
   that overhangs up into it */
.uw-wf { overflow-x: clip; overflow-y: visible; }
.uw-wf > .uw-wrap { position: relative; z-index: 1; }

/* ── hero -> 211 -> give: one continuous blue composition ──────────────────
   The brazier/wave graphic runs a touch past the hero's edge so the crests
   spill into the 211 band, and the 211 band is a vertical gradient that
   starts on the hero's deep navy and ends on the donation section's navy,
   so there is no seam anywhere down the blue run. */
/* the brazier/wave art bleeds a little past the hero edge and its hard bottom
   crop is dissolved with a mask so the crests melt into the 211 gradient */
.uw-wf__art {
  bottom: clamp(-46px, -3vw, -20px);
  --wf-fade: linear-gradient(180deg,
    #000 0%, #000 80%,
    rgba(0,0,0,.82) 87%, rgba(0,0,0,.5) 92%,
    rgba(0,0,0,.2) 96%, transparent 100%);
  -webkit-mask-image: var(--wf-fade);
          mask-image: var(--wf-fade);
}
/* a second, matched fade on the 211 band's own top edge deepens the blend */
.uw-211::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(90px, 10vw, 170px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(41,66,150,.55) 0%, rgba(31,46,110,.25) 55%, transparent 100%);
}
/* 211 gradient starts on the same mid-blue the wave crests sit in, then eases
   all the way down to the donation section's navy — no bright spike, no seam */
.uw-211 {
  background: linear-gradient(180deg,
    #1d3079 0%,
    #1b2a6b 24%,
    #202b72 52%,
    #212a6e 78%,
    var(--uw-navy) 100%) !important;
  margin-top: -1px; margin-bottom: -1px;
}
.uw-give { margin-top: 0 !important; }
/* feather the top of the donation band so its photo emerges from the same
   navy the 211 band ends on — sits between the wash and the family cut-out,
   so the people stay in front of it */
.uw-give__feather {
  position: absolute; left: 0; right: 0; top: -1px;
  height: clamp(120px, 16vw, 250px); pointer-events: none;
  background: linear-gradient(180deg, var(--uw-navy) 0%, rgba(33,41,107,.72) 34%, rgba(33,41,107,.28) 68%, rgba(33,41,107,0) 100%);
}
.uw-give .uw-give__wash { background: linear-gradient(90deg,
    rgba(19,26,72,0) 0%, rgba(19,26,72,.30) 24%,
    rgba(20,30,90,.88) 50%, var(--uw-navy) 66%) !important; }

/* ── soft page transitions (class set by transition.js; no-JS = visible) ── */
@media (prefers-reduced-motion: no-preference) {
  .uw-pt body {
    opacity: 0;
    transition: opacity .34s ease, transform .34s ease;
    transform: translateY(6px);
  }
  .uw-pt--in body { opacity: 1; transform: none; }
  /* the page must never be left invisible because a transition stalled; the
     script pins this on once the fade has had its time, and lifts it again
     before the leaving fade */
  .uw-pt--safe body { opacity: 1; transform: none; }
  .uw-pt--out body { opacity: 0; transform: translateY(-6px); }
}

/* ── tasteful scroll reveal (v2 had it disabled) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .uw-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
  }
  .uw-reveal.is-in { opacity: 1; transform: none; }
  .uw-np2card.uw-reveal { transform: translateY(34px) scale(.985); }
  .uw-np2card.uw-reveal.is-in { transform: none; }
}

/* ── 211 card: the speech-bubble "211" mark as the button ──────────────── */
.uw-211__card { gap: clamp(20px, 2.4vw, 34px); }
.uw-211__card h2 { margin: 0; }
.uw-211__btn {
  align-self: flex-start;
  display: inline-block; line-height: 0;
  border-radius: 14px;              /* focus-ring shape */
  transform-origin: 24% 82%;        /* pivot near the speech-bubble tail */
}
.uw-211__btn img {
  display: block; width: clamp(132px, 15vw, 190px); height: auto;
  filter: drop-shadow(0 10px 18px rgba(10, 30, 90, .3));
  transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), filter .28s ease;
}
.uw-211__btn:hover img,
.uw-211__btn:focus-visible img {
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 18px 26px rgba(10, 30, 90, .36));
}

@media (prefers-reduced-motion: no-preference) {
  /* a quick wiggle when the card first scrolls into view, then a soft idle
     nudge roughly every 9s; hover pauses it so the lift reads cleanly */
  .uw-211__card.is-in .uw-211__btn { animation: uw-211-wiggle 9s ease-in-out .3s infinite; }
  .uw-211__btn:hover, .uw-211__btn:focus-visible { animation-play-state: paused; }
  @keyframes uw-211-wiggle {
    0%   { transform: rotate(0); }
    3%   { transform: rotate(-9deg); }
    7%   { transform: rotate(7deg); }
    11%  { transform: rotate(-5deg); }
    15%  { transform: rotate(3deg); }
    19%  { transform: rotate(-1.5deg); }
    23%, 100% { transform: rotate(0); }
  }
}

/* ── donation: compact Give Now beside the heading, not full-width ──────── */
.uw-give__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(16px, 2vw, 32px); flex-wrap: wrap;
  margin-bottom: clamp(22px, 2.6vw, 38px);
}
.uw-give__head h2 { margin: 0 !important; }
.uw-btn--red.uw-give__now {
  width: auto; flex: none; align-self: center;
  border-radius: 10px;
  padding: 12px 34px; min-height: 50px;
  font-size: clamp(14px, 1.15vw, 18px);
}
@media (max-width: 900px) {
  .uw-give__head { flex-direction: column; align-items: stretch; }
  .uw-btn--red.uw-give__now { align-self: flex-start; }
}

/* ── centennial band ──────────────────────────────────────────────────────
   A tall paper-toned band that "punches out" of the sections above and below
   with a big convex curve on the top and bottom edges. Vintage rings and photo
   cut-outs (supplied as PNGs) bleed off both side edges; the copy sits centred
   in a clear channel down the middle. */
.uw-cent {
  position: relative;            /* no z-index -> no stacking context, so the
                                    red gel below can rise above .uw-give.
                                    horizontal bleed is caught by body{overflow-x:clip} */
  overflow: visible;
  background:
    radial-gradient(140% 120% at 50% 40%, #ffffff 0%, #f3f1ec 55%, #ece8e0 100%);
  /* extra top/bottom padding: the give + pillars bands curve down/up over
     these edges, so the copy has to start well inside them */
  padding: clamp(150px, 17vw, 300px) 0 clamp(150px, 17vw, 300px);
  text-align: center;
}
/* the sections above and below punch a convex circular edge INTO the centennial,
   covering its top and bottom with their own colour/photography */
body:not(.uw-page) .uw-give {
  position: relative; z-index: 2;
  margin-bottom: clamp(-130px, -12vw, -70px) !important;
  border-radius: 0 0 60% 60% / 0 0 clamp(60px, 9vw, 150px) clamp(60px, 9vw, 150px) !important;
}
/* the family cut-out is the SAME frame as the background photo, just masked so
   the people stay sharp while the rest is washed to navy. It must therefore
   sit exactly on top of .uw-give__bg — identical fit + position — and inside
   .uw-give__img so the section's rounded bottom clips both together. It layers
   above the wash/feather but below the donation panel and the 211 card. */
body:not(.uw-page) .uw-give { overflow: hidden; }
body:not(.uw-page) .uw-give__img { overflow: hidden; }
body:not(.uw-page) .uw-give__bg,
body:not(.uw-page) .uw-give__cut {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: left center;
}
body:not(.uw-page) .uw-give__cut { z-index: 1; }
body:not(.uw-page) .uw-give__wash { z-index: 0; }
body:not(.uw-page) .uw-give__feather { z-index: 0; }
body:not(.uw-page) .uw-give__grid { z-index: 2; }
body:not(.uw-page) .uw-pillars {
  position: relative; z-index: 2;
  margin-top: clamp(-130px, -12vw, -70px);
  border-radius: 60% 60% 0 0 / clamp(60px, 9vw, 150px) clamp(60px, 9vw, 150px) 0 0;
  overflow: hidden;
}
.uw-cent__inner { position: relative; z-index: 3; max-width: min(92vw, 960px); }
/* "100 YEARS OF UNITED WAY" / "building a strong" (brush script) / "RHODE ISLAND." */
.uw-cent__eyebrow {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0; font-size: clamp(28px, 4.6vw, 70px); line-height: .98;
  color: var(--uw-navy); margin: 0; white-space: nowrap;
}
.uw-cent__title { margin: 0; display: block; }
/* brand comp uses "Grillstone" (personal-use only) at 117px / 74px line-height —
   licence & swap that in; "Yellowtail" is the free stand-in, matched to the ratio */
.uw-cent__script {
  display: block; font-family: "Grillstone", "Yellowtail", "Segoe Script", cursive;
  font-weight: 400; color: var(--uw-red);
  font-size: clamp(36px, 6.4vw, 104px);
  line-height: .63;
  margin: clamp(6px, .8vw, 14px) 0 clamp(4px, .5vw, 10px);
  white-space: nowrap; text-transform: lowercase;
}
.uw-cent__lock {
  display: block; font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: var(--uw-navy); font-size: clamp(34px, 5.4vw, 84px); line-height: .98;
}
.uw-cent__lead {
  max-width: 52ch; margin: clamp(26px, 3.4vw, 48px) auto clamp(26px, 3.2vw, 42px);
  font-family: var(--uw-body); font-weight: 700; color: var(--uw-navy);
  font-size: clamp(14px, 1.16vw, 18px); line-height: 1.6;
}
.uw-cent__cta { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.uw-cent .uw-btn--red { min-width: clamp(280px, 26vw, 400px); border-radius: 40px; font-size: clamp(14px, 1.2vw, 18px); }
.uw-cent__reg {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: clamp(12px, 1.05vw, 16px);
  color: var(--uw-navy); text-decoration: none;
}
.uw-cent__reg:hover { color: var(--uw-blue); text-decoration: underline; }

/* decorative rings + vintage cut-outs bleeding off the edges */
.uw-cent__deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.uw-cent__el { position: absolute; display: block; height: auto; }
.uw-cent__band  { width: clamp(180px, 24vw, 420px); left: clamp(-140px, -10vw, -70px); top: clamp(-40px, -3vw, 0px); }
.uw-cent__blue  { width: clamp(120px, 16vw, 300px); left: clamp(-90px, -7vw, -40px); bottom: clamp(-40px, -4vw, 10px); }

/* the translucent red gel ring — forefront, rising up out of the band so it
   half-overlaps the photo in the section above and tints it through a
   multiply blend */
.uw-cent__red {
  position: absolute; z-index: 30;
  width: clamp(190px, 26vw, 460px); height: auto;
  left: clamp(-120px, -9vw, -60px);
  top: clamp(-190px, -17vw, -80px);
  mix-blend-mode: multiply;
  opacity: .82;
  filter: saturate(1.35) drop-shadow(0 10px 30px rgba(200, 30, 30, .28));
  pointer-events: none;
}
@media (max-width: 860px) {
  .uw-cent__red { width: clamp(150px, 40vw, 240px); left: -14%; top: clamp(-150px, -34vw, -90px); }
}
.uw-cent__kit   { width: clamp(150px, 19vw, 330px); left: clamp(-40px, -3vw, 10px); bottom: clamp(-70px, -6vw, -20px); }
.uw-cent__c1    { width: clamp(150px, 20vw, 380px); right: clamp(-140px, -11vw, -70px); top: clamp(-30px, -2vw, 10px); }
.uw-cent__gold  { width: clamp(150px, 20vw, 360px); right: clamp(-90px, -7vw, -40px); bottom: clamp(-20px, -2vw, 20px); }
.uw-cent__women { width: clamp(140px, 18vw, 320px); right: clamp(-30px, -2vw, 20px); bottom: clamp(-40px, -4vw, 0px); }
.uw-cent__kid   { width: clamp(70px, 9vw, 150px); right: clamp(70px, 9vw, 170px); bottom: clamp(120px, 14vw, 230px); }
@media (max-width: 1180px) {
  .uw-cent__kid { display: none; }
  .uw-cent__el { opacity: .92; }
}
@media (max-width: 860px) {
  .uw-cent { padding-left: 0; padding-right: 0; }
  .uw-cent__band, .uw-cent__c1 { width: clamp(120px, 30vw, 200px); }
  .uw-cent__red, .uw-cent__gold { width: clamp(110px, 26vw, 180px); }
  .uw-cent__blue, .uw-cent__kit, .uw-cent__women { display: none; }
  .uw-cent__band { left: -18%; top: -2%; }
  .uw-cent__red  { left: -16%; top: auto; bottom: 4%; }
  .uw-cent__c1   { right: -18%; top: 2%; }
  .uw-cent__gold { right: -16%; bottom: 4%; }
}
@media (max-width: 560px) {
  .uw-cent__el { opacity: .42; }
}

/* ── impact: fiscal-year line + emphasised 211 stat ────────────────────── */
/* v2 sizes this band for a taller composition and flex-centres it, which now
   leaves a large empty navy gap below the ALICE callout. Let it flow. */
body:not(.uw-page) .uw-stats {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(96px, 8vw, 150px) 0 clamp(96px, 9vw, 160px) !important;
}
.uw-stats__fy {
  position: relative; z-index: 1; text-align: center; color: rgba(255,255,255,.8);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(12px, 1vw, 16px);
  margin: clamp(-28px, -2vw, -16px) 0 clamp(34px, 4vw, 60px);
}
.uw-statcirc--emph .uw-statcirc__n { font-size: clamp(52px, 6.2vw, 108px); font-weight: 700; }
.uw-statcirc--emph .uw-statcirc__l { font-size: clamp(13px, 1.1vw, 18px); }
.uw-statcirc--emph .uw-statcirc__l span {
  display: block; font-weight: 700; opacity: .82; margin-top: 4px;
  font-size: .8em; letter-spacing: .02em;
}

/* the coloured circles are "doubled" — a transparent gap, then a thin
   concentric ring in the SAME hue as the fill, just brighter */
.uw-statcirc:not(.uw-statcirc--photo) {
  box-shadow: 0 0 0 clamp(3px, .5vw, 7px) transparent,
              0 0 0 clamp(5px, .78vw, 11px) currentColor;
}
.uw-statcirc--green  { color: #2ecb92; }   /* brighter #009464 */
.uw-statcirc--orange { color: #ffb04a; }   /* brighter #F47925 */
.uw-statcirc--purple,
.uw-statcirc--emph   { color: #a29ef2; }   /* brighter #7874D2 */

/* thin rule above the ALICE callout */
.uw-stats__rule {
  position: relative; z-index: 1;
  max-width: 1120px; margin: clamp(44px, 6vw, 92px) auto 0;
  height: 1px; background: rgba(255,255,255,.34);
}

/* ── ALICE callout ────────────────────────────────────────────────────── */
.uw-alice {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: clamp(150px, 16vw, 220px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px); align-items: center;
  max-width: 1120px; margin: clamp(26px, 3.2vw, 46px) auto 0;
  background: #fff; border-radius: var(--uw-r);
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 52px);
}
.uw-alice__logo img { width: 100%; height: auto; display: block; }
.uw-alice__body p {
  margin: 0 0 12px; color: var(--uw-ink);
  font-size: clamp(13px, 1.02vw, 16px); line-height: 1.55;
}
.uw-alice__body a {
  font-family: var(--uw-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; font-size: clamp(12px, 1vw, 15px);
  color: var(--uw-blue); text-decoration: none;
}
.uw-alice__body a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .uw-alice { grid-template-columns: 1fr; text-align: center; }
  .uw-alice__logo { width: 180px; margin: 0 auto; }
}

/* ── workplaces: let it flow (v2 flex-centres a tall min-height) ───────── */
.uw-work {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(72px, 8vw, 120px) 0 !important;
}

/* ── nonprofits: stacked full-width cards ──────────────────────────────── */
/* the tall bottom padding gives clear white space between the last card and
   the footer wave / overhanging portrait */
.uw-np2 { background: #fff; padding: clamp(64px, 7vw, 120px) 0 clamp(160px, 18vw, 280px); }
.uw-np2 .uw-wrap { max-width: min(94vw, 1360px); }
.uw-np2__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 52px);
}
.uw-np2__top h2 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: var(--uw-navy); font-size: clamp(30px, 4vw, 60px); line-height: .96; margin: 0;
}
.uw-np2__all {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  font-family: var(--uw-body); font-weight: 700; color: var(--uw-navy); text-decoration: none;
  font-size: clamp(13px, 1.1vw, 16px);
}
.uw-np2__all .uw-arrow { width: 34px; height: 34px; font-size: 15px; }

.uw-np2card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 42%, 620px);
  align-items: stretch;
  border-radius: 18px; overflow: hidden; text-decoration: none;
  margin-bottom: clamp(18px, 2vw, 30px);
  box-shadow: 0 16px 34px rgba(20, 32, 63, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.uw-np2card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(20, 32, 63, .18); }
.uw-np2card--flip { grid-template-columns: clamp(300px, 42%, 620px) minmax(0, 1fr); }
.uw-np2card--flip .uw-np2card__body { order: 2; }
.uw-np2card--flip .uw-np2card__img { order: 1; }

.uw-np2card__body {
  padding: clamp(28px, 3.4vw, 60px) clamp(28px, 3.6vw, 68px);
  color: #fff; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.2vw, 16px);
}
.uw-np2card__body h3 {
  font-family: var(--uw-body); font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: clamp(21px, 2vw, 31px); line-height: 1.2; color: #fff; margin: 0;
}
.uw-np2card__body p {
  margin: 0; color: rgba(255,255,255,.94);
  font-size: clamp(13px, 1.04vw, 16px); line-height: 1.5;
}
.uw-np2card__logo { margin-bottom: clamp(4px, .6vw, 10px); }
.uw-np2card__logo img { height: clamp(34px, 3.4vw, 52px); width: auto; display: block; background: #fff; border-radius: 6px; padding: 5px 8px; }
.uw-np2card--green .uw-np2card__logo img,
.uw-np2card--navy .uw-np2card__logo img { background: #fff; }

.uw-np2card__img { position: relative; min-height: clamp(240px, 30vw, 420px); }
.uw-np2card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.uw-np2card--green .uw-np2card__body  { background: var(--uw-green-deep); }
.uw-np2card--purple .uw-np2card__body { background: var(--uw-purple); }
.uw-np2card--navy .uw-np2card__body   { background: var(--uw-navy); }
.uw-np2card--blue .uw-np2card__body   { background: var(--uw-blue); }

@media (max-width: 860px) {
  .uw-np2card,
  .uw-np2card--flip { grid-template-columns: 1fr; }
  .uw-np2card--flip .uw-np2card__body { order: 2; }
  .uw-np2card--flip .uw-np2card__img,
  .uw-np2card__img { order: 1; min-height: clamp(200px, 56vw, 300px); }
}

/* ── donor quotes: sliding carousel ───────────────────────────────────── */
/* v2 flex-centres this band inside a ~1100px min-height; with the carousel it
   just needs to flow. */
.uw-donors {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(88px, 10vw, 170px) 0 clamp(120px, 13vw, 210px) !important;
}
/* mobile: v2 pulls .uw-stats up 58px over the donors and arcs its top edge —
   on a narrow column that overlap keeps eating the last testimonial's
   figcaption. Drop the pull-up entirely on mobile: donors flows straight into
   the stats band with a small flat gap, a gentle (non-overlapping) top curve. */
@media (max-width: 760px) {
  .uw-donors { margin-bottom: 0 !important; padding-bottom: clamp(40px, 9vw, 64px) !important; }
  body:not(.uw-page) .uw-stats {
    margin-top: 0 !important;
    border-radius: clamp(28px, 7vw, 44px) clamp(28px, 7vw, 44px) 0 0 / clamp(20px, 4vw, 30px) clamp(20px, 4vw, 30px) 0 0 !important;
    box-shadow: none !important;
  }
}
.uw-donors__grid { align-items: start; }
.uw-donors__grid > * { min-width: 0; }   /* let the 1fr column shrink to the viewport */
.uw-qc { position: relative; min-width: 0; }
/* clip only the horizontally-translated off-screen slides — NEVER clip a card
   vertically (that was chopping the figcaption on narrow screens) */
.uw-qc__viewport { overflow-x: clip; overflow-y: visible; min-width: 0; }
@supports not (overflow: clip) { .uw-qc__viewport { overflow: hidden; } }
.uw-qc__track {
  display: flex; gap: clamp(14px, 1.8vw, 26px); margin: 0; padding: 6px;
  list-style: none;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.uw-qc__slide {
  flex: 0 0 100%; min-width: 0;
  transition: opacity .35s ease;
}
.uw-qc__slide[aria-hidden="true"] { opacity: .32; }
@media (min-width: 900px) {
  .uw-qc__slide { flex-basis: calc((100% - clamp(14px, 1.8vw, 26px)) / 2); }
}
/* .uw-quote card styling is inherited from styles.v2.css (white card, navy
   figcaption). Cards match the tallest one via the flex row's stretch — but
   NEVER force a fixed height, and never clip: v2's .uw-quote{overflow:hidden}
   was chopping the figcaption + rounded corner on narrow screens where a long
   quote wraps past the measured height. */
.uw-qc__track { align-items: stretch; }
.uw-qc__slide .uw-quote { height: 100%; overflow: visible; }   /* fill the stretched slide, but never clip */
.uw-qc__slide .uw-quote > blockquote { flex: 1 1 auto; }       /* pin figcaption to the bottom */
/* dots rendered by JS into [data-dots="quotes"] */
.uw-dots button {
  width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
  background: rgba(33, 41, 107, .28); cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.uw-dots button[aria-current="true"] { background: var(--uw-navy); transform: scale(1.25); }
.uw-donors__ctl .uw-dots { display: inline-flex; gap: 9px; align-items: center; margin-left: 6px; }

/* ── subscribe pill: yellow with navy text, to match the button family ── */
.uw-footer .uw-sub-pill {
  background: var(--uw-gold) !important;
  color: var(--uw-navy) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
}
.uw-footer .uw-sub-pill b { color: var(--uw-blue) !important; }
.uw-footer .uw-sub-pill:hover { background: #ffc933 !important; color: var(--uw-navy) !important; }

/* ── footer: pruned nav, filled social chips ──────────────────────────── */
.uw-footer__base { align-items: center; }
.uw-btn--gold.uw-footer__cta {
  background: var(--uw-gold); color: var(--uw-navy);
  font-size: clamp(12px, 1vw, 15px); padding: 12px 26px; min-height: 44px;
}
.uw-btn--gold.uw-footer__cta:hover { background: #ffc933; color: var(--uw-navy); }
.uw-footer .uw-social a {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); color: #fff;
}
.uw-footer .uw-social a:hover { background: #fff; color: var(--uw-navy); border-color: #fff; }

/* ═══ polish round 2 (homepage) ══════════════════════════════════════════ */

/* ── 211 band: centre the block on the page, pull the card left so it
   overlaps the concentric disc more ─────────────────────────────────────── */
.uw-211 > .uw-wrap { max-width: var(--uw-max); margin-inline: auto; }
.uw-211__grid {
  padding-left: 0 !important;
  grid-template-columns: clamp(300px, 30vw, 460px) minmax(0, 1fr) !important;
  gap: clamp(40px, 5vw, 96px) !important;
  align-items: center;
}
.uw-211__card { margin-left: clamp(-40px, -6vw, -140px); }
@media (max-width: 900px) {
  .uw-211__grid { grid-template-columns: 1fr !important; padding-left: clamp(60px, 14vw, 120px) !important; }
  .uw-211__card { margin-left: 0; }
}

/* ── donation section: show the family lower / grounded, less empty couch ── */
body:not(.uw-page) .uw-give__bg,
body:not(.uw-page) .uw-give__cut { object-position: 30% bottom; }

/* ── centennial: paper texture background ───────────────────────────────── */
.uw-cent {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)),
    url("assets/uwri/cent-paper-texture.jpg") center / cover no-repeat,
    #f3f1ec;
}

/* ── donor carousel: smaller arrow circles ─────────────────────────────── */
.uw-donors__ctl .uw-arrow {
  width: clamp(40px, 3.4vw, 52px) !important;
  height: clamp(40px, 3.4vw, 52px) !important;
  font-size: clamp(15px, 1.3vw, 19px) !important;
}

/* ── stats: smaller circles, tighter gutter, bigger labels, better crops ── */
body:not(.uw-page) .uw-stats .uw-wrap {
  max-width: min(94vw, 1200px) !important;
  padding-left: clamp(24px, 4vw, 72px) !important;
  padding-right: clamp(24px, 4vw, 72px) !important;
}
body:not(.uw-page) .uw-stats__grid {
  max-width: min(90vw, 1040px) !important;
  gap: clamp(16px, 2vw, 34px) !important;
}
body:not(.uw-page) .uw-statcirc__n { font-size: clamp(38px, 4.4vw, 74px); }
body:not(.uw-page) .uw-statcirc--emph .uw-statcirc__n { font-size: clamp(44px, 5vw, 84px); }
body:not(.uw-page) .uw-statcirc__l { font-size: clamp(15px, 1.35vw, 21px) !important; line-height: 1.3; }
body:not(.uw-page) .uw-statcirc--emph .uw-statcirc__l { font-size: clamp(16px, 1.45vw, 22px) !important; }
body:not(.uw-page) .uw-statcirc--emph .uw-statcirc__l span { font-size: .78em; }
body:not(.uw-page) .uw-statcirc--photo img { object-position: center 38%; }

/* ── workplaces: navy card bodies, roomier titles ─────────────────────── */
.uw-work .uw-workcard__body { background: var(--uw-navy); }
.uw-work .uw-workcard h3 { color: #fff; line-height: 1.25; }
.uw-work .uw-workcard p { color: rgba(255,255,255,.92); }
.uw-work .uw-workcard a { color: var(--uw-gold); }
/* the whole card is the link on the homepage, so it must not pick up the
   default link underline/colour — the titles and copy set their own */
a.uw-workcard { text-decoration: none; color: inherit; }

/* ── footer: breathing room under the "United for Rhode Island" lockup ── */
.uw-footer .uw-footer__lock { margin-bottom: clamp(28px, 4vw, 64px); }

/* ── light parallax on decorative layers (JS adds .uw-parallax + --py) ─── */
@media (prefers-reduced-motion: no-preference) {
  .uw-parallax {
    translate: 0 var(--py, 0px);   /* composes with any existing transform */
    transition: translate .18s cubic-bezier(.22, 1, .36, 1);
    will-change: translate;
  }
}

/* ═══ polish round 3 ═══════════════════════════════════════════════════════ */

/* ── the 211 concentric disc must overflow DOWN onto the donation band
   below it without being clipped or covered ─────────────────────────────── */
.uw-211 { position: relative; z-index: 6 !important; overflow: visible !important; }
.uw-211 > .uw-wrap { position: relative; z-index: 2; }   /* card/body stay above their own disc */
.uw-211__rings { z-index: 1; }
body:not(.uw-page) .uw-give { z-index: 2; }              /* below the 211 layer, above the centennial */

/* faces visible in the donation photo + its matching cut-out */
body:not(.uw-page) .uw-give__bg,
body:not(.uw-page) .uw-give__cut { object-position: 50% 30% !important; }

/* ── donor-carousel arrows: solid navy disc, clean white play triangle ── */
.uw-donors__ctl .uw-arrow {
  width: clamp(42px, 3.3vw, 48px) !important;
  height: clamp(42px, 3.3vw, 48px) !important;
  background: var(--uw-navy) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  border-radius: 50%;
  position: relative;
}
.uw-donors__ctl .uw-arrow::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-style: solid;
}
.uw-donors__ctl .uw-arrow[data-q="prev"]::before {
  transform: translate(-62%, -50%);
  border-width: 6px 9px 6px 0;
  border-color: transparent #fff transparent transparent;
}
.uw-donors__ctl .uw-arrow[data-q="next"]::before {
  transform: translate(-38%, -50%);
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}
.uw-donors__ctl .uw-arrow:hover { background: var(--uw-blue) !important; transform: none; }

/* ── hero intro film ───────────────────────────────────────────────────────
   Plays once on load, then cross-dissolves to the static art. While it is
   live the static art is hidden, so nothing shows through the video's soft
   bottom edge except the section's own navy — no ghost of the still. The clip
   is framed looser than waterfire-braziers.png (the still adds a pedestal +
   water extension below the torches), so it is scaled up and nudged up to sit
   close to the still for a clean hand-off. */
.uw-wf__video {
  position: absolute; z-index: 0;             /* above the static art, below the copy (z-index:1) */
  display: block;
  left: 50%;
  bottom: calc(clamp(-46px, -3vw, -20px) + 5.9vw);
  transform: translateX(-50%) scale(1.105);
  transform-origin: bottom center;
  width: 104vw; height: auto;
  aspect-ratio: 3456 / 1767;
  object-fit: cover; object-position: center bottom;
  opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,.6) 91%, rgba(0,0,0,.2) 97%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,.6) 91%, rgba(0,0,0,.2) 97%, transparent 100%);
}
.uw-wf__video.is-live { opacity: 1; }
.uw-wf__art { transition: opacity .8s ease; }
.uw-wf.is-film .uw-wf__art { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .uw-wf__video { display: none !important; } }

/* ── 211 icons: brand phone + chat glyphs inside the white chips ───────── */
.uw-211__icons a img { width: 20px; height: 20px; display: block; }
.uw-211__icons a { overflow: hidden; }

/* ═══ ALICE — "Treading Water in the Ocean State" ═══════════════════════════
   A pale-blue band between the centennial and the pillars. Its top edge
   curves up to punch out of the centennial (same move the pillars used to
   make); the pillars now curve up out of THIS band. */
.uw-os {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #bcd7f2;
  color: var(--uw-navy);
  margin-top: clamp(-130px, -12vw, -70px);
  border-radius: 60% 60% 0 0 / clamp(60px, 9vw, 150px) clamp(60px, 9vw, 150px) 0 0;
}
/* the water-reflection photo fills the right side behind the card, cut on a
   soft diagonal so the left stays a clean pale field for the copy */
.uw-os__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #bcd7f2 url("assets/uwri/alice-water.jpg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(105deg, transparent 0 42%, #000 56%);
          mask-image: linear-gradient(105deg, transparent 0 42%, #000 56%);
}
.uw-os__bg::after {              /* keep the photo quiet under the card */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(188,215,242,0) 45%, rgba(188,215,242,.4) 62%, rgba(188,215,242,.15) 100%);
}
.uw-os__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 38%, 520px);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
  padding: clamp(96px, 12vw, 180px) var(--uw-gut) clamp(120px, 14vw, 220px);
}

/* left column */
.uw-os__logo { display: block; width: clamp(184px, 20vw, 264px); height: auto; margin-bottom: clamp(24px, 3vw, 44px); }
.uw-os h2 {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  color: var(--uw-navy);
  font-size: clamp(38px, 6.2vw, 96px); line-height: .9; letter-spacing: .005em;
  margin: 0 0 clamp(24px, 3vw, 46px);
}
.uw-os__lead {
  font-family: var(--uw-body); font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5;
  color: var(--uw-navy); max-width: 34ch; margin: 0 0 clamp(18px, 2vw, 28px);
}
.uw-os__lead strong { font-weight: 800; }
.uw-os__intro > p:not(.uw-os__lead) {
  font-family: var(--uw-body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6;
  color: rgba(33, 41, 107, .82); max-width: 42ch; margin: 0 0 clamp(22px, 2.6vw, 34px);
}
.uw-os__more {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: clamp(13px, 1.1vw, 16px);
  color: var(--uw-blue); text-decoration: none;
}
.uw-os__more span { transition: transform .25s ease; }
.uw-os__more:hover span { transform: translateX(4px); }

/* right column: the event card + video */
.uw-os__aside { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.uw-os__card {
  background: #fff; border-radius: clamp(16px, 2vw, 28px);
  padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3vw, 44px);
  text-align: center; color: var(--uw-navy);
  box-shadow: 0 24px 60px rgba(20, 40, 100, .18);
}
.uw-os__day {
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.3vw, 32px); line-height: 1.02; margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.uw-os__time { font-weight: 700; font-size: clamp(17px, 1.9vw, 26px); margin: 0; }
.uw-os__rule { display: block; width: 34px; height: 3px; background: var(--uw-navy); border-radius: 2px; margin: clamp(14px, 1.7vw, 22px) auto; }
.uw-os__loc { font-weight: 400; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.45; margin: 0; color: rgba(33, 41, 107, .82); }
.uw-os__seat {
  display: inline-block; margin-top: clamp(20px, 2.4vw, 34px);
  background: #9dbde9; color: var(--uw-navy);
  font-family: var(--uw-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(13px, 1.15vw, 17px);
  padding: clamp(11px, 1.2vw, 16px) clamp(26px, 3vw, 42px);
  border-radius: 40px; text-decoration: none; min-height: 44px;
  transition: background-color .2s, transform .2s;
}
.uw-os__seat:hover { background: #b6cff1; transform: translateY(-1px); }

.uw-os__video {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: clamp(12px, 1.6vw, 20px); overflow: hidden;
  box-shadow: 0 20px 44px rgba(20, 40, 100, .2);
}
.uw-os__video img { display: block; width: 100%; height: auto; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.uw-os__video:hover img { transform: scale(1.04); }
.uw-os__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(56px, 6vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .25s ease, background-color .25s ease;
}
.uw-os__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--uw-navy);
}
.uw-os__video:hover .uw-os__play,
.uw-os__video:focus-visible .uw-os__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

/* video lightbox (built by the inline script) */
.uw-vbox[hidden] { display: none; }
.uw-vbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(10, 15, 40, .82); backdrop-filter: blur(3px);
  padding: clamp(16px, 4vw, 60px);
}
.uw-vbox video { width: min(92vw, 1100px); max-height: 84vh; border-radius: 12px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.uw-vbox__close {
  position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 1;
}
.uw-vbox__close:hover { background: rgba(255,255,255,.28); }

/* the pillars now curve up out of the pale ALICE band instead of the paper */
body:not(.uw-page) .uw-pillars { margin-top: clamp(-120px, -11vw, -64px); }

@media (max-width: 900px) {
  .uw-os { border-radius: 40% 40% 0 0 / clamp(36px, 8vw, 70px) clamp(36px, 8vw, 70px) 0 0; }
  .uw-os__grid { grid-template-columns: 1fr; gap: clamp(32px, 8vw, 52px); padding: clamp(80px, 20vw, 140px) var(--uw-gut) clamp(90px, 20vw, 150px); }
  .uw-os__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0 62%, #000 82%); mask-image: linear-gradient(180deg, transparent 0 62%, #000 82%); }
  .uw-os__bg::after { background: linear-gradient(180deg, rgba(188,215,242,0) 55%, rgba(188,215,242,.35) 80%); }
  .uw-os__lead, .uw-os__intro > p:not(.uw-os__lead) { max-width: none; }
}

/* ═══ launch polish: type scale, stats portraits, footer proportions ═════ */
.uw-header--v3 .uw-nav {
  flex-wrap: wrap;
  justify-content: center;
}

body:not(.uw-page) .uw-os h2 {
  font-size: clamp(34px, 5.2vw, 78px);
  line-height: 1.04;
}
body:not(.uw-page) .uw-donors h2 {
  font-size: clamp(32px, 3.2vw, 54px);
  line-height: 1.08;
}
.uw-np2__top h2 {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.05;
}
.uw-np2card__body h3,
.uw-work .uw-workcard h3,
.uw-article h3 {
  font-family: var(--uw-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
.uw-np2card__body h3 { font-size: clamp(20px, 1.75vw, 28px); }
.uw-work .uw-workcard h3 { font-size: clamp(19px, 1.5vw, 26px); }
.uw-article h3 { font-size: clamp(21px, 1.6vw, 29px); }

body:not(.uw-page) .uw-statcirc--photo {
  padding: 0 !important;
  border-radius: 50%;
  overflow: hidden;
  border: clamp(5px, .75vw, 10px) solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 clamp(5px, .8vw, 12px) rgba(255, 255, 255, .16),
              0 22px 42px rgba(4, 14, 50, .28);
  background: var(--uw-blue-pale);
}
body:not(.uw-page) .uw-statcirc--photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1.01);
}
body:not(.uw-page) .uw-statcirc--photo:nth-of-type(2) img { object-position: center 42%; }
body:not(.uw-page) .uw-statcirc--photo:nth-of-type(4) img { object-position: center 46%; }
body:not(.uw-page) .uw-statcirc--photo:nth-of-type(6) img { object-position: center 40%; }

@media (min-width: 861px) {
  .uw-footer {
    min-height: clamp(620px, 53vw, 880px);
    padding-top: clamp(48px, 4.8vw, 82px);
  }
  .uw-footer__inner {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 430px) !important;
    column-gap: clamp(28px, 3.4vw, 56px);
  }
  .uw-footer .uw-footer__lock {
    font-size: clamp(52px, 8.8vw, 138px);
    line-height: .9;
    margin-bottom: clamp(22px, 2.8vw, 44px);
  }
  .uw-footer__portrait {
    width: min(100%, clamp(290px, 28vw, 420px)) !important;
    margin-top: clamp(-198px, -12vw, -138px) !important;
  }
  .uw-footer__contact {
    width: min(100%, clamp(220px, 18vw, 310px));
    padding-left: clamp(24px, 2.8vw, 44px);
    font-size: clamp(11px, .82vw, 14px);
    transform: translateX(clamp(16px, 1.6vw, 34px));
  }
  .uw-footer__base {
    width: min(100%, clamp(560px, 54vw, 780px));
    margin-top: clamp(28px, 3.2vw, 52px);
  }
}

@media (max-width: 860px) {
  .uw-header--v3 .uw-nav {
    justify-content: flex-end;
    gap: 10px;
  }
  .uw-header--v3 .uw-nav__211 {
    width: auto;
    min-height: 38px;
    padding: 9px 18px !important;
  }
  .uw-footer .uw-footer__lock {
    font-size: clamp(36px, 10.4vw, 60px);
    line-height: .94;
  }
  .uw-footer__portrait {
    width: clamp(220px, 62vw, 340px);
  }
}

/* ═══ the ALICE ground carries on under the pillars ═══════════════════════
   The pale field and its water photo used to stop at a white curve just above
   "Building a Stronger Rhode Island Together". Now the photo dissolves into
   the flat field before that band ends, and the pillars keep the same field —
   so the ground runs on behind the title and frames the three cards instead
   of them sitting edge to edge on white. Homepage only. */

/* dissolve the photo into the pale field toward the foot of the band, so the
   pillars can pick the field up with nothing to match and no seam to show */
body:not(.uw-page) .uw-os__bg {
  -webkit-mask-image:
    linear-gradient(105deg, transparent 0 42%, #000 56%),
    linear-gradient(180deg, #000 68%, transparent 92%);
          mask-image:
    linear-gradient(105deg, transparent 0 42%, #000 56%),
    linear-gradient(180deg, #000 68%, transparent 92%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
body:not(.uw-page) .uw-os__bg::after {
  background: linear-gradient(105deg, rgba(188,215,242,0) 45%, rgba(188,215,242,.4) 62%, rgba(188,215,242,.15) 100%);
}

/* the pillars sit on that same field rather than on paper */
body:not(.uw-page) .uw-pillars {
  background: #bcd7f2;
  padding-bottom: clamp(54px, 5.6vw, 92px);
}

/* inset the row and open it up, so the field reads as a border around and
   between the three cards */
body:not(.uw-page) .uw-pillars__grid {
  max-width: var(--uw-max);
  margin: 0 auto;
  padding: 0 var(--uw-gut);
  gap: clamp(14px, 1.6vw, 26px);
}
body:not(.uw-page) .uw-pillar {
  border-radius: clamp(16px, 1.8vw, 26px);
  box-shadow: 0 18px 40px rgba(33, 41, 107, .16);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
body:not(.uw-page) .uw-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(33, 41, 107, .24);
}
/* the hairline that separated the touching bands has no job once they are
   sitting apart on the field */
body:not(.uw-page) .uw-pillar__band { border-left: none; }

@media (prefers-reduced-motion: reduce) {
  body:not(.uw-page) .uw-pillar { transition: none; }
  body:not(.uw-page) .uw-pillar:hover { transform: none; }
}