/**
 * THMC main stylesheet.
 *
 * Hand-written, nothing compiled. Templates use the tokens below, never raw
 * hex values, so a change of feel is a token edit. Class names follow BEM
 * (block__element--modifier). Mobile first: the base rules are the phone
 * layout and the 40em, 48em and 64em queries add to it.
 */

/* Tokens ----------------------------------------------------------------- */

:root {
	/* Colour. Contrast is measured against the background named. */
	--thmc-victoria: #534491;      /* Text on white 8.1:1. White text on it 8.1:1. Headings, buttons, links. */
	--thmc-deep: #2b2150;          /* Text on white 14.6:1, on pink 6.1:1. Body text, footer. */
	--thmc-pink: #fc80a5;          /* On white 2.4:1: fills and accents only, never text. Text on it is --thmc-deep. */
	--thmc-pink-tint: #ffeef3;     /* Section background. Victoria and deep text both pass on it. */
	--thmc-lilac-tint: #f0edf8;    /* Section background. Victoria and deep text both pass on it. */
	--thmc-white: #ffffff;
	--thmc-error: #b3123c;         /* On white 6.3:1: form error text and borders. */
	--thmc-text: var(--thmc-deep);
	--thmc-heading: var(--thmc-victoria);
	--thmc-link: var(--thmc-victoria);
	--thmc-border: #cdc7e3;        /* Decorative dividers only. Input borders use --thmc-victoria for 3:1. */
	/* Brand colours as channels, for tints: rgb(var(--thmc-deep-rgb) / 0.5). */
	--thmc-deep-rgb: 43 33 80;
	--thmc-victoria-rgb: 83 68 145;
	--thmc-pink-rgb: 252 128 165;
	--thmc-white-rgb: 255 255 255;
	--thmc-on-dark-muted: rgb(var(--thmc-white-rgb) / 0.82); /* Secondary text on --thmc-deep: 11:1. */

	/* WhatsApp's own colours, for the chat bubble only, so it is recognised at a glance. */
	--thmc-wa-green: #25d366;
	--thmc-wa-green-rgb: 37 211 102;
	--thmc-wa-teal: #075e54;       /* White text on it 7.9:1. */
	--thmc-wa-teal-rgb: 7 94 84;
	--thmc-wa-teal-dark: #054d45;
	--thmc-wa-ink-rgb: 13 40 24;
	--thmc-wa-paper: #ece5dd;
	--thmc-wa-badge: #c8102e;
	--thmc-wa-typing: #8a8a8a;

	/* Type. Each family is a role, so a font swap is a token edit plus thmc_fonts_url(). */
	--thmc-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--thmc-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--thmc-text-base: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
	--thmc-text-xs: 0.8125rem;      /* Labels on chips and badges only. */
	--thmc-text-small: 0.9375rem;
	--thmc-text-large: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	--thmc-display: clamp(3.25rem, 1.25rem + 4.2vw, 5.75rem); /* The homepage heading only. */
	--thmc-h1: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
	--thmc-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--thmc-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--thmc-h4: 1.125rem;
	--thmc-tracking-tight: -0.02em;
	--thmc-tracking-snug: -0.01em;
	--thmc-tracking-wide: 0.05em;  /* Initials and numbers in discs. */
	--thmc-leading: 1.6;
	--thmc-leading-tight: 1.15;

	/* Space. */
	--thmc-space-2xs: 0.25rem;
	--thmc-space-xs: 0.5rem;
	--thmc-space-s: 1rem;
	--thmc-space-m: 1.5rem;
	--thmc-space-l: 2.5rem;
	--thmc-space-xl: 4rem;
	--thmc-space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

	/* Layout. --thmc-content-width matches $content_width in inc/setup.php. */
	--thmc-container: 92rem;       /* One content width for the header, every section and the footer. */
	--thmc-content-width: 47.5rem;
	--thmc-gutter: 1rem;
	--thmc-mobile-bar: 3.5rem;     /* Height of the mobile Call and Book bar; body padding matches it. */

	/* Shape. */
	--thmc-radius-s: 0.5rem;
	--thmc-radius-m: 1rem;
	--thmc-radius-l: 1.5rem;
	--thmc-radius-xl: 2rem;
	--thmc-shadow: 0 0.5rem 1.5rem rgb(var(--thmc-deep-rgb) / 0.08);
	--thmc-shadow-lift: 0 1rem 2.5rem rgb(var(--thmc-deep-rgb) / 0.14);

	/*
	 * Brand devices. The squiggle is a hand-drawn take on the pink line in the
	 * logo, used under headings; the dots texture the deep purple sections;
	 * the wave joins a deep section to a light one.
	 */
	--thmc-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M3 9c12-7 20-7 32 0s20 7 32 0 20-7 32 0 12 5 18 2' fill='none' stroke='%23fc80a5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	--thmc-dots: radial-gradient(circle, rgb(var(--thmc-pink-rgb) / 0.45) 1.5px, transparent 2px);
	--thmc-wave: clamp(2.5rem, 6vw, 5.5rem);

	/* Focus: victoria on light backgrounds, pink on dark ones. */
	--thmc-focus: var(--thmc-victoria);
}

/*
 * From tablets up the side space grows with the screen, so laptop and
 * tablet widths just under the content width (a Surface Pro 7 at 1368px,
 * say) keep a generous margin. Past 1616px the content width takes over.
 */
@media (min-width: 48em) {
	:root {
		--thmc-gutter: clamp(2rem, 6vw - 1.5rem, 4.5rem);
	}
}

/* Base ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Links to a point on the page stop clear of the sticky header. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

@media (min-width: 64em) {
	html {
		scroll-padding-top: 6.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding-bottom: var(--thmc-mobile-bar);
	background: var(--thmc-white);
	color: var(--thmc-text);
	font-family: var(--thmc-font-body);
	font-size: var(--thmc-text-base);
	font-weight: 400;
	line-height: var(--thmc-leading);
}

@media (min-width: 64em) {
	body {
		padding-bottom: 0;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--thmc-space-s);
	color: var(--thmc-heading);
	font-family: var(--thmc-font-display);
	line-height: var(--thmc-leading-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--thmc-h1);
	font-weight: 700;
	letter-spacing: var(--thmc-tracking-tight);
}

h2 {
	font-size: var(--thmc-h2);
	font-weight: 700;
	letter-spacing: var(--thmc-tracking-snug);
}

h3 {
	font-size: var(--thmc-h3);
	font-weight: 600;
}

h4,
h5,
h6 {
	font-size: var(--thmc-h4);
	font-weight: 600;
}

p,
ul,
ol,
dl,
blockquote,
figure {
	margin: 0 0 var(--thmc-space-s);
}

a {
	color: var(--thmc-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 0.15em;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 3px solid var(--thmc-focus);
	outline-offset: 3px;
}

/* Forms */

input,
select,
textarea,
button {
	font: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--thmc-space-xs) var(--thmc-space-s);
	border: 1px solid var(--thmc-victoria);
	border-radius: var(--thmc-radius-s);
	background: var(--thmc-white);
	color: var(--thmc-text);
}

textarea {
	min-height: 9rem;
}

label {
	display: block;
	margin-bottom: var(--thmc-space-2xs);
	font-weight: 500;
}

/* Buttons: every pair below passes 4.5:1, including the hover states. */

.button,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1.5rem;
	border: 2px solid var(--thmc-victoria);
	border-radius: 999px;
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.button:hover {
		transform: translateY(-2px);
	}
}

.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	border-color: var(--thmc-deep);
	background: var(--thmc-deep);
	color: var(--thmc-white);
}

.button--outline {
	background: transparent;
	color: var(--thmc-victoria);
}

.button--outline:hover {
	border-color: var(--thmc-victoria);
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

/* On dark sections the main button is pink with deep text (6.1:1). */
.button--light {
	border-color: var(--thmc-pink);
	background: var(--thmc-pink);
	color: var(--thmc-deep);
}

.button--light:hover {
	border-color: var(--thmc-white);
	background: var(--thmc-white);
	color: var(--thmc-deep);
}

.button--outline-light {
	border-color: var(--thmc-white);
	background: transparent;
	color: var(--thmc-white);
}

.button--outline-light:hover {
	border-color: var(--thmc-white);
	background: var(--thmc-white);
	color: var(--thmc-deep);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-s);
}

.text-link {
	font-weight: 600;
}

.text-link::after {
	content: " \2192";
}

/* Reveal on scroll: main.js adds .reveal, then .is-visible as each part comes into view. */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* WordPress classes ----------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: var(--thmc-space-xs);
	left: var(--thmc-space-xs);
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--thmc-space-xs) var(--thmc-space-s);
	clip: auto;
	background: var(--thmc-white);
	color: var(--thmc-victoria);
	font-weight: 600;
}

.alignleft {
	float: left;
	margin: 0 var(--thmc-space-m) var(--thmc-space-s) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--thmc-space-s) var(--thmc-space-m);
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	margin-top: var(--thmc-space-xs);
	font-size: var(--thmc-text-small);
}

/* Editor, WYSIWYG and imported article output. */

.entry-content > * + * {
	margin-top: var(--thmc-space-s);
}

/* Long links typed into the editor, such as an email address, break on a 320px screen instead of widening the page. */
.entry-content a {
	overflow-wrap: anywhere;
}

.entry-content > :is(h2, h3, h4) {
	margin-top: var(--thmc-space-l);
}

.entry-content h2 {
	font-size: var(--thmc-h3);
}

.entry-content h3 {
	font-size: var(--thmc-h4);
}

.entry-content img {
	border-radius: var(--thmc-radius-m);
}

.entry-content blockquote {
	padding-left: var(--thmc-space-m);
	border-left: 4px solid var(--thmc-pink);
	font-style: italic;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25em;
}

.entry-content li + li {
	margin-top: var(--thmc-space-2xs);
}

/* Tables, such as the cookie list. Wide tables scroll inside their own box on phones. */
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--thmc-text-small);
}

.entry-content caption {
	padding-bottom: var(--thmc-space-xs);
	color: var(--thmc-heading);
	font-weight: 600;
	text-align: left;
}

.entry-content :is(th, td) {
	min-width: 8rem;
	padding: 0.75rem;
	border: 1px solid var(--thmc-border);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	background: var(--thmc-lilac-tint);
	color: var(--thmc-heading);
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Layout ----------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--thmc-container) + 2 * var(--thmc-gutter));
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--thmc-gutter);
	padding-left: var(--thmc-gutter);
}

.container--narrow {
	max-width: calc(var(--thmc-content-width) + 2 * var(--thmc-gutter));
}

.site-main:focus {
	outline: none;
}

/* Sections: the background is passed in by the template, never fixed here. */

.section {
	padding-top: var(--thmc-space-2xl);
	padding-bottom: var(--thmc-space-2xl);
}

.section--white {
	background: var(--thmc-white);
}

.section--lilac {
	background: var(--thmc-lilac-tint);
}

.section--pink {
	background: var(--thmc-pink-tint);
}

.section--deep {
	--thmc-heading: var(--thmc-white);
	--thmc-link: var(--thmc-white);
	--thmc-focus: var(--thmc-pink);
	background: var(--thmc-deep);
	color: var(--thmc-white);
}

/* Two light sections of the same colour in a row read as one. */
.section--white + .section--white,
.section--lilac + .section--lilac,
.section--pink + .section--pink {
	padding-top: 0;
}

.section__header {
	max-width: 44rem;
	margin-bottom: var(--thmc-space-l);
}

/* The brand's pink squiggle under every section heading. Decorative. */
.section__title::after {
	content: "";
	display: block;
	width: 6rem;
	height: 0.9rem;
	margin-top: var(--thmc-space-s);
	background: var(--thmc-squiggle) left center / contain no-repeat;
}

/* A centred heading and introduction, with the squiggle centred under it. */
.section--centred .section__header {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.section--centred .section__title::after {
	margin-right: auto;
	margin-left: auto;
	background-position: center;
}

.section__header--split {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--thmc-space-s);
	max-width: none;
}

.section__title {
	margin-bottom: 0;
}

.section__intro {
	margin-top: var(--thmc-space-s);
	margin-bottom: 0;
	font-size: var(--thmc-text-large);
}

.section__more {
	margin-top: var(--thmc-space-l);
	margin-bottom: 0;
}

/* Header ----------------------------------------------------------------- */

/*
 * The bar stays in view at every width, so the menu and the main button are
 * always to hand. Logged in, it sits below the admin bar, which WordPress
 * fixes to the top from 601px (46px tall, then 32px from 783px).
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--thmc-border);
	background: var(--thmc-white);
	box-shadow: 0 0.25rem 1rem rgb(var(--thmc-deep-rgb) / 0.06);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@media (min-width: 37.5625em) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (min-width: 48.9375em) {
	.admin-bar .site-header {
		top: 32px;
	}
}

/* Once the page scrolls (main.js adds is-scrolled), a deeper shadow. */
.site-header.is-scrolled {
	box-shadow: 0 0.5rem 1.75rem rgb(var(--thmc-deep-rgb) / 0.14);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--thmc-space-s);
	min-height: 4.5rem;
	padding-top: var(--thmc-space-xs);
	padding-bottom: var(--thmc-space-xs);
}

.site-header__brand {
	color: var(--thmc-victoria);
	font-weight: 700;
	font-size: var(--thmc-text-large);
	text-decoration: none;
}

/*
 * The logo grows with the screen: 3.25rem on phones, 4rem on tablets, then
 * from 4rem at 1024px up to 5.5rem from 1280px.
 */
.site-header__logo {
	width: auto;
	height: 3.25rem;
}

@media (min-width: 48em) {
	.site-header__logo {
		height: 4rem;
	}
}

@media (min-width: 64em) {
	.site-header__logo {
		height: clamp(4rem, 9.375vw - 2rem, 5.5rem);
	}
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--thmc-radius-s);
	background: transparent;
	color: var(--thmc-victoria);
	cursor: pointer;
}

.site-header__toggle[hidden] {
	display: none;
}

.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s ease, top 0.25s ease, background-color 0.2s ease;
}

.site-header__toggle-bars {
	position: relative;
}

.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header__toggle-bars::before {
	top: -0.45rem;
}

