/* ==========================================================================
   Graft Hair Clinic
   1. Tokens   2. Base   3. Layout   4. Components   5. Header / footer
   6. Sections (layout only – look comes from components)   7. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
	--gh-ink: #081a28;
	--gh-navy: #33445a;
	--gh-steel: #5c7ba3;
	--gh-steel-light: #6c90bf;
	--gh-slate: #516b8e;
	--gh-muted: #6a7b90;
	--gh-sand: #f3f1ed;
	--gh-sand-light: #f6f3ef;
	--gh-mist: #e9eff3;
	--gh-stone: #e6e4e1;
	--gh-line: #e5e3df;
	--gh-border: #d9d6d1;
	--gh-field: #f8f6f2;
	--gh-page: #f8fafb;
	--gh-white: #fff;

	--gh-font-serif: "Cormorant Garamond", Georgia, serif;
	--gh-font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* 1200px, and on large screens wider so content starts 15px inside the hero's design lines
	   (150px from the screen edges, see .hero::before). */
	--gh-container: max(1200px, calc(100% - 330px));
	--gh-gutter: 24px;
	--gh-section-y: 56px;

	--gh-radius-sm: 8px;
	--gh-radius: 12px;
	--gh-radius-lg: 24px;
	--gh-radius-xl: 40px;

	/* Tokens read by the Grafthair Booking plugin. */
	--gh-color-primary: var(--gh-navy);
	--gh-color-secondary: var(--gh-steel);
	--gh-color-text: var(--gh-ink);
	--gh-color-heading: var(--gh-ink);
	--gh-color-muted: var(--gh-muted);
	--gh-color-sand: var(--gh-sand);
	--gh-color-field: var(--gh-field);
	--gh-color-border: var(--gh-border);
	--gh-font-body: var(--gh-font-sans);
	--gh-font-accent: var(--gh-font-serif);
}

/* 2. Base ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

body {
	margin: 0;
	background: var(--gh-page);
	color: var(--gh-ink);
	font: 400 16px/1.5 var(--gh-font-sans);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--gh-steel);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	z-index: 100;
	top: -100px;
	left: 16px;
	padding: 8px 16px;
	border-radius: var(--gh-radius-sm);
	background: var(--gh-white);
}

.skip-link:focus {
	top: 16px;
}

/* 3. Layout ---------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--gh-container) + var(--gh-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gh-gutter);
}

.container--wide {
	--gh-container: max(1250px, calc(100% - 330px));
}

.section {
	position: relative;
	padding-block: var(--gh-section-y);
	background: var(--gh-sand);
}

/* Soft silk-like light on the beige sections. */
.section--texture {
	background:
		radial-gradient(120% 60% at 85% 10%, rgb(255 255 255 / 0.55), transparent 60%),
		linear-gradient(115deg, transparent 20%, rgb(255 255 255 / 0.35) 35%, transparent 50%),
		var(--gh-sand-light);
}

.section--ruled {
/* 	border-top: 1px solid var(--gh-border); */
}

/* Section with a full-bleed photo behind the content. */
.media-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.media-section__bg {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Section background photos are switched off; the hero keeps its photo/video. */
.section.media-section > .media-section__bg {
	display: none;
}

/* Pause/play for background videos (bottom-right of the section). */
.video-toggle {
	position: absolute;
	z-index: 1;
	right: 24px;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: 50%;
	background: rgb(8 26 40 / 0.35);
	color: var(--gh-white);
	cursor: pointer;
	
}

.video-toggle .icon + .icon,
.video-toggle.is-alt .icon:first-child {
	display: none;
}

.video-toggle.is-alt .icon + .icon {
	display: block;
}

/* Sound on/off sits just left of the pause button. */
.video-toggle--sound {
	right: 72px;
}
.landing-hero .video-toggle {
	display:none;
}

/* 4. Components ------------------------------------------------------------ */

/* Typography */
.title {
	color: var(--gh-ink);
	font: 600 48px/0.94 var(--gh-font-serif);
	letter-spacing: -0.02em;
}

/* The design's body copy is set with -2% tracking. */
.lead,
.card__text,
.surgeon__bio,
.journey__text,
.page-hero__text,
.profile__bio,
.details {
	letter-spacing: -0.02em;
}

.title--xl {
	font-size: 64px;
	line-height: 1;
}

.title--md {
	font-size: 40px;
	line-height: 1.1;
}

.title--sm {
	font-size: 36px;
	line-height: 1.1;
}

.title--xs {
	font-size: 26px;
	line-height: 1.2;
}

.title--light {
	color: var(--gh-white);
}

.lead {
	font-size: 18px;
	line-height: 24px;
	color: var(--gh-navy);
}

.lead--lg {
	color: var(--gh-ink);
	font-size: 20px;
	line-height: 27px;
}

.section-head {
	display: grid;
	gap: 24px;
	justify-items: center;
	text-align: center;
}

/* Titles use designer line breaks; paragraphs follow the design's text-box width per section. */
.section-head .lead {
	max-width: 745px;
}

.surgeons .section-head .lead {
	max-width: 640px;
}

.results .section-head .lead {
	max-width: 750px;
}

.journey .section-head .lead {
	max-width: 580px;
}

.clinic-map .section-head .lead,
.pricing .section-head .lead {
	max-width: 790px;
}

.treatments .section-head .lead {
	max-width: 960px;
}

.section-head .btn {
	font-size: 18px;
}

/* Small pill label above a heading. */
.eyebrow,
.pricing__eyebrow {
	border-radius: 999px;
	background: #e7e3dc;
}

.eyebrow {
	margin-bottom: 20px;
	padding: 3px 20px;
	color: var(--gh-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2em;
}

.section-head--light .eyebrow {
	background: rgb(255 255 255 / 0.2);
}

.section-head--light .eyebrow,
.section-head--light .title,
.section-head--light .lead {
	color: var(--gh-white);
}

.section-head--light .lead {
	font-weight: 600;
}

.section-head--tight {
	gap: 16px;
}

.section-head--tight .title {
	line-height: 50px;
}

.section-head--strong {
	gap: 12px;
}

.section-head--strong .title {
	margin-bottom: 18px;
}

.section-head--strong .lead {
	font-weight: 600;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.tag {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	background: rgb(243 241 237 / 0.85);
	color: var(--gh-navy);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tag--solid {
	padding: 12px 24px;
	border: 0;
	background: linear-gradient(90deg, var(--gh-navy), var(--gh-steel));
	color: var(--gh-white);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Buttons: one base, colour variants set custom properties. */
.btn {
	--btn-bg: var(--gh-navy);
	--btn-fg: var(--gh-white);
	--btn-border: transparent;
	--btn-circle-bg: var(--gh-white);
	--btn-circle-fg: var(--gh-navy);
	--btn-circle: 36px;

	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 53px;
	padding-inline: 24px;
	border: 1px solid var(--btn-border);
	border-radius: 999px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font: 500 16px/1 var(--gh-font-sans);
	white-space: nowrap;
	text-decoration: none;
	transition: filter 0.2s, transform 0.2s;
}

.btn:hover {
	filter: brightness(0.96);
}

.btn:active {
	transform: translateY(1px);
}

.btn--lg {
	--btn-circle: 50px;

	height: 60px;
	padding-inline: 26px;
	font-size: 18px;
}

.btn--has-circle.btn--icon-after {
	padding-right: 4px;
}

.btn--has-circle.btn--icon-before {
	padding-left: 4px;
}

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

.btn__circle {
	display: grid;
	place-items: center;
	width: var(--btn-circle);
	height: var(--btn-circle);
	border-radius: 50%;
	background: var(--btn-circle-bg);
	color: var(--btn-circle-fg);
}

.btn--ink {
	--btn-bg: var(--gh-ink);
}

.btn--white {
	--btn-bg: var(--gh-white);
	--btn-fg: var(--gh-ink);
	--btn-border: #e3e3e3;

	font-weight: 600;
	box-shadow: 0 2px 6px rgb(8 26 40 / 0.06);
}

.btn--light {
	--btn-bg: var(--gh-white);
	--btn-fg: var(--gh-ink);
	--btn-circle-bg: var(--gh-navy);
	--btn-circle-fg: var(--gh-white);
}

.btn--outline {
	--btn-bg: transparent;
	--btn-fg: var(--gh-ink);
	--btn-border: var(--gh-navy);
	--btn-circle-bg: var(--gh-navy);
	--btn-circle-fg: var(--gh-white);
}

.btn--outline-light {
	--btn-bg: transparent;
	--btn-fg: var(--gh-white);
	--btn-border: rgb(255 255 255 / 0.75);

	gap: 10px;
	padding-inline: 38px;
}

.btn--outline-soft {
	--btn-bg: transparent;
	--btn-fg: var(--gh-ink);
	--btn-border: var(--gh-border);
	--btn-circle-bg: var(--gh-navy);
	--btn-circle-fg: var(--gh-white);

	font-weight: 600;
}

.btn--slate {
	--btn-bg: var(--gh-slate);
	--btn-fg: var(--gh-sand);
	--btn-border: rgb(8 26 40 / 0.2);

	height: 48px;
	font-weight: 600;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Framed photo: thin glassy border around a rounded image. */
.frame {
	padding: 24px;
	border: 1px solid rgb(255 255 255 / 0.9);
	border-radius: 14px;
	background: rgb(255 255 255 / 0.2);
	box-shadow: 0 1px 2px rgb(8 26 40 / 0.03);
}

.frame__img {
	width: 100%;
	border-radius: 10px;
	object-fit: cover;
}

/* Square frame with a hairline border (profile pages). */
.frame--line {
	padding: 20px;
	border-color: var(--gh-line);
	border-radius: 2px;
	background: none;
	box-shadow: none;
}

.frame--line .frame__img {
	border-radius: 0;
}

/* Cards */
.card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px;
	border-radius: var(--gh-radius-lg);
}

.card--dark {
	background: linear-gradient(135deg, rgb(51 68 90 / 0.97), rgb(94 126 166 / 0.95));
	color: var(--gh-white);
}

.card--dark .title {
	color: var(--gh-white);
}

.card--light {
	background: var(--gh-white);
	color: var(--gh-navy);
}

.card--white {
	border: 1px solid var(--gh-line);
	background: var(--gh-white);
	color: #4a5568;
}

.card__text {
	font-size: 18px;
	line-height: 26px;
}

/* Small labels */
.badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 18px;
}

.badge--before {
	background: var(--gh-ink);
	color: var(--gh-white);
}

.badge--after {
	background: #e7dfd3;
	color: var(--gh-ink);
}

.badge--ink {
	padding: 6px 12px;
	background: var(--gh-ink);
	color: var(--gh-white);
	font-size: 13px;
	font-weight: 600;
}

.badge--soft {
	padding-block: 1px;
	background: #d5dde6;
	color: var(--gh-navy);
}

.checklist {
	display: grid;
	gap: 10px;
}

.checklist li {
	display: flex;
	gap: 12px;
	font-size: 16px;
	line-height: 20px;
}

.checklist .icon {
	flex-shrink: 0;
	margin-top: 2px;
}

/* Scroll animations (assets/js/main.js adds .has-reveal, then .is-visible as items enter the screen).
   Without JavaScript nothing is hidden. */
:root {
	--gh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal] {
	transition: opacity 0.9s var(--gh-ease), transform 0.9s var(--gh-ease), filter 0.9s var(--gh-ease), clip-path 1.2s var(--gh-ease);
}

[data-reveal="wipe"] {
	clip-path: inset(0 0 0 0);
}

.has-reveal [data-reveal="up"]:not(.is-visible) {
	opacity: 0;
	transform: translateY(32px);
}

.has-reveal [data-reveal="blur"]:not(.is-visible) {
	opacity: 0;
	filter: blur(12px);
}

.has-reveal [data-reveal="wipe"]:not(.is-visible) {
	clip-path: inset(100% 0 0 0);
}

/* Items in a group follow one another. */
[data-reveal-children] > :nth-child(2) { transition-delay: 0.12s; }
[data-reveal-children] > :nth-child(3) { transition-delay: 0.24s; }
[data-reveal-children] > :nth-child(4) { transition-delay: 0.36s; }
[data-reveal-children] > :nth-child(n + 5) { transition-delay: 0.48s; }

/* When GSAP drives the animations (assets/js/motion.js adds .has-motion), the CSS reveals step aside:
   nothing is hidden by them and they don't add transitions that would fight GSAP. */
.has-motion [data-reveal],
.has-motion [data-reveal-children] > * {
	transition: none;
}

.has-motion.has-reveal [data-reveal]:not(.is-visible) {
	opacity: 1;
	filter: none;
	transform: none;
	clip-path: none;
}

/* Heading lines rise from behind a mask (SplitText, which clips each line). Headings use a tight
   line-height, so give each mask a little room below for descenders (g, y, p) while it animates. */
.gh-line-mask {
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

/* Smooth scrolling (Lenis) takes over from the browser's own smooth scrolling. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* Hero: plays once on page load. */
@keyframes gh-blur-in {
	from {
		opacity: 0;
		filter: blur(14px);
	}
}

@keyframes gh-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

.hero__title,
.landing-hero__title {
	animation: gh-blur-in 1.3s var(--gh-ease) 0.2s both;
}

.hero__text,
.landing-hero__text {
	animation: gh-rise 1s var(--gh-ease) 0.55s both;
}

.hero .button-row,
.landing-hero__note,
.landing-hero__form {
	animation: gh-rise 1s var(--gh-ease) 0.75s both;
}

/* 5. Header / footer ------------------------------------------------------- */

/* Sits below the WordPress admin bar when a logged-in user sees it (WordPress sets that variable). */
.site-header {
	--header-gap: 24px;

	position: fixed;
	z-index: 50;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-gap));
	right: 68px;
	left: 68px;
}

.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding: 0 12px 0 26px;
	border-radius: 999px;
	background: var(--gh-white);
	transition: box-shadow 0.3s;
}

.is-scrolled .site-header__bar {
	box-shadow: 0 10px 30px rgb(8 26 40 / 0.12);
}

.site-header__cta {
	font-weight: 600;
}

.site-header__toggle {
	display: none;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--gh-ink);
	cursor: pointer;
}

.site-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.site-nav__list {
	display: flex;
	gap: 25px;
}

.site-nav__list a {
	color: #141414;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.site-nav__list a:hover {
	color: var(--gh-steel);
}

.site-nav__extra {
	display: none;
}

@media (min-width: 1025px) {
	/* Dropdown: sub-items open on hover or keyboard focus (desktop). */
	.site-nav__list .menu-item-has-children {
		position: relative;
	}

	.site-nav__list .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin: 0 0 3px 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.site-nav__list .sub-menu {
		position: absolute;
		z-index: 10;
		top: 100%;
		left: 50%;
		min-width: 250px;
		margin-top: 18px;
		padding: 10px;
		border-radius: var(--gh-radius);
		background: var(--gh-white);
		box-shadow: 0 16px 40px rgb(8 26 40 / 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 6px);
		transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	}

	/* Invisible bridge so the menu stays open while the pointer moves down to it. */
	.site-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 18px;
	}

	.site-nav__list .menu-item-has-children:hover > .sub-menu,
	.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.site-nav__list .sub-menu a {
		display: block;
		padding: 10px 14px;
		border-radius: var(--gh-radius-sm);
		white-space: nowrap;
	}

	.site-nav__list .sub-menu a:hover,
	.site-nav__list .sub-menu .current-menu-item > a {
		background: var(--gh-sand);
		color: var(--gh-ink);
	}
}

