/* ============================================================
   Premier Medical Spa — main.css
   Mobile-first. All values reference tokens in style.css.
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: none; transition: color var(--ease-default); }
a:hover { color: var(--color-link-hover); }
ul, ol { padding: 0; list-style-position: inside; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-teal-500); outline-offset: 2px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: var(--leading-snug); color: var(--color-teal-900); }
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-xl); }
p { max-width: var(--max-prose); }
strong { font-weight: 600; }
em { font-style: italic; }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm); color: var(--color-teal-700); margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; display: inline-block; width: 1.6em; height: 1px; background: var(--color-accent); vertical-align: middle; margin-right: 0.6em; }
/* Eyebrow contrast on coloured backgrounds (AA) */
.cta-band--teal .eyebrow, .section--teal .eyebrow, .hero--dark .eyebrow { color: var(--color-accent-soft); }
.section--wash .eyebrow, .email-capture .eyebrow { color: var(--color-teal-900); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--max-content) + (var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }
.site-content { min-height: 50vh; }
section { scroll-margin-top: calc(var(--header-h) + 1rem); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-paper-alt); }
.section--teal { background: var(--color-teal-900); color: var(--color-on-teal); }
.section--teal h1, .section--teal h2, .section--teal h3 { color: var(--color-on-teal); }
.section--wash { background: var(--color-teal-100); }
.section__head { max-width: 40rem; margin-bottom: var(--space-8); }
.section__cta { text-align: center; margin-top: var(--space-8); }
.section__head--center { margin-inline: auto; text-align: center; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.2em; list-style-position: outside; }
.prose li + li { margin-top: var(--space-2); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-accent); }
.prose img { border-radius: var(--radius-md); }
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
  padding: 0; border: 0; word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; z-index: 1000; }
.skip-link:focus { left: var(--gutter); top: var(--space-2); background: var(--color-teal-900); color: var(--color-white); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); line-height: 1.2;
  padding: 0.75em 1.4em; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background var(--ease-default), color var(--ease-default), border-color var(--ease-default);
  min-height: 44px; text-align: center;
}
.btn--lg { font-size: var(--text-lg); padding: 0.85em 1.7em; }
.btn--primary { background: var(--color-teal-700); color: var(--color-white); border-color: var(--color-teal-700); }
.btn--primary:hover { background: var(--color-teal-900); border-color: var(--color-teal-900); color: var(--color-white); }
.btn--outline { background: transparent; color: var(--color-teal-900); border-color: var(--color-teal-700); }
.btn--outline:hover { background: var(--color-teal-700); color: var(--color-white); }
.btn--ghost { background: transparent; color: var(--color-teal-900); border-color: var(--color-line); }
.btn--ghost:hover { border-color: var(--color-teal-700); color: var(--color-teal-700); }
.btn--gold { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.btn--gold:hover { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.section--teal .btn--ghost { color: var(--color-on-teal); border-color: rgba(247,244,237,0.4); }
.section--teal .btn--ghost:hover { background: var(--color-on-teal); color: var(--color-teal-900); }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--color-line); font-size: var(--text-lg); line-height: 1; }
.star--full { color: var(--color-accent); }

/* ---------- Placeholder image ---------- */
.pms-placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, var(--color-paper-alt), var(--color-paper-alt) 12px, var(--color-teal-100) 12px, var(--color-teal-100) 24px);
  border: 1px dashed var(--color-line); border-radius: var(--radius-md); color: var(--color-muted);
}
.pms-placeholder[data-size="pms-portrait"] { aspect-ratio: 3 / 4; }
.pms-placeholder[data-size="pms-hero"] { aspect-ratio: 16 / 10; }
.pms-placeholder__mark { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; background: var(--color-paper); padding: 0.4em 0.8em; border-radius: var(--radius-sm); }

/* ---------- Motif ---------- */
.pms-motif { color: var(--color-accent); opacity: 0.85; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header); background: var(--color-paper);
  border-bottom: var(--border-hair); min-height: var(--header-h);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
