/* ==========================================================================
   Patient Homepage — page-home.php
   ========================================================================== */

:root {
	--lph-teal:       #008585;
	--lph-teal-dark:  #006b6b;
	--lph-teal-light: #eaf5f3;
	--lph-purple:     #3b3177;
	--lph-text:       #333333;
	--lph-muted:      #555;
	--lph-border:     #e0e0e0;
	--lph-bg:         #F2F9F9;
	--lph-white:      #fff;
	--lph-radius:     8px;
	--lph-font:       'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--lph-max:        1140px;
	--lph-shadow:     0 2px 16px rgba(0,0,0,.08);
					

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: var(--lph-font);
	color: var(--lph-text);
	line-height: 1.6;
	background: linear-gradient(180deg, #F2F9F9 -10%, #fff 100%);
	background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   Shared button
   -------------------------------------------------------------------------- */

.lph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: var(--lph-radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .18s, color .18s, border-color .18s;
	white-space: nowrap;
}

.lph-btn--green {
	background: var(--lph-teal);
	color: var(--lph-white);
}
.lph-btn--green:hover { background: var(--lph-teal-dark); }

.lph-btn--white {
	background: var(--lph-white);
	color: var(--lph-teal);
}
.lph-btn--white:hover { background: #f0faf8; }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.lph-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--lph-white);
	border-bottom: 1px solid var(--lph-border);
}

.lph-nav__inner {
	max-width: var(--lph-max);
	margin: 0 auto;
	padding: 0 32px;
	height: 72px;
	display: flex;
	align-items: center;
	gap: 32px;
}

.lph-nav__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.lph-nav__links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.lph-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 600;
	font-family: var(--lph-font);
	color: #333;
	text-decoration: none;
	border-radius: 8px;
	transition: color .15s, background .15s;
}
.lph-nav__link:hover { color: var(--lph-teal); }
.lph-nav__link--active { color: var(--lph-teal); }

.lph-nav__cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.lph-nav__login {
	font-size: 15px;
	font-weight: 600;
	font-family: var(--lph-font);
	color: #333;
	text-decoration: none;
	transition: color .15s;
}
.lph-nav__login:hover { color: var(--lph-teal); }

.lph-btn--teal {
	background: var(--lph-teal);
	color: var(--lph-white);
	font-family: var(--lph-font);
	font-size: 15px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: background .15s;
}
.lph-btn--teal:hover { background: var(--lph-teal-dark); }

.lph-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	margin-left: auto;
}
.lph-nav__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #333;
	border-radius: 2px;
	transition: background .15s;
}

.lph-nav__search-icon {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--lph-muted);
	display: flex;
	align-items: center;
	padding: 4px;
}
.lph-nav__search-icon:hover { color: var(--lph-teal); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* Transparent so the body wash shows through, rather than a flat block that
   ends in a visible seam above the cards. */
.lph-hero {
	background: transparent;
	padding: 100px 24px 90px;
	text-align: center;
}

.lph-hero__inner {
	max-width: var(--lph-max);
	margin: 0 auto;
}

.lph-hero__headline {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	font-family: var(--lph-font);
	color: #333333;
	line-height: 1.25;
	margin-bottom: 36px;
}

/* A highlighter stroke behind one word. The gradient stops keep the band short
   of the full line box, the way a marker sits across x-height rather than
   filling the leading — a plain background-color reads as a solid label. */
.lph-hero__mark {
	background: linear-gradient(180deg, transparent 14%, #cfe7e3 14%, #cfe7e3 86%, transparent 86%);
	padding: 0 6px;
}

/* Search bar */

.lph-search-bar {
	display: flex;
	align-items: center;
	background: var(--lph-white);
	border: 2px solid #E5F3F3;
	border-radius: 16px;
	padding: 5px 5px 5px 15px;
	max-width: 756px;
	margin: 0 auto;
	box-shadow: 0px 8px 30px 0px #005A521F;
	gap: 12px;
}

.lph-search-bar__icon { color: var(--lph-muted); flex-shrink: 0; }

.lph-search-bar input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	font-size: 16px;
	font-family: var(--lph-font);
	font-weight: 500;
	color: var(--lph-text);
	background: transparent;
}
.lph-search-bar input::placeholder { color: #aaa; }

/* A square icon button, not a worded one — at 756px wide the field is clearly a
   search box already, and the design gives the action back its space. */
.lph-search-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--lph-teal);
	color: var(--lph-white);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	font-family: var(--lph-font);
	transition: background .18s;
	flex-shrink: 0;
}
.lph-search-bar__btn:hover { background: var(--lph-teal-dark); }

