/* === Extracted from projects.html (style id="nav-core") === *//* === Mobile overflow fixes (add at end) === *//* 1) Make underline overhang shrink on phones */:root{
  /* keeps the gradient underline from sticking out too far on small screens */
  --underline-overhang: min(2rem, 4vw);
  --partnerships-underline-overhang: min(2rem, 4vw);
}/* 2) Clip any horizontal paint that could cause side-scroll *//* 3) Ensure the mobile menu never widens the page *//* 4) Belt-and-suspenders: avoid any stray 100vw overflow */html, body { overflow-x: clip; }@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}/* Reduce button text size on mobile */@media (max-width: 600px) {
  .doc-button {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    line-height: 1.2;
  }
}/* === Projects buttons: consistent fit & alignment === */.features { align-items: stretch; }.feature { position: relative; }/* Ensure inner content uses equal padding and sits on the bottom */.feature .copy{
  position: relative;
  z-index: 2;
  height: 100%;  
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;   /* ⬅ centers vertically */
  align-items: center !important;       /* ⬅ centers horizontally */
  text-align: center !important;
  gap: 14px;
  padding: 20px;
}/* Remove extra spacing around the heading and keep the box centered */.feature h3{ margin: 0 !important; }/* Make the button box fit within its tile with equal padding */.feature-btn{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
  line-height: 1.25 !important;
  padding: 0.75em 1em !important;
  white-space: normal !important; /* allow wrapping */
}/* === Equal-height feature buttons + centered text === */:root{ --btn-min-h: 4.6em; }/* fits two lines comfortably; tweak as needed */.feature-btn{
  display: flex !important;
  align-items: center !important;    /* vertical centering */
  justify-content: center !important;/* horizontal centering */
  text-align: center !important;
  min-height: var(--btn-min-h) !important;
}/* Slightly taller on very small phones if wrapping increases */@media (max-width: 380px){
  :root{ --btn-min-h: 5.2em; }
}/* Ensure menu sits above hero and accepts clicks *//* In case a decorative overlay overlaps the header/menus */.hero::before, .hero::after, .page-overlay, .gradient-overlay { pointer-events: none; }/* Make sure links themselves are click targets *//* === Extracted from projects.html === *//* === Mobile dropdown visibility & layering fix === *//* === Extracted from projects.html (style id="mobile-menu-fix") === *//* Keep the sticky header on top everywhere *//* Phone-only: render the opened menu above the page content *//* === Extracted from projects.html (style id="nav-click-fix-final") === *//* FINAL: Put header/nav on the very top and guarantee it receives hover/clicks *//* Anything below header should not sit above it *//* Desktop nav (>=601px) — ensure links are interactive *//* Mobile dropdown — keep it above content but aligned right *//* === Extracted from projects.html (style id="mobile-menu-hardening") === *//* === Extracted from projects.html (style id="sca-nav.css") === *//* ===== New SCA Nav (namespaced; no clashes) ===== */.u-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}/* Lock page scroll when menu is open on mobile *//* === Extracted from projects.html (style id="footer-center-fix") === *//* Constrain footer width and center container on all sizes *//* < 601px: force a single column, fully centered *//* === Extracted from projects.html === */:root { --drop-shadow: 0 2px 6px rgba(0,0,0,0.4); }*{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 — *//* DONATE-WHITE.PNG HOVER GREY-OUT *//* Responsive nav for mobile and tablets *//* CONTENT */main{background:#000}.hero{padding:90px 8% 40px;text-align:center}.hero h1{font-family:'Tilt Warp',system-ui,sans-serif;font-size:clamp(40px,6vw,76px);line-height:1.05}/* 1. Make the H1 inline and positioned relative *//* 1) On your H1, set a custom overhang and allow overflow */.hero h1 {
  --underline-overhang: 4rem;    /* ↔️ change this to whatever you like */
  position: relative;
  display: inline-block;
  padding-bottom: 0.25em;        /* room for the underline */
  overflow: visible;             /* allow the pseudo‐element to spill outside */
}/* 2) Use that variable in the ::after */.hero h1::after {
  content: "";
  position: absolute;
  left:  calc(-1 * var(--underline-overhang));
  bottom: 0;
  width: calc(100% + (var(--underline-overhang) * 2));
  height: 8px;                   /* thickness */
  border-radius: 4px;            /* round ends */
  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%
  );

}.hero p{margin-top:14px;max-width:900px;margin-inline:auto;opacity:.9}/* FEATURES — match mock: 2x2, sharp, thin gutters */.features {
  padding: 0; /* remove side padding */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* no gap */
}.feature {
  position: relative;
  min-height: 500px; /* adjust height as needed */
  border-radius: 0;
  overflow: hidden;
}.feature:nth-child(odd) { border-right: 0px solid #000; }.feature:nth-child(n+3) { border-top: 0px solid #000; }.feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}.feature::before{
      content:"";position:absolute;inset:0;
      z-index:1
    }.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.85)}.feature .copy{
      position:relative;z-index:2;color:#fff;padding:26px;display:flex;flex-direction:column;gap:10px;height:100%;justify-content:flex-end
    }.feature h3{font-family:'Tilt Warp',system-ui,sans-serif;font-size:clamp(22px,3.2vw,30px);letter-spacing:.3px}.feature p{opacity:.9;max-width:52ch}/* TIMELINE SECTION *//* 1) Choose one unified X-offset for line & arrows *//* 1) Define shared positions on the .timeline container */.timeline {
  /* X-offset of the line from the left edge */
  --spine-x: calc(8% + 61px);

  /* Y-offsets of the ends of the line */
  --spine-top: calc(48px + 7px);    /* matches ::before top */
  --spine-bottom: calc(90px - 7px); /* matches ::before bottom */

  position: relative;
  padding: 48px 8% 90px;
}/* 2) Position the gradient line using the same vars */.timeline::before {
  content: "";
  position: absolute;
  top:    var(--spine-top);
  bottom: var(--spine-bottom);
  left:   var(--spine-x);
  width:  4px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(249,203,34,0.9) 0%,
    rgba(239,118,22,0.9) 50%,
    rgba(240,17,95,0.9) 100%
  );
  pointer-events: none;
}/* 3) Align both arrows at that exact X, and vertically at line ends */.tl-arrow {
  position: absolute;
  left: var(--spine-x);
  transform: translateX(-50%);  /* center the arrow on the line */
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
}/* top arrow sits at the top of the line */.tl-arrow.up {
  top: var(--spine-top);
  /* optionally nudge it above the line: */
  transform: translate(-50%, -100%);
}/* bottom arrow sits at the bottom of the line */.tl-arrow.down {
  bottom: var(--spine-bottom);
  /* optionally nudge it below the line: */
  transform: translate(-50%, 100%);
}/* animated gradient “glow” on arrow glyph */.tl-arrow.up::before  { content: "▲"; }.tl-arrow.down::before{ content: "▼"; }.tl-arrow::before {
  display: inline-block;
  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%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-move 3s linear infinite;
  transition: transform .2s, filter .2s;
}.tl-arrow:hover::before {
  transform: scale(1.2);
  filter: brightness(1.3);
}@keyframes gradient-move {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}/* viewport and list */.tl-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  margin: 0;
}.tl-list {
  display: grid;
  gap: 30px;
  transition: transform 0.4s ease;
}/* each item pushed right of the line */.tl-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  padding-left: calc(8% + 61px + 10px);
  align-items: start;
}/* bold date */.tl-dot {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* keep left of line */
}.tl-dot i {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15);
}/* body box */.tl-body {
  display: block;
  width: 100%;
  text-decoration: none;    /* remove underline */
  color: inherit;
  background: #111;
  padding: 18px 20px;
  border: 4px solid transparent;
  border-image: linear-gradient(
      90deg,
      rgba(249,203,34,0.9) 23%,
      rgba(239,118,22,0.9) 50%,
      rgba(240,17,95,0.9) 77%
    ) 1;
  border-radius: 12px;
  box-shadow: var(--drop-shadow);
  transition: background .2s, transform .2s;
}.tl-body:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}/* gradient underline on title */.tl-title {
  font-family: 'Tilt Warp', sans-serif;
  font-size: clamp(20px,3.2vw,26px);
  margin-bottom: 6px;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}.tl-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--partnerships-underline-overhang));
  right: calc(-1 * var(--partnerships-underline-overhang));
  bottom: 0;
  height: var(--partnerships-underline-height);
  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: var(--partnerships-underline-radius);
}/* text */.tl-text {
  opacity: .9;
  font-size: 1rem;
  line-height: 1.4;
}/* ensure arrows are on top */.tl-arrow.up, .tl-arrow.down {
  pointer-events: all;
}/* — Timeline Section Title — */.timeline-title {
  /* 1) text size */
  font-size: clamp(28px, 4vw, 48px);

  /* 2) spacing around the title:
     margin-top pushes it away from what’s above,
     margin-bottom controls how far the timeline sits below. */
  margin: 3rem 0 1.5rem 18%;

  /* 3) keep your underline setup */
  display: inline-block;
  position: relative;
  padding-bottom: 0.em;
  overflow: visible;
  --underline-overhang: 4rem;
}.timeline-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--underline-overhang));
  bottom: 0;
  width: calc(100% + (var(--underline-overhang)*2));
  height: 8px;
  border-radius: 4px;
  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%
  );
}.feature-btn {
  all: unset;
  display: inline-block;
  font-family: 'Tilt Warp', sans-serif;
  font-size: clamp(12px,3.2vw,48px);
  color: #fff;
  padding: 0.5em 1.2em;
  cursor: pointer;
  border: 2px solid transparent;
  border-image: linear-gradient(
      90deg,
      rgba(249,203,34,0.9) 23%,
      rgba(239,118,22,0.9) 50%,
      rgba(240,17,95,0.9) 77%
    ) 1;
  border-radius: 8px;
  transition: transform .2s ease, filter .2s ease;
  background: rgba(0,0,0,0.4);
}.feature-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}/* Outer wrapper: gradient border/frame *//* Title + gradient underline */.doc-title {
  font-family: 'Tilt Warp', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  color: #fff;
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 0.25em;
}.doc-title::after {
  content: "";
  position: absolute;
  left: -1rem;      /* overhang */
  right: -1rem;     /* overhang */
  bottom: 0;
  height: 6px;
  border-radius: 3px;
  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%
  );
}/* (existing gradient-box styles you already have) */.doc-gradient-wrapper {
  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%
  );
  padding: 4px;
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
  margin: 2rem auto;
}.doc-inner {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}.doc-inner iframe {
  display: block;
  width: 100%;
  height: 1000px;
  border: none;
}/* Container centers everything */.doc-section {
  text-align: center;
  margin: 4rem 0; /* optional vertical spacing */
}/* Match hero h1 sizing and font */.doc-title {
  font-family: 'Tilt Warp', sans-serif;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 100;
  color: #fff;
  display: inline-block;   /* so underline shrinks to fit */
  position: relative;
  padding-bottom: 0.25em;  /* room for underline */
  margin-bottom: 2rem;     /* space before the embed box */
}/* Gradient underline */.doc-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--partnerships-underline-overhang, 5rem));
  right: calc(-1 * var(--partnerships-underline-overhang, 5rem));
  bottom: 0;
  height: var(--partnerships-underline-height, 10px);
  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: var(--partnerships-underline-radius, 1000px);
}

