/* =========================================================================
   MIRROR MIRROR HAIRSTYLES — v4.0 "The Editorial Edit"
   Bold · split-slider · Playfair Display · warm rose/burgundy palette
   Inspired by Qode Curly · adapted for Mirror Mirror's boutique studio
   ========================================================================= */

:root {
  /* --- Palette: Desert Rose — feminine, premium, warm earth + lavender accent ---
     #8381A6 lavender · #D48662 desert-rose peach · #8B322C terracotta
     #723715 saddle brown · #26160C deep espresso ---*/
  --c-cream:        #faf3ee;        /* primary background — pale warm pink-beige */
  --c-cream-2:      #f3e3d8;        /* alt panel — soft peach wash */
  --c-pearl:        #fdf8f4;        /* lightest cream for cards/forms */
  --c-blush:        #e9c5b0;        /* soft peach rose — accents */
  --c-blush-deep:   #d48662;        /* desert rose peach (palette #2) */
  --c-rose:         #c97558;        /* deeper warm rose */
  --c-burgundy:     #8b322c;        /* deep terracotta — primary accent (palette #3) */
  --c-burgundy-2:   #a4413a;        /* lighter terracotta — hover */
  --c-gold:         #723715;        /* saddle brown accent (palette #4) */
  --c-lavender:     #8381a6;        /* lavender accent (palette #1) */
  --c-lavender-soft:#a9a7c4;        /* softer lavender for gradients */
  --c-ink:          #26160c;        /* deep espresso (palette #5) */
  --c-text:         #3a261b;        /* body — slightly warmer than ink */
  --c-muted:        #8a6f5e;        /* muted warm-brown captions */
  --c-line:         #e6d3c3;        /* hairline borders */

  /* --- Aliases for legacy class compatibility (so old templates still work) --- */
  --c-bg:           var(--c-cream);
  --c-bg-alt:       var(--c-cream-2);
  --c-espresso:     var(--c-ink);
  --c-rust:         var(--c-burgundy);
  --c-accent:       var(--c-burgundy);
  --c-accent-soft:  var(--c-rose);
  --c-peach:        var(--c-blush);
  --c-brown:        var(--c-text);
  --c-rose-wall:    var(--c-blush-deep);

  /* --- Typography: editorial serif + uppercase mono sans --- */
  --f-display:  "Playfair Display", "Cormorant Garamond", Garamond, serif;
  --f-serif:    "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-body:     "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-sans:     "Jost", "Inter", system-ui, -apple-system, sans-serif;
  --f-script:   "Allura", "Pinyon Script", cursive;
  --f-mono:     "Jost", system-ui, sans-serif;

  /* --- Geometry --- */
  --r-sm: 0px;
  --r-md: 2px;
  --r-lg: 4px;

  --shadow-soft:  0 30px 80px -50px rgba(26, 20, 16, 0.22);
  --shadow-mid:   0 25px 60px -30px rgba(26, 20, 16, 0.28);
  --shadow-deep:  0 40px 100px -40px rgba(110, 32, 24, 0.35);

  --e-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container-max:   1280px;
  --container-pad:   40px;
  --container-tight: 1080px;
}

/* ====================================================================
   1. BASE
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; height: auto; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--e-soft), opacity 0.3s ease, background 0.3s ease;
}
ul { list-style: none; padding: 0; margin: 0; }
::selection { background: var(--c-burgundy); color: var(--c-cream); }

/* ---------- Headlines: Playfair Display, dramatic ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 0.55em;
}
h1 {
  font-size: clamp(3.4rem, 8.5vw, 7.5rem);
  font-weight: 400;
  line-height: 0.98;
}
h2 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
}
h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
}
h4 {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
}
p { margin: 0 0 1em; }

em, .italic-display {
  font-style: italic;
  font-weight: 400;
  color: var(--c-burgundy);
}

/* ---------- Type accents ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-burgundy);
  display: inline-block;
}
.eyebrow.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-burgundy);
}
.eyebrow.eyebrow--center {
  justify-content: center;
}
.eyebrow-light {
  color: rgba(249, 241, 232, 0.85);
}
.eyebrow-light::before, .eyebrow-light::after {
  background: rgba(249, 241, 232, 0.85) !important;
}

.script, .signature {
  font-family: var(--f-script);
  font-weight: 400;
  font-style: italic;
  color: var(--c-burgundy);
}

.lead {
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.55;
  color: var(--c-text);
  font-style: italic;
  font-weight: 300;
}

/* ====================================================================
   2. LAYOUT
   ==================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--tight { max-width: var(--container-tight); }
.container--wide  { max-width: 1480px; }

.section {
  padding: 130px 0;
  position: relative;
}
.section--tight { padding: 90px 0; }
.section--alt { background: var(--c-cream-2); }
.section--ink { background: var(--c-ink); color: var(--c-cream); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--c-cream); }
.section--ink em, .section--ink .italic-display { color: var(--c-blush); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
  position: relative;
}
.section-head .section-title { margin: 0 0 18px; }
.section-head p {
  color: var(--c-muted);
  font-style: italic;
  font-size: 1.1rem;
}

/* Decorative ornament — small dotted divider */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 30px;
  width: 80px;
}
.ornament span {
  width: 4px;
  height: 4px;
  background: var(--c-burgundy);
  border-radius: 50%;
  display: block;
}
.ornament span:nth-child(2) { width: 8px; height: 8px; }
.ornament--light span { background: var(--c-cream); }

/* Vertical decorative line — used in hero/sections */
.vertical-line {
  display: inline-block;
  width: 1px;
  height: 80px;
  background: var(--c-burgundy);
  margin: 0 auto;
}

/* ====================================================================
   3. BUTTONS
   ==================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.4s var(--e-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 12px;
  transition: transform 0.4s var(--e-out);
}
.btn .arrow svg { width: 100%; height: 100%; }
.btn:hover .arrow { transform: translateX(6px); }

.btn--primary {
  background: var(--c-burgundy);
  color: var(--c-cream);
  border-color: var(--c-burgundy);
}
.btn--primary:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-cream);
}

.btn--cream {
  background: var(--c-cream);
  color: var(--c-ink);
  border-color: var(--c-cream);
}
.btn--cream:hover {
  background: var(--c-blush);
  border-color: var(--c-blush);
}

.btn--outline-light {
  background: transparent;
  color: var(--c-cream);
  border-color: var(--c-cream);
}
.btn--outline-light:hover {
  background: var(--c-cream);
  color: var(--c-ink);
}

/* Text link with arrow underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-burgundy);
  transition: gap 0.3s var(--e-out);
}
.link-arrow:hover { gap: 18px; color: var(--c-ink); border-color: var(--c-ink); }

/* ====================================================================
   4. HEADER & NAVIGATION
   ==================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 22px 0;
  background: transparent;
  transition: background 0.4s var(--e-out), padding 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.site-header.is-scrolled {
  background: var(--c-cream);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--c-line);
}

/* Light header on hero / dark backgrounds */
.site-header.is-light:not(.is-scrolled) .nav-links a,
.site-header.is-light:not(.is-scrolled) .brand-script,
.site-header.is-light:not(.is-scrolled) .brand-mark,
.site-header.is-light:not(.is-scrolled) .nav-cta {
  color: var(--c-cream);
}
.site-header.is-light:not(.is-scrolled) .nav-cta {
  border-color: var(--c-cream);
}
.site-header.is-light:not(.is-scrolled) .burger span {
  background: var(--c-cream);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  line-height: 1;
}
.brand-script {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--c-burgundy);
  letter-spacing: -0.02em;
}
.brand-mark {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-left: 6px;
}
.brand-logo img { max-height: 60px; width: auto; }

.nav-links {
  display: flex;
  gap: 38px;
  align-items: center;
}
.nav-links a {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-burgundy);
  transform: translateX(-50%);
  transition: width 0.4s var(--e-out);
}
.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after {
  width: 100%;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
  color: var(--c-burgundy);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid var(--c-burgundy);
  color: var(--c-burgundy);
  transition: all 0.3s var(--e-out);
}
.nav-cta:hover, .nav-cta.active {
  background: var(--c-burgundy);
  color: var(--c-cream);
}

.burger {
  display: none;
  width: 36px;
  height: 28px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-ink);
  transition: all 0.3s var(--e-out);
  transform-origin: center;
}
.burger span:nth-child(1) { top: 4px; }
.burger span:nth-child(2) { top: 13px; width: 70%; }
.burger span:nth-child(3) { top: 22px; }
.burger.open span:nth-child(1) { top: 13px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 13px; transform: rotate(-45deg); width: 100%; }

/* Mobile menu */
/* ====================================================================
   OFF-CANVAS MENU — slide-in panel from the right with backdrop.
   Replaces the old plain full-screen fade. The structure in header.php is:
     .mobile-menu
       └ .mobile-menu-backdrop  (dim layer behind, click to close)
       └ .mobile-menu-panel     (the panel itself)
            ├ .mobile-menu-head  (eyebrow + close X)
            ├ .mobile-menu-nav   (ol of numbered links)
            └ .mobile-menu-foot  (address / phone / email)
   ==================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;        /* above the slider stage and the fixed header */
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.55s; /* delay hiding until panel slides out */
}
.mobile-menu.open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* Backdrop dim layer */
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }

/* The panel itself */
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 92vw);
  background: var(--curly-cream);
  display: flex;
  flex-direction: column;
  padding: 36px 48px 36px;
  box-shadow: -24px 0 60px rgba(8, 8, 10, 0.18);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  overflow-y: auto;
}
.mobile-menu.open .mobile-menu-panel { transform: translate3d(0, 0, 0); }

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--curly-line);
  margin-bottom: 30px;
}
.mobile-menu-eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}

/* Custom close button (rotated lines forming an X) */
.mobile-menu-close {
  width: 36px;
  height: 36px;
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 50%;
  transition: background 0.3s ease;
}
.mobile-menu-close:hover { background: rgba(0, 0, 0, 0.05); }
.mobile-menu-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--curly-text);
  transition: background 0.3s ease;
}
.mobile-menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu-close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Nav list — numbered editorial layout */
.mobile-menu-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile-menu-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mobile-menu-nav li {
  border-bottom: 1px solid var(--curly-line);
}
.mobile-menu-nav li:first-child { border-top: 1px solid var(--curly-line); }
.mobile-menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 18px 0;
  text-decoration: none;
  color: var(--curly-text);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s ease, padding 0.3s ease;
}
.mobile-menu-nav a .num {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--curly-gold);
  flex: 0 0 auto;
  transform: translateY(-2px);
}
.mobile-menu-nav a .lbl { flex: 1 1 auto; }
.mobile-menu-nav a::after {
  content: "→";
  font-family: var(--f-sans);
  font-weight: 400;
  color: var(--curly-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
  color: var(--curly-gold);
  padding-left: 8px;
}
.mobile-menu-nav a:hover::after,
.mobile-menu-nav a.active::after {
  opacity: 1;
  transform: translateX(0);
}

/* Footer block (address / phone / email) */
.mobile-menu-foot {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--curly-line);
}
.mobile-menu-foot .mm-info {
  font-family: var(--f-body);
  color: var(--curly-text-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}
.mobile-menu-foot .mm-info p { margin: 0 0 8px; }
.mobile-menu-foot .mm-info p:last-child { margin-bottom: 0; }
.mobile-menu-foot .mm-info a {
  color: var(--curly-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.mobile-menu-foot .mm-info a:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}

/* Stagger the nav items in on open for a touch of polish */
.mobile-menu .mobile-menu-nav li {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.45s cubic-bezier(0.77, 0, 0.175, 1),
              transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-menu.open .mobile-menu-nav li {
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu.open .mobile-menu-nav li:nth-child(1) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(2) { transition-delay: 0.22s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(3) { transition-delay: 0.26s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(4) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(5) { transition-delay: 0.34s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(6) { transition-delay: 0.38s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(7) { transition-delay: 0.42s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(8) { transition-delay: 0.46s; }

/* Narrow viewport adjustments */
@media (max-width: 540px) {
  .mobile-menu-panel { padding: 28px 28px; }
  .mobile-menu-nav a { font-size: 19px; padding: 15px 0; }
}

/* ====================================================================
   5. HERO — SPLIT SLIDER (the centrepiece)
   ==================================================================== */
.hero-split {
  position: relative;
  min-height: 100vh;
  background: var(--c-ink);
  overflow: hidden;
}
.hero-split-slides {
  position: relative;
  height: 100vh;
  min-height: 720px;
}
.hero-split-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--e-out), visibility 1s var(--e-out);
}
.hero-split-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Two halves of each slide */
.split-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}
.split-half--left  { left: 0; }
.split-half--right { right: 0; }
.split-half-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s var(--e-soft);
}
.is-active .split-half-bg { transform: scale(1); }
.split-half-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,20,16,0.2) 0%, rgba(26,20,16,0.55) 100%);
}
.split-half--right .split-half-overlay {
  background: linear-gradient(180deg, rgba(110,32,24,0.25) 0%, rgba(110,32,24,0.55) 100%);
}

/* Centred caption stamp */
.hero-split-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--e-out) 0.4s;
}
.is-active .hero-split-stamp { opacity: 1; pointer-events: auto; }
.hero-stamp-script {
  font-family: var(--f-script);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--c-cream);
  font-style: italic;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.hero-stamp-eyebrow {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-cream);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.hero-stamp-eyebrow::before, .hero-stamp-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-cream);
}
.hero-stamp-title {
  font-family: var(--f-display);
  font-size: clamp(4rem, 11vw, 9rem);
  font-weight: 400;
  color: var(--c-cream);
  line-height: 0.95;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero-stamp-title em {
  font-style: italic;
  color: var(--c-blush);
}
.hero-stamp-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(249, 241, 232, 0.9);
  max-width: 460px;
  margin: 0 auto 30px;
}

/* Half labels (small text on each side) */
.split-label {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--c-cream);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--e-out) 0.6s, transform 1.2s var(--e-out) 0.6s;
}
.is-active .split-label { opacity: 1; }
.split-label--left  { left: 6%; transform: translateY(-50%) translateX(-30px); }
.split-label--right { right: 6%; transform: translateY(-50%) translateX(30px); text-align: right; }
.is-active .split-label--left  { transform: translateY(-50%) translateX(0); }
.is-active .split-label--right { transform: translateY(-50%) translateX(0); }
.split-label small {
  display: block;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(249, 241, 232, 0.7);
  margin-bottom: 6px;
}

/* Slider controls */
.hero-split-nav {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.hero-split-dot {
  width: 36px;
  height: 1px;
  background: rgba(249, 241, 232, 0.35);
  cursor: pointer;
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
.hero-split-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--c-cream);
  transition: width 0s linear;
}
.hero-split-dot.is-active::after {
  width: 100%;
  transition: width 6.5s linear;
}
.hero-split-dot:hover { background: rgba(249, 241, 232, 0.6); }

.hero-split-arrows {
  position: absolute;
  bottom: 36px;
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(249, 241, 232, 0.4);
  background: transparent;
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--e-out);
}
.hero-split-arrows:hover { background: var(--c-cream); color: var(--c-ink); border-color: var(--c-cream); }
.hero-split-arrows svg { width: 20px; height: 20px; }
.hero-split-arrows--prev { left: 4%; }
.hero-split-arrows--next { right: 4%; }

/* Vertical slide counter */
.hero-split-counter {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left top;
  z-index: 5;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(249, 241, 232, 0.7);
  display: flex;
  gap: 14px;
  align-items: center;
}
.hero-split-counter .num-current { color: var(--c-cream); font-size: 14px; }
.hero-split-counter .line { width: 40px; height: 1px; background: rgba(249, 241, 232, 0.4); display: inline-block; }

/* ====================================================================
   6. WORKING HOURS STRIP (Curly-style)
   ==================================================================== */
.hours-strip {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 60px 0;
  position: relative;
  z-index: 5;
}
.hours-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: center;
}
.hours-strip-cell {
  padding: 20px 30px;
  position: relative;
}
.hours-strip-cell + .hours-strip-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(249, 241, 232, 0.18);
}
.hours-strip-label {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-blush);
  margin-bottom: 14px;
  display: block;
}
.hours-strip-value {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  color: var(--c-cream);
  line-height: 1;
}
.hours-strip-value em {
  font-style: italic;
  color: var(--c-blush);
}
.hours-strip-sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--c-muted);
  font-style: italic;
}

/* ====================================================================
   7. WELCOME / IMAGE-TEXT ALTERNATING SECTIONS (Curly-style)
   ==================================================================== */
.image-text {
  padding: 130px 0;
  position: relative;
  background: var(--c-cream);
}
.image-text--alt { background: var(--c-cream-2); }
.image-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.image-text--reverse .image-text-grid {
  direction: rtl;
}
.image-text--reverse .image-text-grid > * { direction: ltr; }

.image-text-image {
  position: relative;
}
.image-text-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.95);
}
.image-text-image::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  right: 30px;
  bottom: 30px;
  border: 1px solid var(--c-burgundy);
  z-index: -1;
  pointer-events: none;
}
.image-text--reverse .image-text-image::before {
  left: 30px;
  right: -30px;
}

/* "Master / Shop" style label above section title */
.section-tag {
  font-family: var(--f-script);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--c-blush-deep);
  font-style: italic;
  display: block;
  margin-bottom: -15px;
  line-height: 1;
}

.image-text-text h2 {
  margin-bottom: 24px;
}
.image-text-text p {
  color: var(--c-text);
  font-size: 1.05rem;
  margin-bottom: 1.2em;
}
.image-text-text .lead {
  margin-bottom: 28px;
}
.image-text-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ====================================================================
   8. SERVICES PREVIEW (homepage)
   ==================================================================== */
.services-preview {
  padding: 130px 0;
  background: var(--c-cream);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.service-card {
  padding: 50px 30px;
  text-align: center;
  border-bottom: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  background: transparent;
  transition: background 0.4s var(--e-out);
  position: relative;
}
.service-card:nth-child(4n) { border-right: 0; }
.service-card:hover {
  background: var(--c-pearl);
}
.service-card .service-num {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  display: block;
  margin-bottom: 18px;
}
.service-card h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 16px;
}
.service-card .service-desc {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0 0 22px;
}
.service-card .service-price {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  font-weight: 500;
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
  display: inline-block;
  min-width: 80px;
}

/* ====================================================================
   9. GALLERY PREVIEW (homepage 3-image strip)
   ==================================================================== */
.gallery-preview { padding: 130px 0; background: var(--c-cream); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--c-cream-2);
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--e-out), filter 0.6s var(--e-out);
  filter: saturate(0.95);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(26,20,16,0.55) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--e-out);
}
.gallery-item:hover img { transform: scale(1.06); filter: saturate(1.1); }
.gallery-item:hover::after { opacity: 1; }
.gallery-tag {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-burgundy);
  padding: 8px 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--e-out), transform 0.4s var(--e-out);
}
.gallery-item:hover .gallery-tag { opacity: 1; transform: translateY(0); }

/* ====================================================================
   10. TESTIMONIALS
   ==================================================================== */
.testimonials {
  padding: 140px 0;
  background: var(--c-cream-2);
  position: relative;
}
.testimonial-track {
  display: grid;
  gap: 60px;
  max-width: 900px;
  margin: 0 auto;
}
.testimonial {
  text-align: center;
  position: relative;
  padding: 0 40px;
}
.quote-mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: var(--c-burgundy);
  display: block;
  margin: 0 auto 0;
  height: 60px;
  opacity: 0.7;
}
.testimonial p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.45;
  color: var(--c-ink);
  font-weight: 400;
  margin: 0 0 32px;
}
.testimonial .who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.testimonial .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--c-burgundy);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 400;
}
.testimonial .who > div > div {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.testimonial .who > div > span {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  display: block;
  margin-top: 4px;
}

/* ====================================================================
   11. STATS BAND
   ==================================================================== */
.stats-band {
  padding: 100px 0;
  background: var(--c-burgundy);
  color: var(--c-cream);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.stats-grid .stat-num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-cream);
  display: block;
  margin-bottom: 10px;
}
.stats-grid .stat-num em { color: var(--c-blush); font-style: italic; }
.stats-grid .stat-label {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-blush);
}

/* ====================================================================
   12. VISIT / HOURS CARD (homepage)
   ==================================================================== */
.visit { padding: 130px 0; background: var(--c-cream); }
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.visit-card {
  background: var(--c-pearl);
  padding: 50px;
  border: 1px solid var(--c-line);
  position: relative;
}
.visit-card::before {
  content: "";
  position: absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 1px solid var(--c-line);
  pointer-events: none;
}
.visit-card h4 {
  margin: 0 0 18px;
  color: var(--c-burgundy);
}
.visit-card h4 + h4 { margin-top: 32px; }
.visit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted var(--c-line);
  font-family: var(--f-serif);
}
.visit-row:last-of-type { border-bottom: 0; }
.visit-row .day {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.visit-row .time {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-text);
  font-size: 1.05rem;
}
.visit-row.is-closed .time { color: var(--c-muted); }
.visit-row.today { background: rgba(110, 32, 24, 0.05); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.visit-row.today .time { color: var(--c-burgundy); font-weight: 500; }
.address-block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--c-line);
}
.address-block .addr-text {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-text);
  margin: 0 0 12px;
  line-height: 1.6;
}
.address-block .phone {
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--c-burgundy);
  font-style: italic;
}

/* ====================================================================
   13. FINAL CTA
   ==================================================================== */
.cta-final {
  padding: 140px 0;
  background: var(--c-ink);
  color: var(--c-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "Mirror";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20rem, 35vw, 36rem);
  color: rgba(249, 241, 232, 0.04);
  pointer-events: none;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.cta-final h2 {
  color: var(--c-cream);
  font-size: clamp(2.5rem, 5.5vw, 4.8rem);
  position: relative;
  z-index: 2;
}
.cta-final h2 em { color: var(--c-blush); }
.cta-final p {
  font-family: var(--f-serif);
  font-style: italic;
  color: rgba(249, 241, 232, 0.85);
  font-size: 1.2rem;
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}
.cta-final .btn { position: relative; z-index: 2; }

/* ====================================================================
   14. FOOTER
   ==================================================================== */
.footer {
  background: var(--c-cream-2);
  color: var(--c-text);
  padding: 100px 0 30px;
  position: relative;
}
.footer-mark {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  color: var(--c-burgundy);
  margin: 0 0 60px;
  text-align: center;
  line-height: 1;
}
.footer-mark .script {
  font-family: var(--f-script);
  font-style: italic;
  display: inline-block;
  color: var(--c-burgundy);
  margin-left: -10px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--c-line);
}
.footer-col h5 {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 22px;
}
.footer-col p,
.footer-col li {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: 1rem;
  line-height: 1.8;
}
.footer-col ul li {
  padding: 4px 0;
  font-style: normal;
  font-family: var(--f-serif);
}
.footer-col a {
  color: var(--c-text);
  font-style: italic;
  transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--c-burgundy); }

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.social-row a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-burgundy);
  transition: all 0.3s var(--e-out);
}
.social-row a svg {
  width: 18px;
  height: 18px;
}
.social-row a:hover {
  background: var(--c-burgundy);
  border-color: var(--c-burgundy);
  color: var(--c-cream);
  transform: translateY(-2px);
}
.footer-bot {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ====================================================================
   15. PAGE BANNER (inner pages)
   ==================================================================== */
.page-banner {
  padding: 200px 0 100px;
  text-align: center;
  background: var(--c-cream-2);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 320px;
  height: 320px;
  border: 1px solid var(--c-blush-deep);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.4;
}
.page-banner::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -8%;
  width: 240px;
  height: 240px;
  border: 1px solid var(--c-blush-deep);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.3;
}
.page-banner-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.page-banner h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin: 0 0 18px;
}
.page-banner p {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: 1.15rem;
  line-height: 1.6;
}
.page-banner .crumbs {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin-bottom: 28px;
}
.page-banner .crumbs a:hover { color: var(--c-ink); }
.page-banner .crumbs .sep { margin: 0 12px; color: var(--c-muted); }

/* ====================================================================
   16. SERVICES PAGE (full menu)
   ==================================================================== */
.service-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--c-line);
}
.service-section:last-of-type { border-bottom: 0; }
.service-section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  margin-bottom: 50px;
  align-items: start;
}
.service-section-head .num {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--c-burgundy);
  width: 200px;
}
.service-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0 0 16px;
}

.service-list {
  display: grid;
  gap: 0;
}
.service-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px dotted var(--c-line);
  align-items: center;
}
.service-row:last-child { border-bottom: 0; }
.service-row .name {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-ink);
}
.service-row .desc {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.service-row .price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.service-row .price-amount,
.service-row .price:not(.price-amount):not(.price-divider):not(.price-book) {
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--c-burgundy);
  font-style: italic;
  font-weight: 500;
}
.service-row .price-amount {
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--c-burgundy);
  font-style: italic;
  font-weight: 500;
}
.service-row .price-divider {
  width: 30px;
  height: 1px;
  background: var(--c-line);
}
.service-row .price-book a,
.vagaro-book-link {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.3s ease;
}
.service-row .price-book a:hover,
.vagaro-book-link:hover { color: var(--c-ink); }

/* ====================================================================
   17. PRICING PAGE — accordion list
   ==================================================================== */
.pricing-accordion {
  max-width: 920px;
  margin: 0 auto;
}
.pricing-item {
  border-bottom: 1px solid var(--c-line);
}
.pricing-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0;
  cursor: pointer;
  list-style: none;
  gap: 30px;
}
.pricing-summary::-webkit-details-marker { display: none; }
.pricing-summary h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400;
  color: var(--c-ink);
  margin: 0;
  flex: 1;
  transition: color 0.3s ease;
}
.pricing-summary .pricing-num {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  width: 60px;
  flex-shrink: 0;
}
.pricing-summary .pricing-from {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--c-burgundy);
  flex-shrink: 0;
}
.pricing-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s var(--e-out);
}
.pricing-toggle::before, .pricing-toggle::after {
  content: "";
  position: absolute;
  background: var(--c-ink);
  transition: all 0.3s var(--e-out);
}
.pricing-toggle::before { width: 14px; height: 1px; }
.pricing-toggle::after { width: 1px; height: 14px; }
[open] .pricing-toggle::after { transform: rotate(90deg); opacity: 0; }
[open] .pricing-toggle { background: var(--c-burgundy); border-color: var(--c-burgundy); }
[open] .pricing-toggle::before { background: var(--c-cream); }
[open] .pricing-summary h3 { color: var(--c-burgundy); font-style: italic; }

