/**
 * Denwell — warm neighborhood veterinary-practice theme.
 * Design tokens, layout, and component styles.
 *
 * @package Denwell
 */

/* ---------------------------------------------------------------------
   1. Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--cream);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: var(--fs-1);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, dl, dd { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--coral); outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   2. Design tokens
   --------------------------------------------------------------------- */
:root {
	/* Palette — warm cream/blush base with a coral CTA accent and a soft
	   sage secondary, NOT the parchment+forest-green combination an
	   earlier sibling theme ("Greenbelt") already used. Reads as cheerful,
	   modern neighborhood pet-care branding. */
	--cream: #fbf5ee;
	--cream-2: #f6ede1;
	--cream-3: #efe3d3;
	--paper: #fffdfa;

	--charcoal: #3a2f2a;
	--charcoal-80: rgba(58, 47, 42, 0.82);
	/* --charcoal-70 is the WCAG-safe secondary-text alpha. An earlier 0.66
	   alpha measured only ~4.0-4.4:1 against this theme's actual layered
	   backgrounds (translucent .section over the canvas gradient, and
	   worse, translucent .glass over that) — under the 4.5:1 AA floor for
	   normal text, empirically verified via composited relative-luminance
	   contrast (not just against the flat --cream swatch). 0.75 clears
	   4.5:1 with margin on every real surface in the theme, including the
	   darkest glass-over-alt-section case (~5.0-5.5:1). */
	--charcoal-70: rgba(58, 47, 42, 0.75);
	--charcoal-45: rgba(58, 47, 42, 0.46);
	--charcoal-14: rgba(58, 47, 42, 0.12);
	--charcoal-08: rgba(58, 47, 42, 0.07);

	--coral: #e8846b;
	--coral-dark: #d1664c;
	/* --coral-deep is the WCAG-safe on-cream text/link variant of --coral —
	   --coral itself measures only ~2.6:1 against --cream, well under the
	   4.5:1 AA floor for normal text. An earlier #b6503a measured ~4.6:1 on
	   flat --cream but dropped to ~4.2-4.5:1 on the theme's actual layered
	   surfaces (the .eyebrow pill background, glass-over-alt-section) —
	   verified via composited contrast against those real backgrounds, not
	   just the flat swatch. #9c3f2a clears 4.5:1 with margin (~5.6-6.1:1)
	   on every real surface it's used against. */
	--coral-deep: #9c3f2a;
	--coral-glow: rgba(232, 132, 107, 0.28);

	--sage: #8fae8b;
	/* --sage-dark is reserved for icons, borders, and large/bold text only
	   (~3.3:1 on cream — passes the large-text AA threshold but not body
	   text) rather than small body copy. */
	--sage-dark: #6f9169;
	/* --sage-text is a darker sage for actual small text (status messages,
	   badge labels, hints) — --sage-dark measured only ~2.7-3.3:1 in these
	   spots (verified via composited contrast against the real glass/pill
	   backgrounds it sits on), under the 4.5:1 AA floor. --sage-text clears
	   ~5.4-6.5:1 while still reading as sage/forest green, not charcoal. */
	--sage-text: #456043;
	--sage-glow: rgba(143, 174, 139, 0.24);

	/* An earlier #c14a3a measured only ~3.6:1 on its own emergency-tag pill
	   background (err text on a tinted err pill, both sitting on a worst-
	   case glass-over-alt-section surface) — under 4.5:1 AA. #963224
	   clears ~5.4:1 even in that worst case. */
	--err: #963224;

	/* Fonts */
	--font-display: 'Fredoka', system-ui, sans-serif;
	--font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;

	/* Type scale: 16px base x 1.25 ratio */
	--fs-0: 0.8rem;
	--fs-1: 1rem;
	--fs-2: 1.25rem;
	--fs-3: 1.563rem;
	--fs-4: 1.953rem;
	--fs-5: 2.441rem;
	--fs-6: 3.052rem;
	--fs-7: 3.815rem;

	/* Spacing scale */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4rem;
	--sp-7: 6rem;
	--sp-8: 8rem;
	--sp-9: 10rem;

	--section-pad: 10rem;
	--radius: 24px;
	--radius-sm: 14px;
	--radius-lg: 34px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 780px) {
	:root { --section-pad: 4.5rem; }
}

