/* ══════════════════════════════════════════════════════════════════════════
   Aziza African Hair Braiding — style.css
   v2.0 — layout fixes + responsive rebuild + "subtle luxury" motion layer
   Drop-in replacement for assets/css/style.css (no HTML changes required)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --gold:   #d4bc89;
  --gold2:  #e0cda0;
  --gold3:  #f0e0bd;
  --dark:   #181d25;
  --darker: #12141c;
  --dark2:  #1a1c26;
  --dark3:  #20242e;
  --white:  #ffffff;
  --off:    #f5f3ef;
  --text:   #c9c9c9;
  --muted:  #888ea0;
  --border: rgba(198,172,115,0.18);
  --border2:rgba(198,172,115,0.5);
  --radius-pill: 50px;
  --font-h:   'Philosopher', 'Georgia', serif;
  --font-b:   'Space Grotesk', sans-serif;
  --section-y:  clamp(56px, 7vw, 110px);
  --gutter:     clamp(18px, 4vw, 24px);
  --gap-lg:     clamp(2.5rem, 5vw, 5rem);
  --gap-md:     clamp(1.5rem, 3vw, 3rem);
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-lux:  cubic-bezier(.16,1,.3,1);
  --dur:       .45s;
  --dur-slow:  .9s;
  --nav-h: 80px;
  --nav-h-sm: 64px;
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  background: var(--dark);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.85;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(198,172,115,.15);
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; transition:color .3s; }
ul { list-style:none; }
::selection { background: var(--gold); color: var(--darker); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--darker); }
::-webkit-scrollbar-thumb { background: rgba(198,172,115,.35); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
.container { max-width:1260px; margin:0 auto; padding:0 var(--gutter); }
section { padding: var(--section-y) 0; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5 { font-family:var(--font-h); color:var(--white); line-height:1.15; }
.eyebrow {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-b); font-size:0.75rem;
  font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:0.75rem;
}
.eyebrow::before { content:''; display:inline-block; width:30px; height:1px; background:var(--gold); flex-shrink:0; transition:width .6s var(--ease-lux); }
.section-hd:hover .eyebrow::before, .eyebrow:hover::before { width:52px; }
.sec-title { font-size:clamp(2rem,3.5vw,2.8rem); margin-bottom:1rem; }
.sec-title em, .sec-title span { font-style:italic; color:var(--gold); }
.sec-title em, .sec-title span,
.hero-title em, .hero-title span {
  background:linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, var(--gold3) 50%, var(--gold) 62%, var(--gold) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation: sheenText 7s var(--ease-out) 1.2s infinite;
}
@keyframes sheenText { 0%,55% { background-position:130% 0; } 100% { background-position:-30% 0; } }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-b); font-size:0.8rem;
  font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  padding:13px 36px; border-radius:var(--radius-pill);
  transition:background .35s var(--ease-out), color .35s var(--ease-out),
             border-color .35s var(--ease-out), transform .35s var(--ease-lux),
             box-shadow .35s var(--ease-out);
  cursor:pointer; border:none; position:relative; overflow:hidden;
  min-height:46px; will-change:transform;
}
.btn::before {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg); transition:left .75s var(--ease-lux); pointer-events:none;
}
.btn:hover::before { left:150%; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn-sm { padding:9px 22px; font-size:0.7rem; gap:10px; min-height:36px; }
.btn-sm .btn-icon { width:22px; height:22px; font-size:0.65rem; }
.btn-icon {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
  transition:background .3s, color .3s, transform .45s var(--ease-lux);
}
.btn:hover .btn-icon { transform:translateX(4px) rotate(-8deg); }
.btn-white { background:var(--white); color:var(--darker); font-family:'Philosopher', serif; font-size:0.95rem; font-weight:700; letter-spacing:0.01em; text-transform:none; }
.btn-white .btn-icon { background:var(--gold); color:var(--darker); }
.btn-white:hover { background:var(--gold); color:var(--darker); box-shadow:0 12px 34px rgba(198,172,115,.28); }
.btn-white:hover .btn-icon { background:var(--white); color:var(--darker); }
.btn-gold { background:var(--gold); color:var(--darker); }
.btn-gold:hover { background:var(--gold2); color:var(--darker); box-shadow:0 12px 34px rgba(198,172,115,.28); }
.btn-outline-gold { background:transparent; color:var(--gold); border:1.5px solid rgba(198,172,115,0.5); }
.btn-outline-gold .btn-icon { background:var(--gold); color:var(--darker); }
.btn-outline-gold:hover { background:var(--gold); color:var(--darker); box-shadow:0 12px 34px rgba(198,172,115,.25); }
.btn-outline-gold:hover .btn-icon { background:var(--darker); color:var(--gold); }
.btn-outline-white { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.4); }
.btn-outline-white:hover { border-color:var(--gold); color:var(--gold); }

/* ── OVERLAY + DRAWER ── */
.overlay { position:fixed; inset:0; background:rgba(13,16,23,0.8); z-index:1200; opacity:0; pointer-events:none; transition:opacity .4s; backdrop-filter:blur(3px); }
.overlay.open { opacity:1; pointer-events:all; }
.drawer { position:fixed; top:0; right:-380px; width:340px; max-width:88vw; height:100%; background:var(--darker); z-index:1300; padding:60px 32px 40px; transition:right .5s var(--ease-lux); overflow-y:auto; -webkit-overflow-scrolling:touch; border-left:1px solid var(--border); overscroll-behavior:contain; }
.drawer.open { right:0; }
.drawer-close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--white); font-size:1.5rem; cursor:pointer; line-height:1; width:44px; height:44px; display:flex; align-items:center; justify-content:center; transition:color .3s, transform .3s; }
.drawer-close:hover { color:var(--gold); transform:rotate(90deg); }
.drawer-logo { margin-bottom:2.5rem; }
.drawer-logo img { height:40px; width:auto; object-fit:contain; }
.drawer-nav { list-style:none; margin-bottom:2.5rem; }
.drawer-nav li { border-bottom:1px solid var(--border); }
.drawer-nav li:first-child { border-top:1px solid var(--border); }
.drawer-nav a { display:block; padding:15px 0; font-family:var(--font-h); font-size:1.15rem; color:var(--white); letter-spacing:0.02em; transition:all .3s; position:relative; }
.drawer-nav a::after { content:'→'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:0.9rem; color:var(--gold); opacity:0; transition:opacity .3s; }
.drawer-nav a:hover { color:var(--gold); padding-left:8px; }
.drawer-nav a:hover::after { opacity:1; }
.drawer-contact { border-top:1px solid var(--border); padding-top:2rem; }
.drawer-contact a { display:block; color:var(--text); font-size:0.9rem; margin-bottom:0.5rem; padding:4px 0; }
.drawer-contact a:hover { color:var(--gold); }
.drawer-social { display:flex; gap:0.7rem; margin-top:1.5rem; }
.drawer-social a { width:40px; height:40px; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:0.8rem; border-radius:50%; transition:all .3s; }
.drawer-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--darker); }

