/* =========================================================================
   Batley Pharmacy - Home 2 template

   Loaded by enqueue.php only on pages using template-home.php, so nothing
   here reaches the rest of the site.

   Two conventions as this grows:

   - Values come from the theme's tokens in base.css (--color-*, --fs-*,
     --space-*, --radius-*), not from new numbers, so the page belongs to
     the site rather than reading as a second design. The exceptions are the
     figures the Figma states outright, which are written as cqw of the
     1374px frame and commented with the px they came from.
   - Selectors stay inside this template's own .h2- namespace. That is what
     lets this file load last without reordering anything shared.

   The hero (section 1) is not here. It moved to pages/photo-hero.css on
   2026-09-17 when the Travel Health page took the same composition on the
   Service Page template; enqueue.php loads that file on every page whose
   field set declares the h2_hero section, this template's included.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Nothing on this page may widen it

   Several sections here hold a track that is deliberately wider than the
   screen — the reviews, the blog's row of three, the hero's claims — and each
   scrolls inside its own box. A track only does that once its box is allowed
   to be narrower than its contents, and a flex or grid item is not: its
   automatic minimum size is the width of what is inside it, so the box grows
   instead of scrolling and takes the page with it. That is what left the page
   several screens wide with everything squeezed into a column on the left.

   min-width: 0 turns that minimum off, and the clip on each section catches
   anything else that reaches past the edge. clip rather than hidden, so
   neither one becomes a scroll container of its own.
   ---------------------------------------------------------------------- */

.h2-hero,
.h2-popular,
.h2-travel,
.h2-services,
.h2-reviews,
.h2-blog,
.h2-hours {
	overflow-x: clip;
}

/*
 * clip is the right tool here — it holds the edge without becoming a scroll
 * container, so the hero's paragraph can still sit below its frame — but
 * Safari only learned it in 16, and an older phone is exactly where a page
 * this wide gets noticed. Below the layout breakpoint hidden does the same
 * job and is understood everywhere: at that width nothing in these sections
 * is meant to sit outside them, so there is nothing for it to cut off.
 */
@media (max-width: 991.98px) {
	.h2-hero,
	.h2-popular,
	.h2-travel,
	.h2-services,
	.h2-reviews,
	.h2-blog,
	.h2-hours {
		overflow-x: hidden;
	}
}

.h2-hero__stats,
.h2-reviews__wall,
.h2-blog__grid,
.h2-services__list,
.h2-popular__cards,
.h2-hours__panelbody {
	min-width: 0;
}

/* -------------------------------------------------------------------------
   The page's own width and rhythm (design revision of 2026-10-20)

   The revised home page is drawn on a 1280px content width with 80px
   either side at 1440 - the hero, the services band, every section and,
   since the footer design of 2026-10-21, the footer. Both are set to it
   here, on the body, so the header's logo and the hero's frame share the
   sections' edges and nothing else in the theme moves.

   Spacing: every section frame in the design carries 40px of padding top
   and bottom, and the frames sit 40px apart - 120px between one section's
   content and the next, measured off the export at every join. Written
   as the two figures the design states rather than as one 60, so the
   stylesheet reads the way the Figma does.
   ---------------------------------------------------------------------- */

.page-template-template-home {
	--container-max: 1280px;
	--container-wide: 1280px;
	/* Each section's own top and bottom padding. */
	--section-gap: 2.5rem;
	/* The gap between one section's frame and the next. */
	--h2-section-space: 2.5rem;
}

.page-template-template-home .h2-hero + .section,
.page-template-template-home .h2-hero + .h2-band,
.page-template-template-home .h2-band + .section,
.page-template-template-home .section + .section {
	margin-block-start: var(--h2-section-space);
}

/* The footer's margin is the section gap; the frame gap goes on top of it,
   so it stands 120 below the last section's content like any other join. */
.page-template-template-home .site-footer {
	margin-block-start: calc(var(--section-gap) + var(--h2-section-space));
}

/* -------------------------------------------------------------------------
   The pale band behind the care cards and the travel section

   The design (2026-10-20) draws both sections on the page's own white -
   no wash and no change of colour where the band starts or ends - with
   two things laid over it: a few thin curved lines in a light blue
   sweeping from the top-left corner down to the right, and a soft blue
   glow at the left edge by the foot of the cards (Figma: "Ellipse 201",
   275 round, light/primary/border #9dc3f1, layer blur 356). template-
   home2.php wraps the pair in the band. The lines are an inline SVG drawn
   here, used until the page supplies its own: the care section's meta
   box has a picture field for them, which the template hands over as
   --h2-band-lines. The band runs the full width of the page; the sections
   inside keep their own container and rhythm.
   ---------------------------------------------------------------------- */

.h2-band--care-travel {
	position: relative;
	/* The glow is a blurred disc hanging off the band's left edge; the band
	   clips it there as the design's frame does, and keeps it beneath the
	   sections' content. */
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	/* Where the lines file starts, measured from the band's top. The
	   design places its 1440-wide frame 46 below the band's top edge at
	   the design width - 6 below the cards' top - and the frame scales
	   with the band's width, so the offset does too (the band is never
	   wider than 1440). */
	--h2-band-lines-top: min(46px, 3.1944vw);
	/* The theme's own lines, used until the page supplies a file. */
	--h2-band-lines-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1400' preserveAspectRatio='xMidYMin slice'%3E%3Cg fill='none' stroke='%23cfe1f6' stroke-width='1.25'%3E%3Cpath d='M-20 95 C 200 180, 420 300, 660 410'/%3E%3Cpath d='M-20 107 C 200 192, 420 314, 660 424'/%3E%3Cpath d='M-20 119 C 200 204, 420 328, 660 438'/%3E%3Cpath d='M-20 131 C 200 216, 420 342, 660 452'/%3E%3Cpath d='M-20 143 C 200 228, 420 356, 660 466'/%3E%3Cpath d='M-20 155 C 200 240, 420 370, 660 480'/%3E%3Cpath d='M-20 167 C 200 252, 420 384, 660 494'/%3E%3Cpath d='M-20 179 C 200 264, 420 398, 660 508'/%3E%3Cpath d='M-20 191 C 200 276, 420 412, 660 522'/%3E%3Cpath d='M830 560 C 950 700, 1040 860, 1190 870 S 1380 790, 1480 730'/%3E%3Cpath d='M830 574 C 950 712, 1040 870, 1190 880 S 1380 800, 1480 740'/%3E%3Cpath d='M830 588 C 950 724, 1040 880, 1190 890 S 1380 810, 1480 750'/%3E%3Cpath d='M830 602 C 950 736, 1040 890, 1190 900 S 1380 820, 1480 760'/%3E%3Cpath d='M830 616 C 950 748, 1040 900, 1190 910 S 1380 830, 1480 770'/%3E%3Cpath d='M830 630 C 950 760, 1040 910, 1190 920 S 1380 840, 1480 780'/%3E%3Cpath d='M830 644 C 950 772, 1040 920, 1190 930 S 1380 850, 1480 790'/%3E%3Cpath d='M830 658 C 950 784, 1040 930, 1190 940 S 1380 860, 1480 800'/%3E%3Cpath d='M830 672 C 950 796, 1040 940, 1190 950 S 1380 870, 1480 810'/%3E%3Cpath d='M830 686 C 950 808, 1040 950, 1190 960 S 1380 880, 1480 820'/%3E%3C/g%3E%3C/svg%3E");
	background-image: var(--h2-band-lines, var(--h2-band-lines-fallback));
	background-repeat: no-repeat;
	/* The lines are drawn across the band's full width at their own height
	   and hung from --h2-band-lines-top - never stretched to the band's
	   height. A file exported from the design at 1440 wide then lands
	   exactly where it was drawn at the design width, and scales with the
	   width on a narrower screen; the theme's own lines, drawn on a
	   1440x1400 frame, map the same way. */
	background-size: 100% auto;
	background-position: center var(--h2-band-lines-top);
}

