/* 321Charge site styles. Global styles compile to :where(), so one BEM class wins here. */

:root {
	--c-neon: var(--wp--preset--color--neon);
	--c-ink: var(--wp--preset--color--ink);
	--c-black: var(--wp--preset--color--black);
	--c-bar: var(--wp--preset--color--charcoal);
	--c-white: var(--wp--preset--color--white);
	--c-neon-soft: var(--wp--custom--color--neon-soft);
	--c-grey: var(--wp--custom--color--grey);
	--c-slate: var(--wp--custom--color--slate);
	--c-banner: var(--wp--custom--color--banner);
	--c-grey-bg: var(--wp--custom--color--grey-bg);
	--c-footer-heading: var(--wp--custom--color--footer-heading);
	--c-footer-link: var(--wp--custom--color--footer-link);
	--c-gutter: var(--wp--custom--gutter);
	--c-font-head: var(--wp--preset--font-family--head);
	--c-font-body: var(--wp--preset--font-family--body);

	/* One content width for every section, so edges line up down the page. */
	--c-wrap: 75rem;
	--c-lead: clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);
	--c-muted: #4a5054;

	--c-header-h: 4rem;
	--c-header-pad: 1rem;
	--c-logo-w: 7.75rem;
	--c-nav-size: 1.0625rem;
	--c-nav-gap: clamp(1.5rem, 1.4vw, 2.25rem);
	--c-cta-size: 0.875rem;
	--c-cta-w: auto;
	--c-cta-h: 2.5rem;
	--c-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* The narrowest phones tighten the bar's side padding. */
@media (max-width: 379px) {
	:root {
		--c-header-pad: 0.75rem;
	}
}

@media (min-width: 700px) {
	:root {
		--c-header-h: 4.5rem;
		--c-header-pad: var(--c-gutter);
		--c-logo-w: 9.25rem;
		--c-cta-size: 0.9375rem;
		--c-cta-h: 2.75rem;
	}
}

@media (min-width: 1100px) {
	:root {
		--c-header-h: 4.75rem;
		--c-logo-w: 9.75rem;
		--c-cta-size: 0.9375rem;
		--c-cta-h: 2.75rem;
	}
}

/* Base */

html {
	scroll-padding-top: calc(var(--c-header-h) + var(--c-admin-bar) + 1rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--c-white);
	overflow-wrap: break-word;
}

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

h1,
h2,
h3 {
	text-wrap: balance;
}

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

.c-site-header :focus-visible,
.c-site-footer :focus-visible,
.c-overlay :focus-visible {
	outline-color: var(--c-neon);
}

body .skip-link.screen-reader-text:focus {
	top: calc(var(--c-admin-bar) + 0.5rem);
	left: 0.5rem;
	z-index: 100001;
	padding: 0.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--c-neon);
	color: var(--c-black);
	font-family: var(--c-font-head);
	font-size: 1.125rem;
	text-decoration: none;
	box-shadow: 0 0 0 3px var(--c-black);
}

/* Short pages keep the footer at the bottom of the window. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.c-main {
	flex: 1 0 auto;
	min-height: 40vh;
}

/* Edge offers its Visual Search button on any image the pointer rests on; images that take no pointer never get it.
   Clicks still reach the link or button around an image. Front end only, so the editor can still select images. */
.wp-site-blocks img {
	pointer-events: none;
}

/* Header */

.c-site-header {
	position: sticky;
	top: var(--c-admin-bar);
	z-index: 50;
	background-color: var(--c-bar);
}

/* Core un-fixes the admin bar at 600 and below, so it scrolls away and the header sticks to the top. */
@media (max-width: 600px) {
	.c-site-header {
		top: 0;
	}
}

.c-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-header-pad));
	min-height: var(--c-header-h);
	margin-inline: auto;
	padding-inline: var(--c-header-pad);
	background-color: var(--c-bar);
	color: var(--c-white);
}

.c-header__logo {
	display: block;
	flex: 0 0 auto;
	width: var(--c-logo-w);
	line-height: 0;
}

.c-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Core copies the block class onto the inner list too, so position rules target the nav element only.
   Equal auto margins centre the links between logo and button, as in the Canva header. */
.c-header nav.c-nav {
	flex: 0 1 auto;
	position: relative;
	top: 0.125rem;
	margin-inline: auto;
	font-family: var(--c-font-head);
	font-size: var(--c-nav-size);
	font-weight: 700;
	line-height: 1.2;
}

.c-header .c-nav .wp-block-navigation__container {
	gap: var(--c-nav-gap);
}

.c-header .c-nav .wp-block-navigation-item__content {
	padding: 0;
	color: var(--c-white);
	text-decoration: none;
	white-space: nowrap;
}

.c-header .c-nav .wp-block-navigation-item__content:hover,
.c-header .c-nav .current-menu-item > .wp-block-navigation-item__content,
.c-header .c-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--c-neon);
}

/* The designed chevron: a solid 20 x 12 V masked on a pseudo-element, since a mask on the button clips its focus ring. */
.c-header .c-nav .wp-block-navigation__submenu-icon {
	position: relative;
	top: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0;
	background-color: transparent;
	color: var(--c-white);
	cursor: pointer;
}

.c-header .c-nav .wp-block-navigation__submenu-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 0L10 6L20 0V6L10 12L0 6Z'/%3E%3C/svg%3E") center / 0.75rem 0.45rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 0L10 6L20 0V6L10 12L0 6Z'/%3E%3C/svg%3E") center / 0.75rem 0.45rem no-repeat;
}

.c-header .c-nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

/* The arrow sits inside the toggle's padding, so label and arrow are one button with one focus ring. */
.c-header ul.c-nav .open-on-click > .wp-block-navigation-submenu__toggle {
	padding-right: 1.5rem;
}

.c-header ul.c-nav .open-on-click > .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
	margin-left: -1.5rem;
	pointer-events: none;
}

.c-header .c-nav .has-child:hover > .wp-block-navigation__submenu-icon,
.c-header .c-nav .wp-block-navigation-submenu__toggle:is(:focus-visible, [aria-expanded="true"]),
.c-header .c-nav .wp-block-navigation-submenu__toggle:is(:focus-visible, [aria-expanded="true"]) + .wp-block-navigation__submenu-icon,
.c-header .c-nav .current-menu-ancestor > .wp-block-navigation__submenu-icon {
	color: var(--c-neon);
}

/* Dropdown rules target the desktop list (ul.c-nav) so they skip the overlay menu inside the same nav.
   The .has-child step outranks core's .has-background rule, which otherwise keeps the menu touching the label. */
.c-header ul.c-nav .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 1.625rem);
	left: -1.25rem;
	min-width: 12rem;
	padding: 0.75rem 0;
	border: 0;
	border-radius: 0 0 var(--wp--custom--radius--button) var(--wp--custom--radius--button);
	background-color: var(--c-bar);
}

/* Bridges the gap under the label so the hover menu stays open on the way down. */
.c-header ul.c-nav .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset: -1.625rem 0 100%;
}

.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.25rem;
	font-size: 1rem;
}

/* Footer */

.c-site-footer {
	background-color: var(--c-black);
	container-type: inline-size;
	container-name: footer;
}

.c-footer {
	box-sizing: border-box;
	padding-block: 4rem 2.5rem;
	padding-inline: max(var(--c-gutter), (100% - var(--c-wrap)) / 2);
	background-color: var(--c-black);
	color: var(--c-footer-link);
}

/* Spacer tracks keep the first three columns evenly spread while Follow Us sits mid-way in the room right of Legal. */
.c-footer__grid {
	display: grid;
	grid-template-columns: auto minmax(2.5rem, 2fr) auto minmax(2.5rem, 2fr) auto minmax(2.5rem, 1fr) auto minmax(0, 1fr);
	gap: 2.5rem 0;
	align-items: start;
}

.c-footer__col--links {
	grid-column: 3;
}

.c-footer__col--legal {
	grid-column: 5;
}

.c-footer__col--social {
	grid-column: 7;
}

.c-footer__grid > * {
	margin-block: 0;
}

.c-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.c-footer__logo {
	display: block;
	width: 9.75rem;
	line-height: 0;
}

.c-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.c-footer__bar {
	display: block;
	width: 4.4rem;
	height: 0.3125rem;
	margin-top: 0.375rem;
	border-radius: 1px;
	background-color: var(--c-neon);
}

.c-footer__legal {
	margin: 1.25rem 0 0;
	color: var(--c-grey);
	font-family: var(--c-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

.c-footer .c-footer__heading {
	margin: 0 0 1rem;
	color: var(--c-footer-heading);
	font-family: var(--c-font-head);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

.c-footer .c-footer__links {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--c-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
}

.c-footer .c-footer__links a {
	color: var(--c-footer-link);
	text-decoration: none;
}

.c-footer .c-footer__links a:hover {
	color: var(--c-neon);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.c-social {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0 -0.625rem;
	padding: 0;
	list-style: none;
}

.c-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--c-white);
}

.c-social__link svg {
	display: block;
	width: auto;
	height: 1.5rem;
	fill: currentColor;
}

.c-social__link:hover {
	color: var(--c-neon);
}

@container footer (max-width: 899px) {
	.c-footer {
		padding-block: 3rem 2.5rem;
	}

	.c-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr;
		gap: 2.25rem 1.5rem;
	}

	.c-footer__brand {
		grid-column: 1 / -1;
	}

	/* Quick Links spans two rows so Follow Us sits right under Legal. */
	.c-footer__col--links {
		grid-column: 1;
		grid-row: span 2;
	}

	.c-footer__col--legal,
	.c-footer__col--social {
		grid-column: 2;
	}

	.c-footer .c-footer__links {
		gap: 0;
	}

	.c-footer .c-footer__links a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

@container footer (max-width: 599px) {
	.c-footer .c-footer__heading {
		margin-bottom: 0.5rem;
	}
}

/* Header CTA */

.c-header__actions {
	flex: 0 0 auto;
	margin: 0;
}

.c-header .c-header__cta .wp-block-button__link,
.c-overlay .c-overlay__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--c-cta-w);
	min-height: var(--c-cta-h);
	padding: 0 1.125rem;
	border-radius: 0.625rem;
	background-color: var(--c-neon);
	color: var(--c-black);
	font-family: var(--c-font-head);
	font-size: var(--c-cta-size);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.c-header .c-header__cta .wp-block-button__link:hover,
.c-overlay .c-overlay__cta .wp-block-button__link:hover {
	background-color: var(--c-neon-soft);
}

/* League Spartan sits high in its line box, so labels drop slightly to look centred. */
.c-header .c-header__cta .wp-block-button__link {
	padding-top: 0.125rem;
}

/* Below 1100 the menu moves into the overlay; core switches at 600, so the tablet band is handled here. */
@media (max-width: 1099px) {
	.c-header nav.c-nav {
		order: 3;
		flex: 0 0 auto;
		top: 0;
		margin-inline: 0;
	}

	.c-header .c-header__actions {
		margin-left: auto;
	}

	.c-header .c-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.c-header .c-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Phones keep only the logo and the burger; Request a Station waits in the menu. */
@media (max-width: 699px) {
	.c-header .c-header__actions {
		display: none;
	}
}

.c-header .c-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.625rem;
	color: var(--c-white);
}

.c-header .c-nav .wp-block-navigation__responsive-container-open svg {
	width: 1.75rem;
	height: 1.75rem;
}

/* Menu overlay (7.x navigation overlay part) */

.c-header .c-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background-color: var(--c-bar);
	color: var(--c-white);
}

/* The dialog chain above is auto height, so fill the viewport to pin the CTA to the bottom. */
.c-overlay {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100dvh;
	padding: calc(var(--c-admin-bar)) var(--c-header-pad) 2rem;
	background-color: var(--c-bar);
	color: var(--c-white);
}

.c-overlay__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--c-header-h);
}

.c-overlay .c-overlay__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.625rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-white);
	cursor: pointer;
}

.c-overlay .c-overlay__close svg {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
}

/* Core renders a nested navigation as a div and copies the class to its list, so match the direct child only. */
.c-overlay > .c-overlay__nav {
	margin-top: 1rem;
	font-family: var(--c-font-head);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.2;
}

.c-overlay .c-overlay__nav .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.c-overlay .c-overlay__nav .wp-block-navigation-item {
	width: 100%;
}

.c-overlay .c-overlay__nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	padding: 0;
	color: var(--c-white);
	text-decoration: none;
}

.c-overlay .c-overlay__nav .current-menu-item > .wp-block-navigation-item__content,
.c-overlay .c-overlay__nav .wp-block-navigation-item__content:hover {
	color: var(--c-neon);
}

/* Group labels such as Sectors are plain text over their links, not links themselves. */
.c-overlay .c-overlay__nav .wp-block-navigation-item__content:not([href]) {
	cursor: default;
}

.c-header .c-overlay__nav .has-child:not(.current-menu-ancestor) > .wp-block-navigation-item__content:not([href]) {
	color: var(--c-white);
}

.c-overlay .c-overlay__nav .has-child.open-always {
	gap: 0;
}

.c-overlay .c-overlay__nav .has-child.open-always .wp-block-navigation__submenu-container {
	gap: 0;
	margin: 0 0 0.5rem;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--c-neon);
	min-width: 0;
	background: none;
}

.c-overlay .c-overlay__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 2.75rem;
	font-size: 1.125rem;
}

.c-overlay .c-overlay__actions {
	margin-top: auto;
	padding-top: 2rem;
}

.c-overlay .c-overlay__cta {
	width: 100%;
}

.c-overlay .c-overlay__cta .wp-block-button__link {
	width: 100%;
	min-height: 3.25rem;
	font-size: 1.125rem;
}

/* Templates */

.c-404 {
	padding-block: var(--wp--preset--spacing--70);
}

.c-404 {
	text-align: center;
}

.c-404__code {
	margin: 0;
	color: var(--wp--preset--color--green-text);
	font-family: var(--c-font-head);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1;
}

.c-404 .c-404__actions {
	justify-content: center;
	gap: 1rem;
}

.c-404 .wp-block-button__link {
	padding: 0.85em 1.5em;
	font-size: 1.25rem;
}

.c-404 .c-404__home .wp-block-button__link {
	border: 2px solid var(--c-ink);
	background: none;
	color: var(--c-ink);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal;
	white-space: nowrap;
}

/* Shared parts */

.c-page > .alignfull {
	margin-block: 0;
}

/* Plain text pages get room under the header; designed pages open on a full-width band. */
.c-page > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--60);
}

.c-page > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--70);
}

.c-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.5em 1.5em;
	border-radius: 0.625rem;
	font-family: var(--c-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* The designed chevron, drawn as a mask so it takes the label colour. */
.c-btn .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.75em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-btn--dark .wp-block-button__link {
	background-color: var(--c-slate);
	color: var(--c-white);
}

.c-btn--pill .wp-block-button__link {
	min-height: 3.25rem;
	padding: 0.15em 2em 0;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--c-font-head);
	font-size: 1.125rem;
}

.c-btn--pill .wp-block-button__link::after {
	display: none;
}

.c-btn--wide .wp-block-button__link {
	min-width: min(100%, 15rem);
}

/* Section frames: one width and one radius, so every panel lines up. */
.c-products__panel,
.c-sectors__panel,
.c-how__panel,
.c-cta__panel,
.c-options__panel {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--c-gutter));
	max-width: var(--c-wrap);
	margin-inline: auto;
	border-radius: 1.25rem;
}

.c-sectors__title,
.c-how__title,
.c-cta__title {
	letter-spacing: -0.01em;
}

/* Home: hero */

.c-hero {
	background-color: var(--wp--preset--color--mint);
	padding-block: 2rem 2.5rem;
}

/* The buttons sit straight under the copy, before the picture, so phones show them on the first screen. */
.c-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "copy" "start" "media" "bar";
	gap: 2rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.c-hero__copy {
	grid-area: copy;
}

.c-hero__start {
	grid-area: start;
}

.c-hero__copy > *,
.c-hero__start > * {
	margin-block: 0;
}

/* The bar sits in the hero grid, which already holds the gutters. */
.c-hero__inner > .c-statbar {
	grid-area: bar;
	max-width: none;
	margin: 0;
}