/* ── NAVBAR ── */
#navbar { position:fixed; top:0; left:0; right:0; z-index:1100; padding:0; background:transparent; transition:background .45s, box-shadow .35s; }
#navbar.scrolled { background:rgba(13,16,23,0.97); box-shadow:0 2px 30px rgba(0,0,0,.5); backdrop-filter:blur(12px); }
#navbar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--border); pointer-events:none; opacity:0; transition:opacity .45s; }
#navbar.scrolled::after { opacity:1; }
#navbar .nav-progress { position:absolute; bottom:0; left:0; height:2px; width:100%; transform:scaleX(var(--scroll-progress,0)); transform-origin:left; background:linear-gradient(90deg,var(--gold),var(--gold3)); opacity:0; transition:opacity .4s; pointer-events:none; }
#navbar.scrolled .nav-progress { opacity:1; }
.nav-container { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:var(--nav-h); gap:1rem; }
#navbar.scrolled .nav-container { min-height:var(--nav-h-sm); }
.nav-links > ul { display:flex; align-items:center; gap:0; list-style:none; }
.nav-links > ul > li { position:relative; }
.nav-links > ul > li > a { display:flex; align-items:center; gap:5px; font-family:var(--font-b); font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); padding:28px 14px; transition:color .3s; position:relative; white-space:nowrap; }
.nav-links > ul > li > a i { font-size:0.55rem; margin-top:1px; transition:transform .3s; }
.nav-links > ul > li:hover > a i { transform:rotate(180deg); }
.nav-links > ul > li > a::after { content:''; position:absolute; bottom:20px; left:14px; right:14px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-lux); }
.nav-links > ul > li > a:hover, .nav-links > ul > li > a:hover i { color:var(--gold); }
.nav-links > ul > li > a:hover::after { transform:scaleX(1); }
#navbar.scrolled .nav-links > ul > li > a { padding:20px 14px; }
#navbar.scrolled .nav-links > ul > li > a::after { bottom:12px; }

/* Dropdown */
.dropdown { display:block !important; flex-direction:column !important; position:absolute; top:100%; left:0; min-width:210px; max-width:240px; background:rgba(13,16,23,.97); border:1px solid var(--border); padding:0.5rem 0; list-style:none; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s var(--ease-lux), visibility .3s; backdrop-filter:blur(12px); z-index:200; box-shadow:0 22px 50px rgba(0,0,0,.45); }
.dropdown li, .nav-links .dropdown li { display:block !important; width:100% !important; float:none !important; flex:none !important; }
.has-drop:hover > .dropdown, .has-drop:focus-within > .dropdown { opacity:1; visibility:visible; pointer-events:all; transform:translateY(0); }
.dropdown li a, .nav-links .dropdown li a { display:block !important; padding:10px 20px; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); font-weight:500; transition:all .3s; white-space:nowrap; width:100%; }
.dropdown li a:hover { color:var(--gold); padding-left:28px; background:rgba(198,172,115,.06); }
.nav-links > ul > li:nth-last-child(-n+2) > .dropdown { left:auto; right:0; }
.nav-links > ul > li:nth-last-child(-n+2) .dropdown--sub { left:auto !important; right:100% !important; transform:translateX(-8px) !important; }
.nav-links > ul > li:nth-last-child(-n+2) .has-drop--sub:hover > .dropdown--sub { transform:translateX(0) !important; }
.has-drop--sub { position:relative; }
.dropdown--sub { position:absolute !important; top:0 !important; left:100% !important; min-width:170px; opacity:0; pointer-events:none; transform:translateX(8px) !important; transition:all .3s; }
.has-drop--sub:hover > .dropdown--sub { opacity:1; pointer-events:all; transform:translateX(0) !important; }

.nav-logo { display:flex; justify-content:center; }
.nav-logo img { height:64px; width:auto; object-fit:contain; transition:height .35s; background:none; padding:0; }
#navbar.scrolled .nav-logo img { height:50px; }
.nav-right { display:flex; align-items:center; gap:1rem; justify-content:flex-end; }
.nav-phone-link { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--white); font-weight:500; white-space:nowrap; }
.nav-phone-small { color:var(--muted); font-weight:400; }
.nav-phone-num { color:var(--white); letter-spacing:.02em; }
.nav-phone-link:hover, .nav-phone-link:hover .nav-phone-num { color:var(--gold); }
.nav-cta { padding:10px 22px; font-size:0.72rem; border:2px solid var(--gold); border-radius:var(--radius-pill); color:var(--white); letter-spacing:.06em; transition:all .3s; }
.nav-cta:hover { background:var(--gold); border-color:var(--gold); color:var(--darker); }
.hamburger { display:none; flex-direction:column; gap:5px; align-items:center; justify-content:center; cursor:pointer; z-index:1400; background:none; border:none; width:44px; height:44px; padding:0; }
.hamburger span { display:block; width:26px; height:1.5px; background:var(--white); transition:all .35s var(--ease-lux); }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── HERO ── */
.hero { height:100vh; height:100svh; min-height:600px; position:relative; overflow:hidden; background:var(--darker); }
.hero-swiper { width:100%; height:100%; }
.hero-swiper .swiper-slide { position:relative; overflow:hidden; height:100%; }
.hero-swiper .swiper-wrapper { height:100%; }
/* Own-CSS fallback so the hero fills its container and paints as soon as
   our stylesheet + the hero image are ready — without waiting on the
   third-party Swiper library's own CSS/JS to arrive and lay it out. Lighthouse's
   LCP breakdown was showing ~2s of "Element render delay" here because the
   slide had no height until Swiper's async CSS/JS ran. Swiper still takes
   over for pagination/autoplay/transitions once it loads; this just makes
   sure the first paint doesn't depend on it. */