.site-header__brand img, .site-logo img, .custom-logo { max-height: 48px; width: auto !important; height: auto !important; object-fit: contain; }
.site-logo--text { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-teal-900); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.site-header__brand .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.site-header__phone { display: none; align-items: center; gap: 6px; color: var(--color-teal-900); font-weight: 600; font-size: var(--text-sm); }
.site-header__phone:hover { color: var(--color-teal-700); }
.site-header__book { display: none; }

/* Nav */
.primary-nav { display: none; }
.primary-menu { display: flex; gap: var(--space-5); list-style: none; margin: 0; align-items: center; }
.primary-menu a { color: var(--color-ink); font-weight: 500; font-size: var(--text-base); padding-block: var(--space-2); position: relative; }
.primary-menu a:hover, .primary-menu .current-menu-item > a { color: var(--color-teal-700); }
.primary-menu .current-menu-item > a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--color-accent); }
.primary-menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--color-white);
  border: var(--border-hair); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-2); list-style: none; display: none; z-index: 5;
}
.primary-menu .menu-item-has-children { position: relative; }
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.primary-menu .sub-menu a:hover { background: var(--color-teal-100); }

/* Mini cart (header drawer) — global chrome, hidden by default everywhere */
.mini-cart-wrapper { position: relative; }
.mini-cart-trigger {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer;
  color: var(--color-teal-900); padding: var(--space-2); position: relative; min-width: 44px; min-height: 44px;
}
.mini-cart-trigger .cart-count {
  position: absolute; top: 2px; right: 0; background: var(--color-accent); color: var(--color-ink);
  font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1;
  min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; padding: 0 4px;
}
.mini-cart-trigger .cart-count.is-empty { display: none; }
.mini-cart-drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(380px, 90vw);
  background: var(--color-paper); border-left: var(--border-hair); box-shadow: var(--shadow-md);
  z-index: var(--z-drawer); flex-direction: column; padding: var(--space-5);
  /* display:none when closed so the off-screen panel never extends scrollWidth */
  display: none;
}
.mini-cart-drawer.is-open { display: flex; animation: pms-slide-in 0.35s ease; }
@keyframes pms-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mini-cart-drawer.is-open { animation: none; } }
.mini-cart-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.mini-cart-drawer__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-teal-900); }
.mini-cart-close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--color-muted); min-width: 44px; min-height: 44px; }
.mini-cart-drawer .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
/* Cart line items — reset WC list, small thumbnail, no stray bullet */
.mini-cart-drawer ul.cart_list { list-style: none; margin: 0; padding: 0; }
.mini-cart-drawer ul.cart_list li.mini_cart_item {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3);
  align-items: center; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: var(--border-hair);
}
.mini-cart-drawer ul.cart_list li.mini_cart_item::before { display: none; }
.mini-cart-drawer .mini_cart_item img {
  grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); margin: 0; float: none;
}
.mini-cart-drawer .mini_cart_item > a:not(.remove) { grid-column: 2; align-self: end; color: var(--color-teal-900); font-weight: 500; text-decoration: none; line-height: var(--leading-snug); }
.mini-cart-drawer .mini_cart_item .quantity { grid-column: 2; align-self: start; color: var(--color-muted); font-size: var(--text-sm); }
.mini-cart-drawer .mini_cart_item a.remove {
  position: absolute; top: 50%; left: -2px; transform: translateY(-50%); width: 24px; height: 24px;
  display: grid; place-items: center; color: var(--color-muted) !important; font-size: var(--text-lg);
  border-radius: 999px; line-height: 1; text-decoration: none;
}
.mini-cart-drawer .mini_cart_item a.remove:hover { color: var(--color-error) !important; background: var(--color-teal-100); }
.mini-cart-drawer .woocommerce-mini-cart__total { border-top: 0; padding-top: var(--space-3); margin-top: var(--space-3); display: flex; justify-content: space-between; font-size: var(--text-lg); }
.mini-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 600; }
.mini-cart-drawer .woocommerce-mini-cart__buttons { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.mini-cart-drawer .woocommerce-mini-cart__buttons .button {
  display: block; text-align: center; margin: 0; padding: 0.75em 1.4em; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 600; text-decoration: none;
  background: transparent; color: var(--color-teal-900); border: 1px solid var(--color-teal-700);
}
.mini-cart-drawer .woocommerce-mini-cart__buttons .button.checkout { background: var(--color-teal-700); color: var(--color-white); border-color: var(--color-teal-700); }
.mini-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--color-teal-900); }
.mini-cart-drawer p.woocommerce-mini-cart__empty-message { color: var(--color-muted); }
.mini-cart-overlay {
  /* Below the sticky header (z 100) so the drawer — which lives inside the header's
     stacking context — renders ABOVE the dim overlay, not under it. */
  position: fixed; inset: 0; background: rgba(20, 33, 31, 0.45); z-index: calc(var(--z-header) - 1);
  opacity: 0; visibility: hidden; transition: opacity var(--ease-default);
}
.mini-cart-overlay.is-open { opacity: 1; visibility: visible; }

