/* site/assets/css/site.css
   Design layer rebuilt to match design/reference-home.html (the approved
   design direction). Two deliberate departures from the literal reference
   are called out inline below and in the Task 13 report — both are
   accessibility floors the reference (a visual comp, not contrast-checked
   for every state) didn't hold to. */

@font-face {
  font-family: "Newsreader";
  src: url(../fonts/newsreader.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/atkinson-400.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/atkinson-700.woff2) format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink:      #12211F;
  --ink-soft: #4C5C58;
  --paper:    #FCFCFB;
  --stone:    #EDF0EE;
  --teal:     #004B50;
  --teal-deep:#00343A;
  --rule:     #DCE3E0;

  --display: "Newsreader", Georgia, "Iowan Old Style", serif;
  --body:    "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2.5rem; --s5: 4rem;   --s6: 6.5rem;

  /* Atkinson is a wide face -- a 34rem measure runs long, so it comes in. */
  --measure: 31rem;
}

/* NOTE: the reference also ships a prefers-color-scheme:dark palette and a
   [data-theme] override pair. It is not implemented here: in dark mode the
   comp's --teal (#6FBFB2, a *light* teal used as a text/accent colour)
   becomes the .cta band's background with white text on top of it, which
   fails contrast outright, and there is no theme toggle anywhere on the
   site for a user to reach the light palette instead. Andrew was shown and
   approved the light palette; shipping an unverified second theme risked
   shipping a failing pair the harness can't see (no toggle to drive it),
   so only the light palette ships. See task-13-report.md. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Reference sets body copy at 1.0625rem (17px). The 18px body-text floor
     is still harness-bound, so this comes up to 1.125rem -- a 1px change
     that keeps the reference's proportions and rhythm intact. */
  font: 1.125rem/1.68 var(--body);
  -webkit-text-size-adjust: 100%;
  text-wrap: pretty;
}
main { display: block; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0 0 var(--s3); text-wrap: balance; color: var(--ink); }
h1 {
  font: 400 clamp(2rem, 5vw, 3.1rem)/1.12 var(--display);
  letter-spacing: -.02em;
}
h2 {
  font: 400 clamp(1.6rem, 3.4vw, 2.1rem)/1.18 var(--display);
  letter-spacing: -.018em;
  margin-top: var(--s5);
}
h3 {
  font: 600 1.15rem/1.35 var(--body);
  margin-top: var(--s4);
}
p, li { max-width: var(--measure); }
a { color: var(--teal); }
a:hover { color: var(--teal-deep); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--teal); color: #fff; padding: var(--s2);
}
.skip-link:focus { left: var(--s2); top: var(--s2); z-index: 100; }

.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }

/* page-intro spacing: the generous top/bottom rhythm the home page's hero
   established, reused here as the plain h1 + lede band every interior page
   opens with. Overridden below by the density pass, which is the value that
   actually applies (later in the cascade, same specificity). */
.intro { padding: var(--s4) 0 var(--s5); }

/* alternating section band: same stone tint as .say/.tour, generalised for
   interior-page content that isn't home-page-specific copy. */
.band-tint { background: var(--stone); padding: var(--s6) 0; }

/* text-only variant: .band-tint's 104px (--s6) vertical padding was tuned
   against content paired with a photograph, which anchors the band even
   when the copy is short. support-us.php and donations.php have no
   image to pair it with -- no photograph on the site fits that content, and
   inventing one would be worse than the current spacing -- so this tightens
   the rhythm, constrains the measure so the copy doesn't float in the
   padding, and borrows the teal rule .quote already uses for emphasis. */
.band-tint--text { padding: var(--s4) 0; }
.band-tint--text .wrap {
  max-width: 40ch;
  border-left: 2px solid var(--teal);
  padding-left: var(--s3);
}
.band-tint--text h2 { margin-top: 0; }

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 40ch; }

/* cursor: pointer on everything clickable. Anchors already default to this;
   these are the controls whose UA default is not guaranteed to be a pointer. */
button,
.enquiry select,
.enquiry input[type="checkbox"],
.enquiry input[type="radio"],
.choice,
.consent label {
  cursor: pointer;
}

/* --- header / nav --- */
/* Wider than the 68rem text container on purpose. Eight nav items plus the
   wordmark total ~1130px, so inside 68rem (1088px) the nav wrapped onto its
   own line and left the top-right corner of every page empty. */
/* Sticky and translucent. The bar itself is full-bleed so the frosted panel
   spans the viewport; the padding trick centres its contents inside 78rem
   without needing an extra wrapper element in the markup.

   Opacity is higher than the .7-.8 that looks best in isolation, because
   this bar scrolls over the dark hero photograph and whatever sits behind
   it can be near-black. Measured against the nav's --ink-soft on a pure
   black backdrop, the worst case: .78 gives 4.31:1 and fails; .82 gives
   4.51:1 and passes by a hundredth, which is not a margin worth trusting
   once blur, saturate and JPEG noise move the local backdrop; .86 gives
   ~5.0:1. So .86 with backdrop-filter, .92 without.

   backdrop-filter is a progressive enhancement: where it is unsupported the
   panel is simply more opaque, which is the safe direction. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) max(1.25rem, calc((100% - 78rem) / 2));
  background: rgba(252, 252, 251, .92);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(252, 252, 251, .86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
/* Only once the page has moved does the bar separate itself from the
   content -- flat and borderless while at the top of the page. */
