body {
	font-family: 'Roboto', sans-serif;
	padding-top: var(--navbar-height);
}

a {
	text-decoration: none;
}

/******************** Colors ****************/

:root {
	--color-purple: #310269;
	--color-fearless-blue: #354A5E;
	--color-indigo: #000084;
	--color-neutral-100: #F4F5FB;
	--color-neutral-300: #F1F3F7;
	--color-neutral-400: #E1E4ED;
	--color-neutral-600: #6D758F;
	--color-shadow: #19213D;
	--color-body-text: #333;
	--color-light-gray: #F4F4F4;
	--color-light-blue: #DEEEFA;
	--color-dark-teal: #006B66;
	--color-teal: #30C2AF;
	--color-teal-hover: #0A9B9B;
	--gradient-purple-indigo: linear-gradient(148deg, #8D73FF -17.74%, #000084 64.37%);
	--gradient-green-teal: linear-gradient(150deg, #00F9D0 -17.74%, #007672 59.41%);
	--gradient-teal-dark-green: linear-gradient(180deg, #00D4D4 -11.59%, #0E7E97 19.53%, #2C5063 100%);
	--gradient-green-teal-hover: linear-gradient(177deg, #00F9D0 -7.33%, #007672 106%, #00877E 106%);
	--shadow-card: 2px 4px 10px rgba(0, 0, 0, .1);
	--shadow-soft: 0 1px 4px color-mix(in srgb, var(--color-shadow) 8%, transparent);
	--shadow-soft-hover: 0 1px 4px color-mix(in srgb, var(--color-shadow) 15%, transparent);
	--shadow-subtle: 0 .5px 2px color-mix(in srgb, var(--color-shadow) 10%, transparent);
	--shadow-nav: 0 2px 8px rgba(0, 0, 0, .08);
	--radius-lg: 24px;
	--radius-md: 16px;

	/* Fixed navbar height at every width: 70px logo + 2 x 8px logo padding + 2 x 5px brand padding. Offsets the body content, the mobile hero and the offcanvas menu. */
	--navbar-height: 96px;
}

.text-indigo { color: var(--color-indigo); }
.text-body-text { color: var(--color-body-text); }

.bg-light-gray { background: var(--color-light-gray); }
.bg-indigo { background: var(--color-indigo); }
.bg-gradient-indigo { background: var(--gradient-purple-indigo); }

/******************** Headings ****************/

h1 {
	font-size: 70px;
	font-weight: 700;
	line-height: 1.1;
}

h2 {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-body-text);
	overflow-wrap: break-word;
}

h4 {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.143;
}

/* Opt-in: balances the lines of a wrapped title, so no single word is left on its own line. */
.text-balance {
	text-wrap: balance;
}

/******************** Navigation text ****************/

.navbar-nav .nav-link,
.footer-nav a {
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
}

/* Menu links turn teal on hover/focus, in the navbar (including the dropdown items) and the footer (menu and legal links). */
#wrapper-navbar #main-nav .nav-link:hover,
#wrapper-navbar #main-nav .nav-link:focus-visible,
#wrapper-footer .footer-nav a:hover,
#wrapper-footer .footer-nav a:focus-visible,
#wrapper-footer .site-info a:hover,
#wrapper-footer .site-info a:focus-visible {
	color: var(--color-teal);
}

/******************** Typography helpers ****************/

.text-body-med {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-body-text);
}

.text-display-2 {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.text-display-2-semibold {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

/* Text links (in body text and in FAQ answers) share one hover colour, underlined or not. */
.text-body-med a:hover,
.text-body-med a:focus-visible,
.text-note a:hover,
.text-note a:focus-visible,
.faq-item .accordion-body a:hover,
.faq-item .accordion-body a:focus-visible,
.card-soft h4 a:hover,
.card-soft h4 a:focus-visible {
	color: var(--color-teal-hover);
}

/* On the dark question card the link is white, and the hover is the lighter teal used on the footer links. */
.questions-card a {
	color: var(--bs-white);
}

.questions-card a:hover,
.questions-card a:focus-visible {
	color: var(--color-teal);
}

.text-body-sm {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.375;
}

.text-note {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-neutral-600);
}

.text-note a {
	color: inherit;
	text-decoration: underline;
}

/******************** Buttons ****************/

.btn-green-teal {
	--bs-btn-padding-x: 18px;
	--bs-btn-padding-y: 14px;
	--bs-btn-font-size: 18px;
	--bs-btn-font-weight: 600;
	--bs-btn-line-height: 20px;
	--bs-btn-border-radius: 25px;
	--bs-btn-color: var(--bs-white);
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-active-color: var(--bs-white);
	--bs-btn-border-color: var(--color-teal);
	--bs-btn-hover-border-color: var(--color-teal);
	--bs-btn-active-border-color: var(--color-teal);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
	background: var(--gradient-green-teal);
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .2) inset;
}

/* On very narrow screens a long label wraps onto two lines instead of running past the screen edge. */
@media (max-width: 339.98px) {
	.btn-green-teal {
		--bs-btn-line-height: 1.2;
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}

.btn-green-teal:hover {
	background: var(--gradient-green-teal-hover);
}

/******************** Shared soft card ****************/

.card-soft {
	border: 1px solid #E5E7EB;
	border-radius: var(--radius-md);
	background: var(--bs-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/******************** Shared grid gutters ****************/

.row-gap-22 {
	--bs-gutter-x: 22px;
	--bs-gutter-y: 22px;
}

@media (min-width: 992px) {
	.gutter-x-lg-80 {
		--bs-gutter-x: 80px;
	}

	.gutter-y-lg-64 {
		--bs-gutter-y: 64px;
	}
}

.row-gap-50 {
	--bs-gutter-y: 50px;
}

/* Below sm the row's negative margin would be wider than the container's side padding and push the page sideways, so the wide gutter starts at sm. */
@media (min-width: 576px) {
	.row-gap-50 {
		--bs-gutter-x: 50px;
	}
}

/******************** Shared site container ****************/

:root {
	--site-container: 100%;
}

@media (min-width: 992px) {
	:root {
		--site-container: 960px;
	}
}

@media (min-width: 1200px) {
	:root {
		--site-container: 1140px;
	}
}

@media (min-width: 1400px) {
	:root {
		--site-container: 1330px;
	}

	.container {
		max-width: var(--site-container);
	}
}

/******************** Shared bleed image (About CAR-T / Locate a Treatment Center / Download Guide) ****************/

@media (min-width: 992px) {
	:root {
		/* The space between the container edge and the screen edge, so the image always reaches the screen edge, however wide the screen. */
		--bleed: calc((100vw - var(--site-container)) / 2);
		--bleed-gap: clamp(3rem, 5vw, 6rem);
	}
}

/******************** Shared bleed image: <img class="bleed-image bleed-image-start|end"> or inside <figure class="bleed-figure ...">, in a .bleed-col-start|end column ****************/

.bleed-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.bleed-figure {
	display: block;
	aspect-ratio: 4 / 3;
}

.bleed-figure .bleed-image {
	height: 100%;
}

@media (min-width: 768px) {
	.bleed-image,
	.bleed-figure {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 992px) {
	.bleed-image,
	.bleed-figure {
		width: calc(100% + var(--bleed) - var(--bleed-gap));
		max-width: none;
		height: 100%;
		min-height: 450px;
		aspect-ratio: auto;
	}

	.bleed-figure .bleed-image {
		width: 100%;
		margin-left: 0;
	}

	#who-is-eligible .bleed-figure {
		min-height: 380px;
	}

	/* Stretch the column to the row's height so the image is never shorter than the text beside it. */
	.bleed-col-end,
	.bleed-col-start {
		align-self: stretch;
	}

	.bleed-col-end {
		padding-right: 0;
	}

	.bleed-col-start {
		padding-left: 0;
	}

	.bleed-image-end {
		margin-left: var(--bleed-gap);
		object-position: right center;
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}

	.bleed-image-start {
		margin-left: calc(-1 * var(--bleed));
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	}

	/* A figure carries the offset; the image inside just fills it. */
	.bleed-figure-end {
		margin-left: var(--bleed-gap);
	}

	.bleed-figure-start {
		margin-left: calc(-1 * var(--bleed));
	}
}

/* Image in the full-width (xxl) layout of the media section: rounded only on the side away from the screen edge. */
.edge-image-end {
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.edge-image-start {
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/******************** Hero (homepage) ****************/

.hero-section {
	background: var(--bs-white);
	padding-bottom: 3%;
}

.hero-content-position {
	top: 42%;
	transform: translateY(-50%);
	z-index: 2;
}

@media (min-width: 992px) {
	.hero-text-col {
		padding-left: 5rem;
	}
}

.hero-stroke {
	bottom: 0;
}

.hero-bg {
	min-height: 620px;
	object-fit: cover;
	object-position: center;
	clip-path: polygon(0 0, 100% 0, 100% 66%, 48% 100%, 0 100%);
}

.hero-title-logo {
	width: 100%;
	max-width: 405px;
}

.hero-disclaimer {
	opacity: .85;
}

.hero-disclaimer-home {
	bottom: 12%;
	left: 5%;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.hero-bg {
		clip-path: polygon(0 0, 100% 0, 100% 74%, 42% 100%, 0 100%);
	}
}

@media (max-width: 991.98px) {
	.hero-bg {
		min-height: 680px;
		clip-path: polygon(0 0, 100% 0, 100% 84%, 36% 100%, 0 100%);
	}

	.hero-content-position {
		top: 45%;
	}
}

@media (max-width: 767.98px) {
	/* The navbar is a solid bar here, so push the whole hero below it. */
	.hero-section {
		margin-top: var(--navbar-height);
	}

	/* The ribbon is full width, so it shrinks with the screen. Keep a minimum height and crop the sides instead,
	   which makes it look larger as the screen gets narrower. */
	.hero-stroke {
		min-height: 180px;
		object-fit: cover;
		object-position: center bottom;
	}

	.hero-bg {
		min-height: 620px;
		object-position: left;
		clip-path: polygon(0 0, 100% 0, 100% 91%, 30% 100%, 0 100%);
	}

	/* Sit the text block just above the ribbon. The ribbon is full width, so its height grows with the screen and the offset has to as well. */
	.hero-content-position {
		top: auto;
		bottom: clamp(7.5rem, calc(61.5vw - 10rem), 20rem);
		transform: none;
	}

	/* Keep "Actor portrayal" below the button: the 12% desktop offset lands level with it on small screens. */
	.hero-disclaimer-home {
		bottom: 3.3rem;
	}

	/* The column is exactly as wide as the title, so the tagline wraps to the same width. */
	.hero-text-col {
		width: calc(min(405px, 65vw) + var(--bs-gutter-x));
		margin-inline: auto;
	}
}

@media (max-width: 575.98px) {
	.hero-bg {
		clip-path: polygon(0 0, 100% 0, 100% 92%, 18% 100%, 0 100%);
	}

	.hero-disclaimer-home {
		left: 0;
	}
}

@media (max-width: 400px) {
	.hero-bg {
		object-position: center;
	}
}

/******************** Content cards ****************/

.card-gradient {
	min-height: 397px;
	background: var(--gradient-purple-indigo);
	color: var(--bs-white);
	box-shadow: var(--shadow-card);
	transition: transform .3s ease;
}

.card-gradient:hover,
.card-gradient:focus-visible {
	background: var(--gradient-teal-dark-green);
	transform: translateY(-4px);
}

.card-gradient-icon {
	width: 80px;
	height: 80px;
	object-fit: contain;
	object-position: left center;
}

.card-gradient::after {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-top: auto;
	margin-left: auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.card-gradient:focus-visible,
.org-card:focus-visible,
.resource-download:focus-visible,
.page-breadcrumb-link:focus-visible {
	outline: 3px solid var(--color-purple);
	outline-offset: 4px;
}

/* The accordion clips its own overflow, so the ring sits inside the item. */
.faq-button:focus-visible {
	outline: 3px solid var(--color-purple);
	outline-offset: -3px;
}

/******************** Helpful resources ****************/

.resource-grid {
	max-width: 730px;
}

.resource-card {
	--bs-card-spacer-x: 24px;
	--bs-card-spacer-y: 24px;
	min-height: 429px;
	border: 1px solid var(--color-neutral-400);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: box-shadow .3s ease;
}

.resource-card-media img {
	display: block;
	width: 100%;
	height: 228px;
	object-fit: cover;
	transition: transform .3s ease;
}

.resource-card:hover,
.resource-card:focus-within {
	box-shadow: var(--shadow-soft-hover);
}

.resource-card:hover .resource-card-media img,
.resource-card:focus-within .resource-card-media img {
	transform: scale(1.05);
}

/* "Actor portrayal(s)" text: one style for the hero and for captions on images. Only their placement differs. */
.portrayal-caption,
.hero-disclaimer {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

.portrayal-caption {
	left: 35px;
	bottom: 20px;
}

.portrayal-caption-end {
	left: auto;
	right: 35px;
}

/* On the resource cards the caption sits 20px from the corner, matching its bottom offset. */
.resource-card-media .portrayal-caption-end,
.planning-figure .portrayal-caption-end {
	right: 20px;
}

.resource-badge {
	padding: 5px 10px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--color-indigo) 15%, transparent);
}

.resource-card h4 {
	margin: 0;
}

.resource-download {
	gap: 10px;
	width: fit-content;
}

/* The previous colour (dark teal) is now the hover colour. */
.resource-card:hover .resource-download,
.resource-download:hover {
	color: var(--color-dark-teal);
}

/* The download icon is drawn with ::before (shown after the text), because Bootstrap's stretched-link uses ::after to cover the whole card. */
.resource-download::before {
	order: 1;
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0 5-5m-5 5-5-5M5 17v3h14v-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0 5-5m-5 5-5-5M5 17v3h14v-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/******************** Tablet / mobile ****************/

@media (max-width: 767.98px) {
	.resource-grid {
		max-width: none;
	}

	.resource-card {
		min-height: 0;
	}

	.resource-card-media img {
		height: auto;
		aspect-ratio: 354 / 228;
	}
}

/******************** Navbar ****************/

#wrapper-navbar {
	background: var(--bs-white);
	box-shadow: var(--shadow-nav);
	transition: transform .3s ease;
}

#wrapper-navbar.nav-hidden {
	transform: translateY(-100%);
}

body.admin-bar #wrapper-navbar {
	top: 32px;
}

.navbar-brand-logo {
	height: 70px;
	width: auto;
	padding-block: 8px;
}

.navbar-brand-logo-white {
	display: none;
}

/* Phones keep the solid white bar so the hero photo starts below it; the transparent bar is for 768px and up. */
@media (min-width: 768px) {
	#wrapper-navbar.navbar-transparent {
		background: transparent;
		box-shadow: none;
	}

	#wrapper-navbar.navbar-transparent.navbar-scrolled {
		background: var(--bs-white);
		box-shadow: var(--shadow-nav);
	}

	#wrapper-navbar.navbar-transparent:not(.navbar-scrolled) .navbar-brand-logo-color {
		display: none;
	}

	#wrapper-navbar.navbar-transparent:not(.navbar-scrolled) .navbar-brand-logo-white {
		display: inline-block;
	}

	/* Bootstrap's dark navbar uses 55% white for links; on the transparent bar they should be solid white. */
	#wrapper-navbar.navbar-transparent:not(.navbar-scrolled) #main-nav {
		--bs-navbar-color: var(--bs-white);
		--bs-navbar-hover-color: var(--bs-white);
		--bs-navbar-active-color: var(--bs-white);
	}
}