.slide-bg { position:absolute; inset:-5%; background-size:cover; background-position:center; animation:kb 16s ease-in-out infinite alternate; }
.slide-bg img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes kb { from { transform:scale(1.0) translate(0,0); } to { transform:scale(1.08) translate(-1%, -.5%); } }
.slide-overlay { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(13,16,23,.20) 0%, rgba(13,16,23,.24) 38%, rgba(13,16,23,.42) 100%), radial-gradient(ellipse at 50% 52%, rgba(13,16,23,.26) 0%, rgba(13,16,23,0) 62%); }
.hero-content { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter); }
.hero-eyebrow { font-family:var(--font-b); font-size:0.72rem; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--white); text-shadow:0 1px 12px rgba(0,0,0,.6); margin-bottom:1.5rem; display:flex; align-items:center; gap:12px; justify-content:center; opacity:0; animation:fadeUp .9s var(--ease-lux) .3s forwards; }
.hero-eyebrow::before, .hero-eyebrow::after { content:''; display:inline-block; width:36px; height:1px; background:var(--gold); }
.hero-title { font-family:var(--font-h); font-size:clamp(2.6rem,7vw,6.5rem); color:var(--white); line-height:1.05; margin-bottom:2.5rem; max-width:900px; text-shadow:0 2px 40px rgba(0,0,0,.45); opacity:0; animation:heroTitleScaleIn 1.1s var(--ease-lux) .55s forwards; }
@keyframes heroTitleScaleIn {
  0%   { opacity:0; transform:scale(.93) translateY(16px); letter-spacing:.09em; }
  100% { opacity:1; transform:scale(1) translateY(0); letter-spacing:normal; }
}
.hero-eyebrow .type-cursor { display:inline-block; width:2px; height:0.85em; background:var(--gold); margin-left:1px; vertical-align:-2px; animation:eyebrowBlink 1s step-end infinite; }
@keyframes eyebrowBlink { 50% { opacity:0; } }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; opacity:0; animation:fadeUp .9s var(--ease-lux) .8s forwards; }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.hero-scroll-cue { position:absolute; left:50%; bottom:72px; z-index:4; transform:translateX(-50%); width:22px; height:36px; border:1px solid rgba(255,255,255,.4); border-radius:14px; pointer-events:none; opacity:0; animation:fadeUp .9s ease 1.4s forwards; }
.hero-scroll-cue::after { content:''; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px; background:var(--gold); transform:translateX(-50%); animation:cueDrop 1.9s var(--ease-out) infinite; }
@keyframes cueDrop { 0% { opacity:0; transform:translate(-50%,0); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-50%,13px); } }
.hero-arrow { position:absolute; top:50%; z-index:5; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:0.9rem; cursor:pointer; transition:all .3s; backdrop-filter:blur(4px); }
.hero-arrow:hover { background:var(--gold); border-color:var(--gold); color:var(--darker); }
.hero-prev { left:30px; }
.hero-next { right:30px; }
.hero-swiper .swiper-pagination { bottom:30px !important; }
.swiper-pagination-bullet {
  background:rgba(255,255,255,.4) !important; opacity:1 !important;
  width:8px; height:8px; margin:0 10px !important; position:relative;
}
/* Invisible expanded hit area — keeps the dot small visually but gives it
   a ~24x24px tappable zone, centered on the dot, to meet touch-target
   size/spacing guidelines without changing how the pagination looks. */
.swiper-pagination-bullet::before {
  content:''; position:absolute; top:50%; left:50%;
  width:24px; height:24px; transform:translate(-50%,-50%);
}
.swiper-pagination-bullet-active { background:var(--gold) !important; width:28px !important; border-radius:4px !important; }

/* ── ABOUT ── */
.about-section { background:var(--dark); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:start; }
.about-left { display:flex; flex-direction:column; position:sticky; top:calc(var(--nav-h-sm) + 40px); align-self:start; }
.about-heading { order:-1; margin-bottom:2rem; }
.about-heading .eyebrow { margin-bottom:0.5rem; }
.about-heading .sec-title { font-size:clamp(1.8rem,2.8vw,2.4rem); }
.about-img-small { width:100%; height:auto; max-width:340px; aspect-ratio:370/435; object-fit:cover; object-position:top; margin-bottom:0; border-radius:150px 150px 12px 12px; transition:transform 1.1s var(--ease-lux), filter .6s; }
.about-left:hover .about-img-small { transform:translateY(-6px); }
.about-right { position:relative; }
.about-text { margin-bottom:2rem; }
.about-text p { color:var(--white); margin-bottom:0.9rem; }
.about-checklist { margin:1.5rem 0 2.5rem; display:flex; flex-direction:column; gap:0.8rem; }
.about-checklist li { display:flex; align-items:center; gap:12px; font-size:0.95rem; color:var(--white); }
.check-icon { width:22px; height:22px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:0.65rem; flex-shrink:0; transition:background .3s, color .3s, transform .4s var(--ease-lux); }
.about-checklist li:hover .check-icon { background:var(--gold); color:var(--darker); transform:scale(1.12); }
.about-img-big { width:100%; height:auto; aspect-ratio:445/518; object-fit:cover; object-position:top; border-radius:180px 180px 12px 12px; display:block; margin-top:2.5rem; }

