/* =========================================================================
   Batley Pharmacy - the photo hero

   The composition drawn on a 1374x775 photograph export: the picture is the
   ground, and the heading, the pill button, the review card, the claims,
   the lead paragraph in the cut-out and the scroll cue are placed on it in
   container units so the whole thing scales as one piece.

   Moved out of pages/home2.css on 2026-09-17, when the Travel Health page
   took the same hero on the Service Page template. The theme's rule for
   where a block lives is whether more than one template can match it, and
   from that day two could. Loaded by enqueue.php on any page whose field
   set declares the h2_hero section - Home 2 pages and service pages alike
   - and on nothing else, so its weight stays off the rest of the site.

   The markup is template-parts/sections/home2-hero.php; the fields are
   batley_home2_fields()['h2_hero'], which a service page's set adopts with
   its own defaults. The .h2- prefix is kept: it is the block's name now,
   not a statement about which template it belongs to.
   ========================================================================= */

/* The claims track is deliberately wider than the screen and scrolls inside
   its own box; min-width: 0 lets the box be narrower than its contents, and
   the clip on the section catches anything else past the edge without
   making a scroll container. Hidden below the layout breakpoint, where
   nothing is meant to sit outside the section, because older Safari does
   not know clip. */
.h2-hero {
	overflow-x: clip;
}

@media (max-width: 991.98px) {
	.h2-hero {
		overflow-x: hidden;
	}
}

.h2-hero__stats {
	min-width: 0;
}
/* -------------------------------------------------------------------------
   1. Hero

   An overlay, not a flow layout. hero-corridor already carries the design's
   geometry in its alpha channel - the rounded corners and the curved cut-out
   at the bottom left that the lead paragraph sits inside - so the shape is
   never redrawn here.

   Percentages alone would drift as the viewport narrowed, so .h2-hero__frame
   is a CSS container and every overlaid size is in cqw. The numbers below are
   measured against the 1374x775 export, which is why 4.73cqw IS the design's
   65px heading at that width and the whole composition scales as one piece.

   Below 992px the overlay is abandoned and the section stacks - see the
   bottom of this block.
   ---------------------------------------------------------------------- */

.h2-hero {
	padding-block: clamp(1.5rem, 0.9rem + 2.6vw, 3rem) var(--section-gap);
}

/* The frame's parent is a container too, so the frame can carry a margin in
   cqw - the paragraph's overflow past its foot, where a page sets one (see
   the hero partial). Container units resolve against an ancestor, never the
   element itself. */
.h2-hero > .container {
	container-type: inline-size;
}

.h2-hero__frame {
	container-type: inline-size;
	position: relative;
	/* The cut-out is transparent, so the lead paragraph inside it can sit
	   slightly past the photograph's own bottom edge, as the design does. */
	overflow: visible;
}

@media (min-width: 992px) {
	.h2-hero__frame {
		margin-bottom: var(--h2-lead-overflow, 0px);
	}
}

.h2-hero__photo {
	display: block;
	width: 100%;
	height: auto;
}

.h2-hero__panel {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.h2-hero__panel > * {
	pointer-events: auto;
}

/* ---- Heading, with the button(s) under it ----

   One block where the heading goes; the buttons follow the heading at the
   design's 44px (3.2cqw of the 1374 frame), which is exactly where the
   fixed 40.5% used to put them under a two-line heading, and which lets a
   three-line heading push them down rather than run into them. */

.h2-hero__head {
	position: absolute;
	left: 6.6%;
	top: 13%;
	/* The Figma's 724px measure, which is what breaks the line after
	   "right" rather than anywhere else. */
	width: 52.7%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3.2cqw;
}

.h2-hero__head .h2-hero__title,
.h2-hero__head .h2-hero__cta,
.h2-hero__head .h2-hero__actions {
	position: static;
}

.h2-hero__head .h2-hero__title {
	width: 100%;
}

/* ---- Price under the button (Chikungunya's "£180 / Per dose") ----
   Read off the design at 1374: 32 under the pill (12 less than the block's
   44 gap), the figure Albert Sans SemiBold 32 in the brand blue, "Per dose"
   12 in the heading colour 4 beneath. */

.h2-hero__price {
	display: flex;
	flex-direction: column;
	gap: 0.29cqw;
	margin: -0.87cqw 0 0;
}

.h2-hero__price-value {
	color: var(--color-brand-blue);
	font-family: var(--font-heading);
	font-size: 2.33cqw;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: 0;
}

.h2-hero__price-note {
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: 0.87cqw;
	line-height: 1.3;
}

.h2-hero__title {
	position: absolute;
	left: 6.6%;
	top: 13%;
	width: 52.7%;
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	/* Albert Sans Bold 65/85 with 0.1px tracking, over the 1374px frame. */
	font-size: 4.73cqw;
	font-weight: var(--fw-bold);
	line-height: 1.3077;
	letter-spacing: 0.0015em;
	text-wrap: initial;
	/* The editor's line breaks are the design's ("Hajj And Umrah /
	   Vaccination"); the stacked layout below lets the heading wrap. */
	white-space: pre-line;
}

.h2-hero__accent {
	color: var(--color-brand-blue);
}

/* The highlighted word on its own line beneath the heading, where a page
   asks for it - "Cholera / Vaccination". */
.h2-hero__accent--below {
	display: block;
}

/* ---- Button ---- */

.h2-hero__cta {
	position: absolute;
	left: 6.6%;
	top: 40.5%;
	display: inline-flex;
	align-items: center;
	gap: 1.1cqw;
	padding: 0.6cqw 0.6cqw 0.6cqw 1.9cqw;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-family: var(--font-button);
	font-size: 1.18cqw;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: var(--ls-button);
	white-space: nowrap;
	text-decoration: none;
	box-shadow: var(--shadow-primary);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.h2-hero__cta:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	transform: translateY(-2px);
}

.h2-hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6cqw;
	height: 2.6cqw;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
}

