/* =====================================================================
   HIDDEN SALON — single-file site
   Aesthetic: editorial luxury · white & cream · blush + taupe accents
   Spacing follows an 8px grid (--s = 8px multiples)
   ===================================================================== */

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* palette */
  --white:        #FFFFFF;
  --cream:        #FAFAFA;
  --cream-deep:   #F5F0EE;
  --blush:        #E8C5C1;
  --blush-soft:   #F3DEDB;
  --taupe:        #C9B8B0;
  --taupe-deep:   #A89488;
  --ink:          #3A322E;   /* warm charcoal body text */
  --ink-soft:     #6E635C;   /* muted body text */
  --hairline:     #EADFDA;

  /* type */
  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* spacing (8px grid) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --s12: 96px; --s16: 128px;

  /* misc */
  --radius: 18px;
  --shadow-soft: 0 18px 50px -28px rgba(58,50,46,.25);
  --shadow-card: 0 10px 40px -24px rgba(58,50,46,.30);
  --nav-h: 78px;
  --maxw: 1240px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---------- SHARED HELPERS ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s4); }
.eyebrow{
  font-size:.72rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--taupe-deep); font-weight:400; margin-bottom:var(--s2);
}
.section-title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.05;
  letter-spacing:.01em; color:var(--ink);
}
.section-title .accent{ font-style:italic; color:var(--taupe-deep); }
.lead{ color:var(--ink-soft); font-size:1.02rem; max-width:46ch; }
.divider{
  width:54px; height:1px; background:var(--blush);
  margin:var(--s3) 0; border:0;
}
.center{ text-align:center; }
.center .divider, .center .lead{ margin-inline:auto; }

section{ padding-block:var(--s16); position:relative; }

/* ---------- FADE-IN ON SCROLL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--body); font-weight:400; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:15px 34px; border-radius:999px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease, box-shadow .4s ease;
}
.btn-solid{ background:var(--blush); color:var(--ink); box-shadow:0 10px 26px -14px rgba(232,197,193,.9); }
.btn-solid:hover{ background:var(--ink); color:var(--white); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--taupe); }
.btn-ghost:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); transform:translateY(-2px); }

/* =====================================================================
   1. NAVBAR
   ===================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--white);
  box-shadow:0 1px 0 var(--hairline), 0 10px 30px -28px rgba(58,50,46,.4);
  transition:box-shadow .45s ease, height .45s ease;
}
.nav.scrolled{
  box-shadow:0 1px 0 var(--hairline), 0 12px 30px -24px rgba(58,50,46,.45);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }

/* logo placeholder */
.logo{
  display:flex; flex-direction:column; line-height:1; flex-shrink:0;
}
.logo .mark{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:1.7rem; letter-spacing:.02em; color:var(--ink);
}
.logo .sub{
  font-size:.55rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--taupe-deep); margin-top:5px;
}

.nav-links{ display:flex; align-items:center; gap:var(--s4); list-style:none; }
.nav-links a{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  position:relative; padding-block:6px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--blush); transition:width .4s ease;
}
.nav-links a:hover::after{ width:100%; }

.nav-cta{ flex-shrink:0; }
.mobile-cta{ display:none; }
.nav .btn{ padding:11px 26px; font-size:.74rem; }

/* hamburger */
.burger{ display:none; flex-direction:column; gap:5px; padding:8px; z-index:1100; }
.burger span{ width:24px; height:1.5px; background:var(--ink); transition:transform .4s ease, opacity .3s ease; }
.burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* =====================================================================
   2. HERO
   ===================================================================== */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden; background:var(--cream);
  padding-top:var(--nav-h);
}
/* full-bleed salon photo, softly blurred */
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg picture, .hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transform:scale(1.08); filter:blur(5px) brightness(1.04) saturate(.95);
}
/* misty cream veil — keeps the photo faint and the text crisp */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(64% 52% at 50% 42%, rgba(255,255,255,.46), transparent 74%),
    linear-gradient(180deg, rgba(250,250,250,.5), rgba(245,240,238,.46));
}
@keyframes drift{ to{ transform:translate3d(2%, -2%, 0) scale(1.08); } }

