/* =========================================================
   THE NAIL MASTERS — Service Pages Extension Stylesheet
   Extends style.css. Uses the SAME design tokens/vars.
   No overrides of existing selectors — additive only.
   ========================================================= */

/* ---------- Nav dropdown ---------- */
.has-dropdown{position:relative;}
.dropdown-trigger{display:flex;align-items:center;gap:6px;cursor:pointer;}
.dropdown-trigger svg{transition:transform .3s var(--ease);}
.has-dropdown.open .dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--ivory);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow-strong);
  min-width:230px;padding:10px;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s var(--ease),transform .3s var(--ease);
  z-index:1200;
}
.has-dropdown.open .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-dropdown a{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:4px;
  font-size:0.78rem;letter-spacing:0.06em;text-transform:none;
  color:var(--charcoal);transition:.25s var(--ease);
}
.nav-dropdown a::after{display:none;}
.nav-dropdown a:hover{background:var(--blush);color:var(--champagne-dark);padding-left:18px;}
.nav-dropdown a svg{flex-shrink:0;color:var(--champagne-dark);}

@media (max-width:1080px){
  .has-dropdown{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .nav-dropdown{
    position:static;left:auto;transform:none;opacity:1;visibility:visible;
    width:100%;
    box-shadow:none;border:0;background:transparent;
    max-height:0;overflow:hidden;padding:0;
    text-align:center;
    transition:max-height .4s var(--ease);
  }
  .has-dropdown:hover .nav-dropdown,
  .has-dropdown.open .nav-dropdown{
    transform:none;
    max-height:400px;
    padding:6px 0;
  }
  .dropdown-trigger{justify-content:center;width:100%;gap:8px;}
  .nav-dropdown a{justify-content:center;padding:10px 0;font-size:0.9rem;}
  .nav-dropdown a:hover{padding-left:0;}
}
@media (max-width:560px){
  .nav-dropdown a{font-size:0.82rem;padding:9px 0;}
  .has-dropdown.open .nav-dropdown{max-height:none;}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--brown);margin-bottom:22px;
}
.breadcrumb a{color:var(--brown);border-bottom:1px solid transparent;transition:.25s;}
.breadcrumb a:hover{color:var(--champagne-dark);border-color:var(--champagne-dark);}
.breadcrumb span.sep{color:var(--champagne);}
.breadcrumb span.current{color:var(--charcoal);}

/* ---------- Service page hero ---------- */
.svc-hero{
  position:relative;min-height:78vh;display:flex;align-items:center;
  padding-top:150px;padding-bottom:70px;overflow:hidden;
  background:
    radial-gradient(70% 60% at 82% 18%, rgba(198,161,91,0.16), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(217,183,172,0.22), transparent 60%),
    var(--ivory);
}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
.svc-hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.05;font-weight:500;}
.svc-hero h1 em{font-style:italic;color:var(--champagne-dark);}
.svc-hero p.lead{margin-top:26px;max-width:480px;color:var(--brown);font-size:1.05rem;}
.svc-hero-cta{display:flex;gap:18px;margin-top:40px;flex-wrap:wrap;}
.svc-hero-visual{position:relative;}
.svc-hero-frame{
  position:relative;border-radius:6px 40px 6px 40px;overflow:hidden;
  box-shadow:var(--shadow-strong);aspect-ratio:4/4.6;
}
.svc-hero-frame img{width:100%;height:100%;object-fit:cover;}
.svc-hero-badge{
  position:absolute;left:-26px;bottom:34px;background:var(--ivory);
  padding:18px 24px;border-radius:4px 20px 4px 20px;box-shadow:var(--shadow-soft);
  display:flex;align-items:center;gap:12px;
}
.svc-hero-badge b{font-family:'Cormorant Garamond',serif;font-size:1.4rem;}
.svc-hero-badge span{font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--brown);}

@media (max-width:960px){
  .svc-hero-grid{grid-template-columns:1fr;}
  .svc-hero-visual{order:-1;max-width:320px;margin:0 auto;}
  .svc-hero-badge{left:0;}
  .svc-hero{padding-top:130px;}
}
@media (max-width:560px){
  .svc-hero{
    min-height:auto;
    padding-top:104px;
    padding-bottom:52px;
  }
  .svc-hero-grid{gap:34px;}
  .svc-hero-visual{max-width:min(280px,100%);}
  .svc-hero-frame{border-radius:6px 28px 6px 28px;}
  .svc-hero-badge{
    left:10px;
    bottom:16px;
    max-width:calc(100% - 20px);
    padding:14px 16px;
  }
  .svc-hero h1{font-size:clamp(2.2rem,12vw,3rem);}
  .svc-hero p.lead{font-size:0.98rem;}
  .svc-hero-cta{gap:12px;margin-top:30px;}
  .svc-hero-cta .btn{width:100%;justify-content:center;}
  .hero-float{
    top:-16px !important;
    right:8px !important;
    max-width:calc(100% - 16px);
    padding:11px 14px;
    font-size:0.62rem;
    letter-spacing:0.06em;
  }
}

