@charset "UTF-8";
/*
 * Abhinav theme styles.
 *
 * 1. Fonts        self-hosted Barlow family (SIL OFL, assets/fonts/OFL.txt)
 * 2. Tokens       colour, type, spacing, shape and motion from the design system
 * 3. Reset
 * 4. Base         document, headings, text, links, focus
 * 5. Layout       container, section, stack, cluster, grid
 * 6. Utilities
 *
 * Components (buttons, cards, forms, header, footer) are added in steps 9–10.
 * Fluid sizes scale between a 390px phone and a 1200px desktop.
 */

/* 1. Fonts ------------------------------------------------------------ */

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/barlow-400.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/barlow-500.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-600.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

/* 2. Tokens ----------------------------------------------------------- */

:root {
	/* Brand */
	--color-navy: #15297c;
	--color-navy-deep: #0e1c57;
	--color-blue: #0a6cf1;
	--color-blue-hover: #0b5ac8;
	--color-sky-tint: #e7f0fd;
	--color-sky-wash: #f2f7fe;

	/* Neutrals */
	--color-ink: #1b2340;
	--color-slate: #5a6485;
	--color-line: #d9e2f2;
	--color-input-line: #c8d4ea;
	--color-mist: #f6f9fd;
	--color-white: #fff;

	/* Reserved meanings: red = emergency, green = available / success */
	--color-red: #e0322b;
	--color-red-deep: #b3261e;
	--color-red-tint: #fdecea;
	--color-green: #2e9e44;
	--color-green-text: #1f7a33;
	--color-green-tint: #e6f4e9;
	--color-amber-text: #7a5200;
	--color-amber-tint: #fff3d6;

	/* Type */
	--font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--font-body: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;

	--text-display: clamp(3.25rem, 2.5rem + 2.2vw, 4.5rem);       /* 52 → 72 */
	--text-h1: clamp(2.5rem, 1.778rem + 2.963vw, 4rem);           /* 40 → 64 */
	--text-h2: clamp(2rem, 1.85rem + 0.5vw, 2.375rem);            /* 32 → 38 */
	--text-h3: clamp(1.5rem, 1.38rem + 0.494vw, 1.75rem);         /* 24 → 28 */
	--text-h4: clamp(1.125rem, 1.065rem + 0.247vw, 1.25rem);      /* 18 → 20 */
	--text-lead: clamp(1.125rem, 1.095rem + 0.123vw, 1.1875rem);  /* 18 → 19 */
	--text-body: clamp(1rem, 0.97rem + 0.123vw, 1.0625rem);       /* 16 → 17 */
	--text-small: clamp(0.875rem, 0.845rem + 0.123vw, 0.9375rem); /* 14 → 15 */
	--text-label: 0.8125rem;                                       /* 13 */

	--leading-tight: 0.92;
	--leading-heading: 1.05;
	--leading-snug: 1.3;
	--leading-body: 1.6;
	--measure: 65ch;

	/* Spacing: every gap is a step on this scale */
	--space-1: 0.25rem;  /* 4 */
	--space-2: 0.5rem;   /* 8 */
	--space-3: 0.75rem;  /* 12 */
	--space-4: 1rem;     /* 16 */
	--space-5: 1.25rem;  /* 20 */
	--space-6: 1.5rem;   /* 24 */
	--space-8: 2rem;     /* 32 */
	--space-10: 2.5rem;  /* 40 */
	--space-12: 3rem;    /* 48 */
	--space-16: 4rem;    /* 64 */
	--space-20: 5rem;    /* 80 */
	--space-24: 6rem;    /* 96 */
	--space-30: 7.5rem;  /* 120 */

	--section-pad: clamp(2.25rem, 1.6rem + 1.4vw, 3.5rem);  /* 36 → 56, dense on every screen */
	--gutter: clamp(1.25rem, 0.889rem + 1.481vw, 2rem);    /* 20 → 32 */
	--container: 75rem;                                    /* 1200 */
	--container-narrow: 45rem;                             /* article column */
	--card-pad: clamp(1.25rem, 1.13rem + 0.494vw, 1.5rem); /* 20 → 24 */
	--grid-gap: clamp(1rem, 0.759rem + 0.988vw, 1.5rem);   /* 16 → 24 */

	/* Shape and depth */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;
	--shadow-rest: 0 1px 2px rgb(21 41 124 / 0.06);
	--shadow-lift: 0 1px 2px rgb(21 41 124 / 0.06), 0 10px 24px rgb(21 41 124 / 0.1);
	--focus-ring: 3px solid rgb(10 108 241 / 0.45);
	--tap-min: 48px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--duration: 180ms;
}

/* 3. Reset ------------------------------------------------------------ */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

/* :where() keeps this at zero specificity. An `ul[role="list"]` selector would
   outrank every component class and quietly strip their padding. */
:where(ul[role="list"], ol[role="list"]) {
	list-style: none;
	margin: 0;
	padding: 0;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* 4. Base ------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--space-24);
}

body {
	min-height: 100vh;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 400;
	line-height: var(--leading-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	color: var(--color-navy);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--leading-heading);
	text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: 1; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.15; }

h4, h5, h6 {
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: var(--leading-snug);
}

p {
	text-wrap: pretty;
}

strong, b {
	font-weight: 600;
}

small {
	font-size: var(--text-small);
}

a {
	color: var(--color-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--duration) var(--ease);
}

a:hover {
	color: var(--color-blue-hover);
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

::selection {
	background: var(--color-sky-tint);
	color: var(--color-navy);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: var(--space-8) 0;
}

/* 5. Layout ----------------------------------------------------------- */

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

.section {
	padding-block: var(--section-pad);
}

.section--mist { background: var(--color-mist); }
.section--wash { background: var(--color-sky-wash); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy :is(h1, h2, h3) { color: var(--color-white); }

/* Vertical rhythm: children spaced by --stack-gap (default 16px). */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, var(--space-4));
}

/* Horizontal groups that wrap: button rows, chips, meta. */
.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap, var(--space-3));
}

/* Card grids: as many columns of at least --grid-min as fit; one column on phones. */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 17rem)), 1fr));
	gap: var(--grid-gap);
}

/* 6. Utilities -------------------------------------------------------- */

.eyebrow {
	color: var(--color-blue);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.display {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 700;
	line-height: var(--leading-tight);
}

.lead {
	color: var(--color-slate);
	font-size: var(--text-lead);
	line-height: 1.55;
	max-width: 52ch;
}

.measure { max-width: var(--measure); }
.text-slate { color: var(--color-slate); }
.text-small { font-size: var(--text-small); }
.tabular { font-variant-numeric: tabular-nums; }

.icon {
	flex: none;
	vertical-align: middle;
}

/* WordPress's name for visually hidden text, kept for core and plugin markup. */
.screen-reader-text,
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-3) var(--space-5);
	clip: auto;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lift);
	color: var(--color-navy);
	font-weight: 600;
}

/* 7. Core components used by the site frame ---------------------------
 * The full button family and other components are completed in step 10. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: 0 var(--space-6);
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.btn--primary {
	background: var(--color-blue);
	color: var(--color-white);
}

.btn--primary:hover {
	background: var(--color-blue-hover);
	color: var(--color-white);
}

.btn--secondary {
	border-color: var(--color-navy);
	background: var(--color-white);
	color: var(--color-navy);
}

.btn--secondary:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

.btn--block {
	display: flex;
	width: 100%;
}

.icon-disc {
	display: inline-grid;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	place-items: center;
	border-radius: 50%;
	background: var(--color-sky-tint);
	color: var(--color-blue);
}

.icon-disc--sm {
	width: 2.25rem;
	height: 2.25rem;
}

/* 8. Site frame -------------------------------------------------------
 * Full menu from 72rem (1152px). Below that: menu button + drawer.
 * Phone action bar below 48rem (768px). */

/* Brand wordmark, used until a logo is uploaded */
.brand {
	display: inline-flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: none;
	color: var(--color-navy);
	line-height: 1;
	text-decoration: none;
}

.brand:hover {
	color: var(--color-navy);
}

.brand__name {
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.brand__sub {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.brand--compact .brand__name { font-size: 1.5rem; }
.brand--compact .brand__sub { font-size: 0.5625rem; }
.brand--inverse,
.brand--inverse:hover { color: var(--color-white); }

/* Footer lockup: the square mark beside the name in white type. */
.brand--lockup {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
}

/* The mark is supplied on white, so it is presented as a white tile on the navy
   footer rather than pretending to be a cut-out. */
.brand__mark {
	width: 3.5rem;
	height: 3.5rem;
	flex: none;
	padding: 0.25rem;
	border-radius: var(--radius-md);
	background: var(--color-white);
}

/* Beats the footer's link colour, which would otherwise tint the wordmark. */
.site-footer .brand--inverse {
	color: var(--color-white);
}

.brand__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.custom-logo-link {
	display: inline-flex;
	flex: none;
}

/* The uploaded logo is a wide lockup, so it is capped on both axes: height keeps
   it inside the header row, width keeps it clear of the chips beside it. */
.custom-logo {
	width: auto;
	max-height: 3rem;
	max-width: 15rem;
}

.drawer__head .custom-logo {
	max-height: 2.25rem;
	max-width: 11rem;
}

@media (min-width: 72rem) {
	.custom-logo {
		max-height: 3.5rem;
		max-width: 16.5rem;
	}
}

/* Emergency strip */
.emergency-strip {
	background: var(--color-red);
	color: var(--color-white);
	font-size: var(--text-small);
}

.emergency-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-1) var(--space-5);
	min-height: 2.5rem;
	padding-block: var(--space-1);
}

.emergency-strip__label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.emergency-strip a {
	color: var(--color-white);
	text-decoration: none;
}

.emergency-strip a:hover {
	color: var(--color-white);
	text-decoration: underline;
}

.emergency-strip__number {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.emergency-strip__meta {
	display: none;
	align-items: center;
	gap: var(--space-2);
}

.emergency-strip :focus-visible {
	outline-color: var(--color-white);
}

@media (min-width: 48rem) {
	.emergency-strip__inner {
		justify-content: flex-start;
		min-height: 2.75rem;
	}

	.emergency-strip__ambulance { display: inline-flex; }
}

@media (min-width: 64rem) {
	.emergency-strip__hours {
		display: inline-flex;
		margin-left: auto;
	}
}

/* Utility row: desktop only, above the main menu */
.utility-bar__ambulance {
	display: none;
	align-items: center;
	gap: var(--space-2);
}

@media (min-width: 64rem) {
	.utility-bar__ambulance { display: inline-flex; }
}

.utility-bar {
	display: none;
	background: var(--color-navy-deep);
	color: #c9d8f5;
	font-size: 0.8125rem;
}

@media (min-width: 72rem) {
	.utility-bar { display: block; }
}

.utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: 2.25rem;
}

.utility-bar a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: #dce5f7;
	text-decoration: none;
}

.utility-bar a:hover { color: var(--color-white); text-decoration: underline; }
.utility-bar :focus-visible { outline-color: var(--color-white); }

.utility-bar__nav ul {
	display: flex;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility-bar__contact {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.utility-bar__phone { color: var(--color-white); font-weight: 600; }

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--color-line);
	background: var(--color-white);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 4rem;
}

@media (min-width: 30rem) {
	.site-header__inner { gap: var(--space-4); }
}

/* The controls travel together, so one auto margin on the group holds them at
   the right edge whatever is hidden at a given width. */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-left: auto;
}

.site-header__cta { display: none; }

/* Three tinted chips: emergency, the map, the menu. Each colour is the one that
   thing already uses elsewhere on the site, so the row is read by colour before
   the icons are read at all, and none of it needs a word underneath. */
.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Four marks beside the logo leave little over on the smallest phones. */
@media (max-width: 23.4375rem) {
	.site-header__inner { gap: var(--space-2); }
	.nav-actions { gap: 0.375rem; }
}

/* Below 360px (older 320px phones) there is no room for all four, and the seal
   is the one that is not a control, so it steps out. */
@media (max-width: 22.4375rem) {
	.nav-seal { display: none; }
}

.nav-action > .icon {
	width: 1.1875rem;
	height: 1.1875rem;
}

.nav-action__badge .icon {
	width: 0.5625rem;
	height: 0.5625rem;
}

@media (min-width: 30rem) {
	.nav-action > .icon {
		width: 1.375rem;
		height: 1.375rem;
	}
}

.nav-action {
	position: relative;
	display: inline-grid;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	place-items: center;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-mist);
	color: var(--color-navy);
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.nav-action--emergency {
	background: var(--color-red-tint);
	color: var(--color-red-deep);
}

.nav-action--emergency:hover {
	background: #fbdcd9;
	color: var(--color-red-deep);
}

/* The handset says what happens on a tap: it dials, it does not open a page. */
.nav-action__badge {
	position: absolute;
	right: -0.1875rem;
	bottom: -0.1875rem;
	display: grid;
	width: 0.9375rem;
	height: 0.9375rem;
	place-items: center;
	border: 1.5px solid var(--color-white);
	border-radius: 50%;
	background: var(--color-red);
	color: var(--color-white);
}

.nav-action--location {
	background: var(--color-sky-tint);
	color: var(--color-blue);
}

.nav-action--location:hover {
	background: #d6e6fc;
	color: var(--color-blue);
}

.nav-action--menu { border-color: var(--color-line); }

.nav-action--menu:hover {
	border-color: var(--color-blue);
	background: var(--color-sky-wash);
}

/* The accreditation seal leads the row: a mark to recognise, not a button, so
   it goes in bare at the chips' height rather than on a chip of its own. */
.nav-seal {
	display: block;
	width: auto;
	height: 2.25rem;
	flex: none;
}

.primary-nav { display: none; }

@media (min-width: 30rem) {
	.nav-action {
		width: 2.5rem;
		height: 2.5rem;
	}

	.nav-seal { height: 2.5rem; }
}

@media (min-width: 40rem) {
	.site-header__cta { display: inline-flex; }
}

@media (min-width: 72rem) {
	.site-header__inner {
		gap: var(--space-8);
		/* Keeps the whole bar, hairline included, inside the 80px nav cap. */
		min-height: 4.75rem;
	}

	.primary-nav { display: block; }
	.nav-action--menu { display: none; }
}

/* Menu items fill the header's height so the pointer can travel from a link into its dropdown without it closing. */
.primary-nav {
	align-self: stretch;
}

.primary-nav__list {
	height: 100%;
	display: flex;
	align-items: stretch;
	gap: clamp(1rem, -1.25rem + 3.125vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__item {
	display: flex;
	align-items: center;
}

.primary-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--color-ink);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link.is-current {
	color: var(--color-blue);
}

.primary-nav__link.is-current {
	font-weight: 600;
}

.primary-nav__link.is-current::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.5rem;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--color-blue);
}