/* Nav toggle (mobile) */
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 0; }
.nav-toggle__bar { width: 24px; height: 2px; background: var(--color-teal-900); transition: transform var(--ease-default), opacity var(--ease-default); margin-inline: auto; }
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-block: var(--space-section); position: relative; overflow: hidden; }
.hero__inner { display: grid; gap: var(--space-8); align-items: center; }
.hero__content { max-width: 38rem; }
.hero__title { margin-bottom: var(--space-4); }
.hero__title em { color: var(--color-teal-700); }
.hero__subtitle { font-size: var(--text-lg); color: var(--color-ink-soft); margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); list-style: none; margin: 0; padding: 0; color: var(--color-muted); font-size: var(--text-sm); }
.hero__trust li { display: flex; align-items: center; gap: 0.4em; }
.hero__trust li + li::before { content: "•"; color: var(--color-accent); margin-right: 0.6em; }
.hero__media { position: relative; }
.hero__img { width: 100%; border-radius: var(--radius-md); object-fit: cover; }
.hero__motif { position: absolute; bottom: -18px; right: -10px; width: 80px; height: 80px; }
.hero--compact { padding-block: var(--space-10); }
.hero--dark { background: var(--color-teal-900); color: var(--color-on-teal); }
.hero--dark .hero__title, .hero--dark .hero__subtitle { color: var(--color-on-teal); }
.hero--centered .hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centered .hero__content { max-width: 46rem; }
.hero--centered .hero__actions, .hero--centered .hero__trust { justify-content: center; }