.logo {
	display: inline-grid;
	justify-items: center;
	color: var(--gh-navy);
	text-decoration: none;
}

.logo img {
	max-height: 48px;
	width: auto;
}

.logo__mark {
	font: 300 38px/0.9 var(--gh-font-serif);
	letter-spacing: 0.06em;
}

.logo__sub {
	margin-top: 4px;
	font-size: 7px;
	font-weight: 500;
	letter-spacing: 0.45em;
	text-transform: uppercase;
}

.logo--light {
	color: var(--gh-white);
}

/* The header logo turned white for the dark footer, when no separate footer logo is uploaded. */
.logo--light:not(.logo--own) img {
	filter: brightness(0) invert(1);
}

.logo--light img {
	max-height: 64px;
}

.logo--light .logo__mark {
	font-size: 52px;
}

.logo--light .logo__sub {
	margin-top: 10px;
	font-size: 9px;
}

.site-footer {
	padding: 25px 24px 24px;
	background: var(--gh-sand);
}

.site-footer__inner {
	/* Top and bottom rows share these columns: brand / links, menu / copyright, contact / social. */
	--footer-cols: minmax(0, 1fr) 260px 360px;

	position: relative;
	overflow: hidden;
	padding: 80px 80px 88px;
	border-radius: var(--gh-radius-xl);
	/* --footer-shade darkens the footer while it is still sliding in. */
	background:
		linear-gradient(rgb(8 26 40 / var(--footer-shade, 0)), rgb(8 26 40 / var(--footer-shade, 0))),
		var(--gh-slate);
	color: var(--gh-white);
}

/* Faint "G" logo mark on the right, cropped by the footer's bottom edge. */
.site-footer__inner::after {
	content: "";
	position: absolute;
	top: 24px;
	right: 16px;
	width: 400px;
	aspect-ratio: 1684 / 1740;
	background: rgb(8 26 40 / 0.1);
	-webkit-mask: url("../img/g-mark.webp") center / contain no-repeat;
	mask: url("../img/g-mark.webp") center / contain no-repeat;
	pointer-events: none;
}

.site-footer__inner > * {
	position: relative;
	z-index: 1;
}

.site-footer__top,
.site-footer__bottom {
	display: grid;
	grid-template-columns: var(--footer-cols);
	column-gap: 32px;
	align-items: start;
}

.site-footer__tagline,
.site-footer__follow {
	display: none;
}

.site-footer__logos {
	justify-content: flex-start;
	margin-top: 36px;
}

.site-footer__logos li:first-child {
	padding-left: 0;
}

.footer-links {
	display: grid;
	gap: 18px;
	justify-items: start;
}

.footer-links a {
	border-bottom: 1px solid transparent;
	text-decoration: none;
}

.footer-links a:hover,
.footer-links .current-menu-item > a,
.footer-links--inline a {
	border-color: rgb(255 255 255 / 0.7);
}

.footer-links--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.site-footer__contact {
	display: grid;
	gap: 30px;
	align-content: start;
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 300;
	line-height: 1.2;
}

.site-footer__contact li {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.site-footer__contact .icon {
	flex-shrink: 0;
}

.site-footer__contact a {
	white-space: nowrap;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.site-footer__social {
	display: flex;
	gap: 14px;
	justify-self: end;
}

.social-link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gh-navy);
	transition: background-color 0.2s;
}

.social-link:hover {
	background: var(--gh-ink);
}

.site-footer__bottom {
	align-items: center;
	row-gap: 20px;
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid rgb(255 255 255 / 0.15);
	font-size: 14px;
}

.site-footer__bottom .footer-links {
	font-size: 16px;
}

/* Floating WhatsApp button (every page): stays in the bottom-right corner with a pulsing ring. */
.whatsapp-float {
	position: fixed;
	z-index: 60;
	right: 24px;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	color: var(--gh-white);
	box-shadow: 0 8px 24px rgb(8 26 40 / 0.25);
	transition: transform 0.2s;
}

.whatsapp-float:hover {
	transform: scale(1.08);
}

.whatsapp-float::before,
.whatsapp-float::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: 50%;
	background: #25d366;
	animation: gh-whatsapp-pulse 2s ease-out infinite;
}

.whatsapp-float::after {
	animation-delay: 1s;
}

@keyframes gh-whatsapp-pulse {
	from {
		opacity: 0.6;
		transform: scale(1);
	}

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

/* Hidden behind the open mobile menu. */
.nav-open .whatsapp-float {
	display: none;
}

@media (max-width: 640px) {
	.whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 54px;
		height: 54px;
	}
}

/* 6. Sections -------------------------------------------------------------- */

/* Hero */
.hero {
	--hero-line: rgb(255 255 255 / 0.2);

	padding-block: 610px 77px;
	background: var(--gh-navy);
}

/* Design grid lines: horizontals under the header and above the buttons (about 150px from top and bottom);
   verticals at the design's 110px / 1291px on a 1440px screen, and on wider screens 150px in from each
   side edge, matching the horizontals. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
/* 	background:
		linear-gradient(var(--hero-line), var(--hero-line)) min(150px, calc(50% - 615px)) 0 / 1px 100% no-repeat,
		linear-gradient(var(--hero-line), var(--hero-line)) max(calc(100% - 150px), calc(50% + 571px)) 0 / 1px 100% no-repeat,
		linear-gradient(var(--hero-line), var(--hero-line)) 0 153px / 100% 1px no-repeat,
		linear-gradient(var(--hero-line), var(--hero-line)) 0 calc(100% - 147px) / 100% 1px no-repeat; */
	background:
		linear-gradient(rgb(255 255 255 / 62%), rgb(255 255 255 / 62%)) 62px 0 / 1px 100% no-repeat, 
		linear-gradient(rgb(255 255 255 / 62%), rgb(255 255 255 / 63%)) calc(100% - 59px) 0 / 1px 100% no-repeat, 
		linear-gradient(rgb(255 255 255 / 63%), rgb(255 255 255 / 61%)) 0 65px / 100% 1px no-repeat, 
		linear-gradient(rgb(255 255 255 / 66%), rgb(255 255 255 / 62%)) 0 calc(100% - 147px) / 100% 1px no-repeat;
	pointer-events: none;
}

.hero__text {
	max-width: 740px;
	margin: 14px 0 36px;
	color: var(--gh-white);
	font-size: 18px;
	line-height: 24px;
}

/* Hero variant: text centred on the left half, no design lines. */
.hero--center {
	padding-block: 255px 240px;
}

.hero--center::before {
	background: linear-gradient(90deg, rgb(8 26 40 / 0.55), transparent 65%);
}

/* Videos have no tint of their own (the hero photos do): a navy vignette, clear in the middle and
   darker towards the edges (design). It sits between the video and the text. */
.hero--video::after,.landing-hero::before {
	content: "";
	position: absolute;
/* 	z-index: -1; */
	inset: 0;
	background: radial-gradient(50% 50% at 50% 50%, rgb(8 26 40 / 0) 0%, rgb(8 26 40 / 0.7) 100%);
	background: radial-gradient(50% 50% at 50% 50%, rgba(8, 26, 40, 0) 0%, rgba(8, 26, 40, 0.7) 100%);
	pointer-events: none;
}

.hero--center .hero__content {
	display: grid;
	justify-items: center;
	max-width: 840px;
	margin-inline: max(var(--gh-gutter), calc((100vw - var(--gh-container)) / 2 - 24px)) auto;
	text-align: center;
	
}

.hero--center .hero__title {
	font-size: 60px;
	line-height: 1.05;
}

.hero--center .hero__text {
	max-width: 700px;
	margin-bottom: 24px;
	font-weight: 500;
}

/* Above the hero's overlay (::before), so nothing in it is dimmed. */
.hero__content {
	position: relative;
	z-index:9;
}

.hero__note {
	margin-bottom: 22px;
	color: var(--gh-white);
	font-size: 26px;
	font-weight: 500;
}

/* Accreditation strip */
.trust,
.landing-hero__strip {
	background: linear-gradient(90deg, var(--gh-navy), var(--gh-steel-light));
}

.trust__list {
	justify-content: center;
	padding-block: 23px;
}

/* Accreditation logos: white artwork in a row with thin dividers (strip and footer). */
.logo-list {
	display: flex;
	align-items: center;
}

.logo-list li {
	padding-inline: 36px;
}

.logo-list li + li {
	border-left: 1px solid rgb(255 255 255 / 0.3);
}

.logo-list img {
	height: auto;
	max-height: 46px;
}

/* Hair-loss patterns */
.concerns {
	overflow-x: clip; /* the hairline below spans the window; don't let it widen the page */
	padding-bottom: 53px;
}

.concerns__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 228px));
	justify-content: space-between;
	margin-top: -22px;
}

/* Hairline across the page at the top of the middle two cards. */
.concerns__list::before {
	content: "";
	position: absolute;
	top: 82px;
	left: 50%;
	width: 100vw;
	height: 1px;
	background: var(--gh-line);
	transform: translateX(-50%);
}

