/* Fonts - the approved InDesign piece is set entirely in Arial, which every target
   OS already ships. The package supplied arial.ttf/arialbd.ttf and we self-hosted
   them, but that was 2MB to deliver a font the machine already has. */

/* Cascade layers, in priority order. Everything that styles a bare element lives
   in `base`, so a component class always wins without needing a heavier selector
   - which is what used to force rules like `#how-to-enroll-section p` to be
   written with an id just to outrank the component they were fighting. */
@layer base, components, utilities;

/* Colors */
:root {
	--lymphir-xs-mobile-padding: 40px;
	--lymphir-divider: "|";
	--lymphir-blue: rgb(65,116,142);
	--lymphir-blue-dark: rgb(46,88,110);
	--lymphir-green: rgb(116,187,68);
	--lymphir-green-light: rgb(92,162,56);
	--lymphir-green-dark: rgb(31,103,29);
	--lymphir-callout-bg: rgb(226,234,238);
	--lymphir-input-bg: rgb(230,231,232);
	--lymphir-required: rgb(238,0,0);
	/* The page width the approved piece was drawn at. Used only by RESPONSIVENESS -
	   LARGER VIEWS, to cap the composition above it. The @media condition there has to
	   repeat the number as a literal - a media query cannot read a custom property - so
	   the two are kept in step by hand. */
	--lymphir-design-width: 1440px;
	/* The gutter every band lands its text on, in the desktop layout. About and Why/Who
	   arrive at the same 90px the long way round - 60px of section padding plus 30px of
	   row padding, inherited from the .p-5/.px-4 they used to carry - so they do not read
	   this token; the three that would otherwise each derive their own value do. */
	--lymphir-gutter: 90px;
}

@layer base {
	/*--------------------------RESET-----------------------------------------------
	   Replaces the part of Bootstrap's Reboot this site actually leaned on. Every
	   value here is one that was measured off the approved build, so the page renders
	   the same without the 232KB stylesheet. Anything Reboot set that nothing here
	   depended on was deliberately left out. */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		/* Reboot's body colour, not black. Paragraphs that carry no colour of their
		   own - the callout, the form copy, the version stamp - rendered at this
		   near-black in the approved build, so it is pinned rather than inherited
		   from a library that is no longer here. */
		color: rgb(33,37,41);
		background-color: white;
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 0;
		margin-bottom: 0.625rem;
	}

	p {
		margin-top: 0;
		margin-bottom: 1.25rem;
	}

	ol,
	ul {
		margin-top: 0;
		margin-bottom: 1.25rem;
		padding-left: 2.5rem;
	}

	hr {
		margin: 1.25rem 0px;
		color: inherit;
		border: 0;
		border-top: 1px solid;
		opacity: 0.25;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.75em;
		line-height: 0;
		vertical-align: baseline;
	}

	img,
	svg {
		vertical-align: middle;
	}

	/* Every <img> now carries width/height attributes so the browser can reserve the
	   space before the file arrives. Those attributes are presentational hints, so
	   without this the height would be taken literally - a 620x1240 cover sized to
	   86px wide would still be laid out 1240px tall. height:auto hands the sizing
	   back to CSS while the attributes still supply the aspect ratio. */
	img {
		height: auto;
	}

	label {
		display: inline-block;
	}

	button,
	input,
	select,
	textarea {
		margin: 0;
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
	}

	button {
		text-transform: none;
	}

	/* The root is left at the browser default, so 1rem = 16px and every rem below reads
	   in the units everyone expects. It used to be set to 1.25rem (= 20px), which quietly
	   made every other value 25% larger than it looked - 0.9rem rendered as 18px, not
	   14.4px, and that misread cost two sizing bugs during the build. Every rem in this
	   file was multiplied by 1.25 to compensate, so nothing moved on screen. The page's
	   own base text size is unchanged; it just lives on the body now, where it belongs. */
	html {
		height: 100%;
		font-size: 100%;
	}

	/* min-height, NOT height. A sticky element can only stick within its containing
	   block, and .navbar's is the body's content box. With `height: 100%` that box was
	   pinned to the viewport, so the nav unstuck and scrolled away after roughly one
	   screen of scrolling. min-height keeps the "fill the window when the page is
	   short" behaviour while letting the box grow with the content. */
	body {
		min-height: 100%;
		font-size: 1.5625rem;
		font-family: Arial, Helvetica, sans-serif;
		/* break-word, not anywhere. Both stop a long word from overflowing, but
		   `anywhere` also lets the broken word count towards min-content sizing, so
		   words got split that had room to fit - which is what forced the
		   overflow-wrap workaround on .download-button. */
		overflow-wrap: break-word;
	}

	/* The nav is sticky, so anchor targets have to clear it when jumped to */
	#about-lymphir-section,
	#why-who-section-left,
	#why-who-section-right,
	#how-to-enroll-section{
		scroll-margin-top: 72px;
	}

	/* Pinned to 700 rather than the inherited `bolder`. Inside an already-bold parent
	   (the phone/hours lines) `bolder` resolves to 900 - the self-hosted Arial had no
	   900 face so it quietly fell back to 700, but system Arial does supply one and the
	   number rendered heavier than the approved piece. */
	b,
	strong {
		font-weight: 700;
	}

	p {
		padding-bottom: 7px;
		font-size: 1.5625rem;
		line-height: 2rem;
	}

	h1 {
		font-weight: 700;
		font-size: 2.4375rem;
		line-height: 3rem;
		color: var(--lymphir-blue);
	}

	h2 {
		font-weight: 700;
		font-size: 1.6875rem;
		line-height: 2.1875rem;
		color: black;
	}

	h3 {
		font-weight: 700;
		font-size: 1.5625rem;
		line-height: 2rem;
		color: black;
	}
}

