/*
 * Dentistry 442 — main.css
 * Layout, page sections, header, footer, homepage, treatment pages,
 * team pages, contact, and all responsive breakpoints.
 *
 * Depends on: style.css (design tokens must be loaded first)
 *
 * @package Dentistry442
 * @version 1.0.0
 */

/* =========================================================================
   SITE WRAPPER
   ========================================================================= */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

/* =========================================================================
   HEADER
   ========================================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--duration-base) var(--ease-out),
              height var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  background: transparent;
}

/* Scrolled state — set by JS */
.site-header.is-scrolled {
  background: var(--navy-95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: var(--header-h-scroll);
  box-shadow: 0 2px 32px rgba(0,0,0,0.25);
}

/* Non-homepage: always navy */
body:not(.d442-homepage) .site-header {
  background: var(--navy);
  box-shadow: 0 2px 16px rgba(0,0,0,0.20);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: 100%;
}

/* ── Logo ── */
.site-header__logo {
  flex-shrink: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* ── Primary Nav ── */
.site-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav > li {
  position: relative;
  margin: 0;
}

.primary-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.primary-nav > li > a:hover,
.primary-nav > li > a:focus-visible,
.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-ancestor > a {
  color: var(--white);
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.primary-nav > li.current-menu-item > a {
  color: var(--teal-light);
}

/* Chevron for dropdown items */
.primary-nav > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-out);
  margin-left: var(--space-1);
}

.primary-nav > li.menu-item-has-children:hover > a::after,
.primary-nav > li.menu-item-has-children.is-open > a::after {
  transform: rotate(-135deg) translateY(-2px);
}

/* ── Mega-menu / Dropdown ── */
.primary-nav .sub-menu,
.mega-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  z-index: var(--z-dropdown);
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-3);
  list-style: none;
  border: 1px solid var(--border-light);
}

.primary-nav > li:hover .sub-menu,
.primary-nav > li:hover .mega-menu,
.primary-nav > li.is-open .sub-menu,
.primary-nav > li.is-open .mega-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.primary-nav .sub-menu li,
.mega-menu li {
  margin: 0;
}

.primary-nav .sub-menu a,
.mega-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.primary-nav .sub-menu a:hover,
.mega-menu a:hover {
  background: var(--teal-10);
  color: var(--teal);
  text-decoration: none;
}

/* Treatments mega-menu — 3-column grid */
.mega-menu {
  width: 680px;
  left: 0;
  transform: translateY(8px);
  padding: var(--space-6);
  display: none; /* JS toggles this */
}

.primary-nav > li:hover .mega-menu,
.primary-nav > li.is-open .mega-menu {
  display: block;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.mega-menu__item a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  white-space: normal;
}

.mega-menu__item-icon {
  width: 36px;
  height: 36px;
  background: var(--teal-10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--teal);
  transition: background var(--duration-fast) var(--ease-out);
}

.mega-menu__item a:hover .mega-menu__item-icon {
  background: var(--teal);
  color: var(--white);
}

.mega-menu__item-text {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--navy);
}

.mega-menu__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mega-menu__footer-link {
  font-size: var(--text-sm);
  color: var(--teal);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.mega-menu__footer-link:hover { text-decoration: underline; }

/* ── Header Right ── */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-colour);
  white-space: nowrap;
}

.header-phone:hover {
  color: var(--gold-light);
  text-decoration: none;
}

.header-phone svg { flex-shrink: 0; }

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.hamburger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  transform-origin: center;
}

.hamburger.is-active .hamburger__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.is-active .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-active .hamburger__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--space-8)) var(--space-8) var(--space-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.mobile-menu__nav > li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: 0;
}

.mobile-menu__nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.mobile-menu__nav > li > a:hover {
  color: var(--teal-light);
  text-decoration: none;
}

.mobile-menu__sub {
  list-style: none;
  padding: 0 0 var(--space-4) var(--space-4);
  margin: 0;
  display: none;
}

.mobile-menu__sub.is-open { display: block; }

.mobile-menu__sub a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.mobile-menu__sub a:hover { color: var(--teal-light); text-decoration: none; }

.mobile-menu__footer {
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-menu__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--gold);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

/* =========================================================================
   SCROLL PROGRESS BAR (in header)
   ========================================================================= */

.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-teal);
  z-index: calc(var(--z-sticky) + 2);
  width: 0%;
  pointer-events: none;
}

/* Shift below header on non-homepage */
body:not(.d442-homepage) .scroll-progress-bar {
  top: 0;
}

/* =========================================================================
   PAGE OFFSET (for fixed header)
   ========================================================================= */

body {
  padding-top: var(--header-h);
}

.d442-homepage {
  padding-top: 0; /* Hero is full-viewport behind header */
}

/* =========================================================================
   HERO — HOMEPAGE
   ========================================================================= */

.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Solid navy at the top, fades to transparent at the bottom so the background photo shows through */
  background: linear-gradient(
    to bottom,
    #0a1628 0%,
    #0a1628 20%,
    rgba(10,22,40,0.72) 55%,
    rgba(10,22,40,0.08) 100%
  );
  z-index: 1;
}

/* Animated gradient mesh orbs */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero__mesh::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,148,136,0.20) 0%, transparent 70%);
  top: -10%;
  right: -5%;
  animation: d442-float 8s ease-in-out infinite;
}

.hero__mesh::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,83,0.12) 0%, transparent 70%);
  bottom: 10%;
  left: 5%;
  animation: d442-float 10s ease-in-out infinite reverse;
}

@keyframes d442-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-top: 7%;
  padding-bottom: 6%;
}

/* Animated orbs inside .hero__bg */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__orb--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(13,148,136,0.22) 0%, transparent 70%);
  top: -10%;
  right: -5%;
  animation: d442-float 8s ease-in-out infinite;
}
.hero__orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212,168,83,0.14) 0%, transparent 70%);
  bottom: 10%;
  left: 5%;
  animation: d442-float 10s ease-in-out infinite reverse;
}
.hero__orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(13,148,136,0.10) 0%, transparent 70%);
  top: 50%;
  left: 40%;
  animation: d442-float 12s ease-in-out infinite 2s;
}

.hero__content {
  max-width: 860px;
  position: relative;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-wide);
  margin-bottom: var(--space-6);
  text-transform: uppercase;
}

.hero__tag-dot {
  width: 8px;
  height: 8px;
  background: var(--teal-light);
  border-radius: 50%;
  animation: d442-pulse 2s ease-in-out infinite;
}

@keyframes d442-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--line-tight);
  letter-spacing: var(--letter-tight);
  margin-bottom: var(--space-6);
}

.hero__title em,
.hero__title-highlight {
  font-style: italic;
  color: var(--teal-light);
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.80);
  line-height: var(--line-relaxed);
  margin-bottom: var(--space-10);
  max-width: 640px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

/* Hero floating badges row (trust badges) */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Scroll indicator */
.hero__scroll-arrow {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.50);
  text-decoration: none;
  transition: color var(--duration-fast);
  animation: d442-bounce 2s ease-in-out infinite;
}

