/*
Theme Name: Advanced Skin & Weight Loss
Theme URI: https://advancedskinandweightloss.com/
Author: Advanced Skin & Weight Loss
Author URI: https://advancedskinandweightloss.com/
Description: Custom WordPress theme for the Advanced Skin & Weight Loss cosmetic and medical weight loss clinics. Pixel-for-pixel port of the original static site with editable menus, pages, treatments, locations, promotions and articles.
Version: 1.5.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: advancedskin
Tags: medical, wellness, medspa, one-column, two-columns, custom-menu, custom-logo, featured-images, translation-ready
*/


/* CSS Variables */
:root {
  --primary: #6b8e7a;
  --primary-light: #8aab99;
  --primary-dark: #4a6b5a;
  --accent: #b76e79;
  --accent-light: #d4939c;
  --cream: #faf8f5;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --success: #10b981;
  --error: #ef4444;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 4px 20px rgba(107, 142, 122, 0.15);
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
  background-color: var(--cream);
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary);
}

ul {
  list-style: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--primary-dark);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

h1 { font-size: 2.75rem; letter-spacing: -0.02em; }
h2 { font-size: 2.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1rem; }

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--white);
  box-shadow: 0 4px 15px rgba(183, 110, 121, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(183, 110, 121, 0.4);
  color: var(--white);
}

.btn-secondary {
  background-color: var(--white);
  color: var(--primary-dark);
  border: 2px solid var(--primary);
}

.btn-secondary:hover {
  background-color: var(--primary);
  color: var(--white);
}

.btn-phone {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  box-shadow: 0 4px 15px rgba(107, 142, 122, 0.3);
}

.btn-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 142, 122, 0.4);
  color: var(--white);
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}

/* Header */
.header {
  background-color: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

.header-top {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--white);
  padding: 0.625rem 0;
  font-size: 0.875rem;
}

.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.header-top a {
  color: var(--white);
}

.header-top a:hover {
  color: var(--accent-light);
}

.header-main {
  padding: 1rem 0;
}

.header-main .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1.3;
}

.logo-text span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-dark);
}

/* Dropdown Menu */
.has-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  border-bottom: none;
}

.dropdown-menu a:hover {
  background-color: var(--cream);
  color: var(--accent);
}

.dropdown-menu a::after {
  display: none;
}