/* Autocomplete */
.lph-search-bar { position: relative; }

.lph-ac {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--lph-white);
	border: 1px solid var(--lph-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 500;
	overflow: hidden;
	/* ensure it escapes any flex context */
	width: 100%;
}

.lph-ac__item {
	padding: 11px 18px;
	font-size: 14px;
	font-family: var(--lph-font);
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lph-text);
	transition: background .12s;
}
.lph-ac__item + .lph-ac__item { border-top: 1px solid #f0f0f0; }
.lph-ac__item:hover,
.lph-ac__item--active { background: var(--lph-bg); color: var(--lph-teal); }
.lph-ac__item svg { color: var(--lph-teal); flex-shrink: 0; }

.lph-autocomplete {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid var(--lph-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 500;
	overflow: hidden;
}
.lph-autocomplete li {
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	color: var(--lph-text);
	transition: background .12s;
}
.lph-autocomplete li + li { border-top: 1px solid #f0f0f0; }
.lph-autocomplete li:hover,
.lph-autocomplete li.lph-ac--active { background: var(--lph-bg); color: var(--lph-teal); }

/* --------------------------------------------------------------------------
   FEATURES (Search / Compare / Book)
   -------------------------------------------------------------------------- */

/* Transparent, and no closing border: the section sits on the body wash and the
   cards provide their own edges. */
.lph-features {
	background: transparent;
	padding: 0 24px 80px;
}

.lph-features__inner {
	max-width: var(--lph-max);
	margin: 0 auto;
}

/* Three 370px cards across a 1140 container: 3 x 370 = 1110, leaving 30 for two
   gaps. Equal fractions rather than fixed widths so the row still fills the
   container exactly if --lph-max is ever retuned. */
.lph-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	max-width: var(--lph-max);
	margin: 0 auto;
}

.lph-features__item {
	display: flex;
	flex-direction: column;
	min-height: 180px;
	padding: 28px;
	border: none;
	border-radius: 16px;
	background: #f2f9f9;
}

/* Icon inline with the heading; the copy runs the full width beneath, rather
   than being indented into a column beside the icon. */
.lph-features__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.lph-features__icon {
	flex-shrink: 0;
	color: #333333;
}

.lph-features__item strong {
	font-size: 24px;
	font-weight: 600;
	color: #333333;
	line-height: 1.3;
}

.lph-features__item p {
	font-size: 18px;
	color: #333333;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Shared section wrapper
   -------------------------------------------------------------------------- */

.lph-section { padding: 72px 24px; }

.lph-section__inner {
	max-width: var(--lph-max);
	margin: 0 auto;
}

.lph-section__title {
	font-size: 38px;
	font-weight: 600;
	font-family: var(--lph-font);
	text-align: center;
	margin-bottom: 10px;
	color: var(--lph-text);
}

.lph-section__title--left { text-align: left; }

.lph-section__sub {
	text-align: center;
	color: var(--lph-muted);
	font-size: 14px;
	max-width: 540px;
	margin: 0 auto 40px;
}

.lph-section__sub--left {
	text-align: left;
	margin-left: 0;
	margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.lph-testimonials {
	background: var(--lph-bg);
}
/* --------------------------------------------------------------------------
   BODY MAP SECTION
   -------------------------------------------------------------------------- */

.lph-body-section { background: var(--lph-white); }

.lph-body-section .lph-section__title { margin-bottom: 10px; }
.lph-body-section .lph-section__sub   { margin-bottom: 48px; }

.lph-body-section__inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 64px;
	align-items: start;
}

/* ── Condition list ── */
.lph-conditions-col { position: relative; }

.lph-conditions {
	list-style: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: max-height .35s ease;
}

.lph-conditions__item {
	position: relative;      /* anchor for the stretched link below */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 14px;
	border-radius: 10px;
	border-bottom: 1px solid #e5e5e5;
	cursor: pointer;
	transition: background .18s, border-color .18s;
}

/* The active row is a filled pill, so its divider would cut across the fill. */
.lph-conditions__item--active { border-bottom-color: transparent; }

.lph-conditions__arrow {
	flex-shrink: 0;
	color: transparent;
	transform: translateX(-4px);
	transition: color .18s, transform .18s;
}

.lph-conditions__item a {
	font-size: 15px;
	line-height: 1.3;
	color: #222;
	text-decoration: none;
	font-weight: 500;
	/* The whole row is the hit area — the anchor is stretched over it rather
	   than made inert, so the destination still shows in the status bar and
	   the link stays keyboard-reachable and openable in a new tab. */
	position: static;
}

.lph-conditions__item a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.lph-conditions__item:hover,
.lph-conditions__item--active { background: #e8f4f4; }

.lph-conditions__item:hover a,
.lph-conditions__item--active a {
	color: var(--lph-teal);
	font-weight: 600;
}

.lph-conditions__item:hover .lph-conditions__arrow,
.lph-conditions__item--active .lph-conditions__arrow {
	color: var(--lph-teal);
	transform: none;
}

.lph-conditions__item a:focus-visible {
	outline: 2px solid var(--lph-teal);
	outline-offset: 3px;
	border-radius: 10px;
}

/* ── Show more ── */
/* Fades the last rows of the collapsed list so it reads as continuing rather
   than ending. pointer-events:none keeps it from swallowing clicks on the
   rows underneath it. */
.lph-conditions-col::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 54px;
	height: 84px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--lph-white));
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s;
}

.lph-conditions-col.is-collapsed::after { opacity: 1; }

.lph-conditions__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 9px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--lph-teal);
	background: var(--lph-white);
	border: 1px solid var(--lph-teal);
	border-radius: 999px;
	cursor: pointer;
	position: relative;
	transition: background .18s, color .18s;
}