.hero-inner{ position:relative; z-index:2; }

/* hero logo placeholder */
.hero-logo .mark{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(3.6rem, 12vw, 7.5rem); line-height:.9; color:var(--ink);
  display:block;
}
.hero-logo .ph-note{
  display:inline-block; margin-top:var(--s2); font-size:.62rem; letter-spacing:.2em;
  color:var(--taupe-deep); opacity:.8; text-transform:uppercase;
}
.hero-tag-caps{
  font-size:clamp(.74rem,2.2vw,.95rem); letter-spacing:.55em; text-transform:uppercase;
  color:var(--taupe-deep); margin-top:var(--s3);
}
.hero-line{
  font-family:var(--body); font-weight:300; font-size:clamp(1rem,2.6vw,1.25rem);
  letter-spacing:.04em; color:var(--ink-soft); margin-top:var(--s4); max-width:44ch; margin-inline:auto;
}
.hero-ctas{ display:flex; gap:var(--s2); justify-content:center; margin-top:var(--s6); flex-wrap:wrap; }
.hero-meta{ margin-top:var(--s5); font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--taupe-deep); }

/* hero entrance animation */
.hero-anim{ opacity:0; transform:translateY(26px); animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.hero-anim.a1{ animation-delay:.15s; } .hero-anim.a2{ animation-delay:.35s; }
.hero-anim.a3{ animation-delay:.55s; } .hero-anim.a4{ animation-delay:.75s; } .hero-anim.a5{ animation-delay:.95s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:var(--s5); left:50%; transform:translateX(-50%); z-index:2;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--taupe-deep);
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.7;
}
.scroll-cue::after{ content:""; width:1px; height:38px; background:var(--taupe); animation:cue 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* =====================================================================
   3. ABOUT TEASER
   ===================================================================== */
.about{ background:var(--white); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:center; }
.about-photo{ position:relative; }
.about-photo .ph{ aspect-ratio:3/4; }
.about-photo::before{
  content:""; position:absolute; inset:18px -18px -18px 18px; z-index:0;
  border:1px solid var(--blush); border-radius:var(--radius);
}
.about-photo .ph{ position:relative; z-index:1; box-shadow:var(--shadow-soft); }
.about-photo .about-img{
  position:relative; z-index:1; width:100%; height:auto; aspect-ratio:1792/2048;
  object-fit:cover; object-position:center; border-radius:var(--radius);
  box-shadow:var(--shadow-soft); display:block;
}
.about-text p{ color:var(--ink-soft); margin-bottom:var(--s3); }
.readmore{
  display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--blush);
  padding-bottom:4px; transition:gap .35s ease, color .35s ease;
}
.readmore:hover{ gap:1em; color:var(--taupe-deep); }

/* =====================================================================
   IMAGE PLACEHOLDER (shared)
   ===================================================================== */
.ph{
  background:linear-gradient(135deg, var(--cream-deep), #EFE6E2);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--taupe-deep); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  text-align:center; padding:var(--s2); border:1px solid var(--hairline);
}

/* =====================================================================
   4. SERVICES
   ===================================================================== */
.services{ background:var(--cream); }
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s8);
}
.svc{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:var(--s5) var(--s4) var(--s4); box-shadow:var(--shadow-card);
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .5s ease, box-shadow .5s ease;
  display:flex; flex-direction:column;
}
.svc:hover{ transform:translateY(-6px) scale(1.012); border-color:var(--blush); box-shadow:0 26px 60px -34px rgba(58,50,46,.4); }
.svc-icon{
  width:46px; height:46px; color:var(--taupe-deep); margin-bottom:var(--s3);
  stroke:currentColor; stroke-width:1.1; fill:none;
}
.svc h3{ font-family:var(--display); font-weight:500; font-size:1.55rem; letter-spacing:.01em; }
.svc p{ color:var(--ink-soft); font-size:.92rem; margin-top:var(--s1); flex-grow:1; }
.svc .book-link{
  margin-top:var(--s3); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .3s ease, gap .3s ease;
}
.svc .book-link:hover{ border-color:var(--blush); gap:1em; }
.svc-price{ margin-top:var(--s2); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-deep); }
.svc.feature{ background:linear-gradient(160deg, var(--blush-soft), var(--white)); border-color:var(--blush); }

