.hero {
    position: relative;
    /* A minimum, with room left for the navbar on top - a fixed height
       cut the text off on screens not tall enough for it (e.g. 1280x800
       laptops). The bottom matches the 3.5rem the text and buttons are
       nudged down by (see .hero-content p / .hero-actions). */
    min-height: clamp(560px, 62vh, 720px);
    padding: calc(var(--nav-height) + 1.5rem) 0 3.5rem;
    flex-shrink: 0; /* main is a flex column - never compress the hero */
    margin-top: calc(-1 * var(--nav-height)); /* cancel main's navbar-clearing padding - bleed under the fixed navbar */
    overflow: hidden;

    display: flex;
    align-items: center;
}

/* ==========================
   Hero Images
   ========================== */

.hero-images {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-images::after {
    content: "";
    position: absolute;
    inset: 0;

    /* A light wash, but only over the left column where the headline
       actually sits, fading out well before the photo's right two-
       thirds - a flat wash across the whole hero (tried earlier) hit
       every pixel at the same strength and read as the photo being
       grayed out. Confining it to a gradient, and keeping the peak
       well under full-flat opacity, is what actually reads as "this
       photo happens to be a bit hazy here" instead of a filter
       sitting on top of it. A navy darken (tried next) read as
       dreary across the whole photo rather than a lift in one corner
       of it - warm/orange keeps the same idea but reads as a low sun
       instead. */
    background: linear-gradient(
        100deg,
        rgb(255 176 110 / 32%) 0%,
        rgb(255 176 110 / 19%) 30%,
        rgb(255 190 140 / 6%) 48%,
        transparent 60%
    );
}

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    /* Biases the crop toward the top of the photo - the hazier sky/
       ocean band - rather than the default center crop, which lands
       the "Starts Here." accent squarely on the darkest plowed fields
       further down the frame. Tune the 30% if a different hero photo
       needs a different bias. */
    object-position: center 30%;
}

/* ==========================
   Hero Content
   ========================== */

.hero .container {
    /* Vertical centering now comes from .hero's own align-items: center
       (a flex parent with a real, defined height) rather than a fixed
       padding-top guess. That guess (clamp(18rem, 6vw, 50rem)) resolved
       to a flat 288px at any normal viewport width, sized for the old,
       taller hero - shrinking the hero's height without touching this
       is exactly what pushed the buttons below the visible box. */
    width: min(90%, 850px);
    max-width: 850px;
    margin: 0;

    /* margin-top on an align-items: center child only moves it by
       roughly half of whatever value is set (the browser splits the
       extra space) - too indirect to dial in reliably, which is why
       2rem and then 5rem both barely registered. transform moves it
       by exactly this amount instead, no halving. */
    transform: translateY(-0.5rem);

    padding-left: clamp(2rem, 6vw, 5rem);

    color: #fff;
}

.hero-content {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: #fff;
}

.hero-content h1 {
    /* Outfit rather than the sitewide Manrope (--font-current) - same
       rounder, softer choice as the paragraph below, just heavier
       here so it still reads as a display headline rather than body
       copy blown up. */
    font-family: "Outfit", sans-serif;
    font-size: clamp(3.5rem, 7.5vw, 6.5rem);
    line-height: 0.95;

    /* Mixed case (not the old all-caps treatment) reads closer to a
       modern display headline and lets the accent span below do the
       emphasis work instead of the whole line shouting. Both lines
       carry the same heavy weight now - it's the accent color, not a
       weight difference, that sets "Starts Here." apart. */
    font-weight: 900;

    /* The soft blur shadows below read fine against a mid-to-dark
       photo, but on a bright sky they barely peek out from under
       900-weight strokes this thick - a blurred dark halo just gets
       lost against a light background. The four tight, near-0-blur
       offsets act as a hard outline instead, which holds contrast
       regardless of how bright the photo underneath is; the soft
       pair stays layered behind them for depth. .accent overrides
       this back to none - a dark outline on already-dark navy text
       just muddies it instead of adding contrast. */
    text-shadow:
        -1.5px -1.5px 0 rgb(0 0 0 / 55%),
         1.5px -1.5px 0 rgb(0 0 0 / 55%),
        -1.5px  1.5px 0 rgb(0 0 0 / 55%),
         1.5px  1.5px 0 rgb(0 0 0 / 55%),
        0 2px 4px rgb(0 0 0 / 80%),
        0 8px 20px rgb(0 0 0 / 60%);
}

