/*
 * Lalita Nand Memorial Pragya Foundation
 * ---------------------------------------------------------------------------
 * Hand-written stylesheet — there is no build step. Edit this file directly.
 *
 * Values come from the approved design handoff (docs/README.md § Design
 * Tokens). Every colour, size and radius is declared once as a custom property
 * below; use the property, not a literal hex, anywhere further down.
 *
 * Order: tokens · base · layout · patterns · chrome · pages · responsive
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Greens */
    --forest: #0f4a29;
    --forest-deep: #0b3a21;
    --green: #1b7a43;
    --leaf: #8cc63f;
    --leaf-tint: #e8f1e4;

    /* Brown & amber */
    --brown: #7a4a2b;
    --amber: #f5a623;
    --amber-hover: #ffb840;
    --amber-shadow: #c9821a;
    --amber-ink: #3d2a0a;

    /* Reserved — appears in the logo only, never in the UI */
    --brand-blue: #5b9bd5;

    /* Surfaces */
    --cream: #fbf8f1;
    --cream-raised: #fdfbf6;
    --sand: #f2ede1;
    --sand-note: #f6f2e8;
    --card: #ffffff;

    /* Borders */
    --line: #e9e1d2;
    --line-warm: #e4dccb;
    --line-faint: #efe8da;
    --line-sage: #c7d6c0;
    --line-dashed: #c7b99c;

    /* Ink */
    --ink: #1a2b21;
    --ink-soft: #42574a;
    --ink-muted: #4c6155;
    --ink-light: #6b7f70;
    --ink-faint: #7e9186;
    --ink-label: #8a9a8f;
    --nav-ink: #5c7166;
    --pending: #b0a183;

    /* On dark */
    --on-dark: #e7f0e2;
    --on-dark-1: #c9dec6;
    --on-dark-2: #d6ead5;
    --on-dark-3: #dcebd9;
    --on-dark-bar: #d9ead8;
    --footer-text: #b9d2b4;
    --footer-label: #6c9166;

    /* Feedback */
    --error: #b4462b;

    /* Type */
    --serif: 'Newsreader', Georgia, serif;
    --sans: 'Outfit', system-ui, -apple-system, sans-serif;
    --deva: 'Noto Sans Devanagari', 'Outfit', sans-serif;

    /* Shadows */
    --shadow-hero: 0 24px 60px rgba(15, 74, 41, 0.16);
    --shadow-stat: 0 12px 32px rgba(15, 74, 41, 0.12);
    --shadow-form: 0 12px 40px rgba(15, 74, 41, 0.07);
    --shadow-card: 0 2px 0 rgba(15, 74, 41, 0.04);

    /* Layout */
    --shell-max: 1240px;
    --shell-narrow-max: 1000px;
    --shell-pad: 32px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--green);
    text-decoration: none;
}

a:hover {
    color: var(--forest);
    text-decoration: underline;
}

::selection {
    background: var(--leaf);
    color: var(--forest);
}

/* The prototype set `outline: none` on inputs. Keyboard users still need a
   visible focus ring, so an accessible default is restored here. */
:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

h1,
h2,
h3,
p,
ul,
figure {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
}

/* Visually hidden, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 60;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--forest);
    color: #fff;
    text-decoration: none;
}

/* Set by app.js once it runs, so JS-only affordances stay hidden without it. */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.shell--narrow {
    max-width: var(--shell-narrow-max);
}

/* A full-bleed coloured band; its inner .shell keeps the content aligned. */
.band {
    padding-block: 72px;
}

.band--forest {
    background: var(--forest);
    color: var(--on-dark);
}

.band--sand {
    background: var(--sand);
    padding-block: 80px;
}

.band--green {
    background: var(--green);
    padding-block: 76px;
}

.page {
    padding-top: 72px;
    padding-bottom: 96px;
}

/* ==========================================================================
   4. Recurring patterns
   ========================================================================== */

/* --- Type ----------------------------------------------------------- */

.eyebrow {
    font-family: var(--deva);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
}

.eyebrow--brown {
    color: var(--brown);
}

.eyebrow--leaf {
    font-size: 15px;
    color: var(--leaf);
}

/* "Partner with us" is the one eyebrow with no Devanagari in it. */
.eyebrow--latin {
    font-family: var(--sans);
}

.display {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--forest);
    text-wrap: balance;
}

.display--hero {
    font-size: 62px;
    line-height: 1.04;
}

.display--page {
    font-size: 56px;
    line-height: 1.06;
}

.display--contact {
    font-size: 52px;
    line-height: 1.06;
}

.h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--forest);
}

.h2--wide {
    font-size: 46px;
    line-height: 1.1;
}