/* =====================================================================
   5. GALLERY
   ===================================================================== */
.gallery{ background:var(--white); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s8);
}
.gal{
  position:relative; overflow:hidden; border-radius:14px; aspect-ratio:4/3; cursor:pointer;
}
.gal .ph{ width:100%; height:100%; border-radius:14px; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.gal:hover .ph{ transform:scale(1.06); }
.gal-overlay{
  position:absolute; inset:0; background:rgba(232,197,193,.42);
  opacity:0; transition:opacity .5s ease; display:flex; align-items:center; justify-content:center;
  backdrop-filter:saturate(1.1);
}
.gal:hover .gal-overlay{ opacity:1; }
.gal-overlay svg{ width:32px; height:32px; stroke:var(--white); stroke-width:1.4; fill:none;
  transform:scale(.7); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.gal:hover .gal-overlay svg{ transform:scale(1); }
/* taller tiles for editorial rhythm */
.gal.tall{ aspect-ratio:4/5.4; }
.gallery .load-wrap{ display:flex; justify-content:center; margin-top:var(--s6); }
.gallery .hidden-row{ display:none; }
.gallery .hidden-row.show{ display:block; }

/* =====================================================================
   6. BEFORE & AFTER
   ===================================================================== */
.transform{ background:var(--cream); }
.ba-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s8);
}
.ba-card{ display:flex; flex-direction:column; gap:var(--s2); }
.ba-slider{
  --pos:50%;
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card); user-select:none; touch-action:none; cursor:ew-resize;
  border:1px solid var(--hairline);
}
/* AFTER layer (warm, full colour) sits beneath */
.ba-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe-deep);
}
.ba-after{ background:linear-gradient(150deg, var(--blush-soft), #EFE2DC); }
/* BEFORE layer (greyed) on top, clipped by handle position */
.ba-before{ background:linear-gradient(150deg,#E4E0DE,#D7D0CC); filter:grayscale(.6);
  clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag{ position:absolute; top:14px; padding:5px 12px; border-radius:999px; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; background:rgba(255,255,255,.85); color:var(--ink); z-index:3; }
.ba-tag.l{ left:14px; } .ba-tag.r{ right:14px; }
/* divider + handle */
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos); width:1px; background:var(--blush); z-index:4;
  transform:translateX(-.5px);
}
.ba-knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--white);
  box-shadow:0 6px 18px -6px rgba(58,50,46,.5); display:flex; align-items:center; justify-content:center;
  color:var(--taupe-deep);
}
.ba-knob svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; }
.ba-label{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); text-align:center; }

/* =====================================================================
   7. BOOKING (Ovatu embed)
   ===================================================================== */
.booking{ background:var(--white); text-align:center; }
.booking-card{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:var(--shadow-soft); padding:clamp(var(--s2), 3vw, var(--s5));
  max-width:900px; margin:var(--s8) auto 0;
}
.booking-card iframe{
  width:100%; min-height:700px; border:0; border-radius:12px; display:block; background:var(--cream-deep);
}
.booking-fallback{ margin-top:var(--s3); font-size:.85rem; color:var(--ink-soft); }
.booking-fallback a{ color:var(--taupe-deep); border-bottom:1px solid var(--blush); }

/* =====================================================================
   8. REVIEWS
   ===================================================================== */
.reviews{ background:linear-gradient(180deg, var(--blush-soft), var(--cream-deep)); }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s8); }
.review{
  background:var(--white); border-radius:var(--radius); padding:var(--s5) var(--s4);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.stars{ color:var(--blush); letter-spacing:.2em; font-size:1.05rem; margin-bottom:var(--s2); }
.review blockquote{ font-family:var(--display); font-style:italic; font-size:1.28rem; line-height:1.45; color:var(--ink); flex-grow:1; }
.review .who{ margin-top:var(--s3); display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); }
.review .name{ font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; }
.review .svc-tag{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe-deep); }
.reviews .more{ text-align:center; margin-top:var(--s6); font-size:.85rem; color:var(--ink-soft); }
.reviews .more a{ color:var(--taupe-deep); border-bottom:1px solid var(--blush); }

