/* Salon May – Premium Hair Salon Website */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;700&display=swap');

:root {
  --dark-olive: #2e2a1a;
  --olive: #4a4528;
  --gold-brown: #8b7445;
  --champagne: #f5ede0;
  --warm-white: #faf6ef;
  --cream: #ede4d3;
  --accent: #c9a060;
  --rose: #a07860;
  --light-gold: #d4b880;
  --text: #2e2a1a;
  --text-light: #6e6040;
  --white: #ffffff;
  --border: rgba(139,116,69,0.2);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Lato',sans-serif; background:var(--warm-white); color:var(--text); overflow-x:hidden; }

/* PASSWORD GATE */
#gate {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(140deg,#1a1810 0%,#3a3220 50%,#1a1810 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gate-box {
  background:rgba(255,255,255,0.04); border:1px solid rgba(201,160,96,0.3);
  backdrop-filter:blur(20px); border-radius:20px;
  padding:50px 40px; max-width:420px; width:100%; text-align:center;
}
.gate-box .gicon { font-size:2.8rem; margin-bottom:18px; }
.gate-box h2 { font-family:'Playfair Display',serif; color:var(--champagne); font-size:1.35rem; margin-bottom:10px; line-height:1.4; }
.gate-box p { color:rgba(245,237,224,0.6); font-size:0.88rem; margin-bottom:28px; }
.gate-box input {
  width:100%; padding:13px 18px; border-radius:8px;
  border:1px solid rgba(201,160,96,0.45); background:rgba(255,255,255,0.08);
  color:white; font-size:1rem; text-align:center; letter-spacing:4px;
  margin-bottom:14px; outline:none;
}
.gate-box button {
  width:100%; padding:14px; border-radius:8px;
  background:linear-gradient(135deg,var(--gold-brown),var(--accent));
  border:none; color:white; font-size:0.95rem; font-weight:700;
  cursor:pointer; letter-spacing:1px; transition:opacity 0.3s;
}
.gate-box button:hover { opacity:0.88; }
#gate-err { color:#ff9090; font-size:0.83rem; margin-top:10px; display:none; }

/* NAV */
nav {
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  height:68px; padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(46,42,26,0.96); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,160,96,0.15); transition:height 0.3s;
}
.n-logo { font-family:'Playfair Display',serif; color:var(--champagne); font-size:1.25rem; text-decoration:none; letter-spacing:1px; }
.n-logo em { color:var(--accent); font-style:italic; }
.n-links { display:flex; gap:32px; list-style:none; }
.n-links a { color:rgba(245,237,224,0.8); text-decoration:none; font-size:0.8rem; letter-spacing:1.8px; text-transform:uppercase; transition:color 0.3s; }
.n-links a:hover, .n-links a.active { color:var(--accent); }
.n-cta {
  background:linear-gradient(135deg,var(--gold-brown),var(--accent));
  color:white; padding:9px 22px; border-radius:22px; text-decoration:none;
  font-size:0.8rem; font-weight:700; letter-spacing:1px; transition:transform 0.3s,box-shadow 0.3s;
}
.n-cta:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(201,160,96,0.4); }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger span { width:23px; height:2px; background:var(--champagne); display:block; transition:0.3s; }
.mob-menu {
  display:none; position:fixed; top:68px; inset-inline:0;
  background:rgba(46,42,26,0.98); backdrop-filter:blur(12px);
  padding:28px 5%; z-index:99;
}
.mob-menu.open { display:block; }
.mob-menu a { display:block; color:var(--champagne); text-decoration:none; padding:13px 0; border-bottom:1px solid rgba(201,160,96,0.1); font-size:0.95rem; letter-spacing:1px; }