.navbar-nav {
	gap: 32px;
}

#wrapper-navbar:not(.navbar-transparent) .nav-link,
#wrapper-navbar.navbar-scrolled .nav-link {
	color: var(--color-indigo);
}

/* Parent items are real links (no Bootstrap toggle), so the submenu is opened here: on hover/focus from lg, and always listed in the mobile menu. */
@media (min-width: 992px) {
	#main-nav .menu-item-has-children:hover > .dropdown-menu,
	#main-nav .menu-item-has-children:focus-within > .dropdown-menu {
		display: block;
	}
}

#main-nav .dropdown-menu {
	--bs-dropdown-link-color: var(--color-indigo);
	--bs-dropdown-link-hover-color: var(--color-teal);
	--bs-dropdown-link-active-color: var(--color-indigo);
	--bs-dropdown-link-hover-bg: transparent;
	--bs-dropdown-link-active-bg: transparent;
}

/* Desktop dropdown panel: square top edge under the bar, 24px rounded bottom corners. In the mobile offcanvas the submenu is inline, so it keeps Bootstrap's defaults. */
@media (min-width: 992px) {
	#main-nav .dropdown-menu {
		--bs-dropdown-bg: var(--bs-white);
		--bs-dropdown-border-width: 0;
		--bs-dropdown-border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		--bs-dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
		--bs-dropdown-spacer: 0;
		--bs-dropdown-padding-y: 1rem;
		--bs-dropdown-item-padding-x: 1.5rem;
		--bs-dropdown-item-padding-y: 0.5rem;
		/* Clip the hover/focus background to the rounded corners. */
		overflow: hidden;
	}
}

