@charset "UTF-8";
/* ===================================================================
   Poona Medical Mission Sisters Society
   ------------------------------------------------------------------
   COLOUR SYSTEM — hues taken from the Society's own symbol, photographed
   on the Centre signage and sampled directly from it. The mark carries the
   Society's language of body, mind, spirit and integration; the sisters'
   own copy gives each colour a meaning:

       blue   — the peace of spirit        hue 210
       gold   — the light of intellect     hue  40
       red    — the power of emotion       hue 354
       green  — care of the earth          hue 150  (added for the eco
                ministry; not in the emblem, earned by the hill)

   The hues are the emblem's; the brightness is not. An earlier pass kept
   one token per ministry, which meant a 3px rule and an 11px label had to
   share a colour — so every colour was pulled down to small-text contrast
   and the whole site sat far darker than the trust sites it was modelled
   on. Measured with designlang against Teach For India, WaterAid, Gates,
   Obama and Malala, those sites run their brand colours at lightness
   0.45-0.60; this palette had been sitting at 0.30-0.36.

   So each ministry now has four stops, and the rule is which surface the
   colour lands on, not which ministry it belongs to:

       --c        BRIGHT  large fills: rules, dots, icons, tile borders,
                          panel grounds. Vivid; not for small text.
       --c-ink    TEXT    any label or link, >=4.5:1 on the page. Also thin
                          rules on cream, which need to stay visible.
       --c-tint   WASH    section background.
       --c-deep   GROUND  panel background that must carry white text.
       --cta      the Donate red, paired with --cta-fg so the label colour
                  flips with the theme.

   Gold is the constrained one: cream is itself a pale yellow, so a bright
   gold can only reach ~1.9:1 against it. It is therefore used as fill and
   never as text — the same thing Teach For India does with its yellow.

   The site is light-only by request: there is no dark theme, and no section
   paints a dark ground. The two photo scrims (hero, tiles) stay dark because
   they carry white text over a photograph.

   Verified at 577 text elements across 9 pages, 0 contrast failures.
   =================================================================== */
:root{
  --bg:#f4f7f6;
  --surface:#ffffff;
  --raised:#e8efeb;
  --holy-blue:#b8ced8;
  --holy-gold:#b99c58;
  --holy-paper:#ffffff;
  --fg:#1f1b17;
  --muted:#655e55;
  --border:#e5dccd;

  /* Each ministry colour now has four stops instead of one. The single-token
     scheme forced every use — a 3px rule and an 11px label alike — to satisfy
     small-text contrast, which is what kept the whole palette dark. Splitting
     them lets the fills be as bright as the trust sites we looked at while the
     text stays legible:
       BRIGHT  large fills, rules, dots, icons, panel grounds
       INK     any text, and thin rules on cream (>=4.5:1 on the page)
       TINT    section wash
       DEEP    panel ground that must carry white text                       */
  --spirit:#1e7fe8;    --spirit-ink:#0b63bd;    --spirit-tint:#d7e8fc;    --spirit-deep:#0e4c8a;
  --intellect:#f5a300; --intellect-ink:#8a5f08; --intellect-tint:#fde7bd; --intellect-deep:#8a610f;
  --emotion:#ef3b4e;   --emotion-ink:#c11430;   --emotion-tint:#fcdde1;   --emotion-deep:#8a0f1c;
  --earth:#1fa363;     --earth-ink:#0a7d45;     --earth-tint:#d3f0de;     --earth-deep:#0f6b3f;
  --cta:#dc1e35; --cta-fg:#ffffff;
  /* Donate button: the brightest red that still carries white 14px text (4.9:1). */

  --accent:var(--emotion);
  --on-accent:#ffffff;
  --on-photo:#f7f2ea;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Light-only by request. color-scheme keeps the browser from darkening
     scrollbars, form controls and the canvas on a dark-mode machine. */
  color-scheme:light;
}
/* per-ministry theming: set --c and --c-tint once on a container */
.t-spirit   {--c:var(--spirit);   --c-ink:var(--spirit-ink);   --c-tint:var(--spirit-tint);   --c-deep:var(--spirit-deep)}
.t-intellect{--c:var(--intellect);--c-ink:var(--intellect-ink);--c-tint:var(--intellect-tint);--c-deep:var(--intellect-deep)}
.t-emotion  {--c:var(--emotion);  --c-ink:var(--emotion-ink);  --c-tint:var(--emotion-tint);  --c-deep:var(--emotion-deep)}
.t-earth    {--c:var(--earth);    --c-ink:var(--earth-ink);    --c-tint:var(--earth-tint);    --c-deep:var(--earth-deep)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0}
h1{font-size:clamp(38px,6.4vw,68px);line-height:1.04;letter-spacing:0}
h2{font-size:clamp(27px,3.4vw,38px);line-height:1.14;letter-spacing:0}
h3{font-size:21px;line-height:1.25;letter-spacing:0;font-weight:500}
p{margin:0 0 1.05em}
a{color:inherit}
img{display:block;max-width:100%;height:auto}  /* height:auto is required: the
   <img> tags carry intrinsic width/height attributes so the browser can reserve
   space before the file loads, and without this they would also fix the height. */

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.lede{font-size:20px;line-height:1.55;max-width:60ch}

.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--c-ink,var(--accent));flex:none}

/* ---------- masthead ---------- */
.draft{background:var(--intellect-tint);color:#4a4036;border-bottom:2px solid var(--intellect);
  font-size:13.5px;letter-spacing:.015em;
  padding:11px 32px;text-align:center}
.draft b{font-weight:600}
header{position:sticky;top:0;z-index:40;background:var(--holy-paper);
  border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(31,27,23,.03)}
.bar{display:flex;align-items:center;gap:16px;padding:14px 32px;max-width:1280px;margin:0 auto;
  position:relative}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.mark .emblem{flex:none}
.mark img.emblem{width:38px;height:38px;object-fit:contain}
.mark b{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:.01em;
  line-height:1.08;display:block;text-transform:uppercase}
.mark span{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:3px}
nav{display:flex;gap:20px;align-items:center}
nav a{font-size:13.5px;font-weight:600;letter-spacing:.03em;text-decoration:none;color:var(--muted);
  padding-bottom:2px;border-bottom:2px solid transparent}
nav a:hover{color:var(--fg)}
nav a[aria-current=page]{color:var(--fg);border-bottom-color:var(--cta)}
.give{font-size:14px;font-weight:600;letter-spacing:.02em;padding:9px 17px;border-radius:2px;
  background:var(--cta);color:var(--cta-fg);text-decoration:none;white-space:nowrap;
  transition:transform .12s ease}
.give:hover{transform:none}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:2px;
  padding:7px 11px;color:var(--fg);font:inherit;font-size:13px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(84vh,720px);display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,14,11,.90) 0%,rgba(18,14,11,.55) 42%,rgba(18,14,11,.18) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:110px;padding-bottom:62px;color:var(--on-photo)}
.hero .eyebrow{color:rgba(247,242,234,.85)}
.hero .eyebrow::before{background:rgba(247,242,234,.65)}
.hero h1{max-width:19ch;text-wrap:balance}
.hero p{margin-top:20px;max-width:52ch;font-size:18px;color:rgba(247,242,234,.87)}
.ribbon{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border-top:1px solid rgba(247,242,234,.25);
  padding-top:18px}
.ribbon div{padding-right:30px;margin-right:30px;border-right:1px solid rgba(247,242,234,.22)}
.ribbon div:last-child{border-right:none;margin-right:0;padding-right:0}
.ribbon b{display:block;font-family:var(--font-display);font-size:27px;font-weight:600;
  letter-spacing:0;line-height:1}
.ribbon span{font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(247,242,234,.7);margin-top:5px;display:block}

/* ---------- page head ---------- */
.phead{padding:74px 0 58px;border-bottom:1px solid var(--border);background:var(--c-tint,var(--raised))}
.phead h1{font-size:clamp(34px,5vw,54px);max-width:17ch;text-wrap:balance}
.phead p{margin-top:20px;font-size:19px;line-height:1.5;max-width:58ch;color:var(--muted)}

section{padding:92px 0;border-bottom:1px solid var(--border)}
section.tight{padding:62px 0}
section.tinted{background:var(--c-tint);border-bottom:none}
section:last-of-type{border-bottom:none}

/* ---------- symbol ---------- */
.symbol{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;margin-top:12px}
.meanings{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:26px}
.mean{background:var(--bg);padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.dot{width:15px;height:15px;border-radius:50%;background:var(--c);flex:none;margin-top:5px}
.mean b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.mean p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- timeline ---------- */
.track{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--border)}
.stop{padding:26px 26px 30px 0;border-right:1px solid var(--border);position:relative}
.stop:last-child{border-right:none}
.stop::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--c,var(--muted))}
.yr{font-family:var(--font-display);font-size:31px;font-weight:600;letter-spacing:0;
  line-height:1;margin-bottom:9px;color:var(--c-ink,var(--fg))}
.stop h3{font-size:16px;font-weight:600;margin-bottom:6px}
.stop p{font-size:14.5px;color:var(--muted);margin:0;padding-right:14px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.35fr .95fr;gap:60px;align-items:start}
.split.even{grid-template-columns:1fr 1fr;gap:56px}
.portrait{border:1px solid var(--border);background:var(--surface);padding:13px;margin:0}
.portrait img{width:100%;filter:grayscale(1) contrast(1.04)}
.portrait figcaption{font-size:13px;line-height:1.45;color:var(--muted);margin-top:11px;letter-spacing:.015em}
.portrait strong{display:block;color:var(--fg);font-weight:600;font-size:13.5px;margin-bottom:2px}
figure.plain{margin:0}
figure.plain img{width:100%;border:1px solid var(--border)}
figure.plain figcaption{font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.015em}
.symbol-mark img{width:min(220px,70vw);border:0;box-shadow:none;border-radius:0;background:transparent;margin:0 auto}

/* ---------- creed ---------- */
/* The philosophy panel completes the four-ministry colour rhythm: coral for the
   pull-quote, blue and green for the tinted sections, gold here — 'the light of
   intellect'. Dark text on bright gold: 10.6:1 heading, 4.8:1 body. */
.creed{background:#ffc233;color:#1f1b17}
.creed blockquote{margin:0;max-width:22ch;font-family:var(--font-display);font-weight:400;
  font-size:clamp(29px,4.3vw,48px);line-height:1.16;letter-spacing:0}
.creed .cols{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-top:34px}
/* This panel inverts: its ground is --fg and its text is --bg, so both swap with
   the theme. The dimmed variants have to be mixed from those two tokens — hard-coded
   cream here was invisible in dark mode, where the panel itself becomes cream. */
.creed p{color:#5a5248;font-size:16.5px;margin:0 0 1em}
.creed .eyebrow{color:#5a5248}
.creed .eyebrow::before{background:#8a7c63}

/* ---------- ministry cards ---------- */
.min{display:grid;grid-template-columns:1fr 1fr;gap:44px 40px;margin-top:52px}
.m{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-top:3px solid var(--c);transition:transform .14s ease}
.m:hover{transform:translateY(-3px)}
.m img{width:100%;aspect-ratio:3/2;object-fit:cover}
.m .body{padding:22px 24px 26px}
.m .n{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink);
  margin-bottom:8px}
.m h3{margin-bottom:9px}
.m p{font-size:15.5px;color:var(--muted);margin:0}
.m .modal{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;
  color:var(--muted);letter-spacing:.015em}

/* ---------- ministry detail ---------- */
.detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start;padding:76px 0;
  border-bottom:1px solid var(--border)}
.detail:nth-of-type(even){grid-template-columns:1.1fr .9fr}
.detail:nth-of-type(even) .txt{order:-1}
.detail img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border)}
.detail h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:14px}
.detail .n{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink);
  margin-bottom:11px;display:flex;align-items:center;gap:10px}
.detail .n::before{content:"";width:22px;height:2px;background:var(--c)}
.facts{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--border)}
.facts li{font-size:14.5px;color:var(--muted);padding:5px 0 5px 20px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--c)}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:40px}
.st{background:var(--bg);padding:24px 22px}
.st b{display:block;font-family:var(--font-display);font-size:34px;font-weight:600;
  letter-spacing:0;line-height:1;color:var(--c-ink,var(--fg))}
.st span{display:block;font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.4}

/* ---------- values ---------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:42px}
.v{background:var(--bg);padding:26px 24px 28px}
.v .ic{color:var(--c);margin-bottom:13px;display:block}
.v h3{font-size:16.5px;font-weight:600;margin-bottom:7px}
.v p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.55}

/* ---------- ways / course cards ---------- */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:40px}
.w{background:var(--surface);padding:30px 28px}
.w h3{font-size:17.5px;margin-bottom:8px}
.w p{font-size:15px;color:var(--muted);margin:0}
.w p+p{margin-top:.8em}

.courses{display:grid;gap:18px;margin-top:40px}
.course{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--c);
  padding:24px 26px}
.course h3{font-size:18px;margin-bottom:8px}
.course p{font-size:15px;color:var(--muted);margin:0}

.practical{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;margin-top:34px;
  border-top:1px solid var(--border);padding-top:26px}
.practical b{display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);margin-bottom:6px}
.practical p{margin:0;font-size:15.5px}

/* ---------- calendar ---------- */
.cal{margin-top:40px;border-top:1px solid var(--border)}
.ev{display:grid;grid-template-columns:158px 1fr;gap:32px;padding:22px 0;
  border-bottom:1px solid var(--border);align-items:baseline}
.when{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--c-ink,var(--muted));padding-top:4px}
.ev h3{font-size:18px;margin-bottom:5px}
.ev p{font-size:15px;color:var(--muted);margin:0;max-width:62ch}

/* ---------- news ---------- */
.posts{margin-top:44px;border-top:1px solid var(--border)}
.post{display:grid;grid-template-columns:200px 1fr;gap:36px;padding:30px 0;
  border-bottom:1px solid var(--border);align-items:start}
.post img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border)}
.post .meta{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--c-ink,var(--muted));margin-bottom:9px}
.post h3{margin-bottom:9px}
.post p{font-size:15.5px;color:var(--muted);margin:0;max-width:66ch}

/* ---------- contact ---------- */
.reach{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:40px}
.phones{list-style:none;margin:0;padding:0}
.phones li{display:flex;justify-content:space-between;gap:22px;padding:12px 0;
  border-bottom:1px solid var(--border);font-size:15.5px}
.phones span{color:var(--muted)}
.phones a{text-decoration:none;font-variant-numeric:tabular-nums;font-weight:500;
  border-bottom:1px solid var(--border)}
.addr{font-size:16px;line-height:1.65}
.addr strong{font-weight:600}
.inline-link{text-decoration:none;border-bottom:1px solid var(--border)}
.hours{list-style:none;margin:10px 0 0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:15px}
.hours span{color:var(--muted)}

/* ---------- open items ---------- */
.open{border:1px solid var(--border);border-left:4px solid var(--intellect);
  background:var(--intellect-tint);padding:24px 26px;margin-top:44px}
.open h3{font-size:15px;font-weight:600;margin-bottom:10px;font-family:var(--font-body);
  letter-spacing:.01em}
.open ul{margin:0;padding-left:18px}
.open li{font-size:14.5px;color:var(--muted);margin-bottom:6px}

/* ---------- footer ---------- */
footer{padding:56px 0 70px;font-size:14px;color:var(--muted);border-top:3px solid var(--emotion)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:46px}
footer h4{font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--fg);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:7px}
footer a{text-decoration:none;color:var(--muted)}
footer a:hover{color:var(--fg)}
.fname{font-family:var(--font-display);font-size:17px;color:var(--fg);letter-spacing:0;
  margin-bottom:10px}
.frule{margin-top:38px;padding-top:20px;border-top:1px solid var(--border);font-size:13px}

@media (max-width:960px){
  .split,.split.even,.min,.creed .cols,.reach,.detail,.detail:nth-of-type(even),
  .fgrid,.post,.symbol,.practical{grid-template-columns:1fr;gap:32px}
  .detail:nth-of-type(even) .txt{order:0}
  .post img{max-width:280px}
  .vals,.ways,.stats{grid-template-columns:1fr 1fr}
  .track{grid-template-columns:1fr 1fr}
  .stop{border-right:none;border-bottom:1px solid var(--border)}
  #nav{display:none}
  .menu-btn{display:block}
  #nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);
    flex-direction:column;gap:0;padding:8px 32px 18px;border-bottom:1px solid var(--border)}
  #nav.is-open a{padding:11px 0;border-bottom:1px solid var(--border)}
}
@media (max-width:620px){
  .wrap,.bar,.draft{padding-left:20px;padding-right:20px}
  .bar{gap:10px}
  .mark{gap:9px;min-width:0}
  .mark .emblem{width:30px;height:30px}
  .mark b{font-size:14px;line-height:1.1}
  .mark span{font-size:9px;letter-spacing:.1em}
  .give{display:none}
  .menu-btn{font-size:12.5px;padding:7px 9px}
  section{padding:60px 0}
  .track,.vals,.ways,.stats{grid-template-columns:1fr}
  .ev{grid-template-columns:1fr;gap:6px}
  .ribbon div{border-right:none;padding-right:0;margin-right:24px;margin-bottom:14px}
}

/* ===================================================================
   Trust-site conventions, added after reviewing AKDN, Tata Trusts,
   Teach For India and Mukul Madhav Foundation. Every number shown is
   taken from the 2024-25 ministry reports.
   =================================================================== */

/* section heading with a short coloured rule beneath (TFI / Tata) */
.ruled{padding-bottom:14px;position:relative;display:inline-block}
.ruled::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  background:var(--c,var(--emotion))}

/* impact band — tinted, line icons, vertical rules (AKDN) */
.impact{background:var(--raised);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:70px 0}
.impact .head{text-align:center;max-width:62ch;margin:0 auto 46px}
.impact .head h2{margin-bottom:16px}
.impact .head p{color:var(--muted);margin:0;font-size:17px}
.figures{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:0 26px;text-align:center;border-right:1px solid var(--border)}
.fig:last-child{border-right:none}
.fig .ic{color:var(--c);margin:0 auto 14px;display:block}
.fig b{display:block;font-family:var(--font-display);font-size:38px;font-weight:600;
  letter-spacing:0;line-height:1;color:var(--fg)}
.fig span{display:block;font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.45}

/* labelled photo cards (AKDN "Developing human capacity") */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.tile{position:relative;display:block;overflow:hidden;text-decoration:none;color:#fff;
  border-bottom:4px solid var(--c)}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,12,10,.86) 0%,rgba(16,12,10,.30) 52%,rgba(16,12,10,.05) 100%)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px}
.tile .cap b{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;
  letter-spacing:0;line-height:1.2}
.tile .cap span{display:block;font-size:13.5px;color:rgba(255,255,255,.82);margin-top:5px}

/* solid-colour pull-quote panel (MMPC) */
.quote{background:var(--c);color:#14100e;padding:56px 0}
.quote .inner{max-width:56ch}
.quote .qm{font-family:var(--font-display);font-size:58px;line-height:.6;display:block;
  margin-bottom:18px;color:rgba(20,16,14,.45)}
.quote blockquote{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3.2vw,36px);line-height:1.22;letter-spacing:0}
.quote cite{display:block;font-style:normal;font-size:13px;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(20,16,14,.72);margin-top:22px}

/* impact stories */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
.story{border-top:3px solid var(--c);padding-top:20px}
.story .tag{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--c-ink);margin-bottom:9px}
.story h3{font-size:19px;margin-bottom:9px}
.story p{font-size:15px;color:var(--muted);margin:0}

/* in-brief news strip (AKDN) */
.brief{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.bcard{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--c);
  padding:20px 20px 22px;text-decoration:none;color:inherit;display:block;
  transition:transform .14s ease}
.bcard:hover{transform:translateY(-3px)}
.bcard .d{font-size:12px;color:var(--muted);letter-spacing:.02em;margin-bottom:9px}
.bcard p{margin:0;font-size:15px;line-height:1.4;font-weight:500}
.morelink{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:14px;
  font-weight:600;letter-spacing:.02em;text-decoration:none;color:var(--c-ink,var(--emotion-ink))}
.morelink:hover{gap:12px}

@media (max-width:960px){
  .figures,.brief{grid-template-columns:repeat(2,1fr)}
  .fig{border-right:none;padding:18px 12px}
  .stories,.tiles{grid-template-columns:1fr}
}
@media (max-width:620px){.figures,.brief{grid-template-columns:1fr}}

/* nav was wrapping to two lines at 1440px — tighten and forbid wrapping */
nav{gap:17px}
nav a{white-space:nowrap;font-size:14px}
@media (max-width:1180px){nav{gap:13px}nav a{font-size:13.5px}}
.hero img{object-position:center 55%}

/* ===================================================================
   Reduced motion. The site animates tile zooms, card lifts and smooth
   scrolling; honour the operating-system setting that asks for none.
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .tile:hover img{transform:none}
  .give:hover,.m:hover,.bcard:hover{transform:none}
}

/* ===================================================================
   Print. The contact page and the programme details are the two things
   people actually print, so those are what this is tuned for: black on
   white, no navigation furniture, and nothing split across a page break.
   =================================================================== */