.hero-content h1:first-of-type {
    margin-bottom: 0.15rem;
}

.hero-content h1 + h1 {
    margin-bottom: 1.75rem;
}

.hero-content p {
    max-width: 46rem;

    /* transform, not margin - margin-top would grow .hero-content's own
       height, and since that box is centered as a whole (.hero's
       align-items: center on .container), growing it pushes its *top*
       edge up too, dragging the headline along with it. transform
       moves the rendered box after layout/centering is already
       resolved, so it shifts the description (and, with the matching
       vertical transform below, the buttons) down without moving
       anything above. The horizontal nudge is this element's alone
       (not shared with the buttons) - it exists only to clear a bright
       reflection in the photo that sat right under the text. */
    transform: translate(2rem, 3.5rem);

    /* Outfit rather than the sitewide Manrope (--font-current) - just
       for this paragraph, it's rounder and softer than body copy needs
       to be everywhere else, which is why it's set here rather than on
       --font-current. */
    font-family: "Outfit", sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.55;

    color: #fff;

    /* A solid backdrop (tried after this) guaranteed contrast but read
       as a box sitting on top of the photo rather than text on it. A
       text-stroke (tried after that) read as worse still. A blur-only
       shadow (tried after that, 0 1px 4px) was invisible against this
       photo - with no real offset, it's just a soft glow that blends
       into the photo's own texture. A bigger offset (1px 2px 2px,
       tried after that) fixed visibility but was displaced enough to
       bleed into round letters' counters (o, a) and muddy them. This
       is a tighter version of the same idea - still real displacement,
       not just blur, but small enough to stay behind the stroke
       instead of showing up inside the letterform's own holes. */
    text-shadow: 1px 1px 1px rgb(0 0 0 / 70%);
}

.accent {
    color: var(--color-secondary);

    /* The h1 drop shadow above is a dark shadow tuned for white text -
       on navy it doesn't add contrast, it just blurs into a muddy
       halo. Plain and un-shadowed reads cleaner; the actual lift for
       this color comes from the light gradient behind it (see
       .hero-images::after below) rather than an effect on the text
       itself. */
    text-shadow: none;
}

/* ==========================
   Eyebrow
   ========================== */

/* Shared by the hero, the cards heading, and the welcome CTA - a small
   tagged label with the same red tick the navbar already uses under
   its active link (see .navbar nav a::after in navbar.css), so it
   reads as one house device rather than a new one invented per
   section. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin-bottom: 0.85rem;

    color: var(--color-secondary);

    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow-bar {
    width: 1.5rem;
    height: 3px;

    background: var(--color-primary);
    border-radius: 2px;
}

.eyebrow-light {
    color: rgb(255 255 255 / 90%);
    text-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}

/* The hero's own eyebrow is navy rather than the plain light variant
   above, since it sits on a light background where white text would
   disappear - no text-shadow here either, for the same reason
   .accent's h1 lost its shadow: a dark shadow on dark text just blurs
   into a muddy halo instead of adding contrast. The welcome CTA is
   light for the same reason and gets the same override. */
.hero .eyebrow-light,
.welcome-cta .eyebrow-light {
    color: var(--color-secondary);
    font-size: 1rem;
    text-shadow: none;
}

/* Only the hero's eyebrow gets the bar as an underline below the text
   - the cards heading and welcome CTA keep .eyebrow's default reading
   as a leading tick beside the label (column-reverse puts the bar,
   which comes first in the markup, last visually - i.e. underneath -
   without having to reorder the HTML itself). */
.hero .eyebrow {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.45rem;
}

