/* =========================================================================
   Homepage (front page) — HD x Billi redesign.
   Scoped to .hp — mobile-first, min-width media queries only.
   ========================================================================= */

.hp {
	/* Billi Brand Book 2026 palette */
	--hp-navy: #181d46;      /* Billi Blue — signature colour */
	--hp-navy-mid: #181d46;
	--hp-blue: #181d46;      /* same hex as navy: primary buttons are Billi Blue */
	/* Brand Light Blue. No longer the button hover on white (it washed out —
	   see the button block below), but still the right accent on navy. */
	--hp-lightblue-accent: #90cdeb;
	--hp-band-grey: #f5f5f5;
	--hp-band-blue: #f1f5f5; /* Green Grey */
	--hp-text: #000;
	--hp-grey: #75757b;
	--hp-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--hp-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.hp { --hp-gutter: 40px; }
}

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

.hp img { max-width: 100%; height: auto; display: block; }

.hp-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--hp-gutter);
	padding-right: var(--hp-gutter);
}

/* WYSIWYG output: style the wrapper, neutralise whatever tags the admin used
   so headings/paragraphs inherit the wrapper's type styles. */
.hp [class*='__heading'] :is(h1, h2, h3, h4, p),
.hp [class*='__title'] :is(h1, h2, h3, h4, p),
.hp [class*='__subheading'] :is(h1, h2, h3, h4, p),
.hp .hp-section-heading :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.hp [class*='__text'] p,
.hp [class*='__description'] p,
.hp [class*='__rating'] p,
.hp [class*='__count'] p { margin: 0 0 0.6em; }

.hp [class*='__text'] p:last-child,
.hp [class*='__description'] p:last-child,
.hp [class*='__rating'] p:last-child,
.hp [class*='__count'] p:last-child { margin-bottom: 0; }

/* ---- Buttons ---------------------------------------------------------- */

/* Brand buttons: 2px corners, 16px Regular. Hover keeps high contrast:
   blue deepens to navy, navy inverts to white with a navy ring. Deliberate
   deviation from the brand-book pills/light-blue hover, client direction
   Aug 2026. */
.hp .hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* --hp-blue and --hp-navy are the same hex, so a "darken on hover" here would
   be a no-op. Both invert to white instead: on the hero photography that
   reads stronger than the fill, which is what the pale Light Blue hover
   failed to do. */
