/* ========================================
   CONTACT PAGE STYLES
   ======================================== */

/* Contact Hero Section */
.contact-hero {
    min-height: calc(100vh - 80px);
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem); /* 32-64px top, 16-32px bottom */
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(40, 56, 146, 0.03) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.contact-hero>.container {
    width: 100%;
    padding-left: clamp(1.5rem, 9.69vw, 11.625rem);
    padding-right: clamp(1.5rem, 9.69vw, 11.625rem);
}

@media (max-width: 1024px) {
    .contact-hero>.container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Hero padding now uses clamp() - no media query needed */

/* Breadcrumb */
.contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-8);
    font-size: var(--font-size-sm);
}

.contact-breadcrumb a {
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}

.contact-breadcrumb a:hover {
    color: var(--color-secondary);
}

.contact-breadcrumb .separator {
    color: #9CA3AF;
}

.contact-breadcrumb .current {
    color: var(--color-text-dark);
    font-weight: 500;
}

/* Contact Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.75rem); /* 24px - 60px fluid */
    align-items: start;
}

@media (max-width: 1024px) {
    .contact-info {
        padding-top: 0;
    }

    .contact-form-wrapper {
        margin-top: 0;
    }
}

/* Switch to single column layout below 768px */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Info Column */
.contact-info {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-8);
    padding-top: var(--spacing-8);
}

/* Reorder: email-card below staff cards (all viewports) */
.email-card {
    order: 3;
}

.staff-card:first-of-type {
    order: 1;
}

.staff-card:last-of-type {
    order: 2;
}

/* Contact Title - Fluid typography (28px - 72px) */
.contact-title {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-h1);
    font-weight: 400;
    line-height: var(--line-height-tight);
    color: #041A31;
    margin-bottom: var(--spacing-2);
}

@media (max-width: 768px) {
    .contact-title {
        text-align: center;
    }

    .contact-description {
        text-align: center;
        max-width: 100%;
    }
}

/* Contact Description */
.contact-description {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-relaxed);
    color: #666666;
    max-width: 480px;
}

/* Email Card - Glass Effect */
.contact-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 533px;
    /* Uses CSS variable for height consistency with staff-card (avatar.md rule 2) */
    min-height: var(--card-height, 125px);
    padding: clamp(1rem, 3vw, 1.875rem); /* 16px - 30px fluid */
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem); /* 32px - 72px fluid - increased for more spacing */
    border-radius: 20px;
    /* MH Glass Morphism Effect */
    background: rgba(244, 246, 254, 0.25);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    transition: all var(--transition-base);
    box-sizing: border-box;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
}

.email-card {
    border: none;
    /* Margin top removed to rely on container gap */
}

.card-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;

    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--color-secondary);
}

.card-icon svg {
    width: 36px;
    height: 26px;
}

/* Email Card Text - Custom card design (smaller fonts allowed) */
.card-email {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #041A31;
    transition: color var(--transition-fast);
    word-break: break-word;
}

.card-email:hover {
    color: var(--color-primary);
}

/* ========================================
   STAFF CARDS - Avatar Design System
   Based on avatar.md specifications:
   1. Avatar wrapper = staff-card height + 2px
   2. Staff-card height = contact-card height
   3. Staff-card left aligns with contact-card left
   4. Visible rectangle starts at 50% of avatar
   5. Avatar left aligns with contact-card left
   ======================================== */

/* CSS Custom Properties for Staff Card System */
.contact-info {
    /* Base card height - shared between contact-card and staff-card */
    --card-height: 125px;
    /* Avatar size = card height + 2px (per avatar.md rule 1) */
    --avatar-size: calc(var(--card-height) + 2px);
    /* Avatar offset = half of avatar (50% rule per avatar.md rule 6) */
    --avatar-offset: calc(var(--avatar-size) / 2);
}

