/* ==========================================================================
   SSM Pharmacy — "Four times a day"
   --------------------------------------------------------------------------
   The design system is the client's own product. A FlexRx pack is colour-coded
   by time of day: breakfast pale yellow, lunch white, dinner blush, bedtime
   pale blue. Those four values are sampled straight off the pharmacy's own
   patient sheet and they drive the whole page. No competitor in Northern
   Ontario has the machine, so no competitor can use this system.

   Ground stays white. The palette is bright blue and red on white because that
   is what the I.D.A. mark is; a tinted "tasteful" ground would be an aesthetic
   imported from somewhere else. The four dose tints do the warming instead.
   ========================================================================== */

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-var.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
}

:root {
	/* THE MARK — sampled from the client's own I.D.A. logo file. */
	--ida-blue: #0064D1;   /* 5.61:1 on white, so it works for buttons and text */
	--ida-red:  #FF0D01;   /* the mark. FILLS only — 3.95:1 is under AA for text */
	--ida-red-text: #E00A00; /* same hue, 4.98:1 on white, for red set as type */

	/* darker steps of the same blue, for text and dark grounds */
	--deep:  #00468F;      /* 9.24:1  */
	--navy:  #04203D;      /* 16.42:1 */
	--ink:   #0A1826;
	--ink-70: #4A5765;
	--red-lift: #FF4438;   /* the red, lifted to clear 4.5:1 on navy */

	--sky:   #E8F0FB;
	--paper: #F2F4F7;
	--rule:  #DBE0E7;
	--white: #FFFFFF;

	/* The four FlexRx dose tints. These are McKesson's product colour-code, NOT
	   I.D.A. brand colours, so they appear ONLY inside the drawn blister pack,
	   where they are depicting a real thing. Never as page furniture. */
	--dose-1: #F3E6A5;
	--dose-2: #ECEAE3;
	--dose-3: #F1DCD1;
	--dose-4: #C3EBF6;

	/* DM Sans. WC's own social creative for this client specifies it ("pharmacy
	   blue, restrained red accents, DM Sans, and the official logo") and the
	   client's live site uses it too, so the website matches what they already
	   see from us. Nobody has the actual I.D.A. guide — see the note to Zak. */
	--display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--wrap: 1240px;
	--gut: clamp(1.25rem, 4vw, 3rem);
	/* distance from the viewport edge to the wrap's content edge */
	--bleed: calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gut));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--body);
	font-size: 1.1875rem;          /* 19px — the audience skews senior */
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0;
	font-variation-settings: "wdth" 100, "opsz" 48;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; }
h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.18; letter-spacing: -0.014em; }
h4 { font-size: 1rem; line-height: 1.3; letter-spacing: 0.01em; }
p { margin: 0 0 1.1em; max-width: 62ch; }

a { color: var(--deep); }
a:where(:hover, :focus-visible) { color: var(--ida-red-text); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--ida-red);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ink); color: #fff; padding: 1rem 1.5rem; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* An eyebrow, used TWICE on the page and not on every section. A label above
   every heading is one of the reliable tells. */
.eyebrow {
	font-family: var(--body);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ida-blue);
	margin: 0 0 1rem;
}
.eyebrow--red { color: var(--ida-red-text); }

/* On light grounds the eyebrow stops shouting: sentence case, deep blue.
   Brand red on the week panel measured 4.1:1, under the 4.5 floor. */
.eyebrow--lead {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--deep);
}
/* the week panel is light again, so the brand red is back to being the accent */

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px;                       /* generous target, senior audience */
	padding: 0.85rem 1.6rem;
	font-family: var(--body); font-size: 1.0625rem; font-weight: 600;
	text-decoration: none; border-radius: 4px;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--ida-blue); color: #fff; border: 2px solid var(--ida-blue); }
.btn--solid:where(:hover, :focus-visible) { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--deep); border: 2px solid var(--rule); }
.btn--ghost:where(:hover, :focus-visible) { border-color: var(--ida-blue); color: var(--ida-blue); }

/* ── header ────────────────────────────────────────────────────────────── */
/* The topbar exists BELOW 1080px only — see the note in index.html. It is one
   line: two call icons on the left, the delivery line on the right, never
   wrapping. `nowrap` here is safe because the icons make the row short. */
