/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --color-jade: #00896B;
  --color-jade-dark: #006B54;
  --color-jade-light: #1AA882;
  --color-gold: #B8943E;
  --color-gold-light: #D4AF5A;
  --color-gold-dark: #96782E;
  --color-gold-subtle: rgba(184, 148, 62, 0.08);
  --color-bg: #FFFFFF;
  --color-bg-warm: #FAFAF8;
  --color-bg-taupe: #F3F1EE;
  --color-text: #2A2A2A;
  --color-text-light: #6B6B6B;
  --color-text-muted: #999;
  --color-heading: #1A1A1A;
  --color-border: #E8E5E0;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --radius-md: 12px;
  --radius-lg: 20px;
  --max-width: 1200px;
  --nav-height: 72px;
}


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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol { list-style: none; }

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

address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 500; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 500; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 500; }
h4 { font-size: 1rem; font-weight: 600; }

em { font-family: var(--font-display); font-style: italic; font-weight: 400; }

p { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--color-jade);
  outline-offset: 3px;
}


/* ============================================================
   2. CONTAINER & LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 80px 0; }


/* ============================================================
   3. KICKER LABELS
   ============================================================ */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-jade);
  margin-bottom: 12px;
}


/* ============================================================
   4. BUTTON VARIANTS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
  padding: 12px 28px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.btn:active { transform: translateY(1px); }

/* Primary — jade fill */
.btn--primary {
  background: var(--color-jade);
  color: #fff;
  border: 2px solid var(--color-jade);
}
.btn--primary:hover {
  background: var(--color-jade-dark);
  border-color: var(--color-jade-dark);
  box-shadow: 0 4px 16px rgba(0,137,107,0.35);
}

/* Outline base */
.btn--outline {
  background: transparent;
  border: 2px solid currentColor;
}

/* Outline white — over dark hero */
.btn--outline-white {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* Outline dark — over light sections */
.btn--outline-dark {
  color: var(--color-jade);
  border-color: var(--color-jade);
}
.btn--outline-dark:hover {
  background: var(--color-jade);
  color: #fff;
}

/* Nav book — compact pill */
.btn--nav-book {
  background: var(--color-jade);
  color: #fff;
  border: 2px solid var(--color-jade);
  padding: 9px 20px;
  font-size: 0.8rem;
}
.btn--nav-book:hover {
  background: var(--color-jade-dark);
  border-color: var(--color-jade-dark);
}

/* Size modifiers */
.btn--lg { padding: 15px 36px; font-size: 0.9375rem; }
.btn--xl { padding: 18px 52px; font-size: 1rem; }


/* ============================================================
   5. NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Scrolled state */
.nav--scrolled {
  background: var(--color-bg);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* Logo */
.nav__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  transition: opacity 0.2s ease;
}
.nav__logo:hover { opacity: 0.8; }

.nav__logo-main {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  transition: color 0.3s ease;
}
.nav__logo-sub {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  transition: color 0.3s ease;
}

.nav--scrolled .nav__logo-main { color: var(--color-heading); }
.nav--scrolled .nav__logo-sub  { color: var(--color-text-light); }

/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  color: rgba(255,255,255,0.88);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.nav__link--active { color: #fff; font-weight: 600; }

.nav--scrolled .nav__link { color: var(--color-text); }
.nav--scrolled .nav__link:hover { color: var(--color-jade); background: rgba(0,137,107,0.06); }
.nav--scrolled .nav__link--active { color: var(--color-jade); }

/* Hamburger — hidden on desktop */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 8px;
  transition: background 0.2s ease;
}
.nav__toggle:hover { background: rgba(255,255,255,0.12); }
.nav--scrolled .nav__toggle:hover { background: rgba(0,0,0,0.06); }

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  transform-origin: center;
}
.nav--scrolled .nav__toggle span { background: var(--color-heading); }

/* Animate spans to X */
.nav__toggle--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle--active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer — full-screen from right */
.nav__mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  background: var(--color-bg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 32px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
.nav__mobile.is-open { transform: translateX(0); }

.nav__mobile-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 12px 24px;
  border-radius: 10px;
  width: 100%;
  text-align: center;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav__mobile-link:hover { color: var(--color-jade); background: rgba(0,137,107,0.06); }
.nav__mobile-link--active { color: var(--color-jade); font-weight: 600; }

.nav__mobile-cta { margin-top: 16px; width: 100%; }


/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 24px;
  padding-top: var(--nav-height);
}

.hero__content {
  max-width: 780px;
  text-align: center;
}

.hero__kicker {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 16px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.hero__title em { font-family: var(--font-display); font-style: italic; color: #fff; }

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Scroll cue */
.hero__scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero__scroll-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.4);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(0.6); }
}


/* ============================================================
   7. SIGNATURE SERVICES
   ============================================================ */
.signature {
  background: var(--color-bg);
  padding: 100px 0;
}

.signature__header {
  text-align: center;
  margin-bottom: 56px;
}
.signature__heading em { font-family: var(--font-display); font-style: italic; }

.signature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.signature__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.signature__card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

.signature__card-image {
  height: 280px;
  overflow: hidden;
  flex-shrink: 0;
}
.signature__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.signature__card:hover .signature__card-image img { transform: scale(1.04); }

.signature__card-body {
  padding: 28px 28px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.signature__card-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 12px;
}

.signature__card-desc {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}

.signature__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-jade);
  transition: gap 0.2s ease;
}
.signature__card-link:hover { gap: 10px; }

.signature__card-quote {
  margin: 0 28px 28px;
  padding: 12px 16px;
  background: var(--color-bg-warm);
  border-left: 3px solid var(--color-jade);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.signature__card-quote-stars {
  display: block;
  color: #D4A73A;
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.signature__card-quote-text {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--color-text);
}


/* ============================================================
   8. GALLERY
   ============================================================ */
.gallery {
  background: var(--color-bg-warm);
  padding: 100px 0;
}

.gallery__header { margin-bottom: 48px; }
.gallery__header-text { max-width: 480px; }

.gallery__heading { margin-top: 4px; margin-bottom: 10px; }
.gallery__heading em { font-family: var(--font-display); font-style: italic; }

.gallery__subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-light);
}

/* Masonry grid */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}

.gallery__item--tall   { grid-row: span 2; }
.gallery__item--medium { grid-row: span 1; }
.gallery__item--short  { grid-row: span 1; }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg-taupe);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.18); }

.gallery__item-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery__item:hover .gallery__item-caption,
.gallery__item:focus .gallery__item-caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery__cta { text-align: center; margin-top: 48px; }


/* ============================================================
   9. LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  cursor: pointer;
}

.lightbox__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}

.lightbox__img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox__img {
  max-width: min(90vw, 800px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transition: opacity 0.25s ease;
}

.lightbox__caption {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  font-style: italic;
  font-family: var(--font-display);
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255,255,255,0.22);
  transform: scale(1.08);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.lightbox__nav--prev { order: -1; }
.lightbox__nav--next { order: 1; }


/* ============================================================
   10. REVIEWS
   ============================================================ */
.reviews {
  background: var(--color-bg);
  padding: 100px 0;
}

.reviews__header { text-align: center; margin-bottom: 56px; }
.reviews__heading em { font-family: var(--font-display); font-style: italic; }

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.reviews__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-jade);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.reviews__card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.reviews__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviews__card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-jade);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.reviews__card-meta { flex: 1; min-width: 0; }

.reviews__card-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-heading);
  line-height: 1.2;
}

.reviews__card-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.reviews__card-source { flex-shrink: 0; opacity: 0.85; }

