/* ===========================================================
   Radhika Arora Beauty & Makeup Studio — design system
   Palette: blush base, deep rose, aged gold, espresso-plum
=========================================================== */

:root{
  --blush:      #FBF1EE;
  --blush-deep: #F3DEE0;
  --rose:       #A63A5E;
  --rose-dark:  #7E2A47;
  --gold:       #C6963E;
  --gold-light: #E7C77E;
  --plum:       #2B1620;
  --plum-soft:  #47222F;
  --cream:      #FFFDFB;
  --ink:        #2B1620;
  --ink-soft:   #6B4C55;
  --line:       rgba(43,22,32,0.12);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1180px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--blush);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  margin:0 0 0.5em;
  color:var(--plum);
}
p{ margin:0 0 1em; max-width:62ch; }
.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.7rem;
  color:var(--rose);
  margin-bottom:0.4em;
  display:block;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.01em;
  border:1px solid transparent;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, background 0.25s ease, border-color .25s ease, color .25s ease;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.35);
  transform:translateX(-120%) skewX(-15deg);
  transition:transform 0.5s ease;
  z-index:-1;
}
.btn:hover::before{ transform:translateX(120%) skewX(-15deg); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }

.btn-primary{ background:var(--rose); color:var(--cream); box-shadow:0 6px 16px rgba(166,58,94,0.25); }
.btn-primary:hover{ background:var(--rose-dark); box-shadow:0 12px 26px rgba(166,58,94,0.38); }

.btn-gold{ background:var(--gold); color:var(--plum); box-shadow:0 6px 16px rgba(198,150,62,0.28); }
.btn-gold:hover{ background:var(--gold-light); box-shadow:0 12px 26px rgba(198,150,62,0.4); }

.btn-outline{ background:transparent; border-color:var(--plum); color:var(--plum); }
.btn-outline:hover{ background:var(--plum); color:var(--cream); box-shadow:0 12px 26px rgba(43,22,32,0.28); }

.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,0.6); color:var(--cream); }
.btn-outline-light:hover{ background:rgba(255,255,255,0.16); box-shadow:0 12px 26px rgba(0,0,0,0.2); }

.btn-wa{ background:#25D366; color:#0a3a17; box-shadow:0 6px 16px rgba(37,211,102,0.3); }
.btn-wa:hover{ background:#2fe376; box-shadow:0 12px 26px rgba(37,211,102,0.42); }

.btn-cream{ background:var(--cream); color:var(--plum); box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.btn-cream:hover{ background:var(--gold-light); box-shadow:0 12px 26px rgba(0,0,0,0.24); }

.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:10px 18px; font-size:0.82rem; }

/* ---------- top notice bar ---------- */
.notice-bar{
  background:var(--plum);
  color:var(--gold-light);
  text-align:center;
  font-size:0.82rem;
  letter-spacing:0.02em;
  padding:15px 16px;
}
.notice-bar a{ color:var(--cream); text-decoration:underline; text-underline-offset:2px; }

/* Home page only: notice bar in the same rose as the "Book Now" button */
/* Site-wide chrome: keep the same colors used on index.html */
.notice-bar{
  background:var(--rose);
  color:var(--gold-light);
}
.notice-bar a{ color:#FFFFFF; }

/* Keep header and footer colors identical on every page */
.site-header{ background:rgba(251,241,238,0.92); }
.site-footer{ background:var(--rose); }


/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,241,238,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:52px; border-radius:50%; object-fit:cover; }
.brand-text{ font-family:var(--serif); line-height:1.1; }
.brand-text .name{ font-size:1.15rem; font-weight:700; color:var(--plum); display:block; }
.brand-text .tag{ font-size:0.72rem; letter-spacing:0.08em; color:var(--rose); text-transform:uppercase; }

.nav-links{ display:flex; gap:32px; align-items:center; }
.nav-links a{
  font-size:0.92rem; font-weight:600; color:var(--ink-soft);
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ color:var(--rose); border-color:var(--rose); }
.header-cta{ display:flex; gap:10px; align-items:center; }
.header-cta .btn{ padding:10px 18px; font-size:0.85rem; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:72px 0 0 0; background:var(--cream);
    flex-direction:column; padding:32px 24px; gap:24px;
    transform:translateX(100%); transition:transform 0.25s ease;
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.1rem; }
  .header-cta .btn-outline{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- sticky mobile action bar ---------- */
.mobile-bar{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--plum);
  padding:10px 14px; gap:10px;
  box-shadow:0 -4px 18px rgba(0,0,0,0.2);
}
.mobile-bar a{
  flex:1; text-align:center; padding:12px 8px; border-radius:999px;
  font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.mobile-bar a:active{ transform:scale(0.96); }
.mobile-bar .c-wa{ background:#25D366; color:#0a3a17; }
.mobile-bar .c-call{ background:var(--gold); color:var(--plum); }
.mobile-bar .c-book{ background:var(--cream); color:var(--plum); }
@media (max-width: 720px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom:64px; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--blush) 0%, var(--blush-deep) 100%);
  overflow:hidden;
  padding:0;
  min-height:calc(100svh - 112px);
  display:grid;
}
.hero .container{
  display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; gap:32px;
  width:100%;
  padding-top:36px; padding-bottom:36px;
}
.hero-copy{ padding-bottom:0; }
.hero-copy h1{
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  margin-bottom:0.35em;
}
.hero-copy .lede{ font-size:1.08rem; color:var(--ink-soft); max-width:46ch; }
.hero-actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--serif); font-size:1.7rem; color:var(--rose); }
.hero-stats div span{ font-size:0.8rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }

.hero-media{ position:relative; align-self:center; width:100%; max-width:330px; margin-left:auto; margin-right:8px; }
.hero-media .frame{
  position:relative; aspect-ratio:3/4;
  border-radius:165px 165px 20px 20px;
  overflow:hidden;
  border:1px solid var(--line);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-media .badge{
  position:absolute; left:-26px; bottom:24px;
  background:var(--plum); color:var(--gold-light);
  padding:13px 18px; border-radius:var(--radius);
  font-family:var(--serif); font-size:0.9rem; text-align:center;
  box-shadow:0 12px 30px rgba(43,22,32,0.25);
  max-width:168px;
}
.hero-media .badge strong{ display:block; font-size:1.3rem; color:var(--cream); }
@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; padding-top:20px; padding-bottom:28px; }
  .hero-media{ order:-1; max-width:280px; margin:0 auto; }
  .hero-media .frame{ border-radius:150px 150px 20px 20px; }
  .hero-media .badge{ left:-12px; bottom:16px; }
  .hero-copy{ padding-bottom:0; padding-top:4px; }
}

/* ---------- section scaffolding ---------- */
section{ padding:56px 0; }
.section-head{ max-width:640px; margin-bottom:32px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-dark{ background:var(--plum); color:var(--blush); }
.section-dark h2, .section-dark h3{ color:var(--cream); }
.section-dark p{ color:rgba(251,241,238,0.75); }
.section-dark .eyebrow{ color:var(--gold-light); }
.section-tint{ background:var(--blush-deep); }
/* When two tinted sections sit back-to-back (same bg colour), their padding
   stacks into one big blank block. Collapse that seam so it reads as one
   section instead of empty space. */
.section-tint + .section-tint{ padding-top:0; }

@media (max-width: 720px){
  section{ padding:40px 0; }
  .seo-block{ padding-left:24px; padding-right:24px; }
  .faq-section + .seo-home-section{ padding-top:40px; }
}

/* ---------- services / pricing menu ---------- */
.menu-category{ margin-bottom:36px; }
.menu-category:last-child{ margin-bottom:0; }
.menu-category-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:8px;
}
.menu-category-head h3{ font-size:1.5rem; margin:0; }
.menu-category-head span{ font-size:0.82rem; color:var(--rose); text-transform:uppercase; letter-spacing:0.06em; }
.menu-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:12px 0; border-bottom:1px dashed var(--line);
}
.menu-item:last-child{ border-bottom:none; }
.menu-item-name{ font-weight:700; font-size:1.02rem; }
.menu-item-desc{ color:var(--ink-soft); font-size:0.88rem; margin-top:2px; max-width:52ch; }
.menu-item-price{ font-family:var(--serif); font-size:1.25rem; color:var(--rose); white-space:nowrap; font-weight:700; }
.menu-item-price small{ display:block; font-family:var(--sans); font-size:0.65rem; color:var(--ink-soft); font-weight:500; text-align:right; }