/* ---------------------------------------------------------------------
   3. Base typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--charcoal);
	text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.8rem + 3vw, var(--fs-7)); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 1.5rem + 1.8vw, var(--fs-6)); }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-2); }
p { color: var(--charcoal-70); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-size: var(--fs-0);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--coral-deep);
	background: rgba(232, 132, 107, 0.12);
	padding: 0.4em 0.9em;
	border-radius: 999px;
	margin-bottom: var(--sp-3);
}

/* ---------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }
.wrap--narrow { max-width: 680px; margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }

.section { position: relative; padding: var(--section-pad) 0; z-index: 1; background: rgba(251, 245, 238, 0.87); }
.section--alt { background: rgba(246, 237, 225, 0.9); }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 999;
	background: var(--charcoal); color: var(--cream); padding: 0.8em 1.4em; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.section-head { max-width: 640px; margin-bottom: var(--sp-6); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: var(--sp-2); }
.section-head p { margin-top: var(--sp-2); font-size: var(--fs-2); }

.mt-5 { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	padding: 0.95em 1.8em; border-radius: 999px;
	font-family: var(--font-display); font-weight: 600; font-size: 1rem;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color 0.2s, color 0.2s; } }
/* Dark charcoal on --coral measures ~4.9:1 — passes AA; white text on
   --coral alone would only measure ~2.6:1. */