.reviews__card-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-jade);
  font-weight: 500;
}

.reviews__card-stars {
  color: #D4A73A;
  font-size: 1rem;
  letter-spacing: 2px;
}

.reviews__card-quote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.65;
  border: none;
  padding: 0;
  margin: 0;
}

.reviews__card-footer { margin-top: auto; }

.reviews__card-service-tag {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-jade);
  background: rgba(0,137,107,0.08);
  border-radius: 100px;
  padding: 4px 12px;
}


/* ============================================================
   11. ABOUT BRIEF
   ============================================================ */
.about-brief {
  background: var(--color-bg-warm);
  padding: 100px 0;
}

.about-brief__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-brief__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  aspect-ratio: 4 / 5;
}
.about-brief__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-brief__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-brief__heading { margin-top: 4px; margin-bottom: 20px; }
.about-brief__heading em { font-family: var(--font-display); font-style: italic; }

.about-brief__body {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 28px;
}


/* ============================================================
   12. CTA FINAL
   ============================================================ */
.cta-final {
  background: var(--color-bg);
  padding: 100px 0;
}

.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-final__content {
  text-align: center;
  max-width: 640px;
}

.cta-final__title { margin-top: 4px; margin-bottom: 16px; }
.cta-final__title em { font-family: var(--font-display); font-style: italic; }

.cta-final__subtitle {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 36px;
  line-height: 1.6;
}

.cta-final__location {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cta-final__location-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-light);
}
.cta-final__location-line svg { flex-shrink: 0; color: var(--color-jade); }

.cta-final__phone {
  color: var(--color-jade);
  font-weight: 500;
  transition: color 0.2s ease;
}
.cta-final__phone:hover { color: var(--color-jade-dark); }


/* ============================================================
   13. FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg-taupe);
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 48px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px 48px;
}

.footer__logo {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.footer__logo span { color: var(--color-jade); }
.footer__logo:hover { color: var(--color-jade); }

.footer__brand-tagline {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 280px;
}

.footer__social { display: flex; gap: 12px; }

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.footer__social-link:hover {
  color: var(--color-jade);
  background: rgba(0,137,107,0.06);
  border-color: var(--color-jade);
}

.footer__nav {
  display: flex;
  flex-direction: column;
}

.footer__nav-heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 16px;
}

.footer__nav-link {
  font-size: 0.875rem;
  color: var(--color-text-light);
  padding: 5px 0;
  transition: color 0.2s ease;
  display: block;
}
.footer__nav-link:hover { color: var(--color-jade); }

.footer__nav-link--highlight {
  color: var(--color-jade);
  font-weight: 600;
}
.footer__nav-link--highlight:hover { color: var(--color-jade-dark); }

.footer__contact { display: flex; flex-direction: column; }

.footer__address {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-top: 8px;
}

.footer__address-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-style: italic;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid var(--color-border);
}

.footer__bottom-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}


/* ============================================================
   14. SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.reveal-left--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children start hidden, appear when parent gets .stagger--visible */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger.stagger--visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger > *:nth-child(1)  { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 100ms; }
.stagger > *:nth-child(3)  { transition-delay: 200ms; }
.stagger > *:nth-child(4)  { transition-delay: 300ms; }
.stagger > *:nth-child(5)  { transition-delay: 400ms; }
.stagger > *:nth-child(6)  { transition-delay: 500ms; }
.stagger > *:nth-child(7)  { transition-delay: 600ms; }
.stagger > *:nth-child(8)  { transition-delay: 700ms; }
.stagger > *:nth-child(9)  { transition-delay: 800ms; }
.stagger > *:nth-child(10) { transition-delay: 900ms; }
.stagger > *:nth-child(11) { transition-delay: 1000ms; }
.stagger > *:nth-child(12) { transition-delay: 1100ms; }


/* ============================================================
   15. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet & mobile: max 768px --- */
@media (max-width: 768px) {

  section { padding: 64px 0; }

  /* Nav */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  /* Hero */
  .hero__title { font-size: clamp(2.4rem, 8vw, 3.2rem); }
  .hero__actions { flex-direction: column; gap: 12px; }
  .hero__actions .btn { width: 100%; max-width: 300px; }

  /* Signature — single column */
  .signature__grid { grid-template-columns: 1fr; }

  /* Gallery — 2 columns */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 8px;
  }

  /* Reviews — single column */
  .reviews__grid { grid-template-columns: 1fr; }

  /* About brief — stack */
  .about-brief__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-brief__image {
    aspect-ratio: 3 / 2;
    max-height: 320px;
  }

  /* Footer — stack */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 24px 36px;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
  .container { padding: 0 40px; }
  .footer__inner { padding: 72px 40px 56px; }
  .signature__card-image { height: 320px; }
}

/* --- Large screens: 1200px+ --- */
@media (min-width: 1200px) {
  .container { padding: 0 24px; }
}


/* ============================================================
   16. ABOUT PAGE
   ============================================================ */

/* --- Page Header Banner ---
   Jade-to-dark gradient banner. White text throughout.
   Top padding accounts for the fixed nav height.
   The watermark is a ghost oversized word that adds depth.
   ----------------------------------------------------------- */
.about-page__header {
  position: relative;
  background: linear-gradient(135deg, var(--color-jade-dark) 0%, var(--color-jade) 50%, #007a5e 100%);
  padding-top: calc(var(--nav-height) + 72px);
  padding-bottom: 80px;
  overflow: hidden;
  /* Tells the fixed nav to apply its scrolled styles immediately on this page
     because the header is not a dark photo — we handle this via a body class
     added inline in main.js, or simply accept the transparent-on-load state. */
}

.about-page__header-inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow row: decorative line + small all-caps label */
.about-page__header-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.about-page__header-line {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.about-page__header-eyebrow-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

.about-page__header-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* The <em> in the title inherits white from the parent */
.about-page__header-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: #fff;
}

.about-page__header-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  max-width: 480px;
  line-height: 1.6;
}

/* Oversized ghost watermark — bottom right, adds editorial texture */
.about-page__header-watermark {
  position: absolute;
  right: -20px;
  bottom: -24px;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(255,255,255,0.07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: -0.02em;
}


/* --- Story Section ---
   White background. Two-column asymmetric layout.
   Image col: portrait + floating credential card + dot cluster.
   Text col: offset slightly down from image top for visual rhythm.
   ----------------------------------------------------------- */
.about-page__story {
  background: var(--color-bg);
}

.about-page__story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

/* Image column */
.about-page__story-image-col {
  position: relative;
}

/* Portrait frame — aspect ratio lock, rounded corners, layered shadow */
.about-page__story-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Layered shadows: soft ambient + mid-range lift */
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 12px 40px rgba(0,0,0,0.1),
    0 32px 80px rgba(0,0,0,0.08);
  aspect-ratio: 4 / 5;
}

.about-page__story-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.about-page__story-image-col:hover .about-page__story-frame img {
  transform: scale(1.03);
}

/* Floating credential card — positioned over the bottom-left of the portrait */
.about-page__credential {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  /* Jade top border: the "licensed" green strip */
  border-top: 3px solid var(--color-jade);
  z-index: 2;
}

.about-page__credential-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-jade);
}

.about-page__credential-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.2;
}

.about-page__credential-divider {
  width: 32px;
  height: 1px;
  background: var(--color-border);
  margin: 2px 0;
}

.about-page__credential-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.775rem;
  color: var(--color-text-light);
}

.about-page__credential-location svg {
  flex-shrink: 0;
  color: var(--color-jade);
}

