/* VIP home hero (emerald panel + jewel stilettos) ported 1:1 from preview dc2c9252, 2026-09-27.
   Scoped to .pk-hero only. Plus: gold underline under the header salon name. Nothing else. */
.pk-hero{--pk-teal:#81D8D0;--pk-char:#102821;--pk-gold:#D4B056;--pk-ivory:#F6F3EC;
  --pk-serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;--pk-sans:"Montserrat","Segoe UI",system-ui,sans-serif;
  background:#102821;color:#F6EFE2;font-family:var(--pk-sans);font-size:20.48px;line-height:1.7;margin:0;padding:0;text-align:start}
.pk-hero,.pk-hero *,.pk-hero *::before,.pk-hero *::after{box-sizing:content-box}
.pk-hero p{margin:0}
.pk-hero-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch;min-height:560px}
.pk-hero-copy{padding:clamp(2.2rem,5vw,4.2rem) clamp(1.2rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center}
.pk-hero .pk-hero-eyebrow{line-height:1.7;color:#D4B056;font-size:12.48px;font-weight:800;letter-spacing:.2em;margin:0 0 .8rem}
.pk-hero .pk-stars{color:#D4B056;letter-spacing:.1em}
.pk-hero .pk-hero-rating{color:#F6EFE2;font-weight:600;margin:0 0 .9rem}
.pk-hero .pk-hero-rating a{color:#F6EFE2!important;text-decoration:none!important}
.pk-hero .pk-pill{display:inline-block;background:#D4B056;color:#102821;border-radius:999px;padding:.3rem .8rem;font-size:11.84px;font-weight:800;letter-spacing:.08em;line-height:1.7}
.pk-hero h1{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif!important;font-weight:600!important;font-size:clamp(2.55rem,5.6vw,3.55rem)!important;line-height:1.12!important;letter-spacing:.02em!important;margin:0 0 1rem;color:#F6EFE2!important;text-transform:none;text-align:start;max-width:none}
.pk-hero .pk-hero-sub{font-size:18.88px;line-height:1.55;margin:0 0 1.5rem;color:#E9E1CF;max-width:32rem}
.pk-hero .pk-btn-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0}
.pk-hero .pk-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.2rem;border-radius:999px;font-family:var(--pk-sans);font-weight:800;font-size:15.2px;letter-spacing:.04em;text-decoration:none!important;text-transform:uppercase;line-height:1;box-shadow:none}
.pk-hero .pk-btn-gold{background:#D4B056;color:#102821!important;border:1.5px solid #D4B056}
.pk-hero .pk-btn-gold:hover{background:#c19d45}
.pk-hero .pk-btn-outline{background:transparent;color:#F6EFE2!important;border:1.5px solid #D4B056}
.pk-hero .pk-hero-micro{line-height:1.7;margin:1.1rem 0 0;font-size:14.4px;color:#CFC6B2;letter-spacing:.02em}
.pk-hero-media{position:relative;overflow:hidden;background:#0b1d18}
.pk-hero-media img{width:100%;height:100%!important;object-fit:cover;object-position:50% 50%;display:block;max-width:none;border-radius:0}
@media (max-width:640px){.pk-hero{font-size:18.4px}}
@media (max-width:820px){
  .pk-hero-grid{grid-template-columns:1fr}
  .pk-hero-media{order:-1;aspect-ratio:2000/1467!important}
  .pk-hero-copy{padding:1.8rem 1.2rem 2.2rem}
}
/* (b) gold underline under the header salon name, same line as preview (.pk-site-name) */
.site-header .brand-name-line{display:inline-block;padding-bottom:.35rem;border-bottom:1.5px solid #D4B056}

/* ===== Header: desktop unchanged; mobile (<=768px) compact band + hamburger (Kai-approved 2026-09-27) ===== */
.hdr-book{display:none}
.nav-toggle-bars{display:none}
@media (max-width:768px){
  .site-header{min-height:0!important;height:auto!important}
  .site-header .header-inner{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:.5rem!important;min-height:0!important;padding:.35rem .75rem!important;position:relative}
  .site-header .brand{flex:0 0 auto!important;max-width:none!important;margin-right:auto}
  .site-header .brand-lockup,.site-header .brand img.brand-lockup{height:52px!important;width:auto!important;max-width:none!important}
  .site-header .brand-text{display:none!important}
  .hdr-book{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1rem;border-radius:999px;background:#D4B056;color:#102821!important;font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap;order:2}
  .site-header .nav-toggle{display:inline-flex!important;align-items:center;gap:.45rem;min-height:44px;min-width:44px;padding:0 .8rem!important;order:3;color:#102821!important;border:2px solid rgba(16,40,33,.55)!important;background:transparent!important;border-radius:999px}
  .nav-toggle-bars{display:inline-block;position:relative;width:18px;height:2px;background:currentColor;border-radius:2px}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
  .nav-toggle-bars::before{top:-6px}.nav-toggle-bars::after{top:6px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}
  .nav-toggle:focus-visible,.hdr-book:focus-visible,.site-nav a:focus-visible{outline:3px solid #102821;outline-offset:2px}
  /* menu panel: Home, The Salon, Services, About, Gallery, Call (Book lives in the header button) */
  .site-header .site-nav{order:4;position:absolute!important;left:0;right:0;top:100%;flex:none!important;width:100%;background:#81D8D0;padding:.5rem 1rem 1rem!important;border-bottom:1px solid rgba(16,40,33,.2);box-shadow:0 10px 24px rgba(16,40,33,.18);z-index:80}
  .js .site-header .site-nav{display:none!important}
  .js .site-header .site-nav.is-open{display:block!important}
  .site-header .site-nav ul{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:.15rem!important}
  .site-header .site-nav li:has(a.nav-book){display:none!important}
  .site-header .site-nav a{display:block;padding:.75rem .85rem!important;font-size:1.05rem!important;min-height:44px}
  /* no-JS fallback: no button, links always visible under the header */
  html:not(.js) .site-header .nav-toggle{display:none!important}
  html:not(.js) .site-header .header-inner{flex-wrap:wrap!important}
  html:not(.js) .site-header .site-nav{position:static!important;display:block!important;box-shadow:none;flex:1 1 100%!important}
}
/* keep the preview's exact hero geometry: reserve the space of the preview's parking line (text itself NOT ported) */
.pk-hero .pk-btn-row + .pk-hero-micro{margin-top:calc(17.6px + 36.203px)}
@media (max-width:600px){.pk-hero .pk-btn-row + .pk-hero-micro{margin-top:calc(17.6px + 61.218px)}}
/* preview has no Montserrat 500 face loaded, so its 500-weight hero text renders with the 400 face; live loads 500, so pin 400 to render identically */
.pk-hero .pk-hero-sub,.pk-hero .pk-hero-micro{font-weight:400}

/* ===== Header v2, desktop/tablet (>=769px): row 1 = logo + big name (left) | Book Online + Call (right); row 2 = slim centred nav ===== */
.hdr-call{display:none}
@media (min-width:769px){
  .site-header{min-height:0!important;height:auto!important}
  .site-header .header-inner{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand book call" "nav nav nav";align-items:center!important;column-gap:.6rem!important;row-gap:0!important;max-width:1280px;margin:0 auto;padding:.55rem clamp(1rem,3vw,2rem) 0!important;min-height:0!important;flex-wrap:nowrap!important}
  .site-header .brand{grid-area:brand;display:flex!important;align-items:center!important;gap:clamp(.7rem,1.6vw,1.2rem)!important;min-width:0;max-width:none!important;flex:none!important;justify-self:start}
  .site-header .brand-lockup,.site-header .brand img.brand-lockup{height:clamp(84px,9vw,112px)!important;width:auto!important;max-width:none!important;flex:none}
  .site-header .brand-text{display:block!important;min-width:0}
  .site-header .brand-text .brand-name-line,.site-header .brand-text strong.brand-name-line{display:inline-block!important;font-size:clamp(1.7rem,3.1vw,2.6rem)!important;line-height:1.1!important;white-space:nowrap!important;padding-bottom:.35rem!important;border-bottom:1.5px solid #D4B056!important}
  .hdr-book,.hdr-call{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:0 1.15rem;border-radius:999px;font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap}
  .hdr-book{grid-area:book;background:#D4B056;color:#102821!important;border:1.5px solid #D4B056}
  .hdr-book:hover{background:#c19d45}
  .hdr-call{grid-area:call;background:transparent;color:#102821!important;border:1.5px solid #102821}
  .hdr-call:hover{background:rgba(16,40,33,.08)}
  .site-header .nav-toggle{display:none!important}
  .site-header .site-nav{grid-area:nav;display:flex!important;justify-content:center!important;position:static!important;width:100%;flex:none!important;margin:.45rem 0 0!important;padding:.35rem 0 .45rem!important;border-top:1px solid rgba(16,40,33,.14);background:transparent!important;box-shadow:none!important}
  .site-header .site-nav ul{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;gap:.35rem!important;flex-direction:row!important}
  .site-header .site-nav li:has(a.nav-book),.site-header .site-nav li:has(a.nav-call){display:none!important}
  .site-header .site-nav a{font-size:.86rem!important;padding:.32rem .8rem!important;min-height:0!important;line-height:1.3!important}
}
@media (min-width:769px) and (max-width:900px){
  .site-header .brand-text .brand-name-line,.site-header .brand-text strong.brand-name-line{font-size:1.55rem!important}
  .site-header .brand-lockup,.site-header .brand img.brand-lockup{height:72px!important}
  .hdr-book,.hdr-call{padding:0 .85rem;font-size:.78rem}
}

/* ===== Design adds 2026-09-27 (Kai-approved) ===== */
/* A. Big interior band */
.vip-interior-band{background:#F6F3EC;padding:clamp(1.5rem,4vw,3rem) 0}
.vip-interior-figure{position:relative;margin:0 auto;max-width:1280px;padding:0 clamp(0rem,2vw,1.5rem)}
.vip-interior-figure img{display:block;width:100%;height:auto;aspect-ratio:1920/1270;max-height:720px;object-fit:cover;object-position:50% 55%;border-radius:clamp(0px,1vw,14px)}
.vip-interior-caption{position:absolute;left:clamp(1rem,4vw,3rem);bottom:clamp(.9rem,3vw,2rem);display:flex;flex-direction:column;gap:.15rem;background:rgba(16,40,33,.82);color:#F6EFE2;padding:.7rem 1.1rem .8rem;border-left:3px solid #D4B056;border-radius:4px;max-width:calc(100% - 2rem)}
.vip-interior-eyebrow{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.25rem,2.4vw,1.8rem);font-weight:600;line-height:1.15}
.vip-interior-sub{font-size:.9rem;color:#E9E1CF;letter-spacing:.02em}
@media (max-width:600px){.vip-interior-caption{position:static;margin:.6rem 1rem 0;max-width:none}.vip-interior-figure{padding:0}.vip-interior-figure img{border-radius:0}}
/* C. One dark accent band: Why Clients Love VIP */
section.vip-dark-band{background:#102821!important;color:#F6EFE2}
section.vip-dark-band .section-title{color:#F6EFE2!important}
section.vip-dark-band .section-lead{color:#E9E1CF!important}
section.vip-dark-band .gold-rule{border-color:#D4B056!important;background:#D4B056!important}
section.vip-dark-band .eyebrow{color:#D4B056!important}
section.vip-dark-band .review-card,section.vip-dark-band blockquote,section.vip-dark-band figure{background:#FFFDF8!important;color:#1c1917!important}
section.vip-dark-band .btn.btn-secondary{background:transparent!important;color:#F6EFE2!important;border:1.5px solid #D4B056!important}
section.vip-dark-band .btn.btn-primary{background:#D4B056!important;color:#102821!important;border-color:#D4B056!important}
/* D2. Phones: full hero paragraph + CTAs on the first screen */
@media (max-width:600px){
  .pk-hero-media{aspect-ratio:2/1!important}
  .pk-hero-copy{padding:1.1rem 1.1rem 1.6rem!important}
  .pk-hero .pk-hero-eyebrow{margin-bottom:.45rem}
  .pk-hero .pk-hero-rating{margin-bottom:.5rem}
  .pk-hero h1{font-size:2.15rem!important;margin-bottom:.6rem}
  .pk-hero .pk-hero-sub{font-size:17px;line-height:1.5;margin-bottom:1rem}
  .pk-hero .pk-btn-row + .pk-hero-micro{margin-top:.9rem}
}
/* D3. Gallery tile 6: fill the tile */
.gallery figure.vip-gallery-fill .photo-frame{height:100%;margin:0;border-radius:inherit;box-shadow:none}
.gallery figure.vip-gallery-fill img{aspect-ratio:4/5!important;height:100%!important;object-fit:cover}

/* Phones: keep footer links (Privacy/Terms) clear of the sticky Call bar (~78px) */
@media (max-width:768px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px) + 28px)!important}
}

/* ===== Home hero: emerald blends into the photo, soft left-to-right fade (Kai call 2026-09-28) =====
   Desktop/tablet only (>=821px). The photo layer fills the whole hero behind the copy; one horizontal
   overlay in the panel emerald (#102821): solid to ~33%, smooth fade to transparent by ~57%.
   The img starts under the fully opaque part so the nails sit in the right half. Mobile stack unchanged. */
@media (min-width:821px){
  .pk-hero{position:relative;overflow:hidden;isolation:isolate}
  .pk-hero-copy{position:relative;z-index:2;grid-column:1}
  .pk-hero-media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:#102821;overflow:hidden}
  .pk-hero-media img{position:absolute;top:0;left:32%;width:68%;height:100%!important;object-fit:cover;object-position:50% 50%}
  .pk-hero-media::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(16,40,33,1) 0%,
      rgba(16,40,33,1) 32%,
      rgba(16,40,33,.97) 34%,
      rgba(16,40,33,.9) 37.5%,
      rgba(16,40,33,.78) 41%,
      rgba(16,40,33,.6) 44.5%,
      rgba(16,40,33,.4) 48%,
      rgba(16,40,33,.22) 51%,
      rgba(16,40,33,.09) 54%,
      rgba(16,40,33,.02) 56%,
      rgba(16,40,33,0) 57.5%,
      rgba(16,40,33,0) 100%)}
}
@media (min-width:821px) and (max-width:1199px){
  .pk-hero-media img{object-position:40% 50%}
}