/* ===========================================================================
   Premium layer — Green Schools Network
   ---------------------------------------------------------------------------
   Loaded after style.css. It only changes how things look, never where they
   sit: no grid templates, no widths, no paddings that would move a breakpoint.
   Everything here degrades to the base design if a property is unsupported.
   =========================================================================== */

:root {
    /* The base greens stay. These are the accents that give the palette its
       range — a warm gold against the forest, and a cool teal between them. */
    --gold-500:  #c99a2e;
    --gold-400:  #e0b64a;
    --gold-100:  #fbf1d9;
    --teal-600:  #1d7f7a;
    --teal-300:  #79cfc7;
    --teal-050:  #eaf7f6;
    --lime-400:  #9fd85f;

    /* Named gradients, so a change here propagates everywhere at once. */
    --grad-brand:  linear-gradient(120deg, #1b5632 0%, #2e8b57 45%, #1d7f7a 100%);
    --grad-warm:   linear-gradient(120deg, #237243 0%, #4f9e57 40%, #c99a2e 100%);
    --grad-mint:   linear-gradient(120deg, #8fcfa8, #dff3e4 60%, #f5e3ad);
    --grad-line:   linear-gradient(90deg, var(--green-600), var(--teal-600), var(--gold-500));

    --shadow:      0 1px 2px rgba(16, 54, 31, .05), 0 10px 30px -8px rgba(16, 54, 31, .14);
    --shadow-lg:   0 2px 6px rgba(16, 54, 31, .07), 0 28px 60px -18px rgba(16, 54, 31, .28);
    --shadow-glow: 0 18px 40px -14px rgba(35, 114, 67, .5);

    --ease-out:  cubic-bezier(.22, .8, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* A whisper of grain kills the flat "template" feel.

   This used to be a fixed full-viewport overlay, which halved the frame rate:
   a full-screen layer sitting above animating content has to be re-blended
   every frame. As a background layer on the sections that want it, it is
   painted once and costs nothing. --grain is composed into their own
   background stacks below. */
:root {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

::selection { background: var(--green-300); color: var(--green-900); }

html { scroll-behavior: smooth; }

/* Scrollbar, on the browsers that let us style it. ----------------------- */
* { scrollbar-color: var(--green-300) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--green-050); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--green-600), var(--green-800));
    border-radius: 99px; border: 3px solid var(--green-050);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-700); }

/* Keyboard focus should be obvious and on-brand, everywhere. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--gold-400);
    outline-offset: 2px; border-radius: 6px;
}

/* ---------------------------------------------------------- reading rhythm */

h1, h2, h3 { text-wrap: balance; }
p, .muted  { text-wrap: pretty; }

/* Section headings get a short gradient rule that draws itself in when the
   heading arrives. Purely decorative, so it is hidden from screen readers. */
.section-head h2 { position: relative; padding-bottom: .55rem; }
.section-head h2::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    height: 4px; width: 72px; border-radius: 99px;
    background: var(--grad-line);
    transform-origin: left;
    transition: transform .8s var(--ease-out) .15s;
}
.section-head.center h2::after { left: 50%; margin-left: -36px; transform-origin: center; }
/* It is drawn as the block arrives — but only the blocks the reveal script
   marked as pending are ever hidden, so with JS off every rule is present. */
.section-head.pending h2::after    { transform: scaleX(0); }
.section-head.pending.in h2::after { transform: scaleX(1); }

/* ------------------------------------------------------------- scroll cue */

.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    transform: scaleX(0); transform-origin: left; z-index: 60;
    background: var(--grad-line);
    box-shadow: 0 0 14px rgba(46, 139, 87, .55);
    pointer-events: none;
}

/* ---------------------------------------------------------------- buttons */

.btn {
    position: relative; overflow: hidden; isolation: isolate;
    letter-spacing: .005em;
    transition: transform .22s var(--ease-out), box-shadow .28s var(--ease-out),
                background .22s var(--ease-soft), border-color .22s var(--ease-soft),
                color .22s var(--ease-soft);
}
/* A light sweeps across the face on hover. */
.btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .38) 48%, transparent 72%);
    transform: translateX(-130%);
    transition: transform .65s var(--ease-out);
}
.btn:hover::before { transform: translateX(130%); }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
    background: var(--grad-brand); background-size: 160% 160%; background-position: 0% 50%;
    box-shadow: var(--shadow-glow);
    transition: background-position .5s var(--ease-out), transform .22s var(--ease-out),
                box-shadow .28s var(--ease-out);
}
.btn-primary:hover {
    background: var(--grad-brand); background-size: 160% 160%; background-position: 100% 50%;
    box-shadow: 0 22px 46px -12px rgba(35, 114, 67, .62);
}
.btn-ghost {
    border-color: var(--green-300); color: var(--green-800);
    background: linear-gradient(#fff, #fff) padding-box;
}
.btn-ghost:hover {
    background: var(--green-100); border-color: var(--green-600);
    box-shadow: 0 12px 26px -12px rgba(35, 114, 67, .45);
}
.btn-light:hover { box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45); }
.btn-glass {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 30px -14px rgba(0, 0, 0, .6);
}
.btn-glass:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }

/* The arrow inside a button leans forward on hover. */
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn .icon { transition: transform .25s var(--ease-out); }
.btn:hover .icon.flip { transform: rotate(180deg) translateX(3px); }

/* ------------------------------------------------------------------ header */

.site-head {
    background: rgba(252, 254, 252, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(223, 232, 226, .8);
    transition: box-shadow .3s var(--ease-soft), background .3s var(--ease-soft),
                border-color .3s var(--ease-soft);
}
/* Set by the script once the page has scrolled past the hero lip. */
.site-head.is-stuck {
    background: rgba(252, 254, 252, .94);
    box-shadow: 0 10px 30px -18px rgba(16, 54, 31, .55);
    border-bottom-color: transparent;
}
.site-head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--grad-line); opacity: 0;
    transition: opacity .35s var(--ease-soft);
}
.site-head.is-stuck::after { opacity: .75; }