/* Author display beats the [hidden] UA rule on specificity, so the attribute
   has to be honoured explicitly or the button shows before JS collapses. */
.lph-conditions__more[hidden] { display: none; }

.lph-conditions__more:hover {
	background: var(--lph-teal);
	color: var(--lph-white);
}

.lph-conditions__chevron { transition: transform .25s; }
.lph-conditions__more[aria-expanded="true"] .lph-conditions__chevron { transform: rotate(180deg); }

/* ── Front / Back toggle ── */
.lph-body-toggle {
	display: inline-flex;
	padding: 4px;
	margin: 0 auto 8px;
	background: #f1f4f4;
	border-radius: 999px;
}

.lph-body-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lph-body-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 26px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #4a5757;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
}

.lph-body-toggle__btn.is-active {
	color: var(--lph-teal);
	background: var(--lph-white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* The tick only marks the active side. Collapsing its width rather than
   hiding it keeps both buttons from shifting as the selection moves. */
.lph-body-toggle__check {
	width: 0;
	opacity: 0;
	transition: width .2s, opacity .2s;
}

.lph-body-toggle__btn.is-active .lph-body-toggle__check {
	width: 15px;
	opacity: 1;
}

.lph-body-toggle__btn:focus-visible {
	outline: 2px solid var(--lph-teal);
	outline-offset: 2px;
}

/* ── Body map container ── */
/* SVG viewBox 700×600. Image 299×600 occupies the center (x=200..499).
   Container uses aspect-ratio to lock height so the absolute SVG aligns. */
.lph-body-map {
	position: relative;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	aspect-ratio: 700 / 600;
}

/* Front and back are stacked in the same box so switching cannot shift the
   layout, and the inactive one is display:none rather than transparent — an
   invisible overlay would otherwise intercept every click meant for the
   visible map. */
.lph-body-map__side {
	display: none;
	position: absolute;
	inset: 0;
}

.lph-body-map__side.is-active { display: block; }

/* Image sits in the horizontal center of the 700px canvas */
.lph-body-map__img {
	position: absolute;
	/* left offset = 200/700 = 28.57%, width = 299/700 = 42.71% */
	left: 28.57%;
	width: 42.71%;
	top: 0;
	height: 100%;
	object-fit: contain;
	object-position: top center;
}

/* SVG fills the full container */
.lph-body-map__svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.lph-dot-group text {
	font-family: inherit;
	/* Selecting the labels only ever produces a stray highlight while the
	   pointer is being dragged across the figure. */
	user-select: none;
}

/* Scaled up at the narrow breakpoint. fill-box makes the origin the pill's own
   box rather than the whole 700×600 canvas, and anchoring it to the edge facing
   the body means the label grows away from the figure instead of across it. */
.lph-dot-group__label {
	transform-box: fill-box;
	transition: transform .2s;
}

.lph-dot-group__label--left  { transform-origin: right center; }
.lph-dot-group__label--right { transform-origin: left center; }

.lph-dot-group:focus-visible {
	outline: 2px solid var(--lph-teal);
	outline-offset: 2px;
	border-radius: 4px;
}


.lph-dot-group {
	cursor: pointer;
	pointer-events: all;
}

/* Dot groups — default state */
.lph-dot-group rect {
	fill: white;
	stroke: #d0d0d0;
	transition: fill .2s, stroke .2s;
}

.lph-dot-group text {
	fill: #333;
	transition: fill .2s;
}

.lph-dot-group circle:last-of-type {
	fill: #008585;
	transition: fill .2s;
}

.lph-dot-group circle:first-of-type {
	fill: white;
	stroke: #008585;
	transition: fill .2s, stroke .2s;
}

.lph-dot-group line {
	stroke: #008585;
	transition: stroke .2s;
}

/* Active / hover dot group */
.lph-dot-group--active rect,
.lph-dot-group:hover rect {
	fill: #e6f7f7;
	stroke: #008585;
}

.lph-dot-group--active text,
.lph-dot-group:hover text {
	fill: #008585;
	font-weight: 600;
}

.lph-dot-group--active circle:first-of-type,
.lph-dot-group:hover circle:first-of-type {
	stroke: #005f5f;
}

.lph-dot-group--active circle:last-of-type,
.lph-dot-group:hover circle:last-of-type {
	fill: #005f5f;
}

/* --------------------------------------------------------------------------
   OUR PHYSIOTHERAPISTS
   -------------------------------------------------------------------------- */

.lph-pracs { background: var(--lph-white); }

.lph-pracs__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 40px;
}

.lph-prac {
	position: relative;          /* anchor for the stretched link */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 26px 18px 22px;
	background: #f7f8f8;
	border: 1px solid transparent;
	border-radius: 12px;
	transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}

.lph-prac:hover {
	background: var(--lph-white);
	border-color: #dceceb;
	box-shadow: 0 6px 20px rgba(0, 90, 82, .08);
	transform: translateY(-2px);
}

.lph-prac__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin-bottom: 14px;
	border-radius: 50%;
	overflow: hidden;
	background: #e9eeee;
	color: #9aa8a8;
	flex-shrink: 0;
}

