@charset "utf-8";

/*
Theme Name: Eco Home Windows
Theme URI: https://oldboys.agency
Description: Custom Eco Home Windows child theme for the Old Boys Agency base theme.
Author: Old Boys Agency
Author URI: https://oldboys.agency
Template: oldboysagency
Version: 1.0.0
Text Domain: eco-home-windows
*/

/* Add client-specific styles below. */

/* FIN-4: Plus Jakarta Sans, self-hosted.
   Previously loaded from Google Fonts with no preconnect, over the base
   theme's sans-serif first paint, so every page flashed the system face
   before swapping. Self-hosting removes the flash and the third-party
   request. One variable file per subset covers 400-600. */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The base theme paints in sans-serif before the child stylesheet applies. */
body {
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

:root {
	--ehw-ink: #314858;
	--ehw-ink-rgb: 49, 72, 88;
	/* Deepened from #6e947f. White on the old sage was 3.38:1 and ink on it
	   was 2.82:1 — below the floor even for large text. White on this is
	   4.78:1, and it also works as a text colour on white. */
	--ehw-sage: #4d7a61;
	--ehw-sage-rgb: 77, 122, 97;
	--ehw-grey: #9ba5aa;
	--ehw-mist: #f3f5f3;
	--ehw-white: #fff;
	--ehw-page-gutter: clamp(24px, 5vw, 80px);
	--ehw-container: min(calc(100% - var(--ehw-page-gutter) * 2), 1400px);
	--ehw-header-h: 94px;

	/* Heroes. One height and one text measure across every hero on the site;
	   they previously ran at five different heights and their titles were
	   capped narrower than the copy beneath them. */
	--ehw-hero-h: min(760px, 82vh);
	--ehw-hero-measure: 40rem;

	/* TYP-2: the base theme sets body{letter-spacing:-0.01em} and the child
	   added -0.035/-0.045em on headings. Salient ran the same typeface at the
	   same sizes with tracking at normal throughout; negative tracking also
	   compresses word spaces, which is what read as blurred. */
	--ehw-track-display: -.012em;

	/* Motion. The base theme's reveal transition sets no easing curve, so it
	   runs on the browser default; that is most of why it reads generic.
	   These drive the child's own .ehw-reveal system — see below for why it
	   does not reuse .animate. */
	--ehw-ease: cubic-bezier(.22, .61, .36, 1);
	--ehw-move: .7s;
	--ehw-rise: 24px;
	--ehw-step: 150ms;
	--ehw-step-row: 80ms;

	/* IMG-2: scrim strengths. Salient's hero ran the photograph at roughly
	   10% black; this build was at 82% ink, which put the product behind
	   frosted glass. */
	--ehw-scrim-strong: .7;
	--ehw-scrim-mid: .42;
	--ehw-scrim-soft: .12;

	/* SPC-1: spacing scale. 144 is reserved for major transitions. */
	--ehw-space-s: 72px;
	--ehw-space-m: 104px;
	--ehw-space-l: 144px;

	/* Fluid type scale. Hits the reference desktop values (48/60 and 32/48)
	   from ~1000px up and scales down cleanly to 390px. Single source of
	   truth: component rules below reference these, never raw px. */
	--ehw-h1: clamp(2.125rem, 1.55rem + 2.4vw, 3rem);
	--ehw-h1-lh: 1.25;
	--ehw-h2: clamp(1.625rem, 1.3rem + 1.35vw, 2rem);
	--ehw-h2-lh: 1.5;

	/* One scrim and two hairlines, replacing six hardcoded darks. */
	--ehw-hair: rgba(var(--ehw-ink-rgb), .16);
	--ehw-hair-on-dark: rgba(255, 255, 255, .28);

	/* Rebind the base theme's tokens onto the brand palette. The base uses
	   --primary as its LIGHT value (buttons are primary-on-black) and
	   --secondary as its dark one, so the mapping is not a straight swap. */
	--primary: var(--ehw-white);
	--secondary: var(--ehw-ink);
	--black: var(--ehw-ink);
	--bg-grey: var(--ehw-mist);
}

html,
body,
button,
input,
select,
textarea {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
}

button,
.btn,
.ehw-button,
.ehw-text-link {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-weight: 500;
}

/* Eco Home Windows type scale.
   Declared here, above every media query, so the responsive clamps below are
   free to override it. (Previously this block sat at the end of the file and
   silently cancelled every clamp in the stylesheet.) */
h1 {
	font-size: var(--ehw-h1);
	line-height: var(--ehw-h1-lh);
	font-weight: 500;
}

h2,
.heading-lg {
	font-size: var(--ehw-h2);
	line-height: var(--ehw-h2-lh);
	font-weight: 500;
}

.site-header .logo {
	position: relative;
	display: block;
	width: clamp(135px, 12vw, 190px);
	min-height: 0;
	border: 0;
}

.site-header .logo__image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .25s ease;
}

.site-header .logo__image--white {
	position: absolute;
	inset: 0;
}

.site-header .logo__image--colour {
	opacity: 0;
}

.site-header {
	height: var(--ehw-header-h);
	color: var(--ehw-white);
	background: transparent;
	transition: height .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.home.no-hero {
	padding-top: 0;
}

body.home.no-hero .site-header {
	color: var(--ehw-white);
	background: transparent;
}

.site-header .container {
	align-items: center;
}

/* LAY-2: the header used one width and every section another, so the logo sat
   43px left of the copy beneath it on every page. One grid now. */
.container,
.site-header .container,
.ehw-hero__inner,
.ehw-hero__controls.container,
.ehw-solution-hero__inner {
	width: var(--ehw-container);
	margin-right: auto;
	margin-left: auto;
}

body.scrolled-down .site-header,
body.scrolled-up.scrolled-down .site-header,
body.home.no-hero.scrolled-down .site-header {
	height: 94px;
	color: var(--ehw-ink);
	background: var(--ehw-white);
	box-shadow: 0 8px 30px rgba(var(--ehw-ink-rgb), .09);
	transform: none;
	transition-delay: 0s;
}

body.scrolled-down .site-header .logo__image--colour {
	opacity: 1;
}

body.scrolled-down .site-header .logo__image--white {
	opacity: 0;
}

body:not(.home) .site-header {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	box-shadow: 0 8px 30px rgba(var(--ehw-ink-rgb), .07);
}

body:not(.home) .site-header .logo__image--colour {
	opacity: 1;
}

body:not(.home) .site-header .logo__image--white {
	opacity: 0;
}

.site-header .menu-1 .menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.7vw, 2rem);
	margin: 0;
	padding: 0;
	line-height: 1.35;
	list-style: none;
}

.site-header .menu-1 a {
	color: inherit;
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: 17px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: .01em;
	text-decoration: none;
}

.site-header .menu-1 .menu > li {
	position: relative;
	margin: 0;
	padding: 36px 0;
	transition: padding .25s ease;
}

body.scrolled-down .site-header .menu-1 .menu > li {
	padding: 36px 0;
}

.site-header .menu-1 .menu > li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: .45rem;
}

.site-header .menu-1 .menu > li.menu-item-has-children > a::after {
	content: "";
	width: .42rem;
	height: .42rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-.15rem) rotate(45deg);
	transition: transform .2s ease;
}

.site-header .menu-1 .menu > li.menu-item-has-children:hover > a::after,
.site-header .menu-1 .menu > li.menu-item-has-children:focus-within > a::after {
	transform: translateY(.05rem) rotate(225deg);
}

.site-header .menu-1 .sub-menu {
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	gap: 0;
	width: max-content;
	min-width: 430px;
	margin: 0;
	padding: .75rem;
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-top: 3px solid var(--ehw-sage);
	box-shadow: 0 22px 45px rgba(var(--ehw-ink-rgb), .16);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, .6rem);
	transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
	pointer-events: none;
}

.site-header .menu-1 .menu > li:nth-last-child(-n+2) .sub-menu {
	right: 0;
	left: auto;
	transform: translate(0, .6rem);
}

.site-header .menu-1 li:hover > .sub-menu,
.site-header .menu-1 li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.site-header .menu-1 .menu > li:nth-last-child(-n+2):hover .sub-menu,
.site-header .menu-1 .menu > li:nth-last-child(-n+2):focus-within .sub-menu {
	transform: translate(0, 0);
}

.site-header .menu-1 .sub-menu li {
	margin: 0;
	padding: 0;
}

.site-header .menu-1 .sub-menu a {
	display: block;
	padding: .85rem 1rem;
	border-radius: .25rem;
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: 17px;
	font-style: normal;
	font-weight: 600;
	line-height: 27px;
}

/* One hover treatment across every dropdown: a sage panel wiping in from the
   left with the label reversed out. Plain dropdowns used to fill with a flat
   ink box and mega panels only tinted the label green.

   The base theme prints `.sub-menu > li:not(:first-child) a[data-id]:before`
   with a background image, inline in the head and therefore after this
   stylesheet. That scores (0,3,3); the extra `.menu` below takes these to
   (0,4,2) so the wipe wins rather than showing a page photograph. */
.site-header .menu-1 .menu .sub-menu a {
	position: relative;
	/* Own stacking context, so the panel's z-index: -1 cannot slip behind the
	   dropdown's own background. */
	isolation: isolate;
	transition: color .25s var(--ehw-ease);
}

.site-header .menu-1 .menu .sub-menu a::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: auto;
	padding: 0;
	margin: 0;
	content: "";
	background-color: var(--ehw-sage);
	background-image: none;
	/* Square, not the anchor's 2px — the panel reads as an architectural block
	   rather than a rounded UI chip. */
	border-radius: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--ehw-ease);
}

.site-header .menu-1 .menu .sub-menu a:hover::before,
.site-header .menu-1 .menu .sub-menu a:focus-visible::before {
	transform: scaleX(1);
}

.site-header .menu-1 .menu .sub-menu a:hover,
.site-header .menu-1 .menu .sub-menu a:focus-visible {
	color: var(--ehw-white);
	background: transparent;
}

@media (prefers-reduced-motion: reduce) {

	.site-header .menu-1 .menu .sub-menu a::before {
		transition: none;
	}

}

.site-header .menu-1 .menu > li:last-child > a {
	padding: .8rem 1.2rem;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.site-header .menu-1 .menu > li:last-child > a:hover,
.site-header .menu-1 .menu > li:last-child > a:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

/* Fill with ink only where the header is actually solid. `:not(.home)` was
   standing in for that and is wrong: every inner page opening with a hero
   keeps the header transparent, so the button filled ink on an ink ground and
   lost its outline entirely. `.no-hero` is the base theme's own flag for a
   solid header, and `.scrolled-down` covers a hero page once it has scrolled. */
body.no-hero .site-header .menu-1 .menu > li:last-child > a:hover,
body.no-hero .site-header .menu-1 .menu > li:last-child > a:focus-visible,
body.scrolled-down .site-header .menu-1 .menu > li:last-child > a:hover,
body.scrolled-down .site-header .menu-1 .menu > li:last-child > a:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border-color: var(--ehw-ink);
}

@media (max-width: 1199px) {
	.site-header {
		height: 82px;
	}

	.site-header .logo {
		width: 165px;
	}

	.site-header-menu {
		overflow-y: auto;
	}

	.site-header-menu .inner {
		align-items: flex-start;
		padding-top: 7rem;
		padding-bottom: 3rem;
		font-size: clamp(1.5rem, 4vw, 2.25rem);
	}

	.site-header-menu .sub-menu {
		display: block !important;
		margin: .7rem 0 1.3rem 1rem;
		font-size: .55em;
	}

	.site-header-menu .sub-menu li {
		margin: .45rem 0;
		opacity: 1;
		transform: none;
	}

	.site-header-menu .sub-menu a {
		color: rgba(255, 255, 255, .75);
	}
}

