/* ============================================
   HANDS ON HEALTH MASSAGE THERAPY — Stylesheet
   Built by Williamson Automation
   Atmosphere-first design | Sage + Cream + Gold
   ============================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* No scroll-behavior: smooth — ScrollSmoother is active */
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-1-1 { aspect-ratio: 1/1; }
.aspect-4-3 img,
.aspect-16-9 img,
.aspect-1-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.face-top img,
img.face-top { object-position: top; }
.face-center img,
img.face-center { object-position: center 25%; }
.face-bottom img,
img.face-bottom { object-position: center 75%; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* --- CUSTOM PROPERTIES --- */
:root {
  /* Colors — Primary */
  --color-primary: #5B7B6A;
  --color-primary-light: #7A9B89;
  --color-primary-dark: #3D5A4C;
  --color-primary-rgb: 91, 123, 106;

  /* Colors — Secondary */
  --color-secondary: #8B7B6B;
  --color-secondary-light: #C4B5A5;

  /* Colors — Accent */
  --color-accent: #B8860B;
  --color-accent-dark: #9A7209;
  --color-accent-rgb: 184, 134, 11;

  /* Colors — Neutrals */
  --color-bg: #FBF8F4;
  --color-surface: #F3EDE4;
  --color-text: #2C2420;
  --color-text-secondary: #6B5E52;
  --color-text-light: #F5F0EA;
  --color-text-light-muted: rgba(245, 240, 234, 0.7);
  --color-border: #E2D8CC;
  --color-dark: #2C2420;
  --color-dark-rgb: 44, 36, 32;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --section-padding-mobile: 5rem 1.5rem;
  --section-padding-desktop: 10rem 4rem;
  --content-max-width: 1200px;
  --gap: 2rem;
  --gap-sm: 1rem;
  --gap-lg: 3rem;

  /* Animation */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-cinematic: 1s ease;

  /* Nav */
  --nav-height: 72px;
  --nav-bg: rgba(44, 36, 32, 0.85);
  --nav-blur: 20px;

  /* Shadows — warm-toned using dark walnut */
  --shadow-card: 0 1px 2px rgba(44,36,32,0.06), 0 4px 12px rgba(44,36,32,0.06), 0 12px 32px rgba(44,36,32,0.04);
  --shadow-card-hover: 0 2px 4px rgba(44,36,32,0.08), 0 8px 20px rgba(44,36,32,0.1), 0 20px 48px rgba(44,36,32,0.08);
  --shadow-subtle: 0 2px 8px rgba(44,36,32,0.08);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;
}


/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  max-width: 65ch;
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

.text-accent {
  font-family: var(--font-heading);
  font-style: italic;
}

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

.section-label--light {
  color: var(--color-accent);
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  max-width: 60ch;
  line-height: 1.7;
  margin-top: 0.75rem;
}

.price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.125rem;
}


/* --- LAYOUT UTILITIES --- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: clamp(1.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 4rem);
}

.section {
  padding: var(--section-padding-mobile);
  position: relative;
}

.section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

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

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

.section--dark {
  background: var(--color-dark);
  color: var(--color-text-light);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-text-light);
}

.section--sage {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
}

.section--sage h2,
.section--sage h3 {
  color: var(--color-text-light);
}

.section-heading-group {
  text-align: center;
  margin-bottom: var(--gap-lg);
}

.section-heading-group .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Subtle background texture — barely perceptible premium signal */
.textured-bg {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--color-primary-rgb), 0.03), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--color-accent-rgb), 0.02), transparent 40%);
}


/* --- NAVIGATION --- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  border-bottom: 1px solid transparent;
}

.site-nav.nav-scrolled {
  background: rgba(44, 36, 32, 0.95);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 4px 20px rgba(44, 36, 32, 0.15);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nav-logo__tagline {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-light-muted);
  letter-spacing: 0.05em;
  display: none;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-light-muted);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-base);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base), left var(--transition-base);
}

.nav-links a.is-active {
  color: var(--color-text-light);
}

.nav-cta {
  display: none;
  align-items: center;
}

.nav-cta .btn {
  padding: 0.625rem 1.5rem;
  font-size: 0.8125rem;
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1001;
  gap: 5px;
}

.nav-hamburger__line {
  width: 24px;
  height: 2px;
  background: var(--color-text-light);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-hamburger.is-open .nav-hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.is-open .nav-hamburger__line:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.is-open .nav-hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Menu */
