/*
Theme Name: Lynnwood AcuCare Clinic
Theme URI: https://lynnwoodacucare.com/
Author: Inabia
Description: Modern, professional healthcare theme for Lynnwood AcuCare Clinic, built around the clinic's sage-green and gold identity.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: acucare
*/

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */
:root {
	--green-900: #2c3a22;
	--green-700: #3d4f30;
	--green:     #536942;
	--green-400: #7d9166;
	--green-100: #e6ece0;
	--gold:      #ffd936;
	--gold-600:  #dab200;
	--gold-100:  #fff6d1;
	--cream:     #f6f8f5;
	--ink:       #23291f;
	--body:      #55604c;
	--muted:     #7c8676;
	--line:      #e3e8de;
	--white:     #ffffff;

	--display: 'Forum', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--shadow-sm: 0 2px 8px rgba(44, 58, 34, .06);
	--shadow:    0 12px 32px rgba(44, 58, 34, .10);
	--shadow-lg: 0 24px 60px rgba(44, 58, 34, .16);

	--radius: 14px;
	--radius-lg: 22px;
	--wrap: 1200px;
	--header-h: 92px;
	--ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Component display rules (.btn, .slot-panel…) otherwise out-specify the
   UA's [hidden] rule, leaving hidden elements on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.75;
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	/* clip, not hidden — hidden would break every position:sticky on the site. */
	overflow-x: clip;
}

h1, h2, h3, h4 {
	font-family: var(--display);
	color: var(--green-700);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: .01em;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.15em; }
a { color: var(--green); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold-600); }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 3px solid var(--gold-600);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(72px, 9vw, 118px) 0; }
.section--cream { background: var(--cream); }
.section--tint { background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--green-700); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

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

/* ---------------------------------------------------------------
   3. Shared components
   --------------------------------------------------------------- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--sans);
	font-size: .78rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold-600);
	margin-bottom: 14px;
}
.eyebrow::before {
	content: ""; width: 28px; height: 2px;
	background: var(--gold); border-radius: 2px;
}

.section-head { max-width: 720px; margin: 0 auto clamp(44px, 5vw, 66px); text-align: center; }
.section-head .eyebrow::after {
	content: ""; width: 28px; height: 2px;
	background: var(--gold); border-radius: 2px;
}
.section-head h2 { margin-bottom: .28em; }
.section-head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; }
.section-head--left { margin-inline: 0; text-align: left; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--sans); font-size: .95rem; font-weight: 600;
	letter-spacing: .02em;
	padding: 15px 32px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--gold { background: var(--gold); color: var(--green-900); box-shadow: 0 8px 22px rgba(218, 178, 0, .32); }
.btn--gold:hover { background: var(--gold-600); color: var(--green-900); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(218, 178, 0, .42); }

.btn--green { background: var(--green); color: #fff; box-shadow: 0 8px 22px rgba(83, 105, 66, .28); }
.btn--green:hover { background: var(--green-700); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(83, 105, 66, .36); }

.btn--gradient {
	background: linear-gradient(135deg, var(--green-400) 0%, var(--green) 45%, var(--green-700) 100%);
	color: #fff;
	box-shadow: 0 10px 26px rgba(83,105,66,.32);
}
.btn--gradient:hover {
	background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 50%, var(--green-900) 100%);
	color: #fff; transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(83,105,66,.4);
}

.btn--outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn--outline:hover { background: var(--green); color: #fff; transform: translateY(-3px); }

.btn--ghost { border-color: rgba(255,255,255,.65); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: #fff; color: var(--green-700); border-color: #fff; transform: translateY(-3px); }

/* Shimmer sweep on hover */
.btn::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

.btn:disabled {
	opacity: .42; cursor: not-allowed;
	transform: none !important; box-shadow: none !important;
}
.btn:disabled::after { display: none; }

/* ---------------------------------------------------------------
   4. Header
   --------------------------------------------------------------- */
.topbar {
	background: var(--green-900);
	color: rgba(255,255,255,.82);
	font-size: .8rem;
	letter-spacing: .015em;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.topbar__list { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: var(--gold); }
.topbar__badge {
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,.72);
	font-weight: 500; font-size: .78rem;
	letter-spacing: .08em; text-transform: uppercase;
}
.topbar__badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .35s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 4px 24px rgba(44, 58, 34, .09); }

.site-header__inner {
	display: flex; align-items: center; gap: 40px;
	min-width: 0;
	min-height: var(--header-h);
	transition: min-height .35s var(--ease);
}
.site-header.is-stuck .site-header__inner { min-height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; margin-right: auto; }
.brand img { width: 50px; height: 50px; transition: width .35s var(--ease), height .35s var(--ease); }
.site-header.is-stuck .brand img { width: 43px; height: 43px; }
.brand__name {
	font-family: var(--display); font-size: 1.4rem;
	color: var(--green-900); line-height: 1.05;
}
.brand__tag {
	display: block; font-family: var(--sans);
	font-size: .63rem; font-weight: 600; letter-spacing: .2em;
	text-transform: uppercase; color: var(--gold-600); margin-top: 3px;
}

.nav { display: flex; align-items: center; }
.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
	display: block; position: relative;
	padding: 10px 18px;
	font-size: .94rem; font-weight: 500;
	color: var(--ink);
}
.nav a::after {
	content: ""; position: absolute; left: 18px; right: 18px; bottom: 2px;
	height: 2px; background: var(--gold); border-radius: 2px;
	transform: scaleX(0); transform-origin: left;
	transition: transform .32s var(--ease);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--green); }
.nav a:hover::after, .nav .current-menu-item > a::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
	width: 42px; height: 42px; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 50%;
	background: var(--white); color: var(--green-700);
	cursor: pointer; padding: 0;
	transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }

.header__phone {
	display: inline-flex; align-items: center; gap: 11px;
	padding-right: 18px; margin-right: 4px;
	border-right: 1px solid var(--line);
}
.header__phone svg { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 50%; background: var(--gold-100); color: var(--gold-600); }
.header__phone span { display: block; font-size: .95rem; font-weight: 600; color: var(--green-900); line-height: 1.2; }
.header__phone small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.header__actions .btn { padding: 13px 26px; }

/* Search panel */
.search-panel {
	display: grid; grid-template-rows: 0fr;
	background: var(--cream); border-bottom: 1px solid transparent;
	transition: grid-template-rows .4s var(--ease), border-color .4s var(--ease);
}
.search-panel.is-open { grid-template-rows: 1fr; border-bottom-color: var(--line); }
.search-panel__inner { overflow: hidden; }
.search-panel form { display: flex; gap: 12px; padding: 22px 0; }
.search-panel input[type="search"] {
	flex: 1; font-family: var(--sans); font-size: 1rem;
	padding: 14px 18px; border: 1.5px solid var(--line);
	border-radius: 999px; background: #fff; color: var(--ink);
}
.search-panel input[type="search"]:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 4px rgba(125,145,102,.15); }

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--line); border-radius: 50%;
	background: #fff; cursor: pointer;
	padding: 0; position: relative;
}
.nav-toggle span {
	position: absolute; left: 12px; width: 18px; height: 2px;
	background: var(--green-700); border-radius: 2px;
	transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------
   5. Hero slider
   --------------------------------------------------------------- */
.hero {
	position: relative;
	display: grid; align-items: center;
	min-height: min(86vh, 780px);
	isolation: isolate; overflow: hidden;
	background: var(--cream);
}

/* Backdrop layer: photos cross-fade beneath one constant wash, so the
   gradient never flickers between slides. */
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__stage::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(100deg,
		rgba(255,255,255,.97) 0%,
		rgba(255,255,255,.95) 24%,
		rgba(255,255,255,.78) 40%,
		rgba(255,255,255,.34) 56%,
		rgba(255,255,255,.04) 72%,
		rgba(255,255,255,0) 100%);
}

.hero__slide {
	position: absolute; inset: 0; z-index: 1;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--slide-img);
	background-size: cover; background-position: center right;
	transform: scale(1.05);
	transition: transform 9s linear;
}
.hero__slide.is-active::before { transform: scale(1); }
/* Video slides skip the Ken Burns drift — the footage already moves. */
.hero__slide--video::before { animation: none; transition: none; transform: none; }

/* Video backdrop. The iframe is scaled to cover the hero, so it crops rather
   than letterboxes at any aspect ratio. The still underneath shows until the
   player is ready, and remains wherever autoplay is refused. */
.hero__video {
	position: absolute; inset: 0; overflow: hidden;
	pointer-events: none;
}
.hero__video iframe {
	position: absolute; top: 50%; left: 50%;
	width: 100vw; height: 56.25vw;          /* 16:9 by viewport width  */
	min-height: 100%; min-width: 177.78vh;  /* …and by viewport height */
	transform: translate(-50%, -50%);
	border: 0;
}

.hero__inner {
	position: relative; z-index: 2;
	padding: clamp(78px, 9vw, 116px) 0 clamp(132px, 14vw, 172px);
}
.hero__content { max-width: 640px; }

/* Slides stack in one grid cell, so the row is as tall as the longest
   copy and the CTA below it never moves. */
.hero__copy { display: grid; margin-bottom: 36px; }
.hero__text {
	grid-area: 1 / 1;
	opacity: 0; visibility: hidden;
	transition: opacity .7s var(--ease), visibility .7s;
}
.hero__text.is-active { opacity: 1; visibility: visible; }

.hero__badge {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 20px 9px 16px;
	border: 1px solid var(--line); border-radius: 999px;
	background: rgba(255,255,255,.92);
	font-size: .73rem; font-weight: 600;
	letter-spacing: .17em; text-transform: uppercase;
	color: var(--green-700);
	margin-bottom: 24px;
}
.hero__badge::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--gold-600);
}

.hero h1 {
	color: var(--green-900);
	font-size: clamp(2.5rem, 4.7vw, 3.9rem);
	line-height: 1.09;
	margin-bottom: .34em;
}
.hero h1 em { font-style: normal; color: var(--green); }

.hero__sub {
	color: var(--body);
	font-size: clamp(1.02rem, 1.25vw, 1.12rem);
	max-width: 500px; margin: 0;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.hero__link {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: .88rem; font-weight: 600;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--green-700);
	padding: 15px 18px;
}
.hero__link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.hero__link:hover { color: var(--gold-600); }
.hero__link:hover svg { transform: translateX(5px); }

/* Copy entrance — replays per slide, never touches the CTA. */
/* Staggered entrance via transitions, not keyframes: a transition's specified
   value is the end state, so the copy still renders correctly if the animation
   never gets a frame. Matches how .reveal works elsewhere. */
.hero__text .anim {
	opacity: 0; transform: translateY(20px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero__text.is-active .anim { opacity: 1; transform: none; }
.hero__text.is-active .anim:nth-child(1) { transition-delay: .06s; }
.hero__text.is-active .anim:nth-child(2) { transition-delay: .16s; }
.hero__text.is-active .anim:nth-child(3) { transition-delay: .26s; }

/* Vertical slider controls */
.hero__controls {
	position: absolute; z-index: 3;
	right: clamp(10px, 1.4vw, 24px);
	top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 13px;
	padding: 13px 11px;
	border-radius: 999px;
	background: rgba(255,255,255,.74);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(83,105,66,.13);
	box-shadow: 0 8px 28px rgba(44,58,34,.10);
}
.hero__arrow {
	width: 40px; height: 40px; flex: none;
	display: grid; place-items: center;
	border: 1px solid rgba(83,105,66,.22); border-radius: 50%;
	background: #fff;
	color: var(--green-700); cursor: pointer; padding: 0;
	transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.hero__arrow svg { width: 16px; height: 16px; }
.hero__arrow:hover { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); }

.hero__index {
	font-family: var(--display); font-size: 1.02rem;
	color: var(--green-900); line-height: 1;
}
.hero__total { font-family: var(--display); font-size: .95rem; color: var(--green-400); line-height: 1; }

.hero__track {
	width: 3px; height: 74px; border-radius: 3px;
	background: rgba(83,105,66,.18);
	position: relative; overflow: hidden;
}
.hero__track span {
	position: absolute; inset: 0;
	background: var(--gold-600); border-radius: 2px;
	transform-origin: top; transform: scaleY(0);
	animation: trackY var(--slide-delay, 6.5s) linear forwards;
}
.hero.is-paused .hero__track span { animation-play-state: paused; }
@keyframes trackY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes trackX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------
   6. Booking strip (form, below the slider)
   --------------------------------------------------------------- */
/* The hero controls sit 78-92px above the hero's bottom edge, so the strip
   overlaps by less than that to leave the dots and counter clear. */
.booking-strip { position: relative; z-index: 5; margin-top: -50px; }

.booking-form {
	position: relative; overflow: hidden;
	background: var(--green-700);
	border-radius: var(--radius-lg);
	box-shadow: 0 26px 60px rgba(30,42,22,.28);
	border-top: 4px solid var(--gold);
	padding: 26px 32px 30px;
}
/* Soft gold bloom so the flat green does not read as a solid block. */
.booking-form::before {
	content: ""; position: absolute;
	width: 420px; height: 420px; top: -260px; right: -120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,54,.18) 0%, transparent 70%);
	pointer-events: none;
}
.booking-form > * { position: relative; z-index: 1; }

.booking-form__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px 28px; flex-wrap: wrap;
	padding-bottom: 18px; margin-bottom: 22px;
	border-bottom: 1px solid rgba(255,255,255,.16);
}

.booking-form__intro { display: flex; align-items: center; gap: 14px; min-width: 0; }
.booking-form__icon {
	width: 46px; height: 46px; flex: none;
	display: grid; place-items: center;
	border-radius: 13px;
	background: rgba(255,217,54,.16);
	border: 1px solid rgba(255,217,54,.34);
	color: var(--gold);
}
.booking-form__icon svg { width: 22px; height: 22px; }

.booking-form__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.booking-form__title {
	font-family: var(--display); font-size: 1.42rem;
	color: #fff; line-height: 1.1;
}
.booking-form__sub {
	font-size: .82rem; color: rgba(255,255,255,.66);
	letter-spacing: .01em;
}

/* Meta reads as discrete facts rather than one run-on sentence. */
.booking-form__meta {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 10px 20px; list-style: none; margin: 0; padding: 0;
}
.booking-form__meta li {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0; font-size: .84rem; color: rgba(255,255,255,.8);
	white-space: nowrap;
}
.booking-form__meta li + li::before {
	content: ""; position: absolute; left: -10px; top: 50%;
	width: 1px; height: 15px; margin-top: -7px;
	background: rgba(255,255,255,.2);
}
.booking-form__meta svg { width: 15px; height: 15px; flex: none; color: var(--gold); }

.booking-form__grid {
	display: grid;
	grid-template-columns: 1.15fr 1.3fr 1.05fr auto;
	gap: 16px; align-items: end;
}

.bf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bf-field label {
	font-size: .72rem; font-weight: 600;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--gold);
}
.bf-field input {
	font-family: var(--sans); font-size: .95rem; color: var(--ink);
	width: 100%; padding: 13px 15px;
	border: 1.5px solid transparent; border-radius: 10px;
	background: #fff;
	transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.bf-field input::placeholder { color: #a9b2a2; }
.bf-field input:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 4px rgba(255,217,54,.28);
}

.booking-form__submit { white-space: nowrap; padding: 14px 28px; }

/* ---------------------------------------------------------------
   6b. Slot picker
   --------------------------------------------------------------- */
.slot-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }

.slot-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(24,34,17,.62); backdrop-filter: blur(4px);
}

.slot-modal__panel {
	position: relative;
	width: min(100%, 980px); max-height: min(94vh, 850px);
	display: flex; flex-direction: column;
	background: #fff; border-radius: 20px;
	box-shadow: 0 40px 90px rgba(18,26,12,.42);
	overflow: hidden;
	transform: none;
	transition: transform .42s var(--ease);
}

/* Entrance animates movement only — never opacity. If the transition is
   dropped or throttled the dialog is still fully visible, just un-slid,
   rather than leaving an invisible panel over a dimmed page. */
.slot-modal.is-entering .slot-modal__panel { transform: translateY(22px) scale(.99); }