.ehw-home {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-home h1,
.ehw-home h2,
.ehw-home h3,
.ehw-home p {
	margin-top: 0;
}

.ehw-home h1,
.ehw-home h2 {
	max-width: 14ch;
	color: inherit;
	font-size: var(--ehw-h1);
	line-height: var(--ehw-h1-lh);
	letter-spacing: var(--ehw-track-display);
}

.ehw-home h2 {
	font-size: var(--ehw-h2);
	line-height: var(--ehw-h2-lh);
}

.ehw-eyebrow {
	margin-bottom: 1.25rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* The base theme puts 60px above any h2 that follows a paragraph, except
   after its own .pre-heading. .ehw-eyebrow is the child's pre-heading, so a
   label sat 60px clear of its own heading on the finishes, FAQ, downloads
   and enquiry sections. Same weight as the base rule, later in the cascade. */
p.ehw-eyebrow + h2 {
	margin-top: 0;
}

.ehw-lead {
	max-width: 38rem;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	line-height: 1.55;
}

.ehw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.2rem;
	padding: .75rem 1.4rem;
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border: 1px solid var(--ehw-ink);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.ehw-button:hover,
.ehw-button:focus-visible {
	color: var(--ehw-ink);
	background: transparent;
}

.ehw-button--light {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

.ehw-text-link {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.ehw-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.ehw-hero {
	position: relative;
	min-height: min(820px, 86vh);
	color: var(--ehw-white);
	background: var(--ehw-ink);
	overflow: hidden;
}

.ehw-hero__slides {
	position: relative;
	min-height: inherit;
}

.ehw-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	min-height: inherit;
	padding: clamp(94px, 7vw, 120px) 0;
	background-image: linear-gradient(90deg, rgba(var(--ehw-ink-rgb), .82) 0%, rgba(var(--ehw-ink-rgb), .52) 44%, rgba(var(--ehw-ink-rgb), .08) 76%), var(--oba-carousel-image);
	background-position: center;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility .8s;
}

.ehw-hero__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}



.ehw-hero h1,
.ehw-hero h2 {
	max-width: 40rem;
	color: var(--ehw-white);
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: var(--ehw-h1);
	font-style: normal;
	font-weight: 500;
	line-height: var(--ehw-h1-lh);
	letter-spacing: var(--ehw-track-display);
}

.ehw-hero__intro {
	max-width: 40rem;
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.55;
}

.ehw-hero .ehw-button {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

.ehw-hero .ehw-button:hover,
.ehw-hero .ehw-button:focus-visible {
	color: var(--ehw-white);
	background: transparent;
}

.ehw-hero__controls {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: max(3.45%, 27px);
	left: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}



.ehw-hero__dots {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: auto;
}

/* The dot and its progress ring are shared with the showroom carousel below.
   Only the colour differs, so it comes from --ehw-dot-ink; the hero sits on a
   photograph and keeps the white default. */
.ehw-hero__dot,
.ehw-showroom__dot,
.ehw-hero__dot button,
.ehw-showroom__dot button {
	position: relative;
	display: block;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
}

.ehw-hero__dot button,
.ehw-showroom__dot button {
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ehw-hero__dot button > span,
.ehw-showroom__dot button > span {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 8px;
	height: 8px;
	background: var(--ehw-dot-ink, var(--ehw-white));
	border-radius: 50%;
	opacity: .7;
	transition: opacity .2s ease, transform .2s ease;
}

.ehw-hero__dot svg,
.ehw-showroom__dot svg {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	overflow: visible;
	pointer-events: none;
	transform: rotate(-81deg);
	transform-origin: center;
}

.ehw-hero__dot circle.time,
.ehw-showroom__dot circle.time {
	stroke: var(--ehw-dot-ink, var(--ehw-white));
	stroke-dasharray: 176;
	stroke-dashoffset: 176;
}

.ehw-hero__dot.is-active button > span,
.ehw-showroom__dot.is-active button > span {
	opacity: 1;
	transform: scale(1.12);
}

/* An animation, not a transition. The base script builds the dots and calls
   show(0) in the same synchronous block, so the first dot is never rendered
   in its inactive state — a transition has no start value to run from and
   the ring painted straight to 100% until the carousel came round again.
   Animations do run on first render. */
@keyframes ehw-dot-progress {
	from {
		stroke-dashoffset: 176;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.ehw-hero__dot.is-active circle.time,
.ehw-showroom__dot.is-active circle.time {
	animation: ehw-dot-progress var(--ehw-carousel-interval, 4100ms) linear forwards;
	transition: stroke .2s;
}

.ehw-hero__dot:not(.is-active) circle.time,
.ehw-showroom__dot:not(.is-active) circle.time {
	animation: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	/* The carousel does not auto-advance, so the ring should not imply it. */
	.ehw-hero__dot.is-active circle.time,
	.ehw-showroom__dot.is-active circle.time {
		animation: none;
		stroke-dashoffset: 0;
	}

}

.ehw-intro {
	background: var(--ehw-mist);
}

.ehw-intro__grid,
.ehw-systems__grid {
	display: grid;
	grid-template-columns: minmax(11rem, .65fr) 2fr;
	gap: clamp(2rem, 7vw, 8rem);
}

.ehw-intro h2 {
	max-width: 18ch;
}

.ehw-solutions .ehw-section-heading {
	display: grid;
	gap: .25rem;
	max-width: 34ch;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.ehw-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ehw-card {
	position: relative;
	min-height: clamp(22rem, 42vw, 36rem);
	color: var(--ehw-white);
	background: var(--ehw-ink);
	overflow: hidden;
	text-decoration: none;
}

.ehw-card--large {
	grid-row: span 2;
	min-height: 100%;
}

.ehw-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .74;
	transition: transform .7s ease, opacity .4s ease;
}

.ehw-card:hover img,
.ehw-card:focus-visible img {
	transform: scale(1.035);
	opacity: .55;
}

.ehw-card__content {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	padding: clamp(1.5rem, 3vw, 3rem);
	background: linear-gradient(transparent, rgba(var(--ehw-ink-rgb), .86));
}

.ehw-card__content small {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ehw-card__content strong {
	max-width: 17ch;
	font-size: clamp(1.5rem, 2.5vw, 2.6rem);
	font-weight: 500;
	line-height: 1.04;
}

.ehw-card__content > span {
	font-weight: 700;
}

.ehw-expertise {
	background: var(--ehw-sage);
}

.ehw-expertise__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(3rem, 8vw, 9rem);
}

.ehw-process {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .35);
}

.ehw-process li {
	display: grid;
	grid-template-columns: 3rem minmax(10rem, .85fr) 1.25fr;
	gap: 1rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .35);
}

.ehw-process p {
	margin-bottom: 0;
}

.ehw-process strong {
	font-weight: 500;
}

.ehw-feature {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr);
	align-items: center;
	gap: clamp(3rem, 8vw, 9rem);
}

.ehw-feature__image {
	height: clamp(28rem, 55vw, 47rem);
}

.ehw-feature__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ehw-feature__content p:not(.ehw-eyebrow) {
	max-width: 34rem;
	font-size: 1.15rem;
	line-height: 1.6;
}

.ehw-feature__content .ehw-button {
	margin-top: 1rem;
}

/* These <main> wrappers previously had no colour of their own, so the base
   theme's dark body showed through and .ehw-systems-suppliers rendered white
   text on its own near-white ground. */
.ehw-systems-index,
.oba-system-listing {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-systems {
	background: var(--ehw-mist);
}

.ehw-system-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: clamp(3rem, 6vw, 6rem);
	border-top: 1px solid var(--ehw-grey);
	border-bottom: 1px solid var(--ehw-grey);
}

.ehw-system-list a {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	min-height: 11rem;
	padding: 2rem;
	color: var(--ehw-ink);
	text-decoration: none;
	border-right: 1px solid var(--ehw-grey);
}

.ehw-system-list a:last-child {
	border-right: 0;
}

.ehw-system-list a:hover,
.ehw-system-list a:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-system-list strong {
	font-size: 1.6rem;
	font-weight: 500;
}

.ehw-contact {
	text-align: center;
}

.ehw-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ehw-contact h2 {
	max-width: 17ch;
}

.ehw-contact p:not(.ehw-eyebrow) {
	max-width: 38rem;
	font-size: 1.2rem;
}

.ehw-contact .ehw-button {
	margin-top: 1.5rem;
}

@media (max-width: 900px) {
	.ehw-intro__grid,
	.ehw-expertise__grid,
	.ehw-feature__grid,
	.ehw-systems__grid {
		grid-template-columns: 1fr;
	}

	.ehw-card-grid {
		grid-template-columns: 1fr;
	}

	.ehw-card--large {
		min-height: clamp(22rem, 70vw, 34rem);
	}

	.ehw-process li {
		grid-template-columns: 2.5rem 1fr;
	}

	.ehw-process li p {
		grid-column: 2;
	}

	.ehw-system-list {
		grid-template-columns: 1fr;
	}

	.ehw-system-list a {
		min-height: 0;
		border-right: 0;
		border-bottom: 1px solid var(--ehw-grey);
	}

	.ehw-system-list a:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 600px) {
	.ehw-hero {
		min-height: 760px;
	}

	.ehw-hero__slide {
		background-image: linear-gradient(0deg, rgba(var(--ehw-ink-rgb), .94) 0%, rgba(var(--ehw-ink-rgb), .62) 62%, rgba(var(--ehw-ink-rgb), .2) 100%), var(--oba-carousel-image);
		background-position: 62% center;
	}

	.ehw-solutions .ehw-section-heading {
		display: block;
	}

	.ehw-feature__image {
		min-height: 25rem;
	}

	.ehw-hero__controls {
		bottom: 24px;
	}
}

/* Systems catalogue */
.ehw-systems-hero,
.oba-catalogue-hero,
.oba-system-detail__hero {
	display: flex;
	align-items: center;
	min-height: 58vh;
	padding: clamp(94px, 7vw, 120px) 0;
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-systems-hero {
	background:
		linear-gradient(90deg, rgba(var(--ehw-ink-rgb), .88), rgba(var(--ehw-ink-rgb), .35)),
		var(--ehw-systems-hero-image, none) center/cover;
}

.ehw-systems-hero h1,
.oba-catalogue-hero h1,
.oba-system-detail__hero h1 {
	max-width: 52rem;
	margin-bottom: 1.5rem;
	color: var(--ehw-white);
	font-size: var(--ehw-h1);
	line-height: var(--ehw-h1-lh);
	letter-spacing: var(--ehw-track-display);
}

.ehw-systems-hero .container > p:last-child,
.oba-catalogue-hero .container > p:last-child,
.oba-system-detail__hero .container > p:last-child {
	max-width: 52rem;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.65;
}

.ehw-hero .ehw-eyebrow,
.ehw-systems-hero .ehw-eyebrow,
.oba-catalogue-hero .oba-catalogue-eyebrow,
.oba-system-detail__hero .oba-catalogue-eyebrow,
.oba-supplier-hero .ehw-eyebrow {
	margin-bottom: 0;
}

.ehw-hero .ehw-eyebrow::after,
.ehw-systems-hero .ehw-eyebrow::after,
.oba-catalogue-hero .oba-catalogue-eyebrow::after,
.oba-system-detail__hero .oba-catalogue-eyebrow::after,
.oba-supplier-hero .ehw-eyebrow::after {
	display: block;
	width: 20%;
	height: 1px;
	margin: 12.5px 0;
	content: "";
	background: var(--ehw-white);
}

.oba-catalogue-eyebrow,
.oba-system-card__supplier {
	margin-bottom: 1rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ehw-systems-categories h2,
.ehw-systems-suppliers h2,
.oba-catalogue-results h2,
.oba-system-detail h2 {
	font-size: var(--ehw-h2);
	line-height: var(--ehw-h2-lh);
	letter-spacing: var(--ehw-track-display);
}

.ehw-system-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin: 2.5rem 0;
}

.ehw-system-filters button {
	padding: .7rem 1.15rem;
	color: var(--ehw-ink);
	background: transparent;
	border: 1px solid rgba(var(--ehw-ink-rgb), .3);
	border-radius: 999px;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.ehw-system-filters button.is-active,
.ehw-system-filters button:hover,
.ehw-system-filters button:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border-color: var(--ehw-ink);
}

.ehw-category-grid,
.oba-system-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.ehw-category-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
	padding: 2rem;
	color: var(--ehw-white);
	background:
		linear-gradient(
			180deg,
			rgba(var(--ehw-ink-rgb), .1) 0%,
			rgba(var(--ehw-ink-rgb), .42) 48%,
			rgba(var(--ehw-ink-rgb), .93) 100%
		),
		var(--ehw-card-image, none) center/cover no-repeat,
		var(--ehw-sage);
	text-decoration: none;
	overflow: hidden;
}

/* Match the hover on the solution cards: the gradient deepens rather than
   the image moving. */
.ehw-category-card:hover,
.ehw-category-card:focus-visible {
	background:
		linear-gradient(
			180deg,
			rgba(var(--ehw-ink-rgb), .24) 0%,
			rgba(var(--ehw-ink-rgb), .56) 48%,
			rgba(var(--ehw-ink-rgb), .96) 100%
		),
		var(--ehw-card-image, none) center/cover no-repeat,
		var(--ehw-sage);
}

.ehw-category-card[hidden] {
	display: none;
}

.ehw-category-card span,
.ehw-category-card small {
	font-weight: 500;
}

.ehw-category-card strong {
	margin: .45rem 0 1.2rem;
	font-size: clamp(1.5rem, 2.5vw, 2.3rem);
	font-weight: 500;
	line-height: 1.1;
}

.ehw-systems-suppliers {
	background: var(--ehw-mist);
}

.ehw-supplier-index-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 3rem;
	background: rgba(var(--ehw-ink-rgb), .2);
}

.ehw-supplier-index-grid a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 240px;
	padding: 2rem;
	color: var(--ehw-ink);
	background: var(--ehw-white);
	text-decoration: none;
}

.ehw-supplier-index-grid strong {
	font-size: 2rem;
	font-weight: 500;
}

.oba-catalogue-results {
	background: var(--ehw-white);
}

.oba-system-card {
	min-width: 0;
	background: var(--ehw-mist);
}

.oba-system-card > a {
	display: block;
	height: 100%;
	color: var(--ehw-ink);
	text-decoration: none;
}

.oba-system-card__image {
	aspect-ratio: 4 / 3;
	background-color: var(--ehw-sage);
	background-position: center;
	background-size: cover;
}

.oba-system-card__body {
	padding: 1.6rem;
}

.oba-system-card h3 {
	margin-bottom: .8rem;
	font-size: clamp(1.35rem, 2vw, 2rem);
	font-weight: 500;
	line-height: 1.15;
}

.oba-system-card__body > span {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 600;
}

.oba-catalogue-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
}

.oba-system-detail__hero {
	min-height: 76vh;
	background:
		linear-gradient(90deg, rgba(var(--ehw-ink-rgb), .88), rgba(var(--ehw-ink-rgb), .25)),
		var(--oba-system-image) center/cover,
		var(--ehw-ink);
}

.oba-system-detail {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.oba-system-highlights {
	color: var(--ehw-white);
	background: var(--ehw-sage);
}

.oba-system-highlights .container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	box-sizing: border-box;
	padding-right: clamp(1.5rem, 4vw, 4rem);
	padding-left: clamp(1.5rem, 4vw, 4rem);
}

.oba-system-highlights .container > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: 2.25rem 1.5rem;
	text-align: left;
}

.oba-system-highlights .container > div + div {
	border-left: 1px solid rgba(255, 255, 255, .35);
}

.oba-system-highlights .container > div > strong,
.oba-system-highlights .container > div > span {
	width: min(100%, 12rem);
}

.oba-system-highlights strong {
	font-size: 1.45rem;
	font-weight: 500;
}

.oba-system-overview-features,
.oba-system-finishes {
	background: var(--ehw-white);
}

.oba-system-gallery {
	background: var(--ehw-mist);
}

.oba-system-specs,
.oba-system-downloads {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.oba-system-specs h2,
.oba-system-downloads h2 {
	color: var(--ehw-white);
}

.oba-system-prose {
	max-width: 900px;
}

.oba-system-overview-features__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(3rem, 7vw, 7rem);
}

.oba-system-overview-features .oba-system-prose {
	max-width: none;
}

.oba-system-prose > * + * {
	margin-top: 1.25rem;
}

.oba-system-overview-features .oba-system-overview,
.oba-system-overview-features .oba-system-features {
	background: transparent;
}

.oba-system-overview-features .oba-system-features {
	padding: clamp(2rem, 4vw, 4rem);
	background: var(--ehw-mist);
	border-radius: 14px;
}

.oba-system-features > p,
.oba-system-features > ul {
	max-width: 100%;
}

.oba-system-features ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 2rem;
	padding: 0;
	list-style: none;
}

.oba-system-features li {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: .85rem;
	align-items: start;
	padding: .9rem 0;
	background: transparent;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .13);
}

.oba-system-features li:first-child {
	padding-top: 0;
}

.oba-system-features li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.oba-system-features li::before {
	display: grid;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: .1rem;
	color: var(--ehw-white);
	background: var(--ehw-sage);
	border-radius: 50%;
	content: "✓";
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
	place-items: center;
}

.oba-system-specs__table {
	margin-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, .35);
}

.oba-system-specs__table > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.oba-system-specs__table strong {
	font-weight: 500;
}

.oba-system-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}

.oba-system-gallery__grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.oba-system-downloads__list {
	display: grid;
	gap: 1px;
	margin-top: 2.5rem;
	background: rgba(255, 255, 255, .25);
}

.oba-system-downloads__list a {
	display: flex;
	justify-content: space-between;
	padding: 1.25rem;
	color: var(--ehw-white);
	background: var(--ehw-ink);
	text-decoration: none;
}

.ehw-supplier-category-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ehw-supplier-category-card::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	background:
		linear-gradient(rgba(var(--ehw-ink-rgb), .55), rgba(var(--ehw-ink-rgb), .8)),
		var(--ehw-card-image) center/cover;
	transition: transform .35s ease;
}

.ehw-supplier-category-card:hover::before {
	transform: scale(1.04);
}

@media (max-width: 900px) {
	.ehw-category-grid,
	.oba-system-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.oba-system-highlights .container,
	.ehw-supplier-index-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.oba-system-overview-features__grid {
		grid-template-columns: 1fr;
	}

	.oba-system-highlights .container > div + div {
		border-left: 0;
	}

	.oba-system-highlights .container > div:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, .35);
	}

	.oba-system-highlights .container > div:nth-child(n+3) {
		border-top: 1px solid rgba(255, 255, 255, .35);
	}
}

