/* =========================================================
   CLICK2CLAIMHELP
   CONTACT PAGE
========================================================= */

:root {
    --contact-navy: #082d63;
    --contact-blue: #2563eb;
    --contact-indigo: #4338ca;
    --contact-red: #dc2626;
    --contact-red-dark: #b91c1c;

    --contact-text: #0f172a;
    --contact-muted: #64748b;

    --contact-border: #e2e8f0;

    --contact-light: #f8fafc;
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.contact-breadcrumb {
    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;
}

.contact-breadcrumb nav {
    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #64748b;

    font-size: 13px;
}

.contact-breadcrumb a {
    color: #2563eb;

    text-decoration: none;

    font-weight: 700;
}

.contact-breadcrumb a:hover {
    color: #dc2626;
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #15428569;
}


/* Background Image */

.contact-hero-bg {
    position: absolute;

    inset: 0;

    background-image:
        url("/assets/c7a6b320-0830-48c1-92b4-39ebcca99035.png");

    background-size: cover;
    background-position: center right;

    transform: scale(1.02);
}


/* Dark overlay */

/* Lighter dark overlay */
.contact-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 31, 72, 0.78) 0%,
            rgba(4, 31, 72, 0.68) 30%,
            rgba(4, 31, 72, 0.42) 58%,
            rgba(4, 31, 72, 0.12) 100%);

    z-index: 1;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.contact-hero-inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(360px, .85fr);

    align-items: center;

    gap: 70px;

    padding-top: 70px;
    padding-bottom: 70px;
}


.contact-hero-content {
    color: #ffffff;
}

.contact-eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 18px;
    padding: 8px 14px;

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .10);

    color: #bfdbfe;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}