@media print{
  :root{
    --bg:#fff;--surface:#fff;--raised:#fff;--fg:#000;--muted:#333;--border:#bbb;
    --spirit:#0b3a6a;--intellect:#6b4910;--emotion:#7d1626;--earth:#255432;
  }
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  header,.draft,.menu-btn,nav,.give,.morelink,.open{display:none!important}
  .hero{min-height:0;display:block;page-break-after:avoid}
  .hero img,.tile img{display:none}
  .hero::after{display:none}
  .hero .wrap{padding:0 0 18pt;color:#000}
  .hero .eyebrow,.hero p{color:#333}
  .ribbon{border-top:1px solid #bbb}
  .ribbon span,.ribbon b{color:#000}
  section,.impact{padding:18pt 0;border-bottom:1px solid #ddd;break-inside:auto}
  .wrap{max-width:100%;padding:0}
  /* dark and solid-colour panels invert badly on paper */
  .creed,.quote{background:#fff!important;color:#000!important;border:1px solid #bbb;padding:14pt}
  .creed p,.quote cite,.creed .eyebrow{color:#333!important}
  .quote .qm{color:#999!important}
  h1{font-size:22pt}h2{font-size:15pt}h3{font-size:12pt}
  h1,h2,h3{break-after:avoid}
  .fig,.st,.v,.w,.course,.story,.bcard,.ev,.post,.stop,.mean{break-inside:avoid}
  figure,img{break-inside:avoid;max-width:100%}
  .tile::after{display:none}
  .tile .cap{position:static;padding:8pt 0;color:#000}
  .tile .cap span{color:#333}
  /* spell out where a link goes, since a printed page cannot be clicked */
  .reach a[href^="tel:"]::after{content:""}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
  footer{border-top:2px solid #000;padding:14pt 0 0}
  footer ul,.frule{color:#333}
}

/* ===================================================================
   PASS 2 — patterns synthesised from AKDN, Tata Trusts, Teach For India,
   Mukul Madhav, Gates, Malala Fund, WaterAid India and Azim Premji.
   Written against the four-stop palette above: BRIGHT for fills, INK for
   text, DEEP for any ground that carries white type.
   =================================================================== */

/* --- emblem strip: the four ministry colours as a divider band.
   Azim Premji sets a folk block-print border between sections; this is
   the same device, built from the Society's own colours. --- */
.strip{height:7px;border:none;margin:0;
  background:repeating-linear-gradient(90deg,
    var(--intellect) 0 18px, var(--spirit) 18px 36px,
    var(--emotion) 36px 54px, var(--earth) 54px 72px)}

/* --- big centred mission statement (Gates, Malala Fund) --- */
.mission{padding:92px 0;text-align:center}
.mission p{font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,4.4vw,50px);line-height:1.16;letter-spacing:0;
  max-width:26ch;margin:0 auto;text-wrap:balance}
.mission em{font-style:italic;color:var(--c-ink,var(--emotion-ink))}
.mission .sub{font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--muted);
  max-width:62ch;margin:26px auto 0;letter-spacing:0}

/* --- solid-colour programme cards (Azim Premji "What We Do").
   Ground is --c-deep, not --c: these carry white text. --- */
.progs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.prog{background:var(--c-deep);color:#fff;padding:28px 24px 24px;text-decoration:none;
  display:flex;flex-direction:column;min-height:250px;transition:transform .15s ease}
.prog:hover{transform:translateY(-4px)}
.prog .ic{margin-bottom:auto;opacity:.95}
.prog h3{font-size:19px;margin:26px 0 8px;color:#fff}
.prog p{font-size:14.5px;line-height:1.5;margin:0;color:rgba(255,255,255,.9)}
.prog .go{margin-top:18px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1}

/* --- stat cards on photo grounds (WaterAid India) --- */
.statcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.sc{position:relative;overflow:hidden;min-height:210px;display:flex;align-items:flex-end;
  border-bottom:4px solid var(--c)}
.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,11,9,.93) 12%,rgba(14,11,9,.58) 62%,rgba(14,11,9,.25) 100%)}
.sc .in{position:relative;z-index:2;padding:22px 22px 20px;color:#fff}
.sc b{display:block;font-family:var(--font-display);font-size:40px;font-weight:600;
  letter-spacing:0;line-height:1}
.sc span{display:block;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.9);margin-top:8px}
.provenance{font-size:13px;color:var(--muted);margin-top:18px;text-align:center;letter-spacing:.01em}

/* --- gifts tied to outcomes (Malala Fund's preset amounts) --- */
.giving{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:38px}
.amt{background:var(--surface);padding:24px 26px;display:flex;gap:18px;align-items:flex-start}
.amt .rs{font-family:var(--font-display);font-size:27px;font-weight:600;letter-spacing:0;
  line-height:1.05;color:var(--c-ink);flex:none;min-width:104px}
.amt b{display:block;font-size:15.5px;font-weight:600;margin-bottom:4px}
.amt p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.amt .flag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--intellect-ink);margin-top:7px}

@media (max-width:960px){
  .progs,.statcards{grid-template-columns:repeat(2,1fr)}
  .giving{grid-template-columns:1fr}
}
@media (max-width:620px){.progs,.statcards{grid-template-columns:1fr}}

/* ===================================================================
   Design reset: formal, warm, human. This homepage keeps the institutional
   trust of the reference sites without copying the Vatican layout.
   =================================================================== */
.home-hero{background:linear-gradient(180deg,#ffffff 0%,#f3ede3 100%);padding:76px 0 0;
  border-bottom:1px solid var(--border)}
.home-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:68px;align-items:center}
.home-kicker{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  color:var(--emotion-ink);margin:0 0 18px}
.home-copy h1{font-size:clamp(42px,5.8vw,76px);line-height:1.02;letter-spacing:0;
  max-width:12ch;text-wrap:balance}
.home-copy p:not(.home-kicker){font-size:19px;line-height:1.68;color:var(--muted);
  max-width:42ch;margin:24px 0 0}
.home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.primary-link,.secondary-link{display:inline-flex;align-items:center;min-height:42px;
  padding:10px 18px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em}
.primary-link{background:var(--cta);color:var(--cta-fg)}
.secondary-link{border:1px solid var(--border);background:#fff;color:var(--fg)}
.home-photo{margin:0}
.home-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border:1px solid var(--border);box-shadow:0 18px 42px rgba(63,49,34,.11)}
.home-photo figcaption{font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.015em}
.home-trust{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--border);
  background:#ffffff}
.home-trust div{padding:24px 26px;border-right:1px solid var(--border)}
.home-trust div:last-child{border-right:none}
.home-trust b{display:block;font-family:var(--font-display);font-size:34px;line-height:1;
  font-weight:600;color:var(--fg)}
.home-trust span{display:block;margin-top:8px;font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}

.home-mission{background:#fff;padding:88px 0;border-bottom:1px solid var(--border)}
.mission-grid{display:grid;grid-template-columns:220px 1fr;gap:54px;align-items:start}
.mission-grid h2{font-size:clamp(30px,4vw,52px);line-height:1.08;font-weight:500;
  max-width:18ch;text-wrap:balance}
.mission-grid p:not(.eyebrow){font-size:18px;line-height:1.68;color:var(--muted);
  max-width:62ch;margin:24px 0 0}

.home-pathways{background:var(--bg);padding:66px 0;border-bottom:1px solid var(--border)}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:26px}
.entry{background:#fff;padding:30px 28px 34px;text-decoration:none;color:inherit;
  border-top:4px solid var(--c)}
.entry span{display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.entry b{display:block;font-family:var(--font-display);font-size:24px;line-height:1.15;
  font-weight:500;max-width:11ch}
.entry p{font-size:15px;line-height:1.55;color:var(--muted);margin:16px 0 0}

@media (max-width:960px){
  .home-hero-grid,.mission-grid{grid-template-columns:1fr;gap:36px}
  .home-copy h1{max-width:14ch}
  .home-photo{max-width:720px}
  .home-trust,.entry-grid{grid-template-columns:repeat(2,1fr)}
  .home-trust div:nth-child(2){border-right:none}
  .home-trust div:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media (max-width:620px){
  .home-hero{padding:52px 0 0}
  .home-kicker{font-size:10.5px;line-height:1.55;letter-spacing:.08em;max-width:32ch;overflow-wrap:anywhere}
  .home-copy h1{font-size:clamp(35px,11vw,48px)}
  .home-copy p:not(.home-kicker),.mission-grid p:not(.eyebrow){font-size:16.5px}
  .home-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .primary-link,.secondary-link{justify-content:center}
  .home-trust,.entry-grid{grid-template-columns:1fr}
  .home-trust div{border-right:none;border-bottom:1px solid var(--border);padding:22px 20px}
  .home-trust div:last-child{border-bottom:none}
  .home-mission{padding:64px 0}
  .home-pathways{padding:54px 0}
  .entry{padding:26px 24px 30px}
}

/* ===================================================================
   Professional homepage direction: Catholic dignity + modern NGO polish.
   Full photographic opening, calm institutional typography, fewer boxes.
   =================================================================== */
.draft{display:none}
body{background:#f8f4ed}
header{background:rgba(255,253,247,.96);backdrop-filter:saturate(1.1) blur(14px)}
.bar{max-width:1220px;min-height:78px;padding:15px 32px}
.mark b{text-transform:none;font-size:18.5px;letter-spacing:0}
.mark span{letter-spacing:.12em}
nav{gap:22px}
nav a{font-size:13.5px;color:#5f574f}
.give{border-radius:3px;padding:10px 18px;box-shadow:0 8px 20px rgba(220,30,53,.18)}

.pro-hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;overflow:hidden;
  background:#17110f;color:#fff}
.pro-hero picture,.pro-hero picture img{position:absolute;inset:0;width:100%;height:100%}
.pro-hero picture img{object-fit:cover;object-position:center 38%}
.pro-hero-shade{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(22,15,13,.90) 0%,rgba(22,15,13,.78) 34%,rgba(22,15,13,.38) 64%,rgba(22,15,13,.18) 100%),
    linear-gradient(0deg,rgba(22,15,13,.72) 0%,rgba(22,15,13,.12) 52%)}
.pro-hero-inner{position:relative;z-index:2;padding-top:120px;padding-bottom:92px}
.pro-hero-copy{max-width:650px}
.pro-kicker{margin:0 0 20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:#f6bdc7}
.pro-hero h1{font-size:clamp(48px,7vw,88px);line-height:.98;letter-spacing:0;
  max-width:11ch;text-wrap:balance;color:#fffaf2}
.pro-hero p:not(.pro-kicker){font-size:20px;line-height:1.62;max-width:38ch;margin:26px 0 0;
  color:rgba(255,250,242,.88)}
.pro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pro-primary,.pro-secondary,.pro-text-link{font-size:14px;font-weight:700;letter-spacing:.015em;text-decoration:none}
.pro-primary,.pro-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:11px 20px;border-radius:3px}
.pro-primary{background:var(--cta);color:var(--cta-fg);box-shadow:0 16px 34px rgba(220,30,53,.22)}
.pro-secondary{background:#fff;color:#241d18;border:1px solid rgba(255,255,255,.78)}
.pro-secondary.dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

.pro-intro{background:#ffffff;padding:92px 0 0;border-bottom:1px solid var(--border)}
.pro-intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:start}
.pro-intro h2,.pro-section-head h2,.pro-impact h2,.pro-feature h2,.pro-cta h2{
  font-size:clamp(34px,4.6vw,58px);line-height:1.06;font-weight:500;letter-spacing:0;text-wrap:balance}
.pro-intro-copy p,.pro-section-head p,.pro-impact p,.pro-feature p,.pro-cta p{
  font-size:17.5px;line-height:1.72;color:#61584f;margin:0}
.pro-text-link{display:inline-flex;margin-top:22px;color:var(--emotion-ink);border-bottom:1px solid currentColor}
.pro-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;background:#fff;border:1px solid var(--border);
  transform:translateY(1px)}
.pro-facts div{padding:28px 30px;border-right:1px solid var(--border)}
.pro-facts div:last-child{border-right:0}
.pro-facts b{display:block;font-family:var(--font-display);font-size:36px;line-height:1;font-weight:600;letter-spacing:0}
.pro-facts span{display:block;margin-top:9px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#6c6258}

.pro-ministries{padding:110px 0 102px;background:#f8f4ed}
.pro-section-head{display:grid;grid-template-columns:220px 1fr .9fr;gap:44px;align-items:end}
.pro-section-head .eyebrow{align-self:start}
.pro-section-head .eyebrow{white-space:nowrap}
.pro-ministry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.pro-ministry{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:430px;
  padding:26px 24px;color:#fff;text-decoration:none;overflow:hidden;background:#16110f;border-bottom:5px solid var(--c);
  isolation:isolate}
.pro-ministry img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;z-index:-2}
.pro-ministry::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,12,10,.92) 0%,rgba(16,12,10,.66) 46%,rgba(16,12,10,.08) 100%)}
.pro-ministry:hover img{transform:scale(1.045)}
.pro-ministry span{font-size:12px;font-weight:700;letter-spacing:.13em;color:rgba(255,255,255,.72);margin-bottom:14px}
.pro-ministry b{font-family:var(--font-display);font-size:26px;font-weight:500;line-height:1.08;letter-spacing:0;
  max-width:11ch}
.pro-ministry p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82);margin:14px 0 0}

.pro-impact{background:#fff;padding:96px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pro-impact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.pro-impact h2{font-size:clamp(32px,4vw,50px);max-width:12ch}
.pro-impact p{margin-top:22px;max-width:36ch}
.pro-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.pro-stat{background:#ffffff;padding:34px 32px;border-top:4px solid var(--c)}
.pro-stat b{display:block;font-family:var(--font-display);font-size:52px;line-height:1;font-weight:600;color:#211a16;
  letter-spacing:0}
.pro-stat span{display:block;margin-top:12px;font-size:14px;font-weight:600;line-height:1.42;color:#62594f}

.pro-feature{background:#f8f4ed;padding:108px 0}
.pro-feature-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center}
.pro-feature figure{margin:0}
.pro-feature img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--border);
  box-shadow:0 22px 48px rgba(43,34,26,.12)}
.pro-feature h2{font-size:clamp(31px,3.6vw,48px)}
.pro-feature p{margin-top:24px}

.pro-quote{background:#7f1725;color:#fff6ee;padding:74px 0;border-bottom:0}
.pro-quote blockquote{font-family:var(--font-display);font-size:clamp(32px,4.6vw,58px);font-weight:400;
  line-height:1.08;letter-spacing:0;max-width:15ch;margin:0;text-wrap:balance}
.pro-quote cite{display:block;margin-top:22px;font-style:normal;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(255,246,238,.72)}

.pro-cta{background:#17110f;color:#fff8ee;padding:86px 0;border-bottom:0}
.pro-cta .eyebrow{color:rgba(255,248,238,.72)}
.pro-cta .eyebrow::before{background:var(--intellect)}
.pro-cta-grid{display:grid;grid-template-columns:1fr .82fr;gap:72px;align-items:center}
.pro-cta h2{font-size:clamp(34px,4.2vw,54px)}
.pro-cta p{color:rgba(255,248,238,.76)}

@media (max-width:1080px){
  nav{gap:14px}
  .pro-section-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .pro-ministry-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .pro-hero{min-height:720px}
  .pro-hero picture img{object-position:center top}
  .pro-intro-grid,.pro-impact-grid,.pro-feature-grid,.pro-cta-grid{grid-template-columns:1fr;gap:38px}
  .pro-facts{grid-template-columns:repeat(2,1fr)}
  .pro-facts div:nth-child(2){border-right:0}
  .pro-facts div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .pro-impact h2{max-width:18ch}
}
@media (max-width:620px){
  .bar{min-height:72px}
  .mark b{font-size:15px;line-height:1.05}
  .pro-hero{min-height:690px}
  .pro-hero-shade{background:
    linear-gradient(180deg,rgba(22,15,13,.52) 0%,rgba(22,15,13,.12) 24%,rgba(22,15,13,.86) 72%,rgba(22,15,13,.94) 100%)}
  .pro-hero-inner{padding-top:250px;padding-bottom:48px}
  .pro-kicker{font-size:11px;line-height:1.45;letter-spacing:.13em}
  .pro-hero h1{font-size:clamp(42px,13vw,54px);max-width:10.5ch}
  .pro-hero p:not(.pro-kicker){font-size:17px}
  .pro-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .pro-intro,.pro-ministries,.pro-impact,.pro-feature,.pro-cta{padding-top:64px;padding-bottom:64px}
  .pro-intro{padding-bottom:0}
  .pro-intro h2,.pro-section-head h2,.pro-impact h2,.pro-feature h2,.pro-cta h2{
    font-size:clamp(30px,9vw,40px)}
  .pro-facts,.pro-ministry-grid,.pro-stat-grid{grid-template-columns:1fr}
  .pro-facts{margin-top:46px}
  .pro-facts div{border-right:0;border-bottom:1px solid var(--border);padding:24px 22px}
  .pro-facts div:last-child{border-bottom:0}
  .pro-ministry{min-height:360px}
  .pro-stat{padding:28px 24px}
  .pro-stat b{font-size:46px}
  .pro-quote{padding:62px 0}
}

/* ===================================================================
   Reliance / Adani reference pass.
   Softer foundation-site language: icon themes, rounded media, cream canvas.
   =================================================================== */
body{background:#f4f7f6}
header{position:sticky;background:#f4f7f6;border-bottom:0;box-shadow:0 1px 0 rgba(31,27,23,.08)}
.bar{max-width:1290px;min-height:82px}
nav a{font-size:14px;color:#064b49;font-weight:700}
.give{background:#fff;border:1px solid #0b5b58;color:#0b5b58;border-radius:999px;box-shadow:none;
  padding:10px 22px;text-transform:uppercase;font-size:12px;letter-spacing:.08em}

.theme-band{padding:30px 0 18px;background:#f4f7f6;border-bottom:0}
.theme-scroll{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start}
.theme-item{text-decoration:none;text-align:center;color:#064b49;font-weight:800}
.theme-icon{width:82px;height:82px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  border:6px solid #fff;outline:4px solid var(--c);background:var(--c);color:#fff;
  font-family:var(--font-display);font-size:38px;line-height:1;font-weight:600;
  box-shadow:0 12px 24px rgba(31,27,23,.10)}
.theme-icon svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round}
.theme-item b{display:block;font-size:15px;line-height:1.25;max-width:11ch;margin:0 auto}

.pro-hero{min-height:0;display:block;overflow:visible;background:#f4f7f6;color:#fff;padding:14px 0 72px}
.pro-hero .wrap{max-width:1290px}
.pro-hero-card{position:relative;min-height:min(70vh,700px);overflow:hidden;border-radius:28px;background:#1b1714;
  box-shadow:0 22px 52px rgba(50,38,28,.13)}
.pro-hero picture,.pro-hero picture img{position:absolute;inset:0;width:100%;height:100%}
.pro-hero picture img{object-fit:cover;object-position:center 42%}
.pro-hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,12,10,.62) 0%,rgba(16,12,10,.40) 42%,rgba(16,12,10,.12) 100%),
  linear-gradient(0deg,rgba(16,12,10,.52) 0%,rgba(16,12,10,.06) 55%)}
.pro-hero-inner{position:relative;z-index:2;padding:120px 64px 76px}
.pro-hero-copy{max-width:720px}
.pro-kicker{color:#ffe0de}
.pro-hero h1{font-size:clamp(54px,7.4vw,104px);max-width:12ch;line-height:.93;letter-spacing:0}
.pro-hero p:not(.pro-kicker){font-size:20px;max-width:42ch;color:rgba(255,255,255,.92)}
.pro-primary{background:#e71c3b;border-radius:999px;box-shadow:none;padding:12px 25px;text-transform:uppercase;
  font-size:12px;letter-spacing:.07em}
.pro-secondary{border-radius:999px;padding:12px 25px;text-transform:uppercase;font-size:12px;letter-spacing:.07em}

.pro-intro{background:#f4f7f6;padding:72px 0 0;border-bottom:0}
.pro-intro-grid{background:#c8f1df;border-radius:28px;padding:58px 70px;grid-template-columns:1.05fr .95fr;
  box-shadow:0 18px 42px rgba(33,89,67,.08)}
.pro-intro h2{color:#073f3d}
.pro-intro-copy p{color:#0f5550;font-weight:600}
.pro-text-link{color:#d71935}
.pro-facts{margin-top:46px;border:0;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(31,27,23,.08)}

.pro-ministries{background:#f4f7f6;padding-top:86px}
.pro-ministry{border-radius:22px;border-bottom:0;min-height:390px;box-shadow:0 18px 38px rgba(31,27,23,.12)}
.pro-ministry::before{content:"";position:absolute;left:24px;right:24px;bottom:0;height:6px;background:var(--c);z-index:2;
  border-radius:999px 999px 0 0}

.pro-impact{background:#fff;padding:92px 0;border-top:0;border-bottom:0}
.pro-stat-grid{border:0;gap:18px;background:transparent}
.pro-stat{border-top:0;border-radius:22px;background:#f4f7f6;box-shadow:0 14px 30px rgba(31,27,23,.08)}
.pro-stat::before{content:"";display:block;width:52px;height:5px;border-radius:999px;background:var(--c);margin-bottom:22px}

.pro-feature{background:#f4f7f6}
.pro-feature img{border:0;border-radius:26px;box-shadow:0 20px 48px rgba(31,27,23,.12)}
.pro-quote{background:#c8f1df;color:#073f3d}
.pro-quote cite{color:#0f5550}
.pro-cta{background:#073f3d;color:#fff}

@media (max-width:960px){
  .theme-scroll{display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;padding-bottom:0;scroll-snap-type:x mandatory}
  .theme-scroll{scrollbar-width:none;-ms-overflow-style:none}
  .theme-scroll::-webkit-scrollbar{width:0;height:0;display:none;background:transparent}
  .theme-item{min-width:132px;scroll-snap-align:start}
  .pro-hero-card{min-height:620px;border-radius:24px}
  .pro-hero-inner{padding:230px 34px 46px}
  .pro-intro-grid{grid-template-columns:1fr;padding:42px 34px;border-radius:24px}
}
@media (max-width:620px){
  .theme-band{padding:22px 0 8px}
  .theme-icon{width:68px;height:68px;border-width:5px;outline-width:3px;font-size:31px}
  .theme-item b{font-size:13px}
  .pro-hero{padding:10px 0 54px}
  .pro-hero .wrap{padding-left:12px;padding-right:12px}
  .pro-hero-card{min-height:590px;border-radius:20px}
  .pro-hero picture img{object-position:center top}
  .pro-hero-shade{background:
    linear-gradient(180deg,rgba(16,12,10,.12) 0%,rgba(16,12,10,.08) 30%,rgba(16,12,10,.84) 70%,rgba(16,12,10,.94) 100%)}
  .pro-hero-inner{padding:240px 22px 30px}
  .pro-hero h1{font-size:clamp(40px,12vw,52px);max-width:11ch}
  .pro-hero p:not(.pro-kicker){font-size:16.5px}
  .pro-intro-grid{padding:34px 24px}
  .pro-facts{border-radius:0}
}

/* ===================================================================
   Foundation-wide polish for inner pages.
   Bring the rest of the static site into the Adani/Reliance-inspired system.
   =================================================================== */
.wrap{max-width:1290px}
.phead{background:#f4f7f6;border-bottom:0;padding:42px 0 34px}
.phead .wrap{background:linear-gradient(135deg,#fff 0%,var(--c-tint,#c8f1df) 100%);
  border-radius:28px;padding:58px 70px;box-shadow:0 18px 42px rgba(31,27,23,.08)}
.phead h1{font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:0;
  max-width:13ch;color:#073f3d}
.phead p:not(.eyebrow){font-size:19px;line-height:1.6;max-width:52ch;color:#0f5550;font-weight:600}
.phead .eyebrow{color:#0f5550}

section{background:#f4f7f6;border-bottom:0}
section.tinted{background:#f4f7f6}
section.tight{padding:76px 0}
.split,.split.even,.symbol{align-items:center}
figure.plain img,.portrait,.portrait img,.detail img,.post img,.m img{border:0;border-radius:22px}
figure.plain img,.portrait,.detail img{box-shadow:0 18px 38px rgba(31,27,23,.10)}
figure.plain figcaption,.portrait figcaption{padding-left:4px}

.ruled::after{border-radius:999px}
.impact{background:#fff;border:0;border-radius:0}
.figures{gap:18px;background:transparent}
.fig{background:#f4f7f6;border-right:0;border-radius:22px;padding:32px 24px;
  box-shadow:0 14px 30px rgba(31,27,23,.07)}
.fig .ic{background:var(--c);color:#fff;border-radius:50%;padding:9px;width:48px;height:48px}

.track,.vals,.ways,.stats,.meanings,.brief,.stories,.courses,.cal,.posts{background:transparent;border:0;gap:18px}
.stop,.v,.w,.st,.mean,.bcard,.course,.ev,.post,.story{background:#fff;border:0;border-radius:22px;
  box-shadow:0 14px 30px rgba(31,27,23,.07)}
.stop{padding:28px 26px;border-right:0}
.stop::before{top:18px;left:24px;width:38px;height:5px;border-radius:999px}
.yr{margin-top:18px}
.v,.w,.st,.mean,.course,.bcard{padding:28px}
.story{padding:28px;border-top:0}
.story::before,.v::before,.w::before,.course::before,.bcard::before{content:"";display:block;width:46px;height:5px;
  border-radius:999px;background:var(--c,var(--emotion));margin-bottom:18px}
.ways{grid-template-columns:repeat(4,1fr)}
.w h3,.course h3{font-size:20px}

.detail{background:#fff;border:0;border-radius:28px;padding:34px;margin:34px 0;
  box-shadow:0 18px 42px rgba(31,27,23,.08)}
.detail img{aspect-ratio:4/3}
.detail .n{color:#0f5550}
.facts{border-top:1px solid #eadfd4}
.facts li::before{height:5px;border-radius:999px}
.progs{gap:18px;background:transparent;border:0}
.prog{border-radius:24px;box-shadow:0 16px 36px rgba(31,27,23,.10)}
.prog .go{border-radius:999px}

.post{grid-template-columns:220px 1fr;padding:26px}
.post>div:first-child:empty{display:block;background:linear-gradient(135deg,var(--c-tint,#f3eee8),#fff);
  min-height:150px;border-radius:18px}
.post .meta,.when{color:#0f5550}
.ev{padding:24px 28px}
.reach{background:#fff;border-radius:28px;padding:36px;box-shadow:0 18px 42px rgba(31,27,23,.08)}
.open{border:0;border-radius:20px;background:#fff8dc;box-shadow:0 12px 28px rgba(31,27,23,.06)}

footer{background:#073f3d;color:rgba(255,255,255,.72);border-top:0}
footer h4,.fname{color:#fff}
footer a{color:rgba(255,255,255,.76)}
footer a:hover{color:#fff}
.frule{border-top-color:rgba(255,255,255,.18)}

@media (max-width:960px){
  .phead .wrap{padding:44px 34px}
  .ways,.figures{grid-template-columns:repeat(2,1fr)}
  .post{grid-template-columns:170px 1fr}
}
@media (max-width:620px){
  .phead{padding:28px 0 22px}
  .phead .wrap{border-radius:22px;padding:34px 24px}
  .phead h1{font-size:clamp(38px,11vw,50px)}
  .phead p:not(.eyebrow){font-size:16.5px}
  .ways,.figures{grid-template-columns:1fr}
  .detail{padding:20px;border-radius:22px}
  .post{grid-template-columns:1fr;padding:20px}
  .post img{max-width:none}
  .reach{padding:24px;border-radius:22px}
}

/* ===================================================================
   Homepage reconstruction pass.
   Adds deeper editorial pacing inspired by major foundation websites.
   =================================================================== */
.home-programme{background:#f4f7f6;padding:96px 0}
.home-programme-card{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;background:#fff;border-radius:32px;
  overflow:hidden;box-shadow:0 18px 42px rgba(31,27,23,.08)}
.home-programme-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.home-programme-copy{padding:58px 64px;align-self:center}
.home-programme-copy h2{font-size:clamp(34px,4.5vw,58px);line-height:1.04;color:#073f3d}
.home-programme-copy p:not(.eyebrow){font-size:18px;line-height:1.68;color:#0f5550;margin:22px 0}
.mini-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.mini-facts span{background:#fff8dc;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800;
  color:#073f3d;text-transform:uppercase;letter-spacing:.06em}

.home-quote-grid{display:grid;grid-template-columns:1.1fr .75fr;gap:64px;align-items:center}
.pro-quote figure{margin:0}
.pro-quote img{display:block;width:100%;max-height:520px;object-fit:cover;object-position:center 22%;border-radius:26px;
  box-shadow:0 18px 38px rgba(31,27,23,.12)}
.home-quote-grid blockquote{max-width:17ch}
.quote-mark{font-family:var(--font-display);font-size:120px;line-height:.7;display:block;color:rgba(255,255,255,.72);
  text-shadow:0 8px 18px rgba(31,27,23,.10);margin-bottom:4px}

.home-highlights{background:#f4f7f6;padding:96px 0}
.home-section-title{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:end;margin-bottom:34px}
.home-section-title h2{font-size:clamp(34px,4.2vw,56px);line-height:1.05;color:#073f3d}
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.highlight-card{background:#fff;border-radius:26px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 16px 36px rgba(31,27,23,.09);display:block}
.highlight-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .65s ease}
.highlight-card:hover img{transform:scale(1.035)}
.highlight-card span{display:block;margin:22px 24px 8px;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:#0f5550}
.highlight-card b{display:block;margin:0 24px;font-family:var(--font-display);font-size:25px;line-height:1.12;
  color:#17110f}
.highlight-card p{margin:12px 24px 26px;color:#62594f;font-size:15px;line-height:1.5}

@media (max-width:960px){
  .home-programme-card,.home-quote-grid,.home-section-title{grid-template-columns:1fr}
  .home-programme-copy{padding:42px 34px}
  .highlight-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .home-programme,.home-highlights{padding:64px 0}
  .pro-hero{padding-bottom:34px}
  .pro-intro{padding-top:42px}
  .home-programme-card,.highlight-card{border-radius:22px}
  .home-programme-copy{padding:34px 24px}
  .quote-mark{font-size:82px}
  .pro-quote img{max-height:420px}
}

/* ===================================================================
   Inner-page editorial photo bands.
   Gives subpages the same photo-led foundation-site confidence as home.
   =================================================================== */
.inner-visual{padding:28px 0 70px;background:#f4f7f6}
.inner-visual-grid{display:grid;grid-template-columns:1.35fr .82fr .82fr;gap:20px}
.inner-visual-card{position:relative;margin:0;min-height:430px;border-radius:28px;overflow:hidden;background:#17110f;
  box-shadow:0 18px 42px rgba(31,27,23,.11);isolation:isolate}
.inner-visual-card.is-large{min-height:500px}
.inner-visual-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .72s ease;z-index:-2}
.inner-visual-card::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(16,12,10,.92) 0%,rgba(16,12,10,.78) 26%,rgba(16,12,10,.42) 55%,rgba(16,12,10,.06) 100%)}
.inner-visual-card:hover img{transform:scale(1.035)}
.inner-visual-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px;color:#fff}
.inner-visual-card span{display:block;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.inner-visual-card b{display:block;font-family:var(--font-display);font-size:clamp(24px,2.6vw,36px);
  line-height:1.05;font-weight:500;letter-spacing:0;max-width:13ch}

.phead + .inner-visual{margin-top:-12px}
.phead + .inner-visual .wrap{max-width:1290px}

@media (max-width:960px){
  .inner-visual-grid{display:flex;overflow-x:auto;gap:18px;padding-bottom:2px;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none}
  .inner-visual-grid::-webkit-scrollbar{width:0;height:0;display:none;background:transparent}
  .inner-visual-card,.inner-visual-card.is-large{min-width:78vw;min-height:420px;scroll-snap-align:start}
}
@media (max-width:620px){
  .inner-visual{padding:14px 0 52px}
  .inner-visual-grid{padding-left:20px;padding-right:20px}
  .inner-visual .wrap{padding-left:0;padding-right:0}
  .inner-visual-card,.inner-visual-card.is-large{min-width:84vw;min-height:380px;border-radius:24px}
  .inner-visual-card figcaption{padding:24px}
  .inner-visual-card b{font-size:28px}
}

/* ===================================================================
   Final redesign rounds: less generic, more editorial and institutional.
   Inspired by the stronger foundation references: sharp hierarchy, evidence
   blocks, fewer decorative cards, and details that belong only to PMMSS.
   =================================================================== */
body{background:#f8f2ea}
.wrap{max-width:1240px}
header{background:rgba(248,242,234,.96);border-bottom:1px solid rgba(7,63,61,.12)}
.bar{min-height:76px}
nav a{color:#073f3d}
nav a[aria-current=page]{border-bottom-color:#073f3d}
.give{border-color:#073f3d;background:#073f3d;color:#fff}

.theme-band{padding:24px 0 12px}
.theme-scroll{max-width:980px}
.theme-icon{width:74px;height:74px;border-width:4px;outline-width:2px;box-shadow:none}
.theme-icon svg{width:36px;height:36px}

.pro-hero .wrap{max-width:1240px}
.pro-hero-card{border-radius:8px;box-shadow:none}
.pro-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:36px;align-items:end}
.pro-hero h1{font-size:clamp(50px,6.8vw,92px);max-width:12.4ch}
.pro-hero-note{align-self:end;background:rgba(255,253,248,.92);color:#073f3d;border-radius:8px;
  border-top:5px solid var(--emotion);padding:24px 24px 22px;box-shadow:0 18px 42px rgba(16,12,10,.16)}
.pro-hero-note span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;color:var(--emotion-ink);margin-bottom:13px}
.pro-hero-note b{display:block;font-family:var(--font-display);font-size:27px;line-height:1.06;font-weight:500;
  letter-spacing:0}
.pro-hero-note p{font-size:13.5px!important;line-height:1.45!important;margin:13px 0 0!important;
  color:#0f5550!important}

.pro-intro-grid,.pro-facts,.home-programme-card,.pro-ministry,.pro-stat,.highlight-card,
.phead .wrap,.inner-visual-card,.detail,.fig,.stop,.v,.w,.st,.mean,.bcard,.course,.ev,.post,
.story,.reach,.open,.prog,figure.plain img,.portrait,.portrait img,.detail img,.post img,.m img,
.pro-feature img,.pro-quote img{border-radius:8px}
.pro-intro-grid,.pro-stat,.highlight-card,.home-programme-card,.phead .wrap,.inner-visual-card,.detail,
.reach,.fig,.stop,.v,.w,.st,.mean,.bcard,.course,.ev,.post,.story{box-shadow:none;border:1px solid rgba(7,63,61,.10)}
.pro-facts{box-shadow:none;border:1px solid rgba(7,63,61,.12)}
.pro-intro-grid{background:#d8efe2}
.pro-ministry{box-shadow:none}
.pro-ministry::before{left:0;right:0;border-radius:0;height:7px}

.pro-section-head,.home-section-title{border-top:1px solid rgba(7,63,61,.18);padding-top:30px}
.pro-section-head::before,.home-section-title::before{content:"";display:block;width:82px;height:5px;
  background:var(--emotion);border-radius:999px;position:absolute;top:-3px;left:0;margin-top:0}
.pro-section-head,.home-section-title{position:relative}
.home-section-title .eyebrow{align-self:start}

.pro-impact{background:#ffffff}
.pro-stat-grid{gap:0;border:1px solid rgba(7,63,61,.12)}
.pro-stat{border:0;border-right:1px solid rgba(7,63,61,.12);border-bottom:1px solid rgba(7,63,61,.12);
  border-radius:0;background:#fff}
.pro-stat:nth-child(2n){border-right:0}
.pro-stat:nth-child(n+3){border-bottom:0}
.impact-footnote{grid-column:2;margin:18px 0 0;max-width:none;font-size:13px;
  color:#766b60;border-top:1px solid rgba(7,63,61,.12);padding-top:14px}

.support-ledger{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;background:#073f3d;
  color:#fff;border-radius:8px;padding:44px;margin-bottom:24px}
.support-ledger .eyebrow{color:rgba(255,255,255,.72)}
.support-ledger .eyebrow::before{background:var(--intellect)}
.support-ledger h2{font-size:clamp(30px,3.8vw,48px);line-height:1.06;letter-spacing:0;max-width:12ch}
.support-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.20)}
.support-list div{background:#073f3d;padding:22px}
.support-list b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:#ffe1a3;margin-bottom:8px}
.support-list span{display:block;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82)}

footer{padding:72px 0 42px;background:#073f3d}
.fgrid{grid-template-columns:1.25fr .75fr 1fr}
.fname{font-size:clamp(28px,3.4vw,44px);line-height:1.03;letter-spacing:0;max-width:11ch;
  margin-bottom:22px}
footer h4{color:#ffe1a3}
.frule{font-family:var(--font-display);font-size:clamp(20px,2.2vw,30px);line-height:1.18;color:#fff;
  margin-top:44px;padding-top:26px;max-width:26ch}

a:focus-visible,button:focus-visible{outline:3px solid #214b67;outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .pro-primary,.pro-secondary,.pro-ministry,.highlight-card,.theme-item,.inline-link,.pro-text-link{
    transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease}
  .pro-primary:hover,.pro-secondary:hover,.theme-item:hover{transform:translateY(-2px)}
}

@media (max-width:960px){
  .pro-hero-inner{display:block}
  .pro-hero-note{max-width:360px;margin-top:24px}
  .impact-footnote{grid-column:auto}
  .support-ledger{grid-template-columns:1fr;gap:28px;padding:34px}
  .fgrid{grid-template-columns:1fr;gap:34px}
  .fname{max-width:15ch}
}
@media (max-width:620px){
  .theme-icon{width:64px;height:64px}
  .pro-hero-note{display:none}
  .pro-section-head,.home-section-title{padding-top:24px}
  .support-ledger{padding:28px 22px}
  .support-list{grid-template-columns:1fr}
  .pro-stat{border-right:0;border-bottom:1px solid rgba(7,63,61,.12)}
  .pro-stat:last-child{border-bottom:0}
}

/* ===================================================================
   Art direction pass: richer section families, not one repeated template.
   =================================================================== */
.home-atlas{background:#073f3d;color:#ffffff;padding:104px 0;border-bottom:0}
.home-atlas-grid{display:grid;grid-template-columns:.9fr .78fr .72fr;grid-template-rows:auto auto;
  gap:28px;align-items:stretch}
.atlas-copy{grid-row:1 / span 2;align-self:center;padding-right:34px}
.atlas-copy .eyebrow{color:rgba(255,253,247,.72)}
.atlas-copy .eyebrow::before{background:var(--intellect)}
.atlas-copy h2{font-size:clamp(36px,4.6vw,62px);line-height:1.02;letter-spacing:0;
  max-width:10.8ch;text-wrap:balance}
.atlas-copy p:not(.eyebrow){margin:24px 0 0;color:rgba(255,253,247,.78);font-size:18px;line-height:1.68;
  max-width:34ch}
.atlas-board{border-top:1px solid rgba(255,255,255,.22);align-self:end}
.atlas-row{display:grid;grid-template-columns:46px minmax(150px,.42fr) 1fr;gap:18px;padding:19px 0;
  border-bottom:1px solid rgba(255,255,255,.18);align-items:baseline}
.atlas-row span{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--c)}
.atlas-row b{font-family:var(--font-display);font-size:27px;line-height:1;font-weight:500;color:#fff}
.atlas-row p{margin:0;color:rgba(255,253,247,.74);font-size:14.5px;line-height:1.45}
.atlas-photo{margin:0;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);min-height:260px}
.atlas-photo img{width:100%;height:100%;object-fit:cover}
.atlas-photo-main{grid-column:3;grid-row:1 / span 2}
.atlas-photo-main img{object-position:center}
.atlas-photo-small{grid-column:2;grid-row:2;min-height:220px}

.pro-ministries{padding-top:104px}

.home-highlights{background:#ffffff}
.highlight-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;background:transparent;
  border:0}
.highlight-card{border-radius:0;box-shadow:none;border:0;background:#fff;display:grid;grid-template-columns:1fr;
  grid-template-areas:"image" "label" "heading" "summary";grid-template-rows:auto auto auto 1fr;
  align-content:start;min-height:0}
.highlight-card:first-child{grid-row:span 2}
.highlight-card img{grid-area:image;min-width:0;min-height:0}
.highlight-card:first-child img{aspect-ratio:16/10;height:auto}
.highlight-card:not(:first-child){grid-template-columns:minmax(180px,.85fr) minmax(0,1.15fr);
  grid-template-areas:"image label" "image heading" "image summary";grid-template-rows:auto auto 1fr;min-height:240px}
.highlight-card:not(:first-child) img{height:100%;aspect-ratio:auto;object-fit:cover}
.highlight-card span{margin:24px 26px 8px}
.highlight-card span{grid-area:label}
.highlight-card b{grid-area:heading;margin-left:26px;margin-right:26px}
.highlight-card p{grid-area:summary;margin-left:26px;margin-right:26px}
.highlight-card:not(:first-child) b{font-size:22px}

.phead .wrap{display:grid;grid-template-columns:1fr .72fr;gap:38px;align-items:end}
.phead .eyebrow,.phead h1{grid-column:1}
.phead p:not(.eyebrow){grid-column:2;grid-row:1 / span 2;margin-top:0}

.post{grid-template-columns:260px 1fr}
.post h3{font-size:clamp(22px,2.5vw,32px);max-width:24ch}
.post p{font-size:16px;line-height:1.62}
.ev{grid-template-columns:190px 1fr}
.ev h3{font-size:clamp(21px,2.1vw,28px)}

@media (max-width:1080px){
  .home-atlas-grid{grid-template-columns:1fr 1fr}
  .atlas-copy{grid-column:1 / -1;grid-row:auto;padding-right:0}
  .atlas-copy h2{max-width:16ch}
  .atlas-board{grid-column:1}
  .atlas-row b{font-size:24px}
  .atlas-photo-main{grid-column:2;grid-row:2 / span 2}
  .atlas-photo-small{grid-column:1;grid-row:3}
  .pro-ministry-grid{grid-template-columns:repeat(2,1fr)}
  .highlight-grid{grid-template-columns:1fr}
  .highlight-card:first-child{grid-row:auto}
  .highlight-card:not(:first-child){grid-template-columns:240px 1fr}
}
@media (max-width:760px){
  .home-atlas{padding:70px 0}
  .home-atlas-grid{grid-template-columns:1fr}
  .atlas-copy h2{max-width:12ch}
  .atlas-board,.atlas-photo-main,.atlas-photo-small{grid-column:auto;grid-row:auto}
  .atlas-row{grid-template-columns:38px minmax(132px,.42fr) 1fr;gap:14px}
  .atlas-row b{font-size:23px}
  .atlas-photo-main,.atlas-photo-small{min-height:280px}
  .phead .wrap{display:block}
  .phead p:not(.eyebrow){margin-top:20px}
  .highlight-card:not(:first-child){grid-template-columns:1fr;grid-template-areas:"image" "label" "heading" "summary";grid-template-rows:auto auto auto 1fr}
  .highlight-card:not(:first-child) img{height:auto;aspect-ratio:16/10}
  .post,.ev{grid-template-columns:1fr}
}

/* ===================================================================
   Conversion and confidence sections for inner pages.
   =================================================================== */
.gift-outcomes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(7,63,61,.14);
  border:1px solid rgba(7,63,61,.14);margin:26px 0}
.gift-card{background:#fff;padding:30px 28px 32px;border-top:6px solid var(--c)}
.gift-card span{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--c-ink);margin-bottom:14px}
.gift-card b{display:block;font-family:var(--font-display);font-size:clamp(25px,2.6vw,34px);line-height:1.05;
  letter-spacing:0;font-weight:500;max-width:10ch}
.gift-card p{margin:16px 0 0;color:#62594f;font-size:15.5px;line-height:1.55}

.programme-arc{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:34px 0 30px;
  border:1px solid rgba(7,63,61,.14);background:#fff}
.programme-arc div{padding:24px 20px;border-right:1px solid rgba(7,63,61,.14);position:relative}
.programme-arc div:last-child{border-right:0}
.programme-arc div::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:5px;background:var(--intellect)}
.programme-arc span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#8a5f08;margin-bottom:13px}
.programme-arc b{display:block;font-family:var(--font-display);font-size:24px;line-height:1.04;font-weight:500;
  letter-spacing:0}
.programme-arc p{margin:12px 0 0;color:#62594f;font-size:14px;line-height:1.45}

.visit-routing{display:grid;grid-template-columns:.72fr 1.28fr;gap:46px;align-items:start;background:#ffffff;
  border:1px solid rgba(7,63,61,.14);padding:42px;margin-bottom:28px}
.visit-routing h2{font-size:clamp(31px,3.8vw,50px);line-height:1.06;letter-spacing:0;max-width:11ch}
.route-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(7,63,61,.14);
  border:1px solid rgba(7,63,61,.14)}
.route-list article{background:#fff;padding:26px 24px}
.route-list span{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--emotion-ink);
  margin-bottom:18px}
.route-list b{display:block;font-family:var(--font-display);font-size:25px;line-height:1.06;font-weight:500;
  letter-spacing:0}
.route-list p{margin:13px 0 0;font-size:14.5px;line-height:1.5;color:#62594f}

.posts{display:grid;grid-template-columns:1.08fr .92fr;gap:1px;background:rgba(7,63,61,.14);
  border:1px solid rgba(7,63,61,.14)}
.posts .post{margin:0;border-radius:0;border:0;border-bottom:0;background:#fff;box-shadow:none}
.posts .post:first-child{grid-row:span 2;grid-template-columns:1fr;padding:0}
.posts .post:first-child img{width:100%;height:430px;max-width:none;border-radius:0;object-fit:cover}
.posts .post:first-child>div:last-child{padding:32px}
.posts .post:first-child h3{font-size:clamp(30px,3.5vw,48px);max-width:12ch;line-height:1.02}
.posts .post:not(:first-child){grid-template-columns:150px 1fr;padding:22px}
.posts .post:not(:first-child) img{height:130px;max-width:none;border-radius:0;object-fit:cover}
.posts .post:not(:first-child)>div:first-child:empty{min-height:130px;border-radius:0}
.posts .post:not(:first-child) h3{font-size:22px;line-height:1.13}
.posts .open{grid-column:1 / -1}

@media (max-width:1080px){
  .programme-arc{grid-template-columns:repeat(3,1fr)}
  .programme-arc div{border-bottom:1px solid rgba(7,63,61,.14)}
  .programme-arc div:nth-child(3n){border-right:0}
  .programme-arc div:nth-last-child(-n+3){border-bottom:0}
  .visit-routing{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .posts .post:first-child{grid-row:auto}
}
@media (max-width:760px){
  .gift-outcomes,.route-list{grid-template-columns:1fr}
  .programme-arc{grid-template-columns:1fr}
  .programme-arc div,.programme-arc div:nth-child(3n){border-right:0;border-bottom:1px solid rgba(7,63,61,.14)}
  .programme-arc div:last-child{border-bottom:0}
  .visit-routing{padding:28px 22px}
  .posts .post:not(:first-child){grid-template-columns:1fr}
  .posts .post:not(:first-child) img{height:auto;aspect-ratio:16/10}
}

/* ===================================================================
   Finishing system: consistent type, tactile focus states, no default feel.
   =================================================================== */
::selection{background:#ffe1a3;color:#073f3d}
h1,h2,h3,.fname,.pro-hero h1,.atlas-copy h2,.gift-card b,.programme-arc b,.route-list b,
.posts .post:first-child h3,.pro-intro h2,.pro-section-head h2,.pro-impact h2,.pro-feature h2,
.pro-cta h2,.phead h1{letter-spacing:0!important}
body{background:
  linear-gradient(rgba(7,63,61,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(7,63,61,.018) 1px,transparent 1px),
  #f8f2ea;background-size:44px 44px,44px 44px}
section,.theme-band,.pro-hero,.pro-intro,.pro-ministries,.pro-feature,.home-highlights{background-color:transparent}
.pro-primary,.pro-secondary{position:relative;overflow:hidden}
.pro-primary::after{content:"";position:absolute;inset:auto 18px 7px;height:1px;background:currentColor;
  opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.pro-primary:hover::after{transform:scaleX(1)}
.inline-link,.pro-text-link{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  border-bottom:0}
img{background:#e9dfd3}
img[src*="brand"],img[src*="emblem"],img[src*="logo"],img[src*="icon"],.site-preloader__emblem,.flogo-mark,.flogo img,img.brandmark,img.brandmark-sm,img.emblem,.mark img,.symbol-mark img{background:transparent !important}
.inner-visual-card img,.pro-ministry img,.highlight-card img,.atlas-photo img,.post img{
  filter:saturate(.96) contrast(1.03)}
.open{background:#fff8dc;border-left:5px solid var(--intellect)}
.open h3{color:#073f3d}

@media (prefers-reduced-motion:no-preference){
  .inner-visual-card img,.atlas-photo img,.post img{transition:transform .7s ease,filter .7s ease}
  .inner-visual-card:hover img,.atlas-photo:hover img,.post:hover img{filter:saturate(1.02) contrast(1.04)}
}

/* ===================================================================
   Agency pass 07: first impression.
   Lead with the human photograph and mission, then offer the ministry
   shortcuts as a quiet rail. This removes the poster-in-a-card feeling and
   gives the homepage the confidence of a foundation site.
   =================================================================== */
body{background:#f8f2ea}
header{background:rgba(255,253,247,.97);box-shadow:0 1px 0 rgba(7,63,61,.12)}
.bar{max-width:1280px;min-height:76px}
.mark img.emblem{width:42px;height:42px}
.mark b{font-size:19px}
.mark span{letter-spacing:.11em}
.menu-btn{border-color:rgba(7,63,61,.16);background:#ffffff}

.pro-hero{padding:0;background:#17110f;color:#fff;overflow:hidden}
.pro-hero .wrap{max-width:none;padding-left:0;padding-right:0}
.pro-hero-card{min-height:max(600px,calc(100svh - 112px));border-radius:0;box-shadow:none;background:#17110f}
.pro-hero picture img{object-position:center 38%}
.pro-hero-shade{background:
  linear-gradient(90deg,rgba(14,10,8,.88) 0%,rgba(14,10,8,.68) 38%,rgba(14,10,8,.24) 70%,rgba(14,10,8,.08) 100%),
  linear-gradient(0deg,rgba(14,10,8,.78) 0%,rgba(14,10,8,.16) 58%,rgba(14,10,8,.30) 100%)}
.pro-hero-inner{min-height:max(600px,calc(100svh - 112px));max-width:1280px;margin:0 auto;padding:88px 32px 36px;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:end}
.pro-hero-copy{max-width:760px}
.pro-kicker{color:#ffe1a3;letter-spacing:.18em}
.pro-hero h1{font-size:clamp(48px,5.3vw,82px);max-width:14.5ch;line-height:.96}
.pro-hero p:not(.pro-kicker){font-size:20px;line-height:1.58;max-width:40ch}
.pro-hero-note{background:rgba(255,253,247,.94);color:#073f3d;border-radius:8px;border-top:5px solid var(--intellect);
  box-shadow:0 20px 48px rgba(9,7,5,.18)}
.pro-hero-note span{color:var(--emotion-ink)}
.pro-hero-note p{color:#245b56!important}
.pro-primary,.pro-secondary{border-radius:3px}

.theme-band{padding:0;background:#ffffff;border-bottom:1px solid rgba(7,63,61,.12)}
.theme-scroll{max-width:1280px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.theme-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left;
  min-height:104px;padding:22px 28px;color:#073f3d;border-right:1px solid rgba(7,63,61,.12)}
.theme-item:last-child{border-right:0}
.theme-icon{width:54px;height:54px;margin:0;border-width:3px;outline-width:2px;box-shadow:none}
.theme-icon svg{width:27px;height:27px}
.theme-item b{font-size:14.5px;max-width:none;margin:0;line-height:1.18}

.pro-intro{padding-top:88px}

@media (max-width:960px){
  .pro-hero-inner{grid-template-columns:1fr;padding-top:84px;padding-bottom:56px}
  .pro-hero-note{max-width:360px}
  .theme-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .theme-scroll::-webkit-scrollbar{display:none}
  .theme-item{min-width:250px;scroll-snap-align:start}
}
@media (max-width:620px){
  .bar{padding-left:20px;padding-right:20px}
  .mark b{font-size:15.5px}
  .mark span{font-size:9.5px;letter-spacing:.08em}
  .mark img.emblem{width:36px;height:36px}
  .pro-hero-card,.pro-hero-inner{min-height:max(600px,calc(100svh - 116px))}
  .pro-hero picture img{object-position:60% top}
  .pro-hero-shade{background:
    linear-gradient(180deg,rgba(14,10,8,.22) 0%,rgba(14,10,8,.08) 30%,rgba(14,10,8,.86) 70%,rgba(14,10,8,.96) 100%)}
  .pro-hero-inner{padding:280px 22px 42px;display:block}
  .pro-kicker{font-size:10.5px;line-height:1.45;letter-spacing:.13em}
  .pro-hero h1{font-size:clamp(42px,12vw,56px);max-width:11ch}
  .pro-hero p:not(.pro-kicker){font-size:16.5px;line-height:1.55}
  .pro-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .pro-hero-note{display:none}
  .theme-item{min-width:220px;min-height:92px;padding:18px 20px}
  .theme-icon{width:46px;height:46px}
  .theme-icon svg{width:23px;height:23px}
  .pro-intro{padding-top:64px}
}

@media (max-width:960px){
  #nav:not(.is-open){display:none!important}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;flex:none;margin-left:auto}
  #nav.is-open{position:absolute;top:100%;left:0;right:0;margin:0;border-radius:0;border-left:0;align-items:stretch;max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;background:#fff}
}
nav .nav-donate{display:none}
@media (max-width:620px){
  html,body{width:100%;max-width:100%}
  .give{display:none!important}
  .bar{position:relative;width:100%;max-width:100%;overflow:visible}
  .mark{flex:1; margin-right:0;min-width:0}
  .mark > span{min-width:0}
  .mark b{white-space:normal}
  .mark > span > span{display:none!important}
  .menu-btn{display:flex!important;align-items:center;justify-content:center;position:static;transform:none;z-index:90;min-height:44px;min-width:64px;
    padding:7px 11px;background:#ffffff;color:#073f3d}
  nav .nav-donate{display:block}
  .pro-hero,.pro-hero .wrap,.pro-hero-card,.pro-hero-inner{width:100%;max-width:100%;overflow:hidden}
  .pro-hero h1{font-size:42px;line-height:1.02;max-width:11.4ch;overflow-wrap:normal}
  .pro-hero p{font-size:15.5px;max-width:29ch;overflow-wrap:normal}
  .theme-scroll{max-width:100%;overflow-x:auto}
  .theme-item{flex:0 0 220px}
  .pro-hero-inner{padding-top:160px;padding-bottom:30px}
  nav.is-open{display:flex!important;position:absolute;top:100%;left:0;right:0;z-index:80;background:#ffffff;
    padding:10px 22px 18px;border-top:1px solid rgba(7,63,61,.12);border-bottom:1px solid rgba(7,63,61,.16);
    box-shadow:0 18px 30px rgba(31,27,23,.12)}
}

@media (max-width:620px){
  .phead{padding:28px 0 24px}
  .phead .wrap{display:block;max-width:100%;overflow:hidden;padding:34px 24px}
  .phead h1{font-size:clamp(38px,10.8vw,46px);line-height:1.04;max-width:11.5ch}
  .phead p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:29ch;margin-top:22px;overflow-wrap:normal}
  .inner-visual-grid{max-width:100%;overflow-x:auto}
}

/* ===================================================================
   Direction 08: A Living Record of Healing.
   The previous homepage still behaved like a modern NGO template. This layer
   rebuilds the visible language around PMMSS's own archive: dates, captions,
   documentary photographs, institutional rules and ministry ledgers.
   =================================================================== */
:root{
  --archive-paper:#f4f7f6;
  --archive-paper-2:#ffffff;
  --archive-ink:#1e2d29;
  --archive-wine:#8f1727;
  --archive-teal:#073f3d;
  --archive-blue:#214b67;
  --archive-rule:rgba(30,45,41,.18);
  --archive-muted:#53645c;
}

body{
  background:var(--archive-paper);
  color:var(--archive-ink);
}

.wrap{max-width:1240px}

header{
  background:#ffffff;
  border-bottom:1px solid var(--archive-rule);
  box-shadow:none;
  backdrop-filter:none;
}
.bar{max-width:1360px;min-height:80px;padding:12px 34px}
.mark{gap:13px}
.mark img.emblem{width:44px;height:44px}
.mark b{
  color:var(--archive-ink);
  font-family:var(--font-display);
  font-size:21px;
  line-height:1.05;
  letter-spacing:0;
}
.mark span span{
  color:var(--archive-muted);
  font-size:10.5px;
  letter-spacing:.16em;
}
nav a{
  color:#34383a;
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  padding:8px 0;
  border-bottom:0;
}
nav a:hover,nav a[aria-current=page]{
  color:var(--archive-wine);
  background:transparent;
}
.give{
  background:var(--cta);
  color:var(--cta-fg);
  border:1px solid var(--cta);
  border-radius:7px;
  box-shadow:none;
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
  font-weight:500;
  padding:8px 14px;
}
.give:hover{background:#b8162d;border-color:#b8162d;color:#fff}
@media (max-width:620px){
  #nav.is-open .nav-donate{
    align-self:flex-start;
    margin-top:8px;
    padding:10px 16px;
    border:1px solid var(--cta);
    background:var(--cta);
    color:var(--cta-fg);
  }
  #nav.is-open .nav-donate:hover{background:#b8162d;border-color:#b8162d;color:#fff}
}
.menu-btn{
  border-radius:2px;
  min-width:64px;
  min-height:44px;
  border-color:var(--archive-rule);
  background:var(--archive-paper-2);
  color:var(--archive-ink);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.archive-hero{
  padding:0;
  background:var(--archive-paper);
  border-bottom:1px solid var(--archive-rule);
  overflow:hidden;
}
.archive-hero-grid{
  max-width:1440px;
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(360px,.94fr) minmax(440px,1.06fr);
  grid-template-rows:1fr auto;
  border-left:1px solid var(--archive-rule);
  border-right:1px solid var(--archive-rule);
}
.archive-hero-copy{
  padding:78px 54px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.archive-hero-copy::before{
  content:"PMMSS / 1959 / PUNE";
  position:absolute;
  left:clamp(34px,5vw,82px);
  top:30px;
  color:rgba(32,24,20,.36);
  font-size:11px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:700;
}
.archive-kicker,.archive-small{
  margin:0 0 18px;
  color:var(--archive-wine);
  font-size:12px;
  line-height:1.35;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  overflow-wrap:anywhere;
}
.archive-hero h1{
  max-width:16ch;
  font-size:64px;
  line-height:1.02;
  letter-spacing:0;
  font-weight:500;
}
.archive-lede{
  max-width:37ch;
  margin:30px 0 0;
  color:#574b42;
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.55;
}
.archive-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px 28px;
  margin-top:34px;
}
.archive-actions a,.archive-text-link{
  color:var(--archive-ink);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:7px;
}
.archive-actions a:first-child{
  color:var(--archive-wine);
}
.archive-hero-photo{
  margin:0;
  min-height:520px;
  position:relative;
  border-left:1px solid var(--archive-rule);
  background:#271b16;
  overflow:hidden;
}
.archive-hero-photo picture,.archive-hero-photo img{
  width:100%;
  height:100%;
}
.archive-hero-photo picture{position:absolute;inset:0;display:block}
.archive-hero-photo img{
  object-fit:cover;
  object-position:61% 37%;
  filter:saturate(.92) contrast(1.08);
}
.archive-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(32,24,20,0) 45%,rgba(32,24,20,.66) 100%);
  pointer-events:none;
}
.archive-hero-photo figcaption{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:2;
  color:#ffffff;
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  align-items:end;
}
.archive-hero-photo figcaption span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#f2d48d;
  font-weight:800;
}
.archive-hero-photo figcaption b{
  max-width:31ch;
  font-family:var(--font-display);
  font-size:clamp(22px,2.4vw,36px);
  line-height:1.04;
  font-weight:500;
}
.archive-date-rail{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--archive-rule);
  background:var(--archive-paper-2);
}
.archive-date-rail div{
  min-height:112px;
  padding:20px 26px 18px;
  border-right:1px solid var(--archive-rule);
}
.archive-date-rail div:last-child{border-right:0}
.archive-date-rail span{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(35px,4vw,58px);
  line-height:.9;
  color:var(--archive-wine);
  font-weight:500;
  margin-bottom:16px;
}
.archive-date-rail b{
  display:block;
  max-width:23ch;
  color:#4d4037;
  font-size:14px;
  line-height:1.45;
  font-weight:600;
}

.archive-ministry-index{
  padding:92px 0 104px;
  background:var(--archive-paper-2);
  border-bottom:1px solid var(--archive-rule);
}
.archive-index-head{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:48px;
  align-items:start;
  margin-bottom:46px;
}
.archive-index-head h2{
  max-width:18ch;
  font-size:clamp(42px,5vw,70px);
  line-height:.98;
  font-weight:500;
}
.archive-index-list{
  border-top:1px solid var(--archive-rule);
}
.archive-index-row{
  display:grid;
  grid-template-columns:82px minmax(260px,.56fr) minmax(260px,1fr);
  gap:28px;
  align-items:center;
  color:var(--archive-ink);
  text-decoration:none;
  padding:25px 0;
  border-bottom:1px solid var(--archive-rule);
}
.archive-index-row span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--c) 75%,#201814 25%);
  color:var(--c-ink);
  font-size:13px;
  font-weight:800;
}
.archive-index-row b{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,44px);
  line-height:1;
  font-weight:500;
}
.archive-index-row p{
  margin:0;
  color:#62564c;
  font-size:17px;
  line-height:1.5;
  max-width:39ch;
}
.archive-index-row:hover{
  color:var(--c-ink);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c-tint) 55%,transparent),transparent 66%);
}

.archive-opening{
  padding:80px 0;
  background:#e7eeeb;
  border-bottom:1px solid var(--archive-rule);
}
.archive-opening-grid{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:40px 72px;
  align-items:start;
}
.archive-portrait,.archive-land{
  margin:0;
  position:relative;
}
.archive-portrait{
  align-self:start;
  border:1px solid var(--archive-rule);
  background:var(--archive-paper-2);
  padding:12px;
}
.archive-portrait img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  filter:saturate(.85) contrast(1.08);
}
.archive-portrait figcaption,.archive-land figcaption{
  margin-top:12px;
  color:var(--archive-muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}
.archive-opening-text{
  padding:0;
}
.archive-opening-text h2{
  max-width:none;
  font-size:48px;
  line-height:1.08;
  font-weight:500;
}
.archive-opening-text p{
  max-width:58ch;
  color:#584d44;
  font-size:18px;
  line-height:1.62;
}
.archive-opening-text h2 + p{margin-top:28px}
.archive-land{
  grid-column:1 / -1;
  border-top:1px solid var(--archive-rule);
  padding-top:22px;
}
.archive-land img{
  width:100%;
  aspect-ratio:16/5;
  object-fit:cover;
  filter:saturate(.9) contrast(1.04);
}

.pro-ministries,.home-highlights{
  background:var(--archive-paper-2);
}
.pro-section-head{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) minmax(260px,.62fr);
  gap:38px;
  align-items:end;
}
.pro-section-head .eyebrow{align-self:start}
.pro-section-head h2{
  max-width:12ch;
  font-size:clamp(44px,5.1vw,76px);
  line-height:.96;
  font-weight:500;
}
.pro-section-head p:not(.eyebrow){
  max-width:34ch;
  color:#62564c;
}
.pro-ministry-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  background:transparent;
  border:0;
}
.pro-ministry{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#ffffff;
  min-height:420px;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  align-content:end;
  position:relative;
  overflow:hidden;
}
.pro-ministry:focus-visible{outline:3px solid #214b67;outline-offset:3px}
.pro-ministry.t-earth img{object-position:center top}
.pro-ministry img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.08);
  transition:transform .9s ease,filter .9s ease;
}
.pro-ministry::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(23,14,9,.02) 20%,rgba(23,14,9,.78) 100%);
}
.pro-ministry span,.pro-ministry b,.pro-ministry p{
  position:relative;
  z-index:1;
  color:#ffffff;
  margin-left:28px;
  margin-right:28px;
}
.pro-ministry span{
  width:auto;
  height:auto;
  margin-bottom:14px;
  color:#f2d48d;
  border:0;
  font-size:12px;
  letter-spacing:.16em;
}
.pro-ministry b{
  max-width:18ch;
  font-size:42px;
  line-height:1.05;
  font-weight:500;
}
.pro-ministry p{
  max-width:28ch;
  margin-top:18px;
  margin-bottom:30px;
  color:#f8ead5;
  font-size:16px;
}
.pro-ministry:hover img{
  transform:scale(1.035);
  filter:saturate(.98) contrast(1.1);
}

.pro-impact{
  background:#163e38;
  color:#ffffff;
}
.pro-impact-grid{
  display:grid;
  grid-template-columns:.72fr 1.2fr;
  gap:54px;
  align-items:start;
}
.pro-impact h2{
  max-width:9ch;
  font-size:clamp(46px,5vw,72px);
  line-height:.96;
  font-weight:500;
}
.pro-impact p{color:#decfbd}
.pro-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(255,247,231,.22);
  border-left:1px solid rgba(255,247,231,.22);
}
.pro-stat{
  background:transparent;
  border:0;
  border-right:1px solid rgba(255,247,231,.22);
  border-bottom:1px solid rgba(255,247,231,.22);
  border-radius:0;
  padding:28px 24px 32px;
}
.pro-stat b{
  color:#f2d48d;
  font-size:clamp(46px,5vw,74px);
  line-height:.85;
}
.pro-stat span{color:#ffffff}
.impact-footnote{
  grid-column:2;
  margin-top:-28px;
  border-top:0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pro-impact .impact-footnote{color:#decfbd!important}

.home-programme{background:var(--archive-paper)}
.home-programme-card{
  border:1px solid var(--archive-rule);
  border-radius:0;
  box-shadow:none;
  background:var(--archive-paper-2);
  grid-template-columns:1.1fr .9fr;
}
.home-programme-media img{
  border-radius:0;
  min-height:620px;
  object-fit:cover;
}
.home-programme-copy h2,.pro-feature h2,.pro-cta h2{
  font-size:clamp(42px,4.8vw,70px);
  line-height:.97;
  font-weight:500;
}
.mini-facts span{
  border-radius:0;
  background:transparent;
  border:1px solid var(--archive-rule);
}

.pro-feature{
  background:#e7eeeb;
  border-top:1px solid var(--archive-rule);
  border-bottom:1px solid var(--archive-rule);
}
.pro-feature-grid{
  grid-template-columns:1.1fr .9fr;
  gap:54px;
}
.pro-feature figure{
  border:1px solid var(--archive-rule);
  padding:12px;
  background:var(--archive-paper-2);
}
.pro-feature figure img{
  border-radius:0;
  aspect-ratio:4/3;
  object-fit:cover;
}

.pro-quote{
  background:var(--archive-paper-2);
}
.home-quote-grid{
  border-top:1px solid var(--archive-rule);
  border-bottom:1px solid var(--archive-rule);
  padding-top:50px;
  padding-bottom:50px;
}
.quote-mark{
  color:var(--archive-wine);
  opacity:1;
}
.pro-quote blockquote{
  font-size:clamp(46px,5.8vw,84px);
  line-height:.94;
  font-weight:500;
}

.highlight-grid{
  background:transparent;
}
.highlight-card{
  border-radius:0;
  background:var(--archive-paper-2);
}
.highlight-card span{
  color:var(--archive-wine);
  letter-spacing:.14em;
}
.highlight-card b{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:0;
}
.highlight-card:first-child b{
  font-size:36px;
  line-height:1.08;
  max-width:none;
}

.pro-cta{
  background:#233e31;
  color:#ffffff;
}
.pro-cta p{color:#e6d5c2}
.pro-cta .pro-primary{
  background:#ffffff;
  color:#201814;
  border-color:#ffffff;
}
.pro-cta .pro-secondary.dark{
  background:transparent;
  color:#ffffff;
  border-color:rgba(255,247,231,.42);
}

.phead{
  background:var(--archive-paper);
  border-bottom:1px solid var(--archive-rule);
}
.phead .wrap{
  background:transparent;
  border-top:1px solid var(--archive-rule);
  border-bottom:1px solid var(--archive-rule);
  padding-top:62px;
  padding-bottom:62px;
}
.phead h1{
  font-size:clamp(52px,6.4vw,96px);
  line-height:.92;
  font-weight:500;
}
.phead p:not(.eyebrow){
  color:#5b4f45;
  font-size:19px;
}

footer{
  background:var(--archive-paper);
  color:var(--archive-ink);
  border-top:1px solid var(--archive-rule);
}
footer h4{color:var(--archive-ink)}
footer a{color:#574b42}
footer a:hover{color:var(--archive-wine)}
.fname{
  max-width:11ch;
  font-size:clamp(36px,4.2vw,60px);
  line-height:.96;
  color:var(--archive-ink);
}
.frule{
  border-top-color:var(--archive-rule);
  color:var(--archive-muted);
}

@media (max-width:1120px){
  .archive-hero-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    min-height:0;
  }
  .archive-hero-copy{
    min-height:0;
  }
  .archive-hero-photo{
    min-height:0;
    aspect-ratio:16/7;
    border-left:0;
    border-top:1px solid var(--archive-rule);
  }
  .archive-date-rail{
    grid-template-columns:repeat(2,1fr);
  }
  .archive-date-rail div:nth-child(2n){border-right:0}
  .archive-date-rail div:nth-child(-n+2){border-bottom:1px solid var(--archive-rule)}
  .archive-opening-grid{
    grid-template-columns:.55fr 1fr;
  }
  .archive-land{
    grid-column:1 / -1;
  }
  .pro-section-head,.pro-impact-grid{
    grid-template-columns:1fr;
  }
  .impact-footnote{grid-column:auto;margin-top:0}
  .pro-stat-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  .archive-hero-copy{
    min-height:0;
    padding:76px 26px 36px;
  }
  .archive-hero-copy::before{
    left:26px;
  }
  .archive-hero h1{
    font-size:56px;
  }
  .archive-hero-photo{
    min-height:0;
    aspect-ratio:4/3;
  }
  .archive-hero-photo figcaption{
    grid-template-columns:1fr;
    gap:8px;
  }
  .archive-index-head{
    grid-template-columns:1fr;
    gap:12px;
  }
  .archive-index-row{
    grid-template-columns:56px 1fr;
    gap:16px;
  }
  .archive-index-row p{
    grid-column:2;
  }
  .archive-opening-grid{
    grid-template-columns:1fr;
  }
  .archive-opening-text{
    padding:0;
  }
  .archive-portrait{
    max-width:330px;
  }
  .archive-land{
    grid-column:auto;
  }
  .archive-land img{
    aspect-ratio:4/3;
  }
  .pro-ministry-grid,.home-programme-card,.pro-feature-grid{
    grid-template-columns:1fr;
  }
  .pro-ministry{
    min-height:420px;
  }
  .home-programme-media img{
    min-height:360px;
  }
}

@media (max-width:620px){
  html{scroll-padding-top:84px}
  .bar{
    min-height:76px;
    padding-left:20px;
    padding-right:20px;
  }
  .mark img.emblem{width:36px;height:36px}
  .mark b{
    font-size:16px;
    max-width:none;
  }
  .archive-hero-grid{
    border-left:0;
    border-right:0;
  }
  .archive-hero-copy{
    min-height:0;
    padding:66px 22px 28px;
  }
  .archive-hero-copy::before{
    top:24px;
    left:22px;
    font-size:10px;
    letter-spacing:.14em;
  }
  .archive-kicker,.archive-small{
    font-size:10.5px;
    letter-spacing:.11em;
    max-width:30ch;
  }
  .archive-hero h1{
    font-size:42px;
    line-height:1.04;
    max-width:16ch;
  }
  .archive-lede{
    font-size:16px;
    line-height:1.55;
    max-width:31ch;
  }
  .archive-actions{
    display:grid;
    gap:14px;
    margin-top:28px;
  }
  .archive-hero-photo{
    min-height:0;
    aspect-ratio:1;
  }
  .archive-hero-photo img{
    object-position:56% top;
  }
  .archive-hero-photo figcaption{
    left:20px;
    right:20px;
    bottom:20px;
  }
  .archive-hero-photo figcaption b{
    font-size:23px;
  }
  .archive-date-rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .archive-date-rail div{
    min-height:0;
    border-right:1px solid var(--archive-rule);
    border-bottom:1px solid var(--archive-rule);
    padding:18px 22px;
  }
  .archive-date-rail div:nth-last-child(-n+2){border-bottom:0}
  .archive-date-rail span{
    font-size:42px;
    margin-bottom:10px;
  }
  .archive-ministry-index,.archive-opening{
    padding:68px 0;
  }
  .archive-opening-text h2{font-size:36px;line-height:1.1}
  .archive-index-head h2,
  .pro-section-head h2,.home-programme-copy h2,.pro-feature h2,.pro-cta h2,
  .pro-impact h2,.pro-quote blockquote{
    font-size:42px;
    line-height:1;
  }
  .archive-index-row{
    grid-template-columns:46px 1fr;
    padding:22px 0;
  }
  .archive-index-row span{
    width:38px;
    height:38px;
  }
  .archive-index-row b{
    font-size:28px;
  }
  .archive-index-row p{
    font-size:15.5px;
  }
  .archive-opening-text p{
    font-size:16px;
  }
  .pro-section-head{
    display:block;
  }
  .pro-ministry{
    min-height:420px;
  }
  .pro-ministry span,.pro-ministry b,.pro-ministry p{
    margin-left:22px;
    margin-right:22px;
  }
  .pro-ministry b{
    font-size:38px;
  }
  .pro-stat-grid{
    grid-template-columns:1fr;
  }
  .phead .wrap{
    border-top:0;
    padding:42px 24px;
  }
  .phead h1{
    font-size:43px;
    max-width:11ch;
  }
}

/* ===================================================================
   BRAND + NEWS/EVENTS — 2026-09-16
   Colours re-sampled from the client's actual logo artwork
   (PMMS Logo.png), replacing the earlier values sampled from a
   photograph of the Centre signage:
       navy   #052e59  12.2:1 on cream  — wordmark, primary ink
       blue   #216eaa   4.2:1           — fill
       gold   #efa733   1.9:1           — fill only, never text
       red    #aa1e33   6.7:1           — text-safe, Donate
   =================================================================== */
:root{
  --navy:#052e59;
  --brand-blue:#216eaa;
  --brand-gold:#efa733;
  --brand-red:#aa1e33;
}

/* masthead mark — now the real emblem, so it can carry more weight */
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark .emblem{flex:none;width:40px;height:40px}
.mark-text{display:block;line-height:1.15}
.mark-text b{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:600;
  letter-spacing:-.012em;color:var(--navy)}
.mark-text>span{display:block;font-family:var(--font-body);font-size:9.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-top:3px}

/* ---------- annual calendar (News & Events) ---------- */
.calendar-section{padding:84px 0}
.calendar{margin-top:40px;border-top:1px solid var(--border)}
.cal-row{display:grid;grid-template-columns:210px 1fr;gap:34px;padding:26px 0;
  border-bottom:1px solid var(--border);align-items:start;position:relative}
.cal-row::before{content:"";position:absolute;left:0;top:26px;width:3px;height:26px;
  background:var(--c,var(--brand-red))}
.cal-when{padding-left:18px}
.cal-date{display:block;font-family:var(--font-display);font-size:21px;font-weight:600;
  letter-spacing:-.015em;line-height:1.15;color:var(--navy)}
.cal-kind{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-top:7px}
.cal-body h3{font-size:19px;margin:0 0 8px;letter-spacing:-.01em}
.cal-body p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:66ch}
.cal-body a{color:var(--c-ink,var(--brand-red))}

@media (max-width:820px){
  .cal-row{grid-template-columns:1fr;gap:10px}
  .cal-when{padding-left:16px}
  .cal-row::before{height:20px;top:28px}
}
.calendar-section .lede{margin-top:18px}

/* ===================================================================
   Impact band rebuilt — 2026-09-16
   Was a two-column grid: the four stats were squeezed into the 1.2fr
   column (~640px, so ~160px each) which clipped the 74px numerals, and
   .impact-footnote was pinned to grid-column:2 with a negative margin,
   leaving a tall empty block of green under the heading. Now it stacks:
   heading row, then the stats across the full measure.
   =================================================================== */
.pro-impact-grid{display:block}
.impact-head{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:end;margin-bottom:52px}
.pro-impact h2{max-width:14ch;font-size:clamp(40px,4.4vw,62px)}
.impact-lede{max-width:44ch;padding-bottom:6px}
.pro-impact .pro-stat-grid{grid-template-columns:repeat(4,1fr)}
.pro-impact .pro-stat{padding:30px 28px 34px}
.pro-impact .pro-stat b{font-size:clamp(42px,4.2vw,60px)}
.pro-impact .impact-footnote{grid-column:auto;margin-top:24px;text-align:left}
@media (max-width:900px){
  .impact-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .impact-lede{padding-bottom:0}
  .pro-impact .pro-stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pro-impact .pro-stat-grid{grid-template-columns:1fr}
}

/* founder quote is now typographic (portrait de-duplicated) */
.home-quote-solo{max-width:62ch}
.home-quote-solo blockquote{margin:0}

/* "Visit the Healing Centre" was wrapping to three lines in a 45% column
   beside an oversized image; even the columns and cap the heading. */
.home-programme-card{grid-template-columns:1fr 1fr}
.home-programme-card h2{font-size:clamp(30px,3.2vw,42px);max-width:16ch}
@media (max-width:900px){.home-programme-card{grid-template-columns:1fr}}
/* explicit, symmetric rules on the impact cells */
.pro-impact .pro-stat-grid{border-right:1px solid rgba(255,247,231,.22)}
.pro-impact .pro-stat{border-bottom:1px solid rgba(255,247,231,.22)}

/* ===================================================================
   Mobile header fix — 2026-09-16
   The masthead markup changed to .mark-text when the real logo went in,
   and the new `.mark-text b` rule (same specificity as the existing
   `.mark b`, but later in the file) cancelled the mobile shrink. The
   wordmark stayed at 16.5px, overflowed the bar at 390px and pushed the
   menu button off-screen — leaving mobile with no navigation at all.
   =================================================================== */
@media (max-width:760px){
  .bar{gap:12px}
  .mark{min-width:0;flex:1 1 auto}
  .mark .emblem{width:34px;height:34px}
  .mark-text{min-width:0}
  .mark-text b{font-size:14.5px;line-height:1.12}
  .mark-text>span{font-size:8.5px;letter-spacing:.12em}
  .menu-btn{flex:0 0 auto}
}
@media (max-width:480px){
  .mark-text b{font-size:13px}
  .mark-text>span{display:none}   /* subline is unreadable at this size */
  .mark .emblem{width:30px;height:30px}
}

/* ---------- Donate page: How to give ---------- */
.give-outcomes{padding:84px 0}
.give-outcomes .amt .rs{font-family:var(--font-body);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;min-width:104px;padding-top:4px;color:var(--c-ink)}
.how-to-give{padding:84px 0;background:var(--raised);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.give-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:40px}
.give-panel{background:var(--surface);padding:30px 28px 32px}
.give-panel h3{font-size:18px;margin-bottom:14px}
.give-pending{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--intellect-ink);padding:10px 12px;background:var(--intellect-tint);
  border-left:3px solid var(--intellect)}
.give-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.give-panel .addr{font-size:15.5px;margin:0 0 12px}
.other-ways{padding:84px 0}
@media (max-width:900px){.give-grid{grid-template-columns:1fr}}

/* News items with no photograph were rendering an empty tinted block in the
   image column, which read as a missing image. They now collapse to a single
   column with the ministry colour as a rule — an intentional text treatment.
   The selector has to out-rank `.posts .post:not(:first-child)`, which sets a
   150px image column; without that specificity the text lands in the 150px
   track and wraps every two words. */
.posts .post.is-text:not(:first-child){grid-template-columns:1fr;padding:22px 22px 22px 30px;
  position:relative}
.posts .post.is-text:not(:first-child)::before{content:"";position:absolute;left:22px;
  top:26px;bottom:26px;width:3px;background:var(--c)}
.posts .post.is-text:not(:first-child) p{max-width:60ch}
@media (max-width:760px){
  .posts .post.is-text:not(:first-child){padding-left:26px}
  .posts .post.is-text:not(:first-child)::before{left:18px}
}

/* ===================================================================
   Masthead: the client's actual logo — 2026-09-16
   Two fixes here.
   1) A global `img{background:#e9dfd3}` (a loading tint for photographs)
      was painting a beige box behind every transparent PNG, including the
      logo. Transparent brand assets are now exempt.
   2) The masthead had been showing a cropped emblem plus an HTML-text
      rebuild of the wordmark. It now uses the supplied lockup itself, and
      falls back to the emblem alone where the full lockup will not fit.
   =================================================================== */
img.brandmark, img.brandmark-sm, img.emblem, .mark img, .symbol-mark img, .site-preloader__emblem, .flogo-mark, .flogo img{background:transparent !important}

.mark{display:flex;align-items:center;gap:0;text-decoration:none;min-width:0}
.mark .brandmark{width:auto;height:46px;max-width:100%;object-fit:contain;display:block}
.mark .brandmark-sm{display:none;width:38px;height:38px;object-fit:contain}
@media (max-width:820px){
  .mark .brandmark{height:38px}
}
@media (max-width:560px){
  .mark .brandmark{display:none}
  .mark .brandmark-sm{display:block}
}

/* Contact: three email addresses, grouped by what they are for. The two
   Healing Centre addresses come from "Courses offered- website.docx". */
.addr .inline-link{display:inline-block;margin-top:4px}
.email-note{display:block;font-size:12.5px;color:var(--muted);margin:4px 0 12px;
  letter-spacing:.01em}
.email-note:last-child{margin-bottom:0}

/* ===================================================================
   Brand lockup — 2026-09-16 (rebuilt)
   The supplied logo sets the emblem at 1.35x the height of the text
   block, so at a 46px masthead the wordmark cap height fell to 13px and
   the BODY-MIND-SPIRIT line to about 4px: unreadable. assets/brand-lockup.png
   recomposes the same two elements at a 1.11 ratio, so the wordmark can
   carry its own weight. Header 52px, footer 72px — the footer has the room.
   =================================================================== */
.mark .brandmark{width:auto;height:48px;max-width:100%;object-fit:contain;display:block}
.mark .brandmark-sm{display:none;width:40px;height:40px;object-fit:contain}
@media (max-width:1080px){ .mark .brandmark{height:46px} }
@media (max-width:820px){  .mark .brandmark{height:40px} }
@media (max-width:560px){
  .mark .brandmark{display:none}
  .mark .brandmark-sm{display:block}
}

.flogo{display:inline-block;text-decoration:none;margin-bottom:16px}
.flogo img{width:auto;height:72px;max-width:100%;object-fit:contain;display:block;
  background:transparent}
@media (max-width:820px){ .flogo img{height:58px} }
@media (max-width:560px){ .flogo img{height:48px} }
footer .flogo{display:inline-flex;align-items:center;gap:12px;max-width:100%;color:#fff}
footer .flogo .flogo-mark{width:72px;height:72px;flex:none}
footer .flogo-type{display:flex;min-width:0;flex-direction:column;gap:5px}
footer .flogo-type strong{font-family:Georgia,serif;font-size:21px;font-weight:600;
  line-height:1.06;text-transform:uppercase;color:#fff}
footer .flogo-type small{padding-top:5px;border-top:1px solid #d5a956;
  color:#e3c588;font-size:9px;font-weight:600;line-height:1.35;text-transform:uppercase}
@media (max-width:560px){
  footer .flogo{gap:9px}
  footer .flogo .flogo-mark{width:52px;height:52px}
  footer .flogo-type strong{font-size:16px}
  footer .flogo-type small{font-size:8px}
}

/* Keep the supplied name visible on phones, including 320px screens. */
@media (max-width:560px){
  .mark .brandmark{display:block;height:34px}
  .mark .brandmark-sm{display:none}
}

/* ===================================================================
   Ministry cards — 2026-09-17
   `.prog .ic{margin-bottom:auto}` bottom-aligned everything under the
   icon, so a card with a three-line description put its heading ~12px
   higher than one with four. Across a row of four that reads as a
   misaligned grid. Headings now sit on a common line and the arrow is
   the only thing pinned to the bottom.
   =================================================================== */
.prog{display:flex;flex-direction:column}
.prog .ic{margin-bottom:20px;opacity:.95}
.prog h3{margin:0 0 9px;font-size:19px;line-height:1.22;color:#fff}
.prog p{margin:0;font-size:14.5px;line-height:1.52}
.prog .go{margin-top:auto;flex:none}

/* ===================================================================
   Section bands restored — 2026-09-17
   `.tinted` sections were being flattened twice: once to #f4f7f6 and
   then to `background-color:transparent` by a blanket `section` rule.
   All five bands across about / work / programmes / donate rendered as
   plain ground, which is a large part of why those pages read as one
   undifferentiated column. Restored as soft washes — much lighter than
   the --c-tint swatches, which are pitched for small chips and would
   shout at full-section scale on cream.
   =================================================================== */
section.tinted.t-earth     {background:#eaf4ee}
section.tinted.t-intellect {background:#fbf3e2}
section.tinted.t-spirit    {background:#eaf1f9}
section.tinted.t-emotion   {background:#fbeef0}

/* Vision / Mission read as a mismatched pair: a display-size heading on
   the left against body text on the right, with the right half mostly
   empty. Now a two-column statement with a rule between them. */
.vm-pair{display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch}
.vm-pair>div{padding:6px 0}
.vm-pair>div:first-child{padding-right:54px}
.vm-pair>div:last-child{padding-left:54px;border-left:1px solid rgba(31,27,23,.13)}
.vm-pair h2{font-size:clamp(26px,2.9vw,36px);line-height:1.18;margin:0}
.vm-pair .vm-body{font-size:17.5px;line-height:1.68;color:#4f4740;margin:0}
.vm-pair .eyebrow{margin-bottom:16px}
@media (max-width:860px){
  .vm-pair{grid-template-columns:1fr;gap:34px}
  .vm-pair>div:first-child{padding-right:0}
  .vm-pair>div:last-child{padding-left:0;border-left:0;padding-top:30px;
    border-top:1px solid rgba(31,27,23,.13)}
}

/* The founder quote was confined to ~527px of a 1440px page: `max-width:62ch`
   sat on the wrapper, whose font-size is body size, so `ch` resolved against
   17px rather than against the 83px quote. The measure belongs on the
   blockquote itself, in its own type size. */
.home-quote-solo{max-width:none}
.home-quote-solo blockquote{max-width:19ch;font-size:clamp(40px,5vw,70px);line-height:1.02}
.home-quote-solo cite{margin-top:26px}

/* The Healing Centre card forces a 620px-tall crop on a 1200x675 landscape
   frame, which cut straight through the client's face at the right edge.
   Anchoring the crop left keeps the practitioner and the treatment in frame
   and takes the client out of it — better composition and better privacy. */
.home-programme-media img{object-position:22% 50%}

/* The "Our four ministries" cards sat directly above the four full ministry
   articles and repeated their copy almost word for word. They were also the
   only in-page navigation, so rather than delete them they are now a compact
   jump strip: icon and name, no description. */
.ministry-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mj{display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 14px;
  border:1px solid var(--border);border-radius:999px;background:#fff;text-decoration:none;
  color:var(--fg);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  transition:border-color .15s ease,transform .15s ease}
.mj svg{color:var(--c);flex:none}
.mj:hover{border-color:var(--c);transform:translateY(-2px)}
@media (max-width:620px){.mj{font-size:13.5px;padding:9px 14px 9px 12px}}


/* ===================================================================
   HOMEPAGE — Karuna-derived layout, 2026-09-17
   Structure adapted from the Karuna Framer template at the client's
   request; all copy, photography and colour are PMMSS's own. Every
   class is `k-` prefixed because the concept used generic names
   (.hero, .wrap, .eyebrow) that already mean something else here.
   Tokens below are scoped to the homepage only.
   =================================================================== */
/* Promoted from .k-home so the k- components work on every page, not just
   the homepage. --navy is intentionally omitted: it is already defined
   site-wide with the same value. */
:root{
  --navy-deep:#04243f;
  --gold:#efa733;
  --gold-ink:#8a5f08;
  --red:#aa1e33;
  --red-bright:#c8253f;
  --green:#1fa363;
  --green-wash:#e8f3ec;
  --blue:#216eaa;
  --ink:#16181d;
  --body:#4d5560;
  --line:#e4e6ea;
  --paper:#ffffff;
  --paper-2:#f7f8f9;
  --disp:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}



*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.k-wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* ---------- nav over hero ---------- */
.k-nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  gap:34px;padding:22px 40px;max-width:1200px;margin:0 auto}
.k-nav img{height:42px;width:auto;filter:brightness(0) invert(1)}
.k-nav .k-links{display:flex;gap:28px;margin-left:auto}
.k-nav .k-links a{color:rgba(255,255,255,.9);text-decoration:none;font-size:14.5px;font-weight:500}
.k-nav .k-links a:hover{color:#fff}
.k-nav .k-btn{border:1px solid rgba(255,255,255,.55);color:#fff;padding:10px 20px;border-radius:99px;
  text-decoration:none;font-size:14px;font-weight:600}
.k-nav .k-btn:hover{background:#fff;color:var(--navy)}

/* ---------- hero ---------- */
.k-hero{position:relative;min-height:740px;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink)}
.k-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.k-hero::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(9,14,20,.88) 0%,rgba(9,14,20,.55) 46%,rgba(9,14,20,.30) 100%),
    linear-gradient(180deg,rgba(9,14,20,.55) 0%,rgba(9,14,20,0) 190px)}
.k-hero-in{position:relative;z-index:5;width:100%;max-width:1200px;margin:0 auto;
  padding:0 40px 72px;display:grid;grid-template-columns:1fr 340px;gap:50px;align-items:end}
.k-pill{display:inline-block;background:var(--gold);color:#3a2a06;font-size:11.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:8px 16px;border-radius:99px;margin-bottom:22px}
.k-hero h1{font-family:var(--disp);font-size:clamp(44px,5.6vw,76px);line-height:1.02;font-weight:600;
  letter-spacing:-.025em;color:#fff;margin:0;max-width:15ch}
.k-hero .k-sub{color:rgba(255,255,255,.84);font-size:17.5px;margin:20px 0 0;max-width:46ch}
.k-trust{display:flex;flex-direction:column;gap:10px;align-items:flex-end;margin-bottom:16px}
.k-tp{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:13px;font-weight:500;padding:9px 16px;border-radius:99px;
  display:inline-flex;align-items:center;gap:9px}
.k-tp i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* floating card */
.k-fcard{background:#fff;border-radius:18px;padding:24px;box-shadow:0 26px 60px rgba(0,0,0,.30)}
.k-fcard .k-top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#7a828d;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.k-fcard .k-top img{height:24px;width:auto}
.k-fcard .k-top span{margin-left:auto}
.k-fcard .k-em{width:42px;height:42px;border-radius:50%;background:var(--green-wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.k-fcard h3{font-family:var(--disp);font-size:22px;line-height:1.16;margin:0 0 8px;font-weight:600}
.k-fcard p{font-size:14px;color:var(--body);margin:0 0 18px}
.k-fcard .k-cta{display:block;text-align:center;background:var(--red);color:#fff;padding:13px;
  border-radius:9px;text-decoration:none;font-weight:600;font-size:14.5px}
.k-fcard .k-cta:hover{background:var(--red-bright)}

/* ---------- centred statement ---------- */
.k-statement{padding:104px 0 92px;text-align:center}
.k-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--red);margin:0 0 22px}
.k-statement p:not(.k-eyebrow){font-family:var(--disp);font-size:clamp(23px,2.5vw,33px);
  line-height:1.42;font-weight:400;max-width:24ch;margin:0 auto;letter-spacing:-.012em}
.k-statement p em{font-style:italic;color:var(--red)}

/* ---------- stat blocks ---------- */
.k-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding:0 0 100px}
.k-stat{position:relative;padding:26px 0 0 26px}
.k-stat::before{content:"";position:absolute;left:0;top:0;width:86px;height:86px;
  background:var(--sw,var(--green-wash));border-radius:4px;z-index:0}
.k-stat b,.k-stat span,.k-stat .k-rule{position:relative;z-index:2}
.k-stat b{display:block;font-family:var(--disp);font-size:46px;font-weight:700;line-height:1;
  letter-spacing:-.03em}
.k-stat span{display:block;font-size:14px;color:var(--body);margin-top:10px;line-height:1.45;
  max-width:22ch}
.k-stat .k-rule{display:block;height:3px;width:78%;background:var(--sc,var(--green));margin-top:22px;
  border-radius:2px}

/* ---------- story: asymmetric photos ---------- */
.k-story{padding:0 0 104px}
.k-story-ph{display:grid;grid-template-columns:1.22fr 1fr;gap:22px;margin-bottom:56px}
.k-story-ph figure{margin:0;position:relative;border-radius:16px;overflow:hidden}
.k-story-ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.k-story-ph figure:nth-child(even) img{aspect-ratio:3/3.4}
.k-story-tx{display:grid;grid-template-columns:.95fr 1fr;gap:60px;align-items:start}
.k-story-tx h2{font-family:var(--disp);font-size:clamp(30px,3.4vw,46px);line-height:1.08;
  font-weight:600;margin:0;letter-spacing:-.02em}
.k-story-tx p{color:var(--body);font-size:16px;margin:0 0 15px}
.k-story-tx p:last-child{margin-bottom:0}

/* ---------- ministries on dark ---------- */
.k-dark{background:var(--navy);color:#fff;padding:96px 0 104px}
.k-dark .k-eyebrow{color:var(--gold)}
.k-dark h2{font-family:var(--disp);font-size:clamp(30px,3.4vw,46px);line-height:1.1;font-weight:600;
  margin:0 0 14px;letter-spacing:-.02em;max-width:18ch}
.k-dark .k-lede{color:rgba(255,255,255,.74);font-size:17px;max-width:58ch;margin:0 0 50px}
.k-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.k-mcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  overflow:hidden;text-decoration:none;color:#fff;display:flex;flex-direction:column;
  transition:transform .18s ease,border-color .18s ease}
.k-mcard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3)}
.k-mcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.k-mcard .k-bd{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.k-mcard h3{font-family:var(--disp);font-size:19px;font-weight:600;margin:0 0 8px;line-height:1.2}
.k-mcard p{font-size:13.8px;color:rgba(255,255,255,.72);margin:0 0 18px;line-height:1.5}
.k-mcard .k-fact{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--k,var(--gold));display:flex;align-items:center;gap:7px}

/* ---------- highlighted number ---------- */
.k-marker{padding:104px 0;text-align:center;background:var(--paper-2)}
.k-marker .k-big{font-family:var(--disp);font-size:clamp(36px,4.6vw,60px);font-weight:700;
  letter-spacing:-.03em;margin:0 0 20px;line-height:1.1}
.k-marker .k-hl{background:var(--gold);color:#3a2a06;display:inline-block;line-height:1;
  padding:.12em .2em .16em;border-radius:var(--r-sm);vertical-align:baseline}
.k-marker p{font-size:19px;color:var(--body);max-width:44ch;margin:0 auto 30px;line-height:1.55}
.k-marker a{display:inline-block;background:var(--red);color:#fff;padding:14px 30px;border-radius:9px;
  text-decoration:none;font-weight:600;font-size:15px}

/* ---------- steps ---------- */
.k-steps{padding:100px 0}
.k-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px}
.k-step{position:relative;padding-top:8px}
.k-step h3,.k-step p{position:relative;z-index:2}
.k-step h3{font-family:var(--disp);font-size:21px;font-weight:600;margin:0 0 9px}
.k-step p{color:var(--body);font-size:15px;margin:0}
.k-step .k-bar{display:block;width:46px;height:3px;background:var(--sc,var(--red));
  border-radius:2px;margin-bottom:18px}

/* ---------- closing band ---------- */
.k-close{background:var(--navy-deep);color:#fff;padding:104px 0;text-align:center}
.k-close .k-eyebrow{color:var(--gold)}
.k-close h2{font-family:var(--disp);font-size:clamp(32px,4vw,54px);line-height:1.08;font-weight:600;
  margin:0 auto 18px;max-width:17ch;letter-spacing:-.022em}
.k-close p{color:rgba(255,255,255,.76);max-width:52ch;margin:0 auto 32px;font-size:17px}
.k-close .k-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.k-close .k-a1{background:var(--gold);color:#3a2a06;padding:14px 30px;border-radius:9px;
  text-decoration:none;font-weight:700;font-size:15px}
.k-close .k-a2{border:1px solid rgba(255,255,255,.4);color:#fff;padding:14px 30px;border-radius:9px;
  text-decoration:none;font-weight:600;font-size:15px}

@media (max-width:1000px){
  .k-hero-in{grid-template-columns:1fr;gap:30px}
  .k-trust{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .k-stats,.k-mgrid{grid-template-columns:repeat(2,1fr)}
  .k-story-ph,.k-story-tx,.k-steps-grid{grid-template-columns:1fr;gap:28px}
  .k-nav .k-links{display:none}
}
@media (max-width:620px){
  .k-wrap,.k-nav,.k-hero-in,.k-ribbon{padding-left:20px;padding-right:20px}
  .k-stats,.k-mgrid{grid-template-columns:1fr}
}


/* ===================================================================
   REVISION 1 — inner-page headers brought into line with the homepage
   The homepage was rebuilt with a pill eyebrow, display headline and a
   generous opening; the inner pages still opened with the older boxed
   `.phead`. Same language now, at a calmer scale so the homepage keeps
   the emphasis.
   =================================================================== */
/* The ministry --c-tint values are pitched for small chips; at full-section
   scale they read as a coloured alert rather than a page opening. The header
   now sits on the same quiet ground as the rest of the page and takes its
   ministry colour from the pill and a single top rule instead. */
.k-phead{padding:70px 0 62px;background:#f7f8f9;border-radius:0;
  border-top:3px solid var(--k-pill,#efa733);border-bottom:1px solid var(--border)}
.k-phead .wrap{max-width:1200px;padding:0 40px}
/* The .wrap inside .k-phead is a grid container, and grid items are blockified
   by spec — `display:inline-block` was silently ignored and the pill stretched
   to the full 440px column. `justify-self:start` is what actually shrinks a
   grid item to its content. */
.k-phead .eyebrow{display:inline-block;justify-self:start;width:fit-content;
  background:var(--k-pill,#efa733);color:#3a2a06;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 16px;border-radius:99px;margin:0 0 22px}
.k-phead .eyebrow::before{display:none}
.k-phead h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(36px,4.6vw,60px);
  line-height:1.04;font-weight:600;letter-spacing:-.025em;margin:0;max-width:17ch;color:#16181d}
.k-phead>.wrap>p:not(.eyebrow){margin:20px 0 0;font-size:18px;line-height:1.6;color:#4d5560;
  max-width:56ch}
@media (max-width:620px){
  .k-phead{padding:52px 0 46px}
  .k-phead .wrap{padding:0 20px}
}
.k-phead .eyebrow{color:var(--k-pill-ink,#3a2a06)}

/* ===================================================================
   REVISION 2 — motion layer, 2026-09-17
   Built after analysing what the reference site actually does: no 3D,
   no canvas, no keyframes. It fades elements up as they enter, on
   cubic-bezier(0.44,0,0.56,1). Same curve here, written natively so it
   works in a static page and can be switched off entirely.
   =================================================================== */
:root{--ease-k:cubic-bezier(.44,0,.56,1)}

/* The hidden state is gated on .js-rise, which motion.js only puts on <html>
   once it has confirmed IntersectionObserver exists and motion is wanted. No
   JS, a JS error, or an old browser therefore leaves every element visible
   rather than stranded at opacity:0. */
.js-rise [data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity .62s var(--ease-k),transform .62s var(--ease-k)}
.js-rise [data-rise].is-in{opacity:1;transform:none}
[data-rise-delay="1"]{transition-delay:.07s}
[data-rise-delay="2"]{transition-delay:.14s}
[data-rise-delay="3"]{transition-delay:.21s}
[data-rise-delay="4"]{transition-delay:.28s}

/* hover lifts use the same curve at the reference's 0.4s */
.k-mcard,.k-stat,.k-fcard,.mj,.prog,.highlight-card,.inner-visual-card{
  transition:transform .4s var(--ease-k),box-shadow .4s var(--ease-k),
             border-color .4s var(--ease-k)}
.k-stat:hover{transform:translateY(-3px)}

/* images settle rather than snap */
.k-mcard img,.k-story-ph img{transition:transform .7s var(--ease-k)}
.k-mcard:hover img{transform:scale(1.045)}

/* anyone who has asked for less motion gets none of it */
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ===================================================================
   REVISION 4 — hero refined against the full-resolution reference
   Closer on scale, weight and the pill. The headline typeface is left
   switchable: .k-hero.is-sans uses a bold grotesk like the reference,
   the default keeps Fraunces. See the note in CLAUDE.md before choosing.
   =================================================================== */
.k-hero h1{font-size:clamp(46px,6.6vw,92px);line-height:.98;letter-spacing:-.03em;max-width:13ch}
.k-hero .k-sub{font-size:19px;max-width:44ch;margin-top:24px;color:rgba(255,255,255,.88)}

/* Headline typeface decided 2026-09-17: Fraunces serif stays. The heavy
   grotesk alternative was built and compared side by side and rejected —
   the logo is a serif wordmark, and a bold sans directly beneath it fights
   the lockup. Do not reintroduce it without changing the wordmark too. */

/* pill: larger and more letterspaced than before */
.k-pill{font-size:13px;letter-spacing:.16em;padding:11px 22px;font-weight:700}

/* trust pills sit closer to the reference — darker glass, amber dot */
.k-tp{background:rgba(22,18,14,.42);border:1px solid rgba(255,255,255,.26);
  font-size:14px;padding:11px 20px;font-weight:500}
.k-tp i{width:8px;height:8px;background:var(--gold)}

/* donation card proportions */
.k-fcard{padding:28px;border-radius:20px}
.k-fcard h3{font-size:24px;line-height:1.14}
.k-fcard .k-cta{padding:15px;font-size:15px;border-radius:10px}
.k-fcard .k-em{width:46px;height:46px}

/* On a phone the inner-visual rows scroll sideways inside their own container
   (verified: no page-level overflow). But a card sliced by the viewport edge
   reads as broken rather than scrollable, so the row now fades at the right
   edge and shows a slim scrollbar as an affordance. */
@media (max-width:760px){
  .inner-visual-grid{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    scrollbar-width:thin;padding-bottom:10px}
  .inner-visual-grid::-webkit-scrollbar{height:4px}
  .inner-visual-grid::-webkit-scrollbar-thumb{background:rgba(31,27,23,.22);border-radius:99px}
}
/* footer headings are h2 inside the footer landmark (was h4, which skipped a
   level on every page); keep the small-label look they had */
footer h2.fh{font-family:var(--font-body);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--fg);margin:0 0 12px}
.k-fcard-title{font-family:var(--disp);font-size:24px;line-height:1.14;margin:0 0 8px;
  font-weight:600;color:var(--ink)}

/* ===================================================================
   Dead vertical space — 2026-09-17
   Measured: about.html carried 7 blank bands over 180px, contact and
   donate 3 each. Two causes, both fixed here.
   1. `.split` grids are top-aligned, so where the text column runs
      longer than the photo the right column ends in a tall void.
      Stretching the figure to fill its column removes it.
   2. 92px of section padding top AND bottom put 184px between every
      pair of sections before any internal margin was counted.
   =================================================================== */
.split,.split.even{align-items:stretch}
.split figure.plain,.split.even figure.plain{margin:0;display:flex;flex-direction:column}
.split figure.plain img,.split.even figure.plain img{
  flex:1 1 auto;width:100%;height:100%;min-height:260px;object-fit:cover}
.split figure.plain figcaption{flex:0 0 auto}

section{padding:76px 0}
section.tight{padding:58px 0}
.k-phead{padding:64px 0 56px}

@media (max-width:860px){
  .split,.split.even{align-items:start}
  .split figure.plain img,.split.even figure.plain img{min-height:0;height:auto}
  section{padding:54px 0}
  section.tight{padding:44px 0}
}

/* The k- homepage sections were written at ~100px top and bottom, which the
   earlier `section` fix did not reach. Brought into line with the 76px rhythm
   now used everywhere else, so section joins stop reading as dead bands. */
.k-statement{padding:82px 0 72px}
.k-stats{padding:0 0 78px}
.k-story{padding:0 0 80px}
.k-dark{padding:78px 0 82px}
.k-marker{padding:80px 0}
.k-steps{padding:78px 0}
.k-close{padding:82px 0}
.k-steps .k-steps-grid{margin-top:42px}
.k-story .k-story-ph{margin-bottom:44px}
@media (max-width:860px){
  .k-statement,.k-dark,.k-marker,.k-steps,.k-close{padding:54px 0}
  .k-stats,.k-story{padding-bottom:54px}
}

/* Hero is the community itself. Crop compared at 34/48/64% against the rendered
   page: 64% buried the sisters behind the headline, 34% cut the front row off.
   48% keeps the group legible with air above the headline.
   The scrim is also asymmetric on purpose — heavy enough on the left to carry
   white text over a bright sari, much lighter on the right so the faces are not
   flattened into the background. */
.k-hero>img{object-position:center 48%}
@media (max-width:860px){.k-hero>img{object-position:center 52%}}
.k-hero::after{background:
  linear-gradient(100deg,rgba(9,14,20,.90) 0%,rgba(9,14,20,.72) 28%,
                         rgba(9,14,20,.38) 56%,rgba(9,14,20,.20) 100%),
  linear-gradient(180deg,rgba(9,14,20,.52) 0%,rgba(9,14,20,0) 200px)}

/* ===================================================================
   ROUND 2 — about.html composition
   =================================================================== */

/* The philosophy band was #ffc233 — a saturated gold brighter than the brand
   gold (#efa733), used on one page only, and by some margin the loudest thing
   on the site. Brought into the same wash family as the other section bands so
   it reads as part of the system rather than a one-off. The statement keeps its
   emphasis through type and a gold rule instead of a shouting field. */
.creed{background:#fbf3e2;color:var(--ink);position:relative}
.creed::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.creed p{color:#5a5248}
.creed .eyebrow{color:var(--intellect-ink)}
.creed .eyebrow::before{background:var(--gold)}
.creed blockquote{color:var(--ink)}

/* Dead bands on about.html were all the same shape: a card grid ending, then a
   full section's padding before the next band began. Where a grid is the last
   thing in a section, its own bottom margin is redundant. */
.vals,.meanings,.track{margin-bottom:0}
section:has(> .wrap > .vals){padding-bottom:58px}
section:has(> .wrap > .track){padding-bottom:54px}
.creed{padding:70px 0}
.symbol{padding:4px 0}

/* The donate card was covering several sisters. The image is shown full-width
   at desktop, so the group's horizontal position is fixed and cropping cannot
   help — the fix is vertical room. A taller hero shows more of the frame and
   lets the card and pills sit lower, clear of the faces. */
.k-hero{min-height:min(88vh,840px)}
.k-hero-in{padding-bottom:56px;align-items:end}
.k-trust{margin-bottom:14px}
@media (max-width:1000px){.k-hero{min-height:auto}}

/* donate.html carried the same shape as about: a grid ending, then a full
   section's padding before the next band opened. */
.give-outcomes{padding-bottom:56px}
.how-to-give{padding:64px 0}
.other-ways{padding:64px 0 70px}
.giving,.give-grid,.ways{margin-bottom:0}

/* ===================================================================
   Section joins
   Bands were meeting the cream ground as raw colour changes, which reads
   as blocks stacked rather than one composition. Each tinted band now
   opens on a hairline in its own colour, so the edge is deliberate.
   =================================================================== */
section.tinted,.how-to-give,.k-marker{position:relative}
section.tinted::before,.how-to-give::before,.k-marker::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--c,var(--gold));opacity:.5}
section.tinted.t-earth::before{background:var(--earth)}
section.tinted.t-spirit::before{background:var(--spirit)}
section.tinted.t-intellect::before{background:var(--intellect)}
section.tinted.t-emotion::before{background:var(--emotion)}
.how-to-give::before{background:var(--emotion)}
.k-marker::before{background:var(--gold)}

/* The last two genuine dead-space instances, both the same cause: a section's
   bottom padding landing on top of a bordered panel that carries its own
   internal padding, so the gap was counted twice. */
.inner-visual{padding-bottom:36px}
.inner-visual + section{padding-top:44px}
section:has(> .wrap > .vals) + .creed{padding-top:60px}

/* work.html: the stat row and the jump strip are two halves of the same idea —
   the figures, then where to read about them. They were separated by two full
   section paddings with nothing between. */
.k-stats + section,section:has(> .wrap > .k-stats) + section{padding-top:46px}
.k-stats{padding-bottom:52px}

/* ===================================================================
   ROUND 3 — Typography
   Measured on the rendered pages, not estimated from the CSS.
   Comfortable reading is 50-75 characters per line; these were far over:
     .provenance  181ch   (full container width, small type)
     .course p    149ch   (cards span the full measure)
     .cal-body p   83ch   (borderline)
   =================================================================== */
.provenance{max-width:74ch;margin-left:auto;margin-right:auto}
.course p{max-width:78ch}
.cal-body p{max-width:70ch}
.k-step p,.w p,.amt p,.give-note{max-width:60ch}
.post p{max-width:68ch}

/* h3 had fallen to 15-16px on contact and about — below the body size, so a
   heading read as less important than the text under it. */
.reach h3,.symbol h3,.mean b{font-size:17px;line-height:1.3}
h3{font-size:clamp(17px,1.35vw,21px)}

/* Long ministry headings were breaking awkwardly mid-phrase. */
h1,h2,.k-hero h1,.detail h2{text-wrap:balance}
.lede,.k-sub{text-wrap:pretty}

/* ===================================================================
   ROUND 7 — Accessibility
   Every page lacked a skip link, so a keyboard user had to tab the whole
   masthead on each one. Visible only on focus.
   =================================================================== */
.skip{position:absolute;left:12px;top:-56px;z-index:200;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 6px 6px;font-weight:600;font-size:14px;
  text-decoration:none;transition:top .18s var(--ease-k,ease)}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--spirit);outline-offset:3px;border-radius:2px}

/* ===================================================================
   ROUND 4 — Design system consistency
   Audit of the stylesheet found 20 distinct border-radius values, 26
   distinct box-shadows and 11 transition durations. That is not a system,
   it is accumulation from successive passes. Collapsed to a small scale.
   Values are applied here rather than rewriting every earlier rule, so
   nothing regresses; these win by being last.
   =================================================================== */
:root{
  --r-sm:4px;      /* chips, small marks        */
  --r-md:10px;     /* buttons, panels           */
  --r-lg:18px;     /* cards, media              */
  --r-pill:999px;  /* pills only                */
  --sh-1:0 1px 2px rgba(31,27,23,.05);
  --sh-2:0 10px 26px rgba(31,27,23,.08);
  --sh-3:0 22px 48px rgba(31,27,23,.12);
  --t-fast:.18s; --t-base:.4s; --t-slow:.62s;
}
.k-mcard,.k-fcard,.inner-visual-card,.highlight-card,.home-programme-card,
.post img,.detail img,figure.plain img,.k-story-ph figure,.k-sc{border-radius:var(--r-lg)}
.w,.amt,.course,.give-panel,.k-stat,.v,.bcard,.story,.open{border-radius:var(--r-md)}
.pill,.k-pill,.mj,.tp,.k-tp{border-radius:var(--r-pill)}
.give,.nav-donate{border-radius:7px}
.k-mcard,.inner-visual-card,.highlight-card,.home-programme-card{box-shadow:var(--sh-2)}
.k-fcard{box-shadow:var(--sh-3)}
.w,.amt,.course,.give-panel,.k-stat,.v,.bcard{box-shadow:var(--sh-1)}

/* ===================================================================
   PRODUCTION PASS — visually-hidden helper and the Contact "Finding us"
   panel. Reuses the existing hairline-panel language (white ground,
   1px rgba(7,63,61,.14) rule, square corners, serif display heading)
   rather than introducing a new card treatment.
   =================================================================== */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.findus-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start;
  background:#fff;border:1px solid rgba(7,63,61,.14);padding:42px}
.findus-panel h2{font-size:clamp(31px,3.8vw,50px);line-height:1.06;letter-spacing:0;max-width:11ch}
.findus-points{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(7,63,61,.14);
  border:1px solid rgba(7,63,61,.14)}
.findus-points li{background:#fff;padding:24px 22px;margin:0;
  display:flex;flex-direction:column;align-items:flex-start}
.findus-points span{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  color:var(--spirit-ink);margin-bottom:18px}
.findus-points b{display:block;font-family:var(--font-display);font-size:20px;line-height:1.14;
  font-weight:500;letter-spacing:0;text-wrap:balance}
.findus-points p{margin:11px 0 18px;font-size:14px;line-height:1.5;color:#62594f}
/* Descriptions differ in length; without this the three Directions links
   sat at three different heights and the row read as unfinished. */
.findus-points a{font-size:14px;margin-top:auto}
.map-embed{margin-top:28px;border:1px solid rgba(7,63,61,.14);line-height:0;background:#fff}
.map-embed iframe{display:block;width:100%;aspect-ratio:16/7;height:auto;border:0}

@media (max-width:1000px){
  .findus-panel{grid-template-columns:1fr;gap:30px}
}
@media (max-width:760px){
  .findus-points{grid-template-columns:1fr}
  .findus-panel{padding:28px 22px}
  .map-embed iframe{aspect-ratio:4/3}
}

/* ===================================================================
   CANONICAL CONTENT GRID
   -------------------------------------------------------------------
   Measured on the rendered pages, content was landing on four different
   left edges in a single view — header 74px, .inner-visual 75px,
   .wrap 132px, .k-wrap / .k-phead 160px. Stacked down a page that reads
   as sloppy alignment, which is exactly what it was.

   One grid now: 1200px outer, 40px gutters, 1120px of content. That is
   the measure the homepage and every page-head already used, so this
   brings the rest up to it rather than inventing a new width.
   =================================================================== */
.wrap,.k-wrap,.bar{max-width:1200px;padding-left:40px;padding-right:40px;margin-left:auto;margin-right:auto}
.phead + .inner-visual .wrap,.inner-visual .wrap{max-width:1200px;padding-left:40px;padding-right:40px}
.k-phead .wrap{max-width:1200px;padding-left:40px;padding-right:40px}

@media (max-width:860px){
  .wrap,.k-wrap,.bar,.inner-visual .wrap,.k-phead .wrap{padding-left:24px;padding-right:24px}
}
@media (max-width:520px){
  .wrap,.k-wrap,.bar,.inner-visual .wrap,.k-phead .wrap{padding-left:20px;padding-right:20px}
}

/* Footer closing line: the rule was inheriting the 26ch text cap, so the
   border stopped a third of the way across the footer and read as a
   broken divider. Rule spans the grid; only the text keeps its measure. */
.frule{max-width:none}
.frule > span,.frule-text{display:block;max-width:26ch}

/* ===================================================================
   HERO — editorial split
   -------------------------------------------------------------------
   The previous hero laid the headline, two pills and a donate card over
   a centred group portrait. Measured against the rendered page, the
   headline covered roughly eight sisters, the card covered three more
   and the pills sat on two faces; the people occupy the lower 60% of
   the frame, which is exactly where the text was. No object-position
   could fix that, because the photograph has no empty quarter.

   So the type gets its own column and the photograph gets its own,
   uncovered. That also lets the scrim go entirely, so the picture
   reads bright and true instead of near-silhouette.
   =================================================================== */
.k-hero{position:relative;background:var(--navy-deep);overflow:hidden;min-height:0;display:block;padding:0}
.k-hero::after{content:none}
.k-hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;align-items:stretch;
  min-height:min(78vh,640px)}
.k-hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:68px 48px 68px max(40px,calc((100vw - 1200px)/2 + 40px));color:#fff}
.k-hero-copy .k-pill{align-self:flex-start;margin-bottom:24px}
.k-hero h1{font-family:var(--font-display);font-size:clamp(38px,3.9vw,58px);line-height:1.04;
  font-weight:600;letter-spacing:-.022em;color:#fff;margin:0;max-width:16ch}
.k-hero .k-sub{color:rgba(255,255,255,.82);font-size:17px;line-height:1.6;margin:22px 0 0;max-width:42ch}

.k-hero-points{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.k-hero-points li{position:relative;padding-left:20px;font-size:14.5px;color:rgba(255,255,255,.80)}
.k-hero-points li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

.k-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.k-hero-actions .k-cta{background:var(--cta);color:#fff;padding:14px 30px;border-radius:var(--r-md);
  text-decoration:none;font-weight:600;font-size:15px}
.k-hero-actions .k-cta:hover{background:var(--red-bright)}
.k-hero-actions .k-cta2{border:1px solid rgba(255,255,255,.45);color:#fff;padding:14px 30px;
  border-radius:var(--r-md);text-decoration:none;font-weight:600;font-size:15px}
.k-hero-actions .k-cta2:hover{background:rgba(255,255,255,.10);border-color:#fff}

.k-hero-photo{position:relative;margin:0;min-height:360px}
.k-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;border-radius:0}
.k-hero-photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 26px 16px;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.92);
  background:linear-gradient(180deg,rgba(4,36,63,0) 0%,rgba(4,36,63,.72) 100%)}

/* Where the split stops working.
   The photo column is 0.56 of the viewport; the copy column sets the row
   height at roughly 640px. Below about 1280px that combination crops the
   frame by more than 8% a side, and the community photograph has a sister
   at each edge — measured, the outermost sisters sit at 11.7% and 92% of
   the frame. At 1200px the right-hand sister was sliced in half.
   So the split is for >=1280px only. Below that the photograph goes full
   width, whole, with the copy beneath it — a composition in its own right,
   not a squeezed desktop. */
@media (max-width:1279px){
  .k-hero-grid{grid-template-columns:1fr;min-height:0}
  .k-hero-photo{order:-1;min-height:0;aspect-ratio:16/9}
  /* 4:3 -> 16:9 trims sky at the top and path at the bottom, never a face;
     the bias downward keeps the group off the lower edge. */
  .k-hero-photo img{object-position:center 58%}
  .k-hero-copy{padding:52px max(24px,calc((100vw - 1200px)/2 + 24px)) 60px;justify-content:flex-start}
  .k-hero h1{font-size:clamp(36px,4.6vw,52px);max-width:20ch}
  .k-hero .k-sub{max-width:56ch}
}
@media (max-width:900px){
  .k-hero-photo{aspect-ratio:4/3}
  .k-hero-copy{padding:44px 24px 52px}
  .k-hero h1{font-size:clamp(32px,7.4vw,44px);max-width:18ch}
  .k-hero .k-sub{font-size:16px}
}
@media (max-width:520px){
  .k-hero-copy{padding:36px 20px 44px}
  .k-hero-actions{gap:10px}
  .k-hero-actions .k-cta,.k-hero-actions .k-cta2{flex:1 1 auto;text-align:center;padding:14px 18px}
  .k-hero-photo{aspect-ratio:1/1}
}
@media (max-width:380px){
  .k-hero-copy .k-pill{font-size:11px;letter-spacing:0;padding:10px 14px;white-space:nowrap}
}

/* ===================================================================
   ABOUT — the symbol legend
   -------------------------------------------------------------------
   Three white rounded cards with a dot and two lines each is the
   generic card pattern this site is meant to avoid, and it competed
   with the emblem it was supposed to explain. It is a three-item
   legend, so it is now a hairline list: the colour lives in the dot
   and in the artwork, not in three more boxes.
   =================================================================== */
.meanings{display:block;background:transparent;border:0;gap:0;
  margin-top:26px;border-top:1px solid var(--border)}
.mean{background:transparent;box-shadow:none;border:0;border-radius:0;
  border-bottom:1px solid var(--border);padding:15px 2px;gap:14px;align-items:baseline}
.mean .dot{width:11px;height:11px;margin-top:0;transform:translateY(1px)}
.mean>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.mean b{margin-bottom:0;font-size:15.5px}
.mean p{font-size:14.5px}

/* The emblem is artwork, not a photograph dropped in a card. figure.plain
   carries a card treatment for photographs; the mark needs none of it, and
   the selector has to match figure.plain's specificity to say so. */
figure.symbol-mark{background:transparent;box-shadow:none;border:0;border-radius:0;padding:0}
figure.symbol-mark img{box-shadow:none;border:0;border-radius:0;background:transparent;
  width:min(240px,64vw)}

/* ===================================================================
   PAGE HEAD — remove the stray container
   -------------------------------------------------------------------
   Two earlier rounds each gave `.phead .wrap` a box: one a gradient
   card with 28px radius and a shadow, a later one a pair of hairline
   rules. Both still applied, so every inner page opened with a faint
   bordered rectangle around its h1 — and the headline's descenders
   sat on the bottom edge of it. The band itself (`.k-phead`) already
   provides the ground, the accent rule on top and the closing rule,
   so the inner box is redundant. It goes.
   =================================================================== */
.k-phead .wrap{background:none;border:0;border-radius:0;box-shadow:none;
  padding-top:0;padding-bottom:0}

/* Footer sign-off: the serif line sat alone against a wide empty right side.
   Pairing it with the copyright notice balances the row and gives the footer
   a proper bottom edge. */
.frule{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 40px}
.fcopy{font-family:var(--font-body);font-size:13px;line-height:1.5;margin:0;
  color:var(--muted);letter-spacing:.01em;flex:none}
@media (max-width:760px){
  .frule{display:block}
  .fcopy{margin-top:18px}
}

/* ===================================================================
   TABLET (761–960px) — the inner-visual row
   -------------------------------------------------------------------
   Below 960px this row became a horizontal swipe strip, but the fade
   and scrollbar affordance that make a strip readable only start at
   760px. Between those two numbers a tablet got a card sliced by the
   viewport edge, mid-word, with no cue that it scrolled — measured at
   768px on five pages.

   A tablet has room for a real layout, so it gets one: the lead card
   full width, the other two side by side. The swipe strip stays for
   phones, where it belongs.
   =================================================================== */
@media (min-width:761px) and (max-width:960px){
  .inner-visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;
    overflow:visible;-webkit-mask-image:none;mask-image:none}
  /* .phead + .inner-visual .wrap is three classes, so the shared 24px
     tablet gutter has to be restated at that weight to reach this row. */
  .phead + .inner-visual .wrap,.inner-visual .wrap.inner-visual-grid{
    padding-left:24px;padding-right:24px}
  .inner-visual-card,.inner-visual-card.is-large{min-width:0;min-height:330px;scroll-snap-align:none}
  .inner-visual-card.is-large{grid-column:1 / -1;min-height:400px}
  .inner-visual-card b{font-size:26px}
}

/* The .facts rule is a border-top on the list itself, so a measure cap on
   the <ul> shortened the rule to ~60% of the column and read as a broken
   divider — the same fault as the old footer rule. Cap the items instead. */
.facts li{max-width:70ch}

/* Six course cards stacked full width left the text wrapping at its 78ch
   measure against a 1120px card, so every card carried ~200px of empty
   right edge. Two columns lets the measure fill the card. */
@media (min-width:861px){
  .courses{grid-template-columns:1fr 1fr;gap:18px}
}
.course p{max-width:none}

/* ===================================================================
   WORK — ministry cards
   -------------------------------------------------------------------
   Measured on the rendered page: the photo was locked to 4:3 (448x336)
   beside a text column 625px tall, leaving ~290px of empty white under
   every one of the four photographs. The bullet list was what made the
   text column tall, so it has been lifted out of .txt into its own
   full-width row. The prose column is now roughly the height of a 4:3
   photo, and the facts read across the card instead of stacking in a
   narrow column.
   =================================================================== */
.detail{grid-template-rows:auto auto}
.detail > img{grid-column:1;grid-row:1;align-self:stretch;height:100%}
.detail > .txt{grid-column:2;grid-row:1}
.detail:nth-of-type(even) > img{grid-column:2}
.detail:nth-of-type(even) > .txt{grid-column:1;order:0}
.detail > .facts{grid-column:1 / -1;grid-row:2;margin-top:30px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 44px;align-items:start}
.detail > .facts li{max-width:60ch}

@media (max-width:860px){
  .detail > img,.detail > .txt,.detail > .facts{grid-column:1}
  .detail > img{grid-row:1;height:auto}
  .detail > .txt{grid-row:2}
  .detail > .facts{grid-row:3;grid-template-columns:1fr;margin-top:22px}
  .detail:nth-of-type(even) > img{grid-column:1;grid-row:1}
  .detail:nth-of-type(even) > .txt{grid-column:1;grid-row:2}
}

/* The caption type was one size for every card in the row, so in the two
   narrow cards (296px) a 36px serif ran to four and five lines and buried
   the photograph it sat on. Scale it to the card: the lead card keeps the
   display size, the narrow ones step down. */
.inner-visual-card b{font-size:clamp(21px,1.8vw,26px);max-width:16ch}
.inner-visual-card.is-large b{font-size:clamp(26px,2.6vw,36px);max-width:13ch}
@media (max-width:960px){
  .inner-visual-card b,.inner-visual-card.is-large b{font-size:26px;max-width:18ch}
}

/* ===================================================================
   HERO on large screens
   -------------------------------------------------------------------
   The copy column's left padding tracks the 1200px content grid, so it
   grows by 200px for every 400px of viewport — while the column itself
   only grows by 176px. Past about 1500px the padding outruns the column
   and the text measure starts *shrinking* as the screen gets wider:
   measured 426px of text at 1440 but only 397px at 1920, which broke
   the headline to five lines and orphaned "Health,".
   Giving the copy column a larger share at those widths keeps the
   measure growing, and the photo column stays wide enough that the
   sisters at the edges of the frame are not cropped.
   =================================================================== */
@media (min-width:1500px){
  .k-hero-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1700px){
  .k-hero-grid{grid-template-columns:1.1fr .9fr}
}

/* Round 1 set .split to align-items:stretch so a figure would fill the row
   instead of leaving a void beneath it. That worked for the figure, but it
   stretches the text column too — so where the prose is shorter than the
   photograph (the Anna Dengel section measured ~200px short) the text box
   was stretched and the emptiness simply moved below the words.
   Stretch the figure; centre the prose against it. */
.split > div,.split.even > div{align-self:center}
@media (max-width:860px){
  .split > div,.split.even > div{align-self:start}
}

/* ===================================================================
   PHONE (<=760px) — the swipe strip under each page head
   -------------------------------------------------------------------
   Measured at 390px: the first card sat at x=0, flush to the screen
   edge, while the heading above it sat at the 20px gutter. The grid did
   have padding — 40px, from a three-class desktop rule — but scroll-snap
   aligns to the edge of the scrollport, not the padding, unless
   scroll-padding says otherwise. So the browser scrolled the strip 40px
   to snap card one to the edge. Gutter and snap offset now both 20px,
   matching the page.
   =================================================================== */
@media (max-width:760px){
  .phead + .inner-visual .wrap,.inner-visual .wrap.inner-visual-grid{
    padding-left:20px;padding-right:20px;
    scroll-padding-inline:20px}
}

/* ===================================================================
   PHONE PASS (<=620px) — layouts that were desktop squeezed, not
   designed for a phone. Each measured at 390px before changing.
   =================================================================== */
@media (max-width:620px){
  /* Donate: the label sat beside the text, crushing the text into a
     ~180px column at ~25 characters a line; cards ran 300-370px tall.
     Label goes above, text gets the full card width. */
  .amt{flex-direction:column;gap:8px;padding:22px 22px}

  /* Four statistics one per row cost ~800px of scrolling for four
     numbers. Two by two keeps them together as one glance. */
  .k-stats{grid-template-columns:1fr 1fr;gap:26px 18px}
  .k-stat{padding:20px 0 0 18px}
  .k-stat::before{width:62px;height:62px}
  .k-stat b{font-size:36px}
  .k-stat span{font-size:13px}
  .k-stat .k-rule{margin-top:16px}

  /* Footer: seven page links then four ministry links in one column
     made the footer the tallest block on the page. The two lists now
     share a row under the address. */
  .fgrid{grid-template-columns:1fr 1fr;gap:30px 20px}
  .fgrid > div:first-child{grid-column:1 / -1}
}
@media (max-width:860px){
  /* Ministry cards: the desktop 54px column gap became a 54px row gap
     once stacked, which with the list margin left ~76px of dead space
     before every facts list. */
  .detail{row-gap:22px}
  .detail > .facts{margin-top:0}
}

/* ===================================================================
   PHONE PASS, continued
   =================================================================== */
/* A phone number broken across two lines ("97308 / 83775") is hard to
   read and looks like a fault. Numbers never wrap; long labels do. */
.phones a{white-space:nowrap}
.phones li{align-items:baseline}
.phones span{min-width:0}

@media (max-width:620px){
  /* Contact: both panels were a bordered box holding a bordered list, so
     on a phone two frames and two sets of padding ate ~90px of a 390px
     screen. The outer frame goes; the hairline list carries the shape. */
  .visit-routing,.findus-panel{border:0;background:transparent;padding:0;gap:22px}

  /* Programmes: six one-line days stacked one per row ran ~840px.
     Two per row halves it and keeps the week readable as a sequence. */
  .programme-arc{grid-template-columns:1fr 1fr}
  .programme-arc div{border-right:1px solid rgba(7,63,61,.14);border-bottom:1px solid rgba(7,63,61,.14);padding:20px 16px}
  .programme-arc div:nth-child(3n){border-right:1px solid rgba(7,63,61,.14)}
  .programme-arc div:nth-child(2n){border-right:0}
  .programme-arc div:nth-last-child(-n+2){border-bottom:0}
  .programme-arc div::before{left:16px;right:16px}
  .programme-arc b{font-size:20px}

  /* News: the lead story headline kept a 30px floor and ran to five
     lines in a phone-width card. */
  .posts .post:first-child h3{font-size:25px;max-width:none}
}

/* ===================================================================
   LIFE PASS — 2026-09-21
   -------------------------------------------------------------------
   The brief was "add some life". The site had become white card, grey
   card, white card: one visual idea repeated. Life here comes from the
   Society's own material — its four brand colours (the red, gold, blue
   and green of the emblem), its photographs, and its real figures —
   not from blobs, gradients or effects. Colour is carried by ground and
   rule, never by decoration.
   =================================================================== */

/* ---------- 1. Statistics ----------
   Before: a tinted square floated behind the top-left of each number,
   misregistered, on a card whose shadow was too faint to read as a card.
   Now each figure owns a full tile in its ministry's tint, with the
   colour repeated in the top rule and the numeral itself. */
.k-stats{gap:16px}
.k-stat{background:var(--sw,#f3f4f2);border:0;box-shadow:none;border-radius:var(--r-md);
  padding:30px 26px 28px;position:relative;overflow:hidden;
  transition:transform var(--t-base) var(--ease-k),box-shadow var(--t-base) var(--ease-k)}
.k-stat::before{content:none}
.k-stat b{color:var(--sn,var(--fg));font-size:clamp(44px,4.4vw,60px);letter-spacing:-.03em}
.k-stat span{color:#3a4149;max-width:none;margin-top:12px}
.k-stat .k-rule{position:absolute;left:0;right:0;top:0;width:auto;height:4px;margin:0;
  background:var(--sc);border-radius:0}
.k-stat:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}

/* ---------- 2. Growth band (replaces the lone "793" marker) ----------
   793 already appears in the statistics row, so a second standalone
   "793" was repetition. The real story in the reports is the growth —
   75 people four years earlier, 793 now — so the band shows that, as a
   plain bar comparison, on the brand gold. */
.k-growth{background:var(--gold);color:var(--navy);padding:92px 0}
.k-growth-in{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.k-growth .k-eyebrow{color:var(--navy)}
.k-growth h2{font-family:var(--font-display);font-size:clamp(34px,4vw,56px);line-height:1.04;
  letter-spacing:-.022em;font-weight:600;color:var(--navy);margin:0 0 18px;max-width:14ch}
.k-growth-copy p{font-size:17px;line-height:1.6;color:#2b2208;max-width:44ch;margin:0 0 30px}
.k-growth-cta{display:inline-block;background:var(--navy);color:#fff;padding:14px 28px;
  border-radius:var(--r-md);text-decoration:none;font-weight:600;font-size:15px;
  transition:background var(--t-fast)}
.k-growth-cta:hover{background:var(--navy-deep)}
.k-growth-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 12px 32px rgba(5,46,89,.12)}
.k-growth-media img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.k-growth-chart{background:rgba(255,255,255,.38);border-radius:var(--r-lg);padding:36px 34px;
  display:grid;gap:30px}
.k-gr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"lab lab" "bar num";
  column-gap:20px;row-gap:10px;align-items:center}
.k-gl{grid-area:lab;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#3a2a06}
.k-gt{grid-area:bar;display:block;height:20px;background:rgba(5,46,89,.13);border-radius:var(--r-pill);overflow:hidden}
.k-gt i{display:block;height:100%;width:var(--w);background:var(--navy);border-radius:var(--r-pill);
  transition:width 1.2s var(--ease-k) .25s}
.k-gr b{grid-area:num;font-family:var(--font-display);font-weight:600;font-size:42px;line-height:1;
  color:var(--navy);min-width:3ch;text-align:right;letter-spacing:-.02em}
/* bars grow in when the chart scrolls into view — only when motion.js has
   switched motion on, so with no JS or reduced motion they are simply full. */
.js-rise .k-growth-chart:not(.is-in) .k-gt i{width:0}

/* ---------- 3. Where a gift goes ---------- */
.k-steps-grid{gap:18px}
.k-step{background:#f6f5f2;background:color-mix(in srgb,var(--sc) 8%,#fff);
  border-top:4px solid var(--sc);border-radius:var(--r-lg);padding:30px 30px 34px;
  transition:transform var(--t-base) var(--ease-k),box-shadow var(--t-base) var(--ease-k)}
.k-step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.k-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.k-step-ic{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--sc);
  display:grid;place-items:center;box-shadow:var(--sh-1)}
.k-step h3{font-size:22px;margin-bottom:10px}
.k-step p{color:#3f464e}

/* ---------- 4. Closing section (legacy photo layout; final rules below) ---------- */
.k-close{padding:0;text-align:left}
.k-close-grid{display:grid;grid-template-columns:1fr 1fr;min-height:540px}
.k-close-photo{margin:0;position:relative;min-height:320px;overflow:hidden}
.k-close-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.k-close-copy{display:flex;flex-direction:column;justify-content:center;
  padding:80px max(40px,calc((100vw - 1200px)/2 + 40px)) 80px 72px}
.k-close-copy h2{margin:0 0 18px;max-width:14ch;text-align:left}
.k-close-copy p{margin:0 0 32px;max-width:44ch;text-align:left}
.k-close-copy .k-row{justify-content:flex-start}

/* ---------- 5. Photo cards under every page head ----------
   A 1px border over a near-black card background drew a dark outline
   round each photo, and the scrim darkened more than half of the picture.
   Border gone; the scrim now covers only the band the caption sits in. */
.inner-visual-card{border:0;background:#2a2521}
.inner-visual-card::after{background:linear-gradient(to top,rgba(14,11,9,.86) 0%,
  rgba(14,11,9,.62) 24%,rgba(14,11,9,.18) 46%,rgba(14,11,9,0) 62%)}

/* ---------- 6. Ministry cards (homepage, navy) -> see 21st.dev implementation below ---------- */

/* ---------- 7. Donate ----------
   The two grids drew their dividers by painting a 1px-gap background, but
   the cards had rounded corners — so the background showed through at
   every corner as small beige notches. Real gaps now, and each card
   takes its ministry colour. */
.giving,.give-grid{gap:16px;background:transparent;border:0}
.amt{background:#fff;border:1px solid rgba(7,63,61,.10);border-top:4px solid var(--c);box-shadow:none}
.give-panel{border:1px solid rgba(7,63,61,.10);box-shadow:none}

.ways{gap:16px}
.w{background:#f6f5f2;background:color-mix(in srgb,var(--c-tint) 55%,#fff);border:0;box-shadow:none;
  padding:30px 26px 32px;transition:transform var(--t-base) var(--ease-k),box-shadow var(--t-base) var(--ease-k)}
.w::before{content:none}
.w:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.w-ic{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--c-ink);
  display:grid;place-items:center;margin-bottom:22px;box-shadow:var(--sh-1)}
.w p{color:#3f464e}

/* ---------- 8. News ----------
   .posts also carries .wrap, so the site grid gave it 40px of side padding
   — and because the grid paints its dividers with a grey background, that
   padding showed as a grey band down each side. */
.wrap.posts{max-width:none;width:min(1120px,calc(100% - 80px));padding-left:0;padding-right:0;
  margin-left:auto;margin-right:auto}
.posts .post:first-child h3{font-size:clamp(28px,2.6vw,38px);max-width:none;line-height:1.08}

/* ---------- 9. Contact ----------
   Both panels were a bordered box holding a bordered list. One frame. */
.visit-routing,.findus-panel{border:0;background:transparent;padding:0}
.route-list article,.findus-points li{transition:background var(--t-fast)}
.route-list article:hover,.findus-points li:hover{background:#fbfaf7}

/* ---------- 10. Footer ----------
   A four-colour rule — the emblem's colours — so the site ends on its
   own identity rather than a grey edge. */
footer{position:relative;border-top:0}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--gold) 25% 50%,
    var(--brand-blue) 50% 75%,var(--green) 75% 100%)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .k-growth{padding:64px 0}
  .k-growth-in{grid-template-columns:1fr;gap:36px}
  .k-close-grid{grid-template-columns:1fr;min-height:0}
  .k-close-photo{aspect-ratio:4/3;min-height:0}
  .k-close-copy{padding:52px 24px 60px}
  .wrap.posts{width:calc(100% - 48px)}
}
@media (max-width:620px){
  .k-stat{padding:22px 16px 20px}
  .k-stat b{font-size:38px}
  .k-growth-chart{padding:26px 22px}
  .k-gr b{font-size:32px}
  .k-close-copy{padding:44px 20px 52px}
  .wrap.posts{width:calc(100% - 40px)}
}
@media (prefers-reduced-motion:reduce){
  .k-stat,.k-step,.w,.k-mcard,.k-mcard img{transition:none}
  .k-stat:hover,.k-step:hover,.w:hover,.k-mcard:hover{transform:none}
  .k-mcard:hover img{transform:none}
}
/* the shared .ic rule sizes icons for inline use; these sit in 52px discs */
.k-step-ic .ic,.w-ic .ic{width:25px;height:25px;flex:none}

/* ==========================================================================
   21st.dev Hover Reveal Cards: Four Ministries Grid
   Reverse-engineered from @lavikatiyar/components/cards
   ========================================================================== */
.k-dark{
  background:var(--navy-deep,#04243f);
  background:linear-gradient(180deg,#031d33 0%,var(--navy-deep,#04243f) 45%,#062a4a 100%);
  color:#fff;
  padding:clamp(80px,8.5vw,120px) 0 clamp(88px,9.5vw,128px);
  position:relative;
  overflow:hidden;
}
.k-dark::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:1320px;
  height:100%;
  background:radial-gradient(circle at 50% 0%,rgba(30,127,232,.14) 0%,transparent 65%);
  pointer-events:none;
}
.k-dark-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  margin-bottom:44px;
  position:relative;
  z-index:1;
}
.k-dark .k-eyebrow{
  color:var(--gold,#efa733);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 12px;
  display:block;
}
.k-dark-head h2{
  font-family:var(--disp);
  font-size:clamp(32px,3.8vw,46px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
  margin:0;
  max-width:18ch;
}
.k-dark-head .k-lede{
  color:rgba(255,255,255,.76);
  font-size:16.5px;
  line-height:1.52;
  margin:12px 0 0;
  max-width:54ch;
}
.k-dark-aside{
  flex-shrink:0;
  margin-bottom:8px;
}
.k-dark-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:gap .25s ease,border-color .2s ease;
}
.k-dark-link:hover{
  gap:12px;
  border-color:var(--gold,#efa733);
}

/* --- 21st.dev Responsive Hover Reveal Cards Grid --- */
.k-mgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  position:relative;
  z-index:1;
}

/* Individual Card */
.k-mcard{
  position:relative;
  display:grid;
  grid-template-columns:46% 54%;
  min-height:220px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-top:3px solid var(--k,var(--spirit,#1e7fe8));
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.20);
  transition:transform .4s cubic-bezier(.16,1,.3,1),
              opacity .4s cubic-bezier(.16,1,.3,1),
              filter .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s cubic-bezier(.16,1,.3,1),
              border-color .4s cubic-bezier(.16,1,.3,1),
              background .3s ease;
  will-change:transform,opacity,filter;
}

/* 21st.dev Component Interaction:
   Subtly blur and soften non-hovered / non-focused cards */
.k-mgrid:hover .k-mcard:not(:hover),
.k-mgrid:focus-within .k-mcard:not(:focus-visible),
.k-mgrid:has(.k-mcard:hover) .k-mcard:not(:hover),
.k-mgrid:has(.k-mcard:focus-visible) .k-mcard:not(:focus-visible){
  opacity:.55;
  filter:blur(1px);
  transform:scale(.99);
}

/* Active Hovered/Focused Card Elevation */
.k-mcard:hover,
.k-mcard:focus-visible{
  opacity:1 !important;
  filter:blur(0px) !important;
  transform:translateY(-3px) scale(1.01);
  background:rgba(255,255,255,.095);
  border-color:rgba(255,255,255,.32);
  border-top-color:var(--k,var(--spirit,#1e7fe8));
  box-shadow:0 18px 40px -8px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.20);
  z-index:2;
}

.k-mcard:focus-visible{
  outline:2px solid var(--k,var(--spirit,#1e7fe8));
  outline-offset:3px;
}

/* Left Image Column */
.k-media{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  line-height:0;
  border:0;
}
.k-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.k-mcard:hover .k-media img,
.k-mcard:focus-visible .k-media img{
  transform:scale(1.05);
}

/* Right Content Column */
.k-mcard .k-bd{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  min-width:0;
  height:100%;
  padding:26px 28px 24px 28px;
  border-top:0;
}
.k-mcard h3{
  font-family:var(--disp);
  font-size:24px;
  font-weight:600;
  line-height:1.22;
  color:#fff;
  margin:0 0 8px;
}
.k-mcard p{
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.5;
  color:rgba(255,255,255,.76);
  margin:0 0 auto;
}

/* Bottom Circle Action Button */
.k-go{
  flex:none;
  width:36px;
  height:36px;
  margin-top:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.28);
  transition:background .3s ease,
              border-color .3s ease,
              color .3s ease,
              transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s ease;
}
.k-go svg{
  width:16px;
  height:16px;
  transition:transform .3s ease;
}

/* Hovered Button State: solid accent color fill with dark icon */
.k-mcard:hover .k-go,
.k-mcard:focus-visible .k-go{
  background:var(--k,var(--spirit));
  border-color:var(--k,var(--spirit));
  color:var(--navy-deep,#04243f);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transform:translateX(2px);
}
.k-mcard:hover .k-go svg,
.k-mcard:focus-visible .k-go svg{
  transform:translateX(1px);
}

/* Responsive Breakpoints */
@media (max-width:960px){
  .k-dark-head{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
    margin-bottom:32px;
  }
  .k-mgrid{
    gap:18px;
  }
  .k-mcard{
    grid-template-columns:44% 56%;
    min-height:200px;
  }
  .k-mcard .k-bd{
    padding:20px 22px 18px 22px;
  }
  .k-mcard h3{
    font-size:21px;
  }
}

@media (max-width:760px){
  .k-mgrid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .k-mcard{
    grid-template-columns:40% 60%;
    min-height:180px;
  }
}

@media (max-width:520px){
  .k-mcard{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .k-media{
    aspect-ratio:16 / 9;
    height:auto;
  }
  .k-mcard .k-bd{
    padding:20px 18px;
  }
}

@media (prefers-reduced-motion:reduce){
  .k-mcard,
  .k-mgrid:hover .k-mcard:not(:hover),
  .k-media img,
  .k-go,
  .k-dark-link{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
  .k-mgrid:hover .k-mcard:not(:hover){
    opacity:.65;
  }
}

/* News reports without event-specific photographs. */
.news-feed{margin-top:40px;border-top:1px solid var(--border)}
.news-entry{padding:28px 0;border-bottom:1px solid var(--border)}
.news-entry>div{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:36px}
.news-entry .meta{grid-row:1 / 3;color:var(--c-ink);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding-top:7px}
.news-entry h3{grid-column:2;font-family:var(--font-display);font-size:clamp(21px,2.2vw,28px);
  font-weight:600;line-height:1.2;margin:0 0 8px;max-width:35ch}
.news-entry p{grid-column:2;font-size:15px;line-height:1.6;color:var(--muted);margin:0;max-width:72ch}
@media (max-width:700px){
  .news-entry{padding:22px 0}
  .news-entry>div{grid-template-columns:1fr;gap:0}
  .news-entry .meta,.news-entry h3,.news-entry p{grid-column:1}
  .news-entry .meta{grid-row:auto;padding:0 0 9px}
}

/* Homepage ministry links remain compact below the restored story layout. */
.k-media.k-media-type{display:flex;align-items:center;padding:22px;background:rgba(226,139,150,.16)}
.k-media-type span{display:block;font-family:var(--font-display);font-size:clamp(21px,2vw,28px);
  font-weight:600;line-height:1.16;color:#fff;white-space:normal}
.k-close{padding:66px 0}
.k-close-grid{display:block;min-height:0}
.k-close-copy{max-width:1200px;margin:0 auto;padding:0 32px}
.k-close-copy h2{max-width:24ch}
.k-close-copy p{max-width:62ch}
@media (max-width:760px){
  .k-media.k-media-type{padding:14px}
  .k-media-type span{font-size:19px}
  .k-close{padding:50px 0}
  .k-close-copy{padding:0 24px}
}

/* About page editorial layout. */
.about-intro {
  background: #fff;
  padding: 52px 0 78px;
}

.about-intro-grid {
  max-width: 1200px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 62px;
  align-items: center;
}

.about-community,
.about-philosophy-photo {
  margin: 0;
}

.about-community img,
.about-philosophy-photo img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.about-community figcaption,
.about-philosophy-photo figcaption {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}

.about-intro-copy {
  min-width: 0;
}

.about-intro-copy .lede {
  font-size: 19px;
}

.about-intro-copy p:last-child {
  margin-bottom: 0;
}

.about-founder .portrait {
  width: min(100%, 340px);
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-founder .portrait img {
  border-radius: 4px;
  box-shadow: none;
  filter: none;
}

.about-founder .portrait figcaption {
  padding: 13px 0 0;
  border-top: 3px solid var(--emotion);
  margin-top: 13px;
}

.creed.about-philosophy {
  background: #eef4ec;
  padding: 82px 0;
}

.about-philosophy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .87fr);
  gap: 72px;
  align-items: center;
}

.about-philosophy blockquote {
  border-left: 4px solid var(--earth);
  padding-left: 24px;
  margin: 0 0 30px;
  max-width: 18ch;
}

.about-philosophy-copy > p:not(.eyebrow) {
  max-width: 52ch;
  margin-bottom: 16px;
}

.about-philosophy-copy > p:last-child {
  margin-bottom: 0;
}

.about-philosophy-photo figcaption {
  color: #3e5b49;
}

@media (max-width: 860px) {
  .about-intro-grid,
  .about-philosophy-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-intro,
  .creed.about-philosophy {
    padding: 42px 0 60px;
  }

  .about-founder .portrait {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .about-intro,
  .creed.about-philosophy {
    padding: 28px 0 48px;
  }

  .about-intro-grid,
  .about-philosophy-grid {
    gap: 26px;
  }

  .about-philosophy blockquote {
    padding-left: 18px;
  }
}

/* Work text-only sections. */
.detail--text{grid-template-columns:1fr}
.detail--text > .txt{grid-column:1;grid-row:1;max-width:78ch}
.detail--text > .facts{grid-column:1;grid-row:2}
.work-prashanti > div{max-width:78ch}
.work-next-link{margin-bottom:0}

@media (max-width:860px){
  .detail--text > .txt{grid-column:1;grid-row:1}
  .detail--text > .facts{grid-column:1;grid-row:2}
}

@media (max-width:520px){
  .reach{grid-template-columns:minmax(0,1fr)}
  .reach>div{min-width:0}
  .reach .addr .inline-link{max-width:100%;overflow-wrap:anywhere}
}

/* Shared inner-page opening: one editorial layout with a quiet ministry tint. */
.k-phead{background:#f4f7f8;
  background:color-mix(in srgb,var(--k-pill,#216eaa) 10%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--k-pill,#216eaa) 25%,#fff)}
.k-phead .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.k-phead .eyebrow{align-self:center;margin-bottom:26px}
.k-phead h1{max-width:22ch;text-wrap:balance}
.k-phead>.wrap>p:not(.eyebrow){max-width:66ch;margin:22px auto 0;font-weight:500}
/* The same centered opening, now grounded in a photograph from the relevant ministry. */
.k-phead[style*="--banner-image"]{
  display:grid;align-items:center;min-height:350px;padding:58px 0 60px;
  background-color:#0c263b;
  background-image:linear-gradient(90deg,rgba(7,28,43,.72),rgba(7,28,43,.55)),var(--banner-image);
  background-position:center,center var(--banner-y,50%);
  background-size:cover;
  border-bottom:4px solid var(--k-pill,#216eaa);
}
.k-phead[style*="--banner-image"] h1{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.17)}
.k-phead[style*="--banner-image"]>.wrap>p:not(.eyebrow){color:#f4f7f8}
.k-phead[style*="--banner-image"] .eyebrow{box-shadow:0 4px 18px rgba(0,0,0,.14)}
.k-phead[style*="--banner-image"] .phead-actions a{background:#fff;border-color:#fff;color:#0c3149}
.k-phead[style*="--banner-image"] .phead-actions a:hover{background:#e8f0f4;border-color:#e8f0f4}
.k-phead[style*="--banner-image"] .phead-actions a+a{background:rgba(7,28,43,.22);border-color:rgba(255,255,255,.72);color:#fff}
.k-phead[style*="--banner-image"] .phead-actions a+a:hover{background:rgba(255,255,255,.16)}
/* Keep the About photo evenly shaded, without a directional gradient. */
.k-phead.about-banner{position:relative;isolation:isolate;min-height:470px;background-image:var(--banner-image);background-position:center var(--banner-y,50%)}
.k-phead.about-banner::before{content:"";position:absolute;inset:0;background:rgba(7,28,43,.52);pointer-events:none}
.k-phead.about-banner>.wrap{position:relative;z-index:1}
.phead-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.phead-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 18px;border:1px solid #0c3149;border-radius:3px;background:#0c3149;
  color:#fff;text-decoration:none;font-size:14px;font-weight:600;line-height:1.3}
.phead-actions a:hover{background:#154968;border-color:#154968}
.phead-actions a:focus-visible{outline:3px solid var(--k-pill,#216eaa);outline-offset:3px}
.phead-actions a+ a{color:#0c3149;background:transparent}
.phead-actions a+ a:hover{background:rgba(12,49,73,.08)}
#recent-news{scroll-margin-top:96px}

/* A photographic invitation to continue the mission. */
.k-close{position:relative;isolation:isolate;min-height:500px;display:grid;align-items:center;
  padding:80px 0;background:#0c263b;color:#fff;overflow:hidden}
.k-close::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,31,49,.72)}
.k-close-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:center 43%}
.k-close-grid{width:100%}
.k-close-copy{max-width:800px;text-align:center}
.k-close-copy h2,.k-close-copy p{margin-left:auto;margin-right:auto}
.k-close-copy h2{max-width:18ch}
.k-close-copy .k-row{justify-content:center}

/* Return the supplied dark-blue footer treatment. */
footer{background:#0c2030;color:rgba(255,255,255,.75);overflow:hidden}
footer a{color:rgba(255,255,255,.78)}
footer a:hover{color:#fff}
footer h2.fh{color:#d9b46f}
.frule{border-top-color:rgba(255,255,255,.2);color:rgba(255,255,255,.68)}
.fcopy{color:rgba(255,255,255,.58)}
footer>.wrap::after{content:"Health \00b7 Healing \00b7 Wholeness";display:block;margin-top:40px;
  width:100%;overflow:hidden;white-space:nowrap;font-family:var(--font-display);
  font-size:clamp(50px,8.5vw,140px);line-height:.88;color:rgba(255,255,255,.055)}

/* Show the complete supplied lockup, including its four-part tagline. */
@media (min-width:1081px){.bar{min-height:94px;padding-top:0;padding-bottom:0}}
.bar .mark{flex:0 0 auto;width:max-content}
.mark .brandmark{height:94px}
@media (max-width:1080px){.mark .brandmark{height:68px}}
@media (max-width:820px){
  .mark .brandmark{height:54px}
}
@media (max-width:560px){
  .mark .brandmark{height:64px}
}
footer .flogo .flogo-lockup{width:360px;max-width:100%;height:auto;filter:brightness(0) invert(1)}

/* Two photographs per ministry, with the established image shape and spacing. */
.detail > .work-gallery{grid-column:1;grid-row:1;display:grid;grid-template-columns:1.15fr .85fr;gap:12px;min-width:0;aspect-ratio:4/3}
.detail:nth-of-type(even) > .work-gallery{grid-column:2}
.detail .work-gallery__image{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media (max-width:860px){
  .detail > .work-gallery,.detail:nth-of-type(even) > .work-gallery{grid-column:1;grid-row:1;grid-template-columns:1fr;aspect-ratio:auto}
  .detail .work-gallery__image{height:auto;aspect-ratio:16/10}
}

@media (max-width:760px){
  .k-phead{padding:46px 0 48px}
  .k-phead[style*="--banner-image"]{min-height:310px;padding:44px 0 46px}
  .k-phead.about-banner{min-height:0;padding:56.2vw 0 42px;background-repeat:no-repeat;background-size:100% auto;background-position:center top}
  .k-phead.about-banner::before{background:rgba(7,28,43,.35)}
  .k-phead.contact-banner{background-position:center,right var(--banner-y,50%)}
  .k-phead h1{font-size:clamp(34px,8.5vw,46px);max-width:18ch}
  .k-phead>.wrap>p:not(.eyebrow){max-width:42ch;margin-top:18px}
  .phead-actions{margin-top:24px}
  .k-close{min-height:480px;padding:64px 0}
  .k-close-copy{padding:0 24px}
  .k-close-photo{object-position:40% center}
  footer>.wrap::after{margin-top:34px}
}
@media (max-width:380px){
  .phead-actions a{flex:1 1 auto}
  .k-close-copy{padding:0 20px}
}

/* Homepage opening returned to the first committed photo-and-figure layout. */
.k-home .k-statement{padding:104px 0 92px}
.k-home .k-stats{gap:34px;padding-bottom:100px}
.k-home .k-stat{position:relative;display:flex;flex-direction:column;overflow:visible;padding:26px 0 0 26px;
  background:transparent;border:0;border-radius:0;box-shadow:none;transition:none}
.k-home .k-stat::before{content:"";position:absolute;left:0;top:0;width:86px;height:86px;
  background:var(--sw);border-radius:4px;z-index:0}
.k-home .k-stat b,.k-home .k-stat span,.k-home .k-stat .k-rule{position:relative;z-index:1}
.k-home .k-stat b{color:var(--fg);font-size:46px;line-height:1;min-height:2em}
.k-home .k-stat span{max-width:22ch;margin-top:10px;flex:1}
.k-home .k-stat .k-rule{position:relative;left:auto;right:auto;top:auto;width:78%;height:3px;
  margin-top:22px;background:var(--sc);border-radius:2px}
.k-home .k-stat:hover{transform:none;box-shadow:none}
.k-home .k-story{padding-bottom:104px}
.k-home .k-story-ph{margin-bottom:56px}
.k-home .k-mcard[href="/work#outreach"] .k-media img{object-position:center}
@media (max-width:1000px){
  .k-home .k-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px;padding-bottom:76px}
  .k-home .k-story-ph{grid-template-columns:1.22fr 1fr}
}
@media (max-width:620px){
  .k-home .k-statement{padding:54px 0}
  .k-home .k-stats{gap:26px 18px;padding-bottom:54px}
  .k-home .k-story{padding-bottom:54px}
  .k-home .k-stat{padding:20px 0 0 18px}
  .k-home .k-stat::before{width:62px;height:62px}
  .k-home .k-stat b{font-size:clamp(25px,7vw,36px)}
  .k-home .k-stat span{font-size:13px}
  .k-home .k-stat .k-rule{margin-top:16px}
  .k-home .k-story-ph{grid-template-columns:1.1fr .9fr;gap:12px;margin-bottom:28px}
  .k-home .k-story-ph img{aspect-ratio:4/5}
  .k-home .k-story-ph figure:nth-child(even) img{aspect-ratio:4/5}
}

.fcopy a{text-decoration:underline;text-underline-offset:3px;color:inherit}
@media (max-width:960px){
  #nav.is-open{flex-direction:column;gap:0;padding:8px 24px 18px}
}

/* Shared header disclosures */
#nav{gap:14px}
#nav > a{position:relative}
#nav > a[aria-current="page"]::after,
#nav .nav-group:has([aria-current="page"]) > .nav-trigger::before{
  content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  width:22px;height:2px;background:var(--archive-wine);
}
#nav .nav-group{position:relative}
#nav .nav-trigger{
  display:inline-flex;align-items:center;gap:6px;padding:8px 0;
  border:0;background:transparent;position:relative;
  color:#34383a;font:500 14px/1.4 var(--font-body);letter-spacing:0;
  text-transform:none;white-space:nowrap;cursor:pointer;
}
#nav .nav-trigger::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease;
}
#nav .nav-trigger[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
#nav .nav-trigger:hover,#nav .nav-trigger[aria-expanded="true"],
#nav .nav-group:has([aria-current="page"]) > .nav-trigger{color:var(--archive-wine)}
#nav .nav-panel[hidden]{display:none}
#nav .nav-panel{
  position:absolute;top:100%;left:-10px;z-index:100;min-width:188px;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:#fff;border:1px solid var(--archive-rule);border-radius:6px;
  box-shadow:0 10px 22px rgba(31,27,23,.1);
}
#nav .nav-panel a{display:block;padding:9px 10px;border:0;border-radius:4px;line-height:1.4}
#nav .nav-panel a:hover,#nav .nav-panel a:focus-visible{background:#f7f4f1}
#nav .nav-trigger:focus-visible,#nav a:focus-visible,.menu-btn:focus-visible,.give:focus-visible{
  outline:2px solid var(--archive-wine);outline-offset:3px;
}
@media (max-width:960px){
  #nav > a[aria-current="page"]::after,
  #nav .nav-group:has([aria-current="page"]) > .nav-trigger::before{display:none}
  #nav.is-open .nav-group{width:100%}
  #nav.is-open .nav-trigger{width:100%;justify-content:space-between;padding:11px 0;
    border-bottom:1px solid var(--border)}
  #nav.is-open .nav-panel{position:static;min-width:0;width:100%;padding:4px 0 6px 14px;
    border:0;border-left:2px solid var(--archive-rule);border-radius:0;box-shadow:none}
  #nav.is-open .nav-panel a{padding:10px;border:0}
}

/* Four gift paths on desktop, two at tablet widths. */
@media (min-width:1001px){
  .k-steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:621px) and (max-width:1000px){
  .k-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (max-width:620px){
  .k-home .k-story-ph{grid-template-columns:1fr;gap:12px}
  .k-home .k-story-ph img,
  .k-home .k-story-ph figure:nth-child(even) img{aspect-ratio:16/10}
}