.site-header__toggle-bars::after {
	top: 0.45rem;
}

/* Open: the three bars fold into a cross. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars {
	background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile without JavaScript: the menu shows in full below the bar. */

.site-header__nav {
	flex-basis: 100%;
	padding-bottom: var(--thmc-space-m);
}

.site-header__nav.is-collapsed {
	display: none;
}

/*
 * Once main.js has revealed the menu button, the menu opens as a panel over
 * the page rather than pushing it down: below the bar, scrolling on its own
 * when taller than the screen, with the page behind dimmed (the shadow) and
 * held still (is-nav-open on the html element). The Call and Book bar stays
 * on top and the WhatsApp bubble steps aside while it is open.
 */
@media (max-width: 63.99em) {
	.site-header__toggle:not([hidden]) ~ .site-header__nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100vh - 100% - var(--thmc-mobile-bar));
		max-height: calc(100dvh - 100% - var(--thmc-mobile-bar));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--thmc-space-xs) var(--thmc-gutter) var(--thmc-space-l);
		border-top: 1px solid var(--thmc-border);
		background: var(--thmc-white);
		box-shadow: 0 100vmax 0 100vmax rgb(var(--thmc-deep-rgb) / 0.5);
	}

	.is-nav-open {
		overflow: hidden;
	}

	.is-nav-open .site-header {
		z-index: 85;
	}

	.is-nav-open .mobile-bar {
		z-index: 86;
	}

	.is-nav-open .wa-chat {
		visibility: hidden;
	}
}

.site-header__cta {
	width: 100%;
	margin-top: var(--thmc-space-m);
}

.primary-nav__list,
.primary-nav__list .sub-menu,
.footer-nav__list,
.legal-nav__list,
.site-footer__list,
.social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list > li {
	border-bottom: 1px solid var(--thmc-lilac-tint);
}

.primary-nav__list a {
	display: block;
	padding: var(--thmc-space-s) 0;
	color: var(--thmc-deep);
	font-weight: 500;
	text-decoration: none;
}

.primary-nav__list a:hover {
	color: var(--thmc-victoria);
}

/* The current page: victoria with a pink underline, so it is not shown by colour alone. */
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a,
.primary-nav__list .current-page-ancestor > a,
.primary-nav__list .current_page_parent > a {
	color: var(--thmc-victoria);
	text-decoration: underline;
	text-decoration-color: var(--thmc-pink);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.35em;
}

.primary-nav__list .sub-menu {
	padding-left: var(--thmc-space-s);
}

/* The services panel on phones: each service with its icon, two across from 40em. */
.mega__list {
	display: grid;
	gap: var(--thmc-space-2xs);
	margin: 0 0 var(--thmc-space-s);
	padding: 0;
	list-style: none;
}

.primary-nav__list .mega__link {
	display: flex;
	align-items: center;
	gap: var(--thmc-space-s);
	padding: var(--thmc-space-xs);
	border-radius: var(--thmc-radius-m);
}

.mega__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--thmc-radius-s);
	background: var(--thmc-lilac-tint);
	color: var(--thmc-victoria);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mega__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.mega__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.mega__title {
	font-weight: 600;
	line-height: 1.3;
}

.mega__summary,
.mega__feature {
	display: none;
}

@media (min-width: 40em) {
	.mega__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The phone menu drops in and its items follow one after another. */
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
	.site-header__nav:not(.is-collapsed) {
		animation: thmc-menu-in 0.3s ease-out both;
	}

	.site-header__nav:not(.is-collapsed) .primary-nav__list > li,
	.site-header__nav:not(.is-collapsed) .site-header__cta {
		animation: thmc-rise 0.4s ease-out both;
	}

	.primary-nav__list > li:nth-child(2) {
		animation-delay: 0.05s;
	}

	.primary-nav__list > li:nth-child(3) {
		animation-delay: 0.1s;
	}

	.primary-nav__list > li:nth-child(4) {
		animation-delay: 0.15s;
	}

	.primary-nav__list > li:nth-child(5) {
		animation-delay: 0.2s;
	}

	.primary-nav__list > li:nth-child(6) {
		animation-delay: 0.25s;
	}

	.primary-nav__list > li:nth-child(n + 7) {
		animation-delay: 0.3s;
	}

	.site-header__nav .site-header__cta {
		animation-delay: 0.35s;
	}
}

@keyframes thmc-menu-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 64em) {
	/*
	 * Once the page scrolls, the tall desktop bar slims down: it slides up by
	 * --thmc-header-trim, its contents slide back down by half that so they
	 * stay centred, and the logo shrinks. All of it is done with transforms,
	 * so the bar keeps its place in the layout and the page never jumps. The
	 * services panel moves up by the same half, so it still meets the bar.
	 */
	.site-header {
		--thmc-header-trim: 1.5rem;
	}

	.site-header.is-scrolled {
		transform: translateY(calc(var(--thmc-header-trim) * -1));
	}

	.site-header__inner {
		position: relative;
		transition: transform 0.3s ease;
	}

	.site-header.is-scrolled .site-header__inner {
		transform: translateY(calc(var(--thmc-header-trim) / 2));
	}

	.site-header__logo {
		transform-origin: left center;
		transition: transform 0.3s ease;
	}

	.site-header.is-scrolled .site-header__logo {
		transform: scale(0.75);
	}

	.site-header.is-scrolled .mega {
		margin-top: calc(var(--thmc-header-trim) / -2);
	}

	.site-header__toggle {
		display: none;
	}

	/* Reset the mobile-only state at the desktop breakpoint. */
	.site-header__nav,
	.site-header__nav.is-collapsed {
		display: flex;
		flex-basis: auto;
		align-items: center;
		gap: var(--thmc-space-l);
		padding-bottom: 0;
	}

	.site-header__cta {
		width: auto;
		margin-top: 0;
	}

	.primary-nav__list {
		display: flex;
		gap: var(--thmc-space-l);
	}

	.primary-nav__list > li {
		position: relative;
		border-bottom: 0;
	}

	/* A pink line grows under a link on hover, and stays under the current page. */
	.primary-nav__list > li > a {
		position: relative;
		padding: var(--thmc-space-xs) 0;
		white-space: nowrap;
	}

	.primary-nav__list .current-menu-item > a,
	.primary-nav__list .current-menu-ancestor > a,
	.primary-nav__list .current-page-ancestor > a,
	.primary-nav__list .current_page_parent > a {
		text-decoration: none;
	}

	.primary-nav__list > li > a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0.1rem;
		left: 0;
		height: 3px;
		border-radius: 2px;
		background: var(--thmc-pink);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s ease;
	}

	.primary-nav__list > li > a:hover::after,
	.primary-nav__list > li:focus-within > a::after,
	.primary-nav__list > .menu-item-has-children:hover > a::after,
	.primary-nav__list > .current-menu-item > a::after,
	.primary-nav__list > .current-menu-ancestor > a::after,
	.primary-nav__list > .current-page-ancestor > a::after,
	.primary-nav__list > .current_page_parent > a::after {
		transform: scaleX(1);
	}

	/* A chevron on items with a submenu, which turns over as it opens. */
	.primary-nav__list > .menu-item-has-children > a {
		padding-right: 1.25rem;
	}

	.primary-nav__list > .menu-item-has-children > a::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0.1rem;
		width: 0.45rem;
		height: 0.45rem;
		margin-top: -0.4rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.25s ease, margin-top 0.25s ease;
	}

	.primary-nav__list > .menu-item-has-children:hover > a::before,
	.primary-nav__list > .menu-item-has-children:focus-within > a::before {
		margin-top: -0.1rem;
		transform: rotate(225deg);
	}

	.primary-nav__list > .menu-item-has-children.is-dismissed > a::before {
		margin-top: -0.4rem;
		transform: rotate(45deg);
	}

	/*
	 * Submenus open on hover and focus without JavaScript, fading in. On the
	 * way out they wait 0.3s first, so a pointer that slips off for a moment
	 * does not close them. main.js adds is-dismissed when Escape is pressed
	 * inside one.
	 */
	.primary-nav__list .sub-menu,
	.mega {
		position: absolute;
		top: 100%;
		z-index: 100;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease 0.3s, transform 0.2s ease 0.3s, visibility 0s linear 0.5s;
	}

	.primary-nav__list .sub-menu {
		left: 0;
		min-width: 14rem;
		padding: var(--thmc-space-xs) var(--thmc-space-s);
		border-radius: var(--thmc-radius-m);
		background: var(--thmc-white);
		box-shadow: var(--thmc-shadow-lift);
	}

	.primary-nav__list li:hover > .sub-menu,
	.primary-nav__list li:focus-within > .sub-menu,
	.primary-nav__list li:hover > .mega,
	.primary-nav__list li:focus-within > .mega {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s;
	}

	.primary-nav__list li.is-dismissed > .sub-menu,
	.primary-nav__list li.is-dismissed > .mega {
		visibility: hidden;
		opacity: 0;
		transition: none;
	}

	/*
	 * The services panel hangs from the header bar rather than its item,
	 * lined up with the right of the content. Its transparent top padding
	 * bridges the gap, so the pointer can cross from the link to the panel.
	 */
	.primary-nav__list > .menu-item--mega {
		position: static;
	}

	.mega {
		right: var(--thmc-gutter);
		width: min(66rem, calc(100% - 2 * var(--thmc-gutter)));
		padding-top: 0.75rem;
	}

	.mega__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 21rem;
		gap: var(--thmc-space-m);
		padding: var(--thmc-space-m);
		border: 1px solid var(--thmc-border);
		border-radius: var(--thmc-radius-xl);
		background: var(--thmc-white);
		box-shadow: 0 1.5rem 3.5rem rgb(var(--thmc-deep-rgb) / 0.18);
	}

	.mega__list {
		margin: 0;
	}

	.primary-nav__list .mega__link {
		align-items: flex-start;
		height: 100%;
		padding: var(--thmc-space-s);
		transition: background-color 0.2s ease;
	}

	.primary-nav__list .mega__link:hover,
	.primary-nav__list .mega__link[aria-current] {
		background: var(--thmc-lilac-tint);
	}

	.mega__icon {
		width: 3rem;
		height: 3rem;
		border-radius: var(--thmc-radius-m);
	}

	.mega__icon svg {
		width: 1.6rem;
		height: 1.6rem;
	}

	.mega__link:hover .mega__icon {
		background: var(--thmc-victoria);
		color: var(--thmc-white);
	}

	.mega__title {
		color: var(--thmc-victoria);
	}

	.mega__summary {
		display: -webkit-box;
		overflow: hidden;
		color: var(--thmc-deep);
		font-size: var(--thmc-text-small);
		font-weight: 400;
		line-height: 1.45;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	/* Beside the services: the Services page's own heading and line on deep purple. */
	.mega__feature {
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--thmc-space-s);
		overflow: hidden;
		padding: var(--thmc-space-l) var(--thmc-space-m);
		border-radius: var(--thmc-radius-l);
		background: linear-gradient(135deg, var(--thmc-deep) 0%, var(--thmc-victoria) 100%);
		color: var(--thmc-white);
	}

	/* The lightbulb from the logo, faint. Decorative. */
	.mega__feature::after {
		content: "";
		position: absolute;
		right: -3rem;
		bottom: -3rem;
		z-index: -1;
		width: 12rem;
		aspect-ratio: 1;
		background: var(--thmc-pink);
		opacity: 0.14;
		-webkit-mask: url(../img/bulb.png) center / contain no-repeat;
		mask: url(../img/bulb.png) center / contain no-repeat;
	}

	.mega__feature-title {
		margin: 0;
		color: var(--thmc-white);
		font-size: var(--thmc-text-large);
		font-weight: 700;
		line-height: 1.25;
	}

	.mega__feature-text {
		margin: 0;
		color: var(--thmc-on-dark-muted);
		font-size: var(--thmc-text-small);
	}

	.primary-nav__list .mega__all {
		padding: 0;
		color: var(--thmc-white);
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--thmc-pink);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.3em;
	}

	.mega__all::after {
		content: " \2192";
	}

	.mega__all:focus-visible,
	.mega__button:focus-visible {
		outline-color: var(--thmc-pink);
	}

	.primary-nav__list .mega__button {
		display: inline-flex;
		margin-top: auto;
		padding: 0.6rem 1.2rem;
		color: var(--thmc-deep);
		font-weight: 600;
	}

	.primary-nav__list .mega__button:hover {
		color: var(--thmc-deep);
	}
}

/*
 * Full desktops: the spacing in the bar tightens from 1500px down to 1280px,
 * so the 5.5rem logo and the whole menu stay on one row.
 */
@media (min-width: 80em) {
	.site-header__nav,
	.site-header__nav.is-collapsed,
	.primary-nav__list {
		gap: clamp(1.5rem, 5vw - 2.5rem, 2.5rem);
	}
}

/* Small desktops (1024 to 1279px): tighter spacing and text keep the bar on one row. */
@media (min-width: 64em) and (max-width: 79.99em) {
	.site-header__nav,
	.site-header__nav.is-collapsed {
		gap: var(--thmc-space-s);
	}

	.primary-nav__list {
		gap: 1rem;
	}

	.primary-nav__list > li > a,
	.site-header__cta {
		font-size: var(--thmc-text-small);
	}

	.site-header__cta {
		padding: 0.6rem 1.1rem;
		white-space: nowrap;
	}
}

/* Inside the open panel, the services slide in one after another. */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
	.primary-nav__list .sub-menu,
	.mega {
		transform: translateY(0.5rem);
	}

	.mega__item {
		opacity: 0;
		transform: translateY(0.4rem);
		transition: opacity 0.2s ease 0.3s, transform 0.2s ease 0.3s;
	}

	.primary-nav__list li:hover > .mega .mega__item,
	.primary-nav__list li:focus-within > .mega .mega__item {
		opacity: 1;
		transform: none;
		transition-delay: calc(0.05s + var(--thmc-i, 0) * 0.04s);
	}

	.mega__link:hover .mega__icon {
		transform: rotate(-6deg) scale(1.06);
	}
}

/* Breadcrumbs: sit on the hero's deep purple so the two read as one. ----- */