.lph-prac__photo img {
	width: 100%;
	height: 100%;
	/* Portraits are uploaded at every shape; cover crops rather than squashing
	   a face, and the top bias keeps heads in frame on a tall photo. */
	object-fit: cover;
	object-position: top center;
	display: block;
}

.lph-prac__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lph-text);
	margin-bottom: 6px;
}

.lph-prac__town {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 13px;
	color: var(--lph-muted);
	margin-bottom: 14px;
	max-width: 100%;
}

.lph-prac__town svg { flex-shrink: 0; color: var(--lph-muted); }

/* Towns run long — "Richmond upon Thames, London" — and a wrapped one would
   make a single card taller than the rest of its row. */
.lph-prac__town span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lph-prac__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--lph-teal);
	text-decoration: none;
}

.lph-prac__link svg { transition: transform .18s; }
.lph-prac:hover .lph-prac__link svg { transform: translateX(3px); }

/* Covers the card, so the whole thing is clickable on one tab stop. */
.lph-prac__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.lph-prac__link:focus-visible::after {
	outline: 2px solid var(--lph-teal);
	outline-offset: 2px;
}

/* Names the destination for anyone hearing the link out of context, where
   twenty identical "View profile" links would be useless. */
.lph-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lph-pracs__more {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.lph-btn--outline {
	background: var(--lph-white);
	color: var(--lph-teal);
	border: 1px solid #cfe0df;
	font-weight: 600;
	padding: 12px 26px;
}

.lph-btn--outline:hover {
	background: var(--lph-teal);
	border-color: var(--lph-teal);
	color: var(--lph-white);
}

/* --------------------------------------------------------------------------
   INSURANCE PLANS
   -------------------------------------------------------------------------- */

.lph-insurers { background: var(--lph-bg); }

.lph-insurers__grid {
	list-style: none;
	display: grid;
	/* auto-fit rather than a fixed five: the list is data-driven, and a hard
	   column count would strand the last row when an insurer is added. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 28px 20px;
	margin-top: 40px;
	justify-items: center;
}

.lph-insurers__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 76px;
	padding: 10px 14px;
	border-radius: 10px;
	transition: background .18s, transform .18s;
}

.lph-insurers__link:hover {
	background: var(--lph-white);
	transform: translateY(-2px);
}

.lph-insurers__link:focus-visible {
	outline: 2px solid var(--lph-teal);
	outline-offset: 2px;
}

/* The logos are supplied at wildly different aspect ratios, so they are bounded
   on both axes and left to letterbox inside that box — sizing on width alone
   made the tall ones tower over the wide ones. */
.lph-insurers__logo {
	max-width: 100%;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   HEALTH JOURNAL
   -------------------------------------------------------------------------- */

.lph-journal { background: var(--lph-bg); }

.lph-journal__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 32px;
}

.lph-journal__card {
	background: var(--lph-white);
	border-radius: 10px;
	border: 1px solid var(--lph-border);
	overflow: hidden;
}

.lph-journal__card--placeholder {
	height: 220px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: lph-shimmer 1.5s infinite;
}

@keyframes lph-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   LIST YOUR CLINIC
   -------------------------------------------------------------------------- */

.lph-cta {
	background: var(--lph-white);
	padding: 24px 24px 80px;
}

.lph-cta__panel {
	max-width: var(--lph-max);
	margin: 0 auto;
	background: var(--lph-bg);
	border-radius: 24px;
	display: grid;
	/* The image keeps its natural 419px; the copy takes what is left. Sizing the
	   image column in fr instead would let it stretch on a wide screen and crop
	   the subject out of frame. */
	grid-template-columns: 1fr auto;
	align-items: center;
	overflow: hidden;
}

/* Padding lives on the copy, not the panel, so the photo can sit flush against
   the panel's top, bottom and right edges the way the design has it. */
.lph-cta__body { padding: 56px 40px 56px 62px; }

.lph-cta__eyebrow {
	font-size: 15px;
	font-weight: 600;
	color: var(--lph-muted);
	margin-bottom: 10px;
}

.lph-cta__title {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--lph-text);
	margin-bottom: 26px;
	max-width: 14em;
}

.lph-cta__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px;
}