#main-nav {
	/* The chevron sits well inside the 12x12 box so the rounded ends are not clipped to square corners. */
	--chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#main-nav .dropdown-toggle::after {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	vertical-align: middle;
	content: "";
	border: 0;
	background-color: currentColor;
	-webkit-mask: var(--chevron-down) center / contain no-repeat;
	mask: var(--chevron-down) center / contain no-repeat;
}

/* The submenu opens with no slide, so the chevron and the panel change together. */
#main-nav .collapsing {
	transition: none;
}

/* Mobile menu: centred items. The parent is a link with a chevron button right beside it; the button opens a rounded panel with the sub pages (the button is hidden from lg). */
@media (max-width: 991.98px) {
	#main-nav .offcanvas-nav-top .nav-link {
		text-align: center;
	}

	#main-nav .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	/* The button's chevron replaces the one on the link. */
	#main-nav .menu-item-has-children > .dropdown-toggle::after {
		display: none;
	}

	#main-nav .menu-item-has-children > .dropdown-menu {
		flex: 0 0 100%;
		margin: 0.75rem 0 0;
		padding: 1rem;
		border: 0;
		border-radius: var(--radius-lg);
		background: var(--color-neutral-100);
		text-align: center;
		--bs-dropdown-item-padding-y: 0.5rem;
	}

	#main-nav .dropdown-item {
		white-space: normal;
		text-align: center;
	}
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-indigo);
}