/* ============================================================
   Cards & grids
   ============================================================ */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.card { display: flex; flex-direction: column; background: var(--color-white); border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; color: inherit; transition: box-shadow var(--ease-default), transform var(--ease-default); height: 100%; }
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__media { display: block; aspect-ratio: 4 / 3; background: var(--color-paper-alt); overflow: hidden; }
.card--team .card__media { aspect-ratio: 3 / 4; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-slow); }
a.card:hover .card__img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.card__eyebrow { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--color-teal-700); }
.card__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; color: var(--color-teal-900); line-height: var(--leading-snug); }
.card__meta { font-size: var(--text-sm); color: var(--color-accent); font-weight: 600; }
.card__excerpt { font-size: var(--text-base); color: var(--color-ink-soft); }
.card__cta { margin-top: auto; padding-top: var(--space-2); font-weight: 600; color: var(--color-teal-700); font-size: var(--text-sm); }
.card--tile .card__body { position: absolute; inset: auto 0 0 0; color: var(--color-white); background: linear-gradient(to top, rgba(20,33,31,0.85), transparent); }
.card--tile { position: relative; }
.card--tile .card__title { color: var(--color-white); }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonial { background: var(--color-white); border: var(--border-hair); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.testimonial__quote { font-family: var(--font-heading); font-size: var(--text-xl); font-style: italic; color: var(--color-ink); line-height: var(--leading-snug); }
.testimonial__cite { display: flex; flex-direction: column; }
.testimonial__name { font-weight: 600; color: var(--color-teal-900); }
.testimonial__source { font-size: var(--text-sm); color: var(--color-muted); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { padding-block: var(--space-10); }
.cta-band--teal { background: var(--color-teal-900); color: var(--color-on-teal); }
.cta-band--teal .cta-band__title { color: var(--color-on-teal); }
.cta-band--cream { background: var(--color-paper-alt); }
.cta-band--gold { background: var(--color-accent-soft); }
.cta-band__inner { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.cta-band__copy { color: inherit; opacity: 0.92; }
.cta-band--teal .cta-band__copy { color: var(--color-on-teal); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-band--teal .btn--ghost { color: var(--color-on-teal); border-color: rgba(247,244,237,0.45); }
.cta-band--teal .btn--ghost:hover { background: var(--color-on-teal); color: var(--color-teal-900); border-color: var(--color-on-teal); }

/* ============================================================
   Email capture
   ============================================================ */
.email-capture { padding-block: var(--space-10); background: var(--color-teal-100); }
.email-capture__inner { display: grid; gap: var(--space-6); }
.email-capture__title { color: var(--color-teal-900); }
.email-capture__form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.email-capture__form input[type=email] { flex: 1 1 14rem; min-width: 0; padding: 0.75em 0.9em; border: var(--border-hair); border-radius: var(--radius-sm); background: var(--color-white); }
.email-capture__fineprint { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }

/* ============================================================
   Forms (theme baseline; CF7 inherits via plugin-compat.css)
   ============================================================ */
.pms-form label { display: block; font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-1); }
.pms-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.pms-form textarea, .pms-form select {
  width: 100%; padding: 0.75em 0.9em; border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-ink); margin-bottom: var(--space-4);
}
.pms-form input:focus, .pms-form textarea:focus, .pms-form select:focus { outline: 2px solid var(--color-teal-500); outline-offset: 1px; border-color: var(--color-teal-700); }

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb { font-size: var(--text-sm); color: var(--color-muted); padding-block: var(--space-4); }
.breadcrumb a { color: var(--color-teal-700); }
.breadcrumb__sep { margin-inline: 0.5em; color: var(--color-line); }
.wc-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25em; padding: 0; margin: 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--color-teal-900); color: var(--color-on-teal); padding-top: var(--space-section); }
.site-footer a { color: var(--color-on-teal); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__inner { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); }
.site-footer__brand img { max-height: 64px; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer__tagline { font-family: var(--font-heading); font-style: italic; font-size: var(--text-lg); margin-block: var(--space-3); opacity: 0.9; }
.site-footer__contact { font-style: normal; line-height: 1.9; }
.site-footer__cols { display: grid; gap: var(--space-6); }
.footer-widget__title, .site-footer__col h2 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 500; color: var(--color-on-teal); margin-bottom: var(--space-3); }
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__bottom { border-top: 1px solid rgba(247,244,237,0.16); margin-top: var(--space-6); padding-block: var(--space-5); }
.site-footer__bottom-inner { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; }
.site-footer__copy { font-size: var(--text-sm); opacity: 0.85; margin: 0; }
.footer-nav .footer-menu { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* Footer newsletter — readable on the dark teal footer + full-width input */
.site-footer__newsletter p { color: rgba(247, 244, 237, 0.82); }
.site-footer .email-capture__form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-footer .email-capture__form input[type=email] { flex: 1 1 100%; min-width: 0; background: var(--color-paper); border: 0; color: var(--color-ink); }
.site-footer .email-capture__form .btn { flex: 1 1 auto; }
.site-footer .email-capture__fineprint { color: rgba(247, 244, 237, 0.6); }

/* ============================================================
   Mobile booking bar (sticky)
   ============================================================ */
.mobile-book-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-bookbar);
  display: flex; gap: var(--space-2); padding: var(--space-2) var(--gutter);
  background: var(--color-paper); border-top: var(--border-hair); box-shadow: 0 -2px 12px rgba(20,33,31,0.08);
}
.mobile-book-bar__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  padding: 0 1.1em; min-height: 48px; border: 1px solid var(--color-teal-700); border-radius: var(--radius-sm);
  color: var(--color-teal-900); font-weight: 600;
}
.mobile-book-bar__book { flex: 1; min-height: 48px; }