.primary-nav__toggle {
	display: inline-grid;
	width: 1.75rem;
	height: var(--tap-min);
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--color-slate);
}

.primary-nav__toggle .icon {
	transition: transform var(--duration) var(--ease);
}

.primary-nav__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* Specialities dropdown: opens on hover with a mouse, or with the chevron button */
.mega {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	padding-block: var(--space-6);
	border-top: 1px solid var(--color-line);
	background: var(--color-white);
	box-shadow: 0 18px 30px rgb(21 41 124 / 0.12);
}

.mega::before {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	left: 0;
	height: 4px;
}

@media (hover: hover) {
	.primary-nav__item--mega:hover > .mega {
		display: block;
	}
}

.mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-1) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 3.25rem;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.mega__link:hover {
	background: var(--color-sky-wash);
	color: var(--color-navy);
}

.mega__link--all {
	color: var(--color-blue);
	font-weight: 600;
}

/* Drawer (phones and tablets) */
.has-open-drawer {
	overflow: hidden;
}

/* The bottom call bar would otherwise sit under the dimmed page, half-readable. */
.has-open-drawer .mobile-bar {
	display: none;
}

.drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(14 28 87 / 0.45);
}

.drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	/* Always leave a strip of the page showing, so the backdrop stays tappable
	   and the drawer reads as a panel over the site rather than a new page. */
	width: min(100% - 3rem, 24rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-white);
	box-shadow: -12px 0 32px rgb(21 41 124 / 0.18);
	animation: drawer-in var(--duration) var(--ease);
}

@keyframes drawer-in {
	from { transform: translateX(100%); }
}

/* Sticky, so the logo and the close button stay reachable once a long
   speciality list has been opened. */
.drawer__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 4rem;
	padding-inline: var(--gutter) var(--space-3);
	border-bottom: 1px solid var(--color-line);
	background: var(--color-white);
}

.drawer__close {
	display: inline-grid;
	width: var(--tap-min);
	height: var(--tap-min);
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--color-navy);
}

.drawer__list {
	margin: 0;
	padding: var(--space-2) var(--gutter);
	list-style: none;
}

.drawer__list > li + li {
	border-top: 1px solid var(--color-line);
}

.drawer__row {
	display: flex;
	align-items: center;
}

.drawer__link {
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	color: var(--color-ink);
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
}

.drawer__link.is-current {
	color: var(--color-blue);
	font-weight: 600;
}

.drawer__toggle {
	display: inline-grid;
	width: var(--tap-min);
	height: var(--tap-min);
	place-items: center;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-sky-wash);
	color: var(--color-navy);
}

.drawer__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* The open speciality list reads as one block tucked under its row, rather than
   as more top-level menu items. */
.drawer__sublist {
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-sky-wash);
	list-style: none;
}

.drawer__sublink {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-min);
	color: var(--color-ink);
	font-size: 0.9375rem;
	text-decoration: none;
}

.drawer__sublink .icon-disc {
	background: var(--color-white);
}

/* Pinned to the bottom, within thumb reach; the rule turns the space above it
   into a deliberate footer rather than a gap. */
.drawer__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: auto;
	padding: var(--space-6) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--color-line);
}

/* Footer */
.site-footer {
	padding-block: var(--space-16) var(--space-6);
	background: var(--color-navy);
	color: #dce5f7;
	font-size: var(--text-small);
}

.site-footer a {
	color: #dce5f7;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-white);
	text-decoration: underline;
}

.site-footer :focus-visible {
	outline-color: var(--color-white);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-10) var(--space-8);
}

@media (min-width: 40rem) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.site-footer__brand {
	--stack-gap: var(--space-4);
}

/* The accreditation seal under the name, with its words beside it so it is
   read, not just seen. */
.site-footer__seal {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-white);
	font-size: var(--text-small);
	font-weight: 600;
	line-height: 1.3;
}

.site-footer__seal img {
	flex: none;
	width: 3.5rem;
	height: auto;
}

.site-footer__seal small {
	display: block;
	color: #9fb3de;
	font-size: 0.8125rem;
	font-weight: 400;
}

.site-footer__address {
	font-style: normal;
	line-height: 1.6;
}

.site-footer__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
}

.site-footer__phone a {
	color: var(--color-white);
}

/* A doctor who takes calls directly: name and role over the number, set
   apart from the hospital's own line by a rule. */
.site-footer__doctor {
	display: grid;
	gap: 0.15rem;
	padding-top: var(--space-3);
	border-top: 1px solid rgb(255 255 255 / 0.14);
}

.site-footer__doctor-name {
	color: var(--color-white);
	font-weight: 600;
}

.site-footer__doctor-name:hover { color: #c9d8f5; }

.site-footer__doctor-role {
	color: #9fb3de;
	font-size: var(--text-small);
}

.site-footer__doctor .site-footer__phone { margin-top: var(--space-1); }

.site-footer__heading {
	margin-bottom: var(--space-4);
	color: #9fb3de;
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-link {
	display: inline-grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 50%;
}

.site-footer .social-link:hover {
	border-color: var(--color-white);
	text-decoration: none;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-6);
	margin-top: var(--space-12);
	padding-top: var(--space-5);
	border-top: 1px solid rgb(255 255 255 / 0.18);
	color: #9fb3de;
	font-size: 0.8125rem;
}

.site-footer__bottom a {
	color: #9fb3de;
}

.site-footer__legal {
	--cluster-gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
}

.site-footer__disclaimer {
	flex-basis: 100%;
}

/* Phone action bar */
.mobile-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(var(--mobile-bar-items, 4), minmax(0, 1fr));
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 1px solid var(--color-line);
	background: var(--color-white);
	box-shadow: 0 -6px 18px rgb(21 41 124 / 0.08);
}

.mobile-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 3.75rem;
	color: var(--color-slate);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.mobile-bar__item.is-current,
.mobile-bar__item--primary {
	color: var(--color-blue);
	font-weight: 600;
}

body {
	padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
	.mobile-bar { display: none; }
	body { padding-bottom: 0; }
}

/* 9. Components -------------------------------------------------------
 * Cards, badges, section headers, FAQ, timetable, booking band, stats,
 * pagination, long-form content and form fields. */

/* Buttons: remaining sizes and variants */
.btn--sm {
	min-height: 2.75rem;
	padding: 0 var(--space-5);
	font-size: 0.9375rem;
}

.btn--lg {
	min-height: 3.5rem;
	padding: 0 var(--space-8);
	font-size: 1.125rem;
}

.btn--on-navy {
	background: var(--color-white);
	color: var(--color-navy);
}

.btn--on-navy:hover {
	background: var(--color-sky-tint);
	color: var(--color-navy);
}

.btn--outline-inverse {
	border-color: rgb(255 255 255 / 0.7);
	color: var(--color-white);
}

.btn--outline-inverse:hover {
	border-color: var(--color-white);
	background: rgb(255 255 255 / 0.12);
	color: var(--color-white);
}

.btn--danger {
	background: var(--color-red);
	color: var(--color-white);
}

.btn--danger:hover {
	background: var(--color-red-deep);
	color: var(--color-white);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-blue);
	font-weight: 600;
	text-decoration: none;
}

.link-arrow .icon {
	transition: transform var(--duration) var(--ease);
}

.link-arrow:hover .icon {
	transform: translateX(3px);
}

/* Badges and chips */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	padding: 0.375rem 0.6875rem;
	border-radius: var(--radius-pill);
	font-size: 0.78125rem;
	font-weight: 600;
	line-height: 1.2;
}

.badge--available { background: var(--color-green-tint); color: var(--color-green-text); }
.badge--info { background: var(--color-sky-tint); color: var(--color-navy); }
.badge--notice { background: var(--color-amber-tint); color: var(--color-amber-text); }

.badge__dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: var(--color-green);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: 0 var(--space-5);
	border: 1px solid var(--color-input-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.chip:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.chip.is-active,
.chip[aria-pressed="true"] {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: var(--color-white);
	font-weight: 600;
}

/* Section header */
.section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-8);
	margin-bottom: var(--space-8);
}

.section-header__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.section-header__title { margin: 0; }

@media (min-width: 60rem) {
	.section-header { margin-bottom: var(--space-6); }
}
.section-header__link { white-space: nowrap; }

/* Cards */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.card:has(.card__link):hover {
	border-color: transparent;
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

.card__link {
	color: inherit;
	text-decoration: none;
}

/* The card's own link covers the whole card, so anywhere on it is clickable. */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card__link:focus-visible {
	outline: none;
}

.card:has(.card__link:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Buttons and other links sit above that overlay. */
.card :is(.btn, a:not(.card__link)) {
	position: relative;
	z-index: 1;
}

/* Doctor card */
.doctor-card__photo {
	position: relative;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, var(--color-sky-tint), #c9daf4);
}

.doctor-card--vertical .doctor-card__photo { aspect-ratio: 4 / 5; }
.doctor-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.monogram {
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--color-navy);
	letter-spacing: 0.02em;
}

.doctor-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--card-pad);
}

.doctor-card__name {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: var(--leading-snug);
}

.doctor-card__role {
	color: var(--color-blue);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
}

.doctor-card__meta {
	color: var(--color-slate);
	font-size: 0.90625rem;
	line-height: 1.45;
}

.doctor-card__opd {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.doctor-card__opd .icon { color: var(--color-slate); margin-top: 0.15rem; }
.doctor-card__more { color: var(--color-slate); font-weight: 400; }

.doctor-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
}

.doctor-card--row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
}

/* Rail card: portrait beside the name, one clear action underneath. */
.doctor-card--rail {
	gap: var(--space-4);
	height: 100%;
	padding: var(--card-pad);
}

/* Top-aligned, so photo and name start on the same line in every card
   whatever the length of the degrees underneath. */
.doctor-card__head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.doctor-card--rail .doctor-card__photo {
	width: 4.5rem;
	height: 4.5rem;
	flex: none;
	overflow: hidden;
	border-radius: var(--radius-md);
}

.doctor-card--rail .doctor-card__body {
	gap: 0.15rem;
	padding: 0;
}

.doctor-card--rail .doctor-card__name {
	font-size: 1.0625rem;
	line-height: 1.25;
}

/* Long degree lists are cut at two lines so every rail card is the same
   height; the full list is on the profile. */
.doctor-card--rail .doctor-card__degree {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.doctor-card__degree {
	margin-top: 0.15rem;
	color: var(--color-slate);
	font-size: 0.875rem;
	line-height: 1.35;
}

.doctor-card--rail .monogram {
	font-size: 1.75rem;
}

.doctor-card--rail .btn {
	min-height: 2.75rem;
	margin-top: auto;
	font-size: 0.9375rem;
}

/* Speciality filter: a row of links that scrolls sideways when there are many. */
.filter-bar {
	margin-inline: calc(-1 * var(--gutter));
	padding-inline: var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--color-line);
}

.filter-bar::-webkit-scrollbar {
	display: none;
}

.filter-bar__list {
	display: flex;
	gap: var(--space-6);
	width: max-content;
	min-width: 100%;
}

.filter-bar__link {
	display: block;
	padding-block: var(--space-3);
	border-bottom: 3px solid transparent;
	color: var(--color-slate);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.filter-bar__link:hover {
	color: var(--color-navy);
}

.filter-bar__link.is-current {
	border-bottom-color: var(--color-blue);
	color: var(--color-navy);
	font-weight: 600;
}

.doctor-rail__empty {
	margin: 0;
	padding: var(--space-8) 0;
	color: var(--color-slate);
}

/* Doctors rail */
.doctor-rail {
	display: grid;
	gap: var(--grid-gap);
}

/* Filter and arrows share one row directly above the cards they act on. */
.doctor-rail__head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.doctor-rail__head .filter-bar {
	flex: 1;
	min-width: 0;
}

.doctor-rail__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-8);
	border-radius: var(--radius-lg);
	background: var(--color-navy);
	color: #dce5f7;
}

.doctor-rail__title {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-h3);
	line-height: var(--leading-heading);
}

.doctor-rail__intro {
	margin: 0;
	max-width: 32ch;
}

/* Without this the track's own width sets the column width and the page scrolls
   sideways instead of the rail. */
.doctor-rail__cards {
	min-width: 0;
}

.doctor-rail__controls {
	display: none;
	justify-content: flex-end;
	gap: var(--space-2);
}

.rail-arrow {
	display: inline-grid;
	width: var(--tap-min);
	height: var(--tap-min);
	place-items: center;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-navy);
	transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.rail-arrow:hover:not(:disabled) {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.rail-arrow:disabled {
	color: var(--color-line);
	cursor: default;
}

/* The track bleeds into the page gutter on a phone, so the next card peeks in
   and the swipe is discoverable without an arrow. */
.doctor-rail__track {
	display: flex;
	gap: var(--grid-gap);
	margin-inline: calc(-1 * var(--gutter));
	padding: var(--space-1) var(--gutter) var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	overscroll-behavior-x: contain;
	scrollbar-color: var(--color-sky-tint) transparent;
	scrollbar-width: thin;
}

.doctor-rail__track > li {
	flex: 0 0 18.5rem;
	scroll-snap-align: start;
}

.doctor-rail__track:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 4px;
	border-radius: var(--radius-md);
}

@media (min-width: 60rem) {
	.doctor-rail {
		grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
		align-items: stretch;
	}

	.doctor-rail__panel {
		justify-content: center;
		padding: var(--space-10);
	}

	/* Cards sit centred against the panel rather than hanging from its top edge. */
	.doctor-rail__cards {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.doctor-rail__title {
		font-size: var(--text-h2);
	}

	.doctor-rail__controls {
		display: flex;
	}

	.doctor-rail__track,
	.doctor-rail__head .filter-bar {
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-left: 0;
	}

	/* On a pointer device a sideways-scrolling row hides specialities with no
	   hint that they exist, so here the list wraps and everything stays visible. */
	.doctor-rail__head .filter-bar {
		overflow: visible;
		border-bottom: 0;
	}

	/* With twenty-odd specialities, underlined tabs wrapped into four tall rows;
	   small chips keep the whole list to two tight rows above the cards. */
	.doctor-rail__head {
		align-items: flex-start;
	}

	.doctor-rail__head .filter-bar__list {
		width: auto;
		min-width: 0;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.doctor-rail__head .filter-bar__link {
		padding: 0.3125rem 0.75rem;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-white);
		font-size: 0.875rem;
		line-height: 1.35;
		transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
	}

	.doctor-rail__head .filter-bar__link:hover {
		border-color: var(--color-blue);
		color: var(--color-navy);
	}

	.doctor-rail__head .filter-bar__link.is-current {
		border-color: var(--color-navy);
		background: var(--color-navy);
		color: var(--color-white);
	}

	.doctor-rail__head .is-folded [data-filter-extra] { display: none; }

	.doctor-rail__head .filter-bar__more {
		border-style: dashed;
		color: var(--color-blue);
		font-family: inherit;
		font-weight: 600;
		cursor: pointer;
	}
}

.doctor-card--row .doctor-card__photo { min-height: 100%; }
.doctor-card--row .doctor-card__name { font-size: 1.125rem; }

/* Assurances: the thin band under the search bar. Four answers a patient wants
   before they trust a phone number, none of them typed in by hand. It is a rule
   across the page, not a statistics panel: no big numbers, no cards. */
.assurances {
	border-block: 1px solid var(--color-line);
	background: var(--color-mist);
}

.assurances__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding-block: var(--space-2);
	list-style: none;
}

