/* Page column: the design's canvas, made fluid.
   The templates carry the design's own inline styles, so this file only sets
   the frame and the responsive overrides. */

.hsf-page {
	max-width: 1320px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #111113;
}

.hsf-page > div { flex-shrink: 0; }

/* Mobile menu button. Every hero is black, so the button is white with a
   dark icon, and it flips to the dark treatment once the panel is open. */
.hsf-toggle {
	display: none;
	position: fixed;
	top: 22px;
	right: 22px;
	z-index: 90;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: #111113;
	cursor: pointer;
	place-items: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hsf-toggle:hover { background: #d90429; color: #ffffff; }
.hsf-toggle:focus-visible { outline: 3px solid #207ff8; outline-offset: 3px; }

.hsf-toggle__bars { display: block; position: relative; width: 22px; height: 14px; }
.hsf-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.22s ease, opacity 0.22s ease;
}
.hsf-toggle__bars span:first-child { top: 0; }
.hsf-toggle__bars span:last-child { bottom: 0; }

.hsf-toggle[aria-expanded="true"] { background: #d90429; color: #ffffff; }
.hsf-toggle[aria-expanded="true"] .hsf-toggle__bars span:first-child { transform: translateY(5.75px) rotate(45deg); }
.hsf-toggle[aria-expanded="true"] .hsf-toggle__bars span:last-child { transform: translateY(-5.75px) rotate(-45deg); }

.hsf-mobile {
	position: fixed;
	inset: 0;
	z-index: 89;
	background: #111113;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
}
.hsf-mobile[hidden] { display: none; }

/* The logo lines up with the close button. */
.hsf-mobile__head { height: 54px; display: flex; align-items: center; flex-shrink: 0; }
.hsf-mobile__logo { width: 88px; height: auto; display: block; }

/* Links take the middle of the screen and only scroll on very short screens. */
.hsf-mobile__links {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 0;
}

.hsf-mobile__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 46px;
	padding: 4px 2px;
	border-bottom: 1px solid #222428;
	color: #ffffff;
	text-decoration: none;
	font-family: "Big Shoulders Display", sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 6.4vw, 28px);
	line-height: 1;
	text-transform: uppercase;
}
.hsf-mobile__links a:first-child { border-top: 1px solid #222428; }

.hsf-mobile__links a::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #4a4c52;
	border-right: 2px solid #4a4c52;
	transform: rotate(45deg);
	flex-shrink: 0;
}

.hsf-mobile__links a[aria-current="page"] { color: #d90429; }
.hsf-mobile__links a[aria-current="page"]::after { border-color: #d90429; }

/* The two actions are always on screen, side by side. */
.hsf-mobile__actions {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 10px;
	padding-top: 14px;
}

.hsf-mobile__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-sizing: border-box;
}

.hsf-mobile__cta--red { background: #d90429; color: #ffffff; }
.hsf-mobile__cta--ghost { border: 1px solid #3a3c42; color: #ffffff; }

/* Full bar from 1024px up, which covers every iPad in landscape. The menu
   button is only for portrait tablets and phones. */
@media (max-width: 1023px) {
	.hsf-navbar .hsf-navpill,
	.hsf-navbar .hsf-navactions { display: none !important; }
	.hsf-toggle { display: grid; }
}

/* Tablet landscape and small laptops: the same bar, tightened so it fits. */
@media (min-width: 1024px) and (max-width: 1365px) {
	.hsf-page .hsf-navbar { top: 18px !important; left: 16px !important; right: 16px !important; }
	.hsf-navbar > a:first-child { padding: 2px 4px !important; }
	.hsf-navbar > a:first-child svg { width: 76px; height: 45px; }
	.hsf-navpill { padding: 5px 6px !important; gap: 0 !important; }
	.hsf-navpill a { padding: 10px 11px !important; font-size: 12.5px !important; }
	.hsf-navpill a::after { left: 11px; right: 11px; bottom: 6px; }
	.hsf-navactions { gap: 6px !important; }
	.hsf-navactions a { padding: 7px 7px 7px 16px !important; font-size: 13px !important; gap: 8px !important; }
	.hsf-navactions a > span { width: 28px !important; height: 28px !important; }
}

/* Below 900px the design's absolute positioning and fixed heights are
   released so every section flows down the page instead of sitting off it.
   Background layers (inset: 0) stay absolute so heroes keep their image. */
@media (max-width: 900px) {

	/* 1. Nothing is pinned to a fixed height. */
	.hsf-page [style*="height: 800px"],
	.hsf-page [style*="height: 760px"],
	.hsf-page [style*="height: 720px"],
	.hsf-page [style*="height: 700px"],
	.hsf-page [style*="height: 640px"],
	.hsf-page [style*="height: 600px"],
	.hsf-page [style*="height: 560px"],
	.hsf-page [style*="height: 520px"],
	.hsf-page [style*="height: 480px"] {
		height: auto !important;
	}

	.hsf-page [style*="min-height: 640px"],
	.hsf-page [style*="min-height: 620px"],
	.hsf-page [style*="min-height: 560px"],
	.hsf-page [style*="min-height: 520px"],
	.hsf-page [style*="min-height: 460px"] {
		min-height: 320px !important;
	}

	/* 2. Absolutely placed content returns to the flow; background layers do not. */
	.hsf-page [style*="position: absolute"] {
		position: static !important;
		width: auto !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
	}

	/* Background layers keep filling their panel. The reset above clears
	   top/right/bottom/left, which would otherwise collapse these to nothing. */
	.hsf-page [style*="position: absolute"][style*="inset: 0"] {
		position: absolute !important;
		inset: 0 !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		z-index: 0 !important;
	}

	/* 3. Panels that held absolute content need their own padding back. */
	.hsf-page > div[style*="position: relative"] {
		padding: 22px 22px 28px !important;
	}

	/* Content sits above the background and overlay layers. z-index only
	   applies to positioned elements, so these have to be relative. */
	.hsf-page > div[style*="position: relative"] > *:not([style*="inset: 0"]),
	.hsf-page > div[style*="overflow: hidden"] > *:not([style*="inset: 0"]) {
		position: relative !important;
		z-index: 1 !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/* Blocks that were stacked by position now need spacing between them. */
	.hsf-page > div[style*="position: relative"] > *:not([style*="inset: 0"]) + *:not([style*="inset: 0"]) {
		margin-top: 22px !important;
	}

	/* 4. Every grid becomes a single column. */
	.hsf-page [style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* 5. Padding comes down across the board. */
	.hsf-page [style*="padding: 60px 56px"],
	.hsf-page [style*="padding: 56px 48px"],
	.hsf-page [style*="padding: 52px 48px"],
	.hsf-page [style*="padding: 56px"],
	.hsf-page [style*="padding: 52px 56px 36px 56px"],
	.hsf-page [style*="padding: 48px"],
	.hsf-page [style*="padding: 44px"],
	.hsf-page [style*="padding: 40px"] {
		padding: 28px 22px !important;
	}

	/* 6. Rows of pills, stats and buttons wrap instead of overflowing. */
	.hsf-page [style*="display: flex"][style*="gap: 30px"],
	.hsf-page [style*="display: flex"][style*="gap: 32px"],
	.hsf-page [style*="display: flex"][style*="align-items: stretch"],
	.hsf-page [style*="justify-content: space-between"] {
		flex-wrap: wrap !important;
		gap: 16px !important;
	}

	.hsf-page [style*="width: 1px"][style*="height: 46px"] { display: none !important; }

	/* 7. Media that was sized for the desktop canvas. */
	.hsf-page img,
	.hsf-page video { max-width: 100% !important; }

	.hsf-navbar { padding: 0 !important; }

	/* Placeholder labels for empty media slots stay inside their own box. */
	.hsf-page [style*="letter-spacing: 0.1em"][style*="text-transform: uppercase"][style*="inset: 0"] {
		font-size: 11px !important;
		padding: 8px !important;
		text-align: center !important;
	}
	.hsf-footer__base { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
	.hsf-footer__badges { flex-wrap: wrap !important; }

	/* Any horizontal row of pills or chips wraps. */
	.hsf-page [style*="display: flex"][style*="gap: 10px"],
	.hsf-page [style*="display: flex"][style*="gap: 8px"],
	.hsf-page [style*="display: flex"][style*="gap: 12px"],
	.hsf-page [style*="display: flex"][style*="gap: 14px"],
	.hsf-page [style*="display: flex"][style*="gap: 16px"] { flex-wrap: wrap !important; }

	/* Filter rows scroll sideways rather than pushing the page wide. */
	.hsf-page [style*="display: flex"][style*="gap: 8px"][style*="flex-wrap"],
	.hsf-page [style*="display: flex"][style*="gap: 10px"][style*="flex-wrap"] { flex-wrap: wrap !important; }
}

@media (max-width: 640px) {
	.hsf-page { padding: 12px; gap: 12px; }

	/* Long email addresses and URLs wrap rather than push the page wide. */
	.hsf-page a,
	.hsf-page p,
	.hsf-page div { overflow-wrap: anywhere; }

	.hsf-page [style*="padding: 26px 28px"],
	.hsf-page [style*="padding: 24px"],
	.hsf-page [style*="padding: 22px"] { padding: 20px 18px !important; }

	.hsf-page [style*="border-radius: 32px"] { border-radius: 24px !important; }
}


/* Grid columns never get pushed to nothing by a long unbroken word or
   number in the next column: grid items may shrink, and long strings wrap. */
.hsf-page [style*="display: grid"] > * { min-width: 0; }
.hsf-page h1, .hsf-page h2, .hsf-page h3, .hsf-page p { overflow-wrap: break-word; }

/* Nav interaction -------------------------------------------------------- */
.hsf-navpill a {
	position: relative;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.hsf-navpill a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 7px;
	height: 2px;
	background: #d90429;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.hsf-navpill a:hover { color: #ffffff; }
.hsf-navpill a:hover::after { transform: scaleX(1); }
.hsf-navpill a[aria-current="page"]::after { display: none; }

.hsf-navcta,
.hsf-navactions a { transition: transform 0.18s ease, background-color 0.18s ease; }
.hsf-navcta:hover,
.hsf-navactions a:hover { transform: translateY(-1px); }

.hsf-navbar a:focus-visible,
.hsf-mobile a:focus-visible { outline: 3px solid #207ff8; outline-offset: 3px; }

/* Video facades ---------------------------------------------------------- */
.hsf-video { display: block; }

.hsf-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 999px;
	background: #d90429;
	transition: transform 0.2s ease;
}

.hsf-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -6px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #ffffff;
}

.hsf-video:hover .hsf-video__play { transform: scale(1.06); }

/* The caption next to a film is drawn by the template, so the facade adds
   only the play control. */

/* Sections start hidden only when motion is available, so nothing is lost if
   the script fails. */
@media (prefers-reduced-motion: no-preference) {
	.js .hsf-page > div,
	.js .hsf-reveal { will-change: opacity, transform; }
}


/* Print and PDF ---------------------------------------------------------
   Some browsers (Safari in particular) print at the window's width and scale
   the result onto the paper, which clips a fixed desktop layout instead of
   reflowing it. These rules force the same single column flow the narrow
   screens get, whatever width the print viewport reports. */
@media print {
	.hsf-toggle,
	.hsf-mobile,
	.hsf-bar,
	.hsf-cookies,
	.hsf-navpill,
	.hsf-navactions { display: none !important; }

	html, body { background: #ffffff !important; }

	.hsf-page {
		max-width: none !important;
		width: auto !important;
		padding: 0 !important;
		gap: 12px !important;
	}

	.hsf-page * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Nothing is pinned to a height or to a corner. */
	.hsf-page [style*="height:"] { height: auto !important; }
	.hsf-page [style*="min-height:"] { min-height: 0 !important; }

	.hsf-page [style*="position: absolute"] {
		position: static !important;
		width: auto !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
	}

	.hsf-page [style*="position: absolute"][style*="inset: 0"] {
		position: absolute !important;
		inset: 0 !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		z-index: 0 !important;
	}

	.hsf-page > div[style*="position: relative"] > *:not([style*="inset: 0"]),
	.hsf-page > div[style*="overflow: hidden"] > *:not([style*="inset: 0"]) {
		position: relative !important;
		z-index: 1 !important;
	}

	.hsf-page > div[style*="position: relative"] { padding: 20px !important; }

	.hsf-page [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
	.hsf-page [style*="display: flex"] { flex-wrap: wrap !important; }

	.hsf-page [style*="padding: 60px"],
	.hsf-page [style*="padding: 56px"],
	.hsf-page [style*="padding: 52px"],
	.hsf-page [style*="padding: 48px"],
	.hsf-page [style*="padding: 44px"],
	.hsf-page [style*="padding: 40px"] { padding: 22px !important; }

	.hsf-page > div { break-inside: avoid; page-break-inside: avoid; }
	a[href]::after { content: ""; }
}

/* A fixed pixel width from the design never exceeds its container, whatever
   the viewport reports. This is belt and braces for the breakpoints above. */
.hsf-page [style*="width: 8"],
.hsf-page [style*="width: 7"],
.hsf-page [style*="width: 6"],
.hsf-page [style*="width: 5"],
.hsf-page [style*="width: 4"] { max-width: 100%; }


.hsf-player__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: rgba(13, 14, 16, 0.25);
	cursor: pointer;
}
.hsf-player__play:hover .hsf-video__play { transform: scale(1.06); }
.hsf-player__play:focus-visible { outline: 3px solid #207ff8; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
	.hsf-loop { display: none; }
}


/* ------------------------------------------------------------------------
   Phones and small tablets: less stacking, more rhythm.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {

	/* Repeating cards swipe sideways, with the next card peeking in so the
	   gesture is obvious. */
	.hsf-page .hsf-swipe {
		display: flex !important;
		gap: 12px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2px;
		padding-bottom: 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.hsf-page .hsf-swipe::-webkit-scrollbar { display: none; }
	.hsf-page .hsf-swipe > * {
		flex: 0 0 46%;
		scroll-snap-align: start;
		min-width: 0;
	}

	/* Stat tiles sit two to a row rather than one. */
	.hsf-page .hsf-pair[style*="grid-template-columns"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.hsf-page .hsf-pair > * { padding: 18px !important; }

	/* The sticky petition bar gets in the way on a small screen; the hero and
	   the menu both carry the petition. */
	.hsf-bar { display: none !important; }

	/* Home hero: counters as a tidy two by two, the button full width. */
	.hsf-page .hsf-hero__stats {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		margin-top: 26px !important;
	}
	.hsf-page .hsf-hero__counter {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px !important;
		padding: 18px 20px !important;
		border-radius: 20px !important;
		align-items: start !important;
	}
	.hsf-page .hsf-hero__counter [style*="font-size: clamp(26px"] { font-size: 34px !important; }
	.hsf-page .hsf-hero__counter [style*="letter-spacing: 0.08em"] { font-size: 11px !important; }
	.hsf-page .hsf-hero__cta {
		justify-content: space-between !important;
		min-height: 60px;
		padding: 8px 8px 8px 22px !important;
		border-radius: 20px !important;
		font-size: 16px !important;
	}
	.hsf-page .hsf-hero__content p { font-size: 17px !important; }
}

@media (max-width: 600px) {
	.hsf-page .hsf-swipe > * { flex-basis: 84%; }
}


/* ------------------------------------------------------------------------
   Phones, second pass.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {

	/* Home hero: a total, a goal and a bar, not four counters. Shorter box. */
	.hsf-page .hsf-hero__counter { display: none !important; }
	.hsf-page .hsf-hero__progress { display: block !important; }
	.hsf-page .hsf-hero__stats { margin-top: 20px !important; }
	.hsf-page .hsf-hero__content { gap: 16px !important; }
	.hsf-page .hsf-hero__content h1 { font-size: clamp(40px, 12vw, 56px) !important; }
	.hsf-page .hsf-hero__content p { font-size: 16px !important; line-height: 1.5 !important; }
	.hsf-page > div:first-child { padding-top: 96px !important; }
	.hsf-page > div:first-child .hsf-navbar { position: absolute !important; top: 20px !important; left: 20px !important; right: 20px !important; padding: 0 !important; }

	/* Stat tiles stack, each one a compact row: figure, then its label. */
	.hsf-page .hsf-stats[style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px !important;
	}
	.hsf-page .hsf-stats > * {
		display: flex !important;
		align-items: center;
		gap: 16px;
		padding: 16px 18px !important;
	}
	.hsf-page .hsf-stats > * > :first-child {
		flex: 0 0 116px;
		font-size: 32px !important;
		white-space: nowrap;
	}
	.hsf-page .hsf-stats > * > :last-child { margin-top: 0 !important; font-size: 14px !important; }


	/* Photo and film boxes are shorter on a phone. */
	.hsf-page [style*="min-height: 440px"],
	.hsf-page [style*="min-height: 480px"],
	.hsf-page [style*="min-height: 500px"] { min-height: 300px !important; }

	/* The quote is read, not shouted. */
	.hsf-page .hsf-quote { font-size: 19px !important; line-height: 1.5 !important; }

	/* The book: cover above the details. */
	.hsf-page .hsf-book {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
		padding: 24px !important;
	}
	.hsf-page .hsf-book > :first-child { width: 120px !important; height: 168px !important; }

	/* The petition strip closes pages: count on its own line, then the words. */
	.hsf-page .hsf-strip > div:first-child {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
	.hsf-page .hsf-strip [style*="font-size: 30px"] { font-size: 24px !important; }
	.hsf-page .hsf-strip > div:first-child > :first-child { font-size: 56px !important; line-height: 0.85 !important; }
}

/* Long profiles are trimmed with a Read more, on every screen size. */
.hsf-more:not(.is-open) {
	max-height: 11.5em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
	mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.hsf-more__toggle {
	align-self: flex-start;
	border: 1px solid #D8D8DC;
	background: transparent;
	color: #111113;
	border-radius: 999px;
	padding: 10px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.hsf-more__toggle:hover { background: #111113; color: #FFFFFF; }

/* Captions over photos stay readable whatever the picture. */
.hsf-overlay { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }

/* Cards on a dark, red or blue ground switch their text to light. */
.hsf-card--dark,
.hsf-card--red,
.hsf-card--blue { color: #ffffff !important; }
.hsf-card--dark [style*="color: #111113"]:not(a):not(a *),
.hsf-card--red [style*="color: #111113"]:not(a):not(a *),
.hsf-card--blue [style*="color: #111113"]:not(a):not(a *) { color: #ffffff !important; }
.hsf-card--dark [style*="color: #4A4A52"]:not(a):not(a *),
.hsf-card--dark [style*="color: #6E6E76"]:not(a):not(a *),
.hsf-card--dark [style*="color: #8C8C93"]:not(a):not(a *) { color: #C7C8CE !important; }
.hsf-card--red [style*="color: #4A4A52"]:not(a):not(a *),
.hsf-card--red [style*="color: #6E6E76"]:not(a):not(a *),
.hsf-card--red [style*="color: #8C8C93"]:not(a):not(a *) { color: #FFE3E7 !important; }
.hsf-card--blue [style*="color: #4A4A52"]:not(a):not(a *),
.hsf-card--blue [style*="color: #6E6E76"]:not(a):not(a *),
.hsf-card--blue [style*="color: #8C8C93"]:not(a):not(a *) { color: #DCEBFD !important; }
.hsf-card--red [style*="color: #D90429"]:not(a):not(a *) { color: #ffffff !important; }
.hsf-card--blue [style*="color: #D90429"]:not(a):not(a *),
.hsf-card--dark [style*="color: #D90429"]:not(a):not(a *) { color: #ff6b7d !important; }

/* Pill buttons never wrap or squash their arrow, whatever sits beside them. */
.hsf-page a[style*="border-radius: 999px"],
.hsf-page button[style*="border-radius: 999px"] { white-space: nowrap; flex-shrink: 0; }
.hsf-page a[style*="border-radius: 999px"] > span[style*="border-radius: 999px"] { flex-shrink: 0; }

/* The live map fits its panel rather than setting the panel's height. */
.hsf-ukmap { display: block; width: 100%; height: auto; max-height: 560px; margin: 0 auto; }
.hsf-ukmap path { transition: filter 0.15s ease; }
.hsf-ukmap path:hover { filter: brightness(1.25); }
@media (max-width: 900px) { .hsf-ukmap { max-height: 420px; } }

/* On a narrow phone a pill may break its text only if it would otherwise run
   off the screen (a long email address, say). Short labels still fit on one
   line, and the arrow stays round. */
@media (max-width: 420px) {
	.hsf-page a[style*="border-radius: 999px"] { max-width: 100%; white-space: normal; overflow-wrap: anywhere; flex-shrink: 1; min-width: 0; box-sizing: border-box; }
}

/* Captions laid over a photo or film stay over it on phones. */
@media (max-width: 900px) {
	.hsf-page .hsf-overlay {
		position: absolute !important;
		left: 18px !important;
		right: 18px !important;
		bottom: 16px !important;
		top: auto !important;
		width: auto !important;
		z-index: 2 !important;
		pointer-events: none;
	}
	.hsf-page .hsf-overlay a { pointer-events: auto; }
}

/* Myths and facts on phones: one pair per card, swiped sideways, with a
   counter so it is clear there are more. */
@media (max-width: 900px) {
	.hsf-page div.hsf-myths[class][style] {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		gap: 12px !important;
		padding-bottom: 6px;
		scrollbar-width: none;
		counter-reset: myth;
	}
	.hsf-page .hsf-myths::-webkit-scrollbar { display: none; }
	.hsf-page .hsf-myth {
		flex: 0 0 86%;
		scroll-snap-align: start;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px !important;
		align-content: start;
		counter-increment: myth;
	}
	.hsf-page .hsf-myth > * { padding: 22px !important; }
}

/* Story body: images and embeds fill the column. */
.hsf-entry__content img,
.hsf-entry__content iframe,
.hsf-entry__content video { max-width: 100%; height: auto; border-radius: 16px; }
.hsf-entry__content h2 { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3vw, 38px); line-height: 0.95; margin: 1.4em 0 0.5em; }
.hsf-entry__content h3 { font-size: 22px; line-height: 1.3; margin: 1.3em 0 0.4em; }
.hsf-entry__content p { margin: 0 0 1.1em; }
.hsf-entry__content blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 4px solid #D90429; font-size: 1.1em; font-weight: 600; }
@media (max-width: 900px) {
	.hsf-article__aside { position: static !important; }
	.hsf-page .hsf-article > div:first-child { padding: 26px 22px !important; }
}

/* ------------------------------------------------------------------------
   Home hero.
   Desktop: the heading gets a wider measure so it sits on two lines rather
   than three, at the same size. Line breaks typed into the heading give way.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
	.hsf-page .hsf-hero--home .hsf-hero__content { width: min(1060px, calc(100% - 112px)) !important; }
	.hsf-page .hsf-hero--home .hsf-hero__content p { max-width: 620px !important; }
	.hsf-hero--home h1 .hsf-br { display: none; }
}

/* Phones: the photo is shown whole as a picture at the top of the panel,
   not stretched behind the words; the words sit on the dark panel below it. */
@media (max-width: 900px) {
	.hsf-page .hsf-hero--home {
		display: flex !important;
		flex-direction: column !important;
		padding: 88px 18px 20px !important;
	}
	.hsf-page .hsf-hero--home > div:first-child {
		position: relative !important;
		inset: auto !important;
		top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
		width: 100% !important;
		aspect-ratio: 16 / 9;
		border-radius: 18px;
		overflow: hidden;
		margin-bottom: 18px;
		z-index: 1 !important;
	}
	.hsf-page .hsf-hero--home > div:first-child:not(:has(img, video)) { display: none !important; }
	.hsf-page .hsf-hero--home > div:nth-child(2) { display: none !important; }
	.hsf-page .hsf-hero--home .hsf-hero__content { margin-top: 0 !important; }
	.hsf-hero--home h1 .hsf-br { display: none; }

	/* Petition: no background photo on phones, just the dark panel. */
	.hsf-page .hsf-hero--petition > div:first-child,
	.hsf-page .hsf-hero--petition > div:nth-child(2) { display: none !important; }
}

/* The bar's parts never squash or wrap their labels; if they don't fit, the
   menu button takes over instead. */
.hsf-navbar > * { flex-shrink: 0; }
.hsf-navpill a { white-space: nowrap; }

/* On a tablet the menu panel keeps a phone-like column rather than stretching. */
@media (min-width: 700px) {
	.hsf-mobile { align-items: center; }
	.hsf-mobile__head,
	.hsf-mobile__links,
	.hsf-mobile__actions { width: 100%; max-width: 560px; }
}

/* The smallest landscape iPads (1024 to 1119px) tighten the links a little
   further. The buttons keep their arrows. */
@media (min-width: 1024px) and (max-width: 1119px) {
	.hsf-navbar > a:first-child svg { width: 68px; height: 40px; }
	.hsf-navpill a { padding: 10px 9px !important; font-size: 12px !important; }
	.hsf-navpill a::after { left: 9px; right: 9px; }
}

/* Home hero counters on tablets: the same row, tightened so it stays inside
   the panel and every label stays on one line. */
@media (min-width: 901px) and (max-width: 1199px) {
	.hsf-page .hsf-hero__counter { gap: 18px !important; padding: 16px 20px !important; }
	.hsf-page .hsf-hero__counter [style*="font-size: clamp(26px"] { font-size: 36px !important; }
	.hsf-page .hsf-hero__counter [style*="letter-spacing: 0.08em"] { font-size: 10.5px !important; white-space: nowrap; }
	.hsf-page .hsf-hero__cta { padding: 0 10px 0 20px !important; font-size: 15px !important; gap: 10px !important; white-space: nowrap; }
	.hsf-page .hsf-hero__cta > span { width: 38px !important; height: 38px !important; }
}

/* Team page, phones: the founder's photo or video is a 4:5 frame, not a full
   screen height, cropped from the top so the face stays in shot. */
@media (max-width: 900px) {
	.hsf-page [style*="min-height: 760px"] {
		min-height: 0 !important;
		height: 320px !important;
		width: 100% !important;
	}
	.hsf-page [style*="min-height: 760px"] img,
	.hsf-page [style*="min-height: 760px"] video { object-position: 50% 20% !important; }
}


/* Home heading: campaign line in red above, the ask as a two-line block. */
.hsf-heading__lead {
	display: block;
	color: #D90429;
	font-size: max(0.4em, 22px);
	line-height: 1;
	letter-spacing: 0.02em;
	margin-bottom: 0.18em;
}
.hsf-heading__ask { display: block; }

/* Home hero petition progress: the card replaces the four counters. */
.hsf-page .hsf-hero__counter { display: none !important; }
.hsf-page .hsf-hero__progress { display: block !important; }

/* Desktop and tablet: count, bar and goal in one row, days left as its own
   figure at the end, and the detail line underneath. */
@media (min-width: 901px) {
	.hsf-page .hsf-hero__progress {
		display: grid !important;
		grid-template-columns: auto minmax(140px, 1fr) auto auto;
		grid-template-areas: "count bar goal days" "detail detail detail days";
		align-items: center;
		column-gap: 24px;
		row-gap: 8px;
		width: 760px;
		max-width: calc(100vw - 440px);
		padding: 18px 26px !important;
		border-radius: 22px !important;
		box-sizing: border-box;
	}
	.hsf-page .hsf-hero__progress > div:first-child { display: contents !important; }
	.hsf-page .hsf-hero__progress > div:first-child > div:first-child { grid-area: count; }
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child { grid-area: goal; }
	.hsf-page .hsf-hero__progress [role="progressbar"] { grid-area: bar; margin-top: 0 !important; height: 12px !important; }
	.hsf-page .hsf-hero__progress-detail { grid-area: detail; display: block !important; margin-top: 0 !important; }
	.hsf-page .hsf-hero__progress-days { grid-area: days; display: block !important; padding-left: 24px; border-left: 1px solid #E6E6EA; align-self: stretch; display: flex !important; flex-direction: column; justify-content: center; }
	.hsf-page .hsf-hero__progress [style*="font-size: 38px"] { font-size: 46px !important; }
	.hsf-page .hsf-hero__progress [style*="font-size: 22px"] { font-size: 26px !important; }
}

/* Smaller landscape iPads: the same card, tightened so it stays one row. */
@media (min-width: 901px) and (max-width: 1119px) {
	.hsf-page .hsf-hero__progress { column-gap: 16px !important; padding: 16px 20px !important; grid-template-columns: auto minmax(90px, 1fr) auto auto !important; }
	.hsf-page .hsf-hero__progress [style*="font-size: 38px"] { font-size: 40px !important; }
	.hsf-page .hsf-hero__progress [style*="font-size: 22px"] { font-size: 22px !important; }
	.hsf-page .hsf-hero__progress-days { padding-left: 16px !important; }
	.hsf-page .hsf-hero__progress-days > div:first-child { font-size: 40px !important; }
	.hsf-page .hsf-hero__progress-detail { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Desktop and tablet card: all three figures the same size, each with its
   label underneath, as the old counters had them. */
@media (min-width: 901px) {
	.hsf-page .hsf-hero__progress { padding: 16px 26px !important; row-gap: 6px !important; }
	.hsf-page .hsf-hero__progress > div:first-child > div:first-child > span:last-child {
		display: block; margin: 4px 0 0 0 !important;
		font-size: 12px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6E6E76;
	}
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child { text-align: left !important; }
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child > div:first-child { font-size: 46px !important; line-height: 0.9 !important; }
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child > div:last-child {
		margin-top: 4px !important;
		font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; color: #6E6E76 !important;
	}
}
@media (min-width: 901px) and (max-width: 1119px) {
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child > div:first-child { font-size: 40px !important; }
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child > div:last-child,
	.hsf-page .hsf-hero__progress > div:first-child > div:first-child > span:last-child { font-size: 11px !important; }
}

/* The detail line sits under the bar in the middle column, so the figures
   set the card's height and no extra row is added. */
@media (min-width: 901px) {
	.hsf-page .hsf-hero__progress {
		grid-template-areas: "count bar goal days" "count detail goal days" !important;
		grid-template-rows: auto auto;
		align-content: center;
		row-gap: 8px !important;
	}
	.hsf-page .hsf-hero__progress > div:first-child > div:first-child,
	.hsf-page .hsf-hero__progress > div:first-child > div:last-child { align-self: center; }
	.hsf-page .hsf-hero__progress [role="progressbar"] { align-self: end; }
	.hsf-page .hsf-hero__progress-detail { align-self: start; font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
@media (min-width: 901px) {
	.hsf-page .hsf-hero__progress-detail { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35; }
}

/* Donate: when a donation form (SureCart) replaces the amount buttons, the
   card can be taller than the 800px hero, so the hero grows with it rather
   than cropping the form. Phones already flow, so this is desktop and tablet. */
.hsf-donate-embed { width: 100%; min-width: 0; }
.hsf-donate-embed > * { max-width: 100%; }
@media (min-width: 901px) {
	.hsf-page .hsf-donate-hero.has-embed { height: auto !important; min-height: 800px; }
	.hsf-page .hsf-donate-hero.has-embed .hsf-give {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		margin: 130px 56px 56px auto;
		z-index: 1;
	}
}