.pricing-detail {
  padding: 0 0 36px 60px;
  display: grid;
  gap: 20px;
}
.pricing-detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--c-line);
  align-items: baseline;
}
.pricing-detail-row:last-child { border-bottom: 0; }
.pricing-detail-row .name {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  color: var(--c-text);
}
.pricing-detail-row .name small {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}
.pricing-detail-row .amt {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--c-burgundy);
}

/* ====================================================================
   18. GALLERY PAGE — masonry, filters, lightbox
   ==================================================================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 auto 60px;
  padding-bottom: 24px;
}
.filter-chip {
  padding: 10px 22px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: all 0.3s var(--e-out);
}
.filter-chip:hover { border-color: var(--c-burgundy); color: var(--c-burgundy); }
.filter-chip.is-active {
  background: var(--c-burgundy);
  color: var(--c-cream);
  border-color: var(--c-burgundy);
}

/* CSS columns masonry */
.masonry-gallery {
  column-count: 3;
  column-gap: 30px;
}
@media (max-width: 980px) { .masonry-gallery { column-count: 2; } }
@media (max-width: 600px) { .masonry-gallery { column-count: 1; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 30px;
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.5s var(--e-out), transform 0.5s var(--e-out);
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s var(--e-out), filter 0.6s var(--e-out);
  filter: saturate(0.95);
}
.masonry-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(110,32,24,0.7) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--e-out);
}
.masonry-item:hover img { transform: scale(1.05); filter: saturate(1.1); }
.masonry-item:hover::after { opacity: 1; }
.masonry-item .gallery-tag {
  bottom: 24px;
  left: 24px;
  background: var(--c-cream);
  color: var(--c-burgundy);
}
.masonry-item.is-hidden { display: none; }

/* Old grid gallery fallback (for compatibility) */
.full-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.full-gallery .gallery-item { aspect-ratio: 4/5; }
@media (max-width: 980px) { .full-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .full-gallery { grid-template-columns: 1fr; } }

/* ====================================================================
   19. BOOK PAGE
   ==================================================================== */
.book-section {
  padding: 100px 0 130px;
  background: var(--c-cream);
}
.book-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
}
.book-widget {
  background: var(--c-pearl);
  padding: 40px;
  border: 1px solid var(--c-line);
  position: relative;
}
.book-widget::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px solid var(--c-line);
  pointer-events: none;
}
.book-widget .vagaro-host { position: relative; z-index: 2; }
.book-info h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  margin: 30px 0 12px;
  color: var(--c-burgundy);
}
.book-info p { color: var(--c-text); }
.book-info ul { margin: 16px 0; }
.book-info ul li {
  padding: 10px 0;
  border-bottom: 1px dotted var(--c-line);
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-text);
  position: relative;
  padding-left: 24px;
}
.book-info ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-burgundy);
  font-style: normal;
}

/* ====================================================================
   20. CONTACT PAGE
   ==================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  margin-bottom: 100px;
}
.contact-info h3 {
  margin: 0 0 28px;
}
.contact-info-list { display: grid; gap: 30px; margin-bottom: 30px; }
.contact-info-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 24px;
  align-items: start;
}
.contact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--c-burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-burgundy);
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-info-item h4 { margin: 0 0 4px; color: var(--c-ink); }
.contact-info-item p,
.contact-info-item a {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-text);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.contact-info-item a { color: var(--c-burgundy); }
.contact-hours-list { padding: 0; margin: 0; }
.contact-hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dotted var(--c-line);
  font-family: var(--f-serif);
}
.contact-hours-list li > span:first-child {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.contact-hours-list li > span:last-child {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-text);
}
.contact-map {
  width: 100%;
  height: 500px;
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.3) sepia(0.1); }

/* ====================================================================
   21. ABOUT PAGE
   ==================================================================== */
.about-intro { padding: 100px 0; background: var(--c-cream); }
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.about-intro-image {
  position: relative;
}
.about-intro-image img {
  width: 100%;
  display: block;
  filter: saturate(0.95);
}
.about-intro-image::before {
  content: "";
  position: absolute;
  top: -30px; left: -30px;
  width: 80px; height: 80px;
  border: 1px solid var(--c-burgundy);
  border-right: 0;
  border-bottom: 0;
}
.about-intro-image::after {
  content: "";
  position: absolute;
  bottom: -30px; right: -30px;
  width: 80px; height: 80px;
  border: 1px solid var(--c-burgundy);
  border-left: 0;
  border-top: 0;
}
.about-signature {
  margin-top: 40px;
  font-family: var(--f-script);
  font-size: 3.5rem;
  color: var(--c-burgundy);
  font-style: italic;
  line-height: 1;
}
.about-signature small {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-style: normal;
  margin-top: 8px;
}

.philosophy {
  padding: 130px 0;
  background: var(--c-cream-2);
}
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-top: 60px;
}
.philosophy-card {
  text-align: center;
}
.philosophy-card .num {
  font-family: var(--f-display);
  font-size: 4rem;
  font-style: italic;
  font-weight: 400;
  color: var(--c-blush-deep);
  line-height: 1;
  margin-bottom: 20px;
  display: block;
}
.philosophy-card h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  margin: 0 0 14px;
}
.philosophy-card p {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ====================================================================
   22. JOURNAL / BLOG (NEW page)
   ==================================================================== */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.journal-card {
  display: block;
  background: var(--c-pearl);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-out);
}
.journal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-mid);
}
.journal-card-image {
  aspect-ratio: 4/3;
  background: var(--c-cream-2);
  overflow: hidden;
}
.journal-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--e-out);
}
.journal-card:hover .journal-card-image img { transform: scale(1.06); }
.journal-card-body {
  padding: 30px;
}
.journal-card .date {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  display: block;
  margin-bottom: 12px;
}
.journal-card h3 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.3;
  color: var(--c-ink);
  transition: color 0.3s ease;
}
.journal-card:hover h3 { color: var(--c-burgundy); font-style: italic; }
.journal-card p {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* ====================================================================
   23. LIGHTBOX
   ==================================================================== */
.lb {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 16, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--e-out), visibility 0.4s var(--e-out);
}
.lb.open { opacity: 1; visibility: visible; }
.lb img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border: 0;
  box-shadow: 0 30px 100px rgba(0,0,0,0.6);
}
.lb-close {
  position: absolute;
  top: 30px; right: 30px;
  width: 50px; height: 50px;
  background: transparent;
  border: 1px solid var(--c-cream);
  border-radius: 50%;
  color: var(--c-cream);
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.lb-close:hover { background: var(--c-cream); color: var(--c-ink); }

/* ====================================================================
   24. REVEAL ANIMATIONS
   ==================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--e-out), transform 0.9s var(--e-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--e-out), transform 0.9s var(--e-out);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

/* ====================================================================
   25. MARQUEE (decorative scrolling)
   ==================================================================== */
.marquee {
  background: var(--c-burgundy);
  color: var(--c-cream);
  padding: 26px 0;
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 80px;
  animation: marquee 38s linear infinite;
  white-space: nowrap;
}
.marquee-track > span {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-cream);
  display: inline-flex;
  align-items: center;
  gap: 80px;
}
.marquee-track > span::after {
  content: "✦";
  color: var(--c-blush);
  font-style: normal;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ====================================================================
   26. RESPONSIVE
   ==================================================================== */
@media (max-width: 1100px) {
  :root { --container-pad: 32px; }
  .nav-links { gap: 26px; }
  .image-text-grid { gap: 60px; }
  .visit-grid { gap: 60px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(2n) { border-right: 0; }
  .service-card:nth-child(2n+1) { border-right: 1px solid var(--c-line); }
}

@media (max-width: 880px) {
  :root { --container-pad: 24px; }
  body { font-size: 17px; }
  .section, .image-text, .services-preview, .gallery-preview, .visit, .testimonials, .cta-final {
    padding: 80px 0;
  }
  .nav-links, .nav-cta-desktop { display: none; }
  .burger { display: block; }

  .hero-split-slides { min-height: 600px; height: 90vh; }
  .split-half { width: 100%; }
  .split-half--right { display: none; }
  .hero-stamp-title { font-size: clamp(3rem, 14vw, 5rem); }
  .split-label { display: none; }
  .hero-split-counter { display: none; }
  .hero-split-arrows--prev { left: 14px; }
  .hero-split-arrows--next { right: 14px; }

  .hours-strip-grid { grid-template-columns: 1fr; gap: 0; }
  .hours-strip-cell { padding: 22px 20px; border-bottom: 1px solid rgba(249, 241, 232, 0.12); }
  .hours-strip-cell + .hours-strip-cell::before { display: none; }
  .hours-strip-cell:last-child { border-bottom: 0; }

  .image-text-grid { grid-template-columns: 1fr; gap: 50px; }
  .image-text--reverse .image-text-grid { direction: ltr; }
  .image-text-image::before { display: none; }

  .gallery-grid { grid-template-columns: 1fr; gap: 20px; }
  .visit-grid { grid-template-columns: 1fr; gap: 50px; }
  .visit-card { padding: 36px 26px; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-mark { font-size: 2.6rem; margin-bottom: 30px; }

  .service-section-head { grid-template-columns: 1fr; gap: 20px; }
  .service-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .service-row .price { text-align: left; align-items: flex-start; flex-direction: row; }

  .pricing-detail { padding-left: 0; }
  .pricing-summary .pricing-num { display: none; }

  .contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .book-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .philosophy-grid { grid-template-columns: 1fr; gap: 30px; }
  .journal-grid { grid-template-columns: 1fr; gap: 30px; }

  .testimonial p { font-size: 1.3rem; }
  .testimonial { padding: 0 20px; }

  .page-banner { padding: 160px 0 70px; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card { border-right: 0 !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2rem; }
  .btn { padding: 14px 24px; font-size: 11px; }
  .footer-bot { flex-direction: column; align-items: flex-start; }
}

/* 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;
  }
}

/* Print */
@media print {
  .site-header, .footer, .hero-split-nav, .hero-split-arrows, .marquee, .burger, .mobile-menu, .lb {
    display: none !important;
  }
  body { background: white; color: black; }
}

/* ====================================================================
   27. SUPPLEMENTARY (homepage v4 helper classes)
   ==================================================================== */

/* Service card link arrow on homepage */
.service-card .service-card-link {
  display: inline-block;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  font-weight: 500;
  transition: color .3s var(--e-out);
}
.service-card:hover .service-card-link { color: var(--c-burgundy-2); }
.service-card .service-card-num {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  display: block;
  margin-bottom: 18px;
}

/* Homepage visit card section */
.visit-card-section { padding: 120px 0; background: var(--c-cream); }
.visit-card-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: stretch;
  background: var(--c-pearl);
  border: 1px solid var(--c-line);
  padding: 60px;
  border-radius: var(--r-md);
}
.visit-card-info h2 { margin: 14px 0 22px; }
.visit-card-info > p { color: var(--c-text); margin-bottom: 22px; }
.visit-meta {
  list-style: none; padding: 0; margin: 0 0 32px;
  border-top: 1px solid var(--c-line);
}
.visit-meta li {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--f-serif);
  color: var(--c-text);
}
.visit-meta li strong {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-burgundy);
  min-width: 90px;
}
.visit-meta li a { color: var(--c-ink); border-bottom: 1px solid var(--c-blush-deep); }
.visit-meta li a:hover { color: var(--c-burgundy); }

.visit-card-hours {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 50px 40px;
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; justify-content: center;
}
.visit-card-hours h3 {
  color: var(--c-cream);
  font-family: var(--f-display);
  font-size: 2.2rem;
  margin: 12px 0 26px;
}
.visit-card-hours .hours-list {
  list-style: none; padding: 0; margin: 0;
}
.visit-card-hours .hours-list li {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(249, 241, 232, 0.14);
  font-family: var(--f-serif);
  font-size: 1.05rem;
}
.visit-card-hours .hours-list li:last-child { border-bottom: 0; }
.visit-card-hours .hours-list li > span:first-child {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-blush);
}
.visit-card-hours .hours-list li.is-today { color: var(--c-blush); }
.visit-card-hours .hours-list li.is-today > span:first-child { color: var(--c-cream); }

/* Stat item wrapper used by .stats-grid items on homepage */
.stats-grid .stat-item { text-align: center; padding: 0 12px; }

/* Booking page extras */
.booking-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 60px 0 80px;
}
.booking-callout {
  background: var(--c-pearl);
  border: 1px solid var(--c-line);
  padding: 40px 32px;
  border-radius: var(--r-sm);
}
.booking-callout .step {
  font-family: var(--f-script);
  font-size: 3rem;
  color: var(--c-burgundy);
  display: block;
  line-height: 1;
  margin-bottom: 14px;
}
.booking-callout h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 12px;
}
.booking-callout p { color: var(--c-muted); font-family: var(--f-serif); font-size: 1rem; }

.vagaro-frame {
  background: var(--c-pearl);
  padding: 30px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  min-height: 300px;
}
.booking-fallback { text-align: center; margin-top: 30px; color: var(--c-muted); }
.booking-fallback a { color: var(--c-burgundy); border-bottom: 1px solid var(--c-blush-deep); }

.cta-final-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-final .eyebrow { justify-content: center; }

/* Contact page */
.contact-block {
  padding: 24px 0;
  border-bottom: 1px solid var(--c-line);
}
.contact-block:last-child { border-bottom: 0; }
.contact-block h4 {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin: 0 0 10px;
}
.contact-block p, .contact-block a {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  color: var(--c-text);
  line-height: 1.5;
}
.contact-block a { color: var(--c-ink); border-bottom: 1px solid var(--c-blush-deep); }
.contact-block a:hover { color: var(--c-burgundy); }
.contact-block .hours-mini {
  list-style: none; padding: 0; margin: 0;
}
.contact-block .hours-mini li {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-family: var(--f-serif);
  border-bottom: 1px dotted var(--c-line);
}
.contact-block .hours-mini li:last-child { border-bottom: 0; }
.contact-block .hours-mini li.is-today { color: var(--c-burgundy); }
.contact-socials { margin-top: 6px; }
.map-wrap {
  position: relative;
  height: 100%;
  min-height: 520px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.map-wrap iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(0.5) contrast(0.95);
}

/* Generic entry / page content */
.entry-content { font-family: var(--f-serif); font-size: 1.1rem; line-height: 1.7; color: var(--c-text); }
.entry-content h2 { font-family: var(--f-display); font-size: 2.4rem; font-weight: 400; margin: 40px 0 18px; }
.entry-content h3 { font-family: var(--f-display); font-size: 1.7rem; font-weight: 400; margin: 32px 0 14px; }
.entry-content p { margin: 0 0 20px; }
.entry-content a { color: var(--c-burgundy); border-bottom: 1px solid var(--c-blush-deep); }
.entry-content blockquote {
  border-left: 3px solid var(--c-burgundy);
  margin: 32px 0;
  padding: 4px 0 4px 28px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--c-ink);
}
.has-drop-cap p:first-of-type::first-letter,
.has-drop-cap::first-letter {
  font-family: var(--f-display);
  font-size: 4.5rem;
  float: left;
  line-height: 0.9;
  margin: 8px 14px 0 0;
  color: var(--c-burgundy);
}

/* 404 page */
.error-404 {
  padding: 160px 0 120px;
  text-align: center;
}
.error-404 .big-num {
  font-family: var(--f-display);
  font-size: clamp(8rem, 24vw, 18rem);
  line-height: 0.9;
  color: var(--c-burgundy);
  font-style: italic;
  margin-bottom: 12px;
}

/* Responsive — homepage extras */
@media (max-width: 980px) {
  .visit-card-grid { grid-template-columns: 1fr; padding: 40px 24px; gap: 30px; }
  .booking-callouts { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .visit-card-section { padding: 80px 0; }
  .visit-card-hours { padding: 36px 26px; }
}



/* ====================================================================
   29. CURLY SPLIT-SLIDER — v5.0 (refined)

   Faithful homage to curly.qodeinteractive.com/split-slider/, adapted
   for Mirror Mirror Hairstyles (Kirkwood, MO):

   - Full-page slider (100vh) replaces the scrolling homepage entirely
   - 5 slides; each splits 50/50 left/right
   - During transitions LEFT track slides UP, RIGHT track slides DOWN
   - HERO script: Yellowtail (brushy, bold) in gold
   - WATERMARKS:    Allura (elegant, thin) in faded gold
   - SLIDE HEADINGS: Jost 800 ALL-CAPS, tight tracking
   - Auto dark/light theme: header logo, burger lines, and dots all
     flip color when the visible right-half panel is dark
   - Boxed-letter brand: [M] I R R O R, mimicking [C] U R L Y
   - Mobile: stacks halves vertically and disables track transforms
   ==================================================================== */

:root {
  --curly-gold:        #8b322c;       /* primary accent — Desert Rose terracotta */
  --curly-gold-soft:   #a4413a;       /* hover/lighter terracotta */
  --curly-rose:        #d48662;       /* desert rose peach — secondary accent */
  --curly-rose-soft:   #e9c5b0;       /* soft peach wash */
  --curly-lavender:    #8381a6;       /* lavender accent */
  --curly-brown:       #723715;       /* saddle brown — deeper accent */
  --curly-gold-bg:     #f3d9c8;       /* faded peach for big bg script on light */
  --curly-gold-bg-d:   #5a3528;       /* faded warm brown for big bg script on dark */
  --curly-cream:       #faf3ee;       /* warm pink-beige cream */
  --curly-cream-2:     #f3e3d8;       /* deeper cream wash */
  --curly-white:       #fdf8f4;       /* near-white warm */
  --curly-pure-white:  #ffffff;       /* pure white — for true backgrounds */
  --curly-dark:        #26160c;       /* deep espresso — Desert Rose #5 */
  --curly-dark-2:      #3a261b;       /* slightly warmer dark */
  --curly-text:        #26160c;       /* body text — deep espresso */
  --curly-text-soft:   #8a6f5e;       /* warm muted brown — captions */
  --curly-text-dark-bg:#d4bba8;       /* warm light tan on dark backgrounds */
  --curly-line:        #e6d3c3;       /* hairline on light */
  --curly-line-dark:   #3a261b;       /* hairline on dark */
}

/* ====================================================================
   29.0 BODY + HEADER ADAPTATION ON HOMEPAGE
   ==================================================================== */
body.home-curly {
  overflow: hidden;
  height: 100vh;
  background: var(--curly-cream);
}
body.home-curly .footer { display: none; }

body.home-curly .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent !important;
  border-bottom: 0 !important;
  z-index: 100;
  padding: 26px 0;
  pointer-events: none;
}
body.home-curly .site-header .nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 40px;
  max-width: none;
}

/* Hide inline nav + Book CTA on home; only logo + burger remain */
body.home-curly .nav-links,
body.home-curly .nav-cta-desktop { display: none !important; }

body.home-curly .burger {
  display: flex !important;
  margin-left: auto;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
body.home-curly .burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--curly-text);
  transition: background .35s ease;
}
/* Burger flips white when the RIGHT half is dark (burger sits top-right) */
body.curly-burger-on-dark .burger span { background: var(--curly-white); }

/* ----- BOXED-LETTER BRAND ([M] I R R O R) — homepage only ----- */
/* Hide the new boxed-letter spans on inner pages (default) */
.brand-box,
.brand-letters { display: none; }

body.home-curly .brand-script,           /* hide italic "Mirror" mark on home */
body.home-curly .brand-mark { display: none; }

body.home-curly .brand-curly {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  border: 0;
  padding: 0;
}
body.home-curly .brand-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--curly-text);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--curly-text);
  text-transform: uppercase;
  background: rgba(253, 248, 243, 0.55);   /* faint cream wash for legibility over photos */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}
body.home-curly .brand-letters {
  display: inline-flex;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: var(--curly-text);
  text-transform: uppercase;
  /* Stronger halo so dark letters stay readable over any photo background */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(255, 255, 255, 0.7);
  transition: color .35s ease, text-shadow .35s ease;
}
/* Brand flips white on dark slides */
body.curly-on-dark .brand-box {
  border-color: var(--curly-white);
  color: var(--curly-white);
  background: rgba(24, 22, 19, 0.45);
}
body.curly-on-dark .brand-letters {
  color: var(--curly-white);
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ====================================================================
   29.1 SLIDER STAGE
   ==================================================================== */
.curly-slider {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: var(--curly-cream);
  z-index: 1;
}

.curly-track {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 100vh;
  overflow: visible;
}
.curly-track--left  { left: 0; }
.curly-track--right { right: 0; }

.curly-track-inner {
  display: flex;
  flex-direction: column;
  height: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  /* No CSS transition here — the JS uses the Web Animations API to drive
     the slide animation directly. Keeping a CSS transition would cause it
     to fight the WAAPI animation when the final transform is committed. */
}
/* Legacy hook (kept for safety; the JS no longer relies on it) */
.curly-track-inner.no-anim {
  transition: none !important;
}

.curly-half {
  width: 100%;
  height: 100vh;
  flex: 0 0 100vh;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* IMAGE half — full-bleed bg */
.curly-half--image .curly-half-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--curly-cream); /* fallback while loading */
  will-change: transform;
}

/* When an image half is flagged as visually dark, drop a subtle gradient
   from the top-left corner so the white CURLY mark (and any cursive script
   overlay) read crisply over busy photography — mirrors the source. */
.curly-half--image[data-overlay-dark="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.10) 35%,
    rgba(0, 0, 0, 0.00) 60%
  );
}

/* Cursive overlay on image half (e.g. "Kirkwood" on the city/visit photo) */
.curly-half-overlay-script {
  position: absolute;
  left: 6%;
  bottom: 22%;
  font-family: "Allura", "Sacramento", cursive;
  color: var(--curly-white);
  font-size: clamp(4.5rem, 9.5vw, 9rem);
  line-height: 1;
  font-weight: 400;
  z-index: 2;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* TEXT half — content panel */
.curly-half--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
}
.curly-half--text.bg-light  { background: var(--curly-cream); color: var(--curly-text); }
.curly-half--text.bg-dark   { background: var(--curly-dark);  color: var(--curly-white); }
.curly-half--text.bg-white  { background: var(--curly-white); color: var(--curly-text); }

/* HERO variant: anchor the stamp in the lower-mid of the half, left-aligned */
.curly-half--text.curly-half--hero {
  align-items: center;
  justify-content: flex-start;
  padding-left: 8%;
  padding-right: 6%;
}

.curly-text-inner {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 480px;
  padding: 80px 0;
  z-index: 2;
}

/* Hero stamp inner: left-aligned, slightly wider */
.curly-text-inner--hero {
  text-align: left;
  max-width: 720px;
  padding: 0;
}
/* Left-aligned variant for Working Hours */
.curly-text-inner--left {
  text-align: left;
  max-width: 460px;
}
/* Wide variant for Visit Us 2x2 grid */
.curly-text-inner--wide {
  max-width: 560px;
}

/* Big background script word ("Studio", "Master") sitting BEHIND text.
   Source watermark spans ~64% of half width, so size up the clamp. */
.curly-text-bg-script {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  font-family: "Allura", "Sacramento", cursive;
  font-size: clamp(10rem, 18vw, 18rem);
  line-height: 1;
  color: var(--curly-gold-bg);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.curly-half--text.bg-dark .curly-text-bg-script {
  color: var(--curly-gold);
  opacity: 0.22;
}

/* Eyebrow above the heading: "KIRKWOOD · SINCE 2016" */
.curly-eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--curly-text);
  margin: 0 0 22px;
  display: block;
  position: relative;
  z-index: 3;
}
.curly-half--text.bg-dark .curly-eyebrow { color: var(--curly-white); }

/* HERO STAMP — script "Lovely hair days" + eyebrow + zigzag */
.curly-hero-stamp {
  position: relative;
  z-index: 3;
  text-align: left;
}
.curly-hero-script {
  font-family: "Sail", "Yellowtail", "Sacramento", cursive;
  font-size: clamp(3.5rem, 7.5vw, 7rem);
  line-height: 1.05;
  color: var(--curly-gold);
  margin: 0 0 26px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  font-weight: 400;
  /* Subtle ink-on-paper feel via text-shadow */
  text-shadow: 0 0 0 rgba(186, 158, 111, 0.0);
}
.curly-hero-eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--curly-text);
  margin: 0 0 18px 4px;       /* slight indent so it aligns with the optical baseline of the script */
  display: block;
}
.curly-hero-zigzag {
  display: block;
  margin: 0 0 0 4px;
  width: 110px;
  height: 22px;
  color: var(--curly-gold);
}

/* SLIDE HEADING — bold all-caps sans-serif */
.curly-slide-heading {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--curly-text);
  margin: 0 0 24px;
  line-height: 1.18;
  position: relative;
  z-index: 3;
}
.curly-half--text.bg-dark .curly-slide-heading { color: var(--curly-white); }

/* SLIDE PARAGRAPH */
.curly-slide-text {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
  margin: 0 0 36px;
  position: relative;
  z-index: 3;
}
.curly-half--text.bg-dark .curly-slide-text { color: var(--curly-text-dark-bg); }

/* "READ MORE" link */
.curly-readmore {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--curly-gold);
  position: relative;
  z-index: 3;
  transition: letter-spacing .3s ease, color .3s ease;
}
.curly-readmore:hover {
  letter-spacing: 0.55em;
  color: var(--curly-gold-soft);
}

/* Working Hours rows */
.curly-hours-rows {
  width: 100%;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--curly-line);
  position: relative;
  z-index: 3;
}
.curly-half--text.bg-dark .curly-hours-rows { border-top-color: var(--curly-line-dark); }
.curly-hours-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--curly-line);
  font-family: var(--f-sans);
}
.curly-half--text.bg-dark .curly-hours-rows li { border-bottom-color: var(--curly-line-dark); }
.curly-hours-rows .day {
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--curly-text);
}
.curly-half--text.bg-dark .curly-hours-rows .day { color: var(--curly-white); }
.curly-hours-rows .time {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--curly-text-soft);
}
.curly-half--text.bg-dark .curly-hours-rows .time { color: var(--curly-text-dark-bg); }

.curly-hours-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--curly-text-soft);
  line-height: 1.7;
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 3;
}
.curly-hours-note::before {
  content: '◆';
  color: var(--curly-gold);
  font-size: 8px;
  margin-top: 6px;
  flex: 0 0 auto;
}

/* Visit Us 2x2 contact grid */
.curly-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 50px;
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 3;
}
.curly-loc-card h5 {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--curly-white);
  margin: 0 0 12px;
}
.curly-half--text.bg-light .curly-loc-card h5 { color: var(--curly-text); }
.curly-loc-card p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--curly-text-dark-bg);
}
.curly-half--text.bg-light .curly-loc-card p { color: var(--curly-text-soft); }
.curly-loc-card a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.curly-loc-card a:hover {
  border-bottom-color: var(--curly-gold);
  color: var(--curly-gold);
}