/* ============================================================
   Pagination, search, misc
   ============================================================ */
.pagination, .woocommerce-pagination { margin-top: var(--space-8); }
.pagination .nav-links, .post-list { display: grid; gap: var(--space-6); }
.page-numbers { display: inline-flex; gap: var(--space-2); list-style: none; padding: 0; flex-wrap: wrap; }
.page-numbers li a, .page-numbers li span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: var(--border-hair); border-radius: var(--radius-sm); }
.page-numbers li .current { background: var(--color-teal-700); color: var(--color-white); border-color: var(--color-teal-700); }
.archive-header { padding-block: var(--space-8); }

/* ============================================================
   Page header (compact interior-page banner)
   ============================================================ */
.page-header { background: var(--color-paper-alt); border-bottom: var(--border-hair); padding-block: clamp(1.75rem, 4vw, 3rem); }
.page-header__inner { display: grid; gap: var(--space-6); align-items: center; }
.page-header--media .page-header__inner { grid-template-columns: 1fr; }
@media (min-width: 860px) { .page-header--media .page-header__inner { grid-template-columns: 1.4fr 1fr; } }
.page-header .breadcrumb { padding-top: 0; }
.page-header__title { font-size: var(--text-h1); margin-top: var(--space-1); }
.page-header__subtitle { font-size: var(--text-lg); color: var(--color-ink-soft); margin-top: var(--space-3); max-width: 46ch; }
.page-header__media { border-radius: var(--radius-md); overflow: hidden; }
.page-header__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* First section after a page header shouldn't double the top gap */
.page-header + .section, .page-header + .woocommerce-main { padding-top: var(--space-section); }

/* ============================================================
   Section components (providers, steps, services-grid, faq, location)
   ============================================================ */
.section__head .eyebrow { margin-bottom: var(--space-3); }
.section__title { margin-bottom: var(--space-3); }
.section__lead { font-size: var(--text-lg); color: var(--color-ink-soft); }

/* Services grid tiles */
.services-grid .card--tile .card__media { aspect-ratio: 3 / 4; }
.services-grid .card--tile .card__meta { color: var(--color-accent-soft); }

/* Providers / credentials */
.provider { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-white); border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; height: 100%; }
.provider__media { aspect-ratio: 3 / 4; background: var(--color-paper-alt); }
.provider__img { width: 100%; height: 100%; object-fit: cover; }
.provider__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.provider__name { font-size: var(--text-xl); color: var(--color-teal-900); }
.provider__role { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.provider__excerpt, .provider__bio { color: var(--color-ink-soft); }
.provider__quals { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.provider__quals li { position: relative; padding-left: 1.4em; font-size: var(--text-sm); }
.provider__quals li::before { content: "✦"; position: absolute; left: 0; color: var(--color-accent); }
.providers--band .provider__media { aspect-ratio: 4 / 3; }
.providers--band .provider__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { background: var(--color-white); border: var(--border-hair); border-radius: var(--radius-md); padding: var(--space-6); }
.step__num { font-family: var(--font-heading); font-size: var(--text-4xl); color: var(--color-accent); line-height: 1; display: block; margin-bottom: var(--space-3); }
.step__title { font-size: var(--text-xl); color: var(--color-teal-900); margin-bottom: var(--space-2); }
.step__text { color: var(--color-ink-soft); }

/* Reviews */
.reviews__more { margin-top: var(--space-6); text-align: center; }

/* FAQ accordion */
.accordion { border-top: var(--border-hair); max-width: 52rem; }
.accordion__item { border-bottom: var(--border-hair); }
.accordion__heading { margin: 0; font-family: var(--font-body); }
.accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; background: none; border: 0; text-align: left; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-teal-900); font-weight: 500; min-height: 44px; }
.accordion__icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: var(--color-accent); transition: transform var(--ease-default); }
.accordion__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.accordion__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.accordion__item.is-open .accordion__icon::after { transform: scaleY(0); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ease-slow); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__body { overflow: hidden; }
.accordion__item.is-open .accordion__body { padding-bottom: var(--space-5); }

