.sf-contact-page {
    min-height: 82vh;
    padding: 72px 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.95), transparent 32%),
        radial-gradient(circle at 85% 10%, rgba(210, 226, 255, 0.75), transparent 30%),
        linear-gradient(135deg, #f7f8fb 0%, #eef1f6 48%, #ffffff 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    overflow: hidden;
}

.sf-contact-page::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(120, 120, 255, 0.10);
    filter: blur(18px);
    top: -160px;
    right: -120px;
    pointer-events: none;
}

.sf-contact-page::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    filter: blur(24px);
    bottom: -140px;
    left: -120px;
    pointer-events: none;
}

.sf-contact-shell {
    position: relative;
    z-index: 2;
}

.sf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    color: #5f6673;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sf-contact-title {
    font-size: clamp(38px, 6vw, 74px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.sf-contact-subtitle {
    max-width: 720px;
    margin: 0 auto 36px auto;
    color: #667085;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
}

.sf-glass-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 34px;
    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.sf-form-card {
    padding: 34px;
}

.sf-side-card {
    padding: 30px;
    height: 100%;
    position: sticky;
    top: 24px;
}

.sf-card-title {
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -0.03em;
    color: #111827;
    margin-bottom: 8px;
}

.sf-card-text {
    color: #667085;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.sf-contact-page .s_website_form_field {
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.sf-contact-page .s_website_form_field .row {
    display: block;
    margin: 0;
}

.sf-contact-page .s_website_form_label {
    width: auto !important;
    display: block;
    padding: 0;
    margin-bottom: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sf-contact-page .s_website_form_mark {
    color: #b42318;
    margin-left: 3px;
}

.sf-contact-page .form-control {
    min-height: 50px;
    border-radius: 17px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: #111827;
    font-size: 15px;
    padding: 12px 15px;
    transition: all 0.22s ease;
}

.sf-contact-page textarea.form-control {
    min-height: 132px;
    resize: vertical;
}

.sf-contact-page .form-control:focus {
    border-color: rgba(0, 113, 227, 0.42);
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(0, 113, 227, 0.10),
        0 12px 26px rgba(15, 23, 42, 0.08);
    outline: none;
}

.sf-contact-page .s_website_form_submit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.sf-contact-page .s_website_form_submit .s_website_form_label {
    display: none;
}

.sf-contact-page .s_website_form_send,
.sf-ticket-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 28px;
    border-radius: 999px;
    border: 0;
    background: #111827;
    color: #ffffff !important;
    font-weight: 760;
    letter-spacing: -0.02em;
    text-decoration: none !important;
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.sf-contact-page .s_website_form_send:hover,
.sf-ticket-button:hover {
    transform: translateY(-2px);
    background: #000000;
    box-shadow: 0 24px 46px rgba(17, 24, 39, 0.28);
}

.sf-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sf-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    color: #475467;
    font-size: 15px;
    line-height: 1.45;
}

.sf-info-list li:last-child {
    border-bottom: 0;
}

.sf-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.06);
    color: #111827;
    flex: 0 0 auto;
}

.sf-signedin-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 44px;
    text-align: center;
}

.sf-signedin-title {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 820;
    color: #111827;
    margin-bottom: 16px;
}

.sf-signedin-text {
    color: #667085;
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 26px;
}

@media (max-width: 991.98px) {
    .sf-contact-page {
        padding: 46px 0;
    }

    .sf-form-card,
    .sf-side-card,
    .sf-signedin-card {
        padding: 24px;
        border-radius: 26px;
    }

    .sf-side-card {
        position: static;
        margin-top: 18px;
    }

    .sf-contact-title {
        letter-spacing: -0.045em;
    }
}