.c-hero .c-hero__title {
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

/* Both design lines sit on one heading so search engines read the full promise. */
.c-hero .c-hero__title .has-inline-color {
	display: block;
}

.c-hero .c-hero__tagline {
	margin-top: 0.625rem;
	color: var(--c-black);
	font-family: var(--c-font-head);
	font-size: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
}

/* Tom's two promises, each behind his green ring tick. */
.c-hero .c-hero__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 1.25rem;
	padding: 0;
	list-style: none;
	color: var(--c-black);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.c-hero__ticks li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.c-hero__ticks li::before {
	content: "";
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23fff' stroke='%2300a03f' stroke-width='2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%2300a03f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-hero .c-hero__lead {
	margin-top: 0.875rem;
	max-width: 35rem;
	color: var(--c-ink);
	font-size: 1rem;
	line-height: 1.5;
}

.c-hero .c-hero__actions {
	gap: 0.75rem 1rem;
}

/* A small ticked note under the buttons, as in Tom's mockup, with the same tick as the promises above. */
.c-hero .c-hero__trial {
	margin-top: 0.875rem;
	color: var(--c-black);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Inline, so a phone that wraps the note centres both lines with the tick leading the first. */
.c-hero__trial::before {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.4rem;
	vertical-align: -0.3em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23fff' stroke='%2300a03f' stroke-width='2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%2300a03f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-hero__media {
	grid-area: media;
	margin: 0;
	justify-self: center;
	width: min(75%, 16rem);
}

/* The render's soft halo is lighter than the mint, so darken drops it into the background with no box edge. */
.c-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: darken;
}

/* Stat bar */

.c-statbar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin: 2rem auto 0;
	padding-inline: var(--c-gutter);
}

.c-statbar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.875rem 0.75rem;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--c-banner);
	color: var(--c-white);
}

.c-statbar .c-statbar__icon {
	flex: 0 0 auto;
	margin: 0;
	width: 2.5rem;
}

.c-statbar__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.c-statbar .c-statbar__label {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.3;
}

/* The first line is the benefit, the second explains it. */
.c-statbar .c-statbar__label::first-line {
	font-weight: 700;
}

/* Home banner, as in Tom's mockup: each icon sits over its two lines, centred. */
.c-hero .c-statbar__item {
	flex-direction: column;
	gap: 0.5rem;
	text-align: center;
}

/* Electric hover: the icon lights like a neon tube, the benefit line glows and a current runs under it. Mouse only. */
@media (hover: hover) {
	.c-statbar__item {
		position: relative;
		transition: background-color 0.2s ease;
	}

	.c-statbar__item::after {
		content: "";
		position: absolute;
		inset: auto 18% 0.375rem;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--c-neon) 0 40%, var(--c-white) 50%, var(--c-neon) 60% 100%) 0 0 / 250% 100%;
		box-shadow: 0 0 6px var(--c-neon), 0 0 14px rgb(48 247 116 / 0.6);
		opacity: 0;
		transform: scaleX(0);
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	.c-statbar .c-statbar__item:hover {
		border-radius: 1rem;
		background-color: rgb(48 247 116 / 0.07);
	}

	.c-statbar__item:hover::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.c-statbar__icon img {
		transition: filter 0.2s ease;
	}

	.c-statbar__item:hover .c-statbar__icon img {
		filter: drop-shadow(0 0 2px var(--c-neon)) drop-shadow(0 0 8px rgb(48 247 116 / 0.75));
	}

	.c-statbar__item:hover .c-statbar__label::first-line {
		color: var(--c-neon);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-statbar__item:hover .c-statbar__icon img {
		animation: c-flicker 0.6s linear;
	}

	.c-statbar__item:hover::after {
		animation: c-current 1.4s linear infinite;
	}
}

@keyframes c-current {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

@keyframes c-flicker {
	0%, 18%, 30%, 52% { opacity: 1; }
	10%, 24%, 44% { opacity: 0.35; }
	100% { opacity: 1; }
}

/* Menus get the same electric hover: neon glow, a short flicker and a current line with a running pulse. */
@media (hover: hover) {
	.c-header ul.c-nav > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.c-footer .c-footer__links a,
	.c-social__link {
		position: relative;
		transition: color 0.15s ease, text-shadow 0.2s ease, background-color 0.2s ease;
	}

	.c-header ul.c-nav > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after,
	.c-footer .c-footer__links a::after,
	.c-social__link::after {
		content: "";
		position: absolute;
		inset: auto 0 -0.375rem;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--c-neon) 0 40%, var(--c-white) 50%, var(--c-neon) 60% 100%) 0 0 / 250% 100%;
		box-shadow: 0 0 6px var(--c-neon), 0 0 14px rgb(48 247 116 / 0.6);
		opacity: 0;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	/* Dropdown rows keep the text where it was and gain the stat bar's soft highlight. */
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		margin-inline: 0.5rem;
		padding-inline: 0.75rem;
		border-radius: 0.5rem;
	}

	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		inset: auto 0.75rem 0.25rem;
	}

	.c-footer .c-footer__links a {
		display: inline-flex;
	}

	.c-footer .c-footer__links a::after {
		bottom: -0.125rem;
	}

	.c-social__link::after {
		inset: auto 25% 0.125rem;
	}

	.c-header ul.c-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible),
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible),
	.c-footer .c-footer__links a:is(:hover, :focus-visible) {
		color: var(--c-neon);
		text-decoration: none;
		text-shadow: 0 0 8px rgb(48 247 116 / 0.55);
	}

	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background-color: rgb(48 247 116 / 0.1);
	}

	.c-header ul.c-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
	.c-footer .c-footer__links a:is(:hover, :focus-visible)::after,
	.c-social__link:is(:hover, :focus-visible)::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.c-social__link svg {
		transition: filter 0.2s ease;
	}

	.c-social__link:is(:hover, :focus-visible) svg {
		filter: drop-shadow(0 0 2px var(--c-neon)) drop-shadow(0 0 8px rgb(48 247 116 / 0.75));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-header ul.c-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.c-footer .c-footer__links a:hover {
		animation: c-glow-flicker 0.6s linear;
	}

	.c-social__link:hover svg {
		animation: c-flicker 0.6s linear;
	}

	.c-header ul.c-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
	.c-header ul.c-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
	.c-footer .c-footer__links a:is(:hover, :focus-visible)::after,
	.c-social__link:is(:hover, :focus-visible)::after {
		animation: c-current 1.4s linear infinite;
	}
}

/* The header button joins in: a neon halo that flickers on, with the same light pulse sweeping across it. */
@media (hover: hover) {
	.c-header .c-header__cta .wp-block-button__link {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		transition: background-color 0.15s ease, box-shadow 0.2s ease;
	}

	/* Painted under the label, so the sweep lights the button without fading the text. */
	.c-header .c-header__cta .wp-block-button__link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(105deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0.7) 50%, rgb(255 255 255 / 0) 60%) 100% 0 / 250% 100%;
		opacity: 0;
		pointer-events: none;
	}

	.c-header .c-header__cta .wp-block-button__link:is(:hover, :focus-visible) {
		box-shadow: 0 0 0 2px rgb(48 247 116 / 0.35), 0 0 14px var(--c-neon), 0 0 30px rgb(48 247 116 / 0.45);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-header .c-header__cta .wp-block-button__link:hover {
		animation: c-halo-flicker 0.6s linear;
	}

	.c-header .c-header__cta .wp-block-button__link:is(:hover, :focus-visible)::after {
		opacity: 1;
		animation: c-current 1.4s linear infinite;
	}
}

@keyframes c-halo-flicker {
	0%, 18%, 30%, 52%, 100% { box-shadow: 0 0 0 2px rgb(48 247 116 / 0.35), 0 0 14px var(--c-neon), 0 0 30px rgb(48 247 116 / 0.45); }
	10%, 24%, 44% { box-shadow: none; }
}

@keyframes c-glow-flicker {
	0%, 18%, 30%, 52%, 100% { opacity: 1; }
	10%, 24%, 44% { opacity: 0.5; text-shadow: none; }
}

/* Section buttons join the header's electric hover; ::after is the chevron, so the sweep rides on ::before. */
@media (hover: hover) {
	.c-btn .wp-block-button__link {
		position: relative;
		isolation: isolate;
		overflow: hidden;
	}

	.c-btn .wp-block-button__link::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(105deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0.7) 50%, rgb(255 255 255 / 0) 60%) 100% 0 / 250% 100%;
		opacity: 0;
		pointer-events: none;
	}

	.c-btn .wp-block-button__link:is(:hover, :focus-visible) {
		background-color: var(--c-neon-soft);
		color: var(--c-black);
		box-shadow: 0 0 0 2px rgb(48 247 116 / 0.35), 0 0 14px var(--c-neon), 0 0 30px rgb(48 247 116 / 0.45);
	}

	.c-btn--dark .wp-block-button__link:is(:hover, :focus-visible) {
		background-color: var(--c-black);
		color: var(--c-white);
		box-shadow: 0 0 0 2px var(--c-neon), 0 0 14px rgb(48 247 116 / 0.6), 0 0 30px rgb(48 247 116 / 0.35);
	}

	.c-btn--dark .wp-block-button__link::before {
		background-image: linear-gradient(105deg, rgb(48 247 116 / 0) 40%, rgb(48 247 116 / 0.35) 50%, rgb(48 247 116 / 0) 60%);
	}

	.c-products .wp-block-tab-list button {
		transition: color 0.15s ease, border-color 0.2s ease;
	}

	.c-carousel__arrow {
		transition: background-color 0.15s ease, box-shadow 0.2s ease;
	}

	.c-carousel__arrow:is(:hover, :focus-visible) {
		background-color: var(--c-neon);
		box-shadow: 0 0 0 2px rgb(48 247 116 / 0.35), 0 0 14px var(--c-neon);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-btn .wp-block-button__link:hover {
		animation: c-halo-flicker 0.6s linear;
	}

	.c-btn .wp-block-button__link:is(:hover, :focus-visible)::before {
		opacity: 1;
		animation: c-current 1.4s linear infinite;
	}

	/* Focus can rest on a control for a long time, so the sweep runs twice and then holds. */
	.c-btn .wp-block-button__link:focus-visible:not(:hover)::before,
	.c-header .c-header__cta .wp-block-button__link:focus-visible:not(:hover)::after,
	.c-header ul.c-nav .wp-block-navigation-item__content:focus-visible:not(:hover)::after,
	.c-footer .c-footer__links a:focus-visible:not(:hover)::after {
		animation-iteration-count: 2;
	}
}

/* Touch gets a short neon press instead of the browser's blue flash. */
.c-btn .wp-block-button__link,
.c-header .c-header__cta .wp-block-button__link,
.c-products .wp-block-tab-list button,
.c-sectors .wp-block-tab-list button,
.c-carousel__arrow,
.c-contact .frm-fluent-form .ff-btn-submit,
.c-topics .cat-item a,
.c-news-card a,
.c-feature .c-feature__more,
.c-news__all a,
.c-station__pick,
.c-station__more a,
.c-pjump__list a,
.c-news__search .wp-block-search__button {
	-webkit-tap-highlight-color: transparent;
}

.c-btn .wp-block-button__link:active,
.c-header .c-header__cta .wp-block-button__link:active,
.c-carousel__arrow:active,
.c-contact .frm-fluent-form .ff-btn-submit:not(:disabled):active,
.c-topics .cat-item a:active,
.c-feature .c-feature__more:active,
.c-news__all a:active,
.c-station__more a:active,
.c-pjump__list a:active {
	box-shadow: 0 0 0 2px rgb(48 247 116 / 0.35), 0 0 12px var(--c-neon);
}

@media (prefers-reduced-motion: no-preference) {
	.c-btn .wp-block-button__link:active,
	.c-header .c-header__cta .wp-block-button__link:active,
	.c-carousel__arrow:active,
	.c-contact .frm-fluent-form .ff-btn-submit:not(:disabled):active,
	.c-topics .cat-item a:active,
	.c-feature .c-feature__more:active,
	.c-news__all a:active,
	.c-station__more a:active,
	.c-pjump__list a:active {
		transform: scale(0.97);
	}
}

/* Home: station tabs and cards */

.c-products {
	padding-block: 3rem 0;
}

.c-products__panel {
	padding: 1rem 0 2rem;
	background-color: var(--c-grey-bg);
}

.c-products .wp-block-tab-list,
.c-sectors .wp-block-tab-list {
	gap: 0;
}

.c-products .wp-block-tab-list,
.c-sectors .wp-block-tab-list {
	scroll-padding-inline: var(--c-gutter);
}

.c-products .wp-block-tab-list {
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-inline: var(--c-gutter);
	scrollbar-width: none;
}

.c-products .wp-block-tab-list button {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.75rem 0.875rem 0.625rem;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--c-muted);
	font-family: var(--c-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

/* All four filters fit a 360 screen without clipping Towers. */
@media (max-width: 379px) {
	.c-products .wp-block-tab-list button {
		padding-inline: 0.625rem;
	}
}

.c-products .wp-block-tab-list button[aria-selected="true"] {
	border-bottom-color: var(--c-neon);
	color: var(--c-black);
	font-weight: 800;
}

.c-products .wp-block-tab-list button:not([aria-selected="true"]):hover {
	border-bottom-color: rgb(48 247 116 / 0.45);
	color: var(--c-black);
}

.c-products .wp-block-tab-list button:focus-visible,
.c-sectors .wp-block-tab-list button:focus-visible {
	outline-offset: -3px;
}

/* A neon glow rising from the underline; the chosen tab keeps it lit and the script flashes it on. */
.c-products .wp-block-tab-list button {
	position: relative;
}

.c-products .wp-block-tab-list button::after {
	content: "";
	position: absolute;
	inset: 0 0 -3px;
	background: linear-gradient(to top, rgb(48 247 116 / 0.75), rgb(48 247 116 / 0) 90%);
	box-shadow: inset 0 -3px 0 var(--c-neon);
	opacity: 0;
	pointer-events: none;
}

.c-products .wp-block-tab-list button[aria-selected="true"]::after {
	opacity: 0.45;
}

@media (prefers-reduced-motion: no-preference) {
	.c-products .wp-block-tab-list button.is-flash::after {
		animation: c-tab-flash 0.4s ease-out var(--c-flash-delay, 0s) backwards;
	}
}

/* No end frame, so each tab settles back to its own resting glow. */
@keyframes c-tab-flash {
	0% { opacity: 0; }
	35% { opacity: 1; }
}

.c-products .wp-block-tab-panel {
	padding-top: 0.75rem;
}

.c-products .wp-block-tab-panel:focus-visible {
	outline-offset: -3px;
}

/* Phones show one card at a time with dots under the row; tablets up let the next card peek. */
.c-carousel {
	position: relative;
}

/* The row scrolls, which clips; the extra top and bottom room keeps a lifted card's shadow whole. */
.c-cards {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem var(--c-gutter) 1.75rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--c-gutter);
	scrollbar-width: none;
}

.c-cards::-webkit-scrollbar,
.c-products .wp-block-tab-list::-webkit-scrollbar,
.c-sectors .wp-block-tab-list::-webkit-scrollbar {
	display: none;
}

.c-cards > li,
.c-cards > .c-card {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
}

/* Render on top, copy below, so every station reads the same way at any width.
   Positioned so a link's hidden label stays inside the scrolling row. */
.c-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-sizing: border-box;
	height: 100%;
	padding: 1.5rem 1.25rem;
	border-radius: 1.25rem;
	background-color: var(--c-white);
	text-align: center;
}

.c-card .c-card__media {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 10.5rem;
	margin: 0;
}

.c-card .c-card__media img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Capacity sits on one baseline across the row whatever the text length. */
.c-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.c-card__body > * {
	margin-block: 0;
}

.c-card .c-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is the tap target; the title link carries the name. */
.c-card .c-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.c-card .c-card__title {
	font-size: 1.1875rem;
	line-height: 1.2;
	overflow-wrap: normal;
}

.c-card .c-card__text {
	margin-top: 0.5rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.c-card .c-card__capacity {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--wp--preset--color--green-large);
	font-family: var(--c-font-head);
	/* 20 px bold is large text, the size this lighter green is cleared for. */
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
}

.c-carousel__dots {
	display: flex;
	justify-content: center;
	margin-top: -1rem;
}

.c-carousel__dots[hidden] {
	display: none;
}

/* A 10px dot in a 44px button, so dots sit 34px apart and each is an easy tap. */
.c-carousel__dot {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* #858585 is the lightest grey with 3:1 on the panel. */
.c-carousel__dot::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: #858585;
}

.c-carousel__dot[aria-current="true"]::before {
	background-color: var(--c-black);
}

.c-carousel__dot:focus-visible {
	outline-offset: -0.5rem;
	border-radius: 50%;
}

/* Station cards lift on hover or keyboard focus; the script pops them in when the row comes into view or its tab opens. */
.c-stations .c-card:focus-within {
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.18);
}

@media (hover: hover) {
	.c-stations .c-card:hover {
		box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.18);
	}
}

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

	.c-stations .c-card:focus-within {
		translate: 0 -6px;
	}

	.is-motion .c-carousel:not(.is-popped) .c-cards > * {
		opacity: 0;
	}

	.is-motion .c-carousel.is-popped .c-cards > * {
		animation: c-pop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.25) calc(var(--c-i, 0) * 80ms) backwards;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-stations .c-card:hover {
		translate: 0 -6px;
	}
}

@keyframes c-pop {
	from {
		opacity: 0;
		scale: 0.94;
	}
}

