/*
 * Element defaults, layout primitives and the shared button.
 *
 * Component styles for a specific template live alongside that template's stylesheet.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--colour-surface);
	color: var(--colour-body);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-4);
	color: var(--colour-heading);
	line-height: var(--leading-heading);
	text-wrap: balance;
}

/* Live site runs headings at line-height 1.0, not a comfortable 1.15. */
h1 {
	font-weight: var(--weight-light);
	line-height: 1;
}

h2 {
	font-weight: var(--weight-light);
	line-height: var(--h2-lh, 1.15);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--h2-size, var(--text-h2)); }

h3, h4 {
	font-size: var(--text-card-h);
	font-weight: var(--weight-semibold);
	line-height: 1;
}

p, ul, ol {
	margin: 0 0 var(--space-4);
	max-width: var(--measure);
}

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

a {
	color: var(--colour-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover { color: var(--colour-blue-dark); }

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

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

/* Layout primitives */

.wrap {
	/*
	 * Measured from the live site: content sits 50px in at a 1280 viewport and 120px in
	 * at 1600. That is a column capped at 1360 with a 100px minimum gutter — not a fixed
	 * max-width plus padding, which held the content too far right on wide screens.
	 */
	width: min(100% - (var(--wrap-gutter) * 2), var(--wrap-max));
	margin-inline: auto;
}

/*
 * Opts a single block out of the content column so it spans the viewport. Declared here
 * beside .wrap rather than as a one-off override elsewhere, because a rule that quietly
 * cancels .wrap's width is how the homepage hero ended up hard against the screen edge.
 */
.wrap--bleed {
	width: 100%;
	max-width: none;
}

/*
 * The white header band shares the content column's 1360px cap but uses a 10px gutter
 * instead of 50px. Above about 1460 both hit the cap and the logo lines up exactly with
 * the hero heading (both at 120 when the viewport is 1600); below it the logo moves out
 * towards the edge while the text stays in the content column. Measured at 1280: logo at
 * 10, phone and heading at 50. The utility bar keeps the content column at both widths.
 */
/*
 * The header row runs the full width; only the logo stays in the content column.
 *
 * It was capped at --wrap-max and centred like every other section, which on a 2560 screen
 * left 408px of empty viewport to the right of the phone number while the hero behind it ran
 * edge to edge. The chrome sitting on a full-bleed photograph should reach the same edges the
 * photograph does.
 *
 * The padding is what keeps the wordmark lined up with the H1 underneath it. Without it the
 * logo goes hard left and stops agreeing with the headline, which is the one alignment on this
 * page worth protecting: max() means it costs nothing until the viewport passes the cap.
 */
.site-header > .wrap {
	width: calc(100% - 20px);
	padding-inline-start: max(0px, (100% - 20px - var(--wrap-max)) / 2);
}

.wrap--narrow { max-width: 52rem; }

.section {
	padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}

.section--grey { background: var(--colour-surface-grey); }

.section--dark {
	background: var(--colour-surface-dark);
	color: var(--colour-on-dark-soft);
}

.section--dark :is(h1, h2, h3, h4) { color: var(--colour-on-dark); }

.section__head {
	max-width: 62.5rem;
	margin-inline: auto;
	margin-block-end: clamp(var(--space-8), 4vw, var(--space-16));
	text-align: center;
}

.section__head p {
	max-width: 43.75rem;   /* 700px — matches the live intro measure */
	margin-inline: auto;
}

/* Button — 100px pill, matching the current site */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-5) var(--space-8);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--colour-blue);
	color: var(--colour-on-dark);
	font-family: inherit;
	font-size: var(--text-accent);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.btn:hover {
	background: var(--colour-blue-dark);
	color: var(--colour-on-dark);
}

.btn--small { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }

.btn::after {
	content: "→";
	font-size: 1.05em;
	line-height: 1;
}

