/* ============================================================
   Global Skimboarding Federation · Design System
   Deep-ocean navy, federation gold, championship typography.
   ============================================================ */
:root{
  --navy-950:#050d1c;
  --navy-900:#081527;
  --navy-800:#0a1c3a;
  --navy-700:#10294f;
  --navy-600:#173764;
  --ocean-500:#1c63b7;
  --ocean-400:#2f86dd;
  --cyan-300:#4fc3f7;
  --cyan-200:#8ddcff;
  --foam:#eef6fc;
  --white:#ffffff;
  --gold-600:#a8861f;
  --gold-500:#c9a227;
  --gold-400:#e6c35c;
  --gold-300:#f3d98a;
  --ink:#122036;
  --ink-soft:#3c4c66;
  --ink-mute:#64748e;
  --line:#dbe5f0;
  --line-dark:rgba(141,220,255,.14);
  --display:'Archivo',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --shadow-lg:0 30px 80px -20px rgba(8,21,39,.35);
  --shadow-md:0 18px 50px -18px rgba(8,21,39,.25);
  --shadow-sm:0 8px 26px -10px rgba(8,21,39,.18);
  --radius:18px;
  --container:1200px;
  --gutter:28px;
  --nav-h:78px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 60px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ocean-500);text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold-400);color:var(--navy-900);padding:10px 18px;z-index:2000;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--navy-900);line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,5.4vw,4.2rem);font-weight:900}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:800}
h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:700}
h4{font-size:1.08rem;font-weight:700}
.kicker{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-500);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.kicker::before{content:"";width:38px;height:2px;background:linear-gradient(90deg,var(--gold-500),transparent);flex:none}
.kicker.center{justify-content:center}
.kicker.center::after{content:"";width:38px;height:2px;background:linear-gradient(270deg,var(--gold-500),transparent);flex:none}
.lede{font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.32rem);color:var(--ink-soft);line-height:1.75;max-width:820px}
.on-dark .lede,.section-dark .lede{color:#b9cbe2}
.measure{max-width:800px}
.center{text-align:center}
.center .lede,.center.measure,.center .measure{margin-left:auto;margin-right:auto}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy-950);color:#9fb4d0;font-size:.78rem;letter-spacing:.04em;position:relative;z-index:60}
.topbar-inner{display:flex;align-items:center;gap:14px;height:38px}
.tb-spacer{flex:1}
.tb-sep{width:1px;height:12px;background:rgba(159,180,208,.35)}
.tb-link{color:var(--cyan-200);font-weight:600}
.tb-link:hover{color:var(--white)}

/* ---------- Social links (topbar + footer) ---------- */
/* Rendered by build.py only for networks with a URL set, so the row is absent
   rather than empty while the accounts are still being built. */
.soc-row{display:flex;align-items:center;gap:8px}
.soc-link{display:inline-flex;align-items:center;justify-content:center;color:inherit;transition:color .2s,background .2s,transform .2s}
.soc-link svg{display:block}
.soc-top{margin-left:4px}
.soc-top .soc-link{width:24px;height:24px;color:var(--cyan-200)}
.soc-top .soc-link svg{width:15px;height:15px}
.soc-top .soc-link:hover{color:var(--white)}
.soc-foot{margin-top:18px}
.soc-foot .soc-link{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-dark);background:rgba(255,255,255,.03);color:#8ea6c6}
.soc-foot .soc-link svg{width:18px;height:18px}
.soc-foot .soc-link:hover{color:var(--navy-950);background:var(--gold-400);border-color:var(--gold-400);transform:translateY(-2px)}