/* The glow. The design's disc sits with its left edge 14 outside the band
   and its top 510 below the band's top at the design width - just off the
   foot of the first column of cards - and everything about it scales with
   the band's width, as the lines do. Figma's layer blur of 356 is a CSS
   blur of half that: Figma states the radius, CSS the deviation. */
.h2-band--care-travel::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: min(510px, 35.4167vw);
	left: max(-14px, -0.9722vw);
	width: min(275px, 19.0972vw);
	height: min(275px, 19.0972vw);
	border-radius: 50%;
	background: #9dc3f1;
	filter: blur(min(178px, 12.3611vw));
	pointer-events: none;
}

/* A light running along the lines (2026-10-21). The lines themselves are
   the band's background and never move. Over them, at the same size and
   place, lies an SVG of the same lines as strokes - inc/band-lines.php
   reads them out of the file - and down each runs a short white shine
   with just a little glow: three strokes on one path, a faint pale-blue
   haze, a soft white edge and a thin white core, their dashes ending at
   the same point and the longer ones trailing behind it, so the head is
   bright and the tail fades.
   pathLength="1" puts every path's dashes in fractions of its own
   length, whatever its real length, so one set of keyframes fits all
   six. The head runs from the start to a fifth beyond the end, which
   is how the tail leaves. One run takes --h2-run-time, slow enough to
   watch; each line starts its run a share of that after the one before
   (inc/band-lines.php sets --h2-run-phase on each). */
.h2-band__run {
	--h2-run-time: 16s;
	position: absolute;
	top: var(--h2-band-lines-top);
	left: 0;
	z-index: -1;
	width: 100%;
	height: auto;
	overflow: visible;
	pointer-events: none;
	fill: none;
	stroke: #ffffff;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.h2-band__run path {
	animation: h2-run-core var(--h2-run-time) linear infinite;
	animation-delay: calc(var(--h2-run-phase, 0) * var(--h2-run-time) * -1);
}

/* The haze: the design's light/primary/border, barely there. */
.h2-band__run-tail {
	stroke: #9dc3f1;
	stroke-width: 2.5;
	opacity: 0.14;
	stroke-dasharray: 0.07 3;
	animation-name: h2-run-tail;
}

.h2-band__run-mid {
	stroke-width: 1.6;
	opacity: 0.7;
	stroke-dasharray: 0.05 3;
	animation-name: h2-run-mid;
}

.h2-band__run-core {
	stroke-width: 1;
	stroke-dasharray: 0.035 3;
}

/* The head sits at (dash length - offset): each layer's offset starts at
   its own dash length, so all three heads leave 0 together and arrive
   at 1.2 together. */
@keyframes h2-run-tail {
	from { stroke-dashoffset: 0.07; }
	to   { stroke-dashoffset: -1.13; }
}

@keyframes h2-run-mid {
	from { stroke-dashoffset: 0.05; }
	to   { stroke-dashoffset: -1.15; }
}

@keyframes h2-run-core {
	from { stroke-dashoffset: 0.035; }
	to   { stroke-dashoffset: -1.165; }
}

/* The fallback for a lines file that is not an SVG the module can read:
   a box the band's size, masked by the lines file at the same size and
   place, so only what lies on a line shows through, and inside it a
   wide strip with one soft band of the brand blue sliding from left to
   right - a glint sweeping across the lines. The strip is three times
   the band's width with the glint in its middle, so each sweep is on
   screen for half the cycle and the lines rest between sweeps. */