.h2--panel {
    font-size: 34px;
    letter-spacing: normal;
}

/* Page heads: eyebrow, then title, then an optional intro paragraph. The
   measure modifiers come from the design's per-page max-widths. */

.page__title {
    margin-top: 14px;
}

.page__title--20ch {
    max-width: 20ch;
}

.page__title--22ch {
    max-width: 22ch;
}

.page__lede {
    margin-top: 18px;
}

/* The Gallery head has no intro paragraph, so the title carries the gap. */
.page__title--gap {
    margin-bottom: 32px;
}

.page__lede--62ch {
    max-width: 62ch;
}

.page__lede--64ch {
    max-width: 64ch;
}

.micro-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.lede {
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.body-17 {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-muted);
}

.body-16 {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* A value the client has not supplied yet. The muted colour is deliberate:
   it marks the gap rather than hiding it. */
.pending {
    color: var(--pending);
}

/* --- Cards ------------------------------------------------------------ */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px;
}

/* --- Buttons ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 999px;
    padding: 16px 32px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn:hover {
    text-decoration: none;
}

.btn--block {
    width: 100%;
}

.btn--primary {
    background: var(--green);
    color: #fff;
}

.btn--primary:hover {
    background: var(--forest);
    color: #fff;
}

.btn--secondary {
    background: none;
    border: 1.5px solid var(--line-sage);
    color: var(--forest);
}

.btn--secondary:hover {
    border-color: var(--green);
    color: var(--forest);
}

.btn--small {
    padding: 14px 26px;
    font-size: 15px;
}

.btn--donate {
    background: var(--amber);
    color: var(--amber-ink);
    box-shadow: 0 3px 0 var(--amber-shadow);
    padding: 18px 36px;
    font-size: 17px;
    font-weight: 700;
}

.btn--donate:hover {
    background: var(--amber-hover);
    color: var(--amber-ink);
}

/* The header sits the donate button at a smaller size with a tighter shadow. */
.btn--donate-sm {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 2px 0 var(--amber-shadow);
}

.btn--ghost-light {
    background: none;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 16px 36px;
}

.btn--ghost-light:hover {
    border-color: #fff;
    color: #fff;
}

/* --- Forms ------------------------------------------------------------ */

.field {
    width: 100%;
    padding: 15px 18px;
    border: 1.5px solid var(--line-warm);
    border-radius: 12px;
    background: var(--cream-raised);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
}

.field::placeholder {
    color: var(--ink-faint);
}

.field:focus {
    border-color: var(--green);
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

textarea.field {
    resize: vertical;
}

.field--invalid {
    border-color: var(--error);
}

.field-error {
    margin-top: 6px;
    font-size: 13px;
    color: var(--error);
}

.form-note {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--sand-note);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-muted);
}

.form-success {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(27, 122, 67, 0.3);
    border-radius: 14px;
    background: var(--leaf-tint);
    font-size: 15px;
    line-height: 1.55;
    color: var(--forest);
}

.fine-print {
    font-size: 13px;
    color: var(--ink-label);
    text-align: center;
}

/* --- Image slots ------------------------------------------------------ */

/* Renders a photograph when one exists, and the design's written brief when
   it does not, so an unfilled slot stays visibly marked. */
.slot {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--sand);
    border-radius: 18px;
}

.slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px dashed var(--line-dashed);
    background: var(--cream-raised);
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-faint);
}

.slot--circle {
    border-radius: 50%;
}

/* Documents and press clippings are scaled to fit whole, on a plain ground —
   cropping them to fill the slot just yields unreadable text. */
.slot--contain {
    background: var(--cream-raised);
    border: 1px solid var(--line);
}

.slot--contain img {
    object-fit: contain;
    padding: 6px;
}

/* ==========================================================================
   5. Chrome
   ========================================================================== */

/* --- Announcement bar -------------------------------------------------- */

.announce {
    padding: 8px var(--shell-pad);
    background: var(--forest);
    color: var(--on-dark-bar);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.announce__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 24px;
    row-gap: 4px;
}

.announce a {
    color: inherit;
}

.announce a:hover {
    color: #fff;
}

.announce__sep {
    opacity: 0.4;
}

/* --- Header ------------------------------------------------------------ */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 248, 241, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-warm);
}

.header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-block: 14px;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.wordmark:hover {
    text-decoration: none;
}

.wordmark__logo {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.wordmark__text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.wordmark__line-1 {
    color: var(--forest);
}

.wordmark__line-2 {
    color: var(--brown);
}

/* A third line under the name, smaller and spaced out so it reads as a
   descriptor rather than part of the name. It adds about 14px to a 56px lockup,
   so the sticky header keeps its height. */
.wordmark__strapline {
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    min-width: 0;
}

.nav__link {
    padding: 6px 0;
    /* The inactive border is transparent so nothing shifts on state change. */
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--nav-ink);
}