/* Cells divided by hairlines, like a printed fact sheet. */
.assurance { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.assurance:nth-child(even) {
	padding-left: var(--space-4);
	border-left: 1px solid var(--color-line);
}
.assurance:nth-child(n + 3) { border-top: 1px solid var(--color-line); }

.assurance__body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	color: var(--color-navy);
	text-decoration: none;
}

a.assurance__body:hover .assurance__value { color: var(--color-blue); }

.assurance__value {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.1;
}

.assurance__star {
	color: #f5b301;
	fill: currentColor;
}

.assurance__note {
	color: var(--color-slate);
	font-size: 0.8125rem;
	line-height: 1.3;
}

@media (min-width: 40rem) {
	.assurances__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.assurance,
	.assurance:nth-child(even) { padding: var(--space-4) var(--space-5); }

	.assurance:first-child { padding-left: 0; }
	.assurance + .assurance { border-left: 1px solid var(--color-line); }
	.assurance:nth-child(n + 3) { border-top: 0; }

	.assurance__value { font-size: 1.375rem; }
}

/* Quick actions: the tiles that replace the old appointment panel. */
/* Three across on a phone, so all six shortcuts are in one glance instead of
   three scrolls: the icon leads, the label sits under it. */
.quick-actions__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
}

.quick-action {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-2);
	min-height: 6.5rem;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--color-mist);
	color: var(--color-navy);
	transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.quick-action:hover {
	background: var(--color-sky-tint);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

/* The right padding keeps the label clear of the arrow in the corner. */
.quick-action__link {
	color: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-wrap: balance;
}

/* The label's link covers the tile, so the whole tile is the target. */
.quick-action__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.quick-action:has(.quick-action__link:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* The ring is the section's own colour, which reads as a bite out of the tile's
   corner rather than a badge sitting on top of it. */
/* No room for it beside a label this narrow; it comes back with the wider tile. */
.quick-action__go {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: none;
	width: 1.75rem;
	height: 1.75rem;
	place-items: center;
	border: 1.5px solid var(--color-blue);
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 0 0 0.4rem var(--color-white);
	color: var(--color-blue);
}

.quick-action__icon {
	order: -1;
	align-self: flex-start;
	color: #9fb2d8;
}

.quick-action__icon .icon { width: 1.375rem; height: 1.375rem; }

.quick-action--primary {
	background: var(--color-blue);
	color: var(--color-white);
}

.quick-action--primary .quick-action__go {
	border-color: var(--color-white);
	background: var(--color-blue);
	color: var(--color-white);
}

.quick-action--primary .quick-action__icon {
	color: rgb(255 255 255 / 0.7);
}

@media (min-width: 40rem) {
	.quick-actions__list { gap: var(--space-4); }

	.quick-action {
		justify-content: space-between;
		gap: var(--space-6);
		min-height: 8.5rem;
		padding: var(--space-5);
	}

	.quick-action__link {
		padding-right: 2.25rem;
		font-size: 1rem;
	}

	.quick-action__go { display: grid; }

	.quick-action__icon {
		order: 0;
		align-self: flex-end;
	}

	.quick-action__icon .icon { width: 1.875rem; height: 1.875rem; }
}

@media (min-width: 60rem) {
	.quick-actions__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	.quick-action {
		min-height: 10rem;
		padding: var(--space-6);
	}
}

/* Services and facilities: panel beside a track of photo cards. The cards are
   image-led with no controls of their own, so the row does not read as a copy of
   the doctors rail further down. */
.service-rail {
	display: grid;
	gap: var(--grid-gap);
}

.service-rail__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-8);
	border-radius: var(--radius-lg);
	background: var(--color-navy-deep);
	color: #dce5f7;
}

.service-rail__title {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-h3);
	line-height: var(--leading-heading);
}

.service-rail__intro {
	margin: 0;
	max-width: 34ch;
}

.service-rail__cards { min-width: 0; }

.service-rail__controls {
	display: none;
	justify-content: flex-end;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.service-rail__track {
	display: flex;
	gap: var(--grid-gap);
	margin-inline: calc(-1 * var(--gutter));
	padding: var(--space-1) var(--gutter) var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	overscroll-behavior-x: contain;
	scrollbar-color: var(--color-sky-tint) transparent;
	scrollbar-width: thin;
}

.service-rail__track > li {
	flex: 0 0 13.5rem;
	scroll-snap-align: start;
}

.service-rail__track:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 4px;
	border-radius: var(--radius-md);
}

/* White card with the photograph inset, so the image has a margin on every side
   rather than bleeding to the card's edge. */
.service-card {
	height: 100%;
	padding: var(--space-3);
	box-shadow: var(--shadow-rest);
}

.service-card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--color-sky-tint), #c9daf4);
}

.service-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Without a photograph the card does not pretend to have one: no tinted box, no
   stock icon, just the name set large, anchored by a short rule. Twenty-five of
   these read as an index; twenty-five identical icons read as a template. */
.service-card--text {
	justify-content: flex-end;
	min-height: 11.5rem;
	padding: var(--space-4);
}

.service-card--text::before {
	content: "";
	width: 1.5rem;
	height: 3px;
	margin-bottom: auto;
	border-radius: 2px;
	background: var(--color-blue);
}

.service-card--text .service-card__name {
	padding: 0;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.15;
	text-wrap: balance;
}

.service-card__name {
	margin: 0;
	padding: var(--space-4) var(--space-2) var(--space-3);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

@media (min-width: 60rem) {
	/* Mirrored against the doctors rail further down: same parts, opposite
	   arrangement, so the two sections are not read as one repeated twice. */
	.service-rail {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
		align-items: stretch;
	}

	.service-rail__panel {
		order: 2;
		justify-content: center;
		padding: var(--space-10);
	}

	.service-rail__controls { justify-content: flex-start; }

	.service-rail__cards {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.service-rail__controls { display: flex; }

	.service-rail__track {
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-left: 0;
	}
}

/* Phones only: the services and doctors rails carry a standing panel that is
   built for the two-column layout further down this file. Stacked on a small
   screen that panel turns into half a screen of prose and a filled button
   before the first card, so here it collapses to the plain section header the
   rest of the page uses. Everything from 60rem up is untouched. */
@media (max-width: 59.9375rem) {
	.service-rail__panel,
	.doctor-rail__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding: 0;
		border-radius: 0;
		background: none;
		color: inherit;
	}

	.service-rail__intro,
	.doctor-rail__intro { display: none; }

	.service-rail__title,
	.doctor-rail__title {
		color: var(--color-navy);
		font-size: var(--text-h3);
	}

	/* Reads as this section's link, and keeps a full tap target while doing it. */
	.service-rail__panel .btn,
	.doctor-rail__panel .btn {
		flex: none;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-blue);
		font-size: var(--text-small);
		white-space: nowrap;
	}

	/* A seventeen-item filter strip sitting on top of a card rail gives a thumb
	   two horizontal scrollers stacked on each other. "Find a doctor" leads to
	   the same list with the filter on a page that has room for it. */
	.doctor-rail__head { display: none; }

	/* Tighter cards: the photograph carries these rows, not the padding. */
	.service-rail__track > li { flex: 0 0 11.75rem; }

	.service-card__name {
		padding: var(--space-3) var(--space-1) var(--space-2);
		font-size: 0.9375rem;
	}

	.doctor-rail__track > li { flex: 0 0 16.5rem; }

	.doctor-card--rail {
		gap: var(--space-3);
		padding: var(--space-4);
	}

	.doctor-card--rail .doctor-card__photo {
		width: 3.5rem;
		height: 3.5rem;
	}

	.doctor-card--rail .monogram { font-size: 1.5rem; }

	.doctor-card--rail .doctor-card__name { font-size: 1rem; }

	.doctor-card--rail .doctor-card__role { font-size: 0.875rem; }

	.doctor-card--rail .doctor-card__degree { font-size: 0.8125rem; }

	.doctor-card__head { gap: var(--space-3); }
}

/* Health articles. Rows on a phone, where the visitor is scanning headlines
   with a thumb; cards in a row of three on a wide screen, where there is room
   for the photograph to lead. */
.article-list {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.article-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 6rem;
	align-items: stretch;
	min-height: 5.5rem;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-navy);
	text-decoration: none;
	transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.article-row:hover {
	border-color: var(--color-blue);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

.article-row:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

.article-row__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	padding: var(--space-4) var(--space-2) var(--space-4) var(--space-4);
}

.article-row__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.article-row:hover .article-row__title { color: var(--color-blue); }

.article-row__meta {
	color: var(--color-slate);
	font-size: var(--text-small);
	font-weight: 400;
}

/* The thumbnail is the photo half of the article cover, cut straight. */
.article-row__media {
	position: relative;
	display: grid;
	place-items: center;
	background: var(--color-sky-tint);
}

.article-row__media { overflow: hidden; }

.article-row__media :is(img, .article-row__plate) {
	width: 100%;
	height: 100%;
}

/* Covers carry the title on the left half and the photo on the right half:
   drawn twice the box's width and shifted left, the box holds just the photo. */
.article-row .article-row__media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	max-width: none;
	object-fit: cover;
	transform: translateX(-50%);
}

.article-row__plate {
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, var(--color-sky-wash), #cbdbf5);
	color: var(--color-navy);
}

.articles__more { margin-top: var(--space-5); }

/* One link to the archive at a time: the header carries it where the header is
   still on screen, the foot of the list carries it where it is not. */
.articles .section-header__link { display: none; }

@media (min-width: 60rem) {
	.article-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-5);
	}

	/* Photograph on top, then the headline and who reviewed it. */
	.article-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		min-height: 0;
	}

	.article-row__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.article-row .article-row__media img {
		position: static;
		width: 100%;
		transform: none;
	}


	.article-row__text {
		justify-content: flex-start;
		gap: var(--space-2);
		padding: var(--space-4) var(--space-5) var(--space-5);
	}

	.article-row__title {
		-webkit-line-clamp: 3;
		font-size: 1.125rem;
	}

	.articles .section-header__link { display: inline-flex; }

	.articles__more { display: none; }
}

/* Call-back request. One navy panel before the footer: the case on the left,
   a small white form on the right (below it on a phone). The form is Fluent
   Forms markup with Fluent's own look switched off, so everything it draws is
   styled here, under .callback. */
.callback__panel {
	display: grid;
	gap: var(--space-5);
	padding: var(--space-6) var(--space-4) var(--space-4);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(90% 70% at 0% 0%, rgb(10 108 241 / 0.32), rgb(10 108 241 / 0) 70%),
		var(--color-navy);
	color: var(--color-white);
}

.callback__text { padding-inline: var(--space-2); }

.callback__title {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-h3);
	line-height: 1.05;
	text-wrap: balance;
}

.callback__lead {
	margin: var(--space-3) 0 0;
	color: #c9d6f2;
	font-size: 1rem;
	line-height: 1.5;
	max-width: 34rem;
}

.callback__points {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.callback__points li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.callback__points .icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: #8fbaff;
}

.callback__direct {
	margin: var(--space-4) 0 0;
	color: #c9d6f2;
	font-size: 0.9375rem;
}

.callback__phone {
	color: var(--color-white);
	font-weight: 600;
	text-underline-offset: 3px;
}

.callback__form {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: 0 18px 40px rgb(3 10 36 / 0.28);
	color: var(--color-ink);
}

.callback__form-title {
	margin: 0 0 var(--space-3);
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
}

.callback__note {
	margin: var(--space-3) 0 0;
	color: var(--color-slate);
	font-size: var(--text-label);
	line-height: 1.45;
}

.callback__note a { color: var(--color-navy); }

/* The site's forms (call-back and contact). Fields pair up where there is
   room; the enquiry type, message and button take the full width. */
.abh-form .fluentform fieldset {
	display: grid;
	align-items: start;
	gap: var(--space-3);
}

.abh-form .fluentform .ff_screen_reader_title { position: absolute; }

@media (min-width: 30rem) {
	.abh-form .fluentform fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.callback .fluentform .abh-field--speciality,
	.abh-form .fluentform :is(.abh-field--type, .abh-field--message, .abh-submit) { grid-column: 1 / -1; }
}

/* Fluent's own sheet loads after this one for its base rules, so every rule
   for the form carries .fluentform to outweigh it. */
.abh-form .fluentform .ff-el-group { margin: 0; }

.abh-form .fluentform .ff-el-input--label {
	margin: 0 0 0.3rem;
	line-height: 1.2;
}

.abh-form .fluentform .ff-el-input--label label {
	display: block;
	margin: 0;
	color: var(--color-navy);
	font-size: var(--text-label);
	font-weight: 600;
}