/* Staff Cards - Container aligns with contact-card (avatar.md rule 3) */
.staff-card {
    position: relative;
    display: flex;
    /* Same width as contact-card (avatar.md rule 3 - left edges align) */
    width: 100%;
    max-width: 533px;
    /* Fixed height matches contact-card (avatar.md rule 2) - not min-height */
    height: var(--card-height);
    /* Padding-left accounts for avatar overlap + gap (avatar-offset + 30px for proper text spacing) */
    padding: 20px 20px 20px calc(var(--avatar-offset) + 30px);
    align-items: center;
    overflow: visible;
    box-sizing: border-box;
    /* No background on container - background is on .staff-card-bg */
    background: transparent;
    transition: all var(--transition-base);
}

.staff-card:hover .staff-card-bg {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
}

/* The Glass Background Layer - Visible rectangle starting at avatar 50% (avatar.md rule 6) */
.staff-card-bg {
    position: absolute;
    /* Rectangle starts at avatar center (50% of avatar = avatar-offset) */
    left: var(--avatar-offset);
    top: 0;
    /* Rectangle extends to right edge of container */
    right: 0;
    bottom: 0;
    border-radius: 20px;
    /* MH Glass Morphism Effect */
    background: rgba(244, 246, 254, 0.25);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    z-index: 0;
    transition: all var(--transition-base);
}

/* The Avatar Positioning (avatar.md rule 7 - avatar left = contact-card left) */
.staff-card-avatar-wrapper {
    position: absolute;
    /* Avatar left edge aligns with container left (which = contact-card left) */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Avatar size is card height + 2px (avatar.md rule 1) */
    width: var(--avatar-size);
    height: var(--avatar-size);
    z-index: 20;
}

.staff-card-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E5E7EB;
    /* Fallback */
    background-position: center;
    background-size: cover;
    border: 4px solid #FFFFFF;
    /* White border as seen in reference */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



/* Staff Info Content */
.staff-card-info {
    position: relative;
    z-index: 10;
    /* No margin needed - padding is on container */
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Allow text to shrink */
    overflow: hidden;
    padding-left: 60px; /* Ensure text is not covered by avatar image - increased for more spacing */
}

/* Note: This declaration is overridden by the dark text version below */
.staff-name {
    font-family: 'Onest', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Adjust text color: contact page hero bg is light gradient. 
   The glass effect on button.html was designed for a dark background. 
   On light background (contact hero), white text might be invisible.
   However, the glass-bg has a slight white fill (0.05). 
   Let's check the context. The contact hero has a light background.
   Using white text will be unreadable.
   I need to use dark text for the name/info OR change the glass style to be dark glass.
   
   The request was "use this button style". The button style has white text.
   BUT context matters.
   Wait, look at contact.css .contact-hero background: 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(40, 56, 146, 0.03) 100%);
   It is VERY light.
   
   If I use white text, it will vanish.
   I should probably use the dark colors from the original staff card design but keep the structure/glass shape.
   Original staff name color: #041A31
   Original staff email color: var(--color-text-light)
   
   However, the requested design (button.html) uses a dark glass on a dark background image.
   Wait, button.html glass bg was rgba(255,255,255,0.05). That is light glass.
   In button.html body background was dark.
   
   If I put a light glass on a light background, it's subtle.
   But the text MUST be readable.
   I will use dark text colors for the content to ensure readability on the light contact page background.
*/

/* Staff Name - Custom card design (smaller fonts allowed) */
.staff-name {
    font-family: 'Onest', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #041A31;
    margin-bottom: 2px;
}

/* Staff Contact Info - Custom card design (smaller fonts allowed) */
.staff-email a,
.staff-phone a {
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    color: #4B5563;
    text-decoration: none;
    transition: color 0.2s;
}

.staff-email a:hover,
.staff-phone a:hover {
    color: var(--color-primary);
}

/* Update glass border/bg for light mode visibility if needed */
.staff-card-bg {
    /* Slightly stronger border for light background visibility */
    border: 1px solid rgba(4, 26, 49, 0.1);
    /* MH Glass Morphism Effect */
    background: rgba(244, 246, 254, 0.25);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Softer shadow for light theme */
}