.site-header[data-stuck="true"] {
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 30px -22px rgba(0, 52, 58, .55);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
/* min-height: the mark's own content (a 40px logo beside two stacked text
   lines) sits just under the 44px touch-target floor -- this pads it out
   without changing how it looks. */
/* Lockup proportions follow the organisation's own logo artwork: the mark
   reads roughly 2.3x the cap-height of the wordmark beside it. The previous
   40px mark against 17px text made the mark look like a favicon that had
   wandered into the header. */
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; min-height: 44px; }
.brand img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.brand-text b { font: 700 1.45rem/1.1 var(--body); letter-spacing: -.022em; display: block; color: var(--ink); }
.brand-text em {
  font: 400 .72rem/1.3 var(--body); font-style: normal; color: var(--ink-soft);
  letter-spacing: .09em; text-transform: uppercase; display: block;
}

/* --- social-sticky: small Facebook/Instagram buttons pinned below the
   header, left edge, on every page. `top` starts at a sensible fallback for
   no-JS and is set precisely by nav.js once the header's real height is
   known (it changes when the mobile menu opens). */
.social-sticky {
  position: fixed; top: 5.5rem; left: var(--s2); z-index: 40;
  display: flex; flex-direction: column; gap: .5rem;
}
.social-sticky__btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(252, 252, 251, .92);
  box-shadow: 0 10px 30px -18px rgba(0, 52, 58, .55);
  border: 1px solid var(--rule);
}
.social-sticky__btn svg { width: 24px; height: 24px; }

.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
/* Touch target: the link text alone is ~25px tall, well under the 44px
   floor. Padding grows the <a>'s own hit box; the underline lives on the
   inner span instead of the link's own bottom edge, so it still hugs the
   text rather than drifting down into the new padding. */
.nav a {
  display: inline-block; font-size: .94rem; text-decoration: none; color: var(--ink-soft);
  /* Vertical padding covers height; a little horizontal padding matters too --
     "Home" is ~39px of text alone, under the 44px width floor without it. */
  padding: .7rem .35rem;
}
.nav a span { display: inline-block; padding-bottom: 2px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] span { box-shadow: 0 2px 0 var(--teal); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s1);
    margin-left: auto;
    font: inherit; font-size: 1rem;
    background: none; border: 1px solid var(--rule); border-radius: 2px;
    padding: .6rem var(--s2); color: inherit; cursor: pointer;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    content: ""; display: block; width: 20px; height: 2px; background: currentColor;
  }
  .nav-toggle__bar::before { transform: translateY(-6px); }
  .nav-toggle__bar::after  { transform: translateY(4px); }

  .nav { flex-basis: 100%; display: none; margin-left: 0; }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-top: 1px solid var(--rule); }
  .nav a { display: block; padding: var(--s2) 0; }
  .nav a[aria-current="page"] span { box-shadow: none; }
  .nav a[aria-current="page"] { font-weight: 700; }
}

