/* ==========================================================================
   MudRatz Inc. site stylesheet  |  DARK THEME
   Rebuilt 2026-07-29.

   The brand is navy and gold, which is a dark palette wearing a light shirt.
   Going properly dark lets the gold act as a real accent instead of a
   highlighter, and the four photographs we have carry far more weight against
   a dark ground than they did on white.

     ink grounds  #070E16 base, #0C1725 raised, #122335 cards
     navy         #0E2A4A family for feature bands
     gold         #FFD700 accent, used sparingly
     text         #E7EDF4 primary, #97A8BA muted

   CASCADE RULE, DO NOT BREAK IT AGAIN:
   context link colours must always be written as `a:not(.btn)`. Writing
   `.on-navy a{color:gold}` outranks `.btn` and silently renders gold text on
   gold buttons. That shipped once. There is a regression check for it in
   scripts/check-contrast.mjs.
   ========================================================================== */

:root{
  --base:#070E16;
  --raised:#0C1725;
  --card:#122335;
  --card-hi:#16293D;

  --navy:#0E2A4A;
  --navy-deep:#081A2E;
  --navy-soft:#1B3E67;

  --gold:#FFD700;
  --gold-bright:#FFE352;
  --gold-dim:#C9A400;

  --text:#E7EDF4;
  --muted:#97A8BA;
  /* --faint was #6B7C8E, which only reached 3.7:1 on card backgrounds and
     failed WCAG AA for the stats labels, form hints and footer small print.
     #8195A9 clears 4.5:1 against every surface used here. */
  --faint:#8195A9;

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  /* Vertical rhythm scale. Sections and blocks pick from this rather than
     inventing one-off values, which is what made the first build feel cramped
     in some places and loose in others. */
  --s1:8px;
  --s2:14px;
  --s3:22px;
  --s4:34px;
  --s5:48px;
  --s6:72px;
  --s7:104px;

  --radius:16px;
  --radius-lg:28px;
  --shadow:0 20px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--base)}
