/* --- DESKTOP BASE --- */
#main-footer {
    background-color: #F8F9FB; /* Clinical Ghost Gray */
    padding: 6.25rem 0 3.125rem;
    border-top: 1px solid rgba(18, 26, 51, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

/* --- GLOBAL FOOTER CONTACT ALIGNMENT --- */

.f-info-item {
    /* THE FIX: Force horizontal alignment globally */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start; /* Aligns icon with the top line of text */
    gap: 1rem; /* 16px gap for clinical breathing room */
    margin-bottom: 1.25rem;
    text-align: left;
}

.f-info-item p {
    margin: 0;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5;
    color: var(--navy);
    font-weight: 500;
}

/* THE ICON: Surgical-grade thinness (Global) */
.f-info-item i, 
.f-info-item svg {
    /* THE FIX: 1px or 1.5px for that 'high-precision' look */
    stroke-width: 1.25px !important; 
    
    width: 1.125rem !important; /* 18px */
    height: 1.125rem !important;
    
    /* THE FIX: Prevents icons from squishing when text is long */
    flex-shrink: 0; 
    
    /* Optical correction to align icon with the first text line */
    margin-top: 0.2rem; 
    
    color: var(--navy);
    opacity: 0.7; /* Subtler look for secondary info */
}

/* HOVER EFFECT: Built for the CEO's polish */
.f-info-item:hover i {
    opacity: 1;
    color: var(--red);
    transition: all 0.3s ease;
}

/* --- THE MOBILE RECALIBRATION (Inspiration from Pearl) --- */
@media (max-width: 48rem) { /* 768px */
    
    .footer-grid {
        /* 
           THE FIX: 
           Column 1 (Brand) takes full width at the top.
           Columns 2 & 3 (Nav & Contact) split the second row.
        */
        grid-template-columns: 1fr 1fr; 
        gap: 3rem 1.5rem; /* More vertical gap, tighter horizontal gap */
    }

    .f-col-brand {
        grid-column: 1 / span 2; /* Spans the entire top row */
        text-align: center;
        margin-bottom: 2rem;
    }

    .f-section-label {
        font-size: 0.7rem;
        margin-bottom: 1.5rem;
        text-align: left; /* Keep labels left-aligned for clinical look */
    }

    .f-nav-links, .f-contact-info {
        text-align: left;
    }

    /* THE PEARL ADJUSTMENT: Tap Targets */
    .f-nav-links li {
        margin-bottom: 1.25rem; /* Increased for mobile thumbs */
    }

    .f-nav-links a {
        font-size: 1rem;
        font-weight: 600;
        display: block;
    }

    /* THE CONTACT ICON ALIGNMENT */
    .f-info-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .f-info-item i {
        width: 1rem !important;
        height: 1rem !important;
        color: var(--red);
        flex-shrink: 0;
        margin-top: 0.2rem; /* Centers icon with first line of text */
    }

    .f-info-item p {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .f-copyright {
        text-align: center;
        font-size: 0.7rem;
    }
}

/* For very narrow screens (iPhone SE, etc) */
@media (max-width: 25rem) {
    .footer-grid {
        grid-template-columns: 1fr; /* Full stack for tiny screens */
        text-align: center;
    }
    .f-section-label, .f-info-item {
        justify-content: center;
        text-align: center;
    }
}
/* BRAND COLUMN STYLING */
.f-logo-text {
    font-size: 1.75rem;
    /* 28px */
    letter-spacing: -0.05rem;
    margin-bottom: 0.25rem;
}

.f-company-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    line-height: 1.2;
    color: black;
}

/* SECTION LABELS (The Grey Spaced Text) */
.f-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    /* 12px */
    font-weight: 700;
    color: rgba(15, 21, 45, 0.7);
    text-transform: uppercase;
    margin-bottom: 1.875rem;
    /* Generous gap from Screenshot 2 */
}

/* LINKS AND INFO STYLING */
.f-nav-links li {
    margin-bottom: 1rem;
}

.f-nav-links a,
.f-contact-info p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    /* 15px */
    font-weight: 400;
    line-height: 1.6;
    color: rgba(15, 21, 45, 0.8);
    transition: color 0.3s ease;
}

.f-nav-links a:hover {
    color: var(--red);
}

.f-contact-info p {
    margin-bottom: 1rem;
}

/* DIVIDER AND COPYRIGHT */
.f-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 1.875rem;
}