/* Decorative 3x3 dot cluster — editorial flair, top-right of image col */
.about-page__dot-cluster {
  position: absolute;
  top: -16px;
  right: -20px;
  display: grid;
  grid-template-columns: repeat(3, 8px);
  grid-template-rows: repeat(3, 8px);
  gap: 6px;
  z-index: 0;
}

.about-page__dot-cluster span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-jade);
  opacity: 0.25;
}

/* Text column */
.about-page__story-text-col {
  /* Offset downward from image's top edge for asymmetric feel */
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-page__story-heading {
  margin-top: 4px;
  margin-bottom: 24px;
  font-family: var(--font-heading);
  line-height: 1.15;
}

.about-page__story-heading em {
  font-family: var(--font-display);
  font-style: italic;
}

.about-page__story-body {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 500px;
}

/* Specialty tag pills */
.about-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 32px;
}

.about-page__tag {
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-jade);
  background: rgba(0,137,107,0.08);
  border: 1px solid rgba(0,137,107,0.2);
  border-radius: 100px;
  padding: 5px 14px;
  transition: background 0.2s ease, color 0.2s ease;
}

.about-page__tag:hover {
  background: var(--color-jade);
  color: #fff;
}


/* --- Jaide Difference Section ---
   Warm background — alternates from the white story section.
   3-column card grid: white cards, jade top accent, ghost number.
   ----------------------------------------------------------- */
.about-page__difference {
  background: var(--color-bg-warm);
}

.about-page__difference-header {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 56px;
}

.about-page__difference-title {
  margin-top: 4px;
  margin-bottom: 12px;
}

.about-page__difference-title em {
  font-family: var(--font-display);
  font-style: italic;
}

.about-page__difference-intro {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* 3-column card grid */
.about-page__difference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Individual difference card */
.about-page__diff-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  padding-top: 4px; /* space for the accent bar */
}

.about-page__diff-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

/* Jade accent bar — top border effect using a pseudo-element approach via a div */
.about-page__diff-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-jade);
  /* Starts subtly visible, brightens on hover */
  opacity: 0.45;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.about-page__diff-card:hover .about-page__diff-card-accent {
  opacity: 1;
}

/* Ghost number — large italic Cormorant behind card content */
.about-page__diff-card-number {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-jade);
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

.about-page__diff-card:hover .about-page__diff-card-number {
  opacity: 0.12;
}

/* Card body: icon + title + desc */
.about-page__diff-card-body {
  padding: 32px 28px 28px;
  position: relative;
  z-index: 1;
}

/* Icon wrapper — jade-tinted circle background */
.about-page__diff-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0,137,107,0.08);
  color: var(--color-jade);
  margin-bottom: 20px;
  transition: background 0.3s ease;
}

.about-page__diff-card:hover .about-page__diff-card-icon {
  background: rgba(0,137,107,0.14);
}

.about-page__diff-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 12px;
}

.about-page__diff-card-desc {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  line-height: 1.7;
}


/* --- Gallery Section ---
   White background — alternates back from warm.
   6-item CSS grid: 3 cols desktop, 2 mobile, varied row heights.
   Reuses .gallery__item-caption from the main gallery styles.
   ----------------------------------------------------------- */
.about-page__gallery {
  background: var(--color-bg);
}

.about-page__gallery-header {
  max-width: 480px;
  margin-bottom: 48px;
}

.about-page__gallery-title {
  margin-top: 4px;
  margin-bottom: 10px;
}

.about-page__gallery-title em {
  font-family: var(--font-display);
  font-style: italic;
}

.about-page__gallery-intro {
  font-size: 0.9375rem;
  color: var(--color-text-light);
}

/* Grid layout — uniform masonry grid for portfolio */
.about-page__gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 10px;
}

/* Row-span modifiers */
.about-page__gallery-item--tall  { grid-row: span 2; }
.about-page__gallery-item--short { grid-row: span 1; }

/* Gallery item styling — uniform crop with object-fit cover */
.about-page__gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg-taupe);
  /* Ensure every item fills its grid cell completely */
  min-height: 0;
}

.about-page__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Center the crop on the middle of the image (where nails usually are) */
  object-position: center center;
  transition: transform 0.4s ease;
  display: block;
}

@media (max-width: 768px) {
  .about-page__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 8px;
  }
}

.about-page__gallery-item:hover img { transform: scale(1.06); }

.about-page__gallery-item:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}

/* Caption reuses .gallery__item-caption from section 8 styles.
   No need to duplicate — the class is already defined above. */


/* --- CTA Section ---
   Warm background — closes the page.
   Two-column on desktop: text left, photo cluster right.
   ----------------------------------------------------------- */
.about-page__cta {
  background: var(--color-bg-warm);
}

.about-page__cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}

.about-page__cta-content {
  max-width: 520px;
}

.about-page__cta-title {
  margin-top: 4px;
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.about-page__cta-title em {
  font-family: var(--font-display);
  font-style: italic;
}

.about-page__cta-body {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 28px;
}

.about-page__cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.about-page__cta-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-top: 4px;
}

.about-page__cta-location svg {
  flex-shrink: 0;
  color: var(--color-jade);
}

/* Photo cluster — three overlapping rotated images, desktop only */
.about-page__cta-photos {
  position: relative;
  width: 280px;
  height: 320px;
  flex-shrink: 0;
}

.about-page__cta-photo {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  border: 3px solid #fff;
}

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

/* Photo 1 — back layer, slight left tilt */
.about-page__cta-photo--1 {
  width: 160px;
  height: 200px;
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  z-index: 1;
}

/* Photo 2 — middle layer, front and center, slight right tilt */
.about-page__cta-photo--2 {
  width: 150px;
  height: 190px;
  top: 40px;
  left: 70px;
  transform: rotate(3deg);
  z-index: 2;
}

/* Photo 3 — front layer, bottom-right, slight left tilt */
.about-page__cta-photo--3 {
  width: 140px;
  height: 175px;
  top: 100px;
  left: 130px;
  transform: rotate(-2deg);
  z-index: 3;
}


/* ============================================================
   17. ABOUT PAGE — RESPONSIVE OVERRIDES
   ============================================================ */

/* --- Tablet & mobile: max 768px --- */
@media (max-width: 768px) {

  /* Header */
  .about-page__header {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 56px;
  }
  .about-page__header-watermark { display: none; }

  /* Story — stack to single column */
  .about-page__story-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* Shrink the credential card so it doesn't overflow on mobile */
  .about-page__credential {
    left: 12px;
    bottom: 12px;
    min-width: 180px;
    padding: 14px 18px;
  }

  /* Text col: no top offset on mobile — stacks naturally */
  .about-page__story-text-col { padding-top: 0; }

  /* Difference — single column */
  .about-page__difference-grid { grid-template-columns: 1fr; }

  /* Gallery — 2 columns */
  .about-page__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 8px;
  }

  /* CTA — stack to single column, hide photo cluster */
  .about-page__cta-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .about-page__cta-photos { display: none; }
  .about-page__cta-content { max-width: 100%; }
  .about-page__cta-actions { flex-direction: column; }
  .about-page__cta-actions .btn { width: 100%; max-width: 300px; }
}

/* --- Intermediate: 769px – 1023px --- */
@media (min-width: 769px) and (max-width: 1023px) {

  /* Story — tighter gap on smaller desktop */
  .about-page__story-layout { gap: 48px; }

  /* Difference — keep 3 cols but tighten */
  .about-page__difference-grid { gap: 16px; }
}


/* ============================================================
   18. PREFERS 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;
  }

  .reveal,
  .reveal-left {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__scroll-line { animation: none; }
}


/* ============================================================
   19. SERVICES PAGE
   All components scoped under .services-page__* to prevent
   any style leakage onto index.html or other pages.
   ============================================================ */