.btn--cta { background: var(--coral); color: var(--charcoal); box-shadow: 0 16px 34px -16px var(--coral-glow); }
.btn--cta:hover { background: var(--coral-dark); transform: translateY(-2px); }
.btn--outline { background: transparent; border: 1.5px solid var(--charcoal-14); color: var(--charcoal); }
.btn--outline:hover { border-color: var(--coral); color: var(--coral-deep); }
.btn--lg { padding: 1.05em 2.1em; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

/* ---------------------------------------------------------------------
   6. Liquid glass surfaces — warm frosted cream/blush variant, not the
   cold blue-tinted glass used in recent sibling themes.
   --------------------------------------------------------------------- */
.glass {
	position: relative;
	background: linear-gradient(160deg, rgba(255, 253, 250, 0.76), rgba(251, 245, 238, 0.56));
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid rgba(58, 47, 42, 0.09);
	border-radius: var(--radius);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 0 60px rgba(232, 132, 107, 0.05),
		0 24px 54px -26px rgba(58, 47, 42, 0.2);
	overflow: hidden;
}
.glass::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 12% -10%, rgba(232, 132, 107, 0.1), transparent 55%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   7. Persistent ambient WebGL2 background — fixed, full-viewport,
   non-negative z-index (see header.php note on the negative-z-index
   occlusion bug class). Content wrapper .dw-page sits at z-index:1 above
   it, and .section/.wrap keep a translucent (not opaque) background so the
   warm field genuinely continues to read past the hero, not just at the
   top of the page.
   --------------------------------------------------------------------- */
.dw-bg-stage {
	position: fixed; inset: 0; z-index: 0;
	background: radial-gradient(120% 90% at 50% 12%, #fffaf3 0%, var(--cream) 55%, var(--cream-3) 100%);
	overflow: hidden;
	pointer-events: none;
}
.dw-bg-stage canvas { width: 100%; height: 100%; display: block; }
.dw-bg-fallback {
	position: absolute; inset: 0; display: none;
	background:
		radial-gradient(38% 30% at 22% 22%, rgba(232, 132, 107, 0.16), transparent 65%),
		radial-gradient(32% 26% at 78% 66%, rgba(143, 174, 139, 0.15), transparent 60%),
		radial-gradient(120% 90% at 50% 12%, #fffaf3 0%, var(--cream) 55%, var(--cream-3) 100%);
}
.dw-bg-stage.is-fallback .dw-bg-fallback { display: block; }
.dw-bg-stage.is-fallback canvas { display: none; }

.dw-page { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   8. Header
   --------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--charcoal-08); }
/* Blur lives on a ::before layer, not directly on .site-header — a
   computed backdrop-filter on .site-header itself would establish a
   containing block for its position:fixed .nav descendant (mobile
   off-canvas panel), collapsing its inset:0 0 0 auto sizing down to
   content height instead of the full viewport. This exact bug class hit
   two recent sibling themes' mobile nav panels. */
.site-header::before {
	content: '';
	position: absolute; inset: 0; z-index: -1;
	background: rgba(251, 245, 238, 0.8);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}
/* padding-top/-bottom only (not the shorthand) — a shorthand `padding`
   here would silently zero out .wrap's horizontal padding on this same
   element (equal specificity, later in source order always wins the whole
   shorthand), leaving the header content flush against the viewport edge
   at every width. Found and fixed during RTL verification: the header's
   left/right breathing room measured 0px via getComputedStyle regardless
   of viewport size before this fix. */
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); padding-top: 1.05rem; padding-bottom: 1.05rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 650; font-size: 1.3rem; color: var(--charcoal); }
.brand__mark { color: var(--coral); display: inline-flex; }
.nav { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.nav ul { display: flex; gap: var(--sp-4); align-items: center; }
.nav a { font-size: 0.92rem; font-weight: 700; color: var(--charcoal-80); transition: color 0.25s var(--ease); }
.nav a:hover { color: var(--coral-deep); }
.nav .menu-item-cta a {
	background: var(--coral); color: var(--charcoal); padding: 0.6em 1.3em; border-radius: 999px;
}
.nav .menu-item-cta a:hover { background: var(--coral-dark); }
.nav__phone { display: flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--coral-deep); font-size: 0.9rem; white-space: nowrap; }
.nav__phone svg { flex-shrink: 0; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--charcoal); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.nav {
		position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); margin: 0;
		flex-direction: column; align-items: flex-start; justify-content: flex-start;
		padding: 6rem var(--sp-4) var(--sp-4); gap: var(--sp-3);
		background: rgba(251, 245, 238, 0.95);
		backdrop-filter: blur(24px) saturate(140%);
		-webkit-backdrop-filter: blur(24px) saturate(140%);
		box-shadow: -18px 0 54px -22px rgba(58, 47, 42, 0.28);
		transform: translateX(100%);
		transition: transform 0.35s var(--ease);
		z-index: 200;
		overflow-y: auto;
	}
	@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
	.nav.is-open { transform: translateX(0); }
	.nav ul { flex-direction: column; gap: 0; width: 100%; }
	.nav ul li { width: 100%; border-bottom: 1px solid var(--charcoal-08); }
	.nav ul a { display: block; padding: 1rem 0; font-size: 1.1rem; }
	.nav .menu-item-cta { margin-top: var(--sp-3); width: 100%; }
	.nav .menu-item-cta a { display: flex; justify-content: center; width: 100%; padding: 0.9em 1.6em; }
	.nav__phone { margin-top: var(--sp-3); font-size: 1rem; }
}

/* ---------------------------------------------------------------------
   9. Hero
   --------------------------------------------------------------------- */
.hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--sp-6); padding-bottom: var(--sp-6); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; padding: 0 var(--sp-4); }
.hero__lede { font-size: var(--fs-2); margin-top: var(--sp-3); max-width: 600px; margin-left: auto; margin-right: auto; }
.hero__cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }
.hero__scroll-hint {
	position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
	font-size: 0.75rem; color: var(--charcoal-45); z-index: 2;
}
.hero__scroll-hint .line { width: 1px; height: 34px; background: linear-gradient(var(--charcoal-45), transparent); animation: dwScrollLine 2.2s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .hero__scroll-hint .line { animation: none; opacity: 0.6; } }
@keyframes dwScrollLine {
	0% { opacity: 0; transform: scaleY(0.4); transform-origin: top; }
	50% { opacity: 1; transform: scaleY(1); }
	100% { opacity: 0; transform-origin: bottom; transform: scaleY(0.4); }
}

/* ---------------------------------------------------------------------
   10. Services grid + card
   --------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.svc-card__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(232, 132, 107, 0.14); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-card__title { margin-top: var(--sp-1); }
.svc-card__title a { color: var(--charcoal); font-family: var(--font-display); font-weight: 600; }
.svc-card__title a:hover { color: var(--coral-deep); }
.svc-card__excerpt { font-size: 0.96rem; flex: 1; }
.svc-card__highlights { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; }
.svc-card__highlights li { display: flex; gap: 0.5em; align-items: flex-start; }
.svc-card__highlights li svg { flex-shrink: 0; margin-top: 0.15em; color: var(--sage-dark); }
.svc-card__link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--coral-deep); margin-top: auto; padding-top: var(--sp-2); font-size: 0.9rem; }
.svc-card__link:hover { color: var(--coral-dark); }

/* ---------------------------------------------------------------------
   11. Triage wizard — the signature technique: a real branching decision
   tree (see assets/js/dw-triage.js), not a numeric calculator.
   --------------------------------------------------------------------- */
.triage { max-width: 720px; margin: 0 auto; padding: var(--sp-5); }
.triage__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.triage__progress { flex: 1; height: 6px; border-radius: 999px; background: var(--charcoal-08); overflow: hidden; }
.triage__progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--coral), var(--sage)); border-radius: 999px; transition: width 0.4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .triage__progress-bar { transition: none; } }
.triage__restart { display: flex; align-items: center; gap: 0.3em; font-size: 0.82rem; font-weight: 700; color: var(--charcoal-70); white-space: nowrap; }
.triage__restart:hover { color: var(--coral-deep); }
.triage__restart[hidden] { display: none; }