.hero__scroll-arrow:hover { color: rgba(255,255,255,0.80); }
.hero__scroll-arrow svg   { display: block; }

@keyframes d442-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(6px); }
}

/* =========================================================================
   STATS BAR — SECTION 2
   ========================================================================= */

.stats-section {
  background: var(--navy);
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none;
}

/* Stats bar — section 2 */
.stats-bar {
  background: var(--navy-dark, #07101f);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: var(--space-10) 0;
}

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

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.stat-item:last-child {
  border-right: none;
}

.stat-item__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1;
  letter-spacing: var(--letter-tight);
}

.stat-item__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}

/* =========================================================================
   TREATMENTS GRID — SECTION 3
   ========================================================================= */

.treatments-section {
  padding: var(--space-24) 0;
  background: var(--cream);
}

.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.treatments-section__cta {
  text-align: center;
}

/* =========================================================================
   WHY CHOOSE US — SECTION 4
   ========================================================================= */

.why-us {
  padding: var(--space-24) 0;
  background: var(--white);
}

.why-us__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.why-us__content {
  /* left column */
}

.why-us__list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 var(--space-10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.why-us__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
}

.why-us__item-icon {
  width: 36px;
  height: 36px;
  background: var(--teal-10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
  font-size: 1rem;
}

.why-us__item-text {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: var(--line-snug);
  padding-top: var(--space-2);
}

/* Image column */
.why-us__image-col {
  position: relative;
}

.why-us__image {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
}

.why-us__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-us__stat-card {
  position: absolute;
  bottom: var(--space-8);
  left: calc(-1 * var(--space-8));
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 220px;
}

.why-us__stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--teal);
  line-height: 1;
}

.why-us__stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-snug);
}

/* =========================================================================
   TESTIMONIALS CAROUSEL — SECTION 5
   ========================================================================= */

.testimonials-section {
  padding: var(--space-24) 0;
  background: var(--cream);
  overflow: hidden;
}

.testimonials-track-wrap {
  overflow: hidden;
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
}

.testimonials-track {
  display: flex;
  gap: var(--space-6);
  will-change: transform;
  /* transition is set dynamically by JS */
}

.testimonials-track .testimonial-card {
  flex: 0 0 calc(33.333% - var(--space-4));
  min-width: 0;
}

/* Navigation */
.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.testimonials-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition-base);
  flex-shrink: 0;
}

.testimonials-nav__btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: var(--shadow-teal);
}

.testimonials-nav__dots {
  display: flex;
  gap: var(--space-2);
}

.testimonials-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-medium);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast), width var(--duration-base) var(--ease-out);
}

.testimonials-nav__dot.is-active {
  background: var(--teal);
  width: 24px;
  border-radius: var(--radius-full);
}

.testimonials-section__footer {
  text-align: center;
  margin-top: var(--space-10);
}

.testimonials-section__footer a {
  color: var(--teal);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.testimonials-section__footer a:hover {
  text-decoration: underline;
}

/* =========================================================================
   BEFORE & AFTER — SECTION 6
   ========================================================================= */

.before-after-section {
  padding: var(--space-24) 0;
  background: var(--white);
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.before-after-item__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-3);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}

.before-after-section__cta {
  text-align: center;
}

.patient-disclaimer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-4);
  font-style: italic;
}

/* =========================================================================
   TEAM PREVIEW — SECTION 7
   ========================================================================= */

.team-preview {
  padding: var(--space-24) 0;
  background: var(--cream);
}

.team-preview__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.team-preview__cta {
  text-align: center;
}

/* =========================================================================
   LOCAL SEO / MAP — SECTION 8
   ========================================================================= */

.local-seo {
  padding: var(--space-24) 0;
  background: var(--white);
}

.local-seo__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.local-seo__map {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--grey-100);
}

.local-seo__map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.local-seo__info {
  /* right column */
}

.local-seo__address-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: var(--cream);
  border-radius: var(--radius-xl);
}

.local-seo__address-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.local-seo__address-icon {
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.local-seo__address-row a {
  color: var(--teal);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.local-seo__address-row a:hover { text-decoration: underline; }

/* Opening hours table */
.opening-hours {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

.opening-hours tr {
  border-bottom: 1px solid var(--border-light);
}

.opening-hours tr:last-child { border-bottom: none; }

.opening-hours td {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  border: none;
}

.opening-hours td:first-child {
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  width: 40%;
}

.opening-hours__open  { color: var(--success); font-weight: var(--fw-semibold); }
.opening-hours__today { background: var(--teal-10); }

/* Area tags */
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.area-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--grey-100);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
  border: 1px solid var(--border-light);
}

.local-seo__directions {
  margin-top: var(--space-6);
}

/* =========================================================================
   FINANCE BANNER — SECTION 9
   ========================================================================= */

.finance-banner {
  padding: var(--space-20) 0;
  background: var(--gradient-navy-teal);
  position: relative;
  overflow: hidden;
}

.finance-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: 0.5;
  pointer-events: none;
}

.finance-banner__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.finance-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-5);
  line-height: var(--line-tight);
}

.finance-banner__body {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--space-10);
  line-height: var(--line-relaxed);
}

.finance-banner__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* =========================================================================
   FAQ SECTION — SECTION 10
   ========================================================================= */

.faq-section {
  padding: var(--space-24) 0;
  background: var(--cream);
}

.faq-section__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: start;
}

.faq-section__sticky {
  position: sticky;
  top: calc(var(--header-h-scroll) + var(--space-8));
}

/* =========================================================================
   NEW PATIENT OFFER — SECTION 11
   ========================================================================= */

.new-patient-offer {
  padding: var(--space-24) 0;
  background: var(--cream);
}

.new-patient-offer__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.new-patient-offer__form {
  margin-top: var(--space-10);
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

/* =========================================================================
   SINGLE TREATMENT PAGE
   ========================================================================= */

.treatment-page {
  /* padding-top already set by body padding-top */
}

/* Treatment Hero */
.treatment-hero {
  background: var(--navy);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-10);
  position: relative;
  overflow: hidden;
}

.treatment-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.treatment-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
}

.treatment-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-navy);
  z-index: 1;
}

.treatment-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.treatment-hero__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  background: var(--teal-20);
  color: var(--teal-light);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-wider);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.treatment-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--line-tight);
  margin-bottom: var(--space-5);
  max-width: 720px;
}

.treatment-hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  line-height: var(--line-relaxed);
  margin-bottom: var(--space-8);
}

.treatment-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

/* Treatment layout: content + sidebar */
.treatment-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  align-items: start;
}

.treatment-content {
  min-width: 0;
}

.treatment-section {
  margin-bottom: var(--space-16);
}

.treatment-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: var(--space-6);
  line-height: var(--line-snug);
}

.treatment-section__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--teal);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