/* --- Header --------------------------------------------------- */
.slot-modal__head {
	position: relative;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	padding: 26px 30px 24px;
	background: var(--green-700);
	color: #fff;
}
.slot-modal__head::after {
	content: ""; position: absolute;
	width: 320px; height: 320px; top: -220px; right: -80px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,54,.22) 0%, transparent 70%);
	pointer-events: none;
}
.slot-modal__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 8px;
}
.slot-modal__eyebrow::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.slot-modal__head h3 { font-size: 1.62rem; color: #fff; margin: 0 0 5px; }
.slot-modal__head p { margin: 0; font-size: .87rem; color: rgba(255,255,255,.76); }

.slot-modal__close {
	position: relative; z-index: 1;
	width: 38px; height: 38px; flex: none;
	display: grid; place-items: center;
	border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
	background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.slot-modal__close svg { width: 17px; height: 17px; }
.slot-modal__close:hover { background: #fff; color: var(--green-700); transform: rotate(90deg); }

/* --- Body: day rail + times ----------------------------------- */
.slot-body {
	display: grid; grid-template-columns: 292px 1fr;
	flex: 1; min-height: 0; min-width: 0;
}

.slot-days {
	display: flex; flex-direction: column;
	min-height: 0; min-width: 0;
	background: var(--cream);
	border-right: 1px solid var(--line);
}

.slot-week {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 14px 12px;
	border-bottom: 1px solid var(--line);
}
.slot-week__label {
	font-family: var(--display); font-size: 1rem;
	color: var(--green-900); text-align: center; flex: 1;
}
.slot-nav {
	width: 32px; height: 32px; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 50%;
	background: #fff; color: var(--green-700); cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.slot-nav svg { width: 14px; height: 14px; }
.slot-nav:hover:not(:disabled) { background: var(--green); color: #fff; border-color: var(--green); }
.slot-nav:disabled { opacity: .3; cursor: not-allowed; }

.slot-days__list {
	flex: 1; overflow-y: auto;
	padding: 9px;
	display: flex; flex-direction: column; gap: 3px;
}

/* Each day is a row: calendar tile, name, and how much is open. */
.slot-day {
	display: flex; align-items: center; gap: 12px;
	width: 100%; padding: 7px 12px 7px 7px;
	border: 1.5px solid transparent; border-radius: 13px;
	background: transparent; cursor: pointer; text-align: left;
	transition: background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.slot-day:hover:not(:disabled) { background: #fff; border-color: var(--green-100); transform: translateX(2px); }

.slot-day__cal {
	width: 44px; height: 44px; flex: none;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border-radius: 11px; background: #fff;
	border: 1px solid var(--line);
	transition: background .24s var(--ease), border-color .24s var(--ease), color .24s var(--ease);
}
.slot-day__dow {
	font-size: .6rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.slot-day__num {
	font-family: var(--display); font-size: 1.16rem;
	line-height: 1.1; color: var(--green-900);
}
.slot-day__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-day__name {
	font-size: .93rem; font-weight: 600; color: var(--green-900);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-day__note { font-size: .78rem; color: var(--muted); }

/* How many times the patient has chosen on this day. */
.slot-day__count {
	margin-left: auto; flex: none;
	min-width: 23px; height: 23px; padding: 0 6px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--green); color: #fff;
	font-size: .73rem; font-weight: 700;
	box-shadow: 0 2px 6px rgba(83,105,66,.3);
}
.slot-day.is-active .slot-day__count { background: var(--gold); color: var(--green-900); box-shadow: none; }

.slot-day.is-today .slot-day__cal { border-color: var(--gold); }

.slot-day.is-active {
	background: #fff; border-color: var(--green);
	box-shadow: 0 6px 18px rgba(83,105,66,.14);
}
.slot-day.is-active .slot-day__cal { background: var(--green); border-color: var(--green); }
.slot-day.is-active .slot-day__dow { color: rgba(255,255,255,.8); }
.slot-day.is-active .slot-day__num { color: #fff; }
.slot-day.is-active .slot-day__note { color: var(--green); font-weight: 600; }

.slot-day.is-active:hover:not(:disabled) { border-color: var(--green); background: #fff; }


/* --- Times panel ---------------------------------------------- */
.slot-times { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; }

.slot-times__head { padding: 22px 28px 16px; border-bottom: 1px solid var(--line); }
.slot-times__date { font-size: 1.28rem; margin: 0 0 3px; color: var(--green-900); }
.slot-times__count { margin: 0; font-size: .84rem; color: var(--muted); }
.slot-hint {
	margin: 8px 0 0; font-size: .8rem; color: var(--green);
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--green-100); padding: 6px 12px; border-radius: 999px;
}

.slot-times__body { flex: 1; overflow-y: auto; padding: 20px 28px 26px; }

.slot-group {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 12px;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600);
}
.slot-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.slot-group + .slot-chips { margin-bottom: 24px; }

.slot-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
	gap: 10px;
}

.slot-chip {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	padding: 13px 8px;
	font-family: var(--sans); font-size: .92rem; font-weight: 600;
	color: var(--green-700);
	border: 1.5px solid var(--line); border-radius: 11px;
	background: #fff; cursor: pointer; white-space: nowrap;
	transition: border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease),
		transform .22s var(--ease), box-shadow .22s var(--ease);
}
.slot-chip:hover:not(:disabled) {
	border-color: var(--green-400); background: var(--green-100);
	transform: translateY(-2px); box-shadow: 0 6px 16px rgba(83,105,66,.14);
}
.slot-chip.is-selected {
	background: var(--green); border-color: var(--green); color: #fff;
	box-shadow: 0 8px 20px rgba(83,105,66,.32);
}
/* Tick badge on the chosen time. */
.slot-chip.is-selected::after {
	content: ""; position: absolute; top: -6px; right: -6px;
	width: 19px; height: 19px; border-radius: 50%;
	background: var(--gold); border: 2px solid #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3a22' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 11px; background-repeat: no-repeat; background-position: center;
}
/* :hover:not(:disabled) out-specifies .is-selected, so a chosen chip needs its
   own hover rule or the white label lands on the pale hover background. */
.slot-chip.is-selected:hover:not(:disabled) {
	background: var(--green-700); border-color: var(--green-700); color: #fff;
}

.slot-chip.is-taken {
	background: repeating-linear-gradient(135deg, #f5f7f3 0 5px, #ecefe8 5px 10px);
	border-color: transparent; color: #aab2a3;
	cursor: not-allowed; text-decoration: line-through;
}

/* Empty week */
.slot-none {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; height: 100%; padding: 40px 20px; gap: 6px;
}
.slot-none svg { width: 46px; height: 46px; color: var(--green-100); margin-bottom: 8px; }
.slot-none__title { margin: 0; font-family: var(--display); font-size: 1.16rem; color: var(--green-700); }
.slot-none__hint { margin: 0; font-size: .87rem; color: var(--muted); max-width: 320px; }

/* --- Progress stepper ----------------------------------------- */
.slot-steps {
	display: flex; align-items: stretch;
	list-style: none; margin: 0; padding: 14px 28px;
	background: var(--cream); border-bottom: 1px solid var(--line);
	gap: 10px;
}

.slot-step {
	flex: 1;
	display: flex; align-items: center; gap: 12px;
	position: relative;
	padding: 8px 10px;
	border-radius: 12px;
	transition: background .3s var(--ease);
}
.slot-step + .slot-step::before {
	content: ""; position: absolute; left: -14px; top: 50%;
	width: 12px; height: 2px; margin-top: -1px;
	background: var(--line); border-radius: 2px;
}
.slot-step.is-active { background: #fff; box-shadow: 0 4px 14px rgba(44,58,34,.08); }

.slot-step__icon {
	width: 38px; height: 38px; flex: none;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: #fff; color: var(--muted);
	transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slot-step__icon svg { width: 17px; height: 17px; }
.slot-step.is-active .slot-step__icon {
	background: var(--green); border-color: var(--green); color: #fff;
}
.slot-step.is-done .slot-step__icon {
	background: var(--gold); border-color: var(--gold); color: var(--green-900);
}

.slot-step__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slot-step__num {
	font-size: .64rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.slot-step__label {
	font-size: .92rem; font-weight: 600; color: var(--green-900);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-step.is-active .slot-step__num { color: var(--gold-600); }

/* --- Step panels ---------------------------------------------- */
.slot-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.slot-panel__scroll { flex: 1; overflow-y: auto; padding: 24px 28px 26px; }

.slot-section {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 16px;
	font-family: var(--display); font-size: 1.16rem; color: var(--green-900);
}
.slot-section::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.slot-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.slot-fields .bf-field--wide { grid-column: 1 / -1; }
.slot-fields textarea {
	font-family: var(--sans); font-size: .95rem; color: var(--ink);
	width: 100%; min-height: 104px; resize: vertical;
	padding: 13px 15px;
	border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
	transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.slot-fields textarea:focus {
	outline: none; border-color: var(--green-400);
	box-shadow: 0 0 0 4px rgba(125,145,102,.16);
}
.slot-fields .bf-field label { color: var(--green-700); }
.slot-fields .bf-field .req { color: #c0392b; }
.slot-fields .bf-field input,
.slot-fields .bf-field select {
	font-family: var(--sans); font-size: .95rem; color: var(--ink);
	width: 100%; padding: 13px 15px;
	border: 1.5px solid var(--line); border-radius: 10px;
	background: #fff;
	transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.slot-fields .bf-field input::placeholder { color: #a9b2a2; }
.slot-fields .bf-field input:focus,
.slot-fields .bf-field select:focus {
	outline: none; border-color: var(--green-400);
	box-shadow: 0 0 0 4px rgba(125,145,102,.16);
}

/* Radio and checkbox groups from a booking form's field list. The group title
   keeps the field-label look; each choice reads as ordinary text. */
.slot-fields .bf-choices { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 2px; }
.slot-fields .bf-field .bf-choice {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .94rem; font-weight: 400; letter-spacing: 0; text-transform: none;
	color: var(--ink); cursor: pointer;
}
.slot-fields .bf-field .bf-choice input {
	width: 18px; height: 18px; padding: 0; margin: 0; flex: none;
	border: 0; box-shadow: none;
	accent-color: var(--green); cursor: pointer;
}

/* Time field that opens the picker (used on light cards). */
.slot-trigger {
	display: flex; align-items: center; gap: 11px;
	width: 100%; padding: 14px 16px;
	font-family: var(--sans); font-size: .95rem;
	color: var(--muted); text-align: left;
	border: 1.5px dashed var(--line); border-radius: 11px;
	background: var(--cream); cursor: pointer;
	transition: border-color .28s var(--ease), color .28s var(--ease), background .28s var(--ease);
}
.slot-trigger svg { width: 18px; height: 18px; flex: none; color: var(--gold-600); }
.slot-trigger__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-trigger:hover { border-color: var(--green-400); color: var(--green-700); background: #fff; }
.slot-trigger.has-slot {
	border-style: solid; border-color: var(--green);
	background: var(--green-100); color: var(--green-700); font-weight: 600;
}
.slot-trigger.has-slot svg { color: var(--green); }

/* Chosen times listed under the field. */
.slot-picked {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 12px 0 0; padding: 0;
}
.slot-picked__item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 8px 7px 14px;
	border: 1.5px solid var(--green-100); border-radius: 999px;
	background: #fff;
	font-size: .84rem; font-weight: 600; color: var(--green-700);
}
.slot-picked__remove {
	width: 20px; height: 20px; flex: none;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--green-100); color: var(--green-700);
	cursor: pointer; padding: 0;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.slot-picked__remove svg { width: 11px; height: 11px; }
.slot-picked__remove:hover { background: #c0392b; color: #fff; }

/* --- Insurance ------------------------------------------------- */
.slot-ins { margin-top: 0; }
/* Insurance leads the step, so the separation sits before the details. */
.slot-ins + .slot-section { margin-top: 32px; }
.slot-fields + .slot-section { margin-top: 32px; }
.form-card .slot-section:first-of-type { margin-top: 4px; }
.form-card .slot-trigger + [hidden] + .btn { margin-top: 22px; }
.slot-ins__intro {
	margin: 0 0 16px; font-size: .93rem; line-height: 1.7; color: var(--body);
}
.slot-ins__intro strong { color: var(--green-700); font-weight: 600; }
.slot-ins__intro a { font-weight: 600; }

.slot-check {
	display: flex; align-items: center; gap: 11px;
	padding: 13px 16px; margin-bottom: 18px;
	border: 1.5px solid var(--line); border-radius: 11px;
	background: var(--cream); cursor: pointer;
	font-size: .94rem; color: var(--green-900);
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.slot-check:hover { border-color: var(--green-400); }
.slot-check input {
	width: 18px; height: 18px; flex: none;
	accent-color: var(--green); cursor: pointer; margin: 0;
}
.slot-check:has(input:checked) { border-color: var(--green); background: var(--green-100); }


/* The dialog form is the flex column that holds the steps. */
.slot-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* --- Date picker ----------------------------------------------- */
input.has-datepicker { cursor: pointer; background-image: none; }

.dp {
	position: fixed; z-index: 300;
	width: 322px;
	background: #fff;
	border: 1px solid var(--line); border-radius: 16px;
	box-shadow: 0 24px 60px rgba(20,28,15,.24);
	padding: 14px;
	font-family: var(--sans);
}

.dp__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dp__selects { display: flex; gap: 6px; flex: 1; min-width: 0; }
.dp__month, .dp__year {
	flex: 1; min-width: 0;
	font-family: var(--sans); font-size: .85rem; font-weight: 600;
	color: var(--green-900);
	padding: 8px 8px; border: 1.5px solid var(--line); border-radius: 9px;
	background: var(--cream); cursor: pointer;
}
.dp__month { flex: 1.6; }
.dp__month:focus, .dp__year:focus {
	outline: none; border-color: var(--green-400);
	box-shadow: 0 0 0 3px rgba(125,145,102,.18);
}

.dp__nav {
	width: 32px; height: 32px; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 50%;
	background: #fff; color: var(--green-700); cursor: pointer;
	transition: background .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
}
.dp__nav svg { width: 14px; height: 14px; }
.dp__nav:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
.dp__nav:disabled { opacity: .3; cursor: not-allowed; }

.dp__grid {
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 2px; margin-bottom: 10px;
}
.dp__dow {
	display: grid; place-items: center;
	height: 28px;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

.dp__day {
	height: 34px;
	display: grid; place-items: center;
	font-family: var(--sans); font-size: .86rem; font-weight: 500;
	color: var(--green-900);
	border: 1.5px solid transparent; border-radius: 9px;
	background: none; cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.dp__day:hover:not(:disabled) { background: var(--green-100); }
.dp__day:disabled { color: #c8cec3; cursor: not-allowed; }
.dp__day.is-today { border-color: var(--gold); }
.dp__day.is-selected {
	background: var(--green); border-color: var(--green); color: #fff; font-weight: 600;
}
.dp__day.is-selected:hover:not(:disabled) { background: var(--green-700); color: #fff; }
.dp__day:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }

.dp__foot {
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 10px; border-top: 1px solid var(--line);
}
.dp__action {
	font-family: var(--sans); font-size: .82rem; font-weight: 600;
	padding: 7px 12px; border-radius: 8px;
	border: 0; background: none; color: var(--muted); cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.dp__action:hover { background: var(--cream); color: var(--green-700); }
.dp__action.is-primary { color: var(--green); }
.dp__action.is-primary:hover { background: var(--green-100); }

/* --- Footer --------------------------------------------------- */
.slot-modal__foot {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	padding: 16px 28px;
	border-top: 1px solid var(--line); background: var(--cream);
}
/* Was an Available/Taken key for the old time grid; now the picker's hint,
   sitting in the footer where that key used to be. */
.slot-legend {
	margin: 0; font-size: .8rem; color: var(--green);
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--green-100); padding: 6px 12px; border-radius: 999px;
}

.slot-back {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px;
	font-family: var(--sans); font-size: .88rem; font-weight: 600;
	color: var(--green-700);
	border: 1.5px solid var(--line); border-radius: 999px;
	background: #fff; cursor: pointer;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.slot-back svg { width: 15px; height: 15px; }
.slot-back:hover { border-color: var(--green); background: var(--green-100); }

.slot-chosen { margin: 0 0 0 auto; font-size: .9rem; color: var(--muted); }
.slot-chosen.is-set {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--green-700); font-weight: 600;
}
.slot-chosen.is-set::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
.slot-chosen.is-capped {
	color: #c0392b;
	animation: chosenNudge .3s var(--ease) 2;
}
@keyframes chosenNudge { 50% { transform: translateX(-3px); } }

/* Scrollbars for the booking dialog and picker are themed together at the
   end of this file. */

/* ---------------------------------------------------------------
   7. Stats strip
   --------------------------------------------------------------- */
.stats-head {
	display: flex; align-items: center; gap: 11px;
	font-size: .76rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--green-700); margin-bottom: 30px;
}
.stats-head::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--gold-600); flex: none;
}
.stats-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Widget cards rather than floating rings: each carries an icon, a counter,
   a label and a progress bar, so it reads as a measured figure. */
.stat {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column;
	padding: 24px 24px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 10px 26px rgba(44,58,34,.07);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.stat:hover {
	transform: translateY(-7px);
	box-shadow: 0 26px 52px rgba(44,58,34,.16);
	border-color: transparent;
}

/* Corner wash that blooms on hover. */
.stat::before {
	content: ""; position: absolute; top: -60px; right: -60px;
	width: 170px; height: 170px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,54,.22) 0%, transparent 70%);
	opacity: 0; transform: scale(.7);
	transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.stat:hover::before { opacity: 1; transform: scale(1); }

.stat__top {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 16px;
}
.stat__icon {
	width: 46px; height: 46px; flex: none;
	display: grid; place-items: center; border-radius: 13px;
	background: var(--green-100); color: var(--green);
	transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.stat__icon svg { width: 22px; height: 22px; }
.stat:hover .stat__icon {
	background: var(--green); color: #fff; transform: rotate(-6deg);
}
.stat__index {
	font-family: var(--display); font-size: .92rem;
	color: var(--muted); letter-spacing: .06em;
}

.stat__value {
	position: relative; z-index: 1;
	font-family: var(--display);
	font-size: clamp(2.5rem, 3.6vw, 3.2rem);
	line-height: 1; color: var(--green);
	margin: 0 0 10px;
}
.stat__plain { font-size: 1.44rem; letter-spacing: .01em; }

.stat h3 {
	position: relative; z-index: 1;
	font-family: var(--sans);
	font-size: 1rem; font-weight: 700;
	color: var(--green-900); margin: 0 0 4px;
}
.stat__note {
	position: relative; z-index: 1;
	flex: 1; margin: 0 0 18px;
	font-size: .85rem; color: var(--muted); line-height: 1.5;
}

.stat__bar {
	position: relative; z-index: 1;
	display: block; height: 5px; border-radius: 5px;
	background: var(--green-100); overflow: hidden;
}
.stat__bar-fill {
	display: block; height: 100%; border-radius: 5px;
	background: linear-gradient(90deg, var(--gold), var(--gold-600));
	transition: width 1.5s var(--ease);
}
/* JS winds the bar back so it can fill in on scroll. Without JS the inline
   width stands and the bar is simply shown already filled. */
.stat__bar-fill.is-pending { width: 0 !important; }

/* ---------------------------------------------------------------
   8. Awards
   --------------------------------------------------------------- */
/* The plaques are photographed on black, so the band behind them is the
   deepest green in the palette. On a light background each award would sit in
   a hard black rectangle instead of reading as an object standing on the page.

   The copy sits beside the plaques rather than above them: stacked, a heading
   block and two portrait photographs run well over a screen tall, and nobody
   sees an award and the sentence explaining it at the same time. */
.awards-section {
	position: relative;
	isolation: isolate;
	/* clip, not hidden — hidden would stop .awards-intro sticking. */
	overflow: clip;
	background: linear-gradient(165deg, #1d2716 0%, var(--green-900) 48%, #37482a 100%);
}

/* Gold cast from above, the way a plaque sits under a light. */
.awards-glow {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(58% 52% at 50% -4%, rgba(255, 217, 54, .17) 0%, transparent 70%),
		radial-gradient(46% 46% at 10% 104%, rgba(125, 145, 102, .24) 0%, transparent 70%);
}

.awards-band {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(34px, 5vw, 76px);
	max-width: 1120px;
	margin-inline: auto;
}

/* Pinned while the plaques scroll past, so the heading stays beside them
   instead of floating in the middle of a tall column. */
.awards-intro { position: sticky; top: calc(var(--header-h) + 28px); }

.awards-intro .eyebrow { color: var(--gold); }
.awards-intro .eyebrow::before { background: var(--gold); }

.awards-intro h2 {
	color: var(--white);
	font-size: clamp(1.95rem, 3.1vw, 2.7rem);
	margin-bottom: .42em;
}

.awards-intro p {
	color: rgba(255, 255, 255, .72);
	margin: 0;
}

.awards-source {
	display: inline-flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 4px 8px;
	max-width: 100%;
	margin-top: 26px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 217, 54, .3);
	border-radius: 999px;
	background: rgba(255, 217, 54, .08);
	color: var(--gold-100);
	font-size: .76rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	line-height: 1.4;
}

.awards-source svg { width: 15px; height: 15px; flex: none; color: var(--gold); }

.awards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.6vw, 34px);
}

/* --- Backdrop the plaques hang on ------------------------------ */
/* Absolutely positioned, so the decoration is not a grid item and cannot
   push the plaques around. */
.awards-decor { position: absolute; inset: -18% -12%; z-index: 0; pointer-events: none; }

.awards-wreath {
	position: absolute; left: 50%; top: 50%;
	/* Wide enough to enclose the pair of plaques — sized to them it just
	   disappears behind the frames and reads as stray marks. */
	width: min(112%, 620px); height: auto;
	color: var(--gold);
	opacity: .13;
	animation: awardsBreathe 13s ease-in-out infinite;
}
@keyframes awardsBreathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .11; }
	50%      { transform: translate(-50%, -50%) scale(1.05); opacity: .18; }
}

.awards-ring {
	position: absolute; left: 50%; top: 50%;
	width: min(104%, 570px); aspect-ratio: 1;
	border: 1.5px dashed rgba(255, 217, 54, .13);
	border-radius: 50%;
	animation: awardsSpin 68s linear infinite;
}
@keyframes awardsSpin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.awards-dots {
	/* Kept out at the corner, clear of the captions. */
	position: absolute; right: -1%; bottom: 0;
	width: 128px; height: 128px;
	background-image: radial-gradient(circle, rgba(255, 217, 54, .55) 1.5px, transparent 1.5px);
	background-size: 15px 15px;
	opacity: .2;
	animation: awardsDrift 16s ease-in-out infinite alternate;
}
@keyframes awardsDrift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-12px, -14px, 0); }
}

/* --- The plaques ----------------------------------------------- */
.award { position: relative; z-index: 1; margin: 0; }

/* A gilt frame with a raking highlight across it, rather than a flat gold
   fill — a single colour reads as a border, not as metal. */
.award__plaque {
	position: relative; display: block;
	padding: clamp(7px, .85vw, 11px);
	border-radius: 15px;
	background: linear-gradient(145deg,
		#7a6428 0%, #d9b95e 14%, #fbeca9 27%, #c8a244 43%,
		#8b7232 61%, #e8d182 79%, #9a7f38 100%);
	box-shadow:
		0 28px 58px rgba(0, 0, 0, .5),
		0 0 0 1px rgba(0, 0, 0, .4),
		inset 0 1px 0 rgba(255, 255, 255, .5),
		inset 0 -1px 0 rgba(0, 0, 0, .35);
	transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

/* The dark rebate where the gilt steps down to the plaque face. */
.award__plaque::before {
	content: ""; position: absolute; inset: clamp(4px, .5vw, 7px);
	z-index: 2; pointer-events: none;
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), inset 0 0 15px rgba(0, 0, 0, .55);
}

.award__plaque img {
	position: relative; z-index: 1;
	display: block; width: 100%; height: auto;
	border-radius: 8px;
}

.award__plaque:hover,
.award__plaque:focus-visible {
	transform: translateY(-8px) scale(1.015);
	box-shadow:
		0 38px 74px rgba(0, 0, 0, .55),
		0 0 0 1px rgba(0, 0, 0, .4),
		0 0 36px rgba(255, 217, 54, .3),
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* A highlight travelling across the lacquer, the way one does when you walk
   past a plaque on a wall. Long pause, short sweep — at a shorter interval it
   turns into a blinking advert. */
.award__shine {
	position: absolute; inset: 0; z-index: 3;
	border-radius: 15px; overflow: hidden; pointer-events: none;
}
.award__shine::after {
	content: ""; position: absolute; top: -60%; bottom: -60%; left: 0;
	width: 32%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
	transform: translateX(-280%) rotate(14deg);
	animation: awardShine 9s ease-in-out infinite;
}
.award + .award .award__shine::after { animation-delay: 2.4s; }
@keyframes awardShine {
	0%, 64%   { transform: translateX(-280%) rotate(14deg); }
	88%, 100% { transform: translateX(560%)  rotate(14deg); }
}

.award__body { text-align: center; padding-top: clamp(14px, 1.6vw, 20px); }

.award__year {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.65rem, 2.5vw, 2.2rem);
	line-height: 1;
	letter-spacing: .04em;
	/* Falls back to flat gold wherever background-clip: text is unsupported. */
	color: var(--gold);
	background: linear-gradient(100deg,
		var(--gold-600) 0%, #fff3b4 20%, var(--gold) 40%,
		var(--gold-600) 60%, #fff3b4 82%, var(--gold-600) 100%);
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: awardYearShimmer 8s ease-in-out infinite;
}
@keyframes awardYearShimmer {
	0%, 100% { background-position: 100% 0; }
	50%      { background-position: 0 0; }
}

.award__title {
	display: block;
	margin-top: 7px;
	color: var(--white);
	font-size: .93rem; font-weight: 600;
	letter-spacing: .04em;
}

.award__note {
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, .6);
	font-size: .8rem;
	line-height: 1.5;
}

@media (max-width: 980px) {
	.awards-band { grid-template-columns: 1fr; gap: 38px; }
	.awards-intro { position: static; max-width: 640px; margin-inline: auto; text-align: center; }
	.awards { max-width: 640px; margin-inline: auto; }
}

/* Kept two-up on the narrowest screens: stacked, the second plaque would be a
   scroll away from the first, which is the one thing this band is for. */
@media (max-width: 480px) {
	.awards { gap: 14px; }
	.awards-dots { display: none; }
	.award__note { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
	.awards-wreath,
	.awards-ring,
	.awards-dots,
	.award__shine::after,
	.award__year { animation: none; }
	.awards-wreath,
	.awards-ring { transform: translate(-50%, -50%); }
	.award__shine { display: none; }
	.award__plaque { transition: none; }
	.award__plaque:hover,
	.award__plaque:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------
   9. Services
   --------------------------------------------------------------- */
.services-section { position: relative; overflow: clip; }
.services-pattern span {
	position: absolute; border-radius: 50%;
	background: radial-gradient(circle, rgba(83,105,66,.08) 0%, transparent 70%);
}
.services-pattern span:nth-child(1) { width: 460px; height: 460px; top: -180px; right: -140px; }
.services-pattern span:nth-child(2) { width: 320px; height: 320px; bottom: -120px; left: -110px; }

.services {
	position: relative;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}

/* Everything is visible at rest — nothing depends on hover, so the cards
   behave the same on touch as on a mouse. */
.service {
	position: relative;
	/* The whole card is the link, so the tap target is the card itself. */
	display: flex; flex-direction: column;
	color: inherit; text-decoration: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(44,58,34,.07);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 50px rgba(44,58,34,.15);
	border-color: transparent;
}

.service::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 3;
	height: 4px;
	background: linear-gradient(90deg, var(--gold), var(--gold-600));
	opacity: 0; transition: opacity .4s var(--ease);
}
.service:hover::before { opacity: 1; }

.service__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.service__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .9s var(--ease);
}
.service:hover .service__media img { transform: scale(1.06); }
.service__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(30,42,22,.28) 100%);
}

/* Icon badge straddling the image and the body. */
/* Anchored to the body, not the media: the media clips its overflow, which
   was slicing the lower half of the badge off. */
.service__icon {
	position: absolute; right: 24px; top: -24px; z-index: 2;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: #fff; color: var(--green);
	box-shadow: 0 6px 18px rgba(30,42,22,.18);
	transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.service__icon svg { width: 22px; height: 22px; }
.service:hover .service__icon {
	background: var(--gold); color: var(--green-900); transform: rotate(6deg);
}

.service__body {
	position: relative;
	flex: 1; display: flex; flex-direction: column;
	padding: 40px 24px 26px;
}
.service__body h3 {
	/* Sans here: Forum has no bold cut and would be faux-bolded. */
	font-family: var(--sans);
	font-size: 1.08rem; font-weight: 700;
	color: var(--green); margin-bottom: 9px;
}
.service__body p {
	flex: 1; margin: 0;
	font-size: .93rem; line-height: 1.65; color: var(--muted);
}

/* Keyboard users need to see which card is focused. */
.service:focus-visible {
	outline: 3px solid var(--gold-600); outline-offset: 3px;
}
.service:focus-visible .service__body h3 { color: var(--gold-600); }
.service:hover .service__body h3 { color: var(--green-700); }

.services-cta { text-align: center; margin-top: 46px; }

/* ---------------------------------------------------------------
   10. Conditions treated
   --------------------------------------------------------------- */
.conditions-section { position: relative; overflow: clip; isolation: isolate; }

/* Treatment-room photo held well back as texture. The wash is tinted sage
   rather than plain cream so the band reads as its own section between the
   two cream ones either side, while the white cards keep full contrast. */
.conditions-section::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--conditions-bg);
	background-size: cover; background-position: center;
}
.conditions-section::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	/* Lighter wash than the other photo sections so the room actually reads;
	   the cards carry their own white fill and shadow, so contrast holds. */
	background: linear-gradient(180deg, rgba(246,248,245,.80) 0%, rgba(230,236,224,.76) 100%);
}

.conditions-section .wrap { position: relative; z-index: 1; }
/* Darker than the global muted tone: the lighter wash here dropped the
   default below 4.5:1 against the background. */
.conditions-section .section-head p { color: var(--body); }
.conditions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Each card leads with a solid green band, so the group reads as a set of
   labelled panels rather than faint outlines on white. */
.condition {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column;
	background: #fff;
	border-radius: 20px;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(44,58,34,.09);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.condition:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 58px rgba(44,58,34,.18);
}

.condition__head {
	position: relative;
	display: flex; align-items: center; gap: 14px;
	padding: 20px 22px;
	background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 100%);
	overflow: hidden;
}
/* Gold hairline separating the band from the list. */
.condition__head::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--gold), var(--gold-600));
}

/* Soft bloom inside the band, growing on hover. */
.condition__glow {
	position: absolute; top: -60px; right: -40px;
	width: 170px; height: 170px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,54,.30) 0%, transparent 70%);
	opacity: .6; transform: scale(.85);
	transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.condition:hover .condition__glow { opacity: 1; transform: scale(1.15); }

.condition__icon {
	position: relative; z-index: 1;
	width: 44px; height: 44px; flex: none;
	display: grid; place-items: center; border-radius: 12px;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.24);
	color: var(--gold);
	transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.condition__icon svg { width: 22px; height: 22px; }
.condition:hover .condition__icon {
	background: var(--gold); color: var(--green-900);
	border-color: var(--gold); transform: rotate(-6deg);
}

.condition__head h3 {
	position: relative; z-index: 1;
	font-family: var(--sans);
	font-size: 1.04rem; font-weight: 700;
	color: #fff; margin: 0;
}

.condition ul {
	flex: 1; list-style: none;
	margin: 0; padding: 20px 22px 24px;
}
.condition li {
	position: relative; padding-left: 26px; margin-bottom: 11px;
	font-size: .93rem; color: var(--body);
}
.condition li:last-child { margin-bottom: 0; }

/* Tick rather than a dot — reads as "we treat this". */
.condition li::before {
	content: ""; position: absolute; left: 0; top: .3em;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--green-100);
	transition: background .3s var(--ease);
}
.condition li::after {
	content: ""; position: absolute; left: 4.5px; top: .55em;
	width: 6px; height: 3px;
	border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green);
	transform: rotate(-45deg);
	transition: border-color .3s var(--ease);
}
.condition:hover li::before { background: var(--gold-100); }
.condition:hover li::after { border-color: var(--gold-600); }

/* ---------------------------------------------------------------
   11. Process steps
   --------------------------------------------------------------- */
.steps-section {
	position: relative; overflow: clip;
	background: var(--cream);
}
.steps-pattern span {
	position: absolute; border-radius: 50%;
	background: radial-gradient(circle, rgba(83,105,66,.09) 0%, transparent 70%);
}
.steps-pattern span:nth-child(1) { width: 420px; height: 420px; top: -170px; left: -120px; }
.steps-pattern span:nth-child(2) { width: 340px; height: 340px; bottom: -140px; right: -90px; }

.steps {
	position: relative;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
	list-style: none; margin: 0; padding: 0;
}

/* Dashed rail behind the badges, drifting to suggest forward motion. */
.steps::before {
	content: ""; position: absolute; top: 74px; left: 14%; right: 14%; height: 2px; z-index: 0;
	background-image: linear-gradient(90deg, var(--green-400) 0 9px, transparent 9px 20px);
	background-size: 20px 2px;
	opacity: .45;
	animation: stepsFlow 1.4s linear infinite;
}
@keyframes stepsFlow { to { background-position: 20px 0; } }

.step {
	position: relative; z-index: 1;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 34px 26px 32px; text-align: center;
	overflow: hidden;
	/* A resting shadow so the cards read as objects, not outlines. */
	box-shadow: 0 10px 26px rgba(44,58,34,.07);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.step:hover {
	transform: translateY(-10px);
	box-shadow: 0 26px 54px rgba(44,58,34,.16);
	border-color: transparent;
}

/* Gold cap that widens as the card is engaged. */
.step::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--gold), var(--gold-600));
	opacity: .55;
	transition: opacity .45s var(--ease), height .45s var(--ease);
}
.step:hover::before { opacity: 1; height: 6px; }

