@layer contact-page {
    .contact-page {
        display: grid;
        gap: var(--size-6);
    }

    .contact-hero {
        padding: 0;
        position: relative;
        overflow: hidden;
        border: none;
        background: none;
        box-shadow: none;
    }

    .hero-media {
        position: relative;
        border-radius: var(--radius-4);
        min-height: 380px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 20%, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.7));
        display: flex;
        align-items: flex-end;
        padding: var(--size-6);
    }

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

    .hero-copy h1 {
        font-size: clamp(2.75rem, 4vw, 3.6rem);
        margin: 0;
        line-height: 1.1;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-3);
    }

    .contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--size-5);
    }

    .contact-card,
    .contact-info {
        display: grid;
        gap: var(--size-4);
        padding: var(--size-6);
    }

    .contact-form {
        display: grid;
        gap: var(--size-3);
    }

    .contact-info ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--size-2);
    }

    .contact-info li {
        display: grid;
        gap: var(--size-1);
        color: var(--site-text-muted);
    }

    .contact-info strong {
        color: var(--site-text);
    }

    @media (min-width: 900px) {
        .hero-overlay {
            align-items: center;
            padding: var(--size-8);
        }

        .contact-hero {
            border-radius: var(--radius-4);
            border: 1px solid var(--site-border);
            margin-bottom: 0;
        }
    }
}