/* Benefits grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.benefit-item {
  padding: var(--space-6);
  background: var(--cream);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
}

.benefit-item__icon {
  width: 48px;
  height: 48px;
  background: var(--teal-10);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.benefit-item__title {
  font-weight: var(--fw-semibold);
  color: var(--navy);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.benefit-item__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin: 0;
}

/* Process steps */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, var(--teal), transparent);
}

.process-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  position: relative;
}

.process-step__number {
  width: 48px;
  height: 48px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-teal);
}

.process-step__body,
.process-step__content {
  padding-top: var(--space-3);
  flex: 1;
}

.process-step__title {
  font-weight: var(--fw-semibold);
  color: var(--navy);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.process-step__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin: 0;
}

/* Pricing card */
.pricing-card {
  background: var(--white);
  border: 2px solid var(--teal-20);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.pricing-card__header {
  background: var(--gradient-teal);
  padding: var(--space-6) var(--space-8);
  text-align: center;
}

.pricing-card__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.80);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1;
}

.pricing-card__price-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  margin-top: var(--space-2);
}

.pricing-card__body {
  padding: var(--space-8);
}

.pricing-card__includes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing-card__includes li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.pricing-card__includes li::before {
  content: '✓';
  color: var(--teal);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.pricing-card__finance {
  background: var(--teal-10);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--teal-dark);
  text-align: center;
  margin: 0 var(--space-8, 2rem) var(--space-4, 1rem);
}

/* Sidebar — sticky booking form */
.treatment-sidebar {
  position: sticky;
  top: calc(var(--header-h-scroll) + var(--space-8));
}

.treatment-sidebar__form {
  background: var(--navy);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}

.treatment-sidebar__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.treatment-sidebar__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.60);
  margin-bottom: var(--space-6);
}

/* Related treatments */
.related-treatments {
  padding: var(--space-16) 0;
  background: var(--cream);
}

.related-treatments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* =========================================================================
   ARCHIVE TREATMENTS
   ========================================================================= */

.archive-treatments {
  padding: var(--space-16) 0 var(--space-24);
}

.archive-treatments__header {
  text-align: center;
  padding: var(--space-20) 0 var(--space-12);
  background: var(--navy);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--space-16));
}

.archive-treatments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
}

/* =========================================================================
   TEAM ARCHIVE
   ========================================================================= */

.team-archive {
  padding-bottom: var(--space-24);
}

.team-archive__header {
  background: var(--navy);
  padding-top: calc(var(--header-h) + var(--space-16));
  padding-bottom: var(--space-16);
  text-align: center;
}

.team-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-16);
}

/* =========================================================================
   SINGLE TEAM
   ========================================================================= */

.team-single__hero {
  background: var(--navy);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-12);
}

.team-single__hero-inner {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-12);
  align-items: end;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.team-single__photo {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-xl);
}

.team-single__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.team-single__info {
  padding-bottom: var(--space-8);
}

.team-single__role {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--teal-20);
  color: var(--teal-light);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-wide);
}

.team-single__name {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-3);
  line-height: var(--line-tight);
}

.team-single__gdc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.60);
  margin-bottom: var(--space-8);
}

.team-single__qualifications {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-single__qualifications li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.team-single__qualifications li::before {
  content: '🎓';
  font-size: 0.875rem;
}

.team-single__specialisms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.team-single__body {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-16) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
}

/* =========================================================================
   PAGE TEMPLATES — GENERIC
   ========================================================================= */

.page-hero {
  background: var(--navy);
  padding-top: 40px;
  padding-bottom: 60px;
  text-align: center;
}

/* Treatment hero overrides — higher specificity (two classes) wins over single-class rules */
.treatment-hero.page-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-3);
  line-height: var(--line-snug);
}

.page-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Breadcrumbs in hero — centred */
.page-hero .breadcrumbs,
.treatment-hero .breadcrumbs {
  text-align: center;
  margin-bottom: var(--space-3);
}

.page-hero .breadcrumb__list,
.treatment-hero .breadcrumb__list {
  justify-content: center;
}

/* Center CTAs and trust badges in treatment hero */
.treatment-hero .treatment-hero__ctas {
  justify-content: center;
  margin-top: var(--space-6);
}

.treatment-hero .trust-badges {
  justify-content: center;
}

/* Tighten section-tag spacing inside hero */
.treatment-hero .section-tag,
.page-hero .section-tag {
  margin-bottom: var(--space-3);
}

.page-hero__ctas {
  margin-top: 20px;
}

.page-content {
  max-width: var(--container-lg);
  margin-inline: auto;
  padding: var(--space-16) var(--container-pad);
}

.page-content h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
  margin-top: var(--space-10);
}

.page-content h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
  margin-top: var(--space-8);
}

.page-content p { margin-bottom: var(--space-5); }

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--space-12);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-16) var(--container-pad);
  align-items: start;
}

.contact-info__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-info__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: 0;
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  background: var(--teal-10);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
  font-size: 1.125rem;
}

.contact-info__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  margin: 0;
}

.contact-info__value a {
  color: var(--teal);
  text-decoration: none;
}

.contact-info__value a:hover { text-decoration: underline; }

/* =========================================================================
   FEE PLANS PAGE
   ========================================================================= */

.fee-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  align-items: stretch;
  max-width: 900px;
  margin-inline: auto;
}

.fee-plan-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  overflow: visible;
  box-shadow: var(--shadow-lg);
  border: 2px solid transparent;
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
}

.fee-plan-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.fee-plan-card--featured {
  border-color: var(--teal);
  position: relative;
  margin-top: calc(-1 * var(--space-5));
}

.fee-plan-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.fee-plan-card__header {
  background: var(--gradient-navy);
  padding: var(--space-6) var(--space-6);
  text-align: center;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.fee-plan-card--featured .fee-plan-card__header {
  background: var(--gradient-teal);
}

.fee-plan-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.fee-plan-card__price {
  font-family: var(--font-heading);
  color: var(--white);
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}

.fee-plan-card__amount {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
}

.fee-plan-card__period {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: rgba(255,255,255,0.70);
}

.fee-plan-card__tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.70);
  margin-top: var(--space-2);
}

.fee-plan-card__price sup {
  font-size: 0.45em;
  vertical-align: super;
  margin-right: 2px;
}

.fee-plan-card__price sub {
  font-size: 0.35em;
  color: rgba(255,255,255,0.70);
  font-weight: var(--fw-regular);
}

.fee-plan-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fee-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fee-plan-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.fee-plan-card__features li::before {
  content: '✓';
  color: var(--teal);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.fee-plan-card__features li.is-excluded {
  opacity: 0.45;
  text-decoration: line-through;
}

.fee-plan-card__features li.is-excluded::before {
  content: '✕';
  color: var(--error);
}

/* =========================================================================
   FINANCE SECTION — 0% Finance
   ========================================================================= */

.finance-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.finance-section .section-tag { display: inline-block; margin-bottom: var(--space-3); }
.finance-section .section-title { margin-top: 0; }

/* offer-list override: dark text on cream background */
.finance-section .offer-list li             { color: var(--text-secondary); }
.finance-section .offer-list li::before     { color: var(--teal); }

.finance-calc-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}

