:root{
    --rose-deep:#8a3b4d;
    --rose:#c97b8e;
    --rose-mid:#d98ca0;
    --rose-light:#f9d9e1;
    --rose-pale:#fdeef1;
    --cream:#fdf2f5;
    --white:#ffffff;
    --text:#4a3640;
    --text-light:#8a7780;
    --gold:#c9a063;
    --shadow: 0 10px 30px rgba(138,59,77,0.12);
  }

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

  html{scroll-behavior:smooth;}

  body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:var(--cream);
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:'Playfair Display',serif;
    color:var(--rose-deep);
  }

  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}

  .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
  }

  .eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:13px;
    font-weight:600;
    color:var(--rose);
  }

  .section-heading{
    text-align:center;
    margin-bottom:46px;
  }

  .section-heading h2{
    font-size:36px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600;
  }

  .section-heading h2 i{
    color:var(--rose);
    font-size:20px;
  }

  .section-heading .underline{
    width:60px;
    height:2px;
    background:var(--rose);
    margin:14px auto 0;
    opacity:.6;
  }

  .section-heading p{
    color:var(--text-light);
    margin-top:10px;
    font-size:15px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
    font-size:14.5px;
    cursor:pointer;
    border:2px solid transparent;
    transition:all .25s ease;
    white-space:nowrap;
  }

  .btn-primary{
    background:var(--rose-mid);
    color:#fff;
    box-shadow:0 8px 20px rgba(217,140,160,0.45);
  }
  .btn-primary:hover{background:var(--rose-deep);transform:translateY(-2px);}

  .btn-outline{
    border-color:var(--rose-mid);
    color:var(--rose-deep);
    background:transparent;
  }
  .btn-outline:hover{background:var(--rose-light);transform:translateY(-2px);}

  .btn-small{padding:10px 22px;font-size:13px;}

  /* ===== HEADER ===== */
  header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 18px rgba(138,59,77,0.06);
  }

  .nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
    max-width:1200px;
    margin:0 auto;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .logo-icon{
    width:48px;height:48px;
    border-radius:50%;
    border:1.5px solid var(--gold);
    display:flex;align-items:center;justify-content:center;
    font-family:'Dancing Script',cursive;
    font-size:22px;
    color:var(--gold);
    flex-shrink:0;
  }

  .logo-text .name{
    font-family:'Dancing Script',cursive;
    font-size:24px;
    color:var(--rose-deep);
    line-height:1;
  }
  .logo-text .sub{
    font-size:9px;
    letter-spacing:2px;
    color:var(--text-light);
    text-transform:uppercase;
  }

  .nav-links{
    display:flex;
    gap:34px;
    align-items:center;
  }

  .nav-links a{
    font-size:14.5px;
    font-weight:500;
    color:var(--text);
    position:relative;
    transition:color .2s;
  }
  .nav-links a:hover, .nav-links a.active{color:var(--rose);}
  .nav-links a.active::after{
    content:'';
    position:absolute;
    left:0;bottom:-8px;
    width:100%;height:2px;
    background:var(--rose);
  }

  .nav-toggle, .hamburger{display:none;}

  .header-right{display:flex;align-items:center;gap:16px;}

  /* ===== HERO ===== */
  .hero{
    position:relative;
    padding:60px 0 90px;
    background:linear-gradient(180deg,#fff 0%, var(--rose-pale) 60%, var(--rose-light) 100%);
    overflow:hidden;
  }

  .hero::before{
    content:'';
    position:absolute;
    top:-100px; right:-150px;
    width:500px;height:500px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(217,140,160,0.18), transparent 70%);
  }

  .hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    position:relative;
    z-index:2;
  }

  .hero-title{
    font-size:50px;
    font-weight:700;
    line-height:1.15;
    margin:14px 0 6px;
  }

  .hero-title .script{
    font-family:'Dancing Script',cursive;
    font-style:italic;
    color:var(--rose-mid);
    font-weight:600;
    font-size:54px;
    display:block;
  }

  .hero-desc{
    font-size:15.5px;
    color:var(--text-light);
    max-width:460px;
    margin:18px 0 30px;
    line-height:1.8;
  }

  .hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:36px;}

  .hero-social{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .avatar-stack{display:flex;}
  .avatar-stack img{
    width:38px;height:38px;
    border-radius:50%;
    border:2px solid #fff;
    margin-left:-10px;
    object-fit:cover;
  }
  .avatar-stack img:first-child{margin-left:0;}

  .hero-social .clients-text{font-size:13.5px;font-weight:500;color:var(--text);}
  .hero-social .clients-text span{display:block;font-size:12px;color:var(--text-light);font-weight:400;}

  .rating{display:flex;align-items:center;gap:6px;}
  .rating .stars{color:var(--gold);font-size:13px;letter-spacing:1px;}
  .rating .score{font-weight:600;font-size:14px;}

  .hero-image-wrap{
    position:relative;
    border-radius:26px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .hero-image-wrap img{width:100%;height:520px;object-fit:cover;}

  .whatsapp-float{
    position:fixed;
    bottom:26px;right:26px;
    width:58px;height:58px;
    border-radius:50%;
    background:var(--rose-mid);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:26px;
    box-shadow:0 8px 22px rgba(138,59,77,0.4);
    z-index:999;
    transition:transform .2s;
  }
  .whatsapp-float:hover{transform:scale(1.08);}

  /* ===== OUR WORK ===== */
  .work{padding:90px 0 70px;}

  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
    margin-bottom:36px;
  }
  .gallery-grid img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:14px;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .gallery-grid img:hover{transform:scale(1.04);box-shadow:var(--shadow);}

  .center-btn{display:flex;justify-content:center;}

  /* ===== SERVICES ===== */
  .services{padding:80px 0;}

  .services-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-bottom:36px;
  }

  .service-card{
    background:#fff;
    border-radius:18px;
    padding:34px 18px;
    text-align:center;
    box-shadow:0 6px 20px rgba(138,59,77,0.06);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}

  .service-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:var(--rose-light);
    color:var(--rose-mid);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;
    margin:0 auto 16px;
  }

  .service-card h3{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--text);font-family:'Poppins',sans-serif;}
  .service-card .from{font-size:11px;color:var(--text-light);text-transform:uppercase;letter-spacing:1px;}
  .service-card .price{font-size:19px;font-weight:700;color:var(--rose-deep);font-family:'Playfair Display',serif;}

  /* ===== WHY CHOOSE US ===== */
  .why{padding:70px 0;background:var(--rose-pale);}

  .why-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:24px;
    text-align:center;
  }

  .why-item .why-icon{
    width:64px;height:64px;
    border-radius:50%;
    border:1.5px solid var(--rose-light);
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;
    color:var(--rose-mid);
    margin:0 auto 14px;
  }
  .why-item p{font-size:13.5px;font-weight:500;color:var(--text);}

  /* ===== TESTIMONIALS ===== */
  .testimonials{padding:90px 0 70px;}

  .testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-bottom:30px;
  }

  .testimonial-card{
    background:#fff;
    border-radius:18px;
    padding:32px 26px;
    box-shadow:0 6px 20px rgba(138,59,77,0.06);
    position:relative;
  }

  .testimonial-card .quote-mark{
    position:absolute;
    top:22px;right:26px;
    font-size:34px;
    color:var(--rose-light);
    font-family:'Playfair Display',serif;
  }

  .testimonial-card .stars{color:var(--gold);font-size:13px;margin-bottom:14px;letter-spacing:2px;}
  .testimonial-card p{font-size:14.5px;color:var(--text);margin-bottom:22px;line-height:1.7;}

  .testimonial-author{display:flex;align-items:center;gap:12px;}
  .testimonial-author img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
  .testimonial-author span{font-weight:600;font-size:14px;color:var(--rose-deep);}

  .dots{display:flex;justify-content:center;gap:8px;}
  .dots span{width:7px;height:7px;border-radius:50%;background:var(--rose-light);}
  .dots span.active{background:var(--rose-mid);}

  /* ===== ABOUT ===== */
  .about{padding:90px 0;}

  .about-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:60px;
    align-items:center;
  }

  .about-image{position:relative;}
  .about-image .salon-img{
    width:100%;
    border-radius:24px;
    height:420px;
    object-fit:cover;
    box-shadow:var(--shadow);
  }
  .about-image .profile-photo{
    position:absolute;
    bottom:-10%;
    left:50%;
    transform:translateX(-50%);
    width:180px;height:180px;
    border-radius:50%;
    border:6px solid #fff;
    object-fit:cover;
    box-shadow:0 10px 26px rgba(138,59,77,0.25);
  }
  .about-image .badge{
    position:absolute;
    bottom:2%;
    right:8%;
    background:var(--rose-light);
    color:var(--rose-deep);
    width:78px;height:78px;
    border-radius:50%;
    border:4px solid #fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    text-align:center;
    line-height:1.1;
  }
  .about-image .badge small{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;}

  .about-text .eyebrow-line{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
  }
  .about-text .eyebrow-line .underline{width:40px;height:2px;background:var(--rose);opacity:.6;}

  .about-text h2{font-size:30px;margin-bottom:18px;line-height:1.4;}
  .about-text h2 .highlight{color:var(--rose-mid);font-style:italic;font-family:'Playfair Display',serif;}
  .about-text p{color:var(--text-light);margin-bottom:14px;line-height:1.85;font-size:15px;}
  .about-text .signature{
    margin-top:18px;
    font-family:'Dancing Script',cursive;
    font-size:20px;
    color:var(--rose-deep);
  }

  /* ===== PRICE LIST ===== */
  .pricing{padding:90px 0 70px;}

  .price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:30px;
  }

  .price-table{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(138,59,77,0.06);
  }

  .price-table .price-head{
    display:flex;
    justify-content:space-between;
    background:var(--rose-mid);
    color:#fff;
    padding:14px 24px;
    font-size:12.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
  }

  .price-row{
    display:flex;
    justify-content:space-between;
    padding:16px 24px;
    border-bottom:1px solid var(--rose-pale);
    font-size:14.5px;
  }
  .price-row:last-child{border-bottom:none;}
  .price-row .name{color:var(--text);font-weight:500;}
  .price-row .amount{color:var(--rose-deep);font-weight:600;}

  .price-note{
    text-align:center;
    background:var(--rose-mid);
    color:#fff;
    padding:12px 20px;
    border-radius:50px;
    font-size:13px;
    max-width:520px;
    margin:0 auto;
  }

  /* ===== LOCATION ===== */
  .location{padding:80px 0 90px;}

  .location-grid{
    display:grid;
    grid-template-columns:0.85fr 1.5fr 0.85fr;
    gap:24px;
    align-items:stretch;
  }

  .location-info{display:flex;flex-direction:column;gap:22px;justify-content:center;}
  .info-item{display:flex;align-items:flex-start;gap:14px;}
  .info-item .icon-circ{
    width:38px;height:38px;border-radius:50%;
    background:var(--rose-light);color:var(--rose-deep);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;flex-shrink:0;
  }
  .info-item p{font-size:14px;line-height:1.6;color:var(--text);}

  .map-box{
    border-radius:18px;
    overflow:hidden;
    min-height:260px;
    position:relative;
    box-shadow:0 6px 20px rgba(138,59,77,0.06);
  }
  .map-box img{width:100%;height:100%;object-fit:cover;}
  .map-pin{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-100%);
    background:#fff;
    padding:8px 14px;
    border-radius:30px;
    box-shadow:0 6px 14px rgba(0,0,0,0.15);
    font-size:12.5px;
    font-weight:600;
    color:var(--rose-deep);
    display:flex;align-items:center;gap:6px;
    white-space:nowrap;
  }
  .map-pin i{color:var(--rose-mid);}

  .hours-box{
    background:#fff;
    border-radius:18px;
    padding:30px 26px;
    box-shadow:0 6px 20px rgba(138,59,77,0.06);
  }
  .hours-box h3{font-size:18px;color:var(--rose-mid);margin-bottom:18px;font-style:italic;}
  .hours-box .day-row{margin-bottom:16px;}
  .hours-box .day-row .day{font-weight:600;font-size:14px;color:var(--text);}
  .hours-box .day-row .time{font-size:13.5px;color:var(--text-light);}
  .hours-box .day-row.closed .time{color:var(--rose-mid);}

  /* ===== CTA ===== */
  .cta{
    position:relative;
    padding:90px 0;
    background:linear-gradient(120deg, rgba(255,255,255,0.85), rgba(253,238,241,0.7)), url('https://placehold.co/1600x500/f3c6d2/f3c6d2?text=+') center/cover;
    text-align:center;
    overflow:hidden;
  }
  .cta-bg-img{
    position:absolute;
    left:0;top:0;bottom:0;
    width:340px;
    object-fit:cover;
    opacity:0.9;
  }
  .cta-content{position:relative;z-index:2;}
  .cta h2{font-size:34px;margin-bottom:14px;}
  .cta p{color:var(--text-light);margin-bottom:30px;font-size:15.5px;}

  /* ===== FOOTER ===== */
  footer{
    background:var(--rose-deep);
    color:#fbe4ea;
    padding:60px 0 26px;
  }

  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:36px;
    padding-bottom:36px;
    border-bottom:1px solid rgba(255,255,255,0.15);
  }

  .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .footer-logo .logo-icon{border-color:#f0c9d3;color:#f0c9d3;}
  .footer-logo .name{color:#fff;}
  .footer-logo .sub{color:#e3b6c1;}

  .footer p.tag{font-size:13px;color:#e3b6c1;line-height:1.7;}

  footer h4{
    font-family:'Playfair Display',serif;
    font-size:16px;
    margin-bottom:18px;
    color:#fff;
    font-weight:600;
  }

  footer ul li{margin-bottom:11px;font-size:13.5px;}
  footer ul li a:hover{color:#fff;}
  footer ul li{color:#e3b6c1;}

  .footer-contact li{display:flex;align-items:flex-start;gap:10px;color:#e3b6c1;}
  .footer-contact i{margin-top:3px;color:#f0c9d3;}

  .social-row{display:flex;gap:12px;margin-top:6px;}
  .social-row a{
    width:36px;height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.3);
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    transition:all .2s;
  }
  .social-row a:hover{background:#fff;color:var(--rose-deep);}

  .footer-bottom{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding-top:22px;
    font-size:12.5px;
    color:#e3b6c1;

  }

  
  /* ===== BOOKING MODAL ===== */
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:3000;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .modal-overlay:target{display:flex;}

  .modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(74,54,64,0.55);
    backdrop-filter:blur(3px);
  }

  .modal-box{
    position:relative;
    z-index:1;
    background:#fff;
    width:100%;
    max-width:440px;
    max-height:90vh;
    overflow-y:auto;
    border-radius:22px;
    padding:38px 32px;
    box-shadow:0 25px 60px rgba(74,54,64,0.3);
    animation:modal-in .25s ease;
  }

  @keyframes modal-in{
    from{opacity:0; transform:translateY(14px) scale(.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }

  .modal-close{
    position:absolute;
    top:16px;right:18px;
    width:34px;height:34px;
    border-radius:50%;
    background:var(--rose-pale);
    color:var(--rose-deep);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    line-height:1;
    transition:background .2s;
  }
  .modal-close:hover{background:var(--rose-light);}

  .modal-box h3{font-size:25px;margin-bottom:6px;padding-right:20px;}
  .modal-box .modal-sub{color:var(--text-light);font-size:13.5px;margin-bottom:26px;line-height:1.6;}

  .modal-form .form-group{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:17px;
  }
  .modal-form label{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:.2px;}

  .modal-form input,
  .modal-form select{
    padding:12px 14px;
    border:1.5px solid var(--rose-light);
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    color:var(--text);
    background:#fff;
    width:100%;
  }
  .modal-form input:focus,
  .modal-form select:focus{
    outline:none;
    border-color:var(--rose-mid);
  }
  .modal-form select:invalid{color:var(--text-light);}

  .modal-form .modal-submit{
    width:100%;
    margin-top:6px;
    border:none;
    font-size:14.5px;
  }

  .modal-success-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:var(--rose-light);
    color:var(--rose-deep);
    display:flex;align-items:center;justify-content:center;
    font-size:30px;
    margin:0 auto 18px;
  }
  .modal-box.success-box{text-align:center;}
  .modal-box.success-box .modal-sub{margin-bottom:28px;}

  @media (max-width:480px){
    .modal-box{padding:30px 22px;}
  }

  /* ===================================== */
  /* RESPONSIVE                            */
  /* ===================================== */

  @media (max-width:992px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-image-wrap{order:-1;}
    .hero-image-wrap img{height:380px;}
    .hero-title{font-size:42px;}
    .hero-title .script{font-size:46px;}
    .hero-desc{max-width:100%;}

    .gallery-grid{grid-template-columns:repeat(3,1fr);}
    .services-grid{grid-template-columns:repeat(3,1fr);}
    .why-grid{grid-template-columns:repeat(3,1fr);row-gap:36px;}
    .testimonials-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}

    .about-grid{grid-template-columns:1fr;gap:80px;}
    .about-image{max-width:480px;margin:0 auto;}

    .price-grid{grid-template-columns:1fr;}

    .location-grid{grid-template-columns:1fr;}
    .map-box{min-height:280px;order:-1;}

    .footer-grid{grid-template-columns:1fr 1fr;gap:40px 24px;}
  }

  @media (max-width:768px){
    .nav-links{
      position:absolute;
      top:100%;left:0;right:0;
      background:#fff;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      max-height:0;
      overflow:hidden;
      box-shadow:0 12px 20px rgba(138,59,77,0.08);
      transition:max-height .3s ease;
    }
    .nav-links a{
      display:block;
      width:100%;
      padding:16px 24px;
      border-bottom:1px solid var(--rose-pale);
    }
    .nav-links a.active::after{display:none;}

    .nav-toggle:checked ~ .nav-links{max-height:420px;}

    .hamburger{
      display:flex;
      align-items:center;
      justify-content:center;
      width:42px;height:42px;
      font-size:20px;
      color:var(--rose-deep);
      cursor:pointer;
      border-radius:8px;
      border:1px solid var(--rose-light);
    }

    .header-right .btn-book-desktop{display:none;}

    .hero-title{font-size:34px;}
    .hero-title .script{font-size:38px;}
    .hero-buttons{flex-direction:column;align-items:stretch;}
    .hero-buttons .btn{width:100%;}

    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}

    .about-image .profile-photo{width:130px;height:130px;}
    .about-text h2{font-size:25px;}

    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

  @media (max-width:480px){
    .container{padding:0 18px;}
    .section-heading h2{font-size:28px;}
    .hero{padding:40px 0 60px;}
    .hero-image-wrap img{height:300px;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .why-grid{grid-template-columns:1fr 1fr;}
    .cta h2{font-size:26px;}
    .cta-bg-img{display:none;}
    .whatsapp-float{width:50px;height:50px;font-size:22px;bottom:18px;right:18px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
  }