.pkg-card{
  background:var(--cream); border:1px solid var(--line); border-radius:16px;
  padding:0 0 28px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
.pkg-card .pkg-photo{
  aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(160deg,var(--blush-deep),var(--blush));
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.pkg-card .pkg-photo img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.pkg-card .pkg-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.pkg-card .pkg-body .btn{ margin-top:auto; }
.pkg-card.featured .pkg-body{ padding-top:14px; }
.pkg-card.featured{ border-color:var(--gold); box-shadow:0 18px 40px rgba(198,150,62,0.18); }
.pkg-card .tag{
  position:absolute; top:16px; right:16px; background:var(--gold); color:var(--plum);
  font-size:0.72rem; font-weight:700; padding:6px 14px; border-radius:20px; letter-spacing:0.03em;
  z-index:2; box-shadow:0 4px 12px rgba(0,0,0,0.25);
}
.pkg-card .price{ font-family:var(--serif); font-size:2.2rem; color:var(--rose); margin:8px 0 4px; }
.pkg-card ul{ margin:12px 0; }
.pkg-card li{ padding:6px 0; border-top:1px dashed var(--line); font-size:0.92rem; }
.pkg-card li:first-child{ border-top:none; }
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width: 900px){ .pkg-grid{ grid-template-columns:1fr; } }

/* ---------- why-us / feature list ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.feature{ }
.feature .num{ font-family:var(--serif); font-size:0.9rem; color:var(--gold); border:1px solid var(--gold); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-bottom:16px; }
.feature-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--blush); border:1px solid var(--gold);
  color:var(--rose); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feature-icon svg{ width:26px; height:26px; }
.feature h4{ font-size:1.08rem; margin-bottom:6px; }
.feature p{ font-size:0.9rem; color:var(--ink-soft); margin:0; }
@media (max-width: 900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns:1fr; } }

/* ---------- two column / about ---------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:36px; align-items:center; }
.split.reverse{ grid-template-columns:1.1fr 0.9fr; }
.split img{ border-radius:16px; width:100%; height:100%; object-fit:cover; max-height:520px; }
@media (max-width: 900px){
  .split, .split.reverse{ grid-template-columns:1fr; }
}

/* ---------- testimonials ---------- */
.testi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi{
  background:var(--cream); border:1px solid var(--line); padding:20px; border-radius:var(--radius);
}
.testi .stars{ color:var(--gold); letter-spacing:2px; margin-bottom:14px; font-size:0.95rem; }
.testi p{ font-family:var(--serif); font-size:1.12rem; font-style:italic; color:var(--plum); margin-bottom:16px; }
.testi .who{ font-size:0.85rem; color:var(--ink-soft); font-weight:600; }
@media (max-width: 900px){ .testi-row{ grid-template-columns:1fr; } }

/* ---------- gallery / masonry ---------- */
.masonry{ column-count:3; column-gap:20px; }
.masonry figure{ margin:0 0 20px; break-inside:avoid; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.masonry img{ width:100%; }
@media (max-width: 900px){ .masonry{ column-count:2; } }
@media (max-width: 560px){ .masonry{ column-count:1; } }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--rose);
  background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,0.14), transparent 45%);
  color:var(--cream); text-align:center; padding:48px 24px; border-radius:0;
}
.cta-banner h2{ color:var(--cream); }
.cta-banner p{ color:rgba(255,255,255,0.85); margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* ---------- FAQ ---------- */
.faq-sub{ margin-left:auto; margin-right:auto; color:var(--ink-soft); }
.faq-filters{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px;
}
.faq-filter{
  font-family:var(--sans); font-size:0.82rem; font-weight:700; cursor:pointer;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--cream); color:var(--ink-soft);
}
.faq-filter:hover{ border-color:var(--rose); color:var(--rose); }
.faq-filter.active{ background:var(--rose); border-color:var(--rose); color:var(--cream); }

