/* ==========================================================================
   The Smiley Caring Foundation - Design System
   Brand palette locked per PRODUCT.md (navy + orange). One accent: orange.
   Shape system: buttons = pill, media/cards = 18px, inputs = 12px.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand. Sampled directly from the official logo (scripts/sample-logo.mjs):
     teal #005060 and orange #F88400 are the logo's own pixels. The --navy-*
     names are kept as aliases so existing markup keeps working. */
  --teal-900:#00303b;
  --teal-800:#003e4c;
  --teal-700:#005060;   /* THE brand teal, straight from the logo */
  --teal-600:#00697f;
  --teal-500:#0d8299;
  --navy-900:var(--teal-900);
  --navy-800:var(--teal-800);
  --navy-700:var(--teal-700);
  --navy-600:var(--teal-600);
  --navy-500:var(--teal-500);
  --orange:#F88400;     /* logo orange */
  --orange-deep:#d97000;
  --orange-ink:#8a4a00;  /* darkened so orange text passes AA on light ground */
  --amber:#FBA43A;

  /* Neutrals, biased warm against the teal */
  --paper:#FBF9F6;
  --paper-2:#F2EDE6;
  --surface:#FFFFFF;
  --ink:#0f2229;
  --ink-2:#39505a;
  --muted:#5c717a;
  --line:#E4DDD3;
  --on-dark:#F6F1EA;
  --on-dark-muted:#9DBAC4;

  /* Type */
  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Shape */
  --r-media:18px;
  --r-input:12px;
  --r-pill:999px;

  /* Elevation, tinted to the ground (never pure black) */
  --sh-1:0 1px 2px rgba(0,48,59,.05), 0 2px 8px rgba(0,48,59,.05);
  --sh-2:0 2px 6px rgba(0,48,59,.06), 0 12px 32px rgba(0,48,59,.10);
  --sh-3:0 6px 16px rgba(0,48,59,.10), 0 24px 60px rgba(0,48,59,.16);

  /* Rhythm */
  --pad-section:clamp(4rem,8vw,7.5rem);
  --maxw:1200px;
  --gutter:clamp(1.25rem,4vw,2.5rem);

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.42s;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#08222a;
    --paper-2:#0b2c36;
    --surface:#0e3742;
    --ink:#EFE9E1;
    --ink-2:#bdd2d9;
    --muted:#9DBAC4;
    --line:#174a58;
    --orange-ink:var(--amber);
    --sh-1:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.24);
    --sh-2:0 2px 6px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.38);
    --sh-3:0 6px 16px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit; color:inherit}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:700;
  line-height:1.06; letter-spacing:-.025em; margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.2vw,5rem); font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-.015em}
p{margin:0 0 1rem; max-width:66ch}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem); color:var(--ink-2); line-height:1.6}
.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-ink);
  margin:0 0 1rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--orange); flex:none}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--pad-section)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--paper2{background:var(--paper-2)}
.section--navy{background:var(--navy-800); color:var(--on-dark)}
.section--navy .lead,.section--navy p{color:var(--on-dark-muted)}
.section--navy .eyebrow{color:var(--amber)}
.grid{display:grid; gap:clamp(1.25rem,2.5vw,2rem)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:.9rem 1.6rem; border-radius:var(--r-pill); border:0;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--primary{background:var(--orange); color:var(--navy-900); box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--amber); box-shadow:var(--sh-2); transform:translateY(-2px)}
.btn--dark{background:var(--navy-700); color:var(--on-dark)}
.btn--dark:hover{background:var(--navy-600); transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn--ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor}
.btn--ghost:hover{background:currentColor; transform:translateY(-2px)}
.btn--ghost:hover span{color:var(--navy-900)}
.btn--sm{padding:.62rem 1.15rem; font-size:.9rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.75rem}

/* Focus - visible, brand-coloured, never removed */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--orange); outline-offset:3px; border-radius:6px;
}

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--navy-800);
  color:var(--on-dark);
  border-bottom:1px solid rgba(255,255,255,.09);
  /* transform + shadow only: never animate padding/height (layout thrash) */
  transition:background-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Blur only above the drawer breakpoint. backdrop-filter makes an element the
   containing block for position:fixed descendants (same as transform), which
   collapses the mobile drawer to the height of the header. */