.h2-hero__cta-icon svg {
	width: 1.3cqw;
	height: 1.3cqw;
}

/* Two buttons: the row takes the button's place and the buttons sit in it,
   20px apart at 1374. */
.h2-hero__actions {
	position: absolute;
	left: 6.6%;
	top: 40.5%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4556cqw;
}

.h2-hero__actions .h2-hero__cta {
	position: static;
}

/* The outlined one: the brand blue as a 1px ring and as the label, no
   disc, the same height as the filled pill beside it. Fills on hover. */
.h2-hero__cta--ghost {
	padding: 0.6cqw 1.75cqw;
	border: 1px solid var(--color-primary);
	background: transparent;
	color: var(--color-primary);
	font-size: 1.02cqw;
}

.h2-hero__cta--ghost:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* ---- Review card ----

   A stepped silhouette: a narrower white box holding the faces, a wider one
   holding the text, and the circular link floating in the gap the step
   leaves at the top right. Two boxes rather than one with a masked corner,
   because the gap has to show the photograph through it.
*/

.h2-hero__proof {
	position: absolute;
	left: 6.8%;
	top: 54.5%;
	width: 20.5%;
	/* Radius of the concave curve where the faces box widens into the text
	   box. Re-stated in rem below the layout breakpoint. */
	--h2-proof-step: 1.2cqw;
	/* Where the narrow box ends. Measured off the design's own silhouette
	   exports (Rectangle-5 and Rectangle-8), whose alpha channels put the
	   step at 68-70% of the full width, half way down. */
	--h2-proof-waist: 70%;
	/* One radius for the whole card, so the corners match the circle's
	   softness rather than reading as a tighter, squarer box. */
	--h2-proof-radius: 1.6cqw;
	/* Named once because three things are painted with it — both boxes and
	   the curve that joins them — and hover has to change all three at once
	   or the shape comes apart. */
	--h2-proof-bg: var(--color-surface);
}

/* Hovering anywhere on the card turns it, and the circle, blue. Bound to the
   card rather than to the circle so the whole thing responds as one object,
   and so it works whether or not the circle happens to be a link. */
.h2-hero__proof:hover {
	--h2-proof-bg: var(--color-primary-100);
}

.h2-hero__proof-faces {
	width: var(--h2-proof-waist);
	padding: 1.5cqw 1.5cqw 0.3cqw;
	border-radius: var(--h2-proof-radius) var(--h2-proof-radius) 0 0;
	background: var(--h2-proof-bg);
	transition: background-color var(--dur) var(--ease);
}

.h2-hero__faces {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.h2-hero__faces li + li {
	/* Overlap, so four faces read as a group rather than a row of buttons. */
	margin-left: -0.65cqw;
}

.h2-hero__faces img {
	width: 3.15cqw;
	height: 3.15cqw;
	border: 0.2cqw solid var(--color-surface);
	border-radius: 50%;
	background: var(--color-surface-muted);
	object-fit: cover;
}

/* The circle filling the notch the step leaves.

   Two layers, one on top of the other in the same round box: the design's
   own icon - a picture of the pale circle with its dark arrow - laid over
   the brand blue, with a white arrow drawn underneath it. Off hover the
   picture covers everything and that is all you see; on hover the picture
   fades and the blue and the white arrow come through.

   Crossfading like that, rather than swapping one image for another, means
   no second file to load and nothing to flash on the first hover.

   Without an icon chosen the element is simply the blue circle with the
   white arrow, at rest and on hover alike - which is why the blue is the
   element's own background rather than something a hover adds. */
.h2-hero__proof-link {
	position: absolute;
	/* Lifted and pulled out far enough to clear both edges of the notch. It
	   is a separate object floating in the gap, not something joined to the
	   card, so it must not touch the faces box beside it or the text box
	   beneath it. */
	right: -0.6cqw;
	top: -0.7cqw;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.8cqw;
	height: 4.8cqw;
	border-radius: 50%;
	background: var(--color-primary);
	color: #ffffff;
	transition: background-color var(--dur) var(--ease);
}

/* With the design's icon in place the circle is the picture and nothing
   else: no blue behind it, or it shows as a rim wherever the artwork's own
   edge falls short. The blue is what the icon fades to reveal on hover, so
   it is put back only then. */
.h2-hero__proof-link--icon {
	background: transparent;
}

.h2-hero__proof:hover .h2-hero__proof-link--icon {
	background: var(--color-primary);
}

.h2-hero__proof-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	transition: opacity var(--dur) var(--ease);
}