/* --- Page Header Banner ---
   Dark jade background with white editorial text.
   Sits immediately below the fixed nav — top padding accounts
   for the nav height so content never hides behind it.
   The nav starts transparent here (white logo/links visible),
   then transitions to the white scrolled state as the user
   scrolls past this banner.
   ---------------------------------------------------------------- */
.services-page__header {
  background: linear-gradient(135deg, var(--color-jade-dark) 0%, var(--color-jade) 50%, #007a5e 100%);
  padding: calc(var(--nav-height) + 64px) 0 80px;
  position: relative;
  overflow: hidden;
}

.services-page__header-inner {
  /* Inherit the standard .container max-width and horizontal padding,
     but center the text block and cap it narrower for readability */
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Kicker label — white uppercase, reduced opacity so it reads
   as supporting context rather than competing with the title */
.services-page__header-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

/* Main H1 — Cormorant Garamond display face, full white */
.services-page__header-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* Italic em inside the heading stays white — no color shift */
.services-page__header-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: #fff;
}

/* Supporting body text — lighter opacity for visual hierarchy */
.services-page__header-body {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto;
}


/* --- Category Sections ---
   Alternating white / warm backgrounds create visual rhythm
   without needing borders or cards between sections.
   Each section holds a header block + list of service rows.
   ---------------------------------------------------------------- */
.services-page__category {
  padding: 80px 0;
}

.services-page__category--white {
  background: var(--color-bg);
}

.services-page__category--warm {
  background: var(--color-bg-warm);
}

/* Category header — left-aligned, max-width caps the description
   so long text doesn't stretch uncomfortably on wide screens */
.services-page__category-header {
  max-width: 640px;
  margin-bottom: 40px;
}

/* The .kicker class is already defined in section 3 above.
   We reuse it here — no duplication needed. */

.services-page__category-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--color-heading);
  margin-top: 4px;
  margin-bottom: 12px;
  line-height: 1.2;
}

.services-page__category-desc {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  line-height: 1.65;
}

/* Sub-heading — separates logical groups within one category
   (e.g. "Manicures" and "Pedicures" inside the Nails section).
   Styled like a mini-kicker to keep it quiet but clear. */
.services-page__sub-heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 12px;
  /* Add vertical space above (except when it's the first list) */
  margin-top: 40px;
}


/* --- Service List ---
   A plain <ul> reset with a thin top border that acts as
   the visual "opening" of the list.
   ---------------------------------------------------------------- */
.services-page__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}


/* --- Service Item Row ---
   Flexbox row: name/notes on the left, duration + price + arrow
   on the right. The entire <li> is interactive (role="link").
   ---------------------------------------------------------------- */
.services-page__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 12px 18px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  border-radius: 6px;
  /* Two properties animated: left padding slide-in + background tint */
  transition: background 0.18s ease, padding-left 0.18s ease;
}

.services-page__item:hover {
  background: rgba(0, 137, 107, 0.04);
  padding-left: 12px;
}

.services-page__item:focus-visible {
  outline: 2px solid var(--color-jade);
  outline-offset: 2px;
}

/* Left side: name + optional badge + optional note */
.services-page__item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* critical — allows text to shrink below its natural width */
}

.services-page__item-name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.3;
}

/* Italic note below the service name — e.g. "solid color", "no polish" */
.services-page__item-note {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Badge pill — "Signature", "Most Popular", "Best Value", etc.
   Jade background tint with a jade border — reads as a positive
   indicator without overwhelming the service name. */
.services-page__item-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-jade);
  background: rgba(0, 137, 107, 0.09);
  border: 1px solid rgba(0, 137, 107, 0.22);
  border-radius: 100px;
  padding: 3px 10px;
  /* align-self so badge doesn't stretch full column width */
  align-self: flex-start;
}

/* Right side: duration + price + animated arrow */
.services-page__item-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.services-page__item-duration {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Price — Playfair Display in jade for the key number. Gives the
   menu a restaurant-menu feel: elegant, scannable, clear. */
.services-page__item-price {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-jade);
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

/* Arrow — invisible by default, slides in on row hover.
   This cues the user that the row is clickable without
   being visually noisy at rest. */
.services-page__item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-jade);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.services-page__item:hover .services-page__item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Featured item modifier — jade left accent border.
   Used for "Signature", "Most Popular", "Best Value" rows.
   The border-left is set before padding-left so the hover
   state doesn't shift the accent. */
.services-page__item--featured {
  border-left: 3px solid var(--color-jade);
  padding-left: 14px;
  /* Override the base hover so left padding stays fixed */
  transition: background 0.18s ease;
}

.services-page__item--featured:hover {
  background: rgba(0, 137, 107, 0.04);
  padding-left: 14px;
}

/* Featured items get a slightly deeper heading color to reinforce
   their elevated status in the list */
.services-page__item--featured .services-page__item-name {
  color: var(--color-jade-dark);
}


/* --- Book Now CTA Section ---
   Dark jade band that visually mirrors the page header — creating
   a bookend effect that frames all the white/warm service sections.
   ---------------------------------------------------------------- */
.services-page__cta {
  background: var(--color-jade-dark);
  padding: 80px 0;
}

/* Two-column flex layout: editorial text left, actions right.
   Wraps gracefully on mobile. */
.services-page__cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.services-page__cta-text {
  flex: 1;
  min-width: 260px;
}

/* Small kicker above the CTA heading — white and very quiet */
.services-page__cta-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}

/* CTA heading — large display text in white */
.services-page__cta-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
}

.services-page__cta-heading em {
  font-family: var(--font-display);
  font-style: italic;
  color: #fff;
}

.services-page__cta-body {
  font-size: 0.9375rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

/* Actions column — button stacked above phone link */
.services-page__cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex-shrink: 0;
}

/* Phone link — styled as quiet secondary text.
   Gives people who prefer calling an obvious option. */
.services-page__cta-phone {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.services-page__cta-phone:hover {
  color: #fff;
}


/* --- Services Page Responsive Overrides ---
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Tighten the header on mobile */
  .services-page__header {
    padding: calc(var(--nav-height) + 48px) 0 60px;
  }

  /* Reduce section vertical spacing slightly on mobile */
  .services-page__category {
    padding: 56px 0;
  }

  /* Hide duration on mobile — the price is the primary signal,
     and the row gets crowded on narrow viewports */
  .services-page__item-duration {
    display: none;
  }

  .services-page__item-meta {
    gap: 12px;
  }

  .services-page__item-name {
    font-size: 0.9375rem;
  }

  /* CTA — stack text above actions on mobile */
  .services-page__cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* Make the Book Now button full-width on mobile */
  .services-page__cta-actions {
    width: 100%;
    align-items: stretch;
  }

  .services-page__cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .services-page__cta-phone {
    text-align: center;
  }

}


/* ============================================================
   LUXURY ANIMATIONS & ARTISTIC EFFECTS
   Anti-gravity floating, gold accents, Framer-style motion,
   text reveals, cursor effects, and micro-interactions.
   ============================================================ */

/* --- Anti-Gravity Float Keyframes --- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(0.5deg); }
  75% { transform: translateY(-6px) rotate(-0.3deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(0.8deg); }
}

@keyframes float-reverse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 148, 62, 0.3); }
  50% { box-shadow: 0 0 24px 4px rgba(184, 148, 62, 0.15); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes text-reveal {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes fade-up-spring {
  0% { opacity: 0; transform: translateY(40px) scale(0.97); }
  60% { transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes line-draw {
  0% { width: 0; }
  100% { width: 60px; }
}

/* --- Anti-Gravity Floating Elements --- */
.float { animation: float 6s ease-in-out infinite; }
.float--slow { animation: float-slow 8s ease-in-out infinite; }
.float--reverse { animation: float-reverse 5s ease-in-out infinite; }
.float--delay-1 { animation-delay: 0.5s; }
.float--delay-2 { animation-delay: 1.2s; }
.float--delay-3 { animation-delay: 2s; }