/* --- buttons --- */
.button {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 1rem/1 var(--body);
  padding: .95rem 1.4rem;
  margin: 0 var(--s1) var(--s1) 0;
  border-radius: 2px; text-decoration: none;
  background: var(--teal); color: #fff;
  cursor: pointer;
  transition: transform .18s, background .18s, box-shadow .18s;
}
.button:hover { background: var(--teal-deep); color: #fff; }
.button--quiet { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }
.button--quiet:hover { background: var(--stone); color: var(--teal-deep); }
@media (prefers-reduced-motion: no-preference) { .button:active { transform: translateY(1px); } }
@media (max-width: 480px) {
  .button { width: 100%; justify-content: center; margin-right: 0; }
}

.eyebrow {
  font: 600 .72rem/1 var(--body); letter-spacing: .15em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 var(--s2);
}

/* --- hero: full-bleed photograph, headline over it ---------------------
   The previous hero put a 560px portrait photo beside the text inside a
   68rem container. On a 1280px viewport that left the entire right half
   empty below the buttons, and gave the page no opening statement.

   The scrim is a multi-stop gradient rather than a flat rgba() wash. A flat
   overlay dark enough to make white text safe over sunlit brickwork also
   greys out the whole photograph; this one is heaviest at the bottom where
   the text sits and nearly clear at the top where the house is. */
.hero { position: relative; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { display: block; height: 100%; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%;
  display: block;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(0, 26, 29, .94) 0%, rgba(0, 26, 29, .86) 30%,
    rgba(0, 30, 33, .52) 62%, rgba(0, 30, 33, .24) 100%);
}
.hero__inner {
  display: flex; align-items: flex-end;
  min-height: clamp(29rem, 72vh, 43rem);
  padding: var(--s6) 0 var(--s5);
  color: #fff;
}
.hero__inner h1 {
  font: 400 clamp(2.4rem, 6.2vw, 4.5rem)/1.05 var(--display);
  letter-spacing: -.028em; margin: 0 0 var(--s3);
  max-width: 17ch; color: #fff; text-wrap: balance;
}
.hero__inner .sub {
  font-size: clamp(1.18rem, 1.7vw, 1.42rem); line-height: 1.5;
  /* .88 white over the .86 gradient stop measures ~12:1 -- pure white clears
     it too but reads harsh at this size over a photograph. */
  color: rgba(255, 255, 255, .88); max-width: 44ch; margin: 0 0 var(--s4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.hero .button--quiet {
  border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent;
}
.hero .button--quiet:hover { background: rgba(255, 255, 255, .14); }
.hero__credit {
  position: absolute; right: 0; bottom: 0; margin: 0;
  font: 400 .78rem/1 var(--body); letter-spacing: .04em;
}
.hero__credit span {
  display: inline-block; padding: .5rem .85rem;
  background: rgba(0, 26, 29, .74); color: rgba(255, 255, 255, .84);
}
@media (max-width: 46rem) {
  .hero__inner { min-height: 26rem; padding: var(--s5) 0 var(--s4); }
  .hero__actions .button { flex: 1 1 auto; text-align: center; }
  .hero__credit { display: none; }   /* nowhere to sit without covering text */
}

/* --- facts: the weight of an impact band, with no invented numbers ------
   See the comment in index.php for why these three and no others. */
.facts { background: var(--teal-deep); color: #fff; }
.facts ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.facts li {
  padding: var(--s4) var(--s3);
  border-left: 1px solid rgba(255, 255, 255, .17);
}
.facts li:first-child { border-left: 0; padding-left: 0; }
.facts b {
  display: block; color: #fff;
  font: 400 clamp(1.7rem, 3.3vw, 2.6rem)/1.06 var(--display);
  letter-spacing: -.02em; margin-bottom: .4rem;
}
.facts span {
  display: block; font-size: 1.02rem; line-height: 1.45;
  color: rgba(255, 255, 255, .82); max-width: 26ch;
}
@media (max-width: 46rem) {
  .facts ul { grid-template-columns: 1fr; }
  .facts li {
    border-left: 0; padding: var(--s3) 0;
    border-top: 1px solid rgba(255, 255, 255, .17);
  }
  .facts li:first-child { border-top: 0; padding-top: var(--s4); }
  .facts li:last-child { padding-bottom: var(--s4); }
}

/* --- statement band --- */
.say { background: var(--stone); padding: var(--s6) 0; }
.say p {
  font: 400 clamp(1.4rem, 3.1vw, 2.05rem)/1.34 var(--display);
  letter-spacing: -.012em; max-width: 24ch; margin: 0 0 var(--s3); text-wrap: balance;
}
.say .note { font-family: var(--body); font-size: 1.125rem; line-height: 1.68; color: var(--ink-soft); max-width: var(--measure); }

/* --- people --- */
.people { padding: var(--s6) 0; }
.people__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s5); align-items: center; }
.people h2 { font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.12 var(--display); letter-spacing: -.018em; margin: 0 0 var(--s3); max-width: 18ch; }
.people p { color: var(--ink-soft); max-width: 38ch; margin: 0 0 var(--s2); }
.people img { border-radius: 2px; box-shadow: 0 18px 44px -26px rgba(0, 52, 58, .55); }
.stack { display: grid; gap: var(--s2); }
@media (max-width: 800px) { .people__grid { grid-template-columns: 1fr; gap: var(--s3); } }

/* --- room-by-room tour --- */
.tour { background: var(--stone); padding: var(--s6) 0; }
.tour h2 { font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.12 var(--display); letter-spacing: -.018em; margin: 0 0 var(--s4); max-width: 20ch; }
.room { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; margin-bottom: var(--s5); }
.room:nth-child(even) .room__txt { order: -1; }
.room:last-child { margin-bottom: 0; }
.room img { border-radius: 2px; box-shadow: 0 16px 38px -26px rgba(0, 52, 58, .5); }
.room h3 { font: 600 1.06rem/1.35 var(--body); margin: 0 0 .45rem; }
.room .where {
  font: 400 .74rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--s2);
}
.room p { margin: 0; color: var(--ink-soft); max-width: 36ch; }
@media (max-width: 760px) {
  .room { grid-template-columns: 1fr; gap: var(--s3); margin-bottom: var(--s4); }
  .room:nth-child(even) .room__txt { order: 0; }
}

/* --- pull quote --- */
/* Full-bleed dark band. Both reference sites break their page with a hard
   single-colour band (black on Children's Society, photo-plus-scrim on
   Kechara) rather than letting every section sit on the same near-white.
   That rhythm is most of what reads as "finished" -- this is the page's
   one moment of pure colour, and the quote is the right thing to spend it
   on because it is the strongest sentence on the site. */
.quote { background: var(--teal-deep); color: #fff; padding: var(--s6) 0; }
.quote blockquote {
  margin: 0; color: #fff;
  font: 400 clamp(1.75rem, 4.2vw, 3.1rem)/1.22 var(--display);
  letter-spacing: -.02em; max-width: 22ch; text-wrap: balance;
}
.quote blockquote::before {
  content: "\201C"; display: block;
  font: 400 4.5rem/.6 var(--display); color: rgba(255, 255, 255, .3);
  margin-bottom: .35rem;
}
.quote cite {
  display: block; margin-top: var(--s4); font: 400 .95rem/1.5 var(--body);
  font-style: normal; color: rgba(255, 255, 255, .74);
  letter-spacing: .04em; text-transform: uppercase;
}

/* --- offer: cards, not a hairline list ---------------------------------
   Was two columns of rows divided by 1px rules, which reads as a table of
   contents rather than as six things the service does. Cards on the tinted
   ground give each one edges and let the grid go to three across. */
.offer { background: var(--stone); padding: var(--s6) 0; }
.offer h2 {
  font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.12 var(--display);
  letter-spacing: -.022em; margin: 0 0 var(--s4); max-width: 20ch;
}
.offer ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
}
.offer li {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--s3);
  /* Tinted toward the teal rather than neutral black -- a pure-black shadow
     on a warm-tinted ground reads as dirt. One light source, from above. */
  box-shadow: 0 1px 2px rgba(0, 52, 58, .06), 0 8px 20px -14px rgba(0, 52, 58, .3);
}
.offer b {
  display: block; font: 600 1.16rem/1.35 var(--body); margin-bottom: .3rem;
  color: var(--teal);
}
.offer span { display: block; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.5; }