.step__badge {
	position: relative; z-index: 1;
	width: 78px; height: 78px; margin: 0 auto 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--green-100); border: 0;
	color: var(--green);
	box-shadow: 0 0 0 6px rgba(230,236,224,.5);
	transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.step__badge svg { width: 28px; height: 28px; }
.step:hover .step__badge {
	background: var(--green); color: #fff;
	box-shadow: 0 0 0 8px rgba(83,105,66,.14);
	transform: translateY(-2px);
}

.step__num {
	position: absolute; top: -2px; right: -4px;
	width: 28px; height: 28px; border-radius: 50%;
	border: 2px solid #fff;
	display: grid; place-items: center;
	background: var(--gold); color: var(--green-900);
	font-family: var(--sans); font-size: .68rem; font-weight: 700;
}

.step h3 {
	position: relative; z-index: 1;
	/* Sans here: Forum has no bold weight and would be faux-bolded. */
	font-family: var(--sans);
	font-size: 1.06rem; font-weight: 700;
	color: var(--green); letter-spacing: -.005em;
	margin-bottom: 10px;
}
.step p { position: relative; z-index: 1; font-size: .93rem; line-height: 1.65; color: var(--muted); margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.steps::before { animation: none; }
}

/* ---------------------------------------------------------------
   10b. Chinese-medicine motif layer (dark sections)
   --------------------------------------------------------------- */
.tcm-pattern {
	position: absolute; inset: 0;
	pointer-events: none; overflow: hidden;
	color: #fff;
}

.tcm {
	position: absolute;
	width: 150px; height: 150px;
	opacity: .07;
	will-change: transform;
}

/* Scattered rather than tiled, so it reads as decoration not wallpaper. */
.tcm--1 { top: 6%;   left: 3%;   width: 128px; height: 128px; animation: tcmFloat 19s ease-in-out infinite; }
.tcm--2 { top: 52%;  left: 8%;   width: 112px; height: 112px; opacity: .06; animation: tcmFloat 23s ease-in-out infinite reverse; }
.tcm--3 { bottom: 8%; left: 30%; width: 132px; height: 132px; opacity: .05; animation: tcmDrift 26s ease-in-out infinite; }
.tcm--4 { top: 10%;  right: 6%;  width: 168px; height: 168px; opacity: .06; animation: tcmDrift 21s ease-in-out infinite reverse; }
.tcm--5 { bottom: 12%; right: 12%; width: 118px; height: 118px; animation: tcmFloat 25s ease-in-out infinite; }
.tcm--6 { top: 42%;  right: 32%; width: 104px; height: 104px; opacity: .045; animation: tcmDrift 30s ease-in-out infinite; }

/* On light sections the motifs need to be dark, not white. */
.tcm-pattern--ink { color: var(--green); }
.tcm-pattern--ink .tcm { opacity: .10; }
.tcm-pattern--ink .tcm--2,
.tcm-pattern--ink .tcm--4 { opacity: .085; }
.tcm-pattern--ink .tcm--3,
.tcm-pattern--ink .tcm--6 { opacity: .07; }

@keyframes tcmFloat {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(0, -18px, 0) rotate(6deg); }
}
@keyframes tcmDrift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(14px, 10px, 0) rotate(-5deg); }
}

/* Keep the motifs clear of the copy on narrow screens. */
@media (max-width: 900px) {
	.tcm--3, .tcm--6 { display: none; }
	.tcm { opacity: .045; }
}

@media (prefers-reduced-motion: reduce) {
	.tcm { animation: none; }
}

/* ---------------------------------------------------------------
   12. Appointment form
   --------------------------------------------------------------- */
.appointment {
	position: relative;
	/* Layered CSS pattern: a fine point grid over a faint diagonal weave. The
	   pseudo-elements already carry the gold glows, so the pattern rides on the
	   element's own background. */
	background-color: var(--green-700);
	background-image:
		radial-gradient(circle, rgba(255,255,255,.055) 1.5px, transparent 1.6px),
		radial-gradient(circle, rgba(255,217,54,.05) 1.5px, transparent 1.6px),
		repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 14px);
	background-size: 26px 26px, 26px 26px, auto;
	background-position: 0 0, 13px 13px, 0 0;
	/* clip, not hidden: hidden would make this a scroll container and break the
	   sticky intro column. Both still clip the decorative circles. */
	overflow: clip;
}
.appointment::before,
.appointment::after {
	content: ""; position: absolute; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,54,.16) 0%, transparent 70%);
}
.appointment::before { width: 520px; height: 520px; top: -180px; right: -140px; }
.appointment::after { width: 420px; height: 420px; bottom: -160px; left: -120px; }

.appointment__grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 66px);
	align-items: start;
}
.appointment__intro {
	position: sticky;
	top: calc(var(--header-h) + 28px);
}
.appointment__intro .eyebrow { color: var(--gold); }
.appointment__intro h2 { color: #fff; }
.appointment__intro > p { color: rgba(255,255,255,.82); }

.appointment__points { list-style: none; margin: 30px 0 0; padding: 0; }
.appointment__points li {
	display: flex; gap: 14px; align-items: flex-start;
	color: rgba(255,255,255,.9); font-size: .97rem;
	padding: 13px 10px 13px 0; border-bottom: 1px solid rgba(255,255,255,.13);
	/* Padding is animated on hover, so the row shifts rather than reflows. */
	transition: color .28s var(--ease), padding-left .28s var(--ease),
		border-color .28s var(--ease);
}
.appointment__points svg {
	width: 21px; height: 21px; color: var(--gold); flex: none; margin-top: 2px;
	transition: transform .28s var(--ease), filter .28s var(--ease);
}

/* Each point lifts slightly and brightens as the cursor passes over it. */
.appointment__points li:hover {
	color: #fff;
	padding-left: 10px;
	border-color: rgba(255, 217, 54, .45);
}
.appointment__points li:hover svg {
	transform: scale(1.12);
	filter: drop-shadow(0 0 7px rgba(255, 217, 54, .55));
}

@media (prefers-reduced-motion: reduce) {
	.appointment__points li,
	.appointment__points svg { transition: none; }
	.appointment__points li:hover { padding-left: 0; }
	.appointment__points li:hover svg { transform: none; }
}

.form-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3.4vw, 44px);
	box-shadow: var(--shadow-lg);
}
.form-card h3 { font-size: 1.6rem; margin-bottom: 6px; }
.form-card > p { font-size: .94rem; color: var(--muted); margin-bottom: 24px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 600; color: var(--green-700); letter-spacing: .02em; }
.field label .req { color: #c0392b; }
.field input, .field select, .field textarea {
	font-family: var(--sans); font-size: .95rem; color: var(--ink);
	padding: 13px 15px;
	border: 1.5px solid var(--line); border-radius: 10px;
	background: var(--cream);
	transition: border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
	width: 100%;
}
.field textarea { resize: vertical; min-height: 108px; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; background: #fff;
	border-color: var(--green-400);
	box-shadow: 0 0 0 4px rgba(125, 145, 102, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #a9b2a2; }

.form-card .btn { width: 100%; margin-top: 22px; }
.form-foot { font-size: .82rem; color: var(--muted); text-align: center; margin: 16px 0 0; }
.hp { position: absolute; left: -9999px; }

.form-notice {
	grid-column: 1 / -1;
	padding: 14px 18px; border-radius: 10px;
	font-size: .93rem; margin-bottom: 6px;
}
.form-notice.is-success { background: var(--green-100); color: var(--green-700); border-left: 4px solid var(--green); }
.form-notice.is-error { background: #fdecea; color: #a3352a; border-left: 4px solid #c0392b; }

/* ---------------------------------------------------------------
   13. About the doctor
   --------------------------------------------------------------- */
.about-section { position: relative; overflow: clip; }

.about {
	display: grid; grid-template-columns: .92fr 1.08fr;
	gap: clamp(40px, 6vw, 86px); align-items: center;
}

/* --- Portrait -------------------------------------------------- */
.about__media { padding: 26px 26px 0; }
.about__figure { position: relative; padding-bottom: 34px; }

.about__portrait {
	position: relative; z-index: 2;
	margin: 0; overflow: hidden;
	/* Arch top — reads as a doorway rather than a plain photo box. */
	border-radius: 320px 320px 26px 26px;
	box-shadow: 0 30px 70px rgba(30,42,22,.26);
	background: var(--green-100);
}
.about__portrait img {
	width: 100%; display: block;
	filter: saturate(1.04) contrast(1.03);
	transition: transform 1.1s var(--ease);
}
.about__media:hover .about__portrait img { transform: scale(1.035); }

/* Sage grade over the photo, warm at the top, deep at the base. */
.about__portrait::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(255,217,54,.10) 0%, transparent 34%),
		linear-gradient(180deg, transparent 52%, rgba(44,58,34,.42) 100%);
	pointer-events: none;
}

/* --- Animated meridian pattern --------------------------------- */
.about__pattern { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.about__ring {
	position: absolute; border-radius: 50%;
	border: 1.5px dashed rgba(83,105,66,.30);
}
.about__ring--lg {
	inset: -18px -18px auto -18px; aspect-ratio: 1;
	animation: aboutSpin 46s linear infinite;
}
/* Sits low-left so it reads beside the arch rather than behind it. */
.about__ring--sm {
	left: -30px; bottom: 26px;
	width: 128px; height: 128px;
	border-style: solid; border-color: rgba(218,178,0,.42);
	animation: aboutSpin 34s linear infinite reverse;
}
@keyframes aboutSpin { to { transform: rotate(360deg); } }

/* Dot grid drifting slowly behind the arch. */
.about__dots {
	position: absolute; right: -20px; bottom: 92px;
	width: 148px; height: 148px;
	background-image: radial-gradient(circle, var(--green-400) 1.6px, transparent 1.6px);
	background-size: 15px 15px;
	opacity: .5;
	animation: aboutDrift 14s ease-in-out infinite alternate;
}
@keyframes aboutDrift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-10px, -12px, 0); }
}

