/* Contact page — only sections/pieces with no existing equivalent live here.
   Reused as-is elsewhere (no CSS duplicated for these):
     .page-hero* (page-hero.css)                    → contact hero
     .performance-card + .performance-why-act-now-wrap
       tokens/gradient (performance.css)             → "reach us directly" cards
     .why-act-now__header (why-act-now.css)          → "reach us directly" header
     inspection-concierge.php + its own CSS          → "how can we help?" section
     .btn / .btn--primary (main.css)                 → contact form submit
     .section-header (main.css)                      → every header below
*/

/* Reach Us Directly (performance-card reuse + hours row) ------------------ */

/* .why-act-now__header (dual-classed on .contact-direct__header) supplies
   the centring/margin, but its colour overrides are scoped to a
   .why-act-now ancestor that isn't present here — set colour explicitly
   instead (same issue as .about-purpose, see about.css). */
.contact-direct { color: var(--cream); padding: 120px 0; }
.contact-direct .section-header__headline { color: #ffffff; }
.contact-direct__header { margin-bottom: 64px; }

.contact-direct__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.contact-card__heading { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; color: #ffffff; margin: 0 0 8px; }
.contact-card__detail { font-size: 14px; line-height: 1.6; color: var(--cream-dim); margin: 0; }
.contact-card__link { display: block; font-size: 14px; color: var(--pf-gold, var(--gold)); text-decoration: underline; }
.contact-card__link:not(:last-child) { margin-bottom: 6px; }

.contact-hours { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--pf-card-bg); border: 1px solid var(--pf-card-border); }
.contact-hours__item { padding: 24px 32px; }
.contact-hours__item:not(:last-child) { border-right: 1px solid var(--pf-card-border); }
.contact-hours__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pf-gold); margin-bottom: 8px; }
.contact-hours__value { font-size: 15px; font-weight: 500; color: #ffffff; }

@media (max-width: 1024px) {
	.contact-direct__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.contact-direct { padding: 40px 0; }
	.contact-direct__header { margin-bottom: 40px; }
	.contact-direct__grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
	.contact-hours { grid-template-columns: 1fr; }
	.contact-hours__item:not(:last-child) { border-right: none; border-bottom: 1px solid var(--pf-card-border); }
}

/* Send Us A Message (advisor card + enquiry form) -------------------------- */

.contact-message { background: #ffffff; padding: 120px 0; }
.contact-message__header { margin-bottom: 64px; }
.contact-message .section-header__eyebrow { color: #794332; }
.contact-message .section-header__headline { color: #154533; }
.contact-message .section-header__headline-accent { color: #936900; }

.contact-message__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }

.contact-advisor { background: var(--cream); border: 1px solid var(--border-light); padding: 32px; }
.contact-advisor__top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.contact-advisor__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.contact-advisor__photo--placeholder { background: var(--border-dark); }
.contact-advisor__name { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0; }
.contact-advisor__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #794332; margin: 2px 0 0; }
/* Same type treatment as .about-transaction__quote (about.css), dark instead
   of gold since this card sits on a light background. */
.contact-advisor__quote { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.5; color: #1e1e1e; margin: 0 0 20px; }
.contact-advisor__status { margin-top: 0; color: #595959; }

.contact-form-card { background: #ffffff; border: 1px solid var(--border-light); padding: 32px; }
.contact-form-card__eyebrow { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #936900; margin-bottom: 12px; }
.contact-form-card__title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; color: var(--ink); margin: 0 0 24px; }

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form__field { margin-bottom: 20px; }
.contact-form__label { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: #1e1e1e; margin-bottom: 8px; }
.contact-form__input {
	width: 100%;
	height: 48px;
	background: #f2f2f0;
	border: 1px solid var(--border-light);
	padding: 0 16px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--ink);
}
.contact-form__input::placeholder { color: #9a9a9a; }
.contact-form__select { appearance: auto; -webkit-appearance: auto; color: #9a9a9a; }
.contact-form__submit { width: 100%; margin-top: 4px; }
.contact-form__note { font-size: 12px; color: #8a8a8a; text-align: center; margin: 16px 0 0; }

@media (max-width: 900px) {
	.contact-message__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.contact-message { padding: 40px 0; }
	.contact-message__header { margin-bottom: 40px; }
	.contact-advisor, .contact-form-card { padding: 20px; }
	.contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* Visit The Head Office (map + info cards) --------------------------------- */

.contact-location { background: var(--cream); padding: 120px 0; }
.contact-location__header { margin-bottom: 40px; }
.contact-location .section-header__eyebrow { color: #794332; }
.contact-location .section-header__headline { color: #154533; }
.contact-location .section-header__headline-accent { color: #936900; }

.contact-location__map { width: 100%; aspect-ratio: 16 / 7; margin-bottom: 24px; border: 1px solid var(--border-light); }
.contact-location__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-location__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-info-card { background: #fbfbfb; border: 1px solid #e0e0e0; padding: 24px; }
.contact-info-card__label { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #936900; margin-bottom: 12px; }
.contact-info-card__body { font-size: 15px; line-height: 1.6; color: #404040; margin: 0; }

@media (max-width: 900px) {
	.contact-location__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.contact-location { padding: 40px 0; }
	.contact-location__header { margin-bottom: 24px; }
	.contact-location__map { aspect-ratio: 4 / 3; margin-bottom: 16px; }
	.contact-location__grid { gap: 16px; }
}