/* As an underline (see .hero .eyebrow above), the default 1.5rem tick
   reads as too short - the column layout's width fits the text line
   above it, so a percentage here scales the bar with however long the
   org's name actually is, rather than a fixed length that'd look
   right for one name and wrong for another. */
.hero .eyebrow-bar {
    width: 10%;
}

/* ==========================
   Hero Actions
   ========================== */

.hero-actions {
    display: flex;
    gap: 1rem;

    margin-top: 1.5rem;

    /* Matches .hero-content p's own translateY above so the buttons
       move down together with the description, not just the
       description on its own. */
    transform: translateY(3.5rem);
}

.hero-button {
    display: inline-block;

    padding: 0.85rem 1.4rem;

    border: 2px solid transparent;
    border-radius: 4px;

    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.hero-button-primary {
    background: var(--color-primary);
    color: #fff;
}

.hero-button-primary:hover {
    background: #fff;
    color: var(--color-primary);

    transform: translateY(-2px);

    box-shadow: 0 5px 12px rgb(0 0 0 / 25%);
}

.hero-button-secondary {
    background: transparent;
    border-color: #fff;

    color: #fff;
}

.hero-button-secondary:hover {
    background: #fff;
    color: var(--color-secondary);

    transform: translateY(-2px);
}

/* ==========================
   Highlights
   ========================== */

.highlights {
    flex-shrink: 0;

    background: #fff;
    border-bottom: 1px solid #c7d0d8;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding: 2.75rem 0;
}

.highlight {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;

    padding: 0 1.5rem;

    border-left: 1px solid #c7d0d8;
}

.highlight:first-child {
    border-left: none;
    padding-left: 0;
}

.highlight i {
    font-size: 2.1rem;
    color: var(--color-secondary);
}

.highlight-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.highlight-text strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-secondary);
}

.highlight-text span {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #6b7684;
}

/* ==========================
   Cards
   ========================== */

.cards {
    padding: 4.5rem 0 5rem;
    background: #f8fafc;
}

.section-heading {
    max-width: 40rem;

    margin: 0 auto 2.75rem;

    text-align: center;
}

.section-heading .eyebrow {
    justify-content: center;

    color: var(--color-primary);
    letter-spacing: 0.18em;
}

.section-heading h2 {
    margin-bottom: 0.6rem;

    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--color-secondary);
}

.section-heading p {
    color: #5a6472;
    line-height: 1.5;
}

/* ==========================
   Events Calendar
   ========================== */

.events-calendar {
    padding: 4.5rem 0 5rem;
    background: #fff;
}

.calendar {
    max-width: 78rem;
    margin: 0 auto;

    background: #fff;
    border: 1px solid #e6ebef;
    border-radius: 12px;

    box-shadow:
        0 4px 8px rgba(17, 52, 86, 0.06),
        0 10px 24px rgba(17, 52, 86, 0.05);

    overflow: hidden;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.25rem 1.5rem;

    background: var(--color-secondary);
}

.calendar-header h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    color: #fff;
    border-radius: 50%;

    transition: background .2s ease;
}

.calendar-nav:hover {
    background: rgb(255 255 255 / 12%);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    padding: 0.75rem 0.5rem 0;

    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;

    padding: 0.5rem;
}

.calendar-day {
    /* Grid items don't shrink below their content's natural width by
       default - a long, unbreakable event title (see .calendar-event's
       white-space: nowrap) was forcing its whole column wider instead
       of truncating inside it. This lets the column shrink to the
       track's actual size so the child's overflow/ellipsis rules
       actually get a chance to kick in. */
    min-width: 0;
    min-height: 5.5rem;
    padding: 0.4rem;

    border-radius: 6px;

    transition: background .2s ease;
}