/* ── FEATURES ── */
.features-section { background:var(--darker); padding:0; }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.feat-card { position:relative; overflow:hidden; }
.feat-card-img { width:100%; height:auto; aspect-ratio:4/3; min-height:220px; max-height:400px; object-fit:cover; object-position:top; display:block; transition:transform .8s var(--ease-lux), filter .6s; filter:brightness(.82); }
.feat-card:hover .feat-card-img { transform:scale(1.07); filter:brightness(.6); }
.feat-card-body { position:absolute; bottom:0; left:0; right:0; padding:1.5rem; background:linear-gradient(to top,rgba(13,16,23,.95) 0%,rgba(13,16,23,.45) 60%,transparent 100%); }
.feat-card-title { font-family:var(--font-h); font-size:1.2rem; color:var(--white); font-weight:600; transition:color .3s, transform .45s var(--ease-lux); display:inline-block; }
.feat-card-title::after { content:''; display:block; height:1px; margin-top:8px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-lux); }
.feat-card:hover .feat-card-title { color:var(--gold); transform:translateY(-2px); }
.feat-card:hover .feat-card-title::after { transform:scaleX(1); }
.feat-card-desc { font-family:var(--font-b); font-size:0.82rem; color:var(--text); line-height:1.55; margin-top:8px; max-width:230px; }

/* ── DESIGN REFINEMENT: blur-to-sharp scroll reveal ── */
.reveal-blur {
  opacity:0; filter:blur(6px); transform:translateY(16px);
  transition:opacity .75s var(--ease-lux), filter .75s var(--ease-lux), transform .75s var(--ease-lux);
}
.reveal-blur.is-visible { opacity:1; filter:blur(0); transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-blur { opacity:1; filter:none; transform:none; transition:none; }
}

/* ── TESTIMONIAL ── */
.testi-section { position:relative; background:var(--darker); padding:clamp(64px,8vw,110px) 0; }
@media (hover:none) { .testi-section { background-attachment:scroll; } }
.testi-section::before { content:''; position:absolute; inset:0; background:rgba(13,16,23,.82); }
.testi-inner { position:relative; z-index:1; }
.testi-stars-inline { color:var(--gold); font-size:0.85rem; letter-spacing:2px; margin-right:8px; }
.testi-cta { text-align:center; margin-top:3rem; }
.testi-cta .btn { max-width:520px; }
.testi-cta .btn-label { text-align:center; }
.testi-rating { text-align:center; font-size:0.9rem; color:var(--muted); }
.testi-rating strong { color:var(--gold); }

.review-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.review-card { background:rgba(255,255,255,.04); border:1px solid rgba(198,172,115,0.22); border-radius:16px; padding:1.75rem 1.5rem; display:flex; flex-direction:column; backdrop-filter:blur(2px); transition:transform .4s var(--ease-lux), border-color .4s; }
.review-card:hover { transform:translateY(-4px); border-color:rgba(198,172,115,0.5); }
.review-stars { color:var(--gold); font-size:0.85rem; letter-spacing:2px; margin-bottom:0.9rem; }
.review-text { font-family:var(--font-b); font-size:0.92rem; color:var(--white); line-height:1.7; flex-grow:1; margin-bottom:1.25rem; }
.review-author { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding-top:1rem; border-top:1px solid rgba(198,172,115,0.18); }
.review-name { font-family:var(--font-h); font-size:0.95rem; color:var(--gold); }
.review-source { font-size:0.72rem; color:var(--muted); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.review-source .google-g-icon { flex-shrink:0; }
@media (max-width:1100px) { .review-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .review-grid { grid-template-columns:1fr; } }

/* ── SERVICES ── */
.services-section { background:var(--dark2); }
.services-grid { display:grid; grid-template-columns:5fr 7fr; gap:0; align-items:stretch; }
.svc-img-col { position:relative; overflow:hidden; min-height:560px; }
.svc-swiper { position:absolute; inset:0; width:100%; height:100%; }
.svc-swiper .swiper-wrapper { height:100%; }
.svc-swiper .swiper-slide { height:100%; }
.svc-slide-img { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center top; display:block; }
.svc-list-col { padding:clamp(36px,5vw,60px) clamp(24px,4vw,50px); display:flex; flex-direction:column; justify-content:center; }
.svc-header { margin-bottom:2rem; }
.svc-main-title { font-size:clamp(2.1rem,3.6vw,2.9rem); }
.svc-list { flex:0 1 auto; }
.svc-item { display:flex; align-items:center; gap:1.1rem; padding:13px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:padding .35s var(--ease-lux), background .35s; position:relative; }
.svc-item:first-child { border-top:1px solid var(--border); }
.svc-item.active, .svc-item:hover { padding-left:12px; background:rgba(198,172,115,.04); }
.svc-num { font-family:var(--font-h); font-size:1.3rem; color:var(--muted); transition:color .3s; flex-shrink:0; width:40px; }
.svc-item.active .svc-num, .svc-item:hover .svc-num { color:var(--gold); }
.svc-title-wrap { flex:1; }
.svc-title { font-family:var(--font-h); font-size:clamp(1.5rem,2.2vw,1.9rem); color:var(--white); font-weight:600; display:block; transition:color .3s; }
.svc-cat { font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:3px; display:block; }
.svc-item.active .svc-title, .svc-item:hover .svc-title { color:var(--gold); }
.svc-arrow { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:0.75rem; flex-shrink:0; transition:all .35s var(--ease-lux); }
.svc-item.active .svc-arrow, .svc-item:hover .svc-arrow { background:var(--gold); border-color:var(--gold); color:var(--darker); transform:rotate(-45deg); }

/* ── STATS ── */
.stats-section { background:var(--darker); padding:clamp(48px,6vw,70px) 0; border-top:1px solid var(--border); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { text-align:center; padding:2rem 1rem; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-label { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:0.75rem; }
.stat-num { font-family:var(--font-h); font-size:clamp(2.4rem,4.5vw,4rem); color:var(--gold); font-weight:700; line-height:1; display:flex; align-items:baseline; justify-content:center; gap:2px; font-variant-numeric:tabular-nums; }
.stat-suf { font-size:1.8rem; color:var(--gold); }

/* ── DESIGN REFINEMENT: compact stats band inside testimonials ── */
.testi-stats { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); }
.testi-stats .stat-num { font-size:clamp(2rem,3.6vw,3rem); }
.testi-divider-bottom { margin-top:3rem; border-top:1px solid var(--border); }

/* ── BOOK SECTION ── */
.book-section { background:var(--dark); padding:0; }
.book-grid { display:grid; grid-template-columns:1fr 1fr; min-height:640px; align-items:stretch; }
.book-photo { overflow:hidden; position:relative; min-height:100%; }
.book-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 1.4s var(--ease-lux); }
.book-grid:hover .book-photo img { transform:scale(1.04); }
.book-panel { background:var(--dark2); padding:clamp(44px,5vw,70px) clamp(24px,4vw,60px); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.book-wave { position:absolute; top:24px; right:24px; opacity:.16; font-size:5rem; color:var(--gold); pointer-events:none; line-height:1; }
.book-panel .eyebrow { margin-bottom:0.5rem; }
.book-panel .sec-title { font-size:clamp(2rem,3.2vw,2.7rem); text-transform:uppercase; margin-bottom:1.25rem; line-height:1.25; }
.book-panel p { color:var(--white); margin-bottom:1.75rem; font-size:1rem; }
.hours-heading { font-family:var(--font-h); font-size:1.45rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--gold); margin-bottom:1rem; }
.hours-list { margin-bottom:1.75rem; }
.hours-row { display:flex; justify-content:space-between; gap:1rem; padding:10px 0; border-bottom:1px solid var(--border); }
.hours-row:first-child { border-top:1px solid var(--border); }
.hours-day { font-size:0.9rem; color:var(--white); }
.hours-time { font-size:0.9rem; color:var(--gold); font-weight:500; text-align:right; }
.visit-heading { font-family:var(--font-h); font-size:1.45rem; color:var(--gold); margin-bottom:1rem; margin-top:1rem; }
.visit-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.75rem; }
.visit-label { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.3rem; }
.visit-val { font-size:0.88rem; color:var(--white); word-break:break-word; }
.visit-val a:hover { color:var(--gold); }
.book-panel .btn { align-self:flex-start; }