@media (min-width:1081px){
  .hdr{
    background:color-mix(in srgb, var(--navy-800) 92%, transparent);
    backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
  }
}
.hdr__inner{
  max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem; min-height:64px;
}
.hdr.is-stuck{box-shadow:0 6px 24px rgba(0,40,50,.28)}
.hdr.is-stuck .brand__mark{transform:scale(.86)}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none}
/* Official logo lockup. Height-constrained so the wordmark keeps its own proportions. */
.brand__logo{height:42px; width:auto; flex:none; transition:transform .25s var(--ease)}
.hdr.is-stuck .brand__logo{transform:scale(.9)}
@media (max-width:520px){.brand__logo{height:34px}}
.ftr .brand__logo{height:52px; margin-bottom:1rem}
/* ---------- Nav + mega menu ---------- */
.nav{display:flex; align-items:center; margin-left:auto}
.nav__list{display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0}
.nav__item{position:relative}
.nav__link,.nav__trigger{
  position:relative; display:inline-flex; align-items:center; gap:.3rem;
  text-decoration:none; font-family:var(--font-body); font-weight:600; font-size:.95rem;
  color:var(--on-dark-muted); padding:.6rem .8rem; border-radius:10px;
  background:transparent; border:0; cursor:pointer; white-space:nowrap;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link::after,.nav__trigger::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.3rem; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover,.nav__trigger:hover,
.nav__link.is-current,.nav__trigger.is-current,
.nav__item.is-open .nav__trigger{color:var(--on-dark)}
.nav__link:hover::after,.nav__link.is-current::after,
.nav__trigger:hover::after,.nav__trigger.is-current::after,
.nav__item.is-open .nav__trigger::after{transform:scaleX(1)}
.nav__chev{width:.85rem; height:.85rem; transition:transform .3s var(--ease)}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}
.nav__cta{display:none}
.hdr .btn{flex:none}

/* Mega panel */
.mega{
  position:absolute; top:calc(100% + .55rem); left:50%; z-index:120;
  width:max-content; max-width:min(46rem, calc(100vw - 3rem));
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-media);
  box-shadow:var(--sh-3); padding:1.1rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(-10px) scale(.985);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
/* keep a hover bridge so the pointer can travel from trigger to panel */
.mega::before{content:""; position:absolute; left:0; right:0; top:-.75rem; height:.75rem}
.nav__item.is-open .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.mega__inner{display:grid; grid-template-columns:1fr 15rem; gap:1.1rem; align-items:start}
.mega__inner--wide{grid-template-columns:1fr 1fr 15rem}
.mega__list{list-style:none; margin:0; padding:0; display:grid; gap:.15rem; align-content:start}
.mega__list a{
  display:grid; gap:.1rem; text-decoration:none; padding:.6rem .7rem; border-radius:10px;
  transition:background-color .18s var(--ease), transform .18s var(--ease);
}
.mega__list a:hover{background:var(--paper-2); transform:translateX(3px)}
.mega__t{font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--ink); letter-spacing:-.01em}
.mega__b{font-size:.83rem; color:var(--muted); line-height:1.45}

/* Featured image card inside the panel */
.mega__feat{
  position:relative; display:block; overflow:hidden; border-radius:14px;
  text-decoration:none; min-height:11rem; isolation:isolate; background:var(--teal-800);
}
.mega__feat img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .7s var(--ease);
}
.mega__feat::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(0,40,50,.94), rgba(0,40,50,.35) 70%);
}
.mega__feat:hover img{transform:scale(1.07)}
.mega__featbody{position:absolute; left:0; right:0; bottom:0; padding:.95rem 1rem; display:grid; gap:.15rem}
.mega__featt{font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff; letter-spacing:-.01em}
.mega__featc{font-size:.8rem; color:rgba(255,255,255,.82); line-height:1.45}

/* Stagger the panel contents in. Motion only; reduced-motion collapses it below. */
@media (prefers-reduced-motion:no-preference){
  .mega__list li,.mega__feat{opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease)}
  .nav__item.is-open .mega__list li,.nav__item.is-open .mega__feat{opacity:1; transform:none}
  .nav__item.is-open .mega__list li:nth-child(1){transition-delay:.04s}
  .nav__item.is-open .mega__list li:nth-child(2){transition-delay:.07s}
  .nav__item.is-open .mega__list li:nth-child(3){transition-delay:.10s}
  .nav__item.is-open .mega__list li:nth-child(4){transition-delay:.13s}
  .nav__item.is-open .mega__list li:nth-child(5){transition-delay:.16s}
  .nav__item.is-open .mega__list li:nth-child(6){transition-delay:.19s}
  .nav__item.is-open .mega__feat{transition-delay:.10s}
}
.navtoggle{display:none; background:transparent; border:0; cursor:pointer; color:var(--on-dark);
  min-width:44px; min-height:44px; place-items:center}