/* Middle two sit lower than the outer two. */
.concerns__item:nth-child(2),
.concerns__item:nth-child(3) {
	margin-top: 84px;
}

.concerns .frame {
	position: relative;
	padding: 12px 12px 0;
}

.concerns .frame__img {
	aspect-ratio: 202 / 277;
}

.concerns__label {
	padding: 14px 8px 16px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
}

/* Treatments */
.treatments {
	padding-bottom: 60px;
	background: var(--gh-navy);
}

.treatments__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: end;
	margin-top: 48px;
}

.treatments__card .card__text {
	margin: 32px 0 30px;
	line-height: 34px;
}

.treatments__card.card--light {
	padding-block: 25px 34px; /* same bottom padding as the dark card, so both buttons line up */
}

.treatments__card.card--light .card__text {
	margin: 16px 0 24px;
}

/* The design's FUE card is taller than the PRP card, with its button at the bottom. */
@media (min-width: 901px) {
	.treatments__card.card--dark {
		min-height: 474px;
	}
}

.treatments__card.card--dark .btn {
	margin-top: auto;
}

.treatments__footnote {
	max-width: 980px;
	margin: 48px auto 0;
	color: var(--gh-white);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
}

/* Results */
.results {
	padding-bottom: 64px;
}

.results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 54px;
}

.result {
	padding: 12px;
	border-radius: var(--gh-radius);
	background: var(--gh-white);
}

.result__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.result__photo {
	position: relative;
}

.result__photo img {
	width: 100%;
	aspect-ratio: 176 / 186;
	border-radius: var(--gh-radius-sm);
	object-fit: cover;
}

.result__photo .badge {
	position: absolute;
	top: 11px;
	left: 12px;
}

.result__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.result__stage {
	display: flex;
	gap: 22px;
	font-size: 16px;
}

.result__age::before {
	content: "•";
	margin-right: 8px;
}

.result__detail {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-top: 22px;
	color: var(--gh-muted);
	font-size: 14px;
}

.result__detail::before {
	content: "";
	flex: 1;
	order: 1;
	height: 1px;
	background: var(--gh-line);
}

.result__detail span:last-child {
	order: 2;
}

/* Surgeons */
.surgeons {
	padding-top: 64px;
	padding-bottom: 82px;
}

/* Silk background shared by the surgeon sections and the picture cards. */
.surgeons,
.team,
.media-cards {
	background-image: url(https://grafthairclinic.co.uk/wp-content/uploads/2026/10/image-81.webp);
}

.surgeons__grid {
	display: grid;
	grid-template-columns: repeat(2, 418px);
	gap: 46px;
	justify-content: center;
	margin-top: 32px;
}

.next-step .media-section__bg {
	opacity: 0.34;
}

.concerns .media-section__bg,
.page-intro .media-section__bg,
.booking-split .media-section__bg {
	opacity: 0.7;
}

/* One tall background across Results and Surgeons: the top of the image behind Results, its bottom behind Surgeons
   (without JS each section simply shows its end of the image). */
.results .media-section__bg {
	object-position: top;
}

.surgeons .media-section__bg {
/* 	object-position: bottom; */
	display:none;
}

/* Neighbouring sections sharing one image (set up in assets/js/main.js). */
.is-split-bg > .media-section__bg {
	top: var(--split-offset, 0);
	bottom: auto;
	height: var(--split-height);
}

.surgeons .frame {
	padding: 14px;
}

.surgeons .frame__img {
	aspect-ratio: 391 / 444;
}

.surgeon__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

.surgeon__head .text-link {
	flex-shrink: 0;
	font-size: 16px;
}

.surgeon__bio {
	margin: 16px 0 18px;
	font-size: 18px;
	line-height: 26px;
}

/* Journey */
.journey {
/* 	border-top: 1px solid var(--gh-border); */
	padding-block: 64px 74px;
}

.journey__layout {
	display: grid;
	grid-template-columns: 438px minmax(0, 750px);
	gap: 49px;
	align-items: center;
	justify-content: center;
	margin-top: 56px;
}

.journey .frame {
	padding: 8px;
}

.journey__photo {
	position: relative;
}

.journey__photo .frame__img {
	aspect-ratio: 422 / 745;
}

/* Numbered timeline: a dark circle per step, joined by a thin line. */
.journey__step {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 34px;
	padding-bottom: 32px;
}

.journey__step::before {
	content: "";
	position: absolute;
	top: 60px;
	bottom: 12px;
	left: 23px;
	width: 1px;
	background: rgb(8 26 40 / 0.35);
}

.journey__number {
	display: grid;
	grid-row: span 2;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gh-ink);
	color: var(--gh-white);
	font: 500 16px/1 var(--gh-font-sans);
}

.journey__title {
	margin-top: 6px;
	color: var(--gh-ink);
	font: 500 28px/1.2 var(--gh-font-serif);
}

.journey__text {
	margin-top: 8px;
	color: var(--gh-navy);
	font-size: 18px;
	line-height: 26px;
}

/* Light page intro (pricing page) */
.page-intro {
	padding-block: 250px 140px;
	background: var(--gh-sand-light);
}

.page-intro__head .title {
	font-size: 64px;
}

.page-intro__head .lead {
	max-width: 680px;
	font-size: 18px;
	line-height: 30px;
}

.page-intro__head .lead + .lead {
	margin-top: -24px;
}

.page-intro__head > div {
	margin-top: 40px;
}

/* Price cards */
.pricing {
	padding-block: 56px 72px;
}

.pricing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch; /* cards in a row end at the same line */
	margin-top: 50px;
}

.price {
	align-items: stretch;
	padding: 38px 31px;
	border-radius: var(--gh-radius);
}

.price.card--white {
	border-color: #e6e4e0;
}

/* Small pill label above the price cards heading (shares its pill look with .eyebrow). */
.pricing__eyebrow {
	display: table;
	margin: 0 auto 10px;
	padding: 4px 14px;
	color: var(--gh-navy);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* On dark cards the badge is a white pill. */
.card--dark .price__top .badge--ink {
	background: var(--gh-white);
	color: var(--gh-ink);
}

.price__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.price__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--gh-radius);
	background: linear-gradient(135deg, #b9c7d8, #7f97b8);
	color: var(--gh-white);
}

.card--dark .price__icon {
	background: linear-gradient(135deg, #7390b8, #5a79a2);
}

.price__title {
	margin: 32px 0 14px;
	color: var(--gh-ink);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}

.price__text {
	color: var(--gh-muted);
	font-size: 15px;
	line-height: 20px;
}

.price__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 36px 0 30px;
	color: var(--gh-ink);
	font-size: 48px;
	line-height: 1;
}

.price__unit {
	align-self: flex-end;
	margin-left: -8px;
	color: var(--gh-muted);
	font-size: 16px;
	font-weight: 600;
}

.price__save {
	font-size: 13px;
	font-weight: 600;
}

.price .btn {
	align-self: flex-start;
}

.price__includes {
	margin: 28px 0 20px;
	padding-top: 28px;
	border-top: 1px solid var(--gh-line);
	color: var(--gh-ink);
	font: 500 20px/1.2 var(--gh-font-serif);
}

.price .checklist li {
	font-size: 15px;
}

.card--dark .price__title,
.card--dark .price__text,
.card--dark .price__amount,
.card--dark .price__unit,
.card--dark .price__includes {
	color: var(--gh-white);
}

.card--dark .price__includes {
	border-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.4), transparent) 1;
}

/* Single package card */
.package {
	padding-block: 40px 100px;
}

.package__card {
	display: grid;
	grid-template-columns: minmax(0, 604fr) minmax(0, 500fr);
	column-gap: 0;
	padding: 48px 48px 56px;
	border-radius: var(--gh-radius-lg);
	background: linear-gradient(90deg, var(--gh-navy), var(--gh-steel-light));
	color: var(--gh-white);
}

.package__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.package__title {
	margin-top: 22px;
	font-weight: 500;
	line-height: 1.1;
}

.package .price__amount {
	margin: 26px 0 0;
	color: var(--gh-white);
}

.package__old {
	margin-top: 14px;
	font-weight: 600;
}

.package__text {
	margin: 22px 0 26px;
	font-size: 15px;
	line-height: 20px;
}

.package .btn {
	justify-self: start;
}

/* Keep the text clear of the divider line. */
.package__main {
	padding-right: 48px;
}

.package__side {
	align-self: start;
	margin-top: 46px;
	padding-left: 40px;
	border-left: 1px solid rgb(255 255 255 / 0.3);
}

.package__included {
	font: 500 30px/1.2 var(--gh-font-serif);
}

.package__list {
	display: grid;
	gap: 24px;
	margin-top: 22px;
	padding-left: 22px;
	font-size: 15px;
	line-height: 20px;
	list-style: disc;
}

.package__note {
	grid-column: 1 / -1;
	max-width: 1060px;
	margin: 48px auto 0;
	font-size: 18px;
	font-style: italic;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
}

/* Shared: left-aligned section heading, italic note under a section. */
.section-head--left {
	justify-items: start;
	text-align: left;
}

.section-head--left .lead {
	max-width: 870px;
}

.section-note {
	max-width: 1040px;
	margin: 56px auto 0;
	color: var(--gh-navy);
	font-size: 18px;
	font-style: italic;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
}

/* Heading + wide photo */
.intro-image__img {
	width: 100%;
	margin-top: 32px;
	border-radius: var(--gh-radius);
	aspect-ratio: 1200 / 403;
	object-fit: cover;
}

/* Photo + ticked list card */
.checklist-card {
	padding-block: 72px 80px;
}

.checklist-card__card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* photo and list half each */
	margin-top: 40px;
	overflow: hidden;
	border-radius: var(--gh-radius);
	background: var(--gh-white);
}

.checklist-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.checklist-card__body {
	align-self: center;
	padding: 40px 48px;
}

.checklist-card__title {
	margin-bottom: 20px;
	color: var(--gh-navy);
	font-size: 24px;
	font-weight: 600;
}

.checklist--circled {
	gap: 18px;
}

.checklist--circled li {
	align-items: center;
	color: var(--gh-navy);
	font-size: 18px;
}

.checklist__tick {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gh-navy);
	color: var(--gh-white);
}

.checklist__tick .icon {
	margin: 0;
}

/* Process cards that stack while scrolling */
.process-stack {
	padding-block: 72px 80px;
}

.process-stack .title {
	font-size: 44px;
}

.process-stack .section-head .lead {
	max-width: 1040px;
	font-size: 19px;
	line-height: 30px;
}

.process-stack__list {
	display: grid;
	gap: 160px;
	margin: 140px auto 0;
}

.process-stack__item {
	position: sticky;
	top: 130px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* full content width, photo and text half each */
	overflow: hidden;
	border-radius: var(--gh-radius);
	background: var(--gh-white);
	box-shadow: 0 -8px 30px rgb(8 26 40 / 0.06);
	transform-origin: center top;
	transition: transform 0.5s var(--gh-ease), filter 0.5s var(--gh-ease);
}

/* A card that the next one has slid over sinks back slightly (set by assets/js/main.js). */
.process-stack__item.is-covered {
	filter: brightness(0.94);
	transform: scale(0.94);
}

/* Each later card stops a little lower, so the earlier ones peek out above it. */
.process-stack__item:nth-child(2) { top: 146px; }
.process-stack__item:nth-child(3) { top: 162px; }
.process-stack__item:nth-child(4) { top: 178px; }
.process-stack__item:nth-child(5) { top: 194px; }
.process-stack__item:nth-child(n + 6) { top: 210px; }

.process-stack__item img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

.process-stack__body {
	align-self: center;
	padding: 32px 56px;
}

.process-stack__title {
	color: #1a1a1a;
	font-size: 28px;
	font-weight: 600;
}

.process-stack__text {
	margin-top: 16px;
	color: #7a7a7a;
	font-size: 18px;
	line-height: 30px;
}

.process-stack__cta {
	display: flex;
	justify-content: center;
	margin-top: 80px;
}

/* Surgeon card: detail row (e.g. GMC number) */
.surgeon__detail {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: -4px 0 20px;
	padding-top: 10px;
	border-top: 1px solid var(--gh-line);
	color: var(--gh-slate);
	font-size: 15px;
	font-weight: 600;
}

.surgeon__detail span:first-child {
	color: var(--gh-ink);
	font: 400 20px var(--gh-font-serif);
}