.hp .hp-btn--blue { background: var(--hp-blue); color: #fff; }
.hp .hp-btn--blue:hover { background: #fff; color: var(--hp-navy); box-shadow: inset 0 0 0 1px var(--hp-navy); }

.hp .hp-btn--navy { background: var(--hp-navy); color: #fff; }
.hp .hp-btn--navy:hover { background: #fff; color: var(--hp-navy); box-shadow: inset 0 0 0 1px var(--hp-navy); }

/* The theme sets a global `a:hover { opacity: 0.7 }` in desktop.css, which
   fades the whole button — fill and label — on hover. That, more than the
   colour, is what made the hero CTA look like it lost visibility. Buttons
   opt out and rely on their own hover states above. */
.hp .hp-btn:hover { opacity: 1; }

.hp .hp-btn--small {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 14px;
	white-space: nowrap;
}

.hp .hp-btn--block { display: flex; width: 100%; }

/* ---- Shared section scaffolding --------------------------------------- */

.hp-section-heading {
	color: var(--hp-navy-mid);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.hp-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
}

@media (min-width: 640px) {
	.hp-section-head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 900px) {
	.hp-section-heading { font-size: 32px; }
	.hp-section-head { margin-bottom: 40px; }
}

.hp .hp-cover-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- USP bar ----------------------------------------------------------- */

.hp-usp { background: var(--hp-band-grey); }

.hp-usp__row {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hp-usp__row::-webkit-scrollbar { display: none; }

.hp-usp__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	min-height: 56px;
	color: var(--hp-navy-mid);
	text-decoration: none;
}

.hp .hp-usp__icon { height: 26px; width: auto; max-width: 100px; object-fit: contain; }

.hp-usp__text { font-size: 15px; font-weight: 600; white-space: nowrap; }
.hp-usp__text p { margin: 0; display: inline; }
.hp-usp__text img { display: inline-block; vertical-align: middle; }

@media (min-width: 900px) {
	.hp-usp__row { justify-content: space-between; overflow: visible; }
}

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

.hp-hero {
	position: relative;
	/* Own stacking context so media/overlay can sit on negative z-index,
	   letting the button's stretched ::after anchor to the full section. */
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(78svh, 640px);
	background: var(--hp-navy);
	overflow: hidden;
}

/* Whole hero is clickable: stretch the hero button over the full section.
   Note this also makes the whole hero the button's hover area, so the hover
   state fires wherever the cursor sits in the hero. Kept deliberately; the
   inverted hover above stays legible either way. */
.hp-hero .hp-btn::after {
	content: '';
	position: absolute;
	inset: 0;
}

.hp-hero__media,
.hp-hero__media video,
.hp-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-hero__media { z-index: -2; }

.hp-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(24, 29, 70, 0.15) 40%, rgba(24, 29, 70, 0.55) 100%);
}

.hp-hero__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding-top: 48px;
	padding-bottom: 40px;
}

.hp-hero__content { max-width: 640px; color: #fff; }

/* typography.css lists this headline, so it is set in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.hp-hero__heading {
	color: #fff;
	font-size: 38px;
	line-height: 1.08;
}

.hp-hero__subheading {
	margin-top: 14px;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
}

.hp-hero__description {
	margin-top: 12px;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
}

.hp-hero__content .hp-btn { margin-top: 24px; min-width: 180px; }

@media (min-width: 900px) {
	.hp-hero {
		align-items: center;
		min-height: 0;
		/* 47vw ≈ the wireframe's 1512:711 hero ratio; height-only so the
		   section always spans the full viewport width. */
		height: clamp(520px, 47vw, 760px);
	}

	.hp-hero__inner {
		align-items: center;
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.hp-hero__heading { font-size: 54px; }
	.hp-hero__subheading { margin-top: 18px; font-size: 24px; }
	.hp-hero__description { font-size: 18px; }
	.hp-hero__content .hp-btn { margin-top: 32px; }
}

/* ---- Solutions ---------------------------------------------------------- */

.hp-solutions { padding: 56px 0; }

.hp-solutions .hp-section-heading { margin-bottom: 28px; }

.hp-solutions__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.hp-solutions__card {
	position: relative;
	display: flex;
	min-height: 300px;
	overflow: hidden;
	border-radius: 4px;
}

/* Whole card is clickable: stretch the card's button over the full card. */
.hp-solutions__card .hp-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Solution-card buttons: Billi light blue with navy text on the dark overlay.
   Was the azure #0079c9 until Sep 2026 (client feedback item 9). White text
   went with it — #fff on #90cdeb is 1.9:1 and unreadable; navy on it is 8.4:1
   and is the pairing the brand book already specifies for the light blue. */
.hp-solutions__card .hp-btn--blue {
	background: var(--hp-lightblue-accent);
	color: var(--hp-navy);
}

/* These sit on photography, so they go to white rather than inverting to the
   navy-ringed default, which would disappear into the image. */
.hp-solutions__card:hover .hp-btn--blue,
.hp-solutions__card .hp-btn--blue:hover {
	background: #fff;
	color: var(--hp-navy);
	box-shadow: none;
}

.hp-solutions__media { position: absolute; inset: 0; }

/* All cards: Billi Blue overlay fading from solid at the left to fully
   transparent at the right. z-index lifts the overlay above the
   absolutely-positioned media. */
.hp-solutions__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(24, 29, 70, 0.94) 0%, rgba(24, 29, 70, 0.6) 40%, rgba(24, 29, 70, 0.25) 70%, rgba(24, 29, 70, 0) 100%);
}