/* 16px text: anything smaller and iOS zooms the page when a field is tapped. */
.abh-form .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--color-input-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.abh-form .fluentform .ff-el-form-control::placeholder { color: #8a93ad; }

.abh-form .fluentform .ff-el-form-control:focus {
	border-color: var(--color-blue);
	outline: 0;
	box-shadow: 0 0 0 3px rgb(10 108 241 / 0.2);
}

.abh-form .fluentform select.ff-el-form-control {
	padding-right: 2.25rem;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6485' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem;
	appearance: none;
	-webkit-appearance: none;
}

/* +91 sits in front of the number as part of the same field. */
.abh-form .fluentform .ff_input-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.abh-form .fluentform .ff_input-group-prepend { display: flex; }

.abh-form .fluentform .ff_input-group-text {
	display: flex;
	align-items: center;
	padding: 0 0.625rem;
	border: 1px solid var(--color-input-line);
	border-right: 0;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	background: var(--color-mist);
	color: var(--color-slate);
	font-size: 0.9375rem;
	font-weight: 600;
}

.abh-form .fluentform .ff_input-group > .ff-el-form-control:not(:first-child) {
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.abh-form .fluentform .ff-btn-submit {
	width: 100%;
	min-height: 2.875rem;
	margin: 0;
	cursor: pointer;
}

.abh-form .fluentform .ff-working .ff-btn-submit,
.abh-form .fluentform .ff-btn-submit:disabled { opacity: 0.7; }

.abh-form .fluentform .ff-el-is-error .ff-el-form-control,
.abh-form .fluentform .ff-el-is-error .ff_input-group-text { border-color: var(--color-red); }

.abh-form .fluentform .error.text-danger {
	margin-top: 0.3rem;
	color: var(--color-red-deep);
	font-size: var(--text-label);
}

.abh-form .fluentform .ff-errors-in-stack:empty { display: none; }

.abh-form .fluentform .ff-message-success {
	padding: var(--space-4);
	border: 1px solid #bfe3c8;
	border-radius: var(--radius-sm);
	background: var(--color-green-tint);
	color: var(--color-green-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.abh-form .fluentform .ff-message-success p { margin: 0; }
.abh-form .fluentform .ff-message-success strong { color: #17602a; }

@media (min-width: 60rem) {
	.callback__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
		align-items: center;
		gap: var(--space-10);
		padding: var(--space-10);
	}

	.callback__text { padding: 0; }

	.callback__title { font-size: var(--text-h2); }

	.callback__lead { font-size: var(--text-lead); }

	.callback__form { padding: var(--space-6); }
}

/* Homepage questions. A short intro and the two ways to ask, then the
   answers closed, so all six questions fit on one phone screen. On a wide
   screen the intro stays in view beside the list. */
.home-faq__grid {
	display: grid;
	gap: var(--space-5);
}

.home-faq__title {
	margin: 0;
	font-size: var(--text-h3);
	line-height: 1.05;
}

.home-faq__lead {
	margin: var(--space-2) 0 0;
	color: var(--color-slate);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.home-faq__ask {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.home-faq__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-navy);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.home-faq__chip:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.home-faq__chip .icon { color: var(--color-blue); }
.home-faq__chip--whatsapp .icon { color: var(--color-green-text); }

@media (min-width: 60rem) {
	.home-faq__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
		align-items: start;
		gap: var(--space-10);
	}

	.home-faq__intro {
		position: sticky;
		top: 7rem;
	}

	.home-faq__title { font-size: var(--text-h2); }

	.home-faq__lead { font-size: 1rem; }
}

/* Enquiry type on the contact form: three radio buttons drawn as one
   segmented switch, the way the Max contact page shows its tabs. */
.abh-form .fluentform .abh-field--type .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: var(--radius-sm);
	background: var(--color-sky-tint);
}

.abh-form .fluentform .abh-field--type .ff-el-form-check { margin: 0; }

.abh-form .fluentform .abh-field--type .ff-el-form-check-label {
	position: relative;
	display: grid;
	min-height: 2.5rem;
	place-items: center;
	margin: 0;
	padding: 0 var(--space-2);
	border-radius: 6px;
	color: var(--color-navy);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.abh-form .fluentform .abh-field--type input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.abh-form .fluentform .abh-field--type .ff-el-form-check-label:has(input:checked) {
	background: var(--color-white);
	color: var(--color-blue);
	box-shadow: 0 1px 2px rgb(21 41 124 / 0.12);
}

.abh-form .fluentform .abh-field--type .ff-el-form-check-label:has(input:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 1px;
}

.abh-form .fluentform textarea.ff-el-form-control {
	min-height: 5.5rem;
	padding-block: 0.625rem;
	resize: vertical;
}

/* Contact page. After Max Healthcare's: a band with the page name, the
   appointment line under it, the ways to reach us beside the enquiry form,
   then the address with the map. */
.contact-head__inner {
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-5) var(--space-4);
}

.contact-head__title {
	margin: 0;
	color: var(--color-navy);
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
}

.contact-head__lead {
	margin: var(--space-2) 0 0;
	max-width: 38rem;
	color: var(--color-slate);
	font-size: 0.9375rem;
}

.contact-bar { background: var(--color-navy); }

.contact-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	padding-block: var(--space-2);
}

@media (min-width: 48rem) {
	.contact-bar__inner { justify-content: center; }
}

.contact-bar__text {
	margin: 0;
	color: #c9d6f2;
	font-size: 0.9375rem;
	font-weight: 500;
}

.contact-bar__call {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-navy);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--duration) var(--ease);
}

.contact-bar__call:hover {
	background: var(--color-sky-tint);
	color: var(--color-navy);
}

.contact-bar__call .icon { color: var(--color-blue); }

.contact__grid {
	display: grid;
	gap: var(--space-6);
}

.contact__heading {
	margin: 0 0 var(--space-3);
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1.1;
}

/* Ways to reach us: one hairline-divided list of icon, label and number. */
.contact-list {
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	list-style: none;
}

.contact-item {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
}

.contact-item + .contact-item { border-top: 1px solid var(--color-line); }

.contact-item__icon {
	display: grid;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border-radius: var(--radius-sm);
	background: var(--color-sky-tint);
	color: var(--color-blue);
}

.contact-item--emergency .contact-item__icon {
	background: var(--color-red-tint);
	color: var(--color-red-deep);
}

.contact-item--whatsapp .contact-item__icon {
	background: var(--color-green-tint);
	color: var(--color-green-text);
}

.contact-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.contact-item__label {
	color: var(--color-slate);
	font-size: var(--text-label);
	font-weight: 500;
}

.contact-item__values {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem var(--space-4);
}

.contact-item__value {
	color: var(--color-navy);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}

.contact-item__value:hover {
	color: var(--color-blue);
	text-decoration: underline;
}

.contact-item--emergency .contact-item__value { color: var(--color-red-deep); }

.contact-item__text {
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.contact__form {
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-mist);
}

.contact__form .contact__heading { margin-bottom: var(--space-1); }

.contact__note {
	margin: 0 0 var(--space-4);
	color: var(--color-slate);
	font-size: 0.9375rem;
}

.contact__privacy {
	margin: var(--space-3) 0 0;
	color: var(--color-slate);
	font-size: var(--text-label);
}

.contact__privacy a { color: var(--color-navy); }

.contact-map__grid {
	display: grid;
	gap: var(--space-4);
}

.contact-map__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.contact-map__address {
	color: var(--color-ink);
	font-style: normal;
	line-height: 1.6;
}

.contact-map__address strong { color: var(--color-navy); }

.contact-map__frame {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-sky-tint);
}

.contact-map__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 48rem) {
	.contact__form { padding: var(--space-6); }

	.contact-map__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: center;
		gap: var(--space-8);
	}

	.contact-map__frame { aspect-ratio: 16 / 7; }
}

@media (min-width: 60rem) {
	.contact__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
		align-items: start;
		gap: var(--space-10);
	}
}

/* Doctor profile. A tinted head with the facts a family checks first, then the
   OPD hours, what the doctor treats, the story and the questions, with the
   booking form beside them on a wide screen. Dense on a phone: the photo sits
   beside the name, not above it. */
.profile-trail { padding-block: var(--space-3); }

.profile-head {
	border-block: 1px solid var(--color-line);
	background: var(--color-sky-tint);
}

.profile-head__inner {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4);
	padding-block: var(--space-5);
}

.profile-head__photo {
	display: grid;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	place-items: center;
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, var(--color-white), #c9daf4);
}

.profile-head__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.profile-head__photo .monogram { font-size: 2rem; }

.profile-head__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	min-width: 0;
}

.profile-head__name {
	margin: 0;
	color: var(--color-navy);
	font-size: 1.75rem;
	line-height: 1.05;
}

.profile-head__role {
	margin: 0;
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.profile-head__role a { color: var(--color-blue); }

.profile-head__degrees {
	margin: 0;
	color: var(--color-slate);
	font-size: 0.875rem;
}

.profile-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin: var(--space-2) 0 0;
	padding: 0;
	color: var(--color-ink);
	font-size: 0.875rem;
	list-style: none;
}

.profile-facts strong { color: var(--color-navy); }

/* The two calls span the full head on a phone, under the photo too. */
.profile-head__actions {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

.profile-head__actions .btn {
	min-height: 2.75rem;
	padding-inline: var(--space-3);
	font-size: 0.9375rem;
}

.profile-head__whatsapp {
	background: var(--color-green-text);
	color: var(--color-white);
}

.profile-head__whatsapp:hover {
	background: #17602a;
	color: var(--color-white);
}

.profile-body { padding-top: var(--space-6); }

.profile-body__grid {
	display: grid;
	gap: var(--space-6);
}

.profile-main {
	display: grid;
	gap: var(--space-6);
	min-width: 0;
}

.profile-block__title {
	margin: 0 0 var(--space-3);
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1.1;
}

.profile-treats {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.profile-treats li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	font-weight: 500;
}

.profile-treats .icon {
	flex: none;
	color: var(--color-blue);
}

.profile-about p { margin: 0; }

.profile-book {
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-mist);
}

.profile-book__title {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 1.375rem;
	line-height: 1.1;
}

.profile-book__note {
	margin: var(--space-1) 0 var(--space-3);
	color: var(--color-slate);
	font-size: 0.875rem;
}

/* One column inside the narrow side panel, whatever the screen. */
.profile-book .fluentform fieldset { grid-template-columns: minmax(0, 1fr); }

.profile-where {
	margin-top: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.profile-where__label {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0 0 var(--space-2);
	color: var(--color-slate);
	font-size: var(--text-label);
	font-weight: 600;
}

.profile-where__label .icon { color: var(--color-blue); }

.profile-where address {
	margin-bottom: var(--space-2);
	font-style: normal;
}

.profile-where strong { color: var(--color-navy); }

@media (min-width: 48rem) {
	.profile-head__inner {
		grid-template-columns: 10rem minmax(0, 1fr);
		gap: var(--space-6);
		padding-block: var(--space-6);
	}

	.profile-head__name { font-size: var(--text-h2); }

	.profile-head__inner { row-gap: var(--space-4); }

	.profile-head__photo { grid-row: 1 / span 2; }

	.profile-head__actions {
		display: flex;
		grid-column: 2;
		align-self: end;
	}

	.profile-head__actions .btn { padding-inline: var(--space-6); }

	.profile-treats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.profile-body__grid {
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
		gap: var(--space-10);
	}

	.profile-side {
		position: sticky;
		top: 6.5rem;
	}
}

/* Speciality page: the doctor profile's frame, with the department's icon in
   place of the photo, conditions as a scannable set of tags, treatments as a
   short list with one line each, and every other department linked below. */
.spec-head__inner {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4);
	padding-block: var(--space-5);
}

.spec-head__icon {
	width: 3.5rem;
	height: 3.5rem;
	background: var(--color-white);
}

.spec-head__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.spec-head__intro {
	margin: 0;
	max-width: 46rem;
	color: var(--color-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.spec-head .profile-facts { margin-top: 0; }

.spec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.spec-chips li {
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 500;
}

.doctor-grid.spec-doctors { gap: var(--space-3); }

.spec-treatments {
	margin: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.spec-treatments__row { padding: var(--space-3) var(--space-4); }

.spec-treatments__row + .spec-treatments__row { border-top: 1px solid var(--color-line); }

.spec-treatments dt {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-navy);
	font-weight: 600;
}

.spec-treatments dt .icon {
	flex: none;
	color: var(--color-blue);
}

.spec-treatments dd {
	margin: 0.125rem 0 0 1.5rem;
	color: var(--color-slate);
	font-size: 0.875rem;
	line-height: 1.45;
}

.spec-others .section-header { margin-bottom: var(--space-4); }

.spec-others__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.spec-others__list a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-navy);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.spec-others__list a:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.spec-others__list .icon {
	flex: none;
	color: var(--color-blue);
}

@media (min-width: 48rem) {
	.spec-head__inner {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: var(--space-5);
		padding-block: var(--space-6);
	}

	.spec-head__icon {
		width: 4.5rem;
		height: 4.5rem;
	}

	.spec-others__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The department page's main column is narrower than the Doctors page, so its
   doctor list never goes beyond two across: a directory card needs about
   26rem to keep the photo, the facts and the button side by side. */
@media (min-width: 60rem) {
	.doctor-grid.spec-doctors { grid-template-columns: minmax(0, 1fr); }

	.spec-others__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
	.doctor-grid.spec-doctors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* About us. The building photograph under a navy scrim, the hospital's key
   facts in one band, its story beside the mission and vision, the people who
   founded and run it, the facilities board, the walk-through photographs, and
   the address to finish. */
.about-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-deep);
	color: var(--color-white);
}

.about-hero__media {
	position: absolute;
	inset: 0;
}

.about-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 18%;
}

.about-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(14 28 87 / 0.35) 0%, rgb(14 28 87 / 0.75) 55%, rgb(14 28 87 / 0.95) 100%);
}

.about-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-2);
	min-height: 17rem;
	padding-block: var(--space-4) var(--space-6);
}

.about-hero__inner .breadcrumbs { margin-bottom: auto; }

.about-hero__title {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-h1);
	line-height: var(--leading-tight);
}

.about-hero__lead {
	margin: 0;
	max-width: 36rem;
	color: #d7e2f7;
	font-size: 1rem;
	line-height: 1.5;
}

.about-facts {
	border-bottom: 1px solid var(--color-line);
	background: var(--color-mist);
}

.about-facts__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block: 0;
	padding-block: var(--space-2);
	list-style: none;
}

.about-facts__list li {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: var(--space-3) var(--space-3) var(--space-3) 0;
}

.about-facts__list li:nth-child(even) {
	padding-left: var(--space-4);
	border-left: 1px solid var(--color-line);
}

.about-facts__list li:nth-child(n + 3) { border-top: 1px solid var(--color-line); }

/* An odd one out at the end takes the whole row rather than half of it. */
.about-facts__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.about-facts__list strong {
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.1;
}

.about-facts__list span {
	color: var(--color-slate);
	font-size: 0.8125rem;
}

.about__heading {
	margin: 0 0 var(--space-4);
	color: var(--color-navy);
	font-size: var(--text-h3);
	line-height: 1.05;
}

.about-story__grid {
	display: grid;
	gap: var(--space-6);
}

.about-story .prose p { margin: 0; }

.about-pillars {
	display: grid;
	gap: var(--space-3);
	align-content: start;
}

.about-pillar {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-sky-tint);
}

.about-pillar__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
	color: var(--color-blue);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.about-pillar__text {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}

.about-people__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-person {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.about-person__photo {
	display: grid;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	place-items: center;
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--color-sky-tint), #c9daf4);
}

.about-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.about-person__photo .monogram { font-size: 1.75rem; }

