/* make body tall enough to scroll past the hero */
body {
  margin: 0;
  font-family: gotham, sans-serif;
  min-height: 400vh;
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero1 .background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #262626 url('website headline visual.png') center/cover no-repeat;
  z-index: 0; /* behind the text */
}

/* Position the CTA ~2/3 down the first fold */
.hero1 .donate-cta {
  position: absolute;
  left: 50%;
  top: 66vh;                 /* two-thirds down the viewport */
  transform: translateX(-50%);
  z-index: 2;                /* above text (1) and bg (0) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;              /* space between button and note */
}

/* Existing button styles are fine—keep yours or this: */
.hero1 .donate-btn {
  display: inline-block;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  color: #262626;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero1 .donate-btn:hover { transform: translateY(-1px); }

/* New: the small explainer line */
.hero1 .donate-note {
  margin: 0;
  max-width: min(80vw, 520px);
  text-align: center;
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  line-height: 1.35;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);   /* readable on imagery */
}

/* Mobile tweak: nudge slightly lower for thumbs */
@media (max-width: 600px) {
  .hero1 .donate-cta { top: 70vh; gap: 0.6rem; }
  .hero1 .donate-note { max-width: 88vw; }
}

/* Optional a11y polish */
.hero1 .donate-btn:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero1 .donate-btn { transition: none; }
}


.hero2 .background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #262626 url('second visual.png') center/cover no-repeat;
  z-index: 0; /* behind the text */
}

.hero .text-container {
  position: absolute;
  top: 40%; left: 50%;
  transform: translateX(-50%);
  width: 60vw;            /* ensure full viewport width for centering */
  max-width: 600px;
  text-align: center;     /* center-align text inside */
  z-index: 1;             /* above the background */
}

.hero .line {
  position: absolute;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-align: center;     /* center-align each line */
  font-size: clamp(1.5rem, 4vw, 2rem);
  opacity: 0;
  left: 50%;
  transform: translateX(-50%) scale(1);
  transform-origin: center center;
  color: white;           /* make text white */
}

.hero .first-line {
  font-family: bebas-neue, sans‑serif;
  font-size: clamp(3.5rem, 9vw, 5rem);
}

.hero2 .line {
  font-size: clamp(1rem, 2vw, 2rem); /* making section 3 text smaller */
  width: 100%;
}


/* normal text block */
.text-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;   
  background: #262626;   
}
.block-container {
  max-width: 600px;
  padding: 0 1rem;
  text-align: center;
}
.section-text {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.4;
  color: white;
  transform-origin: center center;
}

.email-collect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;         /* full‑screen height */
  padding: 2rem;
  background: #262626 url('third visual.png') center/cover no-repeat;;       /* or whatever you like */
  color: white;
  text-align: center;
}

.email-collect .email-container {
  max-width: 400px;
  width: 100%;
}

.email-collect h2 {
  margin-bottom: 0.5em;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.email-collect p {
  margin-bottom: 1em;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.email-collect form {
  display: flex;
  gap: 0.5rem;
}

.email-collect input[type="email"] {
  flex: 1;
  padding: 0.75em 1em;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
}

.email-collect button {
  padding: 0.75em 1.5em;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #FFFFFF;
  color: #262626;
}

/* 3) Shrink the font in your “section4-text” block */
.section4-text p {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}

.email-collect .section4-text {
  max-width: 600px;   /* never wider than 600px */
  width: 90%;         /* but fill up to 90% of the viewport */
  margin: 2rem auto;  /* vertical spacing + auto left/right centering */
  text-align: center; /* keep the text centered inside the box */
}

/* Lift the heading, subhead and form up in the viewport */
.email-collect > h2,
.email-collect > p,        /* the “Be the first…” line */
.email-collect > form {
  position: relative;
  top: -8vh;             /* ← move up by 15% of viewport height */
}

/* SECTION 2 as hero */
.hero3 .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #232323;  /* solid dark background */
  z-index: 0;
}

/* hide the text initially on load */
.hero3 .line {
  opacity: 0;
}

/* MOBILE STYLING */
@media (max-width: 600px) {
  /* 1) Let text fill more of the screen & shrink it down */
  .hero .text-container {
    width: 70vw !important;          /* almost full‑width */
    top: 33%;             /* move up a bit */
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 300px !important;      /* override desktop cap */
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }
  .hero .line {
    /* smaller clamps: 1rem min, up to ~1.2rem */
    transform: translateX(-50%) scale(1);
    font-size: clamp(0.75rem, 5vw, 1rem);
    line-height: 1.4;
  }
  .hero .first-line {
    /* headline slightly smaller but still punchy */
    font-size: clamp(2rem, 10vw, 3rem);
  }

    .hero1 .background {
    /* change to your mobile image: */
    background: #262626 
                url('website headline visual-mobile.png') 
                center/cover 
                no-repeat !important;
  }

  .hero2 .background {
    /* change to your mobile image: */
    background: #262626 
                url('second visual-mobile.png') 
                center/cover 
                no-repeat !important;
  }
  
  /* 2) Shrink section‑3 one‑liners too */
  .hero3 .line {
    font-size: clamp(1rem, 7vw, 1.2rem);
  }

  /* 3) Email form & copy tweaks */
.email-collect {
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    padding: 20vh 1rem 10vh; /* 20vh top, 10vh bottom */
  }
  /* group headline + subhead + form together */
  .email-collect > h2,
  .email-collect > p,
  .email-collect > form {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 0.75rem;
  }
  /* push the fine‑print down */
  .email-collect .section4-text {
    margin-top: 0;
    padding-bottom: 0;
  }

  /* form field sizing */
  .email-collect input[type="email"],
  .email-collect button {
    font-size: 0.9rem;
    padding: 0.75em 1em;
  }
  /* button text color */
  .email-collect button {
    color: #262626;
  }

  /* 4) Smaller fine print */
  .section4-text p {
    font-size: clamp(0.75rem, 3vw, 1rem);
    line-height: 1.4;
  }
}