/* --- Gold Accent System --- */
.gold-accent { color: var(--color-gold); }
.gold-accent-light { color: var(--color-gold-light); }

.gold-line {
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
  margin: 16px 0;
  animation: line-draw 1s ease-out forwards;
}

.gold-line--center { margin: 16px auto; }

/* Gold shimmer text effect */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-gold-dark) 0%,
    var(--color-gold-light) 25%,
    var(--color-gold) 50%,
    var(--color-gold-light) 75%,
    var(--color-gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Gold border glow on hover */
.gold-glow {
  transition: box-shadow 0.4s ease;
}
.gold-glow:hover {
  box-shadow: 0 4px 24px rgba(184, 148, 62, 0.2), 0 0 0 1px rgba(184, 148, 62, 0.15);
}

/* --- Framer-Style Smooth Motion --- */
.motion-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

.motion-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-scale.in-view {
  opacity: 1;
  transform: scale(1);
}

.motion-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
}
.motion-blur.in-view {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger delays for Framer-style cascades */
.motion-delay-1 { transition-delay: 100ms; }
.motion-delay-2 { transition-delay: 200ms; }
.motion-delay-3 { transition-delay: 300ms; }
.motion-delay-4 { transition-delay: 400ms; }
.motion-delay-5 { transition-delay: 500ms; }
.motion-delay-6 { transition-delay: 600ms; }

/* --- Text Split Reveal --- */
.text-reveal-line {
  overflow: hidden;
}
.text-reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.text-reveal-line.in-view > span {
  transform: translateY(0);
}

/* --- Magnetic Hover (cards pull toward cursor) --- */
.magnetic-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Parallax Depth Layers --- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --- Image Hover Effects --- */
.img-hover-zoom {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.img-hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.img-hover-zoom:hover img {
  transform: scale(1.08);
}

.img-hover-reveal {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.img-hover-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184, 148, 62, 0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.img-hover-reveal:hover::after {
  opacity: 1;
}

/* --- Cursor Spotlight Effect --- */
.cursor-spotlight {
  position: relative;
  overflow: hidden;
}
.cursor-spotlight::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 62, 0.08) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(var(--cursor-x, -150px), var(--cursor-y, -150px));
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 1;
}
.cursor-spotlight:hover::before {
  opacity: 1;
}

/* --- Luxury Card Treatment --- */
.luxury-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}
.luxury-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(184, 148, 62, 0.12);
  border-color: rgba(184, 148, 62, 0.25);
}

/* --- Animated Gold Divider --- */
.divider-gold {
  position: relative;
  text-align: center;
  margin: 48px 0;
}
.divider-gold::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.divider-gold::after {
  content: '\2726';
  position: relative;
  display: inline-block;
  padding: 0 16px;
  background: var(--color-bg);
  color: var(--color-gold);
  font-size: 14px;
  z-index: 1;
}

/* --- Glassmorphism Card --- */
.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* --- Button Gold Variant --- */
.btn--gold {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  background-size: 200% 200%;
  color: #fff;
  border: none;
  animation: gradient-shift 4s ease infinite;
  box-shadow: 0 4px 16px rgba(184, 148, 62, 0.25);
}
.btn--gold:hover {
  box-shadow: 0 6px 24px rgba(184, 148, 62, 0.35);
  transform: translateY(-2px);
}

/* --- Enhanced Gallery Item Hover --- */
.gallery__item {
  position: relative;
}
.gallery__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
}
.gallery__item:hover::before {
  opacity: 1;
}

/* --- Gold Star Rating Enhancement --- */
.reviews__card-stars span {
  color: var(--color-gold);
  font-size: 1.1rem;
  letter-spacing: 2px;
}

/* --- Signature Card Quote Gold Stars --- */
.signature__card-quote-stars {
  color: var(--color-gold);
  font-size: 0.85rem;
  letter-spacing: 2px;
}

/* --- Kicker Gold Variant --- */
.kicker--gold {
  color: var(--color-gold);
}

/* --- Hero Enhanced --- */
.hero__kicker {
  animation: fade-up-spring 0.8s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}
.hero__title {
  animation: fade-up-spring 0.8s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
}
.hero__subtitle {
  animation: fade-up-spring 0.8s ease forwards;
  animation-delay: 0.7s;
  opacity: 0;
}
.hero__actions {
  animation: fade-up-spring 0.8s ease forwards;
  animation-delay: 0.9s;
  opacity: 0;
}

/* --- Section Heading Gold Accent Line --- */
.section-heading-accent::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  margin-top: 16px;
}
.section-heading-accent--center::after {
  margin-left: auto;
  margin-right: auto;
}

/* --- Smooth Page Transitions --- */
body {
  animation: fade-up-spring 0.6s ease forwards;
}

/* --- Nav Gold Book Button Variant --- */
.btn--nav-book {
  background: linear-gradient(135deg, var(--color-jade), var(--color-jade-light));
  position: relative;
  overflow: hidden;
}
.btn--nav-book::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}
.btn--nav-book:hover::after {
  transform: rotate(45deg) translateX(100%);
}

/* --- Footer Gold Accents --- */
.footer__nav-heading {
  color: var(--color-heading);
  position: relative;
  padding-bottom: 8px;
}
.footer__nav-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--color-gold);
}



/* ============================================================
   REACTBITS-INSPIRED EFFECTS
   Frosted glass, marquee ticker, sparkles, blob morphing,
   text blur reveal, and enhanced transitions.
   ============================================================ */

/* --- Frosted Glass Navigation --- */
.nav {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: rgba(0, 137, 107, 0.08);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.06);
}

/* --- Infinite Marquee Ticker --- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-warm);
}
.marquee__track {
  display: inline-flex;
  animation: marquee-scroll 30s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}
.marquee__item::after {
  content: '\2726';
  color: var(--color-gold);
  font-size: 0.7rem;
  opacity: 0.6;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Sparkle Particles --- */
.sparkle-container {
  position: relative;
  display: inline-block;
}
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 10;
}
.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: var(--color-gold);
  border-radius: 1px;
}
.sparkle::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sparkle::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* --- Morphing Blob Background --- */
.blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  animation: blob-morph 12s ease-in-out infinite;
}
.blob--jade {
  background: var(--color-jade);
}
.blob--gold {
  background: var(--color-gold);
}
.blob--1 {
  width: 500px;
  height: 500px;
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}
.blob--2 {
  width: 400px;
  height: 400px;
  bottom: -5%;
  left: -8%;
  animation-delay: -4s;
}
.blob--3 {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 30%;
  animation-delay: -8s;
}
@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; transform: rotate(45deg) scale(1.05); }
  66% { border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%; transform: rotate(-30deg) scale(0.95); }
}

/* --- Text Blur Reveal --- */
.blur-reveal span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}
.blur-reveal.in-view span {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* --- Letter Scramble (styled state) --- */
.scramble-text {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

/* --- Enhanced Signature Cards with Depth Layers --- */
.signature__card {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1200px;
}
.signature__card-body {
  transform: translateZ(20px);
}
.signature__card-quote {
  transform: translateZ(40px);
}

/* --- Gold Accent on Section Kickers --- */
.kicker--gold::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-gold);
  vertical-align: middle;
  margin-right: 8px;
}