/* The svg inside it is sized by .h2-hero__proof-link svg below, which
   already covers both breakpoints. */
.h2-hero__proof-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* The icon fades on hovering the card, not the circle, so the circle and the
   card change together rather than one at a time as the pointer crosses. */
.h2-hero__proof:hover .h2-hero__proof-icon {
	opacity: 0;
}

.h2-hero__proof-link svg {
	width: 1.75cqw;
	height: 1.75cqw;
}

.h2-hero__proof-text {
	position: relative;
	margin: 0;
	padding: 1.1cqw 1.5cqw 1.7cqw;
	/* Square only where it meets the faces box above it. */
	border-radius: 0 var(--h2-proof-radius) var(--h2-proof-radius) var(--h2-proof-radius);
	background: var(--h2-proof-bg);
	color: var(--color-heading);
	font-size: 1.38cqw;
	line-height: 1.66;
	transition: background-color var(--dur) var(--ease);
}

/* The concave curve carrying the faces box's right edge out to the wider
   text box, so the two read as one moulded shape rather than a hard step:
   a quarter disc cut out of a small white square in the inner corner. */
.h2-hero__proof-text::before {
	position: absolute;
	left: var(--h2-proof-waist);
	bottom: 100%;
	width: var(--h2-proof-step);
	height: var(--h2-proof-step);
	background: radial-gradient(
		circle var(--h2-proof-step) at 100% 0,
		transparent calc(var(--h2-proof-step) - 0.5px),
		var(--h2-proof-bg) var(--h2-proof-step)
	);
	content: "";
}

/* ---- Claims along the foot of the photograph ---- */

.h2-hero__stats {
	position: absolute;
	left: 49.3%;
	right: 8%;
	top: 89.2%;
	display: flex;
	justify-content: space-between;
	gap: 2cqw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.h2-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 0.35cqw;
}

.h2-hero__stat-value {
	color: #ffffff;
	font-size: 1.35cqw;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	/* The photograph behind this is busy and bright in places. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.h2-hero__stat-label {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.1cqw;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Lead paragraph, inside the cut-out ---- */

.h2-hero__lead {
	position: absolute;
	left: 10.2%;
	/* A page may set its own start (Ear Health: 97.3%, clear of the
	   cut-out); this is the design's. */
	top: var(--h2-lead-top, 94%);
	width: 37%;
	margin: 0;
	/* IBM Plex Sans Regular 18/30 in #232323, per the Figma - a different
	   face from the heading, which is why this names the font rather than
	   inheriting the page's. */
	color: #232323;
	font-family: var(--font-button);
	font-size: 1.31cqw;
	font-weight: var(--fw-regular);
	line-height: 1.6667;
	letter-spacing: 0;
	/* The editor's line breaks are the design's (Hepatitis A, Ear Health);
	   the stacked layout below sets this back to normal so they flow. */
	white-space: pre-line;
}

/* ---- Scroll cue, in the rounded bottom-right corner ---- */

.h2-hero__scroll {
	position: absolute;
	right: 1.2%;
	bottom: -2.5%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.1cqw;
	height: 5.1cqw;
	border: 1px dashed var(--color-divider);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-heading);
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.h2-hero__scroll:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateY(3px);
}

.h2-hero__scroll svg {
	width: 1.6cqw;
	height: 1.6cqw;
}


/* -------------------------------------------------------------------------
   The service-page variant

   The same composition with the review card, claims and stats left blank -
   on the Travel Health page - reads its heading at 55 rather than 65 over
   the same 85px line, and sets the lead flush with the heading's left edge
   on a 545px measure. Both are the Travel Health design read at 1374:
   "Travel Health Services at" is 634px at 55 (it would be 749 at 65 and
   turn a word early), and the lead's lines end at "services." / "or" /
   "help you", which only a measure between 538 and 555 gives. The class is
   put on by template-service-page.php.
   ---------------------------------------------------------------------- */

/* Overlay only: below 992px the stacked layout's own rules apply, and these
   would outscore them - the lead's measure and the pill's cqw paddings,
   which have no container to resolve against there. */