.c-carousel__arrow {
	display: none;
}

.c-products .c-products__more {
	justify-content: center;
	margin-top: 0.25rem;
	padding-inline: var(--c-gutter);
}

/* Home: sectors */

.c-sectors {
	padding-block: 3.5rem 0;
}

.c-sectors > * {
	margin-block: 0;
}

.c-sectors .c-sectors__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
}

.c-sectors .c-sectors__intro {
	margin: 0.75rem auto 0;
	max-width: 36rem;
	padding-inline: var(--c-gutter);
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--body);
	text-wrap: balance;
}

/* One line wherever the sentence fits, as Tom asked. */
@media (min-width: 860px) {
	.c-sectors .c-sectors__intro {
		max-width: none;
		white-space: nowrap;
	}
}

/* Close under the intro, so the line reads as the caption of the industries table. */
.c-sectors__panel {
	margin-top: 1.25rem;
	padding: 0.75rem 0;
	background-color: var(--wp--preset--color--mint);
}

.c-sectors__tabs {
	background-color: var(--c-white);
}

.c-sectors .wp-block-tab-list {
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0.5rem;
	padding: 0.75rem var(--c-gutter);
	scrollbar-width: none;
}

.c-sectors .wp-block-tab-list button {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	border: 1px solid #cdd5d1;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--c-white);
	color: var(--c-black);
	font-family: var(--c-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.c-products .wp-block-tab-list button::before {
	display: none;
}

/* Core draws the active underline on ::before, which here holds the sector icon. */
.c-sectors .wp-block-tab-list button::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	border: 0;
	width: 1.375rem;
	height: 1.375rem;
	background: center / contain no-repeat;
}

/* Icons follow tab order: Pubs & Bars, Transport, Healthcare, Hotels, Sports, Retail. */
.c-sectors .wp-block-tab-list button:nth-child(1)::before { background-image: url("../img/sectors/pubs-bars.webp"); }
.c-sectors .wp-block-tab-list button:nth-child(2)::before { background-image: url("../img/sectors/transport.webp"); }
.c-sectors .wp-block-tab-list button:nth-child(3)::before { background-image: url("../img/sectors/healthcare.webp"); }
.c-sectors .wp-block-tab-list button:nth-child(4)::before { background-image: url("../img/sectors/hotels.webp"); }
.c-sectors .wp-block-tab-list button:nth-child(5)::before { background-image: url("../img/sectors/sports.webp"); }
.c-sectors .wp-block-tab-list button:nth-child(6)::before { background-image: url("../img/sectors/retail.webp"); }

.c-sectors .wp-block-tab-list button:hover {
	border-color: var(--c-ink);
}

.c-sectors .wp-block-tab-list button[aria-selected="true"] {
	border-color: var(--wp--preset--color--green-text);
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
}

.c-sectors .wp-block-tab-panel {
	padding: 0.75rem var(--c-gutter) 1.5rem;
}

.c-sector {
	display: grid;
	gap: 1.5rem;
}

.c-sector__copy > * {
	margin-block: 0;
}

.c-sector .c-sector__title {
	font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
	line-height: 1.15;
}

.c-sector .c-sector__text {
	margin-top: 0.75rem;
	max-width: 28rem;
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
}

.c-sector .c-sector__more {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

/* A full 44 px tap row without adding visible space. */
.c-sector .c-sector__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.75rem;
	text-decoration-color: rgb(0 127 53 / 0.4);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	transition: color 0.15s ease, text-decoration-color 0.2s ease;
}

/* Same chevron as the buttons, so the link reads as a way forward. */
.c-sector .c-sector__more a::after {
	content: "";
	width: 0.45em;
	height: 0.7em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.c-sector .c-sector__more a:is(:hover, :focus-visible) {
	color: var(--c-black);
	text-decoration-color: var(--c-neon);
}

.c-sector .c-sector__more a:is(:hover, :focus-visible)::after {
	transform: translateX(3px);
}

.c-sector .c-sector__media {
	margin: 0;
}

.c-card .c-card__text,
.c-sector .c-sector__text,
.c-cta .c-cta__text,
.c-hero .c-hero__lead,
.c-phero .c-phero__lead,
.c-station .c-station__text,
.c-feature .c-feature__text,
.c-news-card .c-news-card__text,
.c-article__lead,
.c-article__body li,
.c-news .c-news__empty,
.c-contact .c-contact__panel-text,
.c-done__steps li,
.c-article__body p,
.c-contact .c-contact__lead,
.c-contact .c-contact__intro {
	text-wrap: pretty;
}

.c-sector .c-sector__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	object-position: 75% 50%;
	border-radius: 1rem;
}

/* Home: how it works */

.c-how {
	padding-block: 3rem 0;
}

.c-how__panel {
	padding: 2.5rem var(--c-gutter);
	background-color: var(--c-grey-bg);
}

.c-how__panel > * {
	margin-block: 0;
}

.c-how .c-how__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
}

.c-how .c-how__intro {
	margin-top: 0.75rem;
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--body);
}

/* Phones: image and step side by side, one row each. */
.c-how__steps {
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
}

.c-step {
	--c-step-media: 6.5rem;
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
}

.c-step > * {
	margin: 0;
}

.c-step .c-step__num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--c-neon-soft);
	font-family: var(--c-font-body);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
}

.c-step .c-step__media img {
	display: block;
	width: 100%;
	height: var(--c-step-media);
	object-fit: contain;
}

.c-step .c-step__title {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background-color: var(--c-neon-soft);
	color: var(--c-black);
	font-size: 1.0625rem;
	line-height: 1.2;
	text-align: center;
}

/* The title is a button whose hit area covers the whole step, so a tap anywhere on it opens the overlay. */
.c-step .c-step__toggle {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

.c-step .c-step__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 1rem;
}

.c-step .c-step__toggle:focus-visible {
	outline: none;
}

.c-step .c-step__toggle:focus-visible::after {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

/* Stays in the accessibility tree while unseen, so the description is always read. */
.c-step .c-step__more {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--c-step-media);
	margin-inline: auto;
	padding: 0.375rem;
	border-radius: 1rem;
	background-color: rgb(22 25 26 / 0.55);
	opacity: 0;
	pointer-events: none;
}

.c-step .c-step__box {
	box-sizing: border-box;
	max-width: 15rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background-color: var(--c-bar);
	color: var(--c-white);
	text-align: center;
}

.c-step .c-step__box > * {
	margin: 0;
}

.c-step .c-step__more-title {
	font-family: var(--c-font-head);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
}

.c-step .c-step__text {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.35;
}

/* Without the script, hover and focus still show it; with it, the open state follows the button. */
.c-how__steps:not(.is-ready) .c-step:focus-within .c-step__more,
.c-how__steps .c-step.is-open .c-step__more {
	opacity: 1;
}

@media (hover: hover) {
	.c-how__steps .c-step:hover:not(.is-dismissed) .c-step__more {
		opacity: 1;
	}
}

/* With scripting off a tap cannot open the overlay, so the description sits under the pill instead. */
@media (scripting: none) {
	.c-how__steps .c-step {
		grid-template-rows: auto auto 1fr;
	}

	.c-how__steps .c-step .c-step__more {
		position: static;
		grid-column: 1 / -1;
		min-height: 0;
		padding: 0;
		background-color: transparent;
		opacity: 1;
		pointer-events: auto;
	}

	.c-how__steps .c-step .c-step__box {
		width: 100%;
		max-width: none;
	}

	.c-how__steps .c-step .c-step__more-title {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.c-step .c-step__more {
		transition: opacity 0.2s ease;
	}
}

/* The editor shows the overlay text under the title, so it can be read and edited. */
.is-root-container .c-step .c-step__more {
	position: static;
	width: 100%;
	min-height: 0;
	opacity: 1;
	pointer-events: auto;
}

/* Home: call to action */

.c-cta {
	padding-block: 3rem;
}

.c-cta__panel {
	position: relative;
	display: grid;
	padding: 2.25rem var(--c-gutter) 0;
	background-color: var(--wp--preset--color--mint);
	overflow: hidden;
}

.c-cta__copy > * {
	margin-block: 0;
}

.c-cta .c-cta__title {
	color: var(--c-ink);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
}

.c-cta .c-cta__text {
	margin-top: 0.875rem;
	max-width: 34rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-cta .c-cta__actions {
	margin-top: 1.75rem;
}

.c-cta .c-cta__more {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

.c-cta .c-cta__more a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--green-text);
}

.c-cta .c-cta__media {
	margin: 1rem auto 0;
	width: min(60%, 14rem);
}

.c-cta__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Full-width thumb targets on narrow phones only; wider screens keep buttons their natural size. */
@media (max-width: 479px) {
	.c-hero .c-hero__actions .wp-block-button,
	.c-hero .c-hero__actions .wp-block-button__link,
	.c-cta .c-cta__actions .wp-block-button,
	.c-cta .c-cta__actions .wp-block-button__link,
	.c-decision .c-decision__actions .wp-block-button,
	.c-decision .c-decision__actions .wp-block-button__link,
	.c-shero .c-shero__actions .wp-block-button,
	.c-shero .c-shero__actions .wp-block-button__link,
	.c-phero .c-phero__actions .wp-block-button,
	.c-phero .c-phero__actions .wp-block-button__link,
	.c-article .c-article__actions .wp-block-button,
	.c-article .c-article__actions .wp-block-button__link,
	.c-news .c-news__all a,
	.c-feature .c-feature__more,
	.c-station .c-station__more a {
		width: 100%;
	}

	.c-feature .c-feature__more,
	.c-station .c-station__more a,
	.c-news .c-news__all a {
		justify-content: center;
	}

	.c-hero .c-hero__trial {
		font-size: 0.9375rem;
		text-align: center;
		text-wrap: balance;
	}
}

@media (max-width: 699px) {
	.c-hero .c-hero__actions .wp-block-button__link {
		min-width: 12rem;
	}

	/* Every call to action, mint or dark, is centred on phones. */
	.c-cta .c-cta__copy {
		text-align: center;
	}

	.c-cta .c-cta__text {
		margin-inline: auto;
	}

	.c-cta .c-cta__actions {
		justify-content: center;
	}

	.c-decision .c-decision__copy {
		text-align: center;
	}

	.c-decision .c-decision__text {
		margin-inline: auto;
	}

	.c-decision .c-decision__actions {
		justify-content: center;
	}

	/* A smaller render lifts the stat bar's offer onto the first phone screen. */
	.c-hero {
		padding-bottom: 1.5rem;
	}

	.c-hero__inner {
		gap: 1.25rem;
	}

	.c-hero__media {
		width: min(58%, 12.5rem);
	}

	.c-statbar {
		margin-top: 1.25rem;
	}

	.c-sectors__panel {
		padding: 0.5rem;
	}

	.c-sectors__tabs {
		border-radius: 0.875rem;
	}

	/* Same picture over label layout as tablet, so the instructions are the biggest thing in the step. */
	.c-how__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 0.75rem;
	}

	.c-step {
		--c-step-media: 8.5rem;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		justify-items: center;
	}

	/* Titles that wrap differently still give one pill height across a row. */
	.c-step .c-step__title {
		display: grid;
		place-items: center;
		align-self: stretch;
		box-sizing: border-box;
		width: 100%;
		min-height: 3rem;
		padding-inline: 0.5rem;
		font-size: 0.9375rem;
	}

	/* Half-width images are too small for the text, so the box covers the whole step; it repeats the title. */
	.c-step .c-step__more {
		place-items: stretch;
		min-height: 100%;
		padding: 0.25rem;
	}

	.c-step .c-step__box {
		display: grid;
		align-content: center;
		max-width: none;
		padding: 0.625rem 0.5rem;
	}

	.c-step .c-step__more-title {
		font-size: 0.9375rem;
	}

	.c-sector .c-sector__media img {
		aspect-ratio: 3 / 2;
	}

	.c-statbar {
		gap: 0.25rem 0;
		margin-inline: var(--c-gutter);
		padding: 0.5rem;
		border-radius: 1.25rem;
		background-color: var(--c-banner);
	}

	.c-statbar__item {
		justify-content: flex-start;
		gap: 0.625rem;
		padding: 0.625rem 0.5rem;
	}

	.c-statbar__item:last-child {
		grid-column: 1 / -1;
		justify-content: center;
	}

	.c-statbar .c-statbar__icon {
		width: 2rem;
	}

	/* Phones show four, two by two; Happier Customers is left for wider screens, as Tom asked. */
	.c-hero .c-statbar__item--wide {
		display: none;
	}

	.c-hero .c-statbar__item:last-child {
		grid-column: auto;
	}

	.c-hero .c-statbar .c-statbar__icon {
		width: 2.25rem;
	}

	.c-statbar .c-statbar__label {
		font-size: 0.875rem;
	}
}

@media (min-width: 700px) {
	.c-btn .wp-block-button__link {
		min-height: 3.25rem;
	}

	.c-btn--pill .wp-block-button__link {
		min-height: 3.5rem;
	}

	.c-hero {
		padding-block: 3rem;
	}

	.c-hero__media {
		width: min(60vw, 24rem);
	}

	.c-hero .c-hero__actions .wp-block-button__link {
		min-width: 12rem;
	}

	/* Three then two, centred, so the last row does not hang off one side. */
	.c-statbar {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.c-statbar__item {
		flex: 0 0 calc((100% - 1.5rem) / 3);
		box-sizing: border-box;
	}

	.c-hero__inner > .c-statbar {
		padding-inline: 0;
	}

	.c-products__panel,
	.c-sectors__panel,
	.c-how__panel,
	.c-cta__panel,
	.c-options__panel {
		width: calc(100% - 2 * var(--c-gutter));
		border-radius: var(--wp--custom--radius--panel);
	}

	.c-products__panel {
		padding: 1.25rem 0 2.25rem;
	}

	.c-products .wp-block-tab-list {
		padding-inline: 1.5rem;
	}

	.c-cards {
		padding-inline: 1.5rem;
		scroll-padding-inline: 1.5rem;
	}

	.c-cards > li,
	.c-cards > .c-card {
		flex-basis: calc((100% - 1rem) / 2.3);
	}

	.c-sectors__panel {
		padding: 1rem;
	}

	.c-sectors__tabs {
		border-radius: 1rem;
	}

	.c-sector {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 2rem;
	}

	.c-how__panel {
		padding: 3rem 2rem;
	}

	.c-how__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
		margin-top: 2.5rem;
	}

	.c-step {
		--c-step-media: 10rem;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		justify-items: center;
	}

	.c-step .c-step__num {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.0625rem;
	}

	.c-step .c-step__title {
		display: grid;
		place-items: center;
		align-self: stretch;
		box-sizing: border-box;
		width: 100%;
		max-width: 14rem;
		min-height: 3.25rem;
	}

	/* Two wide columns: the overlay keeps to the title's width, centred over the picture. */
	.c-step .c-step__more {
		width: min(100%, 14rem);
	}

	.c-cta__panel {
		grid-template-columns: minmax(0, 1fr) 13rem;
		align-items: center;
		gap: 2rem;
		padding: 3rem 2rem 3rem 3rem;
	}

	.c-cta .c-cta__media {
		margin: 0;
		width: 100%;
	}
}