/* Spans the full card so the button's stretched ::after covers all of it.
   The block is centred in the card while the copy inside stays left-aligned:
   the navy overlay is solid at the left edge, so pushing the text inwards
   would drop it onto the exposed image. */
.hp-solutions__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 28px 24px;
	color: #fff;
}

.hp-solutions__heading,
.hp-solutions__text { max-width: 340px; }


.hp-solutions__heading {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
}

.hp-solutions__text {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.hp-solutions__content .hp-btn { margin-top: 20px; }

@media (min-width: 768px) {
	.hp-solutions__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (min-width: 900px) {
	.hp-solutions { padding: 88px 0; }
	.hp-solutions .hp-section-heading { margin-bottom: 40px; }
	.hp-solutions__card { min-height: 324px; }
	.hp-solutions__content { padding: 34px 32px; }
	.hp-solutions__heading { font-size: 28px; }
}

/* ---- Reviews ------------------------------------------------------------ */

.hp-reviews {
	background: var(--hp-band-grey);
	padding: 56px 0;
	overflow: hidden;
}

.hp-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.hp-reviews__nav { display: flex; gap: 6px; }

.hp-reviews__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--hp-navy-mid);
	font-size: 22px;
	cursor: pointer;
}

.hp-reviews__layout {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hp-reviews__summary {
	flex: 0 0 auto;
	color: var(--hp-navy-mid);
	text-align: center;
}

.hp-reviews__summary-title {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 14px;
}

.hp .hp-reviews__summary-stars { margin: 0 auto 14px; max-width: 220px; }

.hp-reviews__rating,
.hp-reviews__count { font-size: 15px; font-weight: 600; }

.hp-reviews__count { margin-top: 4px; }

.hp .hp-reviews__logo { margin: 16px auto 0; max-width: 150px; }

.hp-reviews__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* let cards bleed to the viewport edge on mobile */
	margin-right: calc(var(--hp-gutter) * -1);
	padding-right: var(--hp-gutter);
}

.hp-reviews__track::-webkit-scrollbar { display: none; }

.hp-reviews__card {
	flex: 0 0 86%;
	max-width: 426px;
	scroll-snap-align: start;
	background: #fff;
	padding: 28px 24px 24px;
	border-radius: 4px;
}

.hp .hp-reviews__card-stars { max-width: 108px; margin-bottom: 16px; }

.hp-reviews__card-title {
	color: #000;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 12px;
}

.hp-reviews__card-text { font-size: 16px; line-height: 1.45; }

.hp-reviews__card-meta { margin-top: 18px; font-size: 16px; }

@media (min-width: 900px) {
	.hp-reviews { padding: 80px 0; }
	.hp-reviews__head { margin-bottom: 40px; }

	.hp-reviews__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
	}

	.hp-reviews__summary {
		width: 240px;
		padding-top: 56px;
	}

	.hp-reviews__summary-title { font-size: 28px; }

	/* No edge-bleed on desktop — the carousel stays inside the page width. */
	.hp-reviews__track { flex: 1 1 auto; margin-right: 0; padding-right: 0; min-width: 0; }
	.hp-reviews__card { flex: 0 0 426px; padding: 40px 36px 32px; }
	.hp-reviews__card-title { font-size: 24px; }
}

/* ---- Product ranges ------------------------------------------------------ */

.hp-products { padding: 56px 0; }

.hp-products__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 24px;
}

.hp-products__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Whole card is clickable: stretch the Explore Range button over the card. */
.hp-products__card .hp-btn--block::after {
	content: '';
	position: absolute;
	inset: 0;
}

.hp-products__card:hover .hp-btn--block { background: #fff; color: var(--hp-navy); box-shadow: inset 0 0 0 1px var(--hp-navy); }

.hp-products__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }

.hp-products__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-products__title {
	margin: 16px 0 14px;
	color: var(--hp-navy-mid);
	font-size: 21px;
	font-weight: 600;
}

.hp-products__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

