/* Burger takeover width. styles.v2.css hides .uw-nav and shows .uw-burger at
   max-width:1080px, so every rule describing the collapsed/open menu must use
   this same number. Kept here as a comment because media queries cannot read
   custom properties. */
/* United Way of Rhode Island — mobile optimisation layer
   ------------------------------------------------------
   Loaded AFTER styles.v2.css. Kept as its own file so the mobile pass is
   reviewable in isolation and maps to a single responsive partial in the
   WordPress theme. Nothing here affects the desktop composition (≥861px).

   Fixes, in order of severity:
     1. the 211 ring disc rendered 390×802 — full-bleed and taller than its
        own section, sitting over the copy
     2. section rhythm ranged from 0px to 250px, so bands either collided
        or left a screen of dead space
     3. 17 tap-target patterns below the 44px minimum
     4. 24 text patterns below 14px, down to 8px
*/

@media (max-width: 860px) {

  /* ── 1. decorative ring disc ─────────────────────────────────────────
     At desktop this is an oversized arc bleeding off the left edge. The
     viewport-relative width made it 390px wide and 802px tall on a phone,
     covering the 211 card and body copy. Anchor it off-canvas at a fixed
     size so it still reads as a brand accent behind the content. */
  .uw-211 { position: relative; overflow: hidden; }
  .uw-211__rings {
    width: 300px; height: 300px;
    top: auto; bottom: -110px; left: -150px;
    z-index: 0; opacity: .5;
  }
  .uw-211 > .uw-wrap { position: relative; z-index: 2; }

  /* ── 2. vertical rhythm ──────────────────────────────────────────────
     One token for every band, so spacing is predictable while scrolling. */
  :root { --uw-sec-m: 56px; }
  .uw-211, .uw-give, .uw-pillars, .uw-donors, .uw-stats,
  .uw-work, .uw-np, .uw-join, .uw-news {
    padding-top: var(--uw-sec-m);
    padding-bottom: var(--uw-sec-m);
  }
  .uw-hero { padding-top: 24px; padding-bottom: var(--uw-sec-m); }
  .uw-footer { padding-top: var(--uw-sec-m); }

  /* ── 3. tap targets ──────────────────────────────────────────────────
     44px is the floor. Buttons grow; inline text links gain padding so the
     hit area extends past the glyph height without shifting the layout. */
  .uw-btn,
  .uw-np__link,
  .uw-news__all,
  .uw-pill,
  .uw-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 20px;
  }
  .uw-search,
  .uw-burger,
  .uw-arrow,
  .uw-211__icons a,
  .uw-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* inline links inside body copy */
  .uw-211__body p a,
  .uw-workcard__body a,
  .uw-footer__contact p a,
  .uw-footer__nav a,
  .uw-footer__legal a {
    display: inline-block;
    padding-block: 13px;
  }
  /* the footer nav is a row of short links — space them so the enlarged
     hit areas don't butt up against each other */
  .uw-footer__nav { gap: 4px 20px; flex-wrap: wrap; }
  .uw-social { gap: 8px; }

  /* ── 4. legible type ─────────────────────────────────────────────────
     14px floor for anything a reader has to parse; buttons and labels keep
     their uppercase tracking but stop dropping to 11–12px. */
  .uw-btn,
  .uw-pill,
  .uw-tab,
  .uw-nav a,
  .uw-np__link,
  .uw-news__all { font-size: 14px; }

  .uw-give__impact span,
  .uw-workcard__body p,
  .uw-workcard__body a,
  .uw-joincol p,
  .uw-quote__role,
  .uw-footer__eyebrow,
  .uw-footer__contact,
  .uw-footer__contact p a,
  .uw-footer__nav a,
  .uw-footer__legal,
  .uw-footer__legal a,
  .uw-article time { font-size: 14px; }

  .uw-badge-alt b { font-size: 11px; }

  /* ── 5. cramped grids ────────────────────────────────────────────────
     The stat circles were sharing a 390px row at 159px each, which crushed
     both the numeral and its label. One per row reads far better. */
  .uw-stats__grid { grid-template-columns: 1fr; justify-items: center; gap: 32px; }

  /* generous inner padding was tuned for desktop card widths */
  .uw-211__card { padding: 26px; }
}

