/* ============================================================================
   starter.css — MECHANICS-ONLY FLOOR (copied verbatim; bespoke design follows)
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; }

:root {
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;     --space-8: 4.5rem;
  --measure: 38rem;
  --section-pad: 4.5rem;
}

h1 { font-size: 2.5rem;   line-height: 1.08; margin: 0 0 1rem; }
h2 { font-size: 1.875rem; line-height: 1.15; margin: 0 0 0.75rem; }
h3 { font-size: 1.5rem;   line-height: 1.25; margin: 0 0 0.5rem; }
p  { margin: 0 0 1rem; max-width: var(--measure); }
@media (min-width: 1000px) { h1 { font-size: 3.25rem; } }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}
a { text-underline-offset: 3px; }

:root { --header-safe: clamp(5rem, 9vh, 6.5rem); }
html { scroll-padding-top: var(--header-safe); }

@media (max-width: 720px) {
  :root { --section-pad: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================================
   END OF FLOOR — Julie's Beauty Salon bespoke identity below.
   Direction: deep aubergine-plum surfaces + burnished henna copper, warm ivory
   light sections, Yeseva One display + Manrope body, mehndi line-art motif.
   Type scale (literal): 0.8125 / 0.9375 / 1.0625 / 1.25 / 1.5 / 1.875 / 2.5 / 3.25 rem
   Spacing: 0.25rem (4px) grid via --space tokens.
   ============================================================================ */

:root {
  --plum:        #3a1830;
  --plum-2:      #4b2342;
  --plum-deep:   #271022;
  --wine:        #7a2d4d;
  --copper:      #b0552f;
  --copper-deep: #8f3f20;
  --copper-soft: #d9925e;
  --champagne:   #ead7c7;
  --ivory:       #f7efe8;
  --paper:       #ffffff;
  --ink:         #2b1922;
  --ink-soft:    #5d4a52;
  --line:        #e4d4c6;
  --line-plum:   #5c3550;

  --maxw: 72rem;
  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 18px 50px -28px rgba(39, 16, 34, 0.55);
}