.nav-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(44, 36, 32, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.nav-menu.is-open {
  right: 0;
}

.nav-menu a {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition-base);
}

.nav-menu .btn {
  margin-top: 1rem;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 32, 0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}


/* --- HERO --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 4rem;
  text-align: center;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

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

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(44, 36, 32, 0.15) 0%,
    rgba(44, 36, 32, 0.45) 35%,
    rgba(44, 36, 32, 0.8) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

.hero__badge .stars {
  color: var(--color-accent);
  letter-spacing: 1px;
}

.hero__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 4px 40px rgba(0, 0, 0, 0.2);
  line-height: 1.1;
  overflow: hidden;
}

.hero__subheading {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(245, 240, 234, 0.85);
  max-width: 55ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-top: 0.5rem;
}

.hero__phone svg,
.hero__phone .phone-icon {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(245, 240, 234, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}

.scroll-indicator__arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(245, 240, 234, 0.5);
  border-bottom: 2px solid rgba(245, 240, 234, 0.5);
  transform: rotate(45deg);
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}


/* --- SECTION: Trust Stats --- */
.trust-stats {
  background: var(--color-primary-dark);
  position: relative;
  z-index: 2;
  padding: 3.5rem 1.5rem;
  background-image: radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb), 0.2), transparent 60%);
}

.trust-stats__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  text-align: center;
}

.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.trust-stat__stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 0.25rem;
}

.trust-stat__number {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1;
  color: var(--color-text-light);
  text-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
}

.trust-stat__label {
  font-size: 0.8125rem;
  color: var(--color-text-light-muted);
  margin-top: 0.25rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Wave divider between trust stats and next section */
.section-wave {
  position: relative;
}

.section-wave::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--color-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 1;
}

.section-wave--surface::after {
  background: var(--color-surface);
}

.section-wave--dark::after {
  background: var(--color-dark);
}


/* --- SECTION: Services Preview (homepage) --- */
.services-preview {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--color-primary-rgb), 0.03), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--color-accent-rgb), 0.02), transparent 40%);
}

.services-preview .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.services-preview .card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: var(--gap-lg);
}

.services-preview .section-cta {
  text-align: center;
  margin-top: var(--gap-lg);
}

/* Section angle divider */
.section-angle {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  margin-bottom: -4vw;
  position: relative;
  z-index: 1;
}

.section-angle-reverse {
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(5rem + 4vw);
}


/* --- SECTION: The Experience (homepage) --- */
.experience-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.experience-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.experience-split {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.experience-text {
  order: 2;
}

.experience-text h2 {
  margin-bottom: 1.5rem;
}

.experience-text p {
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
}

.experience-photo {
  order: 1;
  position: relative;
}

.experience-photo__wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.experience-photo__wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Decorative offset shadow behind photo */
.experience-photo__shadow {
  position: absolute;
  top: 20px;
  right: -12px;
  width: 100%;
  height: 100%;
  background: rgba(var(--color-primary-rgb), 0.12);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.highlight-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.highlight-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.highlight-list__icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1rem;
}


/* --- SECTION: Meet Your Therapists (homepage) --- */
.therapists-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 80% 50%, rgba(var(--color-primary-rgb), 0.03), transparent 50%);
}

.therapists-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.therapists-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: var(--gap-lg);
}

.therapist-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  text-align: center;
}

.therapist-card__initial {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin: 0 auto 1.25rem;
  box-shadow: 0 2px 8px rgba(44, 36, 32, 0.15);
}