/* ── narrow phones ─────────────────────────────────────────────────────
   Below 400px the hero headline and section padding both need one more
   step down to avoid a cramped first screen. */
@media (max-width: 400px) {
  :root { --uw-sec-m: 46px; }
  .uw-211__rings { width: 240px; height: 240px; bottom: -90px; left: -125px; }
}

/* ── specificity corrections ───────────────────────────────────────────
   Three base rules in styles.v2.css outrank the block above:
     · .uw-joincol .uw-btn  (0,2,0) pinned the Join buttons to 34px/11px
     · .uw-211 { padding: 0 !important } kept that band flush
     · the footer legal + social type sit on their own descendant rules
   Matched here at equal-or-greater weight rather than loosened at source,
   so the desktop composition is untouched. */
@media (max-width: 860px) {
  .uw-joincol .uw-btn {
    min-height: 44px;
    padding: 11px 24px;
    font-size: 14px;
  }
  .uw-211 { padding-top: var(--uw-sec-m) !important; padding-bottom: var(--uw-sec-m) !important; }
  .uw-footer__legal div,
  .uw-footer__legal a,
  .uw-social a { font-size: 14px; }
}

/* ── very narrow phones (≤360px) ───────────────────────────────────────
   At 320px three elements still ran past the edge:
     · header — 150px logo + 172px of controls exceeded the 320px row
     · .uw-give__panel — desktop side padding made it wider than its wrap
     · .uw-np__copy — 58px side padding on a 320px viewport
   The search control is the one header affordance with a duplicate route
   (it also lives in the menu), so it yields first rather than shrinking
   every target below the 44px floor. */
@media (max-width: 360px) {
  .uw-logo img { width: 118px; }
  .uw-header__inner { padding-inline: 12px; gap: 6px; }
  .uw-header__end { gap: 4px; }
  .uw-search { display: none; }
  .uw-header__end .uw-btn { padding-inline: 12px; }

  .uw-give__panel { padding-left: 18px; padding-right: 18px; }
  .uw-np__copy { padding-left: 20px; padding-right: 20px; }
  .uw-wrap { padding-inline: 16px; }
}

/* Fixed pixel widths that outrun a 320px column. These were sized for the
   desktop footer/give layouts; at phone width they need to follow the grid
   rather than assert their own measure. */
@media (max-width: 360px) {
  .uw-give__panel,
  .uw-footer__side,
  .uw-footer__contact,
  .uw-footer__portrait { width: auto; max-width: 100%; }
}

/* The width declarations above were applying but losing to intrinsic
   min-content sizing: grid and flex children default to min-width:auto, so
   a 280px portrait image and the panel's own padding held these boxes wider
   than their 288px column. Releasing the floor is what actually shrinks them. */
@media (max-width: 360px) {
  .uw-give__panel,
  .uw-give__grid > *,
  .uw-footer__grid > *,
  .uw-footer__side,
  .uw-footer__contact,
  .uw-footer__portrait { min-width: 0; }
  .uw-footer__portrait img { width: 100%; height: 100%; object-fit: cover; }
}

/* The footer grid still resolved to "0px 300px" — a hard 300px track that a
   288px viewport column cannot hold, which is what pushed the portrait past
   the right edge. A single fluid track lets it follow the viewport. */