/* Mobile Menu */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-toggle span {
  width: 25px;
  height: 2px;
  background-color: var(--primary-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--cream) 0%, var(--white) 50%, var(--cream) 100%);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70%;
  height: 200%;
  background: radial-gradient(circle, rgba(183, 110, 121, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-content h1 {
  font-size: 3.25rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--primary-dark), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-content p {
  font-size: 1.125rem;
  color: var(--gray-600);
  margin-bottom: 2rem;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
}

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

.hero-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.hero-stat-label {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.hero-image {
  position: relative;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  /* Controlled height, not 100%. The bundled artwork is 5:6 portrait; left at
     height:100% it grew to roughly 700px in a half-width column and towered
     over the headline. object-fit crops rather than squashing whatever the
     client swaps in, portrait or landscape. */
  height: clamp(320px, 40vw, 500px);
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  display: block;
}

.hero-image::before {
  content: '';
  position: absolute;
  top: -16px;
  right: -16px;
  width: 100%;
  height: clamp(320px, 40vw, 500px);
  border: 2px solid var(--accent-light);
  border-radius: var(--radius-xl);
  z-index: -1;
}

/* On a phone the hero image is hidden entirely (see the 968px block), so the
   offset outline would otherwise float on its own. */
@media (max-width: 968px) {
  .hero-image::before {
    display: none;
  }
}

/* Hero Promo Banner */
.hero-promo-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--white);
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(183, 110, 121, 0.3);
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.hero-promo-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(183, 110, 121, 0.4);
  color: var(--white);
}

.promo-badge {
  background-color: var(--white);
  color: var(--accent);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.promo-text {
  font-weight: 600;
}

.promo-arrow {
  font-size: 1.125rem;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(183, 110, 121, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(183, 110, 121, 0.5);
  }
}

/* Sections */
.section {
  padding: 5rem 0;
}

.section-white {
  background-color: var(--white);
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-header p {
  color: var(--gray-600);
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

/* Treatment Cards */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.treatment-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.4s ease;
  border: 1px solid transparent;
}

.treatment-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
  border-color: var(--accent-light);
}

.treatment-image {
  height: 200px;
  overflow: hidden;
}

.treatment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.treatment-card:hover .treatment-image img {
  transform: scale(1.05);
}

.treatment-content {
  padding: 1.75rem;
}

.treatment-content h3 {
  margin-bottom: 0.75rem;
  color: var(--primary-dark);
}

.treatment-content p {
  color: var(--gray-600);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.treatment-content a {
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Location Cards */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.location-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
}

.location-map {
  height: 200px;
  background-color: var(--gray-200);
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.location-info {
  padding: 1.75rem;
}

.location-info h3 {
  margin-bottom: 1rem;
  color: var(--primary-dark);
}

.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--gray-600);
  font-size: 0.9375rem;
}

.location-detail svg {
  flex-shrink: 0;
  color: var(--accent);
}

.location-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* CTA Section */
.cta {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  color: var(--white);
  text-align: center;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="70" r="2.5" fill="rgba(255,255,255,0.06)"/></svg>');
  background-size: 100px;
}

.cta .container {
  position: relative;
  z-index: 1;
}

.cta h2 {
  color: var(--white);
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
.footer {
  background-color: var(--primary-dark);
  color: var(--white);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-col h4 {
  color: var(--white);
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: var(--accent-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-700);
  font-size: 0.9375rem;
}

.form-control {
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  font-family: inherit;
  background-color: var(--white);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(183, 110, 121, 0.1);
}

.form-control.error {
  border-color: var(--error);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.form-error {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.form-success {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
}

.contact-info-card h3 {
  margin-bottom: 1rem;
  color: var(--primary-dark);
}

/* About Page */
.about-hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 5rem 0;
  text-align: center;
}

/* ==========================================================================
   Page header (replaces .about-hero on every template)
   The original band was 5rem of padding around centred text — about 450px to
   say "Skin Treatments", with the treatments themselves below the fold. This
   is roughly a third of the height, left-aligned, and earns the space back by
   carrying the breadcrumb.
   ========================================================================== */
.page-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 1.75rem 0 2rem;
}

.page-header-accent {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-light) 55%, var(--primary) 100%);
}

/* Same arc motif as the hero circle, so the two read as one system. */
.page-header-arc {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.page-header-arc-1 {
  width: 380px;
  height: 380px;
  right: 4%;
  top: -140px;
}

.page-header-arc-2 {
  width: 560px;
  height: 560px;
  right: -6%;
  top: -230px;
  border-color: rgba(255, 255, 255, 0.09);
}

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

.page-header h1 {
  color: var(--white);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  margin: 0;
  line-height: 1.15;
}

.page-header .section-label {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.3rem;
  display: block;
}

.page-header-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
}

/* The description sits beside the title on a wide screen rather than under it,
   which is what kept the old band so tall. */
.page-header-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9375rem;
  max-width: 46ch;
  line-height: 1.55;
}

/* --- Breadcrumb --- */
.breadcrumb {
  margin-bottom: 0.85rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb li + li::before {
  content: '/';
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--white);
  font-weight: 500;
}

@media (max-width: 768px) {
  .page-header {
    padding: 1.35rem 0 1.6rem;
  }

  .page-header-body {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .page-header-sub {
    font-size: 0.9rem;
  }

  .page-header-arc-1,
  .page-header-arc-2 {
    display: none;
  }
}

.about-hero h1 {
  color: var(--white);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Values/Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.feature-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: var(--white);
}

.feature-card h3 {
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: var(--gray-600);
  font-size: 0.9375rem;
}

/* Service List */
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.service-tag {
  background: linear-gradient(135deg, var(--cream), var(--white));
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  color: var(--primary-dark);
  border: 1px solid var(--gray-200);
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  color: var(--accent-light);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-text {
  font-style: italic;
  color: var(--gray-700);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  font-weight: 600;
  color: var(--primary-dark);
}

/* Service Detail */
.service-detail {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.service-detail:last-child {
  border-bottom: none;
}

.service-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--white);
}

/* Responsive */
@media (max-width: 968px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-image {
    display: none;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .service-detail {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .service-icon {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }

  .section {
    padding: 3.5rem 0;
  }

  .header-top {
    display: none;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--white);
    flex-direction: column;
    padding: 1rem;
    box-shadow: var(--shadow);
    gap: 0;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .nav-links .has-dropdown .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: var(--gray-50);
    padding: 0;
    border-radius: 0;
  }

  .nav-links .dropdown-menu a {
    padding-left: 2rem;
    font-size: 0.875rem;
  }

  .mobile-toggle {
    display: flex;
  }

  .hero-promo-banner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
  }

  .promo-text {
    width: 100%;
  }

  .locations-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 3rem 0;
  }

  .btn-lg {
    width: 100%;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

/* ==========================================================================
   WordPress additions
   Everything above this line is the original static-site stylesheet, verbatim.
   ========================================================================== */

/* --- Dropdown submenus ---
       The static site hand-wrote .has-dropdown/.dropdown-menu. WordPress menus
       emit .sub-menu on any nested item instead, so the same look is reproduced
       here for whatever the client nests in Appearance > Menus. --- */
.nav-links li {
  position: relative;
}

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links .sub-menu li {
  padding: 0;
}

.nav-links .sub-menu a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  border-bottom: none;
  white-space: nowrap;
}

.nav-links .sub-menu a:hover {
  background-color: var(--cream);
  color: var(--accent);
}

.nav-links .sub-menu a::after {
  display: none;
}

.nav-links .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

@media (max-width: 768px) {
  .nav-links .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: var(--gray-50);
    padding: 0;
    border-radius: 0;
    min-width: 0;
  }

  .nav-links .sub-menu a {
    padding-left: 2rem;
    font-size: 0.875rem;
  }
}

/* --- Accessibility helpers required by WordPress --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  clip: auto !important;
  clip-path: none;
  color: var(--primary-dark);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Keep the sticky admin bar from covering the sticky header */
.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}

