.hero {
  min-height: 70vh;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.25)), var(--hero-image) center/cover no-repeat;
}

.hero-content {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 6rem 1rem;
}

.hero-copy {
  max-width: 640px;
}

.hero-copy .eyebrow {
  color: rgba(255,255,255,0.88);
}

.hero-copy h1,
.hero-copy p {
  color: #fff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.section-preview .section-inner {
  display: grid;
  gap: var(--space-4);
}

#AboutSection.section-card,
#FiredepartmentSection.section-card,
#DonateSection.section-card,
#ContactSection.section-card {
  margin-block: var(--space-5);
}

#AboutSection .section-inner,
#FiredepartmentSection .section-inner,
#DonateSection .section-inner,
#ContactSection .section-inner,
#AboutSection > .section-shell,
#FiredepartmentSection > .section-shell,
#DonateSection > .section-shell,
#ContactSection > .section-shell {
  min-height: 220px;
  align-items: center;
  padding: clamp(1.25rem, 3vw, var(--space-5));
}

#AboutSection .section-inner > div,
#FiredepartmentSection .section-inner > div,
#DonateSection .section-inner > div,
#ContactSection .section-inner > div,
#AboutSection > .section-shell,
#FiredepartmentSection > .section-shell,
#DonateSection > .section-shell {
  display: grid;
  gap: 1rem;
  max-width: 760px;
}

#ContactSection .section-inner > div,
#ContactSection > .section-shell {
  max-width: none;
}