:root {
  --m-rescued: 63.6%; --m-restored: 100%;
  /* the identity transition: heritage green -> azure */
  --grad:      linear-gradient(120deg, #006B51, #0059C9);
  --grad-dark: linear-gradient(120deg, #00503C, #00479F);
  --grad-deep: linear-gradient(135deg, #062A21, #061D40);
  --grad-wash-a: linear-gradient(135deg, rgba(0,107,81,0.05), rgba(0,89,201,0.07));
  --grad-wash-b: linear-gradient(315deg, rgba(0,107,81,0.05), rgba(0,89,201,0.07));
}

  html { scroll-behavior: smooth; }
  body { -webkit-font-smoothing: antialiased; letter-spacing: -0.011em; }

  /* Lenis smooth scroll */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* Parallax frames: image is oversized so scrub movement never reveals an edge */
  .para { overflow: hidden; position: relative; }
  .para img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

  /* SplitType line rows — mask the rise */
  .split-lines { overflow: hidden; }
  .split-lines .line { overflow: hidden; display: block; }

  /* Swiss discipline: very large, very light. Weight carries no emphasis — size does. */
  .h-hero {
    font-size: clamp(3rem, 8.4vw, 6.6rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  .h-sec {
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.028em;
  }
  .h-sub {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .h-num {
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

  /* Eyebrow: same family, small, letterspaced — no second typeface. */
  .eyebrow {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* The measure — animated by GSAP when present, full width otherwise */
  .bar { width: 0; transition: width 1500ms cubic-bezier(.22,.85,.3,1); }
  .measure-in .bar-rescued  { width: var(--m-rescued); }
  .measure-in .bar-restored { width: var(--m-restored); }
  .no-js-anim .bar-rescued  { width: var(--m-rescued); }
  .no-js-anim .bar-restored { width: var(--m-restored); }



  /* ---- Full-bleed image bands with overlaid text ----
     Scrim is >= 0.62 black everywhere text sits, which guarantees >= 4.5:1
     for white text over ANY photograph (worst case: a pure-white pixel). */
  .band { position: relative; display: flex; align-items: flex-end;
          min-height: 82vh; overflow: hidden; background: #0A0A0A; }
  /* the hero runs up under the sticky header, which floats over it */
  main > .band:first-child { margin-top: -5rem; }
  .band-media { position: absolute; inset: -10% 0; }
  .band-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
  /* The vignette is now the identity gradient: a green->azure glaze across
     the photo, under a dark ramp that keeps the same alpha profile the black
     scrim had — so the AA text guarantee carries over unchanged. */
  .band-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top,
        rgba(4,18,14,0.90) 0%,
        rgba(4,16,22,0.78) 40%,
        rgba(4,14,30,0.64) 70%,
        rgba(4,12,34,0.45) 85%,
        rgba(4,10,38,0.30) 100%),
      linear-gradient(110deg, rgba(0,107,81,0.45), rgba(0,89,201,0.45));
  }
  .band-inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto;
                padding: 0 1.5rem 4.5rem; color: #FFFFFF; }
  @media (min-width: 640px) { .band-inner { padding: 0 2.5rem 6rem; } }
  .band-inner .lead { color: rgba(255,255,255,0.82); }
  .band-fig { position: absolute; right: 1.5rem; bottom: 1.25rem;
              font-size: 0.72rem; color: rgba(255,255,255,0.55); }

  /* ---- Record dashboard ----
     Series palette #1F7AD4 / #785CBF / #AF5600 passes the categorical checks
     (lightness band, chroma floor, CVD separation, normal-vision floor,
     contrast vs white). Do not substitute without re-validating. */
  .chart-tab {
    min-height: 40px; padding: 0 1.15rem; border-radius: 999px;
    font-size: 0.9rem; color: #364159; white-space: nowrap;
    transition: background-color 220ms ease, color 220ms ease;
  }
  .chart-tab[aria-pressed="true"] { background: #0A0A0A; color: #FFFFFF; }
  .chart-tab[aria-pressed="false"]:hover { background: rgba(10,10,10,0.06); }

  /* KPI tiles — value in ink, identity carried by the swatch */
  .kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(10,10,10,0.12); }
  @media (min-width: 900px) { .kpi-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .kpi { background: #FFFFFF; padding: 1.4rem 1.5rem 1.6rem; }
  .kpi-key { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
  .kpi-dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
  .kpi-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #5B6670; }
  /* proportional figures on tile values; tabular is reserved for the
     table rows and axis ticks, where digits align vertically */
  .kpi-value { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -0.04em;
               font-variant-numeric: proportional-nums; color: #0A0A0A; }
  .kpi-lead .kpi-value { color: #0A0A0A; }
  .kpi-scope { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #5B6670; }

  .chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
  .lg-item { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: #364159; }
  .lg-dot { width: 10px; height: 10px; border-radius: 2px; }

  .chart-plot { position: relative; }
  .chart-tip {
    position: absolute; top: 8px; transform: translateX(-50%);
    background: #0A0A0A; color: #FFFFFF; padding: 0.7rem 0.85rem; border-radius: 6px;
    font-size: 0.82rem; min-width: 190px; pointer-events: none; opacity: 0;
    transition: opacity 160ms ease; z-index: 5;
  }
  .chart-tip.is-on { opacity: 1; }
  .tip-year { font-weight: 500; letter-spacing: 0.04em; margin-bottom: 0.5rem; color: rgba(255,255,255,0.65); font-size: 0.72rem; text-transform: uppercase; }
  .tip-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.14rem 0; }
  .tip-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
  .tip-k { flex: 1; color: rgba(255,255,255,0.8); }
  .tip-v { font-variant-numeric: tabular-nums; }

  .chart-cross { opacity: 0; transition: opacity 150ms ease; }
  .chart-dot { transition: r 150ms ease; }
  .chart-dot.is-on { r: 6; }
  .chart-group { transition: opacity 200ms ease; }
  .chart-group.is-dim { opacity: 0.25; }
  .chart-yearlabel { transition: fill 180ms ease; }
  .chart-yearlabel.is-on { fill: #0A0A0A; font-weight: 500; }
  .chart-hit { cursor: crosshair; outline: none; }
  .chart-hit:focus-visible { fill: rgba(31,122,212,0.08); stroke: #1F7AD4; stroke-width: 2; }

  /* ---- Stage photo drop-downs ----
     Opens on hover, on keyboard focus, and on click. Touch devices (no hover)
     get the photo already open, so nothing is unreachable there. */
  .stage-toggle { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem;
                  min-height: 44px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
                  text-transform: uppercase; color: #5B6670; transition: color 240ms ease; }
  .stage:hover .stage-toggle, .stage-toggle:hover, .stage-toggle:focus-visible { color: #0A0A0A; }
  .stage-chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor;
                border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
                transition: transform 420ms cubic-bezier(.22,.85,.3,1); }
  .stage:hover .stage-chev,
  .stage-toggle[aria-expanded="true"] .stage-chev { transform: rotate(-135deg) translateY(2px); }

  /* max-height rather than the 0fr->1fr grid trick: `overflow:hidden` on a grid
     item zeroes its base size, so `1fr` resolves to 0 in an auto-height grid.
     The frame height is capped by clamp() below, so a fixed ceiling is safe. */
  .stage-drop { max-height: 0; overflow: hidden;
                transition: max-height 560ms cubic-bezier(.22,.85,.3,1); }
  .stage-drop figure { transform: translateY(-16px); opacity: 0;
                       transition: transform 560ms cubic-bezier(.22,.85,.3,1), opacity 380ms ease; }
  .stage:hover .stage-drop, .stage:focus-within .stage-drop,
  .stage-drop.is-open { max-height: 520px; }
  .stage:hover .stage-drop figure, .stage:focus-within .stage-drop figure,
  .stage-drop.is-open figure { transform: none; opacity: 1; }

  .stage-frame { overflow: hidden; height: clamp(190px, 24vw, 300px); }
  .stage-frame img { width: 100%; height: 100%; object-fit: cover; }

  @media (hover: none) {
    .stage-drop { max-height: none; }
    .stage-drop figure { transform: none; opacity: 1; }
    .stage-toggle { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stage-drop, .stage-drop figure, .stage-chev { transition: none; }
  }

  /* ---- Dataset disclosure ---- */
  .ds { border-top: 1px solid rgba(10,10,10,0.12); }
  .ds > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                  justify-content: space-between; gap: 1rem; padding: 1.4rem 0; min-height: 44px;
                  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
                  text-transform: uppercase; color: #5B6670; transition: color 200ms ease; }
  .ds > summary::-webkit-details-marker { display: none; }
  .ds > summary:hover { color: #0A0A0A; }
  .ds-chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor;
             border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
             transition: transform 320ms ease; flex: none; }
  .ds[open] > summary .ds-chev { transform: rotate(-135deg) translateY(2px); }


  /* ---- Vertical timeline (programmes) ---- */
  .vt { margin-top: 5rem; }
  .vt-item { display: grid; grid-template-columns: 74px 1fr; column-gap: 1.5rem; }
  @media (min-width: 900px) { .vt-item { grid-template-columns: 150px 1fr; column-gap: 3.5rem; } }
  .vt-year { text-align: right; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1;
             letter-spacing: -0.04em; color: #0A0A0A; padding-top: 0.15rem; }
  .vt-body { position: relative; border-left: 1px solid rgba(10,10,10,0.14);
             padding-left: 1.75rem; padding-bottom: 5rem; }
  @media (min-width: 900px) { .vt-body { padding-left: 3rem; } }
  .vt-item:last-child .vt-body { border-left-color: transparent; }
  .vt-item:last-child .vt-body::before {
    content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 3.5rem;
    background: rgba(10,10,10,0.14);
  }
  .vt-dot { position: absolute; left: -6px; top: 0.45rem; width: 11px; height: 11px;
            border-radius: 999px; background: #0059C9; box-shadow: 0 0 0 4px #FFFFFF; }
  .vt-place { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
              text-transform: uppercase; color: #5B6670; margin-top: 0.5rem; }

  /* tag row on each shelter home (Education / Healthcare / Development) */
  .tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tag { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
         color: #0059C9; border: 1px solid rgba(0,89,201,0.3); border-radius: 999px;
         padding: 0.45rem 0.9rem; line-height: 1; }

  /* ---- Click-to-play video (no YouTube request until asked) ---- */
  .vplayer { position: relative; aspect-ratio: 16 / 9; background: #0A0A0A;
             overflow: hidden; margin-top: 2rem; }
  .vplay { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
           cursor: pointer; border: 0; padding: 0; background: none; }
  .vplay img { width: 100%; height: 100%; object-fit: cover;
               transition: transform 700ms cubic-bezier(.22,.85,.3,1), opacity 350ms ease; }
  .vplay:hover img, .vplay:focus-visible img { transform: scale(1.045); opacity: 0.82; }
  .vplay-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
               width: 74px; height: 74px; border-radius: 999px; background: rgba(10,10,10,0.55);
               backdrop-filter: blur(4px); display: grid; place-items: center;
               transition: background-color 260ms ease, transform 400ms cubic-bezier(.22,.85,.3,1); }
  .vplay:hover .vplay-btn { background: #0059C9; transform: translate(-50%,-50%) scale(1.08); }
  .vplay-btn::after { content: ""; width: 0; height: 0; margin-left: 5px;
                      border-left: 20px solid #FFFFFF; border-top: 12px solid transparent;
                      border-bottom: 12px solid transparent; }
  .vplay-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem;
                 background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0));
                 color: #FFFFFF; font-size: 0.8rem; text-align: left; }
  .vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  @media (prefers-reduced-motion: reduce) { .vplay img, .vplay-btn { transition: none; } }

  /* ---- Donation flow ---- */
  .is-hidden { display: none !important; }
  .df-progress { margin-bottom: 2.5rem; }
  .df-progress-head { display: flex; justify-content: space-between; align-items: baseline;
                      font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
                      text-transform: uppercase; color: #5B6670; margin-bottom: 0.9rem; }
  .df-track { height: 3px; background: rgba(10,10,10,0.10); }
  .df-bar { height: 100%; background: #0059C9; transition: width 480ms cubic-bezier(.22,.85,.3,1); }

  .df-option { display: block; border: 1px solid rgba(10,10,10,0.14); padding: 1.35rem 1.5rem;
               margin-bottom: 0.75rem; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
  .df-option:hover { border-color: rgba(0,89,201,0.5); }
  .df-option.is-active { border-color: #0059C9; background: rgba(0,89,201,0.04); }
  .df-radio { position: absolute; opacity: 0; pointer-events: none; }
  .df-option:focus-within { outline: 3px solid #0059C9; outline-offset: 3px; }
  .df-option-body { display: block; }
  .df-option-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .df-option-title { font-size: 1.15rem; letter-spacing: -0.02em; }
  .df-option-amt { font-size: 1.35rem; letter-spacing: -0.03em; color: #0059C9; white-space: nowrap; }
  .df-option-desc { display: block; margin-top: 0.6rem; color: #364159; font-size: 0.95rem; line-height: 1.6; }
  .df-custom-wrap { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
  .df-rupee { color: #5B6670; }
  .df-custom { max-width: 240px; }

  .df-grid { display: grid; gap: 1.25rem; }
  @media (min-width: 700px) { .df-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .df-field { display: block; margin-bottom: 1.25rem; }
  .df-label { display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
              text-transform: uppercase; color: #5B6670; margin-bottom: 0.6rem; }
  .df-label i { color: #0059C9; font-style: normal; }
  .df-input { width: 100%; background: #FFFFFF; border: 1px solid rgba(10,10,10,0.18);
              padding: 0.85rem 1rem; font: inherit; color: #0A0A0A; min-height: 48px; }
  .df-input:focus { outline: none; border-color: #0059C9; box-shadow: 0 0 0 3px rgba(0,89,201,0.15); }
  .df-hint { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: #5B6670; }

  .df-summary { border-top: 1px solid rgba(10,10,10,0.12); }
  .df-row { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 0.9rem 0;
            border-bottom: 1px solid rgba(10,10,10,0.08); }
  @media (min-width: 620px) { .df-row { grid-template-columns: 180px 1fr; gap: 1.5rem; } }
  .df-row dt { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
               text-transform: uppercase; color: #5B6670; padding-top: 0.15rem; }
  .df-row dd { color: #0A0A0A; }

  .df-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
  .df-btn { min-height: 52px; padding: 0 2rem; border-radius: 999px; font: inherit;
            transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
  .df-btn-primary { background: #0059C9; color: #FFFFFF; border: 1px solid #0059C9; }
  .df-btn-primary:hover { background: #00479F; border-color: #00479F; }
  .df-btn-ghost { background: transparent; border: 1px solid rgba(10,10,10,0.25); color: #0A0A0A; }
  .df-btn-ghost:hover { border-color: #0059C9; color: #0059C9; }

  .df-note { margin-top: 1.25rem; font-size: 0.9rem; color: #5B6670; line-height: 1.6; }
  .df-state { padding: 2rem 0; }
  .df-state-title { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; }
  .df-error { margin-top: 1.5rem; padding: 0.9rem 1.1rem; border-left: 3px solid #A63D2A;
              background: rgba(166,61,42,0.06); color: #7A2C1E; font-size: 0.95rem; }

  /* ══════ Story scroll-sequence (About) ══════
     Portrait left, text centre, timeline rail right. Scrolling through the
     track advances the active year; the icons stay clickable/focusable so
     keyboard users can jump (scroll alone is not reachable by keyboard). */
  .sy-track { position: relative; }
  .sy-stage { display: block; }

  .sy-panels { position: relative; }
  .sy-item { display: grid; gap: 2rem; align-items: center; }
  .sy-portrait { overflow: hidden; background: #EFF4FB; aspect-ratio: 3 / 4; }
  .sy-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .sy-text { text-align: center; }
  .sy-date { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.95; letter-spacing: -0.045em; color: #0A0A0A; }
  .sy-kicker { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
               color: #0059C9; margin-top: 0.9rem; }
  .sy-title { font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -0.02em; margin-top: 1.1rem; color: #0A0A0A; }
  .sy-body { margin-top: 1.1rem; color: #364159; line-height: 1.7; max-width: 34ch; margin-inline: auto; }

  /* the right-hand rail */
  .sy-rail { display: none; }
  .sy-rail li { position: relative; display: grid; grid-template-columns: 46px auto;
                align-items: center; column-gap: 0.9rem; padding: 0.45rem 0; }
  .sy-year { font-size: 0.85rem; color: #5B6670; font-variant-numeric: tabular-nums;
             white-space: nowrap; justify-self: start;
             transition: color 260ms ease, transform 320ms cubic-bezier(.22,.85,.3,1); }
  .sy-rail li.is-active .sy-year { color: #0A0A0A; transform: translateX(-2px); }

  /* the sequence is sticky at every width — only the proportions change */
  .sy-track { height: 560vh; }
  .sy-stage { position: sticky; top: 5rem; height: calc(100svh - 5rem);
              display: flex; align-items: center; }
  .sy-grid { display: grid; width: 100%; align-items: center;
             grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; }
  .sy-panels { grid-column: 1; position: relative; min-height: 62svh; }
  .sy-item { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr;
             grid-template-rows: auto auto; align-content: center; gap: 1.5rem;
             opacity: 0; pointer-events: none; transition: opacity 460ms ease; }
  .sy-item.is-active { opacity: 1; pointer-events: auto; }
  .sy-portrait { max-height: 34svh; }
  .sy-rail { display: block; grid-column: 2; position: relative; }
  .sy-rail li { grid-template-columns: 34px; }        /* icons only on small screens */
  .sy-rail .sy-year { display: none; }
  .sy-rail .ct-icon { width: 34px; height: 34px; }
  .sy-rail .ct-icon svg { width: 15px; height: 15px; }
  .sy-rail ol::before { left: 17px; }
  .sy-date { font-size: clamp(2.2rem, 11vw, 3rem); }
  .sy-body { font-size: 0.92rem; }

  @media (min-width: 900px) {
    .sy-track { height: 620vh; }
    .sy-stage { height: calc(100vh - 5rem); }
    .sy-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) auto;
               gap: 3.5rem; }
    /* .sy-item is absolutely positioned, so it is NOT a grid item of
       .sy-panels — subgrid has nothing to inherit. Each item therefore
       declares the same two tracks itself. */
    .sy-panels { grid-column: 1 / 3; min-height: 62vh; }
    .sy-item { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
               grid-template-rows: auto; column-gap: 3.5rem; }
    .sy-portrait { max-height: 62vh; }
    .sy-rail li { grid-template-columns: 46px auto; }
    .sy-rail .sy-year { display: block; }
    .sy-rail .ct-icon { width: 46px; height: 46px; }
    .sy-rail .ct-icon svg { width: 19px; height: 19px; }
    .sy-rail ol::before { left: 23px; }
    .sy-item.is-active { opacity: 1; pointer-events: auto; }
    .sy-portrait { max-height: 62vh; }
    /* spine sits behind the icon column (icons are 46px, so its centre is 23px) */
    .sy-rail { display: block; grid-column: 3; position: relative; }
    .sy-rail ol { position: relative; }
    .sy-rail ol::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px;
                          width: 1px; background: rgba(10,10,10,0.14); }
  }

  /* the icon button — unchanged from the previous timeline */
  .ct-icon {
    width: 46px; height: 46px; border-radius: 999px; background: #FFFFFF;
    border: 1px solid rgba(10,10,10,0.16); display: grid; place-items: center;
    cursor: pointer; padding: 0; position: relative; flex: none;
    transition: border-color 300ms ease, background-color 300ms ease, transform 420ms cubic-bezier(.22,.85,.3,1);
  }
  .ct-icon svg { width: 19px; height: 19px; overflow: visible; }
  .ct-icon .ct-ring {
    fill: none; stroke: #0059C9; stroke-width: 1.5; opacity: 0;
    stroke-dasharray: 88; stroke-dashoffset: 88;
    transition: stroke-dashoffset 620ms cubic-bezier(.22,.85,.3,1), opacity 240ms ease;
  }
  .ct-icon .ct-glyph {
    fill: none; stroke: #364159; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 300ms ease, transform 520ms cubic-bezier(.22,.85,.3,1);
    transform-origin: 50% 50%;
  }
  .ct-icon:hover, .ct-icon:focus-visible { border-color: #0059C9; transform: scale(1.09); outline: none; }
  .ct-icon:focus-visible { box-shadow: 0 0 0 4px rgba(0,89,201,0.22); }
  .ct-icon:hover .ct-ring, .ct-icon:focus-visible .ct-ring { opacity: 1; stroke-dashoffset: 0; }
  .ct-icon:hover .ct-glyph, .ct-icon:focus-visible .ct-glyph { stroke: #0059C9; transform: rotate(90deg) scale(1.1); }
  .sy-rail li.is-active .ct-icon { background: #0059C9; border-color: #0059C9; transform: scale(1.06); }
  .sy-rail li.is-active .ct-glyph { stroke: #FFFFFF; }
  .sy-rail li.is-active .ct-ring { stroke: #FFFFFF; opacity: 1; stroke-dashoffset: 0; }

  @media (prefers-reduced-motion: reduce) {
    .ct-icon, .ct-ring, .ct-glyph, .sy-item, .sy-year { transition: none; }
  }

  /* ---- Year timeline ---- */
  .tl-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 3rem;
             border-bottom: 1px solid rgba(10,10,10,0.12); padding-bottom: 1.75rem; }
  .tl-year { font-size: clamp(3.4rem, 9vw, 7rem); line-height: 0.86; letter-spacing: -0.05em;
             font-variant-numeric: proportional-nums; color: #0A0A0A; min-width: 4ch; }
  .tl-stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; flex: 1; }
  .tl-stat { display: flex; flex-direction: column; gap: 0.35rem; }
  .tl-swatch { width: 22px; height: 4px; border-radius: 2px; }
  .tl-sv { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -0.035em; color: #0A0A0A; }
  .tl-sl { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #5B6670; }
  .tl-stem { transition: opacity 260ms ease; opacity: 0.44; }
  .tl-stem.is-on { opacity: 1; }
  .tl-stem.is-on .tl-label { fill: #0A0A0A; }
  .tl-label { transition: fill 200ms ease; }
  .tl-hit { cursor: pointer; outline: none; }
  .tl-hit:focus-visible { fill: rgba(31,122,212,0.08); stroke: #1F7AD4; stroke-width: 2; }
  .tl-hint { font-size: 0.8rem; color: #5B6670; }

  .rule { border-top: 1px solid rgba(10,10,10,0.12); }
  .rule-inv { border-top: 1px solid rgba(255,255,255,0.16); }

  /* Sticky header: solid in both states so nothing reads through it,
     inverting as it passes over the dark sections. */
  .site-head {
    background: #FFFFFF;
    transition: background-color 400ms ease, color 400ms ease;
  }
  /* 0.62 black guarantees >= 5.7:1 for white over any photograph beneath;
     over the solid dark sections it reads as the section itself. */
  .site-head.on-dark { background: rgba(10,10,10,0.62); backdrop-filter: blur(8px); }
  .site-head .logo-light { display: none; }
  .site-head.on-dark .logo-light { display: block; }
  .site-head.on-dark .logo-dark  { display: none; }
  .site-head.on-dark nav a { color: rgba(255,255,255,0.75); }
  .site-head.on-dark nav a:hover { color: #FFFFFF; }

  /* ---- 60 / 30 / 10 ----
     White carries the page, black is the secondary field (hero + photo bands
     + footer), and the brand green is reserved for the single most important
     block on each page plus every call to action. */
  .sect-brand { background: #0059C9; color: #FFFFFF; }
  .sect-brand .eyebrow { color: rgba(255,255,255,0.72); }
  .sect-brand .rule-inv { border-top-color: rgba(255,255,255,0.24); }
  /* on green, a green button would vanish — invert it */
  .sect-brand .btn-invert { background: #FFFFFF; color: #0059C9; }
  .sect-brand .btn-invert:hover { background: #EFF4FB; }
  .sect-brand a:focus-visible, .sect-brand button:focus-visible { outline-color: #FFFFFF; }

  /* ---- nabilissa-style vocabulary ---- */
  /* page progress line under the header */
  .page-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px;
                   z-index: 60; pointer-events: none; }
  .page-progress i { display: block; height: 100%; background: #0059C9;
                     transform-origin: 0 50%; transform: scaleX(0); }

  /* rolling link labels: two stacked copies, roll up on hover */
  .roll { display: inline-block; overflow: hidden; position: relative;
          vertical-align: top; }
  .roll > span { display: block;
                 transition: transform 0.45s cubic-bezier(.22,.85,.3,1); }
  .roll > span + span { position: absolute; inset: 0; transform: translateY(100%); }
  a:hover .roll > span:first-child, a:focus-visible .roll > span:first-child { transform: translateY(-100%); }
  a:hover .roll > span + span, a:focus-visible .roll > span + span { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .roll > span { transition: none; }
    .page-progress { display: none; }
  }


  /* ---- colour throughout: no plain-white sections ----
     Every unpainted section gets a faint duotone wash, direction alternating
     so adjacent sections tilt opposite ways. */
  /* white / coloured rhythm. nth-of-type counted the photo bands too, so the
     alternation drifted per page (contact got two coloured sections in a row).
     site.js now walks the sections in order and tags each one, treating bands
     and dark/brand sections as already-coloured occupants of the rhythm. */
  /* Coloured sections read as the identity gradient, not a grey wash. The
     image is 300% wide so site.js can sweep it across as the section scrolls.
     Peak alpha is capped at 0.16 — the darkest point that still holds AA for
     muted captions (4.55:1). */
  .sec-color, .sect-color, section.bg-tint {
    background-image: linear-gradient(115deg,
      rgba(0,107,81,0.15) 0%,
      rgba(0,89,201,0.16) 30%,
      rgba(0,107,81,0.13) 55%,
      rgba(0,89,201,0.16) 80%,
      rgba(0,107,81,0.15) 100%);
    background-size: 300% 100%;
    background-position: 0% 0;
    background-repeat: no-repeat;
  }
  .sec-white { background-image: none; }
  @media (prefers-reduced-motion: reduce) {
    .sec-color, .sect-color, section.bg-tint { background-position: 50% 0; }
  }

  /* the four stages: rows alternate white / coloured. Negative margins keep
     the grid columns aligned with the uncoloured rows. */
  li.stage:nth-of-type(even),
  .vt-item:nth-of-type(even) {
    background-image: linear-gradient(120deg, rgba(0,107,81,0.10), rgba(0,89,201,0.13));
    border-radius: 0.75rem;
    margin-inline: -1.25rem; padding-inline: 1.25rem;
  }
  /* the programmes timeline runs its rail down the left, so the coloured card
     must not swallow it — pad past the rail instead of bleeding under it */
  .vt-item:nth-of-type(even) { margin-inline: -1.25rem 0; padding-inline: 1.25rem 0; }
  .bg-tint { background-image: linear-gradient(135deg, rgba(0,107,81,0.08), rgba(0,89,201,0.11)); }

  /* dark sections: near-black, tinted along the same transition */
  section.bg-ink, footer.bg-ink { background-image: linear-gradient(135deg, #0B1712, #081428); }
  .mobile-nav { background: linear-gradient(150deg, #06291F, #061C3E); }
  .page-veil { background: linear-gradient(120deg, #004836, #003C8C); }

  /* the brand section carries the full transition */
  .sect-brand { background: #0059C9; background-image: var(--grad); }

  /* gradient on the interactive brand surfaces */
  .df-bar { background-image: var(--grad); }
  .page-progress i { background-image: var(--grad); }
  .rule-fill::before { background-image: var(--grad); }
  .sy-rail li.is-active .ct-icon { background-image: var(--grad); }
  .vplay:hover .vplay-btn { background-image: var(--grad); }

  /* gradient type on the big numerals and dates */
  .mobile-nav a[aria-current="page"] {
    background-image: linear-gradient(120deg, #3FBF9E, #5FA1E8);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }


  /* button labels are split for the char-flip reveal — keep the pieces inline
     so the button's flex centring is untouched */
  .btn-t { display: inline-block; }
  .btn-t .line, .btn-t .word { display: inline-block; }
  .btn-t .char { display: inline-block; will-change: transform; }

  /* ---- gradient hovers ----
     Headings: a 300%-wide gradient whose left third is solid ink — at rest the
     text reads as plain ink; hover slides the window into the green->azure zone.
     The gradient is clipped to text at exactly ONE level. Clipping it on the
     heading AND on its split lines/words/chars made Chrome repaint the animated
     letters' glyphs at the wrong offset — the stacked "overlap" on headings.
     Unsplit headings clip on themselves; split headings clip only on their chars,
     and site.js gives each char its offset (--gx) and the heading width (--gw)
     so the sweep still reads as one continuous gradient. */
  .gh   { --g-ink: #0A0A0A; --g-a: #006B51; --g-b: #0059C9; --g-c: #00479F; }
  .gh-w { --g-ink: #FFFFFF; --g-a: #3FBF9E; --g-b: #5FA1E8; --g-c: #8FC2F2; }
  .gh:not(.is-split), .gh.is-split .char {
    background-image: linear-gradient(110deg,
      var(--g-ink) 0%, var(--g-ink) 33%, var(--g-a) 55%, var(--g-b) 80%, var(--g-c) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    transition: background-position 0.7s cubic-bezier(.22,.85,.3,1);
  }
  .gh:not(.is-split)       { background-size: 300% 100%; background-position: 0% 0;
                             padding-block: 0.3em; margin-block: -0.3em; }
  .gh:not(.is-split):hover { background-position: 100% 0; }
  .gh.is-split { color: transparent; -webkit-text-fill-color: transparent; }
  .gh.is-split .char {
    /* the heading line-height (~1) is tighter than the glyphs: descenders hang
       below the char box, and background-clip:text only paints inside the box */
    padding-block: 0.3em; margin-block: -0.3em;
    background-size: calc(var(--gw, 10em) * 3) 100%;
    background-position: calc(var(--gx, 0px) * -1) 0;
  }
  .gh.is-split:hover .char {
    background-position: calc(var(--gx, 0px) * -1 - var(--gw, 10em) * 2) 0;
  }
  /* if backgrounds are stripped (print, forced colors), fall back to real ink */
  @media (forced-colors: active), print {
    .gh, .gh .char { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
  }

  /* key text already set in gradient type: hover slides the blend */
  .h-num.text-pine, .df-option-amt, .sy-date, .eyebrow.text-pine {
    background-image: linear-gradient(120deg, #006B51, #0059C9, #00479F);
    background-size: 220% 100%; background-position: 0% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    transition: background-position 0.6s cubic-bezier(.22,.85,.3,1);
  }
  .h-num.text-pine:hover, .df-option:hover .df-option-amt,
  .sy-item:hover .sy-date, .eyebrow.text-pine:hover { background-position: 100% 0; }

  /* buttons: the gradient slides toward its darker end on hover */
  .bg-pine, .df-btn-primary {
    background-image: linear-gradient(120deg, #006B51 0%, #0059C9 55%, #00479F 100%);
    background-size: 220% 100%; background-position: 0% 0;
    transition: background-position 0.6s cubic-bezier(.22,.85,.3,1);
  }
  .bg-pine:hover, .df-btn-primary:hover { background-position: 100% 0; }

  /* outline buttons: a gradient fill wipes in from the left */
  a.rounded-full[class*="border-"], button.rounded-full[class*="border-"] {
    background-image: linear-gradient(120deg, #006B51, #0059C9);
    background-size: 0% 100%; background-repeat: no-repeat;
    /* size and paint against the BORDER box — the default padding-box origin
       left the 1px ring uncovered, and any hover:bg-white showed through it */
    background-origin: border-box; background-clip: border-box;
    transition: background-size 0.55s cubic-bezier(.22,.85,.3,1),
                color 0.35s ease, border-color 0.35s ease;
  }
  a.rounded-full[class*="border-"]:hover, button.rounded-full[class*="border-"]:hover {
    background-size: 100% 100%; color: #FFFFFF; border-color: transparent;
  }
  /* Tailwind's hover:bg-white would sit behind the gradient and rim the edge */
  a.rounded-full[class*="border-"].hover\:bg-white:hover,
  button.rounded-full[class*="border-"].hover\:bg-white:hover {
    background-color: transparent; color: #FFFFFF;
  }

  @media (prefers-reduced-motion: reduce) {
    .gh, .gh :is(.line,.word,.char), .h-num.text-pine, .df-option-amt, .sy-date,
    .eyebrow.text-pine, .bg-pine, .df-btn-primary,
    a.rounded-full[class*="border-"], button.rounded-full[class*="border-"] { transition: none; }
  }

  /* ---- nabilissa mix: spotlight, veil, line-fill, media hover ---- */
  /* scrubbed spotlight: an ellipse mask travels across the band photo (their
     .sect-1 --mx recipe, verbatim geometry) */
  .band-spot img {
    --mx: -20%;
    -webkit-mask: radial-gradient(ellipse 55% 75% at var(--mx) 50%, #000 0, #000 45%, transparent 100%);
    mask: radial-gradient(ellipse 55% 75% at var(--mx) 50%, #000 0, #000 45%, transparent 100%);
  }

  /* page veil: covers on internal navigation, lifts on arrival (JS-only) */
  .page-veil { position: fixed; inset: 0; z-index: 70;
               transform-origin: 50% 0%; pointer-events: none; }

  /* row hairline fills brand green on hover (their .item-line-hover, .6s) */
  .rule-fill { position: relative; }
  .rule-fill::before { content: ""; position: absolute; left: 0; top: -1px;
                       height: 1px; width: 0; background: #0059C9; z-index: 1;
                       transition: width 0.6s cubic-bezier(.22,.85,.3,1); }
  .on-ink .rule-fill::before, .bg-ink .rule-fill::before { background: #5FA1E8; }
  .rule-fill:hover::before { width: 100%; }

  /* media hover: filter shift only — transform belongs to the parallax scrub */
  .para img, .stage-frame img { transition: filter 0.6s ease; }
  .para:hover img, .stage-frame:hover img { filter: brightness(1.07) saturate(1.06); }

  @media (prefers-reduced-motion: reduce) {
    .band-spot img { -webkit-mask: none; mask: none; }
    .page-veil { display: none; }
    .rule-fill::before { transition: none; }
  }

  /* ---- Mobile menu ---- */
  .nav-toggle { width: 44px; height: 44px; display: grid; place-items: center;
                background: none; border: 0; padding: 0; cursor: pointer; margin-left: auto; }
  @media (min-width: 768px) { .nav-toggle { display: none; } }
  .nav-ico { display: block; width: 22px; height: 14px; position: relative; }
  .nav-ico i { position: absolute; left: 0; right: 0; height: 1.5px; background: #0A0A0A;
               border-radius: 2px; transition: transform 380ms cubic-bezier(.22,.85,.3,1),
               opacity 200ms ease, background-color 300ms ease; }
  .nav-ico i:nth-child(1) { top: 0; }
  .nav-ico i:nth-child(2) { top: 6.25px; }
  .nav-ico i:nth-child(3) { top: 12.5px; }
  .site-head.on-dark .nav-ico i { background: #FFFFFF; }
  .nav-toggle[aria-expanded="true"] .nav-ico i { background: #FFFFFF; }
  .nav-toggle[aria-expanded="true"] .nav-ico i:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-ico i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-ico i:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }
  .nav-toggle:focus-visible { outline: 3px solid #0059C9; outline-offset: 2px; }

  .mobile-nav { position: fixed; inset: 0; z-index: 45; color: #FFFFFF;
                display: flex; flex-direction: column; justify-content: center;
                padding: 6rem 1.75rem 2.5rem; opacity: 0;
                transition: opacity 320ms ease; }
  .mobile-nav.is-open { opacity: 1; }
  .mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
  .mobile-nav a { display: block; padding: 0.65rem 0; font-size: clamp(2rem, 9vw, 2.9rem);
                  line-height: 1.1; letter-spacing: -0.035em; color: #FFFFFF;
                  opacity: 0; transform: translateY(14px);
                  transition: opacity 420ms ease, transform 480ms cubic-bezier(.22,.85,.3,1); }
  .mobile-nav.is-open a { opacity: 1; transform: none; }
  .mobile-nav.is-open li:nth-child(1) a { transition-delay: 60ms; }
  .mobile-nav.is-open li:nth-child(2) a { transition-delay: 110ms; }
  .mobile-nav.is-open li:nth-child(3) a { transition-delay: 160ms; }
  .mobile-nav.is-open li:nth-child(4) a { transition-delay: 210ms; }
  .mobile-nav.is-open li:nth-child(5) a { transition-delay: 260ms; }
  .mobile-nav a[aria-current="page"] { color: #5FA1E8; }
  .mobile-nav-foot { margin-top: auto; padding-top: 2.5rem; display: flex; flex-wrap: wrap;
                     gap: 1.5rem; font-size: 0.9rem; }
  .mobile-nav-foot a { color: rgba(255,255,255,0.6); font-size: 0.9rem; opacity: 1; transform: none; }
  .mobile-nav-foot a:hover { color: #FFFFFF; }
  body.nav-open { overflow: hidden; }
  /* The header must sit ABOVE the panel, or the close button is unreachable.
     `header.site-head` (0,1,1) outranks Tailwind's `.z-40` (0,1,0). */
  header.site-head { z-index: 50; }
  body.nav-open header.site-head { background: transparent; backdrop-filter: none; }
  body.nav-open .site-head .logo-dark { display: none; }
  body.nav-open .site-head .logo-light { display: block; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav, .mobile-nav a, .nav-ico i { transition: none; }
  }

  /* current page in the primary nav */
  .site-head nav a.is-current { color: #0A0A0A; }
  .site-head nav a.is-current::after {
    content: ""; display: block; height: 1px; background: currentColor;
    margin-top: 3px; opacity: 0.5;
  }
  .site-head.on-dark nav a.is-current { color: #FFFFFF; }


  a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid #0059C9;
    outline-offset: 3px;
  }
  .on-ink a:focus-visible { outline-color: #FFFFFF; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bar { transition: none; }
    .bar-rescued  { width: var(--m-rescued); }
    .bar-restored { width: var(--m-restored); }
  }