/* HERO */
#hero {
  min-height:100vh; padding-top:68px;
  background:linear-gradient(140deg,#2e2a1a 0%,#4a4528 50%,#2e2a1a 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.hero-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 55% at 25% 50%,rgba(201,160,96,0.14) 0%,transparent 70%),
             radial-gradient(ellipse 50% 45% at 80% 50%,rgba(139,116,69,0.1) 0%,transparent 70%);
  animation:glowPulse 9s ease-in-out infinite alternate;
}
@keyframes glowPulse { 0%{opacity:0.7} 100%{opacity:1} }
.shimmer-sweep {
  position:absolute; top:0; left:-150%; width:70%; height:100%;
  background:linear-gradient(105deg,transparent 40%,rgba(201,160,96,0.1) 50%,rgba(255,255,255,0.06) 55%,rgba(201,160,96,0.1) 60%,transparent 70%);
  animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep { 0%{left:-150%} 55%,100%{left:160%} }
.spark-wrap { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sp {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.85) 0%,rgba(201,160,96,0.5) 45%,transparent 70%);
  animation:spFloat linear infinite;
}
@keyframes spFloat {
  0% { transform:translateY(100vh) scale(0); opacity:0; }
  10% { opacity:0.8; }
  90% { opacity:0.3; }
  100% { transform:translateY(-15vh) scale(1.2); opacity:0; }
}
.hero-inner { position:relative; z-index:2; text-align:center; padding:0 20px; max-width:800px; }
.h-badge {
  display:inline-block; background:rgba(201,160,96,0.12); border:1px solid rgba(201,160,96,0.38);
  color:var(--accent); padding:7px 20px; border-radius:22px;
  font-size:0.76rem; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:22px;
}
.hero-inner h1 {
  font-family:'Playfair Display',serif;
  color:var(--champagne); font-size:clamp(2.8rem,7vw,5rem);
  line-height:1.08; margin-bottom:6px;
}
.hero-inner h1 em { color:var(--accent); font-style:italic; }
.h-loc { color:rgba(245,237,224,0.58); font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:22px; }
.hero-inner > p {
  color:rgba(245,237,224,0.75); font-size:clamp(0.94rem,2vw,1.08rem);
  font-weight:300; line-height:1.8; max-width:540px; margin:0 auto 38px;
}
.h-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-p {
  background:linear-gradient(135deg,var(--gold-brown),var(--accent));
  color:white; padding:15px 36px; border-radius:28px; text-decoration:none;
  font-weight:700; font-size:0.93rem; letter-spacing:0.8px;
  transition:transform 0.3s,box-shadow 0.3s;
  box-shadow:0 8px 28px rgba(201,160,96,0.35);
}
.btn-p:hover { transform:translateY(-3px); box-shadow:0 14px 38px rgba(201,160,96,0.5); }
.btn-o {
  border:1.5px solid rgba(201,160,96,0.55); color:var(--champagne);
  padding:15px 36px; border-radius:28px; text-decoration:none;
  font-size:0.93rem; transition:all 0.3s;
}
.btn-o:hover { background:rgba(201,160,96,0.1); border-color:var(--accent); }
.h-stars { margin-top:45px; display:flex; align-items:center; justify-content:center; gap:10px; }
.stars-g { color:var(--accent); font-size:1.05rem; letter-spacing:2px; }
.h-stars p { color:rgba(245,237,224,0.55); font-size:0.82rem; }

/* TRUST BAR */
.trust-bar {
  background:var(--dark-olive); padding:16px 5%;
  display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap;
}
.tb-item { display:flex; align-items:center; gap:8px; color:var(--champagne); font-size:0.78rem; letter-spacing:1.8px; text-transform:uppercase; }
.tb-dot { width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0; }

/* SECTIONS */
section { padding:85px 5%; }
.sec-lbl { display:block; color:var(--accent); font-size:0.73rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; }
.sec-ttl { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,2.7rem); color:var(--text); margin-bottom:16px; line-height:1.2; }
.sec-line { width:52px; height:2px; background:linear-gradient(90deg,var(--accent),var(--light-gold)); margin:0 0 18px; }
.sec-sub { color:var(--text-light); font-size:0.95rem; line-height:1.75; max-width:520px; }