/* --- Editor content: styles for anything typed into the WordPress editor --- */
.entry-content > * {
  margin-bottom: 1.25rem;
}

.entry-content ul,
.entry-content ol {
  list-style: revert;
  margin: 0 0 1.25rem 1.5rem;
  padding-left: 0.5rem;
}

.entry-content li {
  margin-bottom: 0.5rem;
}

.entry-content a {
  text-decoration: underline;
}

.entry-content blockquote {
  border-left: 4px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--gray-600);
  font-style: italic;
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--gray-200);
  padding: 0.75rem;
  text-align: left;
}

.entry-content th {
  background-color: var(--cream);
  color: var(--primary-dark);
}

.entry-content img {
  border-radius: var(--radius);
}

.entry-content pre {
  background-color: var(--gray-50);
  border-radius: var(--radius);
  overflow-x: auto;
  padding: 1rem;
}

.entry-content figure {
  margin-bottom: 1.5rem;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* Wide tables and code blocks scroll inside their own box rather than pushing
   the page sideways on a phone. */
.entry-content > table,
.entry-content .wp-block-table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* Core alignment classes */
.alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
  max-width: 90vw;
  width: 90vw;
}

.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

@media (max-width: 968px) {
  .alignwide,
  .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }
}

/* --- Narrow content column for editor-driven pages, posts and archives --- */
.content-narrow {
  max-width: 800px;
  margin: 0 auto;
}

.entry-header {
  margin-bottom: 2rem;
}