/* =====================================================================
   9. CONTACT & FIND US
   ===================================================================== */
.contact{ background:var(--white); }
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s10); align-items:start; }
.contact-info .line{ display:flex; gap:var(--s2); align-items:flex-start; margin-bottom:var(--s3); }
.contact-info .line svg{ width:20px; height:20px; stroke:var(--taupe-deep); stroke-width:1.3; fill:none; flex-shrink:0; margin-top:3px; }
.contact-info .line a, .contact-info .line span{ color:var(--ink-soft); font-size:.96rem; }
.contact-info .line a:hover{ color:var(--ink); }

.hours{ margin-top:var(--s5); }
.hours h4{ font-family:var(--display); font-size:1.5rem; font-weight:500; margin-bottom:var(--s2); }
.hours-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--hairline);
  font-size:.9rem; color:var(--ink-soft); }
.hours-row span:first-child{ letter-spacing:.06em; }
.hours-row.closed span:last-child{ color:var(--taupe-deep); font-style:italic; }

.socials{ display:flex; gap:var(--s2); margin-top:var(--s5); }
.socials a{
  width:42px; height:42px; border:1px solid var(--taupe); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all .4s ease;
}
.socials a:hover{ background:var(--blush); border-color:var(--blush); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; fill:currentColor; }

.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--hairline); }
.map-wrap iframe{ width:100%; height:520px; border:0; display:block; filter:grayscale(.25) contrast(.95); }

/* =====================================================================
   10. FOOTER
   ===================================================================== */
.footer{ background:var(--cream-deep); text-align:center; padding-block:var(--s10) var(--s6); }
.footer .logo{ align-items:center; margin-bottom:var(--s4); }
.footer-links{ display:flex; gap:var(--s4); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s3); }
.footer-links a{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--ink); }
.footer .copy{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; }
.footer .place{ font-size:.66rem; color:var(--taupe-deep); letter-spacing:.22em; text-transform:uppercase; margin-top:var(--s2); }


/* ---------- LOGO (vector) ---------- */
.logo-svg{ height:38px; width:auto; color:var(--ink); display:block; transition:color .4s ease; }
.hero-logo-svg{ width:min(520px,82vw); height:auto; aspect-ratio:1061.5/398.5; color:var(--ink); display:block; margin-inline:auto; }
.footer-logo-svg{ width:180px; height:auto; aspect-ratio:1061.5/398.5; color:var(--ink); display:block; margin-inline:auto; }
@media (max-width:860px){ .logo-svg{ height:32px; } .footer-logo-svg{ width:150px; } }

/* =====================================================================
   4b. PRICE LIST / MENU
   ===================================================================== */
.menu{ background:var(--white); }
.menu-cols{
  margin-top:var(--s8);
  column-count:2; column-gap:var(--s10);
}
.menu-group{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin-bottom:var(--s8);
}
.menu-cat{
  font-family:var(--display); font-weight:500; font-size:1.9rem; letter-spacing:.02em;
  color:var(--ink); padding-bottom:var(--s2); margin-bottom:var(--s3);
  border-bottom:1px solid var(--blush);
}
.menu-cat em{ font-style:italic; font-size:1.1rem; color:var(--taupe-deep); letter-spacing:.04em; }
.menu-item{ margin-bottom:var(--s3); }
.menu-item.sub{ margin-bottom:var(--s2); padding-left:var(--s3); }
.mi-head{ display:flex; align-items:baseline; gap:var(--s2); }
.mi-name{ font-size:1rem; letter-spacing:.04em; color:var(--ink); white-space:normal; }
.menu-item.sub .mi-name{ font-size:.9rem; color:var(--ink-soft); }
.mi-name em{ font-style:italic; color:var(--taupe-deep); }
/* dotted leader between name and price */
.mi-head::after{
  content:""; flex:1 1 auto; order:1;
  border-bottom:1px dotted var(--taupe); transform:translateY(-3px); min-width:14px;
}
.mi-price{ order:2; font-size:1rem; letter-spacing:.06em; color:var(--ink); white-space:nowrap; }
.menu-item.sub .mi-price{ font-size:.9rem; color:var(--ink-soft); }
.mi-desc{ font-size:.86rem; color:var(--ink-soft); margin-top:6px; max-width:46ch; }
.menu-note{
  font-size:.74rem; color:var(--taupe-deep); letter-spacing:.04em; margin-top:var(--s3);
  max-width:54ch; margin-inline:auto;
}


   ===================================================================== */