.breadcrumbs {
	max-width: none;
	padding-top: var(--thmc-space-s);
	padding-bottom: 0;
	font-size: var(--thmc-text-small);
}

.breadcrumbs:has(+ .section--deep) {
	padding-bottom: var(--thmc-space-s);
	border-bottom: 1px solid rgb(var(--thmc-white-rgb) / 0.08);
	background: var(--thmc-deep);
	color: var(--thmc-on-dark-muted);
}

.breadcrumbs:has(+ .section--deep) a {
	color: var(--thmc-white);
}

.breadcrumbs:has(+ .section--deep) a:focus-visible {
	outline-color: var(--thmc-pink);
}

.breadcrumbs__trail {
	width: 100%;
	max-width: var(--thmc-container);
	margin: 0 auto;
}

.breadcrumbs + .hero {
	padding-top: var(--thmc-space-xl);
}

/* Hero ------------------------------------------------------------------- */

/*
 * Deep purple, with the photo beside the text (portrait) or behind it
 * (backdrop). A backdrop photo is desaturated and blended into the purple so
 * every photo takes on the brand colours, and an overlay keeps the text side
 * dark enough for white text: at least 0.75 alpha of deep purple behind the
 * text, which keeps white above 4.5:1 even over a bright photo.
 */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--thmc-space-2xl);
	padding-bottom: calc(var(--thmc-space-2xl) + var(--thmc-wave));
	background: linear-gradient(135deg, var(--thmc-deep) 0%, var(--thmc-victoria) 100%);
}

/* Without a wave (case studies, where the snapshot bar overlaps instead). */
.hero--flat {
	padding-bottom: calc(var(--thmc-space-2xl) + var(--thmc-space-l));
}

/* The dotted texture, faded out towards the content. Decorative. */
.hero::before {
	content: "";
	position: absolute;
	top: -2rem;
	right: -2rem;
	z-index: 1;
	width: min(60vw, 34rem);
	height: 20rem;
	background: var(--thmc-dots) 0 0 / 1.25rem 1.25rem;
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	pointer-events: none;
}

/* The lightbulb from the logo, faint, where there is no photo. Decorative. */
.hero:not(.hero--image)::after {
	content: "";
	position: absolute;
	right: -3rem;
	bottom: -3rem;
	z-index: 0;
	width: 22rem;
	aspect-ratio: 1;
	background: var(--thmc-pink);
	opacity: 0.1;
	-webkit-mask: url(../img/bulb.png) center / contain no-repeat;
	mask: url(../img/bulb.png) center / contain no-repeat;
	pointer-events: none;
}

.hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__backdrop-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: luminosity;
	opacity: 0.7;
}

/* The overlay that keeps the text legible. */
.hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(var(--thmc-deep-rgb) / 0.88) 0%, rgb(var(--thmc-deep-rgb) / 0.8) 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--thmc-space-l);
	align-items: center;
}

.hero__content {
	max-width: 40rem;
}

.hero__title {
	max-width: 16ch;
	margin-bottom: var(--thmc-space-m);
}

/* The brand's pink squiggle, a hand-drawn take on the line in the logo. Decorative. */
.hero__title::after {
	content: "";
	display: block;
	width: 7.5rem;
	height: 1.125rem;
	margin-top: var(--thmc-space-m);
	background: var(--thmc-squiggle) left center / contain no-repeat;
}

/* An article's date and author, under the heading. */
.hero__meta {
	margin: 0 0 var(--thmc-space-s);
	color: var(--thmc-on-dark-muted);
	font-size: var(--thmc-text-small);
}

.hero__meta .entry-date {
	color: var(--thmc-white);
	font-weight: 600;
}

.hero__text {
	max-width: 36rem;
	color: rgb(var(--thmc-white-rgb) / 0.92);
	font-size: var(--thmc-text-large);
}

.hero__actions {
	margin-top: var(--thmc-space-l);
}

/*
 * The entrance, once, on load: the heading's words rise one after another,
 * the squiggle draws itself, then the text and buttons follow. Only for
 * people who allow motion, so the still page is the finished one.
 */
@media (prefers-reduced-motion: no-preference) {
	.hero__word {
		display: inline-block;
		animation: thmc-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(0.1s + var(--thmc-i, 0) * 0.06s);
	}

	.hero__title::after {
		animation: thmc-draw-x 0.9s ease-out 0.45s both;
	}

	.hero__text {
		animation: thmc-rise 0.7s ease-out 0.35s both;
	}

	.hero__actions {
		animation: thmc-rise 0.7s ease-out 0.5s both;
	}
}

@keyframes thmc-rise {
	from {
		opacity: 0;
		transform: translateY(0.6em);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes thmc-draw-x {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes thmc-pop {
	from {
		opacity: 0;
		scale: 0.6;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes thmc-fade-scale {
	from {
		opacity: 0;
		scale: 0.8;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes thmc-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -0.6rem;
	}
}

@keyframes thmc-spin {
	to {
		rotate: 360deg;
	}
}

/*
 * Pause button for anything that keeps moving (WCAG 2.2.2). It renders
 * hidden; main.js reveals it and adds is-animated, which is what starts the
 * looping motion, so without JavaScript nothing loops.
 */
/* Lined up with the right edge of the content, clear of the WhatsApp bubble. */
.motion-toggle {
	position: absolute;
	right: max(var(--thmc-gutter), calc((100% - var(--thmc-container)) / 2));
	bottom: calc(var(--thmc-wave) + var(--thmc-space-s));
	z-index: 4;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid rgb(var(--thmc-white-rgb) / 0.7);
	border-radius: 50%;
	background: rgb(var(--thmc-deep-rgb) / 0.6);
	color: var(--thmc-white);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.motion-toggle[hidden] {
	display: none;
}

.motion-toggle:hover {
	background: var(--thmc-white);
	color: var(--thmc-deep);
}

.motion-toggle:focus-visible {
	outline-color: var(--thmc-pink);
}

.motion-toggle__icon svg {
	width: 1.1rem;
	height: 1.1rem;
}

.motion-toggle__icon--play,
.motion-toggle[aria-pressed="true"] .motion-toggle__icon--pause {
	display: none;
}

.motion-toggle[aria-pressed="true"] .motion-toggle__icon--play {
	display: block;
}

.is-paused,
.is-paused *,
.is-paused *::before,
.is-paused *::after,
.is-paused::before,
.is-paused::after {
	animation-play-state: paused !important;
}

/* Montage: the photo tiled behind the heading, drifting on a diagonal. */
.hero__montage {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + var(--thmc-montage-w));
	height: calc(100% + var(--thmc-montage-h));
	background: var(--thmc-montage) 0 0 / var(--thmc-montage-w) var(--thmc-montage-h) repeat;
	filter: saturate(0.9);
}

/* The layer moves by exactly one tile, so the loop has no seam. */
@media (prefers-reduced-motion: no-preference) {
	.hero.is-animated .hero__montage {
		animation: thmc-montage 50s linear infinite;
		will-change: transform;
	}
}

@keyframes thmc-montage {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(var(--thmc-montage-w) * -1), calc(var(--thmc-montage-h) * -1), 0);
	}
}

.hero__wave {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: var(--thmc-wave);
	color: var(--thmc-white);
}

/* The wave takes the colour of the section that follows. */
.hero:has(+ .section--lilac) .hero__wave {
	color: var(--thmc-lilac-tint);
}

.hero:has(+ .section--pink) .hero__wave {
	color: var(--thmc-pink-tint);
}

.hero:has(+ .section--deep) .hero__wave {
	display: none;
}

/* Portrait: the photo in the pink blob, with the award badge on its corner. */
.hero__media {
	position: relative;
	justify-self: center;
	width: min(100%, 24rem);
	margin-top: var(--thmc-space-m);
}

/* An organic pink shape behind the portrait: the reusable brand device. */
.hero__media::before {
	content: "";
	position: absolute;
	inset: 6% -8% -4% 10%;
	z-index: 0;
	border-radius: 58% 42% 46% 54% / 46% 54% 46% 54%;
	background: var(--thmc-pink);
}

.hero__image {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--thmc-radius-xl);
	box-shadow: var(--thmc-shadow-lift);
}

.hero__badge {
	position: absolute;
	bottom: -1rem;
	left: -0.5rem;
	z-index: 2;
	width: 9rem;
	padding: var(--thmc-space-xs);
	border-radius: var(--thmc-radius-m);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow-lift);
	transform: rotate(-5deg);
}

.hero__badge-image {
	width: 100%;
	height: auto;
}

/* A dashed pink outline that circles slowly behind the portrait. Decorative. */
.hero--portrait .hero__media::after {
	content: "";
	position: absolute;
	inset: -3% -12% -9% -2%;
	z-index: 0;
	border: 2px dashed rgb(var(--thmc-pink-rgb) / 0.65);
	border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%;
	pointer-events: none;
}

/* The soft pink glow behind the portrait. */
.hero--portrait {
	background:
		radial-gradient(circle at 78% 42%, rgb(var(--thmc-pink-rgb) / 0.22), transparent 38%),
		linear-gradient(135deg, var(--thmc-deep) 0%, var(--thmc-victoria) 100%);
}

/*
 * More of the dotted texture on the homepage header (the portrait look is
 * the homepage's alone): one dotted layer, shown through four soft patches
 * placed clear of the text, between the columns, low on the left, at the
 * top and in the bottom corner. Decorative.
 */
.hero--portrait::after {
	--thmc-patch: radial-gradient(closest-side, #000 25%, transparent 100%);
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--thmc-dots) 0 0 / 1.25rem 1.25rem;
	-webkit-mask:
		var(--thmc-patch) 58% 34% / min(40vw, 20rem) 24rem no-repeat,
		var(--thmc-patch) -4% 84% / min(70vw, 30rem) 16rem no-repeat,
		var(--thmc-patch) 34% -3% / min(60vw, 26rem) 11rem no-repeat,
		var(--thmc-patch) 104% 96% / min(60vw, 28rem) 18rem no-repeat;
	mask:
		var(--thmc-patch) 58% 34% / min(40vw, 20rem) 24rem no-repeat,
		var(--thmc-patch) -4% 84% / min(70vw, 30rem) 16rem no-repeat,
		var(--thmc-patch) 34% -3% / min(60vw, 26rem) 11rem no-repeat,
		var(--thmc-patch) 104% 96% / min(60vw, 28rem) 18rem no-repeat;
	pointer-events: none;
}

/* Floating tags beside the portrait: a key fact and the lead contact's name. */
.hero__chip {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	max-width: 12rem;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border-radius: var(--thmc-radius-m);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow-lift);
	color: var(--thmc-deep);
	line-height: 1.25;
}

.hero__chip-value {
	color: var(--thmc-victoria);
	font-size: var(--thmc-text-large);
	font-weight: 700;
}

.hero__chip-label {
	font-size: var(--thmc-text-xs);
	font-weight: 500;
}

.hero__chip--fact {
	top: 6%;
	left: -0.75rem;
}

.hero__chip--tag {
	right: -0.75rem;
	bottom: 18%;
	border-left: 4px solid var(--thmc-pink);
}

.hero__chip--tag .hero__chip-value {
	font-size: var(--thmc-text-small);
}

/* The services run along the foot of the homepage header. Decorative. */
.hero--ticker {
	padding-bottom: calc(var(--thmc-space-l) + var(--thmc-wave));
}

/* The ticker with the pause button at its end, so the two never overlap. */
.hero__foot {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--thmc-space-s);
	margin-top: var(--thmc-space-xl);
	padding-right: max(var(--thmc-gutter), calc((100% - var(--thmc-container)) / 2));
}

.hero__foot .motion-toggle {
	position: static;
	flex-shrink: 0;
}

/* The ticker with the logo strip under it. */
.hero__strips {
	display: grid;
	flex: 1;
	gap: var(--thmc-space-s);
	min-width: 0;
}