.lph-cta__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lph-text);
}

/* Nudged down to sit on the first line's centre rather than its box, and kept
   from shrinking when the text beside it wraps. */
.lph-cta__list svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--lph-teal);
}

.lph-cta__btn { padding: 13px 26px; font-size: 15px; }

.lph-cta__media { align-self: stretch; display: flex; }

.lph-cta__media img {
	display: block;
	width: 419px;
	max-width: 100%;
	height: auto;
	/* The artwork carries its own rounded corners, so it reads as a card sitting
	   in the panel; the panel's overflow clip takes care of the right-hand pair. */
	align-self: center;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.lph-footer {
	background: #3a3a3a;
	color: rgba(255,255,255,.75);
	padding: 52px 24px 0;
}

.lph-footer__inner {
	max-width: var(--lph-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 180px 1fr 200px 200px;
	gap: 48px;
	padding-bottom: 48px;
	align-items: start;
}

/* Brand col */
.lph-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lph-footer__logo {
	display: inline-flex;
	align-items: center;
	margin-bottom: 20px;
	text-decoration: none;
}

.lph-footer__social {
	display: flex;
	gap: 10px;
}

.lph-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--lph-teal);
	color: var(--lph-teal);
	transition: background .18s, color .18s;
}
.lph-footer__social a:hover {
	background: var(--lph-teal);
	color: #fff;
}

/* Wide col (Browse by Area) */
.lph-footer__col--wide h4 { margin-bottom: 18px; }

.lph-footer__two-col {
	list-style: none;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}

/* All cols */
.lph-footer__col h4 {
	font-size: 12px;
	font-weight: 700;
	font-family: var(--lph-font);
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--lph-white);
	margin-bottom: 14px;
}

.lph-footer__col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lph-footer__col ul a {
	font-size: 13px;
	font-family: var(--lph-font);
	color: rgba(255,255,255,.65);
	text-decoration: none;
	transition: color .18s;
}
.lph-footer__col ul a:hover { color: var(--lph-teal); }