/* ====================================================================
   29.2 PAGINATION DOTS (right edge)
   Adapt color based on current right-panel theme.
   ==================================================================== */
.curly-dots {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.curly-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--curly-text);
  border: 0;
  opacity: 0.32;
  cursor: pointer;
  padding: 0;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.curly-dot.is-active {
  opacity: 1;
  transform: scale(1.45);
}
.curly-dot:hover { opacity: 0.7; }

/* When the visible right-side panel is dark, dots flip to white */
.curly-slider[data-bg="dark"] .curly-dot { background: var(--curly-white); }

/* ====================================================================
   29.3 RESPONSIVE — stack halves vertically on mobile
   ==================================================================== */
@media (max-width: 880px) {
  body.home-curly {
    overflow: auto;
    height: auto;
  }
  body.home-curly .footer { display: block; }
  body.home-curly .site-header { padding: 18px 0; }
  body.home-curly .site-header .nav { padding-left: 20px; padding-right: 20px; }

  .curly-slider {
    position: static;
    height: auto;
    overflow: visible;
  }
  .curly-track {
    position: static;
    width: 100%;
    height: auto;
    transform: none !important;
    transition: none;
  }
  .curly-track-inner { display: contents; }
  .curly-half {
    width: 100%;
    height: auto;
    min-height: 80vh;
    flex: none;
  }
  .curly-half--text { padding: 90px 24px; }
  .curly-text-inner {
    padding: 0;
    max-width: 100%;
  }
  .curly-text-inner--hero { max-width: 100%; }

  /* Visual order is handled in v6.3 (section 43) using CSS grid placement
     for reliability across browsers. */

  .curly-dots { display: none; }

  .curly-loc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .curly-text-bg-script { font-size: clamp(6rem, 22vw, 10rem); }
  .curly-hero-script { font-size: clamp(3.4rem, 14vw, 5.5rem); }
  .curly-half-overlay-script {
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(3.5rem, 14vw, 6rem);
  }
}

/* Reduced-motion: disable track transitions */
@media (prefers-reduced-motion: reduce) {
  .curly-track-inner { transition: none; }
}

/* ====================================================================
   30. EDITORIAL PAGE BANNERS — match the slider's typographic system
   so inner pages (About, Services, Pricing, etc.) feel like one site.
   ==================================================================== */

.page-banner {
  position: relative;
  background: var(--curly-cream);
  padding: 220px 0 100px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--curly-line);
}
.page-banner::before,
.page-banner::after { display: none; }   /* clear any older decorative bg */

.page-banner .crumbs {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
  margin: 0 0 28px;
}
.page-banner .crumbs a { color: var(--curly-gold); }
.page-banner .crumbs a:hover { color: var(--curly-text); }
.page-banner .crumbs .sep {
  margin: 0 12px;
  color: var(--curly-line);
}

.page-banner h1 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--curly-text);
  margin: 0 0 24px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.page-banner h1 em,
.page-banner h1 .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.05em;
  display: inline-block;
  padding: 0 0.08em;
  vertical-align: -0.06em;
}

.page-banner p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--curly-text-soft);
  max-width: 640px;
  margin: 0 auto 26px;
}

/* Decorative gold zigzag under the banner heading — echoes hero stamp */
.page-banner-content::after {
  content: "";
  display: block;
  width: 110px;
  height: 22px;
  margin: 14px auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 22' fill='none' stroke='%23b8956a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 11 L20 2 L38 20 L55 2 L72 20 L90 2 L108 11'/></svg>") center/contain no-repeat;
}

/* ---- Inner-page eyebrow alignment ---- */
.page-banner .eyebrow,
.page-banner .eyebrow.eyebrow--center {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--curly-text);
  font-weight: 500;
  margin: 0 0 18px;
}

/* Section heading polish — keep Playfair italic option, but the
   primary section-title now uses the same Jost 800 caps as the slider */
section .section-title {
  font-family: var(--f-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  color: var(--curly-text);
}
section .section-title em,
section .section-title .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
  font-style: normal;
}

/* Buttons stay as-is but ensure primary uses the editorial gold */
.btn--primary {
  background: var(--curly-text);
  color: var(--curly-cream);
}
.btn--primary:hover {
  background: var(--curly-gold);
  color: var(--curly-white);
}

/* Footer typographic harmony with slider */
.footer h5 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.footer .footer-mark .script {
  font-family: "Yellowtail", "Sacramento", cursive;
  color: var(--curly-gold);
  font-style: normal;
}

@media (max-width: 880px) {
  .page-banner { padding: 140px 0 60px; }
}

/* ========================================================================
   31. INNER-PAGE EDITORIAL UPGRADE  (v5.5 — match the homepage vibe)
   Re-skins every inner-page component (about, services, pricing, contact,
   journal, gallery, booking, single-post, 404) with the same gold/black/
   cream editorial system used by the split-slider — without any sliding.
   Only visual overrides; the PHP/HTML structure is untouched.
   ======================================================================== */

/* ---- Buttons → editorial black ⇄ gold ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: 1px solid var(--curly-text);
  background: var(--curly-text);
  color: var(--curly-cream);
  border-radius: 0;
  transition: background .35s ease, color .35s ease, border-color .35s ease, letter-spacing .3s ease;
}
.btn:hover {
  background: var(--curly-gold);
  border-color: var(--curly-gold);
  color: var(--curly-white);
  letter-spacing: 0.46em;
}
.btn .arrow svg { width: 18px; height: 18px; stroke: currentColor; transition: transform .35s ease; }
.btn:hover .arrow svg { transform: translateX(4px); }
.btn--primary { background: var(--curly-text); color: var(--curly-cream); border-color: var(--curly-text); }
.btn--primary:hover { background: var(--curly-gold); border-color: var(--curly-gold); color: var(--curly-white); }
.btn--cream {
  background: transparent;
  color: var(--curly-text);
  border-color: var(--curly-text);
}
.btn--cream:hover {
  background: var(--curly-text);
  color: var(--curly-cream);
  border-color: var(--curly-text);
}
/* On dark sections (cta-final), invert .btn--cream */
.cta-final .btn--cream {
  background: transparent;
  color: var(--curly-cream);
  border-color: var(--curly-cream);
}
.cta-final .btn--cream:hover {
  background: var(--curly-cream);
  color: var(--curly-text);
}

/* ---- Eyebrow utility (uniform across all pages) ---- */
.eyebrow,
.eyebrow--center,
.eyebrow-light {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--curly-text);
  margin: 0 0 22px;
  position: relative;
}
.eyebrow--center {
  display: block;
  text-align: center;
}
.eyebrow-light { color: var(--curly-cream); }

/* Optional gold dash before eyebrow (used in some templates) */
.eyebrow.eyebrow--with-dash::before,
.about-intro-text .eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--curly-gold);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}

/* ---- Section heads (.section-head) ---- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
  position: relative;
}
.section-head .section-title,
section .section-title {
  font-family: var(--f-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  color: var(--curly-text);
  line-height: 1.18;
  margin: 0 0 18px;
}
section .section-title em,
section .section-title .italic-display,
.section-head h2 em,
.section-head h2 .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
  display: inline-block;
  padding: 0 0.05em;
  vertical-align: -0.04em;
}
.section-head p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--curly-text-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Section wrapper basics ---- */
section.section {
  padding: 110px 0;
  background: var(--curly-cream);
}
section.section--alt {
  background: #fafaf8;          /* very subtle alt bg — almost white */
}
@media (max-width: 880px) {
  section.section { padding: 70px 0; }
}

/* ====================================================================
   31.1  PAGE BANNER — add an optional faded script accent
   The CSS already styles .page-banner. We keep the existing rules but
   add a soft script word baked into the banner that echoes the slider.
   Use by adding `data-script="Story"` to a .page-banner element.
   ==================================================================== */
.page-banner[data-script]::before {
  content: attr(data-script);
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  font-family: "Allura", "Sacramento", cursive;
  font-size: clamp(8rem, 16vw, 16rem);
  line-height: 1;
  color: var(--curly-gold-bg);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.01em;
}
.page-banner .container { position: relative; z-index: 1; }

/* ====================================================================
   31.2  ABOUT-INTRO + IMAGE-TEXT GRIDS
   ==================================================================== */
.about-intro {
  padding: 110px 0;
  background: var(--curly-cream);
}
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.about-intro-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.about-intro-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--curly-line);
  pointer-events: none;
  transform: translate(18px, 18px);
  transition: transform 0.6s var(--e-out);
}
.about-intro-image:hover::after { transform: translate(8px, 8px); }
.about-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.8s ease, transform 8s ease;
}
.about-intro-image:hover img { filter: grayscale(0%); transform: scale(1.04); }

.about-intro-text {
  max-width: 560px;
}
.about-intro-text h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--curly-text);
  margin: 0 0 28px;
}
.about-intro-text h2 em,
.about-intro-text h2 .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.about-intro-text .entry-content,
.about-intro-text p {
  font-family: var(--f-body);
  font-size: 1.07rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
}
.about-intro-text .entry-content p { margin: 0 0 1.1em; }
.about-intro-text .has-drop-cap::first-letter {
  font-family: "Allura", "Sacramento", cursive;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  color: var(--curly-gold);
  margin: 6px 12px 0 -2px;
}

.about-signature {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--curly-line);
  font-family: var(--f-sans);
}
.about-signature span {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 2rem;
  color: var(--curly-gold);
  line-height: 1;
}
.about-signature small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
}

/* Image-text alternating block (about page bottom, etc.) */
.image-text {
  padding: 110px 0;
  background: var(--curly-cream);
}
.image-text--reverse { background: #fafaf8; }
.image-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.image-text--reverse .image-text-grid { direction: rtl; }
.image-text--reverse .image-text-grid > * { direction: ltr; }
.image-text-image {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
}
.image-text-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(15%);
  transition: filter 0.8s ease, transform 8s ease;
}
.image-text-image:hover img { filter: grayscale(0%); transform: scale(1.03); }
.image-text-text {
  max-width: 480px;
}
.image-text-text .section-tag {
  display: inline-block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 1.7rem;
  color: var(--curly-gold);
  line-height: 1;
  margin-bottom: 12px;
}
.image-text-text h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--curly-text);
  margin: 0 0 22px;
}
.image-text-text h2 em,
.image-text-text h2 .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.image-text-text p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
  margin: 0 0 1.1em;
}
.image-text-text p.lead { font-size: 1.18rem; color: var(--curly-text); }
.image-text-actions { margin-top: 30px; }

@media (max-width: 880px) {
  .about-intro-grid,
  .image-text-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-intro-image::after { transform: translate(10px, 10px); }
}

/* ====================================================================
   31.3  PHILOSOPHY / NUMBERED CARDS  (about + book pages)
   ==================================================================== */
.philosophy { padding: 110px 0; background: #fafaf8; }
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.philosophy-card {
  position: relative;
  background: var(--curly-white);
  border: 1px solid var(--curly-line);
  padding: 56px 36px 38px;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out), border-color 0.4s var(--e-out);
}
.philosophy-card:hover {
  transform: translateY(-4px);
  border-color: var(--curly-gold);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.18);
}
.philosophy-card .num,
.philosophy-card .step {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--curly-gold);
  margin-bottom: 24px;
}
.philosophy-card .num::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--curly-gold);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}
.philosophy-card h3 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--curly-text);
  margin: 0 0 16px;
}
.philosophy-card p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--curly-text-soft);
  margin: 0;
}

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

/* ====================================================================
   31.4  SERVICES — restaurant-menu row layout
   ==================================================================== */
.service-section {
  padding: 60px 0;
  border-top: 1px solid var(--curly-line);
}
.service-section:first-of-type { border-top: 0; padding-top: 0; }
.service-section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: baseline;
  margin-bottom: 40px;
}
.service-section-head .num {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-gold);
}
.service-section-head h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--curly-text);
  margin: 0 0 12px;
  line-height: 1.18;
}
.service-section-head p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--curly-text-soft);
  margin: 0;
  max-width: 56ch;
}

.service-list { display: flex; flex-direction: column; }
.service-row {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px dashed var(--curly-line);
}
.service-row:last-child { border-bottom: 1px dashed var(--curly-line); }
.service-row .name {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--curly-text);
}
.service-row .desc {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--curly-text-soft);
}
.service-row .price {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--curly-text);
  white-space: nowrap;
}
.service-row .price-amount { color: var(--curly-gold); }
.service-row .price-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--curly-line);
}
.service-row .price-book a,
.service-row .price-book button {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  border-bottom: 1px solid var(--curly-gold);
  padding: 0 0 4px;
  background: transparent;
  border-top: 0; border-left: 0; border-right: 0;
  transition: letter-spacing .3s ease;
}
.service-row .price-book a:hover,
.service-row .price-book button:hover { letter-spacing: 0.5em; }

@media (max-width: 880px) {
  .service-section-head { grid-template-columns: 1fr; gap: 14px; }
  .service-row { grid-template-columns: 1fr; gap: 8px; }
  .service-row .price { margin-top: 6px; }
}

/* ====================================================================
   31.5  PRICING ACCORDION
   ==================================================================== */
.pricing-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--curly-line);
}
.pricing-item {
  border-bottom: 1px solid var(--curly-line);
  transition: background 0.3s ease;
}
.pricing-item[open] { background: rgba(186, 158, 111, 0.04); }
.pricing-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
  padding: 28px 4px;
  cursor: pointer;
  list-style: none;
}
.pricing-summary::-webkit-details-marker { display: none; }
.pricing-summary h3 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--curly-text);
  margin: 0;
  line-height: 1.2;
}
.pricing-num {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.pricing-num .pricing-from {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--curly-text-soft);
}
.pricing-num .price-amount { color: var(--curly-gold); font-size: 14px; }
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--curly-line);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 18px;
  color: var(--curly-gold);
  transition: transform 0.4s var(--e-out), border-color 0.3s ease;
}
.pricing-item[open] .pricing-toggle {
  transform: rotate(45deg);
  border-color: var(--curly-gold);
}
.pricing-detail {
  padding: 0 4px 30px;
  display: flex;
  flex-direction: column;
}
.pricing-detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px dashed var(--curly-line);
}
.pricing-detail-row strong {
  display: block;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--curly-text);
  margin-bottom: 4px;
}
.pricing-detail-row p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--curly-text-soft);
}
.pricing-detail-amt {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--curly-gold);
  white-space: nowrap;
}
.pricing-fineprint {
  font-family: var(--f-body) !important;
  font-style: italic !important;
  color: var(--curly-text-soft) !important;
  font-size: 0.95rem !important;
}

@media (max-width: 640px) {
  .pricing-summary { grid-template-columns: 1fr auto; gap: 16px; }
  .pricing-num { display: none; }
}

/* ====================================================================
   31.6  CONTACT GRID
   ==================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.contact-block {
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--curly-line);
  transition: border-color 0.3s ease;
}
.contact-block:hover { border-left-color: var(--curly-gold); }
.contact-block h4 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--curly-gold);
  margin: 0 0 14px;
}
.contact-block p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--curly-text);
  margin: 0;
}
.contact-block a {
  color: var(--curly-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.contact-block a:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}
.contact-block .hours-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-block .hours-mini li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--curly-line);
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--curly-text);
}
.contact-block .hours-mini li:last-child { border-bottom: 0; }
.contact-block .hours-mini li.today {
  color: var(--curly-gold);
  font-weight: 700;
}
.contact-block .hours-mini .day { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; }

.map-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--curly-line);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .map-wrap { aspect-ratio: 4 / 3; }
}

/* ====================================================================
   31.7  JOURNAL CARDS
   ==================================================================== */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.journal-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--curly-cream);
  transition: transform 0.4s var(--e-out);
}
.journal-card:hover { transform: translateY(-4px); }
.journal-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 22px;
}
.journal-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(15%);
  transition: filter 0.5s ease, transform 8s ease;
}
.journal-card:hover .journal-card-image img { filter: grayscale(0%); transform: scale(1.05); }
.journal-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.journal-card-body .date {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-gold);
  margin-bottom: 12px;
}
.journal-card-body h3 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.32;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--curly-text);
  margin: 0 0 14px;
  transition: color 0.3s ease;
}
.journal-card:hover .journal-card-body h3 { color: var(--curly-gold); }
.journal-card-body p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--curly-text-soft);
  margin: 0 0 18px;
}
.journal-card-link {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  margin-top: auto;
  border-bottom: 1px solid var(--curly-gold);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: letter-spacing 0.3s ease;
}
.journal-card:hover .journal-card-link { letter-spacing: 0.5em; }

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

/* ====================================================================
   31.8  GALLERY — filter chips + masonry
   ==================================================================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 56px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: transparent;
  border: 1px solid var(--curly-line);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--curly-text);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.filter-chip .chip-count {
  font-size: 9px;
  color: var(--curly-text-soft);
  border-left: 1px solid var(--curly-line);
  padding-left: 8px;
  letter-spacing: 0.2em;
}
.filter-chip:hover { border-color: var(--curly-gold); color: var(--curly-gold); }
.filter-chip:hover .chip-count { color: var(--curly-gold); border-left-color: var(--curly-gold); }
.filter-chip.is-active {
  background: var(--curly-text);
  border-color: var(--curly-text);
  color: var(--curly-cream);
}
.filter-chip.is-active .chip-count { color: var(--curly-cream); border-left-color: rgba(255,255,255,0.3); }

/* Masonry */
.masonry-gallery {
  column-count: 3;
  column-gap: 16px;
}
.masonry-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.masonry-img-wrap { position: relative; overflow: hidden; }
.masonry-item img {
  width: 100%;
  display: block;
  filter: grayscale(15%);
  transition: filter 0.4s ease, transform 0.6s var(--e-out);
}
.masonry-item:hover img { filter: grayscale(0%); transform: scale(1.05); }
.masonry-meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(8,8,10,0.8), rgba(8,8,10,0) 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.masonry-item:hover .masonry-meta { opacity: 1; }
.masonry-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-gold);
  margin-bottom: 8px;
}
.masonry-title {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--curly-cream);
}

@media (max-width: 980px) { .masonry-gallery { column-count: 2; } }
@media (max-width: 540px) { .masonry-gallery { column-count: 1; } }

/* ====================================================================
   31.9  BOOKING — callouts + Vagaro frame
   ==================================================================== */
.booking-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 70px;
}
.booking-callout {
  background: var(--curly-white);
  border: 1px solid var(--curly-line);
  padding: 50px 36px 36px;
  text-align: center;
  position: relative;
  transition: border-color 0.4s ease, transform 0.4s var(--e-out);
}
.booking-callout:hover { border-color: var(--curly-gold); transform: translateY(-4px); }
.booking-callout .step {
  display: inline-block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 2.6rem;
  color: var(--curly-gold);
  line-height: 1;
  margin-bottom: 12px;
}
.booking-callout h3 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--curly-text);
  margin: 0 0 14px;
}
.booking-callout p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--curly-text-soft);
  margin: 0;
}

.vagaro-frame {
  background: var(--curly-white);
  border: 1px solid var(--curly-line);
  padding: 14px;
  margin-bottom: 30px;
  position: relative;
}
.vagaro-frame iframe { width: 100%; min-height: 720px; border: 0; display: block; }
.booking-fallback {
  text-align: center;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--curly-text-soft);
  padding: 16px 0 0;
}
.booking-fallback a { color: var(--curly-gold); border-bottom: 1px solid var(--curly-gold); }

@media (max-width: 880px) {
  .booking-callouts { grid-template-columns: 1fr; }
}

/* ====================================================================
   31.10  CTA-FINAL — dark editorial closer
   ==================================================================== */
.cta-final {
  padding: 130px 0;
  background: var(--curly-dark);
  color: var(--curly-cream);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "Mirror";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Allura", "Sacramento", cursive;
  font-size: clamp(10rem, 22vw, 22rem);
  line-height: 1;
  color: var(--curly-gold);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.cta-final-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-final h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--curly-cream);
  margin: 0 0 22px;
}
.cta-final h2 em,
.cta-final h2 .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.cta-final p {
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.78;
  color: var(--curly-text-dark-bg);
  margin: 0 auto 36px;
  max-width: 580px;
}
.cta-final .eyebrow,
.cta-final .eyebrow-light {
  color: var(--curly-gold);
  margin-bottom: 22px;
}

/* ====================================================================
   31.11  PAGE.PHP / SINGLE — generic article body
   ==================================================================== */
.entry-content {
  font-family: var(--f-body);
  font-size: 1.07rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
}
.entry-content h2,
.entry-content h3 {
  font-family: var(--f-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--curly-text);
  margin: 1.6em 0 0.6em;
}
.entry-content h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.entry-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.entry-content a {
  color: var(--curly-gold);
  border-bottom: 1px solid var(--curly-gold);
  padding-bottom: 1px;
}
.entry-content a:hover { color: var(--curly-text); border-bottom-color: var(--curly-text); }
.entry-content blockquote {
  margin: 2em 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--curly-gold);
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--curly-gold);
}

/* ====================================================================
   31.12  REVEAL — minor refinement (subtler distance, smoother easing)
   ==================================================================== */
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible,
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================================================
   31.13  FOOTER — editorial polish
   ==================================================================== */
.footer {
  background: var(--curly-cream);
  color: var(--curly-text);
  padding: 90px 0 36px;
  border-top: 1px solid var(--curly-line);
}
.footer-mark {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 50px;
  color: var(--curly-text);
}
.footer-mark .script {
  font-family: "Yellowtail", "Sacramento", cursive;
  color: var(--curly-gold);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1em;
  font-weight: 400;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--curly-line);
}
.footer-col h5 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-gold);
  margin-bottom: 20px;
}
.footer-col p,
.footer-col li {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--curly-text-soft);
}
.footer-col ul { padding: 0; margin: 0; list-style: none; }
.footer-col li { margin-bottom: 6px; }
.footer-col a {
  color: var(--curly-text-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer-col a:hover { color: var(--curly-gold); border-bottom-color: var(--curly-gold); }
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bot { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   31.14  404 — keep simple but on-brand
   ==================================================================== */
.error-404 {
  min-height: 70vh;
  padding: 200px 20px 100px;
  text-align: center;
  background: var(--curly-cream);
}
.error-404 .big,
.error-404 .big-num {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: clamp(8rem, 22vw, 16rem);
  line-height: 0.9;
  color: var(--curly-gold);
  margin: 0 0 12px;
}
.error-404 h1 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--curly-text);
  margin: 0 0 18px;
}
.error-404 p {
  font-family: var(--f-body);
  color: var(--curly-text-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 50ch;
  margin: 0 auto 30px;
}


/* ========================================================================
   32. HEADER CONSISTENCY  (v5.6 — same minimal header on all pages)
   The boxed [M] IRROR brand and the burger were previously homepage-only;
   user wants the same minimal header on every page so the off-canvas menu
   is reachable everywhere.
   ======================================================================== */

/* Show the boxed brand + spaced letters on EVERY page */
body .brand-curly {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  border: 0;
  padding: 0;
}
body .brand-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--curly-text);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--curly-text);
  text-transform: uppercase;
  background: rgba(253, 248, 243, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}
body .brand-letters {
  display: inline-flex;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: var(--curly-text);
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(255, 255, 255, 0.7);
  transition: color .35s ease, text-shadow .35s ease;
}
/* Hide the OLD italic mark on every page (we don't use it any more) */
body .brand-script,
body .brand-mark { display: none; }

/* Hide inline nav and the desktop "Book now" CTA on every page —
   navigation lives in the off-canvas burger panel only */
body .nav-links,
body .nav-cta-desktop { display: none !important; }

/* Show the burger button on every page (was homepage-only at desktop) */
body .burger {
  display: flex !important;
  margin-left: auto;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
body .burger span {
  display: block;
  width: 24px; height: 1.5px;
  position: static;     /* override the absolute positioning from older rules */
  background: var(--curly-text);
  transition: background .35s ease;
}
body.curly-burger-on-dark .burger span { background: var(--curly-white); }

/* Inner-page header: transparent over the page banner, soft cream when scrolled */
body:not(.home-curly) .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
body:not(.home-curly) .site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 40px;
  max-width: none;
}
body:not(.home-curly) .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--curly-line);
  padding: 14px 0;
}

/* Push inner-page banners down so the fixed header has room */
body:not(.home-curly) .page-banner {
  padding-top: 200px;
}
@media (max-width: 880px) {
  body:not(.home-curly) .page-banner { padding-top: 130px; }
  body:not(.home-curly) .site-header .nav { padding-left: 20px; padding-right: 20px; }
}

/* ========================================================================
   33. ABOUT PAGE — editorial portrait, pull-quote band, stats band
   ======================================================================== */

/* Portrait hero */
.about-portrait {
  padding: 110px 0 100px;
  background: var(--curly-cream);
}
.about-portrait-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
  align-items: center;
}
.about-portrait-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.about-portrait-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--curly-gold);
  pointer-events: none;
  transform: translate(20px, 20px);
  transition: transform 0.6s var(--e-out);
}
.about-portrait-image:hover::after { transform: translate(10px, 10px); }
.about-portrait-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.8s ease, transform 8s ease;
}
.about-portrait-image:hover img { filter: grayscale(0%); transform: scale(1.04); }
.about-portrait-caption {
  position: absolute;
  bottom: 14px;
  left: 18px;
  right: 18px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 2;
}

.about-portrait-text { max-width: 580px; }
.about-portrait-title {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.16;
  color: var(--curly-text);
  margin: 0 0 32px;
}
.about-portrait-title em,
.about-portrait-title .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
  display: inline-block;
}
.about-portrait-body {
  font-family: var(--f-body);
  font-size: 1.07rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
}
.about-portrait-body p { margin: 0 0 1.1em; }
.about-portrait-body .has-drop-cap::first-letter,
.about-portrait-body p.has-drop-cap::first-letter {
  font-family: "Allura", "Sacramento", cursive;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  color: var(--curly-gold);
  margin: 6px 12px 0 -2px;
  font-weight: 400;
}

/* Signature block */
.about-portrait-sig {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--curly-line);
}
.about-portrait-sig .sig-script {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 2.4rem;
  color: var(--curly-gold);
  line-height: 1;
}
.about-portrait-sig .sig-line {
  height: 1px;
  background: var(--curly-line);
}
.about-portrait-sig .sig-role {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
  font-weight: 600;
}

