/* Extracted from pages/contact-us.php */
:root {
            --contact-navy: #0f2744;
            --contact-red: #c62828;
            --contact-border: #dbe2ea;
            --contact-muted: #64748b;
            --contact-bg: #f5f7fa;
            --contact-gold: #c9a84c;
        }
        body { background: var(--contact-bg); }
        .contact-page { padding: 42px 18px 64px; }
        .contact-shell { max-width: 1120px; margin: 0 auto; }
        .contact-hero {
            background: linear-gradient(135deg, var(--contact-navy), #173d66);
            color: #fff;
            border-radius: 8px;
            padding: clamp(26px, 5vw, 48px);
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }
        .contact-hero::after {
            content: '';
            position: absolute;
            inset: auto 0 0;
            height: 3px;
            background: linear-gradient(90deg, var(--contact-red), var(--contact-gold));
        }
        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #f8d56b;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .contact-hero h1 {
            margin: 0 0 8px;
            color: #fff;
            font-size: clamp(1.9rem, 4vw, 2.85rem);
            line-height: 1.1;
            letter-spacing: 0;
        }
        .contact-hero p {
            margin: 0;
            color: rgba(255,255,255,.82);
            max-width: 760px;
            font-size: 1rem;
            line-height: 1.65;
        }
        .contact-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
            gap: 22px;
            align-items: start;
        }
        .contact-panel, .contact-side {
            background: #fff;
            border: 1px solid var(--contact-border);
            border-radius: 8px;
            box-shadow: 0 16px 38px rgba(15, 39, 68, .09);
        }
        .contact-panel { padding: 0; overflow: hidden; }
        .form-head {
            padding: 22px 26px;
            border-bottom: 1px solid var(--contact-border);
            background: #fbfcfe;
        }
        .form-head h2 { margin: 0 0 6px; color: var(--contact-navy); font-size: 1.2rem; }
        .form-head p { margin: 0; color: var(--contact-muted); font-size: .9rem; line-height: 1.55; }
        .form-body { padding: 24px 26px 26px; }
        .contact-side { padding: 22px; }
        .contact-step {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--contact-navy);
            font-weight: 800;
            font-size: 1rem;
            margin: 0 0 18px;
        }
        .contact-step span {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--contact-red);
            color: #fff;
            font-size: .82rem;
            flex-shrink: 0;
        }
        .contact-alert {
            padding: 12px 14px;
            border-radius: 6px;
            margin-bottom: 18px;
            font-size: .92rem;
            line-height: 1.5;
        }
        .contact-alert.success { background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534; }
        .contact-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .field { margin-bottom: 16px; }
        .field label {
            display: block;
            font-weight: 700;
            color: var(--contact-navy);
            margin-bottom: 7px;
            font-size: .9rem;
        }
        .field input, .field textarea {
            width: 100%;
            border: 1px solid var(--contact-border);
            border-radius: 7px;
            padding: 12px 13px;
            font: inherit;
            font-size: .95rem;
            color: #172033;
            background: #fff;
            transition: border-color .2s, box-shadow .2s;
        }
        .field textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
        .field input:focus, .field textarea:focus {
            outline: none;
            border-color: var(--contact-red);
            box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
        }
        .hint { color: var(--contact-muted); font-size: .8rem; margin-top: 6px; }
        .verified-box {
            border: 1px solid #bbf7d0;
            background: #f0fdf4;
            color: #166534;
            padding: 12px 14px;
            border-radius: 7px;
            margin-bottom: 18px;
            font-weight: 700;
            font-size: .9rem;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 0;
            border-radius: 7px;
            padding: 12px 18px;
            font-weight: 800;
            font-size: .92rem;
            cursor: pointer;
            color: #fff;
            background: var(--contact-red);
            box-shadow: 0 8px 20px rgba(198, 40, 40, .2);
        }
        .btn.secondary { background: var(--contact-navy); box-shadow: 0 8px 20px rgba(15, 39, 68, .18); }
        .btn.ghost {
            background: #fff;
            color: var(--contact-navy);
            border: 1px solid var(--contact-border);
            box-shadow: none;
        }
        .button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .otp-card {
            border: 1px solid #fde68a;
            background: #fffbeb;
            border-radius: 8px;
            padding: 14px;
            margin-bottom: 16px;
            color: #92400e;
            font-size: .9rem;
            line-height: 1.5;
        }
        .side-title {
            color: var(--contact-navy);
            font-weight: 900;
            font-size: 1.05rem;
            margin: 0 0 12px;
        }
        .side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
        .side-list li { display: flex; gap: 10px; color: var(--contact-muted); line-height: 1.5; font-size: .9rem; }
        .side-list i { color: var(--contact-red); width: 18px; margin-top: 3px; }
        .support-mail {
            display: inline-flex;
            margin-top: 18px;
            color: var(--contact-navy);
            font-weight: 800;
            text-decoration: none;
            word-break: break-word;
        }
        .divider { height: 1px; background: var(--contact-border); margin: 20px 0; }
        @media (max-width: 820px) {
            .contact-grid, .form-grid { grid-template-columns: 1fr; }
            .form-head, .form-body { padding: 20px; }
        }

        /* Professional contact workflow */
        .contact-page { padding: 28px 18px 56px; background: #f6f8fb; }
        .contact-shell { max-width: 1080px; }
        .contact-hero {
            background: #fff;
            color: var(--contact-navy);
            border: 1px solid var(--contact-border);
            border-left: 5px solid var(--contact-red);
            border-radius: 6px;
            padding: 24px 28px;
            box-shadow: 0 8px 24px rgba(15,39,68,.06);
        }
        .contact-hero::after { display: none; }
        .hero-kicker { color: var(--contact-red); margin-bottom: 8px; }
        .contact-hero h1 { color: var(--contact-navy); font-size: clamp(1.7rem, 3vw, 2.35rem); }
        .contact-hero p { color: var(--contact-muted); font-size: .96rem; max-width: 780px; }
        .contact-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
        .contact-panel,
        .contact-side {
            border-radius: 6px;
            box-shadow: 0 8px 24px rgba(15,39,68,.06);
        }
        .form-head {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: flex-start;
            padding: 18px 22px;
            background: #fff;
        }
        .form-head::after {
            content: 'Secure';
            flex-shrink: 0;
            border: 1px solid #bbf7d0;
            background: #ecfdf5;
            color: #166534;
            border-radius: 999px;
            padding: 5px 10px;
            font-size: .72rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .08em;
        }
        .form-head h2 { font-size: 1.05rem; }
        .form-body { padding: 22px; }
        .contact-step {
            font-size: .95rem;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--contact-border);
        }
        .contact-step span {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            font-size: .78rem;
        }
        .field input,
        .field textarea {
            border-radius: 5px;
            background: #fbfcfe;
        }
        .field input:focus,
        .field textarea:focus { background: #fff; }
        .btn {
            border-radius: 5px;
            box-shadow: none;
            min-height: 42px;
        }
        .btn:disabled {
            cursor: not-allowed;
            opacity: .62;
            background: #e5e7eb;
            color: #64748b;
            border-color: #d1d5db;
        }
        .otp-card {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            background: #fff8e1;
            border-color: #f4d47c;
            color: #6f4e00;
        }
        .otp-card i { margin-top: 2px; color: #b45309; }
        .countdown-note {
            color: var(--contact-muted);
            font-size: .82rem;
            margin-top: 8px;
        }
        .content-warning {
            display: none;
            margin-top: 8px;
            color: #991b1b;
            font-size: .84rem;
            font-weight: 700;
        }
        .content-warning.is-visible { display: block; }
        .field.has-error input,
        .field.has-error textarea {
            border-color: #dc2626;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
        }
        .contact-side {
            background: #0f2744;
            color: #fff;
            border-color: #0f2744;
        }
        .contact-side .side-title { color: #fff; }
        .contact-side .side-list li { color: rgba(255,255,255,.78); }
        .contact-side .side-list i { color: #f4c542; }
        .contact-side .divider { background: rgba(255,255,255,.16); }
        .contact-side .support-mail { color: #fff; }
        @media (max-width: 820px) {
            .contact-grid { grid-template-columns: 1fr; }
            .form-head { display: block; }
            .form-head::after { display: inline-flex; margin-top: 12px; }
        }

        /* Premium AlexisPath contact UI */
        :root {
            --contact-navy: #1a3a5c;
            --contact-dark: #0f172a;
            --contact-slate: #1e293b;
            --contact-gold: #d4af37;
            --contact-gold-dark: #c59b27;
            --contact-border: #cbd5e1;
            --contact-muted: #64748b;
            --contact-bg: #f8fafc;
        }
        body { background: var(--contact-bg); }
        .contact-page { padding: 0 0 64px; background: var(--contact-bg); }
        .contact-shell { max-width: none; margin: 0; }
        .contact-hero {
            background: linear-gradient(135deg, var(--contact-dark) 0%, var(--contact-slate) 100%);
            border: 0;
            border-left: 0;
            border-radius: 0;
            box-shadow: none;
            padding: clamp(48px, 7vw, 78px) 18px;
            margin-bottom: 0;
            text-align: center;
        }
        .contact-hero-inner,
        .contact-body-inner {
            max-width: 1120px;
            margin: 0 auto;
        }
        .hero-kicker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: rgba(212, 175, 55, .15);
            color: var(--contact-gold);
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid rgba(212, 175, 55, .3);
            font-size: .85rem;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: none;
            margin: 0 auto 16px;
        }
        .contact-hero h1 {
            color: #fff;
            font-size: clamp(2.35rem, 5vw, 3.6rem);
            line-height: 1.16;
            margin: 0 0 14px;
        }
        .contact-hero h1 span { color: var(--contact-gold); }
        .contact-hero p {
            color: rgba(255,255,255,.8);
            max-width: 650px;
            margin: 0 auto;
            font-size: 1.08rem;
            line-height: 1.65;
        }
        .contact-body-band {
            background: var(--contact-bg);
            padding: 46px 18px 0;
        }
        .contact-grid {
            grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
            gap: 32px;
            align-items: start;
        }
        .contact-panel,
        .contact-side,
        .contact-guide-card {
            background: #fff;
            border: 0;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0,0,0,.05);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .contact-panel:hover,
        .contact-side:hover,
        .contact-guide-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 26px rgba(0,0,0,.07);
        }
        .contact-panel { order: 2; overflow: hidden; }
        .contact-info-column { order: 1; display: grid; gap: 22px; }
        .contact-side { color: inherit; padding: 24px; }
        .contact-side .side-title,
        .form-head h2 {
            color: var(--contact-navy);
            font-size: 1.35rem;
            border-bottom: 2px solid #f1f5f9;
            padding-bottom: 12px;
            margin-bottom: 20px;
        }
        .contact-side .side-list {
            gap: 20px;
        }
        .contact-side .side-list li {
            color: #334155;
            gap: 14px;
            align-items: flex-start;
        }
        .contact-side .side-list i {
            width: 50px;
            height: 50px;
            flex: 0 0 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0;
            font-size: 1.2rem;
        }
        .contact-side .side-list li:nth-child(1) i { background: rgba(26,58,92,.08); color: var(--contact-navy); }
        .contact-side .side-list li:nth-child(2) i { background: rgba(5,150,105,.08); color: #059669; }
        .contact-side .side-list li:nth-child(3) i { background: rgba(245,159,0,.08); color: #f59f00; }
        .side-list strong {
            display: block;
            color: var(--contact-navy);
            font-size: 1rem;
            margin-bottom: 4px;
        }
        .support-mail {
            color: #007185;
            font-weight: 800;
        }
        .contact-guide-card {
            background: linear-gradient(135deg, var(--contact-slate) 0%, var(--contact-dark) 100%);
            color: rgba(255,255,255,.76);
            padding: 24px;
        }
        .contact-guide-card h2 {
            color: var(--contact-gold);
            font-size: 1.2rem;
            margin: 0 0 14px;
        }
        .contact-guide-card ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 12px;
            line-height: 1.7;
            font-size: .92rem;
        }
        .contact-guide-card i {
            color: var(--contact-gold);
            margin-right: 8px;
        }
        .form-head {
            display: block;
            padding: 26px 30px 0;
            border-bottom: 0;
        }
        .form-head::after { display: none; }
        .form-head p {
            color: var(--contact-muted);
            font-size: .94rem;
        }
        .form-body { padding: 24px 30px 30px; }
        .contact-step {
            color: var(--contact-navy);
            border-bottom: 0;
            margin-bottom: 20px;
        }
        .contact-step span {
            background: var(--contact-gold);
            color: var(--contact-dark);
            border-radius: 999px;
        }
        .field label {
            color: #475569;
            font-size: .9rem;
            font-weight: 800;
        }
        .field input,
        .field textarea {
            border-color: var(--contact-border);
            border-radius: 8px;
            background: #f8fafc;
            padding: 13px 14px;
        }
        .field input:focus,
        .field textarea:focus {
            border-color: var(--contact-gold);
            box-shadow: 0 0 0 .25rem rgba(212, 175, 55, .15);
        }
        .btn,
        .btn.secondary {
            background: var(--contact-gold);
            border: 1px solid var(--contact-gold);
            color: var(--contact-dark);
            border-radius: 8px;
            box-shadow: none;
            font-weight: 900;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .btn:hover,
        .btn.secondary:hover {
            background: var(--contact-gold-dark);
            border-color: var(--contact-gold-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, .25);
        }
        .btn.ghost {
            background: #fff;
            color: var(--contact-navy);
            border: 1px solid var(--contact-border);
        }
        .verified-box {
            border-color: #bbf7d0;
            border-radius: 8px;
        }
        .contact-alert {
            border-radius: 8px;
            box-shadow: 0 8px 18px rgba(15,23,42,.06);
        }
        .contact-alert.success { border-left: 5px solid #059669; }
        .contact-alert.error { border-left: 5px solid #dc2626; }
        .otp-card {
            border-color: rgba(212, 175, 55, .35);
            background: rgba(212, 175, 55, .12);
            color: #765a0a;
            border-radius: 10px;
        }
        @media (max-width: 900px) {
            .contact-grid { grid-template-columns: 1fr; }
            .contact-panel,
            .contact-info-column { order: initial; }
        }
        @media (max-width: 640px) {
            .contact-body-band { padding: 28px 14px 0; }
            .form-grid { grid-template-columns: 1fr; }
            .form-head,
            .form-body,
            .contact-side,
            .contact-guide-card { padding: 22px; }
            .contact-hero { padding: 42px 16px; }
        }