/* ============================================
   The Healing Hub — Massage & Wellness
   Single responsive stylesheet (desktop default,
   mobile via media queries). Locked to the
   coral / waves / poetic / light variant.
   ============================================ */

:root {
  /* Brand palette */
  --sand:        #D9CBB3;
  --sand-deep:   #B89F7A;
  --sand-light:  #E8DEC8;
  --clay:        #C4A788;
  --clay-deep:   #A8825D;
  --sage:        #A9B8A5;
  --sage-deep:   #7A8E76;
  --sage-mist:   #C7D2C2;
  --moss:        #5C6F58;
  --slate:       #4A5A6A;
  --slate-deep:  #2F3D4A;
  --gold:        #D4A95C;
  --gold-deep:   #B8893B;
  --gold-light:  #E8C896;
  --coral:       #E8A97A;
  --coral-deep:  #C97B4A;
  --ivory:       #F2EDE2;
  --ivory-warm:  #EAE0CB;
  --cream:       #F5EBD7;
  --bone:        #E8DCC2;
  --ink:         #2F3D4A;

  /* Theme tokens */
  --bg:        var(--cream);
  --bg-2:      var(--bone);
  --bg-deep:   var(--sand);
  --fg:        var(--slate-deep);
  --fg-soft:   var(--slate);
  --fg-mute:   #6E7A85;
  --rule:      rgba(74, 90, 106, 0.18);
  --rule-warm: rgba(168, 130, 93, 0.32);
  --accent:    #C97B4A;
  --accent-deep: #A85F33;

  /* Type */
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --script: 'Dancing Script', 'Brush Script MT', cursive;

  --maxw: 1240px;
  --gutter: 32px;
  --nav-h: 60px;
  --bottom-bar-h: 76px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: contain;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* Cream sections share the paper grain */
.paper {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}
.paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  background-size: 600px 600px;
  mix-blend-mode: multiply;
  opacity: 0.32;
}
.paper > * { position: relative; z-index: 1; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== Typography atoms ===== */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-block;
}
.eyebrow.muted { color: var(--fg-mute); }
.eyebrow.light { color: rgba(245, 235, 215, 0.85); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.02;
  margin: 0;
  color: var(--fg);
  text-wrap: pretty;
}

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--fg-soft);
  text-wrap: pretty;
}

.body-copy {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-soft);
}
.bio-placeholder em { font-family: var(--serif); color: var(--fg-mute); }

.script {
  font-family: var(--script);
  color: var(--accent-deep);
  font-weight: 500;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 30px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 220ms ease;
  background: transparent;
  color: inherit;
  white-space: nowrap;
  min-height: 48px;
}
.btn .arrow {
  display: inline-block;
  transition: transform 220ms ease;
  font-size: 14px;
  letter-spacing: 0;
}
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 12px 28px -10px rgba(168, 60, 30, 0.45);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-warm);
}
.btn-ghost:hover { background: rgba(74, 60, 40, 0.06); border-color: var(--accent); color: var(--accent-deep); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(245, 235, 215, 0.55);
}
.btn-ghost-light:hover { background: rgba(245, 235, 215, 0.12); border-color: rgba(245, 235, 215, 0.85); }