.faq-list{ border-top:1px solid var(--line); }
.faq-row{ border-bottom:1px solid var(--line); }
.faq-row.is-filtered{ display:none; }
.faq-q{
  width:100%; display:flex; align-items:center; gap:14px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:16px 4px; color:var(--plum);
}
.faq-q-text{ flex:1; font-family:var(--serif); font-size:1.08rem; }
.faq-q-toggle{ font-size:1.3rem; color:var(--rose); flex-shrink:0; line-height:1; }
.faq-row.is-open .faq-q-toggle{ content:"–"; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
.faq-row.is-open .faq-a{ max-height:600px; }
.faq-a-inner{ padding:0 4px 18px; }
.faq-a-inner p{ color:var(--ink-soft); margin-bottom:10px; }
.faq-a-meta{ font-size:0.76rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.faq-cta{ margin-top:28px; color:var(--ink-soft); }
.faq-cta a{ color:var(--rose); font-weight:700; }
/* ---------- locations ---------- */
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.loc-card{ background:var(--cream); border:1px solid var(--line); padding:20px; border-radius:var(--radius); }
.loc-card h4{ font-size:1.2rem; margin-bottom:6px; }
.loc-card .addr{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:14px; }
.loc-card iframe{ width:100%; height:200px; border:0; border-radius:8px; margin-bottom:14px; }
@media (max-width: 720px){ .loc-grid{ grid-template-columns:1fr; } }

/* ---------- form ---------- */
.form-wrap{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.85rem; font-weight:700; margin-bottom:6px; color:var(--plum); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:6px;
  font-family:var(--sans); font-size:0.95rem; background:var(--blush); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--rose); background:var(--cream); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 600px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:0.8rem; color:var(--ink-soft); margin-top:14px; }
.form-status{ margin-top:16px; font-size:0.9rem; font-weight:600; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:#2f7a3d; }
.form-status.err{ color:#b23b3b; }

/* ---------- footer ----------
   NOTE: the full footer styling (background colour included) lives in the
   single "redesigned four-column footer" block further down this file, so
   every page (which all load this same style.css) renders an identical
   header and footer to index.html. The old block that used to be here
   defined a different --plum background and was overriding the shared
   rules on some cached page loads — it has been removed so there is only
   ever one source of truth for header/footer colour. */
.footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.footer-brand img{ height:46px; width:46px; border-radius:50%; }
.footer-brand span{ font-family:var(--serif); font-size:1.1rem; color:var(--cream); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; font-size:0.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ background:var(--blush-deep); padding:32px 0 28px; text-align:center; }
.page-hero .eyebrow{ justify-content:center; }
.breadcrumb{ font-size:0.82rem; color:var(--ink-soft); margin-bottom:14px; }
.breadcrumb a{ color:var(--rose); }

/* ---------- sticky floating call/WhatsApp (desktop & tablet) ---------- */
.fab-stack{
  position:fixed; right:24px; bottom:28px; z-index:55;
  display:flex; flex-direction:column; gap:12px;
}
.fab{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(43,22,32,0.28);
  transition:transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.fab svg{ width:26px; height:26px; }
.fab:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 16px 34px rgba(43,22,32,0.34); }
.fab-call{ background:var(--plum); color:var(--gold-light); }
.fab-wa{ background:#25D366; color:#0a3a17; }
@media (max-width: 720px){ .fab-stack{ display:none; } }

/* ---------- Reels — self-hosted video, plays inline on this page ---------- */
.reel-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
  align-items:start; max-width:1100px; margin:0 auto;
}
.reel-card{
  border-radius:16px; overflow:hidden; background:#000;
  border:1px solid var(--line); box-shadow:0 8px 20px rgba(43,22,32,0.12);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.reel-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(43,22,32,0.2); }
.reel-frame{ position:relative; aspect-ratio:9/16; overflow:hidden; background:#000; }
.reel-frame video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.reel-play{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0) 50%);
  border:0; cursor:pointer; padding:0;
  transition:opacity .25s ease;
}
.reel-play span{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.92); color:var(--plum);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.35); transition:transform .25s ease;
}
.reel-card:hover .reel-play span{ transform:scale(1.1); }
.reel-play svg{ width:20px; height:20px; margin-left:3px; }
.reel-frame.playing .reel-play{ opacity:0; pointer-events:none; }
.reel-cta{ display:flex; justify-content:center; width:100%; max-width:none; }
@media (max-width: 1080px){
  .reel-grid{ grid-template-columns:repeat(2,1fr); max-width:480px; }
  .reel-card:last-child:nth-child(odd){ grid-column:1 / -1; width:calc(50% - 9px); justify-self:center; }
}
@media (max-width: 560px){ .reel-grid{ grid-template-columns:repeat(2,1fr); gap:12px; max-width:none; } }