/* Text link with arrow */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-accent);
	line-height: 1.1;
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.link-arrow::after { content: "›"; font-size: 1.3em; line-height: 1; }
.link-arrow:hover { text-decoration: underline; }

/* Accessibility */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	clip-path: inset(50%);
	padding: var(--space-3) var(--space-4);
	background: var(--colour-blue);
	color: var(--colour-on-dark);
}

.skip-link:focus { clip-path: none; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Site chrome — structural only; navigation follows the IA discussion */

.utility-bar {
	background: var(--colour-surface-dark);
	color: var(--colour-on-dark);
	/* Live bar measures 38px: 7px padding either side of a 24px line box. */
	font-size: 1rem;
	line-height: 1.5;
}

.utility-bar > .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	/*
	 * The dark band spans the viewport, but its contents sit in the content column —
	 * measured live at 1600, the phone number starts at 120px, level with the logo and
	 * the hero heading. An earlier version ran it edge to edge and broke that alignment.
	 *
	 * 38px measured live. Set as a min-height rather than padding so the bar keeps its
	 * height regardless of what the line box inside it does.
	 */
	min-height: 38px;
	padding-block: 0;
}

/*
 * Chrome must not inherit the global paragraph margin — it was adding 16px to the bar
 * and making it 54px against the live site's 38px.
 */
.utility-bar p,
.site-header p,
.site-footer p { margin: 0; }

.utility-bar a { color: inherit; text-decoration: none; }

/* Handset sits inline with the number, as live has it. */
.utility-bar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.utility-bar__icon { width: 1.15em; height: 1.15em; }
.utility-bar a:hover { color: var(--colour-on-dark); }
.utility-bar__tagline { display: none; }

@media (min-width: 48rem) {
	.utility-bar__tagline { display: block; }
}

/* phrase rotator ------------------------------------------------------------------ */

/*
 * A stack of phrases in a window one line tall, translated up a row at a time. Live runs
 * this on jQuery and Slick; the movement is identical and this costs no JavaScript at all.
 *
 * --rotator-row is both the window height and the distance of one step, so the two cannot
 * drift apart. The keyframes come from inc/rotator.php, because where the animation pauses
 * depends on how many phrases an editor has entered.
 */
.rotator {
	--rotator-row: 1.5em;

	height: var(--rotator-row);
	overflow: hidden;
}

.rotator__track {
	margin: 0;
	padding: 0;
	list-style: none;
	/* 3s on each phrase and 300ms to slide, measured on live. */
	animation-name: var(--rotator-name);
	animation-duration: calc(var(--rotator-count) * 3.3s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.rotator__item {
	height: var(--rotator-row);
	line-height: var(--rotator-row);
	white-space: nowrap;
}

/*
 * Movement in the corner of the eye is a real accessibility problem for some people, and a
 * tagline is not worth it. The first phrase stays put.
 */
@media (prefers-reduced-motion: reduce) {
	.rotator__track { animation: none; }
}

.site-header {
	/*
	 * No rule under the header: the live band is a plain 100px of white with no border and
	 * no shadow, and the section below it provides its own separation.
	 */
	background: #fff;
}

.site-header > .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-8);
	align-items: center;
	justify-content: space-between;
	/* The white band measures 100px on the live site, logo optically centred within it. */
	min-height: 100px;
	padding-block: 10px;
}

.site-title {
	margin: 0;
	font-size: 1.6rem;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
}

.site-title a { color: var(--colour-heading); text-decoration: none; }

/* Measured: 160x40 on the live site. */
/*
 * The live logo steps down at 1366 rather than scaling smoothly — Elementor sets an
 * explicit widget width per breakpoint. Measured: 160x40 above 1366, 121x30 at or below.
 */
.site-logo { width: 160px; height: 40px; object-fit: contain; }

@media (max-width: 1366px) {
	.site-logo { width: 121px; height: 30px; }
}
.site-title em { font-style: normal; color: var(--colour-blue-bright); }