.btn-block { display: flex; width: 100%; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent);
  transition: all 220ms ease;
  align-self: flex-start;
}
.btn-link:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* ===== NAV ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 280ms ease, border-color 280ms ease, color 280ms ease;
  border-bottom: 1px solid transparent;
  color: #fff;
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  transition: padding 280ms ease;
}
.nav.scrolled {
  background: rgba(245, 235, 215, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule-warm);
  color: var(--fg);
}
.nav.scrolled .nav-inner { padding: 12px var(--gutter); }
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}
.nav-brand img { height: 64px; width: auto; transition: filter 280ms ease, opacity 280ms ease, height 280ms ease; }
.nav.scrolled .nav-brand img { height: 50px; }
.nav:not(.scrolled) .nav-brand img { filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.3)); opacity: 0.96; }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: 0.88;
  transition: opacity 220ms ease, color 220ms ease;
}
.nav-links a:hover { opacity: 1; }
.nav .btn { padding: 12px 22px; font-size: 11px; min-height: 0; }
.nav:not(.scrolled) .btn-primary {
  background: rgba(245, 235, 215, 0.92);
  color: var(--accent-deep);
  border-color: rgba(245, 235, 215, 0.92);
}
.nav:not(.scrolled) .btn-primary:hover { background: #fff; }

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 280ms ease, opacity 280ms ease;
  border-radius: 2px;
}
.nav-burger.open { color: var(--fg); }
body.no-scroll .nav-brand { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== DRAWER (mobile) ===== */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 18, 15, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 95;
  width: min(86vw, 360px);
  height: 100dvh;
  max-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(255,225,170,0.18), transparent 35%),
    linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
  color: var(--fg);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 16px 22px max(16px, env(safe-area-inset-bottom)) 22px;
  box-shadow: -20px 0 60px -20px rgba(40, 28, 18, 0.4);
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  background-size: 480px 480px;
  mix-blend-mode: multiply;
  opacity: 0.22;
  z-index: 0;
}
.drawer > * { position: relative; z-index: 1; }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-warm);
  flex: 0 0 auto;
}
.drawer-head img { height: clamp(32px, 4.6vh, 40px); width: auto; }
.drawer-links {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 4px;
}
.drawer-links a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(8px, 1.6vh, 16px) 4px;
  font-family: var(--serif);
  font-size: clamp(22px, 4vh, 28px);
  font-weight: 400;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-warm);
  letter-spacing: -0.005em;
}
.drawer-links a .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-mute);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.drawer-cta {
  flex: 0 0 auto;
  margin-top: clamp(10px, 1.8vh, 18px);
}
.drawer-cta .btn {
  min-height: 44px;
  padding: 12px 22px;
}
.drawer-meta {
  flex: 0 0 auto;
  margin-top: clamp(12px, 2vh, 22px);
  padding-top: clamp(10px, 1.6vh, 18px);
  border-top: 1px solid var(--rule-warm);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--fg-soft);
}
.drawer-meta a { color: var(--fg); text-decoration: none; }
.drawer-meta .script {
  font-size: 18px;
  font-style: normal;
  margin-top: 2px;
}

/* ===== HERO — sunset ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      #2F3D4A 0%,
      #4A4458 14%,
      #8B5340 38%,
      #C97A52 58%,
      #E5B07F 76%,
      #F2D9A8 92%,
      #C7D2C2 100%);
}
.hero-sun {
  position: absolute;
  width: 880px; height: 880px;
  border-radius: 50%;
  left: 50%; bottom: -38%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,225,170,0.95) 0%, rgba(232,169,122,0.6) 30%, rgba(201,123,82,0.2) 55%, transparent 75%);
  filter: blur(2px);
  z-index: 1;
}
.hero-stars {
  position: absolute;
  inset: 0 0 60% 0;
  z-index: 1;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,235,200,0.7), transparent 60%),
    radial-gradient(1px 1px at 30% 8%, rgba(255,235,200,0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 22%, rgba(255,235,200,0.6), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,235,200,0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 28%, rgba(255,235,200,0.55), transparent 60%),
    radial-gradient(0.9px 0.9px at 42% 32%, rgba(255,235,200,0.4), transparent 60%);
  pointer-events: none;
}
.hero-haze {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 35% at 50% 80%, rgba(255, 220, 175, 0.55), transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(122, 142, 118, 0.35), transparent 75%);
  pointer-events: none;
}
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(20, 18, 15, 0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(40, 28, 20, 0.35) 85%, rgba(30, 22, 18, 0.55) 100%);
}
.hero-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(58, 74, 88, 0.28) 60%, rgba(28, 38, 48, 0.6) 100%);
}
.hero-horizon::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 18%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 165, 0.6) 30%, rgba(255, 235, 200, 0.85) 50%, rgba(255, 220, 165, 0.6) 70%, transparent 100%);
  filter: blur(0.4px);
}

.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 140px var(--gutter) 160px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero .eyebrow.light { letter-spacing: 0.5em; color: #FFF6E4; text-shadow: 0 1px 10px rgba(40, 24, 14, 0.55); }
.hero-eyebrow > span { white-space: nowrap; }
.hero-eyebrow .hero-eyebrow-sep { margin: 0 0.3em; }
.hero-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(40, 30, 20, 0.35);
  text-wrap: balance;
}
.hero-display em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 235, 200, 0.96);
}
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  max-width: 580px;
  color: #FFF6E4;
  text-shadow: 0 1px 14px rgba(40, 24, 14, 0.55);
  margin: 0;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.hero-cta .btn-primary {
  background: #fff;
  color: var(--accent-deep);
  border-color: #fff;
  box-shadow: 0 18px 40px -12px rgba(40, 24, 14, 0.55);
}
.hero-cta .btn-primary:hover {
  background: #fff;
  color: var(--accent-deep);
  border-color: #fff;
  opacity: 0.94;
}
.hero-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FFF6E4;
  text-shadow: 0 1px 10px rgba(40, 24, 14, 0.6);
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 246, 228, 0.75); }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #FFF6E4;
  text-shadow: 0 1px 8px rgba(40, 24, 14, 0.6);
}
.hero-scroll .line { width: 1px; height: 40px; background: linear-gradient(180deg, rgba(255, 246, 228, 0.95), transparent); }

/* ===== SECTION SCAFFOLD ===== */
.section { padding: 120px 0; position: relative; }
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 64px;
  text-align: center;
  justify-items: center;
}
.section-head .eyebrow { letter-spacing: 0.4em; }
.section-head .display { font-size: clamp(40px, 5.4vw, 78px); }
.section-head .lede { font-size: clamp(18px, 1.5vw, 22px); max-width: 640px; }