.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;
}

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.feature {
  position: relative;
  min-height: 500px;
  overflow: hidden;
}
.feature::before {
  content:"";
  position:absolute;
  inset:0;
  background: transparent; /* removed dark overlay */
  z-index:1;
}
.feature .copy {
  justify-content: flex-end;
  padding: 26px;
}
.feature-btn {
  font-family: 'Tilt Warp', sans-serif;
  font-size: clamp(22px,3vw,36px);
  background: rgba(0,0,0,0.4);
  border-image: linear-gradient(90deg, #F9CB22 23%, #EF7616 50%, #F0115F 77%) 1;
}

.feature .copy p {
  font-size: 1.15rem !important;       /* smaller text */
  line-height: 1.25 !important;       /* tighter spacing */
  max-width: 90% !important;          /* prevent wide paragraphs */
  margin-top: 6px !important;         /* small spacing from button */
  text-align: center !important;      /* keep centered below button */
}


@media (max-width: 480px){
  .feature-btn {
    font-size: 1rem !important;      /* caps size so text never overflows */
    padding: 0.65em 1em !important;  /* reduces box size */
    white-space: normal !important;  /* ensures wrapping */
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
  }
}

/* === FINAL MOBILE BUTTON FIX === */
@media (max-width: 600px){
  .feature-btn {
    font-size: 0.85rem !important;   /* smaller text */
    padding: 0.55em 0.9em !important; /* smaller button box */
    line-height: 1.15 !important;
    max-width: 90% !important;        /* keeps long text from stretching */
    white-space: normal !important;   /* ALWAYS allow wrapping */
    word-break: break-word !important;
    font-size: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .feature .copy p {
    font-size: 0.8rem !important;       /* smaller text */
    line-height: 1.25 !important;       /* tighter spacing */
    max-width: 90% !important;          /* prevent wide paragraphs */
    margin-top: 6px !important;         /* small spacing from button */
    text-align: center !important;      /* keep centered below button */
  }
}

/* ultra-small phones (iPhone SE, Galaxy Mini, etc.) */
@media (max-width: 380px){
  .feature-btn {
    font-size: 0.75rem !important;
    padding: 0.45em 0.8em !important;
    font-size: 8px !important;
  }
  .feature .copy p {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }
}