/* --- Enhanced Gallery Hover with Gold Accent --- */
.gallery__item:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(184, 148, 62, 0.15);
}

/* --- Review Card Gold Left Border --- */
.reviews__card {
  border-left: 4px solid var(--color-gold) !important;
}

/* --- About Brief Portrait Float Animation --- */
.about-brief__image {
  animation: float-slow 8s ease-in-out infinite;
}

/* --- CTA Section Blob Background --- */
.cta-final {
  position: relative;
  overflow: hidden;
}

/* --- Smooth Scroll Behavior --- */
html {
  scroll-behavior: smooth;
}


/* ============================================================
   3D ROTATING PHOTO CAROUSEL

   A cylindrical ring of photo cards arranged in true 3D space.
   The ring auto-rotates slowly (1 revolution per 40 seconds),
   pauses on hover, and responds to mouse drag and touch swipe.

   Architecture:
     .carousel-3d               — outer section, provides perspective
     .carousel-3d__scene        — centers the ring and clips overflow
     .carousel-3d__ring         — the element that physically rotates
                                  (transform-style: preserve-3d)
     .carousel-3d__card         — individual photo card in 3D space
     .carousel-3d__card img     — the nail art photo inside each card
     .carousel-3d__controls     — prev / next button pair

   The ring's rotation is driven entirely by JS (requestAnimationFrame),
   which writes a single CSS transform to .carousel-3d__ring.
   Each card is pre-positioned by JS at startup:
     rotateY(angle * index) translateZ(radius)

   The "front-facing" card effect is achieved with CSS — cards that
   have been tagged .carousel-3d__card--active by JS get a gold glow
   and slight scale-up. All other cards are subtly dimmed.
   ============================================================ */

/* --- Keyframe for ring entry animation --- */
@keyframes carousel-3d-reveal {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Outer container ---
   Sets up the CSS perspective so all child 3D transforms
   render with realistic depth. overflow: hidden clips the
   cards that rotate to the back of the ring. */
.carousel-3d {
  --carousel-radius: 400px;     /* translateZ distance — desktop */
  --carousel-card-width: 280px; /* card width — desktop */
  --carousel-card-height: 340px;/* card height — desktop */

  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
  background: var(--color-bg-warm);
}

/* --- Controls label / heading area --- */
.carousel-3d__header {
  text-align: center;
  margin-bottom: 48px;
}

.carousel-3d__header .kicker {
  margin-bottom: 12px;
}

.carousel-3d__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--color-heading);
}

/* --- Scene ---
   The fixed-height stage. perspective is set here so the
   vanishing point is relative to this element, not the
   viewport. A large perspective value (1200px) gives a
   natural depth of field without extreme distortion. */
.carousel-3d__scene {
  position: relative;
  height: calc(var(--carousel-card-height) + 80px);
  perspective: 1200px;
  perspective-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Ring ---
   The single element JS rotates. transform-style: preserve-3d
   is essential — without it the child card transforms collapse
   into the flat plane of the ring. */
.carousel-3d__ring {
  position: relative;
  width: var(--carousel-card-width);
  height: var(--carousel-card-height);
  transform-style: preserve-3d;
  /* JS writes: transform: rotateY(Xdeg) — nothing else */
  cursor: grab;
  animation: carousel-3d-reveal 0.8s ease forwards;
}

.carousel-3d__ring:active {
  cursor: grabbing;
}

/* --- Individual card ---
   Each card is absolutely positioned at the ring's center,
   then JS applies rotateY(angle) translateZ(radius) to push
   it out to its position on the cylinder.

   Why position: absolute?
   All cards share the same origin point (center of ring).
   JS then fans them out in 3D space. If they were in normal
   flow they would stack horizontally and break the ring. */
.carousel-3d__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--carousel-card-width);
  height: var(--carousel-card-height);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.06);

  /* Smooth opacity / scale transitions as cards cycle past front */
  transition:
    box-shadow 0.4s ease,
    opacity 0.4s ease;

  /* Dim cards that aren't facing front — JS adds --active to the
     nearest card, CSS controls the visual state */
  opacity: 0.55;
  filter: saturate(0.7) brightness(0.9);
  backface-visibility: hidden; /* prevents ghost bleed-through on back */
  -webkit-backface-visibility: hidden;
}

/* Front-facing card — JS adds this class to the nearest card */
.carousel-3d__card--active {
  opacity: 1;
  filter: saturate(1) brightness(1);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.18),
    0 0 0 2px var(--color-gold),           /* gold border ring */
    0 0 24px 4px rgba(184, 148, 62, 0.22); /* gold glow aura */
}

/* Card image — fills the card completely, cover crop */
.carousel-3d__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none; /* prevent drag selecting images */
  transition: transform 0.5s ease;
}

/* Subtle zoom on the active card's image for extra premium feel */
.carousel-3d__card--active img {
  transform: scale(1.04);
}

/* --- Overlay label on each card ---
   A soft gradient at the bottom where the card label lives. */
.carousel-3d__card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    transparent 100%
  );
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-3d__card--active .carousel-3d__card-label {
  opacity: 1;
  transform: translateY(0);
}

/* --- Controls (prev / next buttons) --- */
.carousel-3d__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.carousel-3d__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  flex-shrink: 0;
}

.carousel-3d__btn:hover {
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
  color: var(--color-gold-dark);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(184, 148, 62, 0.18);
}

.carousel-3d__btn:active {
  transform: scale(0.96);
}

.carousel-3d__btn:focus-visible {
  outline: 2px solid var(--color-jade);
  outline-offset: 3px;
}

/* SVG arrow icons inside the buttons */
.carousel-3d__btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* --- Dot indicators ---
   Tiny dot row below the controls showing position in the ring */
.carousel-3d__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.carousel-3d__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.carousel-3d__dot--active {
  background: var(--color-gold);
  transform: scale(1.5);
}

/* --- Drag hint ---
   Small italic text reminding users they can spin the carousel */
.carousel-3d__hint {
  text-align: center;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  opacity: 0.8;
}

/* --- Reduced motion — flatten to a plain horizontal scroll ---
   When prefers-reduced-motion is set, we disable the 3D ring
   entirely and render the cards as a simple scrollable row. */
@media (prefers-reduced-motion: reduce) {
  .carousel-3d__ring {
    /* Override JS-applied preserve-3d with a flat flexbox */
    transform-style: flat !important;
    transform: none !important;
    display: flex;
    gap: 16px;
    width: auto;
    height: auto;
    animation: none;
    cursor: default;
  }

  .carousel-3d__scene {
    overflow-x: auto;
    height: auto;
    padding: 16px 24px;
    perspective: none;
    justify-content: flex-start;
    /* Custom scrollbar — thin and on-brand */
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-border);
  }

  .carousel-3d__card {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
    opacity: 1;
    filter: none;
    transform: none !important;
  }

  .carousel-3d__card--active {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  }
}

/* --- Mobile responsive overrides ---
   Smaller radius and card size on narrow viewports.
   The JS reads --carousel-radius from the computed style,
   so changing the CSS custom property here is enough —
   no JS condition needed. */
@media (max-width: 640px) {
  .carousel-3d {
    --carousel-radius: 250px;
    --carousel-card-width: 200px;
    --carousel-card-height: 260px;
  }

  .carousel-3d__scene {
    perspective: 800px;
  }

  .carousel-3d__btn {
    width: 42px;
    height: 42px;
  }

  .carousel-3d__hint {
    font-size: 0.75rem;
  }
}