.two-col {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-section { background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%); }
.about-display { margin: 14px 0 22px; font-size: clamp(38px, 4.6vw, 64px); }
.about-display em { font-style: italic; font-weight: 300; }
.about-cta { margin-top: 32px; }

/* ===== SERVICES ===== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 96px;
  align-items: start;
}
.svc {
  padding-bottom: 38px;
  border-bottom: 1px solid var(--rule-warm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.svc-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.svc-num { font-family: var(--serif); font-style: italic; color: var(--fg-mute); font-size: 14px; }
.svc-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  flex: 1 1 auto;
  letter-spacing: -0.005em;
}
.svc-tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.svc-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0 0 22px 0;
  max-width: 46ch;
}
.svc-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: auto;
  margin-bottom: 22px;
}
.svc-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: rgba(255, 250, 235, 0.5);
  border: 1px solid var(--rule-warm);
  border-radius: 4px;
}
.svc-price-dur {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.svc-price-amt {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.svc-price-amt .cur { font-size: 16px; color: var(--fg-mute); margin-right: 2px; }

/* Add-ons strip — slate band */
.addons {
  margin-top: 80px;
  padding: 48px 56px;
  border: 1px solid rgba(245, 235, 215, 0.12);
  border-radius: 4px;
  position: relative;
  background: linear-gradient(160deg, #3A4A58 0%, #2F3D4A 60%, #243038 100%);
  color: var(--cream);
  overflow: hidden;
  box-shadow: 0 28px 60px -22px rgba(20, 30, 40, 0.5);
}
.addons::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.84 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
}
.addons::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 169, 122, 0.35) 0%, rgba(201, 123, 82, 0.12) 45%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.addons > * { position: relative; z-index: 1; }
.addons-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.addons-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0;
  color: var(--cream);
}
.addons-head .eyebrow.muted { color: rgba(245, 235, 215, 0.6); }
.addons-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.addons .addon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 235, 215, 0.18);
}
.addon-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.addon-name { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--cream); }
.addon-desc { font-size: 14px; line-height: 1.55; color: rgba(245, 235, 215, 0.78); }
.addon-price {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
  white-space: nowrap;
}

/* ===== ABOUT ===== */
.about-img {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: var(--clay);
  box-shadow: 0 28px 64px -20px rgba(74, 60, 40, 0.4);
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-credentials {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--rule-warm);
}
.cred-row { display: flex; gap: 16px; align-items: baseline; }
.cred-label { font-family: var(--sans); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-mute); flex: 0 0 120px; }
.cred-value { font-family: var(--serif); font-size: 17px; color: var(--fg); }