/* SERVICES OVERVIEW CARDS */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px; max-width:1200px; margin:0 auto; }
.svc-hdr { text-align:center; margin-bottom:55px; }
.svc-hdr .sec-line { margin:18px auto; }
.svc-hdr .sec-sub { margin:0 auto; }
.svc-c {
  background:white; border-radius:16px; padding:32px 28px;
  border:1px solid var(--border); transition:transform 0.3s,box-shadow 0.3s;
  position:relative; overflow:hidden;
}
.svc-c::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--light-gold)); transform:scaleX(0); transition:transform 0.3s; transform-origin:left; }
.svc-c:hover { transform:translateY(-5px); box-shadow:0 18px 45px rgba(46,42,26,0.1); }
.svc-c:hover::before { transform:scaleX(1); }
.svc-ico { font-size:1.9rem; margin-bottom:16px; }
.svc-c h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--dark-olive); margin-bottom:10px; }
.svc-c p { color:var(--text-light); font-size:0.88rem; line-height:1.72; margin-bottom:14px; }
.svc-price { color:var(--accent); font-weight:700; font-size:0.88rem; }

/* ABOUT SECTION */
.ab-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; max-width:1150px; margin:0 auto; }
.ab-vis {
  border-radius:20px; height:500px; position:relative;
  background:linear-gradient(145deg,var(--cream) 0%,var(--champagne) 50%,rgba(201,160,96,0.3) 100%);
  display:flex; align-items:center; justify-content:center;
}
.av-init { font-family:'Playfair Display',serif; font-size:10rem; color:rgba(139,116,69,0.25); font-style:italic; line-height:1; }
.ab-badge {
  position:absolute; bottom:28px; right:28px;
  background:var(--dark-olive); color:var(--champagne);
  padding:16px 20px; border-radius:12px; text-align:center;
}
.ab-badge .bnum { font-family:'Playfair Display',serif; font-size:2.2rem; color:var(--accent); display:block; line-height:1; }
.ab-badge span { font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; }
.ab-txt p { color:var(--text-light); font-size:0.96rem; line-height:1.82; margin-bottom:20px; }
.ab-feats { list-style:none; margin:26px 0; }
.ab-feats li { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(201,160,96,0.12); }
.af-ck { color:var(--accent); font-size:0.95rem; flex-shrink:0; margin-top:2px; }
.ab-feats li p { margin:0; font-size:0.93rem; color:var(--text); }

/* REVIEWS */
.rv-sec { background:var(--dark-olive); }
.rv-sec .sec-ttl { color:var(--champagne); }
.rv-hdr { text-align:center; margin-bottom:55px; }
.rv-score { display:flex; align-items:center; justify-content:center; gap:15px; margin:14px 0 6px; }
.rv-num { font-family:'Playfair Display',serif; font-size:4rem; color:var(--light-gold); line-height:1; }
.rv-detail .rs { color:var(--accent); font-size:1.4rem; letter-spacing:2px; }
.rv-detail p { color:rgba(245,237,224,0.55); font-size:0.82rem; margin-top:5px; }
.rv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px; max-width:1200px; margin:0 auto; }
.rv-c {
  background:rgba(255,255,255,0.05); border:1px solid rgba(201,160,96,0.12);
  border-radius:16px; padding:28px; transition:transform 0.3s,border-color 0.3s;
}
.rv-c:hover { transform:translateY(-3px); border-color:rgba(201,160,96,0.25); }
.rv-stars { color:var(--accent); font-size:0.87rem; margin-bottom:13px; }
.rv-q { color:rgba(245,237,224,0.78); font-size:0.92rem; line-height:1.75; font-style:italic; margin-bottom:18px; }
.rv-person { display:flex; align-items:center; gap:12px; }
.rv-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--gold-brown),var(--accent)); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:0.88rem; flex-shrink:0; }
.rv-name { color:var(--champagne); font-weight:700; font-size:0.87rem; }
.rv-meta { color:rgba(245,237,224,0.45); font-size:0.77rem; }