.submenu-toggle::after {
	content: "";
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--chevron-down) center / contain no-repeat;
	mask: var(--chevron-down) center / contain no-repeat;
}

.submenu-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.nav-search-btn {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Inline search from lg: a 40px box that opens into a bar while its field has focus. */
.nav-search {
	height: 40px;
	border: 1px solid var(--color-neutral-400);
	border-radius: 8px;
	background: var(--color-neutral-100);
}

.nav-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	color: var(--color-indigo);
	cursor: pointer;
}

.nav-search-field {
	width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	outline: 0;
}

.nav-search:focus-within .nav-search-field {
	width: 160px;
	padding-right: 12px;
}

.nav-search:focus-within .nav-search-icon {
	color: var(--color-teal-hover);
}

.nav-search-btn svg {
	width: 24px;
	height: 24px;
}

/* Search panel (native popover): a card under the navbar, centred, with a dimmed backdrop. */
.site-search {
	inset: var(--navbar-height) 0 auto;
	width: min(100% - 2rem, 640px);
	margin: 0 auto;
	padding: 1.5rem;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--bs-white);
	box-shadow: var(--shadow-card);
}

.site-search::backdrop {
	background: rgba(0, 0, 0, .4);
}

/******************** Footer ****************/

#wrapper-footer {
	background: var(--color-indigo);
	border-top: 1px solid var(--color-neutral-300);
	color: var(--bs-white);
	padding-top: 3rem;
	padding-bottom: 5rem;
}

#wrapper-footer .footer-logo {
	height: 80px;
	width: auto;
	padding-block: 5px;
}

#wrapper-footer .legend-logo {
	height: 50px;
	width: auto;
	margin-top: -8px;
}

#wrapper-footer .footer-nav a {
	color: var(--bs-white);
}

#wrapper-footer .site-info,
#wrapper-footer .site-info a {
	color: rgba(255, 255, 255, .8);
	font-weight: 400;
	line-height: 22px;
}

#wrapper-footer .site-info a {
	text-decoration: underline;
}

#wrapper-footer .newsletter {
	max-width: 420px;
}

#wrapper-footer .newsletter-form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 8px 22px;
	border-radius: var(--bs-border-radius-pill);
	box-shadow: var(--shadow-soft);
}

#wrapper-footer .newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 16px;
	line-height: 20px;
}

/* No focus highlight on the field; the text cursor shows where you are typing. */
#wrapper-footer .newsletter-form input[type="email"]:focus {
	outline: 0;
	box-shadow: none;
}

#wrapper-footer .newsletter-form input[type="email"]::placeholder {
	color: var(--color-neutral-600);
	opacity: 1;
}

/* On very narrow screens the field and the button no longer fit on one row, so the button drops under the field. */
@media (max-width: 349.98px) {
	#wrapper-footer .newsletter-form {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		padding: 12px;
		border-radius: var(--radius-lg);
	}

	#wrapper-footer .newsletter-form input[type="email"] {
		padding: 8px 12px;
	}
}