.site-footer {
	padding-block: var(--space-12);
	border-block-start: 1px solid var(--colour-rule);
	color: var(--colour-body);
	font-size: var(--text-sm);
}

/*
 * Footer only. This used to cover `.site-nav ul` as well, from before there was a primary
 * menu — and because it scores a class plus an element it outranked every `.site-nav__list--*`
 * rule that came after it, which kept the mobile drawer as a wrapping flex row with two links
 * to a line.
 */
.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

/* Icons ---------------------------------------------------------------- */
/*
 * The SVG is applied as a mask and painted with currentColor, so one cached asset
 * serves both the white-on-photograph and blue-on-white treatments.
 */

.icon {
	display: block;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* Happy Icons ---------------------------------------------------------- */
/*
 * The calculator and "how we make a difference" icons are glyphs from the Happy Addons
 * icon font, not SVGs. The font file here is the same one the live site serves, and the
 * codepoints are read from its stylesheet — so the glyphs are identical rather than
 * approximated.
 *
 * 132KB for five glyphs is heavy; subsetting would cut it to a few KB without changing
 * a pixel. Left whole for now because the brief is exact replication.
 */

@font-face {
	font-family: "Happy Icons";
	/* Subset to the five glyphs this site uses: 134KB -> 1.7KB, pixel-identical. */
	src: url("../fonts/happy-icons.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.hm {
	display: inline-block;
	font-family: "Happy Icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	speak: never;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.hm-phone::before                 { content: "\e9f8"; }
.hm-responsive-device::before     { content: "\ea1b"; }
.hm-checkout-order-review::before { content: "\eba5"; }
.hm-bond::before                  { content: "\e928"; }
.hm-network1::before              { content: "\e9e7"; }

/* primary navigation ------------------------------------------------------------- */

/*
 * Type and spacing measured off the current site's menu: Segoe 16px / 500, #282b2c, items
 * 10px 30px, rows landing on a 38px rhythm, a chevron on anything with children. The
 * behaviour is its behaviour too — click to open, not hover — which is what lets this work on
 * a touchscreen with no script. See inc/nav.php.
 *
 * The bar and the drawer are the same markup rendered twice. Each is display:none at the
 * breakpoint it does not serve, which removes it from the accessibility tree rather than
 * leaving two copies of every link exposed to a screen reader.
 */

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

.site-nav__item { position: relative; }

.site-nav__link,
.site-nav__summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 18px;
	color: var(--colour-heading);
	font-size: 1rem;
	font-weight: var(--weight-medium);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* The summary is a button; the marker is drawn as a chevron instead. */
.site-nav__summary { list-style: none; }
.site-nav__summary::-webkit-details-marker { display: none; }

.site-nav__link:hover,
.site-nav__summary:hover .site-nav__label { color: var(--colour-blue-text); }

.site-nav__link:focus-visible,
.site-nav__summary:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }

/*
 * The current section, marked with the brand blue under the label. The live menu uses an
 * underline pointer for the same job, so this is its convention rather than a new one.
 */
.site-nav__list > .site-nav__item.is-current > .site-nav__link,
.site-nav__list > .site-nav__item.is-current > .site-nav__disclosure > .site-nav__summary {
	box-shadow: inset 0 -2px 0 var(--colour-blue);
	color: var(--colour-blue-text);
}

/*
 * Inside a panel the same underline spans the full width of the row and reads as a divider
 * rather than as "you are here", so the current child is marked by colour and a rule down its
 * leading edge instead.
 */
.site-nav__sub > .site-nav__item.is-current > .site-nav__link {
	box-shadow: inset 2px 0 0 var(--colour-blue);
	color: var(--colour-blue-text);
	font-weight: var(--weight-medium);
}

/* Chevron, drawn rather than set in a font so it needs nothing loaded to be correct. */
.site-nav__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	/*
	 * Translate before rotate. Listed the other way round the shift happens in the rotated
	 * coordinate system, which is invisible at 45 degrees and sends the open-state chevron
	 * off diagonally at 225.
	 */
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 150ms ease;
}

.site-nav__disclosure[open] > .site-nav__summary .site-nav__chevron {
	transform: translateY(0.15rem) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__chevron { transition: none; }
}

.site-nav__sub {
	margin: 0;
	padding: var(--space-3) 0;
	max-width: none;
	list-style: none;
}

.site-nav__sub .site-nav__link {
	padding: 10px 24px;
	font-weight: var(--weight-regular);
	white-space: normal;
}

/* --- the bar, wide viewports ------------------------------------------------------ */

.site-nav--drawer { display: none; }

@media (min-width: 62rem) {
	/*
	 * On the bar the panels open on HOVER, and the disclosure stays underneath so the thing is
	 * still a real button for anyone using a keyboard or a touchscreen.
	 *
	 * A closed <details> hides its contents through ::details-content, so hover has to override
	 * that rather than set the open attribute — CSS cannot. Where ::details-content is not
	 * supported the override simply does nothing and the menu opens on click, which is why this
	 * is safe: the failure mode is the old behaviour, not a missing menu.
	 */
	.site-nav--bar .site-nav__item:hover > .site-nav__disclosure::details-content,
	.site-nav--bar .site-nav__item:focus-within > .site-nav__disclosure::details-content {
		content-visibility: visible;
		block-size: auto;

		/*
		 * Releasing the containment matters as much as revealing the content.
		 *
		 * A closed ::details-content carries paint containment, and a box with paint containment
		 * is a containing block for absolutely positioned descendants. So the panel, which is
		 * meant to measure 50% of the header and span the page, was measuring 50% of the
		 * <details> — 121px — and landing centred on the word "Solutions" instead. At a 1280
		 * viewport that put its right edge 68px past the page with the call to action half cut
		 * off, and the middle column at a third of its intended width.
		 *
		 * It never showed up in testing because every check opened the panel by setting the open
		 * attribute from the console, which removes the containment and produces a layout no
		 * visitor ever sees. Hovering is the only honest test of this panel.
		 */
		contain: none;
	}

	/* The chevron follows hover as well as state, or it points the wrong way while open. */
	.site-nav--bar .site-nav__item:hover > .site-nav__disclosure > .site-nav__summary .site-nav__chevron,
	.site-nav--bar .site-nav__item:focus-within > .site-nav__disclosure > .site-nav__summary .site-nav__chevron {
		transform: translateY(0.15rem) rotate(225deg);
	}

	/*
	 * The panel floats under its item. Pulled left by the item's own padding so the first
	 * child's text aligns with the parent's text rather than being indented by it.
	 */
	.site-nav--bar .site-nav__sub {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 100%;
		z-index: 20;
		min-width: 17rem;
		background: var(--colour-surface);
		border-block-start: 2px solid var(--colour-blue);
		box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
	}

	/*
	 * The third level flies out to the side rather than dropping below, because dropping would
	 * push it off the bottom of the header and because sideways is what every reader expects of
	 * a nested menu. Overlapped by a few pixels so crossing the gap does not close it.
	 */
	.site-nav--bar .site-nav__sub--3 {
		inset-block-start: -0.75rem;
		inset-inline-start: calc(100% - 4px);
		border-block-start: 0;
		border-inline-start: 2px solid var(--colour-blue);
	}

	.site-nav--bar .site-nav__sub .site-nav__link,
	.site-nav--bar .site-nav__sub .site-nav__summary { padding-inline: 18px; }

	.site-nav--bar .site-nav__sub .site-nav__link:hover,
	.site-nav--bar .site-nav__sub .site-nav__summary:hover { background: var(--colour-surface-grey); }

	/* A group label inside a panel is a heading, not a destination, so it reads as one. */
	.site-nav--bar .site-nav__sub .site-nav__summary {
		justify-content: space-between;
		color: var(--colour-heading);
	}

	/* The flyout's chevron points sideways, because that is where the panel appears. */
	.site-nav--bar .site-nav__sub .site-nav__chevron { transform: translateX(-0.1rem) rotate(-45deg); }

	.site-nav--bar .site-nav__item:hover > .site-nav__disclosure > .site-nav__summary .site-nav__chevron,
	.site-nav--bar .site-nav__sub .site-nav__item:hover > .site-nav__disclosure > .site-nav__summary .site-nav__chevron {
		transform: translateX(-0.1rem) rotate(-45deg);
	}

	/* Restore the downward flip for top-level items only. */
	.site-nav--bar > .site-nav__list > .site-nav__item:hover > .site-nav__disclosure > .site-nav__summary .site-nav__chevron,
	.site-nav--bar > .site-nav__list > .site-nav__item:focus-within > .site-nav__disclosure > .site-nav__summary .site-nav__chevron {
		transform: translateY(0.15rem) rotate(225deg);
	}
}

/* --- the drawer, narrow viewports ------------------------------------------------- */

@media (max-width: 61.9375rem) {
	.site-nav--bar { display: none; }
	.site-nav--drawer { display: block; }

	.site-nav__burger-toggle {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: 10px 0;
		color: var(--colour-heading);
		font-size: 1rem;
		font-weight: var(--weight-medium);
		list-style: none;
		cursor: pointer;
	}

	.site-nav__burger-toggle::-webkit-details-marker { display: none; }
	.site-nav__burger-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

	/*
	 * Three bars, drawn with a border pair and the element's own background so there is no
	 * extra markup and nothing to load. Becomes a cross when open.
	 */
	.site-nav__burger-icon {
		position: relative;
		width: 1.5rem;
		height: 2px;
		background: currentColor;
		transition: background 120ms ease;
	}

	.site-nav__burger-icon::before,
	.site-nav__burger-icon::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		height: 2px;
		background: currentColor;
		transition: transform 150ms ease;
	}

	.site-nav__burger-icon::before { inset-block-start: -0.45rem; }
	.site-nav__burger-icon::after { inset-block-start: 0.45rem; }

	.site-nav__burger[open] .site-nav__burger-icon { background: transparent; }
	.site-nav__burger[open] .site-nav__burger-icon::before { transform: translateY(0.45rem) rotate(45deg); }
	.site-nav__burger[open] .site-nav__burger-icon::after { transform: translateY(-0.45rem) rotate(-45deg); }

	@media (prefers-reduced-motion: reduce) {
		.site-nav__burger-icon,
		.site-nav__burger-icon::before,
		.site-nav__burger-icon::after { transition: none; }
	}

	/*
	 * The drawer spans the header rather than hanging off the burger, which is how the live
	 * menu behaves: it opens as a full-width white panel under the logo.
	 */
	.site-nav__drawer {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		z-index: 20;
		padding-block: var(--space-4);
		background: var(--colour-surface);
		border-block-start: 1px solid var(--colour-rule);
		box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
	}

	.site-nav__list--drawer { display: block; }

	.site-nav__list--drawer > .site-nav__item > .site-nav__link,
	.site-nav__list--drawer .site-nav__summary {
		padding-inline: var(--wrap-gutter);
	}

	/* Second level indented, as live indents its children under an open parent. */
	.site-nav__sub .site-nav__link,
	.site-nav__sub .site-nav__summary { padding-inline-start: calc(var(--wrap-gutter) + var(--space-6)); }

	.site-nav__sub--3 .site-nav__link { padding-inline-start: calc(var(--wrap-gutter) + var(--space-12)); }

	.site-nav__sub { padding-block: 0 var(--space-3); }

	/*
	 * Rows are full width here, so the bar's underline stretches across the drawer and reads
	 * as a rule between items rather than as "you are here". Leading edge instead, matching
	 * how the current child is marked inside a panel.
	 */
	.site-nav__list--drawer > .site-nav__item.is-current > .site-nav__link,
	.site-nav__list--drawer > .site-nav__item.is-current > .site-nav__disclosure > .site-nav__summary {
		box-shadow: inset 3px 0 0 var(--colour-blue);
	}
}