@media (max-width: 60rem) { .offer ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .offer ul { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .offer ul { grid-template-columns: 1fr; gap: 0; } }

/* --- teal CTA band --- */
.cta { background: var(--teal); color: #fff; padding: var(--s5) 0; }
.cta h2 { font: 400 clamp(1.6rem, 3.6vw, 2.3rem)/1.18 var(--display); letter-spacing: -.018em; margin: 0 0 var(--s2); max-width: 18ch; color: #fff; }
.cta p { margin: 0 0 var(--s3); color: rgba(255, 255, 255, .86); max-width: 40ch; }
/* Some interior pages' CTA bands reuse a paragraph that already contains a
   tel:/mailto: link -- the default link colour (teal) on this band's teal
   background would be unreadable, so inline links here go white instead.
   White-on-teal is already in tools/contrast.php (9.90:1, PASS). */
.cta p a { color: #fff; }
.cta .button { background: #fff; color: var(--teal); }
.cta .button:hover { background: rgba(255, 255, 255, .88); }

/* --- footer --- */
/* Dark, structured footer. It was four stacked lines of grey text on the
   page background -- the single clearest "unfinished" tell, and it appears
   on all ten pages. Both reference sites close on a deliberate dark block
   with real columns.
   Text stays at the inherited body size: the phone number and address are
   load-bearing content for someone in crisis, not fine print. */
.site-footer {
  background: var(--teal-deep); color: rgba(255, 255, 255, .8);
  padding: var(--s5) 0 var(--s4); margin-top: 0;
}
.site-footer p { margin: 0 0 var(--s1); }
.site-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.site-footer a:hover { color: #fff; text-decoration-color: #fff; }
.site-footer h2 {
  font: 400 .8rem/1.3 var(--body); letter-spacing: .11em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58); margin: 0 0 var(--s2);
}

.footer-cols {
  display: grid; grid-template-columns: 1.25fr 1.1fr .85fr; gap: var(--s5);
  padding-bottom: var(--s4);
}

.footer-col--brand img { width: 96px; height: 96px; object-fit: contain; }
.footer-orgname {
  font: 700 1.3rem/1.2 var(--body); letter-spacing: -.02em;
  color: #fff; margin: var(--s2) 0 .5rem;
}
.footer-blurb { color: rgba(255, 255, 255, .72); max-width: 34ch; }

/* Icon + text rows. The icons are inline SVG paths, not an icon font and not
   emoji: an icon font is a third-party asset the harness forbids, and emoji
   are read aloud by screen readers as their unicode name. These are
   aria-hidden decoration beside text that already says the same thing. */
.footer-line {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem;
  align-items: start; margin: 0 0 .7rem; max-width: none;
}
.ficon { width: 1.15rem; height: 1.15rem; fill: rgba(255, 255, 255, .55); margin-top: .28rem; }
.footer-line address { font-style: normal; line-height: 1.6; }
.footer-note {
  color: rgba(255, 255, 255, .66); max-width: 32ch; margin-top: var(--s3);
}

/* Scoped under .site-footer deliberately. ".site-footer a" is specificity
   (0,1,1) and beat a bare ".button--give" at (0,1,0), so the label stayed
   white on a white button -- an invisible "Make a donation" on every page.
   Matching the selector's weight is what actually fixes it; !important
   would have hidden the real cause. */
.site-footer .button--give {
  background: #fff; color: var(--teal-deep); border-color: #fff;
  text-decoration: none;
}
.site-footer .button--give:hover {
  background: rgba(255, 255, 255, .88); color: var(--teal-deep);
}

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between; align-items: baseline;
}
.footer-base p { margin: 0; color: rgba(255, 255, 255, .6); font-size: 1rem; }
.footer-base__links { display: flex; gap: var(--s3); }

@media (max-width: 56rem) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 36rem) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-col--brand { grid-column: auto; }
  .footer-col--brand img { width: 76px; height: 76px; }
}

/* --- gallery (life-with-us.php) --- */
.gallery { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.gallery figure { margin: 0; }
/* Same restrained elevation as .people/.room, applied to the gallery photos.
   No aspect-ratio, no object-fit: every photo keeps its native proportions --
   this must never crop a photograph, the live site's staff-photo distortion
   bug this build is not allowed to repeat. */
.gallery img { border-radius: 2px; box-shadow: 0 16px 38px -26px rgba(0, 52, 58, .5); }
.gallery figcaption { color: var(--ink-soft); margin-top: var(--s2); }

/* --- form --- */
.enquiry { max-width: var(--measure); }
.enquiry label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.enquiry input[type="text"], .enquiry input[type="email"],
.enquiry input[type="tel"], .enquiry textarea, .enquiry select {
  width: 100%; font: inherit; padding: var(--s2);
  border: 1.5px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink);
  transition: border-color .18s;
}
.enquiry input[type="text"]:hover, .enquiry input[type="email"]:hover,
.enquiry input[type="tel"]:hover, .enquiry textarea:hover, .enquiry select:hover {
  border-color: var(--ink-soft);
}
.enquiry input[type="text"]:focus-visible, .enquiry input[type="email"]:focus-visible,
.enquiry input[type="tel"]:focus-visible, .enquiry textarea:focus-visible, .enquiry select:focus-visible {
  border-color: var(--teal);
}
.enquiry fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); }
.enquiry legend { font-weight: 700; font-size: 1.2rem; margin-bottom: var(--s1); }
/* Touch target: these labels toggle a radio/checkbox when clicked anywhere
   across them, but the text alone is well under 44px tall -- padding grows
   the whole clickable label instead of just the text line. */
.choice, .consent label { font-weight: 400; display: block; padding: var(--s1) 0; margin-bottom: 0; }
.hint { font-weight: 400; color: var(--ink-soft); }
.errors { border-left: 4px solid #A3161B; background: #FDF2F2; padding: var(--s2) var(--s3); border-radius: 2px; }

/* .draft-notice was removed on 2026-09-25, at cut-over, once the privacy
   notice it flagged was approved for launch. Kept as a note rather than
   deleted silently, because the rule it existed to serve -- nothing marked
   "provisional" ships to the public -- still stands for anything added
   later. */
.hide-me { position: absolute; left: -9999px; }
.only-professional { display: none; }
.only-professional.is-shown { display: block; }

/* --- entry motion, opt-out by OS setting --- */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
  }
  .rv.in { opacity: 1; transform: none; }
  .rv:nth-child(2) { transition-delay: .06s; }
  .rv:nth-child(3) { transition-delay: .12s; }
}