/* A single acupuncture point, pulsing. */
.about__pulse {
	position: absolute; left: 6px; top: 30%;
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 0 rgba(255,217,54,.6);
	animation: aboutPulse 3.4s ease-out infinite;
}
@keyframes aboutPulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,217,54,.55); }
	70%  { box-shadow: 0 0 0 22px rgba(255,217,54,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,217,54,0); }
}

.about__badge {
	position: absolute; z-index: 3;
	right: -10px; bottom: 8px;
	background: #fff; border-radius: var(--radius);
	box-shadow: var(--shadow-lg); padding: 15px 20px;
	display: flex; align-items: center; gap: 13px;
	border-left: 3px solid var(--gold);
}
.about__badge svg { width: 28px; height: 28px; color: var(--gold-600); flex: none; }
.about__badge strong { display: block; font-size: .93rem; color: var(--green-700); }
.about__badge > span > span { font-size: .78rem; color: var(--muted); }

/* --- Copy ------------------------------------------------------ */
.about__name { margin-bottom: 14px; line-height: 1.08; }
.about__post {
	display: block; margin-top: 6px;
	font-family: var(--sans); font-size: .78rem; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600);
}

/* Small caps label introducing a group. */
.about__label {
	display: flex; align-items: center; gap: 11px;
	margin: 0 0 12px;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.about__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.about__tags {
	display: flex; flex-wrap: wrap; gap: 9px;
	list-style: none; margin: 0 0 30px; padding: 0;
}
.about__tags li {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px 8px 13px; border-radius: 999px;
	border: 1px solid var(--green-100); background: var(--green-100);
	font-size: .8rem; font-weight: 600; color: var(--green-700);
	transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.about__tags li::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--gold-600); flex: none;
}
.about__tags li:hover {
	background: #fff; border-color: var(--green-400); transform: translateY(-2px);
}

/* Statement panel beneath the portrait. Set as a considered statement rather
   than a quotation — the copy is written about Dr. Min, not spoken by her. */
.about__statement {
	position: relative;
	margin: 32px 0 0; padding: 30px 32px 30px 38px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 36px rgba(44,58,34,.08);
	overflow: hidden;
}

/* Gold spine down the left edge. */
.about__statement::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0;
	width: 4px; background: linear-gradient(180deg, var(--gold), var(--gold-600));
}

/* Oversized quote mark as a watermark, not competing with the text. */
.about__statement::after {
	content: "\201C";
	position: absolute; right: 18px; top: 2px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 7rem; line-height: 1;
	color: var(--green-100);
	pointer-events: none;
}
.about__statement-text {
	/* Georgia rather than Forum: Forum ships no italic, so it would be
	   synthesised into a skewed faux-italic. Georgia has true italic cuts. */
	position: relative; z-index: 1;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(1.1rem, 1.4vw, 1.28rem);
	line-height: 1.62; color: var(--green-900);
	margin: 0;
}
/* Escapes written as-is so no build step can mangle them into octal. */
.about__statement-text::before { content: "\201C"; }
.about__statement-text::after { content: "\201D"; }

.creds { list-style: none; margin: 0 0 32px; padding: 0; display: grid; }
.creds li {
	display: flex; gap: 15px; align-items: flex-start;
	padding: 14px 0; border-bottom: 1px solid var(--line);
}
.creds li:last-child { border-bottom: 0; }

.creds__icon {
	width: 38px; height: 38px; flex: none;
	display: grid; place-items: center;
	border-radius: 11px;
	background: var(--green-100); color: var(--green);
	transition: background .28s var(--ease), color .28s var(--ease);
}
.creds__icon svg { width: 18px; height: 18px; }
.creds li:hover .creds__icon { background: var(--gold); color: var(--green-900); }

.creds__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.creds__text strong {
	font-size: .96rem; font-weight: 600; color: var(--green-900); line-height: 1.4;
}
.creds__text > span { font-size: .87rem; color: var(--muted); line-height: 1.45; }

.about__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.about__call { display: inline-flex; align-items: center; gap: 12px; }
.about__call svg {
	width: 40px; height: 40px; padding: 10px; flex: none;
	border-radius: 50%; background: var(--green-100); color: var(--green);
	transition: background .3s var(--ease), color .3s var(--ease);
}
.about__call:hover svg { background: var(--green); color: #fff; }
.about__call span { display: block; font-size: 1rem; font-weight: 600; color: var(--green-900); line-height: 1.2; }
.about__call small {
	display: block; font-size: .68rem; font-weight: 600;
	letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
	.about__ring, .about__dots, .about__pulse { animation: none; }
}

/* ---------------------------------------------------------------
   14. Testimonials
   --------------------------------------------------------------- */
/* Herb-and-bamboo photo behind the cards, pushed well back so the white
   cards stay the focus and the copy keeps its contrast. */
.testimonials { position: relative; isolation: isolate; }
.testimonials::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--testimonials-bg);
	background-size: cover; background-position: center;
}
.testimonials::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(44,58,34,.93) 0%, rgba(30,42,22,.90) 100%);
}
.testimonials .section-head h2 { color: #fff; }
.testimonials .section-head p { color: rgba(255,255,255,.75); }
.testimonials .eyebrow { color: var(--gold); }
.testimonials .eyebrow::before,
.testimonials .eyebrow::after { background: var(--gold); }

/* Three-up carousel. The card set is rendered twice so the rewind from the
   last slide back to the first happens off-screen and reads as a loop. */
.quotes-viewport { overflow: hidden; padding: 6px 0 4px; }

.quotes-track {
	display: flex; gap: 26px;
	will-change: transform;
	transition: transform .6s var(--ease);
}
/* Used for the off-screen rewind, which must not animate. */
.quotes-track.is-jumping { transition: none; }

.quotes-nav {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	margin-top: 30px;
}
.quotes-arrow {
	width: 44px; height: 44px; flex: none;
	display: grid; place-items: center;
	border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
	background: rgba(255,255,255,.1); color: #fff;
	cursor: pointer;
	transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.quotes-arrow svg { width: 17px; height: 17px; }
.quotes-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--green-900); transform: translateY(-2px); }

.quotes-progress {
	width: 104px; height: 3px; border-radius: 3px;
	background: rgba(255,255,255,.22); overflow: hidden;
}
.quotes-progress span {
	display: block; height: 100%; width: 50%;
	background: var(--gold); border-radius: 3px;
	transition: width .6s var(--ease);
}

.quote {
	/* Three across, sharing two 26px gaps. */
	flex: 0 0 calc((100% - 52px) / 3);
	margin: 0;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-lg); padding: 30px 28px;
	position: relative;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quote blockquote { margin: 0; }
.quote:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.quote::before {
	content: "\201C";
	position: absolute; top: 8px; right: 26px;
	font-family: var(--display); font-size: 5rem; line-height: 1;
	color: var(--gold); opacity: .28;
}
.quote__stars { display: flex; gap: 3px; margin-bottom: 14px; }
.quote__stars svg { width: 17px; height: 17px; color: var(--gold-600); }
.quote p { font-size: .98rem; color: var(--body); font-style: italic; }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote__avatar {
	width: 42px; height: 42px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	background: var(--green-100); color: var(--green-700);
	font-weight: 600; font-size: .95rem;
}
/* A photograph fills the circle; without one the initial keeps the tinted disc. */
.quote__avatar--photo { padding: 0; overflow: hidden; background: var(--green-100); }
.quote__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.quote__who strong { display: block; font-size: .93rem; color: var(--green-700); }
.quote__who span { font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------
   15. Location
   --------------------------------------------------------------- */
.location {
	display: grid; grid-template-columns: .85fr 1.15fr;
	gap: clamp(28px, 3.4vw, 48px); align-items: stretch;
}

.location__card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 34px);
	box-shadow: var(--shadow-sm);
}
.info-row { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.info-row:first-of-type { padding-top: 0; }
.info-row:last-of-type { border-bottom: 0; }
.info-row__icon {
	width: 42px; height: 42px; flex: none; border-radius: 12px;
	display: grid; place-items: center;
	background: var(--green-100); color: var(--green);
	transition: background .3s var(--ease), color .3s var(--ease);
}
.info-row:hover .info-row__icon { background: var(--gold); color: var(--green-900); }
.info-row__icon svg { width: 20px; height: 20px; }
.info-row strong {
	display: block; font-size: .72rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 700;
}
.info-row p { margin: 0; font-size: .97rem; color: var(--green-900); font-weight: 500; line-height: 1.55; }

.location__directions { margin-top: auto; align-self: flex-start; }

/* --- Map ------------------------------------------------------- */
.location__map { position: relative; display: flex; flex-direction: column; gap: 14px; }

#clinic-map {
	flex: 1; min-height: 430px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	background: var(--green-100);
	z-index: 0; /* keep tiles under the sticky header */
}

/* Branded pin, drawn rather than a stock marker image. */
.clinic-pin { position: relative; }
.clinic-pin__dot {
	position: absolute; left: 50%; top: 50%;
	width: 24px; height: 24px; margin: -12px 0 0 -12px;
	border-radius: 50%;
	background: var(--green); border: 3px solid #fff;
	box-shadow: 0 3px 10px rgba(30,42,22,.4);
}
.clinic-pin__ring {
	position: absolute; left: 50%; top: 50%;
	width: 24px; height: 24px; margin: -12px 0 0 -12px;
	border-radius: 50%; background: rgba(255,217,54,.5);
	animation: clinicPulse 2.6s ease-out infinite;
}
@keyframes clinicPulse {
	0%   { transform: scale(1); opacity: .8; }
	70%  { transform: scale(3.4); opacity: 0; }
	100% { transform: scale(3.4); opacity: 0; }
}

/* Leaflet chrome, toned down to match the theme. */
.leaflet-container { font-family: var(--sans); background: var(--cream); }

/* Tint the map toward the theme's sage instead of paying for a styled tile
   set. Only the tile pane is filtered, so the pin and popup keep full colour. */
.leaflet-tile-pane {
	filter: grayscale(.72) brightness(1.06) contrast(.92) sepia(.22) hue-rotate(48deg) saturate(1.25);
}
.leaflet-control-zoom a {
	color: var(--green-700) !important;
	border-color: var(--line) !important;
	font-weight: 600;
}
.leaflet-control-zoom a:hover { background: var(--green-100) !important; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; font-size: .9rem; color: var(--green-900); }
.leaflet-popup-content strong { display: block; font-size: .95rem; margin-bottom: 3px; }
.leaflet-control-attribution { font-size: .66rem; background: rgba(255,255,255,.8) !important; }

.location__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.location__badges span {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 15px; border-radius: 999px;
	background: #fff; border: 1px solid var(--line);
	font-size: .8rem; font-weight: 600; color: var(--green-700);
}
.location__badges svg { width: 15px; height: 15px; color: var(--gold-600); flex: none; }

/* ---------------------------------------------------------------
   16. FAQ
   --------------------------------------------------------------- */
.faq-section {
	position: relative; overflow: clip;
	background: linear-gradient(160deg, var(--green-700) 0%, var(--green-900) 100%);
}

/* Drifting motif, same language as the practitioner portrait. */
.faq-pattern { position: absolute; inset: 0; pointer-events: none; }
.faq-pattern__ring {
	position: absolute; border-radius: 50%;
	border: 1px dashed rgba(255,255,255,.12);
	width: 420px; height: 420px; top: -140px; left: -120px;
	animation: faqSpin 58s linear infinite;
}
.faq-pattern__ring--sm {
	width: 240px; height: 240px; top: auto; left: auto;
	right: -70px; bottom: -70px;
	border-style: solid; border-color: rgba(255,217,54,.18);
	animation: faqSpin 40s linear infinite reverse;
}
@keyframes faqSpin { to { transform: rotate(360deg); } }

.faq-pattern__dots {
	position: absolute; right: 8%; top: 14%;
	width: 190px; height: 190px;
	background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.5px, transparent 1.5px);
	background-size: 17px 17px;
	animation: faqDrift 16s ease-in-out infinite alternate;
}
@keyframes faqDrift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-14px, 12px, 0); }
}

.faq-grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: .8fr 1.2fr;
	gap: clamp(36px, 5vw, 70px); align-items: start;
}

/* --- Intro column ---------------------------------------------- */
.faq-intro { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-intro .eyebrow { color: var(--gold); }
.faq-intro h2 { color: #fff; margin-bottom: .3em; }
.faq-intro > p { color: rgba(255,255,255,.72); font-size: 1.02rem; max-width: 380px; }

.faq-help {
	display: flex; align-items: center; gap: 14px;
	margin-top: 30px; padding: 16px 20px;
	border-radius: var(--radius);
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
}
.faq-help__icon {
	width: 42px; height: 42px; flex: none;
	display: grid; place-items: center; border-radius: 50%;
	background: rgba(255,217,54,.16); color: var(--gold);
}
.faq-help__icon svg { width: 19px; height: 19px; }
.faq-help strong { display: block; font-size: .84rem; color: rgba(255,255,255,.72); font-weight: 500; }
.faq-help a { display: block; font-size: 1.06rem; font-weight: 600; color: #fff; }
.faq-help a:hover { color: var(--gold); }

/* --- Accordion -------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: none; margin: 0; }

.faq__item {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.13);
	border-radius: var(--radius);
	overflow: hidden;
	transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.faq__item:hover { background: rgba(255,255,255,.09); transform: translateX(3px); }
.faq__item.is-open {
	background: #fff; border-color: #fff;
	box-shadow: 0 18px 44px rgba(15,22,10,.28);
	transform: none;
}
.faq__item h3 { margin: 0; }

.faq__q {
	display: flex; align-items: center; gap: 16px;
	width: 100%; text-align: left; cursor: pointer;
	background: none; border: 0;
	padding: 20px 22px;
	font-family: var(--display); font-size: 1.12rem; color: #fff;
	transition: color .3s var(--ease);
}
.faq__item.is-open .faq__q { color: var(--green-900); }

.faq__num {
	flex: none; font-family: var(--sans);
	font-size: .7rem; font-weight: 700; letter-spacing: .1em;
	color: var(--gold);
	transition: color .3s var(--ease);
}
.faq__item.is-open .faq__num { color: var(--gold-600); }
.faq__text { flex: 1; }

/* Plus that becomes a minus. */
.faq__toggle {
	position: relative; flex: none;
	width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.28);
	transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
}
.faq__toggle::before,
.faq__toggle::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	background: currentColor; border-radius: 2px;
	transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.faq__toggle::before { width: 11px; height: 2px; margin: -1px 0 0 -5.5px; }
.faq__toggle::after  { width: 2px; height: 11px; margin: -5.5px 0 0 -1px; }
.faq__item.is-open .faq__toggle {
	background: var(--gold); border-color: var(--gold);
	color: var(--green-900); transform: rotate(180deg);
}
.faq__item.is-open .faq__toggle::after { transform: scaleY(0); opacity: 0; }

.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a p {
	padding: 0 22px 22px 62px; margin: 0;
	font-size: .96rem; color: var(--body); line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
	.faq-pattern__ring, .faq-pattern__dots { animation: none; }
}

/* ---------------------------------------------------------------
   17. Closing CTA
   --------------------------------------------------------------- */
.cta { position: relative; text-align: center; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,58,34,.82), rgba(44,58,34,.9)); }
.cta__inner { position: relative; z-index: 2; padding: clamp(78px, 9vw, 118px) 0; }
.cta h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.cta p { color: rgba(255,255,255,.86); max-width: 580px; margin: 0 auto 32px; font-size: 1.06rem; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------- */
.site-footer { background: var(--green-900); color: rgba(255,255,255,.72); font-size: .94rem; }
.footer__grid {
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px;
	padding: clamp(56px, 7vw, 82px) 0 46px;
}
.site-footer h4 {
	color: #fff; font-size: 1.12rem; margin-bottom: 20px;
	position: relative; padding-bottom: 12px;
}
.site-footer h4::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 34px; height: 2px; background: var(--gold); border-radius: 2px;
}
.footer__brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.footer__brand img { width: 52px; height: 52px; }
.footer__brand span { font-family: var(--display); font-size: 1.28rem; color: #fff; line-height: 1.2; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--gold); }
.site-footer .menu a { position: relative; padding-left: 16px; display: inline-block; }
.site-footer .menu a::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .6;
	transition: transform .3s var(--ease);
}
.site-footer .menu a:hover::before { transform: translateX(3px); opacity: 1; }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 4px; }

.footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding: 22px 0;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	font-size: .87rem; flex-wrap: wrap;
}
.footer__disclaimer { font-size: .82rem; color: rgba(255,255,255,.5); max-width: 100%; padding-bottom: 20px; line-height: 1.7; }

/* Back to top */
.to-top {
	position: fixed; right: 26px; bottom: 26px; z-index: 90;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--green); color: #fff; border: 0; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--green-900); }
.to-top svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------
   19. Scroll reveal
   --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }

/* ---------------------------------------------------------------
   20. Interior pages
   --------------------------------------------------------------- */
.page-hero { position: relative; padding: clamp(70px, 8vw, 110px) 0; background: var(--green-700); text-align: center; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.page-hero p { color: rgba(255,255,255,.8); margin: 0; }
.entry { max-width: 820px; margin-inline: auto; }
.entry h2, .entry h3 { margin-top: 1.6em; }

/* ---------------------------------------------------------------
   21. Responsive
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
	.booking-form__grid { grid-template-columns: 1fr 1fr; }
	.booking-form__submit { grid-column: 1 / -1; justify-content: center; }
	.slot-body { grid-template-columns: 250px 1fr; }
	.services, .conditions { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.quote { flex-basis: calc((100% - 26px) / 2); }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.hero__content { max-width: 560px; }
	.steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.steps::before { display: none; }
	.appointment__grid, .about, .location, .faq-grid { grid-template-columns: 1fr; }
	.faq-intro { position: static; }
	.appointment__intro { position: static; }
	.about__pattern { display: none; }
	.footer__grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 900px) {
	:root { --header-h: 76px; }
	.topbar__list .topbar__item:nth-child(n+3) { display: none; }
	.nav-toggle { display: block; }
	.header__phone span { display: none; }
	.nav {
		position: fixed; inset: var(--header-h) 0 auto;
		background: #fff;
		flex-direction: column; align-items: stretch;
		padding: 18px 24px 30px;
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		transform: translateY(-14px); opacity: 0; visibility: hidden;
		transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
		max-height: calc(100vh - var(--header-h)); overflow-y: auto;
	}
	.nav.is-open { opacity: 1; transform: none; visibility: visible; }
	.nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
	.nav a::after { display: none; }
	.hero__controls {
		position: static; transform: none;
		flex-direction: row; justify-content: flex-start;
		margin-top: 34px; gap: 13px;
		padding: 0; border: 0; border-radius: 0;
		background: none; backdrop-filter: none; box-shadow: none;
		align-self: start;
	}
	.hero__track {
		width: 70px; height: 2px;
		transform-origin: left;
	}
	.hero__track span { transform-origin: left; transform: scaleX(0); animation-name: trackX; }
	.booking-strip { margin-top: -52px; }
	.slot-modal { padding: 0; }
	.slot-modal__panel { max-height: 100vh; height: 100%; width: 100%; border-radius: 0; }
	.slot-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.slot-days { border-right: 0; border-bottom: 1px solid var(--line); }
	.slot-days__list {
		flex-direction: row; overflow-x: auto; overflow-y: hidden;
		padding: 12px; gap: 8px; scroll-snap-type: x mandatory;
	}
	.slot-day {
		flex-direction: column; align-items: center; gap: 7px;
		width: auto; min-width: 92px; padding: 10px 12px;
		border-color: var(--line); background: #fff;
		scroll-snap-align: start; text-align: center;
	}
	.slot-day:hover:not(:disabled) { transform: translateY(-2px); }
	.slot-day__meta { align-items: center; }
	.slot-day { position: relative; }
	.slot-day__count { position: absolute; top: -6px; right: -4px; margin-left: 0; }
	.slot-day__name { font-size: .8rem; }
	.slot-day__note { font-size: .72rem; }
	.hero__slide::before { background-position: center; }
	.hero__stage::after {
		background: linear-gradient(180deg,
			rgba(255,255,255,.94) 0%,
			rgba(255,255,255,.86) 42%,
			rgba(255,255,255,.68) 72%,
			rgba(246,248,245,.62) 100%);
	}
	/* Video backdrop. The iframe is scaled to cover the hero, so it crops rather
   than letterboxes at any aspect ratio. The still underneath shows until the
   player is ready, and remains wherever autoplay is refused. */
.hero__video {
	position: absolute; inset: 0; overflow: hidden;
	pointer-events: none;
}
.hero__video iframe {
	position: absolute; top: 50%; left: 50%;
	width: 100vw; height: 56.25vw;          /* 16:9 by viewport width  */
	min-height: 100%; min-width: 177.78vh;  /* …and by viewport height */
	transform: translate(-50%, -50%);
	border: 0;
}

.hero__inner { padding-bottom: clamp(110px, 15vw, 150px); }
	.hero { min-height: 0; }
	.site-header__inner { gap: 12px; }
	.header__actions { gap: 8px; }
	.brand img { width: 44px; height: 44px; }
	.brand__name { font-size: 1.15rem; }
	.header__actions .btn { padding: 12px 18px; font-size: .86rem; }
}