.nav__link:hover {
    color: var(--forest);
    text-decoration: none;
}

.nav__link.is-active {
    color: var(--forest);
    border-bottom-color: var(--leaf);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Shown only below the nav breakpoint; see § 7. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-warm);
    border-radius: 50%;
    background: none;
    color: var(--forest);
    cursor: pointer;
}

.nav-drawer {
    display: none;
    border-top: 1px solid var(--line-warm);
    background: var(--cream);
}

.nav-drawer__inner {
    display: flex;
    flex-direction: column;
    padding-block: 8px;
}

.nav-drawer__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 16px;
    font-weight: 500;
    color: var(--nav-ink);
}

.nav-drawer__link:last-child {
    border-bottom: none;
}

.nav-drawer__link.is-active {
    color: var(--forest);
}

/* --- Footer ------------------------------------------------------------ */

.footer {
    padding: 64px var(--shell-pad) 32px;
    background: var(--forest-deep);
    color: var(--footer-text);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 56px;
    max-width: var(--shell-max);
    margin-inline: auto;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer__logo {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.footer__wordmark {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.2;
    color: #fff;
}

/* The wordmark is a single inline run with a <br>, so the strapline has to be
   made a block to sit under it. */
.footer__strapline {
    display: block;
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--footer-label);
}

.footer__blurb {
    max-width: 40ch;
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.65;
}

/* --- Follow us --------------------------------------------------------- */

/* Sits under "Reach us" in the same column, so it needs the gap that the
   column's own margin would otherwise have given it. */
.footer__heading--follow {
    margin-top: 28px;
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--footer-rule, rgba(255, 255, 255, 0.14));
    border-radius: 50%;
    color: var(--footer-text);
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

a.social__link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--footer-text);
    color: #fff;
    text-decoration: none;
}

a.social__link:focus-visible {
    outline: 2px solid var(--leaf);
    outline-offset: 2px;
}

/* No URL in config yet. Dashed and dimmed, matching the "to be added"
   treatment used elsewhere, and deliberately not a link. */
.social__link--pending {
    border-style: dashed;
    border-color: var(--footer-label);
    color: var(--footer-label);
    cursor: default;
}

.footer__heading {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--footer-label);
}

.footer__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
}

.footer__list a {
    color: var(--footer-text);
}

.footer__list a:hover {
    color: #fff;
}

.footer__muted {
    color: var(--footer-label);
}

.footer__address {
    max-width: 34ch;
    line-height: 1.5;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--shell-max);
    margin: 48px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: var(--footer-label);
}

.footer__tagline {
    font-family: var(--deva);
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer__legal a {
    color: var(--footer-label);
}

.footer__legal a:hover {
    color: #fff;
}

/* ==========================================================================
   6. Pages
   ========================================================================== */

/* --- Home: hero -------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 64px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--leaf-tint);
    color: var(--green);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero__title {
    margin-top: 24px;
}

.hero__subline {
    margin-top: 16px;
    font-family: var(--deva);
    font-size: 22px;
    font-weight: 500;
    color: var(--brown);
}

.hero__body {
    max-width: 52ch;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.hero__media {
    position: relative;
    width: 100%;
    min-width: 0;
}

.hero__image {
    height: 520px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-hero);
}

.hero__image .slot {
    border-radius: 24px;
}

/* --- Hero sequence ----------------------------------------------------- */

/* Four pictures of the work, then the Certificate of Incorporation. The
   certificate arrives letterboxed on the pale document ground rather than
   cropped to fill, because a cropped document stops being evidence —
   Media::fitFor() applies that rule, the same as everywhere else on the site.

   Crossfade only. A slow zoom would set the certificate's type swimming and
   fight the stillness of the stat card sitting across the corner.

   THE TWO DURATIONS BELOW ARE THE ONLY PLACE TIMING IS SET. app.js reads
   --hero-hold off this element rather than keeping its own copy, so the ticks
   can no longer drift out of step with the frames. Change them here. */
.hero-seq {
    --hero-hold: 4000ms;
    --hero-fade: 600ms;

    position: relative;
    isolation: isolate;
}

.hero-seq__frames {
    height: 100%;
}

.hero-seq__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--hero-fade) ease-in-out;
}

.hero-seq__frame.is-current {
    opacity: 1;
}

/* Bottom-right, because the stat card occupies the bottom-left corner. The
   gradient is only as tall as the text needs; over a full-height scrim these
   photographs go muddy. */
