#contact-cta {
    background-color: var(--red);
    color: #fff;
    padding: 30vh 0 15rem;
    /* Keeping gradient in PX for visual sharpness */
    background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px);
}

.connect-vertical-text {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 12rem;
    /* 150px */
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.cta-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom: 5rem;
}

.cta-headline {
    font-size: 5rem;
    /* 80px */
    font-weight: 800;
    line-height: 0.85;
}

.cta-cards-side {
    position: relative;
    height: 23.75rem;
    /* 380px */
    user-select: none;
}

.glass-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(0.75rem);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
    padding: 1.5625rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.g-health {
    width: 16.25rem;
    height: 10rem;
    right: 0;
    top: 0;
}

.g-mission {
    width: 21.25rem;
    height: 13.75rem;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.g-mission p {
    font-style: italic;
    font-size: 0.875rem;
    margin-top: 0.625rem;
}

.g-quality {
    width: 16.25rem;
    height: 10rem;
    left: 0;
    bottom: 0;
}

.contact-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9375rem;
}

.outline-box {
    background-color: #DF353D;
    border-top: 2px solid rgba(255, 255, 255, 1);
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    text-align: center;
    border-radius: 0.25rem;
}

.contact-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 200;
    gap: 0.5rem;
}

.contact-header [data-lucide] {
    width: 1rem;
    height: 1rem;
    color: #fff;
    stroke-width: 2px;
}

.outline-box p {
    /* THE CEO FIX: Force all numbers to have the exact same width */
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";

    /* THE DESIGNER FIX: Ensure identical weight and size */
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF;
    
    /* Lock the line height to prevent vertical drifting */
    line-height: 1.4;
    margin: 0;
    
    /* Subtle tracking to ensure 'heavy' numbers don't touch */
    letter-spacing: 0.01rem;
}

/* RESPONSIVENESS USING EM */
/* --- THE SURGICAL MOBILE CALIBRATION (CONTACT PAGE) --- */

@media (max-width: 64rem) { /* 1024px - Tablet */
    #contact-cta {
        padding: 12rem 0 8rem; /* Adjusted from 30vh for better vertical balance */
    }

    .cta-main-grid {
        grid-template-columns: 1fr; /* Stack the cards below the text */
        text-align: center;
        gap: 5rem;
    }

    .cta-text-side {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta-headline {
        font-size: 4rem; /* 64px */
    }

    .cta-cards-side {
        transform: scale(0.9); /* Prevent horizontal overflow */
        margin: 0 auto;
    }
}

@media (max-width: 48rem) { /* 768px - Mobile Phones */
    #contact-cta {
        padding: 8rem 0 6rem;
        /* Reset negative margin if needed for this specific page */
        margin-top: 0; 
    }

    /* 1. TYPOGRAPHY: Scaling for the 'Pocket Screen' */
    .cta-headline {
        font-size: 2.75rem !important; /* 44px */
        line-height: 1.1 !important;
        margin-bottom: 2rem;
    }

    .quote-mark-top {
        font-size: 3rem; /* 48px */
        margin-bottom: 0;
    }

    /* 2. THE GRID & CONTENT: Focus on Action */
    .cta-main-grid {
        gap: 3rem;
    }

    .cta-cards-side {
        /* 
           CEO FIX: Hide complex glass visuals on small mobile 
           to prioritize the Email and Phone numbers.
        */
        display: none; 
    }

    .connect-vertical-text {
        /* Hide giant watermark to prevent overlapping the text */
        display: none; 
    }

    /* 3. CONTACT BOXES: The Touch Targets */
    .contact-boxes {
        grid-template-columns: 1fr; /* Vertical Stack */
        gap: 1rem;
    }

    .outline-box {
        padding: 2rem 1.5rem;
        text-align: center;
        width: 100%;
    }

    .contact-header {
        flex-direction: column; /* Icon above label for mobile hierarchy */
        gap: 0.5rem;
    }

    .outline-box p {
        font-size: 1rem;
        word-break: break-all; /* Prevents long emails from breaking the box */
    }

    /* 4. FOOTER ADJUSTMENT */
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        text-align: left;
    }
    
    .f-col-brand {
        grid-column: 1 / span 2;
        text-align: center;
        margin-bottom: 3rem;
    }
}