/* --- restored content sections (partners, origin, values, voices) --------
   All four carry Andrew's own wording, recovered from the live site after
   the first rebuild cut them. See index.php for provenance comments. */

/* Partner logos. Greyscale at rest so three unrelated brand palettes (NHS
   blue, police navy, probation purple) do not fight the site's teal, with
   full colour on hover/focus. Fixed row height, width auto: the three
   artworks have different aspect ratios and scaling them to a common width
   would distort them. */
.partners { padding: var(--s5) 0 var(--s4); border-bottom: 1px solid var(--rule); }
.partners__row {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
}
.partners__row li { max-width: none; }
.partners__row img {
  height: 52px; width: auto; max-width: 100%;
  filter: grayscale(1); opacity: .78;
  transition: filter .2s ease, opacity .2s ease;
}
.partners__row li:hover img { filter: grayscale(0); opacity: 1; }
.partners__note { margin-top: var(--s3); color: var(--ink-soft); max-width: 62ch; }
.partners__note b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .partners__row img { transition: none; }
}

/* Origin + the two lists Andrew wrote. */
.origin { padding: var(--s6) 0; }
.origin__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s5); }
.origin h2 {
  font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.12 var(--display);
  letter-spacing: -.022em; margin: 0 0 var(--s3);
}
.origin p { color: var(--ink-soft); max-width: 40ch; }
.origin__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.origin__lists h3 { margin: 0 0 var(--s2); font: 600 1.1rem/1.35 var(--body); color: var(--teal); }

/* Tick lists: the marker is a CSS ::before, not an emoji or an icon font --
   emoji get announced by screen readers as their unicode name mid-sentence. */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 1.6rem; margin-bottom: .6rem;
  color: var(--ink-soft); max-width: 34ch; line-height: 1.5;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--teal); opacity: .55;
}

/* Values. */
.values { padding: 0 0 var(--s6); }
.values h2 {
  font: 400 clamp(1.7rem, 3.4vw, 2.4rem)/1.16 var(--display);
  letter-spacing: -.02em; margin: 0 0 var(--s4); max-width: 26ch;
}
.values__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
}
.values__grid li {
  max-width: none; background: var(--stone);
  border-left: 3px solid var(--teal); border-radius: 0 3px 3px 0;
  padding: var(--s3);
}
.values__grid h3 { margin: 0 0 .4rem; font: 600 1.18rem/1.3 var(--body); }
.values__grid p { margin: 0; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.5; }

/* Testimonials. */
.voices { padding: var(--s6) 0; }
.voices h2 {
  font: 400 clamp(1.7rem, 3.4vw, 2.4rem)/1.16 var(--display);
  letter-spacing: -.02em; margin: 0 0 var(--s4); max-width: 24ch;
}
.voices__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
}
.voices__grid li {
  max-width: none; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; padding: var(--s4);
  box-shadow: 0 1px 2px rgba(0, 52, 58, .06), 0 10px 24px -16px rgba(0, 52, 58, .3);
}
.voices blockquote {
  margin: 0; font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.36 var(--display);
  letter-spacing: -.012em; color: var(--ink); max-width: none;
}
.voices blockquote::before {
  content: "\201C"; font: 400 2.6rem/.5 var(--display);
  color: var(--teal); opacity: .35; display: block; margin-bottom: .5rem;
}
.voices cite {
  display: block; margin-top: var(--s3); font-style: normal;
  font-size: 1rem; color: var(--ink-soft); line-height: 1.5;
}

@media (max-width: 62rem) {
  .origin__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .values__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 44rem) {
  .origin__lists { grid-template-columns: 1fr; }
  .values__grid, .voices__grid { grid-template-columns: 1fr; }
  .partners__row { gap: var(--s4); justify-content: space-between; }
  .partners__row img { height: 40px; }
}

/* --- donations: three payment methods ---------------------------------- */
.give { padding: var(--s5) 0 var(--s6); }
.give h2 {
  font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.12 var(--display);
  letter-spacing: -.022em; margin: 0 0 var(--s4);
}
.give__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
  align-items: start;
}
.give__card {
  max-width: none; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; padding: var(--s4) var(--s3);
  box-shadow: 0 1px 2px rgba(0, 52, 58, .06), 0 10px 24px -16px rgba(0, 52, 58, .3);
}
.give__card h3 { margin: 0 0 var(--s2); font: 600 1.3rem/1.3 var(--body); color: var(--teal); }
.give__card p { max-width: none; }
.give__note { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; }
.give__pending {
  background: var(--stone); border-left: 3px solid var(--teal);
  padding: var(--s2); font-size: 1.02rem; line-height: 1.5;
}
.give__address { font-style: normal; line-height: 1.7; margin: 0 0 var(--s2); }

/* Bank details as a description list: each label is tied to its value in the
   accessibility tree, so a screen reader reads "Sort code, 20-07-89" rather
   than two loose runs of text a listener has to pair up themselves. */
.bank { margin: 0 0 var(--s3); display: grid; grid-template-columns: auto 1fr; gap: .35rem var(--s2); }
.bank dt { font-size: 1rem; color: var(--ink-soft); }
.bank dd {
  margin: 0; font-weight: 700;
  /* tabular figures so the digits line up down the column */
  font-variant-numeric: tabular-nums;
}

/* --- support us: ways to help + where to find us ----------------------- */
.ways { padding: 0 0 var(--s6); }
.ways__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3);
}
.ways__grid li {
  max-width: none; background: var(--stone);
  border-radius: 3px; padding: var(--s4);
}
.ways__grid h2 {
  margin: 0 0 var(--s2); font: 400 1.6rem/1.2 var(--display); letter-spacing: -.018em;
}
.ways__grid p { max-width: 40ch; }