.about-person__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.about-person__role {
	margin: 0;
	color: var(--color-blue);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.about-person__name {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
}

.about-person__name a { color: inherit; }

.about-person__name a:hover { color: var(--color-blue); }

.about-person__degrees {
	margin: 0;
	color: var(--color-slate);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.about-person__about {
	margin: 0.2rem 0 0;
	color: var(--color-ink);
	font-size: 0.875rem;
	line-height: 1.45;
}

.about-facilities__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-facilities__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
}

.about-facilities__list .icon {
	flex: none;
	margin-top: 0.1rem;
	color: var(--color-blue);
}

.about-tour__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-tour__item { margin: 0; }

.about-tour__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-sky-tint);
}

.about-tour__item figcaption {
	margin-top: var(--space-2);
	color: var(--color-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}

.about-visit__panel {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--color-navy);
	color: var(--color-white);
}

.about-visit__title {
	margin: 0 0 var(--space-2);
	color: var(--color-white);
	font-size: var(--text-h3);
}

.about-visit__address {
	color: #d7e2f7;
	font-style: normal;
	line-height: 1.6;
}

.about-visit__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

@media (min-width: 40rem) {
	.about-facts__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.about-facts__list li,
	.about-facts__list li:nth-child(even) { padding: var(--space-4) var(--space-4); }

	.about-facts__list li:first-child { padding-left: 0; }
	.about-facts__list li + li { border-left: 1px solid var(--color-line); }
	.about-facts__list li:nth-child(n + 3) { border-top: 0; }
	.about-facts__list li:last-child:nth-child(odd) { grid-column: auto; }

	.about-facilities__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.about-tour__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.about-hero__inner {
		min-height: 24rem;
		padding-block: var(--space-6) var(--space-10);
	}

	.about-hero__media::after {
		background: linear-gradient(100deg, rgb(14 28 87 / 0.94) 0%, rgb(14 28 87 / 0.7) 45%, rgb(14 28 87 / 0.2) 100%);
	}

	.about-hero__image { object-position: center 20%; }

	.about-hero__lead { font-size: var(--text-lead); }

	.about__heading { font-size: var(--text-h2); }

	.about-story__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-10);
	}

	.about-people__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.about-person { grid-template-columns: 7rem minmax(0, 1fr); }

	.about-facilities__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.about-tour__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.about-visit__panel {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: var(--space-8) var(--space-10);
	}
}

/* Insurance page. The list first, with a box that narrows it as the patient
   types; then the four steps of a cashless admission and common questions. */
.ins-search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: var(--space-2);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.ins-search[hidden] { display: none; }

.ins-search .icon {
	position: absolute;
	left: 0.875rem;
	color: var(--color-slate);
	pointer-events: none;
}

/* 16px text stays: anything smaller and iOS zooms the page on tap. */
.ins-search input {
	width: 100%;
	min-height: 3rem;
	padding: 0 var(--space-3) 0 2.75rem;
	border: 0;
	border-radius: inherit;
	background: transparent;
	font-size: 1rem;
	appearance: none;
	-webkit-appearance: none;
}

.ins-search input:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -1px;
}

.ins-status {
	min-height: 1.25rem;
	margin: 0 0 var(--space-3);
	color: var(--color-slate);
	font-size: 0.8125rem;
}

.ins-group + .ins-group { margin-top: var(--space-5); }

.ins-group[hidden] { display: none; }

.ins-group__title {
	margin: 0 0 var(--space-2);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
}

.ins-group__title span {
	color: var(--color-slate);
	font-weight: 500;
}

.ins-list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ins-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
}

.ins-list__item[hidden] { display: none; }

.ins-list__item .icon {
	flex: none;
	color: var(--color-green-text);
}

.ins-empty {
	margin: 0;
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-mist);
	color: var(--color-ink);
	font-size: 0.9375rem;
}

.ins-empty[hidden] { display: none; }

.ins-steps {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ins-step {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
}

.ins-step__number {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--color-navy);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 600;
}

.ins-step__title {
	margin: 0.2rem 0 0.15rem;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
}

.ins-step__text {
	margin: 0;
	color: var(--color-slate);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ins-whatsapp {
	width: 100%;
	margin-top: var(--space-3);
}

@media (min-width: 40rem) {
	.ins-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ins-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) var(--space-6);
	}
}

/* An insurer with no logo yet shows its name in the same box. */
.insurers__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-navy);
	font-size: 0.78125rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (min-width: 60rem) {
	.insurers__name { font-size: 0.875rem; }
}

/* Health articles list: topics as a row of links, then the articles. */
.blog-topics { margin-bottom: var(--space-5); }

.blog-topics ul {
	display: flex;
	gap: var(--space-2);
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) var(--space-1);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.blog-topics ul::-webkit-scrollbar { display: none; }

.blog-topics a {
	display: inline-flex;
	text-decoration: none;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.2s, color 0.2s;
}

.blog-topics a:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.blog-topics a[aria-current="page"] {
	border-color: var(--color-navy);
	background: var(--color-navy);
	color: var(--color-white);
}

.article-grid {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-grid > li { display: flex; }

.article-grid .article-card { width: 100%; }

.blog-empty { color: var(--color-slate); }

@media (min-width: 40rem) {
	.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.article-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-5);
	}

	.blog-topics ul {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* Health article. The answer sits under the title, the contents and the
   doctor to see stay beside the text on a wide screen, and the text keeps a
   readable line length. */
.article-head {
	display: grid;
	gap: var(--space-3);
	padding-block: var(--space-2) var(--space-5);
}

.article-head__topic {
	justify-self: start;
	text-decoration: none;
	color: var(--color-blue);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.article-head__title {
	max-width: 48rem;
	margin: 0;
	color: var(--color-navy);
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
	text-wrap: balance;
}

.article-head__dek {
	max-width: 44rem;
	margin: 0;
	color: var(--color-slate);
	font-size: 1.0625rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.article-byline {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-1);
}

.article-byline__photo {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--color-sky-tint);
}

.article-byline__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.article-byline__text {
	display: grid;
	margin: 0;
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.article-byline__text span {
	color: var(--color-slate);
	font-size: 0.8125rem;
	font-weight: 400;
}

.article-cover { margin-block: 0 var(--space-6); }

.article-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
	background: var(--color-sky-tint);
}

.article-layout {
	display: grid;
	gap: var(--space-6);
	padding-bottom: var(--space-10);
}

.article-column {
	display: grid;
	align-content: start;
	min-width: 0;
	max-width: 44rem;
}

.article-main {
	display: grid;
	gap: var(--space-6);
	min-width: 0;
	max-width: 44rem;
}

.article-points {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-sky-tint);
}

.article-points__title {
	margin: 0 0 var(--space-3);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
}

