:root{--teal:#1fb5b5;--ink:#111;--dark:#161616;--text:#e9e9e9;--muted:#a8a8a8;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Montserrat',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--ink);color:var(--text);font:300 16px/1.7 var(--sans)}
a{color:var(--teal);text-decoration:none}
img{max-width:100%;display:block}
h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.04em;margin:0 0 .6em}
h2{font-size:clamp(2rem,4vw,3rem);text-align:center;color:#fff;text-transform:uppercase}
h3{font-size:1.5rem;color:var(--teal);text-transform:uppercase}
section{padding:90px 6vw}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:.85em 1.8em;border:2px solid var(--teal);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:600;font-family:var(--sans);cursor:pointer;transition:.2s}
.btn:hover{background:transparent;color:var(--teal)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 6vw;background:rgba(10,10,10,.88);backdrop-filter:blur(6px)}
.brand img{height:48px;width:auto}
.nav nav{display:flex;gap:2rem;align-items:center}
.nav nav a{color:#fff;text-transform:uppercase;font-size:.78rem;letter-spacing:.15em;font-weight:400}
.nav nav a:hover,.nav .phone{color:var(--teal)}
#menu,.burger{display:none}
@media(max-width:820px){
  .burger{display:block;width:30px;height:22px;position:relative;cursor:pointer}
  .burger span,.burger span:before,.burger span:after{position:absolute;left:0;width:30px;height:2px;background:#fff;content:""}
  .burger span{top:10px}.burger span:before{top:-9px}.burger span:after{top:9px}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#0c0c0c;max-height:0;overflow:hidden;transition:max-height .3s}
  .nav nav a{padding:1rem;border-top:1px solid #222;width:100%;text-align:center}
  #menu:checked~nav{max-height:400px}
}

/* hero */
.hero{position:relative;height:100vh;min-height:560px;display:grid;place-items:center;padding:0;overflow:hidden;text-align:center}
.slides div{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;animation:fade 24s infinite}
.slides div:nth-child(2){animation-delay:6s}.slides div:nth-child(3){animation-delay:12s}.slides div:nth-child(4){animation-delay:18s}
@keyframes fade{0%{opacity:0;transform:scale(1.04)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1)}100%{opacity:0}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.6))}
.hero-inner{position:relative;z-index:2;padding:0 6vw}
.hero-logo{margin:0 auto;max-width:min(560px,80vw)}
.tag{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.3em;text-transform:uppercase;color:#fff;margin:.4em 0 1.4em}
.cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* features */
.features{background:var(--dark)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;max-width:1200px;margin:2.5rem auto 0}
.features article{border-top:2px solid var(--teal);padding-top:1.2rem}
.features p{color:var(--muted);margin:0}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:.3s}
.gallery a:hover img{opacity:.8}
@media(max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* services */
.services,.hairquote{position:relative;background:#0d0d0d}
.services:before,.hairquote:before{content:"";position:absolute;inset:0;background:var(--bg) center/cover fixed;opacity:.12}
.services>*,.hairquote>*{position:relative}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:2rem auto}
.tabs button{background:transparent;border:1px solid #444;color:#ccc;padding:.7em 1.3em;font:400 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.tabs button.on,.tabs button:hover{border-color:var(--teal);color:#fff;background:var(--teal)}
.panel{display:none;max-width:860px;margin:0 auto}
.panel.on{display:block}
.intro{text-align:center;color:var(--muted);margin:0 auto 1.6rem}
table{width:100%;border-collapse:collapse;background:rgba(0,0,0,.45)}
th{color:var(--teal);text-transform:uppercase;font-size:.75rem;letter-spacing:.14em;font-weight:600;text-align:left;padding:.9em 1em;border-bottom:2px solid var(--teal)}
td{padding:.75em 1em;border-bottom:1px solid #262626}
td+td,th+th{text-align:right;white-space:nowrap}
td small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1.5rem}

/* quotes */
.quotes{background:var(--dark)}
blockquote{margin:0;padding:1.6rem;border-left:2px solid var(--teal);background:#1c1c1c;font-family:var(--serif);font-size:1.25rem;line-height:1.5;color:#ddd}
cite{display:block;margin-top:1rem;font:600 .75rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-style:normal}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:1300px;margin:0 auto}
.about h2{text-align:left}
.about p{color:var(--muted)}
.addr{color:#fff!important;border-left:2px solid var(--teal);padding-left:1rem}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:2rem}}

/* hair quote */
.hairquote h2{font-style:italic;text-transform:none}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:1200px;margin:2.5rem auto 0}
.grid4 a{display:block;text-align:center;padding:2rem 1.2rem;border:1px solid #333;background:rgba(0,0,0,.5);transition:.2s}
.grid4 a:hover{border-color:var(--teal)}
.grid4 strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--teal);text-transform:uppercase;letter-spacing:.06em}
.grid4 span{color:#ccc;font-size:.9rem}

/* brands */
.brands{background:#fff;color:#222}
.brands h2{color:#222}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.5rem 3.5rem;max-width:1100px;margin:2rem auto 0}
.logos img{max-height:70px;width:auto;filter:grayscale(1);opacity:.75;transition:.2s}
.logos img:hover{filter:none;opacity:1}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;max-width:1200px;margin:0 auto}
.contact h2{text-align:left}
.contact h3{margin-top:1.5rem}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.3rem 2rem;margin:0}
.hours dt{color:#fff}.hours dd{margin:0;color:var(--muted)}
form label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#bbb;margin-bottom:1rem}
form input,form textarea{display:block;width:100%;margin-top:.4rem;padding:.8em;background:#1b1b1b;border:1px solid #333;color:#fff;font:400 1rem var(--sans)}
form input:focus,form textarea:focus{outline:none;border-color:var(--teal)}
.hp{position:absolute;left:-9999px}
@media(max-width:820px){.contact{grid-template-columns:1fr;gap:2rem}}

footer{text-align:center;padding:2.5rem 6vw;background:#080808;color:var(--muted);font-size:.85rem}
footer p{margin:.3rem 0}

.thanks{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem}
.thanks img{margin:0 auto 2rem;height:70px;width:auto}