/* Pull-quote band */
.about-quote {
  padding: 110px 24px;
  background: var(--curly-dark);
  color: var(--curly-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-quote::before {
  content: "“";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Allura", "Sacramento", cursive;
  font-size: clamp(20rem, 40vw, 40rem);
  line-height: 1;
  color: var(--curly-gold);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.about-quote-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}
.about-quote .quote-mark {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 5rem;
  color: var(--curly-gold);
  line-height: 0.6;
  margin-bottom: 8px;
}
.about-quote-text {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--curly-cream);
  margin: 0 0 22px;
}
.about-quote-text em {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.about-quote-attr {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
}

/* Stats band */
.about-stats {
  padding: 90px 0;
  background: var(--curly-cream);
  border-bottom: 1px solid var(--curly-line);
}
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-item {
  text-align: center;
  padding: 20px;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--curly-line);
}
.stat-num {
  display: block;
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  color: var(--curly-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.stat-num::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--curly-gold);
  margin: 14px auto 0;
}
.stat-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}

@media (max-width: 980px) {
  .about-portrait-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-portrait-image::after { transform: translate(10px, 10px); }
  .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stat-item:not(:last-child)::after { display: none; }
}

/* ========================================================================
   34. SERVICES — coloured filter chips + tonal service cards
   ======================================================================== */

/* Tonal palette per category — Desert Rose system
   cream  => peach-cream + terracotta accent  (Cuts & Styling)
   blush  => desert rose peach + brown accent (Color & Highlights)
   gold   => warm sand + saddle brown accent  (Reparative Treatments)
   charcoal => deep espresso + lavender accent (Brows & Waxing) */
.tone-cream    { --tone-bg: #fdf8f4; --tone-border: #ead4be; --tone-accent: #8b322c; --tone-text: #26160c; }
.tone-blush    { --tone-bg: #f7e1d2; --tone-border: #e3b89c; --tone-accent: #723715; --tone-text: #3a1f0d; }
.tone-gold     { --tone-bg: #f1dfc8; --tone-border: #d8b58e; --tone-accent: #723715; --tone-text: #3a261b; }
.tone-charcoal { --tone-bg: #26160c; --tone-border: #3a261b; --tone-accent: #d48662; --tone-text: #f3e3d8; }

/* Filter chip row — wider spacing, dot per tone */
.services-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 60px;
}
.services-filter .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--curly-line);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--curly-text);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.services-filter .filter-chip .chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tone-accent, var(--curly-text));
  display: inline-block;
}
.services-filter .filter-chip .chip-count {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--curly-text-soft);
  border-left: 1px solid var(--curly-line);
  padding-left: 10px;
}
.services-filter .filter-chip:hover {
  border-color: var(--tone-accent, var(--curly-gold));
  color: var(--tone-accent, var(--curly-gold));
}
.services-filter .filter-chip.is-active {
  background: var(--curly-text);
  border-color: var(--curly-text);
  color: var(--curly-cream);
}
.services-filter .filter-chip.is-active .chip-count {
  color: var(--curly-cream);
  border-left-color: rgba(255, 255, 255, 0.3);
}
.services-filter .filter-chip.is-active .chip-dot {
  /* keep tonal dot visible against the dark active state */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}

/* Card grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--tone-bg, var(--curly-cream));
  color: var(--tone-text, var(--curly-text));
  border: 1px solid var(--tone-border, var(--curly-line));
  padding: 32px 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out), border-color 0.4s var(--e-out);
}
.service-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--tone-accent, var(--curly-gold));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--e-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.18);
}
.service-card:hover::before { transform: scaleY(1); }
.service-card.is-hidden {
  display: none;
}

.service-card-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--tone-accent, var(--curly-gold));
  margin-bottom: 16px;
}
.service-card-title {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.28;
  color: var(--tone-text, var(--curly-text));
  margin: 0 0 14px;
}
.service-card-desc {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--tone-text, var(--curly-text-soft));
  opacity: 0.82;
  margin: 0 0 24px;
  flex: 1 1 auto;
}
.service-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tone-border, var(--curly-line));
}
.service-card-price {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--tone-accent, var(--curly-gold));
}
.service-card-book {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tone-text, var(--curly-text));
  border-bottom: 1px solid var(--tone-text, var(--curly-text));
  padding-bottom: 3px;
  text-decoration: none;
  transition: color 0.3s ease, letter-spacing 0.3s ease, border-color 0.3s ease;
}
.service-card-book span { display: inline-block; transition: transform 0.3s ease; }
.service-card-book:hover {
  color: var(--tone-accent, var(--curly-gold));
  border-bottom-color: var(--tone-accent, var(--curly-gold));
  letter-spacing: 0.5em;
}
.service-card-book:hover span { transform: translateX(3px); }

/* Charcoal tone needs lighter text/border treatment */
.tone-charcoal .service-card-desc { color: var(--tone-text); opacity: 0.78; }
.tone-charcoal .service-card-foot { border-top-color: var(--tone-border); }

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

/* ========================================================================
   35. VAGARO BOOKING — framed editorial card
   ======================================================================== */
.vagaro-section { padding: 110px 0; }
.vagaro-card {
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  padding: 50px 50px 40px;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  box-shadow: 0 30px 80px -50px rgba(0,0,0,0.12);
}
.vagaro-card::before {
  /* gold rule along the top edge */
  content: "";
  position: absolute;
  left: 50px; right: 50px; top: 0;
  height: 2px;
  background: var(--curly-gold);
}
.vagaro-card-head {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--curly-line);
}
.vagaro-card-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  margin-bottom: 14px;
}
.vagaro-card-title {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--curly-text);
  margin: 0 0 12px;
}
.vagaro-card-title em,
.vagaro-card-title .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.vagaro-card-sub {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--curly-text-soft);
  margin: 0;
  max-width: 520px;
  margin: 0 auto;
}
.vagaro-card .vagaro-frame {
  background: var(--curly-white);
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 720px;
  position: relative;
}
.vagaro-card .vagaro-frame iframe {
  width: 100%;
  min-height: 720px;
  border: 0;
  display: block;
}
/* Vagaro often outputs raw markup with inline styles — neutralise the worst */
.vagaro-card .vagaro-host { width: 100% !important; max-width: 100% !important; }
.vagaro-card .vagaro-host > div { max-width: 100% !important; }
.vagaro-card .vagaro-host a[href*="vagaro.com/salon-software"] {
  display: block;
  text-align: right;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px dashed var(--curly-line);
}
.vagaro-card-fallback {
  text-align: center;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--curly-text-soft);
  margin: 28px 0 0;
}
.vagaro-card-fallback a {
  color: var(--curly-gold);
  border-bottom: 1px solid var(--curly-gold);
  padding-bottom: 1px;
}

@media (max-width: 740px) {
  .vagaro-card { padding: 32px 20px 26px; }
  .vagaro-card::before { left: 20px; right: 20px; }
}

/* ========================================================================
   36. TESTIMONIALS — editorial card grid
   ======================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  position: relative;
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  padding: 50px 36px 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--e-out), border-color 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--curly-gold);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.18);
}
.testimonial-card .quote-mark {
  position: absolute;
  top: 14px; left: 28px;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 6rem;
  line-height: 0.7;
  color: var(--curly-gold);
  opacity: 0.7;
  pointer-events: none;
}
.testimonial-card .quote-body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--curly-text);
  margin: 0 0 28px;
  flex: 1 1 auto;
  font-style: italic;
}
.testimonial-card .quote-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--curly-line);
}
.testimonial-card .quote-avatar {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--curly-gold);
  color: var(--curly-white);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  border-radius: 50%;
}
.testimonial-card .quote-author {
  display: block;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--curly-text);
}
.testimonial-card .quote-source {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--curly-text-soft);
  margin-top: 2px;
}
.testimonial-card .quote-stars {
  color: var(--curly-gold);
  display: inline-flex;
}
.testimonial-card .quote-stars svg { width: 70px; height: 14px; display: block; }

/* Tonal variation for visual interest */
.testimonial-card.tone-1 { background: var(--curly-cream); }
.testimonial-card.tone-2 { background: #fbf6ed; }
.testimonial-card.tone-3 { background: #fbeee8; }
.testimonial-card.tone-4 { background: #f7f1e3; }

/* "Read every review" CTA section */
.testimonials-cta {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.testimonials-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

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


/* ========================================================================
   37. v5.7 REFRESH PASS
   - Compact page banner variant
   - Vagaro: minimal shell, hide our redundant card head, override Vagaro
     widget classes where reachable
   - About "Meet Jean" editorial split (replaces previous portrait grid)
   - Pricing tonal cards (replaces accordion)
   - Contact mini-cards + big map
   - Services hover polish + cleaner filter chips
   - Single journal article styling
   - Homepage slide additions: services preview list + book CTA button
   ======================================================================== */

/* ---- COMPACT PAGE BANNER (used on book page) ---- */
.page-banner.page-banner--compact {
  padding: 180px 0 60px;
}
.page-banner.page-banner--compact h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 16px;
}
.page-banner.page-banner--compact p {
  font-size: 1rem;
}
@media (max-width: 880px) {
  .page-banner.page-banner--compact { padding: 130px 0 40px; }
}

/* ========================================================================
   37.1  VAGARO — MINIMAL SHELL + OVERRIDES
   The widget brings its own "Book Your Appointment" header. Our shell is
   intentionally just a thin frame so the two don't compete.
   ======================================================================== */
.vagaro-section {
  padding: 60px 0 80px;
}
.vagaro-shell {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  padding: 0;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.10);
}
.vagaro-shell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--curly-line);
  background: var(--curly-white);
}
.vagaro-shell-eyebrow {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
}
.vagaro-shell-newtab {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
  text-decoration: none;
  transition: color 0.25s ease;
}
.vagaro-shell-newtab:hover { color: var(--curly-gold); }

.vagaro-shell .vagaro-frame {
  background: var(--curly-white);
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 720px;
  position: relative;
}
.vagaro-shell .vagaro-frame iframe,
.vagaro-shell .vagaro-host iframe {
  width: 100% !important;
  min-height: 720px !important;
  border: 0 !important;
  display: block;
}
.vagaro-shell .vagaro-host {
  width: 100% !important;
  max-width: 100% !important;
}
.vagaro-shell .vagaro-host > a[href*="vagaro.com/salon-software"] {
  display: block;
  text-align: right;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--curly-text-soft) !important;
  padding: 12px 22px;
  border-top: 1px dashed var(--curly-line);
  margin: 0 !important;
}

.vagaro-shell-fallback {
  text-align: center;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--curly-text-soft);
  padding: 20px 22px 22px;
  margin: 0;
  border-top: 1px solid var(--curly-line);
}
.vagaro-shell-fallback a {
  color: var(--curly-gold);
  border-bottom: 1px solid var(--curly-gold);
  padding-bottom: 1px;
}

/* Best-effort overrides for Vagaro's own widget content
   (will only land if Vagaro renders into our DOM rather than an iframe,
   but harmless either way) */
.vagaro-shell .vagaro-host h1,
.vagaro-shell .vagaro-host h2,
.vagaro-shell .vagaro-host h3 {
  font-family: var(--f-sans) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--curly-text) !important;
}

/* The 3-step booking explainer — pull it slightly tighter so it doesn't
   feel disconnected from the widget below. */
.booking-steps-section { padding-bottom: 30px; }

/* ========================================================================
   37.2  ABOUT — MEET JEAN editorial split (REPLACES old portrait grid)
   ======================================================================== */
.meet-jean {
  padding: 110px 0 100px;
  background: var(--curly-cream);
  position: relative;
  overflow: hidden;
}
.meet-jean::before {
  /* faint cursive "Jean" deep in the background */
  content: "Jean";
  position: absolute;
  right: -3vw;
  top: 30px;
  font-family: "Allura", "Sacramento", cursive;
  font-size: clamp(14rem, 30vw, 30rem);
  line-height: 1;
  color: var(--curly-gold);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
}
.meet-jean .container { position: relative; z-index: 1; }

.meet-jean-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: stretch;
}

.meet-jean-portrait {
  position: relative;
}
.meet-jean-portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5.2;
  overflow: hidden;
}
.meet-jean-portrait-frame::before {
  /* gold offset border behind */
  content: "";
  position: absolute;
  inset: -22px -22px auto auto;
  width: 70%;
  height: 70%;
  border: 1px solid var(--curly-gold);
  pointer-events: none;
  z-index: -1;
}
.meet-jean-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
  transition: filter 0.8s ease, transform 8s ease;
}
.meet-jean-portrait:hover .meet-jean-portrait-frame img {
  filter: grayscale(0%);
  transform: scale(1.04);
}
.meet-jean-portrait-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--curly-line);
}
.meet-jean-portrait-meta .mj-name-script {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 2.1rem;
  color: var(--curly-gold);
  line-height: 0.9;
}
.meet-jean-portrait-meta .mj-name-role {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}

.meet-jean-text {
  position: relative;
  padding-left: 36px;
  /* Vertical gold rule for the editorial text column */
}
.meet-jean-text::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--curly-gold), transparent);
}

.meet-jean-text .mj-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text);
  margin-bottom: 6px;
}
.meet-jean-text .mj-tagline {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 2.1rem;
  color: var(--curly-gold);
  line-height: 1;
  margin-bottom: 18px;
}
.meet-jean-text .mj-heading {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--curly-text);
  margin: 0 0 32px;
}
.meet-jean-text .mj-heading em,
.meet-jean-text .mj-heading .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
  display: inline-block;
}
.meet-jean-text .mj-body {
  font-family: var(--f-body);
  font-size: 1.07rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
  margin-bottom: 30px;
}
.meet-jean-text .mj-body p { margin: 0 0 1.05em; }
.meet-jean-text .mj-body p:first-child::first-letter {
  font-family: "Allura", "Sacramento", cursive;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  color: var(--curly-gold);
  margin: 6px 12px 0 -2px;
  font-weight: 400;
}
.meet-jean-text .mj-pullquote {
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--curly-line);
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--curly-text);
  position: relative;
}
.meet-jean-text .mj-pullquote span {
  font-family: "Yellowtail", "Sacramento", cursive;
  color: var(--curly-gold);
  font-size: 2.4em;
  line-height: 0.4;
  vertical-align: -0.6em;
  margin-right: 6px;
  text-transform: none;
}
.meet-jean-text .mj-pullquote em {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.2em;
}

@media (max-width: 980px) {
  .meet-jean-grid { grid-template-columns: 1fr; gap: 50px; }
  .meet-jean-text { padding-left: 22px; }
  .meet-jean-portrait-frame::before { inset: -10px -10px auto auto; }
}

/* Hide the OLD portrait grid styling so it doesn't compete */
.about-portrait { display: none !important; }

/* ========================================================================
   37.3  PRICING — TONAL CARD GRID (REPLACES the accordion)
   ======================================================================== */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.pricing-card {
  position: relative;
  background: var(--tone-bg, var(--curly-cream));
  color: var(--tone-text, var(--curly-text));
  border: 1px solid var(--tone-border, var(--curly-line));
  padding: 40px 38px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.18);
}
.pricing-card::before {
  /* tonal accent in the corner */
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--tone-accent, var(--curly-gold));
  opacity: 0.10;
  pointer-events: none;
}

.pricing-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tone-border, var(--curly-line));
  margin-bottom: 22px;
}
.pricing-card-num {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--tone-accent, var(--curly-gold));
}
.pricing-card-title {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--tone-text, var(--curly-text));
  margin: 0;
}
.pricing-card-from {
  text-align: right;
}
.pricing-card-from .from-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tone-accent, var(--curly-gold));
  margin-bottom: 2px;
}
.pricing-card-from .from-amount {
  display: block;
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--tone-text, var(--curly-text));
  line-height: 1;
}

.pricing-card-desc {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--tone-text, var(--curly-text-soft));
  opacity: 0.82;
  margin: 0 0 22px;
}

.pricing-card-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1 1 auto;
}
.pricing-card-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--tone-border, var(--curly-line));
}
.pricing-card-list li:last-child { border-bottom: 0; }
.pricing-card-list .row-name {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--tone-text, var(--curly-text));
}
.pricing-card-list .row-dots {
  border-bottom: 1px dotted var(--tone-border, var(--curly-line));
  margin: 0 4px 4px;
  align-self: end;
}
.pricing-card-list .row-price {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tone-accent, var(--curly-gold));
  white-space: nowrap;
}

.pricing-card-book {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tone-text, var(--curly-text));
  border-bottom: 1px solid var(--tone-text, var(--curly-text));
  padding-bottom: 4px;
  align-self: flex-start;
  text-decoration: none;
  transition: color 0.3s ease, letter-spacing 0.3s ease, border-color 0.3s ease;
}
.pricing-card-book span { display: inline-block; transition: transform 0.3s ease; }
.pricing-card-book:hover {
  color: var(--tone-accent, var(--curly-gold));
  border-bottom-color: var(--tone-accent, var(--curly-gold));
  letter-spacing: 0.5em;
}
.pricing-card-book:hover span { transform: translateX(3px); }

/* Charcoal tone reads on dark */
.tone-charcoal.pricing-card .pricing-card-list .row-price { color: var(--tone-accent); }

/* Hide the legacy accordion if it was rendered */
.pricing-accordion { display: none; }

@media (max-width: 880px) {
  .pricing-cards { grid-template-columns: 1fr; }
}

/* ========================================================================
   37.4  CONTACT — mini-cards + big map (REPLACES old contact-grid)
   ======================================================================== */
.contact-strip { padding: 80px 0 0; }
.contact-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.contact-mini {
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  padding: 28px 22px 24px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.4s var(--e-out);
}
.contact-mini:hover {
  border-color: var(--curly-gold);
  transform: translateY(-3px);
}
.contact-mini-icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--curly-gold);
  color: var(--curly-gold);
  margin-bottom: 14px;
  border-radius: 0;
}
.contact-mini-icon svg {
  width: 18px; height: 18px;
  display: block;
}
.contact-mini-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--curly-gold);
  margin-bottom: 8px;
}
.contact-mini-value {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--curly-text);
  margin: 0;
}
.contact-mini-value a {
  color: var(--curly-text);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.contact-mini-value a:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}
.contact-mini-note {
  display: block;
  margin-top: 6px;
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--curly-text-soft);
}
.contact-mini-hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-mini-hours li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--curly-text);
  border-bottom: 1px dashed var(--curly-line);
}
.contact-mini-hours li:last-child { border-bottom: 0; }
.contact-mini-hours li.today {
  color: var(--curly-gold);
  font-weight: 700;
}
.contact-mini-hours .day {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 880px) {
  .contact-strip-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .contact-strip-grid { grid-template-columns: 1fr; }
}

/* Big map */
.contact-map-section { padding: 60px 0 100px; }
.contact-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--curly-line);
  background: var(--curly-cream);
}
.contact-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.contact-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px;
  color: var(--curly-text-soft);
  font-family: var(--f-body);
}
.contact-map-empty .eyebrow { color: var(--curly-gold); margin-bottom: 14px; }

.contact-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 36px;
}
.contact-socials-label {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}

@media (max-width: 540px) {
  .contact-map { aspect-ratio: 4 / 5; }
}

/* Hide the previous .contact-grid layout if any old templates render it */
.contact-info { display: none !important; }
.map-wrap { display: none !important; }

/* ========================================================================
   37.5  SERVICES filter polish + hover refinement
   ======================================================================== */
.services-filter .filter-chip {
  padding: 14px 22px;
  border-radius: 999px;          /* pill chips read more nicely than squares */
  font-size: 10.5px;
  letter-spacing: 0.34em;
  gap: 12px;
}
.services-filter .filter-chip .chip-dot {
  width: 8px; height: 8px;
}
.services-filter .filter-chip .chip-count {
  border-left: none;
  background: rgba(0,0,0,0.05);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.18em;
}
.services-filter .filter-chip:hover {
  background: rgba(186, 158, 111, 0.06);
}
.services-filter .filter-chip.is-active .chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--curly-cream);
}

/* Hover state on cards — keep words readable */
.service-card:hover .service-card-tag,
.service-card:hover .service-card-title,
.service-card:hover .service-card-desc,
.service-card:hover .service-card-price,
.service-card:hover .service-card-book {
  /* No color shift on hover — only the side rule + lift animate.
     Previously some tones blended too closely on hover. */
}
.service-card .service-card-title,
.service-card .service-card-desc {
  transition: none; /* keep text crisp; only the card chrome animates */
}
.service-card-book {
  /* Slightly more padding so the underline doesn't crowd the arrow */
  padding-bottom: 5px;
}

/* ========================================================================
   37.6  SINGLE JOURNAL ARTICLE
   ======================================================================== */
.journal-single-banner.page-banner {
  padding-bottom: 50px;
}
.journal-single-banner.page-banner h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  text-transform: none;
  letter-spacing: -0.005em;
  font-family: var(--f-sans);
  font-weight: 800;
  color: var(--curly-text);
  margin: 14px 0 0;
  line-height: 1.18;
}
.journal-single-date {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
}

.journal-single-hero {
  padding: 0 0 60px;
  background: var(--curly-cream);
}
.journal-single-hero-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--curly-line);
  max-width: 1080px;
  margin: 0 auto;
}
.journal-single-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.journal-single { padding: 20px 0 80px; background: var(--curly-cream); }
.journal-single-body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--f-body);
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--curly-text);
}
.journal-single-body p { margin: 0 0 1.3em; }
.journal-single-body p:first-of-type::first-letter {
  font-family: "Allura", "Sacramento", cursive;
  font-size: 4.2em;
  line-height: 0.85;
  float: left;
  color: var(--curly-gold);
  margin: 8px 14px 0 -2px;
  font-weight: 400;
}
.journal-single-body h2,
.journal-single-body h3 {
  font-family: var(--f-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--curly-text);
  margin: 1.6em 0 0.6em;
}
.journal-single-body h2 { font-size: 1.6rem; }
.journal-single-body h3 { font-size: 1.3rem; }
.journal-single-body blockquote {
  margin: 1.6em 0;
  padding: 12px 0 12px 24px;
  border-left: 2px solid var(--curly-gold);
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--curly-gold);
  font-style: normal;
}

.journal-single-foot {
  max-width: 760px;
  margin: 50px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--curly-line);
  text-align: center;
}
.journal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  border-bottom: 1px solid var(--curly-gold);
  padding-bottom: 4px;
  text-decoration: none;
  transition: letter-spacing 0.3s ease;
}
.journal-back-link:hover { letter-spacing: 0.5em; }

.journal-card-image--placeholder {
  background: var(--curly-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--curly-gold);
  font-family: "Allura", "Sacramento", cursive;
  font-size: 3rem;
}

/* ========================================================================
   37.7  HOMEPAGE — services preview + book CTA on slides 3 & 4
   ======================================================================== */
.curly-services-preview {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 3;
  text-align: left;
}
.curly-services-preview li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  font-family: var(--f-sans);
}
.curly-services-preview li:last-child { border-bottom: 0; }
.curly-services-preview .svc-name {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--curly-white);
}
.curly-services-preview .svc-dots {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  margin: 0 4px 4px;
  align-self: end;
}
.curly-services-preview .svc-price {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--curly-gold);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* Same list on light text panels */
.curly-half--text.bg-light .curly-services-preview li,
.curly-half--text.bg-white .curly-services-preview li {
  border-bottom-color: var(--curly-line);
}
.curly-half--text.bg-light .curly-services-preview .svc-name,
.curly-half--text.bg-white .curly-services-preview .svc-name {
  color: var(--curly-text);
}
.curly-half--text.bg-light .curly-services-preview .svc-dots,
.curly-half--text.bg-white .curly-services-preview .svc-dots {
  border-bottom-color: var(--curly-line);
}

/* Book CTA button on slide 4 */
.curly-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 16px 28px;
  border: 1px solid var(--curly-text);
  background: var(--curly-text);
  color: var(--curly-cream);
  text-decoration: none;
  position: relative;
  z-index: 3;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}
.curly-cta-btn:hover {
  background: var(--curly-gold);
  border-color: var(--curly-gold);
  letter-spacing: 0.5em;
}
.curly-cta-btn span { display: inline-block; transition: transform 0.3s ease; }
.curly-cta-btn:hover span { transform: translateX(4px); }

/* On the homepage hours/book panel, make sure the curly-text-inner--left
   keeps the CTA below the note */
.curly-text-inner--left .curly-cta-btn { align-self: flex-start; }


/* ========================================================================
   38. v5.8 REFRESH PASS
   - Hide v5.7 sections being replaced (about-portrait + .meet-jean
     remained from earlier passes)
   - New about: centered editorial flow with full-width portrait hero
   - New contact: address-hero + hours band + methods row + big map
   - New booking: primary popup-button card + collapsible inline widget
   - Stronger Vagaro CSS overrides (best-effort; iframe content can't be
     reached but DOM-injected widget will pick up these rules)
   - Services hover: cleaner text contrast, no more washed-out feel
   ======================================================================== */

/* Hide previous-pass About sections that we've now replaced */
.meet-jean { display: none !important; }
.about-portrait { display: none !important; }

/* ========================================================================
   38.1  ABOUT — centered editorial flow
   ======================================================================== */

.about-intro-centered {
  padding: 90px 0 60px;
  background: var(--curly-cream);
  position: relative;
}
.about-intro-stack {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-intro-stack .eyebrow.eyebrow--with-dash::before {
  /* keep the dash centered too */
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--curly-gold);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}
.about-intro-stack .eyebrow.eyebrow--with-dash::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--curly-gold);
  vertical-align: middle;
  margin-left: 10px;
  transform: translateY(-2px);
}
.about-intro-stack .about-tagline {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--curly-gold);
  line-height: 1;
  margin: 8px 0 22px;
}
.about-intro-stack .about-heading {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--curly-text);
  margin: 0 0 22px;
}
.about-intro-stack .about-heading em,
.about-intro-stack .about-heading .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.15em;
}
.about-intro-stack .about-lead {
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--curly-text-soft);
  margin: 0;
  max-width: 60ch;
}

/* Full-width portrait hero (16:9 cinematic) */
.about-portrait-hero {
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--curly-cream);
  padding: 0 0 30px;
}
.about-portrait-hero-img {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--curly-line);
}
.about-portrait-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: grayscale(15%);
}
.about-portrait-hero-caption {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}
.about-portrait-hero-caption .caption-line {
  flex: 0 0 60px;
  height: 1px;
  background: var(--curly-gold);
}
.about-portrait-hero-caption .caption-text {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}
@media (max-width: 880px) {
  .about-portrait-hero-img { aspect-ratio: 16 / 11; }
}