.finance-calc-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin: 0 0 var(--space-6);
}

.finance-calc-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.finance-calc-card__row label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.finance-calc-card__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--white);
  transition: border-color var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
}

.finance-calc-card__input:focus {
  outline: none;
  border-color: var(--teal);
}

.finance-calc-card__result {
  background: var(--gradient-navy);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  margin-bottom: var(--space-4);
}

.finance-calc-card__label {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.70);
  margin-bottom: var(--space-1);
}

.finance-calc-card__amount {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.finance-calc-card__term {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-1);
}

.finance-calc-card__apr {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
}

.finance-calc-card__disclaimer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

@media (max-width: 1024px) {
  .finance-section__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* =========================================================================
   PRICE TABLE
   ========================================================================= */

.price-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--text-sm);
}

.price-table thead {
  background: var(--navy);
}

.price-table thead th {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--white) !important;
  background: var(--navy) !important;
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}

.price-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--duration-fast) var(--ease-out);
}

.price-table tbody tr:last-child { border-bottom: none; }

.price-table tbody tr:hover { background: var(--cream); }

.price-table tbody td {
  padding: var(--space-4) var(--space-6);
  color: var(--text-secondary);
}

.price-table tbody td:first-child {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.price-table tbody td strong {
  color: var(--teal);
  font-weight: var(--fw-bold);
}

@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

/* =========================================================================
   GALLERY PAGE
   ========================================================================= */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.gallery-filter-btn {
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--border-medium);
  background: var(--white);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-base);
  font-family: var(--font-body);
}

.gallery-filter-btn:hover,
.gallery-filter-btn.is-active {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--white);
}

.gallery-masonry {
  column-count: 2;
  column-gap: var(--space-6);
}

.gallery-masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}

.gallery-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-masonry-item:hover img {
  transform: scale(1.03);
}

/* =========================================================================
   BLOG / SINGLE
   ========================================================================= */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.single-post__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-10);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-12) var(--container-pad);
  align-items: start;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

.post-meta a {
  color: var(--teal);
  text-decoration: none;
}

.post-meta a:hover { text-decoration: underline; }

.post-content img {
  border-radius: var(--radius-xl);
  margin: var(--space-8) 0;
}

/* =========================================================================
   404 PAGE
   ========================================================================= */

.error-404 {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-24) var(--container-pad);
}

.error-404__code {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: var(--fw-bold);
  color: var(--teal-10);
  line-height: 1;
  margin-bottom: var(--space-4);
  position: relative;
}

.error-404__code::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--teal);
  -webkit-text-stroke: 2px var(--teal);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.70);
}

/* ── Trust bar ── */
.footer-trust {
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: var(--space-4) var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.footer-trust__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.50);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  font-weight: var(--fw-medium);
}

.footer-trust__badge svg { color: var(--gold); }

/* ── Main grid ── */
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: var(--space-12);
  padding: var(--space-12) var(--container-pad) var(--space-12);
  max-width: var(--container-2xl);
  margin-inline: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Brand column ── */
.footer-brand__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: var(--line-relaxed);
  margin: var(--space-4) 0 var(--space-5);
}

.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
}

.footer-contact-row svg { color: var(--teal); flex-shrink: 0; }

.footer-contact-row a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-contact-row a:hover { color: var(--white); }

/* ── Column headings ── */
.footer-col__heading {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--teal);
}

/* ── Nav lists ── */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav li { margin: 0; }

.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  transition: color var(--duration-fast), padding-left var(--duration-fast);
  display: block;
}

.footer-nav a:hover {
  color: var(--teal-light);
  padding-left: var(--space-2);
  text-decoration: none;
}

/* ── Social icons ── */
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer-social__link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  transition: var(--transition-base);
  border: 1px solid rgba(255,255,255,0.10);
}

.footer-social__link:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ── Opening hours ── */
.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.60);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-hours li:last-child { border-bottom: none; }

.footer-hours__day {
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.80);
}

.opening-hours__today {
  background: rgba(13,148,136,0.18);
}

.opening-hours__today .footer-hours__day,
.opening-hours__today span:last-child {
  color: var(--teal-light);
  font-weight: var(--fw-semibold);
}

/* ── Footer bottom bar ── */
.footer-bottom {
  background: rgba(0,0,0,0.22);
  padding: var(--space-5) var(--container-pad);
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-2xl);
  margin-inline: auto;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom__copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}

.footer-bottom__links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-bottom__links li { margin: 0; }

.footer-bottom__links a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-bottom__links a:hover {
  color: var(--white);
  text-decoration: none;
}

/* =========================================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ========================================================================= */

