/* ============================================================
   LB Aesthetics & Wellness — shared stylesheet
   Design language: warm-luxury. Ivory + espresso + antique
   bronze. Fraunces (display/italic accents) + Jost (body).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ivory:#F7F2EA;
  --sand:#EAE0D1;
  --sand-deep:#DFD1B8;
  --espresso:#2B211B;
  --espresso-soft:#382C24;
  --taupe:#7C6F5F;
  --bronze:#9C7A45;
  --bronze-light:#B99A63;
  --clay:#B98868;
  --line: rgba(43,33,27,0.12);

  --display: 'Fraunces', serif;
  --body: 'Jost', sans-serif;

  --max-w: 1240px;
  --gutter: clamp(24px, 5vw, 80px);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
em, .accent-italic{ font-style: italic; font-weight: 400; }

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

.eyebrow{
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--bronze);
  font-weight: 500;
  display:inline-block;
  margin-bottom: 18px;
}

/* ---------- signature line motif ---------- */
.flourish{
  width: 140px;
  height: 34px;
  display:block;
  margin: 22px 0 30px;
}
.flourish path{
  fill:none;
  stroke: var(--bronze);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: draw 1.4s ease forwards 0.3s;
}
.flourish.center{ margin-left:auto; margin-right:auto; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .flourish path{ animation: none; stroke-dashoffset:0; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 32px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--espresso);
  color: var(--ivory);
}
.btn-primary:hover{ background: var(--bronze); }
.btn-outline{
  background: transparent;
  color: var(--ivory);
  border-color: rgba(247,242,234,0.5);
}
.btn-outline:hover{ border-color: var(--ivory); background: rgba(247,242,234,0.08); }
.btn-outline-dark{
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.btn-outline-dark:hover{ background: var(--espresso); color: var(--ivory); }

/* ---------- nav ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(247,242,234,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px var(--gutter);
  max-width: var(--max-w);
  margin:0 auto;
}
.nav .logo img{ height: 40px; width:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap: 40px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso);
  position:relative;
  padding-bottom: 4px;
}
.nav-links a.current,
.nav-links a:hover{ color: var(--bronze); }
.nav-cta{ display:flex; align-items:center; gap:28px; }
.nav-cta .btn{ padding: 12px 24px; }

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 8px;
}
.menu-toggle span{ width:24px; height:1.5px; background: var(--espresso); display:block; }

/* ---------- footer ---------- */
.site-footer{
  background: var(--espresso);
  color: var(--ivory);
  padding: 72px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(247,242,234,0.14);
}
.footer-grid img{ height: 34px; margin-bottom: 18px; }
.footer-grid h4{
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--bronze-light);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer-grid p, .footer-grid a{
  color: rgba(247,242,234,0.75);
  font-size: 14.5px;
  display:block;
  margin-bottom: 10px;
}
.footer-grid a:hover{ color: var(--ivory); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(247,242,234,0.5);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .legal-links{ display:flex; gap:24px; }
.footer-bottom a:hover{ color: var(--ivory); }

/* ---------- generic section utilities ---------- */
section{ padding: 110px 0; }
.section-tight{ padding: 80px 0; }
.bg-sand{ background: var(--sand); }
.bg-dark{ background: var(--espresso); color: var(--ivory); }
.bg-dark .eyebrow{ color: var(--bronze-light); }
.bg-dark h2, .bg-dark h3{ color: var(--ivory); }
.bg-dark p{ color: rgba(247,242,234,0.78); }

.center{ text-align:center; }
.max-copy{ max-width: 640px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  padding: 90px 0 70px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1{ font-size: clamp(38px, 5vw, 58px); }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .nav-links{
    display:none;
    position:absolute;
    top: 100%;
    left:0;
    right:0;
    background: var(--ivory);
    flex-direction:column;
    align-items:flex-start;
    gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.mobile-open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding: 16px var(--gutter); width:100%; }
  .nav-cta .btn:not(.mobile-visible){ padding: 10px 18px; font-size: 12px; }
  .menu-toggle{ display:flex; }
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  section{ padding: 72px 0; }
  section .wrap[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
}