/* Two-column body */
.about-body {
  padding: 70px 0 80px;
  background: var(--curly-cream);
}
.about-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--curly-text-soft);
  max-width: 980px;
  margin: 0 auto;
}
.about-body-grid p { margin: 0 0 1.05em; }
.about-body-grid p:last-child { margin-bottom: 0; }
.about-body-col--lead p:first-child::first-letter {
  font-family: "Allura", "Sacramento", cursive;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  color: var(--curly-gold);
  margin: 6px 12px 0 -2px;
  font-weight: 400;
}
@media (max-width: 880px) {
  .about-body-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Centered signature */
.about-signature {
  text-align: center;
  margin: 60px auto 0;
  max-width: 460px;
  padding-top: 30px;
  border-top: 1px solid var(--curly-line);
}
.about-signature .sig-script {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 3rem;
  color: var(--curly-gold);
  line-height: 1;
  margin-bottom: 16px;
}
.about-signature .sig-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--curly-gold);
  margin: 0 auto 16px;
}
.about-signature .sig-role {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}

/* Pull quote band — same as before but renamed for v5.8 */
.about-quote-band {
  padding: 110px 24px;
  background: var(--curly-dark);
  color: var(--curly-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-quote-band::before {
  content: "“";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Allura", "Sacramento", cursive;
  font-size: clamp(20rem, 40vw, 40rem);
  line-height: 1;
  color: var(--curly-gold);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.about-quote-band .about-quote-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}
.about-quote-band .quote-mark {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: 5rem;
  color: var(--curly-gold);
  line-height: 0.6;
  margin-bottom: 8px;
}
.about-quote-band .about-quote-text {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--curly-cream);
  margin: 0 0 22px;
}
.about-quote-band .about-quote-text em {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.about-quote-band .about-quote-attr {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
}
/* Hide the older .about-quote::before (it might still be in DOM if any old template renders) */
.about-quote::before { display: none; }
.about-quote { display: none; }

/* ========================================================================
   38.2  CONTACT — magazine-style address hero + hours band + methods row
   ======================================================================== */

/* Hide the v5.7 contact-strip + contact-mini grid (replaced) */
.contact-strip { display: none !important; }

.contact-address-hero {
  padding: 90px 0 70px;
  background: var(--curly-cream);
  text-align: center;
}
.contact-address-inner {
  max-width: 880px;
  margin: 0 auto;
}
.contact-cursive-mark {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  color: var(--curly-gold);
  line-height: 1;
  margin-bottom: 24px;
}
.contact-address-line {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  color: var(--curly-text);
  margin: 0 0 14px;
}
.contact-address-sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--curly-gold);
}
.contact-address-note {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--curly-text-soft);
  font-style: italic;
  margin: 0 auto 26px;
  max-width: 50ch;
}
.contact-zigzag {
  display: inline-block;
  width: 110px;
  height: 22px;
  color: var(--curly-gold);
  margin-top: 6px;
}
.contact-zigzag svg { display: block; width: 100%; height: 100%; }

/* Hours band */
.contact-hours-band {
  padding: 60px 0 70px;
  background: var(--curly-cream);
  border-top: 1px solid var(--curly-line);
  border-bottom: 1px solid var(--curly-line);
}
.contact-hours-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.contact-hours-inner .eyebrow {
  margin-bottom: 30px;
}
.contact-hours-table {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 0;
}
.contact-hours-table li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px dashed var(--curly-line);
  font-family: var(--f-sans);
}
.contact-hours-table li:last-child { border-bottom: 0; }
.contact-hours-table li.today {
  color: var(--curly-gold);
}
.contact-hours-table .day {
  text-align: right;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--curly-text);
}
.contact-hours-table li.today .day { color: var(--curly-gold); }
.contact-hours-table li::before {
  /* dot in the middle */
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--curly-gold);
  align-self: center;
}
.contact-hours-table .time {
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--curly-text);
  letter-spacing: 0.05em;
}
.contact-hours-table li.today .time { color: var(--curly-gold); font-weight: 700; }
.contact-hours-foot {
  font-family: var(--f-body);
  font-style: italic;
  color: var(--curly-text-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* Contact methods row */
.contact-methods-row {
  padding: 80px 0;
  background: var(--curly-cream);
}
.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.contact-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 26px 36px;
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.4s ease, transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.contact-method:hover {
  border-color: var(--curly-gold);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.18);
}
.contact-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--curly-gold);
  color: var(--curly-gold);
  background: rgba(186, 158, 111, 0.05);
  margin-bottom: 4px;
}
.contact-method-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.contact-method-label {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
}
.contact-method-value {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--curly-text);
  transition: color 0.3s ease;
}
.contact-method:hover .contact-method-value { color: var(--curly-gold); }

@media (max-width: 880px) {
  .contact-methods-grid { grid-template-columns: 1fr; }
  .contact-hours-table li { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .contact-hours-table li::before { display: none; }
  .contact-hours-table .day { text-align: center; }
  .contact-hours-table .time { text-align: center; }
}

/* ========================================================================
   38.3  BOOKING — primary card with popup button + collapsible inline
   ======================================================================== */

.booking-card-section {
  padding: 30px 0 80px;
}
.booking-card {
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.18);
}
.booking-card::before {
  /* gold rule along the top */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(to right, var(--curly-gold), transparent);
}
.booking-card-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  align-items: stretch;
}
.booking-card-photo {
  position: relative;
  min-height: 460px;
  background: var(--curly-line);
  overflow: hidden;
}
.booking-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
}
.booking-card-text {
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.booking-card-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  margin-bottom: 18px;
}
.booking-card-title {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--curly-text);
  margin: 0 0 22px;
}
.booking-card-title em,
.booking-card-title .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.1em;
}
.booking-card-sub {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--curly-text-soft);
  margin: 0 0 32px;
  max-width: 50ch;
}
.booking-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 36px;
}
/* Style the Vagaro popup link as our primary CTA button */
.booking-card-actions .vagaro-popup-wrap {
  display: inline-block;
}
.booking-card-actions .vagaro-book-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 18px 36px;
  background: var(--curly-text);
  color: var(--curly-cream);
  border: 1px solid var(--curly-text);
  text-decoration: none;
  transition: background .35s ease, color .35s ease, border-color .35s ease, letter-spacing .3s ease;
}
.booking-card-actions .vagaro-book-link:hover {
  background: var(--curly-gold);
  border-color: var(--curly-gold);
  letter-spacing: 0.5em;
}
.booking-card-actions .vagaro-book-link::after {
  content: "→";
  font-family: var(--f-sans);
  font-weight: 400;
  margin-left: 4px;
  transition: transform .3s ease;
}
.booking-card-actions .vagaro-book-link:hover::after { transform: translateX(4px); }
.booking-secondary {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.booking-secondary:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}

.booking-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--curly-line);
}
.booking-card-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.booking-card-meta .meta-label {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
}
.booking-card-meta a {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--curly-text);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.booking-card-meta a:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}

@media (max-width: 980px) {
  .booking-card-grid { grid-template-columns: 1fr; }
  .booking-card-photo { min-height: 320px; aspect-ratio: 16 / 10; }
  .booking-card-text { padding: 40px 32px; }
}

/* Collapsible inline widget */
.vagaro-collapse {
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  max-width: 1080px;
  margin: 0 auto;
}
.vagaro-collapse[open] { background: var(--curly-cream); }
.vagaro-collapse summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.vagaro-collapse summary::-webkit-details-marker { display: none; }
.vagaro-collapse-eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text);
}
.vagaro-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--curly-gold);
  color: var(--curly-gold);
  font-size: 18px;
  transition: transform 0.4s var(--e-out);
}
.vagaro-collapse[open] .vagaro-collapse-toggle { transform: rotate(45deg); }
.vagaro-collapse-body {
  padding: 0 26px 26px;
}
.vagaro-collapse-note {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--curly-text-soft);
  margin: 0 0 18px;
}

/* ========================================================================
   38.4  VAGARO WIDGET — aggressive overrides (best effort)
   These rules attempt to retheme any DOM the Vagaro widget injects into
   our page. If Vagaro renders inside an iframe, these have no effect
   (browsers don't allow cross-origin iframe styling). The widget's
   in-iframe theme has to be set in Vagaro Dashboard → Customize Widget.
   ======================================================================== */
.vagaro-shell .vagaro-host,
.vagaro-shell .vagaro-host * {
  font-family: var(--f-sans) !important;
}
.vagaro-shell .vagaro-host h1,
.vagaro-shell .vagaro-host h2,
.vagaro-shell .vagaro-host h3 {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--curly-text) !important;
}
.vagaro-shell .vagaro-host button,
.vagaro-shell .vagaro-host [class*="btn"],
.vagaro-shell .vagaro-host [class*="Btn"],
.vagaro-shell .vagaro-host [class*="Button"],
.vagaro-shell .vagaro-host a[role="button"] {
  background: var(--curly-text) !important;
  color: var(--curly-cream) !important;
  border: 1px solid var(--curly-text) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3em !important;
  font-size: 11px !important;
  padding: 14px 24px !important;
  box-shadow: none !important;
  transition: background 0.35s ease, color 0.35s ease !important;
}
.vagaro-shell .vagaro-host button:hover,
.vagaro-shell .vagaro-host [class*="btn"]:hover,
.vagaro-shell .vagaro-host [class*="Btn"]:hover,
.vagaro-shell .vagaro-host a[role="button"]:hover {
  background: var(--curly-gold) !important;
  border-color: var(--curly-gold) !important;
}
.vagaro-shell .vagaro-host [class*="header"],
.vagaro-shell .vagaro-host [class*="topBar"],
.vagaro-shell .vagaro-host [class*="salonBanner"] {
  background: var(--curly-text) !important;
  color: var(--curly-cream) !important;
}
.vagaro-shell .vagaro-host [class*="header"] *,
.vagaro-shell .vagaro-host [class*="topBar"] *,
.vagaro-shell .vagaro-host [class*="salonBanner"] * {
  color: var(--curly-cream) !important;
}
.vagaro-shell .vagaro-host [class*="tab"],
.vagaro-shell .vagaro-host [role="tab"] {
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.vagaro-shell .vagaro-host [class*="price"],
.vagaro-shell .vagaro-host [class*="Price"] {
  color: var(--curly-gold) !important;
  font-weight: 700 !important;
}

/* ========================================================================
   38.5  SERVICES — fix hover so text stays readable
   ======================================================================== */

/* Reset opacity on description so text is always full readable */
.service-card-desc {
  opacity: 1 !important;
  color: var(--tone-text, var(--curly-text)) !important;
}
.tone-cream    .service-card-desc { color: #4a3024 !important; }
.tone-blush    .service-card-desc { color: #5a2818 !important; }
.tone-gold     .service-card-desc { color: #4a2810 !important; }
.tone-charcoal .service-card-desc { color: #e9c5b0 !important; }

/* Also force readable category tag and title colors */
.tone-cream    .service-card-title { color: #26160c; }
.tone-blush    .service-card-title { color: #3a1f0d; }
.tone-gold     .service-card-title { color: #3a261b; }
.tone-charcoal .service-card-title { color: #faf3ee; }

.tone-cream    .service-card-tag { color: #8b322c; }
.tone-blush    .service-card-tag { color: #723715; }
.tone-gold     .service-card-tag { color: #723715; }
.tone-charcoal .service-card-tag { color: #d48662; }

/* Hover state — clean lift, accent rule, gold price accent — text untouched */
.service-card {
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.22);
}
/* keep text colors fixed on hover */
.service-card:hover .service-card-title,
.service-card:hover .service-card-desc,
.service-card:hover .service-card-tag,
.service-card:hover .service-card-price {
  /* no override = inherit base color */
}

/* Polish the book link — don't let it darken/blend into the card on hover */
.service-card .service-card-book {
  border-bottom-width: 1.5px;
}
.tone-charcoal .service-card-book {
  color: var(--tone-text);
  border-bottom-color: var(--tone-text);
}
.tone-charcoal .service-card-book:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}


/* ========================================================================
   39. v5.9 PASS
   - Real-class Vagaro overrides (.vagaro-container, .vagaro-iframe,
     .vagaro-footer, .vagaro-noniframe, .vagaro-window-widget) — these are
     classes Vagaro's script renders into our DOM, so CSS reaches them.
   - New about page: magazine portrait FEATURE with cursive name overlay
   - New contact page: single luxury "Visit Card" + big map
   - Book Now button: in-page anchor button styling
   - Hide v5.8 sections that are being replaced
   ======================================================================== */

/* Hide v5.8 sections that have been replaced */
.about-intro-centered { display: none !important; }
.about-portrait-hero { display: none !important; }
.about-body { /* still used in v5.9 */ }

.contact-address-hero { display: none !important; }
.contact-hours-band { display: none !important; }
.contact-methods-row { display: none !important; }
.contact-map-section { /* still referenced but visit-map-section is the v5.9 version */ display: none !important; }

/* ========================================================================
   39.1  ABOUT — magazine portrait feature
   ======================================================================== */

.about-intro-magazine {
  padding: 90px 0 50px;
  background: var(--curly-cream);
  text-align: center;
}
.about-intro-magazine .about-intro-stack {
  max-width: 720px;
  margin: 0 auto;
}
.about-intro-magazine .about-intro-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-text-soft);
  margin-bottom: 18px;
  position: relative;
  padding: 0 32px;
}
.about-intro-magazine .about-intro-eyebrow::before,
.about-intro-magazine .about-intro-eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--curly-gold);
}
.about-intro-magazine .about-intro-eyebrow::before { left: 0; }
.about-intro-magazine .about-intro-eyebrow::after  { right: 0; }
.about-intro-magazine .about-intro-cursive {
  display: block;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--curly-gold);
  line-height: 1;
  margin: 4px 0 24px;
}
.about-intro-magazine .about-intro-headline {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--curly-text);
  margin: 0 0 30px;
  line-height: 1.5;
}
.about-intro-magazine .about-intro-lead {
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.78;
  color: var(--curly-text-soft);
  margin: 0;
  max-width: 60ch;
  margin: 0 auto;
}

/* PORTRAIT FEATURE — single big centered portrait with cursive overlay */
.about-portrait-feature {
  padding: 30px 0 80px;
  background: var(--curly-cream);
}
.portrait-feature-frame {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--curly-line);
}
.portrait-feature-frame::before {
  /* gold offset frame behind the portrait */
  content: "";
  position: absolute;
  inset: -18px -18px auto auto;
  width: 100%;
  height: 100%;
  border: 1px solid var(--curly-gold);
  pointer-events: none;
  z-index: -1;
}
.portrait-feature-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  filter: grayscale(15%);
  transition: filter 1.2s ease, transform 8s ease;
}
.portrait-feature-frame:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);
}
/* Cursive "Jean" overlay bottom-left */
.portrait-feature-frame .portrait-overlay-name {
  position: absolute;
  left: 28px;
  bottom: 22px;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: clamp(5rem, 12vw, 9rem);
  color: var(--curly-cream);
  line-height: 0.8;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  z-index: 2;
  letter-spacing: -0.02em;
}
/* Role caption bottom-right */
.portrait-feature-frame .portrait-overlay-role {
  position: absolute;
  right: 28px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.portrait-feature-frame .role-line {
  display: block;
  width: 30px;
  height: 1px;
  background: var(--curly-cream);
}
.portrait-feature-frame .role-text {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-cream);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 740px) {
  .portrait-feature-frame .portrait-overlay-name { font-size: 4rem; left: 18px; bottom: 16px; }
  .portrait-feature-frame .portrait-overlay-role { right: 18px; bottom: 22px; }
}

/* ========================================================================
   39.2  CONTACT — single big "Visit Card"
   ======================================================================== */

.visit-card-section {
  padding: 90px 0;
  background: var(--curly-cream);
  /* tinted backdrop with a faint gradient, like a luxury hotel landing */
  background: linear-gradient(180deg, var(--curly-cream) 0%, #fbf6ed 100%);
  position: relative;
}
.visit-card-section::before {
  /* subtle decorative cursive in the background */
  content: "Visit";
  position: absolute;
  right: -2vw;
  top: 40px;
  font-family: "Yellowtail", "Sacramento", cursive;
  font-size: clamp(10rem, 22vw, 22rem);
  line-height: 1;
  color: var(--curly-gold);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.visit-card-section .container { position: relative; z-index: 1; }

.visit-card {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  overflow: hidden;
  box-shadow: 0 50px 100px -60px rgba(0, 0, 0, 0.22);
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.visit-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--curly-gold);
  z-index: 2;
}

/* LEFT — photo */
.visit-card-photo {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background: var(--curly-line);
}
.visit-card-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
}
.visit-card-photo-caption {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-cream);
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* RIGHT — info panel */
.visit-card-info {
  padding: 56px 56px 50px;
  display: flex;
  flex-direction: column;
}
.visit-card-eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
  margin-bottom: 14px;
}
.visit-card-title {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--curly-text);
  margin: 0 0 28px;
}
.visit-card-title em,
.visit-card-title .italic-display {
  font-family: "Yellowtail", "Sacramento", cursive;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--curly-gold);
  font-size: 1.15em;
}
.visit-card-address {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--curly-text);
  margin: 0;
}
.visit-card-note {
  display: block;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--curly-text-soft);
  margin-top: 6px;
}
.visit-card-rule {
  border: 0;
  height: 1px;
  background: var(--curly-line);
  margin: 28px 0;
}
.visit-section-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--curly-gold);
  margin-bottom: 14px;
}
.visit-hours-list,
.visit-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visit-hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--curly-line);
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--curly-text);
}
.visit-hours-list li:last-child { border-bottom: 0; }
.visit-hours-list li.today { color: var(--curly-gold); font-weight: 700; }
.visit-hours-list .day {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.visit-hours-list li.today .day { color: var(--curly-gold); }
.visit-hours-list .time {
  font-weight: 500;
  letter-spacing: 0.03em;
}

.visit-contact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-family: var(--f-sans);
}
.visit-contact-list .contact-key {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
}
.visit-contact-list a {
  font-weight: 600;
  font-size: 1rem;
  color: var(--curly-text);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.visit-contact-list a:hover {
  color: var(--curly-gold);
  border-bottom-color: var(--curly-gold);
}

.visit-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding: 16px 28px;
  background: var(--curly-text);
  color: var(--curly-cream);
  border: 1px solid var(--curly-text);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.35s ease, border-color 0.35s ease, letter-spacing 0.3s ease;
}
.visit-card-cta:hover {
  background: var(--curly-gold);
  border-color: var(--curly-gold);
  letter-spacing: 0.5em;
}
.visit-card-cta span { display: inline-block; transition: transform 0.3s ease; }
.visit-card-cta:hover span { transform: translateX(4px); }

@media (max-width: 880px) {
  .visit-card { grid-template-columns: 1fr; }
  .visit-card-photo { min-height: 360px; aspect-ratio: 4 / 3; }
  .visit-card-info { padding: 40px 32px; }
}

/* Big map */
.visit-map-section { padding: 0 0 80px; background: var(--curly-cream); }
.visit-map {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: 1px solid var(--curly-line);
  background: var(--curly-cream);
}
.visit-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.visit-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px;
  color: var(--curly-text-soft);
}
@media (max-width: 880px) {
  .visit-map { aspect-ratio: 4 / 3; }
}

/* ========================================================================
   39.3  BOOKING — anchor button + Vagaro real-class overrides
   ======================================================================== */

/* Make the "Book Now" anchor look like the editorial CTA */
.booking-card-actions .booking-cta-anchor {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 18px 36px;
  background: var(--curly-text);
  color: var(--curly-cream);
  border: 1px solid var(--curly-text);
  text-decoration: none;
  transition: background .35s ease, color .35s ease, border-color .35s ease, letter-spacing .3s ease;
}
.booking-card-actions .booking-cta-anchor:hover {
  background: var(--curly-gold);
  border-color: var(--curly-gold);
  letter-spacing: 0.5em;
}
.booking-card-actions .booking-cta-anchor span {
  display: inline-block;
  transition: transform 0.3s ease;
}
.booking-card-actions .booking-cta-anchor:hover span {
  transform: translateY(3px);
}

/* ========================================================================
   39.4  VAGARO — real-class targeting (these classes ARE on our DOM)
   The user's pasted HTML revealed Vagaro's actual wrapper classes:
     .vagaro-container.vagaro-embedded-widget
       .vagaro-iframe
         iframe (iframe content unreachable — cross-origin)
         .vagaro-footer  (Powered by Vagaro / Salon Software / Hair Removal Software)
       .vagaro-noniframe (mobile fallback)
     .vagaro-container.vagaro-window-widget (window-mode wrapper)
   We can fully style the wrapper, the iframe sizing, and the promotional
   footer; only the iframe contents stay outside our reach.
   ======================================================================== */

/* Outer container — clean, no extra background */
.vagaro-container,
.vagaro-container.vagaro-embedded-widget {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--curly-cream) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Iframe wrapper — full-width, centered */
.vagaro-container .vagaro-iframe {
  position: relative;
  width: 100%;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--curly-cream) !important;
  text-align: center;
}

/* The iframe itself — full width, no border, natural height (Vagaro renders
   it tall — typically 3000px+ — and sets scrolling="no" so the content
   shows in full without inner scrollbars). */
.vagaro-container .vagaro-iframe iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
}

/* Hide the "Powered by Vagaro / Salon Software / Hair Removal Software"
   promotional footer entirely. Vagaro's TOS allows hiding this. */
.vagaro-container .vagaro-footer { display: none !important; }

/* Hide the legacy non-iframe + window-widget fallbacks (Vagaro keeps them
   in the DOM with display:none anyway, but we belt-and-suspenders) */
.vagaro-container .vagaro-noniframe,
.vagaro-container.vagaro-window-widget,
.vagaro-container .vagaro-mBooking,
.vagaro-container .vagaro-download {
  display: none !important;
}

/* Our shell wrapper — make it edge-to-edge clean */
.vagaro-shell {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--curly-cream);
  border: 1px solid var(--curly-line);
  overflow: hidden;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.10);
}
.vagaro-shell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--curly-text);
  color: var(--curly-cream);
}
.vagaro-shell-bar .vagaro-shell-eyebrow {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-gold);
}
.vagaro-shell-bar .vagaro-shell-newtab {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--curly-cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.vagaro-shell-bar .vagaro-shell-newtab:hover {
  border-bottom-color: var(--curly-gold);
}
.vagaro-shell-bar .vagaro-shell-newtab img.emoji {
  height: 12px; width: 12px;
  vertical-align: -2px;
  margin-left: 4px;
}

.vagaro-shell .vagaro-frame {
  position: relative;
  width: 100%;
  background: var(--curly-cream);
  padding: 0;
  margin: 0;
  border: 0;
}

.vagaro-shell-fallback {
  text-align: center;
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--curly-text-soft);
  padding: 20px 24px 22px;
  margin: 0;
  border-top: 1px solid var(--curly-line);
  background: var(--curly-cream);
}
.vagaro-shell-fallback a {
  color: var(--curly-gold);
  border-bottom: 1px solid var(--curly-gold);
  padding-bottom: 1px;
  text-decoration: none;
}

@media (max-width: 740px) {
  .vagaro-shell-bar { padding: 12px 16px; }
  .vagaro-shell-bar .vagaro-shell-eyebrow,
  .vagaro-shell-bar .vagaro-shell-newtab { font-size: 9px; letter-spacing: 0.3em; }
}

/* Smooth scroll for the in-page Book Now anchor */
html { scroll-behavior: smooth; }


/* ========================================================================
   40. v6.0 "DESERT ROSE" PREMIUM OVERHAUL
   ------------------------------------------------------------------------
   Final pass — applied AFTER every prior section so these declarations win
   the cascade. Goals:
     a) Re-tune the Mirror Mirror wordmark logo (italic Garamond serif,
        replacing the old [M] I R R O R boxed mark on every page).
     b) Skin the Vagaro widget shell + booking iframe wrapper to the
        Desert Rose palette (terracotta accents, peach cream surface).
     c) Polish premium feel: refined shadows, softer edges, generous spacing.
     d) Tighten responsive behaviour at every breakpoint.
   ======================================================================== */

/* ---------- 40.1 LOGO — italic serif "Mirror Mirror Hairstyles" ---------- */

/* Hide the old boxed-letter brand on EVERY page (homepage included) */
body .brand-curly .brand-box,
body .brand-curly .brand-letters {
  display: none !important;
}

/* Reveal the script wordmark on every page (even homepage) */
body .brand-curly .brand-script {
  display: inline-block !important;
  font-family: "Cormorant Garamond", "Playfair Display", "Garamond", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--curly-text);
  white-space: nowrap;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
/* Hide the small uppercase "Mirror" mark next to the script — we don't
   want a duplicate. The script itself reads "Mirror Mirror Hairstyles". */
body .brand-curly .brand-mark { display: none !important; }

/* Subtle text-shadow for readability on photo-heavy slider panels */
body.home-curly .brand-curly .brand-script {
  text-shadow:
    0 0 8px rgba(255, 248, 244, 0.7),
    0 1px 2px rgba(255, 248, 244, 0.55);
}

/* Flip to white when sitting over a dark slider half (homepage only) */
body.curly-on-dark .brand-curly .brand-script {
  color: var(--curly-pure-white);
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Make sure the scrolled header on inner pages still looks great */
.site-header.is-scrolled .brand-curly .brand-script {
  color: var(--curly-text);
  text-shadow: none;
}

/* If the client uploads a custom Site Logo image via Customizer,
   honour it — hide the wordmark and let the image render */
body .brand-logo img {
  max-height: 56px;
  width: auto;
}
body .brand-logo + .brand-curly { display: none; }


/* ---------- 40.2 GLOBAL PALETTE OVERRIDES ---------- */

body { background: var(--curly-cream); }

/* Accent + script colors site-wide */
em, .italic-display { color: var(--c-burgundy); }
.eyebrow { color: var(--c-burgundy); }
.eyebrow::before, .eyebrow::after { background: var(--c-burgundy); }
.script, .signature { color: var(--c-burgundy); }
::selection { background: var(--c-burgundy); color: var(--c-cream); }


/* ---------- 40.3 BUTTONS ---------- */

.btn--primary {
  background: var(--c-burgundy);
  color: var(--c-cream);
  border-color: var(--c-burgundy);
  letter-spacing: 0.28em;
}
.btn--primary:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}
.btn--cream {
  background: var(--c-cream);
  color: var(--c-ink);
  border-color: var(--c-cream);
}
.btn--cream:hover {
  background: var(--c-blush);
  border-color: var(--c-blush);
  color: var(--c-ink);
}

