
body { font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif; }

/* ── Contact page layout ────────────────────────────────── */
.cp-wrap {
    background: linear-gradient(160deg, #f0f7ff 0%, #fff 40%, #fff 100%);
    min-height: 100vh;
}
.cp-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ── Hero ───────────────────────────────────────────────── */
.cp-hero {
    padding: 60px 0 32px;
}
.cp-hero-head {
    width: 100%;
    margin-bottom: 24px;
}
.cp-hero-head h1 { margin-bottom: 0; }
.cp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 34px;
    align-items: start;
}
.cp-hero-side {
    display: grid;
    gap: 16px;
    align-content: start;
}
.cp-hero-visual {
    margin: 0;
    overflow: hidden;
    border: 1.5px solid #dbe8df;
    border-radius: 26px;
    background: #eef6f0;
    box-shadow: 0 18px 44px rgba(15,74,45,.12);
}
.cp-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
.cp-eyebrow {
    display: inline-flex;
    color: #ff8a00;
    font-weight: 900;
    letter-spacing: .18em;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cp-hero h1 {
    color: #0f172a;
    font-size: clamp(16px,2.05vw,27px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin: 0 0 16px;
    max-width: 100%;
}
.cp-hero p {
    color: #475569;
    font-size: 17px;
    line-height: 1.8;
    max-width: 100%;
    margin: 0 0 14px;
    text-align: justify;
    text-align-last: left;
    direction: ltr;
    unicode-bidi: plaintext;
}
.cp-hero p:last-of-type { margin-bottom: 0; }

/* ── Social proof bar ───────────────────────────────────── */
.cp-proof-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
}
.cp-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #dbeeff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}
.cp-proof-pill span { color: #ff8a00; }
.cp-proof-pill-ai { border-color:#c9b8fb; background:#f5f1ff; }
.cp-proof-pill-ai span { color:#7c3aed; }
.cp-hero-brief {
    margin-top: 20px;
    width: 100%;
    max-width: none;
    display: block;
    background: rgba(255,255,255,.78);
    border: 1.5px solid #dbeeff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 8px 28px rgba(15,23,42,.04);
}
.cp-hero-brief strong { display: block; margin-bottom: 7px; color: #063b73; font-size: 14px; font-weight: 900; }
.cp-hero-brief span { display: block; width: 100%; color: #334155; font-size: 14.5px; line-height: 1.72; text-align: justify; text-align-last: left; direction: ltr; unicode-bidi: plaintext; }
.cp-hero-side .cp-proof-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}
.cp-hero-side .cp-proof-pill {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    border-radius: 14px;
    padding: 9px 11px;
    line-height: 1.35;
}
.cp-hero-side .cp-proof-pill:last-child { grid-column: 1 / -1; }

/* ── Main grid ──────────────────────────────────────────── */
.cp-section { padding: 28px 0 80px; }
.cp-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 28px;
    align-items: start;
}

/* ── Info card ──────────────────────────────────────────── */
.cp-info {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(15,23,42,.06);
}
.cp-info h2 {
    color: #0f172a;
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
}
.cp-info > p {
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 20px;
}
.cp-detail-list { display: grid; gap: 10px; }
.cp-detail {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    background: #f0f9ff;
    border: 1px solid #dbeeff;
    border-radius: 16px;
    padding: 13px;
}
.cp-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #063b73, #0b66c3);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(6,59,115,.18);
}
.cp-text strong { display: block; color: #0f172a; font-size: 14px; font-weight: 900; margin-bottom: 2px; }
.cp-text a, .cp-text span { color: #334155; font-size: 14.5px; line-height: 1.5; }
.cp-text a:hover { color: #ff8a00; }

/* ── Region strip ───────────────────────────────────────── */
.cp-region {
    margin-top: 18px;
    background: linear-gradient(135deg, #06254a, #0b66c3);
    border-radius: 18px;
    padding: 18px 20px;
    color: #fff;
}
.cp-region strong { display: block; font-size: 14px; font-weight: 900; margin-bottom: 6px; }
.cp-region p { margin: 0; color: #dbeafe; font-size: 14px; line-height: 1.7; }

/* ── Next steps ─────────────────────────────────────────── */
.cp-next {
    margin-top: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 18px;
    padding: 18px 20px;
}
.cp-next strong { display: block; color: #15803d; font-size: 14px; font-weight: 900; margin-bottom: 10px; }
.cp-steps { display: grid; gap: 8px; }
.cp-step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
    color: #334155;
    font-size: 14px;
    line-height: 1.55;
}
.cp-step > span {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #15803d;
    font-weight: 900;
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Form card ──────────────────────────────────────────── */
.cp-form-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 8px 32px rgba(15,23,42,.06);
}
.cp-form-card h2 {
    color: #0f172a;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 6px;
}
.cp-subtitle { color: #475569; font-size: 15px; line-height: 1.6; margin: 0 0 22px; }

/* ── Trust row above form ───────────────────────────────── */
.cp-form-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}
.cp-form-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 5px 10px;
}

/* ── Form fields ────────────────────────────────────────── */
.cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-group { margin-bottom: 14px; }
.cp-wrap label {
    display: block;
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 900;
    margin-bottom: 7px;
    line-height: 1.3;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
.cp-wrap input,
.cp-wrap select,
.cp-wrap textarea {
    width: 100%;
    display: block;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 15px;
    color: #1e293b;
    background: #fff;
    outline: none;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    transition: border-color .18s, box-shadow .18s;
}
.cp-wrap textarea { min-height: 150px; resize: vertical; }
.cp-wrap input:focus,
.cp-wrap select:focus,
.cp-wrap textarea:focus {
    border-color: #0b8fe8;
    box-shadow: 0 0 0 3px rgba(11,143,232,.10);
}
.cp-submit {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 17px 24px;
    background: #ff8a00;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(255,138,0,.28);
    transition: background .2s, transform .2s;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
.cp-submit:hover { background: #e77800; transform: translateY(-1px); }
.cp-note { text-align: center; color: #94a3b8; font-size: 13px; margin: 14px 0 0; line-height: 1.55; }
.cp-honeypot { display: none !important; }
.cp-consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin:4px 0 18px}.cp-consent input{width:18px;height:18px;margin-top:2px}.cp-consent label{font-size:12.5px;line-height:1.55;font-weight:600}.cp-consent a{color:#087a45;font-weight:800}
.cp-guidance{padding:68px 0;background:#f4faf6}.cp-guidance-head{max-width:820px;margin-bottom:28px}.cp-guidance-head h2{color:#102b21;font-size:clamp(24px,3vw,38px);margin:0 0 12px}.cp-guidance-head p{color:#52675f;line-height:1.75}.cp-guidance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cp-guidance-grid article{background:#fff;border:1px solid #dbe8df;border-radius:18px;padding:22px}.cp-guidance-grid h3{color:#087a45;margin:0 0 8px;font-size:17px}.cp-guidance-grid p{color:#52675f;line-height:1.7;margin:0;font-size:14px}
.cp-faq{padding:68px 0;background:#fff}.cp-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cp-faq details{border:1px solid #dbe8df;border-radius:16px;padding:18px;background:#fff}.cp-faq summary{color:#102b21;font-weight:800;cursor:pointer}.cp-faq details p{color:#52675f;line-height:1.7;margin:12px 0 0}

/* ── Status messages ────────────────────────────────────── */
.cp-msg { border-radius: 14px; padding: 13px 16px; margin-bottom: 16px; font-weight: 800; font-size: 14.5px; }
.cp-msg.success { background: #f0fdf4; color: #15803d; border: 1.5px solid #bbf7d0; }
.cp-msg.error   { background: #fff1f2; color: #be123c; border: 1.5px solid #fecdd3; }

/* ── Dark mode ──────────────────────────────────────────── */
[data-theme="dark"] .cp-wrap {
    background: linear-gradient(160deg, #06101f 0%, #081526 50%, #081526 100%);
}
[data-theme="dark"] .cp-hero h1 { color: #f8fbff; }
[data-theme="dark"] .cp-hero p, [data-theme="dark"] .cp-info > p, [data-theme="dark"] .cp-subtitle { color: #d7e7ff; }
[data-theme="dark"] .cp-info, [data-theme="dark"] .cp-form-card {
    background: #0e1b2f;
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
[data-theme="dark"] .cp-info h2, [data-theme="dark"] .cp-form-card h2 { color: #f8fbff; }
[data-theme="dark"] .cp-detail { background: #132641; border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .cp-text strong, [data-theme="dark"] label { color: #fff; }
[data-theme="dark"] .cp-text a, [data-theme="dark"] .cp-text span, [data-theme="dark"] .cp-step { color: #d7e7ff; }
[data-theme="dark"] .cp-wrap input, [data-theme="dark"] .cp-wrap select, [data-theme="dark"] .cp-wrap textarea {
    background: #071121; border-color: rgba(255,255,255,.14); color: #f8fbff;
}
[data-theme="dark"] .cp-wrap input::placeholder, [data-theme="dark"] .cp-wrap textarea::placeholder { color: #8fa7c6; }
[data-theme="dark"] .cp-next { background: rgba(22,101,52,.18); border-color: rgba(134,239,172,.22); }
[data-theme="dark"] .cp-next strong { color: #9ff2b7; }
[data-theme="dark"] .cp-proof-pill { background: #0e1b2f; border-color: rgba(255,255,255,.12); color: #d7e7ff; }
[data-theme="dark"] .cp-form-trust span { background: rgba(22,101,52,.18); border-color: rgba(134,239,172,.22); color: #9ff2b7; }
[data-theme="dark"] .cp-hero-brief { background:#0e1b2f; border-color:rgba(255,255,255,.12); }
[data-theme="dark"] .cp-hero-brief strong { color:#93c5fd; }
[data-theme="dark"] .cp-hero-brief span { color:#d7e7ff; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1050px) {
    .cp-hero-grid { grid-template-columns: 1fr; }
    .cp-hero-side { max-width: 820px; }
    .cp-grid { grid-template-columns: 1fr; }
    .cp-guidance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px) {
    .cp-container { width: calc(100% - 28px); }
    .cp-hero { padding: 44px 0 24px; }
    .cp-section { padding: 20px 0 56px; }
    .cp-info, .cp-form-card { padding: 22px; border-radius: 20px; }
    .cp-row { grid-template-columns: 1fr; gap: 0; }
    .cp-hero-side .cp-proof-bar { grid-template-columns: 1fr; }
    .cp-hero-side .cp-proof-pill:last-child { grid-column: auto; }
    .cp-guidance-grid,.cp-faq-grid{grid-template-columns:1fr}
}