.h2-band__lines {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: var(--h2-band-lines, var(--h2-band-lines-fallback));
	mask-image: var(--h2-band-lines, var(--h2-band-lines-fallback));
	-webkit-mask-size: 100% auto;
	mask-size: 100% auto;
	-webkit-mask-position: center var(--h2-band-lines-top);
	mask-position: center var(--h2-band-lines-top);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.h2-band__lines-run {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 300%;
	/* The glint: a soft band of the brand blue, tilted to sit square across
	   the lines' run, about 360px wide at the design width. */
	background: linear-gradient(111deg, transparent 45%, rgba(22, 104, 184, 0.7) 50%, transparent 55%);
	transform: translateX(-66.667%);
	will-change: transform;
	animation: h2-lines-run 8s linear infinite;
}

@keyframes h2-lines-run {
	from { transform: translateX(-66.667%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.h2-band__run,
	.h2-band__lines {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   2. Care you can book today

   The design revision of 2026-10-20 mirrors the section: three columns of
   cards on the left, the copy on the right and centred on them. Read off
   the export over the 1280 container: three 242px columns 17px apart
   (760 in all), a 64px gutter, 456px of copy; the photographs 242x351
   and the panels taking the rest of a 658px column; the heading 42/48
   in the display face with its second line in blue, the paragraph 18/28;
   and no pill above the heading any more.

   The stagger is not hard-coded: a photograph keeps its ratio and the
   panel sharing the column absorbs whatever height is left, so each
   column carries the design's proportion and all three resolve to the
   same height. A panel whose copy will not fit makes its column taller
   rather than clipping.
   ---------------------------------------------------------------------- */

.h2-popular__inner {
	display: grid;
	grid-template-columns: 760fr 456fr;
	gap: 5%;
	align-items: center;
}

/* The cards come first in the design and second in the markup, so the
   heading is still read first. Reset once the layout stacks. */
.h2-popular__cards {
	order: -1;
}

/* Fading up (the reveal in components.css): the three columns one after
   another, the copy last. */
.h2-popular__col:nth-child(2) {
	--reveal-delay: 0.1s;
}

.h2-popular__col:nth-child(3) {
	--reveal-delay: 0.2s;
}

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

.h2-popular__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* The revised design has no pill above the heading. The field stays in
   wp-admin for the day it comes back; nothing it holds is drawn. */
.h2-popular__eyebrow {
	display: none;
}

/* The site's h2 (base.css); only its place and measure are set here. */
.h2-popular__title {
	margin: 0;
	color: var(--color-heading);
	text-wrap: initial;
}

.h2-popular__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

.h2-popular__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: 1.556;
}

/* Three equal columns, 17px apart at the design width. */
.h2-popular__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.33vw, 1.0625rem);
	align-items: start;
}

.h2-popular__col {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.33vw, 1.0625rem);
	/* The design's column: 658px tall against 242 wide. Each column
	   resolves to it, so the three line up without being told to
	   stretch, and a grid item keeps its automatic minimum size, so a
	   column whose text needs more room grows instead of clipping. */
	aspect-ratio: 242 / 658;
}

/* ---- Cards ---- */

.h2-pop-card {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.h2-pop-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* The photograph keeps the design's 242x351; the panel beside it takes
   the rest of the column. */
.h2-pop-card--photo {
	flex: none;
	aspect-ratio: 242 / 351;
	background: var(--color-surface-muted);
}

.h2-pop-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 20px of padding, the copy sitting at the foot of the panel - except in
   the third column, where the design sets it at the top. */
.h2-pop-card--panel {
	display: flex;
	flex: 1;
	align-items: flex-end;
	/* Panels sit beside a photograph, so they need a floor of their own or a
	   short column would squash one to nothing. */
	min-height: 11rem;
	padding: 1.25rem 1.25rem 1.5rem;
	color: #ffffff;
}

.h2-popular__col:nth-child(3) .h2-pop-card--panel {
	align-items: flex-start;
	padding: 1.375rem 1.25rem 1.25rem;
}

/* The gradient is the exported panel itself, so the colours are the design's
   rather than reproduced from sampled endpoints. It lies behind the copy
   rather than being the element's background, which is what lets the copy
   stay in normal flow and set the panel's minimum height. */
.h2-pop-card--panel .h2-pop-card__image {
	position: absolute;
	inset: 0;
}

/* 16 on 24. */
.h2-pop-card__copy {
	position: relative;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.5;
}

/* ---- The white label on a photograph ----
   Flush with the photograph's left edge and 20px up from its foot, a
   stadium end on the right; it hugs its own text, 8px in from the edge,
   with the 40px disc 4px inside the end. 48px tall. */

.h2-pop-card__label {
	position: absolute;
	left: 0;
	bottom: 5.6%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	width: max-content;
	max-width: 92%;
	padding: 0.25rem 0.25rem 0.25rem 0.5rem;
	background: var(--color-surface);
	border-radius: 0 999em 999em 0;
	color: var(--color-heading);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background-color var(--dur) var(--ease);
}

a.h2-pop-card__label:hover {
	background: var(--color-primary-50);
	color: var(--color-heading);
}

.h2-pop-card__label-text {
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

.h2-pop-card__go {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-on-primary);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

a.h2-pop-card__label:hover .h2-pop-card__go {
	background: var(--color-primary-hover);
	transform: translateX(2px);
}

/* Step one: the copy moves above the cards, which keep all three columns and
   the full width of the container to themselves. */
@media (max-width: 1199.98px) {
	.h2-popular__inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.h2-popular__cards {
		order: 0;
	}

	.h2-popular__text {
		max-width: 44rem;
	}
}

/* Step two: the paired columns dissolve. A grid would align the six cards
   into rows, and since a portrait photograph is roughly twice the height of
   a panel, every row would be padded out to its tallest card, leaving holes.
   Multi-column packs them top to bottom with nothing left over, which is the
   behaviour the staggered desktop layout had anyway. */
@media (max-width: 899.98px) {
	.h2-popular__col {
		display: contents;
	}

	.h2-popular__cards {
		display: block;
		columns: 2;
		column-gap: var(--space-md);
	}

	.h2-pop-card {
		/* Multi-column would otherwise split a card across the break. */
		break-inside: avoid;
		margin-bottom: var(--space-md);
	}

	/* Nothing is absorbing leftover height any more, so the panels size to
	   their own text and the photographs keep their ratio. */
	.h2-pop-card--panel,
	.h2-popular__col:nth-child(3) .h2-pop-card--panel {
		flex: none;
		min-height: 0;
		padding: var(--space-lg) var(--space-md);
	}
}

@media (max-width: 575.98px) {
	/* Two columns of cards this narrow would leave the panels a word per line. */
	.h2-popular__cards {
		columns: 1;
	}
}

/* -------------------------------------------------------------------------
   3. Travel vaccinations

   Two cards side by side, the design revision of 2026-10-20: a white card
   with the dotted world map and the three claims along its foot, and a
   card on a soft blue gradient with the heading, the paragraph and the
   white pill. Read off the export over the 1280 container: two 632px
   cards 16px apart and 544 tall, 40px of padding; the heading 40/48 in
   the display face with its last words in blue; the paragraph 18/28;
   the claims' figures 44 in the navy over 16/24 captions, each claim
   standing on the foot; the button 48 high.

   The grid carries the design's height (1280 against 544), so the two
   cards match whatever either holds and grow together when a card needs
   more.
   ---------------------------------------------------------------------- */

.h2-travel__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25%;
	aspect-ratio: 1280 / 544;
}

.h2-travel__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: clamp(1.25rem, 3.1vw, 2.5rem);
	border-radius: 0.75rem;
}

/* The map card: white on a hairline, the map taking the room above the
   claims, and the design's faint rings in the bottom-left corner behind
   them. */
.h2-travel__card--map {
	gap: clamp(1.5rem, 3.75vw, 3rem);
	border: 1px solid #d5dade;
	background: var(--color-surface);
}

/* The rings: an inline SVG from the partial, centred on the card's corner
   so a quarter of each shows. Under every faint ring runs a second copy
   carrying a short bright arc, its dash offset sent once round per cycle -
   the running line - each ring at its own pace from the partial. */
.h2-travel__rings {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
	/* The same 22rem the rings always had: the outermost at 11rem from the
	   corner, the five 2.2rem apart. */
	width: 22rem;
	height: 22rem;
	transform: translate(-50%, 50%);
	pointer-events: none;
}

.h2-travel__rings circle {
	fill: none;
	stroke: #e6ebf1;
	stroke-width: 1;
}

.h2-travel__rings .h2-travel__ring-run {
	stroke: var(--color-primary-400);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 9 91;
	opacity: 0.85;
	animation: h2-ring-run var(--h2-ring-time, 9s) linear var(--h2-ring-start, 0s) infinite;
}

@keyframes h2-ring-run {
	to {
		stroke-dashoffset: -100;
	}
}

@media (prefers-reduced-motion: reduce) {
	.h2-travel__rings .h2-travel__ring-run {
		display: none;
	}
}

.h2-travel__map {
	position: relative;
	z-index: 1;
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	height: auto;
	object-fit: contain;
	object-position: center top;
}

/* Until the artwork is uploaded, the map's space is still held. */
.h2-travel__map--empty {
	flex: 1 1 auto;
	min-height: 6rem;
}

/* ---- The animated map ----

   inc/travel-map.php takes the export apart: the continents are a still
   picture, and over it an overlay SVG carries the route behind a mask
   drawn along the journey, the pin, and the plane with the journey as
   its motion path. Both share the export's frame and fit it the same
   way (contain, centred, from the top), so they register exactly.

   Before the card scrolls into view the mask hides the route, the plane
   is at the start and unseen, and the pin is lifted; once main.js marks
   the card visible the pin drops, then the route draws itself ahead of
   the plane as it flies and lands where it was drawn. Only with the
   page's JavaScript running, or nothing would ever start; and never for
   anyone who has asked for reduced motion, who sees the journey
   complete. */

.h2-travel__map--animated {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	aspect-ratio: var(--h2-map-ratio, 550 / 315);
}

.h2-travel__map-still,
.h2-travel__map-anim {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.h2-travel__map-still {
	object-fit: contain;
	object-position: center top;
}

.h2-map__plane {
	offset-path: var(--h2-map-path);
	/* Turned to face along the path, less the angle the artwork was drawn
	   at, so it lands the way the design has it. */
	offset-rotate: auto var(--h2-map-heading, 0deg);
	offset-distance: 100%;
	transform-box: fill-box;
	transform-origin: center;
}

.h2-map__pin {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	/* A soft blue glow round the pin itself. */
	filter: drop-shadow(0 0 5px rgba(74, 147, 239, 0.75));
}

/* The glow on the spot: two rings in the brand blue, each swelling out and
   fading, the second half a beat behind the first, on a loop. Still and
   faint under reduced motion. */
.h2-map__glow circle {
	fill: var(--color-primary-500);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.js .h2-travel__card--map.is-visible .h2-map__glow circle {
	animation: h2-map-glow 2.4s ease-out 1s infinite;
}

.js .h2-travel__card--map.is-visible .h2-map__glow circle:nth-child(2) {
	animation-delay: 2.2s;
}

@keyframes h2-map-glow {
	from {
		opacity: 0.55;
		transform: scale(0.35);
	}

	to {
		opacity: 0;
		transform: scale(3);
	}
}

/* The starting positions, held until the card is seen. */
.js .h2-travel__card--map .h2-map__reveal {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.js .h2-travel__card--map .h2-map__plane {
	opacity: 0;
	offset-distance: 0%;
}

.js .h2-travel__card--map .h2-map__pin {
	opacity: 0;
	transform: translateY(-10px) scale(0.6);
}

/* The journey: the pin first, then the route and the plane together. */
.js .h2-travel__card--map.is-visible .h2-map__pin {
	animation: h2-map-pin 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.2s forwards;
}

.js .h2-travel__card--map.is-visible .h2-map__reveal {
	animation: h2-map-draw 5s ease-in-out 0.6s forwards;
}

.js .h2-travel__card--map.is-visible .h2-map__plane {
	animation: h2-map-fly 5s ease-in-out 0.6s forwards;
}

@keyframes h2-map-pin {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes h2-map-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes h2-map-fly {
	from {
		opacity: 0;
		offset-distance: 0%;
	}

	6% {
		opacity: 1;
	}

	to {
		opacity: 1;
		offset-distance: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .h2-travel__card--map .h2-map__reveal {
		stroke-dashoffset: 0;
		animation: none;
	}

	.js .h2-travel__card--map .h2-map__plane {
		opacity: 1;
		offset-distance: 100%;
		animation: none;
	}

	.js .h2-travel__card--map .h2-map__pin {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.js .h2-travel__card--map.is-visible .h2-map__glow circle {
		opacity: 0.2;
		transform: scale(1.6);
		animation: none;
	}
}

/* ---- The claims ---- */

.h2-travel__stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	align-items: end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.h2-travel-chip {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* 44 in the design's navy, a medium weight in the display face. */
.h2-travel-chip__value {
	color: #143559;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: var(--fw-medium);
	line-height: 1.1;
	letter-spacing: 0;
}

.h2-travel-chip__label {
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: 1.5;
}

/* The counting digits (main.js) keep one width per digit, so the figure
   does not twitch sideways as it runs up. */
.h2-travel-chip__count {
	font-variant-numeric: tabular-nums;
}

/* ---- The copy card ----
   The design's own gradient, as given. */
.h2-travel__card--copy {
	/* Fading up (the reveal in components.css): a beat after the map. */
	--reveal-delay: 0.15s;
	gap: 1rem;
	background-color: #f2fbff;
	background: linear-gradient(198.7deg, #F2FBFF 52.84%, #79ABE7 112.11%);
}

/* 40 on 48 at the design width, easing down with the screen. */
.h2-travel__title {
	margin: 0;
	color: var(--color-heading);
	text-wrap: initial;
}

.h2-travel__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

.h2-travel__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: 1.556;
}

/* The white pill at the foot of the card: 48 high, 24px either side of a
   16px label with the arrow 8px after it. */
.h2-travel__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	margin-block-start: auto;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

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

.h2-travel__cta-icon {
	display: inline-flex;
	align-items: center;
}

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

/* The cards stack below the layout breakpoint, each at its own height. */
@media (max-width: 991.98px) {
	.h2-travel__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
		aspect-ratio: auto;
	}

	.h2-travel__card--map {
		gap: var(--space-lg);
	}

	.h2-travel__map,
	.h2-travel__map--animated {
		flex: none;
	}

	.h2-travel__map--empty {
		min-height: 0;
	}

	.h2-travel__card--copy {
		gap: var(--space-sm);
	}

	.h2-travel__cta {
		margin-block-start: var(--space-sm);
	}
}

@media (max-width: 575.98px) {
	/* Three claims across a phone would leave the captions a word per line:
	   two across, the third spanning. */
	.h2-travel__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.h2-travel-chip:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   4. Our Services

   A rounded band on a soft blue gradient, a centred heading, and the
   services as rows (the design revision of 2026-10-21). Read off the
   export over the 1280 container: the band is the container with 40px
   of padding and 24px corners; the heading 44 in the display face with
   its last word in blue, the paragraph 18/28 on a 580px measure; each
   row a 298x152 picture, a 40/40 title in the navy, 16/24 copy and a
   40px round arrow on the right, 64px apart, 40px above and below, a
   hairline under each.
   ---------------------------------------------------------------------- */

/* The band sits inside the page's own side padding, and the container
   inside it adds the same again: at 1440 that is the band at 80 and the
   rows at 120, which is the design. */
.h2-services {
	padding-inline: var(--container-pad);
}

.h2-services__band {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-block: clamp(1.5rem, 3.1vw, 2.5rem);
	border-radius: clamp(1rem, 1.9vw, 1.5rem);
	/* The design's gradient (2026-10-21): all but white over most of the
	   band, deepening to the blue past its bottom-left corner. */
	background-color: #f2fbff;
	background: linear-gradient(198.7deg, #F2FBFF 52.84%, #79ABE7 112.11%);
}

.h2-services__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-inline: auto;
	margin-block-end: clamp(1.5rem, 3.1vw, 2.5rem);
	text-align: center;
}

/* 44 at the design width, a medium weight in the display face. */
.h2-services__title {
	margin: 0;
	color: var(--color-heading);
	text-wrap: balance;
}

.h2-services__title-accent {
	color: var(--color-heading-accent);
}

.h2-services__lead {
	max-width: 36.25rem;
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: 1.556;
	text-wrap: pretty;
}

.h2-services__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- A row ----
   Picture, title, copy and the arrow across one line, centred on each
   other; the columns are the design's 298, ~290 and 375 with the 40px
   button, 64px apart. The hairline is under every row, the last
   included, as the design draws it - 1px of light/primary/line, laid on
   the band's gradient as ink (multiply) rather than flat: flat, it
   disappeared under the last row, where the gradient passes through the
   very same blue (2026-10-21). On the near-white ground it is the
   design's colour; where the ground deepens it reads a shade deeper. */
.h2-service-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 298fr) minmax(0, 290fr) minmax(0, 375fr) 2.5rem;
	grid-template-areas: "media title text go";
	column-gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(1.5rem, 3.1vw, 2.5rem);
}

/* Fading up (the reveal in components.css): the rows one after another. */
.h2-service-row:nth-child(2) {
	--reveal-delay: 0.1s;
}

.h2-service-row:nth-child(3) {
	--reveal-delay: 0.2s;
}

.h2-service-row::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: #b5d5fb;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.h2-service-row__media {
	grid-area: media;
	aspect-ratio: 298 / 152;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--color-surface-muted);
}

.h2-service-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 40 on 40 in the design's navy, a medium weight in the display face. */
.h2-service-row__title {
	grid-area: title;
	margin: 0;
	color: #143559;
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.5rem);
	font-weight: var(--fw-medium);
	line-height: 1.05;
	letter-spacing: 0;
	text-wrap: balance;
}

.h2-service-row__text {
	grid-area: text;
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: 1.5;
}

/* The 40px disc in the brand blue, the arrow in white. */
.h2-service-row__go {
	grid-area: go;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-on-primary);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.h2-service-row__go:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	transform: translateX(2px);
}

.h2-service-row__go svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* The button belongs to the phone layout only; above that every row is on
   screen and it would reveal nothing. */
.h2-services__more {
	display: none;
}

/* ---- Tablet: the picture beside the stacked title, copy and arrow ---- */

@media (max-width: 991.98px) {
	.h2-service-row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-areas:
			"media title"
			"media text"
			"media go";
		row-gap: 0.75rem;
		align-items: start;
	}

	.h2-service-row__media {
		align-self: center;
	}
}

/* ---- Phone: one row, stacked, and a button for the rest ---- */

@media (max-width: 767.98px) {
	.h2-service-row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"title"
			"text"
			"go";
	}

	/* Every row shows on a phone since the phone design of 2026-10-26; the
	   button that held the rest stays in the markup, hidden. */
	.h2-services__more {
		display: none;
		gap: var(--space-xs);
		align-items: center;
		margin: var(--space-md) auto 0;
		padding: 0.7rem 1rem 0.7rem 1.4rem;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-heading);
		font-family: var(--font-button);
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-button);
		cursor: pointer;
		box-shadow: var(--shadow-md);
	}

	/* A plus drawn from two strokes, so it can rotate into a minus when the
	   rest are open rather than being swapped for a second icon. */
	.h2-services__more-icon {
		position: relative;
		width: 1.6rem;
		height: 1.6rem;
		border-radius: 50%;
		background: var(--color-primary);
	}

	.h2-services__more-icon::before,
	.h2-services__more-icon::after {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		width: 0.7rem;
		height: 2px;
		background: var(--color-on-primary);
		content: "";
		transform: translate(-50%, -50%);
		transition: transform var(--dur) var(--ease);
	}

	.h2-services__more-icon::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.h2-services__more[aria-expanded="true"] .h2-services__more-icon::after {
		transform: translate(-50%, -50%) rotate(0deg);
	}
}

