/* ---------- Base Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --primary-color:#1d2b23;
  --secondary-color:#2f4f3e;
  --accent-color:#eaf2eb;
  --text-dark:#1d2b23;
  --text-light:#b6c1b4;
  --white:#fff;
  --cream:#eaf2eb;
  --rose-gold:#2f4f3e;

  /* header sizing */
  --header-h:72px;
}

@media (max-width:768px){
  :root{ --header-h:88px; }
}

body{
  font-family:'Inter',sans-serif;
  line-height:1.6;
  color:var(--text-dark);
  overflow-x:hidden;

  /* reserve space for fixed header + iOS safe area */
  padding-top:calc(var(--header-h) + env(safe-area-inset-top, 0px));
}
body.menu-open{ overflow:hidden; }

.serif{ font-family:'Playfair Display',serif; }

/* ---------- Header / Nav ---------- */
.header{
  background:var(--white);
  height:var(--header-h);
  display:flex;
  align-items:center;
  /* FIX: make it fixed and above everything */
  position:fixed; top:0; left:0; right:0;
  z-index:1100;
  box-shadow:0 2px 20px rgba(0,0,0,.05);
}

.nav-container{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%;
}

.logo{ font-size:28px; font-weight:600; color:var(--primary-color); }
.nav-menu{ list-style:none; display:flex; gap:40px; }
.nav-menu a{ text-decoration:none; color:var(--text-dark); font-weight:500; transition:color .3s; }
.nav-menu a:hover{ color:var(--primary-color); }

.book-btn{
  background:var(--primary-color); color:var(--white);
  padding:12px 24px; border:none; border-radius:25px; font-weight:600;
  cursor:pointer; transition:all .3s; text-decoration:none; display:inline-block;
}
.book-btn:hover{ background:var(--secondary-color); transform:translateY(-2px); }

/* ---------- Mobile Toggle & Drawer ---------- */
.mobile-menu-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  width:30px; height:21px; cursor:pointer; z-index:1200;
}
.mobile-menu-toggle span{
  display:block; height:3px; width:100%; background:var(--primary-color);
  border-radius:3px; transition:all .3s;
}
.mobile-menu-toggle.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2){ opacity:0; }
.mobile-menu-toggle.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* Drawer layer */
.mobile-nav{
  position:fixed; inset:0; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 20px 40px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  z-index:1050;               /* below header by default */
  pointer-events:none;        /* <<< important: don’t block header when hidden */
}
.mobile-nav.active{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease;
  z-index:1300;               /* above header when open */
  pointer-events:auto;
}
.mobile-nav ul{ list-style:none; text-align:center; }
.mobile-nav li{ margin-bottom:20px; }
.mobile-nav a{ font-size:1.2rem; color:var(--text-dark); text-decoration:none; font-weight:500; }
.mobile-nav a:hover{ color:var(--primary-color); }
/* readable Book button inside drawer */
.mobile-nav .book-btn,
.mobile-nav a.book-btn:link,
.mobile-nav a.book-btn:visited{
  background:var(--primary-color);
  color:var(--white) !important; -webkit-text-fill-color:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:28px; font-weight:700; font-size:1.1rem; line-height:1;
  text-decoration:none; margin-top:24px; min-width:200px;
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  background:linear-gradient(135deg, var(--secondary-color) 0%, var(--cream) 100%);
  display:flex; align-items:center; position:relative; overflow:hidden;
}

.hero-container{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}

.hero-content h1{
  font-size:3.5rem; font-weight:600; color:var(--text-dark);
  margin-bottom:20px; line-height:1.2;
}
.hero-content .subtitle{ font-size:1.2rem; color:var(--text-light); margin-bottom:30px; font-weight:400; }

/* Make phone link look like secondary CTA */
.btn-secondary{
  background:transparent; color:var(--primary-color);
  border:2px solid var(--primary-color); border-radius:25px; padding:12px 24px;
  font-weight:600; text-decoration:none; display:inline-block; transition:all .3s;
}
.btn-secondary:hover{ background:var(--cream); }
.hero-content a[href^="tel:"]{ composes: btn-secondary; } /* note: harmless in plain CSS; keep explicit below */
.hero-content a[href^="tel:"]{
  background:transparent; color:var(--primary-color);
  border:2px solid var(--primary-color); border-radius:25px; padding:12px 24px;
  font-weight:600; text-decoration:none; display:inline-block; transition:all .3s;
}
.hero-content a[href^="tel:"]:hover{ background:var(--cream); }

.hero-carousel{
  height:500px; border-radius:20px; position:relative; overflow:hidden;
}

