/* ==========================================================================
   Bintou's Hair Braiding & Weave — Stylesheet
   Design language: Ivory + antique gold + deep merlot, on warm black.
   Signature motif: the interlocking three-strand braid (used as dividers,
   the loader, and inside the logo mark) — a literal nod to the craft.
   ========================================================================== */

:root{
  /* -- Palette -------------------------------------------------------- */
  --ink:        #15110d;   /* warm near-black */
  --ink-soft:   #211a14;
  --cream:      #f8f2e6;   /* base light background */
  --beige:      #ecdfc4;   /* secondary light surface */
  --gold:       #b3893c;   /* antique gold — primary accent */
  --gold-light: #e6c77e;
  --gold-dim:   #7a6230;
  --merlot:     #5c1327;   /* deep wine — secondary accent, warmth + depth */
  --merlot-light:#8a2740;
  --white:      #fffdf9;
  --ink-70:     rgba(21,17,13,.7);
  --ink-45:     rgba(21,17,13,.45);
  --cream-70:   rgba(248,242,230,.7);

  /* -- Type ------------------------------------------------------------ */
  --display: "Fraunces", "Georgia", serif;
  --body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* -- Layout ------------------------------------------------------------ */
  --wrap: 1220px;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,.68,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:600; letter-spacing:.01em; }
p{ margin:0; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

::selection{ background: var(--gold); color:var(--ink); }

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility -------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Eyebrow / labels -------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--body); font-weight:700; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-dim);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold);
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size: clamp(2rem, 4vw, 2.8rem); margin-top:14px; line-height:1.08; }
.section-head p{ margin-top:16px; font-size:1.05rem; color:var(--ink-70); line-height:1.65; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

section{ position:relative; padding:110px 0; }
.section-alt{ background: var(--beige); }
.section-dark{ background: var(--ink); color: var(--cream); }
.section-dark .section-head p{ color: var(--cream-70); }
.section-dark .eyebrow{ color: var(--gold-light); }

/* ==========================================================================
   Signature braid divider — three ribbons interlacing across the seam
   between sections. Built once, reused as the loader animation too.
   ========================================================================== */
.braid-divider{
  width:100%; height:46px; display:block;
  color: var(--gold);
}
.braid-divider path{ stroke: currentColor; }

/* ==========================================================================
   Loader
   ========================================================================== */
#loader{
  position:fixed; inset:0; z-index:9999;
  background: var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#loader svg{ width:96px; height:96px; }
#loader .strand{ fill:none; stroke-width:6; stroke-linecap:round; }
#loader .s1{ stroke: var(--gold); }
#loader .s2{ stroke: var(--gold-light); }
#loader .s3{ stroke: var(--merlot-light); }
#loader p{
  font-family:var(--body); letter-spacing:.3em; text-transform:uppercase;
  font-size:.68rem; color: var(--cream-70);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding: 22px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
header.scrolled{
  padding: 12px 0;
  background: rgba(21,17,13,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.logo{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:1.28rem; color:var(--cream); }
.logo svg{ width:38px; height:38px; flex:none; }
.logo b{ font-weight:700; color:var(--gold-light); }
.logo span{ display:block; font-family:var(--body); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim); }

nav.main-nav{ display:flex; align-items:center; gap:34px; }
nav.main-nav a{
  font-size:.86rem; color: var(--cream-70); font-weight:600;
  position:relative; padding:4px 0;
  transition:color .25s;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px;
  background:var(--gold-light); transition:width .3s var(--ease);
}
nav.main-nav a:hover{ color:var(--white); }
nav.main-nav a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.icon-link{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(230,199,126,.35); color:var(--gold-light);
  transition: background .25s, transform .25s;
}
.icon-link:hover{ background: var(--gold-light); color:var(--ink); transform:translateY(-2px); }
.icon-link svg{ width:16px; height:16px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius:999px; font-weight:700; font-size:.84rem;
  letter-spacing:.02em; border:1px solid transparent; white-space:nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dim));
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(179,137,60,.35);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(179,137,60,.48); }
.btn-outline{
  border-color: rgba(230,199,126,.5); color: var(--cream);
}
.btn-outline:hover{ background: rgba(230,199,126,.12); transform:translateY(-3px); }
.btn-outline-dark{ border-color: rgba(21,17,13,.3); color: var(--ink); }
.btn-outline-dark:hover{ background: rgba(21,17,13,.06); transform:translateY(-3px); }
.btn-sm{ padding:9px 18px; font-size:.74rem; }
.btn-block{ width:100%; }