/* ── TEAM ── */
.team-section { background:var(--dark); }
.team-section .section-hd { text-align:center; margin-bottom:2.5rem; }
.team-grid-static { display:grid; grid-template-columns:repeat(2,minmax(0,280px)); justify-content:center; gap:clamp(2rem,4vw,4rem); }
.team-card { height:100%; }
.team-card-img-wrap { overflow:hidden; border-radius:200px 200px 12px 12px; margin-bottom:1.25rem; position:relative; background:var(--dark2); }
.team-card-img-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(198,172,115,.35), transparent 55%); opacity:0; transition:opacity .5s var(--ease-out); }
.team-card:hover .team-card-img-wrap::after { opacity:1; }
.team-card-img { width:100%; height:auto; aspect-ratio:600/750; object-fit:cover; object-position:top; display:block; transition:transform .8s var(--ease-lux); }
.team-card-img-silhouette { object-fit:contain; padding:14% 12% 0; box-sizing:border-box; }
.team-card:hover .team-card-img { transform:scale(1.06); }
.team-card-body { padding:0 12px; text-align:center; }
@media (max-width:560px) {
  .team-grid-static { grid-template-columns:minmax(0,280px); }
}
.team-name { font-family:var(--font-h); font-size:1.2rem; color:var(--white); margin-bottom:0.2rem; }
.team-role { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0.9rem; }
.team-social { display:flex; gap:0.5rem; justify-content:center; }
.team-social a { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:var(--gold); transition:all .3s; }
.team-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--darker); }

/* ── MARQUEE ── */
.marquee-section { background:var(--gold); padding:clamp(26px,3.6vw,38px) 0; overflow:hidden; position:relative; }
.marquee-track { display:flex; align-items:center; gap:0; animation:marquee 28s linear infinite; width:max-content; white-space:nowrap; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.marquee-item { font-family:var(--font-h); font-size:clamp(1.5rem,3.2vw,2.1rem); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--darker); padding:0 clamp(1.2rem,3vw,2.5rem); display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.5rem); }
.marquee-dot { font-size:0.6rem; color:rgba(18,20,28,.45); flex-shrink:0; }

/* ── FORM SECTION ── */
.form-section { background:var(--darker); }
.form-grid { display:grid; grid-template-columns:5fr 7fr; gap:var(--gap-lg); align-items:start; }
.form-hd .eyebrow { margin-bottom:0.5rem; }
.form-hd .sec-title { margin-bottom:1rem; }
.form-hd p { color:var(--text); font-size:0.95rem; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.f-row-3 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:0; }
.f-group { display:flex; flex-direction:column; position:relative; }
.f-group input, .f-group select, .f-group textarea { background:transparent; border:none; border-bottom:1px solid rgba(198,172,115,.2); color:var(--white); font-family:var(--font-b); font-size:16px; padding:12px 0; outline:none; transition:border-color .3s; width:100%; border-radius:0; -webkit-appearance:none; }
.f-group::after { content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-lux); pointer-events:none; }
.f-group:focus-within::after { transform:scaleX(1); }
.f-group input::placeholder, .f-group textarea::placeholder { color:rgba(255,255,255,.32); }
.f-group select { color:var(--white); }
.f-group select option { background:var(--dark2); color:var(--white); }
.f-group textarea { resize:none; min-height:110px; }
.f-col-left { display:flex; flex-direction:column; gap:1.5rem; }
.f-footer { display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center; margin-top:1.5rem; }
.f-privacy { font-size:0.8rem; color:var(--muted); line-height:1.65; }
#form-status { margin-top:1rem; padding:0.75rem 1rem; font-size:0.85rem; display:none; }
#form-status.ok { background:rgba(198,172,115,.08); color:var(--gold); border-left:2px solid var(--gold); display:block; }
#form-status.err { background:rgba(200,60,60,.08); color:#e06060; border-left:2px solid #e06060; display:block; }