.triage__panel { min-height: 220px; position: relative; }
.triage__panel-inner { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
	.triage__panel-inner { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
}
.triage__panel-inner.is-in { opacity: 1; transform: translateY(0); }

.triage__question-text { font-size: var(--fs-3); margin-bottom: var(--sp-4); color: var(--charcoal); }
.triage__options { display: flex; flex-direction: column; gap: 0.7rem; }
.triage__option {
	text-align: left; padding: 1em 1.3em; border-radius: var(--radius-sm);
	border: 1.5px solid var(--charcoal-14); background: rgba(255, 253, 250, 0.55);
	font-weight: 600; font-size: 0.98rem; color: var(--charcoal); width: 100%;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.triage__option:hover { border-color: var(--coral); background: rgba(232, 132, 107, 0.09); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .triage__option:hover { transform: none; } }

.triage__outcome-tag {
	display: inline-block; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
	letter-spacing: 0.03em; text-transform: uppercase; padding: 0.35em 0.9em; border-radius: 999px; margin-bottom: var(--sp-2);
}
.triage__outcome--emergency .triage__outcome-tag { background: rgba(150, 50, 36, 0.14); color: var(--err); }
.triage__outcome--same-day .triage__outcome-tag { background: rgba(232, 132, 107, 0.16); color: var(--coral-deep); }
.triage__outcome--routine .triage__outcome-tag { background: rgba(143, 174, 139, 0.2); color: var(--sage-text); }
.triage__outcome-title { font-size: var(--fs-3); margin-bottom: var(--sp-2); }
.triage__outcome-body { font-size: 1.02rem; line-height: 1.65; }
.triage__outcome-actions { margin-top: var(--sp-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
/* White text on --err measures ~7.5:1 — passes AA with margin. */
.triage__outcome--emergency .btn--cta { background: var(--err); color: #fff; box-shadow: 0 16px 34px -16px rgba(150, 50, 36, 0.4); }
.triage__outcome--emergency .btn--cta:hover { background: #7c281b; }
.triage__call-icon { font-size: 1.05em; }
.triage__secondary-link { font-size: 0.86rem; font-weight: 700; color: var(--charcoal-70); text-decoration: underline; text-underline-offset: 3px; }
.triage__secondary-link:hover { color: var(--coral-deep); }
.triage__secondary-link--restart { margin-top: var(--sp-2); }

.triage__disclaimer {
	display: flex; align-items: center; gap: 0.5em; justify-content: center; flex-wrap: wrap;
	margin-top: var(--sp-4); font-size: 0.86rem; color: var(--charcoal-70); text-align: center;
}
.triage__disclaimer svg { color: var(--sage-dark); flex-shrink: 0; }
.triage__disclaimer a { font-weight: 700; color: var(--coral-deep); }

/* ---------------------------------------------------------------------
   12. Team grid + card
   --------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.team-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.team-card__media { display: block; aspect-ratio: 4 / 4.5; overflow: hidden; background: var(--cream-3); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.team-card:hover .team-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .team-card__media img, .team-card:hover .team-card__media img { transition: none; transform: none; } }
.team-card__media--fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--charcoal-45); }
.team-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.team-card__name { font-size: 1.12rem; }
.team-card__name a { color: var(--charcoal); }
.team-card__name a:hover { color: var(--coral-deep); }
.team-card__credential { color: var(--coral-deep); font-weight: 600; font-size: 0.9em; }
.team-card__role { color: var(--charcoal-70); font-size: 0.9rem; margin-top: 0.2rem; }
.team-card__specialty { display: flex; align-items: flex-start; gap: 0.4em; font-size: 0.86rem; color: var(--charcoal-70); margin-top: 0.5rem; }
.team-card__specialty svg { color: var(--coral); flex-shrink: 0; margin-top: 0.15em; }
.team-card__years { font-size: 0.8rem; color: var(--charcoal-45); margin-top: 0.3rem; }

.team-single__grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 760px) { .team-single__grid { grid-template-columns: 1fr; } }
.team-single__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--cream-3); aspect-ratio: 4 / 4.6; }
.team-single__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-single__role { color: var(--coral-deep); font-weight: 700; margin-top: 0.3rem; }
.team-single__meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); font-size: 0.92rem; color: var(--charcoal-70); }
.team-single__meta span { display: flex; align-items: center; gap: 0.4em; }
.team-single__meta svg { color: var(--sage-dark); flex-shrink: 0; }
.team-single .entry-content { margin-top: var(--sp-4); line-height: 1.75; }
.team-single .entry-content p { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------------
   13. What to Expect — a plain numbered sequence, deliberately a simpler
   mechanism than an animated SVG process trace.
   --------------------------------------------------------------------- */
.visit-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .visit-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .visit-steps { grid-template-columns: 1fr; } }
.visit-step { position: relative; padding: var(--sp-4) var(--sp-3); text-align: left; background: rgba(255, 253, 250, 0.55); border: 1px solid var(--charcoal-08); border-radius: var(--radius); }
.visit-step__num { position: absolute; top: var(--sp-3); right: var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--charcoal-14); }
.visit-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(143, 174, 139, 0.18); color: var(--sage-dark); margin-bottom: var(--sp-3); }
.visit-step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.visit-step p { font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   14. Testimonials
   --------------------------------------------------------------------- */
.ts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 760px) { .ts-grid { grid-template-columns: 1fr; } }
.ts-card { padding: var(--sp-4); position: relative; }
.ts-card__quote-mark { color: var(--coral); opacity: 0.55; display: block; margin-bottom: var(--sp-2); }
.ts-card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--charcoal-80); }
.ts-card figcaption { margin-top: var(--sp-3); font-size: 0.9rem; color: var(--charcoal-70); }
.ts-card figcaption strong { color: var(--charcoal); }

/* ---------------------------------------------------------------------
   15. Trust & credentials
   --------------------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card { padding: var(--sp-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.trust-card__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(143, 174, 139, 0.18); color: var(--sage-dark); display: flex; align-items: center; justify-content: center; }
.trust-card h3 { font-size: 1.05rem; }
.trust-card p { font-size: 0.88rem; }

/* ---------------------------------------------------------------------
   16. Appointment form
   --------------------------------------------------------------------- */
.apt-form { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.aform-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) { .aform-row { grid-template-columns: 1fr; } }
.aform-field { display: flex; flex-direction: column; gap: 0.4rem; }
.aform-field label { font-size: 0.86rem; font-weight: 700; color: var(--charcoal-80); }
.aform-field input, .aform-field select, .aform-field textarea {
	padding: 0.85em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--charcoal-14);
	background: rgba(255, 253, 250, 0.72); font-family: var(--font-body); font-size: 0.98rem; color: var(--charcoal);
}
.aform-field textarea { min-height: 100px; resize: vertical; }
.aform-field input:focus, .aform-field select:focus, .aform-field textarea:focus { border-color: var(--coral); }
.aform-hint { font-size: 0.8rem; color: var(--sage-text); font-weight: 700; }
.aform-note { display: flex; align-items: center; gap: 0.5em; font-size: 0.82rem; color: var(--charcoal-70); }
.aform-note svg { color: var(--err); flex-shrink: 0; }
.aform-status { font-size: 0.9rem; font-weight: 700; min-height: 1.2em; }
.aform-status.is-success { color: var(--sage-text); }
.aform-status.is-error { color: var(--err); }
.rsv-locked-product { display: flex; align-items: center; gap: 0.5em; padding: 0.85em 1em; border-radius: var(--radius-sm); background: rgba(143, 174, 139, 0.14); font-weight: 700; }
.rsv-locked-product svg { color: var(--sage-dark); }