.hamburger{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; padding:6px;
}
.hamburger span{ height:2px; width:100%; background:var(--gold-light); border-radius:2px; transition:.3s var(--ease); }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(84vw,360px); z-index:950;
  background: var(--ink); padding: 100px 32px 40px;
  transform: translateX(100%); transition: transform .45s var(--ease);
  display:flex; flex-direction:column; gap:26px;
  box-shadow: -20px 0 50px rgba(0,0,0,.4);
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ color:var(--cream); font-size:1.1rem; font-family:var(--display); }
.mobile-nav .btn{ margin-top:10px; }
.nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:940; opacity:0; visibility:hidden; transition:.4s; }
.nav-scrim.show{ opacity:1; visibility:visible; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  padding-top:140px; padding-bottom:96px;
  background: var(--ink);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(180deg, rgba(21,17,13,.35) 0%, rgba(21,17,13,.55) 55%, rgba(21,17,13,.96) 100%),
    url('https://images.unsplash.com/photo-1472747624745-ce92d32d3c24?auto=format&fit=crop&w=1800&q=80');
  background-size:cover; background-position:center 20%;
  animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom{ from{ transform:scale(1);} to{ transform:scale(1.09);} }
.hero-gradient{
  position:absolute; inset:0; z-index:1; opacity:.55; mix-blend-mode:overlay;
  background: radial-gradient(120% 90% at 15% 10%, var(--merlot) 0%, transparent 55%),
              radial-gradient(90% 70% at 100% 100%, var(--gold-dim) 0%, transparent 60%);
  animation: gradientShift 12s ease-in-out infinite alternate;
}
@keyframes gradientShift{ from{ opacity:.4;} to{ opacity:.7;} }

.hero .wrap{ position:relative; z-index:2; width:100%; }
.hero-content{ max-width:760px; }
.hero-content .eyebrow{ color: var(--gold-light); }
.hero-content .eyebrow::before{ background:var(--gold-light); }
.hero-content h1{
  color: var(--white); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:1.03; margin-top:20px;
}
.hero-content h1 em{ font-style:italic; color: var(--gold-light); }
.hero-content .sub{
  margin-top:24px; font-size:1.15rem; color: var(--cream-70); max-width:560px; line-height:1.6;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:34px; margin-top:64px;
  padding-top:28px; border-top:1px solid rgba(230,199,126,.2);
}
.hero-meta div b{ display:block; font-family:var(--display); font-size:1.5rem; color:var(--gold-light); }
.hero-meta div span{ font-size:.78rem; color:var(--cream-70); letter-spacing:.04em; }

.scroll-cue{
  position:absolute; right:34px; bottom:34px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--cream-70); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(var(--gold-light), transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns: .92fr 1.08fr; gap:70px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius: var(--radius-lg); width:100%; height:560px; object-fit:cover; box-shadow:0 30px 60px rgba(21,17,13,.25); }
.about-badge{
  position:absolute; left:-30px; bottom:-30px; width:150px; height:150px; border-radius:50%;
  background: var(--merlot); color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 20px 40px rgba(92,19,39,.35); animation: floaty 5s ease-in-out infinite;
}
.about-badge b{ font-family:var(--display); font-size:1.9rem; color:var(--gold-light); }
.about-badge span{ font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

.about-copy p{ font-size:1.04rem; line-height:1.75; color:var(--ink-70); margin-top:18px; }
.pill-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pill{
  padding:9px 16px; border-radius:999px; background:var(--white); border:1px solid rgba(179,137,60,.3);
  font-size:.78rem; font-weight:700; color:var(--ink-70);
}

.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:12px; }
.why-card{
  background:var(--white); border-radius:var(--radius-md); padding:30px 24px;
  border:1px solid rgba(179,137,60,.18);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.why-card:hover{ transform:translateY(-8px); box-shadow:0 24px 44px rgba(21,17,13,.1); border-color:var(--gold); }
.why-card .ic{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--ink); margin-bottom:18px;
}
.why-card .ic svg{ width:24px; height:24px; }
.why-card h3{ font-size:1.05rem; }
.why-card p{ margin-top:10px; font-size:.9rem; color:var(--ink-70); line-height:1.6; }

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.svc-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--ink);
  box-shadow:0 18px 40px rgba(21,17,13,.14);
}
.svc-media{ position:relative; height:230px; overflow:hidden; }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.svc-card:hover .svc-media img{ transform:scale(1.08); }
.svc-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(21,17,13,.85)); }
.svc-price{
  position:absolute; top:16px; right:16px; background:var(--gold-light); color:var(--ink);
  font-weight:800; font-size:.74rem; padding:6px 12px; border-radius:999px;
}
.svc-body{ padding:24px 24px 26px; color:var(--cream); }
.svc-body h3{ font-size:1.18rem; color:var(--white); }
.svc-body p{ margin-top:10px; font-size:.87rem; color:var(--cream-70); line-height:1.55; min-height:64px; }
.svc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.svc-foot .dur{ font-size:.76rem; color:var(--gold-light); letter-spacing:.05em; }
.svc-foot a{ font-size:.78rem; font-weight:700; color:var(--gold-light); display:flex; align-items:center; gap:6px; }
.svc-foot a svg{ width:13px; height:13px; transition:transform .3s; }
.svc-foot a:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   Gallery
   ========================================================================== */