.hero__ticker {
	display: flex;
	min-width: 0;
	overflow: hidden;
	padding: var(--thmc-space-s) 0;
	border-top: 1px solid rgb(var(--thmc-white-rgb) / 0.14);
	border-bottom: 1px solid rgb(var(--thmc-white-rgb) / 0.14);
	background: rgb(var(--thmc-white-rgb) / 0.04);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hero__ticker-list {
	display: flex;
	flex-shrink: 0;
	justify-content: space-around;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__ticker-item {
	display: flex;
	align-items: center;
	gap: var(--thmc-space-l);
	padding-left: var(--thmc-space-l);
	color: var(--thmc-white);
	font-size: var(--thmc-h3);
	font-weight: 600;
	white-space: nowrap;
}

.hero__ticker-item::before {
	content: "";
	flex-shrink: 0;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--thmc-pink);
}

/*
 * Client, award and membership logos from Global Settings: white marks on
 * the purple, sized from each logo's shape (--thmc-logo, set in hero.php)
 * so wide and square logos look the same size. Still, they wrap and centre;
 * once main.js adds is-animated they drift the opposite way to the ticker,
 * with a second, hidden copy for a seamless loop.
 */
.hero__logos {
	--thmc-logo-base: 3rem;
	display: flex;
	min-width: 0;
	overflow: hidden;
	padding: var(--thmc-space-xs) 0;
}

.hero__logos-list {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: var(--thmc-space-m) clamp(2.25rem, 4.5vw, 4.5rem);
	min-width: 100%;
	margin: 0;
	padding: 0 var(--thmc-gutter);
	list-style: none;
}

.hero__logos-list + .hero__logos-list {
	display: none;
}

.hero__logos-item {
	flex-shrink: 0;
	width: calc(var(--thmc-logo-base) * var(--thmc-logo, 1.4));
}

.hero__logo {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.88;
	transition: opacity 0.2s ease;
}

.hero__logos-item:hover .hero__logo {
	opacity: 1;
}

@media (min-width: 48em) {
	.hero__logos {
		--thmc-logo-base: 4.25rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero.is-animated .hero__logos {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}

	.hero.is-animated .hero__logos-list {
		flex-wrap: nowrap;
		justify-content: space-around;
		padding: 0 calc(clamp(2.25rem, 4.5vw, 4.5rem) / 2);
		animation: thmc-ticker-back 70s linear infinite;
	}

	.hero.is-animated .hero__logos-list + .hero__logos-list {
		display: flex;
	}

	.hero__logos:hover .hero__logos-list {
		animation-play-state: paused;
	}
}

@keyframes thmc-ticker-back {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: none;
	}
}

/* Room above the homepage heading, which otherwise sits close under the menu. */
@media (min-width: 48em) {
	.hero--portrait {
		padding-top: calc(var(--thmc-space-2xl) + var(--thmc-space-l));
	}
}

/*
 * The homepage portrait arrives in order: the photo, then the pink blob and
 * the dashed outline fade in behind it, then the badge and tags pop on. The
 * looping parts only move once main.js has added is-animated (and the pause
 * button).
 */
@media (prefers-reduced-motion: no-preference) {
	.hero--portrait .hero__image {
		animation: thmc-pop 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
	}

	.hero--portrait .hero__media::before {
		animation: thmc-fade-scale 0.8s ease-out 0.8s both;
	}

	.hero--portrait .hero__media::after {
		animation: thmc-fade-scale 0.8s ease-out 1.1s both;
	}

	.hero__chip,
	.hero__badge {
		animation: thmc-pop 0.6s cubic-bezier(0.3, 0.7, 0.3, 1.3) both;
		animation-delay: 1.5s;
	}

	.hero__badge {
		animation-delay: 1.4s;
	}

	.hero__chip--tag {
		animation-delay: 1.7s;
	}

	.hero.is-animated .hero__media::before {
		animation: thmc-fade-scale 0.8s ease-out 0.8s both, thmc-blob 18s ease-in-out 1.6s infinite alternate;
	}

	.hero.is-animated .hero__media::after {
		animation: thmc-fade-scale 0.8s ease-out 1.1s both, thmc-spin 50s linear 1.9s infinite;
	}

	.hero.is-animated .hero__chip,
	.hero.is-animated .hero__badge {
		animation: thmc-pop 0.6s cubic-bezier(0.3, 0.7, 0.3, 1.3) 1.5s both, thmc-float 6s ease-in-out 2.2s infinite;
	}

	.hero.is-animated .hero__chip--tag {
		animation-delay: 1.7s, 4s;
	}

	.hero.is-animated .hero__badge {
		animation-delay: 1.4s, 3s;
	}

	.hero.is-animated .hero__ticker-list {
		animation: thmc-ticker 45s linear infinite;
	}

	.hero__ticker:hover .hero__ticker-list {
		animation-play-state: paused;
	}
}

@keyframes thmc-blob {
	0% {
		border-radius: 58% 42% 46% 54% / 46% 54% 46% 54%;
		rotate: 0deg;
	}

	50% {
		border-radius: 42% 58% 60% 40% / 55% 40% 60% 45%;
		rotate: 6deg;
	}

	100% {
		border-radius: 50% 50% 38% 62% / 40% 60% 44% 56%;
		rotate: -5deg;
	}
}

@keyframes thmc-ticker {
	to {
		transform: translateX(-100%);
	}
}

@media (min-width: 64em) {
	/*
	 * Photo headers share the page's one content width, so the heading lines
	 * up with the logo and every section below. The heading may run to 22ch,
	 * two or three lines rather than five. The overlay keeps at least 0.85 of
	 * deep purple behind the text (white above 6:1 over any photo) and lets
	 * the photo show through on the right.
	 */
	.hero--backdrop .hero__inner {
		min-height: 22rem;
	}

	.hero--backdrop .hero__content {
		max-width: none;
	}

	.hero--backdrop .hero__title {
		max-width: 22ch;
	}

	.hero--backdrop .hero__text {
		max-width: 46rem;
	}

	.hero__backdrop::after {
		background: linear-gradient(90deg, rgb(var(--thmc-deep-rgb) / 0.92) 0%, rgb(var(--thmc-deep-rgb) / 0.86) 55%, rgb(var(--thmc-deep-rgb) / 0.6) 80%, rgb(var(--thmc-deep-rgb) / 0.35) 100%);
	}

	/*
	 * The homepage text takes all the room the photo leaves: a larger
	 * heading and a wider line, with the photo column held to 28rem. The gap
	 * leaves space for the fact tag, which hangs 4.5rem off the photo.
	 */
	.hero--portrait .hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(20rem, 30vw, 28rem));
		gap: clamp(5rem, 7vw, 7rem);
	}

	.hero--portrait .hero__content {
		max-width: none;
	}

	.hero--portrait .hero__title {
		max-width: none;
		font-size: var(--thmc-display);
	}

	.hero--portrait .hero__text {
		max-width: 42rem;
	}

	.hero--portrait .hero__media {
		width: 100%;
		margin-top: 0;
		justify-self: end;
	}

	.hero__title {
		max-width: 18ch;
	}

	.hero__badge {
		left: -2.5rem;
		width: 10rem;
	}

	.hero__chip--fact {
		top: 8%;
		left: -4.5rem;
	}

	.hero__chip--tag {
		right: -1rem;
	}
}

/* Page header (default pages, search, archives) ------------------------- */

.page-header {
	padding-top: var(--thmc-space-xl);
	padding-bottom: var(--thmc-space-l);
}

.page-header__title {
	margin-bottom: 0;
}

.page-header__intro {
	max-width: 40em;
	margin-top: var(--thmc-space-s);
	margin-bottom: 0;
	font-size: var(--thmc-text-large);
}

/* Tiles: short title and text cards ------------------------------------- */

.tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile {
	position: relative;
	padding: var(--thmc-space-m);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
}

.section--white .tile {
	background: var(--thmc-lilac-tint);
}

.tile__title {
	font-size: var(--thmc-h4);
}

.tile__text {
	margin-bottom: 0;
}

/*
 * Cards with icons: white cards with a soft edge, the icon in a tinted
 * square, and a pink line along the top that grows across on hover.
 */
.tiles--icons .tile {
	overflow: hidden;
	padding: var(--thmc-space-l) var(--thmc-space-m) var(--thmc-space-m);
	border: 1px solid var(--thmc-border);
	background: var(--thmc-white);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.tiles--icons .tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.3rem;
	background: linear-gradient(90deg, var(--thmc-pink), var(--thmc-victoria));
	transform: scaleX(0.2);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.tiles--icons .tile:hover {
	border-color: transparent;
	box-shadow: var(--thmc-shadow-lift);
}

.tiles--icons .tile:hover::before {
	transform: scaleX(1);
}

.tile__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--thmc-space-m);
	border-radius: var(--thmc-radius-m);
	background: var(--thmc-lilac-tint);
	color: var(--thmc-victoria);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.tile__icon svg {
	width: 1.875rem;
	height: 1.875rem;
}

.tile:nth-child(even) .tile__icon {
	background: var(--thmc-pink-tint);
}

.tiles--icons .tile:hover .tile__icon {
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

@media (prefers-reduced-motion: no-preference) {
	.tiles--icons .tile:hover {
		transform: translateY(-4px);
	}

	.tiles--icons .tile:hover .tile__icon {
		transform: rotate(-6deg) scale(1.06);
	}
}

.tiles--numbered {
	counter-reset: thmc-tile;
}

.tiles--numbered .tile {
	counter-increment: thmc-tile;
}

/* The number in a pink disc above the title. */
.tiles--numbered .tile__title::before,
.tiles--ways .tile__title::before {
	content: counter(thmc-tile, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--thmc-space-s);
	border-radius: 50%;
	background: var(--thmc-pink);
	color: var(--thmc-deep);
	font-size: var(--thmc-text-small);
	font-weight: 700;
	letter-spacing: var(--thmc-tracking-wide);
}

.tiles--ways {
	counter-reset: thmc-tile;
}

.tiles--ways .tile {
	counter-increment: thmc-tile;
	border-top: 0.3rem solid var(--thmc-pink);
}

.tiles--problems .tile {
	position: relative;
	padding-left: calc(var(--thmc-space-m) + 1.5rem);
}

/* A pink dot marks each problem. Decorative. */
.tiles--problems .tile::before {
	content: "";
	position: absolute;
	top: calc(var(--thmc-space-m) + 0.4rem);
	left: var(--thmc-space-m);
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--thmc-pink);
}

/* Service pillars -------------------------------------------------------- */

.pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Card grids (tiles and service cards): one column on phones, two on
 * tablets, and on wide screens the count the template works out
 * (--thmc-cols, from thmc_grid_columns()), so the last row is as full as it
 * can be. Flex rather than grid here so a short last row sits centred.
 */
@media (min-width: 40em) {
	.tiles,
	.pillars {
		--thmc-per-row: 2;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.tiles > *,
	.pillars > * {
		flex: 0 0 calc((100% - (var(--thmc-per-row) - 1) * var(--thmc-space-m)) / var(--thmc-per-row));
		min-width: 0;
	}
}

@media (min-width: 64em) {
	.tiles,
	.pillars {
		--thmc-per-row: var(--thmc-cols, 3);
	}
}

.pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border: 1px solid var(--thmc-border);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* A pink line along the top that grows across the card on hover. Decorative. */
.pillar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.3rem;
	background: var(--thmc-pink);
	transform: scaleX(0.25);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.pillar:hover {
	box-shadow: var(--thmc-shadow-lift);
}

.pillar:hover::before,
.pillar:focus-within::before {
	transform: scaleX(1);
}

.pillar:focus-within {
	outline: 3px solid var(--thmc-focus);
	outline-offset: 3px;
}

.pillar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--thmc-space-s);
	margin-bottom: var(--thmc-space-m);
}

.pillar__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--thmc-radius-m);
	background: var(--thmc-lilac-tint);
	color: var(--thmc-victoria);
}

.pillar__icon svg {
	width: 1.875rem;
	height: 1.875rem;
}

.pillar__number {
	display: inline-grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	margin-left: auto;
	padding: 0 0.6rem;
	border-radius: 999px;
	background: var(--thmc-pink-tint);
	color: var(--thmc-victoria);
	font-size: var(--thmc-text-small);
	font-weight: 700;
}

.pillar__title {
	font-size: var(--thmc-h3);
}

/* One real link stretched over the card keeps a single tab stop. */
.pillar__link {
	color: inherit;
	text-decoration: none;
}

.pillar__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pillar__link:focus-visible {
	outline: none;
}

.pillar__text {
	flex-grow: 1;
}

.pillar__more {
	margin-top: var(--thmc-space-s);
	color: var(--thmc-victoria);
	font-weight: 600;
}

/* Area links on a service page: one pill per area page, wrapping across the row. */
.areas__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--thmc-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.areas__link {
	display: flex;
	align-items: center;
	gap: var(--thmc-space-s);
	height: 100%;
	padding: var(--thmc-space-s) var(--thmc-space-m) var(--thmc-space-s) var(--thmc-space-s);
	border: 1px solid var(--thmc-border);
	border-radius: 999px;
	background: var(--thmc-white);
	color: var(--thmc-victoria);
	font-weight: 600;
	line-height: var(--thmc-leading-tight);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.areas__link:hover {
	border-color: var(--thmc-victoria);
	box-shadow: var(--thmc-shadow-lift);
}

.areas__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--thmc-pink-tint);
	color: var(--thmc-victoria);
}

.areas__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

@media (prefers-reduced-motion: no-preference) {
	.areas__link:hover {
		transform: translateY(-2px);
	}
}

.pillar__more::after {
	content: " \2192";
}

@media (prefers-reduced-motion: no-preference) {
	.pillar:hover {
		transform: translateY(-3px);
	}
}

/* The Handy Network ------------------------------------------------------ */

/* The copy and the diagram stack until there is room for both side by side (80em). */
.network-section__inner {
	display: grid;
	gap: var(--thmc-space-xl);
	align-items: center;
}

@media (min-width: 80em) {
	.network-section__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--thmc-space-2xl);
	}
}

.promises {
	display: grid;
	gap: var(--thmc-space-s);
	margin: var(--thmc-space-m) 0;
	padding: 0;
	list-style: none;
}

.promises__item {
	position: relative;
	padding-left: 2.25rem;
}

/* A tick in a pink circle marks each promise. Decorative. */
.promises__item::before {
	content: "\2713";
	position: absolute;
	top: 0.1rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--thmc-pink);
	color: var(--thmc-deep);
	font-size: 0.875rem;
	font-weight: 700;
}

.promises__title {
	display: block;
	color: var(--thmc-heading);
}

.promises__text {
	display: block;
}

/* Clair's experience, on service pages: a white card with her photo in a pink ring. */
.lead-panel {
	display: grid;
	gap: var(--thmc-space-s);
	margin: var(--thmc-space-l) 0 var(--thmc-space-m);
	padding: var(--thmc-space-m);
	border-left: 4px solid var(--thmc-pink);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow);
}

@media (min-width: 30em) {
	.lead-panel {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		column-gap: var(--thmc-space-m);
	}
}

.lead-panel__photo {
	width: 6rem;
	height: 6rem;
	border: 4px solid var(--thmc-pink);
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 0%;
}

.lead-panel__title {
	margin: 0;
	font-size: var(--thmc-h4);
}

.lead-panel__text {
	margin: var(--thmc-space-xs) 0 0;
}

.lead-panel__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs);
	margin: var(--thmc-space-s) 0 0;
	padding: 0;
	list-style: none;
}

.lead-panel__credentials li {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

/*
 * The diagram. On phones the three nodes stack, joined by dotted pink lines
 * drawn by each node's ::before. From 48em the lead contact sits at the
 * centre of a dashed ring, the specialist areas sit on the ring and the
 * client sits above, joined to the lead by one line. --thmc-ring sets the
 * ring's size and the chip positions are fractions of it, so it scales.
 */
.network {
	--thmc-ring: 26rem;
	--thmc-lead: 10.5rem;
	position: relative;
	display: grid;
	gap: var(--thmc-space-l);
	justify-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.network__node {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	width: 8.5rem;
	aspect-ratio: 1;
	border: 3px solid var(--thmc-pink-tint);
	border-radius: 50%;
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow);
	text-align: center;
}

/* Dotted pink connectors, like the dotted lines of the brand's print work. */
.network__node + .network__node::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 4px;
	height: var(--thmc-space-l);
	margin-left: -2px;
	border-radius: 2px;
	background: repeating-linear-gradient(to bottom, var(--thmc-pink) 0 0.4rem, transparent 0.4rem 0.75rem);
	transform-origin: top;
}