/* Nav CTA — terracotta outline */
.nav-cta {
  border-color: var(--c-burgundy);
  color: var(--c-burgundy);
}
.nav-cta:hover, .nav-cta.active {
  background: var(--c-burgundy);
  color: var(--c-cream);
  border-color: var(--c-burgundy);
}

/* Underline-on-hover for primary nav links */
.nav-links a::after { background: var(--c-burgundy); }
.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a { color: var(--c-burgundy); }


/* ---------- 40.4 PAGE BANNERS ---------- */

.page-banner {
  background: linear-gradient(180deg, var(--curly-cream) 0%, var(--curly-cream-2) 100%);
}
.page-banner h1 em,
.page-banner h1 .italic-display {
  color: var(--c-burgundy);
  font-family: "Yellowtail", "Sail", "Sacramento", cursive;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.page-banner .crumbs a { color: var(--c-burgundy); }
.page-banner .crumbs a:hover { color: var(--c-ink); }


/* ---------- 40.5 SLIDER (front page) ---------- */

/* Hero brushy script — terracotta */
.curly-hero-script { color: var(--c-burgundy); }
.curly-hero-zigzag { color: var(--c-burgundy); }

/* Big watermark words ("Studio", "Master", "Menu") — soft peach on light, faint on dark */
.curly-text-bg-script { color: var(--curly-rose-soft); opacity: 0.85; }
.curly-half--text.bg-dark .curly-text-bg-script {
  color: var(--curly-rose);
  opacity: 0.18;
}

/* Slide read-more underline */
.curly-readmore {
  color: var(--c-burgundy);
  border-bottom-color: var(--c-burgundy);
}
.curly-readmore:hover { color: var(--curly-brown); border-bottom-color: var(--curly-brown); }

/* Service preview list bullets / accent on slide 3 */
.curly-services-preview .svc-price { color: var(--c-burgundy); }

/* CTA button on Book panel of slider */
.curly-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  background: var(--c-burgundy);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid var(--c-burgundy);
  transition: all 0.4s var(--e-out);
}
.curly-cta-btn:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
  gap: 18px;
}

/* "Kirkwood" overlay on the visit slide image */
.curly-half-overlay-script { color: var(--curly-cream); }


/* ---------- 40.6 SERVICE / PRICING CARDS ---------- */

/* Charcoal tone on service cards — restyle with peach accent */
.tone-charcoal {
  background: linear-gradient(180deg, #26160c 0%, #3a261b 100%);
}
.tone-charcoal .service-card-tag { color: var(--curly-rose); }
.tone-charcoal .service-card-title { color: var(--curly-cream); }
.tone-charcoal .service-card-price { color: var(--curly-rose); }
.tone-charcoal .service-card-book {
  color: var(--curly-rose-soft);
  border-bottom-color: var(--curly-rose-soft);
}
.tone-charcoal .service-card-book:hover {
  color: var(--curly-rose);
  border-bottom-color: var(--curly-rose);
}

/* Pricing card refinement — deeper shadows, peach accents */
.pricing-card {
  border-radius: 4px;
  box-shadow: 0 30px 60px -45px rgba(38, 22, 12, 0.25);
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -45px rgba(38, 22, 12, 0.35);
}
.tone-charcoal.pricing-card .pricing-card-list .row-price { color: var(--curly-rose); }


/* ---------- 40.7 VAGARO BOOKING — Desert Rose skin ---------- */

/* Section background — soft tinted backdrop */
.vagaro-section {
  background: linear-gradient(180deg, var(--curly-cream) 0%, var(--curly-cream-2) 100%);
  padding: 80px 0 100px;
}

/* Outer shell wrapping the iframe — premium card */
.vagaro-shell {
  background: var(--curly-white);
  border: 1px solid var(--curly-line);
  border-radius: 6px;
  box-shadow:
    0 50px 120px -60px rgba(38, 22, 12, 0.30),
    0 12px 30px -20px rgba(139, 50, 44, 0.18);
  overflow: hidden;
}

/* Header bar above the iframe — terracotta on cream, premium label */
.vagaro-shell-bar {
  background: var(--c-ink);
  color: var(--curly-cream);
  padding: 18px 28px;
  border-bottom: 0;
  position: relative;
}
.vagaro-shell-bar::after {
  /* hairline accent under the bar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 50%,
    var(--c-lavender) 100%);
}
.vagaro-shell-bar .vagaro-shell-eyebrow {
  color: var(--curly-rose);
  font-weight: 700;
  letter-spacing: 0.45em;
  font-size: 11px;
}
.vagaro-shell-bar .vagaro-shell-newtab {
  color: var(--curly-cream);
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 10px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.vagaro-shell-bar .vagaro-shell-newtab:hover {
  color: var(--curly-rose);
  border-bottom-color: var(--curly-rose);
}

/* Frame wrapper — clean white surface so Vagaro's iframe shines */
.vagaro-shell .vagaro-frame,
.vagaro-frame {
  background: var(--curly-pure-white);
  min-height: 720px;
  position: relative;
}
.vagaro-shell .vagaro-frame::before,
.vagaro-frame::before {
  /* subtle loading shimmer until Vagaro mounts */
  content: "Loading availability…";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.vagaro-shell .vagaro-frame iframe,
.vagaro-shell .vagaro-host iframe,
.vagaro-frame iframe {
  position: relative;
  z-index: 1;
  width: 100% !important;
  min-height: 720px !important;
  border: 0 !important;
  background: var(--curly-pure-white) !important;
  display: block;
}

/* The container Vagaro itself injects — paint it our color */
.vagaro-container,
.vagaro-container.vagaro-embedded-widget {
  background: var(--curly-pure-white) !important;
}
.vagaro-container .vagaro-iframe {
  background: var(--curly-pure-white) !important;
}
.vagaro-container .vagaro-iframe iframe {
  background: var(--curly-pure-white) !important;
}

/* Hide Vagaro's "Powered by" promo footer */
.vagaro-container .vagaro-footer,
.vagaro-host > a[href*="vagaro.com/salon-software"] {
  display: none !important;
}

/* Below-iframe fallback line — peach accent link */
.vagaro-shell-fallback {
  background: var(--curly-cream);
  border-top: 1px solid var(--curly-line);
  color: var(--curly-text-soft);
  padding: 22px 28px 24px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-style: italic;
}
.vagaro-shell-fallback a {
  color: var(--c-burgundy);
  border-bottom: 1px solid var(--c-burgundy);
  font-style: normal;
  font-weight: 500;
}
.vagaro-shell-fallback a:hover {
  color: var(--curly-brown);
  border-bottom-color: var(--curly-brown);
}

/* "Book Now" anchor button on the booking page */
.booking-cta-anchor {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 36px;
  background: var(--c-burgundy);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid var(--c-burgundy);
  transition: all 0.35s var(--e-out);
}
.booking-cta-anchor:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
  gap: 20px;
}
.booking-cta-anchor span { transition: transform 0.3s ease; }
.booking-cta-anchor:hover span { transform: translateY(3px); }

.booking-secondary {
  display: inline-block;
  margin-left: 18px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--curly-text-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.booking-secondary:hover {
  color: var(--c-burgundy);
  border-bottom-color: var(--c-burgundy);
}


/* ---------- 40.8 FINAL CTA SECTION ---------- */
.cta-final {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  /* faint cursive watermark — peach */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%,
    rgba(212, 134, 98, 0.08) 0%,
    transparent 60%);
  pointer-events: none;
}
.cta-final h2 { color: var(--c-cream); }
.cta-final h2 em,
.cta-final h2 .italic-display { color: var(--curly-rose); }
.cta-final p { color: var(--curly-text-dark-bg); }


/* ---------- 40.9 FOOTER ---------- */
.footer {
  background: var(--c-ink);
  color: var(--curly-text-dark-bg);
  padding: 80px 0 40px;
}
.footer h5 { color: var(--curly-rose); letter-spacing: 0.32em; }
.footer a { color: var(--curly-cream); transition: color 0.3s ease; }
.footer a:hover { color: var(--curly-rose); }
.footer-mark {
  font-family: "Cormorant Garamond", "Playfair Display", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--curly-cream);
  margin-bottom: 50px;
  text-align: center;
  letter-spacing: 0.005em;
}
.footer-mark .script {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--curly-rose);
  font-weight: 500;
}
.footer-bot {
  border-top: 1px solid rgba(212, 134, 98, 0.18);
  padding-top: 30px;
  margin-top: 50px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}


/* ---------- 40.10 MOBILE MENU PANEL refresh ---------- */
.mobile-menu-panel { background: var(--curly-cream); }
.mobile-menu-nav .num { color: var(--c-burgundy); }
.mobile-menu-nav a:hover .lbl,
.mobile-menu-nav a.active .lbl { color: var(--c-burgundy); }
.mobile-menu-foot a { color: var(--c-burgundy); }
.mobile-menu-foot a:hover { color: var(--curly-brown); }


/* ---------- 40.11 RESPONSIVE TIGHTENING ---------- */

/* Tablet */
@media (max-width: 1100px) {
  .container { padding-left: 28px; padding-right: 28px; }
  .pricing-cards { gap: 22px; }
  .meet-jean-grid { gap: 50px; }
}

/* Small tablet / large phone */
@media (max-width: 880px) {
  .nav-cta-desktop { display: none; }
  .nav-links { display: none; }
  .burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
  .vagaro-shell-bar { padding: 14px 18px; }
  .vagaro-shell-bar .vagaro-shell-eyebrow { font-size: 10px; letter-spacing: 0.32em; }
  .vagaro-shell-bar .vagaro-shell-newtab { font-size: 9px; letter-spacing: 0.28em; }
  .vagaro-shell .vagaro-frame iframe,
  .vagaro-shell .vagaro-host iframe,
  .vagaro-frame iframe {
    min-height: 600px !important;
  }
  .pricing-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .booking-card-grid { grid-template-columns: 1fr; gap: 30px; }
  .booking-card-photo img { max-height: 360px; object-fit: cover; }
  .visit-card { grid-template-columns: 1fr; }
  .visit-card-photo { min-height: 320px; }
}

/* Phone */
@media (max-width: 640px) {
  .container { padding-left: 20px; padding-right: 20px; }
  body .brand-curly .brand-script { font-size: 19px; }
  body.home-curly .site-header { padding: 14px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .footer-grid .social-row { justify-content: center; }
  .vagaro-shell-bar { flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 12px 14px; }
  .vagaro-shell-fallback { font-size: 0.85rem; padding: 16px 18px 18px; }
  .booking-callouts { grid-template-columns: 1fr; gap: 24px; }
  .pricing-card { padding: 28px 22px; }
  .service-card { padding: 28px 22px 24px; }
  .cta-final { padding: 70px 0; }
  .cta-final h2 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .booking-secondary { display: block; margin-left: 0; margin-top: 14px; }
}

/* Small phone */
@media (max-width: 380px) {
  body .brand-curly .brand-script { font-size: 17px; }
  .vagaro-shell .vagaro-frame iframe,
  .vagaro-shell .vagaro-host iframe,
  .vagaro-frame iframe {
    min-height: 540px !important;
  }
}


/* ---------- 40.12 PREMIUM POLISH ---------- */

/* Soften image rendering */
img { image-rendering: -webkit-optimize-contrast; }

/* Generic section-card lift */
.pricing-card,
.service-card,
.vagaro-shell,
.visit-card,
.booking-card,
.testimonial {
  transition: transform 0.45s var(--e-out), box-shadow 0.45s var(--e-out);
}

/* Smooth scrollbar */
html { scroll-behavior: smooth; }
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--c-burgundy) var(--c-cream-2); }
}

/* ---------- 40.13 Vagaro fallback states ---------- */

.vagaro-promo-link {
  display: none !important;   /* hide the inline "powered by Vagaro" link;
                                 the iframe shows it inside its own UI */
}

.vagaro-noscript-fallback {
  text-align: center;
  padding: 30px 24px;
  font-family: var(--f-body);
  font-style: italic;
  color: var(--curly-text-soft);
  background: var(--curly-cream);
  margin: 0;
}
.vagaro-noscript-fallback a {
  color: var(--c-burgundy);
  border-bottom: 1px solid var(--c-burgundy);
  font-style: normal;
}

.vagaro-host--fallback {
  text-align: center;
  padding: 60px 30px;
  background: var(--curly-cream);
}

/* =====================================================================
   41. v6.1 "DESERT ROSE — REFINEMENT PASS"
   Hot-fixes layered on top of v6.0:
     a) Logo — boxed [MM] monogram + uppercase wordmark + peach pill highlight
     b) Burger menu — visible pill on every page surface (light/dark/photo)
     c) Hero image — sharper rendering treatment
     d) About page — new aligned layout (.about-intro-v6 / .about-stats-v6 etc.)
     e) Charcoal service-card hover — keep all text readable
     f) Vagaro shell — premium frame, decorative ornament, themed loading
     g) Contact hours — explicit row styling so all 7 days render
     h) Footer — warm bordeaux background + complete social-icon circles
     i) Page transitions — fade-in animations on every page mount
     j) Mobile menu — sleeker open/close motion
   ===================================================================== */


/* ---------- 41.1 LOGO — boxed monogram + wordmark + highlight ---------- */

/* Hide v5 leftovers (boxed M letters, italic script wordmark from v6.0) */
body .brand-curly .brand-box,
body .brand-curly .brand-letters,
body .brand-curly .brand-script,
body .brand-curly .brand-mark { display: none !important; }

/* Reveal the new v6.1 wordmark elements on every page */
body .brand-curly {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border: 0;
  padding: 6px 14px 6px 6px;
  background: linear-gradient(
    100deg,
    rgba(212, 134, 98, 0.18) 0%,
    rgba(212, 134, 98, 0.06) 50%,
    rgba(131, 129, 166, 0.10) 100%
  );
  border-radius: 999px;
  border: 1px solid rgba(139, 50, 44, 0.15);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}
body .brand-curly:hover {
  background: linear-gradient(
    100deg,
    rgba(212, 134, 98, 0.32) 0%,
    rgba(212, 134, 98, 0.14) 50%,
    rgba(131, 129, 166, 0.18) 100%
  );
  border-color: rgba(139, 50, 44, 0.32);
  box-shadow: 0 8px 24px -12px rgba(139, 50, 44, 0.35);
}

body .brand-curly .brand-monogram {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--c-burgundy);
  background: var(--c-cream);
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--c-burgundy);
  text-transform: uppercase;
  border-radius: 999px;
  flex-shrink: 0;
  transition: all 0.4s ease;
}

body .brand-curly .brand-wordmark {
  display: inline-block !important;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  line-height: 1.1;
  white-space: nowrap;
  padding-right: 6px;
}
body .brand-curly .brand-wordmark em,
body .brand-curly .brand-wordmark .italic-display {
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-burgundy);
  font-family: "Cormorant Garamond", serif;
  text-transform: none;
  font-size: 1.15em;
  margin-left: 2px;
}

/* Homepage: subtle halo around the pill so it stays readable on photos */
body.home-curly .brand-curly {
  background: rgba(250, 243, 238, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Flip to white on dark slider half */
body.curly-on-dark .brand-curly {
  background: rgba(38, 22, 12, 0.55);
  border-color: rgba(212, 134, 98, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.curly-on-dark .brand-curly .brand-monogram {
  border-color: var(--curly-rose);
  background: transparent;
  color: var(--curly-rose);
}
body.curly-on-dark .brand-curly .brand-wordmark { color: var(--curly-cream); }
body.curly-on-dark .brand-curly .brand-wordmark em { color: var(--curly-rose); }

/* If client uploads a Site Logo, hide the wordmark pill */
body .brand-logo + .brand-curly,
body .brand-logo ~ .brand-curly { display: none !important; }


/* ---------- 41.2 BURGER MENU — visible pill on any surface ---------- */

body .burger {
  display: flex !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  background: rgba(250, 243, 238, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 50, 44, 0.18) !important;
  box-shadow: 0 6px 18px -10px rgba(38, 22, 12, 0.25);
  position: relative;
  z-index: 6;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
body .burger:hover {
  background: var(--c-cream) !important;
  border-color: var(--c-burgundy) !important;
  transform: scale(1.05);
  box-shadow: 0 10px 24px -12px rgba(139, 50, 44, 0.4);
}
body .burger span {
  background: var(--c-burgundy) !important;
  height: 1.8px !important;
  width: 22px !important;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  margin-left: -11px;
  transition: all 0.4s var(--e-out);
}
body .burger span:nth-child(1) { top: 16px; }
body .burger span:nth-child(2) { top: 22px; width: 16px !important; margin-left: -8px; }
body .burger span:nth-child(3) { top: 28px; }
body .burger.open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body .burger.open span:nth-child(2) { opacity: 0; }
body .burger.open span:nth-child(3) { top: 22px; transform: rotate(-45deg); width: 22px !important; margin-left: -11px; }

/* Burger flips to dark-warm on dark slider half */
body.curly-burger-on-dark .burger {
  background: rgba(38, 22, 12, 0.6) !important;
  border-color: rgba(212, 134, 98, 0.35) !important;
}
body.curly-burger-on-dark .burger span {
  background: var(--curly-rose) !important;
}


/* ---------- 41.3 HERO IMAGE — sharper rendering treatment ---------- */

.curly-half--image .curly-half-bg {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  background-position: center top;
  /* Subtle vignette to mask upscale softness on the edges */
  position: absolute;
  inset: 0;
}
.curly-half--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(38, 22, 12, 0.08) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* High-res-friendly rendering for inline portraits */
.about-intro-v6__photo-frame img,
.portrait-feature-frame img,
.booking-card-photo img,
.visit-card-photo img {
  image-rendering: -webkit-optimize-contrast;
}


/* ---------- 41.4 ABOUT PAGE — v6.1 LAYOUT ---------- */

.about-intro-v6 {
  padding: 100px 0 80px;
  background: var(--curly-cream);
}
.about-intro-v6__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.about-intro-v6__photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--curly-cream-2);
}
.about-intro-v6__photo-frame::before {
  content: "";
  position: absolute;
  inset: -20px -20px auto auto;
  width: 70%;
  height: 70%;
  border: 1px solid var(--c-burgundy);
  z-index: -1;
  pointer-events: none;
}
.about-intro-v6__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(1.05);
  transition: transform 8s ease;
}
.about-intro-v6__photo-frame:hover img { transform: scale(1.04); }

.about-intro-v6__photo-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  padding: 8px 16px;
  background: rgba(38, 22, 12, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--curly-rose);
  border-radius: 999px;
}

.about-intro-v6__text { padding-top: 18px; }
.about-intro-v6__eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin-bottom: 22px;
  position: relative;
  padding-left: 38px;
}
.about-intro-v6__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--c-burgundy);
}

.about-intro-v6__heading {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 32px;
}
.about-intro-v6__heading em {
  font-family: "Yellowtail", "Sail", "Sacramento", cursive;
  font-style: italic;
  font-weight: 400;
  color: var(--c-burgundy);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.15em;
  display: inline-block;
  margin: 0 4px;
  line-height: 0.85;
}

.about-intro-v6__body p {
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--c-text);
  margin: 0 0 1em;
}
.about-intro-v6__body p:first-child::first-letter {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 6px 12px 0 0;
  color: var(--c-burgundy);
}

.about-intro-v6__signature {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--curly-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-intro-v6__sig-script {
  font-family: "Yellowtail", "Sail", cursive;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  color: var(--c-burgundy);
  line-height: 1;
}
.about-intro-v6__sig-role {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Pull-quote band */
.about-quote-v6 {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--curly-cream-2) 0%, var(--curly-cream) 100%);
  text-align: center;
  position: relative;
}
.about-quote-v6::before,
.about-quote-v6::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 60px;
  height: 1px;
  background: var(--c-burgundy);
  transform: translateX(-50%);
}
.about-quote-v6::before { top: 30px; }
.about-quote-v6::after  { bottom: 30px; }
.about-quote-v6__inner { max-width: 760px; margin: 0 auto; padding: 30px 20px; }
.about-quote-v6__mark {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(5rem, 10vw, 8rem);
  color: var(--c-burgundy);
  line-height: 0.6;
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}
.about-quote-v6 blockquote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  color: var(--c-ink);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 20px;
}
.about-quote-v6 blockquote em { color: var(--c-burgundy); display: block; margin-top: 6px; }
.about-quote-v6 cite {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-style: normal;
}

/* Three principles */
.about-principles-v6 { padding: 100px 0; background: var(--curly-cream); }
.about-principles-v6__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}
.about-principle {
  padding: 40px 32px 36px;
  background: var(--curly-white);
  border: 1px solid var(--curly-line);
  border-radius: 4px;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out), border-color 0.4s ease;
}
.about-principle:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(38, 22, 12, 0.25);
  border-color: var(--c-burgundy);
}
.about-principle__num {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--c-burgundy);
  padding: 6px 14px;
  border: 1px solid var(--c-burgundy);
  border-radius: 999px;
  margin-bottom: 22px;
}
.about-principle h3 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0 0 14px;
}
.about-principle p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0;
}

/* Stats band */
.about-stats-v6 {
  padding: 80px 0;
  background: var(--c-ink);
  color: var(--curly-cream);
  position: relative;
}
.about-stats-v6::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 50%,
    var(--c-lavender) 100%);
}
.about-stats-v6__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
}
.about-stat__num {
  display: block;
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  line-height: 1;
  color: var(--curly-rose);
  margin-bottom: 14px;
}
.about-stat__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--curly-text-dark-bg);
}

/* Studio image-text */
.about-studio-v6 { padding: 100px 0; background: var(--curly-cream); }
.about-studio-v6__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.about-studio-v6__text .eyebrow { color: var(--c-burgundy); margin-bottom: 18px; }
.about-studio-v6__text h2 {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.18;
  margin: 0 0 22px;
  color: var(--c-ink);
}
.about-studio-v6__text h2 em {
  font-family: "Yellowtail", "Sail", cursive;
  font-style: italic;
  font-weight: 400;
  color: var(--c-burgundy);
  text-transform: none;
  font-size: 1.18em;
  letter-spacing: 0;
  margin: 0 4px;
}
.about-studio-v6__text .lead {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--c-text);
  margin: 0 0 18px;
}
.about-studio-v6__text p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--c-text);
  margin: 0 0 28px;
}
.about-studio-v6__image img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Hide v5/v6 about page sections we replaced */
.about-intro-magazine,
.about-portrait-feature,
.about-body,
.about-quote-band,
.about-stats,
.philosophy.section,
.image-text.image-text--reverse { display: none !important; }


/* ---------- 41.5 CHARCOAL SERVICE CARD HOVER FIX ---------- */

/* Charcoal cards must keep ALL text readable on hover. Hover state shouldn't
   change colours — only lift + border accent. */
.tone-charcoal.service-card,
.tone-charcoal.pricing-card {
  background: linear-gradient(180deg, #26160c 0%, #3a261b 100%);
  border-color: #3a261b;
}
.tone-charcoal.service-card:hover,
.tone-charcoal.pricing-card:hover {
  background: linear-gradient(180deg, #2e1b10 0%, #422c1f 100%);
  border-color: var(--c-blush-deep);
  box-shadow: 0 30px 60px -40px rgba(212, 134, 98, 0.32);
}

/* Lock text colours on hover */
.tone-charcoal.service-card .service-card-tag,
.tone-charcoal.service-card:hover .service-card-tag {
  color: var(--c-blush-deep) !important;
}
.tone-charcoal.service-card .service-card-title,
.tone-charcoal.service-card:hover .service-card-title {
  color: var(--curly-cream) !important;
}
.tone-charcoal.service-card .service-card-desc,
.tone-charcoal.service-card:hover .service-card-desc {
  color: #f3e3d8 !important;
  opacity: 1 !important;
}
.tone-charcoal.service-card .service-card-price,
.tone-charcoal.service-card:hover .service-card-price {
  color: var(--c-blush-deep) !important;
}
.tone-charcoal.service-card .service-card-foot,
.tone-charcoal.service-card:hover .service-card-foot {
  border-top-color: rgba(212, 134, 98, 0.25) !important;
}
.tone-charcoal.service-card .service-card-book,
.tone-charcoal.service-card:hover .service-card-book {
  color: var(--c-blush) !important;
  border-bottom-color: var(--c-blush) !important;
}
.tone-charcoal.service-card .service-card-book:hover {
  color: var(--c-blush-deep) !important;
  border-bottom-color: var(--c-blush-deep) !important;
}

/* Same lock for pricing-card charcoal */
.tone-charcoal.pricing-card .pricing-card-num { color: var(--c-blush-deep); }
.tone-charcoal.pricing-card .pricing-card-title { color: var(--curly-cream); }
.tone-charcoal.pricing-card .pricing-card-desc { color: #e9c5b0; }
.tone-charcoal.pricing-card .from-label { color: rgba(212, 134, 98, 0.7); }
.tone-charcoal.pricing-card .from-amount { color: var(--c-blush-deep); }
.tone-charcoal.pricing-card .row-name { color: var(--curly-cream); }
.tone-charcoal.pricing-card .row-price { color: var(--c-blush-deep); }
.tone-charcoal.pricing-card .row-dots { color: rgba(212, 134, 98, 0.3); }
.tone-charcoal.pricing-card .pricing-card-list li { border-bottom-color: rgba(212, 134, 98, 0.18); }
.tone-charcoal.pricing-card .pricing-card-book {
  color: var(--c-blush) !important;
  border-bottom-color: var(--c-blush) !important;
}
.tone-charcoal.pricing-card .pricing-card-book:hover {
  color: var(--c-blush-deep) !important;
  border-bottom-color: var(--c-blush-deep) !important;
}


/* ---------- 41.6 VAGARO SHELL — premium frame, decorative ornament ---------- */

.vagaro-section {
  position: relative;
  padding: 90px 0 110px;
  background:
    radial-gradient(ellipse at top, rgba(212, 134, 98, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--curly-cream) 0%, var(--curly-cream-2) 100%);
  overflow: hidden;
}
.vagaro-section::before {
  content: "Booking";
  position: absolute;
  left: -3vw;
  top: 30px;
  font-family: "Yellowtail", "Sail", cursive;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 1;
  color: var(--c-burgundy);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Section eyebrow above the shell */
.vagaro-section .container { position: relative; z-index: 1; }
.vagaro-section .container::before {
  content: "Live Availability · Real-Time Calendar";
  display: block;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin-bottom: 26px;
}

.vagaro-shell {
  background: var(--curly-pure-white);
  border: 1px solid var(--curly-line);
  border-radius: 8px;
  box-shadow:
    0 60px 140px -70px rgba(38, 22, 12, 0.4),
    0 16px 40px -22px rgba(139, 50, 44, 0.22);
  overflow: hidden;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.vagaro-shell::before {
  /* gold/peach accent ribbon top-left */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 110px;
  height: 4px;
  background: linear-gradient(90deg, var(--c-burgundy) 0%, var(--c-blush-deep) 100%);
  z-index: 4;
}
.vagaro-shell::after {
  /* matching ribbon bottom-right */
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 110px;
  height: 4px;
  background: linear-gradient(90deg, var(--c-blush-deep) 0%, var(--c-burgundy) 100%);
  z-index: 4;
}

.vagaro-shell-bar {
  background: linear-gradient(90deg, var(--c-ink) 0%, #3a1d14 100%);
  color: var(--curly-cream);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  border-bottom: 0;
}
.vagaro-shell-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 35%,
    var(--c-lavender) 70%,
    var(--c-burgundy) 100%);
}
.vagaro-shell-bar .vagaro-shell-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-blush-deep);
  font-weight: 700;
  letter-spacing: 0.4em;
  font-size: 11px;
  text-transform: uppercase;
}
.vagaro-shell-bar .vagaro-shell-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-blush-deep);
  box-shadow: 0 0 0 4px rgba(212, 134, 98, 0.22);
  animation: vagaro-pulse 2s ease-in-out infinite;
}
@keyframes vagaro-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(212, 134, 98, 0.22); }
  50%      { box-shadow: 0 0 0 8px rgba(212, 134, 98, 0.10); }
}