/* ===== CTA BAND — sunset ===== */
.cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.cta-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(170deg, #4A4458 0%, #8B5340 30%, #C97A52 60%, #E5B07F 90%);
}
.cta-band-sun {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  right: -10%; top: -40%;
  background: radial-gradient(circle, rgba(255,225,170,0.85) 0%, rgba(232,169,122,0.4) 35%, transparent 70%);
  filter: blur(4px);
  z-index: 1;
}
.cta-band-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.4;
}
.cta-band-content {
  position: relative;
  z-index: 3;
  padding: 110px var(--gutter);
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}
.cta-band .script { color: rgba(255, 235, 200, 0.95); font-size: 38px; line-height: 1; display: inline-block; transform: rotate(-2deg); margin-bottom: 8px; }
.cta-band .display { color: #fff; font-size: clamp(42px, 5vw, 72px); margin-bottom: 22px; }
.cta-band .lede { color: rgba(245, 235, 215, 0.85); font-style: italic; font-size: 19px; margin: 0 auto 36px; max-width: 540px; }
.cta-band-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band-book {
  background: #fff;
  color: var(--accent-deep);
  border-color: #fff;
}
.cta-band-book:hover { background: #fff; color: var(--accent-deep); border-color: #fff; opacity: 0.92; }

/* ===== TESTIMONIALS ===== */
.testi-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.testi {
  padding: 36px 32px;
  background: rgba(255, 250, 235, 0.55);
  border: 1px solid var(--rule-warm);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.testi-stars { display: flex; gap: 2px; color: var(--accent); font-size: 14px; letter-spacing: 0.1em; }
.testi-quote { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--fg); text-wrap: pretty; margin: 0; }
.testi-author { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--rule-warm); margin-top: auto; }
.testi-name { font-family: var(--serif); font-size: 16px; }
.testi-meta { font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-mute); }

.testi-dots { display: none; }

/* ===== INSTAGRAM — slate band ===== */
.ig-section {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
  padding-bottom: 100px;
}
.ig-section-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #3A4A58 0%, #2F3D4A 60%, #243038 100%);
}
.ig-section-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.84 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.25;
}
.ig-section-glow {
  position: absolute; z-index: 0;
  width: 520px; height: 520px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 169, 122, 0.32) 0%, rgba(201, 123, 82, 0.1) 45%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.ig-wrap { position: relative; z-index: 1; }
.ig-section .section-head .eyebrow { color: rgba(232, 169, 122, 0.95); }
.ig-handle-display { color: var(--cream); font-size: clamp(36px, 4.4vw, 60px); }

.ig-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.ig-tile {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--sand);
  box-shadow: 0 12px 32px -14px rgba(20, 30, 40, 0.55);
}
.ig-tile::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 235, 215, 0.85);
  background: linear-gradient(180deg, transparent 60%, rgba(74, 30, 20, 0.45) 100%);
  opacity: 0;
  transition: opacity 220ms ease;
}
.ig-tile:hover::after { opacity: 1; }
.ig-tile.t1 { background: linear-gradient(180deg, #C97A52, #4A4458); }
.ig-tile.t2 { background: linear-gradient(160deg, #C7D2C2, #7A8E76); }
.ig-tile.t3 { background: linear-gradient(180deg, #F2D9A8 0%, #E5B07F 50%, #C97A52 100%); }
.ig-tile.t4 { background: linear-gradient(160deg, #E8DCC2, #C4A788 60%, #A8825D); }
.ig-tile.t5 { background: linear-gradient(180deg, #4A4458, #8B5340 60%, #C97A52); }
.ig-tile.t6 { background: linear-gradient(160deg, #C7D2C2 0%, #E8C896 50%, #D4A95C); }

.ig-handle { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 30px; }
.ig-handle .btn-link { letter-spacing: 0.28em; color: var(--coral); border-bottom-color: var(--coral); }

/* ===== FAQ ===== */
.faq-section { background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%); }
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--rule-warm);
}
.faq-item:first-child { border-top: 1px solid var(--rule-warm); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--fg);
  transition: color 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.faq-q:hover { color: var(--accent-deep); }
.faq-q .plus {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--accent-deep);
}
.faq-q .plus::before, .faq-q .plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 280ms ease;
}
.faq-q .plus::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.faq-q .plus::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.faq-item.open .faq-q .plus::after { transform: translateX(-50%) rotate(90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms ease, padding 360ms ease;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-soft);
  padding: 0 60px 0 0;
}
.faq-item.open .faq-a { max-height: 500px; padding: 0 60px 28px 0; }

/* ===== CONTACT — sunset ===== */
.contact-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
  padding-bottom: 140px;
}
.contact-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    #2F3D4A 0%,
    #4A4458 22%,
    #8B5340 50%,
    #C97A52 78%,
    #E5B07F 100%);
}
.contact-sun {
  position: absolute; z-index: 1;
  width: 720px; height: 720px; border-radius: 50%;
  left: 50%; bottom: -50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,225,170,0.7) 0%, rgba(232,169,122,0.35) 35%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}
.contact-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.32;
}
.contact-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(20, 18, 15, 0.4) 100%);
}
.contact-wrap { position: relative; z-index: 2; }
.contact-section .section-head .eyebrow { color: rgba(255, 220, 175, 0.95); }
.contact-section .section-head .display { color: #fff; text-shadow: 0 2px 18px rgba(40, 24, 14, 0.4); }
.contact-section .section-head .lede { color: rgba(255, 246, 228, 0.92); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-subhead { display: none; }
.contact-row { display: flex; flex-direction: column; gap: 4px; }
.contact-row .label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 246, 228, 0.7);
}
.contact-row .value {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
  color: var(--cream);
  text-decoration: none;
}
.contact-row a.value { transition: color 220ms ease; }
.contact-row a.value:hover { color: var(--coral); }

.hours-list { display: flex; flex-direction: column; gap: 4px; }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(245, 235, 215, 0.22);
  font-size: 14px;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .day { font-family: var(--serif); font-style: italic; color: rgba(255, 246, 228, 0.78); }
.hours-row .time { font-family: var(--sans); letter-spacing: 0.04em; color: var(--cream); }

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.contact-book-btn {
  background: #fff;
  color: var(--accent-deep);
  border-color: #fff;
}
.contact-book-btn:hover { opacity: 0.92; }

.map-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(245, 235, 215, 0.25);
  min-height: 480px;
  background: var(--sand);
  box-shadow: 0 28px 60px -22px rgba(20, 30, 40, 0.55);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; min-height: 480px; filter: sepia(28%) saturate(0.9) contrast(0.95) brightness(0.95); }