@media (max-width: 680px) {
	.wrap { width: calc(100% - 36px); }
	body { font-size: 16px; }
	.stats { grid-template-columns: 1fr; }
	.services, .conditions, .steps, .form-grid { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr; }
	.quote { flex-basis: 100%; }
	.booking-form { padding: 22px 20px 24px; }
	.booking-form__grid { grid-template-columns: 1fr; gap: 14px; }
	.booking-form__head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.booking-form__meta { gap: 8px 16px; }
	.booking-form__meta li { font-size: .8rem; }
	.booking-form__meta li + li::before { display: none; }
	.booking-form__title { font-size: 1.28rem; }
	.slot-chips { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
	.slot-modal__head { padding: 20px 20px 18px; }
	.slot-times__head { padding: 16px 20px 12px; }
	.slot-times__body { padding: 16px 20px 22px; }
	.slot-panel__scroll { padding: 18px 20px 22px; }
	.slot-fields { grid-template-columns: 1fr; gap: 12px; }
	.slot-steps { padding: 10px 14px; gap: 6px; }
	.slot-step { padding: 6px; gap: 9px; }
	.slot-step + .slot-step::before { left: -9px; width: 8px; }
	.slot-step__icon { width: 32px; height: 32px; }
	.slot-step__label { font-size: .82rem; }
	.slot-step__num { font-size: .58rem; }
	.slot-modal__foot { gap: 10px; }
	.slot-back { padding: 10px 14px; }
	.slot-modal__foot { padding: 14px 20px; }
	.slot-chosen { margin: 0; width: 100%; }
	.slot-modal__foot .btn { width: 100%; }
	.slot-week__label { min-width: 0; font-size: .98rem; }
	.footer__grid { grid-template-columns: 1fr; }
	.footer__bottom { flex-direction: column; text-align: center; }
	.about__badge { position: static; margin-top: 18px; }
	.about__media { padding: 0; }
	.about__portrait { border-radius: 220px 220px 20px 20px; }
	.about__statement { padding: 20px 20px 18px; margin-top: 24px; }
	.hero__badge { margin-bottom: 18px; padding: 8px 16px 8px 13px; font-size: .67rem; }
	.hero__copy { margin-bottom: 28px; }
	.hero__cta { gap: 4px; }
	.hero__link { padding: 13px 14px; }
	.topbar__badge { display: none; }
	.to-top { right: 16px; bottom: 16px; }
	.header__phone, .search-toggle { display: none; }
	.header__actions .btn { padding: 11px 16px; font-size: .8rem; }
	.brand__tag { display: none; }
	.topbar__list { gap: 16px; font-size: .78rem; }
}

/* ---------------------------------------------------------------
   22. Motion preferences
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	/* Fall back to the still image rather than autoplaying footage. */
	.hero__video { display: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.reveal { opacity: 1; transform: none; }
	.hero__text .anim { opacity: 1; transform: none; }
	.hero__track span { animation: none; transform: none; }
	.quotes-track { transition: none; }
}

/* =========================================================================
   HERO SLIDER — replica of the Lynnwood AcuCare Replit homepage hero.

   Every selector is prefixed `rp-` and every value is scoped to `.rp-hero`
   so this block cannot reach the theme's own `.hero__*` slider, which the
   home2 page template still renders. Values are copied verbatim from the
   reference stylesheet.
   ========================================================================= */

.rp-hero {
	--rp-ink: #244648;
	--rp-teal-deep: #173f42;
	--rp-sun: #f1c43b;

	/* Strength of the wash over the backdrop photo. The copy sits on the left,
	   so it is heaviest there and clears away towards the sunrise on the right.
	   These three numbers are the only thing deciding how dark the mountains
	   read — raise them to darken, lower them to brighten. */
	--rp-scrim-left: .78;
	--rp-scrim-mid: .54;
	--rp-scrim-right: .08;

	/* How tall the band is, and so how much of the backdrop photo survives the
	   crop. The photo is square and the band is wide, so cover scales it to the
	   full width and takes the difference off the top and bottom — a shorter
	   hero shows a thinner slice of the same picture. 66vw keeps the slice
	   growing with the width instead of pinching in on wide screens; the
	   viewport clamp stops it running past the fold. */
	--rp-hero-h: min(66vw, 940px, calc(100vh - 34px));
	--rp-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rp-serif: 'Fraunces', Georgia, serif;

	min-height: var(--rp-hero-h);
	position: relative;
	isolation: isolate;
	color: #fff;
	background: var(--rp-teal-deep);
	font-family: var(--rp-sans);
}

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

.rp-hero button:focus-visible,
.rp-hero a:focus-visible {
	outline: 3px solid rgba(241, 196, 59, 0.65);
	outline-offset: 3px;
}

.rp-hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-position: center;
	background-size: cover;
	transition: opacity .6s ease, transform 1.2s ease;
}

/* The horizontal wash that keeps the copy legible over the photo. */
.rp-hero-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(15, 52, 55, var(--rp-scrim-left)) 0%,
		rgba(19, 59, 62, var(--rp-scrim-mid)) 52%,
		rgba(18, 53, 56, var(--rp-scrim-right)) 100%);
}

/* And a lighter vertical one, seating the hero against the booking strip. */
.rp-hero-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(13, 44, 45, .55) 0%, transparent 35%, rgba(13, 44, 45, .1) 100%);
}

.rp-hero-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .13;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.rp-hero-content {
	width: min(1180px, calc(100% - 48px));
	min-height: calc(var(--rp-hero-h) - 91px);
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 92px 0 102px;
}

/* All slides are in the DOM; only the active one is painted, so the
   entrance animation replays on every change. */
.rp-hero-copy-stack {
	width: min(620px, 100%);
	position: relative;
	z-index: 1;
}

.rp-hero-copy {
	display: none;
}

.rp-hero-copy.is-active {
	display: block;
	animation: rp-rise .8s both;
}

.rp-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--rp-sun);
	font-family: var(--rp-sans);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
}

.rp-hero .eyebrow::before {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
}

.rp-hero h1 {
	max-width: 700px;
	margin: 20px 0 20px;
	color: #fff;
	font-family: var(--rp-serif);
	font-weight: 500;
	font-size: clamp(50px, 7vw, 92px);
	letter-spacing: -.065em;
	line-height: .95;
	text-transform: none;
}

.rp-hero h1 em {
	color: var(--rp-sun);
	font-style: normal;
}

.rp-hero-subhead {
	max-width: 460px;
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	line-height: 1.65;
}

.rp-hero-actions {
	margin-top: 32px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.rp-button {
	border: 1px solid transparent;
	border-radius: 99px;
	padding: 14px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.rp-button:hover {
	transform: translateY(-2px);
}

.rp-button-ghost {
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
	background: rgba(255, 255, 255, .05);
}

.rp-button-ghost:hover {
	border-color: var(--rp-sun);
	color: var(--rp-sun);
}

.rp-hero-note {
	margin-top: 70px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, .7);
	font-size: 11px;
}

.rp-hero-note svg {
	flex: 0 0 auto;
	color: var(--rp-sun);
}

.rp-hero-side {
	width: min(340px, 31%);
	position: relative;
	z-index: 1;
}

.rp-hero-side-stack {
	position: relative;
	aspect-ratio: .82;
}

.rp-hero-side-image {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .35);
	background: var(--rp-teal-deep);
	box-shadow: 22px 22px 0 rgba(241, 196, 59, .82);
}

.rp-hero-side-image.is-active {
	display: block;
	animation: rp-rise .8s .14s both;
}

.rp-hero-side-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(17, 58, 61, .88), transparent 56%);
}

.rp-hero-side-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .8s ease;
}

.rp-hero-side-image:hover img {
	transform: scale(1.04);
}

.rp-hero-side-caption {
	position: absolute;
	z-index: 1;
	left: 22px;
	right: 22px;
	bottom: 22px;
	display: grid;
	gap: 6px;
}

.rp-hero-side-caption span {
	color: var(--rp-sun);
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
}

.rp-hero-side-caption strong {
	color: #fff;
	font-family: var(--rp-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.05;
}

.rp-hero-side-note {
	margin: 24px 0 0 28px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255, 255, 255, .76);
	font-size: 11px;
	line-height: 1.45;
}

.rp-hero-side-note svg {
	flex: 0 0 auto;
	color: var(--rp-sun);
}

.rp-hero-controls {
	position: absolute;
	right: max(24px, calc((100% - 1180px) / 2));
	bottom: 78px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.rp-hero-dots {
	display: flex;
	gap: 8px;
}

.rp-hero-dot {
	position: relative;
	width: 26px;
	height: 3px;
	border: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: rgba(255, 255, 255, .4);
}

/* The active dash fills left to right over the slide's time on screen, so the
   dots double as a progress bar. The duration comes from the slider's own
   timer, set on .rp-hero as --rp-slide-duration. */
.rp-hero-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--rp-sun);
}

.rp-hero-dot.active::after {
	animation: rp-dot-fill var(--rp-slide-duration, 6500ms) linear forwards;
}

@keyframes rp-dot-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Without autoplay there is no elapsing time to show, so the active dash is
   simply filled. The reduced-motion rule below collapses the animation, and
   `forwards` leaves it at full width. */

.rp-hero-count {
	color: rgba(255, 255, 255, .74);
	font-size: 11px;
	letter-spacing: .15em;
}

@keyframes rp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.rp-hero {
		--rp-hero-h: 700px;
		min-height: var(--rp-hero-h);
	}

	.rp-hero-content {
		width: min(100% - 36px, 1180px);
		min-height: auto;
		padding: 90px 0 130px;
	}

	.rp-hero-side {
		display: none;
	}

	.rp-hero h1 {
		font-size: clamp(49px, 15vw, 76px);
	}

	.rp-hero-subhead {
		font-size: 15px;
	}

	.rp-hero-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	.rp-hero-note {
		margin-top: 42px;
	}

	.rp-hero-controls {
		right: 18px;
		bottom: 74px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-hero *,
	.rp-hero *::before,
	.rp-hero *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   PREFERRED-TIME PICKER (.sp)

   The reference project's date-and-times popover: a month calendar beside a
   panel of times, with the chosen times listed underneath as removable chips.

   The panel is position:fixed and placed by slot-picker.js. It has to be —
   .appointment is `overflow: clip`, which would otherwise slice the panel off
   at the section boundary.

   Kept separate from the older .slot-* modal styles, which the booking dialog
   and the commented-out picker still use.
   ========================================================================= */

.sp { position: relative; }

.sp__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	text-align: left;
	cursor: pointer;
	font: inherit;
	font-size: .95rem;
	color: var(--ink);
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.sp__trigger:hover {
	border-color: var(--green-400);
	background: #fff;
}

.sp__trigger[aria-expanded="true"] {
	background: #fff;
	border-color: var(--green-700);
	box-shadow: 0 0 0 3px rgba(83, 105, 66, .12);
}

.sp__trigger svg { flex: 0 0 auto; color: var(--gold-600); }
.sp__summary.is-empty { color: var(--muted); }

.sp__pop {
	position: fixed;
	z-index: 150;
	top: 0;
	left: 0;
	display: flex;
	max-height: calc(100vh - 16px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(35, 41, 31, .06),
		0 12px 28px -6px rgba(35, 41, 31, .18),
		0 32px 64px -16px rgba(35, 41, 31, .16);
}

.sp__pop[hidden] { display: none; }

/* ---- Calendar ---- */

.sp__cal {
	padding: 16px;
	display: flex;
	flex-direction: column;
}

.sp__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 12px;
}

.sp__navbtn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	cursor: pointer;
	color: var(--muted);
	background: none;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

.sp__navbtn:hover {
	color: var(--green-700);
	background: var(--cream);
	border-color: var(--line);
}

.sp__month {
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--ink);
}

.sp__weekdays,
.sp__grid {
	display: grid;
	grid-template-columns: repeat(7, 38px);
	gap: 2px;
}

.sp__weekdays span {
	display: grid;
	place-items: center;
	height: 26px;
	color: var(--muted);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sp__day {
	position: relative;
	height: 36px;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-size: .84rem;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	background: none;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}

.sp__day:hover:not(:disabled):not(.is-viewing) {
	background: var(--cream);
	border-color: var(--line);
}

.sp__day--pad { cursor: default; }

.sp__day.is-disabled {
	color: var(--muted);
	opacity: .45;
	cursor: not-allowed;
}

.sp__day.is-today:not(.is-viewing) {
	font-weight: 700;
	color: var(--green-700);
	border-color: var(--green-400);
}

.sp__day.is-viewing,
.sp__day.is-viewing:hover {
	color: #fff;
	font-weight: 600;
	background: var(--green-700);
	border-color: var(--green-700);
	box-shadow: 0 2px 6px rgba(61, 79, 48, .3);
}

/* A day holding chosen times keeps its ring even when another day is being
   viewed, so the calendar shows every date the patient has offered. */
.sp__day.is-picked:not(.is-viewing) {
	color: var(--green-900);
	font-weight: 700;
	background: var(--green-100);
	border-color: var(--green-400);
}

.sp__day.is-picked::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--green-700);
}

.sp__day.is-picked.is-viewing::after { background: var(--gold); }

/* Saturday is bookable but by request, so it is marked rather than blocked. */
.sp__day.is-request:not(.is-viewing)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--gold-600);
}

.sp__legend {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	padding-top: 11px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: .68rem;
}

.sp__legend-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold-600);
}

/* ---- Times ---- */

.sp__times {
	width: 190px;
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-left: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(246, 248, 245, .55), rgba(246, 248, 245, 0) 120px);
	border-radius: 0 13px 13px 0;
}

.sp__times-title {
	margin: 0;
	color: var(--ink);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.sp__times-hint {
	margin: 3px 0 10px;
	color: var(--muted);
	font-size: .68rem;
	line-height: 1.4;
}

.sp__slots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	min-height: 0;
	max-height: 232px;
	padding-right: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Firefox */
}

.sp__slot {
	padding: 8px 4px;
	cursor: pointer;
	font: inherit;
	font-size: .74rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 8px;
	transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}

.sp__slot:hover:not(:disabled) {
	background: var(--green-100);
	border-color: var(--green-400);
}

.sp__slot.is-on {
	color: #fff;
	background: var(--green-700);
	border-color: var(--green-700);
}

.sp__slot:disabled { opacity: .4; cursor: not-allowed; }
.sp__slot.is-taken { text-decoration: line-through; }

.sp__times-empty {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--muted);
	font-size: .72rem;
	line-height: 1.55;
}

.sp__done {
	width: 100%;
	margin-top: 12px;
	padding: 9px;
	cursor: pointer;
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	color: #fff;
	background: var(--green-700);
	border: 0;
	border-radius: 8px;
	transition: background .2s var(--ease);
}

.sp__done:hover { background: var(--green-900); }

/* ---- Chosen times ---- */

.sp__chosen {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.sp__chosen[hidden] { display: none; }

.sp__chosen-title {
	margin: 0;
	color: var(--muted);
	font-size: .72rem;
	font-weight: 600;
}

.sp__groups {
	display: grid;
	gap: 12px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.sp__group + .sp__group {
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.sp__group-date {
	margin: 0 0 7px;
	color: var(--green-900);
	font-size: .74rem;
	font-weight: 700;
}

.sp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 12px;
	color: #fff;
	background: var(--green-700);
	border-radius: 99px;
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sp__chip button {
	display: grid;
	place-items: center;
	padding: 2px;
	cursor: pointer;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	transition: background .15s var(--ease);
}

.sp__chip button:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 680px) {
	.sp__pop {
		flex-direction: column;
		max-width: calc(100vw - 16px);
		overflow-y: auto;
	}

	.sp__cal { align-items: center; }

	.sp__times {
		width: auto;
		border-left: 0;
		border-top: 1px solid var(--line);
		border-radius: 0 0 13px 13px;
	}

	.sp__slots { max-height: none; }
}

/* ---- Inline shape, used by the booking dialog ----------------------------
   The dialog gives the picker a whole step, so the panel sits in the flow
   instead of floating: no trigger, no positioning, no shadow. */

/* Nothing sits above it in the dialog step, so it starts flush. */
.sp--inline { margin-top: 0; }

.sp--inline .sp__pop {
	position: static;
	z-index: auto;
	max-height: none;
	border-radius: 12px;
	box-shadow: none;
}

.sp--inline .sp__cal {
	flex: 0 0 auto;
	padding: 14px;
}

/* Sized so a six-row month, the times panel and the footer all fit inside the
   dialog at once — the step should not need scrolling. */
.sp--inline .sp__weekdays,
.sp--inline .sp__grid { grid-template-columns: repeat(7, 34px); }
.sp--inline .sp__weekdays span { height: 22px; }
.sp--inline .sp__day { height: 30px; font-size: .8rem; }
.sp--inline .sp__day.is-request::after,
.sp--inline .sp__day.is-picked::after { bottom: 3px; }
.sp--inline .sp__nav { padding-bottom: 8px; }
.sp--inline .sp__month { font-size: .9rem; }
.sp--inline .sp__legend { margin-top: 10px; padding-top: 9px; }

.sp--inline .sp__times {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 0;
}

/* Third column: the running list of chosen times. It keeps its place when
   empty so picking a time does not resize the two columns beside it. */
.sp--inline .sp__chosen {
	flex: 0 0 186px;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 14px 16px;
	overflow-y: auto;
	background: var(--cream);
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: 0 11px 11px 0;
}

.sp--inline .sp__chosen .sp__chosen-title {
	font-size: .74rem;
	font-weight: 700;
	color: var(--ink);
}

.sp--inline .sp__groups { margin-top: 9px; }

/* Narrow column, so the chips stack rather than sitting side by side. */
.sp--inline .sp__chips { flex-direction: column; align-items: flex-start; gap: 6px; }
.sp--inline .sp__group + .sp__group { padding-top: 10px; }

/* The dialog body scrolls, so the times list itself need not. */
.sp--inline .sp__slots {
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	max-height: none;
	padding-right: 0;
	overflow: visible;
}

.sp--inline .sp__slot { padding: 8px 6px; font-size: .76rem; }

@media (max-width: 900px) {
	.sp--inline .sp__pop { flex-direction: column; }

	.sp--inline .sp__cal { align-items: center; }

	.sp--inline .sp__times,
	.sp--inline .sp__chosen {
		border-left: 0;
		border-top: 1px solid var(--line);
		border-radius: 0;
	}

	.sp--inline .sp__chosen {
		flex: 0 0 auto;
		border-radius: 0 0 11px 11px;
	}

	.sp--inline .sp__chips { flex-direction: row; align-items: center; }
}

/* =========================================================================
   THEMED SCROLLBARS

   Every scroll region in the booking dialog and the picker, so none of them
   fall back to the browser's default grey bar with stepper arrows. Firefox
   takes the two `scrollbar-*` properties; WebKit and Blink take the
   pseudo-elements, which also removes the arrow buttons.
   ========================================================================= */

.slot-panel__scroll,
.slot-modal__panel,
.sp__slots,
.sp__pop,
.sp--inline .sp__chosen {
	scrollbar-width: thin;
	scrollbar-color: var(--green-400) transparent;
}

.slot-panel__scroll::-webkit-scrollbar,
.slot-modal__panel::-webkit-scrollbar,
.sp__slots::-webkit-scrollbar,
.sp__pop::-webkit-scrollbar,
.sp--inline .sp__chosen::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.slot-panel__scroll::-webkit-scrollbar-track,
.slot-modal__panel::-webkit-scrollbar-track,
.sp__slots::-webkit-scrollbar-track,
.sp__pop::-webkit-scrollbar-track,
.sp--inline .sp__chosen::-webkit-scrollbar-track {
	background: transparent;
}

.slot-panel__scroll::-webkit-scrollbar-thumb,
.slot-modal__panel::-webkit-scrollbar-thumb,
.sp__slots::-webkit-scrollbar-thumb,
.sp__pop::-webkit-scrollbar-thumb,
.sp--inline .sp__chosen::-webkit-scrollbar-thumb {
	background: var(--green-400);
	border: 2px solid transparent;
	background-clip: content-box;
	border-radius: 99px;
}

.slot-panel__scroll::-webkit-scrollbar-thumb:hover,
.slot-modal__panel::-webkit-scrollbar-thumb:hover,
.sp__slots::-webkit-scrollbar-thumb:hover,
.sp__pop::-webkit-scrollbar-thumb:hover,
.sp--inline .sp__chosen::-webkit-scrollbar-thumb:hover {
	background: var(--green-700);
	background-clip: content-box;
}

/* The corner where two bars meet, otherwise painted default grey. */
.slot-panel__scroll::-webkit-scrollbar-corner,
.slot-modal__panel::-webkit-scrollbar-corner,
.sp__pop::-webkit-scrollbar-corner {
	background: transparent;
}

/* =========================================================================
   SUBMISSION CONFIRMATION (.ty)

   Shown in place once a request has been sent — inside the booking dialog,
   which stays open, and in the page form just above the button that sent it.
   Deliberately plain: it is a receipt, not a moment.
   ========================================================================= */

.ty {
	position: relative;
	padding: 22px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 12px;
}

/* Dismissing the confirmation hands the form back, ready for another request. */
.ty__dismiss {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	cursor: pointer;
	color: var(--muted);
	background: none;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.ty__dismiss:hover {
	color: var(--green-900);
	background: #fff;
	border-color: var(--line);
}

/* Keep the heading clear of the control. */
.ty__dismiss + .ty__head { padding-right: 30px; }

.ty__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ty__tick {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: var(--green-700);
	border-radius: 50%;
}

.ty__head h4 {
	margin: 0 0 5px;
	font-size: 1.16rem;
	color: var(--green-900);
}

.ty__head p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--muted);
}

.ty__list {
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--line);
}