/* Contact Form - Transparent Effect */
.contact-form-wrapper {
    position: relative;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    mix-blend-mode: plus-darker;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    padding: var(--spacing-8);
    margin-top: var(--spacing-8);
    transition: all var(--transition-base);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

@media (max-width: 1024px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

/* Form Labels - Fluid typography (16px - 18px) */
.form-group label {
    font-size: var(--fluid-body);
    font-weight: 500;
    color: #041A31;
}

.form-group label span[aria-hidden="true"] {
    color: #EF4444;
    margin-left: 2px;
}

/* Form Inputs - 16px minimum to prevent iOS auto-zoom */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0 10px 40px 0 rgba(65, 179, 228, 0.10);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    font-size: var(--fluid-input);
    font-family: var(--font-family-base);
    color: var(--color-primary);
    transition: all var(--transition-fast);
}

/* Error/validation state - orange text */
.form-group input.error,
.form-group input:invalid:not(:placeholder-shown) {
    color: var(--color-primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9CA3AF;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border: 2px solid rgba(255, 255, 255, 0.50);
    box-shadow: 0 10px 40px 0 rgba(65, 179, 228, 0.10);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Phone Input */
.phone-input {
    display: flex;
    gap: var(--spacing-2);
}

.country-select {
    width: 90px;
    flex-shrink: 0;
    padding: 12px 28px 12px 12px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0 10px 40px 0 rgba(65, 179, 228, 0.10);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-size: var(--fluid-input);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Custom dropdown arrow for all selects */
.form-group select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.phone-input input {
    flex: 1;
}

/* Checkbox Group */
.checkbox-group {
    margin-top: var(--spacing-1);
}

/* Checkbox Label - Fluid typography (16px - 18px) */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
    font-size: var(--fluid-body);
    line-height: var(--line-height-normal);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-secondary);
    flex-shrink: 0;
}

.checkbox-text {
    color: var(--color-text-light);
}

.checkbox-text a {
    color: var(--color-secondary);
    text-decoration: underline;
}

.checkbox-text a:hover {
    color: var(--color-primary);
}

/* Submit Button Wrapper */
.submit-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-2);
}

/* Submit Button */
.submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 215px;
    height: 52px;
    padding: var(--fluid-space-sm) var(--fluid-space-lg);
    border-radius: 999px;
    /* MH Glass Morphism Effect */
    background: rgba(244, 246, 254, 0.25);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    color: var(--color-primary);
    border: none;
    font-size: var(--fluid-body); /* 16px → 18px fluid */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.submit-btn:hover:not(:disabled) {
    background: rgba(244, 246, 254, 0.6);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    color: #333;
    transform: translateY(-2px);
}

.submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.submit-btn[aria-busy="true"],
.submit-btn:disabled {
    color: #9CA3AF;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Dot Pattern Background */
.dot-pattern {
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    height: 700px;
    background-image: radial-gradient(circle, #E5E7EB 3px, transparent 3px);
    background-size: 58px 58px;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

/* ========================================
   LOCATIONS SECTION
   ======================================== */

.locations-section {
    height: 679px;
    padding: 0;
    background: url('../assets/background/contact-us-offices-banner.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Dark overlay - no dots */
.locations-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 26, 49, 0.8);
    pointer-events: none;
}

.locations-section>.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 9.69vw, 11.625rem);
    position: relative;
    z-index: 1;
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, clamp(280px, 22.24vw, 427px));
    gap: clamp(1.5rem, 3vw, 2.75rem); /* 24px - 44px fluid */
    justify-content: space-between;
}

@media (max-width: 1440px) {
    .locations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .locations-section {
        height: auto;
        padding: clamp(2rem, 5vw, 4rem) 0; /* 32px - 64px fluid */
    }

    .locations-section>.container {
        padding: 0 1.5rem;
    }

    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    /* Center last card when odd number of cards - same width as other cards */
    .location-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: calc(50% - 0.75rem); /* Match other cards width (half minus half gap) */
    }
}

@media (max-width: 768px) {
    .locations-grid {
        grid-template-columns: 1fr;
    }

    /* Reset centering - full width on mobile */
    .location-card:last-child:nth-child(odd) {
        max-width: 100%;
    }
}