/* ---------- owner / meet the artist ---------- */
#owner{ padding:28px 0; }
.owner-split{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;
}
.owner-photo{
  position:relative; border-radius:200px 200px 24px 24px; overflow:hidden;
  border:1px solid var(--gold); background:var(--blush-deep);
  aspect-ratio:3/4; max-height:440px;
}
.owner-photo img{ width:100%; height:100%; object-fit:cover; }
.owner-photo .photo-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); font-size:1rem;
}
@media (max-width: 900px){
  .owner-split{ grid-template-columns:1fr; gap:32px; }
  .owner-photo{ max-width:340px; margin:0 auto; }
}

/* ---------- before / after ---------- */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ba-card{
  border-radius:16px; overflow:hidden; background:var(--cream);
  border:1px solid var(--line); box-shadow:0 8px 20px rgba(43,22,32,0.08);
}
.ba-comparison{ display:block; width:100%; aspect-ratio:1; object-fit:contain; background:var(--blush-deep); }
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.ba-half{ position:relative; aspect-ratio:3/4; background:var(--blush-deep); overflow:hidden; }
.ba-half img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-half .ba-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:0.95rem;
}
.ba-half .ba-tag{
  position:absolute; left:10px; top:10px; z-index:2;
  background:rgba(43,22,32,0.78); color:var(--gold-light);
  font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.ba-card figcaption{
  padding:14px 16px; font-size:0.88rem; font-weight:600;
  color:var(--ink-soft); text-align:center;
}
@media (max-width: 900px){ .ba-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* ---------- hair / nails / skin collage ---------- */
.trio-collage{
  display:grid; grid-template-columns:1.25fr 1fr;
  grid-template-rows:1fr 1fr; gap:14px; height:100%; max-height:520px;
}
.trio-tile{
  position:relative; margin:0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--blush-deep); min-height:150px;
}
.trio-tile.trio-tall{ grid-row:span 2; }
.trio-tile img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s ease; }
.trio-tile:hover img{ transform:scale(1.05); }
.trio-tile figcaption{
  position:absolute; left:12px; bottom:12px;
  background:rgba(43,22,32,0.78); color:var(--gold-light);
  font-family:var(--serif); font-size:0.95rem; letter-spacing:0.04em;
  padding:5px 14px; border-radius:999px; backdrop-filter:blur(4px);
}
@media (max-width: 560px){
  .trio-collage{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; max-height:none; }
  .trio-tile.trio-tall{ grid-row:span 1; grid-column:span 2; aspect-ratio:16/10; }
  .trio-tile{ aspect-ratio:1/1; }
}