@media (max-width: 1024px) {

  /* Header */
  .site-header__nav { display: none; }
  .hamburger { display: flex; }
  .site-header__actions .d442-btn { display: none; }

  /* Homepage grids */
  .treatments-grid      { grid-template-columns: repeat(2, 1fr); }
  .team-preview__grid   { grid-template-columns: repeat(2, 1fr); }
  .why-us__inner        { grid-template-columns: 1fr; }
  .why-us__image-col    { display: none; }
  .why-us__list         { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-section__inner   { grid-template-columns: 1fr; }
  .faq-section__sticky  { position: static; }

  /* Treatment page */
  .treatment-layout     { grid-template-columns: 1fr; }
  .treatment-sidebar    { position: static; }
  .benefits-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Team */
  .team-archive__grid   { grid-template-columns: repeat(2, 1fr); }
  .team-single__hero-inner { grid-template-columns: 280px 1fr; }
  .team-single__body    { grid-template-columns: 1fr; }

  /* Local SEO */
  .local-seo__inner     { grid-template-columns: 1fr; }

  /* Contact */
  .contact-layout       { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top           { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  /* Fee plans */
  .fee-plans-grid       { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

  /* Related */
  .related-treatments__grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog */
  .blog-grid            { grid-template-columns: repeat(2, 1fr); }
  .single-post__layout  { grid-template-columns: 1fr; }

  /* Before after */
  .before-after-grid    { grid-template-columns: 1fr; }

  /* Archive */
  .archive-treatments__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ========================================================================= */

@media (max-width: 640px) {

  body { padding-top: 64px; }

  .site-header { height: 64px; }
  .site-header.is-scrolled { height: 60px; }

  /* Hero */
  .hero__inner           { padding-top: calc(var(--header-h) + var(--space-10)); padding-bottom: var(--space-10); }
  .hero__ctas            { flex-direction: column; }
  .hero__ctas .d442-btn  { width: 100%; }

  /* Stats */
  .stats-grid           { grid-template-columns: repeat(2, 1fr); }
  .stat-item            { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: var(--space-4); }

  /* Treatments */
  .treatments-grid      { grid-template-columns: 1fr; }

  /* Team preview */
  .team-preview__grid   { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  /* Section headers */
  .section-title        { font-size: var(--text-3xl); }

  /* Benefits */
  .benefits-grid        { grid-template-columns: 1fr; }

  /* Process */
  .process-steps::before { display: none; }

  /* Testimonials */
  .testimonials-track .testimonial-card { flex: 0 0 85vw; }

  /* Mega menu */
  .mega-menu            { width: 100%; }

  /* Footer */
  .footer-top           { grid-template-columns: 1fr; }
  .footer-bottom__inner { flex-direction: column; text-align: center; }
  .footer-bottom__links { justify-content: center; flex-wrap: wrap; }
  .footer-trust         { gap: var(--space-3); }

  /* Fee plans */
  .fee-plans-grid       { max-width: none; }

  /* Related */
  .related-treatments__grid { grid-template-columns: 1fr; }

  /* Team */
  .team-archive__grid   { grid-template-columns: 1fr; }
  .team-single__hero-inner { grid-template-columns: 1fr; }
  .team-single__photo   { max-width: 280px; margin-inline: auto; aspect-ratio: 1; border-radius: 50%; }

  /* Blog */
  .blog-grid            { grid-template-columns: 1fr; }

  /* Archive */
  .archive-treatments__grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact-layout       { padding-top: var(--space-8); }

  /* Finance banner */
  .finance-banner__ctas { flex-direction: column; align-items: center; }
  .finance-banner__ctas .d442-btn { width: 100%; max-width: 360px; }

  /* Treatment pages */
  .treatment-layout      { grid-template-columns: 1fr; }
  .treatment-layout__sidebar { display: none; }
  .lp-two-col            { grid-template-columns: 1fr; }
  .treatments-grid--3    { grid-template-columns: 1fr; }
  .treatment-hero__ctas  { flex-direction: column; align-items: center; }
  .treatment-hero__ctas .d442-btn { width: 100%; max-width: 360px; }
}

/* =========================================================================
   MISSING UTILITIES — buttons, container, breadcrumbs, trust badges, etc.
   Added to support treatment page templates and shared components.
   ========================================================================= */

/* ── Container ── */
.container {
  max-width: var(--container-xl, 1280px);
  margin-inline: auto;
  padding-inline: var(--container-pad, 2rem);
}

/* ── Section tag / pill ── */
.section-tag {
  display: inline-block;
  padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
  background: rgba(13, 148, 136, 0.12);
  color: var(--teal-light, #14b8a6);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--letter-wider, 0.1em);
  text-transform: uppercase;
  border-radius: var(--radius-full, 9999px);
  margin-bottom: var(--space-4, 1rem);
}

/* ── Breadcrumbs ── */
.breadcrumbs { margin-bottom: var(--space-4, 1rem); }

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
}

.breadcrumb__list li { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.55); margin-bottom: 0; }
.breadcrumb__list li::after { content: '/'; opacity: 0.4; }
.breadcrumb__list li:last-child::after { display: none; }
.breadcrumb__list a { color: rgba(255,255,255,0.7); text-decoration: none; }
.breadcrumb__list a:hover { color: #fff; }
.breadcrumb__list [aria-current="page"] { color: rgba(255,255,255,0.55); }

/* ── Trust badges ── */
.trust-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-6, 1.5rem);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--fw-medium, 500);
  color: rgba(255,255,255,0.85);
}

/* In sidebar (light bg) override colours */
.sidebar-cta-card .trust-badge {
  background: rgba(13,148,136,0.08);
  border-color: rgba(13,148,136,0.2);
  color: var(--navy, #0a1628);
}
.sidebar-cta-card .trust-badges { margin-top: var(--space-4, 1rem); }

.trust-badge__icon { flex-shrink: 0; }
.trust-badge__text { white-space: nowrap; }

/* ── Two-column layout (what-is-it section) ── */
.lp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10, 2.5rem);
  align-items: start;
}
.lp-two-col > *:only-child { grid-column: 1 / -1; }
.lp-two-col img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl, 1rem);
  display: block;
}

/* ── Benefit cards (treatment pages) ── */
.benefit-card {
  padding: var(--space-6, 1.5rem);
  background: var(--cream, #faf8f5);
  border-radius: var(--radius-xl, 0.75rem);
  border: 1px solid var(--border-light, rgba(10,22,40,0.08));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.benefit-card:hover {
  box-shadow: 0 8px 32px rgba(10,22,40,0.10);
  transform: translateY(-2px);
}
.benefit-card__icon {
  display: none;
}
.benefit-card__title {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--navy, #0a1628);
  margin-bottom: var(--space-2, 0.5rem);
}
.benefit-card__desc {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #64748b);
  line-height: var(--line-relaxed, 1.7);
  margin: 0;
}

/* ── Treatment page hero CTAs ── */
.treatment-hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-8, 2rem);
}

/* ── Treatment layout two-column grid ── */
.treatment-layout__main  { min-width: 0; }
.treatment-layout__sidebar { position: sticky; top: calc(var(--header-h, 80px) + 1rem); }