@media (max-width: 600px) {
	.ehw-category-grid,
	.oba-system-grid,
	.ehw-supplier-index-grid,
	.oba-system-highlights .container,
	.oba-system-features ul,
	.oba-system-gallery__grid {
		grid-template-columns: 1fr;
	}

	.oba-system-highlights .container > div {
		border-top: 0;
		border-left: 0;
	}

	.oba-system-highlights .container > div:nth-child(even) {
		border-left: 0;
	}

	.oba-system-highlights .container > div + div {
		border-top: 1px solid rgba(255, 255, 255, .35);
	}

	.oba-system-specs__table > div {
		grid-template-columns: 1fr;
		gap: .35rem;
	}

	.oba-catalogue-links {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ehw-hero__slide,
	.ehw-card img {
		transition: none;
	}

	.ehw-hero__dot.is-active circle.time,
	.ehw-showroom__dot.is-active circle.time {
		stroke-dashoffset: 0;
		transition: none;
	}
}

/* Supplier / system pages */

.ehw-supplier-page {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

body.ehw-supplier-system-page.no-hero {
	padding-top: 0;
}

body.ehw-supplier-system-page:not(.scrolled-down) .site-header {
	color: var(--ehw-white);
	background: transparent;
	box-shadow: none;
}

body.ehw-supplier-system-page:not(.scrolled-down) .site-header .logo__image--colour {
	opacity: 0;
}

body.ehw-supplier-system-page:not(.scrolled-down) .site-header .logo__image--white {
	opacity: 1;
}

.oba-supplier-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(620px, 82vh, 820px);
	padding: clamp(94px, 7vw, 120px) 0;
	color: var(--ehw-white);
	background-image: linear-gradient(90deg, rgba(var(--ehw-ink-rgb), .82), rgba(var(--ehw-ink-rgb), .32)), var(--oba-supplier-hero-image);
	background-position: center;
	background-size: cover;
}

.oba-supplier-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .8fr);
	align-items: center;
	gap: clamp(3rem, 8vw, 8rem);
}

.oba-supplier-hero h1 {
	max-width: 45rem;
	margin: 0 0 1.5rem;
	color: var(--ehw-white);
	font-size: var(--ehw-h1);
	line-height: var(--ehw-h1-lh);
	letter-spacing: var(--ehw-track-display);
}

.oba-supplier-hero__intro {
	max-width: 45rem;
	margin: 0;
	font-size: clamp(1.05rem, 1.45vw, 1.3rem);
	line-height: 1.6;
}

.oba-supplier-hero__testimonial {
	margin: 0;
	padding: clamp(2rem, 4vw, 3.5rem);
	color: var(--ehw-white);
	background: rgba(var(--ehw-sage-rgb), .88);
	border-radius: 14px;
	backdrop-filter: blur(8px);
}

.oba-supplier-hero__testimonial blockquote {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	font-weight: 400;
	line-height: 1.45;
}

.oba-supplier-hero__testimonial blockquote > span {
	display: block;
	height: 2.25rem;
	font-size: 4rem;
	line-height: 1;
}

.oba-supplier-hero__testimonial figcaption {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.oba-supplier-hero__testimonial strong {
	font-weight: 600;
}

.oba-supplier-hero__testimonial figcaption span {
	opacity: .8;
}

.ehw-supplier-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(3rem, 8vw, 8rem);
}

.ehw-supplier-copy h2,
.ehw-supplier-solutions h2,
.oba-project-enquiry h2 {
	max-width: 15ch;
	font-size: var(--ehw-h2);
	line-height: var(--ehw-h2-lh);
	letter-spacing: var(--ehw-track-display);
}

.ehw-supplier-copy > p:not(.ehw-eyebrow, .ehw-supplier-wordmark),
.oba-project-enquiry__intro > p:not(.ehw-eyebrow) {
	max-width: 42rem;
	font-size: 1.15rem;
	line-height: 1.65;
}

.ehw-supplier-logo {
	display: block;
	width: min(300px, 70%);
	max-height: 90px;
	margin-bottom: 2.5rem;
	object-fit: contain;
	object-position: left center;
}

.ehw-supplier-wordmark {
	margin-bottom: 2rem;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: .12em;
}

.ehw-supplier-split__image {
	width: 100%;
	height: clamp(420px, 50vw, 680px);
	object-fit: cover;
}

.ehw-text-link {
	display: inline-block;
	margin-top: 1.25rem;
	color: var(--ehw-ink);
	font-weight: 600;
	text-underline-offset: .3em;
}

.ehw-supplier-facts {
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .18);
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-supplier-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ehw-supplier-facts__grid > div {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border-right: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-supplier-facts__grid > div:last-child {
	border-right: 0;
}

.ehw-supplier-facts__grid strong {
	font-size: clamp(1.25rem, 2vw, 1.8rem);
	font-weight: 500;
	line-height: 1.15;
}

.ehw-supplier-facts__grid span {
	font-size: .9rem;
	line-height: 1.45;
}

.ehw-supplier-solutions {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-supplier-solutions h2 {
	color: var(--ehw-white);
}

.ehw-supplier-solutions__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: clamp(3rem, 6vw, 5rem);
	background: rgba(255, 255, 255, .3);
	border-top: 1px solid rgba(255, 255, 255, .3);
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.ehw-supplier-solutions__grid a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: 15rem;
	padding: 2rem;
	color: var(--ehw-white);
	background: var(--ehw-ink);
	text-decoration: none;
}

.ehw-supplier-solutions__grid a:hover,
.ehw-supplier-solutions__grid a:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-supplier-solutions__grid strong {
	font-size: clamp(1.5rem, 2.5vw, 2.2rem);
	font-weight: 500;
}

.ehw-supplier-why {
	background: var(--ehw-mist);
}

.oba-project-enquiry {
	color: var(--ehw-white);
	background: var(--ehw-white);
}

.oba-project-enquiry > .container {
	display: block;
	width: min(calc(100% - var(--ehw-page-gutter) - var(--ehw-page-gutter)), 1280px);
	padding: clamp(2.5rem, 5vw, 5rem);
	background: var(--ehw-sage);
	box-sizing: border-box;
}

.oba-project-enquiry h2 {
	color: var(--ehw-white);
}

.oba-project-enquiry__intro h2 {
	max-width: none;
}

.oba-project-enquiry__intro {
	width: 100%;
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.oba-project-enquiry__details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 2rem;
	margin-top: 2rem;
	font-style: normal;
}

.oba-project-enquiry__details a {
	font-size: 1.05rem;
	font-weight: 500;
	text-decoration: none;
}

.oba-project-enquiry__form {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.oba-project-enquiry__form h3 {
	margin-bottom: 2rem;
	color: var(--ehw-white);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.ehw-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
}

.ehw-enquiry-form p {
	margin-bottom: 1.25rem;
}

.oba-project-enquiry .form-group {
	margin-bottom: 1rem;
}

.oba-project-enquiry label,
.oba-project-enquiry legend {
	display: block;
	color: var(--ehw-white);
	font-size: .92rem;
	font-weight: 500;
}

.oba-project-enquiry input,
.oba-project-enquiry textarea,
.oba-project-enquiry select {
	width: 100%;
	min-height: 3.4rem;
	margin-top: .5rem;
	padding: .8rem 1rem;
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 3px;
}

.oba-project-enquiry textarea {
	min-height: 160px;
	resize: vertical;
}

.oba-project-enquiry input[type="file"] {
	min-height: 0;
	padding: .7rem 0;
	color: var(--ehw-white);
	background: transparent;
	border: 0;
	border-radius: 0;
}

.ehw-form-products {
	margin: .5rem 0 1.5rem;
	padding: 0;
	border: 0;
}

.ehw-form-products legend {
	margin-bottom: 1rem;
}

.ehw-form-products .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem 1.25rem;
}

.ehw-form-products .wpcf7-list-item {
	margin: 0;
}

.ehw-form-products .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-weight: 400;
	cursor: pointer;
}

.ehw-form-products input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.1rem;
	min-height: 1.1rem;
	height: 1.1rem;
	margin: .15rem 0 0;
	padding: 0;
}

.oba-project-enquiry .btn {
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border-color: var(--ehw-ink);
}

.oba-project-enquiry a {
	color: inherit;
}

.oba-project-enquiry input[type="submit"] {
	width: auto;
	min-width: 12rem;
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border-color: var(--ehw-ink);
	border-radius: 999px;
	font-weight: 500;
	cursor: pointer;
}

.oba-project-enquiry input[type="submit"]:hover,
.oba-project-enquiry input[type="submit"]:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

.oba-project-enquiry .wpcf7-not-valid-tip {
	margin-top: .4rem;
	color: #fff3c4;
}

.oba-project-enquiry .wpcf7-response-output {
	margin-right: 0;
	margin-left: 0;
}

.oba-project-enquiry .wpcf7-response-output:empty,
.oba-project-enquiry .wpcf7-form:not(.sent, .failed, .aborted, .spam, .invalid, .unaccepted, .payment-required) .wpcf7-response-output {
	display: none;
}

.oba-project-enquiry .wpcf7 .hidden-fields-container {
	display: none !important;
}

@media (max-width: 900px) {
	.oba-supplier-hero__grid,
	.ehw-supplier-split {
		grid-template-columns: 1fr;
	}

	.oba-supplier-hero {
		padding-top: clamp(94px, 7vw, 120px);
	}

	.oba-supplier-hero__testimonial {
		max-width: 36rem;
	}

	.ehw-supplier-solutions__grid {
		grid-template-columns: 1fr;
	}

	.ehw-supplier-solutions__grid a {
		min-height: 0;
	}

	.ehw-supplier-split--reverse .ehw-supplier-split__image {
		order: 2;
	}

	.ehw-supplier-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ehw-supplier-facts__grid > div:nth-child(2) {
		border-right: 0;
	}

	.ehw-supplier-facts__grid > div:nth-child(-n+2) {
		border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
	}

	.oba-project-enquiry__details,
	.ehw-form-products .wpcf7-checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.oba-supplier-hero {
		min-height: 0;
	}

	.ehw-supplier-split__image {
		height: 360px;
	}

	.ehw-form-grid,
	.oba-project-enquiry__details,
	.ehw-form-products .wpcf7-checkbox,
	.ehw-supplier-facts__grid {
		grid-template-columns: 1fr;
	}

	.ehw-supplier-facts__grid > div,
	.ehw-supplier-facts__grid > div:nth-child(2) {
		border-right: 0;
		border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
	}

	.ehw-supplier-facts__grid > div:last-child {
		border-bottom: 0;
	}

	.oba-project-enquiry > .container {
		width: calc(100% - 2rem);
		padding: 2rem 1.25rem;
	}
}

/* Solution-led page family: Windows, Doors and Architectural Glazing. */
body.ehw-solution-page:not(.scrolled-down) .site-header {
	color: var(--ehw-white);
	background: transparent;
	box-shadow: none;
}

body.ehw-solution-page:not(.scrolled-down) .site-header .logo__image--white {
	opacity: 1;
}

body.ehw-solution-page:not(.scrolled-down) .site-header .logo__image--colour {
	opacity: 0;
}

body.ehw-solution-page.no-hero {
	padding-top: 0;
}

.ehw-solution {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-solution h1,
.ehw-solution h2,
.ehw-solution h3,
.ehw-solution p {
	margin-top: 0;
}

.ehw-solution-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(760px, 82vh);
	padding: 9.5rem 0 5rem;
	color: var(--ehw-white);
	background: linear-gradient(90deg, rgba(var(--ehw-ink-rgb), .84), rgba(var(--ehw-ink-rgb), .45) 54%, rgba(var(--ehw-ink-rgb), .16)), var(--ehw-solution-image) center/cover, var(--ehw-ink);
}



.ehw-solution-hero .ehw-eyebrow {
	margin-bottom: 1.4rem;
}

.ehw-solution-hero .ehw-eyebrow::after {
	display: block;
	width: 20%;
	min-width: 4rem;
	height: 1px;
	margin-top: .8rem;
	content: "";
	background: currentColor;
}

.ehw-solution-hero h1 {
	max-width: 15ch;
	margin-bottom: 1.4rem;
	color: inherit;
	font-size: var(--ehw-h1);
	font-weight: 500;
	line-height: var(--ehw-h1-lh);
	letter-spacing: var(--ehw-track-display);
}

.ehw-solution-hero__content {
	max-width: 39rem;
	font-size: 1.1rem;
	line-height: 1.65;
}

.ehw-solution-hero .ehw-button {
	margin-top: 1rem;
}

.ehw-solution-intro {
	background: var(--ehw-mist);
}

.ehw-solution-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr);
	gap: clamp(2.5rem, 8vw, 9rem);
	align-items: center;
}

.ehw-solution-intro h2,
.ehw-solution-considerations h2,
.ehw-solution-cards h2,
.ehw-solution-systems h2,
.ehw-solution-related h2 {
	max-width: 21ch;
	margin-bottom: 1.5rem;
}

.ehw-solution-intro__grid > div > div {
	max-width: 42rem;
	font-size: 1.05rem;
	line-height: 1.7;
}

.ehw-solution-intro img {
	width: 100%;
	min-height: 24rem;
	object-fit: cover;
}

.ehw-solution-considerations {
	background: var(--ehw-white);
}

.ehw-solution-considerations__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2rem, 4vw, 4rem);
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-solution-considerations article {
	position: relative;
	padding: 2rem clamp(1.25rem, 3vw, 3rem);
	border-right: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-solution-considerations article:last-child {
	border-right: 0;
}

.ehw-solution-considerations article > span {
	display: block;
	margin-bottom: 1.5rem;
	width: 2rem;
	height: 2px;
	overflow: hidden;
	background: var(--ehw-sage);
	text-indent: -100vw;
}

.ehw-solution-considerations h3 {
	margin-bottom: .8rem;
	font-size: 1.2rem;
	line-height: 1.45;
}

.ehw-solution-considerations p {
	margin-bottom: 0;
	line-height: 1.65;
}

.ehw-solution-cards {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-solution-cards h2 {
	color: inherit;
}

.ehw-solution-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}

.ehw-solution-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 23rem;
	padding: 1.5rem;
	color: var(--ehw-white);
	background: var(--ehw-card-image) center/cover, var(--ehw-ink);
	overflow: hidden;
	text-decoration: none;
}

.ehw-solution-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--ehw-ink-rgb), .04), rgba(var(--ehw-ink-rgb), .86));
	transition: background-color .25s ease;
}

.ehw-solution-card:hover .ehw-solution-card__shade,
.ehw-solution-card:focus-visible .ehw-solution-card__shade {
	background: linear-gradient(180deg, rgba(var(--ehw-ink-rgb), .18), rgba(var(--ehw-ink-rgb), .96));
}

.ehw-solution-card__body {
	position: relative;
	display: grid;
	gap: .65rem;
}

.ehw-solution-card strong {
	font-size: 1.35rem;
	font-weight: 500;
}

.ehw-solution-card small {
	font-size: .94rem;
	line-height: 1.55;
}

.ehw-solution-card em,
.ehw-solution-related em {
	margin-top: .4rem;
	font-size: .88rem;
	font-style: normal;
	font-weight: 600;
}

.ehw-solution-systems {
	background: var(--ehw-mist);
}

.ehw-solution-systems__empty {
	max-width: 42rem;
	padding: 2rem 0 0;
	font-size: 1.08rem;
	line-height: 1.65;
}

.ehw-solution-related {
	background: var(--ehw-white);
}