/* Arrows join the row wherever it overflows, tablets included; touch can still swipe. */
@media (min-width: 700px) {
	.c-carousel__arrow {
		position: absolute;
		top: 50%;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		/* Half the button plus half the row's extra shadow room below, so it centres on the cards. */
		margin-top: -1.875rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: var(--c-white);
		box-shadow: 0 2px 10px rgb(0 0 0 / 0.14);
		color: var(--c-ink);
		cursor: pointer;
	}

	.c-carousel__arrow::before {
		content: "";
		width: 0.625rem;
		height: 1rem;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.c-carousel__arrow--prev {
		left: 0.75rem;
	}

	.c-carousel__arrow--prev::before {
		transform: scaleX(-1);
	}

	.c-carousel__arrow--next {
		right: 0.75rem;
	}

	.c-carousel__arrow[disabled] {
		opacity: 0;
		pointer-events: none;
	}

	.c-carousel:not(.is-scrollable) .c-carousel__arrow {
		display: none;
	}

	.c-carousel__dots {
		display: none;
	}
}

/* Tablets get the same single dark banner as desktop and phones, all five in one row. */
@media (min-width: 700px) and (max-width: 1099px) {
	.c-hero .c-statbar {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		padding: 0.5rem;
		border-radius: 1.25rem;
		background-color: var(--c-banner);
	}

	.c-hero .c-statbar .c-statbar__item {
		padding: 0.75rem 0.25rem;
		border-radius: 0;
		background: none;
	}

	.c-hero .c-statbar .c-statbar__icon {
		width: 2.5rem;
	}

	.c-hero .c-statbar .c-statbar__label {
		font-size: 0.875rem;
	}
}

/* The empty rows above and below the copy keep it centred against the render. */
@media (min-width: 760px) {
	.c-hero__inner {
		grid-template-columns: minmax(0, 1fr) 38%;
		grid-template-rows: 1fr auto auto 1fr auto;
		grid-template-areas: ". media" "copy media" "start media" ". media" "bar bar";
		align-items: center;
		gap: 0 2rem;
	}

	.c-hero .c-hero__start {
		margin-top: 2rem;
	}

	.c-hero__inner > .c-statbar {
		margin-top: 2rem;
	}

	.c-hero__media {
		width: 100%;
	}
}

/* Short landscape phones: keep both hero buttons on the first screen. */
@media (orientation: landscape) and (max-height: 500px) {
	.c-hero {
		padding-block: 1.5rem 2rem;
	}

	.c-hero .c-hero__ticks {
		margin-top: 0.75rem;
	}

	.c-hero .c-hero__start {
		margin-top: 1.25rem;
	}
}

@media (min-width: 1100px) {
	.c-hero {
		padding-block: 4rem 3.5rem;
	}

	.c-hero__inner {
		grid-template-columns: minmax(0, 1fr) 34rem;
	}

	/* The render's halo is mostly empty, so it bleeds up into the hero padding; below it keeps clear room above the bar. */
	.c-hero .c-hero__media {
		margin-block: -2.5rem 0;
	}

	/* One rounded bar, as designed, once all five fit side by side. */
	.c-statbar {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		width: calc(100% - 2 * var(--c-gutter));
		max-width: var(--c-wrap);
		margin-top: 3.5rem;
		padding: 0.5rem 1.5rem;
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--c-banner);
	}

	.c-hero__inner > .c-statbar {
		width: auto;
		margin-top: 3.5rem;
	}

	.c-statbar__item {
		padding: 0.875rem 0.5rem;
		border-radius: 0;
		background: none;
	}

	.c-statbar .c-statbar__label {
		font-size: 1rem;
	}

	.c-hero__inner > .c-statbar {
		padding-block: 0.625rem;
		box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
	}

	.c-hero .c-statbar .c-statbar__item {
		gap: 0.5rem;
		padding-block: 0.75rem;
	}

	.c-hero .c-statbar .c-statbar__icon {
		width: 2.75rem;
	}

	.c-hero .c-statbar .c-statbar__label {
		font-size: 1.0625rem;
	}

	.c-products {
		padding-block: 4.5rem 0;
	}

	.c-products__panel {
		padding: 2.5rem 0;
	}

	.c-products .wp-block-tab-list {
		padding-inline: 2.5rem;
	}

	.c-products .wp-block-tab-list button {
		font-size: 1rem;
	}

	.c-cards {
		gap: 1.25rem;
		padding-inline: 2.5rem;
		scroll-padding-inline: 2.5rem;
	}

	.c-cards > li,
	.c-cards > .c-card {
		flex-basis: calc((100% - 2 * 1.25rem) / 3);
	}

	.c-card .c-card__media {
		height: 11.5rem;
	}

	.c-card .c-card__title {
		font-size: 1.25rem;
	}

	.c-card .c-card__text {
		font-size: 1rem;
	}

	.c-sectors {
		padding-block: 5.5rem 0;
	}

	.c-sectors__panel {
		margin-top: 1.5rem;
	}

	.c-sectors__tabs {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		overflow: hidden;
	}

	.c-sectors .wp-block-tab-list {
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.75rem;
		border-right: 1px solid #e3e8e5;
		overflow: visible;
	}

	.c-sectors .wp-block-tab-list button {
		justify-content: flex-start;
		gap: 0.875rem;
		width: 100%;
		min-height: 3.5rem;
		padding: 0.5rem 1rem;
		border: 0;
		border-radius: 0.75rem;
		background: none;
		font-size: 1.0625rem;
		text-align: left;
	}

	.c-sectors .wp-block-tab-list button::before {
		width: 1.75rem;
		height: 1.75rem;
	}

	.c-sectors .wp-block-tab-list button {
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.c-sectors .wp-block-tab-list button:not([aria-selected="true"]):hover {
		background-color: rgb(48 247 116 / 0.08);
	}

	.c-sectors .wp-block-tab-list button[aria-selected="true"] {
		background-color: var(--wp--preset--color--mint);
		color: var(--wp--preset--color--green-text);
	}

	.c-sectors .wp-block-tab-panel {
		align-self: center;
		padding: 2.5rem 3rem;
	}

	.c-sector {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
		gap: 3rem;
	}

	.c-sector .c-sector__media img {
		border-radius: 1.25rem;
	}

	.c-how {
		padding-block: 4.5rem 0;
	}

	.c-how__panel {
		padding: 4rem 3rem 3.5rem;
	}

	.c-how__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
		margin-top: 3rem;
	}

	.c-step .c-step__num {
		top: -0.25rem;
		left: 0.25rem;
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.125rem;
	}

	.c-step {
		--c-step-media: 12rem;
	}

	.c-step .c-step__more {
		width: 100%;
	}

	.c-step .c-step__title {
		max-width: none;
		padding-inline: 0.75rem;
		font-size: 1.0625rem;
	}

	.c-cta {
		padding-block: 4.5rem 5rem;
	}

	.c-cta__panel {
		grid-template-columns: minmax(0, 1fr) 27rem;
		gap: 3rem;
		padding: 3.5rem 3rem 3.5rem 4rem;
		overflow: visible;
	}

	/* The render runs the panel's full height whatever the copy height; the column holds about its width so the copy stays clear. */
	.c-cta:not(.c-cta--dark) .c-cta__media {
		position: relative;
		align-self: stretch;
		margin-block: -3.5rem;
	}

	.c-cta:not(.c-cta--dark) .c-cta__media img {
		position: absolute;
		inset-block: 0;
		right: -2rem;
		width: auto;
		max-width: none;
		height: 100%;
	}
}

/* Narrower desktops give the copy more room, so it stays short and the render stays clear of it. */
@media (min-width: 1100px) and (max-width: 1279px) {
	.c-cta:not(.c-cta--dark) .c-cta__panel {
		grid-template-columns: minmax(0, 1fr) 22rem;
		padding-left: 3rem;
	}
}

/* Laptop screens are short, so the hero tightens and the render scales with the height to keep the whole bar on the first screen. */
@media (min-width: 1100px) and (max-height: 820px) {
	.c-hero {
		padding-top: 2rem;
	}

	.c-hero .c-hero__media {
		width: min(100%, calc(100vh - 19rem));
		margin-top: -1.5rem;
	}

	.c-hero .c-hero__ticks {
		margin-top: 1rem;
	}

	.c-hero .c-hero__start {
		margin-top: 1.5rem;
	}

	.c-hero .c-hero__trial {
		margin-top: 0.75rem;
	}

	.c-hero__inner > .c-statbar {
		margin-top: 2.5rem;
	}
}

@media (min-width: 1280px) {
	.c-hero .c-statbar .c-statbar__icon {
		width: 3rem;
	}

	.c-hero .c-statbar .c-statbar__label {
		font-size: 1.125rem;
	}
}

/* Wide screens show all four stations at once, so nothing hides behind an arrow. */
@media (min-width: 1280px) {
	.c-cards > li,
	.c-cards > .c-card {
		flex-basis: calc((100% - 3 * 1.25rem) / 4);
	}
}

/* Shared: Learn More on station cards, dark bands, Venue FAQ */

.c-card .c-card__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 2.75rem;
	margin-top: 1rem;
	border-radius: 0.625rem;
	background-color: var(--wp--preset--color--mint);
	color: var(--c-black);
	font-size: 0.9375rem;
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.c-card .c-card__more:hover {
	background-color: var(--c-neon);
}

/* The default hover is black, which disappears on a dark band. */
.c-decision .c-btn .wp-block-button__link:hover,
.c-cta--dark .c-btn .wp-block-button__link:hover {
	background-color: var(--c-white);
	color: var(--c-black);
}

.c-faq {
	padding: 3.5rem var(--c-gutter) 0;
}

.c-faq > * {
	box-sizing: border-box;
	max-width: 56rem;
	margin-inline: auto;
}

.c-faq .c-faq__title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-faq .c-faq__intro {
	margin-block: 0.75rem 0;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-faq .c-faq__list {
	margin-top: 2rem;
	border-top: 1px solid #dde3e0;
}

.c-faq__list .wp-block-accordion-item {
	border-bottom: 1px solid #dde3e0;
}

.c-faq__list .wp-block-accordion-heading {
	margin: 0;
	font-family: var(--c-font-body);
	font-size: clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);
	font-weight: 700;
	line-height: 1.35;
}

.c-faq__list .wp-block-accordion-heading__toggle {
	gap: 1rem;
	min-height: 3.5rem;
	padding: 1.125rem 0;
}

.c-faq__list .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	color: var(--wp--preset--color--green-text);
	text-decoration: none;
}

/* A drawn plus that folds into a minus when open, as designed, instead of core's rotated text glyph. */
.c-faq__list .wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: #d3f8df;
	color: var(--wp--preset--color--green-text);
	font-size: 0;
}

.c-faq__list .wp-block-accordion-heading__toggle-icon::before,
.c-faq__list .wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.875rem;
	height: 2px;
	margin: -1px 0 0 -0.4375rem;
	border-radius: 1px;
	background-color: currentColor;
}

.c-faq__list .wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(90deg);
}

.c-faq__list .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none;
}

.c-faq__list .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(0deg);
}

@media (prefers-reduced-motion: no-preference) {
	.c-faq__list .wp-block-accordion-heading__toggle-icon::after {
		transition: transform 0.2s ease;
	}
}