body{
  margin:0;
  font-family:Poppins,Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:var(--base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--gold);color:#08111b}

h1,h2,h3,h4,.bebas{
  font-family:"Bebas Neue",Arial,Helvetica,sans-serif;
  font-weight:400;letter-spacing:.02em;line-height:1.06;
  margin:0 0 .5em;color:#fff;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.15rem}
p{margin:0 0 1.15em}
a{color:var(--gold)}
a:hover{color:var(--gold-bright)}
strong{font-weight:600;color:#fff}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.lead{font-size:1.14rem;line-height:1.72;color:var(--muted)}

.eyebrow{
  font-family:"Bebas Neue",sans-serif;
  letter-spacing:.3em;font-size:.88rem;color:var(--gold);
  text-transform:uppercase;margin:0 0 var(--s2);
}
.eyebrow.on-light{color:var(--gold)}
.rule{width:56px;height:4px;background:var(--gold);border:0;margin:var(--s3) auto var(--s4);border-radius:2px}
.rule.left{margin-left:0}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:#08111b;
  padding:12px 20px;z-index:999;font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* buttons --------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--gold);color:#08111b;
  font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:16px 40px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  line-height:1.2;text-align:center;
}
.btn:hover{background:var(--gold-bright);color:#08111b;transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,215,0,.22)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-outline:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff;box-shadow:none}
.btn-navy{background:var(--navy-soft);color:#fff}
.btn-navy:hover{background:#255083;color:#fff}
.btn-sm{padding:11px 26px;font-size:.82rem}
/* Mid-page calls to action were too quiet and sat off to one side. This is the
   loud, centred treatment used for every in-page CTA. */
.btn-lg{
  padding:21px 56px;font-size:1.06rem;letter-spacing:.08em;
  box-shadow:0 10px 30px rgba(255,215,0,.16);
}
/* A long label (an email address was the offender) plus 56px of padding each
   side pushed a button to 413px and blew out a 390px viewport. Buttons must
   never be wider than their container. */
.btn{max-width:100%;overflow-wrap:anywhere}
@media (max-width:640px){
  .btn-lg{padding:18px 28px;font-size:.98rem;letter-spacing:.05em}
  .btn{padding-inline:26px}
}
.btn-lg:hover{box-shadow:0 14px 38px rgba(255,215,0,.3)}

/* Any button sitting inside a card or a step is centred rather than
   left-hugging, which is what made them read as afterthoughts. */
.card > .btn,
.card p > .btn,
.steps .btn,
.cta-row{display:block;margin-inline:auto;width:max-content;max-width:100%}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;width:auto}

/* header ---------------------------------------------------------------- */
.site-header{
  padding:16px 0;border-bottom:1px solid var(--line);
  background:rgba(7,14,22,.88);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.brand img{width:74px;height:auto}
/* 60px left the gold rat as mush and the mark too quiet. 74px is the smallest
   size at which the detail survives. The keyline and shadow are baked into the
   image, so no CSS filter is involved. */
@media (max-width:640px){ .brand img{width:62px} }
.brand span{font-family:"Bebas Neue",sans-serif;font-size:2rem;color:#fff;letter-spacing:.02em;line-height:1}
.site-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.site-nav a:not(.btn){
  font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.site-nav a:not(.btn):hover,.site-nav a:not(.btn)[aria-current="page"]{color:#fff}
.site-nav .btn{font-size:.78rem;padding:10px 22px}
.navtoggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;
  padding:9px 13px;cursor:pointer;font-size:1.1rem;color:#fff;line-height:1;
}

@media (max-width:960px){
  .navtoggle{display:block}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--raised);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 24px 22px;box-shadow:var(--shadow);
  }
  .site-nav.open{display:flex}
  .site-nav a:not(.btn){padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem}
  .site-nav .btn{margin-top:14px}
}

/* hero ------------------------------------------------------------------ */
.hero{
  position:relative;color:#fff;text-align:center;padding:104px 0 112px;
  background:radial-gradient(120% 100% at 50% 0%,var(--navy-soft) 0%,var(--navy-deep) 55%,var(--base) 100%);
  overflow:hidden;border-bottom:1px solid var(--line);
}
.hero h1{color:#fff;margin-inline:auto}
.hero .lead{max-width:62ch;margin-inline:auto;color:rgba(231,237,244,.78)}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2rem}
/* Photos are the brightest thing on a dark page, so they can run much
   stronger here than they could over white. */
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;filter:saturate(1.05) contrast(1.05);
}
/* The scrim only exists to hold text off a photo. Without :has() scoping it
   also painted over the text on the photo-less heroes (news, about, contact,
   faq, donate, privacy, 404) and dimmed every headline to grey. */
.hero:has(> .hero-photo)::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,rgba(7,14,22,.55) 0%,rgba(7,14,22,.35) 45%,rgba(7,14,22,.95) 100%);
}
/* Belt and braces: every hero child except the photo sits above the scrim,
   so this cannot regress even if :has() is unavailable. */
.hero>*:not(.hero-photo){position:relative;z-index:2}
.hero-inner{position:relative;z-index:2}
.hero.compact{padding:76px 0 82px}
.hero.compact h1{font-size:clamp(2.2rem,5vw,3.8rem)}

/* stats strip ----------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--radius);
  overflow:hidden;margin:-46px auto 0;position:relative;z-index:3;max-width:1000px;
  box-shadow:var(--shadow);
}
.stats div{background:var(--card);padding:var(--s3) 18px;text-align:center}
.stats strong{display:block;font-family:"Bebas Neue",sans-serif;font-size:1.8rem;color:var(--gold);line-height:1.1}
.stats span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* sections -------------------------------------------------------------- */
section{padding:var(--s7) 0}
section.tight{padding:var(--s6) 0}
.wash{background:var(--raised)}
.on-navy{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.on-navy a:not(.btn){color:var(--gold)}

/* cards ----------------------------------------------------------------- */
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4);
}
.card h3{color:#fff}
.card form{display:flex;justify-content:center}
/* Scoped to UNCLASSED paragraphs on purpose. As a bare `.card p` this rule is
   specificity 0,2,0 and silently overrode every single-class colour inside a
   card: .coach-tag rendered muted grey on a gold pill (1.74:1), and
   .coach-then/.coach-now lost their intended tones. Same family of bug as the
   gold-on-gold buttons. Do not remove the :not([class]). */
.card p:not([class]){color:var(--muted)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card a:not(.btn){color:var(--gold)}
.card-navy{background:var(--card-hi);border-color:var(--line-strong)}
.card-navy h3{color:var(--gold)}
.card-navy p:not([class]),.card-navy li{color:var(--muted)}
.card-navy a:not(.btn){color:var(--gold)}

/* team tiles ------------------------------------------------------------ */
.tiles{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:330px;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:#fff;background:var(--card);
  border:1px solid var(--line);
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;opacity:.85}
.tile:hover img{transform:scale(1.06);opacity:1}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,14,22,.96) 0%,rgba(7,14,22,.55) 48%,rgba(7,14,22,.12) 100%);
}
.tile-body{position:relative;z-index:1;padding:26px}
.tile-body h3{color:#fff;margin-bottom:.2em;font-size:2.1rem}
.tile-body p{color:rgba(231,237,244,.8);font-size:.92rem;margin:0}
.tile-body .go{
  display:inline-block;margin-top:14px;color:var(--gold);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}

/* split media ----------------------------------------------------------- */
.split{display:grid;gap:44px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center}
.split img{border-radius:var(--radius);width:100%;object-fit:cover;border:1px solid var(--line)}

/* spec + wanted lists --------------------------------------------------- */
.specs,.wanted{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.wanted{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.specs li,.wanted li{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:18px 22px;
}
.specs strong,.wanted strong{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:1.3rem;
  color:#fff;letter-spacing:.02em;
}
.specs small,.wanted small{color:var(--muted);font-size:.89rem;line-height:1.55;display:block}

/* numbered steps -------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;margin:0;list-style:none}
.steps li{position:relative;padding-top:64px;text-align:center}
.steps li::before{left:50%;transform:translateX(-50%)}
.steps li::before{
  counter-increment:step;content:counter(step);position:absolute;top:0;
  width:46px;height:46px;border-radius:50%;background:var(--gold);color:#08111b;
  font-family:"Bebas Neue",sans-serif;font-size:1.55rem;
  display:flex;align-items:center;justify-content:center;
}
.steps h3{color:#fff;margin-bottom:.3em}
.steps p{color:var(--muted);font-size:.95rem;margin:0}

/* news posts ------------------------------------------------------------ */
.posts{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.post .tag{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--gold);background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);
  display:inline-block;padding:4px 11px;border-radius:999px;margin-bottom:14px;align-self:flex-start;
}
.post h3{color:#fff;font-size:1.5rem}
.post p,.post ul{font-size:.95rem;color:var(--muted)}
.post ul{padding-left:1.1em;margin:0 0 1em}
.post p:last-child,.post ul:last-child{margin-bottom:0}


/* two doors (homepage) --------------------------------------------------- */
.doors-section{padding:0}
.doors{
  display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-top:-56px;position:relative;z-index:3;
}
.door{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:340px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-strong);text-decoration:none;color:#fff;
  background:var(--card);box-shadow:var(--shadow);
}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;transition:transform .5s ease,opacity .3s ease}
.door:hover img,.door:focus-visible img{transform:scale(1.05);opacity:.55}
.door::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,14,22,.97) 0%,rgba(7,14,22,.7) 50%,rgba(7,14,22,.35) 100%);
}
.door-body{position:relative;z-index:1;padding:var(--s4);display:block}
.door-tag{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:10px;
}
.door-title{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;color:#fff;letter-spacing:.02em;margin-bottom:.35em;
}
.door-text{display:block;color:rgba(231,237,244,.82);font-size:.98rem;line-height:1.6}
.door-go{
  display:inline-block;margin-top:18px;color:var(--gold);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:640px){ .doors{margin-top:-34px} .door{min-height:280px} .door-body{padding:24px} }

