/* Contact Us page styles — scoped, minimal, leveraging base.css */
.page-hero { padding: var(--space-14) 0 var(--space-10); background: radial-gradient(800px 320px at 10% -10%, rgba(var(--rgb-accent), 0.10), transparent 60%); }
.page-hero p { color: var(--gray-100); max-width: 60ch; }

.contact-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; margin: var(--space-10) auto; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

.info-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.info-list li { margin-bottom: var(--space-4); }
.muted { color: var(--gray-300); }

.social-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }

.form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-field { display: block; }
.consent-wrap { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: var(--space-3); margin-top: var(--space-2); }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.form-status { margin-top: var(--space-3); color: var(--gray-100); font-weight: 600; }
.char-counter { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--gray-400); text-align: right; }

.map-wrap { position: relative; }
.map-placeholder { display: grid; gap: var(--space-4); place-items: start; padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.map-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.map-iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

/* details/summary styling for FAQ */
details { border-top: 1px solid rgba(255,255,255,0.08); padding: var(--space-4) 0; }
details:first-of-type { border-top: 0; }
details summary { cursor: pointer; font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { color: var(--color-accent); }