/* ---------- Main nav ---------- */
.mainnav{position:sticky;top:0;z-index:100;background:rgba(8,21,39,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);transition:box-shadow .3s}
.mainnav.scrolled{box-shadow:0 12px 40px -12px rgba(5,13,28,.7)}
.mainnav-inner{display:flex;align-items:center;height:var(--nav-h);gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-crest{width:52px;height:52px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));transition:transform .4s}
.brand:hover .brand-crest{transform:rotate(-6deg) scale(1.05)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--display);font-weight:800;color:var(--white);font-size:.98rem;letter-spacing:.02em}
.brand-sub{font-family:var(--display);font-weight:600;color:var(--gold-400);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase}
.nav-items{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:6px;color:#c9d8ec;font-family:var(--display);font-weight:600;font-size:.83rem;letter-spacing:.02em;padding:10px 11px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap}
.nav-link:hover{color:var(--white);background:rgba(79,195,247,.08)}
.nav-item.active .nav-link{color:var(--gold-400)}
.chev{opacity:.55;transition:transform .25s}
.nav-item:hover .chev{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);padding-top:12px;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:110}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.dropdown-inner{background:var(--navy-800);border:1px solid var(--line-dark);border-top:2px solid var(--gold-500);border-radius:12px;box-shadow:0 30px 70px -18px rgba(5,13,28,.8);padding:10px;min-width:270px}
.dropdown-link{display:block;color:#c9d8ec;font-size:.86rem;font-weight:500;padding:9px 14px;border-radius:8px;transition:background .15s,color .15s,padding-left .15s}
.dropdown-link:hover{background:rgba(79,195,247,.1);color:var(--white);padding-left:19px}
.nav-ctas{display:flex;gap:10px;margin-left:6px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.hamburger span{display:block;width:26px;height:2.5px;background:var(--white);margin:5.5px 0;border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--navy-900);z-index:95;overflow-y:auto;padding:calc(var(--nav-h) + 60px) 24px 60px;flex-direction:column;gap:4px}
.mobile-menu.open{display:flex}
.m-ctas{display:flex;gap:12px;margin-bottom:18px}
.m-ctas .btn{flex:1;text-align:center}
.m-group{border-bottom:1px solid var(--line-dark)}
.m-head{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:var(--white);font-family:var(--display);font-weight:700;font-size:1.02rem;padding:16px 2px;cursor:pointer}
.m-plus{position:relative;width:14px;height:14px}
.m-plus::before,.m-plus::after{content:"";position:absolute;background:var(--gold-400);transition:transform .25s}
.m-plus::before{left:0;top:6px;width:14px;height:2px}
.m-plus::after{left:6px;top:0;width:2px;height:14px}
.m-group.open .m-plus::after{transform:scaleY(0)}
.m-panel{display:none;padding:2px 2px 14px}
.m-group.open .m-panel{display:block}
.m-sub{display:block;color:#a9bdd8;font-size:.92rem;padding:8px 4px}
.m-foot{display:flex;gap:22px;padding:22px 2px}
.m-foot a{color:var(--cyan-200);font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;padding:13px 26px;border-radius:999px;transition:transform .22s,box-shadow .22s,background .22s,color .22s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn-join{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(79,195,247,.55)}
.btn-join:hover{background:rgba(79,195,247,.12);box-shadow:inset 0 0 0 2px var(--cyan-300)}
.btn-donate{background:linear-gradient(135deg,var(--gold-400),var(--gold-500) 55%,var(--gold-600));color:var(--navy-900);box-shadow:0 10px 26px -8px rgba(201,162,39,.55)}
.btn-donate:hover{box-shadow:0 16px 34px -8px rgba(201,162,39,.7)}
.btn-primary{background:linear-gradient(135deg,var(--ocean-400),var(--ocean-500) 60%,var(--navy-600));color:var(--white);box-shadow:0 12px 30px -10px rgba(28,99,183,.6)}
.btn-primary:hover{box-shadow:0 18px 40px -10px rgba(28,99,183,.75)}
.btn-outline{background:transparent;color:var(--navy-800);box-shadow:inset 0 0 0 2px var(--navy-800)}
.btn-outline:hover{background:var(--navy-800);color:var(--white)}
.btn-outline-light{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--white)}
.btn-lg{padding:17px 36px;font-size:.95rem}
.btn-block{width:100%}

/* ---------- Page hero (interior) ---------- */
.page-hero{position:relative;background:radial-gradient(120% 140% at 15% 0%,var(--navy-700) 0%,var(--navy-800) 45%,var(--navy-950) 100%);color:var(--white);padding:110px 0 130px;overflow:hidden;isolation:isolate}
.page-hero h1{color:var(--white);max-width:900px;text-wrap:balance}
.page-hero .lede{color:#b9cbe2;margin-top:22px}
.page-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 320px at 85% 15%,rgba(79,195,247,.14),transparent 65%),
  radial-gradient(520px 300px at 70% 90%,rgba(201,162,39,.1),transparent 60%);z-index:-1}
.ph-waves{position:absolute;left:0;right:0;bottom:-2px;height:130px;z-index:0;opacity:.9;pointer-events:none}
.ph-waves .wavecanvas{width:100%;height:100%}
.page-hero .container{position:relative;z-index:2}

/* ---------- Sections ---------- */
.section{padding:104px 0}
.section-tight{padding:76px 0}
.section-foam{background:linear-gradient(180deg,var(--foam) 0%,#ffffff 100%)}
.section-foam-solid{background:var(--foam)}
.section-dark{background:radial-gradient(130% 120% at 50% 0%,var(--navy-800) 0%,var(--navy-900) 55%,var(--navy-950) 100%);color:#c9d8ec}
.section-dark h2,.section-dark h3,.section-dark h4{color:var(--white)}
.section-dark p{color:#b9cbe2}
.sec-head{margin-bottom:56px}
.sec-head h2{margin-bottom:16px}
.divider-gold{width:76px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));margin:26px 0}
.center .divider-gold{margin-left:auto;margin-right:auto}

/* ---------- Grids and cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#c3d4e8}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--ocean-400),var(--cyan-300));opacity:0;transition:opacity .3s}
.card:hover::after{opacity:1}
.card.gold::after{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.card h3{margin-bottom:12px}
.card h4{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:.97rem}
.card p + p{margin-top:10px}
.card .card-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:var(--display);font-weight:700;font-size:.83rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean-500)}
.card .card-link::after{content:"→";transition:transform .25s}
.card:hover .card-link::after{transform:translateX(5px)}
.card-dark{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));border-color:var(--line-dark)}
.card-dark h3,.card-dark h4{color:var(--white)}
.card-dark p{color:#a9bdd8}
.icon-chip{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,rgba(47,134,221,.12),rgba(79,195,247,.18));color:var(--ocean-500);margin-bottom:20px;font-size:1.4rem}
.card-dark .icon-chip{background:rgba(79,195,247,.12);color:var(--cyan-300)}
.icon-chip.gold{background:linear-gradient(140deg,rgba(201,162,39,.14),rgba(243,217,138,.22));color:var(--gold-600)}
.icon-chip svg{width:26px;height:26px}
/* Leadership headshot. Occupies the slot .icon-chip occupies inside a .card, so it
   carries the same 20px bottom margin to keep both card variants aligned. */
.portrait{display:block;width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:center top;margin-bottom:20px;border:2px solid var(--white);box-shadow:0 8px 22px -10px rgba(28,99,183,.45),0 0 0 2px var(--gold-500);transition:transform .45s cubic-bezier(.19,1,.22,1)}
.card:hover .portrait{transform:scale(1.05)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.badge-dev{background:rgba(201,162,39,.12);color:var(--gold-600);border:1px solid rgba(201,162,39,.35)}
.badge-dev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-500);animation:pulse 2s infinite}
.badge-live{background:rgba(28,99,183,.1);color:var(--ocean-500);border:1px solid rgba(28,99,183,.3)}
.badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ocean-400);animation:pulse 2s infinite}
.badge-soon{background:rgba(100,116,142,.1);color:var(--ink-mute);border:1px solid rgba(100,116,142,.3)}
.badge-free{background:rgba(22,132,90,.1);color:#0f7a52;border:1px solid rgba(22,132,90,.3)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ---------- Stats ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stat{padding:34px 16px;border-radius:var(--radius);position:relative}
.stat-band .stat{background:rgba(255,255,255,.035);border:1px solid var(--line-dark)}
.stat-num{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;background:linear-gradient(135deg,var(--cyan-200),var(--cyan-300) 45%,var(--gold-300));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.stat-label{margin-top:12px;font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#8ea6c6}
.stat-sub{margin-top:6px;font-size:.82rem;color:#6d84a6}

/* ---------- Pathway (LOCAL -> WORLD) ---------- */
.pathway{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin:44px 0}
.path-step{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:150px}
.path-node{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:1.06rem;position:relative;background:linear-gradient(150deg,var(--navy-700),var(--navy-900));color:var(--cyan-200);border:2px solid rgba(79,195,247,.4);box-shadow:0 0 0 6px rgba(79,195,247,.07)}
.path-step:last-child .path-node{background:linear-gradient(150deg,var(--gold-500),var(--gold-600));color:var(--navy-950);border-color:var(--gold-300);box-shadow:0 0 0 6px rgba(201,162,39,.15)}
.path-label{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-800)}
.section-dark .path-label{color:#c9d8ec}
.path-arrow{width:64px;height:2px;background:linear-gradient(90deg,rgba(79,195,247,.2),rgba(79,195,247,.7));position:relative;margin:0 4px 34px}
.path-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:rgba(79,195,247,.7)}

/* ---------- Feature split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.split-media img{width:100%}
.split-panel{background:linear-gradient(160deg,var(--navy-800),var(--navy-950));border-radius:22px;padding:54px 48px;color:#c9d8ec;position:relative;overflow:hidden}
/* Roomier desktop padding for feature panels. Declared as classes rather than
   inline styles so the phone media query can pull them back in. */
.card.pad-xl{padding:60px 40px}
.card.pad-sm{padding:26px 24px}
.quote-panel{padding:34px 38px}
.split-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 90% 0%,rgba(79,195,247,.14),transparent 60%)}
.split-panel > *{position:relative}
/* The panel is dark, so every heading level inside it needs light text, not just
   h3. h4 was inheriting the light-mode ink and rendering at 1.06:1 contrast
   (navy on navy, effectively invisible) wherever a timeline sat inside a panel. */
.split-panel h1,.split-panel h2,.split-panel h3,.split-panel h4,.split-panel h5{color:var(--white)}
.split-panel .tl-item p{color:#a9bdd8}

/* ---------- Lists ---------- */
.check-list{list-style:none;display:grid;gap:14px;margin:24px 0}
.check-list li{position:relative;padding-left:36px;color:var(--ink-soft)}
.check-list li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:linear-gradient(140deg,var(--ocean-400),var(--cyan-300))}
.check-list li::after{content:"";position:absolute;left:7px;top:10px;width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(40deg)}
.section-dark .check-list li,.split-panel .check-list li,.card-dark .check-list li{color:#b9cbe2}
.check-list.gold li::before{background:linear-gradient(140deg,var(--gold-500),var(--gold-300))}
.check-list.gold li::after{border-color:var(--navy-900)}

/* ---------- Membership tier cards ---------- */
.tier{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:40px 34px;box-shadow:var(--shadow-sm);position:relative;transition:transform .3s,box-shadow .3s}
.tier:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.tier-flag{position:absolute;top:0;left:34px;transform:translateY(-50%)}
.tier-name{font-family:var(--display);font-weight:800;font-size:1.16rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy-900)}
.tier-price{display:flex;align-items:baseline;gap:8px;margin:16px 0 6px}
.tier-amount{font-family:var(--display);font-weight:900;font-size:2.9rem;color:var(--navy-900);letter-spacing:-.02em}
.tier-per{color:var(--ink-mute);font-size:.9rem;font-weight:600}
.tier-note{font-size:.85rem;color:var(--ink-mute);margin-bottom:18px}
.tier hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.tier .check-list{gap:10px;font-size:.93rem;margin:0 0 26px}
.tier .check-list li{padding-left:32px}
.tier .check-list li::before{width:17px;height:17px;top:6px}
.tier .check-list li::after{left:6px;top:10px;width:4px;height:8px}
.tier-cta{margin-top:auto;display:grid;gap:10px}
.tier-fine{font-size:.78rem;color:var(--ink-mute);margin-top:14px;line-height:1.55}
.tier > .tier-fine{margin:auto 0 16px}
.tier > .tier-fine + .tier-cta{margin-top:0}
.tier.featured{border:2px solid var(--gold-500);box-shadow:0 24px 60px -18px rgba(201,162,39,.35)}
.tier.featured::before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(180deg,rgba(243,217,138,.1),transparent 40%);pointer-events:none}