.therapist-card__initial--sage { background: var(--color-primary); }
.therapist-card__initial--taupe { background: var(--color-secondary); }
.therapist-card__initial--walnut { background: var(--color-dark); }
.therapist-card__initial--lavender { background: #9B8EC4; }
.therapist-card__initial--gold { background: var(--color-accent); }

.therapist-card__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.therapist-card__specialty {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}

.therapist-card__bio {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.therapist-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-dark);
  background: rgba(var(--color-accent-rgb), 0.15);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  border-radius: 100px;
  padding: 0.375rem 1rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.therapists-section .section-cta {
  text-align: center;
  margin-top: var(--gap-lg);
}


/* --- SECTION: Reviews (homepage) --- */
.reviews-section {
  padding: var(--section-padding-mobile);
  background: var(--color-dark);
  color: var(--color-text-light);
  background-image: radial-gradient(circle at 50% 0%, rgba(var(--color-primary-rgb), 0.15), transparent 50%);
  position: relative;
}

.reviews-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.reviews-section h2 {
  color: var(--color-text-light);
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: var(--gap-lg);
}

/* Testimonial cards — glassmorphism on dark bg */
.testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-stars {
  color: var(--color-accent);
  font-size: 1.125rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  color: var(--color-text-light);
}

.testimonial-author {
  font-weight: 600;
  font-size: 0.875rem;
  color: rgba(245, 240, 234, 0.8);
}

.testimonial-source {
  font-size: 0.75rem;
  color: rgba(245, 240, 234, 0.5);
  margin-top: 0.125rem;
}

/* Review ticker */
.review-ticker {
  margin-top: var(--gap-lg);
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  min-height: 80px;
  position: relative;
}

.review-ticker__item {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.8);
  text-align: center;
}

.review-ticker__author {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8125rem;
  color: rgba(245, 240, 234, 0.5);
  margin-top: 0.5rem;
  display: block;
}


/* --- SECTION: CTA Band (homepage) --- */
.cta-band {
  position: relative;
  padding: 6rem 1.5rem;
  overflow: hidden;
  text-align: center;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(61, 90, 76, 0.9) 0%, rgba(44, 36, 32, 0.85) 100%);
}

.cta-band__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}

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

.cta-band p {
  color: rgba(245, 240, 234, 0.85);
  margin-bottom: 2rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band .hero__cta {
  margin-top: 0;
}

.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-light);
  font-weight: 600;
  font-size: 1.125rem;
  margin-top: 1.5rem;
}


/* --- CARDS & COMPONENTS --- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card__image {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.4s ease;
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card__content,
.card__body {
  padding: 1.5rem 1.5rem 2rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.card__content .card__heading,
.card__body .card__heading,
.card__body h3 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.card__detail {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  transition: color var(--transition-fast);
}

/* Image hover effect */
.image-hover {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.image-hover img {
  transition: transform 0.4s ease, filter 0.4s ease;
  will-change: transform;
}

/* Photo framing — mask low-res edges */
.photo-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.btn-secondary--light {
  border-color: rgba(245, 240, 234, 0.5);
  color: var(--color-text-light);
}

.btn:active {
  transform: scale(0.98);
}

/* Glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-subtle);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  z-index: 998;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: all;
}


/* --- FORMS --- */
.contact-form-wrapper {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-card);
}

.contact-form-wrapper h3 {
  margin-bottom: 0.5rem;
}

