:root {
    --contact-ink: #17222d;
    --contact-muted: #637184;
    --contact-navy: #173b4f;
    --contact-navy-deep: #0b2534;
    --contact-teal: #0e7c78;
    --contact-line: #d9e2e7;
}

.contact-page {
    min-height: 100vh;
    margin: 0;
    color: var(--contact-ink);
    font-family: "Aptos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at 82% 8%, rgba(229,183,81,.2), transparent 25%), linear-gradient(180deg,#fffdf8,#eef5f4);
}

.contact-page-shell { width: min(1040px, calc(100vw - 40px)); margin: 0 auto; padding: 22px 0 52px; }
.contact-header,.contact-auth-header { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px; }
.contact-brand { display:flex;align-items:center;gap:11px;color:var(--contact-navy-deep);font-size:21px;font-weight:800;text-decoration:none; }
.contact-brand > img.contact-brand-logo { display:block;width:36px;height:36px;max-width:36px;max-height:36px;object-fit:contain;flex:0 0 36px; }
.contact-nav { display:flex;gap:16px; }
.contact-nav a { color:var(--contact-navy);font-weight:700;text-decoration:none; }
.contact-layout { display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);gap:34px;align-items:start; }
.contact-intro { padding:36px 8px; }
.contact-eyebrow { margin-bottom:8px;color:var(--contact-teal);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.contact-intro h1,.contact-auth-header h1 { margin:0;color:var(--contact-navy-deep);font-size:38px;line-height:46px; }
.contact-intro p,.contact-auth-header p { color:var(--contact-muted);font-size:16px;line-height:25px; }
.contact-support-address { margin-top:22px;padding:14px 16px;border:1px solid #cfe0df;border-radius:8px;background:#f3fbfa;color:#36565a; }
.contact-support-address a { color:var(--contact-teal);font-weight:700; }
.contact-card { padding:26px;border:1px solid var(--contact-line);border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(20,31,42,.11); }
.contact-card h2 { margin:0;color:var(--contact-navy-deep);font-size:23px; }
.contact-card-copy { margin:5px 0 20px;color:var(--contact-muted); }
.contact-form { display:grid;gap:16px; }
.contact-field label { display:block;margin-bottom:6px;color:#304955;font-size:13px;font-weight:700; }
.contact-field input,.contact-field textarea { width:100%;padding:10px 11px;border:1px solid #b9cbd3;border-radius:7px;background:#fff;color:#243944;font:inherit;box-sizing:border-box; }
.contact-field input { height:43px; }
.contact-field textarea { min-height:150px;resize:vertical;line-height:22px; }
.contact-field input:focus,.contact-field textarea:focus { border-color:var(--contact-teal);outline:3px solid rgba(14,124,120,.14);outline-offset:1px; }
.contact-recaptcha-field { min-height:82px;overflow:visible; }
.contact-recaptcha-widget { min-height:82px;overflow:visible; }
.contact-recaptcha-unavailable { padding:12px 14px;border:1px solid #e2abab;border-radius:7px;background:#fff2f2;color:#842f2f;font-size:13px;line-height:20px; }
.contact-submit { min-height:44px;padding:10px 18px;border:0;border-radius:7px;background:linear-gradient(135deg,var(--contact-teal),#176d7a);color:#fff;font-weight:800;cursor:pointer; }
.contact-submit:disabled { cursor:not-allowed;opacity:.65; }
.contact-submit:hover,.contact-submit:focus { background:var(--contact-navy);outline:3px solid rgba(23,59,79,.18);outline-offset:2px; }
.contact-validation,.contact-validation-summary { display:block;margin-top:5px;color:#8a3030;font-size:12px;line-height:18px; }
.contact-validation-summary ul { margin:0;padding-left:18px; }
.contact-message { margin:16px 0;padding:12px 14px;border:1px solid #c9d9e1;border-radius:7px;background:#f7fafb;color:#334a57; }
.contact-message.success { border-color:#9bd3b7;background:#effbf4;color:#216342; }
.contact-message.danger { border-color:#e2abab;background:#fff2f2;color:#842f2f; }
.contact-website-field { position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important; }
.contact-page-authenticated { padding:12px 0 40px; }
.contact-auth-header { padding:20px;border:1px solid #d7e3ec;border-radius:10px;background:linear-gradient(135deg,#fff,#edf7f7);box-shadow:0 8px 22px rgba(15,23,42,.055); }
.contact-auth-header h1 { font-size:28px;line-height:35px; }
.contact-auth-header p { margin:5px 0 0;font-size:14px;line-height:21px; }
.contact-card-authenticated { max-width:760px;margin:0 auto; }
.contact-account-context { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 22px; }
.contact-account-context div { padding:12px;border:1px solid #d9e3e8;border-radius:7px;background:#f7fafb; }
.contact-account-context span,.contact-account-context strong { display:block; }
.contact-account-context span { margin-bottom:3px;color:#687a85;font-size:11px;text-transform:uppercase;letter-spacing:.04em; }
.contact-account-context strong { color:#243944;font-size:14px;overflow-wrap:anywhere; }

@media (max-width: 780px) {
    .contact-layout { grid-template-columns:1fr;gap:18px; }
    .contact-intro { padding:14px 0; }
    .contact-header,.contact-auth-header { align-items:flex-start;flex-direction:column; }
}

@media (max-width: 520px) {
    .contact-page-shell { width:min(100% - 20px,1040px);padding-top:12px; }
    .contact-card { padding:18px; }
    .contact-intro h1,.contact-auth-header h1 { font-size:30px;line-height:38px; }
    .contact-account-context { grid-template-columns:1fr; }
}

@media (max-width: 360px) {
    .contact-recaptcha-widget { overflow-x:auto;overflow-y:hidden; }
}