@media (max-width:1080px){
  .navtoggle{display:grid; margin-left:auto}
  /* --hdr-h is measured in main.js so the drawer always starts flush under the
     header, whatever height it resolves to at this breakpoint. */
  .nav{
    position:fixed; inset:var(--hdr-h,64px) 0 0 0; flex-direction:column; align-items:stretch;
    background:var(--teal-800); padding:1rem var(--gutter) 2.5rem; margin-left:0;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .25s var(--ease), opacity .25s var(--ease);
  }
  .nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav__list{flex-direction:column; align-items:stretch; gap:0; width:100%}
  .nav__item{border-bottom:1px solid rgba(255,255,255,.1)}
  .nav__link,.nav__trigger{
    width:100%; justify-content:space-between; padding:1rem .25rem;
    font-size:1.08rem; min-height:52px; border-radius:0;
  }
  .nav__link::after,.nav__trigger::after{display:none}
  .nav__chev{width:1.1rem; height:1.1rem; color:var(--orange)}

  /* Panel becomes an in-flow accordion rather than a floating card */
  .mega{
    position:static; width:auto; max-width:none; transform:none; box-shadow:none;
    background:transparent; border:0; border-radius:0; padding:0;
    display:grid; grid-template-rows:0fr; opacity:1; visibility:visible; pointer-events:auto;
    transition:grid-template-rows .3s var(--ease);
  }
  .mega::before{display:none}
  .nav__item.is-open .mega{grid-template-rows:1fr; transform:none}
  .mega__inner{overflow:hidden; grid-template-columns:1fr; gap:.5rem; padding:0 0 1rem}
  .mega__list a{padding:.7rem .5rem; background:rgba(255,255,255,.05); margin-bottom:.3rem}
  .mega__list a:hover{background:rgba(255,255,255,.1); transform:none}
  .mega__t{color:var(--on-dark)}
  .mega__b{color:var(--on-dark-muted)}
  .mega__feat{min-height:8.5rem}
  .nav__cta{display:inline-flex; margin-top:1.25rem; width:100%; padding-block:.95rem}
  .hdr__cta{display:none}

  @media (prefers-reduced-motion:no-preference){
    .mega__list li,.mega__feat{opacity:1; transform:none}
  }
}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:clamp(560px,84vh,780px); display:flex; align-items:flex-end; overflow:hidden; background:var(--navy-900)}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,40,50,.96) 0%, rgba(0,40,50,.72) 38%, rgba(0,40,50,.30) 68%, rgba(0,40,50,.45) 100%),
    linear-gradient(to right, rgba(0,40,50,.72), transparent 62%);
}
.hero__inner{position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,6vw,4.5rem) var(--gutter) clamp(3rem,6vw,4.5rem); color:var(--on-dark)}
.hero h1{color:#fff; max-width:16ch}
.hero .lead{color:rgba(255,255,255,.88); max-width:46ch; margin-top:1.1rem}
.hero .eyebrow{color:var(--amber)}
.hero .eyebrow::before{background:var(--amber)}

/* Ken Burns - motion only, disabled under reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:kenburns 26s var(--ease) both}
}
@keyframes kenburns{from{transform:scale(1.10) translate3d(0,1.5%,0)} to{transform:scale(1) translate3d(0,0,0)}}

/* ---------- Proof strip (real Mushin numbers) ---------- */
.proof{background:var(--navy-700); color:var(--on-dark)}
.proof__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12)}
.proof__cell{background:var(--navy-700); padding:clamp(1.4rem,3vw,2.2rem) 1.25rem; text-align:center}
.proof__n{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.9rem); color:var(--amber); line-height:1; letter-spacing:-.03em}
.proof__l{font-size:.83rem; color:var(--on-dark-muted); margin-top:.5rem; line-height:1.4}
@media (max-width:760px){.proof__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Split ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split--rev{grid-template-columns:1fr 1.05fr}
@media (max-width:900px){.split,.split--rev{grid-template-columns:1fr; gap:2rem}}
.media{position:relative; border-radius:var(--r-media); overflow:hidden; box-shadow:var(--sh-2); background:var(--paper-2)}
.media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease)}
.media--tall img{aspect-ratio:3/4}
.media:hover img{transform:scale(1.045)}
.media__badge{
  position:absolute; left:1rem; bottom:1rem; background:var(--orange); color:var(--navy-900);
  font-weight:800; font-size:.78rem; letter-spacing:.04em; padding:.5rem .9rem; border-radius:var(--r-pill);
}

