/*
 * Cirrus Design Studio — site stylesheet
 * Last modified: 2026-07-27
 */

/*
 * Colour theme — a blue-grey tonal palette built from the site background
 * colour (#e6ecf7 ≈ hsl(219, 52%, 94%)). Every step keeps the same blue-leaning
 * hue (~219°); only lightness/saturation change, giving a cohesive scale from
 * the base tone up to lighter tints and down to darker shades.
 */
:root {
	--blue-grey-50:  #f3f6fc; /* lightest tint */
	--blue-grey-100: #e8edf8; /* base — the current page background */
	--blue-grey-200: #d3dcee;
	--blue-grey-300: #b5c3de;
	--blue-grey-400: #8da0c4;
	--blue-grey-500: #677fad; /* mid tone */
	--blue-grey-600: #4b6595;
	--blue-grey-700: #395079;
	--blue-grey-800: #283a5d;
	--blue-grey-900: #18263f; /* darkest shade */
	--blue-grey-950: #0f182a; /* deepest — page ground for the dark theme */

	/* Semantic roles — map palette steps to jobs so the UI stays consistent */

	/* Surfaces — dark blue-grey theme */
	--page-bg:        var(--blue-grey-900); /* deep blue-grey page ground */
	--surface:        var(--blue-grey-800); /* cards / panels lift off the page */
	--surface-sunken: var(--blue-grey-950); /* wells / inset areas (deepest) */

	/* Borders & dividers */
	--border:        var(--blue-grey-800);
	--border-strong: var(--blue-grey-700);

	/* Text — light on dark */
	--text:        var(--blue-grey-50);  /* primary body text */
	--text-muted:  var(--blue-grey-400); /* secondary text (passes AA on page-bg) */
	--text-subtle: var(--blue-grey-500); /* captions / hints */

	/* Accent / interactive — lightened so it reads on the dark ground */
	--accent:          var(--blue-grey-400); /* links, buttons */
	--accent-hover:    var(--blue-grey-300);
	--accent-contrast: var(--blue-grey-900); /* dark text/icons on an accent fill */

	/* Header ground — a translucent tint over the blur. Built from step 800
	   rather than the page ground (900) so the bar reads as a distinct band on
	   the dark page too, not just over light sections. The RGB triplet is kept
	   separately because rgba() can't take a hex custom property. */
	--blue-grey-800-rgb: 40, 58, 93;
	--header-bg:         rgba(var(--blue-grey-800-rgb), 0.62);

	/* Cookie bar — its own black/gold pairing, deliberately outside the
	   blue-grey scale so the consent notice reads as a system message rather
	   than part of the page design. */
	--gold: #d4af37;

	/* Brand marks — the three swoosh colours lifted from the logo */
	--logo-red:    #e20a13;
	--logo-green:  #008537;
	--logo-orange: #e9580c;

	/* Layout */
	--sleeve-max:     1500px; /* global content width */
	--sleeve-pad:     20px;   /* gutter inside the sleeve */
	/* Fixed header height. The header sets its own height FROM this token (see
	   .site-header__sleeve), so it is the single source of truth: anything that
	   has to clear the fixed header can offset by exactly this and land flush.
	   70px = the 30px logo plus the 20px sleeve gutter above and below. */
	--header-height:  70px;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--page-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * SLEEVE — global, reusable content constraint.
 * Wrap any block's inner content in a .sleeve to cap it at the site width and
 * centre it. Kept intentionally generic (width + centring only) so every block
 * — header, sections, footer — shares one source of truth for the layout width.
 */
.sleeve {
	width: 100%;
	max-width: var(--sleeve-max);
	margin-inline: auto;
	padding-inline: var(--sleeve-pad);
	box-sizing: border-box;
}

/*
 * SITE HEADER — fixed to the top, sitting on a translucent dark blue tint over
 * a backdrop blur. The tint is light enough that content still reads through it
 * as it scrolls beneath, but heavy enough that the bar holds its own shape over
 * anything — a dark page ground, a photo banner or the white content section —
 * and keeps the light header text legible throughout. Sits above everything
 * else via z-index.
 */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;      /* full viewport width */
	z-index: 1000;
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	/* Hairline lift, drawn as a shadow so it costs no layout height */
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* No backdrop-filter (older Firefox, some in-app browsers): the blur is what
   keeps the translucent tint legible, so fall back to a near-solid bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header { background: rgba(var(--blue-grey-800-rgb), 0.94); }
}

/* Header-specific layout lives on the header's own sleeve, NOT on .sleeve,
   so the global sleeve stays generic. Four sections laid out in a row. */