.contact-form-wrapper .section-subtitle {
  margin-bottom: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.form-label .required {
  color: var(--color-accent);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

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

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5E52' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Bare element fallback — catches unstyled form elements */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5E52' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.contact-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.contact-form .required {
  color: var(--color-accent);
}


/* --- FOOTER --- */
.site-footer {
  background: var(--color-dark);
  background-image: radial-gradient(circle at 10% 0%, rgba(var(--color-primary-rgb), 0.12), transparent 40%);
  color: var(--color-text-light);
  padding: 5rem 1.5rem 0;
}

.footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.footer__brand-sub {
  font-size: 0.875rem;
  color: var(--color-text-light-muted);
  line-height: 1.6;
}

.footer__brand-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-text-light-muted);
  font-size: 0.9375rem;
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__links a {
  color: var(--color-text-light-muted);
  font-size: 0.9375rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-text-light-muted);
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

.footer__contact-icon {
  min-width: 18px;
  color: var(--color-primary-light);
  margin-top: 2px;
}

.footer__contact-item a {
  color: var(--color-text-light-muted);
  transition: color var(--transition-fast);
}

.footer__hours-table {
  font-size: 0.875rem;
  color: var(--color-text-light-muted);
  width: 100%;
}

.footer__hours-table tr {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(245, 240, 234, 0.06);
}

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

.footer__hours-note {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-top: 0.75rem;
}

.footer__bottom {
  border-top: 1px solid rgba(245, 240, 234, 0.08);
  margin-top: 3rem;
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.footer__bottom p,
.footer__bottom a {
  font-size: 0.8125rem;
  color: rgba(245, 240, 234, 0.5);
}

.footer__bottom a {
  transition: color var(--transition-fast);
}


/* --- INNER PAGE HEADERS --- */
.page-header {
  position: relative;
  min-height: 45vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 3.5rem;
  overflow: hidden;
}

.page-header--solid {
  background: var(--color-dark);
  background-image: radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb), 0.15), transparent 70%);
}

.page-header__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-header__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(44, 36, 32, 0.3) 0%, rgba(44, 36, 32, 0.75) 100%);
}

.page-header__content {
  position: relative;
  z-index: 2;
}

.page-header__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  display: block;
}

.page-header__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  color: var(--color-text-light);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.page-header__breadcrumb {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: rgba(245, 240, 234, 0.6);
}

.page-header__breadcrumb a {
  color: rgba(245, 240, 234, 0.6);
  transition: color var(--transition-fast);
}

.page-header__breadcrumb .separator {
  margin: 0 0.5rem;
}


/* --- SERVICES PAGE SECTIONS --- */

/* Services Introduction */
.services-intro {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
  text-align: center;
}

.services-intro .section__inner {
  max-width: 65ch;
  margin: 0 auto;
}

.services-intro h2 {
  margin-bottom: 1.5rem;
}

.services-intro p {
  color: var(--color-text-secondary);
  margin-left: auto;
  margin-right: auto;
}

.accent-line {
  width: 60px;
  height: 3px;
  background: var(--color-primary);
  margin: 1.5rem auto 0;
  border-radius: 2px;
}

/* Service Detail — Split Layout */
.service-detail {
  padding: var(--section-padding-mobile);
}

.service-detail--light { background: var(--color-bg); }
.service-detail--surface { background: var(--color-surface); }

.service-detail .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.service-detail__split {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.service-detail__text {
  order: 2;
}

.service-detail__text h2 {
  margin-bottom: 0.5rem;
}

.service-detail__text .price {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.service-detail__text p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

.service-detail__includes {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.service-detail__includes strong {
  color: var(--color-text);
}

.service-detail__note {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: 0.75rem;
}

.service-detail__photo {
  order: 1;
  position: relative;
}

.service-detail__photo-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
}

.service-detail__photo-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Decorative offset shadow */
.service-detail__photo-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(var(--color-primary-rgb), 0.1);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.service-detail__photo-shadow--right {
  top: 16px;
  right: -12px;
}

.service-detail__photo-shadow--left {
  top: 16px;
  left: -12px;
}

/* Additional Modalities */
.modalities-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.modalities-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.modalities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: var(--gap-lg);
}

.modality-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.modality-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.modality-card p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.modality-card .price {
  font-size: 0.875rem;
}

/* Current Promotion */
.promotion-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.promotion-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.promotion-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

.promotion-card h2 {
  margin-bottom: 1rem;
}

.promotion-card p {
  color: var(--color-text-secondary);
  margin-left: auto;
  margin-right: auto;
}

.promotion-card .btn {
  margin-top: 1.5rem;
}

.promotion-fine-print {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 1rem;
  font-style: italic;
}

/* Services CTA */
.services-cta {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb), 0.05), transparent 60%);
  text-align: center;
}

.services-cta .section__inner {
  max-width: 600px;
  margin: 0 auto;
}

.services-cta h2 {
  margin-bottom: 1rem;
}