/* ── FOOTER ── */
.footer { background:var(--darker); padding:clamp(52px,7vw,80px) 0 0; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--gap-md); margin-bottom:0; }
.footer-grid .footer-col:not(:last-child) { border-right:1px solid var(--border); }
.footer-col { padding:0 clamp(1rem,2vw,2rem) clamp(2.5rem,5vw,4rem); }
.footer-col h3 { font-family:var(--font-h); font-size:1.5rem; color:var(--gold); margin-bottom:1.5rem; letter-spacing:0.05em; }
.footer-location { text-align:right; }
.footer-svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem 1.5rem; }
.footer-svc-grid a { font-size:1.05rem; color:var(--white); transition:all .3s; display:flex; align-items:center; gap:6px; padding:6px 0; }
.footer-svc-grid a::before { content:'\203A'; color:var(--gold); font-size:1.1rem; }
.footer-svc-grid a:hover { color:var(--gold); padding-left:4px; }
.footer-center { text-align:center; }
.footer-logo { max-width:260px; width:100%; height:auto; margin:0 auto 1.25rem; display:block; border-radius:6px; }
.footer-center p { font-size:1.05rem; color:var(--white); line-height:1.75; max-width:280px; margin:0 auto 1.5rem; }
.footer-social { display:flex; gap:0.6rem; justify-content:center; }
.footer-social a { width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--gold); transition:all .3s; }
.footer-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--darker); transform:translateY(-3px); }
.footer-addr { font-size:1.05rem; color:var(--white); margin-bottom:1.25rem; line-height:1.85; }
.footer-hour-row { display:flex; justify-content:space-between; gap:1rem; font-size:1rem; padding:9px 0; border-bottom:1px solid var(--border); }
.footer-hour-row:first-child { border-top:1px solid var(--border); }
.footer-hour-day { color:var(--white); }
.footer-hour-time { color:var(--gold); text-align:right; }
.footer-bottom { border-top:1px solid var(--border); padding:1.25rem 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem 1.25rem; }
.footer-bottom p, .footer-bottom a { font-size:0.88rem; color:var(--muted); }
.footer-bottom a:hover { color:var(--gold); }
.footer-links { display:flex; gap:1.25rem; }

/* ── FLOATING BTNS ── */
.back-top { position:fixed; right:1.75rem; z-index:900; bottom:calc(5.6rem + env(safe-area-inset-bottom,0px)); width:44px; height:44px; border-radius:50%; background:var(--gold); color:var(--darker); display:flex; align-items:center; justify-content:center; font-size:0.85rem; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px) scale(.9); transition:opacity .35s var(--ease-out), transform .35s var(--ease-lux), background .3s; border:none; }
.back-top.show { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.back-top:hover { background:var(--gold2); transform:translateY(-3px); }
.wa-float { position:fixed; right:1.75rem; z-index:900; bottom:calc(1.75rem + env(safe-area-inset-bottom,0px)); width:52px; height:52px; border-radius:50%; background:#25d366; color:#fff; font-size:1.35rem; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(37,211,102,.4); transition:transform .3s var(--ease-lux), box-shadow .3s; }
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 26px rgba(37,211,102,.55); }
.wa-float::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.6); animation:waPulse 2.6s var(--ease-out) infinite; }
@keyframes waPulse { 0% { transform:scale(1); opacity:.7; } 70%,100% { transform:scale(1.55); opacity:0; } }