/* ---------------------------------------------------------------------
   17. Footer CTA + footer
   --------------------------------------------------------------------- */
.footer-cta { position: relative; z-index: 1; background: linear-gradient(135deg, var(--cream-3), var(--cream-2)); padding: var(--sp-6) 0; }
.footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.footer-cta__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.site-footer { position: relative; z-index: 1; background: var(--cream-2); padding: var(--sp-7) 0 var(--sp-4); border-top: 1px solid var(--charcoal-08); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-6); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col--brand p { font-size: 0.92rem; margin-top: var(--sp-2); max-width: 320px; }
.brand--footer { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 650; font-size: 1.2rem; color: var(--charcoal); }
.brand--footer .brand__mark { color: var(--coral); }
.site-footer h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal-45); margin-bottom: var(--sp-2); font-family: var(--font-display); }
.site-footer ul li { margin-bottom: 0.5rem; }
.site-footer a { font-size: 0.92rem; }
.site-footer a:hover { color: var(--coral-deep); }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--charcoal-08); font-size: 0.82rem; color: var(--charcoal-45); }
.footer-disclaimer { display: flex; align-items: center; gap: 0.5em; justify-content: center; margin-top: var(--sp-4); font-size: 0.8rem; color: var(--charcoal-45); text-align: center; }
.footer-disclaimer svg { color: var(--err); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   18. Generic content: pages, single posts, product-style single (service),
   404, search, blog cards, comments
   --------------------------------------------------------------------- */
.post-header { max-width: 760px; }
.post-featured { border-radius: var(--radius-lg); overflow: hidden; margin: var(--sp-5) 0; }
.post-featured img { width: 100%; display: block; }
.page-content, .entry-content { max-width: 760px; color: var(--charcoal-80); line-height: 1.75; font-size: 1.05rem; }
.page-content p, .entry-content p { margin-bottom: var(--sp-3); }
.post-meta { color: var(--charcoal-45); font-size: 0.9rem; margin-top: 0.4rem; }

.pd-hero { position: relative; padding-top: var(--sp-8); padding-bottom: var(--sp-6); }
.pd-hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; padding: 0 var(--sp-4); }
.pd-overview { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 860px) { .pd-overview { grid-template-columns: 1fr; } }
.pd-overview__content { margin-top: var(--sp-3); line-height: 1.75; font-size: 1.02rem; }
.pd-overview__content p { margin-bottom: var(--sp-3); }
.pd-highlight-list { display: flex; flex-direction: column; gap: var(--sp-2); background: rgba(255, 253, 250, 0.55); border: 1px solid var(--charcoal-08); border-radius: var(--radius); padding: var(--sp-4); }
.pd-highlight-list li { display: flex; gap: 0.6em; align-items: flex-start; font-weight: 600; font-size: 0.96rem; color: var(--charcoal); }
.pd-highlight-list li svg { color: var(--sage-dark); flex-shrink: 0; margin-top: 0.2em; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 860px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }
.post-card { display: block; overflow: hidden; padding: 0; }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__media--fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--charcoal-45); }
.post-card__body { padding: var(--sp-3); }
.post-card__date { font-size: 0.78rem; color: var(--charcoal-45); text-transform: uppercase; letter-spacing: 0.04em; }
.post-card__title { font-size: 1.1rem; margin-top: 0.4rem; color: var(--charcoal); }
.post-card__excerpt { font-size: 0.9rem; margin-top: 0.4rem; }