/* ---------- Program cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2vw,1.6rem)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-media);
  text-decoration:none; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--orange)}
.card__media{position:relative; overflow:hidden; background:var(--paper-2)}
.card__media img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__body{padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.card__ico{
  position:absolute; right:1rem; bottom:-1.35rem; width:2.9rem; height:2.9rem;
  border-radius:var(--r-pill); background:var(--orange); color:var(--navy-900);
  display:grid; place-items:center; box-shadow:var(--sh-2); z-index:1;
  transition:transform .3s var(--ease);
}
.card:hover .card__ico{transform:scale(1.1) rotate(-6deg)}
.card__ico svg{width:1.35rem; height:1.35rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem; color:var(--muted); margin-bottom:1rem}
.card__link{margin-top:auto; font-weight:700; font-size:.9rem; color:var(--orange-ink); display:inline-flex; align-items:center; gap:.4rem}
.card__link svg{width:1rem; height:1rem; transition:transform .25s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}

/* ---------- Feature (full-bleed, real photo) ---------- */
.feature{position:relative; overflow:hidden; background:var(--navy-900); color:var(--on-dark)}
.feature__media{position:absolute; inset:0}
.feature__media img{width:100%; height:100%; object-fit:cover; object-position:center 35%}
.feature__scrim{position:absolute; inset:0; background:linear-gradient(105deg, rgba(0,40,50,.95) 0%, rgba(0,40,50,.84) 42%, rgba(0,40,50,.42) 100%)}
.feature__inner{position:relative; max-width:var(--maxw); margin-inline:auto; padding:var(--pad-section) var(--gutter)}
.feature__box{max-width:36rem}
.feature .eyebrow{color:var(--amber)}
.feature .eyebrow::before{background:var(--amber)}
.feature h2{color:#fff}
.feature p{color:rgba(255,255,255,.85)}
.source{font-size:.84rem; color:var(--on-dark-muted); margin-top:1.25rem}
.source a{color:var(--amber); font-weight:600}

/* ---------- Delivered vs goals ---------- */
.ledger{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2rem)}
@media (max-width:820px){.ledger{grid-template-columns:1fr}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-media); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--sh-1)}
/* Differentiated by ground tint, not an accent rail on a rounded card. */
.panel--done{background:color-mix(in srgb, var(--orange) 7%, var(--surface))}
.panel--goal{background:color-mix(in srgb, var(--navy-500) 7%, var(--surface))}
.panel__hd{display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.1rem}
.panel--done .panel__hd{color:var(--orange-ink)}
.panel--goal .panel__hd{color:var(--navy-500)}
.panel__hd svg{width:1.1rem; height:1.1rem; flex:none}
.tally{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.tally li{display:flex; gap:.85rem; align-items:baseline; padding-bottom:.85rem; border-bottom:1px solid var(--line)}
.tally li:last-child{border-bottom:0; padding-bottom:0}
.tally b{font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.02em; flex:none; min-width:5.2rem}
.panel--done .tally b{color:var(--orange-ink)}
.panel--goal .tally b{color:var(--navy-500)}
.tally span{color:var(--ink-2); font-size:.95rem}

/* ---------- Bento (ways to help) ---------- */
.bento{display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; gap:clamp(1rem,2vw,1.5rem)}
.bento__a{grid-row:span 2}
@media (max-width:820px){.bento{grid-template-columns:1fr}.bento__a{grid-row:auto}}
.tile{
  position:relative; overflow:hidden; border-radius:var(--r-media);
  padding:clamp(1.5rem,3vw,2.4rem); display:flex; flex-direction:column; justify-content:flex-end;
  min-height:210px; text-decoration:none; color:var(--on-dark); isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.tile__bg{position:absolute; inset:0; z-index:-2}
.tile__bg img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.tile:hover .tile__bg img{transform:scale(1.06)}
.tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(0,40,50,.94), rgba(0,40,50,.55) 55%, rgba(0,40,50,.28))}
.tile--a{min-height:340px}
.tile--flat{background:var(--navy-700); color:var(--on-dark)}
.tile--flat::after{display:none}
.tile--orange{background:var(--orange); color:var(--navy-900)}
.tile--orange::after{display:none}
.tile h3{margin-bottom:.4rem; color:inherit}
.tile p{font-size:.93rem; margin:0; color:inherit; opacity:.9; max-width:34ch}
.tile__go{margin-top:1rem; font-weight:800; font-size:.88rem; display:inline-flex; align-items:center; gap:.4rem}
.tile__go svg{width:1rem; height:1rem; transition:transform .25s var(--ease)}
.tile:hover .tile__go svg{transform:translateX(5px)}