/* The stat card lies across the bottom-left corner: it is about 89px tall at
   bottom: -28px, so it reaches 61px up into the picture. The caption used to
   hold a 120px lane clear of it on the left, which was not wide enough — the
   card is nearer 300px, and it was eating the first word. Lifting the text
   above the card instead clears it outright and gives the caption the full
   width back. The gradient still runs to the bottom edge; the card simply sits
   on top of its lower part, which is opaque and reads fine. */
.hero-seq__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 48px 26px 76px;
    background: linear-gradient(to top, rgba(11, 58, 33, 0.88), rgba(11, 58, 33, 0));
    border-radius: 0 0 24px 24px;
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
    color: var(--on-dark);
}

/* Ticks rather than dots: length of the sequence, position in it, and time
   left, in one mark. Top-right, clear of both the caption and the stat card. */
.hero-seq__ticks {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    display: flex;
    gap: 6px;
}

.hero-seq__tick {
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    overflow: hidden;
}

.hero-seq__tick:hover {
    background: rgba(255, 255, 255, 0.7);
}

.hero-seq__tick:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Fills across while its frame runs, then resets. Driven by a class rather
   than an animation name so a re-selected frame restarts cleanly. */
.hero-seq__tick-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

.hero-seq__tick.is-current .hero-seq__tick-fill {
    transform: scaleX(1);
    transition: transform var(--hero-hold) linear;
}

.hero-seq__tick.is-current.is-paused .hero-seq__tick-fill,
.hero-seq__tick.is-current.is-instant .hero-seq__tick-fill {
    transition: none;
}

.hero-seq__tick.is-current.is-paused .hero-seq__tick-fill {
    transform: scaleX(1);
}

/* White ticks would all but vanish against the certificate's pale ground, so
   they invert while a document is showing. app.js sets .is-document rather than
   the CSS testing for it with :has() — this is the one place on the site that
   would have needed :has(), and a class works in every browser that runs the
   rest of the script. */
.hero-seq.is-document .hero-seq__tick {
    background: rgba(26, 43, 33, 0.22);
}

.hero-seq.is-document .hero-seq__tick:hover {
    background: rgba(26, 43, 33, 0.4);
}

.hero-seq.is-document .hero-seq__tick-fill {
    background: var(--forest);
}

.hero-seq.is-document .hero-seq__tick:focus-visible {
    outline-color: var(--forest);
}

/* Nobody asked for the hero to move. Show the first frame, let the ticks do
   the navigating, and run no timer at all (app.js checks the same query). */
@media (prefers-reduced-motion: reduce) {
    .hero-seq__frame {
        transition: none;
    }

    .hero-seq__tick.is-current .hero-seq__tick-fill {
        transform: scaleX(1);
        transition: none;
    }
}

/* --- Hero focal points -------------------------------------------------
   Same rule as the programme cards: the face is the subject. The hero box is
   about 540x520, so it crops far less than a card band, but the upright frames
   still need placing. See "Focal points" further down for the arithmetic. */
.hero-seq__frame .slot img[src*="plantation-drive"]       { object-position: center 16%; }
.hero-seq__frame .slot img[src*="school-foundation-day"]  { object-position: center 0; }
.hero-seq__frame .slot img[src*="protecting-nature"]      { object-position: center 16%; }

.stat-card {
    position: absolute;
    left: -28px;
    bottom: -28px;
    display: flex;
    gap: 26px;
    padding: 20px 24px;
    border: 1px solid var(--line-warm);
    border-radius: 18px;
    background: var(--cream);
    box-shadow: var(--shadow-stat);
}

.stat-card__divider {
    width: 1px;
    background: var(--line-warm);
}

.stat-card__value {
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1;
}

.stat-card__value--green {
    color: var(--green);
}

.stat-card__value--brown {
    color: var(--brown);
}

.stat-card__value--amber {
    color: var(--amber);
}

.stat-card__label {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-light);
}

/* --- Home: mission ----------------------------------------------------- */

.mission {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.mission__statement {
    margin-top: 24px;
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.42;
    text-wrap: pretty;
}

.mission__statement em {
    font-style: normal;
    color: var(--leaf);
}

/* --- Home: pillars ----------------------------------------------------- */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-top: 88px;
    padding-bottom: 24px;
}

.section-head__text {
    max-width: 58ch;
}

.section-head h2,
.section-head p {
    margin-top: 14px;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 88px;
}

/* Five cards in a two-column grid leaves a hole in the last row. An odd card
   in final position stretches across instead — which suits Others, the one
   pillar that is a container rather than a subject. Written as a rule about
   oddness, not about Others, so a sixth pillar pairs up again by itself. */