/* Timeline slider */
.timeline-slider {
	overflow: hidden;
	padding-block: 72px 80px;
}

.timeline-slider__wrap {
	position: relative;
	margin-top: 88px;
}

.timeline-slider__track {
	display: flex;
	gap: 30px;
	margin-right: calc(-1 * (max(0px, (100vw - var(--gh-container) - var(--gh-gutter) * 2) / 2) + var(--gh-gutter)));
	padding-right: var(--gh-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.timeline-slider__track::-webkit-scrollbar {
	display: none;
}

.timeline-card {
	position: relative;
	flex: 0 0 min(834px, 82%);
	overflow: hidden;
	border-radius: var(--gh-radius);
	scroll-snap-align: start;
}

.timeline-card img {
	width: 100%;
	height: 518px;
	object-fit: cover;
	object-position: top;
}

.timeline-card__body {
	position: absolute;
	inset: auto 0 0;
	padding: 150px 29px 64px;
	background: linear-gradient(180deg, transparent, rgb(8 26 40 / 0.5) 40%, rgb(8 26 40 / 0.95));
	color: var(--gh-white);
}

.timeline-card__number {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--gh-sand);
	color: var(--gh-navy);
	font-size: 14px;
	font-weight: 700;
}

/* Line under the number. */
.timeline-card__number::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 58px;
	margin-top: 96px;
	background: rgb(255 255 255 / 0.7);
}

.timeline-card__title {
	margin-top: 78px;
	color: var(--gh-white);
	font-weight: 500;
}

.timeline-card__text {
	margin-top: 14px;
	font-size: 18px;
	line-height: 29px;
}

.slider-arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	color: var(--gh-ink);
	box-shadow: 0 4px 14px rgb(8 26 40 / 0.15);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s;
}

.slider-arrow--prev {
	left: -22px;
}

.slider-arrow--prev .icon {
	transform: rotate(180deg);
}

.slider-arrow--next {
	right: 0;
}

.slider-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

/* Scroll-controlled video: tall section; the heading scrolls away, then the video (inside the content
   width) stays pinned while it plays through. --sv-head is set by assets/js/main.js. */
.scroll-video {
	--sv-top: calc(var(--wp-admin--admin-bar--height, 0px) + 112px);

	height: 340vh;
	padding-block: 0;
}

.scroll-video__pin {
	position: sticky;
	top: calc(-1 * var(--sv-head, 0px));
	display: flex;
	flex-direction: column;
	height: calc(100vh + var(--sv-head, 0px));
	height: calc(100svh + var(--sv-head, 0px));
	padding-block: var(--sv-top) 40px;
}

.scroll-video__pin > .container {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.scroll-video .section-head {
	gap: 12px;
	margin-bottom: 40px;
}

.scroll-video__stage {
	position: relative;
	flex: 1;
	width: 100%;
	min-height: 0;
	max-height: 674px;
	overflow: hidden;
	border-radius: var(--gh-radius);
	background: #b9c0c8;
}

.scroll-video__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shading behind the captions so white text stays readable. */
.scroll-video__stage::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 55%;
	background: linear-gradient(180deg, transparent, rgb(8 26 40 / 0.9));
	pointer-events: none;
}

.scroll-video__captions {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 56px;
	left: 0;
	height: 230px;
}

.scroll-video__caption {
	position: absolute;
	right: 30px;
	bottom: 0;
	left: 30px;
	max-width: 760px;
	color: var(--gh-white);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s var(--gh-ease), transform 0.5s var(--gh-ease);
}

.scroll-video__caption.is-active {
	opacity: 1;
	transform: none;
}

.scroll-video__caption .title {
	font-size: 36px;
	font-weight: 500;
}

.scroll-video__caption p {
	margin-top: 10px;
	font-size: 18px;
	line-height: 27px;
}

.scroll-video__caption .timeline-card__number {
	position: relative;
}

/* Thin line from the number down towards the heading. */
.scroll-video__caption .timeline-card__number::after {
	top: calc(100% + 10px);
	left: 50%;
	height: 46px;
	margin: 0;
}

.scroll-video__caption .title {
	margin-top: 70px;
}

.scroll-video__progress {
	position: absolute;
	z-index: 1;
	right: 30px;
	bottom: 28px;
	left: 30px;
	display: flex;
	gap: 6px;
}

.scroll-video__progress span {
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgb(255 255 255 / 0.3);
}

.scroll-video__progress i {
	display: block;
	height: 100%;
	background: var(--gh-white);
	transform: scaleX(0);
	transform-origin: left;
}

/* Pricing summary card: subtitle instead of a big price. */
.package__subtitle {
	margin-top: 26px;
	font: 600 34px/1.2 var(--gh-font-sans);
}

.package__text + .package__text {
	margin-top: -4px;
}

/* Booking form beside a photo (contact page) */
.booking-split {
	padding-block: 150px 48px;
}

.booking-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 590fr) minmax(0, 510fr);
	gap: 20px;
	align-items: stretch;
	max-width: 1120px;
	margin: 40px auto 0;
}

.booking-split__img {
	width: 100%;
	height: 100%;
	border-radius: var(--gh-radius);
	object-fit: cover;
}

/* Short heading band directly above a booking row (contact page). */
.page-intro:has(+ .booking-split) {
	padding-block: 190px 24px;
}

main .page-intro + .booking-split.section {
	padding-top: 24px;
}

@media (max-width: 640px) {
	.page-intro:has(+ .booking-split) {
		padding-block: 120px 40px;
	}

	.page-intro__head .title {
		font-size: 40px;
	}

	main .page-intro + .booking-split.section {
		padding-top: 24px;
	}
}

/* Photo on the left of the form. */
@media (min-width: 1025px) {
	.booking-split--photo-left .booking-split__grid {
		grid-template-columns: minmax(0, 480fr) minmax(0, 590fr);
	}

	.booking-split--photo-left .booking-split__img {
		order: -1;
	}
}

/* Notice above the columns (the notice comes last in the markup). */
.contact-info--notice-top .container {
	display: flex;
	flex-direction: column-reverse;
}

.contact-info--notice-top .contact-info__notice {
	margin: 0 0 56px;
}

/* Address, opening hours and contacts */
.contact-info {
	padding-block: 64px 56px;
}

.contact-info .container {
	padding-bottom: 36px;
	border-bottom: 1px solid var(--gh-border);
}

.contact-info__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.contact-info__title {
	margin-bottom: 14px;
	color: var(--gh-ink);
	font-size: 26px;
	font-weight: 500;
}

.contact-info__text {
	color: var(--gh-navy);
	font-size: 17px;
	font-style: normal;
	line-height: 24px;
}

.contact-info__hours,
.contact-info__contacts {
	display: grid;
	gap: 12px;
	margin: 0;
}

.contact-info__hours dt {
	color: var(--gh-muted);
	font-size: 16px;
}

.contact-info__hours dd,
.contact-info__contacts dd {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 4px 0 0;
	color: var(--gh-ink);
	font-size: 16px;
	font-weight: 600;
}

.contact-info__dash {
	width: 44px;
	height: 1px;
	background: currentColor;
}

.contact-info__contacts dt {
	color: var(--gh-navy);
	font-weight: 700;
}

.contact-info__contacts dd {
	margin-top: 0;
	color: var(--gh-navy);
	font-weight: 400;
}

.contact-info__contacts a {
	text-decoration: none;
}

.contact-info__notice {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
	padding: 16px;
	background: linear-gradient(90deg, var(--gh-navy), var(--gh-steel-light));
	color: var(--gh-white);
	font-size: 15px;
}

.contact-info__notice-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gh-sand);
	color: var(--gh-navy);
}

/* Next step: routes side by side with a divider */
.next-step {
	padding-block: 96px 150px;
}

.next-step__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	max-width: 1080px;
	margin: 96px auto 0;
}

.next-step__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 40px;
	text-align: center;
}

.next-step__item + .next-step__item {
	border-left: 1px solid var(--gh-border);
}

.next-step__icon {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--gh-stone);
	color: var(--gh-navy);
}

.next-step__title {
	margin-top: 20px;
	color: var(--gh-ink);
	font: 600 50px/1.1 var(--gh-font-serif);
}

.next-step__text {
	max-width: 360px;
	margin: 12px 0 28px;
	color: var(--gh-navy);
	font-size: 16px;
	line-height: 24px;
}

.next-step__item .btn,
.next-step__item .call-link {
	margin-top: auto;
}

/* Picture cards with captions */
.media-cards {
	padding-block: 140px 120px;
}

.media-cards__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 364px));
	gap: 28px;
	justify-content: center;
	margin-top: 50px;
}

.media-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--gh-radius-sm);
}

.media-card img {
	width: 100%;
	aspect-ratio: 364 / 379;
	object-fit: cover;
}

.media-card__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 60px 28px 28px;
	background: linear-gradient(180deg, transparent, rgb(8 26 40 / 0.88));
	color: var(--gh-white);
	font-size: 20px;
	line-height: 28px;
}

.media-cards__note {
	max-width: 1000px;
	margin: 40px auto 0;
	color: var(--gh-navy);
	font-size: 16px;
	font-style: italic;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
}

/* Numbered steps */
.numbered-steps {
	padding-block: 140px 110px;
}

.numbered-steps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px;
	margin-top: 64px;
	padding-inline: 11px;
}

.numbered-steps__number {
	display: block;
	width: 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid #a9b8cb;
	color: #7f97b8;
	font-size: 22px;
}

.numbered-steps__title {
	margin-top: 26px;
	color: var(--gh-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 25px;
}

.numbered-steps__text {
	margin-top: 26px;
	color: var(--gh-muted);
	font-size: 18px;
	line-height: 26px;
}

/* Numbered steps, "line" style: numbers in circles on one horizontal line, text centred. */
.numbered-steps--line .section-head .lead {
	max-width: 480px;
}

.numbered-steps--line .numbered-steps__list {
	position: relative;
	gap: 32px;
	margin-top: 76px;
	padding-inline: 0;
	text-align: center;
}

.numbered-steps--line .numbered-steps__list::before {
	content: "";
	position: absolute;
	top: 25px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--gh-navy);
}

.numbered-steps--line .numbered-steps__number {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-inline: auto;
	padding: 0;
	border: 1px solid var(--gh-navy);
	border-radius: 50%;
	background: var(--gh-sand);
	color: var(--gh-ink);
	font-size: 20px;
}

.numbered-steps--line .numbered-steps__title {
	margin-top: 56px;
}

.numbered-steps--line .numbered-steps__text {
	max-width: 270px;
	margin-inline: auto;
}

/* Call-to-action card */
.cta-card-section {
	padding-block: 120px 60px;
}

.package + .cta-card-section {
	padding-top: 0;
}

.cta-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* photo and text half each */
	overflow: hidden;
	border-radius: 32px;
	background: var(--gh-white);
}

.cta-card__img {
	width: 100%;
	height: 100%;
	min-height: 455px;
	object-fit: cover;
}

.cta-card__body {
	align-self: center;
	padding: 48px 56px;
}

.cta-card__text {
	margin: 26px 0 28px;
	color: var(--gh-slate);
	font-size: 18px;
	line-height: 32px;
}

.cta-card .button-row {
	align-items: center;
	gap: 32px;
}

.call-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 22px 4px 4px;
	border: 1px solid var(--gh-border);
	border-radius: 999px;
	color: var(--gh-ink);
	font-weight: 600;
	text-decoration: none;
}

.call-link__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gh-navy);
	color: var(--gh-white);
}

/* Plan your next step */
.plan__grid {
	display: grid;
	grid-template-columns: 486px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin-top: 48px;
}

.visit-card {
	display: grid;
	gap: 24px;
	padding: 24px;
	border-radius: 20px;
	background: linear-gradient(158deg, var(--gh-steel-light), var(--gh-navy));
	color: var(--gh-white);
}

.visit-card__title {
	margin-bottom: -12px;
	color: var(--gh-sand);
	font-weight: 500;
}

.visit-card__group {
	display: grid;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgb(255 255 255 / 0.2);
	color: var(--gh-sand);
}

.visit-card__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--gh-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.visit-card__hours {
	display: grid;
	gap: 10px;
	margin: 0;
}

.visit-card__hours div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.visit-card__hours dd {
	margin: 0;
}