@media (max-width:1024px){
  .about-grid{ gap:var(--s8); }
  .contact-grid{ gap:var(--s6); }
}

@media (max-width:860px){
  :root{ --nav-h:66px; }
  section{ padding-block:var(--s12); }
  .wrap{ padding-inline:var(--s3); }

  /* mobile nav */
  .burger{ display:flex; }
  .nav-cta{ display:none; }
  .mobile-cta{ display:block; }
  .hero{ min-height:90vh; }
  .hero-bg img{ filter:blur(4px) brightness(1.04) saturate(.95); }
  .nav-links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:var(--s5);
    background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
    transform:translateX(100%); transition:transform .55s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1rem; }
  .nav-links .mobile-cta{ margin-top:var(--s2); }

  /* stack layouts */
  .about-grid{ grid-template-columns:1fr; gap:var(--s6); }
  .about-photo{ order:-1; max-width:420px; margin-inline:auto; width:100%; }
  .about-photo::before{ inset:12px -12px -12px 12px; }
  .services-grid{ grid-template-columns:1fr; }
  .menu-cols{ column-count:1; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .ba-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .reviews-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .map-wrap iframe{ height:380px; }
}

@media (max-width:420px){
  .wrap{ padding-inline:20px; }
  .btn{ padding:14px 26px; }
  .hero-ctas{ flex-direction:column; width:100%; max-width:280px; margin-inline:auto; }
  .hero-ctas .btn{ width:100%; }
  .gallery-grid{ gap:10px; }
}

/* =====================================================================
   11. REVIEWS PAGE (dedicated)
   ===================================================================== */
.reviews-page{ background:linear-gradient(180deg, var(--blush-soft), var(--cream-deep)); }
.reviews-page .page-head{ text-align:center; max-width:60ch; margin-inline:auto; }
.reviews-page .stat{
  display:inline-flex; align-items:center; gap:.5em; margin-top:var(--s3);
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe-deep);
}
.reviews-page .stat .big{ color:var(--blush); font-size:1.05rem; letter-spacing:.15em; }
.rv-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s8);
  align-items:start;
}
.rv-grid .review blockquote{ font-size:1.12rem; line-height:1.5; }
.review-date{
  margin-top:var(--s2); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe-deep);
}
.review .reply{
  margin-top:var(--s3); padding:var(--s2) var(--s3); background:var(--cream-deep);
  border-radius:12px; border-left:2px solid var(--blush);
}
.review .reply .reply-label{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-deep);
  display:block; margin-bottom:6px;
}
.review .reply p{ font-size:.92rem; color:var(--ink-soft); font-style:italic; }
.reviews-page .page-foot{ text-align:center; margin-top:var(--s10); }
.reviews-page .page-foot .note{ font-size:.8rem; color:var(--ink-soft); max-width:52ch; margin:0 auto var(--s4); }
@media (max-width:1024px){ .rv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rv-grid{ grid-template-columns:1fr; } }

/* ---------- FOOTER SOCIAL ICONS ---------- */
.footer-socials{ display:flex; gap:var(--s2); justify-content:center; margin-bottom:var(--s4); }
.footer-socials a{ width:40px; height:40px; border:1px solid var(--taupe); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all .4s ease; }
.footer-socials a:hover{ background:var(--blush); border-color:var(--blush); transform:translateY(-3px); }
.footer-socials svg{ width:17px; height:17px; fill:currentColor; }