.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    min-height: min(88svh, 820px);
    overflow: hidden;
    background: var(--color-text);
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform-origin: center bottom;
    animation: hero-settle 16s var(--ease-out) both;
}

/* Darkens only the top, where the text sits, so the doors at the bottom of
   the photo stay bright (a client request). */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(12, 26, 18, 0.74) 0%,
        rgba(12, 26, 18, 0.46) 32%,
        rgba(12, 26, 18, 0) 60%
    );
}

/* On wide screens the text sits over the pale columns, so the left half
   gets extra shade; the doors in the middle stay untouched. */
@media (min-width: 861px) {
    .hero::after {
        background:
            linear-gradient(to right, rgba(12, 26, 18, 0.5) 0%, rgba(12, 26, 18, 0) 55%),
            linear-gradient(to bottom, rgba(12, 26, 18, 0.7) 0%, rgba(12, 26, 18, 0.4) 32%, rgba(12, 26, 18, 0) 60%);
    }
}

.hero-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: calc(var(--header-h) + var(--space-7)) var(--space-6) var(--space-8);
    color: var(--color-white);
}

.hero-inner h1 {
    max-width: 16ch;
    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--color-white);
    text-shadow: 0 2px 24px rgba(12, 26, 18, 0.35);
    animation: rise 900ms var(--ease-out) 150ms backwards;
}

.hero-inner .hero-sub {
    max-width: 44ch;
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 12px rgba(12, 26, 18, 0.5);
    animation: rise 900ms var(--ease-out) 300ms backwards;
}

.hero-cta {
    margin-top: var(--space-6);
    animation: rise 900ms var(--ease-out) 450ms backwards;
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-live);
    animation: live-pulse 2s ease-out infinite;
}

@keyframes hero-settle {
    from { transform: scale(1.08); }
}

.service-strip {
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-white);
}

.service-strip__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6);
}

.service-strip__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.service-strip__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
}

.service-strip__icon svg {
    width: 22px;
    height: 22px;
}

.service-strip__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-soft);
}

.service-strip__value {
    display: block;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

.service-strip__link {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.media-split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-8);
    align-items: center;
}

.media-split__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.media-split__body h2 { margin-bottom: var(--space-4); }
.media-split__action { margin-top: var(--space-6); }

.watch-live__more {
    margin-top: var(--space-6);
    text-align: center;
}

.home-events .event-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.home-events .event-row__photo { display: none; }

.venue-band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 520px;
    overflow: hidden;
    background: var(--color-text);
}

.venue-band__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .venue-band__image {
            animation: venue-drift linear both;
            animation-timeline: view();
        }
    }
}

@keyframes venue-drift {
    from { transform: scale(1.12) translateY(-3%); }
    to { transform: scale(1.02) translateY(2%); }
}

.venue-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(12, 26, 18, 0.88) 0%,
        rgba(12, 26, 18, 0.55) 45%,
        rgba(12, 26, 18, 0.12) 100%
    );
}

.venue-band__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) var(--space-9);
    color: var(--color-white);
}

.venue-band__inner h2 {
    margin-bottom: var(--space-4);
    color: var(--color-white);
}

.site-body .venue-band__inner p {
    margin-bottom: var(--space-6);
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 860px) {
    .hero { min-height: min(78svh, 640px); }

    .hero-inner { padding: calc(var(--header-h) + var(--space-5)) var(--space-5) var(--space-7); }

    .media-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .service-strip__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .venue-band { min-height: 440px; }
    .venue-band__inner { padding: var(--space-7) var(--space-5) var(--space-8); }
}

/* Desktop: one weight lighter, matching the other public headings. */
@media (min-width: 1081px) {
    .hero-inner h1 { font-weight: 600; }
}