.article-points ul {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-points li {
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	gap: var(--space-2);
	color: var(--color-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.article-points .icon {
	margin-top: 0.2rem;
	color: var(--color-green-text);
}

/* The doctor to see, on a phone, right after the short answer: the full card
   would otherwise wait until the end of the article. */
.article-doctor-strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

.article-doctor-strip__person {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	color: inherit;
	text-decoration: none;
}

.article-doctor-strip__photo {
	width: 2.75rem;
	height: 2.75rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--color-sky-tint);
}

.article-doctor-strip__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.article-doctor-strip__text {
	display: grid;
	min-width: 0;
}

.article-doctor-strip__name {
	overflow: hidden;
	color: var(--color-navy);
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article-doctor-strip__role {
	color: var(--color-slate);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.article-doctor-strip__book {
	min-height: 2.5rem;
	padding-inline: var(--space-5);
}

@media (min-width: 60rem) {
	.article-doctor-strip { display: none; }
}

.article-toc ol {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.article-toc li { counter-increment: toc; }

.article-toc a {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	padding-block: 0.3rem;
	color: var(--color-ink);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.article-toc a::before {
	content: counter(toc) ".";
	color: var(--color-slate);
	font-variant-numeric: tabular-nums;
}

.article-toc a:hover { color: var(--color-blue); }

.article-toc--inline {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.article-toc--inline summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3rem;
	padding: 0 var(--space-4);
	color: var(--color-navy);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.article-toc--inline summary::-webkit-details-marker { display: none; }

.article-toc--inline[open] summary .icon { transform: rotate(180deg); }

.article-toc--inline ol { padding: 0 var(--space-4) var(--space-4); }

.article-toc--side { display: none; }

.article-toc__label,
.article-doctor__label {
	margin: 0 0 var(--space-2);
	color: var(--color-slate);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The article's own text. Headings get room above them, since a reader
   scanning for their question jumps between them. */
.article-body {
	color: var(--color-ink);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.article-body h2 {
	margin-top: var(--space-8);
	color: var(--color-navy);
	font-size: 1.625rem;
	line-height: 1.15;
	scroll-margin-top: 6rem;
}

.article-body h3 {
	margin-top: var(--space-6);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
}

.article-body a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.article-body strong { color: var(--color-navy); }

.article-body .article-callout {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: #fff4f2;
	color: var(--color-ink);
}

.article-body .article-callout strong { color: #a3261b; }

.article-body .article-sources {
	color: var(--color-slate);
	font-size: 0.875rem;
}

.article-body table {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.article-body th {
	color: var(--color-navy);
	font-weight: 600;
}

.article-faq__title {
	margin: 0 0 var(--space-3);
	color: var(--color-navy);
	font-size: 1.625rem;
	line-height: 1.15;
}

.article-note {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
	color: var(--color-slate);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.article-doctor {
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-mist);
}

.article-doctor__person {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	color: inherit;
	text-decoration: none;
}

.article-doctor__photo {
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-sky-tint);
}

.article-doctor__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.article-doctor__name {
	display: block;
	color: var(--color-navy);
	font-weight: 600;
	line-height: 1.3;
}

.article-doctor__person:hover .article-doctor__name { color: var(--color-blue); }

.article-doctor__role {
	display: block;
	color: var(--color-slate);
	font-size: 0.875rem;
}

.article-doctor__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.article-doctor__actions .btn { padding-inline: var(--space-3); }

.article-doctor__call a { text-decoration: none; }

.article-doctor__call {
	margin: var(--space-3) 0 0;
	color: var(--color-slate);
	font-size: 0.875rem;
	text-align: center;
}

.article-related .section-header { margin-bottom: var(--space-4); }

@media (min-width: 60rem) {
	.article-head { padding-block: var(--space-4) var(--space-6); }

	.article-head__title { font-size: 3rem; }


	.article-layout {
		grid-template-columns: minmax(0, 44rem) 20rem;
		justify-content: space-between;
		align-items: start;
		gap: var(--space-10);
	}

	.article-toc--inline { display: none; }

	/* Starts level with the title, so the doctor to book sits on the first
	   screen instead of an empty margin. */
	.article-side {
		position: sticky;
		top: 6.5rem;
		display: grid;
		gap: var(--space-5);
		margin-top: var(--space-4);
	}

	.article-toc--side { display: block; }
}

/* Recovery stories: patient videos. The only full-bleed dark section on the
   page, because a still frame reads better against it than against paper, and
   because it keeps the videos from blurring into the written reviews above. */
/* A shade deeper than the footer below it, so the two dark blocks read as two
   and the video stills have the darkest surface on the site behind them. */
.stories { background: var(--color-navy-deep); }

.stories .lead { color: #b9c6e6; }

.stories__layout {
	display: grid;
	gap: var(--grid-gap);
	margin-top: var(--space-8);
}

.stories__stage {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	min-width: 0;
}

.stories__player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-navy-deep);
	box-shadow: 0 2px 4px rgb(3 10 36 / 0.35), 0 22px 44px rgb(3 10 36 / 0.45);
}

.stories__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.stories__facade {
	position: absolute;
	inset: 0;
	display: block;
}

/* Once a video is playing the still and its play button step aside, so taps
   reach YouTube's own controls (pause, seek, full screen). */
.stories__facade[hidden] { display: none; }

.stories__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The one authored moment on this section: picking another story fades the
   still out and the new one in, so the swap is read as a change of subject. */
.stories__poster.is-swapping { opacity: 0; }

.stories__facade:hover .stories__poster { transform: scale(1.03); }

.stories__facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(3 10 36 / 0.32) 0%, rgb(3 10 36 / 0) 45%, rgb(3 10 36 / 0.3) 100%);
}

.stories__language {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 1;
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-pill);
	background: rgb(3 10 36 / 0.72);
	color: var(--color-white);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.stories__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--color-blue);
	color: var(--color-white);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The Lucide play glyph is a closed triangle, so it fills cleanly. */
.stories__play .icon,
.story-item__play .icon { fill: currentColor; }

.stories__play .icon { margin-left: 2px; }

.stories__facade:hover .stories__play {
	background: var(--color-blue-hover);
	transform: translate(-50%, -50%) scale(1.07);
}

.stories__facade:focus-visible {
	outline: 3px solid var(--color-white);
	outline-offset: -5px;
	border-radius: var(--radius-lg);
}

.stories__caption {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.stories__title {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-h3);
	line-height: var(--leading-heading);
	text-wrap: balance;
}

.stories__meta {
	margin: 0;
	color: #9fb0da;
	font-size: var(--text-small);
}

.stories__aside { min-width: 0; }

/* On a phone the list scrolls inside a window about two and a half rows deep:
   a part row at the cut is what tells the visitor there is more, and it keeps
   the section from running on for a screen and a half. */
.stories__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	max-height: 16rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scrollbar-color: rgb(255 255 255 / 0.3) rgb(255 255 255 / 0.08);
	scrollbar-width: thin;
}

.story-item {
	display: grid;
	grid-template-columns: 6.25rem minmax(0, 1fr);
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.story-item:hover { background: rgb(255 255 255 / 0.08); }

/* The story playing above is not repeated here. */
.story-item.is-current { display: none; }

.story-item:focus-visible {
	outline: var(--focus-ring);
	outline-color: var(--color-white);
	outline-offset: 2px;
}

.story-item__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-navy-deep);
}

.story-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story-item__play {
	position: absolute;
	right: 0.25rem;
	bottom: 0.25rem;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: rgb(3 10 36 / 0.78);
	color: var(--color-white);
}

.story-item__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.story-item__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--color-white);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.story-item__meta {
	color: #93a5d2;
	font-size: var(--text-small);
	line-height: 1.35;
}

@media (min-width: 48rem) {
	.stories__list { max-height: 20rem; }

	.story-item { grid-template-columns: 7.5rem minmax(0, 1fr); }

	.stories__play {
		width: 3.75rem;
		height: 3.75rem;
	}
}

@media (min-width: 60rem) {
	.stories__layout {
		grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 23rem);
		align-items: stretch;
	}

	.stories__layout--solo { grid-template-columns: minmax(0, 1fr); }

	.stories__play {
		width: 4.25rem;
		height: 4.25rem;
	}

	/* The list is pinned to the height of the stage beside it and scrolls inside
	   that, so the section keeps one horizon however many stories are added. */
	.stories__aside { position: relative; }

	.stories__list {
		position: absolute;
		inset: 0;
		max-height: none;
		padding-right: var(--space-2);
	}

	/* Tighter rows on a desktop so five stories sit inside the stage's height and
	   a sixth shows as a part row, which is what tells the visitor to scroll. */
	.story-item {
		grid-template-columns: 6.75rem minmax(0, 1fr);
		padding-block: var(--space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stories__poster,
	.stories__play { transition: none; }

	.stories__facade:hover .stories__poster { transform: none; }
}

/* Empanelled insurers. The words sit beside the logos on a desktop so the row
   reads as one statement rather than another stacked section. */
.insurers {
	border-block: 1px solid var(--color-line);
}

.insurers__inner {
	display: grid;
	gap: var(--space-8);
}

.insurers__intro {
	display: grid;
	justify-items: start;
	gap: var(--space-5);
}

.insurers__title {
	margin: 0;
	color: var(--color-navy);
	font-size: var(--text-h3);
}

.insurers__lead {
	margin: 0;
	max-width: 34ch;
	color: var(--color-slate);
	font-size: var(--text-small);
}

/* Three rows, so the logos hold the height of the words beside them. */
.insurers__rows {
	display: grid;
	gap: var(--space-4);
}

.insurers__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

/* Sliding row. The logos fade out at both edges instead of being cut off, and
   the whole thing stops while a visitor is reading it. */
.insurers__marquee {
	position: relative;
	/* Runs to both screen edges on a phone, so it reads as a passing row rather
	   than a boxed-in slider. */
	margin-inline: calc(-1 * var(--gutter));
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

@media (min-width: 60rem) {
	.insurers__marquee { margin-inline: 0; }
}

.insurers__track {
	display: flex;
	gap: var(--space-4);
	width: max-content;
	animation: insurers-slide var(--marquee-duration, 60s) linear infinite;
}

.insurers__marquee--reverse .insurers__track {
	animation-direction: reverse;
}

/* Hovering one row holds all three: rows moving while the one under the cursor
   is still would read as a fault. */
.insurers:hover .insurers__track,
.insurers:focus-within .insurers__track {
	animation-play-state: paused;
}

.insurers__group {
	display: flex;
	gap: var(--space-4);
}

/* Two identical copies sit side by side, so halfway through the travel the row
   looks exactly as it did at the start and the loop is invisible. */
@keyframes insurers-slide {
	to { transform: translateX(-50%); }
}

.insurers__marquee .insurers__item {
	width: 9.5rem;
	flex: none;
}

/* Nothing moves for anyone who asked for that; the row becomes scrollable
   instead, so every logo is still reachable. */
@media (prefers-reduced-motion: reduce) {
	.insurers__marquee {
		overflow-x: auto;
		mask-image: none;
		-webkit-mask-image: none;
	}

	.insurers__track { animation: none; }
	.insurers__group--clone { display: none; }
}

/* A logo file arrives with its own white background and its own proportions, so
   each one gets an equal box and is fitted inside it rather than stretched. */
/* Smaller boxes on a phone, where three rows would otherwise fill the screen. */
.insurers__item {
	display: grid;
	place-items: center;
	height: 3.75rem;
	padding: var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

/* The box's height less its padding: a percentage height does not resolve
   inside the grid box, so a tall logo would spill out of it. */
.insurers__logo {
	max-width: 100%;
	max-height: 2.25rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (min-width: 40rem) {
	.insurers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.insurers__inner {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-10);
	}

	.insurers__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.insurers__item {
		height: 5rem;
		padding: var(--space-4);
	}

	.insurers__logo { max-height: 3rem; }

	.insurers__marquee .insurers__item { width: 10.5rem; }
}

/* Specialities panel: title, one line, and the "view all" link share a row on a
   desktop and stack, centred, on a phone. */
/* Left-aligned, like every other section head: a centred title, paragraph and
   button stacked on the axis is the stock landing-page block. */
.speciality-header {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.speciality-header__title {
	margin: 0;
	color: var(--color-navy);
}

.speciality-header__lead {
	margin: 0;
	max-width: 46ch;
	color: var(--color-slate);
}

@media (min-width: 60rem) {
	.speciality-header {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		justify-items: start;
		gap: var(--space-8);
		text-align: left;
	}

	.speciality-header__link { justify-self: end; }
}

/* One panel, not a row of cards: the 1px grid gap lets the panel colour show
   through as the hairline between tiles, so no two borders ever meet. */
.speciality-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-line);
}

@media (min-width: 48rem) {
	.speciality-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.speciality-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.speciality-tile {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 6rem;
	padding: var(--space-4) var(--space-2);
	background: var(--color-white);
	color: var(--color-navy);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--duration) var(--ease);
}

.speciality-tile:hover {
	background: var(--color-sky-wash);
	color: var(--color-navy);
}

/* Inset, because the panel clips anything drawn outside a tile. */
.speciality-tile:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -3px;
}

.speciality-tile__icon {
	display: grid;
	place-items: center;
	color: var(--color-blue);
}

.speciality-tile__name {
	font-size: 0.9375rem;
	line-height: 1.35;
}

@media (min-width: 48rem) {
	.speciality-tile {
		min-height: 9.5rem;
		gap: var(--space-3);
		padding: var(--space-5) var(--space-3);
	}
}

/* Index header, shared by the specialities and doctors lists: a tinted band with
   the page name and one way in. No hero, no second set of actions: the visitor
   came to pick something from the list, and the band's whole job is to get them
   to it. */
.archive-head {
	background: var(--color-sky-tint);
}

.archive-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2) var(--space-3);
	padding-block: var(--space-4);
}

.archive-head__title { grid-column: 1 / -1; }

.archive-head__title {
	margin: 0;
	color: var(--color-navy);
	font-size: 1.625rem;
	line-height: var(--leading-tight);
	text-wrap: balance;
}

/* On a phone the band carries only its control: the page name is still there
   for search engines and screen readers, just not drawn. From tablet up there is
   room for both. */
@media (max-width: 47.9375rem) {
	.archive-head__title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* A filled control, so it reads as the thing to press rather than a form field
   someone forgot to style. */
.archive-head__jump select {
	width: 100%;
	min-height: 2.875rem;
	padding-right: 3rem;
	border-color: transparent;
	background-color: var(--color-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
	appearance: none;
}

.archive-head__jump select:hover { background-color: var(--color-blue-hover); }

/* The list itself is the browser's, so it draws on the page's own colours. */
.archive-head__jump option {
	background: var(--color-white);
	color: var(--color-ink);
	font-weight: 400;
}

.archive-head__trail { padding-block: var(--space-3); }

@media (min-width: 60rem) {
	.archive-head__inner {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
		align-items: center;
		gap: var(--space-8);
		padding-block: var(--space-4);
	}

	.archive-head__title { grid-column: auto; }

	/* Beside a control rather than over a page, so the name steps back a size. */
	.archive-head__title { font-size: var(--text-h2); }
}

/* Grid or list. A phone shows two tiles across; a column of names is quicker to
   read down, so the choice is offered rather than decided. */
.archive-head__view {
	display: inline-grid;
	width: var(--tap-min);
	height: var(--tap-min);
	place-items: center;
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-blue);
}

.archive-head__view:hover {
	background: var(--color-blue);
	color: var(--color-white);
}

.archive-head__view .archive-head__view-grid { display: none; }

.archive-head__view[aria-pressed="true"] {
	background: var(--color-blue);
	color: var(--color-white);
}

.archive-head__view[aria-pressed="true"] .archive-head__view-list { display: none; }
.archive-head__view[aria-pressed="true"] .archive-head__view-grid { display: block; }

/* The switch is a phone's affordance: a desktop shows six across and has no
   column to fall back to. */
@media (min-width: 48rem) {
	.archive-head__view { display: none; }
}

.speciality-tiles--list {
	grid-template-columns: minmax(0, 1fr);
}

.speciality-tiles--list .speciality-tile {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	min-height: 0;
	padding: var(--space-3) var(--space-4);
	text-align: left;
}

.speciality-tiles--list .speciality-tile__name { font-size: 1rem; }

/* The doctors page puts a wider control in the band, so the name goes above it
   until there is room for both on one line. */
.archive-head__inner--stacked { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 60rem) {
	.archive-head__inner--stacked {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
	}
}

@media (min-width: 72rem) {
	.archive-head__inner--stacked {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-8);
	}
}

/* Doctor filter: one white card, the fields divided by a hairline rather than
   boxed separately, so it reads as a single question with two parts. */
/* On a phone the speciality takes the top row and submits on its own; the name
   shares the second row with an icon button, so the card is two rows, not three. */
.doctor-filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-rest);
}

.doctor-filter__field {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color-line);
}

/* One inset for the whole card: 16px in from the left for the icons and 16px
   in from the right for the chevron, so both sides of every row finish at the
   same distance from the edge. */
.doctor-filter__field .icon {
	position: absolute;
	left: 1rem;
	color: var(--color-slate);
	pointer-events: none;
}

/* 16px text stays: anything smaller and iOS zooms the page on tap. */
.doctor-filter__field :is(select, input) {
	width: 100%;
	min-height: 3rem;
	padding-left: 3rem;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-size: 1rem;
}

/* The browser's own arrow sits hard against the edge; this one keeps the inset. */
.doctor-filter__field select {
	padding-right: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6485' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
	text-overflow: ellipsis;
	appearance: none;
	-webkit-appearance: none;
}

.doctor-filter__field input { padding-right: var(--space-2); }

.doctor-filter__field input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
}

.doctor-filter__field :is(select, input):focus-visible {
	outline: var(--focus-ring);
	outline-offset: -3px;
}

.doctor-filter__field:first-child { grid-column: 1 / -1; }

.doctor-filter__field:nth-child(2) { border-bottom: 0; }

/* 36px, 8px in from the edge: its centre falls on the same line as the chevron
   in the row above, and it clears the row by 6px top and bottom. */
.doctor-filter__submit {
	width: 2.25rem;
	min-height: 2.25rem;
	margin: 0 var(--space-2) 0 0;
	padding: 0;
	align-self: center;
}

.doctor-filter__submit-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 48rem) {
	.doctor-filter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: center;
	}

	.doctor-filter__field:first-child { grid-column: auto; }

	.doctor-filter__field { border-bottom: 0; }

	.doctor-filter__field + .doctor-filter__field { border-left: 1px solid var(--color-line); }

	.doctor-filter__submit {
		width: auto;
		min-width: 8rem;
		margin: var(--space-2);
		padding: 0 var(--space-6);
	}

	.doctor-filter__submit-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/* What is on screen, and the way back to all of it. */
.doctor-results {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

.doctor-results__count {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.doctor-results__clear {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-slate);
	font-size: var(--text-small);
	text-decoration: none;
}

.doctor-results__clear:hover { color: var(--color-blue); }

.doctor-grid {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.doctor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

@media (min-width: 72rem) {
	.doctor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Directory card: square portrait beside the words, the button on the card's
   floor so every card in a row lines its button up with the next. */
.doctor-card--directory {
	display: grid;
	grid-template-columns: 4.75rem minmax(0, 1fr);
	gap: var(--space-4);
	height: 100%;
	padding: var(--space-4);
}

.doctor-card--directory .doctor-card__photo {
	align-self: start;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.doctor-card--directory .doctor-card__photo img { object-position: top center; }

.doctor-card--directory .monogram { font-size: 1.5rem; }

.doctor-card--directory .doctor-card__body {
	gap: var(--space-3);
	padding: 0;
}

.doctor-card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
}

.doctor-card--directory .doctor-card__name { font-size: 1.0625rem; }

.doctor-card--directory .doctor-card__role {
	font-size: 0.875rem;
	font-weight: 600;
}

.doctor-card--directory .doctor-card__degree {
	margin-top: 0;
	font-size: 0.8125rem;
}

.doctor-card__facts {
	color: var(--color-slate);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.doctor-card__book { min-height: 2.5rem; }

@media (min-width: 48rem) {
	.doctor-card--directory { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

@media (min-width: 72rem) {
	.doctor-card--directory {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		padding: var(--space-5);
	}
}

.doctor-empty {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	padding: var(--space-8) var(--space-6);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-mist);
}

.doctor-empty__title {
	margin: 0;
	color: var(--color-navy);
	font-size: 1.125rem;
	font-weight: 600;
}

/* Section rule: the heading sits on a hairline with its own weight under it. */
.section-rule {
	border-bottom: 1px solid var(--color-line);
	margin-bottom: var(--space-4);
}

.section-rule__title {
	display: inline-block;
	margin: 0 0 -1px;
	padding-bottom: var(--space-2);
	border-bottom: 3px solid var(--color-navy);
	color: var(--color-navy);
	font-size: 1.375rem;
	line-height: var(--leading-heading);
}

@media (min-width: 48rem) {
	.section-rule { margin-bottom: var(--space-6); }

	/* A step under the page's own name, never level with it. */
	.section-rule__title {
		padding-bottom: var(--space-3);
		border-bottom-width: 4px;
		font-size: var(--text-h3);
	}
}

.section--flush { padding-block: var(--space-2) var(--section-pad); }

/* Index grid: the homepage tiles, every department this time. Seventeen is an
   awkward number at two, four or six across, so here each tile draws its own
   hairline and the panel behind them is white. A short final row then ends in
   plain white rather than a stray tinted cell. */
.speciality-tiles--all {
	background: var(--color-white);
}

.speciality-tiles--all .speciality-tile {
	box-shadow: 0 0 0 1px var(--color-line);
}

/* Speciality card */
.speciality-card {
	gap: var(--space-3);
	padding: var(--card-pad);
}

.speciality-card__title {
	margin: 0;
	font-size: 1.625rem;
	font-weight: 600;
}

.speciality-card__summary {
	color: var(--color-slate);
	font-size: 0.96875rem;
	line-height: 1.55;
}

.speciality-card__meta {
	color: var(--color-slate);
	font-size: 0.875rem;
}

.speciality-card__more {
	margin-top: auto;
	padding-top: var(--space-2);
	font-size: 0.9375rem;
}

/* Article card */
.article-card__image {
	background: linear-gradient(160deg, #dce8fa, #bcd0f1);
}

/* 16:9, the covers' own shape, so the title on them is never cut. */
.article-card--vertical .article-card__image { aspect-ratio: 16 / 9; }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }

.article-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--card-pad);
}

.article-card__title {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: var(--leading-snug);
}

.article-card__meta {
	color: var(--color-slate);
	font-size: 0.875rem;
}

.article-card--row {
	display: grid;
	grid-template-columns: 8.125rem minmax(0, 1fr);
}

.article-card--row .article-card__image { min-height: 100%; }

/* Breadcrumbs. One line at every width: the links keep their size and the
   current page, usually a long title repeated in the heading below, is cut
   short with an ellipsis. */
.breadcrumbs ol {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-slate);
	font-size: var(--text-small);
}

.breadcrumbs li {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--space-3);
	white-space: nowrap;
}

.breadcrumbs li:last-child {
	flex: 0 1 auto;
	min-width: 0;
}

.breadcrumbs [aria-current="page"] {
	overflow: hidden;
	text-overflow: ellipsis;
}

.breadcrumbs li + li::before {
	content: "\203A";
	color: var(--color-slate);
}

.breadcrumbs a {
	color: var(--color-slate);
	text-decoration: none;
}

.breadcrumbs a:hover { color: var(--color-blue); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

.breadcrumbs--inverse ol,
.breadcrumbs--inverse li::before { color: #b9c7e8; }
.breadcrumbs--inverse a { color: #b9c7e8; }
.breadcrumbs--inverse a:hover,
.breadcrumbs--inverse [aria-current="page"] { color: var(--color-white); }

/* FAQ */
.faq {
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.faq__item + .faq__item { border-top: 1px solid var(--color-line); }

.faq__item { transition: background-color var(--duration) var(--ease); }
.faq__item[open] { background: var(--color-sky-wash); }

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: var(--leading-snug);
	cursor: pointer;
	list-style: none;
}

.faq__question:hover { color: var(--color-blue); }

.faq__question:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -3px;
}

.faq__question::-webkit-details-marker { display: none; }

/* The chevron sits in a small tinted disc so the row reads as something to open. */
.faq__question .icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.3125rem;
	border-radius: 50%;
	background: var(--color-sky-tint);
	color: var(--color-blue);
	transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.faq__item[open] .faq__question .icon {
	background: var(--color-blue);
	color: var(--color-white);
	transform: rotate(180deg);
}

.faq__answer {
	padding: 0 var(--space-4) var(--space-4);
	max-width: 70ch;
	color: var(--color-ink);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.faq__answer a { color: var(--color-blue); font-weight: 600; }

/* An opened answer fades in from just above, rather than appearing at once. */
.faq__item[open] .faq__answer { animation: faq-answer-in 0.22s var(--ease); }

@keyframes faq-answer-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq__item[open] .faq__answer { animation: none; }
}

@media (min-width: 48rem) {
	.faq__question {
		padding: var(--space-4) var(--space-5);
		font-size: 1.0625rem;
	}

	.faq__answer {
		padding: 0 var(--space-5) var(--space-5);
		font-size: 1rem;
	}
}

.faq__answer p + p { margin-top: var(--space-3); }

/* OPD timetable */
.timetable__rows {
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
}

.timetable__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-size: 0.96875rem;
}

.timetable__row:nth-child(odd) { background: var(--color-mist); }
.timetable__row dt { font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.timetable__row dd { margin: 0; }

.timetable__note {
	margin-top: var(--space-3);
	color: var(--color-slate);
	font-size: var(--text-small);
	line-height: 1.5;
}

/* Booking band */
.booking-band-section { padding-block: 0 var(--section-pad); }

.booking-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6) var(--space-8);
	padding: clamp(1.75rem, 1.15rem + 2.47vw, 2.5rem);
	border-radius: var(--radius-lg);
	background: var(--color-navy);
	color: #c9d8f5;
}

.booking-band__text {
	display: flex;
	flex: 1 1 22rem;
	flex-direction: column;
	gap: var(--space-2);
}

.booking-band__title {
	margin: 0;
	color: var(--color-white);
	font-size: clamp(1.75rem, 1.27rem + 1.98vw, 2.5rem);
	line-height: var(--leading-heading);
}

.booking-band__text p { max-width: 52ch; }

.booking-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.booking-band :focus-visible { outline-color: var(--color-white); }

@media (max-width: 30rem) {
	.booking-band__actions { width: 100%; }
	.booking-band__actions .btn { flex: 1 1 100%; }
}

/* Stats in hairline columns */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-line);
}