/* ── FLATPICKR DARK ── */
.flatpickr-calendar { background:#1a1c26 !important; border:1px solid rgba(198,172,115,.2) !important; }
.flatpickr-day { color:#dadada !important; }
.flatpickr-day.selected,.flatpickr-day.selected:hover { background:#c6ac73 !important; border-color:#c6ac73 !important; color:#12141c !important; }
.flatpickr-day:hover { background:rgba(198,172,115,.18) !important; }
.flatpickr-months .flatpickr-month,.flatpickr-weekdays,span.flatpickr-weekday { background:#12141c !important; color:#9aa0aa !important; }
.flatpickr-current-month .numInput,.flatpickr-current-month select { color:#c6ac73 !important; background:#12141c !important; }

/* ── SCROLL REVEAL ── */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-lux), transform .9s var(--ease-lux); will-change:opacity,transform; }
[data-reveal="left"]  { transform:translateX(-32px); }
[data-reveal="right"] { transform:translateX(32px); }
[data-reveal="zoom"]  { transform:scale(.96); }
[data-reveal].is-in { opacity:1; transform:none; }
[data-reveal-delay="1"] { transition-delay:.10s; }
[data-reveal-delay="2"] { transition-delay:.20s; }
[data-reveal-delay="3"] { transition-delay:.30s; }
[data-reveal-delay="4"] { transition-delay:.40s; }
[data-reveal-img] { clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-lux); }
[data-reveal-img] > img, [data-reveal-img].is-img { transform:scale(1.12); transition:transform 1.6s var(--ease-lux); }
[data-reveal-img].is-in { clip-path:inset(0 0 0 0); }
[data-reveal-img].is-in > img, [data-reveal-img].is-in.is-img { transform:scale(1); }

/* ── INNER PAGES ── */
.drawer-has-drop > .drawer-sub { display:none; padding-left:1.2rem; }
.drawer-has-drop.open > .drawer-sub { display:block; }
.drawer-has-drop > a { display:flex; align-items:center; justify-content:space-between; }
.drawer-has-drop > a i { font-size:.55rem; transition:transform .3s; }
.drawer-has-drop.open > a i { transform:rotate(180deg); }
.page-banner { position:relative; height:clamp(280px,38vw,420px); display:flex; align-items:center; background:var(--darker); margin-top:var(--nav-h); }
.page-banner-overlay { position:absolute; inset:0; background:rgba(13,16,23,.75); }
.page-banner-content { position:relative; z-index:2; text-align:center; }
.page-banner-title { font-family:var(--font-h); font-size:clamp(2.2rem,6vw,5rem); color:var(--white); margin:.6rem 0 1rem; }
.page-banner-breadcrumb { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.page-banner-breadcrumb a { color:var(--muted); transition:color .3s; }
.page-banner-breadcrumb a:hover { color:var(--gold); }
.page-banner-breadcrumb i { font-size:.5rem; color:var(--gold); }
.page-banner-breadcrumb span { color:var(--gold); }

/* Service detail */
.svc-detail-section { padding:var(--section-y) 0; background:var(--dark); }
.svc-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:start; }
.svc-detail-img-wrap { position:relative; border-radius:12px; overflow:hidden; }
.svc-detail-img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; }
.svc-gallery-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.svc-gallery-thumb { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.8; transition:opacity .3s, transform .3s var(--ease-lux); }
.svc-gallery-thumb:hover { opacity:1; transform:scale(1.04); }
.svc-detail-title { font-family:var(--font-h); font-size:clamp(1.8rem,4vw,3.2rem); color:var(--white); margin:.5rem 0 1rem; line-height:1.1; }
.svc-detail-price { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:1.5rem; padding:12px 18px; background:rgba(198,172,115,.08); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; }
.svc-price-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.svc-price-val { font-family:var(--font-h); font-size:1.6rem; color:var(--gold); }
.svc-price-note { font-family:var(--font-b); font-size:.85rem; color:var(--text); line-height:1.6; margin:0; }
.svc-detail-desc { color:var(--text); line-height:1.9; margin-bottom:2rem; }
.svc-detail-list { list-style:none; margin-bottom:2.5rem; }
.svc-detail-list li { display:flex; align-items:center; gap:12px; padding:.55rem 0; color:var(--text); font-size:.9rem; border-bottom:1px solid var(--border); }
.svc-detail-list li:last-child { border-bottom:none; }

/* Featured Videos (TikTok) — single horizontal row, video-only, no caption card */
.video-row-wrap { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:14px; margin:0 -4px; }
.video-row-wrap + .video-row-wrap { margin-top:4px; }
.video-row-wrap::-webkit-scrollbar { height:6px; }
.video-row-wrap::-webkit-scrollbar-track { background:var(--darker); border-radius:6px; }
.video-row-wrap::-webkit-scrollbar-thumb { background:var(--gold); border-radius:6px; }
.video-grid { display:flex; gap:18px; justify-content:flex-start; padding:0 4px; width:max-content; margin:0 auto; }
@media (min-width:900px) { .video-grid { width:100%; justify-content:center; } }
.video-item { position:relative; flex:0 0 240px; width:240px; aspect-ratio:9/16; margin:0; border-radius:14px; overflow:hidden; background:var(--darker); border:1px solid var(--border); scroll-snap-align:start; }
.video-item video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:480px) { .video-item { flex-basis:200px; width:200px; } }

/* Visit Our Salon (storefront/interior gallery) */
/* Fixed row heights (not aspect-ratio) so spanning + wide cells always line up with no leftover gap. */
.salon-gallery { display:grid; grid-template-columns:1.1fr 1fr 1fr; grid-template-rows:210px 210px 230px 260px; gap:20px; }
.salon-gallery .salon-photo { position:relative; border-radius:14px; overflow:hidden; display:block; background:var(--darker); border:1px solid var(--border); height:100%; }
.salon-gallery .salon-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-lux); }
.salon-gallery .salon-photo:hover img { transform:scale(1.05); }
.salon-gallery .salon-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(13,16,23,.55) 0%, rgba(13,16,23,0) 40%); opacity:0; transition:opacity .35s; }
.salon-gallery .salon-photo:hover::after { opacity:1; }
.salon-gallery .salon-photo .salon-photo-icon { position:absolute; right:16px; bottom:16px; width:38px; height:38px; border-radius:50%; background:rgba(13,16,23,.75); border:1px solid var(--border); color:var(--gold); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.salon-gallery .salon-photo:hover .salon-photo-icon { opacity:1; transform:translateY(0); }
.salon-gallery .salon-exterior  { grid-column:1; grid-row:1 / span 2; }
.salon-gallery .salon-lounge    { grid-column:2; grid-row:1; }
.salon-gallery .salon-hours     { grid-column:3; grid-row:1; }
.salon-gallery .salon-interior  { grid-column:2; grid-row:2; }
.salon-gallery .salon-reception { grid-column:3; grid-row:2; }
.salon-gallery .salon-styling   { grid-column:1; grid-row:3; }
.salon-gallery .salon-products  { grid-column:2 / span 2; grid-row:3; }
.salon-gallery .salon-window    { grid-column:1 / span 3; grid-row:4; }
@media (max-width:768px) {
  .salon-gallery { grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:auto; }
  .salon-gallery .salon-photo { grid-row:auto !important; height:auto; aspect-ratio:4/3 !important; }
  .salon-gallery .salon-exterior { grid-column:1 / span 2; aspect-ratio:16/10 !important; }
  .salon-gallery .salon-lounge { grid-column:1; }
  .salon-gallery .salon-hours { grid-column:2; }
  .salon-gallery .salon-interior { grid-column:1; }
  .salon-gallery .salon-reception { grid-column:2; }
  .salon-gallery .salon-styling { grid-column:1; }
  .salon-gallery .salon-products { grid-column:2; }
  .salon-gallery .salon-window { grid-column:1 / span 2; aspect-ratio:16/9 !important; }
}
@media (max-width:480px) {
  .salon-gallery { grid-template-columns:1fr; }
  .salon-gallery .salon-photo { grid-column:1 !important; aspect-ratio:4/3 !important; }
  .salon-gallery .salon-exterior,
  .salon-gallery .salon-window { aspect-ratio:4/3 !important; }
}

/* Legal pages (Terms of Service / Privacy Policy) */
.legal-content { max-width:820px; margin:0 auto; }
.legal-updated { font-family:var(--font-b); font-size:0.85rem; color:var(--muted); margin-bottom:2.5rem; }
.legal-content h2.sec-title { font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:1.75rem; }
.legal-content h3 { font-family:var(--font-h); font-size:1.35rem; color:var(--gold); margin:2.5rem 0 1rem; }
.legal-content h3:first-of-type { margin-top:0; }
.legal-content p { font-family:var(--font-b); font-size:1rem; color:var(--text); line-height:1.85; margin-bottom:1.1rem; }
.legal-content ul { margin:0 0 1.1rem; padding-left:1.4rem; }
.legal-content li { font-family:var(--font-b); font-size:1rem; color:var(--text); line-height:1.85; margin-bottom:0.5rem; }
.legal-content li::marker { color:var(--gold); }
.legal-content a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover { color:var(--gold2); }
.legal-content strong { color:var(--white); font-weight:600; }

/* Portfolio */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.portfolio-item { position:relative; overflow:hidden; border-radius:8px; display:block; aspect-ratio:3/4; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-lux); }
.portfolio-item:hover img { transform:scale(1.07); }
.portfolio-overlay { position:absolute; inset:0; background:rgba(13,16,23,.7); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .35s; }
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay-icon { font-size:1.4rem; color:var(--gold); margin-bottom:.5rem; }
.portfolio-overlay-title { color:var(--white); font-family:var(--font-h); font-size:1rem; letter-spacing:.04em; }

