/* Contact details */

.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	list-style: none;
}

.contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: clamp(24px, 3vw, 36px);
	border-radius: var(--radius-lg);
	background: var(--tint);
}

.blk--tint .contact-card {
	background: var(--surface);
}

.contact-card .icon-chip {
	margin-bottom: 14px;
}

.contact-card__label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-text);
}

.contact-card__value {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--heading);
	overflow-wrap: anywhere;
}

a.contact-card__value {
	text-decoration: none;
}

a.contact-card__value:hover {
	text-decoration: underline;
	text-decoration-color: var(--amber);
	text-underline-offset: 5px;
}

.contact-card__value--lg {
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}

/* Offices as stations on one line: the strand runs across the top of each
   card in its swatch and stops at a dot. */
.office-route {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	margin-top: clamp(48px, 6vw, 80px);
	list-style: none;
}

.office-route--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.office-route--1 { grid-template-columns: minmax(0, 560px); }

.office {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.office__strand {
	position: relative;
	display: block;
	width: 100%;
	height: 6px;
	margin-bottom: 24px;
	border-radius: 6px;
	background: var(--swatch);
}

.office__dot {
	position: absolute;
	top: 50%;
	left: 40px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: 0 0 0 6px var(--surface);
	transform: translateY(-50%);
}

.blk--tint .office__dot { box-shadow: 0 0 0 6px var(--tint); }
.blk--dark .office__dot { box-shadow: 0 0 0 6px var(--ink); }

.office__name {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-text);
}

.office__town {
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

.office__address {
	font-style: normal;
	line-height: 1.7;
}

.office__directions {
	margin-top: 10px;
}

.blk--dark .contact-card { background: var(--ink-3); }
.blk--dark .contact-card__value,
.blk--dark .office__town { color: #fff; }
.blk--dark .contact-card__label,
.blk--dark .office__name { color: var(--amber); }

@media (max-width: 1023px) {
	.contact-cards { grid-template-columns: minmax(0, 1fr); }
	.office-route,
	.office-route--2 { grid-template-columns: minmax(0, 1fr); }
}

/* The phone card leads: navy, the number large, a strand along its foot. */
.contact-cards {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}

.contact-card {
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.contact-card:first-child {
	justify-content: flex-end;
	background: var(--ink);
}

.contact-card:first-child::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--oms-colour-one) 0 20%, var(--oms-colour-two) 20% 40%, var(--oms-colour-three) 40% 60%, var(--oms-colour-four) 60% 80%, var(--oms-colour-five) 80% 100%);
}

.contact-card:first-child .contact-card__label { color: var(--amber); }
.contact-card:first-child .contact-card__value { color: #fff; }

.contact-card__value--lg {
	font-size: clamp(2rem, 1.25rem + 2vw, 3rem);
}

@media (max-width: 1023px) {
	.contact-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Office maps: OpenStreetMap, loaded with the page (it sets no cookies). */
.office-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-bottom: 28px;
	border-radius: var(--radius-lg);
	background: var(--tint);
	overflow: hidden;
}

.office-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}