:root {
    --contact-ink: #0f172a;
    --contact-muted: #607089;
    --contact-line: #dce4ef;
    --contact-blue: #2357d9;
    --contact-cyan: #14b8a6;
    --contact-sun: #f6b94a;
    --contact-paper: #ffffff;
    --contact-mist: #f3f7fb;
}

.contact-page {
    color: var(--contact-ink);
    overflow: hidden;
    background:
        linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
        var(--contact-mist);
    background-size: 34px 34px;
}

.contact-hero {
    position: relative;
    isolation: isolate;
    padding: 78px 0 150px;
    overflow: hidden;
    background: #0b1733;
}

.contact-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 90px;
    background: var(--contact-mist);
    clip-path: polygon(0 72%, 63% 100%, 100% 36%, 100% 100%, 0 100%);
    z-index: -1;
}

.contact-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.contact-eyebrow,
.contact-card-kicker,
.contact-form-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #75e2d2;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.contact-eyebrow::before,
.contact-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.contact-hero h1 {
    max-width: 900px;
    margin: 22px auto 18px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(2.7rem, 5.8vw, 5.4rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.contact-hero h1 em {
    color: var(--contact-sun);
    font-weight: 500;
}

.contact-hero > .contact-hero-inner > p {
    max-width: 690px;
    margin: 0 auto;
    color: #afbdd4;
    font-size: 1.08rem;
    line-height: 1.7;
}

.contact-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0.7;
    z-index: -1;
}

.contact-orb-one {
    width: 390px;
    height: 390px;
    top: -230px;
    left: -100px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.5), transparent 68%);
}

.contact-orb-two {
    width: 500px;
    height: 500px;
    right: -230px;
    bottom: -260px;
    background: radial-gradient(circle, rgba(35, 87, 217, 0.72), transparent 66%);
}

.contact-quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 970px;
    margin: 44px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
}

.contact-quick-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 22px;
    color: white;
    text-align: left;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 180ms ease, transform 180ms ease;
}

.contact-quick-link:last-child { border-right: 0; }
.contact-quick-link:hover { color: white; background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }

.contact-quick-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #092331;
    border-radius: 12px;
    background: #75e2d2;
}

.contact-quick-link span:last-child { display: flex; min-width: 0; flex-direction: column; }
.contact-quick-link small { color: #9cacc4; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-quick-link strong { margin-top: 2px; overflow: hidden; font-size: 0.98rem; text-overflow: ellipsis; white-space: nowrap; }

.contact-workspace { padding: 0 0 100px; }

.contact-tabs {
    position: relative;
    z-index: 3;
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: -30px auto 42px;
    padding: 7px;
    border: 1px solid var(--contact-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.contact-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 210px;
    padding: 13px 22px;
    color: #55647a;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.contact-tab:hover { color: var(--contact-blue); }
.contact-tab.active,
.contact-tab.active:hover,
.contact-tab.active:visited {
    color: white !important;
    background: var(--contact-blue);
    box-shadow: 0 8px 22px rgba(35, 87, 217, 0.28);
}

.contact-panel { opacity: 0; transform: translateY(8px); transition: opacity 240ms ease, transform 240ms ease; }
.contact-panel.is-visible { opacity: 1; transform: translateY(0); }

.contact-panel-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.18fr);
    max-width: 1160px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--contact-line);
    border-radius: 28px;
    background: var(--contact-paper);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.1);
}

.contact-story-card {
    position: relative;
    padding: 52px 46px;
    color: white;
    overflow: hidden;
    background: radial-gradient(circle at 10% 100%, rgba(20, 184, 166, 0.28), transparent 38%), #13213d;
}

.contact-story-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -105px;
    right: -90px;
    border: 32px solid rgba(246, 185, 74, 0.15);
    border-radius: 50%;
}

.contact-story-card h2 { margin: 18px 0 16px; font-family: "Playfair Display", serif; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.08; }
.contact-story-card > p { color: #afbdd4; line-height: 1.7; }
.contact-promise-list { display: grid; gap: 24px; margin-top: 38px; }
.contact-promise { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; }

.contact-promise > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #10203b;
    border-radius: 50%;
    background: var(--contact-sun);
    font-size: 0.72rem;
    font-weight: 800;
}