@media (min-width: 992px) {
	.h2-hero--service .h2-hero__title {
		font-size: 4.0029cqw;
		line-height: 1.5455;
	}

	.h2-hero--service .h2-hero__lead {
		left: 6.6%;
		top: var(--h2-lead-top, 92%);
		width: 39.67%;
	}

	/* A tighter pill than Home 2's: 45px tall, the 37px disc 4px from the
	   edge, the 16px label 21px in - 237px wide against "Book an appointment". */
	.h2-hero--service .h2-hero__cta {
		gap: 1.1cqw;
		padding: 0.3cqw 0.3cqw 0.3cqw 1.55cqw;
	}

	.h2-hero--service .h2-hero__cta-icon {
		width: 2.7cqw;
		height: 2.7cqw;
	}

	/* The outlined pill matches the service pill's 45px: its own padding
	   makes up for having no disc inside. */
	.h2-hero--service .h2-hero__cta--ghost {
		padding: 0.95cqw 1.75cqw;
	}

	/* 75px across, hanging 31px below the frame's bottom edge. */
	.h2-hero--service .h2-hero__scroll {
		bottom: -4%;
		width: 5.46cqw;
		height: 5.46cqw;
	}
}
/* -------------------------------------------------------------------------
   The home page's hero

   What the home page asks of the composition that the service pages
   drawing the same hero do not, on one class so none of it leaks:

   .h2-hero--home   Fits the first screen, takes the home page design's
                    own frame and measures, and sets the heading in white
                    over the blue wash its photograph carries.
                    template-home.php puts it on.

   ---- The frame ----

   The home page design (revision of 2026-10-20) draws the hero on a
   1280x775 export - the page's own 1280 width - where the service pages
   keep the 1374x775 one. The alpha channel carries 20px top corners, the
   75px cut-out along the bottom left that the paragraph sits under, and a
   notch in the bottom-right corner for the scroll button. Every measure
   below is read off that frame: cqw is 1% of 1280.

   ---- Fitting the screen ----

   The frame may be no taller than the viewport less the sticky header
   above it, the section's own top padding and the paragraph's hang below
   the frame's foot, so the whole composition - claims and paragraph
   included - is on screen before anyone scrolls.

   Fitting is done in two steps, because a 16:9 screen under a 5rem header
   is nowhere near the frame's shape:

   1. The frame keeps its full width and gives up height, and the
      photograph covers it anchored to its bottom edge. Everything the
      export carries in its alpha channel sits along that edge, so cropping
      from the top alone keeps all of it exactly where the design put it,
      at the same scale. Only the top corners are lost to the crop, so
      those two are drawn back in CSS at the same radius.

   2. Past a 20% crop the frame stops giving up height and simply runs
      past the fold, still at the page's full 1280. The left column -
      heading, button, review card, paragraph - needs that much frame to
      keep its gaps, and the photograph's subject starts a third of the
      way down. (Until 2026-10-20 the frame narrowed and centred instead;
      the page is built to 1280 and the hero is asked to hold it.)

   What sits on the bottom geometry is anchored from the bottom in cqw,
   where it was in % of a height that no longer varies with the width. The
   heading keeps its place from the top. The review card keeps its place
   until the paragraph would reach it, then rides up with the paragraph,
   1.5cqw clear of it.

   ---- The measures ----

   Manrope Bold 60 on a 60px line, 0.5% tracked, three lines broken in the
   editor,
   64px in and 60px down; the button 35px under it, a 40px-high pill with
   a near-white fill, a 1px #9dc3f1 border and the brand blue label with
   an arrow; the Google rating card - the reviews section's own
   component - 64px in and 428px down (386 wide in the export, 330 here);
   the claims 20/13 along
   the foot from 51.3% to 10.4% in; the paragraph flush with the frame's
   left edge, 560 wide, its top 67px above the foot; and a 40px scroll
   button in the bottom-right corner, a blue hairline ring on the same
   near-white fill.
   ---------------------------------------------------------------------- */