/******************** Responsive ****************/

@media (max-width: 991.98px) {
	.offcanvas-nav-top {
		margin-top: var(--navbar-height);
	}

	.offcanvas-nav-top .nav-link {
		color: var(--color-indigo);
	}

	.navbar-toggler {
		/* No side padding so the icon is exactly 24px wide and sits 8px from the search icon; the vertical padding keeps a tall tap area. */
		--bs-navbar-toggler-padding-x: 0;
		--bs-navbar-toggler-padding-y: 0.75rem;
		position: relative;
		z-index: 1051;
		color: var(--color-indigo);
		border: 0;
	}

	.navbar-toggler:focus {
		box-shadow: none;
	}

	.navbar-toggler-icon,
	.navbar-toggler-icon::before,
	.navbar-toggler-icon::after {
		display: block;
		width: 24px;
		height: 2px;
		background-color: currentColor;
		background-image: none;
		transition: transform .3s, background-color .3s;
	}

	.navbar-toggler-icon {
		position: relative;
	}

	.navbar-toggler-icon::before,
	.navbar-toggler-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.navbar-toggler-icon::before {
		top: -7px;
	}

	.navbar-toggler-icon::after {
		top: 7px;
	}

	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
		background-color: transparent;
	}

	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
		transform: translateY(7px) rotate(45deg);
	}

	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	#wrapper-navbar.navbar-transparent:not(.navbar-scrolled) .navbar-toggler:not([aria-expanded="true"]) {
		color: var(--bs-white);
	}
}

@media (max-width: 782px) {
	body.admin-bar #wrapper-navbar {
		top: 46px;
	}
}

/* WordPress lets the admin bar scroll away below 600px, but the navbar stays offset below it, leaving a gap with the page showing through. Keep the admin bar fixed so both stay in place (logged-in users only). */
@media (max-width: 600px) {
	body #wpadminbar {
		position: fixed;
	}
}

@media (max-width: 767.98px) {
	.footer-nav {
		flex-direction: column;
	}

	#content-cards .row {
		--bs-gutter-y: 16px;
	}

	.card-gradient {
		min-height: 360px;
	}

	.card-gradient-icon {
		width: 72px;
		height: 72px;
	}
}

/* Phone type (under 576px): only the h1 and the hero text are smaller in the design; every other size stays as on desktop. */
@media (max-width: 575.98px) {
	h1 {
		font-size: 50px;
	}

	.treatment-hero .text-body-med,
	.hero-section .text-body-med {
		font-size: 16px;
		line-height: 1.375;
	}
}

/******************** Sub Nav (Treatment section pages) ****************/

/* Sticky sub-nav: it sits under the navbar while the navbar is showing, and moves up to the top of the screen when the navbar hides on scroll
   (the navbar script toggles .nav-hidden). Without :has() support it simply stays under the navbar. */
body.admin-bar {
	--admin-bar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--admin-bar: 46px;
	}
}

.page-breadcrumb {
	position: sticky;
	top: calc(var(--navbar-height) + var(--admin-bar, 0px));
	z-index: 1020;
	background: var(--color-light-gray);
	transition: top .3s ease;
}

body:has(#wrapper-navbar.nav-hidden) .page-breadcrumb {
	top: var(--admin-bar, 0px);
}

.page-breadcrumb-list {
	flex-wrap: nowrap;
	gap: 8px 32px;
	padding-block: 16px;
	overflow-x: auto;
}

@media (min-width: 768px) {
	.page-breadcrumb-list {
		flex-wrap: wrap;
		padding-block: 32px;
		overflow-x: visible;
	}
}

/* Every link reserves the underline's space (4px padding + 2px border) so the bar's bottom space starts after the underline and the links stay aligned. */
.page-breadcrumb-link {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	font-size: 16px;
	line-height: 1.5;
}

.page-breadcrumb-link.active {
	border-bottom-color: var(--color-indigo);
	font-weight: 700;
}

/* Teal on hover/focus, like the menu links; no underline. The current page keeps its indigo. */
.page-breadcrumb-link:not(.active):hover,
.page-breadcrumb-link:not(.active):focus {
	color: var(--color-teal);
	text-decoration: none;
}

.page-breadcrumb-link.active:hover,
.page-breadcrumb-link.active:focus {
	color: var(--color-indigo);
	text-decoration: none;
}

/******************** Shared treatment page hero ****************/

/* Hero, matching the Treatment Locator banner: a 580px breakpoint for the mobile image, and the desktop image anchored to the left from 581px to 991px so the blank text side stays in view. */
.treatment-hero {
	min-height: 445px;
	background: var(--hero-image) center / cover no-repeat;
}

.treatment-hero-content {
	align-items: center;
}

@media (min-width: 581px) and (max-width: 991.98px) {
	.treatment-hero {
		background-position: left;
	}
}

@media (max-width: 580px) {
	.treatment-hero {
		min-height: 620px;
		background-image: var(--hero-image-mobile, var(--hero-image));
	}

	.treatment-hero-content {
		align-items: flex-start;
	}
}

/* Space above the second of two stacked columns (below lg), so on a text/image row it goes on the text column that sits under the image. Bootstrap's spacers jump from 1.5rem to 3rem, so this is the 2.5rem in between. */
@media (max-width: 991.98px) {
	.stacked-gap {
		margin-top: 2.5rem;
	}
}