/* -------------------------------------------------------------------------
   5. What our customers say

   The design revision of 2026-10-21: the heading on the left with its
   last words in blue and a paragraph set right beside it, then a wall
   of cards in two rows running off both edges of the screen. Read off
   the export: the heading 44/48 in the display face; the paragraph
   18/28 on a 642px measure; cards 386 wide on 28px of padding, a pale
   blue ground on a hairline with 12px corners, 24px stars, the review
   16/24 in quotation marks, the face 56 across with the name at 16 and
   its line at 14; 12px between cards and 24px between the rows, the
   first row starting half a card before the page's edge and the second
   on it.

   The rows drift - the first to the left, the second to the right - and
   hold under the pointer or keyboard focus. Each row holds its reviews
   four times over (the partial sets --h2-reviews-sets) and moves by one
   set's share of its width, so the loop has no seam at any screen
   width. The gap is each card's own margin rather than a flex gap, so
   that share is exact. Reduced motion gets a still grid of each review
   once.
   ---------------------------------------------------------------------- */

/* The heading takes what the paragraph leaves: the paragraph is held to the
   design's 642px measure and sits right. */
.h2-reviews__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 40.125rem);
	justify-content: space-between;
	gap: var(--space-lg) clamp(2rem, 6vw, 6rem);
	align-items: start;
	margin-block-end: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* 44 on 48 at the design width, a medium weight in the display face. */