/* ── Sidebar CTA card ── */
.sidebar-cta-card {
  background: var(--white, #fff);
  border: 1px solid var(--border-light, rgba(10,22,40,0.08));
  border-radius: var(--radius-2xl, 1rem);
  padding: var(--space-6, 1.5rem);
  box-shadow: 0 4px 24px rgba(10,22,40,0.08);
}
.sidebar-cta-card__title {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--fw-bold, 700);
  color: var(--navy, #0a1628);
  margin-bottom: var(--space-2, 0.5rem);
}
.sidebar-cta-card p {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #64748b);
  margin: 0 0 var(--space-4, 1rem);
}

.sidebar-price-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: var(--cream, #faf8f5);
  border-radius: var(--radius-lg, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  margin-bottom: var(--space-2, 0.5rem);
}
.sidebar-price-badge span {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #64748b);
}
.sidebar-price-badge strong {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: var(--text-2xl, 1.5rem);
  color: var(--teal, #0d9488);
}

/* ── Sidebar treatments nav ── */
.sidebar-treatments-nav__title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--navy, #0a1628);
  text-transform: uppercase;
  letter-spacing: var(--letter-wider, 0.1em);
  margin-bottom: var(--space-3, 0.75rem);
}
.sidebar-treatments-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-light, rgba(10,22,40,0.08));
}
.sidebar-treatments-nav li a {
  display: block;
  padding: var(--space-2, 0.5rem) 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #64748b);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light, rgba(10,22,40,0.08));
  transition: color 0.2s ease;
}
.sidebar-treatments-nav li a:hover { color: var(--teal, #0d9488); }
.sidebar-treatments-nav li.is-current a {
  color: var(--teal, #0d9488);
  font-weight: var(--fw-semibold, 600);
}

/* ── Treatment page pricing card (layout variant) ── */
.pricing-card__from {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-6, 1.5rem) var(--space-8, 2rem) 0;
}
.pricing-card__from .pricing-card__price {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: var(--text-4xl, 2.25rem);
  font-weight: var(--fw-bold, 700);
  color: var(--teal, #0d9488);
}
.pricing-card__from .pricing-card__label {
  font-size: var(--text-base, 1rem);
  color: var(--text-secondary, #64748b);
  text-transform: none;
  letter-spacing: 0;
}
.pricing-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
  padding: 0 var(--space-8, 2rem) var(--space-6, 1.5rem);
}

/* ── Treatment cards (related treatments grid) ── */
.treatments-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6, 1.5rem);
}

/* Related treatment cards have no image/body wrapper — add card padding directly */
.treatment-related .treatment-card {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* Treatment card — image-first design */
.treatment-card {
  background: var(--white, #fff);
  border-radius: var(--radius-xl, 0.75rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(10,22,40,0.07);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid var(--border-light, rgba(10,22,40,0.07));
}

.treatment-card:hover {
  box-shadow: 0 16px 48px rgba(10,22,40,0.13);
  transform: translateY(-5px);
}

.treatment-card__link {
  display: block;
  line-height: 0;
}

.treatment-card__thumb {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--navy, #0a1628);
  flex-shrink: 0;
}

.treatment-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.treatment-card:hover .treatment-card__img {
  transform: scale(1.06);
}

.treatment-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.treatment-card__title,
.treatment-card__name {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: var(--text-xl, 1.25rem);
  font-weight: var(--fw-semibold, 600);
  margin: 0;
  line-height: 1.25;
}

.treatment-card__title a,
.treatment-card__name a {
  color: var(--navy, #0a1628);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.treatment-card__title a:hover,
.treatment-card__name a:hover { color: var(--teal, #0d9488); }

.treatment-card__icon { display: none; }

.treatment-card__desc {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #64748b);
  line-height: var(--line-relaxed, 1.625);
  margin: 0;
  flex: 1;
}

.treatment-card__price {
  font-weight: var(--fw-semibold, 600);
  color: var(--teal, #0d9488);
  font-size: var(--text-sm, 0.875rem);
  margin: 0;
}

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

/* ── Content body (rich text in treatment sections) ── */
.content-body p  { margin-bottom: var(--space-4, 1rem); color: var(--text-secondary, #64748b); line-height: 1.75; }
.content-body ul { list-style: none; padding: 0; margin: 0 0 var(--space-4, 1rem); display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.content-body ul li { display: flex; align-items: flex-start; gap: var(--space-2, 0.5rem); color: var(--text-secondary, #64748b); }
.content-body ul li::before { content: '✓'; color: var(--teal, #0d9488); font-weight: 700; flex-shrink: 0; margin-top: 0.1em; }
.content-body strong { color: var(--navy, #0a1628); font-weight: var(--fw-semibold, 600); }
.content-body em     { font-style: italic; }
.content-body a      { color: var(--teal, #0d9488); text-decoration: underline; }

/* ── Booking form base ── */
.booking-form__header { margin-bottom: var(--space-6); }
.booking-form__title  { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: var(--line-tight); margin-bottom: var(--space-3); }
.booking-form__sub    { font-size: var(--text-base); line-height: var(--line-relaxed); margin: 0; }
.booking-form__body   { margin-bottom: var(--space-6); }
.booking-form__gdpr   {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--line-relaxed);
  margin: 0;
}
.booking-form__gdpr svg { flex-shrink: 0; margin-top: 2px; }
.booking-form__gdpr a   { color: inherit; text-decoration: underline; }

/* ── Booking form dark variant ── */
.booking-form--dark {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-2xl, 1rem);
  padding: var(--space-10, 2.5rem);
}
.booking-form--dark .booking-form__title { color: #fff; }
.booking-form--dark .booking-form__sub   { color: rgba(255,255,255,0.7); }
.booking-form--dark .booking-form__gdpr  { color: rgba(255,255,255,0.5); }

/* ── Responsive adjustments for new components ── */
@media (max-width: 1023px) {
  .lp-two-col             { grid-template-columns: 1fr; }
  .treatments-grid--3     { grid-template-columns: repeat(2, 1fr); }
  .pricing-card__actions  { flex-direction: column; }
  .pricing-card__actions .d442-btn { width: 100%; }
  .treatment-hero__ctas   { flex-direction: column; align-items: stretch; }
  .treatment-hero__ctas .d442-btn { width: 100%; text-align: center; }
}
@media (max-width: 639px) {
  .treatments-grid--3     { grid-template-columns: 1fr; }
  .treatment-hero__ctas .d442-btn { max-width: none; }
  .sidebar-cta-card       { display: none; }
}

/* =========================================================================
   SECTION UTILITIES
   ========================================================================= */

/* Base section padding */
.section { padding: var(--space-20) 0; }

/* Background modifiers — no padding override */
.section--cream { background: var(--cream); }
.section--dark  { background: var(--navy); }
.section--white { background: var(--white); }

/* Generic section padding for sections without their own specific class */
.ba-section { padding: var(--space-24) 0; }

/* =========================================================================
   HERO EXTRAS — orbs, floating cards, scroll arrow, title highlight
   ========================================================================= */

.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero__orb--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(13,148,136,0.18) 0%, transparent 70%);
  top: -10%;
  right: -5%;
  animation: d442-float 8s ease-in-out infinite;
}

.hero__orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212,168,83,0.12) 0%, transparent 70%);
  bottom: 10%;
  left: 5%;
  animation: d442-float 10s ease-in-out infinite reverse;
}

.hero__orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(13,148,136,0.10) 0%, transparent 70%);
  top: 40%;
  left: 45%;
  animation: d442-float 12s ease-in-out infinite;
}

.hero__title-highlight {
  color: var(--teal-light);
  font-style: italic;
}

.hero__floating-badges {
  position: absolute;
  right: var(--container-pad);
  bottom: 18%;
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  z-index: 4;
}

@media (min-width: 1200px) {
  .hero__floating-badges { display: flex; }
}

.hero__floating-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  color: var(--white);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  animation: d442-float 6s ease-in-out infinite;
}

.hero__floating-card--2 { animation-delay: -3s; }

.hero__floating-card-icon { font-size: 1.5rem; flex-shrink: 0; }

.hero__floating-card strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1.2;
}

.hero__floating-card span {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.75);
}

/* Scroll-down arrow link (SVG chevron version) */
a.hero__scroll-arrow {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  animation: d442-bounce 2s ease-in-out infinite;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

a.hero__scroll-arrow:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
  text-decoration: none;
}

/* =========================================================================
   WHY US — PHP class aliases
   ========================================================================= */

.why-us__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.why-us__visual { position: relative; }

.why-us__img-wrap {
  border-radius: var(--radius-2xl);
  overflow: visible; /* stat-card floats outside; img gets its own border-radius */
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
  position: relative;
}

.why-us__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  display: block;
}

/* USP list */
.usp-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.usp-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0;
}

.usp-list__icon {
  width: 32px;
  height: 32px;
  background: var(--teal-10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  margin-top: 2px;
}

.usp-list__item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--navy);
  margin-bottom: var(--space-1);
}

.usp-list__item p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin: 0;
}

@media (max-width: 1024px) {
  .why-us__grid    { grid-template-columns: 1fr; }
  .why-us__visual  { display: none; }
  .usp-list        { margin-top: var(--space-6); }
}

/* =========================================================================
   TESTIMONIALS CAROUSEL — PHP class aliases
   ========================================================================= */

.testimonials-carousel {
  overflow: hidden;
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
}

/* =========================================================================
   TREATMENTS OVERVIEW PAGE — filter tabs + overview grid
   ========================================================================= */

/* Filter bar */
.treatments-filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-10);
}

.treatments-filter__btn {
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--border);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  line-height: 1.2;
}

.treatments-filter__btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.treatments-filter__btn.is-active,
.treatments-filter__btn[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--white);
}

/* Overview grid — 3 columns */
.treatments-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Hide cards that don't match active filter (JS sets element.hidden = true) */
.treatments-overview-grid .treatment-card--overview[hidden] {
  display: none;
}

/* Popular badge on card */
.treatment-card--overview {
  position: relative;
  padding: var(--space-6);
  gap: var(--space-4);
}

.treatment-card--overview .treatment-card__title {
  padding-right: var(--space-10); /* room for popular badge */
}

.treatment-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 2px 10px;
  border-radius: 9999px;
  background: var(--gold);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* Card footer row: price + time */
.treatment-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.treatment-card__time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Treatments-page-section wrapper */
.treatments-page-section {
  padding-block: var(--space-20);
}

@media (max-width: 1024px) {
  .treatments-overview-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .treatments-overview-grid { grid-template-columns: 1fr; }
  .treatments-filter { gap: var(--space-1); }
  .treatments-filter__btn { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
}

/* =========================================================================
   OUR TEAM OVERVIEW PAGE — team grid with card specialisms
   ========================================================================= */

.our-team-section {
  padding-block: var(--space-20);
}

.our-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

/* ── Team card ── */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.team-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.team-card__photo-link {
  display: block;
  overflow: hidden;
}

.team-card__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--navy);
}

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.team-card:hover .team-card__img {
  transform: scale(1.04);
}

