:root {
         --bs-primary: #0d9488;
         --bs-primary-rgb: 13, 148, 136;
         --bs-body-font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
         --bs-body-color: #000000;
         --bs-body-bg: #FBF7F1
     }

     html {
         scroll-behavior: smooth
     }

     #services,
     #about,
     #gallery,
     #locations,
     #contact {
         scroll-margin-top: 104px
     }

     #top {
         scroll-margin-top: 0
     }

     body {
         margin: 0;
         background: #FBF7F1 !important;
         color: #000 !important;
         font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important
     }

     a {
         color: #0d9488;
         text-decoration: none !important
     }

     a:hover {
         color: #0f766e !important
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         color: inherit
     }

     .font-bricolage {
         font-family: 'Bricolage Grotesque', Georgia, serif !important
     }

     input,
     select,
     textarea {
         font-family: inherit;
         font-size: 16px;
         color: #000;
         background: #FFFFFF;
         border: 1.5px solid #E2D8CA;
         border-radius: 12px;
         padding: 0 16px;
         height: 52px;
         box-sizing: border-box;
         width: 100%;
         outline: none;
         transition: border-color .2s
     }

     input:focus,
     select:focus,
     textarea:focus {
         border-color: #0d9488
     }

     textarea {
         height: 112px;
         padding: 14px 16px;
         resize: none
     }

     label {
         font-size: 14px;
         font-weight: 600;
         color: #3A3350
     }

     /* Smart Booking Modal Styles */
     .pw-modal {
         position: fixed;
         inset: 0;
         z-index: 99999;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(0, 0, 0, 0.65);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         opacity: 0;
         pointer-events: none;
         transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
         font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
         color: #000;
         padding: 20px;
         box-sizing: border-box
     }

     .pw-modal.pw-modal-open,
     .pw-modal.modal-open {
         opacity: 1;
         pointer-events: auto
     }

     .pw-modal-backdrop {
         position: absolute;
         inset: 0
     }

     .pw-modal-content {
         position: relative;
         width: 100%;
         max-width: 480px;
         background: #FFFFFF;
         border-radius: 28px;
         box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
         overflow: hidden;
         display: flex;
         flex-direction: column;
         max-height: 90vh;
         transform: scale(.94) translateY(14px);
         transition: transform .35s cubic-bezier(.16, 1, .3, 1);
         box-sizing: border-box
     }

     .pw-modal.pw-modal-open .pw-modal-content,
     .pw-modal.modal-open .pw-modal-content {
         transform: scale(1) translateY(0)
     }

     .pw-modal-header {
         background: #F0FDFA;
         border-bottom: 1px solid #CCFBF1;
         padding: 26px 28px 20px;
         text-align: center;
         position: relative
     }

     .pw-modal-pill {
         display: inline-block;
         padding: 4px 12px;
         border-radius: 999px;
         background: #CCFBF1;
         color: #0f766e;
         font-size: 11px;
         font-weight: 800;
         letter-spacing: 1.5px;
         text-transform: uppercase;
         margin-bottom: 8px
     }

     .pw-modal-title {
         margin: 0;
         font-family: 'Bricolage Grotesque', Georgia, serif;
         font-size: 24px;
         font-weight: 800;
         letter-spacing: -.5px;
         color: #000
     }

     .pw-modal-subtitle {
         margin: 4px 0 0;
         font-size: 14px;
         color: #5A5468
     }

     .pw-modal-close {
         position: absolute;
         top: 18px;
         right: 18px;
         width: 36px;
         height: 36px;
         border-radius: 50%;
         background: #FFFFFF;
         border: 1.5px solid #E2D8CA;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         color: #5A5468;
         transition: all .2s;
         padding: 0
     }

     .pw-modal-close:hover {
         background: #FBF7F1;
         color: #000;
         border-color: #000
     }

     .pw-modal-body {
         padding: 26px 28px;
         overflow-y: auto;
         flex: 1;
         box-sizing: border-box;
         position: relative
     }

     .pw-step-view {
         display: none;
         animation: pwFadeIn .3s cubic-bezier(.16, 1, .3, 1) forwards
     }

     .pw-step-view.active {
         display: block
     }

     @keyframes pwFadeIn {
         from {
             opacity: 0;
             transform: translateY(10px)
         }

         to {
             opacity: 1;
             transform: translateY(0)
         }
     }

     .pw-input {
         font-family: inherit;
         font-size: 16px;
         color: #000;
         background: #F8FAFC;
         border: 1.5px solid #E2D8CA;
         border-radius: 14px;
         padding: 0 16px;
         height: 50px;
         box-sizing: border-box;
         width: 100%;
         outline: none;
         transition: all .2s
     }

     .pw-input:focus {
         background: #FFFFFF;
         border-color: #0d9488;
         box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12)
     }

     .pw-text-center {
         text-align: center
     }

     .pw-otp-input {
         text-align: center;
         letter-spacing: 14px;
         font-size: 28px;
         font-weight: 800;
         padding-left: 30px
     }

     .pw-back-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 34px;
         height: 34px;
         border-radius: 50%;
         background: #F8FAFC;
         border: 1.5px solid #E2D8CA;
         cursor: pointer;
         color: #5A5468;
         transition: all .2s;
         padding: 0;
         flex-shrink: 0
     }

     .pw-back-btn:hover {
         background: #E2D8CA;
         color: #000
     }

     .pw-salon-card:hover {
         transform: translateY(-2px);
         border-color: #0d9488 !important;
         box-shadow: 0 10px 24px -4px rgba(13, 148, 136, 0.18) !important;
     }

     .pw-btn-primary {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         width: 100%;
         height: 52px;
         border-radius: 14px;
         background: #0d9488;
         color: #FFFFFF;
         font-family: inherit;
         font-size: 16px;
         font-weight: 700;
         border: 0;
         cursor: pointer;
         box-shadow: 0 8px 20px -4px rgba(13, 148, 136, 0.35);
         transition: all .2s
     }

     .pw-btn-primary:hover {
         background: #0f766e;
         transform: translateY(-1px)
     }

     .pw-btn-primary:active {
         transform: translateY(0)
     }

     .pw-btn-primary:disabled {
         background: #E2D8CA;
         color: #7A6F60;
         box-shadow: none;
         cursor: not-allowed;
         transform: none
     }

     .pw-btn-secondary {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 50px;
         border-radius: 14px;
         background: #F1F5F9;
         color: #334155;
         font-family: inherit;
         font-size: 16px;
         font-weight: 700;
         border: 0;
         cursor: pointer;
         transition: all .2s
     }

     .pw-btn-secondary:hover {
         background: #E2E8F0;
         color: #0F172A
     }

     .pw-btn-outline-dashed {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         width: 100%;
         height: 46px;
         border-radius: 12px;
         border: 2px dashed #99F6E4;
         background: transparent;
         color: #0d9488;
         font-family: inherit;
         font-size: 14px;
         font-weight: 700;
         cursor: pointer;
         transition: all .2s
     }

     .pw-btn-outline-dashed:hover {
         background: #F0FDFA;
         border-color: #0d9488
     }

     .pw-pet-choice {
         display: block;
         cursor: pointer;
         position: relative
     }

     .pw-pet-choice input {
         position: absolute;
         opacity: 0;
         pointer-events: none
     }

     .pw-pet-card {
         padding: 14px 18px;
         border-radius: 16px;
         border: 2px solid #E6DDD0;
         background: #FFFFFF;
         display: flex;
         align-items: center;
         justify-content: space-between;
         transition: all .2s
     }

     .pw-pet-choice:hover .pw-pet-card {
         border-color: #99F6E4
     }

     .pw-pet-choice input:checked+.pw-pet-card {
         border-color: #0d9488;
         background: #F0FDFA
     }

     .pw-pet-avatar {
         width: 46px;
         height: 46px;
         border-radius: 50%;
         background: #F8FAFC;
         border: 1px solid #ECE3D6;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 24px
     }

     .pw-check-indicator {
         width: 26px;
         height: 26px;
         border-radius: 50%;
         border: 2px solid #D6CCBD;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         justify-content: center;
         color: transparent;
         transition: all .2s
     }

     .pw-pet-choice input:checked+.pw-pet-card .pw-check-indicator {
         border-color: #0d9488;
         background: #0d9488;
         color: #FFFFFF
     }

     .pw-branch-choice {
         display: block;
         cursor: pointer;
         position: relative
     }

     .pw-branch-choice input {
         position: absolute;
         opacity: 0;
         pointer-events: none
     }

     .pw-branch-card {
         padding: 16px;
         border-radius: 14px;
         border: 2px solid #E6DDD0;
         background: #FFFFFF;
         text-align: center;
         position: relative;
         transition: all .2s
     }

     .pw-branch-choice:hover .pw-branch-card {
         border-color: #99F6E4
     }

     .pw-branch-choice input:checked+.pw-branch-card {
         border-color: #0d9488;
         background: #F0FDFA
     }

     .pw-branch-check {
         position: absolute;
         top: 8px;
         right: 8px;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: #0d9488;
         display: none;
         align-items: center;
         justify-content: center
     }

     .pw-branch-choice input:checked+.pw-branch-card .pw-branch-check {
         display: flex
     }

     .pw-spinner {
         animation: pwSpin 1s linear infinite;
         width: 24px;
         height: 24px
     }

     @keyframes pwSpin {
         from {
             transform: rotate(0deg)
         }

         to {
             transform: rotate(360deg)
         }
     }

     .pw-loc-social-btn {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: #FFFFFF;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         transition: all .2s ease;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         text-decoration: none
     }

     .pw-loc-social-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14)
     }

     .pw-loc-social-cherry {
         border: 1.5px solid #0d9488;
         color: #0d9488
     }

     .pw-loc-social-cherry:hover {
         background: #0d9488;
         color: #FFFFFF
     }

     .pw-loc-social-union {
         border: 1.5px solid #000;
         color: #000
     }

     .pw-loc-social-union:hover {
         background: #000;
         color: #FFFFFF
     }

     .pw-sticky-header {
         position: -webkit-sticky;
         position: sticky;
         top: 0;
         z-index: 1000;
         background: rgba(251, 247, 241, 0.92);
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
         transition: box-shadow .25s ease, background .25s ease, border-color .25s ease
     }

     .pw-sticky-header.is-scrolled {
         background: rgba(251, 247, 241, 0.98);
         box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.1);
         border-bottom-color: rgba(0, 0, 0, 0.08) !important
     }

     /* Responsive Utilities & Layout */
     *,
     *::before,
     *::after {
         box-sizing: border-box
     }

     html {
         scroll-behavior: smooth;
         overflow-x: clip
     }

     body {
         margin: 0;
         background: #FBF7F1;
         color: #000;
         font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
         overflow-x: clip;
         width: 100%
     }

     .pw-site-wrapper {
         width: 100% !important;
         max-width: 1440px !important;
         min-height: 100vh;
         margin: 0 auto;
         box-sizing: border-box;
         overflow-x: clip
     }

     /* Clamp section horizontal paddings */
     .pw-top-bar,
     #mainHeader,
     #top,
     #services,
     #about,
     #gallery,
     #contact,
     #locations,
     .pw-footer {
         padding-left: clamp(18px, 5vw, 120px) !important;
         padding-right: clamp(18px, 5vw, 120px) !important
     }

     /* Mobile Nav Elements */
     .pw-mobile-nav-toggle {
         display: none
     }

     .pw-mobile-drawer {
         display: none;
         background: #FFFFFF;
         border-bottom: 1.5px solid #ECE3D6;
         padding: 20px 24px;
         flex-direction: column;
         gap: 12px;
         position: sticky;
         top: 74px;
         z-index: 999;
         box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08)
     }

     .pw-mobile-drawer.open {
         display: flex !important
     }

     .pw-mobile-link {
         font-size: 17px;
         font-weight: 600;
         color: #000;
         padding: 6px 0;
         text-decoration: none
     }

     .pw-mobile-link:hover {
         color: #0d9488
     }

     .pw-mobile-book-btn {
         display: flex;
         align-items: center;
         gap: 6px;
         height: 40px;
         padding: 0 16px;
         border-radius: 999px;
         background: #0d9488;
         color: #FFFFFF;
         font-weight: 700;
         font-family: inherit;
         font-size: 14px;
         border: 0;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3)
     }

     .pw-menu-btn {
         width: 40px;
         height: 40px;
         border-radius: 10px;
         border: 1.5px solid #ECE3D6;
         background: #FFFFFF;
         color: #000;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer
     }

     /* Gallery Styles */
     .pw-gallery-tab {
         background: transparent;
         color: #B9B2CC;
         border: none;
         font-size: 13px;
         font-weight: 600;
         padding: 7px 16px;
         border-radius: 999px;
         cursor: pointer;
         transition: all .2s ease;
         font-family: inherit
     }

     .pw-gallery-tab:hover {
         color: #FFFFFF
     }

     .pw-gallery-tab.active {
         background: #FFFFFF !important;
         color: #000000 !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
     }

     .pw-gallery-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 18px 36px rgba(255, 122, 0, 0.25) !important;
         border-color: rgba(255, 158, 0, 0.4) !important
     }

     .pw-gallery-card:hover .pw-gallery-img {
         transform: scale(1.06)
     }

     /* Responsive Media Queries */
     @media (max-width: 991px) {
         .pw-desktop-nav {
             display: none !important
         }

         .pw-mobile-nav-toggle {
             display: flex !important;
             align-items: center;
             gap: 10px
         }

         #mainHeader {
             height: 74px !important
         }

         /* Top bar */
         .pw-top-bar {
             height: auto !important;
             padding-top: 10px !important;
             padding-bottom: 10px !important;
             flex-direction: column !important;
             gap: 6px !important;
             text-align: center !important
         }

         .pw-top-bar>div {
             justify-content: center !important
         }

         /* Hero */
         #top {
             flex-direction: column !important;
             padding-top: 40px !important;
             padding-bottom: 50px !important;
             gap: 40px !important;
             text-align: center
         }

         #top h1 {
             font-size: clamp(38px, 9vw, 68px) !important;
             line-height: 1.02 !important;
             letter-spacing: -1.5px !important
         }

         #top p {
             font-size: 18px !important;
             margin: 0 auto !important
         }

         .pw-hero-actions {
             flex-direction: column !important;
             width: 100% !important
         }

         .pw-hero-actions button,
         .pw-hero-actions a {
             width: 100% !important;
             justify-content: center !important
         }

         .pw-hero-badge-pill {
             align-self: center !important
         }

         .pw-hero-phones {
             justify-content: center !important;
             gap: 24px !important
         }

         .pw-hero-img-box {
             width: 100% !important;
             max-width: 440px !important;
             height: 480px !important;
             margin: 0 auto !important
         }

         .pw-hero-img-main {
             width: calc(100% - 24px) !important;
             left: 12px !important;
             height: 440px !important;
             z-index: 1 !important
         }

         .pw-hero-badge-celeb {
             width: 210px !important;
             padding: 16px !important;
             font-size: 20px !important;
             left: 0 !important;
             bottom: 10px !important;
             z-index: 10 !important
         }

         .pw-hero-badge-circle {
             width: 90px !important;
             height: 90px !important;
             right: 0 !important;
             top: 20px !important;
             z-index: 10 !important
         }

         /* Services Horizontal Scroll on Mobile */
         #services {
             padding-top: 60px !important;
             padding-bottom: 60px !important;
             gap: 36px !important
         }

         .pw-services-header {
             flex-direction: column !important;
             align-items: flex-start !important;
             gap: 16px !important
         }

         .pw-services-header h2 {
             font-size: clamp(32px, 7vw, 44px) !important
         }

         .pw-services-grid {
             display: flex !important;
             flex-wrap: nowrap !important;
             overflow-x: auto !important;
             overflow-y: hidden !important;
             scroll-snap-type: x mandatory !important;
             -webkit-overflow-scrolling: touch !important;
             gap: 16px !important;
             padding-bottom: 16px !important;
             margin-right: -18px !important;
             padding-right: 24px !important;
             scrollbar-width: none !important
         }

         .pw-services-grid::-webkit-scrollbar {
             display: none !important
         }

         .pw-services-grid>div {
             flex: 0 0 280px !important;
             width: 280px !important;
             max-width: 280px !important;
             scroll-snap-align: start !important
         }

         /* About */
         #about {
             padding-top: 60px !important;
             padding-bottom: 60px !important;
             gap: 40px !important
         }

         .pw-about-row {
             flex-direction: column !important;
             gap: 36px !important
         }

         .pw-about-img {
             width: 100% !important;
             max-width: 440px !important;
             height: 360px !important;
             margin: 0 auto !important
         }

         .pw-about-title {
             font-size: clamp(32px, 7vw, 44px) !important
         }

         .pw-about-stats {
             grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
             gap: 16px !important
         }

         /* Gallery (Walk of fame) Horizontal Scroll on Mobile */
         #gallery {
             padding-top: 60px !important;
             padding-bottom: 60px !important;
             gap: 32px !important
         }

         .pw-gallery-header {
             flex-direction: column !important;
             align-items: flex-start !important;
             gap: 16px !important
         }

         .pw-gallery-header h2 {
             font-size: clamp(32px, 7vw, 44px) !important
         }

         .pw-gallery-grid {
             display: flex !important;
             flex-wrap: nowrap !important;
             overflow-x: auto !important;
             overflow-y: hidden !important;
             scroll-snap-type: x mandatory !important;
             -webkit-overflow-scrolling: touch !important;
             gap: 14px !important;
             padding-bottom: 16px !important;
             margin-right: -18px !important;
             padding-right: 24px !important;
             scrollbar-width: none !important
         }

         .pw-gallery-grid::-webkit-scrollbar {
             display: none !important
         }

         .pw-gallery-grid>div {
             flex: 0 0 240px !important;
             width: 240px !important;
             max-width: 240px !important;
             height: 260px !important;
             scroll-snap-align: start !important
         }

         /* Contact */
         #contact {
             padding-top: 60px !important;
             padding-bottom: 60px !important;
             flex-direction: column !important;
             gap: 36px !important
         }

         .pw-contact-side {
             width: 100% !important
         }

         .pw-contact-side h2 {
             font-size: clamp(32px, 7vw, 44px) !important
         }

         .pw-contact-form-card {
             width: 100% !important;
             padding: 32px 20px !important;
             min-height: auto !important
         }

         /* Locations */
         #locations {
             padding-bottom: 60px !important;
             grid-template-columns: 1fr !important;
             gap: 20px !important
         }

         /* Footer */
         .pw-footer {
             padding-top: 48px !important;
             padding-bottom: 48px !important;
             gap: 32px !important
         }

         .pw-footer-row1 {
             flex-direction: column !important;
             gap: 20px !important;
             text-align: center !important;
             align-items: center !important
         }

         .pw-footer-row2 {
             flex-direction: column !important;
             gap: 16px !important;
             text-align: center !important;
             align-items: center !important
         }
     }

     @media (max-width: 600px) {
         .pw-about-stats {
             grid-template-columns: 1fr !important
         }

         .pw-form-row {
             grid-template-columns: 1fr !important
         }

         .pw-hero-phones {
             flex-direction: column !important;
             align-items: center !important;
             gap: 14px !important
         }

         .pw-loc-social-btn {
             width: 46px !important;
             height: 46px !important
         }
     }

     html {
         scroll-behavior: smooth
     }

     #services,
     #about,
     #gallery,
     #locations,
     #contact {
         scroll-margin-top: 104px
     }

     #top {
         scroll-margin-top: 0
     }

     #logo {
         max-width: 60px;
     }

     .countIndex {
         height: 8px;
         cursor: pointer;
         transition: all .3s;
         background: rgba(255, 255, 255, 0.6);

     }

     .countIndex.actived {
         width: 24px;
         background: #FF9E00;
     }

     /* Lite-Light Lightbox layer priority */
     .lite-light {
         z-index: 999999 !important;
     }