.visit-card__contact {
	display: grid;
	gap: 12px;
}

.visit-card__contact li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.visit-card a {
	text-decoration: none;
}

.visit-card address,
.clinic-map__address {
	font-style: normal;
	line-height: 22px;
}

/* Clinic map */
.clinic-map {
	padding-block: 80px;
}

.clinic-map .lead {
	line-height: 26px;
}

.clinic-map__map {
	position: relative;
	margin-top: 48px;
	overflow: hidden;
	border: 1px solid var(--gh-line);
	border-radius: 20px;
}

/* Live Google map, toned down to the site's greys (the location pin keeps a hint of colour).
   The top of the map, where Google puts its own place card, is slid out of view above the box. */
.clinic-map__frame {
	--map-crop: 150px;

	display: block;
	width: 100%;
	height: calc(359px + var(--map-crop));
	margin-top: calc(-1 * var(--map-crop));
	border: 0;
	filter: saturate(0.25);
}

.clinic-map__card {
	position: absolute;
	bottom: 24px;
	left: 24px;
	width: 318px;
	padding: 20px 20px 18px;
	border: 1px solid var(--gh-line);
	border-radius: 16px;
	background: var(--gh-white);
}

.clinic-map__eyebrow {
	color: #607289;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.clinic-map__name {
	margin-top: 10px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
}

.clinic-map__address {
	margin: 8px 0 12px;
	font-size: 14px;
	font-weight: 500;
}

.clinic-map__card .btn {
	height: 50px;
}

.clinic-map__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Patient reviews: cards in a sideways row, dots underneath (assets/js/main.js). */
.reviews {
	padding-block: 72px 64px;
	background: var(--gh-slate);
}

/* Sideways card rows with dots: patient reviews, and results shown as a slider. */
.reviews__track,
.results--slider .results__grid {
	display: grid;
	grid-auto-flow: column;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.reviews__track {
	grid-auto-columns: calc((100% - 2 * 28px) / 3);
	gap: 28px;
	margin-top: 64px;
}

/* Every card one width (the grid's fixed columns would otherwise squeeze the first ones). */
.results--slider .results__grid {
	grid-template-columns: none;
	grid-auto-columns: calc((100% - 2 * 20px) / 3);
}

.results--slider .result {
	scroll-snap-align: start;
}

/* Mouse users can drag the row (assets/js/main.js). */
@media (pointer: fine) {
	.reviews__track,
	.results--slider .results__grid {
		cursor: grab;
	}
}

.reviews__track.is-dragging,
.results--slider .results__grid.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.reviews__track::-webkit-scrollbar,
.results--slider .results__grid::-webkit-scrollbar {
	display: none;
}

.review {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: var(--gh-radius);
	background: var(--gh-sand);
	scroll-snap-align: start;
}

.review__author {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--gh-navy);
	font-size: 20px;
	font-weight: 500;
}

.review__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #8aa0b5;
	color: var(--gh-white);
	font-size: 15px;
}

.review__text {
	margin: 20px 0 16px;
	color: var(--gh-navy);
	font-size: 16px;
	line-height: 24px;
}

/* Reviews show their first 3 lines, with "Read more" to open the rest. */
.review__text p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.review.is-open .review__text p {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
	/* Same 3-line height; the rest scrolls inside the card, so the card never grows. */
	max-height: calc(24px * 3);
	padding-right: 8px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #9aabbd transparent;
}

.review__more {
	align-self: flex-start;
	margin: -8px 0 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gh-navy);
	font: 600 14px/1.4 var(--gh-font-sans);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.review__more[hidden] {
	display: none;
}



.review__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: auto; /* keeps the links in a row lined up at the bottom */
	gap: 12px;
	color: var(--gh-ink);
	font-size: 14px;
	text-underline-offset: 3px;
}

.slider-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}

.slider-dots[hidden] {
	display: none;
}

.slider-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.4);
	cursor: pointer;
	transition: background-color 0.2s;
}

.slider-dots button[aria-current="true"] {
	background: var(--gh-white);
}

/* Dots on a light background. */
.slider-dots--dark {
	margin-top: 44px;
}

.slider-dots--dark button {
	background: #d9dce0;
}

.slider-dots--dark button[aria-current="true"] {
	background: var(--gh-navy);
}

@media (max-width: 900px) {
	.reviews__track {
		grid-auto-columns: calc((100% - 20px) / 2);
		gap: 20px;
	}

	.results--slider .results__grid {
		grid-auto-columns: calc((100% - 20px) / 2);
	}
}

@media (max-width: 640px) {
	.reviews__track {
		grid-auto-columns: 100%;
		margin-top: 28px;
	}

	.results--slider .results__grid {
		grid-auto-columns: 84%;
	}

	.slider-dots--dark {
		margin-top: 20px;
	}

	.review {
		height: auto;
	}
}

/* Legal pages (Privacy Policy, Terms & Conditions): readable text column. */
.legal {
	padding-block: 24px 96px;
}

.legal__content {
	padding: 56px 64px;
	border-radius: var(--gh-radius-lg);
	background: var(--gh-white);
	color: var(--gh-navy);
	font-size: 17px;
	line-height: 1.75;
}

.legal__content > * + * {
	margin-top: 1em;
}

.legal__content h2 {
	margin-top: 2em;
	padding-top: 1.4em;
	border-top: 1px solid var(--gh-line);
	color: var(--gh-ink);
	font: 600 30px/1.2 var(--gh-font-serif);
}

.legal__content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal__content h2 + * {
	margin-top: 0.75em;
}

.legal__content ul {
	display: grid;
	gap: 8px;
	padding-left: 22px;
	list-style: disc;
}

.legal__content li::marker {
	color: var(--gh-steel);
}

.legal__content a {
	color: var(--gh-ink);
	text-underline-offset: 3px;
}

@media (max-width: 640px) {
	.legal__content {
		padding: 28px 20px;
		font-size: 16px;
	}

	.legal__content h2 {
		font-size: 24px;
	}
}

/* FAQ */
.faq {
	padding-block: 48px 88px;
}

.faq__list {
	display: grid;
	gap: 12px;
	margin-top: 60px;
}

.faq__item {
	border: 1px solid var(--gh-line);
	border-radius: 16px;
	background: var(--gh-white);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 28px;
	color: var(--gh-navy);
	font-size: 18px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question .icon {
	flex-shrink: 0;
	color: var(--gh-ink);
	transition: transform 0.25s var(--gh-ease);
}

.faq__item[open] .faq__question .icon {
	transform: rotate(90deg);
}

.faq__answer {
	display: grid;
	gap: 12px;
	padding: 0 28px 26px;
	color: var(--gh-navy);
	font-size: 16px;
	line-height: 1.6;
}

/* Inner-page hero */
.page-hero {
	padding-block: 340px 63px;
	background: var(--gh-navy);
}

.page-hero__title {
	font-size: 64px;
	line-height: 1;
}

.page-hero__text {
	max-width: 592px;
	margin-top: 12px;
	color: var(--gh-white);
	font-size: 18px;
	line-height: 24px;
}

/* Thin line across the hero, just under the title (as on the home hero). */
.page-hero--line::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 121px;
	left: 0;
	height: 1px;
	background: rgb(255 255 255 / 0.2);
	pointer-events: none;
}

/* Surgeon profile: a fixed 1200px content width on every screen size (heading and profile alike). */
.single-surgeon {
	--gh-container: 1200px;
}

.profile-section {
	padding-block: 64px 112px;
	padding-top:120px;
}

.profile {
	display: grid;
	grid-template-columns: minmax(0, 581fr) minmax(0, 587fr);
	gap: 20px;
	align-items: start;
}

.profile__photo {
	position: relative;
	padding: 20px;
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius);
}

.profile__photo .frame__img {
	/* The whole photo, at its own shape – nothing cropped. */
	height: 360px;
	object-fit:cover;
	object-position:top;
	aspect-ratio: auto;
	border-radius: var(--gh-radius-sm);
}
.profile__role {
	margin-top: 19px;
	padding: 4px 24px;
}

.profile__name {
	margin-top: 16px;
	line-height: 1;
}

.profile__bio {
	margin: 18px 0;
	font-size: 18px;
	line-height: 30px;
}

.profile__bio > * + * {
	margin-top: 1em;
}

.profile__aside {
	position: sticky;
	top: 120px;
}

.stats {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--gh-line);
}

.stats__item + .stats__item {
	padding-left: 40px;
	border-left: 1px solid var(--gh-line);
}

.stats__value {
	background: linear-gradient(90deg, var(--gh-navy) 45%, var(--gh-steel));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

.stats__label {
	margin: 4px 0 0;
	font-size: 20px;
}

.details li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 62px;
	padding-block: 12px;
	border-top: 1px solid var(--gh-line);
	font-size: 18px;
	line-height: 24px;
}

.details li:last-child {
	border-bottom: 1px solid var(--gh-line);
}

.details__value {
	color: var(--gh-navy);
	text-align: right;
}

.details__badge {
	width: 82px;
	border-radius: 6px;
}

/* Generic pages */
.page-body {
	padding-block: 160px 80px;
}

.entry + .entry {
	margin-top: 48px;
}

.entry__content {
	margin-top: 24px;
	font-size: 18px;
	line-height: 1.6;
}

.entry__content > * + * {
	margin-top: 1em;
}

/* Footer slides up from behind the page as it scrolls in (assets/js/motion.js): the page sits above it. */
.site-main {
	position: relative;
	z-index: 1;
	background: var(--gh-page);
}

.site-footer {
	position: relative;
	z-index: 0;
}

/* Thank-you page (after a booking): a white card with a tick, the message, the booking's details and buttons. */
.thanks {
	padding-block: 180px 96px;
}

.thanks__card {
	display: grid;
	justify-items: center;
	max-width: 720px;
	margin-inline: auto;
	padding: 48px 56px;
	border-radius: var(--gh-radius-lg);
	background: var(--gh-white);
	text-align: center;
}

.thanks__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 24px;
	border-radius: 50%;
	background: var(--gh-navy);
	color: var(--gh-white);
}

.thanks__details {
	display: grid;
	width: 100%;
	margin: 32px 0 0;
	border-top: 1px solid var(--gh-line);
	text-align: left;
}

.thanks__details div {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
	border-bottom: 1px solid var(--gh-line);
}

.thanks__details dt {
	color: var(--gh-muted);
}

.thanks__details dd {
	margin: 0;
	color: var(--gh-ink);
	font-weight: 600;
	text-align: right;
}

.thanks__buttons {
	justify-content: center;
	margin-top: 36px;
}

@media (max-width: 640px) {
	.thanks {
		padding-top: 120px;
	}

	.thanks__card {
		padding: 32px 20px;
	}
}

/* Landing pages ----------------------------------------------------------- */

/* Button centred under a section. */
.section-cta {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

/* Header: logo and booking button only, in a bar as wide as the content (design). */
@media (min-width: 1025px) {
	.is-landing .site-header__bar {
/* 		max-width: 1200px; */
		height: 64px;
		margin-inline: auto;
		padding-right: 8px;
	}
}

/* Hero: heading and price on the left, booking form on the right, rating + logos strip beneath.
   Thin design lines near the edges, as on the home hero. */
.landing-hero {
	--hero-line: rgb(255 255 255 / 0.15);

	background: var(--gh-navy);
}

.landing-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
/* 	background:
		linear-gradient(var(--hero-line), var(--hero-line)) 62px 0 / 1px 100% no-repeat,
		linear-gradient(var(--hero-line), var(--hero-line)) calc(100% - 59px) 0 / 1px 100% no-repeat,
		linear-gradient(var(--hero-line), var(--hero-line)) 0 65px / 100% 1px no-repeat,
		linear-gradient(var(--hero-line), var(--hero-line)) 0 calc(100% - 147px) / 100% 1px no-repeat; */
		background:
		linear-gradient(rgb(255 255 255 / 62%), rgb(255 255 255 / 62%)) 62px 0 / 1px 100% no-repeat, 
		linear-gradient(rgb(255 255 255 / 62%), rgb(255 255 255 / 63%)) calc(100% - 59px) 0 / 1px 100% no-repeat, 
		linear-gradient(rgb(255 255 255 / 63%), rgb(255 255 255 / 61%)) 0 65px / 100% 1px no-repeat, 
		linear-gradient(rgb(255 255 255 / 66%), rgb(255 255 255 / 62%)) 0 calc(100% - 147px) / 100% 1px no-repeat;
	pointer-events: none;
}

