/* Drop Us a Line. Underline links (the source's animated underline): a 1.5px line
   drawn in from the left under the pointer, 0.25s ease-out. */
p.is-style-info-link a,
p.is-style-info-booking a {
	color: inherit;
}

p.is-style-info-link a::after,
p.is-style-info-booking a::after {
	content: "";
	position: absolute;
	bottom: 0.002em;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease-out;
}

p.is-style-info-link a:hover::after,
p.is-style-info-link a:focus-visible::after,
p.is-style-info-booking a:hover::after,
p.is-style-info-booking a:focus-visible::after {
	transform: scaleX(1);
}

/* BOOK AN APPOINTMENT keeps the source's own face stack. */
p.is-style-info-booking {
	font-family: "Futura PT", Futura, sans-serif;
}

/* Section titles: the hairline (1px, 50px; 195px on phones) runs under the
   title, which sits 45px in (22px on tablets) on a white ground. */
.wp-block-group.is-style-info-section-title {
	display: flow-root;
}

.wp-block-group.is-style-info-section-title > hr.wp-block-separator {
	width: 50px;
	height: 0;
	margin: 15px 0 0;
	border: 0;
	border-top: 1px solid #000;
	opacity: 1;
}

.wp-block-group.is-style-info-section-title > h2 {
	width: fit-content;
	margin: -12px 0 0 45px;
	padding: 0 0 0 5px;
}

/* The phone hero: hairlines from either edge (half the width less 105px and
   75px) above and below the centred title, each sliding in across its half. */
.wp-block-cover.is-style-info-mobile-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.wp-block-cover.is-style-info-mobile-hero > .wp-block-cover__inner-container > hr {
	--atelier-slide: -50vw;

	align-self: flex-start;
	width: calc(50% - 105px);
	height: 0;
	margin: 15px 0 -34px;
	border: 0;
	border-top: 1px solid #fff;
	opacity: 1;
}

.wp-block-cover.is-style-info-mobile-hero > .wp-block-cover__inner-container > h1 {
	width: 280px;
	margin: 0 0 -25px;
}

.wp-block-cover.is-style-info-mobile-hero > .wp-block-cover__inner-container > hr:last-child {
	--atelier-slide: 50vw;

	align-self: flex-end;
	width: calc(50% - 75px);
	margin: -15px 0 15px;
}

/* The phone quick links lie over the hero's foot. */
.wp-block-group.is-style-info-quick-links {
	z-index: 2;
}

/* The contact lines: two columns on tablets, address and e-mail first. */
.wp-block-group.is-style-info-contact-lines a {
	color: inherit;
}

/* The map, in greyscale and 10% brighter. */
.wp-block-group.is-style-info-map iframe {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
	filter: brightness(1.1) saturate(0);
}

/* A portrait's veil and link fade in under the pointer (0.2s ease). */
.wp-block-group.is-style-info-photo-reveal > * {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wp-block-group.is-style-info-photo-reveal:hover > *,
.wp-block-group.is-style-info-photo-reveal:focus-within > * {
	opacity: 1;
}

/* The people row: portraits share what the 50% booking column leaves (420px at
   most); the department panel's two columns share it evenly. */
.wp-block-group.is-style-info-designers > :not(:last-child) {
	max-width: 420px;
}

.wp-block-group.is-style-info-designers > :last-child {
	flex-shrink: 0;
}

.wp-block-group.is-style-info-strips a,
.wp-block-group.is-style-info-designers a,
.wp-block-group.is-style-info-departments a {
	color: inherit;
}

@media (768px <= width <= 1024px) {
	.wp-block-group.is-style-info-section-title > h2 {
		margin-left: 22px;
	}

	.wp-block-group.is-style-info-contact-lines {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group.is-style-info-contact-lines > :nth-child(2) {
		order: 3;
	}

	.wp-block-group.is-style-info-contact-lines > :nth-child(3) {
		order: 2;
	}

	.wp-block-group.is-style-info-contact-lines > :nth-child(4) {
		order: 4;
	}
}

@media (width <= 767px) {
	.wp-block-group.is-style-info-section-title > hr.wp-block-separator {
		width: 195px;
	}

	.wp-block-group.is-style-info-section-title > h2 {
		margin: -12px auto 0;
		padding: 0 5px;
	}

	/* The designers title (the one with a desktop hairline too) pads its right
	   side only. */
	.wp-block-group.is-style-info-section-title > hr + hr + h2 {
		padding: 0 5px 0 0;
	}

	.wp-block-group.is-style-info-map iframe {
		height: 300px;
	}

	.wp-block-group.is-style-info-designers > :nth-child(n),
	.wp-block-group.is-style-info-departments > * > * {
		flex-basis: auto;
	}
}