.section-py {
	padding-block: clamp(4rem, 8vw, 80px);
}

.how-it-works-diagram {
	/* Desktop diagram sizes below are the original clamps multiplied by these. */
	--how-scale: 1.1;
	--cancer-scale: 1.1;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 8px;
}

.how-it-works-item {
	flex: 0 0 auto;
}

.how-it-works-icon-wrap {
	flex: 0 0 auto;
	height: calc(clamp(60px, 10vw, 160px) * var(--how-scale));
}

.how-it-works-icon {
	width: auto;
}

.how-it-works-icon-equation {
	height: calc(clamp(42px, 7vw, 110px) * var(--how-scale));
}

.how-it-works-icon-lg {
	height: calc(clamp(60px, 10vw, 160px) * var(--how-scale) * var(--cancer-scale));
}

@media (min-width: 992px) {
	.how-it-works-item-cluster .how-it-works-icon-wrap {
		height: calc(clamp(60px, 10vw, 160px) * var(--how-scale) * var(--cancer-scale));
	}
}

.how-it-works-label {
	margin-top: 12px;
	font-size: 16px;
	color: #000;
	text-align: center;
	line-height: 1.3;
}

/* The desktop images scale with the viewport, so their labels do too; at a fixed 18px they ran into the neighbouring cell on smaller desktops. */
@media (min-width: 992px) {
	.how-it-works-diagram .how-it-works-label {
		font-size: clamp(10px, 1vw, 16px);
	}
}

.how-it-works-label-overlay {
	position: absolute;
	top: 100%;
	margin-top: 8px;
	transform: translateX(-50%);
	white-space: nowrap;
}

.how-it-works-label-overlay-middle {
	top: 50%;
	margin-top: 0;
	transform: translate(-50%, -50%);
}

.how-it-works-symbol {
	width: auto;
	height: calc(clamp(20px, 3.2vw, 50px) * var(--how-scale));
}

@media (max-width: 991.98px) {
	.how-it-works-icon-equation,
	.how-it-works-icon-lg {
		width: 100%;
		height: auto;
	}

	.how-it-works-item .how-it-works-icon-wrap {
		width: 100%;
		height: auto;
	}

	.how-it-works-symbol {
		height: clamp(40px, 6.5vw, 65px);
	}

	.how-it-works-diagram {
		gap: 24px;
	}

	.how-it-works-label {
		margin-top: 16px;
	}

	.how-it-works-arrow {
		margin-top: clamp(100px, 13vw, 120px);
	}
}

.how-it-works-arrow {
	width: 12%;
}

/******************** Steps panel (About CAR-T page) ****************/

/* Fixed height: every step sits in the same grid cell, so the panel is as tall as the tallest step and doesn't resize when the tab changes. Hidden steps keep their space but not their visibility. Each step is a column, so a shorter step's photo sits at the bottom and the free space is between the text and the photo. */
#v-steps-content {
	display: grid;
}

#v-steps-content > .tab-pane {
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
	visibility: hidden;
}

#v-steps-content > .tab-pane.active {
	visibility: visible;
}

/* Our step photos have different proportions, so they get the reference page's shape (508 x 271); otherwise each step is a different height. */
#v-steps-content img {
	aspect-ratio: 15 / 8;
	object-fit: cover;
}

/* The image sits in a small white panel, so its caption sits closer to the corner than on the large images. */
#v-steps-content .portrayal-caption {
	left: 20px;
	bottom: 15px;
}

/******************** FAQ (About CAR-T page) ****************/

.faq-accordion {
	--bs-accordion-border-radius: 6px;
	--bs-accordion-inner-border-radius: 6px;
	--bs-accordion-btn-bg: var(--bs-white);
	--bs-accordion-active-bg: var(--bs-white);
	--bs-accordion-active-color: var(--color-body-text);
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-btn-icon-width: 16px;
	--bs-accordion-btn-icon-transform: none;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 2V14' stroke='%23354A5E' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M14 8H2' stroke='%23354A5E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M14 8H2' stroke='%23354A5E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.faq-item {
	margin-bottom: 16px;
	overflow: hidden;
	border: 1px solid var(--color-neutral-400);
	border-radius: var(--bs-accordion-border-radius);
	background: var(--bs-white);
	box-shadow: var(--shadow-subtle);
}

/* Each FAQ item is its own bordered card, unlike Bootstrap's default joined accordion group. */
.accordion-item.faq-item:not(:first-of-type) {
	border-top: 1px solid var(--color-neutral-400);
}

.faq-item:has(.accordion-button:not(.collapsed)) {
	border-color: #B4B9C9;
	box-shadow: 0 1px 4px rgba(78, 159, 255, .2);
}

.faq-item .accordion-button:not(.collapsed) {
	box-shadow: none;
}

.faq-button,
.faq-item .accordion-body {
	font-size: 16px;
	line-height: 22px;
	color: var(--color-body-text);
}

.faq-button {
	gap: 1rem;
	padding-right: 2rem;
	font-weight: 600;
}

/* Draw the +/x as a mask so it takes the text colour (and so the hover colour), instead of a fixed-colour image. */
.faq-accordion .accordion-button::after,
.faq-accordion .accordion-button:not(.collapsed)::after {
	background-color: currentColor;
	background-image: none;
	-webkit-mask: var(--bs-accordion-btn-icon) center / var(--bs-accordion-btn-icon-width) no-repeat;
	mask: var(--bs-accordion-btn-icon) center / var(--bs-accordion-btn-icon-width) no-repeat;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
	-webkit-mask-image: var(--bs-accordion-btn-active-icon);
	mask-image: var(--bs-accordion-btn-active-icon);
}