.calendar-day-number {
    display: inline-block;
    margin-bottom: 0.3rem;

    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.calendar-day-outside {
    background: #fafbfc;
}

.calendar-day-outside .calendar-day-number {
    color: #cbd5e1;
}

.calendar-day-today {
    background: color-mix(in srgb, #3b82f6 14%, white);
}

.calendar-day-today .calendar-day-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.5rem;
    height: 1.5rem;

    background: var(--color-primary);
    border-radius: 50%;

    color: #fff;
}

.calendar-event {
    display: block;
    overflow: hidden;

    margin-bottom: 0.2rem;
    padding: 0.15rem 0.4rem;

    background: var(--color-secondary);
    border-radius: 4px;

    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition: background .2s ease;
}

.calendar-event:hover {
    background: var(--color-primary);
}

.events-calendar-footer {
    margin-top: 1.75rem;
    text-align: center;
}

.events-calendar-footer a {
    color: var(--color-secondary);
    font-weight: 700;
    text-decoration: none;
}

.events-calendar-footer a:hover {
    color: var(--color-primary);
}

@media (max-width: 640px) {
    .calendar-day {
        min-height: 3.5rem;
    }

    .calendar-weekdays span {
        font-size: 0;
    }

    .calendar-weekdays span::first-letter {
        font-size: 0.7rem;
    }

    /* Too narrow for a readable title ("Oc..."), so each event is a
       short colored bar marking the day; tapping it still opens it,
       and View All Events below lists them in full. */
    .calendar-event {
        height: 0.55rem;
        padding: 0;

        font-size: 0;
    }
}

/* ==========================
   Welcome CTA
   ========================== */

.welcome-cta {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;

    background-color: #fff;
    background-size: 100%;
    background-position: center 60%;
}

/* No tint for now - the markup/class stays so a gradient can be
   dropped back in here later if the raw photo ends up needing one. */
.welcome-cta-overlay {
    position: absolute;
    inset: 0;
}

.welcome-cta-credit {
    position: absolute;
    z-index: 1;
    right: 0.85rem;
    bottom: 0.75rem;

    padding: 0.15rem 0.5rem;

    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;

    color: #fff;
    font-size: 0.7rem;
    line-height: 1.4;
}

.welcome-cta-inner {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;

    padding: 3.5rem 0;
}

.welcome-cta-text {
    max-width: 48rem;
}

.welcome-cta-text h2 {
    margin-bottom: 0.75rem;

    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-secondary);
}

.welcome-cta-text p {
    max-width: 46rem;

    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.6;
    color: #333d4d;
}

.welcome-cta-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.9rem 1.6rem;

    background: var(--color-primary);
    border-radius: 6px;

    color: #fff;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.welcome-cta-button:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, black);
    transform: translateY(-2px);
}

.welcome-cta-button .arrow {
    transition: transform 0.2s ease;
}

.welcome-cta-button:hover .arrow {
    transform: translateX(3px);
}

/* ==========================
   Responsive
   ========================== */

@media (max-width: 900px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 0;
    }

    .highlight {
        border-left: none;
        padding-left: 0;
    }

    .welcome-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
}

/* Narrower screens: the hero sizes to its content instead of a fixed
   height - the desktop version's centered, nudged-down text and buttons
   ran up under the navbar and off the bottom. */
@media (max-width: 1100px) {
    .hero {
        height: auto;
        padding: calc(var(--nav-height) + 3rem) 0 3.5rem;
    }

    .hero .container {
        transform: none;
    }

    .hero-content p,
    .hero-actions {
        transform: none;
    }

    .hero-content p {
        font-size: 1.25rem;
    }
}

/* Phones: a headline and paragraph scaled for the screen, and the
   buttons stacked full width. */
@media (max-width: 700px) {
    .hero {
        padding: calc(var(--nav-height) + 2.5rem) 0 3rem;
    }

    .hero .container {
        width: 100%;
        padding: 0 1.25rem;
    }

    .hero-content h1 {
        font-size: clamp(3rem, 15vw, 4rem);
    }

    .hero-content h1 + h1 {
        margin-bottom: 1.25rem;
    }

    .hero-content p {
        font-size: 1.1rem;
        letter-spacing: 0.02em;
    }

    .hero-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .hero-button {
        flex: 1 1 auto;
        text-align: center;
    }
}