/* ============================================================
   STREETBUS - design system
   Tokens, type scale, buttons & section rhythm defined ONCE.
   Pages inherit; never override these on instances.
   ============================================================ */

/* ---- Fonts ---- */
@font-face{font-family:"Euclid";src:url("../fonts/euclid-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid";src:url("../fonts/euclid-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid";src:url("../fonts/euclid-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid";src:url("../fonts/euclid-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  --ink:#0c0c0d;          /* brand near-black */
  --ink-2:#151517;        /* elevated surface */
  --ink-3:#1f1f22;        /* card */
  --paper:#ffffff;
  --cream:#f5f3ee;        /* light section bg */
  --gold:#fdb910;         /* brand gold (sampled) */
  --gold-2:#ffc62b;
  --text:#13131a;         /* body on light */
  --text-soft:#5a5a63;
  --on-dark:#f3f2ef;
  --on-dark-soft:#a7a7ad;
  --line:rgba(255,255,255,.12);
  --line-dark:rgba(0,0,0,.10);

  --font-body:"Euclid",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Anton",var(--font-body);
  --font-graf:"Permanent Marker",var(--font-body);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,40px);
  --pad-y:clamp(64px,9vw,128px);
  --radius:18px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-weight:400;color:var(--text);
  background:var(--paper);line-height:1.55;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---- Type scale ---- */
h1,h2,h3{line-height:1.02;letter-spacing:.5px;text-transform:uppercase}
h1{font-family:var(--font-display);font-size:clamp(2.8rem,8vw,6rem);font-weight:400}
h2{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:400}
h3{font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:400;letter-spacing:.3px}
h4{font-family:var(--font-body);font-weight:600;font-size:1.02rem;letter-spacing:.2px;text-transform:none}
p{font-size:clamp(1rem,1.15vw,1.08rem)}

/* graffiti accent - used sparingly, like the deck */
.graf{font-family:var(--font-graf);color:var(--gold);text-transform:none;letter-spacing:0;line-height:1;display:inline-block;transform:rotate(-2deg)}
.gold{color:var(--gold)}
.eyebrow{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;color:var(--gold)}

/* ---- Layout primitives ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad-y)}
.section--dark{background:var(--ink);color:var(--on-dark)}
.section--dark p{color:var(--on-dark-soft)}
.section--cream{background:var(--cream)}
.lede{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.6;color:var(--text-soft);max-width:46ch}
.section--dark .lede{color:var(--on-dark-soft)}

/* ---- Buttons (shapes, never bare text links) ---- */
.btn{
  --bg:var(--gold);--fg:#0c0c0d;--bd:var(--gold);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-body);font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:1em 1.6em;border-radius:999px;border:2px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn .arw{display:inline-block;width:1.9em;height:2px;background:currentColor;position:relative;transition:width .18s ease}
.btn .arw::after{content:"";position:absolute;right:0;top:50%;width:.55em;height:.55em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn:hover .arw{width:2.5em}
.btn--ghost{--bg:transparent;--fg:var(--on-dark);--bd:rgba(255,255,255,.4)}
.btn--ghost:hover{--bd:var(--gold);color:var(--gold)}
.btn--dark{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--ghost-dark{--bg:transparent;--fg:var(--ink);--bd:rgba(0,0,0,.28)}
.btn--ghost-dark:hover{--bd:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ============================================================
   Header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.nav__logo{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{color:#fff;font-weight:500;font-size:.95rem;transition:color .15s ease}
.nav__links a:hover,.nav__links a.is-active{color:var(--gold)}
/* keep the Donate pill's text black even though nav links are white */
.nav__links a.nav__cta{color:#0c0c0d}
.nav__links a.nav__cta:hover{color:#0c0c0d}
.nav__cta{padding:.65em 1.25em;font-size:.9rem}
.nav__burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{width:24px;height:2px;background:#fff;transition:.2s}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 44%;opacity:.55}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,13,.55) 0%,rgba(12,12,13,.15) 40%,rgba(12,12,13,.92) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(40px,7vw,84px)}
.hero h1{font-size:clamp(3.4rem,12vw,9rem);line-height:.92}
.hero__tag{font-family:var(--font-graf);color:var(--gold);font-size:clamp(1.45rem,4.4vw,3rem);line-height:1.08;white-space:normal;max-width:16ch;transform:rotate(-2deg);transform-origin:left center;display:inline-block;margin:.25em 0 .6em}
.hero__lede{max-width:40ch;color:#e7e6e3;font-size:clamp(1.05rem,1.5vw,1.25rem)}

/* ============================================================
   Marquee strip
   ============================================================ */
.strip{background:var(--gold);color:#0c0c0d;overflow:hidden;border-block:3px solid #0c0c0d}
.strip__track{display:flex;gap:0;white-space:nowrap;animation:scroll 32s linear infinite;will-change:transform}
.strip span{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:1px;padding:.7em 1.4em;display:inline-flex;align-items:center;gap:1.4em}
.strip span::after{content:"●";font-size:.5em;transform:translateY(-2px)}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip__track{animation:none}}

/* ============================================================
   Activation cards (What we do)
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:48px}
.card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 34px;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(253,185,16,.55)}
.card__no{font-family:var(--font-display);color:var(--gold);font-size:1.4rem;opacity:.9}
.card h3{margin:.5em 0 .45em;color:#fff}
.card p{color:var(--on-dark-soft);font-size:.98rem}

/* ============================================================
   Split (Mission / Impact)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px}
.panel{border-radius:var(--radius);padding:clamp(28px,3.4vw,46px)}
.panel--gold{background:var(--gold);color:#0c0c0d}
.panel--outline{background:transparent;border:1px solid var(--line)}
.panel h3{margin-bottom:.6em}
.panel--gold h3{color:#0c0c0d}
.panel--outline h3{color:#fff}
.panel--gold p{color:rgba(12,12,13,.82);font-weight:500}

/* ============================================================
   Full-bleed photo break
   ============================================================ */
.photoband{position:relative;height:clamp(320px,46vw,560px);background:var(--ink)}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.photoband__cap{position:absolute;left:var(--gutter);bottom:clamp(22px,4vw,46px);z-index:2;color:#fff}
.photoband__cap .graf{font-size:clamp(2rem,6vw,4rem)}
.photoband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,13,.7),rgba(12,12,13,.1))}
.photoband__cap{z-index:3}

/* ============================================================
   CTA band
   ============================================================ */
.cta{background:var(--gold);color:#0c0c0d;text-align:center}
.cta h2{color:#0c0c0d}
.cta p{max-width:48ch;margin:18px auto 0;color:rgba(12,12,13,.8);font-weight:500}
.cta .btn-row{justify-content:center}

/* ============================================================
   Page header (volunteer / donate)
   ============================================================ */
.pagehead{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-top:clamp(70px,12vw,120px);padding-bottom:clamp(54px,8vw,90px)}
.pagehead__media{position:absolute;inset:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover;opacity:.32}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,13,.4),rgba(12,12,13,.9))}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{font-size:clamp(2.8rem,9vw,6rem)}
.pagehead .graf{font-size:clamp(1.5rem,4vw,2.6rem);margin-top:.1em}
.pagehead .lede{margin-top:22px;color:#e7e6e3}

/* ============================================================
   Steps / list blocks
   ============================================================ */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.steps{counter-reset:s;display:grid;gap:20px;margin-top:10px}
.step{display:flex;gap:18px;align-items:flex-start}
.step__n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#0c0c0d;font-family:var(--font-display);display:grid;place-items:center;font-size:1.05rem}
.step h4{margin-bottom:3px;font-size:1.08rem}
.step p{color:var(--text-soft);font-size:.98rem}

.ticklist{display:grid;gap:14px;margin-top:8px}
.ticklist li{position:relative;padding-left:34px;color:var(--text-soft)}
.ticklist li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--gold)}
.ticklist li::after{content:"";position:absolute;left:6.5px;top:7px;width:7px;height:4px;border-left:2px solid #0c0c0d;border-bottom:2px solid #0c0c0d;transform:rotate(-45deg)}
.section--dark .ticklist li{color:var(--on-dark-soft)}

/* ============================================================
   Form (floating labels, full-width submit - best practice)
   ============================================================ */
.formcard{background:var(--paper);border:1px solid var(--line-dark);border-radius:var(--radius);padding:clamp(26px,3.4vw,40px);box-shadow:0 24px 60px rgba(0,0,0,.10)}
.field{position:relative;margin-bottom:18px}
.field input,.field textarea,.field select{
  width:100%;font-family:inherit;font-size:1rem;color:var(--text);
  padding:22px 16px 8px;border:1.5px solid #d7d5cf;border-radius:12px;background:#fff;
  transition:border-color .15s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field label{position:absolute;left:16px;top:16px;color:#9a988f;pointer-events:none;transition:.15s ease;font-size:1rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field input:focus+label,.field textarea:focus+label,.field select:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label,
.field select:valid+label{top:8px;font-size:.72rem;letter-spacing:.04em;color:var(--text-soft);text-transform:uppercase}
.field select{color:#9a988f;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a988f' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.field select.filled{color:var(--text)}
.form-submit{width:100%;justify-content:center;margin-top:6px}
.form-msg{margin-top:14px;text-align:center;font-size:.95rem;font-weight:500;padding:12px 14px;border-radius:12px}
.form-msg.is-ok{background:rgba(253,185,16,.16);color:#7a5800;border:1px solid rgba(253,185,16,.5)}
.form-msg.is-err{background:rgba(200,40,40,.08);color:#a12121;border:1px solid rgba(200,40,40,.3)}
.form-note{font-size:.85rem;color:var(--text-soft);margin-top:14px;text-align:center}

/* ============================================================
   Stats band
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px 18px;margin-top:44px}
.stat__n{font-family:var(--font-display);font-size:clamp(2.1rem,4.4vw,3.1rem);color:var(--gold);line-height:1}
.stat__l{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:8px}
.section--cream .stat__l{color:var(--text-soft)}
.stats-note{font-size:.82rem;color:var(--on-dark-soft);margin-top:30px;opacity:.8}

/* ============================================================
   Category chips
   ============================================================ */
.chipgroup{margin-top:26px}
.chipgroup h4{margin-bottom:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);border-radius:999px;padding:.5em 1em;font-size:.9rem;font-weight:500;color:var(--on-dark)}
.section--cream .chip{border-color:var(--line-dark);color:var(--text)}

/* tier meta line (sponsor investment bands) */
.tier__meta{font-size:.82rem;color:var(--text-soft);margin-top:10px;padding-top:10px;border-top:1px solid var(--line-dark)}
.tier__meta b{color:var(--ink);font-weight:600}

/* ============================================================
   Donate tiers
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:14px}
.tier{border:1.5px solid var(--line-dark);border-radius:var(--radius);padding:26px 24px;background:#fff;transition:.18s ease}
.tier:hover{border-color:var(--gold);transform:translateY(-3px)}
.tier__amt{font-family:var(--font-display);font-size:2.2rem;color:var(--ink)}
.tier h4{margin:.4em 0 .3em;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.tier p{font-size:.95rem;color:var(--text-soft)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--ink);color:var(--on-dark-soft);padding-block:clamp(50px,7vw,84px) 30px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-logo{height:34px}
.site-footer h5{color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin-bottom:14px}
.foot-col a{display:block;color:var(--on-dark-soft);padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--gold)}
.foot-cols{display:flex;gap:clamp(40px,8vw,90px);flex-wrap:wrap}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;font-size:.84rem}
.foot-bottom a:hover{color:var(--gold)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .nav__links{position:fixed;inset:74px 0 auto 0;background:var(--ink);flex-direction:column;gap:0;padding:10px var(--gutter) 24px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .28s ease;align-items:stretch}
  .nav__links.open{transform:translateY(0)}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav__links .nav__cta{margin-top:16px;border-bottom:0;text-align:center}
  .nav__burger{display:flex}
  .split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .btn{width:100%;justify-content:center}
  .btn-row{gap:12px}
  .nav__cta{width:auto}
}