@media (max-width: 360px) {
  .uw-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* The nonprofit band's copy and image blocks carry desktop-scale fixed
   widths and side padding, which spill at intermediate phone widths
   (a 375px viewport rendered them 379px wide). Constrain across the whole
   mobile range rather than at one breakpoint. */
@media (max-width: 860px) {
  .uw-np__copy,
  .uw-np__img,
  .uw-np__img img { max-width: 100%; min-width: 0; }
  .uw-np__copy { padding-left: clamp(20px, 6vw, 58px); padding-right: clamp(20px, 6vw, 58px); }
}

/* Trailing details: a decorative divider path sat 3px past the edge at every
   width (no scrollbar, but it clipped inconsistently), and the logo link fell
   just under the tap-target floor on the narrowest phones. */
@media (max-width: 860px) {
  .uw-logo { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── tablet boundary (861–1024px) ──────────────────────────────────────
   Just above the mobile breakpoint the nonprofit band's heading row runs
   out of room: .uw-np__link is a non-shrinking flex item, so at 861px it
   sat 62px outside its own container. Letting the row wrap keeps the link
   whole instead of forcing the heading to give up space. */
@media (min-width: 861px) and (max-width: 1024px) {
  .uw-np__top { flex-wrap: wrap; row-gap: 18px; }
  .uw-np__link { flex: 0 0 auto; }

  /* News cards carry a fixed height:560px with overflow:hidden. In this band
     the 3-column grid narrows each track to ~246px, so the body copy reflows
     to one extra line the fixed height cannot absorb and the last line is
     sliced 4px mid-glyph. A minimum height keeps the cards aligned while
     letting the tallest one grow to fit its text. */
  .uw-article { height: auto; min-height: 560px; }
}

/* == mobile composition fixes (reported on device) =================== */
@media (max-width: 860px) {

  /* -- 1. 211 band ---------------------------------------------------
     The ring disc is a left-bleeding desktop accent: on a phone it reads
     as a cropped half-circle attached to nothing, so it is removed rather
     than shrunk. The band gradient also runs 90deg, which on a tall
     narrow section resolves to a flat wall that stops dead at the photo
     below - turning it vertical lets it land on navy and meet the next
     section without a hard seam. */
  .uw-211__rings { display: none; }
  .uw-211 { background: linear-gradient(176deg, #2C378F 0%, #21296B 62%, #21296B 100%); }

  /* -- 2. "Your Gift. Real Impact." -----------------------------------
     Mobile was splitting this into a photo block stacked above a navy
     panel. Restore the desktop composition - photo covering the section,
     gradient wash over it, cutout figures on top - with the wash rotated
     to vertical so the copy stays legible over the lower half. The cutout
     art is 2:1, so it spans full width and derives its own height. */
  /* .uw-give ---------------------------------------------------------
     family-cutout.png IS hero-reading.jpg with the background masked out:
     both are 2:1 (1600x800 and 4096x2047) and the pixels under the mask
     match (mean channel delta 6.5). So the two layers are meant to sit in
     EXACT register - photo, then gradient over it, then the cutout on top,
     which keeps the family bright while the room behind them dims. Scaling
     or offsetting either layer is what produced the doubled family.

     Both images therefore share one box and one identical fit; the gradient
     sits between them and resolves to navy at the floor, and the donation
     panel is overlaid below on that navy. */
  .uw-give { position: relative; overflow: hidden; min-height: 0; }
  .uw-give__grid { grid-template-columns: 1fr; position: relative; z-index: 3; }
  /* The subject sits left of centre in the frame (x 6.8%->59.0%, centre 32.9%),
     so object-position:50% centres the ROOM and slices the grandmother off the
     left edge. Fixed by sizing the BOX rather than the layers: at width 152%
     the subject's centre lands exactly on the viewport centre (0.5 - .329*1.52
     = 0), and the subject spans 79% of the screen. Because the box is 2:1 -
     the artwork's own ratio - "cover" crops nothing, so nothing can clip.
     Both layers stay in register because they are inset:0 children of this
     box: move or resize the box, never the layers. */
  .uw-give__img {
    position: absolute; top: 0; left: 0; right: auto; bottom: auto;
    width: 152%; aspect-ratio: 2 / 1; height: auto;
    min-height: 0; z-index: 0; overflow: hidden;
  }
  /* one shared geometry for both layers - the ".uw-give__img img" base rule
     is (0,2,1), so these need the tag qualifier to win */
  .uw-give__img img.uw-give__bg,
  .uw-give__img img.uw-give__cut {
    position: absolute; inset: 0; left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; height: 100%; max-width: none; transform: none;
    object-fit: cover; object-position: center center;
  }
  .uw-give__img img.uw-give__bg { z-index: 0; }
  .uw-give__img img.uw-give__cut { z-index: 2; }
  /* the wash dims the room between the two copies, then carries to navy */
  .uw-give__wash {
    display: block; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
      rgba(33,41,107,0) 0%,
      rgba(33,41,107,.22) 30%,
      rgba(33,41,107,.52) 52%,
      rgba(33,41,107,.80) 68%,
      rgba(33,41,107,.96) 80%,
      #21296B 88%);
  }
  .uw-give__panel {
    position: relative; z-index: 3;
    padding-top: calc(76vw - clamp(96px, 26vw, 190px));
    padding-bottom: clamp(38px, 9vw, 64px);
  }

  /* -- 3. donor quotes ------------------------------------------------
     .uw-stats casts a 92px upward box-shadow plus a curved top edge, both
     of which paint OVER whatever precedes it. My unified 56px section
     padding was smaller than that reach, so the arc sliced into the last
     quote card. Clear the full shadow height. */
  .uw-donors { padding-bottom: calc(var(--uw-sec-m) + 104px); }

  /* -- 4. footer ------------------------------------------------------
     Two faults: the grid stayed 2-column above 360px, so the giant
     "United for Rhode Island" lock (nowrap) ran straight through the
     contact column; and overflow:hidden on .uw-footer clipped the layered
     wave, which sits above the footer edge. The lock is allowed to wrap;
     the wave itself is restored in the dedicated edge rules below. */
  .uw-footer { min-height: 0; padding-top: 0; overflow: hidden; }
  .uw-footer__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 7vw, 52px); }
  .uw-footer__lock { white-space: normal; font-size: clamp(40px, 12.4vw, 72px); line-height: .92; }
  .uw-footer__brand { order: 2; }
  .uw-footer__side { order: 1; display: flex; flex-direction: column; gap: clamp(20px, 5vw, 32px); }
  .uw-footer__portrait { margin: 0; width: clamp(180px, 52vw, 260px); }
  .uw-footer__contact { border-left: none; padding-left: 0; }
  .uw-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
  .uw-sub-pill { margin-top: 0; }
}

/* -- give section breakpoint alignment (861-900px) ---------------------
   styles.v2.css stacks .uw-give__grid at 900px, but its wash and cutout
   stay in their desktop (horizontal) arrangement until 900 as well - so
   861-900px got a stacked panel over a left-to-right gradient. The rest of
   the mobile layer switches at 860, so hold the two-column composition
   down to that same line and let one breakpoint govern the section. */
@media (min-width: 861px) and (max-width: 900px) {
  .uw-give__grid { grid-template-columns: 1fr 1fr; }
}

/* ── footer running order (mobile) ─────────────────────────────────────
   Requested order: logo → "United for Rhode Island" → sub-page nav →
   address + accreditation stamps → socials.

   Those blocks live in two different wrappers (.uw-footer__grid holds the
   brand and side columns, .uw-footer__base holds the nav and socials), so
   no amount of ordering inside either one can interleave them. Collapsing
   both wrappers with display:contents promotes all four to children of
   .uw-footer__inner, where a single flex order applies across them. The
   wrappers keep their desktop roles untouched. */
@media (max-width: 860px) {
  .uw-footer__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 7vw, 48px);
  }
  .uw-footer__grid,
  .uw-footer__base { display: contents; }

  .uw-footer__brand { order: 1; }
  .uw-footer__nav   { order: 2; }
  .uw-footer__side  { order: 3; }
  .uw-social        { order: 4; }

  /* the two collapsed wrappers were carrying this spacing themselves */
  .uw-footer__nav { gap: 10px 20px; }
}

/* ── yellow subscribe bar on one line ──────────────────────────────────
   It was sized by a 296px minimum plus desktop padding, so the label wrapped
   to two lines on phones. Release the minimum and let the type scale with the
   viewport instead, with nowrap making the single line explicit. */
@media (max-width: 860px) {
  .uw-sub-pill {
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(9.5px, 3.15vw, 16px);
    padding: 13px clamp(12px, 3.6vw, 22px);
    gap: .35em;
  }
}

/* Portrait moves above the logo. It lives inside .uw-footer__side alongside the
   address block, so collapsing that wrapper too promotes both to siblings of
   the brand and nav — then the portrait can lead while the address stays below
   the nav. Same technique as the wrappers above; desktop is unaffected. */
@media (max-width: 860px) {
  .uw-footer__side { display: contents; }
  .uw-footer__portrait { order: 0; }
  .uw-footer__contact  { order: 3; }
}

/* ── follow-ups ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {

  /* 2. FOOTER PORTRAIT — promote it to a lead element rather than a thumbnail */
  .uw-footer__portrait { width: clamp(240px, 76vw, 420px); }

  /* 3. JOIN CARDS
     The three stacked cards are equal-height grid rows, but their content
     was packed to the top (flex-start), leaving the dead space below each
     button that reads as a shift upward. */
  .uw-joincol {
    justify-content: center;
    padding-top: clamp(30px, 8vw, 44px);
    padding-bottom: clamp(30px, 8vw, 44px);
  }

  /* 4. 211 BAND
     .uw-211__grid keeps a large left padding whose only job is to clear the
     ring disc bleeding in from the left. The disc is removed on mobile, so
     that padding is now pure offset and pushes the whole band right. */
  .uw-211__grid { padding-left: 0; padding-right: 0; }
  .uw-211__card { width: 100%; }
}