.entry-meta {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.entry-meta a {
  color: var(--gray-600);
}

.post-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.post-card-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-card-body {
  padding: 1.5rem;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  color: var(--primary-dark);
  padding: 0.5rem 0.9rem;
  transition: all 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* --- Search form --- */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 500px;
}

.search-form .form-control {
  margin: 0;
}

/* --- Footer widgets --- */
.footer-col .widget {
  margin-bottom: 1.5rem;
}

.footer-col .widget ul {
  list-style: none;
}

.footer-col .widget li {
  margin-bottom: 0.5rem;
}

/* Block widgets emit their own headings rather than the before_title markup,
   which would otherwise render dark green on the dark green footer. */
.footer-col .widget h1,
.footer-col .widget h2,
.footer-col .widget h3,
.footer-col .widget h4,
.footer-col .widget h5,
.footer-col .widget h6,
.footer-col .wp-block-heading {
  color: var(--white);
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.footer-col .widget a,
.footer-col .wp-block-list a,
.footer-col .wp-block-categories a,
.footer-col .wp-block-archives a {
  color: rgba(255, 255, 255, 0.8);
}

.footer-col .widget a:hover,
.footer-col .wp-block-list a:hover,
.footer-col .wp-block-categories a:hover,
.footer-col .wp-block-archives a:hover {
  color: var(--white);
}

.footer-col .wp-block-categories,
.footer-col .wp-block-archives,
.footer-col .wp-block-page-list {
  list-style: none;
  padding-left: 0;
}

.footer-col .wp-block-categories li,
.footer-col .wp-block-archives li,
.footer-col .wp-block-page-list li {
  margin-bottom: 0.5rem;
}

/* --- Contact form feedback (server-backed submissions) --- */
.form-loading {
  opacity: 0.6;
  pointer-events: none;
}

.honeypot-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* --- Fade-in animation used by the IntersectionObserver in main.js ---
       Scoped to .js (set in <head> before paint) so that with scripting off the
       cards are simply visible rather than stuck at opacity 0. --- */
.js .js-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .js-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .js-animate,
  .js .js-animate.animate-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- WordPress custom logo: sits in place of the "AS" monogram --- */
.logo .custom-logo-link {
  display: flex;
  align-items: center;
}

.logo .custom-logo {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* --- Hero without an image: use the full width rather than leaving a gap --- */
.hero.hero-no-image .container {
  grid-template-columns: 1fr;
}

.hero.hero-no-image .hero-content {
  max-width: 760px;
}

/* --- "Wide / Sectioned Page" template: content supplies its own sections --- */
.entry-content-wide > * {
  margin-bottom: 0;
}

.entry-content-wide > p,
.entry-content-wide > h1,
.entry-content-wide > h2,
.entry-content-wide > h3,
.entry-content-wide > ul,
.entry-content-wide > ol,
.entry-content-wide > blockquote,
.entry-content-wide > figure {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.entry-content-wide > p:first-child {
  padding-top: 3rem;
}

/* ==========================================================================
   Treatments page layouts
   The original markup gave the icon an 80px grid column beside a full-width
   text column, leaving a tall empty space under every icon. Both layouts
   below fix that; the client picks one in the Customizer.
   ========================================================================== */

/* --- Full-width rows: icon column narrowed to the icon itself --- */
.services-layout-rows .service-detail {
  grid-template-columns: 72px 1fr;
  gap: 1.75rem;
  align-items: start;
}

/* --- Card grid: each treatment becomes a self-contained card --- */
.services-list.services-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.75rem;
  align-items: start;
}

.services-layout-grid .service-detail {
  display: block;
  padding: 1.75rem;
  border-bottom: none;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-layout-grid .service-detail:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.services-layout-grid .service-detail .service-icon {
  margin-bottom: 1rem;
}

.services-layout-grid .service-detail h2 {
  font-size: 1.375rem;
}

.services-layout-grid .service-detail .entry-content p:last-child {
  margin-bottom: 1rem;
}

/* The highlighted treatment keeps its accent. */
.services-layout-grid .service-detail-featured {
  margin: 0 !important;
  border: 2px solid var(--accent);
}

/* Grey pills vanish against the highlighted card's tint, so lift them to white
   there and let them read as pills again. */
.service-detail-featured .service-tag {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(183, 110, 121, 0.2);
}

@media (max-width: 768px) {
  .services-layout-rows .service-detail {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .services-list.services-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Responsive hardening
   The original stylesheet collapsed the hero, contact, about and service-detail
   grids, but the auto-fit card rows and the button rows were left to fend for
   themselves at narrow widths. These carry over from the Express Care theme.
   ========================================================================== */

/* Never let a long word, URL or phone number push the page sideways. */
body {
  overflow-x: hidden;
}

.hero-content h1,
.section-header h2,
.entry-content,
.treatment-content h3 {
  overflow-wrap: break-word;
}

/* Google Maps and the booking iframe: fluid width, no stray border. */
.location-map iframe,
.appointment-frame iframe {
  width: 100%;
  border: 0;
  display: block;
}

.appointment-frame iframe {
  min-height: 800px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
  /* auto-fit already collapses these, but only once the viewport drops below
     the 280-350px track minimum plus gap; forcing 1fr here removes the
     awkward in-between width where a card is squeezed to its minimum. */
  .treatments-grid,
  .features-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons stack rather than squeezing to two words per line. */
  .hero-buttons,
  .location-buttons {
    flex-wrap: wrap;
  }

  .cta .hero-buttons .btn {
    width: 100%;
  }

  .appointment-frame iframe {
    min-height: 620px;
  }
}

/* ==========================================================================
   Header breakpoint corrections
   The original switched to the mobile menu only at 768px, which left the
   desktop nav overflowing the header between 769px and roughly 1100px, and at
   phone widths the logo plus the "Book Consultation" button squeezed the
   hamburger off the right edge entirely. Both are fixed below.
   ========================================================================== */

/* Never break a menu label across two lines; a nav item is a unit. */
.nav-links a {
  white-space: nowrap;
}

/* Desktop nav sizing.
   NOT in a media query on purpose: .container is capped at 1200px, so a 1512px
   viewport gives the header no more room than a 1200px one. Putting these in a
   max-width query meant wide screens kept the roomy defaults and overflowed
   while narrow ones were fine — the opposite of what you would expect. */
.header-main .container {
  gap: 1rem;
}

.nav {
  gap: 1.15rem;
}

.nav-links {
  gap: 1.35rem;
}

.nav-links a {
  font-size: 0.9375rem;
}

.header-main .nav > .btn {
  padding: 0.7rem 1.1rem;
  font-size: 0.9375rem;
}

.logo-text {
  font-size: 1rem;
}

/* Switch to the mobile menu while the desktop row still fits. Seven items plus
   the booking button need about 1150px of container; below that the header
   overflowed and the whole page scrolled sideways. */
@media (max-width: 1150px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--white);
    flex-direction: column;
    padding: 1rem;
    box-shadow: var(--shadow);
    gap: 0;
    z-index: 150;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links .has-dropdown .dropdown-menu,
  .nav-links .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: var(--gray-50);
    padding: 0;
    border-radius: 0;
    min-width: 0;
  }

  .nav-links .dropdown-menu a,
  .nav-links .sub-menu a {
    padding-left: 2rem;
    font-size: 0.875rem;
  }

  .mobile-toggle {
    display: flex;
  }

  /* The header needs to be the positioning context for the dropped-down menu. */
  .header-main .container {
    position: relative;
  }
}

/* Phone: the header button and the hamburger cannot both fit beside the logo,
   and the button is duplicated by the hero's "Book Free Consultation" anyway. */
@media (max-width: 560px) {
  .header-main .container > .nav > .btn {
    display: none;
  }
}

@media (max-width: 480px) {
  .logo-icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }

  .logo-text {
    font-size: 1.05rem;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }

  .service-list {
    justify-content: center;
  }
}

/* ==========================================================================
   Components the static site did not have
   ========================================================================== */

/* --- Buttons sitting on the dark CTA band ---
       The original wrote these as inline styles on each anchor; as classes the
       colours stay in one place and the markup stays editable. --- */
.btn-on-dark {
  background-color: var(--white);
  color: var(--primary-dark);
}

.btn-on-dark:hover {
  background-color: var(--cream);
  color: var(--primary-dark);
}

.btn-on-dark-ghost {
  background-color: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-on-dark-ghost:hover {
  background-color: var(--white);
  color: var(--primary-dark);
}

/* --- Treatment card without a photo: brand gradient behind the icon --- */
.treatment-image-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
}

.treatment-image-icon svg {
  fill: var(--white);
  color: var(--white);
  width: 64px;
  height: 64px;
}

.treatment-card-featured {
  border: 2px solid var(--accent-light);
}

/* --- Promotion popup --- */
.promo-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.promo-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.promo-modal {
  position: relative;
  max-width: 500px;
  max-height: 90vh;
  margin: 1rem;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.promo-modal-overlay.active .promo-modal {
  transform: scale(1);
}

.promo-modal img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: auto;
}

.promo-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  background-color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: background-color 0.3s ease;
  z-index: 1;
}

.promo-modal-close:hover {
  background-color: var(--gray-100);
}

.promo-modal-close svg {
  width: 20px;
  height: 20px;
  color: var(--gray-700);
}

.promo-modal-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
}

.promo-modal-link:hover {
  color: var(--accent-light);
}

/* --- Booking iframe wrapper on the Appointment page --- */
.appointment-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Contact cards --- */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.contact-card-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.contact-phone-lg {
  font-size: 1.25rem;
  font-weight: 600;
}

.contact-info-card-dark {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--white);
}