.services-cta p {
  color: var(--color-text-secondary);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}


/* --- ABOUT PAGE SECTIONS --- */

/* Kristen's Story */
.story-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.story-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.story-split {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  align-items: center;
}

.story-initial {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--color-text-light);
  box-shadow:
    0 4px 12px rgba(var(--color-primary-rgb), 0.3),
    0 12px 32px rgba(var(--color-primary-rgb), 0.15);
  flex-shrink: 0;
}

.story-text h2 {
  margin-bottom: 1.5rem;
}

.story-text p {
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
}

/* Timeline */
.timeline-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.timeline-section .section__inner {
  max-width: 800px;
  margin: 0 auto;
}

.timeline {
  position: relative;
  margin-top: var(--gap-lg);
  padding-left: 2.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
}

.timeline-entry {
  position: relative;
  padding-bottom: 3rem;
}

.timeline-entry:last-child {
  padding-bottom: 0;
}

.timeline-entry__year {
  position: absolute;
  left: -2.5rem;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-round);
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.15);
  z-index: 1;
}

.timeline-entry__content {
  padding-left: 1.5rem;
}

.timeline-entry__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-entry__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* The Studio — Gallery grid */
.studio-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.studio-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: var(--gap-lg);
}

.studio-grid__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  cursor: pointer;
  aspect-ratio: 1/1;
}

.studio-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.studio-grid__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(44, 36, 32, 0.85) 0%, transparent 100%);
  color: var(--color-text-light);
  font-size: 0.8125rem;
  line-height: 1.4;
  z-index: 2;
}

.studio-grid__caption strong {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}

/* Licensed Professionals */
.licensed-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.licensed-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.licensed-split {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.licensed-photo {
  position: relative;
}

.licensed-photo__wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.licensed-photo__wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.licensed-photo__shadow {
  position: absolute;
  top: 16px;
  left: -12px;
  width: 100%;
  height: 100%;
  background: rgba(var(--color-primary-rgb), 0.1);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.licensed-text h2 {
  margin-bottom: 1.5rem;
}

.licensed-text p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* About CTA */
.about-cta {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb), 0.05), transparent 60%);
  text-align: center;
}

.about-cta .section__inner {
  max-width: 600px;
  margin: 0 auto;
}

.about-cta h2 {
  margin-bottom: 1rem;
}

.about-cta p {
  color: var(--color-text-secondary);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}


/* --- CONTACT PAGE SECTIONS --- */

/* Contact Information */
.contact-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.contact-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.contact-layout {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.contact-details-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-card);
}

.contact-details-card h3 {
  margin-bottom: 1.5rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.contact-info-item a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.contact-info-icon {
  min-width: 20px;
  color: var(--color-primary);
  margin-top: 2px;
}

.contact-hours-table {
  width: 100%;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

.contact-hours-table tr {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}

.contact-hours-table tr:nth-child(even) {
  background: var(--color-bg);
}

.contact-hours-table td:first-child {
  font-weight: 500;
  color: var(--color-text);
}

.contact-hours-table td:last-child {
  color: var(--color-text-secondary);
}

.contact-hours-note {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-top: 1rem;
}

.contact-booking-links {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-booking-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: color var(--transition-fast);
}

.contact-map {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

.contact-map iframe {
  width: 100%;
  height: 250px;
  border: none;
  display: block;
}

/* Booking Options */
.booking-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.booking-section .section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: var(--gap-lg);
}

.booking-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.booking-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  background: rgba(var(--color-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--color-primary);
  font-size: 1.25rem;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.1);
}

.booking-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.booking-card p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
  max-width: 100%;
}

.booking-card .btn {
  width: 100%;
}


/* --- GALLERY & LIGHTBOX --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
  aspect-ratio: 1/1;
  border: 1px solid var(--color-border);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* Gallery sets (if used) */
.gallery-set {
  margin-bottom: var(--gap-lg);
}

.gallery-set__header {
  margin-bottom: 1rem;
}

.gallery-set__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.gallery-set__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-set__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.gallery-set__prev { left: 1rem; }
.gallery-set__next { right: 1rem; }