.h2-reviews__title {
	margin: 0;
	color: var(--color-heading);
	text-wrap: initial;
}

.h2-reviews__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

.h2-reviews__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: 1.556;
	text-align: right;
}

/* ---- The wall ---- */

.h2-reviews__wall {
	/* Fading up (the reveal in components.css): a beat after the heading. */
	--reveal-delay: 0.15s;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	overflow: hidden;
}

.h2-reviews__row {
	display: flex;
	width: max-content;
	/* The second row starts on the page's edge; the first half a card
	   before it. */
	margin-inline-start: calc(max(var(--container-pad), (100vw - var(--container-wide)) / 2) - 10.75rem);
	animation: h2-reviews-drift var(--h2-reviews-duration, 90s) linear infinite;
	will-change: transform;
}

.h2-reviews__row--reverse {
	margin-inline-start: max(var(--container-pad), (100vw - var(--container-wide)) / 2);
	animation-direction: reverse;
}

.h2-reviews__wall:hover .h2-reviews__row,
.h2-reviews__wall:focus-within .h2-reviews__row {
	animation-play-state: paused;
}

/* One set's share: with four sets, a quarter. */
@keyframes h2-reviews-drift {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% / var(--h2-reviews-sets, 4)));
	}
}

.h2-reviews__set {
	display: flex;
	flex-shrink: 0;
}

