/* Luxury Beauty Salon — beige & gold */
:root{
  --beige:#f7f1e8;
  --beige-deep:#efe4d2;
  --cream:#fffdf9;
  --gold:#c6a15b;
  --gold-dark:#a8843f;
  --ink:#3a3227;
  --ink-soft:#6b5f4d;
  --line:#e5d8c2;
  --radius:14px;
  --shadow:0 10px 30px rgba(166,132,63,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--beige);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.2}
a{color:inherit}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,241,232,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:12px}
.brand-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.brand-text{line-height:1.2}
.brand em{font-style:normal;color:var(--gold-dark);display:block;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;font-family:'Jost',sans-serif}
.nav{display:flex;align-items:center;gap:18px}
.nav a:not(.btn){text-decoration:none;font-size:.92rem;letter-spacing:.04em;color:var(--ink-soft)}
.nav a:not(.btn):hover{color:var(--gold-dark)}

/* Buttons */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 28px;border-radius:999px;font-size:.85rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;box-shadow:var(--shadow)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(166,132,63,.28)}
.btn-outline{border:1px solid var(--gold);color:var(--gold-dark);background:transparent}
.btn-outline:hover{background:rgba(198,161,91,.1)}
.btn-sm{padding:10px 20px;font-size:.75rem}

/* Hero */
.hero{padding:64px 0 72px;background:radial-gradient(1200px 600px at 80% -10%,rgba(198,161,91,.18),transparent),var(--beige)}
.hero-grid{display:grid;gap:36px;align-items:center}
.eyebrow{
  text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;
  color:var(--gold-dark);margin-bottom:14px;font-weight:500;
}
.eyebrow.center{text-align:center}
.hero h1{font-size:3.1rem;margin-bottom:16px}
.tagline{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.35rem;color:var(--gold-dark);margin-bottom:12px}
.hero-desc{color:var(--ink-soft);max-width:34ch;margin-bottom:26px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hero-hours{font-size:.85rem;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
.hero-photo img{border-radius:var(--radius);box-shadow:var(--shadow);border:6px solid var(--cream);aspect-ratio:4/5;object-fit:cover;width:100%}

/* Sections */
.section{padding:72px 0}
.section-alt{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{text-align:center;font-size:2.2rem;margin-bottom:48px}
.section-title::after{content:"";display:block;width:64px;height:2px;background:var(--gold);margin:16px auto 0}

/* Service blocks */
.service-block{margin-bottom:64px}
.service-block:last-child{margin-bottom:0}
.service-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.service-head h3{font-size:1.9rem;margin-bottom:6px}
.service-sub{color:var(--ink-soft);max-width:52ch}
.service-photos{display:flex;gap:12px}
.service-photos img{width:110px;height:110px;object-fit:cover;border-radius:12px;border:3px solid var(--cream);box-shadow:var(--shadow)}

.price-cols{display:grid;gap:20px}
.price-cols.single{max-width:560px}
.price-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.price-card h4{font-size:1.25rem;margin-bottom:6px;color:var(--gold-dark);letter-spacing:.02em}
.price-card h4 small{font-family:'Jost',sans-serif;font-weight:400;font-size:.8rem;color:var(--ink-soft)}
ul.prices{list-style:none}
ul.prices li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dotted var(--line);font-size:.98rem}
ul.prices li:last-child{border-bottom:none}
ul.prices .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
ul.prices .price{font-weight:600;color:var(--gold-dark);white-space:nowrap;font-family:'Playfair Display',Georgia,serif;font-size:1.05rem}
ul.prices .price small{font-family:'Jost',sans-serif;font-weight:400;font-size:.75rem;color:var(--ink-soft)}
.note{margin-top:14px;font-size:.85rem;color:var(--ink-soft);font-style:italic}

/* Hair treatments */
.service-block.hair .service-head{margin-bottom:24px}
.hair-grid{display:grid;gap:18px;margin-bottom:24px}
.treatment-card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.treatment-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.treatment-card h4{font-size:1.35rem;margin-bottom:10px;color:var(--gold-dark)}
.treatment-card h4 small{font-family:'Jost',sans-serif;font-size:.85rem;font-weight:400;color:var(--ink-soft)}
.treatment-card p{color:var(--ink-soft);font-size:.95rem}
.hair-prices{max-width:560px}

/* CTA band */
.cta-band{
  margin-top:56px;text-align:center;background:linear-gradient(135deg,#3a3227,#5a4c36);
  color:var(--beige);border-radius:var(--radius);padding:44px 24px;box-shadow:var(--shadow);
}
.cta-band p{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;margin-bottom:20px;font-style:italic}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery-grid img{border-radius:12px;aspect-ratio:1;object-fit:cover;width:100%;border:3px solid #fff;box-shadow:var(--shadow);transition:transform .25s ease}
.gallery-grid img:hover{transform:scale(1.02)}

/* Contact */
.contact-grid{display:grid;gap:18px}
.contact-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.contact-card h4{font-size:1.15rem;color:var(--gold-dark);margin-bottom:10px;letter-spacing:.04em}
.contact-card p{color:var(--ink-soft);margin-bottom:12px}
.link-gold{color:var(--gold-dark);font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold)}
.link-gold:hover{color:var(--ink)}

/* Footer */
.site-footer{background:#2e2820;color:#d9cdb4;padding:48px 0;text-align:center}
.footer-brand{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;color:var(--gold);margin-bottom:6px}
.footer-tag{font-style:italic;margin-bottom:16px;color:#bfae8e}
.footer-small{font-size:.82rem;color:#8f8268;margin-top:6px}

/* Responsive */
@media (min-width:640px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
  .hero{padding:96px 0}
  .hero h1{font-size:4.2rem}
  .price-cols{grid-template-columns:repeat(2,1fr)}
  .price-cols.three{grid-template-columns:repeat(3,1fr)}
  .hair-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(5,1fr)}
  .service-photos img{width:140px;height:140px}
}
@media (max-width:639px){
  .nav a:not(.btn){display:none}
  .hero h1{font-size:2.6rem}
  .section-title{font-size:1.8rem}
  .service-head h3{font-size:1.6rem}
}