/* Header (Figma: 119px visible, --blue) */
.site-header {
	position: relative;
	display: flex; align-items: center;
	min-height: 119px;
	padding-inline: var(--gutter);
	background: var(--blue); color: var(--white);
}
.wordmark {
	padding-block: 31px 32px;
	color: var(--white);
	font-weight: 700; font-size: 28px; line-height: 1;
	text-decoration: none;
}
.wordmark span:not(.vh) { display: block; }
.wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Yellow tab hanging from the top edge */
.tab {
	position: absolute; top: 0; right: var(--inset);
	display: inline-flex; align-items: flex-start; justify-content: center; gap: 17px;
	min-width: 212px; height: 45px;
	padding: 12px 24px 0 25px;
	border-radius: 0 0 20px 20px;
	background: var(--yellow); color: var(--black);
	font-weight: 700; font-size: 16px; line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.tab__arrow { flex: none; width: 32px; height: 17px; }
/* Pull-tab: 8px taller than it looks, parked 8px above the top edge. On
   hover/focus it slides down while its label counter-slides, so the top stays
   attached, the label stays put, and only the bottom edge is tugged down.
   Transform-only, so it never triggers layout. */
.tab {
	height: 53px; padding-top: 20px;
	transform: translateY(-8px);
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tab > * { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.tab:hover, .tab:focus-visible { transform: none; }
.tab:hover > *, .tab:focus-visible > * { transform: translateY(-8px); }
.tab:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.tab, .tab > * { transition: none; }
}

/* Main nav strip (Figma: 44px, --ice) */
.site-nav { background: var(--ice); }
.site-nav__list {
	display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 24px;
	/* Starts on the gutter, in line with the wordmark; right end keeps
	   Figma's last-link position (Advisory centred near 1211 @1440). */
	padding-inline: var(--gutter) 10.0347cqw;
}
.site-nav__list a {
	display: block;
	padding-block: 15px;
	color: var(--black);
	font-weight: 700; font-size: 14px; line-height: 1;
	text-transform: uppercase; text-decoration: none;
}
.site-nav__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-nav__toggle { display: none; }

/* Mobile nav: collapses only when JS is running. The 5 links need ~1210px. */
@media (max-width: 1239px) {
	.js .site-nav__toggle {
		display: flex; align-items: center; gap: 10px;
		min-height: 44px; padding: 0 var(--gutter);
		border: 0; background: none; color: var(--black);
		font: 700 14px/1 var(--font); text-transform: uppercase;
		cursor: pointer;
	}
	.js .site-nav__toggle::after {
		content: ""; width: 8px; height: 8px;
		border: solid currentColor; border-width: 0 2px 2px 0;
		transform: translateY(-2px) rotate(45deg);
	}
	.js .site-nav[data-open] .site-nav__toggle::after { transform: translateY(2px) rotate(-135deg); }
	.js .site-nav__list { display: none; }
	.js .site-nav[data-open] .site-nav__list {
		display: flex; flex-direction: column;
		padding: 0 var(--gutter) 12px;
	}
	.js .site-nav[data-open] .site-nav__list a { padding-block: 12px; }
}

@media (max-width: 767px) {
	/* Phones: tab, wordmark and menu all centred */
	.site-header { justify-content: center; min-height: 0; padding-top: 44px; text-align: center; }
	.wordmark { padding-block: 16px 20px; font-size: clamp(20px, 5.6cqw, 28px); }
	.js .site-nav__toggle { justify-content: center; width: 100%; }
	.js .site-nav[data-open] .site-nav__list { align-items: center; }
	.tab {
		right: auto; left: 50%; translate: -50% 0;
		min-width: 0; height: 48px; gap: 10px;
		padding: 19px 16px 0;
		font-size: 14px;
	}
	.tab__arrow { width: 24px; height: 13px; }
}

/* Footer: mirrors the header. Wordmark left, links right, then the same
   2px/2px dashed rule Figma uses for dividers, in white. Once the two can't
   sit side by side, the links drop below and flow across the full width in
   wrapping rows rather than a narrow grid; phones centre everything. */
.site-footer {
	padding: 48px var(--gutter) 28px;
	background: var(--blue); color: var(--white);
}
.site-footer__inner {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 28px 48px;
	padding-bottom: 32px;
	background: repeating-linear-gradient(90deg, var(--white) 0 2px, transparent 2px 4px) left bottom / 100% 1px no-repeat;
}
.wordmark--footer { padding: 0; }
.site-footer__nav ul {
	display: flex; flex-wrap: wrap; gap: 10px 40px;
}
.site-footer__nav a {
	display: inline-block; padding-block: 5px;
	color: var(--white);
	font-weight: 700; font-size: 14px; line-height: 1;
	text-transform: uppercase; text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px;
	margin-top: 20px; font-size: 14px; line-height: 1.4;
}
.site-footer__small { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-footer__small a, .site-footer__cookie {
	display: inline-block; padding-block: 4px;
	border: 0; background: none; color: var(--white);
	font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.site-footer__small a:hover, .site-footer__cookie:hover { text-decoration-thickness: 2px; }
/* The fixed consent banner sits over the page end; the footer grows under it. */
.site-footer { padding-bottom: calc(28px + var(--consent-h, 0px)); }
html { scroll-padding-bottom: calc(var(--consent-h, 0px) + 16px); }
html:not(.js) .js-only { display: none; }

/* Cookie consent. One short paragraph (a yellow "COOKIES" lead-in, the reason
   and an inline "How we use cookies" link) beside two equal buttons. Not
   modal; consent.js sizes --consent-h so focus and the footer stay clear.
   Base styles are the floating card; .consent--stripe is the full-width
   stripe in use. */
.consent {
	position: fixed; z-index: 50; right: var(--gutter); bottom: 24px;
	width: clamp(320px, 31cqw, 460px);
	padding: 22px 24px; border-radius: var(--radius-card);
	background: var(--blue); color: var(--white);
	box-shadow: 0 0 0 3px var(--sky), 0 18px 40px -12px rgba(0, 30, 60, 0.55);
}
.consent[hidden], .consent [hidden] { display: none; }
.consent:focus { outline: none; }
.consent:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.consent__text { font-size: 16px; line-height: 1.5; }
.consent__lead { margin-right: 8px; color: var(--yellow); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.consent__link { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__msg:focus { outline: none; }
.consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.consent__btn { width: 100%; min-width: 0; min-height: 44px; padding-inline: 16px; font-size: 16px; }
.consent__btn--alt { border: 2px solid var(--white); background: transparent; color: var(--white); }
.consent__done .consent__btn { margin-top: 16px; }

/* Stripe: full-bleed along the bottom, text and buttons on one row. */
.consent--stripe {
	right: 0; bottom: 0; left: 0; width: auto;
	padding: 16px var(--gutter); border-radius: 0;
	box-shadow: 0 -3px 0 var(--sky), 0 -14px 36px -16px rgba(0, 30, 60, 0.5);
}
.consent--stripe .consent__ask,
.consent--stripe .consent__done { display: flex; align-items: center; gap: 12px 4cqw; }
.consent--stripe .consent__ask > .consent__text,
.consent--stripe .consent__done > .consent__text { flex: 1 1 auto; min-width: 0; }
.consent--stripe .consent__actions { flex: none; width: 312px; margin-top: 0; }
.consent--stripe .consent__done .consent__btn { flex: none; width: auto; margin-top: 0; }
.consent--stripe .consent__ask[hidden], .consent--stripe .consent__done[hidden] { display: none; }
@media (max-width: 767px) {
	.consent--stripe .consent__ask, .consent--stripe .consent__done { flex-direction: column; align-items: stretch; }
	.consent--stripe .consent__actions { width: auto; }
	.consent--stripe .consent__done .consent__btn { width: 100%; }
}
@media (max-width: 599px) {
	.consent:not(.consent--stripe) { right: 0; bottom: 0; left: 0; width: auto; padding: 18px var(--gutter); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: 0 -3px 0 var(--sky), 0 -12px 32px -12px rgba(0, 30, 60, 0.5); }
	.consent__text { font-size: 15px; }
	.site-footer__legal { justify-content: center; text-align: center; }
	.site-footer__small { justify-content: center; }
}
}

/* Wide enough for wordmark + a 3x2 link grid on one line (~1140px inside the
   gutters). Queried on the body container so the scrollbar doesn't count. */
@container (min-width: 1316px) {
	.site-footer__nav ul { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 48px; }
}
@container (max-width: 1315.98px) {
	.site-footer__nav { flex-basis: 100%; }
	/* Stacked over the links, the name runs on one line and only wraps when
	   the width forces it. */
	.wordmark--footer { text-wrap: balance; }
	.wordmark--footer span:not(.vh) { display: inline; }
}
@media (max-width: 599px) {
	.site-footer { padding-top: 40px; text-align: center; }
	.site-footer__inner { justify-content: center; gap: 20px; }
	.site-footer__nav ul { flex-direction: column; align-items: center; gap: 4px; }
	.site-footer__nav a { padding-block: 8px; }
}

/* Short screens (landscape phones, 200-400% zoom): a fixed banner would cover
   most or all of the view (WCAG 1.4.10, 2.4.11), so it joins the page flow at
   the top instead, like GOV.UK's. consent.js then reserves no space for it. */
@media (max-height: 599px) {
	.consent, .consent--stripe {
		position: relative; right: auto; bottom: auto; left: auto; width: auto;
		border-radius: 0; box-shadow: inset 0 -3px 0 var(--sky);
	}
}

/* Narrow-screen notice. Below 320px (WCAG 2.2's reflow minimum) the page is
   swapped for one branded message; it scales down to ~200px on its own. */
.narrow { display: none; }
@media (max-width: 319.98px) {
	body > :not(.narrow) { display: none !important; }
	.narrow {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		min-height: 100vh; min-height: 100dvh;
		padding: 32px clamp(12px, 6vw, 20px);
		background: var(--blue); color: var(--white); text-align: center;
	}
	.narrow__site { font-weight: 700; font-size: clamp(11px, 4.4vw, 13px); line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; }
	.narrow .band-art { order: 0; width: clamp(72px, 34vw, 104px); margin: 24px 0 20px; }
	.narrow__title { color: var(--yellow); font-weight: 700; font-size: clamp(19px, 8.4vw, 26px); line-height: 1.15; text-transform: uppercase; }
	.narrow__text { margin-top: 12px; font-size: clamp(14px, 5.6vw, 16px); line-height: 1.5; }
}