.contact-info-card-dark h3,
.contact-info-card-dark p {
  color: var(--white);
}

/* --- Promotions --- */
.about-hero-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 50%, var(--primary) 100%);
}

.promotions-flyer {
  max-width: 640px;
  margin: 0 auto;
}

.promotions-flyer img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: auto;
}

/* --- Reversed two-column band (About page, "Dr. Rahman") ---
       The original set flex-direction: row-reverse on a grid, which does
       nothing; grid needs the columns swapped explicitly. --- */
.about-content-reverse > *:first-child {
  order: 2;
}

.about-content-reverse > *:last-child {
  order: 1;
}

@media (max-width: 968px) {
  /* Stacked, the text should still lead. */
  .about-content-reverse > *:first-child {
    order: 1;
  }

  .about-content-reverse > *:last-child {
    order: 2;
  }
}

/* --- Section label inside a page hero: the hero is dark, so the rose-gold
       accent used elsewhere would not read --- */
.about-hero .section-label {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Articles hub
   The category archive at /articles/ doubles as the magazine front page, so it
   gets a lead story, a topic filter and a denser card grid below.
   ========================================================================== */

/* --- Topic filter chips --- */
.topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--cream), var(--white));
  border: 1px solid var(--gray-200);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-dark);
  transition: all 0.3s ease;
}