.find { background: var(--stone); padding: var(--s6) 0; }
.find__grid { display: grid; grid-template-columns: 1fr .9fr; gap: var(--s5); align-items: center; }
.find h2 {
  font: 400 clamp(1.7rem, 3.4vw, 2.4rem)/1.16 var(--display);
  letter-spacing: -.02em; margin: 0 0 var(--s3);
}
.find__address { font-style: normal; line-height: 1.7; margin: 0 0 var(--s2); font-size: 1.15rem; }
.find__lines { margin: 0 0 var(--s3); line-height: 1.8; }
.find__photo img { border-radius: 3px; box-shadow: 0 18px 44px -26px rgba(0, 52, 58, .55); }

@media (max-width: 62rem) {
  .give__grid { grid-template-columns: 1fr; }
  .find__grid { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 44rem) {
  .ways__grid { grid-template-columns: 1fr; }
}

/* --- what we offer: model, accommodation, differ, governance ----------- */
.model { padding: 0 0 var(--s6); }
.model h2, .accom h2, .differ h2, .gov h2 {
  font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.12 var(--display);
  letter-spacing: -.022em; margin: 0 0 var(--s4);
}
.model__grid, .gov__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
}
.gov__grid { grid-template-columns: repeat(3, 1fr); }
.model__grid li, .gov__grid li {
  max-width: none; background: var(--stone);
  border-top: 3px solid var(--teal); border-radius: 0 0 3px 3px;
  padding: var(--s3);
}
.model__grid h3, .gov__grid h3 {
  margin: 0 0 .45rem; font: 600 1.16rem/1.3 var(--body); color: var(--teal);
}
.model__grid p, .gov__grid p {
  margin: 0; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.5; max-width: none;
}

.accom { background: var(--stone); padding: var(--s6) 0; }
.accom__lede { color: var(--ink-soft); max-width: 52ch; margin: calc(var(--s4) * -1 + var(--s2)) 0 var(--s4); }
.accom__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
  align-items: start;
}
.accom__card {
  max-width: none; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 52, 58, .06), 0 12px 26px -18px rgba(0, 52, 58, .35);
}
/* Fixed 4:3 window so three photographs of different native shapes line up
   as a row of cards. object-fit: cover crops rather than distorting -- the
   old live site stretched staff photographs to fit and this must not. */
.accom__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.accom__txt { padding: var(--s3); }
.accom__txt h3 { margin: 0 0 var(--s2); font: 600 1.24rem/1.3 var(--body); color: var(--teal); }
.accom__txt .ticks li { max-width: none; font-size: 1.02rem; }

.differ { padding: var(--s6) 0; }
.differ__lede { color: var(--ink-soft); max-width: 52ch; margin: calc(var(--s4) * -1 + var(--s2)) 0 var(--s4); }
.differ__grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: var(--s5); align-items: start; }
.differ__list li { max-width: none; font-size: 1.08rem; margin-bottom: var(--s2); }
.differ__aside {
  background: var(--teal-deep); color: #fff; border-radius: 3px; padding: var(--s4);
}
.differ__aside h3 { margin: 0 0 var(--s2); font: 600 1.16rem/1.3 var(--body); color: #fff; }
.differ__aside p { margin: 0; color: rgba(255, 255, 255, .84); max-width: none; line-height: 1.6; }

.gov { background: var(--stone); padding: var(--s6) 0; }
.gov__grid li { background: var(--paper); border-color: var(--teal); }

/* Full-bleed photograph as a section break. Andrew asked for a large image
   here; a fixed aspect ratio keeps it from swallowing a phone screen. */
.showcase img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 22%;
}
@media (max-width: 44rem) {
  .showcase img { aspect-ratio: 3 / 2; }
}