.ehw-solution-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 2.5rem;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-solution-related__grid a {
	display: grid;
	gap: .75rem;
	min-height: 13rem;
	padding: 1.6rem clamp(1rem, 2vw, 2rem);
	color: inherit;
	border-right: 1px solid rgba(var(--ehw-ink-rgb), .18);
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
	text-decoration: none;
}

.ehw-solution-related__grid a:last-child {
	border-right: 0;
}

.ehw-solution-related__grid a:hover strong,
.ehw-solution-related__grid a:focus-visible strong {
	color: var(--ehw-sage);
}

.ehw-solution-related strong {
	font-size: 1.15rem;
	font-weight: 500;
}

.ehw-solution-related span {
	font-size: .95rem;
	line-height: 1.55;
}

@media (max-width: 900px) {
	.ehw-solution-intro__grid,
	.ehw-solution-considerations__grid,
	.ehw-solution-cards__grid,
	.ehw-solution-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ehw-solution-intro__grid > div {
		grid-column: 1 / -1;
	}

}

/* Column-position rules, valid only while these grids really are two columns.
   They previously sat in the plain max-width: 900px block and kept applying
   after the grid collapsed to a single column below 601px. */
@media (min-width: 601px) and (max-width: 900px) {

	.ehw-solution-considerations article:nth-child(2) {
		border-right: 0;
	}

	.ehw-solution-related__grid a:nth-child(2) {
		border-right: 0;
	}

}

@media (max-width: 600px) {
	.ehw-solution-hero {
		min-height: 39rem;
		padding-top: 8.5rem;
	}

	.ehw-solution-intro__grid,
	.ehw-solution-considerations__grid,
	.ehw-solution-cards__grid,
	.ehw-solution-related__grid {
		grid-template-columns: 1fr;
	}

	.ehw-solution-intro img {
		min-height: 18rem;
	}

	.ehw-solution-considerations article,
	.ehw-solution-considerations article:first-child,
	.ehw-solution-considerations article:last-child,
	.ehw-solution-related__grid a,
	.ehw-solution-related__grid a:first-child,
	.ehw-solution-related__grid a:last-child {
		padding: 1.5rem 0;
		border-right: 0;
		border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
	}

	.ehw-solution-related__grid a {
		min-height: 0;
	}
}

/* =====================================================================
   Base-theme component overrides.

   The child theme previously built a parallel --ehw-* palette and left the
   base theme's own tokens at their monochrome defaults, so every component
   the base styles — footer, burger, forms, buttons, and any template the
   child has not replaced — rendered off-brand. The tokens are rebound in
   :root above; this section handles the components where a straight
   recolour is not enough.
   ===================================================================== */

/* No page should ever fall through to the body colour. The contact page,
   blog, single and 404 templates have no <main> wrapper of their own, so
   the base theme's dark body was showing above and below their sections. */
.site-content {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

/* COL-2: ink on sage measured 2.82:1. With the sage deepened, this band
   flips to white type and becomes a proper dark accent instead. */
.ehw-expertise {
	color: var(--ehw-white);
	background: var(--ehw-sage);
}

.ehw-expertise .ehw-text-link {
	color: inherit;
}

.ehw-expertise .ehw-process,
.ehw-expertise .ehw-process li {
	border-color: var(--ehw-hair-on-dark);
}

/* FIN-3: the burger was a 60px white circle with dark bars, straight from
   the base theme. Let it inherit the header's colour instead, so it reads
   white over a hero and ink once the header goes solid. */
.btn-burger {
	width: 48px;
	height: 48px;
	top: 23px;
	color: var(--ehw-white);
	background: transparent;
	border-radius: 0;
}

body.scrolled-down .btn-burger,
body:not(.home):not(.ehw-supplier-system-page):not(.ehw-solution-page) .btn-burger {
	color: var(--ehw-ink);
}

body.main-nav-active .btn-burger {
	color: var(--ehw-white);
}

@media (max-width: 1199px) {

	.btn-burger {
		right: max(20px, var(--ehw-page-gutter));
	}

}

/* The contact map is the final element of this section, so it should meet the
   footer directly rather than inherit the general section's bottom spacing. */
body .site-content .section-padded.section-contact {
	padding-bottom: 0;
}

/* =====================================================================
   Contact page
   ===================================================================== */

.section-contact .ehw-contact-map {
	margin-top: clamp(2rem, 5vw, 4rem);
	background: var(--ehw-mist);
}

.section-contact .ehw-contact-map iframe {
	display: block;
	width: 100%;
	height: clamp(22rem, 38vw, 34rem);
	border: 0;
}

/* FIN-1: footer */
.site-footer {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.site-footer .container {
	width: var(--ehw-container);
}

.site-footer .footer-logo {
	display: block;
	width: 190px;
	max-width: 100%;
}

.site-footer .pre-heading {
	margin-bottom: 1.1rem;
	color: var(--ehw-white);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	opacity: .62;
}

.site-footer .footer-main ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.9;
}

.site-footer .footer-main a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.site-footer .footer-main a:hover,
.site-footer .footer-main a:focus-visible {
	border-bottom-color: currentColor;
}

.site-footer .link-contact {
	align-items: center;
	gap: .6rem;
	transition: opacity .25s var(--ehw-ease);
}

/* Full strength at rest, softened on hover, and never underlined — matching
   the accreditation marks in the opposite column. */
.site-footer .footer-main a.link-contact,
.site-footer .footer-main a.link-contact:hover,
.site-footer .footer-main a.link-contact:focus-visible {
	border-bottom-color: transparent;
	text-decoration: none;
}

.site-footer .footer-main a.link-contact:hover,
.site-footer .footer-main a.link-contact:focus-visible {
	opacity: .6;
}

.site-footer .link-contact svg {
	/* The address wraps to three lines and over-constrains the flex line, which
	   was shrinking its pin below the other three icons. */
	flex: none;
	width: 20px;
	height: 20px;
	opacity: .62;
}

.site-footer .footer-bottom {
	border-top-color: var(--ehw-hair-on-dark);
	font-size: .85rem;
}

.site-footer .footer-bottom a {
	color: inherit;
}

/* FIN-2: forms. The base theme's fields are grey boxes with no border; on a
   white ground they read as unfinished. Give them a hairline and the brand
   focus colour. */
/* Target real form controls only. Contact Form 7 also puts
   .wpcf7-form-control on the <span> that wraps a checkbox or radio group,
   and a span has no [type], so :not([type=...]) never excluded it - the
   group picked up a white field background behind its white labels. */
.site-content .form-control,
.site-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.site-content textarea,
.site-content select {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border: 1px solid var(--ehw-hair);
	border-radius: 2px;
}

.site-content .form-control:focus,
.site-content input:focus,
.site-content textarea:focus,
.site-content select:focus {
	border-color: var(--ehw-sage);
	box-shadow: 0 0 0 3px rgba(var(--ehw-sage-rgb), .18);
	outline: none;
}

/* The checkbox group is a layout wrapper, not a field. */
.site-content .wpcf7-checkbox,
.site-content .wpcf7-radio,
.site-content .wpcf7-acceptance {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.site-content ::placeholder {
	color: var(--ehw-ink);
	opacity: .5;
}

/* The base theme ships an empty first field on the contact form. */
.section-contact .wpcf7-form > p:first-child:empty,
.section-contact .wpcf7-form > .form-group:first-child:empty {
	display: none;
}

/* The base theme offsets no-hero pages by 156px for its own taller header.
   This build's header is 94px, which left a band of body colour showing
   between the header and the first section on every page without a hero. */
body.blog,
body.archive,
body.no-hero {
	padding-top: var(--ehw-header-h);
}

@media (max-width: 1199px) {

	:root {
		--ehw-header-h: 82px;
	}

	body.blog,
	body.archive,
	body.no-hero {
		padding-top: var(--ehw-header-h);
	}

}

/* Contact Form 7 keeps its hidden inputs in a visible fieldset, which shows
   up as an empty field above the form. */
.wpcf7 .hidden-fields-container {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Phase 3: sharpening
   --------------------------------------------------------------------- */

/* Tracking. Override the base theme's body value rather than editing it. */
body,
.ehw-lead,
.ehw-hero__intro,
.oba-supplier-hero__intro,
.ehw-solution-hero__content,
p, li, td, th, dd, dt, figcaption, label, input, select, textarea, button {
	letter-spacing: normal;
}

h1, h2, h3,
.heading-lg,
.ehw-card__content strong,
.ehw-category-card strong,
.ehw-solution-card strong,
.ehw-supplier-solutions__grid strong,
.ehw-system-list strong {
	letter-spacing: var(--ehw-track-display);
}

/* Uppercase labels need the opposite treatment. */
.ehw-eyebrow,
.oba-catalogue-eyebrow,
.oba-system-card__supplier,
.ehw-card__content small,
.site-footer .pre-heading {
	letter-spacing: .12em;
}

/* BTN-1: buttons. The pill at 18px/700 was the most repeated shape on the
   site and set the tone more than any section. Salient's was compact and
   essentially square. */
.ehw-button,
.oba-project-enquiry input[type="submit"] {
	min-height: 0;
	padding: .95rem 1.75rem;
	border-radius: 2px;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.35;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Bring the base theme's own button into the same shape, so the contact page
   and any unbuilt template match the rest of the site. */
.site-content .btn {
	padding: .95rem 1.75rem;
	border-radius: 2px;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.35;
	text-transform: none;
}

.site-content .btn:after {
	content: none;
}

@media (hover: hover) {

	.site-content .btn:hover,
	.site-content .btn:focus-visible {
		transform: none;
		/* Was opacity .88, which read as the button dimming rather than
		   responding. Buttons here swap fill and outline instead. */
		opacity: 1;
	}

}

.ehw-text-link {
	letter-spacing: normal;
}

/* IMG-2: let the photography read. The cards dropped their image to
   opacity .74 and then layered a gradient on top, which greyed the picture
   instead of darkening it. The gradient alone does the job. */
.ehw-card img {
	opacity: 1;
}

.ehw-card:hover img,
.ehw-card:focus-visible img {
	opacity: .92;
}

.ehw-hero__slide {
	background-image:
		linear-gradient(
			90deg,
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-strong)) 0%,
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-mid)) 48%,
			rgba(var(--ehw-ink-rgb), 0) 82%
		),
		var(--oba-carousel-image);
}

.oba-supplier-hero {
	background-image:
		linear-gradient(
			90deg,
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-strong)),
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-soft))
		),
		var(--oba-supplier-hero-image);
}

.ehw-solution-hero {
	background:
		linear-gradient(
			90deg,
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-strong)),
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-mid)) 54%,
			rgba(var(--ehw-ink-rgb), 0)
		),
		var(--ehw-solution-image) center/cover,
		var(--ehw-ink);
}

.ehw-systems-hero {
	background:
		linear-gradient(
			90deg,
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-strong)),
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-soft))
		),
		var(--ehw-systems-hero-image, none) center/cover;
}

.oba-system-detail__hero {
	background:
		linear-gradient(
			90deg,
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-strong)),
			rgba(var(--ehw-ink-rgb), var(--ehw-scrim-soft))
		),
		var(--oba-system-image) center/cover,
		var(--ehw-ink);
}

@media (max-width: 600px) {

	/* Portrait crops need the scrim to run bottom-up instead. */
	.ehw-hero__slide {
		background-image:
			linear-gradient(
				0deg,
				rgba(var(--ehw-ink-rgb), .86) 0%,
				rgba(var(--ehw-ink-rgb), .5) 62%,
				rgba(var(--ehw-ink-rgb), .16) 100%
			),
			var(--oba-carousel-image);
	}

}

/* SPC-1: a spacing scale. The base theme's .section-padded resolves to 144px
   top and bottom at 1440, so every section sat 288px from its neighbour.
   Reserve that for major transitions. */
.section-padded {
	padding: var(--ehw-space-m) 0;
}

.ehw-hero + .section-padded,
.ehw-solution-hero + .section-padded,
.oba-supplier-hero + .section-padded,
.ehw-systems-hero + .section-padded,
.oba-system-detail__hero + .section-padded,
.oba-project-enquiry.section-padded,
.ehw-contact.section-padded {
	padding: var(--ehw-space-l) 0;
}

@media (max-width: 900px) {

	.section-padded,
	.ehw-hero + .section-padded,
	.ehw-solution-hero + .section-padded,
	.oba-supplier-hero + .section-padded,
	.ehw-systems-hero + .section-padded,
	.oba-system-detail__hero + .section-padded,
	.oba-project-enquiry.section-padded,
	.ehw-contact.section-padded {
		padding: var(--ehw-space-s) 0;
	}

}

/* Copy should start at the top of the image it sits beside, not float in the
   middle of it. */
.ehw-feature__grid,
.ehw-solution-intro__grid,
.ehw-supplier-split,
.oba-supplier-hero__grid {
	align-items: start;
}

/* With the hero scrims lifted, the transparent header now sits over brighter
   photography. A short gradient behind it keeps the nav legible without
   putting the scrim back over the picture. */
body:not(.no-hero):not(.scrolled-down) .site-header::before,
body.ehw-supplier-system-page:not(.scrolled-down) .site-header::before,
body.ehw-solution-page:not(.scrolled-down) .site-header::before {
	position: absolute;
	z-index: -1;
	inset: 0 0 auto;
	height: calc(var(--ehw-header-h) * 1.9);
	content: "";
	background: linear-gradient(
		rgba(var(--ehw-ink-rgb), .5),
		rgba(var(--ehw-ink-rgb), 0)
	);
	pointer-events: none;
}

/* Filter chips and the header's contact button were the last fully rounded
   shapes left; bring them onto the same 2px geometry. */
.ehw-system-filters button {
	border-radius: 2px;
	border-color: var(--ehw-hair);
	font-size: .92rem;
	font-weight: 600;
}

.site-header .menu-1 .menu > li:last-child > a {
	padding: .7rem 1.15rem;
	border-radius: 2px;
	font-size: .95rem;
	font-weight: 600;
}

.site-header .menu-1 .sub-menu a {
	border-radius: 2px;
	font-size: .95rem;
}

/* .ehw-text-link picks up an ink colour from the supplier-page rules further
   up the file; on a dark ground it needs to inherit instead. */
.ehw-hero .ehw-text-link,
.ehw-solution-hero .ehw-text-link,
.oba-supplier-hero .ehw-text-link,
.ehw-feature .ehw-text-link,
.ehw-supplier-solutions .ehw-text-link,
.bg-dark .ehw-text-link {
	color: inherit;
}

/* =====================================================================
   Navigation: mega panels and plain dropdowns
   ===================================================================== */

/* The base theme emits a description under every submenu item via ::after,
   keyed by page id. For the Systems pages that description is the page title,
   so each item read as its own name twice. Suppress it everywhere and
   reintroduce it only inside a mega panel, where it earns its place. */
.site-header .menu-1 .sub-menu > li::after {
	content: none;
}

/* ---------- plain dropdowns: Systems, More ---------- */

.site-header .menu-1 .ehw-menu--list > .sub-menu {
	grid-template-columns: 1fr;
	min-width: 15rem;
	width: max-content;
	padding: .5rem;
}

.site-header .menu-1 .ehw-menu--list > .sub-menu a {
	padding: .6rem .9rem;
	font-weight: 500;
	white-space: nowrap;
}