/* Capacity + finish swatches row — mirrors the Product Range page cards. */
.hp-products__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.hp-products__capacity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hp-text);
}

.hp-person-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.hp-products__finishes {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.hp-swatch {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--hp-sw, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.hp-products__finishes-more {
	font-size: 12px;
	font-weight: 600;
	color: var(--hp-grey);
}

/* All Billi Blue (Sep 2026): Billi's icon artwork is navy-only, and the old
   per-type cyan and amber failed text contrast. Padding is trimmed to hold the
   chip height with the larger icon; below 20px the official icons lose detail. */
.hp-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid currentColor;
	color: var(--hp-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	background: #fff;
}

.hp-badge svg { width: 20px; height: 20px; }

.hp-products__card .hp-btn--block { margin-top: auto; background: var(--hp-navy); }
.hp-products__card .hp-btn--block:hover { background: #fff; color: var(--hp-navy); box-shadow: inset 0 0 0 1px var(--hp-navy); }

@media (min-width: 640px) {
	.hp-products__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.hp-products { padding: 88px 0; }
	.hp-products__grid { grid-template-columns: repeat(3, 1fr); gap: 72px clamp(24px, 6vw, 93px); }
	.hp-products__title { font-size: 22px; }
}

/* ---- The Billi Difference ------------------------------------------------ */

.hp-difference {
	background: var(--hp-band-blue);
	padding: 56px 0;
}

.hp-difference__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 24px;
}

/* Opt out of the theme's global a:hover fade, which dimmed the whole card
   (image, heading and all) on hover; the image lift below is the hover. */
.hp-difference__link { text-decoration: none; color: inherit; display: block; }
.hp .hp-difference__link:hover { opacity: 1; }
.hp-difference__media img { transition: transform 0.3s ease; }
.hp-difference__link:hover .hp-difference__media img { transform: scale(1.03); }

/* Client direction Aug 2026: the blue gradient is gone and the heading sits
   below the image rather than over it, so the photography is never tinted
   and the type is never fighting it. */
.hp-difference__media {
	position: relative;
	aspect-ratio: 433 / 290;
	overflow: hidden;
	border-radius: 4px;
}

.hp-difference__title {
	margin-top: 20px;
	color: var(--hp-navy);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.hp-difference__text {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--hp-text);
}

@media (min-width: 768px) {
	.hp-difference__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.hp-difference { padding: 80px 0; }
	.hp-difference__title { font-size: 24px; }
}

/* ---- Why choose Billi (client feedback item 7) --------------------------- */

.hp-why {
	padding: 56px 0;
	background: #fff;
}

.hp-why__head {
	max-width: 62ch;
}

.hp-why__intro {
	margin-top: 14px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--hp-text);
}

.hp-why__intro p { margin: 0 0 0.7em; }
.hp-why__intro p:last-child { margin-bottom: 0; }

.hp-why__grid {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* A rule above each column rather than a card: the section is three related
   statements, not three things to choose between, and boxing them would say
   the opposite. */
.hp-why__col {
	border-top: 1px solid var(--hp-navy);
	padding-top: 18px;
}

.hp-why__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--hp-navy-mid);
}

.hp-why__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--hp-text);
}

.hp-why .hp-btn { margin-top: 36px; }

@media (min-width: 768px) {
	.hp-why__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

@media (min-width: 900px) {
	.hp-why { padding: 88px 0; }
	.hp-why__grid { margin-top: 48px; gap: 56px; }
	.hp-why__title { font-size: 22px; }
}


/* ---- Featured projects (client feedback item 6) -------------------------- */

/* Replaced the Latest news row. Large photography, one slow zoom on hover. */

.hp-projects {
	padding: 56px 0;
	background: #fff;
}

.hp-projects__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px 28px;
}

.hp-projects__link {
	text-decoration: none;
	color: inherit;
	display: block;
	/* desktop.css:349 fades every link to 0.7 on hover, which on a photo card
	   reads as the image dimming rather than as a hover state. */
	opacity: 1;
}