.gallery-set__counter {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 0.75rem;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(44, 36, 32, 0.95);
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
  z-index: 2001;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  z-index: 2001;
}

.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }

.lightbox__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}


/* --- ANIMATIONS & TRANSITIONS --- */

/* Animation starting states — GSAP animates TO visible via gsap.to() */
.fade-in,
.fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.slide-from-left,
.slide-left {
  opacity: 0;
  transform: translateX(-60px);
}

.slide-from-right,
.slide-right {
  opacity: 0;
  transform: translateX(60px);
}

.scale-up {
  opacity: 0;
  transform: scale(0.9);
}

.stagger-in > *,
.stagger-list > *,
.stagger-grid > * {
  opacity: 0;
  transform: translateY(30px);
}

.clip-from-left {
  clip-path: inset(0 100% 0 0);
}

.clip-from-right {
  clip-path: inset(0 0 0 100%);
}

.clip-reveal {
  clip-path: inset(0 100% 0 0);
}

.split-heading {
  overflow: hidden;
}

/* @keyframes for scroll indicator breathing — handled by JS gsap */


/* --- HOVER EFFECTS (pointer devices only) --- */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-light);
  }

  .image-hover:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
  }

  .studio-grid__item:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
  }

  .gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.08);
  }

  .btn:hover {
    transform: scale(1.02);
  }

  .btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.3);
  }

  .btn-secondary:hover {
    background: rgba(var(--color-accent-rgb), 0.1);
  }

  .btn-secondary--light:hover {
    background: rgba(245, 240, 234, 0.1);
    border-color: rgba(245, 240, 234, 0.7);
  }

  .nav-links a:hover {
    color: var(--color-text-light);
  }

  .nav-links a:hover::after {
    width: 100%;
    left: 0;
  }

  .nav-menu a:hover {
    color: var(--color-accent);
  }

  .footer__links a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
  }

  .footer__contact-item a:hover {
    color: var(--color-accent);
  }

  .footer__bottom a:hover {
    color: var(--color-accent);
  }

  .page-header__breadcrumb a:hover {
    color: var(--color-text-light);
  }

  .card__cta:hover {
    color: var(--color-accent);
  }

  .therapist-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-light);
  }

  .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .modality-card:hover {
    transform: translateX(4px);
    border-left-color: var(--color-accent);
  }

  .booking-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-light);
  }

  .contact-booking-links a:hover {
    color: var(--color-accent);
  }

  .contact-info-item a:hover {
    color: var(--color-primary);
  }

  .hero__phone:hover {
    color: var(--color-accent);
  }

  .lightbox__close:hover { opacity: 0.7; }
  .lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }

  .gallery-set__nav:hover { background: rgba(0, 0, 0, 0.8); }

  .back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.3);
  }
}


/* --- STICKY MOBILE CTA --- */
.mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(44, 36, 32, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 1.5rem;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-cta__btn {
    flex: 1;
    text-align: center;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background var(--transition-fast);
    letter-spacing: 0.03em;
  }

  .mobile-cta__btn--primary {
    background: var(--color-accent);
    color: var(--color-bg);
  }

  .mobile-cta__btn--secondary {
    background: transparent;
    border: 1px solid rgba(245, 240, 234, 0.4);
    color: var(--color-text-light);
  }

  body {
    padding-bottom: 80px;
  }
}