.site-header__sleeve {
	display: flex;
	align-items: center;
	gap: 24px;
	/* Height comes from the token rather than from padding, so --header-height
	   is exact and other blocks can sit flush against the header's bottom edge.
	   min-height (not height) so the bar still grows if its content ever needs
	   more room. */
	min-height: var(--header-height);
	padding-block: 0;
}

/* Section 1 — Logo (75px tall) */
.header-logo { flex: 0 0 auto; }
.header-logo a { display: block; line-height: 0; }
.header-logo img { display: block; height: 30px; width: auto; }

/* Section 2 — Desktop menu. flex:1 lets it fill the middle and push the
   telephone section to the far right. */
.header-menu { flex: 1 1 auto; }
/* Direct child only — the row layout is for the top-level bar. Nested submenu
   lists must not inherit it (and `.header-menu ul` would outrank any reset the
   submenu tried to apply to itself). */
.header-menu > ul {
	display: flex;
	justify-content: flex-start;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.header-menu a,
.header-menu__trigger {
	display: inline-block;
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	transition: color 0.15s ease;
	/* UCfirst — first letter uppercase, the rest lowercase */
	text-transform: lowercase;
}
.header-menu a::first-letter,
.header-menu__trigger::first-letter { text-transform: uppercase; }

.header-menu a:hover,
.header-menu__trigger:hover { color: var(--accent-hover); }

/* Active page */
.header-menu a.is-active { color: var(--accent); }

/* Group — appears like a link but is a submenu trigger (no href) */
.header-menu__group { position: relative; }
.header-menu__trigger { cursor: pointer; }

/* Caret on the trigger — points down, flips up when the group is open */
.header-menu__trigger::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}
.header-menu__group.is-open .header-menu__trigger::after {
	transform: translateY(0.05em) rotate(-135deg);
}

/* Submenu — a roll-down panel. Hidden until its group gets .is-open (added by
   JS on click). Absolutely positioned so it overlays the page content. */
.header-menu__submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	min-width: 220px;
	box-sizing: border-box;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
	/* roll-down animation */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.2s ease;
	/* Items stack vertically, each filling the panel's full width. */
	display: block;
}
.header-menu__submenu li { display: block; width: 100%; }
.header-menu__group.is-open .header-menu__submenu {
	max-height: 70vh;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.header-menu__submenu a {
	position: relative;
	z-index: 0; /* own stacking context, so the sliding fill sits behind the label only */
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border-radius: 6px;
	overflow: hidden; /* keeps the fill inside the rounded corners while it travels */
	font-weight: 500;
	white-space: nowrap;
}
/* The hover fill is a pseudo-element that parks off to the left and slides in.
   Sliding back out on mouse-leave is the same transition in reverse. */
.header-menu__submenu a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--surface-sunken);
	transform: translateX(-100%);
	transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}
.header-menu__submenu a:hover::before,
.header-menu__submenu a:focus-visible::before {
	transform: translateX(0);
}
.header-menu__submenu a:hover,
.header-menu__submenu a:focus-visible {
	color: var(--accent-hover);
}

@media (prefers-reduced-motion: reduce) {
	.header-menu__submenu,
	.header-menu__submenu a::before,
	.header-menu__trigger::after { transition: none; }
}

/* Section 3 — Mobile burger. Hidden on desktop; revealed at the breakpoint. */
.header-burger {
	flex: 0 0 auto;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 46px;
	height: 46px;
	padding: 0 9px;
	background: none;
	cursor: pointer;
}
.header-burger span {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--text);
	border-radius: 2px;
}