/* The base theme prints a per-page background image for its own menu design,
   keyed by data-id and unscoped, so it lands on the first item of any
   dropdown. These lists are plain text links. */
.site-header .menu-1 .ehw-menu--list > .sub-menu > li,
.site-header .menu-1 .ehw-menu--list > .sub-menu > li:first-child {
	padding: 0;
	color: inherit;
	background-image: none;
}

/* The wipe panel is drawn on this pseudo-element — see the block near the top
   of the file. Nothing to suppress here any more. */

/* ---------- mega panels: Windows, Doors, Architectural Glazing ---------- */

/* .menu > li is set position:relative earlier in this file, so these need the
   same weight to win: the panel must resolve against the fixed header to span
   the full width rather than hang off its menu item. */
.site-header .menu-1 .menu > li.ehw-menu--mega {
	position: static;
}

.site-header .menu-1 .menu > li.ehw-menu--mega > .sub-menu {
	position: absolute;
	top: 100%;
	/* Align the right edge to the container, not the viewport gutter: the
	   header's container is narrower than the viewport, so gutter-alignment
	   pushed the panel off the page grid. */
	right: calc((100% - var(--ehw-container)) / 2);
	left: auto;
	display: block;
	/* Wide enough to span the whole nav, so the cursor can drop straight down
	   from any of the three triggers. At 46rem the panel started right of the
	   Windows link on a 16in display and the menu closed before the pointer
	   reached it. At 48rem the two columns came to 193px, one pixel more than
	   "Flush Casement Windows" needs, so it wrapped; 52rem gives them 225px
	   and leaves room for a longer label later. */
	width: min(52rem, var(--ehw-container));
	min-width: 0;
	max-height: none;
	/* Keeps the feature image in a sane proportion on the four-item panels. */
	min-height: 13rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	padding-left: calc(clamp(1.5rem, 2.5vw, 2rem) + 14rem + clamp(1.5rem, 2.5vw, 2.25rem));
	transform: translate(0, .6rem);
	border-top: 1px solid var(--ehw-hair);
	box-shadow: 0 24px 48px rgba(var(--ehw-ink-rgb), .14);
	columns: 2;
	column-gap: clamp(2rem, 4vw, 4rem);
}

.site-header .menu-1 .menu > li.ehw-menu--mega:hover > .sub-menu,
.site-header .menu-1 .menu > li.ehw-menu--mega:focus-within > .sub-menu {
	transform: translate(0, 0);
}

/* Feature image pinned to the panel's left edge; the links column past it. */
.site-header .menu-1 .menu > li.ehw-menu--mega > .sub-menu::before {
	position: absolute;
	top: clamp(1.5rem, 2.5vw, 2rem);
	bottom: clamp(1.5rem, 2.5vw, 2rem);
	left: clamp(1.5rem, 2.5vw, 2rem);
	width: 14rem;
	content: "";
	background: var(--ehw-mega-image, none) center/cover no-repeat;
	background-color: var(--ehw-mist);
}

.site-header .menu-1 .menu > li.ehw-menu--mega > .sub-menu > li {
	break-inside: avoid;
	margin: 0;
}

.site-header .menu-1 .menu > li.ehw-menu--mega > .sub-menu a {
	display: block;
	padding: .7rem 0;
	border-radius: 0;
	border-bottom: 1px solid var(--ehw-hair);
	font-size: .98rem;
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
}

/* Mega links have no horizontal padding of their own, so the panel is pulled
   out a little either side to read as a box around the label rather than a
   highlight clamped to the text. */
.site-header .menu-1 .menu > li.ehw-menu--mega > .sub-menu a::before {
	inset: 0 -.7rem;
}

@media (max-width: 1199px) {

	.site-header .menu-1 .menu > li.ehw-menu--mega > .sub-menu {
		display: none;
	}

}

/* =====================================================================
   Framed information grids

   These are the text-led grids that deliberately use rules between columns.
   Give them a matching outer frame, while retaining the more open treatment
   for imagery, process lists and the system performance highlights.
   ===================================================================== */

.ehw-system-list {
	border-inline: 1px solid var(--ehw-grey);
}

.ehw-supplier-index-grid {
	box-sizing: border-box;
	padding: 1px;
}

.ehw-supplier-facts {
	border: 0;
}

.ehw-supplier-facts__grid {
	border: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-supplier-solutions__grid {
	border-inline: 1px solid rgba(255, 255, 255, .3);
}

.ehw-solution-considerations__grid {
	border: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-solution-considerations article:first-child,
.ehw-solution-considerations article:last-child {
	padding-inline: clamp(1.25rem, 3vw, 3rem);
}

.ehw-solution-related__grid {
	border-inline: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-solution-related__grid a:first-child,
.ehw-solution-related__grid a:last-child {
	padding-inline: clamp(1rem, 2vw, 2rem);
}

@media (max-width: 600px) {

	.ehw-solution-considerations article,
	.ehw-solution-considerations article:first-child,
	.ehw-solution-considerations article:last-child {
		padding-inline: clamp(1.25rem, 5vw, 2rem);
	}

	.ehw-solution-considerations article:last-child {
		border-bottom: 0;
	}

	.ehw-solution-related__grid a,
	.ehw-solution-related__grid a:first-child,
	.ehw-solution-related__grid a:last-child {
		padding-inline: clamp(1.25rem, 5vw, 2rem);
	}

}

/* =====================================================================
   Base-theme image treatments

   The base theme reveals section images with a "draw square" wipe and clips
   them into a quarter-circle (or triangle) above 568px. Both were built for
   the site the base theme came from and read as decoration here, where every
   other image is a plain rectangle.

   Scoped away from .inner.image-behind, which is a full-bleed background
   layer behind card content, not a picture in its own right.
   ===================================================================== */

.section-image-text .image,
.section-grid .inner:not(.image-behind) .image {
	padding-top: 0;
	aspect-ratio: 4 / 3;
	clip-path: none;
}

/* The white cover and the wipe overlay. */
.section-image-text .image::before,
.section-image-text .image::after,
.section-image-text .image.image-loaded::before,
.section-image-text .image.image-loaded::after {
	content: none;
	animation: none;
	background: transparent;
}

@media (min-width: 568px) {

	.section-image-text .image,
	.section-image-text.image-triangle .image {
		clip-path: none;
	}

}

/* The 1px probe the base theme uses to detect decode. Keep it out of layout. */
.section-image-text .image > img {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* =====================================================================
   Scroll reveal

   The base theme has its own .animate system and it still runs for base
   sections. The child does not reuse it: the base staggers with chained
   sibling selectors up to 13 deep (specificity 0,13,0), which no practical
   nth-child rule can override. A separate class avoids the fight entirely
   and leaves the base system untouched.

   Hidden state is gated on body.intersection-observer, which is only added
   when the browser supports it — so without JS everything stays visible.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.ehw-reveal {
		transition: opacity var(--ehw-move) var(--ehw-ease),
		            transform var(--ehw-move) var(--ehw-ease);
	}

	.ehw-reveal-ready .ehw-reveal:not(.is-revealed) {
		opacity: 0;
		transform: translateY(var(--ehw-rise));
	}

	/* Media fades without moving. A full-bleed photograph that slides pulls
	   the eye to the movement rather than the picture. */
	.ehw-reveal-ready .ehw-reveal--fade:not(.is-revealed) {
		transform: none;
	}

	/* Columns: a sweep across the row. Capped at six, past which the last
	   item arrives too late to feel connected to the first. */
	.ehw-stagger > *:nth-child(2)  { transition-delay: calc(var(--ehw-step) * 1); }
	.ehw-stagger > *:nth-child(3)  { transition-delay: calc(var(--ehw-step) * 2); }
	.ehw-stagger > *:nth-child(4)  { transition-delay: calc(var(--ehw-step) * 3); }
	.ehw-stagger > *:nth-child(5)  { transition-delay: calc(var(--ehw-step) * 4); }
	.ehw-stagger > *:nth-child(n+6){ transition-delay: calc(var(--ehw-step) * 5); }

	/* Rows: tighter, because these read as one continuous block. */
	.ehw-stagger--rows > *:nth-child(2) { transition-delay: calc(var(--ehw-step-row) * 1); }
	.ehw-stagger--rows > *:nth-child(3) { transition-delay: calc(var(--ehw-step-row) * 2); }
	.ehw-stagger--rows > *:nth-child(4) { transition-delay: calc(var(--ehw-step-row) * 3); }
	.ehw-stagger--rows > *:nth-child(5) { transition-delay: calc(var(--ehw-step-row) * 4); }
	.ehw-stagger--rows > *:nth-child(6) { transition-delay: calc(var(--ehw-step-row) * 5); }
	.ehw-stagger--rows > *:nth-child(7) { transition-delay: calc(var(--ehw-step-row) * 6); }
	.ehw-stagger--rows > *:nth-child(n+8) { transition-delay: calc(var(--ehw-step-row) * 7); }

	/* On a phone a grid becomes a vertical queue, so a 150ms sweep just makes
	   the last card late. Shorter travel, no stagger. */
	@media (max-width: 900px) {

		:root {
			--ehw-rise: 12px;
		}

		.ehw-stagger > *,
		.ehw-stagger--rows > * {
			transition-delay: 0ms;
		}

	}

}

/* The CTA block sits directly above the footer on most pages and inherited the
   same ink ground, so the base theme's fixed-footer reveal made the two read
   as one continuous block as the page scrolled up. Sage separates them. */
.section-cta-block.bg-dark {
	color: var(--ehw-white);
	background: var(--ehw-sage);
}

.section-cta-block.bg-dark .pre-heading {
	color: var(--ehw-white);
	opacity: .72;
}

.section-cta-block.bg-dark .btn {
	color: var(--ehw-sage);
	background: var(--ehw-white);
}

.section-cta-block.bg-dark .btn:hover,
.section-cta-block.bg-dark .btn:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

/* =====================================================================
   Hero entry

   CSS animation rather than the .ehw-reveal observer, for two reasons: a
   hero is above the fold so there is nothing to wait for, and the carousel's
   inactive slides are visibility:hidden, so they would never intersect and
   their content would be stuck invisible when the slide came round.

   animation-fill-mode: both means a slide that is not animating still
   renders normally, so there is no way for content to be left hidden.
   ===================================================================== */

@keyframes ehw-hero-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

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

@media (prefers-reduced-motion: no-preference) {

	.ehw-hero__slide.is-active .ehw-hero__inner > *,
	.ehw-solution-hero__inner > *,
	.oba-supplier-hero__grid > *,
	.ehw-systems-hero > .container > *,
	.oba-catalogue-hero > .container > *,
	.oba-system-detail__hero > .container > *,
	.section-video-hero__content > * {
		animation: ehw-hero-in var(--ehw-move) var(--ehw-ease) both;
	}

	/* Sequence the parts: eyebrow, headline, copy, then the actions. */
	.ehw-hero__slide.is-active .ehw-hero__inner > *:nth-child(1),
	.ehw-solution-hero__inner > *:nth-child(1),
	.oba-supplier-hero__grid > *:nth-child(1),
	.ehw-systems-hero > .container > *:nth-child(1),
	.oba-catalogue-hero > .container > *:nth-child(1),
	.oba-system-detail__hero > .container > *:nth-child(1),
	.section-video-hero__content > *:nth-child(1) {
		animation-delay: 150ms;
	}

	.ehw-hero__slide.is-active .ehw-hero__inner > *:nth-child(2),
	.ehw-solution-hero__inner > *:nth-child(2),
	.oba-supplier-hero__grid > *:nth-child(2),
	.ehw-systems-hero > .container > *:nth-child(2),
	.oba-catalogue-hero > .container > *:nth-child(2),
	.oba-system-detail__hero > .container > *:nth-child(2),
	.section-video-hero__content > *:nth-child(2) {
		animation-delay: 270ms;
	}

	.ehw-hero__slide.is-active .ehw-hero__inner > *:nth-child(3),
	.ehw-solution-hero__inner > *:nth-child(3),
	.oba-supplier-hero__grid > *:nth-child(3),
	.ehw-systems-hero > .container > *:nth-child(3),
	.oba-catalogue-hero > .container > *:nth-child(3),
	.oba-system-detail__hero > .container > *:nth-child(3),
	.section-video-hero__content > *:nth-child(3) {
		animation-delay: 390ms;
	}

	.ehw-hero__slide.is-active .ehw-hero__inner > *:nth-child(n+4),
	.ehw-solution-hero__inner > *:nth-child(n+4),
	.oba-supplier-hero__grid > *:nth-child(n+4),
	.ehw-systems-hero > .container > *:nth-child(n+4),
	.oba-catalogue-hero > .container > *:nth-child(n+4),
	.oba-system-detail__hero > .container > *:nth-child(n+4),
	.section-video-hero__content > *:nth-child(n+4) {
		animation-delay: 510ms;
	}

	/* The carousel's own dot controls should not restage on every rotation. */
	.ehw-hero__controls,
	.ehw-hero__controls * {
		animation: none;
	}

	@media (max-width: 900px) {

		.ehw-hero__slide.is-active .ehw-hero__inner > *,
		.ehw-solution-hero__inner > *,
		.oba-supplier-hero__grid > *,
		.ehw-systems-hero > .container > *,
		.oba-catalogue-hero > .container > *,
		.oba-system-detail__hero > .container > *,
		.section-video-hero__content > * {
			animation-duration: .55s;
		}

	}

}

/* =====================================================================
   Mobile navigation panel
   ===================================================================== */

/* The base theme hides the last item of every list in the mobile panel
   (.site-header-menu li:last-child { display: none }), which dropped Contact
   Us from the top level and the last child of every group — uPVC
   Alternatives, French Doors, Rooflights, VELFAC and Resources. */
.site-header-menu li:last-child {
	display: list-item;
}

/* The base theme prints a description and a background image per page, keyed
   by page id and unscoped, for its own menu design. The desktop nav already
   suppresses these; the mobile panel is a different container, so the same
   rules were landing there — page titles printed twice ("Zyle FensterZyle
   Fenster") and thin image bands behind the first item of each group. */
.site-header-menu .sub-menu > li::after,
.site-header-menu .sub-menu > li::before,
.site-header-menu .sub-menu a::before,
.site-header-menu .sub-menu a::after {
	display: none;
	content: none;
}

/* The base theme prints these per page as an inline <style> in the head,
   which renders after this stylesheet. Its selector
   `.sub-menu > li:first-child[data-id="645"]` scores (0,3,1), so an equally
   weighted rule here loses on source order — hence the extra .inner. */
.site-header-menu .inner .sub-menu > li,
.site-header-menu .inner .sub-menu > li:first-child {
	padding: 0;
	color: inherit;
	background-image: none;
}

.site-header-menu .inner .sub-menu > li > a {
	background-image: none;
}

@media (max-width: 1199px) {

	.site-header-menu .inner {
		width: min(100%, 30rem);
		padding-right: 7.5vw;
		padding-bottom: 4rem;
		background: var(--ehw-ink);
		overflow-y: auto;
	}

	.site-header-menu .menu > li {
		position: relative;
		padding-right: 3rem;
	}

	.site-header-menu .menu > li + li {
		margin-top: .1em;
	}

	/* Parent rows keep their link and gain a separate toggle, so tapping the
	   label still goes to the landing page. */
	.ehw-subnav-enhanced .site-header-menu .sub-menu {
		display: none !important;
		margin: .5rem 0 1rem .9rem;
	}

	.ehw-subnav-enhanced .site-header-menu .menu-item-has-children.is-open > .sub-menu {
		display: block !important;
	}

	.ehw-subnav-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		color: inherit;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.ehw-subnav-toggle::before,
	.ehw-subnav-toggle::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		content: "";
		background: currentColor;
		transform: translate(-50%, -50%);
		transition: transform .25s var(--ehw-ease), opacity .25s var(--ehw-ease);
	}

	.ehw-subnav-toggle::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.is-open:not(.is-closing) > .ehw-subnav-toggle::after {
		transform: translate(-50%, -50%) rotate(0);
		opacity: 0;
	}

	.ehw-subnav-toggle:focus-visible {
		outline: 2px solid var(--ehw-white);
		outline-offset: -4px;
	}

	.site-header-menu .sub-menu a {
		display: block;
		padding: .15em 0;
	}

	.ehw-menu-home a {
		font-weight: inherit;
	}

	/* Match the desktop nav's outlined Contact Us, at a size that suits the
	   larger mobile type. */
	.site-header-menu .menu > li:last-child {
		margin-top: 1.4rem;
		padding-right: 0;
	}

	.site-header-menu .menu > li:last-child > a {
		display: inline-block;
		padding: .7rem 1.5rem;
		border: 1px solid currentColor;
		border-radius: 2px;
		font-size: 1.15rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.site-header-menu .menu > li:last-child > a:hover,
	.site-header-menu .menu > li:last-child > a:focus-visible {
		color: var(--ehw-ink);
		background: var(--ehw-white);
		border-color: var(--ehw-white);
	}

}

/* The footer sat on the base theme's max(8vw, 80px), which is a lot of air
   above a four-column list. The copyright bar is unchanged. */
.footer-main {
	padding: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(2rem, 3vw, 3rem);
}

/* =====================================================================
   Case studies

   Project photography is inserted as a native [gallery] so the client can
   reorder or remove images from the editor. WordPress ships almost no
   layout for it, so give it the same grid the system pages use.
   ===================================================================== */

.site-main .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 2.5rem 0 0;
}

.site-main .gallery .gallery-item {
	margin: 0;
	width: auto;
	float: none;
}

.site-main .gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
}

.site-main .gallery .gallery-caption {
	margin: .5rem 0 0;
	font-size: .85rem;
	color: var(--ehw-ink);
	opacity: .7;
}

@media (max-width: 900px) {

	.site-main .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 600px) {

	.site-main .gallery {
		grid-template-columns: 1fr;
	}

}

/* .section-image is the post and case-study hero: a scrimmed photograph that
   the base theme expected to inherit white from body. The .site-content
   ground added in Phase 2 made its heading and copy ink on a picture — only
   the eyebrow stayed white because it carries .text-primary. */
.section-image {
	color: var(--ehw-white);
}

.section-image h1,
.section-image h2,
.section-image p,
.section-image a:not(.btn) {
	color: inherit;
}

/* .entry-content is capped at 44em for a reading measure. Keep that for the
   prose but let the project photography use the full column — the pictures
   are the point of a case study. */
body.single-case_study .entry-content {
	max-width: none;
}

body.single-case_study .entry-content > :is(p, h2, h3, h4, ul, ol, blockquote) {
	max-width: 44em;
}

/* The single template's "Jump To:" sidebar is empty on a case study, so the
   copy sits in a 75% column with a hole beside it. */
body.single-case_study .section-entry-content .col-25 {
	display: none;
}

body.single-case_study .section-entry-content .col-75 {
	flex-basis: 100%;
	max-width: 100%;
}

/* =====================================================================
   Case studies listing
   ===================================================================== */

/* The base gradient runs on --black to --secondary, both now ink, so the
   listing read as one block with the footer beneath it. */
.section-posts {
	color: var(--ehw-ink);
	background: var(--ehw-mist);
}

.section-posts .post-container .post,
.section-posts .post-container.case_study .post {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.section-posts .post-container.case_study .post-read-more,
.section-posts .post-read-more {
	color: var(--ehw-sage);
}

.section-posts .pre-heading,
.section-posts h1,
.section-posts h2 {
	color: var(--ehw-ink);
}

/* =====================================================================
   Page-builder heroes

   Pages whose first section is an image, hero or video hero keep the
   header transparent, the same as the bespoke solution and supplier
   templates. The base theme flags the opposite case with .no-hero, so
   :not(.no-hero) is the reliable test for "this page opens with a hero".
   ===================================================================== */

body:not(.no-hero):not(.scrolled-down) .site-header {
	color: var(--ehw-white);
	background: transparent;
	box-shadow: none;
}

body:not(.no-hero):not(.scrolled-down) .site-header .logo__image--white {
	opacity: 1;
}

body:not(.no-hero):not(.scrolled-down) .site-header .logo__image--colour {
	opacity: 0;
}

/* The base runs these at the full viewport height. Bring them onto the same
   proportion as the solution heroes so the page families match. */
.section-video-hero,
.section-video-hero.full-height {
	min-height: min(760px, 82vh);
}

/* =====================================================================
   Gallery lightbox
   ===================================================================== */

.ehw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(var(--ehw-ink-rgb), .94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ehw-ease), visibility .3s;
}

.ehw-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ehw-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.ehw-lightbox__img {
	max-width: min(1400px, 100%);
	max-height: 78vh;
	object-fit: contain;
	background: rgba(255, 255, 255, .04);
}

.ehw-lightbox__caption {
	max-width: 60ch;
	color: var(--ehw-white);
	font-size: .95rem;
	text-align: center;
	opacity: .8;
}

.ehw-lightbox__count {
	font-family: inherit;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ehw-white);
	opacity: .6;
}