.network__icon {
	color: var(--thmc-pink);
}

.network__icon svg {
	width: 2rem;
	height: 2rem;
}

.network__label {
	padding: var(--thmc-space-xs);
	color: var(--thmc-victoria);
	font-weight: 700;
	line-height: 1.25;
}

.network__node--client .network__label {
	padding-top: 0;
}

.network__node--lead {
	width: var(--thmc-lead);
	border-color: var(--thmc-victoria);
	background: var(--thmc-victoria);
	box-shadow: 0 0 0 0.6rem rgb(var(--thmc-pink-rgb) / 0.35), var(--thmc-shadow-lift);
}

.network__node--lead .network__label {
	color: var(--thmc-white);
}

/* With a photo, the lead node is the photo and its label hangs below as a pill. */
.network__node--photo {
	border: 4px solid var(--thmc-white);
}

.network__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 0%;
}

.network__node--photo .network__label {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1;
	width: max-content;
	max-width: 12rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--thmc-victoria);
	box-shadow: var(--thmc-shadow);
	font-size: var(--thmc-text-small);
	transform: translate(-50%, -60%);
}

.network__node--specialists {
	width: auto;
	min-width: 10rem;
	aspect-ratio: auto;
	padding: var(--thmc-space-m);
	border-radius: var(--thmc-radius-xl);
}

/* Room for the lead's label pill, which hangs below the photo. */
.network__node--photo + .network__node--specialists {
	margin-top: var(--thmc-space-s);
}

.network__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--thmc-space-xs);
	max-width: 18rem;
	margin: var(--thmc-space-s) 0 0;
	padding: 0;
	list-style: none;
}

.network__chip,
.chip {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--thmc-pink-tint);
	color: var(--thmc-deep);
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

@media (min-width: 48em) {
	/* The inline padding leaves room for the chips that sit outside the ring. */
	.network {
		grid-template-columns: var(--thmc-ring);
		grid-template-areas:
			"client"
			"stage";
		padding-inline: 5.5rem;
	}

	.network__node--client {
		grid-area: client;
	}

	.network__node--lead,
	.network__node--specialists {
		grid-area: stage;
	}

	.network__node--lead {
		z-index: 2;
		align-self: center;
	}

	/* One line from the client down to the lead, across the top of the ring. Keep the + in the selector: it has to outrank the base connector rule. */
	.network__node + .network__node--lead::before {
		height: calc(var(--thmc-space-l) + (var(--thmc-ring) - var(--thmc-lead)) / 2);
	}

	/* The specialists node becomes the dashed ring around the lead. */
	.network__node--specialists,
	.network__node--photo + .network__node--specialists {
		width: var(--thmc-ring);
		min-width: 0;
		aspect-ratio: 1;
		margin: 0;
		padding: 0;
		border: 2px dashed rgb(var(--thmc-victoria-rgb) / 0.35);
		border-radius: 50%;
		background: radial-gradient(circle, rgb(var(--thmc-pink-rgb) / 0.18) 0, rgb(var(--thmc-pink-rgb) / 0) 70%);
		box-shadow: none;
	}

	.network__node--specialists::before {
		display: none;
	}

	/* The ring's name sits on its lower edge. */
	.network__node--specialists > .network__label {
		position: absolute;
		top: 100%;
		left: 50%;
		padding: 0.4rem 1rem;
		border-radius: 999px;
		background: var(--thmc-deep);
		color: var(--thmc-white);
		font-size: var(--thmc-text-small);
		white-space: nowrap;
		transform: translate(-50%, -50%);
	}

	.network__chips {
		position: absolute;
		inset: 0;
		max-width: none;
		margin: 0;
	}

	/* Each area sits on the ring, 35 degrees either side of level: three down the right, three down the left. */
	.network__chip {
		--thmc-x: 0px;
		--thmc-y: 0px;
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 0.4rem 0.9rem;
		background: var(--thmc-white);
		box-shadow: var(--thmc-shadow);
		color: var(--thmc-victoria);
		font-weight: 600;
		white-space: nowrap;
		transform: translate(calc(-50% + var(--thmc-x)), calc(-50% + var(--thmc-y)));
	}

	.network__chip:nth-child(1) {
		--thmc-x: calc(var(--thmc-ring) * 0.41);
		--thmc-y: calc(var(--thmc-ring) * -0.287);
	}

	.network__chip:nth-child(2) {
		--thmc-x: calc(var(--thmc-ring) * 0.5);
	}

	.network__chip:nth-child(3) {
		--thmc-x: calc(var(--thmc-ring) * 0.41);
		--thmc-y: calc(var(--thmc-ring) * 0.287);
	}

	.network__chip:nth-child(4) {
		--thmc-x: calc(var(--thmc-ring) * -0.41);
		--thmc-y: calc(var(--thmc-ring) * -0.287);
	}

	.network__chip:nth-child(5) {
		--thmc-x: calc(var(--thmc-ring) * -0.5);
	}

	.network__chip:nth-child(6) {
		--thmc-x: calc(var(--thmc-ring) * -0.41);
		--thmc-y: calc(var(--thmc-ring) * 0.287);
	}
}

/*
 * Once, as the diagram scrolls into view: the line draws in, the areas pop
 * onto the ring one by one and the lead contact pulses three times.
 */
@media (prefers-reduced-motion: no-preference) {
	.network__node + .network__node::before {
		animation: thmc-draw 0.6s ease-out both;
	}

	.network__node--specialists::before {
		animation-delay: 0.3s;
	}

	.network.reveal .network__chip {
		opacity: 0;
	}

	.network.reveal.is-visible .network__chip {
		animation: thmc-pop 0.5s cubic-bezier(0.3, 0.7, 0.3, 1.3) both;
		animation-delay: calc(0.5s + var(--thmc-i, 0) * 0.1s);
	}

	.network.reveal.is-visible .network__node--lead {
		animation: thmc-pulse 2.4s ease-out 1.2s 3;
	}
}

@keyframes thmc-draw {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes thmc-pulse {
	0% {
		box-shadow: 0 0 0 0 rgb(var(--thmc-pink-rgb) / 0.6), var(--thmc-shadow-lift);
	}

	70% {
		box-shadow: 0 0 0 1.5rem rgb(var(--thmc-pink-rgb) / 0), var(--thmc-shadow-lift);
	}

	100% {
		box-shadow: 0 0 0 0.6rem rgb(var(--thmc-pink-rgb) / 0.35), var(--thmc-shadow-lift);
	}
}

/* Network page answers -------------------------------------------------- */

.answers {
	display: grid;
	gap: var(--thmc-space-l) var(--thmc-space-xl);
}

@media (min-width: 48em) {
	.answers {
		grid-template-columns: 1fr 1fr;
	}
}

.answer {
	padding-top: var(--thmc-space-m);
	border-top: 0.3rem solid var(--thmc-pink);
}

.answer__title {
	font-size: var(--thmc-h3);
}

/* Steps ------------------------------------------------------------------ */

.steps {
	display: grid;
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: thmc-step;
}

@media (min-width: 64em) {
	.steps {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.step {
	position: relative;
	padding: var(--thmc-space-m);
	padding-top: calc(var(--thmc-space-m) + 3.25rem);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
	counter-increment: thmc-step;
}

.section--white .step {
	background: var(--thmc-lilac-tint);
}

.step::before {
	content: counter(thmc-step);
	position: absolute;
	top: var(--thmc-space-m);
	left: var(--thmc-space-m);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	font-weight: 700;
}

.step__title {
	font-size: var(--thmc-h4);
}

.step__text {
	margin-bottom: 0;
}

/* Case study cards ------------------------------------------------------ */

.work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.work-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow);
	transition: box-shadow 0.2s ease;
}

.work-card:hover {
	box-shadow: var(--thmc-shadow-lift);
}

@media (prefers-reduced-motion: no-preference) {
	.work-card,
	.card {
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	.work-card:hover,
	.card:hover {
		transform: translateY(-3px);
	}
}

.work-card:focus-within {
	outline: 3px solid var(--thmc-focus);
	outline-offset: 3px;
}

/*
 * Case study images are often client logos, so they are shown whole
 * (contain), never cropped, on the lilac tint; multiply drops a logo's white
 * box so it sits on the tint.
 */
/* The box keeps one shape on every card, capped so a lone full-width card stays short; the logo sits centred inside it. */
.work-card__media {
	display: flex;
	justify-content: center;
	aspect-ratio: 16 / 11;
	max-height: 20rem;
	padding: var(--thmc-space-s);
	border-bottom: 1px solid var(--thmc-border);
	background: var(--thmc-lilac-tint);
}

.work-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.work-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--thmc-space-m);
}

.work-card__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--thmc-space-xs);
	margin-bottom: var(--thmc-space-xs);
}

.work-card__value {
	color: var(--thmc-victoria);
	font-size: var(--thmc-h2);
	font-weight: 700;
	line-height: 1;
}

.work-card__label {
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

.work-card__title {
	font-size: var(--thmc-h3);
}

.work-card__link {
	color: inherit;
	text-decoration: none;
}

.work-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.work-card__link:focus-visible {
	outline: none;
}

.work-card__summary {
	flex-grow: 1;
}

.work-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs);
	margin: var(--thmc-space-s) 0 0;
	padding: 0;
	list-style: none;
}

/* Tags sit above the card's stretched link so each is its own link. */
.tag {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--thmc-pink-tint);
	color: var(--thmc-victoria);
	font-size: var(--thmc-text-small);
	font-weight: 600;
	text-decoration: none;
}

a.tag:hover {
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

/* Lead contact ----------------------------------------------------------- */

.lead__inner {
	display: grid;
	gap: var(--thmc-space-xl);
	align-items: center;
}

@media (min-width: 64em) {
	.lead__inner {
		grid-template-columns: 2fr 3fr;
	}
}

.lead__media {
	position: relative;
	justify-self: center;
	width: min(100%, 24rem);
}

/* The pink blob behind the photo, which is framed like a polaroid. */
.lead__media::before {
	content: "";
	position: absolute;
	inset: -5% 10% 10% -5%;
	border-radius: 46% 54% 58% 42% / 54% 46% 54% 46%;
	background: var(--thmc-pink);
}

.lead__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: 0.75rem 0.75rem 3rem;
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--thmc-radius-s);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow-lift);
	transform: rotate(-2deg);
}

.lead__content .section__header {
	margin-bottom: var(--thmc-space-m);
}

.lead__name {
	font-size: var(--thmc-text-large);
}

.lead__name strong {
	color: var(--thmc-heading);
}

.lead__role {
	display: block;
	font-size: var(--thmc-text-base);
}

.lead__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs);
	margin: var(--thmc-space-m) 0;
	padding: 0;
	list-style: none;
}

.lead__credentials li {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

.lead__quote {
	margin: var(--thmc-space-m) 0 0;
	padding-left: var(--thmc-space-m);
	border-left: 4px solid var(--thmc-pink);
	font-size: var(--thmc-text-large);
	font-style: italic;
}

.lead__quote p {
	margin: 0;
}

/* Testimonials ----------------------------------------------------------- */

/*
 * A horizontal scroll-snap row. scroll-padding matches the row's inline
 * padding so cards never snap against the screen edge; change the two
 * together.
 */
.quotes {
	display: grid;
	grid-auto-columns: min(85%, 26rem);
	grid-auto-flow: column;
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0 0 var(--thmc-space-s);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	overscroll-behavior-x: contain;
}

/* Two whole cards across from 40em and three from 64em, never one cut off at the edge. */
@media (min-width: 40em) {
	.quotes {
		grid-auto-columns: calc((100% - var(--thmc-space-m)) / 2);
	}
}

@media (min-width: 64em) {
	.quotes {
		grid-auto-columns: calc((100% - 2 * var(--thmc-space-m)) / 3);
	}
}

.quote {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--thmc-space-l) var(--thmc-space-m) var(--thmc-space-m);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow);
	scroll-snap-align: start;
}

/* A large pink opening quote mark. Decorative. */
.quote::before {
	content: "\201C";
	position: absolute;
	top: -0.1em;
	left: var(--thmc-space-m);
	color: var(--thmc-pink);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
}

.quote__text {
	margin: var(--thmc-space-s) 0;
}

.quote__text p:last-child {
	margin-bottom: 0;
}

/*
 * Long quotes are cut to seven lines with a fade, so every card is the same
 * height. main.js adds is-clamped, and reveals Read more, only on quotes
 * that run longer, so without JavaScript every quote shows in full.
 */
.quote__text.is-clamped {
	max-height: calc(var(--thmc-leading) * 1em * 7);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
	mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.quote__more {
	align-self: flex-start;
	margin: 0 0 var(--thmc-space-m);
	padding: 0;
	border: 0;
	background: none;
	color: var(--thmc-victoria);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--thmc-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	cursor: pointer;
}

.quote__more[hidden] {
	display: none;
}

.quote__more:hover {
	color: var(--thmc-deep);
}

/* The name, set apart by a rule, with initials in a disc. */
.quote__cite {
	display: flex;
	align-items: center;
	gap: var(--thmc-space-s);
	margin-top: auto;
	padding-top: var(--thmc-space-m);
	border-top: 1px solid var(--thmc-border);
}

.quote__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	font-weight: 700;
	letter-spacing: var(--thmc-tracking-wide);
}

.quote:nth-child(3n + 2) .quote__avatar {
	background: var(--thmc-pink);
	color: var(--thmc-deep);
}

.quote:nth-child(3n + 3) .quote__avatar {
	background: var(--thmc-deep);
}

.quote__who {
	display: flex;
	flex-direction: column;
	margin: 0;
	line-height: 1.3;
}

.quote__name {
	color: var(--thmc-victoria);
}

.quote__detail {
	font-size: var(--thmc-text-small);
}

.scroller-controls {
	display: flex;
	gap: var(--thmc-space-xs);
}

.scroller-controls[hidden] {
	display: none;
}

