/* ── Contact page ─────────────────────────────────────────────────────────── */

.contact-hero { padding-top: 28px; }

.contact-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 52px;
    align-items: start;
}

/* Left copy */
.contact-copy { display: flex; flex-direction: column; gap: 20px; padding-top: 12px; }
.contact-copy h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: -.04em;
    line-height: 1.05;
}
.contact-copy > p { margin: 0; color: var(--text-soft); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.72; }

.contact-trust-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact-trust-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text-soft);
}
.contact-trust-list .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(99, 102, 241, .1);
    color: var(--blue);
    font-size: 20px;
    flex-shrink: 0;
}

/* Form card */
.contact-form-card {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    padding: 36px;
}

.contact-form-header { margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.contact-form-header h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -.03em;
}
.contact-form-header p { margin: 0; color: var(--text-soft); font-size: 15px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font-size: 13px; font-weight: 700; color: var(--text-soft); letter-spacing: .04em; text-transform: uppercase; }

.cf-field input,
.cf-field select,
.cf-field textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    outline: none;
    resize: vertical;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.cf-field input.cf-invalid,
.cf-field textarea.cf-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}
.cf-field select { appearance: none; cursor: pointer; }
:root[data-theme="dark"] .cf-field input,
:root[data-theme="dark"] .cf-field select,
:root[data-theme="dark"] .cf-field textarea { background: rgba(8, 34, 71, .7); }

.cf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.cf-submit { gap: 8px; }
.cf-note { margin: 0; font-size: 13px; color: var(--text-soft); }

.cf-success {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(22, 199, 154, .1);
    border: 1px solid rgba(22, 199, 154, .22);
    color: var(--text);
}
.cf-success .material-symbols-outlined { color: #16c79a; font-size: 28px; flex-shrink: 0; }
.cf-success strong { display: block; font-size: 15px; }
.cf-success span { font-size: 14px; color: var(--text-soft); }

/* Contact cards */
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 44px;
}

.contact-card {
    padding: 28px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.contact-card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: var(--gradient-primary);
    color: #fff;
    margin-bottom: 6px;
}
.contact-card-icon .material-symbols-outlined { font-size: 26px; }

.contact-card h3 {
    margin: 0;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
}
.contact-card p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.65; flex: 1; }
.contact-card .text-link { margin-top: 4px; font-size: 15px; }
.contact-card .text-link .material-symbols-outlined { font-size: 18px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .contact-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .contact-copy { padding-top: 0; }
}

@media (max-width: 860px) {
    .contact-cards-grid { grid-template-columns: 1fr 1fr; }
    .cf-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .contact-form-card { padding: 24px; }
    .contact-cards-grid { grid-template-columns: 1fr; }
    .cf-actions { flex-direction: column; align-items: stretch; }
    .cf-submit { width: 100%; justify-content: center; }
}