.lph-footer__bottom {
	max-width: var(--lph-max);
	margin: 0 auto;
	padding: 16px 0;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: 12px;
	font-family: var(--lph-font);
	color: rgba(255,255,255,.35);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Two 370-ish cards fit here; three would squeeze the copy to three words a
	   line before the 768px single-column rule takes over. */
	.lph-features__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
	.lph-hero { padding: 72px 24px 64px; }

	.lph-footer__inner { grid-template-columns: 160px 1fr 1fr; gap: 32px; }
	.lph-footer__col:last-child { grid-column: 3; }

	.lph-pracs__grid { grid-template-columns: repeat(3, 1fr); }

	/* The photo is a fixed 419px, so below roughly 1000px the copy column gets
	   squeezed long before the panel itself runs out of room. Letting the image
	   shrink buys that width back while keeping both columns. */
	.lph-cta__body { padding: 44px 28px 44px 40px; }
	.lph-cta__media img { width: 340px; }
}

@media (max-width: 768px) {
	.lph-features__grid { grid-template-columns: 1fr; max-width: 420px; }
	.lph-testimonials__grid { grid-template-columns: 1fr; }
	.lph-body-section__inner { grid-template-columns: 1fr; gap: 32px; }

	/* The map is the whole section on a phone — the condition list is dropped and
	   the figure keeps its labels, so it reads the same as on desktop. */
	.lph-conditions-col { display: none; }

	.lph-body-col { width: 100%; }

	/* Two things buy back the width the labels need.

	   First, the canvas is cropped to what is actually drawn in it. The 700-unit
	   viewBox has ~72 units of dead margin on the left and ~40 on the right; the
	   real content, once the labels below are enlarged, spans x=68..662 (measured
	   from the rendered pills, not estimated). Cropping to that is worth about
	   1.18×. It is done by oversizing the inner canvas and clipping it rather
	   than by rewriting viewBox at a breakpoint, which would put the same
	   geometry in two places. 700/594 = 117.85%, offset -68/594.

	   Second, the labels are scaled about the edge that faces the body, so they
	   grow outward into that reclaimed margin instead of over the figure. 1.4 is
	   the ceiling: the closest pair vertically (wrist and groin) are 33 units
	   apart and a pill is 22 tall, so beyond 1.5 they would collide. */
	.lph-body-map {
		aspect-ratio: 594 / 600;
		overflow: hidden;
	}

	.lph-body-map__side {
		left: -11.45%;
		right: auto;
		width: 117.85%;
	}

	.lph-dot-group__label { transform: scale(1.4); }

	/* Fingers, not a cursor. */
	.lph-dot-group circle:first-of-type { r: 9; }
	.lph-dot-group circle:last-of-type  { r: 4.5; }
	.lph-journal__grid { grid-template-columns: 1fr; }

	/* Two across, not one: these cards are a name and a town, so a single column
	   would make eight of them a very long scroll for very little content. */
	.lph-pracs__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

	/* Stacked, with the photo second: the heading and the three reasons are the
	   argument, and pushing them below a 460px-tall image would hide them. */
	.lph-cta__panel { grid-template-columns: 1fr; }
	.lph-cta__body { padding: 40px 28px 8px; }
	.lph-cta__title { max-width: none; }
	.lph-cta__media { justify-content: center; padding: 0 28px 32px; }
	.lph-cta__media img { width: 100%; max-width: 419px; }
	.lph-insurers__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px 12px; }

	.lph-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
	.lph-footer__col--brand { grid-column: span 2; }
	.lph-footer__two-col { grid-template-columns: 1fr 1fr; }
	.lph-nav__links { display: none; }
	.lph-nav__cta { display: none; }
	.lph-nav__burger { display: flex; }
}