/* Tablet mid-range — slightly reduced radius */
@media (min-width: 641px) and (max-width: 1024px) {
  .carousel-3d {
    --carousel-radius: 320px;
    --carousel-card-width: 240px;
    --carousel-card-height: 300px;
  }
}


/* ============================================================
   CONTACT PAGE
   White-theme rebuild. Gold/jade gradient header, frosted glass
   info card, Square booking iframe column, full-width map, and
   a warm "Prefer to Call?" CTA section.
   ============================================================ */


/* --- Kicker light variant (white text, used on dark/gradient backgrounds) --- */
.kicker--light {
  color: rgba(255, 255, 255, 0.85);
}


/* ------------------------------------------------------------------
   PAGE HEADER
   Gold-to-jade gradient that distinguishes this page from the
   pure-jade about.html header. Three decorative layers:
     1. Two animated blobs (organic shapes, low opacity)
     2. Oversized ghost watermark word (right-anchored)
     3. Eyebrow line + allcaps location label above the h1
   Top padding accounts for the fixed nav height (--nav-height).
   ------------------------------------------------------------------ */
.contact-page__header {
  position: relative;
  /* Flows: deep jade  ->  jade midpoint  ->  warm gold */
  background: linear-gradient(
    135deg,
    var(--color-jade-dark)  0%,
    var(--color-jade)       45%,
    var(--color-gold)       100%
  );
  padding-top: calc(var(--nav-height) + 72px);
  padding-bottom: 80px;
  overflow: hidden;
}

/* Puts the text content above the decorative blobs */
.contact-page__header-inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow row: 40 px decorative line + allcaps location label */
.contact-page__header-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.contact-page__header-line {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.contact-page__header-eyebrow-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Main h1 — Cormorant Garamond, large and light-weight */
.contact-page__header-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* The <em> "Book" stays white and italic */
.contact-page__header-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: #fff;
}

.contact-page__header-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  line-height: 1.6;
}

/* Ghost watermark — editorial texture, bottom-right of header */
.contact-page__header-watermark {
  position: absolute;
  right: -20px;
  bottom: -24px;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 500;
  font-style: italic;
  /* Slightly more visible on gold gradient than on pure jade */
  color: rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Decorative blob orbs — organic morphing shapes at low opacity */
.contact-page__header-blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  opacity: 0.12;
  animation: blob-morph 12s ease-in-out infinite;
  pointer-events: none;
}

/* Blob 1: large, top-left quadrant, jade tint */
.contact-page__header-blob--1 {
  width: 420px;
  height: 420px;
  top: -80px;
  left: -80px;
  background: rgba(255, 255, 255, 0.3);
  animation-delay: 0s;
}

/* Blob 2: smaller, bottom-right, gold echo */
.contact-page__header-blob--2 {
  width: 300px;
  height: 300px;
  bottom: -60px;
  right: 10%;
  background: rgba(255, 255, 255, 0.2);
  animation-delay: -5s;
}


/* ------------------------------------------------------------------
   MAIN SECTION — Two-column grid
   Desktop: 42 / 58 split. Info card left, booking right.
   Mobile: single column, info card above booking widget.
   ------------------------------------------------------------------ */
.contact-page__main {
  padding: 80px 0;
  background: var(--color-bg);
}

.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}


/* ------------------------------------------------------------------
   CONTACT INFO CARD
   Sits on top of the existing .glass-card and .gold-glow utilities.
   Adds its own structure: kicker, heading, icon-rows, hours table.
   ------------------------------------------------------------------ */
.contact-page__info-card {
  padding: 40px;
  border-radius: var(--radius-lg);
  /* Subtle gold top-border line as a design flourish */
  border-top: 3px solid var(--color-gold);
}

.contact-page__info-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--color-heading);
  line-height: 1.15;
  margin-bottom: 32px;
}

.contact-page__info-heading em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-jade);
}

/* Each contact detail row: icon + text side-by-side */
.contact-page__info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

/* Icon circle: jade background with white icon */
.contact-page__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 137, 107, 0.08);
  color: var(--color-jade);
  flex-shrink: 0;
  margin-top: 1px; /* optical alignment with first line of text */
}

.contact-page__info-text {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
  font-style: normal;
}

/* Subtle secondary note below the address text */
.contact-page__info-note {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.contact-page__info-link {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
  transition: color 0.2s ease;
}

.contact-page__info-link:hover {
  color: var(--color-jade);
}

/* Email address: allow long string to break onto new line on small screens */
.contact-page__info-link--break {
  word-break: break-all;
}

/* Hours block — sits below the contact items with a top border divider */
.contact-page__hours {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* "Studio Hours" heading: small, with inline clock icon */
.contact-page__hours-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}

.contact-page__hours-title-icon {
  color: var(--color-gold);
  flex-shrink: 0;
}

/* Hours table: full width, borderless, compact */
.contact-page__hours-table {
  width: 100%;
  border-collapse: collapse;
}

.contact-page__hours-row {
  border-bottom: 1px solid var(--color-border);
}

/* Remove bottom border on the last row */
.contact-page__hours-row:last-child {
  border-bottom: none;
}

.contact-page__hours-day,
.contact-page__hours-time {
  padding: 7px 0;
  font-size: 0.875rem;
  color: var(--color-text);
}

.contact-page__hours-day {
  font-weight: 500;
  width: 55%;
}

.contact-page__hours-time {
  text-align: right;
  color: var(--color-text-light);
}

/* Saturday/Sunday closed row — dimmer treatment */
.contact-page__hours-row--closed .contact-page__hours-day {
  color: var(--color-text-muted);
}

.contact-page__hours-time--closed {
  color: var(--color-text-muted) !important;
  font-style: italic;
}


/* ------------------------------------------------------------------
   BOOKING COLUMN
   White background, no card wrapper — open and airy.
   Heading + sub copy + prominent gold CTA button + iframe.
   ------------------------------------------------------------------ */
.contact-page__booking-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--color-heading);
  line-height: 1.15;
  margin-bottom: 12px;
}

.contact-page__booking-heading em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold);
}

.contact-page__booking-sub {
  font-size: 0.975rem;
  color: var(--color-text-light);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 480px;
}

/* The "Book Your Appointment" button above the iframe */
.contact-page__booking-cta {
  display: inline-flex;
  margin-bottom: 24px;
}

/* iframe shell: border + radius + overflow clip for the rounded corners */
.contact-page__iframe-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 600px;
  /* Subtle inset shadow so the iframe feels embedded, not floating */
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04);
}

.contact-page__iframe-wrap iframe {
  width: 100%;
  /* Height fills the wrapper; the wrapper min-height does the constraining */
  height: 100%;
  min-height: 600px;
  border: none;
  display: block;
}

/* Small fallback/help note below the iframe */
.contact-page__booking-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.contact-page__booking-note-link {
  color: var(--color-jade);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.contact-page__booking-note-link:hover {
  color: var(--color-jade-dark);
}


/* ------------------------------------------------------------------
   MAP SECTION
   Light warm background for visual rhythm between the two white
   sections above and below. Map bleeds to full width.
   ------------------------------------------------------------------ */
.contact-page__map-section {
  background: var(--color-bg-taupe);
  padding: 64px 0 0;
}

/* Header row: "Find Us" kicker+heading on left, "Get Directions" link on right */
.contact-page__map-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.contact-page__map-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  color: var(--color-heading);
  margin-top: 4px;
}

/* "Get Directions" button — outlined jade pill */
.contact-page__directions-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-jade);
  border: 1.5px solid var(--color-jade);
  border-radius: 100px;
  padding: 10px 22px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.contact-page__directions-link:hover {
  background: var(--color-jade);
  color: #fff;
}