.vagaro-shell-bar .vagaro-shell-newtab {
  color: var(--curly-cream);
  font-weight: 600;
  letter-spacing: 0.3em;
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.vagaro-shell-bar .vagaro-shell-newtab:hover {
  color: var(--c-blush-deep);
  border-bottom-color: var(--c-blush-deep);
}

/* Frame around the iframe */
.vagaro-shell .vagaro-frame,
.vagaro-frame {
  position: relative;
  background: var(--curly-pure-white);
  min-height: 760px;
  padding: 0;
}
.vagaro-shell .vagaro-frame::before,
.vagaro-frame::before {
  content: "Loading availability";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-burgundy);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.vagaro-shell .vagaro-frame::after,
.vagaro-frame::after {
  content: "";
  position: absolute;
  top: calc(50% + 26px);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(139, 50, 44, 0.18);
  border-top-color: var(--c-burgundy);
  animation: vagaro-spin 0.9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vagaro-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* Iframe sits above the loading state */
.vagaro-shell .vagaro-frame iframe,
.vagaro-shell .vagaro-host iframe,
.vagaro-frame iframe,
.vagaro-container .vagaro-iframe iframe {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 760px !important;
  border: 0 !important;
  background: var(--curly-pure-white) !important;
  display: block !important;
}

.vagaro-shell-fallback {
  background: var(--curly-cream);
  border-top: 1px solid var(--curly-line);
  color: var(--curly-text-soft);
  padding: 24px 32px 26px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-style: italic;
  margin: 0;
  text-align: center;
}
.vagaro-shell-fallback a {
  color: var(--c-burgundy);
  border-bottom: 1px solid var(--c-burgundy);
  font-style: normal;
  font-weight: 600;
  padding-bottom: 1px;
}
.vagaro-shell-fallback a:hover {
  color: var(--c-blush-deep);
  border-bottom-color: var(--c-blush-deep);
}

/* Hide Vagaro's own promo footer */
.vagaro-container .vagaro-footer,
.vagaro-host > a[href*="vagaro.com/salon-software"],
.vagaro-promo-link { display: none !important; }


/* ---------- 41.7 CONTACT HOURS — robust per-row visibility ---------- */

/* Make sure every <li> in the visit hours list renders, regardless of
   whether spans have classes or not. Target both class- and position-based. */
.visit-hours-list,
.visit-card-hours .visit-hours-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.visit-hours-list li,
.visit-hours-list li.hours-row,
.visit-card-hours .visit-hours-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 10px 0 !important;
  border-bottom: 1px dashed var(--curly-line) !important;
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  color: var(--c-text) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.visit-hours-list li:last-child { border-bottom: 0 !important; }

.visit-hours-list li > span:first-child,
.visit-hours-list li .day {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--c-ink) !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}
.visit-hours-list li > span:last-child,
.visit-hours-list li .time {
  font-family: var(--f-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  color: var(--c-text) !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  text-align: right !important;
}

/* "Today" highlight row */
.visit-hours-list li.today,
.visit-hours-list li.today .day,
.visit-hours-list li.today .time,
.visit-hours-list li.today > span {
  color: var(--c-burgundy) !important;
  font-weight: 700 !important;
}
.visit-hours-list li.today {
  background: rgba(212, 134, 98, 0.08) !important;
  margin: 0 -12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border-radius: 4px !important;
}

/* Closed days — softened */
.visit-hours-list li.is-closed > span:last-child,
.visit-hours-list li.is-closed .time {
  color: var(--c-muted) !important;
  font-style: italic !important;
}


/* ---------- 41.8 FOOTER — warm bordeaux + complete social circles ---------- */

.footer {
  /* Warm bordeaux/wine tone — softer than pure espresso, less heavy */
  background:
    radial-gradient(ellipse at top right, rgba(212, 134, 98, 0.10) 0%, transparent 60%),
    linear-gradient(165deg, #4a201a 0%, #3a1610 60%, #2d100c 100%);
  color: var(--curly-text-dark-bg);
  padding: 100px 0 50px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 50%,
    var(--c-lavender) 100%);
}

.footer h5 {
  color: var(--c-blush-deep);
  letter-spacing: 0.32em;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer p,
.footer ul li,
.footer ul {
  color: var(--curly-text-dark-bg);
  font-family: var(--f-body);
  font-size: 0.98rem;
  line-height: 1.7;
}
.footer a {
  color: var(--curly-cream);
  transition: color 0.3s ease;
}
.footer a:hover { color: var(--c-blush-deep); }

.footer-mark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--curly-cream);
  margin: 0 0 50px;
  text-align: center;
  letter-spacing: 0.005em;
}
.footer-mark .script {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--c-blush-deep);
  font-weight: 500;
}

/* Social row — proper circles, no clipping */
.footer .social-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.footer .social-row a {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 134, 98, 0.4);
  border-radius: 50%;
  color: var(--curly-cream);
  background: transparent;
  transition: all 0.35s var(--e-out);
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}
.footer .social-row a:hover {
  background: var(--c-blush-deep);
  border-color: var(--c-blush-deep);
  color: var(--c-ink);
  transform: translateY(-2px);
}
.footer .social-row svg {
  width: 16px;
  height: 16px;
  display: block;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
}

.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  margin-top: 0;
  border-top: 1px solid rgba(212, 134, 98, 0.18);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 227, 216, 0.6);
  flex-wrap: wrap;
  gap: 16px;
}


/* ---------- 41.9 PAGE TRANSITIONS — fade-in on every page ---------- */

@keyframes mm-page-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mm-banner-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Apply to body except when prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  body:not(.home-curly) {
    animation: mm-page-fade 0.55s var(--e-out) both;
  }
  body:not(.home-curly) .page-banner-content {
    animation: mm-banner-rise 0.7s var(--e-out) 0.1s both;
  }
  /* Stagger animation for the sections after the banner */
  body:not(.home-curly) .section,
  body:not(.home-curly) .vagaro-section,
  body:not(.home-curly) .about-intro-v6,
  body:not(.home-curly) .about-quote-v6,
  body:not(.home-curly) .about-principles-v6,
  body:not(.home-curly) .about-stats-v6,
  body:not(.home-curly) .about-studio-v6,
  body:not(.home-curly) .visit-card-section,
  body:not(.home-curly) .visit-map-section,
  body:not(.home-curly) .booking-card-section,
  body:not(.home-curly) .cta-final {
    animation: mm-page-fade 0.7s var(--e-out) 0.25s both;
  }
}


/* ---------- 41.10 MOBILE MENU — sleeker open/close motion ---------- */

.mobile-menu-panel {
  background: linear-gradient(160deg, var(--curly-cream) 0%, var(--curly-cream-2) 100%) !important;
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1) !important;
}
.mobile-menu-backdrop {
  background: rgba(38, 22, 12, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.55s cubic-bezier(0.86, 0, 0.07, 1) !important;
}

.mobile-menu-nav li {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s var(--e-out), transform 0.5s var(--e-out);
}
.mobile-menu.open .mobile-menu-nav li { opacity: 1; transform: translateX(0); }
.mobile-menu.open .mobile-menu-nav li:nth-child(1) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(2) { transition-delay: 0.22s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(3) { transition-delay: 0.26s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(4) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(5) { transition-delay: 0.34s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(6) { transition-delay: 0.38s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(7) { transition-delay: 0.42s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(8) { transition-delay: 0.46s; }

.mobile-menu-nav .num {
  color: var(--c-burgundy) !important;
  transition: color 0.3s ease;
}
.mobile-menu-nav a:hover .num,
.mobile-menu-nav a.active .num { color: var(--c-blush-deep) !important; }
.mobile-menu-nav a:hover .lbl,
.mobile-menu-nav a.active .lbl { color: var(--c-burgundy) !important; }

.mobile-menu-foot a { color: var(--c-burgundy) !important; }
.mobile-menu-foot a:hover { color: var(--curly-brown) !important; }


/* ---------- 41.11 RESPONSIVE TIGHTENING ---------- */

@media (max-width: 1100px) {
  .about-intro-v6__grid { gap: 50px; }
  .about-studio-v6__grid { gap: 50px; }
  .footer-grid { gap: 40px; }
}

@media (max-width: 880px) {
  body .brand-curly .brand-wordmark { display: none !important; }
  body .brand-curly { padding: 4px; border: 0; background: transparent; }
  body .brand-curly:hover { background: transparent; box-shadow: none; }
  body.home-curly .brand-curly,
  body.curly-on-dark .brand-curly { background: transparent; }
  body .brand-curly .brand-monogram { width: 42px; height: 42px; font-size: 14px; }

  .about-intro-v6__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-intro-v6__photo-frame { max-width: 480px; margin: 0 auto; }
  .about-principles-v6__grid { grid-template-columns: 1fr; gap: 18px; }
  .about-stats-v6__grid { grid-template-columns: 1fr; gap: 30px; }
  .about-studio-v6__grid { grid-template-columns: 1fr; gap: 30px; }
  .about-studio-v6__image img { max-height: 420px; }

  .vagaro-shell-bar { padding: 14px 18px; flex-direction: row; gap: 10px; }
  .vagaro-shell-bar .vagaro-shell-eyebrow { font-size: 9px; letter-spacing: 0.3em; }
  .vagaro-shell-bar .vagaro-shell-newtab { font-size: 9px; letter-spacing: 0.25em; }

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

@media (max-width: 640px) {
  body .brand-curly .brand-monogram { width: 38px; height: 38px; font-size: 13px; }
  .about-intro-v6 { padding: 70px 0 50px; }
  .about-principles-v6 { padding: 70px 0; }
  .about-stats-v6 { padding: 60px 0; }
  .about-studio-v6 { padding: 70px 0; }
  .about-quote-v6 { padding: 60px 0; }
  .vagaro-section { padding: 60px 0 80px; }
  .vagaro-section .container::before { font-size: 9px; letter-spacing: 0.35em; margin-bottom: 18px; }
  .vagaro-shell-bar { flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; }
  .vagaro-shell .vagaro-frame iframe,
  .vagaro-frame iframe { min-height: 600px !important; }
  .vagaro-shell .vagaro-frame,
  .vagaro-frame { min-height: 620px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .footer .social-row { justify-content: center; }
  .footer-bot { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 380px) {
  .vagaro-shell .vagaro-frame iframe,
  .vagaro-frame iframe { min-height: 520px !important; }
}


/* ---------- 41.7-fix CONTACT HOURS — force transparent bg on the card ---------- */

/* The legacy v3 `.visit-card-hours` div has `background: var(--c-ink)` and
   `color: var(--c-cream)` — that conflicts with our v6 day/time colors and
   hides every label except today's (which gets terracotta override). 
   Reset to a clean light surface that matches the rest of the visit card. */
.visit-card-info .visit-card-hours,
.visit-card .visit-card-hours {
  background: transparent !important;
  color: var(--c-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}
.visit-card-info .visit-card-hours h3,
.visit-card .visit-card-hours h3 {
  color: var(--c-ink) !important;
}
/* The legacy h5 .visit-section-label inside the card — make sure it's visible */
.visit-card-info .visit-section-label,
.visit-card .visit-section-label {
  color: var(--c-burgundy) !important;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}


/* =====================================================================
   42. v6.2 "BALANCE PASS"
     a) About-intro grid — left column now stacks photo + stat-mark card
        so the visual weight matches the longer right-side story column
     b) Hero image — extra CSS-level rendering crispness
     c) Footer — switched to soft warm-taupe + lavender-tinted gradient
        (away from bordeaux); peach + cream typography
   ===================================================================== */


/* ---------- 42.1 ABOUT INTRO — balanced two-column layout ---------- */

/* Override the v6.1 grid — now both columns carry weight */
.about-intro-v6 {
  padding: 110px 0 100px;
}
.about-intro-v6__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 70px;
  align-items: stretch;            /* both columns stretch to same height */
  max-width: 1180px;
  margin: 0 auto;
}

/* LEFT column wrapper: photo + decorative stat card stacked */
.about-intro-v6__left {
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100%;
}

.about-intro-v6__photo {
  position: relative;
  flex: 1 1 auto;                  /* photo grows to fill remaining space */
  min-height: 0;
}
.about-intro-v6__photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--curly-cream-2);
}
.about-intro-v6__photo-frame::before {
  content: "";
  position: absolute;
  inset: -18px -18px auto auto;
  width: 70%;
  height: 70%;
  border: 1px solid var(--c-burgundy);
  z-index: -1;
  pointer-events: none;
}
.about-intro-v6__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;     /* favour upper portion (face) */
  display: block;
  filter: contrast(1.02) saturate(1.05);
  transition: transform 8s ease;
}
.about-intro-v6__photo-frame:hover img { transform: scale(1.04); }

.about-intro-v6__photo-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  padding: 8px 16px;
  background: rgba(38, 22, 12, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--curly-rose);
  border-radius: 999px;
  z-index: 2;
}

/* Stat-mark decorative card under the photo */
.about-intro-v6__mark-card {
  flex: 0 0 auto;
  background:
    linear-gradient(135deg, rgba(212, 134, 98, 0.06) 0%, rgba(131, 129, 166, 0.04) 100%),
    var(--curly-white);
  border: 1px solid var(--curly-line);
  border-radius: 4px;
  padding: 26px 28px 24px;
  position: relative;
  overflow: hidden;
}
.about-intro-v6__mark-card::before {
  /* gradient hairline left edge */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 50%,
    var(--c-lavender) 100%);
}
.mark-card__eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin-bottom: 18px;
}
.mark-card__stats {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px dashed var(--curly-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mark-card__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mark-card__num {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: 0.005em;
}
.mark-card__lbl {
  font-family: var(--f-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.4;
}
.mark-card__note {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
}

/* RIGHT column: text */
.about-intro-v6__text {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}
.about-intro-v6__body {
  flex: 1 1 auto;
}
.about-intro-v6__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  align-self: flex-start;
  padding: 14px 28px;
  background: var(--c-burgundy);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid var(--c-burgundy);
  text-decoration: none;
  transition: all 0.4s var(--e-out);
}
.about-intro-v6__cta:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
  gap: 18px;
}
.about-intro-v6__cta svg { width: 16px; height: 16px; }

/* Mobile collapse */
@media (max-width: 880px) {
  .about-intro-v6__grid { grid-template-columns: 1fr; gap: 36px; }
  .about-intro-v6__left { max-width: 520px; margin: 0 auto; }
  .about-intro-v6__photo-frame { min-height: 420px; }
  .mark-card__stats { gap: 12px; }
  .mark-card__num { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .mark-card__stats { grid-template-columns: 1fr; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; }
  .mark-card__stats li { flex-direction: row; align-items: baseline; gap: 14px; }
  .mark-card__num { font-size: 1.3rem; min-width: 60px; }
}


/* ---------- 42.2 HERO IMAGE — additional CSS-level crispness ---------- */

/* The hero portrait is now baked with vignette + sharpening — let the
   panel render at native resolution with crisp edges, no extra blur layer. */
.curly-half--image .curly-half-bg {
  background-position: center 18%;  /* reveal more of the face/upper body */
  image-rendering: -webkit-optimize-contrast;
}
/* Remove the v6.1 vignette overlay — now baked into the image itself */
.curly-half--image::after { display: none; }


/* ---------- 42.3 FOOTER — soft warm-taupe + lavender gradient ---------- */

.footer {
  /* Warm taupe → muted lavender — a cool, sophisticated counterpoint to the
     warm Desert Rose body. Less heavy than the bordeaux of v6.1, more
     distinctive than the espresso of v6.0. */
  background:
    radial-gradient(ellipse at top right, rgba(212, 134, 98, 0.08) 0%, transparent 55%),
    linear-gradient(165deg,
      #4a4159 0%,        /* deep lavender-taupe */
      #3d3548 45%,       /* mid lavender-plum */
      #2d2638 100%);     /* deepest plum */
  color: #d4c9bf;
  padding: 100px 0 50px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  /* terracotta-peach-lavender gradient hairline at the top */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 50%,
    var(--c-lavender-soft) 100%);
}
.footer::after {
  /* faint diagonal wash for visual depth */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(131, 129, 166, 0.06) 0%, transparent 40%);
  pointer-events: none;
}

.footer h5 {
  color: var(--c-blush-deep);
  letter-spacing: 0.32em;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer p,
.footer ul li,
.footer ul {
  color: #cdc1b6;
  font-family: var(--f-body);
  font-size: 0.98rem;
  line-height: 1.7;
}
.footer a {
  color: #f3e3d8;
  transition: color 0.3s ease;
}
.footer a:hover { color: var(--c-blush-deep); }

.footer-mark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: #f3e3d8;
  margin: 0 0 50px;
  text-align: center;
  letter-spacing: 0.005em;
}
.footer-mark .script {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--c-blush-deep);
  font-weight: 500;
}

/* Social icons — keep the fix from v6.1, recolor borders */
.footer .social-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.footer .social-row a {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 134, 98, 0.42);
  border-radius: 50%;
  color: #f3e3d8;
  background: transparent;
  transition: all 0.35s var(--e-out);
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}
.footer .social-row a:hover {
  background: var(--c-blush-deep);
  border-color: var(--c-blush-deep);
  color: #2d2638;
  transform: translateY(-2px);
}
.footer .social-row svg { width: 16px; height: 16px; display: block; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
}

.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  margin-top: 0;
  border-top: 1px solid rgba(212, 134, 98, 0.20);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 227, 216, 0.55);
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .footer .social-row { justify-content: center; }
  .footer-bot { flex-direction: column; align-items: center; text-align: center; }
}


/* =====================================================================
   42. v6.2 "DESERT ROSE — STYLE & RESPONSIVE PASS"
   Layered on top of v6.0 + v6.1.
     a) Hero image — peach-toned overlay treatment for editorial polish
     b) About page — image column stretches with text content
     c) Footer — light cream/peach (replaces dark bordeaux)
     d) Vagaro shell — full override of every Vagaro-injected element
     e) Comprehensive responsive — phone-first overhaul
   ===================================================================== */


/* ---------- 42.1 HERO IMAGE — editorial overlay treatment ---------- */

/* Override v6.1 vignette with a refined peach-tinted treatment so the
   hero photo looks editorial rather than just upscaled. */
.curly-half--image .curly-half-bg {
  background-position: center top !important;
  background-size: cover !important;
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.06) saturate(1.05);
  transform: scale(1.005);  /* tiny bleed so edges are crisp */
  transition: transform 8s ease-out;
}
.curly-half--image:hover .curly-half-bg { transform: scale(1.04); }

/* Replace v6.1 dark vignette with a subtle warm-rose corner glow */
.curly-half--image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at top right,  rgba(212, 134, 98, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(38, 22, 12, 0.16) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Inset hairline frame on the hero photo — adds depth, premium feel */
.curly-half--image[data-idx="0"]::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(250, 243, 238, 0.18);
  pointer-events: none;
  z-index: 2;
}


/* ---------- 42.2 ABOUT PAGE — image stretches with text ---------- */

/* Stretch alignment so the photo column fills the row height. The frame
   uses position:sticky so the image follows the user as they read the
   right-column story. This eliminates the empty-left / long-right look. */
.about-intro-v6__grid {
  grid-template-columns: 0.85fr 1.15fr !important;
  align-items: stretch !important;
  gap: 70px !important;
}
.about-intro-v6__photo {
  position: relative;
  display: flex;
  align-items: stretch;
}
.about-intro-v6__photo-frame {
  aspect-ratio: auto !important;
  width: 100%;
  min-height: 100%;
  position: sticky !important;
  top: 100px;
  align-self: start;
  height: fit-content;
  max-height: calc(100vh - 120px);
  display: block;
}
.about-intro-v6__photo-frame img {
  width: 100%;
  height: 100%;
  min-height: 580px;
  max-height: calc(100vh - 120px);
  object-fit: cover;
  object-position: center 25%;
  filter: contrast(1.05) saturate(1.06);
}

/* Add decorative offset accent panel behind the photo (left-bottom) */
.about-intro-v6__photo::after {
  content: "";
  position: absolute;
  inset: auto -22px -22px auto;
  width: 70%;
  height: 70%;
  background: linear-gradient(135deg, rgba(212, 134, 98, 0.18) 0%, rgba(131, 129, 166, 0.12) 100%);
  z-index: -1;
  pointer-events: none;
  border-radius: 4px;
}


/* ---------- 42.3 FOOTER — LIGHT cream/peach with terracotta accents ---------- */

/* Override v6.1 dark bordeaux footer with a refined LIGHT footer.
   Soft peach-cream background, dark espresso text, terracotta hairline
   accents — matches the editorial salon brand and gives the page a
   feminine, airy close. */
.footer {
  background:
    radial-gradient(ellipse at top left,  rgba(212, 134, 98, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(131, 129, 166, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #f7e6d8 0%, #f3dccc 100%) !important;
  color: var(--c-text) !important;
  padding: 100px 0 40px !important;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    var(--c-burgundy) 0%,
    var(--c-blush-deep) 50%,
    var(--c-lavender) 100%) !important;
}
/* Faint cursive watermark in the footer — premium touch */
.footer::after {
  content: "Mirror Mirror";
  position: absolute;
  right: -2vw;
  bottom: 30px;
  font-family: "Yellowtail", "Sail", cursive;
  font-size: clamp(8rem, 16vw, 18rem);
  line-height: 1;
  color: var(--c-burgundy);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.footer .container { position: relative; z-index: 1; }

.footer h5 {
  color: var(--c-burgundy) !important;
  letter-spacing: 0.32em !important;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.footer p,
.footer ul,
.footer ul li {
  color: var(--c-text) !important;
  font-family: var(--f-body);
  font-size: 0.96rem;
  line-height: 1.75;
}
.footer a {
  color: var(--c-ink) !important;
  text-decoration: none;
  transition: color 0.3s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.footer a:hover {
  color: var(--c-burgundy) !important;
  border-bottom-color: var(--c-burgundy);
}

/* Footer wordmark — mimics the header brand */
.footer-mark {
  font-family: var(--f-sans) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  color: var(--c-ink) !important;
  margin: 0 0 50px !important;
  text-align: center;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.footer-mark .script {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic !important;
  color: var(--c-burgundy) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  font-size: 1.1em;
}

/* Social row — circles with terracotta border on cream */
.footer .social-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 22px !important;
  flex-wrap: wrap;
}
.footer .social-row a {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid var(--c-burgundy) !important;
  border-radius: 50% !important;
  color: var(--c-burgundy) !important;
  background: transparent !important;
  transition: all 0.35s var(--e-out) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.footer .social-row a:hover {
  background: var(--c-burgundy) !important;
  border-color: var(--c-burgundy) !important;
  color: var(--c-cream) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -8px rgba(139, 50, 44, 0.4);
}
.footer .social-row svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 50px !important;
  margin-bottom: 50px !important;
}

.footer-bot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 28px !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(139, 50, 44, 0.18) !important;
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}


/* ---------- 42.4 VAGARO — full override of every injected element ---------- */

/* Vagaro injects a fixed-width 840px iframe with hard-coded height. We
   force it 100% wide, override every dark-grey button bg, and hide all
   their promotional links. */

/* Outer container Vagaro creates */
.vagaro-shell .vagaro-container,
.vagaro-shell .vagaro-container.vagaro-embedded-widget {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 2;
}

/* The iframe wrapper inside .vagaro-container */
.vagaro-shell .vagaro-iframe {
  background: var(--curly-pure-white) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* The iframe itself — kill the hard-coded width="840" */
.vagaro-shell .vagaro-iframe iframe,
.vagaro-shell iframe[src*="vagaro.com"],
.vagaro-shell iframe[data-uid^="Vagaro_"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: var(--curly-pure-white) !important;
  display: block !important;
  margin: 0 auto !important;
  /* Vagaro auto-resizes height — let it. min-height ensures a sensible
     fallback if the resize hasn't fired yet. */
  min-height: 720px !important;
}

/* Hide ALL Vagaro promotional/footer elements */
.vagaro-shell .vagaro-footer,
.vagaro-shell .vagaro-footer *,
.vagaro-shell .vagaro-noniframe,
.vagaro-shell .vagaro-mBooking,
.vagaro-shell .vagaro-download,
.vagaro-shell .vagaro-window-widget,
.vagaro-shell .loader-btn-html,
.vagaro-shell .loader-btn-htmltwo,
.vagaro-shell a[href*="vagaro.com/pro/"],
.vagaro-shell a[href*="vagaro.com/salon-software"],
.vagaro-shell a[href*="vagaro.com/pro/salon-software"],
.vagaro-shell a[href*="vagaro.com/pro/hair-removal-studio-software"],
.vagaro-promo-link {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override the dark #262626 inline styles on Vagaro's mobile booking buttons
   in case any of them slip through visibility:hidden */
.vagaro-shell .vagaro-mBooking,
.vagaro-shell .vagaro-mBooking a,
.vagaro-shell .loader-btn-html {
  background: var(--c-burgundy) !important;
  background-color: var(--c-burgundy) !important;
  color: var(--c-cream) !important;
  border-color: var(--c-burgundy) !important;
}

/* Make sure iframe sits above the loading state pseudo-elements */
.vagaro-shell .vagaro-frame iframe,
.vagaro-shell iframe { position: relative !important; z-index: 2 !important; }

/* Hide loading state once iframe is present (CSS-only — when Vagaro injects
   the iframe, the :has() selector catches it where supported. Falls back to
   the spinner showing through behind the iframe, which is benign.) */
@supports selector(:has(*)) {
  .vagaro-shell .vagaro-frame:has(iframe[src*="vagaro.com"])::before,
  .vagaro-shell .vagaro-frame:has(iframe[src*="vagaro.com"])::after,
  .vagaro-frame:has(iframe[src*="vagaro.com"])::before,
  .vagaro-frame:has(iframe[src*="vagaro.com"])::after {
    display: none !important;
  }
}

/* Add a sleek gradient ring around the iframe edge inside the shell */
.vagaro-shell .vagaro-frame {
  background: var(--curly-pure-white);
  position: relative;
  padding: 0;
}
.vagaro-shell .vagaro-frame::before {
  /* loading text is set in v6.1 — just refine font for legibility */
  font-weight: 700 !important;
  letter-spacing: 0.45em !important;
}




/* =====================================================================
   43. v6.3 "DESERT ROSE — POLISH PASS"
   Fixes layered on top of v6.0/v6.1/v6.2:
     a) Cursive watermarks (Studio/Menu/Master) — proper fit, no clipping
     b) Enhanced Visit slide design (more decorative)
     c) About page intro — balance left & right column heights
     d) BULLETPROOF responsive — uses CSS Grid placement, simpler cascade
   ===================================================================== */


/* ---------- 43.1 BACKGROUND CURSIVE WATERMARKS — fit within panel ---------- */

/* The "Studio", "Menu", "Master" watermarks were sized at 18vw and clipped
   on both sides. Right-size + position them so the whole word reads,
   while still feeling oversized and editorial. */
.curly-text-bg-script {
  font-size: clamp(5rem, 11vw, 11rem) !important;
  letter-spacing: -0.02em !important;
  /* Anchor to upper-left of panel so it bleeds gracefully off the right
     instead of clipping symmetrically. */
  top: 38% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 95% !important;
  text-align: center !important;
  overflow: visible !important;
}

/* Allow the text panel to show watermark fully */
.curly-half--text { overflow: hidden; }
.curly-half--text .curly-text-inner { overflow: visible; position: relative; z-index: 2; }

/* On the dark "Menu" panel, more visibility */
.curly-half--text.bg-dark .curly-text-bg-script {
  opacity: 0.32 !important;
}


/* ---------- 43.2 VISIT SLIDE — enhanced design ---------- */

.curly-visit-inner {
  max-width: 720px !important;
  width: 100% !important;
  position: relative;
  z-index: 2;
}

.curly-visit-cursive {
  display: block;
  font-family: "Yellowtail", "Sail", "Sacramento", cursive;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--c-blush-deep);
  line-height: 0.9;
  margin: 6px 0 12px -2px;
  position: relative;
  z-index: 2;
}

.curly-visit-sub {
  max-width: 540px;
  margin: 0 0 36px;
  color: var(--curly-text-dark-bg) !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Featured address card */
.curly-visit-address {
  position: relative;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(212, 134, 98, 0.10) 0%, rgba(131, 129, 166, 0.08) 100%);
  border: 1px solid rgba(212, 134, 98, 0.28);
  border-radius: 6px;
  margin-bottom: 32px;
}
.curly-visit-address::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-burgundy) 0%, var(--c-blush-deep) 100%);
  border-radius: 0 0 4px 0;
}
.curly-visit-address__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-blush-deep);
  margin-bottom: 10px;
}
.curly-visit-address__lines {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--curly-cream) !important;
  margin: 0 0 14px;
  font-style: italic;
}
.curly-visit-address__map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-blush-deep) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--c-blush-deep);
  padding-bottom: 2px;
  transition: color 0.3s ease, gap 0.3s ease, border-color 0.3s ease;
}
.curly-visit-address__map:hover {
  color: var(--c-cream) !important;
  border-bottom-color: var(--c-cream);
  gap: 12px;
}