.hp-projects__link:hover { opacity: 1; }

.hp-projects__link:focus-visible {
	outline: 2px solid var(--hp-navy);
	outline-offset: 4px;
}

.hp-projects__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	background: #e6ebec;
}

/* "Subtle, slow zoom" — 4% over 0.9s on an ease-out curve. Faster or larger
   and it reads as a bounce; this reads as the image leaning in. */
.hp-projects__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hp-projects__link:hover .hp-projects__media img,
.hp-projects__link:focus-visible .hp-projects__media img {
	transform: scale(1.04);
}

/* Anyone who has asked for less motion gets the card without the zoom. */
@media (prefers-reduced-motion: reduce) {
	.hp-projects__media img { transition: none; }
	.hp-projects__link:hover .hp-projects__media img,
	.hp-projects__link:focus-visible .hp-projects__media img { transform: none; }
}

.hp-projects__title {
	margin: 18px 0 0;
	color: var(--hp-navy-mid);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

.hp-projects__text {
	margin: 10px 0 0;
	font-size: 16px;
	/* desktop.css:346 sets `a { font-weight: 600 }` and the whole card is a
	   link, so supporting copy inherits Demi unless it says otherwise. */
	font-weight: 400;
	line-height: 1.5;
	color: var(--hp-text);
	/* Three lines, whatever length the excerpt turns out to be. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hp-projects__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hp-navy);
}

.hp-projects__more span {
	transition: transform 0.2s ease;
}

.hp-projects__link:hover .hp-projects__more {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hp-projects__link:hover .hp-projects__more span {
	transform: translateX(3px);
}

@media (min-width: 768px) {
	.hp-projects__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.hp-projects { padding: 88px 0; }
	.hp-projects__title { font-size: 23px; }
}


/* ---- Water-cooling technology -------------------------------------------- */

.hp-tech {
	padding: 56px 0;
	background: var(--hp-band-blue);
}

.hp-tech__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.hp-tech__text {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--hp-text);
	max-width: 58ch;
}

.hp-tech__text p { margin: 0 0 0.8em; }
.hp-tech__text p:last-child { margin-bottom: 0; }

.hp-tech__points {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.hp-tech__points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--hp-navy);
	font-weight: 600;
}

.hp-tech__points svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--hp-blue);
}

.hp-tech .hp-btn { margin-top: 28px; }

/* The product shots are JPEGs on a solid white ground, so on a tinted band
   they would sit in a white square. Multiply drops white to the colour
   behind it, which leaves the units on the band with no cut-out needed. */
.hp-tech__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	mix-blend-mode: multiply;
}

@media (min-width: 900px) {
	.hp-tech { padding: 88px 0; }
	.hp-tech__grid { grid-template-columns: 6fr 5fr; gap: 64px; }

	/* Without an image there is no second column to fill. An asymmetric layout
	   always strands the empty space on one side or the other, so the band
	   becomes a single centred measure instead: symmetric, readable, and
	   clearly deliberate rather than looking like a picture failed to load.
	   The two-column version above returns as soon as an image is added. */
	.hp-tech--no-image .hp-tech__grid { grid-template-columns: 1fr; }

	.hp-tech--no-image .hp-tech__content {
		max-width: 820px;
		margin-inline: auto;
		text-align: center;
	}

	/* Heading and button centred, prose left-aligned. Two paragraphs of
	   centred body copy give the eye a different start position on every
	   line, which is noticeably harder to read than the tidiness is worth. */
	.hp-tech--no-image .hp-tech__text {
		max-width: 66ch;
		margin-inline: auto;
		text-align: left;
	}

	/* The points stay left-aligned inside a centred block: centred list items
	   with a tick in front of each one line up on nothing. */
	.hp-tech--no-image .hp-tech__points {
		grid-template-columns: 1fr 1fr;
		gap: 14px 40px;
		text-align: left;
		max-width: 700px;
		margin-inline: auto;
	}
}