/* The cutout PNG is sliced flat at its own bottom edge, and it sits ABOVE the
   wash (z-index 2 vs 1), so the wash cannot soften it. Fade the layer itself
   out with a mask, timed to finish where the wash reaches solid navy (88%), so
   the figures dissolve into the band instead of ending on a hard line. */
@media (max-width: 860px) {
  .uw-give__img img.uw-give__cut {
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.22) 84%, transparent 90%);
    mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.22) 84%, transparent 90%);
  }
}

/* ══ header: larger controls, animated burger, reading progress ═════════ */

/* ── desktop scale-up ───────────────────────────────────────────────────
   The nav sat on --uw-label (the same 12–17px used for tiny captions), so
   the primary navigation read smaller than the body copy beside it. These
   are the most-used controls on the page and can carry more weight. */
@media (min-width: 861px) {
  .uw-logo img { width: clamp(178px, 15.2vw, 262px); }
  .uw-search { width: 48px; height: 48px; }
  .uw-header__end { gap: 14px; }
  .uw-header__end .uw-btn {
    font-size: clamp(14px, 1.12vw, 19px);
    padding: 14px 30px;
    min-height: 52px;
  }

}

/* The inline nav only exists above the burger breakpoint, so its sizing and the
   current-section underline belong here rather than at 861px — below this the
   same links are rendered by the open panel instead. */