/* ---------- before / after comparison slider ---------- */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ba-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--cream); margin:0;
  box-shadow:0 10px 26px rgba(43,22,32,0.07);
}
.ba-view{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--blush-deep); user-select:none; touch-action:pan-y;
}
.ba-view img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
}
.ba-before-wrap{
  position:absolute; inset:0; overflow:hidden;
  width:var(--pos,50%); border-right:2px solid var(--cream);
}
.ba-before-wrap img{ width:100%; }
.ba-view .ba-label{
  position:absolute; bottom:12px; z-index:3;
  font-size:0.7rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; background:rgba(43,22,32,0.72); color:var(--blush);
  pointer-events:none;
}
.ba-label-b{ left:12px; }
.ba-label-a{ right:12px; background:rgba(166,58,94,0.85); color:#fff; }
.ba-handle{
  position:absolute; top:50%; left:var(--pos,50%); z-index:4;
  transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--cream); border:2px solid var(--rose);
  box-shadow:0 6px 18px rgba(43,22,32,0.3);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.ba-handle i{
  width:11px; height:11px; border-left:2px solid var(--rose); border-top:2px solid var(--rose);
  transform:rotate(-45deg); margin-left:3px; display:block;
}
.ba-handle::after{
  content:""; width:11px; height:11px;
  border-right:2px solid var(--rose); border-top:2px solid var(--rose);
  transform:rotate(45deg); margin-right:3px; display:block;
}
.ba-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize; appearance:none; background:transparent;
}
.ba-range::-webkit-slider-thumb{ appearance:none; width:44px; height:100%; cursor:ew-resize; }
.ba-range::-moz-range-thumb{ width:44px; height:100%; border:0; background:transparent; cursor:ew-resize; }
.ba-card figcaption{
  padding:14px 16px; font-size:0.88rem; font-weight:600;
  color:var(--ink-soft); text-align:center;
}
/* graceful state while the owner has not uploaded photos yet */
.ba-card.ba-empty .ba-view{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,var(--blush) 0 14px,var(--blush-deep) 14px 28px);
}
.ba-card.ba-empty .ba-view > *{ display:none; }
.ba-card.ba-empty .ba-view::after{
  content:"Photo coming soon";
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft);
}
@media (max-width: 900px){ .ba-grid{ grid-template-columns:1fr; } }

/* ---------- SEO content block ---------- */
.seo-block{ max-width:none; padding-left:32px; padding-right:32px; }
/* Give the FAQ and SEO content a clear visual break instead of letting
   the two blush-tinted sections run into each other. */
.faq-section{ padding-bottom:40px; }
.faq-section + .seo-home-section{ padding-top:40px; border-top:0; margin-top:24px; }
.seo-home-section .seo-block{ padding-left:48px; padding-right:48px; }
.seo-block h2{ font-size:2rem; }
.seo-block h3{ font-size:1.3rem; margin-top:1.4em; }
.seo-block p{ color:var(--ink-soft); max-width:none; }

/* ---------- utilities ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:0.85rem; color:var(--ink-soft); }

/* ---------- small-phone header fit (Book Now + brand) ---------- */
@media (max-width: 520px){
  .brand img{ height:44px; width:44px; }
  .brand-text .name{ font-size:1rem; }
  .brand-text .tag{ font-size:0.6rem; letter-spacing:0.06em; white-space:nowrap; }
  .header-cta{ gap:6px; }
  .header-cta .btn-primary{ padding:9px 14px; font-size:0.78rem; white-space:nowrap; }
}

/* hide the "photos coming soon" note as soon as the grid has photos */
.gallery-empty.is-hidden{ display:none; }
.gallery-empty{ margin-left:auto; margin-right:auto; max-width:none; font-family:var(--serif); font-style:italic; font-size:1.05rem; padding:40px 0; }