/* tabs ------------------------------------------------------------------- */
.tablist{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);padding-bottom:var(--s2);
}
.tab{
  font-family:"Bebas Neue",sans-serif;font-size:1.35rem;letter-spacing:.06em;
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:9px 26px;border-radius:999px;cursor:pointer;line-height:1.2;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tab:hover{color:#fff;border-color:var(--gold)}
.tab.is-active{background:var(--gold);border-color:var(--gold);color:#08111b}
.tabpanel[hidden]{display:none}

.team-head{display:grid;gap:var(--s4);grid-template-columns:minmax(0,260px) 1fr;align-items:center}
.team-head img{border-radius:var(--radius);width:100%;height:100%;max-height:190px;object-fit:cover;border:1px solid var(--line)}
@media (max-width:700px){ .team-head{grid-template-columns:1fr} }

.minihead{
  font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:.06em;
  color:var(--gold);margin:0 0 var(--s2);
}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.ticks li{position:relative;padding-left:28px;color:var(--muted)}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--gold);
}
.team-cta{
  margin-top:var(--s5);padding:var(--s5) var(--s4);
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 100%);
  border:1px solid var(--line-strong);border-top:3px solid var(--gold);
  border-radius:var(--radius);text-align:center;
}
.team-cta .minihead{font-size:1.7rem}
.team-cta p{margin:0 auto var(--s4);max-width:52ch}
.team-cta .btn{margin-inline:auto}
.team-note{margin:var(--s3) 0 0;color:var(--faint);font-size:.9rem;text-align:center}
.paypal-slot{margin-top:var(--s3);min-height:48px;display:flex;justify-content:center}