/* --- RESPONSIVE: TABLET (768px) --- */
@media (min-width: 768px) {
  .section {
    padding: 7rem 3rem;
  }

  /* Nav */
  .nav-logo__tagline {
    display: block;
  }

  /* Trust stats */
  .trust-stats__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .trust-stats {
    padding: 4rem 3rem;
  }

  /* Services preview */
  .services-preview .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Experience split */
  .experience-split {
    flex-direction: row;
    align-items: center;
  }

  .experience-text {
    order: 1;
    flex: 0 0 58%;
  }

  .experience-photo {
    order: 2;
    flex: 0 0 38%;
  }

  /* Therapists grid */
  .therapists-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reviews grid */
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Service detail splits */
  .service-detail__split {
    flex-direction: row;
    align-items: flex-start;
  }

  .service-detail__text {
    order: 2;
    flex: 0 0 58%;
  }

  .service-detail__photo {
    order: 1;
    flex: 0 0 38%;
  }

  .service-detail--reverse .service-detail__text {
    order: 1;
  }

  .service-detail--reverse .service-detail__photo {
    order: 2;
  }

  /* Modalities grid */
  .modalities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Story split */
  .story-split {
    flex-direction: row;
    align-items: flex-start;
  }

  .story-initial {
    margin-top: 0.5rem;
  }

  .story-text {
    flex: 1;
  }

  /* Timeline — alternating */
  .timeline {
    padding-left: 0;
    max-width: 100%;
  }

  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-entry {
    display: flex;
    width: 100%;
    padding-bottom: 4rem;
  }

  .timeline-entry:nth-child(odd) {
    justify-content: flex-start;
    padding-right: calc(50% + 2rem);
    text-align: right;
  }

  .timeline-entry:nth-child(even) {
    justify-content: flex-end;
    padding-left: calc(50% + 2rem);
    text-align: left;
  }

  .timeline-entry__year {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-entry__content {
    padding-left: 0;
  }

  /* Studio grid */
  .studio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Licensed split */
  .licensed-split {
    flex-direction: row;
    align-items: center;
  }

  .licensed-photo {
    flex: 0 0 40%;
  }

  .licensed-text {
    flex: 0 0 55%;
  }

  /* Contact layout */
  .contact-layout {
    flex-direction: row;
  }

  .contact-layout > * {
    flex: 1;
  }

  .contact-map iframe {
    height: 300px;
  }

  /* Booking grid */
  .booking-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Gallery grid */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Form row side-by-side */
  .form-row {
    flex-direction: row;
    gap: 1rem;
  }

  .form-row .form-group {
    flex: 1;
  }
}


/* --- RESPONSIVE: DESKTOP (1024px) --- */
@media (min-width: 1024px) {
  .section {
    padding: var(--section-padding-desktop);
  }

  /* Nav desktop */
  .nav-hamburger {
    display: none;
  }

  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: flex;
  }

  .nav-menu {
    display: none;
  }

  .nav-overlay {
    display: none;
  }

  .site-nav {
    padding: 0 3rem;
  }

  /* Hero */
  .hero {
    padding: 0 4rem 5rem;
  }

  .hero__heading {
    font-weight: 700;
    letter-spacing: 0;
  }

  .hero__phone {
    position: absolute;
    bottom: 3rem;
    left: 4rem;
    z-index: 2;
  }

  .hero__content {
    max-width: 850px;
  }

  /* Trust stats */
  .trust-stats {
    padding: 4.5rem 4rem;
  }

  .trust-stat__number {
    font-size: 3rem;
  }

  /* Services preview */
  .services-preview .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Therapists grid — 3+2 layout */
  .therapists-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Reviews grid */
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .site-footer {
    padding: 5rem 4rem 0;
  }

  /* CTA band */
  .cta-band {
    padding: 8rem 4rem;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  /* Contact map */
  .contact-map iframe {
    height: 300px;
  }

  /* Back to top positioning */
  .back-to-top {
    bottom: 3rem;
    right: 3rem;
  }
}


/* --- RESPONSIVE: LARGE (1400px) --- */
@media (min-width: 1400px) {
  .container,
  .section__inner,
  .content-wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__heading {
    font-size: 4.5rem;
  }

  .hero__subheading {
    font-size: 1.125rem;
  }

  .trust-stat__number {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 3rem;
  }

  .site-nav {
    padding: 0 4rem;
  }
}


/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in, .fade-up,
  .slide-from-left, .slide-left,
  .slide-from-right, .slide-right,
  .scale-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .stagger-in > *, .stagger-list > *, .stagger-grid > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .clip-from-left, .clip-from-right, .clip-reveal {
    clip-path: none !important;
  }

  .card:hover {
    transform: none;
  }

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

  .mobile-cta {
    position: static;
  }
}