@layer components {
	/*--------------------------LAYOUT----------------------------------------------
	   A 12-column grid in place of Bootstrap's flex row/col. Tracks are equal
	   fractions with no `gap`; the gutter, where a row wants one, is padding on the
	   columns - which is how Bootstrap did it, and is why the column widths come out
	   to the same fractions of the row rather than fractions-minus-gap. */
	.page-section {
		width: 100%;
	}

	.grid-row {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
	}

	/* Bootstrap's `.row > *` gave every direct child the full 12 columns AND zeroed
	   its horizontal padding. Both halves matter: the About copy sits directly in the
	   row, and that padding reset is what kept its bullet list flush with the
	   paragraphs instead of picking up the 2.5rem list indent from the reset above. */
	.grid-row > * {
		grid-column: 1 / -1;
		min-width: 0;
		/* Bootstrap sized its columns with width:100%, not by letting them fill. The
		   difference shows on the About list, whose 30px left margin therefore pushed it
		   30px WIDER than the copy above it. Kept, because the approved build renders
		   that way and this pass is not meant to reflow any text. */
		width: 100%;
		padding-right: 0px;
		padding-left: 0px;
	}

	/* The contact form's rows are the only ones that carried a gutter: 15px each side
	   of every column, pulled back out by a negative margin so the outer edges stay
	   flush with the card. */
	.grid-row.has-gutter {
		margin-right: -15px;
		margin-left: -15px;
	}

	.grid-row.has-gutter > * {
		padding-right: 15px;
		padding-left: 15px;
	}

	/* Spans only apply from their breakpoint up; below it a column falls back to the
	   full-width default above, which is exactly how the Bootstrap md and lg columns
	   behaved. */
	@media (min-width: 768px) {
		.span-md-4 {
			grid-column: span 4;
		}
		.span-md-6 {
			grid-column: span 6;
		}
		.span-md-11 {
			grid-column: span 11;
		}
	}

	@media (min-width: 992px) {
		.span-lg-5 {
			grid-column: span 5;
		}
		.span-lg-6 {
			grid-column: span 6;
		}
		.span-lg-7 {
			grid-column: span 7;
		}
	}

	/*--------------------------SCROLL REVEAL -------------------------------------*/
	/* Opt-in: both the class on <html> and the class on the element are added by
	   js/reveal.js. Without that script nothing here matches, so the content is
	   visible - which is the whole point of replacing ScrollReveal. The transition
	   sits on .is-revealed, not on .reveal, so arming the page cannot animate the
	   copy OUT before it animates back in. */
	.reveal-armed .reveal {
		opacity: 0;
	}

	.reveal-armed .reveal.is-revealed {
		opacity: 1;
		transition: opacity 2s ease;
	}

	/*--------------------------SKIP LINK -------------------------------------*/
	/* Off-screen until it takes focus, so the first Tab on either page offers a way
	   past the seven nav links. Absolutely positioned, so it is out of flow and does
	   not become a flex item of the contact page's body. */
	.skip-link{
		position: absolute;
		top: 0px;
		left: -9999px;
		z-index: 200;
		padding: 10px 18px;
		font-weight: 700;
		font-size: 1.0625rem;
		color: var(--lymphir-blue);
		background-color: white;
		text-decoration: none;
	}

	.skip-link:focus{
		left: 0px;
	}

	/*--------------------------NAVBAR SECTION -------------------------------------*/
	.navbar{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		background-color: black;
		z-index: 100;
		padding: 0px;
		position: sticky;
		top: 0px;
	}

	.navbar-link-container{
		display: flex;
		flex-wrap: inherit;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background-color: black;
		padding-left: 5.1%;
	}

	/* Above the breakpoint the menu is simply part of the bar; below it, it is the
	   panel the hamburger opens. js/nav.js only ever toggles .is-open. */
	.navbar-menu{
		display: flex;
		flex-basis: auto;
		flex-grow: 1;
		align-items: center;
	}

	.navbar-nav{
		display: flex;
		flex-direction: row;
	}

	/* Arial Bold, sized so the row lands on the mock-up's footprint: the nav runs from
	   5.1% to ~95% of the page on one line. Sizing it off the mock-up's 14pt/18pt
	   nav-to-body ratio instead overflowed the viewport, because the body scale here is
	   larger than the mock-up's. vw-based so that footprint holds as the page narrows -
	   but only downwards: the clamp's 1.1rem ceiling is reached at ~1443px, and above it
	   the row would freeze at 1293px while the bar kept growing (5.1% to 43% of the page
	   at 3440). From 1440 up it is the container cap in RESPONSIVENESS - LARGER VIEWS
	   that holds the footprint, not this clamp. The two meet within 3px of each other,
	   so the nav does not jump at the breakpoint. */
	.nav-link{
		color: white;
		font-weight: 700;
		font-size: clamp(0.75rem, 1.22vw, 1.1rem);
		white-space: nowrap;
		text-decoration: none;
		padding: 20px 0px;
	}

	/* Current page and hover/focus both read as green, never underlined */
	.nav-link.active,
	.nav-link:hover,
	.nav-link:focus{
		color: var(--lymphir-green);
		text-decoration: none;
	}

	/* Forcing the colours above removes the only focus cue, so put a real one back */
	.nav-link:focus-visible{
		outline: 2px solid var(--lymphir-green);
		outline-offset: 2px;
	}

	/* Equal padding either side of the divider centres it in the gutter. Floating it
	   (as the SPARKLER site does) left the pipe hugging the following link - 17px
	   before it, 6px after. The mock-up's gap is 23.5px against 15.7px text, so 1.5em.
	   Padding on an inline ::before rather than a sized inline-block, which would add
	   a baseline gap and inflate the bar. The colour is pinned so the separator does
	   not turn green along with the link on hover. */
	.nav-link+.nav-link::before {
		content: var(--lymphir-divider);
		/* Same pipe, declared again with empty alternative text so it is treated as
		   decoration: a screen reader reads "About", not "| About". The plain
		   declaration above stays as the fallback for browsers that do not parse
		   the content/alt syntax, which would otherwise drop the divider entirely. */
		content: var(--lymphir-divider) / "";
		padding: 0px 1.5em;
		font-weight: 400;
		color: white;
	}

	.navbar-toggler{
		display: none;
		margin: 8px 0px;
		padding: 0.3125rem 0.9375rem;
		font-size: 1.5625rem;
		line-height: 1;
		background-color: transparent;
		border: 1px solid rgba(255,255,255,0.55);
		border-radius: 0.46875rem;
	}

	.navbar-toggler:focus-visible{
		outline: 2px solid var(--lymphir-green);
		outline-offset: 2px;
	}

	/* The three bars, drawn white rather than Bootstrap's black-and-inverted-by-filter */
	.navbar-toggler-icon{
		display: inline-block;
		width: 1.5em;
		height: 1.5em;
		vertical-align: middle;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
	}

	#how_to_enroll{
		border: 2px solid #20671E;
		background-color: #91c654;
		font-weight: bold;
		border-radius: 16px;
		padding: 6px 10px;
	}
	/*--------------------------INTRO SECTION -------------------------------------*/
	.intro-section{
		/* WebP first, PNG kept as the fallback for anything that cannot parse
		   image-set(). Same artwork, re-encoded: 499KB down to 28KB with no
		   perceptible difference - it is a flat geometric pattern.

		   IIS has no MIME type for .webp out of the box, and image-set() does not
		   fall back at runtime once it has picked a candidate - a 404.3 on the webp
		   leaves the band flat white. web.config declares the mimeMap; the two have
		   to stay together. */
		background-image: url(../assets/images/background-diamond.png);
		background-image: image-set(url(../assets/images/background-diamond.webp) type("image/webp"), url(../assets/images/background-diamond.png) type("image/png"));
		background-size: cover;
		background-repeat: no-repeat;
		/* Anchored bottom, not top. The artwork is a 2000x1874 diagonal ramp that fades
		   out to near-white at its top edge: measured across its top tenth, adjacent
		   facets differ by 1-7 of 255, which is under what a screen resolves - the band
		   read as plain white. `cover` scales it to the section width, so it is always
		   taller than the section and only a slice of it shows; anchoring that slice at
		   the bottom lands it on the part of the ramp where facets differ by 38-66 and
		   the diamonds actually read. The light-to-darker fade down the band survives,
		   it is just taken from further along the same gradient. */
		background-position: left bottom;
		border-bottom: 3px solid var(--lymphir-green);
		/* No longer !important: that was only there to outrank Bootstrap's .p-0 */
		padding-bottom: 45px;
	}

	/* Was 4.7%, which put the intro copy 67.7px in against the 90px every band below it
	   uses - so the intro sat ~22px to their left and read as misaligned. A flat gutter
	   rather than a percentage, because a percentage only matches at one width: 4.7% and
	   the About band's fixed 90px crossed at 1440 and drifted apart everywhere else. */
	.intro-section-block{
		padding: 0px var(--lymphir-gutter);
	}

	/* Was .mb-0 on the closing paragraph */
	.intro-section-block p:last-child{
		margin-bottom: 0px;
	}

	.intro-section h1{
		font-size: 2.875rem;
		line-height: 3.625rem;
	}

	/* The mock-up sets the intro copy in a column a little over half the page wide.
	   The headline gets the wider measure so its hard breaks are the only breaks. */
	.intro-section h1{
		max-width: 900px;
	}

	.intro-section p{
		max-width: 790px;
		color: black;
	}

	/* Bleeds off the left edge and stops at ~70% of the page, as drawn */
	.intro-section-rule{
		width: 70.4%;
		margin: 26px 0px 34px;
		border: none;
		border-top: 2px solid var(--lymphir-green);
		opacity: 1;
	}

	.intro-section-logo-container {
		padding: 68px 0px 60px;
	}

	.intro-section-logo-container img{
		width: 420px;
		max-width: 100%;
	}

	/*---------------------------ABOUT LYMPHIR SECTION ------------------------------------*/
	/* Was .p-5 - 3rem against Bootstrap's $spacer, which resolved to 60px at the 20px
	   root this page used to have, not the 48px a 16px root would have given. Folded in
	   as an explicit 60px, which is why normalising the root could not disturb it. */
	.about-lymphir-section{
		background-color: var(--lymphir-blue);
		padding: 60px;
	}

	/* Was .px-4 */
	.about-lymphir-section-row{
		padding: 0px 30px;
	}

	/* Was .mb-4 .pt-2 */
	.about-lymphir-section-row h1{
		padding-top: 10px;
		margin-bottom: 30px;
	}

	/* Was .mb-0 on the closing paragraph */
	.about-lymphir-section-row > p:last-child{
		margin-bottom: 0px;
	}

	.about-lymphir-section h1{
		color: white;
	}

	.about-lymphir-section p, .about-lymphir-section ul{
		color: white;
		font-size: 1.4375rem;
		line-height: 1.875rem;
	}

	.about-lymphir-section ul{
		margin-left: 30px;
		margin-bottom: 20px;
	}

	.about-lymphir-section li{
		margin-bottom: 12px;
	}

	/*----------------------------WHY WHO SECTION -----------------------------------*/
	/* Diagonal green, sampled from the approved piece: light at the top left,
	   dark at the bottom right */
	.why-who-section{
		background-image: linear-gradient(128deg, var(--lymphir-green-light) 0%, var(--lymphir-green-dark) 100%);
		padding: 60px;
	}

	/* The divider above the two headings. An <hr> inside the row, not a border on the
	   section or the row, for two reasons: it lines up flush with the heading text
	   (a border on either container would sit outside that container's padding and
	   overhang the copy by 30px a side), and `.grid-row > *` already spans it 1 / -1,
	   so it tracks the 1440 cap on the row instead of running wider than the content
	   on large screens.

	   Same treatment as the vertical divider between the columns, deliberately: in the
	   mock-up the two read as one pair of rules, and half-opacity white over this
	   gradient is what gives the pale green the piece shows. NOT the 3px
	   var(--lymphir-green) the intro rule uses - that accent green is for dividing a
	   section from the one above it, and drawn here it came out heavy and the wrong hue
	   against the green band it sits on.

	   The 20px bottom margin is what opens the gap the mock-up leaves between this rule
	   and the head of the vertical one - they stop short of each other rather than
	   meeting in a T. It has to be margin HERE rather than padding on the columns: a
	   border is drawn around the padding box, so the column's own padding-top moved the
	   heading down but left the border starting hard against this rule. The 20px was
	   taken off the columns' padding-top and moved here, so the headings sit where they
	   always did - 30px below the rule, once the h1's own 10px is counted.

	   opacity is reset because the base `hr` rule would otherwise knock this back to
	   0.25 on top of the alpha already in the border colour. */
	.why-who-section-rule{
		margin: 0px 0px 20px;
		border: none;
		border-top: 1px solid rgba(255,255,255, 0.5);
		opacity: 1;
	}

	/* Was .px-4 */
	.why-who-section-row{
		padding: 0px 30px;
	}

	/* Were .pe-5 .pt-3 and .ps-5 .pt-3 - the 60px inner gutter either side of the rule.
	   The .pt-3's 20px now lives on .why-who-section-rule's margin-bottom instead, so
	   that the right column's border-left starts below the horizontal rule rather than
	   flush against it. Same distance to the headings either way. */
	.why-who-section-left{
		padding: 0px 60px 0px 0px;
	}

	.why-who-section-right{
		padding: 0px 0px 0px 60px;
		border-left: 1px solid rgba(255,255,255, 0.5);
	}

	/* Was .pt-2 */
	.why-who-section-left h1,
	.why-who-section-right h1{
		padding-top: 10px;
	}

	/* Was .mb-0 on the closing paragraph */
	.why-who-section-left p:last-child{
		margin-bottom: 0px;
	}

	.why-who-section h1, .why-who-section p, .why-who-section li{
		color: white;
	}

	.why-who-section ul{
		margin-left: 30px;
	}

	.why-who-section li{
		margin-bottom: 18px;
	}

	/*----------------------------HOW TO ENROLL SECTION -----------------------------------*/
	/* This block runs a step smaller than the rest of the page. At the shared scale the
	   two columns crowded each other - the callout and the toll-free heading ran nearly
	   edge to edge and the artwork dominated the copy. */
	/* Was .py-5 */
	.how-to-enroll-section-row{
		padding: 60px 0px;
	}

	/* The right column starts on the 5/12 line, which is where the mock-up puts it -
	   so it carries no left padding of its own.

	   These were 10.8% and 7.714%: 4.5% of the page, scaled up by each column's share of
	   the 12 (4.5 x 12/5 and 4.5 x 12/7) because a percentage padding resolves against
	   the containing block, which for a grid item is its own grid area rather than the
	   whole row. Both landed on 64.8px at 1440 - about 25px outside every other band, so
	   the copy here and the HCP callout's box edge overhung the About text above them.

	   The flat gutter needs none of that arithmetic: it is 90px against the grid area the
	   same as against anything else, and it matches at every width rather than only at
	   1440. The 12/5 and 12/7 scaling is what a percentage cost. */
	.how-to-enroll-left{
		padding-left: var(--lymphir-gutter);
	}

	.how-to-enroll-right{
		padding-right: var(--lymphir-gutter);
	}

	/* Was .pt-2 */
	.how-to-enroll-right h1{
		padding-top: 10px;
	}

	.how-to-enroll-section h1{
		font-size: 2rem;
		line-height: 2.5rem;
	}

	.how-to-enroll-section h2{
		font-size: 1.375rem;
		line-height: 1.8125rem;
	}

	.how-to-enroll-section p{
		font-size: 1.3125rem;
		line-height: 1.75rem;
	}

	.how-to-enroll-left h2{
		margin-bottom: 28px;
	}

	.how-to-enroll-right h2{
		margin: 26px 0px 18px;
	}

	.download-row{
		display: flex;
		align-items: center;
		gap: 40px;
	}

	/* The two covers are different shapes, so the mock-up sizes them to a matching
	   HEIGHT rather than a matching width - the study guide is the wider of the two.
	   A fixed-width slot keeps both Download buttons on the same line. */
	.download-cover{
		flex: 0 0 110px;
	}

	.brochure-icon{
		display: block;
		box-shadow: 8px 4px 4px darkgrey;
	}

	.cover-brochure{
		width: 86px;
	}

	.cover-guide{
		width: 105px;
	}

	/* No font-size here on purpose. It used to declare 1.125rem/1.5rem, but
	   `#how-to-enroll-section p` outranked it and the captions have always rendered
	   at the section's 1.3125rem - which is what the approved piece shows. Now that
	   both selectors are classes the declaration would finally have taken effect and
	   shrunk the captions, so the dead rule is gone rather than silently applied. */
	.download-action p{
		margin: 9px 0px 0px;
		padding: 0px;
	}

	.download-button{
		display: inline-block;
		min-width: 145px;
		padding: 6px 16px;
		font-size: 1.1875rem;
		letter-spacing: 0.02em;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		color: white;
		background-color: var(--lymphir-blue);
		border-radius: 6px;
	}

	.download-button:hover{
		color: white;
		background-color: var(--lymphir-blue-dark);
	}

	.and-container{
		margin: 26px 0px 26px 150px;
	}

	.and-container span{
		font-weight: 700;
		font-size: 1.625rem;
		color: var(--lymphir-blue);
	}

	.provide-your-contact-button{
		display: block;
		max-width: 400px;
		margin-top: 22px;
		padding: 8px 18px;
		font-size: 1.3125rem;
		text-align: center;
		text-decoration: none;
		color: white;
		background-color: var(--lymphir-blue);
		border-radius: 4px;
	}

	.provide-your-contact-button:hover{
		color: white;
		background-color: var(--lymphir-blue-dark);
	}

	/* "For Healthcare Providers" - the doctor outline stands mostly OUTSIDE the panel,
	   at the column's left edge, with only its right edge overlapping in. Measured off
	   the mock-up: 77% of the illustration sits left of the panel border, 23% over it,
	   and the panel itself is indented ~70px from the column edge to make room. */
	.hcp-callout{
		position: relative;
		max-width: 709px;
		margin: 26px 0px 0px 72px;
		/* The mock-up pairs tight padding with loose leading, which is what lets the
		   illustration fill most of the panel's height (88% of it). Padding of 8px and
		   2.15rem leading reproduce its 121px panel. */
		padding: 8px 22px 8px 42px;
		background-color: var(--lymphir-callout-bg);
		border: 1px solid var(--lymphir-blue);
		border-radius: 18px;
	}

	/* Back at the column's left edge, its base flush with the panel's bottom edge.
	   doctor.png carries its own opaque white fill inside the outlines with everything
	   outside them transparent, so it needs no background here - and that fill is what
	   hides the panel's left border behind the figure, the way the mock-up draws it. */
	.hcp-callout-figure{
		position: absolute;
		left: -72px;
		bottom: -1px;
		width: 100px;
		/* Explicitly above the panel, so the figure's white fill covers its border and
		   background at the head and shoulder rather than being painted under them */
		z-index: 1;
	}

	.hcp-callout-figure img{
		display: block;
		width: 100%;
	}

	/* This used to need the section id in the selector just to outrank the section's
	   own leading. Both are plain classes now, so the component simply wins on being
	   the later rule - which is the trap this pass set out to remove. */
	.hcp-callout-body p{
		padding-bottom: 0px;
		/* was .mb-0 */
		margin-bottom: 0px;
		font-size: 1.1875rem;
		line-height: 2.15rem;
	}

	.info-container{
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 16px;
	}

	.info-container img{
		flex: 0 0 auto;
		width: 44px;
		max-width: 100%;
		height: auto;
	}

	/* Was .p-0 .m-0 */
	.info-container p{
		margin: 0px;
		padding: 0px;
		font-weight: 700;
	}

	/*----------------------------FORM SECTION-----------------------------------*/
	/* contact.html is nothing but this section, so it has to grow to fill the window -
	   otherwise submitting the form swaps in the much shorter thank-you panel and
	   leaves the footer floating halfway up the page */
	body.contact-page{
		display: flex;
		flex-direction: column;
		/* min-height, never a fixed height: with one, this column could not grow past
		   the viewport, so once the form was taller than the window the only item able
		   to shrink was the footer - it collapsed to its padding and clipped its own
		   links against `overflow:auto`. min-height still pins the footer to the bottom
		   when the content is short. Same reasoning as the base `body` rule, which is
		   why the `height: auto` that used to sit here is gone: there is no longer a
		   100% height on `body` to override. */
		min-height: 100vh;
	}

	/* <main> is the flex item now that it wraps the section, so it is what has to
	   grow; the section then fills it. Without this the growth stops at <main> and
	   the footer floats back up the page. */
	body.contact-page > main{
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
	}

	body.contact-page .form-section{
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
	}

	/* Keeps the version stamp pinned to the bottom of the panel, directly above the
	   footer, rather than trailing just under the card */
	body.contact-page .form-section > .grid-row{
		flex: 0 0 auto;
	}

	body.contact-page .version-stamp{
		margin-top: auto;
	}

	.form-section{
		/* Same artwork, same webp/MIME-type and bottom-anchoring notes as .intro-section */
		background-image: url(../assets/images/background-diamond.png);
		background-image: image-set(url(../assets/images/background-diamond.webp) type("image/webp"), url(../assets/images/background-diamond.png) type("image/png"));
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left bottom;
		/* No longer !important - that was only there to outrank Bootstrap's .p-0 */
		padding: 55px 0px 20px;
	}

	/* Was .col-lg-7.mx-auto. 7 of 12 columns, centred - which lands on a half-column
	   boundary, so it stays a centred block rather than becoming grid line arithmetic. */
	@media (min-width: 992px) {
		.contact-form-column{
			width: 58.3333333333%;
			margin: 0px auto;
		}
	}

	.contact-form-card{
		margin: 0px auto;
		border-radius: 0px 0px 30px 30px;
		overflow: hidden;
		background-color: white;
	}

	.contact-form-heading{
		background-color: var(--lymphir-blue);
		padding: 10px 20px;
		text-align: center;
	}

	.contact-form-heading h1{
		margin: 0px;
		font-weight: 400;
		color: white;
		font-size: 2.25rem;
		line-height: 2.875rem;
	}

	.contact-form-body{
		padding: 25px 35px 30px;
	}

	.contact-form-body p{
		font-size: 1.375rem;
		line-height: 1.8125rem;
	}

	.form-field{
		margin-bottom: 18px;
	}

	.form-field label, .form-field legend{
		display: block;
		float: none;
		margin-bottom: 4px;
		font-size: 1.375rem;
		line-height: 1.8125rem;
		color: black;
	}

	.form-choice-group{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.form-choice-label{
		margin-right: 20px;
		font-size: 1.375rem;
		line-height: 1.8125rem;
		color: black;
	}

	.form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"]{
		width: 100%;
		padding: 4px 8px;
		font-family: inherit;
		font-size: 1.375rem;
		color: black;
		background-color: var(--lymphir-input-bg);
		border: 1px solid rgb(199,200,202);
		border-radius: 2px;
	}

	.form-field input:focus-visible{
		outline: 2px solid var(--lymphir-blue);
		outline-offset: 1px;
	}

	.form-choice{
		display: flex;
		align-items: center;
		margin-right: 25px;
	}

	.form-choice input[type="radio"]{
		width: 16px;
		height: 16px;
		margin: 0px;
	}

	.form-choice label{
		margin: 0px 0px 0px 6px;
	}

	.form-required{
		color: var(--lymphir-required);
		font-weight: 700;
	}

	.consent-container{
		display: flex;
		align-items: flex-start;
	}

	.consent-container .form-required{
		flex: 0 0 auto;
		margin-right: 4px;
		line-height: 1.8125rem;
	}

	.consent-container input{
		flex: 0 0 auto;
		margin: 3px 10px 0px 0px;
		width: 16px;
		height: 16px;
	}

	.consent-container label{
		margin: 0px;
	}

	.consent-statement{
		margin: 20px 0px 0px;
		padding: 0px;
	}

	.consent-statement a{
		color: var(--lymphir-blue);
	}

	.required-field-note{
		margin: 30px 0px 0px;
		padding: 0px;
	}

	/* Off-screen spam trap - not display:none, so bots still fill it in */
	.contact-form-trap{
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.contact-form-submit-container{
		margin: 45px auto 0px;
		text-align: center;
	}

	.contact-form-submit{
		min-width: 280px;
		padding: 10px 30px;
		font-family: inherit;
		font-weight: 700;
		font-size: 1.625rem;
		color: white;
		background-color: var(--lymphir-blue);
		border: none;
		border-radius: 10px;
	}

	.contact-form-submit:hover{
		background-color: var(--lymphir-blue-dark);
	}

	.contact-form-submit:disabled{
		opacity: 0.6;
	}

	.form-error{
		display: none;
		font-size: 1.125rem;
		line-height: 1.5rem;
		color: var(--lymphir-required);
	}

	.form-error.is-visible{
		display: block;
	}

	.contact-form-error{
		margin-bottom: 15px;
		padding: 10px 15px;
		font-size: 1.25rem;
		color: white;
		background-color: rgb(155,0,20);
		border-radius: 5px;
	}

	/* Confirmation panel */
	.contact-form-thank-you{
		margin: 0px auto;
		padding: 30px 40px 35px;
		border-radius: 30px;
		background-color: white;
		text-align: center;
	}

	.contact-form-thank-you img{
		width: 300px;
		max-width: 100%;
		margin-bottom: 20px;
	}

	.contact-form-thank-you p{
		margin: 0px;
		padding: 0px;
		font-size: 1.5rem;
		line-height: 2rem;
		color: var(--lymphir-blue);
		text-align: left;
	}

	.version-stamp{
		margin: 20px 0px 0px;
		padding: 0px 1.5% 0px 0px;
		font-size: 1rem;
		text-align: right;
	}

	/*---------------------------FOOTER SECTION------------------------------------*/
	/* Same treatment as the top nav: dividers centred in their gutter, green on hover,
	   never underlined. The list once carried .breadcrumb + .row + .col-md-auto + .pe-4
	   at once, three of which contribute their own horizontal padding - so the trailing
	   space came to 80px against the mock-up's 38px. Now .footer-links alone lays it out. */
	footer {
		background-color: black;
		padding: 16px 2.7% 16px 0px;
		overflow: auto;
	}

	.footer-links-container{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	/* The size sits on the list, not just the anchors: the divider is a ::before on the
	   li, so with the size only on `a` its em - and therefore the gutter - was measured
	   against the inherited 25px body text instead of the 17px link text */
	.footer-links{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin: 0px;
		padding: 0px;
		list-style: none;
		font-size: 1.0625rem;
	}

	footer li{
		display: flex;
		align-items: center;
		padding: 0px;
	}

	footer a{
		font-size: inherit;
		color: white;
		text-decoration: none;
	}

	footer a:hover, footer a:focus{
		color: var(--lymphir-green);
		text-decoration: none;
	}

	footer a:focus-visible{
		outline: 2px solid var(--lymphir-green);
		outline-offset: 2px;
	}

	/* Equal padding either side, so the pipe sits centred between the two links. 1.22em
	   is the mock-up's gutter-to-text ratio (41px against 14.8px text), applied to this
	   page's larger footer text rather than copying the raw pixel value. */
	.footer-links li+li::before {
		padding: 0px 1.22em;
		color: white;
		content: var(--lymphir-divider);
		/* Decorative - see the note on the nav divider */
		content: var(--lymphir-divider) / "";
	}

	.onetrust-link:hover {
		cursor: pointer;
	}

	/*-------------------------------------------------RESPONSIVENESS - SMALLER VIEWS--------------------------------------------------------------------*/

	/* /!\ The order of @media() matters */
	@media (max-width: 630px){
		.intro-section{
			padding-bottom: 30px;
		}
		.intro-section h1{
			font-size: 1.875rem;
			line-height: 2.4375rem;
		}
		.intro-section-block {
			padding: 0px 30px;
		}
		.intro-section p {
			font-size: 1.25rem;
			line-height: 1.6875rem;
		}
		.intro-section-rule{
			width: 88%;
			margin: 18px 0px 22px;
		}
		.intro-section-logo-container {
			padding: 25px 0px 25px;
		}
		.intro-section-logo-container img {
			width: 260px;
		}
		/* --------- */
		.about-lymphir-section{
			padding: var(--lymphir-xs-mobile-padding);
		}
		.about-lymphir-section p, .about-lymphir-section ul{
			font-size: 1.25rem;
			line-height: 1.6875rem;
		}
		.about-lymphir-section-row{
			padding: 0px;
		}
		.about-lymphir-section-row ul{
			margin: 0px 0px 10px 20px;
		}
		/* --------- */
		.why-who-section{
			padding: var(--lymphir-xs-mobile-padding);
		}
		.why-who-section p, .why-who-section li{
			font-size: 1.25rem;
			line-height: 1.6875rem;
		}
		.why-who-section-row, .why-who-section-left{
			padding: 0px;
		}
		.why-who-section-right{
			padding: 0px;
			border: none;
		}
		.why-who-section-right ul{
			margin: 0px 0px 10px 20px;
			padding: 0px;
		}
		/* --------- */
		.how-to-enroll-section-row {
			padding-bottom: 0px;
		}
		.how-to-enroll-right{
			padding: var(--lymphir-xs-mobile-padding);
		}
		.how-to-enroll-left {
			padding: var(--lymphir-xs-mobile-padding) var(--lymphir-xs-mobile-padding) 0px;
		}
		.how-to-enroll-section p{
			font-size: 1.1875rem;
			line-height: 1.5625rem;
		}
		.download-row{
			gap: 18px;
		}
		.download-cover{
			flex: 0 0 96px;
		}
		.cover-brochure{
			width: 76px;
		}
		.cover-guide{
			width: 92px;
		}
		.download-button{
			min-width: unset;
			width: 100%;
			padding: 6px 10px;
			font-size: 1.125rem;
		}
		.and-container{
			margin: 22px 0px 22px 114px;
		}
		/* Too narrow to give the illustration its own margin, so the panel keeps the
		   left indent small and the outline overlaps a little further in */
		.hcp-callout{
			margin-left: 44px;
			padding: 8px 16px 8px 30px;
			border-radius: 16px;
		}
		.hcp-callout-figure{
			left: -44px;
			width: 74px;
		}
		.hcp-callout-body p{
			font-size: 1.125rem;
			line-height: 1.8125rem;
		}
		.info-container img{
			width: 38px;
		}
		.info-container-hours{
			margin-bottom: 0px;
		}
		/* --------- */
		.form-section{
			padding: 30px 0px 15px;
		}
		.contact-form-card{
			margin: 0px 15px;
			border-radius: 0px 0px 15px 15px;
		}
		.contact-form-heading h1{
			font-size: 1.5rem;
			line-height: 2rem;
		}
		.contact-form-body{
			padding: 15px 20px 20px;
		}
		.contact-form-submit-container{
			margin-top: 30px;
		}
		.contact-form-submit{
			min-width: unset;
			width: 100%;
		}
		.contact-form-thank-you{
			margin: 0px 15px;
			padding: 20px 25px 25px;
			border-radius: 15px;
		}
		.contact-form-thank-you img{
			width: 220px;
		}
		.contact-form-thank-you p{
			font-size: 1.25rem;
			line-height: 1.75rem;
		}
		.provide-your-contact-button{
			max-width: unset;
			font-size: 1.375rem;
		}
		.version-stamp{
			padding-right: 15px;
		}
	}

	/* Too narrow for one row, so the links stack centred and the dividers drop out */
	@media (max-width: 767px){
		footer{
			padding: 13px 0px;
		}
		.footer-links-container{
			align-items: center;
		}
		.footer-links{
			flex-direction: column;
			justify-content: center;
		}
		footer li{
			padding: 3px 0px;
		}
		.footer-links li+li::before {
			content: none;
		}
	}

	@media (max-width: 991px){
		body{
			font-size: 1.375rem;
		}
		.navbar-link-container{
			padding-left: 20px;
		}
		/* Below the breakpoint the bar collapses to the hamburger, and the menu becomes
		   a full-width panel underneath it that js/nav.js shows by adding .is-open */
		.navbar-toggler{
			display: block;
		}
		.navbar-menu{
			display: none;
			flex-basis: 100%;
			width: 100%;
		}
		.navbar-menu.is-open{
			display: block;
		}
		.navbar-nav{
			flex-direction: column;
		}
		/* Stacked in the collapsed menu, so the viewport-scaled size is too small here */
		.nav-link{
			font-size: 1.2125rem;
			padding: 7px 0px;
		}
		.nav-link+.nav-link::before {
			display: none;
		}
		.intro-section h1 br{
			display: none;
		}
		.intro-section-rule{
			width: 85%;
		}
		.why-who-section-right{
			border: none;
			margin-top: 30px;
		}
		.how-to-enroll-left {
			padding: 0px 40px;
		}
		.how-to-enroll-right {
			padding: 0px 40px;
			margin-top: 35px;
		}
		.how-to-enroll-right h2 br{
			display: none;
		}
		.hcp-callout{
			max-width: unset;
		}
	}

	/* The stacked layout's gutter, brought onto the shared 90px so the enroll section lines
	   up with the bands above it here too. Above 992 the columns get that from
	   --lymphir-gutter directly; this range is the gap, because the two rules just above
	   set 40px.

	   Bounded at both ends on purpose. The 991 block above also matches at 630 and below -
	   it is later in the file than the 630 block, so it is what actually supplies the enroll
	   padding on phones (this is what the "order of @media() matters" note at the top of
	   this section is warning about, and it is why the 630 block's own
	   .how-to-enroll-left/-right padding never takes effect). Widening 90px into that range
	   would leave a 360px phone with 180px of content, so the floor keeps it out. */
	@media (min-width: 631px) and (max-width: 991px){
		.how-to-enroll-left,
		.how-to-enroll-right{
			padding-right: var(--lymphir-gutter);
			padding-left: var(--lymphir-gutter);
		}
	}

	/* .nav-link scales with the viewport via clamp(), so it needs no breakpoint here.

	   This breakpoint used to carry `.intro-section-block { max-width: 82% }`, and it is
	   gone rather than kept. It was a SECOND inset on top of the block's own padding, so
	   with the gutter now a flat 90px the two double-counted and squeezed the intro copy
	   ~90px narrower than any other band between 992 and 1250 - which pushed the headline
	   onto an extra line. It also fought the note on .intro-section h1: the headline is
	   meant to get the wider measure so its hard <br> breaks are the only breaks, and at
	   82% it wrapped again inside them. The h1 and p carry their own max-widths (900px
	   and 790px), so nothing here needs a percentage cap to stay off the full row. */

	/*-------------------------------------------------RESPONSIVENESS - LARGER VIEWS--------------------------------------------------------------------*/

	/* Every other query in this file is max-width: the piece responds downwards from the
	   1440 it was drawn at and nothing responds upwards, so above 1440 the bands just kept
	   stretching. Nothing was capped except three max-widths (the intro copy, the HCP
	   callout), so the About paragraphs ran 118 characters per line at 1440, 225 at 2560
	   and 309 at 3440 - against a comfortable measure of 45-75.

	   The fix is one cap on the row rather than on the section, so the section backgrounds
	   still bleed edge to edge while the content inside them stops growing. 1440px is the
	   width the piece was approved at, which is why the cap sits there: at and below it
	   this block does not apply and the approved rendering is untouched. Above it, every
	   measured box holds exactly the value it has at 1440.

	   `.page-section > .grid-row` deliberately matches only the top-level rows. The contact
	   form's inner `.grid-row.has-gutter` rows are nested inside .contact-form-body, so they
	   never match here and keep their -15px gutter margins. */
	@media (min-width: 1440px) {
		/* width:100% matters on the contact page, where .form-section is a flex column and
		   these are its flex items: auto margins on a flex item suppress the stretch that
		   would otherwise size it, so without a definite width the item shrinks to fit its
		   content and the cap never binds. Everywhere else these are ordinary blocks and
		   the declaration is a no-op. */
		.page-section > .grid-row{
			width: 100%;
			max-width: var(--lymphir-design-width);
			margin-right: auto;
			margin-left: auto;
		}

		/* These two sections are the only ones carrying horizontal padding of their own
		   (60px a side), and it sits OUTSIDE the row - so capping the row at the full
		   design width would make the band total 1560, and the About copy would come out
		   WIDER at 2560 than at 1440. Subtract the section's own padding so the whole
		   composition still measures 1440. The other three sections pad vertically only,
		   so the cap above is already right for them. */
		.about-lymphir-section > .grid-row,
		.why-who-section > .grid-row{
			max-width: calc(var(--lymphir-design-width) - 120px);
		}

		/* The nav and the footer sit outside any .grid-row, so they need the same cap
		   applied to their own inner container to stay aligned with the content.

		   Their percentage insets have to be restated as calc() against the design width.
		   A percentage padding resolves against the CONTAINING BLOCK, and for these three
		   containers that is still the full viewport even once the element itself is
		   capped - so 5.1% went on meaning 5.1% of 2538 rather than of 1440, and the nav
		   links started 56px right of the content they sit above. (Same trap the note on
		   .how-to-enroll-left describes, except there the containing block is the grid
		   area, which the cap does resize - so that one needs no restating.) */
		.navbar-link-container{
			max-width: var(--lymphir-design-width);
			margin-right: auto;
			margin-left: auto;
			padding-left: calc(var(--lymphir-design-width) * 0.051);
		}

		footer{
			/* Moved onto the container below, so the inset is measured from the capped
			   content's right edge rather than the viewport's */
			padding-right: 0px;
		}

		.footer-links-container{
			max-width: var(--lymphir-design-width);
			margin-right: auto;
			margin-left: auto;
			padding-right: calc(var(--lymphir-design-width) * 0.027);
		}

		/* Outside the row as well, and aligned to the page rather than to the card - which
		   is how the approved mock-up draws it, so it is capped to keep that relationship
		   instead of drifting to the viewport edge. margin-top is left alone: the flex
		   layout on .contact-page relies on its `auto` to keep the stamp pinned above the
		   footer. */
		.version-stamp{
			/* See the notes on the row and the nav above - this is the flex item that
			   actually needed the explicit width, and its 1.5% needed restating too */
			width: 100%;
			max-width: var(--lymphir-design-width);
			margin-right: auto;
			margin-left: auto;
			padding-right: calc(var(--lymphir-design-width) * 0.015);
		}

		/* The one thing the cap alone would change: this rule bleeds off the left edge of
		   the PAGE as drawn, and inside a centred container it would start at the container
		   edge instead. So it is pulled back out to the viewport edge and given that same
		   distance back as width, which keeps both the bleed and its 70.4% relationship to
		   the copy. 100vw includes the classic scrollbar, so the bleed overshoots by half
		   its width - it is running off-screen either way. Drop these two declarations if
		   the study team would rather the rule started flush with the content. */
		.intro-section-rule{
			margin-left: calc((var(--lymphir-design-width) - 100vw) / 2);
			width: calc(70.4% + (100vw - var(--lymphir-design-width)) / 2);
		}
	}
}