/* ─────────────────────────────────────────────
   Lewisville Spa Nails
   ───────────────────────────────────────────── */

:root{
  --plum-deep:#2e1729;
  --plum:#4b2740;
  --plum-soft:#6b4460;
  --ink:#241a22;
  --ink-mid:#6b5c65;
  --shell:#fbf7f4;
  --shell-2:#f4ebe6;
  --blush:#f6e7e6;
  --rose:#d4536b;
  --rose-soft:#e0808f;
  --champagne:#c8a06a;
  --line:#e8dcd5;
  --line-dark:rgba(255,255,255,.14);
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --shadow-sm:0 4px 18px -8px rgba(46,23,41,.28);
  --shadow-md:0 26px 50px -30px rgba(46,23,41,.55);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:86px;}

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--plum-deep);
  margin:0 0 .6rem;
}
h1{font-size:clamp(2.9rem,7vw,4.9rem); letter-spacing:-.03em;}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1rem;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
ul{margin:0; padding:0; list-style:none;}

.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;}
.center{text-align:center;}

.eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--champagne);
  margin:0 0 .9rem;
}
.section-sub{
  max-width:620px;
  margin:0 auto 2.8rem;
  color:var(--ink-mid);
  font-size:1.03rem;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--plum-deep); color:#fff; padding:.7rem 1.2rem;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--rose); outline-offset:3px; border-radius:4px;}