@media (max-width: 68rem) {
  .model__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 62rem) {
  .accom__grid, .gov__grid { grid-template-columns: 1fr; }
  .differ__grid { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 44rem) {
  .model__grid { grid-template-columns: 1fr; }
}

/* --- about us: Andrew's eight-part essay -------------------------------
   The content problem is eight near-identical blocks of prose. Rather than
   cut his words, the number and heading hang in their own column so a
   reader can see the shape of the page and their place in it, the ground
   alternates, and photographs break the run twice. */
.story { padding: 0 0 var(--s5); }
.story__item {
  display: grid; grid-template-columns: 15rem 1fr; gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
}
.story__item:first-child { border-top: 0; padding-top: var(--s3); }
.story__head { position: sticky; top: 7rem; align-self: start; }
.story__num {
  display: block;
  font: 400 3.4rem/1 var(--display); letter-spacing: -.03em;
  color: var(--teal); opacity: .22; margin-bottom: .3rem;
}
.story__head h2 {
  margin: 0; font: 400 clamp(1.5rem, 2.6vw, 2.05rem)/1.16 var(--display);
  letter-spacing: -.02em;
}
.story__kicker {
  margin: .4rem 0 0; font: 600 .82rem/1 var(--body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.story__body p { font-size: 1.16rem; line-height: 1.65; max-width: 60ch; margin: 0 0 var(--s3); }
.story__body .ticks li { max-width: 60ch; font-size: 1.06rem; }

.story__figure { margin: var(--s3) 0 0; }
/* No forced aspect ratio. 14.jpg is 960x959 -- nearly square -- and
   cropping it to 16:9 cuts straight through four people's faces. The
   photographs here are of staff and residents, so they are shown whole and
   the column is narrowed instead. The old live site stretched staff photos
   to fit a shape; nothing here may crop or distort one. */
.story__figure { max-width: 46rem; margin-inline: auto; }
.story__figure img {
  width: 100%; height: auto; border-radius: 3px;
  box-shadow: 0 18px 44px -28px rgba(0, 52, 58, .55);
}
.story__figure figcaption {
  margin-top: var(--s2); font-size: 1rem; color: var(--ink-soft); max-width: 60ch;
}

/* Sticky headings need a scroll container that is not the essay itself, and
   they must not stick on a phone, where the column collapses and a pinned
   heading would eat a third of the screen. */
@media (max-width: 62rem) {
  .story__item { grid-template-columns: 1fr; gap: var(--s3); }
  .story__head { position: static; }
  .story__num { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story__head { position: static; }
}

/* --- contact: click-to-load map ---------------------------------------- */
.findmap { background: var(--stone); padding: var(--s6) 0; }
.findmap h2 {
  font: 400 clamp(1.7rem, 3.4vw, 2.4rem)/1.16 var(--display);
  letter-spacing: -.02em; margin: 0 0 var(--s2);
}
.findmap__lede { color: var(--ink-soft); max-width: 52ch; margin: 0 0 var(--s4); }
.findmap__panel {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  overflow: hidden; min-height: 22rem;
  display: flex; align-items: center; justify-content: center;
}
.findmap__ph { padding: var(--s5) var(--s3); text-align: center; max-width: 34rem; }
.findmap__ph address {
  font-style: normal; font-size: 1.2rem; line-height: 1.7; margin-bottom: var(--s3);
}
.findmap__note { color: var(--ink-soft); font-size: 1rem; margin: 0 auto var(--s3); max-width: 44ch; }
.findmap__actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin: 0; }
/* Height comes from the panel once the frame is in, so swapping the
   placeholder for the map does not jump the page. */
.findmap__panel[data-loaded="true"] { display: block; padding: 0; }
.findmap__frame { display: block; width: 100%; height: 26rem; border: 0; }
@media (max-width: 44rem) {
  .findmap__frame { height: 20rem; }
  .findmap__actions .button { flex: 1 1 auto; text-align: center; }
}

/* --- life with us: grouped gallery + lightbox -------------------------- */
.gal { padding: var(--s6) 0; }
.gal--tint { background: var(--stone); }
.gal h2 {
  font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1.14 var(--display);
  letter-spacing: -.02em; margin: 0 0 var(--s2);
}
.gal__blurb { color: var(--ink-soft); max-width: 52ch; margin: 0 0 var(--s4); }

.gal__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
}
.gal__item { max-width: none; }
.gal__item--wide { grid-column: span 2; }
.gal__item figure { margin: 0; }

/* The image is a button so it is reachable by keyboard and announced as
   activatable. Resetting the button chrome, not removing its focus ring. */
.gal__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  position: relative; cursor: pointer; border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 52, 58, .08), 0 14px 30px -20px rgba(0, 52, 58, .45);
}
.gal__btn img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .3s ease;
}
.gal__item--wide .gal__btn img { aspect-ratio: 16 / 9; }
.gal__zoom {
  position: absolute; right: .6rem; bottom: .6rem;
  background: rgba(0, 26, 29, .82); color: #fff;
  font: 400 .82rem/1 var(--body); letter-spacing: .04em;
  padding: .5rem .7rem; border-radius: 2px;
  opacity: 0; transition: opacity .2s ease;
}
.gal__btn:hover .gal__zoom, .gal__btn:focus-visible .gal__zoom { opacity: 1; }
@media (hover: none) {
  /* No hover on a touch screen -- the affordance has to be permanent. */
  .gal__zoom { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .gal__btn:hover img { transform: scale(1.03); }
}
.gal figcaption {
  margin-top: var(--s2); color: var(--ink-soft);
  font-size: 1.02rem; line-height: 1.5;
}

.lightbox {
  border: 0; border-radius: 4px; padding: 0; background: var(--paper);
  max-width: min(64rem, 92vw); max-height: 92vh; overflow: auto;
}
.lightbox::backdrop { background: rgba(0, 20, 22, .82); }
.lightbox img { width: 100%; height: auto; display: block; }
.lightbox__cap {
  margin: 0; padding: var(--s3); color: var(--ink); font-size: 1.06rem; max-width: none;
}
.lightbox__close {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  width: 2.75rem; height: 2.75rem;         /* 44px touch target */
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 26, 29, .78); color: #fff;
  font: 400 1.6rem/1 var(--body);
}
.lightbox__close:hover { background: rgba(0, 26, 29, .92); }

@media (max-width: 62rem) {
  .gal__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .gal__grid { grid-template-columns: 1fr; }
  .gal__item--wide { grid-column: auto; }
  .gal__item--wide .gal__btn img { aspect-ratio: 4 / 3; }
}

/* Caption block: short label, then Andrew's long description. The
   description is real prose and needs a readable measure, so the caption
   is not tied to the image column's width the way a one-line label was. */
.gal figcaption { display: block; }
.gal__label {
  display: block; font: 600 1.06rem/1.4 var(--body); color: var(--ink);
  margin-bottom: .45rem;
}
.gal__desc {
  display: block; color: var(--ink-soft);
  font-size: 1.02rem; line-height: 1.6; max-width: 62ch;
}
.lightbox__desc {
  display: block; margin-top: .6rem; color: var(--ink-soft);
  font-size: 1.02rem; line-height: 1.6;
}
.lightbox__cap b { display: block; margin-bottom: .2rem; }

/* --- density pass -------------------------------------------------------
   Vertical rhythm was tuned section by section and, stacked, added up to
   far more empty page than the content warranted -- Aslam counted roughly a
   screen and a half of nothing between bands on the home page. --s6 (104px)
   top AND bottom on every section is what did it. These bring the big
   sections in without touching the type scale or the measure. */