/* ---- Newsletter sign-up -------------------------------------------------- */

/* "Be in the know". A navy panel so the one moment on the page that asks for
   something looks deliberate rather than bolted on, and so it does not read
   as another content card between the news row and the help band. */
/* Padding is even top and bottom: this is a tinted band in its own right
   now, so an asymmetric inset reads as a lopsided colour block rather than
   as breathing room around the panel. */
.hp-signup {
	padding: 56px 0;
	background: var(--hp-band-blue);
}

.hp-signup__panel {
	background: var(--hp-navy);
	color: #fff;
	border-radius: 4px;
	padding: 36px 24px;
	display: grid;
	gap: 32px;
}

/* With an image (client feedback item 5) the panel loses its padding on the
   image side and the photo bleeds to the panel edge — a square photo inset by
   36px of navy reads as a picture that has been dropped in, not as part of
   the panel. */
.hp-signup__panel--with-image {
	padding: 0;
	overflow: hidden;
}

.hp-signup__panel--with-image .hp-signup__intro,
.hp-signup__panel--with-image .hp-signup__form {
	padding-left: 24px;
	padding-right: 24px;
}

.hp-signup__panel--with-image .hp-signup__intro { padding-top: 32px; }
.hp-signup__panel--with-image .hp-signup__form { padding-bottom: 32px; }

/* 16:9 on a phone, square from tablet up. A square photo at the top of a
   375px screen costs 375px of height before a word of the offer is visible. */
.hp-signup__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.hp-signup__heading {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
}

.hp-signup__heading p { margin: 0; }

.hp-signup__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 46ch;
}

.hp-signup__text p { margin: 0 0 0.6em; }
.hp-signup__text p:last-child { margin-bottom: 0; }

.hp-signup__points {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.hp-signup__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.hp-signup__points svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--hp-lightblue-accent);
}

/* --- Gravity Forms inside the panel ---
   Deliberately not the .pd-enquiry block: that styles a long multi-column
   quote form, this is two fields on navy. */
.hp-signup__form .gform_wrapper,
.hp-signup__form .gform_wrapper.gravity-theme { margin: 0; }

/* Everything below carries `body` + `.gravity-theme` weight: Gravity Forms'
   theme.min.css (and desktop.css's own GF overrides) load after this file, so
   an equal-specificity rule here would lose on source order and silently not
   apply. Same pattern as the product page's enquiry form. */
body .hp-signup__form .gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	row-gap: 18px;
	column-gap: 0;
	margin: 0;
	padding: 0;
}

body .hp-signup__form .gform_wrapper.gravity-theme .gfield { margin: 0; padding: 0; }

/* The honeypot and the validation container must never be visible. */
.hp-signup__form .gform_wrapper .gform_validation_container,
.hp-signup__form .gform_wrapper .gfield--type-honeypot { display: none !important; }

body .hp-signup__form .gform_wrapper.gravity-theme :is(.gfield_label, .gform-field-label) {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

/* GF's default required marker is a strong red that reads as an error on the
   navy panel. Nothing has gone wrong yet, so it is quieter here.

   Gravity Forms' theme.min.css is enqueued after this stylesheet, so these
   overrides carry the extra `body` + `.gravity-theme` weight to win on
   specificity rather than source order — the same pattern as the product
   page's enquiry form. */
body .hp-signup__form .gform_wrapper.gravity-theme :is(.gfield_required, .gfield_required *) {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
}

/* desktop.css:3361 styles GF inputs through a six-long :not([attr]) chain,
   which scores (0,7,2) — each :not() counts as a full attribute selector. The
   same chain is repeated here so this rule outscores it and the field keeps
   its border and padding. */
body .hp-signup__form .gform_wrapper.gravity-theme input[type=email]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .hp-signup__form .gform_wrapper.gravity-theme input[type=text]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	background: #fff;
	color: var(--hp-navy);
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
	line-height: 1.2;
}