/* ---------- service areas (SEO) ---------- */
.areas-section{ background:var(--blush); border-top:1px solid var(--line); }
.areas-wrap{ position:relative; max-height:230px; overflow:hidden; transition:max-height .45s ease; }
.areas-wrap.is-open{ max-height:4000px; }
.areas-list{
  list-style:none; margin:0; padding:0;
  column-count:4; column-gap:28px;
}
.areas-list li{
  break-inside:avoid; padding:5px 0;
  font-size:0.84rem; color:var(--ink-soft); line-height:1.5;
}
.areas-fade{
  position:absolute; left:0; right:0; bottom:0; height:90px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(250,231,231,0), var(--blush));
  transition:opacity .3s ease;
}
.areas-wrap.is-open .areas-fade{ opacity:0; }
@media (max-width: 900px){ .areas-list{ column-count:3; } }
@media (max-width: 640px){ .areas-list{ column-count:2; } .areas-list li{ font-size:0.8rem; } }

/* ---------- quick-booking modal ---------- */
.booking-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px; visibility:hidden; opacity:0;
  transition:opacity .25s ease, visibility .25s ease;
}
.booking-modal.is-open{ visibility:visible; opacity:1; }
.booking-modal-backdrop{
  position:absolute; inset:0; background:rgba(43,22,32,0.6); backdrop-filter:blur(2px);
}
.booking-modal-dialog{
  position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:var(--cream); border-radius:20px; padding:32px;
  box-shadow:0 30px 70px rgba(43,22,32,0.35);
  transform:translateY(16px); transition:transform .25s ease;
}
.booking-modal.is-open .booking-modal-dialog{ transform:translateY(0); }
.booking-modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--blush); color:var(--plum);
  font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.booking-modal-close:hover{ background:var(--blush-deep); }
body.modal-open{ overflow:hidden; }
@media (max-width: 560px){ .booking-modal-dialog{ padding:24px 20px; border-radius:16px; } }

/* align "Prefer to talk?" column with the top of the booking form card */
.split-top{ align-items:start; }
.talk-col{ padding-top:40px; }
@media (max-width: 900px){ .talk-col{ padding-top:0; } }