.carousel-container{
  position:relative; width:100%; height:100%;
}

.carousel-slides{
  position:relative; width:100%; height:100%;
}

.carousel-slide{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; transition:opacity 0.5s ease-in-out;
}

.carousel-slide.active{
  opacity:1;
}

.carousel-slide img{
  width:100%; height:100%; object-fit:cover; border-radius:20px;
}

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.9); border:none; border-radius:50%;
  width:50px; height:50px; font-size:24px; font-weight:bold;
  color:var(--primary-color); cursor:pointer; transition:all 0.3s ease;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}

.carousel-btn:hover{
  background:var(--white); transform:translateY(-50%) scale(1.1);
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
}

.carousel-prev{
  left:20px;
}

.carousel-next{
  right:20px;
}

.carousel-indicators{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}

.indicator{
  width:12px; height:12px; border-radius:50%; border:2px solid var(--white);
  background:transparent; cursor:pointer; transition:all 0.3s ease;
}

.indicator.active{
  background:var(--white);
}

.indicator:hover{
  transform:scale(1.2);
}

/* ---------- Sections (services, gallery, tables, etc.) ---------- */
.service-images{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin:60px 0;
}
.service-img{
  height:200px; border-radius:15px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--primary-color), var(--accent-color));
  display:flex; align-items:center; justify-content:center; color:var(--white);
  font-weight:600; font-size:1.1rem; text-align:center; transition:transform .3s;
}
.service-img:hover{ transform:scale(1.05); }

.scalp-gallery{ background:var(--secondary-color); padding:60px 0; }
.scalp-images{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:30px; margin-top:40px; }
.scalp-img{
  height:250px; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(45deg, #1d2b23, #2f4f3e, #eaf2eb);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  font-weight:600; font-size:1.2rem; text-align:center; transition:all .3s; box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.scalp-img:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.15); }

.detailed-services{ padding:100px 0; background:var(--white); }
.service-category{ margin-bottom:60px; padding:40px; background:var(--cream); border-radius:20px; }
.category-title{ font-size:2rem; font-weight:600; color:var(--primary-color); margin-bottom:30px; text-align:center; }
.services-table{ display:grid; gap:20px; }
.service-row{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px;
  padding:20px; background:var(--white); border-radius:15px; align-items:center;
  box-shadow:0 5px 20px rgba(0,0,0,.05); transition:transform .3s;
}
.service-row:hover{ transform:translateX(10px); }
.service-name{ font-weight:600; color:var(--text-dark); }
.service-name small{ display:block; color:var(--text-light); font-weight:400; font-size:.9rem; margin-top:5px; }
.service-duration{ color:var(--text-light); font-weight:500; }
.service-price{ font-weight:600; color:var(--primary-color); font-size:1.1rem; }
.service-package{ color:var(--secondary-color); font-weight:500; }
.table-header{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px;
  padding:15px 20px; background:var(--primary-color); color:var(--white);
  border-radius:15px; font-weight:600; margin-bottom:15px;
}

@media (max-width:768px){
  .service-row, .table-header{ grid-template-columns:1fr; text-align:center; }
  .scalp-images{ grid-template-columns:1fr; }
}

/* ---------- Generic sections ---------- */
.services{ padding:100px 0; background:var(--white); }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.section-header{ text-align:center; margin-bottom:60px; }
.section-title{ font-size:2.5rem; font-weight:600; color:var(--text-dark); margin-bottom:15px; }
.section-subtitle{ font-size:1.1rem; color:var(--text-light); max-width:600px; margin:0 auto; }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:40px; }
.service-card{
  background:var(--white); border-radius:20px; padding:40px; box-shadow:0 10px 40px rgba(0,0,0,.08);
  transition:transform .3s, box-shadow .3s; border:1px solid var(--secondary-color);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:0 20px 60px rgba(0,0,0,.12); }
.service-icon{
  width:60px; height:60px; background:var(--primary-color); border-radius:15px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:24px; color:var(--white);
}
.service-card h3{ font-size:1.4rem; font-weight:600; margin-bottom:15px; color:var(--text-dark); }
.service-card p{ color:var(--text-light); margin-bottom:20px; }
.service-link{ color:var(--primary-color); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:gap .3s; }
.service-link:hover{ gap:12px; }

/* ---------- Coupons ---------- */
.coupons{ padding:80px 0; background:var(--secondary-color); }
.coupons-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; margin-top:40px; }
.coupon-card{
  background:linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color:var(--white); padding:30px; border-radius:20px; text-align:center; position:relative; overflow:hidden;
}
.coupon-card::before{ content:''; position:absolute; top:-50px; right:-50px; width:100px; height:100px; background:rgba(255,255,255,.1); border-radius:50%; }
.coupon-amount{ font-size:2.5rem; font-weight:700; margin-bottom:10px; }
.coupon-condition{ font-size:1.1rem; opacity:.9; }

