/* Contact Us page styles — minimal and complementary to base.css */
.page-hero { padding-block: var(--space-10) var(--space-6); }
.page-hero .lead { margin-top: var(--space-2); }

.section { padding-block: var(--space-10); }
.section--alt { background: color-mix(in oklab, var(--gray-200) 35%, transparent); }

.contact-grid { display: grid; gap: var(--space-6); grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-main .form-row + .form-row { margin-top: var(--space-4); }
.contact-aside .support-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.contact-aside .support-list i { color: var(--color-primary); margin-right: var(--space-2); }

/* FAQ */
.faq-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
details { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3) var(--space-4); }
details[open] { box-shadow: var(--shadow-sm); }
details summary { cursor: pointer; font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details .muted { margin-top: var(--space-2); }

/* Newsletter inline */
.newsletter-inline .form-row--2 { grid-template-columns: 2fr auto; }
@media (max-width: 640px) { .newsletter-inline .form-row--2 { grid-template-columns: 1fr; } }

/* Social */
.social-list { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.social-list a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.social-list i { color: var(--color-primary); }

/* Hours */
#hours-title + table { margin-top: var(--space-3); }

/* Feedback rating */
.rating { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.rating input { position: absolute; left: -9999px; }
.rating label { display: inline-block; font-size: 1.25rem; letter-spacing: 2px; cursor: pointer; user-select: none; }
.rating input:focus + label { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.rating label:hover, .rating input:checked + label { color: var(--color-primary); }

/* Jobs */
.jobs-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-4); }
.jobs-list .card h3 { margin-bottom: var(--space-2); }