.contact-hero-content h1 {
    max-width: 700px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(40px, 5vw, 64px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -.045em;
}


.contact-hero-content h1 span {
    display: block;

    background:
        linear-gradient(90deg,
            #60a5fa,
            #bfdbfe);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.contact-hero-description {
    max-width: 650px;

    margin: 25px 0 30px;

    color: #dbeafe;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.contact-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;
}


.contact-primary-btn,
.contact-call-btn {
    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 23px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.contact-primary-btn {
    color: #ffffff;

    background:
        linear-gradient(135deg,
            #2563eb,
            #4338ca);

    box-shadow:
        0 10px 25px rgba(37, 99, 235, .30);
}


.contact-primary-btn:hover {
    background:
        linear-gradient(135deg,
            #dc2626,
            #ef4444);

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(220, 38, 38, .30);
}


.contact-call-btn {
    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, .40);

    background:
        rgba(255, 255, 255, .10);

    backdrop-filter: blur(8px);
}


.contact-call-btn:hover {
    background: #ffffff;

    color: #082d63;

    transform: translateY(-2px);
}


.phone-icon {
    font-size: 18px;
}


/* =========================================================
   TRUST ROW
========================================================= */

.contact-trust-row {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 28px;
}


.contact-trust-row div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #dbeafe;

    font-size: 12px;

    font-weight: 600;
}


.contact-trust-row span {
    width: 20px;
    height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #0f766e;

    color: #ffffff;

    font-size: 11px;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.contact-hero-card {
    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, .35);

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .96);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .22);

    backdrop-filter: blur(15px);
}


.contact-card-label {
    color: #dc2626;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .13em;
}


.contact-card-top h2 {
    margin: 8px 0 6px;

    color: #0f172a;

    font-size: 28px;

    font-weight: 900;
}


.contact-card-top p {
    margin: 0 0 22px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   CONTACT METHODS
========================================================= */

.contact-method {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px;

    margin-top: 10px;

    border:
        1px solid #e2e8f0;

    border-radius: 14px;

    color: #0f172a;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


a.contact-method:hover {
    transform: translateY(-2px);

    border-color: #93c5fd;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .08);
}


.contact-method-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #dc2626,
            #ef4444);

    font-size: 19px;

    font-weight: 800;
}


.contact-method-icon.blue {
    color: #1d4ed8;

    background: #dbeafe;
}


.contact-method-icon.red {
    color: #dc2626;

    background: #fee2e2;
}


.contact-method-content {
    flex: 1;
}


.contact-method-content span {
    display: block;

    margin-bottom: 3px;

    color: #64748b;

    font-size: 11px;

    font-weight: 700;
}


.contact-method-content strong {
    display: block;

    color: #0f172a;

    font-size: 15px;

    font-weight: 800;
}


.contact-method-content small {
    display: block;

    margin-top: 2px;

    color: #94a3b8;

    font-size: 11px;
}


.method-arrow {
    color: #2563eb;

    font-size: 18px;

    font-weight: 800;
}


.contact-card-disclaimer {
    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid #e2e8f0;

    color: #94a3b8;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   CONTACT OPTIONS
========================================================= */

.contact-options-section {
    padding: 90px 20px;

    background: #f8fafc;
}


.contact-section-heading {
    max-width: 700px;

    margin: 0 auto 45px;

    text-align: center;
}


.contact-section-heading>span {
    color: #dc2626;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .13em;
}


.contact-section-heading h2 {
    margin: 10px 0 12px;

    color: #0f2d5c;

    font-size: 40px;

    font-weight: 900;
}


.contact-section-heading p {
    margin: 0;

    color: #64748b;

    line-height: 1.7;
}


.contact-options-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.contact-option-card {
    padding: 30px;

    background: #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, .05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.contact-option-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, .09);
}


.option-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #2563eb,
            #4338ca);

    font-weight: 900;
}


.contact-option-card:nth-child(2) .option-icon {
    background:
        linear-gradient(135deg,
            #dc2626,
            #ef4444);
}


.contact-option-card h3 {
    margin: 0 0 10px;

    color: #0f172a;

    font-size: 19px;

    font-weight: 800;
}


.contact-option-card p {
    min-height: 75px;

    margin: 0 0 20px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.65;
}


.contact-option-card a {
    color: #2563eb;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;
}


.contact-option-card a:hover {
    color: #dc2626;
}


/* =========================================================
   FINAL CTA
========================================================= */

.contact-final-cta {
    padding: 70px 20px;

    background:
        linear-gradient(120deg,
            #082d63,
            #1e40af);
}


.contact-final-cta .contact-container {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.contact-final-content>span {
    color: #93c5fd;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;
}


.contact-final-content h2 {
    margin: 8px 0;

    color: #ffffff;

    font-size: 36px;

    font-weight: 900;
}


.contact-final-content p {
    margin: 0;

    color: #dbeafe;

    font-size: 15px;
}


.contact-final-btn {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 55px;

    padding: 0 27px;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #dc2626,
            #ef4444);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .20);

    transition:
        transform .25s ease;
}


.contact-final-btn:hover {
    transform: translateY(-3px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .contact-hero-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .contact-hero {
        min-height: auto;
    }

    .contact-hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(4, 31, 72, .95),
                rgba(4, 31, 72, .82));
    }

    .contact-hero-content {
        text-align: center;
    }

    .contact-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-hero-actions {
        justify-content: center;
    }

    .contact-trust-row {
        justify-content: center;
    }

    .contact-options-grid {
        grid-template-columns: 1fr;
    }

    .contact-option-card p {
        min-height: auto;
    }

    .contact-final-cta .contact-container {
        flex-direction: column;

        text-align: center;
    }

}


@media (max-width: 600px) {

    .contact-container {
        width: min(100% - 28px, 1180px);
    }

    .contact-hero-inner {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .contact-hero-content h1 {
        font-size: 39px;
    }

    .contact-hero-description {
        font-size: 15px;
    }

    .contact-hero-actions {
        flex-direction: column;
    }

    .contact-primary-btn,
    .contact-call-btn {
        width: 100%;
    }

    .contact-hero-card {
        padding: 20px;

        border-radius: 20px;
    }

    .contact-section-heading h2 {
        font-size: 31px;
    }

    .contact-options-section {
        padding: 65px 16px;
    }

    .contact-final-content h2 {
        font-size: 29px;
    }

    .contact-final-btn {
        width: 100%;
    }

}