body .hp-signup__form .gform_wrapper input::placeholder { color: #6b7086; opacity: 1; }

/* An outset ring would half-land on the navy panel and lose contrast, so the
   focus ring is drawn inside the white field. */
body .hp-signup__form .gform_wrapper input:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--hp-navy), 0 0 0 2px var(--hp-lightblue-accent);
}

/* Consent checkbox */
.hp-signup__form .gform_wrapper .gfield--type-consent :is(.gfield_label, .gform-field-label--type-inline) {
	font-weight: 400;
	font-size: 15px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}

.hp-signup__form .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* desktop.css:7654 draws the tick as a rotated 7x12 border stub pinned at
   top:5px left:10px — offsets measured against its own 30px control. This box
   is 20px, so the tick hangs over two edges of it. It is removed and redrawn
   below rather than nudged, so the mark stays centred whatever the box size. */
body .hp-signup__form .gform_wrapper input[type=checkbox]::after,
body .hp-signup__form .gform_wrapper input[type=checkbox]::before {
	content: none;
}

/* GF sets appearance:none on these, which makes accent-color a no-op, so both
   states are painted here. */
body .hp-signup__form .gform_wrapper input[type=checkbox] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
}

/* Light Blue fill with a navy tick, matching the submit button beneath it —
   a white tick on Light Blue is the one pairing in this panel that does not
   hold. The tick is an inlined SVG, so there is no extra request, and it is
   sized as a share of the box rather than pinned to an edge of it. */
body .hp-signup__form .gform_wrapper input[type=checkbox]:checked {
	background-color: var(--hp-lightblue-accent);
	border-color: var(--hp-lightblue-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5' fill='none' stroke='%23181d46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 13px 13px;
}

/* GF renders the consent description in a fixed-height, bordered, scrolling
   box (it expects a long terms-and-conditions paragraph). One sentence does
   not need a scroll pane, so it is unwound back into plain text. */
body .hp-signup__form .gform_wrapper.gravity-theme .gfield_consent_description,
body .hp-signup__form .gform_wrapper.gravity-theme .field_description_below .gfield_consent_description {
	height: auto;
	max-height: none;
	overflow: visible;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.65);
}

/* Submit: Light Blue on navy, inverting to white — light-on-dark is the
   high-contrast direction here, as in the header bar. */
body .hp-signup__form .gform_wrapper.gravity-theme .gform_footer { margin: 20px 0 0; padding: 0; }

body .hp-signup__form .gform_wrapper .gform_footer input[type=submit],
body .hp-signup__form .gform_wrapper .gform_footer button {
	min-height: 48px;
	padding: 12px 32px;
	border: 0;
	border-radius: 2px;
	background: var(--hp-lightblue-accent);
	color: var(--hp-navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	/* GF capitalises button text, which would render "Sign up" as "Sign Up"
	   and undo the sentence-case work. */
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body .hp-signup__form .gform_wrapper .gform_footer input[type=submit]:hover,
body .hp-signup__form .gform_wrapper .gform_footer button:hover {
	background: #fff;
	color: var(--hp-navy);
	opacity: 1;
}

/* Validation and confirmation on navy */
/* GF's stock validation is a white-and-red box (and a solid red summary slab),
   both of which look like a broken element on the navy panel. Redrawn as
   light-on-navy: #ffc9be holds ~7:1 against #181d46. */
body .hp-signup__form .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message) {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	color: #ffc9be;
}

body .hp-signup__form .gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid #ffc9be;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
	color: #ffc9be;
	font-size: 14px;
}

body .hp-signup__form .gform_wrapper.gravity-theme .gform_validation_errors :is(h2, .gform_submission_error) {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #ffc9be;
}

.hp-signup__form .gform_confirmation_message {
	font-size: 17px;
	line-height: 1.5;
	color: #fff;
}

.hp-signup__form .gform_confirmation_message p { margin: 0; }