@media (min-width: 992px) {
	.h2-hero--home {
		/* .site-header__inner's min-height plus the header's 1px border. */
		--h2-header: calc(5rem + 1px);
		/* No gap between the header and the frame: the frame starts where
		   the header ends (asked for on 2026-10-20; the export had 40px
		   here, which .h2-hero's own padding would otherwise give). Stated
		   twice: once as the padding, once for the height budget below. */
		padding-block-start: 0;
		--h2-pad-top: 0px;
		/* The paragraph's three lines end 23px below the frame at its full
		   1280, and 1.8vw on the way up to it. */
		--h2-hang: min(1.8vw, 24px);
		/* The frame's height budget. The admin bar variable is WordPress's
		   own, set only while the bar is showing. */
		--h2-avail: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--h2-header) - var(--h2-pad-top) - var(--h2-hang) - 0.75rem);

		/* The section itself is never shorter than the first screen, so a
		   tall viewport does not show the next section above the fold. */
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--h2-header));
	}

	.h2-hero--home .h2-hero__frame {
		/* The page's full width, always. */
		width: 100%;
		/* The design's ratio, then the budget caps it - down to 48.44cqw,
		   which is the frame's 775/1280 at a 20% crop, and no further. The
		   unit resolves against the container round the frame, whose
		   content box is the frame's own width. Nothing inside the frame
		   is in flow, so the ratio is what gives it a height at all. */
		aspect-ratio: 1280 / 775;
		max-height: max(var(--h2-avail), 48.44cqw);
	}

	.h2-hero--home .h2-hero__photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Bottom-anchored: the crop comes off the top, never the edge the
		   alpha geometry lives on. */
		object-position: 50% 100%;
		/* The export's own 20px corners, over its 1280 width. */
		border-radius: 1.5625cqw 1.5625cqw 0 0;
	}

	/* ---- Heading and button ---- */

	/* 64px in, 60px down, 500 wide; the button 35px under the heading. */
	.h2-hero--home .h2-hero__head {
		left: 5%;
		top: 7.75%;
		width: 39%;
		gap: 2.7cqw;
	}

	/* The design's "6XL/Bold": Manrope 700, 60 on a 100% line with 0.5%
	   tracking, over the 1280 frame. */
	.h2-hero--home .h2-hero__title {
		font-family: var(--font-display);
		font-size: 4.6875cqw;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.005em;
	}

	/* The design system's button (light / sm / primary / surface, trailing
	   icon): 40 high, 16px either side of a 16px label with the arrow 8px
	   after it, a full pill, the bg-subtle #f5f9fe on a 1px #9dc3f1
	   border, the label in the brand blue. No disc round the icon and no
	   shadow. */
	.h2-hero--home .h2-hero__cta {
		gap: 0.625cqw;
		height: 3.125cqw;
		padding: 0 1.25cqw;
		border: 1px solid #9dc3f1;
		border-radius: var(--radius-pill);
		background: #f5f9fe;
		color: var(--color-primary);
		font-size: 1.25cqw;
		box-shadow: none;
	}

	/* On hover the same as the travel section's pill: filled with the brand
	   blue, the label and arrow in white, lifted 2px. */
	.h2-hero--home .h2-hero__cta:hover {
		border-color: var(--color-primary);
		background: var(--color-primary);
		color: var(--color-on-primary);
		transform: translateY(-2px);
	}

	.h2-hero--home .h2-hero__cta-icon {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		color: inherit;
	}

	.h2-hero--home .h2-hero__cta-icon svg {
		width: 1.25cqw;
		height: 1.25cqw;
	}

	/* ---- The Google badge ----

	   Placed where the design puts the review card: 64px in, 428px down
	   (33.44cqw), 330 wide (25.8cqw) on the full 775-tall frame. On a
	   laptop the frame is squeezed to the screen's height while keeping
	   its width, so the badge is sized by the height budget instead
	   (2026-10-21): the design's 330 is 42.6% of 775, and that share of
	   the budget wins once it is the smaller - never below 19cqw. Its
	   measures are fractions of its own width, so everything inside
	   follows. The floor is the paragraph's top (5.23cqw up from the
	   foot) less the badge's height - up to 11.3cqw - and a gap, so on
	   the squeezed frame it sits clear of the copy and a little higher
	   than the foot would have it. */
	.h2-hero--home .h2-hero__google {
		--h2-badge-w: max(19cqw, min(25.8cqw, calc(var(--h2-avail) * 0.426)));
		position: absolute;
		left: 5%;
		top: min(33.44cqw, calc(100% - 18.4cqw));
		width: var(--h2-badge-w);
	}

	/* The badge itself (design crop of 2026-10-20), read as fractions of its
	   width: the G 18.6% across and 7.8% in; the column beside it holding
	   the logo (39% of the badge), the score (28.7%) and the count line at
	   18px over 1280, its second half in the brand blue; 13px corners and
	   a soft shadow. The unit-bearing values are the design's over the
	   badge's 330, so they scale with it; they are restated in rem for the
	   stacked layout at the foot of this file. */
	.h2-hero__badge {
		border-radius: calc(var(--h2-badge-w) * 0.0394);
		box-shadow: 0 calc(var(--h2-badge-w) * 0.0388) calc(var(--h2-badge-w) * 0.093) rgba(12, 52, 100, 0.18);
	}

	.h2-hero__badge-body {
		gap: calc(var(--h2-badge-w) * 0.0155);
	}

	.h2-hero__badge-count {
		margin-block-start: calc(var(--h2-badge-w) * 0.0116);
		font-size: calc(var(--h2-badge-w) * 0.0543);
	}

	/* ---- Claims ----
	   Along the foot from 51.3% to 9.5% in, their box 77px above it: the
	   figures at 20, the lines under them at 13 (132, 184 and 103px wide
	   in the design, in a 501px box). Nothing wraps: every width here is
	   a fraction of the frame, so what fits at 1280 fits at any width. */
	.h2-hero--home .h2-hero__stats {
		left: 51.3%;
		right: 9.5%;
		top: calc(100% - 6.016cqw);
	}

	.h2-hero--home .h2-hero__stat {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.h2-hero--home .h2-hero__stat-value {
		font-size: 1.5625cqw;
	}

	.h2-hero--home .h2-hero__stat-label {
		font-size: 1.0156cqw;
	}

	/* ---- Paragraph ----
	   Flush with the frame's left edge, 560 wide, IBM Plex Sans 18/30 in
	   the heading colour; its top 67px above the foot, which the page's
	   own figure (unitless, the partial writes both forms) can move:
	   91.36 leaves 8.64% of 775, which is 5.23cqw. */
	.h2-hero--home .h2-hero__lead {
		left: 0;
		width: 43.75%;
		top: calc(100% - (100 - var(--h2-lead-top-n, 91.36)) * 0.60547cqw);
		font-size: 1.406cqw;
	}

	/* ---- Scroll button ----
	   40px square in the frame's bottom-right corner, in the notch the
	   export leaves for it: the button's own near-white on a brand-blue
	   hairline, the arrow in the brand blue. */
	.h2-hero--home .h2-hero__scroll {
		right: 0;
		bottom: 0;
		width: 3.125cqw;
		height: 3.125cqw;
		border: 1px solid rgba(10, 97, 177, 0.6);
		background: rgba(245, 249, 254, 0.9);
		color: var(--color-primary);
	}

	.h2-hero--home .h2-hero__scroll:hover {
		border-color: var(--color-primary);
		background: #ffffff;
	}

	.h2-hero--home .h2-hero__scroll svg {
		width: 1.1cqw;
		height: 1.1cqw;
	}

	/* The white heading, as the design sets it over the blue wash. Overlay
	   only: the stacked layout below 992px lays a white wash over the top
	   of the photograph for its dark type, and white type would vanish into
	   it. The highlighted word goes white with the rest. */
	.h2-hero--home .h2-hero__title,
	.h2-hero--home .h2-hero__accent {
		color: #ffffff;
	}
}