@media (min-width: 1081px) {
  .uw-nav { gap: clamp(16px, 2vw, 30px); }
  .uw-nav a {
    font-size: clamp(15px, 1.22vw, 21px);
    padding: 10px 2px;
    position: relative;
  }
  .uw-nav i { height: 21px; }
  /* current section gets an underline that grows from the centre */
  .uw-nav a::after {
    content: ''; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px;
    background: var(--uw-red); border-radius: 2px;
    transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform .28s cubic-bezier(.22,1,.36,1);
  }
  .uw-nav a:hover::after,
  .uw-nav a[aria-current]::after { transform: scaleX(1); }
}

/* ── burger: bars morph into an X ───────────────────────────────────────
   The three bars are absolutely centred so they rotate about a shared
   point: the outer two cross, the middle one fades. */
.uw-burger { position: relative; }
.uw-burger span {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 2.5px;
  margin-left: -13px;
  transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .18s linear;
}
.uw-burger span:nth-child(1) { transform: translateY(-8px); }
.uw-burger span:nth-child(2) { transform: translateY(0); }
.uw-burger span:nth-child(3) { transform: translateY(8px); }
.uw-burger.is-open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.uw-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.uw-burger.is-open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .uw-burger span { transition: none; }
}

/* ── open menu panel (replaces the old inline styles) ─────────────────
   1080px, not 860px: this must match where styles.v2.css actually reveals the
   burger, or the button appears with no panel behind it. */
@media (max-width: 1080px) {
  .uw-nav.is-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    padding: 6px var(--uw-gut) 18px;
    box-shadow: 0 18px 40px rgba(20,32,63,.14);
    animation: uw-menu-in .3s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes uw-menu-in { from { opacity: 0; transform: translateY(-8px); } }
  @media (prefers-reduced-motion: reduce) {
    .uw-nav.is-open { animation: none; }
  }
  /* menu items get real presence and a comfortable row height */
  .uw-nav.is-open a {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.1;
    padding: 16px 2px;
    border-bottom: 1px solid rgba(33,41,107,.12);
  }
  .uw-nav.is-open a:last-of-type { border-bottom: none; }
  .uw-nav.is-open a[aria-current] { color: var(--uw-blue); }
  /* the hairline dividers between desktop links are noise in a stacked list */
  .uw-nav.is-open i { display: none; }
}