/* Location Card */
.location-card {
    width: clamp(280px, 22.24vw, 427px);
    height: 510px;

    /* Glassmorphism Styles (Matched to courses.html search) */
    background: rgb(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    border-radius: 20px;
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.location-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.location-map {
    position: relative;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--spacing-8) var(--spacing-8) var(--spacing-1) var(--spacing-8);
}

.map-illustration,
.map-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 1440px) {
    .location-card {
        width: 100%;
        height: auto;
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .location-card {
        min-height: auto;
    }

    .location-info {
        padding: var(--spacing-6); /* Reduced from --spacing-12 for tighter mobile layout */
    }
}

.map-logo {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: var(--fluid-small);
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
}

.location-info {
    padding: var(--spacing-12);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Location Card Typography - Fluid scaling */
.location-name {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-body-lg);
    font-weight: 400;
    line-height: var(--line-height-snug);
    color: #FFFFFF;
    margin-bottom: var(--spacing-1);
}

.location-company {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-body-lg);
    font-weight: 500;
    line-height: var(--line-height-snug);
    color: #FFFFFF;
    margin-bottom: var(--spacing-3);
}

.location-address {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-body);
    font-weight: 400;
    line-height: var(--line-height-relaxed);
    color: #FFFFFF;
    margin-bottom: var(--spacing-8);
    flex: 1;
}

.location-link {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-body-lg);
    font-weight: 500;
    line-height: var(--line-height-snug);
    color: #FFFFFF;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    transition: opacity var(--transition-fast);
}

.location-link:hover {
    opacity: 0.8;
}

/* ========================================
   PARTNERS SECTION
   ======================================== */

.partners-section {
    padding: clamp(2rem, 5vw, 4rem) 0; /* 32px - 64px fluid */
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.partners-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #E5E7EB 3px, transparent 3px);
    background-size: 58px 58px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.partners-section>.container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 0;
}

/* Partners Section Header - Fluid typography and spacing */
.partners-section .section-header.text-center {
    padding-top: clamp(2rem, 5vw, 6rem);  /* 32px - 96px fluid */
    margin-bottom: clamp(2rem, 4vw, 4rem); /* 32px - 64px fluid */
}

.partners-section .section-header.text-center .section-title {
    color: #041A31;
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--fluid-h2);
    font-weight: 400;
    line-height: var(--line-height-tight);
}

/* Partners Title - Fluid typography (24px - 56px) */
.partners-title {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-h2);
    font-weight: 400;
    line-height: var(--line-height-tight);
    color: #041A31;
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.partners-title-italic {
    font-family: var(--font-family-heading);
    font-size: var(--fluid-h2);
    font-weight: 400;
    line-height: var(--line-height-tight);
    color: #041A31;
    text-align: center;
}

/* Partners Slider */
.partners-slider {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.partners-track {
    display: flex;
    gap: var(--spacing-8);
    animation: partnersSlide 270s linear infinite;
    width: max-content;
}

.partners-slider:hover .partners-track {
    animation-play-state: paused;
}

@keyframes partnersSlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    background: transparent;
    transition: transform var(--transition-base);
    min-height: 80px;
    flex-shrink: 0;
}

.partner-logo:hover {
    transform: scale(1.05);
}

.partner-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #9CA3AF;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.partner-logo img {
    width: 200px;
    height: auto;
    object-fit: contain;
    transition: all var(--transition-base);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for accessibility */
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
    outline: none;
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid #666666;
    outline-offset: 2px;
}