/* ===== FOOTER ===== */
.footer {
  background: linear-gradient(180deg, #2F3D4A 0%, #243038 100%);
  color: rgba(245, 235, 215, 0.78);
  padding: 70px 0 30px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.84 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.25;
  pointer-events: none;
}
.footer .wrap { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.5fr 0.85fr;
  gap: 40px;
  margin-bottom: 60px;
}
.footer-brand img { height: 88px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; margin-bottom: 18px; }
.footer h4 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 235, 215, 0.55);
  margin: 0 0 18px 0;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a, .footer ul li { font-family: var(--serif); font-size: 17px; color: rgba(245, 235, 215, 0.88); text-decoration: none; transition: color 220ms ease; }
.footer ul a:hover { color: var(--coral); }
.footer-tag { font-family: var(--serif); font-style: italic; font-size: 17px; color: rgba(245, 235, 215, 0.7); line-height: 1.5; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(245, 235, 215, 0.15);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 235, 215, 0.5);
}
.footer-bottom .script { font-family: var(--script); color: var(--coral); font-size: 22px; text-transform: none; letter-spacing: 0; }

/* ===== STICKY MOBILE BOTTOM CTA ===== */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(245, 235, 215, 0.96);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--rule-warm);
  transform: translateY(0);
  transition: transform 320ms ease;
}
.bottom-bar.hidden { transform: translateY(110%); }
.bottom-bar .btn {
  flex: 1;
  padding: 14px 18px;
  font-size: 11px;
}
.bottom-bar .btn-call {
  flex: 0 0 52px;
  padding: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-deep);
  border: 1px solid var(--accent);
  font-size: 22px;
  letter-spacing: 0;
  min-height: 0;
}

/* ===== Patterns layered onto cream paper sections ===== */
.section .pattern-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'><g fill='none' stroke='%237A8E76' stroke-width='0.7' opacity='0.7' stroke-linecap='round'><path d='M0 45 Q60 25 120 45 T240 45'/><path d='M0 60 Q60 40 120 60 T240 60'/><path d='M0 30 Q60 10 120 30 T240 30'/><path d='M0 75 Q60 55 120 75 T240 75'/></g></svg>");
  background-size: 360px auto;
}