.topic-chip:hover,
.topic-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.topic-chip.is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.topic-count {
  font-size: 0.75rem;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.topic-chip-sm {
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
}

.post-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

/* --- Lead article --- */
.article-lead {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 3rem;
}

.article-lead-media {
  display: block;
  align-self: stretch;
}

.article-lead-media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.article-lead-body {
  padding: 2.5rem 2.5rem 2.5rem 0;
}

/* With no featured image the text should not sit in a half-width column.
   Driven by a class from the template, not a :has() selector, so the layout
   does not depend on selector support. */
.article-lead-no-media {
  grid-template-columns: 1fr;
}

.article-lead-no-media .article-lead-body {
  padding: 2.5rem;
}

.article-lead-body h2 {
  font-size: 1.875rem;
  margin-bottom: 0.75rem;
}

.article-lead-body h2 a {
  color: inherit;
}

.article-lead-body h2 a:hover {
  color: var(--accent);
}

.article-lead-body .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.articles-more-heading {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}

/* The card meta row carries a date and a reading time side by side. */
.post-card-body .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .article-lead {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .article-lead-media img {
    min-height: 200px;
    max-height: 260px;
  }

  .article-lead-body {
    padding: 1.75rem;
  }

  .article-lead-body h2 {
    font-size: 1.5rem;
  }

  .topic-filter {
    margin-bottom: 1.75rem;
  }
}

/* ==========================================================================
   Design pass — v1.3.0
   Tightens the header, closes the gap under the menu, replaces the placeholder
   hero image with a composition built from the clinic's own content, and gives
   the cards and sections a bit more life.
   ========================================================================== */

/* --- Header: the booking button must never wrap into a two-line balloon --- */
.header-main .nav > .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links a {
  white-space: nowrap;
}

/* Seven menu items plus the button is tight on a laptop; step the type and
   gaps down earlier rather than letting anything wrap. */
@media (max-width: 1320px) {
  .header-main .container { gap: 1.25rem; }
  .nav { gap: 1.25rem; }
  .nav-links { gap: 1.4rem; }
  .nav-links a { font-size: 0.9375rem; }
  .header-main .nav > .btn { padding: 0.7rem 1.15rem; font-size: 0.9375rem; }
}

/* --- Hero: close the gap under the menu and rebalance the columns --- */
.hero {
  padding: 3.25rem 0 4.5rem;
}

.hero .container {
  gap: 3.5rem;
  align-items: center;
}

.hero-has-visual .container {
  grid-template-columns: 1.05fr 0.95fr;
}

.hero-content h1 {
  letter-spacing: -0.02em;
}

/* Stats: an aligned row with hairline dividers instead of three loose columns */
.hero-stats {
  gap: 0;
  border-top: 1px solid var(--gray-200);
  padding-top: 1.75rem;
  margin-top: 2.25rem;
}

.hero-stat {
  padding-right: 2rem;
  margin-right: 2rem;
  border-right: 1px solid var(--gray-200);
}

.hero-stat:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.hero-stat-number {
  font-variant-numeric: tabular-nums;
}


/* --- Entrance: one orchestrated sequence, not scattered effects ------------ */
.js .hero-content > *,
.js .hero-visual-stack > * {
  animation: heroRise 0.7s cubic-bezier(0.22, 0.68, 0.35, 1) backwards;
}

.js .hero-content > *:nth-child(1) { animation-delay: 0.04s; }
.js .hero-content > *:nth-child(2) { animation-delay: 0.10s; }
.js .hero-content > *:nth-child(3) { animation-delay: 0.16s; }
.js .hero-content > *:nth-child(4) { animation-delay: 0.22s; }
.js .hero-content > *:nth-child(5) { animation-delay: 0.28s; }
.js .hero-content > *:nth-child(6) { animation-delay: 0.34s; }

.js .hero-visual-stack > *:nth-child(1) { animation-delay: 0.24s; }
.js .hero-visual-stack > *:nth-child(2) { animation-delay: 0.32s; }
.js .hero-visual-stack > *:nth-child(3) { animation-delay: 0.40s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Cards: a more deliberate lift, and the photo eases in ---------------- */
.treatment-card {
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.35, 1), box-shadow 0.35s ease;
}

.treatment-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -28px rgba(74, 107, 90, 0.6);
}