/* GALLERY PREVIEW */
.gal-pre-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1100px; margin:0 auto; }
.gp-item { border-radius:12px; overflow:hidden; position:relative; cursor:pointer; height:200px; transition:transform 0.3s; }
.gp-item:hover { transform:scale(1.03); }
.gp-item:first-child { grid-column:span 2; height:250px; }
.gp-bg { width:100%; height:100%; transition:transform 0.4s; }
.gp-item:hover .gp-bg { transform:scale(1.06); }
.gpb1 { background:linear-gradient(140deg,#4a4528,#8b7445); }
.gpb2 { background:linear-gradient(140deg,#c9a060,#8b7445); }
.gpb3 { background:linear-gradient(140deg,#6e6040,#c9a060); }
.gpb4 { background:linear-gradient(140deg,#2e2a1a,#4a4528); }
.gp-lbl {
  position:absolute; bottom:12px; left:12px;
  background:rgba(255,255,255,0.9); border-radius:5px;
  padding:4px 10px; font-size:0.72rem; font-weight:700; letter-spacing:1px; color:var(--dark-olive); text-transform:uppercase;
}

/* CTA SECTION */
.cta-sec {
  background:linear-gradient(135deg,var(--olive),var(--dark-olive));
  text-align:center; padding:80px 5%;
}
.cta-sec .sec-ttl { color:var(--champagne); }
.cta-sec > p { color:rgba(245,237,224,0.7); max-width:480px; margin:0 auto 32px; line-height:1.7; }
.cta-info { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:32px; }
.ci-item {
  background:rgba(255,255,255,0.07); border:1px solid rgba(201,160,96,0.18);
  border-radius:12px; padding:18px 22px; min-width:165px; text-align:center;
}
.ci-item .ci-ic { font-size:1.4rem; margin-bottom:8px; }
.ci-item h4 { color:var(--champagne); font-size:0.82rem; font-weight:700; margin-bottom:4px; }
.ci-item p { color:rgba(245,237,224,0.55); font-size:0.8rem; }

/* CONTACT PAGE */
.ct-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1100px; margin:0 auto; }
.ct-info h3 { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--dark-olive); margin-bottom:24px; }
.ct-row { display:flex; gap:14px; margin-bottom:22px; align-items:flex-start; }
.ct-ic { width:43px; height:43px; border-radius:10px; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ct-row h4 { color:var(--dark-olive); font-size:0.79rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:3px; }
.ct-row p, .ct-row a { color:var(--text-light); font-size:0.92rem; text-decoration:none; line-height:1.55; }
.ct-form { background:var(--cream); border-radius:18px; padding:38px; }
.ct-form h3 { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--dark-olive); margin-bottom:24px; }
.fg { margin-bottom:17px; }
.fg label { display:block; font-size:0.77rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-light); margin-bottom:6px; }
.fg input, .fg textarea, .fg select {
  width:100%; padding:11px 14px; border:1.5px solid rgba(139,116,69,0.25);
  border-radius:8px; background:white; font-family:'Lato',sans-serif;
  font-size:0.92rem; color:var(--text); outline:none; transition:border-color 0.3s;
}
.fg input:focus, .fg textarea:focus { border-color:var(--accent); }
.fg textarea { height:105px; resize:vertical; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ct-sub {
  width:100%; padding:14px; border:none; border-radius:9px;
  background:linear-gradient(135deg,var(--gold-brown),var(--accent));
  color:white; font-family:'Lato',sans-serif; font-size:0.95rem; font-weight:700;
  cursor:pointer; transition:transform 0.3s,box-shadow 0.3s; letter-spacing:0.8px;
}
.ct-sub:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(201,160,96,0.4); }

/* SERVICES PAGE */
.svc-full-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; max-width:1200px; margin:0 auto; }
.svc-full-card {
  background:white; border-radius:16px; padding:32px;
  border:1px solid var(--border); transition:transform 0.3s,box-shadow 0.3s;
}
.svc-full-card:hover { transform:translateY(-4px); box-shadow:0 18px 45px rgba(46,42,26,0.1); }
.sfc-icon { font-size:2rem; margin-bottom:14px; }
.svc-full-card h3 { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--dark-olive); margin-bottom:10px; }
.svc-full-card p { color:var(--text-light); font-size:0.9rem; line-height:1.75; margin-bottom:14px; }
.price-tag { color:var(--accent); font-weight:700; font-size:0.9rem; margin-bottom:4px; }
.price-note { color:var(--text-light); font-size:0.78rem; }
.svc-cat-title {
  font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--dark-olive);
  margin:50px 0 25px; padding-bottom:12px;
  border-bottom:2px solid var(--border); max-width:1200px; margin-left:auto; margin-right:auto;
}
.svc-cat-title:first-of-type { margin-top:0; }

/* GALLERY PAGE */
.gallery-masonry { column-count:3; column-gap:15px; max-width:1200px; margin:0 auto; }
.gm-item { break-inside:avoid; margin-bottom:15px; border-radius:14px; overflow:hidden; position:relative; cursor:pointer; }
.gm-item:hover .gm-bg { transform:scale(1.05); }
.gm-bg { width:100%; transition:transform 0.4s; }
.gm1 { height:260px; background:linear-gradient(140deg,#4a4528,#c9a060); }
.gm2 { height:200px; background:linear-gradient(140deg,#8b7445,#4a4528); }
.gm3 { height:220px; background:linear-gradient(140deg,#c9a060,#6e6040); }
.gm4 { height:240px; background:linear-gradient(140deg,#2e2a1a,#8b7445); }
.gm5 { height:200px; background:linear-gradient(140deg,#6e6040,#c9a060); }
.gm6 { height:220px; background:linear-gradient(140deg,#4a4528,#8b7445); }
.gm7 { height:180px; background:linear-gradient(140deg,#c9a060,#2e2a1a); }
.gm8 { height:230px; background:linear-gradient(140deg,#8b7445,#c9a060); }
.gm9 { height:210px; background:linear-gradient(140deg,#2e2a1a,#6e6040); }
.gm-tag { position:absolute; bottom:12px; left:12px; background:rgba(46,42,26,0.85); color:white; border-radius:5px; padding:4px 10px; font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; }

/* FOOTER */
footer { background:var(--dark-olive); padding:55px 5% 28px; }
.ft-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:45px; margin-bottom:38px; }
.ft-brand .fl { font-family:'Playfair Display',serif; color:var(--champagne); font-size:1.35rem; margin-bottom:14px; }
.ft-brand .fl em { color:var(--accent); }
.ft-brand p { color:rgba(245,237,224,0.55); font-size:0.87rem; line-height:1.7; margin-bottom:18px; }
.f-socs { display:flex; gap:10px; }
.f-s { width:36px; height:36px; border-radius:7px; background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; color:var(--accent); text-decoration:none; font-size:0.88rem; transition:background 0.3s; }
.f-s:hover { background:rgba(201,160,96,0.18); }
.ft-col h4 { color:var(--champagne); font-size:0.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:18px; }
.ft-col ul { list-style:none; }
.ft-col li { margin-bottom:10px; }
.ft-col a { color:rgba(245,237,224,0.55); text-decoration:none; font-size:0.87rem; transition:color 0.3s; }
.ft-col a:hover { color:var(--accent); }
.ft-btm { border-top:1px solid rgba(201,160,96,0.1); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.ft-btm p { color:rgba(245,237,224,0.35); font-size:0.79rem; }

/* RESPONSIVE */
@media (max-width:900px) {
  .n-links, .n-cta { display:none; }
  .burger { display:flex; }
  .ab-grid, .ct-grid { grid-template-columns:1fr; gap:40px; }
  .ft-grid { grid-template-columns:1fr 1fr; }
  .gallery-masonry { column-count:2; }
  .gal-pre-grid { grid-template-columns:1fr 1fr; }
  .gp-item:first-child { grid-column:span 2; }
}
@media (max-width:600px) {
  section { padding:70px 5%; }
  .ft-grid { grid-template-columns:1fr; gap:28px; }
  .fg-row { grid-template-columns:1fr; }
  .h-btns, .hero-inner .h-btns { flex-direction:column; align-items:center; }
  .gallery-masonry { column-count:1; }
  .gal-pre-grid { grid-template-columns:1fr; }
  .gp-item:first-child { grid-column:span 1; }
}