@media (min-width: 768px) {
	.hp-signup__panel { padding: 44px 40px; }
	.hp-signup__panel--with-image { padding: 0; }

	.hp-signup__panel--with-image .hp-signup__intro,
	.hp-signup__panel--with-image .hp-signup__form {
		padding-left: 40px;
		padding-right: 40px;
	}

	.hp-signup__panel--with-image .hp-signup__intro { padding-top: 40px; }
	.hp-signup__panel--with-image .hp-signup__form { padding-bottom: 40px; }
}

@media (min-width: 900px) {
	.hp-signup { padding: 88px 0; }

	.hp-signup__panel {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: center;
		padding: 56px;
	}

	.hp-signup__heading { font-size: 32px; }

	/* Square image left, copy and form right (client feedback item 5). The
	   image column is its own grid track and the copy stacks in the second,
	   which is why the panel switches to two explicit columns here rather
	   than reusing the intro/form split above. */
	.hp-signup__panel--with-image {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 0;
		align-items: stretch;
		padding: 0;
	}

	.hp-signup__panel--with-image .hp-signup__media {
		grid-row: 1 / span 2;
		aspect-ratio: 1 / 1;
		height: 100%;
	}

	.hp-signup__panel--with-image .hp-signup__intro {
		padding: 56px 56px 0;
		align-self: end;
	}

	.hp-signup__panel--with-image .hp-signup__form {
		padding: 24px 56px 56px;
		align-self: start;
	}
}

/* ---- "Can we help?" (client feedback item 12) ---------------------------- */

/* Replaced the Spec Generator callout: a talk-to-us block with two CTAs, then
   four supporting cards. */

.hp-help {
	background: #fff;
	padding: 48px 0;
}

.hp-help__intro {
	max-width: 62ch;
}

.hp-help__text {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.5;
}

.hp-help__text p { margin: 0 0 0.7em; }
.hp-help__text p:last-child { margin-bottom: 0; }

.hp-help__actions {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hp-help__actions .hp-btn { margin: 0; }

/* Secondary CTA: outlined rather than filled, so the pair reads as one
   primary action and one alternative rather than two competing ones. */
.hp .hp-btn--ghost {
	background: transparent;
	color: var(--hp-navy);
	box-shadow: inset 0 0 0 1px var(--hp-navy);
}

.hp .hp-btn--ghost:hover {
	background: var(--hp-navy);
	color: #fff;
	box-shadow: inset 0 0 0 1px var(--hp-navy);
	opacity: 1;
}

.hp-help__grid {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* 1px #EAEAEA border and a 2px radius, per the brief. The band is white now,
   so the fill and the ground swap over: a white card on a white section would
   be held together by a #EAEAEA border alone, where the Green Grey fill gives
   each card an edge you can see from across the page. */
.hp-help__card {
	background: var(--hp-band-blue);
	border: 1px solid #EAEAEA;
	border-radius: 2px;
	padding: 22px 22px 24px;
}

.hp-help__card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	opacity: 1;
}

.hp-help__card-link:hover { opacity: 1; }

.hp-help__card:has(.hp-help__card-link) {
	transition: border-color 0.2s ease;
}

.hp-help__card:has(.hp-help__card-link:hover) {
	border-color: var(--hp-navy);
}

.hp-help__card:has(.hp-help__card-link:focus-visible) {
	outline: 2px solid var(--hp-navy);
	outline-offset: 2px;
}

/* Semi-bold, per the brief. The theme's DIN has no 500, so Demi (600) is the
   semi-bold cut — see css/typography.css. */
.hp-help__card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--hp-navy-mid);
}

.hp-help__card-text {
	margin: 0;
	font-size: 15px;
	font-weight: 400; /* see .hp-projects__text — inherited from `a` */
	line-height: 1.5;
	color: var(--hp-text);
}

@media (min-width: 620px) {
	.hp-help__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
	.hp-help { padding: 72px 0; }
	.hp-help__actions .hp-btn { min-width: 194px; min-height: 52px; }
}

@media (min-width: 1024px) {
	.hp-help__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}