.treatment-image {
  overflow: hidden;
}

.treatment-image img {
  transition: transform 0.6s cubic-bezier(0.22, 0.68, 0.35, 1);
}

.treatment-card:hover .treatment-image img {
  transform: scale(1.05);
}

.feature-card,
.testimonial-card,
.location-card,
.post-card {
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.35, 1), box-shadow 0.35s ease;
}

.feature-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* --- Section rhythm ------------------------------------------------------- */
.section-header {
  margin-bottom: 3rem;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-content > *,
  .js .hero-visual-stack > * {
    animation: none;
  }

  .treatment-card:hover,
  .feature-card:hover,
  .testimonial-card:hover {
    transform: none;
  }

  .treatment-card:hover .treatment-image img {
    transform: none;
  }
}

@media (max-width: 968px) {
  .hero {
    padding: 2.5rem 0 3.5rem;
  }

  /* The composition is content, not decoration, so it stays on mobile — but
     below the copy and without the negative offsets. */
  .hero-has-visual .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 0;
    margin-top: 2.5rem;
  }

  .hero-visual-stack {
    max-width: 460px;
  }

  .hero-float-lead,
  .hero-float-second {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-stats {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-stat {
    padding-right: 1.1rem;
    margin-right: 1.1rem;
  }
}

/* --- Wordmark must not wrap; it reads as two brands when it does ---------- */
.logo-text {
  white-space: nowrap;
  line-height: 1.25;
}

.logo {
  flex-shrink: 0;
}

@media (max-width: 1320px) {
  .logo-text { font-size: 1rem; }
  .logo-icon { width: 44px; height: 44px; font-size: 1.05rem; }
  .logo { gap: 0.6rem; }
}



/* --- Promo strip: one line at desktop, and it never splits the badge ------ */
.hero-promo-banner {
  font-size: 0.8125rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  gap: 0.65rem;
  max-width: 100%;
}

.promo-badge {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.promo-text {
  line-height: 1.35;
}

.promo-arrow {
  flex-shrink: 0;
}

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

/* ==========================================================================
   Hero visual — the branded panel
   Replaces the placeholder photograph. A defined gradient panel gives the
   column real structure (a vague blurred blob just read as a smudge), and the
   white cards overlap its edge so the composition has depth. Everything in the
   cards is real content: the clinic's own featured treatments.
   ========================================================================== */
.hero-visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.hero-panel {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(460px, 88%);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(150deg, var(--primary-dark) 0%, var(--primary) 48%, var(--primary-light) 100%);
  overflow: hidden;
  /* A wide, very soft halo keeps the disc from reading as a flat sticker. */
  box-shadow:
    0 30px 70px -30px rgba(30, 42, 36, 0.5),
    0 0 90px 30px rgba(138, 171, 153, 0.18);
}

/* Concentric arcs, echoing the mark. Thin, low-contrast, purely textural. */
.hero-panel-arc {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  right: -22%;
  top: 50%;
  transform: translateY(-50%);
}

.hero-panel-arc-1 { width: 340px; height: 340px; }
.hero-panel-arc-2 { width: 500px; height: 500px; border-color: rgba(255, 255, 255, 0.12); }
.hero-panel-arc-3 { width: 660px; height: 660px; border-color: rgba(255, 255, 255, 0.08); }

/* A warm rose wash in the corner keeps the panel from reading as flat green. */
.hero-panel::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  right: -60px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 147, 156, 0.6), transparent 70%);
}