@media (max-width: 575.98px) {
    .sf-contact-page {
        padding: 34px 0;
    }

    .sf-contact-subtitle {
        margin-bottom: 24px;
    }

    .sf-form-card,
    .sf-side-card,
    .sf-signedin-card {
        padding: 20px;
        border-radius: 24px;
    }

    .sf-contact-page .form-control {
        min-height: 48px;
        border-radius: 15px;
    }

    .sf-contact-page .s_website_form_send,
    .sf-ticket-button {
        width: 100%;
    }
}
* { box-sizing: border-box; }
body { margin: 0; color: #111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: #24527a; }
.sf-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px max(24px, calc((100vw - 1160px)/2)); background:#fff; border-bottom:1px solid #eef1f6; }
.sf-brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; text-decoration:none; color:#182b40; }
.sf-brand img { width:46px; height:46px; object-fit:contain; }
.sf-header nav { display:flex; flex-wrap:wrap; gap:20px; }
.sf-contact-shell { max-width:1160px; padding:0 24px; margin:auto; }
.sf-intro { text-align:center; }
.sf-contact-title { margin-top:0; }
.sf-contact-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:28px; align-items:start; }
.sf-card-title { margin-top:0; }
.sf-field { margin-bottom:18px; }
.sf-field label { display:block; margin-bottom:8px; color:#344054; font-size:13px; font-weight:700; }
.sf-field input, .sf-field textarea { width:100%; }
.sf-login-card { max-width:520px; margin:0 auto; padding:36px; }
.sf-login-card input:not([type="hidden"]) { min-height:52px; padding:12px 15px; border:1px solid rgba(15,23,42,.10); border-radius:17px; background:rgba(255,255,255,.82); color:#111827; font:inherit; }
.sf-login-card .sf-ticket-button { width:100%; cursor:pointer; font-size:16px; }
.sf-login-recovery { margin:4px 0 24px; font-size:14px; }
.sf-login-request { text-align:center; margin:28px 0 0; }
.sf-login-card [hidden] { display:none!important; }
.sf-login-card [data-recognition-status]:empty { display:none; }
.sf-login-card form .sf-field input.is-recognized:not([type="hidden"]) {
    border-color:rgba(34,139,76,.55);
    box-shadow:0 0 0 3px rgba(34,139,76,.10),0 5px 22px rgba(34,139,76,.14);
}
.sf-login-card form .sf-field input.is-unrecognized:not([type="hidden"]) {
    border-color:rgba(180,35,24,.65);
    box-shadow:0 0 0 3px rgba(180,35,24,.10),0 5px 22px rgba(180,35,24,.10);
}
.sf-login-card form:has(input.is-unrecognized) [data-recognition-status] { color:#b42318; }
.sf-password-reveal { animation:sf-password-fade-in 320ms ease-out both; }
[data-setup-fields]:not([hidden]) { animation:sf-password-fade-in 320ms ease-out both; }
@keyframes sf-password-fade-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
    .sf-password-reveal, [data-setup-fields]:not([hidden]) { animation:none; }
}
@media(max-width:575.98px) { .sf-login-card { padding:24px 20px; border-radius:24px; } .sf-header { flex-wrap:wrap; } }
.sf-required, .errorlist { color:#b42318; }
.errorlist { padding-left:20px; font-size:14px; }
.sf-field small { display:block; margin-top:6px; color:#667085; }
.sf-address-parts { display:grid; gap:8px; margin-top:10px; }
.sf-address-suggestions { margin-top:8px; }
.sf-address-suggestions gmp-place-autocomplete { display:block; width:100%; }
.sf-manual-address { margin-top:8px; padding:0; border:0; background:none; color:#0758a5; font:inherit; text-decoration:underline; cursor:pointer; }
.sf-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.sf-note { color:#667085; font-size:13px; line-height:1.6; }
.sf-ticket-button:disabled { cursor:wait; opacity:.8; }
.sf-ticket-button.is-sending::before { content:""; display:inline-block; width:14px; height:14px; margin-right:10px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; vertical-align:-2px; animation:sf-submit-spin .75s linear infinite; }
.sf-submit-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes sf-submit-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .sf-ticket-button.is-sending::before { animation:none; } }
.sf-info-list a { overflow-wrap:anywhere; }
.sf-info-icon { font-size:18px; }
.sf-footer { text-align:center; padding:28px 20px; color:#667085; font-size:13px; }
.sf-signedin-title { margin-top:12px; }
.sf-skip { position:absolute;left:-10000px; } .sf-skip:focus { left:16px;top:16px;z-index:5;background:white;padding:10px; }
:focus-visible { outline:3px solid #0071e3;outline-offset:4px; }
@media(max-width:991.98px) { .sf-contact-grid { grid-template-columns:1fr; } .sf-side-card { position:static;margin-top:0; } .sf-header { padding:16px 20px; } .sf-brand { font-size:16px; } .sf-header nav { gap:12px;font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .sf-contact-page *, .sf-ticket-button { transition:none!important;transform:none!important; } }

/* Native cross-document transitions keep links, forms and browser history intact.
   Browsers without this feature continue with normal page navigation. */
@view-transition { navigation: auto; }
/* Login arrivals also animate across the customer and staff origins. */
.sf-contact-shell:has(.sf-login-card) { animation: sf-login-arrive 320ms ease-out both; }
.sf-contact-shell.sf-login-leaving { animation: sf-login-depart 180ms ease-in both; }
@keyframes sf-login-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes sf-login-depart { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-5px); } }
@media(prefers-reduced-motion:reduce) {
    .sf-contact-shell:has(.sf-login-card), .sf-contact-shell.sf-login-leaving { animation: none; }
}
::view-transition-old(root) { animation: sf-page-out 180ms ease-in both; }
::view-transition-new(root) { animation: sf-page-in 220ms ease-out both; }
@keyframes sf-page-out {
    to { opacity: 0; filter: blur(2px); transform: translateY(-3px) scale(.997); }
}
@keyframes sf-page-in {
    from { opacity: 0; filter: blur(3px); transform: translateY(5px) scale(.997); }
    to { opacity: 1; filter: blur(0); transform: none; }
}
.sf-form-card, .sf-login-card {
    transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease;
}
.sf-field input:not([type="hidden"]), .sf-field textarea {
    transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .sf-form-card:hover, .sf-login-card:hover {
        transform: scale(1.008);
        box-shadow: 0 28px 76px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.95);
    }
    .sf-field input:not([type="hidden"]):not(:disabled):hover,
    .sf-field textarea:not(:disabled):hover {
        transform: scale(1.012);
        border-color: rgba(0,113,227,.3);
        box-shadow: 0 6px 20px rgba(15,23,42,.06);
    }
    .sf-ticket-button:not(:disabled):hover { transform: translateY(-2px) scale(1.01); }
    .sf-ticket-button:not(:disabled):active { transform: scale(.985); }
}
.sf-ticket-button:disabled:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


.sf-account-card { margin-top:32px; }
.sf-account-card p { color:#667085; line-height:1.6; }
.sf-account-card label { display:block; margin:16px 0 8px; font-size:14px; font-weight:600; color:#344054; }
.sf-account-card input:not([type="hidden"]), .sf-account-card select { width:100%; }
.sf-account-card select { padding:12px; border:1px solid #d0d5dd; border-radius:17px; background:#fff; font:inherit; }
.sf-account-card fieldset { border:0; padding:16px 0; margin:0; min-width:0; }
.sf-account-card button { margin-top:12px; }
.sf-account-card input:not([type="hidden"]) { transition:transform 220ms ease, box-shadow 220ms ease; }
@media (hover:hover) and (pointer:fine) { .sf-account-card input:not([type="hidden"]):hover { transform:scale(1.012); box-shadow:0 6px 20px rgba(15,23,42,.06); } }