.ehw-lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	color: var(--ehw-white);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .2s var(--ehw-ease);
}

.ehw-lightbox button:hover,
.ehw-lightbox button:focus-visible {
	background: rgba(255, 255, 255, .22);
}

.ehw-lightbox button:focus-visible {
	outline: 2px solid var(--ehw-white);
	outline-offset: 2px;
}

.ehw-lightbox__close {
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
}

.ehw-lightbox__prev {
	top: 50%;
	left: clamp(.5rem, 2vw, 2rem);
	transform: translateY(-50%);
}

.ehw-lightbox__next {
	top: 50%;
	right: clamp(.5rem, 2vw, 2rem);
	transform: translateY(-50%);
}

.ehw-lightbox svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: square;
}

.ehw-lightbox[data-single="true"] .ehw-lightbox__prev,
.ehw-lightbox[data-single="true"] .ehw-lightbox__next,
.ehw-lightbox[data-single="true"] .ehw-lightbox__count {
	display: none;
}

body.ehw-lightbox-open {
	overflow: hidden;
}

@media (max-width: 600px) {

	.ehw-lightbox__prev,
	.ehw-lightbox__next {
		top: auto;
		bottom: clamp(.5rem, 2vw, 2rem);
		transform: none;
	}

	.ehw-lightbox__img {
		max-height: 62vh;
	}

}

/* =====================================================================
   Hero consistency

   Heights ran at min(820px,86vh), 58vh, 76vh, clamp(620px,82vh,820px) and
   min(760px,82vh) depending on the template. Titles were capped narrower
   than the copy beneath them — 11em on the page-builder hero (352px at its
   rendered size) against 38em of copy, and 15ch on the solution heroes.
   ===================================================================== */

.ehw-hero,
.ehw-solution-hero,
.oba-supplier-hero,
.ehw-systems-hero,
.oba-catalogue-hero,
.oba-system-detail__hero,
.section-video-hero,
.section-video-hero.full-height {
	min-height: var(--ehw-hero-h);
}

/* One measure for hero titles and their copy. */
.ehw-hero h1,
.ehw-hero h2,
.ehw-hero__intro,
.ehw-solution-hero h1,
.ehw-solution-hero__content,
.oba-supplier-hero h1,
.oba-supplier-hero__intro,
.ehw-systems-hero h1,
.oba-catalogue-hero h1,
.oba-system-detail__hero h1,
.ehw-systems-hero .container > p:last-child,
.oba-catalogue-hero .container > p:last-child,
.oba-system-detail__hero .container > p:last-child,
.section-video-hero__content,
.section-video-hero__content h1,
.section-video-hero__content h2,
.section-video-hero__copy {
	max-width: var(--ehw-hero-measure);
}

/* The page-builder hero marks its title .heading-lg, which the type scale
   maps to the h2 size — so it rendered at 32px where every other hero title
   is 48px. */
.section-video-hero__content h1.heading-lg {
	font-size: var(--ehw-h1);
	line-height: var(--ehw-h1-lh);
}

/* The page-builder hero labels its eyebrow .pre-heading, a base-theme class
   at 17px/400 with no tracking, where every bespoke hero uses .ehw-eyebrow
   at .78rem/700 with .12em and a short rule beneath. */
.section-video-hero__content .pre-heading {
	margin-bottom: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.section-video-hero__content .pre-heading::after {
	display: block;
	width: 20%;
	min-width: 4rem;
	height: 1px;
	margin: 12.5px 0;
	content: "";
	background: currentColor;
}

/* Hero secondary action: match the outlined Contact Us button in the nav. */
.ehw-actions .ehw-text-link,
.ehw-solution-hero .ehw-text-link,
.section-video-hero__content .ehw-text-link {
	display: inline-flex;
	align-items: center;
	/* inline-flex collapses the whitespace before the template's arrow span. */
	gap: .45rem;
	margin-top: 0;
	padding: .95rem 1.5rem;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	text-underline-offset: 0;
	transition: color .2s var(--ehw-ease), background-color .2s var(--ehw-ease), border-color .2s var(--ehw-ease);
}

.ehw-actions .ehw-text-link:hover,
.ehw-actions .ehw-text-link:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

/* --------------------------------------------------------------------------
   Accreditations
   Two presentations of one list. The footer row is reversed white marks under
   the logo; the grid is the full-colour originals, for use on any page.
   -------------------------------------------------------------------------- */

.ehw-accreditation-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem .75rem;
	max-width: 17rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}

.ehw-accreditation-row li {
	margin: 0;
}

/* Each mark is pre-composed on a 2:1 canvas at a matched ink area, so the cell
   only has to hold that ratio for the four to sit on one grid. A square canvas
   left the wide FENSA wordmark floating in a lot of vertical air. */
.ehw-accreditation-row a,
.site-footer .footer-main .ehw-accreditation-row a {
	display: block;
	aspect-ratio: 2 / 1;
	border: 0;
	opacity: 1;
	line-height: 0;
	transition: opacity .25s var(--ehw-ease);
}

.ehw-accreditation-row a:hover,
.ehw-accreditation-row a:focus-visible,
.site-footer .footer-main .ehw-accreditation-row a:hover,
.site-footer .footer-main .ehw-accreditation-row a:focus-visible {
	/* Full strength at rest, softened on hover — the reverse of the base
	   theme's footer links, and no underline. */
	opacity: .6;
	border-bottom-color: transparent;
}

.ehw-accreditation-row img {
	width: 100%;
	height: auto;
}

.ehw-accreditations {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-accreditations__intro {
	max-width: 46rem;
	margin-top: 1rem;
}

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

.ehw-accreditations__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: 2.5rem;
	/* One hairline between cells, drawn by the gap over a ruled ground. */
	background: rgba(var(--ehw-ink-rgb), .18);
	border: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-accreditation-card {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: .75rem;
	padding: 1.75rem clamp(1.1rem, 1.6vw, 1.6rem);
	color: inherit;
	background: var(--ehw-white);
	text-decoration: none;
	transition: background-color .25s var(--ehw-ease);
}

.ehw-accreditation-card:hover,
.ehw-accreditation-card:focus-visible {
	background: var(--ehw-mist);
}

.ehw-accreditation-card__mark {
	display: flex;
	align-items: center;
	/* A fixed box keeps the four logos on one line whatever their aspect. */
	height: 68px;
	margin-bottom: .5rem;
}

.ehw-accreditation-card__mark img {
	max-height: 100%;
	max-width: 82%;
	width: auto;
	object-fit: contain;
	object-position: left center;
}

.ehw-accreditation-card strong {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.4;
}

.ehw-accreditation-card__body {
	font-size: .92rem;
	line-height: 1.6;
	color: rgba(var(--ehw-ink-rgb), .78);
}

.ehw-accreditation-card em {
	align-self: end;
	font-size: .85rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ehw-sage);
}

@media (max-width: 900px) {
	.ehw-accreditations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ehw-accreditations__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ehw-accreditation-card__mark {
		height: 56px;
	}

	.ehw-accreditation-row {
		max-width: 15rem;
	}
}

/* --------------------------------------------------------------------------
   Case studies built with the section editor
   -------------------------------------------------------------------------- */

/* Broadcast / press band. Dark ground so it reads as a billing rather than
   another content section, and used on the home page as well. */
.ehw-broadcast {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-broadcast__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* No forced crop: these bands carry whichever frame suits the story, and a
   portrait photograph sits perfectly well beside the copy. */
.ehw-broadcast__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 32rem;
	height: auto;
}

.ehw-broadcast__body .ehw-eyebrow {
	color: var(--ehw-white);
	opacity: .7;
}

.ehw-broadcast h2 {
	margin-bottom: 1.25rem;
	color: var(--ehw-white);
}

.ehw-broadcast__content {
	max-width: 34rem;
	margin-bottom: 2rem;
}

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

/* Performance figures. */
.ehw-case-performance {
	color: var(--ehw-ink);
	background: var(--ehw-mist);
}

.ehw-case-performance__intro {
	max-width: 44rem;
	margin-top: 1rem;
}

.ehw-case-performance__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 2.5rem 0 0;
	background: rgba(var(--ehw-ink-rgb), .18);
	border: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-case-performance__grid > div {
	display: flex;
	/* Caption above the figure, so a column of figures lines up on its own
	   baseline however long the captions run. */
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 10rem;
	padding: 1.6rem clamp(1.1rem, 1.6vw, 1.6rem);
	background: var(--ehw-mist);
}

.ehw-case-performance__grid dt {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(var(--ehw-ink-rgb), .62);
}

.ehw-case-performance__grid dd {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--ehw-track-display);
}

/* Project credits. */
.ehw-case-credits {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-case-credits__intro {
	max-width: 44rem;
	margin-top: 1rem;
}

.ehw-case-credits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(2rem, 5vw, 4.5rem);
	margin: 2.5rem 0 0;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-case-credits__grid > div {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: 1rem 1.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-case-credits__grid dt {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.7;
	text-transform: uppercase;
	color: rgba(var(--ehw-ink-rgb), .62);
}

.ehw-case-credits__grid dd {
	margin: 0;
	line-height: 1.6;
}

.ehw-case-credits__grid a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .3);
	transition: color .2s var(--ehw-ease), border-color .2s var(--ehw-ease);
}

.ehw-case-credits__grid a:hover,
.ehw-case-credits__grid a:focus-visible {
	color: var(--ehw-sage);
	border-bottom-color: var(--ehw-sage);
}