/* Aligned to the panel, not the column, so the cards sit centred over the
   disc instead of hanging off its left side. */
.hero-visual-stack {
  position: relative;
  z-index: 1;
  width: 88%;
  margin-left: auto;
  display: grid;
  gap: 1.1rem;
}

.hero-float {
  background-color: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 45px -22px rgba(30, 42, 36, 0.45), 0 2px 5px rgba(30, 42, 36, 0.05);
  padding: 1.25rem 1.4rem;
}

/* Left, right, left. Each card keeps a different width so no two share an
   edge, which is what made the original stack look pasted on. */
.hero-float-lead {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1.4rem 1.55rem;
  margin-right: 3rem;
}

.hero-float-trust {
  margin-left: 3rem;
}

.hero-float-second {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-left: 1.25rem;
  margin-right: 1.5rem;
}

.hero-float-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
}

.hero-float-icon svg { fill: currentColor; }

.hero-float-icon-alt {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
}

.hero-float-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-float-title {
  margin: 0;
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1.3;
}

.hero-float-lead .hero-float-title { font-size: 1.1rem; }

.hero-float-sub {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.hero-float-stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.4rem;
  color: #dda43c;
}

.hero-float-stars svg { fill: currentColor; }

/* A slow drift so the cards feel placed rather than pasted. */
.js .hero-float-lead   { animation: heroRise .7s cubic-bezier(.22,.68,.35,1) backwards, heroDrift 7s ease-in-out 1.2s infinite; }
.js .hero-float-trust  { animation: heroRise .7s cubic-bezier(.22,.68,.35,1) backwards, heroDrift 8s ease-in-out 1.6s infinite reverse; }
.js .hero-float-second { animation: heroRise .7s cubic-bezier(.22,.68,.35,1) backwards, heroDrift 9s ease-in-out 2.0s infinite; }

@keyframes heroDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-float-lead,
  .js .hero-float-trust,
  .js .hero-float-second { animation: none; }
}

@media (max-width: 968px) {
  .hero-visual { min-height: 0; margin-top: 2.5rem; }
  .hero-panel {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: min(400px, 84%);
  }
  .hero-visual-stack { width: 92%; max-width: 460px; margin-left: auto; margin-right: auto; }
  /* Same rhythm, tightened: the column is narrower here and the full offsets
     would push the right-hand card off the panel. */
  .hero-float-lead   { margin-right: 1.75rem; }
  .hero-float-trust  { margin-left: 1.75rem; }
  .hero-float-second { margin-left: 0.75rem; margin-right: 1rem; }
}

@media (max-width: 560px) {
  /* The panel behind small cards becomes a sliver; drop it and let the cards
     stand on the page. */
  .hero-panel { display: none; }
  .hero-visual-stack { width: 100%; }
  .hero-float { box-shadow: var(--shadow); }
  .hero-float-lead,
  .hero-float-trust,
  .hero-float-second { margin-left: 0; margin-right: 0; }
}

/* --- Treatment card icon tile ---------------------------------------------
       Used whenever there is no real photograph. Given the same arc motif as
       the hero panel so the two read as one system rather than a fallback. --- */
.treatment-image-icon {
  position: relative;
  min-height: 190px;
  background: linear-gradient(150deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
  overflow: hidden;
}

.treatment-image-icon::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  right: -110px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.treatment-image-icon::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  right: -60px;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 147, 156, 0.45), transparent 70%);
}

.treatment-image-icon svg {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  fill: var(--white);
  color: var(--white);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

/* Every other card in the row alternates to the rose gradient, so a grid of
   icon tiles has rhythm instead of three identical green panels. */
.treatments-grid > .treatment-card:nth-child(even) .treatment-image-icon {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-light) 100%);
}

.treatments-grid > .treatment-card:nth-child(even) .treatment-image-icon::after {
  background: radial-gradient(circle, rgba(138, 171, 153, 0.5), transparent 70%);
}

/* The featured band sets its own gradient inline, so keep that winning. */
.treatment-card-featured .treatment-image-icon::after { opacity: 0.7; }