/*
 * The bar's panels hang off their own item, which is already positioned. The drawer spans the
 * full width of the header, so the header itself is its context — not the inner wrap, which is
 * inset by ten pixels either side and left the drawer visibly narrower than the band it sits
 * under.
 */
.site-header { position: relative; }

/* =============================================================================
 * Tier-one categories that are also links
 *
 * In the bar a category under Solutions now goes to its own overview page when clicked and opens
 * its products on hover. That means its product list is no longer wrapped in a <details>, so the
 * ::details-content rule that used to hide every panel does not reach it and it would otherwise
 * render permanently open.
 *
 * Hidden and shown on the ITEM rather than on the list, so the 4px overlap between the category
 * row and the flyout still bridges the pointer across. focus-within keeps it reachable by
 * keyboard while tabbing through the products inside it.
 * ============================================================================= */

@media (min-width: 62rem) {

	.site-nav--bar .site-nav__item--parent > .site-nav__sub--3 { display: none; }

	.site-nav--bar .site-nav__item--parent:hover > .site-nav__sub--3,
	.site-nav--bar .site-nav__item--parent:focus-within > .site-nav__sub--3 { display: block; }

	/*
	 * A link, styled as the row it replaced. Without this it inherits the plain product-link
	 * padding and the categories stop lining up with each other.
	 */
	.site-nav--bar .site-nav__sub .site-nav__link--through {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		color: var(--colour-heading);
	}

	.site-nav--bar .site-nav__sub .site-nav__link--through:hover {
		background: var(--colour-surface-grey);
		color: var(--colour-blue-text);
	}
}