body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: "Yeseva One", Georgia, serif; font-weight: 400; }
h1 { letter-spacing: -0.01em; color: var(--ink); }
h2 { letter-spacing: -0.005em; }
h3 { font-family: "Manrope", sans-serif; font-weight: 700; letter-spacing: 0.005em; }
p { color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--copper-deep); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--section-pad) 0; background-color: var(--ivory); }
.lede { font-size: 1.25rem; line-height: 1.6; color: var(--ink-soft); max-width: 34rem; }
.eyebrow {
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper-deep); margin: 0 0 var(--space-4);
}
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }
.fine { font-size: 0.8125rem; color: var(--ink-soft); margin-top: var(--space-3); }
.fine a { font-weight: 700; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.01em; line-height: 1.1; text-decoration: none;
  padding: 0.75rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn-primary { background-color: var(--copper); color: #fff7f0; }
.btn-primary:hover { background-color: #97461f; transform: translateY(-2px); }
.btn-ghost { background-color: transparent; color: var(--copper-deep); border-color: var(--copper); }
.btn-ghost:hover { background-color: var(--copper); color: #fff7f0; transform: translateY(-2px); }
.on-plum .btn-ghost { color: #f4e5d8; border-color: var(--copper-soft); background-color: var(--plum); }
.on-plum .btn-ghost:hover { background-color: var(--copper); color: #fff7f0; border-color: var(--copper); }

/* ============================================================================
   HEADER (fixed) + nav  — plum surface; restate plum bg on light-text rules
   ============================================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background-color: var(--plum);
  border-bottom: 1px solid var(--line-plum);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.brand {
  display: inline-flex; align-items: baseline; gap: var(--space-2); text-decoration: none;
  white-space: nowrap; background-color: var(--plum);
}
.brand .mark {
  font-family: "Yeseva One", serif; font-size: 1.5rem; line-height: 1.05;
  color: #f6e7da; background-color: var(--plum);
}
.brand .mark em { color: var(--copper-soft); font-style: normal; background-color: var(--plum); }
.brand .sub {
  font-family: "Manrope", sans-serif; font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--copper-soft);
  background-color: var(--plum);
}
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav a {
  font-family: "Manrope", sans-serif; font-weight: 600; font-size: 0.9375rem;
  color: #ecdccf; background-color: var(--plum); text-decoration: none; letter-spacing: 0.01em;
  padding: 0.5rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: #ffffff; background-color: var(--plum); border-bottom-color: var(--copper-soft); }
.header-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em;
  text-decoration: none; padding: 0.75rem 1.25rem; border-radius: 999px;
  color: #2a1206; background-color: var(--copper-soft); border: 1.5px solid var(--copper-soft);
}
.header-cta:hover { background-color: #f0b487; border-color: #f0b487; color: #2a1206; }

.nav-toggle { display: none; }
.mobile-nav { display: none; }

@media (max-width: 880px) {
  .nav, .header-cta.desk { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
    background-color: var(--plum); color: #f6e7da; border: 1.5px solid var(--line-plum);
    border-radius: 999px; padding: 0.5rem 1rem; font-family: "Manrope", sans-serif;
    font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em;
  }
  .mobile-nav {
    display: none; background-color: var(--plum); border-top: 1px solid var(--line-plum);
    padding: var(--space-4) var(--space-5) var(--space-6);
  }
  .mobile-nav.open { display: block; }
  .mobile-nav a {
    display: block; padding: 0.75rem 0; color: #ecdccf; background-color: var(--plum);
    text-decoration: none; font-weight: 600; font-size: 0.9375rem; border-bottom: 1px solid var(--line-plum);
  }
  .mobile-nav .header-cta { margin-top: var(--space-4); justify-content: center; width: 100%; }
}

/* the fixed header overlaps the page; the first section (always a plum band)
   carries its own top clearance so header + hero meet with no gap. */
.page { position: relative; }

/* ============================================================================
   PAGE INTRO (interior pages) — plum band, copy only
   ============================================================================ */
.page-intro { background-color: var(--plum); color: #f4e5d8; }
.page-intro .wrap { padding-top: calc(var(--header-safe) + var(--space-5)); padding-bottom: var(--space-7); }
.page-intro .eyebrow { color: var(--copper-soft); background-color: var(--plum); }
.page-intro h1 { color: #fbeee2; background-color: var(--plum); max-width: 18ch; }
.page-intro p { color: #e7d3c4; background-color: var(--plum); font-size: 1.25rem; max-width: 44rem; }
.crumbs { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-soft); background-color: var(--plum); margin-bottom: var(--space-4); font-weight: 700; }
.crumbs a { color: var(--copper-soft); background-color: var(--plum); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ============================================================================
   DECOR — simple hand-coded mehndi divider (allowed: simple geometric mark)
   ============================================================================ */
.divider { display: flex; align-items: center; justify-content: center; gap: var(--space-4); color: var(--copper-deep); margin: var(--space-6) 0; }
.divider::before, .divider::after { content: ""; height: 1px; width: clamp(2rem, 18vw, 9rem); background-color: var(--copper); opacity: 0.5; }
.divider svg { width: 26px; height: 26px; display: block; }

/* ============================================================================
   MASTHEAD  (plum band; mandala art beside the text, never under it)
   ============================================================================ */
.masthead { background-color: var(--plum); color: #f4e5d8; overflow: hidden; }
.masthead .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8);
  align-items: center; padding-top: calc(var(--header-safe) + var(--space-6)); padding-bottom: var(--space-8);
}
.masthead-copy { background-color: var(--plum); }
.masthead-copy .eyebrow { color: var(--copper-soft); background-color: var(--plum); }
.masthead h1 { color: #fbeee2; background-color: var(--plum); margin-bottom: var(--space-5); }
.masthead p { color: #e7d3c4; background-color: var(--plum); font-size: 1.25rem; max-width: 32rem; }
.masthead-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.masthead-art { position: relative; }
.masthead-art img { display: block; width: 100%; max-width: 30rem; margin-inline: auto; border-radius: 50%; }
.masthead-art .chip {
  position: absolute; left: -0.5rem; bottom: 1rem;
  background-color: var(--ivory); color: var(--ink);
  border-radius: var(--radius); padding: 0.75rem 1rem; box-shadow: var(--shadow);
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.1;
}
.masthead-art .chip span { display: block; color: var(--copper-deep); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--line-plum); background-color: var(--plum);
}
.trust-row span { color: #e9d6c8; background-color: var(--plum); font-size: 0.9375rem; font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); }
.trust-row span b { color: var(--copper-soft); background-color: var(--plum); font-weight: 800; }

@media (max-width: 860px) {
  .masthead .wrap { grid-template-columns: 1fr; gap: var(--space-6); }
  .masthead-art { order: -1; }
  .masthead-art img { max-width: 20rem; }
  .masthead-art .chip { left: auto; right: 0; }
}

/* ============================================================================
   LIGHT SECTIONS, INTROS
   ============================================================================ */
.section-head { max-width: 40rem; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; }
.tint { background-color: var(--champagne); }
.tint p { color: #5a4338; }
.tint .eyebrow { color: var(--copper-deep); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.split.narrow { grid-template-columns: 1.2fr 0.8fr; }
.split img { border-radius: var(--radius-lg); display: block; width: 100%; }
@media (max-width: 820px) { .split, .split.narrow { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ============================================================================
   SERVICE TILES (parent>child, unclassed children)
   ============================================================================ */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tiles li {
  background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tiles li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tiles li .ic { width: 34px; height: 34px; color: var(--copper); background-color: var(--paper); }
.tiles li h3 { margin: 0; color: var(--ink); }
.tiles li p { margin: 0; font-size: 0.9375rem; }
.tiles li .more { margin-top: auto; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--copper-deep); text-decoration: none; }
.tiles li .more:hover { text-decoration: underline; }
.tiles li .price-from { color: var(--copper-deep); font-weight: 700; font-size: 0.9375rem; }

/* ============================================================================
   PRICE MENU (grouped by body area)
   ============================================================================ */
.menu-group { margin-bottom: var(--space-7); }
.menu-group > h3 {
  font-family: "Yeseva One", serif; font-weight: 400; font-size: 1.5rem; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4);
}
.menu-group > h3 .ic { width: 22px; height: 22px; color: var(--copper); background-color: var(--paper); align-self: center; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: baseline; padding: 0.75rem 0; border-bottom: 1px dashed var(--line); }
.price-list li > div { display: flex; flex-direction: column; }
.price-list .name { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.price-list .desc { color: var(--ink-soft); font-size: 0.9375rem; }
.price-list .amt { font-family: "Yeseva One", serif; color: var(--copper-deep); font-size: 1.25rem; white-space: nowrap; }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 820px) { .menu-cols { grid-template-columns: 1fr; gap: 0; } }

.menu-card { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--shadow); }

/* ============================================================================
   FEATURE BANNER
   ============================================================================ */
.banner { background-color: var(--champagne); border-radius: var(--radius-lg); overflow: hidden; }
.banner-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.banner-grid img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 16rem; }
.banner-copy { padding: clamp(1.75rem, 4vw, 3.25rem); align-self: center; }
.banner-copy h2 { color: var(--ink); }
.banner-copy p { color: #5a4338; }
@media (max-width: 820px) { .banner-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   PLUM CTA BAND (restate plum bg on light-text rules)
   ============================================================================ */
.cta-band { background-color: var(--plum); color: #f4e5d8; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.cta-band h2 { color: #fbeee2; background-color: var(--plum); margin: 0; max-width: 30rem; }
.cta-band p { color: #e7d3c4; background-color: var(--plum); margin: var(--space-2) 0 0; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================================
   REVIEWS
   ============================================================================ */
.quotes { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.quotes li { background-color: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--copper); border-radius: var(--radius); padding: var(--space-6); }
.quotes blockquote { margin: 0 0 var(--space-4); font-family: "Yeseva One", serif; font-size: 1.5rem; line-height: 1.4; color: var(--ink); }
.quotes .who { font-weight: 700; color: var(--copper-deep); font-size: 0.9375rem; }
.stars { color: var(--copper); background-color: var(--paper); letter-spacing: 0.15em; font-size: 0.9375rem; margin-bottom: var(--space-3); }

/* ============================================================================
   GALLERY
   ============================================================================ */
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.gallery figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--plum); box-shadow: var(--shadow); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.gallery figcaption { padding: var(--space-3) var(--space-4); color: #ecdccf; background-color: var(--plum); font-size: 0.8125rem; }

/* ============================================================================
   CONTACT / FORM
   ============================================================================ */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.info-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.info-list li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.info-list .ic { width: 22px; height: 22px; color: var(--copper-deep); flex: none; margin-top: var(--space-1); }
.info-list .k { font-weight: 700; color: var(--ink); display: block; font-size: 0.9375rem; }
.info-list a { color: var(--copper-deep); text-decoration: none; font-weight: 700; }
.info-list a:hover { text-decoration: underline; }

form.demo { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow); }
form.demo p { margin: 0 0 var(--space-4); max-width: none; }
form.demo label { display: block; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.03em; color: var(--ink); margin-bottom: var(--space-2); text-transform: uppercase; }
form.demo input, form.demo select, form.demo textarea {
  width: 100%; font-family: inherit; font-size: 1.0625rem; color: var(--ink);
  padding: 0.75rem 1rem; border: 1.5px solid var(--line); border-radius: 10px; background-color: #fffdfb;
}
form.demo input:focus, form.demo select:focus, form.demo textarea:focus { border-color: var(--copper); outline: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.8125rem; color: var(--ink-soft); margin-top: var(--space-3); }
.map-embed { margin-top: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ============================================================================
   FOOTER (deepest plum — restate bg on every light-text rule)
   ============================================================================ */
.site-footer { background-color: var(--plum-deep); color: #e7d3c4; padding: var(--space-8) 0 var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
.site-footer .brand .mark, .site-footer .brand .mark em, .site-footer .brand .sub { background-color: var(--plum-deep); }
.site-footer p { color: #cbb3a6; background-color: var(--plum-deep); font-size: 0.9375rem; max-width: 24rem; }
.site-footer h3 { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-soft); background-color: var(--plum-deep); margin: 0 0 var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-3); }
.site-footer a { color: #e7d3c4; background-color: var(--plum-deep); text-decoration: none; font-size: 0.9375rem; }
.site-footer a:hover { color: #ffffff; background-color: var(--plum-deep); text-decoration: underline; }
.footer-base { border-top: 1px solid var(--line-plum); margin-top: var(--space-7); padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.footer-base small { color: #b69d90; background-color: var(--plum-deep); font-size: 0.8125rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ============================================================================
   STICKY MOBILE CALL / BOOK BAR
   ============================================================================ */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background-color: var(--line-plum);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 1rem; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.9375rem;
    text-decoration: none;
  }
  .mobile-bar .call { background-color: var(--plum); color: #f6e7da; }
  .mobile-bar .book { background-color: var(--copper); color: #fff7f0; }
  .mobile-bar .ic { width: 18px; height: 18px; }
  body { padding-bottom: 3.5rem; }
}

/* utilities */
.stack > * + * { margin-top: var(--space-4); }
.faq { list-style: none; margin: 0; padding: 0; }
.faq li { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.faq h3 { color: var(--ink); margin-bottom: var(--space-2); }
.faq p { margin: 0; }