Fix homepage hero not filling viewport

[RisingOrange]

Restores the homepage hero stretching to the bottom of the viewport on screens taller than the hero's content, which regressed in #850.

Cause

#850 switched .page-top.hero-page from height: 100dvh to min-height: 100dvh (so the new taller hero can grow when its content needs more room), and the rewritten .hero element no longer set height: 100%. On viewports taller than the hero's intrinsic content, .hero-section (which is flex: 1) grew to fill the page-top but the .hero block inside it stayed content-sized, so the section below leaked through the gap at the bottom of the fold.

Fix

Make .hero-section a flex column container and give .hero flex: 1, so it stretches to fill whatever space the flex algorithm gives it, while still allowing the hero to grow past 100dvh when content is taller (the reason #850 switched to min-height).

Small cleanups in the same file

• Removed the dead --hero-img-ar CSS var (carried over from the previous hero implementation, not referenced by any rule after Split hero into generic slogan + current-campaign section #850).
• Merged two adjacent .hero { ... } blocks into one.
• Gated the active-campaign badge dot pulse on @media (prefers-reduced-motion: reduce) — Split hero into generic slogan + current-campaign section #850's own test plan flagged this as a TODO.

Before / after

Desktop (1440×1100)

Before

After

Tall viewport (half-4K, 1920×2160)

The bug is most pronounced on tall viewports — e.g. a browser taking half the width of a 4K monitor. Before the fix the hero ends about a third of the way down the viewport; after the fix it fills it. Caveat: the protester image gets noticeably more zoomed at this size, since the hero photo is height: 100% and the hero is now much taller — this is a pre-existing #850 image-treatment artifact that a further design pass is planned to address (light-grey campaign section, smaller heading, replaced photo).

Before

After

Mobile (390×844)

Unaffected — the hero's content already exceeds the viewport at this size, so the layout was already content-sized before this fix and the change is a no-op.

Known issues from #850 not addressed here

Surfaced while testing, scoped out so this PR stays minimal. A further design pass is already planned to address these (light-grey campaign section to differentiate it from the top, smaller campaign heading, replaced photo):

• Mobile vertical overflow: .hero-top-inner has padding: 14rem 1.5rem 2rem and .hero-top { min-height: 420px }, which combined with the campaign section pushes the campaign CTAs well below the fold on most phones.
• Megaphone protester overlaps the h1 text on tall portrait-ish desktop viewports (e.g. 4K half-monitor) because of the right-anchored, height-based image sizing.

Test plan

• Desktop 1440×1100, 1920×1080: hero fills the viewport, no gap to the next section.
• Mobile 390×844: unchanged.
• Viewports where hero content > 100dvh: hero grows past the viewport (campaign section appears on scroll, no clipping).

[netlify]

👷 Deploy request for pauseai pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0abd519