/* =============================================================================
 * The header's right-hand actions
 *
 * Two icon links, a handset and an account, where the phone number and ApplyEasy used to be
 * spelled out. Written in full they took 255px of the header row and competed with the
 * navigation for the same edge; as icons they take 88px.
 *
 * The circle is drawn inside the SVG rather than as a border here, so the ring and the glyph
 * share one stroke weight and one mask. .icon fills from currentColor, so the whole thing takes
 * the link's colour and the hover state is a colour change on the parent.
 */
.site-actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.site-actions__icon-link {
	display: block;
	color: var(--colour-blue);
	transition: color 150ms ease;
}

.site-actions__icon-link:hover { color: var(--colour-heading); }

.site-actions__icon-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 50%; }

.site-actions__glyph { width: 2.1rem; height: 2.1rem; }

/*
 * Visually hidden, still read aloud and still found by search-in-page. A circle with a handset
 * in it only means "call us" to somebody who already knows.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
 * The floating header
 *
 * Two positioning modes, because the homepage and every other page want different things
 * from the same element.
 *
 * Inner pages: sticky. The header is in flow with its own white background, so sticky pins it
 * without changing the layout underneath and needs nothing else.
 *
 * Homepage: fixed. Sticky is wrong there because the header overlays the hero rather than
 * sitting above it, and a sticky element stays in flow, so it would reserve 100px at the top
 * of the page and push the photograph down. Fixed keeps the overlay and pins it.
 *
 * The stuck state is what the script is for: over the hero the header has to be transparent,
 * and over everything below it has to not be.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color 160ms ease, box-shadow 160ms ease;
}

/* The homepage's own positioning is in home.css, which loads after this file. */

/*
 * Anchors land under a pinned header otherwise. #calculator and #contact are both linked from
 * the homepage, so this is not hypothetical.
 */
html { scroll-padding-block-start: 100px; }

/* Never visible; the observer watches this rather than the header, which never leaves the
   viewport once it is pinned. */
.site-header__sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/*
 * Scrolled. The homepage header gains the background it did not need over the photograph, and
 * every page gains a hairline so the row separates from content passing beneath it.
 */
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(40, 43, 44, 0.10); }
.home .site-header.is-stuck { background: var(--colour-surface); }