/* ---------- Menu / pricing cards (reuses service-card look) ---------- */
.menu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
}
.menu-card{
  background:var(--ivory);border:1px solid var(--line);border-radius:6px;
  padding:34px 32px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  position:relative;
}
.menu-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong);border-color:var(--champagne);}
.menu-card h3{font-size:1.35rem;}
.menu-card .desc{color:var(--brown);font-size:0.88rem;margin-top:10px;min-height:40px;}
.menu-card .menu-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.menu-card .price{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--champagne-dark);}
.menu-card .dur{font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--brown);}
.menu-card .link-arrow{margin-top:20px;}
@media (max-width:560px){
  .menu-grid{grid-template-columns:minmax(0,1fr);gap:16px;}
  .menu-card{padding:26px 22px;}
  .menu-card .desc{min-height:0;}
  .menu-card .menu-meta{align-items:flex-start;gap:12px;}
}

/* ---------- Sub-nav / category tabs (for hub page) ---------- */
.svc-tabs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:54px;}
.svc-tab{
  display:flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;
  border:1px solid var(--line);font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;
  transition:.3s var(--ease);
}
.svc-tab:hover,.svc-tab.active{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal);}
.svc-tab svg{flex-shrink:0;}

/* ---------- Category grid (hub page) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;}
.cat-card{
  position:relative;border-radius:4px 30px 4px 30px;overflow:hidden;
  height:320px;display:flex;align-items:flex-end;padding:32px;color:var(--ivory);
  box-shadow:var(--shadow-soft);
}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s var(--ease);}
.cat-card:hover img{transform:scale(1.08);}
.cat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(36,31,28,0.88),rgba(36,31,28,0.1) 65%);
}
.cat-card .content{position:relative;z-index:1;}
.cat-card .eyebrow{color:var(--rosegold);}
.cat-card .eyebrow::before{background:var(--rosegold);}
.cat-card h3{color:var(--ivory);font-size:1.7rem;margin-top:8px;}
.cat-card p{font-size:0.85rem;opacity:0.85;margin-top:8px;max-width:340px;}
.cat-card .link-arrow{margin-top:18px;color:var(--ivory);border-color:rgba(251,247,241,0.4);}
.cat-card .link-arrow:hover{color:var(--champagne);border-color:var(--champagne);}
@media (max-width:560px){
  .cat-grid{grid-template-columns:minmax(0,1fr);gap:18px;}
  .cat-card{height:280px;padding:24px;border-radius:4px 24px 4px 24px;}
  .cat-card h3{font-size:1.45rem;}
}

/* ---------- Benefits / why-choose grid ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.benefit-card{background:var(--ivory);padding:38px 32px;transition:background .4s var(--ease);}
.benefit-card:hover{background:var(--ivory-2);}
.benefit-card .service-icon{margin-bottom:22px;}
.benefit-card h3{font-size:1.25rem;}
.benefit-card p{color:var(--brown);font-size:0.88rem;margin-top:10px;}
@media (max-width:560px){
  .benefit-grid{grid-template-columns:minmax(0,1fr);}
  .benefit-card{padding:30px 24px;}
}

/* ---------- Related services strip ---------- */
.related-strip{display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch;}
.related-card{
  flex:0 0 220px;background:var(--ivory);border:1px solid var(--line);border-radius:6px;
  padding:26px;transition:.35s var(--ease);
}
.related-card:hover{border-color:var(--champagne);box-shadow:var(--shadow-soft);transform:translateY(-4px);}
.related-card h4{font-family:'Cormorant Garamond',serif;font-size:1.2rem;}
.related-card span{font-size:0.75rem;color:var(--champagne-dark);display:block;margin-top:8px;}
@media (max-width:560px){
  .related-strip{gap:14px;margin-right:-20px;padding-right:20px;}
  .related-card{flex-basis:190px;padding:22px;}
}

/* ---------- Instagram strip ---------- */
.insta-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.insta-strip a{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:1/1;display:block;}
.insta-strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.insta-strip a:hover img{transform:scale(1.08);}
@media (max-width:900px){.insta-strip{grid-template-columns:repeat(3,1fr);}}

/* ---------- Sticky mobile action bar ---------- */
.sticky-mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:var(--charcoal);padding:12px 16px;
  gap:10px;box-shadow:0 -10px 30px rgba(0,0,0,0.2);
}
.sticky-mobile-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 10px;border-radius:999px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
}
.sticky-mobile-bar .smb-book{background:linear-gradient(120deg,var(--champagne),var(--rosegold));color:var(--charcoal);}
.sticky-mobile-bar .smb-wa{background:#25D366;color:#fff;}
.sticky-mobile-bar .smb-call{border:1px solid rgba(251,247,241,0.3);color:var(--ivory);flex:0 0 auto;width:48px;padding:14px;}
@media (max-width:780px){
  .sticky-mobile-bar{display:flex;}
  body{padding-bottom:76px;}
}
@media (max-width:380px){
  .sticky-mobile-bar{padding:10px 12px;gap:8px;}
  .sticky-mobile-bar a{
    gap:6px;
    padding:12px 8px;
    font-size:0.64rem;
    letter-spacing:0.06em;
  }
  .sticky-mobile-bar .smb-call{width:44px;padding:12px;}
}

/* ---------- Misc page utility ---------- */
.svc-section-narrow{max-width:760px;margin:0 auto;}
.two-col-text{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
@media (max-width:800px){.two-col-text{grid-template-columns:1fr;gap:24px;}}