.filter-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
.filter-btn{
  padding:10px 20px; border-radius:999px; border:1px solid rgba(179,137,60,.35);
  background:transparent; font-size:.8rem; font-weight:700; color:var(--ink-70);
  transition: all .3s var(--ease);
}
.filter-btn.active, .filter-btn:hover{ background:var(--ink); color:var(--gold-light); border-color:var(--ink); }
.masonry{ column-count:3; column-gap:20px; }
.masonry-item{
  break-inside:avoid; margin-bottom:20px; border-radius:var(--radius-md); overflow:hidden;
  position:relative; cursor:zoom-in; box-shadow:0 14px 30px rgba(21,17,13,.12);
}
.masonry-item img{ width:100%; display:block; transition: transform .6s var(--ease); }
.masonry-item:hover img{ transform:scale(1.06); }
.masonry-cap{
  position:absolute; inset:auto 0 0 0; padding:16px; color:#fff; font-size:.82rem; font-weight:700;
  background:linear-gradient(0deg, rgba(21,17,13,.85), transparent);
  opacity:0; transform:translateY(8px); transition:.35s var(--ease);
}
.masonry-item:hover .masonry-cap{ opacity:1; transform:none; }

.lightbox{
  position:fixed; inset:0; background:rgba(15,12,9,.94); z-index:1000;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:.35s var(--ease); padding:30px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(900px,90vw); max-height:82vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.92); transition:.4s var(--ease); }
.lightbox.open img{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:26px; right:30px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2); font-size:1.4rem;
}

/* ==========================================================================
   Before / After
   ========================================================================== */
.ba-wrap{ display:grid; grid-template-columns: repeat(2,1fr); gap:32px; }
.ba-slider{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:0 24px 48px rgba(21,17,13,.16);
}
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; }
.ba-slider .after-img{ clip-path: inset(0 0 0 50%); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0; display:flex; align-items:center; justify-content:center;
}
.ba-handle::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--gold-light); }
.ba-grip{
  width:44px; height:44px; border-radius:50%; background:var(--gold-light); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.35); cursor:ew-resize;
}
.ba-grip svg{ width:18px; height:18px; }
.ba-tag{ position:absolute; top:18px; padding:6px 14px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ba-tag.before{ left:18px; background:rgba(21,17,13,.6); color:#fff; }
.ba-tag.after{ right:18px; background:var(--gold-light); color:var(--ink); }
.ba-cap{ margin-top:16px; font-weight:700; text-align:center; color:var(--ink-70); font-size:.9rem; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.rev-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rev-card{
  background:var(--white); border-radius:var(--radius-md); padding:28px; border:1px solid rgba(179,137,60,.18);
  display:flex; flex-direction:column; gap:16px;
}
.stars{ color:var(--gold); display:flex; gap:3px; }
.stars svg{ width:16px; height:16px; }
.rev-card p{ font-size:.92rem; line-height:1.6; color:var(--ink-70); }
.rev-who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.rev-avatar{
  width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--merlot-light));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700;
}
.rev-who b{ display:block; font-size:.86rem; }
.rev-who span{ font-size:.72rem; color:var(--ink-45); }
.rev-source{ margin-left:auto; width:22px; height:22px; opacity:.6; }
.rev-note{ margin-top:30px; font-size:.82rem; color:var(--ink-45); text-align:center; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--gold-light); }
.stat span{ font-size:.82rem; letter-spacing:.05em; color:var(--cream-70); }