.brand-mark {
    background: var(--grad-brand);
    box-shadow: 0 6px 16px -6px rgba(27, 86, 50, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); box-shadow: var(--shadow-glow); }
.brand-text { transition: color .2s var(--ease-soft); }

/* Nav links grow their underline from the middle out. */
.site-nav a:not(.btn) { position: relative; padding-bottom: 2px; }
.site-nav a:not(.btn)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    border-radius: 2px; background: var(--grad-line);
    transform: scaleX(0); transform-origin: center;
    transition: transform .3s var(--ease-out);
    display: block; margin-top: 0;
}
.site-nav a:not(.btn):hover::after,
.site-nav a.here::after { transform: scaleX(1); }

/* --------------------------------------------------------------- the hero */

.carousel-scrim {
    background:
        linear-gradient(90deg, rgba(4, 20, 11, .74) 0%, rgba(6, 26, 15, .44) 36%,
                        rgba(8, 30, 18, .12) 62%, transparent 80%),
        linear-gradient(to top, rgba(4, 18, 10, .62), transparent 34%),
        radial-gradient(120% 80% at 12% 40%, rgba(29, 127, 122, .22), transparent 60%);
}
/* Oversized so the parallax drift can never expose an edge. Added by the
   script, so it is only ever applied when something is actually moving it. */
.hero-band.has-parallax { top: -13%; height: 126%; will-change: transform; }

/* Very slight vignette so the eye settles in the middle of the frame. */
.carousel::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    box-shadow: inset 0 0 180px 40px rgba(2, 14, 8, .55);
}

.gsn-hero-inner h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 8px 44px rgba(0, 0, 0, .5);
}
/* A slow shimmer across the word, like light moving through foliage.
   text-shadow is painted *over* a background-clipped gradient, and the h1
   passes one down by inheritance — which is what turns the word muddy grey.
   It has to be cleared here and replaced with a drop-shadow filter, which
   renders behind the glyphs instead. */
.gsn-hero-inner .hero-year, .hero .hero-year {
    background: linear-gradient(100deg, #bfe9cf 0%, #ffffff 42%, #f2dda2 58%, #bfe9cf 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .75))
            drop-shadow(0 6px 30px rgba(0, 0, 0, .5));
    animation: sheen 9s var(--ease-soft) infinite;
}
@keyframes sheen {
    0%, 100% { background-position: 140% 50%; }
    50%      { background-position: -40% 50%; }
}

.gsn-hero-lead { color: #e2f7ea; text-shadow: 0 2px 16px rgba(0, 0, 0, .85); }
.gsn-hero-sub  { color: rgba(255, 255, 255, .95); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }

/* The words in the headline lift into place, one after the next. */
.gsn-hero-inner > * { animation: rise-in .9s var(--ease-out) both; }
.gsn-hero-inner > .eyebrow      { animation-delay: .05s; }
.gsn-hero-inner > h1            { animation-delay: .16s; }
.gsn-hero-inner > .gsn-hero-lead{ animation-delay: .3s; }
.gsn-hero-inner > .gsn-hero-sub { animation-delay: .42s; }
.gsn-hero-inner > .hero-cta     { animation-delay: .54s; }
@keyframes rise-in {
    from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.eyebrow {
    background: linear-gradient(135deg, #fff, var(--green-050));
    border-color: var(--green-300);
    box-shadow: 0 6px 18px -12px rgba(16, 54, 31, .8);
}
/* Must follow .eyebrow: the light variant is the same specificity, so source
   order is the only thing keeping it dark-background. */
.eyebrow-light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px -14px rgba(0, 0, 0, .9);
}
.eyebrow .icon { transition: transform .4s var(--ease-out); }
.eyebrow:hover .icon { transform: rotate(14deg) scale(1.15); }

.carousel-btn {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.carousel-btn:hover {
    background: rgba(255, 255, 255, .28); transform: translateY(-2px) scale(1.06);
    border-color: #fff;
}
.carousel-dots .is-active i {
    background: var(--grad-mint); width: 38px;
    box-shadow: 0 0 12px rgba(143, 207, 168, .8);
}

.slide figcaption {
    border-left: 3px solid transparent;
    border-image: var(--grad-line) 1;
    /* Opaque enough on its own; a backdrop blur over the panning photograph
       would be re-computed every frame for no visible gain. */
    background: linear-gradient(90deg, rgba(4, 20, 11, .5), rgba(4, 20, 11, .9));
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.slide-title { letter-spacing: -.01em; }

/* The conclave hero band, matched to the same treatment. */
.hero-scrim {
    background:
        linear-gradient(100deg, rgba(6, 26, 15, .95) 0%, rgba(8, 34, 20, .86) 34%,
                        rgba(11, 40, 24, .58) 58%, rgba(12, 44, 26, .4) 100%),
        radial-gradient(70% 90% at 88% 10%, rgba(29, 127, 122, .34), transparent 62%),
        linear-gradient(to top, rgba(5, 22, 12, .82), transparent 50%);
}
.hero h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 10px 46px rgba(0, 0, 0, .35); }
.hero-sub { color: #bfe9cf; }

/* The ring is a box-shadow, not a pseudo-element: a negative-z-index ::before
   paints *above* its parent's background, which tints the whole card. */
.hero-card {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(170deg, #ffffff, #fbfefc 62%, var(--green-050));
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7),
                0 0 0 1px rgba(143, 207, 168, .6),
                inset 0 1px 0 rgba(255, 255, 255, .9);
    animation: rise-in 1s var(--ease-out) .3s both;
}

/* ----------------------------------------------------------------- cards */

.card, .step, .event-card, .side-card, .tier, .highlight, .download-card,
.agenda-item, .contact-aside, .feature-event, .flagship, .vision-card {
    transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out),
                border-color .38s var(--ease-soft);
}

.card {
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(170deg, #fff 0%, #fdfefd 60%, var(--green-050) 100%);
    border-color: rgba(223, 232, 226, .9);
}
/* A gradient hairline appears on the top edge as the card lifts. */
.card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-line);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease-out);
}
.card:hover::before { transform: scaleX(1); }
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--green-300);
}
/* A soft glow follows the pointer across the card face (set by the script). */
.card::after {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
                                rgba(46, 139, 87, .13), transparent 62%);
    transition: opacity .4s var(--ease-soft);
}
.card:hover::after { opacity: 1; }