/* Membership plans */
.plans { align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-white); border: var(--border-hair); border-radius: var(--radius-md);
  padding: var(--space-6); height: 100%;
}
.plan--featured { border-color: var(--color-teal-700); box-shadow: var(--shadow-md); }
.plan__badge {
  position: absolute; top: 0; right: var(--space-5); transform: translateY(-50%);
  background: var(--color-accent); color: var(--color-ink); font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-sm);
}
.plan__name { font-size: var(--text-2xl); color: var(--color-teal-900); }
.plan__price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.plan__amount { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-ink); font-weight: 500; }
.plan__period { color: var(--color-muted); font-size: var(--text-sm); }
.plan__features { list-style: none; margin: var(--space-2) 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); border-top: var(--border-hair); padding-top: var(--space-4); }
.plan__features li { position: relative; padding-left: 1.6em; color: var(--color-ink-soft); }
.plan__features li::before { content: "✓"; position: absolute; left: 0; color: var(--color-teal-700); font-weight: 700; }
.plan__cta { margin-top: auto; text-align: center; }
.plans-placeholder { text-align: center; max-width: 40rem; margin-inline: auto; display: grid; gap: var(--space-4); justify-items: center; }

/* Location */
.location__title { margin-bottom: var(--space-4); font-size: var(--text-2xl); }
.location__address { font-style: normal; font-size: var(--text-lg); margin-bottom: var(--space-5); }
.location__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.location__meta dt { font-weight: 600; color: var(--color-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); align-self: start; padding-top: 2px; }
.location__meta dd { margin: 0; }
.location__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.location__map { min-height: 280px; border-radius: var(--radius-md); overflow: hidden; border: var(--border-hair); }
.location__map-placeholder { height: 100%; display: flex; flex-direction: column; }
.location__map-note { padding: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }

/* ============================================================
   Single service
   ============================================================ */
.single-service .breadcrumb { padding-top: var(--space-6); }
.service-hero { padding-block: var(--space-6) var(--space-10); }
.service-hero__inner { display: grid; gap: var(--space-8); align-items: center; }
.service-hero__title { margin-bottom: var(--space-4); }
.service-hero__lead { font-size: var(--text-lg); color: var(--color-ink-soft); margin-bottom: var(--space-6); }
.service-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.service-hero__img, .service-hero__media .pms-placeholder { border-radius: var(--radius-md); width: 100%; }

.service-body { display: grid; gap: var(--space-8); padding-bottom: var(--space-section); }
.service-content { font-size: var(--text-lg); }
.service-content h2, .service-content h3 { margin-top: var(--space-6); }
.service-expect, .service-faq { margin-top: var(--space-8); }
.service-expect h2, .service-faq h2 { margin-bottom: var(--space-4); }

.service-aside-card { background: var(--color-white); border: var(--border-hair); border-radius: var(--radius-md); padding: var(--space-6); position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.service-aside-card__title { font-size: var(--text-lg); color: var(--color-teal-900); margin: var(--space-5) 0 var(--space-3); }
.service-aside-card__title:first-child { margin-top: 0; }
.service-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.service-benefits li { position: relative; padding-left: 1.5em; }
.service-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--color-teal-700); font-weight: 700; }
.service-pricing { list-style: none; margin: 0; padding: 0; }
.service-pricing__row { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.service-pricing__label { font-weight: 500; }
.service-pricing__price { font-weight: 600; color: var(--color-teal-900); }
.service-pricing__note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.service-pricing__disclaimer { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3); }
.service-aside-card__cta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-hair); text-align: center; }
.service-aside-card__heading { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-teal-900); margin-bottom: var(--space-3); }
.service-aside-card__cta .btn { width: 100%; }
.service-aside-card__phone { display: inline-block; margin-top: var(--space-3); font-weight: 600; }