.scroller-controls__button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid var(--thmc-victoria);
	border-radius: 50%;
	background: var(--thmc-white);
	color: var(--thmc-victoria);
	font-size: 1.25rem;
	cursor: pointer;
}

.scroller-controls__button:hover:not(:disabled) {
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

.scroller-controls__button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Trust strip: key facts and awards (the logos are in the homepage header) */

.trust {
	padding-top: var(--thmc-space-l);
	padding-bottom: var(--thmc-space-l);
	border-bottom: 1px solid var(--thmc-border);
}

.trust--detailed {
	padding-top: var(--thmc-space-2xl);
	padding-bottom: var(--thmc-space-2xl);
	border-bottom: 0;
}

/* The border already divides the strip from the next section, so that section keeps its top padding. */
.trust:not(.trust--detailed) + .section {
	padding-top: var(--thmc-space-2xl);
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: var(--thmc-space-2xs);
	padding-left: var(--thmc-space-s);
	border-left: 4px solid var(--thmc-pink);
}

.stat__value {
	color: var(--thmc-victoria);
	font-size: var(--thmc-h2);
	font-weight: 700;
	letter-spacing: var(--thmc-tracking-tight);
	line-height: 1.1;
}

.stat__label {
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

.stats--results .stat {
	padding: var(--thmc-space-m);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-pink-tint);
}

.awards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--thmc-space-m) var(--thmc-space-l);
	margin: var(--thmc-space-l) 0 0;
	padding: 0;
	list-style: none;
}

.stats + .awards {
	padding-top: var(--thmc-space-l);
	border-top: 1px solid var(--thmc-border);
}

.award__badge {
	width: auto;
	max-width: 11rem;
	height: 5.5rem;
	object-fit: contain;
}

.trust--detailed .awards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	align-items: start;
	margin-top: 0;
}

.trust--detailed .award {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--thmc-space-m);
	align-items: start;
}

.trust--detailed .award__badge {
	width: 7.5rem;
	height: 7.5rem;
}

.award__name {
	font-size: var(--thmc-h4);
	font-weight: 600;
}

.award__text {
	margin-bottom: 0;
}

/* Prices ----------------------------------------------------------------- */

.prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.price {
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border: 1px solid var(--thmc-border);
	border-top: 0.3rem solid var(--thmc-pink);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
}

.price__name {
	font-size: var(--thmc-h4);
}

.price__amount {
	color: var(--thmc-victoria);
	font-size: var(--thmc-h3);
	font-weight: 700;
	line-height: 1.2;
}

.price__list {
	margin: 0;
	padding-left: 1.1em;
	font-size: var(--thmc-text-small);
}

.price__list li + li {
	margin-top: var(--thmc-space-2xs);
}

.prices__note {
	margin-top: var(--thmc-space-m);
	font-size: var(--thmc-text-small);
}

/* FAQs ------------------------------------------------------------------- */

.faqs {
	display: grid;
	gap: var(--thmc-space-s);
	align-items: start;
}

/* Two columns on wide screens so answers keep a readable line length. */
@media (min-width: 64em) {
	.faqs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.faq {
	border-radius: var(--thmc-radius-m);
	background: var(--thmc-lilac-tint);
}

.section--lilac .faq {
	background: var(--thmc-white);
}

.faq__question {
	position: relative;
	padding: var(--thmc-space-m) calc(var(--thmc-space-m) + 2rem) var(--thmc-space-m) var(--thmc-space-m);
	color: var(--thmc-heading);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: var(--thmc-space-m);
	color: var(--thmc-victoria);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
}

.faq[open] .faq__question::after {
	content: "\2212";
}

.faq__answer {
	padding: 0 var(--thmc-space-m) var(--thmc-space-m);
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

/* Text with media -------------------------------------------------------- */

.text-media__inner {
	display: grid;
	gap: var(--thmc-space-l);
	align-items: center;
}

.text-media__copy {
	max-width: var(--thmc-content-width);
}

.text-media--wide .text-media__copy {
	max-width: none;
}

.text-media__media img {
	width: 100%;
	border-radius: var(--thmc-radius-xl);
}

@media (min-width: 64em) {
	.text-media--image .text-media__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--thmc-space-xl);
	}

	.text-media--reverse .text-media__media {
		order: -1;
	}
}

/* Team ------------------------------------------------------------------- */

/* Cards stay at most 22rem wide, so a team of two does not fill the page with photos. */
.team {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 22rem));
	gap: var(--thmc-space-l) var(--thmc-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Team photos are framed like polaroids, each leaning the other way. */
.person__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-bottom: var(--thmc-space-l);
	padding: 0.75rem 0.75rem 2.5rem;
	object-fit: cover;
	border-radius: var(--thmc-radius-s);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow-lift);
	transform: rotate(-2deg);
}

.person:nth-child(even) .person__photo {
	transform: rotate(2deg);
}

.person__name {
	margin-bottom: var(--thmc-space-2xs);
	font-size: var(--thmc-h3);
}

.person__role {
	color: var(--thmc-victoria);
	font-weight: 600;
}

/* Contact ---------------------------------------------------------------- */

.contact {
	display: grid;
	gap: var(--thmc-space-xl);
	align-items: start;
}

/* CF7 gives inputs a size attribute; without min-width: 0 the grid column grows to fit it. */
.contact > * {
	min-width: 0;
}

.contact-card a {
	overflow-wrap: anywhere;
}

.contact-card__email {
	font-size: var(--thmc-text-small);
}

@media (min-width: 64em) {
	.contact {
		grid-template-columns: 3fr 2fr;
	}

	/* The details stay in view beside the form as it is filled in. */
	.contact__aside {
		position: sticky;
		top: 7rem;
	}
}

/* The form in a white card on the lilac section, with the brand gradient along its top. */
.contact__form {
	position: relative;
	overflow: hidden;
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border-radius: var(--thmc-radius-xl);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow-lift);
}

.contact__form::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0.4rem;
	background: linear-gradient(90deg, var(--thmc-pink), var(--thmc-victoria));
}

@media (min-width: 48em) {
	.contact__form {
		padding: var(--thmc-space-xl) var(--thmc-space-l) var(--thmc-space-l);
	}
}

/*
 * The details card: deep purple with the lightbulb, each detail with its
 * icon in a pink-tinted circle. Labels are pink on deep (6.1:1), the details
 * white (14.6:1).
 */
.contact-card {
	position: relative;
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border-radius: var(--thmc-radius-xl);
	background: var(--thmc-white);
}

.contact-card + .contact-card {
	margin-top: var(--thmc-space-m);
}

.contact-card--details {
	--thmc-focus: var(--thmc-pink);
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(150deg, var(--thmc-deep) 0%, var(--thmc-victoria) 100%);
	color: var(--thmc-white);
}

.contact-card--details::after {
	content: "";
	position: absolute;
	right: -3rem;
	bottom: -3rem;
	z-index: -1;
	width: 14rem;
	aspect-ratio: 1;
	background: var(--thmc-pink);
	opacity: 0.12;
	-webkit-mask: url(../img/bulb.png) center / contain no-repeat;
	mask: url(../img/bulb.png) center / contain no-repeat;
	pointer-events: none;
}

.contact-card--details a {
	color: var(--thmc-white);
	font-weight: 600;
	text-decoration-color: rgb(var(--thmc-pink-rgb) / 0.8);
}

.contact-card--booking {
	background: var(--thmc-pink-tint);
}

/* Who they will speak to: Clair's photo in a pink ring beside her name. */
.contact-card--lead {
	display: flex;
	align-items: center;
	gap: var(--thmc-space-m);
	padding-block: var(--thmc-space-m);
	box-shadow: var(--thmc-shadow);
}

.contact-card__photo {
	flex: none;
	width: 6rem;
	height: 6rem;
	border: 4px solid var(--thmc-pink);
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 0%;
}

.contact-card--lead .contact-card__title {
	margin: 0 0 var(--thmc-space-2xs);
	font-size: var(--thmc-h4);
}

.contact-card__person {
	margin: 0;
}

.contact-card__person strong,
.contact-card__person span {
	display: block;
}

.contact-card__person span {
	font-size: var(--thmc-text-small);
}

.contact-card__title {
	font-size: var(--thmc-h3);
}

.contact-card__list {
	display: grid;
	gap: var(--thmc-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-card__item {
	display: flex;
	align-items: center;
	gap: var(--thmc-space-s);
}

.contact-card__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgb(var(--thmc-pink-rgb) / 0.16);
	color: var(--thmc-pink);
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.contact-card__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* On small phones the icons shrink a little, leaving the email address room for its domain. */
@media (max-width: 29.99em) {
	.contact-card--details .contact-card__item {
		gap: 0.75rem;
	}

	.contact-card--details .contact-card__icon {
		width: 2.5rem;
		height: 2.5rem;
	}
}

.contact-card__icon--whatsapp svg {
	width: 1.3rem;
	height: 1.3rem;
}

.contact-card__item:hover .contact-card__icon {
	background: var(--thmc-pink);
	color: var(--thmc-deep);
}

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

.contact-card__label {
	display: block;
	color: var(--thmc-victoria);
	font-size: var(--thmc-text-small);
	font-weight: 600;
}

.contact-card--details .contact-card__label {
	color: var(--thmc-pink);
}

/* The booking card's icon sits above its heading, on the pink tint. */
.contact-card--booking .contact-card__icon {
	margin-bottom: var(--thmc-space-s);
	background: var(--thmc-white);
	color: var(--thmc-victoria);
}

@media (prefers-reduced-motion: no-preference) {
	.contact-card__item:hover .contact-card__icon {
		transform: rotate(-8deg) scale(1.06);
	}
}

/* Contact Form 7, scoped under the form so its own CSS never wins. */

.contact__form .wpcf7-form > p,
.contact__form .wpcf7-form .form-row {
	margin-bottom: var(--thmc-space-m);
}

.contact__form .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--thmc-space-2xs);
}

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form textarea {
	min-height: 3.25rem;
	padding: var(--thmc-space-s);
	border-radius: var(--thmc-radius-m);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact__form textarea {
	min-height: 10rem;
}

.contact__form input:focus-visible,
.contact__form textarea:focus-visible {
	outline: 3px solid var(--thmc-victoria);
	outline-offset: 0;
	box-shadow: 0 0 0 6px rgb(var(--thmc-pink-rgb) / 0.3);
}

.contact__form .wpcf7-list-item {
	display: block;
	margin: 0 0 var(--thmc-space-xs);
}

.contact__form .wpcf7-list-item label {
	display: flex;
	gap: var(--thmc-space-xs);
	align-items: flex-start;
	font-weight: 400;
}

.contact__form .wpcf7-list-item input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	accent-color: var(--thmc-victoria);
}

.contact__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--thmc-space-2xs);
	color: var(--thmc-error); /* 6.3:1 on white: error text. */
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

.contact__form .wpcf7-not-valid {
	border-color: var(--thmc-error);
}

.contact__form .wpcf7 form .wpcf7-response-output {
	margin: var(--thmc-space-m) 0 0;
	padding: var(--thmc-space-s);
	border-radius: var(--thmc-radius-s);
}

.contact__form fieldset {
	min-width: 0;
	margin: 0 0 var(--thmc-space-m);
	padding: 0;
	border: 0;
}

.contact__form legend {
	margin-bottom: var(--thmc-space-xs);
	padding: 0;
	font-weight: 500;
}

/* Phone and business name side by side where there is room. */
.form-grid {
	display: grid;
	gap: 0 var(--thmc-space-m);
}

@media (min-width: 40em) {
	.form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Each step's name reads as a heading inside the card. */
.contact__form .form-step__title {
	margin-bottom: var(--thmc-space-m);
	color: var(--thmc-heading);
	font-size: var(--thmc-h3);
	font-weight: 700;
	line-height: var(--thmc-leading-tight);
}

/*
 * Choices as cards: the real checkbox or radio stays inside its label (so
 * it keeps working with a keyboard and screen readers), and the whole label
 * becomes the card. :has() fills the card when chosen and rings it on focus.
 */
.contact__form .form-choices .wpcf7-form-control {
	display: grid;
	gap: var(--thmc-space-xs);
}

@media (min-width: 40em) {
	.contact__form .form-choices .wpcf7-form-control {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.contact__form .form-choices .wpcf7-list-item {
	margin: 0;
}

.contact__form .form-choices .wpcf7-list-item label {
	position: relative;
	align-items: center;
	height: 100%;
	padding: 0.85rem var(--thmc-space-s);
	border: 2px solid var(--thmc-border);
	border-radius: var(--thmc-radius-m);
	background: var(--thmc-white);
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact__form .form-choices .wpcf7-list-item label:hover {
	border-color: var(--thmc-victoria);
}

.contact__form .form-choices .wpcf7-list-item input {
	flex-shrink: 0;
	margin: 0;
}

.contact__form .form-choices .wpcf7-list-item label:has(input:checked) {
	border-color: var(--thmc-victoria);
	background: var(--thmc-lilac-tint);
	box-shadow: inset 0 0 0 1px var(--thmc-victoria);
}

.contact__form .form-choices .wpcf7-list-item label:has(input:focus-visible) {
	outline: 3px solid var(--thmc-focus);
	outline-offset: 2px;
}

.contact__form .form-choices legend {
	margin-bottom: var(--thmc-space-s);
	font-weight: 600;
}

/*
 * The stepper main.js builds: numbered circles joined by a line that fills
 * with pink as the steps are done (--thmc-progress runs from 0 to 1).
 */
.form-progress {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0 0 var(--thmc-space-l);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.form-progress::before,
.form-progress::after {
	content: "";
	position: absolute;
	top: 1.15rem;
	right: 1.25rem;
	left: 1.25rem;
	height: 4px;
	border-radius: 2px;
	background: var(--thmc-lilac-tint);
}

.form-progress::after {
	right: auto;
	width: calc((100% - 2.5rem) * var(--thmc-progress, 0));
	background: linear-gradient(90deg, var(--thmc-pink), var(--thmc-victoria));
	transition: width 0.45s ease;
}

.form-progress__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--thmc-space-2xs);
	color: var(--thmc-text);
	font-size: var(--thmc-text-small);
	font-weight: 500;
	text-align: center;
}

.form-progress__step:first-child {
	align-items: flex-start;
	text-align: left;
}

.form-progress__step:last-child {
	align-items: flex-end;
	text-align: right;
}

.form-progress__number {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid var(--thmc-lilac-tint);
	border-radius: 50%;
	background: var(--thmc-white);
	color: var(--thmc-victoria);
	font-weight: 700;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.form-progress__step.is-current .form-progress__number {
	border-color: var(--thmc-pink);
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	transform: scale(1.1);
}

.form-progress__step.is-done .form-progress__number {
	border-color: var(--thmc-pink);
	background: var(--thmc-pink);
	color: var(--thmc-deep);
}

.form-progress__step.is-current .form-progress__label {
	color: var(--thmc-victoria);
	font-weight: 700;
}

/* Labels hide on narrow phones, where the numbers carry the progress. */
@media (max-width: 29.99em) {
	.form-progress__label {
		display: none;
	}
}

.form-step__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--thmc-space-s);
	margin-top: var(--thmc-space-l);
}

.form-step__next {
	margin-left: auto;
}

.form-step__next::after {
	content: "\2192";
	margin-left: 0.5rem;
	transition: transform 0.2s ease;
}

.form-step__next:hover::after {
	transform: translateX(3px);
}

/* On the last step, Back and Send sit on one row. */
.contact__form .form-row--submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--thmc-space-s);
	margin-top: var(--thmc-space-l);
	margin-bottom: 0;
}