/* ---------- CTA bands ---------- */
.cta-band{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(120deg,var(--navy-800) 0%,var(--navy-700) 45%,var(--ocean-500) 130%);color:var(--white);padding:74px 64px;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 300px at 88% 10%,rgba(243,217,138,.16),transparent 60%),radial-gradient(420px 260px at 8% 100%,rgba(79,195,247,.18),transparent 60%);z-index:-1}
.cta-band h2{color:var(--white);margin-bottom:14px}
.cta-band p{color:#c6d7ec;max-width:640px}
.cta-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.cta-gold{background:linear-gradient(120deg,#8a6d14 0%,var(--gold-500) 45%,var(--gold-400) 100%);color:var(--navy-950)}
.cta-gold h2{color:var(--navy-950)}
.cta-gold p{color:#3d3212}

/* ---------- Notices ---------- */
.notice{border-radius:14px;padding:22px 26px;font-size:.93rem;line-height:1.65;margin:26px 0;border:1px solid}
.notice-info{background:#eef6fc;border-color:#c3ddf2;color:#1d4e89}
.notice-gold{background:#fdf8ea;border-color:#ecd9a0;color:#6b5410}
.notice-dark{background:rgba(255,255,255,.04);border-color:var(--line-dark);color:#a9bdd8}
.notice strong{font-weight:700}
.donorbox-frame{margin:26px 0}
.donorbox-frame iframe{display:block;width:100%;border:0;border-radius:14px;background:#fff}
/* The giving card's heavy desktop padding squeezes the Donorbox iframe below the ~250px it
   needs to lay out its amount buttons on a 320px phone. Declared as a class, not inline, so
   these media queries can actually reach it. */
   Note .card has its own padding inside later media queries, and a lone .give-card ties it on
   specificity and loses on source order, so these are written as .card.give-card.
   On phones the card goes full-bleed: it cancels the .container gutter with a negative margin
   and drops its own side padding, handing the iframe the entire viewport width. Below roughly
   300px Donorbox clips its own labels ("$Custom Am..."), and almost all of this traffic is
   phones at skim events, so the form gets the room and the card gives it up. */
.card.give-card{padding:44px 38px}
@media (max-width:700px){
  .card.give-card{
    margin-left:calc(-1 * var(--gutter));
    margin-right:calc(-1 * var(--gutter));
    padding:30px 0;
    border-radius:0;
  }
  .card.give-card > :not(.donorbox-frame){padding-left:var(--gutter);padding-right:var(--gutter)}
  .card.give-card .donorbox-frame{margin:22px 0}
  .card.give-card .donorbox-frame iframe{border-radius:0;max-width:none !important}
}

/* ---------- Accordion ---------- */
.accordion{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white)}
.acc-item + .acc-item{border-top:1px solid var(--line)}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;background:none;border:0;text-align:left;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy-900);padding:22px 26px;cursor:pointer;transition:background .2s}
.acc-head:hover{background:var(--foam)}
.acc-icon{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--ocean-400);position:relative;transition:transform .3s,background .3s}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--ocean-400);transition:background .3s}
.acc-icon::before{left:6px;top:10px;width:10px;height:2px}
.acc-icon::after{left:10px;top:6px;width:2px;height:10px;transition:transform .3s}
.acc-item.open .acc-icon{background:var(--ocean-400);transform:rotate(180deg)}
.acc-item.open .acc-icon::before,.acc-item.open .acc-icon::after{background:var(--white)}
.acc-item.open .acc-icon::after{transform:scaleY(0)}
.acc-body{display:none;padding:0 26px 26px;color:var(--ink-soft);font-size:.96rem}
.acc-item.open .acc-body{display:block}

/* ---------- Timeline ---------- */
.timeline{position:relative;display:grid;gap:0;margin:30px 0}
.tl-item{position:relative;padding:0 0 42px 46px}
.tl-item::before{content:"";position:absolute;left:10px;top:8px;bottom:-8px;width:2px;background:linear-gradient(180deg,rgba(79,195,247,.6),rgba(79,195,247,.08))}
.tl-item:last-child::before{display:none}
.tl-item::after{content:"";position:absolute;left:3px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--navy-900);border:3px solid var(--cyan-300);box-shadow:0 0 0 5px rgba(79,195,247,.12)}
.tl-item.gold::after{border-color:var(--gold-400);box-shadow:0 0 0 5px rgba(201,162,39,.14)}
.tl-date{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500);margin-bottom:6px}
.tl-item h4{margin-bottom:8px}
.tl-item p{font-size:.95rem;color:var(--ink-soft)}
.section-dark .tl-item h4{color:var(--white)}
.section-dark .tl-item p{color:#a9bdd8}
.section-dark .tl-item::after{background:var(--navy-950)}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;position:relative;padding:26px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);background:var(--navy-950)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-item{display:flex;align-items:center;gap:26px;padding:0 26px;font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;color:#7c96ba;white-space:nowrap}
.mq-item::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-500);opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
table.gsf{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--white)}
table.gsf th{background:var(--navy-900);color:var(--white);font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:16px 20px;text-align:left}
table.gsf td{padding:15px 20px;border-top:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
table.gsf tr:nth-child(even) td{background:var(--foam)}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-800);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font-family:var(--body);font-size:.97rem;color:var(--ink);background:var(--white);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ocean-400);box-shadow:0 0 0 4px rgba(47,134,221,.12)}
.field textarea{min-height:140px;resize:vertical}
.form-fine{font-size:.8rem;color:var(--ink-mute)}