/* ---------- moving services marquee ---------- */
.marquee-section{
  background:var(--plum);
  border-top:1px solid rgba(231,199,126,0.18);
  border-bottom:1px solid rgba(231,199,126,0.18);
  padding:16px 0;
  overflow:hidden;
}
.marquee{ overflow:hidden; width:100%; }
.marquee-track{
  display:flex; width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-content{
  display:inline-flex; flex-shrink:0; white-space:nowrap;
  padding-right:2.5rem;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  letter-spacing:0.06em; color:var(--gold-light);
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){
  .marquee-content{ font-size:0.88rem; }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* Home page only: marquee strip in the same rose as the "Book Now" button */
.page-home .marquee-section{
  background:var(--rose);
  border-top:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.page-home .marquee-content{ color:var(--cream); }


/* ---------- franchise & academy lead pages ---------- */
.lead-page{
  padding:72px 0 96px;
}
.lead-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,0.9fr);
  gap:56px;
  align-items:start;
}
.lead-intro h2{
  font-size:clamp(2.5rem,5vw,4.4rem);
  margin-bottom:18px;
}
.lead-intro .lead-copy{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:58ch;
}
.lead-points{
  display:grid;
  gap:14px;
  margin-top:30px;
}
.lead-point{
  display:flex;
  gap:14px;
  padding:17px 0;
  border-top:1px solid var(--line);
}
.lead-point strong{ display:block; margin-bottom:3px; }
.lead-point span{ color:var(--ink-soft); font-size:.92rem; }
.lead-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--blush-deep);
  color:var(--rose);
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-weight:700;
}
.lead-card{
  background:var(--cream);
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(43,22,32,.08);
  padding:34px;
}
.lead-card h3{ font-size:2rem; }
.lead-card > p{ color:var(--ink-soft); font-size:.92rem; }
.lead-form{
  display:grid;
  gap:15px;
  margin-top:22px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field{ display:grid; gap:7px; }
.field label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--plum);
}
.field input,.field select,.field textarea{
  width:100%;
  border:1px solid rgba(43,22,32,.16);
  background:#fff;
  color:var(--ink);
  padding:13px 14px;
  border-radius:2px;
  font:inherit;
  outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(166,58,94,.1);
}
.field textarea{ min-height:120px; resize:vertical; }
.form-status{
  display:none;
  padding:12px 14px;
  font-size:.88rem;
  border-radius:2px;
  white-space:pre-line;
}
.form-status.show{ display:block; }
.form-status.ok{ background:#e8f6ed; color:#1d6b3a; }
.form-status.err{ background:#fff0f0; color:#9b2d2d; }
.lead-note{
  font-size:.78rem;
  color:var(--ink-soft);
  margin-top:2px;
}
@media(max-width:900px){
  .lead-grid{ grid-template-columns:1fr; gap:38px; }
}
@media(max-width:560px){
  .lead-page{ padding:52px 0 70px; }
  .lead-card{ padding:24px 18px; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- redesigned four-column footer ---------- */
.site-footer{background:var(--rose);color:rgba(255,253,251,.82);padding:58px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.45fr .9fr 1fr 1.15fr;gap:44px;margin-bottom:38px;align-items:start}
.footer-grid > div{margin-top:0}
.footer-grid h5{color:var(--gold-light);font-family:var(--serif);font-size:1.12rem;margin:0 0 18px;line-height:1.2}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:11px;font-size:.88rem}
.footer-grid a{color:rgba(251,241,238,.75);transition:color .2s ease,transform .2s ease}
.footer-grid a:hover{color:var(--cream)}
.footer-brand{display:flex;gap:13px;align-items:center;margin-bottom:16px;color:var(--cream)}
.footer-brand:hover{color:var(--cream)!important}
.footer-brand img{height:52px;width:52px;border-radius:50%;object-fit:cover}
.footer-brand span{font-family:var(--serif);font-size:1.25rem;color:var(--cream);line-height:1}
.footer-about{max-width:300px;font-size:.86rem;line-height:1.8;color:rgba(251,241,238,.62);margin:0}
.footer-contact li a{display:flex;align-items:center;gap:10px}
.footer-contact svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.footer-contact li:nth-child(4) svg{fill:currentColor;stroke:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.78rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:rgba(251,241,238,.55)}
.footer-credit-link{color:rgba(251,241,238,.72);font-weight:700}
.footer-credit-link:hover{color:var(--gold-light)}
.credit-heart{color:#E8879F;font-style:normal}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px 28px}}
@media (max-width:560px){.site-footer{padding:46px 0 20px}.footer-grid{grid-template-columns:1fr;gap:30px}.footer-about{max-width:100%}.footer-bottom{justify-content:center;text-align:center;line-height:1.7}}

/* Home page: balanced spacing around FAQ and the SEO content below. */
@media (max-width: 900px){
  .seo-home-section .seo-block{padding-left:32px;padding-right:32px;}
}
@media (max-width: 560px){
  .faq-section{padding-bottom:32px;}
  .faq-section + .seo-home-section{margin-top:18px;padding-top:32px;}
  .seo-home-section .seo-block{padding-left:24px;padding-right:24px;}
}


/* ---------- footer contact layout ---------- */
.footer-contact ul{list-style:none;margin:0;padding:0}
.footer-contact li{margin:0 0 12px}
.footer-contact li a{display:flex;align-items:center;gap:10px;text-decoration:none}
.footer-contact .footer-locations{display:flex;align-items:flex-start;gap:10px}
.footer-contact .footer-locations > svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.footer-contact .footer-locations div{display:flex;flex-direction:column;gap:3px}
.footer-contact .footer-location-title{font-weight:700}
.footer-contact .footer-socials{display:flex;align-items:center;gap:18px;margin-top:4px}
.footer-contact .footer-socials a{display:inline-flex;align-items:center;gap:8px}
.footer-contact .footer-socials svg{width:20px;height:20px;flex:0 0 20px}