/* Only a closed question changes colour on hover; the open one keeps its text colour. */
.faq-button.collapsed:hover {
	color: var(--color-teal-hover);
}

.faq-item .accordion-body {
	padding-top: 0;
	font-weight: 400;
}

.faq-item .accordion-body a {
	color: var(--color-dark-teal);
	text-decoration: underline;
}

.faq-item:last-child {
	margin-bottom: 0;
}

/******************** Questions for Your Doctor (Is CAR-T Right for Me page) ****************/

.questions-card {
	background: var(--gradient-purple-indigo);
	border-radius: var(--radius-lg);
	padding-inline: 6rem;
	color: var(--bs-white);
}

@media (max-width: 767.98px) {
	.questions-card {
		padding-inline: 3rem;
	}
}

@media (max-width: 575.98px) {
	.questions-card {
		padding-inline: 2rem;
	}
}

.questions-card-title {
	font-size: 42px;
	line-height: 1.25;
}

.questions-card-question {
	padding: 20px;
	border-radius: var(--radius-md);
	background: var(--bs-white);
	box-shadow: var(--shadow-subtle);
	color: var(--color-indigo);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
}

.questions-card-question-icon {
	width: 78px;
	height: 78px;
	object-fit: contain;
}

/******************** Common CAR-T Misconceptions (Is CAR-T Right for Me page) ****************/

.misconceptions-grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	.misconceptions-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
		grid-auto-flow: column;
		column-gap: 50px;
	}
}

.misconception-myth,
.misconception-truth {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.5rem;
	padding: 32px 32px 40px;
}

.misconception-text {
	margin-left: calc(32px + 1rem);
	margin-right: calc(32px + 1rem);
}

@media (max-width: 1199.98px) {
	.misconception-text {
		margin-right: 0;
	}
}

.misconception-myth {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	background: var(--bs-white);
	box-shadow: var(--shadow-card);
}

.misconception-truth {
	margin-top: -12px;
	margin-bottom: 24px;
	border-radius: var(--radius-md);
	background: var(--gradient-purple-indigo);
	box-shadow: var(--shadow-card);
	color: var(--bs-white);
}

.misconception-truth:last-child {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.misconception-truth {
		margin-bottom: 0;
	}
}

.misconception-icon {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid currentColor;
	flex-shrink: 0;
}

.misconception-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	transform: translate(-50%, -50%);
}

.misconception-icon-myth {
	background: var(--color-light-gray);
	border: 1.5px solid color-mix(in srgb, var(--color-purple) 20%, transparent);
}

.misconception-icon-myth::after {
	background-color: var(--color-indigo);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='6' y1='18' x2='18' y2='6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='6' y1='18' x2='18' y2='6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.misconception-icon-truth {
	background: color-mix(in srgb, var(--bs-white) 20%, transparent);
}

.misconception-icon-truth::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/******************** Reduced motion ****************/

@media (prefers-reduced-motion: reduce) {
	#wrapper-navbar,
	.navbar-toggler-icon,
	.navbar-toggler-icon::before,
	.navbar-toggler-icon::after,
	.page-breadcrumb,
	.card-gradient,
	.org-card,
	.resource-card,
	.resource-card-media img {
		transition: none;
	}

	.card-gradient:hover,
	.card-gradient:focus-visible,
	.org-card:hover,
	.org-card:focus-visible,
	.resource-card:hover .resource-card-media img,
	.resource-card:focus-within .resource-card-media img {
		transform: none;
	}
}

/********************** Find A Treatment Center ********************/
#treatment-map {
    width: 100%;
    height: 550px;
}

/******************** Resource Tiles (Resources & Support page) ****************/

.resource-tiles-wrap {
	max-width: 970px;
}

.resource-tile {
	position: relative;
	height: 345px;
	padding: 32px;
	border-radius: var(--radius-lg);
	background-image: linear-gradient(color-mix(in srgb, var(--color-fearless-blue) 50%, transparent), color-mix(in srgb, var(--color-fearless-blue) 50%, transparent)), var(--tile-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: var(--shadow-soft);
}

.resource-tile-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
}

/* On very narrow screens the button is as wide as the caption, so lift the button above it. */
@media (max-width: 349.98px) {
	.resource-tile {
		padding-bottom: 3.5rem;
	}
}

/******************** Organization Cards (Resources & Support page) ****************/

.org-card {
	min-height: 277px;
	padding: 36px;
	border-radius: var(--radius-lg);
	background: var(--gradient-purple-indigo);
	box-shadow: var(--shadow-soft);
	transition: transform .3s ease, box-shadow .3s ease;
}

.org-card:hover,
.org-card:focus-visible {
	box-shadow: var(--shadow-card);
	transform: scale(1.03);
}

/* Logos are cropped tight and have different proportions, so they share one height and are centred in the free space above the link. Very wide logos are limited by the card width instead. */
.org-card-logo {
	max-width: 100%;
	width: auto;
	height: 90px;
	margin: auto;
	object-fit: contain;
}

.org-card-link {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 800;
}

/* On the dark card the hover is the same teal as the footer links. */
.org-card:hover .org-card-link,
.org-card:focus-visible .org-card-link {
	color: var(--color-teal);
}