/* ---------- Home hero ---------- */
.home-hero{position:relative;min-height:92vh;display:flex;align-items:center;background:radial-gradient(140% 120% at 20% 0%,var(--navy-700) 0%,var(--navy-800) 40%,var(--navy-950) 100%);color:var(--white);overflow:hidden;isolation:isolate;padding:90px 0 150px}
.home-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 460px at 82% 18%,rgba(79,195,247,.16),transparent 62%),
  radial-gradient(640px 380px at 90% 85%,rgba(201,162,39,.12),transparent 60%),
  radial-gradient(500px 300px at 5% 90%,rgba(47,134,221,.14),transparent 60%)}
.hh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;position:relative;z-index:2}
.hh-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(243,217,138,.1);border:1px solid rgba(243,217,138,.3);color:var(--gold-300);border-radius:999px;padding:8px 18px;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px}
.hh-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-400);animation:pulse 2s infinite}
.home-hero h1{color:var(--white);font-size:clamp(2.9rem,6vw,4.9rem);margin-bottom:26px}
.home-hero h1 .grad{background:linear-gradient(120deg,var(--cyan-200) 0%,var(--cyan-300) 45%,var(--gold-300) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hh-crest{position:relative;display:flex;align-items:center;justify-content:center}
.hh-crest img{width:min(430px,100%);filter:drop-shadow(0 40px 80px rgba(0,0,0,.55));animation:crestfloat 7s ease-in-out infinite}
.hh-halo{position:absolute;width:120%;padding-bottom:120%;border-radius:50%;background:radial-gradient(circle,rgba(79,195,247,.16) 0%,transparent 62%);animation:halopulse 7s ease-in-out infinite}
.hh-ring{position:absolute;width:108%;padding-bottom:108%;border-radius:50%;border:1px dashed rgba(141,220,255,.28);animation:ringspin 60s linear infinite}
@keyframes crestfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes halopulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.06);opacity:1}}
@keyframes ringspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero-waves{position:absolute;left:0;right:0;bottom:-2px;height:170px;z-index:1;pointer-events:none}
.hero-waves .wavecanvas{width:100%;height:100%}
.hh-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:#8ea6c6;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;font-family:var(--display);font-weight:600}
.hh-scroll span{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--cyan-300),transparent);animation:scrollhint 2s ease-in-out infinite}
@keyframes scrollhint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Event banner ---------- */
.event-strip{background:linear-gradient(90deg,#8a6d14,var(--gold-500) 40%,var(--gold-400));color:var(--navy-950);position:relative;overflow:hidden}
.event-strip .container{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.es-tag{font-family:var(--display);font-weight:900;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;background:var(--navy-950);color:var(--gold-300);padding:7px 14px;border-radius:8px;flex:none}
.es-text{font-family:var(--display);font-weight:700;font-size:.98rem}
.es-link{margin-left:auto;font-family:var(--display);font-weight:800;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-950);border-bottom:2px solid var(--navy-950);padding-bottom:2px;white-space:nowrap}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950);color:#8ea6c6;position:relative;padding:0 0 40px}
.f-wave{margin-top:-1px;line-height:0;transform:translateY(-99%);position:absolute;left:0;right:0;top:0}
.f-wave svg{width:100%;height:70px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;padding-top:84px;padding-bottom:56px}
.f-crest{width:92px;margin-bottom:20px}
.f-name{font-family:var(--display);font-weight:800;color:var(--white);font-size:1.12rem;margin-bottom:6px}
.f-tag{font-family:var(--serif);color:var(--gold-300);font-size:.94rem;margin-bottom:18px}
.f-legal{font-size:.8rem;line-height:1.8;color:#64809f}
.f-head{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);margin-bottom:18px}
.f-col a{display:block;color:#9fb4d0;font-size:.9rem;padding:5px 0;transition:color .2s,padding-left .2s}
.f-col a:hover{color:var(--white);padding-left:5px}
.f-addr{font-size:.84rem;line-height:1.7;color:#64809f;margin-top:12px}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(141,220,255,.1);padding-top:28px;font-size:.8rem;color:#64809f}
.f-policy{display:flex;gap:22px;flex-wrap:wrap}
.f-policy a{color:#9fb4d0}
.f-policy a:hover{color:var(--white)}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .8s,transform .8s cubic-bezier(.2,.65,.3,1)}
.reveal-scale.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-scale{opacity:1;transform:none;transition:none}
  .hh-crest img,.hh-halo,.hh-ring,.marquee-track,.badge-dev::before,.badge-live::before,.hh-eyebrow::before{animation:none}
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}.mt-4{margin-top:64px}
.mb-1{margin-bottom:12px}.mb-2{margin-bottom:24px}.mb-3{margin-bottom:40px}
.gap-lg{gap:44px}
.gold-text{color:var(--gold-500)}
.small{font-size:.85rem;color:var(--ink-mute)}
.eyelet{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- Nav fit: JOIN GSF + DONATE stay visible at every width ---------- */
@media (min-width:1380px){
  .mainnav .container{max-width:1560px}
  .nav-link{font-size:.76rem;padding:10px 7px}
  .nav-ctas .btn{padding:10px 16px;font-size:.76rem}
  .nav-item:nth-last-child(-n+2) .dropdown{left:auto;right:0;transform:translate(0,8px)}
  .nav-item:nth-last-child(-n+2):hover .dropdown,.nav-item:nth-last-child(-n+2):focus-within .dropdown{transform:translate(0,0)}
}

/* ---------- Responsive ---------- */
@media (max-width:1379px){
  .nav-items{display:none}
  .hamburger{display:block}
  .nav-ctas{margin-left:auto}
  .nav-ctas .btn{padding:10px 16px;font-size:.74rem}
}
@media (max-width:479px){
  .nav-ctas .btn-join{display:none}
  .nav-ctas .btn-donate{padding:9px 14px;font-size:.7rem}
}
@media (max-width:1259px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:44px}
  .hh-grid{grid-template-columns:1fr;gap:50px;text-align:left}
  .hh-crest{order:-1}
  .hh-crest img{width:min(300px,70%)}
}
@media (max-width:760px){
  .section{padding:72px 0}
  .section-tight{padding:56px 0}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .cta-band{padding:50px 30px}
  .f-grid{grid-template-columns:1fr;gap:36px}
  .f-bottom{flex-direction:column;align-items:flex-start}
  .topbar-inner{justify-content:center}
  .tb-hide-sm,.tb-spacer{display:none}
  .brand-name{font-size:.86rem}
  .brand-crest{width:44px;height:44px}
  .pathway{flex-direction:column;gap:8px}
  .path-arrow{width:2px;height:34px;background:linear-gradient(180deg,rgba(79,195,247,.2),rgba(79,195,247,.7));margin:6px 0}
  .path-arrow::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top-color:rgba(79,195,247,.7);border-left-color:transparent}
  .stat-band{grid-template-columns:1fr 1fr;gap:16px}
  .home-hero{min-height:0;padding:70px 0 130px}
  .es-link{margin-left:0}
}

/* ============================================================
   FX layer v2: hover = drift up + backlit glow BEHIND the card
   (pure CSS, zero lag). Plus always-on engineered detail.
   ============================================================ */

/* Refined card surface + always-visible signature top line */
.card{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}
.card::after{opacity:.4}
.card:hover::after{opacity:1}
.card-dark{background:linear-gradient(160deg,var(--navy-800),var(--navy-900))}

/* Hover model: smooth lift, backlit halo rendered behind the surface */
.card,.tier,.stat,.split-panel,.cta-band{transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s cubic-bezier(.19,1,.22,1),border-color .45s,background .45s}
.card:hover{transform:translateY(-8px);border-color:#cddcee;box-shadow:0 26px 55px -18px rgba(8,21,39,.3),0 14px 60px -6px rgba(79,195,247,.26),0 -10px 44px -14px rgba(201,162,39,.15)}
.card-dark:hover{border-color:rgba(141,220,255,.28);box-shadow:0 26px 55px -18px rgba(0,0,0,.5),0 14px 70px -6px rgba(79,195,247,.22),0 -10px 50px -14px rgba(201,162,39,.18)}
.tier:hover{transform:translateY(-10px);box-shadow:0 30px 65px -20px rgba(8,21,39,.32),0 16px 70px -8px rgba(79,195,247,.24),0 -12px 50px -16px rgba(201,162,39,.15)}
.tier.featured:hover{box-shadow:0 30px 65px -20px rgba(8,21,39,.32),0 16px 80px -8px rgba(201,162,39,.38),0 -12px 50px -16px rgba(243,217,138,.24)}
.stat:hover{transform:translateY(-6px);border-color:rgba(79,195,247,.4);background:rgba(255,255,255,.055);box-shadow:0 18px 50px -14px rgba(0,0,0,.45),0 10px 55px -6px rgba(79,195,247,.2),0 -8px 40px -12px rgba(201,162,39,.15)}
.split-panel:hover{box-shadow:0 34px 80px -22px rgba(5,13,28,.65),0 16px 70px -8px rgba(79,195,247,.18),0 -12px 50px -16px rgba(201,162,39,.15)}

/* Stat cards: glass gradient + gold top hairline */
.stat-band .stat{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border-top:1px solid rgba(243,217,138,.3)}

/* Icon chips come alive inside a hovered card */
.icon-chip{transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s}
.card:hover .icon-chip{transform:scale(1.1) rotate(-5deg);box-shadow:0 10px 22px -10px rgba(28,99,183,.4)}
.card:hover .icon-chip.gold{box-shadow:0 10px 22px -10px rgba(201,162,39,.45)}

/* Button shine sweep */
.btn{position:relative;overflow:hidden}
.btn>*{position:relative;z-index:1}
.btn::after{content:"";position:absolute;top:-10%;left:-85%;width:55%;height:120%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn:hover::after{left:135%}
.btn-outline::after,.btn-outline-light::after,.btn-join::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent)}

/* Dark sections: slow aurora drift + faint chart-grid echoing the globe */
.section-dark{position:relative;overflow:hidden}
.section-dark::before{content:"";position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(640px 420px at 18% 28%,rgba(79,195,247,.08),transparent 60%),radial-gradient(560px 380px at 82% 72%,rgba(201,162,39,.06),transparent 60%),radial-gradient(420px 300px at 55% 10%,rgba(47,134,221,.07),transparent 60%);animation:aurora 20s ease-in-out infinite alternate}
.section-dark::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(141,220,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(141,220,255,.035) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(85% 85% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(85% 85% at 50% 40%,#000 30%,transparent 100%)}
.section-dark>.container{position:relative;z-index:1}
@keyframes aurora{from{transform:translate3d(-2.5%,-2%,0) scale(1)}to{transform:translate3d(2.5%,3%,0) scale(1.05)}}

/* Foam sections: faint engineered dot grid */
.section-foam,.section-foam-solid{background-image:radial-gradient(rgba(28,99,183,.055) 1px,transparent 1.5px),linear-gradient(180deg,var(--foam) 0%,#ffffff 100%);background-size:26px 26px,auto}
.section-foam-solid{background-image:radial-gradient(rgba(28,99,183,.055) 1px,transparent 1.5px),linear-gradient(0deg,var(--foam),var(--foam))}

/* Interior heroes: breathing glow + ghosted federation mark */
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 300px at 20% 80%,rgba(47,134,221,.1),transparent 60%);animation:halopulse 9s ease-in-out infinite;z-index:0}
.ph-mark{position:absolute;right:-40px;top:50%;transform:translateY(-52%);width:560px;height:360px;background:url(/img/gsf-wave-logo.png) center/contain no-repeat;filter:brightness(0) invert(1);opacity:.038;pointer-events:none;z-index:0}
@media (max-width:980px){.ph-mark{display:none}}

/* Tier cards: gradient rule under the price block */
.tier hr{border:0;height:1px;background:linear-gradient(90deg,var(--gold-400),#dbe5f0 55%,transparent)}

/* Panels and media: luminous hairline edges */
.split-media{border:1px solid rgba(8,21,39,.08)}
.split-panel{border:1px solid rgba(141,220,255,.12)}
.cta-band{border:1px solid rgba(141,220,255,.14);box-shadow:0 40px 90px -30px rgba(8,21,39,.5)}
.cta-band:hover{box-shadow:0 44px 100px -30px rgba(8,21,39,.55),0 0 90px -20px rgba(79,195,247,.22)}

/* Tables: row hover tint */
table.gsf tbody tr{transition:background .2s}
table.gsf tr:hover td{background:#e7f1fb !important}

/* Accordion: gold spine when open */
.acc-item{transition:box-shadow .25s,background .25s}
.acc-item.open{box-shadow:inset 3px 0 0 var(--gold-500);background:linear-gradient(90deg,rgba(243,217,138,.06),transparent 30%)}

/* Timeline nodes glow on hover */
.tl-item{transition:transform .25s}
.tl-item:hover{transform:translateX(4px)}
.tl-item:hover::after{box-shadow:0 0 0 7px rgba(79,195,247,.22)}
.tl-item.gold:hover::after{box-shadow:0 0 0 7px rgba(201,162,39,.26)}

/* Pathway nodes lift on hover */
.path-node{transition:transform .3s,box-shadow .3s}
.path-step:hover .path-node{transform:translateY(-5px) scale(1.06);box-shadow:0 0 0 8px rgba(79,195,247,.14),0 14px 30px -12px rgba(8,21,39,.5)}

/* Notices: accent bars + gentle lift */
.notice{position:relative;transition:transform .25s,box-shadow .25s}
.notice-info{box-shadow:inset 3px 0 0 var(--ocean-400)}
.notice-gold{box-shadow:inset 3px 0 0 var(--gold-500)}
.notice-dark{box-shadow:inset 3px 0 0 rgba(141,220,255,.4)}
.notice:hover{transform:translateY(-2px)}

/* Dropdown gold tick + footer underline sweep */
.dropdown-link{position:relative}
.dropdown-link::before{content:"";position:absolute;left:8px;top:50%;width:0;height:2px;border-radius:1px;background:var(--gold-400);transform:translateY(-50%);transition:width .18s}
.dropdown-link:hover::before{width:6px}
.f-col a{position:relative;width:fit-content}
.f-col a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--gold-400);transition:width .25s}
.f-col a:hover::after{width:100%}

/* Event strip: soft sheen drift */
.event-strip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);background-size:280% 100%;animation:stripsheen 7s ease-in-out infinite}
@keyframes stripsheen{0%,100%{background-position:120% 0}45%,55%{background-position:-20% 0}}

@media (prefers-reduced-motion:reduce){
  .section-dark::before,.page-hero::after,.event-strip::after{animation:none}
  .card:hover,.tier:hover,.stat:hover{transform:none}
  .btn::after{display:none}
}
@media (hover:none){
  .btn::after{display:none}
}

/* ============================================================
   Water hero: live ocean footage behind the above-the-fold band
   ============================================================ */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#08182e url(/img/ocean-poster.jpg) center/cover no-repeat}
.hv-media{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:saturate(1.12) contrast(1.06) brightness(.92) hue-rotate(-6deg);transform:translate(-50%,-50%) scale(1.06);animation:hvdrift 38s ease-in-out infinite alternate}
@keyframes hvdrift{from{transform:translate(-50%,-50%) scale(1.06)}to{transform:translate(-51.6%,-51.2%) scale(1.15)}}
.hv-scrim{position:absolute;inset:0;pointer-events:none}

/* Readability scrims: dense under the copy, transparent where the water reads */
.home-hero .hv-scrim{background:
  linear-gradient(96deg,rgba(4,13,27,.94) 0%,rgba(4,13,27,.9) 30%,rgba(4,13,27,.4) 60%,rgba(4,13,27,.5) 100%),
  linear-gradient(180deg,rgba(4,13,27,.8) 0%,rgba(4,13,27,.06) 22%,rgba(4,13,27,.08) 58%,rgba(8,21,39,.92) 100%),
  radial-gradient(420px 420px at 74% 52%,rgba(4,13,27,.5),transparent 72%),
  radial-gradient(900px 460px at 82% 18%,rgba(79,195,247,.18),transparent 62%),
  radial-gradient(640px 380px at 90% 85%,rgba(201,162,39,.12),transparent 60%)}
.page-hero .hv-scrim{background:
  linear-gradient(100deg,rgba(4,13,27,.94) 0%,rgba(4,13,27,.88) 42%,rgba(4,13,27,.52) 78%,rgba(4,13,27,.62) 100%),
  linear-gradient(180deg,rgba(4,13,27,.78) 0%,rgba(4,13,27,.12) 34%,rgba(8,21,39,.92) 100%),
  radial-gradient(700px 320px at 85% 15%,rgba(79,195,247,.16),transparent 65%),
  radial-gradient(520px 300px at 70% 90%,rgba(201,162,39,.1),transparent 60%)}

/* The old flat glow layers are now carried by the scrim */
.home-hero::before,.page-hero::before{display:none}
.ph-mark{display:none}

/* Stacking above the footage */
.page-hero::after{z-index:1}
.hero-waves,.ph-waves{z-index:2}
.home-hero .container,.page-hero .container{position:relative;z-index:3}
.hh-scroll{z-index:4}

/* Type holds its contrast over moving water */
.home-hero h1,.page-hero h1{text-shadow:0 3px 28px rgba(2,8,18,.68)}
.home-hero .lede,.page-hero .lede{color:#d2e0ef;text-shadow:0 2px 16px rgba(2,8,18,.7)}
.home-hero .small,.page-hero .kicker,.hh-eyebrow{text-shadow:0 2px 14px rgba(2,8,18,.7)}
.home-hero .small{color:#a9bfd8 !important}
.hh-eyebrow{background:rgba(4,13,27,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hh-scroll{text-shadow:0 2px 12px rgba(2,8,18,.8)}

/* Crest sits fully inside its column, edges never clipped */
.hh-crest{padding:34px 10px;overflow:visible}
.hh-crest img{width:min(392px,100%);max-width:100%}
.hh-halo{width:112%;padding-bottom:112%}
.hh-ring{width:100%;padding-bottom:100%}

@media (max-width:980px){
  .home-hero .hv-scrim{background:
    linear-gradient(180deg,rgba(4,13,27,.9) 0%,rgba(4,13,27,.78) 30%,rgba(4,13,27,.8) 60%,rgba(8,21,39,.96) 100%),
    radial-gradient(700px 420px at 80% 20%,rgba(79,195,247,.16),transparent 62%)}
  .page-hero .hv-scrim{background:linear-gradient(180deg,rgba(4,13,27,.9) 0%,rgba(4,13,27,.8) 40%,rgba(8,21,39,.95) 100%)}
  .hh-crest{padding:12px}
  .hh-crest img{width:min(290px,68%)}
}
@media (prefers-reduced-motion:reduce){
  .hv-media{animation:none}
}

/* ============================================================
   Federation mark beside interior headlines + the cyan-to-gold accent
   ============================================================ */
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.ph-copy{min-width:0}
.ph-crest{position:relative;display:flex;align-items:center;justify-content:center;flex:none}
.ph-crest img{position:relative;z-index:1;width:min(228px,19vw);filter:drop-shadow(0 26px 54px rgba(0,0,0,.6));animation:crestfloat 7s ease-in-out infinite}
.ph-crest-halo{position:absolute;width:150%;padding-bottom:150%;border-radius:50%;background:radial-gradient(circle,rgba(4,13,27,.55) 0%,rgba(79,195,247,.1) 45%,transparent 70%);animation:halopulse 7s ease-in-out infinite}

/* The accent phrase: same cyan-to-gold sweep as the home headline */
.grad{background:linear-gradient(120deg,var(--cyan-200) 0%,var(--cyan-300) 45%,var(--gold-300) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:1100px){.ph-crest img{width:min(180px,18vw)}.ph-grid{gap:40px}}
@media (max-width:980px){
  .ph-grid{grid-template-columns:1fr;gap:0}
  .ph-crest{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ph-crest img,.ph-crest-halo{animation:none}
}

/* Crest artwork now carries its own transparent margin, so scale to match */
.brand-crest{width:56px;height:56px}
.f-crest{width:99px}
.hh-crest img{width:min(420px,100%)}
.ph-crest img{width:min(244px,20vw)}
@media (max-width:1100px){.ph-crest img{width:min(194px,19vw)}}
@media (max-width:980px){
  .brand-crest{width:47px;height:47px}
  .hh-crest img{width:min(310px,72%)}
}

/* Let the crest simply float. No orbiting ring, no pointer tracking. */
.hh-ring{display:none}

/* Tighten the home hero so the calls to action clear the fold */
.home-hero{min-height:0;padding:52px 0 96px}
@media (max-width:980px){.home-hero{padding:48px 0 104px}}

/* ============================================================
   Tablet: give cards room instead of squeezing three across
   ============================================================ */
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.tier{overflow-wrap:break-word}
/* Long labels wrap inside a narrow card rather than spilling out of it */
.btn{white-space:normal;text-align:center}
.nav-ctas .btn,.m-ctas .btn{white-space:nowrap}
@media (max-width:1259px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier{padding:34px 28px}
}
@media (max-width:860px){
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* Three-up stat bands, previously forced with an inline style */
.stat-band-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.stat-band-3{grid-template-columns:1fr}}

/* ============================================================
   Phone: most visitors arrive here, so it gets its own pass
   ============================================================ */
@media (max-width:600px){
  /* Frame */
  :root{--gutter:20px}
  .section{padding:64px 0}
  .section-tight{padding:48px 0}
  .sec-head{margin-bottom:34px}

  /* Type: smaller, tighter, and balanced so no word is left alone */
  h1{font-size:clamp(2.05rem,8.6vw,2.6rem);letter-spacing:-.02em}
  h2{font-size:clamp(1.55rem,6.2vw,1.95rem)}
  h3{font-size:1.16rem}
  h1,h2,h3,h4,.lede{text-wrap:balance}
  .lede{font-size:1.04rem;line-height:1.68}
  .kicker{font-size:.72rem;letter-spacing:.18em;gap:10px;margin-bottom:14px}
  .kicker::before,.kicker.center::after{width:24px}
  .divider-gold{margin:20px 0}

  /* Header: keep the row on one line and the tap targets honest */
  .mainnav-inner{gap:12px;padding:0 16px}
  .brand{gap:9px}
  .brand-crest{width:40px;height:40px}
  .brand-name{font-size:.8rem}
  .brand-sub{font-size:.58rem;letter-spacing:.2em}
  .nav-ctas{gap:8px}
  .nav-ctas .btn-donate{padding:10px 15px;font-size:.7rem}
  .hamburger{padding:10px 4px 10px 10px}

  /* Copy width: on a 320px phone the container leaves 286px, and every nested
     shell was still spending desktop padding out of it. The dark split panel was
     the worst offender (54px 48px left only 177px of text, on 13 of 17 pages).
     These reclaim the sentence, not the styling: the panels keep their shape,
     they just stop charging 96px for it. */
  .split-panel{padding:32px 20px;border-radius:18px}
  .check-list li{padding-left:30px}
  .check-list{gap:12px}
  .tl-item{padding:0 0 34px 30px}
  .acc-body{padding:0 20px 22px}
  /* Written as .card.pad-* so they outrank the .card padding just below.
     These replace inline padding, which no media query can reach. */
  .card.pad-xl{padding:36px 22px}
  .card.pad-sm{padding:22px 16px}
  .quote-panel{padding:26px 22px}

  /* Nested shells stack their padding, so a card inside a CTA band or a timeline
     inside a split panel pays twice. The inner one gives way. */
  .cta-band .card{padding:22px 16px}
  /* The marker dot is 16px at left:3px with a 5px glow ring, so it ends at 24px.
     Anything under ~32px lets the date label collide with the glow. */
  .split-panel .tl-item{padding-left:32px}

  /* Cards and buttons */
  .card{padding:28px 22px}
  .tier{padding:30px 24px}
  .btn{min-height:46px;padding:13px 20px}
  .btn-lg{padding:15px 24px;font-size:.88rem}
  .stat{padding:26px 14px}
  .stat-label{font-size:.72rem;letter-spacing:.12em}

  /* Top strip: one line, charity status only. Contact lives in the menu. */
  .topbar-inner{justify-content:center;gap:0;height:34px}
  .topbar{font-size:.68rem}
  .topbar .tb-item:not(:first-child),.topbar .tb-sep{display:none}
  .topbar .tb-item:first-child{white-space:nowrap}
  /* .soc-row is not a .tb-item so it survives the rule above on purpose. The
     parent sets gap:0, so the icons need their own breathing room. */
  .soc-top{margin-left:10px;gap:6px}

  /* Tables scroll rather than squeeze */
  .table-wrap{-webkit-overflow-scrolling:touch}
  table.gsf{font-size:.86rem}
  table.gsf th{padding:13px 14px;font-size:.7rem}
  table.gsf td{padding:12px 14px}

  /* Heroes */
  .home-hero{padding:36px 0 84px}
  .hh-grid{gap:26px}
  .hh-crest{padding:0}
  .hh-crest img{width:min(188px,50%)}
  .hh-halo{width:104%;padding-bottom:104%}
  .hh-eyebrow{font-size:.62rem;letter-spacing:.12em;padding:9px 15px}
  .home-hero h1{font-size:clamp(2.1rem,8.8vw,2.7rem);margin-bottom:20px}
  .page-hero{padding:64px 0 84px}
  .cta-band{padding:40px 20px;border-radius:20px}
}

/* Very small phones */
@media (max-width:390px){
  :root{--gutter:17px}
  .mainnav-inner{padding:0 14px}
  .brand-name{font-size:.75rem}
  .nav-ctas .btn-donate{padding:9px 12px;font-size:.66rem}
}

/* The home hero is a flex row, so its container must be allowed to shrink
   below the width of the longest headline word instead of pushing wider. */
.home-hero > .container{min-width:0;width:100%}

/* 320px class devices: let the wordmark stack so the row still fits */
@media (max-width:360px){
  .mainnav-inner{gap:9px;padding:0 12px}
  .brand{gap:8px}
  .brand-crest{width:34px;height:34px}
  .brand-name{font-size:.7rem;white-space:normal;line-height:1.15}
  .brand-sub{font-size:.52rem;letter-spacing:.16em}
  .nav-ctas .btn-donate{padding:8px 11px;font-size:.62rem}
  .hamburger{padding:10px 0 10px 8px}
  .hamburger span{width:22px}
  h1{font-size:clamp(1.85rem,8.4vw,2.3rem)}
  .home-hero h1{font-size:1.9rem}
  h2{font-size:1.42rem}
}

/* ============================================================
   September 2026 global feature.
   One vocabulary shared by the home callout and september-2026.html
   so the two surfaces cannot drift apart visually.
   ============================================================ */

/* The home callout. A dark ocean panel that sits on a light section,
   so it reads as a bulletin rather than as another page section. */
.sept-band{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;
  padding:58px 56px;color:var(--white);
  background:linear-gradient(125deg,var(--navy-950) 0%,var(--navy-800) 40%,var(--navy-700) 76%,#14406f 100%);
  border:1px solid rgba(141,220,255,.16);
  box-shadow:0 44px 100px -34px rgba(8,21,39,.55)}
.sept-band::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(620px 340px at 86% 4%,rgba(243,217,138,.20),transparent 62%),
             radial-gradient(540px 340px at 4% 98%,rgba(79,195,247,.20),transparent 62%)}
/* Dot field masked to an ellipse: reads as a globe without shipping an image. */
.sept-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(141,220,255,.18) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(76% 82% at 50% 40%,#000 10%,transparent 100%);
  mask-image:radial-gradient(76% 82% at 50% 40%,#000 10%,transparent 100%)}
.sept-band h2{color:var(--white);margin-bottom:14px}
.sept-band p{color:#c9dcf2}
.sept-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:40px;align-items:center;margin-bottom:36px}

/* Headline figures. Sits in the callout and again at the top of the page. */
.sept-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sept-fig{border-radius:16px;padding:18px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(141,220,255,.18)}
.sept-fig b{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1.05;
  color:var(--gold-300);letter-spacing:-.01em}
.sept-fig span{display:block;margin-top:5px;font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:#9fb8d6}

/* Event cards. Always used on a dark surface. */
.ev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ev-card{position:relative;display:flex;flex-direction:column;gap:9px;border-radius:16px;
  padding:24px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(141,220,255,.16);
  transition:transform .38s cubic-bezier(.19,1,.22,1),border-color .38s,box-shadow .38s}
.ev-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--cyan-300),rgba(79,195,247,0))}
.ev-card.gold::before{background:linear-gradient(90deg,var(--gold-400),rgba(243,217,138,0))}
/* On the home callout the whole card is the link, so it must not inherit link ink. */
a.ev-card{color:inherit;text-decoration:none}
a.ev-card:focus-visible{outline:2px solid var(--cyan-300);outline-offset:3px}
.ev-card:hover{transform:translateY(-5px);border-color:rgba(141,220,255,.36);
  box-shadow:0 28px 54px -26px rgba(0,0,0,.7)}
.ev-date{font-family:var(--display);font-weight:800;font-size:.73rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-300)}
.ev-card.gold .ev-date{color:var(--gold-400)}
.ev-card h4{color:var(--white);font-size:1.05rem;line-height:1.32}
.ev-card .ev-where{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:#a9c2de}
.ev-card .ev-where svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--cyan-300)}
.ev-card .ev-note{margin-top:auto;padding-top:12px;font-size:.85rem;line-height:1.6;color:#8fa8c6;
  border-top:1px solid rgba(141,220,255,.12)}

/* Three simultaneous locations on one Saturday. Light-surface component. */
.tz-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tz{position:relative;overflow:hidden;border-radius:16px;padding:28px 26px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .35s}
.tz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ocean-500),var(--cyan-300))}
.tz.gold::after{background:linear-gradient(90deg,var(--gold-600),var(--gold-400))}
.tz:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tz-country{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ocean-500);margin-bottom:9px}
.tz.gold .tz-country{color:var(--gold-600)}
.tz-place{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.25;color:var(--ink);
  margin-bottom:6px}
.tz p{font-size:.92rem;color:var(--ink-soft)}

/* Tablet and phone */
@media (max-width:1023px){
  .sept-head{grid-template-columns:1fr;gap:28px;align-items:start}
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tz-strip{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sept-band{padding:44px 30px;border-radius:22px}
}
@media (max-width:600px){
  .sept-band{padding:36px 22px}
  .ev-grid{grid-template-columns:1fr;gap:14px}
  .sept-figs{gap:12px}
  .sept-fig{padding:15px 16px}
  .sept-fig b{font-size:1.6rem}
  .tz{padding:24px 20px}
}

/* 4-up figure row used on the September report. This is a CLASS, not an inline
   grid-template-columns, because an inline style beats the media queries below
   and pins four 62px columns onto a 320px phone. */
.sept-figs-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sept-figs{grid-auto-rows:1fr}
@media (max-width:1023px){
  .sept-figs-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  /* "Continents" is one unbreakable word and overflowed an 80px box at 320px. */
  .sept-fig span{letter-spacing:.1em;font-size:.62rem}
}

/* 5-up event row, September 2026 report. Must be declared after the .ev-grid
   media queries above: .ev-grid-5 and .ev-grid have equal specificity, so a
   rule placed before them would be overridden and a rule placed after them
   needs its own breakpoints to avoid pinning five columns onto a phone. */
.ev-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ev-grid-5 .ev-card{padding:22px 18px 20px}
/* Five columns need the full container. Below 1200px a fifth column drops each
   card to ~180px, which is too narrow for the venue line, so fall back to two. */
@media (max-width:1199px){
  .ev-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The home callout sits inside .sept-band's 56px padding, so its five columns
   get ~110px less room than the same grid on the report page. Buy that back
   from the gap and the card padding rather than shrinking the type. */
.sept-band .ev-grid-5{gap:11px}
.sept-band .ev-grid-5 .ev-card{padding:20px 15px 18px}
@media (max-width:600px){
  .ev-grid-5{grid-template-columns:1fr}
}