/* ---- The Google badge, its structure ----

   A white box: the G on the left, and beside it the logo, the score and
   the count, stacked and left-aligned. Fractions of the badge's own
   width throughout, so the shape holds at any size and on any screen;
   the sizes that need a unit are set in frame units above and in rem
   for the stacked layout below. */

.h2-hero__badge {
	display: flex;
	align-items: center;
	gap: 6%;
	padding: 6% 6% 6% 7.8%;
	background: var(--color-surface);
	color: var(--color-heading);
	text-decoration: none;
}

.h2-hero__badge-g {
	flex: 0 0 18.6%;
}

.h2-hero__badge-g svg,
.h2-hero__badge-g img {
	display: block;
	width: 100%;
	height: auto;
}

.h2-hero__badge-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* The logo is 39% of the badge and the score 28.7%, in a column that is
   61.6% of it; the score sits a hair in from the logo, as the design has
   it. */
.h2-hero__badge-logo {
	width: 63%;
	height: auto;
}

.h2-hero__badge-score {
	width: 46.6%;
	height: auto;
	margin-inline-start: 2.7%;
}

.h2-hero__badge-count {
	font-weight: var(--fw-medium);
	line-height: 1.2;
	white-space: nowrap;
}

.h2-hero__badge-strong {
	color: var(--color-primary);
	font-weight: inherit;
}

a.h2-hero__badge:hover .h2-hero__badge-strong {
	text-decoration: underline;
}

/* The hero's parts fade up in turn as the page opens (the reveal in
   components.css, run by main.js): the photo and the heading at once,
   then the badge, the claims and the paragraph a beat apart. */
.h2-hero__google.reveal {
	--reveal-delay: 0.15s;
}

.h2-hero__stats.reveal {
	--reveal-delay: 0.25s;
}

.h2-hero__lead.reveal {
	--reveal-delay: 0.3s;
}

/* The home page's button keeps its light box in the stacked layout, in rem
   rather than frame units; the Google card takes the review card's place in
   the column, with its step and corners in rem there. */
@media (max-width: 991.98px) {
	.h2-hero__badge {
		border-radius: 0.75rem;
		box-shadow: 0 0.5rem 1.25rem rgba(12, 52, 100, 0.18);
	}

	.h2-hero__badge-body {
		gap: 0.25rem;
	}

	.h2-hero__badge-count {
		margin-block-start: 0.2rem;
		font-size: var(--fs-body);
	}

	.h2-hero--home .h2-hero__cta {
		gap: 0.5rem;
		padding: 0.6rem 1rem;
		border: 1px solid #9dc3f1;
		border-radius: var(--radius-pill);
		background: #f5f9fe;
		color: var(--color-primary);
		box-shadow: none;
	}

	.h2-hero--home .h2-hero__cta-icon {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		color: inherit;
	}

	.h2-hero__google {
		position: static;
		order: 5;
		width: min(24rem, 100%);
	}
}

/* ---- Below the overlay ----

   Under 992px the composition is abandoned rather than shrunk: at that width
   type this dense cannot survive a phone. Everything comes out of position
   and stacks in reading order, and the sizes go back to the theme's own
   fluid scale.
*/