/* --- PRINT --- */
@media print {
  .site-nav,
  .site-footer,
  .scroll-indicator,
  .back-to-top,
  .mobile-cta,
  .lightbox,
  .cta-band,
  .review-ticker {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
    padding-bottom: 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h2, h3 {
    page-break-after: avoid;
    color: #000;
  }

  .hero {
    min-height: auto;
    padding: 2rem;
  }

  .hero__overlay {
    display: none;
  }

  .hero__heading {
    color: #000;
    text-shadow: none;
  }

  .page-header {
    min-height: auto;
    padding: 2rem;
  }

  .page-header__overlay {
    display: none;
  }

  .page-header__heading {
    color: #000;
    text-shadow: none;
  }

  .section {
    padding: 2rem 0;
  }

  .testimonial-card,
  .card,
  .therapist-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .trust-stats {
    background: #f5f5f5;
    color: #000;
  }

  .trust-stat__number {
    color: #000;
  }

  .reviews-section {
    background: #f5f5f5;
    color: #000;
  }

  .reviews-section h2,
  .testimonial-text,
  .testimonial-author {
    color: #000;
  }
}


/* ============================================
   BUILD REPORT — CSS Architect
   ============================================

   Missing Inputs:
   - None critical. All D1/D2/D3 files were complete and detailed.

   Assumptions Made:
   1. ScrollSmoother is active — removed scroll-behavior: smooth from html.
   2. Used warm-toned shadows throughout (rgba(44,36,32,X)) per D1 spec.
   3. Therapist cards use centered layout (no photos, initials only) per D2.
   4. Lightbox overlay uses warm dark (rgba(44,36,32,0.95)) instead of pure black per D3.
   5. Timeline desktop layout: alternating left/right with centered timeline line.
   6. Gallery grid on about page uses 1:1 aspect ratio per D3 spec.
   7. Wave divider implemented as clip-path ellipse pseudo-element.
   8. All photos get border-radius + border frame per D1 low-res masking strategy.
   9. Promotion card uses left accent border (gold) per D2 spec.
   10. Mobile CTA always visible (no hide-on-scroll) per D2/D3 spec.

   Self-Score: 9/10
   Complete implementation of all D1/D2/D3 specs. Every section has dedicated
   CSS. Hover effects gated behind @media (hover: hover). Layered shadows
   throughout. Glassmorphism on testimonial cards and hero badge. Animation
   starting states present for all animation classes. What would make it 10:
   more granular responsive fine-tuning at edge breakpoints (iPad Pro landscape,
   ultra-narrow 320px) and testing against real HTML to catch any missed classes.

   Upstream Suggestions:
   - D2 could specify exact gallery-set usage vs. simple grid. Currently
     implemented both patterns (gallery-set + simple studio-grid).
   - Specifying exact wave SVG dimensions/curves would help precision.
   - Including hover state colors explicitly for dark-bg buttons would
     remove one assumption.

   Downstream Notes:
   - html-builder: Use .service-detail--reverse class to flip the split layout
     direction on alternating service detail sections.
   - html-builder: The .section-wave class goes on the section ABOVE the
     divider. Its ::after creates the curve in the color of the section below.
   - html-builder: Trust stats section must NOT have animation classes on the
     section element (.trust-stats). Animate .trust-stats__inner instead.
   - html-builder: .section-angle goes on services-preview for the diagonal
     handoff to the experience section.
   - html-builder: Use .contact-form class on the <form> element for bare
     element fallback styling to work.
   - html-builder: Timeline entries need .timeline-entry with nested
     .timeline-entry__year and .timeline-entry__content.
   - js-engineer: Animation starting states are set in CSS. Use gsap.to() only.
     The 3-second failsafe and ScrollTrigger.refresh() are mandatory.

   Total Lines: 1526
   Sections: 32 major CSS sections
   Media Queries: 7 (768px, 1024px, 1400px, hover:hover, max-width:767px,
                     prefers-reduced-motion, print)
   Custom Properties: 38
   ============================================ */