.pillar-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.pillar-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.pillar-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Pillar identity is carried by colour alone — the design uses no icons. */
.swatch {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
}

.swatch--sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.pillar-card__name {
    font-family: var(--deva);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--forest);
}

.pillar-card__en {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.pillar-card__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line-faint);
}

.pillar-card__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pillar-card__programme {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.pillar-card__gloss {
    font-size: 14px;
    color: var(--ink-light);
}

/* --- Home: how we work ------------------------------------------------- */

.approach {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.approach__image {
    height: 400px;
    border-radius: 22px;
    overflow: hidden;
}

.approach__image .slot {
    border-radius: 22px;
}

.approach__list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.approach h2 {
    margin: 14px 0 28px;
}

.approach__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.approach__number {
    width: 34px;
    flex: none;
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.3;
    color: var(--leaf);
}

.approach__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.approach__body {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* --- Home: CSR --------------------------------------------------------- */

.csr {
    padding-block: 88px;
}

.csr__intro {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
}

.csr__intro h2 {
    margin-top: 14px;
    font-size: 44px;
    line-height: 1.1;
}

.csr__intro p {
    margin-top: 16px;
}

.csr__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
}

.csr__title {
    margin-bottom: 10px;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--green);
}

/* --- Home: donation band ----------------------------------------------- */

.donate-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1000px;
    margin-inline: auto;
}

.donate-band__text {
    max-width: 56ch;
}

.donate-band h2 {
    color: #fff;
}

.donate-band p {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--on-dark-2);
}

.donate-band__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 260px;
}

/* --- About ------------------------------------------------------------- */

.about__story {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: start;
    margin-top: 48px;
}

.about__prose {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.about__image {
    height: 420px;
    border-radius: 22px;
    overflow: hidden;
}

.about__image .slot {
    border-radius: 22px;
}

/* The photograph is a tall collage of one observance. Anchored to the top, the
   crop keeps its main frame whole instead of slicing through the middle row. */
.about__image .slot img {
    object-position: center top;
}

/* --- The namesake ------------------------------------------------------ */

/* A quiet strip, not a card: the portrait and four lines of who he was. */
.namesake {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 56px;
    padding: 32px 36px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--sand-note);
}

.namesake__photo {
    width: 132px;
    height: 132px;
    flex: none;
    border-radius: 50%;
}

.namesake__photo img {
    object-position: center top;
}

.namesake__label {
    color: var(--ink-label);
}

.namesake__name {
    margin-top: 6px;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--forest);
}

.namesake__name-hi {
    margin-top: 2px;
    font-family: var(--deva);
    font-size: 19px;
    color: var(--brown);
}

.namesake__years {
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--ink-light);
}

.namesake__body {
    margin-top: 14px;
    max-width: 60ch;
}

.values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 64px;
}

.values .card {
    padding: 30px;
}

.value__hi {
    font-family: var(--deva);
    font-size: 22px;
    font-weight: 600;
    color: var(--brown);
}

.value__en {
    margin-top: 2px;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--forest);
}

.value__body {
    margin-top: 12px;
}

.board-heading {
    margin: 72px 0 24px;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    color: var(--forest);
}

.board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 760px;
}

.director {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px;
    border-radius: 20px;
    background: var(--sand);
}

.director__photo {
    width: 88px;
    height: 88px;
    flex: none;
}

.director__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
}

.director__role {
    margin-top: 2px;
    font-size: 15px;
    color: var(--ink-light);
}

/* The dashed border marks a strip still awaiting confirmed values. */
.registration {
    display: flex;
    flex-wrap: wrap;
    column-gap: 48px;
    row-gap: 24px;
    margin-top: 56px;
    padding: 28px 32px;
    border: 1px dashed var(--line-dashed);
    border-radius: 18px;
    background: var(--cream-raised);
}

.registration__label {
    letter-spacing: 0.1em;
}

.registration__value {
    margin-top: 4px;
    font-size: 18px;
    color: var(--ink);
}

/* --- School ------------------------------------------------------------ */

/* Sits between the hero and the first band, so it carries the gap on both
   sides. Dashed, like the About registration strip: the fields the school has
   not confirmed yet read "To be added" rather than being quietly dropped. */
.school-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 48px;
    /* A <dl>: its own default block margins are replaced outright. */
    margin: 8px 0 0;
    padding: 28px 32px;
    border: 1px dashed var(--line-dashed);
    border-radius: 18px;
    background: var(--cream-raised);
}

.school-facts__label {
    letter-spacing: 0.1em;
}

.school-facts__value {
    margin: 4px 0 0;
    font-size: 18px;
    color: var(--ink);
}