.org-card-link::after {
	content: "";
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M7.35596 2.35095L12.7502 7.49996L7.35596 12.649M12.7499 7.5L2.25 7.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M7.35596 2.35095L12.7502 7.49996L7.35596 12.649M12.7499 7.5L2.25 7.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/******************** Question groups (Questions for Your Doctor page) ****************/

.question-card {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.question-card {
		padding-inline: 2.25rem;
	}
}

/******************** Treatment planning cards (Questions for Your Doctor page) ****************/

.planning-image {
	aspect-ratio: 9 / 4;
	object-fit: cover;
	background: lightgray;
}

/******************** Your CAR-T Timeline (Treatment Journey page) ****************/

/* Below md (768px) each step is coded: a coloured pill, the step graphic and the text beside it. From md the five steps are one
   wide background image with the text laid over it. Offsets are percentages of the image and font sizes are container-query
   units of the card (cqw), so everything scales with the card, not the viewport. --timeline-ratio is the image's width / height.
   On lg the cqw values are the design sizes divided by the 1237px card content width at the widest container: 16px = 1.293cqw,
   18px = 1.455cqw. */
.timeline-card {
	container-type: inline-size;
	padding: 1.5rem;
	border-radius: var(--radius-lg);
}

.timeline-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.timeline-step {
	--timeline-step-color: #B3B3DA;
	display: grid;
	grid-template-columns: 50% 1fr;
	column-gap: 1.5rem;
}

.timeline-step:nth-child(2) { --timeline-step-color: #8080C2; }
.timeline-step:nth-child(3) { --timeline-step-color: #5959AF; }
.timeline-step:nth-child(4) { --timeline-step-color: #33339D; }
.timeline-step:nth-child(5) { --timeline-step-color: #000084; }

.timeline-step-label {
	grid-column: 1 / -1;
	margin-bottom: 1rem;
	padding: 0.3125rem 0;
	border-radius: 50px;
	background: var(--timeline-step-color);
	color: var(--bs-white);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

/* The graphic spans the time and title rows; they meet at its vertical centre. It is sized by height (40cqw, so every circle is
   the same size) and centred in the left half, as in the design; step 2 is wider than its circle so it reaches the pill's left edge.
   min-width keeps the box non-empty before a lazy image loads; with width: auto alone it stays 0 wide and never loads. */
.timeline-step-image {
	grid-row: 2 / span 2;
	justify-self: center;
	width: auto;
	min-width: 40cqw;
	max-width: none;
	height: 40cqw;
}

.timeline-step-time {
	align-self: end;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.375;
}

.timeline-step-title {
	align-self: start;
	margin-top: 0.5rem;
	font-size: 18px;
	line-height: 1.3;
}

.timeline-note {
	padding: 1rem;
	border-radius: var(--radius-md);
	background: var(--color-light-blue);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.375;
}

@media (min-width: 768px) {
	.timeline-card {
		padding: 2.9% 2.65% 4.6%;
	}

	.timeline-body {
		position: relative;
	}

	.timeline-steps {
		--timeline-ratio: 2.697;
		display: grid;
		aspect-ratio: var(--timeline-ratio);
		background: var(--timeline-image) center / 100% 100% no-repeat;
		/* The pills in the image are not equal widths, so each column spans one pill (plus half the gaps) to put its text on the pill's centre. */
		grid-template-columns: minmax(0, 21.13fr) minmax(0, 20.49fr) minmax(0, 20.49fr) minmax(0, 20.62fr) minmax(0, 17.27fr);
		text-align: center;
	}

	/* In cqw (a share of the card), not %, because a % padding follows the column's own width and the fifth column is narrower. */
	.timeline-step {
		display: block;
		padding: 4.9cqw 0.5rem 0;
	}

	/* The image already shows the pill; keep the text for screen readers. */
	.timeline-step-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.timeline-step-time {
		font-size: clamp(8px, 1.293cqw, 16px);
		white-space: nowrap;
	}

	.timeline-step-title {
		margin-top: 1.5cqw;
		font-size: clamp(9px, 1.455cqw, 18px);
	}

	.timeline-note {
		position: absolute;
		top: 83.5%;
		width: 33.1%;
		padding: clamp(0.35rem, 1.293cqw, 1rem);
		font-size: clamp(8px, 1.293cqw, 16px);
	}

	.timeline-note-start {
		left: 14.7%;
	}

	.timeline-note-end {
		left: 65.7%;
	}
}

/******************** Pagination (search results) ****************/

.pagination {
	--bs-pagination-padding-x: 1.125rem;
	--bs-pagination-padding-y: 0.5rem;
	--bs-pagination-font-size: 1.125rem;
	--bs-pagination-color: var(--color-indigo);
	--bs-pagination-border-color: var(--color-neutral-400);
	--bs-pagination-border-radius: var(--radius-md);
	--bs-pagination-hover-color: var(--color-teal-hover);
	--bs-pagination-hover-bg: var(--color-neutral-100);
	--bs-pagination-hover-border-color: var(--color-teal-hover);
	--bs-pagination-focus-color: var(--color-teal-hover);
	--bs-pagination-focus-bg: var(--color-neutral-100);
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-teal-hover) 25%, transparent);
	--bs-pagination-active-bg: var(--color-indigo);
	--bs-pagination-active-border-color: var(--color-indigo);
	--bs-pagination-active-color: var(--bs-white);
}