/* === Extracted from support.html (style id="nav-core") === */.logo{ width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }/* --- Mobile overflow fixes --- */html { overflow-x: clip; }body { overflow-x: hidden; }img, svg, video { max-width: 100%; height: auto; }.support-why h2,
.support-how h2,
.support-tiers-title,
.carousel-title {
  overflow: clip;
}@media (max-width: 600px) {
  :root { --support-underline-overhang: 0; }
}.sponsor-marquee { overflow-x: hidden; }/* === Extracted from support.html === */:root {
      --hero-text-size: 36px;
      --bar-radius: 12px;
    
  --support-underline-height: 10px;
  
  --support-gradient:
    linear-gradient(
      90deg,
      rgba(249,203,34,0.9) 23%,
      rgba(239,118,22,0.9) 50%,
      rgba(240,17,95,0.9) 77%
    );
     
   /* shift the image 20% of its container width to the left */
  --support-bg-pos-x: -290px;
  /* shift the image 50% down from its top edge */
  --support-bg-pos-y: 50%;
  --support-bg-size: 120% auto; /* keep this if you’re scaling width to 100% */
      --why-text-size:    20px;    /* default font-size for WHY text */
  --why-line-height:  1.5;     /* line-height */
  --why-text-wrap:    1000px;   /* max-width before wrapping */
    --support-label-size:    18px;
  --support-text-size:     20px;
  --support-line-height:   1.5;
  --support-text-wrap:     700px;
      --partnerships-text-size: 72px;
  --partnerships-text-weight: 100;
  --support-underline-overhang: 5rem;
  --support-underline-height: 10px;
  --support-underline-radius: 1000px;
  
    }* { margin:0; padding:0; box-sizing:border-box; }html, body { width:100%; }body {
      background:#000; color:#fff;
      font-family:'Instrument Sans',sans-serif;
      line-height:1.4; overflow-x:hidden;
    }a { text-decoration:none; color:inherit; }/* — Sticky Nav — */.logo { width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }nav { display:flex; gap:40px; }nav a:hover { opacity:.7; }/* Responsive nav for mobile and tablets *//* FOOTER *//* Use grid so the center column can be perfectly centered vertically *//* keep the donate + socials centered as a group *//* Mobile: stack and hard-center everything */.btn-img:hover img {
      transform: scale(1.05);
      transition: transform 0.3s ease;
    }.logo-link:hover .logo {
      transform: scale(1.05);
    }.btn-img img {
      display: block;
      transition: transform 0.3s ease;
    }/* Responsive Fixes *//* 1) Nav-bar logo stays colored *//* 1) Nav‐bar logo stays colored *//* 1) Force the nav‐bar logo image *//* 2) Ensure footer logo stays white *//* 2) On hover, apply grayscale + slight dim *//* shared gradient separator */.gradient-bar.separator {
  width: 100%;
  height: 8px;
  background: var(--support-gradient);
  border-radius: 4px;
  margin: 0;
}/* WHY SUPPORT US */.support-why {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.4) 70%,
      rgba(0, 0, 0, 0.2) 100%
    ),
    url('../images/whysupport.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  color: #fff;
  text-align: center;
  padding: 1rem 5% 4rem; /* added more space at top */
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* move text to top */
  align-items: center;
  position: relative;
}
/* ensure your text sits above that gradient layer */.support-why > * {
  position: relative;
  z-index: 1;
}.support-why h2::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom: 0;
  height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}/* HOW TO SUPPORT US */.support-how {
  /* Layer 1: dark→transparent tint on top
     Layer 2: your flag.png image underneath */
  background-image:
    linear-gradient(
      260deg,
      rgba(0,0,0,0)   -10%,
      rgba(0,0,0,0.8) 25%,
      #000            70%
    ),
    url('../images/flag.png');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* keep your existing padding/text‐alignment */
  padding: 4rem 8%;
  text-align: left;
  color: #fff;
  position: relative;
}/* ensure your headings & paragraphs sit above the tint layer */.support-how > * {
  position: relative;
  z-index: 1;
}/* — Unified Support Section Titles — */.support-why h2,
.support-how h2 {
  font-family: 'Tilt Warp', sans-serif;
  font-size: var(--partnerships-text-size);    /* 72px by default */
  font-weight: var(--partnerships-text-weight);/* 100 by default */
  line-height: 1.1;
  color: #fff;
  display: inline-block;
  position: relative;
  padding-bottom: 0.5em;
  margin-bottom: 1rem;
}/* — Shared Gradient Underline — */.support-why h2::after,
.support-how h2::after {
  content: "";
  position: absolute;
  left:  calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom: 0;
  height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}.support-how p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  line-height: 22px;
  max-width: 900px;
}.support-why p {
  font-size:    var(--why-text-size);
  line-height:  var(--why-line-height);
  max-width:    var(--why-text-wrap);
  margin:       0 auto 1.5rem;  /* keep center wrap if you like */
  text-align:   center;         /* or left, if you’d prefer */
  word-wrap:    break-word;
}.support-how p {
  margin-bottom: 1rem;
  text-align: left;
}/* buttons row *//* ensure the wrapper exists */.support-buttons {
  display: inline-flex;
  margin-left: 0;
  gap: 4rem;               /* keeps space between the two icons */
  margin: 0 0rem;
}.support-buttons img {
  height: 60px;
  transition: transform 0.3s ease, filter 0.3s ease;
}.support-buttons a:hover img {
  transform: scale(1.05);    /* the “pop” on hover */
  filter: brightness(1.1);
}/* responsive tweaks */@media (max-width: 600px) {
  .support-why, .support-how {
    padding: 3rem 4%;
  }
  .support-buttons {
    display: flex;
    flex-direction: column;

    align-items: center;     /* center buttons inside */
    justify-content: center;

    width: 100%;             /* take full width */
    margin: 0 auto;
  }
}/* bold the label text & size it */.support-label {
  display: inline-block;
  font-weight: bold;
  font-size: var(--support-label-size);
  margin-right: 0.25em;
}/* 1) Make the whole section text left-aligned */.support-how {
  text-align: left;
}/* 2) Stop centering the <p> blocks by removing the auto side-margins */.support-how p {
  margin: 0.75rem 0;          /* vertical spacing only */
  /* keep your sizing vars: */
  font-size: var(--support-text-size);
  line-height: var(--support-line-height);
  max-width: var(--support-text-wrap);
  word-wrap: break-word;
}/* WRAPPER & TITLE */.support-tiers-section {
  margin: 4rem 8%;
  text-align: center;
}.support-tiers-title {
  display: inline-block;
  position: relative;
  font-family: 'Tilt Warp', sans-serif;
  font-size:4rem;
  font-weight: 100;
  color: #fff;
  padding-bottom: .3em;
  margin-bottom: 2.5rem;
}.support-tiers-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom: 0;
  height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}/* TIER BOXES */.support-tiers {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}.support-tiers .tier {
  flex: 1;
  min-width: 220px;
  padding: 1.5rem;
  background: transparent;
  border-style: solid;
  border-width: 10px;           /* your adjustable outline thickness */
  border-radius: 12px;         /* adjustable corner radius */
  color: #fff;                 /* all text white */
  text-align: center;
  transition: transform .2s;
}.support-tiers .tier:hover {
  transform: translateY(-4px);
}.support-tiers .tier h3 {
  font-size: 1.3rem;
  font-weight: 1000 !important;
  margin-bottom: 0.25rem;
}.support-tiers .tier-amount {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}.support-tiers .tier-note {
  font-size: 1.25rem;
  font-weight: normal;
  margin-bottom: 1rem;
}.support-tiers .tier ul {
  list-style: disc inside;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}/* OUTLINE COLORS */.tier-onyx { border-color: #2A2A2A; }.tier-gold { border-color: #F9CB22; }.tier-amber { border-color: #EF7616; }.tier-pink   { border-color: #F0115F; }/* RESPONSIVE STACK */@media (max-width: 700px) {
  .support-tiers { flex-direction: column; gap: 1rem; margin: 2rem 4%; }
}/* SECTION + TITLE */.sponsor-carousel-section {
  margin: 4rem 8%;
  text-align: center;
}.carousel-title {
  display: inline-block;
  position: relative;
  font-family: 'Tilt Warp', sans-serif;
  font-size: 2.5rem;
  color: #fff;
  padding-bottom: 0.5em;
  margin-bottom: 1.5rem;
}.carousel-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom: 0;
  height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}/* ensure only horizontal clipping; logos can overflow vertically on pop *//* let pop‐scale overflow vertically */.sponsor-marquee {
  overflow-x: hidden;
  overflow-y: visible;
}.sponsor-marquee::-webkit-scrollbar { display: none; }.sponsor-marquee { scrollbar-width: none; }/* horizontal flex + looping animation */.marquee {
  display: flex;
  gap: 1.5rem;
  padding: 0; margin: 0;
  list-style: none;
  
  overflow: visible;                /* ensure children aren’t clipped */
}to   { transform: translateX(-50%); }/* pause on hover *//* uniform box + button behavior */.sponsor-logo {
  display: inline-block;
  flex: 0 0 auto;
  width: 150px;    /* your fixed size */
  height: 100px;
  border: 3px solid;
  border-radius: 8px;
  background: transparent;
  position: relative;
  z-index: 9;
  transition: transform 0.3s ease, filter 0.3s ease;
  overflow: visible;                /* child img can overflow */
}.sponsor-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}/* pop & lift on hover */.sponsor-logo:hover {
  transform: translateY(0px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  z-index: 10;
}/* outlines */.tier-gold { border-color: #FFD700; }.tier-orange { border-color: #EF7616; }.tier-pink   { border-color: #F0115F; }/* center title & gradient underline */.carousel-title {
  display: inline-block;
  position: relative;
  color: #fff;
  font-family: 'Tilt Warp', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5em;
}.carousel-title::after {
  content:""; position:absolute;
  left: calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom:0; height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}.support-tiers .tier-amount .tier-note {
  color: #ffffff;   /* a mid-gray; adjust to taste */
}/* === Support page: Sponsor viewport shows 3 logos === */.sponsor-viewport {
  --s-logo-w: 150px;
  --s-gap: 1.5rem;
  width: calc(3 * var(--s-logo-w) + 2 * var(--s-gap)); /* exactly 3 logos visible */
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; /* always clip to 3 */
}/* JS-driven track (no CSS keyframes) */.marquee {
  display: flex;
  gap: var(--s-gap, 1.5rem);
  padding: 0; margin: 0; list-style: none;
  will-change: transform;
  transform: translate3d(0,0,0);
}/* Boxes: move down a bit; transform the box on hover (no color change) */.sponsor-logo {
  margin-top: 12px;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--s-logo-w, 150px);
  height: 100px;
  padding: 10px;
  border: 3px solid;
  border-radius: 12px;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: visible;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}.sponsor-logo:hover {
  transform: translateY(0px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}/* Images keep true colors and never get filtered */.sponsor-marquee, .sponsor-viewport, .sponsor-logo, .sponsor-logo img { filter: none !important; }.sponsor-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform-origin: center; transition: transform 0.25s ease;
}.sponsor-logo:hover img { transform: none; }/* avoid double-scaling *//* Mobile: show 2 logos at a time */@media (max-width: 520px) {
  .sponsor-viewport {
    width: calc(2 * var(--s-logo-w) + 1 * var(--s-gap));
  }
}/* Tier borders — ensure they win in the cascade */.sponsor-logo.tier-yellow { border-color: #F9CB22 !important; }.sponsor-logo.tier-orange { border-color: #EF7616 !important; }.sponsor-logo.tier-pink   { border-color: #F0115F !important; }/* === Extracted from support.html (style id="nav-left-hotfix") === *//* === NAV alignment + size hotfix (match index fix) === */

.stats-section {
  text-align: center;
  margin: 4rem 0;
  position: relative;
}

.stats-gradient {
  height: 6px; /* line thickness */
  background: linear-gradient(
    90deg,
    rgba(249,203,34,0.9) 23%,
    rgba(239,118,22,0.9) 50%,
    rgba(240,17,95,0.9) 77%
  );
  border-radius: 1000px;
}
.site-footer .logo {
  background: url('../images/logo.png') center/cover no-repeat;
}
.site-footer .footer-copy {
  font-size: 24px;
  font-weight: 1000 !important;
  margin: 0 0 8px 0;
}
.site-footer .footer-sub {
  font-size: 18x;
  font-weight: 1200 !important;
  line-height: 16px;
  opacity: 0.8;
  margin-right: 2px;
}

.support-hero {
  background: url('../images/YOUR_IMAGE_NAME.jpg') center center / cover no-repeat;
  background-attachment: fixed; /* optional for a parallax effect */
  color: white;
  padding: 120px 8%; /* adjust spacing around text */
  min-height: 100vh; /* ensures it fills the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}