.school-band {
    margin-top: 72px;
}

.school-principles {
    padding-block: 88px;
}

.school-principles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 40px;
}

/* The homepage "How we work" layout with the photograph on the right, so two
   consecutive sand-and-photo bands do not read as the same block twice. */
.school-day {
    grid-template-columns: 1.1fr 0.9fr;
}

.school-photos {
    padding-block: 88px;
}

.school-photos__heading {
    margin-top: 14px;
    margin-bottom: 32px;
}

/* Three clippings, not the four Activities carries, so they fill the row
   instead of leaving a column empty. */
.press__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* --- Programmes -------------------------------------------------------- */

.programme-section {
    margin-top: 64px;
}

.programme-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--line);
}

.programme-section__hi {
    font-family: var(--deva);
    font-size: 28px;
    font-weight: 600;
    color: var(--forest);
}

.programme-section__en {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.programme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
}

/* The photograph runs edge to edge across the top, so the card's own padding
   moves inside onto the text block. */
.programme-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* One height for every card, so the grid reads as a grid.
   It has to be an explicit height, not an aspect-ratio: this is a flex child
   with `flex: none`, so a ratio leaves its height indefinite, the `.slot`
   inside resolves `height: 100%` against nothing, and every band collapses to
   its own image's intrinsic height — which is the ragged result a ratio was
   meant to avoid.
   220px is the smallest band that still clears the tallest focal requirement
   in the set (199px, protecting-nature); below that its faces cannot fit
   however the crop is positioned. */
.programme-card__media {
    height: 220px;
    flex: none;
    border-bottom: 1px solid var(--line);
}

/* The slot is already clipped by the card's own overflow, and its border would
   double up on the one above. A poster keeps its pale ground, which is what
   letterboxes it cleanly. */
.programme-card__media .slot {
    border: none;
    border-radius: 0;
}

/* --- Focal points ------------------------------------------------------
   These are documentary photographs of people, so the face is the subject: a
   crop that loses it loses the picture. One global object-position cannot do
   that job — measured against these fifteen frames, the faces sit anywhere
   from 7% down the image (nasha-mukti, three men standing close) to 64%
   (health-camp-wide, a desk under a tall ceiling). A single value satisfying
   both does not exist, so each photograph carries its own.

   TO ADD A NEW PHOTOGRAPH: find where the faces sit as a fraction of image
   height, f1 (top) to f2 (bottom), then

       v = (image width / image height) / (column width / 220)
       P = ((f1 + f2) / 2 - v / 2) / (1 - v)         clamped to 0%–100%

   P is the object-position. Above 1 means the subject is low in the frame and
   the value clamps to 100%; below 0 means it is high, and clamps to 0%.

   The default below is for a photograph nobody has measured yet. It is a
   fallback, not a recommendation — measure it. */
.programme-card__media .slot:not(.slot--contain) img {
    object-position: center 40%;
}

/* Subject high in the frame — people standing close to the camera, or a
   collage whose first panel carries the photograph that matters. */
.programme-card__media .slot img[src*="disaster-risk"]          { object-position: center 0; }
.programme-card__media .slot img[src*="grihni"]                 { object-position: center 0; }
.programme-card__media .slot img[src*="nasha-mukti"]            { object-position: center 5%; }
.programme-card__media .slot img[src*="school-foundation-day"]  { object-position: center 15%; }
.programme-card__media .slot img[src*="scientific-temper"]      { object-position: center 5%; }
.programme-card__media .slot img[src*="educating-child-labor"]  { object-position: center 9%; }
.programme-card__media .slot img[src*="plantation-drive"]       { object-position: center 37%; }
.programme-card__media .slot img[src*="protecting-nature"]      { object-position: center 30%; }

/* Subject low in the frame — seated at a desk, with height above them. */
.programme-card__media .slot img[src*="health-camp-hero"]       { object-position: center 61%; }
.programme-card__media .slot img[src*="health-camp-desk"]       { object-position: center 60%; }
.programme-card__media .slot img[src*="health-camp-wide"]       { object-position: center 69%; }

/* Already centred, or wide enough that the frame barely crops. Stated rather
   than left to the default, so the measurement is on record. */
.programme-card__media .slot img[src*="har-ghar-tiranga"]       { object-position: center 50%; }
.programme-card__media .slot img[src*="quality-education"]      { object-position: center 38%; }

.programme-card__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 28px 28px;
}

.programme-card__name {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.programme-card__gloss {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--green);
}

.programme-card__body {
    margin-top: 6px;
}

/* --- Activities -------------------------------------------------------- */

.timeline {
    display: flex;
    flex-direction: column;
    margin-top: 52px;
}