.contact__form .form-row--submit .form-step__nav {
	margin-top: 0;
}

.contact__form .form-row--submit input[type="submit"] {
	margin-left: auto;
	padding-right: 2rem;
	padding-left: 2rem;
}

/* A new step slides in. */
@media (prefers-reduced-motion: no-preference) {
	.is-stepped .form-step:not([hidden]) {
		animation: thmc-step-in 0.4s ease-out both;
	}
}

@keyframes thmc-step-in {
	from {
		opacity: 0;
		transform: translateX(1.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.form-hint {
	font-size: var(--thmc-text-small);
	font-weight: 400;
}

/* The honeypot: off-screen rather than display: none, which bots skip. */
.thmc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Case study ------------------------------------------------------------- */

/* Pulled up over the hero's lower edge; position and z-index keep it painted above the hero. */
.snapshot {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--thmc-space-m);
	margin: calc(var(--thmc-space-l) * -1) 0 0;
	padding: var(--thmc-space-m);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

.snapshot dt {
	color: var(--thmc-on-dark-muted);
	font-size: var(--thmc-text-small);
	font-weight: 500;
}

.snapshot dd {
	margin: 0;
	font-weight: 600;
}

.snapshot a {
	color: var(--thmc-white);
}

.snapshot a:focus-visible {
	outline-color: var(--thmc-pink);
}

.case-study__media {
	margin-top: var(--thmc-space-l);
}

/* The client's logo, centred in a full-width white frame and never shown wider than its pixels allow. */
.case-study__frame {
	display: flex;
	justify-content: center;
	padding: var(--thmc-space-m);
	border: 1px solid var(--thmc-border);
	border-radius: var(--thmc-radius-xl);
	background: var(--thmc-white);
}

.case-study__frame img {
	width: 100%;
	max-height: 24rem;
	object-fit: contain;
}

/*
 * Logos and other small images carry their pixel width as --thmc-max
 * (thmc_image_max_style()). They are never shown wider than that, and only
 * half as wide on high-density screens, so they stay sharp.
 */
.case-study__frame img,
.work-card__media img {
	max-width: min(100%, var(--thmc-max, 100%));
}

@media (-webkit-min-device-pixel-ratio: 1.2), (min-resolution: 1.2dppx) {
	.case-study__frame img,
	.work-card__media img {
		max-width: min(100%, calc(var(--thmc-max, 200%) / 2));
	}
}

.case-study__story {
	padding-top: var(--thmc-space-xl);
	padding-bottom: var(--thmc-space-2xl);
}

.case-study__story {
	display: grid;
	gap: var(--thmc-space-l);
}

/* The story parts sit side by side on wide screens; the quote spans both. */
@media (min-width: 64em) {
	.case-study__story {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--thmc-space-xl);
	}

	.case-study__quote {
		grid-column: 1 / -1;
	}
}

.case-study__part h2 {
	font-size: var(--thmc-h3);
}

/* Impact in words, as a panel with ticked points, so it scans like the figures. */
.case-study__part--impact {
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-lilac-tint);
}

.case-study__part--impact ul {
	padding-left: 0;
	list-style: none;
}

.case-study__part--impact li {
	position: relative;
	padding-left: 2.25rem;
}

.case-study__part--impact li::before {
	content: "\2713";
	position: absolute;
	top: 0.15rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--thmc-pink);
	color: var(--thmc-deep);
	font-size: 0.875rem;
	font-weight: 700;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.case-study__quote {
	margin: var(--thmc-space-m) 0 0;
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-pink-tint);
}

.case-study__quote blockquote {
	margin: 0;
	font-size: var(--thmc-text-large);
	font-style: italic;
}

.case-study__quote figcaption {
	margin-top: var(--thmc-space-s);
	color: var(--thmc-victoria);
	font-weight: 600;
}

/* Filters ---------------------------------------------------------------- */

.filters {
	margin-bottom: var(--thmc-space-l);
}

.section > .filters {
	margin-top: calc(var(--thmc-space-l) * -1);
}

/* The category links on Insights sit between the header and the cards. */
.hero + .filters {
	margin-bottom: 0;
	padding-top: var(--thmc-space-xl);
}

.hero + .filters + .section {
	padding-top: var(--thmc-space-l);
}

.filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.filters__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--thmc-space-s);
	border: 1px solid var(--thmc-victoria);
	border-radius: 999px;
	color: var(--thmc-victoria);
	font-size: var(--thmc-text-small);
	font-weight: 600;
	text-decoration: none;
}

.filters__link:hover {
	background: var(--thmc-lilac-tint);
}

/* The current filter is shown by fill and underline, not colour alone. */
.filters__link[aria-current] {
	background: var(--thmc-victoria);
	color: var(--thmc-white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Article cards and articles -------------------------------------------- */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--thmc-space-m);
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-white);
	box-shadow: var(--thmc-shadow);
}

.card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.card__body {
	padding: var(--thmc-space-m);
}

.card__title {
	font-size: var(--thmc-h4);
}

/* One real link stretched over the card keeps a single tab stop. */
.card__link {
	color: inherit;
	text-decoration: none;
}

.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card__link:focus-visible {
	outline: none;
}

.card:focus-within {
	outline: 3px solid var(--thmc-focus);
	outline-offset: 3px;
}

.card__meta {
	font-size: var(--thmc-text-small);
}

.card__excerpt {
	margin-bottom: 0;
}

/*
 * The article shares the page's one content width like every other page:
 * the text in a reading column, with the service panel and the talk card in
 * an aside that sticks under the header from 64em. The two sit at the
 * container's edges, so the gap between them grows with the screen.
 */
.article {
	display: grid;
	gap: var(--thmc-space-xl);
	align-items: start;
}

.article > * {
	min-width: 0;
}

.article__body .entry-content {
	max-width: 50rem;
}

.article__aside {
	display: grid;
	gap: var(--thmc-space-m);
}

/* Article titles run long, so they take a step down from the page heading size. */
.single-post .hero__title {
	max-width: 20ch;
	font-size: var(--thmc-h2);
}

@media (min-width: 64em) {
	.article:has(> .article__aside) {
		grid-template-columns: minmax(0, 50rem) minmax(18rem, 24rem);
		justify-content: space-between;
		gap: var(--thmc-space-2xl);
	}

	.article__aside {
		position: sticky;
		top: 7rem;
	}

	.single-post .hero--backdrop .hero__title {
		max-width: 26ch;
	}
}

/* The talk card: the lead contact and the calls to action, on the lilac tint. */
.talk-card {
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border-radius: var(--thmc-radius-xl);
	background: var(--thmc-lilac-tint);
}

.talk-card__photo {
	width: 6rem;
	height: 6rem;
	margin-bottom: var(--thmc-space-s);
	object-fit: cover;
	object-position: 50% 0%;
	border: 4px solid var(--thmc-white);
	border-radius: 50%;
	box-shadow: var(--thmc-shadow);
}

.talk-card__title {
	margin-bottom: var(--thmc-space-xs);
	font-size: var(--thmc-h3);
}

.talk-card__person {
	margin: 0 0 var(--thmc-space-m);
	font-size: var(--thmc-text-small);
}

.talk-card__name {
	display: block;
	font-size: var(--thmc-text-base);
}

.talk-card__actions {
	gap: var(--thmc-space-xs);
}

/* Newsletter ------------------------------------------------------------- */

.newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--thmc-space-m);
}

.newsletter__title {
	font-size: var(--thmc-h3);
}

.newsletter__text {
	margin-bottom: 0;
}

/* End-of-page call to action -------------------------------------------- */

/* Opens with a wave from the section above; a faint photo can sit behind the text. */
.cta-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: calc(var(--thmc-space-2xl) + var(--thmc-wave));
	background: linear-gradient(135deg, var(--thmc-deep) 0%, var(--thmc-victoria) 100%);
}

.cta-banner__wave {
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: var(--thmc-wave);
	color: var(--thmc-white);
}

/* The wave takes the colour of the section above. */
.section--lilac + .cta-banner .cta-banner__wave {
	color: var(--thmc-lilac-tint);
}

.section--pink + .cta-banner .cta-banner__wave {
	color: var(--thmc-pink-tint);
}

.cta-banner__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cta-banner__backdrop-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	mix-blend-mode: luminosity;
	opacity: 0.3;
}

/* The lightbulb from the logo, faint. Decorative. */
.cta-banner::after {
	content: "";
	position: absolute;
	right: -3rem;
	bottom: -4rem;
	z-index: 0;
	width: 20rem;
	aspect-ratio: 1;
	background: var(--thmc-pink);
	opacity: 0.12;
	-webkit-mask: url(../img/bulb.png) center / contain no-repeat;
	mask: url(../img/bulb.png) center / contain no-repeat;
	pointer-events: none;
}

.cta-banner__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--thmc-space-l);
	align-items: center;
}

@media (min-width: 64em) {
	.cta-banner__inner {
		grid-template-columns: 2fr 1fr;
	}

	.cta-banner__actions {
		justify-content: flex-end;
	}
}

.cta-banner__title {
	margin-bottom: var(--thmc-space-s);
}

.cta-banner__text {
	margin-bottom: 0;
	color: var(--thmc-on-dark-muted);
	font-size: var(--thmc-text-large);
}

/* Pagination and post navigation ---------------------------------------- */

.pagination,
.post-navigation {
	margin-top: var(--thmc-space-xl);
}

.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--thmc-space-xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--thmc-space-xs);
	border-radius: var(--thmc-radius-s);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

/* Search form ------------------------------------------------------------ */

.search-form {
	display: flex;
	gap: var(--thmc-space-xs);
	max-width: 32rem;
}

.no-results {
	padding-top: var(--thmc-space-m);
	padding-bottom: var(--thmc-space-2xl);
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
	--thmc-focus: var(--thmc-pink);
	position: relative;
	overflow: hidden;
	padding: var(--thmc-space-xl) 0 var(--thmc-space-l);
	border-top: 1px solid rgb(var(--thmc-white-rgb) / 0.12);
	background: var(--thmc-deep);
	color: var(--thmc-white);
	font-size: var(--thmc-text-small);
}

/* The lightbulb from the logo, faint, top right. Decorative. */
.site-footer::after {
	content: "";
	position: absolute;
	top: -3rem;
	right: -4rem;
	width: 24rem;
	aspect-ratio: 1;
	background: var(--thmc-pink);
	opacity: 0.07;
	-webkit-mask: url(../img/bulb.png) center / contain no-repeat;
	mask: url(../img/bulb.png) center / contain no-repeat;
	pointer-events: none;
}

.site-footer a {
	color: var(--thmc-white);
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--thmc-space-l);
}

.site-footer__about {
	grid-column: 1 / -1;
}

@media (min-width: 64em) {
	/* The contact column is widest so the email address fits on one line from 1280px. */
	.site-footer__inner {
		grid-template-columns: 1.4fr 1.9fr 1.3fr 1fr;
	}

	.site-footer__about {
		grid-column: auto;
	}
}

.site-footer__brand {
	display: inline-block;
	color: var(--thmc-white);
	font-size: var(--thmc-text-large);
	font-weight: 700;
	text-decoration: none;
}

.site-footer__logo {
	width: auto;
	height: 3.5rem;
}

.site-footer__strap {
	max-width: 26rem;
	margin-top: var(--thmc-space-m);
	color: var(--thmc-on-dark-muted);
}

.site-footer__heading {
	margin-bottom: var(--thmc-space-s);
	color: var(--thmc-pink);
	font-size: var(--thmc-text-base);
	font-weight: 600;
}

.site-footer__list li,
.footer-nav__list li {
	margin-bottom: var(--thmc-space-2xs);
}

/* overflow-wrap lets the long email address break on a 320px screen instead of widening the page. */
.site-footer__list a,
.footer-nav__list a {
	display: inline-block;
	padding: var(--thmc-space-2xs) 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.site-footer__list a:hover,
.footer-nav__list a:hover {
	text-decoration: underline;
}

.site-footer__base {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--thmc-space-s) var(--thmc-space-l);
	margin-top: var(--thmc-space-l);
	padding-top: var(--thmc-space-m);
	border-top: 1px solid rgb(var(--thmc-white-rgb) / 0.2);
	color: var(--thmc-on-dark-muted);
}

.site-footer__base p {
	margin: 0;
}

.social,
.legal-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs) var(--thmc-space-m);
}

.social a,
.legal-nav__list a {
	display: inline-block;
	padding: var(--thmc-space-xs) 0;
}

/* Mobile Call and Book bar ---------------------------------------------- */

.mobile-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: flex;
	height: var(--thmc-mobile-bar);
	box-shadow: 0 -0.25rem 1rem rgb(var(--thmc-deep-rgb) / 0.15);
}