@media (max-width: 900px) {
	.ehw-broadcast__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ehw-case-performance__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ehw-case-credits__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.ehw-case-performance__grid > div {
		/* Captions wrap to different depths at this width, so let the figure
		   follow its own caption rather than drop to the cell floor. */
		justify-content: flex-start;
		min-height: 0;
		gap: .5rem;
	}

	.ehw-case-credits__grid > div {
		grid-template-columns: minmax(0, 1fr);
		gap: .35rem;
	}
}

/* --------------------------------------------------------------------------
   Case studies index: the featured project
   A lead card rather than a full broadcast band. The band's own proportions
   belong on the case study, where it follows a hero.
   -------------------------------------------------------------------------- */

.ehw-case-index {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

.ehw-case-featured {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-case-featured__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ehw-case-featured__media {
	display: block;
	border: 0;
	line-height: 0;
}

.ehw-case-featured__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.ehw-case-featured__body .ehw-eyebrow {
	color: var(--ehw-white);
	opacity: .7;
}

.ehw-case-featured h2 {
	margin-bottom: 1rem;
	color: var(--ehw-white);
	font-size: var(--ehw-h2);
	line-height: var(--ehw-h2-lh);
}

.ehw-case-featured h2 a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.ehw-case-featured h2 a:hover,
.ehw-case-featured h2 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.ehw-case-featured__body p {
	max-width: 34rem;
	margin-bottom: 1.75rem;
}

@media (max-width: 900px) {
	.ehw-case-featured__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The "as seen on" lockup: eyebrow beside the broadcaster's mark. */
.ehw-broadcast-badge {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 1.25rem;
	line-height: 1;
}

.ehw-broadcast-badge .ehw-eyebrow {
	margin: 0;
	color: var(--ehw-white);
	opacity: .7;
}

.ehw-broadcast-badge img {
	display: block;
	width: auto;
	/* Sized against the eyebrow's cap height rather than a round number, so
	   the mark reads as part of the line. */
	height: 2.1rem;
}

/* --------------------------------------------------------------------------
   Buttons: one behaviour everywhere

   A button is a filled shape and an outlined shape of the same colour, and
   hover swaps between them. The border always matches the fill, so no state
   can leave an invisible box or text the colour of its own ground.

   .ehw-button--light had no hover of its own and inherited the dark variant's,
   which sets ink text on a transparent background. Every light button sits on
   a dark ground, so on hover the label and the fill both disappeared and left
   an empty outline.
   -------------------------------------------------------------------------- */

.ehw-button--light:hover,
.ehw-button--light:focus-visible {
	color: var(--ehw-white);
	background: transparent;
	border-color: var(--ehw-white);
}

/* The outlined hero action had a hover only inside .ehw-actions, so the same
   button on a solution hero and a More page hero had none at all. */
.ehw-solution-hero .ehw-text-link:hover,
.ehw-solution-hero .ehw-text-link:focus-visible,
.section-video-hero__content .ehw-text-link:hover,
.section-video-hero__content .ehw-text-link:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

/* The base .btn carries no border, so it needs one before it can invert. */
.section-cta-block.bg-dark .btn {
	border: 1px solid var(--ehw-white);
}

.section-cta-block.bg-dark .btn:hover,
.section-cta-block.bg-dark .btn:focus-visible {
	color: var(--ehw-white);
	background: transparent;
	border-color: var(--ehw-white);
}

/* The enquiry panel's own submit already inverts correctly against its sage
   ground, so it is left alone. Its sibling .btn had no hover at all — the base
   theme's was the opacity fade removed above — so give it the same one. */
.oba-project-enquiry .btn:hover,
.oba-project-enquiry .btn:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

/* --------------------------------------------------------------------------
   Supplier technical downloads
   -------------------------------------------------------------------------- */

.ehw-downloads {
	color: var(--ehw-ink);
	background: var(--ehw-mist);
}

.ehw-downloads__intro {
	max-width: 44rem;
	margin: 1rem 0 0;
}

.ehw-downloads__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 2.5rem;
	background: rgba(var(--ehw-ink-rgb), .18);
	border: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-downloads__group {
	padding: 1.75rem clamp(1.1rem, 1.6vw, 1.75rem);
	background: var(--ehw-mist);
}

.ehw-downloads__group header {
	padding-bottom: 1rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-downloads__heading {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 500;
}

/* The count sits with the heading rather than after each list, so the weight
   of a format is readable before the list is scanned. */
.ehw-downloads__heading span {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(var(--ehw-ink-rgb), .55);
}

.ehw-downloads__note {
	display: block;
	margin: .35rem 0 0;
	font-size: .9rem;
	color: rgba(var(--ehw-ink-rgb), .7);
}

.ehw-downloads__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ehw-downloads__group li + li {
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .12);
}

.ehw-download {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: .8rem 0;
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color .18s var(--ehw-ease);
}

.ehw-download:hover .ehw-download__name,
.ehw-download:focus-visible .ehw-download__name {
	color: var(--ehw-sage);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.ehw-download__name {
	font-size: .95rem;
	line-height: 1.5;
}

.ehw-download__meta {
	flex: none;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
	color: rgba(var(--ehw-ink-rgb), .55);
}

.ehw-download.is-loading {
	opacity: .5;
	pointer-events: none;
}

/* ---------- the gate ---------- */

.ehw-gate {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--ehw-page-gutter);
}

/* A display value on the element beats the hidden attribute's own
   display: none, so the dialog has to opt back out explicitly. */
.ehw-gate[hidden] {
	display: none;
}

.ehw-gate__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--ehw-ink-rgb), .62);
}

.ehw-gate__panel {
	position: relative;
	width: min(28rem, 100%);
	max-height: 100%;
	overflow-y: auto;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--ehw-ink);
	background: var(--ehw-white);
	box-shadow: 0 30px 60px rgba(var(--ehw-ink-rgb), .3);
}

.ehw-gate__close {
	position: absolute;
	top: .5rem;
	right: .75rem;
	padding: .25rem .5rem;
	color: rgba(var(--ehw-ink-rgb), .55);
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.ehw-gate__panel h2 {
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	line-height: 1.3;
}

.ehw-gate__note {
	margin: 0 0 1.5rem;
	font-size: .92rem;
	color: rgba(var(--ehw-ink-rgb), .7);
}

.ehw-gate__form label {
	display: block;
	margin-bottom: 1rem;
}

.ehw-gate__form label span {
	display: block;
	margin-bottom: .35rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.ehw-gate__form input {
	width: 100%;
	padding: .75rem .9rem;
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border: 1px solid rgba(var(--ehw-ink-rgb), .3);
	border-radius: 2px;
	font: inherit;
}

.ehw-gate__form input:focus-visible {
	outline: 2px solid var(--ehw-sage);
	outline-offset: 1px;
}

.ehw-gate__consent {
	margin: 0 0 1.25rem;
	font-size: .82rem;
	line-height: 1.6;
	color: rgba(var(--ehw-ink-rgb), .62);
}

.ehw-gate__form .ehw-button {
	width: 100%;
}

.ehw-gate__error {
	margin: .9rem 0 0;
	font-size: .88rem;
	color: #a1251b;
}

.ehw-downloads__groups--single {
	grid-template-columns: minmax(0, 1fr);
}

/* Large sets: one column of collapsible groups. */
.ehw-downloads__groups--accordion {
	grid-template-columns: minmax(0, 1fr);
}

.ehw-downloads__groups--accordion .ehw-downloads__group {
	padding: 0;
}

.ehw-downloads__group summary {
	position: relative;
	display: block;
	padding: 1.35rem 3.5rem 1.35rem clamp(1.1rem, 1.6vw, 1.75rem);
	list-style: none;
	cursor: pointer;
	transition: background-color .2s var(--ehw-ease);
}

.ehw-downloads__group summary::-webkit-details-marker {
	display: none;
}

.ehw-downloads__group summary:hover,
.ehw-downloads__group summary:focus-visible {
	background: rgba(var(--ehw-ink-rgb), .04);
}

/* A drawn plus that turns to a minus, square-ended to match the site. */
.ehw-downloads__group summary::before,
.ehw-downloads__group summary::after {
	position: absolute;
	top: 50%;
	right: clamp(1.1rem, 1.6vw, 1.75rem);
	width: 14px;
	height: 1.5px;
	content: "";
	background: currentColor;
	transition: transform .25s var(--ehw-ease);
}

.ehw-downloads__group summary::after {
	transform: rotate(90deg);
}

.ehw-downloads__group[open]:not(.is-closing) summary::after {
	transform: rotate(0deg);
}

.ehw-downloads__group summary .ehw-downloads__heading {
	font-size: 1.05rem;
	font-weight: 500;
}

.ehw-downloads__groups--accordion .ehw-downloads__group ul {
	padding: 0 clamp(1.1rem, 1.6vw, 1.75rem) 1.1rem;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .12);
}

@media (prefers-reduced-motion: reduce) {
	.ehw-downloads__group summary::after {
		transition: none;
	}
}

@media (max-width: 900px) {
	.ehw-downloads__groups {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   System colours and finishes
   Rendered into the base theme's finishes slot, which is a 900px prose column
   with its own heading. Where the component is present, the column opens to
   the full container and the base heading steps aside for the component's.
   -------------------------------------------------------------------------- */

.oba-system-finishes .oba-system-prose:has(.ehw-finishes) {
	max-width: none;
}

.oba-system-finishes .oba-system-prose:has(.ehw-finishes) > h2 {
	display: none;
}

.oba-system-prose > .ehw-finishes {
	margin-top: 0;
}

.ehw-finishes {
	color: var(--ehw-ink);
}

.ehw-finishes__head {
	max-width: 44rem;
}

.ehw-finishes__title {
	margin: 0 0 1rem;
}

.ehw-finishes__intro {
	margin: 0;
}

/* Outside / inside */
.ehw-finishes__sides {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 2.5rem;
	background: rgba(var(--ehw-ink-rgb), .18);
	border: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-finishes__side {
	padding: 1.6rem clamp(1.1rem, 1.6vw, 1.75rem);
	background: var(--ehw-white);
}

.ehw-finishes__side-label {
	margin: 0 0 .75rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ehw-sage);
}

.ehw-finishes__side dl {
	margin: 0;
}

.ehw-finishes__side dl > div {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: .7rem 0;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .12);
}

.ehw-finishes__side dt {
	font-size: .9rem;
	color: rgba(var(--ehw-ink-rgb), .62);
}

.ehw-finishes__side dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
}

/* Swatches */
.ehw-finishes__standard {
	margin-top: 3rem;
}

.ehw-finishes__subhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-bottom: 1.25rem;
}

.ehw-finishes__subhead h3,
.ehw-finishes__subhead-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 500;
}

.ehw-finishes__subhead h3 span {
	margin-left: .35rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(var(--ehw-ink-rgb), .55);
}

.ehw-finishes__subhead p {
	margin: 0;
	font-size: .9rem;
	color: rgba(var(--ehw-ink-rgb), .7);
}

.ehw-finishes__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: 1.25rem 1rem;
}

.ehw-swatch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	width: 100%;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
}

button.ehw-swatch {
	cursor: pointer;
}

.ehw-swatch__chip {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-bottom: .45rem;
	/* A hairline so the whites read against the page. */
	box-shadow: inset 0 0 0 1px rgba(var(--ehw-ink-rgb), .14);
	transition: box-shadow .2s var(--ehw-ease);
}

/* Metallic and pearl cannot be shown flat; a soft sheen signals the effect
   without pretending to be it. */
.ehw-swatch--metallic .ehw-swatch__chip,
.ehw-swatch--pearl .ehw-swatch__chip {
	background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 70%);
}

.ehw-swatch__code {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.ehw-swatch__name {
	font-size: .85rem;
	line-height: 1.35;
	color: rgba(var(--ehw-ink-rgb), .72);
}

.ehw-swatch__note {
	margin-top: .2rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ehw-sage);
}

button.ehw-swatch:hover .ehw-swatch__chip,
button.ehw-swatch:focus-visible .ehw-swatch__chip {
	box-shadow: inset 0 0 0 1px rgba(var(--ehw-ink-rgb), .14), 0 0 0 2px var(--ehw-white), 0 0 0 3px rgba(var(--ehw-ink-rgb), .35);
}

button.ehw-swatch:focus-visible {
	outline: none;
}

/* Selected: a crisp sage ring and a tick, square to match the site. */
.ehw-swatch[aria-pressed="true"] .ehw-swatch__chip {
	box-shadow: inset 0 0 0 1px rgba(var(--ehw-ink-rgb), .14), 0 0 0 2px var(--ehw-white), 0 0 0 4px var(--ehw-sage);
}

.ehw-swatch[aria-pressed="true"] .ehw-swatch__chip::after {
	position: absolute;
	top: .4rem;
	right: .4rem;
	display: grid;
	width: 1.4rem;
	height: 1.4rem;
	place-items: center;
	content: "✓";
	color: var(--ehw-white);
	background: var(--ehw-sage);
	font-size: .8rem;
	line-height: 1;
}

.ehw-swatch.is-unavailable {
	opacity: .45;
	cursor: not-allowed;
}

/* Photography */
.ehw-finishes__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 3rem 0 0;
}

.ehw-finishes__gallery figure {
	margin: 0;
}

.ehw-finishes__gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.ehw-finishes__gallery figcaption {
	margin-top: .75rem;
	font-size: .9rem;
	line-height: 1.55;
	color: rgba(var(--ehw-ink-rgb), .72);
}

.ehw-finishes__gallery figcaption strong {
	display: block;
	font-weight: 600;
	color: var(--ehw-ink);
}

/* Also available */
.ehw-finishes__extras {
	margin-top: 3rem;
}

.ehw-finishes__extras ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(2rem, 5vw, 4.5rem);
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-finishes__extras li {
	display: grid;
	/* Rows sit at the top; otherwise a short item stretches its gaps to match
	   the taller item beside it. */
	align-content: start;
	gap: .35rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-finishes__extras li strong {
	font-weight: 600;
}

.ehw-finishes__extras li > span {
	font-size: .92rem;
	line-height: 1.6;
	color: rgba(var(--ehw-ink-rgb), .75);
}

.ehw-finishes__mini {
	display: flex;
	gap: 1rem;
	margin-top: .5rem;
}

.ehw-finishes__mini .ehw-swatch {
	width: 5.5rem;
}

/* Photographed samples (Lacuna): tall chips, kept at or under their source
   width so they never upscale. */
.ehw-finishes__examples {
	margin-top: 3rem;
}

.ehw-finishes__example-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 9rem));
	gap: 1.25rem 1rem;
}

.ehw-swatch--example .ehw-swatch__chip {
	aspect-ratio: 9 / 20;
	background: var(--ehw-white);
	box-shadow: none;
}

.ehw-swatch--example .ehw-swatch__chip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ehw-swatch--example:hover .ehw-swatch__chip,
.ehw-swatch--example:focus-visible .ehw-swatch__chip {
	box-shadow: 0 0 0 2px var(--ehw-white), 0 0 0 3px rgba(var(--ehw-ink-rgb), .35);
}

.ehw-swatch--example[aria-pressed="true"] .ehw-swatch__chip {
	box-shadow: 0 0 0 2px var(--ehw-white), 0 0 0 4px var(--ehw-sage);
}

.ehw-swatch__detail {
	font-size: .8rem;
	line-height: 1.4;
	color: rgba(var(--ehw-ink-rgb), .6);
}