/* ---------- Testimonials ---------- */
.testimonials{ padding:100px 0; background:var(--white); }
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:40px; margin-top:40px; }
.testimonial-card{ background:var(--cream); padding:40px; border-radius:20px; position:relative; }
.testimonial-card::before{ content:'"'; font-size:4rem; color:var(--primary-color); position:absolute; top:10px; left:20px; }
.testimonial-text{ font-style:italic; margin-bottom:20px; padding-left:30px; }
.testimonial-author{ font-weight:600; color:var(--primary-color); padding-left:30px; }

/* ---------- Contact ---------- */
.contact{ padding:100px 0; background:var(--text-dark); color:var(--white); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact-info h2{ font-size:2.5rem; margin-bottom:30px; color:var(--primary-color); }
.contact-item{ display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.contact-icon{ width:40px; height:40px; background:var(--primary-color); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--white); }
.map-container{ height:450px; border-radius:15px; overflow:hidden; }
.map-container iframe{ width:100%; height:100%; border:none; }

/* ---------- Footer ---------- */
.footer{ background:var(--text-dark); color:var(--white); text-align:center; padding:40px 0; border-top:1px solid rgba(255,255,255,.1); }
.footer-links{ margin-bottom:15px; }
.footer-links a{ color:var(--white); text-decoration:none; margin:0 10px; transition:color .3s; }
.footer-links a:hover{ color:var(--accent-color); text-decoration:underline; }

/* ---------- Forms (SMS/Contact) ---------- */
.sms-registration{ margin-top:80px; padding:40px; background:var(--cream); border-radius:20px; }
.form-container{ max-width:800px; margin:0 auto; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group{ margin-bottom:20px; }
.form-group.consent-group{ grid-column:span 2; display:flex; align-items:flex-start; gap:10px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:500; color:var(--text-dark); }
.consent-label{ font-size:.9rem; line-height:1.5; }
.consent-label a{ color:var(--primary-color); text-decoration:none; font-weight:600; }
.consent-label a:hover{ text-decoration:underline; }
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"]{
  width:100%; padding:12px 15px; border:1px solid rgba(0,0,0,.1); border-radius:8px; font-family:'Inter',sans-serif; font-size:1rem; transition:border-color .3s;
}
.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus{ border-color:var(--primary-color); outline:none; }
.form-group input[type="checkbox"]{ width:20px; height:20px; margin-top:3px; }
.submit-btn{
  background:var(--primary-color); color:var(--white); padding:12px 24px; border:none; border-radius:25px;
  font-weight:600; cursor:pointer; transition:all .3s; font-family:'Inter',sans-serif; font-size:1rem;
  grid-column:span 2; width:200px; justify-self:center;
}
.submit-btn:hover{ background:var(--secondary-color); transform:translateY(-2px); }
.compliance-notice{ grid-column:span 2; margin-top:20px; padding:15px; background:rgba(0,0,0,.05); border-radius:8px; }
.compliance-notice p{ font-size:.85rem; color:var(--text-light); margin-bottom:10px; }
.compliance-notice p:last-child{ margin-bottom:0; }
.success-message{ text-align:center; padding:40px 20px; background:var(--cream); border-radius:15px; border:2px solid var(--primary-color); }
.success-message h3{ color:var(--primary-color); font-size:1.8rem; margin-bottom:20px; font-family:'Playfair Display',serif; }
.success-message p{ color:var(--text-dark); margin-bottom:15px; font-size:1.1rem; }

/* ---------- Breadcrumb / FAQ / Privacy ---------- */
.breadcrumb{ background:var(--cream); padding:12px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.breadcrumb ol{ list-style:none; display:flex; align-items:center; gap:8px; font-size:.9rem; }
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li:not(:last-child)::after{ content:'›'; margin-left:8px; color:var(--text-light); font-weight:500; }
.breadcrumb a{ color:var(--primary-color); text-decoration:none; transition:color .3s; }
.breadcrumb a:hover{ color:var(--secondary-color); text-decoration:underline; }
.breadcrumb span{ color:var(--text-light); }

.faq-section{ padding:80px 0; background:var(--white); }
.faq-grid{ display:grid; gap:20px; margin-top:40px; max-width:800px; margin-left:auto; margin-right:auto; }
.faq-item{ background:var(--cream); border-radius:12px; padding:30px; transition:transform .3s, box-shadow .3s; }
.faq-item:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.1); }
.faq-question{ font-size:1.2rem; font-weight:600; color:var(--primary-color); margin-bottom:15px; cursor:pointer; position:relative; padding-right:30px; }
.faq-question::after{ content:'+'; position:absolute; right:0; top:0; font-size:1.5rem; font-weight:300; color:var(--secondary-color); transition:transform .3s; }
.faq-item.active .faq-question::after{ transform:rotate(45deg); }
.faq-answer{ color:var(--text-dark); line-height:1.7; opacity:.9; }
.faq-answer p{ margin:0; }