.stats__item {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-1);
	padding: var(--space-6) var(--space-4);
	background: var(--color-white);
	text-align: center;
}

.stats__value {
	margin: 0;
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.76rem + 0.99vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
}

.stats__value--accent { color: var(--color-blue); }

.stats__label {
	color: var(--color-slate);
	font-size: var(--text-small);
}

/* Testimonials widget (Jotform) */
.testimonials-widget {
	min-height: 20rem;
	display: grid;
	place-items: center;
}

.testimonials-widget__loading {
	color: var(--color-slate);
	font-size: var(--text-small);
}

/* Pagination: clear of the list above it, centred under it. */
.pagination { margin-top: var(--space-8); }

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination .page-numbers {
	display: grid;
	min-width: 2.75rem;
	min-height: 2.75rem;
	place-items: center;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	font-weight: 500;
	text-decoration: none;
}

.pagination a:hover { border-color: var(--color-blue); color: var(--color-blue); }

.pagination .current {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: var(--color-white);
	font-weight: 600;
}

.pagination .dots { border-color: transparent; }

.pagination .page-numbers .icon { display: block; }

/* Long-form content (speciality "About", articles, legal pages) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose > :is(h2, h3) + * { margin-top: var(--space-3); }

.prose :is(h2, h3, h4) { margin-top: var(--space-10); }
.prose > :first-child { margin-top: 0; }
.prose :is(ul, ol) { padding-left: var(--space-5); }
.prose :is(ul, ol) li + li { margin-top: var(--space-2); }

.prose blockquote {
	position: relative;
	padding: var(--space-5) var(--space-6) var(--space-5) var(--space-12);
	border-radius: var(--radius-md);
	background: var(--color-sky-wash);
	color: var(--color-navy);
	font-size: var(--text-lead);
	font-weight: 500;
}

.prose blockquote::before {
	content: "\201C";
	position: absolute;
	top: var(--space-2);
	left: var(--space-5);
	color: var(--color-blue);
	font-family: var(--font-display);
	font-size: 3.5rem;
	line-height: 1;
}

.prose :is(img, figure) { border-radius: var(--radius-md); }
.prose figcaption { color: var(--color-slate); font-size: var(--text-small); margin-top: var(--space-2); }
.prose table { width: 100%; border-collapse: collapse; }
.prose :is(td, th) { padding: var(--space-3); border-bottom: 1px solid var(--color-line); text-align: left; }
.prose .wp-block-table { overflow-x: auto; }

/* Form fields (Fluent Forms is styled to match in step 17) */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.form-label {
	font-size: 0.875rem;
	font-weight: 600;
}

.form-label__required { color: var(--color-red); }

.form-hint {
	color: var(--color-slate);
	font-size: var(--text-small);
	line-height: 1.45;
}

:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="date"], input[type="search"], select, textarea
) {
	width: 100%;
	min-height: 3.25rem;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-input-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 1rem;
}

:where(textarea) {
	min-height: 7rem;
	padding: var(--space-3) var(--space-4);
	line-height: 1.5;
}

:where(input, select, textarea):focus-visible {
	border-color: var(--color-blue);
	outline: 3px solid rgb(10 108 241 / 0.35);
	outline-offset: 1px;
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--color-red);
	background: #fffbfb;
}

/* 10. Homepage hero slider ---------------------------------------------
 * Slides are navy by default and take a photo when one is uploaded. A dark
 * scrim keeps the headline readable over any photo. The patient search bar
 * overlaps the bottom edge, the way a reception desk meets you at the door. */

.hero {
	position: relative;
}

.hero__viewport {
	position: relative;
	overflow: hidden;
}

/* The slider fades into the page's white at its bottom edge. Only from tablet
   up: on a phone the slide ends with the photo, and a white wash over a
   photograph reads as a printing fault. */
.hero__viewport::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: 0;
	background: linear-gradient(to top, var(--color-white) 0%, rgb(255 255 255 / 0.72) 34%, rgb(255 255 255 / 0.28) 62%, rgb(255 255 255 / 0) 100%);
	pointer-events: none;
}

@media (min-width: 60rem) {
	/* Height of the search card, used to straddle it on the slider's bottom edge. */
	.hero { --search-card-h: 8.125rem; }

	/* Only under the search card and a little above it, clear of the buttons. */
	.hero__viewport::after { height: 7.5rem; }
}

.hero__track {
	display: flex;
	transition: transform 600ms var(--ease);
}

/* Phone: one hero, photograph behind the words, text on the lower third where
   the scrim is deepest. The other slides and the slider itself stand down here:
   a carousel on a phone moves the visitor off the message within seconds, and
   slides with nothing to show cost a screen of empty colour. */
.hero-slide {
	position: relative;
	flex: 0 0 100%;
	display: grid;
	align-content: end;
	gap: var(--space-5);
	min-height: 27rem;
	padding-block: var(--space-16) var(--space-8);
	background:
		radial-gradient(120% 130% at 12% 8%, #1d3699 0%, var(--color-navy) 46%, var(--color-navy-deep) 100%);
	color: var(--color-white);
}

.hero-slide:not(:first-child) { display: none; }

.hero-slide__media {
	position: absolute;
	inset: 0;
}

/* Clear at the top so the photograph reads, deep at the foot so the headline
   holds against whatever is behind it. */
.hero-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(14 28 87 / 0.45) 0%, rgb(14 28 87 / 0.22) 18%, rgb(14 28 87 / 0.7) 42%, rgb(14 28 87 / 0.92) 70%, rgb(14 28 87 / 0.96) 100%);
}

/* The search bar below already asks "which doctor", so the hero keeps one action. */
.hero-slide__actions .btn--outline-inverse { display: none; }

/* A phone has no room for the oversized buttons the desktop hero uses. */
.hero-slide__actions .btn--lg {
	min-height: var(--tap-min);
	padding-inline: var(--space-6);
	font-size: 1rem;
}

.hero-slide__media > picture {
	display: block;
	height: 100%;
}

.hero-slide__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A phone photo is portrait: favour its upper part, where the building is. */
@media (max-width: 59.9375rem) {
	.hero-slide__image--has-phone { object-position: center 30%; }
}

/* Without a photograph there is nothing to stand the text on, so the block
   closes up to its own content rather than holding open a screen of gradient. */
.hero-slide:not(:has(.hero-slide__media)) {
	min-height: 0;
	padding-block: var(--space-10);
}

@media (min-width: 60rem) {
	/* From here the slider runs, so every slide is back. */
	.hero-slide {
		align-content: center;
		gap: 0;
		min-height: 28rem;
		padding-block: var(--space-10) calc(var(--search-card-h) / 2 + var(--space-12));
	}

	.hero-slide:not(:first-child) { display: grid; }

	.hero-slide__actions .btn--outline-inverse { display: inline-flex; }

	.hero-slide__actions .btn--lg {
		min-height: 3.25rem;
		padding-inline: var(--space-8);
		font-size: 1.0625rem;
	}

	/* The slide is far wider than the photographs are tall, so only a band of
	   each shows: keep the upper part, where the building and its signs are;
	   the foot goes under the search card anyway. */
	.hero-slide__image { object-position: center 26%; }

	/* At this width the photo fills the slide edge to edge, so it cannot be
	   slid sideways; scaling it from the left edge carries the building out
	   from behind the headline to the clear right-hand side. */
	.hero-slide__media { overflow: hidden; }

	.hero-slide__image {
		transform: scale(1.3);
		transform-origin: 0 24%;
	}

	/* The third photo is taken from lower down, with the sign and cross near
	   its top edge: hold the crop higher so they stay in. */
	.hero-slide:nth-child(3) .hero-slide__image {
		object-position: center 6%;
		transform-origin: 0 0;
	}

	/* Scrim: strong on the text side, clearing towards the photo's subject. */
	.hero-slide__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(100deg, rgb(14 28 87 / 0.94) 0%, rgb(14 28 87 / 0.78) 42%, rgb(14 28 87 / 0.3) 100%);
	}
}

.hero-slide__inner { position: relative; }

.hero-slide__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 34rem;
}

@media (min-width: 60rem) {
	.hero-slide__text { gap: var(--space-4); }
}

/* The heading holds the location line and the promise; it draws nothing
   itself, so both stay where the hero layout puts them. */
.hero-slide__heading { display: contents; }

.hero-slide__where {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: #c9d8f5;
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
}

.hero-slide__heading .hero-slide__title { display: block; }

/* Display size is a desktop luxury: on a phone it costs a third of the first
   screen and pushes the search bar out of sight. */
.hero-slide__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: var(--leading-tight);
}

@media (min-width: 60rem) {
	.hero-slide__title { font-size: var(--text-display); }
}

.hero-slide__title span { display: block; }
.hero-slide__title-accent { color: #8fc0ff; }

.hero-slide__lead {
	max-width: 44ch;
	color: #d7e2f7;
	font-size: 1rem;
	line-height: 1.5;
}

@media (min-width: 60rem) {
	.hero-slide__lead {
		font-size: var(--text-lead);
		line-height: 1.55;
	}
}

.hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.hero-slide__actions .btn { flex: 1 1 0; min-width: 0; }

@media (min-width: 60rem) {
	.hero-slide__actions .btn { flex: 0 1 auto; }
}

/* Phone hero, after AIG: the photograph, the rating, the headline, one search
   field and one pair of ways to reach a person. Everything else the desktop hero
   carries (the location line, the paragraph, the two buttons, the search card)
   stands down below 60rem, so the first screen asks one question at a time. */
.hero-slide__where,
.hero-slide__lead,
.hero-slide__actions,
.hero__search-wrap { display: none; }

.hero-slide__title { font-size: 2.25rem; }

.hero-mobile {
	display: grid;
	gap: var(--space-2);
	width: 100%;
	margin-top: var(--space-2);
}

.hero-find {
	position: relative;
	display: flex;
	align-items: center;
}

.hero-find .icon {
	position: absolute;
	left: 0.875rem;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-slate);
	pointer-events: none;
}

/* 16px text: anything smaller and iOS zooms the page when the field is tapped. */
.hero-find input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.875rem 0 2.625rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	box-shadow: 0 1px 2px rgb(3 10 36 / 0.25);
	color: var(--color-ink);
	font-size: 1rem;
	appearance: none;
	-webkit-appearance: none;
}

/* The suggestion list is the point; the arrow Chrome draws for it is not. */
.hero-find input::-webkit-calendar-picker-indicator { display: none !important; }
.hero-find input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hero-find input:focus-visible {
	outline: 3px solid rgb(255 255 255 / 0.65);
	outline-offset: 2px;
}

.hero-mobile__contact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

/* 44px: the smallest a thumb target should be, and no taller. */
.hero-mobile__contact .btn {
	min-height: 2.75rem;
	padding: 0 var(--space-3);
	gap: 0.375rem;
	font-size: 0.9375rem;
}

.hero-mobile__contact .btn .icon { width: 1rem; height: 1rem; }