.submit-btn:focus-visible {
    outline: 2px solid #666666;
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS

   Breakpoint Summary (avatar.md compliant):
   ─────────────────────────────────────────
   Desktop (default):
     - card-height: 125px
     - avatar-size: 127px (125 + 2)
     - avatar-offset: 63.5px

   Tablet (768px):
     - card-height: 115px
     - avatar-size: 117px
     - avatar-offset: 58.5px

   Small tablet/Phone (600px):
     - card-height: 100px
     - avatar-size: 102px
     - avatar-offset: 51px

   Mobile (400px):
     - Vertical stacked layout
     - Avatar centered above card
     - avatar-size: 80px
   ======================================== */

@media (max-width: 1024px) {
    .contact-hero {
        min-height: auto;
        padding: var(--spacing-12) 0;
    }
}

/* Tablet - general layout adjustments */
@media (max-width: 768px) {
    /* Card height for tablet - must accommodate icon + padding
       Icon: 56px, Padding: 25px*2=50px, Total: 106px minimum
       Using 115px to match staff card nicely */
    .contact-info {
        --card-height: 115px;
        --avatar-size: calc(var(--card-height) + 2px); /* 117px */
        --avatar-offset: calc(var(--avatar-size) / 2); /* 58.5px */
    }

    /* Remove max-width constraint so cards take full width on single-column layout */
    .contact-card,
    .staff-card {
        max-width: 100%;
    }

    .contact-hero {
        padding: var(--spacing-8) 0;
    }

    .contact-form-wrapper {
        padding: var(--spacing-6);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ensure both cards use the same height */
    .contact-card,
    .staff-card {
        min-height: var(--card-height);
        padding: 25px;
    }

    /* Scale down icon to fit within card height */
    .card-icon {
        width: 56px;
        height: 56px;
    }

    .card-icon svg {
        width: 32px;
        height: 24px;
    }

    /* Adjust staff card padding for avatar offset */
    .staff-card {
        padding: 25px 25px 25px calc(var(--avatar-offset) + 20px);
    }
}

/* Small tablets / large phones - scaled down cards */
@media (max-width: 768px) {
    /* Update CSS variables for smaller screens
       Maintaining avatar.md relationships:
       - avatar = card height + 2px
       - offset = avatar / 2 */
    .contact-info {
        --card-height: 100px;
        --avatar-size: calc(var(--card-height) + 2px); /* 102px */
        --avatar-offset: calc(var(--avatar-size) / 2); /* 51px */
    }

    /* Card height for small screens - must fit content
       Contact-card: icon 50px + padding 40px = 90px min
       Staff-card: needs ~100px for 3 lines of text at small font */
    .contact-card,
    .staff-card {
        min-height: var(--card-height);
    }

    /* Email card adjustments */
    .contact-card {
        padding: 20px;
        gap: 16px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
    }

    .card-icon svg {
        width: 28px;
        height: 20px;
    }

    /* Staff card padding adjustment */
    .staff-card {
        padding: 18px 18px 18px calc(var(--avatar-offset) + 12px);
    }

    /* Compact staff info for height matching */
    .staff-card-info {
        gap: 2px;
    }

    .staff-name {
        font-size: var(--fluid-small);
        line-height: var(--line-height-tight);
    }

    .staff-email a,
    .staff-phone a {
        font-size: var(--fluid-small);
        line-height: var(--line-height-snug);
        word-break: break-word;
    }
}

/* Small screens (376px-425px) - scaled down horizontal layout */
@media (max-width: 425px) {
    /* Scale down proportionally - keep avatar on left, rectangle on right */
    /* avatar.md rule 1: avatar-wrapper should be 2px larger than staff-card height */
    /* avatar.md rule 2: staff-card height = contact-card height */
    .contact-info {
        --card-height: 90px;
        --avatar-size: 92px; /* card-height (90px) + 2px per avatar.md rule 1 */
        --avatar-offset: calc(var(--avatar-size) / 2);
    }

    .contact-card {
        padding: 16px;
        min-height: var(--card-height);
    }

    .contact-card .icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .contact-card .icon-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .contact-email {
        font-size: var(--fluid-small);
    }

    /* Staff card keeps horizontal layout, scaled down */
    .staff-card {
        width: 100%;
        min-height: var(--card-height);
        padding: 16px 16px 16px calc(var(--avatar-offset) + 20px);
    }

    .staff-card-bg {
        left: var(--avatar-offset);
        border-radius: 16px;
    }

    .staff-card-avatar-wrapper {
        width: var(--avatar-size);
        height: var(--avatar-size);
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .staff-card-info {
        padding-left: 45px;
    }

    .staff-name {
        font-size: var(--fluid-small);
    }

    .staff-email a,
    .staff-phone a {
        font-size: var(--fluid-small);
    }

    /* Contact form fixes for narrow screens */
    .contact-form-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Stack all form rows vertically */
    .form-row {
        grid-template-columns: 1fr;
    }

    .form-group input:not(.phone-input input),
    .form-group select:not(.country-select),
    .form-group textarea {
       /*  width: 100%; */
        max-width: 100%;
        box-sizing: border-box;
    }

    .phone-input {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-2);
        width: 100%;
        box-sizing: border-box;
    }

    .country-select {
        width: 100px !important;
        min-width: 100px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .phone-input input {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        box-sizing: border-box;
    }

    /* Checkbox alignment fix */
    .checkbox-group {
        width: 100%;
        overflow: visible;
    }

    .checkbox-label {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .checkbox-label input[type="checkbox"] {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        margin-top: 3px;
    }

    .checkbox-label .checkmark {
        display: none;
    }

    .checkbox-text {
        flex: 1 1 0;
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .submit-btn {
        width: auto;
        min-width: 200px;
    }

    .submit-wrapper {
        justify-content: center;
    }
}

/* ========================================
   MOBILE BORDER RADIUS OVERRIDE
   All 20px border-radius becomes 10px at 768px and below
   ======================================== */
@media (max-width: 768px) {
    /* Hero section centering */
    .contact-info {
        align-items: center;
    }

    .contact-card,
    .staff-card {
        width: 100%;
        max-width: 400px;
    }

    /* Submit button centering */
    .submit-btn {
        width: auto;
        min-width: 200px;
    }

    .submit-wrapper {
        justify-content: center;
    }

    .contact-card {
        border-radius: 10px;
    }

    .staff-card-bg {
        border-radius: 10px;
    }

    .contact-form-wrapper {
        border-radius: 10px;
    }

    .location-card {
        border-radius: 10px;
    }

    .map-logo {
        border-radius: 10px;
    }
}

/* ========================================
   STAFF CARD VERTICAL LAYOUT - 410px and below
   Avatar centered on top, card below (avatar.md exception)
   Rectangle top at 22% from bottom of circle (78% of avatar above rectangle)
   ======================================== */
@media (max-width: 410px) {
    /* Shared rectangle height for both cards */
    .contact-card,
    .staff-card {
        --card-rect-height: 125px;
    }

    .staff-card {
        flex-direction: column;
        align-items: center;
        height: calc(var(--avatar-size) * 0.78 + var(--card-rect-height));
        padding: 0;
        padding-top: calc(var(--avatar-size) * 0.78);
        margin-top: 0;
    }

    .staff-card-bg {
        left: 0;
        top: calc(var(--avatar-size) * 0.78);
        right: 0;
        height: var(--card-rect-height);
        bottom: auto;
    }

    .staff-card-avatar-wrapper {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .staff-card-info {
        padding: calc(var(--avatar-size) * 0.22) 12px 0;
        text-align: center;
        width: 100%;
        height: var(--card-rect-height);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .staff-name {
        font-size: var(--fluid-small);
        margin-bottom: 2px;
    }

    .staff-email,
    .staff-phone {
        justify-content: center;
    }

    .staff-email a,
    .staff-phone a {
        font-size: var(--fluid-small);
    }

    /* Contact card - icon moves up like avatar */
    .contact-card {
        flex-direction: column;
        align-items: center;
        height: calc(var(--avatar-size) * 0.78 + var(--card-rect-height));
        padding: 0;
        padding-top: calc(var(--avatar-size) * 0.78);
        margin-top: 0;
        position: relative;
        background: transparent;
        box-shadow: none;
    }

    /* Rectangle background via pseudo-element */
    .contact-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: calc(var(--avatar-size) * 0.78);
        right: 0;
        height: var(--card-rect-height);
        bottom: auto;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.25);
        mix-blend-mode: plus-darker;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
        z-index: 0;
    }

    .card-icon {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        z-index: 20;
        width: var(--avatar-size);
        height: var(--avatar-size);
    }

    .card-icon svg {
        width: 50%;
        height: auto;
    }

    .card-email {
        position: absolute;
        top: calc(var(--avatar-size) * 0.78);
        left: 0;
        right: 0;
        z-index: 10;
        padding: 0;
        text-align: center;
        width: 100%;
        height: 80px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fluid-small);
    }

    /* Shrink email card height */
    .email-card {
        --card-rect-height: 80px;
        height: calc(var(--avatar-size) * 0.78 + 80px);
    }
}