/* Contact */
.contact-strip { padding:clamp(48px,6vw,70px) 0; background:var(--darker); }
.contact-strip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.contact-strip-item { text-align:center; padding:2rem; }
.contact-strip-icon { width:70px; height:70px; border-radius:50%; border:1.5px solid var(--gold); margin:0 auto 1.2rem; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--gold); transition:background .35s, color .35s, transform .5s var(--ease-lux); }
.contact-strip-item:hover .contact-strip-icon { background:var(--gold); color:var(--darker); transform:translateY(-4px); }
.contact-strip-item h4 { font-family:var(--font-h); font-size:1.25rem; color:var(--white); margin-bottom:.5rem; }
.contact-strip-item a, .contact-strip-item p { color:var(--white); font-size:.88rem; line-height:1.7; transition:color .3s; }
.contact-strip-item a:hover { color:var(--gold); }
.contact-strip-item .btn { margin-top:1rem; }

/* Shop */
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.product-card { background:var(--darker); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:transform .4s var(--ease-lux), box-shadow .4s, border-color .4s; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,.4); border-color:var(--border2); }
.product-img-wrap { position:relative; overflow:hidden; aspect-ratio:4/5; }
.product-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-lux); }
.product-card:hover .product-img-wrap img { transform:scale(1.06); }
.product-overlay { position:absolute; inset:0; background:rgba(13,16,23,.6); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.product-card:hover .product-overlay { opacity:1; }
.add-to-cart-btn { padding:12px 26px; background:var(--gold); color:var(--darker); border:none; border-radius:30px; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .3s; min-height:44px; }
.add-to-cart-btn:hover { background:var(--white); }
.product-body { padding:1.2rem 1.4rem; }
.product-cat { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
.product-name { font-family:var(--font-h); font-size:1.1rem; color:var(--white); margin-bottom:.4rem; }
.product-price { font-size:1rem; font-weight:600; color:var(--white); }

/* Cart sidebar */
.cart-sidebar { position:fixed; top:0; right:-360px; width:340px; max-width:88vw; height:100%; background:var(--darker); z-index:1500; padding:2rem 1.5rem; transition:right .4s var(--ease-lux); overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; }
.cart-sidebar.open { right:0; }
.cart-sidebar-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.cart-sidebar-head h3 { font-family:var(--font-h); color:var(--white); font-size:1.4rem; }
.cart-sidebar-head button { background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; width:44px; height:44px; }
.cart-total-row { display:flex; justify-content:space-between; padding:1rem 0; border-top:1px solid var(--border); margin-top:auto; font-weight:600; color:var(--white); }
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1499; display:none; }
.cart-overlay.open { display:block; }

/* Checkout modal */
.checkout-modal { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1600; display:flex; align-items:center; justify-content:center; padding:1rem; }
.checkout-inner { background:var(--darker); border:1px solid var(--border); border-radius:12px; padding:clamp(1.5rem,4vw,2.5rem); width:100%; max-width:620px; max-height:90vh; overflow-y:auto; }
.checkout-inner h3 { font-family:var(--font-h); color:var(--white); font-size:1.6rem; margin-bottom:1.5rem; }
.checkout-close { float:right; background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; width:44px; height:44px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .nav-links, .nav-phone-link { display:none; }
  .hamburger { display:flex; }
  .nav-cta { display:none; }
  .nav-container { display:flex; justify-content:space-between; align-items:center; min-height:64px; }
  .nav-logo { justify-content:flex-start; }
  .nav-logo img { height:46px; }
  .services-grid, .svc-detail-grid, .about-grid, .book-grid, .form-grid { grid-template-columns:1fr; }
  .svc-img-col { min-height:360px; }
  .about-left { position:static; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-strip-grid { grid-template-columns:1fr; }
  .shop-grid, .portfolio-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .hero-title { font-size:clamp(2rem,10vw,3rem); }
  .hero-arrow { width:40px; height:40px; }
  .hero-prev { left:12px; }
  .hero-next { right:12px; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid .footer-col:not(:last-child) { border-right:none; border-bottom:1px solid var(--border); padding-bottom:2rem; margin-bottom:2rem; }
  .footer-location { text-align:left; }
  .f-row, .visit-cols { grid-template-columns:1fr; }
  .f-footer { grid-template-columns:1fr; }
  .shop-grid, .portfolio-grid { grid-template-columns:1fr; }
  .book-grid { grid-template-columns:1fr; }
  .book-photo { min-height:300px; }
  /* ── DESIGN REFINEMENT: mobile tap-target & spacing polish ── */
  .svc-arrow { width:44px; height:44px; }
  .drawer-nav a { padding:16px 0; }
  .btn { min-height:48px; }
  .team-social a { width:44px; height:44px; }
  .feat-card-desc { max-width:none; }
}