.error-404 { text-align: center; }
.error-404__code { display: inline-flex; justify-content: center; width: 100%; color: var(--coral); opacity: 0.7; }

.comments-area { max-width: 680px; }
.comments-title { font-size: var(--fs-3); margin-bottom: var(--sp-3); }
.comment-list { margin: 0 0 var(--sp-4); }
.comment-body { padding: var(--sp-3) 0; border-bottom: 1px solid var(--charcoal-08); }
.comment-author { font-weight: 700; margin: 0; }
.comment-metadata a { font-size: 0.82rem; color: var(--charcoal-45); }
.comment-content { margin-top: 0.4rem; color: var(--charcoal-80); }
.comment-content p { margin-bottom: var(--sp-2); }
.comment-reply-title { font-size: var(--fs-3); margin-top: var(--sp-5); }
.comment-notes, .logged-in-as { color: var(--charcoal-70); font-size: 0.9rem; margin-bottom: var(--sp-2); }
#commentform p { margin-bottom: var(--sp-2); }
#commentform label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 0.3rem; }
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea {
	width: 100%; padding: 0.75em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--charcoal-14);
	background: rgba(255, 253, 250, 0.72); font-family: var(--font-body);
}
#commentform textarea { min-height: 120px; }

/* Search form (get_search_form default markup) */
.search-form { display: flex; gap: var(--sp-2); max-width: 460px; margin: var(--sp-3) auto 0; }
.search-form label { flex: 1; }
.search-form .search-field {
	width: 100%; padding: 0.85em 1.1em; border-radius: 999px; border: 1.5px solid var(--charcoal-14);
	background: rgba(255, 253, 250, 0.72); font-family: var(--font-body);
}
.search-form .search-submit {
	padding: 0.7em 1.4em; border-radius: 999px; background: var(--coral); color: var(--charcoal); font-weight: 700; font-family: var(--font-display);
}
.search-form .search-submit:hover { background: var(--coral-dark); }

/* ---------------------------------------------------------------------
   19. Directional scroll-reveal
   --------------------------------------------------------------------- */
.reveal { opacity: 0; }
.reveal--up { transform: translateY(28px); }
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
@media (prefers-reduced-motion: no-preference) {
	.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
}
.reveal.is-visible { opacity: 1; transform: none; }