.team-card__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: var(--line-tight);
  margin: 0 0 var(--space-1);
}

.team-card__name a {
  color: inherit;
  text-decoration: none;
}

.team-card__name a:hover {
  color: var(--teal);
}

.team-card__role {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--teal);
  margin: 0 0 var(--space-1);
}

.team-card__gdc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.team-card__bio {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin: 0 0 var(--space-3);
  flex: 1;
}

.team-card__specialisms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Featured card — no special sizing, all cards uniform */
.team-card--featured {
  grid-column: span 1;
}

/* ── Specialism / info pill badges ── */
.d442-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  border: 1px solid transparent;
}

.d442-badge--teal {
  background: var(--teal-10);
  color: var(--teal);
  border-color: rgba(13,148,136,0.2);
}

/* badge / badge--teal alias (used in team-card.php template part) */
.badge--teal {
  background: var(--teal-10);
  color: var(--teal);
  border: 1px solid rgba(13,148,136,0.2);
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .our-team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .our-team-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   TEAM MEMBER INDIVIDUAL PAGE — split hero layout
   ========================================================================= */

.team-member-hero {
  background: var(--navy);
  padding-block: calc(var(--header-h, 80px) + var(--space-8)) var(--space-16);
  overflow: hidden;
}

.team-member-hero__grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  align-items: center;
  gap: var(--space-16);
}

/* Info column */
.team-member-hero__info {
  color: var(--white);
}

.team-member-hero__name {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-2);
}

.team-member-hero__role {
  font-size: var(--text-xl);
  color: var(--teal-light);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
}

.team-member-hero__gdc {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-2);
}

.team-member-hero__qualifs {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-4);
  font-style: italic;
}

.team-member-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: var(--line-relaxed);
  margin-block: var(--space-5);
  max-width: 540px;
}

.team-member-hero__specialisms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.team-member-hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Photo column */
.team-member-hero__photo-wrap {
  position: relative;
  border-radius: var(--radius-xl, 1.5rem);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 32px 80px rgba(0,0,0,0.45);
}

.team-member-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.team-member-hero__photo-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
}

/* Breadcrumbs in hero */
.team-member-hero .breadcrumbs {
  margin-bottom: var(--space-4);
}

/* Suppress global li::after slash — local li+li::before handles the separator */
.team-member-hero .breadcrumb__list li::after { display: none; }

.team-member-hero .breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}

.team-member-hero .breadcrumb__list li + li::before {
  content: '/';
  opacity: 0.4;
  margin-right: var(--space-2);
}

.team-member-hero .breadcrumb__list a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.team-member-hero .breadcrumb__list a:hover {
  color: var(--teal-light);
}

@media (max-width: 1024px) {
  .team-member-hero__grid {
    grid-template-columns: 1fr;
  }
  .team-member-hero__photo-wrap {
    max-width: 400px;
    margin-inline: auto;
  }
  .team-member-hero__info { order: 2; }
  .team-member-hero__photo-wrap { order: 1; }
}

@media (max-width: 640px) {
  .team-member-hero__name { font-size: var(--text-4xl); }
  .team-member-hero__ctas { flex-direction: column; }
}

.testimonials-carousel__track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-out);
}

.testimonials-carousel__slide {
  flex: 0 0 calc(33.333% - var(--space-4));
  min-width: 0;
}

@media (max-width: 768px) {
  .testimonials-carousel__slide { flex: 0 0 85vw; }
}

.testimonials-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.testimonials-carousel__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition-base);
  flex-shrink: 0;
}

.testimonials-carousel__btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: var(--shadow-teal);
}

.testimonials-carousel__dots {
  display: flex;
  gap: var(--space-2);
}

/* =========================================================================
   BEFORE & AFTER — PHP class aliases
   ========================================================================= */

.ba-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.ba-section__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-3);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .ba-section__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   TEAM GRID — PHP class alias
   ========================================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* =========================================================================
   LOCAL SEO — PHP class aliases
   ========================================================================= */

.local-seo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.local-seo__contact-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--cream);
  border-radius: var(--radius-xl);
}

.local-seo__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.local-seo__contact-item svg {
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.local-seo__contact-item strong {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.local-seo__contact-item span,
.local-seo__contact-item a { display: block; color: var(--text-secondary); }
.local-seo__contact-item a { color: var(--teal); text-decoration: none; }
.local-seo__contact-item a:hover { text-decoration: underline; }

.local-seo__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-6);
}

.local-seo__areas strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
  width: 100%;
  margin-bottom: var(--space-2);
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
}

.badge--grey {
  background: var(--grey-100);
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .local-seo__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   FINANCE BANNER — sub text alias
   ========================================================================= */

.finance-banner__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--space-10);
  line-height: var(--line-relaxed);
}

/* section-tag--light = on dark background */
.section-tag--light {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}

/* =========================================================================
   FAQ — homepage section aliases
   ========================================================================= */