/* ---------- Donate band ---------- */
.give{background:var(--orange); color:var(--navy-900)}
.give__inner{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:900px){.give__inner{grid-template-columns:1fr}}
.give h2{color:var(--navy-900)}
.give p{color:rgba(0,40,50,.82)}
.give .eyebrow{color:rgba(0,40,50,.7)}
.give .eyebrow::before{background:var(--navy-900)}
.amounts{display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem}
@media (max-width:520px){.amounts{grid-template-columns:1fr}}
.amt{
  display:flex; flex-direction:column; gap:.15rem; text-align:left;
  background:rgba(255,255,255,.94); color:var(--navy-900);
  border:2px solid transparent; border-radius:var(--r-input); padding:.95rem 1.1rem;
  cursor:pointer; transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.amt:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.amt[aria-pressed="true"]{border-color:var(--navy-900); box-shadow:var(--sh-2)}
.amt b{font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em}
.amt span{font-size:.83rem; color:var(--muted)}
.note{font-size:.83rem; opacity:.75; margin-top:.9rem}

/* ---------- Footer ---------- */
.ftr{background:var(--navy-900); color:var(--on-dark-muted); padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.ftr__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:2.5rem}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{font-family:var(--font-body); font-weight:800; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark); margin:0 0 1rem}
.ftr a{color:var(--on-dark-muted); text-decoration:none; display:block; padding:.3rem 0; font-size:.94rem; transition:color .18s var(--ease), transform .18s var(--ease)}
.ftr a:hover{color:var(--orange); transform:translateX(3px)}
.ftr p{font-size:.94rem; max-width:34ch}
.ftr__tag{color:var(--amber); font-weight:600}
.ftr__base{border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem}
.social{display:flex; gap:.5rem; margin-top:.75rem}
.social a{width:44px; height:44px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); display:grid; place-items:center; padding:0}
.social a:hover{background:var(--orange); color:var(--navy-900); transform:translateY(-3px)}
.social svg{width:1.1rem; height:1.1rem}

/* ---------- Page hero (inner pages) ---------- */
.phero{position:relative; background:var(--navy-800); color:var(--on-dark); overflow:hidden}
.phero__media{position:absolute; inset:0; opacity:.34}
.phero__media img{width:100%; height:100%; object-fit:cover}
.phero__inner{position:relative; max-width:var(--maxw); margin-inline:auto; padding:clamp(3rem,7vw,5.5rem) var(--gutter)}
.phero h1{color:#fff; font-size:clamp(2.1rem,4.6vw,3.6rem); max-width:20ch}
.phero .lead{color:rgba(255,255,255,.85); max-width:56ch; margin-top:.9rem}
.phero .eyebrow{color:var(--amber)}
.phero .eyebrow::before{background:var(--amber)}
.crumbs{font-size:.85rem; color:var(--on-dark-muted); margin-bottom:1rem}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--amber)}

/* ---------- Forms ---------- */
.field{display:grid; gap:.4rem; margin-bottom:1rem}
.field label{font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-input);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:1rem; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange); box-shadow:0 0 0 3px rgba(248,132,0,.18); outline:none}
.field textarea{min-height:130px; resize:vertical}
.help{font-size:.83rem; color:var(--muted)}

/* ---------- Accordion ---------- */
.acc{border:1px solid var(--line); border-radius:var(--r-media); overflow:hidden; background:var(--surface); box-shadow:var(--sh-1)}
.acc + .acc{margin-top:.85rem}
.acc__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; background:transparent; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.03rem; text-align:left; letter-spacing:-.01em;
}
.acc__q svg{width:1.2rem; height:1.2rem; flex:none; color:var(--orange); transition:transform .3s var(--ease)}
.acc[open] .acc__q svg{transform:rotate(45deg)}
.acc__a{padding:0 1.4rem 1.4rem; color:var(--ink-2)}
.acc__a p{margin:0}

/* ---------- Info blocks ---------- */
.info{display:flex; gap:1rem; align-items:flex-start}
.info__ico{width:2.8rem; height:2.8rem; border-radius:var(--r-input); background:rgba(248,132,0,.14); color:var(--orange-ink); display:grid; place-items:center; flex:none}
.info__ico svg{width:1.3rem; height:1.3rem}
.info h3{font-size:1.02rem; margin-bottom:.15rem}
.info p{font-size:.94rem; color:var(--muted); margin:0}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.is-in{opacity:1; transform:none}
  .stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
  .stagger.is-in > *{opacity:1; transform:none}
}

/* ---------- Utility ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--orange); color:var(--navy-900); padding:.8rem 1.2rem; z-index:200; font-weight:700; border-radius:0 0 var(--r-input) 0}
.skip:focus{left:0}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center p{margin-inline:auto}
.mt-0{margin-top:0}
.narrow{max-width:52rem}