.c-faq__list .wp-block-accordion-panel {
	padding: 0 3rem 1.25rem 0;
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.c-faq__list .wp-block-accordion-panel > * {
	margin-block: 0;
}

.c-faq__list .wp-block-accordion-panel > * + * {
	margin-top: 0.75rem;
}

.c-faq__list .wp-block-accordion-panel ol {
	padding-left: 1.5rem;
}

.c-faq__list .wp-block-accordion-panel li + li {
	margin-top: 0.25rem;
}

.c-faq__list a,
.c-legal a {
	color: var(--wp--preset--color--green-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.c-faq__list a:hover,
.c-legal a:hover {
	text-decoration-thickness: 2px;
}

/* For Venues: hero and perks */

.c-vhero {
	padding-bottom: 0.5rem;
}

.c-vhero__stage {
	display: grid;
}

.c-vhero__stage > * {
	margin: 0;
}

/* Phones read the promise first, then see the photo. */
.c-vhero .c-vhero__copy {
	order: -1;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding: 2rem var(--c-gutter) 1.5rem;
}

.c-vhero__copy > * {
	margin-block: 0;
}

.c-vhero .c-vhero__title {
	color: var(--c-black);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.c-vhero .c-vhero__tagline {
	margin-top: 0.5rem;
	color: var(--c-black);
	font-family: var(--c-font-head);
	font-size: clamp(1.375rem, 1.2083rem + 0.7407vw, 1.875rem);
	font-weight: 700;
	line-height: 1.15;
}

.c-vhero .c-vhero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 78% 50%;
}

.c-perks {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin: 1.25rem auto 0;
	padding-inline: var(--c-gutter);
}

.c-perk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	box-sizing: border-box;
	padding: 1.25rem 0.875rem;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--c-grey-bg);
	text-align: center;
}

.c-perk:last-child {
	grid-column: 1 / -1;
}

.c-perk > * {
	margin: 0;
}

.c-perks .c-perk__icon {
	margin-bottom: 0.25rem;
}

.c-perk__icon img {
	display: block;
	width: auto;
	height: 2.5rem;
}

.c-perks .c-perk__title {
	color: var(--c-black);
	font-family: var(--c-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.15;
}

.c-perks .c-perk__text {
	color: var(--c-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

/* The grey cards lift towards the pointer, as Tom asked; reduced motion keeps only the deeper shadow. */
@media (hover: hover) {
	.c-perk {
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	.c-perks .c-perk:hover {
		box-shadow: 0 16px 36px rgb(0 0 0 / 0.16);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-perks .c-perk:hover {
		transform: translateY(-0.5rem);
	}
}

/* For Venues: benefits */

.c-benefits {
	padding-block: 3.5rem 0;
}

.c-benefits__intro,
.c-benefits__list,
.c-decision__inner {
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.c-benefits__intro {
	display: grid;
	gap: 1.75rem;
}

.c-benefits__copy > * {
	margin-block: 0;
}

/* The forced break puts "benefits" under "your", so the line needs room for the y's tail above the f and b. */
.c-benefits .c-benefits__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.c-benefits .c-benefits__title .has-inline-color {
	display: block;
}

.c-benefits .c-benefits__lead {
	margin-top: 1rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-benefits .c-benefits__media {
	margin: 0;
}

/* The photo fades to white on its left, so phones crop to the faces. */
.c-benefits__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 85% 50%;
	border-radius: 1rem;
}

.c-benefits .c-benefits__list {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

.c-benefit {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	align-items: start;
	column-gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--card);
}

.c-benefit:nth-child(odd) {
	background-color: var(--wp--preset--color--mint);
}

.c-benefit > * {
	margin: 0;
}

.c-benefit .c-benefit__icon {
	grid-row: 1 / span 2;
}

.c-benefit__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.c-benefit .c-benefit__title {
	font-size: 1.1875rem;
	line-height: 1.2;
}

.c-benefit .c-benefit__text {
	margin-top: 0.375rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* For Venues: station options */

/* White space under the panel too, so the station cards do not run straight into the dark band. */
.c-options {
	padding-block: 3.5rem 3rem;
}

.c-options > * {
	margin-block: 0;
}

.c-options .c-options__title {
	padding-inline: var(--c-gutter);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-options .c-options__intro {
	margin: 0.75rem auto 0;
	max-width: 36rem;
	padding-inline: var(--c-gutter);
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--body);
}

.c-options .c-options__panel {
	margin-top: 2rem;
	padding: 1.5rem 0 2rem;
	background-color: var(--c-grey-bg);
}

/* For Venues: a simple decision */

.c-decision {
	margin-top: 3.5rem;
	padding-block: 3rem;
	background-color: var(--c-ink);
	color: var(--c-white);
}

.c-decision__inner {
	display: grid;
	align-items: center;
	gap: 2rem;
}

.c-decision .c-decision__media {
	margin: 0;
}

.c-decision__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 1rem;
}

.c-decision__copy > * {
	margin-block: 0;
}

.c-decision .c-decision__title {
	color: var(--c-white);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-decision .c-decision__text {
	margin-top: 1rem;
	max-width: 30rem;
	color: #d5dad7;
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-decision .c-decision__actions {
	margin-top: 1.75rem;
}

/* For Venues: dark call to action with a photo */

.c-cta--dark .c-cta__panel {
	background-color: var(--c-ink);
}

.c-cta--dark .c-cta__title {
	color: var(--c-white);
}

.c-cta--dark .c-cta__text {
	color: #d5dad7;
}

.c-cta--dark .c-cta__media {
	width: 100%;
	margin: 2rem 0 var(--c-gutter);
}

.c-cta--dark .c-cta__media img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 1rem;
}

@media (max-width: 699px) {
	/* The free trial is the strongest offer, so phones see it first; larger screens keep it last in the row. */
	.c-perk:last-child {
		order: -1;
	}

	/* Heading and intro centre on phones; the cards stay left so icon and text read as one row. */
	.c-benefits .c-benefits__copy {
		text-align: center;
	}
}

@media (min-width: 700px) {
	/* Photo and copy share one cell; the photo's own white fade plus a soft wash keep the heading readable. */
	.c-vhero__stage > * {
		grid-area: 1 / 1;
	}

	.c-vhero .c-vhero__media {
		position: relative;
	}

	/* The wash stays near white to the end of the green tagline, so it keeps 3:1 over the photo. */
	.c-vhero .c-vhero__media::after {
		--c-vhero-text: calc(max(var(--c-gutter), 50% - var(--c-wrap) / 2) + 13rem);
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgb(255 255 255 / 0.95) 0, rgb(255 255 255 / 0.9) var(--c-vhero-text), rgb(255 255 255 / 0) calc(var(--c-vhero-text) + 14rem));
	}

	.c-vhero .c-vhero__media img {
		aspect-ratio: auto;
		height: clamp(22rem, 12rem + 22vw, 32rem);
		object-position: 72% 50%;
	}

	.c-vhero .c-vhero__copy {
		position: relative;
		z-index: 1;
		order: 0;
		align-self: center;
		padding-block: 0 3rem;
	}

	/* Two lines on tablets keep the tagline clear of the faces. */
	.c-vhero .c-vhero__tagline {
		max-width: 9.5em;
		text-wrap: balance;
	}

	/* Three then two, centred, overlapping the photo's lower edge. */
	.c-perks {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: -3rem;
	}

	.c-perk {
		flex: 0 0 calc((100% - 1.5rem) / 3);
		box-shadow: 0 6px 24px rgb(0 0 0 / 0.08);
	}

	.c-benefits .c-benefits__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	/* Rows pack to the top, so a taller neighbour never pushes one card's title down. */
	.c-benefit {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		justify-items: center;
		padding: 1.75rem 1.25rem;
		text-align: center;
	}

	.c-benefit .c-benefit__icon {
		grid-row: auto;
		width: 4.5rem;
		margin-bottom: 1rem;
	}

	/* Two columns keep the filled cards on the diagonal. */
	.c-benefit:nth-child(odd) {
		background-color: transparent;
	}

	.c-benefit:nth-child(4n + 1),
	.c-benefit:nth-child(4n) {
		background-color: var(--wp--preset--color--mint);
	}

	.c-options .c-options__panel {
		padding: 1.75rem 0 2.25rem;
	}

	.c-cta--dark .c-cta__panel {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		padding: 2rem;
	}

	.c-cta--dark .c-cta__media {
		order: -1;
		margin: 0;
	}
}

@media (min-width: 860px) {
	.c-benefits__intro {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
		gap: 3rem;
	}

	.c-benefits__media img {
		aspect-ratio: 4 / 3;
		object-position: 70% 50%;
	}

	.c-decision__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
	}
}

/* One line from here, as designed; the wash reaches past its longer run. */
@media (min-width: 960px) {
	.c-vhero .c-vhero__media::after {
		--c-vhero-text: calc(max(var(--c-gutter), 50% - var(--c-wrap) / 2) + 27rem);
	}

	.c-vhero .c-vhero__tagline {
		max-width: none;
	}
}

@media (min-width: 1100px) {
	.c-perks {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1rem;
		margin-top: -4rem;
	}

	.c-perk {
		padding: 1.5rem 1rem;
	}

	.c-perk:last-child {
		grid-column: auto;
	}

	.c-perk__icon img {
		height: 3rem;
	}

	.c-perks .c-perk__title {
		font-size: 1.125rem;
	}

	.c-perks .c-perk__text {
		font-size: 0.9375rem;
	}

	.c-benefits,
	.c-options,
	.c-faq {
		padding-top: 4.5rem;
	}

	.c-benefits .c-benefits__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 2.5rem;
	}

	.c-benefit:nth-child(n) {
		background-color: transparent;
	}

	.c-benefit:nth-child(odd) {
		background-color: var(--wp--preset--color--mint);
	}

	.c-options {
		padding-bottom: 4.5rem;
	}

	.c-options .c-options__panel {
		margin-top: 3rem;
		padding: 2.75rem 0 3rem;
	}

	.c-decision {
		margin-top: 4.5rem;
		padding-block: 4.5rem;
	}

	.c-cta--dark .c-cta__panel {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: 3.5rem;
		padding: 2.5rem 3.5rem 2.5rem 2.5rem;
	}

	.c-cta--dark .c-cta__media {
		align-self: auto;
		margin-block: 0;
	}
}

/* FAQ page: a dark panel holds the title and tabs, the render breaks its top edge and the answers sit below */

.c-faqs {
	--c-faqs-pad: 1.25rem;
	padding-top: 2.5rem;
	/* The glow may reach past a narrow window; clipping sideways only keeps the render's top edge. */
	overflow-x: clip;
}

.c-faqs__stage {
	display: grid;
	grid-template-columns: var(--c-faqs-pad) minmax(0, 1fr) auto var(--c-faqs-pad);
	grid-template-rows: var(--c-faqs-pad) auto auto auto var(--c-faqs-pad) auto;
	box-sizing: border-box;
	width: calc(100% - 2 * var(--c-gutter));
	max-width: var(--c-wrap);
	margin-inline: auto;
}

.c-faqs__stage::before {
	content: "";
	grid-area: 1 / 1 / 6 / -1;
	border-radius: 1.25rem;
	background-color: var(--c-ink);
}

.c-faqs__stage > * {
	margin: 0;
}

/* The tabs block steps aside so its list sits in the panel and its answers below it. */
.c-faqs .c-faqs__tabs {
	display: contents;
}

/* The panel is drawn on ::before, which contrast checkers cannot see, so the text carries the same colour. */
.c-faqs .c-faqs__title,
.c-faqs .c-faqs__intro,
.c-faqs .wp-block-tab-list {
	background-color: var(--c-ink);
}

.c-faqs .c-faqs__title {
	grid-area: 2 / 2;
	align-self: center;
	color: var(--c-white);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-faqs .c-faqs__intro {
	grid-area: 3 / 2 / 4 / 4;
	max-width: 34rem;
	margin-top: 0.75rem;
	color: #d5dad7;
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-faqs .c-faqs__media {
	position: relative;
	isolation: isolate;
	grid-area: 1 / 3 / 3 / 4;
	align-self: start;
	width: 5.5rem;
	margin: -1.5rem 0 0 0.75rem;
}

/* The design's green glow under the render, drawn here instead of a second image. */
.c-faqs .c-faqs__media::before {
	content: "";
	position: absolute;
	inset: 35% -25% -15%;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(48 247 116 / 0.45), rgb(48 247 116 / 0));
}

.c-faqs .c-faqs__media img {
	display: block;
	width: 100%;
}

.c-faqs .wp-block-tab-list {
	display: flex;
	align-items: stretch;
	grid-area: 4 / 2 / 5 / 4;
	gap: 0.75rem;
	flex-wrap: nowrap;
	/* Core makes the buttons inherit these from the list, so equal widths are set here. */
	flex-grow: 1;
	flex-basis: 0;
	margin-top: 1.5rem;
}

.c-faqs .wp-block-tab-list button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	border: 2px solid var(--c-neon);
	border-radius: 0.625rem;
	background-color: var(--c-black);
	color: var(--c-white);
	font-family: var(--c-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease;
}

/* Core draws its active underline on ::before, which here holds the icon; the underline moves to ::after. */
.c-faqs .wp-block-tab-list button::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	background: center / contain no-repeat;
}

.c-faqs .wp-block-tab-list button:nth-child(1)::before { background-image: url("../img/faq-venues.webp"); }
.c-faqs .wp-block-tab-list button:nth-child(2)::before { background-image: url("../img/faq-users.webp"); }

/* Lime like the Request a Station button; the open tab is solid, the other black, and the underline marks the open one. */
.c-faqs .wp-block-tab-list button[aria-selected="true"] {
	background-color: var(--c-neon);
	color: var(--c-black);
}

/* The line icons are white; on lime they read in black like the label. */
.c-faqs .wp-block-tab-list button[aria-selected="true"]::before {
	filter: brightness(0);
}

.c-faqs .wp-block-tab-list button[aria-selected="true"]::after {
	content: "";
	position: absolute;
	right: 25%;
	bottom: -0.625rem;
	left: 25%;
	height: 4px;
	border-radius: 2px;
	background-color: var(--c-neon);
}

.c-faqs .wp-block-tab-list :focus-visible {
	outline-color: var(--c-neon);
}

@media (hover: hover) {
	.c-faqs .wp-block-tab-list button:not([aria-selected="true"]):hover {
		background-color: var(--c-neon);
		color: var(--c-black);
		box-shadow: 0 0 0 2px rgb(48 247 116 / 0.35), 0 0 14px var(--c-neon), 0 0 30px rgb(48 247 116 / 0.45);
	}

	.c-faqs .wp-block-tab-list button:not([aria-selected="true"]):hover::before {
		filter: brightness(0);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-faqs .wp-block-tab-list button:not([aria-selected="true"]):hover {
		animation: c-halo-flicker 0.6s linear;
	}
}

.c-faqs .wp-block-tab-panels {
	grid-area: 6 / 1 / 7 / -1;
	padding-top: 2.5rem;
}

.c-faqs .wp-block-tab-panel {
	padding: 0;
}

.c-faqs .c-faq__list {
	max-width: 56rem;
	margin-inline: auto;
	border-top: 1px solid #dde3e0;
}

.c-faqs + .c-cta {
	padding-top: 3.5rem;
}

@media (min-width: 700px) {
	.c-faqs {
		--c-faqs-pad: 2.5rem;
		padding-top: 4rem;
	}

	.c-faqs .c-faqs__intro,
	.c-faqs .wp-block-tab-list {
		grid-column: 2 / 3;
	}

	.c-faqs .wp-block-tab-list {
		flex-grow: 0;
		flex-basis: auto;
	}

	.c-faqs .wp-block-tab-list button {
		min-width: 11rem;
		padding-inline: 1rem 1.25rem;
	}

	.c-faqs .c-faqs__media {
		grid-area: 1 / 3 / 6 / 4;
		width: clamp(10rem, 4rem + 13vw, 13.5rem);
		margin: -3.5rem 0 -2rem 2rem;
	}

	.c-faqs .wp-block-tab-panels {
		padding-top: 3.5rem;
	}
}

@media (min-width: 1100px) {
	.c-faqs {
		--c-faqs-pad: 3.5rem;
	}

	.c-faqs .c-faqs__media {
		margin-right: 4rem;
	}

	.c-faqs + .c-cta {
		padding-top: 4.5rem;
	}
}

/* Legal pages: centred title and contents box as designed, the text at a reading width */

.c-legal {
	padding: 2.5rem var(--c-gutter) 4rem;
	color: var(--c-ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
}

.c-legal > * {
	box-sizing: border-box;
	max-width: 46rem;
	margin: 0 auto;
}

.c-legal .c-legal__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
}

.c-legal .c-legal__title::before {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin: 0 auto 1rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--green);
}

.c-legal .c-legal__meta {
	margin-top: 0.75rem;
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.c-legal .c-legal__meta + .c-legal__intro {
	margin-top: 2rem;
}

.c-legal p + p,
.c-legal p + ul,
.c-legal ul + p {
	margin-top: 0.875rem;
}

.c-legal ul {
	padding-left: 1.25rem;
}

.c-legal li + li {
	margin-top: 0.375rem;
}

.c-legal li::marker {
	color: var(--wp--preset--color--green-text);
}

.c-legal .c-legal__toc {
	margin-block: 2rem 0.5rem;
	padding: 1.5rem 1.5rem 1.5rem 1.25rem;
	border-radius: 1rem;
	background-color: var(--c-grey-bg);
}

.c-legal .c-legal__toc-title {
	margin: 0 0 0.75rem;
	font-family: var(--c-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
}

.c-legal .c-legal__toc ol {
	margin: 0;
	padding-left: 1.75rem;
}

.c-legal .c-legal__toc li + li {
	margin-top: 0.25rem;
}

.c-legal .c-legal__toc li::marker {
	color: var(--c-muted);
}

.c-legal .c-legal__toc a {
	color: var(--c-ink);
	text-decoration: none;
}

.c-legal .c-legal__toc a:hover {
	color: var(--wp--preset--color--green-text);
	text-decoration: underline;
}

.c-legal h2:not(.c-legal__toc-title) {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.25;
}

.c-legal h2 + * {
	margin-top: 0.75rem;
}

@media (min-width: 700px) {
	.c-legal {
		padding-block: 4rem 5rem;
	}

	.c-legal .c-legal__toc {
		padding: 1.75rem 2.5rem;
	}

	/* Twelve short headings read faster in two columns than in one long list. */
	.c-legal .c-legal__toc ol {
		columns: 2;
		column-gap: 2.5rem;
	}

	.c-legal .c-legal__toc li {
		break-inside: avoid;
	}
}

/* Sector pages: hero, reasons, why it works, perfect for */

.c-shero__stage {
	display: grid;
}

.c-shero__stage > * {
	margin: 0;
}

/* Phones and tablets read the promise first, then see the photo. */
.c-shero .c-shero__copy {
	order: -1;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding: 2rem var(--c-gutter) 1.75rem;
}

.c-shero__copy > * {
	margin-block: 0;
}

.c-shero .c-shero__eyebrow {
	color: var(--wp--preset--color--green-text);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.c-shero .c-shero__title {
	margin-top: 0.75rem;
	max-width: 40rem;
	color: var(--c-black);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.c-shero .c-shero__title .has-inline-color {
	display: block;
}

.c-shero .c-shero__lead {
	margin-top: 1rem;
	max-width: 34rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-shero .c-shero__actions {
	gap: 0.75rem 1rem;
	margin-top: 1.75rem;
}

.c-shero .c-shero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 88% 50%;
}

.c-reasons,
.c-why,
.c-fit {
	padding-block: 3.5rem 0;
}

.c-reasons > *,
.c-why__inner {
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.c-reasons .c-reasons__title,
.c-why .c-why__title,
.c-fit .c-fit__title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-reasons .c-reasons__list {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.c-reason {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--c-grey-bg);
}

.c-reason > * {
	margin: 0;
}

.c-reason .c-reason__icon {
	grid-row: 1 / span 2;
}

.c-reason__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.c-reason .c-reason__title {
	font-size: 1.125rem;
	line-height: 1.2;
}

.c-reason .c-reason__text {
	margin-top: 0.375rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.c-why__inner {
	display: grid;
	gap: 2rem;
}

.c-why__copy > * {
	margin-block: 0;
}

.c-why .c-why__title .has-inline-color {
	display: block;
}

.c-why .c-why__list {
	margin-top: 1.5rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.45;
}

.c-why__list li {
	position: relative;
	padding-left: 2.25rem;
}

.c-why__list li + li {
	margin-top: 0.875rem;
}

.c-why__list li::before {
	content: "";
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300c853'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-why__list strong {
	color: var(--c-black);
}

.c-why .c-why__media {
	margin: 0;
}

.c-why__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 60% 50%;
	border-radius: 1.25rem;
}

.c-fit__panel {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--c-gutter));
	max-width: var(--c-wrap);
	margin-inline: auto;
	padding: 2rem 1rem;
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--mint);
}

.c-fit .c-fit__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.625rem;
	margin-top: 1.5rem;
}

.c-fit__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	box-sizing: border-box;
	min-height: 7rem;
	padding: 1rem 0.5rem;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--c-white);
	text-align: center;
}

.c-fit__item > * {
	margin: 0;
}

.c-fit__icon img {
	display: block;
	width: auto;
	max-width: 3rem;
	height: 2.25rem;
	object-fit: contain;
}

.c-fit .c-fit__label {
	color: var(--c-black);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
}

@media (min-width: 600px) {
	.c-reasons .c-reasons__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.c-reason {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		padding: 1.75rem 1.25rem;
		text-align: center;
	}

	.c-reason .c-reason__icon {
		grid-row: auto;
		width: 4.5rem;
		margin-bottom: 1rem;
	}
}

@media (max-width: 699px) {
	/* Phones go straight from the promise to the reasons; the photo returns from tablet up. */
	.c-shero .c-shero__media {
		display: none;
	}

	/* A shorter landscape crop, so the photo never fills a phone screen between list and tiles. */
	.c-why__media img {
		aspect-ratio: 16 / 10;
		max-height: 15rem;
	}
}

@media (min-width: 700px) {
	.c-fit__panel {
		padding: 2.5rem 2rem;
		border-radius: var(--wp--custom--radius--panel);
	}

	.c-fit .c-fit__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 1rem;
		margin-top: 2rem;
	}

	.c-fit__item {
		min-height: 8.5rem;
	}

	.c-fit__icon img {
		max-width: 3.75rem;
		height: 2.75rem;
	}

	.c-fit .c-fit__label {
		font-size: 0.9375rem;
	}
}

@media (min-width: 860px) {
	.c-why__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: center;
		gap: 3.5rem;
	}
}

/* Copy over the photo once both fit; the photo's own white fade plus a soft wash keep the heading readable. */
@media (min-width: 960px) {
	/* The hero keeps to the page width, so on wide screens the photo stays beside the copy instead of at the window's edge. */
	.c-shero__stage {
		box-sizing: border-box;
		max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
		margin-inline: auto;
		padding: 1.5rem var(--c-gutter) 0;
	}

	.c-shero__stage > * {
		grid-area: 1 / 1;
	}

	/* It fills the whole row, so a tall heading never leaves a band under the photo. */
	.c-shero .c-shero__media {
		position: relative;
		overflow: hidden;
		min-height: clamp(30rem, 20rem + 14vw, 36rem);
		border-radius: var(--wp--custom--radius--panel);
	}

	.c-shero .c-shero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgb(255 255 255 / 0.95) 0, rgb(255 255 255 / 0.8) 30%, rgb(255 255 255 / 0) 58%);
	}

	.c-shero .c-shero__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
		object-position: 100% 50%;
	}

	/* The Hotels photo is busy right behind the green line, so its wash reaches further. */
	.c-shero--hotels .c-shero__media::after {
		background: linear-gradient(90deg, rgb(255 255 255 / 0.95) 0, rgb(255 255 255 / 0.95) 48%, rgb(255 255 255 / 0) 66%);
	}

	.c-shero .c-shero__copy {
		position: relative;
		z-index: 1;
		order: 0;
		align-self: center;
		padding: 2.5rem 0;
	}

	/* Half the window at most, so the heading stops short of the faces on smaller laptops. */
	.c-shero .c-shero__title {
		max-width: min(40rem, 48vw);
	}

	.c-shero .c-shero__lead {
		max-width: min(30rem, 44vw);
	}
}

