/* =============================================================================
   CONTACT PAGE -- ported from the live site.
   ============================================================================= */

/* =============================================================================
   HERO -- intro left, message panel right
   ============================================================================= */

.contact-hero {
	padding-top:      60px;
	padding-bottom: var(--section-y-md);
	background-color: var(--color-bg-subtle);
	border-bottom:    1px solid var(--color-border-subtle);
}

.contact-hero__inner {
	display:               grid;
	grid-template-columns: 1fr 520px;
	gap:                   var(--space-2xl);
	align-items:           start;
}

.contact-hero__intro h1 {
	margin-bottom: var(--space-m);
}

p.contact-hero__lead {
	max-width:     520px;
	margin-bottom: 35px;
	padding:       var(--space-2xs) 0 var(--space-2xs) var(--space-m);
	border-left:   2px solid var(--color-border-subtle);
	line-height:   var(--leading-relaxed);
	color:         var(--color-text-secondary);
}

/* ---- Trust figures ---- */

.contact-hero__stats {
	display:       flex;
	flex-wrap:     wrap;
	gap:           var(--space-2xl);
	padding-top:   var(--space-l);
	margin-bottom: 35px;
	border-top:    1px solid var(--color-border-subtle);
}

.contact-hero__stats li {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3xs);
}

.contact-hero__stat-figure {
	font-size: var(--text-h2);
	font-weight:          var(--weight-black);
	line-height:          1;
	color:                var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.contact-hero__stat-label {
	font-size:   var(--text-body-small);
	font-weight: var(--weight-bold);
	color:       var(--color-text-secondary);
}

/* ---- Social links ---- */

.contact-hero__social-label {
	margin-bottom: 10px;
}

.contact-hero__socials {
	display: flex;
	gap:     10px;
}

.contact-hero__social {
	display:          inline-flex;
	align-items:      center;
	gap:              var(--space-xs);
	padding:          10px var(--space-m);
	font-size:        var(--text-body-small);
	font-weight:      var(--weight-bold);
	color:            var(--color-text-primary);
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-s);
	transition:       border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.contact-hero__social:hover {
	color:           var(--color-accent);
	border-color:    var(--color-accent);
	text-decoration: none;
}

.contact-hero__social svg {
	flex-shrink: 0;
}

/* =============================================================================
   MESSAGE PANEL
   ============================================================================= */

.contact-hero__panel {
	padding:          35px;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
	box-shadow:       var(--shadow-card);
}

.contact-hero__panel-title {
	font-size:     var(--text-h3);
	margin-bottom: var(--space-2xs);
}

p.contact-hero__panel-subtitle {
	margin-bottom: 0;
	font-size:     var(--text-body-small);
	color:         var(--color-text-secondary);
}

.contact-hero__panel-rule {
	height:           1px;
	margin:           var(--space-l) 0;
	background-color: var(--color-border-subtle);
	border:           0;
}

/* =============================================================================
   CONTACT FORM SHELL
   Selectors target plain label/input/textarea so a real form can drop in
   without restyling. Matches the footer form and the careers application form.
   ============================================================================= */

.contact-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--field-gap);
}

.contact-form__row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--field-gap);
}

.contact-form__field {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}

/* Only the checkbox label is still in flow; the field labels float. */
.contact-form__check label {
	font-size:   var(--text-body-small);
	font-weight: var(--weight-regular);
}


/* Text inputs and the textarea are .field (global.css); nothing here
   deviates from it. */

.contact-form__check {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
}

.contact-form__check input {
	width:       auto;
	margin-top:  var(--space-3xs);
	flex-shrink: 0;
}

.contact-form__check label {
	margin-bottom: 0;
	font-weight:   var(--weight-regular);
	line-height:   var(--leading-slim);
}

/* =============================================================================
   OFFICES
   ============================================================================= */

.contact-offices {
	padding-top: var(--section-y-md);
	padding-bottom: var(--section-y);
	/* Clears the sticky header for the /contact/#phone-numbers links. */
	scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}

.contact-offices__header {
	max-width:     760px;
	margin-bottom: var(--space-2xl);
}

.contact-offices__header h2 {
	margin-bottom: 10px;
}

p.contact-offices__lead {
	margin-bottom: 0;
	color:         var(--color-text-secondary);
}

.contact-offices__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-l);
}

/* ---- Office card ---- */

.contact-office {
	display:          flex;
	flex-direction:   column;
	overflow:         hidden;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
}

.contact-office__map {
	line-height:      0;
	background-color: var(--color-bg-subtle);
	border-bottom:    1px solid var(--color-border-subtle);
}

.contact-office__map iframe {
	display: block;
	width:   100%;
	height:  200px;
	border:  0;
}

.contact-office__body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        var(--space-l);
}

.contact-office__badge {
	align-self:       flex-start;
	padding:          var(--space-2xs) var(--space-s);
	margin-bottom:    var(--space-s);
	font-size: var(--text-2xs);
	font-weight:      var(--weight-bold);
	letter-spacing:   1px;
	line-height:      1.4;
	text-transform:   uppercase;
	color:            var(--color-bg-primary);
	background-color: var(--color-accent);
	border-radius:    var(--radius-max);
}

/* Branch offices get the quieter treatment so the HQ card reads as primary. */
.contact-office:not(:first-child) .contact-office__badge {
	color:            var(--color-text-secondary);
	background-color: var(--color-bg-subtle);
	border:           1px solid var(--color-border-subtle);
}

.contact-office__name {
	font-size:     var(--text-h4);
	margin-bottom: var(--space-m);
}

.contact-office__name span {
	font-size:   var(--text-body-small);
	font-weight: var(--weight-bold);
	color:       var(--color-text-secondary);
}

p.contact-office__detail {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	margin-bottom: 10px;
	font-size:     var(--text-body-small);
	line-height:   var(--leading-slim);
	color:         var(--color-text-secondary);
}

p.contact-office__detail:last-child {
	margin-top:    auto;
	padding-top:   var(--space-m);
	margin-bottom: 0;
	border-top:    1px solid var(--color-border-subtle);
}

.contact-office__detail svg {
	flex-shrink: 0;
	margin-top:  var(--space-3xs);
	color:       var(--color-accent);
}

.contact-office__detail a {
	font-size:   var(--text-body);
	font-weight: var(--weight-black);
	color:       var(--color-text-primary);
}

.contact-office__detail a:hover {
	color: var(--color-accent);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media ( max-width: 1200px ) {

	.contact-hero__inner {
		grid-template-columns: 1fr 440px;
		gap:                   var(--space-xl);
	}

}

@media ( max-width: 1024px ) {

	/* Form above the offices but below the pitch, so the page still opens
	   with what we do before asking for details. */
	.contact-hero__inner {
		grid-template-columns: 1fr;
		gap:                   var(--space-xl);
	}

	.contact-hero__panel {
		max-width: 600px;
	}

	.contact-offices__grid {
		grid-template-columns: 1fr;
		max-width:             600px;
	}

}

@media ( max-width: 768px ) {

	.contact-hero {
		padding-top: var(--section-y-md);
		padding-bottom: var(--section-y-sm);
	}

	.contact-hero__stats {
		gap: var(--space-l);
	}

	.contact-hero__stat-figure {
		font-size: var(--text-h3);
	}

	.contact-hero__panel {
		padding: var(--space-l);
	}

	.contact-form__row {
		grid-template-columns: 1fr;
	}

	.contact-offices {
		padding-top: var(--section-y-sm);
		padding-bottom: var(--section-y-md);
	}

}

@media ( prefers-reduced-motion: reduce ) {

	.contact-hero__social {
		transition: none;
	}

}