.landing-hero__grid {
	--gh-container: max(1250px, calc(100% - 330px));

	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	gap: 40px;
	align-items: center;
	min-height: 960px; /* the design height, so the page doesn't jump as the form changes step */
	padding-block: 125px 87px;
}

.landing-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.landing-hero__title {
	font-size: 64px;
	line-height: 1.1;
}

.landing-hero__title em {
	font-weight: 500;
}

.landing-hero__text {
	max-width: 520px;
	margin: 30px 0 40px;
	color: var(--gh-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
}

/* Price pill in "liquid glass": frosted fill, soft inner light, and a thin edge that is bright at the
   top-left and bottom-right and fades along the sides (design). */
.landing-hero__note {
	position: relative;
	padding: 12px 24px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.02) 45%, rgb(255 255 255 / 0.06));
	box-shadow:
		inset 0 1px 2px rgb(255 255 255 / 0.25),
		inset 0 -2px 6px rgb(255 255 255 / 0.08),
		0 10px 30px rgb(8 26 40 / 0.18);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
	color: var(--gh-sand);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgb(8 26 40 / 0.25);
}

.landing-hero__note::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(110deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.15) 30%, rgb(255 255 255 / 0.05) 55%, rgb(255 255 255 / 0.2) 75%, rgb(255 255 255 / 0.8));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.landing-hero__strip-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 92px;
	position:relative;
	z-index:3;
}

.landing-hero__logos li:last-child {
	padding-right: 0;
}

/* Google rating: logo, "Google Rating", score and stars. */
.rating {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--gh-white);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
}

.rating__label,
.rating__score {
	display: block;
}

.rating__score {
	font-weight: 600;
}

.rating__stars {
	color: #fbbc04;
	font-size: 14px;
	letter-spacing: 2px;
}

/* Phones show the rating above the heading instead. */
.rating--top {
	display: none;
}

/* Photo between two texts, the large "G" mark behind. */
.split-photo {
	overflow: hidden;
	padding-block: 96px 64px;
}

.split-photo .container {
	--gh-container: max(1250px, calc(100% - 330px));
}

.split-photo .lead {
	max-width: 380px;
	color: var(--gh-ink);
	font-size: 20px;
	font-style: italic;
	line-height: 27px;
}

.split-photo__layout {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 416px minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin-top: 32px;
}

.split-photo__layout::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -123px;
	/* left: calc(50% + 300px); */
	max-width: 811px;
	aspect-ratio: 1684 / 1740;
	background: rgb(8 26 40 / 0.04);
	-webkit-mask: url("../img/g-mark.webp") center / contain no-repeat;
	mask: url("../img/g-mark.webp") center / contain no-repeat;
	pointer-events: none;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.split-photo__text {
	display: grid;
	gap: 1em;
	color: var(--gh-navy);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -0.02em;
}

.split-photo__media {
	position: relative;
	padding: 16px;
	border-color: var(--gh-line);
	border-radius: var(--gh-radius);
}

.split-photo__media .frame__img {
	height: auto;
	aspect-ratio: 416 / 702;
	border-radius: var(--gh-radius-sm);
}

/* Treatment overview: icon tiles three to a row, divided by thin lines; faint arcs at the sides. */
.features {
	overflow: hidden;
	padding-block: 64px 96px;
}

.features::before,
.features::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 760px;
	aspect-ratio: 1;
	border: 1px solid var(--gh-border);
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.features::before {
	right: calc(100% - 155px);
}

.features::after {
	left: calc(100% - 135px);
}

.features__grid {
	--feature-gap: 64px;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--feature-gap);
	margin-top: 56px;
}

/* Two to a row (Why choose us): small icon beside the heading, text across the item beneath;
   the dividers run edge to edge, so no gap between the columns. */
.features__grid--two {
	--feature-gap: 0px;

	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 0;
}

.feature {
	position: relative;
	display: flex;
	align-items: center;
	gap: 48px;
	padding-block: 24px;
}

.features__grid--two .feature {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px 12px;
	align-items: center;
	padding: 36px 24px;
}

.features__grid--two .feature > div {
	display: contents;
}

.features__grid--two .feature__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--gh-radius-sm);
}

.features__grid--two .feature__icon .icon {
	width: 22px;
	height: 22px;
}

.features__grid--two .feature__title {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.features__grid--two .feature__text {
	grid-column: 1 / -1;
	color: var(--gh-navy);
	font-size: 16px;
	line-height: 24px;
}

/* Dividers: a line between rows, and a line between columns. */
@media (min-width: 1025px) {
	.features__grid:not(.features__grid--two) .feature:nth-child(n + 4),
	.features__grid--two .feature:nth-child(n + 3) {
		border-top: 1px solid var(--gh-line);
	}

	.features__grid:not(.features__grid--two) .feature:not(:nth-child(3n + 1))::before,
	.features__grid--two .feature:nth-child(even)::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--feature-gap) / -2);
		width: 1px;
		background: var(--gh-line);
	}

	/* Two to a row: the column line stops short of the row line (design). */
	.features__grid--two .feature:nth-child(even)::before {
		top: 20px;
		bottom: 20px;
	}
}

.feature__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: var(--gh-radius);
	background: #efe9e2;
	color: var(--gh-ink);
}

.feature__title {
	color: var(--gh-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 25px;
}

.feature__text {
	color: var(--gh-muted);
	font-size: 18px;
	line-height: 25px;
}

.feature__text strong {
	color: var(--gh-ink);
}

/* Team: photo beside name, bio and GMC number; two to a row with a divider. */
.team {
	padding-block: 64px 96px;
	background-position: center;
	background-size: contain;
}

.team .container {
	--gh-container: max(1250px, calc(100% - 330px));
}

.team .section-head .lead {
	max-width: 760px;
}

.team__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 96px;
	margin-top: 64px;
}

.team-member {
	position: relative;
	display: grid;
	grid-template-columns: 176px minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.team-member + .team-member::before {
	content: "";
	position: absolute;
	top: 15%;
	bottom: 15%;
	left: -48px;
	width: 1px;
	background: var(--gh-line);
}

.team-member__photo {
	width: 176px;
	height: 210px;
	border-radius: var(--gh-radius);
	object-fit: cover;
	object-position: top;
}

.team-member__name a {
	text-decoration: none;
}

.team-member__bio {
	margin: 12px 0 8px;
	color: var(--gh-muted);
	font-size: 18px;
	line-height: 25px;
}

.team-member__detail {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gh-line);
}

.team-member__detail span:last-child {
	color: var(--gh-steel);
}

/* Eligibility: blue split with a ticked list and a photo collage. */
.eligibility {
	padding-block: 64px;
	background: var(--gh-slate);
	color: var(--gh-white);
}

.eligibility__grid {
	--gh-container: max(1250px, calc(100% - 330px));

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 642px);
	gap: 80px;
	align-items: center;
}

.eligibility .section-head {
	gap: 16px;
}

.eligibility .section-head .lead {
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
}

.eligibility__list-title {
	margin-top: 44px;
	font: 500 24px/1.2 var(--gh-font-serif);
}

.eligibility__list {
	display: grid;
	gap: 14px;
	margin: 18px 0 36px;
	font-size: 18px;
	line-height: 24px;
}

.eligibility__list li {
	display: flex;
	gap: 8px;
}

.eligibility__list .icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.eligibility__note {
	max-width: 520px;
	margin-top: 20px;
	font-size: 16px;
	font-style: italic;
	font-weight: 600;
	line-height: 22px;
}

/* First two photos side by side on top, the rest in a row beneath. */
.eligibility__photos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px;
	overflow: hidden;
	border-radius: var(--gh-radius);
}

.eligibility__photos img {
	grid-column: span 2;
	width: 100%;
	height: 304px;
	object-fit: cover;
}

.eligibility__photos img:nth-child(-n + 2) {
	grid-column: span 3;
	height: 380px;
}

/* One image (e.g. a ready-made collage): full width at its own shape. */
.eligibility .eligibility__photos img:only-child {
	grid-column: 1 / -1;
	height: auto;
}

.journey__cta {
	margin-top: 24px;
}

/* Why choose us: heading on the left, icon items on the right. */
.why-us {
	padding-block: 96px;
}

.why-us__grid {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: 52px;
	align-items: center;
}

.why-us .section-head {
	gap: 20px;
}

.why-us .section-head .lead {
	line-height: 30px;
}

/* Centred heading above the package card. */
.package__head {
	margin-bottom: 40px;
}

/* Eligibility note centred under the whole section. */
.eligibility__note--below {
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 740px;
	margin-top: 0;
	text-align: center;
}

/* Footer (no menus): logo and tagline on the left; on the right the contacts, with the logos beneath
   spread to the same width, so they start under the email and end under the phone (design);
   copyright and social links beneath. */
.site-footer--landing .site-footer__inner {
	--footer-cols: minmax(0, 1fr) auto;
}

.site-footer--landing .site-footer__tagline {
	display: block;
	margin-top: 30px;
	font-size: 18px;
}

.site-footer__aside {
	display: grid;
}

.site-footer--landing .site-footer__contact {
	display: flex;
	gap: 40px;
}

.site-footer--landing .site-footer__logos {
	margin-top: 24px;
}

/* The space between logos is shared out evenly, with each divider line in the middle of its space. */
@media (min-width: 641px) {
	.site-footer--landing .site-footer__logos li {
		padding: 0;
		border: 0;
	}

	.site-footer--landing .site-footer__logos li + li {
		display: flex;
		flex: auto;
		align-items: center;
		padding-left: 24px;
		column-gap: 24px;
	}

	.site-footer--landing .site-footer__logos li + li::before {
		content: "";
		align-self: stretch;
		width: 1px;
		margin-inline: auto;
		background: rgb(255 255 255 / 0.3);
	}
}

@media (max-width: 1024px) {
	.landing-hero__grid {
		grid-template-columns: minmax(0, 1fr) 480px;
	}

	.landing-hero__title {
		font-size: 48px;
	}

	.split-photo__layout {
		grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);
		gap: 28px;
	}

	.features__grid,
	.why-us__grid,
	.team__list,
	.eligibility__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.feature + .feature {
		border-top: 1px solid var(--gh-line);
	}

	.why-us__grid {
		gap: 32px;
	}

	.team__list {
		gap: 48px;
	}

	.team-member + .team-member::before {
		content: none;
	}

	.eligibility__grid {
		gap: 40px;
	}

	/* Landing footer: copyright stays beside the social links. */
	.site-footer--landing .site-footer__copy {
		grid-row: auto;
		grid-column: auto;
	}
}

/* Tablets and phones: heading over the photo, then the strip, then the form on the page background. */
@media (max-width: 900px) {
	.landing-hero {
		display: flex;
		flex-direction: column;
	}

	.landing-hero::after {
		content: none;
	}

	.landing-hero__grid {
		display: contents;
	}

	.landing-hero__content {
		justify-content: flex-end;
		min-height: 740px;
		padding: 150px var(--gh-gutter) 72px;
	}

	.landing-hero__strip {
		order: 1;
	}

	.landing-hero__form {
		order: 2;
		padding: 16px 12px 0;
		background: var(--gh-page);
	}

	.rating--top {
		display: flex;
		margin-bottom: 16px;
	}

	.rating--strip {
		display: none;
	}

	.landing-hero__strip-inner {
		justify-content: center;
		min-height: 74px;
	}

	.split-photo__layout {
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
		margin-inline: auto;
		text-align: center;
	}

	.split-photo__layout::after {
		content: none;
	}
}