/* ---- A card ---- */

.h2-review-card {
	display: flex;
	flex: none;
	flex-direction: column;
	width: min(24.125rem, 80vw);
	margin-inline-end: 0.75rem;
	padding: 1.75rem;
	border: 1px solid #cfe0f5;
	border-radius: 0.75rem;
	background: #f4f8fd;
	color: var(--color-heading);
}

/* 24px stars, 6px apart, in the design's yellow. */
.h2-review-card__rating {
	margin: 0 0 1.125rem;
	color: #ffd400;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.25rem;
}

/* 16 on 24, held to five lines so the rows keep an even height; the
   whole review is still in the page for anyone reading it aloud. */
.h2-review-card__text {
	margin: 0 0 1.75rem;
	/* A blockquote for meaning, not for the theme's quotation styling: no
	   bar, no inset, no italic. */
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	font-size: var(--fs-body);
	font-style: normal;
	line-height: 1.5;
}

.h2-review-card__text p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}

.h2-review-card__identity {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-block-start: auto;
}

.h2-review-card__avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--color-primary-100);
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	object-fit: cover;
}

.h2-review-card__naming {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.h2-review-card__name {
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.h2-review-card__date {
	color: var(--color-text);
	font-size: 0.875rem;
	line-height: 1.3;
}

/* ---- Reduced motion: a still grid, each review once ---- */

@media (prefers-reduced-motion: reduce) {
	.h2-reviews__wall {
		max-width: calc(var(--container-wide) + var(--container-pad) * 2);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		overflow: visible;
	}

	.h2-reviews__row,
	.h2-reviews__row--reverse {
		display: contents;
		animation: none;
	}

	.h2-reviews__set {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.h2-reviews__set[aria-hidden] {
		display: none;
	}

	.h2-review-card {
		margin-inline-end: 0;
	}
}

/* ---- Narrower screens ---- */

@media (max-width: 991.98px) {
	.h2-reviews__head {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	.h2-reviews__text {
		max-width: 44rem;
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
   6. Stay Informed (the blog)

   The design revision of 2026-10-21: the heading with its last word in
   blue and a blue pill on the right, then three matching cards. Read
   off the export over the 1280 container: the heading 48 in the display
   face; the pill 48 high on 24px of padding; 80px down to the cards;
   three 416px cards 16px apart on a hairline with 12px corners, the
   picture at 416x290 across the top, then 20px of padding round a 24/32
   title, 16/24 excerpt and the link at the foot in the brand blue.
   ---------------------------------------------------------------------- */

.h2-blog__header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	align-items: center;
	justify-content: space-between;
	margin-block-end: clamp(2rem, 5.5vw, 5rem);
}

/* 48 at the design width, a medium weight in the display face. */
.h2-blog__title {
	margin: 0;
	color: var(--color-heading);
}

.h2-blog__title-accent {
	color: var(--color-heading-accent);
}

/* The blue pill: 48 high, 24px either side of a 16px label with the
   arrow 8px after it. */
.h2-blog__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

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

.h2-blog__cta-icon {
	display: inline-flex;
	align-items: center;
}

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

/* Three across, 16px apart; the cards stretch to one height. */
.h2-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

/* ---- A card ---- */

/* Fading up (the reveal in components.css): the cards one after another. */
.h2-blog-card:nth-child(2) {
	--reveal-delay: 0.1s;
}

.h2-blog-card:nth-child(3) {
	--reveal-delay: 0.2s;
}

.h2-blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	background: var(--color-surface);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.h2-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* 416x290 across the top, whatever shape the picture is: the frame keeps
   the ratio and the picture is cropped to fill it. The picture is taken
   out of flow, and the frame clips, because a ratio box that overflows is
   otherwise allowed to grow to its content - a portrait photograph made
   one card twice the height of its neighbours. The design's grey shows
   where there is no picture. */
.h2-blog-card__media {
	position: relative;
	flex: none;
	overflow: hidden;
	aspect-ratio: 416 / 290;
	background: #dfe3e8;
}

.h2-blog-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.h2-blog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 1.5rem 1.25rem 1.875rem;
}

/* 24 on 32. */
.h2-blog-card__title {
	margin: 0;
	color: var(--color-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: var(--fw-semibold);
	line-height: 1.333;
}

.h2-blog-card__title a {
	color: inherit;
	text-decoration: none;
}

.h2-blog-card__title a:hover {
	color: var(--color-primary);
}

/* 16 on 24, held to three lines so the row keeps an even height. */
.h2-blog-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Held to the foot, so the links line up across the row. */
.h2-blog-card__more {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin-block-start: auto;
	padding-block-start: 1.5rem;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

a.h2-blog-card__more:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.h2-blog-card__more svg {
	width: 1rem;
	height: 1rem;
	transition: transform var(--dur) var(--ease);
}

a.h2-blog-card__more:hover svg {
	transform: translateX(3px);
}

@media (max-width: 991.98px) {
	.h2-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.h2-blog__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   7. Open late, seven days a week

   The blue panel beside the map. Both tables are in the page at once and only
   [data-tab-hidden] under the .js scope hides the inactive one, so without
   JavaScript both simply render in turn.
   ---------------------------------------------------------------------- */

/* The design's own split at 1440: a 610px panel beside a 570px map, 20px
   apart — 1200 across. The row is as tall as the panel's content - the
   heading, the copy, the switch and the table - and the map fills that
   height (2026-10-21: the design ends the panel just under the table; the
   771 the export measured was holding a long empty run beneath it). */
.h2-hours__inner {
	display: grid;
	grid-template-columns: 610fr 570fr;
	/* 20px at 1440. */
	gap: clamp(0.75rem, 1.39vw, 1.25rem);
	align-items: stretch;
}

.h2-hours__panel,
.h2-hours__map {
	min-height: 0;
}

.h2-hours__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* A wider step before the switch than between the heading and the copy,
	   as the design has it. */
	gap: var(--space-sm);
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-radius: var(--radius-2xl);
	/* The flat blue is the real ground and the export lies over it, so the
	   panel keeps the brand colour behind a slow-loading picture. */
	background-color: var(--color-primary-200);
	background-image: var(--h2-hours-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* The design system's "5XL/Semi Bold": Manrope 600, 48 on a 100% line with
   0.5% tracking, the last words running on in the brand blue. The measure
   is what breaks the line after "seven", as the design has it. */
.h2-hours__title {
	margin: 0;
	max-width: 17ch;
	color: var(--color-heading);
}

.h2-hours__title-accent {
	color: var(--color-heading-accent);
}

.h2-hours__text {
	margin: 0;
	max-width: 38ch;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.h2-hours__tabs {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 100%;
	margin-block-start: var(--space-md);
}

/* A white stadium holding both buttons, with the selected one filled — so
   the switch reads as one control rather than two separate buttons. */
.h2-hours__tablist {
	display: inline-flex;
	flex-wrap: wrap;
	align-self: flex-start;
	gap: 0.25rem;
	padding: 0.3rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
}

.h2-hours__tab {
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: var(--fs-sm);
	line-height: 1.2;
	letter-spacing: var(--ls-button);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.h2-hours__tab[aria-selected="true"] {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* Both tables occupy the same grid cell, so the box is always as tall as the
   longer of the two and pressing the other tab cannot make the panel jump.
   The theme's tab script only toggles [data-tab-hidden]; the shared rule
   hides that with display:none, which would collapse the box, so this
   overrides it with visibility instead — the panel keeps its space, just
   stops being seen or reachable. */
.h2-hours__panels {
	display: grid;
	width: 100%;
}

.h2-hours__panelbody {
	grid-area: 1 / 1;
	width: 100%;
}

.js .h2-hours__panelbody[role="tabpanel"][data-tab-hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

.h2-hours__table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	/* The radius has to clip the first and last rows' corners. */
	overflow: hidden;
	font-size: var(--fs-sm);
}

.h2-hours__table th,
.h2-hours__table td {
	padding: 0.85rem 1.1rem;
	text-align: left;
}

.h2-hours__table thead th {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	border-block-end: 1px solid var(--color-divider);
}

.h2-hours__table tbody th {
	color: var(--color-heading);
	font-weight: var(--fw-medium);
}

.h2-hours__table tbody td {
	color: var(--color-text);
}

/* Banded rows, as the design has them. */
.h2-hours__table tbody tr:nth-child(even) {
	background: var(--color-surface-muted);
}

/* The panel decides how tall the row is; the map fills whatever that comes
   to. The map export is 570x771 — taller than the copy beside it — so left in
   normal flow it set the row height itself and the panel stretched to match,
   leaving a long empty run under the table. Taking the picture out of the
   flow puts the panel back in charge. */
.h2-hours__map {
	/* Fading up (the reveal in components.css): a beat after the panel. */
	--reveal-delay: 0.15s;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-2xl);
}

.h2-hours__map a,
.h2-hours__map img,
.h2-hours__map iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The live map fills the same box as the picture, without a frame line. */
.h2-hours__map iframe {
	border: 0;
	background: var(--color-surface-muted);
}

/* The table is the one thing here that cannot simply shrink: three columns
   of times need their width. Below this it scrolls inside its own box rather
   than pushing the page sideways. */
/* Stacked, the map has no panel beside it to take its height from, so it
   keeps a sensible crop of its own. */
@media (max-width: 767.98px) {
	.h2-hours__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.h2-hours__map {
		aspect-ratio: 4 / 3;
	}
}

/* The table fits rather than scrolling: three short columns of times only
   need the room the padding was taking. A scrolling table read as a cut-off
   one — the right-hand column and the card's own rounded corner both
   disappeared past the edge. */
@media (max-width: 575.98px) {
	.h2-hours__panel {
		padding: var(--space-md) var(--space-sm) var(--space-lg);
	}

	.h2-hours__table {
		min-width: 0;
		font-size: var(--fs-xs);
	}

	.h2-hours__table th,
	.h2-hours__table td {
		padding: 0.7rem 0.5rem;
	}

	/* The times need no more room than their own digits, which leaves the
	   day names the rest — that is what stops the last column being pushed
	   off the edge. */
	.h2-hours__table td {
		width: 1%;
		white-space: nowrap;
	}

	.h2-hours__tab {
		padding: 0.5rem 0.85rem;
		font-size: var(--fs-xs);
	}
}

/* -------------------------------------------------------------------------
   The phone design (2026-10-26)

   Drawn at 375 with 16px either side. Every heading is the site's h2 at
   its full 48 on a 100% line, and the body sizes are the desktop's; what
   changes is the composition. The care cards go in a grid of two - the
   photographs 155 wide, the panels 180, 7px apart, the panel changing
   sides row by row. The travel copy card comes before the map card, and
   the claims stand three across at 22 over 14. The services band shows
   every row, the titles 40/40 and the arrow standing on the hairline.
   The hours switch sits on one line and the map is a taller card under
   the panel. The blog's blue pill goes under the cards, centred.
   ---------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	/* The joins the design draws tighter than the page's 120: 80 from the
	   hero to the care copy and from the travel map to the services band
	   (each section's own 40 either side, nothing between), and 40 from
	   the blog's pill to the footer. */
	.page-template-template-home .h2-hero + .h2-band,
	.page-template-template-home .h2-band + .section {
		margin-block-start: 0;
	}

	.page-template-template-home .site-footer {
		margin-block-start: 0;
	}

	.h2-popular__title,
	.h2-travel__title,
	.h2-services__title,
	.h2-reviews__title,
	.h2-hours__title,
	.h2-blog__title {
		font-size: 3rem;
		line-height: 1;
	}

	/* ---- Care you can book today ---- */

	.h2-popular__inner {
		gap: 1.875rem;
	}

	/* Three columns 7px apart: 155 for a photograph, and 180 for a panel
	   made of the middle 18 and the other 155 - so the panel is the wider
	   card on every row and the rows alternate which side it takes, as the
	   design draws them. The card's slot (the partial numbers them) places
	   it, so an emptied card leaves its space rather than shifting the
	   rest. */
	.h2-popular__cards {
		display: grid;
		grid-template-columns: 155fr 18fr 155fr;
		gap: 0.4375rem;
		/* Stretched, so a photograph is as tall as the panel beside it and
		   no taller: left to itself a portrait picture would set the row. */
		align-items: stretch;
		columns: auto;
	}

	.h2-pop-card[data-slot="1"] { grid-area: 1 / 1 / 2 / 2; }
	.h2-pop-card[data-slot="2"] { grid-area: 1 / 2 / 2 / 4; }
	.h2-pop-card[data-slot="3"] { grid-area: 2 / 1 / 3 / 3; }
	.h2-pop-card[data-slot="4"] { grid-area: 2 / 3 / 3 / 4; }
	.h2-pop-card[data-slot="5"] { grid-area: 3 / 1 / 4 / 2; }
	.h2-pop-card[data-slot="6"] { grid-area: 3 / 2 / 4 / 4; }

	.h2-pop-card {
		margin: 0;
		border-radius: 0.75rem;
	}

	/* The photograph fills whatever height its row comes to: the picture is
	   taken out of flow, so its own portrait shape cannot set the row. */
	.h2-pop-card--photo {
		aspect-ratio: auto;
		min-height: 9.75rem;
	}

	.h2-pop-card--photo .h2-pop-card__image {
		position: absolute;
		inset: 0;
	}

	/* 13 on 18 with 14px of padding; the panel's floor is the design's 157. */
	.h2-pop-card--panel,
	.h2-popular__col:nth-child(3) .h2-pop-card--panel {
		min-height: 9.8125rem;
		padding: 0.75rem 0.875rem;
	}

	.h2-pop-card__copy {
		font-size: 0.8125rem;
		line-height: 1.385;
	}

	/* The white label: 28 high with a 24px disc and 13px type, 14px up
	   from the foot. */
	.h2-pop-card__label {
		bottom: 9%;
		gap: 0.375rem;
		max-width: 100%;
		padding: 0.125rem 0.125rem 0.125rem 0.4rem;
	}

	/* On one line, as the design has "Travel Vaccination". */
	.h2-pop-card__label-text {
		font-size: 0.8125rem;
		white-space: nowrap;
	}

	.h2-pop-card__go {
		width: 1.5rem;
		height: 1.5rem;
	}

	.h2-pop-card__go svg {
		width: 0.875rem;
		height: 0.875rem;
	}

	/* ---- Travel ---- */

	.h2-travel__inner {
		gap: 1rem;
	}

	/* The copy card first, the map under it; 16px of padding on both. */
	.h2-travel__card--copy {
		order: -1;
		padding: 1rem;
	}

	/* The pill a long way under the paragraph, as the design sets it. */
	.h2-travel__cta {
		margin-block-start: 5.75rem;
	}

	.h2-travel__card--map {
		gap: 1.5rem;
		padding: 1rem 1rem 1.375rem;
	}

	.h2-travel__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.h2-travel-chip:nth-child(3) {
		grid-column: auto;
	}

	.h2-travel-chip__value {
		font-size: 1.375rem;
	}

	.h2-travel-chip__label {
		font-size: 0.875rem;
		line-height: 1.3;
	}

	/* ---- Our services ---- */

	.h2-services__band {
		padding-block: 2.5rem;
		border-radius: 1.5rem;
	}

	.h2-services__header {
		gap: 0.75rem;
		margin-block-end: 0.5rem;
	}

	.h2-services__title-accent {
		display: block;
	}

	/* 40 above each row, none below: the arrow stands on the hairline. */
	.h2-service-row {
		row-gap: 0.75rem;
		padding-block: 2.5rem 0;
	}

	/* 40/40, held to a measure that breaks every title in two as the design
	   has them ("Ear Wax / Removal", "Pharmacy / First"). */
	.h2-service-row__title {
		max-width: 13rem;
		margin-block-start: 0.75rem;
		font-size: 2.5rem;
	}

	.h2-service-row__go {
		margin-block-start: 0.75rem;
	}

	/* ---- What our customers say ---- */

	.h2-reviews__head {
		margin-block-end: 2.75rem;
	}

	/* A card the width of the page's measure, its review at 14. */
	.h2-review-card {
		width: min(24.125rem, 100vw - 2 * var(--container-pad));
		padding: 1.5rem 1.25rem;
	}

	.h2-review-card__text {
		font-size: 0.875rem;
	}

	/* ---- Open late ---- */

	.h2-hours__inner {
		gap: 1rem;
	}

	.h2-hours__panel {
		padding: 2.5rem 1rem;
		border-radius: 1.5rem;
	}

	.h2-hours__text {
		font-size: 1rem;
		line-height: 1.75;
	}

	.h2-hours__tabs {
		margin-block-start: 1rem;
	}

	/* Both tabs on one line in the white stadium: 12px type on 16px of
	   padding fits "Travel Clinic Opening Hours" and "Opening Hours" side
	   by side at 375. */
	.h2-hours__tablist {
		flex-wrap: nowrap;
		gap: 0.25rem;
		padding: 0.375rem;
	}

	.h2-hours__tab {
		padding: 0.55rem 1rem;
		font-size: 0.75rem;
		letter-spacing: 0;
		white-space: nowrap;
	}

	/* 15px type in 53px rows, the times packed to the right. */
	.h2-hours__table {
		font-size: var(--fs-sm);
	}

	.h2-hours__table th,
	.h2-hours__table td {
		padding: 0.9rem 1.25rem;
	}

	/* A taller card than the tablet's crop: 343 by 365 in the design. */
	.h2-hours__map {
		aspect-ratio: 47 / 50;
		border-radius: 1.5rem;
	}

	/* ---- Stay informed ---- */

	/* The heading, the cards, then the pill centred under them: the header
	   dissolves so its two children can take their own places in the
	   column. */
	.h2-blog > .container {
		display: flex;
		flex-direction: column;
	}

	.h2-blog__header {
		display: contents;
	}

	.h2-blog__title {
		order: 1;
		margin-block-end: 2.5rem;
	}

	.h2-blog__title-accent {
		display: block;
	}

	.h2-blog__grid {
		order: 2;
		gap: 1.25rem;
	}

	.h2-blog__cta {
		order: 3;
		align-self: center;
		margin-block-start: 1.875rem;
	}

	/* 343 by 280 across the top of a card. */
	.h2-blog-card__media {
		aspect-ratio: 49 / 40;
	}

	.h2-blog-card__body {
		padding: 1.625rem 1.25rem 1.75rem;
	}
}