/* The swatch is a flex box, which would otherwise beat [hidden]. */
.ehw-swatch[hidden] {
	display: none;
}

/* RAL Classic browser */
.ehw-ral {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(var(--ehw-ink-rgb), .18);
}

.ehw-ral__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.ehw-ral__head p {
	max-width: 40rem;
	margin: .4rem 0 0;
	font-size: .9rem;
	color: rgba(var(--ehw-ink-rgb), .7);
}

/* An outlined button on the site's 2px button geometry (BTN-1). */
.ehw-ral__toggle {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .95rem 1.5rem;
	color: var(--ehw-ink);
	background: transparent;
	border: 1px solid var(--ehw-ink);
	border-radius: 2px;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.35;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
}

/* A drawn chevron that turns when the panel opens. */
.ehw-ral__toggle::after {
	width: .45rem;
	height: .45rem;
	content: "";
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s var(--ehw-ease);
}

.ehw-ral__toggle[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

.ehw-ral__toggle:hover,
.ehw-ral__toggle:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

.ehw-ral__toggle:focus-visible {
	outline: 2px solid var(--ehw-sage);
	outline-offset: 2px;
}

.ehw-ral__toggle[hidden],
.ehw-ral__panel[hidden] {
	display: none;
}

.ehw-ral__panel {
	margin-top: 1.5rem;
}

.ehw-ral__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.5rem;
}

.ehw-ral__search {
	flex: 1 1 18rem;
	max-width: 24rem;
	margin: 0;
}

.ehw-ral__search input {
	width: 100%;
	padding: .7rem .9rem;
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border: 1px solid rgba(var(--ehw-ink-rgb), .3);
	border-radius: 2px;
	font: inherit;
}

.ehw-ral__search input:focus-visible {
	outline: 2px solid var(--ehw-sage);
	outline-offset: 1px;
}

.ehw-ral__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

/* Same chips as the system filters, a size down. */
.ehw-ral__filters button {
	padding: .45rem .8rem;
	color: var(--ehw-ink);
	background: transparent;
	border: 1px solid var(--ehw-hair);
	border-radius: 2px;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.ehw-ral__filters button[aria-pressed="true"],
.ehw-ral__filters button:hover,
.ehw-ral__filters button:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border-color: var(--ehw-ink);
}

.ehw-ral__status {
	margin: 1.1rem 0;
	font-size: .82rem;
	color: rgba(var(--ehw-ink-rgb), .62);
}

.ehw-ral__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
	gap: 1rem .85rem;
}

.ehw-ral__grid .ehw-swatch__chip {
	aspect-ratio: 3 / 2;
	margin-bottom: .35rem;
}

.ehw-ral__grid .ehw-swatch__code,
.ehw-ral__grid .ehw-swatch__name {
	font-size: .78rem;
}

.ehw-ral__grid .ehw-swatch__note {
	font-size: .66rem;
}

/* Add to project enquiry */
.ehw-finishes__add {
	margin-top: 3rem;
	padding: 1.5rem clamp(1.1rem, 1.6vw, 1.75rem);
	background: var(--ehw-mist);
}

.ehw-finishes__add-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.ehw-finishes__add-row p {
	max-width: 38rem;
	margin: 0;
	font-size: .95rem;
}

.ehw-finishes__tray {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(var(--ehw-ink-rgb), .14);
}

.ehw-finishes__tray[hidden] {
	display: none;
}

.ehw-finishes__tray-title {
	margin: 0 0 .75rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ehw-sage);
}

.ehw-finishes__tray ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ehw-finishes__tray li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .3rem .3rem .3rem .35rem;
	font-size: .85rem;
	line-height: 1.3;
	background: var(--ehw-white);
	border: 1px solid rgba(var(--ehw-ink-rgb), .16);
}

.ehw-finishes__tray-chip {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(var(--ehw-ink-rgb), .14);
}

.ehw-finishes__tray li button {
	display: grid;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	place-items: center;
	color: var(--ehw-ink);
	background: none;
	border: 0;
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--ehw-ease), background-color .2s var(--ehw-ease);
}

.ehw-finishes__tray li button:hover,
.ehw-finishes__tray li button:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
}

/* The enquiry field the choices were written into, briefly marked. */
.ehw-field-updated {
	animation: ehw-field-updated 2.4s var(--ehw-ease);
}

@keyframes ehw-field-updated {
	0%,
	45% {
		box-shadow: 0 0 0 3px rgba(var(--ehw-sage-rgb), .5);
	}

	100% {
		box-shadow: 0 0 0 3px rgba(var(--ehw-sage-rgb), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ehw-field-updated {
		animation: none;
	}
}

.ehw-finishes__source {
	margin: 1rem 0 0;
	font-size: .78rem;
	color: rgba(var(--ehw-ink-rgb), .5);
}

/* A caveat that belongs with the swatches, not with the source line. */
.ehw-finishes__note {
	margin: 1rem 0 0;
	max-width: 46rem;
	font-size: .84rem;
	color: rgba(var(--ehw-ink-rgb), .68);
}

.ehw-finishes__gallery--pair {
	max-width: 56rem;
}

@media (max-width: 900px) {
	.ehw-finishes__sides,
	.ehw-finishes__extras ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.ehw-finishes__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ehw-finishes__gallery.ehw-finishes__gallery--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
	.ehw-finishes__swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem .75rem;
	}

	.ehw-finishes__gallery,
	.ehw-finishes__gallery.ehw-finishes__gallery--pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.ehw-finishes__gallery img {
		aspect-ratio: 4 / 3;
	}

	.ehw-finishes__example-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem .6rem;
	}

	.ehw-ral__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .9rem .6rem;
	}

	.ehw-ral__search {
		max-width: none;
	}

	.ehw-finishes__add-row .ehw-button {
		width: 100%;
		text-align: center;
	}

	.ehw-finishes__side dl > div {
		grid-template-columns: minmax(0, 1fr);
		gap: .2rem;
	}
}

/* --------------------------------------------------------------------------
   Accordions

   One look for every accordion: the system FAQs and the page builder's
   accordion section (Resources, Site elements). Rows are ruled with
   hairlines, and each question sits beside a square button whose drawn plus
   closes to a minus as the box fills. accordions.js wraps each answer in
   .ehw-accordion-body and slides it; .is-closing marks a row on its way shut
   so the button turns back straight away. The base section's own rules are
   (0,2,3) at most, hence the .accordion-list step in these selectors.
   -------------------------------------------------------------------------- */

.ehw-accordion-body {
	/* Keeps the answer's own margins inside the height being animated. */
	display: flow-root;
}

.ehw-faqs__list,
.section-accordion .accordion-list {
	--ehw-acc-ink: var(--ehw-ink);
	--ehw-acc-ground: var(--ehw-white);
	--ehw-acc-rule: color-mix(in srgb, currentColor 16%, transparent);
	border-top: 1px solid var(--ehw-acc-rule);
}

.section-accordion.bg-dark .accordion-list {
	--ehw-acc-ink: var(--ehw-white);
	--ehw-acc-ground: var(--black);
}

.ehw-faqs__list .ehw-faq,
.section-accordion .accordion-list .accordion-item {
	border-bottom: 1px solid var(--ehw-acc-rule);
}

.ehw-faqs__list .ehw-faq > summary,
.section-accordion .accordion-list .accordion-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	list-style: none;
	cursor: pointer;
	transition: color .2s var(--ehw-ease);
}

.ehw-faqs__list .ehw-faq > summary::-webkit-details-marker,
.section-accordion .accordion-list .accordion-item > summary::-webkit-details-marker {
	display: none;
}

.ehw-faqs__list .ehw-faq > summary:hover,
.section-accordion.bg-light .accordion-list .accordion-item > summary:hover {
	color: var(--ehw-sage);
}

.ehw-faqs__list .ehw-faq > summary:focus-visible,
.section-accordion .accordion-list .accordion-item > summary:focus-visible {
	outline: 2px solid var(--ehw-sage);
	outline-offset: 4px;
}

.ehw-faqs__list .ehw-faq > summary::after,
.section-accordion .accordion-list .accordion-item > summary::after {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	content: "";
	color: var(--ehw-acc-ink);
	font-size: 0;
	border: 1px solid color-mix(in srgb, var(--ehw-acc-ink) 28%, transparent);
	border-radius: 2px;
	background-color: transparent;
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-position: center, center;
	background-repeat: no-repeat;
	background-size: 12px 2px, 2px 12px;
	transition:
		color .25s var(--ehw-ease),
		background-color .25s var(--ehw-ease),
		background-size .25s var(--ehw-ease),
		border-color .25s var(--ehw-ease);
}

.ehw-faqs__list .ehw-faq > summary:hover::after,
.section-accordion .accordion-list .accordion-item > summary:hover::after {
	border-color: var(--ehw-acc-ink);
}

.ehw-faqs__list .ehw-faq[open]:not(.is-closing) > summary::after,
.section-accordion .accordion-list .accordion-item[open]:not(.is-closing) > summary::after {
	color: var(--ehw-acc-ground);
	background-color: var(--ehw-acc-ink);
	background-size: 12px 2px, 2px 0;
	border-color: var(--ehw-acc-ink);
}

.ehw-faq__answer,
.section-accordion .accordion-list .accordion-item__content {
	max-width: 46rem;
	padding: 0 3.75rem 1.6rem 0;
	font-size: 1rem;
	line-height: 1.7;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.ehw-faq__answer > :first-child,
.section-accordion .accordion-list .accordion-item__content > :first-child {
	margin-top: 0;
}

.ehw-faq__answer > :last-child,
.section-accordion .accordion-list .accordion-item__content > :last-child {
	margin-bottom: 0;
}

/* System FAQs: an introduction and a way to ask beside the answers. */
.ehw-faqs {
	color: var(--ehw-ink);
	background: var(--ehw-white);
}

/* Straight after the white finishes section, the two sections' padding
   stacked into one 208px gap. A hairline and a single measure replace it. */
.oba-system-finishes:has(+ .ehw-faqs) {
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.oba-system-finishes + .ehw-faqs {
	padding-top: 0;
}

.oba-system-finishes + .ehw-faqs .ehw-faqs__grid {
	padding-top: clamp(3rem, 5vw, 4.5rem);
	border-top: 1px solid var(--ehw-hair);
}

.ehw-faqs__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(2.5rem, 6vw, 6.5rem);
}

.ehw-faqs__intro {
	position: sticky;
	top: calc(var(--ehw-header-h) + 2rem);
}

.ehw-faqs__intro h2 {
	margin: 0 0 1rem;
}

.ehw-faqs__lead {
	max-width: 26rem;
	margin: 0;
	color: rgba(var(--ehw-ink-rgb), .75);
}

.ehw-faqs__ask {
	margin-top: 2.25rem;
	padding: 1.5rem clamp(1.25rem, 2vw, 1.75rem);
	background: var(--ehw-mist);
	border-left: 3px solid var(--ehw-sage);
}

.ehw-faqs__ask p {
	margin: 0;
	font-size: .95rem;
	color: rgba(var(--ehw-ink-rgb), .75);
}

.ehw-faqs__ask .ehw-faqs__ask-title {
	margin-bottom: .3rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ehw-ink);
}

.ehw-faqs__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.4rem;
	margin-top: 1.25rem;
}

.ehw-faqs__phone {
	font-weight: 600;
	color: var(--ehw-ink);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color .2s var(--ehw-ease);
}

.ehw-faqs__phone:hover,
.ehw-faqs__phone:focus-visible {
	color: var(--ehw-sage);
}

@media (max-width: 900px) {
	/* One column: introduction, answers, then the way to ask. */
	.ehw-faqs__grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.ehw-faqs__intro {
		display: contents;
	}

	.ehw-faqs__lead {
		margin-bottom: 2rem;
	}

	.ehw-faqs__list {
		order: 1;
	}

	.ehw-faqs__ask {
		order: 2;
		margin-top: 2.5rem;
	}
}

@media (max-width: 600px) {
	.ehw-faqs__list .ehw-faq > summary,
	.section-accordion .accordion-list .accordion-item > summary {
		gap: 1rem;
		padding: 1.15rem 0;
		font-size: 1.05rem;
	}

	.ehw-faq__answer,
	.section-accordion .accordion-list .accordion-item__content {
		padding-right: 0;
		padding-bottom: 1.35rem;
	}
}

/* ---------------------------------------------------------------------------
   Social links

   Icon-only links to Instagram and LinkedIn, in the footer's contact column
   and beside the contact page's details. The icons come from the base theme's
   Bootstrap Icons sprite, and the square with its 2px radius matches the
   buttons and the RAL browser controls.
   ------------------------------------------------------------------------ */

.ehw-social {
	display: flex;
	gap: .6rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.ehw-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ehw-hair);
	border-radius: 2px;
	color: inherit;
	transition: color .25s var(--ehw-ease), background-color .25s var(--ehw-ease), border-color .25s var(--ehw-ease);
}

.ehw-social a:hover,
.ehw-social a:focus-visible {
	color: var(--ehw-white);
	background: var(--ehw-ink);
	border-color: var(--ehw-ink);
}

.ehw-social svg {
	width: 20px;
	height: 20px;
}

/* `.site-footer .footer-main ul` resets every list in the footer to no
   margin, and it outweighs the rule above, so the space under the address
   has to be set at the same specificity. */
.site-footer .footer-main ul.ehw-social {
	margin-top: 1.5rem;
}

/* On the footer's dark ground the hover inverts the other way. */
.site-footer .ehw-social a {
	border-color: rgba(255, 255, 255, .28);
}

.site-footer .ehw-social a:hover,
.site-footer .ehw-social a:focus-visible {
	color: var(--ehw-ink);
	background: var(--ehw-white);
	border-color: var(--ehw-white);
}

.ehw-social-block {
	margin-top: 2rem;
}

.ehw-social-title {
	margin: 0;
	color: rgba(var(--ehw-ink-rgb), .62);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Showroom section

   Copy beside a carousel of showroom photographs, in the same two-column
   rhythm as the base theme's image-and-text layout. The photographs are wide,
   so the frame keeps their shape rather than cropping them into a portrait.
   ------------------------------------------------------------------------ */

.ehw-showroom__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.ehw-showroom__copy h2 {
	margin-top: 0;
}

.ehw-showroom__copy p:last-of-type {
	margin-bottom: 0;
}

.ehw-showroom__copy .ehw-button {
	margin-top: 1.8rem;
}

.ehw-showroom__frame {
	position: relative;
	aspect-ratio: 1800 / 841;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(var(--ehw-ink-rgb), .06);
}

.ehw-showroom__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .9s var(--ehw-ease);
}

.ehw-showroom__slide.is-active {
	opacity: 1;
}

.ehw-showroom__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The same dot and progress ring as the home hero, in the same place: inside
   the picture, bottom right. The shared rules are up with the hero.

   The hero can use plain white because its slides carry an ink gradient. These
   photographs are shown untinted, and their bottom right corners run from mid
   grey to near white, so the dots carry a shadow instead of the picture
   carrying a scrim. */
.ehw-showroom__dots {
	--ehw-dot-ink: var(--ehw-white);
	position: absolute;
	z-index: 2;
	right: max(1.2%, 8px);
	bottom: max(1.2%, 4px);
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ehw-showroom__dot button {
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55));
}

@media (max-width: 900px) {
	.ehw-showroom__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

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