@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {

	/* Colours */
	--clr-dark-blue    : #0e255a;  /* primary brand / headings / dark bg */
	--clr-hover-blue   : #52a3a7;  /* interactive hover state */
	--clr-teal         : #67a1a6;  /* secondary CTA band variant */
	--clr-bg-grey      : #f2f3f9;  /* alternating section bg */
	--clr-bg-blue      : #d1e9ea;  /* hero / accents / trust chips */
	--clr-bg-green     : #e1f4f6;  /* alternating section bg */
	--clr-bg-acc       : #efefef;  /* accordion button bg (closed state) */
	--clr-white        : #ffffff;
	--clr-black        : #000000;
	--clr-text-body    : #374151;  /* base copy colour */
	--clr-border       : #d1d5db;
	--clr-footer-bg    : #081a43;  /* footer note strip */

	/* Shadows */
	--shadow-card : 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

	/* Font families */
	--ff-body : "Figtree", Verdana, Arial, sans-serif;

	/* Font sizes — always rem, always with a px-source comment */
	--fs-body            : 1.125rem;                     /* 18px ÷ 16 */
	--fs-h1              : clamp(2.25rem, 4vw, 3.6rem);   /* 36px – 57.6px, fluid */
	--fs-h2              : clamp(1.75rem, 3vw, 3rem);     /* 28px – 48px, fluid */
	--fs-h3              : 1.35rem;                       /* 21.6px ÷ 16 */
	--fs-eyebrow         : 0.95rem;                       /* 15.2px ÷ 16 */
	--fs-hero-copy       : 1.2rem;                        /* 19.2px ÷ 16 */
	--fs-proof-heading   : clamp(1.6rem, 2.5vw, 2.4rem);  /* 25.6px – 38.4px, fluid */
	--fs-cta-heading     : clamp(1.7rem, 3vw, 2.5rem);    /* 27.2px – 40px, fluid */
	--fs-cta-copy        : 1.15rem;                       /* 18.4px ÷ 16 */
	--fs-snapshot-label  : 0.92rem;                       /* 14.7px ÷ 16 */
	--fs-snapshot-value  : 1.1rem;                        /* 17.6px ÷ 16 */
	--fs-md              : 1rem;                          /* 16px ÷ 16 */
	--fs-sm              : 0.95rem;                       /* 15.2px ÷ 16 */
	--fs-xs              : 0.9rem;                        /* 14.4px ÷ 16 */
	--fs-xxs             : 0.82rem;                       /* 13.1px ÷ 16 */

	/* Font weights */
	--fw-regular  : 400;
	--fw-medium   : 500;
	--fw-semibold : 600;
	--fw-bold     : 700;
	--fw-black    : 800;

	/* Letter spacing — Figma % converted to em */
	--ls-eyebrow : 0.075em;  /* 7.5% */
	--ls-button  : 0.025em;  /* 2.5% */

	/* Layout */
	--container-width         : 1280px;
	--container-gutter        : 1rem;    /* 16px ÷ 16 */
	--section-padding         : 4rem;    /* 64px ÷ 16 */
	--section-padding-mobile  : 2.875rem;/* 46px ÷ 16 */

	/* Border radius */
	--radius-sm : 0.25rem;  /* 4px ÷ 16 */
	--radius-md : 0.3125rem;/* 5px ÷ 16 */
	--radius-lg : 0.5rem;   /* 8px ÷ 16 */

}

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

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* ---------------------------------------------------------------
   Shared button component — used across hero, cta-band, proof-band,
   final-enquiry form and mobile-sticky. Keep this the single source
   of truth for button styling; blocks should never redeclare it.
------------------------------------------------------------------ */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	border-radius: var(--radius-sm);
	border: 2px solid var(--clr-dark-blue);
	background: var(--clr-dark-blue);
	color: var(--clr-white);
	padding: 0.875rem 1.5rem;
	min-height: 3.375rem;
	text-decoration: none;
	text-transform: uppercase;
	font-family: var(--ff-body);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-button);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	cursor: pointer;
}
.button:hover {
	background: var(--clr-hover-blue);
	border-color: var(--clr-hover-blue);
	color: var(--clr-white);
}
.button.secondary {
	background: transparent;
	color: var(--clr-dark-blue);
}
.button.secondary:hover {
	background: var(--clr-bg-blue);
	border-color: var(--clr-dark-blue);
	color: var(--clr-dark-blue);
}

/* Shared card look used by snapshot / suitability / step / timeline cards */
.card-base {
	background: var(--clr-white);
	border: 1px solid rgba(14,37,90,.11);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}