/* Anchor offsets so fixed nav doesn't cover headings */
[id="services"], [id="about"], [id="contact"], [id="faq"] { scroll-margin-top: 84px; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 920px) {
  .two-col { grid-template-columns: 1fr; gap: 48px; }
  .section { padding: 88px 0; }
  .services-grid { grid-template-columns: 1fr; gap: 48px; }
  .addons-list { grid-template-columns: 1fr; }
  .addons { padding: 32px 28px; }
  .testi-rail { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 820px) {
  :root { --gutter: 22px; }

  .nav { height: var(--nav-h); }
  .nav-inner { padding: 10px var(--gutter); height: 100%; }
  .nav.scrolled .nav-inner { padding: 10px var(--gutter); }
  .nav-links, .nav-book { display: none; }
  .nav-burger { display: flex; }
  .nav-brand img { height: 42px; }
  .nav.scrolled .nav-brand img { height: 42px; }

  .bottom-bar { display: flex; }

  /* Hero — tighter and stacked CTAs */
  .hero-content {
    padding: calc(var(--nav-h) + 48px) var(--gutter) 110px;
    gap: 22px;
  }
  .hero-eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hero-eyebrow .hero-eyebrow-sep { display: none; }
  .hero-display { font-size: clamp(48px, 13vw, 68px); }
  .hero-sub { font-size: 17px; max-width: 32ch; }
  .hero-cta {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
  }
  .hero-cta .btn { display: flex; width: 100%; }
  .hero-meta { gap: 14px; font-size: 9.5px; }
  .hero-scroll { display: none; }

  /* Section heads tighter */
  .section-head { margin-bottom: 40px; }
  .section-head .display { font-size: clamp(34px, 9vw, 44px); }
  .section-head .lede { font-size: 17px; max-width: 32ch; }

  /* Services */
  .svc-name { font-size: 28px; }
  .svc-pricing { gap: 10px; }
  .svc-price { padding: 12px 14px; }
  .svc-price-amt { font-size: 24px; }
  .svc-price-amt .cur { font-size: 14px; }
  .addons { margin-top: 56px; }
  .addons-head h3 { font-size: 26px; }
  .addons-head { margin-bottom: 24px; }

  /* About */
  .about-display { font-size: clamp(34px, 8.5vw, 44px); margin: 14px 0 22px; }
  .cred-row { flex-direction: column; gap: 3px; }
  .cred-label { flex: 0 0 auto; }
  .about-cta .btn { display: flex; width: 100%; }

  /* CTA band */
  .cta-band-content { padding: 76px var(--gutter); }
  .cta-band .script { font-size: 30px; }
  .cta-band .display { font-size: clamp(34px, 8.5vw, 46px); }
  .cta-band .lede { font-size: 16px; }
  .cta-band-cta {
    flex-direction: column;
    max-width: 320px;
    margin: 0 auto;
  }
  .cta-band-cta .btn { display: flex; width: 100%; }

  /* Testimonials — swipeable rail */
  .testi-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    padding: 4px var(--gutter) 18px;
    margin: 0 calc(-1 * var(--gutter));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testi-rail::-webkit-scrollbar { display: none; }
  .testi {
    flex: 0 0 86%;
    scroll-snap-align: start;
    padding: 28px 24px;
    min-height: 240px;
  }
  .testi-quote { font-size: 17px; }
  .testi-name { font-size: 15px; }
  .testi-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .testi-dots .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rule-warm);
    transition: background 220ms, transform 220ms;
  }
  .testi-dots .dot.active {
    background: var(--accent);
    transform: scale(1.25);
  }

  /* Instagram — 3-up */
  .ig-row { grid-template-columns: repeat(3, 1fr); }
  .ig-section { padding-bottom: 88px; }

  /* FAQ */
  .faq-q { font-size: 18px; padding: 20px 0; min-height: 56px; }
  .faq-a { font-size: 15px; padding: 0 24px 0 0; }
  .faq-item.open .faq-a { padding: 0 24px 22px 0; }

  /* Contact — compacted for mobile */
  .contact-section { padding-top: 64px; padding-bottom: 56px; }
  .contact-grid { gap: 28px; }
  .contact-card { gap: 18px; }
  .contact-row { gap: 2px; }
  .contact-subhead {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
    color: var(--cream);
    letter-spacing: -0.005em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 235, 215, 0.22);
  }
  .contact-subhead-book { margin-top: 4px; }
  .contact-row .value { font-size: 17px; }
  .contact-row .label { font-size: 9.5px; letter-spacing: 0.3em; }
  .hours-list { gap: 0; }
  .hours-row { padding: 4px 0; font-size: 13px; }
  .map-wrap { min-height: 240px; }
  .map-wrap iframe { min-height: 240px; }
  .contact-actions { margin-top: 0; }
  .contact-actions .btn { display: flex; width: 100%; }

  /* Footer */
  .footer-tag { font-size: 16px; margin-bottom: 28px; }
  .footer-bottom { font-size: 10px; }

  /* Anchor offset accounts for nav height */
  [id="services"], [id="about"], [id="contact"], [id="faq"] {
    scroll-margin-top: calc(var(--nav-h) + 12px);
  }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .addon-name { font-size: 19px; }
  .addon-desc { font-size: 14px; }
}