@media (min-width: 1100px) {
	.c-reasons,
	.c-why,
	.c-fit {
		padding-top: 4.5rem;
	}

	.c-reasons .c-reasons__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 2.5rem;
	}
}

/* The longest tile labels (Conference Hotels, Serviced Apartments) need a smaller size in the two tightest bands. */
@media (max-width: 359px), (min-width: 700px) and (max-width: 767px) {
	.c-fit .c-fit__label {
		font-size: 0.8125rem;
	}
}

/* Products: hero, benefit bar, one panel per station */

.c-phero,
.c-pstations,
.c-pstations ~ .c-cta {
	background-color: var(--wp--preset--color--mint);
}

.c-phero {
	padding-block: 2rem 2.5rem;
}

.c-phero__inner {
	display: grid;
	gap: 1.5rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.c-phero__copy > * {
	margin-block: 0;
}

.c-phero .c-phero__title {
	color: var(--c-black);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.c-phero .c-phero__title .has-inline-color {
	display: block;
}

.c-phero .c-phero__lead {
	margin-top: 1rem;
	max-width: 36rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-phero .c-phero__actions {
	margin-top: 1.5rem;
}

.c-phero .c-phero__media {
	justify-self: center;
	width: min(80%, 22rem);
	margin: 0;
}

.c-phero__media img {
	display: block;
	width: 100%;
	height: auto;
	/* The composite's flat background is a shade off the mint, so darken drops it into the hero with no box edge. */
	mix-blend-mode: darken;
}

.c-statbar--products .c-statbar__icon img {
	aspect-ratio: 1;
	object-fit: contain;
}

.c-pstations {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding-block: 1.5rem 0;
}

/* Phones and tablets get a row of jump links, since four tall stations make a long scroll. */
.c-pjump {
	display: flex;
	align-items: center;
	gap: 0.5rem 0.75rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin: 0 auto;
	padding: 1.5rem var(--c-gutter) 0;
	overflow-x: auto;
	scrollbar-width: none;
	background-color: var(--wp--preset--color--mint);
}

.c-pjump > * {
	flex: 0 0 auto;
	margin: 0;
}

.c-pjump .c-pjump__label {
	color: var(--c-muted);
	font-size: 0.875rem;
	font-weight: 700;
}

.c-pjump .c-pjump__list {
	display: flex;
	gap: 0.5rem;
	margin-block: -0.375rem;
	padding: 0.375rem 0.25rem;
	list-style: none;
}

.c-pjump__list a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.1rem 1.125rem 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--c-white);
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px rgb(22 25 26 / 0.12);
}

.c-station {
	display: grid;
	gap: 1.5rem;
	box-sizing: border-box;
	width: calc(100% - 2 * var(--c-gutter));
	max-width: var(--c-wrap);
	margin: 0 auto;
	padding: var(--c-gutter);
	border-radius: 1.5rem;
	background-color: var(--c-white);
}

.c-station > * {
	margin: 0;
}

.c-station__gallery {
	display: grid;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: 1rem;
	background-color: var(--c-grey-bg);
}

.c-station__gallery > *,
.c-station__thumbs > * {
	margin: 0;
}

.c-station__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

/* Every photo sits on a white tile, so cut-outs and white-backed shots read as one set. */
.c-station .c-station__main img,
.c-station .c-station__thumb img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0.75rem;
	background-color: var(--c-white);
}

.c-station .c-station__main img {
	aspect-ratio: 1;
	padding: 1rem;
}

.c-station .c-station__thumb img {
	aspect-ratio: 1;
	padding: 0.375rem;
}

.c-station__pick {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.75rem;
	background: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}

/* The view in the large frame is marked, so the set reads as a gallery. */
/* Drawn inside the tile, so the chosen view stays in line with the others and the focus ring stays free. */
.c-station__pick[aria-pressed="true"] {
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--green-text);
}

.c-station__pick:focus-visible {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

.c-station__pick[aria-pressed="true"] img {
	padding: 0.5625rem;
	background: none;
}

.c-station__pick {
	background-color: var(--c-white);
}

.c-station__copy > * {
	margin-block: 0;
}

.c-station .c-station__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-station .c-station__tagline {
	margin-top: 0.375rem;
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
	line-height: 1.35;
}

.c-station .c-station__text {
	margin-top: 0.75rem;
	max-width: 34rem;
	color: var(--c-muted);
	line-height: 1.55;
}

.c-station .c-station__specs {
	display: grid;
	gap: 0.25rem;
	margin-top: 1.25rem;
}

.c-station .c-station__tagline,
.c-station .c-spec {
	text-wrap: balance;
}

.c-station .c-spec {
	margin: 0;
	padding: 0.625rem 0.875rem;
	border-radius: 0.5rem;
	line-height: 1.35;
}

/* Alternate rows are tinted as designed, so a long list stays easy to follow across. */
.c-spec:nth-child(odd) {
	background-color: var(--wp--preset--color--mint);
}

.c-spec__label {
	font-weight: 700;
}

.c-station .c-station__more {
	margin-top: 1.25rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Station buttons use the site's button chevron, as the hero and Home buttons do. */
.c-station__more a::after {
	content: "";
	width: 0.5em;
	height: 0.75em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}

.c-station__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	box-sizing: border-box;
	min-height: 3.25rem;
	padding: 0 1.25rem;
	border-radius: 0.625rem;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--green-text);
	color: var(--wp--preset--color--green-text);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.c-news-card .c-news-card__more::after {
	content: "";
	width: 1.1em;
	height: 0.75em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M12 0l6 6-6 6-1.4-1.4L14.2 7H0V5h14.2L10.6 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M12 0l6 6-6 6-1.4-1.4L14.2 7H0V5h14.2L10.6 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}

@media (hover: hover) {
	.c-station__pick:not([aria-pressed="true"]):hover {
		box-shadow: inset 0 0 0 2px var(--wp--preset--color--neon), 0 0 14px rgb(48 247 116 / 0.45);
	}

	.c-pjump__list a:hover {
		box-shadow: inset 0 0 0 1px rgb(22 25 26 / 0.12), 0 0 0 2px var(--wp--preset--color--neon), 0 0 18px rgb(48 247 116 / 0.45);
	}

	.c-station__more a:hover {
		background-color: var(--wp--preset--color--mint);
	}

	.c-station__more a:hover::after {
		transform: translateX(0.2em);
	}
}

@media (max-width: 699px) {
	.c-statbar--products .c-statbar__item:last-child {
		grid-column: auto;
		justify-content: flex-start;
	}

	/* Tall towers get a portrait tile, so the machine is not a sliver in a square, short enough that a jump link lands with the name in view. */
	#tower .c-station__main img,
	#grand-tower .c-station__main img {
		aspect-ratio: 4 / 5;
	}

	/* Three or four views sit in one row under the photo. */
	.c-station__thumbs:has(> :nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 700px) {
	/* One dark bar with four benefits from tablet up, as designed. */
	.c-statbar--products {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		width: calc(100% - 2 * var(--c-gutter));
		max-width: var(--c-wrap);
		padding: 0.375rem 1rem;
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--c-banner);
	}

	.c-statbar--products .c-statbar__item {
		gap: 0.625rem;
		padding: 0.75rem 0.375rem;
		border-radius: 0;
		background: none;
	}

	.c-statbar--products .c-statbar__icon {
		width: 2rem;
	}

	.c-statbar--products .c-statbar__label {
		font-size: 0.875rem;
	}

	.c-station {
		padding: 1.75rem;
	}

	.c-station__gallery {
		grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 26%);
		/* The large tile fills the grey panel with an even inset; the views centre beside it. */
		align-items: stretch;
		padding: 1rem;
	}

	.c-station__thumbs {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: minmax(0, 1fr);
		/* The views share the large tile's height, so both columns of the gallery end together; size containment stops them setting that height. */
		align-self: stretch;
		contain: size;
	}

	.c-station .c-station__thumb img {
		height: 100%;
	}

	.c-station__thumbs > .c-station__thumb,
	.c-station__thumb .c-station__pick {
		height: 100%;
	}

	.c-station .c-station__thumb img {
		aspect-ratio: auto;
	}

	.c-station .c-station__main img {
		aspect-ratio: 4 / 5;
	}
}

/* Stacked tablet cards use a square frame, so each station is not a screen and a half of photo; a narrower view column keeps it square. */
@media (min-width: 700px) and (max-width: 959px) {
	.c-station .c-station__main img {
		aspect-ratio: 1;
	}

	.c-station__gallery {
		grid-template-columns: minmax(0, 1fr) 23%;
	}

	.c-phero .c-phero__media {
		justify-self: start;
		width: min(60%, 20rem);
	}
}

/* Side by side once the heading keeps its two designed lines next to the render; the copy column never gets narrower than the heading. */
@media (min-width: 1000px) {
	.c-phero__inner {
		grid-template-columns: minmax(37rem, 1fr) minmax(0, 30rem);
		align-items: center;
		gap: 2rem;
	}

	.c-phero .c-phero__media {
		width: 100%;
	}
}

@media (min-width: 960px) {
	.c-pjump {
		display: none;
	}
}

/* Four short chips fit on two rows, so the biggest station is never hidden off the edge. */
@media (max-width: 599px) {
	.c-pjump,
	.c-pjump .c-pjump__list {
		flex-wrap: wrap;
	}

	.c-pjump {
		overflow-x: visible;
	}

	.c-pjump .c-pjump__label,
	.c-pjump .c-pjump__list {
		flex: 1 1 100%;
		min-width: 0;
	}

	.c-pjump {
		padding-top: 0.75rem;
	}

	/* A smaller render brings the station links nearer the first screen. */
	.c-phero .c-phero__media {
		width: min(62%, 14rem);
	}

	/* Four stations as an even two by two, not three and one. */
	.c-pjump .c-pjump__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-inline: 0;
	}

	.c-pjump__list a {
		justify-content: center;
		width: 100%;
	}
}

@media (min-width: 960px) {
	/* The grey gallery runs the full height of the card, as designed, with the copy centred beside it. */
	.c-station {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 2.5rem;
		padding: 2rem;
	}

	.c-station__gallery {
		align-content: stretch;
	}

	.c-station > .c-station__copy {
		align-self: center;
	}
}

@media (min-width: 1100px) {
	.c-phero {
		padding-block: 3.5rem;
	}

	.c-phero__inner {
		grid-template-columns: minmax(37rem, 1fr) minmax(0, 30rem);
	}

	.c-statbar--products {
		padding-inline: 1.5rem;
	}

	.c-statbar--products .c-statbar__icon {
		width: 2.5rem;
	}

	.c-statbar--products .c-statbar__label {
		font-size: 1rem;
	}

	.c-phero {
		padding-bottom: 2rem;
	}

	.c-pstations {
		gap: 2.5rem;
		padding-top: 2.5rem;
	}

	.c-station {
		gap: 3.5rem;
		padding: 2.5rem;
	}
}

/* News: featured article, topic chips and search, article cards, and the article page */

.c-news {
	padding-block: 1.5rem 0;
}

.c-feature,
.c-news__panel,
.c-article {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--c-gutter));
	max-width: var(--c-wrap);
	margin-inline: auto;
}

.c-feature__list,
.c-news__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-feature__card {
	display: grid;
	overflow: hidden;
	border-radius: 1.25rem;
	background-color: var(--c-grey-bg);
}

.c-feature__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.75rem var(--c-gutter) 2rem;
}

.c-feature__copy > * {
	margin-block: 0;
}

.c-feature .c-feature__eyebrow,
.c-news .c-news__title:is(h2) {
	color: var(--wp--preset--color--green-text);
	font-family: var(--c-font-body);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.c-feature .c-feature__title {
	margin-top: 0.625rem;
	max-width: 32rem;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.c-feature__title a,
.c-news-card__title a {
	color: inherit;
	text-decoration: none;
}

.c-feature .c-feature__text {
	margin-top: 0.875rem;
	max-width: 32rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-feature__text p {
	margin: 0;
}

/* In-page buttons match the hero buttons (.c-btn); the pill stays with the dark call to action band. */
.c-feature .c-feature__more,
.c-news__all a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	box-sizing: border-box;
	min-height: 3.25rem;
	padding: 0.5em 1.5em;
	border-radius: 0.625rem;
	background-color: var(--wp--preset--color--neon);
	color: var(--c-ink);
	font-family: var(--c-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.c-feature .c-feature__more::after,
.c-news__all a::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.75em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'%3E%3Cpath d='M0 0h5l6 8-6 8H0l6-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-feature .c-feature__more {
	margin-top: 1.5rem;
}

.c-feature .c-feature__media {
	order: -1;
	margin: 0;
}

.c-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 50%;
}

.c-news > .c-news__panel:first-child {
	margin-top: 0;
}

.c-news__panel {
	margin-top: 1.25rem;
	padding: 1.5rem var(--c-gutter) 2rem;
	border-radius: 1.25rem;
	background-color: var(--c-grey-bg);
}

.c-news__bar {
	display: grid;
	gap: 1rem;
}

.c-news__bar > *,
.c-news__tools > * {
	margin: 0;
}

.c-news__heading > * {
	margin-block: 0;
}

.c-news .c-news__crumb {
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c-news__heading .c-news__crumb a {
	display: inline-block;
	margin-block: -0.75rem;
	padding-block: 0.75rem;
}

.c-news__crumb a {
	color: var(--wp--preset--color--green-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Article crumb: "News / Venue Tips", both links. */
.c-article__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.c-article__crumb > * {
	margin: 0;
}

.c-article__crumb > p::after {
	content: "/" / "";
	margin-inline: 0.5em;
	color: var(--c-muted);
	font-weight: 400;
}

.c-article__crumb a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.c-news h1.c-news__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.c-news .c-news__desc,
.c-news .c-news__count {
	margin-top: 0.5rem;
	color: var(--c-muted);
}

.c-news__desc p {
	margin: 0;
	text-wrap: pretty;
}

.c-news .c-news__all {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.c-news__tools {
	display: grid;
	gap: 1rem;
}

/* Chips scroll sideways on a narrow phone rather than wrap into a ragged block. */
.c-topics-nav {
	min-width: 0;
	margin: -0.375rem calc(-1 * var(--c-gutter));
	padding: 0.375rem var(--c-gutter);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: var(--c-gutter);
	scroll-snap-type: x proximity;
}

/* Where the row runs off the screen, a fade says it scrolls; the last chip can scroll clear of it. */
@media (max-width: 859px) {
	.c-topics-nav .c-topics {
		width: max-content;
		padding-inline-end: 2rem;
	}

	.c-topics-nav {
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--c-gutter), #000 calc(100% - 2rem), transparent);
	}
}

.c-topics .cat-item {
	scroll-snap-align: start;
}

/* Tabbing through the chips scrolls each one fully clear of the fade; snapping would pull it back. */
.c-topics-nav:focus-within {
	scroll-snap-type: none;
	scroll-padding-inline: var(--c-gutter) 2.5rem;
}

.c-topics-nav .c-topics {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

.c-topics .cat-item {
	flex: 0 0 auto;
}

.c-topics .cat-item a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.1rem 1.25rem 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--c-ink);
	color: var(--c-white);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The chosen topic is lime with black text, like the Request a Station button and the FAQ tabs. */
.c-topics .current-cat a {
	background-color: var(--c-neon);
	color: var(--c-black);
}

.c-news__search {
	margin: 0;
}

.c-news__search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0 0 0 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--c-ink);
}

.c-news__search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-white);
	font: inherit;
	font-size: 1rem;
}

.c-news__search .wp-block-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.c-news__search .wp-block-search__input::placeholder {
	color: #b9c0bc;
	opacity: 1;
}

.c-news__search .wp-block-search__input:focus {
	outline: 2px solid transparent;
}

/* The ring moves to the whole pill, so keyboard users see the field they are in. */
.c-news__search .wp-block-search__inside-wrapper:focus-within {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

.c-news__search .wp-block-search__button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--c-white);
	cursor: pointer;
}

.c-news__search .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--neon);
	outline-offset: -4px;
}

.c-news__search .wp-block-search__button svg {
	width: 1.375rem;
	height: 1.375rem;
	fill: currentColor;
}

.c-news__query {
	margin-top: 1.5rem;
}

.c-news__grid {
	display: grid;
	gap: 0.75rem;
}