/* ── Buttons ─────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.5rem;
  border:1.5px solid transparent;
  border-radius:999px;
  font-size:.93rem; font-weight:500; letter-spacing:.01em;
  white-space:nowrap; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-solid{background:var(--plum); color:#fff;}
.btn-solid:hover{background:var(--plum-deep); transform:translateY(-1px);}
.btn-line{border-color:var(--plum); color:var(--plum);}
.btn-line:hover{background:var(--plum); color:#fff;}
.btn-lg{padding:1rem 2rem; font-size:1rem;}

/* ── Top bar ─────────────────────────────────── */
.topbar{background:var(--plum-deep); color:#f0e3ea; font-size:.8rem;}
.topbar-inner{
  display:flex; align-items:center; justify-content:center;
  gap:.7rem; flex-wrap:wrap;
  padding:.55rem 24px;
  letter-spacing:.02em;
}
.topbar .stars{color:var(--champagne); letter-spacing:1px;}
.topbar-sep{opacity:.45;}
.topbar-phone{
  color:#fff; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.4);
}
.topbar-phone:hover{border-bottom-color:#fff;}

/* ── Header ──────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,247,244,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  padding:14px 24px;
}
.brand{display:flex; align-items:center; gap:.65rem; margin-right:auto;}
.brand-mark{width:34px; height:34px; color:var(--plum); flex-shrink:0;}
.brand-mark svg{width:100%; height:100%;}
.brand-text{display:flex; flex-direction:column; line-height:1;}
.brand-text strong{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.18rem; font-weight:600; color:var(--plum-deep);
  letter-spacing:-.01em;
}
.brand-text em{
  font-style:normal;
  font-size:.66rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--champagne);
  margin-top:.22rem;
}

.nav{display:flex; align-items:center; gap:2rem;}
.nav a{
  font-size:.92rem; color:var(--ink-mid); font-weight:500;
  padding:.35rem 0; position:relative;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background:var(--rose); transition:right .25s ease;
}
.nav a:hover{color:var(--plum-deep);}
.nav a:hover::after{right:0;}
.nav-call{display:none;}

.header-btn{padding:.62rem 1.25rem; font-size:.88rem;}

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:22px; height:1.8px; margin:0 auto;
  background:var(--plum-deep);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* ── Hero ────────────────────────────────────── */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(212,83,107,.20), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(200,160,106,.14), transparent 70%),
    var(--plum-deep);
  color:#f7edf2;
  overflow:hidden;
}
.hero-inner{
  max-width:900px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding-top:6.5rem; padding-bottom:6.5rem;
}
/* Hairline that draws the eye down into the wordmark. */
.hero-rule{
  display:block; width:1px; height:60px;
  background:linear-gradient(180deg, transparent, var(--champagne));
  margin-bottom:2rem;
}
.hero h1{
  color:#fff;
  font-size:clamp(3.4rem,9vw,6.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin-bottom:0;
}
.hero h1 .accent{
  color:var(--rose-soft);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
}
.hero .eyebrow{color:var(--champagne); letter-spacing:.28em;}
.lede{
  font-size:1.14rem; max-width:36rem;
  color:rgba(247,237,242,.8);
  margin:1.8rem auto 0;
}
.hero-actions{display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; margin-top:2.4rem;}
.hero .btn-solid{background:var(--rose); color:#fff;}
.hero .btn-solid:hover{background:#c14257;}
.hero .btn-line{border-color:rgba(255,255,255,.5); color:#fff;}
.hero .btn-line:hover{background:#fff; color:var(--plum-deep); border-color:#fff;}
.hero-status{
  margin:2rem 0 0;
  font-size:.9rem;
  color:rgba(247,237,242,.72);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.hero-status .dot{
  width:8px; height:8px; border-radius:50%;
  background:#7bc47f; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(123,196,127,.22);
}
.hero-status.is-closed .dot{background:#d98a6a; box-shadow:0 0 0 3px rgba(217,138,106,.22);}

/* ── Swatch strip ────────────────────────────── */
.swatches{background:var(--shell-2); border-bottom:1px solid var(--line); overflow:hidden;}
.swatch-track{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.7rem,2vw,1.5rem);
  padding:1.5rem 24px;
  flex-wrap:wrap;
}
.swatch-track span{
  width:clamp(26px,3.4vw,40px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.18), 0 3px 10px -4px rgba(46,23,41,.4);
  transition:transform .25s ease;
}
.swatch-track span:hover{transform:translateY(-5px) scale(1.08);}

/* ── Why ─────────────────────────────────────── */
.why{padding:6rem 0;}
.why-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:start;}
.why-intro h2{margin-bottom:1.1rem;}
.why-intro p{color:var(--ink-mid); font-size:1.03rem;}
.why-list{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.8rem;}
.why-list li{display:flex; gap:1rem; align-items:flex-start;}
.why-ico{
  flex-shrink:0;
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--blush); color:var(--plum);
}
.why-ico svg{width:22px; height:22px;}
.why-list strong{display:block; color:var(--plum-deep); font-weight:700; font-size:.98rem;}
.why-list p{margin:.25rem 0 0; font-size:.92rem; color:var(--ink-mid); line-height:1.55;}

/* ── Services ────────────────────────────────── */
.services{padding:6rem 0; background:#fff; border-block:1px solid var(--line);}
.tabs{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.5rem; margin-bottom:2.6rem;
}
.tab{
  font-family:inherit; font-size:.92rem; font-weight:500;
  padding:.62rem 1.35rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--shell);
  color:var(--ink-mid);
  cursor:pointer;
  transition:all .2s ease;
}
.tab:hover{border-color:var(--plum-soft); color:var(--plum-deep);}
.tab.is-active{background:var(--plum-deep); border-color:var(--plum-deep); color:#fff;}

.panel{display:none;}
.panel.is-active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.menu-list{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.1rem 2.4rem;
  max-width:940px; margin:0 auto;
}
.menu-list li{
  padding:1.15rem 1.3rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--shell);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.menu-list li:hover{border-color:var(--rose-soft); box-shadow:var(--shadow-sm);}
.menu-list strong{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.08rem; font-weight:600; color:var(--plum-deep);
  margin-bottom:.15rem;
}
.menu-list span{font-size:.9rem; color:var(--ink-mid); line-height:1.55;}
.menu-note{
  text-align:center; margin:2.6rem 0 0;
  font-size:.9rem; color:var(--ink-mid);
}
.menu-note a{color:var(--plum); font-weight:500; border-bottom:1px solid var(--rose-soft);}

/* ── Lookbook ────────────────────────────────── */
.lookbook{padding:6rem 0;}
.look-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.look-grid figure{margin:0;}
.look-grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  transition:transform .35s ease;
}
.look-grid figure:hover img{transform:translateY(-6px);}
.look-grid figcaption{
  margin-top:.75rem; text-align:center;
  font-size:.88rem; font-weight:500; color:var(--plum-deep);
}
.look-cta{margin-top:2.6rem;}

/* ── Reviews ─────────────────────────────────── */
.reviews{padding:6rem 0; background:var(--shell-2); border-block:1px solid var(--line);}
.reviews-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem;
}
.reviews-head h2{margin:0;}
.reviews-links{display:flex; flex-direction:column; gap:.4rem; font-size:.92rem;}
.reviews-links a{color:var(--plum); font-weight:500;}
.reviews-links a:hover{color:var(--rose); }

.review-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(310px,1fr);
  gap:1.3rem;
  overflow-x:auto;
  padding-bottom:1rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.review{
  margin:0; scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1.7rem 1.6rem;
  display:flex; flex-direction:column;
}
.review .stars{color:var(--champagne); letter-spacing:2px; font-size:.95rem; margin-bottom:.8rem;}
.review p{
  font-size:.98rem; color:var(--ink); line-height:1.7;
  flex:1;
}
.review footer{display:flex; align-items:center; gap:.7rem; margin-top:.6rem;}
.review cite{font-style:normal; font-weight:700; font-size:.9rem; color:var(--plum-deep);}
.review .src{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mid);
  background:var(--blush);
  padding:.22rem .55rem; border-radius:999px;
}
.rail-hint{display:none; font-size:.8rem; color:var(--ink-mid); margin:.4rem 0 0;}

/* ── Visit ───────────────────────────────────── */
.visit{padding:6rem 0 0;}
.visit-inner{display:grid; grid-template-columns:1fr 1fr; gap:4rem; padding-bottom:4.5rem;}
.hours{width:100%; border-collapse:collapse; margin-top:1.4rem;}
.hours th,.hours td{
  padding:.7rem .6rem;
  border-bottom:1px solid var(--line);
  font-size:.96rem;
}
.hours th{text-align:left; font-weight:400; color:var(--ink-mid);}
.hours td{text-align:right; font-weight:500;}
.hours tr.is-today th,.hours tr.is-today td{color:var(--plum-deep); font-weight:700;}
.hours tr.is-today{background:var(--blush);}
.hours tr.is-today th{border-radius:var(--r-sm) 0 0 var(--r-sm); padding-left:.9rem;}
.hours tr.is-today td{border-radius:0 var(--r-sm) var(--r-sm) 0; padding-right:.9rem;}

.visit-sub{color:var(--ink-mid); margin-top:.4rem;}
.contact-list{margin:1.8rem 0; display:grid; gap:.9rem;}
.contact-list li{display:flex; gap:1rem; align-items:baseline; font-size:.97rem;}
.contact-list span{
  flex:0 0 90px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--champagne); font-weight:700;
}
.contact-list a{color:var(--plum-deep); border-bottom:1px solid var(--line);}
.contact-list a:hover{border-bottom-color:var(--rose);}
.contact-list a.plain{border-bottom:none; color:var(--ink-mid); cursor:default;}
.visit-actions{display:flex; gap:.9rem; flex-wrap:wrap;}

.map{height:400px; border-top:1px solid var(--line);}
.map iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.85);}