.faq-page-section {
  padding: var(--space-24) 0;
  background: var(--cream);
}

.faq-page-section__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: start;
}

.faq-page-section__header {
  position: sticky;
  top: calc(var(--header-h-scroll) + var(--space-8));
}

@media (max-width: 1024px) {
  .faq-page-section__grid   { grid-template-columns: 1fr; }
  .faq-page-section__header { position: static; }
}

/* =========================================================================
   NEW PATIENT SECTION — 2-column layout on dark bg
   ========================================================================= */

.new-patient-section {
  padding: var(--space-24) 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.new-patient-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: 0.4;
  pointer-events: none;
}

.new-patient-section__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.new-patient-section__offer .section-title { color: var(--white); }
.new-patient-section__offer > p            { color: rgba(255,255,255,0.75); }

.offer-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.offer-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  margin: 0;
}

.offer-list li::before {
  content: '✓';
  color: var(--teal-light);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.new-patient-section__terms {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
  margin-top: var(--space-4);
}

@media (max-width: 1024px) {
  .new-patient-section__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */

.contact-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-list__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--teal-50, #f0fdfa);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  margin-top: 2px;
}

.contact-list__item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.contact-list__item span,
.contact-list__item a {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.contact-list__item a { color: var(--teal); }
.contact-list__item a:hover { text-decoration: underline; }

.contact-section__map iframe {
  display: block;
  border-radius: var(--radius-xl);
}

@media (max-width: 1024px) {
  .contact-section__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* =========================================================================
   NATIVE BOOKING FORM
   ========================================================================= */

.d442-native-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.d442-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .d442-form-row { grid-template-columns: 1fr; }
}

.d442-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.d442-form-group label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.85);
}

.d442-form-group input,
.d442-form-group select,
.d442-form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--white);
  transition: border-color var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
}

.d442-form-group input::placeholder,
.d442-form-group textarea::placeholder {
  color: rgba(255,255,255,0.40);
}

.d442-form-group select option {
  background: var(--navy);
  color: var(--white);
}

.d442-form-group input:focus,
.d442-form-group select:focus,
.d442-form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255,255,255,0.12);
}

.d442-form-group textarea { resize: vertical; min-height: 80px; }

.d442-form-group--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.65);
  font-weight: var(--fw-regular);
  cursor: pointer;
}

.d442-form-group--checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--teal);
  padding: 0;
}

/* Light-background form variant (contact page details column) */
.contact-section__details .d442-form-group label { color: var(--text-secondary); }
.contact-section__details .d442-form-group input,
.contact-section__details .d442-form-group select,
.contact-section__details .d442-form-group textarea {
  background: var(--white);
  border: 2px solid var(--border-medium);
  color: var(--text-primary);
}
.contact-section__details .d442-form-group input:focus,
.contact-section__details .d442-form-group select:focus,
.contact-section__details .d442-form-group textarea:focus {
  border-color: var(--teal);
  background: var(--white);
}

.d442-form-notice {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.d442-form-notice--success {
  background: rgba(13,148,136,0.15);
  border: 1px solid rgba(13,148,136,0.40);
  color: var(--teal-light, #14b8a6);
}

.d442-form-notice--error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.30);
  color: #f87171;
}

/* =========================================================================
   TESTIMONIAL CARD — missing class aliases
   ========================================================================= */

.testimonial-card__body {
  font-size: var(--text-base);
  line-height: var(--line-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonial-card__body p {
  margin: 0;
  font-size: inherit;
  color: inherit;
  font-style: inherit;
  line-height: inherit;
}

.testimonial-card__author {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  color: var(--navy);
}

.testimonial-card__treatment {
  display: block;
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: var(--fw-medium);
  margin-top: var(--space-1);
}

/* =========================================================================
   TREATMENT CARD — icon-only (fallback cards with no image)
   ========================================================================= */

.treatment-card__icon-solo {
  display: none;
}

.treatment-card__excerpt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  flex: 1;
  margin: 0;
}

/* =========================================================================
   SECTION HEADING UTILITY (div wrapper)
   ========================================================================= */

.section-heading {
  margin-bottom: var(--space-12);
}

.section-heading.text-center {
  text-align: center;
}

.section-heading .section-subtitle {
  margin-inline: auto;
}

/* =========================================================================
   TEXT UTILITIES
   ========================================================================= */

.text-center { text-align: center; }

/* =========================================================================
   ABOUT PAGE
   ========================================================================= */

/* ── Section spacing defaults ── */
.about-intro,
.about-values,
.about-team,
.about-tech { padding: var(--space-24) 0; }

/* ── About Intro — 2-column text + image ── */
.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about-intro__content { min-width: 0; }

.about-intro__visual {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 6 / 7;
}

.about-intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .about-intro__grid  { grid-template-columns: 1fr; }
  .about-intro__visual { max-width: 560px; margin-inline: auto; aspect-ratio: 4 / 3; }
}

/* ── Values / Technology cards grid ── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr; }
}

.value-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-20);
}

.value-card__icon {
  display: none;
}

.value-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: var(--space-3);
  line-height: var(--line-snug);
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin: 0;
}

/* On cream background, keep cards white */
.about-values .value-card,
.about-tech .value-card { background: var(--white); }

/* ── Testimonials strip (3-column grid) ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-2);
}

@media (max-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}


/* =========================================================================
   FAQ ACCORDION
   ========================================================================= */

.faq-section {
  padding: var(--space-20) 0;
  background: var(--cream, #faf8f5);
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-accordion__item {
  border: 1px solid rgba(10, 22, 40, 0.1);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.faq-accordion__item.is-open {
  border-color: var(--teal, #0d9488);
  box-shadow: 0 4px 24px rgba(13, 148, 136, 0.10);
}

.faq-accordion__heading {
  margin: 0;
}

.faq-accordion__button {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--navy, #0a1628);
  line-height: var(--line-snug);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.faq-accordion__button:hover,
.faq-accordion__button:focus-visible {
  color: var(--teal, #0d9488);
  background: rgba(13, 148, 136, 0.04);
  outline: none;
}

.faq-accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--teal, #0d9488);
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq-accordion__item.is-open .faq-accordion__icon {
  transform: rotate(180deg);
}

.faq-accordion__panel {
  overflow: hidden;
}

.faq-accordion__panel[hidden] {
  display: none;
}

.faq-accordion__body {
  padding: 0 var(--space-6) var(--space-5);
  border-top: 1px solid rgba(10, 22, 40, 0.07);
  color: var(--text-secondary, #4b5563);
  font-size: var(--text-sm, 0.9375rem);
  line-height: var(--line-relaxed, 1.7);
}

.faq-accordion__body p:first-child {
  margin-top: var(--space-4);
}

.faq-accordion__body p:last-child {
  margin-bottom: 0;
}

@media ( max-width: 640px ) {
  .faq-accordion__button {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-sm);
  }

  .faq-accordion__body {
    padding: 0 var(--space-4) var(--space-4);
  }
}