/* ----------------------------------------------------------------------
 * GEIM — service page design (2026 refresh)
 *
 *   .hx-*       split hero: copy + credibility strip left, call-back card
 *               right, over a full-bleed photograph. Layout ported from the
 *               Pure Marketing block library (header-159), rebuilt on GEIM's
 *               own palette and type.
 *   .sv-steps   numbered step cards, replacing long ordered lists
 *   .sv-tiles   titled tiles, replacing long "Lead :: body" bullet lists
 *   .sv-checks  two-column ticked grid, replacing plain stacked bullet lists
 *   .sv-tint    alternating tint so a run of light sections is not flat
 *
 * Lists of long multi-sentence items keep the original .sv-list treatment.
 * -------------------------------------------------------------------- */

:root {
	--cb-radius: 18px;
	--cb-shadow: 0 18px 50px rgba(0, 55, 81, .16);
	--hx-navy: #003751;
	--hx-pink: #d71149;
}

/* ====================================================================
 * Split hero
 * ================================================================== */

.hx {
	position: relative;
	overflow: hidden;
	background: var(--hx-navy);
	padding: clamp(128px, 14vw, 190px) 0 clamp(56px, 7vw, 88px);
}

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

/* Directional fade rather than a flat wash: the copy stays legible on the
   left, more of the photograph survives on the right. */
.hx-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(0, 32, 47, .95) 0%, rgba(0, 40, 59, .86) 42%, rgba(0, 45, 66, .55) 72%, rgba(0, 45, 66, .38) 100%),
		linear-gradient(to top, rgba(0, 32, 47, .55) 0%, rgba(0, 32, 47, 0) 45%);
}

.hx-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.hx-copy {
	max-width: 36rem;
	color: #fff;
}

.hx-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding-bottom: 8px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9fd4ec;
	border-bottom: 2px solid var(--hx-pink);
}

.hx-title {
	margin: 0;
	font-size: clamp(2.3rem, 4.4vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -.015em;
	color: #fff;
}

.hx-sub {
	margin: .55em 0 0;
	font-size: clamp(1.1rem, 1.7vw, 1.45rem);
	line-height: 1.32;
	font-weight: 600;
	color: #bfe2f3;
}

.hx-lede {
	margin-top: 1.1em;
	max-width: 34rem;
}

.hx-lede p {
	margin: 0 0 .7em;
	font-size: 1.03rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

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

.hx-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-top: 1.7em;
}

.hx-tel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
}

.hx-tel-label {
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.hx-tel-num {
	font-size: 1.12rem;
	font-weight: 700;
	color: #fff;
	border-bottom: 2px solid rgba(255, 255, 255, .3);
}

.hx-tel:hover .hx-tel-num {
	border-bottom-color: var(--hx-pink);
}

.hx-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 2.4em 0 0;
	padding: 1.5em 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .17);
}

.hx-stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hx-stat-v {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.hx-stat-l {
	font-size: .82rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .66);
}

/* ---- the form card -------------------------------------------------- */

.hx-form {
	padding: clamp(24px, 2.4vw, 32px);
	background: #fff;
	border-radius: var(--cb-radius);
	box-shadow: 0 26px 70px rgba(0, 20, 32, .38);
}

.hx-form-title {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--hx-navy);
}

.hx-form-sub {
	margin: .45em 0 1.3em;
	font-size: .94rem;
	line-height: 1.5;
	color: #5b7686;
}

.hx-form .cb-field {
	margin: 0 0 13px;
}

.hx-form-submit {
	width: 100%;
	margin-top: 4px;
	padding: 14px 20px;
	font-size: 1rem;
	border: 0;
	cursor: pointer;
}

.hx-form-submit[disabled] {
	opacity: .65;
	cursor: progress;
}

.hx-form-privacy {
	margin: 12px 0 0;
	font-size: .78rem;
	line-height: 1.5;
	color: #7b93a1;
}

.hx-form .form-status {
	margin: 10px 0 0;
	font-size: .93rem;
	line-height: 1.5;
}

.hx-form .form-status.ok {
	color: #1c7a4a;
	font-weight: 600;
}

.hx-form .form-status.err {
	color: #c0392b;
	font-weight: 600;
}

@media (max-width: 1080px) {
	.hx-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
		gap: 36px;
	}
}

@media (max-width: 900px) {
	.hx {
		padding-top: clamp(104px, 18vw, 140px);
	}

	.hx-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.hx-copy {
		max-width: none;
	}

	.hx-scrim {
		background: linear-gradient(to bottom, rgba(0, 32, 47, .92) 0%, rgba(0, 40, 59, .88) 100%);
	}
}

@media (max-width: 560px) {
	.hx-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 14px;
	}
}

/* ====================================================================
 * Shared form field styling (hero card and any inline call-back card)
 * ================================================================== */

.cb-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cb-field label {
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--hx-navy);
}

.cb-field input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink, #0d1b24);
	background: var(--ice, #effaff);
	border: 1px solid var(--line, #d7e6ee);
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cb-field input:hover {
	border-color: #b9d3e0;
}

.cb-field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--hx-pink);
	box-shadow: 0 0 0 3px rgba(215, 17, 73, .15);
}

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

/* ====================================================================
 * Section rhythm — breaking up the stacked-rectangle look
 * ================================================================== */

/* Alternating tint on light sections. */
.sv-light.sv-tint {
	background: var(--ice, #effaff);
}

/* A short pink rule above every section heading, so the eye has an entry
   point other than a wall of 3rem type. */
.sv-sec .sv-h::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 20px;
	border-radius: 2px;
	background: var(--hx-pink);
}