/* Section 4 — Telephone number */
.header-phone { flex: 0 0 auto; }
.header-phone a {
	display: inline-flex;
	align-items: center;
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.05rem;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.header-phone a:hover { color: var(--accent-hover); }

/* Outlined receiver icon — white via currentColor, 4px gap before the number */
.header-phone__icon {
	width: 1em;
	height: 1em;
	margin-right: 4px;
	flex-shrink: 0;
}

/*
 * MOBILE CALL BAR — mobile-only replacement for the header's telephone number,
 * which is hidden below the breakpoint. Desktop never shows it; the mobile
 * block below turns it on and gives it its ground colour.
 */
.mobile-phone { display: none; }

/*
 * HOME HERO VIDEO — stands in for the banner on the home page: full width, on
 * the same black ground. Unlike the banner it is not held to a fixed aspect
 * box — the clip keeps its own proportions so no part of the frame is lost.
 */
.site-video {
	width: 100%;
	/* Flex + zero line-height so the box hugs the clip exactly. A block box
	   rounds its height up independently of the video's fractional height, and
	   any leftover strip of the box shows as a line under the picture — there
	   is no black ground here for the same reason: with the clip setting its
	   own height there is nothing to letterbox. */
	display: flex;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	/* Starts at the header's bottom edge rather than running underneath it —
	   the fixed header would otherwise crop the top of the clip. */
	margin-top: var(--header-height);
}
/* No fixed aspect box: the clip sets its own height at full width, so the whole
   frame is shown uncropped whatever its dimensions (the current one is
   2136x630, ~3.39:1 — a 3:1 box would have cut ~13% off the sides). */
.site-video__player {
	display: block;
	width: 100%;
	height: auto;
}

/* Both heroes cast the same shadow onto the content below them */
.site-video,
.site-banner {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}

/*
 * BANNER — full-width hero directly below the header. The header is fixed and
 * transparent, so it floats over the top of the banner (that's what the blur is
 * for). The box is only rendered for pages that have a banner image; height is
 * driven purely by the aspect ratio, so it holds its shape at every width.
 */
.site-banner {
	width: 100%;
	aspect-ratio: 3 / 1;   /* standard banner proportion */
	background-color: #000;
	overflow: hidden;
}

/* Image fills the box and crops rather than distorts. */
.site-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * MAIN CONTENT — the page body, sitting directly below the banner. Full-width
 * band on the page ground; the inner .sleeve does the centring and width cap,
 * exactly as the header does.
 */
.site-main {
	width: 100%;              /* edge-to-edge band */
	box-sizing: border-box;
	padding-block: 60px;
	background: #fff;
	color: var(--blue-grey-900); /* dark text — the band is light, unlike the page */
}

/* Pages with no banner have nothing holding the fixed header off the content,
   so the section clears it itself. The offset is a MARGIN, not padding: the
   whole white band starts at the header's bottom edge rather than running up
   behind it, so the section reads as sitting directly below the header. The
   band keeps its normal top padding, so the heading has room to breathe rather
   than sitting hard against the edge. */
.site-main--no-banner {
	margin-top: var(--header-height);
}

.site-main h1,
.site-main h2 {
	margin: 0 0 0.5em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.site-main h1 { font-size: 2.25rem; }
.site-main h2 { margin-top: 1.6em; font-size: 1.5rem; }

.site-main p { margin: 0 0 1.1em; }
.site-main p:last-child { margin-bottom: 0; }

/* Opening paragraph — slightly larger and lighter, sets the page up */
.site-main__lead {
	font-size: 1.15rem;
	color: var(--blue-grey-600); /* muted, but still AA on white */
}

.site-main ul { margin: 0 0 1.1em; padding-left: 1.25em; }
.site-main li { margin-bottom: 0.4em; }

/* Links pick darker palette steps — the light accents are tuned for the dark
   page ground and wouldn't hold contrast on white. */
.site-main a { color: var(--blue-grey-700); }
.site-main a:hover { color: var(--blue-grey-900); }

/*
 * SITE FOOTER — three columns on the page ground, inside the same reusable
 * .sleeve as the header so the footer lines up with everything above it.
 * Widths are 30 / 40 / 30, and the dividers are borders on the centre column
 * so a rule falls in each gap without needing extra elements.
 */
.site-footer {
	width: 100%;
	box-sizing: border-box;
	padding-block: 50px;
	background: var(--page-bg);
	color: var(--text);
}

.site-footer__sleeve {
	display: flex;
	align-items: flex-start; /* columns hang from the top, whatever their length */
}

.site-footer__col {
	box-sizing: border-box;
	padding-inline: 34px;
}
.site-footer__col--left   { flex: 0 1 30%; padding-left: 0; }
.site-footer__col--centre {
	flex: 0 1 40%;
	border-left: 1px solid var(--border-strong);
	border-right: 1px solid var(--border-strong);
}
.site-footer__col--right  { flex: 0 1 30%; padding-right: 0; }

.site-footer h3 {
	margin: 0 0 0.6em;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
/* CMS blocks drop in whole paragraphs, so these need spacing between them —
   the last one is flush so the column bottoms stay level. */
.site-footer p {
	margin: 0 0 1em;
	color: var(--text-muted);
}
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { color: var(--accent-hover); }

/* Policies link — spaced off the legal copy above it */
.site-footer__policies { margin-top: 14px; }

/* Registered office — sits under the social icons, spaced off them */
.site-footer__address { margin-top: 18px; }

/* Social icons — round buttons on the palette's surface step, the mark drawn
   in currentColor. On hover the button takes the accent fill and the mark
   flips to the dark contrast tone, so it stays legible. */
.footer-social {
	display: flex;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--blue-grey-600); /* lifts clear of the page ground */
	color: var(--blue-grey-50);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-social__link svg {
	width: 19px;
	height: 19px;
	display: block;
}
/* Hover pushes the disc to white and the mark to the deepest ink — the widest
   contrast pair in the palette (~19:1), so the icon reads at a glance. */
.footer-social__link:hover,
.footer-social__link:focus-visible {
	background: #fff;
	color: var(--blue-grey-950);
}

/*
 * COOKIE BAR — pinned across the bottom of the viewport, above everything else
 * so it is never scrolled past. Black ground, gold title, white copy.
 */
.cookie-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2000; /* over the header (1000) and the mobile call bar (900) */
	background: #000;
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);
}
.cookie-bar__sleeve { padding-block: 18px; }

.cookie-bar__title {
	margin: 0 0 6px;
	color: var(--gold);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.cookie-bar__text {
	margin: 0;
	color: #fff;
	font-size: 0.95rem;
}
.cookie-bar__text a {
	color: var(--gold);
	text-decoration: underline;
}
.cookie-bar__text a:hover { text-decoration: none; }

/* Buttons sit in a row under the copy, wrapping rather than overflowing */
.cookie-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.cookie-bar__button {
	padding: 9px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--gold);
	color: #000; /* dark on gold — the legible pairing */
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.cookie-bar__button:hover,
.cookie-bar__button:focus-visible { background: #e6c65c; }

/* Mobile devices */
@media (max-width: 768px) {
	/* The burger (46px) is taller than the logo, so the bar needs more room —
	   keeping the token truthful keeps the flush offset exact here too. */
	:root { --header-height: 86px; }

	html,
	body {
		font-size: 15px;
		line-height: 1.5;
	}

	/* Swap desktop menu out for the mobile burger */
	.header-menu   { display: none; }
	.header-burger { display: flex; }

	/* Hide the telephone number on mobile */
	.header-phone { display: none; }

	/* With the growing menu gone, push the burger to the right */
	.header-logo { margin-right: auto; }

	/* On small screens the header stops floating over the page: the call bar is
	   the first block below it and carries the offset, so everything after it —
	   banner or content — follows in normal flow with nothing lost behind the
	   bar. The page ground fills the strip behind the header. */
	.mobile-phone {
		display: block;
		margin-top: var(--header-height);
		background: var(--logo-red);
		/* Sticks to the header's bottom edge on scroll, so the number stays
		   reachable down the page. It already starts at that offset, so it
		   pins immediately and never appears to jump. Below the header's
		   z-index (1000) so an open submenu still covers it. */
		position: sticky;
		top: var(--header-height);
		z-index: 900;
		/* Lifts the bar off whatever scrolls beneath it */
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	}
	.mobile-phone a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 11px var(--sleeve-pad);
		color: #fff; /* ~4.9:1 on the logo red — passes AA */
		text-decoration: none;
		font-weight: 600;
		font-size: 1.05rem;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}
	/* "Enquiries" labels the number in place of the receiver icon — set a touch
	   lighter than the number so the number stays the emphasis. */
	.mobile-phone__label { font-weight: 500; }

	/* Tighter vertical rhythm on small screens. The call bar already clears the
	   fixed header and the content follows it in flow, so a bannerless page
	   needs no offset at all here — just the same flush top edge. */
	.site-main { padding-block: 40px; }
	.site-main--no-banner { margin-top: 0; }

	/* The call bar already clears the fixed header and the video follows it in
	   flow, so it needs no offset of its own here. */
	.site-video { margin-top: 0; }
	.site-main h1 { font-size: 1.75rem; }
	.site-main h2 { font-size: 1.3rem; }

	/* Footer columns stack full-width. The dividers turn horizontal: the rule
	   moves to the top of every column after the first, so it still falls
	   between blocks rather than boxing them in. */
	.site-footer { padding-block: 36px; }
	.site-footer__sleeve { display: block; }
	.site-footer__col {
		width: 100%;
		padding-inline: 0;
	}
	.site-footer__col--centre {
		border-left: 0;
		border-right: 0;
	}
	.site-footer__col + .site-footer__col {
		margin-top: 28px;
		padding-top: 28px;
		border-top: 1px solid var(--border-strong);
	}
}