.c-news-card {
	position: relative;
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 0.875rem;
	align-items: start;
	height: 100%;
	box-sizing: border-box;
	padding: 0.75rem;
	border-radius: 1rem;
	background-color: var(--c-white);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.c-news-card > *,
.c-news-card__body > * {
	margin: 0;
}

.c-news-card .c-news-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0.625rem;
}

.c-news-card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.c-news-card .c-news-card__title {
	font-size: 1.0625rem;
	line-height: 1.25;
}

/* The whole card is the tap target; the title link carries the name. */
.c-news-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Keyboard focus outlines the card the link stands for, as hover lifts it. */
.c-news-card:has(.c-news-card__title a:focus-visible) {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

.c-news-card .c-news-card__title a:focus-visible {
	outline: none;
}

.c-news-card .c-news-card__text {
	margin-top: 0.375rem;
	color: var(--c-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.c-news-card__text p {
	margin: 0;
}

/* Phones show title and summary only; the card itself is the link. */
.c-news-card .c-news-card__more {
	display: none;
}

.c-news__pagination {
	gap: 0.5rem;
	margin-top: 1.5rem;
	font-weight: 700;
}

.c-news__pagination a,
.c-news__pagination .current {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.75rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--c-ink);
}

.c-news__pagination .current {
	background-color: var(--c-ink);
	color: var(--c-white);
}

.c-news__empty {
	margin: 0;
	color: var(--c-muted);
}

/* Article page */

.c-article {
	max-width: 50rem;
	padding-block: 1rem 0;
}

.c-article > * {
	margin-block: 0;
}

.c-article__head {
	max-width: 38rem;
	margin-inline: auto;
}

.c-article__head > * {
	margin-block: 0;
}



.c-article .c-article__title {
	margin-top: 0.75rem;
	/* Long article titles stay at three lines in the 38rem column instead of growing to four on desktop. */
	font-size: min(var(--wp--preset--font-size--h-1), 2.75rem);
	/* Long titles run to three or four lines; at this size League Spartan needs 1.2 to keep descenders off the line below. */
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.c-article .c-article__lead {
	margin-top: 1rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-article__lead p {
	margin: 0;
}

.c-article .c-article__date {
	margin-top: 1rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.c-article .c-article__media {
	margin-top: 1.75rem;
}

.c-article__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.25rem;
	object-fit: cover;
	/* A hairline keeps the frame where a photo's top edge is as pale as the page. */
	box-shadow: 0 0 0 1px rgb(22 25 26 / 0.08);
}

/* Prose links only; the closing button keeps the site's black-on-neon label. Links are short phrases, kept whole. */
.c-article__body a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
	white-space: nowrap;
}

/* One reading column of about 70 characters for head, text and back link; only the photo runs wider. */
.c-article .c-article__body {
	max-width: 38rem;
	margin: 2rem auto 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
}

.c-article__body > * {
	margin-block: 0;
}



.c-article__body > * + * {
	margin-top: 1.25rem;
}

.c-article__body h2 {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.2;
}

.c-article__body h2 + * {
	margin-top: 0.75rem;
}

.c-article__body ul {
	padding-left: 1.25rem;
}

.c-article__body li + li {
	margin-top: 0.5rem;
}

.c-article__body li::marker {
	color: var(--wp--preset--color--green-text);
}

.c-article .c-article__back {
	max-width: 38rem;
	margin: 2.5rem auto 0;
	font-weight: 700;
}

.c-article__back a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--green-text);
	text-decoration: none;
}

.c-article__back a::before {
	content: "";
	width: 1.1em;
	height: 0.75em;
	margin-right: 0.45em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M6 0L0 6l6 6 1.4-1.4L3.8 7H18V5H3.8l3.6-3.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M6 0L0 6l6 6 1.4-1.4L3.8 7H18V5H3.8l3.6-3.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-news .c-more {
	margin-top: 3rem;
	margin-bottom: 0;
}

.c-more > .c-news__title {
	margin-block: 0 0.25rem;
}

@media (hover: hover) {
	.c-news-card:hover {
		box-shadow: 0 10px 28px rgb(0 0 0 / 0.1);
		transform: translateY(-2px);
	}

	.c-topics .cat-item:not(.current-cat) a:hover,
	.c-feature .c-feature__more:hover,
	.c-news__all a:hover {
		box-shadow: 0 0 0 2px var(--wp--preset--color--neon), 0 0 18px rgb(48 247 116 / 0.45);
	}

	.c-news-card:hover .c-news-card__title a,
	.c-feature__title a:hover {
		color: var(--wp--preset--color--green-text);
	}

	.c-news__search .wp-block-search__button:hover {
		color: var(--wp--preset--color--neon);
	}

	.c-article__back a:hover,
	.c-news__crumb a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-news-card {
		transition: none;
	}

	.c-news-card:hover {
		transform: none;
	}
}

/* Tablets keep one list of wide cards, so an odd number of articles never leaves a half-empty row. */
@media (min-width: 640px) {
	.c-news__grid {
		gap: 1rem;
	}

	.c-news-card {
		grid-template-columns: 13rem minmax(0, 1fr);
		gap: 1.25rem;
		padding: 0.875rem;
	}

	.c-news-card .c-news-card__media img {
		aspect-ratio: 4 / 3;
	}

	.c-news-card__body {
		padding-block: 0.25rem;
	}

	.c-news-card .c-news-card__title {
		font-size: 1.1875rem;
	}

	.c-news-card .c-news-card__text {
		margin-top: 0.5rem;
	}

	.c-news-card .c-news-card__more {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		align-self: flex-end;
		margin-top: auto;
		padding-top: 0.75rem;
		color: var(--wp--preset--color--green-text);
		font-size: 0.9375rem;
		font-weight: 700;
		text-decoration: none;
	}
}

@media (min-width: 860px) {
	.c-feature__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	}

	.c-feature .c-feature__media {
		order: 0;
	}

	.c-feature__copy {
		justify-content: center;
		padding: 2.5rem 2rem;
	}

	.c-news__panel {
		padding: 2rem 2rem 2.5rem;
	}

	.c-topics-nav {
		margin-inline: 0;
		padding-inline: 0;
	}

	.c-news__search {
		width: min(100%, 24rem);
	}
}

@media (min-width: 960px) {
	.c-news__tools {
		grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
		align-items: center;
		gap: 1.5rem;
	}

	.c-news__search {
		width: auto;
	}

	.c-news__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.c-news-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 0;
		padding: 0;
		overflow: hidden;
	}

	.c-news-card .c-news-card__media img {
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}

	.c-news-card__body {
		padding: 1.125rem 1.25rem 1rem;
	}

	.c-news {
		padding-top: 2.5rem;
	}

	.c-article {
		padding-top: 1.5rem;
	}
}

@media (min-width: 1100px) {
	.c-feature__copy {
		padding: 3rem 2.5rem;
	}

	.c-news__panel {
		padding: 2.5rem 2.5rem 3rem;
	}
}

/* Label, chips and search share one row only once all of them fit whole; a page heading keeps its own row above. */
@media (min-width: 1200px) {
	.c-news__bar {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 1rem 2rem;
	}

	.c-news__bar:has(> .c-news__heading) {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-news__tools {
		grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
		align-items: center;
		gap: 1.5rem;
	}

	.c-news__search {
		width: auto;
	}
}

/* Request a Station: centred heading, the enquiry form and the mint "Let's talk charging" panel */

.c-contact {
	padding-block: 2.5rem 0;
}

.c-contact__head {
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin-inline: auto;
	padding-inline: var(--c-gutter);
	text-align: center;
}

.c-contact__head > * {
	margin-block: 0;
}

/* The design's short green rule over the heading. */
.c-contact .c-contact__title::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 0.3125rem;
	margin: 0 auto 1rem;
	border-radius: 1rem;
	background-color: var(--wp--preset--color--neon);
}

.c-contact .c-contact__title {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.c-contact .c-contact__lead {
	margin-top: 0.75rem;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
}

.c-contact__stage {
	display: grid;
	gap: 2.5rem;
	box-sizing: border-box;
	max-width: calc(var(--c-wrap) + 2 * var(--c-gutter));
	margin: 2.5rem auto 0;
	padding-inline: var(--c-gutter);
}

.c-contact__main > *,
.c-contact__panel-copy > * {
	margin-block: 0;
}

.c-contact .c-contact__form-title {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.2;
}

.c-contact .c-contact__intro {
	margin-top: 0.5rem;
	max-width: 32rem;
	color: var(--c-muted);
	line-height: 1.5;
}

.c-contact .c-contact__required {
	margin-top: 0.625rem;
	color: var(--c-muted);
	font-size: 0.875rem;
}

.c-contact__star {
	color: #c4271c;
}

.c-contact__main .fluentform {
	margin-top: 1.25rem;
}

/* After sending, the thank-you stands alone in the middle; the panel was there to win the enquiry. */
.c-contact__stage:has(.ff-message-success) {
	grid-template-columns: minmax(0, 42rem);
	justify-content: center;
	padding-bottom: 4rem;
}

.c-contact__stage:has(.ff-message-success) .c-contact__panel {
	display: none;
}

/* After sending, the heading, instructions and privacy note go with the form they described. */
.c-contact__main:has(.ff-message-success) :is(.c-contact__form-title, .c-contact__intro, .c-contact__context, .c-contact__required) {
	display: none;
}

.c-contact__main:has(.ff-message-success) .fluentform {
	margin-top: 0;
}

/* Read by screen readers while sending; it takes focus, so it must not use the class that reappears on focus. */
.c-contact__status,
.c-contact__status:focus {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.c-contact .c-contact__context {
	display: inline-block;
	margin-top: 0.875rem;
	padding: 0.5rem 0.875rem;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--forest);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.c-contact__context a {
	position: relative;
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
	white-space: nowrap;
}

.c-contact .c-form__privacy {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.c-form__privacy a {
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
}

/* Form fields: label over a light rounded box, as designed. */
.c-contact .frm-fluent-form .ff-el-group {
	margin: 0 0 1.125rem;
}

.c-contact .frm-fluent-form .ff-el-input--label {
	margin-bottom: 0.375rem;
}

.c-contact .frm-fluent-form .ff-el-input--label label {
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.c-contact .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	content: " *" / "";
	color: #c4271c;
}

.c-contact .frm-fluent-form .ff-el-form-control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid #868fa0;
	border-radius: 0.625rem;
	background-color: var(--c-white);
	color: var(--c-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-contact .frm-fluent-form textarea.ff-el-form-control {
	min-height: 7.5rem;
	resize: vertical;
}

.c-contact .frm-fluent-form .ff-el-form-control::placeholder {
	color: #6b7480;
	opacity: 1;
}

.c-contact .frm-fluent-form select.ff-el-form-control {
	padding-right: 2.75rem;
	appearance: none;
	background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%2316191a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center / 0.875rem no-repeat;
	cursor: pointer;
}

/* An unchosen option reads as a hint, like the placeholders. */
.c-contact .frm-fluent-form select.ff-el-form-control:has(option[value=""]:checked) {
	color: #6b7480;
}

.c-contact .frm-fluent-form .ff-el-form-control:hover {
	border-color: #6b7480;
}

/* A dark edge with the brand glow, like the site's other focus rings; the transparent outline shows in high contrast mode. */
.c-contact .frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--c-ink);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px var(--c-ink), 0 0 0 4px rgb(48 247 116 / 0.55);
}

/* The red edge stays while the field is being fixed. */
.c-contact .frm-fluent-form .ff-el-is-error .ff-el-form-control,
.c-contact .frm-fluent-form .ff-el-is-error .ff-el-form-control:focus {
	border-color: #b3261e;
	box-shadow: 0 0 0 1px #b3261e;
}

.c-contact .frm-fluent-form .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: 0 0 0 1px #b3261e, 0 0 0 4px rgb(179 38 30 / 0.16);
	/* Every field in error has the red edge, so the one being typed in also gets the site's ink ring. */
	outline: 2px solid var(--c-ink);
	outline-offset: 4px;
}

.c-contact .frm-fluent-form .error.text-danger {
	margin-top: 0.375rem;
	color: #b3261e;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.c-contact .frm-fluent-form .ff_submit_btn_wrapper {
	margin: 1.75rem 0 0;
	text-align: center;
}

.c-contact .frm-fluent-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: min(100%, 13rem);
	min-height: 3.5rem;
	padding: 0.15em 2em 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--neon);
	color: var(--c-ink);
	font-family: var(--c-font-head);
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow 0.2s ease, opacity 0.15s ease;
}

.c-contact .frm-fluent-form .ff-btn-submit:disabled,
.c-contact .frm-fluent-form.ff_submitting .ff-btn-submit {
	opacity: 0.75;
	cursor: progress;
}

/* A spinner while sending, so a slow connection does not look like a dead button; it sits in the padding so the label does not move. */
.c-contact .frm-fluent-form .ff-btn-submit {
	position: relative;
}

.c-contact .frm-fluent-form.ff_submitting .ff-btn-submit::after,
.c-contact .frm-fluent-form .ff-btn-submit.ff-working::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 0.875em;
	height: 0.875em;
	margin-top: -0.4375em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: c-spin 0.7s linear infinite;
}

@keyframes c-spin {
	to {
		transform: rotate(360deg);
	}
}

.c-contact .ff-message-success {
	margin-top: 0;
	padding: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
	border-radius: 1rem;
	/* White with a mint edge, so it reads as a card on the white page. */
	background-color: var(--c-white);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--mint), 0 8px 28px rgb(0 0 0 / 0.06);
	color: var(--wp--preset--color--forest);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* The panel itself shows where focus went after sending. */
.c-contact .ff-message-success:focus {
	outline: none;
}