.sv-dark .sv-h::before {
	background: #ff89a8;
}

/* Photographs read as designed rather than dropped in. */
.sv-media img,
.sv-bottom-media img,
.sv-trio-row img,
.sv-pair-grid img {
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 55, 81, .14);
}

/* A side-by-side section is usually much taller on the text side than on
   the picture side — four cards against one 4:3 photograph — which strands
   the picture at the top and leaves the column empty below it. Letting the
   photograph travel with the reader closes that gap without cropping the
   image to a shape it was not chosen for. */
@media (min-width: 901px) {
	.sv-cols-right .sv-media,
	.sv-cols-left .sv-media {
		position: sticky;
		top: calc(var(--header-h, 80px) + 24px);
		align-self: start;
	}
}

/* The paragraph that opens a section carries a little more weight, so a long
   body has a way in rather than starting flat. Scoped to the body that
   directly follows the heading — a later body block in the same section is
   continuation copy, not another opening. */
.sv-sec .sv-h + .sv-body > p:first-child {
	font-size: 1.09rem;
	line-height: 1.66;
	color: #274a5b;
}

.sv-dark .sv-h + .sv-body > p:first-child {
	color: rgba(255, 255, 255, .92);
}

/* Sub-heads inside a long body get air and a colour of their own, so they
   read as signposts rather than as another bold line in the paragraph. */
.sv-body .sv-sub {
	margin: 1.9em 0 .55em;
	font-size: 1.06rem;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--hx-navy);
}

.sv-body > .sv-sub:first-child {
	margin-top: 0;
}

.sv-dark .sv-body .sv-sub {
	color: #9fd4ec;
}

/* ---- numbered step cards -------------------------------------------- */

.sv-steps {
	counter-reset: sv-step;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
	margin: 1.8em 0 0;
	padding: 0;
}

.sv-step {
	counter-increment: sv-step;
	position: relative;
	padding: 26px 24px 24px;
	background: #fff;
	border: 1px solid var(--line, #d7e6ee);
	border-radius: 14px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sv-step::before {
	content: counter(sv-step, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--hx-pink);
}

.sv-step:hover {
	transform: translateY(-3px);
	border-color: #b9d3e0;
	box-shadow: 0 14px 34px rgba(0, 55, 81, .1);
}

.sv-step-t {
	margin: 0 0 .5em;
	font-size: 1.1rem;
	line-height: 1.25;
	color: var(--hx-navy);
}

.sv-step-b {
	margin: 0;
	font-size: .96rem;
	line-height: 1.62;
	color: #41606f;
}

.sv-dark .sv-step {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
}

.sv-dark .sv-step:hover {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .3);
	box-shadow: none;
}

.sv-dark .sv-step-t {
	color: #fff;
}

.sv-dark .sv-step-b {
	color: rgba(255, 255, 255, .82);
}

.sv-dark .sv-step::before {
	color: #ff89a8;
}

/* ---- titled tiles ---------------------------------------------------- */

.sv-tiles {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
	margin: 1.8em 0 0;
	padding: 0;
}

.sv-tile {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--line, #d7e6ee);
	border-left: 3px solid var(--hx-pink);
	border-radius: 12px;
}

.sv-tint .sv-tile {
	background: #fff;
}

.sv-tile-t {
	margin: 0 0 .5em;
	font-size: 1.08rem;
	line-height: 1.25;
	color: var(--hx-navy);
}

.sv-tile-b {
	margin: 0;
	font-size: .96rem;
	line-height: 1.62;
	color: #41606f;
}

.sv-dark .sv-tile {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	border-left-color: #ff89a8;
}

.sv-dark .sv-tile-t {
	color: #fff;
}

.sv-dark .sv-tile-b {
	color: rgba(255, 255, 255, .82);
}

/* ---- ticked checklist grid ------------------------------------------ */

/* A plain bullet list of short items is the commonest thing on these pages
   and the biggest single cause of the stacked-column look. Two columns with
   a tick reads as a specification rather than as more prose. */

.sv-checks {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 34px;
	margin: 1.7em 0 0;
	padding: 0;
}

.sv-check {
	position: relative;
	padding: 0 0 0 36px;
	font-size: .98rem;
	line-height: 1.55;
	color: #2f5265;
}

.sv-check::before {
	content: "";
	position: absolute;
	left: 0;
	top: .08em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(215, 17, 73, .11);
}

.sv-check::after {
	content: "";
	position: absolute;
	left: 8px;
	top: .35em;
	width: 5px;
	height: 10px;
	border: solid var(--hx-pink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.sv-dark .sv-check {
	color: rgba(255, 255, 255, .86);
}

.sv-dark .sv-check::before {
	background: rgba(255, 255, 255, .13);
}

.sv-dark .sv-check::after {
	border-color: #7fd4ff;
}

@media (max-width: 760px) {
	.sv-checks {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* A single column of checks inside a narrow side-by-side column. */
.sv-cols-right .sv-checks,
.sv-cols-left .sv-checks,
.sv-cols-trio .sv-checks {
	grid-template-columns: 1fr;
	gap: 12px;
}

/* Copy that follows a checklist needs a clear break from it. */
.sv-checks + .sv-body {
	margin-top: 1.6em;
}

/* ---- long-form readability ------------------------------------------ */

.sv-cols:not(.sv-cols-right):not(.sv-cols-left):not(.sv-cols-trio) .sv-body p {
	max-width: 660px;
}

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

	.sv-step:hover {
		transform: none;
	}
}