.timeline__entry {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 32px;
    align-items: start;
    padding-block: 32px;
    border-top: 1px solid var(--line-warm);
}

.timeline__date {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--brown);
}

.timeline__tag {
    margin-top: 4px;
    font-family: var(--deva);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.timeline__main {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 28px;
    align-items: start;
}

.timeline__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.timeline__body {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-muted);
}

.timeline__thumb {
    height: 130px;
    border-radius: 14px;
    overflow: hidden;
}

.timeline__thumb .slot {
    border-radius: 14px;
}

.timeline__empty {
    padding-block: 32px;
    border-top: 1px solid var(--line-warm);
    font-size: 17px;
    color: var(--ink-muted);
}

/* --- Activities: press coverage ---------------------------------------- */

.press {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--line-warm);
}

.press__heading {
    margin-top: 14px;
    margin-bottom: 32px;
}

.press__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.press__clipping {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--card);
}

/* A clipping is read, not cropped. They come in very different shapes, so each
   is scaled whole onto a common ground rather than sliced to a fixed frame. */
.press__clipping img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    padding: 12px;
    background: var(--cream-raised);
}

.press__caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-top: 1px solid var(--line);
}

.press__headline {
    font-family: var(--deva);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}

.press__meta {
    font-size: 13px;
    color: var(--ink-light);
}

/* --- Impact ------------------------------------------------------------ */

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 52px;
}

.metric__value {
    font-family: var(--serif);
    font-size: 44px;
    line-height: 1;
}

.metric__label {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.metric__note {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-light);
}

.promise {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 64px;
    padding: 56px;
    border-radius: 24px;
    background: var(--forest);
    color: var(--on-dark);
}

.promise h2 {
    color: #fff;
}

.promise__body {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--on-dark-1);
}

.promise__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.promise__item {
    display: flex;
    gap: 12px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--on-dark-3);
}

.promise__mark {
    color: var(--leaf);
}

/* --- Gallery ----------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 18px;
}

.gallery__tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

/* The occasional two-row tile is what gives the grid its rhythm. */
.gallery__tile--tall {
    grid-row: span 2;
}

/* Artwork is letterboxed rather than cropped, and its caption sits in a strip
   underneath — laid over the top it would cover the poster's own text. */
.gallery__tile--artwork {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: var(--cream-raised);
}

.gallery__tile--artwork .slot {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
}

.gallery__tile--artwork .gallery__caption {
    position: static;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: none;
    font-size: 12px;
    color: var(--ink-light);
}

.gallery__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(15, 74, 41, 0.85), transparent);
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
}

/* --- Legal pages -------------------------------------------------------- */

.legal__meta {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-label);
}

/* A single reading column. Set narrower than the page so long policy prose
   keeps a comfortable measure. */
.legal {
    max-width: 68ch;
    margin-top: 8px;
}

.legal h2 {
    margin-top: 48px;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--forest);
}

.legal p {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
}

.legal ul {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal li {
    position: relative;
    padding-left: 24px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.legal li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--leaf);
}

.legal strong {
    font-weight: 600;
    color: var(--ink);
}

.legal__crosslink {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line-warm);
    font-size: 16px;
}

/* --- Donate: ways to pay ----------------------------------------------- */

.pay-reference {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    margin-top: 40px;
    padding: 28px 32px;
    border: 1px solid var(--green);
    border-radius: 20px;
    background: var(--leaf-tint);
}

.pay-reference__code {
    margin-top: 6px;
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.1;
    color: var(--forest);
}

.pay-reference__amount {
    margin-top: 6px;
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.1;
    color: var(--green);
}

.pay-reference__note {
    flex-basis: 100%;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-muted);
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
    align-items: start;
}

.pay-card {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.pay-card__title {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--forest);
}

.pay-card__lead {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-muted);
}

.pay-card__action {
    margin-top: 20px;
}

.pay-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 18px;
    border-radius: 18px;
    background: var(--cream-raised);
}

.pay-qr img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

/* Placeholder until the client supplies the QR image. */
.pay-qr__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    padding: 20px;
    border: 1px dashed var(--line-dashed);
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-faint);
}

.pay-rows {
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
    padding-top: 14px;
    border-top: 1px solid var(--line-faint);
}

.pay-row:first-child {
    padding-top: 0;
    border-top: none;
}

.pay-row dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.pay-row dd {
    margin: 0;
    text-align: right;
}

/* Account numbers, IFSC codes and UPI IDs get read a character at a time, so
   they are set in a monospace face with the characters spaced out. Names and
   addresses stay in the body face. */
.pay-row dd {
    font-size: 16px;
    color: var(--ink);
}