.ty__row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 12px;
	padding: 5px 0;
	font-size: .9rem;
}

.ty__row dt { margin: 0; color: var(--muted); font-weight: 600; }
.ty__row dd { margin: 0; color: var(--ink); word-break: break-word; }

.ty__label {
	margin: 18px 0 8px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--green-700);
}

.ty__times {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.ty__times li {
	padding: 9px 13px;
	font-size: .88rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
}

.ty__times li span {
	color: var(--muted);
	font-size: .78rem;
}

.ty__note {
	margin: 18px 0 0;
	font-size: .86rem;
	color: var(--muted);
}

.ty__close { margin-top: 22px; }

/* In the dialog the confirmation is the whole body, so it gets room. */
.slot-panel--thanks {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 26px 28px 30px;
}

.slot-panel--thanks .ty {
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
}

/* ---- Submission errors ---- */

.form-error {
	margin: 0 0 16px;
	padding: 12px 15px;
	font-size: .88rem;
	color: #8a2b21;
	background: #fdf1ef;
	border: 1px solid #f0c9c2;
	border-radius: 9px;
}

.form-error[hidden] { display: none; }

.slot-form__error { margin: 0 28px 14px; }

/* =========================================================================
   INNER PAGES — About, Services, Contact and 404

   Shared furniture first (hero, section heads, cards), then the pieces each
   page needs. Everything reuses the site's existing tokens, so the inner
   pages read as the same clinic as the homepage.
   ========================================================================= */

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

.eyebrow--light { color: var(--gold); }
.eyebrow--light::before { background: var(--gold); }

.section-head {
	max-width: 720px;
	margin: 0 auto clamp(38px, 5vw, 58px);
	text-align: center;
}

.section-head h2 { margin: 12px 0 14px; }

.section-head p {
	margin: 0;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.7;
}

.section--dark {
	background: var(--green-700);
	color: #fff;
}

.section--dark h2,
.section--dark h3 { color: #fff; }

/* .btn--ghost is defined near the top of this file as white-on-dark, which
   is what every use of it needs: the homepage CTA, the shared page CTA and
   the 404 all sit on photographs. It is deliberately NOT redefined here —
   an earlier light-background version overrode it and turned the homepage
   CTA's phone button into dark green text on a dark green photo.

   The one place it sits on a light panel is the search page's empty state,
   which restyles it locally further down. */



.lead {
	font-size: 1.12rem;
	line-height: 1.7;
	color: var(--green-700);
}

/* ---- Page hero --------------------------------------------------------- */

.pagehero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(320px, 42vw, 460px);
	padding: clamp(72px, 9vw, 118px) 0 clamp(58px, 7vw, 92px);
	background-color: var(--green-900);
	background-image: var(--pagehero-img);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}

.pagehero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(30, 40, 24, .92) 0%, rgba(44, 58, 34, .78) 55%, rgba(44, 58, 34, .48) 100%),
		radial-gradient(circle at 80% 20%, rgba(255, 217, 54, .16), transparent 55%);
}

.pagehero__inner { position: relative; max-width: 760px; }

.pagehero h1 {
	margin: 14px 0 0;
	color: #fff;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 1.08;
}

.pagehero__lead {
	margin: 18px 0 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .85);
	font-size: 1.06rem;
	line-height: 1.72;
}

.crumbs {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	font-size: .82rem;
	color: rgba(255, 255, 255, .62);
}

.crumbs a { color: rgba(255, 255, 255, .82); }
.crumbs a:hover { color: var(--gold); }
.crumbs span[aria-current] { color: var(--gold); }

/* ---- About: approach --------------------------------------------------- */

.approach__grid {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: clamp(36px, 5vw, 70px);
	align-items: center;
}

/* Photograph, framed and lifted off a gold plate. */
.approach__figure { position: relative; margin: 0; }

.approach__figure::before {
	content: "";
	position: absolute;
	inset: 22px -18px -18px 22px;
	border-radius: 20px;
	background: var(--gold);
	opacity: .22;
}

.approach__frame {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 26px 60px rgba(35, 41, 31, .18);
}

.approach__frame img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .7s var(--ease);
}

.approach__figure:hover .approach__frame img { transform: scale(1.04); }

.approach__caption {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: min(88%, 400px);
	margin: -46px 0 0 26px;
	padding: 18px 22px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 44px rgba(35, 41, 31, .16);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.approach__figure:hover .approach__caption {
	transform: translateY(-4px);
	box-shadow: 0 28px 56px rgba(35, 41, 31, .2);
}

.approach__caption-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--green-700);
	background: var(--green-100);
	border-radius: 12px;
}

.approach__caption-icon svg { width: 20px; height: 20px; }

.approach__caption strong {
	display: block;
	margin-bottom: 3px;
	font-size: .96rem;
	color: var(--green-900);
}

.approach__caption > span > span {
	display: block;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--muted);
}

.approach__body h2 { margin: 12px 0 22px; }
.approach__body p { color: var(--muted); line-height: 1.75; }


.ticklist {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.ticklist li {
	position: relative;
	padding-left: 32px;
	color: var(--ink);
	font-size: .96rem;
	line-height: 1.6;
}

.ticklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4f30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Numbered principles, two across. */
.principles {
	list-style: none;
	counter-reset: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 26px;
}

.principles li {
	position: relative;
	padding-top: 16px;
	border-top: 2px solid var(--line);
	transition: border-color .3s var(--ease);
}

.principles li:hover { border-top-color: var(--gold); }

.principles__num {
	display: block;
	margin-bottom: 7px;
	font-family: var(--display);
	font-size: .92rem;
	letter-spacing: .06em;
	color: var(--gold-600);
	transition: color .3s var(--ease);
}

.principles li:hover .principles__num { color: var(--green-700); }

.principles strong {
	display: block;
	margin-bottom: 5px;
	font-size: 1.02rem;
	color: var(--green-900);
}

.principles li > span:last-child {
	display: block;
	font-size: .9rem;
	line-height: 1.62;
	color: var(--muted);
}

/* ---- About: personal ---------------------------------------------------- */

.personal__grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(34px, 5vw, 70px);
	align-items: center;
}

.personal__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 22px 50px rgba(35, 41, 31, .16);
}

.personal__body h2 { margin: 12px 0 18px; }

.personal__body p {
	color: var(--muted);
	line-height: 1.78;
	margin-bottom: 26px;
}

/* ---- Services: how we treat --------------------------------------------- */

.methods {
	max-width: 900px;
	margin: 0 auto clamp(34px, 4vw, 52px);
	padding: 22px 26px;
	text-align: center;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.methods__label {
	margin: 0 0 14px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.methods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.methods__list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--green-900);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.methods__list li svg { width: 17px; height: 17px; color: var(--gold-600); }

.methods__list li:hover {
	transform: translateY(-3px);
	border-color: var(--green-400);
	box-shadow: 0 12px 26px rgba(35, 41, 31, .1);
}

/* ---- Services: treatment slip cards -------------------------------------

   Each card rests showing an icon and a name. On hover — or keyboard focus,
   which is why the cards are focusable — a panel slips up from the bottom
   carrying the name and a short description.
   ------------------------------------------------------------------------ */

.slips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
	gap: 18px;
}

.slip {
	position: relative;
	overflow: hidden;
	min-height: 186px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	cursor: default;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.slip:hover,
.slip:focus-visible {
	transform: translateY(-5px);
	border-color: var(--green-400);
	box-shadow: 0 22px 46px rgba(35, 41, 31, .15);
	outline: none;
}

/* Resting face */

.slip__face {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	height: 100%;
	padding: 22px 20px;
	transition: opacity .3s var(--ease), transform .35s var(--ease);
}

.slip__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--green-700);
	background: var(--green-100);
	border-radius: 13px;
	transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.slip__icon svg { width: 23px; height: 23px; }

.slip:hover .slip__icon,
.slip:focus-visible .slip__icon {
	transform: translateY(-2px) rotate(-6deg);
	background: var(--green-700);
	color: #fff;
}

.slip__name {
	font-family: var(--display);
	/* Forum ships a single weight, so prominence comes from size and colour
	   rather than from a bold the browser would have to synthesise. */
	font-size: clamp(1.2rem, 1.55vw, 1.42rem);
	line-height: 1.15;
	letter-spacing: -.005em;
	color: var(--green-900);
	transition: color .3s var(--ease);
}

.slip:hover .slip__name,
.slip:focus-visible .slip__name { color: var(--slip-ink, var(--green-700)); }

.slip__group {
	margin-top: auto;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* The panel that slips up */

.slip__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 22px 20px;
	background: linear-gradient(160deg, var(--green-700), var(--green-900));
	transform: translateY(101%);
	transition: transform .42s var(--ease);
}

.slip:hover .slip__panel,
.slip:focus-visible .slip__panel { transform: translateY(0); }

.slip__panel-name {
	font-family: var(--display);
	font-size: 1.16rem;
	line-height: 1.18;
	color: var(--gold);
}

.slip__panel-text {
	font-size: .86rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

/* Touch and coarse pointers never hover, so the description is shown outright
   and the card grows to fit it rather than hiding half its content. */
@media (hover: none) {
	.slip { min-height: 0; }

	.slip__panel {
		position: static;
		transform: none;
		background: none;
		padding: 0 20px 20px;
		gap: 4px;
	}

	.slip__panel-name { display: none; }
	.slip__panel-text { color: var(--muted); }
	.slip__face { padding-bottom: 14px; }
	.slip__group { margin-top: 4px; }
}

/* Footnote under the treatment grid. */
.cond-note {
	max-width: 720px;
	margin: 40px auto 0;
	padding: 20px 24px;
	text-align: center;
	color: var(--muted);
	font-size: .93rem;
	line-height: 1.7;
	background: #fff;
	border: 1px dashed var(--line);
	border-radius: 14px;
}

/* ---- Services: insurance ------------------------------------------------ */

.insurance__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(34px, 5vw, 68px);
	align-items: center;
}

.insurance__body h2 { margin: 12px 0 22px; }

.insurance__note {
	display: grid;
	gap: 6px;
	padding: 20px 24px;
	margin-bottom: 28px;
	background: var(--green-100);
	border-radius: 14px;
	border-left: 4px solid var(--green-700);
}

.insurance__note strong { color: var(--green-900); font-size: 1rem; }
.insurance__note span { color: var(--muted); font-size: .9rem; line-height: 1.6; }

.steps-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	gap: 20px;
	counter-reset: step;
}

.steps-list li {
	position: relative;
	padding-left: 52px;
	counter-increment: step;
}

.steps-list li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	font-size: .86rem;
	font-weight: 700;
	color: #fff;
	background: var(--green-700);
	border-radius: 50%;
}

.steps-list strong { display: block; color: var(--green-900); font-size: 1rem; }

.steps-list span {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.62;
}

.insurance__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 22px 50px rgba(35, 41, 31, .16);
}

/* ---- Contact ------------------------------------------------------------ */

.ccard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}

.ccard {
	display: block;
	padding: 28px 26px;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

a.ccard:hover {
	transform: translateY(-5px);
	border-color: var(--green-400);
	box-shadow: 0 20px 42px rgba(35, 41, 31, .12);
	color: inherit;
}

.ccard__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	color: var(--green-700);
	background: var(--green-100);
	border-radius: 14px;
}

.ccard__icon svg { width: 23px; height: 23px; }

.ccard h3 {
	margin: 0 0 8px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

.ccard strong {
	display: block;
	font-size: 1.06rem;
	color: var(--green-900);
	word-break: break-word;
}

.ccard__meta {
	display: block;
	margin-top: 7px;
	font-size: .84rem;
	color: var(--muted);
}

.contact-main__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(30px, 4vw, 52px);
	align-items: start;
}

.contact-form-card {
	padding: clamp(28px, 3.4vw, 44px);
	background: #fff;
	border-radius: var(--radius-lg, 18px);
	box-shadow: var(--shadow-lg, 0 24px 60px rgba(35, 41, 31, .12));
}

.contact-form-card h2 { margin: 12px 0 10px; font-size: 1.9rem; }

.contact-form-card__intro {
	margin: 0 0 26px;
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.68;
}

.contact-aside {
	position: sticky;
	top: 100px;
	display: grid;
	gap: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
}

.contact-aside__map { height: 260px; background: var(--green-100); }
.contact-aside__map #clinic-map { width: 100%; height: 100%; }

.contact-aside__body { padding: 26px 26px 30px; }
.contact-aside__body h3 { margin: 0 0 12px; font-size: 1.16rem; }

.contact-aside address {
	margin: 0 0 20px;
	font-style: normal;
	color: var(--muted);
	line-height: 1.7;
}

.contact-aside__hours {
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 12px;
}

.contact-aside__hours > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: .9rem;
}

.contact-aside__hours dt { margin: 0; color: var(--muted); }
.contact-aside__hours dd { margin: 0; color: var(--green-900); font-weight: 600; }

.contact-aside__note {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: .84rem;
	color: var(--muted);
	line-height: 1.6;
}

/* ---- Shared closing CTA -------------------------------------------------- */

.pagecta {
	position: relative;
	isolation: isolate;
	padding: clamp(64px, 8vw, 104px) 0;
	background-color: var(--green-900);
	background-image: var(--pagecta-img);
	background-size: cover;
	background-position: center;
	text-align: center;
	color: #fff;
}

.pagecta__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(30, 40, 24, .9), rgba(44, 58, 34, .93));
}

.pagecta__inner { max-width: 660px; margin-inline: auto; }
.pagecta h2 { margin: 14px 0 14px; color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

.pagecta p {
	margin: 0 auto;
	max-width: 520px;
	color: rgba(255, 255, 255, .82);
	line-height: 1.72;
}

.pagecta .eyebrow { justify-content: center; }

.pagecta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 30px 0 0;
}

.pagecta__note {
	margin-top: 22px !important;
	font-size: .84rem;
	color: rgba(255, 255, 255, .6) !important;
}

/* ---- 404 ---------------------------------------------------------------- */

.notfound {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: clamp(420px, 56vw, 580px);
	padding: clamp(80px, 9vw, 120px) 0;
	background-color: var(--green-900);
	background-image: var(--notfound-img);
	background-size: cover;
	background-position: center;
	text-align: center;
	color: #fff;
}

.notfound__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(28, 38, 22, .84), rgba(28, 38, 22, .92));
}

.notfound__inner { max-width: 660px; margin-inline: auto; }

.notfound__code {
	display: block;
	font-family: var(--display, inherit);
	font-size: clamp(4.5rem, 13vw, 8.5rem);
	line-height: .9;
	color: rgba(255, 217, 54, .22);
	letter-spacing: -.03em;
}

.notfound .eyebrow { justify-content: center; margin-top: 8px; }

.notfound h1 {
	margin: 14px 0 16px;
	color: #fff;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.notfound p {
	margin: 0 auto;
	max-width: 520px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.72;
}

.notfound__search {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 32px auto 0;
}

.notfound__search input {
	flex: 1;
	min-width: 0;
	padding: 13px 17px;
	font-family: var(--sans);
	font-size: .95rem;
	color: var(--ink);
	background: rgba(255, 255, 255, .95);
	border: 1px solid transparent;
	border-radius: 10px;
}

.notfound__search input:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(255, 217, 54, .3);
}

.nf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
	gap: 22px;
}

.nf-card {
	position: relative;
	display: block;
	padding: 28px 26px 46px;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.nf-card:hover {
	transform: translateY(-5px);
	border-color: var(--green-400);
	box-shadow: 0 20px 42px rgba(35, 41, 31, .12);
	color: inherit;
}

.nf-card h3 { margin: 0 0 9px; font-size: 1.12rem; }

.nf-card p {
	margin: 0;
	color: var(--muted);
	font-size: .91rem;
	line-height: 1.62;
}

.nf-card__go {
	position: absolute;
	left: 26px;
	bottom: 22px;
	color: var(--gold-600);
	font-size: 1.15rem;
	transition: transform .25s var(--ease);
}

.nf-card:hover .nf-card__go { transform: translateX(5px); }

.notfound-help {
	margin: 40px 0 0;
	text-align: center;
	color: var(--muted);
	font-size: .95rem;
}

.notfound-help a { font-weight: 700; color: var(--green-700); }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {

	.personal__grid .personal__media { order: -1; }
	.contact-aside { position: static; }
}

@media (max-width: 620px) {
	.notfound__search { flex-direction: column; }
	.pagehero__inner { text-align: left; }
	.contact-form-card { padding: 24px 20px 30px; }
}

/* =========================================================================
   INNER PAGES — MOTION & HOVER

   Two kinds of movement, both optional:

   1. Entrance. The hero animates on load; everything below it rides the
      existing .reveal / .is-in observer. Where a revealed block contains a
      list, its rows stagger in afterwards — no extra markup, the delays hang
      off :nth-child inside the revealed ancestor.

   2. Response. Every card, row and image reacts to the cursor, so the pages
      feel handled rather than printed.

   The About intro reuses the homepage's .about component, which brings its
   own portrait and badge hovers with it; only what is specific to the inner
   pages is repeated here.

   The whole block is switched off under prefers-reduced-motion at the end.
   ========================================================================= */

/* ---- Entrance keyframes ------------------------------------------------- */

@keyframes page-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@keyframes hero-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* ---- Page hero ---------------------------------------------------------- */

/* The photograph settles rather than snapping into place. It moves to a
   pseudo-element so the zoom cannot drag the veil or the text with it. */
.pagehero { background-image: none; }

.pagehero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--pagehero-img);
	background-size: cover;
	background-position: center;
	animation: hero-zoom 1.6s var(--ease) both;
}