@media (max-width: 640px) {
	.landing-hero__content {
		min-height: 640px;
		padding-bottom: 56px;
	}

	.landing-hero__title {
		font-size: 36px;
	}

	/* The heading keeps its line break on phones too (design). */
	.landing-hero .landing-hero__title br {
		display: inline;
	}

	.landing-hero__text {
		margin: 16px 0 28px;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}

	.landing-hero__note {
		padding: 10px 22px;
		font-size: 20px;
	}

	.site-header .site-header__cta {
		height: 40px;
		padding-inline: 18px;
		font-size: 14px;
	}

	.split-photo .lead,
	.split-photo__text {
		font-size: 16px;
		line-height: 24px;
	}

	.split-photo__media {
		padding: 12px;
	}

	.feature {
		gap: 24px;
		padding-block: 18px;
	}

	.feature__icon {
		width: 56px;
		height: 56px;
	}

	.feature__title,
	.feature__text {
		font-size: 16px;
		line-height: 22px;
	}

	.team__list {
		margin-top: 28px;
	}

	.team-member {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.team-member__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 343 / 240;
	}

	.team-member__bio {
		font-size: 16px;
		line-height: 24px;
	}

	.section-cta {
		margin-top: 32px;
	}

	.eligibility .section-head .lead,
	.eligibility__list {
		font-size: 16px;
		line-height: 24px;
	}

	.eligibility__list-title {
		margin-top: 28px;
		font-size: 22px;
	}

	.eligibility__photos img {
		height: 205px;
	}

	.eligibility__photos img:nth-child(-n + 2) {
		height: 195px;
	}

	/* Landing footer on phones: the same centred column as the site footer. */
	.site-footer--landing .site-footer__aside {
		display: contents;
	}

	.site-footer--landing .site-footer__contact {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.site-footer--landing .site-footer__logos {
		justify-content: center;
		margin-top: 0;
	}

	/* Price cards one under another (when chosen for the section). */
	.pricing--stack .pricing__grid {
		display: grid;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

/* 7. Responsive ------------------------------------------------------------ */

@media (max-width: 1240px) {
	.journey__layout {
		grid-template-columns: 360px minmax(0, 1fr);
		gap: 40px;
	}

}

@media (max-width: 1024px) {
	:root {
		--gh-section-y: 48px;
	}

	.title {
		font-size: 40px;
	}

	.title--xl {
		font-size: 48px;
	}

	.site-header {
		--header-gap: 12px;

		right: 12px;
		left: 12px;
	}

	.site-header__bar {
		height: 64px;
		padding-left: 22px;
	}

	/* Landing pages have no menu button, so their header keeps the booking button. */
	body:not(.is-landing) .site-header__cta {
		display: none;
	}

	.site-header__toggle {
		position: relative;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		background: var(--gh-sand);
	}

	/* Two lines that turn into a cross. */
	.burger {
		position: relative;
		width: 20px;
		height: 12px;
	}

	.burger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: var(--gh-ink);
		transition: transform 0.35s var(--gh-ease), top 0.35s var(--gh-ease);
	}

	.burger span:first-child {
		top: 0;
	}

	.burger span:last-child {
		top: 10px;
	}

	[aria-expanded="true"] .burger span {
		top: 5px;
	}

	[aria-expanded="true"] .burger span:first-child {
		transform: rotate(45deg);
	}

	[aria-expanded="true"] .burger span:last-child {
		transform: rotate(-45deg);
	}

	/* Full-screen menu panel behind the header bar. */
	.site-nav {
		position: fixed;
		z-index: -1;
		inset: 0;
		display: flex;
		flex-direction: column;
		padding: calc(var(--wp-admin--admin-bar--height, 0px) + 104px) 28px 28px;
		overflow-y: auto;
		background:
			radial-gradient(120% 60% at 100% 0%, rgb(255 255 255 / 0.7), transparent 60%),
			var(--gh-sand);
		opacity: 0;
		visibility: hidden;
		transform: none;
		transition: opacity 0.35s var(--gh-ease), visibility 0.35s;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
	}

	.nav-open,
	.nav-open body {
		overflow: hidden;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 6px;
	}

	.site-nav__list > li {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s var(--gh-ease), transform 0.5s var(--gh-ease);
	}

	.site-nav.is-open .site-nav__list > li {
		opacity: 1;
		transform: none;
	}

	.site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: 0.05s; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: 0.1s; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: 0.15s; }
	.site-nav.is-open .site-nav__list > li:nth-child(n + 5) { transition-delay: 0.2s; }

	/* Every main item: a big serif row with an arrow (groups get a + that turns into −). */
	.site-nav__list > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 0;
		border-bottom: 1px solid var(--gh-border);
		color: var(--gh-ink);
		font: 500 30px/1.1 var(--gh-font-serif);
	}

	.site-nav__list > li > a::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-right: 6px;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.site-nav__list > .current-menu-item > a {
		color: var(--gh-steel);
	}

	/* Groups (Treatment, Pricing): tap the row to show or hide its pages. */
	.site-nav__list .menu-item-has-children > a::after {
		width: 14px;
		height: 14px;
		margin-right: 2px;
		border: 0;
		background:
			linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
			linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
		transform: none;
		transition: transform 0.25s var(--gh-ease);
	}

	.site-nav__list .menu-item-has-children.is-expanded > a::after {
		background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
		transform: rotate(180deg);
	}

	.site-nav__list .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		margin: 0;
		padding: 6px 0 12px;
		border-bottom: 1px solid var(--gh-border);
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}

	.site-nav__list .is-expanded > .sub-menu {
		display: block;
	}

	.site-nav__list .sub-menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 4px 12px 16px;
		border-left: 2px solid var(--gh-border);
		color: var(--gh-navy);
		font-size: 17px;
		font-weight: 600;
		line-height: 1.3;
		white-space: normal;
	}

	.site-nav__list .sub-menu a::after {
		content: "";
		flex-shrink: 0;
		width: 7px;
		height: 7px;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.site-nav__list .sub-menu a:active {
		background: rgb(255 255 255 / 0.6);
	}

	.site-nav__list .sub-menu .current-menu-item > a {
		border-left-color: var(--gh-navy);
		color: var(--gh-ink);
	}

	/* Booking button and contact details at the bottom of the menu. */
	.site-nav__extra {
		position: sticky;
		bottom: -28px;
		display: grid;
		gap: 12px;
		margin: auto -28px -28px;
		padding: 20px 28px 28px;
		background: var(--gh-sand);
		box-shadow: 0 -10px 20px rgb(243 241 237 / 0.9);
	}

	.site-nav__contact {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.site-nav__contact a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 48px;
		border: 1px solid var(--gh-border);
		border-radius: 999px;
		color: var(--gh-ink);
		font-weight: 600;
		text-decoration: none;
	}

	.hero {
		padding-block: 260px 56px;
	}

	.concerns__list {
		gap: 24px;
		margin-top: 40px;
	}

	.concerns__item:nth-child(n) {
		margin-top: 0;
	}

	.surgeons__grid {
		grid-template-columns: repeat(2, minmax(0, 440px));
	}

	.journey__layout {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 32px;
	}

	.page-hero {
		padding-top: 260px;
	}

	.profile {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.profile__aside {
		position: static;
	}

	.plan__grid {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	}

	.site-footer__inner {
		--footer-cols: minmax(0, 1fr) auto;

		padding: 64px 48px;
	}

	.site-footer__top {
		row-gap: 40px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	/* Bottom row: links and social icons, copyright on its own line beneath. */
	.site-footer__copy {
		grid-row: 2;
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.treatments__grid,
	.pricing__grid {
		grid-template-columns: minmax(0, 620px);
		justify-content: center;
	}

	.media-cards__list {
		grid-template-columns: minmax(0, 480px);
	}

	.package__card {
		grid-template-columns: minmax(0, 1fr);
		padding: 32px 24px;
	}

	.booking-split__grid,
	.contact-info__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.booking-split__img {
		max-height: 420px;
	}

	.booking-split {
		padding-top: 120px;
	}

	.checklist-card__card,
	.process-stack__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.checklist-card__img {
		aspect-ratio: 16 / 10;
	}

	.process-stack__list {
		gap: 24px;
	}

	.process-stack__item {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 92px);
	}

	.process-stack__item:nth-child(2) { top: calc(var(--wp-admin--admin-bar--height, 0px) + 100px); }
	.process-stack__item:nth-child(3) { top: calc(var(--wp-admin--admin-bar--height, 0px) + 108px); }
	.process-stack__item:nth-child(4) { top: calc(var(--wp-admin--admin-bar--height, 0px) + 116px); }
	.process-stack__item:nth-child(5) { top: calc(var(--wp-admin--admin-bar--height, 0px) + 124px); }
	.process-stack__item:nth-child(n + 6) { top: calc(var(--wp-admin--admin-bar--height, 0px) + 132px); }

	.process-stack__item img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.timeline-card img {
		height: 440px;
	}

	.hero--center .hero__title {
		font-size: 44px;
	}

	.hero--center .hero__content {
		margin-inline: auto;
	}

	.slider-arrow--prev {
		left: 8px;
	}

	.package__main {
		padding-right: 0;
	}

	.package__side {
		margin-top: 36px;
		padding: 32px 0 0;
		border-top: 1px solid rgb(255 255 255 / 0.3);
		border-left: 0;
	}

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

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

	.cta-card__img {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.page-intro {
		padding-block: 180px 96px;
	}

	.media-cards,
	.numbered-steps {
		padding-block: 72px;
	}

	.results__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* An odd last result card sits centred under the others. */
	.results:not(.results--slider) .result:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 10px);
	}

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

@media (max-width: 640px) {
	:root {
		--gh-gutter: 20px;
	}

	/* Designer line breaks only make sense at desktop widths. */
	.title br {
		display: none;
	}

	.title {
		font-size: 34px;
	}

	.title--md {
		font-size: 32px;
	}

	.title--xl {
		font-size: 40px;
	}

	.hero {
		padding-top: 180px;
	}

	.hero__text,
	.lead,
	.card__text {
		font-size: 16px;
	}

	.logo-list li {
		padding-inline: 16px;
	}

	.logo-list img {
		max-height: 34px;
	}

	.concerns__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.frame {
		padding: 12px;
	}

	.card {
		padding: 24px;
	}

	.results__grid,
	.surgeons__grid {
		grid-template-columns: 1fr;
	}

	.result:last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
	}

	.page-hero__title {
		font-size: 44px;
	}

	.stats {
		flex-wrap: wrap;
		gap: 16px;
	}

	.stats__item + .stats__item {
		padding-left: 16px;
	}

	.stats__value {
		font-size: 32px;
	}

	.stats__label {
		font-size: 16px;
	}

	/* Timeline on its own; the photo/video column is left out to keep the page short. */
	.journey__layout {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 36px;
	}

	.journey__photo {
		display: none;
	}

	.clinic-map__frame {
		height: calc(260px + var(--map-crop));
	}

	.clinic-map__card {
		position: static;
		width: auto;
		border: 0;
		border-top: 1px solid var(--gh-line);
		border-radius: 0;
	}

	.btn--lg {
		height: 54px;
		font-size: 16px;
	}

	.btn--lg .btn__circle {
		--btn-circle: 44px;
	}

	.price__title {
		font-size: 24px;
	}

	.numbered-steps__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* Line style on phones: the line runs down the left, numbers on it, text beside. */
	.numbered-steps--line .numbered-steps__list {
		margin-top: 32px;
		text-align: left;
	}

	.numbered-steps--line .numbered-steps__list::before {
		top: 0;
		right: auto;
		bottom: 0;
		left: 21px;
		width: 1px;
		height: auto;
	}

	.numbered-steps--line .numbered-steps__list > li {
		position: relative;
		padding-left: 64px;
	}

	.numbered-steps--line .numbered-steps__number {
		position: absolute;
		top: 0;
		left: 0;
		width: 44px;
		height: 44px;
		margin: 0;
		font-size: 16px;
	}

	.numbered-steps--line .numbered-steps__title {
		margin-top: 10px;
	}

	.numbered-steps--line .numbered-steps__text {
		max-width: none;
		margin-inline: 0;
	}

	.cta-card .button-row {
		gap: 20px;
	}

	.site-footer {
		padding: 12px;
	}

	.site-footer__inner {
		padding: 48px 24px;
		border-radius: var(--gh-radius-lg);
	}

	.site-footer__inner {
		--footer-cols: minmax(0, 1fr);
	}

	.site-footer__social {
		justify-self: start;
	}

	.site-footer__contact {
		font-size: 22px;
	}

	.site-footer__logos li {
		padding-inline: 14px;
	}
}

/* Mobile: one consistent, tighter rhythm, and long lists as swipeable rows. --------------------- */
@media (max-width: 640px) {
	main .section {
		padding-block: 44px;
	}

	/* Hero: 90% of the screen height, everything centred. */
	.hero,
	.hero--center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 90vh;
		min-height: 90svh;
		padding-block: 110px 48px;
	}

	.hero__content {
		text-align: center;
	}

	.hero .button-row {
		justify-content: center;
	}

	/* Design lines on phones: one under the header, one near the bottom (clear of the buttons). */
	.hero:not(.hero--center)::before {
		background:
			linear-gradient(var(--hero-line), var(--hero-line)) 0 110px / 100% 1px no-repeat,
			linear-gradient(var(--hero-line), var(--hero-line)) 0 calc(100% - 28px) / 100% 1px no-repeat;
	}

	.page-intro {
		padding-block: 130px 56px;
	}

	main .booking-split.section {
		padding-top: 100px;
	}

	.section-head {
		gap: 14px;
	}

	.section-head--tight .title {
		line-height: 1.1;
	}

	.section-note,
	.media-cards__note,
	.treatments__footnote,
	.package__note {
		margin-top: 24px;
		font-size: 16px;
		line-height: 24px;
	}

	.concerns__list,
	.results__grid,
	.media-cards__list,
	.pricing__grid,
	.numbered-steps__list,
	.process-stack__list,
	.checklist-card__card,
	.intro-image__img,
	.faq__list,
	.timeline-slider__wrap,
	.surgeons__grid {
		margin-top: 28px;
	}

	/* Swipeable rows: cards side by side, the next one peeking in. */
	.results__grid,
	.surgeons__grid,
	.media-cards__list,
	.pricing__grid {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		justify-content: flex-start;
		margin-inline: calc(-1 * var(--gh-gutter));
		padding-inline: var(--gh-gutter);
		overflow-x: auto;
		scroll-padding-inline: var(--gh-gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.results__grid::-webkit-scrollbar,
	.surgeons__grid::-webkit-scrollbar,
	.media-cards__list::-webkit-scrollbar,
	.pricing__grid::-webkit-scrollbar {
		display: none;
	}

	.results__grid > *,
	.surgeons__grid > *,
	.media-cards__list > *,
	.pricing__grid > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.price {
		padding: 26px 22px;
	}

	.price__title {
		margin-top: 20px;
	}

	.price__amount {
		margin-block: 22px 20px;
		font-size: 40px;
	}

	/* Process cards: compact, photo beside the text. */
	.process-stack__list {
		gap: 12px;
	}

	.process-stack__item {
		grid-template-columns: 36% minmax(0, 1fr);
	}

	.process-stack__item img {
		height: 100%;
		aspect-ratio: auto;
	}

	.process-stack__body {
		padding: 16px;
	}

	.process-stack__title {
		font-size: 17px;
	}

	.process-stack__text {
		margin-top: 6px;
		font-size: 14px;
		line-height: 20px;
	}

	.process-stack__cta {
		margin-top: 28px;
	}

	.numbered-steps__list {
		gap: 24px;
	}

	.numbered-steps__title,
	.numbered-steps__text {
		margin-top: 12px;
	}

	.checklist-card__body,
	.cta-card__body {
		padding: 24px 20px;
	}

	.checklist--circled li {
		font-size: 16px;
	}

	.timeline-card img {
		height: 380px;
	}

	.journey__step {
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 18px;
		padding-bottom: 24px;
	}

	.journey__step::before {
		top: 50px;
		left: 19px;
	}

	.journey__number {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}

	.journey__title {
		margin-top: 4px;
		font-size: 24px;
	}

	.timeline-card__body {
		padding: 110px 20px 28px;
	}

	.timeline-card__title {
		margin-top: 60px;
	}

	.timeline-card__text {
		font-size: 16px;
		line-height: 24px;
	}

	.timeline-slider__wrap {
		margin-top: 28px;
	}

	.faq__question {
		padding: 18px 20px;
		font-size: 16px;
	}

	.faq__answer {
		padding: 0 20px 18px;
	}

	.surgeon__name {
		margin-top: 14px;
	}

	.surgeon__bio {
		margin-block: 10px 12px;
		font-size: 16px;
		line-height: 23px;
	}

	.contact-info__grid {
		gap: 28px;
	}

	/* Scroll video on phones: a bit shorter, captions smaller. */
	.scroll-video {
		--sv-top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px);

		height: 300vh;
	}

	main .scroll-video.section {
		padding-block: 0;
	}

	.scroll-video__pin {
		padding-bottom: 20px;
	}

	.scroll-video .section-head {
		margin-bottom: 20px;
	}

	.scroll-video__captions {
		bottom: 40px;
		height: 170px;
	}

	.scroll-video__caption {
		right: 18px;
		left: 18px;
	}

	.scroll-video__caption .title {
		font-size: 26px;
	}

	.scroll-video__caption p {
		font-size: 15px;
		line-height: 22px;
	}

	.scroll-video__progress {
		right: 18px;
		bottom: 18px;
		left: 18px;
	}

	.next-step__list {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		margin-top: 28px;
	}

	.next-step__item {
		padding: 0;
	}

	.next-step__title {
		font-size: 28px;
	}

	.next-step__item + .next-step__item {
		padding-top: 28px;
		border-top: 1px solid var(--gh-border);
		border-left: 0;
	}

	/* Result cards: compact details that stay on one line. */
	.result {
		padding: 10px;
	}

	.result__photos {
		gap: 8px;
	}

	.result__photo .badge {
		top: 8px;
		left: 8px;
		padding: 2px 10px;
		font-size: 12px;
	}

	.result__meta {
		flex-wrap: wrap;
		gap: 6px 10px;
		margin-top: 8px;
	}

	.result__stage {
		gap: 10px;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
	}

	.result__age {
		font-weight: 400;
	}

	.result__age::before {
		margin-right: 6px;
	}

	.result .badge--soft {
		font-size: 12px;
		white-space: nowrap;
	}

	.result__detail {
		gap: 10px;
		margin-top: 14px;
		font-size: 13px;
		white-space: nowrap;
	}

	.result__detail::before {
		min-width: 12px;
	}
}


/* Phones – home page mobile design. ------------------------------------------------------------ */
@media (max-width: 640px) {
	/* Hero: larger heading and text, no design lines. */
	.hero .hero__title {
		font-size: 36px;
		line-height: 1.05;
	}

	.hero .hero__text {
		margin: 32px 0 56px;
		line-height: 26px;
	}

	.hero:not(.hero--center)::before {
		content: none;
	}

	/* Accreditation strip: bigger logos, no dividers. */
	.trust__list {
		padding-block: 24px;
	}

	.trust .logo-list li {
		padding-inline: 12px;
		border-left: 0;
	}

	.trust .logo-list img {
		max-height: 44px;
	}

	/* Hair-loss patterns: no button or hairline; crown first, as in the design. */
	.concerns .section-head .btn,
	.concerns__list::before {
		display: none;
	}

	.concerns__item:nth-child(4) { order: 1; }
	.concerns__item:nth-child(1) { order: 2; }
	.concerns__item:nth-child(3) { order: 3; }
	.concerns__item:nth-child(2) { order: 4; }

	.concerns__label {
		padding: 10px 4px 12px;
		font-size: 14px;
	}

	/* Card headings (surgeon names, treatment cards). */
	.title--md {
		font-size: 24px;
	}

	/* Treatment cards: centred headings, tighter text, no note underneath. */
	.treatments__card .title {
		align-self: center;
	}

	.treatments__card .card__text {
		margin: 20px 0 24px;
		line-height: 30px;
	}

	.treatments__footnote {
		display: none;
	}

	/* Journey: the video above the steps. */
	.journey__photo {
		display: block;
	}

	.journey__photo .frame__img {
		aspect-ratio: 320 / 560;
	}

	.journey__steps {
		margin-top: 32px;
	}

	.journey__text {
		font-size: 15px;
		line-height: 30px;
	}

	/* Surgeon profile: centred page heading, portrait photo. */
	.page-hero .container {
		text-align: center;
	}

	.page-hero__title {
		font-size: 36px;
	}

	.page-hero__text {
		margin-inline: auto;
	}

	.profile__photo {
		padding: 10px;
	}

	/* Picture cards (e.g. "What Does a PRP Session Involve?"): stacked full width instead of a swipe row. */
	.media-cards__list {
		display: grid;
		gap: 28px;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.media-card img {
		aspect-ratio: 336 / 378;
	}

	/* Call-to-action card: taller photo, everything centred. */
	.cta-card__body {
		text-align: center;
	}

	.cta-card .button-row {
		flex-direction: column;
		gap: 16px;
	}

	/* Treatment pages (mobile design): tall photos, process steps as full cards with the photo on top. */
	/* The wide photo, less cropped on phones; a phone image of its own shows at its own shape. */
	.intro-image__img {
		aspect-ratio: 343 / 240;
	}

	.intro-image__img--own-mobile {
		height: auto;
		aspect-ratio: auto;
	}

	.intro-image__img--left {
		object-position: 15% center;
	}

	.intro-image__img--right {
		object-position: 72% center;
	}

	.checklist-card__img {
		aspect-ratio: 343 / 366;
	}

	.checklist-card .checklist {
		font-size: 17px;
	}

	.process-stack__list {
		gap: 48px;
		margin-top: 56px;
	}

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

	.process-stack__item img {
		height: auto;
		aspect-ratio: 343 / 260;
	}

	.process-stack__body {
		padding: 18px 12px 20px;
	}

	.process-stack__title {
		font-size: 18px;
	}

	.process-stack__text {
		margin-top: 12px;
		font-size: 16px;
		line-height: 26px;
	}

	.process-stack .section-head .lead {
		color: var(--gh-muted);
		font-size: 18px;
		line-height: 30px;
	}

	.cta-card__img {
		aspect-ratio: 343 / 430;
	}

	/* Contact page (mobile design): heading close to the form, tall room photo under it. */
	.page-intro:has(+ .booking-split) {
		padding-block: 104px 8px;
	}

	main .page-intro + .booking-split.section {
		padding-top: 16px;
	}

	.booking-split__img {
		max-height: none;
		height: auto;
		aspect-ratio: 343 / 670;
		object-position: 18% center; /* keep the GRAFT sign in view */
	}

	/* Footer (mobile design): one centred column – logo, tagline, menu, accreditation logos, contact,
	   "follow us" with the icons, legal links, copyright – with thin lines between the groups. */
	.site-footer {
		padding: 0;
	}

	.site-footer__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48px 16px 28px;
		border-radius: var(--gh-radius-xl) var(--gh-radius-xl) 0 0;
		text-align: center;
	}

	.site-footer__top,
	.site-footer__brand,
	.site-footer__bottom {
		display: contents;
	}

	.site-footer__inner .logo { order: 1; }
	.site-footer__tagline { order: 2; }
	.site-footer__top > nav { order: 3; }
	.site-footer__logos { order: 4; }
	.site-footer__contact { order: 5; }
	.site-footer__follow { order: 6; }
	.site-footer__social { order: 7; }
	.site-footer__bottom .footer-links--inline { order: 8; }
	.site-footer__copy { order: 9; }

	.site-footer__tagline {
		display: block;
		width: 100%;
		margin-top: 22px;
		padding-bottom: 24px;
		border-bottom: 1px solid rgb(255 255 255 / 0.15);
		font-size: 16px;
		line-height: 24px;
	}

	.site-footer__top > nav,
	.site-footer__logos,
	.site-footer__contact {
		width: 100%;
		padding-block: 24px;
		border-bottom: 1px solid rgb(255 255 255 / 0.15);
	}

	.site-footer .footer-links:not(.footer-links--inline) {
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		gap: 18px 72px;
	}

	.site-footer__logos {
		justify-content: center;
		margin-top: 0;
	}

	.site-footer__logos li,
	.site-footer__logos li + li {
		padding-inline: 10px;
		border-left: 0;
	}

	.site-footer__contact {
		justify-items: center;
		gap: 14px;
		border-bottom: 0;
		font-size: 18px;
	}

	.site-footer__follow {
		display: block;
		margin-top: 8px;
		font-weight: 700;
	}

	.site-footer__social {
		justify-self: auto;
		justify-content: center;
		margin-top: 14px;
	}

	.site-footer__bottom .footer-links--inline {
		justify-content: center;
		width: 100%;
		margin-top: 32px;
		padding-top: 24px;
		border-top: 1px solid rgb(255 255 255 / 0.15);
	}

	.site-footer__copy {
		margin-top: 20px;
	}
}