.f-copyright {
    font-size: 0.75rem;
    color: var(--grey-label);
    font-weight: 400;
}

/* --- THE UNIVERSAL MOBILE FOOTER RESET --- */
/* --- THE SURGICAL MOBILE FOOTER RESET --- */
@media (max-width: 48rem) { /* 768px and down */

    #main-footer {
        padding: 5rem 1.5rem 3rem; /* Tighter padding for mobile flow */
        text-align: center; /* THE BIG FIX: Global centering for mobile stability */
    }

    .footer-grid {
        /* 
           THE FIX: We abandon the 2-column layout. 
           It is too crowded for our long address. 
        */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4rem; /* Wide gap between blocks for a premium feel */
    }

    /* 1. THE BRANDING: The Anchor */
    .f-col-brand {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .f-logo-text {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem;
    }

    .f-company-name {
        font-size: 1.125rem;
        max-width: 18rem;
        margin: 0 auto;
    }

    /* 2. THE NAVIGATION: Centered Cleanliness */
    .f-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .f-section-label {
        text-align: center !important;
        margin-bottom: 1.5rem;
        letter-spacing: 0.15rem;
        opacity: 0.6; /* Matches the 'Expert-led' watermark look */
    }

    .f-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    /* 3. THE CONTACT INFO: Side-by-side icons and text inside a centered block */
    .f-contact-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Keep items left-aligned to their icons */
        width: fit-content;      /* THE FIX: Centers the whole group but keeps text left-aligned */
        margin: 0 auto;
        gap: 1.5rem;
    }

    .f-info-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
    }

    .f-info-item i, .f-info-item svg {
        margin-top: 0.2rem;
        width: 1rem !important;
        height: 1rem !important;
        stroke-width: 1.5px !important; /* Surgical thinness */
        color: var(--red);
    }

    .f-info-item p {
        font-size: 0.95rem;
        line-height: 1.5;
        max-width: 15rem; /* Prevents long address from breaking the center */
    }

    /* 4. THE COPYRIGHT: Finishing the page */
    .footer-divider {
        margin: 4rem 0 2rem;
        opacity: 0.1;
    }

    .f-copyright {
        text-align: center;
        font-size: 0.75rem;
    }
}

/* For very narrow screens (iPhone SE, etc) */
@media (max-width: 25rem) {
    .footer-grid {
        grid-template-columns: 1fr; /* Full stack for tiny screens */
        text-align: center;
    }
    .f-section-label, .f-info-item {
        justify-content: center;
        text-align: center;
    }
}

/* --- THE SURGICAL TABLET CALIBRATION (768px to 1024px) --- */
@media (min-width: 48.0625rem) and (max-width: 64rem) { 
    
    #main-footer {
        padding: 6rem 4rem; /* More horizontal breathing room for iPad */
    }

    .footer-grid {
        display: grid !important;
        /* 
           THE TABLET FIX: 
           Column 1 (Brand) gets its own row.
           Column 2 (Nav) and Column 3 (Contact) share the second row.
        */
        grid-template-columns: 1fr 1.5fr; /* Give more space to the address */
        gap: 4rem 2rem; /* Vertical gap, Horizontal gap */
    }

    /* 1. BRAND ANCHOR: Full Width Row 1 */
    .f-col-brand {
        grid-column: 1 / span 2; 
        text-align: left; /* Keep it professional and technical */
        border-bottom: 1px solid rgba(18, 26, 51, 0.05);
        padding-bottom: 3rem;
        margin-bottom: 0;
    }

    .f-logo-text {
        font-size: 2rem !important;
    }

    .f-company-name {
        font-size: 1.25rem;
    }

    /* 2. NAVIGATION & CONTACT: Side-by-Side Row 2 */
    .f-section-label {
        font-size: 0.75rem;
        margin-bottom: 2rem;
        opacity: 0.5;
    }

    .f-nav-links li {
        margin-bottom: 1.25rem;
    }

    .f-contact-info {
        /* Align the contact block to the right side of the iPad screen */
        padding-left: 2rem;
        border-left: 1px solid rgba(18, 26, 51, 0.05);
    }

    .f-info-item {
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .f-info-item p {
        font-size: 1rem; /* Standard iPad legibility */
        line-height: 1.6;
    }

    /* 3. THE LEGAL ANCHOR */
    .f-bottom-bar {
        margin-top: 5rem;
    }
}