.contact-promise strong, .contact-promise small { display: block; }
.contact-promise strong { font-size: 1rem; }
.contact-promise small { margin-top: 4px; color: #aebbd0; font-size: 0.86rem; line-height: 1.5; }

.contact-response-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 42px;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.contact-response-note i { color: #75e2d2; }
.contact-response-note span, .contact-response-note strong { display: block; }
.contact-response-note span { color: #afbdd4; font-size: 0.85rem; }
.contact-response-note strong { color: white; }
.partner-story-card { background: radial-gradient(circle at 0 100%, rgba(246, 185, 74, 0.22), transparent 36%), #102e35; }

.partner-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; }
.partner-metric-row div { padding: 15px 10px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; }
.partner-metric-row strong, .partner-metric-row span { display: block; }
.partner-metric-row span { color: #9fb8bc; font-size: 0.72rem; text-transform: uppercase; }

.contact-form-card { padding: 50px 54px 42px; }
.contact-form-heading > span { color: var(--contact-blue); }
.contact-form-heading h2 { margin: 9px 0 4px; font-family: "Playfair Display", serif; font-size: 2.15rem; font-weight: 600; }
.contact-form-heading p { margin: 0; color: var(--contact-muted); font-size: 0.88rem; }

.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 18px; margin-top: 30px; }
.contact-field-full { grid-column: 1 / -1; }
.contact-field-group label { display: block; margin-bottom: 7px; color: #23324b; font-size: 0.86rem; font-weight: 600; }
.contact-input-wrap { position: relative; }
.contact-input-wrap > i { position: absolute; top: 50%; left: 16px; z-index: 2; color: #8a99ae; transform: translateY(-50%); }
.contact-input-wrap .contact-field { padding-left: 44px; }

.contact-page .contact-field {
    min-height: 50px;
    padding: 12px 15px;
    color: var(--contact-ink);
    border: 1px solid #d5deea;
    border-radius: 11px;
    background: #f9fbfd;
    font-family: "Hind", sans-serif;
    font-weight: 400;
    box-shadow: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.contact-page textarea.contact-field { min-height: 116px; resize: vertical; }
.contact-page .contact-field:focus { border-color: var(--contact-blue); background: white; box-shadow: 0 0 0 4px rgba(35, 87, 217, 0.11); }
.contact-page .contact-field::placeholder { color: #98a5b7; }
.contact-error { display: block; min-height: 18px; padding-top: 4px; color: #c93636 !important; font-size: 0.77rem; }

.contact-captcha { display: grid; grid-template-columns: 138px 1fr auto; gap: 9px; }
.contact-captcha-question { display: flex; min-height: 50px; align-items: center; justify-content: center; color: #173d50; border: 1px dashed #83bcb5; border-radius: 11px; background: #eaf9f6; font-family: "Playfair Display", serif; font-size: 1.06rem; font-weight: 700; }
.contact-captcha-refresh { display: inline-flex; min-height: 50px; padding: 0 15px; align-items: center; gap: 8px; color: #34445d; border: 1px solid #d5deea; border-radius: 11px; background: white; font-size: 0.82rem; font-weight: 600; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; }
.contact-captcha-refresh:hover { color: var(--contact-blue); border-color: #aebfe5; background: #f4f7ff; }

.contact-submit { display: flex; width: 100%; min-height: 54px; margin-top: 25px; padding: 0 22px; align-items: center; justify-content: space-between; color: white; border: 0; border-radius: 12px; background: var(--contact-blue); box-shadow: 0 13px 28px rgba(35, 87, 217, 0.24); font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.contact-submit:hover { background: #1949c2; box-shadow: 0 16px 32px rgba(35, 87, 217, 0.3); transform: translateY(-2px); }
.contact-submit:disabled { cursor: wait; opacity: 0.72; transform: none; }
.contact-privacy { display: flex; margin: 15px 0 0; align-items: center; justify-content: center; gap: 7px; color: #7b899d; font-size: 0.78rem; }
.contact-privacy i { color: var(--contact-cyan); }

.contact-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }

@media (max-width: 991.98px) {
    .contact-hero { padding-top: 58px; }
    .contact-quick-links { max-width: 640px; grid-template-columns: 1fr; }
    .contact-quick-link { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .contact-quick-link:last-child { border-bottom: 0; }
    .contact-panel-grid { grid-template-columns: 1fr; max-width: 760px; }
    .contact-story-card, .contact-form-card { padding: 42px; }
}

@media (max-width: 575.98px) {
    .contact-hero { padding: 44px 0 125px; }
    .contact-hero h1 { font-size: 2.55rem; }
    .contact-hero > .contact-hero-inner > p { font-size: 0.96rem; }
    .contact-quick-links { margin-top: 30px; }
    .contact-workspace { padding-bottom: 64px; }
    .contact-tabs { width: 100%; margin-bottom: 25px; border-radius: 16px; }
    .contact-tab { min-width: 0; flex: 1; padding: 11px 8px; border-radius: 11px; font-size: 0.78rem; }
    .contact-panel-grid { border-radius: 20px; }
    .contact-story-card, .contact-form-card { padding: 31px 23px; }
    .contact-story-card h2 { font-size: 2.05rem; }
    .contact-form-heading h2 { font-size: 1.8rem; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .contact-field-full { grid-column: auto; }
    .contact-captcha { grid-template-columns: 1fr 1fr; }
    .contact-captcha-refresh { grid-column: 1 / -1; justify-content: center; }
    .partner-metric-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-panel, .contact-tab, .contact-quick-link, .contact-submit, .contact-captcha-refresh { transition: none; }
}