.hdr__util { display: none; background: var(--navy); color: #fff; }
.hdr__utilrow { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: .35rem; }
.hdr__phones { margin: 0; display: flex; flex-wrap: nowrap; gap: 1.25rem; font-size: 1rem; }
.hdr__phones a {
	color: #fff; text-decoration: none; font-weight: 700;
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 44px; padding-block: .2rem; white-space: nowrap;
}
.hdr__phones .ico { width: 18px; height: 18px; fill: var(--red-lift); flex: none; }
.hdr__phones a:where(:hover, :focus-visible) { color: #BBD4F5; }
.hdr__phones a:where(:hover, :focus-visible) .ico { fill: #fff; }
.hdr__note { margin: 0; font-size: .9375rem; color: #A9BBC6; white-space: nowrap; }

/* ── 2 · one line, always ──────────────────────────────────────────────
   The menu and the CTA were wrapping under the logo at 1440. Six labels at
   1.0625rem with 1.5rem gutters simply do not fit beside a 138px logo and a
   215px button, and `flex-wrap: wrap` let them fall quietly onto a second
   row rather than say so. Nothing in this bar wraps now; the gutter is
   fluid instead, and the burger takes over before the type has to shrink. */
.hdr__bar {
	/* 22 Sep 2026: the bar now carries five labels AND two buttons (Ron added
	   Pharmacist prescribing and Our flyer; Vaccines became a bookings button).
	   Measured at the tightest inline width, 1241px, which is one pixel above
	   the burger breakpoint below. The gutters tightened rather than the type,
	   and the nav label reads "Prescribing" while the page, the H1 and the
	   footer all still say "Pharmacist prescribing". */
	display: flex; align-items: center; gap: clamp(.9rem, 1.3vw, 1.25rem);
	padding-block: 1rem; border-bottom: 1px solid var(--rule);
}
.hdr__logo { display: block; flex: none; }
.hdr__logo img { width: 138px; height: auto; }
.hdr__nav { display: flex; flex-wrap: nowrap; gap: clamp(.7rem, 1vw, 1rem); margin-left: auto; }
.hdr__cta { flex: none; white-space: nowrap; }
.hdr__nav a {
	color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem;
	padding-block: .35rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.hdr__nav a:where(:hover, :focus-visible) { color: var(--ida-blue); border-bottom-color: var(--ida-red); }

/* ── the pack ──────────────────────────────────────────────────────────
   Seven days across, four doses down. This is both the hero graphic and the
   explanatory device in the set piece, so it is one component used twice. */
.pack {
	--cell: 100%;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 10px;
	padding: clamp(.9rem, 2vw, 1.4rem);
	box-shadow: 0 14px 30px -22px rgba(10, 24, 38, .28);
}
.pack__days, .pack__rowlabels { font-family: var(--body); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); }
.pack__days {
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 6px; margin-left: var(--labelw, 84px); margin-bottom: .55rem; text-align: center;
}
.pack__body { display: flex; gap: 10px; }
.pack__rowlabels {
	width: var(--labelw, 84px); flex: none;
	display: grid; grid-template-rows: repeat(4, 1fr); gap: 6px; align-items: center;
	text-align: right; padding-right: .55rem; line-height: 1.1;
}
.pack__cells {
	flex: 1; display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 6px;
}

/* one sealed cup */
.cup {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 5px;
	border: 1px solid rgba(10, 24, 38, .14);
	background: var(--cupbg, #FAFAF8);
	display: grid; place-items: center;
	transform-origin: 50% 60%;
}
.cup[data-dose="1"] { --cupbg: var(--dose-1); }
.cup[data-dose="2"] { --cupbg: var(--dose-2); }
.cup[data-dose="3"] { --cupbg: var(--dose-3); }
.cup[data-dose="4"] { --cupbg: var(--dose-4); }

/* the tablet inside the cup */
.cup::after {
	content: "";
	width: 46%; height: 46%;
	border-radius: 999px;
	background: rgba(10, 24, 38, .30);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.5);
}
.cup--capsule::after { width: 58%; height: 34%; border-radius: 999px; background: rgba(0, 70, 143, .42); }
.cup--two::after { width: 30%; height: 30%; box-shadow: 0.62rem 0 0 rgba(10,24,38,.22); }
.cup--empty::after { display: none; }

/* the day currently being explained in the set piece */
.cup.is-lit { border-color: rgba(0, 70, 143, .55); box-shadow: 0 0 0 2px rgba(0, 70, 143, .45); z-index: 1; }
.pack__cells.is-focused .cup { transition: opacity .3s ease, box-shadow .3s ease; }
.pack__cells.is-focused .cup:not(.is-lit) { opacity: .22; }

.pack__cap, .pack__stamp {
	font-family: var(--body); font-size: .9375rem; color: var(--ink-70);
	margin: .9rem 0 0; max-width: none;
}
.pack__stamp { text-align: right; font-style: italic; color: #5A6670; }
.pack__cap { text-align: center; }


/* ── video hero ─────────────────────────────────────────────────────────────
   A hero is an invitation. It gets footage of the actual transaction — a
   pharmacist handing a sealed pack to a customer — with the offer sitting on
   top of it. The scrim values below were set by SAMPLING RENDERED PIXELS, not
   by eye: the footage is bright daylight with snow in the window, which is the
   worst case for white type. */
.vhero {
	position: relative;
	min-height: 86svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: clip;
	isolation: isolate;
	background: #04203D;
}
.vhero__media { position: absolute; inset: 0; z-index: 0; }
.vhero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 34%; }

/* two-axis scrim: a strong floor for the type, plus a left-weighted wash so the
   copy column never sits on the bright window */
.vhero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(4,32,61,.46) 0%, rgba(4,32,61,.20) 26%, rgba(4,32,61,.46) 72%, rgba(4,32,61,.80) 100%),
		linear-gradient(90deg, rgba(4,32,61,.95) 0%, rgba(4,32,61,.90) 34%, rgba(4,32,61,.56) 58%, rgba(4,32,61,.06) 78%);
}
.vhero__inner { position: relative; z-index: 2; padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem); color: #fff; }
.vhero__inner h1 {
	color: #fff; margin-bottom: 1.1rem;
	font-size: clamp(2.75rem, 5.6vw, 4.5rem);
	font-variation-settings: "wdth" 94, "opsz" 84;
	text-shadow: 0 2px 30px rgba(4,32,61,.45);
}
.eyebrow--onvideo { color: #BBD4F5; }
.vhero__lede {
	font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
	line-height: 1.45; color: rgba(255,255,255,.94); max-width: 44ch; margin-bottom: 1.35rem;
}

/* the offer — the thing v3 was missing entirely */
.offer {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .9rem;
	max-width: 54ch; margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	background: rgba(4,32,61,.55);
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 8px;
	backdrop-filter: blur(3px);
}
.offer__tag {
	flex: none; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; background: var(--ida-red); padding: .32rem .62rem; border-radius: 4px;
}
.offer__body { font-size: 1.0625rem; line-height: 1.5; color: rgba(255,255,255,.94); }

.btn--onvideo {
	background: rgba(255,255,255,.10); color: #fff; border: 2px solid rgba(255,255,255,.55);
	backdrop-filter: blur(3px);
}
.btn--onvideo:where(:hover, :focus-visible) { background: #fff; color: var(--navy); border-color: #fff; }

/* proof strip pinned to the foot of the hero */
.vhero__strip { position: relative; z-index: 2; background: rgba(4,32,61,.88); border-top: 1px solid rgba(255,255,255,.14); }
/* Four proofs, one line. They were breaking to two rows at 1440 and the
   fourth claim ended up orphaned under the first, which read as a mistake. */
/* Four proofs. They were breaking to two rows at 1440, orphaning the fourth
   claim under the first, which reads as a mistake rather than a layout.

   Note what the real constraint is: the wrap caps at 1240px, so a WIDER
   monitor never buys this row another pixel. Fitting one line is therefore a
   question of type size, not of breakpoint — 13px on a dark band is proof-strip
   fine print and reads as such. Below 1180 there genuinely is not room, so it
   becomes a balanced 2×2 instead of three-plus-an-orphan. */
.vhero__striprow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; padding-block: .95rem; }
.vhero__striprow span { font-size: .8125rem; letter-spacing: .01em; color: rgba(255,255,255,.82); }
@media (min-width: 1180px) {
	.vhero__striprow { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
	.vhero__striprow span { white-space: nowrap; }
}
.vhero__striprow b { color: #fff; font-weight: 700; }

@media (max-width: 900px) {
	.vhero { min-height: 82svh; }
	.vhero__media video { object-position: 70% 32%; }
	.vhero::after {
		background:
			linear-gradient(180deg, rgba(4,32,61,.40) 0%, rgba(4,32,61,.10) 22%, rgba(4,32,61,.62) 58%, rgba(4,32,61,.92) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vhero__media video { display: none; }
	.vhero__media { background: url("../media/counter-poster.jpg") 62% 34%/cover no-repeat; }
}

/* ── (old grid hero — superseded by .vhero) ─────────────────────────────── */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero__grid {
	display: grid; gap: clamp(2.5rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: center;
}
.hero__copy h1 { margin-bottom: 1.4rem; font-variation-settings: "wdth" 96, "opsz" 72; }
.lede { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); color: var(--ink-70); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.9rem 0 1.4rem; }
.hero__meta { font-size: 1rem; color: var(--ink-70); margin: 0; }
.hero__pack { --labelw: 78px; }

/* ── storefront band (parallax on a REAL photograph) ───────────────────── */
/* Diwakar, 9 Sep 2026: "the 1st three sections look similar (color and design),
   make it look odd."

   He was right, and this band was the cause. Hero, storefront and machine were
   all the same thing three times: full-bleed media, the SAME navy scrim over
   it, white type in a block on the left. Two thousand pixels of one colour and
   one composition before the page changed key at all.

   The scrim was also wasting the best asset here. This is a real photograph of
   the real building — white painted brick with the I.D.A. mark on it at two
   storeys, which is the only place on the page the client's brand appears in
   the wild. Under a navy wash the white brick reads blue-grey and the red in
   the mark goes brown.

   So this section changes key instead: light ground, no scrim at all, and the
   copy sits BESIDE the photograph rather than on top of it. Dark, light, dark
   — and the building looks like a building. */
.band { background: var(--white); padding-block: clamp(3.5rem, 7vw, 6rem); overflow: clip; }
.band__grid {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	align-items: center;
}
/* Bleeds to the RIGHT edge. The management figure below bleeds left, so the two
   photographic sections mirror rather than repeat each other. */
.band__fig {
	position: relative; margin: 0; margin-right: calc(-1 * var(--bleed));
	aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px 0 0 12px;
}
/* The source is 1900×1386 (1.37:1). A 4:3 box plus a deep parallax overscan
   left the visible frame at 1.06:1, which cropped the sides hard and clipped
   "PHARMACY" off the bottom of the sign — the one thing the photograph is
   here for. 3:2 with a shallow overscan lands at ~1.34:1, so the whole sign
   survives and the drift still has somewhere to go. */
/* Overscan has to beat the drift. At -6%/112% the image came within 2px of
   pulling off the bottom of its own frame at the end of the scroll; 8% of
   overhang against a 5% drift leaves ~10px of margin at any band height. */
.band__fig img {
	position: absolute; inset: -8% 0;
	width: 100%; height: 116%; object-fit: cover; object-position: center 50%;
	will-change: transform;
}
.band__line {
	font-family: var(--display); font-weight: 700; color: var(--ink);
	font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.08;
	letter-spacing: -.028em; margin: .6rem 0 .9rem;
}
.band__sub { margin: 0; color: var(--ink-70); font-size: 1.0625rem; max-width: 38ch; }

/* ── set piece ─────────────────────────────────────────────────────────── */
.story { position: relative; background: var(--paper); color: var(--ink); }
.story__sticky { position: sticky; top: 0; min-height: 92svh; display: flex; align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.story__inner {
	display: grid; gap: clamp(2.5rem, 5vw, 4rem);
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	align-items: center; width: 100%;
}
.story__text h2 { color: var(--ink); margin-bottom: 1.2rem; font-variation-settings: "wdth" 98, "opsz" 56; }
.story__body { color: var(--ink-70); font-size: 1.1875rem; min-height: 5.2em; }
.story__list { list-style: none; margin: 0 0 1.9rem; padding: 0; }
.story__list li {
	display: flex; align-items: flex-start; gap: .85rem;
	padding: .62rem 0; border-top: 1px solid rgba(10,24,38,.14);
	color: var(--ink); font-size: 1.0625rem;
}
.story__list li span {
	flex: none; width: 16px; height: 16px; margin-top: .34rem; border-radius: 3px;
	border: 1px solid rgba(10,24,38,.22);
}
.story__list li span[data-dose="1"] { background: var(--dose-1); }
.story__list li span[data-dose="2"] { background: var(--dose-2); }
.story__list li span[data-dose="3"] { background: var(--dose-3); }
.story__list li span[data-dose="4"] { background: var(--dose-4); }
.story .btn--solid { background: var(--ida-blue); border-color: var(--ida-blue); color: #fff; }
.story .btn--solid:where(:hover, :focus-visible) { background: var(--deep); border-color: var(--deep); color: #fff; }
.story__pack { --labelw: 92px; }
.story .pack { background: #fff; border-color: rgba(10,24,38,.10); box-shadow: 0 20px 44px -30px rgba(0,70,143,.42); }

/* the scroll runway that drives the sticky panel */
.story__track { height: 150vh; }

/* ── medication management ─────────────────────────────────────────────── */
/* The photograph bleeds off the left edge instead of sitting boxed inside the
   column. A picture that runs out of the frame reads as a spread; a picture
   centred in a column with white space around it reads as a content block. */
.mgmt { padding-block: clamp(4rem, 8vw, 7rem); background: var(--white); overflow: clip; }
.mgmt__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.mgmt__fig { margin: 0; margin-left: calc(-1 * var(--bleed)); }
.mgmt__fig img {
	width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 42%;
	border-radius: 0 12px 12px 0; will-change: transform;
}
.mgmt__fig figcaption { font-size: .875rem; color: var(--ink-70); margin-top: .7rem; font-style: italic; padding-left: var(--gut); }
.mgmt__copy h2 { margin-bottom: 1.2rem; }
.mgmt__note { color: var(--ink-70); padding-top: 1.1rem; }
.mgmt__note::before { content: ""; display: block; width: 2.75rem; height: 2px; background: var(--ida-red); margin-bottom: 1.1rem; }

/* ── care today ────────────────────────────────────────────────────────── */
.care { padding-block: clamp(4rem, 8vw, 7rem); background: #EEF7FB; }
.care__head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.care__head h2 { margin-bottom: 1rem; }
.care__head p { font-size: 1.25rem; color: var(--ink-70); }
.care__cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.care__col { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: clamp(1.6rem, 3vw, 2.4rem); }
.care__col h3 { margin-bottom: .8rem; }
.care__col--clinic { background: var(--navy); color: #fff; border-color: var(--navy); }
.care__col--clinic h3 { color: #fff; }
.care__col--clinic p { color: rgba(255,255,255,.84); }

.ailments { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.ailments li { padding: .42rem 0; border-top: 1px solid var(--rule); font-size: 1rem; }

.facts { margin: 1.4rem 0; }
.facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.16); }
.facts dt { font-weight: 700; color: #BBD4F5; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; }
.facts dd { margin: 0; color: rgba(255,255,255,.86); font-size: 1rem; }

.care__col--clinic .btn--solid { background: #fff; border-color: #fff; color: var(--navy); }
.care__ghc { margin: 1.4rem 0 0; font-size: .9375rem; color: rgba(255,255,255,.66); }

/* ── vaccines ──────────────────────────────────────────────────
   Brand blue, not another dark video band — this sits well below the hero, so
   a solid colour here reads as emphasis rather than as a repeat of the top of
   the page. White on --deep is 9.24:1. */
.vax { background: var(--deep); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem); }
.vax__grid {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
}
.vax__copy h2 { color: #fff; margin-bottom: 1rem; }
.vax__lede { color: rgba(255,255,255,.9); font-size: 1.0625rem; max-width: 46ch; }
.eyebrow--onblue { color: #BBD4F5; }
.vax__label {
	font-family: var(--body); font-size: .8125rem; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: #BBD4F5; margin: 0 0 .9rem;
}
/* Same MedMe booking system as the clinic card above, but labelled by PLACE
   rather than by "book at", so the two are not the same pair of buttons twice. */
.btn--onblue { background: #fff; color: var(--deep); border: 2px solid #fff; }
.btn--onblue:where(:hover, :focus-visible) { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.vax__note { margin: 1rem 0 0; font-size: .9375rem; color: rgba(255,255,255,.72); }

@media (max-width: 900px) {
	.vax__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── team ──────────────────────────────────────────────────────────────── */
/* The team band runs edge to edge and the portraits sit at alternating heights.
   Five equal boxes in a row is the "3-up of small photos" tell; a full-bleed
   band with a stagger reads as a composition instead of a module. Each portrait
   drifts at its own rate on scroll — parallax on genuine photography is the one
   scroll effect the anti-slop checklist keeps. */
.team { padding-block: clamp(4rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem); overflow: clip; }
.team__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.team__head h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.team__head p { color: var(--ink-70); margin: 0; max-width: 46ch; }

.team__grid {
	list-style: none; margin: 0; padding: 0 var(--gut);
	width: 100vw; margin-left: 50%; transform: translateX(-50%);
	display: grid; gap: clamp(.75rem, 1.6vw, 1.4rem);
	grid-template-columns: repeat(5, 1fr);
	align-items: start;
}
/* Two pharmacists standing beside a paragraph, inside a split column.
   `team__grid` is the full-bleed five-across row for the WHOLE team and is the
   wrong tool here: dropped into a half-width column its children stretch to the
   full column and the portraits become billboards. On a navy section the
   captions also need lifting off `--ink-70`, which is invisible there. */
/* A location card that carries no photograph: the clinic note beside a store,
   or the pointer to the other counter. In a grid whose other cell opens with a
   full-width image, an image-less card reads as one whose photo failed to load,
   so it gets a surface of its own instead. */
.loc--note .loc__body {
	background: var(--paper); border-radius: 10px; height: 100%;
	padding: clamp(1.25rem, 2.2vw, 1.9rem);
}

.team__pair {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(.75rem, 1.6vw, 1.25rem); align-items: start;
}
.sect--navy .team__p b { color: #fff; }
.sect--navy .team__p span { color: #BBD4F5; }

.team__p { margin: 0; }
.team__p:nth-child(even) { margin-top: clamp(1.5rem, 3.5vw, 3.25rem); }
.team__p figure { margin: 0 0 .85rem; overflow: hidden; border-radius: 10px; background: var(--paper); }
.team__p img {
	width: 100%; aspect-ratio: 3 / 4.1; object-fit: cover; object-position: center 18%;
	display: block; will-change: transform; transform: scale(1.10);
}
.team__p b { display: block; font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.25; }
.team__p span { display: block; font-size: .9375rem; color: var(--ink-70); margin-top: .15rem; }

@media (max-width: 900px) {
	.team__head { grid-template-columns: minmax(0, 1fr); }
	.team__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; }
	.team__p:nth-child(even) { margin-top: 0; }
	.team__p img { aspect-ratio: 3 / 3.8; }
}
@media (max-width: 480px) {
	.team__grid { grid-template-columns: repeat(2, 1fr); }
}

.quote { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: clamp(1.6rem, 3vw, 2.4rem) 0 0; border-top: 2px solid var(--ida-red); }
.quote p { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.34; letter-spacing: -.016em; margin: 0 0 .8rem; max-width: 32ch; }
.quote cite { font-style: normal; font-size: .9375rem; color: var(--ink-70); }

/* ── locations ─────────────────────────────────────────────────────────── */
/* Two real buildings, at a size where you can actually see them. The pair runs
   edge to edge; the cards lose their outline so the photographs carry the
   section instead of a border doing it. */
.find { padding-block: clamp(4rem, 8vw, 7rem); background: var(--paper); overflow: clip; }
.find__h { margin-bottom: clamp(2rem, 4vw, 3rem); font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.find__grid {
	display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-inline: calc(-1 * var(--bleed)); padding-inline: var(--gut);
}
.loc { background: #fff; border-radius: 12px; overflow: hidden; }
.loc__media { aspect-ratio: 16 / 11; overflow: hidden; }
.loc__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.06); }
.loc__body { padding: clamp(1.5rem, 3vw, 2.4rem); }
.loc__body h3 { margin-bottom: .7rem; }
.loc__addr { color: var(--ink-70); margin-bottom: 1rem; }
.loc__addr a, .ftr__brand a { display: inline-block; padding-block: .3rem; }
.loc__hours { margin-bottom: 1rem; }
.loc__hours mark { background: #FFF3D0; box-shadow: 0 0 0 1px #E4C568; border-radius: 3px; padding: .32em .5em; color: var(--ink); }
.loc__flag { font-weight: 600; margin-bottom: 1.2rem; }
.loc__flag--open { padding-top: .95rem; }
.loc__flag--open::before { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--ida-red); margin-bottom: .85rem; }

/* ── services: a directory, not tiles ──────────────────────────────────── */
.services { padding-block: clamp(4rem, 8vw, 7rem); }
.services h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.services__cols { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services h3 { font-size: 1.0625rem; font-family: var(--body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ida-blue); padding-bottom: .7rem; border-bottom: 2px solid var(--ink); margin-bottom: .3rem; }
.dir { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.dir li { padding: .58rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
.services__flyer { margin-top: .5rem; }

/* ── footer ────────────────────────────────────────────────────────────── */
.ftr { background: var(--navy); color: #fff; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.ftr__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1.3fr 1fr 1fr 1.15fr; }
.ftr__brand img { width: 150px; background: #fff; padding: .6rem .8rem; border-radius: 6px; margin-bottom: 1rem; }
.ftr__brand p { color: rgba(255,255,255,.7); font-size: 1rem; }
.ftr__social { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; gap: .6rem; }
.ftr__social a {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
	transition: background-color .18s ease, border-color .18s ease;
}
.ftr__social svg { width: 22px; height: 22px; fill: #fff; }
.ftr__social a:where(:hover, :focus-visible) { background: var(--ida-blue); border-color: var(--ida-blue); }
.ftr h2 { color: #BBD4F5; font-family: var(--body); font-size: .8125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 .6rem; }
.ftr h2 + p + h2 { margin-top: 1.5rem; }
.ftr p { color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.9; }
.ftr p a { display: inline-block; padding-block: .3rem; }   /* >=24px target */
.ftr a { color: #fff; }
.ftr a:where(:hover, :focus-visible) { color: #BBD4F5; }
.ftr__lib { color: rgba(255,255,255,.62) !important; line-height: 1.6; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.ftr__legal p { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.55); }


/* == set piece: the machine ================================================
   Full-bleed footage of the actual differentiator. The copy sits to one side
   rather than centred on the film, because the film is bright, busy and
   light-coloured — a scrim heavy enough to carry white type across all of it
   would destroy the thing we are trying to show. */
.mach { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: clip; isolation: isolate; background: var(--navy); }
.mach__media { position: absolute; inset: 0; z-index: 0; }
.mach__media video { width: 100%; height: 100%; object-fit: cover; }
.mach::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(4,32,61,.94) 0%, rgba(4,32,61,.84) 34%, rgba(4,32,61,.34) 62%, rgba(4,32,61,.04) 86%);
}
.mach__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 6rem); }
.mach__copy { max-width: 40rem; color: #fff; }
.mach__copy h2 { color: #fff; margin-bottom: 1.1rem; font-size: clamp(2.125rem, 4vw, 3.25rem); font-variation-settings: "wdth" 96, "opsz" 60; }
.mach__lede { color: rgba(255,255,255,.9); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; max-width: 46ch; }
.mach__facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; max-width: 42ch; }
.mach__facts li { display: flex; gap: 1rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.18); }
.mach__facts b { flex: none; width: 7rem; font-family: var(--display); font-size: 1.4rem; color: #BBD4F5; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.mach__facts span { color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.45; }

/* == review wall ========================================================== */
.revs { padding-block: clamp(4rem, 8vw, 7rem); background: var(--sky); }
.revs__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.revs__head h2 { font-size: clamp(2.5rem, 5vw, 4rem); }
.revs__head p { margin: 0; color: var(--ink-70); font-size: 1.125rem; }
.revs__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.revs__grid li { background: #fff; border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; justify-content: space-between; }
.revs__grid p { font-family: var(--display); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.42; letter-spacing: -.01em; margin-bottom: 1.2rem; }
.revs__grid cite { font-style: normal; font-size: .9375rem; font-weight: 700; color: var(--ida-blue); }

/* == switch form ========================================================== */
.switch { padding-block: clamp(4rem, 8vw, 7rem); background: var(--navy); color: #fff; }
.switch__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: start; }
.switch__copy h2 { color: #fff; margin-bottom: 1.1rem; }
.switch__copy p { color: rgba(255,255,255,.86); }
.switch__list { list-style: none; margin: 1.6rem 0; padding: 0; }
.switch__list li { padding: .6rem 0 .6rem 1.9rem; border-top: 1px solid rgba(255,255,255,.16); position: relative; color: #fff; }
.switch__list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 12px; height: 12px; border-radius: 2px; background: var(--ida-red); }
.switch__call { font-size: 1.0625rem; color: rgba(255,255,255,.86); }
.switch__call a { color: #fff; font-weight: 700; }
.switch__call span { color: rgba(255,255,255,.6); font-size: .9375rem; }

.switch__form { background: #fff; border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.25rem); color: var(--ink); }
.switch__form label { display: block; font-size: .9375rem; font-weight: 700; margin-bottom: 1rem; }
.switch__form input[type="text"], .switch__form input[type="tel"] {
	display: block; width: 100%; margin-top: .4rem; padding: .8rem .9rem; font: inherit; font-size: 1.0625rem; font-weight: 400;
	border: 1px solid var(--rule); border-radius: 6px; background: #FBFBF9;
}
.switch__form input:focus { border-color: var(--ida-blue); outline: 3px solid rgba(0,100,166,.28); outline-offset: 0; }
.switch__form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.switch__form legend { font-size: .9375rem; font-weight: 700; padding: 0; margin-bottom: .5rem; }
.switch__form .radio { font-weight: 400; font-size: 1rem; display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.switch__form .btn { width: 100%; margin-top: .4rem; }
.switch__note { font-size: .8125rem; color: var(--ida-red-text); margin-bottom: 1rem; font-weight: 600; }
.switch__fine { font-size: .875rem; color: var(--ink-70); margin: .9rem 0 0; }

/* == mobile nav =========================================================== */
.hdr__burger { display: none; background: none; border: 0; cursor: pointer; padding: .7rem; margin-left: auto; }
.hdr__burger span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1240px) {
	.hdr__burger { display: block; }
	.hdr__bar { position: relative; }
	.hdr__nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
		flex-direction: column; gap: 0; background: var(--navy); padding: .5rem var(--gut) 1.25rem;
	}
	.hdr__nav.is-open { display: flex; }
	.hdr__nav a { color: #fff; font-size: 1.125rem; padding-block: .9rem; border-bottom: 1px solid rgba(255,255,255,.12); }
	.hdr__nav a:where(:hover, :focus-visible) { color: #BBD4F5; border-bottom-color: var(--ida-red); }
}

@media (max-width: 900px) {
	.mach { min-height: auto; display: block; }
	.mach__media { position: relative; height: 46svh; }
	.mach::after { background: linear-gradient(180deg, rgba(4,32,61,.12) 0%, rgba(4,32,61,.5) 66%, var(--navy) 100%); }
	.mach__inner { padding-block: clamp(2rem, 6vw, 3rem) clamp(3rem, 7vw, 4rem); }
	.switch__grid { grid-template-columns: minmax(0, 1fr); }
	/* 5.5rem clipped "LARGEST" by 15px — the label column has to fit its
	   longest label, not the average one. */
	.mach__facts b { width: 6.6rem; }
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
	.hdr__nav { display: none; }
	.hdr__bar { justify-content: space-between; }
	.ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* This is the one width band where the topbar earns its keep: the header
	   CTA has just given way to a burger, so the call bar is the only tap
	   target above the fold. */
	.hdr__util { display: block; }
}
@media (max-width: 900px) {
	.hero__grid, .story__inner, .mgmt__grid, .team__head { grid-template-columns: minmax(0, 1fr); }
	.care__cols, .find__grid { grid-template-columns: minmax(0, 1fr); }
	.services__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.story__sticky { min-height: auto; position: static; padding-block: clamp(3rem, 8vw, 4rem); }
	.story__track { display: none; }          /* no sticky runway on small screens */
	.story__body { min-height: 0; }
	.mgmt__fig { order: 2; margin-inline: calc(-1 * var(--bleed)); }
	.mgmt__fig img { border-radius: 0; aspect-ratio: 4 / 3; }
	.mgmt__fig figcaption { padding-inline: var(--gut); }
	/* one column, and the storefront goes full-bleed rather than half-bleed */
	.band__grid { grid-template-columns: minmax(0, 1fr); }
	.band__fig { margin-inline: calc(-1 * var(--bleed)); border-radius: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
	.pack { --labelw: 62px; }
	.pack__days, .pack__rowlabels { font-size: .6875rem; letter-spacing: .03em; }
	.ailments, .services__cols, .ftr__grid { grid-template-columns: minmax(0, 1fr); }
	.vhero__striprow { grid-template-columns: minmax(0, 1fr); }
	.hdr__note { display: none; }
	.hdr__logo img { width: 112px; }
	.hdr__cta { display: none; }
	.facts > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ── motion ────────────────────────────────────────────────────────────── */
/* Only two things move on this page and both carry meaning: the pack fills,
   and the storefront shifts against the type. Nothing decorative animates. */
.js .cup { opacity: 0; transform: translateY(8px) scale(.94); }
.js .cup.is-in { opacity: 1; transform: none; transition: opacity .34s ease, transform .34s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
	.js .cup, .js .cup.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
	.band__fig img { position: static; height: 100%; inset: 0; }
	.pack__cells.is-focused .cup:not(.is-lit) { opacity: 1; }
	* { scroll-behavior: auto !important; }
}

@media print {
	.hdr__util, .hdr__nav, .btn, .story__track { display: none !important; }
	.story__sticky { position: static; min-height: 0; }
	body { font-size: 12pt; }
}


/* == button symmetry ======================================================
   Zak, 2026-08-21: "I would like to see symmetry in the buttons."

   A GRID, not a flex row. The first pass used `flex: 1 1 0`, which does make
   the boxes equal — by dividing the row in half and letting each label do
   whatever it likes inside. A short label got a lake of dead padding, a long
   one had its padding crushed to nothing and then ran straight out of the
   button. `flex-basis: 0` also silently beat the `width: 100%` that was
   supposed to stack them on phones, so they never stacked at all.

   Equal grid tracks give the same symmetry, and because grid rows stretch,
   a label that has to wrap takes its partner's height with it instead of
   overflowing. No `nowrap` anywhere: text can no longer escape its box. */
.vhero__actions, .mgmt__actions, .loc__actions, .vax__actions {
	display: grid;
	gap: .75rem;
	max-width: 40rem;
}
/* auto-fit, not a breakpoint. A fixed two-column rule was right at 1440 and
   wrong at 1024, where the management column is only 427px wide and both
   labels broke to two lines. auto-fit asks the row how much space it actually
   has: two tracks when both labels fit on one line, one full-width track when
   they don't. The minimum differs per row because the hero button carries a
   phone number and the management column is half the width of the hero. */
.vhero__actions { grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr)); }
.mgmt__actions,
.loc__actions   { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.vax__actions   { grid-template-columns: minmax(0, 1fr); max-width: 28rem; }
/* The two care cards are ~290px of usable width at the tablet end, which is
   narrower than "Book at Group Health Centre" needs. Stacking full-width is
   the only way these stay symmetric AND readable at every size — and it
   matches the single button in the clinic card beside it. */
.care__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .7rem;
}
/* Equal rows as well as equal columns. If a label ever does have to wrap, its
   partner grows with it — symmetry survives, rather than one button standing
   a line taller than the other. */
.vhero__actions, .mgmt__actions, .care__actions, .loc__actions, .vax__actions { grid-auto-rows: 1fr; }
.vhero__actions .btn,
.mgmt__actions .btn,
.care__actions .btn,
.loc__actions .btn,
.vax__actions .btn {
	padding-inline: 1.5rem;
	text-align: center;
}
@media (max-width: 700px) {
	.vhero__actions, .mgmt__actions, .loc__actions { max-width: 28rem; }
	/* 24px of side padding leaves "Book at Group Health Centre" 4px short of
	   its box on a 390px screen. 20px is still a comfortable gutter and buys
	   the longest label on the page room to stay on one line. */
	.vhero__actions .btn, .mgmt__actions .btn, .care__actions .btn, .loc__actions .btn,
	.vax__actions .btn {
		padding-inline: 1.25rem;
	}
}
/* On a 360px screen the card gutters leave 229px of text room and the longest
   label wants 235. One step down in button type buys it back; at this width
   17px was oversized for a full-bleed button anyway. */
@media (max-width: 400px) {
	.btn { font-size: 1rem; }
	/* 25.6px of card gutter inside a 320px card is most of the card. */
	.care__col { padding: 1.25rem; }
}

/* PT Sans has a smaller x-height and a lighter colour than the previous face,
   so the display sizes come up a step and the tracking tightens to compensate. */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.022em; }
.vhero__inner h1, .mach__copy h2, .team__head h2, .find__h, .revs__head h2 { letter-spacing: -0.03em; }


/* ==========================================================================
   INNER PAGES
   --------------------------------------------------------------------------
   The homepage is one long argument. The inner pages each answer one question,
   so they share a rhythm but never a layout: every page below gets its own
   organising idea, and the shared parts here are only the plumbing (the page
   hero shell, the step list, the fact grid). If two pages ever start looking
   like the same page in different colours, the fault will be here.
   ========================================================================== */

/* the current page, in the nav */
.hdr__nav a[aria-current="page"] { color: var(--ida-blue); border-bottom-color: var(--ida-red); }
@media (max-width: 1240px) {
	.hdr__nav a[aria-current="page"] { color: #BBD4F5; border-bottom-color: var(--ida-red); }
}

/* ── page hero ─────────────────────────────────────────────────────────────
   Compact by design. An inner page has already earned the click, so it owes
   the reader an answer, not another poster. */
.phero { position: relative; overflow: clip; isolation: isolate; background: var(--navy); color: #fff; }
.phero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6.5rem); max-width: 60ch; }
.phero h1 {
	font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -.032em;
	color: #fff; margin: .5rem 0 1.1rem;
}
.phero__lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: rgba(255,255,255,.92); }
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media img, .phero__media video { width: 100%; height: 100%; object-fit: cover; }
.phero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg, rgba(4,32,61,.95) 0%, rgba(4,32,61,.88) 42%, rgba(4,32,61,.55) 78%, rgba(4,32,61,.42) 100%);
}
.phero--plain { background: var(--deep); }
.phero--plain::after { display: none; }
.phero--paper { background: var(--paper); color: var(--ink); }
.phero--paper::after { display: none; }
.phero--paper h1 { color: var(--ink); }
.phero--paper .phero__lede { color: var(--ink-70); }

/* breadcrumb — small, and only on pages that sit under something */
.crumb { font-size: .9375rem; color: rgba(255,255,255,.78); margin: 0; } /* .6 was 3.9:1 on --deep; .78 is ~6:1 (9 Oct) */
.crumb a { color: rgba(255,255,255,.85); }
.phero--paper .crumb { color: var(--ink-70); }
.phero--paper .crumb a { color: var(--deep); }

/* ── numbered steps ────────────────────────────────────────────────────────
   For pages that answer "what actually happens". The number is set large and
   in the brand blue because it is the reading order, not decoration. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); counter-reset: step; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { counter-increment: step; border-top: 2px solid var(--rule); padding-top: 1.1rem; }
.steps li::before {
	content: counter(step); display: block; font-family: var(--display); font-weight: 700;
	font-size: 2.25rem; line-height: 1; color: var(--ida-blue); margin-bottom: .6rem;
	letter-spacing: -.03em;
}
.steps h3 { font-size: 1.1875rem; margin: 0 0 .45rem; }
.steps p { margin: 0; color: var(--ink-70); font-size: 1rem; line-height: 1.55; }
.steps--onblue li { border-top-color: rgba(255,255,255,.28); }
.steps--onblue li::before { color: #BBD4F5; }
.steps--onblue h3 { color: #fff; }
.steps--onblue p { color: rgba(255,255,255,.84); }

/* ── generic page section rhythm ───────────────────────────────────────── */
.sect { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sect--paper { background: var(--paper); }
.sect--sky { background: #EEF7FB; }
.sect--white { background: var(--white); }
.sect--blue { background: var(--deep); color: #fff; }
.sect--blue h2, .sect--blue h3 { color: #fff; }
.sect--navy { background: var(--navy); color: #fff; }
.sect--navy h2, .sect--navy h3 { color: #fff; }
.sect__head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sect__head p { font-size: 1.1875rem; color: var(--ink-70); margin-top: .9rem; }
.sect--blue .sect__head p, .sect--navy .sect__head p { color: rgba(255,255,255,.86); }

/* two-column copy + aside */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── fact panel ────────────────────────────────────────────────────────── */
.panel { background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.panel--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.panel--navy h3 { color: #fff; }
.panel--navy p, .panel--navy li { color: rgba(255,255,255,.86); }
.panel h2, .panel h3 { margin-bottom: .8rem; }
.panel h2 { font-size: 1.375rem; }

/* a plain, scannable list of things — used where a directory is the honest form */
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .62rem 0; border-top: 1px solid var(--rule); font-size: 1.0625rem; }
.plain li:first-child { border-top: 0; }
.sect--blue .plain li, .sect--navy .plain li { border-top-color: rgba(255,255,255,.2); }

@media (max-width: 900px) {
	.steps--3, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.split, .split--even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.steps--3, .steps--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Copy on the coloured grounds. Stated once here rather than inline on each
   page, so the contrast is decided in one place and stays decided:
   rgba(255,255,255,.9) on --deep is 7.9:1, on --navy 14.8:1. */
.sect--blue p, .sect--navy p { color: rgba(255,255,255,.9); }
.sect--blue .plain li, .sect--navy .plain li { color: rgba(255,255,255,.92); }
.measure { max-width: 46ch; }
.sect__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── the conditions list, set as the page ──────────────────────────────────
   On /pharmacist-prescribing the twenty conditions are not supporting detail,
   they ARE the argument: a reader scanning for "pink eye" should hit it in a
   second and immediately understand they can skip the doctor. So the list is
   set at display size and flows in columns, and everything else on the page is
   smaller than it. A hairline separates each entry so the eye can run down the
   column without the words merging. */
.conds {
	list-style: none; margin: 1.5rem 0 0; padding: 0;
	columns: 3; column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.conds li {
	break-inside: avoid;
	font-family: var(--display); font-weight: 600;
	font-size: clamp(1.125rem, 1.9vw, 1.5rem); letter-spacing: -.018em;
	color: var(--ink);
	padding: .62rem 0; border-bottom: 1px solid var(--rule);
}
.conds__note { margin-top: clamp(1.75rem, 3vw, 2.5rem); color: var(--ink-70); max-width: 52ch; }

@media (max-width: 900px) { .conds { columns: 2; } }
@media (max-width: 520px) { .conds { columns: 1; } }

/* A hero that carries an action panel beside the headline. Used where a
   type-only hero would leave half the grid empty and give the reader nothing
   to do until they had scrolled the whole page. */
.phero--split .phero__inner {
	max-width: none; display: grid; align-items: center;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4rem);
}
.phero--split .phero__lede { max-width: 40ch; }
.phero--split .plain li b { font-weight: 700; }
@media (max-width: 900px) {
	.phero--split .phero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ── the era list, on /about ───────────────────────────────────────────────
   Three dates, set as the argument. The year is the loudest thing in each
   entry because duration is the one claim a chain on the same street cannot
   make. */
.era { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.era li { border-top: 2px solid var(--ida-red); padding-top: 1.1rem; }
.era b {
	display: block; font-family: var(--display); font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -.03em;
	color: var(--deep); margin-bottom: .7rem;
}
.era h3 { font-size: 1.1875rem; margin: 0 0 .45rem; }
.era p { margin: 0; color: var(--ink-70); font-size: 1rem; line-height: 1.55; }

/* ── health library ────────────────────────────────────────────────────────
   Deliberately the plainest page on the site. See the note in the page source:
   this content is meant to be findable and crawlable, not promoted, so it gets
   reference-section furniture rather than the rest of the site's treatment. */
.lib__bar { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; justify-content: space-between; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lib__search { display: block; max-width: 26rem; flex: 1 1 18rem; }
.lib__search span { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-70); margin-bottom: .5rem; }
.lib__search input {
	width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
	padding: .8rem 1rem; border: 2px solid var(--rule); border-radius: 4px; background: #fff;
}
.lib__search input:focus-visible { outline: 3px solid var(--ida-blue); outline-offset: 1px; border-color: var(--ida-blue); }
.lib__note { margin: 0; font-size: .875rem; color: var(--ink-70); font-style: italic; }
.lib__grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lib__cat { display: block; background: #fff; padding: clamp(1.4rem, 3vw, 2rem); text-decoration: none; transition: background-color .18s ease; }
.lib__cat:where(:hover, :focus-visible) { background: var(--sky); }
.lib__cat h2 { font-size: 1.25rem; margin: 0 0 .4rem; color: var(--deep); }
.lib__cat p { margin: 0; color: var(--ink-70); font-size: 1rem; line-height: 1.55; }
.lib__foot { margin-top: clamp(2rem, 4vw, 3rem); color: var(--ink-70); max-width: 62ch; }

@media (max-width: 760px) {
	.era { grid-template-columns: minmax(0, 1fr); }
	.lib__grid { grid-template-columns: minmax(0, 1fr); }
}

/* A heading that is also the way through to its own page. Underline on hover
   only: a permanently underlined h3 reads as a broken style, but a heading
   that never signals it is clickable is worse. */
.deep { color: inherit; text-decoration: none; }
.deep:where(:hover, :focus-visible) { color: var(--ida-blue); text-decoration: underline; text-underline-offset: .18em; }
.deep--onnavy:where(:hover, :focus-visible) { color: #BBD4F5; }

/* ── Marisa's feedback, 25 Sep 2026 ─────────────────────────────────────────
   "Call us" never names one store: both stores do everything, so a button that
   says "Call Merrett's" quietly sends every GHC patient to the wrong counter.
   A native <details> keeps it working with no JS and on every keyboard. */
.callpick { position: relative; display: inline-block; }
.callpick > summary { list-style: none; cursor: pointer; }
.callpick > summary::-webkit-details-marker { display: none; }
.callpick > summary::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.callpick[open] > summary::after { transform: translateY(.05em) rotate(-135deg); }
.callpick__menu { position: absolute; z-index: 20; left: 0; top: calc(100% + .5rem); min-width: 17rem; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 14px 34px rgba(4,32,61,.18); padding: .4rem; }
.callpick__menu a { display: grid; gap: .1rem; padding: .75rem .9rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
.callpick__menu a:where(:hover, :focus-visible) { background: var(--sky); }
.callpick__menu b { font-size: 1rem; }
.callpick__menu span { font-size: .9375rem; color: var(--ida-blue); font-weight: 600; }
@media (max-width: 560px) { .callpick { display: block; } .callpick__menu { position: static; margin-top: .5rem; box-shadow: none; } }

/* "More than a pharmacy" — the first thing under the hero, per Marisa. */
.more { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--white); }
.more__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.more__grid li { background: #fff; }
.more__grid a, .more__grid div { display: block; height: 100%; padding: clamp(1.2rem, 2.4vw, 1.7rem); text-decoration: none; color: var(--ink); transition: background-color .18s ease; }
.more__grid a:where(:hover, :focus-visible) { background: var(--sky); }
.more__grid b { display: block; font-family: var(--display); font-size: 1.1875rem; color: var(--deep); margin-bottom: .3rem; }
.more__grid span { color: var(--ink-70); font-size: .9875rem; line-height: 1.5; }

/* YouTube, embedded privacy-enhanced. The video belongs to its publisher; we
   show it, we never alter it. */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video + figcaption, .video-cap { margin-top: .7rem; font-size: .875rem; color: var(--ink-70); }
.sect--blue .video-cap, .sect--navy .video-cap { color: rgba(255,255,255,.72); }

/* Vision + values on About */
.values { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.values li { border-top: 2px solid var(--ida-red); padding-top: .8rem; font-weight: 700; color: var(--navy); }
.vision { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.35; letter-spacing: -.01em; color: var(--navy); max-width: 44ch; }

/* Good Doctors — their clinic, their mark */
.gd { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gd img { height: 3.25rem; width: auto; }
.gd strong { background: #FFF3D0; color: var(--ink); padding: .08em .35em; border-radius: 3px; }
.sect--navy .gd strong, .care__col--clinic .gd strong { background: #FFE38A; color: var(--navy); }
.note-strong { font-weight: 700; }
.access { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); max-width: 46ch; }
.access a { color: #fff; font-weight: 700; }

/* Review buttons */
.revs__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); align-items: center; }
.revs__cta p { margin: 0 1rem 0 0; font-weight: 700; color: var(--navy); }

.vision--onnavy { color: #fff; }
.switch__form h3 { margin-bottom: .6rem; }
.switch__form > p { color: var(--ink-70); margin-bottom: 1.2rem; }
.switch__form .btn + .callpick { margin-top: .8rem; }
.sect--navy .values li { color: #fff; }
.wc3form { background: #fff; border-radius: 12px; padding: clamp(.8rem, 2vw, 1.4rem); min-height: 640px; }
.wc3form iframe { min-height: 618px; }

/* Inline links on a phone: pad the hit area to ~33px without moving the text.
   Vertical padding on an inline box enlarges what a thumb can hit but does not
   change the line box, so prose keeps its rhythm. */
.crumb a, p:not(.is-contents) > a:not(.btn) { padding-block: .42em; }
.deep, .dir a { display: inline-block; padding-block: .3em; }

.more__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .more__grid { grid-template-columns: minmax(0, 1fr); } }
.more__all a { background: var(--deep); }
.more__all a:where(:hover, :focus-visible) { background: var(--navy); }
.more__all b { color: #fff; }
.more__all b::after { content: " →"; }
.more__all span { color: rgba(255,255,255,.8); }

/* Links set in running text on the dark bands. The browser default blue is
   ~2:1 on navy and reads as broken. */
.care__col--clinic a:not(.btn), .switch a:not(.btn), .sect--navy p a:not(.btn), .sect--blue p a:not(.btn), .phero .access a:not(.btn) {
	color: #fff; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.care__col--clinic a:not(.btn):where(:hover, :focus-visible), .switch a:not(.btn):where(:hover, :focus-visible), .sect--navy p a:not(.btn):where(:hover, :focus-visible) { color: #BBD4F5; }
.split h2 + p, .split h2 + .measure { margin-top: 1rem; }
.sect--blue .wrap > figure { max-width: 52rem; }
.mgmt__actions--stack { grid-template-columns: minmax(0, 1fr) !important; align-content: center; }
.btn { white-space: nowrap; }
@media (max-width: 560px) { .callpick > summary { display: flex; justify-content: center; align-items: center; width: 100%; } }

/* Access Care, as a button (Marisa, 6 Oct). Sits in the walk-in hero on the photo. */
.phero .access { display: grid; gap: .8rem; justify-items: start; }
.phero .access p { margin: 0; color: #fff; }
.phero .access { margin-bottom: 1.4rem; }
.phero .access .btn { text-decoration: none; }

/* Inline styles moved to classes, so the WordPress blocks can carry them (9 Oct). */
.wrap--spaced{margin-top:clamp(2.5rem,5vw,3.5rem)}
p.lead-in{margin-top:1.6rem}