/* Map frame: full-width, fixed aspect ratio, no padding */
.contact-page__map-frame {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.contact-page__map-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* ------------------------------------------------------------------
   "PREFER TO CALL?" CTA SECTION
   Warm background breaks the all-white run.
   Two-column: call prompt left, compact hours card right.
   ------------------------------------------------------------------ */
.contact-page__cta {
  background: var(--color-bg-warm);
  padding: 80px 0;
  /* Subtle gold top border as a section divider accent */
  border-top: 1px solid rgba(184, 148, 62, 0.15);
}

.contact-page__cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.contact-page__cta-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  color: var(--color-heading);
  line-height: 1.15;
  margin: 4px 0 16px;
}

.contact-page__cta-heading em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-jade);
}

.contact-page__cta-body {
  font-size: 0.975rem;
  color: var(--color-text-light);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 28px;
}

/* Large tappable phone call button — jade, pill-shaped */
.contact-page__cta-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--color-jade-dark), var(--color-jade));
  border-radius: 100px;
  padding: 14px 32px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4px 16px rgba(0, 137, 107, 0.25);
}

.contact-page__cta-phone-btn:hover {
  box-shadow: 0 6px 24px rgba(0, 137, 107, 0.35);
  transform: translateY(-2px);
}

.contact-page__cta-phone-btn:active {
  transform: translateY(0);
}

/* Content wrapper for the left CTA column */
.contact-page__cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Right column: compact hours card — uses .glass-card + .gold-glow utilities */
.contact-page__cta-hours-card {
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  /* Gold top border matches the info card above */
  border-top: 3px solid var(--color-gold);
}

/* "Studio Hours" label at top of the card */
.contact-page__cta-hours-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.contact-page__cta-hours-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-page__cta-hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-page__cta-hours-list li:last-child {
  border-bottom: none;
}

.contact-page__cta-hours-day {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.contact-page__cta-hours-time {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* Closed row dimming */
.contact-page__cta-hours-list-item--closed .contact-page__cta-hours-day,
.contact-page__cta-hours-list-item--closed .contact-page__cta-hours-time {
  color: var(--color-text-muted);
  font-style: italic;
}


/* ------------------------------------------------------------------
   CONTACT PAGE — RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------ */

/* Tablet: tighten gaps, reduce some font sizes */
@media (max-width: 1024px) {
  .contact-page__grid {
    gap: 36px;
  }

  .contact-page__cta-inner {
    gap: 40px;
  }
}

/* Mobile: stack everything to a single column */
@media (max-width: 768px) {
  /* Header */
  .contact-page__header {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 56px;
  }

  .contact-page__header-watermark {
    display: none; /* too large at small widths — hides gracefully */
  }

  /* Two-column grid collapses */
  .contact-page__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Info card padding shrinks */
  .contact-page__info-card {
    padding: 28px 24px;
  }

  /* iframe height shrinks a touch on mobile */
  .contact-page__iframe-wrap,
  .contact-page__iframe-wrap iframe {
    min-height: 480px;
  }

  /* Map shorter on mobile */
  .contact-page__map-frame {
    height: 280px;
  }

  /* Map header stacks vertically */
  .contact-page__map-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* CTA two-column collapses */
  .contact-page__cta-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .contact-page__cta-hours-card {
    padding: 24px 20px;
  }
}

/* Small mobile: tighten section padding */
@media (max-width: 480px) {
  .contact-page__main {
    padding: 56px 0;
  }

  .contact-page__cta {
    padding: 56px 0;
  }

  .contact-page__map-section {
    padding-top: 48px;
  }

  .contact-page__map-frame {
    height: 240px;
  }
}



/* ============================================================
   ALL SERVICES GRID — Homepage service overview
   ============================================================ */
.all-services {
  padding: 80px 0;
  background: var(--color-bg);
}
.all-services__header {
  text-align: center;
  margin-bottom: 48px;
}
.all-services__subtitle {
  color: var(--color-text-light);
  font-size: 1.05rem;
  margin-top: 12px;
}
.all-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.all-services__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.all-services__card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 148, 62, 0.3);
}
.all-services__card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 137, 107, 0.08);
  border-radius: 50%;
  color: var(--color-jade);
  margin-bottom: 16px;
}
.all-services__card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 8px;
}
.all-services__card-desc {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}
.all-services__card-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gold);
  font-weight: 500;
}
.all-services__cta {
  text-align: center;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .all-services__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .all-services__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .all-services__card { padding: 24px 16px; }
}
@media (max-width: 480px) {
  .all-services__grid { grid-template-columns: 1fr; }
}



/* ============================================================
   BOOKING SECTION — Homepage Square iframe
   ============================================================ */
.booking-home {
  padding: 80px 0;
  background: var(--color-bg-warm);
}
.booking-home__header {
  text-align: center;
  margin-bottom: 40px;
}
.booking-home__subtitle {
  color: var(--color-text-light);
  font-size: 1.05rem;
  margin-top: 12px;
}
.booking-home__iframe-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 600px;
  background: var(--color-bg);
}
.booking-home__iframe-wrap iframe {
  width: 100%;
  height: 700px;
  border: none;
  display: block;
}
.booking-home__note {
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.booking-home__note a {
  color: var(--color-jade);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.booking-home__note a:hover {
  color: var(--color-jade-dark);
}

@media (max-width: 768px) {
  .booking-home__iframe-wrap {
    min-height: 500px;
  }
  .booking-home__iframe-wrap iframe {
    height: 550px;
  }
}



/* ============================================================
   BOOKING SERVICE QUICK-PICK CARDS
   ============================================================ */
.booking-home__services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.booking-home__service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}
.booking-home__service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 148, 62, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(184, 148, 62, 0.12);
}
.booking-home__service-card:active {
  transform: translateY(-2px) scale(0.98);
}
.booking-home__service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 137, 107, 0.08);
  border-radius: 50%;
  color: var(--color-jade);
}
.booking-home__service-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-heading);
}
.booking-home__service-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-gold);
}
.booking-home__cta {
  text-align: center;
}
.booking-home__note {
  text-align: center;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Ensure btn--nav-book works as a button element too */
button.btn--nav-book {
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
button.btn {
  cursor: pointer;
  font-family: var(--font-body);
}

@media (max-width: 768px) {
  .booking-home__services {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .booking-home__service-card {
    padding: 20px 12px;
  }
}
@media (max-width: 480px) {
  .booking-home__services {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* ============================================================
   LOGO IMAGE — replaces text logo
   ============================================================ */
.nav__logo-img {
  height: 100px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.nav__logo-img:hover {
  opacity: 0.85;
}
/* On hero (transparent nav), invert logo to white */
.nav:not(.nav--scrolled) .nav__logo-img {
  filter: brightness(0) invert(1);
}
/* On scrolled nav, show logo in original dark color */
.nav--scrolled .nav__logo-img {
  filter: none;
}
/* Taller nav to fit bigger logo */
.nav__inner {
  min-height: 100px;
}

/* Mobile logo slightly smaller */
@media (max-width: 768px) {
  .nav__logo-img {
    height: 72px;
  }
  .nav__inner {
    min-height: 80px;
  }
}


/* ============================================================
   HERO VIDEO BACKGROUND
   ============================================================ */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* Footer logo image */
.footer__logo-img {
  height: 60px;
  width: auto;
  display: block;
  margin-bottom: 12px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.footer__logo-img:hover {
  opacity: 1;
}


/* Review price tag */
.reviews__card-price-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-gold);
  padding: 4px 10px;
  background: var(--color-gold-subtle);
  border-radius: 20px;
}