/* min-width: 0 lets a long label wrap instead of pushing the bar wider than a 320px screen. */
.mobile-bar__link {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0 var(--thmc-space-xs);
	background: var(--thmc-white);
	line-height: 1.2;
	text-align: center;
	color: var(--thmc-victoria);
	font-weight: 600;
	text-decoration: none;
}

.mobile-bar__link--primary {
	flex: 2;
	background: var(--thmc-victoria);
	color: var(--thmc-white);
}

.mobile-bar__link:focus-visible {
	outline-offset: -4px;
}

@media (min-width: 64em) {
	.mobile-bar {
		display: none;
	}
}

/* Linked cards and the article service panel ----------------------------- */

/* One real link stretched over the card keeps a single tab stop. */
.tile__link {
	color: inherit;
	text-decoration: none;
}

.tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.tile__link:focus-visible {
	outline: none;
}

.tile--link:focus-within {
	outline: 3px solid var(--thmc-focus);
	outline-offset: 3px;
}

.tile__more {
	display: inline-block;
	margin-top: var(--thmc-space-s);
	color: var(--thmc-victoria);
	font-size: var(--thmc-text-small);
	font-weight: 600;
}

.tile__more::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

.tile--link:hover .tile__more::after {
	transform: translateX(4px);
}

/* After an article: the matching service on deep purple, with the lightbulb. */
.service-callout__inner {
	--thmc-focus: var(--thmc-pink);
	position: relative;
	isolation: isolate;
	display: grid;
	gap: var(--thmc-space-m);
	align-items: center;
	overflow: hidden;
	padding: var(--thmc-space-l) var(--thmc-space-m);
	border-radius: var(--thmc-radius-xl);
	background: linear-gradient(135deg, var(--thmc-deep) 0%, var(--thmc-victoria) 100%);
	color: var(--thmc-on-dark-muted);
}

.service-callout__inner::after {
	content: "";
	position: absolute;
	right: -2rem;
	bottom: -3rem;
	z-index: -1;
	width: 12rem;
	aspect-ratio: 1;
	background: var(--thmc-pink);
	opacity: 0.12;
	-webkit-mask: url(../img/bulb.png) center / contain no-repeat;
	mask: url(../img/bulb.png) center / contain no-repeat;
	pointer-events: none;
}

.service-callout__icon {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-pink);
	color: var(--thmc-deep);
}

.service-callout__icon svg {
	width: 2.2rem;
	height: 2.2rem;
}

.service-callout__title {
	margin-bottom: var(--thmc-space-xs);
	color: var(--thmc-white);
	font-size: var(--thmc-h3);
}

.service-callout__text {
	margin: 0;
}

.service-callout__service {
	display: block;
	color: var(--thmc-white);
}

.service-callout__button {
	justify-self: start;
}

/* Brand decoration ------------------------------------------------------- */

/*
 * The tinted sections carry a soft blob of the other brand colour in one
 * corner, and the lilac ones a patch of the pink dots. Drawn behind the
 * content (isolation keeps z-index -1 inside the section). overflow: clip
 * rather than hidden, so sticky panels inside still stick.
 */
.section--lilac,
.section--pink {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.section--lilac::before,
.section--pink::before {
	content: "";
	position: absolute;
	top: -8rem;
	right: -8rem;
	z-index: -1;
	width: min(34rem, 70vw);
	aspect-ratio: 1;
	border-radius: 46% 54% 58% 42% / 54% 46% 54% 46%;
	background: radial-gradient(circle at 35% 35%, rgb(var(--thmc-pink-rgb) / 0.22), rgb(var(--thmc-pink-rgb) / 0) 68%);
	pointer-events: none;
}

.section--pink::before {
	right: auto;
	left: -10rem;
	background: radial-gradient(circle at 60% 40%, rgb(var(--thmc-victoria-rgb) / 0.12), rgb(var(--thmc-victoria-rgb) / 0) 68%);
}

.section--lilac::after {
	content: "";
	position: absolute;
	bottom: 1.5rem;
	left: -1rem;
	z-index: -1;
	width: 14rem;
	height: 9rem;
	background: var(--thmc-dots) 0 0 / 1.25rem 1.25rem;
	opacity: 0.7;
	-webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
	pointer-events: none;
}

/* Card photos ease in slightly on hover. */
.work-card__media,
.card__media {
	overflow: hidden;
}

.work-card__media img,
.card__media img {
	transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.work-card:hover .work-card__media img,
	.card:hover .card__media img {
		transform: scale(1.05);
	}

	/* The squiggle under each section heading draws itself as the heading scrolls in. */
	.section__header.reveal .section__title::after {
		clip-path: inset(0 100% 0 0);
		transition: clip-path 0.9s ease 0.35s;
	}

	.section__header.reveal.is-visible .section__title::after {
		clip-path: inset(0 0 0 0);
	}

	/* An opened answer fades in. */
	.faq[open] .faq__answer {
		animation: thmc-rise 0.35s ease-out both;
	}

	/* Steps lift on hover, and their number turns pink. */
	.step {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.step:hover {
		box-shadow: var(--thmc-shadow-lift);
		transform: translateY(-4px);
	}

	.step::before {
		transition: background-color 0.25s ease, color 0.25s ease;
	}

	.step:hover::before {
		background: var(--thmc-pink);
		color: var(--thmc-deep);
	}

	/* The problem cards lift too, with their pink dot growing. */
	.tiles--problems .tile {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.tiles--problems .tile:hover {
		box-shadow: var(--thmc-shadow);
		transform: translateY(-3px);
	}

	.tiles--problems .tile::before {
		transition: transform 0.25s ease;
	}

	.tiles--problems .tile:hover::before {
		transform: scale(1.4);
	}
}

/* Footer Cookie settings button, styled like the legal links beside it. */
.site-footer__cookies {
	padding: var(--thmc-space-xs) 0;
	border: 0;
	background: none;
	color: var(--thmc-white);
	font-size: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.site-footer__cookies[hidden] {
	display: none;
}

/* WhatsApp chat bubble -------------------------------------------------- */

/*
 * Bottom right of every page, above the Call and Book bar on phones. It
 * keeps WhatsApp's own colours so it is recognised at a glance: white text
 * sits on the dark green #075e54 (7.9:1), and a thin dark ring gives the
 * light green button its edge against the page.
 */
.wa-chat {
	position: fixed;
	right: var(--thmc-space-s);
	bottom: calc(var(--thmc-mobile-bar) + var(--thmc-space-s));
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.85rem;
	pointer-events: none;
}

.wa-chat > * {
	pointer-events: auto;
}

.wa-chat[hidden] {
	display: none;
}

@media (min-width: 64em) {
	.wa-chat {
		right: var(--thmc-space-m);
		bottom: var(--thmc-space-m);
	}
}

/* While the cookie banner is open on a phone, the bubble waits behind it. */
@media (max-width: 63.99em) {
	.has-cookie-banner .wa-chat {
		display: none;
	}
}

.wa-chat__launcher {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--thmc-wa-green);
	color: var(--thmc-white);
	box-shadow: 0 0 0 1px rgb(var(--thmc-wa-teal-rgb) / 0.7), 0 0.75rem 1.75rem rgb(var(--thmc-wa-ink-rgb) / 0.3);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.wa-chat__launcher:hover {
	transform: scale(1.06);
}

.wa-chat__launcher-icon svg {
	width: 2rem;
	height: 2rem;
}

.wa-chat__badge {
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.3rem;
	border: 2px solid var(--thmc-white);
	border-radius: 999px;
	background: var(--thmc-wa-badge);
	color: var(--thmc-white);
	font-size: var(--thmc-text-xs);
	font-weight: 700;
	line-height: 1.1rem;
	text-align: center;
}

.wa-chat__panel {
	width: min(21rem, calc(100vw - 2rem));
	overflow: hidden;
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-wa-paper);
	box-shadow: 0 1.25rem 3rem rgb(var(--thmc-wa-ink-rgb) / 0.3);
	transform-origin: bottom right;
}

.wa-chat__panel[hidden] {
	display: none;
}

.wa-chat__header {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 0.85rem;
	background: var(--thmc-wa-teal);
	color: var(--thmc-white);
}

.wa-chat__avatar {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--thmc-white);
	object-fit: cover;
	object-position: 50% 0%;
}

.wa-chat__avatar--icon {
	display: grid;
	place-items: center;
	color: var(--thmc-wa-teal);
}

.wa-chat__avatar--icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.wa-chat__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	line-height: 1.3;
}

.wa-chat__id strong {
	font-size: var(--thmc-text-small);
}

.wa-chat__id span {
	color: rgb(var(--thmc-white-rgb) / 0.85);
	font-size: var(--thmc-text-xs);
}

.wa-chat__close {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--thmc-white);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.wa-chat__close:hover {
	background: rgb(var(--thmc-white-rgb) / 0.16);
}

.wa-chat__close:focus-visible,
.wa-chat__cta:focus-visible {
	outline: 3px solid var(--thmc-white);
	outline-offset: -5px;
}

/* A faint dotted wash, like WhatsApp's chat background. */
.wa-chat__body {
	position: relative;
	min-height: 5.5rem;
	padding: 1.1rem 0.85rem 1.3rem;
	background-color: var(--thmc-wa-paper);
	background-image: radial-gradient(rgb(var(--thmc-wa-ink-rgb) / 0.06) 1px, transparent 1px);
	background-size: 18px 18px;
}

.wa-chat__bubble {
	position: relative;
	max-width: 92%;
	margin: 0;
	padding: 0.6rem 0.8rem;
	border-radius: 0 0.75rem 0.75rem 0.75rem;
	background: var(--thmc-white);
	box-shadow: 0 1px 1px rgb(var(--thmc-wa-ink-rgb) / 0.14);
	color: var(--thmc-deep);
	font-size: var(--thmc-text-small);
	line-height: 1.5;
}

.wa-chat__bubble::before {
	content: "";
	position: absolute;
	top: 0;
	left: -8px;
	border: 8px solid transparent;
	border-top-color: var(--thmc-white);
	border-right: 0;
}

.wa-chat__typing {
	display: none;
}

.wa-chat__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	background: var(--thmc-wa-teal);
	color: var(--thmc-white);
	font-weight: 600;
	text-decoration: none;
}

.wa-chat__cta:hover {
	background: var(--thmc-wa-teal-dark);
	color: var(--thmc-white);
}

.wa-chat__cta-icon svg {
	width: 1.2rem;
	height: 1.2rem;
}

/*
 * The panel pops up; inside it, three dots "type" for a moment before the
 * welcome message appears. The button pulses three times a few seconds
 * after the page loads, then stops.
 */
@media (prefers-reduced-motion: no-preference) {
	.wa-chat__panel:not([hidden]) {
		animation: thmc-wa-pop 0.2s ease-out;
	}

	.wa-chat__typing {
		position: absolute;
		top: 1.1rem;
		left: 0.85rem;
		display: inline-flex;
		gap: 4px;
		padding: 0.75rem 0.85rem;
		border-radius: 0 0.75rem 0.75rem 0.75rem;
		background: var(--thmc-white);
		animation: thmc-gone 0s linear 0.9s both;
	}

	.wa-chat__typing span {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--thmc-wa-typing);
		animation: thmc-typing 0.9s ease-in-out infinite;
	}

	.wa-chat__typing span:nth-child(2) {
		animation-delay: 0.15s;
	}

	.wa-chat__typing span:nth-child(3) {
		animation-delay: 0.3s;
	}

	.wa-chat__panel:not([hidden]) .wa-chat__bubble {
		animation: thmc-pop 0.35s ease-out 0.9s both;
	}

	.wa-chat__launcher::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		animation: thmc-wa-pulse 1.8s ease-out 3s 3;
	}
}

@keyframes thmc-wa-pop {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes thmc-gone {
	to {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes thmc-typing {
	0%,
	60%,
	100% {
		opacity: 0.4;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

@keyframes thmc-wa-pulse {
	from {
		box-shadow: 0 0 0 0 rgb(var(--thmc-wa-green-rgb) / 0.6);
	}

	to {
		box-shadow: 0 0 0 1.1rem rgb(var(--thmc-wa-green-rgb) / 0);
	}
}

/* Cookie banner --------------------------------------------------------- */

/* Bottom left on desktop; across the foot of the screen, above the Call and Book bar, on phones. */
.cookie-banner {
	--thmc-focus: var(--thmc-pink);
	position: fixed;
	right: var(--thmc-space-s);
	bottom: calc(var(--thmc-mobile-bar) + var(--thmc-space-s));
	left: var(--thmc-space-s);
	z-index: 90;
	padding: var(--thmc-space-m);
	border: 1px solid rgb(var(--thmc-white-rgb) / 0.12);
	border-radius: var(--thmc-radius-l);
	background: var(--thmc-deep);
	box-shadow: 0 1.5rem 3.5rem rgb(var(--thmc-deep-rgb) / 0.35);
	color: var(--thmc-on-dark-muted);
	font-size: var(--thmc-text-small);
}

.cookie-banner[hidden] {
	display: none;
}

@media (min-width: 64em) {
	.cookie-banner {
		right: auto;
		bottom: var(--thmc-space-m);
		left: var(--thmc-space-m);
		width: 25rem;
	}
}

.cookie-banner__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--thmc-space-xs);
}

.cookie-banner__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgb(var(--thmc-pink-rgb) / 0.18);
	color: var(--thmc-pink);
}

.cookie-banner__icon svg {
	width: 1.3rem;
	height: 1.3rem;
}

.cookie-banner__title {
	margin: 0;
	color: var(--thmc-white);
	font-size: var(--thmc-text-base);
	font-weight: 600;
}

.cookie-banner__text {
	margin: 0 0 var(--thmc-space-s);
}

.cookie-banner a {
	color: var(--thmc-white);
}

.cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--thmc-space-xs);
}

.cookie-banner__actions .button {
	flex: 1 1 auto;
	min-height: 2.75rem;
	padding: 0.55rem 1.1rem;
}

@media (prefers-reduced-motion: no-preference) {
	.cookie-banner:not([hidden]) {
		animation: thmc-rise 0.45s ease-out both;
	}
}