.pagehero .crumbs   { animation: page-rise .7s var(--ease) both; animation-delay: .05s; }
.pagehero .eyebrow  { animation: page-rise .7s var(--ease) both; animation-delay: .16s; }
.pagehero h1        { animation: page-rise .7s var(--ease) both; animation-delay: .26s; }
.pagehero__lead     { animation: page-rise .7s var(--ease) both; animation-delay: .38s; }

/* ---- Reveal variants ---------------------------------------------------- */

.reveal--left  { transform: translateX(-38px) translateY(0); }
.reveal--right { transform: translateX(38px) translateY(0); }
.reveal--scale { transform: scale(.94); }

.reveal--left.is-in,
.reveal--right.is-in,
.reveal--scale.is-in { transform: none; }

.reveal[data-delay="6"] { transition-delay: .6s; }
.reveal[data-delay="7"] { transition-delay: .7s; }

/* ---- Staggered rows inside a revealed block ----------------------------- */

.about__body.is-in .creds li,
.about__body.is-in .about__tags li,
.approach__body.is-in .ticklist li,
.insurance__body.is-in .steps-list li,
.contact-aside.is-in .contact-aside__hours > div {
	animation: page-rise .55s var(--ease) both;
}

.about__body.is-in .creds li:nth-child(1),
.about__body.is-in .about__tags li:nth-child(1),
.approach__body.is-in .ticklist li:nth-child(1),
.insurance__body.is-in .steps-list li:nth-child(1),
.contact-aside.is-in .contact-aside__hours > div:nth-child(1) { animation-delay: .10s; }

.about__body.is-in .creds li:nth-child(2),
.about__body.is-in .about__tags li:nth-child(2),
.approach__body.is-in .ticklist li:nth-child(2),
.insurance__body.is-in .steps-list li:nth-child(2),
.contact-aside.is-in .contact-aside__hours > div:nth-child(2) { animation-delay: .18s; }

.about__body.is-in .creds li:nth-child(3),
.about__body.is-in .about__tags li:nth-child(3),
.approach__body.is-in .ticklist li:nth-child(3),
.insurance__body.is-in .steps-list li:nth-child(3),
.contact-aside.is-in .contact-aside__hours > div:nth-child(3) { animation-delay: .26s; }

.about__body.is-in .creds li:nth-child(4),
.approach__body.is-in .ticklist li:nth-child(4),

.about__body.is-in .creds li:nth-child(5),


/* =========================================================================
   HOVER — ABOUT
   ========================================================================= */


.ticklist li { transition: transform .28s var(--ease), color .28s var(--ease); }
.ticklist li::before { transition: transform .28s var(--ease), background-color .28s var(--ease); }

.ticklist li:hover {
	transform: translateX(6px);
	color: var(--green-900);
}

.ticklist li:hover::before {
	transform: scale(1.15);
	background-color: var(--gold-100);
}


.personal__media img {
	transition: transform .7s var(--ease), box-shadow .4s var(--ease);
}

.personal__media:hover img {
	transform: scale(1.035);
	box-shadow: 0 30px 66px rgba(35, 41, 31, .24);
}

/* The badge on the portrait lifts with it. */
.about__badge { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }

.about__media:hover .about__badge {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(35, 41, 31, .18);
}

/* =========================================================================
   HOVER — SERVICES
   ========================================================================= */










.cond-note {
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

.cond-note:hover {
	transform: translateY(-3px);
	border-color: var(--green-400);
	box-shadow: 0 16px 36px rgba(35, 41, 31, .1);
}

.insurance__note {
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.insurance__note:hover {
	transform: translateX(4px);
	border-left-color: var(--gold-600);
	box-shadow: 0 16px 36px rgba(35, 41, 31, .1);
}

.steps-list li { transition: transform .3s var(--ease); }
.steps-list li::before { transition: transform .35s var(--ease), background .3s var(--ease); }

.steps-list li:hover { transform: translateX(6px); }

.steps-list li:hover::before {
	transform: scale(1.12);
	background: var(--gold);
	color: var(--green-900);
}

.insurance__media img {
	transition: transform .7s var(--ease), box-shadow .4s var(--ease);
}

.insurance__media:hover img {
	transform: scale(1.035);
	box-shadow: 0 30px 66px rgba(35, 41, 31, .24);
}

/* =========================================================================
   HOVER — CONTACT
   ========================================================================= */

.ccard__icon { transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease); }

a.ccard:hover .ccard__icon {
	transform: translateY(-3px) rotate(-6deg);
	background: var(--green-700);
	color: #fff;
}

.ccard strong { transition: color .3s var(--ease); }
a.ccard:hover strong { color: var(--green-700); }

.contact-aside { transition: box-shadow .4s var(--ease), border-color .4s var(--ease); }

.contact-aside:hover {
	border-color: var(--green-400);
	box-shadow: 0 22px 48px rgba(35, 41, 31, .12);
}

.contact-aside__hours > div {
	padding: 5px 8px;
	margin: -5px -8px;
	border-radius: 8px;
	transition: background .25s var(--ease);
}

.contact-aside__hours > div:hover { background: var(--green-100); }

.contact-form-card { transition: box-shadow .4s var(--ease); }
.contact-form-card:hover { box-shadow: 0 32px 74px rgba(35, 41, 31, .16); }

/* =========================================================================
   HOVER — SHARED CTA
   ========================================================================= */

.pagecta { overflow: hidden; background-image: none; }

.pagecta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--pagecta-img);
	background-size: cover;
	background-position: center;
	transition: transform 1.2s var(--ease);
}

.pagecta:hover::before { transform: scale(1.05); }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.pagehero::before,
	.pagehero .crumbs,
	.pagehero .eyebrow,
	.pagehero h1,
	.pagehero__lead,
	.about__body.is-in .creds li,
	.about__body.is-in .about__tags li,
	.approach__body.is-in .ticklist li,
	.insurance__body.is-in .steps-list li,
	.contact-aside.is-in .contact-aside__hours > div {
		animation: none !important;
		opacity: 1;
		transform: none;
	}

	/* Hover states stay, but they arrive at once rather than gliding. */
	.ticklist li,
	.ticklist li::before,
	.personal__media img,
	.about__badge,
	.cond-note,
	.insurance__note,
	.steps-list li,
	.steps-list li::before,
	.insurance__media img,
	.ccard__icon,
	.contact-aside,
	.contact-aside__hours > div,
	.contact-form-card,
	.pagecta::before {
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   OUR APPROACH — SECTION BACKGROUND

   The meridian motif from the homepage portrait, enlarged to section scale:
   a woven dot ground, two slowly counter-rotating dashed rings, drifting dot
   fields, a breathing gold glow, and two acupuncture points that pulse.

   All of it is decorative and behind the content — the layer is aria-hidden
   and pointer-events:none, and every animation stops under reduced motion.
   ========================================================================= */

.approach {
	position: relative;
	isolation: isolate;
	/* clip, not hidden: hidden would make this a scroll container. */
	overflow: clip;
	background-image:
		radial-gradient(circle, rgba(83, 105, 66, .07) 1.4px, transparent 1.5px),
		radial-gradient(circle, rgba(218, 178, 0, .06) 1.4px, transparent 1.5px),
		repeating-linear-gradient(135deg, rgba(83, 105, 66, .022) 0 1px, transparent 1px 16px);
	background-size: 28px 28px, 28px 28px, auto;
	background-position: 0 0, 14px 14px, 0 0;
}

.approach > .wrap { position: relative; z-index: 1; }

.approach__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* A soft gold light that breathes behind the photograph. */
.approach__glow {
	position: absolute;
	left: -6%;
	top: -14%;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 217, 54, .17) 0%, transparent 68%);
	animation: approachBreathe 16s ease-in-out infinite alternate;
}

@keyframes approachBreathe {
	from { transform: scale(1); opacity: .75; }
	to   { transform: scale(1.16); opacity: 1; }
}

/* Counter-rotating rings, echoing the portrait motif. */
.approach__ring {
	position: absolute;
	border-radius: 50%;
}

.approach__ring--lg {
	right: -190px;
	top: 8%;
	width: 520px;
	height: 520px;
	border: 1.5px dashed rgba(83, 105, 66, .22);
	animation: approachSpin 68s linear infinite;
}

.approach__ring--sm {
	right: -60px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border: 1.5px solid rgba(218, 178, 0, .28);
	animation: approachSpin 52s linear infinite reverse;
}

@keyframes approachSpin { to { transform: rotate(360deg); } }

/* Dot fields drifting at different rates, so the ground never sits still. */
.approach__dots {
	position: absolute;
	background-image: radial-gradient(circle, var(--green-400) 1.5px, transparent 1.6px);
	background-size: 16px 16px;
	opacity: .34;
}

.approach__dots--a {
	left: -30px;
	bottom: 8%;
	width: 190px;
	height: 190px;
	animation: approachDrift 18s ease-in-out infinite alternate;
}

.approach__dots--b {
	right: 6%;
	top: -20px;
	width: 150px;
	height: 150px;
	opacity: .26;
	animation: approachDrift 24s ease-in-out infinite alternate-reverse;
}

@keyframes approachDrift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-14px, -16px, 0); }
}

/* Single points, pulsing like a needle finding its mark. */
.approach__point {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gold);
}

.approach__point--a {
	left: 46%;
	top: 12%;
	animation: approachPulse 4.2s ease-out infinite;
}

.approach__point--b {
	left: 8%;
	top: 62%;
	width: 9px;
	height: 9px;
	background: var(--green-400);
	animation: approachPulse 5.6s ease-out infinite 1.4s;
}

@keyframes approachPulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 217, 54, .5); }
	70%  { box-shadow: 0 0 0 26px rgba(255, 217, 54, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 217, 54, 0); }
}

@media (max-width: 980px) {
	/* Less room, so the ground quietens rather than crowding the text. */
	.approach__ring--lg,
	.approach__dots--b { display: none; }

	.approach__glow { width: 420px; height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
	.approach__glow,
	.approach__ring,
	.approach__dots,
	.approach__point {
		animation: none !important;
	}
}

/* =========================================================================
   TREATMENT CARDS — COLOUR

   Each condition group carries its own hue, so a long grid reads as a system
   rather than a wall of white. Every card derives its tint, icon tile, rule
   and hover panel from two custom properties, which is all a group sets:

     --slip-ink   the solid colour  (icon tile, label, hover panel)
     --slip-tint  the resting wash  (card background)

   The hues are chosen to sit beside the clinic's green and gold rather than
   compete with them — muted, and all of similar weight so no group shouts.
   ========================================================================= */

.treatments {
	background:
		radial-gradient(ellipse at 15% 0%, rgba(83, 105, 66, .05), transparent 55%),
		radial-gradient(ellipse at 85% 100%, rgba(218, 178, 0, .07), transparent 55%),
		var(--white, #fff);
}

/* ---- Group palettes ----------------------------------------------------- */

.slip--musculoskeletal  { --slip-ink: #a8552f; --slip-tint: #fbf1ea; }  /* clay   */
.slip--psychological    { --slip-ink: #6b5b8f; --slip-tint: #f3f0f8; }  /* plum   */
.slip--gastrointestinal { --slip-ink: #9a7211; --slip-tint: #fbf5e4; }  /* amber  */
.slip--neurological     { --slip-ink: #2f6a69; --slip-tint: #ebf4f4; }  /* teal   */
.slip--respiratory      { --slip-ink: #3f6f96; --slip-tint: #edf3f8; }  /* sky    */
.slip--gynaecological   { --slip-ink: #9c4a68; --slip-tint: #fbeff3; }  /* rose   */
.slip--other            { --slip-ink: #536942; --slip-tint: #eef2ea; }  /* brand  */

/* ---- The card ----------------------------------------------------------- */

/* The fallback lives at each point of use, not as a declaration on .slip —
   as a declaration it would sit later in this file than the group palettes
   above and, at equal specificity, would override every one of them. */
.slip {
	background: var(--slip-tint, var(--green-100));
	border-color: transparent;
}

/* A colour bar along the top, which grows on hover. */
.slip::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2;
	background: var(--slip-ink, var(--green-700));
	transform: scaleX(.22);
	transform-origin: left;
	transition: transform .45s var(--ease);
}

.slip:hover::before,
.slip:focus-visible::before { transform: scaleX(1); }

.slip:hover,
.slip:focus-visible {
	border-color: transparent;
	box-shadow: 0 22px 46px rgba(35, 41, 31, .18);
}

.slip__icon {
	color: #fff;
	background: var(--slip-ink, var(--green-700));
	box-shadow: 0 8px 18px -6px var(--slip-ink, var(--green-700));
}

.slip:hover .slip__icon,
.slip:focus-visible .slip__icon {
	background: #fff;
	color: var(--slip-ink, var(--green-700));
}

.slip__name { color: var(--green-900); }

.slip__group {
	padding: 3px 9px;
	color: var(--slip-ink, var(--green-700));
	background: rgba(255, 255, 255, .72);
	border-radius: 999px;
}

/* ---- The panel that slips up -------------------------------------------- */

.slip__panel {
	background:
		linear-gradient(160deg, var(--slip-ink, var(--green-700)), rgba(35, 41, 31, .92));
}

/* Forum ships a single weight, so this bold is synthesised — acceptable at
   this size on a dark ground, and it keeps the serif consistent with the
   card face. Swap to var(--sans) at 700 if a true bold is wanted. */
.slip__panel-name {
	color: var(--gold);
	font-weight: 700;
	letter-spacing: .005em;
}
.slip__panel-text { color: rgba(255, 255, 255, .9); }

/* ---- How we treat ------------------------------------------------------- */

.methods {
	background: linear-gradient(135deg, var(--green-700), var(--green-900));
	border-color: transparent;
	box-shadow: 0 20px 44px rgba(44, 58, 34, .22);
}

.methods__label { color: var(--gold); }

.methods__list li {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .22);
}

.methods__list li svg { color: var(--gold); }

.methods__list li:hover {
	color: var(--green-900);
	background: var(--gold);
	border-color: var(--gold);
	box-shadow: 0 14px 28px rgba(218, 178, 0, .34);
}

/* ---- Footnote under the grid -------------------------------------------- */

.cond-note {
	max-width: 780px;
	border: 0;
	color: var(--green-900);
	background: linear-gradient(135deg, var(--gold-100), var(--green-100));
	box-shadow: 0 14px 32px rgba(35, 41, 31, .08);
}

.cond-note:hover {
	border-color: transparent;
	box-shadow: 0 20px 42px rgba(35, 41, 31, .13);
}

/* Touch devices show the description outright, so it must sit on the card's
   own tint rather than the panel gradient. */
@media (hover: none) {
	.slip__panel { background: none; }
	.slip__panel-text { color: var(--muted); }
	.slip::before { transform: scaleX(1); }
}

/* =========================================================================
   PRACTICAL MATTERS — GROUND, MOTIF & COLOUR

   Deliberately the inverse of the treatments grid above it: that section is
   light, many-coloured and busy, so this one goes dark, green and quiet. The
   motif differs too — the grid uses none, About uses meridian rings, and this
   uses sweeping arcs under an aurora of gold light.

   The decorative layer is aria-hidden, behind the content, and freezes under
   prefers-reduced-motion.
   ========================================================================= */

.insurance {
	position: relative;
	isolation: isolate;
	/* clip, not hidden: hidden would make this a scroll container. */
	overflow: clip;
	color: #fff;
	background-color: var(--green-900);
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, .05) 1.4px, transparent 1.5px),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 18px);
	background-size: 30px 30px, auto;
}

.insurance > .wrap { position: relative; z-index: 1; }

.insurance__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* A slow band of gold light crossing the section. */
.insurance__aurora {
	position: absolute;
	inset: -40% -20%;
	background:
		radial-gradient(ellipse 60% 40% at 30% 40%, rgba(255, 217, 54, .16), transparent 60%),
		radial-gradient(ellipse 50% 40% at 75% 65%, rgba(125, 145, 102, .22), transparent 62%);
	animation: insAurora 22s ease-in-out infinite alternate;
}

@keyframes insAurora {
	from { transform: translate3d(-4%, -2%, 0) scale(1); }
	to   { transform: translate3d(5%, 3%, 0) scale(1.12); }
}

/* Concentric arcs, each turning at its own rate. */
.insurance__arc {
	position: absolute;
	border-radius: 50%;
	border: 1.5px solid transparent;
}

.insurance__arc--a {
	right: -220px;
	top: -140px;
	width: 560px;
	height: 560px;
	border-top-color: rgba(255, 217, 54, .3);
	border-right-color: rgba(255, 217, 54, .12);
	animation: insSpin 60s linear infinite;
}

.insurance__arc--b {
	right: -120px;
	top: -40px;
	width: 380px;
	height: 380px;
	border-bottom-color: rgba(255, 255, 255, .22);
	border-left-color: rgba(255, 255, 255, .08);
	animation: insSpin 44s linear infinite reverse;
}

.insurance__arc--c {
	left: -170px;
	bottom: -190px;
	width: 460px;
	height: 460px;
	border-style: dashed;
	border-color: rgba(255, 255, 255, .12);
	animation: insSpin 78s linear infinite;
}

@keyframes insSpin { to { transform: rotate(360deg); } }

/* Motes drifting upward, like points settling. */
.insurance__mote {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold);
	opacity: .5;
}

.insurance__mote--a { left: 12%; bottom: 12%; animation: insFloat 13s ease-in-out infinite; }
.insurance__mote--b { left: 34%; top: 18%; width: 6px; height: 6px; background: #fff; opacity: .35; animation: insFloat 17s ease-in-out infinite 1.5s; }
.insurance__mote--c { right: 26%; bottom: 22%; width: 10px; height: 10px; animation: insFloat 15s ease-in-out infinite .8s; }
.insurance__mote--d { right: 12%; top: 30%; width: 5px; height: 5px; background: var(--green-400); opacity: .6; animation: insFloat 19s ease-in-out infinite 2.2s; }

@keyframes insFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(10px, -26px, 0); }
}

/* ---- Content, inverted for the dark ground ------------------------------ */

.insurance h2 { color: #fff; }
.insurance .eyebrow { color: var(--gold); }
.insurance .eyebrow::before { background: var(--gold); }

.insurance__note {
	background: rgba(255, 255, 255, .08);
	border-left-color: var(--gold);
	backdrop-filter: blur(2px);
}

.insurance__note strong { color: #fff; }
.insurance__note span { color: rgba(255, 255, 255, .76); }

.insurance__note:hover {
	background: rgba(255, 255, 255, .12);
	border-left-color: var(--gold);
}

.steps-list li::before {
	color: var(--green-900);
	background: var(--gold);
	box-shadow: 0 8px 18px -6px rgba(255, 217, 54, .6);
}

.steps-list strong { color: #fff; }
.steps-list span { color: rgba(255, 255, 255, .74); }

.steps-list li:hover::before {
	background: #fff;
	color: var(--green-900);
}

/* Photograph gets a gold plate, echoing the About section's framing. */
.insurance__media { position: relative; }

.insurance__media::before {
	content: "";
	position: absolute;
	inset: 20px -16px -16px 20px;
	border-radius: 20px;
	background: var(--gold);
	opacity: .28;
}

.insurance__media img {
	position: relative;
	border-radius: 20px;
	box-shadow: 0 30px 66px rgba(0, 0, 0, .34);
}

@media (max-width: 980px) {
	/* Less room, so the ground quietens rather than crowding the text. */
	.insurance__arc--a,
	.insurance__mote--b,
	.insurance__mote--d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.insurance__aurora,
	.insurance__arc,
	.insurance__mote {
		animation: none !important;
	}
}

/* =========================================================================
   CONTACT CARDS — refined

   Four cards of equal height with a shared internal rhythm: icon, label,
   value, then the note pinned to the bottom so the baselines line up no
   matter how much text each carries.

   Two of the four are links. Those carry an arrow and lift on hover; the two
   that are only information stay still, so the cursor never promises
   something that will not happen.
   ========================================================================= */

.ccard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.ccard {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 24px 24px;
	overflow: hidden;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(35, 41, 31, .03);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

/* A colour bar that runs the width on hover, matching the treatment cards. */
.ccard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--green-700);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease);
}

a.ccard::before { background: linear-gradient(90deg, var(--green-700), var(--gold)); }
a.ccard:hover::before { transform: scaleX(1); }

a.ccard:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: 0 24px 48px rgba(35, 41, 31, .16);
	color: inherit;
}

/* Informational cards sit on a tint so the actionable ones read as buttons. */
.ccard:not(a) { background: var(--cream); }

.ccard__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin-bottom: 20px;
	color: #fff;
	background: var(--green-700);
	border-radius: 14px;
	box-shadow: 0 10px 20px -8px rgba(61, 79, 48, .8);
	transition: transform .4s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.ccard:not(a) .ccard__icon {
	color: var(--green-700);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
}

.ccard__icon svg { width: 22px; height: 22px; }

a.ccard:hover .ccard__icon {
	transform: translateY(-2px) rotate(-6deg);
	background: var(--gold);
	color: var(--green-900);
	box-shadow: 0 12px 24px -8px rgba(218, 178, 0, .9);
}

.ccard h3 {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.ccard strong {
	display: block;
	font-size: 1.14rem;
	line-height: 1.3;
	color: var(--green-900);
	/* Long values break between words, never mid-word. */
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	transition: color .3s var(--ease);
}

/* The email address is the longest value, so it takes a size of its own. */
.ccard__value--sm {
	font-size: .96rem !important;
	letter-spacing: -.01em;
}

a.ccard:hover strong { color: var(--green-700); }

.ccard__meta {
	display: block;
	margin-top: auto;
	padding-top: 12px;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--muted);
}

/* Arrow, on the two cards that actually go somewhere. */
.ccard__go {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--green-700);
	background: var(--green-100);
	border-radius: 50%;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.ccard__go svg { width: 15px; height: 15px; }

a.ccard:hover .ccard__go {
	opacity: 1;
	transform: translateX(0);
	color: var(--green-900);
	background: var(--gold);
}

a.ccard:focus-visible {
	outline: 3px solid var(--gold-600);
	outline-offset: 3px;
}

/* The note clears the arrow so the two never collide. */
a.ccard .ccard__meta { padding-right: 34px; }

@media (prefers-reduced-motion: reduce) {
	.ccard,
	.ccard::before,
	.ccard__icon,
	.ccard strong,
	.ccard__go {
		transition-duration: .01ms !important;
	}
}

/* The submit button sat flush against the last field. Scoped to the contact
   card so the homepage form, which has the slot picker in between, is
   unaffected. */
.contact-form-card form > .btn { margin-top: 28px; }
.contact-form-card form > .form-error { margin-top: 28px; margin-bottom: 0; }
.contact-form-card form > .form-error:not([hidden]) + .btn { margin-top: 16px; }

/* =========================================================================
   SEND A MESSAGE — GROUND, MOTIF & OBJECTS

   The third motif on the site, and deliberately unlike the other two: About
   uses meridian rings, Practical Matters uses arcs under an aurora, and this
   one is about a message leaving — graph-paper ground, a dashed flight path
   that draws itself, a paper plane riding it, and ripples going out.

   Kept light so the white form card still reads as the focus. The layer is
   aria-hidden, sits behind the content, and freezes under reduced motion.
   ========================================================================= */

.contact-main {
	position: relative;
	isolation: isolate;
	/* clip, not hidden: hidden would make this a scroll container. */
	overflow: clip;
	background-color: var(--cream);
	background-image:
		linear-gradient(rgba(83, 105, 66, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(83, 105, 66, .05) 1px, transparent 1px);
	background-size: 34px 34px, 34px 34px;
}

.contact-main > .wrap { position: relative; z-index: 1; }

.contact-main__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	color: var(--green-400);
}

/* ---- Colour blooms ------------------------------------------------------ */

.cm-bloom {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
}

.cm-bloom--a {
	left: -140px;
	top: -90px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(255, 217, 54, .2), transparent 68%);
	animation: cmBloom 19s ease-in-out infinite alternate;
}

.cm-bloom--b {
	right: -160px;
	bottom: -140px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(83, 105, 66, .16), transparent 68%);
	animation: cmBloom 25s ease-in-out infinite alternate-reverse;
}