/* WhatsApp in its own green, deep enough to hold white text at 5:1. */
.hero-mobile__whatsapp {
	background: var(--color-green-text);
	color: var(--color-white);
}

.hero-mobile__whatsapp:hover {
	background: #17602a;
	color: var(--color-white);
}

/* Phone hero, drawn: the building sketches itself on pale blue paper beside the
   headline, in place of the photograph. The photograph stays for desktop, where
   a wide frame suits it. */
@media (max-width: 59.9375rem) {
	.hero-slide {
		min-height: 0;
		padding-block: var(--space-4);
		background:
			radial-gradient(60% 44% at 50% 42%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 72%),
			var(--color-sky-tint);
		color: var(--color-ink);
	}

	.hero-slide__media { display: none; }

	/* The building is the hero: centred, under a soft light, captioned with where
	   it is, then the search and the two calls. The headline stays in the page
	   for search engines and screen readers; the signboard in the drawing
	   already names the hospital. */
	.hero-slide__text {
		--draw-w: min(56vw, 13rem);

		display: grid;
		grid-template-areas:
			"where"
			"art"
			"find";
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		max-width: none;
	}

	.hero-slide__title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.building-draw {
		grid-area: art;
		width: var(--draw-w);
	}

	.hero-slide__where {
		display: flex;
		grid-area: where;
		justify-content: center;
		margin-bottom: var(--space-3);
		color: var(--color-slate);
		font-size: 0.8125rem;
		line-height: 1.35;
	}

	.hero-slide__where .icon { flex: none; color: var(--color-blue); }

	/* The search box is the ground the building stands on: it rises over just
	   the foot of the boundary wall, so the gate and the street sign stay in view
	   and the building reads as standing on it rather than sunk into it. Set as a
	   share of the drawing's width so it lands the same on every phone. */
	.hero-mobile {
		position: relative;
		z-index: 1;
		grid-area: find;
		width: 100%;
		margin-top: calc(var(--draw-w) * -0.12);
	}

	.hero-find input { box-shadow: 0 0 0 1px var(--color-line), 0 6px 16px rgb(21 41 124 / 0.08); }

	.hero-find input:focus-visible { outline-color: rgb(10 108 241 / 0.45); }
}

/* Two pieces take turns in one space: the building, then the logo. The building
   is always in the flow, so it sets the size; the logo is laid over it and
   centred in the part above the search box. Only one is shown at a time, and
   the hidden one has its animations cleared, so it draws from the start when
   its turn comes (assets/js/site.js). */
.building-draw { position: relative; }

.draw-piece__frame { position: relative; }

.draw-piece--logo {
	position: absolute;
	inset: 0 -14% calc(var(--draw-w, 13rem) * 0.14);
	display: none;
	align-items: center;
}

.building-draw.is-logo .draw-piece--logo { display: flex; }
.building-draw.is-logo .draw-piece--logo .draw-piece__frame { width: 100%; }

.building-draw.is-logo .draw-piece--building { visibility: hidden; }
.building-draw.is-logo .draw-piece--building * { animation: none !important; }

/* Within a piece the two layers share one box: the artwork sets its size, the
   strokes lie over it. */
.draw-art,
.draw-lines {
	display: block;
	width: 100%;
	height: auto;
}

.draw-lines {
	position: absolute;
	inset: 0;
	color: var(--color-navy-deep);
	animation: draw-lines-out 0.6s ease 2.4s forwards;
}

.draw-lines .t { stroke-width: 3.2; }
.draw-lines .m { stroke-width: 4.6; }
.draw-lines .b { stroke-width: 6.5; }

/* Each stroke is normalised to length 1 (pathLength), so one dash value draws
   any of them. Layers set when a pass starts, bands carry it up the drawing. */
.draw-lines path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw-stroke var(--draw-for, 0.6s) cubic-bezier(0.55, 0.1, 0.3, 1) calc(var(--layer-at, 0s) + var(--band-at, 0s)) forwards;
}

.draw-lines .bl1 { --layer-at: 0s; --draw-for: 0.9s; }
.draw-lines .bl2 { --layer-at: 0.7s; --draw-for: 0.7s; }
.draw-lines .bl3 { --layer-at: 1.3s; --draw-for: 0.5s; }
.draw-lines .bb1 { --band-at: 0.18s; }
.draw-lines .bb2 { --band-at: 0.36s; }
.draw-lines .bb3 { --band-at: 0.54s; }

/* The logo: one even line (its outlines are all one weight), four passes from
   the hands and the name up to the flame and the arched lettering, then the
   finished line art settles in under them. */
.draw-piece--logo .draw-lines path { stroke-width: 6; }
.draw-piece--logo .draw-lines { animation-delay: 2.5s; }
.draw-piece--logo .bl1 { --layer-at: 0s; --draw-for: 0.8s; }
.draw-piece--logo .bl2 { --layer-at: 0.5s; --draw-for: 0.7s; }
.draw-piece--logo .bl3 { --layer-at: 1s; --draw-for: 0.6s; }
.draw-piece--logo .bl4 { --layer-at: 1.35s; --draw-for: 0.55s; }
.draw-piece--logo .draw-art { animation-delay: 2.2s; }

.draw-art {
	opacity: 0;
	animation: draw-art-in 0.7s ease 2.1s forwards;
}

@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
@keyframes draw-art-in { to { opacity: 1; } }
@keyframes draw-lines-out { to { opacity: 0; } }

/* The loop: the finished piece fades, every animation is cleared for one
   frame, and the other piece starts drawing. Off screen it freezes. */
.building-draw.is-leaving .draw-art { animation: draw-art-out 0.8s ease forwards; }

.building-draw.is-reset,
.building-draw.is-reset * { animation: none !important; }

.building-draw.is-paused,
.building-draw.is-paused * { animation-play-state: paused !important; }

@keyframes draw-art-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* For anyone who has asked for less motion, the building is simply there from
   the start, and the logo never takes its turn. */

@media (prefers-reduced-motion: reduce) {
	.draw-lines { display: none; }

	.draw-art {
		opacity: 1;
		animation: none;
	}
}

@media (min-width: 60rem) {
	.hero-slide__where,
	.hero-slide__actions { display: flex; }

	.hero-slide__lead,
	.hero__search-wrap { display: block; }

	.hero-slide__title { font-size: var(--text-display); }

	.hero-mobile { display: none; }
}

/* Desktop: the same drawing, in navy on the light first slide, in place of
   its photograph. It stands on the right, its foot fading into the
   page's white where the search card crosses the slide's edge, so the card
   reads as the ground again. */
@media (min-width: 60rem) {
	.hero-slide:first-child .hero-slide__media { display: none; }

	.hero-slide:first-child .hero-slide__inner { position: static; }

	/* Sized by the slide's height, not its width: top to the search card. */
	.hero-slide:first-child .hero-slide__text { --draw-w: 13rem; }

	.hero-slide:first-child .building-draw {
		position: absolute;
		top: var(--space-6);
		right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--space-10)));
		bottom: calc(var(--search-card-h) / 2 - var(--space-2));
		z-index: 1;
		width: auto;
		aspect-ratio: 560 / 999;
	}
}

/* Desktop, first slide, in daylight: white paper warming to the pale blue of the
   phone hero, navy words, and the building drawn in navy on the right, standing
   in two soft circles. Navy is kept for the type, the drawing and the buttons,
   where it carries the brand, instead of being poured over the whole slide. */
@media (min-width: 60rem) {
	.hero-slide:first-child {
		background:
			radial-gradient(70% 90% at 0% 0%, var(--color-white) 0%, rgb(255 255 255 / 0) 70%),
			linear-gradient(100deg, var(--color-white) 0%, var(--color-sky-tint) 100%);
		color: var(--color-ink);
		overflow: clip; /* the circles stay on this slide when the next one slides in */
	}

	.hero-slide:first-child .hero-slide__where { color: var(--color-slate); }
	.hero-slide:first-child .hero-slide__where .icon { color: var(--color-blue); }
	.hero-slide:first-child .hero-slide__title { color: var(--color-navy); }
	.hero-slide:first-child .hero-slide__title-accent { color: var(--color-blue); }
	.hero-slide:first-child .hero-slide__lead { color: var(--color-slate); }

	.hero-slide:first-child .btn--outline-inverse {
		border-color: var(--color-navy);
		color: var(--color-navy);
	}

	.hero-slide:first-child .btn--outline-inverse:hover {
		border-color: var(--color-navy);
		background: var(--color-navy);
		color: var(--color-white);
	}

	.hero-slide:first-child :focus-visible { outline-color: var(--color-blue); }

	/* Two circles behind the building, centred on it: a wide pale ring and a
	   deeper disc inside it. The slide's foot cuts them off, so the building
	   reads as rising out of them. */
	.hero-slide:first-child .building-draw::before {
		content: "";
		position: absolute;
		top: 4%;
		left: 50%;
		z-index: -1;
		width: 215%;
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(circle closest-side, #d5e3fb 0 70%, #e2ecfd 70% 100%);
		transform: translateX(-50%);
	}

	/* While the light slide shows, the arrows and dots turn white and navy. */
	.hero:has(.hero-slide:first-child.is-active) .hero__arrow {
		border-color: var(--color-line);
		background: var(--color-white);
		box-shadow: 0 0.25rem 0.75rem -0.25rem rgb(21 41 124 / 0.3);
		color: var(--color-navy);
	}

	.hero:has(.hero-slide:first-child.is-active) .hero__arrow:hover { background: var(--color-sky-tint); }
	.hero:has(.hero-slide:first-child.is-active) .hero__dot { background: rgb(21 41 124 / 0.28); }
	.hero:has(.hero-slide:first-child.is-active) .hero__dot.is-active { background: var(--color-navy); }
	.hero:has(.hero-slide:first-child.is-active) :focus-visible { outline-color: var(--color-blue); }
}

/* Slider controls. On a phone the dots sit on the photograph, bottom right,
   and the arrows stand down: a swipe is the gesture there anyway. */
.hero__controls {
	position: absolute;
	right: 0;
	bottom: var(--space-4);
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
}

.hero__controls { display: none; }
.hero__arrow { display: none; }

@media (min-width: 60rem) {
	.hero__controls {
		/* Above the white fade and the half of the search card that overlaps the slider. */
		display: flex;
		bottom: calc(var(--search-card-h) / 2 + var(--space-8));
		/* Clear of the drawing that stands at the right of the first slide. */
		padding-right: calc(var(--space-10) + 15rem);
	}

	.hero__arrow { display: grid; }
}

.hero__arrow {
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: 50%;
	background: rgb(255 255 255 / 0.12);
	color: var(--color-white);
	transition: background-color var(--duration) var(--ease);
}

.hero__arrow:hover { background: rgb(255 255 255 / 0.26); }

.hero__dots {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* The dot keeps a 28px tap target at all sizes and shrinks with a transform,
 * so switching slides never makes the browser redo layout. */
.hero__dot {
	width: 1.75rem;
	height: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.45);
	transform: scaleX(0.36);
	transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.hero__dot.is-active {
	background: var(--color-white);
	transform: scaleX(1);
}

.hero :focus-visible { outline-color: var(--color-white); }

/* Patient search bar. On a phone it follows the slider as its own block, the
   way a reception desk sits past the doorway; from tablet up it straddles the
   slider's bottom edge. */
.hero__search-wrap {
	position: relative;
	z-index: 2;
	margin-top: var(--space-5);
}

@media (min-width: 60rem) {
	/* Room under the card so its shadow settles before the fact band starts,
	   instead of the card sitting on the band's top rule. */
	.hero__search-wrap {
		margin-top: calc(var(--search-card-h) / -2);
		margin-bottom: var(--space-8);
	}
}

/* On a phone the two fields share a row and their labels are read out rather
   than drawn: the icon and the placeholder already say what each one is, and
   the card has to stay inside the first screen to be any use. */
.patient-search {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: 0 2px 4px rgb(21 41 124 / 0.06), 0 18px 40px rgb(21 41 124 / 0.14);
}

.patient-search__submit { grid-column: 1 / -1; }

@media (min-width: 40rem) {
	.patient-search {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-4);
		padding: var(--space-5);
	}
}

@media (min-width: 60rem) {
	.patient-search {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--space-5);
		padding: var(--space-6);
	}
}

.patient-search__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.patient-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 40rem) {
	.patient-search__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		color: var(--color-navy);
		font-size: 0.875rem;
		font-weight: 600;
		white-space: normal;
	}
}

.patient-search__control {
	position: relative;
	display: flex;
	align-items: center;
}

/* Narrow gutter on a phone so two fields fit one row. The text itself stays at
   16px: anything smaller and iOS zooms the page the moment the field is tapped. */
.patient-search__control .icon {
	position: absolute;
	left: 0.5rem;
	color: var(--color-slate);
	pointer-events: none;
}

.patient-search__control .icon {
	width: 1.0625rem;
	height: 1.0625rem;
}

.patient-search__control :is(select, input) {
	padding-right: var(--space-2);
	padding-left: 1.875rem;
}

/* A search input reserves room for the browser's own clear button even while it
   is empty, which was clipping the last letter of the placeholder. */
.patient-search__control input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
}

.patient-search__control input[type="search"]::-webkit-search-decoration,
.patient-search__control input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
	-webkit-appearance: none;
}

@media (min-width: 40rem) {
	.patient-search__control .icon {
		left: 0.875rem;
		width: 1.25rem;
		height: 1.25rem;
	}

	.patient-search__control :is(select, input) {
		padding-right: var(--space-4);
		padding-left: 2.875rem;
	}
}

.patient-search__submit { width: 100%; }

@media (min-width: 60rem) {
	/* Back in the row with the two fields, not spanning under them. */
	.patient-search__submit {
		grid-column: auto;
		width: auto;
		min-width: 11rem;
	}
}

/* Key facts, below the search bar */
.facts { margin-top: var(--space-12); }

/* Why families choose us */
.why-us__item {
	display: flex;
	gap: var(--space-4);
}

.why-us__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.why-us__title {
	margin: 0;
	font-size: 1.375rem;
}

.why-us__body p {
	color: var(--color-slate);
	font-size: 0.96875rem;
	line-height: 1.55;
}

/* Appointments */
.appointment {
	display: grid;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 60rem) {
	.appointment { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); }
}

.appointment__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.appointment__methods {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.appointment__methods li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.appointment__label {
	display: block;
	color: var(--color-slate);
	font-size: var(--text-small);
}

.appointment__value {
	color: var(--color-navy);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

.appointment__value:hover { color: var(--color-blue); }

.appointment__placeholder,
.appointment__form .ff-form-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: clamp(1.25rem, 0.89rem + 1.48vw, 1.75rem);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-rest);
}

.appointment__placeholder h3 { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}