/* Quick info grid */
.curly-loc-grid--enhanced {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px !important;
  margin-bottom: 32px !important;
}
.curly-loc-grid--enhanced .curly-loc-card {
  position: relative;
  padding: 18px 18px 16px 22px;
  background: rgba(250, 243, 238, 0.04);
  border: 1px solid rgba(212, 134, 98, 0.18);
  border-radius: 5px;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.curly-loc-grid--enhanced .curly-loc-card:hover {
  background: rgba(212, 134, 98, 0.10);
  border-color: rgba(212, 134, 98, 0.42);
  transform: translateY(-2px);
}
.curly-loc-card__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212, 134, 98, 0.18);
  color: var(--c-blush-deep);
  margin-bottom: 10px;
}
.curly-loc-grid--enhanced .curly-loc-card h5 {
  font-family: var(--f-sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--c-blush-deep) !important;
  margin: 0 0 6px !important;
}
.curly-loc-grid--enhanced .curly-loc-card p {
  font-family: var(--f-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--curly-cream) !important;
  margin: 0 !important;
}
.curly-loc-grid--enhanced .curly-loc-card p em {
  color: var(--curly-text-dark-bg) !important;
  font-size: 0.85rem;
}
.curly-loc-grid--enhanced .curly-loc-card a {
  color: var(--c-blush-deep) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}
.curly-loc-grid--enhanced .curly-loc-card a:hover {
  color: var(--c-cream) !important;
  border-bottom-color: var(--c-cream) !important;
}

/* CTA row */
.curly-visit-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.curly-visit-cta-row .curly-cta-btn {
  margin: 0 !important;
}
.curly-visit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-blush-deep) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
.curly-visit-link:hover {
  color: var(--c-cream) !important;
  border-bottom-color: var(--c-cream);
  gap: 10px;
}


/* ---------- 43.3 ABOUT PAGE — BALANCE the two columns ---------- */

/* The left aside has photo + mark-card stacked. Don't make the photo
   sticky any more — just let the natural stack of [photo, mark-card]
   create vertical balance with the right-column story. */
.about-intro-v6__grid {
  grid-template-columns: 0.85fr 1.15fr !important;
  align-items: start !important;
  gap: 60px !important;
}

.about-intro-v6__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: stretch;
}

.about-intro-v6__photo {
  position: relative;
  display: block;
  margin: 0;
}
.about-intro-v6__photo::after { display: none !important; }

.about-intro-v6__photo-frame {
  position: static !important;
  display: block;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
  border-radius: 4px;
  background: var(--curly-cream-2);
}
.about-intro-v6__photo-frame img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  filter: contrast(1.04) saturate(1.06);
  transition: transform 8s ease;
}
.about-intro-v6__photo-frame:hover img { transform: scale(1.04); }

/* Decorative offset accent panel BEHIND the photo */
.about-intro-v6__photo {
  position: relative;
  z-index: 1;
}
.about-intro-v6__photo::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: linear-gradient(135deg, rgba(212, 134, 98, 0.20) 0%, rgba(131, 129, 166, 0.12) 100%);
  border-radius: 4px;
  z-index: -1;
  pointer-events: none;
}

/* Make sure mark-card below the photo looks balanced */
.about-intro-v6__mark-card {
  margin-top: 0 !important;
  flex: 1;  /* let the card grow if needed to match right column */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* ---------- 43.4 BULLETPROOF RESPONSIVE — CSS GRID approach ---------- */

/* Helper: prevent any horizontal overflow from leaking */
html, body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 880px) {

  /* === HOMEPAGE SLIDER — RELIABLE GRID-BASED REORDER === */
  /* Use CSS Grid placement instead of flex order. Grid placement is
     supported everywhere display:contents is supported, but is more
     reliable because items are placed by explicit grid-row regardless
     of source order. */
  body.home-curly .curly-slider {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }
  body.home-curly .curly-track,
  body.home-curly .curly-track--left,
  body.home-curly .curly-track--right,
  body.home-curly .curly-track-inner {
    display: contents !important;
  }
  body.home-curly .curly-half {
    position: relative !important;
    width: 100% !important;
    grid-column: 1 !important;
    height: auto !important;
    min-height: 60vh !important;
    flex: 0 0 auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* Pair text+image in source order:
       1L (hero text) → 1R (hero img) → 2R (welcome) → 2L (studio img)
     → 3R (menu)     → 3L (master img) → 4L (book)   → 4R (tools img)
     → 5R (visit)    → 5L (kirkwood img)  */
  body.home-curly .curly-track--left  .curly-half[data-idx="0"] { grid-row: 1 !important; }
  body.home-curly .curly-track--right .curly-half[data-idx="0"] { grid-row: 2 !important; }
  body.home-curly .curly-track--right .curly-half[data-idx="1"] { grid-row: 3 !important; }
  body.home-curly .curly-track--left  .curly-half[data-idx="1"] { grid-row: 4 !important; }
  body.home-curly .curly-track--right .curly-half[data-idx="2"] { grid-row: 5 !important; }
  body.home-curly .curly-track--left  .curly-half[data-idx="2"] { grid-row: 6 !important; }
  body.home-curly .curly-track--left  .curly-half[data-idx="3"] { grid-row: 7 !important; }
  body.home-curly .curly-track--right .curly-half[data-idx="3"] { grid-row: 8 !important; }
  body.home-curly .curly-track--right .curly-half[data-idx="4"] { grid-row: 9 !important; }
  body.home-curly .curly-track--left  .curly-half[data-idx="4"] { grid-row: 10 !important; }

  /* Image halves get a sensible height */
  body.home-curly .curly-half--image {
    min-height: 65vh !important;
    height: 65vh !important;
  }
  body.home-curly .curly-half--text {
    padding: 60px 22px !important;
    min-height: auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide slider chrome on mobile */
  body.home-curly .curly-dots,
  body.home-curly .curly-arrows,
  body.home-curly .curly-progress { display: none !important; }

  /* Text inner */
  body.home-curly .curly-text-inner,
  body.home-curly .curly-text-inner--hero,
  body.home-curly .curly-text-inner--left,
  body.home-curly .curly-text-inner--wide {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.home-curly .curly-hero-script {
    font-size: clamp(2.6rem, 13vw, 4rem) !important;
    line-height: 1 !important;
  }
  body.home-curly .curly-slide-heading {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
    line-height: 1.18 !important;
  }
  body.home-curly .curly-text-bg-script {
    font-size: clamp(4.5rem, 22vw, 8rem) !important;
    top: 50% !important;
  }

  /* === HEADER === */
  body .site-header { padding: 14px 0 !important; }
  body .site-header .container.nav { padding-left: 18px !important; padding-right: 18px !important; }
  body .brand-curly {
    padding: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body .brand-curly:hover {
    background: transparent !important;
    box-shadow: none !important;
  }
  body.home-curly .brand-curly,
  body.curly-on-dark .brand-curly {
    background: transparent !important;
    backdrop-filter: none !important;
  }
  body .brand-curly .brand-wordmark { display: none !important; }
  body .brand-curly .brand-monogram {
    width: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
    background: rgba(250, 243, 238, 0.94) !important;
    color: var(--c-burgundy) !important;
    border-color: var(--c-burgundy) !important;
  }
  body.curly-on-dark .brand-curly .brand-monogram,
  body.home-curly.curly-on-dark .brand-curly .brand-monogram {
    background: rgba(38, 22, 12, 0.55) !important;
    color: var(--curly-rose) !important;
    border-color: var(--curly-rose) !important;
  }

  body .burger {
    width: 44px !important;
    height: 44px !important;
    background: rgba(250, 243, 238, 0.94) !important;
  }
  body.curly-burger-on-dark .burger {
    background: rgba(38, 22, 12, 0.55) !important;
  }

  /* === VISIT SLIDE — single column on mobile === */
  .curly-loc-grid--enhanced { grid-template-columns: 1fr !important; gap: 14px !important; }
  .curly-visit-cursive { font-size: clamp(2.4rem, 10vw, 3.6rem) !important; }
  .curly-visit-address__lines { font-size: 1.15rem !important; }
  .curly-visit-cta-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

  /* === ABOUT === */
  .about-intro-v6 { padding: 60px 0 50px !important; }
  .about-intro-v6__grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .about-intro-v6__left {
    max-width: 520px !important;
    margin: 0 auto !important;
    width: 100% !important;
    gap: 22px !important;
  }
  .about-intro-v6__photo::before { display: none !important; }
  .about-intro-v6__photo-frame { aspect-ratio: 4/5 !important; }
  .about-intro-v6__heading { font-size: clamp(1.5rem, 6vw, 2.1rem) !important; }
  .about-intro-v6__body p { font-size: 1rem !important; line-height: 1.72 !important; }
  .about-intro-v6__body p:first-child::first-letter { font-size: 3.4em !important; margin: 4px 8px 0 0 !important; }

  .about-quote-v6 { padding: 50px 0 !important; }
  .about-quote-v6 blockquote { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }

  .about-principles-v6 { padding: 50px 0 !important; }
  .about-principles-v6__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 36px !important;
  }

  .about-stats-v6 { padding: 44px 0 !important; }
  .about-stats-v6__grid { grid-template-columns: 1fr !important; gap: 22px !important; }

  .about-studio-v6 { padding: 50px 0 !important; }
  .about-studio-v6__grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .about-studio-v6__image img { max-height: 360px; aspect-ratio: 4/3; }

  /* === SERVICES === */
  .services-grid,
  .services-grid--3 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .service-card { padding: 26px 22px 22px !important; }
  .service-card-title { font-size: 1.1rem !important; }
  .service-card-desc { font-size: 0.94rem !important; }

  /* === PRICING === */
  .pricing-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pricing-card { padding: 28px 22px !important; }
  .pricing-card-title { font-size: 1.3rem !important; }

  /* === GALLERY === */
  .full-gallery,
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .filter-chips { gap: 6px !important; flex-wrap: wrap !important; }
  .filter-chip { font-size: 9.5px !important; padding: 7px 12px !important; letter-spacing: 0.18em !important; }

  /* === CONTACT === */
  .visit-card-section { padding: 36px 0 50px !important; }
  .visit-card { grid-template-columns: 1fr !important; }
  .visit-card-photo { min-height: 260px !important; aspect-ratio: 4/3; }
  .visit-card-info { padding: 32px 22px !important; }
  .visit-card-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .visit-card-info .visit-hours-list li { font-size: 13px !important; padding: 8px 0 !important; }
  .visit-card-info .visit-hours-list li .day { font-size: 10px !important; letter-spacing: 0.18em !important; }
  .visit-card-info .visit-hours-list li .time { font-size: 12px !important; }

  /* === BOOKING / VAGARO === */
  .vagaro-section { padding: 40px 0 60px !important; }
  .vagaro-section .container::before { font-size: 9px !important; letter-spacing: 0.3em !important; margin-bottom: 16px !important; }
  .vagaro-shell { border-radius: 6px !important; }
  .vagaro-shell-bar {
    flex-direction: row !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .vagaro-shell-bar .vagaro-shell-eyebrow { font-size: 9px !important; letter-spacing: 0.25em !important; gap: 8px !important; }
  .vagaro-shell-bar .vagaro-shell-eyebrow::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(212,134,98,0.22); }
  .vagaro-shell-bar .vagaro-shell-newtab { font-size: 9px !important; letter-spacing: 0.2em !important; }
  .vagaro-shell .vagaro-iframe iframe,
  .vagaro-shell iframe[src*="vagaro.com"] {
    min-height: 1200px !important;
    width: 100% !important;
  }
  .vagaro-shell-fallback { font-size: 0.85rem !important; padding: 16px 14px !important; }

  /* === PAGE BANNERS === */
  .page-banner { padding: 70px 0 44px !important; }
  .page-banner h1 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
  .page-banner p { font-size: 0.94rem !important; }

  /* === SECTIONS === */
  .section { padding: 50px 0 !important; }
  .section-title { font-size: clamp(1.7rem, 6vw, 2.3rem) !important; }

  /* === FINAL CTA === */
  .cta-final { padding: 56px 0 !important; }
  .cta-final h2 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .cta-final p { font-size: 0.95rem !important; }

  /* === FOOTER === */
  .footer { padding: 60px 0 26px !important; }
  .footer::after { font-size: clamp(5rem, 16vw, 9rem) !important; bottom: 18px; }
  .footer-mark { margin: 0 0 32px !important; font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-bottom: 32px !important;
  }
  .footer .social-row { justify-content: flex-start !important; }
  .footer-bot {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* === PHONE (≤ 640px) === */
@media (max-width: 640px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  body .brand-curly .brand-monogram { width: 40px !important; height: 40px !important; font-size: 13px !important; }
  body .burger { width: 40px !important; height: 40px !important; }

  body.home-curly .curly-half--image { min-height: 55vh !important; height: 55vh !important; }
  body.home-curly .curly-half--text { padding: 50px 18px !important; }

  .footer-grid { grid-template-columns: 1fr !important; gap: 26px !important; text-align: center !important; }
  .footer .social-row { justify-content: center !important; }
  .footer-bot { align-items: center !important; text-align: center !important; }
  .footer-mark { font-size: clamp(1.2rem, 7vw, 1.7rem) !important; }

  .vagaro-shell .vagaro-iframe iframe,
  .vagaro-shell iframe[src*="vagaro.com"] { min-height: 1500px !important; }

  .about-intro-v6__photo-frame { max-width: 100% !important; }
  .about-intro-v6__heading { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }
  .about-stat__num { font-size: clamp(2.3rem, 9vw, 3.3rem) !important; }

  .page-banner { padding: 56px 0 38px !important; }
  .page-banner h1 { font-size: clamp(1.6rem, 8.5vw, 2.2rem) !important; }
}

/* === SMALL PHONE (≤ 380px) === */
@media (max-width: 380px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  body .brand-curly .brand-monogram { width: 38px !important; height: 38px !important; font-size: 12px !important; }
  body.home-curly .curly-half--text { padding: 40px 14px !important; }
  body.home-curly .curly-half--image { min-height: 48vh !important; height: 48vh !important; }
  .vagaro-shell .vagaro-iframe iframe,
  .vagaro-shell iframe[src*="vagaro.com"] { min-height: 1700px !important; }
  .footer { padding: 48px 0 22px !important; }
  .footer-mark { font-size: 1.1rem !important; margin-bottom: 26px !important; }
}


/* ---------- 43.5 GLOBAL OVERFLOW SAFETY ---------- */
img, iframe, video { max-width: 100%; height: auto; }
.container { max-width: 100%; }


/* =====================================================================
   44. v6.4 "DESERT ROSE — STRUCTURE FIX PASS"
     a) Master image (slide 3) — proper face-prominent positioning
     b) About-page intro photo — face-prominent crop
     c) About page body — full-width section for editor content
     d) Visit slide — simplified clean design (phone/email/contact link)
   ===================================================================== */


/* ---------- 44.1 IMAGE POSITIONING — show the face, not just the top ---------- */

/* Override v6.2's `background-position: center top` with a face-focused
   anchor. For tall portraits (Jean), `center 18%` keeps her face in the
   visible window without cropping the top of the head. */
.curly-half--image .curly-half-bg {
  background-position: center 18% !important;
  background-size: cover !important;
}

/* About-page intro photo — anchor higher so the face shows */
.about-intro-v6__photo-frame img {
  object-position: center 8% !important;
}


/* ---------- 44.2 ABOUT PAGE — restructured intro + new body section ---------- */

/* Compact intro grid — no longer needs to stretch since editor content
   moved to its own section below. Desktop only — mobile cascade collapses
   it to 1fr in section 43.4. */
.about-intro-v6 {
  padding: 90px 0 70px !important;
}
@media (min-width: 881px) {
  .about-intro-v6__grid {
    grid-template-columns: 0.9fr 1.1fr !important;
    align-items: start !important;
    gap: 60px !important;
  }
  .about-intro-v6__left {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}
.about-intro-v6__photo {
  position: relative;
  z-index: 1;
}
.about-intro-v6__photo::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: linear-gradient(135deg, rgba(212, 134, 98, 0.18) 0%, rgba(131, 129, 166, 0.12) 100%);
  border-radius: 4px;
  z-index: -1;
  pointer-events: none;
}

.about-intro-v6__photo-frame {
  aspect-ratio: 4 / 5 !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
  border-radius: 4px;
  background: var(--curly-cream-2);
}

/* Lead body styling — only 2 paragraphs in the side-by-side */
.about-intro-v6__body--lead p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--c-text);
  margin: 0 0 1em;
}
.about-intro-v6__body--lead p:first-child::first-letter {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 6px 12px 0 0;
  color: var(--c-burgundy);
}

/* "Book with Jean" CTA inside intro */
.about-intro-v6__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 26px;
  background: var(--c-burgundy);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: all 0.35s var(--e-out);
}
.about-intro-v6__cta:hover {
  background: var(--c-ink);
  color: var(--c-cream);
  gap: 14px;
}
.about-intro-v6__cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ---------- 44.3 ABOUT PAGE BODY — full-width editor content ---------- */

/* This section receives the WordPress page body content (Jean's
   Credentials, Baylage Clients, Cancellation Policy, Parking, etc.).
   Styled as a centered magazine column with proper typography for
   editor-injected H2/H3/p/img/blockquote elements. */
.about-body-v6 {
  padding: 50px 0 90px;
  background: var(--curly-cream);
  position: relative;
}
.about-body-v6::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--c-burgundy);
  margin: 0 auto 50px;
}
.about-body-v6__inner {
  max-width: 760px;
  margin: 0 auto;
}
.about-body-v6__inner h2 {
  font-family: "Cormorant Garamond", "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  color: var(--c-ink);
  margin: 56px 0 18px;
  letter-spacing: 0;
}
.about-body-v6__inner h2:first-child { margin-top: 0; }
.about-body-v6__inner h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--c-burgundy);
  margin-top: 14px;
}
.about-body-v6__inner h3 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 36px 0 14px;
}
.about-body-v6__inner h4 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-burgundy);
  margin: 28px 0 10px;
}
.about-body-v6__inner p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--c-text);
  margin: 0 0 1.2em;
}
.about-body-v6__inner ul,
.about-body-v6__inner ol {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--c-text);
  margin: 0 0 1.4em;
  padding-left: 24px;
}
.about-body-v6__inner ul li,
.about-body-v6__inner ol li {
  margin-bottom: 0.5em;
}
.about-body-v6__inner blockquote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--c-burgundy);
  margin: 30px 0;
  padding: 0 0 0 26px;
  border-left: 3px solid var(--c-burgundy);
}
.about-body-v6__inner a {
  color: var(--c-burgundy);
  border-bottom: 1px solid var(--c-burgundy);
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
  padding-bottom: 1px;
}
.about-body-v6__inner a:hover {
  color: var(--curly-brown);
  border-bottom-color: var(--curly-brown);
}
.about-body-v6__inner img,
.about-body-v6__inner .wp-block-image,
.about-body-v6__inner figure {
  max-width: 100% !important;
  height: auto !important;
  margin: 32px auto !important;
  display: block !important;
  border-radius: 4px;
  box-shadow: 0 30px 60px -40px rgba(38, 22, 12, 0.25);
}
.about-body-v6__inner figcaption {
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--c-muted);
  text-align: center;
  margin-top: 10px;
}
.about-body-v6__inner .wp-block-gallery,
.about-body-v6__inner .gallery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin: 30px 0 !important;
}
.about-body-v6__inner hr {
  border: 0;
  border-top: 1px solid var(--curly-line);
  margin: 50px auto;
  width: 60%;
}


/* ---------- 44.4 VISIT SLIDE — SIMPLE & CLEAN ---------- */

/* Override the v6.3 enhanced visit slide. Now: just phone, email, and
   a CTA that goes to the contact page. Cleaner and more elegant. */

/* Hide the v6.3 elaborate elements if they're still in the DOM */
.curly-visit-address,
.curly-loc-grid--enhanced,
.curly-visit-cta-row .curly-visit-link {
  display: none !important;
}

.curly-visit-inner {
  max-width: 560px !important;
  width: 100% !important;
  position: relative;
  z-index: 2;
}

.curly-visit-cursive {
  display: block;
  font-family: "Yellowtail", "Sail", "Sacramento", cursive;
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  color: var(--c-blush-deep);
  line-height: 0.9;
  margin: 6px 0 14px -2px;
}

.curly-visit-sub {
  margin: 0 0 36px !important;
  color: var(--curly-text-dark-bg) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  max-width: 460px;
}

.curly-visit-quick {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.curly-visit-quick li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(212, 134, 98, 0.22);
}
.curly-visit-quick li:last-child {
  border-bottom: 0;
}
.curly-visit-quick__label {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-blush-deep);
  flex: 0 0 80px;
}
.curly-visit-quick__value {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--curly-cream) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
  padding-bottom: 1px;
}
.curly-visit-quick__value:hover {
  color: var(--c-blush-deep) !important;
  border-bottom-color: var(--c-blush-deep) !important;
}


/* ---------- 44.5 RESPONSIVE — patches for new structure ---------- */

@media (max-width: 880px) {
  /* About intro — left aside no longer sticky on mobile */
  .about-intro-v6__left {
    position: static !important;
    top: auto !important;
  }
  .about-intro-v6__photo::before { display: none !important; }

  /* About body — narrower padding on mobile */
  .about-body-v6 { padding: 36px 0 60px !important; }
  .about-body-v6::before { margin-bottom: 32px; }
  .about-body-v6__inner h2 { margin: 36px 0 14px; }
  .about-body-v6__inner h3 { margin: 24px 0 10px; }
  .about-body-v6__inner p { font-size: 1rem; line-height: 1.78; }
  .about-body-v6__inner ul,
  .about-body-v6__inner ol { font-size: 1rem; }
  .about-body-v6__inner img { margin: 22px auto !important; }
  .about-body-v6__inner .wp-block-gallery,
  .about-body-v6__inner .gallery { grid-template-columns: 1fr !important; }

  /* Visit slide — quick contact on mobile */
  .curly-visit-quick li { gap: 14px; flex-wrap: wrap; }
  .curly-visit-quick__label { flex: 0 0 70px; font-size: 9.5px; letter-spacing: 0.32em; }
  .curly-visit-quick__value { font-size: 1.2rem; }
}

@media (max-width: 640px) {
  .about-body-v6__inner h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .curly-visit-quick li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .curly-visit-quick__label { flex: 0 0 auto; }
  .curly-visit-quick__value { font-size: 1.15rem; }
}