/* ── Footer ──────────────────────────────────── */
.site-footer{background:var(--plum-deep); color:#e6d5de; padding:3.5rem 0 2.5rem;}
.footer-inner{
  display:grid; grid-template-columns:1.3fr 1fr auto;
  gap:2.5rem; align-items:start;
}
.footer-brand .brand-text strong{color:#fff; font-size:1.3rem;}
.footer-brand .brand-text em{color:var(--champagne);}
.footer-brand p{margin:1rem 0 0; font-size:.9rem; color:rgba(230,213,222,.75); line-height:1.7;}
.footer-brand a{border-bottom:1px solid rgba(255,255,255,.3);}
.footer-brand a:hover{border-bottom-color:#fff;}
.footer-nav{display:grid; gap:.55rem; font-size:.92rem;}
.footer-nav a{color:rgba(230,213,222,.8);}
.footer-nav a:hover{color:#fff;}
.footer-social{display:flex; gap:.7rem;}
.footer-social a{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-dark);
  color:#e6d5de;
  transition:background .2s ease, color .2s ease;
}
.footer-social a:hover{background:#fff; color:var(--plum-deep);}
.footer-social svg{width:19px; height:19px;}
.footer-legal{
  grid-column:1/-1;
  margin:1.5rem 0 0; padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  font-size:.78rem; color:rgba(230,213,222,.55);
}

/* ── Sticky mobile bar ───────────────────────── */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--plum-deep);
  border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.95rem 0;
  color:#fff; font-size:.92rem; font-weight:500;
}
.mobile-bar a+a{border-left:1px solid var(--line-dark);}
.mobile-bar svg{width:18px; height:18px;}

/* ── Responsive ──────────────────────────────── */
@media (max-width:1080px){
  .nav{gap:1.4rem;}
}

@media (max-width:960px){
  .hero-inner{padding-top:4.5rem; padding-bottom:4.5rem;}
  .why-grid{grid-template-columns:1fr; gap:2.6rem;}
  .visit-inner{grid-template-columns:1fr; gap:3rem;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-social{grid-column:1/-1;}
}

@media (max-width:820px){
  html{scroll-padding-top:70px;}
  .header-btn{display:none;}
  .nav-toggle{display:flex;}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shell);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .28s ease;
  }
  .nav.is-open{max-height:400px;}
  .nav a{padding:1rem 24px; border-top:1px solid var(--line); font-size:.98rem;}
  .nav a::after{display:none;}
  .nav-call{display:block; color:var(--plum); font-weight:700;}
  .why-list{grid-template-columns:1fr;}
  .menu-list{grid-template-columns:1fr;}
  .look-grid{grid-template-columns:repeat(2,1fr);}
  .review-rail{grid-auto-columns:minmax(270px,80%);}
  .rail-hint{display:block;}
  .mobile-bar{display:flex;}
  body{padding-bottom:56px;}
  .site-footer{padding-bottom:3rem;}
}

@media (max-width:520px){
  .topbar-inner{font-size:.75rem; gap:.4rem .6rem;}
  .topbar-sep{display:none;}
  .hero-rule{height:44px; margin-bottom:1.4rem;}
  .hero-inner{padding-top:3.5rem; padding-bottom:3.5rem;}
  /* The wide tracking runs to the edge on a narrow phone. */
  .hero .eyebrow{letter-spacing:.16em; font-size:.68rem;}
  .why,.services,.lookbook,.reviews{padding:4rem 0;}
  .visit{padding-top:4rem;}
  .look-grid{gap:.8rem;}
  .hero-actions .btn{flex:1;}
  .map{height:320px;}
  .contact-list li{flex-direction:column; gap:.15rem;}
  .contact-list span{flex:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}