:root {
            --gap-small: 0.625rem;
            --gap-medium: 1.25rem;
            --gap-large: 3.125rem;
            --gap-xl: 6.875rem;
        }

        /* Main Layout */
        .contact-section {
            display: flex;
            flex-direction: column;
            gap: var(--gap-xl);
        }

        /* Header and Info Section */
        .contact-section .header-content {
            display: flex;
            flex-direction: column;
            gap: var(--gap-xl);
            margin-bottom: 0;
            padding: 4.25rem 0 0;
            border-top: 1px solid var(--color-dark-blue);
        }

        .contact-section .header-info {
            display: flex;
            flex-direction: column;
            gap: var(--gap-medium);
        }

        .contact-section .header-title {
            font-family: var(--font-family-heading);
            font-size: 3.75rem;
            font-weight: 500;
            line-height: 1.133;
            color: var(--color-text);
            text-transform: capitalize;
        }

        .contact-section .header-subtitle {
            font-family: var(--font-family-base);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--color-text-grey);
            max-width: 90%;
        }

        /* Contact Info Grid */
        .contact-section .contact-info {
            display: flex;
            flex-direction: column;
            gap: var(--gap-large);
            padding-top: 0.625rem;
            max-width: 100%;
        }

        .contact-section .contact-item {
            display: flex;
            flex-direction: column;
            gap: var(--gap-small);
        }

        .contact-section .contact-label {
            font-family: var(--font-family-base);
            font-size: 1.125rem;
            font-weight: 400;
            line-height: 1.444;
            color: var(--color-grey-2);
        }

        .contact-section .contact-value,
        .contact-section .contact-value a {
            font-family: var(--font-family-base);
            font-size: 1.125rem; /* 18px on desktop */
            font-weight: 500;
            line-height: 1.444;
            text-decoration: none;
        }
        
        .contact-section .contact-value a {
            font-size: inherit;
        }

        .contact-section .contact-value a:hover {
            cursor: pointer;
        }

        /* Map Section */
        .contact-section .map-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            max-height: 31.25rem;
            overflow: hidden;
        }

        /* Responsive Design */
        @media (min-width: 48rem) {

            .contact-section {
                gap: 7.5rem;
                padding-bottom: 8.75rem;
            }
        }

        @media (min-width: 64rem) {

            .contact-section .header-content {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                gap: 5rem;
            }

            .contact-section .header-info {
                flex: 0 0 auto;
                width: 100%;
                max-width: 31.25rem;
            }

            .contact-section .contact-info {
                flex: 1;
                width: 100%;
                max-width: 41.25rem;
            }

            .contact-section .header-title {
                font-size: 3.75rem;
            }

            .contact-section .map-info-card {
                display: block;
            }
        }

        @media (min-width: 80rem) {

            /* .contact-section .header-content {
                gap: 12.5rem;
            } */

            .contact-section {
                gap: 6.875rem;
            }
        }

        /* Mobile Optimization */
        @media (max-width: 48rem) {
            .contact-section {
                gap: 4.375rem;
            }
            .contact-section .header-title {
                font-size: 1.75rem;
                font-weight: 400;
            }

            .contact-section .header-content {
                gap: 3.125rem;
            }

            .contact-section .header-content {
                padding: 2.188rem 0 0;
            }

            .contact-section .header-subtitle {
                font-size: 0.95rem;
            }

            .contact-section .contact-info {
                padding-top: 0;
            }

            .contact-section .contact-label,
            .contact-section .contact-value {
                font-size: 1rem;
            }

            .contact-section .map-container {
                width: 100vw;
                margin-left: max(calc((100vw - 100%) / -2), -2.5rem); /* Negative margin to offset container padding */
                /* Assuming container padding is 2.5rem (40px) from style-guide.css (padding: 0 40px) */
                /* Or more robustly: */
                margin-left: -2.5rem; /* Based on style-guide.css .container padding: 0 40px */
                margin-right: -2.5rem;
                width: calc(100% + 5rem);
                border-radius: 0;
                height: 31.25rem;
                max-height: 31.25rem;
            }

            .contact-section .map-container iframe {
                height: 100% !important;
                max-height: 100% !important;
            }
            
            .contact-section .map-image {
                border-radius: 0;
            }

            .contact-section .map-info-card {
                display: none;
            }
        }