@media (max-width: 991.98px) {
	/* The photograph stays the ground rather than becoming one more item in
	   a stack: it fills the frame behind the content, faded back so the type
	   stays readable over it, and everything else reads down it in order.
	   That keeps the section looking like the design's hero on a phone
	   instead of a column of parts. */
	.h2-hero__frame {
		container-type: normal;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		overflow: hidden;
		padding: var(--space-lg) var(--space-md) var(--space-xl);
		border-radius: var(--radius-2xl);
		isolation: isolate;
	}

	.h2-hero__photo {
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}

	/* A white wash over the picture where the dark type sits, turning to a
	   soft dark one at the foot where the claims are — they are white, and
	   over the pale end of this photograph they were disappearing. Two
	   layers rather than one ramp, so each end can be tuned for the type
	   that actually sits on it. */
	.h2-hero__frame::after {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(
				180deg,
				rgba(12, 40, 74, 0) 55%,
				rgba(12, 40, 74, 0.45) 88%,
				rgba(12, 40, 74, 0.6) 100%
			),
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.92) 0%,
				rgba(255, 255, 255, 0.8) 42%,
				rgba(255, 255, 255, 0.3) 70%,
				rgba(255, 255, 255, 0) 88%
			);
		content: "";
		pointer-events: none;
	}

	.h2-hero__panel,
	.h2-hero__head {
		position: static;
		display: contents;
	}

	.h2-hero__title {
		position: static;
		order: 1;
		width: auto;
		font-size: var(--fs-heading);
		line-height: var(--lh-heading);
		white-space: normal;
	}

	.h2-hero__lead {
		position: static;
		order: 2;
		width: auto;
		font-size: var(--fs-lead);
		line-height: var(--lh-lead);
		white-space: normal;
	}

	.h2-hero__cta {
		position: static;
		order: 4;
		align-self: flex-start;
		gap: var(--space-xs);
		padding: 0.7rem 0.7rem 0.7rem 1.4rem;
		font-size: var(--fs-sm);
	}

	.h2-hero__actions {
		position: static;
		order: 4;
		gap: 0.75rem;
	}

	.h2-hero__price {
		order: 4;
		gap: 0.25rem;
		margin: 0;
	}

	.h2-hero__price-value {
		font-size: 1.75rem;
	}

	.h2-hero__price-note {
		font-size: 0.75rem;
	}

	.h2-hero__cta--ghost {
		padding: 0.8rem 1.4rem;
		font-size: var(--fs-sm);
	}

	.h2-hero__cta-icon {
		width: 2rem;
		height: 2rem;
	}

	.h2-hero__cta-icon svg {
		width: 1rem;
		height: 1rem;
	}

	/* Relative, not static: the round link inside is absolutely positioned
	   against this card. Made static it lost its anchor and resolved against
	   the frame instead, which threw it to the very top of the section. */
	.h2-hero__proof {
		position: relative;
		order: 5;
		width: min(20rem, 100%);
		max-width: 100%;
		--h2-proof-step: 1rem;
		--h2-proof-radius: 1.25rem;
	}

	.h2-hero__proof-faces {
		padding: 1rem 1rem 0.25rem;
	}

	.h2-hero__faces img {
		width: 2.25rem;
		height: 2.25rem;
		border-width: 2px;
	}

	.h2-hero__faces li + li {
		margin-left: -0.5rem;
	}

	/* Inside the card's own width at this size — hanging it past the right
	   edge, as the desktop composition does, pushed it out of the frame. */
	.h2-hero__proof-link {
		right: 0;
		top: 0;
		width: 3.25rem;
		height: 3.25rem;
	}

	.h2-hero__proof-text {
		/* A long word in a review has nowhere to go on a narrow card. */
		overflow-wrap: anywhere;
	}

	.h2-hero__proof-link svg {
		width: 1.1rem;
		height: 1.1rem;
	}

	.h2-hero__proof-text {
		padding: 0.75rem 1rem 1.1rem;
		font-size: var(--fs-sm);
	}

	/* Two to a row, wrapping. They stay on the picture, so they keep the
	   white type and the shadow that make them readable there. */
	.h2-hero__stats {
		position: static;
		order: 6;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm) var(--space-md);
		margin-block-start: var(--space-sm);
	}

	.h2-hero__stat-value {
		font-size: var(--fs-body);
	}

	.h2-hero__stat-label {
		font-size: var(--fs-sm);
	}

	.h2-hero__scroll {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   The phone composition (the home page's phone design, 2026-10-26)

   Drawn at 375: the frame 343 wide with 24px corners and the photograph
   zoomed so the pharmacist stands tall in it under a blue wash; the
   heading white in Manrope Bold 32/36 with the button 40 high under it;
   the Google badge 192 wide a long way down (the frame's own width); the
   claims stacked at the right, right-aligned, over a deep blue; and the
   paragraph in IBM Plex Sans 13 inside a white cut-out at the bottom
   left - the cut-out the desktop export carries in its alpha, drawn
   here in CSS: a white box with a rounded top-right corner, a
   quarter-circle fillet above it on the frame's left edge and another
   to its right on the foot.

   The picture is the desktop export: cover-fitted, centred on the
   pharmacist and zoomed a quarter about a point two-thirds down, which
   puts her head where the design has it. A page can give the hero a
   phone picture of its own (the "Photograph on phones" field); that is
   shown as it is, no zoom.
   ---------------------------------------------------------------------- */

/* The wrapper the partial adds round the photograph when a phone picture
   is set; a block above the phone layout so the frame still takes its
   height from the picture, and dissolved below it so the picture is the
   frame's own child, out of flow. */
.h2-hero__pic {
	display: block;
}

@media (max-width: 575.98px) {
	.h2-hero--home {
		padding-block-start: 2rem;
	}

	.h2-hero--home .h2-hero__frame {
		--h2-phone-pad: 1.0625rem;
		/* A container again, so the long gap below the button can be the
		   frame's own width (cqw) rather than a fixed figure. */
		container-type: inline-size;
		display: grid;
		grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
		grid-template-areas:
			"title title"
			"cta cta"
			"google google"
			"lead stats";
		gap: 0;
		align-items: end;
		padding: 1.25rem var(--h2-phone-pad) 0;
		border-radius: 1.5rem;
	}

	.h2-hero__pic {
		display: contents;
	}

	.h2-hero--home .h2-hero__photo {
		object-position: 65% 50%;
		scale: 1.25;
		transform-origin: 50% 64%;
		border-radius: 0;
	}

	.h2-hero--home .h2-hero__frame--phone-photo .h2-hero__photo {
		object-position: 50% 50%;
		scale: none;
	}

	/* The wash: a blue over the top where the white heading sits (#4586c1
	   on the design), gone by the middle; and the deep blue rising from the
	   bottom-right corner under the claims, which leaves the coat at the
	   bottom left its own grey, as the design has it. */
	.h2-hero--home .h2-hero__frame::after {
		background:
			radial-gradient(80% 42% at 88% 102%, rgba(28, 106, 178, 0.95) 0%, rgba(28, 106, 178, 0.85) 50%, rgba(28, 106, 178, 0) 100%),
			linear-gradient(180deg, rgba(69, 134, 193, 0.9) 0%, rgba(69, 134, 193, 0.82) 28%, rgba(69, 134, 193, 0.4) 42%, rgba(69, 134, 193, 0.05) 52%, rgba(69, 134, 193, 0) 60%);
	}

	.h2-hero--home .h2-hero__title {
		grid-area: title;
		margin: 0;
		color: #ffffff;
		font-family: var(--font-display);
		font-size: 2rem;
		font-weight: 700;
		line-height: 1.125;
		letter-spacing: 0.005em;
	}

	.h2-hero--home .h2-hero__accent {
		color: #ffffff;
	}

	.h2-hero--home .h2-hero__cta,
	.h2-hero--home .h2-hero__actions {
		grid-area: cta;
		justify-self: start;
		margin-block-start: 2rem;
	}

	.h2-hero--home .h2-hero__cta {
		gap: 0.5rem;
		height: 2.5rem;
		padding: 0 1rem;
		font-size: 1rem;
	}

	.h2-hero--home .h2-hero__cta-icon svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	.h2-hero--home .h2-hero__google {
		grid-area: google;
		justify-self: start;
		width: 12rem;
		/* The frame's own width below the button (343 at 375): cqw measures
		   the content box, which is the frame less its padding, hence 111. */
		margin-block-start: min(111cqw, 24rem);
	}

	.h2-hero--home .h2-hero__badge-count {
		margin-block-start: 0.15rem;
		font-size: 0.8125rem;
	}

	/* Right-aligned in a 160px column, so "Open until 10:30pm" breaks after
	   "until" as the design has it; 20 over 13, 28px apart. */
	.h2-hero--home .h2-hero__stats {
		grid-area: stats;
		justify-self: end;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1.75rem;
		width: 10rem;
		margin: min(38cqw, 7.5rem) 1rem 0.8125rem 0;
		text-align: right;
	}

	.h2-hero--home .h2-hero__stat {
		gap: 0.25rem;
	}

	.h2-hero--home .h2-hero__stat-value {
		font-size: 1.25rem;
		font-weight: var(--fw-semibold);
	}

	.h2-hero--home .h2-hero__stat-label {
		font-size: 0.8125rem;
	}

	/* The cut-out: flush with the frame's left edge and its foot, 54% of
	   the frame wide, the paragraph starting at the page's own gutter. */
	.h2-hero--home .h2-hero__lead {
		grid-area: lead;
		position: relative;
		top: auto;
		left: auto;
		align-self: end;
		width: auto;
		margin: 0 0 0 calc(-1 * var(--h2-phone-pad));
		padding: 0.75rem 0.25rem 0 0.0625rem;
		border-start-end-radius: 1.5rem;
		background: #ffffff;
		color: #232323;
		font-size: 0.8125rem;
		line-height: 1.15;
	}

	/* The two fillets: each a 24px square that is white outside a circle
	   centred on its top-right corner - the quarter that fills the corner
	   between the box and the frame's edge. */
	.h2-hero--home .h2-hero__lead::before,
	.h2-hero--home .h2-hero__lead::after {
		position: absolute;
		width: 1.5rem;
		height: 1.5rem;
		background: radial-gradient(circle at 100% 0, transparent 1.5rem, #ffffff calc(1.5rem + 1px));
		content: "";
		pointer-events: none;
	}

	.h2-hero--home .h2-hero__lead::before {
		top: -1.5rem;
		left: 0;
	}

	.h2-hero--home .h2-hero__lead::after {
		right: -1.5rem;
		bottom: 0;
	}
}