.origin, .values, .voices, .tour, .offer, .gal, .accom, .differ, .gov,
.give, .ways, .find, .findmap, .band-tint {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}
.people { padding: var(--s5) 0; }
/* Top padding stays taller than the density pass's own rhythm: the
   social-sticky buttons float over this exact spot, and var(--s4) let their
   circles sit on top of the h1 text. */
.intro { padding: 6rem 0 var(--s4); }
.partners { padding: var(--s4) 0; }

/* Partners + statement in one band, side by side. */
.stance { background: var(--stone); padding: var(--s5) 0; }
.stance__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s5); align-items: center; }
.stance__lead {
  font: 400 clamp(1.35rem, 2.9vw, 1.95rem)/1.32 var(--display);
  letter-spacing: -.018em; margin: 0 0 var(--s3); max-width: 22ch;
}
.stance__note { color: var(--ink-soft); max-width: 40ch; margin: 0; }
.stance__partners { border-left: 1px solid var(--rule); padding-left: var(--s5); }
.stance__partners .partners__row {
  margin: var(--s2) 0 var(--s3); gap: var(--s4);
}
.stance__partners .partners__note { max-width: 42ch; font-size: 1.02rem; margin: 0; }

@media (max-width: 62rem) {
  .stance__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .stance__partners { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s4); }
}

/* --- carousel: CSS scroll-snap first, buttons as enhancement ------------
   The track is a real horizontally scrolling list that snaps. With no
   JavaScript it is still swipeable on a phone and draggable on a desktop,
   and every photograph is reachable. carousel.js only adds the arrows and
   keeps the counter honest. */
.carousel { position: relative; }
.carousel__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* the dots and arrows are the affordance */
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; max-width: none; }
.carousel__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.carousel__count {
  position: absolute; right: .5rem; bottom: .5rem; margin: 0;
  background: rgba(0, 26, 29, .78); color: #fff;
  font: 400 .8rem/1 var(--body); letter-spacing: .03em;
  padding: .4rem .6rem; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;       /* 44px touch target */
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(252, 252, 251, .9); color: var(--teal-deep);
  font: 400 1.5rem/1 var(--body);
  display: none;                          /* only once JS has enhanced it */
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 52, 58, .3);
}
.carousel[data-enhanced="true"] .carousel__nav { display: flex; }
.carousel__nav--prev { left: .5rem; }
.carousel__nav--next { right: .5rem; }
.carousel__nav:hover { background: #fff; }
.carousel__nav:disabled { opacity: .35; cursor: default; }

/* ======================================================================
   PER-PAGE CHARACTER
   One small, specific gesture per page. Aslam liked the About us numbers
   because they are quiet and earned -- so these are deliberately NOT the
   same trick repeated: each belongs to the page it is on and to nothing
   else. All of them are decoration over content that already works, and
   every one is either inside prefers-reduced-motion: no-preference or is a
   static treatment with no motion at all.
   ====================================================================== */

/* HOME -- the facts band. A hairline draws itself across under each fact as
   it arrives, left to right, like a rule being ruled. Static and fully
   present for anyone who asks for reduced motion. */
.facts li { position: relative; }
.facts li::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%; background: rgba(255, 255, 255, .5);
}
@media (prefers-reduced-motion: no-preference) {
  .facts li::after { transform: scaleX(0); transform-origin: left; }
  .facts li.in::after { transform: scaleX(1); transition: transform .7s cubic-bezier(.2,.7,.3,1) .15s; }
}
@media (max-width: 46rem) { .facts li::after { display: none; } }

/* WHAT WE OFFER -- the six support areas. The teal label slides a few pixels
   right on hover and a rule grows beneath it, so the grid feels like a set
   of things rather than a table. */
.offer li { position: relative; overflow: hidden; }
.offer li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--teal); transform: scaleY(0); transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .offer li::before { transition: transform .25s ease; }
  .offer li b { transition: transform .25s ease; display: block; }
  .offer li:hover::before { transform: scaleY(1); }
  .offer li:hover b { transform: translateX(4px); }
}

/* LIFE WITH US -- each group heading carries its own photograph count, set
   in the display face as a quiet superscript. It tells a reader how much is
   in the section before they scroll it. */
.gal__count {
  font: 400 .9rem/1 var(--body); color: var(--teal);
  letter-spacing: .06em; vertical-align: super; margin-left: .5rem;
  font-variant-numeric: tabular-nums;
}

/* DONATIONS -- the bank details. Each value can be copied with one press,
   which on a phone is the difference between a donation and a typo. The
   button is real UI, not decoration, so it is not hidden behind hover. */
.bank dd { display: flex; align-items: baseline; gap: .5rem; }
.copy {
  border: 1px solid var(--rule); background: var(--paper); color: var(--teal);
  font: 600 .74rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .5rem; border-radius: 2px; cursor: pointer;
  min-height: 1.9rem;
}
.copy:hover { background: var(--stone); }
.copy[data-copied="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }

/* SUPPORT US -- the four ways to help, each with a large ghost numeral in
   the corner. Related to the About us numbers but not the same gesture:
   these sit behind the card and do not move. */
.ways__grid { counter-reset: way; }
.ways__grid li { position: relative; overflow: hidden; counter-increment: way; }
.ways__grid li::before {
  content: counter(way, decimal-leading-zero);
  position: absolute; right: -.4rem; top: -1.2rem;
  font: 400 6rem/1 var(--display); letter-spacing: -.04em;
  color: var(--teal); opacity: .07; pointer-events: none;
}

/* ABOUT US / CONTACT US already carry their gesture: the sticky section
   numbers, and the map that stays dark until you ask for it. */

/* Visible to screen readers, not on screen. clip-path plus a 1px box rather
   than display:none or visibility:hidden, both of which remove the text from
   the accessibility tree as well as the screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}