/* coach cards ----------------------------------------------------------- */
/* Ken Legler's card carries a memoriam tag and a gold edge so it reads as a
   tribute without breaking out of the grid. */
.coach-memoriam{
  background:linear-gradient(160deg,rgba(255,215,0,.09) 0%,var(--card-hi) 55%);
  border:1px solid rgba(255,215,0,.42);
  border-top:4px solid var(--gold);
  box-shadow:0 0 0 1px rgba(255,215,0,.10), 0 16px 40px rgba(0,0,0,.4);
}
.coach-memoriam h3{color:var(--gold)}
/* Filled gold pill, not just gold text. It should be impossible to skim past. */
.coach-tag{
  display:inline-block;font-family:"Bebas Neue",sans-serif;
  letter-spacing:.18em;font-size:.78rem;text-transform:uppercase;
  background:var(--gold);color:#08111b;font-weight:700;
  padding:5px 14px;border-radius:999px;margin:0 0 var(--s3);
}

/* coach cards ----------------------------------------------------------- */
.coach{border-top:3px solid var(--gold)}
.coach h3{color:#fff;margin-bottom:var(--s1)}
.coach-then{color:var(--faint);font-size:.9rem;margin:0 0 var(--s2)}
.coach-now{color:var(--muted);margin:0}

/* coach roster ---------------------------------------------------------- */
.roster{
  margin-top:var(--s5);padding:var(--s5) var(--s4);
  background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;
}
.roster h3{color:#fff;margin-bottom:var(--s1)}
.roster > p{color:var(--muted);max-width:56ch;margin:0 auto var(--s4)}
.roster-list{
  list-style:none;padding:0;margin:0 auto;max-width:820px;
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:center;
}
.roster-list li:not([class]){
  color:var(--text);font-weight:500;font-size:.98rem;
  padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);
}
.roster-note{
  margin:var(--s4) auto 0;max-width:62ch;color:var(--faint);font-size:.88rem;line-height:1.7;
}

/* sliders ---------------------------------------------------------------- */
.slider-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:var(--s3);flex-wrap:wrap}
.slider-dots{display:flex;gap:7px;flex-wrap:wrap}
.slider-hint{color:var(--faint);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;margin:0}
.chip{
  font-family:"Bebas Neue",sans-serif;font-size:1rem;letter-spacing:.08em;
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:5px 13px;border-radius:999px;cursor:pointer;line-height:1.3;
}
.chip:hover{color:#fff;border-color:var(--gold)}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:#08111b}
.slider-nav{display:flex;gap:8px;flex:none}
.sldbtn{
  width:42px;height:42px;border-radius:50%;background:var(--card);
  border:1px solid var(--line-strong);color:#fff;cursor:pointer;font-size:1rem;line-height:1;
}
.sldbtn:hover:not(:disabled){background:var(--gold);color:#08111b;border-color:var(--gold)}
.sldbtn:disabled{opacity:.35;cursor:default}
.slider-rail{
  list-style:none;padding:4px 0 var(--s3);margin:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,344px);gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.slider-rail::-webkit-scrollbar{height:8px}
.slider-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.slider-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.slide{scroll-snap-align:start}
.tl-card,.fleet-card{
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:var(--s4);
}
.tl-year,.fleet-year{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:1.6rem;
  color:var(--gold);letter-spacing:.1em;line-height:1;margin-bottom:.4em;
}
.tl-card h3,.fleet-card h3{color:#fff;font-size:1.45rem;margin-bottom:.4em}
.tl-card p,.fleet-card p{color:var(--muted);font-size:.94rem;margin:0}
.fleet-card{border-top-color:var(--navy-soft)}

/* instagram grid --------------------------------------------------------- */
.ig-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.ig-item{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:12px;border:1px solid var(--line);background:var(--card);
}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,opacity .3s ease;opacity:.92}
.ig-item:hover img{transform:scale(1.06);opacity:1}
.ig-badge{
  position:absolute;top:9px;right:9px;z-index:2;
  background:rgba(7,14,22,.78);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
}
.ig-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:5px;padding:14px;
  background:linear-gradient(to top,rgba(7,14,22,.94) 0%,rgba(7,14,22,.55) 42%,rgba(7,14,22,0) 78%);
  opacity:0;transition:opacity .25s ease;
}
.ig-item:hover .ig-overlay,.ig-item:focus-visible .ig-overlay{opacity:1}
.ig-cap{color:#fff;font-size:.78rem;line-height:1.4;display:block}
.ig-when{color:var(--gold);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ig-meta{color:var(--faint);font-size:.85rem;margin:0}
/* Touch devices have no hover, so the caption would never be reachable.
   Show it permanently at reduced strength instead. */
@media (hover:none){
  .ig-overlay{opacity:1;background:linear-gradient(to top,rgba(7,14,22,.92) 0%,rgba(7,14,22,.25) 55%,rgba(7,14,22,0) 80%)}
  .ig-cap{display:none}
}

/* panel ----------------------------------------------------------------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:var(--s5);
}
.panel ul{padding-left:1.1em;margin:0 0 1.2em;color:var(--muted)}
.panel li{margin-bottom:.7em}
.panel .fineprint{font-size:.85rem;color:var(--faint);line-height:1.6;border-top:1px solid var(--line);padding-top:18px;margin-bottom:0}

/* TBD marker ------------------------------------------------------------
   Deliberately quiet. Visible enough to catch in a read-through, not so loud
   that the page looks like a construction site. Find them all with
   `npm run tbd`. */
.tbd{color:var(--faint);font-style:italic;border-bottom:1px dotted var(--faint);overflow-wrap:anywhere}
.tbd::before{content:"TBD: ";font-style:normal;font-size:.78em;letter-spacing:.06em;opacity:.8}

/* forms ----------------------------------------------------------------- */
.formcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow)}
.fields{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:.88rem;color:#fff}
label .req{color:var(--gold)}
.hint{font-size:.78rem;color:var(--faint);font-weight:400;line-height:1.5}
input,select,textarea{
  font-family:inherit;font-size:.95rem;color:var(--text);padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--raised);width:100%;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
select option{background:var(--raised);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,0,.15)}
textarea{min-height:120px;resize:vertical}
.checkline{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.6}
.checkline input{width:auto;flex:none;margin-top:4px;accent-color:var(--gold)}
.formfoot{
  margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  align-items:center;text-align:center;
}
.formnote{font-size:.85rem;color:var(--faint);margin:0}
.formmsg{margin-top:18px;padding:16px 18px;border-radius:10px;font-size:.92rem;display:none}
.formmsg.ok{display:block;background:rgba(46,160,90,.14);border:1px solid rgba(46,160,90,.5);color:#7CD9A3}
.formmsg.err{display:block;background:rgba(200,60,50,.14);border:1px solid rgba(200,60,50,.5);color:#F29A93}
fieldset{border:0;padding:0;margin:0 0 8px}
legend{font-family:"Bebas Neue",sans-serif;font-size:1.35rem;color:var(--gold);letter-spacing:.02em;padding:0;margin-bottom:4px}
.fs-sep{border:0;border-top:1px solid var(--line);margin:30px 0 26px}

/* give amounts ---------------------------------------------------------- */
.amounts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 26px;padding:0;list-style:none}
.amounts li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.amounts b{display:block;font-family:"Bebas Neue",sans-serif;font-size:2.1rem;color:var(--gold);line-height:1}
.amounts span{font-size:.84rem;color:var(--muted);line-height:1.45;display:block;margin-top:6px}

/* faq ------------------------------------------------------------------- */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 26px;margin-bottom:10px}
details[open]{border-color:var(--line-strong);background:var(--card-hi)}
summary{cursor:pointer;font-weight:600;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;color:var(--gold);line-height:1;font-weight:400}
details[open] summary::after{content:"\2013"}
details p,details ul{margin:14px 0 0;color:var(--muted);font-size:.95rem}
details p:last-child,details ul:last-child{margin-bottom:0}

/* feature band ---------------------------------------------------------- */
.band{
  background:linear-gradient(150deg,var(--navy-soft) 0%,var(--navy-deep) 70%);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:52px 44px;
}
.band h2{color:#fff}
.band p,.band li{color:rgba(231,237,244,.8)}
.band ul{padding-left:1.1em}
.band li{margin-bottom:.55em}
.band a:not(.btn){color:var(--gold)}

/* prose ----------------------------------------------------------------- */
.prose{color:var(--muted)}
.prose h2{margin-top:2.2em;color:#fff}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6em;color:#fff}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--text)}

/* footer ---------------------------------------------------------------- */
.site-footer{background:#04090F;border-top:1px solid var(--line);color:var(--muted);padding:var(--s6) 0 var(--s4);font-size:.9rem}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:var(--s5)}
.foot-grid h4{font-family:"Bebas Neue",sans-serif;color:#fff;font-size:1.2rem;letter-spacing:.08em;margin-bottom:14px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:9px}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;text-align:center;font-size:.82rem;line-height:1.8;color:var(--faint)}

@media (max-width:640px){
  section{padding:var(--s6) 0}
  section.tight{padding:var(--s5) 0}
  .hero{padding:74px 0 84px}
  .formcard,.panel{padding:var(--s4) 22px}
  .card{padding:var(--s3)}
  .tablist{margin-bottom:var(--s4)}
  .stats{margin-top:-30px}
  .split{gap:28px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}