/* Contact page styles. Auto-enqueued for templates/page-contact/page-contact.php.
   Zero-visual-change refactor of the template's former inline styles — every value
   is reproduced exactly. The CF7 form markup is styled separately by forms.css.
   Unlayered + loaded after app.css, so equal-specificity classes beat Tailwind
   utilities with no !important. */

/* ──────────────────────────────────────────────────────────
   HERO — office photo background
   ────────────────────────────────────────────────────────── */
.te-contact-hero__scrim {
	background: linear-gradient(90deg, rgba(13,31,60,0.8) 0%, rgba(13,31,60,0.62) 38%, rgba(13,31,60,0.5) 54%, rgba(13,31,60,0) 64%);
}
.te-contact-hero__eyebrow {
	color: #FF6900;
	line-height: 20px;
	letter-spacing: 2.8px;
}
.te-contact-hero__title {
	font-family: "DM Serif Display", serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 2px 32px rgba(0,0,0,0.35);
}
/* Same responsive ladder as the homepage H1: 40px mobile, 56px tablet,
   64px desktop (one line — it fits there). */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-contact-hero__title { font-size: 56px; line-height: 62px; }
}
@media (min-width: 1024px) {
	.te-contact-hero__title { font-size: 64px; line-height: 70px; white-space: nowrap; }
}
.te-contact-hero__title-dot { color: #FF6900; }
.te-contact-hero__lead {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 39px;
	letter-spacing: 0;
	color: #E5E7EB;
}
.te-contact-hero__wave { line-height: 0; }
.te-contact-hero__wave svg {
	width: 100%;
	height: 90px;
	display: block;
}

/* ──────────────────────────────────────────────────────────
   CONTACT INFO — map embed
   ────────────────────────────────────────────────────────── */
.te-contact-map { min-height: 200px; }
.te-contact-map__iframe {
	border: 0;
	display: block;
	min-height: 200px;
}

/* ──────────────────────────────────────────────────────────
   INVERTED CRESCENT DIVIDER — white section arcs into dark footer
   ────────────────────────────────────────────────────────── */
.te-contact-divider {
	/* Footer navy exactly, so the curve reads as the footer's own edge. */
	background: #06162F;
	line-height: 0;
}
.te-contact-divider svg {
	width: 100%;
	height: 100px;
	display: block;
}

/* Mobile/tablet hero: full-color banner (no scrim — client rule), copy below
   on white in navy type. Desktop keeps the overlaid composition. */
@media (max-width: 1023.98px) {
	.te-contact-hero { min-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 64px; display: block; background: #ffffff; }
	.te-contact-hero__bg { position: static; inset: auto; height: 460px; object-position: 78% center; }
	.te-contact-hero__scrim { display: none; }
	.te-contact-hero__inner { padding-top: 40px; }
	.te-contact-hero__title { color: #003366; text-shadow: none; }
	.te-contact-hero__lead { color: #364153; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-contact-hero__bg { height: 560px; }
}

/* ── WCAG AA orange pass ── info labels + icons sit on white; banner-mode
   hero copy sits on white. Desktop hero (over photo) keeps #FF6900. */
.text-orange-500 { color: #BF4E00; } /* 4.88:1 */
svg.text-orange-400 { color: #EF6200; } /* icons: graphics 3.27:1 */
@media (max-width: 1023.98px) {
	.te-contact-hero__eyebrow { color: #BF4E00; }
	.te-contact-hero__title-dot { color: #EF6200; }
}

/* ── Map placement ── stacked (below 768px): natural source order = info,
   form, then map at the bottom. Desktop: map returns under the info column
   with the form spanning both rows (same visual as before). */
.te-contact-map { min-height: 280px; }
@media (min-width: 768px) {
	.te-contact-grid .te-form-container { grid-column: 2; grid-row: 1 / 3; }
	.te-contact-grid .te-contact-map { grid-column: 1; grid-row: 2; margin-top: -32px; }
}
/* Decorative waves/dividers never intercept clicks or text selection. */
.te-contact-hero__wave,
.te-contact-divider { pointer-events: none; }

/* Email/phone: underlined at rest, no underline on hover (site-wide pattern). */
.te-contact-grid a[href^="mailto:"]:hover,
.te-contact-grid a[href^="tel:"]:hover { text-decoration: none; }

/* Hero lede matches the homepage hero lead's responsive size ladder
   (18px below 1024px; both are 24/39 at desktop). */
@media (max-width: 1023.98px) {
	.te-contact-hero__lead { font-size: 18px; line-height: 1.55; }
}

/* Stacked (below 768px): full-bleed map flush against the footer — the
   crescent divider is hidden, so the footer starts with a straight edge. */
@media (max-width: 767.98px) {
	.te-contact-map { margin-left: -24px; margin-right: -24px; border: 0; border-radius: 0; }
	.te-contact-body { padding-bottom: 0; }
	.te-contact-divider { display: none; }
}

/* Seamless curve-into-footer: no separating hairline on this page. */
.page-template-page-contact .te-footer { border-top: 0; }

/* Mobile: below-banner hero H1 matches the homepage's 32px (site-wide). */
@media (max-width: 767.98px) {
	.te-contact-hero__title { font-size: 32px; line-height: 1.15; }
}

/* Mobile: H2 matches the homepage section headings' 30px/1.15 (site-wide pass). */
@media (max-width: 767.98px) {
	.te-contact-h2 { font-size: 30px; line-height: 1.15; }
}

/* Mobile: hero banner zooms out a bit — a shorter window forces a smaller
   cover scale, so more of the building shows; half the space above
   "Get in Touch"; the orange info labels step up. */
@media (max-width: 767.98px) {
	.te-contact-hero__bg { height: 400px; object-position: 66% center; }
	.te-contact-body { padding-top: 40px; }
	.te-contact-body .text-orange-500 { font-size: 14px; }
	/* Wider form card: bleed 16px into the page padding (same pattern as
	   the partner cards) with slimmer card padding — the 30px title fits
	   one line and the fields gain ~56px. */
	.te-contact-body .te-form-container { margin-left: -16px; margin-right: -16px; padding: 24px 20px; }
}