.feature-icon {
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 10px 22px -14px rgba(16, 54, 31, .9);
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card:hover .feature-icon, .highlight:hover .feature-icon, .strand-head:hover .feature-icon {
    transform: translateY(-3px) rotate(-6deg) scale(1.07);
}
.feature-icon-green { background: linear-gradient(140deg, #dff0e5, #bfe4cd); color: var(--green-800); }
.feature-icon-amber { background: linear-gradient(140deg, var(--gold-100), #f4e2b2); color: #96700f; }
.feature-icon-rose  { background: linear-gradient(140deg, #fdecef, #f7d6dd); color: #a1495e; }
.feature-icon-blue  { background: linear-gradient(140deg, var(--teal-050), #cdeceb); color: var(--teal-600); }

.card h3, .step h3, .event-card h3 { letter-spacing: -.015em; }

/* Steps ------------------------------------------------------------------ */

.step { overflow: hidden; position: relative; background: linear-gradient(170deg, #fff, var(--green-050)); }
.step::before {
    content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0;
    background: radial-gradient(420px circle at 100% 0%, rgba(46, 139, 87, .12), transparent 60%);
    transition: opacity .45s var(--ease-soft);
}
.step:hover::before { opacity: 1; }
/* Lift the content above the hover glow — but not .step-num, which style.css
   positions absolutely in the corner and which this would otherwise pull back
   into the flow, on top of the icon. */
.step > *:not(.step-num) { position: relative; z-index: 1; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-300); }
.step-num {
    position: absolute;
    background: var(--grad-mint);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    opacity: .85; z-index: 1;
    transition: transform .45s var(--ease-out), opacity .45s var(--ease-soft);
}
.step:hover .step-num { transform: scale(1.12) translateY(-2px); opacity: 1; }
.step-icon {
    background: var(--grad-brand);
    box-shadow: 0 14px 28px -14px rgba(35, 114, 67, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .4s var(--ease-out);
}
.step:hover .step-icon { transform: translateY(-3px) rotate(-6deg); }

/* --------------------------------------------------------- the stat strip */

.strip {
    position: relative; overflow: hidden;
    background:
        radial-gradient(80% 160% at 8% 120%, rgba(29, 127, 122, .55), transparent 60%),
        radial-gradient(70% 150% at 92% -30%, rgba(201, 154, 46, .3), transparent 62%),
        linear-gradient(100deg, var(--green-900), var(--green-800) 55%, #17603c);
    padding: clamp(2rem, 4vw, 2.8rem) 0;
}
/* A slow band of light crossing the strip. */
.strip::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent);
    animation: strip-sweep 9s linear infinite;
}
@keyframes strip-sweep { from { left: -45%; } to { left: 105%; } }
.strip .wrap { position: relative; }
.strip-item  { position: relative; }
.strip-item + .strip-item::before {
    content: ''; position: absolute; left: -.5rem; top: 12%; bottom: 12%; width: 1px;
    background: linear-gradient(transparent, rgba(255, 255, 255, .22), transparent);
}
.strip-item b {
    background: linear-gradient(180deg, #ffffff, #bfe9cf 70%, #9fd85f);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-variant-numeric: tabular-nums;
}
.strip-item span { color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------------- dark sections */

.section-dark {
    position: relative; overflow: hidden;
    background:
        var(--grain),
        radial-gradient(900px 460px at 82% -18%, rgba(46, 139, 87, .42), transparent 62%),
        radial-gradient(720px 420px at 6% 116%, rgba(29, 127, 122, .34), transparent 64%),
        radial-gradient(520px 320px at 48% 50%, rgba(201, 154, 46, .1), transparent 70%),
        linear-gradient(180deg, #0d2e1a, var(--green-900) 60%, #0b2716);
}
/* Two slow-drifting orbs give the dark band depth without any image weight.
   Gradient falloff instead of filter: blur(), for the reason above. */
.section-dark::before, .section-dark::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
    opacity: .5; will-change: transform;
}
.section-dark::before {
    width: 460px; height: 460px; left: -120px; top: -140px;
    background: radial-gradient(circle, rgba(46, 139, 87, .8), rgba(46, 139, 87, .25) 42%, transparent 70%);
    animation: drift-a 22s var(--ease-soft) infinite alternate;
}
.section-dark::after {
    width: 400px; height: 400px; right: -100px; bottom: -150px;
    background: radial-gradient(circle, rgba(29, 127, 122, .8), rgba(29, 127, 122, .25) 42%, transparent 70%);
    animation: drift-b 27s var(--ease-soft) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(90px, 70px, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-80px, -60px, 0) scale(1.14); } }
.section-dark > .wrap { position: relative; z-index: 1; }

.program {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    border-color: rgba(255, 255, 255, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .35s var(--ease-out), background .35s var(--ease-soft),
                border-color .35s var(--ease-soft), box-shadow .35s var(--ease-out);
}
.program:hover {
    transform: translateY(-5px);
    background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06));
    border-color: rgba(143, 207, 168, .55);
    box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .9);
}
.program-icon {
    background: linear-gradient(140deg, rgba(143, 207, 168, .26), rgba(29, 127, 122, .2));
    color: #cfeeda;
    transition: transform .4s var(--ease-out);
}
.program:hover .program-icon { transform: rotate(-7deg) scale(1.08); }

.award {
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    transition: transform .3s var(--ease-out), border-color .3s var(--ease-soft);
}
.award:hover { transform: translateY(-3px); border-color: rgba(143, 207, 168, .5); }
.award-icon { background: linear-gradient(140deg, rgba(143, 207, 168, .28), rgba(201, 154, 46, .2)); }

.sdg-num { background: linear-gradient(140deg, rgba(143, 207, 168, .3), rgba(29, 127, 122, .22)); }

/* ------------------------------------------------------- featured / events */

.feature-event { border-color: rgba(223, 232, 226, .85); }
.feature-event:hover { box-shadow: 0 36px 70px -26px rgba(16, 54, 31, .34); }
.feature-event-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, transparent 55%, rgba(255, 255, 255, .16));
    pointer-events: none;
}
.feature-event-media img { transition: transform 1.2s var(--ease-out); }
.feature-event:hover .feature-event-media img { transform: scale(1.05); }

.countdown {
    background: var(--grad-brand);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .8);
}
.countdown b {
    background: linear-gradient(180deg, #fff, #cfeeda);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.status-pill { backdrop-filter: blur(8px); background: rgba(255, 255, 255, .92); }
.status-ongoing i {
    background: #e0453f;
    box-shadow: 0 0 0 0 rgba(224, 69, 63, .6);
}

.event-card { background: linear-gradient(180deg, #fff 70%, var(--green-050)); }
.event-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--green-300); }
.event-card-media::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(to top, rgba(9, 32, 18, .55), transparent 55%);
    transition: opacity .4s var(--ease-soft);
}
.event-card:hover .event-card-media::after { opacity: 1; }
.event-card:hover .event-card-media img { transform: scale(1.07); }
.event-card-media img { transition: transform .8s var(--ease-out); }
.event-card-days { background: linear-gradient(135deg, var(--gold-100), #f5e2b0); color: #8a6510; }
.count-pill { background: linear-gradient(135deg, var(--green-100), var(--teal-050)); }

/* --------------------------------------------------------------- CTA band */

.cta-band {
    background:
        radial-gradient(70% 140% at 8% 110%, rgba(29, 127, 122, .55), transparent 62%),
        linear-gradient(118deg, #0f3a22 0%, var(--green-700) 52%, #2f9a63 100%);
    background-size: 140% 140%;
    box-shadow: 0 34px 70px -28px rgba(16, 54, 31, .8);
    animation: band-shift 16s var(--ease-soft) infinite alternate;
}
@keyframes band-shift { to { background-position: 100% 50%; } }
.cta-glow {
    background: radial-gradient(circle, rgba(159, 216, 95, .34), transparent 65%);
    will-change: transform;
    animation: drift-a 18s var(--ease-soft) infinite alternate;
}
/* Promoted to its own compositor layer so the slow pan is a cheap transform
   rather than a repaint of a full-viewport photograph. */
.slide.is-active img { will-change: transform; }
.cta-band::after {
    content: ''; position: absolute; left: -20%; top: 0; bottom: 0; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
    animation: strip-sweep 11s linear infinite; pointer-events: none;
}

/* ------------------------------------------------------- interior sections */

.page-hero {
    background: linear-gradient(180deg, #0e3220, var(--green-900));
    overflow: hidden;
}
.page-hero-bg {
    background:
        radial-gradient(760px 360px at 88% -28%, rgba(46, 139, 87, .55), transparent 62%),
        radial-gradient(600px 320px at 2% 125%, rgba(29, 127, 122, .34), transparent 60%),
        radial-gradient(420px 260px at 55% 120%, rgba(201, 154, 46, .12), transparent 65%);
    animation: band-shift 20s var(--ease-soft) infinite alternate;
}
.page-hero-inner > * { animation: rise-in .8s var(--ease-out) both; }
.page-hero-inner > h1 { animation-delay: .1s; }
.page-hero-inner > .page-hero-lead { animation-delay: .22s; }
.page-hero h1 { letter-spacing: -.03em; }

.section-tint {
    background:
        radial-gradient(700px 320px at 92% 0%, rgba(29, 127, 122, .07), transparent 62%),
        radial-gradient(620px 300px at 4% 100%, rgba(201, 154, 46, .07), transparent 60%),
        var(--green-050);
}
.section-alt { background: linear-gradient(180deg, #fff, #fbfdfb); }

/* ------------------------------------------------------------ lists, misc */

.ticks li .icon, .meta-list .icon, .reason-list .icon, .agenda-people .icon {
    transition: transform .25s var(--ease-out);
}
.ticks li:hover .icon, .meta-list li:hover .icon { transform: scale(1.2); }

.numbered li { transition: background .25s var(--ease-soft), padding-left .25s var(--ease-out); }
.numbered li:hover { background: var(--green-050); padding-left: .6rem; border-radius: 8px; }
.numbered li::before {
    background: linear-gradient(140deg, var(--green-100), var(--teal-050));
    color: var(--green-800);
}

.chip {
    background: linear-gradient(135deg, #fff, var(--green-050));
    transition: transform .25s var(--ease-out), border-color .25s var(--ease-soft),
                box-shadow .25s var(--ease-out);
}
.chip:hover {
    transform: translateY(-2px); border-color: var(--green-300);
    box-shadow: 0 8px 18px -10px rgba(16, 54, 31, .7);
}
.chips-dark .chip { background: rgba(255, 255, 255, .09); }
.chips-dark .chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(143, 207, 168, .5); }

.agenda-item { position: relative; overflow: hidden; }
.agenda-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--grad-line); opacity: 0;
    transition: opacity .3s var(--ease-soft);
}
.agenda-item:hover::before { opacity: 1; }
.agenda-item:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); }
.agenda-time { font-variant-numeric: tabular-nums; }
.agenda-panel { background: linear-gradient(120deg, var(--green-050), #fff); }

.highlight:hover, .download-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.download-icon { background: linear-gradient(140deg, var(--green-100), var(--teal-050)); }

.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-300); }
.tier-featured {
    background: linear-gradient(180deg, #f2fbf5, #fff 55%);
    border-color: var(--green-600);
    box-shadow: 0 24px 50px -22px rgba(35, 114, 67, .55);
}
.tier-flag { background: var(--grad-warm); box-shadow: 0 8px 18px -8px rgba(35, 114, 67, .9); }
.tier-amount {
    background: var(--grad-warm);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.vision-card {
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(29, 127, 122, .1), transparent 62%),
        linear-gradient(140deg, var(--green-050), #fff);
    border-color: var(--green-300);
}
.flagship-figure {
    background: linear-gradient(150deg, var(--green-050), var(--teal-050));
    border-color: var(--green-300);
}
.flagship-figure b {
    background: var(--grad-warm);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.impact b {
    background: var(--grad-warm);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.contact-aside {
    background:
        radial-gradient(500px 300px at 100% 0%, rgba(29, 127, 122, .09), transparent 60%),
        linear-gradient(160deg, var(--green-050), #fff);
}
.contact-card:hover .contact-link { color: var(--green-800); }
.contact-link { transition: color .2s var(--ease-soft); }

.side-card {
    background: linear-gradient(170deg, #fff, var(--green-050));
    box-shadow: var(--shadow);
}

/* ------------------------------------------------------------------ forms */

.form input, .form select, .form textarea {
    background: linear-gradient(#fff, #fdfefd);
    transition: border-color .2s var(--ease-soft), box-shadow .25s var(--ease-out),
                transform .2s var(--ease-out);
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--green-300); }
.form input:focus, .form select:focus, .form textarea:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 4px rgba(46, 139, 87, .15), 0 8px 20px -14px rgba(16, 54, 31, .9);
}
.checks label { transition: color .2s var(--ease-soft); }
.checks label:hover { color: var(--green-800); }
.form input[type=checkbox], .form input[type=radio] { accent-color: var(--green-600); }

.alert { position: relative; padding-left: 1.2rem; border-left-width: 4px; }
.alert-ok   { background: linear-gradient(120deg, var(--green-100), #f5fbf7); }
.alert-info { background: linear-gradient(120deg, var(--teal-050), #f6fbfb); border-color: #bfe2e0; color: #14595a; }

.card-narrow {
    position: relative; overflow: hidden;
    background: linear-gradient(170deg, #fff, var(--green-050));
    box-shadow: 0 32px 70px -30px rgba(16, 54, 31, .55);
}
/* A gradient cap on the top edge, drawn inside the card so it cannot tint it. */
.card-narrow::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad-line);
}
.page-plain {
    background:
        radial-gradient(700px 420px at 12% 8%, rgba(46, 139, 87, .12), transparent 60%),
        radial-gradient(620px 400px at 88% 92%, rgba(29, 127, 122, .12), transparent 60%),
        var(--green-050);
}

/* ----------------------------------------------------------------- ticket */

.ticket-head {
    background:
        radial-gradient(70% 160% at 90% -20%, rgba(159, 216, 95, .35), transparent 62%),
        var(--grad-brand);
}
.ticket { box-shadow: 0 34px 70px -30px rgba(16, 54, 31, .55); }

/* ------------------------------------------------------------------ admin */

.admin-head {
    background:
        radial-gradient(60% 200% at 100% 0%, rgba(29, 127, 122, .45), transparent 60%),
        linear-gradient(100deg, var(--green-900), #14432a);
    box-shadow: 0 10px 28px -20px rgba(0, 0, 0, .9);
}
.admin-nav a.active { background: var(--grad-brand); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9); }
.kpi {
    background: linear-gradient(170deg, #fff, var(--green-050));
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kpi b {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
table.data th { background: linear-gradient(180deg, var(--green-050), #f3faf5); }
table.data tbody tr { transition: background .18s var(--ease-soft); }

.result-ok  { background: linear-gradient(150deg, var(--green-100), #f4fbf6); }
.result-ok  .result-title { animation: pop-in .45s var(--ease-out) both; }
@keyframes pop-in {
    0%   { opacity: 0; transform: scale(.86); }
    60%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------- the footer */

.site-foot {
    position: relative; overflow: hidden;
    background:
        radial-gradient(800px 380px at 88% -10%, rgba(29, 127, 122, .3), transparent 62%),
        radial-gradient(620px 320px at 4% 110%, rgba(46, 139, 87, .26), transparent 60%),
        var(--green-900);
}
.site-foot::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-line);
}
.site-foot a { transition: color .2s var(--ease-soft); }
.site-foot a:hover { color: #fff; }
.foot-list li { transition: transform .25s var(--ease-out); }
.foot-list li:hover { transform: translateX(3px); }

/* ------------------------------------------------------- reveal, refined */

/* Directional variants, opted into per element with a class. */
.reveal.pending          { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(3px); }
.reveal.pending.from-left  { transform: translateX(-30px); }
.reveal.pending.from-right { transform: translateX(30px); }
.reveal.pending.zoom-in    { transform: scale(.94); }
.reveal.pending.in {
    opacity: 1; transform: none; filter: none;
    transition: opacity .7s var(--ease-soft) var(--d, 0ms),
                transform .8s var(--ease-out) var(--d, 0ms),
                filter .7s var(--ease-soft) var(--d, 0ms);
}

/* ======================================================= the advanced hero */

.carousel { min-height: clamp(600px, 88vh, 900px); }

/* Two columns: the message on the left, the next event on the right. */
.gsn-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
    padding: clamp(3rem, 7vw, 5rem) 0 7rem;
}
.gsn-hero-inner { padding: 0; }

/* The headline arrives a word at a time. --w is set per word in the markup. */
.gsn-hero-inner h1 .word {
    display: inline-block;
    animation: word-in .95s var(--ease-out) both;
    animation-delay: calc(160ms + var(--w, 0ms));
}
@keyframes word-in {
    from { opacity: 0; transform: translate3d(0, 38px, 0) rotate(2deg); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: none; }
}
/* The h1 itself must not also animate, or the words would move twice. */
.gsn-hero-inner > h1 { animation: none; }

.gsn-hero-inner .hero-marks {
    margin-top: 1.6rem; gap: 1.3rem;
    color: rgba(255, 255, 255, .92); font-weight: 550;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.gsn-hero-inner .hero-marks .icon { color: var(--lime-400); }

/* The floating event card ------------------------------------------------ */

/* No backdrop-filter here. The card is 97% opaque, so a blur behind it is
   invisible — but it sits directly over the Ken Burns photograph, which means
   the browser re-blurs the backdrop every single frame. Dropping it roughly
   doubled the frame rate on this page. Same reasoning for .hero-card,
   .slide figcaption and .program below. */
.hero-event {
    position: relative;
    background: linear-gradient(165deg, rgba(255, 255, 255, .98), rgba(243, 250, 245, .97));
    border: 1px solid rgba(255, 255, 255, .8); border-radius: 22px;
    padding: 1.6rem 1.5rem 1.4rem;
    box-shadow: 0 40px 90px -32px rgba(0, 0, 0, .8),
                0 0 0 1px rgba(143, 207, 168, .55),
                inset 0 1px 0 rgba(255, 255, 255, .9);
    animation: rise-in 1.1s var(--ease-out) .5s both;
    color: var(--ink);
}
.hero-event h2 { font-size: 1.35rem; margin: 0 0 .15rem; letter-spacing: -.02em; }
.hero-event-tag {
    font-family: Georgia, "Times New Roman", serif; font-style: italic;
    color: var(--green-700); font-size: 1rem; margin: 0 0 1rem;
}
.hero-event-flag {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .8rem;
    background: linear-gradient(135deg, var(--green-100), var(--teal-050));
    color: var(--green-800); border: 1px solid var(--green-300);
    padding: .3rem .75rem; border-radius: 999px;
    font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.hero-event-flag i {
    width: 7px; height: 7px; border-radius: 50%; background: #e0453f; flex: none;
    animation: pulse 1.8s ease-in-out infinite;
}

/* Countdown -------------------------------------------------------------- */

.hero-clock {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
    margin: 0 0 1.1rem;
}
.clock-unit {
    text-align: center; padding: .6rem .3rem .5rem; border-radius: 13px;
    background: linear-gradient(165deg, var(--green-050), #fff);
    border: 1px solid var(--line);
}
.clock-unit b {
    display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.05;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.clock-unit span {
    font-size: .66rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
}
.hero-clock.is-now { display: none; }

.hero-event-meta { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; }
.hero-event-meta li {
    display: flex; gap: .55rem; align-items: flex-start;
    font-size: .89rem; color: var(--ink-soft);
}
.hero-event-meta .icon { color: var(--green-600); margin-top: .15em; flex: none; }

.hero-event-more {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    margin-top: .8rem; font-size: .86rem; font-weight: 650;
    color: var(--green-700); text-decoration: none;
}
.hero-event-more:hover { text-decoration: underline; }
.hero-event-more .icon { transition: transform .25s var(--ease-out); }
.hero-event-more:hover .icon { transform: translateX(3px); }

/* Slide caption ---------------------------------------------------------- */

/* Sits in the strip between the event card above it and the controls below. */
.slide figcaption {
    bottom: 4.6rem; width: min(320px, 32vw);
    padding: .8rem 1.3rem .85rem 1.1rem;
}
.slide-line { font-size: .84rem; line-height: 1.45; }
.slide-place {
    display: flex; align-items: center; gap: .3rem; margin-bottom: .2rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
    color: var(--green-300);
}
.slide-place .icon { flex: none; }

/* Controls --------------------------------------------------------------- */

.carousel-ui { bottom: 2.2rem; }
/* The dot is a track; its <i> fills across it over one autoplay interval. */
.carousel-dots button { width: 42px; }
.carousel-dots i {
    width: 34px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden;
}
.carousel-dots i::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--grad-mint); transform: scaleX(0); transform-origin: left;
}
.carousel-dots .is-active i { width: 46px; background: rgba(255, 255, 255, .34); box-shadow: none; }
/* The fill runs on the pseudo-element itself, so it restarts for free every
   time .is-active moves to a different dot — no animation juggling in JS.
   --dur is set from the carousel's own autoplay interval. */
.carousel-dots .is-active i::after {
    animation: dot-fill var(--dur, 6000ms) linear forwards;
}
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Paused while the pointer is over the hero or the tab is hidden, so the bar
   never claims progress that is not happening. */
.carousel.is-paused .carousel-dots i::after { animation-play-state: paused; }

.carousel-count {
    margin-left: .6rem; color: rgba(255, 255, 255, .7);
    font-size: .8rem; font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.carousel-count b { color: #fff; font-weight: 700; }

/* Centred rather than pushed right: the right-hand corner belongs to the
   slide caption. */
.scroll-cue {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: .55rem;
    color: rgba(255, 255, 255, .78); text-decoration: none;
    font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue i {
    width: 22px; height: 36px; border-radius: 999px; position: relative;
    border: 1.5px solid rgba(255, 255, 255, .45);
}
.scroll-cue i::after {
    content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px;
    margin-left: -1.5px; border-radius: 2px; background: currentColor;
    animation: cue 2s var(--ease-soft) infinite;
}
@keyframes cue {
    0%       { opacity: 0; transform: translateY(0); }
    30%      { opacity: 1; }
    75%,100% { opacity: 0; transform: translateY(13px); }
}

/* ================================================ home page: below the fold */

/* The network canvas -------------------------------------------------------
   Sits behind everything in its section. It is decorative, so it never takes
   a pointer event and is hidden from assistive technology in the markup. */
/* <picture> is an inline wrapper by default and would collapse the slide. */
.slide picture, .hero-slide picture { display: block; width: 100%; height: 100%; }

.net-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    /* Fade the field out at the edges. Without this the nodes stop dead on the
       section boundary and the whole thing reads as a rectangle of effect
       rather than as something continuing past the frame. */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
        linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
        linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect;
}
/* The strip is short: a vertical fade would erase most of it. */
.strip .net-bg {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.sec-feature, .sec-pressure, .strip, .sec-strands, .sec-join { position: relative; isolation: isolate; }
.sec-feature > .wrap, .sec-pressure > .wrap, .strip > .wrap,
.sec-strands > .wrap, .sec-join > .wrap { position: relative; z-index: 1; }

/* Ongoing event ---------------------------------------------------------- */

.sec-feature {
    background:
        var(--grain),
        radial-gradient(900px 420px at 88% -10%, rgba(29, 127, 122, .11), transparent 62%),
        radial-gradient(760px 380px at 6% 108%, rgba(201, 154, 46, .1), transparent 60%),
        linear-gradient(180deg, #f2faf5, var(--green-050) 45%, #eef8f1);
}
/* One slow-breathing highlight keeps the band from reading as flat paint.
   No filter: blur() here — a blurred element whose transform is animating has
   to be re-blurred every frame. A soft radial-gradient is already blurry and
   costs nothing to move. */
.sec-feature .sec-glow {
    position: absolute; z-index: 0; pointer-events: none;
    width: 640px; height: 640px; right: -160px; top: -240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 139, 87, .18), rgba(46, 139, 87, .06) 45%, transparent 70%);
    will-change: transform;
    animation: drift-b 26s var(--ease-soft) infinite alternate;
}

/* A hairline of the brand gradient tops and tails the band. */
.sec-feature::before, .sec-feature::after {
    content: ''; position: absolute; left: 0; right: 0; height: 2px; z-index: 2;
    background: var(--grad-line); opacity: .5;
}
.sec-feature::before { top: 0; }
.sec-feature::after  { bottom: 0; }

/* Gold, not green: the badge sits on a photograph of foliage, so it has to be
   the one warm thing in the frame to read at all. */
.free-badge {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
    display: grid; place-items: center; gap: 0;
    width: 74px; height: 74px; border-radius: 50%;
    background: linear-gradient(145deg, #f2cf6a, var(--gold-500));
    color: #43310a;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .85),
                0 0 0 3px rgba(255, 255, 255, .85),
                inset 0 1px 0 rgba(255, 255, 255, .5);
    transform: rotate(-8deg);
}
.free-badge b { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.free-badge span { font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.chip-accent {
    background: linear-gradient(135deg, var(--green-100), var(--teal-050));
    border-color: var(--green-300); color: var(--green-800); font-weight: 600;
}

/* Six strands ------------------------------------------------------------ */

.sec-strands {
    background:
        var(--grain),
        radial-gradient(720px 340px at 4% -10%, rgba(46, 139, 87, .08), transparent 60%),
        radial-gradient(680px 340px at 96% 110%, rgba(29, 127, 122, .09), transparent 60%),
        linear-gradient(180deg, #ffffff, #fbfdfb);
}
/* A faint dot grid gives the white band texture without any image weight. */
.sec-strands .sec-dots {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(35, 114, 67, .3) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%);
}

.card-strand { padding-top: 1.6rem; }
.strand-num {
    position: absolute; top: .9rem; right: 1.2rem;
    font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.05em;
    color: var(--green-100); transition: color .4s var(--ease-soft), transform .4s var(--ease-out);
}
.card-strand:hover .strand-num { transform: scale(1.1) translateY(-2px); }
/* The accent rule grows along the foot of the card as it lifts. */
.strand-rule {
    display: block; height: 3px; width: 34px; border-radius: 99px; margin-top: 1rem;
    background: var(--tone, var(--green-600));
    transition: width .45s var(--ease-out);
}
.card-strand:hover .strand-rule { width: 100%; }
/* .card::before is the generic top hairline; the strands use their own tone. */
.card-strand::before { background: var(--tone, var(--grad-line)); }
.tone-green { --tone: linear-gradient(90deg, var(--green-600), var(--teal-600)); }
.tone-amber { --tone: linear-gradient(90deg, var(--gold-500), #e0b64a); }
.tone-blue  { --tone: linear-gradient(90deg, var(--teal-600), #4f9ed6); }
.tone-rose  { --tone: linear-gradient(90deg, #b0566b, #d98da0); }
.tone-amber .strand-num { color: var(--gold-100); }
.tone-blue  .strand-num { color: var(--teal-050); }
.tone-rose  .strand-num { color: var(--rose-100); }

/* Stat strip ------------------------------------------------------------- */

.strip-item .icon {
    margin: 0 auto .5rem; color: var(--green-300); opacity: .9;
    transition: transform .35s var(--ease-out);
}
.strip-item:hover .icon { transform: translateY(-2px) scale(1.12); }

/* Pressures -------------------------------------------------------------- */

.pressure-grid {
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.pressure-intro { position: sticky; top: 6rem; }
.pressure-intro h2 { letter-spacing: -.025em; }
.pressure-intro > p { color: rgba(255, 255, 255, .8); }
.pressure-note {
    border-left: 3px solid transparent; border-image: var(--grad-line) 1;
    padding-left: 1rem; font-size: .96rem; margin-bottom: 0;
}
/* The heading rule is redundant beside the quote rule below it. */
.pressure-intro h2::after { display: none; }

.pressure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pressure {
    display: flex; gap: 1rem; align-items: flex-start;
    background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
    border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px;
    padding: 1.1rem 1.3rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .35s var(--ease-out), background .35s var(--ease-soft),
                border-color .35s var(--ease-soft), box-shadow .35s var(--ease-out);
}
.pressure:hover {
    transform: translateX(6px);
    background: linear-gradient(140deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06));
    border-color: rgba(143, 207, 168, .5);
    box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .9);
}
.pressure-icon {
    width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(143, 207, 168, .26), rgba(29, 127, 122, .22));
    color: #cfeeda;
    transition: transform .4s var(--ease-out);
}
.pressure:hover .pressure-icon { transform: rotate(-8deg) scale(1.08); }
.pressure strong { display: block; color: #fff; font-size: 1.02rem; margin-bottom: .1rem; }
.pressure span   { display: block; color: rgba(255, 255, 255, .74); font-size: .9rem; }

/* Closing call to action ------------------------------------------------- */

.cta-photo { isolation: isolate; }
.cta-photo-bg { position: absolute; inset: 0; z-index: -2; }
.cta-photo-bg img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: .55; filter: saturate(.85);
    animation: slow-pan 34s ease-in-out infinite alternate;
}
/* Heavy on the left, where the words are; lifting to the right so the banyan
   actually shows rather than being a texture nobody can make out. */
.cta-photo::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(104deg, rgba(8, 40, 23, .95) 0%, rgba(14, 63, 38, .88) 34%,
                        rgba(23, 96, 60, .62) 62%, rgba(35, 132, 84, .38) 100%),
        radial-gradient(70% 130% at 6% 110%, rgba(29, 127, 122, .5), transparent 62%);
}
.sec-join {
    background: linear-gradient(180deg, #fbfdfb, var(--green-050));
}

/* ---------------------------------------------------------------- credits */

.credit-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem;
}
.credit-card {
    margin: 0; overflow: hidden; background: #fff;
    border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.credit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* height:auto is required — the img carries a height attribute, which maps to
   the height property and would otherwise beat aspect-ratio. */
.credit-card img {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; display: block;
}
.credit-card figcaption { padding: .9rem 1.1rem 1.1rem; display: grid; gap: .2rem; }
.credit-card strong { color: var(--green-900); line-height: 1.3; }
.credit-card figcaption .muted { display: flex; align-items: center; gap: .35rem; }
.credit-lic { font-size: .82rem; color: var(--muted); }
.credit-lic a { color: var(--green-700); }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .strip::before, .cta-band, .cta-band::after, .cta-glow,
    .section-dark::before, .section-dark::after,
    .gsn-hero-inner .hero-year, .hero .hero-year, .page-hero-bg { animation: none !important; }
    .gsn-hero-inner > *, .page-hero-inner > *, .hero-card,
    .gsn-hero-inner h1 .word, .hero-event { animation: none !important; opacity: 1; }
    .scroll-cue i::after, .hero-event-flag i { animation: none !important; opacity: 1; }
    .carousel-dots .is-active i::after { transform: scaleX(1); }
    .btn::before { display: none; }
    .card:hover, .step:hover, .event-card:hover, .tier:hover, .program:hover,
    .highlight:hover, .download-card:hover, .agenda-item:hover, .kpi:hover,
    .pressure:hover { transform: none; }
    .section-head h2::after { transition: none; transform: scaleX(1); }
    /* The canvas script bails out under reduced motion, so nothing is drawn. */
    .net-bg, .sec-feature .sec-glow { display: none; }
    .cta-photo-bg img { animation: none; }
}

/* --------------------------------------------------------------- narrower */

@media (max-width: 980px) {
    /* The sticky intro has nothing to sit beside once the columns stack. */
    .pressure-grid { grid-template-columns: 1fr; }
    .pressure-intro { position: static; }
}

@media (max-width: 900px) {
    /* Blurred orbs are expensive on phones and add nothing at this size. */
    .section-dark::before, .section-dark::after { display: none; }
    .strip::before, .cta-band::after, .sec-feature .sec-glow { display: none; }
    .strip-item + .strip-item::before { display: none; }
    .carousel::after { box-shadow: inset 0 0 120px 20px rgba(2, 14, 8, .5); }
    .free-badge { width: 62px; height: 62px; }
    .free-badge b { font-size: 1rem; }
}

@media (max-width: 980px) {
    .hero-scrim {
        background:
            linear-gradient(180deg, rgba(6, 26, 15, .94) 0%, rgba(8, 34, 20, .88) 55%,
                            rgba(5, 22, 12, .95) 100%),
            radial-gradient(80% 50% at 80% 0%, rgba(29, 127, 122, .3), transparent 62%);
    }
}

/* Below this the event card cannot sit beside the message, so it stacks under
   it and the scrim turns into a top-to-bottom wash instead of a left-hand one. */
@media (max-width: 1080px) {
    .gsn-hero-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 6.5rem; }
    .hero-event { max-width: 460px; }
    .carousel-scrim {
        background:
            linear-gradient(180deg, rgba(4, 20, 11, .72) 0%, rgba(5, 24, 13, .58) 45%,
                            rgba(4, 18, 10, .86) 100%),
            radial-gradient(90% 60% at 80% 0%, rgba(29, 127, 122, .24), transparent 62%);
    }
    .carousel { min-height: 0; }
    .slide figcaption { display: none; }
}

@media (max-width: 720px) {
    .gsn-hero-inner h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
    .gsn-hero-grid { padding: 2rem 0 6rem; }
    .gsn-hero-inner .hero-marks { gap: .8rem 1.1rem; font-size: .84rem; }
    .hero-event { padding: 1.3rem 1.2rem 1.1rem; }
    .carousel-ui { bottom: 1.4rem; gap: .55rem; }
    /* The counter and the scroll cue are the first things to go. */
    .carousel-count, .scroll-cue { display: none; }
    /* Six full-width dots plus two arrows overflow 92vw, so the track shrinks. */
    .carousel-dots { gap: .3rem; }
    .carousel-dots button { width: 26px; }
    .carousel-dots i, .carousel-dots .is-active i { width: 20px; }
    .carousel-btn { width: 38px; height: 38px; }
}

@media print {
    body::after, .scroll-progress { display: none !important; }
}

/* <picture> wrappers inside media boxes must fill them like the img did. */
.feature-event-media picture, .cta-photo-bg picture, .credit-card picture {
    display: block; width: 100%; height: 100%;
}

/* How to take part ------------------------------------------------------- */

.sec-steps {
    position: relative;
    background:
        var(--grain),
        radial-gradient(760px 340px at 90% 0%, rgba(29, 127, 122, .08), transparent 62%),
        radial-gradient(680px 320px at 6% 100%, rgba(201, 154, 46, .08), transparent 60%),
        linear-gradient(180deg, #ffffff, #f7fbf8);
}
.sec-steps .step { display: flex; flex-direction: column; }
.sec-steps .step .inline-link { margin-top: auto; padding-top: .9rem; }
/* A single numeral reads better than a padded one at this size. */
.sec-steps .step-num { font-size: 3.4rem; top: .7rem; right: 1.4rem; }

/* Convened by ------------------------------------------------------------ */

.sec-partners { padding-top: 0; }
.partners-label {
    text-align: center; margin-bottom: 1.2rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.partner-row {
    list-style: none; margin: 0; padding: 1.4rem 1.6rem;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.4rem;
    background: linear-gradient(170deg, #fff, var(--green-050));
    border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.partner-item {
    display: flex; align-items: center; gap: .8rem;
    transition: transform .3s var(--ease-out);
}
.partner-item:hover { transform: translateY(-2px); }
.partner-item strong { display: block; color: var(--green-900); line-height: 1.25; }
.partner-item .small { display: block; }
.partner-mark {
    width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--green-100), var(--teal-050));
    color: var(--green-700);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

@media (max-width: 720px) {
    .partner-row { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}