@media (min-width: 820px) {
  .service-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
  .service-body { grid-template-columns: 1fr 340px; align-items: start; }
}

/* Service aside phone link — keep it a comfortable tap target */
.service-aside-card__phone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-teal-900); }
.service-aside-card__phone:hover { color: var(--color-teal-700); }

/* ============================================================
   404
   ============================================================ */
.error-404__hero { padding-block: clamp(3rem, 8vw, 6rem); background: var(--color-paper-alt); border-bottom: var(--border-hair); }
.error-404__inner { max-width: 44rem; }
.error-404__title { font-size: var(--text-h1); margin-bottom: var(--space-3); }
.error-404__lead { font-size: var(--text-lg); color: var(--color-ink-soft); margin-bottom: var(--space-5); }
.error-404__search { margin-bottom: var(--space-5); }
.error-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================
   Contact
   ============================================================ */
.contact-layout { display: grid; gap: var(--space-8); }
@media (min-width: 880px) { .contact-layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.contact-layout__title, .contact-layout__form > h2 { margin-bottom: var(--space-5); }
.contact-layout__intro { margin-bottom: var(--space-6); }
/* Location inside the narrow contact aside must stack (NAP then map) — its own
   2-col grid is too cramped nested in a column. */
.contact-layout__aside .location { display: block; }
.contact-layout__aside .location__map { margin-top: var(--space-5); min-height: 260px; }
.contact-layout__aside .location__title { font-size: var(--text-xl); }
.contact-form__alt { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
.pms-form__row--2 { display: grid; gap: var(--space-4); }
@media (min-width: 520px) { .pms-form__row--2 { grid-template-columns: 1fr 1fr; } }
.pms-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pms-form textarea { min-height: 9rem; resize: vertical; }
.form-notice { border: var(--border-hair); border-left: 4px solid var(--color-teal-700); background: var(--color-teal-100); color: var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.form-notice--error { border-left-color: var(--color-error); background: #f7e9e6; }
.form-notice--success { border-left-color: var(--color-success); }

/* Home featured split */
.featured-split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 820px) { .featured-split { grid-template-columns: 1fr 1fr; } .featured-split--rev > :first-child { order: 2; } }
.featured-split__media img, .featured-split__media .pms-placeholder { border-radius: var(--radius-md); }

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
/* Content is visible by default; only hidden once JS confirms it can reveal it. */
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity var(--ease-slow), transform var(--ease-slow); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal:not(.is-visible) { opacity: 1; transform: none; } }

/* ============================================================
   Responsive — scale up from mobile
   ============================================================ */
@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .email-capture__form { flex-wrap: nowrap; }
}
@media (min-width: 820px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__inner { grid-template-columns: 1fr 2fr; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; }
  .email-capture__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero--split .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .primary-nav { display: block; }
  .site-header__phone { display: inline-flex; }
  .site-header__book { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-book-bar { display: none; }
  body { padding-bottom: 0 !important; }
}

/* Mobile: account for the sticky book bar so it never covers content/footer. */
@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--bookbar-h) + env(safe-area-inset-bottom, 0px)); }

  /* Off-canvas mobile nav */
  .primary-nav {
    display: none; position: fixed; inset: var(--header-h) 0 0 auto; width: min(86vw, 360px);
    background: var(--color-paper); border-left: var(--border-hair); box-shadow: var(--shadow-md);
    z-index: var(--z-header); padding: var(--space-5); overflow-y: auto;
  }
  .nav-open .primary-nav { display: block; animation: pms-slide-in 0.35s ease; }
  .primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-menu li { border-bottom: var(--border-hair); }
  .primary-menu a { display: block; padding: var(--space-4) 0; font-size: var(--text-lg); }
  .primary-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: var(--space-4); background: transparent; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(20,33,31,0.4); z-index: calc(var(--z-header) - 1); opacity: 0; visibility: hidden; transition: opacity var(--ease-default); }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; }
}