/* Styles shared by the five service pages (sunbeds, hairdressing, lashes and brows, nails, ear piercing). */
*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#1c0e05;--gold:#ffc400;--amber:#ff8a00;--ember:#ff4d12;--cream:#fff3da;--paper:#ffe9c4}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Space Grotesk',sans-serif;background:#180b03;color:var(--cream);line-height:1.65;overflow-x:hidden;
 background-image:radial-gradient(ellipse 90% 55% at 70% 0%,rgba(163,64,15,.55),transparent 70%),linear-gradient(180deg,#1f0d10,#180b03 40%,#241004)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
nav{position:sticky;top:0;z-index:50;background:rgba(20,9,2,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 border-bottom:1px solid rgba(255,196,0,.16);padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
nav .logo img{height:48px;width:auto}
nav ul{display:flex;gap:22px;list-style:none;align-items:center}
nav ul a{color:var(--cream);text-decoration:none;font-size:14.5px;opacity:.88}
nav ul a:hover,nav ul a[aria-current]{color:var(--gold);opacity:1}
.navcall{gap:6px;background:var(--cream);color:var(--ink)!important;padding:10px 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;font-weight:600;opacity:1!important}
.crumbs{font-size:13px;opacity:.75;padding-top:26px}
.crumbs a{color:var(--cream)}
.hero{padding:clamp(28px,5vh,56px) 0 clamp(40px,7vh,80px)}
.kick{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(42px,7vw,92px);margin-bottom:22px}
h2{font-size:clamp(30px,4.4vw,52px);margin-bottom:20px}
h3{font-size:clamp(20px,2.2vw,24px);margin-bottom:8px}
h1 em,h2 em{color:var(--gold);font-style:italic}
.lead{font-size:clamp(17px,1.8vw,20px);max-width:640px;opacity:.94}
.tag{margin-top:22px;font-size:15px;font-weight:600;line-height:1.5}
.tag::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:9px;vertical-align:.12em}
.tag.walk{color:#8ef0b0}
.tag.appt::before{background:var(--gold)}
.tag a{text-underline-offset:3px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid transparent}
.btn.solid{background:linear-gradient(100deg,var(--gold),var(--amber));color:var(--ink)}
.btn.line{border-color:rgba(255,243,218,.55);color:var(--cream)}
.btn.line:hover{border-color:var(--gold);color:var(--gold)}
.btn.nav{border-color:rgba(255,243,218,.6);color:var(--cream)}
.btn.nav:hover{border-color:var(--gold);color:var(--gold)}
.navmap{gap:6px;background:transparent;border:1.5px solid var(--cream);color:var(--cream)!important;padding:8.5px 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;font-weight:600;opacity:1!important}
nav ul a.navmap:hover{background:var(--cream);color:var(--ink)!important}
section{padding:clamp(52px,4vw + 2.2vh,104px) 0}
section.alt{background:rgba(255,196,0,.035);border-top:1px solid rgba(255,196,0,.08);border-bottom:1px solid rgba(255,196,0,.08)}
p{margin-bottom:14px;font-weight:300}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.ph{border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.ph img{width:100%;height:auto;max-height:560px;object-fit:cover}
.ticks{list-style:none;margin-top:18px}
.ticks li{padding:11px 0 11px 30px;border-bottom:1px solid rgba(255,243,218,.12);position:relative;font-weight:300}
.ticks li::before{content:"☀";position:absolute;left:0;color:var(--gold)}
.ticks b,.steps b{font-weight:600}
.steps{counter-reset:s;list-style:none;margin:10px 0 8px;display:grid;gap:14px;max-width:760px}
.steps li{counter-increment:s;padding:16px 18px 16px 62px;position:relative;background:rgba(20,9,2,.55);border:1px solid rgba(255,196,0,.18);border-radius:14px;font-weight:300}
.steps li::before{content:counter(s);position:absolute;left:18px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center}
.note{margin-top:20px;padding:14px 18px;border-left:3px solid var(--gold);background:rgba(255,196,0,.07);border-radius:0 10px 10px 0;max-width:760px}
.notice{background:var(--paper);color:var(--ink);border-radius:20px;padding:clamp(24px,4vw,40px);max-width:860px}
.notice h2{font-size:clamp(26px,3.4vw,36px)}
.notice p,.notice li{font-weight:400}
.notice ul{margin:6px 0 16px 22px}
.notice li{margin-bottom:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:10px}
.card{background:rgba(20,9,2,.55);border:1px solid rgba(255,196,0,.18);border-radius:16px;padding:22px}
.card p{margin:0}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.faq{max-width:860px}
.faq details{border-bottom:1px solid rgba(255,243,218,.14)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-family:'Fraunces',serif;font-size:clamp(18px,2vw,21px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:22px;color:var(--gold);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.links a{padding:11px 18px;border:1px solid rgba(255,243,218,.35);border-radius:999px;color:var(--cream);text-decoration:none;font-size:14.5px}
.links a:hover{border-color:var(--gold);color:var(--gold)}
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.visit table{width:100%;border-collapse:collapse}
.shopfront{margin-top:clamp(32px,5vw,56px);border-radius:20px;overflow:hidden;position:relative;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.shopfront img{width:100%;height:auto;aspect-ratio:1080/780;object-fit:cover}
.shopfront figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;font-size:14px;background:linear-gradient(transparent,rgba(16,7,2,.88))}
.visit td{padding:10px 0;border-bottom:1px dashed rgba(255,243,218,.2)}
.visit td:last-child{text-align:right;color:var(--gold)}
footer{border-top:1px solid rgba(255,243,218,.14);padding:36px 0 110px;font-size:14px;opacity:.9}
footer img{height:52px;width:auto;margin-bottom:12px}
.small{font-size:14px;opacity:.85;margin-top:14px}
@media(max-width:900px){
  /* Below 900px the service links used to be hidden, which left anyone who
     arrived on this page from Google with no way to reach the other services.
     They now wrap onto a second row instead. The bar stops being sticky at
     this width because the floating bar already carries Message and
     Navigate, so letting the top bar scroll away costs nothing. */
  nav{position:static}
  nav .wrap{flex-wrap:wrap;justify-content:center;row-gap:4px}
  nav ul{flex-wrap:wrap;justify-content:center;gap:0 16px}
  nav ul a{display:inline-flex;align-items:center;min-height:42px}
  nav ul li:has(.navmap){display:none}
  .two,.visit{grid-template-columns:1fr}
}
@media(max-width:767px){.hero-ctas,.end-ctas{display:none}.gal{grid-template-columns:1fr 1fr}.gal figure:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/10}
 nav .logo img{height:42px}.hero .ctas .btn{flex:1}}
@media(pointer:coarse){.navcall,.btn{min-height:44px}.tag a{display:inline-block;padding:10px 0;margin:-10px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.hero-trust{margin-top:22px}