/* ==========================================================================
   Appointment
   ========================================================================== */
.appt-wrap{ display:grid; grid-template-columns: 1fr 1.15fr; gap:60px; align-items:flex-start; }
.appt-info h2{ color:var(--white); font-size:clamp(2rem,4vw,2.7rem); }
.appt-info p{ margin-top:16px; color:var(--cream-70); line-height:1.7; }
.appt-list{ margin-top:30px; display:flex; flex-direction:column; gap:18px; }
.appt-list li{ display:flex; gap:14px; align-items:flex-start; color:var(--cream-70); font-size:.92rem; }
.appt-list svg{ width:20px; height:20px; color:var(--gold-light); flex:none; margin-top:2px; }

.card-glass{
  background: rgba(255,253,249,.06);
  border: 1px solid rgba(230,199,126,.18);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  padding: 38px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-light); font-weight:700; }
.field input, .field select, .field textarea{
  background: rgba(255,253,249,.06); border:1px solid rgba(230,199,126,.28); border-radius:12px;
  padding:13px 15px; color:var(--white); font-family:var(--body); font-size:.92rem;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(248,242,230,.4); }
.field select option{ color:#111; }
.field textarea{ resize:vertical; min-height:90px; }
.field .err{ font-size:.72rem; color: #e8a3a3; min-height:14px; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#e8a3a3; }

.confirm-modal{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  background:rgba(15,12,9,.75); opacity:0; visibility:hidden; transition:.35s var(--ease); padding:20px;
}
.confirm-modal.open{ opacity:1; visibility:visible; }
.confirm-card{
  background:var(--cream); border-radius:var(--radius-lg); padding:44px; max-width:440px; text-align:center;
  transform:translateY(20px) scale(.96); transition:.4s var(--ease); box-shadow:0 40px 90px rgba(0,0,0,.4);
}
.confirm-modal.open .confirm-card{ transform:none; }
.confirm-card .ic{
  width:70px; height:70px; border-radius:50%; margin:0 auto 20px; background:var(--merlot); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
}
.confirm-card .ic svg{ width:32px; height:32px; }
.confirm-card h3{ font-size:1.4rem; }
.confirm-card p{ margin-top:12px; color:var(--ink-70); font-size:.92rem; line-height:1.6; }

/* ==========================================================================
   Business info / map
   ========================================================================== */
.info-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:34px; }
.info-card{
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(179,137,60,.2);
  box-shadow:0 20px 46px rgba(21,17,13,.08);
}
.info-card .map{ height:300px; width:100%; border:0; filter:saturate(.85); }
.info-body{ padding:30px; }
.hours-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.hours-table td{ padding:9px 0; font-size:.9rem; border-bottom:1px dashed rgba(21,17,13,.1); }
.hours-table td:last-child{ text-align:right; font-weight:700; color:var(--gold-dim); }
.contact-line{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(21,17,13,.08); }
.contact-line:last-child{ border-bottom:0; }
.contact-line .ic{ width:42px; height:42px; border-radius:12px; background:var(--beige); display:flex; align-items:center; justify-content:center; color:var(--merlot); flex:none; }
.contact-line .ic svg{ width:19px; height:19px; }
.contact-line b{ display:block; font-size:.94rem; }
.contact-line span{ font-size:.8rem; color:var(--ink-45); }
.info-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }

/* ==========================================================================
   Instagram
   ========================================================================== */
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ig-tile{
  aspect-ratio:1; border-radius:14px; overflow:hidden; position:relative;
}
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.ig-tile:hover img{ transform:scale(1.1); }
.ig-tile::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,17,13,.55), transparent 55%);
  opacity:0; transition:.3s;
}
.ig-tile:hover::after{ opacity:1; }
.ig-cta{ text-align:center; margin-top:34px; }
.ig-handle{ margin-top:10px; font-size:.85rem; color:var(--ink-45); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid rgba(21,17,13,.12); }
.faq-q{
  width:100%; background:none; border:none; padding:22px 4px; display:flex; align-items:center; justify-content:space-between;
  text-align:left; font-family:var(--display); font-size:1.08rem; color:var(--ink);
}
.faq-q .plus{ width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; flex:none; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--gold); transition:.3s var(--ease); }
.faq-q .plus::before{ width:11px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:11px; }
.faq-item.open .faq-q .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a div{ padding:0 4px 24px; color:var(--ink-70); font-size:.94rem; line-height:1.65; max-width:680px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-card{ background:var(--ink); color:var(--cream); border-radius:var(--radius-lg); padding:40px; }
.contact-card h3{ color:var(--white); font-size:1.5rem; }
.contact-card .contact-line b{ color:var(--white); }
.contact-card .contact-line span{ color:var(--cream-70); }
.contact-card .contact-line .ic{ background:rgba(230,199,126,.14); color:var(--gold-light); }
.social-row{ display:flex; gap:12px; margin-top:26px; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{ background:var(--ink); color:var(--cream-70); padding-top:80px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(230,199,126,.14); }
.foot-brand p{ margin-top:16px; font-size:.9rem; line-height:1.7; max-width:280px; }
.foot-col h4{ color:var(--gold-light); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.foot-col ul{ display:flex; flex-direction:column; gap:12px; }
.foot-col a{ font-size:.88rem; transition:color .25s; }
.foot-col a:hover{ color:var(--gold-light); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.78rem; flex-wrap:wrap; gap:12px; }
.foot-bottom a{ margin-left:18px; }

/* ==========================================================================
   Floating utilities
   ========================================================================== */
.floaters{ position:fixed; right:24px; bottom:24px; z-index:500; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 30px rgba(21,17,13,.3); transition: transform .3s var(--ease);
}
.fab:hover{ transform:translateY(-4px) scale(1.05); }
.fab svg{ width:24px; height:24px; }
.fab-book{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--ink); }
.fab-call{ background:var(--merlot); color:var(--gold-light); }
.fab-wa{ background:#25D366; color:#fff; }
.fab-top{
  width:44px; height:44px; background:var(--ink); color:var(--gold-light); border:1px solid rgba(230,199,126,.3);
  opacity:0; visibility:hidden; transform:translateY(10px);
}
.fab-top.show{ opacity:1; visibility:visible; transform:none; }
.fab-top svg{ width:18px; height:18px; }

.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(230,199,126,.35);
  display:flex; align-items:center; justify-content:center; color:var(--gold-light); background:none;
}
.theme-toggle svg{ width:17px; height:17px; }

/* ==========================================================================
   Dark mode
   ========================================================================== */
body.dark{ background: var(--ink); color: var(--cream); }
body.dark .section-alt{ background:#1c1610; }
body.dark .section-head p{ color:var(--cream-70); }
body.dark .why-card, body.dark .rev-card, body.dark .info-card{ background:#241c15; border-color:rgba(230,199,126,.16); color:var(--cream); }
body.dark .why-card p, body.dark .rev-card p{ color:var(--cream-70); }
body.dark .pill{ background:#241c15; color:var(--cream-70); }
body.dark .hours-table td{ border-color:rgba(230,199,126,.12); }
body.dark .about-copy p{ color:var(--cream-70); }
body.dark .faq-a div{ color:var(--cream-70); }
body.dark .faq-item{ border-color:rgba(230,199,126,.14); }
body.dark .faq-q{ color:var(--cream); }
body.dark .filter-btn{ color:var(--cream-70); }
body.dark .ba-cap{ color:var(--cream-70); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .about-grid, .appt-wrap, .contact-grid, .info-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .rev-track{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .ig-grid{ grid-template-columns:repeat(4,1fr); }
  .masonry{ column-count:2; }
  .ba-wrap{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  nav.main-nav{ display:none; }
  .hamburger{ display:flex; }
  .hero-meta{ gap:20px; }
  .why-grid, .svc-grid, .rev-track, .stats-grid{ grid-template-columns:1fr; }
  .masonry{ column-count:1; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  section{ padding:76px 0; }
  .foot-grid{ grid-template-columns:1fr; gap:32px; }
  .about-badge{ left:14px; bottom:14px; width:118px; height:118px; }
  .about-media img{ height:400px; }
}