@keyframes cmBloom {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(26px, -22px, 0) scale(1.14); }
}

/* ---- The flight path, drawing itself ------------------------------------ */

.cm-path {
	position: absolute;
	right: 2%;
	top: 8%;
	width: min(52%, 620px);
	height: auto;
	color: rgba(83, 105, 66, .3);
	stroke-dashoffset: 0;
	animation: cmDraw 24s linear infinite;
}

@keyframes cmDraw {
	to { stroke-dashoffset: -360; }
}

/* ---- Paper plane, riding along ------------------------------------------ */

.cm-plane {
	position: absolute;
	right: 8%;
	top: 16%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--gold-600);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 14px 30px rgba(35, 41, 31, .14);
	animation: cmGlide 12s ease-in-out infinite;
}

.cm-plane svg { width: 22px; height: 22px; }

@keyframes cmGlide {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(-26px, 24px, 0) rotate(-8deg); }
}

/* ---- Ripples going out --------------------------------------------------- */

.cm-ripple {
	position: absolute;
	left: 6%;
	bottom: 16%;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid rgba(218, 178, 0, .55);
	opacity: 0;
	animation: cmRipple 6s ease-out infinite;
}

.cm-ripple--b { animation-delay: 2s; }
.cm-ripple--c { animation-delay: 4s; }

@keyframes cmRipple {
	0%   { transform: scale(.4); opacity: .85; }
	80%  { opacity: 0; }
	100% { transform: scale(6.5); opacity: 0; }
}

/* ---- Drifting motes ------------------------------------------------------ */

.cm-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold);
	opacity: .55;
}

.cm-dot--a { left: 22%; top: 12%; animation: cmFloat 14s ease-in-out infinite; }
.cm-dot--b { left: 46%; bottom: 9%; width: 6px; height: 6px; background: var(--green-400); opacity: .6; animation: cmFloat 18s ease-in-out infinite 1.2s; }
.cm-dot--c { right: 30%; bottom: 26%; width: 10px; height: 10px; animation: cmFloat 16s ease-in-out infinite 2.4s; }

@keyframes cmFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-14px, -22px, 0); }
}

/* The form card lifts clear of the patterned ground. */
.contact-form-card { position: relative; }

@media (max-width: 980px) {
	/* Less room, so the ground quietens rather than crowding the form. */
	.cm-path,
	.cm-plane,
	.cm-dot--c { display: none; }

	.cm-bloom--a { width: 320px; height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	.cm-bloom,
	.cm-path,
	.cm-plane,
	.cm-dot {
		animation: none !important;
	}

	/* Ripples exist only as movement, so they go entirely. */
	.cm-ripple { display: none; }
}

/* =========================================================================
   SEARCH RESULTS
   ========================================================================= */

.searchpage__inner { max-width: 860px; margin-inline: auto; }

.searchpage__form { margin-bottom: clamp(30px, 4vw, 44px); }

/* ---- The form ----------------------------------------------------------- */

.searchbox {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 48px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(35, 41, 31, .07);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.searchbox:focus-within {
	border-color: var(--green-400);
	box-shadow: 0 14px 36px rgba(35, 41, 31, .12);
}

.searchbox__icon {
	position: absolute;
	left: 18px;
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: color .25s var(--ease);
}

.searchbox__icon svg { width: 19px; height: 19px; }
.searchbox:focus-within .searchbox__icon { color: var(--green-700); }

.searchbox input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--ink);
	background: none;
	border: 0;
}

.searchbox input[type="search"]:focus { outline: none; }
.searchbox .btn { flex: none; padding: 12px 24px; }

/* ---- Results ------------------------------------------------------------ */

.results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.result a {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 24px;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.result a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	border-radius: 16px 0 0 16px;
	background: linear-gradient(180deg, var(--green-700), var(--gold));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .35s var(--ease);
}

.result a:hover {
	transform: translateX(4px);
	border-color: transparent;
	box-shadow: 0 20px 42px rgba(35, 41, 31, .14);
	color: inherit;
}

.result a:hover::before { transform: scaleY(1); }

.result a:focus-visible {
	outline: 3px solid var(--gold-600);
	outline-offset: 3px;
}

.result__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: #fff;
	background: var(--green-700);
	border-radius: 13px;
	transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.result__icon svg { width: 22px; height: 22px; }

.result a:hover .result__icon {
	transform: rotate(-6deg);
	background: var(--gold);
	color: var(--green-900);
}

.result__body { min-width: 0; }

.result__kind {
	display: block;
	margin-bottom: 4px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-600);
}

.result__title {
	display: block;
	margin-bottom: 6px;
	font-family: var(--display);
	font-size: 1.24rem;
	line-height: 1.2;
	color: var(--green-900);
	transition: color .3s var(--ease);
}

.result a:hover .result__title { color: var(--green-700); }

.result__text {
	display: block;
	font-size: .92rem;
	line-height: 1.62;
	color: var(--muted);
}

.result__go {
	flex: 0 0 auto;
	align-self: center;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--green-700);
	background: var(--green-100);
	border-radius: 50%;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.result__go svg { width: 16px; height: 16px; }

.result a:hover .result__go { opacity: 1; transform: translateX(0); }

/* ---- Nothing found ------------------------------------------------------- */

.noresults {
	padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 48px);
	text-align: center;
	background: linear-gradient(150deg, var(--cream), var(--green-100));
	border-radius: 20px;
}

.noresults__icon {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin: 0 auto 20px;
	color: var(--green-700);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 12px 28px rgba(35, 41, 31, .1);
}

.noresults__icon svg { width: 30px; height: 30px; }

.noresults h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2rem); }

.noresults > p {
	max-width: 460px;
	margin: 0 auto;
	color: var(--muted);
	line-height: 1.7;
}

.noresults__label {
	margin: 30px 0 12px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.noresults__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.noresults__tags a {
	display: inline-block;
	padding: 9px 16px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--green-900);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.noresults__tags a:hover {
	transform: translateY(-3px);
	color: var(--green-900);
	background: var(--gold);
	border-color: var(--gold);
}

.noresults__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

/* The only ghost button on a light ground. */
.noresults .btn--ghost {
	color: var(--green-700);
	background: #fff;
	border-color: var(--line);
	backdrop-filter: none;
}

.noresults .btn--ghost:hover {
	color: #fff;
	background: var(--green-700);
	border-color: var(--green-700);
}

@media (max-width: 620px) {
	.searchbox {
		flex-wrap: wrap;
		padding: 14px 16px;
		border-radius: 18px;
	}

	.searchbox__icon { display: none; }
	.searchbox input[type="search"] { flex: 1 0 100%; }
	.searchbox .btn { width: 100%; }

	.result a { flex-wrap: wrap; gap: 14px; }
	.result__go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.searchbox,
	.result a,
	.result a::before,
	.result__icon,
	.result__title,
	.result__go,
	.noresults__tags a {
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   HEADER — BOOKING BUTTON ON SMALL SCREENS

   The label takes more width than a phone header has to spare, so below the
   680px breakpoint the button becomes the icon alone, as a circle sized to
   the 44px minimum touch target. The name still reaches screen readers
   through the aria-label on the link.
   ========================================================================= */

@media (max-width: 680px) {
	.header__actions .btn--gold .btn__label { display: none; }

	.header__actions .btn--gold {
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
	}

	.header__actions .btn--gold svg { width: 21px; height: 21px; }
}

/* =========================================================================
   PICKER STACKING

   The preferred-time panel is position:fixed, but .appointment__grid is
   position:relative with a z-index, so it is a stacking context the panel
   cannot escape — the panel's own z-index only orders it inside that box.
   The doctor's portrait further down (.about__portrait, also z-index 2, but
   later in the DOM) therefore painted straight over the open calendar.

   While the panel is open, slot-picker.js flags the section it lives in and
   this lifts the whole context above the sections that follow. It stays
   below the sticky header at z-index 100, which is where it belongs.
   ========================================================================= */

.is-picker-open {
	position: relative;
	z-index: 90;
}

/* =========================================================================
   PREFERRED-TIME PICKER ON PHONES — BOTTOM SHEET

   As a floating popover the panel was taller than the screen: the calendar,
   seventeen times and the Done button all stacked into the page, so choosing
   a time meant scrolling the whole document past the picker and back.

   Below 680px it becomes a bottom sheet instead — pinned to the bottom edge,
   capped at 88vh, scrolling inside itself with the page locked behind it, and
   with Done always in reach at the foot. The times also go three across, which
   removes roughly a third of the scrolling on its own.
   ========================================================================= */

@media (max-width: 680px) {

	/* The page behind the sheet stays put. */
	body.sp-sheet-open { overflow: hidden; }

	/* A scrim, so the sheet reads as a layer above the page. It is a sibling
	   of the panel — see slot-picker.js — so the two share one stacking
	   context and this can sit reliably beneath the sheet. */
	.sp__scrim {
		position: fixed;
		inset: 0;
		z-index: 155;
		background: rgba(23, 30, 18, .45);
		animation: sp-scrim .25s var(--ease) both;
	}

	@keyframes sp-scrim {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	.sp:not(.sp--inline) .sp__pop {
		/* Pinned to the bottom edge; slot-picker.js clears the inline
		   coordinates it uses for the desktop popover. */
		position: fixed;
		top: auto !important;
		left: 0 !important;
		right: 0;
		bottom: 0;
		z-index: 160;
		width: 100%;
		max-width: none;
		max-height: 88vh;
		display: flex;
		flex-direction: column;
		border: 0;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -18px 50px rgba(23, 30, 18, .3);
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: sp-sheet-up .28s var(--ease) both;
	}

	@keyframes sp-sheet-up {
		from { transform: translateY(14%); opacity: .6; }
		to   { transform: translateY(0); opacity: 1; }
	}

	/* Grab handle, so the sheet reads as one. */
	.sp:not(.sp--inline) .sp__pop::before {
		content: "";
		flex: 0 0 auto;
		width: 42px;
		height: 4px;
		margin: 10px auto 2px;
		border-radius: 99px;
		background: var(--line);
	}

	.sp:not(.sp--inline) .sp__cal {
		flex: 0 0 auto;
		padding: 10px 16px 14px;
		display: grid;
		justify-content: center;
	}

	/* Room beneath the last row so it can scroll clear of the sticky Done. */
	.sp:not(.sp--inline) .sp__slots { padding-bottom: 6px; }

	/* A little larger than the desktop grid — these are touch targets. */
	.sp:not(.sp--inline) .sp__weekdays,
	.sp:not(.sp--inline) .sp__grid { grid-template-columns: repeat(7, 40px); }
	.sp:not(.sp--inline) .sp__day { height: 40px; font-size: .86rem; }

	/*
	 * flex: 0 0 auto, not 1 1 auto with min-height: 0.
	 *
	 * Allowed to shrink, this column ended up shorter than its own grid: the
	 * sticky Done button then pinned to the bottom of the *shrunken* box, and
	 * the last rows of times (4:30 and 5:00) overflowed underneath it with no
	 * way to reach them. At natural height the sheet itself does the
	 * scrolling and every slot stays reachable.
	 */
	.sp:not(.sp--inline) .sp__times {
		flex: 0 0 auto;
		width: auto;
		padding: 14px 16px 0;
		border-left: 0;
		border-top: 1px solid var(--line);
		border-radius: 0;
	}

	/* Three across rather than two, so the list is a third shorter. */
	.sp:not(.sp--inline) .sp__slots {
		grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
		max-height: none;
		padding-right: 0;
		overflow: visible;
	}

	.sp:not(.sp--inline) .sp__slot { padding: 12px 4px; font-size: .8rem; }

	/* Done stays within reach at the foot of the sheet. */
	.sp:not(.sp--inline) .sp__done {
		position: sticky;
		bottom: 0;
		z-index: 1;
		margin: 14px 0 0;
		padding: 14px;
		font-size: .88rem;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -10px 18px rgba(255, 255, 255, .9);
	}

	.sp:not(.sp--inline) .sp__chosen {
		margin: 0;
		border-radius: 0;
	}

	/* The trigger keeps its place in the page. */
	.sp:not(.sp--inline) .sp__legend { margin-top: 10px; padding-top: 9px; }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
	.sp:not(.sp--inline) .sp__pop,
	.sp__scrim { animation: none !important; }
}

/* The scrim belongs to the bottom sheet only — above that breakpoint the
   panel is a popover and dimming the page would be wrong. */
.sp__scrim { display: none; }
.sp__scrim[hidden] { display: none !important; }

@media (max-width: 680px) {
	.sp__scrim:not([hidden]) { display: block; }
}

/* The confirmation sits between the last field and the submit button, so it
   needs air on both sides rather than butting up against either. */
form > .ty {
	margin: 30px 0 22px;
}

/* Image & Text band with the photograph on the right. */
.personal__grid--flip .personal__media { order: 2; }
.personal__grid--flip .personal__body { order: 1; }

@media (max-width: 980px) {
	.personal__grid--flip .personal__media { order: -1; }
	.personal__grid--flip .personal__body { order: 0; }
}

/* ---------------------------------------------------------
   Icons chosen from Elementor's library

   The theme's own icons are inline <svg> on a 24x24 box, stroked and unfilled.
   A library icon arrives either as Elementor's inline font-icon SVG (its own
   viewBox, filled rather than stroked) or, when icon fonts are in use, as an
   <i> glyph. Both need the same box and colour to sit in the round badges.
   The width/height rules above already size any <svg>; these fill the gaps.
   --------------------------------------------------------- */
.stat__icon i,
.service__icon i,
.condition__icon i {
	font-size: 22px;
	line-height: 1;
}

.step__badge i {
	font-size: 28px;
	line-height: 1;
}

.stat__icon i,
.service__icon i,
.condition__icon i,
.step__badge i,
.stat__icon .e-font-icon-svg,
.service__icon .e-font-icon-svg,
.condition__icon .e-font-icon-svg,
.step__badge .e-font-icon-svg {
	color: currentColor;
	fill: currentColor;
}

/* Library icons in the smaller icon slots. The existing `… svg` rules already
   size an SVG pick; font icons (<i>) need a matching font-size, and both take
   the slot's colour rather than their own. */
.booking-form__meta i,
.location__badges i { font-size: 15px; line-height: 1; flex: none; }
.booking-form__meta i,
.booking-form__meta .e-font-icon-svg { color: var(--gold); fill: currentColor; }
.location__badges i,
.location__badges .e-font-icon-svg { color: var(--gold-600); fill: currentColor; }

.methods__list li i { font-size: 17px; line-height: 1; color: var(--gold-600); }
.methods__list li .e-font-icon-svg { fill: currentColor; }

.slip__icon i { font-size: 23px; line-height: 1; }
.ccard__icon i { font-size: 22px; line-height: 1; }
.slip__icon i,
.slip__icon .e-font-icon-svg,
.ccard__icon i,
.ccard__icon .e-font-icon-svg { color: currentColor; fill: currentColor; }

/* Qualifications use a smaller badge, so their library icons get their own size. */
.creds__icon i { font-size: 18px; line-height: 1; }
.creds__icon i,
.creds__icon .e-font-icon-svg { color: currentColor; fill: currentColor; }
.creds__icon svg { max-width: 100%; max-height: 100%; }

/* An uploaded SVG brings its own dimensions; keep it inside the badge. */
.stat__icon svg,
.service__icon svg,
.condition__icon svg,
.step__badge svg {
	max-width: 100%;
	max-height: 100%;
}