.privacy-content{ background:var(--white); color:var(--text-dark); padding:40px; border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.08); margin-bottom:40px; max-width:800px; margin-left:auto; margin-right:auto; }
.privacy-section{ margin-bottom:40px; padding:30px; background:var(--cream); border-radius:12px; }
.privacy-section h3{ color:var(--primary-color); margin-bottom:20px; font-size:1.3rem; }
.privacy-section p{ margin-bottom:15px; line-height:1.7; color:var(--text-dark); }
.privacy-section ul{ margin:15px 0; padding-left:25px; }
.privacy-section li{ margin-bottom:8px; line-height:1.6; color:var(--text-dark); }
.privacy-section strong{ color:var(--primary-color); font-weight:600; }

/* ---------- Links / Accessibility ---------- */
.service-card p a, .testimonial-text a, .section-subtitle a, .faq-answer a{
  color:var(--primary-color); text-decoration:underline; text-decoration-color:var(--secondary-color);
  text-underline-offset:2px; transition:color .3s;
}
.service-card p a:hover, .testimonial-text a:hover, .section-subtitle a:hover, .faq-answer a:hover{
  color:var(--secondary-color); text-decoration-color:var(--primary-color);
}

.contact-item a[href^="tel:"]{ color:var(--white); text-decoration:none; transition:color .3s; font-weight:400; }
.contact-item a[href^="tel:"]:hover{ color:var(--accent-color); text-decoration:underline; }

a:focus, button:focus, .faq-question:focus{ outline:2px solid var(--primary-color); outline-offset:2px; }
@media (prefers-contrast: high){
  :root{ --text-light:#666; --accent-color:#f0f0f0; }
}
@media (prefers-reduced-motion: reduce){
  .fade-in, .faq-item, .breadcrumb a{ animation:none; transition:none; }
}

/* ---------- Animations ---------- */
.fade-in{ opacity:0; transform:translateY(20px); animation:fadeInUp .6s ease forwards; }
.animate-delay-1{ animation-delay:.2s; }
.animate-delay-2{ animation-delay:.4s; }
.animate-delay-3{ animation-delay:.6s; }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }

/* ---------- Responsive tweaks ---------- */
@media (max-width:768px){
  .nav-menu{ display:none; }
  .mobile-menu-toggle{ display:flex; order:3; }
  .nav-container{ gap:10px; flex-wrap:wrap; }
  .logo{ flex:1 1 auto; font-size:22px; }
  .header .book-btn{ order:2; padding:8px 12px; border-radius:18px; font-size:.95rem; }

  .hero-container{ grid-template-columns:1fr; text-align:center; }
  .hero-content h1{ font-size:2.1rem; line-height:1.18; max-width:16ch; margin:0 auto 20px; }
  .hero-content .subtitle{ max-width:36ch; margin:0 auto 30px; }

  .hero-content .book-btn,
  .hero-content .btn-secondary,
  .hero-content a[href^="tel:"]{
    display:block; width:100%; max-width:340px; margin:10px auto 0; text-align:center;
  }

  .contact-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }

  .breadcrumb{ padding:8px 0; }
  .breadcrumb ol{ font-size:.8rem; gap:6px; }

  .faq-section{ padding:60px 0; }
  .faq-item{ padding:20px; }
  .faq-question{ font-size:1.1rem; padding-right:25px; }

  .contact-form{ grid-template-columns:1fr; }
  .form-group.consent-group, .submit-btn, .compliance-notice{ grid-column:span 1; }

  /* Carousel mobile styles */
  .hero-carousel{ height:300px; }
  .carousel-btn{ width:40px; height:40px; font-size:18px; }
  .carousel-prev{ left:10px; }
  .carousel-next{ right:10px; }
  .carousel-indicators{ bottom:15px; }
  .indicator{ width:10px; height:10px; }
}