/* ── reading progress bar ───────────────────────────────────────────────
   Sits on the header's bottom edge. The fill is a transform so it never
   triggers layout, and its colour tracks the section under the header. */
.uw-prog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: rgba(33,41,107,.10); overflow: hidden;
  --uw-prog-color: var(--uw-blue);
}
.uw-prog__fill {
  display: block; width: 100%; height: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--uw-prog-color);
  transition: background-color .45s ease;
}
.uw-prog[data-zone="help"]    { --uw-prog-color: var(--uw-blue-bright); }
.uw-prog[data-zone="involve"] { --uw-prog-color: var(--uw-red); }
.uw-prog[data-zone="about"]   { --uw-prog-color: var(--uw-gold); }
/* the fill restarts at each boundary, so skip the tween on the reset frame */
.uw-prog__fill { transition: background-color .45s ease, transform .12s linear; }
@media (max-width: 860px) { .uw-prog { height: 4px; } }

/* ══ functional controls ════════════════════════════════════════════════ */

/* ── arrows sized up ────────────────────────────────────────────────────
   These are now real carousel controls, not ornaments, so they need to read
   as buttons and clear the 44px touch floor at every width. */
.uw-arrow { width: 60px; height: 60px; font-size: 22px; transition: background-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.uw-arrow:active { transform: scale(.94); }
.uw-np__ctl .uw-arrow { width: 52px; height: 52px; font-size: 20px; }
.uw-news__all .uw-arrow,
.uw-np__link .uw-arrow { width: 34px; height: 34px; font-size: 15px; }
@media (max-width: 860px) {
  .uw-arrow { width: 52px; height: 52px; }
  .uw-np__ctl .uw-arrow { width: 48px; height: 48px; }
}

/* ── pager dots ─────────────────────────────────────────────────────────
   The nonprofit card already had a dot pair; the quote carousel needed a
   matching one so both pagers report position the same way. */
.uw-dots { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.uw-dots i,
.uw-np__dots i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(33,41,107,.28); transition: background-color .3s ease, transform .3s ease;
}
.uw-dots i.on,
.uw-np__dots i.on { background: var(--uw-navy); transform: scale(1.25); }
.uw-np__dots i { background: rgba(255,255,255,.4); }
.uw-np__dots i.on { background: #fff; }

/* incoming carousel content slides in so the change is legible */
@keyframes uw-swap-in { from { opacity: 0; transform: translateY(10px); } }
.uw-np__copy.is-swap > h3,
.uw-np__copy.is-swap > p { animation: uw-swap-in .42s cubic-bezier(.22,1,.36,1) both; }
.uw-np__copy.is-swap > p:nth-of-type(2) { animation-delay: .06s; }
.uw-quotes .uw-quote { animation: uw-swap-in .44s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  .uw-np__copy.is-swap > h3, .uw-np__copy.is-swap > p, .uw-quotes .uw-quote { animation: none; }
}

/* ── search panel ───────────────────────────────────────────────────────
   Drops out of the header, searches the headings on the page, and scrolls to
   whichever result you pick. */
.uw-searchbar {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 130;
  background: #fff; box-shadow: 0 18px 40px rgba(20,32,63,.16);
  animation: uw-menu-in .26s cubic-bezier(.22,1,.36,1) both;
}
.uw-searchbar__inner {
  position: relative; max-width: var(--uw-max); margin: 0 auto;
  padding: 14px var(--uw-gut) 18px;
}
.uw-searchbar input {
  width: 100%; box-sizing: border-box;
  font-family: var(--uw-body); font-size: clamp(16px, 1.4vw, 22px);
  color: var(--uw-navy); background: var(--uw-blue-mist);
  border: 1px solid rgba(33,41,107,.18); border-radius: 10px;
  padding: 14px 52px 14px 16px; min-height: 54px;
}
.uw-searchbar input:focus-visible { outline: 3px solid rgba(80,130,240,.45); outline-offset: 2px; }
.uw-searchbar__x {
  position: absolute; top: 22px; right: calc(var(--uw-gut) + 8px);
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  color: var(--uw-navy); font-size: 17px; border-radius: 50%;
}
.uw-searchbar__x:hover { background: rgba(33,41,107,.08); }
.uw-searchbar__out { list-style: none; margin: 10px 0 0; padding: 0; }
.uw-searchbar__out li + li { border-top: 1px solid rgba(33,41,107,.1); }
.uw-searchbar__out button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 13px 6px; min-height: 46px; border-radius: 8px;
  font-family: var(--uw-body); color: var(--uw-navy);
}
.uw-searchbar__out button:hover { background: var(--uw-blue-mist); }
.uw-searchbar__out b { font-weight: 700; font-size: 15px; line-height: 1.35; }
.uw-searchbar__out span {
  flex: none; font-family: var(--uw-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: .04em; color: var(--uw-blue);
}
.uw-searchbar__out .is-empty {
  padding: 14px 6px; font-family: var(--uw-body); font-size: 15px; color: rgba(33,41,107,.6);
}

/* the search button is hidden on the smallest phones, so its panel goes too */
@media (max-width: 360px) { .uw-searchbar { display: none; } }

/* The pagers set the [hidden] attribute, but .uw-article and .uw-quote both
   declare display:flex, which beats the UA sheet's [hidden]{display:none} —
   so every panel stayed visible and the switches looked dead. An author-level
   rule is what actually wins here. */
.uw-article[hidden],
.uw-quote[hidden] { display: none !important; }

/* ── footer edge meets the wave (mobile) ────────────────────────────────
   .uw-news carries a 250–340px bottom padding whose only purpose is to make
   room for the desktop wave, which hangs upward on a negative offset. With the
   wave placed in normal flow on mobile that padding became a slab of pale blue
   above it, so the wave read as floating rather than sitting on the seam.

   Two changes: trim that padding to a normal section end, and paint the wave's
   own transparent upper area in the pale blue of the section above. The lowest
   wave path is navy, so the footer's colour now starts exactly at the bottom
   wave instead of above the whole graphic. */
@media (max-width: 860px) {
  /* the crest overhangs the footer's top edge, so the section above only needs
     enough room for the curve rather than the old 250-340px wave allowance */
  :root {
    --uw-wave-mobile-h: clamp(48px, 14.5vw, 78px);
    --uw-wave-mobile-shift: clamp(40px, 18vw, 88px);
    --uw-wave-mobile-cyan-rise: clamp(22px, 5.8vw, 42px);
    --uw-wave-mobile-cyan-overlap: clamp(4px, 1.5vw, 7px);
    --uw-wave-mobile-indigo-rise: clamp(16px, 4.8vw, 34px);
    --uw-wave-mobile-gut: clamp(20px, 6vw, 44px);
  }

  .uw-news {
    padding-bottom: calc(var(--uw-sec-m) + var(--uw-wave-mobile-h)) !important;
  }

  .uw-footer {
    padding-top: 0 !important;
    overflow-x: clip;
    overflow-y: visible;
  }

  .uw-wave {
    bottom: calc(100% - 1px);
    height: var(--uw-wave-mobile-h);
    z-index: 1;
    overflow-x: clip;
    overflow-y: visible;
  }

  .uw-wave img {
    left: -1px;
    width: calc(100% + 2px);
    max-width: none;
  }

  .uw-wave img.uw-wave__navy {
    bottom: -2px;
  }

  .uw-wave img.uw-wave__cyan {
    bottom: calc(var(--uw-wave-mobile-cyan-rise) - var(--uw-wave-mobile-cyan-overlap));
  }

  .uw-wave img.uw-wave__indigo {
    bottom: var(--uw-wave-mobile-indigo-rise);
    left: var(--uw-wave-mobile-shift);
    width: calc(100% + var(--uw-wave-mobile-shift) + 2px);
  }

  .uw-wave::after {
    top: calc(100% - 2px);
    height: 4px;
  }

  .uw-sub-pill {
    top: calc(-1 * (var(--uw-wave-mobile-h) + clamp(28px, 8vw, 48px)));
    left: var(--uw-wave-mobile-gut);
    max-width: calc(100% - (var(--uw-wave-mobile-gut) * 2));
  }

  .uw-footer__inner { padding-top: clamp(30px, 8vw, 52px); }
}