/* The tick sits left of "Thanks", centred on the heading's first line. */
.c-contact .ff-message-success .c-done__title::before {
	content: "";
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: max(0px, calc((1.1em - 2.75rem) / 2));
	border-radius: 50%;
	background: var(--wp--preset--color--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23032d03' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}

.c-contact .ff-message-success p {
	margin: 0;
}

.c-contact .ff-message-success p + p {
	margin-top: 0.5rem;
}

.c-contact .ff-message-success h2 {
	margin: 0;
}

.c-contact .ff-message-success .c-done__title {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin-bottom: 0.75rem;
	text-wrap: balance;
	font-family: var(--c-font-head);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.2;
}

/* Tom's three steps: a mint numbered circle, the step in bold and one line under it. */
.c-contact .ff-message-success .c-done__steps {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: c-done;
	color: var(--c-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.c-done__steps li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	column-gap: 1rem;
	counter-increment: c-done;
}

.c-done__steps li + li {
	margin-top: 1rem;
}

.c-done__steps li::before {
	content: counter(c-done);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
}

.c-contact .ff-message-success .c-done__step-title {
	color: var(--wp--preset--color--forest);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.c-done__step-text {
	margin-top: 0.125rem;
}

/* The saved message loses a no-break hyphen, so "30-day" is kept on one line here. */
.c-done__nowrap {
	white-space: nowrap;
}

.c-contact .ff-message-success .c-done__fees {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #dde3e0;
	color: var(--wp--preset--color--forest);
	font-size: 1rem;
	font-weight: 700;
}

.c-done__fees::before {
	content: "";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a03f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-contact .ff-message-success .c-done__next {
	margin-top: 1rem;
	color: var(--c-ink);
	font-size: 1rem;
}

.c-done__next a {
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
}

.c-contact .ff-errors-in-stack {
	margin-top: 1rem;
	padding: 0.875rem 1rem;
	border-radius: 0.75rem;
	background-color: #fdeceb;
	box-shadow: inset 0 0 0 1px rgb(179 38 30 / 0.35);
	color: #b3261e;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
}

.c-contact .ff-errors-in-stack:empty {
	display: none;
}

/* The box itself shows where focus went, like the thank-you card. */
.c-contact .ff-errors-in-stack:focus {
	outline: none;
}

.c-contact .ff-errors-in-stack a {
	color: inherit;
}

/* The plugin's close glyph cannot be reached by keyboard and reads as "times"; the message clears on the next send. */
.c-contact .ff-errors-in-stack .error-clear {
	display: none;
}

.c-contact__panel {
	position: relative;
	display: grid;
	overflow: hidden;
	padding: 2rem var(--c-gutter) 0;
	/* The panel runs into the footer at every width, as designed, so only its top is rounded. */
	border-radius: 1.5rem 1.5rem 0 0;
	/* The design's pale sweep across the mint, drawn here instead of a background image. */
	background:
		radial-gradient(130% 70% at 110% 85%, rgb(255 255 255 / 0.75) 0 48%, transparent 48.5%),
		linear-gradient(160deg, #d9f7e7, var(--wp--preset--color--mint) 60%);
}

.c-contact .c-contact__panel-title {
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.c-contact .c-contact__panel-text {
	margin-top: 0.75rem;
	max-width: 22rem;
	color: var(--c-ink);
	font-size: var(--c-lead);
	line-height: 1.45;
}

/* A 44px tap area that does not stretch the focus ring away from the words. */
.c-contact__context a::after {
	content: "";
	position: absolute;
	inset: -0.75rem 0;
}

.c-contact .c-contact__media {
	justify-self: center;
	width: min(36%, 8.5rem);
	margin: 1.75rem 0 0;
}

.c-contact__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Phones: the panel leads as a short mint strip, so the reassurance comes before the form. */
@media (max-width: 699px) {
	.c-contact__stage {
		gap: 1.75rem;
		padding-bottom: 3rem;
	}

	.c-contact__panel {
		order: -1;
		padding: 1.125rem 1.25rem 1.25rem;
		border-radius: 1rem;
	}

	.c-contact .c-contact__panel-title {
		font-size: 1.5rem;
		line-height: 1.15;
	}

	.c-contact .c-contact__panel-text {
		margin-top: 0.375rem;
		max-width: none;
		font-size: 1rem;
	}

	.c-contact .c-contact__media {
		display: none;
	}
}

@media (hover: hover) {
	.c-contact .frm-fluent-form .ff-btn-submit:not(:disabled):hover {
		box-shadow: 0 0 0 2px var(--wp--preset--color--neon), 0 0 22px rgb(48 247 116 / 0.5);
	}
}

@media (max-width: 479px) {
	.c-contact .frm-fluent-form .ff-btn-submit {
		width: 100%;
	}
}

@media (min-width: 700px) {
	.c-contact {
		padding-top: 3.5rem;
	}

	.c-contact__panel {
		grid-template-columns: minmax(0, 1fr) 9rem;
		align-items: end;
		gap: 1.5rem;
		padding: 2.5rem 2.5rem 0;
	}

	.c-contact__panel-copy {
		align-self: center;
		padding-bottom: 2.5rem;
	}

	.c-contact .c-contact__media {
		width: 100%;
	}
}

@media (min-width: 960px) {
	.c-contact__stage {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: stretch;
		gap: 3.5rem;
	}

	/* The panel runs down to the footer, as designed, with the station standing on its lower edge. */
	.c-contact__panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 0;
		padding: 2.75rem 2.5rem 0;
	}

	.c-contact__panel-copy {
		padding-bottom: 0;
	}

	.c-contact .c-contact__form-title {
		font-size: 1.75rem;
	}

	/* Two lines, as designed: "Let's talk" over "charging", at display size by desktop. */
	.c-contact .c-contact__panel-title {
		max-width: 6.5em;
		font-size: clamp(2.5rem, 1rem + 2.8vw, 3.25rem);
	}

	/* As designed, the station starts under the copy and runs off the bottom of the panel into the footer, at whatever height the form sets. */
	.c-contact__panel {
		grid-template-rows: auto minmax(0, 1fr);
	}

	.c-contact .c-contact__media {
		display: flex;
		justify-content: center;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		margin: 2rem 0 -2.5rem;
	}

	.c-contact .c-contact__media img {
		width: auto;
		max-width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center top;
	}

	.c-contact__main {
		padding-bottom: 4rem;
	}

	.c-contact__stage:has(.ff-message-success) .c-contact__main {
		padding-bottom: 0;
	}
}

/* The header button marks the page it leads to. */
.c-header .c-header__cta .wp-block-button__link[aria-current="page"]:not(:hover),
.c-overlay .c-overlay__cta .wp-block-button__link[aria-current="page"] {
	box-shadow: 0 0 0 2px var(--c-bar), 0 0 0 4px var(--wp--preset--color--neon);
}

@media (prefers-reduced-motion: reduce) {
	.c-contact .frm-fluent-form.ff_submitting .ff-btn-submit::after,
	.c-contact .frm-fluent-form .ff-btn-submit.ff-working::after {
		animation: none;
	}
}

/* Phones: a wider text column in the list cards, so titles take two lines and summaries end on whole words. */
@media (max-width: 479px) {
	/* Thumbnail beside the title, summary full width under both: the title stays the larger line. */
	.c-news-card {
		grid-template-columns: 4rem minmax(0, 1fr);
		grid-template-areas: "media title" "text text";
		align-items: center;
		gap: 0.625rem 0.75rem;
		padding: 0.75rem 0.875rem 0.875rem 0.75rem;
	}

	.c-news-card__body {
		display: contents;
	}

	.c-news-card .c-news-card__media {
		grid-area: media;
	}

	.c-news-card .c-news-card__title {
		grid-area: title;
		font-size: 1.0625rem;
		line-height: 1.25;
	}

	.c-news-card .c-news-card__text {
		grid-area: text;
		margin-top: 0;
	}

}

/* Phones: the cards reach nearer the panel edge and summaries fill each line, so text runs further right. */
@media (max-width: 699px) {
	.c-news__grid {
		max-width: none;
		margin-inline: calc(0.5rem - var(--c-gutter));
	}

	.c-news-card {
		padding-inline: 0.75rem;
	}

	.c-news-card .c-news-card__text {
		text-wrap: wrap;
	}

	/* Balanced article headings stop near the middle on a phone; pretty fills the line and still avoids a lone word. */
	.c-article .c-article__title,
	.c-article__body h2 {
		text-wrap: pretty;
	}
}

@media (min-width: 960px) {
	.c-news__panel {
		margin-top: 2.5rem;
	}

	/* One or two results read as wide cards rather than a mostly empty row of three. */
	.c-news__grid:not(:has(> :nth-child(3))) {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		grid-template-rows: auto;
		gap: 1.75rem;
	}

	/* Title, summary and link sit as one centred group beside the photo, one step up in size. */
	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card__body {
		justify-content: center;
		max-width: 40rem;
		padding: 2rem 2.5rem 2rem 0;
	}

	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card .c-news-card__title {
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card .c-news-card__text {
		font-size: 1.0625rem;
	}

	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card .c-news-card__more {
		align-self: flex-start;
		margin-top: 1.25rem;
	}

	/* Four results make two rows of two, not three and a lone card, with type one step up to suit the wider cards. */
	.c-news__grid:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-news__grid:has(> :nth-child(4):last-child) .c-news-card .c-news-card__title {
		font-size: 1.375rem;
		line-height: 1.2;
	}

	.c-news__grid:has(> :nth-child(4):last-child) .c-news-card .c-news-card__text {
		font-size: 1rem;
	}

	.c-news__grid:has(> :nth-child(4):last-child) .c-news-card .c-news-card__media img {
		aspect-ratio: 2 / 1;
	}

	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card .c-news-card__media img {
		aspect-ratio: 4 / 3;
	}


	.c-news .c-more {
		margin-top: 4.5rem;
	}
}

/* The narrowest phones: a little more text width in spec rows. */
@media (max-width: 374px) {
	.c-station .c-spec {
		padding-inline: 0.625rem;
		font-size: 0.9375rem;
	}
}

@media (min-width: 700px) and (max-width: 1099px) {
	.c-phero {
		padding-top: 3rem;
	}
}


@media (min-width: 860px) and (max-width: 1199px) {
	.c-feature .c-feature__title {
		max-width: none;
		font-size: 2.125rem;
	}

	/* The photo column is nearly square here, so the crop keeps both faces whole. */
	.c-feature__media img {
		object-position: 74% 50%;
	}
}

@media (min-width: 960px) {
	.c-news__grid:not(:has(> :nth-child(3))) .c-news-card .c-news-card__title {
		text-wrap: balance;
	}
}

.c-phero .c-phero__note {
	margin-top: 0.75rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

/* Phones read the pitch, render and benefits first, then the button and its note under the bar. */
@media (max-width: 699px) {
	.c-phero {
		display: flex;
		flex-direction: column;
	}

	.c-phero__inner,
	.c-phero__copy {
		display: contents;
	}

	.c-phero__copy > * {
		margin-inline: var(--c-gutter);
	}

	.c-phero .c-phero__media {
		align-self: center;
		margin-top: 1.5rem;
	}

	.c-phero .c-phero__actions,
	.c-phero .c-phero__note {
		order: 1;
	}
}

/* The button is full width here, so its note centres under it. */
@media (max-width: 479px) {
	.c-phero .c-phero__note {
		text-align: center;
	}
}

/* While sending, the button keeps the focus ring the hidden status line has taken. */
.c-contact .frm-fluent-form:has(.c-contact__status:focus-visible) .ff-btn-submit {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

/* From 960, cards in a row share title, summary and link rows, so every summary in a row starts level whatever the title length. */
@media (min-width: 960px) {
	.c-news__grid:has(> :nth-child(3)) > li,
	.c-news__grid:has(> :nth-child(3)) .c-news-card {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.c-news__grid:has(> :nth-child(3)) .c-news-card__body {
		display: contents;
	}

	.c-news__grid:has(> :nth-child(3)) .c-news-card .c-news-card__title,
	.c-news__grid:has(> :nth-child(3)) .c-news-card .c-news-card__title:is(h2, h3) {
		min-height: 0;
		padding: 1.125rem 1.25rem 0;
	}

	.c-news__grid:has(> :nth-child(3)) .c-news-card .c-news-card__text {
		margin-top: 0;
		padding: 0.5rem 1.25rem 0;
	}

	.c-news__grid:has(> :nth-child(3)) .c-news-card .c-news-card__more {
		align-self: end;
		justify-self: end;
		margin: 0;
		padding: 0.75rem 1.25rem 1rem;
	}
}

@media (forced-colors: active) {
	.c-station__pick[aria-pressed="true"],
	.c-faqs .wp-block-tab-list button[aria-selected="true"] {
		outline: 3px solid Highlight;
		outline-offset: -3px;
	}

	.c-faqs .wp-block-tab-list button::before,
	.c-faqs .wp-block-tab-list button[aria-selected="true"]::before {
		filter: none;
	}

	.c-topics .current-cat a {
		outline: 2px solid Highlight;
	}
}

/* The dark photo's lit phone is on its right, so square crops aim there. */
.c-news-card__media img[src*="news-overnight"] {
	object-position: 72% 55%;
}

.c-pstations .c-pstations__help {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--c-gutter));
	max-width: 48rem;
	margin: 0.5rem auto 0;
	color: var(--c-muted);
	font-size: var(--c-lead);
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}

.c-pstations__help a {
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
	white-space: nowrap;
}

/* Tablet hero: the heading keeps its full width, the render sits beside the lead and button. */
@media (min-width: 700px) and (max-width: 999px) {
	.c-phero__copy {
		display: contents;
	}

	.c-phero__inner {
		grid-template-columns: minmax(0, 1fr) 15rem;
		grid-template-areas: "title title" "lead media" "actions media" "note media";
		column-gap: 2rem;
		row-gap: 0;
		align-items: start;
	}

	.c-phero .c-phero__title {
		grid-area: title;
	}

	.c-phero .c-phero__lead {
		grid-area: lead;
	}

	.c-phero .c-phero__actions {
		grid-area: actions;
	}

	.c-phero .c-phero__note {
		grid-area: note;
	}

	.c-phero .c-phero__media {
		grid-area: media;
		align-self: center;
		justify-self: end;
		width: 100%;
		margin-top: 1rem;
	}
}

@media (min-width: 960px) {
	/* The form sets the row height; the render only keeps a floor. */
	.c-contact .c-contact__media {
		contain: size;
		min-height: 20rem;
	}

	.c-contact .ff-message-success .c-done__title {
		margin-bottom: 1rem;
	}
}

@media (forced-colors: active) {
	.c-contact .frm-fluent-form .ff-btn-submit {
		border: 2px solid ButtonText;
	}

	.c-news__search .wp-block-search__inside-wrapper {
		border: 1px solid CanvasText;
	}
}

/* After sending, the thank-you heading steps up to the section heading size. */
.c-contact .ff-message-success .c-done__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
}

/* Tablet hero: spare height goes below the note, so the note stays with its button. */
@media (min-width: 700px) and (max-width: 999px) {
	.c-phero__inner {
		grid-template-areas: "title title" "lead media" "actions media" "note media" ". media";
		grid-template-rows: auto auto auto auto 1fr;
	}
}

/* Stacked tablet cards: short spec values sit two to a row, striped in pairs, once the longest value fits on one line. */
@media (min-width: 720px) and (max-width: 959px) {
	.c-station .c-station__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.5rem;
	}

	.c-station__specs > .c-spec:nth-child(odd) {
		background-color: transparent;
	}

	.c-station__specs > .c-spec:nth-child(4n + 1),
	.c-station__specs > .c-spec:nth-child(4n + 2) {
		background-color: var(--wp--preset--color--mint);
	}
}

@media (min-width: 700px) and (max-width: 799px) {
	.c-station .c-station__specs .c-spec {
		padding-inline: 0.75rem;
		font-size: 0.9375rem;
	}
}

/* The narrowest three-up range: smaller titles and panel padding keep every title on two lines. */
@media (min-width: 960px) and (max-width: 1099px) {
	.c-news__grid:has(> :nth-child(3)):not(:has(> :nth-child(4):last-child)) .c-news-card .c-news-card__title {
		font-size: 1.0625rem;
	}
}

@media (min-width: 960px) and (max-width: 999px) {
	.c-news .c-news__panel,
	.c-feature__copy {
		padding-inline: 1.5rem;
	}

	.c-news__grid:has(> :nth-child(3)):not(:has(> :nth-child(4):last-child)) .c-news-card .c-news-card__title {
		font-size: 1rem;
	}

	/* All four station names hold one line beside the gallery. */
	.c-station .c-station__title {
		font-size: 2.25rem;
	}
}

@media (max-width: 389px) {
	.c-station .c-station__title {
		font-size: 1.6875rem;
	}
}

/* At desktop the featured title sets in three lines beside the photo, as designed. */
@media (min-width: 1200px) {
	.c-feature .c-feature__title {
		max-width: none;
		font-size: clamp(2.125rem, 0.5rem + 2.2vw, 2.375rem);
	}
}

@media (min-width: 640px) and (max-width: 959px) {
	.c-news-card {
		grid-template-columns: 12rem minmax(0, 1fr);
	}
}

/* Long article titles keep to four lines on the narrowest phones. */
@media (max-width: 374px) {
	.c-article .c-article__title {
		font-size: 2.25rem;
	}
}

.c-article__body h2:has(.c-article__num) {
	/* A wrapped reason heading hangs its second line clear of the number. */
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 0.35em;
}

.c-article__num {
	margin: 0;
}

/* The plane photo's low sun reads as a blot at the bottom of a crop, so crops keep the sky. */
.c-news-card__media img[src*="news-plane"] {
	object-position: 50% 0;
}

.c-cta--dark .c-cta__text {
	text-wrap: balance;
}

/* Inline links thicken on hover, as in the FAQ and legal text. */
:is(.c-article__body, .c-contact__main, .c-contact__panel, .c-pstations__help, .c-news__crumb) a:not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

@media (hover: hover) {
	:is(.c-article__body, .c-contact__main, .c-contact__panel, .c-pstations__help, .c-news__crumb) a:not(.wp-block-button__link):hover {
		text-decoration-thickness: 2px;
	}
}

.c-contact .ff-message-success .c-done__title:focus {
	outline: none;
}

@media (forced-colors: active) {
	.c-contact .frm-fluent-form select.ff-el-form-control {
		appearance: auto;
		padding-right: 0.875rem;
		background-image: none;
	}

	.c-topics .cat-item a {
		border: 1px solid LinkText;
	}
}

.c-news__crumb--nav p {
	margin: 0;
}

/* The featured block opens its article from anywhere on the card, like the cards below it. */
.c-feature__card {
	position: relative;
}

.c-feature__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Core positions the featured image, which comes later, so the link layer sits above it. */
	z-index: 1;
	border-radius: inherit;
}

.c-feature .c-feature__more {
	position: relative;
	z-index: 2;
}

.c-feature__card:has(.c-feature__title a:focus-visible) {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

.c-feature__title a:focus-visible {
	outline: none;
}

.c-article .c-article__actions {
	margin-top: 1.75rem;
}

.c-article .c-article__note {
	margin-top: 0.75rem;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.c-news .c-news__help {
	margin-top: 0.75rem;
	color: var(--c-muted);
}

.c-news__help a {
	color: var(--wp--preset--color--green-text);
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Inside the dark bands the ink focus ring would vanish, so it turns neon, as in the header and footer. */
.c-cta--dark :focus-visible,
.c-decision :focus-visible {
	outline-color: var(--c-neon);
}

/* Links inside sentences get a highlight and an underline bar on focus, so the ring never covers the punctuation beside them. */
:is(.c-article__body, .c-contact__main, .c-contact__panel, .c-pstations__help, .c-news__help) a:not(.wp-block-button__link):focus-visible {
	outline: 3px solid transparent;
	outline-offset: 0;
	border-radius: 2px;
	background-color: var(--wp--preset--color--neon);
	color: var(--c-ink);
	text-decoration: none;
	box-shadow: 0 -2px var(--wp--preset--color--neon), 0 3px var(--c-ink);
}