.pay-value {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.pay-after {
    margin-top: 48px;
    padding: 40px;
    border-radius: 24px;
    background: var(--sand);
}

.pay-after__body {
    max-width: 60ch;
    margin: 12px 0 24px;
}

.pay-after__print {
    margin-top: 20px;
    text-align: left;
}

/* --- Contact ----------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.contact__intro {
    max-width: 46ch;
    margin: 18px 0 36px;
}

.contact__details {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact__row {
    padding-top: 18px;
    border-top: 1px solid var(--line-warm);
}

.contact__value {
    margin-top: 6px;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ink);
}

.form-card {
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--card);
    box-shadow: var(--shadow-form);
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 5px;
    border-radius: 999px;
    background: var(--sand);
}

.tabs__button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-faint);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* No animation on tab change — the design asks for an instant switch. */
.tabs__button.is-active {
    background: #fff;
    color: var(--forest);
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-stack--tight {
    gap: 16px;
}

.amount-fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

.amount-fieldset__legend {
    margin-bottom: 18px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.amount {
    padding: 16px 8px;
    border: 1.5px solid var(--line-warm);
    border-radius: 14px;
    background: var(--cream-raised);
    color: var(--ink-muted);
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.amount.is-selected {
    background: var(--leaf-tint);
    border-color: var(--green);
    color: var(--forest);
}

/* The radio itself is hidden; the label carries the visual state. Keyboard
   focus still lands on the input, so mirror the ring onto the label. */
.amount:focus-within {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* ==========================================================================
   7. Responsive
   ==========================================================================
   Mobile behaviour was not part of the approved design. This follows the
   approach the handoff recommends: collapse the nav to a drawer while keeping
   Donate visible, drop multi-column grids to one column, move the hero stat
   card below the image, reduce the display scale, and make the gallery two
   columns.
   ========================================================================== */

@media (max-width: 1080px) {
    .nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .header__actions {
        margin-left: auto;
    }

    .nav-drawer.is-open {
        display: block;
    }

    .display--hero {
        font-size: 46px;
    }

    .display--page {
        font-size: 42px;
    }

    .display--contact {
        font-size: 40px;
    }

    .h2,
    .h2--wide,
    .csr__intro h2 {
        font-size: 34px;
    }

    .mission__statement {
        font-size: 28px;
    }

    .hero,
    .approach,
    .school-day,
    .about__story,
    .contact,
    .promise {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .namesake {
        grid-template-columns: 1fr;
        gap: 22px;
        justify-items: start;
        padding: 28px;
    }

    /* The negative offset would clip once the image is full width. */
    .stat-card {
        position: static;
        margin-top: 24px;
    }

    .hero__image {
        height: 380px;
    }

    /* The stat card is no longer lying across the bottom-left corner, so the
       caption does not need to hold a lane clear of it. */
    .hero-seq__caption {
        padding-bottom: 20px;
        text-align: left;
    }

    .promise {
        padding: 36px;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .metrics,
    .press__grid,
    .school-facts,
    .school-principles__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pay-methods {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    :root {
        --shell-pad: 24px;
    }

    .pillar-grid,
    .csr__grid,
    .values,
    .board,
    .programme-grid,
    .school-facts,
    .school-principles__grid {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .press__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline__entry,
    .timeline__main {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .timeline__thumb {
        max-width: 320px;
    }

    .form-card,
    .pay-card {
        padding: 24px;
    }

    .pay-after {
        padding: 28px;
    }

    .pay-row {
        justify-content: flex-start;
    }

    .pay-row dd {
        text-align: left;
    }
}

@media (max-width: 560px) {
    :root {
        --shell-pad: 20px;
    }

    .display--hero {
        font-size: 36px;
    }

    .display--page {
        font-size: 32px;
    }

    .display--contact {
        font-size: 30px;
    }

    .h2,
    .h2--wide,
    .csr__intro h2 {
        font-size: 28px;
    }

    .mission__statement {
        font-size: 24px;
    }

    .band,
    .band--sand,
    .band--green {
        padding-block: 56px;
    }

    .page {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .section-head {
        padding-top: 56px;
    }

    .pillar-grid {
        padding-bottom: 56px;
    }

    .csr,
    .school-principles,
    .school-photos {
        padding-block: 56px;
    }

    .btn {
        padding: 14px 26px;
    }

    .btn--donate {
        padding: 16px 30px;
    }

    .stat-card {
        flex-wrap: wrap;
        gap: 20px;
    }

    .stat-card__divider {
        display: none;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .promise {
        padding: 28px;
    }

    .pillar-card {
        padding: 24px;
    }
}