@media (max-width: 480px) {
	.lph-footer__inner { grid-template-columns: 1fr; }
	.lph-footer__col--brand { grid-column: span 1; }
	.lph-footer__two-col { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   WHAT PATIENTS SAY — real reviews
   Three cards visible with the middle one enlarged. The track is transformed
   rather than scrolled so the enlarged card can overflow its slot vertically
   without a scrollbar appearing.
   -------------------------------------------------------------------------- */

.lph-reviews__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 28px;
}
.lph-reviews__nav[hidden] { display: none; }

.lph-reviews__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--lph-border);
	border-radius: 50%;
	background: var(--lph-white);
	color: var(--lph-teal);
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.lph-reviews__arrow:hover { border-color: var(--lph-teal); background: var(--lph-teal); color: #fff; }
.lph-reviews__arrow:disabled { opacity: .4; cursor: default; background: var(--lph-white); color: var(--lph-teal); border-color: var(--lph-border); }

.lph-reviews__count {
	font-size: 15px;
	font-weight: 500;
	color: #333;
	min-width: 48px;
	text-align: center;
}

/* The window. overflow-x hidden clips the row's ends; overflow-y visible would
   be ignored (a hidden axis forces the other to auto), so the vertical room the
   enlarged middle card needs comes from padding instead. */
/* Full-bleed. The three cards need 1207px (360 + 439 + 360 + two 24px gaps) and
   .lph-section__inner caps at 1140, so the outer two were being clipped by the
   container rather than by design. This breaks out to the viewport width; the
   section clips the overflow so no page-level scrollbar appears. */
.lph-reviews {
	overflow: hidden;
	padding: 30px 0;
	margin: -30px calc(50% - 50vw);
}

/* clip, not hidden: hidden would make the section a scroll container and break
   any position: sticky inside or above it. */
.lph-testimonials { overflow-x: clip; }

/* Centred rather than offset: the active card is placed in the middle of the
   row by home.js, so the browser's own centring puts it under the viewport
   centre with no measurement involved. The row is wider than the window, so the
   two outer cards are clipped evenly — which is the intended look. */
.lph-reviews__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.lph-review[hidden] { display: none; }

.lph-review {
	flex: 0 0 360px;
	width: 360px;
	min-height: 390px;
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: 16px;
	background: var(--lph-white);
	box-shadow: 0 2px 14px rgba(0,0,0,.06);
	transition: width .3s ease, min-height .3s ease, flex-basis .3s ease, box-shadow .3s ease;
}

/* The centred card. Sized here rather than by a wrapper so the growth animates
   alongside the track's own transform. */
.lph-review.is-active {
	flex-basis: 439px;
	width: 439px;
	min-height: 450px;
	box-shadow: 0 6px 26px rgba(0,0,0,.1);
}

.lph-review__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.lph-review__photo {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: #eef2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b6c0c0;
	transition: width .35s ease, height .35s ease;
}
.lph-review.is-active .lph-review__photo { width: 95px; height: 95px; }
.lph-review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lph-review__name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	text-decoration: none;
	line-height: 1.3;
	margin-bottom: 5px;
}
.lph-review__name:hover { color: var(--lph-teal); }
.lph-review.is-active .lph-review__name { font-size: 18px; }

.lph-review__place {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	color: var(--lph-muted);
}
.lph-review.is-active .lph-review__place { font-size: 18px; }

.lph-review__stars { display: flex; gap: 4px; margin-bottom: 14px; }
.lph-review__star { fill: #d9dede; }
.lph-review__star.is-on { fill: var(--lph-teal); }

/* Side cards run 2px smaller than the centred one throughout. */
.lph-review__body {
	flex: 1;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	margin-bottom: 18px;
}
.lph-review.is-active .lph-review__body { font-size: 18px; }

.lph-review__more {
	color: var(--lph-teal);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.lph-review__more:hover { text-decoration: underline; }

.lph-review__foot { margin-top: auto; }

.lph-review__author {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin-bottom: 5px;
}
.lph-review.is-active .lph-review__author { font-size: 16px; }

.lph-review__verified {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lph-teal);
}
.lph-review.is-active .lph-review__verified { font-size: 14px; }

@media (max-width: 900px) {
	/* One card at a time, filling the column — three 360px cards need 1150px of
	   room and there simply isn't any. The enlargement goes with them. */
	.lph-review,
	.lph-review.is-active {
		flex-basis: 100%;
		width: 100%;
		min-height: 0;
	}
	.lph-review.is-active .lph-review__photo { width: 80px; height: 80px; }
	/* One card on screen, so it keeps the centre card's type scale. */
	.lph-review.is-active .lph-review__name,
	.lph-review.is-active .lph-review__place,
	.lph-review.is-active .lph-review__body { font-size: 16px; }
	.lph-review.is-active .lph-review__author { font-size: 14px; }
	.lph-review.is-active .lph-review__verified { font-size: 12px; }
}